/* ============================================================
   LANDING PAGE — styles specific to the landing page only.
   App component styles (sidebar, sections, chat, etc.) are
   linked directly and reused by the mockup elements.
   ============================================================ */

/* ---- Body overrides (undo variables.css defaults) ----
   The descent into night is carried by the body's own background —
   a single linear-gradient that stretches across the entire document
   height, so no matter how long the page is, the dark settles in
   gradually instead of dropping after the first few viewports.  */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
    background: #06070d;
    overflow: auto;
    height: auto;
}
body {
    /* Deep near-black base; the .sky element below paints the lapis
       descent.  body::before adds a static CSS starfield on top so
       stars are visible even when the canvas isn't running. */
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(24,30,58,0.55), transparent 70%),
        #06070d;
    color: var(--t1);
    font: 15px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: clip;
    height: auto;
    position: relative;
}

/* Static CSS starfield — fixed across the viewport.  Warm cream dots,
   gold-flecked, like tomb-ceiling paint.  This adds base density on
   top of the JS-driven canvas stars so the sky never feels empty. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.95;
    background:
        radial-gradient(1px 1px at 4% 8%,  rgba(252,226,164,0.85), transparent 60%),
        radial-gradient(1px 1px at 12% 18%, rgba(252,226,164,0.78), transparent 60%),
        radial-gradient(1.5px 1.5px at 22% 6%, rgba(248,218,148,0.7), transparent 60%),
        radial-gradient(1px 1px at 32% 22%, rgba(252,226,164,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 42% 12%, rgba(252,226,164,0.78), transparent 60%),
        radial-gradient(1px 1px at 52% 4%,  rgba(248,218,148,0.7), transparent 60%),
        radial-gradient(1.5px 1.5px at 62% 26%, rgba(252,226,164,0.72), transparent 60%),
        radial-gradient(1px 1px at 72% 14%, rgba(248,218,148,0.66), transparent 60%),
        radial-gradient(1px 1px at 82% 26%, rgba(252,226,164,0.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 92% 8%, rgba(248,218,148,0.7), transparent 60%),
        radial-gradient(1px 1px at 6% 36%,  rgba(252,226,164,0.55), transparent 60%),
        radial-gradient(1px 1px at 16% 48%, rgba(248,218,148,0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 28% 42%, rgba(252,226,164,0.65), transparent 60%),
        radial-gradient(1px 1px at 38% 56%, rgba(248,218,148,0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 48% 38%, rgba(252,226,164,0.6), transparent 60%),
        radial-gradient(1px 1px at 58% 52%, rgba(252,226,164,0.55), transparent 60%),
        radial-gradient(1px 1px at 68% 44%, rgba(248,218,148,0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 58%, rgba(252,226,164,0.6), transparent 60%),
        radial-gradient(1px 1px at 88% 46%, rgba(248,218,148,0.5), transparent 60%),
        radial-gradient(1px 1px at 96% 38%, rgba(252,226,164,0.55), transparent 60%),
        radial-gradient(1px 1px at 8% 68%,  rgba(252,226,164,0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 18% 78%, rgba(252,226,164,0.55), transparent 60%),
        radial-gradient(1px 1px at 28% 72%, rgba(248,218,148,0.45), transparent 60%),
        radial-gradient(1px 1px at 38% 88%, rgba(252,226,164,0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 48% 76%, rgba(248,218,148,0.5), transparent 60%),
        radial-gradient(1px 1px at 58% 92%, rgba(252,226,164,0.45), transparent 60%),
        radial-gradient(1px 1px at 68% 82%, rgba(248,218,148,0.45), transparent 60%),
        radial-gradient(1.5px 1.5px at 78% 68%, rgba(252,226,164,0.55), transparent 60%),
        radial-gradient(1px 1px at 88% 86%, rgba(248,218,148,0.45), transparent 60%),
        radial-gradient(1px 1px at 96% 76%, rgba(252,226,164,0.5), transparent 60%);
}

/* The sky — single continuous descent into night across the whole
   document height.  Anchored top:0 + bottom:0 so it stretches with
   the body, no matter how long the page is.  Warm horizon at top,
   deep void at the bottom — one gradient, no boundary, no reset. */
.sky {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 95% 8% at 50% 0%,
            rgba(232,168,90,0.20) 0%,
            rgba(196,124,56,0.10) 50%,
            transparent 100%),
        radial-gradient(ellipse 55% 15% at 92% 4%,
            rgba(168,108,52,0.08) 0%,
            transparent 60%),
        linear-gradient(180deg,
            #2e2e4e   0%,
            #2c2c4c   6%,
            #2a2a4a  12%,
            #272748  20%,
            #232344  30%,
            #1f1f3e  40%,
            #1a1a36  50%,
            #16162c  60%,
            #121224  70%,
            #0e0e1c  78%,
            #0a0a14  86%,
            #0a0806 100%);
}

/* Accent — gold phrase inside headings.  Multi-stop vertical gradient
   with strong contrast top-to-bottom for a polished-metal shine.
   Kept as plain `display: inline` so the gradient text-clip never
   creates a separate box that could crop descenders.  The right-edge
   breathing for the gradient is handled by the heading's
   padding-right (0.18em) defined in the shared heading rule. */
.accent {
    font-style: normal;
    background:
        linear-gradient(180deg,
            #faecbf 0%,
            #efcd72 18%,
            #e0b14a 38%,
            var(--accent) 55%,
            #b08125 78%,
            #8e651a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--accent);
}

/* Skip-to-content link — visually hidden until focused */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 200;
    background: var(--accent);
    color: var(--chrome-bg);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font: 600 13px var(--sans);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 150ms ease;
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--accent-hover);
    outline-offset: 2px;
}

/* ---- Sand + orbital canvas ---- */
#sand-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
    mix-blend-mode: screen;
}

/* ---- Nav — floating glass pill, centered above the page ----
   Centered via margin: 0 auto + width: fit-content (not transform),
   so the scroll-driven .nav-hidden translateY works without fighting
   the shared `ensure-visible` keyframe that other elements still use. */
nav {
    position: fixed;
    top: 16px; left: 0; right: 0;
    margin: 0 auto;
    z-index: 100;
    width: fit-content;
    max-width: calc(100vw - 32px);
    padding: 0 8px 0 22px;
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 28px;
    background: rgba(10,12,26,0.62);
    backdrop-filter: blur(32px) saturate(1.6);
    -webkit-backdrop-filter: blur(32px) saturate(1.6);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    box-shadow:
        0 1px 0 rgba(255,232,180,0.05) inset,
        0 0 0 1px rgba(212,168,68,0.06),
        0 10px 32px -8px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 350ms cubic-bezier(.4,0,.2,1);
    /* Backstop in case JS never adds .show — fades in only opacity so
       the scroll-driven nav-hidden transform keeps working after 4s. */
    animation: nav-fade-in 0.4s 4s forwards;
}
nav.show { opacity: 1; }
nav.nav-hidden { transform: translateY(-160%); }

@keyframes nav-fade-in {
    to { opacity: 1; }
}

@keyframes ensure-visible {
    to { opacity: 1; transform: none; }
}
.nav-logo {
    font: 500 14px var(--sans); color: var(--t1);
    display: flex; align-items: center; gap: 10px;
    letter-spacing: -0.01em;
}
.logo-mark {
    width: 26px; height: 26px;
    background: linear-gradient(135deg, #e8c97a 0%, var(--accent) 50%, #a07a2a 100%);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    font: 700 11px var(--serif); color: var(--chrome-bg);
    box-shadow: 0 0 0 1px rgba(212,168,68,0.4), 0 4px 14px rgba(212,168,68,0.25);
}
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link {
    text-decoration: none;
    color: var(--t3);
    font: 400 14px var(--sans);
    transition: color 150ms;
}
.nav-link:hover { color: var(--t1); }

/* Hamburger toggle — hidden on desktop, revealed at <=720px */
.nav-hamburger {
    display: none;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--chrome-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
}
.nav-hamburger:hover { border-color: var(--accent-border); }
.nav-hamburger-bar {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--t1);
    border-radius: 1px;
    transition: transform 150ms ease, opacity 150ms ease;
}
nav.nav-open .nav-hamburger-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
nav.nav-open .nav-hamburger-bar:nth-child(2) { opacity: 0; }
nav.nav-open .nav-hamburger-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 720px) {
    .nav-hamburger { display: inline-flex; }
    .nav-links {
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 16px;
        background: rgba(14,25,38,0.96);
        backdrop-filter: blur(24px) saturate(1.4);
        border-bottom: 1px solid var(--chrome-border);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 180ms ease, transform 180ms ease;
    }
    nav.nav-open .nav-links {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
    .nav-link, .nav-cta {
        padding: 12px 4px;
        border-bottom: 1px solid var(--chrome-border-subtle);
        font-size: 15px;
    }
    .nav-cta { border-bottom: none; margin-top: 4px; text-align: center; }
}

/* ---- Reveal-on-scroll system ----------------------------------------
   Four entrance directions, all driven by IntersectionObserver (.show).
   Per-item delay can be set with `data-delay="120"` and the JS will
   forward it as a CSS variable.  All easing is the same to keep the
   page feeling like one continuous gesture.  */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    transition:
        opacity 900ms cubic-bezier(.16,1,.3,1),
        transform 1100ms cubic-bezier(.16,1,.3,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
    animation: ensure-visible 0.4s 2.5s forwards;   /* backstop */
}
.reveal,
.reveal-up         { transform: translateY(36px); }
.reveal-left       { transform: translateX(-56px); }
.reveal-right      { transform: translateX(56px); }
.reveal-scale      { transform: scale(.96) translateY(24px); }

.reveal.show,
.reveal-up.show,
.reveal-left.show,
.reveal-right.show,
.reveal-scale.show { opacity: 1; transform: none; }

/* Hero entrance — JS controls timing via .show class */
.hero-stagger {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1);
    animation: ensure-visible 0.4s 4.5s forwards;
}
.hero-stagger.show { opacity: 1; transform: none; }

.divider { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.divider hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--chrome-border) 30%, var(--chrome-border) 70%, transparent); }

.scene-section {
    max-width: 1200px; margin: 0 auto; padding: 200px 20px 80px;
    position: relative; z-index: 2;
}
/* Hero-demo variant: tight to the hero, no big scene-head, dramatic shadow + gold halo */
.scene-section--hero-demo {
    padding: 20px 20px 80px;
    position: relative;
}
.scene-section--hero-demo .hero-demo-glow {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    width: min(1200px, 100%);
    height: 380px;
    background:
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(212,168,68,0.28) 0%, rgba(212,168,68,0.10) 35%, transparent 70%),
        radial-gradient(ellipse 75% 45% at 50% 70%, rgba(86,114,210,0.18) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.mockup--hero {
    position: relative;
    z-index: 1;
}
.mockup--hero .win {
    border-color: rgba(212,168,68,0.22);
    box-shadow:
        0 1px 0 rgba(255,232,180,0.06) inset,
        0 0 0 1px rgba(212,168,68,0.10),
        0 60px 140px -30px rgba(0,0,0,0.85),
        0 20px 50px rgba(0,0,0,0.5),
        0 0 80px -10px rgba(212,168,68,0.25);
}
.hero-demo-caption {
    margin: 40px auto 0;
    max-width: 720px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-demo-caption-label {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px var(--sans);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.hero-demo-caption-label::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(212,168,68,0.7);
    animation: caption-pulse 2.4s ease-in-out infinite;
}
@keyframes caption-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.hero-demo-caption-text {
    font: 400 15px/1.6 var(--sans);
    color: var(--t2);
    max-width: 560px;
    letter-spacing: -0.005em;
}

/* Scene header — a band across the full width of the section.
   Label sits on the left in cream caps; the chapter number sits on the
   right in gold; a thin gold rule underlines the band.  Below it the
   heading lands big in cream-white with a single gold accent phrase.  */
.scene-head {
    display: flex; flex-direction: column;
    margin-bottom: 96px;
    gap: 28px;
}
.scene-mark {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    position: relative;
}
.scene-mark::after {
    /* Thin gold-fading rule under the band.  Anchors the section.  */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(212,168,68,0.55) 0%,
        rgba(212,168,68,0.25) 40%,
        rgba(255,255,255,0.06) 75%,
        transparent 100%);
}
.scene-label {
    font: 500 11px var(--sans);
    color: var(--t1);
    text-transform: uppercase; letter-spacing: 0.28em;
    /* small caps treatment */
}
.scene-number {
    font: 300 56px/0.95 var(--serif);
    letter-spacing: -0.04em;
    font-feature-settings: 'lnum' on, 'tnum' on;
    background: linear-gradient(135deg, #f4dca0 0%, var(--accent) 55%, #8a6a24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 900px) {
    .scene-head { gap: 22px; margin-bottom: 64px; }
    .scene-number { font-size: 40px; }
    .scene-label { font-size: 10px; letter-spacing: 0.24em; }
}

/* All section eyebrows share one style: small gold caps with wide
   tracking.  Applies to chapter splits (workflow / citations / diff /
   history) and to standalone sections (why / pricing / faq). */
.chapter-eyebrow,
.pricing-label,
.faq-label,
.why-label {
    display: inline-block;
    font: 600 12px var(--sans);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    margin: 0 0 24px;
    opacity: 0.92;
}

/* ONE typographic system for every section heading on the page.
   Demo, Features, History, Why, Pricing, FAQ, CTA share one scale.
   Letter-spacing is modest (-0.022em) so no glyph gets clipped on
   the right edge, especially with gradient background-clip on .accent. */
.chapter-heading,
.bento-heading,
.scene-heading,
.why-heading,
.pricing-heading,
.faq-heading {
    font: 500 clamp(38px, 5.2vw, 76px)/1.22 var(--serif);
    color: var(--t1);
    letter-spacing: -0.022em;
    margin: 0 0 12px;
    max-width: 32ch;
    /* Right padding for gradient text-clip overhang, bottom padding
       so lowercase descenders (g, y, p) don't crop. */
    padding-right: 0.18em;
    padding-bottom: 0.20em;
    overflow: visible;
}
.chapter-desc,
.bento-sub,
.scene-desc,
.why-sub {
    font: 400 18px/1.6 var(--sans);
    color: var(--t2);
    max-width: 56ch;
    margin: 0;
    letter-spacing: -0.005em;
}

/* ---- Buttons — one shared system ----
   `.btn-gold` is the primary action everywhere (hero, pricing featured, CTA).
   `.btn-quiet` is the secondary glass pill (free tier, etc.).
   Legacy names map onto these so existing markup keeps working.  */
.landing-btn-primary,
.pricing-cta--primary,
.btn-gold,
.nav-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 55%, #b58a30 100%);
    color: #1a1208;
    padding: 13px 30px; border-radius: 999px;
    font: 600 14px var(--sans); letter-spacing: -0.005em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 1px 0 rgba(255,255,255,0.04),
        0 8px 28px -8px rgba(212,168,68,0.55);
    transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), filter 200ms var(--ease);
    white-space: nowrap;
}
/* Nav variant — same gradient, smaller padding to fit the pill nav. */
.nav-cta { padding: 8px 18px; font-size: 13px; }

.landing-btn-primary:hover,
.pricing-cta--primary:hover,
.btn-gold:hover,
.nav-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 1px 0 rgba(255,255,255,0.04),
        0 14px 36px -8px rgba(212,168,68,0.65);
}

.landing-btn-secondary,
.btn-quiet {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--t1);
    padding: 13px 26px; border-radius: 999px;
    font: 500 14px var(--sans); letter-spacing: -0.005em;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.landing-btn-secondary:hover,
.btn-quiet:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(212,168,68,0.4);
    transform: translateY(-1px);
}

/* ---- Window chrome — true lapis, matching the real app ----
   The mockup uses the app's own chrome tokens so what visitors see
   here is what they'll see when they open the editor.  Gold-tinted
   border and a stele crown line tie it back to the landing.  */
.win {
    background: var(--chrome-bg);
    border: 1px solid rgba(212,168,68,0.14);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 1px 0 rgba(255,232,180,0.04) inset,
        0 0 0 1px rgba(212,168,68,0.06),
        0 30px 80px -20px rgba(0,0,0,0.7),
        0 8px 24px rgba(0,0,0,0.35);
}
.win::before {
    /* Stele crown — thin gold rule along the top edge of the slab.  */
    content: '';
    position: absolute;
    top: 0; left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.5;
    z-index: 1;
}
.win-bar {
    height: 36px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; padding: 0 14px; gap: 8px;
}
.wd {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(212,168,68,0.35);
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25);
}
.wd-r, .wd-y, .wd-g { background: rgba(212,168,68,0.35); }
.win-bar .wt {
    flex: 1; text-align: center;
    font: 500 11px var(--sans); color: var(--t2);
    margin-right: 60px; letter-spacing: 0.04em;
    text-transform: none;
}

/* ============================================================
   HERO — the temple at dusk
   Single sun-disk (Aten) crests the horizon above the headline;
   solar rays fan down across the page; below, the manuscript
   floats in a darkening lapis sky.
   ============================================================ */
.hero {
    min-height: 100vh;
    padding: 180px 40px 160px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    position: relative; z-index: 2;
}

/* Almost-invisible warm tint behind the headline — barely there so
   the starfield + Sopdet streak read clearly across the hero. */
.hero-bento::before {
    content: '';
    position: absolute;
    top: 22%;
    left: 50%;
    width: 380px;
    height: 140px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(212,168,68,0.035) 0%, transparent 70%);
    filter: blur(28px);
    pointer-events: none;
    z-index: -1;
}

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font: 500 12px var(--sans); color: var(--t2);
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.025);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 24px;
    letter-spacing: -0.005em;
}
.hero-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(212,168,68,0.7);
}

.hero h1 {
    font: 500 clamp(40px, 5.8vw, 88px)/1.18 var(--serif);
    color: var(--t1);
    max-width: 22ch; margin: 0 auto 16px;
    letter-spacing: -0.022em;
    padding: 0 0.18em 0.20em;
    overflow: visible;
}
.hero-sub {
    font: 400 19px/1.6 var(--sans);
    color: var(--t2);
    max-width: 56ch; margin: 0 auto 48px;
    letter-spacing: -0.005em;
}
.hero .landing-btn-primary { margin-bottom: 0; }
.hero-ctas {
    display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap;
}

/* Text link — quiet secondary action next to the primary CTA.
   Clean color change on hover, arrow shifts forward.  No underline. */
.landing-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--t2);
    font: 500 14px var(--sans);
    text-decoration: none;
    padding: 12px 4px;
    letter-spacing: -0.005em;
    transition: color 180ms;
}
.landing-link:hover { color: var(--accent); }
.landing-link-arrow {
    display: inline-block;
    transition: transform 180ms;
}
.landing-link:hover .landing-link-arrow { transform: translateX(3px); }

/* ============================================================
   APP MOCKUP — render at real size, CSS-scale down
   The window leans on scroll like a stone slab tilting toward the viewer.
   ============================================================ */
.mockup {
    max-width: 1200px; margin: 0 auto;
    position: relative;
    perspective: 1800px;
}
.mockup .win {
    overflow: hidden;
    transform: rotateX(var(--tilt, 0deg)) translateY(var(--lift, 0px));
    transform-origin: center center;
    transition: transform 280ms cubic-bezier(.2,.6,.2,1);
    will-change: transform;
}
.mockup .app-scale {
    width: 1440px; height: 780px;
    transform: scale(var(--mock-scale, 0.8));
    transform-origin: top left;
    transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.mockup .win-inner {
    width: calc(1440px * var(--mock-scale, 0.8));
    height: calc(780px * var(--mock-scale, 0.8) + 32px);
    overflow: hidden;
}
.mockup .app-panels { display: flex; height: 780px; }

/* ---- Mockup panel layout ----
   Class-based equivalents of the app's ID-based layout selectors.
   Component styles (.toc-item, .section-block, .msg, etc.)
   come from the linked app CSS files. */
.mockup .sb {
    width: 240px; min-width: 240px; flex-shrink: 0;
    background: var(--chrome-gradient);
    display: flex; flex-direction: column;
    border-right: 1px solid var(--chrome-border);
}
.mockup .toc-doc-name {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 4px 6px 12px; flex-shrink: 0;
}
.mockup .toc-doc-label {
    font: 600 14px var(--sans); color: var(--t1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.mockup .toc-list { padding: 0 6px 10px; flex: 1; overflow: hidden; }
.mockup .sidebar-v-resize { height: 1px; background: var(--panel-border); flex-shrink: 0; }
.mockup .rev-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 6px 8px 12px;
}
.mockup .rev-list { flex: 1; padding: 0 6px 12px; overflow: hidden; }
.mockup .account-footer { flex-shrink: 0; border-top: 1px solid var(--chrome-border); }
.mockup .account-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 10px 12px; background: none; border: none; cursor: pointer;
}
.mockup .account-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--chrome-surface); border: 1px solid var(--chrome-border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--t3);
}
.mockup .account-label { font: 500 12px var(--sans); color: var(--t2); flex: 1; text-align: left; }
.mockup .account-plan-tag { font: 400 10px var(--sans); color: var(--t3); }

/* ---- Document area layout ---- */
.mockup .doc {
    flex: 1;
    background: radial-gradient(ellipse at 50% 40%, var(--doc-bg-light) 0%, var(--doc-bg) 70%);
    overflow: hidden; display: flex; flex-direction: column;
}
.mockup .doc-scroll {
    flex: 1;
    /* hidden so the user's wheel scroll moves the landing page,
       not the embedded doc. scrollTop is still settable from JS for
       the animateScroll choreography. */
    overflow: hidden;
    padding: 40px 40px 40px;
    position: relative;
}
.mockup .doc-header { max-width: var(--doc-max-w); margin: 0 auto 40px; }
.mockup .doc-stats-bar {
    display: flex; align-items: center; gap: 12px;
    font: 11px var(--sans); color: var(--td3);
    margin-top: 16px; padding-top: 12px;
    border-top: 2px solid var(--doc-ochre-dim);
}
.mockup .stat-val { color: var(--td2); font-weight: 500; font-variant-numeric: tabular-nums; }
.mockup .sections-container { max-width: var(--doc-max-w); margin: 0 auto; }

/* ---- Chat panel layout ---- */
.mockup .chat {
    width: 380px; min-width: 380px; flex-shrink: 0;
    background: var(--chrome-gradient);
    display: flex; flex-direction: column;
    border-left: 1px solid var(--chrome-border);
}
.mockup .chat-header {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 13px 6px 10px; flex-shrink: 0;
}
.mockup .thread-label { font: 600 14px var(--sans); color: var(--t1); flex: 1; }
.mockup .chat-messages {
    flex: 1; min-height: 0; overflow: hidden;
    padding: 8px 10px; display: flex; flex-direction: column; gap: 14px;
}
.mockup .chat-input-area {
    padding: 8px 6px 10px; border-top: 1px solid var(--chrome-border);
    flex-shrink: 0;
}
.mockup .chat-input-wrap {
    display: flex; align-items: flex-end; gap: 6px;
    background: var(--chrome-surface); border: 1px solid var(--chrome-border);
    border-radius: var(--radius-lg); padding: 6px 8px 6px 16px;
}
.mockup .chat-input-text {
    flex: 1; font: 13px/1.55 var(--sans); color: var(--t3); padding: 6px 0;
}

/* ============================================================
   MOCKUP OVERRIDES — rules that intentionally differ from
   app CSS or have no app equivalent
   ============================================================ */

/* Section border-left for animated pending/preview states */
.mockup .section-block {
    border-left: 3px solid transparent;
    transition: border-color 400ms var(--ease);
}
.mockup .section-inner {
    transition: background 400ms var(--ease);
}

/* Pending states — uses .pending-section from changes.css via class in HTML */
/* Preview states — uses .preview-section from preview.css via class in HTML */

/* Change type badge context overrides (mockup uses .doc/.chat, not #document-area/#chat-panel) */
.mockup .doc .change-type-badge.type-content_edit { background: var(--accent-dim); color: var(--doc-accent); }
.mockup .doc .change-type-badge.type-create_section { background: var(--green-bg); color: var(--diff-add-body); }
.mockup .chat .change-type-badge.type-content_edit { background: var(--accent-dim); color: var(--accent-text); }
.mockup .chat .change-type-badge.type-create_section { background: var(--green-bg); color: var(--diff-add-color); }

/* Tool step spinner/check toggle (app handles this in JS, mockup via CSS) */
.mockup .tool-step .tool-spinner { display: none; }
.mockup .tool-step .tool-check { display: none; }
.mockup .tool-step.running .tool-spinner { display: block; }
.mockup .tool-step.done .tool-check { display: block; }

/* Cite tooltip in mockup: absolute, centered under the marker (inside scaled container) */
.mockup .cite-tip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: 300px;
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
    pointer-events: none;
    white-space: normal;
    line-height: 1.4;
    background: var(--chrome-bg2);
    border: 1px solid var(--chrome-border);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    max-width: 360px;
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-md);
}
.mockup .cite-tip.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mockup .cite-tip-source { display: block; font-weight: 600; color: var(--accent-text); margin-bottom: 6px; }
.mockup .cite-tip-claim { display: block; color: var(--t1); margin-bottom: 6px; line-height: 1.5; }
.mockup .cite-tip-quote {
    display: block; color: var(--t2); font-style: italic;
    border-left: 2px solid var(--chrome-border);
    padding-left: 10px; line-height: 1.5; font-size: var(--fs-xs);
}

/* Preview bar entrance animation */
.mockup .preview-bar {
    opacity: 0; transform: translateY(-4px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.mockup .preview-bar.show { opacity: 1; transform: none; }

/* Smaller accept/reject in chat cards and pending bar */
.mockup .chat-change .btn-accept,
.mockup .chat-change .btn-reject { font-size: 11px; padding: 4px 12px; }
.mockup .chat-change.change-accepted {
    opacity: 0.6;
    border-left: 3px solid var(--diff-add-color);
    transition: opacity 400ms var(--ease);
}
.mockup .chat-change.change-accepted .chat-change-actions { display: none; }
.mockup .pending-bar {
    border-top: 1px solid var(--chrome-border);
    background: var(--chrome-surface);
}
.mockup .pending-bar-actions { display: flex; gap: 4px; }
.mockup .pending-bar .btn-accept,
.mockup .pending-bar .btn-reject { font-size: 11px; padding: 4px 12px; }

/* Revision selected state uses .rev-item.active from sidebar.css */

/* ---- Sources section in mockup ---- */
.mockup .sources-section {
    max-width: var(--doc-max-w); margin: 56px auto 0;
    padding-top: 28px; border-top: 1px solid var(--doc-border);
}
.mockup .sources-heading {
    font: 400 24px/1.3 var(--serif); color: var(--td1);
    margin-bottom: 28px;
}
.mockup .src-card {
    padding: 16px 0; border-bottom: 1px solid var(--doc-border);
    transition: background 500ms var(--ease);
}
.mockup .src-card:last-of-type { border-bottom: none; }
.mockup .src-card.highlight {
    background: rgba(139,58,42,0.06);
    border-radius: var(--radius); padding: 16px;
}
.mockup .src-number {
    font-size: 16px; color: var(--doc-ochre);
    font-variant-numeric: tabular-nums; font-weight: 600;
    margin-right: 8px;
}
.mockup .src-title { font: 500 17px/1.4 var(--serif); color: var(--td1); margin-bottom: 3px; }
.mockup .src-url { font: 13.5px/1.5 var(--sans); color: var(--doc-accent); margin-bottom: 4px; }
.mockup .src-desc { font: 14px/1.6 var(--serif); color: var(--td2); margin-bottom: 6px; }
.mockup .src-claim-group {
    margin-top: 8px; padding-left: 14px;
    border-left: 2px solid var(--doc-border); margin-left: 2px;
}
.mockup .src-claim-text { font: 13px/1.5 var(--serif); color: var(--td2); padding: 3px 0; }
.mockup .src-claim-quote {
    font-style: italic; color: var(--td3);
    font-size: var(--fs-xs); margin-top: 2px; line-height: 1.5;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.anim-msg {
    opacity: 0; transform: translateY(8px);
    transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.anim-msg.show { opacity: 1; transform: none; }
.anim-section {
    opacity: 0; transform: translateY(8px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease),
                border-color 400ms var(--ease);
}
.anim-section.show { opacity: 1; transform: none; }

/* Animated cursor — outer div positions, inner svg scales on click */
.mock-cursor-wrap {
    position: absolute; top: 0; left: 0;
    width: 24px; height: 24px;
    z-index: 100; pointer-events: none;
    opacity: 0;
    transition: transform 0.9s cubic-bezier(.25, .1, .25, 1), opacity 0.35s ease;
    will-change: transform, opacity;
}
.mock-cursor-wrap.show { opacity: 1; }
.mock-cursor-wrap .mock-cursor {
    display: block; width: 24px; height: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
    transition: transform 80ms cubic-bezier(.4,0,.6,1);
}
.mock-cursor-wrap.clicking .mock-cursor { transform: scale(0.88); }
.mockup .app-scale { position: relative; }

@media (max-width: 1000px) {
    .mock-cursor-wrap { display: none; }
}

/* ============================================================
   CTA & FOOTER
   ============================================================ */
.cta {
    text-align: center;
    padding: 200px 40px 140px;
    position: relative; z-index: 2;
    max-width: 1100px; margin: 0 auto;
}
.cta h2 {
    font: 500 clamp(38px, 5.2vw, 76px)/1.08 var(--serif);
    color: var(--t1);
    margin: 0 auto 18px;
    letter-spacing: -0.022em;
    padding-right: 0.06em;
    max-width: none;
    text-align: center;
}
.cta p {
    font: 400 18px/1.6 var(--sans);
    color: var(--t2);
    margin-bottom: 40px;
    max-width: 56ch;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: -0.005em;
}

/* ---- Temporarily-disabled CTAs (pre-launch state) ----
   Overrides hover/focus/active across all button variants so the muted
   look stays consistent regardless of which class the element also has
   (.landing-btn-primary, .nav-cta, .pricing-cta, .pricing-cta--primary). */
.cta-disabled,
.cta-disabled:hover,
.cta-disabled:focus,
.cta-disabled:active {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
    border-color: rgba(255,255,255,0.12);
    color: var(--t3);
    transform: none;
    box-shadow: none;
    filter: grayscale(0.35);
    text-decoration: none;
}

footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 64px 0 28px;
    width: 100%;
    position: relative; z-index: 2;
    background: rgba(10,8,6,0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.footer-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 48px;
    align-items: start;
    margin-bottom: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 10px; }
.footer-logo {
    display: flex; align-items: center; gap: 8px;
    font: 500 15px var(--sans); color: var(--t2);
}
.footer-tagline {
    font: 400 13px/1.55 var(--sans); color: var(--t3);
    max-width: 280px;
}
.footer-cols {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col-title {
    font: 600 11px var(--sans); color: var(--t2);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 4px;
}
.footer-col a {
    font: 400 13px var(--sans); color: var(--t3);
    text-decoration: none; transition: color 150ms;
}
.footer-col a:hover { color: var(--t1); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.04);
    padding-top: 16px;
    display: flex; align-items: center; gap: 8px;
    font: 400 12px var(--sans); color: var(--t3); opacity: 0.6;
}
.footer-bottom-sep { color: var(--t3); opacity: 0.5; }
@media (max-width: 800px) {
    .footer-inner { grid-template-columns: 1fr; gap: 32px; }
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
    .mockup .app-scale { --mock-scale: 0.7; width: 1440px; height: 780px;
        transform: scale(0.7); }
    .mockup .win-inner { width: calc(1440px * 0.7); height: calc(780px * 0.7 + 32px); }
}
/* ---- Pricing Section ---- */
.pricing-section {
    max-width: 1100px; margin: 0 auto; padding: 140px 20px 60px;
    position: relative; z-index: 2;
}
.pricing-heading {
    text-align: center;
    margin-bottom: 48px;
}

.pricing-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}
/* Free + Pro share the .why-card--them chrome — glass + white-tinted
   border, no gold accent.  Only the featured (Plus) tier earns the
   gold border + stele crown — same role as .why-card--us in the why
   section, so visual hierarchy still says "this is the right one". */
.pricing-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%),
        rgba(14,18,30,0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 34px 30px 22px;
    display: flex; flex-direction: column;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 24px 60px -28px rgba(0,0,0,0.55);
    transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease);
}
.pricing-card:hover {
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-3px);
}
/* Featured plan signal — gold border + stele-crown rule on top. */
.pricing-card--featured {
    border-color: rgba(212,168,68,0.35);
}
.pricing-card--featured:hover {
    border-color: rgba(212,168,68,0.50);
}
.pricing-card--featured::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.7;
}

.pricing-card-header { margin-bottom: 28px; }
.pricing-tier-name {
    font: 500 11px var(--sans); color: var(--t2);
    text-transform: uppercase; letter-spacing: 0.22em;
    margin-bottom: 16px;
}
.pricing-price {
    font: 300 52px/1 var(--serif);
    color: var(--t1);
    letter-spacing: -0.035em;
    font-feature-settings: 'lnum' on, 'tnum' on;
}
.pricing-price span {
    font: 400 13px var(--sans);
    color: var(--t3);
    letter-spacing: 0;
}
.pricing-desc {
    font: 400 14px/1.5 var(--sans); color: var(--t3);
    margin-top: 12px;
}

.pricing-features {
    list-style: none; padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 24px;
}
.pricing-features li {
    font: 400 14px/1.45 var(--sans); color: var(--t1);
    padding-left: 22px;
    position: relative;
}
.pricing-features li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 12px; height: 1px;
    background: var(--accent);
    opacity: 0.7;
}

/* Free-tier CTA — uses the shared glass-pill treatment.
   Primary upgrade CTAs (Plus / Pro) inherit the .btn-gold rules above.  */
.pricing-cta:not(.pricing-cta--primary) {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255,255,255,0.04);
    color: var(--t1);
    padding: 13px 26px; border-radius: 999px;
    font: 500 14px var(--sans); letter-spacing: -0.005em;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.pricing-cta:not(.pricing-cta--primary):hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(212,168,68,0.4);
    transform: translateY(-1px);
}

@media (max-width: 1000px) {
    nav { padding: 0 16px; }
    .hero { padding: 100px 20px 40px; min-height: calc(100vh - 200px); }
    .hero h1 { font-size: 44px; letter-spacing: -0.03em; }
    .mockup .app-scale { transform: none !important; width: auto; height: auto; transition: none !important; }
    .mockup .win-inner { width: auto; height: auto; }
    .mockup .app-panels { height: auto; flex-direction: column; }
    .mockup .sb, .mockup .chat { display: none; }
    .mockup .doc { min-height: 340px; }
    .scene-heading { font-size: 32px; }
    .pricing-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .pricing-heading { font-size: 32px; }
    .why-heading, .faq-heading { font-size: 32px; }
    .cta h2 { font-size: 36px; }
}
@media (max-width: 600px) {
    .hero h1 { font-size: 34px; }
    .hero-sub { font-size: 15px; }
    .scene-heading { font-size: 26px; }
    .pricing-heading { font-size: 26px; }
    .why-heading, .faq-heading { font-size: 26px; }
    .cta h2 { font-size: 30px; }
    .scene-section { padding: 100px 20px 40px; }
    .why-section, .pricing-section, .faq-section { padding: 100px 20px 40px; }
}

/* ============================================================
   WHY — compact transformation rows
   ============================================================ */
.why-section {
    max-width: 1080px; margin: 0 auto; padding: 200px 20px 80px;
    position: relative; z-index: 2;
}
.why-header {
    text-align: center;
    margin: 0 auto 80px;
    max-width: 1000px;
    display: flex; flex-direction: column; align-items: center;
}
.why-heading {
    margin-bottom: 26px;
    text-align: center;
    max-width: none;
}

/* ---- Editorial contrast — Generic AI vs CiteOwl ----
   The Generic AI column reads as the muted "before" state with a
   small × indicator; the CiteOwl column has a gold ✓
   indicator and brighter typography.  Subtle background tints on
   each side give the comparison a visual hierarchy. */
.why-table {
    display: grid;
    grid-template-columns: 160px 1fr 1fr;
    column-gap: 24px;
    row-gap: 0;
    position: relative;
}
.why-thead {
    display: contents;
}
.why-tr {
    display: contents;
}
.why-th, .why-aspect, .why-them, .why-us {
    padding: 24px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.why-thead .why-th {
    padding: 8px 24px 16px;
    border-top: none;
    border-bottom: 1px solid rgba(212,168,68,0.25);
}
.why-th {
    font: 600 11px var(--sans);
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.why-th--aspect { color: transparent; }
.why-th--them {
    color: var(--t3);
    background: rgba(255,255,255,0.015);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.why-th--us {
    color: var(--accent);
    background: rgba(212,168,68,0.06);
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.why-aspect {
    font: 500 14px var(--sans);
    color: var(--t2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: center;
    border-top-color: transparent !important;
    padding-left: 0;
}

/* The "them" (Generic AI) cells — muted, with × indicator */
.why-them {
    font: 400 15.5px/1.6 var(--sans);
    color: var(--t3);
    background: rgba(255,255,255,0.015);
    position: relative;
    padding-left: 44px;
}
.why-them::before {
    /* × marker — quietly indicates "this is the weaker option" */
    content: '×';
    position: absolute;
    left: 18px; top: 26px;
    font: 500 16px var(--sans);
    color: rgba(255,255,255,0.18);
    line-height: 1;
}

/* The "us" (CiteOwl) cells — confident, with ✓ in gold */
.why-us {
    font: 400 15.5px/1.6 var(--sans);
    color: var(--t1);
    letter-spacing: -0.005em;
    background: rgba(212,168,68,0.04);
    position: relative;
    padding-left: 44px;
}
.why-us::before {
    /* ✓ marker — gold checkmark via SVG-in-background */
    content: '';
    position: absolute;
    left: 18px; top: 28px;
    width: 14px; height: 14px;
    background: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Last row gets rounded bottom corners on the side tints */
.why-tr:last-child .why-them {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}
.why-tr:last-child .why-us {
    border-bottom: 1px solid rgba(212,168,68,0.18);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* ---- Why cards — two side-by-side comparison panels ---- */
.why-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
}
.why-card {
    position: relative;
    padding: 36px 36px 32px;
    border-radius: 22px;
    display: flex; flex-direction: column;
    gap: 24px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%),
        rgba(14,18,30,0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 24px 60px -28px rgba(0,0,0,0.6);
}
.why-card--us {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.005) 100%),
        rgba(14,18,30,0.6);
    border-color: rgba(212,168,68,0.22);
}
.why-card--us::before {
    /* Stele crown — thin gold rule on the winning card */
    content: '';
    position: absolute;
    top: 0; left: 28%; right: 28%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.55;
}
.why-card-head {
    display: flex; flex-direction: column;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.why-card--us .why-card-head {
    border-bottom-color: rgba(212,168,68,0.20);
}
.why-card-label {
    font: 600 11px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--t3);
}
.why-card--us .why-card-label { color: var(--accent); }
.why-card-tagline {
    font: 500 22px/1.25 var(--serif);
    color: var(--t1);
    letter-spacing: -0.012em;
}
.why-card--them .why-card-tagline { color: var(--t2); }
.why-card-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 14px;
}
.why-card-list li {
    position: relative;
    padding-left: 26px;
    font: 400 15px/1.6 var(--sans);
    color: var(--t2);
    letter-spacing: -0.005em;
}
.why-card--us .why-card-list li { color: var(--t1); }
.why-card-list li::before {
    position: absolute;
    left: 0; top: 6px;
    width: 14px; height: 14px;
    content: '';
}
.why-card--them .why-card-list li::before {
    /* small × */
    background: rgba(255,255,255,0.20);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 3l8 8M11 3l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 3l8 8M11 3l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/></svg>");
}
.why-card--us .why-card-list li::before {
    /* gold check */
    background: var(--accent);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7l3 3 5-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

@media (max-width: 800px) {
    .why-cards { grid-template-columns: 1fr; }
}

/* Old why-table rules below are kept defunct (no .why-table HTML now) */
.why-table-legacy::before {
    content: '';
    position: absolute;
    left: -28px; top: 24px; bottom: 24px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(212,168,68,0.4), transparent);
}

@media (max-width: 800px) {
    .why-table {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .why-thead { display: none; }
    .why-tr { display: grid; grid-template-rows: auto auto auto; row-gap: 8px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,0.06); }
    .why-th, .why-aspect, .why-them, .why-us {
        padding: 0;
        border-top: none;
    }
    .why-aspect {
        font: 500 11px var(--sans); color: var(--accent);
        text-transform: uppercase; letter-spacing: 0.22em;
    }
    .why-them::before { display: none; }
    .why-them::after {
        content: 'Generic AI';
        display: block;
        font: 500 10px var(--sans);
        color: var(--t3);
        text-transform: uppercase; letter-spacing: 0.18em;
        margin-bottom: 6px;
        order: -1;
    }
    .why-them { display: flex; flex-direction: column; }
    .why-us::before { display: none; }
    .why-us::after {
        content: 'CiteOwl';
        display: block;
        font: 500 10px var(--sans);
        color: var(--accent);
        text-transform: uppercase; letter-spacing: 0.18em;
        margin-bottom: 6px;
        order: -1;
    }
    .why-us { display: flex; flex-direction: column; padding-top: 6px; }
}

/* ============================================================
   INLINE CTA — small strip between scenes
   ============================================================ */
.inline-cta {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: center; gap: 18px;
    position: relative; z-index: 2;
    flex-wrap: wrap;
}
.inline-cta-text {
    font: 400 14px var(--sans); color: var(--t3);
}

/* ============================================================
   PRICING — section layout + fineprint
   (Annual/monthly toggle removed — billing choice is set in-app
    after signup, no need to clutter the landing.)
   ============================================================ */
.pricing-section { display: flex; flex-direction: column; align-items: center; }
.pricing-section .pricing-heading,
.pricing-section .pricing-cards { width: 100%; }
.pricing-section .pricing-heading { text-align: center; }
.pricing-fineprint {
    margin-top: 22px;
    font: 400 12px var(--sans); color: var(--t3);
    text-align: center;
    opacity: 0.8;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section {
    max-width: 1000px; margin: 0 auto; padding: 200px 20px 100px;
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
}
.faq-section .faq-heading,
.faq-section .faq-list { width: 100%; }
.faq-heading {
    text-align: center;
    margin: 0 auto 64px;
    max-width: none;
}
.faq-section .faq-list { max-width: 820px; align-self: center; }
.faq-list {
    display: flex; flex-direction: column;
}
.faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: border-color 200ms var(--ease);
}
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.faq-item:hover { border-bottom-color: rgba(212,168,68,0.25); }
.faq-q {
    list-style: none;
    cursor: pointer;
    padding: 26px 4px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    font: 400 18px var(--serif); color: var(--t1);
    letter-spacing: -0.01em;
    transition: color 200ms var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent); }
.faq-chev {
    flex-shrink: 0; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent);
    font: 200 22px var(--sans);
    transition: transform 300ms var(--ease);
    opacity: 0.7;
}
.faq-item[open] .faq-chev {
    transform: rotate(45deg);
    opacity: 1;
}
.faq-a {
    padding: 0 4px 28px;
    font: 400 15px/1.75 var(--sans); color: var(--t2);
    max-width: 680px;
}


/* ============================================================
   BENTO — Apple-style feature grid.  Cards are tall and roomy:
   visual fills the top 60-70%, title + short paragraph anchor at
   the bottom with generous padding.  Solid card surface, no glass
   blur, no chip tags, no hover lifts — just clean tiles.
   ============================================================ */
.bento-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 200px 32px 120px;
    position: relative;
    z-index: 2;
}
.bento-head {
    max-width: 760px;
    margin: 0 auto 88px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.bento-heading { text-align: center; }
.bento-sub { text-align: center; }

.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    grid-auto-rows: minmax(360px, auto);
}
/* Tall, flat tiles.  Visual dominates the top ~70%, title + brief
   paragraph anchor at the bottom with generous breathing room.
   No border lift on hover, no rim glow, just a solid dark surface
   — like Apple's product feature tiles. */
.bento-card {
    position: relative;
    background: #14172a;
    border-radius: 28px;
    padding: 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 28px;
    border: 1px solid rgba(255,255,255,0.04);
}
.bento-card--lead {
    background:
        radial-gradient(ellipse 55% 80% at 100% 0%, rgba(212,168,68,0.10) 0%, transparent 60%),
        #161936;
    grid-row: span 2;
}
/* Lead card spans 2 rows so its visual gets really tall.
   Smaller cards span 1 row each.  Larger min-height for visual room. */
.bento-card:not(.bento-card--lead) {
    min-height: 360px;
}
.bento-card--lead {
    min-height: 720px;
}

/* Visual on top fills the upper portion; title + paragraph anchor
   at the bottom with breathing room above. */
.bento-card .bento-card-head {
    order: 2;
    display: flex; flex-direction: column; gap: 12px;
    margin-top: auto;
    padding-top: 8px;
}
.bento-card .bento-visual {
    order: 1;
    flex: 1;
    min-height: 220px;
    display: flex;
    position: relative;
}
.bento-card-title {
    font: 500 26px/1.22 var(--serif);
    color: var(--t1);
    letter-spacing: -0.018em;
    margin: 0;
    max-width: 22ch;
}
.bento-card--lead .bento-card-title {
    font: 500 38px/1.16 var(--serif);
    letter-spacing: -0.024em;
    max-width: 18ch;
}
.bento-card-desc {
    font: 400 15.5px/1.55 var(--sans);
    color: var(--t2);
    letter-spacing: -0.003em;
    margin: 0;
    max-width: 52ch;
}
.bento-card--lead .bento-card-desc {
    font-size: 17px;
}

/* ---- Citation visual — paper fragment with floating source tooltip ---- */
.bento-visual--cite {
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    padding-top: 12px;
}
.cite-doc {
    background: var(--doc-bg, #f6efe2);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232,200,140,0.18) 0%, transparent 70%);
    border-radius: 14px;
    padding: 26px 28px 22px;
    color: var(--td1, #2a221a);
    font: 400 17px/1.75 var(--serif);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        0 16px 40px -16px rgba(0,0,0,0.5);
    position: relative;
}
.cite-doc::before {
    content: '';
    position: absolute;
    top: 0; left: 30%; right: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,58,42,0.30), transparent);
}
.cite-doc-p { margin: 0; }
.cite-mark {
    color: var(--doc-accent, #8b3a2a);
    font-weight: 600;
    font-size: 0.86em;
    vertical-align: 2px;
    font-feature-settings: 'lnum' on, 'tnum' on;
    padding: 0 1px;
    margin-left: 1px;
}
.cite-mark--active {
    background: rgba(212,168,68,0.22);
    border-radius: 4px;
    padding: 1px 5px;
    box-shadow: 0 0 0 1.5px rgba(212,168,68,0.45);
    color: var(--accent-text, #8b3a2a);
}
.cite-tooltip {
    align-self: flex-end;
    margin-top: -16px;
    margin-right: 32px;
    max-width: 78%;
    background: var(--chrome-bg, #14182b);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid var(--accent);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 22px 50px -18px rgba(0,0,0,0.7);
    position: relative;
    z-index: 1;
}
.cite-tooltip-source {
    font: 600 11.5px var(--sans);
    color: var(--accent);
    letter-spacing: 0;
}
.cite-tooltip-source em { font-style: italic; font-weight: 500; color: var(--t2); }
.cite-tooltip-claim {
    font: italic 400 13px/1.5 var(--serif);
    color: var(--t2);
    border-left: 2px solid rgba(212,168,68,0.30);
    padding-left: 10px;
}

/* ---- History visual ---- */
.bento-visual--history {
    flex-direction: column;
    gap: 14px;
    justify-content: flex-end;
}
.hist-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column;
    gap: 2px;
    position: relative;
}
.hist-list::before {
    content: '';
    position: absolute;
    left: 5px; top: 12px; bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, rgba(212,168,68,0.4), rgba(212,168,68,0.05));
}
.hist-item {
    display: grid;
    grid-template-columns: 16px 70px 1fr;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font: 400 12.5px var(--sans);
    color: var(--t2);
}
.hist-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(14,18,30,0.95);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
}
.hist-item--active .hist-dot {
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(212,168,68,0.5), 0 0 12px rgba(212,168,68,0.5);
}
.hist-item--active .hist-label { color: var(--t1); font-weight: 500; }
.hist-time {
    color: var(--t3);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.hist-label { color: var(--t2); }
.hist-diff {
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
    font: 400 11.5px/1.5 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.hist-diff-line--rm {
    color: #d97777;
    background: rgba(217,119,119,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}
.hist-diff-line--add {
    color: #7bbf86;
    background: rgba(123,191,134,0.06);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ---- Search visual — query bar + ranked paper-card results ---- */
.bento-visual--search {
    flex-direction: column;
    gap: 12px;
    justify-content: flex-end;
}
.search-bar {
    display: flex; align-items: center; gap: 12px;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 16px;
    font: 400 14px var(--sans);
    color: var(--t1);
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
.search-icon {
    color: var(--accent);
    font-size: 16px;
    line-height: 1;
}
.search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column;
    gap: 6px;
}
.search-result {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 12px;
    align-items: baseline;
    padding: 10px 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    position: relative;
}
.search-result:first-child {
    background: rgba(212,168,68,0.06);
    border-color: rgba(212,168,68,0.22);
}
.search-result:first-child::before {
    content: 'Best match';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font: 500 9.5px var(--sans);
    color: var(--accent);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.search-result-title {
    font: 500 13.5px/1.35 var(--serif);
    color: var(--t1);
    letter-spacing: -0.005em;
    grid-column: 1;
}
.search-result-meta {
    font: 400 11.5px var(--sans);
    color: var(--t3);
    grid-column: 1;
    font-feature-settings: 'lnum' on, 'tnum' on;
}
.search-result-meta em { font-style: italic; color: var(--t2); }

/* ---- Diff visual — paper fragment with red strike + green add ---- */
.bento-visual--diff {
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
}
.bento-visual--diff > .diff-paper {
    background: var(--doc-bg, #f6efe2);
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 14px 30px -14px rgba(0,0,0,0.5);
}
.diff-line {
    font: 400 14px/1.75 var(--serif);
    color: var(--td1, #2a221a);
    margin: 0 0 8px;
}
.diff-line:last-child { margin-bottom: 0; }
.diff-rm {
    color: rgba(139,58,42,0.75);
    text-decoration: line-through;
    text-decoration-color: rgba(139,58,42,0.55);
    background: rgba(217,119,119,0.18);
    padding: 1px 4px;
    border-radius: 3px;
}
.diff-add {
    color: #2f5a30;
    background: rgba(96,153,76,0.22);
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(96,153,76,0.30) inset;
}

/* ---- Review visual — in-context pending-change card ---- */
.bento-visual--review {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
}
.review-mock {
    background: var(--doc-bg, #f6efe2);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5) inset,
        0 16px 36px -14px rgba(0,0,0,0.55);
}
.review-mock-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px;
    background: rgba(212,168,68,0.14);
    border-bottom: 1px solid rgba(212,168,68,0.30);
    font: 500 12px var(--sans);
    color: var(--td2, #4a3a2a);
}
.review-mock-badge {
    font: 600 9.5px var(--sans);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: rgba(212,168,68,0.30);
    color: var(--accent-text, #8b3a2a);
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}
.review-mock-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.review-mock-body {
    padding: 14px 16px 12px;
    font: 400 13.5px/1.6 var(--serif);
    color: var(--td1, #2a221a);
}
.review-mock-body p { margin: 0; }
.review-mock-cite {
    color: var(--doc-accent, #8b3a2a);
    font-weight: 600;
    font-size: 0.86em;
    vertical-align: 2px;
    padding: 1px 4px;
    margin-left: 1px;
    background: rgba(212,168,68,0.22);
    border-radius: 3px;
}
.review-mock-actions {
    display: flex; gap: 6px;
    padding: 0 14px 12px;
}
.review-mock-btn {
    font: 600 11px var(--sans);
    padding: 5px 12px;
    border-radius: 999px;
    letter-spacing: -0.005em;
}
.review-mock-btn--accept {
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 60%, #b58a30 100%);
    color: #1a1208;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 4px 10px -3px rgba(212,168,68,0.4);
}
.review-mock-btn--reject {
    background: transparent;
    color: var(--td3, #7a6a5a);
    border: 1px solid rgba(0,0,0,0.12);
}

/* ---- Sections — outline sidebar with running summaries ---- */
.bento-visual--sections {
    align-items: stretch;
    justify-content: flex-end;
    flex-direction: column;
    gap: 0;
}
.sect-list-head {
    font: 500 10.5px var(--sans);
    color: var(--t3);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0 4px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 8px;
}
.sect-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; flex-direction: column;
    gap: 2px;
    width: 100%;
}
.sect-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.sect-list .sect-num {
    font: 500 12px var(--sans);
    color: var(--t3);
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
}
.sect-meta {
    display: flex; flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.sect-title {
    font: 500 13.5px/1.3 var(--sans);
    color: var(--t1);
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sect-sum {
    font: italic 400 11.5px/1.4 var(--serif);
    color: var(--t3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sect-active {
    background: rgba(212,168,68,0.08);
    border-color: rgba(212,168,68,0.20) !important;
    box-shadow: inset 2px 0 0 var(--accent);
}
.sect-active .sect-num { color: var(--accent); }
.sect-active .sect-title { color: var(--accent-text); }

/* ---- Export — a document with format ribbon ---- */
.bento-visual--export {
    align-items: stretch;
    justify-content: flex-end;
    flex-direction: column;
    gap: 0;
}
.bento-visual--export::before {
    content: '';
    flex: 1;
    background:
        linear-gradient(180deg, rgba(246,239,226,0.08) 0%, transparent 100%),
        repeating-linear-gradient(180deg,
            transparent 0px, transparent 18px,
            rgba(255,255,255,0.04) 18px, rgba(255,255,255,0.04) 19px);
    border-radius: 12px 12px 0 0;
    border: 1px solid rgba(255,255,255,0.06);
    border-bottom: none;
    min-height: 80px;
    position: relative;
}
.export-chip-row {
    display: flex; gap: 6px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0 0 12px 12px;
    border-top: none;
}
.export-chip {
    font: 600 11px var(--sans);
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--t2);
    letter-spacing: 0.04em;
}
.export-chip--active {
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 60%, #b58a30 100%);
    border-color: transparent;
    color: #1a1208;
    box-shadow: 0 4px 10px -3px rgba(212,168,68,0.45);
}
.export-chip--tex {
    background: rgba(212,168,68,0.10);
    border-color: rgba(212,168,68,0.30);
    color: var(--accent);
}

/* Responsive bento */
@media (max-width: 1000px) {
    .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .bento-card { grid-column: span 2 !important; grid-row: span 1 !important; min-height: 240px; }
}

/* ============================================================
   FEATURE SPLIT — alternating "Apple Pages" feature sections
   Each section: copy on one side, a single big polished visual on the
   other. Next section flips. One feature gets the whole row of width.
   ============================================================ */
.feature-split {
    max-width: 1280px;
    margin: 0 auto;
    padding: 160px 40px;
    position: relative;
    z-index: 2;
}
.feature-split-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 72px;
    align-items: center;
}
.feature-split--flip .feature-split-inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}
.feature-split-copy {
    display: flex; flex-direction: column;
    gap: 24px;
    max-width: 540px;
}
.feature-split-copy .chapter-heading {
    margin: 0;
    max-width: 16ch;
}
.feature-split-copy .chapter-desc {
    margin: 0;
    max-width: 52ch;
}
.feature-split-visual { position: relative; }

/* ---- Paper-shot — large papyrus-style product visual ---- */
.paper-shot {
    background: var(--doc-bg, #f6efe2);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(232,200,140,0.18) 0%, transparent 70%);
    border-radius: 18px;
    color: var(--td1, #2a221a);
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 30px 80px -20px rgba(0,0,0,0.55),
        0 8px 24px -8px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.paper-shot::before {
    content: '';
    position: absolute;
    top: 0; left: 28%; right: 28%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,58,42,0.30), transparent);
}

/* Citation variant */
.paper-shot--cite { padding: 36px 40px 40px; }
.paper-shot-head {
    font: 500 22px/1.3 var(--serif);
    color: var(--td1, #2a221a);
    letter-spacing: -0.01em;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(139,58,42,0.20);
}
.paper-shot-prose {
    font: 400 17px/1.78 var(--serif);
    color: var(--td1, #2a221a);
    margin: 0;
    letter-spacing: -0.005em;
}
.paper-shot-tip {
    position: relative;
    margin: 22px 0 0 18%;
    background: var(--chrome-bg, #14182b);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 2px solid var(--accent);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 8px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 18px 40px -16px rgba(0,0,0,0.55);
    color: var(--t1);
}
.paper-shot-tip-source {
    font: 600 12px var(--sans);
    color: var(--accent);
}
.paper-shot-tip-source em { font-style: italic; font-weight: 500; color: var(--t2); }
.paper-shot-tip-quote {
    font: italic 400 13.5px/1.55 var(--serif);
    color: var(--t2);
    border-left: 2px solid rgba(212,168,68,0.30);
    padding-left: 10px;
}

/* Review / diff variant */
.paper-shot--review { padding: 0; }
.paper-shot-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px;
    background: rgba(212,168,68,0.14);
    border-bottom: 1px solid rgba(212,168,68,0.30);
    font: 500 13px var(--sans);
    color: var(--td2, #4a3a2a);
}
.paper-shot-badge {
    font: 600 10px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(212,168,68,0.30);
    color: var(--accent-text, #8b3a2a);
    padding: 3px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.paper-shot-bar-label {
    flex: 1;
    color: var(--td1, #2a221a);
}
.paper-shot-body {
    padding: 24px 28px 20px;
    font: 400 15.5px/1.75 var(--serif);
    color: var(--td1, #2a221a);
}
.paper-shot-body .diff-line { margin: 0 0 10px; }
.paper-shot-body .diff-line:last-child { margin-bottom: 0; }
.paper-shot-actions {
    display: flex; gap: 8px;
    padding: 4px 28px 22px;
}
.paper-shot-btn {
    font: 600 12px var(--sans);
    padding: 7px 16px;
    border-radius: 999px;
    letter-spacing: -0.005em;
}
.paper-shot-btn--accept {
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 60%, #b58a30 100%);
    color: #1a1208;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 6px 16px -4px rgba(212,168,68,0.50);
}
.paper-shot-btn--reject {
    background: transparent;
    color: var(--td3, #7a6a5a);
    border: 1px solid rgba(0,0,0,0.14);
}

@media (max-width: 1000px) {
    .feature-split { padding: 100px 24px; }
    .feature-split-inner,
    .feature-split--flip .feature-split-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .feature-split--flip .feature-split-visual { order: 2; }
    .paper-shot-tip { margin-left: 0; }
}

/* ============================================================
   AND-MORE — compact secondary feature row
   "Apple and-more" pattern: 4 small tiles in one row, each with a
   tiny distinctive visual + title + one-line description.  No big
   marketing prose — these are the "by the way, it also does this"
   features that need to be visible but not cinematic.
   ============================================================ */
.and-more {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 40px 80px;
    position: relative;
    z-index: 2;
}
.and-more-heading {
    font: 500 clamp(28px, 3.4vw, 44px)/1.15 var(--serif);
    color: var(--t1);
    letter-spacing: -0.02em;
    text-align: center;
    max-width: 32ch;
    margin: 0 auto 56px;
    padding-right: 0.06em;
}
.and-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.mini-tile {
    background: rgba(18,22,40,0.55);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 26px 24px 24px;
    display: flex; flex-direction: column;
    gap: 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 18px 40px -22px rgba(0,0,0,0.55);
    transition: border-color 220ms;
}
.mini-tile:hover {
    border-color: rgba(212,168,68,0.20);
}
.mini-tile-visual {
    height: 88px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
}
.mini-tile-title {
    font: 500 17px/1.3 var(--serif);
    color: var(--t1);
    letter-spacing: -0.012em;
    margin: 0;
}
.mini-tile-desc {
    font: 400 13.5px/1.55 var(--sans);
    color: var(--t3);
    margin: 0;
    letter-spacing: -0.003em;
    flex: 1;
}

/* --- Per-tile visuals --- */

/* Search: faux search bar + 4 source pills */
.mini-search-bar {
    display: block;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 6px 10px;
    font: 400 11.5px var(--sans);
    color: var(--t2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-search-sources {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.mini-search-sources span {
    font: 500 9.5px var(--sans);
    color: var(--accent);
    background: rgba(212,168,68,0.08);
    border: 1px solid rgba(212,168,68,0.20);
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

/* Sections: mini outline */
.mini-toc {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 5px;
}
.mini-toc li {
    display: flex; align-items: center; gap: 10px;
    font: 400 12px var(--sans);
    color: var(--t3);
    padding: 4px 8px;
    border-radius: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-toc li.is-active {
    background: rgba(212,168,68,0.10);
    color: var(--t1);
    box-shadow: inset 2px 0 0 var(--accent);
}
.mini-toc-num {
    color: var(--t3);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    width: 12px;
    text-align: right;
}
.mini-toc li.is-active .mini-toc-num { color: var(--accent); }

/* Export: format chips */
.mini-export-row {
    display: flex; flex-wrap: wrap; gap: 5px;
    align-items: center;
}
.mini-export-chip {
    font: 600 10.5px var(--sans);
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--t2);
    letter-spacing: 0.04em;
}
.mini-export-chip.is-active {
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 60%, #b58a30 100%);
    border-color: transparent;
    color: #1a1208;
    box-shadow: 0 4px 10px -3px rgba(212,168,68,0.45);
}
.mini-export-chip--tex {
    background: rgba(212,168,68,0.10);
    border-color: rgba(212,168,68,0.30);
    color: var(--accent);
}

/* Import: file → document arrow */
.mini-import-row {
    display: flex; align-items: center;
    gap: 10px;
    font: 500 11.5px var(--sans);
}
.mini-import-file {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--t2);
    font-feature-settings: 'tnum' on;
}
.mini-import-arrow {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
}
.mini-import-doc {
    background: var(--doc-bg, #f6efe2);
    color: var(--td1, #2a221a);
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.4);
    border: 1px solid rgba(0,0,0,0.08);
}

@media (max-width: 1000px) {
    .and-more-grid { grid-template-columns: repeat(2, 1fr); }
    .and-more { padding: 40px 24px 60px; }
}
@media (max-width: 600px) {
    .and-more-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   WHY — compact horizontal strip (replaces table)
   ============================================================ */
.why-section--strip {
    padding-top: 160px;
    padding-bottom: 80px;
}
.why-strip {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%),
        rgba(14,18,30,0.5);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    max-width: 980px;
    margin: 0 auto;
}
.why-strip-divider {
    background: linear-gradient(180deg, transparent 0%, rgba(212,168,68,0.25) 50%, transparent 100%);
}
.why-strip-col {
    padding: 32px 36px;
}
.why-strip-col--them { color: var(--t3); }
.why-strip-col--us   { color: var(--t1); }
.why-strip-head {
    font: 500 11px var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 22px;
    color: var(--t2);
}
.why-strip-col--us .why-strip-head { color: var(--accent); }
.why-strip-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 14px;
}
.why-strip-list li {
    font: 400 14.5px/1.6 var(--sans);
    color: var(--t3);
    padding-left: 22px;
    position: relative;
}
.why-strip-list li::before {
    content: '×';
    position: absolute;
    left: 0; top: 0;
    color: var(--t3);
    opacity: 0.6;
    font-size: 14px;
}
.why-strip-list--ours li { color: var(--t1); }
.why-strip-list--ours li::before {
    content: '';
    position: absolute;
    left: 2px; top: 9px;
    width: 12px; height: 1px;
    background: var(--accent);
    opacity: 0.85;
}

@media (max-width: 800px) {
    .why-strip { grid-template-columns: 1fr; }
    .why-strip-divider { display: none; }
    .why-strip-col { padding: 24px 22px; }
}

/* ============================================================
   prefers-reduced-motion
   Skip entrance, freeze cursor and scene replay (JS also guards reruns).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aurora-blob { animation: none !important; }
    .hero-eyebrow-dot,
    .hero-demo-caption-label::before { animation: none !important; }
    nav,
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .hero-stagger,
    .anim-msg,
    .anim-section,
    .mockup .preview-bar,
    .mockup .rev-item,
    .mockup .src-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .mock-cursor-wrap { display: none !important; }
    .mockup .app-scale { transition: none !important; }
    .mockup .section-block { transition: none !important; }
    .mockup .section-inner { transition: none !important; }
    .pricing-card { transition: none !important; }
    .landing-btn-primary { transition: none !important; }
    .landing-btn-primary:hover { transform: none !important; }
    .landing-btn-secondary { transition: none !important; }
    .landing-btn-secondary:hover { transform: none !important; }
    .pricing-card:hover { transform: none !important; }
    .pricing-card--featured:hover { transform: none !important; }
    .faq-chev { transition: none !important; }
}

/* ============================================================
   CHAPTER TYPOGRAPHY (v4) — Apple-style feature page header
   Eyebrow tag, huge weighted headline, narrow paragraph.
   ============================================================ */
.chapter-head {
    max-width: 1080px;
    margin: 0 auto 80px;
    padding: 0 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
/* .chapter-eyebrow is defined in the shared eyebrow rule above. */
/* .chapter-heading inherits from the unified rule above.
   Override only the margin/max-width specific to chapter pages. */
.chapter-heading {
    margin: 0;
    max-width: 32ch;
}
.chapter-desc {
    font: 400 19px/1.6 var(--sans);
    color: var(--t2);
    max-width: 56ch;
    margin: 0 auto;
    letter-spacing: -0.005em;
}

/* ============================================================
   HISTORY STACK (v4) — static checkpoints + diff preview
   Imported from v2 Apple-Watch variant.
   ============================================================ */
.history-section {
    padding-top: 160px;
    padding-bottom: 120px;
}
/* ============================================================
   CHAPTER 3 — Checkpoint timeline + diff preview (static)
   ============================================================ */
.history-stack {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 36px;
    max-width: 1120px !important;
    margin: 0 auto;
    align-items: start;
}

.history-rail {
    background: rgba(14, 22, 36, 0.55);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding: 22px 22px 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 1px 0 rgba(255,232,180,0.03) inset,
        0 24px 60px -28px rgba(0,0,0,0.6);
}
.history-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.history-rail-title {
    font: 600 11px var(--sans);
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: 0.24em;
}
.history-rail-count {
    font: 500 11px var(--sans);
    color: var(--t3);
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.04);
    padding: 2px 8px;
    border-radius: 999px;
}
.history-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.history-rail-list::before {
    /* Vertical rail behind the dots */
    content: '';
    position: absolute;
    left: 5px; top: 12px; bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(212,168,68,0.45) 0%,
        rgba(255,255,255,0.08) 35%,
        rgba(255,255,255,0.05) 100%);
}
.history-rail-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 6px 11px 0;
    cursor: default;
}
.history-rail-dot {
    flex-shrink: 0;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--chrome-surface);
    border: 1px solid rgba(255,255,255,0.18);
    margin-top: 3px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(10,12,26,0.85);
}
.history-rail-item--current .history-rail-dot {
    background: linear-gradient(180deg, #f4dca0 0%, var(--accent) 60%, #a07a2a 100%);
    border-color: var(--accent);
    box-shadow:
        0 0 0 3px rgba(10,12,26,0.85),
        0 0 18px rgba(212,168,68,0.55);
}
.history-rail-item--seed .history-rail-dot {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255,255,255,0.22);
}
.history-rail-body { flex: 1; min-width: 0; }
.history-rail-label {
    font: 500 14px var(--sans);
    color: var(--t2);
    letter-spacing: -0.005em;
    margin-bottom: 2px;
}
.history-rail-item--current .history-rail-label {
    color: var(--accent);
    font-weight: 600;
}
.history-rail-meta {
    font: 400 12px var(--sans);
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}

/* Diff preview card */
.history-diff {
    background: var(--chrome-bg2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,232,180,0.04) inset,
        0 0 0 1px rgba(212,168,68,0.06),
        0 40px 100px -30px rgba(0,0,0,0.75),
        0 12px 32px -10px rgba(0,0,0,0.45);
    position: relative;
}
.history-diff::before {
    content: '';
    position: absolute;
    top: 0; left: 18%; right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.45;
    z-index: 1;
}
.history-diff-head {
    padding: 20px 28px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.history-diff-title {
    font: 500 15px var(--sans);
    color: var(--t1);
    letter-spacing: -0.005em;
}
.history-diff-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.history-diff-chip {
    font: 500 11px var(--sans);
    color: var(--t2);
    background: rgba(255,255,255,0.05);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.history-diff-stat {
    font: 500 12px var(--sans);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}
.history-diff-stat--add {
    background: rgba(82, 167, 102, 0.14);
    color: #7fc28f;
}
.history-diff-stat--del {
    background: rgba(192, 84, 84, 0.14);
    color: #e08a8a;
}
.history-diff-body {
    padding: 26px 28px 22px;
    background: var(--doc-bg);
    background: radial-gradient(ellipse at 30% 0%, var(--doc-bg-light) 0%, var(--doc-bg) 80%);
    color: var(--td1);
}
.history-diff-para {
    font: 400 15px/1.7 var(--serif);
    color: var(--td1);
    margin: 0 0 14px;
    letter-spacing: -0.002em;
}
.history-diff-para:last-child { margin-bottom: 0; }
.history-diff .diff-ins {
    background: rgba(82, 167, 102, 0.22);
    color: #2e5d3a;
    text-decoration: none;
    padding: 1px 2px;
    border-radius: 2px;
}
.history-diff .diff-del {
    background: rgba(192, 84, 84, 0.22);
    color: #7a2e2e;
    text-decoration: line-through;
    text-decoration-color: rgba(122, 46, 46, 0.6);
    padding: 1px 2px;
    border-radius: 2px;
}
.history-diff-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: var(--chrome-bg);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.history-diff-btn {
    font: 500 12px var(--sans);
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--t2);
    cursor: pointer;
    transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.history-diff-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--t1);
    border-color: rgba(255,255,255,0.14);
}
/* Gold variant — same gradient and hover behavior as .landing-btn-primary
   so primary gold actions feel identical wherever they appear. */
.history-diff-btn--gold {
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 55%, #b58a30 100%);
    color: #1a1208;
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 8px 22px -6px rgba(212,168,68,0.5);
    transition: transform 180ms, box-shadow 180ms, filter 180ms;
}
.history-diff-btn--gold:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    color: #1a1208;
    background: linear-gradient(180deg, #f0d68f 0%, var(--accent) 55%, #b58a30 100%);
    border-color: transparent;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 12px 30px -6px rgba(212,168,68,0.6);
}

@media (max-width: 900px) {
    .history-stack { grid-template-columns: 1fr; gap: 24px; }
    .history-diff-head { padding: 16px 18px; }
    .history-diff-body { padding: 20px 20px 18px; }
    .history-diff-para { font-size: 14px; }
}

@media (max-width: 900px) {
    .chapter-head { margin-bottom: 56px; }
    .chapter-heading { font-size: clamp(36px, 9vw, 64px); }
    .chapter-desc { font-size: 16px; }
}