/* ============================================================================
   Boswell — website mockup CSS
   ----------------------------------------------------------------------------
   Single shared stylesheet for all four pages. Maps the Studio direction
   from `design_handoff_boswell_home/DESIGN_TOKENS.md` + `Boswell/Boswell/
   DesignSystem/Studio/StudioTokens.swift` to CSS custom properties.

   Conventions:
     - All colors are exposed as `--color-*` custom properties so a theme
       review can tweak one block and the whole site follows.
     - Light + dark via `prefers-color-scheme`. The default block holds the
       dark palette (matches the app's default appearance); the light block
       overrides it.
     - Spacing scale mirrors `StudioSpacing` exactly (s1..s16). Radii mirror
       `StudioRadius`.
     - Type ramp (`display`, `heading`, `body`, `caption-mono-upper`...)
       mirrors `StudioTextStyle`. The CSS class names use the same tokens
       so a designer reading DESIGN_TOKENS.md can grep across both.
     - "Flat-ish" per DESIGN_TOKENS.md §6 — no glassmorphism on content
       surfaces. The single subtle blur is on the sticky page-top nav,
       which is a defensible "where appropriate" Liquid Glass use.
   ============================================================================ */

/* ----- Fonts: bundled IBM Plex via @font-face (no CDN, sandbox-friendly) -- */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("fonts/IBMPlexSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Serif";
    src: url("fonts/IBMPlexSerif-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ----- Tokens: dark palette is the default (matches app default) --------- */

:root {
    color-scheme: dark light;

    /* Brand palette — dark (DESIGN_TOKENS.md §2). */
    --color-bg:              #100c08;
    --color-bg-grad-top:     #1c1410;
    --color-bg-grad-bottom:  #0d0a06;
    --color-panel:           rgba(0, 0, 0, 0.18);
    --color-surface:         rgba(255, 240, 220, 0.025);
    --color-surface-hi:      rgba(255, 240, 220, 0.05);
    --color-border:          rgba(255, 240, 220, 0.08);
    --color-border-hi:       rgba(255, 240, 220, 0.14);
    --color-text:            #f3e8d4;
    --color-text-dim:        rgba(243, 232, 212, 0.62);
    --color-text-faint:      rgba(243, 232, 212, 0.40);
    --color-text-ghost:      rgba(243, 232, 212, 0.22);
    --color-accent:          #e8b96a;
    --color-accent-deep:     #b8862a;
    --color-accent-dim:      rgba(232, 185, 106, 0.18);
    --color-red:             #e76f56;
    --color-green:           #7eb88a;

    /* On-accent: text/icons sitting on a solid accent fill.
       Booth-black gives the strongest contrast on amber.        */
    --color-on-accent:       #100c08;

    /* Speaker palette — used incidentally for hero illustration.
       --lilac / --blue mirror the design's bare-name tokens so the
       Markdown-sample card (SAU-673) can use them without aliasing. */
    --speaker-terracotta:    #c98668;
    --speaker-sage:          #7eb88a;
    --speaker-lilac:         #b89cc8;
    --speaker-blue:          #6ea8ff;
    --lilac:                 #b89cc8;
    --blue:                  #6ea8ff;

    /* Typography. Plex bundled locally; system stack covers font-load gap. */
    --font-sans:  "IBM Plex Sans",  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-serif: "IBM Plex Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif;
    --font-mono:  "IBM Plex Mono",  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Spacing scale — mirrors StudioSpacing.s1..s16 (px). */
    --s1:  2px;
    --s2:  4px;
    --s3:  6px;
    --s4:  8px;
    --s5:  10px;
    --s6:  12px;
    --s7:  14px;
    --s8:  16px;
    --s9:  18px;
    --s10: 22px;
    --s12: 24px;
    --s14: 28px;
    --s16: 32px;
    --s20: 40px;
    --s24: 56px;
    --s32: 72px;
    --s40: 96px;

    /* Corner radii — mirrors StudioRadius. */
    --r-xs:   3px;
    --r-sm:   4px;
    --r-md:   6px;
    --r-lg:   8px;
    --r-xl:   10px;
    --r-2xl:  12px;
    --r-3xl:  18px;
    --r-pill: 999px;

    /* Layout. */
    --content-max: 1180px;
    --content-narrow: 760px;

    /* Motion. */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-med:  220ms;
}

@media (prefers-color-scheme: light) {
    :root {
        /* Brand palette — light (DESIGN_TOKENS.md §3). */
        --color-bg:              #f5f1e8;
        --color-bg-grad-top:     #faf6ec;
        --color-bg-grad-bottom:  #ede7d8;
        --color-panel:           #ede5d2;
        --color-surface:         rgba(60, 40, 20, 0.04);
        --color-surface-hi:      rgba(60, 40, 20, 0.08);
        --color-border:          rgba(60, 40, 20, 0.10);
        --color-border-hi:       rgba(60, 40, 20, 0.18);
        --color-text:            #221912;
        --color-text-dim:        rgba(34, 25, 18, 0.62);
        --color-text-faint:      rgba(34, 25, 18, 0.40);
        --color-text-ghost:      rgba(34, 25, 18, 0.22);
        --color-accent:          #b8862a;
        --color-accent-deep:     #946a1e;
        --color-accent-dim:      rgba(184, 134, 42, 0.14);
        --color-red:             #a8442e;
        --color-green:           #4f7345;
        --color-on-accent:       #f5f1e8;
        /* SAU-673: foundation gap surfaced by anatomy section. Dark-mode
           --lilac (#b89cc8) gives ~1.5:1 contrast against the light bg —
           fails WCAG AA. Override to a darker violet (~5.2:1) for the
           md-speaker2 transcript tag and any future lilac uses. */
        --lilac:                 #6c4a86;
        --speaker-lilac:         #6c4a86;
    }
}

/* ----- Reset (minimal — semantic HTML doesn't need much) ----------------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    background-image:
        radial-gradient(ellipse 80% 60% at 20% 0%,
            var(--color-bg-grad-top) 0%,
            var(--color-bg-grad-bottom) 60%);
    background-attachment: fixed;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-deep); text-decoration: underline; }
hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--s12) 0;
}

::selection { background: var(--color-accent-dim); color: var(--color-text); }

/* Honor reduced motion across the board. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----- Typography utility classes — mirror StudioTextStyle --------------- */

.t-display {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.t-display-sm {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.t-heading {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.t-subhead {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.t-body {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
}

.t-body-lg {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-text-dim);
}

.t-body-sm {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-dim);
}

.t-caption {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--color-text-dim);
}

.t-eyebrow {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.t-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.t-dim   { color: var(--color-text-dim); }
.t-faint { color: var(--color-text-faint); }
.t-ghost { color: var(--color-text-ghost); }

/* ----- Shared section primitives (design refresh foundation, SAU-670) ---
   Used by the new content sections landed in SAU-671..SAU-676. Naming
   mirrors the design source (`Boswell Website.html`) so a designer reading
   that file can grep across both. All primitives honor both color modes
   via the existing token system above. */

.eyebrow {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.eyebrow-dim {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

.intro {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--color-text-dim);
    max-width: 56ch;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s16);
    margin-bottom: var(--s24);
}
.section-head-left { max-width: 640px; }
.section-head .eyebrow { display: block; margin-bottom: var(--s9); }
.section-head .intro { margin-top: var(--s9); }

.section-head-stamp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-ghost);
    align-self: flex-start;
    flex-shrink: 0;
}

.rule {
    height: 1px;
    width: 100%;
    background: var(--color-border);
    border: 0;
}

em.amber {
    color: var(--color-accent);
    font-style: italic;
}

i.serif-i {
    font-family: var(--font-serif);
    font-style: italic;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.serif {
    font-family: var(--font-serif);
}

/* Tighter padding for sections that sit closer together (matches design's
   `section.tight` — 72px vs 96px default). Mobile drops to s24 to match
   the existing global section-on-mobile rule. */
section.tight { padding-block: var(--s32); }
@media (max-width: 760px) {
    section.tight { padding-block: var(--s24); }
}

@media (max-width: 760px) {
    .section-head {
        flex-direction: column;
        gap: var(--s8);
        margin-bottom: var(--s20);
    }
    .section-head-stamp { align-self: flex-start; }
}

/* ----- Layout primitives ------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--s16);
}

.container-narrow {
    width: 100%;
    max-width: var(--content-narrow);
    margin-inline: auto;
    padding-inline: var(--s16);
}

main {
    display: block;
    padding-block: var(--s32);
}

section {
    padding-block: var(--s40);
}

@media (max-width: 760px) {
    section { padding-block: var(--s32); }
}

/* ----- Top navigation (the one place blur is used) ----------------------- */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
    border-bottom: 1px solid var(--color-border);
}

.site-nav-inner {
    display: flex;
    align-items: center;
    gap: var(--s16);
    height: 64px;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--s16);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s6);
    color: var(--color-text);
    text-decoration: none;
}
.brand:hover { color: var(--color-text); text-decoration: none; }

.brand-wordmark {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.012em;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: var(--s6);
    margin-left: auto;
}

.site-nav-links a {
    display: inline-flex;
    align-items: center;
    padding: var(--s4) var(--s8);
    border-radius: var(--r-md);
    color: var(--color-text-dim);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.site-nav-links a:hover {
    color: var(--color-text);
    background: var(--color-surface-hi);
    text-decoration: none;
}
.site-nav-links a[aria-current="page"] {
    color: var(--color-text);
    background: var(--color-surface);
}

.site-nav-links .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s4) var(--s8);
    margin-left: var(--s4);
    border-radius: var(--r-md);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.site-nav-links .nav-cta:hover {
    background: var(--color-accent-deep);
    color: var(--color-on-accent);
    text-decoration: none;
}
.site-nav-links .nav-cta svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 640px) {
    .site-nav-links a { padding: var(--s4) var(--s6); font-size: 13px; }
    /* Collapse wide nav on small screens: hide the section anchor links,
       keep the brand + download CTA so the primary action is still reachable. */
    .site-nav-links .nav-anchor { display: none; }
    .site-nav-links .nav-cta { font-size: 12px; padding: var(--s3) var(--s6); }
}

/* ----- Buttons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s6);
    padding: var(--s6) var(--s12);
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    -webkit-user-select: none;
            user-select: none;
}
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}
.btn-primary:hover {
    background: var(--color-accent-deep);
    color: var(--color-on-accent);
    text-decoration: none;
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-hi);
}
.btn-secondary:hover {
    background: var(--color-surface-hi);
    text-decoration: none;
    color: var(--color-text);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-dim);
}
.btn-ghost:hover {
    color: var(--color-text);
    background: var(--color-surface);
    text-decoration: none;
}

.btn-lg {
    padding: var(--s8) var(--s16);
    min-height: 48px;
    font-size: 15px;
}

.btn-block { width: 100%; justify-content: center; }

/* ----- Hero (landing) ---------------------------------------------------
   Two-column grid (copy + app-frame preview), 64px gap, stacks at <=900px.
   The SAU-668 invariant lives in motion.css and cascades to every
   descendant of `.hero` — `html.js-motion .hero .reveal` stays visible at
   scroll=0 regardless of nesting. (SAU-671) */

.hero {
    padding-block: var(--s32) var(--s24);
    text-align: left;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s24);
    align-items: start;
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--s20);
    }
}

/* Light-amber pill with dot — replaces the older solid-amber hero-eyebrow. */
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s5);
    padding: var(--s2) var(--s8);
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-pill);
    background: var(--color-accent-dim);
}
.hero-chip-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--r-pill);
    background: var(--color-accent);
    flex-shrink: 0;
}
.hero-chip .eyebrow-dim {
    color: var(--color-text-dim);
}

.hero-title {
    margin: var(--s14) 0 var(--s12);
    max-width: 22ch;
}
.hero-title .quill {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-accent);
}

.hero-intro {
    max-width: 56ch;
    margin: 0 0 var(--s20);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s8);
    align-items: center;
}

.hero-meta {
    margin-top: var(--s12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s12);
    align-items: center;
    color: var(--color-text-faint);
}

.hero-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: var(--r-pill);
    background: var(--color-text-faint);
}

/* ----- App-frame (right column app-window preview) ----------------------
   Window chrome with titlebar (traffic lights) + sidebar + main panel. The
   waveform bars are generated by the inline JS at the bottom of the hero
   section (56 bars, sine envelope). */

.app-frame {
    border-radius: var(--r-2xl);
    background: var(--color-bg);
    border: 1px solid var(--color-border-hi);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}
.app-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 20% 0%,
        var(--color-bg-grad-top) 0%, transparent 60%);
    pointer-events: none;
}

.app-titlebar {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s6) var(--s7);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-panel);
    position: relative;
    z-index: 1;
}
.tl {
    width: 11px;
    height: 11px;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.tl-r { background: #ff5f57; }
.tl-y { background: #febc2e; }
.tl-g { background: #28c840; }

.app-titlebar-title {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--color-text-faint);
    text-transform: uppercase;
    margin-left: var(--s7);
}

.app-body {
    display: grid;
    grid-template-columns: 168px 1fr;
    position: relative;
    z-index: 1;
    min-height: 460px;
}

.app-side {
    border-right: 1px solid var(--color-border);
    padding: var(--s7) 0 var(--s9);
    background: var(--color-panel);
    display: flex;
    flex-direction: column;
}
.app-side-brand {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: 0 var(--s8) var(--s7);
}
.app-side-section {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    padding: var(--s7) var(--s9) var(--s3);
}

.app-nav {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--s5);
    margin: 0 var(--s4);
    border-radius: var(--r-md);
    font-size: 12px;
    color: var(--color-text);
}
.app-nav.selected { background: var(--color-surface-hi); }
.app-nav.selected .app-nav-icon { color: var(--color-accent); }
.app-nav-icon {
    width: 14px;
    height: 14px;
    color: var(--color-text-dim);
    display: inline-flex;
    flex-shrink: 0;
}
.app-nav-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--color-text-faint);
}

.app-main {
    padding: var(--s9) var(--s10) var(--s10);
    display: flex;
    flex-direction: column;
    gap: var(--s7);
}

/* On-air pulse pill — red mono caps with an animated halo behind the dot.
   The halo pulse is paused under prefers-reduced-motion via the global
   rule above (animation-duration: 0.001ms !important + iteration-count: 1). */
.onair {
    display: inline-flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s2) var(--s5) var(--s2) var(--s4);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--color-red) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-red) 28%, transparent);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: flex-start;
}
.onair-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--color-red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red) 22%, transparent);
    animation: onair-pulse 1.6s ease-in-out infinite;
}
@keyframes onair-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red) 22%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-red) 10%, transparent); }
}

.app-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.015em;
    color: var(--color-text);
}

/* Waveform — flex row of bars sized by the inline JS in index.html. */
.wave {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 2px;
}
.wave-bar {
    flex: 1;
    background: var(--color-accent);
    border-radius: 1px;
    opacity: 0.7;
}

/* Speaker turns. */
.turns { display: flex; flex-direction: column; margin-top: var(--s2); }
.turn {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: var(--s6);
    padding: var(--s4) 0;
    border-top: 1px solid var(--color-border);
    align-items: start;
}
.turn:first-child { border-top: 0; }
.avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9px;
    color: var(--color-bg);
    flex-shrink: 0;
}
.av-rb { background: var(--speaker-terracotta); }
.av-ay { background: var(--color-green); }
.av-yo { background: var(--color-accent); color: var(--color-on-accent); }
.turn-body {
    font-family: var(--font-sans);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text);
}
.turn-time {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    color: var(--color-text-faint);
    padding-top: 2px;
}

/* Sidebar collapses below 720px so the main panel fills the frame. */
@media (max-width: 720px) {
    .app-body { grid-template-columns: 1fr; min-height: 0; }
    .app-side { display: none; }
    .app-main { padding: var(--s8) var(--s9) var(--s9); }
}

/* ----- Hero ticker strip ------------------------------------------------
   Full-bleed marquee beneath the hero grid. Track is duplicated so the
   `translateX(-50%)` keyframe loops without a visible seam. Animation
   pauses under prefers-reduced-motion. */

.ticker {
    margin-top: var(--s24);
    border-block: 1px solid var(--color-border);
    background: var(--color-panel);
    overflow: hidden;
    padding: var(--s7) 0;
}
.ticker-track {
    display: flex;
    align-items: center;
    gap: var(--s16);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    animation: ticker-scroll 60s linear infinite;
    will-change: transform;
}
.ticker-track .accent-dot {
    color: var(--color-accent);
    margin: 0 var(--s4);
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation-play-state: paused; }
}

/* ----- Feature grid (landing) ------------------------------------------ */

/* Hairline-divider trick: parent is filled with --color-border, children
   have an opaque --color-bg, and the `gap: 1px` lets the parent color show
   through as 1px-wide dividers. Border around the outer container closes
   the top/right/bottom/left edges so it reads as a single rounded panel.
   Requires cell bg to be opaque — --color-bg is solid in both modes; do not
   substitute --color-surface (rgba) here or the hairlines will composite away. */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

.feature {
    background: var(--color-bg);
    padding: var(--s16) var(--s14) var(--s20);
    display: flex;
    flex-direction: column;
    gap: var(--s7);
    min-height: 240px;
}

.feature-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--color-accent);
}

.feature h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.018em;
    line-height: 1.15;
}

.feature p {
    margin: 0;
    color: var(--color-text-dim);
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: -0.004em;
}

.feature-stamp {
    margin-top: auto;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-ghost);
}

@media (max-width: 900px) {
    .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .features { grid-template-columns: 1fr; }
    .feature { min-height: 0; }
}

/* ----- Anatomy of a meeting (timeline + Markdown card) ----------------- */

/* Two-column showcase: a 4-step timeline (T+0s → ~2m) on the left,
   a stylized Markdown output card on the right. The card is a static
   visual mock — no parser, no real data. Both columns reveal together. */
.anatomy-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s24);                /* 56px */
    align-items: center;
}

.anatomy-points {
    display: flex;
    flex-direction: column;
    gap: var(--s14);                /* 28px */
}

.ap {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--s8);                 /* 16px */
    padding-bottom: var(--s14);     /* 28px */
    border-bottom: 1px solid var(--color-border);
}

.ap:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.ap-tag {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--color-accent);
    letter-spacing: 0.04em;
    padding-top: 2px;
}

.ap h4 {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.016em;
    margin: 0 0 var(--s3);          /* 6px */
}

.ap p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text-dim);
    /* The amber file path uses non-breaking hyphens so it stays as a single
       string on desktop. On mobile this would force horizontal overflow —
       allow break-anywhere so it wraps mid-string if needed. */
    overflow-wrap: anywhere;
}

/* Markdown card — the deliverable, rendered as if it were already in
   your editor. Body uses overflow: auto so heavy content stays inside
   the card on narrow viewports instead of pushing the layout. */
.md-card {
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-2xl);
    background: var(--color-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 540px;
}

.md-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-hi);
}

.md-tab {
    padding: var(--s5) var(--s8);   /* 10px 16px */
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    border-right: 1px solid var(--color-border);
}

.md-tab.active {
    color: var(--color-accent);
    background: var(--color-bg);
}

.md-tab.spacer {
    flex: 1;
    border-right: 0;
}

.md-stamp {
    padding: var(--s5) var(--s8);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--color-text-ghost);
    text-transform: uppercase;
}

.md-body {
    padding: var(--s12) var(--s14); /* 24px 28px */
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--color-text);
    flex: 1;
    overflow: auto;
}

.md-h1     { color: var(--color-accent); font-weight: 500; }
.md-h2     { color: var(--color-text);   font-weight: 500; margin-top: var(--s7); }
.md-meta   { color: var(--color-text-faint); }
.md-bullet { color: var(--color-text-dim); }
.md-speaker  { color: var(--color-green); }
.md-speaker2 { color: var(--lilac); }
.md-time   { color: var(--color-text-faint); }
.md-tag    { color: var(--color-accent); }

@media (max-width: 900px) {
    /* minmax(0, 1fr) lets the track shrink below grid items' intrinsic
       min-content width — required so the md-card's long mono lines and
       the timeline's long file path don't push the layout horizontally.
       The card body keeps overflow: auto so it scrolls internally. */
    .anatomy-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s20);            /* 40px */
    }
    .anatomy-points, .md-card { min-width: 0; }
    .md-card { min-height: 0; }
}

/* ----- Privacy ("Quiet by default" + routing diagram) ------------------
   Two-column section: copy + promises (left), .quiet-card routing diagram
   (right). The card is a static visual story — three source→destination
   rows ending with a "0 bytes since launch" promise; it is NOT wired to
   real network telemetry. Stacks at <=900px; the inner 3-col `.quiet-row`
   grid stacks at <=600px with a rotated arrow. */
.privacy {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s24);                /* 56px — design spec 64px, --s24 is 56px (next on the scale) */
    align-items: center;
}

.privacy-h2 { margin-top: var(--s10); }      /* 22px ≈ design's 20px */
.privacy-intro { margin-top: var(--s10); }    /* 22px */

.privacy-promises {
    margin: var(--s16) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s7);                 /* 14px */
    font-size: 13.5px;
    color: var(--color-text-dim);
}
.privacy-promises li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: var(--s5);                 /* 10px */
    align-items: start;
}
.privacy-check {
    color: var(--color-accent);
    flex-shrink: 0;
    line-height: 1.55;
}
.privacy-cmd {
    color: var(--color-text);
}
.privacy-link {
    color: var(--color-accent);
    border-bottom: 1px dotted var(--color-accent-deep);
}
.privacy-link:hover {
    color: var(--color-accent-deep);
    text-decoration: none;
}

/* Routing-diagram panel. The subtle amber radial gradient (`accent-dim`
   token, which already adapts per color mode) layered over `--color-bg`
   so the card sits visibly above the page background in both modes. */
.quiet-card {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    /* Design spec is 36px/32px; --s scale jumps 32→40, so use s20/s16
       to keep the same visual proportions while staying on-scale. */
    padding: var(--s20) var(--s16);
    /* Amber radial wash at 6% — design ref calls out this exact opacity
       as subtle-on-dark / doesn't-wash-out-on-light. --color-accent-dim
       (18% dark / 14% light) is too punchy; color-mix locks it to 6%
       in both modes. */
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%,
            color-mix(in srgb, var(--color-accent) 6%, transparent) 0%,
            transparent 70%),
        var(--color-bg);
    position: relative;
}

.quiet-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s9);       /* 18px */
}
.quiet-local {
    font-size: 10.5px;
    color: var(--color-green);
}

.quiet-row {
    display: grid;
    grid-template-columns: 1fr 28px 1fr;
    align-items: center;
    gap: var(--s8);                 /* 16px */
    padding: var(--s7) 0;           /* 14px */
    border-top: 1px dashed var(--color-border);
}
.quiet-row:first-of-type { border-top: 0; }

.quiet-box {
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-lg);     /* 8px */
    padding: var(--s6) var(--s7);   /* 12px 14px */
    background: var(--color-surface);
}
.quiet-box-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-bottom: var(--s2);
}
.quiet-box-value {
    font-size: 13.5px;
    color: var(--color-text);
    letter-spacing: -0.005em;
    overflow-wrap: anywhere;
}
.quiet-arrow {
    font-family: var(--font-mono);
    color: var(--color-accent);
    text-align: center;
    font-size: 14px;
}

/* Disabled cloud-fallback box: dashed border + line-through value. The
   `.off` border uses --color-border (not -hi) so the dashed pattern reads
   "muted" against the solid borders of the active boxes — verified in
   both light and dark. */
.quiet-box.off {
    border-style: dashed;
    border-color: var(--color-border);
    background: transparent;
}
.quiet-box.off .quiet-box-value {
    color: var(--color-text-faint);
    text-decoration: line-through;
}

.quiet-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s10);         /* 22px */
    padding-top: var(--s9);         /* 18px */
    border-top: 1px dashed var(--color-border);
}
.quiet-foot-label {
    font-size: 10.5px;
    color: var(--color-text-faint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.quiet-foot-counter {
    font-size: 11px;
    color: var(--color-green);
    letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .privacy {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s20);            /* 40px */
    }
}

@media (max-width: 600px) {
    /* Stack the source→destination pairs on narrow screens. The arrow
       column collapses to a single row and rotates 90deg so it still
       reads as "this flows into that". */
    .quiet-row {
        grid-template-columns: 1fr;
        gap: var(--s5);
    }
    .quiet-arrow {
        transform: rotate(90deg);
        font-size: 13px;
    }
}

/* ----- How it works (3-step grid + terminal mocks, SAU-675) ------------
   Three .step panels in a 1fr-1fr-1fr grid. Each panel is a vertical
   flex column so the .step-mock pins to the bottom via margin-top: auto
   regardless of how tall the surrounding copy ends up. Stacks at <=700px.
   The `.kbd` chip is scoped here — promote to a shared utility only when
   a second consumer appears. */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s12);                /* 24px */
}

.step {
    border: 1px solid var(--color-border);
    border-radius: var(--r-2xl);    /* 12px */
    padding: var(--s12);            /* 24px */
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s9);                 /* 18px */
    min-height: 360px;
}

.step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s7);
}

.step-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.step-kbd {
    display: inline-flex;
    gap: var(--s2);                 /* 4px */
}

.kbd {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.4;
    padding: 2px 6px;
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-sm);     /* 4px */
    color: var(--color-text-dim);
    background: var(--color-surface-hi);
}

.step h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.018em;
    line-height: 1.2;
    color: var(--color-text);
}

.step p {
    margin: 0;
    color: var(--color-text-dim);
    font-size: 13px;
    line-height: 1.6;
}

/* Terminal-output mock. Dark-bg-on-dark-mode uses rgba black for a
   "console" feel; in light mode the bg lifts to a tinted panel so the
   colored spans (green/amber/dim) remain legible. */
.step-mock {
    margin-top: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);     /* 8px */
    background: rgba(0, 0, 0, 0.25);
    padding: var(--s5) var(--s6);   /* 10px 12px */
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--color-text-dim);
    line-height: 1.7;
}
.step-mock .ok { color: var(--color-green); }
.step-mock .amber { color: var(--color-accent); }
.step-mock .dim { color: var(--color-text-faint); }

@media (prefers-color-scheme: light) {
    /* On the parchment bg, a 25%-black mock panel looks like a hole punched
       in the page. Soften to a warm tinted panel so the colored spans still
       read against it. Border tightens by one step for visible edges. */
    .step-mock {
        background: rgba(34, 25, 18, 0.06);
        border-color: var(--color-border-hi);
    }
}

@media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
    .step { min-height: 0; }
}

/* ----- Pull-quote band (SAU-675) ---------------------------------------
   Full-bleed band intentionally outside any .container — it spans the
   viewport edge to edge. Top/bottom hairline borders + a slightly darker
   overlay bg break the vertical rhythm between How-it-works and the
   Comparison. The inner .quote re-establishes a centered max-width column.
   NOTE: attribution copy is a placeholder ("Mara K. · Engineering manager
   · TestFlight build 0.8.3") — needs a real beta-tester quote or the band
   should be dropped before public launch. */
.quote-band {
    display: block;
    padding: var(--s32) var(--s16);  /* 72px vert ≈ design 80px */
    border-block: 1px solid var(--color-border);
    background: rgba(0, 0, 0, 0.22);
}

.quote {
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

.quote-text {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.3;
    letter-spacing: -0.013em;
    color: var(--color-text);
}
.quote-text .pull {
    color: var(--color-accent);
    font-style: italic;
}

.quote-attr {
    margin-top: var(--s14);          /* 28px */
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

@media (prefers-color-scheme: light) {
    /* 22%-black overlay reads as a smudge on the parchment bg. Use a warm
       tinted overlay (same hue family as --color-panel) so the band still
       reads as "tighter than the surrounding sections" without looking
       like a hole. */
    .quote-band {
        background: rgba(34, 25, 18, 0.05);
    }
}

@media (max-width: 760px) {
    .quote-band { padding-block: var(--s24); }
}

/* ----- Boswell vs. the bot (2-col comparison, SAU-675) ----------------
   Same hairline-divider trick as .features (SAU-672): parent fills with
   --color-border, opaque-bg children + gap:1px lets the parent show
   through as a 1px divider. The .bos column gets a subtle amber radial
   wash at top-center; --color-accent at 8% (via color-mix) works in both
   modes without tripping the amber-on-parchment legibility budget. */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

.compare-col {
    padding: var(--s16);             /* 32px */
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    gap: var(--s9);
}
.compare-col.bos {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%,
            color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
            transparent 60%),
        var(--color-bg);
}

.compare-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.compare-col.them .compare-eyebrow { color: var(--color-text-faint); }
.compare-col.bos  .compare-eyebrow { color: var(--color-accent); }

.compare-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.018em;
    line-height: 1.15;
    color: var(--color-text);
}

.compare-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--s4);
}

.compare-row {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: var(--s6);                 /* 12px */
    padding: var(--s6) 0;
    border-top: 1px solid var(--color-border);
    font-size: 13.5px;
    line-height: 1.5;
}
.compare-row:first-child { border-top: 0; }
.compare-col.them .compare-row { color: var(--color-text-faint); }
.compare-col.bos  .compare-row { color: var(--color-text); }

.glyph {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    padding-top: 2px;
}
.glyph.minus { color: var(--color-text-ghost); }
.glyph.plus  { color: var(--color-accent); }

@media (max-width: 700px) {
    .compare { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Final-CTA strip (landing + recovery) ---------------------------- */

.cta-strip {
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-2xl);
    padding: var(--s24);
    background:
        radial-gradient(ellipse 80% 100% at 0% 0%,
            var(--color-accent-dim) 0%,
            transparent 60%),
        var(--color-surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s16);
}

.cta-strip h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.015em;
    max-width: 26ch;
}

.cta-strip .cta-actions {
    display: flex;
    gap: var(--s8);
    flex-wrap: wrap;
}

/* ----- Download page ---------------------------------------------------- */

.download-block {
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-2xl);
    padding: var(--s24);
    background: var(--color-surface);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s16);
    align-items: center;
}
.download-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.download-version {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-text-dim);
    letter-spacing: 0.04em;
}

.requirements {
    margin-top: var(--s20);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s12);
}
.req-card {
    padding: var(--s12) var(--s16);
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.req-card dt {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-bottom: var(--s4);
}
.req-card dd {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-text);
}

.checksum-block {
    margin-top: var(--s20);
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    padding: var(--s12);
    overflow-x: auto;
}
.checksum-block pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-text-dim);
    white-space: pre;
}
.checksum-block .ck-key { color: var(--color-accent); }

.appcast-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s8);
    margin-top: var(--s16);
    padding: var(--s12) var(--s16);
    border-radius: var(--r-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.appcast-row label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.appcast-row label strong {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 14px;
}
.appcast-row label span {
    font-size: 13px;
    color: var(--color-text-dim);
}

@media (max-width: 640px) {
    .download-block { grid-template-columns: 1fr; }
}

/* ----- Pricing page ---------------------------------------------------- */

.price-card {
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-2xl);
    padding: var(--s24);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s12);
}

.price-card.is-featured {
    border-color: var(--color-accent);
    background:
        radial-gradient(ellipse 100% 70% at 0% 0%,
            var(--color-accent-dim) 0%,
            transparent 65%),
        var(--color-surface);
}

.price-headline {
    display: flex;
    align-items: baseline;
    gap: var(--s4);
}
.price-amount {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 48px;
    letter-spacing: -0.02em;
}
.price-unit {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--color-text-dim);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s6);
}
.feature-list li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: var(--s8);
    align-items: start;
    font-size: 14px;
    color: var(--color-text);
}
.feature-list svg {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--color-accent);
}

.payment-badges {
    display: flex;
    align-items: center;
    gap: var(--s8);
    margin-top: var(--s8);
    color: var(--color-text-faint);
}
.payment-badges .badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: var(--s2) var(--s6);
    border: 1px solid var(--color-border);
    border-radius: var(--r-sm);
    color: var(--color-text-dim);
}

/* FAQ accordion — uses native <details>, no JS. */
.faq {
    margin-top: var(--s24);
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.faq details {
    padding: var(--s12) var(--s16);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    background: var(--color-surface);
}
.faq details + details { margin-top: 0; }
.faq summary {
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 15px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s8);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--color-text-dim);
    transition: transform var(--dur-med) var(--ease-out);
}
.faq details[open] summary::after { content: "−"; color: var(--color-accent); }
.faq details > p,
.faq details > div {
    margin-top: var(--s8);
    color: var(--color-text-dim);
    font-size: 14px;
    line-height: 1.6;
}

/* ----- Recovery (license recovery) ------------------------------------- */

.recover-shell {
    max-width: 460px;
    margin: var(--s32) auto;
    padding: var(--s24);
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-2xl);
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    gap: var(--s12);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.field label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
.field input[type="email"] {
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg) 80%, transparent);
    border: 1px solid var(--color-border-hi);
    border-radius: var(--r-md);
    padding: var(--s8) var(--s12);
    min-height: 40px;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.field input[type="email"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-dim);
}

.confirmation {
    margin-top: var(--s12);
    padding: var(--s12) var(--s16);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--color-green) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-green) 40%, transparent);
    color: var(--color-text);
    font-size: 14px;
    display: none;
}

/* ----- Footer -----------------------------------------------------------
   Two layouts share the same `.site-footer` shell:
   • `.site-footer-inner` (compact, single-row) — legacy layout still used
     by recover.html, account.html, etc.
   • `.site-footer-grid` (4-col, brand+blurb / Product / Resources / Company)
     — design-refresh layout used by index.html. Stacks on small screens. */

.site-footer {
    margin-top: var(--s40);
    padding: var(--s24) 0 var(--s32);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-faint);
}

.site-footer-inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--s16);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s16);
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.site-footer a {
    color: var(--color-text-dim);
    text-decoration: none;
}
.site-footer-inner > div a { margin-inline: var(--s6); }
.site-footer a:hover { color: var(--color-text); text-decoration: underline; }

.site-footer .footer-fineprint {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--color-text-faint);
}

/* 4-column footer grid (design refresh). */
.site-footer-grid {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--s16);
}

.site-footer-grid .footer-cols {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--s20);
    margin-bottom: var(--s20);
}

.site-footer-grid .footer-brand .brand {
    color: var(--color-text);
}
.site-footer-grid .footer-brand p {
    margin: var(--s8) 0 0;
    max-width: 32ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-dim);
}

.site-footer-grid .footer-col h5 {
    margin: 0 0 var(--s9);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
.site-footer-grid .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}
.site-footer-grid .footer-col a {
    color: var(--color-text-dim);
    font-size: 13px;
}
.site-footer-grid .footer-col a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.site-footer-grid .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s8);
    padding-top: var(--s14);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}

@media (max-width: 900px) {
    .site-footer-grid .footer-cols {
        grid-template-columns: 1fr 1fr;
        gap: var(--s16);
    }
    .site-footer-grid .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
    .site-footer-grid .footer-cols {
        grid-template-columns: 1fr;
    }
}

/* ----- §06 Pricing + §07 FAQ — inline on index.html (SAU-676) -----------
   Per design, the marketing site is single-page: pricing and FAQ live on
   `index.html`. The standalone `pricing.html` is intentionally untouched in
   this slice — its `.price-card` / `.price-amount` / `.feature-list` / `.faq`
   rules earlier in this file remain authoritative for that page. To keep
   both surfaces working without cross-contamination, every pricing-card
   selector below is scoped to `#pricing`; the FAQ uses design-specific
   names (`.faq-grid`, `.faq-list`, `.faq-item`, `.faq-q`, `.faq-a`) that
   don't collide with pricing.html's native-`<details>` `.faq`. */

#pricing .pricing-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s24);            /* 56px */
}
#pricing .pricing-head .eyebrow {
    display: block;
    margin-bottom: var(--s10);            /* 22px */
}
#pricing .pricing-head h2 {
    margin: 0;
    letter-spacing: -0.029em;             /* design: -1.4px on .h2 */
}
#pricing .pricing-head .intro {
    margin: var(--s12) auto 0;            /* 24px */
    text-align: center;
}

#pricing .price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s12);                      /* 24px */
}

/* Scoped `.price-card` — pricing.html's identically-named rule sits above
   this block; the `#pricing` prefix wins specificity inside this section,
   the bare rule still governs the standalone page. */
#pricing .price-card {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 36px 32px 32px;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    min-height: 580px;
    gap: 0;                               /* override pricing.html's gap */
}

/* Pro card — amber radial wash + accent border. Uses color-mix on
   --color-accent so the gradient adapts to both color modes (the bare
   hex from the design HTML would crush in light mode). */
#pricing .price-card.pro {
    background:
        radial-gradient(ellipse 100% 70% at 100% 0%,
            color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
            transparent 60%),
        var(--color-surface);
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

#pricing .price-eyebrow {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
#pricing .price-card.pro .price-eyebrow { color: var(--color-accent); }

/* Override the pricing.html `.price-amount` (a serif 48px span) — within
   `#pricing` this is a flex-row wrapper containing `.big` ($0 / $49) and
   `.sub` (to start / one-time). Resetting font properties prevents the
   pricing.html rule from leaking into the new markup. */
#pricing .price-amount {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: var(--s9);                /* 18px */
    font-size: inherit;
    font-family: inherit;
    letter-spacing: normal;
}
#pricing .price-amount .big {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 56px;
    letter-spacing: -0.029em;             /* design: -1.6px */
    line-height: 1;
    color: var(--color-text);
}
#pricing .price-amount .sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-text-faint);
    letter-spacing: 0.04em;
}

#pricing .price-desc {
    margin-top: var(--s10);               /* 22px */
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--color-text-dim);
}

#pricing .price-list {
    margin-top: var(--s14);               /* 28px */
    display: flex;
    flex-direction: column;
    gap: var(--s6);                       /* 12px */
}

#pricing .price-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: var(--s2);                       /* 4px */
    font-size: 13.5px;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: -0.05px;
}

#pricing .check {
    width: 16px;
    height: 16px;
    color: var(--color-accent);
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
}

#pricing .price-cta-wrap {
    margin-top: auto;
    padding-top: var(--s16);              /* 32px */
}

#pricing .price-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s5);                       /* 10px */
    width: 100%;
    padding: 14px var(--s10);             /* 14px 22px */
    border-radius: var(--r-xl);           /* 10px */
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--color-border-hi);
    background: var(--color-surface-hi);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
#pricing .price-cta:hover {
    border-color: var(--color-text-faint);
    color: var(--color-text);
    text-decoration: none;
}

/* Amber-gradient CTA — same linear gradient as the design source so the
   "buy" button is unmistakable. The dark-amber text color (#1a1208) gives
   ~9:1 contrast against the lighter top stop of the gradient. */
#pricing .price-cta.amber {
    background: linear-gradient(180deg, #d49b48 0%, #b8862a 100%);
    border-color: var(--color-accent-deep);
    color: #1a1208;
}
#pricing .price-cta.amber:hover {
    background: linear-gradient(180deg, #dfa758 0%, #c39034 100%);
    color: #1a1208;
}

#pricing .price-foot {
    margin-top: var(--s9);                /* 18px */
    display: flex;
    align-items: center;
    gap: var(--s9);                       /* 18px */
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-faint);
}
#pricing .price-foot .stripe {
    margin-left: auto;
    color: var(--color-text-ghost);
}

#pricing .refund {
    text-align: center;
    margin-top: var(--s20);               /* 40px ≈ design 48px */
    font-size: 13px;
    color: var(--color-text-dim);
    max-width: 580px;
    margin-inline: auto;
}
#pricing .refund a {
    color: var(--color-accent);
    border-bottom: 1px dotted var(--color-accent-deep);
}
#pricing .refund a:hover {
    color: var(--color-accent-deep);
    text-decoration: none;
}

@media (max-width: 700px) {
    #pricing .price-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    #pricing .price-card {
        min-height: 0;
        padding: var(--s14) var(--s12) var(--s12);
    }
}

/* ----- §07 FAQ ---------------------------------------------------------
   Custom button-driven accordion (NOT native <details>) — design calls
   for an animated max-height open/close that <details> can't ergonomically
   provide. The button text + .faq-q-mark `+/−` toggle live inside a
   <button>, so keyboard focus/Enter/Space works for free. The global
   `prefers-reduced-motion: reduce` rule at the top of this file kills the
   transition; the open/close still works, just instantly. */
.faq-grid {
    display: grid;
    grid-template-columns: 0.7fr 1fr;
    gap: var(--s24);                      /* 56px ≈ design 64px */
    align-items: start;
}

.faq-grid .faq-h2 { margin-top: var(--s9); }
.faq-grid .faq-intro { margin-top: var(--s10); }
.faq-grid .faq-intro a {
    color: var(--color-accent);
    border-bottom: 1px dotted var(--color-accent-deep);
}
.faq-grid .faq-intro a:hover {
    color: var(--color-accent-deep);
    text-decoration: none;
}

.faq-list {
    border-top: 1px solid var(--color-border);
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--s10) 0;                /* 22px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s12);                      /* 24px */
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 19px;
    letter-spacing: -0.016em;             /* design: -0.3px */
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
}
.faq-q:hover { color: var(--color-text); }
.faq-q:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--r-sm);
}

.faq-q-mark {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.faq-q-mark::before { content: "+"; }
.faq-item.open .faq-q-mark::before { content: "−"; }

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.2s ease;
    font-size: 14px;
    color: var(--color-text-dim);
    line-height: 1.6;
    padding: 0;
}
.faq-a p { margin: 0; }
.faq-item.open .faq-a {
    max-height: 360px;
    padding: 0 0 var(--s12);              /* 24px */
}
.faq-a a {
    color: var(--color-accent);
    border-bottom: 1px dotted var(--color-accent-deep);
}
.faq-a a:hover {
    color: var(--color-accent-deep);
    text-decoration: none;
}

@media (max-width: 900px) {
    .faq-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s16);                  /* 32px */
    }
}

/* ----- Skip link (a11y) ------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skip-link:focus {
    left: var(--s8);
    top: var(--s8);
    padding: var(--s4) var(--s8);
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--r-md);
    z-index: 100;
}