/* QA Hub landing page. Palette mirrors the dashboard (frontend/src/styles.css). */

:root {
  color-scheme: light;
  --bg: #f3f3f0;
  --bg-2: #ecebe6;
  --surface-1: #fcfcfb;
  --surface-2: #f5f5f1;
  --surface-3: #e8e8e3;
  --border: #e1e0da;
  --border-strong: #c9c8c0;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #74736d;
  --accent: #6a4cf0;
  --accent-2: #5638df;
  --accent-ink: #ffffff;
  --accent-soft: rgba(106, 76, 240, 0.1);
  --accent-line: rgba(106, 76, 240, 0.32);
  --series: #2a78d6;
  --good: #0ca30c;
  --good-ink: #0a820a;
  --good-soft: rgba(12, 163, 12, 0.12);
  --warning: #e9a00b;
  --warning-ink: #9a6400;
  --warning-soft: rgba(250, 178, 25, 0.16);
  --serious: #ec835a;
  --serious-ink: #b9542c;
  --critical: #d03b3b;
  --critical-ink: #b82e2e;
  --critical-soft: rgba(208, 59, 59, 0.1);
  --low: #8d8c83;
  --shadow-sm: 0 1px 2px rgba(20, 18, 10, 0.06);
  --shadow: 0 1px 2px rgba(20, 18, 10, 0.05), 0 12px 40px -12px rgba(20, 18, 10, 0.16);
  --shadow-lg: 0 2px 6px rgba(20, 18, 10, 0.05), 0 40px 80px -30px rgba(40, 24, 120, 0.28);
  --glow: rgba(106, 76, 240, 0.18);
  --code-bg: #17161a;
  --code-text: #ecebf3;
  --radius: 10px;
  --radius-lg: 16px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: 16px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #111110;
  --bg-2: #161615;
  --surface-1: #1a1a19;
  --surface-2: #222220;
  --surface-3: #2c2c2a;
  --border: #2f2f2c;
  --border-strong: #4a4a45;
  --text: #f4f4f1;
  --text-2: #c3c2b7;
  --text-3: #95948a;
  --accent: #8b6dff;
  --accent-2: #a28aff;
  --accent-soft: rgba(139, 109, 255, 0.16);
  --accent-line: rgba(139, 109, 255, 0.4);
  --series: #3987e5;
  --good-ink: #4cd04c;
  --good-soft: rgba(76, 208, 76, 0.13);
  --warning: #fab219;
  --warning-ink: #fac253;
  --warning-soft: rgba(250, 178, 25, 0.14);
  --serious-ink: #f29b78;
  --critical-ink: #ff6b6b;
  --critical-soft: rgba(255, 107, 107, 0.13);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --glow: rgba(139, 109, 255, 0.22);
  --code-bg: #0c0c0b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #111110; --bg-2: #161615; --surface-1: #1a1a19; --surface-2: #222220; --surface-3: #2c2c2a;
    --border: #2f2f2c; --border-strong: #4a4a45; --text: #f4f4f1; --text-2: #c3c2b7; --text-3: #95948a;
    --accent: #8b6dff; --accent-2: #a28aff; --accent-soft: rgba(139, 109, 255, 0.16); --accent-line: rgba(139, 109, 255, 0.4);
    --good-ink: #4cd04c; --good-soft: rgba(76, 208, 76, 0.13); --warning: #fab219; --warning-ink: #fac253;
    --serious-ink: #f29b78; --critical-ink: #ff6b6b; --critical-soft: rgba(255, 107, 107, 0.13);
    --glow: rgba(139, 109, 255, 0.22); --code-bg: #0c0c0b;
  }
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--font); font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, pre, .mono { font-family: var(--mono); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
.skip-link:focus { top: 12px; text-decoration: none; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text);
  font-size: 15px; font-weight: 550; line-height: 1; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 20px -6px var(--accent);
}
.btn-primary:hover { background: var(--accent-2); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { color: var(--text); background: var(--surface-3); border-color: transparent; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.nav { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 17px; line-height: 1;
  box-shadow: 0 4px 14px -4px var(--accent);
}
.brand small { display: block; font-size: 11px; color: var(--text-3); font-weight: 500; letter-spacing: 0; margin-top: -2px; }
.nav-links { display: none; gap: 2px; margin-left: 20px; }
.nav-links a { color: var(--text-2); font-size: 14.5px; font-weight: 500; padding: 8px 10px; border-radius: 8px; }
.nav-links a:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-actions .btn { min-height: 36px; font-size: 14px; padding: 0 12px; }
.theme-toggle {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px;
  background: transparent; border: 1px solid transparent; color: var(--text-2);
}
.theme-toggle:hover { background: var(--surface-3); color: var(--text); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .i-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .i-moon { display: none; }
.nav-signin { display: inline-flex; }
@media (max-width: 559px) { .nav-actions .btn { padding: 7px 10px; font-size: 13px; white-space: nowrap; } .nav-signin { padding-inline: 6px; } }
.nav-auth:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; }
.brand { white-space: nowrap; }
@media (max-width: 380px) { .nav-actions { gap: 4px; } .theme-toggle { width: 32px; } header .brand > span:not(.brand-mark) { display: none; } }
@media (min-width: 1000px) { .nav-links { display: flex; } }

/* ---------- Sections ---------- */
section { position: relative; }
.section { padding: 88px 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--border); }
@media (max-width: 640px) { .section { padding: 64px 0; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -0.035em; font-weight: 700; }
.section-head p { margin-top: 16px; font-size: clamp(16px, 1.6vw, 18.5px); color: var(--text-2); line-height: 1.6; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.lead-def { color: var(--text); font-weight: 500; }
.muted { color: var(--text-2); }
.small { font-size: 14px; }
.tiny { font-size: 12.5px; color: var(--text-3); }
.note-sim {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3);
  border: 1px dashed var(--border-strong); padding: 3px 9px; border-radius: 999px;
}

.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.grid-2 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .grid-2.wide-right { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.checklist { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 28px; color: var(--text-2); }
.checklist li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 6px;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%238b6dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.checklist strong { color: var(--text); font-weight: 600; }

/* chips / segmented controls */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed='true'], .chip[aria-checked='true'], .chip[aria-selected='true'] {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--text);
}
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); }
.seg button {
  border: 0; background: transparent; color: var(--text-2); padding: 7px 12px; border-radius: 9px;
  font-size: 13.5px; font-weight: 550;
}
.seg button[aria-checked='true'], .seg button[aria-selected='true'] { background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-sm); }

/* severity + status pills */
.sev { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; }
.sev::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sev-critical { color: var(--critical-ink); background: var(--critical-soft); }
.sev-high { color: var(--serious-ink); background: color-mix(in srgb, var(--serious) 16%, transparent); }
.sev-medium { color: var(--warning-ink); background: var(--warning-soft); }
.sev-low { color: var(--text-3); background: var(--surface-3); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.pill-accent { background: var(--accent-soft); color: var(--accent); }
.pill-good { background: var(--good-soft); color: var(--good-ink); }
.pill-warn { background: var(--warning-soft); color: var(--warning-ink); }
.pill-bad { background: var(--critical-soft); color: var(--critical-ink); }
.key { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-3); }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto; height: 760px; z-index: -1;
  background:
    radial-gradient(600px 320px at 50% 18%, var(--glow), transparent 70%),
    radial-gradient(400px 260px at 82% 8%, color-mix(in srgb, var(--series) 14%, transparent), transparent 70%);
}
.hero::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 640px; z-index: -1; opacity: .5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}
.hero-copy { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-1) 80%, transparent);
  font-size: 13.5px; color: var(--text-2); box-shadow: var(--shadow-sm);
}
.hero-badge b { background: var(--accent-soft); color: var(--accent); font-weight: 650; padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.hero h1 {
  margin-top: 22px; font-size: clamp(38px, 6.6vw, 76px); font-weight: 750; letter-spacing: -0.045em; line-height: 1.02;
  text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent) 10%, color-mix(in srgb, var(--accent) 50%, var(--series)) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { margin: 22px auto 0; max-width: 720px; font-size: clamp(17px, 1.9vw, 20px); color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.hero-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-points { margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; list-style: none; font-size: 14px; color: var(--text-3); }
.hero-points li { display: inline-flex; align-items: center; gap: 7px; }
.hero-points li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }

/* ---------- Control room demo ---------- */
.demo-shell { margin-top: 52px; position: relative; }
.demo-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-3); }
.demo-hint span { display: inline-flex; align-items: center; gap: 6px; }
.demo-hint kbd { font: 600 11.5px var(--font); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--text-2); background: var(--surface-1); }
.cr {
  position: relative; border-radius: 18px; background: var(--surface-1); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13.5px; line-height: 1.45; text-align: left;
}
.cr::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.cr-top { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cr-dots { display: inline-flex; gap: 6px; }
.cr-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.cr-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.cr-title .brand-mark { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; box-shadow: none; }
.cr-title .slash { color: var(--text-3); font-weight: 400; }
.badge-sim { font-size: 11.5px; font-weight: 600; color: var(--warning-ink); background: var(--warning-soft); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.cr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.stat { padding: 12px 16px; border-right: 1px solid var(--border); min-width: 0; }
.stat:last-child { border-right: 0; }
.stat .lbl { font-size: 11.5px; color: var(--text-3); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .val { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .val small { font-size: 12px; font-weight: 550; color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.stat .val.bad { color: var(--critical-ink); }
.stat .val.warnc { color: var(--warning-ink); }
.stat .val.good { color: var(--good-ink); }
.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.12); } }

.cr-body { display: grid; grid-template-columns: 190px minmax(0, 1fr) 330px; min-height: 520px; }
.cr-products { border-right: 1px solid var(--border); padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-1); }
.cr-products .lbl { font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 4px 8px 6px; }
.prod-btn {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  width: 100%; padding: 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; text-align: left;
  color: var(--text-2);
}
.prod-btn:hover { background: var(--surface-2); color: var(--text); }
.prod-btn[aria-current='true'] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.prod-btn .pdot { width: 10px; height: 10px; border-radius: 3px; }
.prod-btn .pname { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-btn .pmeta { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 500; }
.prod-btn .phealth { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.prod-btn .phealth.warn { background: var(--warning); }
.prod-btn .phealth.bad { background: var(--critical); }

.cr-main { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); }
.cr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 8px; }
.cr-sec-head h3 { font-size: 13px; font-weight: 650; letter-spacing: 0; display: flex; align-items: center; gap: 8px; }
.cr-sec-head .tiny { font-size: 12px; }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--surface-3); font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.count.hot { background: var(--accent); color: #fff; }
.agents { display: grid; gap: 8px; padding: 0 14px 12px; }
.agent {
  border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; background: var(--surface-1);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; transition: border-color .3s, box-shadow .3s;
}
.agent.is-waiting { border-color: color-mix(in srgb, var(--warning) 55%, var(--border)); box-shadow: 0 0 0 3px var(--warning-soft); }
.agent-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-family: var(--mono); font-size: 13px; min-width: 0; }
.agent-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--low); }
.sdot.testing { background: var(--good); }
.sdot.testing::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--good); opacity: 0; animation: ping 1.8s ease-out infinite; }
.sdot.waiting { background: var(--warning); }
.sdot.capped { background: var(--critical); }
@keyframes ping { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
.agent-meta { grid-column: 1; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-run { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.agent-status { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-status b { font-weight: 600; color: var(--text); }
.agent-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.bar { flex: 1; display: flex; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; transition: width .45s ease; }
.bar .p { background: var(--good); }
.bar .f { background: var(--critical); }
.bar .b { background: var(--warning); }
.agent-bar .tiny { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 11.5px; }

.feed-wrap { border-top: 1px solid var(--border); flex: 1; display: flex; flex-direction: column; min-height: 180px; }
.feed { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; max-height: 236px; }
.feed li { display: grid; grid-template-columns: 58px 18px minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: 12.5px; padding: 3px 0; color: var(--text-2); animation: slidein .35s ease; }
.feed time { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.feed .ic { font-weight: 700; text-align: center; }
.feed .ok { color: var(--good-ink); }
.feed .no { color: var(--critical-ink); }
.feed .wa { color: var(--warning-ink); }
.feed .ac { color: var(--accent); }
.feed .fwho { font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 12px; }
.feed .fmsg { overflow-wrap: anywhere; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }

.cr-side { display: flex; flex-direction: column; min-width: 0; background: var(--surface-2); }
.cr-side .panel + .panel { border-top: 1px solid var(--border); }
.panel h3:focus { outline: none; }
.queue { display: grid; gap: 8px; padding: 0 12px 12px; }
.qcard { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); padding: 10px 11px; animation: slidein .35s ease; }
.qcard .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qcard .row .tiny { margin-left: auto; font-size: 11.5px; }
.qcard .ttl { margin-top: 6px; font-weight: 600; font-size: 13px; line-height: 1.35; color: var(--text); }
.qcard .ev { margin-top: 4px; font-size: 12px; color: var(--text-3); line-height: 1.4; }
.qcard .acts { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.qcard .acts .btn { min-height: 28px; font-size: 12.5px; padding: 0 10px; border-radius: 8px; }
.btn-confirm { background: var(--good-soft); border-color: transparent; color: var(--good-ink); }
.btn-confirm:hover { border-color: var(--good); }
.btn-reject:hover { border-color: var(--critical); color: var(--critical-ink); }
.qcard.ask { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.qcard .q { margin-top: 6px; font-size: 13px; color: var(--text); line-height: 1.4; }
.opt { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 550; }
.opt:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.empty { padding: 4px 12px 14px; font-size: 12.5px; color: var(--text-3); }
.cr-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12px; color: var(--text-3); }
.cr-foot b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-toast {
  position: absolute; left: 50%; bottom: 46px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 550;
  box-shadow: var(--shadow); max-width: calc(100% - 32px); text-align: center; transition: opacity .25s, transform .25s; z-index: 5;
}
.cr-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .cr-body { grid-template-columns: minmax(0, 1fr) 320px; }
  .cr-products { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px; }
  .cr-products .lbl { display: none; }
  .prod-btn { width: auto; flex: 1 1 160px; }
}
@media (max-width: 780px) {
  .cr-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cr-main { border-right: 0; }
  .cr-side { border-top: 1px solid var(--border); }
  .cr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-right: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--border); }
  .stat:nth-child(5) { border-right: 0; grid-column: span 2; }
  .prod-btn { flex: 1 1 calc(50% - 4px); grid-template-columns: 10px minmax(0, 1fr); }
  .prod-btn .phealth { display: none; }
  .feed li { grid-template-columns: 18px minmax(0, 1fr); }
  .feed time { display: none; }
}

/* ---------- Deploys ---------- */
.code {
  position: relative; background: var(--code-bg); color: var(--code-text); border-radius: 14px; padding: 18px 18px; font-size: 13px; line-height: 1.65;
  overflow-x: auto; white-space: pre; border: 1px solid #2a2930; margin: 0;
}
.code .c { color: #8a889a; }
.code .s { color: #b9a6ff; }
.code .k { color: #79c0ff; }
.code-wrap { position: relative; }
.copy-btn {
  position: absolute; top: 10px; right: 10px; z-index: 2; border: 1px solid #3a3942; background: #23222a; color: #e8e7ef;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
}
.copy-btn:hover { background: #2f2e38; }
/* ---------- Videos ---------- */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 960px) { .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .videos { grid-template-columns: minmax(0, 1fr); } }
.vcard { display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-1); overflow: hidden; text-align: left; padding: 0; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.vcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.vframe { position: relative; aspect-ratio: 16 / 10; background: radial-gradient(120% 120% at 20% 10%, var(--accent-soft), transparent 60%), var(--surface-2); overflow: hidden; border-bottom: 1px solid var(--border); }
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.vframe.ready video { opacity: 1; }
.vframe.missing video { display: none; }
.vph { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
.vph-ui { width: 78%; max-width: 280px; display: grid; gap: 7px; opacity: .9; }
.vph-ui .r { height: 9px; border-radius: 5px; background: var(--surface-3); }
.vph-ui .r.a { background: var(--accent-line); width: 55%; }
.vph-ui .r.s { width: 72%; }
.vph-ui .row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.vph-ui .row2 i { height: 34px; border-radius: 7px; background: var(--surface-1); border: 1px solid var(--border); }
.vplay { position: absolute; z-index: 2; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 8px; border-radius: 999px; background: color-mix(in srgb, var(--surface-1) 88%, transparent); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text); backdrop-filter: blur(6px); }
.vplay::before { content: ''; width: 0; height: 0; border-left: 8px solid var(--accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 4px; }
.vframe.missing .vplay::before { display: none; }
.vbody { padding: 14px 16px 16px; }
.vbody strong { display: block; font-size: 15.5px; letter-spacing: -0.01em; }
.vbody span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-3); line-height: 1.45; }
dialog.vdialog { width: min(1100px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-lg); }
dialog.vdialog::backdrop { background: rgba(10, 10, 10, .7); backdrop-filter: blur(4px); }
.vdialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.vdialog video { width: 100%; height: auto; background: #000; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); transition: border-color .2s; }
.faq details[open] { border-color: var(--border-strong); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; font-size: 16.5px; position: relative; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .a { padding: 0 20px 18px; color: var(--text-2); font-size: 15.5px; }
.faq h3 { display: inline; font: inherit; letter-spacing: inherit; }

/* ---------- Access / CTA ---------- */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 360px at 15% 30%, var(--glow), transparent 70%), radial-gradient(500px 300px at 90% 90%, color-mix(in srgb, var(--series) 12%, transparent), transparent 70%); }
.cta h2 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.04em; font-weight: 750; line-height: 1.05; }
.cta .lead { margin-top: 16px; color: var(--text-2); font-size: 18px; max-width: 520px; }
.form { padding: 26px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.form h3 { font-size: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.field label span { color: var(--text-3); font-weight: 500; }
.field input, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface-1); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input[aria-invalid='true'] { border-color: var(--critical); }
.row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 520px) { .row-2 { grid-template-columns: minmax(0, 1fr); } }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14.5px; border-radius: 10px; padding: 12px 14px; }
.form-status:empty { display: none; }
.form-status.ok { background: var(--good-soft); color: var(--good-ink); }
.form-status.err { background: var(--critical-soft); color: var(--critical-ink); }
.form-status a { color: inherit; text-decoration: underline; font-weight: 600; }
.form-done { text-align: center; padding: 30px 10px; }
.form-done .big { font-size: 42px; color: var(--accent); }
.form-done h3 { margin-top: 8px; }
.form-done p { margin-top: 8px; color: var(--text-2); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0 48px; font-size: 14px; color: var(--text-3); }
.foot { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot nav a { color: var(--text-2); }
.foot p { margin-top: 10px; max-width: 420px; }

.vcard { position: relative; }
.vbody h3 { font-size: 15.5px; letter-spacing: -0.01em; font-weight: 650; }
.vlink { all: unset; cursor: pointer; }
.vlink::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.vlink:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }
.code-wrap .code { padding-top: 46px; }
.code-wrap .code-label { position: absolute; top: 15px; left: 18px; z-index: 2; font: 600 11.5px var(--mono); color: #8a889a; letter-spacing: .02em; }
.code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Prologue ---------- */
.prologue { min-height: calc(100svh - var(--top)); display: flex; flex-direction: column; justify-content: center; padding: 48px 0 72px; position: relative; }
.prologue-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.prologue .hero-copy { text-align: left; margin: 0; max-width: none; }
.prologue .hero-sub { margin-left: 0; }
.prologue .hero-ctas { justify-content: flex-start; }
.prologue h1 { font-size: clamp(40px, 5.6vw, 76px); }
@media (max-width: 960px) {
  .prologue-grid { grid-template-columns: minmax(0, 1fr); }
  .prologue .hero-copy { text-align: center; }
  .prologue .hero-sub { margin-left: auto; }
  .prologue .hero-ctas { justify-content: center; }
}
.orbit { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbit-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px dashed var(--border-strong); }
.orbit-ring.r1 { width: 100%; height: 100%; opacity: .55; }
.orbit-ring.r2 { width: 68%; height: 68%; }
.orbit-ring.r3 { width: 36%; height: 36%; border-style: solid; border-color: var(--accent-line); background: radial-gradient(circle, var(--accent-soft), transparent 70%); }
.orbit-core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; }
.orbit-core .brand-mark { width: 54px; height: 54px; font-size: 32px; border-radius: 14px; box-shadow: 0 10px 40px -8px var(--accent); }
.orbit-core small { font-size: 12px; font-weight: 650; color: var(--text-2); }
.orbit-spin { position: absolute; inset: 0; margin: auto; border-radius: 50%; animation: spin 60s linear infinite; }
.orbit-spin.s1 { width: 100%; height: 100%; }
.orbit-spin.s2 { width: 68%; height: 68%; animation-duration: 44s; animation-direction: reverse; }
.op { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--rad, 220px))); }
.s1 .op { --rad: min(220px, 50vw - 30px); }
.s2 .op { --rad: min(150px, 34vw - 20px); }
.op-in {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font: 600 12px var(--mono); color: var(--text);
  animation: counter 60s linear infinite;
}
.s2 .op-in { animation-duration: 44s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter { from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); } to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); } }
@media (max-width: 960px) { .orbit { width: min(300px, 80vw); } .s1 .op { --rad: min(150px, 40vw); } .s2 .op { --rad: min(102px, 27vw); } }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 40px; border-radius: 14px; border: 2px solid var(--border-strong); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- Chapter title cards ---------- */
.chapter { position: relative; }
.ch-card { position: relative; min-height: 88svh; display: grid; place-items: center; padding: 64px var(--gutter); overflow: hidden; isolation: isolate; text-align: center; }
.ch-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 340px at 50% 50%, var(--glow), transparent 70%); opacity: .7; }
.ch-card.short { min-height: 60svh; }
.ch-card-inner { position: relative; max-width: 900px; display: grid; justify-items: center; gap: 14px; }
.ch-num {
  position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -54%); font-size: clamp(170px, 30vw, 380px); font-weight: 800; line-height: 1;
  letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--border-strong); opacity: .7; user-select: none;
}
.ch-kicker { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; }
.ch-card h2 { font-size: clamp(42px, 7.4vw, 104px); font-weight: 780; letter-spacing: -0.05em; line-height: .98; text-wrap: balance; }
.ch-lede { max-width: 620px; font-size: clamp(17px, 1.9vw, 21px); color: var(--text-2); text-wrap: pretty; }
.stage-panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 22px; }

/* Shared transitions for stage parts */
.stage .fx { transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.1,1), filter .55s ease; }

/* ---------- Ch1: hire ---------- */
.st-hire { gap: 16px; }
.hire-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pt {
  position: relative; padding: 16px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow);
  display: grid; gap: 10px; align-content: start; min-height: 178px; transition: opacity .5s, transform .5s, box-shadow .5s, border-color .5s;
}
.pt::before { content: ''; position: absolute; left: 16px; right: 16px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c); }
.pt-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.pt-h .pdot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.pt-h .key { margin-left: auto; }
.pt-agent { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.pt-agent code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-tpl { display: flex; flex-wrap: wrap; gap: 5px; }
.pt-tpl span { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.pt-run { font-size: 12px; font-weight: 600; color: var(--text-3); }
.pt-run.own { color: var(--warning-ink); }
.pt-agent, .pt-tpl, .pt-run, .pt-tpl .mx { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.pt-tpl .mx { display: none; }
.st-hire.at-1 .pt-agent, .st-hire.at-1 .pt-tpl { opacity: 1; transform: none; }
.st-hire.at-1 .pt:nth-child(2) .pt-agent, .st-hire.at-1 .pt:nth-child(2) .pt-tpl { transition-delay: .12s; }
.st-hire.at-1 .pt:nth-child(3) .pt-agent, .st-hire.at-1 .pt:nth-child(3) .pt-tpl { transition-delay: .24s; }
.st-hire.at-1 .pt:nth-child(4) .pt-agent, .st-hire.at-1 .pt:nth-child(4) .pt-tpl { transition-delay: .36s; }
.st-hire.at-2 .pt-tpl .mx { display: inline-block; opacity: 1; transform: none; }
.st-hire[data-step='2'] .pt:not(:first-child) { opacity: .4; transform: scale(.97); }
.st-hire[data-step='2'] .pt:first-child { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); }
.st-hire.at-3 .pt-run { opacity: 1; transform: none; }
.st-hire[data-step='3'] .pt:nth-child(2) { border-color: color-mix(in srgb, var(--warning) 50%, var(--border)); }
.st-hire .sdot.testing { opacity: 0; transition: opacity .4s .4s; }
.st-hire.at-1 .sdot.testing { opacity: 1; }
.stage-caption { position: relative; height: 22px; text-align: center; }
.stage-caption .cap { position: absolute; inset: 0; font-size: 13px; font-weight: 600; color: var(--text-3); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.stage[data-step='0'] .c0, .stage[data-step='1'] .c1, .stage[data-step='2'] .c2, .stage[data-step='3'] .c3 { opacity: 1; transform: none; }

/* ---------- Ch2: learn ---------- */
.learn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto auto; gap: 18px 20px; align-items: center; }
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 13px; color: var(--text-2); min-width: 0; transition: transform .8s cubic-bezier(.4,.1,.2,1), opacity .8s; transition-delay: calc(var(--i) * 90ms);
}
.doc b { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.doc::after { content: '✓ in briefing'; font-size: 10.5px; font-weight: 650; color: var(--good-ink); height: 0; opacity: 0; overflow: hidden; transition: opacity .4s .5s; }
.st-learn.at-1 .doc { transform: translateX(10px) scale(.96); opacity: .55; }
.st-learn.at-1 .doc::after { height: auto; opacity: 1; }
.core { display: grid; justify-items: center; gap: 8px; text-align: center; }
.core code { font-size: 12px; color: var(--text-2); }
.core-orb { position: relative; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, var(--accent-soft), transparent 70%); border: 1px solid var(--accent-line); transition: box-shadow .6s, transform .6s; }
.core-orb .brand-mark { width: 42px; height: 42px; font-size: 25px; border-radius: 11px; }
.st-learn.at-1 .core-orb { box-shadow: 0 0 0 10px var(--accent-soft), 0 0 50px var(--glow); transform: scale(1.06); }
.core-state { position: relative; display: block; width: 100%; height: 18px; }
.cs { position: absolute; inset: 0; font-size: 11.5px; font-weight: 650; color: var(--accent); opacity: 0; transition: opacity .4s; white-space: nowrap; }
.st-learn[data-step='0'] .s0, .st-learn[data-step='1'] .s1, .st-learn[data-step='2'] .s2, .st-learn[data-step='3'] .s3 { opacity: 1; }
.explore { grid-column: 1 / -1; position: relative; display: grid; }
.explore > * { grid-area: 1 / 1; transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.1,1); opacity: 0; transform: translateY(16px) scale(.97); }
.brief, .model { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-1); box-shadow: var(--shadow); display: grid; gap: 9px; align-content: start; }
.st-learn[data-step='0'] .brief { opacity: .35; transform: none; filter: blur(1px); }
.st-learn[data-step='1'] .brief, .st-learn[data-step='2'] .mini-browser, .st-learn[data-step='3'] .model { opacity: 1; transform: none; filter: none; }
.model-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; }
.brief-row, .model-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: 13px; color: var(--text-2); padding-top: 8px; border-top: 1px solid var(--border); }
.brief-row b, .model-row b { color: var(--text-3); font-weight: 600; }
.mini-browser { border-radius: 16px; border: 1px solid var(--border); background: var(--surface-1); box-shadow: var(--shadow); overflow: hidden; }
.mb-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--surface-3); font-size: 11.5px; color: var(--text-3); }
.mb-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.mb-bar span { margin-left: 6px; font-family: var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-body { position: relative; padding: 22px; display: grid; gap: 14px; min-height: 196px; align-content: start; }
.mb-btn { justify-self: start; padding: 8px 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.sk { display: block; height: 10px; border-radius: 6px; background: var(--surface-3); }
.w40 { width: 40%; } .w55 { width: 55%; } .w70 { width: 70%; }
.cursor { position: absolute; width: 14px; height: 14px; left: 70%; top: 70%; border-left: 2px solid var(--text); border-top: 2px solid var(--text); transform: rotate(-20deg) skew(5deg); }
.st-learn[data-step='2'] .cursor { animation: cursor 2.6s ease-in-out infinite; }
@keyframes cursor { 0% { left: 70%; top: 76%; } 45% { left: 14%; top: 52%; } 55% { left: 14%; top: 52%; transform: rotate(-20deg) scale(.85); } 100% { left: 70%; top: 76%; } }
.model-row { opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s; }
.model-share { font-size: 12.5px; font-weight: 650; color: var(--good-ink); opacity: 0; transition: opacity .4s .9s; }
.st-learn[data-step='3'] .model-row { opacity: 1; transform: none; }
.st-learn[data-step='3'] .model-row:nth-of-type(3) { transition-delay: .2s; }
.st-learn[data-step='3'] .model-row:nth-of-type(4) { transition-delay: .4s; }
.st-learn[data-step='3'] .model-share { opacity: 1; }
@media (max-width: 959px) {
  .learn { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px 12px; }
  .docs { gap: 6px; }
  .doc { padding: 7px 9px; font-size: 11.5px; }
  .doc b { font-size: 9.5px; }
  .core-orb { width: 60px; height: 60px; }
  .core-orb .brand-mark { width: 30px; height: 30px; font-size: 18px; }
  .core code { font-size: 10.5px; }
  .cs { font-size: 10.5px; white-space: normal; line-height: 1.2; }
  .core-state { height: 26px; }
  .brief, .model { padding: 11px 12px; gap: 6px; }
  .brief-row, .model-row { grid-template-columns: 74px minmax(0, 1fr); font-size: 11.5px; padding-top: 5px; gap: 6px; }
  .model-h { font-size: 13.5px; }
  .mb-body { min-height: 120px; padding: 14px; gap: 10px; }
}

/* ---------- Ch3: control room in a stage ---------- */
.st-live .cr { box-shadow: var(--shadow-lg); }
.st-live .cr-products { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 10px; gap: 6px; }
.st-live .prod-btn { width: auto; flex: 1 1 140px; padding: 6px 8px; }
.st-live .cr-body { grid-template-columns: minmax(0, 1fr) 300px; height: 470px; min-height: 0; }
.st-live .cr-main { overflow: hidden; }
.st-live .cr-side { overflow-y: auto; overscroll-behavior: contain; }
.st-live .cr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-live .stat { padding: 9px 14px; }
.st-live .stat .val { font-size: 20px; }
.st-live .feed { max-height: 190px; }
.st-live .agents { gap: 6px; }
.st-live .agent { padding: 9px 11px; }
.cr-main > *, .cr-side, .feed-wrap, .agents { transition: opacity .45s ease, filter .45s ease; }
.st-live[data-step='0'] .cr-side, .st-live[data-step='0'] .feed-wrap { opacity: .38; filter: saturate(.4); }
.st-live[data-step='1'] .cr-side, .st-live[data-step='1'] .agents { opacity: .38; filter: saturate(.4); }
.st-live[data-step='2'] .panel:last-child, .st-live[data-step='2'] .agents { opacity: .38; filter: saturate(.4); }
.st-live[data-step='3'] .panel:first-child, .st-live[data-step='3'] .feed-wrap { opacity: .38; filter: saturate(.4); }
.st-live .cr-side, .st-live .feed-wrap, .st-live .agents, .st-live .panel { transition: opacity .45s ease, filter .45s ease; }
.st-live:hover .cr-side, .st-live:hover .feed-wrap, .st-live:hover .agents, .st-live:hover .panel,
.st-live:focus-within .cr-side, .st-live:focus-within .feed-wrap, .st-live:focus-within .agents, .st-live:focus-within .panel { opacity: 1; filter: none; }
.st-live[data-step='0'] .agent-run .btn:not([disabled]) { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
.policy { display: inline-block; margin-left: 6px; font: 600 10.5px var(--font); padding: 1px 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); vertical-align: 1px; }
.policy.none { background: var(--good-soft); color: var(--good-ink); }
@media (max-width: 1099px) {
  .st-live .cr-body { grid-template-columns: minmax(0, 1fr) 280px; height: 460px; }
  .st-live[data-step] .cr-side, .st-live[data-step] .feed-wrap, .st-live[data-step] .agents, .st-live[data-step] .panel { opacity: 1; filter: none; }
}
@media (max-width: 780px) {
  .st-live .cr-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .st-live .cr-side { overflow: visible; }
  .st-live .cr-side .queue { max-height: 380px; overflow-y: auto; }
  .st-live .cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-live .stat:nth-child(2n) { border-right: 0; }
  .st-live .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .st-live .stat:nth-child(5) { grid-column: auto; }
  .st-live .prod-btn { flex: 1 1 calc(50% - 6px); }
}

/* ---------- Ch4: proof ---------- */
.bugcard { background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 20px; display: grid; gap: 14px; }
.bc-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bc-by { font-size: 12px; color: var(--text-3); }
.seen { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .4s cubic-bezier(.3,1.6,.5,1); }
.st-proof.at-3 .seen { opacity: 1; transform: none; }
.seen.pop { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.25); } }
.bc-t { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.bc-steps, .bc-ev, .dupes { opacity: .16; filter: blur(5px) grayscale(1); transform: translateY(10px) scale(.98); transition: opacity .6s ease, transform .6s ease, filter .6s ease; }
.st-proof.at-1 .bc-steps, .st-proof.at-2 .bc-ev, .st-proof.at-3 .dupes { opacity: 1; filter: none; transform: none; }
.st-proof .dup { opacity: 1; transform: none; }
.bc-steps ol { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--text-2); display: grid; gap: 2px; }
.ea { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ea > div { padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-2); }
.ea b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ea > div:last-child { background: var(--critical-soft); border-color: transparent; color: var(--critical-ink); }
.bc-ev { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shot, .clip { position: relative; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--surface-2); padding-bottom: 24px; }
.shot-bar { display: flex; gap: 4px; padding: 6px 8px; background: var(--surface-3); }
.shot-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.shot-body { padding: 12px; display: grid; gap: 10px; }
.shot-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--text-2); }
.shot-btn { padding: 4px 9px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 50%, var(--surface-1)); color: #fff; font-weight: 600; outline: 2px solid var(--critical); outline-offset: 3px; }
.clip-screen { height: 62px; display: grid; place-items: center; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); }
.play { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-1); box-shadow: var(--shadow-sm); position: relative; }
.play::after { content: ''; position: absolute; left: 11px; top: 8px; border-left: 9px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.clip-track { position: relative; height: 6px; margin: 10px 10px 0; border-radius: 4px; background: var(--surface-3); }
.clip-head { position: absolute; left: 0; top: -3px; width: 2px; height: 12px; background: var(--text); }
.st-proof.at-2 .clip-head { animation: scan 4s linear infinite; }
@keyframes scan { to { left: 100%; } }
.clip-bug { position: absolute; right: 6%; top: -3px; width: 3px; height: 12px; border-radius: 2px; background: var(--critical); }
.ev-lbl { position: absolute; left: 10px; bottom: 5px; font-size: 11px; font-weight: 600; color: var(--text-3); }
.dupes { display: grid; gap: 6px; }
.dup { font-size: 12.5px; color: var(--text-2); padding: 7px 10px; border-radius: 9px; border: 1px dashed var(--border-strong); }
@media (max-width: 959px) {
  .bugcard { padding: 14px; gap: 10px; }
  .bc-t { font-size: 15.5px; }
  .bc-steps ol { font-size: 12.5px; }
  .ea { margin-top: 6px; }
  .clip-screen { height: 44px; }
}

/* ---------- Ch5: fixed means verified ---------- */
.pipe-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.pp { position: relative; text-align: center; font-size: 12.5px; font-weight: 600; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-3); transition: all .4s; }
.st-fix.at-1 .pp { color: var(--text); border-color: color-mix(in srgb, var(--good) 50%, var(--border)); background: var(--good-soft); }
.st-fix.at-1 .pp:nth-child(2) { transition-delay: .25s; } .st-fix.at-1 .pp:nth-child(3) { transition-delay: .5s; } .st-fix.at-1 .pp:nth-child(4) { transition-delay: .75s; }
.st-fix[data-step='1'] .pp:nth-child(4) { animation: glow 1.4s 1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 4px var(--good-soft); } }
.board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 290px; }
.col { border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); padding: 10px; }
.col span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.bcard {
  position: absolute; width: calc((100% - 20px) / 3 - 16px); left: 8px; display: grid; gap: 4px; padding: 11px; border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 13px;
  transition: left .8s cubic-bezier(.5,0,.2,1), top .8s cubic-bezier(.5,0,.2,1), border-color .4s, background .4s;
}
.bcard b { font-weight: 600; line-height: 1.3; }
.bcard.a { top: 40px; }
.bcard.b { top: 40px; left: calc((100% - 20px) / 3 * 2 + 20px + 8px); }
.bstate { font-size: 11.5px; font-weight: 650; display: none; }
.st-fix[data-step='0'] .b0, .st-fix[data-step='1'] .b1, .st-fix.at-2 .b2 { display: block; }
.b0 { color: var(--text-3); } .b1 { color: var(--accent); } .b2, .bstate.ok { color: var(--good-ink); } .bstate.bad { color: var(--critical-ink); }
.st-fix[data-step='1'] .bcard.a { left: calc((100% - 20px) / 3 + 10px + 8px); }
.st-fix.at-2 .bcard.a { left: calc((100% - 20px) / 3 * 2 + 20px + 8px); border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }
.st-fix.at-2 .bcard.b { top: 158px; }
.bcard.b .bstate.ok { display: block; }
.st-fix.at-3 .bcard.b { left: 8px; top: 158px; border-color: var(--critical); background: color-mix(in srgb, var(--critical) 6%, var(--surface-1)); }
.st-fix.at-3 .bcard.b .ok { display: none; }
.st-fix.at-3 .bcard.b .bad { display: block; }
@media (max-width: 959px) {
  .pipe-row { gap: 5px; margin-bottom: 10px; }
  .pp { font-size: 11px; padding: 7px 3px; }
  .board { height: 290px; gap: 6px; }
  .col { padding: 7px; }
  .col span { font-size: 10px; letter-spacing: .02em; }
  .bcard { width: calc((100% - 12px) / 3 - 8px); left: 4px; padding: 8px; font-size: 11.5px; }
  .bcard.a { top: 30px; }
  .bcard.b { top: 30px; left: calc((100% - 12px) / 3 * 2 + 12px + 4px); }
  .st-fix[data-step='1'] .bcard.a { left: calc((100% - 12px) / 3 + 6px + 4px); }
  .st-fix.at-2 .bcard.a { left: calc((100% - 12px) / 3 * 2 + 12px + 4px); }
  .st-fix.at-2 .bcard.b, .st-fix.at-3 .bcard.b { top: 160px; }
  .bcard b { font-size: 11.5px; }
  .st-fix.at-3 .bcard.b { left: 4px; }
  .bstate { font-size: 10.5px; }
}

/* ---------- Ch6: editor ---------- */
.term { border-radius: 16px; overflow: hidden; background: var(--code-bg); border: 1px solid #2a2930; box-shadow: var(--shadow-lg); color: var(--code-text); }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #1d1c22; border-bottom: 1px solid #2a2930; font-size: 12.5px; color: #a09eae; }
.term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3942; }
.term-bar span { margin-left: 8px; font-weight: 600; }
.term .code-wrap.setup .code { border: 0; border-bottom: 1px solid #2a2930; border-radius: 0; font-size: 12.5px; }
.convo { -webkit-mask-image: linear-gradient(transparent, #000 36px); mask-image: linear-gradient(transparent, #000 36px); height: 270px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0; padding: 0 16px 16px; overflow: hidden; }
.xc { flex-shrink: 0; display: grid; gap: 6px; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(12px); transition: max-height .7s ease, opacity .5s ease .1s, transform .5s ease .1s, margin .5s; }
.st-mcp.at-1 .x1, .st-mcp.at-2 .x2, .st-mcp.at-3 .x3 { max-height: 220px; opacity: 1; transform: none; margin-top: 14px; }
.xc .u { justify-self: end; max-width: 88%; background: #6a4cf0; color: #fff; padding: 8px 12px; border-radius: 12px 12px 4px 12px; font-size: 13.5px; }
.xc .tc { font: 12px var(--mono); color: #8a889a; }
.xc .a { max-width: 92%; background: #1d1c22; border: 1px solid #2a2930; padding: 9px 12px; border-radius: 12px 12px 12px 4px; font-size: 13.5px; color: #d6d4e2; }
.xc .a code { font-size: 12px; background: #2a2930; padding: 1px 5px; border-radius: 5px; color: #fff; }
@media (max-width: 959px) { .convo { height: 190px; } .xc .u, .xc .a { font-size: 12.5px; } .term .code-wrap.setup .code { font-size: 11.5px; padding: 40px 12px 12px; } }

/* ---------- Ch7: the dial ---------- */
.dial { display: grid; gap: 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px; }
.dial .seg { justify-self: start; }
.lanes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 236px; }
.lane { border-radius: 12px; border: 1px dashed var(--border-strong); padding: 8px 10px; }
.lane span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.l-board { border-style: solid; background: var(--surface-2); }
.l-check span::after { content: ' · optional'; text-transform: none; letter-spacing: 0; font-weight: 500; }
.rep {
  position: absolute; top: calc(34px + var(--r) * 49px); left: calc(50% + 11px); width: calc(50% - 21px); display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: 12.5px; font-weight: 550;
  transition: left .7s cubic-bezier(.5,0,.2,1); transition-delay: calc(var(--r) * 90ms);
}
.rep .sev { flex: none; }
.rep .rt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep small { margin-left: auto; flex: none; font-size: 11px; color: var(--text-3); font-weight: 500; }
.st-dial[data-mode='all'] .rep, .st-dial[data-mode='uncertain'] .rep[data-sure='0'] { left: 10px; }
.dial-note { font-size: 13.5px; color: var(--text-2); min-height: 20px; }
.ask { border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border)); border-radius: 12px; padding: 12px; display: grid; gap: 8px; opacity: .25; filter: grayscale(.8); transition: opacity .5s, filter .5s; }
.st-dial.at-3 .ask { opacity: 1; filter: none; }
.ask .row { display: flex; align-items: center; gap: 8px; }
.ask .q { font-size: 13.5px; }
.ask .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-out { font-size: 13px; font-weight: 600; color: var(--good-ink); max-height: 0; opacity: 0; overflow: hidden; transition: all .4s; }
.ask.answered .ask-out { max-height: 40px; opacity: 1; }
.ask.answered .acts { display: none; }
@media (max-width: 959px) {
  .dial { padding: 12px; gap: 9px; }
  .dial .seg button { padding: 6px 9px; font-size: 12.5px; }
  .lanes { height: 200px; gap: 6px; }
  .rep { top: calc(30px + var(--r) * 42px); left: calc(50% + 7px); width: calc(50% - 13px); padding: 6px 7px; font-size: 11.5px; gap: 5px; }
  .st-dial[data-mode='all'] .rep, .st-dial[data-mode='uncertain'] .rep[data-sure='0'] { left: 6px; }
  .rep small, .rep .sev { display: none; }
  .l-check span::after { content: ''; }
  .ask { padding: 9px; gap: 6px; }
  .dial-note { min-height: 38px; font-size: 12.5px; }
  .ask .q { font-size: 12.5px; }
}


/* ---------- MCP ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-3); width: max-content; max-width: 100%; }
.tab { border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 550; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; }
.tab[aria-selected='true'] { background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-sm); }
.tab .m { font-size: 13px; opacity: .8; }
.tabpanel { margin-top: 14px; }
.tabpanel ol { margin: 14px 0 0; padding-left: 20px; color: var(--text-2); font-size: 14.5px; display: grid; gap: 4px; }
.chat { display: grid; gap: 10px; padding: 18px; }
.chat .u, .chat .a { padding: 10px 13px; border-radius: 12px; font-size: 14px; max-width: 92%; }
.chat .u { justify-self: end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat .a { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--text-2); }
.chat .a code { font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; color: var(--text); }
.chat .tool-call { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 18px; }
.prompt-chips .chip { font-size: 13px; min-height: 30px; text-align: left; }
.can { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 22px; }
.can h3 { font-size: 15px; }
.can ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; display: grid; gap: 3px; }
@media (max-width: 560px) { .can { grid-template-columns: minmax(0, 1fr); } }
.agent-tools { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.agent-tools code { font-size: 12px; padding: 3px 8px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); }


/* =====================================================================
   SITE SHELL: nav menu, footer, pages
   ===================================================================== */
.site-header .nav { position: relative; }
.nav-links a[aria-current='page'] { color: var(--text); background: var(--accent-soft); }
.menu-btn {
  display: none; width: 36px; height: 36px; place-items: center; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-2);
}
.menu-btn svg { width: 19px; height: 19px; }
.menu-btn:hover { color: var(--text); border-color: var(--border-strong); }
@media (max-width: 999px) {
  .menu-btn { display: inline-grid; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin: 0; flex-direction: column; gap: 2px;
    padding: 8px var(--gutter) 14px; background: var(--surface-1); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 10px; font-size: 15.5px; }
}
.site-footer.mini { padding: 14px 0 16px; font-size: 13px; }
.foot-mini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; color: var(--text-3); }
.foot-mini a { color: var(--text-2); }
.foot-mini nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }

.page { padding-top: 44px; padding-bottom: 64px; }
.page.page-narrow { max-width: calc(880px + var(--gutter) * 2); }
.page-head { max-width: 800px; margin-bottom: 32px; }
.page-head h1 { margin-top: 10px; font-size: clamp(36px, 5vw, 60px); font-weight: 780; letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; }
.page-head .badge-sim { display: inline-block; }
.page-lede { margin-top: 14px; font-size: clamp(17px, 1.7vw, 20px); color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.page-points { margin: 18px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); font-size: 15px; max-width: 760px; }
.page-points strong { color: var(--text); }
.page-next { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.page-narrow .page-next { justify-content: center; }
.page-narrow .page-head { text-align: center; margin-inline: auto; }
.form-h { font-size: 20px; letter-spacing: -0.015em; }
.req-grid { align-items: start; }
.req-grid .page-head { margin-bottom: 0; }
.demo-room { margin-top: 8px; }
.demo-room .cr { box-shadow: var(--shadow-lg); }
.grad {
  background: linear-gradient(100deg, var(--accent) 10%, color-mix(in srgb, var(--accent) 50%, var(--series)) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* =====================================================================
   HOME: one viewport
   ===================================================================== */
.page-home { min-height: 100svh; display: flex; flex-direction: column; }
.home { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 4.2vh, 48px); padding: clamp(14px, 3vh, 40px) 0; position: relative; isolation: isolate; overflow: hidden; }
.home::before {
  content: ''; position: absolute; inset: -10% -10% 30%; z-index: -1;
  background: radial-gradient(600px 340px at 30% 30%, var(--glow), transparent 70%), radial-gradient(420px 280px at 85% 20%, color-mix(in srgb, var(--series) 12%, transparent), transparent 70%);
}
.home-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.home h1 { margin-top: 18px; font-size: clamp(34px, min(5.3vw, 7.4vh), 76px); font-weight: 780; letter-spacing: -0.048em; line-height: 1.02; text-wrap: balance; }
.home .hero-sub { margin: 18px 0 0; max-width: 620px; font-size: clamp(16px, min(1.6vw, 2.4vh), 20px); }
.home .hero-ctas { margin-top: clamp(18px, 3.4vh, 30px); justify-content: flex-start; }
.home .orbit { --o: min(400px, 44vh, 34vw); width: var(--o); }
.home .s1 .op { --rad: calc(var(--o) / 2); }
.home .s2 .op { --rad: calc(var(--o) * .34); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; height: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 3px 13px; align-content: start;
  padding: 16px 34px 16px 16px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tile:hover { text-decoration: none; border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.tile-ic { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.tile-ic svg { width: 22px; height: 22px; }
.tile-t { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; }
.tile-d { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.tile-go { position: absolute; right: 14px; top: 14px; color: var(--text-3); transition: color .2s, transform .2s; }
.tile:hover .tile-go { color: var(--accent); transform: translateX(2px); }
@media (max-width: 1099px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); }
  .home .orbit { display: none; }
  .home h1 { font-size: clamp(34px, 10vw, 46px); }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tile { padding: 12px 30px 12px 12px; grid-template-columns: 36px minmax(0, 1fr); }
  .tile-ic { width: 36px; height: 36px; }
  .home .hero-ctas .btn { flex: 1 1 auto; }
}

/* =====================================================================
   HOW IT WORKS: slide deck
   ===================================================================== */
.page-deck { height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.page-deck .site-header { position: relative; flex: none; border-bottom-color: var(--border); }
.deck { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.deck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; }
.deck-h1 { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.deck-count { font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-count b { color: var(--text); }
.deck-stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y; }
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(56px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.1,1), visibility 0s linear .6s;
}
.slide.is-before { transform: translateX(-56px); }
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .05s, transform .6s cubic-bezier(.2,.7,.1,1), visibility 0s; }
.slide-grid { height: 100%; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; padding-top: 6px; padding-bottom: 6px; }
.slide-live .slide-grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 36px; }
.slide-copy { min-width: 0; }
.slide-copy h2 { margin-top: 8px; font-size: clamp(32px, min(4.3vw, 6.6vh), 62px); font-weight: 780; letter-spacing: -0.047em; line-height: 1; text-wrap: balance; }
.slide-lede { margin-top: 12px; font-size: clamp(15.5px, min(1.35vw, 2.2vh), 19px); color: var(--text-2); max-width: 480px; text-wrap: pretty; }
.beat-list { list-style: none; margin: clamp(12px, 2.6vh, 24px) 0 0; padding: 0; display: grid; gap: 2px; max-width: 500px; }
.bt-btn {
  position: relative; width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 10px; color: var(--text-3); font-size: clamp(14px, min(1.15vw, 1.9vh), 15.5px); line-height: 1.45; transition: color .3s, background .3s;
}
.bt-btn:hover { background: var(--surface-2); color: var(--text-2); }
.bt-dot { width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--border-strong); transition: background .3s, box-shadow .3s; }
.bt-txt strong { font-weight: 650; color: inherit; }
.bt.is-on .bt-btn { color: var(--text-2); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border); }
.bt.is-on .bt-txt strong { color: var(--text); }
.bt.is-on .bt-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bt-btn::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transform: scaleX(0); transform-origin: left; }
.deck.playing .bt.is-on .bt-btn::after { opacity: .7; animation: beatfill var(--beat-ms, 3200ms) linear forwards; }
@keyframes beatfill { to { transform: scaleX(1); } }
.beat-dots { display: none; gap: 6px; margin-top: 8px; }
.beat-dots button { width: 22px; height: 22px; border: 0; background: transparent; padding: 0; display: grid; place-items: center; }
.beat-dots button::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: all .3s; }
.beat-dots button[aria-current='step']::before { width: 18px; border-radius: 4px; background: var(--accent); }
.slide-more { margin-top: 14px; font-size: 14.5px; font-weight: 600; }
.slide-cta { margin-top: clamp(14px, 2.4vh, 22px); display: flex; flex-wrap: wrap; gap: 10px; }
.slide-visual { position: relative; height: 100%; min-height: 0; min-width: 0; }
.fit { position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.fit > .stage { display: flex; flex-direction: column; gap: 14px; }
.deck-nav { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 16px; }
.deck-nav .btn { flex: none; min-height: 40px; }
.deck-dots { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 4px; min-width: 0; }
.deck-dot {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid transparent; background: transparent; padding: 5px 10px 5px 5px;
  border-radius: 999px; color: var(--text-3); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.deck-dot:hover { color: var(--text); background: var(--surface-2); }
.dd-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); font: 650 11px var(--font); color: var(--text-2); transition: all .3s; }
.deck-dot.done .dd-n { background: var(--accent-soft); color: var(--accent); }
.deck-dot[aria-current='step'] { color: var(--text); background: var(--surface-1); border-color: var(--border); }
.deck-dot[aria-current='step'] .dd-n { background: var(--accent); color: #fff; }
.dd-t { overflow: hidden; text-overflow: ellipsis; }
.deck-dot:not([aria-current='step']) .dd-t { display: none; }
.deck-dot:not([aria-current='step']) { padding-right: 5px; }
.deck-dots { flex: 1 1 auto; justify-content: center; overflow: hidden; }
.deck-dots li { min-width: 0; flex: none; }
.deck-dots li:has([aria-current='step']) { flex: 0 1 auto; }

/* Deck on phones and small tablets: visual on top, beat text below, everything inside the viewport. */
@media (max-width: 899px) {
  .deck-head { padding-top: 10px; }
  .slide-grid, .slide-live .slide-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
  .slide-visual { order: -1; }
  .slide-copy h2 { font-size: clamp(25px, 7.4vw, 34px); margin-top: 4px; }
  .slide-copy .ch-kicker { font-size: 11.5px; }
  .slide-lede { display: none; }
  .beat-list { margin-top: 6px; }
  .bt:not(.is-on) { display: none; }
  .bt-btn { grid-template-columns: minmax(0, 1fr); padding: 6px 0 8px; font-size: 15px; color: var(--text-2); }
  .bt.is-on .bt-btn { background: none; box-shadow: none; }
  .bt-dot { display: none; }
  .bt-btn::after { left: 0; right: 0; bottom: 0; }
  .beat-dots { display: flex; }
  .slide-more { display: none; }
  .slide-cta .btn { flex: 1 1 auto; min-height: 42px; font-size: 15px; padding: 0 14px; }
  .deck-nav { gap: 8px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .deck-nav .btn span { display: none; }
  .deck-nav .btn { width: 44px; padding: 0; }
  .deck-dot { padding: 2px; border: 0; }
  .deck-dot .dd-t { display: none; }
  .dd-n { width: 26px; height: 26px; }
  .deck-dot[aria-current='step'] { background: none; }
}
@media (max-width: 380px) { .deck-dots { gap: 1px; } .dd-n { width: 24px; height: 24px; } }

/* Reduced motion: no transitions, no auto-advance, beats as a short static list. */
.rm .slide, .rm .slide.is-active, .rm .slide.is-before { transition: none; transform: none; }
.rm .bt { display: list-item; list-style: none; }
.rm .bt-btn { color: var(--text-2); background: none; box-shadow: none; cursor: default; }
.rm .bt .bt-txt strong { color: var(--text); }
.rm .bt-dot { background: var(--accent); }
.rm .beat-dots { display: none; }
@media (max-width: 899px) {
  .rm .slide-copy { overflow-y: auto; max-height: 46svh; }
  .rm .bt-btn { padding: 3px 0; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .sdot.testing::after { display: none; }
  .orbit-spin, .op-in { animation: none !important; }
}

.h-sm { font-size: 15px; letter-spacing: -0.01em; font-weight: 650; }
/* Phones: the menu button joins the header, so the wordmark text hides a little earlier than before. */
@media (max-width: 430px) {
  header .brand > span:not(.brand-mark) { display: none; }
  .nav-actions { gap: 4px; }
  .theme-toggle { width: 32px; }
}
@media (min-width: 900px) {
  .slide-live .slide-grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .slide-live .slide-lede { font-size: 16px; }
  .slide-live .beat-list { margin-top: 12px; }
  .slide-live .bt-btn { font-size: 14px; padding: 6px 10px; }
  .slide-live .slide-copy h2 { font-size: clamp(30px, min(3.6vw, 5.6vh), 50px); }
}
@media (max-width: 899px) {
  .deck-h1 { white-space: nowrap; font-size: 11.5px; }
  .deck-count .sep, #deck-name { display: none; }
}
.doc { overflow-wrap: anywhere; }
/* Pages fill the viewport so the footer sits at the bottom of short pages. */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px 0; }