/* Delegate landing — shared stylesheet
   Extracted from frontend/public/landing/delegate-preview.html
   Sections: tokens · reset · primitives · keyframes · responsive
*/

  /* =================================================================
     TOKENS — Bricolage Grotesque (display, variable opsz/wdth/wght) +
     Geist (body, UI) + JetBrains Mono (labels). All free/OFL.
     --fr-* retain their names for legacy call-sites; Bricolage carries
     opsz (12..96), wdth (75..100), wght (200..800).
     ================================================================= */
  :root {
    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Bricolage Grotesque', 'Geist', sans-serif;
    --font-editorial: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --fr-masthead: 'opsz' 96, 'wdth' 90, 'wght' 600;
    --fr-hero: 'opsz' 96, 'wdth' 92, 'wght' 600;
    --fr-headline: 'opsz' 72, 'wdth' 94, 'wght' 600;
    --fr-title: 'opsz' 32, 'wdth' 96, 'wght' 600;
    --fr-body: 'opsz' 18, 'wdth' 100, 'wght' 500;

    --ink-950: #06060a;
    --ink-900: #0a0a10;
    --ink-850: #0d0d14;
    --ink-800: #11111a;
    --ink-700: #191924;
    --ink-600: #262634;
    --ink-500: #3a3a4a;
    --ink-400: #575769;
    --ink-300: #8a8aa0;
    --ink-200: #b8b8cb;
    --ink-100: #e2e2ec;
    --ink-50:  #f4f4f8;

    --accent: #7e5bff;
    --accent-2: #a88bff;
    --accent-ink: #ffffff;
    --accent-wash: rgba(126, 91, 255, 0.14);

    --signal: #f5b000;
    --signal-wash: rgba(245, 176, 0, 0.14);

    --success: #10b981;
    --danger: #ef4444;

    --glow: rgba(126, 91, 255, 0.20);
    --glow-signal: rgba(245, 176, 0, 0.28);

    --page-bg: var(--ink-950);
    --page-fg: var(--ink-100);
    --page-dim: var(--ink-400);
    --rule: rgba(255, 255, 255, 0.08);
    --rule-soft: rgba(255, 255, 255, 0.04);
    --rule-strong: rgba(255, 255, 255, 0.14);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    background: var(--page-bg);
    color: var(--page-fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 16% 6%, rgba(126, 91, 255, 0.08), transparent 48%),
      radial-gradient(circle at 86% 92%, rgba(245, 176, 0, 0.05), transparent 48%);
    z-index: 0;
  }

  main { position: relative; z-index: 1; }
  a { color: inherit; text-decoration: none; }

  /* =================================================================
     PREVIEW PAGE CHROME (this preview document itself)
     ================================================================= */
  .preview-header {
    max-width: 1520px;
    margin: 0 auto;
    padding: 88px 48px 56px;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--page-dim);
    margin-bottom: 28px;
  }
  .eyebrow .sect { color: var(--accent); }
  .eyebrow::after {
    content: '';
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--page-dim), transparent);
  }
  .preview-title {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-hero);
    font-size: clamp(52px, 6.5vw, 96px);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.03em;
    color: var(--ink-50);
    max-width: 1100px;
    margin-bottom: 24px;
  }
  .preview-title em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 72, 'wght' 600;
  }
  .preview-sub {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-200);
  }
  .preview-sub b { color: var(--ink-50); font-weight: 500; }

  .stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
  }
  .pill {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--rule);
    color: var(--ink-300);
  }
  .pill strong { color: var(--ink-50); font-weight: 500; }
  .pill.accent { border-color: rgba(126, 91, 255, 0.35); color: var(--accent-2); }
  .pill.signal { border-color: rgba(245, 176, 0, 0.28); color: var(--signal); }

  /* Preview section heads */
  .preview-section {
    max-width: 1520px;
    margin: 0 auto;
    padding: 40px 48px 80px;
  }
  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    padding: 56px 0 28px;
    border-top: 1px solid var(--rule);
  }
  .section-head .lead { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .section-idx {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-400);
    text-transform: uppercase;
  }
  .section-idx b { color: var(--accent); font-weight: 500; }
  .section-head h2 {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-headline);
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    max-width: 920px;
  }
  .section-head h2 em { font-style: italic; color: var(--accent-2); }
  .section-head p {
    font-size: 14px;
    color: var(--ink-300);
    max-width: 340px;
    line-height: 1.55;
    padding-top: 10px;
  }

  /* =================================================================
     THE NEWSPAPER — central artifact this preview is here to show
     (This is what visitors actually see at delegate.guru.)
     ================================================================= */
  .paper {
    position: relative;
    background:
      radial-gradient(70% 50% at 20% 0%, rgba(126, 91, 255, 0.04), transparent 60%),
      radial-gradient(50% 60% at 90% 100%, rgba(245, 176, 0, 0.025), transparent 70%),
      var(--ink-950);
    border: 1px solid var(--rule);
    border-radius: 22px;
    overflow: hidden;
    padding: 0;
  }
  .paper::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--accent) 18%,
      var(--accent-2) 52%,
      var(--signal) 84%,
      transparent 100%);
    z-index: 10;
  }

  /* === MASTHEAD === */
  .masthead {
    padding: 28px 64px 20px;
    border-bottom: 1px double var(--rule-strong);
    position: relative;
  }
  /* Compact masthead — no wordmark/tagline (used on use-case pages).
     Drop the bottom rules so the nav bar sits flush with the page body. */
  .masthead.compact {
    padding: 18px 64px;
    border-bottom: 0;
  }
  .masthead.compact .masthead-folio-top {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  @media (max-width: 1100px) { .masthead.compact { padding: 14px 32px; } }
  @media (max-width: 640px) { .masthead.compact { padding: 12px 20px; } }
  .masthead-folio-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 18px;
  }
  .masthead-folio-top b { color: var(--ink-200); font-weight: 500; }
  .masthead-folio-top .live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--signal);
  }
  .masthead-folio-top .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 currentColor; }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* Combined top bar: counter · dept-links · CTAs */
  .masthead-folio-top.live-banner {
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
  }
  .masthead-folio-top.live-banner .dept-links {
    display: flex;
    gap: 22px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    letter-spacing: 0.16em;
  }
  .masthead-folio-top.live-banner .dept-links a {
    color: var(--ink-300);
    transition: color 0.15s;
  }
  .masthead-folio-top.live-banner .dept-links a:hover { color: var(--accent-2); }
  .masthead-folio-top.live-banner .dept-links a.current {
    color: var(--ink-50);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
  }
  .masthead-folio-top.live-banner .live-banner-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .masthead-folio-top.live-banner .live-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(245, 176, 0, 0.35);
    border-radius: 999px;
    background: var(--signal-wash);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .masthead-folio-top.live-banner .live-banner-cta:hover {
    background: rgba(245, 176, 0, 0.22);
    border-color: rgba(245, 176, 0, 0.55);
  }
  .masthead-folio-top.live-banner .live-banner-ics {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-400);
    text-decoration: none;
    transition: color 0.18s ease, border-color 0.18s ease;
  }
  .masthead-folio-top.live-banner .live-banner-ics:hover {
    color: var(--ink-200);
    border-color: var(--ink-400);
  }

  .masthead-name {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-masthead);
    font-size: clamp(80px, 13vw, 200px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.84;
    color: var(--ink-50);
    text-align: center;
    margin: 8px 0 20px;
    position: relative;
  }
  .masthead-name .glyph {
    display: inline-block;
    color: var(--accent);
    font-style: italic;
    font-variation-settings: 'opsz' 72, 'wght' 600;
    font-weight: 400;
    transform: translateY(-6px);
  }

  .masthead-tagline {
    text-align: center;
    font-family: var(--font-sans);
    font-size: 19px;
    color: var(--ink-200);
    letter-spacing: -0.005em;
    padding: 10px 0 2px;
  }
  .masthead-tagline b { color: var(--ink-50); font-family: var(--font-serif); font-weight: 600; font-variation-settings: 'opsz' 32, 'wdth' 96, 'wght' 600; }

  .masthead-folio-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .masthead-folio-bottom .dept-links {
    display: flex;
    gap: 22px;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
  }
  .masthead-folio-bottom .dept-links a {
    color: var(--ink-300);
    transition: color 0.15s;
  }
  .masthead-folio-bottom .dept-links a:hover { color: var(--accent-2); }
  .masthead-folio-bottom .dept-links a.current {
    color: var(--ink-50);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
  }

  .subscribe-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px var(--glow);
    transition: transform 0.15s;
  }
  .subscribe-cta:hover { transform: translateY(-1px); }

  /* Secondary "Open App" button — outlined, sits next to the primary CTA */
  .masthead-folio-bottom .masthead-ctas {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .app-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(126, 91, 255, 0.35);
    background: rgba(126, 91, 255, 0.06);
    color: var(--accent-2);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .app-cta:hover {
    background: rgba(126, 91, 255, 0.14);
    border-color: rgba(126, 91, 255, 0.55);
    color: var(--ink-50);
  }

  /* Folio-bottom when it sits directly under the attention banner:
     the banner's bottom border already divides us, so drop ours. */
  .masthead-folio-bottom.under-banner {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 28px;
  }

  /* === PAPER INNER — single column, centered === */
  .paper-body {
    padding: 40px 64px;
    display: block;
  }
  .paper-main {
    max-width: 880px;
    margin: 0 auto;
  }
  @media (max-width: 1100px) {
    .masthead { padding: 24px 32px 18px; }
    .paper-body { padding: 32px 32px; }
    .masthead-folio-top.live-banner { gap: 14px; }
    .masthead-folio-top.live-banner .dept-links { gap: 16px; }
  }
  /* Tablet · dept-links drops to its own row below counter + CTAs */
  @media (max-width: 900px) {
    .masthead-folio-top.live-banner .dept-links {
      flex-basis: 100%;
      order: 3;
      justify-content: center;
      padding-top: 12px;
      margin-top: 4px;
      border-top: 1px solid var(--rule);
      gap: 14px 18px;
    }
  }
  /* Mobile · every block gets its own full-width row, center-aligned */
  @media (max-width: 640px) {
    .masthead { padding: 20px 20px 14px; }
    .paper-body { padding: 24px 20px; }
    .masthead-folio-top.live-banner {
      gap: 12px;
      justify-content: center;
      padding-bottom: 14px;
      margin-bottom: 14px;
    }
    .masthead-folio-top.live-banner .live-indicator,
    .masthead-folio-top.live-banner .live-banner-actions {
      flex-basis: 100%;
      justify-content: center;
    }
    .masthead-folio-top.live-banner .live-banner-actions {
      flex-wrap: wrap;
      gap: 8px;
    }
    .masthead-folio-top.live-banner .dept-links {
      gap: 10px 14px;
      font-size: 10px;
    }
    .masthead-folio-top.live-banner .live-banner-cta {
      padding: 7px 12px;
    }
  }

  /* === THE LEAD STORY === */
  .lead-story {
    padding-bottom: 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 40px;
  }
  .kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .kicker::before {
    content: '§';
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    color: var(--accent);
    letter-spacing: 0;
  }
  .kicker .tag {
    color: var(--ink-400);
    padding-left: 10px;
    border-left: 1px solid var(--rule);
  }

  .lead-headline {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-hero);
    font-size: clamp(48px, 6vw, 92px);
    line-height: 0.96;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--ink-50);
    margin-bottom: 20px;
    max-width: 1000px;
  }
  .lead-headline em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: 'opsz' 72, 'wght' 600;
  }

  .lead-deck {
    font-family: var(--font-sans);
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.55;
    letter-spacing: -0.012em;
    color: var(--ink-200);
    max-width: 68ch;
    margin-bottom: 28px;
  }
  .lead-deck b { color: var(--ink-50); font-weight: 600; }
  .lead-deck em { color: var(--accent-2); font-style: italic; font-weight: 500; }

  .byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 18px;
    margin-bottom: 28px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-wrap: wrap;
  }
  .byline b { color: var(--ink-100); font-weight: 500; }
  .byline .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--ink-500);
  }

  /* Single-column long-form body — optimized for reading flow */
  .lead-body {
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-100);
    letter-spacing: -0.002em;
    max-width: 68ch;
  }
  .lead-body p { margin-bottom: 1.1em; }
  .lead-body p b { color: var(--ink-50); font-weight: 600; }
  .lead-body p em { color: var(--accent-2); font-style: italic; font-weight: 500; }

  /* Drop cap — first letter of lead body */
  .lead-body p.first::first-letter {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 96, 'wdth' 85, 'wght' 700;
    font-size: 84px;
    line-height: 0.85;
    float: left;
    margin: 8px 12px 0 -2px;
    color: var(--accent);
  }

  /* Pull quote inline in a column */
  .pull-quote {
    padding: 22px 24px 22px 28px;
    margin: 10px 0 14px;
    border-left: 2px solid var(--accent);
    background: linear-gradient(90deg, var(--accent-wash), transparent);
    break-inside: avoid-column;
  }
  .pull-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.35;
    color: var(--ink-50);
    letter-spacing: -0.01em;
    margin-bottom: 12px !important;
  }
  .pull-quote .src {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 0 !important;
  }
  .pull-quote .src b { color: var(--ink-200); font-weight: 500; }

  /* JUMP line ("continued in...") */
  .jumpline {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    margin-top: 18px;
    display: inline-block;
  }
  .jumpline::after { content: ' →'; }

  /* =================================================================
     § ASK ADA — the signature primitive. An editor's note that
     talks back. Embedded in the column flow like a pull quote.
     ================================================================= */
  .ada-prompt {
    position: relative;
    display: block;
    padding: 20px 22px 20px 26px;
    margin: 16px 0 22px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--ink-900)), var(--ink-900));
    border: 1px solid rgba(126, 91, 255, 0.28);
    border-radius: 2px;
    border-left: 3px solid var(--accent);
    cursor: pointer;
    break-inside: avoid-column;
    transition: border-color 0.15s, background 0.2s, transform 0.18s;
    overflow: hidden;
  }
  .ada-prompt::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 72px; height: 72px;
    background: radial-gradient(circle at top right, var(--glow), transparent 70%);
    opacity: 0.7;
    pointer-events: none;
  }
  .ada-prompt:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--ink-900)), var(--ink-900));
    transform: translateY(-1px);
  }

  .ada-prompt .ada-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
  }
  .ada-prompt .ada-label::before {
    content: '§';
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--accent);
    letter-spacing: 0;
  }
  .ada-prompt .ada-label .avatar {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--accent-ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    font-weight: 500;
    margin-left: 2px;
  }
  .ada-prompt q {
    display: block;
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-title);
    font-style: italic;
    font-size: clamp(20px, 1.9vw, 26px);
    line-height: 1.25;
    color: var(--ink-50);
    font-weight: 400;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    quotes: none;
  }
  .ada-prompt q::before { content: '' !important; }
  .ada-prompt q::after { content: '' !important; }

  .ada-prompt .ada-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .ada-prompt .ada-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-400);
  }
  .ada-prompt .ada-status .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2.4s infinite;
  }
  .ada-prompt .ada-status b { color: var(--ink-200); font-weight: 500; }
  .ada-prompt .ada-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-2);
    font-weight: 500;
    letter-spacing: 0.14em;
  }
  .ada-prompt:hover .ada-go { color: var(--ink-50); }

  /* Ada prompt — sidebar variant (right rail) */
  .ada-prompt.rail {
    margin: 0 0 16px 0;
    padding: 22px 22px 20px;
    background: linear-gradient(160deg, var(--ink-900), var(--ink-850));
  }
  .ada-prompt.rail q { font-size: clamp(20px, 1.7vw, 24px); }

  /* Ada prompt — cluster (3 stacked) */
  .ada-cluster {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 2px;
    position: relative;
  }
  .ada-cluster-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ada-cluster-label b { color: var(--ink-50); font-weight: 500; }
  .ada-cluster-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.15s;
  }
  .ada-cluster-item:last-child { border-bottom: none; }
  .ada-cluster-item:hover { background: var(--accent-wash); }
  .ada-cluster-item .q {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.3;
    color: var(--ink-100);
    letter-spacing: -0.005em;
  }
  .ada-cluster-item .arrow {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--accent);
    flex-shrink: 0;
    padding-top: 2px;
  }

  /* =================================================================
     SUB-LEADS — three-column grid of persona-opener stories
     ================================================================= */
  .sub-leads {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  @media (max-width: 1100px) {
    .sub-leads { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .sub-leads { grid-template-columns: 1fr; gap: 32px; }
  }
  .sub-story {
    padding: 0 0 4px;
    position: relative;
  }
  .sub-story:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    right: -20px;
    width: 1px;
    background: var(--rule);
  }
  @media (max-width: 1100px) {
    .sub-story::after { display: none; }
  }
  .sub-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
  }
  .sub-head {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-title);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    margin-bottom: 14px;
  }
  .sub-head em { font-style: italic; color: var(--accent-2); }
  .sub-deck {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink-100);
    margin-bottom: 16px;
  }
  .sub-deck b { color: var(--ink-50); font-weight: 600; }
  .sub-byline {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .sub-byline b { color: var(--ink-200); font-weight: 500; }
  .sub-byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-500); }
  .sub-byline a { color: var(--accent-2); }

  /* =================================================================
     PRODUCT SURFACES — three real product cards with screenshot slots
     ================================================================= */
  .product-surfaces { padding-bottom: 56px; }
  .product-surface { padding-right: 0; }
  .product-surface .sub-head { font-size: 28px; margin-bottom: 12px; }
  .product-surface .sub-deck { margin-bottom: 18px; }
  .product-surface.signal .sub-kicker { color: var(--signal); }

  .ps-screen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(126, 91, 255, 0.07), rgba(168, 139, 255, 0.04) 50%, rgba(245, 176, 0, 0.04)),
      var(--ink-900);
    border: 1px solid var(--rule-strong);
    overflow: hidden;
    background-size: cover;
    background-position: top center;
  }
  .ps-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(transparent 0%, transparent 50%, rgba(126,91,255,0.04) 100%),
      repeating-linear-gradient(90deg, transparent 0 24px, rgba(255,255,255,0.025) 24px 25px),
      repeating-linear-gradient(0deg, transparent 0 24px, rgba(255,255,255,0.025) 24px 25px);
    pointer-events: none;
  }
  .ps-screen[data-screenshot] { background-image: none; }
  .ps-screen[data-screenshot]::before { display: none; }
  .product-surface.signal .ps-screen {
    background:
      linear-gradient(135deg, rgba(245, 176, 0, 0.10), rgba(126, 91, 255, 0.06)),
      var(--ink-900);
    border-color: rgba(245, 176, 0, 0.25);
  }

  .ps-screen-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-300);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
  }
  .ps-screen-label code {
    font-family: var(--font-mono);
    color: var(--accent-2);
    letter-spacing: 0;
    text-transform: none;
  }

  /* =================================================================
     CONNECTORS — real integrations row
     ================================================================= */
  .connectors-strip { padding: 8px 0 48px; }
  .connectors-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
  }
  .connector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--rule-strong);
    background: rgba(255,255,255,0.02);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-200);
    transition: border-color 0.18s ease, color 0.18s ease;
  }
  .connector b { color: var(--ink-50); font-weight: 600; letter-spacing: 0; text-transform: none; font-family: var(--font-sans); font-size: 13px; }
  .connector:hover { border-color: var(--accent-2); color: var(--ink-100); }

  /* =================================================================
     DEPARTMENTS — six pillars as newspaper departments
     ================================================================= */
  .dept-strip {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .dept-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px double var(--rule-strong);
  }
  .dept-strip-head h3 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 60, 'wght' 500;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
  }
  .dept-strip-head h3 em { font-style: italic; color: var(--accent); }
  .dept-strip-head .meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }

  .dept-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .dept-cell {
    padding: 28px 24px 24px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .dept-cell:nth-child(3n) { border-right: none; }
  .dept-cell:nth-last-child(-n+3) { border-bottom: none; }
  @media (max-width: 900px) {
    .dept-grid { grid-template-columns: 1fr 1fr; }
    .dept-cell { border-right: 1px solid var(--rule); }
    .dept-cell:nth-child(3n) { border-right: 1px solid var(--rule); }
    .dept-cell:nth-child(2n) { border-right: none; }
  }
  @media (max-width: 600px) {
    .dept-grid { grid-template-columns: 1fr; }
    .dept-cell, .dept-cell:nth-child(3n), .dept-cell:nth-child(2n) { border-right: none; }
  }
  .dept-mark {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
  }
  .dept-cell h4 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 32, 'wght' 500;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .dept-cell h4 em { font-style: italic; color: var(--accent-2); }
  .dept-cell p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-300);
  }
  .dept-cell .more {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-2);
  }
  .dept-cell .more::after { content: ' →'; }

  /* =================================================================
     THE DEMO — product mockup + two CTA cards
     Placed between Departments and Schedule. The mockup reads as a
     real app screenshot; the two cards below are "tour it" or "launch it".
     ================================================================= */
  .demo-strip {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }

  /* The product mockup frame */
  .demo-frame {
    position: relative;
    margin: 20px 0 28px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ink-850);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.75);
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .demo-frame:hover {
    transform: translateY(-2px);
    box-shadow: 0 52px 120px -40px rgba(0, 0, 0, 0.85);
  }

  /* Browser chrome */
  .demo-browser {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--ink-800);
    border-bottom: 1px solid var(--rule);
  }
  .demo-traffic { display: inline-flex; gap: 6px; flex-shrink: 0; }
  .demo-traffic i {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #3a3a44;
  }
  .demo-traffic i:nth-child(1) { background: #ef4444; opacity: 0.7; }
  .demo-traffic i:nth-child(2) { background: #f5b000; opacity: 0.7; }
  .demo-traffic i:nth-child(3) { background: #10b981; opacity: 0.7; }
  .demo-url {
    flex: 1;
    padding: 5px 12px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-300);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .demo-url b { color: var(--ink-100); font-weight: 500; }
  .demo-url .lock {
    color: var(--success);
    font-size: 11px;
    flex-shrink: 0;
  }
  .demo-tour-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
    box-shadow: 0 3px 10px var(--glow);
  }
  .demo-tour-badge .d {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 2s infinite;
  }

  /* App layout */
  .demo-app {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 420px;
  }

  /* Sidebar */
  .demo-sidebar {
    background: var(--ink-900);
    padding: 16px 12px;
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .demo-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
  }
  .demo-brand-mark {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 2px 8px var(--glow);
  }
  .demo-brand-name {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    font-weight: 500;
  }
  .demo-brand-live {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    margin-left: auto;
    animation: pulse 2.4s infinite;
  }
  .demo-sb-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .demo-sb-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-500);
    padding: 0 8px 4px;
  }
  .demo-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--ink-300);
    letter-spacing: -0.005em;
    border-left: 2px solid transparent;
    margin-left: -2px;
    padding-left: 6px;
  }
  .demo-nav.active {
    background: var(--accent-wash);
    color: var(--ink-50);
    border-left-color: var(--accent);
    font-weight: 500;
  }
  .demo-nav-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ink-800);
    color: var(--ink-300);
  }
  .demo-nav-badge.signal {
    background: var(--signal);
    color: var(--ink-950);
    font-weight: 600;
  }
  .demo-emp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
  }
  .demo-ev {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
  }
  .demo-en { color: var(--ink-100); font-weight: 500; letter-spacing: -0.005em; }
  .demo-sh {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .demo-emp-pulse {
    margin-left: auto;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2.4s infinite;
    flex-shrink: 0;
  }

  /* Main panel */
  .demo-main {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--ink-900);
    min-width: 0;
  }
  .demo-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .demo-greeting {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 32, 'wght' 500;
    font-size: 22px;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    font-weight: 400;
    line-height: 1.08;
  }
  .demo-greeting em { color: var(--accent-2); font-style: italic; }
  .demo-datetime {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .demo-card {
    padding: 12px 14px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 8px;
  }
  .demo-card.live { border-left: 2px solid var(--signal); }
  .demo-card.accent { border-left: 2px solid var(--accent); }
  .demo-ce {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .demo-ce .d {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }
  .demo-ce .d.accent { background: var(--accent); }
  .demo-ce b { color: var(--ink-200); font-weight: 500; }
  .demo-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .demo-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 14px;
  }
  .demo-kpi + .demo-kpi { padding-left: 14px; border-left: 1px solid var(--rule); }
  .demo-kn {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink-50);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .demo-kn.signal { color: var(--signal); }
  .demo-kl {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .demo-wf-title {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--ink-50);
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .demo-wf-title em { font-style: italic; color: var(--accent-2); }
  .demo-wf-steps {
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .demo-wf-step {
    flex: 1;
    padding: 5px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 4px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    color: var(--ink-400);
  }
  .demo-wf-step.done {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.06);
  }
  .demo-wf-step.now {
    color: var(--signal);
    border-color: rgba(245, 176, 0, 0.45);
    background: rgba(245, 176, 0, 0.08);
    box-shadow: 0 0 0 2px rgba(245, 176, 0, 0.15);
  }
  .demo-wf-arrow { color: var(--ink-500); font-size: 10px; padding: 0 2px; }
  .demo-sc-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 12px;
  }
  .demo-sc-row:last-child { border-bottom: none; }
  .demo-sc-k {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--accent-2);
    font-weight: 500;
    font-variant: small-caps;
  }
  .demo-sc-v {
    font-size: 12px;
    color: var(--ink-200);
  }
  .demo-sc-v b { font-family: var(--font-mono); color: var(--ink-50); font-weight: 500; }
  .demo-sc-delta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--success);
  }

  /* "Click anywhere" overlay hint */
  .demo-overlay {
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(6, 6, 10, 0.88);
    border: 1px solid var(--rule-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--ink-200);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 10;
    pointer-events: none;
  }
  .demo-overlay .ada-sigil { width: 22px !important; height: 22px !important; }
  .demo-overlay .cta {
    color: var(--accent-2);
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  /* CTA cards below the mockup */
  .demo-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
  }
  @media (max-width: 720px) { .demo-ctas { grid-template-columns: 1fr; } }

  .demo-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 24px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .demo-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
  }
  .demo-cta.wizard::before { background: var(--signal); }
  .demo-cta:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--accent) 4%, var(--ink-900));
  }
  .demo-cta.wizard:hover {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 4%, var(--ink-900));
  }
  .demo-cta-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .demo-cta-label { color: var(--accent); }
  .demo-cta.wizard .demo-cta-label { color: var(--signal); }
  .demo-cta-meta { color: var(--ink-400); }
  .demo-cta h4 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 60, 'wght' 500;
    font-size: clamp(26px, 2.5vw, 34px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    line-height: 1.05;
    margin: 2px 0 4px;
  }
  .demo-cta h4 em { font-style: italic; color: var(--accent-2); }
  .demo-cta.wizard h4 em { color: var(--signal); }
  .demo-cta p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-300);
    margin-bottom: 10px;
  }
  .demo-cta p b { color: var(--ink-100); font-weight: 500; }
  .demo-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.005em;
    align-self: flex-start;
    margin-top: auto;
    box-shadow: 0 4px 14px var(--glow);
    transition: transform 0.15s;
  }
  .demo-cta-btn.signal {
    background: var(--signal);
    color: var(--ink-950);
    box-shadow: 0 4px 14px var(--glow-signal);
  }
  .demo-cta-btn svg { width: 13px; height: 13px; }
  .demo-cta:hover .demo-cta-btn { transform: translateX(2px); }

  @media (max-width: 720px) {
    .demo-app { grid-template-columns: 1fr; min-height: 0; }
    .demo-sidebar { border-right: none; border-bottom: 1px solid var(--rule); flex-direction: row; gap: 10px; overflow-x: auto; padding: 12px; }
    .demo-brand-row { padding-bottom: 0; border-bottom: none; margin-right: 8px; flex-shrink: 0; }
    .demo-sb-section { flex-direction: row; gap: 6px; }
    .demo-sb-label { display: none; }
    .demo-overlay { left: 16px; right: 16px; transform: none; font-size: 10px; padding: 7px 12px; }
  }

  /* =================================================================
     THE SCHEDULE — Office Hours in TV-listings / classifieds format
     ================================================================= */
  .schedule-strip {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .schedule-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
  }
  .schedule-table th {
    text-align: left;
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    border-bottom: 1px solid var(--rule-strong);
    font-weight: 500;
  }
  .schedule-table td {
    padding: 18px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    font-size: 14px;
    color: var(--ink-200);
  }
  .schedule-table tr:hover td { background: rgba(126, 91, 255, 0.04); }
  .schedule-table tr:last-child td { border-bottom: none; }
  .sched-date {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-50);
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .sched-date b {
    color: var(--accent-2);
    font-weight: 500;
  }
  .sched-title {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 400;
    color: var(--ink-50);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .sched-title em { font-style: italic; color: var(--accent-2); }
  .sched-desc {
    font-size: 13px;
    color: var(--ink-300);
    line-height: 1.5;
  }
  .sched-host {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-300);
    letter-spacing: 0.04em;
  }
  .sched-host b { color: var(--ink-100); font-weight: 500; }
  .sched-seats {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
  }
  .sched-seats.open { background: rgba(126, 91, 255, 0.14); color: var(--accent-2); border: 1px solid rgba(126, 91, 255, 0.3); }
  .sched-seats.almost { background: rgba(245, 176, 0, 0.14); color: var(--signal); border: 1px solid rgba(245, 176, 0, 0.3); }
  .sched-seats.full { background: rgba(255, 255, 255, 0.04); color: var(--ink-400); border: 1px solid var(--rule); }
  .sched-book {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent);
    white-space: nowrap;
  }
  .sched-book::after { content: ' →'; }

  /* =================================================================
     LETTERS — testimonials as editorial letters
     ================================================================= */
  .letters-strip {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .letters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 16px;
  }
  @media (max-width: 1100px) { .letters-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .letters-grid { grid-template-columns: 1fr; } }
  .letter {
    padding: 24px 24px 22px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--ink-900);
    position: relative;
  }
  .letter-head {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
  }
  .letter-body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-100);
    letter-spacing: -0.005em;
    margin-bottom: 18px;
  }
  .letter-body em { color: var(--accent-2); font-style: italic; font-weight: 500; }
  .letter-sig {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }
  .letter-sig .av {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f472b6, #ec4899);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    flex-shrink: 0;
  }
  .letter-sig .av.b { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
  .letter-sig .av.c { background: linear-gradient(135deg, #fb923c, #f97316); }
  .letter-sig .meta {
    display: flex; flex-direction: column; gap: 2px;
  }
  .letter-sig .n {
    font-size: 13px;
    color: var(--ink-50);
    font-weight: 500;
  }
  .letter-sig .r {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }

  /* =================================================================
     FIELD NOTES — dense recent-sessions stream
     ================================================================= */
  .field-notes {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .field-list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    border-top: 1px solid var(--rule);
  }
  .field-item {
    display: grid;
    grid-template-columns: 90px 1fr 1fr auto;
    gap: 24px;
    padding: 20px 8px;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    transition: background 0.15s;
  }
  .field-item:hover { background: rgba(126, 91, 255, 0.04); }
  @media (max-width: 900px) {
    .field-item { grid-template-columns: 1fr; gap: 6px; }
  }
  .field-date {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .field-date b { color: var(--accent-2); font-weight: 500; }
  .field-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink-50);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .field-title em { font-style: italic; color: var(--accent-2); }
  .field-outcome {
    font-size: 13.5px;
    color: var(--ink-300);
    line-height: 1.5;
  }
  .field-outcome b { color: var(--ink-100); font-weight: 500; }
  .field-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    white-space: nowrap;
  }
  .field-meta b { color: var(--accent); font-weight: 500; }

  /* =================================================================
     COMMONS POINTER — small card in the paper pointing to /community.
     Replaces the embedded community-strip; full page lives elsewhere.
     ================================================================= */
  .commons-pointer {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .commons-pointer-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 22px 26px;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    background:
      radial-gradient(60% 70% at 100% 0%, rgba(126, 91, 255, 0.06), transparent 70%),
      var(--ink-900);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    position: relative;
    margin-top: 20px;
  }
  .commons-pointer-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  .commons-pointer-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
  }
  @media (max-width: 720px) {
    .commons-pointer-card { grid-template-columns: 1fr; gap: 18px; }
  }
  .cp-left { min-width: 0; }
  .cp-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
  }
  .commons-pointer-card h4 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 32, 'wght' 500;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .commons-pointer-card h4 em { font-style: italic; color: var(--accent-2); }
  .commons-pointer-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-300);
    max-width: 62ch;
    margin-bottom: 14px;
  }
  .commons-pointer-card p b {
    color: var(--ink-50);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
  }
  .cp-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-wrap: wrap;
  }
  .cp-stats b { color: var(--ink-100); font-weight: 500; }
  .cp-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-500); }
  .cp-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    flex-shrink: 0;
  }
  @media (max-width: 720px) {
    .cp-right { align-items: flex-start; }
  }
  .cp-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.005em;
    box-shadow: 0 4px 14px var(--glow);
    transition: transform 0.15s;
    white-space: nowrap;
  }
  .commons-pointer-card:hover .cp-go { transform: translateX(2px); }
  .cp-go svg { width: 13px; height: 13px; }
  .cp-faces { display: flex; align-items: center; }

  /* =================================================================
     THE COMMONS — public-chat mockup + community join CTAs.
     Now lives on its own preview section (§ 05).
     ================================================================= */
  .community-strip {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }

  .community-thread {
    position: relative;
    margin: 20px 0 28px;
    border-radius: 12px;
    background: var(--ink-900);
    border: 1px solid var(--rule-strong);
    overflow: hidden;
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.7);
  }
  .community-thread::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 20%, var(--accent-2) 60%, var(--signal) 95%);
  }

  .community-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--ink-850);
    border-bottom: 1px solid var(--rule);
    gap: 16px;
    flex-wrap: wrap;
  }
  .community-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .community-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    flex-shrink: 0;
    box-shadow: 0 3px 10px var(--glow);
  }
  .community-name {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    font-weight: 500;
    line-height: 1.1;
  }
  .community-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .community-sub .d {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }
  .community-sub b { color: var(--ink-100); font-weight: 500; }

  .community-participants {
    display: flex;
    align-items: center;
  }
  .p-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--ink-850);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    font-weight: 500;
    margin-left: -8px;
  }
  .p-av:first-child { margin-left: 0; }
  .p-av.c1 { background: linear-gradient(135deg, #f472b6, #ec4899); }
  .p-av.c2 { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .p-av.c3 { background: linear-gradient(135deg, var(--signal), #fb923c); color: var(--ink-950); }
  .p-av.c4 { background: linear-gradient(135deg, #34d399, #10b981); }
  .p-av.c5 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
  .p-av.more {
    background: var(--ink-900);
    border-color: var(--ink-700);
    color: var(--ink-300);
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0 2px;
  }

  .community-messages {
    padding: 18px 18px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--ink-900);
  }

  .c-msg {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: start;
  }
  .c-av {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
  }
  .c-av.c1 { background: linear-gradient(135deg, #f472b6, #ec4899); }
  .c-av.c2 { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .c-av.c3 { background: linear-gradient(135deg, var(--signal), #fb923c); color: var(--ink-950); }
  .c-av.c4 { background: linear-gradient(135deg, #34d399, #10b981); }
  .c-av.c5 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }

  .c-body { min-width: 0; }
  .c-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .c-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .c-name.c1 { color: #f472b6; }
  .c-name.c2 { color: var(--accent-2); }
  .c-name.c3 { color: var(--signal); }
  .c-name.c4 { color: #34d399; }
  .c-name.c5 { color: #60a5fa; }
  .c-role {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--ink-850);
  }
  .c-role.ai {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 600;
  }
  .c-role.team {
    color: var(--signal);
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border: 1px solid rgba(245, 176, 0, 0.28);
  }
  .c-time {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-500);
    letter-spacing: 0.04em;
  }
  .c-bub {
    padding: 10px 14px;
    background: var(--ink-850);
    border: 1px solid var(--rule-soft);
    border-radius: 12px;
    border-top-left-radius: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-100);
    letter-spacing: -0.005em;
    max-width: 92%;
  }
  .c-bub b { color: var(--accent-2); font-weight: 500; }
  .c-bub code {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--ink-900);
    color: var(--ink-50);
    border: 1px solid var(--rule);
  }
  .c-msg.agent .c-bub {
    background: color-mix(in srgb, var(--accent) 6%, var(--ink-850));
    border-color: rgba(126, 91, 255, 0.25);
  }
  .c-msg.self .c-bub {
    background: color-mix(in srgb, #60a5fa 4%, var(--ink-850));
    border-color: rgba(96, 165, 250, 0.22);
  }
  .c-typing {
    display: inline-flex;
    gap: 4px;
    padding: 14px 14px;
  }
  .c-typing i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ink-400);
    animation: bob 1.2s ease-in-out infinite;
  }
  .c-typing i:nth-child(2) { animation-delay: 0.15s; }
  .c-typing i:nth-child(3) { animation-delay: 0.3s; }

  .community-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    background: var(--ink-850);
    border-top: 1px solid var(--rule);
  }
  .community-composer .c-composer-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
  }
  .community-composer input {
    flex: 1;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink-50);
    outline: none;
    letter-spacing: -0.005em;
  }
  .community-composer input:focus { border-color: var(--accent); }
  .community-composer input::placeholder { color: var(--ink-400); font-family: var(--font-editorial); font-style: italic; font-size: 14px; }
  .community-composer .send {
    padding: 9px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px var(--glow);
    transition: transform 0.15s;
  }
  .community-composer .send:hover { transform: translateY(-1px); }
  .community-composer .send svg { width: 12px; height: 12px; }

  /* 3 CTA cards below the mockup */
  .community-ctas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 4px;
  }
  @media (max-width: 820px) { .community-ctas { grid-template-columns: 1fr; } }

  /* Community page — chat hero left, Telegram+Discord invites right */
  .community-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
  }
  .community-layout .community-thread { margin: 0; }
  .community-invites {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 18px;
  }
  .community-invites .ci-head {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 4px;
  }
  @media (max-width: 1100px) {
    .community-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }
  }
  @media (max-width: 900px) {
    .community-layout { grid-template-columns: 1fr; gap: 24px; }
    .community-invites {
      position: static;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .community-invites .ci-head { flex-basis: 100%; }
    .community-invites .comm-cta { flex: 1 1 260px; }
  }
  @media (max-width: 640px) {
    .community-invites { flex-direction: column; }
  }

  .comm-cta {
    display: flex;
    flex-direction: column;
    padding: 22px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 2px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .comm-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
  }
  .comm-cta.drop-in::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .comm-cta.telegram::before { background: #229ED9; }
  .comm-cta.discord::before  { background: #5865F2; }
  .comm-cta:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.02);
  }
  .comm-cta.drop-in:hover  { border-color: var(--accent); }
  .comm-cta.telegram:hover { border-color: #229ED9; }
  .comm-cta.discord:hover  { border-color: #5865F2; }

  .comm-cta-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .comm-cta.drop-in .comm-cta-head { color: var(--accent-2); }
  .comm-cta.telegram .comm-cta-head { color: #58b6e4; }
  .comm-cta.discord .comm-cta-head { color: #8b95f5; }

  .comm-logo {
    width: 20px; height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .comm-logo svg { width: 18px; height: 18px; }

  .comm-cta h4 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 32, 'wght' 500;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    line-height: 1.05;
    margin-bottom: 8px;
  }
  .comm-cta h4 em { font-style: italic; color: var(--accent-2); }
  .comm-cta.telegram h4 em { color: #58b6e4; }
  .comm-cta.discord h4 em { color: #8b95f5; }
  .comm-cta p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-300);
    margin-bottom: 12px;
  }
  .comm-cta p b { color: var(--ink-100); font-weight: 500; }
  .comm-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    align-self: flex-start;
    margin-top: auto;
  }
  .comm-cta.drop-in .comm-cta-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 3px 10px var(--glow);
  }
  .comm-cta.telegram .comm-cta-btn { background: #229ED9; color: #fff; }
  .comm-cta.discord .comm-cta-btn  { background: #5865F2; color: #fff; }
  .comm-cta-btn svg { width: 12px; height: 12px; }
  .comm-cta:hover .comm-cta-btn { transform: translateX(2px); transition: transform 0.15s; }

  .comm-cta-foot {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--rule);
  }
  .comm-cta-foot b { color: var(--ink-100); font-weight: 500; }

  /* =================================================================
     FAQ — editorial Q&A
     ================================================================= */
  .faq-strip {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
  .faq-item {
    padding: 28px 28px 28px 0;
    border-bottom: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }
  .faq-item:nth-child(even) { padding-left: 28px; padding-right: 0; border-right: none; }
  @media (max-width: 900px) {
    .faq-item, .faq-item:nth-child(even) { padding: 24px 0; border-right: none; }
  }
  .faq-q {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 32, 'wght' 500;
    font-style: italic;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink-50);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    position: relative;
    padding-left: 34px;
  }
  .faq-q::before {
    content: 'Q.';
    position: absolute;
    left: 0; top: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.08em;
  }
  .faq-a {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink-100);
    padding-left: 34px;
    position: relative;
  }
  .faq-a::before {
    content: 'A.';
    position: absolute;
    left: 0; top: 0;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-400);
    letter-spacing: 0.08em;
  }
  .faq-a b { color: var(--ink-50); font-weight: 600; }
  .faq-a em { color: var(--accent-2); font-style: italic; font-weight: 500; }

  /* =================================================================
     CLASSIFIEDS — pricing, community, contact as dense block
     ================================================================= */
  .classifieds {
    padding: 8px 0 0;
    border-top: 3px double var(--rule-strong);
    margin-top: 8px;
  }
  .classifieds-head {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 60, 'wght' 500;
    font-style: italic;
    font-size: 36px;
    font-weight: 400;
    color: var(--ink-50);
    padding: 24px 0;
    letter-spacing: -0.015em;
    text-align: center;
  }
  .classified-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
  }
  @media (max-width: 900px) { .classified-cols { grid-template-columns: 1fr; } }
  .classified-col {
    padding: 24px 28px;
    border-right: 1px solid var(--rule);
  }
  .classified-col:last-child { border-right: none; }
  @media (max-width: 900px) { .classified-col { border-right: none; border-bottom: 1px solid var(--rule); } }
  .classified-col h5 {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .classified-col dl { display: grid; grid-template-columns: 1fr; gap: 0; }
  .classified-col dt {
    font-family: var(--font-serif);
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink-50);
    margin-top: 14px;
    margin-bottom: 4px;
  }
  .classified-col dt:first-child { margin-top: 0; }
  .classified-col dt em { font-style: italic; color: var(--accent-2); }
  .classified-col dd {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-300);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
  }
  .classified-col dd:last-of-type { border-bottom: none; padding-bottom: 0; }
  .classified-col dd b { color: var(--ink-100); font-weight: 500; }
  .classified-col dd .price {
    font-family: var(--font-mono);
    color: var(--ink-50);
    font-weight: 500;
    font-size: 13px;
  }
  .classified-col dd .price em { font-style: normal; color: var(--accent); }

  /* =================================================================
     RIGHT RAIL (secondary column in paper-body grid)
     ================================================================= */
  .rail {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-self: start;
    position: sticky;
    top: 24px;
  }
  @media (max-width: 1100px) {
    .rail { position: static; }
  }
  .rail-block {
    padding-top: 18px;
    border-top: 2px solid var(--rule-strong);
  }
  .rail-head {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rail-head b { color: var(--ink-100); font-weight: 500; }
  .rail-head .see-all {
    color: var(--accent-2);
    letter-spacing: 0.14em;
  }
  .rail-head .see-all::after { content: ' →'; }

  /* Live now card — amber */
  .live-now {
    padding: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 5%, var(--ink-900)), var(--ink-900));
    border: 1px solid rgba(245, 176, 0, 0.2);
    border-left: 3px solid var(--signal);
    border-radius: 2px;
  }
  .live-now .lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 12px;
  }
  .live-now .lbl .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }
  .live-now h5 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--ink-50);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .live-now h5 em { font-style: italic; color: var(--signal); }
  .live-now p {
    font-size: 13px;
    color: var(--ink-300);
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .live-now .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
  }
  .live-now .stat .n {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--ink-50);
    letter-spacing: -0.01em;
  }
  .live-now .stat .l {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-top: 3px;
  }

  /* Weather / status metric */
  .index-block {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink-300);
    line-height: 1.7;
    letter-spacing: 0.03em;
  }
  .index-block .row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule);
  }
  .index-block .row:last-child { border-bottom: none; }
  .index-block .k { color: var(--ink-400); }
  .index-block .v { color: var(--ink-50); font-weight: 500; }
  .index-block .v.up::after { content: ' ↑'; color: var(--success); }
  .index-block .v.down::after { content: ' ↓'; color: var(--danger); }

  /* =================================================================
     COPILOT SHOWCASE — three modes side by side
     ================================================================= */
  .copilot-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
  }
  @media (max-width: 1100px) {
    .copilot-showcase { grid-template-columns: 1fr; }
  }
  .copilot-frame {
    border-radius: 18px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    overflow: hidden;
    height: 640px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .copilot-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--signal));
    z-index: 10;
    opacity: 0.8;
  }
  .copilot-mode {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(to bottom, rgba(255,255,255,0.02), transparent);
  }
  .copilot-mode-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .copilot-mode h5 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink-50);
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .copilot-mode h5 em { font-style: italic; color: var(--accent-2); }
  .copilot-mode p {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-300);
    line-height: 1.5;
  }

  .copilot-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
  }

  /* ===== DORMANT TAB DEMO ===== */
  .dormant-stage {
    position: relative;
    padding: 14px 20px 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .demo-page {
    flex: 1;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .demo-line {
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
  }
  .demo-line.w20 { width: 20%; }
  .demo-line.w60 { width: 60%; }
  .demo-line.w80 { width: 80%; }
  .demo-line.w100 { width: 100%; }
  .demo-line.w40 { width: 40%; }
  .demo-line.head { height: 12px; background: rgba(255,255,255,0.14); }

  .copilot-tab {
    position: absolute;
    right: -1px; top: 50%;
    transform: translateY(-50%);
    width: 42px;
    padding: 14px 4px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 14px 0 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: -4px 0 20px var(--glow);
    z-index: 20;
    cursor: pointer;
  }
  .copilot-tab .tab-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
  }
  .copilot-tab .tab-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
  }
  .copilot-tab .tab-pulse {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }

  /* ===== INVOKED PANEL DEMO ===== */
  .invoked-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 200px;
    height: 100%;
  }
  .invoked-stage .demo-page {
    margin: 14px 0 20px 20px;
    opacity: 0.55;
    filter: blur(0.3px);
  }
  .invoked-panel {
    height: 100%;
    background: var(--ink-900);
    border-left: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 40px -10px rgba(0,0,0,0.4);
    position: relative;
  }
  .invoked-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--signal));
  }
  .ip-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .ip-head .who {
    display: flex; align-items: center; gap: 8px; min-width: 0;
  }
  .ip-head .who .av {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    flex-shrink: 0;
  }
  .ip-head .name {
    font-size: 12.5px;
    color: var(--ink-50);
    font-weight: 500;
  }
  .ip-head .state {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--signal);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .ip-head .state .d {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }
  .ip-head .controls {
    display: flex; gap: 2px;
  }
  .ip-head .controls button {
    width: 22px; height: 22px;
    border-radius: 5px;
    background: transparent;
    border: none;
    color: var(--ink-400);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .ip-head .controls button:hover { background: var(--ink-800); color: var(--ink-100); }
  .ip-head .controls svg { width: 12px; height: 12px; }

  .ip-chat {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    font-size: 12px;
  }
  .ip-msg {
    display: flex;
    gap: 7px;
    max-width: 92%;
  }
  .ip-msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .ip-msg .av {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 10px;
    flex-shrink: 0;
  }
  .ip-msg .bub {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
  }
  .ip-msg.user .bub {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-bottom-right-radius: 3px;
  }
  .ip-msg.ada .bub {
    background: var(--ink-850);
    color: var(--ink-100);
    border: 1px solid var(--rule);
    border-bottom-left-radius: 3px;
  }
  .ip-msg.ada .bub b { color: var(--accent-2); font-weight: 500; }

  .ip-routes {
    padding: 10px;
    border-top: 1px solid var(--rule);
    background: var(--ink-850);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ip-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 8px;
    border-radius: 7px;
    font-size: 11.5px;
    color: var(--ink-100);
    cursor: pointer;
    transition: background 0.15s;
  }
  .ip-route:hover { background: var(--ink-900); }
  .ip-route .lbl {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ip-route .lbl .sym {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent);
    font-weight: 500;
  }
  .ip-route .lbl.signal .sym { color: var(--signal); }
  .ip-route .arr { color: var(--ink-400); font-family: var(--font-mono); font-size: 12px; }

  .ip-composer {
    padding: 10px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .ip-composer input {
    flex: 1;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 11.5px;
    color: var(--ink-100);
    outline: none;
  }
  .ip-composer input:focus { border-color: var(--accent); }
  .ip-composer button {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .ip-composer button svg { width: 12px; height: 12px; }

  /* ===== FULLSCREEN DEMO ===== */
  .fullscreen-stage {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ink-900);
  }
  .fs-chat, .fs-canvas {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .fs-chat { border-right: 1px solid var(--rule); }
  .fs-chat .ip-head { padding: 14px 16px 12px; }
  .fs-chat .ip-chat { padding: 16px; font-size: 13px; }
  .fs-chat .ip-msg .bub { font-size: 13px; padding: 9px 12px; }
  .fs-chat .ip-msg .av { width: 24px; height: 24px; font-size: 12px; }

  .fs-canvas {
    padding: 16px;
    background:
      radial-gradient(60% 50% at 100% 0%, rgba(126, 91, 255, 0.07), transparent 70%),
      var(--ink-900);
  }
  .fs-canvas-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .fs-canvas-eyebrow {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-2);
  }
  .fs-canvas h5 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    margin-top: 4px;
  }
  .fs-mini {
    padding: 10px 12px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .fs-mini.live { border-left: 2px solid var(--signal); }
  .fs-mini .e {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 4px;
  }
  .fs-mini.live .e { color: var(--signal); }
  .fs-mini .n {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink-50);
  }
  .fs-mini .d { font-size: 11px; color: var(--ink-300); margin-top: 2px; }

  /* =================================================================
     USE-CASE TEMPLATE — editorial + copilot docked by default
     ================================================================= */
  .uc-template {
    display: grid;
    grid-template-columns: 1fr 400px;
    background: var(--ink-950);
    border: 1px solid var(--rule);
    border-radius: 22px;
    overflow: hidden;
    min-height: 760px;
    position: relative;
  }
  .uc-template::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--signal));
    z-index: 10;
  }
  @media (max-width: 1200px) {
    .uc-template { grid-template-columns: 1fr; }
  }

  .uc-editorial {
    padding: 48px 56px;
    border-right: 1px solid var(--rule);
    overflow: hidden;
  }
  @media (max-width: 1200px) { .uc-editorial { border-right: none; border-bottom: 1px solid var(--rule); padding: 40px 32px; } }
  @media (max-width: 640px) { .uc-editorial { padding: 28px 20px; } }

  .uc-folio {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 28px;
  }
  .uc-folio b { color: var(--ink-100); font-weight: 500; }
  .uc-folio a { color: var(--accent-2); }

  .uc-kicker {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .uc-headline {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-hero);
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--ink-50);
    margin-bottom: 18px;
  }
  .uc-headline em { font-style: italic; color: var(--accent); font-variation-settings: 'opsz' 72, 'wght' 600; }
  .uc-deck {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 20px;
    line-height: 1.45;
    color: var(--ink-200);
    margin-bottom: 28px;
    max-width: 600px;
  }
  .uc-deck b { color: var(--ink-50); font-style: normal; font-family: var(--font-serif); font-weight: 500; }

  .uc-body {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--ink-200);
    letter-spacing: -0.003em;
  }
  .uc-body p { margin-bottom: 1em; max-width: 62ch; }
  .uc-body p b { color: var(--ink-50); font-weight: 500; }
  .uc-body p em { color: var(--accent-2); font-style: italic; }
  .uc-body h3 {
    font-family: var(--font-serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    line-height: 1.1;
    margin: 32px 0 14px;
  }
  .uc-body h3 em { font-style: italic; color: var(--accent-2); }

  /* The copilot panel, docked by default on use-case pages */
  .uc-copilot {
    background: var(--ink-900);
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 760px;
  }
  .uc-copilot::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--accent) 10%, var(--accent-2) 50%, var(--signal) 90%, transparent);
    opacity: 0.6;
  }
  .uc-copilot-head {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .uc-copilot-head .who {
    display: flex; align-items: center; gap: 10px;
  }
  .uc-copilot-head .av {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 4px 12px var(--glow);
  }
  .uc-copilot-head .info { display: flex; flex-direction: column; gap: 2px; }
  .uc-copilot-head .n { font-size: 14px; color: var(--ink-50); font-weight: 500; }
  .uc-copilot-head .s {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    display: inline-flex; align-items: center; gap: 5px;
  }
  .uc-copilot-head .s .d {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }
  .uc-copilot-head .exp {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--ink-800);
    border: 1px solid var(--rule);
    color: var(--ink-200);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .uc-copilot-head .exp:hover { border-color: var(--accent); color: var(--ink-50); }
  .uc-copilot-head .exp svg { width: 14px; height: 14px; }

  .uc-copilot-chat {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
  }
  .uc-msg {
    display: flex;
    gap: 9px;
    max-width: 92%;
    animation: slide-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes slide-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .uc-msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .uc-msg .av {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    flex-shrink: 0;
  }
  .uc-msg.user .av {
    background: var(--ink-800);
    color: var(--ink-300);
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .uc-msg .bub {
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.005em;
  }
  .uc-msg.user .bub {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-bottom-right-radius: 4px;
  }
  .uc-msg.ada .bub {
    background: var(--ink-850);
    color: var(--ink-100);
    border: 1px solid var(--rule);
    border-bottom-left-radius: 4px;
  }
  .uc-msg.ada .bub b { color: var(--accent-2); font-weight: 500; }

  /* In-chat action card (booking) */
  .uc-action {
    padding: 14px 14px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 10%, var(--ink-850)), var(--ink-850));
    border: 1px solid var(--signal);
  }
  .uc-action .l {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 6px;
  }
  .uc-action .t {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink-50);
    line-height: 1.2;
    margin-bottom: 4px;
  }
  .uc-action .t em { font-style: italic; color: var(--signal); }
  .uc-action .d {
    font-size: 12px;
    color: var(--ink-300);
    margin-bottom: 10px;
  }
  .uc-action .btns { display: flex; gap: 6px; }
  .uc-action button {
    padding: 7px 11px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    border: none;
    cursor: pointer;
  }
  .uc-action .pr {
    background: var(--signal);
    color: var(--ink-950);
  }
  .uc-action .sc {
    background: transparent;
    color: var(--ink-200);
    border: 1px solid var(--rule);
  }

  /* Route list in copilot bottom */
  .uc-routes {
    padding: 14px 24px;
    border-top: 1px solid var(--rule);
    background: var(--ink-850);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .uc-routes .label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 6px;
  }
  .uc-route {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--ink-100);
    cursor: pointer;
    transition: background 0.15s;
  }
  .uc-route:hover { background: var(--ink-900); }
  .uc-route .ico {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--ink-900);
    color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    border: 1px solid var(--rule);
  }
  .uc-route.signal .ico { color: var(--signal); }
  .uc-route .main .t { font-size: 12.5px; color: var(--ink-50); font-weight: 500; line-height: 1.2; }
  .uc-route .main .s { font-size: 11px; color: var(--ink-400); margin-top: 2px; font-family: var(--font-mono); letter-spacing: 0.04em; }
  .uc-route .arr {
    color: var(--ink-400);
    font-family: var(--font-mono);
    font-size: 14px;
  }

  .uc-composer {
    padding: 14px 24px 20px;
    border-top: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .uc-composer input {
    flex: 1;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-100);
    outline: none;
  }
  .uc-composer input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
  .uc-composer button {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .uc-composer button svg { width: 14px; height: 14px; }

  /* =================================================================
     MOBILE — phones
     ================================================================= */
  .mobile-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    justify-items: center;
    align-items: start;
  }
  @media (max-width: 1100px) {
    .mobile-row { grid-template-columns: 1fr; gap: 56px; }
  }
  .phone {
    width: 340px;
    aspect-ratio: 390 / 780;
    border-radius: 44px;
    padding: 9px;
    background: #0b0b0e;
    box-shadow:
      0 0 0 1.5px #22222a inset,
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 40px 80px -20px rgba(0, 0, 0, 0.7);
    position: relative;
    flex-shrink: 0;
  }
  .phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
    background: var(--ink-900);
    isolation: isolate;
  }
  .phone-notch {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 92px; height: 24px;
    background: #000;
    border-radius: 100px;
    z-index: 50;
  }
  .home-indicator {
    position: absolute;
    bottom: 7px; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 4px;
    border-radius: 3px;
    background: var(--ink-50);
    opacity: 0.55;
    z-index: 60;
  }
  .phone-label {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: center;
    max-width: 240px;
  }
  .phone-label b { color: var(--ink-50); font-weight: 500; }

  /* Mobile paper — miniature masthead + lead */
  .m-paper {
    padding: 40px 18px 18px;
    overflow-y: auto;
    height: 100%;
    position: relative;
  }
  .m-masthead {
    text-align: center;
    padding: 8px 0 12px;
    border-bottom: 1px double var(--rule-strong);
    margin-bottom: 16px;
  }
  .m-masthead .folio {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 4px;
  }
  .m-masthead .name {
    font-family: var(--font-serif);
    font-size: 54px;
    font-weight: 500;
    color: var(--ink-50);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }
  .m-masthead .name em { font-style: italic; color: var(--accent); }

  .m-lead-kicker {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .m-lead-head {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink-50);
    margin-bottom: 10px;
  }
  .m-lead-head em { font-style: italic; color: var(--accent); }
  .m-lead-deck {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-200);
    margin-bottom: 16px;
    line-height: 1.45;
  }
  .m-lead-body {
    font-size: 12.5px;
    color: var(--ink-300);
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .m-lead-body b { color: var(--ink-100); font-weight: 500; }

  .m-ada-prompt {
    padding: 14px 14px 12px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--ink-900)), var(--ink-900));
    border: 1px solid rgba(126, 91, 255, 0.3);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    margin: 12px 0;
  }
  .m-ada-prompt .l {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .m-ada-prompt .q {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-50);
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: -0.005em;
  }
  .m-ada-prompt .foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .m-ada-prompt .foot .s { color: var(--ink-400); display: inline-flex; align-items: center; gap: 5px; }
  .m-ada-prompt .foot .s .d { width: 5px; height: 5px; border-radius: 50%; background: var(--signal); animation: pulse 2s infinite; }
  .m-ada-prompt .foot .g { color: var(--accent-2); }

  /* Floating mobile bubble */
  .m-bubble {
    position: absolute;
    right: 16px; bottom: 22px;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 24px;
    font-weight: 500;
    box-shadow: 0 8px 24px var(--glow);
    z-index: 30;
  }
  .m-bubble::after {
    content: '';
    position: absolute;
    top: 3px; right: 3px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--ink-900);
  }
  .m-bubble-sub {
    position: absolute;
    right: 80px; bottom: 38px;
    padding: 8px 12px;
    background: var(--ink-950);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-100);
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  }
  .m-bubble-sub::after {
    content: '';
    position: absolute;
    right: -6px; top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 6px solid var(--ink-950);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  /* Mobile fullscreen chat — repurposed copilot panel */
  .m-fullchat {
    height: 100%;
    padding-top: 44px;
    display: flex;
    flex-direction: column;
  }
  .m-fullchat .ip-head { padding: 12px 14px; }
  .m-fullchat .ip-head .name { font-size: 13px; }
  .m-fullchat .ip-chat { padding: 14px; font-size: 13px; }
  .m-fullchat .ip-msg .bub { font-size: 12.5px; padding: 8px 12px; }
  .m-fullchat .ip-routes { padding: 10px 12px; }
  .m-fullchat .ip-composer { padding: 10px 12px 24px; }

  /* =================================================================
     COMPONENT ANATOMY
     ================================================================= */
  .anatomy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  @media (max-width: 1100px) { .anatomy-grid { grid-template-columns: 1fr; } }

  .anatomy-card {
    padding: 28px;
    border-radius: 16px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
  }
  .anatomy-card .label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 8px;
  }
  .anatomy-card .label b { color: var(--accent); }
  .anatomy-card h4 {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .anatomy-card > p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-300);
    margin-bottom: 20px;
  }
  .anatomy-demo {
    padding: 20px;
    border-radius: 12px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    margin-bottom: 16px;
  }
  .anatomy-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
  }
  .anatomy-note {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-200);
    line-height: 1.5;
  }
  .anatomy-note .n {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    padding: 3px 6px;
    border-radius: 5px;
    text-align: center;
    height: fit-content;
    letter-spacing: 0.06em;
  }
  .anatomy-note b { color: var(--ink-50); font-weight: 500; }

  /* =================================================================
     ASK ADA — direct-input hero band (post-masthead)
     ================================================================= */
  .ask-ada-band {
    padding: 28px 64px 32px;
    background:
      radial-gradient(50% 80% at 100% 0%, rgba(126, 91, 255, 0.06), transparent 70%),
      linear-gradient(to bottom, transparent, rgba(126, 91, 255, 0.025));
    border-bottom: 1px double var(--rule-strong);
    position: relative;
  }
  @media (max-width: 1100px) { .ask-ada-band { padding: 24px 32px; } }
  @media (max-width: 640px) { .ask-ada-band { padding: 20px 20px; } }

  /* In-article variant — lives inside why-now, framed like a breakout */
  .ask-ada-band.in-article {
    margin-top: 32px;
    padding: 28px 32px 28px;
    border: 1px solid rgba(126, 91, 255, 0.24);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    background:
      radial-gradient(60% 60% at 100% 0%, rgba(126, 91, 255, 0.07), transparent 65%),
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, var(--ink-900)), var(--ink-900));
  }
  .ask-ada-band.in-article::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 8%, transparent 92%);
  }
  @media (max-width: 640px) {
    .ask-ada-band.in-article { padding: 20px 18px 20px; }
  }

  /* Breakline variant — full-width band, same family as .live-session-invite.breakline
     but tinted indigo instead of amber (accent vs signal). */
  .ask-ada-band.breakline {
    padding: 26px 64px 24px;
    border: 0;
    border-radius: 0;
    border-top: 1px double var(--rule-strong);
    border-bottom: 1px double var(--rule-strong);
    background: linear-gradient(to right,
      transparent 0%,
      rgba(126, 91, 255, 0.05) 50%,
      transparent 100%);
    margin: 0;
  }
  .ask-ada-band.breakline::before { display: none; }
  .ask-ada-band.breakline .aa-inner { max-width: none; margin: 0; }

  .ask-ada-band.breakline .aa-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.5fr) minmax(320px, 2fr) minmax(280px, 1fr);
    gap: 32px;
    align-items: start;
  }
  .ask-ada-band.breakline .aa-col { min-width: 0; }

  /* LEFT — label + on-shift status */
  .ask-ada-band.breakline .aa-col-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .ask-ada-band.breakline .aa-label { color: var(--accent-2); }
  .ask-ada-band.breakline .aa-status {
    color: var(--ink-400);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ask-ada-band.breakline .aa-status .d {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }

  /* MIDDLE — reset .ask-ada-prompt from its boxed editorial styling */
  .ask-ada-band.breakline .ask-ada-prompt {
    padding: 0;
    background: none;
    border: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ask-ada-band.breakline .ask-ada-prompt .ada-type-body {
    margin: 0;
  }

  /* RIGHT — composer stacked (input over send button) */
  .ask-ada-band.breakline .aa-col-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
  }
  .ask-ada-band.breakline .ask-ada-composer {
    padding: 0;
    background: none;
    border: 0;
    gap: 10px;
  }
  .ask-ada-band.breakline .ask-ada-composer input {
    width: 100%;
    min-width: 0;
  }
  .ask-ada-band.breakline .ask-ada-composer .send {
    width: 100%;
    justify-content: center;
  }

  /* Chips bar below the grid — full-width editorial cluster */
  .ask-ada-band.breakline .ask-ada-chips {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
  }

  @media (max-width: 1100px) {
    .ask-ada-band.breakline { padding: 22px 32px 22px; }
    .ask-ada-band.breakline .aa-grid {
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
    .ask-ada-band.breakline .aa-col-meta {
      grid-column: 1 / -1;
      flex-direction: row;
      justify-content: space-between;
      align-items: baseline;
    }
  }
  @media (max-width: 720px) {
    .ask-ada-band.breakline { padding: 20px 20px; }
    .ask-ada-band.breakline .aa-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }

  .ask-ada-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-wrap: wrap;
  }
  .ask-ada-head .l { color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
  .ask-ada-head .l::before {
    content: '§';
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    color: var(--accent);
    letter-spacing: 0;
  }
  .ask-ada-head .l b { color: var(--ink-100); }
  .ask-ada-head .r {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--signal);
  }
  .ask-ada-head .r .d {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--signal);
    animation: pulse 2.4s infinite;
  }

  .ask-ada-prompt {
    margin-bottom: 20px;
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 400;
  }

  /* Ada's "typing..." meta row — shown while typing, fades after */
  .ada-type-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, max-height 0.4s ease-out, margin 0.4s ease-out;
    opacity: 1;
    max-height: 40px;
  }
  .ask-ada-prompt.ada-typed .ada-type-meta {
    opacity: 0;
    transform: translateY(-4px);
    max-height: 0;
    margin-bottom: -12px;
    pointer-events: none;
  }
  /* ===== ADA SIGIL — her personality mark =====
     A 4-point sparkle with a satellite dot, spinning in a gradient disc.
     Breathes while typing; settles to a slower heartbeat once done.
     This is the mark that says "there's an agent here, not a letter." */
  .ada-sigil {
    width: 32px; height: 32px;
    flex-shrink: 0;
    position: relative;
    filter: drop-shadow(0 3px 12px var(--glow));
  }
  .ada-sigil svg {
    width: 100%; height: 100%;
    display: block;
    overflow: visible;
  }
  .ada-sigil .sigil-disc {
    transform-origin: 16px 16px;
    animation: adaDiscBreath 3.2s ease-in-out infinite;
  }
  .ada-sigil .sigil-halo {
    transform-origin: 16px 16px;
    animation: adaHaloPulse 3.2s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  .ada-sigil .sigil-spark-group {
    transform-origin: 16px 16px;
    animation: adaSparkSpin 4.2s cubic-bezier(.55,.05,.45,.95) infinite;
  }
  .ada-sigil .sigil-spark {
    transform-origin: 16px 16px;
    animation: adaSparkBreath 2.4s ease-in-out infinite;
  }
  .ada-sigil .sigil-dot {
    transform-origin: 22.4px 10.1px;
    animation: adaDotPulse 1.6s ease-in-out infinite;
  }
  .ada-sigil .sigil-ring {
    animation: adaRingSpin 12s linear infinite;
    transform-origin: 16px 16px;
    stroke-dasharray: 3 4;
  }

  @keyframes adaDiscBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
  }
  @keyframes adaHaloPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.75; }
  }
  @keyframes adaSparkSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
  }
  @keyframes adaSparkBreath {
    0%, 100% { transform: scale(0.92); }
    50%      { transform: scale(1.15); }
  }
  @keyframes adaDotPulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.5); }
  }
  @keyframes adaRingSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* When typing ends, Ada's sigil settles into a calm idle heartbeat */
  .ask-ada-prompt.ada-typed .ada-sigil .sigil-disc { animation-duration: 6s; }
  .ask-ada-prompt.ada-typed .ada-sigil .sigil-halo { animation-duration: 6s; }
  .ask-ada-prompt.ada-typed .ada-sigil .sigil-spark-group { animation-duration: 16s; }
  .ask-ada-prompt.ada-typed .ada-sigil .sigil-spark { animation-duration: 5s; }
  .ask-ada-prompt.ada-typed .ada-sigil .sigil-dot {
    animation-duration: 3.2s;
    opacity: 0.55;
  }
  .ask-ada-prompt.ada-typed .ada-sigil .sigil-ring { animation-duration: 30s; }

  /* Respect reduced-motion — still show the mark, just don't animate */
  @media (prefers-reduced-motion: reduce) {
    .ada-sigil .sigil-disc,
    .ada-sigil .sigil-halo,
    .ada-sigil .sigil-spark-group,
    .ada-sigil .sigil-spark,
    .ada-sigil .sigil-dot,
    .ada-sigil .sigil-ring {
      animation: none !important;
    }
  }
  .ada-type-meta .label {
    font-weight: 500;
    letter-spacing: 0.18em;
  }
  .ada-type-meta .label b {
    font-family: var(--font-sans);
    color: var(--ink-100);
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .ada-type-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .ada-type-dots i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: adaBob 1.2s ease-in-out infinite;
  }
  .ada-type-dots i:nth-child(2) { animation-delay: 0.15s; }
  .ada-type-dots i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes adaBob {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-3px); opacity: 1; }
  }

  /* The body of Ada's message — being typed */
  .ada-type-body {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-title);
    font-size: clamp(22px, 2.4vw, 32px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    min-height: 1.2em;
  }
  .ada-type-body b {
    color: var(--accent);
    font-style: normal;
    font-family: var(--font-serif);
    font-weight: 500;
  }
  .ada-type-body .caret {
    display: inline-block;
    width: 2px;
    height: 0.92em;
    background: var(--accent);
    margin-left: 4px;
    vertical-align: -0.08em;
    animation: adaBlink 0.85s step-end infinite;
    border-radius: 1px;
  }
  @keyframes adaBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .ask-ada-prompt.ada-typed .ada-type-body .caret {
    animation: adaBlinkSlow 1.8s step-end infinite;
    background: var(--accent-2);
  }
  @keyframes adaBlinkSlow {
    0%, 60% { opacity: 0.7; }
    61%, 100% { opacity: 0; }
  }

  /* Hint line appears after typing completes — inviting the user to type back */
  .ada-type-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s 0.2s ease-out, transform 0.5s 0.2s ease-out;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
  }
  .ada-type-hint::before {
    content: '↳';
    color: var(--accent);
    font-size: 13px;
    letter-spacing: 0;
  }
  .ada-type-hint b { color: var(--ink-100); font-weight: 500; }
  .ask-ada-prompt.ada-typed .ada-type-hint {
    opacity: 1;
    transform: translateY(0);
  }

  /* =================================================================
     INTRO THREAD — begin-here placed under the film as a chat intro
     ================================================================= */
  .intro-thread {
    padding: 20px 0 28px;
    border-bottom: 1px solid var(--rule);
    margin: 0 0 40px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    align-items: start;
  }
  .intro-thread .intro-sigil {
    width: 44px; height: 44px;
    margin-top: 4px;
  }
  .intro-thread .intro-sigil .sigil-disc { animation-duration: 5s; }
  .intro-thread .intro-sigil .sigil-halo { animation-duration: 5s; opacity: 0.5; }
  .intro-thread .intro-sigil .sigil-spark-group { animation-duration: 6s; }
  .intro-thread .intro-sigil .sigil-spark { animation-duration: 3.2s; }
  .intro-thread .intro-sigil .sigil-dot { animation-duration: 2.2s; }
  .intro-body {
    min-width: 0;
  }
  .intro-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .intro-head .n {
    color: var(--ink-100);
    font-weight: 500;
  }
  .intro-head .s {
    color: var(--signal);
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .intro-head .s .d {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--signal);
    animation: pulse 2.4s infinite;
  }
  .intro-bubble {
    padding: 16px 20px 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, var(--ink-850)), var(--ink-850));
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 2px 14px 14px 14px;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-100);
    letter-spacing: -0.005em;
    margin-bottom: 14px;
  }
  .intro-bubble b { color: var(--ink-50); font-style: normal; font-family: var(--font-serif); font-weight: 500; }
  .intro-bubble em { color: var(--accent-2); font-style: italic; }

  .intro-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  @media (max-width: 820px) { .intro-routes { grid-template-columns: 1fr; } }

  .intro-route {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: all 0.15s;
    color: var(--ink-100);
  }
  .intro-route:hover {
    border-color: var(--accent);
    background: var(--accent-wash);
    transform: translateY(-1px);
  }
  .intro-route.signal {
    background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 8%, var(--ink-900)), var(--ink-900));
    border-color: rgba(245, 176, 0, 0.35);
  }
  .intro-route.signal:hover {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 10%, var(--ink-900));
  }
  .intro-route .ico {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    flex-shrink: 0;
  }
  .intro-route.signal .ico {
    background: color-mix(in srgb, var(--signal) 12%, var(--ink-850));
    border-color: rgba(245, 176, 0, 0.35);
    color: var(--signal);
  }
  .intro-route .mid {
    min-width: 0;
  }
  .intro-route .mid .t {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-50);
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-bottom: 3px;
  }
  .intro-route .mid .t em { font-style: italic; color: var(--accent-2); font-weight: 500; }
  .intro-route.signal .mid .t em { color: var(--signal); }
  .intro-route .mid .s {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--ink-400);
  }
  .intro-route .arr {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--ink-400);
    transition: transform 0.15s, color 0.15s;
  }
  .intro-route:hover .arr { color: var(--accent); transform: translateX(2px); }
  .intro-route.signal:hover .arr { color: var(--signal); }

  @media (max-width: 600px) {
    .intro-thread { grid-template-columns: 1fr; }
    .intro-thread .intro-sigil { display: none; }
  }

  /* =================================================================
     DRAG STRIP — declarative manifesto band (post ask-ada)
     ================================================================= */

  .ask-ada-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 18px;
    background: var(--ink-900);
    border: 1px solid var(--rule-strong);
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .ask-ada-composer:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--glow);
  }
  .ask-ada-composer .av {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
    box-shadow: 0 2px 10px var(--glow);
  }
  .ask-ada-composer input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink-50);
    padding: 10px 0;
    letter-spacing: -0.005em;
    min-width: 0;
  }
  .ask-ada-composer input::placeholder {
    color: var(--ink-400);
    font-style: italic;
    font-family: var(--font-editorial);
    font-size: 16px;
  }
  .ask-ada-composer .kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-400);
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
  }
  .ask-ada-composer .send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: 0 4px 14px var(--glow);
    transition: transform 0.15s;
    white-space: nowrap;
  }
  .ask-ada-composer .send:hover { transform: translateY(-1px); }
  .ask-ada-composer .send svg { width: 13px; height: 13px; }

  .ask-ada-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .ask-ada-chips .lb {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-right: 6px;
  }
  .ask-ada-chips .chip {
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    color: var(--ink-200);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 12.5px;
    letter-spacing: -0.005em;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ask-ada-chips .chip::before {
    content: '';
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent);
    opacity: 0.5;
  }
  .ask-ada-chips .chip:hover { border-color: var(--accent); color: var(--ink-50); transform: translateY(-1px); }
  .ask-ada-chips .chip.signal { border-color: rgba(245, 176, 0, 0.35); color: var(--signal); }
  .ask-ada-chips .chip.signal::before { background: var(--signal); opacity: 1; }
  .ask-ada-chips .chip.signal:hover {
    background: var(--signal);
    color: var(--ink-950);
    border-color: var(--signal);
  }

  /* =================================================================
     BEGIN HERE — primary-routes rail card
     ================================================================= */
  .begin-here {
    padding: 18px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 2px;
    position: relative;
    margin-top: -8px;
  }
  .begin-here::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--signal));
  }
  .bh-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--rule);
  }
  .bh-head .note { color: var(--ink-400); }

  .bh-route {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px 8px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    transition: background 0.15s;
  }
  .bh-route:hover { background: var(--accent-wash); }
  .bh-route .ico {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    color: var(--accent-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
  }
  .bh-route.signal .ico {
    background: color-mix(in srgb, var(--signal) 10%, var(--ink-850));
    border-color: rgba(245, 176, 0, 0.3);
    color: var(--signal);
  }
  .bh-route .mid .t {
    font-size: 13.5px;
    color: var(--ink-50);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.2;
    margin-bottom: 3px;
  }
  .bh-route .mid .t em { font-style: italic; color: var(--accent-2); font-weight: 500; }
  .bh-route.signal .mid .t em { color: var(--signal); }
  .bh-route .mid .s {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-400);
  }
  .bh-route .arr { color: var(--ink-400); font-family: var(--font-mono); font-size: 16px; transition: transform 0.15s, color 0.15s; }
  .bh-route:hover .arr { color: var(--accent); transform: translateX(2px); }

  /* Wide variant — placed under the film as the reader's next step */
  .begin-here.under-film {
    padding: 22px 26px 24px;
    margin: 0 auto 56px;
  }
  .begin-here.under-film .bh-head {
    padding-bottom: 14px;
    margin-bottom: 14px;
  }
  .bh-routes-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  @media (max-width: 820px) {
    .bh-routes-row { grid-template-columns: 1fr; }
  }
  .begin-here.under-film .bh-route {
    border-bottom: none;
    padding: 14px 16px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 10px;
  }
  .begin-here.under-film .bh-route:hover {
    border-color: var(--accent);
    background: var(--accent-wash);
  }
  .begin-here.under-film .bh-route.signal {
    background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 8%, var(--ink-850)), var(--ink-850));
    border-color: rgba(245, 176, 0, 0.35);
  }
  .begin-here.under-film .bh-route.signal:hover {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 10%, var(--ink-850));
  }

  .bh-video {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 10px;
    margin-top: 10px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .bh-video:hover { border-color: var(--accent); }
  .bh-video .play {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--glow);
  }
  .bh-video .play svg { width: 12px; height: 12px; margin-left: 2px; }
  .bh-video .cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .bh-video .cap .t { font-size: 12.5px; color: var(--ink-50); font-weight: 500; letter-spacing: -0.005em; }
  .bh-video .cap .s {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ink-400);
    text-transform: uppercase;
  }

  /* =================================================================
     FILM — editorial video explainer block
     ================================================================= */
  .film-block {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .film-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 20px;
  }
  @media (max-width: 900px) { .film-grid { grid-template-columns: 1fr; gap: 28px; } }

  .film-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(126, 91, 255, 0.4), transparent 55%),
      radial-gradient(ellipse at 80% 80%, rgba(245, 176, 0, 0.22), transparent 62%),
      linear-gradient(135deg, var(--ink-800), var(--ink-950));
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: transform 0.3s;
  }
  .film-media:hover { transform: scale(1.005); }
  .film-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
    opacity: 0.6;
  }
  .film-media::after {
    content: '';
    position: absolute;
    top: 16px; left: 16px; right: 16px; bottom: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    pointer-events: none;
  }

  .film-sprocket {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 16px;
    background:
      repeating-linear-gradient(to bottom,
        transparent 0, transparent 6px,
        rgba(255,255,255,0.06) 6px, rgba(255,255,255,0.06) 14px);
    border-right: 1px solid rgba(255,255,255,0.05);
    z-index: 2;
  }
  .film-sprocket.right { left: auto; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,0.05); }

  .film-play {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 88px; height: 88px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    color: var(--ink-950);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.08);
    cursor: pointer;
    z-index: 3;
    transition: transform 0.2s;
    border: none;
  }
  .film-play:hover { transform: translate(-50%, -50%) scale(1.05); }
  .film-play svg { width: 30px; height: 30px; margin-left: 4px; }

  .film-duration {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.72);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-variant-numeric: tabular-nums;
  }

  .film-badge {
    position: absolute;
    left: 14px; top: 14px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--signal);
    color: var(--ink-950);
    font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 3px 10px rgba(245, 176, 0, 0.3);
  }
  .film-badge .d {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ink-950);
    animation: pulse 2s infinite;
  }

  .film-body { padding-top: 4px; }
  .film-kicker {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
  }
  .film-title {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 60, 'wght' 500;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink-50);
    margin-bottom: 16px;
  }
  .film-title em { font-style: italic; color: var(--accent); }

  .film-caption {
    font-family: var(--font-sans);
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-100);
    letter-spacing: -0.005em;
    margin-bottom: 20px;
  }
  .film-caption b { color: var(--ink-50); font-weight: 600; }
  .film-caption em { color: var(--accent-2); font-style: italic; font-weight: 500; }

  /* === FILM CTAs — primary action surface next to the video === */
  .film-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
  }
  @media (max-width: 540px) { .film-ctas { grid-template-columns: 1fr; } }

  .film-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px 18px;
    border-radius: 14px;
    text-decoration: none;
    font-family: var(--font-sans);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    overflow: hidden;
  }
  .film-cta .t {
    grid-column: 1;
    grid-row: 1;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--ink-50);
    line-height: 1.2;
  }
  .film-cta .s {
    grid-column: 1;
    grid-row: 2;
    font-size: 12px;
    color: var(--ink-300);
    letter-spacing: 0.005em;
    line-height: 1.35;
  }
  .film-cta svg {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    color: var(--ink-100);
    transition: transform 0.22s ease, color 0.22s ease;
  }
  .film-cta:hover svg { transform: translateX(3px); }

  .film-cta.primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    border: 1px solid var(--accent);
    box-shadow: 0 14px 32px -16px var(--glow), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .film-cta.primary .t { color: #fff; }
  .film-cta.primary .s { color: rgba(255,255,255,0.78); }
  .film-cta.primary svg { color: #fff; }
  .film-cta.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 44px -16px var(--glow), inset 0 1px 0 rgba(255,255,255,0.24);
  }

  .film-cta.secondary {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--rule-strong);
  }
  .film-cta.secondary:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--accent-2);
    transform: translateY(-1px);
  }
  .film-cta.secondary:hover svg { color: var(--accent-2); }

  /* Chapters as a horizontal chip row — space-saving, scannable */
  .film-chapters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
  }
  .film-chapters .lb {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-right: 10px;
    margin-right: 2px;
    border-right: 1px solid var(--rule);
    flex-shrink: 0;
  }
  .film-chapter {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
  }
  .film-chapter:hover {
    border-color: var(--accent);
    background: var(--accent-wash);
    transform: translateY(-1px);
  }
  .film-chapter .t {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--accent-2);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .film-chapter:hover .t { color: var(--accent); }
  .film-chapter .n {
    font-size: 12.5px;
    color: var(--ink-100);
    letter-spacing: -0.005em;
    line-height: 1.2;
    font-family: var(--font-serif);
    font-weight: 400;
  }
  .film-chapter .n em { font-style: italic; color: var(--accent-2); }
  .film-chapter:hover .n em { color: var(--accent); }
  /* Chip mode hides the per-chapter duration to save horizontal space */
  .film-chapter .p { display: none; }

  .film-meta-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    margin-top: 16px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-wrap: wrap;
  }
  .film-meta-foot b { color: var(--ink-100); font-weight: 500; }
  .film-meta-foot .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-500); }

  /* =================================================================
     TL;DR FOR YOUR AI — "Too Many Letters, Copy to My AI"
     A clipboard-copy primitive that acknowledges some readers are
     browsing with an agent. Tapping the button copies a clean brief
     + MCP endpoint to clipboard for pasting into their AI.
     ================================================================= */
  .tl-ai {
    position: relative;
    margin: 24px 0 36px;
    padding: 18px 22px 20px;
    border-radius: 2px;
    background:
      radial-gradient(60% 80% at 100% 0%, rgba(126, 91, 255, 0.06), transparent 70%),
      linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, var(--ink-900)), var(--ink-900));
    border: 1px solid rgba(126, 91, 255, 0.22);
    border-left: 3px solid var(--accent);
    display: flex;
    flex-direction: column;
  }
  .tl-ai::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent) 10%, transparent 100%);
  }

  .tl-ai-head {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .tl-ai-head::before {
    content: '§';
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--accent);
    letter-spacing: 0;
    margin-right: 4px;
  }
  .tl-ai-head .count {
    color: var(--ink-400);
    font-weight: 400;
    letter-spacing: 0.14em;
  }
  .tl-ai-head .count b { color: var(--ink-100); font-weight: 500; }

  .tl-ai-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
  }
  @media (max-width: 720px) {
    .tl-ai-row { grid-template-columns: 1fr; gap: 14px; }
  }

  .tl-ai-body {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--ink-200);
    letter-spacing: -0.003em;
  }
  .tl-ai-body b {
    color: var(--ink-50);
    font-style: normal;
    font-family: var(--font-serif);
    font-weight: 500;
  }
  .tl-ai-body em { color: var(--accent-2); font-style: italic; }

  .tl-ai-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 240px;
  }
  @media (max-width: 720px) {
    .tl-ai-actions { min-width: 0; }
  }

  .tl-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px 11px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: 0 4px 14px var(--glow);
    transition: transform 0.15s, box-shadow 0.15s, background 0.3s;
    justify-content: flex-start;
  }
  .tl-ai-btn:hover { transform: translateY(-1px); }
  .tl-ai-btn .ico {
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .tl-ai-btn .ico svg { width: 16px; height: 16px; }
  .tl-ai-btn .label { flex: 1; text-align: left; }
  .tl-ai-btn .size {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    opacity: 0.75;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.18);
  }
  .tl-ai-btn .ico-check { display: none; }
  .tl-ai-btn.copied {
    background: linear-gradient(135deg, #10b981, #34d399);
    pointer-events: none;
  }
  .tl-ai-btn.copied .ico-copy { display: none; }
  .tl-ai-btn.copied .ico-check { display: inline-flex; }

  .tl-ai-foot {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    text-align: right;
    line-height: 1.6;
  }
  @media (max-width: 720px) {
    .tl-ai-foot { text-align: left; }
  }
  .tl-ai-foot b { color: var(--ink-100); font-weight: 500; }
  .tl-ai-foot .url {
    color: var(--accent-2);
    border-bottom: 1px dashed rgba(168, 139, 255, 0.4);
  }

  /* Compact variant — for classifieds / tight contexts */
  .tl-ai.compact {
    padding: 14px 16px 16px;
    margin: 0;
  }
  .tl-ai.compact .tl-ai-head { font-size: 9.5px; padding-bottom: 10px; margin-bottom: 10px; }
  .tl-ai.compact .tl-ai-body { font-size: 14px; }
  .tl-ai.compact .tl-ai-btn { font-size: 12px; padding: 9px 12px; }

  /* =================================================================
     LIVE SESSION INVITE — agent-briefing block + composer.
     Sits under the film, above the § begin here widget.
     Mirrors the top ask-ada typing pattern but for session booking.
     Amber-accented for urgency + scarcity.
     ================================================================= */
  .live-session-invite {
    position: relative;
    padding: 24px 28px 22px;
    border: 1px solid rgba(245, 176, 0, 0.28);
    border-radius: 2px;
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--signal) 5%, var(--ink-900)),
      var(--ink-900));
    margin: 0 0 20px;
  }
  .live-session-invite::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 10%, var(--signal) 90%);
  }

  /* Breakline variant — full-width band, visually identical family to .drag-strip.
     Sits as a direct child of .paper so it spans edge-to-edge; inner content uses
     the whole band width (no narrow editorial column) to stay cohesive with the drag. */
  .live-session-invite.breakline {
    padding: 26px 64px 28px;
    border: 0;
    border-radius: 0;
    border-top: 1px double var(--rule-strong);
    border-bottom: 1px double var(--rule-strong);
    background: linear-gradient(to right,
      transparent 0%,
      rgba(245, 176, 0, 0.04) 50%,
      transparent 100%);
    margin: 0;
  }
  .live-session-invite.breakline::before { display: none; }
  .live-session-invite.breakline .ls-inner {
    max-width: none;
    margin: 0;
  }

  /* 3-column grid mirrors the drag-strip's index · quote · byline rhythm */
  .live-session-invite.breakline .ls-grid {
    display: grid;
    grid-template-columns: minmax(160px, 0.5fr) minmax(320px, 2fr) minmax(280px, 1fr);
    gap: 32px;
    align-items: start;
  }
  .live-session-invite.breakline .ls-col { min-width: 0; }

  /* LEFT column — compact meta */
  .live-session-invite.breakline .ls-col-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
  }
  .live-session-invite.breakline .ls-col-meta .ls-proof-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .live-session-invite.breakline .ls-col-meta .ls-proof-row .dot { display: none; }

  /* MIDDLE column — hero + Ada briefing */
  .live-session-invite.breakline .ls-lead {
    margin: 0 0 18px;
  }
  .live-session-invite.breakline .ls-lead h2 {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 60, 'wght' 500;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.14;
    letter-spacing: -0.018em;
    color: var(--ink-50);
    font-weight: 400;
    margin: 0 0 6px;
  }
  .live-session-invite.breakline .ls-lead h2 em {
    font-style: italic;
    color: var(--signal);
    font-variation-settings: 'opsz' 60, 'wght' 600;
  }
  .live-session-invite.breakline .ls-lead p {
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.4;
    color: var(--ink-300);
    margin: 0;
  }
  .live-session-invite.breakline .ls-lead p b {
    color: var(--ink-100);
    font-style: normal;
    font-family: var(--font-sans);
    font-weight: 500;
  }

  /* RIGHT column — composer */
  .live-session-invite.breakline .ls-col-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
  }
  .live-session-invite.breakline .ls-col-action .ls-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .live-session-invite.breakline .ls-col-action input {
    width: 100%;
  }
  .live-session-invite.breakline .ls-col-action .ls-save {
    width: 100%;
    justify-content: center;
  }

  @media (max-width: 1100px) {
    .live-session-invite.breakline { padding: 22px 32px 24px; }
    .live-session-invite.breakline .ls-grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .live-session-invite.breakline .ls-col-meta {
      grid-column: 1 / -1;
      flex-direction: row;
      justify-content: space-between;
      align-items: baseline;
    }
    .live-session-invite.breakline .ls-col-meta .ls-proof-row {
      flex-direction: row;
      gap: 10px;
    }
  }
  @media (max-width: 720px) {
    .live-session-invite.breakline { padding: 20px 20px; }
    .live-session-invite.breakline .ls-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }

  .ls-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
  }
  .ls-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--signal);
  }
  .ls-label .sep { color: var(--ink-500); margin: 0 4px; }
  .ls-proof-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-300);
  }
  .ls-proof-row .dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--ink-500);
    display: inline-block;
  }
  .ls-proof-row .ls-stat b { color: var(--ink-50); font-weight: 500; }
  .ls-proof-row .scarcity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(245, 176, 0, 0.4);
    border-radius: 999px;
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    color: var(--signal);
  }
  .ls-proof-row .scarcity .d {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--signal);
    animation: pulse 2s infinite;
  }
  .ls-proof-row .scarcity b { color: var(--signal); font-weight: 600; }

  .ls-typing {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 4px;
  }
  .ls-sigil-wrap { padding-top: 2px; }
  .live-sigil {
    width: 42px !important;
    height: 42px !important;
    filter: drop-shadow(0 4px 14px var(--glow)) drop-shadow(0 2px 8px var(--glow-signal));
  }

  .ls-content { min-width: 0; }
  .ls-type-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 10px;
    transition: opacity 0.4s, max-height 0.4s, margin 0.4s;
    max-height: 28px;
    opacity: 1;
    overflow: hidden;
  }
  .live-session-invite.ls-typed .ls-type-meta {
    opacity: 0;
    max-height: 0;
    margin-bottom: -6px;
    pointer-events: none;
  }
  .ls-type-meta .label b {
    font-family: var(--font-sans);
    color: var(--ink-100);
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  .ls-type-body {
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 32, 'wght' 500;
    font-size: clamp(18px, 1.8vw, 24px);
    font-style: italic;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ink-100);
    font-weight: 400;
    min-height: 1.2em;
    margin-bottom: 10px;
  }
  .ls-type-body b {
    font-style: normal;
    color: var(--signal);
    font-family: var(--font-serif);
    font-weight: 500;
  }
  .ls-type-body .caret {
    display: inline-block;
    width: 2px;
    height: 0.9em;
    background: var(--signal);
    margin-left: 4px;
    vertical-align: -0.08em;
    animation: adaBlink 0.85s step-end infinite;
    border-radius: 1px;
  }
  .live-session-invite.ls-typed .ls-type-body .caret {
    animation: adaBlinkSlow 1.8s step-end infinite;
  }

  .ls-hint {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
    margin-top: 2px;
    line-height: 1.5;
  }
  .ls-hint b { color: var(--ink-100); font-weight: 500; }
  .live-session-invite.ls-typed .ls-hint {
    opacity: 1;
    transform: translateY(0);
  }

  .ls-composer {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 8px 8px 16px;
    background: var(--ink-850);
    border: 1px solid var(--rule);
    border-radius: 12px;
    margin-top: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .ls-composer:focus-within {
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--glow-signal);
  }
  .ls-composer input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-50);
    letter-spacing: -0.005em;
    min-width: 0;
    padding: 10px 0;
  }
  .ls-composer input::placeholder {
    color: var(--ink-400);
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 14.5px;
  }
  .ls-save {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 16px;
    border-radius: 10px;
    background: var(--signal);
    color: var(--ink-950);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform 0.15s;
    white-space: nowrap;
    box-shadow: 0 4px 14px var(--glow-signal);
  }
  .ls-save:hover { transform: translateY(-1px); }
  .ls-save-text { font-size: 13.5px; }
  .ls-save-tag {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--ink-950);
    font-weight: 600;
  }
  .ls-save svg { width: 13px; height: 13px; }

  .ls-past {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-wrap: wrap;
  }
  .ls-past .pk { color: var(--ink-300); }
  .ls-past .pt b { color: var(--ink-100); font-weight: 500; }
  .ls-past .pl { color: var(--accent-2); margin-left: auto; }
  .ls-past .pl:hover { color: var(--accent); }

  /* Schedule variant — separated from the table above */
  .live-session-invite.in-schedule {
    margin-top: 32px;
  }

  @media (max-width: 720px) {
    .live-session-invite { padding: 20px 18px 18px; }
    .ls-typing { grid-template-columns: 1fr; gap: 10px; }
    .ls-sigil-wrap { display: none; }
    .ls-composer { flex-direction: column; padding: 10px; }
    .ls-save { justify-content: center; padding: 12px; }
    .ls-past { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ls-past .pl { margin-left: 0; }
  }

  /* =================================================================
     DRAG STRIP — declarative manifesto band (post ask-ada)
     ================================================================= */
  .drag-strip {
    padding: 26px 64px 28px;
    background:
      linear-gradient(to right, transparent 0%, rgba(245, 176, 0, 0.04) 50%, transparent 100%);
    border-bottom: 1px double var(--rule-strong);
    display: flex;
    align-items: baseline;
    gap: 28px;
    flex-wrap: wrap;
  }
  @media (max-width: 1100px) { .drag-strip { padding: 22px 32px; } }
  @media (max-width: 640px) { .drag-strip { padding: 20px 20px; gap: 12px; } }

  .drag-strip .index {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--signal);
    flex-shrink: 0;
    padding-top: 12px;
  }
  .drag-strip .index::before { content: '§ '; }
  .drag-strip .quote {
    flex: 1;
    font-family: var(--font-serif);
    font-variation-settings: 'opsz' 60, 'wght' 500;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    font-weight: 400;
    min-width: 0;
  }
  .drag-strip .quote em {
    font-style: italic;
    color: var(--signal);
    font-variation-settings: 'opsz' 60, 'wght' 600;
  }
  .drag-strip .quote b {
    color: var(--accent);
    font-weight: 500;
    font-family: var(--font-serif);
  }
  .drag-strip .by {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-400);
    padding-top: 12px;
    flex-shrink: 0;
    max-width: 180px;
    line-height: 1.5;
  }
  .drag-strip .by b { color: var(--ink-100); font-weight: 500; }

  /* =================================================================
     FOOTER — newspaper colophon, mirrors the masthead
     ================================================================= */
  .paper-footer {
    padding: 24px 64px 32px;
    border-top: 1px double var(--rule-strong);
    background: linear-gradient(to top, rgba(126, 91, 255, 0.035), transparent);
  }
  .pf-inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  .pf-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rule);
    flex-wrap: wrap;
  }
  .pf-wordmark {
    font-family: var(--font-serif);
    font-variation-settings: var(--fr-headline);
    font-size: 42px;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--ink-50);
    text-decoration: none;
    line-height: 1;
  }
  .pf-wordmark .glyph {
    font-style: italic;
    color: var(--accent-2);
    font-variation-settings: 'opsz' 72, 'wght' 600;
  }
  .pf-wordmark .dot { color: var(--signal); }
  .pf-sub {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
  }
  .pf-sub b { color: var(--ink-100); font-weight: 500; }

  .pf-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 22px;
  }
  .pf-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .pf-col h5 {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-2);
    margin: 0 0 4px;
    font-weight: 500;
  }
  .pf-col a {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink-200);
    text-decoration: none;
    transition: color 0.15s;
  }
  .pf-col a:hover { color: var(--accent-2); }

  .pf-colophon {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-wrap: wrap;
  }
  .pf-colophon b { color: var(--ink-100); font-weight: 500; }

  @media (max-width: 1100px) {
    .paper-footer { padding: 22px 32px 26px; }
    .pf-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  }
  @media (max-width: 640px) {
    .paper-footer { padding: 20px 20px 22px; }
    .pf-wordmark { font-size: 34px; }
    .pf-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
    .pf-colophon { flex-direction: column; gap: 8px; }
  }

  /* =================================================================
     WHY NOW — "Not another ___" positioning block
     ================================================================= */
  .why-now {
    padding: 8px 0 40px;
    border-bottom: 2px solid var(--rule-strong);
    margin-bottom: 48px;
  }
  .why-now-lead {
    font-family: var(--font-sans);
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.6;
    color: var(--ink-100);
    letter-spacing: -0.008em;
    max-width: 68ch;
    margin: 16px 0 28px;
  }
  .why-now-lead b { color: var(--ink-50); font-weight: 600; }
  .why-now-lead em { color: var(--accent-2); font-style: italic; font-weight: 500; }

  .not-another-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 28px;
  }
  @media (max-width: 1000px) { .not-another-grid { grid-template-columns: 1fr 1fr; } .not-another-grid .na-cell:nth-child(2) { border-right: none; } }
  @media (max-width: 640px)  { .not-another-grid { grid-template-columns: 1fr; } .not-another-grid .na-cell { border-right: none; } }

  .na-cell {
    padding: 28px 24px 26px;
    border-right: 1px solid var(--rule);
    position: relative;
  }
  .na-cell:last-child { border-right: none; }
  .na-cell .neg {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin-bottom: 10px;
  }
  .na-cell .neg::before { content: '× '; color: var(--danger); font-weight: 600; }
  .na-cell h4 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .na-cell h4 em { font-style: italic; color: var(--accent-2); }
  .na-cell p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-300);
  }
  .na-cell p b { color: var(--ink-100); font-weight: 500; }

  /* The closing manifesto pull */
  .why-now-pull,
  .film-pull {
    padding: 28px 32px;
    background: linear-gradient(90deg, var(--accent-wash), transparent);
    border-left: 2px solid var(--accent);
    border-radius: 0 2px 2px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .why-now-pull q,
  .film-pull q {
    flex: 1;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    font-weight: 400;
    quotes: none;
    min-width: 0;
  }
  .why-now-pull q::before, .why-now-pull q::after,
  .film-pull q::before, .film-pull q::after { content: ''; }
  .why-now-pull q em,
  .film-pull q em { color: var(--accent); }
  .why-now-pull .src,
  .film-pull .src {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-400);
    flex-shrink: 0;
    max-width: 180px;
    text-align: right;
    line-height: 1.5;
  }
  .why-now-pull .src b,
  .film-pull .src b { color: var(--ink-100); font-weight: 500; }
  .film-pull { margin: 0 0 28px; }
  a.src {
    text-decoration: none;
    transition: color 0.15s;
  }
  a.src:hover { color: var(--accent-2); }
  a.src:hover b { color: var(--signal); }

  /* Stages band — Capture → Memory → Activate */
  .stages-band {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 28px;
    background: var(--ink-900);
    border: 1px solid var(--rule);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
  }
  .stages-band::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--signal) 100%);
  }
  @media (max-width: 900px) { .stages-band { grid-template-columns: 1fr; } .stages-band .stage-cell { border-right: none; border-bottom: 1px solid var(--rule); } .stages-band .stage-cell:last-child { border-bottom: none; } }
  .stage-cell {
    padding: 22px 24px;
    border-right: 1px solid var(--rule);
    position: relative;
  }
  .stage-cell:last-child { border-right: none; }
  .stage-cell .idx {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .stage-cell .idx .n {
    color: var(--ink-500);
    letter-spacing: 0.1em;
  }
  .stage-cell h5 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-50);
    line-height: 1.1;
    margin-bottom: 8px;
  }
  .stage-cell h5 em { font-style: italic; color: var(--accent-2); }
  .stage-cell p {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-300);
  }
  .stage-cell:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -9px; top: 38px;
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--accent);
    background: var(--ink-900);
    padding: 2px 4px;
    z-index: 2;
  }
  @media (max-width: 900px) { .stage-cell:not(:last-child)::after { display: none; } }

  /* Mobile hero input */
  .m-ask-input {
    margin: 14px 0 16px;
    padding: 10px 10px 10px 14px;
    background: var(--ink-900);
    border: 1px solid var(--rule-strong);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .m-ask-input .av {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    flex-shrink: 0;
  }
  .m-ask-input .txt {
    flex: 1;
    font-family: var(--font-editorial);
    font-style: italic;
    font-size: 12px;
    color: var(--ink-400);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-ask-input .send {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .m-ask-input .send svg { width: 11px; height: 11px; }

  /* =================================================================
     PREVIEW FOOTER
     ================================================================= */
  .preview-footer {
    max-width: 1520px;
    margin: 0 auto;
    padding: 48px 48px 64px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-500);
    display: flex;
    justify-content: space-between;
  }
  @media (max-width: 640px) { .preview-footer { flex-direction: column; gap: 12px; text-align: center; padding: 32px 24px; } }

  @media (max-width: 720px) {
    .preview-header { padding: 56px 24px 36px; }
    .preview-section { padding: 20px 24px 56px; }
    .preview-title { font-size: 44px; }
  }