/* Editorial landing design system (fin.ai-style).
 *
 * Extracted from the /why and /ai-agent redesign so a page doesn't have to carry
 * ~900 lines of its own <style>. Standalone: does NOT depend on the Tailwind build,
 * only on the fonts public_base.html already loads (Source Serif 4, JetBrains Mono).
 *
 * A page opts in with:  {% block body_class %}ed-page{% endblock %}
 * and wraps its content in .ed-landing.
 */

:root {
    --ed-ink: #10100f;
    --ed-paper: #f4f2ed;
    --ed-white: #fffefa;
    --ed-accent: #ff5426;
    --ed-line: rgba(16, 16, 15, 0.16);
    --ed-muted: rgba(16, 16, 15, 0.62);
}

html { scroll-behavior: smooth; }

/* The site header is built for the dark navy shell; on a paper page it has to
 * invert, or the white nav text lands on a near-white background. */
body.ed-page { background: var(--ed-paper); color: var(--ed-ink); overflow-x: hidden; }
body.ed-page > header {
    background: rgba(244, 242, 237, 0.88) !important;
    border-color: var(--ed-line) !important;
    backdrop-filter: blur(24px) !important;
}
body.ed-page > header a,
body.ed-page > header button { color: var(--ed-ink) !important; }
body.ed-page > header a[href*="register"] {
    background: var(--ed-ink) !important;
    color: var(--ed-white) !important;
}
body.ed-page > header img { filter: none; }

.ed-landing * { box-sizing: border-box; }
.ed-wrap { width: min(100% - 48px, 1180px); margin-inline: auto; }
.ed-serif { font-family: "Source Serif 4", Georgia, serif; }
.ed-mono { font-family: "JetBrains Mono", monospace; }

/* --- kicker (section label) --- */
.ed-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 500 11px/1 "JetBrains Mono", monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ed-kicker::before { content: ""; width: 34px; border-top: 1px solid currentColor; }

/* --- hero --- */
.ed-hero {
    position: relative;
    padding: clamp(96px, 12vw, 150px) 0 clamp(56px, 7vw, 90px);
    overflow: hidden;
    border-bottom: 1px solid var(--ed-line);
}
.ed-hero h1 {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin-top: 26px;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 300;
    letter-spacing: -.055em;
    line-height: .9;
    font-size: clamp(44px, 7.4vw, 104px);
}
.ed-hero h1 em { font-style: normal; color: var(--ed-accent); }
.ed-hero-copy {
    position: relative;
    z-index: 3;
    width: min(520px, 100%);
    margin-top: clamp(28px, 4vh, 44px);
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.45;
    color: var(--ed-muted);
}

/* --- buttons --- */
.ed-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.ed-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 22px;
    border: 1px solid var(--ed-ink);
    border-radius: 5px;
    background: var(--ed-ink);
    color: var(--ed-white);
    font-size: 14px;
    text-decoration: none;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .25s, color .25s;
}
.ed-button:hover { transform: translateY(-3px); background: var(--ed-accent); border-color: var(--ed-accent); }
.ed-button--ghost { background: transparent; color: var(--ed-ink); }
.ed-button--ghost:hover { background: var(--ed-white); color: var(--ed-ink); border-color: var(--ed-ink); }
.ed-button svg { width: 17px; transition: transform .25s; }
.ed-button:hover svg { transform: translateX(4px); }

/* --- sections --- */
.ed-section {
    position: relative;
    padding: clamp(72px, 9vw, 132px) 0;
    border-bottom: 1px solid var(--ed-line);
    scroll-margin-top: 65px;
}
.ed-section--white { background: var(--ed-white); }
.ed-section--ink { background: var(--ed-ink); color: var(--ed-paper); border-color: rgba(255,255,255,.14); }
.ed-section--ink .ed-lead { color: rgba(244,242,237,.68); }
.ed-section-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); }
.ed-number { font: 400 clamp(22px, 3vw, 34px)/1 "Source Serif 4", serif; opacity: .5; }
.ed-section h2 {
    max-width: 930px;
    font: 300 clamp(34px, 5.2vw, 74px)/.96 "Source Serif 4", serif;
    letter-spacing: -.05em;
}
.ed-lead {
    max-width: 620px;
    margin: 22px 0 0 72px;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.5;
    color: var(--ed-muted);
}

/* --- reveal on scroll ---
 * Progressive enhancement, NOT a default. The content is visible as authored; only
 * a page that has proved JS runs (html.ed-js, set by an inline script) hides it to
 * animate it back in. Hiding by default would mean a blank page whenever the script
 * fails — and opacity:0 body copy is text a crawler is entitled to distrust. */
.ed-reveal { transition: opacity .8s ease, transform .8s cubic-bezier(.16, 1, .3, 1); }
.ed-js .ed-reveal { opacity: 0; transform: translateY(38px); }
.ed-js .ed-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .ed-js .ed-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- cards / steps --- */
.ed-cards { display: grid; gap: 16px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ed-card {
    padding: clamp(22px, 2.5vw, 32px);
    background: var(--ed-white);
    border: 1px solid var(--ed-line);
    border-radius: 6px;
}
.ed-section--white .ed-card { background: var(--ed-paper); }
.ed-section--ink .ed-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.ed-card-index { font: 500 11px/1 "JetBrains Mono", monospace; color: var(--ed-accent); letter-spacing: .08em; }
.ed-card h3 { margin: 16px 0 10px; font: 400 clamp(20px, 2vw, 26px)/1.15 "Source Serif 4", serif; letter-spacing: -.02em; }
.ed-card p { font-size: 15px; line-height: 1.55; color: var(--ed-muted); }
.ed-section--ink .ed-card p { color: rgba(244,242,237,.66); }

/* --- stat row --- */
.ed-stats { display: grid; gap: 16px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ed-stat-value {
    font: 300 clamp(48px, 6vw, 84px)/.85 "Source Serif 4", serif;
    letter-spacing: -.06em;
}
.ed-stat-value sup { color: var(--ed-accent); font-size: .3em; letter-spacing: 0; }
.ed-stat-label { margin-top: 14px; font-size: 14px; line-height: 1.4; color: var(--ed-muted); }
.ed-section--ink .ed-stat-label { color: rgba(244,242,237,.62); }

/* --- niche chips (pillar page) --- */
.ed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.ed-chip {
    padding: 9px 15px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: var(--ed-white);
    font-size: 14px;
    color: var(--ed-ink);
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.ed-chip:hover { background: var(--ed-ink); color: var(--ed-white); border-color: var(--ed-ink); }

/* --- dialog demo --- */
.ed-dialog {
    max-width: 560px;
    margin-top: 56px;
    padding: clamp(18px, 2vw, 26px);
    background: var(--ed-white);
    border: 1px solid var(--ed-line);
    border-radius: 8px;
}
.ed-section--ink .ed-dialog { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.ed-msg {
    max-width: 82%;
    margin-bottom: 10px;
    padding: 11px 15px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.45;
    transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.ed-js .ed-msg { opacity: 0; transform: translateY(10px); }
.ed-js .ed-msg.show { opacity: 1; transform: none; }
.ed-msg--user { margin-left: auto; background: var(--ed-ink); color: var(--ed-white); border-bottom-right-radius: 4px; }
.ed-msg--bot { background: var(--ed-paper); color: var(--ed-ink); border: 1px solid var(--ed-line); border-bottom-left-radius: 4px; }
.ed-section--ink .ed-msg--bot { background: rgba(255,255,255,.08); color: var(--ed-paper); border-color: rgba(255,255,255,.14); }
.ed-msg--book { border-color: var(--ed-accent); }
.ed-msg--book strong { color: var(--ed-accent); }
@media (prefers-reduced-motion: reduce) {
    .ed-js .ed-msg { opacity: 1; transform: none; }
}

/* ==========================================================================
 * Signature visuals
 * ========================================================================== */

/* --- hero mark: the Atolko "A" (chevron + rising arrow, as in the logo), tumbling
 * slowly in space. The reference page floats an abstract blob here; ours has to
 * read as the letter, so the rotation is a limited 3D tumble on a tilted axis
 * rather than a flat spin — a flat spin would turn the A upside down, and an
 * upside-down A stops being a letter. */
.ed-mark {
    position: absolute;
    /* Sits fully inside the viewport: the tumble swings the arrow outward, and a
       clipped arrowhead reads as a bug rather than a bleed. */
    right: 2vw;
    top: 13%;
    width: clamp(240px, 32vw, 480px);
    aspect-ratio: 1;
    pointer-events: none;
    perspective: 1000px;
    animation: edMarkFloat 8s ease-in-out infinite;
}
.ed-mark-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: edMarkTumble 18s ease-in-out infinite;
    filter: drop-shadow(0 26px 34px rgba(255, 84, 38, .28));
}
.ed-mark svg { width: 100%; height: 100%; overflow: visible; }
.ed-mark .mark-face { fill: url(#edMarkGrad); }
.ed-mark .mark-arrow { fill: var(--ed-white); }
/* A faint offset copy behind the face fakes extrusion as the shape turns. */
.ed-mark .mark-depth { fill: #b8340f; transform: translate3d(0, 0, -18px); opacity: .55; }

@keyframes edMarkTumble {
    0%   { transform: rotateX(14deg) rotateY(-26deg) rotateZ(-3deg); }
    50%  { transform: rotateX(-8deg) rotateY(28deg) rotateZ(4deg); }
    100% { transform: rotateX(14deg) rotateY(-26deg) rotateZ(-3deg); }
}
@keyframes edMarkFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-14px, -22px, 0); }
}
@media (max-width: 900px) { .ed-mark { opacity: .3; right: -20vw; top: auto; bottom: -2%; } }

/* Niche satellite: a small object orbiting the A. The orbit layer spins a full
 * circle; the satellite counter-spins at the same rate so the lipstick/pole/
 * phone/drop stays upright all the way round — an upside-down phone reads as a
 * glitch, not an orbit. */
.ed-mark-orbit {
    position: absolute;
    inset: -7%;
    pointer-events: none;
    animation: edSatOrbit 20s linear infinite;
}
.ed-mark-sat {
    position: absolute;
    top: -3%;
    left: 50%;
    width: 26%;
    aspect-ratio: 1;
    margin-left: -13%;
    animation: edSatCounter 20s linear infinite;
    filter: drop-shadow(0 12px 16px rgba(16, 16, 15, .12));
}
/* Paper badge under the object: without it the orange silhouette dissolves into
   the orange A every time the orbit crosses the letter. */
.ed-mark-sat::before {
    content: "";
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: var(--ed-white);
    border: 1px solid var(--ed-line);
}
.ed-mark-sat svg { position: relative; width: 100%; height: 100%; }
@keyframes edSatOrbit { to { transform: rotate(360deg); } }
@keyframes edSatCounter { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ed-mark, .ed-mark-inner, .ed-mark-orbit, .ed-mark-sat { animation: none; }
    .ed-mark-inner { transform: rotateX(10deg) rotateY(-18deg); }
    /* Parked at the A's top-right shoulder instead of orbiting. */
    .ed-mark-orbit { transform: rotate(45deg); }
    .ed-mark-sat { transform: rotate(-45deg); }
}

/* --- niche ticker (marquee) --- */
.ed-ticker { overflow: hidden; border-bottom: 1px solid var(--ed-line); background: var(--ed-white); }
.ed-ticker-track { display: flex; width: max-content; animation: edTicker 34s linear infinite; }
.ed-ticker-track span {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 16px 30px 16px 0;
    font: 500 12px/1 "JetBrains Mono", monospace;
    text-transform: uppercase;
    white-space: nowrap;
}
.ed-ticker-track span::after { content: "✦"; color: var(--ed-accent); }
@keyframes edTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ed-ticker-track { animation: none; } }

/* --- booking grid: the signature visual. Empty windows fill up as you watch. --- */
.ed-grid-board {
    margin-top: 56px;
    padding: clamp(18px, 3vw, 40px);
    background: var(--ed-white);
    border: 1px solid var(--ed-line);
    border-radius: 8px;
}
.ed-section--ink .ed-grid-board { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.ed-grid-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ed-grid-count { font: 300 clamp(52px, 8vw, 104px)/.8 "Source Serif 4", serif; letter-spacing: -.06em; }
.ed-grid-count sup { color: var(--ed-accent); font-size: .3em; letter-spacing: 0; }
.ed-grid-note { max-width: 260px; font-size: 14px; line-height: 1.4; color: var(--ed-muted); }
.ed-section--ink .ed-grid-note { color: rgba(244,242,237,.62); }
.ed-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 6px;
    margin-top: 34px;
}
.ed-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid var(--ed-line);
    border-radius: 4px;
    font: 500 12px/1 "JetBrains Mono", monospace;
    color: var(--ed-muted);
    background: transparent;
    transition: background .45s ease, color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.ed-section--ink .ed-slot { border-color: rgba(255,255,255,.18); color: rgba(244,242,237,.5); }
.ed-slot.is-booked {
    background: var(--ed-accent);
    border-color: var(--ed-accent);
    color: var(--ed-white);
    transform: translateY(-2px);
}
.ed-grid-legend { display: flex; gap: 20px; margin-top: 20px; font: 500 11px/1 "JetBrains Mono", monospace; text-transform: uppercase; color: var(--ed-muted); }
.ed-grid-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 2px; border: 1px solid var(--ed-line); vertical-align: -1px; }
.ed-grid-legend i.booked { background: var(--ed-accent); border-color: var(--ed-accent); }

/* --- chapter navigator --- */
/* A dot rail, not a label list: the left gutter is only ~130px at 1440px, and a
 * text nav parked there lands straight on the headline. Dots fit the gutter; the
 * label appears on hover, where an overlap is intentional and temporary.
 * Bottom-left is off limits — the chat widget owns it. */
.ed-chapters {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: none;
    flex-direction: column;
    gap: 14px;
}
@media (min-width: 1280px) { .ed-chapters { display: flex; } }
.ed-chapters a {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    border: 1px solid var(--ed-muted);
    border-radius: 50%;
    font-size: 0;
    transition: background .25s, border-color .25s, transform .25s;
}
.ed-chapters a::after {
    content: attr(data-label);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 9px;
    border: 1px solid var(--ed-line);
    border-radius: 5px;
    background: var(--ed-white);
    font: 500 10px/1 "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ed-ink);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.ed-chapters a:hover { border-color: var(--ed-ink); transform: scale(1.25); }
.ed-chapters a:hover::after { opacity: 1; }
.ed-chapters a.is-current { background: var(--ed-accent); border-color: var(--ed-accent); }

/* --- FAQ --- */
.ed-faq { margin-top: 56px; border-top: 1px solid var(--ed-line); }
.ed-faq details { border-bottom: 1px solid var(--ed-line); }
.ed-faq summary {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font: 400 clamp(17px, 1.6vw, 21px)/1.3 "Source Serif 4", serif;
}
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::after { content: "+"; flex-shrink: 0; font-size: 22px; transition: transform .25s; }
.ed-faq details[open] summary::after { transform: rotate(45deg); }
.ed-faq p { padding: 0 0 22px; max-width: 780px; font-size: 15px; line-height: 1.6; color: var(--ed-muted); }

/* --- final CTA — solid accent field with a slowly-spinning organic ring,
 * ported from /ai-agent ("Ваш лучший диалог начинается здесь"). --- */
.ed-final {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 72vh;
    padding: clamp(84px, 11vw, 150px) 24px;
    overflow: hidden;
    background: var(--ed-accent);
    color: var(--ed-ink);
    text-align: center;
}
.ed-final-inner { position: relative; z-index: 2; }
.ed-final-ring {
    position: absolute;
    width: 70vw;
    min-width: 700px;
    aspect-ratio: 1;
    border: 80px solid rgba(255, 255, 255, .14);
    border-radius: 45% 55% 61% 39%;
    animation: edFinalSpin 24s linear infinite;
}
@keyframes edFinalSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-final-ring { animation: none; } }
.ed-final h2 {
    max-width: 980px;
    margin-inline: auto;
    font: 300 clamp(40px, 7vw, 108px)/.88 "Source Serif 4", serif;
    letter-spacing: -.06em;
}
.ed-final p { max-width: 520px; margin: 30px auto 0; font-size: 18px; line-height: 1.5; color: rgba(16,16,15,.78); }
.ed-final .ed-actions { justify-content: center; }
.ed-final .ed-button { background: var(--ed-ink); color: var(--ed-white); border-color: var(--ed-ink); }
.ed-final .ed-button:hover { background: var(--ed-white); color: var(--ed-ink); border-color: var(--ed-white); transform: translateY(-3px); }
.ed-final .ed-button--ghost { background: transparent; color: var(--ed-ink); border-color: rgba(16,16,15,.45); }
.ed-final .ed-button--ghost:hover { background: rgba(255,255,255,.35); color: var(--ed-ink); border-color: var(--ed-ink); }

/* --- numbered step flow (the "how it works" funnel) --- */
.ed-steps { margin-top: 56px; }
.ed-step {
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    gap: 16px;
    padding: clamp(22px, 3vw, 34px) 0;
    border-top: 1px solid var(--ed-line);
    transition-delay: calc(var(--i, 0) * 120ms);
}
.ed-step:last-child { border-bottom: 1px solid var(--ed-line); }
.ed-step-num { padding-top: 8px; font: 500 12px/1 "JetBrains Mono", monospace; color: var(--ed-accent); }
.ed-step h3 { font: 400 clamp(21px, 2.4vw, 30px)/1.12 "Source Serif 4", serif; letter-spacing: -.02em; }
.ed-step p { max-width: 620px; margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ed-muted); }
.ed-step-icon {
    width: 52px;
    height: 52px;
    justify-self: end;
    align-self: center;
    color: var(--ed-accent);
    opacity: .9;
}
.ed-step-icon svg { width: 100%; height: 100%; }
@media (max-width: 700px) {
    .ed-step { grid-template-columns: 44px 1fr 40px; }
    .ed-step-icon { width: 34px; height: 34px; }
}

/* --- service logo tiles on integration cards --- */
.ed-card-logos { display: flex; gap: 8px; margin-bottom: 18px; }
.ed-logo-tile {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
}
.ed-logo-tile b { font: 600 18px/1 "Inter", sans-serif; color: #fff; }
.ed-logo-tile--img {
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--ed-line);
    padding: 6px;
}

/* --- night strip: messages landing while the salon is closed --- */
.ed-night {
    margin-top: 56px;
    padding: clamp(20px, 3vw, 40px);
    background: var(--ed-white);
    border: 1px solid var(--ed-line);
    border-radius: 8px;
}
.ed-section--white .ed-night { background: var(--ed-paper); }
.ed-night-track { position: relative; height: 110px; margin-top: 34px; }
.ed-night-band {
    position: absolute;
    left: 0; right: 0; bottom: 26px;
    height: 34px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(16,16,15,.05), rgba(16,16,15,.18) 28%, rgba(16,16,15,.18) 72%, rgba(16,16,15,.05));
}
.ed-night-msg {
    position: absolute;
    bottom: 36px;
    transform: translateX(-50%);
    text-align: center;
    transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.ed-js .ed-night-msg { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.7); }
.ed-js .ed-night-msg.show { opacity: 1; transform: translateX(-50%); }
.ed-night-msg i {
    display: block;
    width: 12px; height: 12px;
    margin-inline: auto;
    background: var(--ed-accent);
    border: 2px solid var(--ed-white);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255,84,38,.22);
}
.ed-night-msg span {
    display: block;
    margin-bottom: 7px;
    font: 500 10px/1 "JetBrains Mono", monospace;
    color: var(--ed-muted);
}
.ed-night-legend {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font: 500 11px/1.4 "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ed-muted);
}
.ed-night-legend b { font-weight: 500; color: var(--ed-accent); }
@media (max-width: 700px) { .ed-night-msg span { display: none; } }

/* --- admin vs bot comparison --- */
.ed-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
@media (max-width: 760px) { .ed-vs { grid-template-columns: 1fr; } }
.ed-vs-col {
    padding: clamp(22px, 2.6vw, 36px);
    background: var(--ed-white);
    border: 1px solid var(--ed-line);
    border-radius: 8px;
}
.ed-vs-col--bot { background: var(--ed-ink); border-color: var(--ed-ink); color: var(--ed-paper); }
.ed-vs-title { font: 500 11px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--ed-muted); }
.ed-vs-col--bot .ed-vs-title { color: var(--ed-accent); }
.ed-vs-col ul { margin-top: 20px; list-style: none; padding: 0; }
.ed-vs-col li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid var(--ed-line);
    font-size: 15px;
    line-height: 1.45;
}
.ed-vs-col--bot li { border-color: rgba(255,255,255,.14); }
.ed-vs-col li i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ed-muted); }
.ed-vs-col--bot li i { color: var(--ed-accent); }

/* --- channel pills --- */
.ed-channels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.ed-channel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: var(--ed-white);
    font-size: 15px;
    transition-delay: calc(var(--i, 0) * 70ms);
}
.ed-section--white .ed-channel { background: var(--ed-paper); }
.ed-channel i { width: 8px; height: 8px; border-radius: 50%; background: var(--ed-accent); }
.ed-channels-note { margin-top: 18px; font-size: 13px; color: var(--ed-muted); }

/* --- responsive --- */
@media (max-width: 700px) {
    .ed-section-head { grid-template-columns: 1fr; }
    .ed-number { margin-bottom: 12px; }
    .ed-lead { margin-left: 0; }
}

/* ==========================================================================
 * Product demos (beauty only): faithful, animated mockups of the real
 * interfaces. Same contract as the other devices — the markup carries the
 * truth, a one-shot observer only PACES the reveal, and every device shows a
 * complete final state under reduced-motion. All chrome uses the --ed-* tokens.
 * ========================================================================== */

/* --- A) in-widget booking wizard (mirrors .autobot-wz-* geometry) --- */
.edw { max-width: 460px; margin-top: 56px; }
.edw-card {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(16, 16, 15, .08);
    border-radius: 22px;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(255, 84, 38, .10), rgba(255, 255, 255, 0) 60%),
        var(--ed-white);
    box-shadow: 0 26px 64px -26px rgba(16, 16, 15, .34), 0 2px 8px rgba(16, 16, 15, .05);
}
.edw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.edw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ed-accent); box-shadow: 0 0 0 4px rgba(255, 84, 38, .16); flex: none; }
.edw-head b { font: 600 12px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edw-head > span:last-child { margin-left: auto; font: 500 10px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--ed-muted); }
.edw-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.edw-crumb { font: 500 11px/1 "Inter", system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: rgba(16, 16, 15, .05); color: var(--ed-muted); white-space: nowrap; transition: background .2s, color .2s; }
.edw-crumb.is-past { background: rgba(255, 84, 38, .10); color: var(--ed-accent); }
.edw-crumb.is-current { background: var(--ed-accent); color: #fff; }
.edw-sep { color: rgba(16, 16, 15, .3); font-size: 11px; }
.edw-stage { position: static; }
.ed-js .edw-stage { position: relative; min-height: 412px; }
.edw-screen { display: flex; flex-direction: column; gap: 8px; }
.ed-js .edw-screen {
    position: absolute; inset: 0;
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
}
.ed-js .edw-screen.is-active { opacity: 1; transform: none; }
.edw-title { font: 700 16px/1.25 "Inter", system-ui, sans-serif; color: var(--ed-ink); letter-spacing: -.015em; margin-bottom: 4px; }
.edw-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.edw-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 13px 15px; border: 1px solid rgba(16, 16, 15, .08); border-radius: 16px; background: var(--ed-white);
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.edw-row.is-picked { border-color: rgba(255, 84, 38, .55); box-shadow: 0 8px 22px -10px rgba(255, 84, 38, .5); transform: translateY(-2px); }
.edw-row-staff { justify-content: flex-start; }
.edw-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.edw-row-name { font: 600 14px/1.3 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edw-row-sub { font-size: 12px; color: var(--ed-muted); }
.edw-row-price { font: 700 13px/1 "Inter", system-ui, sans-serif; color: var(--ed-accent); white-space: nowrap; }
.edw-row-rate { font: 500 12px/1 "JetBrains Mono", monospace; color: var(--ed-muted); white-space: nowrap; }
.edw-av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 84, 38, .12); box-shadow: 0 0 0 3px rgba(255, 84, 38, .08); color: var(--ed-accent); font: 700 16px/1 "Inter", system-ui, sans-serif; }
.edw-cal { padding: 14px; border: 1px solid rgba(16, 16, 15, .06); border-radius: 18px; background: var(--ed-white); }
.edw-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.edw-cal-month { font: 700 15px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edw-cal-nav { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 84, 38, .08); color: var(--ed-ink); font-size: 16px; }
.edw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.edw-dow { font: 600 10px/1 "JetBrains Mono", monospace; text-align: center; color: var(--ed-muted); text-transform: uppercase; padding: 2px 0; }
.edw-day { aspect-ratio: 1; display: grid; place-items: center; font: 600 13px/1 "Inter", system-ui, sans-serif; border-radius: 11px; border: 1px solid transparent; color: rgba(16, 16, 15, .32); }
.edw-day.avail { color: var(--ed-ink); background: rgba(255, 84, 38, .10); border-color: rgba(255, 84, 38, .20); }
.edw-day.empty { visibility: hidden; }
.edw-day.is-picked { background: linear-gradient(135deg, #ff7a4d, #ff5426); border-color: transparent; color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 84, 38, .7); }
.edw-times { display: flex; flex-wrap: wrap; gap: 8px; }
.edw-slot { padding: 10px 15px; font: 600 14px/1 "Inter", system-ui, sans-serif; border: 1px solid rgba(16, 16, 15, .1); border-radius: 12px; background: var(--ed-white); color: var(--ed-ink); }
.edw-slot.is-picked { background: linear-gradient(135deg, #ff7a4d, #ff5426); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px rgba(255, 84, 38, .6); }
.edw-field { display: flex; flex-direction: column; gap: 6px; }
.edw-flabel { font: 600 12px/1 "Inter", system-ui, sans-serif; color: rgba(16, 16, 15, .7); }
.edw-input { padding: 13px 15px; font: 400 15px/1.2 "Inter", system-ui, sans-serif; border: 1.5px solid rgba(16, 16, 15, .12); border-radius: 13px; color: rgba(16, 16, 15, .38); background: var(--ed-white); }
.edw-input.is-filled { color: var(--ed-ink); border-color: rgba(255, 84, 38, .5); box-shadow: 0 0 0 3px rgba(255, 84, 38, .12); }
.edw-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--ed-muted); line-height: 1.4; }
.edw-check { width: 16px; height: 16px; flex: none; border: 1.5px solid rgba(16, 16, 15, .3); border-radius: 5px; margin-top: 1px; display: grid; place-items: center; color: #fff; font-size: 11px; }
.edw-check.is-on { background: var(--ed-accent); border-color: var(--ed-accent); }
.edw-check.is-on::after { content: "✓"; }
.edw-submit { margin-top: 2px; padding: 14px; font: 700 15px/1 "Inter", system-ui, sans-serif; color: #fff; text-align: center; border-radius: 14px; background: linear-gradient(135deg, #ff7a4d, #ff5426); box-shadow: 0 10px 26px -10px rgba(255, 84, 38, .75); }
.edw-done { flex: 1; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.edw-seal { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 84, 38, .12); color: var(--ed-accent); }
.edw-seal svg { width: 34px; height: 34px; }
.edw-done-title { font: 700 18px/1.3 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edw-summary { font-size: 14px; color: var(--ed-muted); line-height: 1.55; max-width: 300px; }
.edw-summary b { color: var(--ed-ink); }
@media (prefers-reduced-motion: reduce) {
    .ed-js .edw-screen { transition: none; }
}

/* --- B) literal phone: light messenger UI inside a device shell, themeable per app --- */
.edph-wrap { margin-top: 56px; }
.edph-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 24px; }
.edph-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: var(--ed-paper); font: 600 12px/1 "Inter", system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.edph-tab i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.edph-tab:hover { background: rgba(255, 255, 255, .14); }
.edph-tab.is-on { background: #fff; color: var(--ed-ink); border-color: #fff; }
.edph-tab:focus-visible { outline: 2px solid var(--ed-accent); outline-offset: 2px; }
.edph-channels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
/* Messenger logos here are circular artwork — clip the tile to a circle so it
   doesn't read as a round icon inside a white square. */
.edph-channels .ed-chan-ico { border-radius: 50%; }
.edph { --msgr: #1c74d4; --msgr-out: #e7f1fd; max-width: 340px; margin: 0 auto; }
.edph[data-msgr="whatsapp"] { --msgr: #12854a; --msgr-out: #dcf8c6; }
.edph[data-msgr="max"] { --msgr: #6a34e0; --msgr-out: #ece7ff; }
.edph-shell {
    position: relative;
    padding: 12px;
    border-radius: 46px;
    background: linear-gradient(160deg, #23262b, #0c0d10);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .06);
}
.edph-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 120px; height: 22px; border-radius: 0 0 16px 16px; background: #0c0d10; z-index: 3; }
.edph-screen { position: relative; border-radius: 36px; overflow: hidden; background: #cdd6e2; }
.edph-status { display: flex; justify-content: space-between; align-items: center; padding: 11px 22px 6px; background: #fff; font: 700 12px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edph-status-ico { display: flex; align-items: center; gap: 5px; }
.edph-status-ico i { width: 15px; height: 10px; border-radius: 2px; background: rgba(16, 16, 15, .7); }
.edph-status-ico i:nth-child(2) { width: 12px; }
.edph-status-ico b { position: relative; width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid rgba(16, 16, 15, .7); }
.edph-status-ico b::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; right: 6px; background: var(--ed-ink); border-radius: 1px; }
.edph-tgbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; background: #fff; border-bottom: 1px solid rgba(16, 16, 15, .07); }
.edph-back { color: var(--msgr); font-size: 25px; line-height: 1; }
.edph-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #ff7a4d, #ff5426); display: grid; place-items: center; color: #fff; font: 700 14px/1 "Inter", system-ui, sans-serif; }
.edph-peer { display: flex; flex-direction: column; gap: 3px; }
.edph-peer b { font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edph-peer span { font: 400 11px/1 "Inter", system-ui, sans-serif; color: var(--msgr); }
.edph-menu { margin-left: auto; color: rgba(16, 16, 15, .5); font-size: 18px; letter-spacing: -2px; }
.edph-feed {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 12px 18px; max-height: 560px; overflow-y: auto;
    background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .5), transparent 42%), #cdd6e2;
}
.ed-js .edph-item { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.ed-js .edph-item.show { opacity: 1; transform: none; }
.edph-bubble { position: relative; max-width: 82%; width: fit-content; padding: 7px 11px 8px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; color: var(--ed-ink); box-shadow: 0 1px 1px rgba(16, 16, 15, .08); }
.edph-bubble.in { background: #fff; border-top-left-radius: 4px; }
.edph-bubble.out { margin-left: auto; background: var(--msgr-out); border-top-right-radius: 4px; }
.edph-time { float: right; margin: 6px 0 -2px 10px; font: 500 10px/1 "Inter", system-ui, sans-serif; color: rgba(16, 16, 15, .38); }
.edph-tick { color: var(--msgr); font-size: 10px; }
.edph-kb { display: grid; gap: 4px; margin-top: 2px; }
.edph-kb.row { grid-template-columns: 1fr 1fr; }
.edph-kb.three { grid-template-columns: 1fr 1fr 1fr; }
.edph-kbtn { padding: 10px 8px; text-align: center; border-radius: 9px; background: rgba(255, 255, 255, .92); color: var(--msgr); font: 600 12px/1.2 "Inter", system-ui, sans-serif; box-shadow: 0 1px 2px rgba(16, 16, 15, .08); }
.edph-kbtn.hot { background: var(--msgr); color: #fff; }
.edph-kbtn.ok { background: #4dc247; color: #fff; }
.edph-cal { margin-top: 4px; display: grid; gap: 5px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .92); }
.edph-cal-head { display: flex; justify-content: space-between; align-items: center; font: 700 12px/1 "Inter", system-ui, sans-serif; color: var(--msgr); }
.edph-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.edph-cal-grid span { text-align: center; font: 600 9px/1 "JetBrains Mono", monospace; color: rgba(16, 16, 15, .4); }
.edph-cal-grid b { text-align: center; padding: 6px 0; border-radius: 7px; background: rgba(51, 144, 236, .10); font: 600 11px/1 "Inter", system-ui, sans-serif; color: var(--msgr); }
.edph-cal-grid b.sel { background: var(--msgr); color: #fff; }
.edph-cal-grid b.mute { background: transparent; color: rgba(16, 16, 15, .3); }
.edph-reply { margin-top: 8px; }
.edph-rbtn { display: block; padding: 12px; text-align: center; border-radius: 10px; background: rgba(255, 255, 255, .95); color: var(--msgr); font: 600 13px/1 "Inter", system-ui, sans-serif; box-shadow: 0 1px 2px rgba(16, 16, 15, .1); }
@media (prefers-reduced-motion: reduce) { .ed-js .edph-item { opacity: 1; transform: none; } }
@media (max-width: 420px) { .edph { max-width: 300px; } }

/* --- C) delivery cascade: a packet drops the channel ladder until one reads it --- */
.edc { margin-top: 56px; }
.edc-ladder { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 34px; }
.edc-rail { position: absolute; left: 12px; top: 22px; bottom: 22px; width: 2px; background: rgba(255, 255, 255, .14); }
.edc-dot { position: absolute; left: 6px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ed-accent); box-shadow: 0 0 0 5px rgba(255, 84, 38, .25); opacity: 0; transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
.edc-dot.on { opacity: 1; }
.edc-rung {
    display: flex; align-items: center; gap: 14px; justify-content: space-between;
    padding: 14px 18px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05);
    transition: border-color .4s, background .4s, opacity .4s;
}
.edc-rung-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.edc-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: #fff; padding: 4px; overflow: hidden; }
.edc-ico .ed-chan-ico { width: 100%; height: 100%; }
.edc-rung.is-passed .edc-ico { filter: grayscale(.6); }
.edc-rung.is-skipped .edc-ico { filter: grayscale(1); opacity: .8; }
.edc-ch { font: 600 15px/1 "Inter", system-ui, sans-serif; color: var(--ed-paper); }
.edc-status { font: 500 11px/1.3 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .04em; color: rgba(244, 242, 237, .5); text-align: right; }
.edc-rung.is-active { border-color: var(--ed-accent); background: rgba(255, 84, 38, .10); }
.edc-rung.is-active .edc-status { color: var(--ed-accent); }
.edc-rung.is-passed { opacity: .5; }
.edc-rung.is-delivered { border-color: #35d07f; background: rgba(53, 208, 127, .12); }
.edc-rung.is-delivered .edc-status { color: #35d07f; }
.edc-rung.is-skipped { opacity: .3; }
.edc-cap { margin-top: 24px; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: rgba(244, 242, 237, .74); }
.edc-cap svg { flex: none; width: 20px; height: 20px; color: #35d07f; margin-top: 1px; }
/* сноска про Meta — обязательна везде, где на странице стоит Instagram* */
.edc-fn { margin-top: 18px; max-width: 720px; font-size: 11.5px; line-height: 1.5; color: rgba(244, 242, 237, .45); }

/* --- D) unified inbox: every channel streams into one AI-handled column --- */
.edi { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.edi-sources { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.edi-src { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--ed-line); border-radius: 12px; background: var(--ed-white); transition-delay: calc(var(--i, 0) * 90ms); }
.edi-src i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.edi-src b { font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edi-src > span { margin-left: auto; font: 500 11px/1 "JetBrains Mono", monospace; color: var(--ed-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The «site» source uses a <span> icon (others are <img>); the rule above is
   meant for the quote text, so keep the icon flush-left like the rest. */
.edi-src > span.ed-chan-ico { margin-left: 0; }
.edi-link { align-self: stretch; }
.edi-link svg { width: 100%; height: 100%; min-height: 200px; overflow: visible; display: block; }
.edi-link path { fill: none; stroke: var(--ed-accent); stroke-width: 1.5; stroke-opacity: .5; stroke-dasharray: 4 6; animation: ediFlow 1.4s linear infinite; }
@keyframes ediFlow { to { stroke-dashoffset: -20; } }
.edi-inbox { border: 1px solid var(--ed-line); border-radius: 16px; background: var(--ed-white); box-shadow: 0 26px 64px -32px rgba(16, 16, 15, .3); overflow: hidden; align-self: center; }
.edi-inbox-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ed-line); }
.edi-inbox-head b { font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edi-brand { flex: none; width: 20px; height: 20px; object-fit: contain; }
.edi-inbox-head > span:last-child { margin-left: auto; font: 500 10px/1 "JetBrains Mono", monospace; color: var(--ed-accent); text-transform: uppercase; letter-spacing: .05em; }
.edi-stream { display: flex; flex-direction: column; }
.edi-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--ed-line); transition-delay: calc(var(--i, 0) * 110ms); }
.edi-row:last-child { border-bottom: none; }
.edi-row > i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.edi-row-main { min-width: 0; }
.edi-row-name { font: 600 13px/1.3 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edi-row-text { font-size: 12.5px; color: var(--ed-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edi-row-tag { margin-left: auto; font: 500 9px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--ed-muted); border: 1px solid var(--ed-line); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.edi-note { margin-top: 24px; padding: 20px 24px; border-left: 2px solid var(--ed-accent); background: rgba(255, 84, 38, .05); border-radius: 0 10px 10px 0; font: 400 clamp(17px, 1.8vw, 23px)/1.4 "Source Serif 4", serif; color: var(--ed-ink); }
.edi-note b { color: var(--ed-accent); }

/* --- operator takeover (inbox section) --- */
.edo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--ed-line); }
.edo-h { font: 600 clamp(22px, 2.4vw, 28px)/1.15 "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: var(--ed-ink); margin: 0 0 16px; }
.edo-lead { font-size: 16px; line-height: 1.6; color: var(--ed-muted); margin: 0 0 24px; max-width: 44ch; }
.edo-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.edo-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ed-ink); }
.edo-points li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ed-accent); color: #fff; font: 700 11px/1 "JetBrains Mono", monospace; font-style: normal; margin-top: 1px; }
.edo-card { border: 1px solid var(--ed-line); border-radius: 16px; background: var(--ed-white); box-shadow: 0 26px 64px -32px rgba(16, 16, 15, .3); overflow: hidden; }
.edo-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ed-line); }
.edo-head b { font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edo-badge { margin-left: auto; font: 500 9px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--ed-accent); border: 1px solid var(--ed-accent); border-radius: 999px; padding: 4px 9px; }
.edo-feed { padding: 18px; display: grid; gap: 10px; }
.edo-b { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.edo-b .edo-who { display: block; margin-top: 5px; font: 500 10px/1 "JetBrains Mono", monospace; opacity: .6; text-transform: uppercase; letter-spacing: .03em; }
.edo-b.in { justify-self: start; background: var(--ed-paper); color: var(--ed-ink); border-bottom-left-radius: 4px; }
.edo-b.bot { justify-self: end; background: var(--ed-paper); color: var(--ed-muted); border-bottom-right-radius: 4px; }
.edo-b.out { justify-self: end; background: var(--ed-ink); color: #fff; border-bottom-right-radius: 4px; }
.edo-bar { padding: 14px 18px; border-top: 1px solid var(--ed-line); display: flex; justify-content: flex-end; }
.edo-toggle { font: 600 12px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); border: 1px solid var(--ed-line); border-radius: 999px; padding: 9px 16px; background: var(--ed-paper); }
@media (max-width: 860px) { .edo { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; padding-top: 40px; } }
@media (max-width: 820px) {
    .edi { grid-template-columns: 1fr; gap: 16px; }
    .edi-sources { flex-direction: row; flex-wrap: wrap; }
    .edi-src { flex: 1 1 150px; }
    .edi-src > span { display: none; }
    .edi-link { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .edi-link path { animation: none; }
}

/* --- hero integration badge (beauty): YCLIENTS/Клиентикс up front --- */
.ed-hero-badge {
    position: relative; z-index: 3;
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 26px; padding: 9px 16px 9px 13px;
    border: 1px solid var(--ed-line); border-radius: 999px;
    background: rgba(255, 255, 255, .55); backdrop-filter: blur(6px);
}
.ed-hero-badge-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ed-muted); }
.ed-hero-badge .ed-logo-tile { width: 28px; height: 28px; border-radius: 8px; }
.ed-hero-badge .ed-logo-tile b { font-size: 13px; }
.ed-hero-badge-name { font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.ed-hero-badge-div { width: 1px; height: 20px; background: var(--ed-line); }

/* --- «chat-bot vs administrator» promoted into the chips (00) section --- */
.ed-vs-lead { max-width: 640px; margin: 44px 0 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--ed-muted); }
.ed-vs-lead + .ed-vs { margin-top: 20px; }

/* On the white «how it works» section, the board card needs a paper fill to read. */
.ed-section--white .ed-grid-board { background: var(--ed-paper); }

/* --- merged «how it works»: unified dialog + annotations, board below --- */
.edhow { margin-top: 56px; }
.edhow-cap { margin-bottom: 14px; color: var(--ed-accent); text-transform: uppercase; letter-spacing: .06em; }
.edhow .edw { max-width: none; margin-top: 0; }
.edhow-outcome { margin-top: 30px; }
.edhow-outcome .ed-grid-board { margin-top: 14px; }

/* --- feature mini-visuals (chair journey + reengagement + review trap) --- */
.edfeat-visuals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
@media (max-width: 900px) { .edfeat-visuals { grid-template-columns: 1fr; } }
.edfeat-visual { padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--ed-line); border-radius: 12px; background: var(--ed-white); }
.edfeat-head { margin-bottom: 20px; }
.edfeat-tag { display: inline-block; margin-bottom: 10px; color: var(--ed-accent); text-transform: uppercase; letter-spacing: .06em; }
.edfeat-head h3 { font: 400 clamp(20px, 2vw, 26px)/1.15 "Source Serif 4", serif; letter-spacing: -.02em; color: var(--ed-ink); }

.edre-track { display: flex; flex-direction: column; gap: 8px; }
.edre-node { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ed-line); border-radius: 10px; background: var(--ed-white); transition-delay: calc(var(--i, 0) * 150ms); }
.edre-node b { font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edre-node > span:last-child { margin-left: auto; font: 500 12px/1 "JetBrains Mono", monospace; color: var(--ed-muted); }
.edre-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 84, 38, .1); color: var(--ed-accent); }
.edre-ico svg { width: 18px; height: 18px; }
.edre-ico--ok { background: rgba(53, 208, 127, .16); color: #1f9d57; }
.edre-node--done { border-color: rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .07); }
.edre-gap { display: flex; align-items: center; gap: 12px; padding: 4px 0 4px 16px; transition-delay: calc(var(--i, 0) * 150ms); }
.edre-gap::before { content: ""; width: 22px; border-top: 2px dashed var(--ed-line); }
.edre-gap span { font-size: 11px; color: var(--ed-muted); }
.edre-ping { transition-delay: calc(var(--i, 0) * 150ms); }
.edre-bubble { display: inline-block; max-width: 100%; padding: 12px 16px; border-radius: 14px 14px 14px 4px; background: var(--ed-accent); color: #fff; font-size: 14px; line-height: 1.4; box-shadow: 0 10px 26px -12px rgba(255, 84, 38, .6); animation: edrePulse 2.6s ease-in-out infinite; }
@keyframes edrePulse { 0%, 100% { box-shadow: 0 10px 26px -14px rgba(255, 84, 38, .5); } 50% { box-shadow: 0 14px 32px -10px rgba(255, 84, 38, .85); } }

.edrv-ask { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.edrv-bubble { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--ed-paper); border: 1px solid var(--ed-line); font-size: 14px; color: var(--ed-ink); }
.edrv-stars { display: flex; gap: 4px; }
.edrv-stars i { font-style: normal; font-size: 20px; color: var(--ed-accent); }
.edrv-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .edrv-branches { grid-template-columns: 1fr; } }
.edrv-branch { padding: 16px; border-radius: 10px; border: 1px solid var(--ed-line); background: var(--ed-white); transition-delay: calc(var(--i, 0) * 180ms); }
.edrv-branch--good { border-color: rgba(53, 208, 127, .45); background: rgba(53, 208, 127, .06); }
.edrv-branch--bad { border-color: rgba(214, 69, 69, .4); background: rgba(214, 69, 69, .06); }
.edrv-rate { font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); margin-bottom: 8px; }
.edrv-rate b { color: var(--ed-accent); letter-spacing: 1px; margin-right: 6px; }
.edrv-branch--bad .edrv-rate b { color: #c23434; }
.edrv-text { font-size: 12.5px; line-height: 1.4; color: var(--ed-muted); margin-bottom: 12px; }
.edrv-links { display: flex; flex-wrap: wrap; gap: 6px; }
.edrv-links span { padding: 6px 10px; border-radius: 8px; background: rgba(53, 208, 127, .14); color: #157a43; font: 600 11px/1 "Inter", system-ui, sans-serif; }
.edrv-alert { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(214, 69, 69, .12); color: #c23434; font: 600 12px/1 "Inter", system-ui, sans-serif; }
.edrv-alert i { width: 8px; height: 8px; border-radius: 50%; background: #c23434; animation: edrvBlink 1.4s ease-in-out infinite; }
@keyframes edrvBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .edre-bubble, .edrv-alert i { animation: none; } }

/* --- real channel logos (shared: cascade / messenger strip / inbox) --- */
.ed-chan-ico { flex: none; object-fit: contain; border-radius: 6px; display: block; }
.ed-chan-ico--sms, .ed-chan-ico--site { display: grid; place-items: center; }
.ed-chan-ico--sms { background: transparent; font: 700 9px/1 "JetBrains Mono", monospace; color: var(--ed-ink); }
.ed-chan-ico--sms b { color: inherit; }
.ed-chan-ico--site { background: var(--ed-accent); }
.ed-chan-ico--site svg { width: 62%; height: 62%; }
.ed-channel .ed-chan-ico { width: 22px; height: 22px; }
.ed-channel .ed-chan-ico--sms, .ed-channel .ed-chan-ico--site { width: 22px; height: 22px; }
.edi-src .ed-chan-ico { width: 26px; height: 26px; }
.edi-src .ed-chan-ico--site { width: 26px; height: 26px; }
.edi-row .ed-chan-ico { width: 20px; height: 20px; }
.edi-row .ed-chan-ico--site { width: 20px; height: 20px; }

/* --- messenger tabs on the ink section: channel strip pills read as light --- */
.ed-section--ink .ed-channel { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--ed-paper); }

/* --- section 02: ONE unified dialog with synced step annotations --- */
.eduni-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 28px; align-items: stretch; }
@media (max-width: 900px) { .eduni-grid { grid-template-columns: 1fr; } }
.eduni-chat { border: 1px solid var(--ed-line); border-radius: 18px; background: var(--ed-white); box-shadow: 0 26px 64px -30px rgba(16, 16, 15, .28); overflow: hidden; align-self: start; }
.eduni-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ed-line); }
.eduni-head b { font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.eduni-head > span:last-child { margin-left: auto; font: 500 10px/1 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--ed-accent); }
.eduni-feed { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 20px; }
.ed-js .eduni-item { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.ed-js .eduni-item.show { opacity: 1; transform: none; }
.eduni-msg { max-width: 86%; width: fit-content; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; }
.eduni-msg.b { background: var(--ed-paper); color: var(--ed-ink); border: 1px solid var(--ed-line); border-bottom-left-radius: 4px; }
.eduni-msg.u { margin-left: auto; background: var(--ed-ink); color: var(--ed-white); border-bottom-right-radius: 4px; }
.eduni-msg.book { border-color: var(--ed-accent); background: rgba(255, 84, 38, .07); }
.eduni-msg.book strong { color: var(--ed-accent); }
.eduni-badge { display: inline-block; margin: 0 8px 5px 0; padding: 3px 8px; border-radius: 999px; background: rgba(255, 84, 38, .12); color: var(--ed-accent); font: 600 9px/1.3 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.eduni-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.eduni-chip { padding: 7px 12px; border: 1px solid rgba(255, 84, 38, .4); border-radius: 999px; background: rgba(255, 84, 38, .06); color: var(--ed-accent); font: 500 12px/1 "Inter", system-ui, sans-serif; }
.eduni-chip.on { background: var(--ed-accent); color: #fff; border-color: var(--ed-accent); }
.eduni-item--wizard { width: 100%; }
.edw--inline { max-width: none; margin: 2px 0; }
.ed-js .edw--inline .edw-stage { min-height: 300px; }
.edw--inline .edw-card { border-radius: 16px; box-shadow: 0 12px 30px -16px rgba(16, 16, 15, .35); }

.eduni-notes { align-self: stretch; }
.eduni-notes-inner { position: sticky; top: 92px; }
.eduni-notes ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: n; }
.eduni-note { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px; border: 1px solid transparent; color: var(--ed-muted); transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.eduni-note-ico { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--ed-line); display: grid; place-items: center; font: 600 11px/1 "JetBrains Mono", monospace; color: var(--ed-muted); transition: background .3s, border-color .3s, color .3s; counter-increment: n; }
.eduni-note-ico::after { content: counter(n); }
.eduni-note > span:last-child { font: 500 14px/1.3 "Inter", system-ui, sans-serif; }
.eduni-note.is-active { background: rgba(255, 84, 38, .07); border-color: rgba(255, 84, 38, .3); color: var(--ed-ink); }
.eduni-note.is-active .eduni-note-ico { border-color: var(--ed-accent); background: var(--ed-accent); color: #fff; }
.eduni-note.is-done { opacity: .78; }
.eduni-note.is-done .eduni-note-ico { border-color: rgba(53, 208, 127, .5); background: rgba(53, 208, 127, .14); color: #157a43; }
.eduni-note.is-done .eduni-note-ico::after { content: "✓"; }
@media (prefers-reduced-motion: reduce) { .ed-js .eduni-item { opacity: 1; transform: none; } }
@media (max-width: 900px) {
    .eduni-notes { order: -1; align-self: auto; }
    .eduni-notes-inner { position: static; }
    .eduni-notes ol { flex-direction: row; flex-wrap: wrap; }
    .eduni-note { flex: 1 1 44%; padding: 10px 12px; }
}

/* --- section 04: «Доводит до кресла» visit journey (+ feedback & portfolio photo) --- */
.edch { grid-column: 1 / -1; }
.edch-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 760px) { .edch-track { grid-template-columns: 1fr 1fr; } }
.edch-step { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--ed-line); border-radius: 12px; background: var(--ed-white); position: relative; transition-delay: calc(var(--i, 0) * 130ms); }
.edch-step b { font: 600 13px/1.25 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edch-step > span:last-child { font-size: 11.5px; color: var(--ed-muted); line-height: 1.35; }
.edch-ico { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 84, 38, .1); color: var(--ed-accent); }
.edch-ico svg { width: 19px; height: 19px; }
.edch-ico--ok { background: rgba(53, 208, 127, .16); color: #1f9d57; }
.edch-step--ok { border-color: rgba(53, 208, 127, .35); }
.edch-after { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 16px; }
.edch-bubble { flex: 1 1 300px; padding: 14px 18px; border-radius: 14px 14px 14px 4px; background: var(--ed-accent); color: #fff; font-size: 14px; line-height: 1.45; box-shadow: 0 12px 28px -14px rgba(255, 84, 38, .6); }
.edch-photo { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; padding: 12px 14px; border: 1px solid rgba(53, 208, 127, .4); border-radius: 12px; background: rgba(53, 208, 127, .06); }
.edch-photo-thumb { width: 44px; height: 44px; flex: none; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #c98a5e, #7d4a2c); }
.edch-photo-thumb svg { width: 22px; height: 22px; }
.edch-photo-main { min-width: 0; flex: 1; }
.edch-photo-main b { display: block; font: 600 13px/1.2 "Inter", system-ui, sans-serif; color: var(--ed-ink); }
.edch-photo-main span { font-size: 11.5px; color: var(--ed-muted); line-height: 1.35; }
.edch-photo-ok { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(53, 208, 127, .16); color: #1f9d57; }
.edch-photo-ok svg { width: 15px; height: 15px; }