:root {
      --bg-primary: #0A0A0F;
      --bg-secondary: #12121A;
      --bg-accent: #1A1A2E;
      --text-primary: #FFFFFF;
      --text-secondary: #A0A0B8;
      --text-muted: #6B6B7E;
      --accent-green: #4ADE80;
      --accent-purple: #A78BFA;
      --accent-amber: #FBBF24;
      --accent-red: #F87171;
      --accent-blue: #60A5FA;
      /* RGB tuples for opacity overlays — these MUST theme-switch in light mode */
      --accent-green-rgb: 74, 222, 128;
      --accent-purple-rgb: 167, 139, 250;
      --accent-amber-rgb: 251, 191, 36;
      --accent-red-rgb: 248, 113, 113;
      --accent-blue-rgb: 96, 165, 250;
      --accent-purple-light-rgb: 192, 132, 252;
      /* Theme-aware surface RGB tuples (used for solid/transparent overlays in chips, panels) */
      --surface-fg-rgb: 255, 255, 255;  /* color of "ink" on transparent overlays */
      --surface-bg-rgb: 10, 10, 15;     /* color of "shadow" on transparent overlays */
      --border-subtle: rgba(var(--surface-fg-rgb), 0.08);
      --border-strong: rgba(var(--surface-fg-rgb), 0.15);
      --nav-bg: rgba(10, 10, 15, 0.85);
      --terminal-bg: #0D0D14;
      --terminal-text: #7CE38B;
      --code-bg: rgba(var(--surface-fg-rgb), 0.06);
      --selection-bg: rgba(var(--accent-green-rgb), 0.25);
      --shadow-cta: rgba(var(--accent-green-rgb), 0.3);
      --tile-bg: rgba(var(--surface-fg-rgb), 0.03);
      --tile-bg-hover: rgba(var(--surface-fg-rgb), 0.05);
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-display: 'Space Grotesk', 'Inter', sans-serif;
      --font-mono: 'Fira Code', 'SF Mono', monospace;
      --font-brand: 'Momo Trust Display', 'Space Grotesk', 'Inter', sans-serif;
      --max-width: 1200px;
    }
    :root[data-theme="light"] {
      --bg-primary: #FAFAF7;
      --bg-secondary: #FFFFFF;
      --bg-accent: #F3F3EE;
      --text-primary: #0A0A0F;
      --text-secondary: #52525B;
      --text-muted: #8A8A95;
      --accent-green: #15803D;
      --accent-purple: #6D28D9;
      --accent-amber: #B45309;
      --accent-red: #B91C1C;
      --accent-blue: #1D4ED8;
      --accent-green-rgb: 21, 128, 61;
      --accent-purple-rgb: 109, 40, 217;
      --accent-amber-rgb: 180, 83, 9;
      --accent-red-rgb: 185, 28, 28;
      --accent-blue-rgb: 29, 78, 216;
      --accent-purple-light-rgb: 124, 58, 237;
      --surface-fg-rgb: 10, 10, 15;       /* "ink" inverts on light */
      --surface-bg-rgb: 255, 255, 255;
      --border-subtle: rgba(var(--surface-fg-rgb), 0.10);
      --border-strong: rgba(var(--surface-fg-rgb), 0.18);
      --nav-bg: rgba(250, 250, 247, 0.85);
      --code-bg: rgba(var(--surface-fg-rgb), 0.06);
      --selection-bg: rgba(var(--accent-green-rgb), 0.20);
      --shadow-cta: rgba(var(--accent-green-rgb), 0.25);
      --tile-bg: rgba(var(--surface-fg-rgb), 0.02);
      --tile-bg-hover: rgba(var(--surface-fg-rgb), 0.04);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: var(--font-sans);
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 17px;
      line-height: 1.55;
      overflow-x: hidden;
      transition: background-color 0.4s ease, color 0.4s ease;
    }
    body::before { display: none; }
    [data-theme="light"] body::before { display: none; }

    h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
    a { color: var(--accent-green); text-decoration: none; transition: opacity 0.2s; }
    a:hover { opacity: 0.8; }
    code { font-family: var(--font-mono); background: var(--code-bg); padding: 2px 8px; border-radius: 4px; font-size: 0.9em; }
    ::selection { background: var(--selection-bg); color: var(--text-primary); }

    .container { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; width: 100%; }

    /* ========== DECK CONTROLS (top-right floating) ========== */
    .deck-controls {
      position: fixed; top: 20px; right: 24px; z-index: 1100;
      display: flex; align-items: center; gap: 10px;
    }
    .control-btn {
      background: var(--nav-bg);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      height: 38px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      cursor: pointer; padding: 0 16px;
      font-family: var(--font-sans); font-size: 13px; font-weight: 500;
      letter-spacing: 0.02em;
      transition: color 0.2s, border-color 0.2s, background-color 0.3s, transform 0.2s;
    }
    .control-btn.icon-only { width: 38px; padding: 0; }
    .control-btn:hover { color: var(--accent-green); border-color: var(--accent-green); }
    .control-btn svg { width: 16px; height: 16px; }
    .control-btn .icon-sun { display: none; }
    [data-theme="light"] .control-btn .icon-sun { display: block; }
    [data-theme="light"] .control-btn .icon-moon { display: none; }
    .deck-brand {
      position: fixed; top: 20px; left: 24px; z-index: 1100;
      font-family: var(--font-display); font-size: 15px; font-weight: 700;
      color: var(--accent-green); letter-spacing: 0.12em; text-transform: uppercase;
      background: var(--nav-bg);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      padding: 8px 16px; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .deck-brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 10px var(--accent-green); }

    /* ========== SLIDE BASE ========== */
    .slide {
      position: relative;
      padding: 100px 0;
      border-bottom: 1px solid var(--border-subtle);
      overflow: hidden;
    }
    .slide:last-of-type { border-bottom: none; }
    .slide-num {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.15em;
      margin-bottom: 24px;
      display: block;
    }
    .slide-label {
      font-family: var(--font-sans);
      font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
      font-weight: 600; color: var(--accent-green); margin-bottom: 12px;
    }
    .slide-label.amber { color: var(--accent-amber); }
    .slide-label.purple { color: var(--accent-purple); }
    .slide-label.red { color: var(--accent-red); }
    .slide-label.blue { color: var(--accent-blue); }
    .slide h2 {
      font-size: clamp(32px, 4.5vw, 56px);
      line-height: 1.05;
      margin-bottom: 28px;
      max-width: 900px;
    }
    .slide h2 .accent { color: var(--accent-green); }
    .slide h2 .accent-amber { color: var(--accent-amber); }
    .slide h2 .accent-purple { color: var(--accent-purple); }
    .slide h3 {
      font-size: 22px; font-weight: 600;
      margin-bottom: 12px; letter-spacing: -0.01em;
    }
    .slide p.lead {
      font-size: 19px; color: var(--text-secondary);
      max-width: 720px; line-height: 1.55; margin-bottom: 36px;
    }
    .slide p.lead-mini {
      font-family: var(--font-mono);
      font-size: 13px; color: var(--text-secondary);
      letter-spacing: 0.02em; margin-bottom: 12px;
      max-width: 760px;
    }
    .footnote { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
    sup.ref {
      font-family: var(--font-mono); font-size: 0.7em;
      color: var(--accent-green); margin-left: 2px; font-weight: 500;
      cursor: help;
    }

    /* ========== PRESENT MODE ========== */
    body.mode-present { overflow: hidden; height: 100vh; }
    body.mode-present .slide {
      display: none;
      padding: 70px 32px 80px;
      min-height: 100vh;
      border-bottom: none;
      align-items: center;
      justify-content: center;
    }
    body.mode-present .slide.active {
      display: flex;
      flex-direction: column;
      animation: slideEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: 100vh;
      align-items: center;
      justify-content: safe center;
    }
    /* TYPOGRAPHY STANDARDIZATION FOR PRESENT MODE.
       Each slide's h2 was rendering at a different size (slide 2 at 56px
       because it inherited the un-clamped scroll-mode default; others at
       30/36/28 from per-slide overrides). Lock to a single value so the
       visual rhythm is consistent across the deck. Smaller-height
       breakpoints can override below. */
    body.mode-present .slide h2 {
      font-size: 34px;
      line-height: 1.14;
      margin-bottom: 14px;
      letter-spacing: -0.015em;
    }
    @media (max-height: 950px) {
      body.mode-present .slide h2 { font-size: 30px; margin-bottom: 12px; }
    }
    @media (max-height: 820px) {
      body.mode-present .slide h2 { font-size: 26px; margin-bottom: 10px; }
      /* Reserve gutter so the scrollbar never causes layout shift, and
         so the user can always see there's more below. */
      scrollbar-gutter: stable;
      scrollbar-width: thin;
      scrollbar-color: rgba(var(--accent-green-rgb), 0.45) transparent;
    }
    /* Visible custom scrollbar in present mode — discoverable so the
       presenter knows tall slides have more below. Up/Down arrows also
       scroll (see scripts.js). */
    body.mode-present .slide.active::-webkit-scrollbar {
      width: 10px;
    }
    body.mode-present .slide.active::-webkit-scrollbar-track {
      background: transparent;
    }
    body.mode-present .slide.active::-webkit-scrollbar-thumb {
      background: rgba(var(--accent-green-rgb), 0.35);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: content-box;
    }
    body.mode-present .slide.active::-webkit-scrollbar-thumb:hover {
      background: rgba(var(--accent-green-rgb), 0.55);
      background-clip: content-box;
    }
    @keyframes slideEnter {
      0% { opacity: 0; transform: translateY(16px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    body.mode-present .slide .container {
      max-width: 1100px;
      width: 100%;
      margin: 0;
    }
    body.mode-present .footer { display: none; }
    body.mode-present .deck-brand { display: none; }
    .present-only { display: none; }
    body.mode-present .present-only { display: flex; }
    body.mode-present .scroll-only { display: none; }

    .present-bar {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      z-index: 1100;
      background: var(--nav-bg);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      padding: 10px 18px; border-radius: 999px;
      align-items: center; gap: 16px;
      font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
    }
    .present-bar .counter { font-weight: 500; color: var(--text-primary); }
    .present-bar .dots { display: flex; gap: 6px; align-items: center; }
    .present-bar .dot {
      width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong);
      cursor: pointer; transition: background 0.2s, transform 0.2s;
    }
    .present-bar .dot.active { background: var(--accent-green); transform: scale(1.3); }
    .present-bar .dot:hover { background: var(--accent-green); }
    .present-bar .nav-arrow {
      background: transparent; border: none; color: var(--text-secondary);
      width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color 0.2s;
    }
    .present-bar .nav-arrow:hover { color: var(--accent-green); }

    /* ========== SLIDE 1 — COVER ========== */
    .cover { text-align: center; padding-top: 140px; }
    body.mode-present .cover { padding-top: 70px; }
    .cover-orb {
      position: absolute; width: 700px; height: 700px; border-radius: 50%;
      background: radial-gradient(circle, rgba(var(--accent-green-rgb), 0.10) 0%, rgba(var(--accent-purple-rgb), 0.05) 40%, transparent 70%);
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      animation: orbFloat 8s ease-in-out infinite;
      pointer-events: none; z-index: 0;
    }
    @keyframes orbFloat {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -52%) scale(1.06); }
    }
    .cover .container { position: relative; z-index: 1; }
    .cover .badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px; letter-spacing: 0.18em;
      color: var(--accent-green);
      padding: 6px 14px; border: 1px solid var(--accent-green);
      border-radius: 999px; margin-bottom: 28px;
      background: rgba(var(--accent-green-rgb), 0.06);
    }
    .cover h1 {
      font-family: var(--font-display);
      font-size: clamp(56px, 9vw, 116px);
      font-weight: 700; line-height: 0.95;
      letter-spacing: -0.04em;
      margin-bottom: 28px;
    }
    .cover h1 .check { color: var(--accent-green); }
    .cover .tagline {
      font-size: clamp(20px, 2.4vw, 28px);
      color: var(--text-secondary); font-weight: 400;
      max-width: 760px; margin: 0 auto 16px; line-height: 1.4;
    }
    .cover .sub {
      font-size: 16px; color: var(--text-muted);
      max-width: 580px; margin: 0 auto 14px; line-height: 1.55;
    }
    .cover .sub.etymology {
      font-family: var(--font-mono);
      font-size: 13px; letter-spacing: 0.04em;
      color: var(--text-secondary);
      margin-bottom: 56px;
    }
    .cover .sub.etymology .accent { color: var(--accent-green); font-weight: 500; }
    .cover-meta {
      display: flex; justify-content: center; align-items: center;
      gap: 24px; flex-wrap: wrap;
      font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary);
      letter-spacing: 0.04em;
    }
    .cover-meta .pipe { color: var(--border-strong); }
    .cover-meta .accent { color: var(--accent-green); }

    /* ========== SLIDE 2 — TEAM ========== */
    .team-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 24px; margin-top: 36px;
    }
    .founder-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 16px; padding: 32px;
      position: relative;
      transition: background 0.2s, border-color 0.2s;
    }
    .founder-card:hover { background: var(--tile-bg-hover); border-color: var(--border-strong); }
    .founder-card .role-tag {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--accent-green); margin-bottom: 14px;
    }
    .founder-card h3 {
      font-size: 26px; font-weight: 600; margin-bottom: 6px;
    }
    .founder-card .location {
      font-size: 13px; color: var(--text-muted);
      font-family: var(--font-mono); margin-bottom: 18px;
    }
    .founder-card .bio {
      font-size: 15px; color: var(--text-secondary);
      line-height: 1.6;
    }
    .founder-card .bio strong { color: var(--text-primary); font-weight: 600; }
    .founder-card .bio-points {
      list-style: none; margin: 16px 0 0; padding: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .founder-card .bio-points li {
      position: relative; padding-left: 18px;
      font-size: 14px; line-height: 1.5; color: var(--text-secondary);
    }
    .founder-card .bio-points li::before {
      content: ''; position: absolute; left: 1px; top: 7px;
      width: 6px; height: 6px; border-radius: 2px; background: var(--accent-green);
    }
    .founder-card .bio-points li strong { color: var(--text-primary); font-weight: 600; }
    .proof-strip {
      margin-top: 36px;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .proof-card {
      background: var(--tile-bg);
      border-left: 2px solid var(--accent-green);
      padding: 18px 20px;
      border-radius: 4px;
    }
    .proof-card .num {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--accent-green); letter-spacing: 0.12em; margin-bottom: 8px;
    }
    .proof-card .text { font-size: 14px; color: var(--text-primary); line-height: 1.5; }
    .bridge-line {
      margin-top: 32px;
      font-family: var(--font-display);
      font-size: 20px; font-style: italic; color: var(--accent-green);
      letter-spacing: -0.01em;
    }

    /* ========== SLIDE 3 — PROBLEM ========== */
    .stat-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 16px; margin-top: 12px;
    }
    .stat-tile {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-top: 3px solid var(--accent-amber);
      border-radius: 12px; padding: 28px 24px;
      transition: background 0.2s, transform 0.2s;
    }
    .stat-tile:hover { background: var(--tile-bg-hover); transform: translateY(-2px); }
    .stat-tile .num {
      font-family: var(--font-display);
      font-size: clamp(40px, 4.5vw, 56px); font-weight: 700;
      color: var(--accent-amber); line-height: 1;
      letter-spacing: -0.03em; margin-bottom: 10px;
      font-variant-numeric: tabular-nums;
    }
    .stat-tile .label {
      font-size: 14px; color: var(--text-primary);
      line-height: 1.45; margin-bottom: 10px; font-weight: 500;
    }
    .stat-tile .src {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted);
    }
    .reg-callout {
      margin-top: 36px;
      background: linear-gradient(135deg, rgba(var(--accent-red-rgb), 0.10), rgba(var(--accent-amber-rgb), 0.08));
      border: 1px solid rgba(var(--accent-red-rgb), 0.25);
      border-radius: 12px; padding: 24px 28px;
      display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
    }
    [data-theme="light"] .reg-callout {
      background: linear-gradient(135deg, rgba(185,28,28,0.06), rgba(180,83,9,0.06));
      border-color: rgba(185,28,28,0.30);
    }
    .reg-callout .icon-block {
      width: 52px; height: 52px; border-radius: 12px;
      background: rgba(var(--accent-red-rgb), 0.15);
      display: flex; align-items: center; justify-content: center;
      color: var(--accent-red);
    }
    .reg-callout h4 {
      font-family: var(--font-display); font-size: 17px;
      font-weight: 600; margin-bottom: 4px;
      color: var(--accent-red);
    }
    .reg-callout p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; }

    /* ========== SLIDE 4 — SOLUTION ========== */
    .terminal {
      background: var(--terminal-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; overflow: hidden;
      font-family: var(--font-mono); font-size: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.25);
      margin-top: 28px;
    }
    .terminal-header {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px;
      background: rgba(var(--surface-fg-rgb), 0.03);
      border-bottom: 1px solid var(--border-subtle);
    }
    .terminal-header .dot { width: 11px; height: 11px; border-radius: 50%; }
    .terminal-header .dot.r { background: #FF5F57; }
    .terminal-header .dot.y { background: #FEBC2E; }
    .terminal-header .dot.g { background: #28C840; }
    .terminal-header .title {
      margin-left: 14px; font-size: 12px; color: rgba(var(--surface-fg-rgb), 0.5);
      letter-spacing: 0.05em;
    }
    .terminal-body { padding: 22px 24px; line-height: 1.85; color: rgba(var(--surface-fg-rgb), 0.92); }
    .terminal-body .prompt { color: var(--accent-green); margin-right: 8px; }
    .terminal-body .cmd { color: rgba(var(--surface-fg-rgb), 0.95); }
    .terminal-body .pass { color: var(--terminal-text); }
    .terminal-body .fail { color: #FF8888; }
    .terminal-body .warn { color: #FFD166; }
    .terminal-body .dim { color: rgba(var(--surface-fg-rgb), 0.4); }
    .terminal-body .line { white-space: pre; }
    .terminal-body .fix-prompt {
      margin-top: 14px; padding-top: 14px;
      border-top: 1px dashed rgba(var(--surface-fg-rgb), 0.12);
      color: var(--accent-purple);
    }
    /* Interactive CLI demo */
    .terminal[data-cli-demo] { cursor: pointer; position: relative; }
    .terminal[data-cli-demo] .cli-replay {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
      color: rgba(var(--surface-fg-rgb), 0.42); transition: color 0.18s ease;
      pointer-events: none;
    }
    .terminal[data-cli-demo]:hover .cli-replay { color: var(--accent-green); }
    .terminal[data-cli-demo] .cli-step {
      opacity: 0; transform: translateX(-4px);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .terminal[data-cli-demo] .cli-step.shown { opacity: 1; transform: none; }
    .terminal[data-cli-demo] .cli-step[data-step="cmd"] .cmd {
      display: inline-block; max-width: 0; overflow: hidden;
      white-space: nowrap; vertical-align: bottom;
    }
    .terminal[data-cli-demo].typing .cli-step[data-step="cmd"] .cmd {
      animation: cliType 1.3s steps(28, end) forwards;
    }
    .terminal[data-cli-demo] .cli-step[data-step="cmd"] .cmd::after { display: none; }
    @keyframes cliType { from { max-width: 0; } to { max-width: 30ch; } }
    .cli-cursor {
      display: inline-block; opacity: 0; color: var(--accent-green);
      margin-left: 2px; animation: cliBlink 1s step-end infinite;
    }
    .terminal[data-cli-demo].done .cli-cursor { opacity: 1; }
    @keyframes cliBlink { 50% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      .terminal[data-cli-demo] .cli-step,
      .terminal[data-cli-demo] .cli-cursor { opacity: 1; transform: none; animation: none; }
      .terminal[data-cli-demo].typing .cli-step[data-step="cmd"] .cmd { animation: none; max-width: none; }
    }
    .layer-grid {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 12px; margin-top: 32px;
    }
    .layer-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px; padding: 20px;
      transition: background 0.2s, border-color 0.2s;
    }
    .layer-card:hover { background: var(--tile-bg-hover); border-color: var(--accent-green); }
    .layer-card .layer-num {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--accent-green); margin-bottom: 10px; letter-spacing: 0.1em;
    }
    .layer-card h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 6px; }
    .layer-card .desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    .layer-card .tier {
      display: inline-block; margin-top: 10px;
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase;
    }
    .punchline {
      margin-top: 32px;
      padding: 20px 24px;
      background: rgba(var(--accent-green-rgb), 0.06);
      border-left: 3px solid var(--accent-green);
      border-radius: 0 8px 8px 0;
      font-family: var(--font-display);
      font-size: 22px; font-weight: 500;
      color: var(--text-primary); letter-spacing: -0.01em;
    }
    .punchline .accent { color: var(--accent-green); }

    /* ========== SLIDE 5 — HOW IT WORKS + VISION ========== */
    .two-act { display: grid; grid-template-rows: auto auto; gap: 36px; }
    .act-divider {
      display: flex; align-items: center; gap: 16px;
      padding: 12px 0;
    }
    .act-divider::before, .act-divider::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, transparent, var(--border-strong), transparent);
    }
    .act-divider .text {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--text-muted); letter-spacing: 0.1em;
      white-space: nowrap;
    }
    .act-divider .text .accent { color: var(--accent-green); }

    .work-cols {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 18px;
    }
    .work-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px; padding: 20px;
      position: relative;
    }
    .work-card .step-num {
      position: absolute; top: 14px; right: 16px;
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted);
    }
    .work-card .icon {
      width: 36px; height: 36px; border-radius: 8px;
      background: rgba(var(--accent-green-rgb), 0.10);
      color: var(--accent-green);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }
    .work-card h4 { font-family: var(--font-display); font-size: 16px; margin-bottom: 6px; }
    .work-card .desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

    .cascade {
      margin-top: 18px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 22px 24px;
    }
    .cascade-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
    }
    .cascade-header h4 { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
    .cascade-header .stat {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--accent-green);
    }
    .cascade-flow {
      display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 10px; align-items: stretch;
    }
    .cascade-step {
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 8px; padding: 12px 14px;
      display: flex; flex-direction: column; justify-content: center;
    }
    .cascade-step .tier {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-muted); letter-spacing: 0.12em;
      text-transform: uppercase; margin-bottom: 4px;
    }
    .cascade-step .model { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
    .cascade-step .pct {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--accent-green);
    }
    .cascade-step.warm { border-color: rgba(var(--accent-green-rgb), 0.4); }
    .cascade-step.mid { border-color: rgba(var(--accent-blue-rgb), 0.4); }
    .cascade-step.mid .pct { color: var(--accent-blue); }
    .cascade-step.hot { border-color: rgba(var(--accent-purple-rgb), 0.4); }
    .cascade-step.hot .pct { color: var(--accent-purple); }
    .cascade-arrow {
      align-self: center; color: var(--text-muted);
      font-family: var(--font-mono); font-size: 14px;
    }

    .horizon-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 18px;
    }
    .horizon-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-top: 3px solid var(--accent-purple);
      border-radius: 10px; padding: 22px;
    }
    .horizon-card.h1 { border-top-color: var(--accent-green); }
    .horizon-card.h2 { border-top-color: var(--accent-blue); }
    .horizon-card.h3 { border-top-color: var(--accent-purple); }
    .horizon-card .yr {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.12em; color: var(--text-muted);
      text-transform: uppercase; margin-bottom: 10px;
    }
    .horizon-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
    .horizon-card .desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 12px; }
    .horizon-card .tag {
      display: inline-block; padding: 3px 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-primary);
    }
    .horizon-card.h1 .tag { color: var(--accent-green); border-color: var(--accent-green); }
    .horizon-card.h2 .tag { color: var(--accent-blue); border-color: var(--accent-blue); }
    .horizon-card.h3 .tag { color: var(--accent-purple); border-color: var(--accent-purple); }

    /* ========== SLIDE 6 — MARKET ========== */
    .funnel-row {
      display: flex; align-items: stretch; gap: 8px;
      margin-top: 28px; flex-wrap: wrap;
    }
    .funnel-step {
      flex: 1 1 0; min-width: 130px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px; padding: 18px 16px;
      display: flex; flex-direction: column; justify-content: center;
      position: relative;
    }
    .funnel-step .val {
      font-family: var(--font-display);
      font-size: clamp(22px, 2.4vw, 30px);
      font-weight: 700; letter-spacing: -0.02em;
      margin-bottom: 6px;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }
    .funnel-step .lbl {
      font-size: 12px; color: var(--text-secondary);
      line-height: 1.4;
    }
    .funnel-step.target {
      background: rgba(var(--accent-green-rgb), 0.10);
      border-color: var(--accent-green);
    }
    .funnel-step.target .val { color: var(--accent-green); }
    .funnel-arrow {
      align-self: center;
      color: var(--text-muted);
      font-family: var(--font-mono); font-size: 18px;
    }
    .market-summary {
      margin-top: 28px;
      display: grid; grid-template-columns: 2fr 1fr;
      gap: 20px;
    }
    .market-equation {
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.08), rgba(var(--accent-purple-rgb), 0.04));
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 24px 28px;
    }
    .market-equation .formula {
      font-family: var(--font-mono);
      font-size: clamp(18px, 2.2vw, 24px);
      color: var(--text-primary);
      margin-bottom: 8px; letter-spacing: -0.01em;
    }
    .market-equation .formula .accent { color: var(--accent-green); font-weight: 700; }
    .market-equation .note { font-size: 13px; color: var(--text-secondary); }
    .market-comp {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 20px 22px;
    }
    .market-comp .lbl {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted); letter-spacing: 0.12em; margin-bottom: 8px;
      text-transform: uppercase;
    }
    .market-comp h4 { font-family: var(--font-display); font-size: 18px; margin-bottom: 6px; }
    .market-comp .stats {
      font-size: 13.5px; color: var(--text-secondary); line-height: 1.55;
    }
    .market-comp .stats strong { color: var(--text-primary); font-weight: 600; }
    .exclusion {
      margin-top: 18px;
      padding: 14px 18px;
      background: var(--tile-bg);
      border-left: 2px solid var(--accent-amber);
      border-radius: 0 8px 8px 0;
      font-size: 13px; color: var(--text-secondary);
    }
    .exclusion strong { color: var(--text-primary); }

    /* ========== SLIDE 7 — WHY NOW ========== */
    .whynow-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 16px; margin-top: 32px;
    }
    .whynow-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 24px;
      position: relative;
      transition: background 0.2s, border-color 0.2s, transform 0.2s;
    }
    .whynow-card:hover { background: var(--tile-bg-hover); border-color: var(--accent-green); transform: translateY(-2px); }
    .whynow-card .num-badge {
      width: 30px; height: 30px; border-radius: 50%;
      background: rgba(var(--accent-green-rgb), 0.12);
      color: var(--accent-green);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 13px; font-weight: 600;
      margin-bottom: 14px;
    }
    .whynow-card h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
    .whynow-card .desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
    .whynow-card .desc strong { color: var(--text-primary); font-weight: 600; }
    .convergence-line {
      margin-top: 32px;
      text-align: center;
      font-family: var(--font-display);
      font-size: 18px; color: var(--accent-green);
      font-style: italic; letter-spacing: -0.01em;
    }

    /* Why Now — shifts ladder on a timeline */
    .shifts-ladder {
      position: relative;
      max-width: 1180px;
      margin: 40px auto 0;
      padding: 120px 0 110px;
    }
    .ladder-cards {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      align-items: end;
      position: relative;
      z-index: 2;
    }
    .shift-card {
      position: relative;
      display: flex; flex-direction: column;
      min-height: 248px; height: 100%;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 18px 16px 14px;
      cursor: pointer;
      transform: translateY(40px);
      opacity: 0;
      transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.6s ease,
                  border-color 0.2s ease,
                  background 0.2s ease,
                  box-shadow 0.3s ease;
    }
    .shift-card.animate-on-scroll.visible {
      transform: translateY(calc(-1 * var(--rung-lift, 0px)));
      opacity: 1;
    }
    .shift-card[data-rung="0"] { --rung-lift: 0px; }
    .shift-card[data-rung="1"] { --rung-lift: 26px; }
    .shift-card[data-rung="2"] { --rung-lift: 52px; }
    .shift-card[data-rung="3"] { --rung-lift: 78px; }
    .shift-card[data-rung="4"] { --rung-lift: 104px; }
    .shift-card:hover {
      border-color: var(--accent-green);
      background: var(--tile-bg-hover);
      box-shadow: 0 8px 22px rgba(0,0,0,0.14);
    }
    .shift-card .shift-rung-date {
      font-family: var(--font-mono);
      font-size: 9.5px; letter-spacing: 0.16em;
      color: var(--accent-green);
      margin-bottom: 12px;
      text-transform: uppercase;
    }
    .shift-card .card-icon { margin-bottom: 10px; }
    .shift-card .card-stat {
      display: block;
      font-family: var(--font-display);
      font-size: 17px; font-weight: 700;
      line-height: 1.2;
      color: var(--text-primary);
      margin-bottom: 4px;
    }
    .shift-card .card-stat span {
      display: block;
      font-family: var(--font-sans);
      font-size: 11px; font-weight: 400;
      color: var(--text-secondary);
      margin-top: 4px;
      letter-spacing: 0;
      line-height: 1.35;
    }
    .shift-card h4 {
      font-family: var(--font-display);
      font-size: 14px; font-weight: 600;
      line-height: 1.3;
      margin: 10px 0 6px;
    }
    .shift-card .desc {
      font-size: 11.5px; line-height: 1.5;
      color: var(--text-secondary);
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .shift-card .shift-cta {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid var(--border-subtle);
      font-family: var(--font-mono);
      font-size: 10.5px; letter-spacing: 0.14em;
      color: var(--text-secondary);
      text-transform: uppercase;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .shift-card .shift-cta .cta-arrow {
      display: inline-block;
      transition: transform 0.25s ease;
    }
    .shift-card:hover .shift-cta { color: var(--accent-green); border-top-color: rgba(var(--accent-green-rgb), 0.22); }
    .shift-card:hover .shift-cta .cta-arrow { transform: translateX(3px); }
    .shift-card:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 2px;
    }

    .shift-detail { display: none; }

    /* Timeline rail at the bottom */
    .ladder-rail {
      position: absolute;
      left: 0; right: 0; bottom: 32px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      pointer-events: none;
    }
    .ladder-rail::before {
      content: '';
      position: absolute;
      left: 10%; right: 10%; top: 9px;
      height: 1px;
      background: linear-gradient(90deg,
        var(--border-subtle) 0%,
        var(--accent-green) 100%);
      transform-origin: left center;
      transform: scaleX(0);
      transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    }
    .shifts-ladder.rail-visible .ladder-rail::before { transform: scaleX(1); }
    .ladder-rail::after {
      content: '▸ NOW';
      position: absolute;
      right: 8%; top: -3px;
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.18em;
      color: var(--accent-green);
      opacity: 0;
      transition: opacity 0.4s ease 1.4s;
    }
    .shifts-ladder.rail-visible .ladder-rail::after { opacity: 1; }
    .rail-tick {
      position: relative;
      display: flex; flex-direction: column; align-items: center;
      padding-top: 4px;
    }
    .rail-tick .tick-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--bg-primary);
      border: 1.5px solid var(--accent-green);
      box-shadow: 0 0 0 3px rgba(var(--accent-green-rgb), 0.12);
      opacity: 0; transform: scale(0.6);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .shifts-ladder.rail-visible .rail-tick .tick-dot { opacity: 1; transform: scale(1); }
    .shifts-ladder.rail-visible .rail-tick:nth-child(1) .tick-dot { transition-delay: 0.4s; }
    .shifts-ladder.rail-visible .rail-tick:nth-child(2) .tick-dot { transition-delay: 0.6s; }
    .shifts-ladder.rail-visible .rail-tick:nth-child(3) .tick-dot { transition-delay: 0.8s; }
    .shifts-ladder.rail-visible .rail-tick:nth-child(4) .tick-dot { transition-delay: 1.0s; }
    .shifts-ladder.rail-visible .rail-tick:nth-child(5) .tick-dot { transition-delay: 1.2s; }
    .rail-tick .tick-label {
      margin-top: 8px;
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.12em;
      color: var(--text-secondary);
      text-transform: uppercase;
    }
    .rail-tick.is-now .tick-dot {
      background: var(--accent-green);
      box-shadow: 0 0 0 4px rgba(var(--accent-green-rgb), 0.22);
    }
    .rail-tick.is-now .tick-label {
      color: var(--accent-green);
      font-weight: 700;
    }

    @media (max-width: 1000px) {
      .shifts-ladder { padding: 30px 0 30px; }
      .ladder-cards {
        grid-template-columns: 1fr; gap: 16px;
        align-items: stretch;
      }
      .shift-card { padding-bottom: 44px; }
      .shift-card.animate-on-scroll.visible { transform: none; }
      .ladder-rail { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .shift-card { transition: none; }
      .shift-card.animate-on-scroll.visible { transform: translateY(calc(-1 * var(--rung-lift, 0px))); }
      .shifts-ladder.rail-visible .ladder-rail::before,
      .shifts-ladder.rail-visible .rail-tick .tick-dot { transition: none; }
    }

    /* Shift detail modal */
    .shift-modal {
      position: fixed; inset: 0;
      z-index: 9999;
      display: grid; place-items: center;
      padding: 32px 24px;
    }
    .shift-modal[hidden] { display: none; }
    body.modal-open { overflow: hidden; }
    .shift-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(8, 8, 14, 0.74);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      animation: modalFade 0.22s ease forwards;
      cursor: pointer;
    }
    [data-theme="light"] .shift-modal-backdrop { background: rgba(20, 24, 28, 0.45); }
    .shift-modal-card {
      position: relative;
      max-width: 660px; width: 100%;
      max-height: min(82vh, 760px);
      overflow-y: auto;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      padding: 36px 36px 30px;
      box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-green-rgb), 0.10);
      transform: translateY(14px) scale(0.98);
      opacity: 0;
      animation: modalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes modalFade { to { opacity: 1; } }
    @keyframes modalIn { to { transform: translateY(0) scale(1); opacity: 1; } }

    .shift-modal-close {
      position: absolute; top: 16px; right: 16px;
      width: 34px; height: 34px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      font-size: 20px; line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .shift-modal-close:hover {
      background: var(--tile-bg-hover);
      color: var(--text-primary);
      border-color: var(--accent-green);
      transform: rotate(90deg);
    }
    .shift-modal-close:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 2px;
    }

    .shift-modal-meta {
      display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
      font-family: var(--font-mono);
      font-size: 10.5px; letter-spacing: 0.18em;
      text-transform: uppercase;
      margin: 4px 0 14px;
    }
    .shift-modal-date { color: var(--accent-green); font-weight: 700; }
    .shift-modal-stat {
      color: var(--text-secondary);
      letter-spacing: 0.06em;
      padding-left: 14px;
      border-left: 1px solid var(--border-subtle);
    }
    .shift-modal-title {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin: 0 36px 18px 0;
    }
    .shift-modal-body h5 {
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.18em;
      color: var(--accent-green);
      text-transform: uppercase;
      margin: 0 0 10px;
    }
    .shift-modal-body p {
      font-size: 14px; line-height: 1.6;
      color: var(--text-secondary);
      margin: 0 0 14px;
    }
    .shift-modal-body ul { list-style: none; padding: 0; margin: 0; }
    .shift-modal-body li {
      font-size: 13.5px; line-height: 1.6;
      color: var(--text-secondary);
      padding: 12px 0 12px 18px;
      position: relative;
      border-bottom: 1px solid var(--border-subtle);
    }
    .shift-modal-body li:last-child { border-bottom: none; padding-bottom: 0; }
    .shift-modal-body li::before {
      content: '›';
      position: absolute; left: 2px; top: 11px;
      color: var(--accent-green);
      font-weight: 700; font-size: 16px;
    }
    .shift-modal-body li strong { color: var(--text-primary); font-weight: 600; }
    .shift-modal-body a {
      color: var(--accent-green);
      text-decoration: none;
      border-bottom: 1px dashed currentColor;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .shift-modal-body a:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); }

    @media (max-width: 600px) {
      .shift-modal { padding: 12px; }
      .shift-modal-card { padding: 28px 22px 22px; max-height: 92vh; border-radius: 12px; }
      .shift-modal-title { font-size: 20px; margin-right: 28px; }
      .shift-modal-body p { font-size: 13px; }
      .shift-modal-body li { font-size: 12.5px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .shift-modal-backdrop, .shift-modal-card { animation: none; opacity: 1; transform: none; }
      .shift-modal-close { transition: none; }
    }

    /* ---- Inline card expansion (Why Now + Risks) — replaces modal ---- */
    .ladder-cards { position: relative; }
    .risk-grid { position: relative; }

    .shift-card,
    .risk-card {
      transition: padding 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.4s ease,
                  border-color 0.3s ease,
                  background 0.3s ease,
                  opacity 0.3s ease,
                  filter 0.3s ease;
    }
    .shift-card .shift-detail,
    .risk-card .risk-detail {
      display: block;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      margin-top: 0;
      padding-top: 0;
      border-top: 1px dashed transparent;
      transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.4s ease 0.15s,
                  margin-top 0.4s ease,
                  padding-top 0.4s ease,
                  border-color 0.4s ease;
      text-align: left;
      pointer-events: none;
    }
    .shift-card.expanded,
    .risk-card.expanded {
      position: absolute;
      left: 0; right: 0; top: 0;
      z-index: 30;
      transform: none !important;
      padding: 26px 30px 28px;
      background: var(--tile-bg);
      border: 1px solid var(--accent-green);
      border-radius: 13px;
      box-shadow: inset 0 0 36px rgba(var(--accent-green-rgb), 0.08),
                  0 26px 64px rgba(0,0,0,0.45),
                  0 0 0 1px rgba(var(--accent-green-rgb), 0.30);
      animation: vgZoomIn 0.55s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: default;
    }
    .shift-card.expanded { padding-top: 28px; }
    .shift-card.expanded,
    .risk-card.expanded { height: auto; min-height: 0; }
    .shift-card.expanded .desc {
      -webkit-line-clamp: unset;
      display: block;
      overflow: visible;
    }
    .shift-card.expanded .shift-detail,
    .risk-card.expanded .risk-detail { max-height: none; }
    .shift-card.expanded .shift-detail,
    .risk-card.expanded .risk-detail {
      max-height: 1500px;
      opacity: 1;
      margin-top: 16px;
      padding-top: 16px;
      border-top-color: rgba(var(--accent-green-rgb), 0.22);
      pointer-events: auto;
    }
    .shift-card.expanded .shift-cta,
    .risk-card.expanded .risk-cta { display: none; }

    /* Detail content typography (mirrors shift-modal-body) */
    .shift-card .shift-detail h5,
    .risk-card .risk-detail strong:first-child {
      font-family: var(--font-mono);
      font-size: 10px; letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin: 0 0 10px;
      display: block;
    }
    .shift-card .shift-detail p,
    .risk-card .risk-detail {
      font-size: 13.5px; line-height: 1.6;
      color: var(--text-secondary);
      margin: 0 0 14px;
    }
    .shift-card .shift-detail ul {
      list-style: none; padding: 0; margin: 0;
    }
    .shift-card .shift-detail li {
      font-size: 13px; line-height: 1.6;
      color: var(--text-secondary);
      padding: 9px 0 9px 18px;
      position: relative;
      border-bottom: 1px solid var(--border-subtle);
    }
    .shift-card .shift-detail li:last-child { border-bottom: none; padding-bottom: 0; }
    .shift-card .shift-detail li::before {
      content: '\203A';
      position: absolute; left: 2px; top: 9px;
      color: var(--accent-green);
      font-weight: 700; font-size: 16px;
    }
    .shift-card .shift-detail li strong { color: var(--text-primary); font-weight: 600; }
    .shift-card .shift-detail a {
      color: var(--accent-green);
      text-decoration: none;
      border-bottom: 1px dashed rgba(var(--accent-green-rgb), 0.4);
    }
    .shift-card .shift-detail a:hover { color: var(--text-primary); border-bottom-color: var(--text-primary); }

    /* Sibling dim while one card is expanded */
    .ladder-cards.has-expanded .shift-card:not(.expanded),
    .risk-grid.has-expanded .risk-card:not(.expanded) {
      opacity: 0.18;
      filter: blur(2px);
      pointer-events: none;
    }

    /* Backdrop dim/blur behind an expanded card so the card is easy to read */
    .ladder-cards.has-expanded::before,
    .risk-grid.has-expanded::before {
      content: '';
      position: absolute;
      inset: -100vh -100vw;
      background: rgba(8, 8, 14, 0.72);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      pointer-events: none;
      z-index: 20;
      animation: cardBackdropFade 0.22s ease forwards;
    }
    [data-theme="light"] .ladder-cards.has-expanded::before,
    [data-theme="light"] .risk-grid.has-expanded::before {
      background: rgba(20, 24, 28, 0.55);
    }
    @keyframes cardBackdropFade { from { opacity: 0; } to { opacity: 1; } }
    @media (prefers-reduced-motion: reduce) {
      .ladder-cards.has-expanded::before,
      .risk-grid.has-expanded::before { animation: none; }
    }

    /* Inline close button (injected by JS) */
    .card-inline-close {
      position: absolute; top: 12px; right: 12px;
      width: 30px; height: 30px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      border-radius: 50%;
      font-size: 17px; line-height: 1;
      cursor: pointer;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease 0.2s,
                  background 0.2s ease,
                  color 0.2s ease,
                  border-color 0.2s ease,
                  transform 0.2s ease;
      z-index: 4;
      display: flex; align-items: center; justify-content: center;
    }
    .shift-card.expanded .card-inline-close,
    .risk-card.expanded .card-inline-close {
      opacity: 1; pointer-events: auto;
    }
    .card-inline-close:hover {
      color: var(--accent-green);
      border-color: var(--accent-green);
      transform: rotate(90deg);
    }
    .card-inline-close:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
      .shift-card.expanded, .risk-card.expanded { animation: none; }
    }

    /* ----- GTM sequencing ribbon (Now / Next / Later) ----- */
    /* ----- Market panel toggle (mirrors moat/solution toggle) ----- */
    .market-slide .container { position: relative; }
    .market-toggle {
      position: absolute;
      top: 0; right: 32px;
      display: inline-flex; align-items: center; gap: 12px;
      z-index: 10;
      padding: 6px 8px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-secondary); letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .market-toggle .market-pos { min-width: 56px; text-align: center; font-weight: 500; color: var(--text-primary); }
    .market-toggle .market-pos .total { color: var(--text-muted); }
    .market-toggle .market-nav {
      width: 30px; height: 30px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: none; color: var(--text-secondary);
      cursor: pointer; transition: color 0.18s, background 0.18s, transform 0.18s;
    }
    .market-toggle .market-nav:hover:not(:disabled) {
      color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.10);
      transform: translateX(var(--nudge, 0));
    }
    .market-toggle .market-nav.prev:hover:not(:disabled) { --nudge: -2px; }
    .market-toggle .market-nav.next:hover:not(:disabled) { --nudge:  2px; }
    .market-toggle .market-nav:disabled { opacity: 0.25; cursor: not-allowed; }
    .market-toggle .market-nav svg { width: 14px; height: 14px; }
    .market-toggle .market-label {
      padding-right: 4px; color: var(--text-muted);
      border-right: 1px solid var(--border-subtle); margin-right: 4px;
    }
    .market-panel { display: none; animation: marketPanelFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .market-panel.active { display: block; }
    @keyframes marketPanelFade { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) { .market-panel { animation: none; } }
    @media (max-width: 640px) {
      .market-toggle { right: 20px; top: -4px; gap: 6px; padding: 4px 6px; font-size: 10px; }
      .market-toggle .market-nav { width: 26px; height: 26px; }
      .market-toggle .market-label { display: none; }
    }

    /* ----- TAM → SAM → SOM funnel ----- */
    .tam-funnel { display: flex; flex-direction: column; gap: 11px; margin: 18px 0 18px; }
    .tam-tier {
      display: flex; align-items: center; gap: 24px;
      padding: 16px 22px;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      background: var(--tile-bg);
    }
    .tam-tier.tam-tam { width: 100%;  border-left: 3px solid var(--accent-blue); }
    .tam-tier.tam-sam { width: 86%;   border-left: 3px solid var(--accent-green); }
    .tam-tier.tam-som { width: 72%;   border-left: 3px solid var(--accent-green); background: rgba(var(--accent-green-rgb), 0.07); }
    .tam-tier-main { display: flex; flex-direction: column; gap: 1px; min-width: 156px; flex-shrink: 0; }
    .tam-tier-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); }
    .tam-tier-val { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
    .tam-tam .tam-tier-val { color: var(--accent-blue); }
    .tam-sam .tam-tier-val, .tam-som .tam-tier-val { color: var(--accent-green); }
    .tam-tier-grow { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
    .tam-tier-body { border-left: 1px solid var(--border-subtle); padding-left: 22px; }
    .tam-tier-desc { font-size: 13.5px; color: var(--text-primary); line-height: 1.45; margin-bottom: 5px; }
    .tam-tier-src { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); line-height: 1.45; }
    .tam-tier-src .ref { color: var(--text-muted); }
    .tam-comps {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
      padding: 13px 18px; border: 1px dashed var(--border-subtle); border-radius: 10px;
    }
    .tam-comps-label { font-size: 12.5px; color: var(--text-secondary); margin-right: 2px; }
    .tam-comp { font-size: 12.5px; color: var(--text-muted); }
    .tam-comp strong { color: var(--text-primary); font-weight: 600; }

    /* ----- Expansion map (market panel 3) ----- */
    .exp-map {
      display: grid;
      grid-template-columns: 178px 1fr;
      gap: 22px;
      align-items: stretch;
      margin: 14px 0 16px;
    }
    /* Core — today's wedge, glowing */
    .exp-core {
      position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 20px 14px; text-align: center;
      border-radius: 16px;
      border: 1px solid rgba(var(--accent-green-rgb), 0.35);
      background:
        radial-gradient(120% 80% at 50% 28%, rgba(var(--accent-green-rgb), 0.16), rgba(var(--accent-green-rgb), 0) 70%),
        var(--tile-bg);
    }
    .exp-core-glow {
      position: absolute; inset: -1px; border-radius: 16px; pointer-events: none;
      box-shadow: 0 0 30px rgba(var(--accent-green-rgb), 0.22);
      animation: expCorePulse 3.4s ease-in-out infinite;
    }
    @keyframes expCorePulse {
      0%, 100% { box-shadow: 0 0 26px rgba(var(--accent-green-rgb), 0.18); }
      50%      { box-shadow: 0 0 46px rgba(var(--accent-green-rgb), 0.40); }
    }
    .exp-core-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .exp-core-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--accent-green); }
    .exp-core-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.08; color: var(--text-primary); margin: 8px 0 5px; }
    .exp-core-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; }

    .exp-vectors { display: flex; flex-direction: column; gap: 10px; }
    .exp-vector {
      position: relative;
      display: grid; grid-template-columns: 36px 196px 1fr; align-items: center; gap: 16px;
      padding: 12px 62px 12px 18px;
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--border-subtle);
      border-radius: 12px;
      background: var(--tile-bg);
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
      overflow: hidden;
    }
    .exp-vector:hover { transform: translateX(5px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); }
    .exp-vector.now  { border-left-color: var(--accent-green); }
    .exp-vector.next { border-left-color: var(--accent-amber); opacity: 0.92; }
    .exp-vector.later{ border-left-color: var(--text-muted);  opacity: 0.74; }
    .exp-vector.next:hover, .exp-vector.later:hover { opacity: 1; }
    /* animated energy flowing down the left accent of the NOW vectors */
    .exp-vector.now::before {
      content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--accent-green) 50%, transparent 100%);
      background-size: 100% 220%;
      animation: expFlow 2.4s linear infinite;
    }
    @keyframes expFlow { 0% { background-position: 0 -110%; } 100% { background-position: 0 110%; } }

    .exp-vec-num {
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 700; font-size: 16px;
      background: rgba(var(--accent-green-rgb), 0.12); color: var(--accent-green);
      border: 1px solid rgba(var(--accent-green-rgb), 0.30);
    }
    .exp-vector.next .exp-vec-num  { background: rgba(var(--accent-amber-rgb), 0.12); color: var(--accent-amber); border-color: rgba(var(--accent-amber-rgb), 0.30); }
    .exp-vector.later .exp-vec-num { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border-subtle); }

    .exp-vec-head { display: flex; align-items: center; gap: 9px; }
    .exp-vec-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .exp-vec-phase { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; padding: 2px 7px; border-radius: 999px; }
    .exp-vec-phase.now  { color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.12); border: 1px solid rgba(var(--accent-green-rgb), 0.30); }
    .exp-vec-phase.next { color: var(--accent-amber); background: rgba(var(--accent-amber-rgb), 0.12); border: 1px solid rgba(var(--accent-amber-rgb), 0.30); }
    .exp-vec-phase.later{ color: var(--text-muted);  background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
    .exp-vec-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .exp-vec-time {
      position: absolute; top: 11px; right: 13px; z-index: 2;
      font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
      padding: 2px 7px; border-radius: 4px; white-space: nowrap;
    }
    .exp-vector.now   .exp-vec-time { color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.12); }
    .exp-vector.next  .exp-vec-time { color: var(--accent-amber); background: rgba(var(--accent-amber-rgb), 0.12); }
    .exp-vector.later .exp-vec-time { color: var(--text-muted); background: var(--bg-secondary); }

    /* vector 1 — surfaces × checks matrix (5 checks incl. Policy) */
    .exp-matrix { display: inline-flex; flex-direction: column; gap: 4px; }
    .exp-mx-head, .exp-mx-row { display: grid; grid-template-columns: 50px repeat(5, 22px); gap: 5px; align-items: center; }
    .exp-mx-head span { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); text-align: center; }
    .exp-mx-rl { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); text-align: right; }
    .exp-mx-row i {
      width: 22px; height: 13px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--bg-secondary);
    }
    .exp-mx-row i.on {
      background: var(--accent-green); border-color: var(--accent-green);
      box-shadow: 0 0 8px rgba(var(--accent-green-rgb), 0.45);
      animation: expCellPulse 3s ease-in-out infinite;
    }
    @keyframes expCellPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

    /* vector 2 — service chips: .on = live now, default = roadmap (outlined) */
    .exp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .exp-chips span {
      font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
      padding: 5px 11px; border-radius: 6px;
      background: transparent; border: 1px dashed var(--border-subtle);
    }
    .exp-chips span.on {
      color: var(--text-primary); border-style: solid;
      background: rgba(var(--accent-green-rgb), 0.12); border-color: rgba(var(--accent-green-rgb), 0.40);
    }

    /* vectors 3, 4 — progression flow */
    .exp-flow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
    .exp-flow-node {
      font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary);
      padding: 5px 12px; border-radius: 6px;
      border: 1px dashed var(--border-subtle); background: var(--bg-secondary);
    }
    .exp-flow-node.on {
      color: var(--text-primary); border-style: solid;
      border-color: rgba(var(--accent-green-rgb), 0.40); background: rgba(var(--accent-green-rgb), 0.08);
    }
    .exp-flow-arr { color: var(--text-muted); font-size: 14px; }

    .exp-focus {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 18px; border-radius: 0 10px 10px 0;
      background: rgba(var(--accent-green-rgb), 0.07);
      border-left: 3px solid var(--accent-green);
      font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
    }
    .exp-focus strong { color: var(--text-primary); font-weight: 600; }
    .exp-focus-pulse {
      flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
      background: var(--accent-green); box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.5);
      animation: expFocusPulse 2.2s ease-out infinite;
    }
    @keyframes expFocusPulse {
      0%   { box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.5); }
      70%  { box-shadow: 0 0 0 10px rgba(var(--accent-green-rgb), 0); }
      100% { box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0); }
    }

    /* ----- TAM grows with every vector (ascending bars) ----- */
    .exp-tam {
      margin-top: 13px;
      padding: 12px 20px 10px;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.05), transparent 60%), var(--tile-bg);
    }
    /* ungated present compaction so the TAM captions clear the floating bar */
    body.mode-present .slide[data-slide="4"] .exp-map  { margin: 8px 0 10px !important; }
    body.mode-present .slide[data-slide="4"] .exp-vectors { gap: 7px !important; }
    body.mode-present .slide[data-slide="4"] .exp-vector  { padding: 9px 58px 9px 16px !important; }
    body.mode-present .slide[data-slide="4"] .exp-tam  { margin-top: 8px !important; padding: 9px 18px 7px !important; }
    body.mode-present .slide[data-slide="4"] .exp-tam-lead { margin-bottom: 7px !important; }
    body.mode-present .slide[data-slide="4"] .exp-tam-track { height: 42px !important; }
    body.mode-present .slide[data-slide="4"] .exp-tam-note { margin-top: 8px !important; padding-top: 7px !important; font-size: 10px !important; }
    .exp-tam-lead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
    .exp-tam-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-primary); }
    .exp-tam-sub { font-size: 12px; color: var(--text-muted); }
    .exp-tam-bars { display: flex; align-items: flex-end; gap: 12px; }
    .exp-tam-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .exp-tam-val { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--accent-green); }
    .exp-tam-bar.now   .exp-tam-val { font-size: 23px; opacity: 0.92; }
    .exp-tam-bar.next  .exp-tam-val { font-size: 26px; }
    .exp-tam-bar.later .exp-tam-val { font-size: 30px; text-shadow: 0 0 22px rgba(var(--accent-green-rgb), 0.5); }
    .exp-tam-track {
      width: 100%; height: 76px; border-radius: 8px;
      background: var(--bg-secondary); border: 1px solid var(--border-subtle);
      display: flex; align-items: flex-end; overflow: hidden;
    }
    .exp-tam-fill {
      width: 100%; height: var(--h, 50%);
      border-radius: 7px 7px 0 0;
      background: linear-gradient(180deg, var(--accent-green), rgba(var(--accent-green-rgb), 0.40));
      transform-origin: bottom; transform: scaleY(0);
      animation: expTamGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    /* solid green throughout — height carries the growth, glow intensifies at the top */
    .exp-tam-bar.now   .exp-tam-fill { animation-delay: 0.05s; }
    .exp-tam-bar.next  .exp-tam-fill { box-shadow: 0 0 16px rgba(var(--accent-green-rgb), 0.30); animation-delay: 0.20s; }
    .exp-tam-bar.later .exp-tam-fill { box-shadow: 0 0 28px rgba(var(--accent-green-rgb), 0.55); animation-delay: 0.35s; }
    @keyframes expTamGrow { to { transform: scaleY(1); } }
    .exp-tam-cap { font-family: var(--font-mono); font-size: 10px; line-height: 1.45; color: var(--text-muted); text-align: center; }
    .exp-tam-cap b { letter-spacing: 0.1em; }
    .exp-tam-bar.now   .exp-tam-cap b { color: var(--accent-green); }
    .exp-tam-bar.next  .exp-tam-cap b { color: var(--accent-amber); }
    .exp-tam-bar.later .exp-tam-cap b { color: var(--text-secondary); }
    .exp-tam-arrow { align-self: center; color: var(--accent-green); opacity: 0.6; font-size: 18px; margin-bottom: 30px; }
    .exp-tam-note {
      margin: 11px 0 0; padding-top: 9px;
      border-top: 1px solid var(--border-subtle);
      font-size: 11px; line-height: 1.5; color: var(--text-muted);
    }
    .exp-tam-note strong { color: var(--text-secondary); font-weight: 600; }
    .exp-tam-note .ref { color: var(--text-muted); }

    @media (prefers-reduced-motion: reduce) {
      .exp-core-glow, .exp-vector.now::before, .exp-mx-row i.on, .exp-focus-pulse { animation: none; }
      .exp-tam-fill { animation: none; transform: scaleY(1); }
    }
    @media (max-width: 760px) {
      .exp-map { grid-template-columns: 1fr; }
      .exp-vector { grid-template-columns: 32px 1fr; }
      .exp-vec-viz { grid-column: 1 / -1; }
    }

    .gtm-seq {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: stretch;
      gap: 10px;
      margin-top: 6px;
    }
    .gtm-seq-step {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
      padding: 12px 16px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      position: relative;
    }
    .gtm-seq-step.now    { border-color: rgba(var(--accent-green-rgb), 0.55); background: rgba(var(--accent-green-rgb), 0.06); }
    .gtm-seq-step.next   { border-color: rgba(var(--accent-blue-rgb), 0.45);  background: rgba(var(--accent-blue-rgb), 0.05); }
    .gtm-seq-step.later  { border-color: rgba(var(--accent-purple-rgb), 0.45);background: rgba(var(--accent-purple-rgb), 0.05); }
    .gtm-seq-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .gtm-seq-step.now   .gtm-seq-tag { color: var(--accent-green); }
    .gtm-seq-step.next  .gtm-seq-tag { color: var(--accent-blue); }
    .gtm-seq-step.later .gtm-seq-tag { color: var(--accent-purple); }
    .gtm-seq-label {
      font-family: var(--font-display);
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.2;
    }
    .gtm-seq-motion {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    .gtm-seq-arrow {
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
    }
    .gtm-seq-arrow svg { width: 18px; height: 18px; }

    /* ----- Vercel playbook timeline (mirrors Vercel's 4-stage flywheel) ----- */
    .vercel-playbook {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
      gap: 8px;
      align-items: stretch;
      margin-top: 6px;
    }
    .vp-stage {
      display: grid;
      grid-template-rows: auto 1fr 1fr;
      gap: 8px;
      padding: 14px 14px 12px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      position: relative;
    }
    .vp-stage-num {
      position: absolute;
      top: 8px; right: 12px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text-muted);
      letter-spacing: 0.12em;
    }
    .vp-stage-vercel,
    .vp-stage-aucert {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 4px;
      padding: 10px 10px;
      border-radius: 8px;
      min-height: 86px;
    }
    .vp-stage-vercel { background: rgba(var(--surface-fg-rgb), 0.03); }
    .vp-stage-aucert { background: rgba(var(--accent-green-rgb), 0.07); border: 1px solid rgba(var(--accent-green-rgb), 0.25); }
    .vp-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .vp-stage-aucert .vp-tag { color: var(--accent-green); }
    .vp-headline {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.25;
    }
    .vp-headline code {
      font-family: var(--font-mono);
      font-size: 12.5px;
      background: transparent;
      padding: 0;
      color: var(--text-primary);
    }
    .vp-detail {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.35;
    }
    .vp-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      color: var(--text-muted);
    }
    .vp-arrow svg { width: 16px; height: 16px; }

    .vp-also {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      margin-top: 12px;
      padding: 10px 14px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .vp-also-label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .vp-also-comp strong { color: var(--text-primary); font-weight: 600; }
    .vp-also-dot { opacity: 0.4; }
    .vp-price {
      font-family: var(--font-mono);
      font-weight: 700;
      letter-spacing: 0.04em;
      color: var(--accent-green);
    }
    .vp-stage-vercel .vp-price { color: var(--text-secondary); }

    /* ========== SLIDE 8 — COMPETITION & MOAT ========== */
    .comp-table {
      width: 100%;
      border-collapse: separate; border-spacing: 0;
      margin-top: 22px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; overflow: hidden;
    }
    .comp-table th, .comp-table td {
      padding: 14px 18px;
      text-align: left;
      font-size: 13.5px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .comp-table thead th {
      background: rgba(var(--surface-fg-rgb), 0.02);
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted); letter-spacing: 0.12em;
      text-transform: uppercase; font-weight: 500;
    }
    [data-theme="light"] .comp-table thead th { background: rgba(0,0,0,0.02); }
    .comp-table tbody tr:last-child td { border-bottom: none; }
    .comp-table tbody tr.us {
      background: rgba(var(--accent-green-rgb), 0.06);
    }
    .comp-table .player { font-weight: 600; color: var(--text-primary); }
    .comp-table .player .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
    .comp-table .sells { color: var(--text-secondary); }
    .comp-table .why { color: var(--text-secondary); }
    .comp-table tbody tr.us .player { color: var(--accent-green); }
    .comp-table tbody tr.us .why { color: var(--text-primary); font-weight: 500; }

    /* ========== SLIDE 7 — PANEL TOGGLE (mirrors slide 4 solution-toggle) ========== */
    .moat-slide .container { position: relative; }

    .moat-toggle {
      position: absolute;
      top: 0; right: 32px;
      display: inline-flex; align-items: center; gap: 12px;
      z-index: 10;
      padding: 6px 8px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 999px;
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-secondary); letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .moat-toggle .moat-pos { min-width: 56px; text-align: center; font-weight: 500; color: var(--text-primary); }
    .moat-toggle .moat-pos .total { color: var(--text-muted); }
    .moat-toggle .moat-nav {
      width: 30px; height: 30px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent; border: none;
      color: var(--text-secondary);
      cursor: pointer;
      transition: color 0.18s, background 0.18s, transform 0.18s;
    }
    .moat-toggle .moat-nav:hover:not(:disabled) {
      color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.10);
      transform: translateX(var(--nudge, 0));
    }
    .moat-toggle .moat-nav.prev:hover:not(:disabled) { --nudge: -2px; }
    .moat-toggle .moat-nav.next:hover:not(:disabled) { --nudge:  2px; }
    .moat-toggle .moat-nav:disabled { opacity: 0.25; cursor: not-allowed; }
    .moat-toggle .moat-nav svg { width: 14px; height: 14px; }
    .moat-toggle .moat-label {
      padding-right: 4px; color: var(--text-muted);
      border-right: 1px solid var(--border-subtle);
      margin-right: 4px;
    }

    .moat-panel { display: none; animation: moatPanelFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .moat-panel.active { display: block; }
    @keyframes moatPanelFade {
      0%   { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) { .moat-panel { animation: none; } }
    @media (max-width: 640px) {
      .moat-toggle { right: 20px; top: -4px; gap: 6px; padding: 4px 6px; font-size: 10px; }
      .moat-toggle .moat-nav { width: 26px; height: 26px; }
      .moat-toggle .moat-pos { min-width: 44px; }
      .moat-toggle .moat-label { display: none; }
    }

    /* When the matrix is shown via Panel 2 (h2 instead of the inline h3),
       its old standalone-h3 styling no longer applies and the matrix
       follows the slide's normal h2/p flow. */

    .moat-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 24px;
    }
    .moat-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 20px;
      position: relative;
    }
    .moat-card .moat-tag {
      display: inline-block;
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent-green); letter-spacing: 0.12em;
      padding: 3px 8px; border: 1px solid var(--accent-green);
      border-radius: 4px; margin-bottom: 10px;
      text-transform: uppercase;
    }
    .moat-card h4 { font-family: var(--font-display); font-size: 15px; margin-bottom: 6px; }
    .moat-card .desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
    /* 5-up compaction (Policy Depth added as a 5th moat) */
    .moat-grid-5 { gap: 11px; }
    .moat-grid-5 .moat-card { padding: 15px; }
    .moat-grid-5 .moat-icon { width: 40px; height: 40px; margin-bottom: 10px; }
    .moat-grid-5 .moat-icon svg { width: 22px; height: 22px; }
    .moat-grid-5 .moat-card h4 { font-size: 14px; }
    .moat-grid-5 .moat-card .moat-tag { font-size: 9px; margin-bottom: 8px; }
    .moat-grid-5 .moat-card .desc { font-size: 12px; line-height: 1.5; }
    .moat-grid-5 .moat-stat { padding: 8px 10px; margin: 9px 0; }
    .moat-grid-5 .moat-stat strong { font-size: 12px; }
    .moat-grid-5 .moat-stat span { font-size: 10px; }
    .incumbent-note {
      margin-top: 22px;
      padding: 16px 20px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--accent-purple);
      border-radius: 0 8px 8px 0;
      font-size: 14px; color: var(--text-secondary);
    }
    .incumbent-note strong { color: var(--text-primary); font-weight: 600; }

    /* ----- 2x2 positioning matrix ----- */
    .moat-matrix-h3 {
      margin-top: 36px;
      margin-bottom: 14px;
      font-size: 17px;
      font-weight: 600;
      color: var(--text-primary);
      letter-spacing: -0.005em;
    }
    .pos-matrix {
      display: flex;
      justify-content: center;
      padding: 8px 12px 40px 130px;
      margin: 0 0 8px;
    }
    .pos-matrix .pm-frame {
      position: relative;
      width: 100%;
      max-width: 880px;
      aspect-ratio: 16 / 9;
      background:
        linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.04) 0%, transparent 55%),
        var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      /* overflow: visible so axis chips + tooltips render outside the plot */
      overflow: visible;
    }
    .pm-quad {
      position: absolute;
      width: 50%; height: 50%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 14px 20px;
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-secondary);
      opacity: 0.85;
      pointer-events: none;
    }
    .pm-quad.tl { top: 0; left: 0; }
    .pm-quad.tr { top: 0; right: 0; color: var(--accent-green); opacity: 1; }
    .pm-quad.bl { bottom: 0; left: 0; align-items: flex-end; }
    .pm-quad.br { bottom: 0; right: 0; align-items: flex-end; }
    .pm-axis {
      position: absolute;
      background: var(--border-strong);
      pointer-events: none;
    }
    .pm-axis.x { left: 0; right: 0; top: 50%; height: 1px; }
    .pm-axis.y { top: 0; bottom: 0; left: 50%; width: 1px; }
    .pm-dot {
      position: absolute;
      left: var(--x);
      bottom: var(--y);
      transform: translate(-50%, 50%);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px 5px 8px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      font-size: 11.5px;
      color: var(--text-secondary);
      white-space: nowrap;
      transition: border-color 0.18s ease, transform 0.18s ease;
      z-index: 2;
    }
    .pm-dot::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--text-muted);
    }
    .pm-dot:hover {
      border-color: var(--accent-green);
      transform: translate(-50%, 50%) scale(1.04);
      z-index: 3;
    }
    .pm-dot.us {
      padding: 7px 14px 7px 10px;
      background: rgba(var(--accent-green-rgb), 0.10);
      border: 2px solid var(--accent-green);
      color: var(--text-primary);
      font-weight: 600;
      font-size: 12.5px;
      box-shadow: 0 0 0 6px rgba(var(--accent-green-rgb), 0.10), 0 8px 24px rgba(0,0,0,0.25);
      z-index: 4;
    }
    .pm-dot.us::before {
      background: var(--accent-green);
      box-shadow: 0 0 8px var(--accent-green);
    }
    /* Per-dot hover tooltip — shows what each company sells. Pure CSS,
       no JS. .tooltip-below variant renders downward for dots near the
       top of the frame so the popover doesn't clip. */
    .pm-tooltip {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      padding: 7px 11px;
      background: var(--bg-primary);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--text-secondary);
      text-transform: none;
      letter-spacing: 0;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 20;
      box-shadow: 0 10px 22px rgba(0,0,0,0.32);
    }
    .pm-dot:hover .pm-tooltip,
    .pm-dot:focus-within .pm-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(-2px);
    }
    .pm-dot.tooltip-below .pm-tooltip {
      bottom: auto;
      top: calc(100% + 8px);
    }
    .pm-dot.tooltip-below:hover .pm-tooltip,
    .pm-dot.tooltip-below:focus-within .pm-tooltip {
      transform: translateX(-50%) translateY(2px);
    }
    /* Axis tip chips — live outside the plot area: x-axis chips below the
       frame, y-axis chips on the left side rotated. Keeps the plot clean. */
    .pm-tip {
      position: absolute;
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-strong);
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      white-space: nowrap;
      pointer-events: none;
      z-index: 1;
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }
    .pm-tip.x-left   { left: 0;   bottom: -32px; }
    .pm-tip.x-right  { right: 0;  bottom: -32px; color: var(--accent-green); border-color: var(--accent-green); }
    /* Y-axis chips: horizontal, outside the frame on the left side.
       y-top sits at top-left aligned; y-bottom at bottom-left. */
    .pm-tip.y-top    { top: 0;    right: calc(100% + 12px); color: var(--accent-green); border-color: var(--accent-green); }
    .pm-tip.y-bottom { bottom: 0; right: calc(100% + 12px); }

    /* ----- Detailed comparison disclosure (collapsible) ----- */
    .comp-disclosure {
      margin-top: 18px;
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      background: var(--tile-bg);
      overflow: hidden;
    }
    .comp-disclosure summary {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 18px;
      cursor: pointer;
      list-style: none;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      user-select: none;
    }
    .comp-disclosure summary::-webkit-details-marker { display: none; }
    .comp-disclosure .cd-marker {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px; height: 18px;
      color: var(--accent-green);
      transition: transform 0.18s ease;
    }
    .comp-disclosure .cd-marker svg { width: 14px; height: 14px; }
    .comp-disclosure[open] .cd-marker { transform: rotate(90deg); }
    .comp-disclosure summary:hover .cd-text { color: var(--text-primary); }
    .comp-disclosure .comp-table { margin-top: 0; border-radius: 0; border: 0; border-top: 1px solid var(--border-subtle); }

    /* ========== SLIDE 9 — BUSINESS MODEL + GTM ========== */
    .tier-grid {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-top: 22px;
    }
    .tier-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-top: 3px solid var(--border-strong);
      border-radius: 10px; padding: 22px 20px;
      position: relative;
    }
    .tier-card.popular {
      border-top-color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.05);
    }
    .tier-card .ribbon {
      position: absolute; top: -10px; right: 14px;
      font-family: var(--font-mono); font-size: 9px;
      letter-spacing: 0.12em; text-transform: uppercase;
      background: var(--accent-green); color: #0A0A0F;
      padding: 3px 8px; border-radius: 4px; font-weight: 600;
    }
    .tier-card .tier-name {
      font-family: var(--font-display); font-size: 14px;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--text-secondary); margin-bottom: 10px;
    }
    .tier-card .price {
      font-family: var(--font-display);
      font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
      margin-bottom: 4px;
    }
    .tier-card .price .unit { font-size: 13px; color: var(--text-muted); font-weight: 400; }
    .tier-card .credits {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--text-secondary); margin-bottom: 14px;
    }
    .tier-card .gm {
      font-size: 12px; color: var(--text-muted);
      padding-top: 10px; border-top: 1px solid var(--border-subtle);
    }
    .tier-card .gm strong { color: var(--accent-green); font-weight: 600; }
    .pricing-meta {
      margin-top: 14px;
      font-family: var(--font-mono); font-size: 12px;
      color: var(--text-muted); letter-spacing: 0.02em;
    }
    .pricing-meta .accent { color: var(--accent-green); }

    .gtm-funnel {
      display: flex; align-items: stretch; gap: 8px;
      margin-top: 18px; flex-wrap: wrap;
    }
    .gtm-funnel .step {
      flex: 1 1 0; min-width: 130px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 10px; padding: 14px 14px;
    }
    .gtm-funnel .step .v {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      color: var(--text-primary); margin-bottom: 4px;
      letter-spacing: -0.02em;
    }
    .gtm-funnel .step .l { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .gtm-funnel .step.target { background: rgba(var(--accent-green-rgb), 0.10); border-color: var(--accent-green); }
    .gtm-funnel .step.target .v { color: var(--accent-green); }
    .gtm-funnel .arrow { align-self: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 16px; }

    .channel-chips {
      display: flex; flex-wrap: wrap; gap: 8px;
      margin-top: 18px;
    }
    .chip {
      font-family: var(--font-mono); font-size: 12px;
      padding: 6px 12px; border-radius: 999px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      letter-spacing: 0.02em;
    }
    .motion-note {
      margin-top: 16px;
      font-size: 13px; color: var(--text-muted);
      font-family: var(--font-mono); letter-spacing: 0.02em;
    }
    .motion-note .accent { color: var(--accent-green); }

    /* ========== SLIDE 10 — TRACTION ========== */
    .traction-cols {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 28px;
    }
    .trc-card {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 22px;
    }
    .trc-card.built { border-top: 3px solid var(--accent-green); }
    .trc-card.soft { border-top: 3px solid var(--accent-amber); }
    .trc-card.shipping { border-top: 3px solid var(--accent-purple); }
    .trc-card .head {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 14px;
    }
    .trc-card.built .head { color: var(--accent-green); }
    .trc-card.soft .head { color: var(--accent-amber); }
    .trc-card.shipping .head { color: var(--accent-purple); }
    .trc-card ul { list-style: none; }
    .trc-card li {
      font-size: 13.5px; color: var(--text-secondary);
      padding: 5px 0 5px 16px;
      position: relative; line-height: 1.5;
    }
    .trc-card li::before {
      content: ''; position: absolute; left: 0; top: 11px;
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--text-muted);
    }
    .trc-card.built li::before { background: var(--accent-green); }
    .trc-card.soft li::before { background: var(--accent-amber); }
    .trc-card.shipping li::before { background: var(--accent-purple); }
    .trc-card li strong { color: var(--text-primary); font-weight: 600; }

    /* ----- Design-partner logo wall (replaces ARR bridge) ----- */
    .logo-wall {
      margin-top: 32px;
      padding: 22px 24px 26px;
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.08), rgba(var(--accent-purple-rgb), 0.04));
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
    }
    .logo-wall .lw-head {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    .lw-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
    }
    .lw-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 16px 12px 14px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .lw-tile:hover {
      border-color: var(--border-strong);
      transform: translateY(-2px);
    }
    .lw-tile .company-badge {
      margin-bottom: 10px;
    }
    .lw-tile .lw-name {
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
      line-height: 1.25;
    }
    .lw-tile .lw-role {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-bottom: 10px;
      line-height: 1.35;
    }
    .lw-tile .lw-pill {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid currentColor;
      line-height: 1;
    }
    .lw-pill.verbal { color: var(--accent-green); }
    .lw-pill.active { color: var(--accent-amber); }
    .lw-pill.warm   { color: var(--accent-purple); }
    .lw-tile.stealth { border-style: dashed; opacity: 0.92; }
    .company-badge[data-brand="beans"]    { background: #16A34A; }
    .company-badge[data-brand="piston"]   { background: #DC2626; }
    .company-badge[data-brand="stealth"]  {
      background: transparent;
      color: var(--text-muted);
      border: 1px dashed var(--border-strong);
    }
    .company-badge-wordmark.lw-stealth { font-style: italic; letter-spacing: 0.04em; }

    .bridge-tile {
      margin-top: 32px;
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.10), rgba(var(--accent-purple-rgb), 0.05));
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 28px 32px;
    }
    .bridge-tile h4 {
      font-family: var(--font-display); font-size: 17px; font-weight: 600;
      margin-bottom: 18px;
    }
    .bridge-rows { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .bridge-row {
      display: grid; grid-template-columns: 1fr auto;
      gap: 16px; align-items: baseline;
      padding: 6px 0;
      border-bottom: 1px dashed var(--border-subtle);
    }
    .bridge-row:last-child { border-bottom: none; }
    .bridge-row.total { padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--border-strong); border-bottom: none; }
    .bridge-row .lbl { font-size: 14px; color: var(--text-secondary); }
    .bridge-row .lbl strong { color: var(--text-primary); font-weight: 600; }
    .bridge-row .val {
      font-family: var(--font-mono); font-size: 15px; font-weight: 500;
      color: var(--text-primary); font-variant-numeric: tabular-nums;
    }
    .bridge-row.total .lbl { font-weight: 600; color: var(--text-primary); font-size: 15px; }
    .bridge-row.total .val { color: var(--accent-green); font-size: 18px; font-weight: 700; }
    .risk-note {
      margin-top: 20px;
      padding: 12px 16px;
      background: rgba(var(--accent-red-rgb), 0.06);
      border-left: 2px solid var(--accent-red);
      border-radius: 0 6px 6px 0;
      font-size: 13px; color: var(--text-secondary);
    }
    .risk-note strong { color: var(--accent-red); font-weight: 600; }
    .traction-frame {
      margin-top: 20px;
      padding: 13px 18px;
      background: rgba(var(--accent-green-rgb), 0.06);
      border-left: 2px solid var(--accent-green);
      border-radius: 0 8px 8px 0;
      font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
    }
    .traction-frame strong { color: var(--text-primary); font-weight: 600; }

    /* ========== SLIDE 11 — THE ASK ========== */
    .ask-hero {
      text-align: center; padding: 16px 0 32px;
    }
    .ask-hero .raise {
      font-family: var(--font-display);
      font-size: clamp(64px, 9vw, 120px); font-weight: 700;
      line-height: 0.95; letter-spacing: -0.04em;
      margin-bottom: 8px;
    }
    .ask-hero .raise .accent { color: var(--accent-green); }
    .ask-hero .raise-meta {
      font-family: var(--font-mono); font-size: 14px;
      color: var(--text-secondary); letter-spacing: 0.12em;
    }
    .funds-block {
      margin-top: 16px;
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 12px; padding: 24px 28px;
    }
    .funds-block h4 {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 16px;
    }
    .funds-bar {
      display: flex; height: 36px; border-radius: 8px; overflow: hidden;
      margin-bottom: 14px;
    }
    .funds-bar .seg {
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 13px; font-weight: 600;
      color: #0A0A0F;
    }
    .funds-bar .seg.product { background: var(--accent-green); }
    .funds-bar .seg.team { background: var(--accent-blue); color: white; }
    .funds-bar .seg.gtm { background: var(--accent-purple); color: white; }
    .funds-bar .seg.dp { background: var(--accent-amber); }
    .funds-legend { display: flex; flex-wrap: wrap; gap: 18px; }
    .funds-legend .item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
    .funds-legend .swatch { width: 11px; height: 11px; border-radius: 3px; }

    .comps-row {
      margin-top: 24px;
    }
    .comps-row h4 {
      font-family: var(--font-mono); font-size: 11px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 14px;
    }
    .comps-grid {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .comp-tile {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 8px; padding: 14px 20px;
      text-align: left; flex: 1 1 0; min-width: 150px;
    }
    .comp-tile .name {
      font-family: var(--font-display); font-size: 13px; font-weight: 600;
      margin-bottom: 4px;
    }
    .comp-tile .val {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--accent-green); font-weight: 500;
    }
    .closer {
      margin-top: 32px;
      text-align: center;
      font-family: var(--font-display);
      font-size: clamp(18px, 2vw, 22px);
      color: var(--text-primary);
      max-width: 720px;
      margin-left: auto; margin-right: auto;
      line-height: 1.4;
    }
    .closer .accent { color: var(--accent-green); }
    .contact-line {
      margin-top: 28px;
      text-align: center;
      font-family: var(--font-mono); font-size: 14px;
      letter-spacing: 0.06em;
    }
    .contact-line a { color: var(--accent-green); }

    /* ========== FOOTER (sources) ========== */
    .footer {
      padding: 60px 0 80px;
      border-top: 1px solid var(--border-subtle);
      background: var(--bg-secondary);
    }
    .footer h3 {
      font-family: var(--font-mono); font-size: 12px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-muted); margin-bottom: 20px;
    }
    .sources-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;
    }
    .src-item {
      font-size: 12.5px; color: var(--text-secondary);
      padding: 6px 0;
      border-bottom: 1px solid var(--border-subtle);
      display: grid; grid-template-columns: 26px 1fr; gap: 6px;
    }
    .src-item .n {
      font-family: var(--font-mono); color: var(--accent-green); font-weight: 500;
    }
    .src-item a { color: var(--text-secondary); border-bottom: 1px dotted var(--border-strong); }
    .src-item a:hover { color: var(--accent-green); }
    .footer .meta {
      margin-top: 28px;
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted); letter-spacing: 0.02em;
    }

    /* ========== SCROLL ANIMATIONS ========== */
    .animate-on-scroll {
      opacity: 0; transform: translateY(30px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
    .stagger > .animate-on-scroll:nth-child(1) { transition-delay: 0s; }
    .stagger > .animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
    .stagger > .animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
    .stagger > .animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }
    .stagger > .animate-on-scroll:nth-child(5) { transition-delay: 0.32s; }
    .stagger > .animate-on-scroll:nth-child(6) { transition-delay: 0.40s; }

    @media (prefers-reduced-motion: reduce) {
      .animate-on-scroll { opacity: 1; transform: none; transition: none; }
      body.mode-present .slide.active { animation: none; }
      .cover-orb { animation: none; }
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 900px) {
      .stat-grid, .layer-grid, .work-cols, .horizon-grid, .whynow-grid, .moat-grid, .tier-grid, .traction-cols, .comps-grid, .proof-strip, .team-grid, .market-summary, .sources-grid {
        grid-template-columns: 1fr;
      }
      .cascade-flow { grid-template-columns: 1fr; }
      .cascade-arrow { transform: rotate(90deg); align-self: center; padding: 4px 0; }
      .funnel-row, .gtm-funnel { flex-direction: column; }
      .funnel-arrow, .gtm-funnel .arrow { transform: rotate(90deg); padding: 4px 0; }
      .deck-brand { display: none; }
      .deck-controls { top: 14px; right: 14px; }
      .control-btn .label { display: none; }
      .control-btn { width: 38px; padding: 0; }
      .slide { padding: 70px 0; }
      body.mode-present .slide { padding: 60px 16px 80px; }
    }
    @media (max-width: 600px) {
      .container { padding: 0 20px; }
      .cover h1 { font-size: 56px; }
      .terminal-body { font-size: 12px; padding: 18px 16px; }
      .reg-callout { grid-template-columns: 1fr; }
      .funds-bar .seg { font-size: 11px; }
      .comp-table { display: block; overflow-x: auto; }
    }

    /* ========== COVER LOGO ==========
       Brand-mark chip (PNG, self-contained dark rounded square with chrome A-mark)
       + "aucert.ai" wordmark in Momo Trust Display with mint-green ".ai" suffix.
       The mark works on both light and dark themes — no inversion needed.
       Layout: PRE-SEED badge is a sibling element ABOVE this on the cover. */
    .cover-logo {
      display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      gap: 22px;
      margin: 0 auto 32px;
      animation: logoReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    }
    /* ---- Two-layer cover mark ----
       The wrapper sizes the stack and carries every halo/anim class. The
       back layer (.cover-mark-glow) receives all `filter: drop-shadow(...)`
       chains — filter rasterization is invisible because the layer's
       silhouette is hidden behind the foreground; only the blur bleeding
       past the silhouette is visible. The foreground (.cover-mark) has NO
       filter at all and renders the SVG at native fidelity. */
    .cover-mark-stack {
      position: relative;
      display: inline-block;
      width: clamp(220px, 27vw, 320px);
      flex-shrink: 0;
      transform-origin: center center;
      will-change: transform;
      --halo-pulse: 1;
    }
    .cover-mark-stack > img {
      width: 100%;
      height: auto;
      display: block;
    }
    .cover-mark {
      position: relative;
      z-index: 1;
      /* deliberately no filter, no will-change — keeps the SVG pin-sharp */
    }
    .cover-mark-glow {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      will-change: filter;
      transition: filter 0.5s ease;
    }

    /* CRITICAL: inherits MUST be true. The halo system animates this
       custom property on a wrapper (.cover-mark-stack, .wn2-ai-chip-stack)
       while the filter chain that consumes it lives on a child (the
       back-layer glow). With inherits:false, the child reads only the
       initial-value and the halo appears static. */
    @property --halo-pulse {
      syntax: '<number>';
      inherits: true;
      initial-value: 1;
    }

    /* ---- Halo intensity variants (filters land on the back layer only) ---- */
    .cover-mark-stack.halo-off > .cover-mark-glow {
      filter: drop-shadow(0 16px 44px rgba(0, 0, 0, 0.42));
    }
    [data-theme="light"] .cover-mark-stack.halo-off > .cover-mark-glow {
      filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.16));
    }

    .cover-mark-stack.halo-subtle > .cover-mark-glow {
      filter:
        drop-shadow(0 0 calc(24px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.22 * var(--halo-pulse))))
        drop-shadow(0 0 calc(8px  * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.16 * var(--halo-pulse))))
        drop-shadow(0 14px 36px rgba(0, 0, 0, 0.40));
    }
    /* Light-theme halos use the BRIGHT brand green (74,222,128) directly
       instead of var(--accent-green-rgb). The light theme remaps that
       variable to a darker forest green (21,128,61) for text legibility,
       which doesn't bloom against a cream background — the halo looked
       almost invisible. Hardcode the bright green here AND bump alpha
       so the glow reads at presentation distance. */
    [data-theme="light"] .cover-mark-stack.halo-subtle > .cover-mark-glow {
      filter:
        drop-shadow(0 0 calc(24px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.30 * var(--halo-pulse))))
        drop-shadow(0 0 calc(8px  * var(--halo-pulse)) rgba(74, 222, 128, calc(0.22 * var(--halo-pulse))))
        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.14));
    }

    .cover-mark-stack.halo-medium > .cover-mark-glow {
      filter:
        drop-shadow(0 0 calc(36px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.38 * var(--halo-pulse))))
        drop-shadow(0 0 calc(12px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.28 * var(--halo-pulse))))
        drop-shadow(0 16px 44px rgba(0, 0, 0, 0.42));
    }
    [data-theme="light"] .cover-mark-stack.halo-medium > .cover-mark-glow {
      filter:
        drop-shadow(0 0 calc(36px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.50 * var(--halo-pulse))))
        drop-shadow(0 0 calc(12px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.34 * var(--halo-pulse))))
        drop-shadow(0 12px 30px rgba(0, 0, 0, 0.16));
    }

    .cover-mark-stack.halo-strong > .cover-mark-glow {
      filter:
        drop-shadow(0 0 calc(38px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.55 * var(--halo-pulse))))
        drop-shadow(0 0 calc(14px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.40 * var(--halo-pulse))))
        drop-shadow(0 16px 48px rgba(0, 0, 0, 0.45));
    }
    [data-theme="light"] .cover-mark-stack.halo-strong > .cover-mark-glow {
      filter:
        drop-shadow(0 0 calc(40px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.65 * var(--halo-pulse))))
        drop-shadow(0 0 calc(14px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.45 * var(--halo-pulse))))
        drop-shadow(0 12px 32px rgba(0, 0, 0, 0.18));
    }

    /* ---- Animation intensity (lives on the wrapper so both layers scale together) ---- */
    .cover-mark-stack.anim-off { animation: none; }
    .cover-mark-stack.anim-subtle {
      animation: haloBreatheSubtle 7s ease-in-out infinite;
    }
    .cover-mark-stack.anim-active {
      animation: haloBreatheActive 4.5s ease-in-out infinite;
    }
    /* Only --halo-pulse animates: it drives the filter's blur radius and
       opacity on the back layer. The chip itself stays rock-still — only
       the surrounding halo swells and recedes. (Earlier versions also
       scaled the wrapper, which scaled the foreground img — looked like
       the logo was breathing rather than its halo.) */
    @keyframes haloBreatheSubtle {
      0%, 100% { --halo-pulse: 0.90; }
      50%      { --halo-pulse: 1.18; }
    }
    @keyframes haloBreatheActive {
      0%, 100% { --halo-pulse: 0.84; }
      50%      { --halo-pulse: 1.38; }
    }
    @media (prefers-reduced-motion: reduce) {
      .cover-mark-stack.anim-subtle,
      .cover-mark-stack.anim-active { animation: none; }
    }

    /* ---- Halo config popover (very subtle, bottom-right of cover) ---- */
    .halo-config {
      position: absolute;
      bottom: 22px;
      right: 28px;
      z-index: 3;
      font-family: var(--font-mono);
    }
    body.mode-present .halo-config { display: none; }

    .halo-config-trigger {
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 6px 10px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      opacity: 0.42;
      transition: opacity 0.2s ease, color 0.2s ease;
    }
    .halo-config-trigger:hover,
    .halo-config[data-open="true"] .halo-config-trigger {
      opacity: 1;
      color: var(--accent-green);
    }
    .halo-config-trigger::before {
      content: "↻";
      margin-right: 6px;
      opacity: 0.8;
    }

    .halo-config-panel {
      position: absolute;
      right: 0;
      bottom: calc(100% + 6px);
      min-width: 260px;
      padding: 14px 16px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
      transition: opacity 0.18s ease, transform 0.18s ease;
    }
    .halo-config[data-open="true"] .halo-config-panel {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .halo-config-panel[hidden] { display: none; }

    .halo-config-row + .halo-config-row { margin-top: 12px; }
    .halo-config-label {
      font-size: 9.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 7px;
    }
    .halo-config-options {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .halo-config-options button {
      flex: 1;
      min-width: 0;
      background: transparent;
      border: 1px solid var(--border-subtle);
      border-radius: 6px;
      color: var(--text-secondary);
      padding: 5px 8px;
      font-family: inherit;
      font-size: 9.5px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.16s, border-color 0.16s, color 0.16s;
    }
    .halo-config-options button:hover {
      color: var(--text-primary);
      border-color: var(--border-strong);
    }
    .halo-config-options button.active {
      background: rgba(var(--accent-green-rgb), 0.12);
      border-color: rgba(var(--accent-green-rgb), 0.55);
      color: var(--accent-green);
    }
    .cover-wordmark {
      font-family: var(--font-brand);
      font-size: clamp(48px, 6vw, 64px);
      font-weight: 400;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      line-height: 1;
    }
    .cover-wordmark-tld {
      color: var(--accent-green);
    }
    @keyframes logoReveal {
      0% { opacity: 0; transform: translateY(16px) scale(0.96); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ========== NAV LOGO ==========
       Don't add CSS border-radius — the SVG already has rounded corners and
       its outline stroke sits at the very edge; an extra clip-radius would
       crop the outline corner. Same reason no overflow:hidden here. */
    .nav-logo-chip {
      width: 28px; height: 28px;
      display: block;
      flex-shrink: 0;
    }
    .nav-logo-chip-light { display: none; }
    [data-theme="light"] .nav-logo-chip-dark { display: none; }
    [data-theme="light"] .nav-logo-chip-light { display: block; }
    .nav-wordmark {
      font-family: var(--font-brand);
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      text-transform: none;
      line-height: 1;
    }
    .nav-wordmark-tld {
      color: var(--accent-green);
    }
    .nav-brand-tag {
      font-family: var(--font-mono); font-size: 9px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--accent-green);
      padding: 3px 7px; border: 1px solid var(--accent-green);
      border-radius: 4px;
      margin-left: 10px;
      background: rgba(var(--accent-green-rgb), 0.06);
    }

    /* ========== TOP NAV ========== */
    .top-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      padding: 12px 0;
      background: var(--nav-bg);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border-subtle);
      transform: translateY(-100%);
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, border-color 0.4s ease;
    }
    .top-nav.visible { transform: translateY(0); }
    body.mode-present .top-nav { display: none; }
    .nav-container {
      display: flex; align-items: center; gap: 24px;
    }
    .nav-brand {
      display: inline-flex; align-items: center; gap: 10px;
      flex-shrink: 0; white-space: nowrap;
      color: var(--text-primary);
    }
    .nav-brand:hover { opacity: 1; }
    .brand-dot {
      width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green);
      box-shadow: 0 0 12px var(--accent-green), 0 0 4px var(--accent-green);
      animation: dotPulse 2.4s ease-in-out infinite;
    }
    @keyframes dotPulse {
      0%, 100% { opacity: 0.6; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.25); }
    }
    .nav-links {
      list-style: none; display: flex; gap: 4px; flex: 1;
      justify-content: center; flex-wrap: nowrap; overflow: hidden;
    }
    .nav-links a {
      color: var(--text-secondary);
      font-size: 12.5px; font-weight: 500;
      letter-spacing: 0.04em;
      transition: color 0.2s;
      padding: 6px 10px; border-radius: 6px;
      position: relative; white-space: nowrap;
    }
    .nav-links a:hover { color: var(--text-primary); opacity: 1; background: var(--tile-bg-hover); }
    .nav-links a.active { color: var(--accent-green); }
    .nav-links a.active::after {
      content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
      height: 2px; border-radius: 2px;
      background: var(--accent-green);
      box-shadow: 0 0 8px var(--accent-green);
    }
    .nav-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

    /* ========== PRESENT EXIT (top-right, present mode only) ========== */
    .present-exit {
      position: fixed; top: 20px; right: 24px; z-index: 1100;
      background: var(--nav-bg);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      height: 38px; border-radius: 999px;
      align-items: center; justify-content: center; gap: 6px;
      cursor: pointer; padding: 0 14px;
      font-family: var(--font-sans); font-size: 13px; font-weight: 500;
      transition: color 0.2s, border-color 0.2s;
    }
    .present-exit:hover { color: var(--accent-red); border-color: var(--accent-red); }
    body.mode-present .present-exit { display: inline-flex; }

    /* ========== STAT BARS (Problem slide) ========== */
    .stat-bars { margin-top: 12px; }
    .stat-bar-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 32px; align-items: center;
      padding: 24px 0;
      border-bottom: 1px solid var(--border-subtle);
      transition: background-color 0.3s ease;
    }
    .stat-bar-row:last-child { border-bottom: none; }
    .stat-bar-row:hover { background-color: var(--tile-bg-hover); }
    .stat-bar-number {
      font-family: var(--font-display);
      font-size: clamp(40px, 5vw, 64px); font-weight: 700;
      color: var(--accent-amber); line-height: 1;
      letter-spacing: -0.03em;
      margin-bottom: 12px;
      font-variant-numeric: tabular-nums;
    }
    .stat-bar-desc {
      font-size: 15.5px; color: var(--text-primary); line-height: 1.45;
      margin-bottom: 8px; font-weight: 500;
    }
    .stat-bar-desc strong { color: var(--accent-amber); font-weight: 600; }
    .stat-bar-desc em { color: var(--text-secondary); font-style: italic; }
    .stat-bar-source {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted); letter-spacing: 0.02em;
    }
    .stat-bar-right { display: flex; flex-direction: column; gap: 8px; }
    .bar-track {
      width: 100%; height: 38px;
      background: rgba(var(--surface-fg-rgb), 0.04);
      border-radius: 19px; overflow: hidden; position: relative;
      border: 1px solid var(--border-subtle);
    }
    [data-theme="light"] .bar-track { background: rgba(0,0,0,0.06); }
    .bar-fill {
      height: 100%; border-radius: 19px; width: 0;
      transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      box-shadow: inset 0 2px 0 rgba(var(--surface-fg-rgb), 0.22);
    }
    .bar-fill.amber { background: linear-gradient(90deg, var(--accent-amber), #F59E0B); }
    .bar-fill.green { background: linear-gradient(90deg, var(--accent-green), #34D399); }
    .bar-fill.red { background: linear-gradient(90deg, var(--accent-red), #EF4444); }
    .bar-fill.purple { background: linear-gradient(90deg, var(--accent-purple), #8B5CF6); }
    .bar-fill.blue { background: linear-gradient(90deg, var(--accent-blue), #3B82F6); }
    .bar-fill::after {
      content: ''; position: absolute; top: 0; left: -40%; bottom: 0;
      width: 40%; border-radius: 5px;
      background: linear-gradient(90deg, transparent, rgba(var(--surface-fg-rgb), 0.55), transparent);
      animation: barShimmer 3s ease-in-out infinite;
      animation-delay: 1.4s; pointer-events: none;
    }
    @keyframes barShimmer {
      0% { transform: translateX(0); opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { transform: translateX(450%); opacity: 0; }
    }
    .stat-bar-row.visible .bar-fill { width: var(--target-w, 50%); }
    .bar-axis {
      display: flex; justify-content: space-between;
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-muted); letter-spacing: 0.04em;
    }

    /* ========== ANECDOTE (Team slide) ========== */
    .anecdote {
      margin-top: 36px;
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.06), rgba(var(--accent-purple-rgb), 0.04));
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--accent-green);
      border-radius: 0 12px 12px 0;
      padding: 32px 38px 28px;
      position: relative;
      overflow: hidden;
    }
    .anecdote::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 0% 0%, rgba(var(--accent-green-rgb), 0.10), transparent 60%);
      pointer-events: none;
    }
    .anecdote-mark {
      position: absolute; top: 8px; left: 18px;
      font-family: 'Georgia', serif;
      font-size: 110px; line-height: 1;
      color: var(--accent-green); opacity: 0.15;
      pointer-events: none;
    }
    .anecdote-text {
      font-family: var(--font-display);
      font-size: clamp(15px, 1.6vw, 18px);
      line-height: 1.65;
      color: var(--text-primary);
      margin-bottom: 16px;
      position: relative;
      letter-spacing: -0.005em;
    }
    .anecdote-text:last-of-type { margin-bottom: 18px; }
    .anecdote-text strong { color: var(--accent-green); font-weight: 600; }
    .anecdote-text em { color: var(--accent-purple); font-style: italic; }
    .anecdote-attr {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--text-muted); letter-spacing: 0.06em;
      position: relative;
    }

    /* ========== COUNT-UP NUMBERS ========== */
    .count-up { font-variant-numeric: tabular-nums; }
    .visible .count-pop {
      animation: numberPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    @keyframes numberPop {
      0% { transform: scale(0.85); opacity: 0; }
      60% { transform: scale(1.04); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* ========== USE-OF-FUNDS ANIMATED BAR ========== */
    .funds-bar .seg {
      width: 0 !important;
      transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
      overflow: hidden; white-space: nowrap;
    }
    .funds-bar.visible .seg.product { width: 45% !important; }
    .funds-bar.visible .seg.team { width: 30% !important; }
    .funds-bar.visible .seg.gtm { width: 20% !important; }
    .funds-bar.visible .seg.dp { width: 5% !important; }

    /* ========== HORIZON CARD GLOW ========== */
    .horizon-card {
      transition: background 0.2s, border-color 0.2s, transform 0.3s, box-shadow 0.3s;
    }
    .horizon-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.18);
    }
    .horizon-card.h1:hover { box-shadow: 0 14px 40px rgba(var(--accent-green-rgb), 0.18); }
    .horizon-card.h2:hover { box-shadow: 0 14px 40px rgba(var(--accent-blue-rgb), 0.18); }
    .horizon-card.h3:hover { box-shadow: 0 14px 40px rgba(var(--accent-purple-rgb), 0.18); }

    /* ========== HOVER LIFTS ========== */
    .layer-card, .moat-card, .work-card, .funnel-step, .gtm-funnel .step,
    .horizon-card, .tier-card, .trc-card, .comp-tile {
      transition: background 0.2s, border-color 0.2s, transform 0.25s, box-shadow 0.25s;
    }
    .layer-card:hover, .moat-card:hover, .work-card:hover, .funnel-step:hover,
    .gtm-funnel .step:hover, .tier-card:hover, .trc-card:hover, .comp-tile:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.20);
    }

    /* ========== TERMINAL TYPING CARET ========== */
    .terminal-body .cmd::after {
      content: '▎'; color: var(--accent-green);
      animation: caretBlink 1s steps(1) infinite;
      margin-left: 2px;
    }
    @keyframes caretBlink {
      50% { opacity: 0; }
    }

    /* ========== FUNNEL MINI BARS ========== */
    .mini-bar {
      width: 100%; height: 8px;
      background: rgba(var(--surface-fg-rgb), 0.05);
      border-radius: 4px; overflow: hidden;
      margin-top: 10px;
    }
    [data-theme="light"] .mini-bar { background: rgba(0,0,0,0.06); }
    .mini-fill {
      display: block; height: 100%; width: 0;
      border-radius: 4px;
      transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: inset 0 1px 0 rgba(var(--surface-fg-rgb), 0.2);
    }
    .funnel-step.visible .mini-fill { width: var(--mini-w, 100%); }

    /* ========== BRIDGE BARS (Traction slide) ========== */
    .bridge-bar-wrap {
      display: grid; grid-template-columns: 1fr auto;
      gap: 14px; align-items: center;
    }
    .bridge-bar {
      width: 100%; height: 12px;
      background: rgba(var(--surface-fg-rgb), 0.05);
      border-radius: 6px; overflow: hidden;
      min-width: 80px;
      border: 1px solid var(--border-subtle);
    }
    [data-theme="light"] .bridge-bar { background: rgba(0,0,0,0.06); }
    .bridge-fill {
      display: block; height: 100%; width: 0;
      border-radius: 6px;
      transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: inset 0 1px 0 rgba(var(--surface-fg-rgb), 0.2);
    }
    .bridge-tile.visible .bridge-fill { width: var(--bw, 50%); }

    /* ========== CARD ICONS (Why Now) ========== */
    .card-icon {
      width: 44px; height: 44px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .card-icon.green { background: rgba(var(--accent-green-rgb), 0.12); color: var(--accent-green); }
    .card-icon.purple { background: rgba(var(--accent-purple-rgb), 0.12); color: var(--accent-purple); }
    .card-icon.amber { background: rgba(var(--accent-amber-rgb), 0.12); color: var(--accent-amber); }
    .card-icon.red { background: rgba(var(--accent-red-rgb), 0.12); color: var(--accent-red); }
    .card-icon.blue { background: rgba(var(--accent-blue-rgb), 0.12); color: var(--accent-blue); }
    .whynow-card:hover .card-icon { transform: scale(1.08) rotate(-3deg); }
    .whynow-card:hover .card-icon.green { box-shadow: 0 6px 16px rgba(var(--accent-green-rgb), 0.25); }
    .whynow-card:hover .card-icon.purple { box-shadow: 0 6px 16px rgba(var(--accent-purple-rgb), 0.25); }
    .whynow-card:hover .card-icon.amber { box-shadow: 0 6px 16px rgba(var(--accent-amber-rgb), 0.25); }
    .whynow-card:hover .card-icon.red { box-shadow: 0 6px 16px rgba(var(--accent-red-rgb), 0.25); }
    .whynow-card:hover .card-icon.blue { box-shadow: 0 6px 16px rgba(var(--accent-blue-rgb), 0.25); }

    .card-stat {
      font-family: var(--font-display);
      font-size: 18px; font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.02em; margin-bottom: 6px;
      line-height: 1.2;
    }
    .card-stat span {
      display: block;
      font-family: var(--font-mono); font-size: 11px;
      font-weight: 400; color: var(--text-muted);
      letter-spacing: 0.04em; margin-top: 2px;
    }

    /* ========== MOAT ICONS ========== */
    .moat-icon {
      width: 48px; height: 48px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
      transition: transform 0.3s;
    }
    .moat-icon.green { background: rgba(var(--accent-green-rgb), 0.12); color: var(--accent-green); border: 1px solid rgba(var(--accent-green-rgb), 0.25); }
    .moat-icon.purple { background: rgba(var(--accent-purple-rgb), 0.12); color: var(--accent-purple); border: 1px solid rgba(var(--accent-purple-rgb), 0.25); }
    .moat-icon.amber { background: rgba(var(--accent-amber-rgb), 0.12); color: var(--accent-amber); border: 1px solid rgba(var(--accent-amber-rgb), 0.25); }
    .moat-icon.blue { background: rgba(var(--accent-blue-rgb), 0.12); color: var(--accent-blue); border: 1px solid rgba(var(--accent-blue-rgb), 0.25); }
    .moat-icon.red { background: rgba(var(--accent-red-rgb), 0.12); color: var(--accent-red); border: 1px solid rgba(var(--accent-red-rgb), 0.25); }
    .moat-card:hover .moat-icon { transform: rotate(-6deg) scale(1.05); }
    .moat-stat {
      margin: 10px 0;
      padding: 10px 12px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
    }
    .moat-stat strong {
      font-family: var(--font-mono); font-size: 13px;
      color: var(--text-primary); display: block;
      margin-bottom: 2px;
    }
    .moat-stat span {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted); letter-spacing: 0.02em;
    }
    .moat-card .desc em {
      color: var(--accent-green); font-style: italic; font-weight: 500;
    }

    /* ========== MAKER-CHECKER FLOW (Solution slide) ========== */
    .mc-flow {
      margin-top: 8px;
      padding: 24px 22px;
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.05), rgba(var(--accent-purple-rgb), 0.04));
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      display: grid;
      grid-template-columns: 1fr auto 1.2fr auto 1fr;
      gap: 12px;
      align-items: center;
      position: relative;
    }
    .mc-stage {
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 10px;
      padding: 16px 16px;
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 6px;
      position: relative;
    }
    .mc-stage.checker {
      border-color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.06);
      box-shadow: 0 0 24px rgba(var(--accent-green-rgb), 0.10);
    }
    .mc-icon-wrap {
      width: 40px; height: 40px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 4px;
    }
    .mc-icon-wrap.maker { background: rgba(var(--accent-purple-rgb), 0.14); color: var(--accent-purple); }
    .mc-icon-wrap.checker {
      background: rgba(var(--accent-green-rgb), 0.18); color: var(--accent-green);
      width: 48px; height: 48px;
      box-shadow: 0 0 0 4px rgba(var(--accent-green-rgb), 0.10);
    }
    .mc-icon-wrap.gate { background: rgba(var(--accent-blue-rgb), 0.14); color: var(--accent-blue); }
    .mc-label {
      font-family: var(--font-display); font-size: 14px;
      font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em;
    }
    .mc-stage.checker .mc-label { font-size: 16px; color: var(--accent-green); }
    .mc-tools {
      font-family: var(--font-mono); font-size: 10.5px;
      color: var(--text-muted); letter-spacing: 0.02em;
      line-height: 1.4;
    }
    .mc-badge-tag {
      position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
      font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
      letter-spacing: 0.14em;
      background: var(--accent-green); color: #0A0A0F;
      padding: 3px 10px; border-radius: 999px;
      white-space: nowrap;
    }
    .mc-arrow {
      display: flex; align-items: center; gap: 4px; padding: 0 4px;
    }
    .mc-arrow span {
      width: 6px; height: 2px; background: var(--text-muted);
      border-radius: 1px; opacity: 0.4;
      animation: mcArrowPulse 1.6s ease-in-out infinite;
    }
    .mc-arrow span:nth-child(2) { animation-delay: 0.2s; }
    .mc-arrow span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes mcArrowPulse {
      0%, 100% { opacity: 0.3; transform: translateX(0); }
      50% { opacity: 1; transform: translateX(2px); background: var(--accent-green); }
    }
    .mc-feedback {
      grid-column: 1 / -1;
      margin-top: 8px;
      padding-top: 12px;
      border-top: 1px dashed var(--border-subtle);
      font-family: var(--font-mono); font-size: 11px;
      color: var(--accent-purple); letter-spacing: 0.02em;
      text-align: center;
    }

    /* ========== VISION TIMELINE ========== */
    .vision-timeline {
      position: relative;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 28px;
      padding-top: 20px;
    }
    .timeline-track, .timeline-progress {
      position: absolute; top: 24px;
      left: 8%; right: 8%;
      height: 2px; border-radius: 1px;
    }
    .timeline-track { background: var(--border-subtle); }
    .timeline-progress {
      background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-purple));
      width: 0;
      transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
      box-shadow: 0 0 12px rgba(var(--accent-green-rgb), 0.4);
    }
    .vision-timeline.visible .timeline-progress,
    body.mode-present .vision-timeline .timeline-progress { width: calc(100% - 0px); }
    .horizon-card { padding-top: 38px !important; }
    .horizon-card .node-dot {
      position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--bg-primary);
      border: 3px solid var(--accent-green);
      z-index: 2;
      box-shadow: 0 0 0 4px var(--bg-secondary);
    }
    .horizon-card.h1 .node-dot { border-color: var(--accent-green); box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 16px rgba(var(--accent-green-rgb), 0.5); }
    .horizon-card.h2 .node-dot { border-color: var(--accent-blue); box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 16px rgba(var(--accent-blue-rgb), 0.5); }
    .horizon-card.h3 .node-dot { border-color: var(--accent-purple); box-shadow: 0 0 0 4px var(--bg-secondary), 0 0 16px rgba(var(--accent-purple-rgb), 0.5); }

    /* ========== TRACTION TIMELINE ========== */
    .traction-timeline {
      position: relative;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-top: 32px; margin-bottom: 8px;
      padding: 30px 0 8px;
    }
    .tt-line {
      position: absolute; top: 47px; left: 8%; right: 8%;
      height: 2px; background: linear-gradient(to right, var(--accent-green), var(--accent-amber) 50%, var(--text-muted));
      opacity: 0.5;
      border-radius: 1px;
    }
    .tt-step {
      position: relative;
      display: flex; flex-direction: column; align-items: center;
      gap: 6px;
      z-index: 1;
    }
    .tt-marker {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--bg-primary);
      border: 2px solid var(--border-strong);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted);
      box-shadow: 0 0 0 4px var(--bg-primary);
    }
    .tt-step.done .tt-marker {
      background: var(--accent-green); border-color: var(--accent-green); color: #0A0A0F;
      box-shadow: 0 0 0 4px var(--bg-primary), 0 0 18px rgba(var(--accent-green-rgb), 0.4);
    }
    .tt-step.active .tt-marker {
      background: var(--accent-amber); border-color: var(--accent-amber); color: #0A0A0F;
      box-shadow: 0 0 0 4px var(--bg-primary), 0 0 18px rgba(var(--accent-amber-rgb), 0.5);
      position: relative;
    }
    .tt-step.active .tt-marker.pulse span {
      width: 12px; height: 12px; border-radius: 50%;
      background: #0A0A0F;
    }
    .tt-step.active .tt-marker::before {
      content: ''; position: absolute; inset: -6px; border-radius: 50%;
      border: 2px solid var(--accent-amber);
      animation: ttPulse 2s ease-out infinite;
    }
    @keyframes ttPulse {
      0% { transform: scale(0.8); opacity: 0.8; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    .tt-step.pending .tt-marker {
      color: var(--text-muted);
      background: var(--bg-secondary);
    }
    .tt-date {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--text-muted); letter-spacing: 0.10em;
    }
    .tt-status {
      font-family: var(--font-display); font-size: 13px;
      font-weight: 600; letter-spacing: 0.05em;
      color: var(--text-primary);
    }
    .tt-step.done .tt-status { color: var(--accent-green); }
    .tt-step.active .tt-status { color: var(--accent-amber); }

    /* ========== STATUS DOTS (traction column heads) ========== */
    .trc-card .status-dot {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      margin-right: 8px; vertical-align: 1px;
    }
    .trc-card.built .status-dot { background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); }
    .trc-card.soft .status-dot { background: var(--accent-amber); box-shadow: 0 0 8px var(--accent-amber); animation: dotPulse 2.2s ease-in-out infinite; }
    .trc-card.shipping .status-dot { background: var(--accent-purple); box-shadow: 0 0 8px var(--accent-purple); }

    /* ========== ADJUST SLIDE PADDING FOR FIXED NAV ========== */
    body.mode-scroll .slide:first-of-type { padding-top: 100px; }
    body.mode-scroll .slide { scroll-margin-top: 70px; }

    @media (max-width: 900px) {
      .mc-flow { grid-template-columns: 1fr; gap: 8px; }
      .mc-arrow { transform: rotate(90deg); justify-self: center; }
      .vision-timeline { grid-template-columns: 1fr; }
      .timeline-track, .timeline-progress { display: none; }
      .horizon-card { padding-top: 22px !important; }
      .horizon-card .node-dot { display: none; }
      .traction-timeline { grid-template-columns: 1fr; }
      .tt-line { display: none; }
    }

    @media (max-width: 1100px) {
      .nav-links { gap: 0; }
      .nav-links a { padding: 6px 7px; font-size: 11.5px; }
    }
    @media (max-width: 900px) {
      .nav-links { display: none; }
      .nav-container { justify-content: space-between; }
      .stat-bar-row { grid-template-columns: 1fr; gap: 14px; }
      .anecdote { padding: 24px 22px 22px; }
      .anecdote-mark { font-size: 80px; left: 8px; }
    }

    /* ========== VERTICAL SIDEBAR NAV (overrides top-nav, desktop only) ==========
       Mobile + tablet (<1024px) keep the horizontal top-nav defined further up. */
    @media (min-width: 1024px) {
    .top-nav {
      top: 0; left: 0; right: auto; bottom: 0;
      width: 200px;
      padding: 28px 22px;
      border-bottom: none;
      border-right: 1px solid var(--border-subtle);
      transform: translateX(-100%);
      display: flex; align-items: stretch;
    }
    .top-nav.visible { transform: translateX(0); }
    .nav-container {
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
      width: 100%;
      padding: 0;
      max-width: none;
    }
    .nav-brand {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      row-gap: 10px; column-gap: 9px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border-subtle);
      margin-bottom: 4px;
    }
    .nav-logo-chip { width: 28px; height: 28px; }
    .nav-wordmark { font-size: 18px; }
    .nav-brand-tag {
      margin-left: 0;
      flex-basis: 100%;          /* breaks PRE-SEED onto its own line */
      align-self: flex-start;
      width: fit-content;
    }
    .nav-links {
      flex-direction: column;
      gap: 2px;
      flex: 1;
      justify-content: flex-start;
      overflow: visible;
      list-style: none;
    }
    .nav-links li { width: 100%; }
    .nav-links a {
      display: flex; align-items: center; gap: 12px;
      padding: 9px 12px 9px 14px;
      border-radius: 8px;
      font-size: 13px;
      letter-spacing: 0.01em;
      position: relative;
      color: var(--text-secondary);
      transition: color 0.18s, background 0.18s, transform 0.18s;
    }
    .nav-links a::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: var(--text-muted); opacity: 0.45;
      transition: background 0.18s, transform 0.18s, opacity 0.18s, box-shadow 0.18s;
      flex-shrink: 0;
    }
    .nav-links a:hover {
      color: var(--text-primary);
      background: var(--tile-bg);
      transform: translateX(2px);
    }
    .nav-links a:hover::before {
      background: var(--text-primary); opacity: 1;
    }
    .nav-links a.active {
      color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.08);
    }
    .nav-links a.active::before {
      background: var(--accent-green);
      opacity: 1;
      transform: scale(1.5);
      box-shadow: 0 0 12px rgba(var(--accent-green-rgb), 0.7);
    }
    .nav-links a.active::after {
      content: none;
    }
    .nav-actions {
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
      padding-top: 14px;
      border-top: 1px solid var(--border-subtle);
    }
    .nav-actions .control-btn {
      justify-content: flex-start;
      padding: 0 14px;
      width: 100%;
    }
    .nav-actions .control-btn.icon-only {
      width: 100%; padding: 0; justify-content: center;
    }

    /* Push slide content to the right of sidebar */
    body.mode-scroll main { margin-left: 200px; }
    body.mode-scroll .footer { margin-left: 200px; }
    body.mode-scroll .slide { padding-left: 0; padding-right: 0; }
    }
    /* End desktop-only sidebar block. */

    /* ========== ARC STACK (Launch / Scale / Lock-in) ========== */
    .arc-stack {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 0;
      align-items: stretch;
      margin-top: 28px;
    }
    .arc-phase {
      background: var(--tile-bg);
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      padding: 22px 22px 24px;
      position: relative;
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
      display: flex; flex-direction: column;
    }
    .arc-phase:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.18);
    }
    .phase-launch { border-top: 3px solid var(--accent-green); }
    .phase-launch:hover { border-color: rgba(var(--accent-green-rgb), 0.4); box-shadow: 0 14px 40px rgba(var(--accent-green-rgb), 0.18); }
    .phase-scale { border-top: 3px solid var(--accent-blue); }
    .phase-scale:hover { border-color: rgba(var(--accent-blue-rgb), 0.4); box-shadow: 0 14px 40px rgba(var(--accent-blue-rgb), 0.18); }
    .phase-lockin { border-top: 3px solid var(--accent-purple); }
    .phase-lockin:hover { border-color: rgba(var(--accent-purple-rgb), 0.4); box-shadow: 0 14px 40px rgba(var(--accent-purple-rgb), 0.18); }

    .arc-phase-head {
      display: grid;
      grid-template-columns: auto auto 1fr;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }
    .arc-icon {
      width: 38px; height: 38px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .phase-launch .arc-icon { background: rgba(var(--accent-green-rgb), 0.14); color: var(--accent-green); }
    .phase-scale .arc-icon { background: rgba(var(--accent-blue-rgb), 0.14); color: var(--accent-blue); }
    .phase-lockin .arc-icon { background: rgba(var(--accent-purple-rgb), 0.14); color: var(--accent-purple); }
    .arc-phase-meta {
      display: flex; flex-direction: column; gap: 1px;
      min-width: 0;
    }
    .arc-tag {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-muted); letter-spacing: 0.14em;
    }
    .arc-name {
      font-family: var(--font-display); font-size: 16px; font-weight: 700;
      letter-spacing: 0.04em;
    }
    .phase-launch .arc-name { color: var(--accent-green); }
    .phase-scale .arc-name { color: var(--accent-blue); }
    .phase-lockin .arc-name { color: var(--accent-purple); }
    .arc-metric {
      text-align: right;
      justify-self: end;
    }
    .arc-metric-val {
      font-family: var(--font-display); font-size: 17px; font-weight: 700;
      letter-spacing: -0.02em; color: var(--text-primary);
    }
    .arc-metric-lbl {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--text-muted); letter-spacing: 0.04em;
      margin-top: 2px;
    }
    .arc-phase h4 {
      font-family: var(--font-display); font-size: 17px;
      font-weight: 600; margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .arc-desc {
      font-size: 13.5px; color: var(--text-secondary);
      line-height: 1.55; margin-bottom: 16px;
      flex: 1;
    }
    .arc-progress {
      width: 100%; height: 6px;
      background: rgba(var(--surface-fg-rgb), 0.05);
      border-radius: 3px; overflow: hidden;
      border: 1px solid var(--border-subtle);
      margin-top: auto;
    }
    [data-theme="light"] .arc-progress { background: rgba(0,0,0,0.06); }
    .arc-fill {
      display: block; height: 100%; width: 0;
      border-radius: 3px;
      transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
      box-shadow: inset 0 1px 0 rgba(var(--surface-fg-rgb), 0.25);
    }
    .arc-stack.visible .arc-fill,
    body.mode-present .arc-stack .arc-fill { width: var(--af, 50%); }
    .arc-connect {
      align-self: center;
      color: var(--text-muted);
      padding: 0 4px;
      animation: arcArrowPulse 2s ease-in-out infinite;
    }
    @keyframes arcArrowPulse {
      0%, 100% { opacity: 0.4; transform: translateX(0); }
      50% { opacity: 1; transform: translateX(3px); color: var(--accent-green); }
    }

    /* ========== PLAYBOOK BLOCK (GTM section) ========== */
    .playbook-block {
      margin-top: 28px;
      padding: 24px 26px;
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.07), rgba(var(--accent-purple-rgb), 0.04));
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--accent-green);
      border-radius: 0 14px 14px 0;
    }
    .playbook-head {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
    }
    .playbook-label {
      font-family: var(--font-mono); font-size: 11px;
      color: var(--accent-green); letter-spacing: 0.16em;
      font-weight: 600;
    }
    .playbook-stat {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      color: var(--text-primary); letter-spacing: -0.02em;
    }
    .playbook-stat span {
      font-family: var(--font-mono); font-size: 11px;
      font-weight: 400; color: var(--text-muted);
      letter-spacing: 0.04em; margin-left: 6px;
    }
    .playbook-row {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-bottom: 14px;
    }
    .pb-item {
      background: var(--bg-secondary);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 12px 10px;
      text-align: center;
      transition: border-color 0.2s, transform 0.2s;
    }
    .pb-item:hover {
      border-color: var(--accent-green);
      transform: translateY(-2px);
    }
    .pb-name {
      font-family: var(--font-display); font-size: 13px;
      font-weight: 600; color: var(--text-primary);
      margin-bottom: 4px;
    }
    .pb-val {
      font-family: var(--font-mono); font-size: 12px;
      color: var(--accent-green); font-weight: 500;
    }
    .playbook-tag {
      font-size: 13px; color: var(--text-secondary);
      font-style: italic; line-height: 1.5;
    }

    /* ========== HIDE NAV-LINK UNDERLINE PSEUDO (was for top nav) ========== */
    .nav-links a.active::after { display: none; }

    /* ========== RESPONSIVE: narrow the sidebar 1024–1100px ==========
       Scoped to min-width:1024 so the 180px content offset only applies
       while the sidebar layout is actually active. Below 1024 the nav is
       the horizontal top bar (margin-left:0), so an unbounded max-width
       here shoved content right into an empty gap (the 900–1023 break). */
    @media (min-width: 1024px) and (max-width: 1100px) {
      .top-nav { width: 180px; padding: 22px 16px; }
      body.mode-scroll main { margin-left: 180px; }
      body.mode-scroll .footer { margin-left: 180px; }
      .nav-links a { font-size: 12.5px; padding: 8px 10px 8px 12px; }
    }
    @media (max-width: 900px) {
      .top-nav {
        width: 100%; height: auto;
        padding: 12px 0;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        transform: translateY(-100%);
      }
      .top-nav.visible { transform: translateY(0); }
      .nav-container { flex-direction: row; gap: 16px; padding: 0 16px; max-width: 1200px; }
      .nav-brand { flex-direction: row; padding-bottom: 0; border: none; margin-bottom: 0; gap: 8px; }
      .nav-links { display: none; }
      .nav-actions { flex-direction: row; padding-top: 0; border-top: none; gap: 8px; align-items: center; }
      .nav-actions .control-btn { width: auto; padding: 0 14px; }
      .nav-actions .control-btn.icon-only { width: 38px; padding: 0; }
      body.mode-scroll main { margin-left: 0; }
      body.mode-scroll .footer { margin-left: 0; }
      .arc-stack { grid-template-columns: 1fr; gap: 14px; }
      .arc-connect { transform: rotate(90deg); justify-self: center; }
      .playbook-row { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .playbook-row { grid-template-columns: 1fr; }
    }

    /* ========== PRINT ========== */
    @media print {
      body { background: white; color: black; font-size: 11pt; }
      .top-nav, .present-bar, .present-exit { display: none !important; }
      body.mode-scroll main, body.mode-scroll .footer { margin-left: 0 !important; }
      .slide { page-break-after: always; padding: 30px 0; border: none; }
      body.mode-present .slide { display: block; }
      body::before { display: none; }
      .bar-fill { width: var(--target-w, 50%) !important; transition: none !important; }
      .arc-fill { width: var(--af, 50%) !important; transition: none !important; }
      .funds-bar .seg { width: auto !important; }
      .funds-bar .seg.product { width: 45% !important; }
      .funds-bar .seg.team { width: 30% !important; }
      .funds-bar .seg.gtm { width: 20% !important; }
      .funds-bar .seg.dp { width: 5% !important; }
    }

    /* ============================================================
       v1 IMPORTS — SDLC integration · Validation Graph · Dimensions · Risks
       ============================================================ */

    /* Theme tokens used by imported components */
    :root {
      --text-muted: var(--text-secondary);
      --border-strong: var(--border-subtle);
    }
    [data-theme="dark"] { --text-muted: rgba(var(--surface-fg-rgb), 0.45); --border-strong: rgba(var(--surface-fg-rgb), 0.16); }
    [data-theme="light"] { --text-muted: rgba(20,24,28,0.55); --border-strong: rgba(20,24,28,0.18); }

    /* ---- SDLC integration (merged into Solution slide) ---- */
    .sdlc-block { margin: 8px 0 36px; }
    .sdlc-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 32px; margin-bottom: 28px;
    }
    .sdlc-head-left { max-width: 760px; }
    .sdlc-head-left h3 { font-size: 26px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
    .sdlc-head-left h3 .accent { color: var(--accent-green); }
    .sdlc-deck { font-size: 15.5px; color: var(--text-secondary); line-height: 1.5; margin: 0; max-width: 720px; }
    .sdlc-badge-ext {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 8px 14px; background: rgba(var(--accent-green-rgb), 0.08);
      border: 1px solid rgba(var(--accent-green-rgb), 0.3); border-radius: 999px;
      font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
      color: var(--accent-green); letter-spacing: 0.06em; flex-shrink: 0;
    }
    .sdlc-badge-ext svg { width: 14px; height: 14px; }
    .sdlc-v2-layout { display: grid; grid-template-columns: 200px 1fr; gap: 32px; }
    .sdlc-v2-nav { display: flex; flex-direction: column; gap: 6px; position: relative; padding: 4px 0 4px 32px; }
    .sdlc-v2-line { position: absolute; left: 49px; top: 16px; bottom: 16px; width: 2px;
      background: linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.1) 0%, rgba(var(--accent-green-rgb), 0.6) 50%, rgba(var(--accent-green-rgb), 0.1) 100%); z-index: 0; }
    .sdlc-v2-step {
      display: flex; align-items: center; gap: 12px;
      background: none; border: none; padding: 8px 0; cursor: pointer;
      position: relative; z-index: 1; opacity: 0.55;
      transition: opacity 0.3s, transform 0.3s;
      text-align: left; outline: none; color: var(--text-primary);
    }
    .sdlc-v2-step:hover { opacity: 0.85; }
    .sdlc-v2-step.active { opacity: 1; transform: translateX(3px); }
    .sdlc-v2-step .step-dot {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg-primary); border: 2px solid var(--border-strong);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
      color: var(--text-muted);
      transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
      flex-shrink: 0;
    }
    .sdlc-v2-step.active .step-dot {
      border-color: var(--accent-green); color: var(--accent-green);
      box-shadow: 0 0 0 4px var(--bg-primary), 0 0 16px rgba(var(--accent-green-rgb), 0.3);
    }
    .sdlc-v2-step .step-lbl {
      font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
      letter-spacing: 0.05em; text-transform: uppercase;
    }
    .sdlc-v2-content {
      position: relative; background: var(--tile-bg);
      border: 1px solid var(--border-subtle); border-radius: 12px;
      overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,0.18);
      min-height: 360px;
    }
    .sdlc-v2-panel {
      position: absolute; inset: 0;
      display: grid; grid-template-columns: 1fr 1fr;
      opacity: 0; pointer-events: none; transform: translateY(8px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .sdlc-v2-panel.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .panel-info {
      padding: 24px 28px; border-right: 1px solid var(--border-subtle);
      display: flex; flex-direction: column;
    }
    .panel-info h5 {
      font-size: 18px; font-weight: 600; margin-bottom: 14px;
      color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.25;
    }
    .panel-info ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .panel-info li { position: relative; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
    .panel-info li::before {
      content: ""; position: absolute; left: 0; top: 8px;
      width: 5px; height: 5px; border-radius: 50%; background: var(--accent-green);
    }
    .panel-info li strong { color: var(--text-primary); font-weight: 600; }
    .panel-integrations { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
    .panel-integrations .chip {
      background: var(--bg-primary); border: 1px solid var(--border-subtle);
      padding: 5px 10px; border-radius: 5px;
      font-family: var(--font-mono); font-size: 10.5px;
      color: var(--text-secondary); letter-spacing: 0.04em;
    }
    .panel-mockup {
      padding: 22px 24px; background: var(--bg-primary);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .mock-chat { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
    .mock-msg { display: flex; gap: 10px; align-items: flex-start; }
    .mock-avatar { width: 28px; height: 28px; border-radius: 5px; background: var(--border-strong); flex-shrink: 0; }
    .mock-avatar.bot { background: rgba(var(--accent-green-rgb), 0.18); border: 1px solid var(--accent-green); display: flex; align-items: center; justify-content: center; }
    .mock-bubble {
      background: var(--tile-bg); border: 1px solid var(--border-subtle);
      padding: 10px 12px; border-radius: 0 9px 9px 9px;
      font-size: 11.5px; color: var(--text-secondary);
      width: 100%; line-height: 1.45;
    }
    .mock-bubble-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.04em; }
    .mock-bubble.bot-reply { border-color: rgba(var(--accent-green-rgb), 0.35); background: rgba(var(--accent-green-rgb), 0.05); }
    .mock-bubble.bot-reply strong { color: var(--accent-green); }
    .mock-doc { width: 100%; max-width: 360px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 9px; padding: 18px; box-shadow: 0 10px 26px rgba(0,0,0,0.2); position: relative; }
    .mock-line { height: 7px; background: var(--border-subtle); border-radius: 3px; margin-bottom: 10px; width: 100%; }
    .mock-line.short { width: 60%; }
    .mock-line.hl { background: rgba(var(--accent-green-rgb), 0.25); width: 85%; }
    .mock-popover { position: absolute; right: -10px; top: 30px; background: var(--bg-primary); border: 1px solid var(--accent-green); padding: 10px 12px; border-radius: 7px; box-shadow: 0 10px 18px rgba(0,0,0,0.3); width: 180px; font-size: 10.5px; color: var(--text-secondary); line-height: 1.4; }
    .mock-popover strong { color: var(--accent-green); display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; }
    .mock-ide { width: 100%; max-width: 380px; height: 220px; border: 1px solid var(--border-subtle); border-radius: 9px; display: flex; flex-direction: column; overflow: hidden; background: #0A0A0F; }
    .mock-ide-top { height: 22px; background: #1A1A24; display: flex; align-items: center; padding: 0 10px; gap: 5px; flex-shrink: 0; }
    .mock-ide-dot { width: 9px; height: 9px; border-radius: 50%; background: #444; }
    .mock-ide-body { display: flex; flex: 1; min-height: 0; }
    .mock-ide-sidebar { width: 80px; border-right: 1px solid #222; padding: 10px; }
    .mock-ide-code { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
    .mock-ide-term { height: 76px; border-top: 1px solid #222; background: #111; padding: 10px; font-family: var(--font-mono); font-size: 10.5px; color: #BBB; flex-shrink: 0; line-height: 1.55; }
    .mock-ide-term .success { color: var(--accent-green); }
    .mock-ide-term .dim { color: #666; }
    .mock-pr { width: 100%; max-width: 380px; border: 1px solid var(--border-subtle); border-radius: 9px; overflow: hidden; background: var(--bg-secondary); }
    .mock-pr-head { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
    .mock-pr-checks { padding: 10px 14px; background: var(--bg-primary); }
    .mock-pr-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
    .mock-pr-icon { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg-primary); font-size: 9px; font-weight: bold; flex-shrink: 0; }
    .mock-pr-icon.fail { background: var(--accent-red); }
    .mock-pr-icon.pass { background: var(--accent-green); }
    .mock-dash { width: 100%; max-width: 380px; height: 200px; border: 1px solid var(--border-subtle); border-radius: 9px; display: flex; overflow: hidden; background: var(--bg-secondary); }
    .mock-dash-side { width: 48px; border-right: 1px solid var(--border-subtle); background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; padding-top: 14px; gap: 12px; }
    .mock-dash-box { width: 20px; height: 20px; border-radius: 4px; background: var(--border-subtle); }
    .mock-dash-main { flex: 1; padding: 18px; }
    .mock-dash-card { border: 1px solid var(--accent-green); background: rgba(var(--accent-green-rgb), 0.05); padding: 14px; border-radius: 7px; }
    .mock-dash-card h6 { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-green); margin-bottom: 12px; letter-spacing: 0.05em; }
    .mock-dash-bar { height: 4px; background: var(--border-subtle); width: 100%; border-radius: 2px; position: relative; margin-bottom: 7px; }
    .mock-dash-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-green); width: 85%; border-radius: 2px; }
    .mock-cli { width: 100%; max-width: 400px; background: #0A0A0F; border: 1px solid var(--border-subtle); border-radius: 9px; padding: 16px; font-family: var(--font-mono); font-size: 11px; line-height: 1.65; color: #BBB; box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
    .mock-cli .cmd { color: #FFF; }
    .mock-cli .dim { color: #666; }
    .mock-cli .pass { color: var(--accent-green); }
    @media (max-width: 1100px) {
      .sdlc-v2-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .panel-info { border-right: none; border-bottom: 1px solid var(--border-subtle); }
    }
    @media (max-width: 900px) {
      .sdlc-head { flex-direction: column; align-items: flex-start; gap: 14px; }
      .sdlc-v2-layout { grid-template-columns: 1fr; gap: 20px; }
      .sdlc-v2-nav { flex-direction: row; overflow-x: auto; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); justify-content: flex-start; gap: 6px; }
      .sdlc-v2-line { display: none; }
      .sdlc-v2-step { flex-direction: column; text-align: center; gap: 6px; padding: 0 12px; flex-shrink: 0; }
      .sdlc-v2-step.active { transform: translateY(-3px); }
      .panel-info, .panel-mockup { padding: 18px; }
    }

    /* ---- Validation graph (Aucert.ai slide) ---- */
    .vg-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; width: 100%; }
    .vg-top-wrapper { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; position: relative; z-index: 2; }
    .vg-use-cases-lbl { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; }
    .vg-use-cases-lbl-inner { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .vg-use-cases-lbl::after { content: ''; height: 1px; background: var(--border-subtle); flex: 1; }
    .vg-use-cases-lbl .ext { font-size: 9px; color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.1); padding: 4px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.15em; }
    .vg-top { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; width: 100%; }
    .vg-sdlc-node {
      background: var(--tile-bg); border: 1px solid var(--border-strong); border-radius: 9px; padding: 10px 12px;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15); transition: transform 0.3s, border-color 0.3s;
    }
    .vg-sdlc-node:hover { transform: translateY(-3px); border-color: var(--accent-green); }
    .vg-sdlc-node .num { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; }
    .vg-sdlc-node .lbl { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; }
    .vg-connections-up { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; justify-items: center; width: 100%; margin: -2px 0; pointer-events: none; }
    .vg-connections-down { display: flex; justify-content: space-around; width: 60%; margin: -2px 0; pointer-events: none; }
    .vg-arrow { width: 2px; height: 24px; position: relative; opacity: 0.6; }
    .vg-arrow.up { background: linear-gradient(0deg, var(--accent-green) 0%, transparent 100%); }
    .vg-arrow.feed-up { background: linear-gradient(0deg, var(--text-muted) 0%, transparent 100%); }
    .vg-arrow.up::after { content: ''; position: absolute; top: -4px; left: -4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--accent-green); }
    .vg-arrow.feed-up::after { content: ''; position: absolute; top: -4px; left: -4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--text-muted); }
    .vg-arrow.up.anim::before { content: ''; position: absolute; bottom: 0; left: 0; width: 2px; height: 12px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px var(--accent-green); animation: shootUp 2s infinite; }
    .vg-arrow.feed-up.anim::before { content: ''; position: absolute; bottom: 0; left: 0; width: 2px; height: 12px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px var(--text-muted); animation: shootUp 2s infinite; }
    .vg-arrow:nth-child(2).anim::before { animation-delay: 0.3s; }
    .vg-arrow:nth-child(3).anim::before { animation-delay: 0.6s; }
    .vg-arrow:nth-child(4).anim::before { animation-delay: 0.9s; }
    .vg-arrow:nth-child(5).anim::before { animation-delay: 1.2s; }
    .vg-arrow:nth-child(6).anim::before { animation-delay: 1.5s; }
    @keyframes shootUp { 0% { transform: translateY(28px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
    .vg-core {
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.08), rgba(var(--accent-green-rgb), 0.02));
      border: 1px solid var(--accent-green); border-radius: 13px; padding: 26px 36px; width: 100%;
      text-align: center; position: relative; z-index: 2;
      box-shadow: inset 0 0 36px rgba(var(--accent-green-rgb), 0.05), 0 14px 36px rgba(0,0,0,0.2);
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .vg-core:hover {
      transform: translateY(-3px);
      box-shadow: inset 0 0 36px rgba(var(--accent-green-rgb), 0.08), 0 18px 50px rgba(var(--accent-green-rgb), 0.18);
    }
    .vg-core::after {
      content: 'CLICK TO INSPECT →';
      position: absolute; right: 16px; bottom: 12px;
      font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
      color: var(--accent-green); opacity: 0.55; transition: opacity 0.2s ease;
    }
    .vg-core:hover::after { opacity: 1; }
    .vg-core-glow { position: absolute; inset: 0; border-radius: 13px; box-shadow: 0 0 30px rgba(var(--accent-green-rgb), 0.2); z-index: -1; animation: vgPulseGlow 4s ease-in-out infinite; pointer-events: none; }
    @keyframes vgPulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
    .vg-core h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent-green); margin-bottom: 8px; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; gap: 12px; }
    .vg-core h3 svg { width: 22px; height: 22px; }
    .vg-core p { font-size: 13.5px; color: var(--text-secondary); max-width: 580px; margin: 0 auto; line-height: 1.5; }
    .vg-bottom { display: flex; gap: 16px; width: 100%; }
    .vg-source-group { flex: 1; background: var(--tile-bg); border: 1px solid var(--border-subtle); border-radius: 13px; padding: 16px 18px; }
    .vg-source-group h4 { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
    .vg-source-group h4 .ext { font-size: 9px; color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.12); padding: 3px 8px; border-radius: 4px; font-weight: 600; letter-spacing: 0.15em; }
    .vg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .vg-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 10px; font-size: 12px; color: var(--text-primary); transition: transform 0.2s, border-color 0.2s; }
    .vg-chip:hover { transform: translateY(-2px); border-color: var(--accent-green); }
    .vg-chip svg { width: 13px; height: 13px; color: var(--accent-green); }
    @media (max-width: 900px) {
      .vg-top { grid-template-columns: repeat(3, 1fr); }
      .vg-bottom { flex-direction: column; }
      .vg-connections-up, .vg-connections-down { display: none; }
    }

    /* ---- Validation graph zoom-in expansion (content lives inside the core box) ---- */
    .vg-section { position: relative; }
    .vg-core {
      position: relative;
      cursor: pointer;
      will-change: transform, padding;
      transition: padding 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.4s ease,
                  border-color 0.3s ease;
    }
    .vg-core.expanded {
      padding: 36px 40px 32px;
      cursor: default;
      box-shadow: inset 0 0 50px rgba(var(--accent-green-rgb), 0.10),
                  0 24px 64px rgba(var(--accent-green-rgb), 0.22),
                  0 0 0 1px rgba(var(--accent-green-rgb), 0.30);
      animation: vgZoomIn 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes vgZoomIn {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.04); }
      100% { transform: scale(1); }
    }
    .vg-core.expanded::after { content: ''; }
    .vg-core-summary { transition: margin 0.4s ease; }
    .vg-core.expanded .vg-core-summary { margin-bottom: 8px; }
    .vg-core-content {
      max-height: 0; opacity: 0; overflow: hidden;
      margin-top: 0; padding-top: 0;
      border-top: 1px dashed transparent;
      transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  opacity 0.4s ease 0.18s,
                  margin-top 0.4s ease,
                  padding-top 0.4s ease,
                  border-color 0.4s ease;
      text-align: left;
    }
    .vg-core.expanded .vg-core-content {
      max-height: 1500px;
      opacity: 1;
      margin-top: 22px;
      padding-top: 22px;
      border-top-color: rgba(var(--accent-green-rgb), 0.22);
    }
    .vg-core-content-head { margin-bottom: 18px; }
    .vg-expansion-tag {
      display: inline-block;
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.1);
      border: 1px solid rgba(var(--accent-green-rgb), 0.3);
      padding: 4px 10px; border-radius: 999px;
      margin-bottom: 10px;
      white-space: nowrap;
    }
    .vg-core-content-title {
      font-family: var(--font-display);
      font-size: 22px; font-weight: 700;
      letter-spacing: -0.01em;
      margin: 0 0 6px;
      color: var(--text-primary);
    }
    .vg-core-content-deck {
      font-size: 13.5px; color: var(--text-secondary);
      line-height: 1.55; margin: 0;
      max-width: 720px;
    }
    .vg-core-close {
      position: absolute; top: 14px; right: 14px;
      width: 30px; height: 30px;
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      border-radius: 50%;
      font-size: 18px; line-height: 1;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease 0.2s,
                  background 0.2s ease,
                  color 0.2s ease,
                  border-color 0.2s ease,
                  transform 0.2s ease;
      z-index: 4;
    }
    .vg-core.expanded .vg-core-close { opacity: 1; pointer-events: auto; }
    .vg-core-close:hover {
      background: var(--tile-bg-hover);
      color: var(--accent-green);
      border-color: var(--accent-green);
      transform: rotate(90deg);
    }
    .vg-core-close:focus-visible {
      outline: 2px solid var(--accent-green);
      outline-offset: 2px;
    }
    .vg-core-content .consistency-layout { gap: 6px; }
    .vg-core-content .value-props { margin-top: 20px; }
    @media (max-width: 700px) {
      .vg-core.expanded { padding: 26px 22px 24px; }
      .vg-core-content-title { font-size: 18px; }
    }

    /* ---- 3 Loops grid (replaces consistency-layout) ---- */
    .loops-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 14px;
      margin-top: 20px;
    }
    .loop-card {
      position: relative;
      background: linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.025), rgba(var(--surface-fg-rgb), 0.012));
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      padding: 16px 18px 18px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      overflow: hidden;
    }
    .loop-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-green-rgb), 0.35), transparent);
      opacity: 0.6;
    }
    .loop-card:hover {
      border-color: rgba(var(--accent-green-rgb), 0.45);
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(0,0,0,0.22), 0 0 0 1px rgba(var(--accent-green-rgb), 0.18);
    }
    .loop-head { display: flex; align-items: center; gap: 10px; }
    .loop-badge {
      font-family: var(--font-mono);
      font-size: 9.5px; letter-spacing: 0.18em;
      color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.08);
      border: 1px solid rgba(var(--accent-green-rgb), 0.35);
      padding: 3px 8px; border-radius: 4px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .loop-title {
      font-family: var(--font-display);
      font-size: 15px; font-weight: 600;
      letter-spacing: -0.005em;
      color: var(--text-primary);
      margin: 0;
    }
    .loop-viz {
      width: 100%;
      aspect-ratio: 320 / 180;
      background: rgba(0,0,0,0.25);
      border: 1px solid var(--border-subtle);
      border-radius: 9px;
      overflow: hidden;
    }
    .viz-svg { width: 100%; height: 100%; display: block; }
    .loop-desc {
      font-size: 12px;
      line-height: 1.55;
      color: var(--text-secondary);
      margin: 0;
    }
    .loop-desc strong { color: var(--text-primary); font-weight: 600; }
    .loop-desc em { color: var(--accent-green); font-style: normal; font-weight: 500; }
    @media (max-width: 1100px) {
      .loops-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 900px) {
      .loops-grid { grid-template-columns: 1fr; }
    }

    /* === LOOP 01 — Shared Ontology (substrate) === */
    .viz-substrate .cell-body {
      fill: var(--bg-secondary);
      stroke: rgba(var(--accent-green-rgb), 0.85);
      stroke-width: 1.4;
    }
    .viz-substrate .cell {
      transform-box: fill-box;
      transform-origin: center;
      animation: cellBob 4.2s ease-in-out infinite;
    }
    .viz-substrate .c2 { animation-delay: -0.6s; }
    .viz-substrate .c3 { animation-delay: -1.2s; }
    .viz-substrate .c4 { animation-delay: -1.8s; }
    .viz-substrate .c5 { animation-delay: -2.4s; }
    @keyframes cellBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-3px); }
    }
    .viz-substrate .cell-label {
      font-family: var(--font-mono); font-size: 8.5px; font-weight: 700;
      fill: var(--accent-green); text-anchor: middle; dominant-baseline: middle;
      letter-spacing: 0.04em;
    }
    .viz-substrate .stream {
      stroke: url(#streamGrad);
      stroke-width: 1.4;
      stroke-dasharray: 2 4;
      opacity: 0.5;
      animation: streamFlow 1.4s linear infinite;
    }
    @keyframes streamFlow { to { stroke-dashoffset: -60; } }
    .viz-substrate .drop {
      fill: var(--accent-green);
      filter: drop-shadow(0 0 4px rgba(var(--accent-green-rgb), 0.9));
    }
    .viz-substrate .substrate-body {
      stroke: rgba(var(--accent-green-rgb), 0.55);
      stroke-width: 1;
    }
    .viz-substrate .ripple {
      stroke: rgba(var(--surface-fg-rgb), 0.35);
      stroke-width: 0.8;
      animation: rippleShift 4s ease-in-out infinite;
    }
    .viz-substrate .ripple.r2 {
      stroke: rgba(var(--accent-green-rgb), 0.45);
      animation-delay: -2s;
    }
    @keyframes rippleShift {
      0%, 100% { transform: translateX(0); opacity: 0.7; }
      50%      { transform: translateX(8px); opacity: 1; }
    }
    .viz-substrate .substrate-label {
      font-family: var(--font-display); font-size: 9px; font-weight: 700;
      fill: rgba(var(--surface-fg-rgb), 0.85); letter-spacing: 0.22em;
      text-anchor: middle; dominant-baseline: middle;
    }
    .viz-substrate .abs {
      fill: rgba(var(--surface-fg-rgb), 0.6);
      animation: absDrift 5s ease-in-out infinite;
    }
    .viz-substrate .a2 { animation-delay: -0.7s; }
    .viz-substrate .a3 { animation-delay: -1.4s; }
    .viz-substrate .a4 { animation-delay: -2.1s; }
    .viz-substrate .a5 { animation-delay: -2.8s; }
    .viz-substrate .a6 { animation-delay: -3.5s; }
    .viz-substrate .a7 { animation-delay: -4.2s; }
    @keyframes absDrift {
      0%, 100% { transform: translate(0, 0); opacity: 0.7; }
      50%      { transform: translate(4px, -2px); opacity: 1; }
    }

    /* === LOOP 02 — Self-improving cycle === */
    .viz-cycle .cycle-arrow {
      stroke: rgba(var(--accent-green-rgb), 0.85);
      stroke-width: 1.6;
      fill: none;
    }
    .viz-cycle .cycle-path {
      stroke: rgba(var(--accent-green-rgb), 0.18);
      stroke-width: 1.2;
      stroke-dasharray: 4 4;
    }
    .viz-cycle .stage-chip {
      fill: var(--bg-primary);
      stroke: var(--accent-green);
      stroke-width: 1.4;
    }
    .viz-cycle .stage-label {
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      fill: var(--text-primary); text-anchor: middle; dominant-baseline: middle;
    }
    .viz-cycle .cycle-token {
      fill: var(--accent-green);
      filter: drop-shadow(0 0 6px rgba(var(--accent-green-rgb), 0.9));
    }
    .viz-cycle .mg-node {
      fill: rgba(var(--accent-green-rgb), 0.85);
      opacity: 0;
      animation: mgNodeIn 6s ease-in-out infinite;
    }
    .viz-cycle .mg-edge {
      stroke: rgba(var(--accent-green-rgb), 0.55);
      stroke-width: 0.8;
      opacity: 0;
      animation: mgNodeIn 6s ease-in-out infinite;
    }
    .viz-cycle .n1, .viz-cycle .e1 { animation-delay: 0s; }
    .viz-cycle .n2, .viz-cycle .e2 { animation-delay: 1.2s; }
    .viz-cycle .n3, .viz-cycle .e3 { animation-delay: 2.4s; }
    .viz-cycle .n4, .viz-cycle .e4 { animation-delay: 3.6s; }
    .viz-cycle .n5, .viz-cycle .e5 { animation-delay: 4.8s; }
    @keyframes mgNodeIn {
      0%   { opacity: 0; }
      8%   { opacity: 1; }
      90%  { opacity: 1; }
      100% { opacity: 1; }
    }

    /* === LOOP 03 — Rover === */
    .viz-rover .kg-edge {
      stroke: rgba(var(--accent-green-rgb), 0.25);
      stroke-width: 1;
    }
    .viz-rover .kg-node {
      fill: var(--bg-primary);
      stroke: rgba(var(--accent-green-rgb), 0.7);
      stroke-width: 1.4;
    }
    .viz-rover .rover-dot {
      fill: var(--accent-green);
    }
    .viz-rover .rover-halo {
      fill: rgba(var(--accent-green-rgb), 0.25);
      animation: roverPulse 1.2s ease-in-out infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    @keyframes roverPulse {
      0%, 100% { opacity: 0.8; transform: scale(1); }
      50%      { opacity: 0.2; transform: scale(2); }
    }
    .viz-rover .registry-label {
      font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em;
      fill: var(--text-muted);
    }
    .viz-rover .registry-count {
      font-family: var(--font-mono); font-size: 11px; font-weight: 700;
      fill: var(--accent-green);
      letter-spacing: 0.04em;
    }
    .viz-rover .reg-bar {
      fill: rgba(var(--accent-green-rgb), 0.35);
      transform-origin: left center;
      animation: regBarIn 9s ease-out infinite;
    }
    .viz-rover .b1 { animation-delay: 0.2s; }
    .viz-rover .b2 { animation-delay: 1.3s; }
    .viz-rover .b3 { animation-delay: 2.4s; }
    .viz-rover .b4 { animation-delay: 3.5s; }
    .viz-rover .b5 { animation-delay: 4.6s; }
    .viz-rover .b6 { animation-delay: 5.7s; }
    .viz-rover .b7 { animation-delay: 6.8s; }
    .viz-rover .b8 { animation-delay: 7.9s; }
    @keyframes regBarIn {
      0%   { transform: scaleX(0); opacity: 0; fill: rgba(var(--accent-green-rgb), 0.85); }
      4%   { transform: scaleX(1); opacity: 1; fill: rgba(var(--accent-green-rgb), 0.85); }
      14%  { fill: rgba(var(--accent-green-rgb), 0.35); }
      100% { transform: scaleX(1); opacity: 1; fill: rgba(var(--accent-green-rgb), 0.35); }
    }
    .viz-rover .phase-tag {
      font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em;
      fill: var(--text-muted);
    }
    .viz-rover .phase-tag.dis,
    .viz-rover .phase-tag.cry {
      animation: phaseFlash 4.5s ease-in-out infinite;
    }
    .viz-rover .phase-tag.cry { animation-delay: 2.25s; }
    @keyframes phaseFlash {
      0%, 100% { fill: var(--text-muted); }
      45%, 55% { fill: var(--accent-green); }
    }
    .viz-rover .phase-tag.arr {
      fill: var(--text-muted); font-size: 11px;
    }

    /* === LOOP 04 — Analyze + retry === */
    .viz-retry .retry-edge {
      stroke: rgba(var(--accent-green-rgb), 0.7);
      stroke-width: 1.4;
      fill: none;
    }
    .viz-retry .retry-edge.dashed {
      stroke: rgba(var(--accent-amber-rgb), 0.7);
      stroke-dasharray: 5 4;
    }
    .viz-retry .diamond {
      fill: rgba(var(--accent-green-rgb), 0.08);
      stroke: var(--accent-green);
      stroke-width: 1.5;
    }
    .viz-retry .diamond-label {
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      fill: var(--text-primary); text-anchor: middle; dominant-baseline: middle;
    }
    .viz-retry .retry-box {
      fill: var(--bg-primary);
      stroke: rgba(var(--accent-green-rgb), 0.55);
      stroke-width: 1.2;
    }
    .viz-retry .retry-box.decide {
      stroke: var(--accent-green);
      fill: rgba(var(--accent-green-rgb), 0.1);
    }
    .viz-retry .retry-box-label {
      font-family: var(--font-mono); font-size: 9px; font-weight: 700;
      fill: var(--text-primary); letter-spacing: 0.06em;
      text-anchor: middle; dominant-baseline: middle;
    }
    .viz-retry .retry-box-label.decide { fill: var(--accent-green); }
    .viz-retry .branch-label {
      font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em;
    }
    .viz-retry .branch-label.conf  { fill: var(--accent-green); }
    .viz-retry .branch-label.retry-l { fill: var(--accent-amber); }
    .viz-retry .retry-token.green {
      fill: var(--accent-green);
      filter: drop-shadow(0 0 6px rgba(var(--accent-green-rgb), 0.9));
    }
    .viz-retry .retry-token.amber {
      fill: var(--accent-amber);
      filter: drop-shadow(0 0 6px rgba(var(--accent-amber-rgb), 0.9));
    }

    /* ---- Consistency modal contents (Any model. One standard.) ---- */
    .consistency-modal-body { padding-top: 4px; }
    .consistency-layout { display: flex; flex-direction: column; align-items: center; margin-top: 4px; gap: 8px; }
    .llm-cluster { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .llm-node {
      background: var(--bg-secondary); border: 1px solid var(--border-strong);
      border-radius: 999px; padding: 9px 18px; font-family: var(--font-display);
      font-size: 12.5px; font-weight: 600; color: var(--text-primary);
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      animation: floatNode 6s ease-in-out infinite; white-space: nowrap;
    }
    .llm-node.dashed { border-style: dashed; color: var(--text-secondary); background: transparent; }
    .llm-node:nth-child(2) { animation-delay: -1s; }
    .llm-node:nth-child(3) { animation-delay: -2s; }
    .llm-node:nth-child(4) { animation-delay: -3s; }
    .llm-node:nth-child(5) { animation-delay: -4s; }
    .llm-node:nth-child(6) { animation-delay: -5s; }
    @keyframes floatNode { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    .con-arrows { display: flex; justify-content: space-around; width: 60%; max-width: 540px; height: 28px; pointer-events: none; }
    .con-arrows.single { width: 100%; justify-content: center; }
    .con-arrow { width: 2px; height: 100%; background: linear-gradient(180deg, var(--text-muted) 0%, transparent 100%); position: relative; opacity: 0.4; }
    .con-arrow::after { content: ''; position: absolute; bottom: -4px; left: -4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text-muted); }
    .con-arrow.bold { background: linear-gradient(180deg, var(--accent-green) 0%, transparent 100%); opacity: 1; }
    .con-arrow.bold::after { border-top-color: var(--accent-green); }
    .aucert-filter {
      background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.08), rgba(var(--accent-green-rgb), 0.02));
      border: 1px solid var(--accent-green); border-radius: 13px; padding: 18px 28px;
      width: 100%; max-width: 620px; text-align: center;
      box-shadow: inset 0 0 30px rgba(var(--accent-green-rgb), 0.05), 0 10px 28px rgba(0,0,0,0.15);
    }
    .aucert-filter h4 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--accent-green); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
    .filter-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .filter-chips span { font-family: var(--font-mono); font-size: 11px; padding: 5px 11px; background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 5px; color: var(--text-primary); letter-spacing: 0.04em; }
    .prod-quality {
      background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-top: 3px solid var(--accent-green);
      border-radius: 13px; padding: 14px 26px; display: flex; align-items: center; gap: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.15); width: 100%; max-width: 620px;
    }
    .prod-quality .prod-icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--accent-green-rgb), 0.15); border: 1px solid var(--accent-green); color: var(--accent-green); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13.5px; box-shadow: 0 0 12px rgba(var(--accent-green-rgb), 0.25); }
    .prod-quality h4 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin: 0; color: var(--text-primary); letter-spacing: -0.01em; }
    .value-props { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 18px; }
    .value-card { background: var(--tile-bg); border: 1px solid var(--border-subtle); border-radius: 13px; padding: 18px 22px; }
    .value-card h5 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
    .value-card h5 svg { width: 16px; height: 16px; color: var(--accent-green); flex-shrink: 0; }
    .value-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
    @media (max-width: 700px) {
      .value-props { grid-template-columns: 1fr; }
      .llm-cluster { gap: 8px; }
      .llm-node { padding: 7px 14px; font-size: 11.5px; }
    }

    /* ---- Coverage block (appended inside Aucert.ai slide) ---- */
    .vg-coverage {
      margin-top: 56px;
      padding-top: 36px;
      border-top: 1px dashed var(--border-subtle);
    }
    .vg-coverage-head { margin-bottom: 8px; }
    .vg-coverage-tag {
      display: inline-block;
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--accent-green);
      background: rgba(var(--accent-green-rgb), 0.08);
      border: 1px solid rgba(var(--accent-green-rgb), 0.3);
      padding: 4px 10px; border-radius: 999px;
      margin-bottom: 10px;
    }
    .vg-coverage-heading {
      font-family: var(--font-display);
      font-size: 28px; font-weight: 700;
      letter-spacing: -0.01em;
      margin: 0;
    }

    /* ---- Dimensions of Quality (5 layers) ---- */
    .dim-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
    .dim-card { background: var(--tile-bg); border: 1px solid var(--border-subtle); border-radius: 13px; padding: 18px 16px; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
    .dim-card:hover { transform: translateY(-3px); border-color: var(--accent-green); box-shadow: 0 12px 28px rgba(0,0,0,0.15); }
    .dim-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(var(--accent-green-rgb), 0.1); color: var(--accent-green); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; transition: transform 0.3s, background 0.3s; }
    .dim-card:hover .dim-icon { background: rgba(var(--accent-green-rgb), 0.2); transform: scale(1.05); }
    .dim-icon svg { width: 18px; height: 18px; stroke-width: 2px; }
    .dim-num { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--accent-green); text-transform: uppercase; margin-bottom: 6px; }
    .dim-title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; letter-spacing: -0.005em; line-height: 1.25; }
    .dim-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
    .dim-list li { font-size: 12px; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
    .dim-list li::before { content: '→'; color: var(--border-strong); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; transition: color 0.3s; flex-shrink: 0; }
    .dim-card:hover .dim-list li::before { color: var(--accent-green); }
    .dim-callout { margin-top: 24px; display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: linear-gradient(135deg, rgba(var(--accent-amber-rgb), 0.06), rgba(var(--accent-amber-rgb), 0.01)); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-amber); border-radius: 0 11px 11px 0; }
    .dim-callout-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
    .dim-callout-text strong { color: var(--text-primary); font-weight: 600; }
    @media (max-width: 1100px) { .dim-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 700px) { .dim-grid { grid-template-columns: 1fr; } .dim-callout { flex-direction: column; align-items: flex-start; } }

    /* ---- Risks & Mitigations (collapsed cards open as modal) ---- */
    .risk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 28px; }
    .risk-card {
      background: var(--tile-bg); border: 1px solid var(--border-subtle);
      border-top: 2px solid var(--accent-amber);
      border-radius: 11px; padding: 18px 16px;
      display: flex; flex-direction: column; gap: 10px;
      cursor: pointer;
      transition: transform 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    }
    .risk-card:hover { transform: translateY(-3px); border-color: var(--accent-green); box-shadow: 0 10px 26px rgba(0,0,0,0.18); }
    .risk-card.green  { border-top-color: var(--accent-green); }
    .risk-card.red    { border-top-color: var(--accent-red); }
    .risk-card.blue   { border-top-color: var(--accent-blue); }
    .risk-card.purple { border-top-color: var(--accent-purple); }
    .risk-card .risk-type { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
    .risk-card h4 { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.3; margin: 2px 0 8px; }
    .risk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
    .risk-meta-cell { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 7px; padding: 8px 10px; }
    .risk-meta-lbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; display: block; }
    .risk-meta-val { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; }
    .risk-meta-val.high { color: var(--accent-red); }
    .risk-meta-val.med  { color: var(--accent-amber); }
    .risk-meta-val.low  { color: var(--accent-green); }
    .risk-cta {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 10px; padding-top: 10px;
      border-top: 1px solid var(--border-subtle);
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-secondary); transition: color 0.2s ease, border-color 0.2s ease;
    }
    .risk-card:hover .risk-cta { color: var(--accent-green); border-top-color: rgba(var(--accent-green-rgb), 0.22); }
    .risk-card:hover .risk-cta .cta-arrow { transform: translateX(3px); }
        @media (max-width: 1100px) { .risk-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 700px) { .risk-grid { grid-template-columns: 1fr; } }

    /* Risk modal (reuses .shift-modal scaffolding) */
    .risk-modal .shift-modal-card { max-width: 620px; }
    .risk-modal .risk-modal-meta {
      display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px;
    }
    .risk-modal .risk-meta-pill {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 999px;
      background: var(--bg-primary); border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
    }
    .risk-modal .risk-meta-pill .v { font-weight: 700; margin-left: 6px; }
    .risk-modal .risk-meta-pill.high .v { color: var(--accent-red); }
    .risk-modal .risk-meta-pill.med  .v { color: var(--accent-amber); }
    .risk-modal .risk-meta-pill.low  .v { color: var(--accent-green); }
    .risk-modal .risk-mitigation {
      background: rgba(var(--accent-green-rgb), 0.06);
      border: 1px solid rgba(var(--accent-green-rgb), 0.22);
      border-left: 3px solid var(--accent-green);
      border-radius: 0 10px 10px 0;
      padding: 16px 18px;
      font-size: 13.5px; line-height: 1.6;
      color: var(--text-secondary);
    }
    .risk-modal .risk-mitigation strong { color: var(--accent-green); font-weight: 600; }

    /* ========== SLIDE 6 — LIVE DEMO EMBED ========== */
    .demo-slide .demo-frame-wrap {
      margin-top: 28px;
      width: 100%;
      max-width: 1200px;
      aspect-ratio: 16 / 10;
      border-radius: 14px;
      overflow: hidden;
      background: var(--terminal-bg);
      border: 1px solid var(--border-subtle);
      box-shadow: 0 24px 48px -16px rgba(0,0,0,0.45), 0 2px 0 rgba(var(--surface-fg-rgb), 0.03) inset;
      position: relative;
      transition: border-color 0.2s ease;
    }
    .demo-slide .demo-frame-wrap:hover { border-color: rgba(var(--accent-green-rgb), 0.4); }
    .demo-frame-inner {
      position: absolute; inset: 0;
      display: flex;
    }
    .demo-iframe {
      width: 100%; height: 100%;
      border: 0;
      background: var(--terminal-bg);
      display: block;
    }
    .demo-expand, .demo-collapse {
      position: absolute;
      top: 12px; right: 12px;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 12px;
      background: rgba(13,13,20,0.85);
      backdrop-filter: blur(8px);
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      color: var(--text-primary);
      font-size: 12px; font-weight: 500;
      cursor: pointer;
      z-index: 10;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    .demo-expand:hover, .demo-collapse:hover {
      background: rgba(var(--accent-green-rgb), 0.12);
      border-color: rgba(var(--accent-green-rgb), 0.5);
      transform: translateY(-1px);
    }
    .demo-expand[hidden], .demo-collapse[hidden] { display: none !important; }

    /* Expanded (fullscreen overlay) state */
    body.demo-expanded { overflow: hidden; }
    body.demo-expanded .demo-slide .demo-frame-wrap {
      position: fixed; inset: 0;
      max-width: none;
      width: 100vw; height: 100vh;
      aspect-ratio: auto;
      margin: 0;
      border-radius: 0;
      border: 0;
      z-index: 9999;
      animation: demoExpand 0.25s ease-out;
    }
    @keyframes demoExpand {
      from { opacity: 0.6; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }/* ---- QA Tax pipeline block (slide 2) ---- */
    /* QA pipeline tube stop colors — switch per theme so the dark cable
       doesn't look like a stark black slash on the cream light-mode bg. */
    .qa-pipe-stop-top { stop-color: #0D0D14; }
    .qa-pipe-stop-bot { stop-color: #16161F; }
    /* Light theme: the dark "live packet flow" pipe was reading as a
       harsh black bar against the cream background. Use the same warm
       neutral as the slide tiles so the pipe sits IN the design, not
       against it. The packet labels and arrows remain legible because
       they have their own white pill backgrounds. */
    [data-theme="light"] .qa-pipe-stop-top { stop-color: #E8E8E1; }
    [data-theme="light"] .qa-pipe-stop-bot { stop-color: #DCDCD2; }

    .qa-tax-block {
      --dev: var(--accent-green);
      --dev-soft: rgba(var(--accent-green-rgb), 0.14);
      --dev-line: rgba(var(--accent-green-rgb), 0.45);
      --qa: var(--accent-red);
      --qa-soft: rgba(var(--accent-red-rgb), 0.14);
      --qa-line: rgba(var(--accent-red-rgb), 0.45);
      --rework: var(--accent-amber);
      --rework-soft: rgba(var(--accent-amber-rgb), 0.14);
      --rework-line: rgba(var(--accent-amber-rgb), 0.45);
      margin: 22px 0 36px;
      padding-top: 4px;
    }
    .qa-tax-note {
      margin-top: 14px;
      font-size: 11.5px;
      line-height: 1.5;
      color: var(--text-muted);
      font-style: italic;
    }

.qa-tax-block .qa-tax-deck {
      font-size: 15px; line-height: 1.5;
      color: var(--text-secondary);
      max-width: 64ch;
      margin: 0 0 18px;
    }

.qa-tax-block .qa-tax-scene-wrap { width: 100%; margin: 0 0 18px; }

.qa-tax-block .qa-tax-scene { width: 100%; height: auto; display: block; overflow: visible; }

.qa-tax-block .qa-tax-stats {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
      padding-top: 18px; border-top: 1px solid var(--border-subtle);
    }

.qa-tax-block .qa-tax-stat {
      display: flex; flex-direction: column; gap: 6px;
      padding: 14px 16px; border: 1px solid var(--border-subtle);
      border-radius: 11px; background: var(--tile-bg);
    }

.qa-tax-block .qa-tax-stat .k {
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
    }

.qa-tax-block .qa-tax-stat .v {
      font-family: var(--font-display); font-weight: 700; font-size: 28px;
      letter-spacing: -0.02em; line-height: 1;
      color: var(--text-primary); white-space: nowrap;
    }

.qa-tax-block .qa-tax-stat .sub { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.qa-tax-block .qa-tax-stat.dev .v { color: var(--accent-green); }

.qa-tax-block .qa-tax-stat.qa .v { color: var(--accent-red); }

.qa-tax-block .qa-tax-stat.ratio .v { color: var(--accent-amber); }

.qa-tax-block .qa-tax-stat .bar {
      margin-top: 6px; height: 5px; width: 100%;
      background: rgba(var(--surface-fg-rgb), 0.05);
      border-radius: 999px; overflow: hidden;
    }

.qa-tax-block .qa-tax-stat .bar > i { display: block; height: 100%; border-radius: 999px; }

.qa-tax-block .qa-tax-stat.dev .bar > i { background: var(--accent-green); }

.qa-tax-block .qa-tax-stat.qa .bar > i { background: var(--accent-red); }

@media (max-width: 820px) {
  .qa-tax-block .qa-tax-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- QA Tax with AI block (slide 2, after charts) ---- */
    .qa-tax-ai-block {
      --dev: var(--accent-green);
      --dev-soft: rgba(var(--accent-green-rgb), 0.14);
      --dev-line: rgba(var(--accent-green-rgb), 0.45);
      --qa: var(--accent-red);
      --qa-soft: rgba(var(--accent-red-rgb), 0.14);
      --qa-line: rgba(var(--accent-red-rgb), 0.45);
      --rework: var(--accent-amber);
      --rework-soft: rgba(var(--accent-amber-rgb), 0.14);
      --rework-line: rgba(var(--accent-amber-rgb), 0.45);
      --ship: var(--accent-blue);
      --ship-soft: rgba(var(--accent-blue-rgb), 0.14);
      --ship-line: rgba(var(--accent-blue-rgb), 0.55);
      margin: 36px 0 22px;
      padding-top: 22px;
      border-top: 1px dashed var(--border-subtle);
    }

.qa-tax-ai-block .qa-tax-ai-sub {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--accent-blue); margin: 0 0 8px;
    }

.qa-tax-ai-block .qa-tax-ai-sub::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent-blue); box-shadow: 0 0 8px var(--accent-blue);
    }

.qa-tax-ai-block .qa-tax-ai-heading {
      font-family: var(--font-display);
      font-weight: 600; font-size: clamp(32px, 4.5vw, 56px);
      letter-spacing: -0.02em; line-height: 1.05;
      margin: 0 0 28px;
      max-width: 900px;
    }

.qa-tax-ai-block .qa-tax-ai-heading .pile { color: var(--accent-red); }

.qa-tax-ai-block .qa-tax-ai-deck {
      font-size: 15px; line-height: 1.5;
      color: var(--text-secondary);
      max-width: 64ch;
      margin: 0 0 18px;
    }

.qa-tax-ai-block .qa-tax-ai-scene-wrap {
      width: calc(100% + 96px); margin: 0 -48px 18px;
    }

@media (max-width: 900px) {
  .qa-tax-ai-block .qa-tax-ai-scene-wrap { width: 100%; margin: 0 0 18px; }
}

.qa-tax-ai-block .qa-tax-ai-scene { width: 100%; height: auto; display: block; overflow: visible; }

.qa-tax-ai-block .qa-tax-ai-stats {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
      padding-top: 18px; border-top: 1px solid var(--border-subtle);
    }

.qa-tax-ai-block .qa-tax-ai-stat {
      display: flex; flex-direction: column; gap: 6px;
      padding: 14px 16px; border: 1px solid var(--border-subtle);
      border-radius: 11px; background: var(--tile-bg);
    }

.qa-tax-ai-block .qa-tax-ai-stat .k {
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
    }

.qa-tax-ai-block .qa-tax-ai-stat .v {
      font-family: var(--font-display); font-weight: 700; font-size: 28px;
      letter-spacing: -0.02em; line-height: 1;
      color: var(--text-primary); white-space: nowrap;
    }

.qa-tax-ai-block .qa-tax-ai-stat .sub { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

.qa-tax-ai-block .qa-tax-ai-stat.dev .v { color: var(--accent-green); }

.qa-tax-ai-block .qa-tax-ai-stat.qa .v { color: var(--accent-red); }

.qa-tax-ai-block .qa-tax-ai-stat.ship .v { color: var(--accent-blue); }

.qa-tax-ai-block .qa-tax-ai-stat.ratio .v { color: var(--accent-amber); }

.qa-tax-ai-block .qa-tax-ai-stat .bar {
      margin-top: 6px; height: 5px; width: 100%;
      background: rgba(var(--surface-fg-rgb), 0.05);
      border-radius: 999px; overflow: hidden;
    }

.qa-tax-ai-block .qa-tax-ai-stat .bar > i { display: block; height: 100%; border-radius: 999px; }

.qa-tax-ai-block .qa-tax-ai-stat.dev .bar > i { background: var(--accent-green); }

.qa-tax-ai-block .qa-tax-ai-stat.qa .bar > i { background: var(--accent-red); }

.qa-tax-ai-block .qa-tax-ai-stat.ship .bar > i { background: var(--accent-blue); }

@media (max-width: 820px) {
  .qa-tax-ai-block .qa-tax-ai-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ========== SLIDE 2 — DUAL-PANEL TOGGLE ==========
   Slide 2 contains two switchable panels: an overview (QA tax + AI variant)
   and a counterfactual built-vs-shipped grid. The toggle floats top-right
   of the slide and swaps which panel is .active. */
.problem-slide .container { position: relative; }

.problem-toggle {
  position: absolute;
  top: 0; right: 32px;
  display: inline-flex; align-items: center; gap: 12px;
  z-index: 10;
  padding: 6px 8px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.problem-toggle .prob-pos {
  min-width: 56px; text-align: center;
  font-weight: 500; color: var(--text-primary);
}
.problem-toggle .prob-pos .total { color: var(--text-muted); }
.problem-toggle .prob-nav {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.18s;
}
.problem-toggle .prob-nav:hover:not(:disabled) {
  color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.10);
  transform: translateX(var(--nudge, 0));
}
.problem-toggle .prob-nav.prev:hover:not(:disabled) { --nudge: -2px; }
.problem-toggle .prob-nav.next:hover:not(:disabled) { --nudge:  2px; }
.problem-toggle .prob-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.problem-toggle .prob-nav svg { width: 14px; height: 14px; }

.problem-toggle .prob-label {
  padding-right: 4px; color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
  margin-right: 4px;
}

.problem-panel { display: none; animation: probPanelFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.problem-panel.active { display: block; }
@keyframes probPanelFade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .problem-panel { animation: none; }
}

@media (max-width: 640px) {
  .problem-toggle { right: 20px; top: -4px; gap: 6px; padding: 4px 6px; font-size: 10px; }
  .problem-toggle .prob-nav { width: 26px; height: 26px; }
  .problem-toggle .prob-pos { min-width: 44px; }
  .problem-toggle .prob-label { display: none; }
}

/* ========== SLIDE 2 — PANEL 2 (Built vs Shipped grid) ========== */
.bn-cf {
  margin: 22px 0 28px;
  padding: 22px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}
.bn-cf-grid-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px; align-items: flex-start;
}
.bn-cf-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}
.bn-cf-tile {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  border: 1px solid transparent;
  transition: transform 0.15s ease;
  position: relative;
}
.bn-cf-tile:hover { transform: translateY(-2px); }
.bn-cf-tile .num { font-family: var(--font-mono); font-size: 9px; opacity: 0.7; letter-spacing: 0.08em; }
.bn-cf-tile.green { background: rgba(var(--accent-green-rgb), 0.16); border-color: rgba(var(--accent-green-rgb), 0.55); color: #BBF7D0; }
.bn-cf-tile.amber { background: rgba(var(--accent-amber-rgb), 0.12); border-color: rgba(var(--accent-amber-rgb), 0.45); color: #FDE68A; }
.bn-cf-tile.red   { background: rgba(var(--accent-red-rgb), 0.16); border-color: rgba(var(--accent-red-rgb), 0.55); color: #FECACA; }
.bn-cf-tile.red::after {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-red);
  box-shadow: 0 0 6px rgba(var(--accent-red-rgb), 0.7);
}

.bn-cf-rail { display: flex; flex-direction: column; gap: 12px; }
.bn-cf-callout {
  padding: 14px 16px; border-radius: 11px;
  border: 1px solid var(--border-subtle);
  background: var(--tile-bg);
  display: flex; flex-direction: column; gap: 4px;
}
.bn-cf-callout .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.bn-cf-callout .num { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; line-height: 1; }
.bn-cf-callout .desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.bn-cf-callout.green { border-color: rgba(var(--accent-green-rgb), 0.30); }
.bn-cf-callout.amber { border-color: rgba(var(--accent-amber-rgb), 0.30); }
.bn-cf-callout.red   { border-color: rgba(var(--accent-red-rgb), 0.30); }
.bn-cf-callout.green .num { color: var(--accent-green); }
.bn-cf-callout.amber .num { color: var(--accent-amber); }
.bn-cf-callout.red   .num { color: var(--accent-red); }

.bn-cf-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.bn-cf-header h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--text-primary); letter-spacing: -0.01em;
}
.bn-cf-header .meta {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em; color: var(--text-muted); text-transform: uppercase;
}

.bn-cf-gauge {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.bn-cf-bar-block { display: flex; flex-direction: column; gap: 8px; }
.bn-cf-bar-head { display: flex; align-items: baseline; justify-content: space-between; }
.bn-cf-bar-head .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.bn-cf-bar-head .val { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.bn-cf-bar { height: 14px; border-radius: 999px; background: rgba(var(--surface-fg-rgb), 0.05); overflow: hidden; position: relative; }
.bn-cf-bar > i { display: block; height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(.4,1.4,.6,1); }
.bn-cf-bar-block.dev .val { color: var(--accent-green); }
.bn-cf-bar-block.dev .bn-cf-bar > i { background: var(--accent-green); width: 100%; }
.bn-cf-bar-block.qa  .val { color: var(--accent-amber); }
.bn-cf-bar-block.qa  .bn-cf-bar > i { background: linear-gradient(90deg, var(--accent-amber), var(--accent-red)); width: 14%; }
.bn-cf-bar-block .note { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }

@media (max-width: 880px) {
  .bn-cf-grid-wrap { grid-template-columns: 1fr; }
  .bn-cf-grid { grid-template-columns: repeat(6, 1fr); }
  .bn-cf-gauge { grid-template-columns: 1fr; }
}

/* ===== Reference popover (click <sup class="ref"> → inline citation) ===== */
sup.ref {
  cursor: pointer;
  color: var(--accent-green);
  font-size: 0.7em;
  margin-left: 1px;
  user-select: none;
  transition: color 0.15s ease;
}
sup.ref:hover,
sup.ref.active { color: var(--text-primary); }
sup.ref:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
  border-radius: 3px;
}

.ref-popover {
  position: absolute;
  z-index: 9000;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 12px 32px 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-green);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--accent-green-rgb), 0.18);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.ref-popover.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ref-popover .ref-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-green);
  margin-bottom: 6px;
}
.ref-popover a {
  color: var(--accent-green);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  word-break: break-word;
}
.ref-popover a:hover {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}
.ref-popover .ref-no-link {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-muted);
}
.ref-popover .ref-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ref-popover .ref-close:hover {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

/* ===== Hover-detail tooltip — used to push secondary copy off the slide ===== */
/* HTML pattern:
   <span class="hover-detail" data-detail="Detail copy here.">Trigger text</span>
   or rich content:
   <span class="hover-detail"><span class="hd-trigger">Trigger</span>
     <template class="hd-content">…rich HTML…</template></span>
*/
.hover-detail {
  position: relative;
  display: inline;
  border-bottom: 1px dotted rgba(var(--surface-fg-rgb), 0.35);
  cursor: help;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hover-detail:hover,
.hover-detail:focus-visible,
.hover-detail.is-open {
  color: var(--accent-green);
  border-bottom-color: var(--accent-green);
  outline: none;
}
.hover-detail::after {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: 1px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.hover-detail:hover::after,
.hover-detail:focus-visible::after,
.hover-detail.is-open::after { opacity: 1; }

/* Block-level variant — wraps a whole card/row instead of inline text */
.hover-detail.block {
  display: block;
  border-bottom: none;
  cursor: help;
}
.hover-detail.block::after { display: none; }
.hover-detail.block .hd-affordance {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  background: var(--bg-secondary);
  opacity: 0.7;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  pointer-events: none;
}
.hover-detail.block:hover .hd-affordance,
.hover-detail.block:focus-visible .hd-affordance,
.hover-detail.block.is-open .hd-affordance {
  color: var(--accent-green);
  border-color: var(--accent-green);
  opacity: 1;
}

.hd-popover {
  position: absolute;
  z-index: 9100;
  width: 280px;
  max-width: calc(100vw - 24px);
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.hd-popover.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hd-popover strong { color: var(--text-primary); font-weight: 600; }
.hd-popover ul { margin: 6px 0 0; padding-left: 16px; }
.hd-popover li { margin: 2px 0; }

/* ===== Before / After comparison slider (solution slide) ===== */
.compare-slider {
  --pos: 50%;
  /* QA-scene color tokens — match .qa-tax-block scope so buildQaScene() picks them up */
  --dev: var(--accent-green);
  --dev-soft: rgba(var(--accent-green-rgb), 0.14);
  --dev-line: rgba(var(--accent-green-rgb), 0.45);
  --qa: var(--accent-red);
  --qa-soft: rgba(var(--accent-red-rgb), 0.14);
  --qa-line: rgba(var(--accent-red-rgb), 0.45);
  --rework: var(--accent-amber);
  --rework-soft: rgba(var(--accent-amber-rgb), 0.14);
  --rework-line: rgba(var(--accent-amber-rgb), 0.45);
  --validate: var(--accent-purple);
  --validate-soft: rgba(var(--accent-purple-rgb), 0.16);
  --validate-line: rgba(var(--accent-purple-rgb), 0.55);
  --saved: var(--accent-green);
  --saved-soft: rgba(var(--accent-green-rgb), 0.08);
  --saved-line: rgba(var(--accent-green-rgb), 0.55);
  margin-top: 28px;
  padding: 18px 20px 22px;
  background: linear-gradient(135deg, rgba(var(--accent-amber-rgb), 0.06), rgba(var(--accent-green-rgb), 0.06));
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  user-select: none;
}
.compare-slider .cs-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-green);
  letter-spacing: 0.08em;
  opacity: 0.8;
}
.cs-frame {
  position: relative;
  height: 420px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  cursor: ew-resize;
  touch-action: none;
}
.cs-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  padding: 30px 20px 20px;
}
.cs-scene {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: block;
  min-height: 0;
}
.cs-layer.cs-before {
  /* Opaque base + tinted overlay so this layer fully covers the slide background */
  background:
    linear-gradient(135deg, rgba(var(--accent-amber-rgb), 0.07), rgba(var(--accent-red-rgb), 0.05)),
    var(--bg-secondary);
  z-index: 1;
}
.cs-layer.cs-after {
  /* Opaque base so the BEFORE layer doesn't bleed through the revealed AFTER region */
  background:
    linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.10), rgba(var(--accent-green-rgb), 0.04)),
    var(--bg-secondary);
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.cs-corner {
  position: absolute;
  top: 12px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-layer.cs-after .cs-corner {
  left: auto; right: 16px;
  color: var(--accent-green);
}
.cs-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}
.cs-stage {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  min-width: 0;
  text-align: center;
}
.cs-stage-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.cs-stage-title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.cs-stage-title code {
  font-size: 12px;
  background: transparent;
  color: var(--text-primary);
  padding: 0;
}
.cs-stage-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.3;
}
.cs-stage.warn { border-color: rgba(var(--accent-amber-rgb), 0.55); background: rgba(var(--accent-amber-rgb), 0.05); }
.cs-stage.warn .cs-stage-num { color: var(--accent-amber); }
.cs-stage.bad  { border-color: rgba(var(--accent-red-rgb), 0.55);   background: rgba(var(--accent-red-rgb), 0.06); }
.cs-stage.bad .cs-stage-num { color: var(--accent-red); }
.cs-stage.good { border-color: rgba(var(--accent-green-rgb), 0.55); background: rgba(var(--accent-green-rgb), 0.06); }
.cs-stage.good .cs-stage-num { color: var(--accent-green); }
.cs-arrow {
  flex: 0 0 auto;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.cs-arrow.good { color: var(--accent-green); }
.cs-arrow svg { width: 16px; height: 16px; }
/* Prominent 3-up stat tiles — mirrors the problem-panel takeaways aesthetic */
.cs-foot {
  flex: 0 0 auto;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cs-foot-tile {
  padding: 10px 14px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-foot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs-foot-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.1;
}
.cs-foot-value.good { color: var(--accent-green); }
.cs-foot-value.warn { color: var(--accent-red); }
/* Legacy inline-foot leftovers (kept for safety; new markup uses tiles) */
.cs-foot strong { color: var(--text-primary); font-weight: 600; }
.cs-foot.good strong { color: var(--accent-green); }
.cs-foot-dot { opacity: 0.4; }

.cs-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  transform: translateX(-50%);
  z-index: 5;
  cursor: ew-resize;
}
.cs-handle:focus-visible { outline: none; }
.cs-handle:focus-visible .cs-handle-knob {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}
.cs-handle-line {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(var(--accent-green-rgb), 0.95));
  transform: translateX(-50%);
  pointer-events: none;
}
.cs-handle-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--accent-green);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-green);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cs-handle:hover .cs-handle-knob,
.cs-handle.dragging .cs-handle-knob {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.cs-handle-knob svg { width: 22px; height: 22px; }

@media (max-width: 720px) {
  .cs-frame { height: 300px; }
  .cs-pipeline { flex-wrap: wrap; gap: 6px; }
  .cs-arrow { display: none; }
  .cs-stage-title { font-size: 11.5px; }
  .cs-stage-meta { font-size: 10px; }
}

/* ========== OVERFLOW / Q&A APPENDIX ========== */
/* The overflow section lives below the references footer. Individual slides are
   collapsed by default; only the slide(s) with .is-open render. The whole
   section is hidden in present mode. */
.overflow-section {
  display: block;
  margin: 0;
  padding: 0;
}
.overflow-section .slide.overflow-slide {
  display: none;
  position: relative;
  border-top: 1px dashed var(--border-subtle);
}
.overflow-section .slide.overflow-slide.is-open {
  display: flex;
}
/* Close-X button on each opened overflow slide */
.overflow-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--surface-elev, rgba(var(--surface-fg-rgb), 0.04));
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.overflow-close:hover {
  color: var(--text-primary);
  border-color: var(--accent-green);
}
body.mode-present .overflow-section { display: none; }
/* When entering present mode with an overflow slide open, keep the section
   visible and present that slide as the active slide. The .active class on
   the overflow slide picks up the normal `body.mode-present .slide.active`
   styling (full-viewport, centered). */
body.mode-present.mode-present-overflow .overflow-section { display: block; }
body.mode-present.mode-present-overflow .overflow-section .slide.overflow-slide.is-open { display: flex; }
body.mode-present.mode-present-overflow .overflow-section .slide.overflow-slide .overflow-close { display: none; }
/* Hide the present-bar (prev / dots / next) when presenting a single overflow slide */
body.mode-present.mode-present-overflow .present-bar { display: none; }

/* ===== OVERFLOW MENU (dropdown beside Present) ===== */
.overflow-menu-wrap {
  position: relative;
  display: inline-flex;
}
#overflowToggle .chev {
  margin-left: 4px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
#overflowToggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}
.overflow-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--surface-elev, var(--bg-secondary, #1a1a1f));
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
  padding: 8px;
  z-index: 1200;
}
/* In the desktop sidebar layout, the Overflow button sits in the 200px-wide
   left sidebar. A right-anchored popup overflows off-screen to the left, so
   anchor it to the right edge of the button and grow it into the main pane. */
@media (min-width: 1024px) {
  .overflow-menu {
    top: auto;
    bottom: 0;
    left: calc(100% + 12px);
    right: auto;
  }
}
.overflow-menu[hidden] { display: none; }
.overflow-menu-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 10px 6px;
}
.overflow-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.overflow-menu-item:hover,
.overflow-menu-item:focus-visible {
  background: var(--surface-hover, rgba(var(--surface-fg-rgb), 0.06));
  outline: none;
}
.overflow-menu-item.is-current {
  background: var(--surface-hover, rgba(var(--surface-fg-rgb), 0.06));
}
.overflow-menu-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-secondary);
}
.overflow-menu-icon svg { width: 14px; height: 14px; }
.overflow-menu-label { flex: 1; }
.overflow-menu-kbd {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
}
body.mode-present .overflow-menu-wrap { display: none; }

/* ========== SLIDE 6 — WHY NOW (panel toggle + Two-dimensions layout) ========== */
.whynow-slide .container { position: relative; }

.whynow-toggle {
  position: absolute;
  top: 0; right: 32px;
  display: inline-flex; align-items: center; gap: 12px;
  z-index: 10;
  padding: 6px 8px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.whynow-toggle .wn-pos { min-width: 56px; text-align: center; font-weight: 500; color: var(--text-primary); }
.whynow-toggle .wn-pos .total { color: var(--text-muted); }
.whynow-toggle .wn-nav {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.18s;
}
.whynow-toggle .wn-nav:hover:not(:disabled) {
  color: var(--accent-green);
  background: rgba(var(--accent-green-rgb), 0.10);
  transform: translateX(var(--nudge, 0));
}
.whynow-toggle .wn-nav.prev:hover:not(:disabled) { --nudge: -2px; }
.whynow-toggle .wn-nav.next:hover:not(:disabled) { --nudge:  2px; }
.whynow-toggle .wn-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.whynow-toggle .wn-nav svg { width: 14px; height: 14px; }
.whynow-toggle .wn-label {
  padding-right: 4px; color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
  margin-right: 4px;
}

.whynow-panel { display: none; animation: wnPanelFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.whynow-panel.active { display: block; }
@keyframes wnPanelFade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .whynow-panel { animation: none; }
}
@media (max-width: 640px) {
  .whynow-toggle { right: 20px; top: -4px; gap: 6px; padding: 4px 6px; font-size: 10px; }
  .whynow-toggle .wn-nav { width: 26px; height: 26px; }
  .whynow-toggle .wn-pos { min-width: 44px; }
  .whynow-toggle .wn-label { display: none; }
}

/* === Two-dimensions layout (Panel 1) === */
.dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 24px;
}
.dim-col {
  display: flex; flex-direction: column;
  gap: 14px;
}
.dim-head { padding: 8px 0 4px; }
.dim-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  margin-bottom: 12px;
  background: rgba(var(--surface-fg-rgb), 0.02);
}
.dim-tag.possible { color: var(--accent-blue); }
.dim-tag.mandatory { color: var(--accent-amber); }
.dim-head h3 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--text-primary);
  line-height: 1.25;
}
.dim-sub {
  font-size: 13px; color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.dim-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.dim-item {
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.dim-item:hover {
  border-color: var(--accent-green);
  transform: translateY(-1px);
}
.dim-possible .dim-item:hover { border-color: var(--accent-blue); }
.dim-mandatory .dim-item:hover { border-color: var(--accent-amber); }
.dim-item-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-block;
  margin-bottom: 6px;
}
.dim-item h4 {
  font-size: 14.5px; font-weight: 600;
  margin: 0 0 4px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.dim-item p {
  font-size: 12.5px; color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .dim-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ========== WHY NOW — Panel 1 (hub-and-spoke) ==========
   A central animated "AI" chip with a green halo. Two arrows fan
   outward to a left column ("AI made it possible") and a right
   column ("AI makes it mandatory"). Three evidence cards per side
   — every fact lives on the card itself (no hover tooltips). */
.whynow-panel-hub .lead-mini { max-width: 740px; margin-bottom: 22px; }

.wn2-stage {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* ─── Axis row: tag · arrow · AI chip · arrow · tag ─── */
.wn2-axis {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 18px;
  margin: 6px auto 0;
  max-width: 1080px;
  width: 100%;
}
.wn2-axis-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-green);
  white-space: nowrap;
}
/* GREEN-ONLY: solid-filled tag on the "possible" side, outlined on the
   "mandatory" side. Two variants of the same brand green. */
.wn2-axis-tag.possible {
  color: var(--bg-primary);
  background: var(--accent-green);
}
.wn2-axis-tag.mandatory {
  color: var(--accent-green);
  background: rgba(var(--accent-green-rgb), 0.04);
}
.wn2-axis-arrow { width: 100%; height: 16px; display: block; }

/* ─── Slide-04-style arrows: thin static green path with a small
   arrowhead at the tag end, plus white tracer dots that travel along
   the path FROM the chip OUT to the tag (animateMotion). This matches
   the visual language of the validation-system slide. ─── */
.wn2-axis-flow {
  fill: none;
  stroke: rgba(var(--accent-green-rgb), 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.wn2-axis-head {
  fill: none;
  stroke: rgba(var(--accent-green-rgb), 0.95);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wn2-axis-tracer {
  fill: #fff;
  filter:
    drop-shadow(0 0 2px var(--accent-green))
    drop-shadow(0 0 5px rgba(var(--accent-green-rgb), 0.7));
}
@media (prefers-reduced-motion: reduce) {
  .wn2-axis-tracer { display: none; }
}

/* ─── AI chip: borderless, slide-1-style medium halo + subtle breathe.
   Smaller (88×88) so the "AI" type sits with the same tight padding as
   the brand mark inside its rounded-square chip. Two-layer pattern:
   back .wn2-ai-chip-glow takes the drop-shadow filter (--halo-pulse
   cascades to it via @property inherits:true); foreground
   .wn2-ai-chip-face renders solid green "AI" type with no filter. ─── */
.wn2-ai-chip-stack {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  animation: wn2HaloBreathe 7s ease-in-out infinite;
}
/* The chip stays DARK in both themes — same convention as the brand
   mark on slide 1 which uses its dark-frame variant regardless of the
   page theme. The green type pops against the dark chip. */
.wn2-ai-chip-glow,
.wn2-ai-chip-face {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background-color: #0A0A0F;
  background-image:
    radial-gradient(120% 100% at 50% 0%,
      rgba(var(--accent-green-rgb), 0.16) 0%,
      rgba(var(--accent-green-rgb), 0.04) 55%,
      rgba(var(--accent-green-rgb), 0)    100%);
}
.wn2-ai-chip-glow {
  z-index: 0;
  will-change: filter;
  filter:
    drop-shadow(0 0 calc(34px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.38 * var(--halo-pulse))))
    drop-shadow(0 0 calc(11px * var(--halo-pulse)) rgba(var(--accent-green-rgb), calc(0.28 * var(--halo-pulse))))
    drop-shadow(0 10px 30px rgba(0, 0, 0, 0.40));
}
/* Light theme: hardcode the bright brand green (74,222,128) instead of
   the desaturated forest green --accent-green-rgb resolves to in light
   mode, and bump alpha so the bloom around the (still-dark) AI chip
   reads clearly against the cream page. */
[data-theme="light"] .wn2-ai-chip-glow {
  filter:
    drop-shadow(0 0 calc(40px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.60 * var(--halo-pulse))))
    drop-shadow(0 0 calc(14px * var(--halo-pulse)) rgba(74, 222, 128, calc(0.42 * var(--halo-pulse))))
    drop-shadow(0 10px 26px rgba(0, 0, 0, 0.18));
}
.wn2-ai-chip-face {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@keyframes wn2HaloBreathe {
  0%, 100% { --halo-pulse: 0.92; }
  50%      { --halo-pulse: 1.16; }
}
@media (prefers-reduced-motion: reduce) {
  .wn2-ai-chip-stack { animation: none; }
}
.wn2-ai-label {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  /* White on the dark chip — green wasn't reading well in light theme.
     The chip itself is always dark (#0A0A0F) so white pops in both
     themes, matching the brand mark's contrast. */
  color: #ffffff;
}

/* ─── Two columns of evidence cards — GREEN-ONLY theme.
   grid-auto-rows: 1fr makes ALL six cards the same height (the tallest
   of any), so the two columns are perfectly symmetric regardless of how
   long each card's meta text is. Wider gap and taller cards for breathing
   room. The two columns differ only in icon treatment:
     possible  → solid-filled (green bg, white icon) = SETTLED FACT
     mandatory → outlined      (transparent bg, green icon) = PRESSURE BUILDING
   ─── */
.wn2-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
.wn2-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
.wn2-heads .wn2-axis-tag { justify-self: center; }
.wn2-heads .wn2-axis-tag.mandatory { grid-column: 1; }
.wn2-heads .wn2-axis-tag.possible  { grid-column: 2; }
.wn2-col {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 14px;
}
.wn2-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  column-gap: 14px;
  align-items: center;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px 18px;
  min-height: 96px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.wn2-item:hover {
  transform: translateY(-1px);
  border-color: var(--accent-green);
  box-shadow: 0 10px 24px rgba(var(--accent-green-rgb), 0.12);
}

.wn2-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
/* Solid-filled icons on "AI made it possible" — green bg, white glyph */
.wn2-possible .wn2-icon {
  background: var(--accent-green);
  color: var(--bg-primary);
}
/* Outlined icons on "AI makes it mandatory" — green border, green glyph */
.wn2-mandatory .wn2-icon {
  background: rgba(var(--accent-green-rgb), 0.06);
  border: 1.5px solid rgba(var(--accent-green-rgb), 0.55);
  color: var(--accent-green);
}
.wn2-item:hover .wn2-icon { transform: scale(1.05); }
.wn2-mandatory .wn2-item:hover .wn2-icon {
  border-color: var(--accent-green);
  background: rgba(var(--accent-green-rgb), 0.12);
}
.wn2-icon svg { width: 22px; height: 22px; stroke-width: 2px; }

.wn2-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wn2-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  line-height: 1.3;
}
.wn2-meta {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.wn2-meta .wn2-when {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 8px;
}

.wn2-stat {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: right;
  white-space: nowrap;
  padding-left: 8px;
  align-self: center;
}
.wn2-possible  .wn2-stat { color: var(--accent-green); }
.wn2-mandatory .wn2-stat { color: rgba(var(--accent-green-rgb), 0.80); }

/* Responsive */
@media (max-width: 1100px) {
  .wn2-axis { grid-template-columns: auto 1fr auto 1fr auto; gap: 12px; }
  .wn2-ai-chip-stack { width: 96px; height: 96px; }
  .wn2-ai-chip-glow, .wn2-ai-chip-face { border-radius: 22px; }
  .wn2-ai-label { font-size: 38px; }
}
@media (max-width: 900px) {
  .wn2-axis {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
  }
  .wn2-axis-arrow { display: none; }
  .wn2-axis-tag.possible  { order: 1; }
  .wn2-ai-chip-stack      { order: 2; }
  .wn2-axis-tag.mandatory { order: 3; }
  .wn2-cols, .wn2-heads { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .wn2-item { grid-template-columns: 38px 1fr; padding: 12px; }
  .wn2-stat { grid-column: 2; text-align: left; padding-left: 0; }
}

/* ========== TEAM SLIDE — tenure line + company badges ========== */
.tenure-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--accent-green);
  margin: 4px 0 10px;
  line-height: 1.4;
}
.tenure-line strong { color: var(--text-primary); font-weight: 600; }

.company-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0 0 14px;
}
.company-badge {
  height: 26px;
  min-width: 26px;
  padding: 0 7px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(var(--surface-fg-rgb), 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: default;
}
.company-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.30), inset 0 0 0 1px rgba(var(--surface-fg-rgb), 0.10);
}
.company-badge svg {
  width: 15px;
  height: 15px;
  color: #fff;
  display: block;
}
/* Wordmark variant — used when an open-licensed brand SVG isn't available.
   Wider pill, sans-serif font (matches the deck), brand colour background. */
.company-badge-wordmark {
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}
.company-badge[data-brand="whatsapp"]   { background: #25D366; }
.company-badge[data-brand="meta"]       { background: #0866FF; }
.company-badge[data-brand="flipkart"]   { background: #2874F0; }
.company-badge[data-brand="phonepe"]    { background: #5F259F; }
.company-badge[data-brand="paypal"]     { background: #003087; }
.company-badge[data-brand="multiplier"] { background: #F66918; }

/* team-slide employers — icon + label chips (icon keeps its brand colour) */
.founder-card .company-row { gap: 8px; }
.employer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 4px;
  border-radius: 9px;
  background: rgba(var(--surface-fg-rgb), 0.045);
  border: 1px solid rgba(var(--surface-fg-rgb), 0.10);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.employer:hover { transform: translateY(-1px); border-color: rgba(var(--surface-fg-rgb), 0.20); }
.employer .company-badge {
  height: 20px;
  min-width: 20px;
  padding: 0 5px;
  border-radius: 6px;
  box-shadow: none;
}
.employer .company-badge:hover { transform: none; box-shadow: none; }
.employer .company-badge svg { width: 13px; height: 13px; }
.employer-name {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ========== SLIDE 4 — SOLUTION (panel toggle + Validation System) ========== */
.solution-slide .container { position: relative; }

.solution-toggle {
  position: absolute;
  top: 0; right: 32px;
  display: inline-flex; align-items: center; gap: 12px;
  z-index: 10;
  padding: 6px 8px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.solution-toggle .sol-pos { min-width: 56px; text-align: center; font-weight: 500; color: var(--text-primary); }
.solution-toggle .sol-pos .total { color: var(--text-muted); }
.solution-toggle .sol-nav {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, transform 0.18s;
}
.solution-toggle .sol-nav:hover:not(:disabled) {
  color: var(--accent-green);
  background: rgba(var(--accent-green-rgb), 0.10);
  transform: translateX(var(--nudge, 0));
}
.solution-toggle .sol-nav.prev:hover:not(:disabled) { --nudge: -2px; }
.solution-toggle .sol-nav.next:hover:not(:disabled) { --nudge:  2px; }
.solution-toggle .sol-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.solution-toggle .sol-nav svg { width: 14px; height: 14px; }
.solution-toggle .sol-label {
  padding-right: 4px; color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
  margin-right: 4px;
}

.solution-panel { display: none; animation: solPanelFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.solution-panel.active { display: block; }
@keyframes solPanelFade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .solution-panel { animation: none; } }
@media (max-width: 640px) {
  .solution-toggle { right: 20px; top: -4px; gap: 6px; padding: 4px 6px; font-size: 10px; }
  .solution-toggle .sol-nav { width: 26px; height: 26px; }
  .solution-toggle .sol-pos { min-width: 44px; }
  .solution-toggle .sol-label { display: none; }
}

/* ===== VALIDATION SYSTEM (Panel 2) ===== */
.vsys-block { margin-top: 28px; }

/* ── Present-mode compaction for the validation-system slide.
   The diagram is naturally tall — vsys-block ≈ 614px plus h2 + lead +
   bridge ≈ 920px total. We adapt by viewport height:

     • Tall (>1080px):  full size — content vertically centers in the
                        slide via the default `margin: auto 0`.
     • Mid (≤1080px):   apply CSS `zoom: 0.86` to vsys-block — zoom
                        scales element + layout space + text
                        proportionally, so boxes shrink AND text
                        shrinks (no reflow / overflow into more lines).
     • Short (≤880px):  zoom 0.78 — aggressive shrink for cramped
                        laptops.

   The light tweaks below (padding / h2 / lead) apply at all sizes
   without making the slide feel cramped on a generous screen. ── */
body.mode-present .solution-slide                  { padding: 32px 32px 64px; }
body.mode-present .solution-slide h2               { margin-bottom: 6px; }
body.mode-present .solution-slide .sdlc-deck       { font-size: 13px !important; margin-top: 6px !important; margin-bottom: 0 !important; line-height: 1.5; }
body.mode-present .solution-slide .vsys-block      { margin-top: 16px; }
body.mode-present .solution-slide .vsys-top        { padding: 14px 18px 12px; }
body.mode-present .solution-slide .vg-connections-up { margin-top: 4px; margin-bottom: 4px; }
body.mode-present .solution-slide .vsys-bridge     { margin-top: 12px; font-size: 13px; }
/* Pillar internals: tighter padding + smaller heading so "Validation
   Graph" can sit on one line at presentation scale, and so the green
   "↻ COMPOUNDS PER CUSTOMER" / "↻ COVERAGE AUTO-GROWS" footer never
   gets clipped by overflow:hidden. */
body.mode-present .solution-slide .vsys-flow-grid > .vpillar { padding: 12px 14px 12px; gap: 8px; }
body.mode-present .solution-slide .vsys-flow-grid > .vpillar h4 { font-size: 15px; }
body.mode-present .solution-slide .vsys-flow-grid > .vpillar > p { font-size: 12px; line-height: 1.45; }
body.mode-present .solution-slide .vsys-flow-grid > .vpillar > .pillar-foot { font-size: 9.5px; padding-top: 6px; }
/* Source-card chips ("Aucert Ecommerce" was getting ellipsis-cut by the
   narrow 14% column). Slightly smaller font + tighter padding so the
   longest label fits without truncation. */
body.mode-present .solution-slide .vsys-flow-grid .vsource .src-list li {
  font-size: 9.5px;
  padding: 3px 6px;
}
body.mode-present .solution-slide .vsys-flow-grid .vsource .src-list svg {
  width: 10px; height: 10px;
}
body.mode-present .solution-slide .vsys-flow-grid .vsource .src-tag {
  font-size: 9px;
  padding-bottom: 5px;
}

/* Before/After slider — present-mode compaction so it fits alongside the validation diagram. */
body.mode-present .solution-slide .compare-slider { margin-top: 14px; padding: 12px 16px 14px; }
body.mode-present .solution-slide .compare-slider .cs-frame { height: 340px; }
body.mode-present .solution-slide .compare-slider .cs-layer { padding: 22px 16px 14px; }
body.mode-present .solution-slide .compare-slider .cs-foot { margin-top: 8px; gap: 8px; }
body.mode-present .solution-slide .compare-slider .cs-foot-tile { padding: 7px 12px; gap: 2px; }
body.mode-present .solution-slide .compare-slider .cs-foot-value { font-size: 18px; }
body.mode-present .solution-slide .compare-slider .cs-foot-label { font-size: 9px; }
body.mode-present .solution-slide .compare-slider .cs-corner { font-size: 9.5px; }
body.mode-present .solution-slide .compare-slider .cs-handle-knob { width: 36px; height: 36px; }

@media (max-height: 950px) {
  body.mode-present .solution-slide .vsys-block { zoom: 0.86; }
  body.mode-present .solution-slide .compare-slider { zoom: 0.9; }
}
@media (max-height: 820px) {
  body.mode-present .solution-slide                  { padding: 18px 32px 50px; }
  body.mode-present .solution-slide h2               { margin-bottom: 4px; }
  body.mode-present .solution-slide .sdlc-deck       { font-size: 11.5px !important; margin-top: 4px !important; }
  body.mode-present .solution-slide .vsys-block      { zoom: 0.66; margin-top: 6px; }
  body.mode-present .solution-slide .vsys-bridge     { margin-top: 4px; font-size: 11.5px; }
  body.mode-present .solution-slide .compare-slider  { zoom: 0.78; margin-top: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRESENT-MODE COMPACTION FOR REMAINING SLIDES.
   Each slide has different content density; we tune them individually
   targeting by [data-slide=N] (the build script substitutes the slide
   index there). Goal: every slide fills ~85–95% of a 900px viewport
   without clipping, scales gracefully on shorter and taller screens.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Slide 2 — PROBLEM (4 panels via prob-toggle).
       Default render uses only ~76% of viewport at 900px. Scale up the
       QA-cycle block so the SVG scene reads at a meaningful size; trim
       padding for breathing room. ─── */
/* Padding tightened from the default present-mode value so the slide
   uses the viewport better, but NO zoom on the panels themselves —
   blowing every element up made panels 3 and 4 (Built-vs-Shipped tile
   grid and the Industry-Signals bars) bloated and ugly. The right fix
   is to reduce dead space inside the panel, not magnify everything. */
body.mode-present .problem-slide                   { padding: 24px 32px 56px; }
body.mode-present .problem-slide h2                { margin-bottom: 8px; }
body.mode-present .problem-slide .lead             { margin-bottom: 14px; font-size: 14px; line-height: 1.5; }

/* Panel 3 (Built vs Shipped) — tile grid + rail callouts + gauge.
   Shave vertical breathing room without resizing the actual elements. */
body.mode-present .problem-slide .problem-panel[data-panel="3"] .bn-cf { padding: 16px; gap: 14px; }
body.mode-present .problem-slide .problem-panel[data-panel="3"] .bn-cf-grid { gap: 6px; }
body.mode-present .problem-slide .problem-panel[data-panel="3"] .bn-cf-callout { padding: 10px 12px; gap: 4px; }
body.mode-present .problem-slide .problem-panel[data-panel="3"] .bn-cf-callout .desc { font-size: 11.5px; line-height: 1.4; }
body.mode-present .problem-slide .problem-panel[data-panel="3"] .bn-cf-gauge { margin-top: 4px; gap: 10px; }
body.mode-present .problem-slide .problem-panel[data-panel="3"] .bn-cf-bar-block .note { font-size: 11.5px; line-height: 1.4; }

/* Panel 4 (Industry signals) — three big stat-bar rows. The numbers
   were too tall (clamp 40–64px) and the row padding (24px each side)
   added ~150px of dead space. Keep numbers prominent but proportional. */
body.mode-present .problem-slide .problem-panel[data-panel="4"] .stat-bars { margin-top: 8px; }
body.mode-present .problem-slide .problem-panel[data-panel="4"] .stat-bar-row { padding: 14px 0; gap: 28px; }
body.mode-present .problem-slide .problem-panel[data-panel="4"] .stat-bar-number { font-size: clamp(32px, 3.6vw, 48px); margin-bottom: 8px; }
body.mode-present .problem-slide .problem-panel[data-panel="4"] .stat-bar-desc { font-size: 14px; margin-bottom: 4px; line-height: 1.4; }
body.mode-present .problem-slide .problem-panel[data-panel="4"] .bar-track { height: 30px; border-radius: 15px; }
body.mode-present .problem-slide .problem-panel[data-panel="4"] .bar-fill { border-radius: 15px; }
body.mode-present .problem-slide .problem-panel[data-panel="4"] .stat-bar-right { gap: 6px; }

/* ─── Slide 2 — TEAM. Originally 63px overflow at 900p; now fits but
       under-fills. Small tighten on shorter screens only; let it
       breathe (and even scale up) on taller ones. ─── */
body.mode-present .slide[data-slide="2"]           { padding: 32px 32px 60px; }
@media (max-height: 920px) {
  body.mode-present .slide[data-slide="2"]           { padding: 22px 32px 52px; }
  body.mode-present .slide[data-slide="2"] h2        { margin-bottom: 8px; }
  body.mode-present .slide[data-slide="2"] .team-grid { gap: 14px; margin-top: 14px; }
  body.mode-present .slide[data-slide="2"] .founder-card { padding: 16px 18px; }
  body.mode-present .slide[data-slide="2"] .founder-card .bio,
  body.mode-present .slide[data-slide="2"] .founder-card .bio-points li { font-size: 12.5px; line-height: 1.5; }
  body.mode-present .slide[data-slide="2"] .founder-card .bio-points { gap: 8px; margin-top: 12px; }
}
@media (min-height: 1050px) {
  body.mode-present .slide[data-slide="2"] .team-grid { zoom: 1.08; }
}

/* ─── Slide 5 — MARKET. 321px overflow at 900p.
       Compact rows + comps + exclusion. Apply zoom on shorter screens. ─── */
body.mode-present .slide[data-slide="4"]           { padding: 24px 32px 56px; }
body.mode-present .slide[data-slide="4"] h2        { margin-bottom: 4px; }
body.mode-present .slide[data-slide="4"] .lead-mini { font-size: 12.5px !important; margin: 6px 0 10px !important; }
body.mode-present .slide[data-slide="4"] .gtm-seq  { gap: 6px; }
body.mode-present .slide[data-slide="4"] .gtm-seq-step { padding: 8px 12px; gap: 2px; }
body.mode-present .slide[data-slide="4"] .gtm-seq-label { font-size: 13px; }
body.mode-present .slide[data-slide="4"] .gtm-seq-motion { font-size: 11px; }
body.mode-present .slide[data-slide="4"] .tam-grid { gap: 6px !important; margin-top: 14px !important; }
body.mode-present .slide[data-slide="4"] .tam-row  { padding: 9px 18px !important; }
body.mode-present .slide[data-slide="4"] .vercel-playbook { gap: 6px; }
body.mode-present .slide[data-slide="4"] .vp-stage { padding: 10px 10px 9px; gap: 6px; }
body.mode-present .slide[data-slide="4"] .vp-stage-vercel,
body.mode-present .slide[data-slide="4"] .vp-stage-aucert { padding: 6px 8px; }
body.mode-present .slide[data-slide="4"] .vp-headline { font-size: 12px; }
body.mode-present .slide[data-slide="4"] .vp-detail { font-size: 10.5px; }
body.mode-present .slide[data-slide="4"] .vp-also { font-size: 11px; padding: 8px 12px; margin-top: 8px; }
body.mode-present .slide[data-slide="4"] h3        { margin-top: 14px !important; margin-bottom: 6px !important; font-size: 13px !important; }
body.mode-present .slide[data-slide="4"] .exclusion { margin-top: 8px; font-size: 11.5px; padding: 10px 14px; }
@media (max-height: 950px) {
  body.mode-present .slide[data-slide="4"] .tam-row { padding: 7px 16px !important; }
  body.mode-present .slide[data-slide="4"] .vercel-playbook { zoom: 0.94; }
  body.mode-present .slide[data-slide="4"] .gtm-seq { zoom: 0.95; }
}

/* ─── Slide 7 — COMPETITION/MOAT. Content (5 moat cards + 11-row
       comparison table + incumbent note) is naturally taller than any
       laptop viewport. Trying to force-fit it via aggressive zoom made
       the table unreadable. Better: keep elements at presentation
       sizes, light padding tightening only, and let the slide SCROLL
       (the visible green scrollbar + Up/Down arrow scroll already work).
       The presenter walks through cards, then scrolls down to the table.
       ─── */
body.mode-present .slide[data-slide="7"]           { padding: 28px 32px 60px; }
body.mode-present .slide[data-slide="7"] h2        { margin-bottom: 10px; }
body.mode-present .slide[data-slide="7"] .moat-grid { gap: 14px !important; margin-top: 12px; }
body.mode-present .slide[data-slide="7"] h3        { margin-top: 24px !important; margin-bottom: 12px !important; }
body.mode-present .slide[data-slide="7"] .moat-matrix-h3 { margin-top: 20px !important; font-size: 14px !important; }
body.mode-present .slide[data-slide="7"] .pos-matrix { padding: 4px 8px 32px 116px; }
body.mode-present .slide[data-slide="7"] .pos-matrix .pm-frame { max-width: 760px; }
body.mode-present .slide[data-slide="7"] .pm-dot { font-size: 10.5px; padding: 4px 8px 4px 6px; }
body.mode-present .slide[data-slide="7"] .pm-dot.us { font-size: 11.5px; padding: 5px 10px 5px 8px; }
body.mode-present .slide[data-slide="7"] .pm-quad { font-size: 11px; padding: 10px 14px; }
body.mode-present .slide[data-slide="7"] .pm-tip  { font-size: 9.5px; padding: 4px 8px; }
body.mode-present .slide[data-slide="7"] .pm-tooltip { font-size: 10.5px; padding: 5px 9px; }
body.mode-present .slide[data-slide="7"] .comp-disclosure summary { padding: 8px 14px; font-size: 11px; }
body.mode-present .slide[data-slide="7"] .incumbent-note { margin-top: 14px; }

/* ─── Slide 8 — EARLY SIGNALS / TRACTION. 224px overflow. ─── */
body.mode-present .slide[data-slide="8"]           { padding: 24px 32px 56px; }
body.mode-present .slide[data-slide="8"] h2        { margin-bottom: 10px; }
body.mode-present .slide[data-slide="8"] .traction-timeline { margin: 12px 0 14px; }
body.mode-present .slide[data-slide="8"] .traction-cols { gap: 14px; margin-top: 0; }
body.mode-present .slide[data-slide="8"] .trc-card { padding: 14px 16px; }
body.mode-present .slide[data-slide="8"] .trc-card ul li { font-size: 12.5px; line-height: 1.45; }
body.mode-present .slide[data-slide="8"] .logo-wall { margin-top: 18px; padding: 14px 18px 16px; }
body.mode-present .slide[data-slide="8"] .lw-tile { padding: 10px 8px 9px; }
body.mode-present .slide[data-slide="8"] .lw-tile .lw-name { font-size: 12.5px; }
body.mode-present .slide[data-slide="8"] .lw-tile .lw-role { font-size: 10.5px; margin-bottom: 8px; }
body.mode-present .slide[data-slide="8"] .lw-tile .lw-pill { font-size: 9px; padding: 2px 6px; }
@media (max-height: 950px) {
  body.mode-present .slide[data-slide="8"] { zoom: 0.92; }
}

/* ─── Slide 6 — WHY NOW. No zoom — was making the cards feel
       larger than every other slide. Just light padding tighten. ─── */

/* ─── Slide 1 — COVER. Was 79% utilization. The cover wants generous
       breathing room around the brand mark — don't compact, just make
       the chip itself larger on tall screens. ─── */
@media (min-height: 1000px) {
  body.mode-present .cover .cover-mark-stack { width: clamp(280px, 30vw, 380px); }
}

/* ─── Slide 9 — ASK. Was 79% utilization. Add a touch more breathing
       room — nothing to compact, just generous spacing. ─── */
body.mode-present .slide[data-slide="9"] h2 { margin-bottom: 18px; }
@media (max-height: 820px) {
  body.mode-present .slide[data-slide="9"]    { padding: 22px 32px 52px; }
  body.mode-present .slide[data-slide="9"] h2 { margin-bottom: 12px; }
}

/* ─── Cramped-viewport tier (≤820px height) for slides not yet covered.
       At common 14"-laptop sizes (1366×768) we need extra compaction. */
@media (max-height: 820px) {
  /* Slide 1 cover */
  body.mode-present .cover                          { padding: 32px 32px 48px; }
  body.mode-present .cover .cover-mark-stack        { width: clamp(180px, 22vw, 220px); }
  body.mode-present .cover .cover-wordmark          { font-size: 48px; }
  body.mode-present .cover .tagline                 { font-size: 18px; margin-bottom: 8px; }
  body.mode-present .cover .sub                     { font-size: 13px; margin-bottom: 6px; }
  body.mode-present .cover .cover-meta              { font-size: 12px; margin-top: 14px; }
  body.mode-present .cover .badge                   { font-size: 10px; margin-bottom: 16px; }

  /* Slide 5 — Market */
  body.mode-present .slide[data-slide="4"]          { padding: 16px 32px 48px; }

  body.mode-present .slide[data-slide="4"] .lead-mini { font-size: 11.5px !important; margin: 4px 0 10px !important; }
  body.mode-present .slide[data-slide="4"] .tam-row { padding: 8px 16px !important; }
  body.mode-present .slide[data-slide="4"] .tam-grid { gap: 6px !important; }
  body.mode-present .slide[data-slide="4"] .tam-grid .tam-row { font-size: 11.5px; }
  body.mode-present .slide[data-slide="4"] .comps-grid { zoom: 0.78; }
  body.mode-present .slide[data-slide="4"] h3         { margin-top: 10px !important; font-size: 12px !important; }
  body.mode-present .slide[data-slide="4"] .exclusion { font-size: 10.5px; padding: 6px 10px; margin-top: 6px; }
  /* Expansion panel — compact so the TAM captions clear the present bar */
  body.mode-present .slide[data-slide="4"] .exp-map { margin: 10px 0 12px !important; }
  body.mode-present .slide[data-slide="4"] .exp-vectors { gap: 8px !important; }
  body.mode-present .slide[data-slide="4"] .exp-vector { padding: 10px 16px !important; }
  body.mode-present .slide[data-slide="4"] .exp-tam { margin-top: 10px !important; padding: 11px 18px 10px !important; }
  body.mode-present .slide[data-slide="4"] .exp-tam-lead { margin-bottom: 9px !important; }
  body.mode-present .slide[data-slide="4"] .exp-tam-track { height: 58px !important; }

  /* Slide 8 — Traction */
  body.mode-present .slide[data-slide="8"]          { padding: 14px 32px 46px; }
  body.mode-present .slide[data-slide="8"] h2       { margin-bottom: 4px; }
  body.mode-present .slide[data-slide="8"] .traction-timeline { margin: 6px 0 8px; }
  body.mode-present .slide[data-slide="8"] .traction-cols { zoom: 0.82; }
  body.mode-present .slide[data-slide="8"] .arc-stack { zoom: 0.82; }
  body.mode-present .slide[data-slide="8"] .risk-note { font-size: 11px; padding: 6px 10px; margin-top: 6px; }

  /* Slide 9 — Ask */
  body.mode-present .slide[data-slide="9"]          { zoom: 0.92; }
}

/* ── Present-mode compaction for the why-now slide (Panel 1).
   The taller cards + bigger column gap pushed the slide ~117px over a
   typical 900px laptop viewport. Tighten chrome (padding, h2, lead,
   cards) so everything — including the convergence-line at the bottom —
   fits without scrolling. ── */
body.mode-present .whynow-slide                    { padding: 28px 32px 60px; }
body.mode-present .whynow-slide h2                 { margin-bottom: 6px; }
body.mode-present .whynow-slide .lead-mini         { font-size: 13px; margin-bottom: 14px; }
body.mode-present .whynow-slide .wn2-stage         { margin-top: 10px; gap: 22px; }
body.mode-present .whynow-slide .wn2-cols          { gap: 36px; }
body.mode-present .whynow-slide .wn2-col           { gap: 10px; }
body.mode-present .whynow-slide .wn2-item          { min-height: 82px; padding: 12px 16px; }
body.mode-present .whynow-slide .convergence-line  { margin-top: 18px; font-size: 14px; }

.vsys-top {
  position: relative;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 22px 22px 18px;
}
.vsys-top-label {
  position: absolute;
  top: -10px; left: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-primary);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.vsys-top-label .ext {
  color: var(--accent-green);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.vsys-uses {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.vsys-use {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 8px;
  background: rgba(var(--surface-fg-rgb), 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color 0.18s, background 0.18s;
}
.vsys-use:hover { border-color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.04); }
.vsys-use .n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.vsys-arrows {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 8px 0 8px;
  height: 22px;
}
.vsys-arrow {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.45), rgba(var(--accent-green-rgb), 0.0));
  margin: 0 auto;
  position: relative;
}
.vsys-arrow::after {
  content: "";
  position: absolute;
  top: -2px; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid rgba(var(--accent-green-rgb), 0.55);
}

.vsys-core {
  position: relative;
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(var(--accent-green-rgb), 0.05), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.03), rgba(var(--accent-green-rgb), 0.008) 60%);
  border: 1px solid rgba(var(--accent-green-rgb), 0.30);
  border-radius: 16px;
  padding: 22px 22px 22px;
  margin-top: 4px;
  overflow: hidden;
}
/* Subtle dot grid behind the diagram for tech texture */
.vsys-core::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(var(--accent-green-rgb), 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.6;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.vsys-core > * { position: relative; z-index: 1; }

.vsys-core-head {
  margin-bottom: 14px;
  text-align: center;
}
.vsys-core-tag {
  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(--accent-green);
  border: 1px solid currentColor;
  background: rgba(var(--accent-green-rgb), 0.05);
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
}
.vsys-core-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px rgba(var(--accent-green-rgb), 0.8);
  animation: corePulse 2.2s ease-in-out infinite;
}
@keyframes corePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
.vsys-core-loop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 5px;
  margin-left: 4px;
  background: rgba(var(--accent-green-rgb), 0.12);
  border: 1px solid rgba(var(--accent-green-rgb), 0.35);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent-green);
}
.vsys-core-loop svg {
  width: 10px; height: 10px;
  animation: pillarLoopSpin 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vsys-core-dot { animation: none; }
  .vsys-core-loop svg { animation: none; }
}

.vsys-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pillar {
  display: flex; flex-direction: column;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: border-color 0.18s, transform 0.18s;
}
.pillar[data-pillar="graph"]  { border-top: 3px solid var(--accent-green); }
.pillar[data-pillar="policy"] { border-top: 3px solid #60A5FA; }
.pillar[data-pillar="tests"]  { border-top: 3px solid #C084FC; }
.pillar[data-pillar="exec"]   { border-top: 3px solid #FBBF24; }
.pillar:hover { transform: translateY(-2px); }
.pillar[data-pillar="graph"]:hover  { border-color: var(--accent-green); }
.pillar[data-pillar="policy"]:hover { border-color: #60A5FA; }
.pillar[data-pillar="tests"]:hover  { border-color: #C084FC; }
.pillar[data-pillar="exec"]:hover   { border-color: #FBBF24; }

.pillar-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.pillar-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.pillar[data-pillar="graph"]  .pillar-num { color: var(--accent-green); }
.pillar[data-pillar="policy"] .pillar-num { color: #60A5FA; }
.pillar[data-pillar="tests"]  .pillar-num { color: #C084FC; }
.pillar[data-pillar="exec"]   .pillar-num { color: #FBBF24; }
.pillar-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text-primary);
}
.pillar-deck {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.pillar-sources {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(var(--surface-fg-rgb), 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.pillar-sources.two-col {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.pillar-sources .psource {
  padding: 8px 10px;
  background: rgba(var(--surface-fg-rgb), 0.02);
  border-radius: 6px;
}
.pillar-source-lbl {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.pillar-source-lbl.shared { color: #60A5FA; }
.pillar-source-lbl.proprietary { color: #C084FC; }
.pillar-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.pillar-sources li {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  padding-left: 12px;
  position: relative;
}
.pillar-sources li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.6;
}

.pillar-compound {
  margin-top: auto;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(var(--accent-green-rgb), 0.05);
  border: 1px dashed rgba(var(--accent-green-rgb), 0.30);
  border-radius: 8px;
}
.pillar[data-pillar="policy"] .pillar-compound { background: rgba(var(--accent-blue-rgb), 0.05); border-color: rgba(var(--accent-blue-rgb), 0.30); }
.pillar[data-pillar="tests"]  .pillar-compound { background: rgba(var(--accent-purple-light-rgb), 0.05); border-color: rgba(var(--accent-purple-light-rgb), 0.30); }
.pillar[data-pillar="exec"]   .pillar-compound { background: rgba(var(--accent-amber-rgb), 0.05); border-color: rgba(var(--accent-amber-rgb), 0.30); }
.compound-ic {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-green);
}
.pillar[data-pillar="policy"] .compound-ic { color: #60A5FA; }
.pillar[data-pillar="tests"]  .compound-ic { color: #C084FC; }
.pillar[data-pillar="exec"]   .compound-ic { color: #FBBF24; }
.compound-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.compound-text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-primary);
}

.vsys-bridge {
  font-family: var(--font-display, var(--font-sans));
  font-size: 15px;
  font-style: italic;
  text-align: center;
  color: var(--text-secondary);
  margin: 24px auto 0;
  max-width: 720px;
}

@media (max-width: 1100px) {
  .vsys-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vsys-uses { grid-template-columns: repeat(3, 1fr); }
  .vsys-arrows { grid-template-columns: repeat(3, 1fr); }
  .vsys-pillars { grid-template-columns: 1fr; }
}

/* ========== SLIDE 4 — VARIANT 2 FLOW DIAGRAM ==========
   Theme strategy:
   - SOURCE boxes (Aucert Native Engines · Integrations · Shared Policies · Custom Policies):
     borrow Variant 1's `.vg-source-group` aesthetic — solid `--tile-bg`, subtle border,
     mono uppercase header with bottom rule, chip-style items inside.
   - PILLAR boxes (Validation Graph · Tests · Policies · Execution): borrow Variant 1's
     `.vg-core` aesthetic — green gradient bg, prominent green border, inset glow.
   - All 8 boxes carry a `.box-loop` button at top-right (consistent placement).
   - Source tops align with pillar tops (y≈20). Execution bottom aligns with
     Integrations/Custom Policies bottom (y≈521).
   - Forward arrows: solid subtle green stroke + traveling tracer dot.
   - Feedback arrows: simple vertical dashed UP arrows from Exec → Graph / Policies. */

.vsys-flow {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 540;
  margin-top: 22px;
}
.vsys-flow-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.vsys-flow-grid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}

/* Forward & feedback stroke + tracer */
.flow-line {
  fill: none !important;
  stroke: rgba(var(--accent-green-rgb), 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-line.feedback {
  stroke: rgba(var(--accent-green-rgb), 0.45);
  stroke-dasharray: 3 5;
  stroke-width: 1.3;
}
.flow-tracer {
  fill: #fff;
  filter: drop-shadow(0 0 2px var(--accent-green)) drop-shadow(0 0 5px rgba(var(--accent-green-rgb), 0.7));
}
.flow-tracer.tracer-fb {
  fill: rgba(var(--surface-fg-rgb), 0.90);
  filter: drop-shadow(0 0 2px rgba(var(--accent-green-rgb), 0.6)) drop-shadow(0 0 4px rgba(var(--accent-green-rgb), 0.45));
}
@media (prefers-reduced-motion: reduce) {
  .flow-tracer { display: none; }
}

/* Small "↻ FEEDBACK" caption pills next to the feedback arrows */
.fb-cap-bg {
  fill: var(--bg-primary);
  stroke: rgba(var(--accent-green-rgb), 0.55);
  stroke-width: 0.8;
}
.fb-cap-text {
  font-family: var(--font-mono, monospace);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.20em;
  fill: rgba(var(--accent-green-rgb), 0.90);
  text-anchor: middle;
}

/* ---- box-loop : consistent ↻ self-improving badge in top-right of every box ---- */
.vsys-flow-grid .box-loop {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(var(--accent-green-rgb), 0.10);
  border: 1px solid rgba(var(--accent-green-rgb), 0.40);
  color: var(--accent-green);
  cursor: help;
  padding: 0;
  z-index: 3;
  transition: background 0.2s ease, transform 0.2s ease;
}
.vsys-flow-grid .box-loop:hover {
  background: rgba(var(--accent-green-rgb), 0.18);
  transform: rotate(15deg);
}
.vsys-flow-grid .box-loop svg {
  width: 11px; height: 11px;
  animation: boxLoopSpin 9s linear infinite;
}
@keyframes boxLoopSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vsys-flow-grid .box-loop svg { animation: none; }
}

/* =========================================================
   SOURCE side-cards — Variant 1 styling
   ========================================================= */
.vsys-flow-grid > .vsource {
  position: absolute;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 13px;
  padding: 12px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.vsource:hover {
  border-color: rgba(var(--accent-green-rgb), 0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.20);
}
.vsource .src-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2px;
  line-height: 1.3;
}
.vsource .src-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.vsource .src-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10.5px;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.vsource .src-list li:hover {
  border-color: var(--accent-green);
  transform: translateX(2px);
}
.vsource .src-list svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
  color: var(--accent-green);
}

/* =========================================================
   PILLAR centre cards — variant 1 vg-core inspired (prominent)
   ========================================================= */
.vsys-flow-grid > .vpillar {
  position: absolute;
  background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.10), rgba(var(--accent-green-rgb), 0.03) 70%);
  border: 1px solid rgba(var(--accent-green-rgb), 0.48);
  border-radius: 13px;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 36px rgba(var(--accent-green-rgb), 0.05), 0 10px 28px rgba(0,0,0,0.22);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.vsys-flow-grid > .vpillar:hover {
  border-color: var(--accent-green);
  transform: translateY(-2px);
  box-shadow: inset 0 0 36px rgba(var(--accent-green-rgb), 0.10), 0 16px 36px rgba(var(--accent-green-rgb), 0.16);
}
.vsys-flow-grid > .vpillar > .vpillar-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 34px 8px 0;
  border-bottom: 1px solid rgba(var(--accent-green-rgb), 0.20);
}
.vsys-flow-grid > .vpillar .pillar-num {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent-green);
  opacity: 0.85;
}
.vsys-flow-grid > .vpillar h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  width: 100%;
}
/* Execution uses horizontal header (number beside title) since it's wider */
.vsys-flow-grid > .v-exec > .vpillar-head {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}
.vsys-flow-grid > .v-exec h4 { font-size: 18px; width: auto; }
.vsys-flow-grid > .vpillar > p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.vsys-flow-grid > .vpillar > .pillar-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed rgba(var(--accent-green-rgb), 0.22);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(var(--accent-green-rgb), 0.90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vsys-flow-grid > .vpillar > .pillar-foot::before {
  content: "↻";
  font-family: inherit;
  font-size: 11px;
  color: var(--accent-green);
  opacity: 0.85;
}

/* Execution uses the SAME stacked layout as other pillars (just wider) —
   prevents the text-cropping issue caused by row-flex. */
.v-exec { /* layout inherits the standard column flex above */ }

/* ---- Box positions (% match viewBox 1280×540) ----
   Sources: native/shared start at top=3.5%, integ/custom at 51%, both reach 96.5%
   Pillars: top-aligned with native (3.5%), bottom at 49% (height 45.5%)
   Execution: top 58%, bottom 96.5% (bottom-aligned with integ/custom)
   This pattern is what the user explicitly asked for. */
.v-native    { left: 1.6%;  top: 3.5%;  width: 14%;    height: 42%; }
.v-integ     { left: 1.6%;  top: 51%;   width: 14%;    height: 45.5%; }
.v-shared    { left: 84.4%; top: 3.5%;  width: 14%;    height: 42%; }
.v-custom    { left: 84.4%; top: 51%;   width: 14%;    height: 45.5%; }
/* All three centre pillars are now identical width (18.75%). Tests was
   previously narrower (17.2%) which broke the visual rhythm. v-graph
   and v-policies left/right edges stay put so the SOURCE→PILLAR
   horizontal arrows still hit; the Tests pillar is re-centred between
   them. Height bumped to 49% so the bottom footer label has room
   without clipping under overflow:hidden. The SVG arrow paths that
   connect TO Tests (vsp-graph-tests, vsp-pol-tests) and the vertical
   feedback paths are updated in the slide HTML to match. */
.v-graph     { left: 19.5%;   top: 3.5%;  width: 18.75%; height: 49%; }
.v-tests     { left: 40.625%; top: 3.5%;  width: 18.75%; height: 49%; }
.v-policies  { left: 61.7%;   top: 3.5%;  width: 18.75%; height: 49%; }
.v-exec      { left: 19.5%; top: 58%;   width: 60.95%; height: 38.5%; }

/* ---- Responsive: stack vertically on narrow viewports ---- */
@media (max-width: 980px) {
  .vsys-flow { aspect-ratio: auto; }
  .vsys-flow-svg { display: none; }
  .vsys-flow-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    inset: auto;
    width: 100%; height: auto;
  }
  .vsys-flow-grid > .vsource,
  .vsys-flow-grid > .vpillar {
    position: relative;
    left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important;
  }
  .v-exec { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vsys-flow-grid { grid-template-columns: 1fr; }
}

/* ========== SLIDE 10 — SUMMARY (end-of-deck recap, Apple-style bento) ========== */
.summary-slide .container { padding-top: 6px; }

/* Bento: 4 cols. ASK is a compact hero (top-right, 1 row); TEAM is the
   tall tile (right, 2 rows) — the close leans on founder–problem fit.
   PROBLEM/INSIGHT are wide; PRODUCT/MOAT are single. */
.sumb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: 14px;
  grid-template-areas:
    "problem problem ask   ask"
    "product moat    team  team"
    "insight insight team  team";
  margin-bottom: 18px;
}
.sumb-problem { grid-area: problem; }
.sumb-ask     { grid-area: ask; }
.sumb-product { grid-area: product; }
.sumb-moat    { grid-area: moat; }
.sumb-insight { grid-area: insight; }
.sumb-team    { grid-area: team; justify-content: space-between; }

.sumb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 46px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s, box-shadow 0.22s, background 0.22s;
}
.sumb-tile::after {
  /* corner glow tinted by the tile accent */
  content: "";
  position: absolute;
  top: -40%; right: -30%;
  width: 70%; height: 80%;
  background: radial-gradient(circle, rgba(var(--sumb-accent-rgb, var(--accent-green-rgb)), 0.10) 0%, rgba(var(--sumb-accent-rgb, var(--accent-green-rgb)), 0) 70%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.22s;
}
.sumb-tile:hover {
  transform: translateY(-3px);
  border-color: var(--sumb-accent, var(--accent-green));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.sumb-tile:hover::after { opacity: 1.15; }
[data-theme="light"] .sumb-tile:hover { box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10); }

.sumb-tile.green  { --sumb-accent: var(--accent-green);  --sumb-accent-rgb: var(--accent-green-rgb); }
.sumb-tile.red    { --sumb-accent: var(--accent-red);    --sumb-accent-rgb: var(--accent-red-rgb); }
.sumb-tile.blue   { --sumb-accent: var(--accent-blue);   --sumb-accent-rgb: var(--accent-blue-rgb); }
.sumb-tile.amber  { --sumb-accent: var(--accent-amber);  --sumb-accent-rgb: var(--accent-amber-rgb); }
.sumb-tile.purple { --sumb-accent: var(--accent-purple); --sumb-accent-rgb: var(--accent-purple-rgb); }

.sumb-eyebrow {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sumb-accent, var(--accent-green));
  background: rgba(var(--sumb-accent-rgb, var(--accent-green-rgb)), 0.10);
  border: 1px solid rgba(var(--sumb-accent-rgb, var(--accent-green-rgb)), 0.30);
  border-radius: 999px;
}

/* Hero metric (the highlighted number) + unit label beside it.
   Center-align so the small 2-line unit sits against the number's
   mid-height (baseline alignment dropped it to the number's foot). */
.sumb-metric-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  min-height: 52px;
}
.sumb-metric {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sumb-accent, var(--accent-green));
}
.sumb-metric-x { font-size: 0.6em; font-weight: 600; opacity: 0.85; }
.sumb-unit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}
.sumb-unit-dim { color: var(--text-secondary); opacity: 0.7; }

/* Concept phrase (insight tile — no number) */
.sumb-phrase {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.sumb-phrase .sumb-neq { color: var(--sumb-accent, var(--accent-blue)); }

.sumb-headline {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.sumb-headline code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--accent-green);
}

.sumb-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sumb-ref {
  position: absolute;
  left: 22px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  transition: color 0.22s;
}
.sumb-ref svg { width: 12px; height: 12px; transition: transform 0.22s; }
.sumb-tile:hover .sumb-ref { color: var(--sumb-accent, var(--accent-green)); }
.sumb-tile:hover .sumb-ref svg { transform: translateX(3px); }

/* ----- ASK hero tile (compact, top-right) ----- */
.sumb-hero {
  padding: 22px 26px 44px;
  background:
    radial-gradient(130% 90% at 80% 10%, rgba(var(--accent-green-rgb), 0.14) 0%, rgba(var(--accent-green-rgb), 0) 60%),
    var(--tile-bg);
  border-color: rgba(var(--accent-green-rgb), 0.35);
}
.sumb-raise {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 78px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent-green);
  margin-bottom: 4px;
}
.sumb-raise-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.sumb-ask-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sumb-ask-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-secondary);
}
.sumb-ask-points strong { color: var(--text-primary); font-weight: 600; }
.sumb-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(var(--accent-green-rgb), 0.16);
}

/* ----- PROBLEM tile supporting stat ----- */
.sumb-substat {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sumb-substat strong { color: var(--sumb-accent, var(--accent-amber)); font-weight: 700; }

/* ----- TEAM tile (tall) founders + company chips ----- */
.sumb-founders {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 18px;
}
.sumb-founder-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.sumb-founder-name span {
  color: var(--sumb-accent, var(--accent-blue));
  font-weight: 500;
  font-size: 12px;
}
.sumb-founder-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.45;
}
.sumb-team-cos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}
.sumb-team-fit {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}
.sumb-team-cos span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: 4px 10px 4px 8px;
  background: rgba(var(--sumb-accent-rgb, var(--accent-blue-rgb)), 0.08);
  border: 1px solid rgba(var(--sumb-accent-rgb, var(--accent-blue-rgb)), 0.22);
  border-radius: 6px;
}
.sumb-team-cos span svg {
  width: 1.18em;
  height: 1.18em;
  flex-shrink: 0;
  opacity: 0.92;
}

/* ----- founder avatars — team cards + summary "THE TEAM" tile ----- */
.founder-card .founder-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.founder-card .founder-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  background: var(--tile-bg-hover);
}
.founder-card .founder-head-text { min-width: 0; }
.founder-card .founder-head .role-tag { margin-bottom: 7px; }
.founder-card .founder-head h3 { margin-bottom: 3px; }
.founder-card .founder-head .location { margin-bottom: 0; }

.sumb-team .sumb-founder {
  display: flex;
  align-items: center;
  gap: 11px;
}
.sumb-team .sumb-founder-pic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(var(--surface-fg-rgb), 0.14);
  background: rgba(var(--surface-fg-rgb), 0.05);
}
.sumb-team .sumb-founder-text { min-width: 0; }
body.mode-present .slide[data-slide="10"] .sumb-founder-pic { width: 30px !important; height: 30px !important; }

/* ----- sign-off ----- */
.sumb-signoff {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-green);
  border-radius: 0 12px 12px 0;
}
.sumb-signoff-pulse {
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.5);
  animation: sumbPulse 2.2s ease-out infinite;
}
@keyframes sumbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(var(--accent-green-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .sumb-signoff-pulse { animation: none; } }
.sumb-signoff-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.sumb-signoff-hint { font-size: 13px; color: var(--text-muted); }
.sumb-signoff-mail {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent-green);
  text-decoration: none;
  border-bottom: 1px dashed rgba(var(--accent-green-rgb), 0.45);
  transition: border-color 0.18s;
}
.sumb-signoff-mail:hover { border-bottom-color: var(--accent-green); }

@media (max-width: 1080px) {
  .sumb-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "ask     ask"
      "problem problem"
      "product moat"
      "team    team"
      "insight insight";
  }
}
@media (max-width: 640px) {
  .sumb-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ask" "problem" "product" "moat" "team" "insight";
  }
}

/* Present-mode compaction — fit the full bento + sign-off in one 1440×900
   viewport without scrolling. */
body.mode-present .slide[data-slide="10"] .sumb-grid { gap: 11px !important; margin-bottom: 12px !important; }
body.mode-present .slide[data-slide="10"] .sumb-tile { padding: 14px 18px 36px !important; }
body.mode-present .slide[data-slide="10"] .sumb-hero { padding: 16px 20px 36px !important; }
body.mode-present .slide[data-slide="10"] .sumb-eyebrow { font-size: 9px !important; margin-bottom: 8px !important; padding: 3px 8px !important; }
body.mode-present .slide[data-slide="10"] .sumb-metric { font-size: clamp(30px, 3.2vw, 42px) !important; }
body.mode-present .slide[data-slide="10"] .sumb-metric-row { margin-bottom: 8px !important; min-height: 0 !important; }
body.mode-present .slide[data-slide="10"] .sumb-phrase { font-size: clamp(24px, 2.6vw, 32px) !important; margin-bottom: 8px !important; }
body.mode-present .slide[data-slide="10"] .sumb-headline { font-size: 15px !important; margin-bottom: 6px !important; }
body.mode-present .slide[data-slide="10"] .sumb-desc { font-size: 12px !important; line-height: 1.45 !important; }
body.mode-present .slide[data-slide="10"] .sumb-ref { bottom: 12px !important; font-size: 10px !important; }
body.mode-present .slide[data-slide="10"] .sumb-raise { font-size: clamp(48px, 5vw, 66px) !important; }
body.mode-present .slide[data-slide="10"] .sumb-raise-sub { margin-bottom: 12px !important; font-size: 11px !important; }
body.mode-present .slide[data-slide="10"] .sumb-ask-points { gap: 7px !important; }
body.mode-present .slide[data-slide="10"] .sumb-ask-points li { font-size: 12.5px !important; }
body.mode-present .slide[data-slide="10"] .sumb-team-cos { margin-top: 12px !important; gap: 6px !important; }
body.mode-present .slide[data-slide="10"] .sumb-team-cos span { font-size: 10px !important; padding: 3px 8px !important; }
body.mode-present .slide[data-slide="10"] .sumb-substat { font-size: 11px !important; margin-top: 9px !important; }
body.mode-present .slide[data-slide="10"] .sumb-founders { gap: 9px !important; margin-top: 12px !important; }
body.mode-present .slide[data-slide="10"] .sumb-founder-name { font-size: 13px !important; }
body.mode-present .slide[data-slide="10"] .sumb-founder-meta { font-size: 10.5px !important; margin-top: 2px !important; }
body.mode-present .slide[data-slide="10"] .sumb-team-fit { font-size: 12.5px !important; margin-top: 12px !important; padding-top: 12px !important; }
body.mode-present .slide[data-slide="10"] .sumb-signoff { padding: 10px 18px !important; }

/* ============================================================
   SHARE VARIANT — scroll-first reading deck
   A shared link is read by scrolling, not clicked through. In scroll
   mode (the default), expand every panel-toggle into stacked vertical
   sub-sections so the whole story is visible. Present mode (if anyone
   uses it) keeps the original one-panel-at-a-time toggle.
   ============================================================ */
body.mode-scroll .problem-toggle,
body.mode-scroll .solution-toggle,
body.mode-scroll .market-toggle,
body.mode-scroll .moat-toggle { display: none !important; }

body.mode-scroll .problem-panel,
body.mode-scroll .solution-panel,
body.mode-scroll .market-panel,
body.mode-scroll .moat-panel {
  display: block !important;
  animation: none !important;
}

/* breathing room + a divider between stacked sub-sections */
body.mode-scroll .problem-panel + .problem-panel,
body.mode-scroll .solution-panel + .solution-panel,
body.mode-scroll .market-panel + .market-panel,
body.mode-scroll .moat-panel + .moat-panel {
  margin-top: 60px;
  padding-top: 52px;
  border-top: 1px solid var(--border-subtle);
}

/* toggle slides vertically center a single panel; with several stacked,
   read top-down instead. */
body.mode-scroll .problem-slide .container,
body.mode-scroll .solution-slide .container,
body.mode-scroll .market-slide .container,
body.mode-scroll .moat-slide .container { justify-content: flex-start; }

/* P1 — tooltips are tap/click-accessible (incl. mobile); make the
   affordance obviously interactive so a cold reader taps for the proof. */
body.mode-scroll .hover-detail { cursor: pointer; }
body.mode-scroll .hover-detail::after { opacity: 0.85; }

/* P5 — scroll progress bar (orientation for a long reading scroll) */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent-green), rgba(var(--accent-green-rgb), 0.55));
  z-index: 300; pointer-events: none;
  transition: width 0.08s linear;
}

/* ============================================================
   P3 — MOBILE PASS (first cut). Make the deck readable on a phone:
   collapse multi-column grids, shrink heroes, let wide diagrams scale.
   ============================================================ */
/* Bring the section-jump nav BACK on mobile/tablet — but subtle: a slim,
   horizontally-scrollable strip in the top bar (the base CSS hid it <900px). */
@media (max-width: 1023px) {
  .top-nav .nav-links {
    display: flex !important; flex-direction: row !important;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; gap: 2px;
    justify-content: flex-start;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    opacity: 0.92;
  }
  .top-nav .nav-links::-webkit-scrollbar { display: none; }
  .top-nav .nav-links a { font-size: 11px; padding: 5px 9px; flex-shrink: 0; letter-spacing: 0.02em; }
  .nav-container { gap: 10px; }
  /* make room for the section strip: drop the present button + tag on mobile
     (CSS-hidden, so the element still exists for the JS — no crash) */
  .nav-actions #presentToggle { display: none !important; }
  .nav-brand .nav-brand-tag { display: none; }
  .nav-brand .nav-wordmark { font-size: 14px; }
}

@media (max-width: 760px) {
  .slide { padding: 56px 0; }
  .slide-label, .slide-num { font-size: 11px; }
  h2 { font-size: clamp(26px, 7vw, 34px) !important; }

  /* one column for the dense grids */
  .moat-grid, .moat-grid-5,
  .dim-grid, .comps-grid, .traction-cols,
  .sum-grid { grid-template-columns: 1fr !important; }

  /* expansion map → stack core over vectors; vector rows simplify */
  .exp-map { grid-template-columns: 1fr !important; }
  .exp-vector { grid-template-columns: 32px 1fr !important; padding: 12px 14px !important; }
  .exp-vec-viz { grid-column: 1 / -1; }
  .exp-tam-bars { gap: 6px; }
  .exp-tam-arrow { display: none; }

  /* TAM funnel tiers + bottom-up rows → full width, stack */
  .tam-tier { width: 100% !important; flex-direction: column; align-items: flex-start; gap: 8px; }
  .tam-tier-body { border-left: none; padding-left: 0; }
  .tam-grid .tam-row { grid-template-columns: 1fr auto !important; }
  .tam-grid .tam-row > .hover-detail { display: none; }   /* the math cell — keep it tap-only on desktop */

  /* wide SVG scenes / system diagram: scale to fit, allow horizontal scroll */
  .vsys-flow, .qa-tax-scene-wrap, .qa-tax-ai-scene-wrap,
  .compare-slider, .vercel-playbook, .gtm-seq { overflow-x: auto; }
  .vercel-playbook, .gtm-seq { grid-template-columns: 1fr !important; gap: 10px; }

  /* matrix / 2x2 positioning: let it scroll rather than crush */
  .pos-matrix { overflow-x: auto; padding-left: 12px; }

  /* summary bento → single column */
  .sumb-grid { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
  .sumb-grid > * { grid-area: auto !important; }

  /* comparison table scrolls horizontally */
  .comp-table { display: block; overflow-x: auto; white-space: nowrap; }
}



/* ============================================================
   SOLUTION PANEL 1 — three-insight focus controls (main/v9 deck)
   Default = no focus (full animated diagram). Selecting a control
   dims everything but the active group, stills the flow animation,
   and floats a smoke-gradient message over the Execution box.
   ============================================================ */
.solution-slide .vsource,
.solution-slide .vpillar,
.solution-slide .vsys-top,
.solution-slide .vg-connections-up,
.solution-slide .vsys-flow-svg {
  transition: opacity .5s ease, filter .5s ease, border-color .35s ease, box-shadow .35s ease;
}
/* recede non-focused boxes (only when a focus is active) */
.vsys-block[data-focus="system"] .vsource,
.vsys-block[data-focus="system"] .vpillar,
.vsys-block[data-focus="graph"]    .vsource:not([data-grp="graph"]),
.vsys-block[data-focus="graph"]    .vpillar:not([data-grp="graph"]),
.vsys-block[data-focus="policies"] .vsource:not([data-grp="policies"]),
.vsys-block[data-focus="policies"] .vpillar:not([data-grp="policies"]) {
  opacity: .14;
  filter: grayscale(.85);
}
.vsys-block[data-focus="graph"] .vsys-top,
.vsys-block[data-focus="policies"] .vsys-top { opacity: .3; }
/* stop ALL flow animation + connectors the moment a focus is chosen */
.vsys-block[data-focus] .vsys-flow-svg { opacity: 0; }
.vsys-block[data-focus] .vg-arrow.anim { animation: none !important; }
.vsys-block[data-focus="graph"] .vg-connections-up,
.vsys-block[data-focus="policies"] .vg-connections-up { opacity: .28; }
/* highlight the focused group */
.vsys-block[data-focus="graph"]    .vpillar[data-grp="graph"],
.vsys-block[data-focus="policies"] .vpillar[data-grp="policies"] {
  border-color: rgba(var(--accent-green-rgb), .6);
  box-shadow: 0 0 0 3px rgba(var(--accent-green-rgb), .12), 0 10px 28px rgba(0,0,0,.28);
}
.vsys-block[data-focus="system"] .vsys-top {
  border-color: rgba(var(--accent-green-rgb), .55);
  box-shadow: 0 0 0 3px rgba(var(--accent-green-rgb), .10);
}

/* ---- smoke-gradient message over the Execution box ---- */
.vsys-flow { position: relative; }
.sol-cloud {
  position: absolute; left: 50%; bottom: 4%;
  transform: translateX(-50%) translateY(14px);
  width: min(660px, 72%); text-align: center;
  opacity: 0; pointer-events: none; z-index: 6;
  transition: opacity .55s ease, transform .55s ease;
}
.vsys-block[data-focus] .sol-cloud { opacity: 1; transform: translateX(-50%) translateY(0); }
.sol-cloud::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 168%; height: 280%;
  background: radial-gradient(50% 52% at 50% 62%,
      rgba(var(--accent-green-rgb), .30) 0%,
      rgba(var(--accent-green-rgb), .12) 38%,
      rgba(var(--accent-green-rgb), 0) 70%);
  filter: blur(20px);
}
.sol-cloud-card { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.sol-cloud-card.active { position: relative; opacity: 1; }
.sol-cloud-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em; color: var(--accent-green); }
.sol-cloud-card h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; margin: 8px 0 6px; color: var(--text-primary); }
.sol-cloud-card p { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 0 auto; max-width: 560px; }

/* ---- segmented control, centred under the system ---- */
.sol-controls {
  display: flex; width: fit-content; margin: 22px auto 0; gap: 3px; padding: 4px;
  border: 1px solid var(--border-subtle); border-radius: 11px;
  background: rgba(var(--surface-fg-rgb), .03);
}
.sol-ctrl {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
  padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--text-muted); background: transparent;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.sol-ctrl:hover { color: var(--text-secondary); }
.sol-ctrl.active {
  color: var(--text-primary);
  background: rgba(var(--accent-green-rgb), .13);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-green-rgb), .34);
}

/* ============================================================
   SOLUTION PANEL 1 — paradigm shift: three insight cards
   + worked example. Tight, scannable, on the deck's card
   vocabulary (mirrors .vpillar / .dim-card).
   ============================================================ */
.insight-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 28px;
}
.insight-card {
  position: relative;
  background: var(--tile-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 26px 24px 22px;
  display: flex; flex-direction: column;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.insight-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-green-rgb), .5);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
.insight-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 13px;
}
.insight-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; color: var(--accent-green);
}
.insight-loop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; color: var(--accent-green);
  background: rgba(var(--accent-green-rgb), .10);
  border: 1px solid rgba(var(--accent-green-rgb), .22);
}
.insight-loop svg { width: 14px; height: 14px; }
.insight-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-primary);
}
.insight-sub {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--text-muted); margin-top: 3px;
}
.insight-claim {
  font-family: var(--font-display); font-size: 19.5px; font-weight: 600;
  line-height: 1.28; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 16px 0 11px;
}
.insight-body {
  font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0;
}
.insight-body strong { color: var(--text-primary); font-weight: 600; }
.insight-foot {
  margin-top: auto; padding-top: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-green);
  display: inline-flex; align-items: center; gap: 7px;
}
.insight-foot::before {
  content: ''; width: 14px; height: 1px; background: rgba(var(--accent-green-rgb), .55);
}

.insight-example {
  margin-top: 26px; border: 1px solid var(--border-subtle);
  border-radius: 14px; background: rgba(var(--surface-fg-rgb), .02);
  padding: 18px 22px 20px;
}
.iex-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 13px; }
.iex-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-green);
}
.iex-rule { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.iex-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.iex-col { border-radius: 11px; padding: 13px 15px; border: 1px solid var(--border-subtle); }
.iex-col-label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px;
}
.iex-col p { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.iex-col.trad { background: rgba(var(--accent-red-rgb), .05); }
.iex-col.trad .iex-col-label { color: var(--accent-red); }
.iex-col.aucert { background: rgba(var(--accent-green-rgb), .06); border-color: rgba(var(--accent-green-rgb), .28); }
.iex-col.aucert .iex-col-label { color: var(--accent-green); }
.iex-col.aucert p strong { color: var(--text-primary); font-weight: 600; }
.iex-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 20px; }

@media (max-width: 1100px) { .insight-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .iex-cols { grid-template-columns: 1fr; }
  .iex-arrow { transform: rotate(90deg); }
}

/* ============================================================
   MARKET funnel — TAM/SAM/SOM waterfall + comparison table
   ported from Vibhu's v9 (his market markup uses .tam-water/.tw-*
   and .tam-table/.tt-*, which v10's CSS didn't have).
   ============================================================ */
    /* ----- TAM → SAM → SOM funnel ----- */
    /* ----- TAM / SAM / SOM descending waterfall ----- */
    .tam-water { display: flex; align-items: flex-end; gap: 14px; margin: 22px 0 20px; }
    .tw-bar { flex: 1.4; display: flex; flex-direction: column; align-items: center; gap: 9px; }
    .tw-step { flex: 0.8; display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 38px; }
    .tw-step-amt { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-muted); line-height: 1; }
    .tw-step-lbl { font-family: var(--font-mono); font-size: 9.5px; line-height: 1.4; color: var(--text-muted); text-align: center; letter-spacing: 0.03em; }
    .tw-val { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
    .tw-bar.tam .tw-val { font-size: 28px; color: var(--accent-blue); }
    .tw-bar.sam .tw-val { font-size: 25px; color: var(--accent-green); }
    .tw-bar.som .tw-val { font-size: 23px; color: var(--accent-green); text-shadow: 0 0 22px rgba(var(--accent-green-rgb), 0.45); }
    .tw-track { width: 100%; height: 132px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border-subtle); display: flex; align-items: flex-end; overflow: hidden; }
    .tw-fill { width: 100%; height: var(--h, 50%); border-radius: 7px 7px 0 0; transform-origin: bottom; transform: scaleY(0); animation: expTamGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    .tw-bar.tam .tw-fill { background: linear-gradient(180deg, var(--accent-blue), rgba(var(--accent-blue-rgb), 0.40)); animation-delay: 0.05s; }
    .tw-bar.sam .tw-fill { background: linear-gradient(180deg, var(--accent-green), rgba(var(--accent-green-rgb), 0.40)); animation-delay: 0.20s; box-shadow: 0 0 16px rgba(var(--accent-green-rgb), 0.25); }
    .tw-bar.som .tw-fill { background: linear-gradient(180deg, var(--accent-green), rgba(var(--accent-green-rgb), 0.40)); animation-delay: 0.35s; box-shadow: 0 0 24px rgba(var(--accent-green-rgb), 0.50); }
    .tw-cap { font-family: var(--font-mono); font-size: 10px; line-height: 1.45; color: var(--text-muted); text-align: center; }
    .tw-cap b { letter-spacing: 0.12em; }
    .tw-bar.tam .tw-cap b { color: var(--accent-blue); }
    .tw-bar.sam .tw-cap b, .tw-bar.som .tw-cap b { color: var(--accent-green); }

    /* ----- on-slide summary table ----- */
    .tam-table { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 18px; }
    .tt-row { display: grid; grid-template-columns: 64px 104px 1fr 142px; gap: 18px; align-items: center; padding: 11px 18px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--tile-bg); }
    .tt-row.tam { border-left: 3px solid var(--accent-blue); }
    .tt-row.sam { border-left: 3px solid var(--accent-green); }
    .tt-row.som { border-left: 3px solid var(--accent-green); background: rgba(var(--accent-green-rgb), 0.07); }
    .tt-head { background: transparent; border: none; padding: 0 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
    .tt-key { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-muted); }
    .tt-size { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
    .tt-row.tam .tt-size { color: var(--accent-blue); }
    .tt-row.sam .tt-size, .tt-row.som .tt-size { color: var(--accent-green); }
    .tt-def { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .tt-def .ref { color: var(--text-muted); }
    .tt-grow { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); text-align: right; }
    @media (max-width: 760px) {
      .tam-water { gap: 8px; }
      .tw-step { flex: 0.6; }
      .tw-step-lbl { font-size: 8.5px; }
      .tt-row { grid-template-columns: 54px 84px 1fr; }
      .tt-grow { display: none; }
    }
    .tam-comps {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
      padding: 13px 18px; border: 1px dashed var(--border-subtle); border-radius: 10px;
    }
    .tam-comps-label { font-size: 12.5px; color: var(--text-secondary); margin-right: 2px; }
    .tam-comp { font-size: 12.5px; color: var(--text-muted); }
    .tam-comp strong { color: var(--text-primary); font-weight: 600; }

    /* ----- Expansion map (market panel 3) ----- */
    .exp-map {
      display: grid;
      grid-template-columns: 178px 1fr;
      gap: 22px;
      align-items: stretch;
      margin: 14px 0 16px;
    }
    /* Core — today's wedge, glowing */
    .exp-core {
      position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 20px 14px; text-align: center;
      border-radius: 16px;
      border: 1px solid rgba(var(--accent-green-rgb), 0.35);
      background:
        radial-gradient(120% 80% at 50% 28%, rgba(var(--accent-green-rgb), 0.16), rgba(var(--accent-green-rgb), 0) 70%),
        var(--tile-bg);
    }
    .exp-core-glow {
      position: absolute; inset: -1px; border-radius: 16px; pointer-events: none;
      box-shadow: 0 0 30px rgba(var(--accent-green-rgb), 0.22);
      animation: expCorePulse 3.4s ease-in-out infinite;
    }
    @keyframes expCorePulse {
      0%, 100% { box-shadow: 0 0 26px rgba(var(--accent-green-rgb), 0.18); }
      50%      { box-shadow: 0 0 46px rgba(var(--accent-green-rgb), 0.40); }
    }
    .exp-core-face { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .exp-core-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--accent-green); }
    .exp-core-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.08; color: var(--text-primary); margin: 8px 0 5px; }
    .exp-core-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.04em; }

    .exp-vectors { display: flex; flex-direction: column; gap: 10px; }
    .exp-vector {
      position: relative;
      display: grid; grid-template-columns: 36px 196px 1fr; align-items: center; gap: 16px;
      padding: 12px 62px 12px 18px;
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--border-subtle);
      border-radius: 12px;
      background: var(--tile-bg);
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
      overflow: hidden;
    }
    .exp-vector:hover { transform: translateX(5px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); }
    .exp-vector.now  { border-left-color: var(--accent-green); }
    .exp-vector.next { border-left-color: var(--accent-amber); opacity: 0.92; }
    .exp-vector.later{ border-left-color: var(--text-muted);  opacity: 0.74; }
    .exp-vector.next:hover, .exp-vector.later:hover { opacity: 1; }
    /* animated energy flowing down the left accent of the NOW vectors */
    .exp-vector.now::before {
      content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--accent-green) 50%, transparent 100%);
      background-size: 100% 220%;
      animation: expFlow 2.4s linear infinite;
    }
    @keyframes expFlow { 0% { background-position: 0 -110%; } 100% { background-position: 0 110%; } }

    .exp-vec-num {
      width: 34px; height: 34px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 700; font-size: 16px;
      background: rgba(var(--accent-green-rgb), 0.12); color: var(--accent-green);
      border: 1px solid rgba(var(--accent-green-rgb), 0.30);
    }
    .exp-vector.next .exp-vec-num  { background: rgba(var(--accent-amber-rgb), 0.12); color: var(--accent-amber); border-color: rgba(var(--accent-amber-rgb), 0.30); }
    .exp-vector.later .exp-vec-num { background: var(--bg-secondary); color: var(--text-muted); border-color: var(--border-subtle); }

    .exp-vec-head { display: flex; align-items: center; gap: 9px; }
    .exp-vec-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .exp-vec-phase { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; padding: 2px 7px; border-radius: 999px; }
    .exp-vec-phase.now  { color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.12); border: 1px solid rgba(var(--accent-green-rgb), 0.30); }
    .exp-vec-phase.next { color: var(--accent-amber); background: rgba(var(--accent-amber-rgb), 0.12); border: 1px solid rgba(var(--accent-amber-rgb), 0.30); }
    .exp-vec-phase.later{ color: var(--text-muted);  background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
    .exp-vec-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .exp-vec-time {
      position: absolute; top: 11px; right: 13px; z-index: 2;
      font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
      padding: 2px 7px; border-radius: 4px; white-space: nowrap;
    }
    .exp-vector.now   .exp-vec-time { color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.12); }
    .exp-vector.next  .exp-vec-time { color: var(--accent-amber); background: rgba(var(--accent-amber-rgb), 0.12); }
    .exp-vector.later .exp-vec-time { color: var(--text-muted); background: var(--bg-secondary); }

    /* vector 1 — surfaces × checks matrix (5 checks incl. Policy) */
    .exp-matrix { display: inline-flex; flex-direction: column; gap: 4px; }
    .exp-mx-head, .exp-mx-row { display: grid; grid-template-columns: 50px repeat(5, 22px); gap: 5px; align-items: center; }
    .exp-mx-head span { font-family: var(--font-mono); font-size: 8px; color: var(--text-muted); text-align: center; }
    .exp-mx-rl { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); text-align: right; }
    .exp-mx-row i {
      width: 22px; height: 13px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--bg-secondary);
    }
    .exp-mx-row i.on {
      background: var(--accent-green); border-color: var(--accent-green);
      box-shadow: 0 0 8px rgba(var(--accent-green-rgb), 0.45);
      animation: expCellPulse 3s ease-in-out infinite;
    }
    @keyframes expCellPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

    /* vector 2 — service chips: .on = live now, default = roadmap (outlined) */
    .exp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .exp-chips span {
      font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
      padding: 5px 11px; border-radius: 6px;
      background: transparent; border: 1px dashed var(--border-subtle);
    }
    .exp-chips span.on {
      color: var(--text-primary); border-style: solid;
      background: rgba(var(--accent-green-rgb), 0.12); border-color: rgba(var(--accent-green-rgb), 0.40);
    }

    /* vectors 3, 4 — progression flow */
    .exp-flow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
    .exp-flow-node {
      font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary);
      padding: 5px 12px; border-radius: 6px;
      border: 1px dashed var(--border-subtle); background: var(--bg-secondary);
    }
    .exp-flow-node.on {
      color: var(--text-primary); border-style: solid;
      border-color: rgba(var(--accent-green-rgb), 0.40); background: rgba(var(--accent-green-rgb), 0.08);
    }
    .exp-flow-arr { color: var(--text-muted); font-size: 14px; }

    .exp-focus {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 18px; border-radius: 0 10px 10px 0;
      background: rgba(var(--accent-green-rgb), 0.07);
      border-left: 3px solid var(--accent-green);
      font-size: 13.5px; line-height: 1.5; color: var(--text-secondary);
    }
    .exp-focus strong { color: var(--text-primary); font-weight: 600; }
    .exp-focus-pulse {
      flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
      background: var(--accent-green); box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.5);
      animation: expFocusPulse 2.2s ease-out infinite;
    }
    @keyframes expFocusPulse {
      0%   { box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.5); }
      70%  { box-shadow: 0 0 0 10px rgba(var(--accent-green-rgb), 0); }
      100% { box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0); }
    }

    /* ----- TAM grows with every vector (ascending bars) ----- */
    .exp-tam {
      margin-top: 13px;
      padding: 12px 20px 10px;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.05), transparent 60%), var(--tile-bg);
    }
    /* ungated present compaction so the waterfall + table clear the floating bar */
    body.mode-present .slide[data-slide="4"] .tam-water { margin: 12px 0 12px !important; }
    body.mode-present .slide[data-slide="4"] .tw-track { height: 84px !important; }
    body.mode-present .slide[data-slide="4"] .tw-step  { margin-bottom: 24px !important; }
    body.mode-present .slide[data-slide="4"] .tam-table { gap: 5px !important; margin: 4px 0 10px !important; }
    body.mode-present .slide[data-slide="4"] .tt-row { padding: 8px 16px !important; }

/* Multiplier — real brand mark, applied as a CSS mask of the cropped logo so it
   inherits the badge colour (white on the orange tile, monochrome in the chip). */
.brand-mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url(assets/multiplier-mark.png) center / contain no-repeat;
          mask: url(assets/multiplier-mark.png) center / contain no-repeat;
}
.employer .company-badge[data-brand="multiplier"] .brand-mark { width: 11px; height: 14px; }
.sumb-team-cos span .brand-mark { width: 1.0em; height: 1.32em; flex-shrink: 0; opacity: 0.92; }


/* ============================================================
   Problem panel 2 — "now mandatory" store-enforcement strip
   ============================================================ */
.prob-mandatory {
  margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 20px; border-radius: 12px;
  border: 1px solid rgba(var(--accent-amber-rgb), 0.30);
  background: rgba(var(--accent-amber-rgb), 0.07);
}
.prob-mandatory .pm-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-amber); white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(var(--accent-amber-rgb), 0.40);
}
.prob-mandatory .pm-text { font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.prob-mandatory .pm-text strong { color: var(--text-primary); font-weight: 600; }

/* Overflow appendix — divider between stacked backup blocks */
.ov-divider { margin: 44px 0; border-top: 1px solid var(--border-subtle); }

/* ============================================================
   Present mode — make the per-slide variant ticker subtle
   (presenter aid, not a focal point). Brightens on hover.
   ============================================================ */
body.mode-present .problem-toggle,
body.mode-present .solution-toggle,
body.mode-present .moat-toggle,
body.mode-present .market-toggle,
body.mode-present .whynow-toggle {
  transform: scale(0.78);
  transform-origin: top right;
  opacity: 0.4;
  transition: opacity .2s ease, transform .2s ease;
}
body.mode-present .problem-toggle:hover,
body.mode-present .solution-toggle:hover,
body.mode-present .moat-toggle:hover,
body.mode-present .market-toggle:hover,
body.mode-present .whynow-toggle:hover {
  opacity: 0.95;
}

/* ============================================================
   Moat — 4th (structural) moat as a full-width strip under the
   three primary cards. Lower visual weight on purpose.
   ============================================================ */
.moat-structural {
  margin-top: 16px; display: flex; align-items: center; gap: 18px;
  padding: 16px 22px; border-radius: 14px;
  border: 1px solid var(--border-subtle); background: var(--tile-bg);
  border-left: 3px solid rgba(var(--accent-purple-rgb), 0.55);
}
.moat-structural .ms-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: rgba(var(--accent-purple-rgb), 0.12); color: var(--accent-purple);
}
.moat-structural .ms-icon svg { width: 24px; height: 24px; }
.moat-structural .ms-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; flex-wrap: wrap; }
.moat-structural .ms-head .moat-tag { margin: 0; }
.moat-structural .ms-head h4 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.moat-structural .ms-body p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; max-width: 980px; }
.moat-structural .ms-body p em { color: var(--text-primary); font-style: normal; font-weight: 600; }
@media (max-width: 640px) { .moat-structural { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ============================================================
   PRESENT-MODE READABILITY PASS
   Content is authored dense for scroll mode; in present mode
   (projection) scale type up and give cards room so text is
   legible from across a room and slides fill the viewport
   instead of floating as a tiny centred island. Tall slides
   scroll (visible scrollbar already wired up).
   ============================================================ */
body.mode-present .slide { padding-top: 54px; padding-bottom: 56px; }
body.mode-present .slide h2 { font-size: 42px; line-height: 1.1; margin-bottom: 16px; }
body.mode-present .slide .container { max-width: 1200px; }
@media (max-height: 880px) {
  body.mode-present .slide h2 { font-size: 36px; }
  body.mode-present .slide { padding-top: 44px; padding-bottom: 44px; }
}

/* leads / subtitles */
body.mode-present .lead,
body.mode-present .sdlc-deck,
body.mode-present .lead-mini { font-size: 16.5px; line-height: 1.55; }

/* generic card headings + body copy */
body.mode-present h4 { font-size: 19px; }
body.mode-present .insight-body,
body.mode-present .moat-card .desc,
body.mode-present .moat-structural .ms-body p,
body.mode-present .proof-card .text,
body.mode-present .dim-list li,
body.mode-present .pm-text,
body.mode-present .vpillar > p,
body.mode-present .bio-points li { font-size: 14.5px; line-height: 1.55; }
body.mode-present .insight-claim { font-size: 21px; line-height: 1.25; }
body.mode-present .bridge-line { font-size: 22px; }

/* Moat (slide 5) — undo the tight compaction so the 4 moats breathe + fill */
body.mode-present .slide[data-slide="7"] .moat-grid { gap: 20px !important; margin-top: 24px !important; }
body.mode-present .slide[data-slide="7"] .moat-card { padding: 22px 22px 20px; }
body.mode-present .slide[data-slide="7"] .moat-card h4 { font-size: 20px; }
body.mode-present .slide[data-slide="7"] .moat-card .desc { font-size: 15px; }
body.mode-present .slide[data-slide="7"] .moat-tag { font-size: 11.5px; }
body.mode-present .slide[data-slide="7"] .moat-structural { margin-top: 18px; padding: 18px 24px; }
body.mode-present .slide[data-slide="7"] .moat-structural .ms-head h4 { font-size: 19px; }

/* ============================================================
   FINAL ROUND — confidentiality, present-mode Fit control,
   collapsible worked example
   ============================================================ */
.cover-confidential {
  margin-top: 24px; text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.03em; color: var(--text-muted); opacity: 0.58;
}
.footer-confidential {
  font-size: 12px; line-height: 1.55; color: var(--text-muted);
  max-width: 800px; margin: 0 0 12px;
}
.footer-confidential strong { color: var(--text-secondary); font-weight: 600; }

/* present-mode Fit / margin control (founders' deck only; stripped from share) */
.fit-config { position: fixed; left: 20px; bottom: 24px; z-index: 1100; font-family: var(--font-mono); }
.fit-config-trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px;
  background: rgba(var(--surface-fg-rgb), 0.06); border: 1px solid var(--border-subtle);
  color: var(--text-muted); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; opacity: 0.45; transition: opacity .2s, color .2s;
}
.fit-config-trigger:hover { opacity: 1; color: var(--text-secondary); }
.fit-config-panel {
  position: absolute; left: 0; bottom: calc(100% + 8px); width: 208px; padding: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-strong);
  border-radius: 11px; box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.fit-config-label { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px; }
.fit-config-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fit-config-options button {
  padding: 8px; border-radius: 7px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-secondary); font-size: 11px; cursor: pointer; font-family: var(--font-mono);
  transition: border-color .15s, background .15s, color .15s;
}
.fit-config-options button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.fit-config-options button.active {
  background: rgba(var(--accent-green-rgb), 0.14); color: var(--text-primary); border-color: rgba(var(--accent-green-rgb), 0.4);
}

/* collapsible worked example (solution paradigm panel) */
.insight-example-wrap { margin-top: 22px; }
.iex-trigger {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 20px;
  border-radius: 13px; cursor: pointer; text-align: left;
  background: var(--tile-bg); border: 1px solid var(--border-subtle);
  transition: border-color .25s, background .25s;
}
.iex-trigger:hover { border-color: rgba(var(--accent-green-rgb), 0.4); background: var(--tile-bg-hover); }
.iex-trigger-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-green); flex-shrink: 0; }
.iex-trigger-text { font-size: 13.5px; color: var(--text-secondary); flex: 1; }
.iex-trigger-text em { color: var(--text-primary); font-style: italic; }
.iex-trigger-cta { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-green); }
.iex-chev { transition: transform .3s; }
.iex-trigger.is-open .iex-chev { transform: rotate(90deg); }
.insight-example {
  position: relative; margin-top: 12px; overflow: hidden;
  border: 1px solid rgba(var(--accent-green-rgb), 0.22);
  animation: iexReveal .4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes iexReveal { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } }
.iex-glow {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 52%; height: 200%; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 50% at 62% 50%, rgba(var(--accent-green-rgb), 0.18) 0%, rgba(var(--accent-green-rgb), 0) 70%);
  filter: blur(26px);
}
.insight-example .iex-cols { position: relative; z-index: 1; }

/* ============================================================
   Per-slide confidential mark + worked-example smoke overlay
   ============================================================ */
.confidential-mark {
  position: fixed; right: 16px; bottom: 13px; z-index: 90; pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); opacity: 0.4;
}
@media (max-width: 760px) { .confidential-mark { display: none; } }

/* the solution paradigm panel anchors the overlay */
.solution-slide .solution-panel[data-panel="1"] { position: relative; }

.iex-wrap { margin-top: 22px; }
.iex-overlay {
  position: absolute; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.iex-overlay[hidden] { display: none; }   /* author rule must beat UA [hidden] which our display:flex overrode */
.iex-smoke {
  position: absolute; inset: 0; border-radius: 16px;
  background:
    radial-gradient(82% 62% at 72% 42%, rgba(var(--accent-green-rgb), 0.24) 0%, rgba(var(--accent-green-rgb), 0) 55%),
    radial-gradient(120% 100% at 26% 86%, rgba(var(--accent-green-rgb), 0.07) 0%, rgba(var(--accent-green-rgb), 0) 60%),
    rgba(7, 9, 13, 0.80);
  animation: iexFade .35s ease both;
}
@keyframes iexFade { from { opacity: 0; } to { opacity: 1; } }
.iex-stage {
  position: relative; z-index: 1; width: min(900px, 96%);
  background: var(--bg-secondary); border: 1px solid rgba(var(--accent-green-rgb), 0.28);
  border-radius: 16px; padding: 24px 30px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  animation: iexPop .42s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes iexPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.iex-stage-close {
  position: absolute; top: 13px; right: 13px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.iex-stage-close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.iex-stage-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-green); }
.iex-stage-rule { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 7px 0 22px; color: var(--text-primary); letter-spacing: -0.01em; }
.iex-stage-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: start; }
.iex-stage-flow { color: var(--text-muted); align-self: center; }
.iex-stage-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.iex-stage-col.trad .iex-stage-label { color: var(--accent-red); }
.iex-stage-col.aucert .iex-stage-label { color: var(--accent-green); }
.iex-cap { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-top: 16px; }
.iex-cap strong { color: var(--text-primary); font-weight: 600; }
.iex-loop-ic { color: var(--accent-red); font-weight: 700; margin-right: 3px; }

/* each column: chip -> connector -> screen grid -> caption */
.iex-stage-col.trad, .iex-stage-col.aucert { display: flex; flex-direction: column; align-items: center; }
.iex-mini-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; padding: 7px 15px; border-radius: 999px;
}
.iex-mini-chip svg { width: 13px; height: 13px; }
.iex-mini-chip.trad { background: rgba(var(--accent-red-rgb), 0.10); border: 1px solid rgba(var(--accent-red-rgb), 0.42); color: var(--accent-red); }
.iex-mini-chip.aucert { background: rgba(var(--accent-green-rgb), 0.16); border: 1px solid rgba(var(--accent-green-rgb), 0.5); color: var(--accent-green); box-shadow: 0 0 26px rgba(var(--accent-green-rgb), 0.30); }
.iex-spacer { height: 34px; }
.iex-cone {
  width: 58%; height: 22px; margin: 6px 0 8px;
  background: linear-gradient(rgba(var(--accent-green-rgb),0.45), rgba(var(--accent-green-rgb),0.04));
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0% 100%);
}

.iex-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; }
.iex-scr, .iex-srf {
  position: relative; border-radius: 5px; padding: 6px 7px 7px;
  display: flex; flex-direction: column; gap: 3px; min-height: 42px;
}
.iex-scr { background: rgba(var(--accent-red-rgb), 0.07); border: 1px solid rgba(var(--accent-red-rgb), 0.30); }
.iex-srf { background: rgba(var(--accent-green-rgb), 0.09); border: 1px solid rgba(var(--accent-green-rgb), 0.40); }
.iex-scr .bar, .iex-srf .bar { height: 4px; width: 52%; border-radius: 2px; }
.iex-scr .bar { background: rgba(var(--accent-red-rgb), 0.55); }
.iex-srf .bar { background: rgba(var(--accent-green-rgb), 0.62); }
.iex-scr .ln, .iex-srf .ln { height: 3px; border-radius: 2px; }
.iex-scr .ln { background: rgba(var(--accent-red-rgb), 0.22); }
.iex-srf .ln { background: rgba(var(--accent-green-rgb), 0.26); }
.iex-scr .ln:last-child, .iex-srf .ln:last-child { width: 68%; }
.iex-scr::after { content: '✎'; position: absolute; top: 4px; right: 6px; font-size: 9px; color: rgba(var(--accent-red-rgb), 0.85); }
.iex-scr.leak { background: rgba(var(--accent-red-rgb), 0.18); border-color: var(--accent-red); }
.iex-scr.leak::after { content: '⚠'; color: var(--accent-red); }
.iex-srf::after { content: '✓'; position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--accent-green); }
.iex-screens.covered .iex-srf { animation: iexSrf .5s cubic-bezier(0.16,1,0.3,1) both; }
.iex-screens.covered .iex-srf:nth-child(1){animation-delay:.08s} .iex-screens.covered .iex-srf:nth-child(2){animation-delay:.13s} .iex-screens.covered .iex-srf:nth-child(3){animation-delay:.18s} .iex-screens.covered .iex-srf:nth-child(4){animation-delay:.23s} .iex-screens.covered .iex-srf:nth-child(5){animation-delay:.28s} .iex-screens.covered .iex-srf:nth-child(6){animation-delay:.33s} .iex-screens.covered .iex-srf:nth-child(7){animation-delay:.38s} .iex-screens.covered .iex-srf:nth-child(8){animation-delay:.43s} .iex-screens.covered .iex-srf:nth-child(9){animation-delay:.48s}
@keyframes iexSrf { from { opacity: .12; transform: scale(.82); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .iex-stage-cols { grid-template-columns: 1fr; gap: 16px; }
  .iex-stage-flow { transform: rotate(90deg); padding: 0; justify-self: center; }
}

/* Ask — section labels are small mono eyebrows; the generic present-mode h4 bump
   oversized them. Keep them small. */
body.mode-present .funds-block h4,
body.mode-present .comps-row h4 { font-size: 12px !important; letter-spacing: 0.16em; }