:root {
    --bg: #f4f1eb;
    --bg-card: #faf8f4;
    --bg-dark: #e8e4dc;
    --text: #2c2c2c;
    --text-muted: #7a7a7a;
    --sand: #c4a97d;
    --sage: #7d9a7d;
    --mauve: #9a7d9a;
    --lavender: #8b7ec8;
    --river: #6b8faa;
    --error: #c47d7d;
    --border: #e8e4dc;
    --highlight: rgba(196, 169, 125, 0.35);
    --shadow: 0 4px 16px rgba(44, 44, 44, 0.06);
    --nav-bg: rgba(244, 241, 235, 0.92);
    --flywheel-bg: #1a1a2e;
    --flywheel-card: #16213e;
    --flywheel-border: #1e3a5f;
    --flywheel-text: #faf8f4;
    --flywheel-text-muted: rgba(250, 248, 244, 0.7);
    --gold: #d4a843;
    --badge-active-bg: rgba(125, 154, 125, 0.13);
    --badge-pending-bg: rgba(196, 169, 125, 0.16);
    --badge-soon-bg: rgba(122, 122, 122, 0.13);
    --badge-river-bg: rgba(107, 143, 170, 0.13);
    --badge-mauve-bg: rgba(154, 125, 154, 0.15);
    --badge-error-bg: rgba(196, 125, 125, 0.15);
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', Menlo, monospace;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
  }

  [data-theme="dark"] {
    --bg: #1a1a1e;
    --bg-card: #222226;
    --bg-dark: #2e2e33;
    --text: #e8e4dc;
    --text-muted: #8a857d;
    --sand: #c4a97d;
    --sage: #7d9a7d;
    --mauve: #9a7d9a;
    --lavender: #8b7ec8;
    --river: #6b8faa;
    --error: #c47d7d;
    --border: #2e2e33;
    --highlight: rgba(196, 169, 125, 0.25);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --nav-bg: rgba(26, 26, 30, 0.92);
    --flywheel-bg: #0f0f12;
    --flywheel-card: #222226;
    --flywheel-border: #2e2e33;
    --flywheel-text: #e8e4dc;
    --flywheel-text-muted: rgba(232, 228, 220, 0.7);
    --badge-active-bg: rgba(125, 154, 125, 0.2);
    --badge-pending-bg: rgba(196, 169, 125, 0.2);
    --badge-soon-bg: rgba(138, 133, 125, 0.2);
    --badge-river-bg: rgba(107, 143, 170, 0.22);
    --badge-mauve-bg: rgba(154, 125, 154, 0.22);
    --badge-error-bg: rgba(196, 125, 125, 0.22);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 0.3s, color 0.3s;
  }
  ::selection { background: var(--text); color: var(--bg-card); }

  /* ---------- NAV ---------- */
  nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: background 0.3s, border-color 0.3s;
  }
  .nav-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 18px 40px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .logo {
    font-family: var(--font-heading);
    font-size: 28px; font-weight: 400; letter-spacing: -0.3px;
    display: flex; align-items: baseline; gap: 2px; color: var(--text);
  }
  .logo-num {
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 500; color: var(--text-muted);
    margin-right: 6px;
  }
  .nav-links { display: flex; align-items: center; gap: 32px; font-size: 13px; }
  .nav-links a {
    color: var(--text-muted); text-decoration: none;
    transition: color 0.2s; font-weight: 500;
  }
  .nav-links a:hover { color: var(--text); }
  .theme-toggle {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 6px 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.2s, transform 0.2s;
  }
  .theme-toggle:hover { background: var(--bg-dark); color: var(--text); }
  .theme-toggle:active { transform: scale(0.95); }
  /* Light mode (default): show moon, hide sun. Use !important to override any
     descendant rule like `.theme-toggle svg { display: block }`. */
  .theme-toggle .theme-icon-moon { display: block !important; }
  .theme-toggle .theme-icon-sun  { display: none  !important; }
  /* Dark mode: flip them. Sun uses sand color. */
  [data-theme="dark"] .theme-toggle { color: var(--sand); }
  [data-theme="dark"] .theme-toggle:hover { color: var(--sand); }
  [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none  !important; }
  [data-theme="dark"] .theme-toggle .theme-icon-sun  { display: block !important; }

  .btn-primary {
    background: var(--text); color: var(--bg-card);
    border: none; border-radius: var(--radius-sm);
    padding: 9px 18px;
    font-family: var(--font-body); font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-block;
    transition: background 0.2s;
  }
  .btn-primary:hover { background: #1a1a1a; }
  .btn-primary.lg { padding: 12px 24px; font-size: 13px; }
  .btn-secondary {
    background: transparent; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    cursor: pointer; text-decoration: none; display: inline-block;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: all 0.2s;
  }
  .btn-secondary.lg { padding: 11px 22px; font-size: 11px; }
  .btn-secondary:hover { color: var(--text); border-color: var(--text); }

  /* ---------- TOP STATEMENT (dark hero) ---------- */
  .statement-hero {
    position: relative;
    background: #1a1a2e;
    overflow: hidden;
    padding: 64px 56px 80px;
  }
  .hero-glow {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    width: 600px; height: 600px;
    border-radius: 50%;
  }
  .hero-glow-gold {
    top: -140px; left: -120px;
    background: radial-gradient(circle, rgba(212,168,67,0.10) 0%, transparent 60%);
  }
  .hero-glow-blue {
    top: 50%; right: -160px;
    transform: translateY(-50%);
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(107,143,170,0.12) 0%, transparent 60%);
  }

  .statement {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
  }
  .statement-eyebrow {
    font-family: var(--font-mono); font-size: 10px;
    color: #d4a843; letter-spacing: 1px;
    text-transform: uppercase; font-weight: 600;
    margin-bottom: 14px;
  }
  .statement h1 {
    font-family: var(--font-heading);
    font-size: clamp(40px, 4.4vw, 60px);
    font-weight: 400; line-height: 1.02;
    letter-spacing: -0.025em;
    color: #faf8f4; margin-bottom: 22px;
    max-width: 760px;
  }
  .statement h1 em {
    font-style: italic; font-weight: 400;
    background: linear-gradient(120deg, #d4a843 0%, #f0c878 50%, #d4a843 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
  .statement-body { font-size: 15px; color: rgba(250,248,244,0.72); line-height: 1.65; max-width: 880px; }
  .statement-body p { margin-bottom: 0; }
  .statement-body strong { color: #faf8f4; font-weight: 500; }

  /* River flow band — anchored to bottom of dark hero, full-bleed. */
  .river-flow {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 220px;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
  }
  .river-flow svg {
    display: block;
    width: 100%; height: 100%;
  }
  .rl {
    fill: none;
    opacity: 0;
    stroke-linecap: round;
  }
  /* Per-line color, weight, and matching glow. */
  .rl-1 { stroke-width: 2.5; filter: drop-shadow(0 0 6px #6b8faa); animation: rl-fade 9s ease-in-out 0s infinite; }
  .rl-2 { stroke-width: 2.5; filter: drop-shadow(0 0 6px #7d9a7d); animation: rl-fade 11s ease-in-out 1.8s infinite; }
  .rl-3 { stroke-width: 2.5; filter: drop-shadow(0 0 6px #9a7d9a); animation: rl-fade 8s ease-in-out 3.5s infinite; }
  .rl-4 { stroke-width: 3.5; filter: drop-shadow(0 0 8px #d4a843); animation: rl-fade 12s ease-in-out 5.2s infinite; }
  .rl-5 { stroke-width: 2.5; filter: drop-shadow(0 0 6px #8b7ec8); animation: rl-fade 10s ease-in-out 6.8s infinite; }
  .rl-6 { stroke-width: 2.5; filter: drop-shadow(0 0 6px #e94560); animation: rl-fade 11s ease-in-out 8.4s infinite; }
  @keyframes rl-fade {
    0%   { opacity: 0.3; }
    15%  { opacity: 0.85; }
    75%  { opacity: 0.85; }
    100% { opacity: 0.3; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rl { animation: none !important; opacity: 0.6 !important; }
  }

  /* ---------- SECTION HEADER ---------- */
  .section-head {
    max-width: 1280px; margin: 0 auto;
    padding: 32px 40px 20px;
  }
  .section-eyebrow {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted); letter-spacing: 1px;
    text-transform: uppercase; font-weight: 600; margin-bottom: 12px;
  }
  .section-title {
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 600; letter-spacing: -0.015em;
    line-height: 1.15; max-width: 780px; color: var(--text);
  }
  .section-title em { font-style: italic; font-weight: 400; color: var(--river); }

  /* ---------- PRODUCT ROWS (FULL WIDTH) ---------- */
  .products-stack {
    max-width: 1280px; margin: 0 auto;
    padding: 0 40px 40px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .product-row {
    background: var(--bg-card); border-radius: var(--radius-lg);
    overflow: hidden;
    display: grid; grid-template-columns: 0.7fr 1fr;
    min-height: 360px;
  }
  .product-row.reverse { grid-template-columns: 1fr 0.7fr; }
  .product-row.reverse .product-info { order: 2; }
  .product-row.reverse .product-mock { order: 1; }
  .product-info {
    padding: 36px 40px;
    display: flex; flex-direction: column; gap: 16px;
    justify-content: center;
  }
  .product-meta {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-muted); letter-spacing: 1px;
    text-transform: uppercase; font-weight: 600;
  }
  .product-num { color: var(--text); }
  .product-name {
    font-family: var(--font-heading);
    font-size: clamp(28px, 2.8vw, 36px);
    font-weight: 600; letter-spacing: -0.015em;
    line-height: 1.05; color: var(--text);
  }
  .product-name em { font-style: italic; font-weight: 400; color: var(--river); }
  .product-tagline {
    font-family: var(--font-heading);
    font-style: italic; font-weight: 400;
    font-size: 17px; color: var(--text-muted);
    margin-top: -8px;
  }
  .product-edge {
    font-size: 14px; color: var(--text); line-height: 1.6;
    max-width: 460px;
  }
  .product-edge strong {
    font-weight: 600;
  }
  .badge {
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
    padding: 2px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.5px;
  }
  .badge-active { background: var(--badge-active-bg); color: var(--sage); }
  .badge-pending { background: var(--badge-pending-bg); color: var(--sand); }
  .badge-soon { background: var(--badge-soon-bg); color: var(--text-muted); }

  /* ---------- MOCKUP CONTAINER ---------- */
  .product-mock {
    background: transparent;
    padding: 32px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }

  /* ---------- MOCKUP STYLES (real app UI) ---------- */
  .mock {
    width: 100%; max-width: 540px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 11px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  /* Top bar with traffic-light dots, like a desktop window */
  .mock-chrome {
    padding: 8px 12px;
    background: var(--bg-dark);
    display: flex; align-items: center; gap: 6px;
    border-bottom: 1px solid var(--border);
  }
  .mock-chrome-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0,0,0,0.12);
  }
  .mock-chrome-url {
    margin-left: 12px;
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-muted); letter-spacing: 0.3px;
  }
  .mock-body { padding: 16px 18px; }

  /* Tabs row (matches your standard nav pattern) */
  .mock-tabs {
    display: flex; gap: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
  }
  .mock-tab {
    font-family: var(--font-body); font-size: 11px;
    color: var(--text-muted); padding: 6px 0 8px;
    border-bottom: 2.5px solid transparent;
  }
  .mock-tab.active {
    color: var(--text); font-weight: 600;
    border-bottom-color: var(--text);
  }
  .mock-h {
    font-family: var(--font-heading);
    font-size: 14px; font-weight: 600;
    margin-bottom: 4px; color: var(--text);
  }
  .mock-sub {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-muted); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 12px;
  }
  .mock-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--bg);
    font-family: var(--font-mono); font-size: 10px;
  }
  .mock-row:last-child { border-bottom: none; }
  .mock-pill {
    font-family: var(--font-mono); font-size: 9px;
    padding: 2px 6px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600;
  }

  /* ============== APP-SPECIFIC MOCKUPS ============== */

  /* ClaimFlow — 10-tab admin dashboard with KPIs */
  .mock-claimflow .mock-tabs { gap: 12px; font-size: 9.5px; flex-wrap: nowrap; overflow-x: auto; }
  .mock-claimflow .mock-tabs::-webkit-scrollbar { display: none; }
  .mock-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; margin-bottom: 14px;
  }
  .mock-kpi {
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 10px 12px;
  }
  .mock-kpi-label {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 4px;
  }
  .mock-kpi-val {
    font-family: var(--font-heading); font-size: 18px;
    font-weight: 600; color: var(--text); line-height: 1;
  }
  .mock-kpi-trend {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--sage); margin-top: 4px; font-weight: 600;
  }

  /* Docket Monitor — alert feed */
  .mock-alert {
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 10px 12px; margin-bottom: 8px;
    border-left: 3px solid var(--river);
  }
  .mock-alert.urgent { border-left-color: var(--error); }
  .mock-alert-time {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); letter-spacing: 0.5px;
    margin-bottom: 4px;
  }
  .mock-alert-title {
    font-family: var(--font-body); font-size: 11px;
    font-weight: 600; margin-bottom: 4px;
  }
  .mock-alert-summary {
    font-size: 10px; color: var(--text-muted); line-height: 1.4;
  }

  /* Risk Assessor — heatmap grid + Monte Carlo */
  .mock-heatmap {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 3px; margin-bottom: 12px;
  }
  .mock-heatmap div {
    aspect-ratio: 1; border-radius: 2px;
  }

  /* Risk distribution histogram */
  .mock-histogram {
    display: flex; gap: 2px; align-items: flex-end;
    height: 60px; margin-bottom: 8px;
  }
  .mock-histogram span {
    flex: 1; background: var(--river); opacity: 0.7;
    border-radius: 1px 1px 0 0;
  }

  /* Allo Flow — waterfall */
  .mock-waterfall {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 12px 0;
  }
  .mock-node {
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 10px 12px; text-align: center;
    flex: 1; min-width: 0;
  }
  .mock-node-label {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); letter-spacing: 0.5px;
    text-transform: uppercase; margin-bottom: 4px;
  }
  .mock-node-val {
    font-family: var(--font-heading); font-size: 13px;
    font-weight: 600;
  }
  .mock-arrow {
    color: var(--text-muted); font-family: var(--font-mono); font-size: 14px;
  }
  .mock-tier-bar {
    height: 16px; border-radius: 3px;
    display: flex; align-items: center; padding: 0 8px;
    color: var(--text); font-family: var(--font-mono);
    font-size: 8px; font-weight: 600; letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  /* Social Track — multi-channel campaign rows */
  .mock-channel {
    display: grid; grid-template-columns: 50px 1fr auto;
    align-items: center; gap: 12px; padding: 8px 0;
    border-bottom: 1px solid var(--bg);
  }
  .mock-channel:last-child { border-bottom: none; }
  .mock-channel-label {
    font-family: var(--font-mono); font-size: 10px;
    font-weight: 600; color: var(--text);
  }
  .mock-channel-bar {
    height: 8px; background: var(--bg); border-radius: 2px; overflow: hidden;
  }
  .mock-channel-fill { height: 100%; border-radius: 2px; }
  .mock-channel-num {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted); font-weight: 600;
  }

  /* DocReview — pass progress */
  .mock-passes { display: flex; gap: 6px; margin-bottom: 14px; }
  .mock-pass {
    flex: 1; padding: 8px 4px;
    border-radius: var(--radius-sm); text-align: center;
    font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  }
  .mock-pass.done { background: var(--text); color: var(--bg-card); }
  .mock-pass.active { background: var(--river); color: var(--bg-card); }
  .mock-pass.idle { background: var(--bg); color: var(--text-muted); }
  .mock-finding {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 6px 0; font-size: 10px; color: var(--text);
    border-bottom: 1px solid var(--bg);
  }
  .mock-finding:last-child { border-bottom: none; }
  .mock-finding-tag {
    font-family: var(--font-mono); font-size: 8px;
    padding: 2px 6px; border-radius: 3px;
    font-weight: 600; letter-spacing: 0.3px;
    flex-shrink: 0; text-transform: uppercase;
  }

  /* River Chat */
  .mock-msg-user {
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 8px 12px; margin-bottom: 10px;
    font-size: 11px; max-width: 80%;
  }
  .mock-msg-ai {
    background: var(--text); color: var(--bg-card);
    border-radius: var(--radius-sm); padding: 10px 12px;
    margin: 10px 0 10px auto; max-width: 85%;
    font-size: 11px;
  }
  .mock-cite {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--sand); margin-top: 6px;
    letter-spacing: 0.3px; display: flex; align-items: center; gap: 4px;
  }
  .mock-input {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px; font-family: var(--font-body);
    font-size: 11px; color: var(--text-muted);
    margin-top: 12px;
  }

  /* Docket Builder */
  .mock-docket-entry {
    display: grid; grid-template-columns: 32px 70px 1fr auto;
    gap: 10px; align-items: center;
    padding: 7px 0; font-family: var(--font-mono); font-size: 10px;
    border-bottom: 1px solid var(--bg);
  }
  .mock-docket-entry:last-child { border-bottom: none; }
  .mock-docket-num {
    font-weight: 600; color: var(--text);
  }
  .mock-docket-date { color: var(--text-muted); }

  /* Economic Dashboard */
  .mock-econ-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin-bottom: 12px;
  }
  .mock-econ-cell {
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 10px;
  }
  .mock-econ-ticker {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); letter-spacing: 0.5px; font-weight: 600;
  }
  .mock-econ-val {
    font-family: var(--font-heading); font-size: 16px;
    font-weight: 600; line-height: 1; margin-top: 4px;
  }
  .mock-econ-delta {
    font-family: var(--font-mono); font-size: 8px;
    margin-top: 2px; font-weight: 600;
  }
  .mock-line {
    height: 50px; width: 100%;
    border-radius: var(--radius-sm); padding: 6px;
    background: var(--bg);
  }

  /* White Label */
  .mock-wl {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    align-items: stretch;
  }
  .mock-wl-side {
    border-radius: var(--radius-sm);
    padding: 14px; min-height: 140px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .mock-wl-light { background: var(--bg-card); border: 1px solid var(--border); }
  .mock-wl-dark { background: #1a1a2e; }
  .mock-wl-logo {
    font-family: var(--font-heading); font-style: italic;
    font-size: 14px; font-weight: 600;
  }
  .mock-wl-line {
    height: 4px; border-radius: 2px;
  }

  /* River Note */
  .mock-note {
    padding: 4px 0;
  }
  .mock-note-title {
    font-family: var(--font-heading); font-style: italic;
    font-size: 14px; font-weight: 600;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .mock-note-line {
    font-size: 11px; color: var(--text); margin-bottom: 6px;
    padding-left: 12px; position: relative;
  }
  .mock-note-line::before {
    content: '›'; position: absolute; left: 0; color: var(--text-muted);
  }
  .mock-note-tag {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--river); font-weight: 600;
    letter-spacing: 0.3px; margin-top: 2px;
    padding-left: 12px; display: block; position: relative;
  }
  .mock-note-tag::before {
    content: '⚑'; position: absolute; left: 0;
  }

  /* Social Agent — chat with persona switcher */
  .mock-agent-personas {
    display: flex; gap: 8px; margin-bottom: 12px;
  }
  .mock-persona {
    flex: 1; padding: 10px 8px;
    border-radius: var(--radius-sm);
    text-align: center;
    font-family: var(--font-mono); font-size: 9px;
    font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--border);
  }
  .mock-persona.active {
    background: var(--mauve); color: var(--bg-card);
    border-color: var(--mauve);
  }

  /* Reminders — timeline */
  .mock-timeline {
    position: relative; padding: 16px 0;
  }
  .mock-timeline::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px; background: var(--border);
  }
  .mock-timeline-row {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: relative;
  }
  .mock-tl-item {
    text-align: center; position: relative;
  }
  .mock-tl-dot {
    width: 12px; height: 12px; border-radius: 50%;
    margin: 0 auto;
    background: var(--bg-card); border: 2px solid var(--border);
  }
  .mock-tl-dot.done { background: var(--sage); border-color: var(--sage); }
  .mock-tl-dot.now { background: var(--text); border-color: var(--text); width: 14px; height: 14px; }
  .mock-tl-dot.warn { background: var(--sand); border-color: var(--sand); }
  .mock-tl-dot.danger { background: var(--error); border-color: var(--error); }
  .mock-tl-label {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); letter-spacing: 0.3px;
    margin-top: 6px; text-transform: uppercase; font-weight: 600;
  }
  .mock-tl-when {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text); font-weight: 600;
    margin-bottom: 6px;
  }

  /* Bend — Gantt timeline */
  .mock-bend-tabs {
    display: flex; gap: 4px;
    margin-bottom: 12px;
  }
  .mock-bend-tab {
    font-family: var(--font-body); font-size: 10px;
    font-weight: 500; color: var(--text-muted);
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    letter-spacing: 0.2px;
  }
  .mock-bend-tab.active {
    background: var(--river); color: var(--bg-card);
    border-color: var(--river); font-weight: 600;
  }
  .mock-bend-panels {
    position: relative;
    min-height: 230px;
  }
  .mock-bend-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .mock-bend-panel.active-default {
    opacity: 1;
  }

  /* Bend Todos panel */
  .mock-bend-todo {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 6px;
    background: var(--bg);
  }
  .mock-bend-todo.high { border-left-color: var(--sand); }
  .mock-bend-todo.medium { border-left-color: var(--river); }
  .mock-bend-todo.critical { border-left-color: var(--error); }
  .mock-bend-todo-check {
    width: 12px; height: 12px;
    border: 1.5px solid var(--text-muted);
    border-radius: 3px;
    margin-top: 1px;
  }
  .mock-bend-todo-body {
    min-width: 0;
  }
  .mock-bend-todo-title {
    font-family: var(--font-body); font-size: 11px;
    font-weight: 600; color: var(--text);
    line-height: 1.3; margin-bottom: 4px;
  }
  .mock-bend-todo-meta {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted);
  }
  .mock-bend-todo-pri {
    font-family: var(--font-mono); font-size: 8px;
    padding: 1px 6px; border-radius: 2px;
    font-weight: 700; letter-spacing: 0.4px;
    text-transform: lowercase;
  }
  .mock-bend-todo-pri.high { background: var(--badge-pending-bg); color: var(--sand); }
  .mock-bend-todo-pri.medium { background: var(--badge-river-bg); color: var(--river); }
  .mock-bend-todo-pri.critical { background: var(--badge-error-bg); color: var(--error); }
  .mock-bend-todo-comments {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); white-space: nowrap;
  }

  /* Bend Team panel */
  .mock-bend-team {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .mock-bend-member {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--bg);
  }
  .mock-bend-member.overloaded { border-left-color: var(--error); }
  .mock-bend-member.high { border-left-color: var(--sand); }
  .mock-bend-member.ontrack { border-left-color: var(--sage); }
  .mock-bend-member-head {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 6px; margin-bottom: 6px;
  }
  .mock-bend-member-name {
    font-family: var(--font-body); font-size: 10px;
    font-weight: 700; color: var(--text);
    display: flex; align-items: center; gap: 4px;
  }
  .mock-bend-member-role {
    font-family: var(--font-mono); font-size: 7px;
    color: var(--text-muted); letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .mock-bend-member-count {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted);
  }
  .mock-bend-load-bar {
    height: 3px; border-radius: 2px;
    background: var(--bg-dark);
    overflow: hidden; margin-bottom: 4px;
  }
  .mock-bend-load-fill {
    height: 100%; border-radius: 2px;
  }
  .mock-bend-load-fill.overloaded { background: var(--error); }
  .mock-bend-load-fill.high { background: var(--sand); }
  .mock-bend-load-fill.ontrack { background: var(--sage); }
  .mock-bend-load-stat {
    font-family: var(--font-mono); font-size: 7px;
    color: var(--text-muted);
  }
  .mock-bend-axis {
    display: grid; grid-template-columns: 130px 1fr;
    font-family: var(--font-mono); font-size: 8px;
    color: var(--text-muted); letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .mock-bend-axis-months {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 0; padding-left: 4px;
  }
  .mock-bend-phase {
    margin-bottom: 12px;
  }
  .mock-bend-phase-label {
    font-family: var(--font-heading); font-size: 12px;
    font-weight: 600; color: var(--text);
    padding: 4px 0; border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .mock-bend-task {
    display: grid; grid-template-columns: 130px 1fr;
    align-items: center; gap: 8px;
    padding: 3px 0; min-height: 22px;
  }
  .mock-bend-task-name {
    font-family: var(--font-body); font-size: 10px;
    color: var(--text); display: flex; align-items: center;
    gap: 4px; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
  }
  .mock-bend-status {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  }
  .mock-bend-status.done { background: var(--sage); }
  .mock-bend-status.active { background: var(--river); }
  .mock-bend-status.late { background: var(--error); }
  .mock-bend-status.idle { background: var(--text-muted); }
  .mock-bend-co {
    font-family: var(--font-mono); font-size: 7px;
    background: var(--badge-error-bg); color: var(--error);
    padding: 1px 4px; border-radius: 2px;
    font-weight: 700; letter-spacing: 0.3px; flex-shrink: 0;
  }
  .mock-bend-avatar {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text); color: var(--bg-card);
    font-family: var(--font-mono); font-size: 7px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; letter-spacing: 0.2px;
  }
  .mock-bend-track {
    position: relative; height: 14px;
  }
  .mock-bend-today-line {
    position: absolute; top: -2px; bottom: -2px;
    width: 1px; background: var(--error); opacity: 0.4;
    z-index: 2;
  }
  .mock-bend-bar {
    position: absolute; top: 3px; height: 8px;
    border-radius: 4px;
    transform-origin: left;
    transform: scaleX(0);
  }
  .mock-bend-bar.done { background: var(--sage); }
  .mock-bend-bar.active {
    background: var(--badge-error-bg);
    border: 1px solid var(--error);
  }
  .mock-bend-bar.active::after {
    content: ''; position: absolute;
    left: 0; top: -1px; bottom: -1px;
    width: 55%; border-radius: 4px;
    background: var(--error); opacity: 0.85;
  }
  .mock-bend-bar.idle {
    background: var(--bg);
    border: 1px solid var(--border);
  }

  /* Notice Campaign Manager — Reach Calculator */
  .mock-ncm-tabs {
    display: flex; gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 14px;
    overflow-x: auto;
  }
  .mock-ncm-tabs::-webkit-scrollbar { display: none; }
  .mock-ncm-tab {
    font-family: var(--font-body); font-size: 10px;
    color: var(--text-muted); font-weight: 500;
    padding: 5px 10px; border-radius: 5px;
    white-space: nowrap; flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .mock-ncm-tab.active {
    background: var(--sage); color: var(--bg-card);
    font-weight: 600;
  }
  .mock-ncm-tab-icon {
    width: 11px; height: 11px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .mock-ncm-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-bottom: 12px;
  }
  .mock-ncm-kpi {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
  }
  .mock-ncm-kpi-label {
    font-family: var(--font-mono); font-size: 7px;
    color: var(--text-muted); letter-spacing: 0.5px;
    text-transform: uppercase; font-weight: 600;
    margin-bottom: 3px;
  }
  .mock-ncm-kpi-val {
    font-family: var(--font-heading); font-size: 18px;
    font-weight: 600; color: var(--sage);
    line-height: 1; letter-spacing: -0.02em;
  }
  .mock-ncm-kpi-val.muted { color: var(--text); }
  .mock-ncm-kpi-sub {
    font-family: var(--font-mono); font-size: 7px;
    color: var(--text-muted); margin-top: 4px;
  }
  .mock-ncm-waterfall-title {
    font-family: var(--font-heading); font-size: 11px;
    font-weight: 600; color: var(--text);
    margin-bottom: 6px;
  }
  .mock-ncm-channel {
    display: grid; grid-template-columns: 80px 1fr 60px;
    align-items: center; gap: 8px;
    padding: 4px 0;
  }
  .mock-ncm-channel-name {
    font-family: var(--font-body); font-size: 9px;
    color: var(--text); font-weight: 500;
  }
  .mock-ncm-channel-bar {
    height: 8px; background: var(--bg); border-radius: 2px;
    overflow: hidden;
  }
  .mock-ncm-channel-fill {
    height: 100%; border-radius: 2px;
    transform-origin: left;
    transform: scaleX(0);
  }
  .mock-ncm-channel-delta {
    font-family: var(--font-mono); font-size: 8px;
    color: var(--sage); font-weight: 700;
    text-align: right; letter-spacing: 0.3px;
  }

  /* ---------- POWERED BY RIVER ---------- */
  .flywheel {
    background: var(--flywheel-bg); color: var(--flywheel-text);
    padding: 80px 40px; margin-top: 40px;
    transition: background 0.3s;
  }
  .flywheel-inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 80px; align-items: center;
  }
  .flywheel-eyebrow {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--gold); letter-spacing: 1px;
    text-transform: uppercase; font-weight: 600; margin-bottom: 14px;
  }
  .flywheel h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 600; line-height: 1.1;
    letter-spacing: -0.015em; margin-bottom: 20px;
  }
  .flywheel h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
  .flywheel-body {
    font-size: 14px; line-height: 1.7;
    color: var(--flywheel-text-muted); margin-bottom: 28px;
  }
  .flywheel-body strong { color: var(--flywheel-text); font-weight: 600; }
  .flywheel-list {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px; list-style: none;
  }
  .flywheel-list li {
    font-family: var(--font-mono); font-size: 11px;
    color: rgba(250, 248, 244, 0.85);
    padding-left: 16px; position: relative; letter-spacing: 0.3px;
  }
  .flywheel-list li::before {
    content: '›'; position: absolute; left: 0;
    color: var(--gold); font-weight: 600;
  }
  .flywheel-svg-wrap { display: flex; justify-content: center; align-items: center; }

  /* ---------- DIFFERENTIATION ---------- */
  .diff {
    max-width: 1280px; margin: 0 auto;
    padding: 80px 40px 40px;
    display: grid; grid-template-columns: 1fr 2fr;
    gap: 60px; align-items: start;
  }
  .diff h2 {
    font-family: var(--font-heading);
    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 600; line-height: 1.1;
    letter-spacing: -0.015em; color: var(--text);
  }
  .diff h2 em { font-style: italic; color: var(--river); font-weight: 400; }
  .diff-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  }
  .diff-item {
    background: var(--bg-card); border-radius: var(--radius-lg); padding: 22px;
  }
  .diff-num {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--sand); letter-spacing: 1px;
    font-weight: 600; margin-bottom: 10px;
  }
  .diff-label {
    font-family: var(--font-heading); font-size: 22px;
    font-weight: 600; margin-bottom: 10px; color: var(--text);
  }
  .diff-desc { font-size: 13px; line-height: 1.6; color: var(--text-muted); }

  /* ---------- DEMO BANNER ---------- */
  .demo-banner { border-top: 1px solid var(--border); background: var(--bg-card); }
  .demo-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 56px 40px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 40px; flex-wrap: wrap;
  }
  .demo-inner h3 {
    font-family: var(--font-heading);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 600; line-height: 1.2;
    letter-spacing: -0.01em; max-width: 700px;
  }
  .demo-inner h3 em { font-style: italic; font-weight: 400; color: var(--river); }

  /* ---------- SIGN UP ---------- */
  .signup {
    max-width: 1280px; margin: 0 auto;
    padding: 80px 40px;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: center;
  }
  .signup-left h2 {
    font-family: var(--font-heading);
    font-size: clamp(36px, 4vw, 50px);
    font-weight: 600; line-height: 1.08;
    letter-spacing: -0.02em; margin-bottom: 22px; color: var(--text);
  }
  .signup-left h2 em { font-style: italic; font-weight: 400; color: var(--river); }
  .signup-left p {
    font-size: 15px; color: var(--text-muted); line-height: 1.6;
    margin-bottom: 24px; max-width: 460px;
  }
  .signup-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .signup-bullets li {
    font-size: 13px; color: var(--text-muted);
    padding-left: 22px; position: relative;
  }
  .signup-bullets li::before {
    content: '•'; position: absolute; left: 4px; top: 0;
    color: var(--text); font-size: 16px; line-height: 1.5;
  }
  .signup-card {
    background: var(--bg-card); border-radius: var(--radius-lg); padding: 32px;
  }
  .signup-card-tag {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-muted); letter-spacing: 1px;
    text-transform: uppercase; font-weight: 600; margin-bottom: 10px;
  }
  .signup-card h3 {
    font-family: var(--font-heading); font-size: 24px;
    font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em;
  }
  .signup-card > p { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
  .form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
  .form-field label {
    font-family: var(--font-mono); font-size: 9px;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-muted); font-weight: 600;
  }
  .input {
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 12px;
    font-family: var(--font-body); font-size: 13px; color: var(--text);
    outline: none; transition: border-color 0.2s; width: 100%;
  }
  .input:focus { border-color: var(--mauve); }
  .signup-btn {
    width: 100%; padding: 12px;
    background: var(--text); color: var(--bg-card);
    border: none; border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
    cursor: pointer; margin-top: 6px; transition: background 0.2s;
  }
  .signup-btn:hover { background: #1a1a1a; }
  .signup-fine {
    font-family: var(--font-mono); font-size: 9px;
    color: var(--text-muted); text-align: center;
    margin-top: 12px; letter-spacing: 0.5px;
  }

  /* ---------- FOOTER ---------- */
  footer { border-top: 1px solid var(--border); padding: 32px 40px; }
  .footer-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--text-muted); letter-spacing: 0.5px;
  }
  .footer-inner a { color: var(--text-muted); text-decoration: none; margin-left: 24px; }
  .footer-inner a:hover { color: var(--text); }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 1000px) {
    .statement-hero { padding: 48px 24px 60px; }
    .nav-inner, .section-head, .products-stack, .signup, .footer-inner, .flywheel-inner, .flywheel, .diff, .demo-inner { padding-left: 24px; padding-right: 24px; }
    .signup, .flywheel-inner, .diff { grid-template-columns: 1fr; gap: 40px; }
    .diff-grid { grid-template-columns: 1fr; gap: 14px; }
    .nav-links { gap: 12px; }
    .nav-links a:not(.btn-primary) { display: none; }
    .product-row, .product-row.reverse {
      grid-template-columns: 1fr;
    }
    .product-row.reverse .product-info { order: 1; }
    .product-row.reverse .product-mock { order: 2; }
    .product-mock { padding: 0 24px 24px; }
    .product-info { padding: 28px 28px 16px; }
  }
  @media (max-width: 600px) {
    .flywheel-list { grid-template-columns: 1fr; }
    .mock-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .statement > * { animation: fadeUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .flywheel-rotating { animation: spin 60s linear infinite; transform-origin: center; }

  /* Flywheel connection-line animation:
     - Line draws in over 0.5s when .active is added
     - Line stays drawn while held
     - Line fades out over 0.5s when .active is removed (via opacity transition)
     The JS scheduler adds/removes .active classes on random lines. */
  .fw-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0;
    transition: opacity 0.5s ease, stroke-dashoffset 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: drop-shadow(0 0 3px currentColor);
  }
  .fw-line.active {
    stroke-dashoffset: 0;
    opacity: 0.85;
  }

  /* ==================================================
     APP-SPECIFIC ANIMATIONS (trigger on scroll-in via .is-visible)
     ================================================== */

  /* When a product row is in view, .is-visible is added by JS */
  .product-row .anim-target { opacity: 0; }

  /* ─── ClaimFlow: tab cycle + KPI count-up ─── */
  @keyframes cf-tab-1 {
    0%, 23% { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
    25%, 100% { color: var(--text-muted); border-bottom-color: transparent; font-weight: 400; }
  }
  @keyframes cf-tab-2 {
    0%, 24% { color: var(--text-muted); border-bottom-color: transparent; font-weight: 400; }
    27%, 48% { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
    50%, 100% { color: var(--text-muted); border-bottom-color: transparent; font-weight: 400; }
  }
  @keyframes cf-tab-3 {
    0%, 49% { color: var(--text-muted); border-bottom-color: transparent; font-weight: 400; }
    52%, 73% { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
    75%, 100% { color: var(--text-muted); border-bottom-color: transparent; font-weight: 400; }
  }
  @keyframes cf-tab-4 {
    0%, 74% { color: var(--text-muted); border-bottom-color: transparent; font-weight: 400; }
    77%, 100% { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
  }
  @keyframes cf-kpi-tick {
    0% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
  }
  .product-row.is-visible .anim-cf-tab-1 { animation: cf-tab-1 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-tab-2 { animation: cf-tab-2 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-tab-3 { animation: cf-tab-3 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-tab-4 { animation: cf-tab-4 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-kpi { animation: cf-kpi-tick 3s ease-in-out infinite; display: inline-block; }

  /* ClaimFlow panel switcher — 4 panels overlaid, each shown during its tab phase */
  .mock-cf-panels {
    position: relative;
    min-height: 145px;
  }
  .mock-cf-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  /* Panel 1 (Overview): visible 0–25% */
  @keyframes cf-panel-1 {
    0%, 23%   { opacity: 1; transform: translateY(0); }
    25%, 100% { opacity: 0; transform: translateY(4px); }
  }
  /* Panel 2 (Pipeline): visible 27–48% */
  @keyframes cf-panel-2 {
    0%, 24%   { opacity: 0; transform: translateY(-4px); }
    27%, 48%  { opacity: 1; transform: translateY(0); }
    50%, 100% { opacity: 0; transform: translateY(4px); }
  }
  /* Panel 3 (Liens): visible 52–73% */
  @keyframes cf-panel-3 {
    0%, 49%   { opacity: 0; transform: translateY(-4px); }
    52%, 73%  { opacity: 1; transform: translateY(0); }
    75%, 100% { opacity: 0; transform: translateY(4px); }
  }
  /* Panel 4 (Distribution): visible 77–100% */
  @keyframes cf-panel-4 {
    0%, 74%   { opacity: 0; transform: translateY(-4px); }
    77%, 100% { opacity: 1; transform: translateY(0); }
  }
  .product-row.is-visible .anim-cf-panel-1 { animation: cf-panel-1 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-panel-2 { animation: cf-panel-2 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-panel-3 { animation: cf-panel-3 7s ease-in-out infinite; }
  .product-row.is-visible .anim-cf-panel-4 { animation: cf-panel-4 7s ease-in-out infinite; }

  /* Pipeline panel — stage rows */
  .mock-cf-stage {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-family: var(--font-mono);
    font-size: 10px;
  }
  .mock-cf-stage-label {
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .mock-cf-stage-bar {
    height: 8px;
    background: var(--bg);
    border-radius: 2px;
    overflow: hidden;
  }
  .mock-cf-stage-fill {
    height: 100%;
    border-radius: 2px;
    opacity: 0.7;
  }
  .mock-cf-stage-num {
    color: var(--text-muted);
    text-align: right;
    font-weight: 600;
  }

  /* ─── Docket Monitor: alerts appear sequentially in 9s loop ─── */
  /* alert-1 in at 0s, alert-2 in at 1.5s, alert-3 in at 3.0s, all reset at 9s */
  @keyframes dm-alert-1 {
    0%, 5%   { opacity: 0; transform: translateY(-10px); }
    10%, 95% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(-10px); }
  }
  @keyframes dm-alert-2 {
    0%, 22%  { opacity: 0; transform: translateY(-10px); }
    27%, 95% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(-10px); }
  }
  @keyframes dm-alert-3 {
    0%, 39%  { opacity: 0; transform: translateY(-10px); }
    44%, 95% { opacity: 1; transform: translateY(0); }
    100%     { opacity: 0; transform: translateY(-10px); }
  }
  .product-row.is-visible .anim-dm-alert-1 {
    animation: dm-alert-1 9s ease-in-out infinite;
  }
  .product-row.is-visible .anim-dm-alert-2 {
    animation: dm-alert-2 9s ease-in-out infinite;
  }
  .product-row.is-visible .anim-dm-alert-3 {
    animation: dm-alert-3 9s ease-in-out infinite;
  }

  /* ─── Risk Assessor: histogram builds left to right ─── */
  @keyframes ra-bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
  @keyframes ra-cell-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .product-row.is-visible .mock-histogram > span {
    transform-origin: bottom;
    animation: ra-bar-grow 0.4s ease-out both;
  }
  .product-row.is-visible .mock-histogram > span:nth-child(1) { animation-delay: 0.1s; }
  .product-row.is-visible .mock-histogram > span:nth-child(2) { animation-delay: 0.18s; }
  .product-row.is-visible .mock-histogram > span:nth-child(3) { animation-delay: 0.26s; }
  .product-row.is-visible .mock-histogram > span:nth-child(4) { animation-delay: 0.34s; }
  .product-row.is-visible .mock-histogram > span:nth-child(5) { animation-delay: 0.42s; }
  .product-row.is-visible .mock-histogram > span:nth-child(6) { animation-delay: 0.5s; }
  .product-row.is-visible .mock-histogram > span:nth-child(7) { animation-delay: 0.58s; }
  .product-row.is-visible .mock-histogram > span:nth-child(8) { animation-delay: 0.66s; }
  .product-row.is-visible .mock-histogram > span:nth-child(9) { animation-delay: 0.74s; }
  .product-row.is-visible .mock-histogram > span:nth-child(10) { animation-delay: 0.82s; }
  .product-row.is-visible .mock-histogram > span:nth-child(11) { animation-delay: 0.9s; }
  .product-row.is-visible .mock-histogram > span:nth-child(12) { animation-delay: 0.98s; }
  .product-row.is-visible .mock-histogram > span:nth-child(13) { animation-delay: 1.06s; }
  .product-row.is-visible .mock-histogram > span:nth-child(14) { animation-delay: 1.14s; }
  .product-row.is-visible .mock-histogram > span:nth-child(15) { animation-delay: 1.22s; }
  .product-row.is-visible .mock-histogram > span:nth-child(16) { animation-delay: 1.3s; }
  .product-row.is-visible .mock-histogram > span:nth-child(17) { animation-delay: 1.38s; }
  .product-row.is-visible .mock-histogram > span:nth-child(18) { animation-delay: 1.46s; }

  .product-row.is-visible .mock-heatmap > div {
    opacity: 0;
    animation: ra-cell-in 0.3s ease-out both;
  }
  .product-row.is-visible .mock-heatmap > div:nth-child(1) { animation-delay: 1.6s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(2) { animation-delay: 1.66s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(3) { animation-delay: 1.72s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(4) { animation-delay: 1.78s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(5) { animation-delay: 1.84s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(6) { animation-delay: 1.9s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(7) { animation-delay: 1.96s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(8) { animation-delay: 2.02s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(9) { animation-delay: 2.08s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(10) { animation-delay: 2.14s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(11) { animation-delay: 2.2s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(12) { animation-delay: 2.26s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(13) { animation-delay: 2.32s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(14) { animation-delay: 2.38s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(15) { animation-delay: 2.44s; }
  .product-row.is-visible .mock-heatmap > div:nth-child(16) { animation-delay: 2.5s; }

  /* ─── Allo Flow: mind-map connecting bubbles ─── */
  .mock-alloflow-mindmap {
    position: relative;
    height: 230px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .mock-mindnode {
    position: absolute;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 8px;
    text-align: center;
    line-height: 1.3;
    z-index: 2;
    opacity: 0;
    box-sizing: border-box;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
  }
  .mock-mindnode strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    margin-top: 3px;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
  }
  .mock-mindnode.fund { left: 0; top: 88px; width: 90px; }
  .mock-mindnode.tier-1 { left: 175px; top: 12px; width: 130px;
    background: var(--badge-active-bg); border-color: var(--sage); color: var(--sage); }
  .mock-mindnode.tier-2 { left: 175px; top: 88px; width: 130px;
    background: var(--badge-pending-bg); border-color: var(--sand); color: var(--sand); }
  .mock-mindnode.tier-3 { left: 175px; top: 164px; width: 130px;
    background: var(--badge-mauve-bg); border-color: var(--mauve); color: var(--mauve); }
  .mock-mindnode.disburse { right: 0; top: 88px; width: 90px;
    background: var(--text); color: var(--bg); border-color: var(--text); }
  .mock-mindnode.disburse strong { color: var(--bg); }
  .mock-mindmap-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  .mock-mindmap-svg path {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    opacity: 0.6;
  }
  @keyframes node-pop {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes line-draw {
    to { stroke-dashoffset: 0; }
  }
  .product-row.is-visible .mock-mindnode.fund {
    animation: node-pop 0.4s ease-out 0.1s forwards;
  }
  .product-row.is-visible .mock-mindnode.tier-1 {
    animation: node-pop 0.4s ease-out 1.0s forwards;
  }
  .product-row.is-visible .mock-mindnode.tier-2 {
    animation: node-pop 0.4s ease-out 1.3s forwards;
  }
  .product-row.is-visible .mock-mindnode.tier-3 {
    animation: node-pop 0.4s ease-out 1.6s forwards;
  }
  .product-row.is-visible .mock-mindnode.disburse {
    animation: node-pop 0.4s ease-out 2.6s forwards;
  }
  .product-row.is-visible .mock-mindmap-svg path.line-1 {
    animation: line-draw 0.6s ease-out 0.6s forwards;
  }
  .product-row.is-visible .mock-mindmap-svg path.line-2 {
    animation: line-draw 0.6s ease-out 0.9s forwards;
  }
  .product-row.is-visible .mock-mindmap-svg path.line-3 {
    animation: line-draw 0.6s ease-out 1.2s forwards;
  }
  .product-row.is-visible .mock-mindmap-svg path.line-4 {
    animation: line-draw 0.6s ease-out 2.0s forwards;
  }
  .product-row.is-visible .mock-mindmap-svg path.line-5 {
    animation: line-draw 0.6s ease-out 2.2s forwards;
  }
  .product-row.is-visible .mock-mindmap-svg path.line-6 {
    animation: line-draw 0.6s ease-out 2.4s forwards;
  }

  /* ─── Social Track: bars load left to right ─── */
  @keyframes st-bar-grow {
    from { width: 0; }
    to { width: var(--target-width, 100%); }
  }
  .product-row.is-visible .mock-channel-fill {
    width: 0;
    animation: st-bar-grow 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  .product-row.is-visible .mock-channel:nth-child(1) .mock-channel-fill { animation-delay: 0.2s; }
  .product-row.is-visible .mock-channel:nth-child(2) .mock-channel-fill { animation-delay: 0.5s; }
  .product-row.is-visible .mock-channel:nth-child(3) .mock-channel-fill { animation-delay: 0.8s; }
  .product-row.is-visible .mock-channel:nth-child(4) .mock-channel-fill { animation-delay: 1.1s; }

  /* ─── DocReview: passes fill in sequence, then findings drop in ─── */
  @keyframes dr-pass-fill {
    from { background: var(--bg); color: var(--text-muted); }
    to { background: var(--text); color: var(--bg-card); }
  }
  @keyframes dr-pass-active {
    from { background: var(--bg); color: var(--text-muted); }
    to { background: var(--river); color: var(--bg-card); }
  }
  .product-row.is-visible .anim-dr-pass-1 {
    animation: dr-pass-fill 0.3s ease-out 0.2s forwards;
  }
  .product-row.is-visible .anim-dr-pass-2 {
    animation: dr-pass-fill 0.3s ease-out 0.6s forwards;
  }
  .product-row.is-visible .anim-dr-pass-3 {
    animation: dr-pass-fill 0.3s ease-out 1.0s forwards;
  }
  .product-row.is-visible .anim-dr-pass-4 {
    animation: dr-pass-active 0.3s ease-out 1.4s forwards;
  }
  @keyframes dr-finding-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .product-row.is-visible .anim-dr-finding-1 {
    opacity: 1;
    animation: dr-finding-in 0.4s ease-out 1.8s both;
  }
  .product-row.is-visible .anim-dr-finding-2 {
    opacity: 1;
    animation: dr-finding-in 0.4s ease-out 2.2s both;
  }
  .product-row.is-visible .anim-dr-finding-3 {
    opacity: 1;
    animation: dr-finding-in 0.4s ease-out 2.6s both;
  }

  /* ─── River Chat: messages appear in sequence ─── */
  @keyframes rc-msg-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes rc-typing {
    0%, 30% { width: 0; }
    50%, 100% { width: 100%; }
  }
  .product-row.is-visible .anim-rc-msg-1 {
    opacity: 1;
    animation: rc-msg-in 0.4s ease-out 0.3s both;
  }
  .product-row.is-visible .anim-rc-msg-2 {
    opacity: 1;
    animation: rc-msg-in 0.5s ease-out 1.6s both;
  }
  .product-row.is-visible .anim-rc-msg-3 {
    opacity: 1;
    animation: rc-msg-in 0.4s ease-out 3.6s both;
  }
  @keyframes rc-cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  .product-row.is-visible .anim-rc-input::after {
    content: '|';
    margin-left: 2px;
    animation: rc-cursor-blink 1s steps(1) infinite;
    color: var(--text-muted);
  }

  /* ─── Docket Builder: entries appear one by one ─── */
  .product-row.is-visible .anim-db-entry-1 {
    opacity: 1;
    animation: dm-alert-fade 0.4s ease-out 0.2s both;
  }
  .product-row.is-visible .anim-db-entry-2 {
    opacity: 1;
    animation: dm-alert-fade 0.4s ease-out 0.7s both;
  }
  .product-row.is-visible .anim-db-entry-3 {
    opacity: 1;
    animation: dm-alert-fade 0.4s ease-out 1.2s both;
  }
  .product-row.is-visible .anim-db-entry-4 {
    opacity: 1;
    animation: dm-alert-fade 0.4s ease-out 1.7s both;
  }
  .product-row.is-visible .anim-db-cursor::after {
    content: '|';
    margin-left: 2px;
    animation: rc-cursor-blink 1s steps(1) infinite;
    animation-delay: 2.2s;
    animation-fill-mode: both;
    color: var(--text-muted);
  }

  /* ─── Economic Dashboard: lines draw left to right ─── */
  @keyframes ed-line-draw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes ed-tick-flash {
    0%, 90% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  .product-row.is-visible .anim-ed-line {
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
    animation: ed-line-draw 1.4s ease-out forwards;
  }
  .product-row.is-visible .anim-ed-line-1 { animation-delay: 0.3s; }
  .product-row.is-visible .anim-ed-line-2 { animation-delay: 0.6s; }
  .product-row.is-visible .anim-ed-line-3 { animation-delay: 0.9s; }
  .product-row.is-visible .anim-ed-tick { animation: ed-tick-flash 4s ease-in-out infinite; display: inline-block; }

  /* ─── Bend: Gantt bars draw left-to-right per phase ─── */
  @keyframes bend-bar-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  /* Tab cycle (12s loop): Timeline 0-32%, Todos 35-65%, Team 68-100% */
  @keyframes bend-tab-1 {
    0%, 32%  { background: var(--river); color: var(--bg-card); border-color: var(--river); font-weight: 600; }
    35%, 100% { background: var(--bg); color: var(--text-muted); border-color: var(--border); font-weight: 500; }
  }
  @keyframes bend-tab-2 {
    0%, 33%  { background: var(--bg); color: var(--text-muted); border-color: var(--border); font-weight: 500; }
    35%, 65% { background: var(--river); color: var(--bg-card); border-color: var(--river); font-weight: 600; }
    68%, 100% { background: var(--bg); color: var(--text-muted); border-color: var(--border); font-weight: 500; }
  }
  @keyframes bend-tab-3 {
    0%, 66%  { background: var(--bg); color: var(--text-muted); border-color: var(--border); font-weight: 500; }
    68%, 100% { background: var(--river); color: var(--bg-card); border-color: var(--river); font-weight: 600; }
  }
  /* Panel cycle (12s loop) */
  @keyframes bend-panel-1 {
    0%, 30%  { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(4px); }
  }
  @keyframes bend-panel-2 {
    0%, 32%  { opacity: 0; transform: translateY(-4px); }
    35%, 64% { opacity: 1; transform: translateY(0); }
    67%, 100% { opacity: 0; transform: translateY(4px); }
  }
  @keyframes bend-panel-3 {
    0%, 65%  { opacity: 0; transform: translateY(-4px); }
    68%, 100% { opacity: 1; transform: translateY(0); }
  }
  .product-row.is-visible .anim-bend-tab-1 { animation: bend-tab-1 12s ease-in-out infinite; }
  .product-row.is-visible .anim-bend-tab-2 { animation: bend-tab-2 12s ease-in-out infinite; }
  .product-row.is-visible .anim-bend-tab-3 { animation: bend-tab-3 12s ease-in-out infinite; }
  .product-row.is-visible .anim-bend-panel-1 { animation: bend-panel-1 12s ease-in-out infinite; }
  .product-row.is-visible .anim-bend-panel-2 { animation: bend-panel-2 12s ease-in-out infinite; }
  .product-row.is-visible .anim-bend-panel-3 { animation: bend-panel-3 12s ease-in-out infinite; }

  .product-row.is-visible .mock-bend-bar {
    animation: bend-bar-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  .product-row.is-visible .mock-bend-phase:nth-of-type(1) .mock-bend-task:nth-child(2) .mock-bend-bar { animation-delay: 0.15s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(1) .mock-bend-task:nth-child(3) .mock-bend-bar { animation-delay: 0.30s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(1) .mock-bend-task:nth-child(4) .mock-bend-bar { animation-delay: 0.45s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(2) .mock-bend-task:nth-child(2) .mock-bend-bar { animation-delay: 0.85s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(2) .mock-bend-task:nth-child(3) .mock-bend-bar { animation-delay: 1.00s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(2) .mock-bend-task:nth-child(4) .mock-bend-bar { animation-delay: 1.15s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(3) .mock-bend-task:nth-child(2) .mock-bend-bar { animation-delay: 1.55s; }
  .product-row.is-visible .mock-bend-phase:nth-of-type(3) .mock-bend-task:nth-child(3) .mock-bend-bar { animation-delay: 1.70s; }

  /* ─── Notice Campaign Manager: tab cycle + KPI fade-in + waterfall bars build ─── */
  @keyframes ncm-bar-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes ncm-kpi-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Tab cycle (12s loop): Class Profile 0-32%, Media Plan 35-65%, Reach 68-100% */
  @keyframes ncm-tab-cycle-1 {
    0%, 32%  { background: var(--sage); color: var(--bg-card); font-weight: 600; }
    35%, 100% { background: transparent; color: var(--text-muted); font-weight: 500; }
  }
  @keyframes ncm-tab-cycle-2 {
    0%, 33%  { background: transparent; color: var(--text-muted); font-weight: 500; }
    35%, 65% { background: var(--sage); color: var(--bg-card); font-weight: 600; }
    68%, 100% { background: transparent; color: var(--text-muted); font-weight: 500; }
  }
  @keyframes ncm-tab-cycle-3 {
    0%, 66%  { background: transparent; color: var(--text-muted); font-weight: 500; }
    68%, 100% { background: var(--sage); color: var(--bg-card); font-weight: 600; }
  }
  /* Panel cycle (matched to tabs) */
  @keyframes ncm-panel-1 {
    0%, 30%  { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(4px); }
  }
  @keyframes ncm-panel-2 {
    0%, 32%  { opacity: 0; transform: translateY(-4px); }
    35%, 64% { opacity: 1; transform: translateY(0); }
    67%, 100% { opacity: 0; transform: translateY(4px); }
  }
  @keyframes ncm-panel-3 {
    0%, 65%  { opacity: 0; transform: translateY(-4px); }
    68%, 100% { opacity: 1; transform: translateY(0); }
  }
  .product-row.is-visible .anim-ncm-tab-1 { animation: ncm-tab-cycle-1 12s ease-in-out infinite; }
  .product-row.is-visible .anim-ncm-tab-2 { animation: ncm-tab-cycle-2 12s ease-in-out infinite; }
  .product-row.is-visible .anim-ncm-tab-3 { animation: ncm-tab-cycle-3 12s ease-in-out infinite; }

  .mock-ncm-panels {
    position: relative;
    min-height: 360px;
  }
  .mock-ncm-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .product-row.is-visible .anim-ncm-panel-1 { animation: ncm-panel-1 12s ease-in-out infinite; }
  .product-row.is-visible .anim-ncm-panel-2 { animation: ncm-panel-2 12s ease-in-out infinite; }
  .product-row.is-visible .anim-ncm-panel-3 { animation: ncm-panel-3 12s ease-in-out infinite; }

  /* NCM Class Profile panel */
  .mock-ncm-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--bg);
  }
  .mock-ncm-card-title {
    font-family: var(--font-heading); font-size: 12px;
    font-weight: 600; color: var(--text);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 6px;
  }
  .mock-ncm-card-sub {
    font-family: var(--font-body); font-size: 10px;
    color: var(--text-muted); line-height: 1.4;
    margin-bottom: 10px;
  }
  .mock-ncm-textarea {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--bg-card);
    font-family: var(--font-body); font-size: 10px;
    color: var(--text-muted); font-style: italic;
    line-height: 1.4; min-height: 56px;
    margin-bottom: 10px;
  }
  .mock-ncm-fields {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 12px;
  }
  .mock-ncm-field-label {
    font-family: var(--font-body); font-size: 9px;
    font-weight: 600; color: var(--text);
    margin-bottom: 4px;
  }
  .mock-ncm-select {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--bg-card);
    font-family: var(--font-body); font-size: 9px;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: space-between;
  }
  .mock-ncm-btn {
    background: var(--sage); color: var(--bg-card);
    border-radius: 6px;
    padding: 7px 14px;
    font-family: var(--font-body); font-size: 10px;
    font-weight: 600; letter-spacing: 0.2px;
    display: inline-flex; align-items: center; gap: 6px;
    opacity: 0.55;
  }

  /* NCM Media Plan panel */
  .mock-ncm-budget-row {
    display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px;
    margin-bottom: 10px;
  }
  .mock-ncm-budget-cell {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    background: var(--bg);
  }
  .mock-ncm-budget-label {
    font-family: var(--font-body); font-size: 8px;
    font-weight: 600; color: var(--text);
    margin-bottom: 3px;
    display: flex; align-items: center; gap: 4px;
  }
  .mock-ncm-budget-val {
    font-family: var(--font-heading); font-size: 16px;
    font-weight: 600; color: var(--text);
    line-height: 1; letter-spacing: -0.02em;
  }
  .mock-ncm-budget-sub {
    font-family: var(--font-mono); font-size: 7px;
    color: var(--text-muted); margin-top: 3px;
  }
  .mock-ncm-allocation-bar {
    height: 4px; background: var(--bg-dark);
    border-radius: 2px; overflow: hidden;
    margin: 8px 0 12px;
  }
  .mock-ncm-allocation-fill {
    height: 100%; background: var(--sage);
    border-radius: 2px;
  }
  .mock-ncm-channel-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 9px 11px;
    background: var(--bg);
    margin-bottom: 6px;
  }
  .mock-ncm-channel-card-head {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .mock-ncm-channel-card-name {
    font-family: var(--font-body); font-size: 10px;
    font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 6px;
  }
  .mock-ncm-channel-card-tag {
    font-family: var(--font-mono); font-size: 7px;
    background: var(--bg-card); color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 1px 5px; border-radius: 2px;
    letter-spacing: 0.3px;
  }
  .mock-ncm-channel-card-budget {
    font-family: var(--font-heading); font-size: 13px;
    font-weight: 600; color: var(--text);
  }
  .mock-ncm-channel-card-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; font-family: var(--font-mono);
    font-size: 7px; color: var(--text-muted);
    letter-spacing: 0.3px;
  }
  .mock-ncm-channel-card-stat strong {
    display: block; color: var(--text);
    font-size: 10px; font-weight: 600;
    margin-top: 1px; letter-spacing: 0;
  }
  .mock-ncm-channel-slider {
    height: 3px; background: var(--bg-dark);
    border-radius: 2px; margin: 6px 0;
    position: relative;
  }
  .mock-ncm-channel-slider-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--sage); border-radius: 2px;
  }
  .mock-ncm-channel-slider-thumb {
    position: absolute; top: -3px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--bg-card);
    border: 1.5px solid var(--sage);
  }

  .product-row.is-visible .mock-ncm-kpi {
    opacity: 0;
    animation: ncm-kpi-fade 12s ease-in-out infinite;
  }
  /* KPIs fade in starting at 68% of the 12s loop = 8.16s, with 0.15s stagger */
  @keyframes ncm-kpi-fade-loop-1 {
    0%, 67%   { opacity: 0; transform: translateY(4px); }
    71%, 95% { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(4px); }
  }
  @keyframes ncm-kpi-fade-loop-2 {
    0%, 68%   { opacity: 0; transform: translateY(4px); }
    72%, 95% { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(4px); }
  }
  @keyframes ncm-kpi-fade-loop-3 {
    0%, 69%   { opacity: 0; transform: translateY(4px); }
    73%, 95% { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(4px); }
  }
  @keyframes ncm-kpi-fade-loop-4 {
    0%, 70%   { opacity: 0; transform: translateY(4px); }
    74%, 95% { opacity: 1; transform: translateY(0); }
    100%      { opacity: 0; transform: translateY(4px); }
  }
  .product-row.is-visible .mock-ncm-kpi:nth-child(1) { animation: ncm-kpi-fade-loop-1 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-kpi:nth-child(2) { animation: ncm-kpi-fade-loop-2 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-kpi:nth-child(3) { animation: ncm-kpi-fade-loop-3 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-kpi:nth-child(4) { animation: ncm-kpi-fade-loop-4 12s ease-in-out infinite; }

  /* Waterfall bars build sequentially during Reach Calculator panel (68-100% of loop) */
  @keyframes ncm-bar-loop-1 {
    0%, 71%   { transform: scaleX(0); }
    77%, 95%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
  }
  @keyframes ncm-bar-loop-2 {
    0%, 73%   { transform: scaleX(0); }
    79%, 95%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
  }
  @keyframes ncm-bar-loop-3 {
    0%, 75%   { transform: scaleX(0); }
    81%, 95%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
  }
  @keyframes ncm-bar-loop-4 {
    0%, 77%   { transform: scaleX(0); }
    83%, 95%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
  }
  @keyframes ncm-bar-loop-5 {
    0%, 79%   { transform: scaleX(0); }
    85%, 95%  { transform: scaleX(1); }
    100%      { transform: scaleX(0); }
  }
  .product-row.is-visible .mock-ncm-channel-fill {
    transform: scaleX(0); transform-origin: left;
  }
  .product-row.is-visible .mock-ncm-channel:nth-child(1) .mock-ncm-channel-fill { animation: ncm-bar-loop-1 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-channel:nth-child(2) .mock-ncm-channel-fill { animation: ncm-bar-loop-2 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-channel:nth-child(3) .mock-ncm-channel-fill { animation: ncm-bar-loop-3 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-channel:nth-child(4) .mock-ncm-channel-fill { animation: ncm-bar-loop-4 12s ease-in-out infinite; }
  .product-row.is-visible .mock-ncm-channel:nth-child(5) .mock-ncm-channel-fill { animation: ncm-bar-loop-5 12s ease-in-out infinite; }

  /* ==================================================
     END APP-SPECIFIC ANIMATIONS
     ================================================== */

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .anim-target,
    .mock-mindnode,
    .mock-mindmap-svg path {
      opacity: 1 !important;
    }
    .mock-channel-fill {
      width: var(--target-width, 100%) !important;
    }
    .mock-mindmap-svg path {
      stroke-dashoffset: 0 !important;
    }
    .anim-ed-line {
      stroke-dashoffset: 0 !important;
    }
    .mock-bend-bar { transform: scaleX(1) !important; }
    /* Show only Timeline panel with active Timeline tab */
    .anim-bend-panel-1 { opacity: 1 !important; }
    .anim-bend-panel-2,
    .anim-bend-panel-3 { opacity: 0 !important; }
    .anim-bend-tab-1 { background: var(--river) !important; color: var(--bg-card) !important; border-color: var(--river) !important; font-weight: 600 !important; }
    .anim-bend-tab-2,
    .anim-bend-tab-3 { background: var(--bg) !important; color: var(--text-muted) !important; border-color: var(--border) !important; font-weight: 500 !important; }
    .mock-ncm-kpi { opacity: 1 !important; }
    .mock-ncm-channel-fill { transform: scaleX(1) !important; }
    /* Show only Reach Calculator panel with active tab statically */
    .anim-ncm-panel-3 { opacity: 1 !important; }
    .anim-ncm-panel-1, .anim-ncm-panel-2 { opacity: 0 !important; }
    .anim-ncm-tab-3 { background: var(--sage) !important; color: var(--bg-card) !important; font-weight: 600 !important; }
    .anim-ncm-tab-1, .anim-ncm-tab-2 { background: transparent !important; color: var(--text-muted) !important; }
    /* Show only the Overview panel statically */
    .anim-cf-panel-1 { opacity: 1 !important; }
    .anim-cf-panel-2,
    .anim-cf-panel-3,
    .anim-cf-panel-4 { opacity: 0 !important; }
    /* Reset tab styles to Overview being active */
    .anim-cf-tab-1 { color: var(--text) !important; border-bottom-color: var(--text) !important; font-weight: 600 !important; }
  }

  /* ---------- NAV TEXT LINK (shared by index + how-to) ---------- */
  .nav-links a.nav-text-link {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s;
  }
  .nav-links a.nav-text-link:hover { color: var(--text); }
  .nav-links a.nav-text-link.active { color: var(--text); font-weight: 500; }