/* ==========================================================================
   HealthCentre.Ai — private GP practices (doctor.healthcentre.ai)
   Design system: "The Brass Plate".
   The whole UK private-GP field is cold navy/blue, static and badge-led, so
   this goes the other way: a warm bone canvas, a Consulting-Room Claret
   (#9B2C42) as the signature colour, and brass (#C68A3C) as the accent — the
   Harley Street doorplate. Editorial serif display (Instrument Serif) +
   General Sans UI + JetBrains Mono labels.
   Token NAMES kept (--forest/--pine/--amber...) so every rule stays wired;
   only their VALUES changed. Teal hue ~207 → claret hue ~13; gold → brass.
   ========================================================================== */

/* ----- 1. Tokens --------------------------------------------------------- */
:root {
    /* Claret (the consulting-room family) */
    --forest: oklch(43% 0.140 13);      /* signature claret #9B2C42 */
    --forest-bright: oklch(56% 0.130 10);
    --pine: oklch(36% 0.120 12);        /* deeper claret */
    --pine-deep: oklch(21% 0.080 9);    /* oxblood */
    --ink: oklch(21% 0.015 10);         /* warm near-black — dark bands/footer */
    --ink-soft: oklch(28% 0.018 10);

    /* Warm, premium surfaces (never clinical white) */
    --cream: oklch(97.5% 0.005 60);     /* warm bone */
    --sage: oklch(93% 0.012 55);        /* warm neutral tint */
    --paper: oklch(99.3% 0.002 60);     /* warm white */

    /* Accent — brass */
    --amber: oklch(66% 0.100 70);
    --amber-deep: oklch(56% 0.100 65);
    --hot: oklch(55% 0.150 40);         /* burnt orange — danger, distinct from claret */

    /* Text-safe accent variants — same hues, darkened for small text on light
       surfaces so they clear WCAG AA 4.5:1. Fills, borders and markers stay on
       the original accents above. */
    --amber-text: oklch(48% 0.090 65);
    --hot-text: oklch(47% 0.145 38);

    /* Text — warm charcoal */
    --text: oklch(27% 0.008 20);
    --text-soft: oklch(44% 0.008 20);
    --text-faint: oklch(53% 0.008 20);    /* darkened a notch for AA on light surfaces */
    --on-dark: oklch(96% 0.006 60);
    --on-dark-soft: oklch(82% 0.010 50);
    --on-forest: oklch(98% 0.006 60);
    --on-forest-soft: oklch(90% 0.014 50);

    /* Lines / structure */
    --line: oklch(90% 0.006 50);
    --line-strong: oklch(82% 0.010 45);
    --line-on-dark: oklch(100% 0 0 / 0.16);

    /* Type */
    --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Radii */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Shadows (warm, low) */
    --shadow-sm: 0 1px 2px oklch(28% 0.02 20 / 0.06), 0 2px 6px oklch(28% 0.02 20 / 0.05);
    --shadow-card: 0 2px 4px oklch(28% 0.025 20 / 0.05), 0 12px 30px oklch(28% 0.03 20 / 0.09);
    --shadow-lift: 0 6px 12px oklch(28% 0.025 20 / 0.08), 0 24px 56px oklch(28% 0.035 20 / 0.14);

    /* Spacing scale */
    --s-2: 0.125rem;
    --s-4: 0.25rem;
    --s-8: 0.5rem;
    --s-12: 0.75rem;
    --s-16: 1rem;
    --s-20: 1.25rem;
    --s-24: 1.5rem;
    --s-32: 2rem;
    --s-40: 2.5rem;
    --s-48: 3rem;
    --s-64: 4rem;
    --s-80: 5rem;
    --s-96: 6rem;
    --s-128: 8rem;

    --shell: 1200px;
    --shell-wide: 1320px;
    --band-y: clamp(4rem, 8vw, 7rem);
}

/* ----- 2. Reset + base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    line-height: 1.65;
    color: var(--text);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--forest); text-decoration: none; }
a:hover { color: var(--pine); }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--ink); color: var(--on-dark);
    padding: var(--s-12) var(--s-20); border-radius: 0 0 var(--r-md) 0;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ----- 3. Typography ----------------------------------------------------- */
.display, .h1, .h2, .h3, .hero-title, .closer-title,
.section-title, .uc-title, .lead-pitch-title, .lead-success-title, .demo-modal-title {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.012em;
    color: var(--text);
    font-optical-sizing: auto;
}

.display, .hero-title, .closer-title {
    font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
    line-height: 1.0;
}
.h1, .uc-title, .lead-pitch-title { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
.h2, .section-title { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.8rem); }
.h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }

.lead, .lede {
    font-size: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
    line-height: 1.5;
    color: var(--text-soft);
}
.body { color: var(--text-soft); }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 54ch; }

.eyebrow, .kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--forest);
    display: inline-flex;
    align-items: center;
    gap: var(--s-8);
}
.eyebrow::before {
    content: "";
    width: 1.6rem; height: 2px; border-radius: 2px;
    background: var(--amber);
}
.eyebrow.eyebrow--plain::before { display: none; }

.brand-dot { color: var(--amber); }

/* ----- 4. Layout primitives --------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.shell-wide { max-width: var(--shell-wide); }

.band { padding-block: var(--band-y); position: relative; }
.band--cream { background: var(--cream); color: var(--text); }
.band--sage { background: var(--sage); color: var(--text); }
.band--paper { background: var(--paper); color: var(--text); }
.band--forest { background: linear-gradient(155deg, var(--forest), var(--pine)); color: var(--on-forest); }
.band--pine { background: linear-gradient(160deg, var(--pine), var(--pine-deep)); color: var(--on-forest); }
.band--ink { background: var(--ink); color: var(--on-dark); }

.band--forest .eyebrow, .band--pine .eyebrow, .band--ink .eyebrow { color: var(--amber); }
.band--forest .display, .band--forest .h2, .band--forest .section-title,
.band--pine .display, .band--pine .h2, .band--pine .section-title,
.band--ink .display, .band--ink .h2, .band--ink .section-title,
.band--forest .h3, .band--ink .h3 { color: var(--on-forest); }
.band--forest .body, .band--forest .lead, .band--pine .body, .band--pine .lead { color: var(--on-forest-soft); }
.band--ink .body, .band--ink .lead { color: var(--on-dark-soft); }

.section-head { max-width: 60ch; }
.section-head .eyebrow { margin-bottom: var(--s-16); }
.section-head .section-title { margin-bottom: var(--s-16); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: center; }

/* ----- 5. Buttons (cta system) ------------------------------------------ */
.cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
    font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem;
    line-height: 1; letter-spacing: 0.005em;
    padding: 0.95rem 1.5rem; border-radius: var(--r-pill);
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    text-align: center;
}
.cta-primary {
    background: var(--amber); color: var(--ink); border-color: var(--amber);
    box-shadow: 0 1px 0 oklch(50% 0.10 65 / 0.5), var(--shadow-sm);
}
.cta-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.cta-secondary {
    background: transparent; color: var(--forest); border-color: var(--line-strong);
}
.cta-secondary:hover { color: var(--pine); border-color: var(--forest); transform: translateY(-2px); }

/* on dark/forest surfaces */
.band--forest .cta-secondary, .band--pine .cta-secondary, .band--ink .cta-secondary,
.hero .cta-secondary {
    color: var(--on-forest); border-color: var(--line-on-dark);
}
.band--forest .cta-secondary:hover, .band--pine .cta-secondary:hover, .band--ink .cta-secondary:hover,
.hero .cta-secondary:hover { border-color: var(--on-forest); color: var(--on-forest); }

.text-link {
    display: inline-flex; align-items: center; gap: var(--s-8);
    font-weight: 600; color: var(--forest);
}
.text-link::after { content: "\2192"; transition: transform .18s ease; }
.text-link:hover::after { transform: translateX(4px); }

/* CTA supporting hook line — one quiet line beneath the primary CTA, planting
   the "built around your own practice" mechanic (hero + Final CTA). */
.cta-hook { margin-top: var(--s-16); max-width: 46ch; font-size: 0.9rem; line-height: 1.5; color: var(--text-faint); }
.hero .cta-hook { color: var(--on-forest-soft); }
.band--ink .cta-hook, .band--forest .cta-hook, .band--pine .cta-hook { color: var(--on-dark-soft); }

/* Testimonials carousel controls are phone-only; on desktop the In Production
   testimonials run as their normal grid (see the <=640px mobile pass). */
.carousel-controls { display: none; }

/* ----- 6. Reveal --------------------------------------------------------- */
.has-reveal [data-reveal]:not([data-reveal="shown"]) {
    opacity: 0;
    transform: translateY(22px);
}
[data-reveal] {
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
    .has-reveal [data-reveal]:not([data-reveal="shown"]) { opacity: 1; transform: none; }
    [data-reveal] { transition: none; }
}

/* ----- 7. Site nav ------------------------------------------------------- */
.site-nav { position: relative; z-index: 80; }
.hero .site-nav { position: absolute; inset: 0 0 auto 0; }

.nav-row {
    max-width: var(--shell-wide); margin-inline: auto;
    padding: var(--s-20) clamp(1.25rem, 4vw, 3rem);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-24);
}

.brand-mark { display: inline-flex; align-items: center; gap: var(--s-12); }
.brand-logo {
    width: 42px; height: 42px;
    background: var(--forest); border-radius: 12px; padding: 6px;
    box-shadow: var(--shadow-sm);
}
.hero .brand-logo, .lead-nav-band .brand-logo, .uc-hero .brand-logo { background: oklch(100% 0 0 / 0.14); }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--text); letter-spacing: -0.01em; }
.brand-sub { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.hero .brand-name, .lead-nav-band .brand-name, .uc-hero .brand-name { color: var(--on-forest); }
.hero .brand-sub, .lead-nav-band .brand-sub, .uc-hero .brand-sub { color: var(--on-forest-soft); }

.nav-links { display: flex; align-items: center; gap: var(--s-8); }
.nav-link {
    font-weight: 500; color: var(--text-soft);
    padding: 0.6rem 0.85rem; border-radius: var(--r-pill);
    background: none; border: none; display: inline-flex; align-items: center; gap: 0.3rem;
    transition: color .16s ease, background .16s ease;
}
.nav-link:hover { color: var(--text); background: oklch(45% 0.08 13 / 0.07); }
.hero .nav-link, .lead-nav-band .nav-link, .uc-hero .nav-link { color: var(--on-forest-soft); }
.hero .nav-link:hover, .lead-nav-band .nav-link:hover, .uc-hero .nav-link:hover { color: var(--on-forest); background: oklch(100% 0 0 / 0.1); }
.cta-nav { padding: 0.7rem 1.2rem; }

/* Use Cases mega-menu */
.nav-uc { position: relative; }
.nav-uc-trigger { cursor: pointer; }
.nav-uc-caret { font-size: 0.6rem; transition: transform .2s ease; }
.nav-uc:hover .nav-uc-caret, .nav-uc:focus-within .nav-uc-caret { transform: rotate(180deg); }

.uc-megamenu {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
    padding-top: 14px; /* transparent bridge so the cursor can travel in */
    width: min(660px, 86vw);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 90;
}
.nav-uc:hover .uc-megamenu, .nav-uc:focus-within .uc-megamenu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.uc-megamenu-inner {
    background: var(--paper); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
    padding: var(--s-24);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12) var(--s-32);
}
.uc-group-head {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--forest);
    padding: var(--s-8) var(--s-8) var(--s-4);
    border-bottom: 1px solid var(--line); margin-bottom: var(--s-4);
}
.uc-rows { display: flex; flex-direction: column; }
.uc-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-12);
    padding: 0.6rem var(--s-8); border-radius: var(--r-sm);
    transition: background .14s ease;
}
.uc-row:hover { background: var(--sage); }
.uc-row-text { display: flex; flex-direction: column; }
.uc-row-title { font-weight: 600; color: var(--text); }
.uc-row-sub { font-size: 0.8rem; color: var(--text-faint); }
.uc-row-arrow { color: var(--forest); opacity: 0; transform: translateX(-4px); transition: all .16s ease; }
.uc-row:hover .uc-row-arrow { opacity: 1; transform: translateX(0); }

/* Mobile nav */
.nav-toggle, .nav-burger { display: none; }

@media (max-width: 900px) {
    .nav-burger {
        display: inline-flex; flex-direction: column; gap: 5px;
        width: 46px; height: 46px; align-items: center; justify-content: center;
        border-radius: var(--r-md); border: 1px solid var(--line);
        z-index: 95; color: var(--text);
    }
    .hero .nav-burger, .lead-nav-band .nav-burger, .uc-hero .nav-burger { border-color: var(--line-on-dark); color: var(--on-forest); }
    .nav-burger span { width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }

    .nav-links {
        position: fixed; inset: 0; z-index: 90;
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: var(--s-4);
        background: var(--ink); color: var(--on-dark);
        padding: 6rem clamp(1.25rem, 6vw, 2.5rem) 2.5rem;
        transform: translateX(100%); transition: transform .3s ease;
        overflow-y: auto;
    }
    .nav-toggle:checked ~ .nav-links { transform: translateX(0); }
    .nav-link, .hero .nav-link, .uc-hero .nav-link, .lead-nav-band .nav-link { color: var(--on-dark-soft); font-size: 1.1rem; padding: 0.85rem var(--s-8); justify-content: space-between; }
    .nav-link:hover, .hero .nav-link:hover { background: oklch(100% 0 0 / 0.06); color: var(--on-dark); }
    .cta-nav { margin-top: var(--s-16); justify-content: center; }

    .nav-uc { width: 100%; }
    .nav-uc-trigger { width: 100%; justify-content: space-between; }
    .uc-megamenu {
        position: static; transform: none; width: 100%; padding-top: var(--s-8);
        opacity: 1; visibility: visible; pointer-events: auto;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .nav-uc:focus-within .uc-megamenu, .nav-uc:hover .uc-megamenu { transform: none; max-height: 40rem; }
    .uc-megamenu-inner {
        grid-template-columns: 1fr; background: transparent; border: none; box-shadow: none;
        padding: var(--s-8) 0; gap: var(--s-8);
    }
    .uc-group-head { color: var(--amber); }
    .uc-row:hover { background: oklch(100% 0 0 / 0.06); }
    .uc-row-title { color: var(--on-dark); }
    .uc-row-sub { color: var(--on-dark-soft); }
}

/* ----- 8. Hero ----------------------------------------------------------- */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    /* Neutral fallback ground (shown only before the video paints, or if it
       fails). No claret wash over the footage. */
    background: var(--ink);
    color: var(--on-forest);
}
.hero-bg {
    /* Full strength: the footage is shown as shot, not tinted. */
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2; opacity: 1;
}
/* Legibility scrim only. This carries no brand colour, it is a neutral
   darkening under the copy so the headline clears WCAG AA over the footage,
   and it fades out entirely across the right of the frame so the video reads
   unmodified where there is no text. */
.hero-scrim {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg, oklch(0% 0 0 / 0.72) 0%, oklch(0% 0 0 / 0.55) 32%, oklch(0% 0 0 / 0.18) 62%, oklch(0% 0 0 / 0) 100%);
}
.hero-inner {
    display: grid; grid-template-columns: minmax(0, 600px);
    align-items: center;
    padding-block: clamp(8rem, 14vw, 11rem) clamp(4rem, 8vw, 6.5rem);
}
.hero-eyebrow { color: var(--amber); margin-bottom: var(--s-20); }
.hero-title { color: var(--on-forest); max-width: 16ch; }
.hero-title .accent { color: var(--amber); font-style: italic; }
.hero-lede { color: var(--on-forest-soft); margin-top: var(--s-24); max-width: 46ch; }
.hero .cta-row { margin-top: var(--s-32); }
.hero-trust {
    margin-top: var(--s-40); display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-24);
    font-size: 0.85rem; color: var(--on-forest-soft);
}
.hero-trust li { display: inline-flex; align-items: center; gap: var(--s-8); }
.hero-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }

/* hero product card (the "call answered" frame) */
.hero-card {
    background: var(--paper); color: var(--text);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
    padding: var(--s-20); border: 1px solid var(--line);
}
.hero-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding-bottom: var(--s-16); border-bottom: 1px solid var(--line); }
.hero-card-live { display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); }
.hero-card-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 0 oklch(43% 0.140 13 / 0.5); animation: pulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .hero-card-live .dot { animation: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(43% 0.140 13 / 0.5); } 70% { box-shadow: 0 0 0 8px oklch(43% 0.140 13 / 0); } 100% { box-shadow: 0 0 0 0 oklch(43% 0.140 13 / 0); } }
.hero-card-num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); }
.hero-card-log { display: flex; flex-direction: column; gap: var(--s-12); padding-top: var(--s-16); }
.hero-bubble { padding: 0.7rem var(--s-16); border-radius: var(--r-md); max-width: 86%; font-size: 0.92rem; line-height: 1.4; }
.hero-bubble--agent { background: var(--sage); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; }
.hero-bubble--caller { background: var(--forest); color: var(--on-forest); border-bottom-right-radius: 4px; align-self: flex-end; }
.hero-bubble .who { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-bottom: 3px; }
.hero-card-foot { margin-top: var(--s-16); padding-top: var(--s-16); border-top: 1px solid var(--line); display: flex; gap: var(--s-16); }
.hero-card-stat { display: flex; flex-direction: column; }
.hero-card-stat b { font-family: var(--font-display); font-size: 1.35rem; color: var(--forest); line-height: 1; }
.hero-card-stat span { font-size: 0.74rem; color: var(--text-faint); margin-top: 3px; }

/* ----- 9. The Shift ------------------------------------------------------ */
.shift-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.shift-copy .h2 { margin: var(--s-16) 0 var(--s-24); }
.shift-copy .body + .body { margin-top: var(--s-16); }
.shift-stat {
    background: var(--ink); color: var(--on-dark);
    border-radius: var(--r-lg); padding: var(--s-40);
    box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
.shift-stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--amber) 0%, transparent 70%); opacity: 0.25; }
.shift-stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 2rem + 4vw, 4.5rem); line-height: 1; color: var(--amber); display: block; }
.shift-stat-label { color: var(--on-dark-soft); margin-top: var(--s-16); max-width: 30ch; }
.shift-stat-source { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--on-dark-soft); opacity: 0.7; margin-top: var(--s-20); display: block; }

/* ----- 10. Knowledge base ------------------------------------------------ */
.kb-head { text-align: center; max-width: 60ch; margin-inline: auto; }
.kb-head .eyebrow { justify-content: center; }
.kb-head .section-title { margin: var(--s-16) 0; }

/* core diagram: KB centre feeding four channels */
.kb-core {
    margin-top: var(--s-64);
    position: relative;
}
.kb-core-node {
    margin-inline: auto; text-align: center;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: var(--s-24) var(--s-40); max-width: 440px; position: relative; z-index: 2;
}

/* tree connector: KB panel -> bus -> each channel panel */
.kb-connector { position: relative; height: 48px; }
.kb-conn-stem { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 24px; background: var(--forest); }
.kb-conn-bus { position: absolute; top: 24px; left: 12.5%; right: 12.5%; height: 2px; background: var(--forest); }
.kb-conn-drop { position: absolute; top: 24px; width: 2px; height: 24px; margin-left: -1px; background: var(--forest); }
.kb-spokes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); }
.kb-core-node .label { display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); }
.kb-core-node .name { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--text); margin-top: var(--s-4); }
.kb-core-node .desc { display: block; font-size: 0.9rem; color: var(--text-faint); margin-top: var(--s-8); }
.kb-spoke {
    background: linear-gradient(160deg, var(--forest), var(--pine)); border: none; border-radius: var(--r-md);
    padding: var(--s-20) var(--s-16); text-align: center; position: relative; box-shadow: var(--shadow-card);
}
.kb-spoke .ch { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); }
.kb-spoke .feeds { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--on-forest); margin-top: var(--s-4); }

/* lifecycle mosaic */
.kb-mosaic { margin-top: var(--s-80); display: flex; flex-direction: column; gap: var(--s-48); }
.kb-phase-head { display: flex; align-items: baseline; gap: var(--s-16); flex-wrap: wrap; margin-bottom: var(--s-24); }
.kb-phase-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--forest); white-space: nowrap; }
.kb-phase-line { color: var(--text-soft); max-width: 52ch; }
.kb-grid { display: grid; gap: var(--s-16); grid-template-columns: repeat(3, 1fr); }
.kb-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Compact Knowledge Base cards (elevator-pitch): small banner + always-visible body */
.kb-card { border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.kb-card:hover, .kb-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.kb-card-banner { height: clamp(132px, 13vw, 164px); background-color: var(--pine); background-image: linear-gradient(to top, oklch(21% 0.015 10 / 0.30), transparent 55%), var(--kb-img); background-size: cover; background-position: center 72%; transition: transform .4s ease; }
.kb-card:hover .kb-card-banner { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .kb-card:hover .kb-card-banner { transform: none; } }
.kb-card-content { padding: var(--s-20); }
.kb-card-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--amber); padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: var(--s-8); }
.kb-card-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.kb-card-body { color: var(--text-soft); font-size: 0.9rem; margin-top: var(--s-8); }

/* The Pain — sourced stat cards (each % paired with its fix) */
.pain-stats { margin-top: var(--s-48); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16); }
.pain-stat { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--hot); border-radius: var(--r-lg); padding: var(--s-32) var(--s-24); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.pain-stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.6rem, 1.8rem + 2.5vw, 3.6rem); line-height: 1; color: var(--hot); }
.pain-stat-claim { color: var(--text); font-weight: 500; margin-top: var(--s-16); }
.pain-stat-fix { color: var(--text-soft); font-size: 0.92rem; margin-top: var(--s-16); padding-top: var(--s-16); border-top: 1px solid var(--line); display: flex; gap: var(--s-8); }
.pain-stat-fix::before { content: "\2713"; color: var(--forest); font-weight: 700; flex: none; }
.pain-stat-source { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-faint); margin-top: var(--s-16); }
/* demand/opportunity cards read green; the leak card stays red (the warning) */
.pain-stat--up { border-top-color: var(--forest); }
.pain-stat--up .pain-stat-num { color: var(--forest); }
.pain-stat-tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hot); }
.pain-stat--qual .pain-stat-claim { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.12; margin-top: var(--s-12); color: var(--text); }
.pain-close { margin: var(--s-40) auto 0; text-align: center; color: var(--text-soft); max-width: 64ch; }

/* The Solution — six-card band (four channels as promises + two system cards) */
.sol-grid { margin-top: var(--s-48); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-16); }
.sol-card {
    background: oklch(100% 0 0 / 0.08); border: 1px solid var(--line-on-dark); border-radius: var(--r-lg);
    padding: var(--s-32) var(--s-24); display: flex; flex-direction: column; gap: var(--s-12);
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.sol-card:hover { transform: translateY(-4px); background: oklch(100% 0 0 / 0.12); border-color: var(--amber); }
.sol-card--system { background: oklch(100% 0 0 / 0.04); border-style: dashed; }
.sol-card--system:hover { background: oklch(100% 0 0 / 0.1); }
.sol-tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.sol-head { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.06; color: var(--on-forest); }
.sol-line { color: var(--on-forest-soft); font-size: 0.95rem; margin-top: auto; }

/* In Production — testimonials (quotes only, no audio) */
.testimonials { margin-top: var(--s-48); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.testimonial {
    background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--forest);
    border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--s-32) var(--s-24);
    margin: 0; display: flex; flex-direction: column; gap: var(--s-16);
}
.t-tag { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); }
.t-quote { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; line-height: 1.4; color: var(--text); margin: 0; }
.t-cite { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--s-16); border-top: 1px solid var(--line); }
.t-name { font-weight: 600; color: var(--text); }
.t-role { font-size: 0.85rem; color: var(--text-faint); }

/* Sample-call demo block transcript */
.proof-transcript { margin-top: var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); max-width: 44ch; }
.proof-transline { color: var(--on-dark-soft); font-size: 0.95rem; line-height: 1.45; }
.proof-transline span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-right: var(--s-8); }
.proof-uclink { margin-top: var(--s-24); color: var(--amber); }
.band--ink .proof-uclink { color: var(--amber); }

/* Why It Holds Up — trust grid */
.trust-grid { margin-top: var(--s-48); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-16); }
.trust-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-24); }
.trust-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--sage); color: var(--forest); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-16); }
.trust-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.trust-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); }
.trust-body { color: var(--text-soft); font-size: 0.9rem; margin-top: var(--s-8); }

/* Proof on-page sample */
.proof-audio-caption { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--on-dark-soft); margin-top: var(--s-16); }

/* ----- 11. Channels rail ------------------------------------------------- */
.channels-head { max-width: 60ch; }
.channel-rail { margin-top: var(--s-48); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.chan {
    background: var(--paper); padding: var(--s-32) var(--s-24);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: var(--s-12);
    transition: background .2s ease;
}
.chan:last-child { border-right: none; }
.chan:hover { background: var(--sage); }
.chan-top { display: flex; align-items: center; justify-content: space-between; }
.chan-index { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-faint); }
.chan-tag { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--amber); padding: 2px 8px; border-radius: var(--r-pill); }
.chan-name { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.chan-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--forest); color: var(--on-forest); display: inline-flex; align-items: center; justify-content: center; }
.chan-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chan-desc { color: var(--text-soft); font-size: 0.95rem; }

/* ----- 12. Proof --------------------------------------------------------- */
.proof-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.proof-quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.3; color: var(--on-forest); max-width: 24ch; }
.proof-body { color: var(--on-forest-soft); margin-top: var(--s-24); max-width: 50ch; }
.proof-cite { display: flex; align-items: center; gap: var(--s-12); margin-top: var(--s-32); font-family: var(--font-mono); font-size: 0.8rem; color: var(--on-forest-soft); }
.proof-cite::before { content: ""; width: 28px; height: 2px; background: var(--amber); }
.proof-stats { display: grid; gap: var(--s-16); }
.stat { background: oklch(100% 0 0 / 0.08); border: 1px solid var(--line-on-dark); border-radius: var(--r-md); padding: var(--s-24); }
.stat-num { font-family: var(--font-display); font-weight: 500; font-size: 2.4rem; line-height: 1; color: var(--amber); }
.stat-label { color: var(--on-forest-soft); font-size: 0.9rem; margin-top: var(--s-8); }
.proof-figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 3 / 4; max-height: 560px; }
.proof-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ----- 13. How it works (flow stepper) ----------------------------------- */
.flow-head { max-width: 60ch; }
.flow-meta { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; color: var(--forest); margin-top: var(--s-16); display: inline-flex; align-items: center; gap: var(--s-12); }
.flow-track {
    margin-top: var(--s-48); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-24);
    position: relative;
}
.flow-track::before {
    content: ""; position: absolute; top: 22px; left: 8%; right: 8%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px);
    z-index: 0;
}
.flow-step { position: relative; z-index: 1; }
.flow-index {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--forest); color: var(--on-forest);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem;
    box-shadow: 0 0 0 6px var(--cream);
}
.band--sage .flow-index { box-shadow: 0 0 0 6px var(--sage); }
.flow-name { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); margin-top: var(--s-16); }
.flow-desc { color: var(--text-soft); font-size: 0.95rem; margin-top: var(--s-8); }

/* ----- 14. Closer / final CTA -------------------------------------------- */
.closer { text-align: center; }
.closer-inner { max-width: 40ch; margin-inline: auto; }
.closer-title { color: var(--on-dark); }
.closer-body { color: var(--on-dark-soft); margin: var(--s-24) auto var(--s-32); max-width: 52ch; }
.closer .cta-row { justify-content: center; }

/* full-width asymmetric final CTA (landing page) */
.closer-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; text-align: left; }
.closer-grid .eyebrow { justify-content: flex-start; }
.closer-grid .closer-title { max-width: 15ch; }
.closer-grid .closer-body { margin: 0 0 var(--s-32); max-width: 50ch; }
.closer-grid .cta-row { justify-content: flex-start; }
@media (max-width: 900px) {
    .closer-grid { grid-template-columns: 1fr; gap: var(--s-32); }
}

/* ----- 15. Footer -------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-dark-soft); padding: var(--s-64) 0 var(--s-40); }
.footer-top { max-width: var(--shell-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-32) var(--s-48); }
.footer-brand-lockup { display: inline-flex; align-items: center; gap: var(--s-12); }
.footer-logo { width: 48px; height: 48px; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.footer-brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--on-dark); }
.footer-brand-dot { color: var(--amber); }
.footer-brand-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-soft); opacity: 0.7; margin-top: 2px; }
.footer-groups { display: flex; flex-wrap: wrap; gap: var(--s-48); }
.footer-group { display: flex; flex-direction: column; gap: var(--s-12); }
.footer-group-head { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-soft); opacity: 0.68; margin: 0; }
.footer-group a { color: var(--on-dark-soft); font-size: 0.9rem; }
.footer-group a:hover { color: var(--amber); }
.footer-strip { max-width: var(--shell-wide); margin: var(--s-40) auto 0; padding: var(--s-24) clamp(1.25rem, 4vw, 3rem) 0; border-top: 1px solid var(--line-on-dark); display: flex; align-items: center; justify-content: space-between; gap: var(--s-16) var(--s-24); }
.footer-strip-copyright { font-size: 0.8rem; opacity: 0.68; flex: 1 1 0; }
.footer-strip-quote { flex: 1 1 0; text-align: center; font-family: var(--font-display); font-size: 0.92rem; color: var(--on-dark); margin: 0; }
/* No container opacity here: it was dimming the brass link to 4.01:1 on the ink
   footer (WCAG AA needs 4.5:1 at this size). Soften the label with a token
   instead, and let the link keep its full-strength brass. */
.footer-strip-powered { flex: 1 1 0; text-align: right; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--on-dark-soft); }
.footer-strip-powered a { color: var(--amber); }
.footer-strip-powered a:hover { color: var(--amber-deep); }

/* ----- 16. Demo modal ---------------------------------------------------- */
.demo-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--s-24); }
.demo-modal[hidden] { display: none; }
.demo-modal-backdrop { position: absolute; inset: 0; background: oklch(21% 0.015 10 / 0.55); backdrop-filter: blur(3px); }
.demo-modal-card { position: relative; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: clamp(1.75rem, 4vw, 2.75rem); max-width: 460px; width: 100%; }
.demo-modal-eyebrow { margin-bottom: var(--s-12); }
.demo-modal-title { font-size: 1.6rem; margin-bottom: var(--s-12); }
.demo-modal-desc { color: var(--text-soft); }
.demo-modal-actions { display: flex; gap: var(--s-12); margin-top: var(--s-32); justify-content: flex-end; flex-wrap: wrap; }

/* ----- 17. Get started / lead / wizard ----------------------------------- */
.lead-nav-band { background: linear-gradient(155deg, var(--forest), var(--pine)); padding: 0; }
.lead-nav-band .nav-row { padding-block: var(--s-16); }
.lead-section { background: var(--cream); }
.lead-section .shell, .lead-section .container { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.lead-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.lead-pitch-eyebrow { margin-bottom: var(--s-16); }
.lead-pitch-title { margin-bottom: var(--s-16); }
.lead-pitch-lead { color: var(--text-soft); margin-bottom: var(--s-32); }
.lead-pitch-steps { display: flex; flex-direction: column; gap: var(--s-20); }
.lead-pitch-steps li { display: flex; gap: var(--s-16); }
.lead-pitch-step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: var(--on-forest); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 500; }
.lead-pitch-steps strong { display: block; color: var(--text); }
.lead-pitch-steps p { color: var(--text-soft); font-size: 0.92rem; margin-top: 2px; }
/* Price-lead (pricing + get-started) */
.price-lead { background: var(--sage); border: 1px solid var(--line); border-left: 4px solid var(--forest); border-radius: var(--r-md); padding: var(--s-20) var(--s-24); margin-bottom: var(--s-32); }
.price-figure { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; color: var(--text); }
.price-sub { color: var(--text-soft); font-size: 0.92rem; margin-top: var(--s-8); }
.price-sub a { color: var(--forest); text-decoration: underline; }
.price-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--amber); padding: 0.35rem 0.85rem; border-radius: var(--r-pill); margin-top: var(--s-16); }

.lead-pitch-pills { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-32); }
.lead-pitch-pills li { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--forest); background: var(--sage); border: 1px solid var(--line); padding: 0.35rem 0.8rem; border-radius: var(--r-pill); }

.lead-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: clamp(1.5rem, 3vw, 2.5rem); }
.lead-card-head { margin-bottom: var(--s-24); }
.lead-card-title { font-size: 1.5rem; }
.lead-card-subtitle { color: var(--text-soft); margin-top: var(--s-4); }

.wizard-progress { margin-bottom: var(--s-32); }
.wizard-progress-track { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.wizard-progress-fill { height: 100%; background: var(--forest); border-radius: var(--r-pill); transition: width .35s ease; }
.wizard-steps { display: flex; justify-content: space-between; margin-top: var(--s-12); }
.wizard-step { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); flex: 1; }
.wizard-step-circle { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.85rem; background: var(--line); color: var(--text-faint); transition: all .2s ease; }
.wizard-step.active .wizard-step-circle { background: var(--forest); color: var(--on-forest); }
.wizard-step.completed .wizard-step-circle { background: var(--forest); color: var(--on-forest); }
.wizard-step-label { font-size: 0.75rem; color: var(--text-faint); }
.wizard-step.active .wizard-step-label { color: var(--text); font-weight: 600; }

.form-group { margin-bottom: var(--s-20); }
.form-label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s-8); color: var(--text); }
.form-control, .form-select {
    width: 100%; font: inherit; color: var(--text);
    background: var(--cream); border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
    padding: 0.8rem var(--s-16); transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus, .form-select:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px oklch(43% 0.140 13 / 0.18); }
.form-control::placeholder { color: var(--text-faint); }
.form-control-sm, .form-select-sm { padding: 0.55rem var(--s-12); font-size: 0.92rem; }
.lead-form-textarea { resize: vertical; min-height: 7rem; }
.lead-form-help { color: var(--text-soft); font-size: 0.9rem; margin: -0.25rem 0 var(--s-16); }
.lead-form-optional { color: var(--text-faint); font-weight: 400; }
.phone-input-group { display: flex; gap: var(--s-8); }
.phone-country-code { width: auto; flex: none; min-width: 7.5rem; }
.phone-number { flex: 1; }

.feature-interest { display: flex; flex-direction: column; gap: var(--s-12); }
.feature-interest-row { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: var(--s-16); transition: border-color .16s ease, background .16s ease; }
.feature-interest-row.is-active { border-color: var(--forest); background: var(--sage); }
.feature-interest-check { display: flex; align-items: center; gap: var(--s-12); cursor: pointer; font-weight: 600; }
.feature-interest-check input { width: 18px; height: 18px; accent-color: var(--forest); }
.feature-interest-detail:not(:empty) { margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px dashed var(--line-strong); }
.feature-interest-sub-label { display: block; font-size: 0.82rem; color: var(--text-soft); margin-bottom: var(--s-8); }
.feature-interest-yesno, .feature-interest-platforms { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.feature-interest-pill { font-family: var(--font-sans); font-size: 0.88rem; padding: 0.45rem 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--text-soft); }
.feature-interest-pill.is-active { background: var(--forest); border-color: var(--forest); color: var(--on-forest); }
.feature-interest-note { font-size: 0.88rem; color: var(--text-soft); }

.validation-summary { margin-top: var(--s-16); }
.validation-error, .lead-alert { color: var(--hot); font-size: 0.88rem; margin-top: var(--s-4); }
.lead-alert { padding: var(--s-12) var(--s-16); background: oklch(55% 0.150 40 / 0.08); border: 1px solid oklch(55% 0.150 40 / 0.3); border-radius: var(--r-md); }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-24); }
.lead-submit-btn { width: 100%; margin-top: var(--s-8); }

.lead-card-success { text-align: center; max-width: 540px; margin-inline: auto; }
.lead-success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--forest); color: var(--on-forest); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--s-16); }
.lead-success-title { font-size: 2rem; }
.lead-success-body { color: var(--text-soft); margin: var(--s-16) auto var(--s-32); max-width: 44ch; }
.lead-success-actions { display: flex; gap: var(--s-12); justify-content: center; flex-wrap: wrap; }

/* ----- 18. Use-case pages ------------------------------------------------ */
.uc-hero { background: linear-gradient(155deg, var(--forest), var(--pine)); color: var(--on-forest); position: relative; overflow: hidden; }
.uc-hero .site-nav { position: relative; }
.uc-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); }
.uc-eyebrow { color: var(--amber); margin-bottom: var(--s-16); }
.uc-title { color: var(--on-forest); max-width: 18ch; }
.uc-lede { color: var(--on-forest-soft); margin-top: var(--s-20); max-width: 46ch; }
.uc-hero .cta-row { margin-top: var(--s-32); }
.uc-hero-figure { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 4 / 3; }
.uc-hero-figure img { width: 100%; height: 100%; object-fit: cover; }

.uc-section { padding-block: var(--band-y); }
.uc-section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.uc-section--mirror .uc-section-media { order: 2; }
.uc-section--problem { background: var(--ink); color: var(--on-dark); }
.uc-section--problem .h2 { color: var(--on-dark); }
.uc-section--problem .body { color: var(--on-dark-soft); }
/* Dark problem band: the default teal eyebrow is unreadable on ink, so use the
   gold accent here as the dark bands do. */
.uc-section--problem .eyebrow { color: var(--amber); }
.uc-section--solution { background: var(--cream); }
.uc-section-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; }
.uc-section-media img { width: 100%; height: 100%; object-fit: cover; }
.uc-section .eyebrow { margin-bottom: var(--s-16); }
.uc-section .h2 { margin-bottom: var(--s-16); }

.usecase-section--audio { background: var(--sage); padding-block: var(--band-y); }
.uc-audio-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.uc-transcript { display: flex; flex-direction: column; gap: var(--s-12); }
.uc-transcript-turn { display: flex; flex-direction: column; gap: 2px; }
.uc-transcript-who { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); }
.uc-transcript-turn--customer .uc-transcript-who { color: var(--amber-text); }
.uc-transcript-line { color: var(--text-soft); }

.uc-closer { background: var(--ink); color: var(--on-dark); text-align: center; }
.uc-closer .closer-title { color: var(--on-dark); }

.uc-audio-head { max-width: 62ch; margin-bottom: var(--s-40); }

/* use-case visual frames (missed ledger, drafted email, DM thread, KB answer) */
.uc-frame { background: var(--paper); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: var(--s-24); }
.uc-frame-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); margin-bottom: var(--s-16); }
.uc-frame-list { display: flex; flex-direction: column; gap: var(--s-12); }
.uc-frame-list li { display: flex; align-items: center; gap: var(--s-12); padding-bottom: var(--s-12); border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: 0.92rem; }
.uc-frame-list li:last-child { border-bottom: none; padding-bottom: 0; }
.uc-frame-x { flex: none; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hot-text); background: oklch(55% 0.150 40 / 0.1); border: 1px solid oklch(55% 0.150 40 / 0.3); padding: 2px 8px; border-radius: var(--r-pill); min-width: 5.5rem; text-align: center; }
.uc-frame-meta { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.78rem; }
.uc-frame-subject { font-weight: 600; color: var(--text); margin: var(--s-4) 0 var(--s-16); }
.uc-frame-body { display: flex; flex-direction: column; gap: var(--s-8); color: var(--text-soft); font-size: 0.92rem; }
.uc-frame-foot { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid var(--line); }
.uc-dm { padding: 0.7rem var(--s-16); border-radius: var(--r-md); font-size: 0.92rem; max-width: 90%; margin-bottom: var(--s-12); }
.uc-dm--in { background: var(--sage); color: var(--text); border-bottom-left-radius: 4px; }
.uc-dm--out { background: var(--forest); color: var(--on-forest); border-bottom-right-radius: 4px; margin-left: auto; }
.uc-frame--answer .uc-frame-q { font-size: 1.05rem; color: var(--text); font-weight: 500; }
.uc-frame-a { font-family: var(--font-display); font-size: 3rem; color: var(--amber-text); line-height: 1; margin: var(--s-12) 0 var(--s-8); }
.uc-frame-ameta { color: var(--text-soft); font-size: 0.9rem; }
.uc-frame-cite { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px solid var(--line); }

/* ----- 19. Audio sample player ------------------------------------------- */
.audio-sample { --audio-progress: 0%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: var(--s-24); }
.audio-sample-marker { display: inline-flex; align-items: center; gap: var(--s-8); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest); margin-bottom: var(--s-20); }
.audio-marker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.audio-waveform { position: relative; height: 60px; width: 100%; }
.audio-waveform-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.audio-waveform-svg--base rect { fill: var(--line-strong); }
.audio-waveform-svg--heard { clip-path: inset(0 calc(100% - var(--audio-progress)) 0 0); }
.audio-waveform-svg--heard rect { fill: var(--forest); }
.audio-waveform-playhead { position: absolute; top: 0; bottom: 0; left: var(--audio-progress); width: 2px; background: var(--amber); transition: left .1s linear; }
.audio-transport { display: flex; align-items: center; gap: var(--s-16); margin-top: var(--s-20); }
.audio-play-button { width: 48px; height: 48px; border-radius: 50%; background: var(--forest); color: var(--on-forest); border: none; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .16s ease, transform .16s ease; }
.audio-play-button:hover { background: var(--pine); transform: scale(1.05); }
.audio-icon { width: 22px; height: 22px; fill: currentColor; }
.audio-icon--pause { display: none; }
.audio-sample.is-playing .audio-icon--play { display: none; }
.audio-sample.is-playing .audio-icon--pause { display: block; }
.audio-timecode { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-soft); }
.audio-time-sep { opacity: 0.5; margin: 0 0.2rem; }
.audio-meta-strip { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-faint); }

/* ----- 20. NotFound + prose ---------------------------------------------- */
.notfound { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(155deg, var(--forest), var(--pine)); color: var(--on-forest); }
.notfound .display { color: var(--on-forest); }
.notfound .body { color: var(--on-forest-soft); margin: var(--s-16) auto var(--s-32); max-width: 44ch; }

.prose-band { background: var(--cream); }
.prose { max-width: 70ch; margin-inline: auto; }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; margin: var(--s-40) 0 var(--s-12); color: var(--text); }
.prose p, .prose li { color: var(--text-soft); margin-bottom: var(--s-12); }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose a { text-decoration: underline; }

/* ----- 21. Responsive ---------------------------------------------------- */
@media (max-width: 1024px) {
    .shift-inner, .proof-inner, .uc-hero-inner, .uc-section-inner, .uc-audio-inner { grid-template-columns: 1fr; }
    .sol-grid, .testimonials, .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-inner { grid-template-columns: 1fr; gap: var(--s-40); }
    /* Full-width copy on mobile, so the neutral darkening covers the whole
       frame rather than fading out to the right. Still no brand tint. */
    .hero-scrim { background: linear-gradient(180deg, oklch(0% 0 0 / 0.45) 0%, oklch(0% 0 0 / 0.72) 100%); }
    .uc-section--mirror .uc-section-media { order: 0; }
    .lead-layout { grid-template-columns: 1fr; }
    .kb-grid { grid-template-columns: repeat(2, 1fr); }
    .channel-rail { grid-template-columns: repeat(2, 1fr); }
    .chan:nth-child(2) { border-right: none; }
    .chan:nth-child(1), .chan:nth-child(2) { border-bottom: 1px solid var(--line); }
    .flow-track { grid-template-columns: repeat(2, 1fr); gap: var(--s-32); }
    .flow-track::before { display: none; }
    .proof-figure { aspect-ratio: 16 / 10; max-height: none; }
}

/* ==========================================================================
   MOBILE DESIGN PASS  (the phone is its own deliberate layout)
   Everything below is scoped to <=640px, so the desktop layout is unchanged.
   Tighter rhythm, full-width hero/closer CTAs, the sample-call block stripped
   to its claim + player, and the In Production testimonials turned into a
   one-card swipe carousel (wired by js/carousel.js).
   ========================================================================== */
@media (max-width: 640px) {
    .kb-grid, .kb-grid--2 { grid-template-columns: 1fr; }
    .pain-stats, .sol-grid, .testimonials, .trust-grid { grid-template-columns: 1fr; }
    .channel-rail { grid-template-columns: 1fr; }
    .chan { border-right: none; border-bottom: 1px solid var(--line); }
    .chan:last-child { border-bottom: none; }
    .flow-track { grid-template-columns: 1fr; gap: var(--s-24); }
    .kb-spokes { grid-template-columns: 1fr 1fr; }
    .kb-connector { display: none; }
    .demo-modal-actions, .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
    .footer-top { flex-direction: column; align-items: flex-start; gap: var(--s-32); }
    .footer-strip { flex-direction: column; text-align: center; gap: var(--s-12); }
    .footer-strip-copyright, .footer-strip-quote, .footer-strip-powered { flex: none; text-align: center; }

    /* ---- Tighter vertical rhythm + one impactful headline block ---- */
    .band { padding-block: var(--s-48); }
    .eyebrow, .kicker { font-size: 0.7rem; letter-spacing: 0.08em; }
    .hero-title, .closer-title { font-size: clamp(2.1rem, 1.4rem + 4vw, 2.9rem); line-height: 1.04; }
    .section-title, .h2 { font-size: clamp(1.6rem, 1.2rem + 3vw, 2.1rem); }
    .lead, .lede { font-size: 1rem; line-height: 1.5; }

    /* Hero + Final CTA: full-width tap targets, hook line kept compact */
    .hero .cta-row, .closer .cta-row { flex-direction: column; align-items: stretch; }
    .hero .cta-row .cta, .closer .cta-row .cta { width: 100%; }
    .cta-hook { font-size: 0.875rem; }

    /* ---- Sample-call block: strip to the claim + image + the player only ----
       The supporting paragraph and the secondary use-case link are hidden so the
       visitor lands on the headline, the picture and the play button with nothing
       to scroll past. The "sample / demo call" caption stays (it must never read
       as a real recording). */
    #sample-call .proof-body,
    #sample-call .proof-uclink,
    #sample-call .proof-transcript { display: none; }
    /* the caller image leads on phones, above the player */
    #sample-call .proof-inner { display: flex; flex-direction: column; gap: var(--s-24); }
    #sample-call .proof-inner > div:last-child { order: -1; }
    #sample-call .proof-figure { aspect-ratio: 4 / 3; }

    /* ---- Decorative secondary copy: hidden on phones ----
       The hero trust line repeats what the trust section says in full, so it
       earns its place on desktop and not on a phone. */
    .hero-trust { display: none; }

    /* ---- In Production testimonials: one-card swipe carousel ----
       A horizontal scroll-snap rail (next card peeking) replaces the tall
       vertical stack; carousel.js wires the arrows + dots. */
    .testi-carousel { min-width: 0; }
    .testimonials { margin-top: var(--s-32); }
    .testimonial:hover { transform: none; }
    [data-carousel-track] {
        display: flex; flex-direction: row;
        overflow-x: auto; scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
        gap: var(--s-16); padding-bottom: var(--s-4);
    }
    [data-carousel-track]::-webkit-scrollbar { display: none; }
    [data-carousel-track] > * {
        flex: 0 0 86%; scroll-snap-align: start;
        /* off-screen cards never trip the scroll-reveal observer — opt them out
           of the hidden start-state so they're visible as you swipe in */
        opacity: 1 !important; transform: none !important;
    }
    .carousel-controls { display: flex; align-items: center; justify-content: center; gap: var(--s-16); margin-top: var(--s-24); }
    .carousel-arrow {
        width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--forest);
        cursor: pointer; transition: opacity .16s ease, background .16s ease, border-color .16s ease;
    }
    .carousel-arrow svg { width: 1.2rem; height: 1.2rem; display: block; }
    .carousel-arrow:hover { border-color: var(--forest); }
    .carousel-arrow:active { background: var(--sage); }
    .carousel-arrow:disabled { opacity: 0.35; cursor: default; }
    .carousel-dots { display: flex; align-items: center; gap: var(--s-8); }
    .carousel-dot {
        width: 7px; height: 7px; padding: 0; border-radius: 50%; border: none;
        background: var(--text-faint); opacity: 0.4; cursor: pointer;
        transition: background .16s ease, opacity .16s ease, transform .16s ease;
    }
    .carousel-dot.active { background: var(--forest); opacity: 1; transform: scale(1.3); }
}

/* ==========================================================================
   FIXED NAV ON EVERY PAGE
   Transparent over the hero, solid + blurred once scrolled. The bar stays
   pinned on home, use-case, get-started, legal and 404 pages, and anchored
   jump links land below it rather than under it.
   ========================================================================== */
:root { --nav-h: 82px; }
html { scroll-padding-top: var(--nav-h); }

.site-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
/* Free the fixed nav from the hero's stacking context, and beat the
   .hero .site-nav { position: absolute } rule above.
   Dropping `isolation: isolate` means the hero no longer forms a stacking
   context, so the video's negative z-index would escape behind the page
   background. Re-layer the hero on positive indices instead of negative ones. */
.hero, .uc-hero { isolation: auto; }
.hero > .site-nav, .uc-hero .site-nav { position: fixed; z-index: 100; }
.hero-bg { z-index: 0; }
.hero-scrim { z-index: 1; }
.hero-inner { position: relative; z-index: 2; }

.site-nav.scrolled,
/* Pages with no hero behind the bar (get-started, pricing, legal, 404) have
   nothing for a transparent nav to sit over, and they may be too short to ever
   scroll far enough to earn .scrolled. Their nav is solid from the start, or it
   renders unreadably over light body copy. */
body:has(.lead-nav-band) .site-nav,
body:has(.notfound) .site-nav {
    background: oklch(21% 0.015 10 / 0.90);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom-color: var(--line-on-dark);
}
/* once scrolled the bar is dark, so its contents must read on dark */
.site-nav.scrolled .brand-name { color: var(--on-forest); }
.site-nav.scrolled .brand-sub { color: var(--on-forest-soft); }
.site-nav.scrolled .brand-logo { background: oklch(100% 0 0 / 0.14); }
.site-nav.scrolled .nav-link { color: var(--on-forest-soft); }
.site-nav.scrolled .nav-link:hover { color: var(--on-forest); background: oklch(100% 0 0 / 0.1); }
@media (max-width: 900px) {
    .site-nav.scrolled .nav-burger { border-color: var(--line-on-dark); color: var(--on-forest); }
}
@media (prefers-reduced-motion: reduce) { .site-nav { transition: none; } }

/* pages whose first band used to hold the nav in flow need clearing */
.uc-hero .uc-hero-inner { padding-top: calc(var(--nav-h) + var(--s-24)); }
.lead-nav-band { padding-top: var(--nav-h); }
.notfound { padding-top: var(--nav-h); }

/* ==========================================================================
   NO DEAD SPACE (desktop)
   Two structural gaps the visual directive forbids:
   1. A left-aligned section head in a 60ch column leaves the right half of
      every band empty. On wide screens the head becomes a two-up: the claim
      on the left, its supporting line on the right, so the band is used.
   2. The sample-call figure sat in a stretched column without filling it.
   ========================================================================== */
@media (min-width: 1025px) {
    .band > .shell > .section-head {
        max-width: none;
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: end;
    }
    .band > .shell > .section-head .eyebrow { grid-column: 1 / -1; }
    .band > .shell > .section-head .section-title { margin-bottom: 0; max-width: 22ch; }
    .band > .shell > .section-head .body { max-width: 46ch; padding-bottom: 0.4rem; }
    /* the How-it-works meta pill sits under the headline, not in the second column */
    .band > .shell > .flow-head .flow-meta { grid-column: 1 / -1; margin-top: var(--s-8); }

    /* sample call: the caller image fills the full height of its column */
    #sample-call .proof-inner { align-items: stretch; }
    #sample-call .proof-figure { aspect-ratio: auto; height: 100%; max-height: none; }

    /* Use-case audio: the transcript column is far taller than the player, which
       left a dead column beside it. Let the player travel down with the read. */
    .uc-audio-inner { align-items: start; }
    .uc-audio-inner > div:first-child {
        position: sticky;
        top: calc(var(--nav-h) + var(--s-24));
    }
}
@media (prefers-reduced-motion: reduce) {
    .uc-audio-inner > div:first-child { position: static; }
}

/* Links inside prose must not rely on colour alone (WCAG 1.4.1) */
.blog-p a, .blog-list a, .blog-faq-a a, .answers-body a, .answers-sources a,
.legal-body a, .geo-body a, main p a, main li a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
main p a.btn, main li a.btn, main p a.button, .btn a, a.btn { text-decoration: none; }