/* Design tokens. :root holds the EDITORIAL defaults — the
         baseline aesthetic. Theme overrides live in [data-theme="..."]
         blocks further down. The CLI/terminal header re-asserts these
         editorial values inside .terminal-header so theme swaps never
         touch the brand-anchor zone (see "terminal-header lock"
         below). */
      :root {
        --ink: #111110;
        --ink-soft: #2a2a28;
        --ink-mute: #6b6b66;
        --ink-faint: #a8a8a2;
        --paper: #f7f5f0;
        --paper-warm: #efece5;
        --line: #d8d4ca;
        --accent: #d94f1e;
        --accent-soft: #f4e6dd;
        --bg-dark: #0f0f0e;
        --bg-darker: #161614;
        --success: #28c840;
        --success-dim: #6b9c5c;
        --code-bg: #1a1a18;
        --code-fg: #f0a07d;
        --display: "Fraunces", Georgia, serif;
        --body: "Inter Tight", -apple-system, sans-serif;
        --mono: "JetBrains Mono", monospace;
        /* Section pattern tokens — themes can dial these to feel
           dense vs airy, hard-bordered vs flat. */
        --section-divider: var(--line);
        --card-bg: transparent;
        --card-border: 1px solid var(--line);
        --metric-bg: transparent;
        /* Accent-tint shorthands. color-mix() is widely supported in
           evergreen browsers since 2023; these auto-update when a
           theme overrides --accent. */
        --accent-tint-soft: color-mix(in srgb, var(--accent) 8%, transparent);
        --accent-tint: color-mix(in srgb, var(--accent) 14%, transparent);
        --accent-tint-strong: color-mix(in srgb, var(--accent) 24%, transparent);
        --accent-line-soft: color-mix(in srgb, var(--accent) 35%, transparent);
        --accent-line: color-mix(in srgb, var(--accent) 50%, transparent);
      }

      /* Smooth color transitions during theme swaps so the change
         feels like a wash rather than a snap. Only animates the
         themable token-driven properties; things like opacity stay
         instant. */
      .gen-response,
      .gen-response * {
        transition: background-color 0.35s ease, color 0.35s ease,
          border-color 0.35s ease;
      }
      @media (prefers-reduced-motion: reduce) {
        .gen-response,
        .gen-response * {
          transition: none;
        }
      }

      /* ============================================================
         THEMES
         ============================================================
         Each theme overrides the design tokens defined in :root.
         The CLI/terminal header re-asserts editorial values inside
         its own scope, so themes only affect the rendered response
         area and downstream pages — not the brand-anchor terminal.
         Adding a new theme: add a [data-theme="<slug>"] block below,
         add an entry to the THEMES JS registry, and you're done. */

      /* "brutalist" — pure black + white with a single saturated red
         accent. All-mono typeface (JetBrains Mono), already loaded by
         the editorial set so no extra font fetch. Hard borders. The
         shift in typeface alone reads as a different design system,
         even before color changes. */
      [data-theme="brutalist"] {
        --paper: #ffffff;
        --paper-warm: #f0f0f0;
        --ink: #000000;
        --ink-soft: #1a1a1a;
        --ink-mute: #555555;
        --ink-faint: #888888;
        --line: #000000;
        --accent: #dc2626;
        --accent-soft: #fee2e2;
        --bg-dark: #000000;
        --bg-darker: #000000;
        --display: "JetBrains Mono", ui-monospace, monospace;
        --body: "JetBrains Mono", ui-monospace, monospace;
      }

      /* "ferrari" — luxury cinematic editorial. Near-black canvas
         (#181818, never pure black) holding pure white display type.
         Single voltage: Rosso Corsa (#da291c) on CTAs and emphasis.
         Inter substitutes for licensed FerrariSans per the DESIGN-md
         note. Display weight stays at 500 (never bold) — heading
         overrides further down enforce this against the editorial
         baseline that uses Fraunces italics. */
      [data-theme="ferrari"] {
        --paper: #181818;
        --paper-warm: #303030;
        --ink: #ffffff;
        --ink-soft: #e8e8e8;
        --ink-mute: #969696;
        --ink-faint: #666666;
        --line: #303030;
        --accent: #da291c;
        --accent-soft: #b01e0a;
        --bg-dark: #000000;
        --bg-darker: #000000;
        --display: "Inter", -apple-system, system-ui, sans-serif;
        --body: "Inter", -apple-system, system-ui, sans-serif;
      }
      /* Ferrari heading + body fine-tuning. The editorial baseline
         uses Fraunces italics with opsz variation settings — Ferrari's
         language is the opposite (sans, modest weight, no italics).
         These rules neutralize the editorial type voice and re-cast
         it in Ferrari's. Scoped to the rendered response only —
         never the terminal-header / nav. */
      [data-theme="ferrari"] .gen-stream {
        color: var(--ink-mute);
      }
      [data-theme="ferrari"] .gen-stream h1,
      [data-theme="ferrari"] .gen-stream h2,
      [data-theme="ferrari"] .gen-stream h3 {
        font-family: var(--display);
        font-weight: 500;
        font-style: normal;
        font-variation-settings: normal;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      [data-theme="ferrari"] .gen-stream em {
        font-style: normal;
        font-weight: 500;
        color: var(--accent);
      }
      [data-theme="ferrari"] .gen-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
        font-size: 11px;
      }
      /* CTA gets the Ferrari voltage treatment — solid Rosso Corsa
         block, sharp 0px, uppercase tracked label. */
      [data-theme="ferrari"] .gen-next-cta {
        background: var(--accent);
        color: #fff;
        padding: 14px 32px;
        border: none;
        border-bottom: none;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        font-size: 13px;
      }
      [data-theme="ferrari"] .gen-next-cta:hover,
      [data-theme="ferrari"] .gen-next-cta:focus-visible {
        background: var(--accent-soft);
        color: #fff;
      }
      [data-theme="ferrari"] .gen-next-cta__prompt,
      [data-theme="ferrari"] .gen-next-cta__flag {
        display: none;
      }
      /* Section-orbital decorative art (the standalone SVG behind the
         build section) is editorial-flavored and clashes with Ferrari's
         cinematic minimalism. Hero art now uses the inline SVG library
         which themes cleanly via currentColor + var(--accent), so it
         no longer needs to be hidden. */
      [data-theme="ferrari"] .section-orbital-art {
        display: none;
      }

      /* ============================================================
         SECTION-PATTERN OVERRIDES — brutalist
         ============================================================
         Brutalism wants slabs, not soft hairlines. Heavy black borders
         between sections, build markers become solid blocks instead of
         delicate icons, eyebrows go uppercase tracked, hairlines are
         doubled or replaced. Hero loses the decorative SVG — pure slab
         type only. */
      [data-theme="brutalist"] .gen-section + .gen-section {
        border-top: 4px solid var(--ink);
      }
      /* Brutalist hides the decorative hero SVG — the headline IS the hero. */
      [data-theme="brutalist"] .gen-section--hero .gen-hero-art {
        display: none;
      }
      [data-theme="brutalist"] .gen-section--hero h1 {
        font-weight: 700;
        letter-spacing: -0.04em;
      }
      [data-theme="brutalist"] .gen-section--hero h1 em {
        font-style: normal;
        background: var(--accent);
        color: var(--paper);
        padding: 0 8px;
      }
      /* Eyebrows: uppercase tracked, slab. */
      [data-theme="brutalist"] .gen-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 500;
        color: var(--ink);
      }
      /* Build section: spec block borders go heavy black slab. */
      [data-theme="brutalist"] .gen-section--build {
        background: var(--paper);
      }
      [data-theme="brutalist"] .gen-section--build .gen-build-spec {
        border-top: 3px solid var(--ink);
        padding-top: 20px;
      }
      /* Build items become slabs with thick left borders + numbered
         markers replacing the delicate pixel icons. */
      [data-theme="brutalist"] .gen-build-item {
        border-bottom: 2px solid var(--ink);
        padding-left: 20px;
        border-left: 6px solid var(--ink);
        margin-bottom: -2px;
      }
      [data-theme="brutalist"] .gen-build-marker .pixel-icon {
        display: none;
      }
      [data-theme="brutalist"] .gen-build-marker {
        background: var(--ink);
        color: var(--paper);
        padding: 6px 10px;
        font-weight: 600;
      }
      [data-theme="brutalist"] .gen-build-marker .gen-build-num {
        color: var(--paper);
      }
      /* Why section: pull quote becomes a slab block, no italic. */
      [data-theme="brutalist"] .gen-why-quote {
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        line-height: 1;
      }
      [data-theme="brutalist"] .gen-why-quote em {
        font-style: normal;
        background: var(--accent);
        color: var(--paper);
        padding: 0 8px;
      }
      [data-theme="brutalist"] .gen-why-metric {
        border: 3px solid var(--ink);
        padding: 16px;
      }
      /* Next CTA: solid slab, no flag, no decorative bits. */
      [data-theme="brutalist"] .gen-next-cta {
        background: var(--ink);
        color: var(--paper);
        border: none;
        padding: 20px 32px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      [data-theme="brutalist"] .gen-next-cta:hover,
      [data-theme="brutalist"] .gen-next-cta:focus-visible {
        background: var(--accent);
        color: var(--paper);
      }
      [data-theme="brutalist"] .gen-next-cta__prompt,
      [data-theme="brutalist"] .gen-next-cta__flag {
        display: none;
      }

      /* ============================================================
         SECTION-PATTERN OVERRIDES — ferrari
         ============================================================
         Ferrari wants cinematic breath: more padding, near-invisible
         dividers, dark canvas through every section, single voltage
         on accent. Build section flips to dark canvas (no more
         paper-warm). Hero stays art-forward but bigger. Markers
         lose the pixel icons in favor of large accent numerals. */
      [data-theme="ferrari"] .gen-section {
        padding: 96px 0 96px;
      }
      [data-theme="ferrari"] .gen-section + .gen-section {
        border-top: 1px solid color-mix(in srgb, var(--paper) 8%, transparent);
      }
      /* All sections share the dark canvas — no paper-warm flip. */
      [data-theme="ferrari"] .gen-section--build {
        background: transparent;
        padding: 96px 0 96px;
      }
      [data-theme="ferrari"] .gen-section--build .gen-build-spec {
        border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
      }
      /* Hero gets cinematic spacing and the SVG art at full opacity. */
      [data-theme="ferrari"] .gen-section--hero {
        padding: 80px 0 96px;
      }
      [data-theme="ferrari"] .gen-section--hero .gen-hero-art {
        opacity: 0.85;
      }
      /* Build markers: hide pixel icon, big accent numeral instead. */
      [data-theme="ferrari"] .gen-build-marker .pixel-icon {
        display: none;
      }
      [data-theme="ferrari"] .gen-build-marker {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 500;
        color: var(--accent);
        letter-spacing: -0.02em;
      }
      [data-theme="ferrari"] .gen-build-marker .gen-build-num {
        color: var(--accent);
        font-size: 28px;
        font-family: var(--display);
      }
      /* Build items get a hairline accent rule on the left, not a
         block bullet — confident structure without ornament. */
      [data-theme="ferrari"] .gen-build-item {
        border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
        padding-left: 24px;
      }
      /* Why-section metric block: larger, accent figures, generous
         vertical breath. */
      [data-theme="ferrari"] .gen-why-metric {
        padding: 24px 0;
        border-top: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
      }
      [data-theme="ferrari"] .gen-why-metric__value {
        font-size: 52px;
        font-weight: 500;
      }
      /* Why-section pull-quote and metrics get cleaner, sharper
         treatment in Ferrari — no italic, white-on-dark. */
      [data-theme="ferrari"] .gen-why-quote {
        font-style: normal;
        font-weight: 500;
        color: var(--ink);
      }
      [data-theme="ferrari"] .gen-why-metric__value {
        font-weight: 700;
        font-feature-settings: "tnum";
      }

      /* "fracken" — Kraken-inspired clean crypto exchange aesthetic.
         Pure white canvas with Kraken Purple voltage on near-black
         text. IBM Plex Sans (the spec'd fallback for the proprietary
         Kraken-Brand / Kraken-Product faces). Soft shadows, 12px
         button radii, professional restraint — the brand of trust. */
      [data-theme="fracken"] {
        --paper: #ffffff;
        --paper-warm: #f8f8fb;
        --ink: #101114;
        --ink-soft: #484b5e;
        --ink-mute: #686b82;
        --ink-faint: #9497a9;
        --line: #dedee5;
        --accent: #7132f5;
        --accent-soft: #ede4fd;
        --bg-dark: #101114;
        --bg-darker: #0a0b0d;
        --success: #149e61;
        --success-dim: #026b3f;
        --display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        --body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        --mono: "JetBrains Mono", monospace;
      }
      /* Headings: bold + tight tracking per Kraken-Brand spec. */
      [data-theme="fracken"] .gen-stream h1,
      [data-theme="fracken"] .gen-stream h2,
      [data-theme="fracken"] .gen-stream h3 {
        font-family: var(--display);
        font-weight: 700;
        font-style: normal;
        font-variation-settings: normal;
        letter-spacing: -0.025em;
        color: var(--ink);
      }
      /* Em emphasis: purple voltage, no italic — the brand color
         IS the emphasis treatment in this system. */
      [data-theme="fracken"] .gen-stream em {
        font-style: normal;
        font-weight: 600;
        color: var(--accent);
      }
      /* Eyebrows: small caps tracking, ink-mute color, no terminal
         marker prefix — fracken is a crypto exchange, not a CLI. */
      [data-theme="fracken"] .gen-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 500;
        font-size: 11px;
        color: var(--ink-mute);
      }

      /* Section frame: clean dividers, generous breath. */
      [data-theme="fracken"] .gen-section + .gen-section {
        border-top: 1px solid var(--line);
      }
      [data-theme="fracken"] .gen-section {
        padding: 80px 0 88px;
      }

      /* Hero: clean white with the SVG art, no italic emphasis. */
      [data-theme="fracken"] .gen-section--hero h1 em {
        font-style: normal;
        color: var(--accent);
        background: transparent;
        padding: 0;
      }

      /* Build section: very light cool gray canvas, items become
         soft cards with whisper-shadow + 12px radius. */
      [data-theme="fracken"] .gen-section--build {
        background: var(--paper-warm);
      }
      [data-theme="fracken"] .gen-build-item {
        background: var(--paper);
        border-radius: 12px;
        border: 1px solid var(--line);
        padding: 20px 24px;
        margin-bottom: 12px;
        box-shadow: rgba(16, 17, 20, 0.04) 0px 1px 4px;
      }
      [data-theme="fracken"] .gen-build-list--in-view .gen-build-item:hover {
        box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 24px;
        border-color: var(--accent-soft);
      }
      /* Build markers: hide the editorial pixel icons; let the
         module number stand alone in purple bold mono. */
      [data-theme="fracken"] .gen-build-marker .pixel-icon {
        display: none;
      }
      [data-theme="fracken"] .gen-build-marker {
        font-family: var(--display);
        font-weight: 700;
        color: var(--accent);
        font-size: 14px;
        letter-spacing: -0.01em;
      }
      [data-theme="fracken"] .gen-build-marker .gen-build-num {
        color: var(--accent);
        font-family: var(--display);
        font-weight: 700;
      }

      /* Why-section: large purple emphasis, metrics in purple bold. */
      [data-theme="fracken"] .gen-why-quote {
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: var(--ink);
      }
      [data-theme="fracken"] .gen-why-quote em {
        font-style: normal;
        color: var(--accent);
      }
      [data-theme="fracken"] .gen-why-metric {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 20px 24px;
      }
      [data-theme="fracken"] .gen-why-metric__value {
        color: var(--accent);
        font-weight: 700;
        font-feature-settings: "tnum";
      }

      /* Next CTA: solid Kraken Purple block, 12px radius, white
         label, 13px 16px padding per spec. No terminal markers. */
      [data-theme="fracken"] .gen-next-cta {
        background: var(--accent);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 14px 24px;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0;
        text-transform: none;
        font-family: var(--body);
        box-shadow: rgba(113, 50, 245, 0.16) 0px 4px 16px;
      }
      [data-theme="fracken"] .gen-next-cta:hover,
      [data-theme="fracken"] .gen-next-cta:focus-visible {
        background: #5741d8;
        color: #ffffff;
        box-shadow: rgba(87, 65, 216, 0.24) 0px 6px 20px;
      }
      [data-theme="fracken"] .gen-next-cta__prompt,
      [data-theme="fracken"] .gen-next-cta__flag {
        display: none;
      }

      /* "play" — Clay-inspired playful warm aesthetic. Cream-tinted
         white canvas (#fffaf0) with near-black ink, hot pink as the
         single voltage, and saturated multi-color feature cards
         cycling across build items. Inter at weight 500 with negative
         tracking subs for the proprietary Plain Black display face.
         Generous rounded corners throughout: 12px buttons, 16px
         content cards, 24px feature cards. Breaks editorial
         square-corner discipline by design — the warmth IS the brand. */
      [data-theme="play"] {
        --paper: #fffaf0;
        --paper-warm: #faf5e8;
        --ink: #0a0a0a;
        --ink-soft: #3a3a3a;
        --ink-mute: #6a6a6a;
        --ink-faint: #9a9a9a;
        --line: #e5e5e5;
        --accent: #ff4d8b;
        --accent-soft: #ffd9e6;
        --bg-dark: #0a1a1a;
        --bg-darker: #000c10;
        --success: #22c55e;
        --success-dim: #16a34a;
        --display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        --mono: "JetBrains Mono", monospace;
      }
      /* Headings: Inter weight 500 + negative letter-spacing per the
         Plain Black substitute spec. Never bolder than 500 — heavier
         reads as bombastic against the rounded character. */
      [data-theme="play"] .gen-stream h1,
      [data-theme="play"] .gen-stream h2,
      [data-theme="play"] .gen-stream h3 {
        font-family: var(--display);
        font-weight: 500;
        font-style: normal;
        font-variation-settings: normal;
        letter-spacing: -0.04em;
        color: var(--ink);
      }
      /* Em emphasis: hot-pink underline rather than italic — playful,
         marker-pen energy. */
      [data-theme="play"] .gen-stream em {
        font-style: normal;
        font-weight: 600;
        color: var(--accent);
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 4px;
        text-decoration-color: var(--accent);
      }
      /* Eyebrows: small caps tracked, lowercase (not all-caps),
         muted-ink. No CLI markers — play is post-terminal. */
      [data-theme="play"] .gen-eyebrow {
        text-transform: lowercase;
        letter-spacing: 0;
        font-weight: 600;
        font-size: 13px;
        color: var(--ink-mute);
      }

      /* Section frame: minimal dividers, generous breathing. */
      [data-theme="play"] .gen-section + .gen-section {
        border-top: 1px solid var(--line);
      }
      [data-theme="play"] .gen-section {
        padding: 96px 0 96px;
      }

      /* Hero: cream canvas (already), bigger display, no italic em. */
      [data-theme="play"] .gen-section--hero h1 em {
        font-style: normal;
        color: var(--accent);
        background: transparent;
        text-decoration: underline;
        text-decoration-thickness: 5px;
        text-underline-offset: 6px;
        text-decoration-color: var(--accent);
      }

      /* Build section: deeper cream canvas. */
      [data-theme="play"] .gen-section--build {
        background: var(--paper-warm);
      }
      /* Build items become saturated multi-color feature cards.
         Cycling pink → teal → lavender → peach → ochre → cream so
         no two adjacent cards share a color. Each card carries the
         module description on the colored fill; text-color flips
         based on the surface's brightness. */
      [data-theme="play"] .gen-build-item {
        border: none;
        border-radius: 24px;
        padding: 32px;
        margin-bottom: 16px;
        background: #f5f0e0; /* fallback cream */
      }
      [data-theme="play"] .gen-build-item:nth-child(6n+1) {
        background: #ff4d8b;
        color: #ffffff;
      }
      [data-theme="play"] .gen-build-item:nth-child(6n+2) {
        background: #1a3a3a;
        color: #ffffff;
      }
      [data-theme="play"] .gen-build-item:nth-child(6n+3) {
        background: #b8a4ed;
        color: #0a0a0a;
      }
      [data-theme="play"] .gen-build-item:nth-child(6n+4) {
        background: #ffb084;
        color: #0a0a0a;
      }
      [data-theme="play"] .gen-build-item:nth-child(6n+5) {
        background: #e8b94a;
        color: #0a0a0a;
      }
      [data-theme="play"] .gen-build-item:nth-child(6n+6) {
        background: #f5f0e0;
        color: #0a0a0a;
      }
      /* Strong text inside the colored cards inherits the card's
         text-color so descriptions stay legible per surface. */
      [data-theme="play"] .gen-build-item strong,
      [data-theme="play"] .gen-build-item .gen-build-num,
      [data-theme="play"] .gen-build-item h3 {
        color: inherit;
      }
      /* Hide the editorial pixel icons on the colored cards — the
         color IS the marker. */
      [data-theme="play"] .gen-build-marker .pixel-icon {
        display: none;
      }
      [data-theme="play"] .gen-build-marker {
        font-family: var(--display);
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0;
        color: inherit;
        opacity: 0.7;
      }
      [data-theme="play"] .gen-build-marker .gen-build-num {
        color: inherit;
        opacity: 0.7;
      }
      /* Spec block: rounded cream card on the deeper cream surface. */
      [data-theme="play"] .gen-section--build .gen-build-spec {
        border-top: 1px solid var(--line);
        padding-top: 20px;
      }

      /* Why section: large rounded display, pink em underline,
         metric cards as cream rounded blocks. */
      [data-theme="play"] .gen-why-quote {
        font-style: normal;
        font-weight: 500;
        letter-spacing: -0.04em;
        color: var(--ink);
      }
      [data-theme="play"] .gen-why-quote em {
        font-style: normal;
        color: var(--accent);
        text-decoration: underline;
        text-decoration-thickness: 4px;
        text-underline-offset: 5px;
      }
      [data-theme="play"] .gen-why-metric {
        background: #f5f0e0;
        border: none;
        border-radius: 16px;
        padding: 24px 28px;
      }
      [data-theme="play"] .gen-why-metric__value {
        color: var(--ink);
        font-weight: 500;
        font-feature-settings: "tnum";
        letter-spacing: -0.02em;
      }

      /* Next CTA: solid ink (near-black) block, 12px radius, white
         label, 14px Inter 600. No terminal markers — play closes
         on a clean confident button. */
      [data-theme="play"] .gen-next-cta {
        background: var(--ink);
        color: #ffffff;
        border: none;
        border-radius: 12px;
        padding: 14px 24px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0;
        text-transform: none;
        font-family: var(--body);
      }
      [data-theme="play"] .gen-next-cta:hover,
      [data-theme="play"] .gen-next-cta:focus-visible {
        background: #1f1f1f;
        color: #ffffff;
      }
      [data-theme="play"] .gen-next-cta__prompt,
      [data-theme="play"] .gen-next-cta__flag {
        display: none;
      }

      /* "terminal" — the brand's CLI register taken all the way through
         the response. Near-black canvas, JetBrains Mono throughout (no
         serif), warm light-gray text, phosphor-green status accent
         (same green as the "accepting clients" indicator). For visitors
         who respond to "we run on terminals." Inverts the warm-paper
         editorial register entirely; hero motifs render against dark. */
      [data-theme="terminal"] {
        --paper: #0f0f0e;
        --paper-warm: #161614;
        --ink: #d8d4ca;
        --ink-soft: #c0bca8;
        --ink-mute: #8a8a78;
        --ink-faint: #5a5a4f;
        --line: #2a2a26;
        --accent: #28c840;
        --accent-soft: #1a3d1f;
        --bg-dark: #0a0a0a;
        --bg-darker: #050505;
        --display: "JetBrains Mono", ui-monospace, monospace;
        --body: "JetBrains Mono", ui-monospace, monospace;
      }
      [data-theme="terminal"] .gen-stream {
        color: var(--ink);
      }
      [data-theme="terminal"] .gen-stream h1,
      [data-theme="terminal"] .gen-stream h2,
      [data-theme="terminal"] .gen-stream h3 {
        font-family: var(--display);
        font-style: normal;
        font-weight: 500;
        font-variation-settings: normal;
        letter-spacing: -0.005em;
        color: var(--ink);
        text-transform: lowercase;
      }
      [data-theme="terminal"] .gen-stream em {
        font-style: normal;
        font-weight: 500;
        color: var(--accent);
      }
      [data-theme="terminal"] .gen-eyebrow {
        text-transform: lowercase;
        letter-spacing: 0.04em;
        color: var(--accent);
      }
      [data-theme="terminal"] .gen-section--build {
        background: var(--paper-warm);
      }
      [data-theme="terminal"] .gen-section--build .gen-build-spec {
        border-top: 1px dashed var(--line);
      }
      [data-theme="terminal"] .gen-build-marker {
        background: transparent;
      }
      [data-theme="terminal"] .gen-build-marker .pixel-icon {
        display: none;
      }
      [data-theme="terminal"] .gen-build-marker .gen-build-num {
        color: var(--accent);
        font-family: var(--display);
        font-weight: 500;
      }
      [data-theme="terminal"] .gen-why-quote {
        font-family: var(--display);
        font-style: normal;
        font-weight: 500;
        text-transform: lowercase;
        letter-spacing: -0.005em;
        color: var(--ink);
      }
      [data-theme="terminal"] .gen-why-quote em {
        font-style: normal;
        color: var(--accent);
      }
      [data-theme="terminal"] .gen-why-metric {
        border: 1px dashed var(--line);
        padding: 16px;
      }
      [data-theme="terminal"] .gen-why-metric__value {
        font-family: var(--display);
        color: var(--accent);
      }
      [data-theme="terminal"] .gen-next-cta {
        background: transparent;
        color: var(--ink);
        border: 1px solid var(--accent);
        border-bottom: 1px solid var(--accent);
        padding: 12px 22px;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        font-weight: 500;
      }
      [data-theme="terminal"] .gen-next-cta:hover,
      [data-theme="terminal"] .gen-next-cta:focus-visible {
        background: var(--accent);
        color: var(--paper);
      }
      [data-theme="terminal"] .gen-next-cta__prompt {
        color: var(--accent);
      }
      [data-theme="terminal"] .gen-next-cta__flag {
        color: var(--ink-mute);
      }
      [data-theme="terminal"] .section-orbital-art {
        display: none;
      }

      /* "hatch" — architectural blueprint register. Cool gray-blue
         paper with a faint orthographic grid behind content, deep
         ink-blue type, single red marker accent. Reads as technical
         drawing — system-as-schematic. Serif headlines stay (Fraunces)
         but in deep blue rather than near-black; eyebrows go to
         uppercase tracked sans like a drafting label. The grid is a
         CSS background pattern applied at the gen-stream level so it
         shows on paper surfaces and clears on the dark next-section. */
      [data-theme="hatch"] {
        --paper: #e9eef2;
        --paper-warm: #f4f6f8;
        --ink: #1a2a3d;
        --ink-soft: #2c3e58;
        --ink-mute: #5d6f88;
        --ink-faint: #8a9aaf;
        --line: #b8c4d2;
        --accent: #c43d2e;
        --accent-soft: #f4d8d3;
        --bg-dark: #1a2a3d;
        --bg-darker: #0e1a2a;
      }
      [data-theme="hatch"] .gen-stream {
        background-color: var(--paper);
        background-image:
          linear-gradient(to right, rgba(184, 196, 210, 0.45) 1px, transparent 1px),
          linear-gradient(to bottom, rgba(184, 196, 210, 0.45) 1px, transparent 1px);
        background-size: 32px 32px;
      }
      [data-theme="hatch"] .gen-stream h1,
      [data-theme="hatch"] .gen-stream h2,
      [data-theme="hatch"] .gen-stream h3 {
        color: var(--ink);
      }
      [data-theme="hatch"] .gen-stream em {
        color: var(--accent);
        font-style: italic;
      }
      [data-theme="hatch"] .gen-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
        font-size: 11px;
        color: var(--accent);
      }
      [data-theme="hatch"] .gen-section--build {
        background: var(--paper-warm);
      }
      [data-theme="hatch"] .gen-section--build .gen-build-spec {
        border: 1px solid var(--line);
        padding: 16px 20px;
        background: var(--paper);
      }
      [data-theme="hatch"] .gen-build-item {
        border-left: 2px solid var(--accent);
        padding-left: 18px;
      }
      [data-theme="hatch"] .gen-build-marker {
        background: transparent;
        color: var(--accent);
      }
      [data-theme="hatch"] .gen-build-marker .pixel-icon {
        display: none;
      }
      [data-theme="hatch"] .gen-build-marker .gen-build-num {
        color: var(--accent);
        font-weight: 600;
      }
      [data-theme="hatch"] .gen-why-quote em {
        font-style: italic;
        color: var(--accent);
      }
      [data-theme="hatch"] .gen-why-metric {
        border: 1px solid var(--line);
        padding: 16px 18px;
        background: var(--paper);
      }
      [data-theme="hatch"] .gen-why-metric__value {
        color: var(--accent);
      }
      [data-theme="hatch"] .gen-next-cta {
        background: var(--accent);
        color: #fff;
        border: none;
        border-bottom: none;
        padding: 14px 28px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        font-size: 13px;
      }
      [data-theme="hatch"] .gen-next-cta:hover,
      [data-theme="hatch"] .gen-next-cta:focus-visible {
        background: var(--ink);
        color: #fff;
      }
      [data-theme="hatch"] .gen-next-cta__prompt,
      [data-theme="hatch"] .gen-next-cta__flag {
        display: none;
      }
      [data-theme="hatch"] .section-orbital-art {
        display: none;
      }

      /* Next section sits on a dark canvas (var(--bg-dark)) across all
         themes. Themes that override .gen-stream h*/eyebrow colors to
         dark inks need to flip them back to paper inside the next
         section so the heading and eyebrow stay legible on dark.
         Editorial, ferrari, and terminal work without this (their h
         color is already light or paired with a non-collision bg-dark);
         brutalist, fracken, play, and hatch need the explicit reset. */
      [data-theme="brutalist"] .gen-section--next h1,
      [data-theme="brutalist"] .gen-section--next h2,
      [data-theme="brutalist"] .gen-section--next h3,
      [data-theme="brutalist"] .gen-section--next .gen-eyebrow,
      [data-theme="fracken"] .gen-section--next h1,
      [data-theme="fracken"] .gen-section--next h2,
      [data-theme="fracken"] .gen-section--next h3,
      [data-theme="fracken"] .gen-section--next .gen-eyebrow,
      [data-theme="play"] .gen-section--next h1,
      [data-theme="play"] .gen-section--next h2,
      [data-theme="play"] .gen-section--next h3,
      [data-theme="play"] .gen-section--next .gen-eyebrow,
      [data-theme="hatch"] .gen-section--next h1,
      [data-theme="hatch"] .gen-section--next h2,
      [data-theme="hatch"] .gen-section--next h3,
      [data-theme="hatch"] .gen-section--next .gen-eyebrow {
        color: var(--paper);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family: var(--body);
        background: var(--paper);
        color: var(--ink);
        line-height: 1.5;
        font-feature-settings: "ss01", "ss02";
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }

      /* Subtle grain texture */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.4;
        z-index: 1;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.067 0 0 0 0 0.067 0 0 0 0 0.063 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      /* Layout */
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 2;
      }

      /* Sticky CLI status bar — site-wide nav. Dark on every page, sits at
         the top, stays put as the user scrolls. The .term-* classes inside
         carry the actual visual treatment (defined further down) and are
         shared with the home terminal-header on first paint.

         Like the terminal-header, the nav is brand-anchored and stays
         editorial regardless of active theme. */
      nav#page-nav {
        --paper: #f7f5f0;
        --ink: #111110;
        --line: #d8d4ca;
        --accent: #d94f1e;
        --bg-dark: #0f0f0e;
        --bg-darker: #161614;
        --display: "Fraunces", Georgia, serif;
        --body: "Inter Tight", -apple-system, sans-serif;
        --mono: "JetBrains Mono", monospace;
        position: sticky;
        top: 0;
        background: var(--bg-dark);
        border-bottom: 1px solid #000;
        z-index: 100;
      }

      .nav-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 24px;
        font-family: var(--mono);
        font-size: 12.5px;
        gap: 16px;
      }

      .nav-left {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
      }

      .nav-right {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      /* Page management */
      .page {
        display: none;
        min-height: calc(100vh - 200px);
      }
      .page.active {
        display: block;
      }
      .page > .wrap {
        padding-top: 60px;
        padding-bottom: 120px;
      }
      #how,
      #contact {
        padding: 80px 0 120px;
      }

      /* === HOME === */

      /* Full-bleed terminal header. On the home page, this fills the
         viewport (minus the footer) so the dark CLI register IS the page
         on initial load. When the user submits a prompt, gen-response
         expands the page below the terminal naturally.

         Terminal-header lock: re-assert all themable design tokens to
         their editorial values inside this scope. Theme swaps via
         <html data-theme="..."> change tokens at :root level; this
         block pins the CLI/terminal experience to editorial regardless
         of active theme — the terminal IS the brand anchor. */
      .terminal-header {
        --ink: #111110;
        --ink-soft: #2a2a28;
        --ink-mute: #6b6b66;
        --ink-faint: #a8a8a2;
        --paper: #f7f5f0;
        --paper-warm: #efece5;
        --line: #d8d4ca;
        --accent: #d94f1e;
        --accent-soft: #f4e6dd;
        --bg-dark: #0f0f0e;
        --success: #28c840;
        --display: "Fraunces", Georgia, serif;
        --body: "Inter Tight", -apple-system, sans-serif;
        --mono: "JetBrains Mono", monospace;
        background: var(--bg-dark);
        color: var(--line);
        width: 100%;
        border-bottom: 1px solid #000;
        overflow: hidden;
        position: relative;
        /* Fills the rest of the viewport below the sticky CLI nav (~44px). */
        min-height: calc(100vh - 44px);
        display: flex;
        flex-direction: column;
      }

      .terminal-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.012) 0px,
          rgba(255, 255, 255, 0.012) 1px,
          transparent 1px,
          transparent 3px
        );
        pointer-events: none;
        z-index: 1;
      }

      .terminal-header::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(
          ellipse at center,
          transparent 60%,
          rgba(0, 0, 0, 0.4) 100%
        );
        pointer-events: none;
        z-index: 1;
      }

      /* Terminal status bar (replaces nav) */
      .term-statusbar {
        background: #161614;
        border-bottom: 1px solid #000;
        padding: 10px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: var(--mono);
        font-size: 12.5px;
        position: relative;
        z-index: 3;
        gap: 16px;
      }

      .term-statusbar-left {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
      }

      .term-tag {
        color: var(--accent);
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.15s ease;
      }

      a.term-tag:hover {
        color: #ff7b4a;
      }

      .term-tag-dim {
        color: #666;
        border: 1px solid #2a2a26;
        padding: 2px 8px;
        border-radius: 0;
        font-size: 11px;
        background: rgba(255, 255, 255, 0.02);
        white-space: nowrap;
      }

      .term-statusbar-right {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      .term-nav-link {
        color: #888;
        text-decoration: none;
        cursor: pointer;
        padding: 4px 10px;
        border-radius: 0;
        transition: all 0.15s ease;
        white-space: nowrap;
      }

      .term-nav-link:hover {
        color: #f7f5f0;
        background: rgba(255, 255, 255, 0.04);
      }

      .term-nav-link.active {
        color: var(--accent);
        background: rgba(217, 79, 30, 0.08);
      }

      .terminal-header-inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 56px 48px 48px;
        font-family: var(--mono);
        font-size: 14px;
        line-height: 1.6;
        position: relative;
        z-index: 2;
        /* Flex-item default min-width: auto would let the wide ASCII <pre>
           stretch this past the viewport, dragging the invite/hint text
           with it. Override so siblings respect the viewport width. */
        min-width: 0;
      }

      .terminal-line {
        display: block;
        margin-bottom: 8px;
      }

      .terminal-line.final {
        margin-top: 4px;
        margin-bottom: 0;
      }

      .typing-line {
        margin-bottom: 24px;
      }

      .prompt {
        color: var(--accent);
        user-select: none;
        margin-right: 6px;
        font-weight: 500;
      }

      .cmd {
        color: #f7f5f0;
      }

      .cursor {
        color: var(--accent);
        display: inline-block;
        margin-left: 2px;
      }

      .cursor.blink {
        animation: blink 1.05s steps(2, start) infinite;
      }

      @keyframes blink {
        50% {
          opacity: 0;
        }
      }

      /* Clickable terminal action (CTA) */
      .term-action {
        color: #f7f5f0;
        text-decoration: none;
        cursor: pointer;
        border-radius: 0;
        padding: 2px 6px;
        margin: 0 2px;
        transition: all 0.18s ease;
        position: relative;
        background: rgba(217, 79, 30, 0);
        border-bottom: 1px dashed rgba(217, 79, 30, 0.4);
      }

      .term-action:hover {
        background: rgba(217, 79, 30, 0.18);
        border-bottom-color: var(--accent);
        color: #fff;
      }

      .term-action-text {
        color: #f7f5f0;
        font-weight: 500;
      }

      .term-action:hover .term-action-text {
        color: #fff;
      }

      .term-action-flag {
        color: #6b9c5c;
      }

      /* Invitation line above the live input — orients the reader that
         the prompt is interactive, not just more terminal output.
         Fades in alongside the meta lines on first load. */
      /* Invitation block above the live input — orients the reader that
         the prompt is interactive AND frames why typing is the right move:
         the page is generated by the product, and the prompt rebuilds a
         version of it for the visitor. Fades in alongside the meta lines. */
      .term-invite {
        margin-top: 24px;
        margin-bottom: 14px;
        font-family: var(--mono);
        font-size: 13px;
        color: #8a8a82;
        line-height: 1.55;
        opacity: 0;
        transition: opacity 0.6s ease;
      }
      .term-invite .invite-line {
        display: block;
      }
      .term-invite .invite-line + .invite-line {
        margin-top: 4px;
      }
      /* Emphasis inside the invite stays in the terminal register —
         italic mono in the accent, not Fraunces. Keeps the two registers
         distinct per DESIGN.md. */
      .term-invite em {
        color: var(--accent);
        font-style: italic;
        font-weight: 500;
      }
      .term-invite.show {
        opacity: 1;
      }

      /* One-shot pulse on the $ prompt prefix when the input becomes live —
         a single beat of attention that stops, never loops. */
      .prompt-pulse.pulse-once {
        animation: prompt-pulse 1.6s ease-out 1;
      }
      @keyframes prompt-pulse {
        0%   { text-shadow: 0 0 0 rgba(217, 79, 30, 0); }
        25%  { text-shadow: 0 0 14px rgba(217, 79, 30, 0.55); }
        100% { text-shadow: 0 0 0 rgba(217, 79, 30, 0); }
      }
      @media (prefers-reduced-motion: reduce) {
        .prompt-pulse.pulse-once {
          animation: none;
        }
      }

      /* Interactive prompt input */
      .term-input {
        background: transparent;
        border: none;
        outline: none;
        color: #f7f5f0;
        font-family: var(--mono);
        font-size: inherit;
        padding: 0;
        margin: 0;
        width: 100%;
        caret-color: var(--accent);
        letter-spacing: 0;
        text-indent: 14px;
      }

      .term-input::placeholder {
        color: #5a5a52;
        font-style: normal;
      }

      .term-input:focus {
        outline: none;
      }

      /* The input row reads as an interactive terminal entry. The
         input area itself wears a faint accent-orange tint — reads
         like a selection-highlight in a terminal, signaling "this is
         the active spot." Tint deepens slightly on hover and
         focus-within. The ghost cursor switches to white inside this
         block (orange-on-orange would disappear). */
      .terminal-line.final {
        display: flex;
        align-items: baseline;
        cursor: text;
      }
      .input-wrap {
        position: relative;
        flex: 1;
        min-width: 0;
        background: rgba(217, 79, 30, 0.12);
        padding: 4px 0;
        transition: background 0.18s ease;
      }
      .terminal-line.final:hover .input-wrap {
        background: rgba(217, 79, 30, 0.18);
      }
      .terminal-line.final:focus-within .input-wrap {
        background: rgba(217, 79, 30, 0.24);
      }
      /* Ghost cursor: blinks at the leading edge until the field is
         focused or has a value, then yields to the native caret.
         Pure CSS — no JS bookkeeping. The :placeholder-shown trick
         lets us key off "is this empty?" without touching state. */
      .ghost-cursor {
        position: absolute;
        left: 2px;
        top: 0;
        pointer-events: none;
        color: #f7f5f0;
        font-family: var(--mono);
        font-size: inherit;
        margin-left: 0;
      }
      .term-input:focus ~ .ghost-cursor,
      .term-input:not(:placeholder-shown) ~ .ghost-cursor {
        display: none;
      }

      /* Hint row below the prompt — hosts clickable example chips
         (works on touch and keyboard) and the skip-to-contact escape. */
      .term-hint {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed #2a2a26;
        font-family: var(--mono);
        font-size: 12px;
        color: #6b6b62;
        display: flex;
        flex-wrap: wrap;
        gap: 14px 20px;
        align-items: flex-start;
        opacity: 0;
        transition: opacity 0.6s ease;
      }

      .term-hint.show {
        opacity: 1;
      }

      .term-examples {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        flex: 1 1 auto;
        min-width: 0;
      }

      .examples-label {
        color: var(--ink-faint);
        white-space: nowrap;
        margin-right: 4px;
      }

      .example-chip {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 2px 4px;
        margin: 0;
        font-family: var(--mono);
        font-size: 12px;
        color: #d8d4ca;
        cursor: pointer;
        border-bottom: 1px dashed rgba(217, 79, 30, 0.35);
        transition: background 0.18s ease, border-color 0.18s ease,
          color 0.18s ease;
        white-space: nowrap;
        text-align: left;
      }

      .example-chip .chip-prompt {
        color: var(--accent);
        font-weight: 500;
      }

      .example-chip:hover,
      .example-chip:focus-visible {
        background: rgba(217, 79, 30, 0.12);
        border-bottom-color: var(--accent);
        border-bottom-style: solid;
        color: #fff;
        outline: none;
      }

      .hint-skip {
        color: var(--accent);
        text-decoration: none;
        cursor: pointer;
        border-bottom: 1px dashed rgba(217, 79, 30, 0.4);
        margin-left: auto;
        padding-bottom: 1px;
        white-space: nowrap;
        align-self: center;
      }

      .hint-skip:hover {
        border-bottom-color: var(--accent);
        border-bottom-style: solid;
      }

      /* Status line — shown during generation */
      .term-status {
        margin-top: 16px;
        font-family: var(--mono);
        font-size: 13px;
        color: #d8d4ca;
        min-height: 22px;
        display: none;
      }

      .term-status.show {
        display: block;
      }

      .term-status .stat-pre {
        color: var(--accent);
        margin-right: 6px;
      }
      .term-status .stat-tag {
        color: #6b9c5c;
        margin-left: 8px;
      }
      .term-status .spinner {
        display: inline-block;
        color: var(--accent);
        animation: spin 0.8s steps(8) infinite;
        margin-left: 6px;
      }

      @keyframes spin {
        0% {
          content: "⠋";
        }
        12% {
          content: "⠙";
        }
        25% {
          content: "⠹";
        }
        37% {
          content: "⠸";
        }
        50% {
          content: "⠼";
        }
        62% {
          content: "⠴";
        }
        75% {
          content: "⠦";
        }
        87% {
          content: "⠧";
        }
        100% {
          content: "⠇";
        }
      }

      /* === GENERATED RESPONSE === */
      .gen-response {
        background: var(--paper);
        padding: 64px 0 80px;
        border-bottom: 1px solid var(--line);
        position: relative;
        z-index: 2;
        /* scrollIntoView lands the gen-response top right under the
           sticky CLI nav so "// generated for you" + the headline show
           together, not tucked behind the nav. */
        scroll-margin-top: 44px;
      }

      .gen-response[hidden] {
        display: none;
      }

      .gen-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 24px;
        margin-bottom: 32px;
        border-bottom: 1px dashed var(--line);
        flex-wrap: wrap;
        gap: 16px;
      }

      .gen-meta-label {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.02em;
      }

      .gen-reset {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink);
        background: transparent;
        border: 1px solid var(--ink);
        padding: 8px 14px;
        border-radius: 0;
        cursor: pointer;
        letter-spacing: 0.02em;
        transition: all 0.2s ease;
      }

      .gen-reset:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
      }

      .gen-stream {
        font-family: var(--body);
        font-size: 18px;
        line-height: 1.55;
        color: var(--ink);
      }

      /* Theme switcher — lives inside nav#page-nav so it inherits
         the brand-anchored editorial token lock. Pills stay legible
         no matter which theme is currently painting the page below.
         Teaser tab in the nav reveals the drawer on click; drawer
         state persists per session.

         Hidden until body.has-generated — there's no flavor to swap
         until the user has rendered a generated response. The reset
         flow clears has-generated, which automatically re-hides it. */
      body:not(.has-generated) .theme-teaser,
      body:not(.has-generated) .theme-drawer {
        display: none;
      }
      .theme-teaser {
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--paper);
        background: transparent;
        border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
        border-radius: 0;
        padding: 4px 10px;
        cursor: pointer;
        letter-spacing: 0.02em;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        transition: background 0.18s ease, border-color 0.18s ease,
          color 0.18s ease;
      }
      .theme-teaser__short {
        display: none;
      }
      .theme-teaser__chev {
        font-size: 9px;
        line-height: 1;
        opacity: 0.7;
        transition: transform 0.2s ease;
      }
      .theme-teaser:hover {
        background: color-mix(in srgb, var(--accent) 18%, transparent);
        border-color: var(--accent);
      }
      .theme-teaser[aria-expanded="true"] {
        background: var(--accent);
        border-color: var(--accent);
      }
      .theme-teaser[aria-expanded="true"] .theme-teaser__chev {
        transform: rotate(180deg);
      }
      .theme-teaser:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .theme-drawer {
        background: var(--bg-darker, #161614);
        border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
      }
      .theme-drawer[hidden] {
        display: none;
      }
      .theme-drawer__inner {
        padding: 10px 24px;
        gap: 14px;
        align-items: center;
        justify-content: flex-start;
      }
      .theme-drawer__label {
        font-family: var(--mono);
        font-size: 11.5px;
        color: color-mix(in srgb, var(--paper) 55%, transparent);
        letter-spacing: 0.02em;
        white-space: nowrap;
      }
      .theme-drawer__pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .theme-pill {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--paper);
        background: transparent;
        border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
        border-radius: 0;
        padding: 5px 12px;
        cursor: pointer;
        letter-spacing: 0.02em;
        transition: background 0.18s ease, border-color 0.18s ease,
          color 0.18s ease;
      }
      .theme-pill:hover {
        background: color-mix(in srgb, var(--accent) 22%, transparent);
        border-color: var(--accent);
      }
      .theme-pill[aria-pressed="true"] {
        background: var(--accent);
        border-color: var(--accent);
      }
      .theme-pill:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      /* === GEN SECTIONS — per-section composition === */
      /* See DESIGN.md "Section composition library" for the named shapes
         this register is built from: hero-editorial, build-dense,
         why-pullquote, next-voltage. Each shape has a defined surface,
         layout, type treatment, and rhythm role. */
      .gen-section {
        position: relative;
        padding: 56px 0 64px;
        /* Reveal-flow auto-scroll lands sections under the sticky nav.
           See DESIGN.md "Auto-scroll during reveal" in the gen-page register. */
        scroll-margin-top: 80px;
      }

      .gen-section + .gen-section {
        border-top: 1px solid var(--line);
      }

      .gen-section:first-child {
        padding-top: 8px;
      }

      /* Per-section backgrounds are set in each shape's block below.
         build-dense → paper-warm. next-voltage → ink. hero/why → paper. */

      .gen-eyebrow {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.04em;
        text-transform: lowercase;
        margin: 0 0 18px;
      }

      .gen-eyebrow--quiet {
        color: var(--ink-faint);
      }

      .gen-eyebrow--accent {
        color: var(--accent);
      }

      .gen-section strong {
        font-weight: 500;
        color: var(--ink);
      }

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

      /* ─────────────────────────────────────────────────────────────
         Shape: hero-editorial
         Surface: paper. Type-only. Magazine-cover scale. Lands the
         response with editorial weight before any structural content.
         See DESIGN.md "Shape: gen-section--hero-editorial".
         ───────────────────────────────────────────────────────────── */
      .gen-section--hero {
        background: var(--paper);
        padding: 112px 0 72px;
        /* Hero is the first section — it has no top border because there's
           nothing above it inside the gen-response. The first-child rule
           above is overridden because it would shrink padding-top. */
        position: relative;
        overflow: hidden;
      }

      .gen-section--hero:first-child {
        padding-top: 112px;
      }

      /* Editorial backdrop art — one of seven abstract images is picked
         per generation. Lives behind the headline on the right side,
         with a hard fade on the left so the headline reads on the paper
         even when it overlaps the art. Inline SVG that adopts the
         active theme's --accent and ink color via currentColor, so it
         re-skins instantly when the user swaps themes. */
      .gen-section--hero .gen-hero-art {
        position: absolute;
        top: 32px;
        right: -32px;
        width: 58%;
        max-width: 740px;
        height: auto;
        aspect-ratio: 2 / 1;
        color: var(--ink);
        z-index: 0;
        pointer-events: none;
        user-select: none;
        opacity: 0;
        animation: gen-hero-art-in 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s forwards;
        -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
        mask-image: linear-gradient(to left, #000 55%, transparent 100%);
      }

      @keyframes gen-hero-art-in {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      /* Headline + intro sit above the art. */
      .gen-section--hero h1,
      .gen-section--hero .gen-hero-intro {
        position: relative;
        z-index: 1;
      }

      .gen-section--hero h1 {
        font-family: var(--display);
        font-size: clamp(56px, 7vw, 96px);
        font-weight: 400;
        font-variation-settings: "opsz" 144;
        letter-spacing: -0.03em;
        line-height: 1;
        margin: 0 0 36px;
        color: var(--ink);
        max-width: 980px;
        /* Editorial entrance: the H1 itself rises in. The italic-orange
           emphasis phrase inside (an <em> from the model's *italic*
           markdown) fades in slightly after, as a small two-beat
           moment. See DESIGN.md P2 — motion serves narrative, this
           one signals "the brand's signature lands here." */
        opacity: 0;
        animation: gen-hero-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.05s forwards;
      }

      .gen-section--hero h1 em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
        /* Held back for a beat so it lands as the second move, after
           the rest of the H1 has settled. */
        opacity: 0;
        animation: gen-hero-emphasis 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.55s forwards;
      }

      .gen-section--hero .gen-hero-intro {
        font-family: var(--body);
        font-size: 22px;
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: 0;
        color: var(--ink-soft);
        max-width: 640px;
        margin: 0 0 14px;
        opacity: 0;
        animation: gen-hero-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.25s forwards;
      }

      .gen-section--hero .gen-hero-intro:last-child {
        margin-bottom: 0;
      }

      @keyframes gen-hero-rise {
        from {
          opacity: 0;
          transform: translateY(14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes gen-hero-emphasis {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* Reduced motion: skip entrance animation, content visible immediately. */
      @media (prefers-reduced-motion: reduce) {
        .gen-section--hero h1,
        .gen-section--hero h1 em,
        .gen-section--hero .gen-hero-intro {
          opacity: 1;
          animation: none;
        }
        .gen-section--hero .gen-hero-art {
          opacity: 1;
          animation: none;
        }
      }

      /* ─────────────────────────────────────────────────────────────
         Shape: build-dense
         Surface: paper-warm. Structural backbone of the response.
         Two-column on desktop (header left, list right) for ≤4 items;
         single column for ≥5. Items render as horizontal rows
         separated by 1px hairlines, heights varying by content.
         See DESIGN.md "Shape: gen-section--build-dense".
         ───────────────────────────────────────────────────────────── */
      .gen-section--build {
        background: var(--paper-warm);
        padding: 96px 0 104px;
      }

      /* Two-column layout: header sits in the left margin, list runs
         the right column. The .wrap inside the gen-response provides
         max-width 1200px; this grid splits that into ~33% / ~62% with
         a generous gutter, magazine-style. */
      .gen-section--build > .wrap,
      .gen-section--build {
        /* ensure the section's wrap container can host the grid */
      }

      .gen-section--build .gen-build-layout {
        display: grid;
        grid-template-columns: minmax(340px, 1.3fr) minmax(0, 2fr);
        gap: 80px;
        align-items: start;
      }

      /* Stacked variant — used when the renderer flags a long list
         (≥5 items). Add class .gen-build-layout--stacked on the layout
         container; for now the renderer always emits two-column and we
         revisit the toggle when long responses appear. */
      .gen-build-layout--stacked {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .gen-section--build .gen-build-header {
        max-width: none;
        margin-bottom: 0;
        padding-left: 40px;
        position: sticky;
        top: 96px;
      }

      /* Tight SVG+eyebrow stacking: the gen-art symbol sits compactly
         above the eyebrow as a connected header marker, not a floating
         decoration with whitespace between them. */
      .gen-section--build .gen-build-header .gen-art {
        width: 56px;
        height: 18px;
        margin: 0 0 10px;
      }

      .gen-section--build .gen-build-header .gen-eyebrow {
        margin: 0 0 28px;
      }

      .gen-section--build h2 {
        font-family: var(--display);
        font-size: clamp(28px, 3.2vw, 40px);
        font-weight: 400;
        font-variation-settings: "opsz" 144;
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin: 0 0 24px;
        color: var(--ink);
      }

      .gen-section--build .gen-build-frame {
        font-family: var(--body);
        font-size: 18px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin: 0;
        max-width: 360px;
      }

      /* Spec block — magazine-style data sheet sitting in the build
         header column. Hairline above turns it into a discrete data
         unit, distinct from the framing paragraph. Two-column grid:
         mono labels on the left in faint ink, mono values on the right
         in ink. Reads as a system spec sheet — operator-grade detail. */
      .gen-section--build .gen-build-spec {
        margin: 32px 0 0;
        padding: 24px 0 0;
        border-top: 1px solid var(--line);
        display: grid;
        row-gap: 14px;
      }

      .gen-section--build .gen-build-spec__row {
        display: grid;
        grid-template-columns: minmax(110px, auto) 1fr;
        column-gap: 20px;
        align-items: baseline;
      }

      .gen-section--build .gen-build-spec dt {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-faint);
        letter-spacing: 0.04em;
        text-transform: lowercase;
        white-space: nowrap;
      }

      .gen-section--build .gen-build-spec dd {
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--ink);
        margin: 0;
        letter-spacing: 0.02em;
        line-height: 1.5;
      }

      /* List as log: horizontal rows separated by 1px hairlines.
         Each item's height is content-driven (deliberately uneven per
         DESIGN.md — uniform heights here make the section read as a
         spec sheet). */
      .gen-build-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: block;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        position: relative;
      }

      .gen-build-item {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 24px;
        row-gap: 8px;
        padding: 28px 0;
        border-bottom: 1px solid var(--line);
        /* Stagger-fade entrance — items rise in 80ms apart per
           DESIGN.md P2. Triggered by the .gen-build-list--in-view
           class set by the IntersectionObserver. */
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
                    transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1),
                    background-color 0.18s ease;
      }

      .gen-build-item:last-child {
        border-bottom: none;
      }

      /* Hover: warm wash that picks up the accent without going loud.
         Wash spans the natural column width — no negative margin so
         it doesn't bleed past the right column on desktop or break
         the wrap padding on mobile. */
      .gen-build-list--in-view .gen-build-item:hover {
        background: var(--accent-soft);
      }

      .gen-build-list--in-view .gen-build-item {
        opacity: 1;
        transform: translateY(0);
      }

      .gen-build-list--in-view .gen-build-item:nth-child(1) { transition-delay: 0ms; }
      .gen-build-list--in-view .gen-build-item:nth-child(2) { transition-delay: 80ms; }
      .gen-build-list--in-view .gen-build-item:nth-child(3) { transition-delay: 160ms; }
      .gen-build-list--in-view .gen-build-item:nth-child(4) { transition-delay: 240ms; }
      .gen-build-list--in-view .gen-build-item:nth-child(5) { transition-delay: 320ms; }
      .gen-build-list--in-view .gen-build-item:nth-child(6) { transition-delay: 400ms; }

      @media (prefers-reduced-motion: reduce) {
        .gen-build-item {
          opacity: 1;
          transform: none;
          transition: none;
        }
      }

      /* ─────────────────────────────────────────────────────────────
         Pixel-vector icon library — code-native rect-based glyphs on
         a 32x32 grid. Used in the gen-page register to mark each
         build-list module (icon picked from item text) and the build
         header (icon picked from spec.domain). Themeable via
         currentColor; animated via grouped phase classes.
         ───────────────────────────────────────────────────────────── */
      .pixel-icon {
        display: inline-block;
        vertical-align: middle;
        color: currentColor;
        overflow: visible;
      }
      .pixel-icon .solid { opacity: 1; }
      .pixel-icon .part  { opacity: 0.35; }
      .pixel-icon.animated .phase-0 { animation: pixelPulse 4.8s linear infinite 0s; }
      .pixel-icon.animated .phase-1 { animation: pixelPulse 4.8s linear infinite 0.4s; }
      .pixel-icon.animated .phase-2 { animation: pixelPulse 4.8s linear infinite 0.8s; }
      .pixel-icon.animated .phase-3 { animation: pixelPulse 4.8s linear infinite 1.2s; }
      .pixel-icon.animated .phase-4 { animation: pixelPulse 4.8s linear infinite 1.6s; }
      .pixel-icon.animated .phase-5 { animation: pixelPulse 4.8s linear infinite 2s; }
      .pixel-icon.animated .blink   { animation: pixelBlink 1s steps(2, start) infinite; }

      @keyframes pixelPulse {
        0%, 100% { opacity: 0.35; }
        12%, 34% { opacity: 1; }
        52%      { opacity: 0.35; }
      }
      @keyframes pixelBlink {
        0%, 48%   { opacity: 1; }
        49%, 100% { opacity: 0; }
      }

      @media (prefers-reduced-motion: reduce) {
        .pixel-icon * { animation: none !important; }
        .pixel-icon .part { opacity: 1; }
      }

      /* Per-item marker: icon stacked above the m## label. The marker
         occupies col1 across both rows of the build-item grid, so the
         icon stays anchored at the top regardless of how tall the
         description grows in row 2. */
      .gen-build-marker {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-top: 4px;
      }

      .gen-build-marker .pixel-icon {
        width: 36px;
        height: 36px;
        color: var(--ink);
      }

      .gen-build-num {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--accent);
        letter-spacing: 0.04em;
        text-transform: lowercase;
        line-height: 1.5;
      }

      /* Orbital network backdrop — sits behind the build section
         content, anchored to the bottom-left and bleeding past the
         section edge by 2rem so it reads as a deliberate "extends
         past the frame" gesture. .gen-section--build inherits
         position: relative from .gen-section; the layout grid below
         gets z-index: 1 so the editorial sits above the art. */
      .section-orbital-art {
        position: absolute;
        inset: -2rem auto auto -2rem;
        width: min(560px, 95vw);
        opacity: 0;
        pointer-events: none;
        user-select: none;
        z-index: 0;
        animation: orbital-art-in 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s forwards;
      }

      @keyframes orbital-art-in {
        from { opacity: 0; }
        to   { opacity: 0.72; }
      }

      @keyframes orbital-art-in-mobile {
        from { opacity: 0; }
        to   { opacity: 0.45; }
      }

      .gen-section--build .gen-build-layout {
        position: relative;
        z-index: 1;
      }

      @media (prefers-reduced-motion: reduce) {
        .section-orbital-art {
          animation: none;
          opacity: 0.72;
        }
      }
      @media (prefers-reduced-motion: reduce) and (max-width: 880px) {
        .section-orbital-art {
          opacity: 0.45;
        }
      }

      .gen-build-name {
        font-family: var(--display);
        font-size: clamp(22px, 2.4vw, 28px);
        font-weight: 400;
        font-variation-settings: "opsz" 60;
        letter-spacing: -0.015em;
        line-height: 1.2;
        color: var(--ink);
        margin: 0;
        grid-column: 2;
        grid-row: 1;
      }

      .gen-build-desc {
        font-family: var(--body);
        font-size: 17px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin: 0;
        grid-column: 2;
        grid-row: 2;
        max-width: 580px;
      }

      /* ─────────────────────────────────────────────────────────────
         Shape: why-pullquote
         Surface: paper. The argument for why this works, composed as a
         magazine pull quote — a single sharp sentence at display-lg
         scale, supported by 1-2 paragraphs of context below. The pull
         quote is the visual hero. Eyebrow → pull quote → body.
         See DESIGN.md "Shape: gen-section--why-pullquote".
         ───────────────────────────────────────────────────────────── */
      .gen-section--why {
        background: var(--paper);
        padding: 104px 0 96px;
      }

      .gen-section--why .gen-eyebrow {
        text-align: center;
        margin: 0 auto 36px;
        max-width: 720px;
      }

      .gen-section--why .gen-why-quote {
        font-family: var(--display);
        font-size: clamp(32px, 4.5vw, 56px);
        font-weight: 400;
        font-variation-settings: "opsz" 144;
        font-style: italic;
        line-height: 1.15;
        letter-spacing: -0.02em;
        color: var(--ink);
        max-width: 920px;
        margin: 0 auto 48px;
        padding: 0;
        text-align: center;
        opacity: 0;
        animation: gen-hero-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s forwards;
      }

      /* The italic-orange phrase inside the pull quote lands as the
         second beat — same pattern as the hero's emphasis. The quote
         is already italic; the <em> only changes the color. */
      .gen-section--why .gen-why-quote em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
        opacity: 0;
        animation: gen-hero-emphasis 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.6s forwards;
      }

      .gen-section--why .gen-why-body {
        font-family: var(--body);
        font-size: 18px;
        font-weight: 400;
        line-height: 1.6;
        color: var(--ink-soft);
        max-width: 640px;
        margin: 0 auto;
        text-align: center;
        opacity: 0;
        animation: gen-hero-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.3s forwards;
      }

      /* Metrics block — sits between the pull quote and the body
         paragraphs in the value-created section. Three estimated
         outcomes derived from the proposed build, displayed as a
         hairline-bordered row. Followed by a small disclaimer. */
      .gen-section--why .gen-why-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        max-width: 760px;
        margin: 48px auto 16px;
        padding: 32px 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .gen-section--why .gen-why-metric {
        text-align: center;
        padding: 0 8px;
      }

      .gen-section--why .gen-why-metric__value {
        font-family: var(--display);
        font-size: clamp(30px, 3.4vw, 44px);
        font-weight: 400;
        font-variation-settings: "opsz" 144;
        letter-spacing: -0.02em;
        line-height: 1.05;
        color: var(--ink);
        margin: 0 0 10px;
      }

      .gen-section--why .gen-why-metric__label {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink-mute);
        text-transform: lowercase;
        letter-spacing: 0.04em;
        line-height: 1.4;
      }

      .gen-section--why .gen-why-disclaimer {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink-faint);
        text-align: center;
        margin: 0 auto 36px;
        max-width: 760px;
        letter-spacing: 0.02em;
        line-height: 1.5;
      }

      .gen-section--why .gen-why-body + .gen-why-body {
        margin-top: 14px;
      }

      @media (prefers-reduced-motion: reduce) {
        .gen-section--why .gen-why-quote,
        .gen-section--why .gen-why-quote em,
        .gen-section--why .gen-why-body {
          opacity: 1;
          animation: none;
        }
      }

      /* ─────────────────────────────────────────────────────────────
         Shape: next-voltage
         Surface: ink (#0f0f0e — same as terminal, deliberate callback).
         The brand's voltage moment in the response. Lands as the closer
         after three paper-toned sections — the contrast IS the voltage.
         No effects, just the surface change and editorial scale CTA.
         See DESIGN.md "Shape: gen-section--next-voltage".
         ───────────────────────────────────────────────────────────── */
      .gen-section--next {
        background: var(--bg-dark);
        padding: 120px 0;
        color: var(--line);
        position: relative;
        /* Full-bleed: break out of any parent .wrap container so the
           ink surface extends edge to edge of the viewport. Standard
           recipe — width 100vw, then pull element back to viewport
           edges via left:50% and negative margin-left. body has
           overflow-x: hidden so horizontal scroll is suppressed. */
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
      }

      /* Inner content wrapper — constrained to a narrower column than
         the full-bleed surface (DESIGN.md "max content width ~720px").
         The wrapper centers horizontally in the band; all children are
         block-level and naturally align flush-left within the wrapper.
         Position relative + z-index 1 so content sits above the
         scanline ::before texture. */
      .gen-section--next .gen-next-inner {
        position: relative;
        z-index: 1;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px;
        box-sizing: border-box;
      }

      /* Subtle scanline texture — same treatment as the terminal-header,
         the ink-surface callback running at the visual level too. */
      .gen-section--next::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(
          0deg,
          rgba(255, 255, 255, 0.012) 0px,
          rgba(255, 255, 255, 0.012) 1px,
          transparent 1px,
          transparent 3px
        );
        pointer-events: none;
        z-index: 0;
      }

      /* The next section's content stays narrower than its full-bleed
         surface — classic dark-band CTA pattern. The HA! wordmark sits
         at the top of the section as a brand sign-off (white H+A,
         orange ! — the voltage moment). The PNG's background is
         pre-baked to #0f0f0e to match the band, so its square edges
         disappear into the surface. */
      .gen-section--next .gen-next-mark {
        display: block;
        width: 64px;
        height: auto;
        margin: 0 0 22px;
      }

      .gen-section--next .gen-eyebrow {
        color: var(--accent);
        margin: 0 0 28px;
      }

      .gen-section--next h2 {
        font-family: var(--display);
        font-size: clamp(36px, 4.5vw, 56px);
        font-weight: 400;
        font-variation-settings: "opsz" 144;
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin: 0 0 28px;
        color: #f7f5f0;
        max-width: 720px;
      }

      .gen-section--next h2 em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
      }

      .gen-section--next p {
        font-family: var(--body);
        font-size: 19px;
        line-height: 1.55;
        color: #b8b3a8;
        max-width: 640px;
        margin: 0 0 16px;
      }

      .gen-section--next p:last-of-type {
        margin-bottom: 44px;
      }

      /* The closer's CTA — operator-grade clickable terminal action
         scaled up for editorial context. Echoes the home page's
         `term-action` (white-on-ink, dashed accent underline) but at
         body-display size, not terminal size. The personalized flag
         (`--for=customer-service`) signals "this CTA was written for
         your situation," reinforcing the gen-page's per-response
         intentionality. */
      .gen-next-cta {
        display: flex;
        width: fit-content;
        align-items: baseline;
        gap: 10px;
        font-family: var(--mono);
        font-size: 16px;
        line-height: 1.4;
        color: #f7f5f0;
        background: transparent;
        border: none;
        border-bottom: 1px dashed rgba(217, 79, 30, 0.45);
        padding: 6px 4px;
        cursor: pointer;
        text-decoration: none;
        letter-spacing: 0.01em;
        transition: background 0.18s ease, border-color 0.18s ease,
          color 0.18s ease;
      }

      .gen-next-cta__prompt {
        color: var(--accent);
        font-weight: 500;
      }

      .gen-next-cta__label {
        color: #f7f5f0;
        font-weight: 500;
      }

      .gen-next-cta__flag {
        color: #6b9c5c;
        font-weight: 400;
      }

      .gen-next-cta__arrow {
        color: var(--accent);
        margin-left: 4px;
      }

      .gen-next-cta:hover,
      .gen-next-cta:focus-visible {
        background: rgba(217, 79, 30, 0.14);
        border-bottom-color: var(--accent);
        border-bottom-style: solid;
        color: #fff;
        outline: none;
      }

      /* Related-workflow deep links — sit below the primary CTA inside the
         next-section closer. Terminal-style, dashed-underline, white-on-ink.
         Render only when the model emitted a related-workflows block with
         valid slugs; absent otherwise. */
      .gen-next-related {
        margin-top: 32px;
        padding-top: 22px;
        border-top: 1px dashed rgba(216, 212, 202, 0.22);
      }
      .gen-next-related__label {
        font-family: var(--mono);
        font-size: 11.5px;
        letter-spacing: 0.04em;
        color: rgba(247, 245, 240, 0.45);
        margin-bottom: 12px;
        text-transform: lowercase;
      }
      .gen-next-related__link {
        display: flex;
        gap: 10px;
        align-items: baseline;
        padding: 10px 0;
        text-decoration: none;
        color: var(--paper);
        font-family: var(--mono);
        font-size: 13px;
        letter-spacing: 0.02em;
        transition: color 0.18s ease;
      }
      .gen-next-related__link + .gen-next-related__link {
        border-top: 1px solid rgba(216, 212, 202, 0.08);
      }
      .gen-next-related__link:hover,
      .gen-next-related__link:focus-visible {
        color: var(--accent);
        outline: none;
      }
      .gen-next-related__arrow {
        color: var(--accent);
        flex-shrink: 0;
      }
      .gen-next-related__name {
        border-bottom: 1px dashed rgba(217, 79, 30, 0.4);
        padding-bottom: 1px;
        transition: border-color 0.18s ease;
      }
      .gen-next-related__link:hover .gen-next-related__name,
      .gen-next-related__link:focus-visible .gen-next-related__name {
        border-bottom-color: var(--accent);
        border-bottom-style: solid;
      }

      /* One-shot pulse on the CTA's $ prompt prefix when the section
         first lands — mirrors the home prompt's pulse-once on the live
         input. Same keyframe, applied via .gen-section--next.pulse-cta. */
      .gen-section--next.pulse-cta .gen-next-cta__prompt {
        animation: prompt-pulse 1.6s ease-out 1;
      }

      /* Section-level entrance: fade in on intersection, once. The CTA
         pulse fires on the same beat. Triggered by JS adding
         .pulse-cta when the section enters viewport. */
      .gen-section--next {
        opacity: 1;
      }

      .gen-section--next.fade-in {
        animation: gen-hero-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
      }

      @media (prefers-reduced-motion: reduce) {
        .gen-section--next.fade-in {
          animation: none;
        }
        .gen-section--next.pulse-cta .gen-next-cta__prompt {
          animation: none;
        }
      }

      /* Fallback — for off-topic redirects (no ## headings) */
      .gen-section--fallback h1 {
        font-family: var(--display);
        font-size: clamp(28px, 3.5vw, 40px);
        font-weight: 400;
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin: 0 0 20px;
        color: var(--ink);
      }

      .gen-section--fallback p {
        font-family: var(--body);
        font-size: 18px;
        line-height: 1.55;
        color: var(--ink-soft);
        max-width: 640px;
        margin: 0 0 16px;
      }

      /* CTA block (preserved from prior implementation) */
      .gen-stream .gen-cta {
        margin-top: 8px;
        display: flex;
        gap: 16px;
        align-items: center;
        flex-wrap: wrap;
      }

      .gen-stream .gen-tag {
        display: inline-block;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--accent);
        text-transform: lowercase;
        letter-spacing: 0.04em;
        padding: 3px 10px;
        border: 1px solid rgba(217, 79, 30, 0.3);
        background: rgba(217, 79, 30, 0.04);
        margin-right: 6px;
      }

      /* Schematic line art — sanctioned exception per DESIGN.md
         "Exceptions in the generated-page reveal." Stroke-only, no fills,
         currentColor for accent/ink inheritance. */
      .gen-art {
        display: block;
        width: 120px;
        height: 40px;
        margin: 0 0 22px;
        color: var(--accent);
        stroke: currentColor;
        stroke-width: 1.5;
        fill: none;
        overflow: visible;
      }

      /* Streaming cursor at end of generated text */
      .stream-cursor {
        display: inline-block;
        width: 8px;
        height: 1.1em;
        background: var(--accent);
        vertical-align: text-bottom;
        margin-left: 2px;
        animation: blink 1.05s steps(2, start) infinite;
      }

      /* The .has-generated class is set on body when a generated response
         is showing. It swaps the nav CTA for a reset link (see :160) so
         the primary nav action becomes "start over." */

      .ascii-art {
        font-family: var(--mono);
        font-size: clamp(7px, 1.15vw, 14px);
        line-height: 1.05;
        color: var(--accent);
        margin: 8px 0 28px;
        white-space: pre;
        overflow: visible;
        text-shadow:
          0 0 1px rgba(217, 79, 30, 0.4),
          0 0 14px rgba(217, 79, 30, 0.18);
        opacity: 0;
        transition: opacity 0.5s ease;
        letter-spacing: 0;
      }

      .ascii-art.show {
        opacity: 1;
      }

      .ascii-higher,
      .ascii-agency {
        display: block;
      }

      .ascii-agency {
        margin-top: 2px;
      }

      .terminal-meta {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 20px;
        margin-bottom: 18px;
        opacity: 0;
        transition: opacity 0.5s ease;
        font-size: 14px;
      }

      .terminal-meta.show {
        opacity: 1;
      }

      .meta-line {
        color: #d8d4ca;
      }

      .meta-line.dim {
        color: #8a8a82;
      }

      .meta-line em {
        color: var(--accent);
        font-style: normal;
        font-weight: 500;
      }

      .status-ok {
        color: #28c840;
        text-shadow: 0 0 6px rgba(40, 200, 64, 0.3);
      }

      .terminal-line.final {
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .terminal-line.final.show {
        opacity: 1;
      }

      /* Hero tagline below terminal */
      .hero-tagline {
        max-width: 720px;
        padding-top: 72px;
      }

      .eyebrow {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--accent);
        text-transform: lowercase;
        letter-spacing: 0.04em;
        margin-bottom: 28px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .eyebrow::before {
        content: "→";
        color: var(--accent);
        font-weight: 500;
      }

      h1.headline {
        font-family: var(--display);
        font-weight: 400;
        font-size: clamp(48px, 8vw, 104px);
        line-height: 0.95;
        letter-spacing: -0.035em;
        color: var(--ink);
        margin-bottom: 36px;
        font-variation-settings: "opsz" 144;
      }

      h1.headline em {
        font-style: italic;
        font-weight: 300;
        color: var(--accent);
      }

      .lede {
        font-size: 22px;
        line-height: 1.45;
        color: var(--ink-soft);
        max-width: 640px;
        margin-bottom: 48px;
        font-weight: 400;
      }

      .cta-row {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
      }

      .btn-primary {
        background: var(--ink);
        color: var(--paper);
        padding: 14px 22px 14px 18px;
        border-radius: 0;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid var(--ink);
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s ease;
        font-family: var(--mono);
        letter-spacing: 0.02em;
      }

      .btn-primary::before {
        content: "$";
        color: var(--accent);
        font-weight: 500;
      }

      .btn-primary:hover {
        background: var(--accent);
        border-color: var(--accent);
      }

      .btn-primary:hover::before {
        color: #fff;
      }

      .btn-secondary {
        color: var(--ink);
        padding: 14px 4px;
        font-size: 13px;
        font-weight: 500;
        border: none;
        background: transparent;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px dashed var(--ink);
        border-radius: 0;
        transition: all 0.2s ease;
        font-family: var(--mono);
        letter-spacing: 0.02em;
      }

      .btn-secondary:hover {
        color: var(--accent);
        border-bottom-color: var(--accent);
        border-bottom-style: solid;
      }

      /* Manifesto block */
      .manifesto {
        border-top: 1px solid var(--line);
        padding: 80px 0;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 80px;
      }

      .manifesto-label {
        font-family: var(--mono);
        font-size: 12px;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        padding-top: 8px;
      }

      .manifesto-label::before {
        content: "// ";
        color: var(--ink-faint);
      }

      .manifesto-body {
        font-family: var(--display);
        font-size: clamp(24px, 3vw, 36px);
        line-height: 1.3;
        font-weight: 400;
        letter-spacing: -0.02em;
        color: var(--ink);
        font-variation-settings: "opsz" 60;
      }

      .manifesto-body em {
        font-style: italic;
        color: var(--accent);
      }
      /* Three verbs section */
      .verbs {
        border-top: 1px solid var(--line);
        padding: 100px 0;
      }

      .section-title {
        font-family: var(--display);
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 400;
        letter-spacing: -0.025em;
        line-height: 1.05;
        margin-bottom: 64px;
        max-width: 800px;
      }

      .verbs-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border-top: 1px solid var(--line);
      }

      .verb {
        padding: 48px 32px 48px 0;
        border-right: 1px solid var(--line);
        position: relative;
      }

      .verb:last-child {
        border-right: none;
        padding-right: 0;
      }
      .verb:not(:first-child) {
        padding-left: 32px;
      }

      .verb-num {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        margin-bottom: 24px;
        letter-spacing: 0.02em;
      }

      .verb-name {
        font-family: var(--display);
        font-size: 40px;
        font-weight: 400;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
        color: var(--ink);
        font-variation-settings: "opsz" 100;
      }

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

      .verb-desc {
        color: var(--ink-soft);
        font-size: 16px;
        line-height: 1.55;
      }

      /* Examples */
      .examples {
        border-top: 1px solid var(--line);
        padding: 100px 0;
      }

      .ex-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
      }

      .ex {
        padding: 36px 0;
        border-bottom: 1px solid var(--line);
        display: grid;
        grid-template-columns: 100px 1fr 2fr;
        gap: 48px;
        align-items: baseline;
      }

      .ex:first-child {
        border-top: 1px solid var(--line);
      }

      .ex-num {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.02em;
      }

      .ex-tag {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--accent);
        text-transform: lowercase;
        letter-spacing: 0.02em;
      }

      .ex-tag::before {
        content: "#";
        color: var(--accent);
        margin-right: 2px;
      }

      .ex-text {
        font-size: 19px;
        line-height: 1.45;
        color: var(--ink);
      }

      /* Who */
      .who {
        border-top: 1px solid var(--line);
        padding: 100px 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
      }

      .who-block h3 {
        font-family: var(--mono);
        font-size: 12px;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        margin-bottom: 24px;
      }

      .who-block h3::before {
        content: "// ";
        color: var(--ink-faint);
      }

      .who-block p {
        font-family: var(--display);
        font-size: 26px;
        line-height: 1.35;
        font-weight: 400;
        letter-spacing: -0.015em;
        color: var(--ink);
        font-variation-settings: "opsz" 60;
      }

      .who-block.alt p {
        font-family: var(--body);
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink-soft);
        letter-spacing: 0;
        font-weight: 400;
      }

      .who-block.alt p + p {
        margin-top: 16px;
      }

      /* CTA section */
      .final-cta {
        border-top: 1px solid var(--line);
        padding: 120px 0 60px;
        text-align: center;
      }

      .final-cta h2 {
        font-family: var(--display);
        font-size: clamp(40px, 6vw, 72px);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin-bottom: 24px;
      }

      .final-cta h2 em {
        font-style: italic;
        color: var(--accent);
      }

      .final-cta p {
        font-size: 18px;
        color: var(--ink-soft);
        margin-bottom: 40px;
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
      }

      /* === HOW IT WORKS === */

      .hiw-hero {
        padding: 60px 0 80px;
        border-bottom: 1px solid var(--line);
      }

      .hiw-hero h1 {
        font-family: var(--display);
        font-size: clamp(48px, 7vw, 84px);
        font-weight: 400;
        letter-spacing: -0.03em;
        line-height: 1;
        margin-bottom: 32px;
        max-width: 900px;
        font-variation-settings: "opsz" 144;
      }

      .hiw-hero h1 em {
        font-style: italic;
        color: var(--accent);
      }

      .hiw-hero .lede {
        max-width: 720px;
      }

      /* Three layers */
      .layers {
        padding: 100px 0;
      }

      .layer {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 80px;
        padding: 80px 0;
        border-top: 1px solid var(--line);
      }

      .layer:last-child {
        border-bottom: 1px solid var(--line);
      }

      .layer-left {
        position: sticky;
        top: 100px;
        align-self: start;
      }

      .layer-num {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--accent);
        margin-bottom: 16px;
        letter-spacing: 0.02em;
      }

      .layer-num::before {
        content: "// ";
        color: var(--ink-faint);
      }

      .layer-title {
        font-family: var(--display);
        font-size: 44px;
        font-weight: 400;
        letter-spacing: -0.025em;
        line-height: 1.05;
        color: var(--ink);
        font-variation-settings: "opsz" 100;
      }

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

      .layer-meta {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        text-transform: lowercase;
        letter-spacing: 0.02em;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
      }

      .layer-meta::before {
        content: "$ ";
        color: var(--accent);
      }

      .layer-right p.layer-body {
        font-size: 19px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin-bottom: 32px;
      }

      .layer-right p.layer-body strong {
        color: var(--ink);
        font-weight: 500;
      }

      .feature-list {
        list-style: none;
        margin-top: 32px;
      }

      .feature-list li {
        padding: 18px 0;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 24px 1fr;
        gap: 16px;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.5;
      }

      .feature-list li:last-child {
        border-bottom: 1px solid var(--line);
      }

      .feature-list li::before {
        content: "→";
        color: var(--accent);
        font-family: var(--mono);
      }

      /* Pricing */
      .pricing {
        padding: 100px 0;
        border-top: 1px solid var(--line);
      }

      .price-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 48px;
      }

      .price-card {
        background: var(--paper-warm);
        border: 1px solid var(--line);
        border-radius: 0;
        padding: 36px 32px;
        transition: all 0.25s ease;
        position: relative;
      }

      .price-card:hover {
        border-color: var(--accent);
      }

      .price-card.featured {
        background: var(--ink);
        color: var(--paper);
        border-color: var(--ink);
      }

      .price-tier {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        margin-bottom: 16px;
      }

      .price-tier::before {
        content: "// ";
        color: var(--ink-faint);
      }

      .price-card.featured .price-tier {
        color: var(--accent);
      }
      .price-card.featured .price-tier::before {
        color: rgba(217, 79, 30, 0.5);
      }

      .price-name {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 400;
        letter-spacing: -0.02em;
        margin-bottom: 16px;
        line-height: 1.1;
        font-variation-settings: "opsz" 100;
      }

      .price-desc {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 24px;
        color: var(--ink-soft);
      }

      .price-card.featured .price-desc {
        color: var(--ink-faint);
      }

      .price-amt {
        font-family: var(--mono);
        font-size: 12px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        color: var(--ink-soft);
        letter-spacing: 0.02em;
      }

      .price-amt::before {
        content: "$ ";
        color: var(--accent);
        font-weight: 500;
      }

      .price-card.featured .price-amt {
        border-top-color: rgba(255, 255, 255, 0.15);
        color: var(--paper);
      }

      /* === CONTACT === */

      .contact-page {
        padding: 80px 0 120px;
      }

      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        align-items: start;
      }

      .contact-left h1 {
        font-family: var(--display);
        font-size: clamp(40px, 6vw, 72px);
        font-weight: 400;
        letter-spacing: -0.03em;
        line-height: 1;
        margin-bottom: 32px;
        font-variation-settings: "opsz" 144;
      }

      .contact-left h1 em {
        font-style: italic;
        color: var(--accent);
      }

      .contact-left p {
        font-size: 19px;
        line-height: 1.5;
        color: var(--ink-soft);
        max-width: 480px;
        margin-bottom: 24px;
      }

      .contact-detail {
        margin-top: 48px;
        padding-top: 48px;
        border-top: 1px solid var(--line);
      }

      .contact-detail h3 {
        font-family: var(--mono);
        font-size: 11px;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        margin-bottom: 12px;
      }

      .contact-detail h3::before {
        content: "// ";
        color: var(--ink-faint);
      }

      .contact-detail a {
        font-family: var(--display);
        font-size: 28px;
        font-weight: 400;
        color: var(--ink);
        text-decoration: none;
        letter-spacing: -0.015em;
        transition: color 0.2s;
        font-variation-settings: "opsz" 100;
      }

      .contact-detail a:hover {
        color: var(--accent);
      }

      /* Form */
      .form {
        background: var(--paper-warm);
        padding: 48px;
        border-radius: 0;
        border: 1px solid var(--line);
      }

      .form-row {
        margin-bottom: 24px;
      }

      .form label {
        display: block;
        font-family: var(--mono);
        font-size: 11px;
        text-transform: lowercase;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        margin-bottom: 8px;
      }

      .form label::before {
        content: "// ";
        color: var(--ink-faint);
      }

      .form input,
      .form textarea,
      .form select {
        width: 100%;
        padding: 14px 16px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 0;
        font-family: var(--body);
        font-size: 15px;
        color: var(--ink);
        transition: all 0.2s;
        font-feature-settings: "ss01";
      }

      .form input:focus,
      .form textarea:focus,
      .form select:focus {
        outline: none;
        border-color: var(--accent);
        background: var(--paper);
      }

      .form textarea {
        min-height: 120px;
        resize: vertical;
        font-family: var(--body);
      }

      .form-submit {
        background: var(--ink);
        color: var(--paper);
        border: 1px solid var(--ink);
        padding: 14px 22px 14px 18px;
        border-radius: 0;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        width: 100%;
        transition: all 0.25s;
        font-family: var(--mono);
        margin-top: 8px;
        letter-spacing: 0.02em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .form-submit::before {
        content: "$";
        color: var(--accent);
      }

      .form-submit:hover {
        background: var(--accent);
        border-color: var(--accent);
      }

      .form-submit:hover::before {
        color: #fff;
      }

      /* Surfaced when a Formspree submission fails. Terminal-aesthetic
         error line — mono, accent prefix, no box. Real message shown so
         the user knows what came back. */
      .form-error {
        margin-top: 16px;
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.5;
        color: var(--ink);
      }

      .form-error::before {
        content: "! ";
        color: var(--accent);
        font-weight: 500;
      }

      .form-thanks {
        display: none;
        text-align: center;
        padding: 40px 20px;
      }

      .form-thanks.show {
        display: block;
      }
      .form-thanks h3 {
        font-family: var(--display);
        font-size: 32px;
        font-weight: 400;
        margin-bottom: 12px;
        letter-spacing: -0.02em;
      }

      .form-thanks p {
        color: var(--ink-soft);
      }

      /* Footer */
      footer {
        border-top: 1px solid var(--ink);
        padding: 32px 0 28px;
        margin-top: auto;
        background: var(--paper-warm);
      }

      .footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 16px;
      }

      .footer-left {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--ink);
        letter-spacing: 0.02em;
      }

      .footer-left::before {
        content: "$ ";
        color: var(--accent);
        font-weight: 500;
      }

      .footer-left span {
        color: var(--accent);
      }

      .footer-right {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.02em;
        text-transform: lowercase;
      }

      .footer-right::before {
        content: "// ";
        color: var(--ink-faint);
      }

      /* Animations */
      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .rise {
        opacity: 0;
        animation: rise 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
      }

      .rise-1 {
        animation-delay: 0.05s;
      }
      .rise-2 {
        animation-delay: 0.15s;
      }
      .rise-3 {
        animation-delay: 0.28s;
      }
      .rise-4 {
        animation-delay: 0.42s;
      }
      .rise-5 {
        animation-delay: 0.56s;
      }

      /* Mobile */
      @media (max-width: 880px) {
        .wrap {
          padding: 0 24px;
        }
        /* Theme teaser moves to its own full-width row below the nav on
           mobile — fitting four nav links + path tag + an inline teaser
           on a 375px viewport caused the teaser to overlap the path tag.
           The teaser still triggers the same drawer; it just lives on its
           own thin band beneath the nav row, with the button-border
           removed so it reads as a quiet sub-row, not a second nav. */
        .nav-inner {
          padding: 8px 14px;
          font-size: 11.5px;
          gap: 8px;
          flex-wrap: wrap;
        }
        .nav-left {
          gap: 8px;
        }
        .nav-right {
          gap: 0;
        }
        .theme-teaser {
          flex-basis: 100%;
          order: 99;
          margin: 6px -14px 0;
          padding: 7px 14px;
          gap: 8px;
          font-size: 11.5px;
          justify-content: flex-start;
          border: 0;
          border-top: 1px solid #2a2a26;
          border-radius: 0;
          background: transparent;
        }
        .theme-teaser:hover,
        .theme-teaser:focus-visible {
          background: rgba(217, 79, 30, 0.06);
        }
        .theme-teaser[aria-expanded="true"] {
          background: rgba(217, 79, 30, 0.10);
          border-top-color: var(--accent);
        }
        .theme-teaser__full {
          display: inline;
        }
        .theme-teaser__short {
          display: none;
        }
        .theme-drawer__inner {
          padding: 10px 14px;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }
        .theme-drawer__pills {
          gap: 6px;
        }
        .terminal-header-inner {
          padding: 28px 16px 28px;
        }
        .ascii-art {
          /* 2.7vw rendered ~10.5px at iPhone width and the widest ASCII
             line (~64 chars) overflowed the viewport. 1.9vw keeps the
             whole logo inside the viewport on every common phone width. */
          font-size: 1.9vw;
        }
        .term-tag-dim {
          display: none;
        }
        /* Path tag + branch tag hide on mobile — at 375px the four nav
           links plus the path overflow the viewport. The whole left
           cluster goes; brand presence on the home page comes from the
           ASCII wordmark below, and on inner pages from the document
           <title> and the page content. */
        .nav-left {
          display: none;
        }
        .term-nav-link {
          padding: 4px 8px;
        }
        .term-action-flag {
          display: none;
        }
        /* On mobile the chip row stacks under the input, the
           skip link drops to its own line. Each example sits on its
           own line so the column reads as a list, not a wrapping
           paragraph that gets confused with the input above. */
        .term-hint {
          gap: 12px 14px;
        }
        .term-examples {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }
        .examples-label {
          margin-bottom: 2px;
        }
        .example-chip {
          white-space: normal;
          font-size: 12.5px;
        }
        .hint-skip {
          margin-left: 0;
          flex-basis: 100%;
        }
        .verbs-grid {
          grid-template-columns: 1fr;
        }
        .verb {
          padding: 40px 0;
          border-right: none;
          border-bottom: 1px solid var(--line);
        }
        .verb:last-child {
          border-bottom: none;
        }
        .verb:not(:first-child) {
          padding-left: 0;
        }
        .ex {
          grid-template-columns: 60px 1fr;
          gap: 16px;
        }
        .ex-tag {
          grid-column: 2;
        }
        .ex-text {
          grid-column: 1 / -1;
        }
        .who,
        .manifesto {
          grid-template-columns: 1fr;
          gap: 24px;
        }
        .layer {
          grid-template-columns: 1fr;
          gap: 32px;
          padding: 60px 0;
        }
        .layer-left {
          position: static;
        }
        .price-grid {
          grid-template-columns: 1fr;
        }
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 60px;
        }
        .form {
          padding: 32px 24px;
        }
        .layer-title {
          font-size: 32px;
        }
        /* Generated response — mobile collapses */
        .gen-section {
          padding: 40px 0 48px;
        }
        .gen-section--hero {
          padding: 64px 0 48px;
        }
        .gen-section--hero:first-child {
          padding-top: 64px;
        }
        /* Mobile hero art: behind everything as a watermark. Anchored to
           the top-right, soft-faded on the left and bottom so the
           headline + intro stay legible against busy image content. */
        .gen-section--hero .gen-hero-art {
          top: 0;
          right: -24px;
          width: 90%;
          max-width: 480px;
          opacity: 0;
          animation: gen-hero-art-in-mobile 1.4s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s forwards;
          -webkit-mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 75%);
        }
        @keyframes gen-hero-art-in-mobile {
          from { opacity: 0; }
          to   { opacity: 0.55; }
        }
        /* Full-bleed paper-warm card on mobile: the section escapes the
           wrap's 24px gutter so it reads as a deliberate framed block,
           not a cramped column. Internal padding gives content room. */
        .gen-section--build {
          margin-left: -24px;
          margin-right: -24px;
          padding: 56px 24px;
        }
        /* Two-column collapses to stacked on mobile — header sits above
           the list, sticky header drops to static. */
        .gen-section--build .gen-build-layout {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .gen-section--build .gen-build-header {
          position: static;
          padding-left: 0;
        }
        .gen-section--build .gen-build-frame {
          max-width: none;
        }
        .gen-build-item {
          grid-template-columns: 40px 1fr;
          column-gap: 16px;
          padding: 22px 0;
        }
        .gen-build-marker .pixel-icon {
          width: 32px;
          height: 32px;
        }
        /* Smaller, softer orbital backdrop on mobile so it doesn't
           compete with the editorial text on a narrow viewport. */
        .section-orbital-art {
          inset: -1rem auto auto -1.5rem;
          width: min(360px, 80vw);
          animation-name: orbital-art-in-mobile;
        }
        .gen-build-name {
          font-size: 20px;
        }
        .gen-build-desc {
          font-size: 16px;
        }
        .gen-section--why {
          padding: 64px 0 56px;
        }
        .gen-section--why .gen-why-quote {
          font-size: clamp(28px, 6vw, 36px);
          margin-bottom: 32px;
        }
        .gen-section--why .gen-why-metrics {
          grid-template-columns: 1fr;
          gap: 28px;
          padding: 24px 0;
          margin: 36px auto 12px;
        }
        .gen-section--why .gen-why-metric__value {
          font-size: clamp(28px, 7vw, 36px);
        }
        .gen-section--next {
          padding: 80px 0;
        }
        .gen-section--next .gen-next-inner {
          padding-left: 24px;
          padding-right: 24px;
        }
        .gen-section--next h2 {
          font-size: clamp(28px, 7vw, 40px);
        }
        .gen-section--next p {
          font-size: 17px;
        }
        .gen-next-cta {
          font-size: 14px;
          flex-wrap: wrap;
        }
        .gen-next-cta__flag {
          /* On narrow screens, hide the flag entirely rather than
             wrap it — the label + arrow is the essential CTA. */
          display: none;
        }
      }

      /* Hero-art preview surface — activated only via ?preview=hero-art.
         Rules scoped to body.hero-art-preview so they don't affect the
         live site. Lets us audit motifs at hero size across themes
         without wiring them into the live renderer yet. */
      body.hero-art-preview main.page,
      body.hero-art-preview footer { display: none !important; }
      body.hero-art-preview { background: var(--paper); color: var(--ink); }
      .hero-art-preview-wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 80px 32px 120px;
      }
      .hero-art-preview-wrap h1 {
        font-family: var(--display);
        font-size: 36px;
        font-weight: 400;
        margin: 0 0 8px;
        letter-spacing: -0.01em;
      }
      .hero-art-preview-wrap .lead {
        font-family: var(--mono);
        font-size: 13px;
        color: var(--ink-mute);
        margin: 0 0 48px;
      }
      .hero-art-card {
        margin-bottom: 56px;
      }
      .hero-art-card__meta {
        font-family: var(--mono);
        font-size: 11.5px;
        color: var(--ink-mute);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 12px;
        display: flex;
        gap: 18px;
        align-items: baseline;
      }
      .hero-art-card__meta strong {
        color: var(--ink);
        font-weight: 500;
      }
      .hero-art-card__svg {
        width: 100%;
        max-width: 800px;
        aspect-ratio: 2 / 1;
        color: var(--ink);
        border: 1px solid var(--line);
      }

      /* === Workflow pages — static editorial detail surface ===
         Reuses .eyebrow, .lede, .hiw-hero, .section-title, .feature-list,
         .btn-primary, .final-cta, .wrap. Adds rhythm + an inline definition
         list for install metadata + a dense list pattern for the
         /workflows index. */
      .wf-page > .wrap {
        padding-top: 16px;
        padding-bottom: 120px;
        max-width: 980px;
      }
      /* Override the editorial .hiw-hero top padding when used inside a
         .wf-page — the hero motif + bg-art carry the visual weight that
         the original 60px stack was making room for, and 60+60=120px of
         empty paper before the eyebrow read as dead space on desktop. */
      .wf-page .hiw-hero {
        padding-top: 24px;
        padding-bottom: 64px;
        border-bottom: 0;
      }
      .wf-section {
        padding: 56px 0;
        border-top: 1px solid var(--line);
      }
      .wf-section:first-of-type {
        border-top: 0;
        padding-top: 16px;
      }
      .wf-section .section-title {
        margin-bottom: 24px;
      }
      .wf-section p {
        font-size: 18px;
        line-height: 1.6;
        color: var(--ink-soft);
        max-width: 720px;
      }
      .wf-section p + p {
        margin-top: 16px;
      }
      .wf-section p em,
      .wf-meta dd em {
        font-style: italic;
        font-family: var(--display);
        color: var(--accent);
        font-weight: 400;
      }
      .wf-section .feature-list {
        margin-top: 28px;
        max-width: 760px;
      }
      .wf-section .feature-list li strong {
        font-weight: 500;
        color: var(--ink);
      }
      .wf-meta {
        margin-top: 8px;
        border-top: 1px solid var(--line);
        max-width: 720px;
      }
      .wf-meta__row {
        display: grid;
        grid-template-columns: 180px 1fr;
        gap: 24px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        align-items: baseline;
      }
      .wf-meta dt {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.04em;
      }
      .wf-meta dd {
        font-size: 16px;
        color: var(--ink);
        margin: 0;
        line-height: 1.5;
      }
      .wf-back {
        display: inline-block;
        margin-bottom: 32px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        text-decoration: none;
        border-bottom: 1px dashed var(--line);
        padding-bottom: 2px;
        transition: color 0.18s ease, border-color 0.18s ease;
      }
      .wf-back:hover {
        color: var(--accent);
        border-color: var(--accent);
      }

      /* === Workflow flow diagram — schematic of the loop the workflow runs.
         Bounded exception to the static-surface restraint discipline: one
         per workflow page, narratively necessary because it shows the
         system in motion (the principle is the same as the gen-page
         schematic-diagram allowance — see DESIGN.md). CSS-only, no JS, no
         SVG library. Pulse dots travel along the connectors between
         stages. Mobile stacks vertically. prefers-reduced-motion kills
         the animation. */
      .wf-flow {
        display: flex;
        align-items: stretch;
        margin: 36px 0 12px;
        border: 1px solid var(--line);
        background: var(--paper-warm);
        padding: 28px 24px;
      }
      .wf-flow__stage {
        flex: 1 1 0;
        min-width: 0;
        padding: 12px 8px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
      }
      .wf-flow__label {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.04em;
        color: var(--ink-mute);
        margin-bottom: 8px;
        text-transform: lowercase;
      }
      .wf-flow__name {
        font-family: var(--display);
        font-size: 16px;
        line-height: 1.25;
        color: var(--ink);
        font-weight: 400;
      }
      .wf-flow__connector {
        flex: 0 0 28px;
        position: relative;
        align-self: center;
        height: 1px;
        background: var(--line);
        margin: 0 4px;
      }
      .wf-flow__connector::after {
        content: "→";
        position: absolute;
        right: -10px;
        top: -10px;
        color: var(--accent);
        font-family: var(--mono);
        font-size: 13px;
      }
      .wf-flow__pulse {
        position: absolute;
        top: -2px;
        left: 0;
        width: 5px;
        height: 5px;
        background: var(--accent);
        border-radius: 0;
        animation: wf-pulse 2.6s linear infinite;
        opacity: 0;
      }
      .wf-flow__connector:nth-of-type(2) .wf-flow__pulse { animation-delay: 0.3s; }
      .wf-flow__connector:nth-of-type(4) .wf-flow__pulse { animation-delay: 0.6s; }
      .wf-flow__connector:nth-of-type(6) .wf-flow__pulse { animation-delay: 0.9s; }
      .wf-flow__connector:nth-of-type(8) .wf-flow__pulse { animation-delay: 1.2s; }
      .wf-flow__connector:nth-of-type(10) .wf-flow__pulse { animation-delay: 1.5s; }
      @keyframes wf-pulse {
        0%   { left: 0;   opacity: 0; }
        15%  { opacity: 1; }
        85%  { opacity: 1; }
        100% { left: 100%; opacity: 0; }
      }
      .wf-flow-caption {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.02em;
        margin: 0 0 36px;
        text-transform: lowercase;
      }

      /* === Workflow module cards — what we install, as cards instead of
         a flat list. Replaces a misuse of .feature-list on these pages.
         Two columns on desktop, one on mobile. Hover lifts the border to
         accent (no transform — restraint discipline). Same card pattern
         as .price-card on how-it-works. */
      .wf-modules {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 28px;
      }
      .wf-module {
        border: 1px solid var(--line);
        background: var(--paper-warm);
        padding: 26px 24px;
        transition: border-color 0.18s ease;
      }
      .wf-module:hover,
      .wf-module:focus-within {
        border-color: var(--accent);
      }
      .wf-module h3 {
        font-family: var(--display);
        font-size: 22px;
        font-weight: 400;
        letter-spacing: -0.01em;
        margin: 0 0 10px;
        line-height: 1.25;
      }
      .wf-module h3 em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
      }
      .wf-module p {
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink-soft);
        margin: 0;
        max-width: none;
      }

      @media (max-width: 880px) {
        .wf-flow {
          flex-direction: column;
          padding: 20px 18px;
        }
        .wf-flow__stage {
          padding: 10px 4px;
          text-align: left;
        }
        .wf-flow__connector {
          flex: 0 0 28px;
          width: 1px;
          height: auto;
          background: var(--line);
          align-self: center;
          margin: 0;
        }
        .wf-flow__connector::after {
          content: "↓";
          right: auto;
          left: -7px;
          top: auto;
          bottom: -10px;
        }
        .wf-flow__pulse {
          left: -2px;
          top: 0;
          animation-name: wf-pulse-vertical;
        }
        @keyframes wf-pulse-vertical {
          0%   { top: 0;    opacity: 0; }
          15%  { opacity: 1; }
          85%  { opacity: 1; }
          100% { top: 100%; opacity: 0; }
        }
        .wf-modules {
          grid-template-columns: 1fr;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .wf-flow__pulse {
          animation: none;
          opacity: 0;
        }
      }

      /* === Tier B: page-level visual chrome ===

         Three system-extending placements of the existing hero-art motif
         library on static brand surfaces (per DESIGN.md "Iconography"):

         .wf-hero-mark     — eyebrow-scale motif above page-hero headlines
                             on workflow detail pages and workflows index.
         .page-bg-host     — positioning context for an ambient background
                             motif placed at section edge.
         .page-bg-art      — the ambient background motif itself, large,
                             low-opacity, muted color, pointer-events: none.
         .how-section--*   — surface-rhythm wrappers for the how-it-works
                             page so each section can own a tone.
         .install-sequence — the new how-it-works section hosting the
                             5-stage install flow diagram (reuses .wf-flow). */

      .wf-hero-mark {
        display: block;
        width: 160px;
        height: 40px;
        margin-bottom: 22px;
        color: var(--ink);
      }
      .wf-hero-mark svg,
      .wf-hero-mark > use {
        width: 100%;
        height: 100%;
        display: block;
      }

      .page-bg-host {
        position: relative;
        overflow: hidden;
      }
      .page-bg-host > :not(.page-bg-art) {
        position: relative;
        z-index: 1;
      }
      .page-bg-art {
        position: absolute;
        top: 50%;
        right: -120px;
        transform: translateY(-50%);
        width: 720px;
        height: 360px;
        opacity: 0.1;
        color: var(--ink-mute);
        --accent: var(--ink-mute);
        pointer-events: none;
        z-index: 0;
      }

      .how-section {
        position: relative;
      }
      .how-section--install {
        background: var(--paper-warm);
      }
      .how-section--pricing {
        background: var(--paper-warm);
      }
      .how-section .hiw-hero {
        border-bottom: 0;
      }
      .how-section .pricing {
        border-top: 0;
      }
      .how-section .final-cta {
        border-top: 0;
      }

      .install-sequence {
        padding: 100px 0;
      }
      .install-sequence > .eyebrow {
        margin-bottom: 18px;
      }
      .install-sequence .section-title {
        margin-bottom: 18px;
      }
      .install-sequence > .lede {
        font-size: 18px;
        color: var(--ink-soft);
        max-width: 720px;
        margin-bottom: 8px;
      }
      .install-sequence .wf-flow {
        margin-top: 32px;
      }

      @media (max-width: 880px) {
        .wf-hero-mark {
          width: 140px;
          height: 36px;
          margin-bottom: 18px;
        }
        .page-bg-art {
          width: 480px;
          height: 240px;
          right: -100px;
          opacity: 0.08;
        }
        .install-sequence {
          padding: 60px 0;
        }
      }

      /* === Workflow outputs list — used in "What it produces" sections.
         Same visual register as .feature-list (arrow markers, hairline
         dividers) but the markup is bolded-name plus description text in
         a single inline run, which .feature-list's grid layout breaks
         (each grid item ends up on its own row). .wf-outputs uses block
         layout with an absolute-positioned ::before so the strong and
         the description text flow together as natural inline content. */
      .wf-outputs {
        list-style: none;
        padding: 0;
        margin: 28px 0 0;
        max-width: 760px;
      }
      .wf-outputs li {
        position: relative;
        padding: 14px 0 14px 30px;
        border-top: 1px solid var(--line);
        color: var(--ink);
        font-size: 16px;
        line-height: 1.6;
      }
      .wf-outputs li:last-child {
        border-bottom: 1px solid var(--line);
      }
      .wf-outputs li::before {
        content: "→";
        color: var(--accent);
        font-family: var(--mono);
        position: absolute;
        left: 0;
        top: 14px;
      }
      .wf-outputs li strong {
        color: var(--ink);
        font-weight: 500;
        margin-right: 2px;
      }

      /* === Workflows index — catalog page === */
      .wf-index .wf-tier {
        padding: 48px 0;
        border-top: 1px solid var(--line);
      }
      .wf-index .wf-tier:first-of-type {
        border-top: 0;
        padding-top: 24px;
      }
      .wf-index .wf-tier h2 {
        font-family: var(--display);
        font-size: clamp(28px, 4vw, 40px);
        font-weight: 400;
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin-bottom: 8px;
      }
      .wf-index .wf-tier h2 em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
      }
      .wf-index .wf-tier__frame {
        font-size: 16px;
        color: var(--ink-mute);
        margin: 0 0 20px;
        max-width: 640px;
        line-height: 1.5;
      }
      .wf-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .wf-list li {
        border-top: 1px solid var(--line);
      }
      .wf-list li:last-child {
        border-bottom: 1px solid var(--line);
      }
      .wf-list a {
        display: grid;
        grid-template-columns: 56px 1fr auto;
        gap: 24px;
        padding: 22px 0;
        align-items: baseline;
        text-decoration: none;
        color: inherit;
        transition: color 0.18s ease;
      }
      .wf-list a:hover {
        color: var(--accent);
      }
      .wf-list a:hover .arrow {
        transform: translateX(2px);
      }
      .wf-list .num {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink-mute);
        letter-spacing: 0.04em;
        padding-top: 4px;
      }
      .wf-list-content {
        min-width: 0;
      }
      .wf-list .name {
        display: block;
        font-family: var(--display);
        font-size: 22px;
        font-weight: 400;
        letter-spacing: -0.01em;
        line-height: 1.3;
      }
      .wf-list .name em {
        font-style: italic;
        color: var(--accent);
        font-weight: 400;
      }
      .wf-list .desc {
        display: block;
        font-size: 15px;
        color: var(--ink-mute);
        margin-top: 6px;
        line-height: 1.5;
      }
      .wf-list .arrow {
        font-family: var(--mono);
        color: var(--accent);
        font-size: 14px;
        transition: transform 0.18s ease;
      }

      @media (max-width: 880px) {
        .wf-page > .wrap {
          padding-top: 12px;
          padding-bottom: 80px;
        }
        .wf-page .hiw-hero {
          padding-top: 16px;
          padding-bottom: 40px;
        }
        .wf-section {
          padding: 40px 0;
        }
        .wf-meta__row {
          grid-template-columns: 1fr;
          gap: 4px;
        }
        .wf-list a {
          grid-template-columns: 36px 1fr;
          gap: 12px;
          padding: 18px 0;
        }
        .wf-list .arrow {
          display: none;
        }
        .wf-list .num {
          padding-top: 2px;
        }
      }