/* ============================================================
   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: var(--space-22);
    background: #100d09;
    overflow: auto;
    height: auto;
}
/* Nav-target sections each carry 120px top padding for inter-section rhythm.
   On a hash jump that padding would sit below the fixed nav as dead space, so
   the heading landed ~190px down. A negative scroll-margin pulls the landing
   up past the padding so the heading settles just below the nav (~30px gap).
   #scene-research is the hero (padding-top:0) and is fine as-is. */
#features, #scene-revisions, #faq { scroll-margin-top: -90px; }
/* The -90px above is tuned to the 120px desktop section padding. On phones
   those sections carry 72px padding (48px less), so the same offset would
   over-pull the hash jump and tuck the heading under the nav. Reduce it by
   the 48px delta to keep the heading the same gap below the nav. */
@media (max-width: 600px) {
    #features, #scene-revisions, #faq { scroll-margin-top: -42px; }
}
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(40,34,26,0.55), transparent 70%),
        #100d09;
    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,
            #2a251d   0%,
            #28241d   6%,
            #262219  12%,
            #231f17  20%,
            #201c15  30%,
            #1c1812  40%,
            #1a1610  50%,
            #16140f  60%,
            #14110c  70%,
            #100e0a  78%,
            #0d0b08  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: var(--space-4) var(--space-7);
    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;
}

/* "Doodle + sections" background (js/agent-bg.js) — opted in per page via
   body.agent-bg. The page sits on a flat deep lapis-black: no sky gradient,
   no static starfield, just the wandering pens + section boxes behind content. */
body.agent-bg { background: #1a1610; }   /* middle of the lapis descent — a bit brighter/warmer than near-black */
body.agent-bg::before { content: none; }
#agent-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    /* Promote the canvas to its OWN GPU compositor layer + contain its paint, so
       its per-frame repaint never invalidates/re-rasterizes the page content
       behind it (body text, the blurred nav). This is the main fix for "the whole
       site feels slow": the canvas recomposites on its own layer. */
    will-change: transform;
    contain: layout paint style;
}
/* Removed on phones (landing, pricing, blog — all load this file). On a small
   screen the pen is only visible in the hero band; opaque cards/mockups cover the
   rest, so the continuous canvas loop would mostly paint behind content you can't
   see through. agent-bg.js also early-returns when this canvas is display:none, so
   no animation loop runs at all. (The auth page hides it on mobile the same way.) */
@media (max-width: 600px) {
    #agent-bg { display: none; }
}

/* ---- 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 var(--space-4) 0 var(--space-11);
    height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-14);
    background: rgba(22,20,15,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: var(--radius-xl);
    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%); }

/* Static pages (blog, privacy, terms — body.chrome-static) have no landing
   entrance choreography. Replace the opacity:0 + 4s backstop reveal with a
   prompt fade-in that matches the page's own appear timing, so the header
   doesn't arrive late. Reduced-motion is still handled by the rule below
   (nav → opacity:1, animation:none). */
body.chrome-static nav { animation: nav-fade-in 680ms var(--ease) 40ms both; }

@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: var(--space-5);
    letter-spacing: -0.01em;
    text-decoration: none;            /* it's an <a> home link on every page */
    transition: color 150ms;
}
.nav-logo svg { width: 24px; height: 24px; display: block; transition: transform 180ms ease, filter 180ms ease; }
.nav-logo .brand-owl { transition: color 150ms ease; }
/* Two-tone wordmark: keep "Cite" steady, brighten "Owl", and lift the owl
 * medallion with a soft gold glow — instead of flattening the whole logo gold. */
.nav-logo:hover { color: var(--t1); }
.nav-logo:hover svg { transform: scale(1.07); filter: drop-shadow(0 1px 5px rgba(var(--accent-rgb), 0.55)); }
.nav-logo:hover .brand-owl { color: var(--accent-hover); }

/* Brand lockup — a papyrus plaque pinned top-left (a gilt cartouche over the dark
 * hero): the original perched owl in black (papyrus negative-space eyes) + serif
 * wordmark — dark "Cite", brick-red "Owl" (the app citation accent). */
.site-brand {
    position: absolute; top: 22px; left: 24px; z-index: 90;
    display: inline-flex; align-items: center; gap: var(--space-4);
    text-decoration: none;
    padding: var(--space-3) var(--space-8) var(--space-3) var(--space-5);
    background: var(--grad-papyrus);
    border: 1px solid rgba(201,154,62,0.55);
    border-radius: var(--radius-btn);
    box-shadow:
        inset 0 1px 0 rgba(255,250,235,0.55),
        0 10px 26px -12px rgba(0,0,0,0.55),
        0 3px 16px -6px rgba(212,168,68,0.18);
    transition: transform 200ms ease, box-shadow 200ms ease;
    /* settles in like a stamp being placed (backwards fill = hidden during the
       delay, then no forwards fill so :hover transform still works after). */
    animation: plaque-appear 600ms var(--ease) 400ms backwards;
}
/* shared by the landing + footer + auth plaques (auth loads landing.css) */
@keyframes plaque-appear {
    from { opacity: 0; transform: translateY(-6px) scale(0.95); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-brand, .footer-plaque, .auth-brand, .nav-brand { animation: none !important; }
}
.site-brand-mark { height: 37px; width: auto; display: block; }
.site-brand-name { font: 600 25px/1 var(--serif); letter-spacing: -0.01em; color: #2a1d10; }
/* "Owl" in the app's brick-red (--doc-accent), not gold. */
.site-brand .brand-owl-grad {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: var(--doc-accent); color: var(--doc-accent);
}
.site-brand:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,250,235,0.6), 0 14px 30px -12px rgba(0,0,0,0.55), 0 5px 20px -6px rgba(212,168,68,0.24); }
/* Compact plaque from 900px down — the same breakpoint the nav collapses to a
   top-right hamburger pill, so the brand (left) and the pill (right) align as a
   matched pair in opposite corners. */
/* On phones the brand moves INTO the nav pill (see the <=900 nav block below),
   so the standalone top-left plaque is hidden to avoid two brands on screen. */
@media (max-width: 900px) {
    .site-brand { display: none; }
}
.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: var(--space-12); }
.nav-link {
    text-decoration: none;
    color: var(--t3);
    font: 400 14px var(--sans);
    transition: color 150ms;
}
.nav-link:hover { color: var(--t1); }

/* Brand inside the nav — only used on the phone header (<=900px), where the
   owl + wordmark live in the dark-glass pill. On desktop the brand is the
   top-left .site-brand plaque, so this stays hidden. */
.nav-brand { display: none; }

/* Menu button — hidden on desktop; on the phone header it's the labeled "Menu"
   control (bars + word) centered in the bar. Carries no chrome of its own. */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    padding: 0;
}
.nav-hamburger:focus,
.nav-hamburger:focus-visible { outline: none; }
.nav-hamburger-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.nav-hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--t1);
    border-radius: 1px;
    transition: transform 150ms ease, opacity 150ms ease;
}
nav.nav-open .nav-hamburger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
nav.nav-open .nav-hamburger-bar:nth-child(2) { opacity: 0; }
nav.nav-open .nav-hamburger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Phone / small-tablet header (<=900px) ----
   The brand plaque, the labeled menu, and the Sign in merge into ONE dark-glass
   object spanning the top: a pill row (cream brand cap · "Menu" · gold Sign in
   cap) with the links UNROLLING out of the same sheet below a divider — one
   continuous gesture instead of a plaque and a pill floating in opposite corners.
   Gold lives on dark here, where the CTA reads richest, and the standalone
   .site-brand plaque is hidden at this width (rule above). justify-content:
   space-between distributes the three pill items, so the labeled "Menu" sits
   midway between the two caps (a labeled control reads as deliberately centred
   even though the wider brand cap means it's not the bar's exact pixel-centre).
   .nav-links has flex-basis:100% so it wraps onto its own line (the scroll body);
   order is set in CSS so the DOM can stay desktop-friendly. */
@media (max-width: 900px) {
    nav {
        left: 14px; right: 14px;
        top: 14px;
        margin: 0;
        width: auto;
        height: auto;
        padding: 0 var(--space-6);
        gap: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;   /* brand cap · Menu · Sign in cap */
        background: rgba(22,20,15,0.86);
        overflow: hidden;            /* clips the unroll to the rounded corners */
    }
    /* brand — the actual papyrus PLAQUE, nested inside the dark glass: the brand
       keeps its signature cream lockup (owl in black with negative-space eyes,
       dark "Cite", brick "Owl"), and the owl reads because the plaque itself is
       the bright surface. The dark glass carries the gold Sign in around it. */
    .nav-brand {
        display: inline-flex;
        order: 1;
        align-items: center;
        align-self: stretch;          /* fill the pill height -> a flush cap */
        gap: var(--space-4);
        margin-left: -12px;           /* break out of the nav's left padding so it sits flush;
                                         the nav's radius + overflow:hidden clip the left corners */
        text-decoration: none;
        padding: 0 var(--space-7) 0 var(--space-7);
        background: var(--grad-papyrus);
        border-radius: 0 10px 10px 0; /* square left (clipped to the bar corner), rounded into the glass on the right */
        box-shadow: inset 0 1px 0 rgba(255,250,235,0.5), 2px 0 8px -3px rgba(0,0,0,0.4);
    }
    .nav-brand-mark { height: 28px; width: auto; display: block; }
    .nav-brand-name { font: 600 20px/1 var(--serif); letter-spacing: -0.01em; color: #2a1d10; }
    .nav-brand-owl { color: var(--doc-accent); }   /* brick on the cream plaque */

    /* Sign in is a flush GOLD cap on the right end — mirrors the brand cap's
       shape (papyrus left, gold right), keeping the CTA hot (gold on dark). */
    .nav-cta {
        order: 3;
        align-self: stretch;
        margin: 0 -12px 0 0;          /* flush to the right edge */
        padding: 0 var(--space-8);
        font-size: 14px;
        border-radius: 10px 0 0 10px; /* rounded into the glass on the left, square right (clipped) */
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), -2px 0 9px -3px rgba(0,0,0,0.4);
    }
    .nav-hamburger {
        display: inline-flex;
        order: 2;                      /* space-between drops it midway between the two caps */
        flex-direction: row;           /* bars + "Menu" word side by side */
        gap: var(--space-4);
        height: 46px;                  /* anchors the pill-row band; the caps stretch to fill it */
    }
    .nav-hamburger-label {
        font: 500 14px var(--sans);
        color: var(--t1);
        letter-spacing: 0.01em;
    }

    /* the links unroll out of the SAME sheet: full-width second line, no panel
       chrome of its own (it IS the nav glass now), height-animated open. The
       gold fold-line rides the top edge of this block, so it auto-positions at
       the pill/links seam whatever the pill row height. */
    .nav-links {
        order: 4;
        position: relative;
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0;
        pointer-events: none;
        transition: max-height 300ms var(--ease), opacity 160ms ease,
                    padding 300ms var(--ease);
    }
    /* seam between the pill row and the links — the same subtle divider as the
       ones between links, so the first line reads as a normal line, not special. */
    .nav-links::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 1px;
        background: var(--chrome-border-subtle);
    }
    nav.nav-open .nav-links {
        max-height: min(70vh, 520px);
        opacity: 1;
        padding: 0 0 var(--space-6);
        pointer-events: auto;
    }
    .nav-link {
        padding: var(--space-6) var(--space-1);
        border-bottom: 1px solid var(--chrome-border-subtle);
        font-size: 15px;
    }
    .nav-link:last-of-type { border-bottom: none; }
}

/* ---- 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);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity;
    animation: ensure-visible 0.4s 2.5s forwards;   /* backstop */
}
/* Pure-fade entrance: no translate/scale offset, so a refresh never slides
   content up (or sideways) into place — elements fade in exactly where they
   sit. The direction classes stay as hooks but all resolve to the same fade. */

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

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

.divider { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-10); 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: var(--space-26) var(--space-10);
    position: relative; z-index: 2;
}
/* Hero-demo variant: zero top padding so the mockup peeks above the
   fold into the bottom of the hero viewport. */
.scene-section--hero-demo {
    padding: 0 var(--space-10) var(--space-26);
    position: relative;
}
.mockup--hero {
    position: relative;
    z-index: 1;
}
/* Hero-window approximations removed — the hero is styled by the shared
   .win scaffolding (gold-tinted border + stele crown) like the real app
   chrome, not a landing-only override. */

/* 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: var(--space-25);
    gap: var(--space-14);
}
.scene-mark {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-12);
    padding-bottom: var(--space-11);
    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: var(--font-eyebrow-sm);
    color: var(--t1);
    text-transform: uppercase; letter-spacing: var(--track-eyebrow);
    /* 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: var(--space-11); margin-bottom: var(--space-21); }
    .scene-number { font-size: 40px; }
    .scene-label { font-size: 10px; letter-spacing: var(--track-eyebrow); }
}


/* 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,
.scene-heading,
.why-heading,
.pricing-heading,
.faq-heading,
.cta h2 {
    font: var(--font-section);
    color: var(--t1);
    letter-spacing: var(--track-heading);
    margin: 0 0 var(--space-6);
    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,
.scene-desc,
.why-sub,
.cta p {
    font: var(--font-lead);
    color: var(--t2);
    max-width: 56ch;
    margin: 0;
    letter-spacing: -0.005em;
}
/* On non-landing contexts (auth, admin, etc) where the section title is
 * tighter, the body description follows the same compaction — used by
 * the .auth-body override pattern. */

/* Canonical button system (.landing-btn-primary / .landing-btn-secondary /
 * .btn-gold / .btn-quiet / .pricing-cta--primary / .nav-cta) lives in
 * components.css so it's available app-wide, not just on landing. */

/* ---- 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 var(--space-7); gap: var(--space-4);
}
.wd {
    width: 12px; height: 12px; border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.3);
}
.wd-r { background: var(--macos-red); }
.wd-y { background: var(--macos-yellow); }
.wd-g { background: var(--macos-green); }
.win-bar .wt {
    flex: 1; text-align: center;
    font: var(--font-meta); color: var(--t2);
    margin-right: var(--space-20); 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 {
    /* Shorter than full-viewport so the master-demo mockup below peeks
       above the fold — visitors see actual product, not just text.
       Symmetric vertical padding so the hero content sits with equal
       breathing room above and below (gap to nav ≈ gap to mockup). */
    min-height: 70vh;
    padding: var(--space-25) var(--space-17) var(--space-25);
    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: var(--space-4);
    font: 500 12px var(--sans); color: var(--t2);
    padding: var(--space-3) var(--space-7);
    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: var(--space-12);
    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: var(--font-display);
    color: var(--t1);
    max-width: 22ch; margin: 0 auto var(--space-8);
    letter-spacing: var(--track-heading);
    padding: 0 0.18em 0.20em;
    overflow: visible;
}
.hero-sub {
    font: var(--font-lead);
    color: var(--t2);
    max-width: 56ch; margin: 0 auto var(--space-19);
    letter-spacing: -0.005em;
}
.hero .landing-btn-primary { margin-bottom: 0; }
.hero-ctas {
    display: flex; gap: var(--space-14); align-items: center; justify-content: center; flex-wrap: wrap;
}
/* Phone-only CTA that sits under the demo (see landing.html). Hidden on desktop,
   where the in-hero CTA leads and the demo peeks below the fold. On phones it
   fades in as the final beat of the hero entrance (JS adds .show just after the
   demo settles), so the hero assembles headline+sub -> demo -> CTA instead of the
   button popping in. */
.hero-ctas--phone {
    display: none;
    opacity: 0;
    transition: opacity 280ms ease-out;             /* same pure fade as the desktop hero */
    animation: ensure-visible 0.4s 4.5s forwards;   /* backstop if JS never runs */
}
.hero-ctas--phone.show { opacity: 1; }

/* 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: var(--space-4);
    color: var(--t2);
    font: 500 14px var(--sans);
    text-decoration: none;
    padding: var(--space-6) var(--space-2);
    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: var(--space-2);
    padding: var(--space-5) var(--space-2) var(--space-3) var(--space-6); 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 var(--space-3) var(--space-5); 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: var(--space-5) var(--space-3) var(--space-4) var(--space-6);
}
.mockup .rev-list { flex: 1; padding: 0 var(--space-3) var(--space-6); overflow: hidden; }
.mockup .account-footer { flex-shrink: 0; border-top: 1px solid var(--chrome-border); }
.mockup .account-btn {
    display: flex; align-items: center; gap: var(--space-4);
    width: 100%; padding: var(--space-5) var(--space-6); 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: var(--space-17) var(--space-17) var(--space-17);
    position: relative;
}
.mockup .doc-header { max-width: var(--doc-max-w); margin: 0 auto var(--space-17); }
.mockup .doc-stats-bar {
    display: flex; align-items: center; gap: var(--space-6);
    font: 11px var(--sans); color: var(--td3);
    margin-top: var(--space-8); padding-top: var(--space-6);
    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: var(--space-2);
    padding: var(--space-5) var(--space-6) var(--space-3) var(--space-5); 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: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5);
}
/* Change cards appended into a tool-group fade in (opacity only — no slide, so
   the rows above don't reflow). */
.mockup .change-step.card-in { opacity: 0; transition: opacity 350ms var(--ease); }
.mockup .change-step.card-in.show { opacity: 1; }
.mockup .chat-input-area {
    padding: var(--space-4) var(--space-3) var(--space-5); border-top: 1px solid var(--chrome-border);
    flex-shrink: 0;
}
.mockup .chat-input-wrap {
    display: flex; align-items: flex-end; gap: var(--space-3);
    background: var(--chrome-surface); border: 1px solid var(--chrome-border);
    border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
    position: relative;  /* offset parent for the simulated typing caret */
}
.mockup .chat-input-text {
    flex: 1; font: 13px/1.55 var(--sans); color: var(--t3); padding: var(--space-3) 0;
}
/* Simulated typing caret — the real <textarea> shows no caret unless focused,
   and focusing it on the looping hero would steal the page's focus. JS sizes
   and positions this bar at the end of the typed text; it blinks while shown. */
.mockup .type-caret {
    position: absolute; width: 2px; border-radius: 1px;
    background: var(--accent); display: none; pointer-events: none;
}
.mockup .type-caret.show { display: block; animation: type-caret-blink 1.05s step-end infinite; }
@keyframes type-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

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

/* The preview/pending state stripe comes from the app's real .preview-section
   inset box-shadow (preview.css); no transparent border-left approximation
   here — it would stack on the real markup. */
.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);
    /* Cancel the unscoped cite-tip-in keyframe (citations.css) — it would
       animate opacity 0->1 on insertion and snap back, flashing the tooltip for
       a frame. The mockup reveals via the .show opacity transition instead. */
    animation: none;
    pointer-events: none;
    white-space: normal;
    line-height: 1.4;
    /* Gold glass-panel chrome — mirrors the real .cite-tip (citations.css). */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.008) 100%),
        var(--chrome-bg2);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    max-width: 360px;
    font-size: var(--fs-sm);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-md);
}
.mockup .cite-tip::before {
    content: '';
    position: absolute;
    top: 0; left: 27%; right: 27%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.75;
}
.mockup .cite-tip.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Upward variant — opens ABOVE the marker (for the intro tie-in, whose marker
   sits low in the framed view; opening down would clip at the camera edge). */
.mockup .cite-tip--up { top: auto; bottom: calc(100% + 10px); }
.mockup .cite-tip--up::before { top: auto; bottom: 0; }
/* Tooltip internals mirror the real .cite-tip (citations.css): gold source, a
   grey byline that carries the header/quote divider, and the evidence quote as
   the bright anchor (no blockquote bar). The claim is no longer echoed here —
   it's tinted inline on the cited text (.cited-claim.cite-claim-hover). */
.mockup .cite-tip-source { display: block; font-weight: 600; color: var(--accent-text); margin-bottom: var(--space-1); }
.mockup .cite-tip-byline { display: block; color: var(--t2); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--accent-border); font-size: var(--fs-xs); }
.mockup .cite-tip-byline em { font-style: italic; }
.mockup .cite-tip-quote { display: block; color: var(--t1); font-style: italic; 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; }

/* Mockup-only chat-change card shape (the real app uses .change-step). */
.mockup .chat-change { background: var(--chrome-surface); border: 1px solid var(--chrome-border); border-radius: var(--radius); padding: var(--space-5) var(--space-6); margin: var(--space-2) 0; cursor: pointer; }
.mockup .chat-change-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); }
.mockup .chat-change-section { font: 500 12px var(--sans); color: var(--t1); }
.mockup .chat-change-summary { font-size: var(--fs-xs); color: var(--t2); margin-bottom: var(--space-4); line-height: 1.5; }
.mockup .chat-change-actions { display: flex; gap: var(--space-2); }
/* Smaller accept/reject in chat cards and pending bar */
.mockup .chat-change .btn-accept,
.mockup .chat-change .btn-reject { font-size: 11px; padding: var(--space-2) var(--space-6); }
.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: var(--space-2); }
.mockup .pending-bar .btn-accept,
.mockup .pending-bar .btn-reject { font-size: 11px; padding: var(--space-2) var(--space-6); }

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

/* ---- Sources section in mockup ---- */
.mockup .sources-section {
    max-width: var(--doc-max-w); margin: var(--space-20) auto 0;
    padding-top: var(--space-14); border-top: 1px solid var(--doc-border);
}
.mockup .sources-heading {
    font: 400 24px/1.3 var(--serif); color: var(--td1);
    margin-bottom: var(--space-14);
}
.mockup .src-card {
    padding: var(--space-8) 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: var(--space-8);
}
.mockup .src-number {
    font-size: 16px; color: var(--doc-ochre);
    font-variant-numeric: tabular-nums; font-weight: 600;
    margin-right: var(--space-4);
}
.mockup .src-title { font: 500 17px/1.4 var(--serif); color: var(--td1); margin-bottom: var(--space-1); }
.mockup .src-url { font: 14px/1.5 var(--sans); color: var(--doc-accent); margin-bottom: var(--space-2); }
.mockup .src-desc { font: 14px/1.6 var(--serif); color: var(--td2); margin-bottom: var(--space-3); }
.mockup .src-claim-group {
    margin-top: var(--space-4); padding-left: var(--space-7);
    border-left: 2px solid var(--doc-border); margin-left: var(--space-1);
}
.mockup .src-claim-text { font: 13px/1.5 var(--serif); color: var(--td2); padding: var(--space-1) 0; }
.mockup .src-claim-quote {
    font-style: italic; color: var(--td3);
    font-size: var(--fs-xs); margin-top: var(--space-1); line-height: 1.5;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
/* Each chat message is wrapped in .anim-msg for the entrance fade. Make the
   wrapper a flex column so the real app's alignment rules reach the message:
   .msg.user { align-self: flex-end } only right-aligns the bubble when its
   parent is the flex container. Without this the wrapper is a plain block and
   every message renders full-width (the "centered user bubble" bug). */
.anim-msg {
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(8px);
    transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}
.anim-msg.show { opacity: 1; transform: none; }
/* Opacity-only reveal — NO translateY. The 8px slide read as a "jump" when
   the camera was settling on the section; a pure fade is clean. */
.anim-section {
    opacity: 0;
    transition: opacity 400ms var(--ease), border-color 400ms var(--ease);
}
.anim-section.show { opacity: 1; }

/* Accepting a change collapses its bar smoothly instead of snapping the
   layout up by the bar's height (the "jump on accept"). The animation adds
   .collapsing, waits for the transition, then swaps in the bar-less markup. */
.mockup .section-change-bar {
    overflow: hidden;
    max-height: 90px;
    transition: max-height 300ms var(--ease), opacity 220ms var(--ease),
                padding 300ms var(--ease), margin 300ms var(--ease);
}
/* Collapse padding + margin too, not just max-height: the bar carries
   padding (6px/2px) + margin-top (8px) that max-height:0 leaves behind, so
   the swap to bar-less markup would drop ~16px in one frame (the tiny stutter
   on accept). Zeroing them here makes the height reach a true 0 before the swap. */
.mockup .section-change-bar.collapsing {
    max-height: 0; opacity: 0;
    padding-top: 0; padding-bottom: 0; margin-top: 0;
}

/* Pending-edit highlight lives inline in the .section-body (the mockup wraps
   the added run in .diff-add rather than swapping in a separate
   .inline-diff-body). Accepting unwraps the span in the same container, so the
   only thing that can nudge the text is the flat-highlight rule's 1px
   horizontal inset — zero it here so accept never shifts the line. */
.mockup .section-body .diff-add { padding: 0 !important; }

/* 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: var(--space-26) var(--space-17) var(--space-27);
    position: relative; z-index: 2;
    max-width: 1100px; margin: 0 auto;
}
/* The CTA is a section heading + description + button. Its heading and
   subtitle inherit the exact shared section-heading / section-description
   rules above (font, 1.22 line-height, descender padding, 12px heading→sub
   gap). The only CTA-specific styles are centering and the subtitle→button
   gap, which is the hero's true sub→button value (48px). */
.cta h2 {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.cta p {
    margin: 0 auto var(--space-19);
}

footer {
    position: relative; z-index: 2;
    padding: var(--space-22) 0 var(--space-15);
    width: 100%;
    /* night-earth glass with a faint warm afterglow rising from the horizon */
    background:
        radial-gradient(ellipse 72% 100% at 50% 0%, rgba(var(--accent-rgb), 0.06), transparent 60%),
        rgba(10,8,6,0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* the horizon — the sun's last light resting on the line where night meets ground */
footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.42) 50%, transparent);
}
.footer-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-17);
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: var(--space-20);
    align-items: start;
    margin-bottom: var(--space-18);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-7); align-items: flex-start; }
/* footer brand — the papyrus plaque (warm sign-off in the dark footer) */
.footer-plaque {
    display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none;
    padding: var(--space-3) var(--space-8) var(--space-3) var(--space-5);
    background: var(--grad-papyrus);
    border: 1px solid rgba(201,154,62,0.55);
    border-radius: var(--radius-btn);
    box-shadow: inset 0 1px 0 rgba(255,250,235,0.55), 0 10px 26px -12px rgba(0,0,0,0.55), 0 3px 16px -6px rgba(212,168,68,0.18);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.footer-plaque:hover { transform: translateY(-1px); }
.footer-plaque-mark { height: 37px; width: auto; display: block; }
.footer-plaque-name { font: 600 25px/1 var(--serif); letter-spacing: -0.01em; color: #2a1d10; }
.footer-plaque .brand-owl-grad {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: var(--doc-accent); color: var(--doc-accent);
}
.footer-logo {
    font: 500 16px var(--sans); color: var(--t1);
    letter-spacing: -0.01em;
}
.footer-tagline {
    font: 400 13px/1.6 var(--sans); color: var(--t3);
    max-width: 260px;
}
.footer-cols {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-15);
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.footer-col-title {
    font: 600 11px var(--sans); color: var(--t2);
    text-transform: uppercase; letter-spacing: var(--track-eyebrow);
    margin-bottom: var(--space-1);
}
.footer-col a {
    font: 400 13px var(--sans); color: var(--t3);
    text-decoration: none; transition: color 150ms;
    overflow-wrap: anywhere;
}
.footer-col a:hover { color: var(--t1); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: var(--space-9);
    display: flex; align-items: center; gap: var(--space-4);
    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: var(--space-16); }
    .footer-cols { gap: var(--space-12); }
}
@media (max-width: 560px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--space-14); }
}

/* ============================================================
   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: var(--space-26) var(--space-10);
    position: relative; z-index: 2;
}
.pricing-heading {
    text-align: center;
    margin-bottom: var(--space-19);
}

.pricing-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-10);
    align-items: stretch;
}
/* Canonical pricing-card system (.pricing-card / .pricing-tier-name /
 * .pricing-price / .pricing-features / .pricing-cta / .pricing-fineprint)
 * lives in components.css so the app's plan picker can use the exact
 * same classes. The landing renders the plans as capability-led cards
 * (Claude-style "Everything in X, plus:"), so only the landing-specific
 * additions below live here. */

/* "Everything in Free/Plus, plus:" intro line inside a paid card's feature list —
   a quiet caption; the inherited tier name is emphasized in <b>. */
.pricing-features li.pricing-plus-line { font: 400 14px var(--sans); color: var(--t3); padding-left: 0; margin-bottom: var(--space-1); }
.pricing-features li.pricing-plus-line b { color: var(--t1); font-weight: 600; }
.pricing-features li.pricing-plus-line::before { display: none; }

/* 901–1000px still shows the full centered link bar; give it a touch more
   breathing room. Below 901 the nav becomes the top-right hamburger pill (its
   own padding lives in the <=900 block), so this is scoped to the upper range
   to avoid clobbering the pill's padding. */
@media (min-width: 901px) and (max-width: 1000px) {
    nav { padding: 0 var(--space-8); }
}
@media (max-width: 1000px) {
    /* Shorter hero on mobile: the old calc(100vh - 200px) left big empty
       starfield bands around the centered text and pushed the demo well
       below the fold. A smaller min-height lets the demo peek sooner. */
    .hero { padding: var(--space-23) var(--space-10) var(--space-15); min-height: 60vh; }
    /* Phones/tablets: the demo is the DESKTOP demo, uniformly scaled to fit
       — the same technique as the history preview below, not a tiny camera
       panning over a huge canvas. Keep the app at its 0.8 design scale so the
       1152px window and the cinematic camera frame EXACTLY as on desktop,
       then shrink the whole window via --fit (set per-width in landing.js
       fitMockups()). overflow:hidden clips the scaled window's full-size
       layout box; JS sets .mockup height to the scaled height so the next
       section doesn't get a gap. */
    .mockup { overflow: hidden; }
    .mockup .app-scale {
        --mock-scale: 0.8;
        transform: scale(0.8);
        transform-origin: top left;
        /* Promote the scaled app to its own GPU layer so the cinematic zoom
           (transform scale/translate, set inline by landing.js) composites the
           existing raster instead of re-rasterizing this large text layer on
           every frame — the main source of the phone demo's jank. The base
           .win promotion below stays for the desktop tilt; this one targets the
           zoomed child on the small-screen scale-to-fit path. */
        will-change: transform;
    }
    .mockup .win-inner {
        width: calc(1440px * 0.8);
        height: calc(780px * 0.8 + 32px);
    }
    .mockup .win {
        width: calc(1440px * 0.8); /* match the 0.8 design window so .win
            wraps win-inner exactly and its overflow:hidden doesn't clip it */
        transform: scale(var(--fit, 1));
        transform-origin: top left;
    }
    /* Section headings + hero are clamp()-driven (--font-section / --font-display
       in variables.css), so they scale smoothly across this range with no
       per-breakpoint font-size — only the layout (one-column cards) changes here. */
    .pricing-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 600px) {
    /* The hero headline (--font-display) floors at 31px: the largest size that
       keeps "...research papers with you." on two lines at 390px. max-width:none
       drops the 22ch cap so it uses the full phone width. The size itself is the
       token's clamp floor — only the cap override lives here. */
    .hero h1 { max-width: none; font-size: 35px; }
    /* Hero hugs its content on phones. min-height:60vh (from the ≤1000 block)
       padded a ~266px headline+sub+button block out to ~506px, stranding a
       ~240px empty band before the demo. Drop the min-height so the hero is just
       nav-clearance + content; the demo peeks immediately instead of after a
       dead scroll. 96px top sets a clear ~34px gap below the fixed nav pill
       (its bottom edge sits at ~62px) so the headline doesn't crowd the nav. */
    /* Phone hero is TOP-PACKED so the whole app preview lands on the first
       screen, not just a peek: nav-clearance + headline + subtitle sit tight at
       the top, then the full demo shows below, with the next section's heading
       peeking in at the very bottom to invite a scroll. (The earlier version
       centred the text in 68svh and let the demo peek — but you wanted the demo
       itself fully visible, since it's the product in action.) No CTA button
       lives in the hero — the closing "Start writing" section carries it.
       min-height:auto drops the centring so the flex column just hugs its
       content from the top; the demo section that follows fills the rest. */
    .hero { min-height: auto; padding: var(--space-24) var(--space-6) var(--space-6); }
    .hero-sub { margin-bottom: 0; }
    .hero .hero-ctas,
    .hero-ctas--phone { display: none; }
    /* The header brand STAMPS in when the nav reveals — on phones the stamping
       .site-brand is hidden and the plain .nav-brand shows instead, so it gets the
       same plaque-appear here. The hero content itself stays a PURE FADE, matching
       the PC landing (whose push/translate was deliberately removed — see the
       "Pure-fade entrance" note above). */
    nav.show .nav-brand { animation: plaque-appear 600ms var(--ease) both; }
    /* Section headings (--font-section) and the hero subtitle (--font-lead) are
       clamp-driven, so their phone sizes (30px / 15px) come straight from the
       tokens — no per-breakpoint override needed. */
    /* Tighter, uniform section rhythm on phones — symmetric padding keeps every
       section-to-section gap equal. 36px each side ⇒ ~72px between sections,
       enough air to separate without the airy desktop-scaled bands that read as
       dead space on a small screen.
       NOTE: .why-section and .faq-section carry their base padding:120px rule
       AFTER this media query (source order), so their phone override can't live
       here — it sits in the MOBILE VERTICAL-SPACING PASS at the end of the file.
       .pricing-section's base rule precedes this query, so it overrides fine. */
    .scene-section { padding: var(--space-16) var(--space-7); }
    /* Hero demo on phones: tight top so it sits right under the subtitle, the
       phone CTA below it, then a normal gap to the first feature section. */
    .scene-section--hero-demo { padding: var(--space-8) var(--space-7) var(--space-16); }
    /* Both app previews (the hero demo and the revisions history demo) are
       uniformly transform-scaled to ~0.34 on phones, which shrinks each window's
       own frame WITH it — the 16px radius becomes ~5px, the layered drop-shadow
       blur all but vanishes, and the gold hairline thins to nothing. So the slab
       that floats with real depth on desktop reads as a flat little screenshot
       here. Re-apply the frame on the UNSCALED wrappers (both already clip the
       scaled window via overflow:hidden — .mockup from the ≤1000 block,
       .history-mockup from the ≤768 block), so every demo keeps its premium
       framed-slab depth at phone size. The inner .win frame stays as-is; this
       just restores the depth the scale ate, identically for both demos. */
    .mockup,
    .history-mockup {
        border-radius: var(--radius-lg);
        box-shadow:
            0 0 0 1px rgba(212,168,68,0.12),
            0 18px 44px -16px rgba(0,0,0,0.78),
            0 5px 16px rgba(0,0,0,0.42);
    }
    .pricing-section { padding: var(--space-16) var(--space-7); }
    .scene-head { margin-bottom: var(--space-14); }
    .cta { padding: var(--space-18) var(--space-7) var(--space-19); }
    footer { padding-top: var(--space-19); }
    /* Move the brand plaque + tagline BELOW the link columns on phones. Stacked,
       the bright cream cartouche sat directly under the gold closing CTA and
       pulled attention straight off it; demoted to the foot of the footer it
       reads as a quiet sign-off above the copyright instead. (footer-inner is a
       grid, so order just reflows the stack.) */
    .footer-cols { order: 1; }
    .footer-brand { order: 2; }
}

/* ============================================================
   WHY — compact transformation rows
   ============================================================ */
.why-section {
    max-width: 1080px; margin: 0 auto; padding: var(--space-26) var(--space-10);
    position: relative; z-index: 2;
}
.why-header {
    text-align: center;
    margin: 0 auto var(--space-23);
    max-width: 1000px;
    display: flex; flex-direction: column; align-items: center;
}
.why-heading {
    margin-bottom: var(--space-13);
    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: var(--space-12);
    row-gap: 0;
    position: relative;
}
.why-thead {
    display: contents;
}
.why-tr {
    display: contents;
}
.why-th, .why-aspect, .why-them, .why-us {
    padding: var(--space-12) var(--space-12);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.why-thead .why-th {
    padding: var(--space-4) var(--space-12) var(--space-8);
    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: var(--track-eyebrow);
}
.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 16px/1.6 var(--sans);
    color: var(--t3);
    background: rgba(255,255,255,0.015);
    position: relative;
    padding-left: var(--space-18);
}
.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 16px/1.6 var(--sans);
    color: var(--t1);
    letter-spacing: -0.005em;
    background: rgba(212,168,68,0.04);
    position: relative;
    padding-left: var(--space-18);
}
.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: var(--space-12);
    max-width: 1000px;
    margin: 0 auto;
}
/* .why-card / .why-card--us / .why-card--them and the head/label/tagline
 * helpers have been moved to components.css so the app can reuse them
 * (the account panel uses .why-card--us for the Plan section). */
.why-card-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: var(--space-7);
}
.why-card-list li {
    position: relative;
    padding-left: var(--space-13);
    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 × — brighter white so each row reads crisply instead of nearly
       vanishing into the card (still clearly a "no" against CiteOwl's gold ✓) */
    background: rgba(255,255,255,0.42);
    -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: var(--space-4); padding: var(--space-12) 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: var(--font-eyebrow-sm); color: var(--accent);
        text-transform: uppercase; letter-spacing: var(--track-eyebrow);
    }
    .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: var(--track-eyebrow);
        margin-bottom: var(--space-3);
        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: var(--track-eyebrow);
        margin-bottom: var(--space-3);
        order: -1;
    }
    .why-us { display: flex; flex-direction: column; padding-top: var(--space-3); }
}

/* ============================================================
   INLINE CTA — small strip between scenes
   ============================================================ */
.inline-cta {
    max-width: 1200px; margin: 0 auto; padding: 0 var(--space-10);
    display: flex; align-items: center; justify-content: center; gap: var(--space-9);
    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 moved to components.css with the rest of the pricing system. */

/* ============================================================
   FAQ
   ============================================================ */
.faq-section {
    max-width: 1000px; margin: 0 auto; padding: var(--space-26) var(--space-10);
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    /* Let the answer panel animate to/from its natural height. */
    interpolate-size: allow-keywords;
}
.faq-section .faq-heading,
.faq-section .faq-list { width: 100%; }
.faq-heading {
    text-align: center;
    margin: 0 auto var(--space-21);
    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: var(--space-13) var(--space-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
    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;
}
/* Smooth open/close: animate the generated content box from 0 → auto height.
   Browsers without ::details-content just snap (current behaviour). */
.faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height 360ms var(--ease), content-visibility 360ms allow-discrete;
}
.faq-item[open]::details-content {
    height: auto;
}
.faq-a {
    padding: 0 var(--space-2) var(--space-14);
    font: 400 15px/1.75 var(--sans); color: var(--t2);
    max-width: 680px;
    transform: translateY(-6px);
    opacity: 0;
    transition: transform 360ms var(--ease), opacity 280ms var(--ease);
}
.faq-item[open] .faq-a {
    transform: none;
    opacity: 1;
}


/* ---- Citation showcase — focused doc panel using real app classes
   (.section-block / .cite-marker / .cite-highlight / .cite-tip).
   Only framing chrome lives here. ---- */
.citation-showcase {
    position: relative;
}
.citation-showcase-doc {
    /* Match the real app's doc-area radial — lightest point in the
       upper-middle so the page reads as parchment under a soft light. */
    background: radial-gradient(ellipse at 50% 40%, var(--doc-bg-light) 0%, var(--doc-bg) 70%);
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.06);
    padding: var(--space-17) var(--space-18);
    color: var(--td1);
    /* The marker anchor (.citation-showcase-anchor) is position:relative so the
       fake cursor sits on the [3]; the source tooltip itself flows in below the
       excerpt (see the left-aligned override further down). */
    position: relative;
    overflow: hidden;
    min-height: 240px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.55) inset,
        0 40px 100px -30px rgba(0,0,0,0.6),
        0 12px 32px -10px rgba(0,0,0,0.35);
}
/* Section block: drop the app's hover/tool-button affordances that don't
   apply in a static showcase. */
.citation-showcase-doc .section-block { margin-bottom: 0; }
.citation-showcase-doc .section-inner { padding: 0; }
.citation-showcase-doc .section-inner:hover { background: transparent; }
.citation-showcase-doc .section-header { margin-bottom: var(--space-9); }
/* Override the app's white-space: pre-wrap (needed in the real app to
   preserve diff-renderer newlines, but in our static HTML it renders
   source indentation as visible blank space). */
.citation-showcase-doc .section-body { white-space: normal; }
.citation-showcase-doc .section-body p { margin: 0 0 var(--space-7); }
.citation-showcase-doc .section-body p:last-child { margin-bottom: 0; }
.citation-showcase-doc .cite-marker { cursor: default; }

/* The active citation: anchor span makes the marker a positioning context
   so its tooltip can float below it inside the panel. */
.citation-showcase-anchor {
    position: relative;
    display: inline;
}
/* Fake mouse cursor hovering over the [3] marker — signals that the
   tooltip below is the result of an active hover, not a static panel.
   macOS-style arrow SVG inlined; tip sits at the marker so the body
   extends down-right naturally. */
.citation-showcase-cursor {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M6 2l1 19 4.4-5.6L16 24l3-1.2-4.6-8.5H22L6 2z' fill='%23fff' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    z-index: 6;
}
/* Tooltip — visible state. Mirrors the real .cite-tip styling but positioned
   relative to the PANEL (its positioning context), not the inline marker, so
   it can never spill outside the panel. Clamped horizontally to the panel
   padding (left/right: 44px) and centered within that band (margin: 0 auto +
   max-width), anchored to the lower area the panel reserves with its ~120px
   bottom padding. This holds at any viewport width: on a wide/fullscreen panel
   the max-width keeps it from over-stretching while it stays centered; on a
   narrow panel the left/right insets keep it inside the parchment. Reset the
   inherited cite-marker font (super, 0.75em) so the tip reads at normal size. */
.citation-showcase .cite-tip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: max-content;
    max-width: 320px;
    margin: 0;
    /* Gold glass-panel chrome — mirrors the real .cite-tip (citations.css). */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.008) 100%),
        var(--chrome-bg2);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    z-index: 10;
    pointer-events: none;
    font-family: var(--sans);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--t1);
    vertical-align: baseline;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 20px 50px -20px rgba(0,0,0,0.6),
        0 8px 20px -8px rgba(0,0,0,0.3);
}
.citation-showcase .cite-tip::before {
    content: '';
    position: absolute;
    top: 0; left: 27%; right: 27%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.75;
}
/* Tooltip internals mirror the real .cite-tip (citations.css): gold source
   title, a grey byline carrying the header/quote divider, and the evidence
   quote as the bright anchor in italic sans (no blockquote bar). Spans get
   display:block since the real app uses divs. */
.citation-showcase .cite-tip-source {
    display: block;
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--accent-text);
    margin-bottom: var(--space-2);
}
.citation-showcase .cite-tip-byline {
    display: block;
    font-weight: 400;
    font-size: var(--fs-xs);
    color: var(--t2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--accent-border);
}
.citation-showcase .cite-tip-byline em { font-style: italic; }
.citation-showcase .cite-tip-quote {
    display: block;
    color: var(--t1);
    font-style: italic;
    font-size: var(--fs-xs);
    line-height: 1.5;
}

/* ============================================================
   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: var(--space-26) var(--space-17);
    position: relative;
    z-index: 2;
}
.feature-split-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--space-22);
    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: var(--space-12);
    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; }

@media (max-width: 1000px) {
    .feature-split { padding: var(--space-25) var(--space-12); }
    .feature-split-inner,
    .feature-split--flip .feature-split-inner {
        grid-template-columns: 1fr;
        gap: var(--space-17);
    }
    .feature-split--flip .feature-split-visual { order: 2; }
    /* Stacked single-column: the copy is no longer beside the visual, so it
       centers like every other section header on the page (hero, history, why,
       FAQ, CTA) instead of stranding a lone left edge. */
    .feature-split-copy {
        align-items: center;
        text-align: center;
        max-width: none;
    }
    .feature-split-copy .chapter-heading,
    .feature-split-copy .chapter-desc {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================================
   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: var(--space-20) var(--space-17) var(--space-23);
    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 var(--space-20);
    padding-right: 0.06em;
}
.and-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-9);
}
.mini-tile {
    background: rgba(28,24,18,0.55);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: var(--space-13) var(--space-12) var(--space-12);
    display: flex; flex-direction: column;
    gap: var(--space-9);
    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: var(--space-6) var(--space-7);
    display: flex; flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    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 14px/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: var(--space-3) var(--space-5);
    font: 400 12px var(--sans);
    color: var(--t2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-search-sources {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.mini-search-sources span {
    font: 500 10px var(--sans);
    color: var(--accent);
    background: rgba(212,168,68,0.08);
    border: 1px solid rgba(212,168,68,0.20);
    padding: var(--space-1) var(--space-3);
    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: var(--space-2);
}
.mini-toc li {
    display: flex; align-items: center; gap: var(--space-5);
    font: 400 12px var(--sans);
    color: var(--t3);
    padding: var(--space-2) var(--space-4);
    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: var(--space-2);
    align-items: center;
}
.mini-export-chip {
    font: 600 11px var(--sans);
    padding: var(--space-2) var(--space-5);
    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: var(--grad-gold-pill);
    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: var(--space-5);
    font: 500 12px 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: var(--space-3) var(--space-5);
    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);
    color: var(--td1);
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    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: var(--space-17) var(--space-12) var(--space-20); }
}
@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: var(--space-23);
}
.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(22,20,15,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: var(--space-15) var(--space-16);
}
.why-strip-col--them { color: var(--t3); }
.why-strip-col--us   { color: var(--t1); }
.why-strip-head {
    font: var(--font-eyebrow-sm);
    text-transform: uppercase;
    letter-spacing: var(--track-eyebrow);
    margin-bottom: var(--space-11);
    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: var(--space-7);
}
.why-strip-list li {
    font: 400 15px/1.6 var(--sans);
    color: var(--t3);
    padding-left: var(--space-11);
    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: var(--space-12) var(--space-11); }
}

/* ============================================================
   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 { 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; }
    .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; }
    .faq-chev { transition: none !important; }
    .faq-item::details-content { transition: none !important; }
    .faq-a { transition: none !important; transform: 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 var(--space-23);
    padding: 0 var(--space-12);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
}
/* .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: var(--font-lead);
    color: var(--t2);
    max-width: 56ch;
    margin: 0 auto;
    letter-spacing: -0.005em;
}

/* ============================================================
   HISTORY MOCKUP — authentic snapshot of the app's history view
   Uses real .rev-*, .preview-bar, .section-block, .diff-* classes
   from sidebar.css / preview.css / sections.css / diff.css.
   Only framing chrome lives here.
   ============================================================ */
.history-mockup {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-12);
}
.history-mockup-win {
    background: var(--chrome-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 1px 0 rgba(255,232,180,0.04) inset,
        0 40px 100px -30px rgba(0,0,0,0.75),
        0 12px 32px -10px rgba(0,0,0,0.45);
}
.history-mockup-titlebar {
    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 var(--space-7);
    gap: var(--space-4);
}
/* The history screen cropped to the compare-and-restore moment: the Restore
   bar pinned at top, then the two-pane comparison on parchment. No browsing
   rail — the window sizes to its content, so it reads landscape, not tall. */
.history-mockup-body {
    display: block;
}

/* -- Document area: preview-bar header + the two-pane comparison on parchment.
   Fills the window; sizes to its content (the compare view is short). -- */
.history-mockup-doc {
    background: radial-gradient(ellipse at 50% 0%, var(--doc-bg-light) 0%, var(--doc-bg) 70%);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.history-mockup-doc .preview-bar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--doc-border);
    flex-wrap: wrap;
    row-gap: var(--space-4);
}
.history-mockup-doc .preview-bar-back,
.history-mockup-doc .btn-preview-restore {
    cursor: default;
}
.history-mockup-doc-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}
/* Replicates the app's #sections-container.preview-two-pane grid rule (which
   is ID-scoped and won't match here). gap:0 lets the per-cell checkpoint
   left-border stack into one continuous vertical divider; align-items:stretch
   equalizes paired cell heights for scroll-sync alignment. */
.history-mockup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}
.history-mockup-doc .section-block {
    margin-bottom: 0;
}
.history-mockup-doc .section-inner:hover {
    background: transparent;
}
/* The real .preview-diff-body uses white-space: pre-wrap because the live
   diff renderer emits raw newlines as line breaks. Our mockup uses plain
   inline text, so pre-wrap would render source indentation as visible blank
   space. Reset to normal HTML flow. */
.history-mockup-doc .preview-diff-body {
    white-space: normal;
}
.history-mockup-doc .preview-diff-body p {
    margin: 0 0 var(--space-7);
}
.history-mockup-doc .preview-diff-body p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    /* Show the FULL two-pane compare (no cropping). The whole window is
       rendered at a fixed design width and scaled to fit the viewport by
       landing.js fitMockups(); native pinch-zoom reveals detail. overflow
       clips the scaled window's (taller) layout box, and the parent's
       height is set to the scaled height in JS so no gap is left below. */
    /* Drop the mockup's own 24px side padding on phones so its scaled content
       fills the full section width (fitMockups subtracts this padding to size the
       window). Without it the history preview rendered ~48px narrower than the
       hero-demo and citation-showcase previews, which sit flush in their 20px
       sections. */
    .history-mockup { overflow: hidden; padding-left: 0; padding-right: 0; }
    .history-mockup-win {
        transform-origin: top left;
        will-change: transform;
    }
    .history-mockup-doc .preview-bar { padding: var(--space-5) var(--space-7); }
}

@media (max-width: 900px) {
    .chapter-head { margin-bottom: var(--space-20); }
    /* Section headings and body prose are token-driven (--font-section /
       --font-lead), so they scale across this range without a per-breakpoint
       font-size. Only the heading→content margin changes here. */
}

/* ============================================================
   LANDING PREVIEW FIXES
   ============================================================ */
/* 1. Inline diffs as a FLAT highlight. The app's .preview-diff-body diff
   technique (background-size:100% 1lh + box-decoration-break:clone + 0.5em
   padding) renders as stacked rounded boxes in these scaled previews, so we
   override it to a clean continuous highlight here. */
.history-mockup .diff-add, .history-mockup .diff-del,
.citation-showcase .diff-add, .citation-showcase .diff-del,
.mockup .diff-add, .mockup .diff-del {
    background-image: none !important;
    background-size: auto !important;
    padding: 0 var(--space-1) !important;
    border-radius: 2px !important;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.history-mockup .diff-add, .citation-showcase .diff-add, .mockup .diff-add {
    background-color: var(--green-bg) !important; color: var(--diff-add-body);
}
.history-mockup .diff-del, .citation-showcase .diff-del, .mockup .diff-del {
    background-color: var(--red-bg) !important; color: var(--diff-del-body);
}

/* 2. Citation showcase: a LEFT-aligned document excerpt (header + prose read
   like the real editor, not a centered poster), with the source tooltip in
   normal flow just below it, left-aligned and max-width-clamped so it can
   never escape the panel at any width. */
.citation-showcase-doc {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.citation-showcase-doc .section-header { justify-content: flex-start; }
.citation-showcase-doc .section-body { text-align: left; }
.citation-showcase .cite-tip {
    position: static !important;
    top: auto !important; right: auto !important; left: auto !important;
    transform: none !important;
    align-self: flex-start;
    margin: var(--space-6) 0 0 !important;
    width: auto; max-width: 340px;
}
/* The cited claim shown at rest (the real app only flashes this on navigate,
   so its 0.25 brick wash mixes to a muddy brown over the parchment when held
   still). A lighter brick tint plus a brick underline reads as a deliberate
   "this is the linked claim" highlight and keeps the serif crisp. */
.citation-showcase .cite-highlight {
    background: rgba(139,58,42,0.13);
    box-shadow: inset 0 -1px 0 var(--doc-accent-border);
    padding: var(--space-1) var(--space-1);
}

/* 3. History preview: the compare view is short, so the grid sizes to its
   content and doesn't scroll internally. The Restore bar (.preview-bar) IS
   shown here — it's the proof of "restore with one click". */
.history-mockup-doc-scroll { overflow: hidden !important; }

/* ============================================================
   MOBILE VERTICAL-SPACING PASS
   These selectors have desktop-spacing rules in later @media blocks above
   (feature-split @1000, chapter-head @900) or a base rule after the main
   ≤600 block (why-section, faq-section, why-header), so their phone overrides
   live here at the end of the file where source order lets them win. Keeps the
   landing's vertical rhythm tight on phones instead of the airy desktop bands.
   ============================================================ */
@media (max-width: 600px) {
    /* 14px sides, matching the scene-sections, so the citation-showcase visual
       spans the same width as the hero-demo and history mockups. */
    .feature-split { padding: var(--space-16) var(--space-7); }
    /* why/faq sections: their base padding:120px rule sits after the main ≤600
       block, so it leaks the full desktop band onto phones (≈240px between why
       and faq alone). Re-assert the 36px phone rhythm here so every section gap
       matches. */
    .why-section, .faq-section { padding: var(--space-16) var(--space-7); }
    /* Section headings sit one tier below the hero on phones: they keep the
       shared --font-section size (30px floor) — the SAME size as the closing
       .cta h2 — while the hero (--font-display, 31px) stays the single biggest
       title. An earlier pass shrank them to 24px, but that read as too small;
       matching the CTA gives every section title real weight. They no longer
       feel like competing heroes because the containment (solid panels, framed
       demos) now carries the structure, not a size drop. So no font-size
       override here — the shared token already lands them at the CTA size. */
    /* One heading→content gap for every section so the vertical rhythm is even
       and each heading bonds to the block it introduces (was 24/28/28, uneven). */
    .scene-head, .chapter-head, .why-header, .faq-heading { margin-bottom: var(--space-12); }

    /* ChatGPT comparison panels: the desktop 8%-white / 22%-gold hairlines over a
       60%-opacity, blur-backed fill vanish on a dark phone screen, so the two
       cards read as one undifferentiated list — "can't tell where the borders
       are". The pen canvas is off on phones (nothing to blur through), so drop
       the blur, make each card a solid clearly-bordered surface, and tighten the
       padding so the GENERIC AI / CITEOWL split is unmistakable. Scoped to
       .why-cards so the account panel's standalone .why-card--us is untouched. */
    .why-cards { gap: var(--space-12); }
    .why-cards .why-card {
        padding: var(--space-12) var(--space-12) var(--space-11);
        background: rgba(var(--chrome-bg-rgb), 0.92);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        border-color: rgba(255,255,255,0.16);
        border-radius: var(--radius-lg);   /* match the framed demos (was 22px) so every container shares one radius */
        box-shadow: 0 12px 32px -18px rgba(0,0,0,0.8);
    }
    .why-cards .why-card--us { border-color: rgba(212,168,68,0.42); }

    /* FAQ reads as a towering wall on phones: 18px serif questions on 24px
       vertical padding, stacked ~10 deep, each row reads like its own heading.
       Shrink the question type and tighten the rows so it's a compact, scannable
       list instead of a second hero. */
    .faq-q { padding: var(--space-8) var(--space-1); font-size: 16px; gap: var(--space-8); }
    .faq-a { padding-bottom: var(--space-11); font-size: 14px; }

    /* Citation showcase (the "real paper" source preview): full size it eats a
       whole phone screen — the 40/44 padding, 300px floor, and 16px tip make it
       tower over the copy beside it. Tighten the parchment, the type, and the
       source tip so it reads as a compact inline sample, not a poster. */
    .citation-showcase-doc {
        padding: var(--space-9) var(--space-9);
        min-height: 0;
        border-radius: 14px;
        box-shadow:
            0 1px 0 rgba(255,255,255,0.5) inset,
            0 18px 44px -22px rgba(0,0,0,0.55);
    }
    .citation-showcase-doc .section-header { margin-bottom: var(--space-4); }
    .citation-showcase-doc .section-title-input[data-level="1"] { font-size: 17px; }
    /* Scale the section number with the title — left at 26px it dwarfs the
       shrunken heading on phones. */
    .citation-showcase-doc .section-number[data-level="1"] { font-size: 17px; line-height: 1.3; }
    .citation-showcase-doc .section-body p { font: 400 13px/1.5 var(--serif); margin: 0; }
    .citation-showcase .cite-tip {
        margin-top: var(--space-6) !important;
        padding: var(--space-5) var(--space-6);
        max-width: 100%;
    }
    .citation-showcase .cite-tip-source { font-size: 11.5px; margin-bottom: var(--space-1); }
    .citation-showcase .cite-tip-byline { font-size: 10.5px; }
    .citation-showcase .cite-tip-quote { font-size: 10.5px; }
}