:root {
    --color-bg: #121212;
    --color-panel: #1a1a1a;
    --color-surface-elevated: #1a1a1a;
    --color-text: #f1f5f9;
    --color-text-secondary: #8c8c8c;

    --color-border: rgba(255,255,255,0.08);
    --color-border-subtle: rgba(255,255,255,0.05);
    --color-brand: #6A3195;
    --color-success: #22c55e;
    --color-warn: #f59e0b;
    --color-error: #ef4444;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 15px; }
  body { font-family: 'Noto Sans', sans-serif; background: var(--color-bg); color: var(--color-text); min-height: 100vh; }

  /* ═══ NAV ═══════════════════════════════════ */
  .nav { position: sticky; top: 0; z-index: 1000; width: 100%; background: rgba(18, 18, 18,0.95); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
  .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 58px; display: flex; align-items: center; }
  .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; margin-right: 36px; }
  .nav-logo-mark { width: 35px; height: 35px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.5px; font-family: 'Noto Sans', sans-serif; }
  .nav-logo-name { font-size: 15.4px; font-weight: 600; color: var(--color-text); letter-spacing: -0.2px; font-family: 'Noto Sans', sans-serif; }
  .nav-items { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-end; }
  .nav-item { position: relative; }
  .nav-link { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 4px; font-size: 13.5px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; cursor: pointer; transition: color 0.15s, background 0.15s; white-space: nowrap; border: none; background: none; font-family: inherit; }
  .nav-link:hover, .nav-item.open > .nav-link { color: var(--color-text); background: var(--color-border); }
  .nav-link .chevron { width: 14px; height: 14px; opacity: 0.5; transition: transform 0.18s; }
  .nav-item.open > .nav-link .chevron { transform: rotate(180deg); opacity: 0.8; }
  .nav-right { display: flex; align-items: center; gap: 10px; margin-left: 20px; flex-shrink: 0; }
  .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; color: #fff; background: var(--color-brand); text-decoration: none; cursor: pointer; transition: opacity 0.15s; border: none; font-family: inherit; }
  .nav-cta:hover { opacity: 0.88; }

  /* ═══ DROPDOWNS ══════════════════════════════ */
  .dropdown { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: auto; background: var(--color-panel); border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,0.7); z-index: 999; overflow: hidden; animation: dropIn 0.18s ease; }
  @keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .nav-item.open > .dropdown { display: block; }
  .dropdown-demo { width: 520px; padding: 16px; }
  .dd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .dd-group-label { grid-column: 1/-1; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); padding: 4px 0 8px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
  .dd-group-label:not(:first-child) { margin-top: 10px; }
  .dd-group-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-secondary); }
  .dd-scenario { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 4px; cursor: pointer; text-decoration: none; transition: background 0.12s; }
  .dd-scenario:hover { background: var(--color-border); }
  .dd-scenario-name { font-size: 13px; font-weight: 600; color: var(--color-text); line-height: 1.2; }
  .dd-scenario-desc { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.35; }

  /* ═══ SHARED ══════════════════════════════════ */
  .page { display: none; }
  .page.visible { display: block; }
  .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(34,197,94,0.4); } 50% { opacity:0.8; box-shadow:0 0 0 6px rgba(34,197,94,0); } }

  /* Buttons */
  .btn-primary { padding: 12px 28px; border-radius: 4px; font-size: 14px; font-weight: 600; color: #fff; background: var(--color-brand); cursor: pointer; border: none; font-family: inherit; transition: opacity 0.15s; }
  .btn-primary:hover { opacity: 0.88; }
  .btn-ghost { padding: 12px 22px; border-radius: 4px; font-size: 14px; font-weight: 600; color: #000; background: #fff; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.15s; }
  .btn-ghost:hover { opacity: 0.88; }
  .btn-muted { padding: 12px 22px; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-border-subtle); border: none; cursor: pointer; font-family: inherit; transition: color 0.15s, background 0.15s; }
  .btn-muted:hover { color: var(--color-text-secondary); background: var(--color-border); }
  .btn-outline { padding: 11px 22px; border-radius: 4px; font-size: 13.5px; font-weight: 600; color: var(--color-text-secondary); background: transparent; border: 1px solid var(--color-border); cursor: pointer; font-family: inherit; transition: color 0.15s, border-color 0.15s, background 0.15s; }
  .btn-outline:hover { color: var(--color-text-secondary); border-color: var(--color-border-hover); background: var(--color-border-subtle); }

  /* ═══ HOME PAGE ══════════════════════════════ */
  .hero { max-width: 1280px; margin: 60px auto 0; padding: 0 28px; text-align: center; }
  .hero h1 { font-size: 44px; font-weight: 600; letter-spacing: -2px; line-height: 1.05; color: var(--color-text); margin-bottom: 20px; }
  .hero p { font-size: 18px; color: var(--color-text-secondary); max-width: 540px; margin: 0 auto 40px; line-height: 1.6; }
  .hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
  /* ── Scenario Grid (Home) ─────────────────────────── */
  .sc-strip { max-width: 1280px; margin: 64px auto 80px; padding: 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .sc-col-header { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); padding-bottom: 12px; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
  .sc-col-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-secondary); }
  .sc-card {
    background: var(--color-panel); border-radius: 4px;
    padding: 18px; cursor: pointer; margin-bottom: 10px;
    transition: background 0.15s, transform 0.15s;
  }
  .sc-card:hover { background: var(--color-surface-elevated); transform: translateY(-2px); }
  .sc-card-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
  .sc-card-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.55; margin-bottom: 10px; }
  .sc-failure { font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 11px; color: var(--color-brand); line-height: 1.5; }
  .sc-failure-label { color: var(--color-text-secondary); opacity: 1; }
  .sc-use-case { font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 11px; color: var(--color-text-secondary); opacity: 1; line-height: 1.5; margin-bottom: 2px; }

  /* ═══ HOW IT WORKS ═══════════════════════════ */
  .hiw-page { max-width: 860px; margin: 60px auto 100px; padding: 0 28px; }
  .hiw-page h1 { font-size: 40px; font-weight: 600; letter-spacing: -1.8px; color: var(--color-text); margin-bottom: 12px; line-height: 1.05; }
  .hiw-lead { font-size: 16px; color: var(--color-text-secondary); margin-bottom: 56px; line-height: 1.6; max-width: 560px; }
  .hiw-stage { margin-bottom: 12px; }
  .hiw-stage-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
  .hiw-stage-label::after { content: ''; flex: 1; height: 1px; background: var(--color-border-subtle); }
  .hiw-connector { display: flex; align-items: center; justify-content: center; height: 32px; }
  .hiw-agent-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hiw-agent-card { background: var(--color-panel); border-radius: 4px; padding: 16px 18px; }
  .hiw-agent-name { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 10px; }
  .hiw-agent-action { font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; line-height: 1.3; }
  .hiw-agent-meta { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.45; }
  .hiw-warning { margin-top: 12px; background: rgba(245,158,11,0.05); border-left: 2px solid rgba(245,158,11,0.25); border-radius: 0 4px 4px 0; padding: 11px 16px; font-size: 13px; color: #b45309; font-style: italic; line-height: 1.5; }
  .hiw-panel { background: var(--color-panel); border-radius: 4px; padding: 20px 22px; }
  .hiw-panel-title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 8px; }
  .hiw-panel-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.65; }
  .hiw-mem-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
  .hiw-mem-row { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
  .hiw-mem-key { color: var(--color-text-secondary); font-weight: 700; font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; width: 130px; flex-shrink: 0; }
  .hiw-mem-val { color: var(--color-text-secondary); }
  .hiw-pred-bars { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
  .hiw-pred-row { display: flex; align-items: center; gap: 14px; }
  .hiw-pred-label { font-size: 11.5px; color: var(--color-text-secondary); width: 200px; flex-shrink: 0; }
  .hiw-pred-track { flex: 1; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
  .hiw-pred-fill { height: 100%; border-radius: 3px; }
  .hiw-pred-fill.risk { background: var(--color-error); }
  .hiw-pred-fill.safe { background: var(--color-success); }
  .hiw-pred-val { font-size: 12px; font-weight: 700; width: 56px; text-align: right; flex-shrink: 0; }
  .hiw-pred-val.risk { color: var(--color-error); }
  .hiw-pred-val.safe { color: var(--color-success); }
  .hiw-mod-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hiw-mod-card { background: var(--color-panel); border-radius: 4px; padding: 16px 18px; border-left: 2px solid rgba(106,49,149,0.5); }
  .hiw-mod-target { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-brand); margin-bottom: 8px; }
  .hiw-mod-action { font-size: 13px; color: var(--color-text); font-weight: 500; line-height: 1.45; }
  .hiw-mod-result { font-size: 11px; color: var(--color-text-secondary); margin-top: 6px; line-height: 1.4; }
  /* ── Why This Matters at Scale (HIW) ── */
  .hiw-wtm { margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--color-border-subtle); }
  .hiw-wtm-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 32px; display: flex; align-items: center; gap: 10px; }
  .hiw-wtm-kicker::after { content: ''; flex: 1; height: 1px; background: var(--color-border-subtle); }
  .hiw-wtm-headline { font-size: 34px; font-weight: 700; letter-spacing: -1.2px; color: var(--color-text); line-height: 1.12; margin-bottom: 16px; }
  .hiw-wtm-sub { font-size: 16px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 48px; }
  .hiw-wtm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
  .hiw-wtm-stat { background: var(--color-panel); border-radius: 4px; padding: 24px 20px; }
  .hiw-wtm-stat-num { font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 34px; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 14px; letter-spacing: -1px; }
  .hiw-wtm-stat-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.65; }
  .hiw-wtm-audiences { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .hiw-wtm-audience { background: var(--color-panel); border-radius: 4px; padding: 18px; }
  .hiw-wtm-audience-label { font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 10px; }
  .hiw-wtm-audience-text { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }

  .hiw-footer { text-align: center; margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--color-border-subtle); }
  .hiw-footer-text { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 28px; font-style: italic; line-height: 1.6; }

  /* ═══ HOW IT WORKS v2 (two-column redesign) ══ */
  .hiw2-page { max-width: 920px; margin: 60px auto 100px; padding: 0 28px; }
  .hiw2-hero { margin-bottom: 72px; }
  .hiw2-hero h1 { font-size: 40px; font-weight: 600; letter-spacing: -1.8px; color: var(--color-text); margin-bottom: 16px; line-height: 1.05; }
  .hiw2-intro-lead { font-size: 16px; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 32px; }
  .hiw2-intro-diagram { background: var(--color-border-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 24px 28px; display: flex; justify-content: center; overflow: hidden; }
  /* Step layout: full-width header, then copy-left / diagram-right */
  .hiw2-steps { display: flex; flex-direction: column; }
  .hiw2-step { padding: 52px 0; border-top: 1px solid var(--color-border-subtle); }
  .hiw2-step-header { margin-bottom: 28px; }
  .hiw2-step-num { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 8px; }
  .hiw2-step-title { font-size: 24px; font-weight: 600; letter-spacing: -0.7px; color: var(--color-text); line-height: 1.15; }
  .hiw2-step-body-row { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
  .hiw2-body { font-size: 14px; color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 22px; }
  .hiw2-details { display: flex; flex-direction: column; gap: 7px; }
  .hiw2-detail-row { display: flex; align-items: baseline; gap: 10px; }
  .hiw2-detail-key { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--color-text-secondary); width: 115px; flex-shrink: 0; }
  .hiw2-detail-val { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.55; }
  .hiw2-diagram { background: var(--color-border-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 24px; display: flex; align-items: center; justify-content: center; }
  /* Stats row */
  .hiw2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 64px 0 0; border-top: 1px solid var(--color-border-subtle); margin-top: 52px; }
  .hiw2-stat { padding: 0 32px 0 0; border-right: 1px solid var(--color-border-subtle); margin-right: 32px; }
  .hiw2-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
  .hiw2-stat-num { font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 30px; font-weight: 700; color: var(--color-text); line-height: 1; margin-bottom: 10px; letter-spacing: -0.8px; }
  .hiw2-stat-desc { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; }
  .hiw2-footer { text-align: center; padding-top: 56px; }
  .hiw2-footer p { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 24px; line-height: 1.6; font-style: italic; }

  /* ═══ DASHBOARD PAGE ══════════════════════════ */
  .dash-page { max-width: 1280px; margin: 0 auto; padding: 28px; }
  .dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
  .dash-header h1 { font-size: 22px; font-weight: 800; color: var(--color-text); letter-spacing: -0.5px; }
  .dash-mode-pills { display: flex; background: var(--color-border-subtle); border-radius: 4px; padding: 3px; gap: 2px; }
  .dash-mode-pill { padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s; border: none; background: none; font-family: inherit; }
  .dash-mode-pill.active { background: var(--color-border); color: var(--color-text); }
  .dash-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; overflow-x: auto; }
  .dash-tab { padding: 8px 16px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.12s; white-space: nowrap; border-top: none; border-left: none; border-right: none; background: none; font-family: inherit; }
  .dash-tab.active { color: var(--color-success); border-bottom-color: var(--color-success); }
  .dash-tab:hover:not(.active) { color: var(--color-text-secondary); }
  .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .dash-panel { background: var(--color-panel); border-radius: 4px; padding: 18px; min-height: 160px; position: relative; }
  .dash-panel-title { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 14px; }
  .dash-panel-live { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--color-success); font-weight: 700; letter-spacing: 0.5px; position: absolute; top: 16px; right: 16px; }
  .bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .bar-label { font-size: 10.5px; color: var(--color-text-secondary); width: 110px; flex-shrink: 0; }
  .bar-track { flex: 1; height: 4px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
  .bar-fill { height: 100%; border-radius: 2px; background: var(--color-success); transition: width 0.6s ease; }
  .bar-fill.warn { background: var(--color-warn); }
  .bar-fill.crit { background: var(--color-error); }

  /* ═══ WHITEPAPER ══════════════════════════════ */
  .wp-page { max-width: 760px; margin: 60px auto 0; padding: 0 28px; }
  .wp-page h1 { font-size: 40px; font-weight: 600; letter-spacing: -1.8px; color: var(--color-text); margin-bottom: 12px; }
  .wp-page .wp-lead { font-size: 16px; color: var(--color-text-secondary); line-height: 1.65; margin-bottom: 40px; }
  .wp-toc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 48px; }
  .wp-toc-item { padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--color-border-subtle); border: none; color: var(--color-text-secondary); cursor: pointer; transition: color 0.12s; }
  .wp-toc-item:hover { color: var(--color-text-secondary); }
  .wp-section { margin-bottom: 40px; }
  .wp-section h2 { font-size: 22px; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
  .wp-section h3 { font-size: 15px; font-weight: 700; color: var(--color-text-secondary); margin: 22px 0 8px; letter-spacing: -0.2px; }
  .wp-section p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 12px; }
  .wp-section p strong { color: var(--color-text-secondary); font-weight: 600; }
  .wp-section ul { list-style: none; padding: 0; margin: 0 0 14px 0; }
  .wp-section ul li { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; padding: 3px 0 3px 18px; position: relative; }
  .wp-section ul li::before { content: '·'; position: absolute; left: 6px; top: -2px; color: var(--color-text-secondary); font-weight: 700; font-size: 18px; }
  .wp-section ul li strong { color: var(--color-text-secondary); font-weight: 600; }
  .wp-callout {
    padding: 14px 18px;
    border-left: 2px solid var(--color-brand);
    background: rgba(106,49,149,0.08);
    border-radius: 2px;
    margin: 16px 0 18px;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
  }
  .wp-flow {
    font-size: 13px;
    color: var(--color-brand);
    background: rgba(106,49,149,0.06);
    border-radius: 4px;
    padding: 10px 14px;
    margin: 14px 0;
    letter-spacing: 0.3px;
    font-weight: 500;
  }
  .wp-table-wrap { overflow-x: auto; margin: 16px 0 20px; }
  .wp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .wp-table th {
    text-align: left; padding: 10px 14px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,0.02);
  }
  .wp-table td {
    padding: 12px 14px; color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-subtle);
    line-height: 1.5; vertical-align: top;
  }
  .wp-table td:first-child { color: var(--color-text-secondary); font-weight: 600; }
  .wp-table tr:last-child td { border-bottom: none; }

  /* ═══ CONTACT ══════════════════════════════════ */
  .contact-page { max-width: 640px; margin: 60px auto 0; padding: 0 28px; }
  .contact-page h1 { font-size: 40px; font-weight: 600; letter-spacing: -1.8px; color: var(--color-text); margin-bottom: 10px; }
  .contact-page .contact-lead { font-size: 15px; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 40px; }
  .form-group { margin-bottom: 18px; }
  .form-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 7px; }
  .form-input, .form-textarea { width: 100%; background: var(--color-panel); border: none; border-radius: 4px; padding: 11px 14px; font-size: 14px; color: var(--color-text); font-family: inherit; outline: none; }
  .form-input:focus, .form-textarea:focus { background: var(--color-surface-elevated); }
  .form-textarea { resize: vertical; min-height: 110px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-select { width: 100%; background: var(--color-panel); border: none; border-radius: 4px; padding: 11px 14px; font-size: 14px; color: var(--color-text-secondary); font-family: inherit; outline: none; appearance: none; cursor: pointer; }
  .contact-divider { border: none; border-top: 1px solid var(--color-border); margin: 32px 0; }
  .contact-alt { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 14px; }
  .contact-links { display: flex; gap: 10px; flex-wrap: wrap; }
  .contact-link { padding: 8px 16px; border-radius: 4px; font-size: 12.5px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-border-subtle); border: none; cursor: pointer; transition: color 0.12s; text-decoration: none; }
  .contact-link:hover { color: var(--color-text-secondary); }

  /* ═══ PAYMENT CHOREOGRAPHY PAGE ══════════════ */
  .uc-wrap { max-width: 800px; margin: 0 auto; padding: 0 28px 100px; }

  /* Centered hero */
  .uc-hero { padding: 60px 0 36px; margin-bottom: 72px; text-align: center; }
  .uc-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-brand); margin-bottom: 14px; }
  .uc-title { font-size: 38px; font-weight: 600; letter-spacing: -1.6px; color: var(--color-text); line-height: 1.05; margin-bottom: 16px; }
  .uc-lead { font-size: 16px; color: var(--color-text-secondary); line-height: 1.65; max-width: 560px; margin: 0 auto 10px; }
  .uc-attribution { font-size: 12px; color: var(--color-text-secondary); opacity: 0.5; font-style: italic; }
  .uc-actions { display: flex; gap: 12px; justify-content: center; margin: 28px 0 52px; flex-wrap: wrap; }
  .uc-divider { border: none; border-top: 1px solid var(--color-border); margin: 0 0 56px; }

  /* Section heading (centered) */
  .uc-section-heading {
    text-align: center;
    font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: var(--color-text);
    margin-bottom: 28px;
  }
  .uc-section-subheading {
    text-align: center;
    font-size: 13px; color: var(--color-text-secondary); margin-bottom: 36px; margin-top: -16px;
  }

  /* ── Full simulation dashboard ── */
  .full-sim {
    background: #0c0c0c; border-radius: 6px;
    border: 1px solid var(--color-border);
    overflow: hidden; margin-bottom: 72px;
  }
  /* Scenario tabs */
  .full-sim-tabs {
    display: flex; background: #0c0c0c;
    border-bottom: 1px solid var(--color-border);
    padding: 0 16px; overflow-x: auto; gap: 0;
  }
  .full-sim-tab {
    padding: 10px 14px; font-size: 11.5px; font-weight: 600;
    color: var(--color-text-secondary); cursor: pointer; border: none; background: none;
    font-family: inherit; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color 0.12s;
  }
  .full-sim-tab.active { color: var(--color-success); border-bottom-color: var(--color-success); }
  .full-sim-tab:hover:not(.active) { color: var(--color-text-secondary); }

  /* Dashboard body: left bars | center graph | right log */
  .full-sim-body { display: grid; grid-template-columns: 220px 1fr 220px; min-height: 340px; }
  .full-sim-col { padding: 18px; }
  .full-sim-col + .full-sim-col { border-left: 1px solid var(--color-border-subtle); }
  .full-sim-col-title { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
  .full-sim-col-live { display: flex; align-items: center; gap: 4px; font-size: 9px; color: var(--color-success); }

  /* Stress bars */
  .fsim-metric { margin-bottom: 9px; }
  .fsim-metric-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
  .fsim-metric-label { font-size: 10px; color: var(--color-text-secondary); }
  .fsim-metric-val { font-size: 10px; color: var(--color-text-secondary); font-feature-settings: 'tnum'; }
  .fsim-bar-track { height: 3px; background: var(--color-border-subtle); border-radius: 2px; overflow: hidden; }
  .fsim-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1), background 0.4s; }

  /* Center: network graph */
  .full-sim-center { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 20px 12px; }
  .regime-label { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; }
  .regime-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; padding: 2px 8px; border-radius: 3px; background: var(--color-border-subtle); color: var(--color-text-secondary); transition: all 0.3s; }
  .regime-badge.warn { background: rgba(245,158,11,0.12); color: var(--color-warn); }
  .regime-badge.crit { background: rgba(239,68,68,0.12); color: var(--color-error); }
  .regime-badge.ok   { background: rgba(34,197,94,0.12);  color: var(--color-success); }
  .regime-badge.aura { background: rgba(255,255,255,0.12); color: var(--color-text); }
  .full-sim-svg { flex: 1; width: 100%; }

  /* Log panel */
  .fsim-log { display: flex; flex-direction: column; gap: 0; overflow-y: auto; max-height: 280px; }
  .fsim-log-entry { display: flex; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 10px; line-height: 1.4; opacity: 0; transform: translateY(3px); transition: opacity 0.3s, transform 0.3s; }
  .fsim-log-entry.show { opacity: 1; transform: none; }
  .fsim-log-time { color: var(--color-text-secondary); flex-shrink: 0; width: 32px; font-feature-settings: 'tnum'; }
  .fsim-log-msg { color: var(--color-text-secondary); }
  .fsim-log-msg.warn { color: #92400e; }
  .fsim-log-msg.crit { color: var(--color-error); }
  .fsim-log-msg.ok   { color: var(--color-success); }
  .fsim-log-msg.aura { color: #a855f7; font-weight: 600; }

  /* Sim footer */
  .full-sim-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 1px solid var(--color-border-subtle); }
  .fsim-timeline { display: flex; align-items: center; gap: 3px; }
  .fsim-tick { width: 24px; height: 2px; background: var(--color-border); border-radius: 1px; transition: background 0.3s; }
  .fsim-tick.active { background: var(--color-success); }
  .fsim-tick.done { background: rgba(34,197,94,0.3); }
  .fsim-tick.aura { background: var(--color-brand); }
  .fsim-status { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); letter-spacing: 0.5px; transition: color 0.3s; }
  .fsim-status.running { color: var(--color-success); }
  .fsim-status.done { color: var(--color-brand); }
  .fsim-outcome { font-size: 10px; color: var(--color-text-secondary); transition: color 0.3s; }
  .fsim-outcome.success { color: var(--color-success); }

  /* ── Full simulation dashboard — 2× size modifier ── */
  .full-sim-xl {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1600px, calc(100vw - 40px));
    border-radius: 12px;
    margin-bottom: 96px;
  }
  .full-sim-xl .full-sim-tabs { padding: 0 32px; }
  .full-sim-xl .full-sim-tab { padding: 20px 28px; font-size: 23px; border-bottom-width: 4px; }
  .full-sim-xl .full-sim-body { grid-template-columns: 440px 1fr 440px; min-height: 680px; }
  .full-sim-xl .full-sim-col { padding: 36px; }
  .full-sim-xl .full-sim-col-title { font-size: 18px; margin-bottom: 28px; letter-spacing: 2.4px; }
  .full-sim-xl .full-sim-col-live { font-size: 18px; gap: 8px; }
  .full-sim-xl .live-dot { width: 8px; height: 8px; }
  .full-sim-xl .fsim-metric { margin-bottom: 18px; }
  .full-sim-xl .fsim-metric-row { margin-bottom: 6px; }
  .full-sim-xl .fsim-metric-label { font-size: 20px; }
  .full-sim-xl .fsim-metric-val { font-size: 20px; }
  .full-sim-xl .fsim-bar-track { height: 6px; border-radius: 4px; }
  .full-sim-xl .fsim-bar-fill { border-radius: 4px; }
  .full-sim-xl .full-sim-center { padding: 32px 40px 24px; }
  .full-sim-xl .regime-label { font-size: 18px; margin-bottom: 16px; letter-spacing: 2.4px; }
  .full-sim-xl .regime-badge { font-size: 18px; padding: 4px 16px; border-radius: 6px; letter-spacing: 1.6px; }
  .full-sim-xl .full-sim-svg { min-height: 440px; }
  .full-sim-xl .fsim-log { max-height: 560px; }
  .full-sim-xl .fsim-log-entry { gap: 12px; padding: 10px 0; font-size: 20px; line-height: 1.4; }
  .full-sim-xl .fsim-log-time { width: 64px; }
  .full-sim-xl .full-sim-footer { padding: 20px 40px; }
  .full-sim-xl .fsim-timeline { gap: 6px; }
  .full-sim-xl .fsim-tick { width: 48px; height: 4px; border-radius: 2px; }
  .full-sim-xl .fsim-status { font-size: 20px; letter-spacing: 1px; }
  .full-sim-xl .fsim-outcome { font-size: 20px; }
  /* Override the inline-styled agent sub-headers in the right column */
  .full-sim-xl .full-sim-col > div[style*="font-size:9px"] {
    font-size: 18px !important;
    margin-bottom: 24px !important;
    letter-spacing: 1px !important;
  }
  .full-sim-xl .full-sim-col > div[style*="margin: 14px"] {
    margin-top: 28px !important;
  }

  /* ── Quadrant Dashboard (Intent-style monochrome theme) ── */
  .qdash {
    position: relative; left: 50%; transform: translateX(-50%);
    width: min(1600px, calc(100vw - 40px));
    background: var(--color-bg); border-radius: 6px; overflow: hidden;
    border: 1px solid var(--color-border); margin-bottom: 96px;
    font-family: 'Geist Mono','SF Mono','Fira Code',monospace;
  }
  .qdash-statusbar {
    display: flex; align-items: stretch; background: var(--color-bg);
    border-bottom: 1px solid var(--color-border); height: 34px; gap: 1px;
  }
  .qdash-stat {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 0 18px; background: var(--color-panel);
    border-right: 1px solid var(--color-border-subtle);
  }
  .qdash-stat:last-child { border-right: none; }
  .qdash-stat-label { font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-secondary); white-space: nowrap; }
  .qdash-stat-val { font-size: 11px; font-weight: 700; color: var(--color-text); transition: color 0.3s; }
  .qdash-stat-spark { width: 48px; height: 5px; background: var(--color-border-subtle); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
  .qdash-stat-spark-fill { height: 100%; border-radius: 3px; transition: width 0.4s, background 0.4s; }
  /* Three-quadrant layout: Influence/Workflow · Metrics · Coherence Engine.
     Single row; height sized so the full Agent Metrics column is in view for
     every use case (the tallest is the payment scenario at 14 gauge rows)
     without scrolling. Metrics + Coherence still scroll if content grows. */
  .qdash-panels {
    display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 500px;
    gap: 1px; background: var(--color-border);
  }
  .qdash-panel { background: #1a1a1a; padding: 14px 18px; display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.3s, filter 0.3s; }
  /* #1561 — Guided mode: dim inactive panels, spotlight active one */
  body.guided-mode .qdash-panels .qdash-panel { opacity: 0.25; filter: brightness(0.6); }
  body.guided-mode .qdash-panels .qdash-panel.guided-active { opacity: 1; filter: none; }
  /* #1352 — Theatre card shadow: visible in dark mode, reduced in light mode */
  .entry-card, .scene-card, .spotlight-card, .interactive-bar {
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  }
  [data-theme="light"] .entry-card,
  [data-theme="light"] .scene-card,
  [data-theme="light"] .spotlight-card,
  [data-theme="light"] .interactive-bar {
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) .entry-card,
    :root:not([data-theme]) .scene-card,
    :root:not([data-theme]) .spotlight-card,
    :root:not([data-theme]) .interactive-bar {
      box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    }
  }
  .qdash-panel-title {
    font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    color: var(--color-text); display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; flex-shrink: 0;
  }
  .qdash-icon {
    width: 18px; height: 18px; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
    background: var(--color-border-subtle) !important; color: var(--color-text-secondary) !important;
  }
  .qdash-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; flex-shrink: 0; }
  .qdash-tab { font-size: 12px; padding: 4px 12px; cursor: pointer; color: rgba(255,255,255,0.3); background: none; border: none; border-bottom: 2px solid transparent; transition: all 0.15s; letter-spacing: 0.3px; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .qdash-tab:hover:not(.active) { color: rgba(255,255,255,0.6); }
  .qdash-tab.active { color: #ffffff; border-bottom-color: #ffffff; }
  /* Tabs inline inside .qdash-panel-title — no extra border/margin */
  .qdash-panel-title .qdash-tabs { border-bottom: none; margin-bottom: 0; margin-left: auto; }
  .qdash-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
  /* fsim-log-entry styling inside qdash (sim JS writes these classes) */
  .qdash .fsim-log-entry { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: 11px; line-height: 1.5; opacity: 0; transform: translateY(3px); transition: opacity 0.3s, transform 0.3s; }
  .qdash .fsim-log-entry.show { opacity: 1; transform: none; }
  .qdash .fsim-log-time { font-weight: 700; font-size: 10px; letter-spacing: 0.4px; flex-shrink: 0; width: 56px; color: var(--color-text); }
  .qdash .fsim-log-msg { color: var(--color-text-secondary); }
  .qdash .fsim-log-msg.warn { color: var(--color-warn); }
  .qdash .fsim-log-msg.crit { color: var(--color-error); }
  .qdash .fsim-log-msg.ok   { color: var(--color-success); }
  .qdash .fsim-log-msg.aura { color: var(--color-text); font-weight: 600; }
  .qdash-gauges { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; padding: 4px 0; }
  .qdash-gauge-row { display: flex; align-items: center; gap: 10px; }
  .qdash-gauge-label { font-size: 10px; color: #e2e8f0; opacity: 0.45; flex-shrink: 0; width: 168px; white-space: nowrap; overflow: hidden; font-weight: 500; }
  .qdash-gauge-track { flex: 1; height: 4px; background: var(--color-border-subtle); border-radius: 2px; overflow: hidden; }
  .qdash-gauge-fill { height: 100%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1), background 0.4s; }
  .qdash-gauge-val { font-size: 10px; color: #f8fafc; opacity: 0.45; font-weight: 600; width: 28px; text-align: right; flex-shrink: 0; }
  .qdash-legend { display: flex; gap: 14px; margin-bottom: 8px; flex-shrink: 0; align-items: center; }
  .qdash-legend-item { font-size: 9px; color: var(--color-text-secondary); opacity: 0.35; display: flex; align-items: center; gap: 4px; letter-spacing: 0.3px; }
  /* Heatmap tab */
  .qdash-heatmap { flex: 1; display: flex; flex-direction: column; padding: 4px 0; overflow: hidden; }
  .qdash-hm-section-label { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0.25; margin-bottom: 8px; flex-shrink: 0; }
  .qdash-hm-table { flex: 1; display: grid; grid-template-columns: 76px repeat(11, 1fr); gap: 2px; align-content: start; }
  .qdash-hm-col-hdr { font-size: 8px; font-family: 'Geist Mono', monospace; color: var(--color-text-secondary); opacity: 0.3; text-align: center; padding: 2px 0; }
  .qdash-hm-row-lbl { font-size: 9px; color: var(--color-text-secondary); opacity: 0.5; display: flex; align-items: center; }
  .qdash-hm-cell { height: 22px; border-radius: 2px; }
  .qdash-hm-legend { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-shrink: 0; }
  .qdash-hm-legend-bar { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--color-success), #84cc16, var(--color-warn), var(--color-error)); }
  .qdash-hm-legend-lo { font-size: 8px; color: var(--color-text-secondary); opacity: 0.3; }
  .qdash-hm-legend-hi { font-size: 8px; color: var(--color-text-secondary); opacity: 0.3; }
  /* Tensor tab */
  .qdash-tensor { flex: 1; display: flex; flex-direction: column; padding: 4px 0; overflow: auto; }
  .qdash-tensor-section-label { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0.25; margin-bottom: 6px; flex-shrink: 0; }
  .qdash-tensor-table { width: 100%; border-collapse: collapse; font-size: 9px; font-family: 'Geist Mono', monospace; }
  .qdash-tensor-table th { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-text-secondary); opacity: 0.25; text-align: right; padding: 2px 4px; border-bottom: 1px solid var(--color-border-subtle); white-space: nowrap; }
  .qdash-tensor-table th:first-child { text-align: left; }
  .qdash-tensor-table td { padding: 3px 4px; text-align: right; }
  .qdash-tensor-table td:first-child { text-align: left; color: var(--color-text-secondary); opacity: 0.55; font-size: 9px; white-space: nowrap; }
  .qdash-tensor-table tr + tr td { border-top: 1px solid var(--color-border-subtle); }
  .qdash-tensor-divider { border: none; border-top: 1px solid var(--color-border-subtle); margin: 8px 0 6px; flex-shrink: 0; }
  .tv-lo { color: var(--color-success); }
  .tv-mid { color: var(--color-warn); }
  .tv-hi { color: var(--color-error); }
  /* Generic panel-content wrapper used by showPanelTab */
  .qdash-panel-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  /* Memory tab */
  .qdash-mem-section { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0.25; margin-bottom: 8px; flex-shrink: 0; }
  .qdash-mem-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--color-border-subtle); }
  .qdash-mem-row:last-child { border-bottom: none; }
  .qdash-mem-key { font-size: 9px; color: var(--color-text-secondary); opacity: 0.3; flex-shrink: 0; width: 120px; }
  .qdash-mem-val { font-size: 9px; font-family: 'Geist Mono', monospace; color: var(--color-text-secondary); opacity: 0.65; }
  .qdash-mem-badge { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 2px; margin-left: 4px; }
  .qdash-mem-badge.ok { background: rgba(34,197,94,0.15); color: var(--color-success); }
  .qdash-mem-badge.warn { background: rgba(245,158,11,0.15); color: var(--color-warn); }
  /* AuraNet tab */
  .qdash-auranet { flex: 1; display: flex; flex-direction: column; padding: 4px 0; }
  .qdash-auranet-label { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0.25; margin-bottom: 6px; flex-shrink: 0; }
  .qdash-auranet-weights { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-top: 8px; }
  .qdash-aw-label { font-size: 9px; color: var(--color-text-secondary); opacity: 0.4; display: flex; align-items: center; }
  .qdash-aw-bar-wrap { display: flex; align-items: center; gap: 6px; }
  .qdash-aw-bar-track { width: 72px; height: 4px; background: var(--color-border-subtle); border-radius: 2px; }
  .qdash-aw-bar-fill { height: 100%; border-radius: 2px; background: var(--color-success); }
  .qdash-aw-val { font-size: 9px; font-family: 'Geist Mono', monospace; color: var(--color-text-secondary); opacity: 0.5; width: 30px; text-align: right; }
  /* Anomalies tab */
  .qdash-anomaly-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--color-border-subtle); }
  .qdash-anomaly-row:last-child { border-bottom: none; }
  .qdash-anomaly-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
  .qdash-anomaly-msg { font-size: 9.5px; color: var(--color-text-secondary); opacity: 0.55; line-height: 1.4; }
  .qdash-anomaly-sub { font-size: 8.5px; color: var(--color-text-secondary); opacity: 0.25; margin-top: 2px; }
  .qdash-anomaly-cleared { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-success); margin-top: 2px; }
  /* Scenario tab */
  .qdash-scenario { flex: 1; display: flex; flex-direction: column; padding: 4px 0; gap: 0; overflow: auto; }
  .qdash-sc-section { font-size: 8.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); opacity: 0.25; margin-bottom: 6px; margin-top: 10px; flex-shrink: 0; }
  .qdash-sc-section:first-child { margin-top: 0; }
  .qdash-sc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--color-border-subtle); }
  .qdash-sc-row:last-child { border-bottom: none; }
  .qdash-sc-key { font-size: 9px; color: var(--color-text-secondary); opacity: 0.3; }
  .qdash-sc-val { font-size: 9px; font-family: 'Geist Mono', monospace; color: var(--color-text-secondary); opacity: 0.65; }
  /* Bus Log tab */
  .qdash-buslog { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 4px 0; }
  .qdash-bus-entry { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--color-border-subtle); align-items: flex-start; }
  .qdash-bus-entry:last-child { border-bottom: none; }
  .qdash-bus-from { font-size: 8.5px; font-family: 'Geist Mono', monospace; color: rgba(255,255,255,0.45); flex-shrink: 0; width: 80px; }
  .qdash-bus-arrow { font-size: 8px; color: rgba(255,255,255,0.2); flex-shrink: 0; padding-top: 1px; }
  .qdash-bus-msg { font-size: 9px; color: rgba(255,255,255,0.55); line-height: 1.4; }
  .qdash-footer { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.08); background: #0d0d0d; }
  /* #1551 — touch-action + will-change eliminates mobile tap delay and lag */
  .qf-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 12px; font-weight: 600; color: #f1f5f9; background: #1e1e1e; border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; padding: 6px 13px; cursor: pointer; transition: background 0.12s; white-space: nowrap; flex-shrink: 0; touch-action: manipulation; will-change: background; -webkit-tap-highlight-color: transparent; }
  .qf-btn:hover { background: #2a2a2a; }
  .qf-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
  .qf-time { font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 12px; color: rgba(255,255,255,0.5); flex-shrink: 0; min-width: 78px; }
  .qf-progress-track { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
  .qf-progress-fullwidth { flex: none; height: 3px; border-radius: 0; }
  .qf-progress-fill { height: 100%; border-radius: 2px; background: var(--color-text-secondary); opacity: 0.5; width: 0%; transition: width 0.12s linear; }
  .qf-status { font-family: 'Geist Mono','SF Mono','Fira Code',monospace; font-size: 11px; color: var(--color-text-secondary); opacity: 1; flex-shrink: 0; text-align: right; transition: color 0.3s, opacity 0.3s; }
  .qf-status.warn   { color: var(--color-warn); opacity: 0.9; }
  .qf-status.crit   { color: var(--color-error); opacity: 0.9; }
  .qf-status.frozen { color: var(--color-error); opacity: 0.9; }
  .qf-status.aura   { color: var(--color-text); opacity: 0.85; }
  .qf-status.blue   { color: #60a5fa; opacity: 0.9; }
  .qf-status.ok     { color: var(--color-success); opacity: 0.9; }
  /* Regime badge inside qdash status bar */
  .qdash .regime-badge { background: none; padding: 0; border-radius: 0; font-size: 11px; font-weight: 700; color: var(--color-success); letter-spacing: 0.5px; transition: color 0.3s; }
  .qdash .regime-badge.warn { color: var(--color-warn); background: none; }
  .qdash .regime-badge.crit { color: var(--color-error); background: none; }
  .qdash .regime-badge.ok   { color: var(--color-success);  background: none; }
  .qdash .regime-badge.aura { color: var(--color-text);  background: none; }
  /* Expand button in dashboard footer */
  .qdash-open-btn { color: var(--color-text-secondary); opacity: 0.35; }
  .qdash-open-btn:hover { color: var(--color-text-secondary); opacity: 0.75; background: var(--color-surface-elevated); }
  /* ── Standalone dashboard mode (?view=dashboard) ────────────── */
  /* Lock html + body so nothing outside the fixed dashboard can scroll */
  html:has(body.standalone-dash),
  body.standalone-dash { overflow: hidden; height: 100%; }
  /* Keep nav visible but strip it down */
  body.standalone-dash .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; max-width: 100%; border-bottom: 1px solid var(--color-border); }
  body.standalone-dash .nav-inner { max-width: 100%; padding: 0 24px; position: relative; }
  body.standalone-dash .nav-logo { margin-right: 0; }
  body.standalone-dash .nav-items { display: none !important; }
  body.standalone-dash .nav-right { margin-left: auto; }
  body.standalone-dash .nav-cta { display: none; }
  body.standalone-dash .standalone-title {
    display: block !important;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 14px; font-weight: 600; letter-spacing: -0.2px;
    color: var(--color-text-secondary); opacity: 0.55; white-space: nowrap; pointer-events: none;
  }
  /* Hide all pages, then only show the visible one */
  body.standalone-dash .page { display: none !important; }
  body.standalone-dash .page.visible { display: block !important; }
  body.standalone-dash .uc-wrap > *:not(#full-sim):not(#g-full-sim) { display: none !important; }
  /* Dashboard fills exactly the viewport below the nav — never scrolls */
  body.standalone-dash #full-sim, body.standalone-dash #g-full-sim {
    position: fixed; top: 58px; left: 0 !important; right: 0; bottom: 0;
    transform: none !important; width: 100% !important; margin: 0 !important;
    border-radius: 0 !important; border: none !important;
    height: calc(100vh - 58px) !important;
    height: calc(100dvh - 58px) !important;
    display: flex !important; flex-direction: column;
    overflow: hidden !important;
  }
  /* Panels fill remaining height; min-height:0 prevents flex blowout */
  body.standalone-dash .qdash-panels {
    flex: 1; min-height: 0;
    grid-template-rows: 1fr;
  }
  body.standalone-dash .qdash-panel { min-height: 0; overflow: hidden; }
  body.standalone-dash .qdash-open-btn { display: none; }
  /* ── Responsive font scaling in standalone quadrants ──────────── */
  /*
   * vmin = min(vw, vh) so fonts are governed by whichever viewport
   * dimension is smaller — wide+short windows won't blow past the height.
   * Calibrated so base size lands at ~720px height (16:9 @ 1280px wide)
   * and scales to 2× at ~1440px height (16:9 @ 2560px wide).
   * Formula: base * (1 / 7.2) * vmin  →  base * 0.1389vmin
   */
  /* Panel titles and status bar sit one step above content */
  body.standalone-dash .qdash-panel-title  { font-size: clamp(9px,  1.25vmin, 20px); }
  body.standalone-dash .qdash-stat-label   { font-size: clamp(7px,  0.97vmin, 16px); }
  body.standalone-dash .qdash-stat-val     { font-size: clamp(9px,  1.25vmin, 20px); }
  /* ── All quadrant content aligned to Agent Health gauge size ── */
  body.standalone-dash .qdash-tab          { font-size: clamp(10px, 1.25vmin, 20px); }
  /* Coherence Engine log + Agent Metrics gauges: +2pt over base content size
     in the expanded view (richer, more legible at full-window scale). */
  body.standalone-dash .qdash .fsim-log-entry { font-size: clamp(10px, 1.25vmin, 20px); }
  body.standalone-dash .qdash .fsim-log-time  { font-size: clamp(10px, 1.25vmin, 20px); width: auto !important; }
  body.standalone-dash .qdash .fsim-log-msg   { font-size: clamp(10px, 1.25vmin, 20px); }
  body.standalone-dash .qdash-gauge-label  { font-size: clamp(10px, 1.25vmin, 20px); width: auto; }
  body.standalone-dash .qdash-gauge-val    { font-size: clamp(10px, 1.25vmin, 20px); }
  body.standalone-dash .qdash-mem-key      { font-size: clamp(8px,  1.11vmin, 18px); width: auto; }
  body.standalone-dash .qdash-mem-val      { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-anomaly-msg  { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-aw-label     { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-aw-val       { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-sc-key       { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-sc-val       { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-hm-row-lbl   { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-tensor-table td { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-bus-from     { font-size: clamp(8px,  1.11vmin, 18px); }
  body.standalone-dash .qdash-bus-msg      { font-size: clamp(8px,  1.11vmin, 18px); }
  /* Section/column headers sit one step below content */
  body.standalone-dash .qdash-mem-section  { font-size: clamp(6.5px, 0.90vmin, 15px); }
  body.standalone-dash .qdash-anomaly-sub  { font-size: clamp(6.5px, 0.90vmin, 15px); }
  body.standalone-dash .qdash-sc-section   { font-size: clamp(6.5px, 0.90vmin, 15px); }
  body.standalone-dash .qdash-auranet-label { font-size: clamp(6.5px, 0.90vmin, 15px); }
  body.standalone-dash .qdash-hm-col-hdr   { font-size: clamp(6.5px, 0.90vmin, 15px); }
  body.standalone-dash .qdash-hm-legend-lo,
  body.standalone-dash .qdash-hm-legend-hi { font-size: clamp(6.5px, 0.90vmin, 15px); }
  body.standalone-dash .qdash-tensor-table th { font-size: clamp(6.5px, 0.90vmin, 15px); }
  /* Footer controls */
  body.standalone-dash .qdash-footer .qf-btn    { font-size: clamp(10px, 1.39vmin, 22px); }
  body.standalone-dash .qdash-footer .qf-time   { font-size: clamp(10px, 1.39vmin, 22px); }
  body.standalone-dash .qdash-footer .qf-status { font-size: clamp(9px,  1.25vmin, 20px); }

  /* ── Quadrant fine-tuning (applies to BOTH the in-page card and the
   *    expanded view) ──────────────────────────────────────────────
   * Agent Metrics + Coherence Engine: fixed, consistent row gap (not stretched
   * to fill); both scroll when rows exceed the column height. Agent Influence
   * diagram: scaled down so it sits within the column. */
  .qdash-panels [data-panel="metrics"] {
    justify-content: flex-start; gap: 7.875px; overflow-y: auto;
  }
  #main-log,
  #g-main-log {
    justify-content: flex-start; gap: 7.875px; overflow-y: auto;
  }
  /* Log lines adopt the same fixed gap as Metrics rows — drop the per-entry
     padding and divider so the vertical rhythm matches exactly. */
  #main-log .fsim-log-entry,
  #g-main-log .fsim-log-entry { padding: 0; border-bottom: none; }
  [data-panel="network"] > svg,
  [data-panel="gnetwork"] > svg { transform: scale(0.729); transform-origin: center; }

  /* ── Dashboard / Comparison toggle ─────────────────────── */
  .uc-view-toggle { display: flex; justify-content: center; margin-bottom: 20px; }
  .uc-view-pills { display: flex; border-bottom: 1px solid var(--color-border); gap: 0; }
  .uc-view-pill { padding: 10px 28px; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: color 0.15s, border-color 0.15s; border: none; border-bottom: 2px solid transparent; background: none; font-family: inherit; margin-bottom: -1px; }
  .uc-view-pill:hover:not(.active) { color: var(--color-text-secondary); }
  .uc-view-pill.active { color: var(--color-text); border-bottom-color: var(--color-text); }

  /* ── Side-by-side Comparison Panel ─────────────────────── */
  .cmp-panel {
    display: none;
    position: relative; left: 50%; transform: translateX(-50%);
    width: min(1600px, calc(100vw - 40px));
    height: 648px; /* match dashboard total height */
    flex-direction: column;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: 6px; box-shadow: 0 4px 20px 10px rgba(0,0,0,0.25);
    overflow: hidden; margin-bottom: 96px;
    font-family: 'Geist Mono','SF Mono','Fira Code',monospace;
  }
  .cmp-panel.visible { display: flex; }
  /* Header bar matches qdash-statusbar */
  .cmp-header-bar {
    display: grid; grid-template-columns: 1fr 1fr;
    background: #0d0d0d; border-bottom: 1px solid var(--color-border);
    height: 40px; flex-shrink: 0;
  }
  .cmp-header-side {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px; border-right: 1px solid var(--color-border-subtle);
  }
  .cmp-header-side:last-child { border-right: none; }
  .cmp-col-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
  .cmp-col-label.without { color: #f97316; }
  .cmp-col-label.with    { color: #2dd4bf; }
  .cmp-phase-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
  .cmp-phase-badge.crit { color: var(--color-error); background: rgba(239,68,68,0.12); }
  .cmp-phase-badge.warn { color: var(--color-warn); background: rgba(245,158,11,0.12); }
  .cmp-phase-badge.ok   { color: var(--color-success); background: rgba(34,197,94,0.12); }
  /* Two-column body */
  .cmp-cols { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-border); gap: 1px; flex: 1; min-height: 0; overflow: hidden; }
  .cmp-col { background: var(--color-panel); padding: 18px 22px 14px; display: flex; flex-direction: column; overflow: hidden; }
  /* Gauges */
  .cmp-gauge-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .cmp-gauge-label { font-size: 10px; color: var(--color-text-secondary); opacity: 1; width: 150px; flex-shrink: 0; overflow: hidden; white-space: nowrap; }
  .cmp-gauge-track { flex: 1; height: 4px; background: var(--color-border-subtle); border-radius: 2px; overflow: hidden; }
  .cmp-gauge-fill { height: 100%; border-radius: 2px; width: 8%; background: var(--color-success); /* width driven by rAF — no CSS transition */ }
  .cmp-gauge-val { font-size: 10px; color: var(--color-text-secondary); opacity: 1; width: 52px; text-align: right; flex-shrink: 0; transition: color 0.4s; }
  /* Network SVG */
  .cmp-net { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; min-height: 80px; overflow: hidden; }
  .cmp-net svg line { transition: stroke 0.6s ease, stroke-width 0.6s ease; }
  /* Footer status bar */
  .cmp-statusbar {
    display: grid; grid-template-columns: 1fr 1fr;
    background: #0d0d0d; border-top: 1px solid var(--color-border-subtle); min-height: 32px;
    flex-shrink: 0;
  }
  .cmp-status-left  { padding: 8px 20px; font-size: 10px; color: var(--color-error); border-right: 1px solid var(--color-border-subtle); }
  .cmp-status-right { padding: 8px 20px; font-size: 10px; color: var(--color-success); }

  /* ── Simulation Control Bar ─────────────────────────────── */
  .sim-ctrl-wrap { display: flex; justify-content: center; margin-top: 20px; position: relative; z-index: 10; }
  .sim-ctrl {
    display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--color-panel); border: 1px solid var(--color-border); border-radius: 12px;
    padding: 14px 28px;
    box-shadow: 0 4px 20px 10px rgba(0,0,0,0.25);
    min-width: 340px;
  }
  .sim-ctrl-row { display: flex; align-items: center; gap: 20px; width: 100%; justify-content: space-between; }
  .sim-ctrl-time {
    font-family: 'Geist Mono','SF Mono','Fira Code',monospace;
    font-size: 15px; font-weight: 700; color: var(--color-text-secondary); opacity: 0.65; letter-spacing: 0.5px;
    min-width: 100px;
  }
  .sim-ctrl-play {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,0.92); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.12s, background 0.15s; flex-shrink: 0;
  }
  .sim-ctrl-play:hover { transform: scale(1.07); background: #ffffff; }
  .sim-ctrl-play svg { display: block; pointer-events: none; }
  .sim-ctrl-reset {
    display: flex; align-items: center; gap: 5px; min-width: 70px; justify-content: flex-end;
    font-family: 'Geist Mono','SF Mono','Fira Code',monospace;
    font-size: 12px; color: var(--color-text-secondary); opacity: 0.3; cursor: pointer;
    background: none; border: none; transition: color 0.15s; padding: 0;
  }
  .sim-ctrl-reset:hover { color: var(--color-text-secondary); opacity: 0.65; }
  .sim-ctrl-hint {
    font-family: 'Geist Mono','SF Mono','Fira Code',monospace;
    font-size: 11px; color: var(--color-text-secondary); opacity: 0.28; letter-spacing: 0.3px;
  }
  .sim-ctrl-phase {
    font-family: 'Geist Mono','SF Mono','Fira Code',monospace;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    padding: 4px 14px; border-radius: 4px; display: none;
  }
  .sim-ctrl-phase.ok     { display: block; color: var(--color-success); background: rgba(34,197,94,0.1); }
  .sim-ctrl-phase.warn   { display: block; color: var(--color-warn); background: rgba(245,158,11,0.1); }
  .sim-ctrl-phase.crit   { display: block; color: var(--color-error); background: rgba(239,68,68,0.1); }
  .sim-ctrl-phase.frozen { display: block; color: var(--color-error); background: rgba(220,38,38,0.12); }
  .sim-ctrl-phase.aura   { display: block; color: var(--color-text); background: var(--color-border-subtle); }
  .sim-ctrl-phase.blue   { display: block; color: #60a5fa; background: rgba(96,165,250,0.1); }

  /* ── Step-by-step section ── */
  .uc-steps { margin-top: 16px; }
  .uc-step { padding: 48px 0; border-top: 1px solid var(--color-border-subtle); }
  .uc-step-num { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 10px; }
  .uc-step-title { font-size: 18px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: -0.4px; margin-bottom: 10px; }
  .uc-step-body { font-size: 14px; color: var(--color-text-secondary); line-height: 1.75; max-width: 100%; margin-bottom: 0; }
  .uc-step-body strong { color: var(--color-text-secondary); font-weight: 600; }

  /* Step visual panel */
  .step-panel {
    margin-top: 24px;
    background: #0c0c0c; border-radius: 6px;
    border: 1px solid var(--color-border);
    overflow: hidden;
  }
  .step-panel-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .step-panel-label { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text-secondary); }
  .step-panel-regime { font-size: 9px; font-weight: 700; letter-spacing: 0.8px; padding: 2px 8px; border-radius: 3px; }
  .step-panel-body { display: grid; gap: 1px; background: var(--color-border-subtle); }
  .step-panel-body.two-col { grid-template-columns: 1fr 1fr; }
  .step-panel-body.three-col { grid-template-columns: 1fr 1fr 1fr; }
  .step-panel-body.center-only { grid-template-columns: 1fr; }
  .step-col { background: #0c0c0c; padding: 16px 18px; }
  .step-col-title { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 12px; }

  /* Mini bars inside step panels */
  .mini-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
  .mini-bar-label { font-size: 10px; color: var(--color-text-secondary); width: 120px; flex-shrink: 0; }
  .mini-bar-track { flex: 1; height: 3px; background: var(--color-border-subtle); border-radius: 2px; overflow: hidden; }
  .mini-bar-fill { height: 100%; border-radius: 2px; }
  .mini-bar-val { font-size: 9px; color: var(--color-text-secondary); width: 26px; text-align: right; flex-shrink: 0; }

  /* Diff comparison */
  .diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; align-items: stretch; }
  .diff-card { border-radius: 4px; padding: 22px; display: flex; flex-direction: column; }
  .diff-card.bad  { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.12); }
  .diff-card.good { background: rgba(34,197,94,0.06);  border: 1px solid rgba(34,197,94,0.12); }
  .diff-card-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; }
  .diff-card.bad  .diff-card-label { color: var(--color-text); }
  .diff-card.good .diff-card-label { color: var(--color-text); }
  .diff-item { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; font-size: 11px; line-height: 1.4; }
  .diff-card.bad  .diff-item { color: var(--color-error); }
  .diff-card.good .diff-item { color: var(--color-success); }
  .diff-item-icon { flex-shrink: 0; font-size: 10px; margin-top: 1px; }
  .diff-card.bad  .diff-item-icon { color: var(--color-error); }
  .diff-card.good .diff-item-icon { color: var(--color-success); }
  /* flex:1 makes the outcomes block grow to consume all variable-height space,
     so the divider line sits at the same Y in both columns and bullets align */
  .diff-outcomes { flex: 1; margin-bottom: 18px; padding-bottom: 16px;
                   border-bottom: 1px solid var(--color-border);
                   display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
                   align-content: start; }
  .diff-outcome-row { }
  .diff-outcome-label { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text); margin-bottom: 3px; }
  .diff-outcome-value { font-size: 12px; font-weight: 700; font-family: 'Geist Mono', monospace; line-height: 1.3; }
  .diff-card.bad  .diff-outcome-value { color: var(--color-error); }
  .diff-card.good .diff-outcome-value { color: var(--color-success); }

  /* Act section titles */
  .uc-act-section-title { font-size:12.1px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--color-text); margin-bottom:28px; text-align:center; }
  .uc-act-divider { padding: 44px 0 0; }
  .uc-step-contrast { font-size:9px; font-weight:400; letter-spacing:0.5px; color:var(--color-text-secondary); margin-left:8px; opacity: 0.5; }

  .snap-g-fill { transition: width 0.7s ease-out; }
  /* Step snapshots — mini frozen qdash panels */
  .step-snapshot { background:var(--color-bg); border:1px solid var(--color-border); border-radius:6px; font-family:'Geist Mono','SF Mono','Fira Code',monospace; margin-top:18px; overflow:hidden; }
  .snap-bar { background:#0d0d0d; border-bottom:1px solid var(--color-border-subtle); height:32px; display:flex; align-items:center; padding:0 14px; gap:14px; font-size:10px; }
  .snap-bar-time { color:var(--color-text-secondary); opacity: 0.75; flex-shrink:0; }
  .snap-bar-status { font-weight:700; letter-spacing:0.8px; flex-shrink:0; }
  .snap-bar-risk { margin-left:auto; color:var(--color-text-secondary); opacity: 0.75; font-size:9px; }
  .snap-panels { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--color-border-subtle); }
  .snap-panel { background:var(--color-panel); padding:12px 14px; }
  .snap-panel-title { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--color-text-secondary); opacity: 0.8; margin-bottom:10px; }
  .snap-agent-group { margin-bottom:8px; }
  .snap-agent-group:last-child { margin-bottom:0; }
  .snap-agent-name { font-size:8px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin-bottom:5px; }
  .snap-g { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:9px; }
  .snap-g-label { color:var(--color-text-secondary); opacity: 0.7; width:68px; flex-shrink:0; }
  .snap-g-track { flex:1; height:3px; background:var(--color-border-subtle); border-radius:2px; overflow:hidden; }
  .snap-g-fill { height:100%; border-radius:2px; }
  .snap-g-val { width:26px; text-align:right; flex-shrink:0; }
  .snap-log { display:flex; flex-direction:column; gap:5px; }
  .snap-log-row { display:flex; gap:6px; font-size:9px; line-height:1.35; }
  .snap-log-tag { flex-shrink:0; width:48px; font-weight:700; }
  .snap-log-msg { color:var(--color-text-secondary); opacity: 0.8; }
  .snap-log-msg.ok { color:var(--color-success); }
  .snap-log-msg.warn { color:var(--color-warn); }
  .snap-log-msg.crit { color:var(--color-error); }
  .snap-log-msg.aura { color:var(--color-text); font-weight:600; }

  /* Summary */
  .uc-summary { padding: 48px 0 0; border-top: 1px solid var(--color-border-subtle); }
  .uc-summary h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; color: var(--color-text); margin-bottom: 10px; }
  .uc-summary p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 24px; }
  .uc-summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 40px 0 48px; text-align: center; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); padding: 32px 0; }
  .uc-summary-stat-n { display: block; font-size: 40px; font-weight: 700; color: var(--color-text-secondary); font-family: 'Geist Mono', monospace; letter-spacing: -1.5px; line-height: 1; margin-bottom: 8px; }
  .uc-summary-stat-l { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-secondary); }
  .uc-summary-sub-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 20px; }
  .uc-summary ul, .uc-content > ul, .uc-steps ul, .uc-wrap ul { margin: 10px 0 24px 0px; padding: 0; list-style: none; }
  .uc-summary ul li, .uc-content > ul > li, .uc-steps ul li, .uc-wrap ul li { font-size: 14px; color: var(--color-text-secondary); line-height: 1.75; padding: 4px 0 4px 18px; position: relative; }
  .uc-summary ul li::before, .uc-content > ul > li::before, .uc-steps ul li::before, .uc-wrap ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-secondary); }

/* ── Generic scenario page extras ── */
.g-breadcrumb { font-size: 11px; color: var(--color-text-secondary); opacity: 0.35; letter-spacing: 0.5px; margin-bottom: 8px; cursor: pointer; }
.g-breadcrumb:hover { color: var(--color-text-secondary); opacity: 0.6; }
.g-breadcrumb-sep { margin: 0 6px; opacity: 0.4; }

/* ── Stub pages ── */
.stub-page { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.stub-inner { text-align: center; }
.stub-inner h2 { font-size: 28px; font-weight: 600; color: var(--color-text); margin-bottom: 12px; }
.stub-inner p  { font-size: 15px; color: var(--color-text-secondary); opacity: 0.5; }

/* ── Act divider label (use "With Rainfall" not "With Aura") ── */
/* Override any hardcoded "With Aura" text — handled in HTML */


/* Responsive Dropdown Menu Fixes (#2052)
   Horizontal placement is owned by positionDropdown() in v2-payment-sim.js:
   the panel stays left-aligned to its trigger button and only slides left far
   enough to keep its right edge inside the viewport gutter — never cropped.
   These media queries only control the panel's size, not its position. */
@media (max-width: 768px) {
  .dropdown-demo {
    width: min(280px, calc(100vw - 28px)) !important;
    padding: 12px !important;
  }
  .dd-two-col {
    grid-template-columns: 1fr !important;
  }
}


/* Mobile Navigation Fixes (#2052) */
@media (max-width: 900px) {
  .nav-logo-name { display: none; }
  .nav-logo { margin-right: auto; }
}

@media (max-width: 600px) {
  .nav-inner { padding: 0 16px; }
  .nav-link { padding: 6px 8px; font-size: 12px; }
  .nav-cta { padding: 6px 10px; font-size: 12px; }
  /* Hide 'How it Works' on very small screens to make room for CTA and Use Cases */
  .nav-items > a[onclick*="howitworks"] { display: none; }
}