/* 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; }
}