/* ══════════════════════════════════════════════════════════════════
   knock-knock — warm cream design system (PostHog-inspired)
   Cream canvas, olive ink, a single saturated yellow-orange CTA, and
   teal for links/interactive accents. IBM Plex Sans across every role.
   Flat: 1px hairline borders, no drop shadows; tight 4–8px radii.
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* canvas + ink */
  --canvas:   #EEEFE9;  /* warm cream page ground */
  --surface:  #FFFFFF;  /* white cards on cream */
  --surface-2:#E5E7E0;  /* soft surface: secondary buttons, code chips */
  --ink:      #23251D;  /* deep olive-charcoal — headlines, near-black on cream */
  --muted:    #4D4F46;  /* olive-gray body text */
  --faint:    #6C6E63;  /* metadata, lowest-emphasis */
  --hairline: #BFC1B7;  /* 1px card border / rule */
  --hairline-2:#DCDFD2; /* soft inset rule */

  /* the single saturated CTA (yellow-orange) — dark text on it */
  --cta:      #F7A501;
  --cta-press:#DD9001;
  --on-cta:   #23251D;

  /* interactive / link accent (teal) — links, eyebrows, ghost buttons,
     active states. Kept distinct from the CTA so yellow stays scarce. */
  --accent:   #1078A3;
  --accent-press:#0F5F80;
  --accent-wash:#DCEAF6;

  /* semantic status (chat content only) — PostHog callout pastels */
  --green:    #2C8C66;
  --green-wash:#D9EDDF;
  --red:      #CD4239;
  --red-wash: #F7D6D3;
  --amber:    #B17816;

  /* type — system SF Pro on Apple, IBM Plex Sans everywhere else */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "IBM Plex Sans",
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Source Code Pro", "JetBrains Mono", Menlo, Consolas, monospace;

  /* radius scale (tight, PostHog-like) */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Flat system: no drop shadows. Every box-shadow resolves to a crisp
     1px hairline ring, so cards read as bordered, not lifted. */
  --shadow: 0 0 0 1px var(--hairline);
  --shadow-lg: 0 0 0 1px var(--hairline);

  --maxw: 1120px;
  --nav-h: 56px;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.sprite { position: absolute; }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.125em; }

code, pre { font-family: var(--mono); }
em { font-style: normal; color: var(--ink); }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ─────────────  TYPE  ───────────── */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent); margin-bottom: 18px;
}
.sec-title {
  font-size: clamp(30px, 4.6vw, 52px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.06;
}
.sec-lede {
  font-size: clamp(17px, 1.7vw, 21px); color: var(--muted);
  line-height: 1.45; max-width: 60ch; margin-top: 18px;
}
.sec-head { margin-bottom: 56px; max-width: 80ch; }

.icon-stack {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin: 0 3px;
}
.icon-stack .si {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--bg); object-fit: contain; background: #fff;
  margin-left: -5px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.icon-stack .si:first-child { margin-left: 0; }

/* ─────────────  BUTTONS  ───────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 500; cursor: pointer;
  border-radius: 980px; border: 1px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn .ic { font-size: 1.05em; }
.btn-sm { font-size: 14px; padding: 7px 16px; }
.btn-lg { font-size: 17px; padding: 12px 26px; }
.btn-primary { background: var(--cta); color: var(--on-cta); font-weight: 600; }
.btn-primary:hover { background: var(--cta-press); }
.btn-ghost { color: var(--accent); background: transparent; }
.btn-ghost:hover { color: var(--accent-press); }
.btn-ghost:hover .ic { transform: translateX(3px); }
.btn-ghost .ic { transition: transform .18s ease; }

/* ─────────────  NAV  ───────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(238,239,233,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--hairline);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; height: 100%;
  padding: 0 24px; display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name { letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 26px; margin: 0 auto; }
.nav-links a { font-size: 14px; color: var(--muted); transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-gh { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); transition: color .15s; }
.nav-gh:hover { color: var(--ink); }
.nav-gh img { display: block; }

/* ─────────────  HERO (centered, parallax visual)  ───────────── */
.hero { padding: 0 0 clamp(56px, 8dvh, 96px); overflow: hidden; }

.hero-head {
  padding: calc(var(--nav-h) + clamp(56px, 9dvh, 108px)) 0 clamp(40px, 6dvh, 64px);
  text-align: center;
}

.hero-title {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.grad { color: var(--accent); }

.hero-sub {
  font-size: clamp(17px, 1.65vw, 21px);
  color: var(--muted);
  line-height: 1.52;
  max-width: 52ch;
  margin: 24px auto 0;
}
.hero-cta { display: flex; gap: 12px; margin-top: 36px; justify-content: center; flex-wrap: wrap; }

/* Visual wrap: centered, max-width constrained, parallax container */
.hero-visual-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  will-change: transform;
  position: relative;
}

/* Ambient glow behind the visual */
.hero-visual-wrap::before {
  content: '';
  position: absolute;
  inset: -20% -15%;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(16,120,163,.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* ── Network visual grid (nodes | chat | nodes) ── */
.hero-visual {
  display: grid;
  grid-template-columns: 128px 1fr 128px;
  gap: 10px;
  align-items: stretch;
  position: relative;
  width: 100%;
}

/* Hero chat messages: staggered reveal on load */
.hero-chat .msg {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s cubic-bezier(.16,1,.3,1) var(--md, 0ms),
    transform 0.5s cubic-bezier(.16,1,.3,1) var(--md, 0ms);
}
.hero-chat .msg.is-in { opacity: 1; transform: none; }

/* Three-column feature slogans below the visual */
.hero-feat-section {
  padding: clamp(48px, 7dvh, 72px) 0 0;
}
.hero-feat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.hero-feat-item {}
.hero-feat-ic {
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--accent);
  font-size: 18px;
  margin-bottom: 16px;
}
.hero-feat-title {
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.hero-feat-body {
  font-size: clamp(14px, 1.3vw, 15px);
  color: var(--muted);
  line-height: 1.6;
}
.hero-feat-body code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 6px;
}

/* Node columns */
.net-nodes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  position: relative;
  z-index: 1;
}

/* Node cards */
.net-node-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-md);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  cursor: default;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
  min-height: 34px;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(35,37,29,.05), 0 0 0 0.5px var(--hairline-2);
}
.net-node-card img {
  width: 18px; height: 18px; flex: none;
  border-radius: 3px; object-fit: contain;
}
.net-node-card > span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.net-node-card:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(16,120,163,.12), 0 0 0 1px rgba(16,120,163,.25);
}
.net-node-dim { opacity: 0.35; pointer-events: none; }
.net-label-dim { font-size: 10.5px; color: var(--faint); }

/* Status dots — absolute so they don't push text */
.net-node-card { position: relative; }
.net-dot {
  width: 5px; height: 5px; border-radius: 50%;
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  flex: none;
}
/* Reserve space for status dots */
#netNodesPlatform .net-node-card { padding-right: 20px; }
#netNodesAgents .net-node-card   { padding-right: 20px; }
.net-dot-live  { background: var(--green); }
.net-dot-near  { background: var(--amber); }
.net-dot-async { background: var(--hairline); }

/* Agent working status dot */
.net-dot-agent {
  width: 5px; height: 5px; border-radius: 50%;
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: var(--hairline-2);
  flex: none;
  transition: background 0.3s ease;
}
@keyframes agentWork {
  0%   { box-shadow: 0 0 0 0   rgba(44,140,102,0.6); }
  55%  { box-shadow: 0 0 0 5px rgba(44,140,102,0);   }
  100% { box-shadow: 0 0 0 0   rgba(44,140,102,0);   }
}
.net-dot-agent.is-working {
  background: var(--green);
  animation: agentWork 0.85s ease-out;
}

/* Chat wrapper — center hub */
.hero-chat-wrap {
  position: relative;
  z-index: 1;
  border-radius: var(--r-xl);
  box-shadow: 0 2px 12px rgba(35,37,29,.06), 0 0 0 1px var(--hairline-2);
  transition: box-shadow .3s ease;
}

/* SVG overlay — behind nodes+chat */
.hero-net-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* Rim glow on pulse arrival */
@keyframes rimGlow {
  0%   { box-shadow: 0 0 0 1px rgba(16,120,163,0),      0 6px 40px rgba(16,120,163,0); }
  16%  { box-shadow: 0 0 0 1.5px rgba(16,120,163,.7),   0 8px 48px rgba(16,120,163,.18); }
  100% { box-shadow: 0 0 0 1px rgba(16,120,163,0),      0 6px 40px rgba(16,120,163,0); }
}
.hero-chat-wrap.rim-active { animation: rimGlow 1.8s ease-out forwards; }

/* statement section removed — content integrated into hero-block-feat */

/* ═════════════  CHAT COMPONENT VOCABULARY  ═════════════ */
.chat {
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
}
.chat-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--hairline-2);
  background: var(--surface);
}
.chat-hash { color: var(--faint); font-weight: 600; font-size: 16px; }
.chat-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.chat-members { display: inline-flex; align-items: center; margin-left: auto; }
.chat-members .ava { width: 24px; height: 24px; font-size: 9px; margin-left: -7px; border: 2px solid var(--surface); }
.chat-members .ava:first-child { margin-left: 0; }
.chat-count { font-size: 12px; color: var(--faint); margin-left: 8px; font-variant-numeric: tabular-nums; }
.chat-thread-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  padding: 4px 10px; border-radius: 980px;
}
.chat-thread-tag .ic { font-size: 13px; color: var(--accent); }

.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }

/* avatars: tasteful colored monograms (the product's real visual language) */
.ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--a, var(--ink)); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  text-transform: uppercase; user-select: none;
}
.ava-bot { border-radius: 9px; text-transform: lowercase; font-size: 11px; }

.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg-main { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.msg-meta b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.msg-meta time { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.msg-text { font-size: 14.5px; line-height: 1.5; color: #2b2b2e; }
.msg-text code, .ask-cmd code, .deny-cmd, .attribution code {
  font-family: var(--mono); font-size: .88em; background: var(--surface-2);
  padding: 1.5px 6px; border-radius: 6px; color: #3a3a3d;
}
.mention { color: var(--accent); font-weight: 500; background: var(--accent-wash); padding: 1px 5px; border-radius: 5px; }

.badge {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 980px;
  letter-spacing: 0.01em; line-height: 1.5;
}
.badge-owner { background: var(--accent-wash); color: var(--accent); }
.badge-bot { background: var(--surface-2); color: var(--muted); }

.react {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  padding: 3px 9px; border-radius: 980px;
}
.react .ic { font-size: 13px; color: var(--accent); }
.react-done { font-size: 15px; padding: 2px 9px; }

.tapped { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-weight: 600; }
.tapped .ic { font-size: 14px; }

.attribution {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11.5px; color: var(--faint); line-height: 1.4;
}
.attribution .ic { font-size: 13px; color: var(--green); flex: none; }

/* ── embeds inside messages ── */
.embed { margin-top: 10px; border-radius: var(--r-md); border: 1px solid var(--hairline-2); overflow: hidden; }
.embed-head {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid var(--hairline-2);
}
.embed-head .ic { font-size: 14px; }

.embed-work { background: var(--surface); }
.embed-work .embed-head { color: var(--accent); }
.dot-work { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(16,120,163,.4); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px rgba(16,120,163,0); } 100% { box-shadow: 0 0 0 0 rgba(16,120,163,0); } }
/* Plan checklist (TodoWrite list) — sits above the tool steps; glyphs mirror the
   product's exact vocabulary: planned ○ → in progress ◐ → done ✓. */
.work-plan { list-style: none; padding: 10px 13px 0; display: flex; flex-direction: column; gap: 7px; }
.work-plan li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.work-plan .tg { width: 14px; flex: none; text-align: center; font-size: 13px; line-height: 1; }
.work-plan li.t-done { color: var(--ink); }
.work-plan li.t-done .tg { color: var(--green); }
.work-plan li.t-run { color: var(--ink); }
.work-plan li.t-run .tg { color: var(--accent); }
.work-plan li.t-todo .tg { color: var(--muted); }
.work-plan + .work-steps { border-top: 1px solid var(--hairline); margin-top: 10px; }
.work-steps { list-style: none; padding: 10px 13px; display: flex; flex-direction: column; gap: 8px; }
.work-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.work-steps li.done { color: var(--ink); }
.work-steps li.done .ic { color: var(--green); font-size: 14px; }
.work-steps li code { font-family: var(--mono); font-size: .85em; }
.spin { width: 12px; height: 12px; border: 2px solid var(--hairline); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.embed-ask .embed-head { color: var(--amber); background: #FFFBF2; }
.ask-cmd { padding: 11px 13px 9px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ask-cmd code { background: var(--ink); color: #fff; }
.ask-cmd span { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.ask-row { display: flex; gap: 8px; padding: 0 13px 12px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--hairline); color: var(--ink); background: var(--surface);
}
.pill .ic { font-size: 13px; }
.pill-allow { background: var(--green); color: #fff; border-color: transparent; }
.pill-deny { background: var(--surface); color: var(--red); border-color: var(--red-wash); }
.ask-foot { padding: 0 13px 11px; font-size: 11.5px; color: var(--faint); }
.ask-foot b { color: var(--muted); }

.embed-deny { background: var(--red-wash); border-color: #F6D9D9; }
.embed-deny .embed-head { color: var(--red); border-bottom-color: #F6D9D9; }
.deny-cmd { padding: 10px 13px 2px; font-family: var(--mono); font-size: 13px; }
.deny-cmd s { color: var(--red); opacity: .8; }
.deny-foot { padding: 4px 13px 11px; font-size: 11.5px; color: #A23B3F; }

.embed-conflict .embed-head { color: #7C44A6; background: #E7D8EE; }
.embed-conflict .ask-row { padding: 11px 13px; }

/* file share / ingest embeds (file-exchange) */
.embed-file { background: var(--surface); }
.embed-file .embed-head { color: var(--accent); }
.embed-file-in .embed-head { color: var(--green); }
.file-row { display: flex; align-items: center; gap: 9px; padding: 11px 13px 4px; font-size: 13.5px; }
.file-row .ic { font-size: 17px; color: var(--accent); flex: none; }
.embed-file-in .file-row .ic { color: var(--green); }
.file-row b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.file-size { margin-left: auto; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.file-foot { padding: 2px 13px 11px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }

/* tiny inline glyph inside a badge (e.g. 📱 phone marker) */
.ic-in { width: 1em; height: 1em; vertical-align: -0.13em; margin-right: 1px; }

/* ═════════════  FLOW (pinned scrollytelling, tabbed scenarios)  ═════════════ */
.flow { position: relative; }
.flow-stage { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: 0 24px; background: var(--canvas); z-index: 2; }
.flow-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* Scenario tabs — same visual language as the security dial / setup tabs */
.flow-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.flow-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: 980px; cursor: pointer; font-family: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--muted); transition: border-color .18s, background .18s, color .18s;
}
.flow-tab .ic { font-size: 16px; color: var(--faint); transition: color .18s; }
.flow-tab:hover { border-color: var(--hairline); color: var(--ink); }
.flow-tab.is-active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.flow-tab.is-active .ic { color: var(--accent); }

/* Only the active scenario is laid out; the others are removed from flow. */
.flow-scenario { display: none; }
.flow-scenario.is-active { display: block; }

.flow-grid {
  margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 64px; align-items: center;
}
.flow-chat-col { display: flex; justify-content: center; }
.flow-chat { width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }
.chat-scroll { height: 460px; overflow: hidden; position: relative; }
.chat-track { padding: 18px; display: flex; flex-direction: column; gap: 18px; will-change: transform; }
.flow-msg { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.flow-msg.is-in { opacity: 1; transform: none; }

.flow-note-col { position: relative; }
.flow-kicker { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 22px; }
.flow-notes { list-style: none; position: relative; min-height: 200px; }
.flow-note {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease;
}
.flow-note.is-on { opacity: 1; transform: none; position: relative; }
.flow-note h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 14px; }
.flow-note p { font-size: 17px; color: var(--muted); line-height: 1.5; max-width: 40ch; }
.flow-note code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.flow-progress { margin-top: 40px; height: 3px; background: var(--hairline-2); border-radius: 980px; overflow: hidden; max-width: 220px; }
.flow-progress span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 980px; transition: width .3s ease; }

/* ═════════════  CONTROL  ═════════════ */
.control { padding: clamp(90px, 13vh, 150px) 0; }

/* ═════════════  USE CASES (horizontal rail)  ═════════════ */
.cases { padding: clamp(70px, 10vh, 120px) 0; background: var(--surface-2); }
.cases-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82vw);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 24px 28px; max-width: var(--maxw); margin: 0 auto;
  scrollbar-width: none;
}
.cases-rail::-webkit-scrollbar { display: none; }
.scene {
  scroll-snap-align: start; background: var(--surface);
  border: 1px solid var(--hairline-2); border-radius: var(--r-lg);
  padding: 26px; display: flex; flex-direction: column;
}
.scene-tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-wash); padding: 5px 12px; border-radius: 980px; margin-bottom: 18px;
}
.scene-tag .ic { font-size: 14px; }
.scene h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 10px; }
.scene > p { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }
.scene-chat { margin-top: auto; box-shadow: none; background: var(--surface-2); border-color: var(--hairline-2); }
.chat-mini { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.chat-mini .ava { width: 28px; height: 28px; font-size: 10px; }
.chat-mini .msg-text { font-size: 13.5px; }
.chat-mini .embed { margin-top: 8px; background: var(--surface); }
.chat-mini .ask-row { padding: 10px; }
.chat-mini .pill { font-size: 11.5px; padding: 5px 11px; }

/* ═════════════  PERMISSION CONSOLE (#control — dial + tiers as one widget)  ═════════════ */
.console {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); overflow: hidden;
}
/* the dial: a single segmented control seated on the console */
.console-dial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.cstop {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 12px; background: transparent; border: 0; border-right: 1px solid var(--hairline-2);
  cursor: pointer; font-family: inherit; color: var(--muted); transition: background .18s, color .18s;
}
.cstop:last-child { border-right: 0; }
.cstop .ic { font-size: 20px; color: var(--faint); transition: color .18s; }
.cstop span { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.cstop i { font-style: normal; font-size: 11.5px; color: var(--faint); }
.cstop:hover { background: rgba(0,0,0,.025); color: var(--ink); }
.cstop.is-active { background: var(--surface); color: var(--ink); box-shadow: inset 0 2px 0 var(--accent); }
.cstop.is-active .ic, .cstop.is-active i { color: var(--accent); }

.console-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.console-json pre { overflow-x: auto; }
.console-tools { padding: 26px 28px; border-right: 1px solid var(--hairline-2); }
.console-summary { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 20px; min-height: 26px; }

.tool-rows { list-style: none; display: flex; flex-direction: column; }
.tool-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--hairline-2); }
.tool-name { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.tool-name .ic { font-size: 17px; color: var(--faint); }
.tierpill {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 12px; border-radius: 980px; min-width: 62px; text-align: center;
}
.tierpill[data-tier="allow"] { background: var(--green-wash); color: var(--green); }
.tierpill[data-tier="ask"]   { background: #FBEFD6; color: var(--amber); }
.tierpill[data-tier="deny"]  { background: var(--red-wash); color: var(--red); }

.floor-strip { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-md); }
.floor-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--canvas); }
.floor-ic .ic { font-size: 17px; }
.floor-strip p { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.floor-strip b { color: var(--ink); font-weight: 600; }
.floor-strip code { font-family: var(--mono); font-size: .86em; background: var(--surface); padding: 1px 5px; border-radius: 5px; }

.console-result { padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.console-card { min-height: 132px; }
.console-json { margin: 0; }
.console-json pre { padding-top: 8px; }

/* approval-card preview states (reuses embed visual language) */
.cc { border-radius: var(--r-md); border: 1px solid var(--hairline-2); overflow: hidden; }
.cc-head { display: flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--hairline-2); }
.cc-head .ic { font-size: 14px; }
.cc-cmd { padding: 11px 13px 9px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cc-cmd code { font-family: var(--mono); font-size: 12px; background: var(--ink); color: #fff; padding: 1.5px 7px; border-radius: 5px; }
.cc-cmd .arg { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.cc-cmd .arg.struck { text-decoration: line-through; color: var(--red); opacity: .85; }
.cc-row { display: flex; gap: 8px; padding: 0 13px 11px; }
.cc-foot { padding: 0 13px 12px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.cc-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.cc-verdict .ic { font-size: 15px; }
/* state tints */
.cc-ask  .cc-head { color: var(--amber); background: #FFFBF2; }
.cc-allow .cc-head { color: var(--green); background: var(--green-wash); }
.cc-allow .cc-verdict { color: var(--green); }
.cc-deny .cc-head, .cc-floor .cc-head { color: var(--red); background: var(--red-wash); border-bottom-color: #F0C9C6; }
.cc-deny, .cc-floor { border-color: #F0C9C6; }
.cc-deny .cc-verdict, .cc-floor .cc-verdict { color: var(--red); }

/* the two invariants, framed into the console base */
.console-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.rail-item { display: flex; gap: 13px; align-items: flex-start; padding: 20px 28px; }
.rail-item + .rail-item { border-left: 1px solid var(--hairline-2); }
.rail-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--accent); }
.rail-ic .ic { font-size: 18px; }
.rail-item p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.rail-item b { color: var(--ink); font-weight: 600; }

/* ═════════════  ARCHITECTURE — one connected scene  ═════════════ */
.arch { padding: clamp(80px, 12vh, 140px) 0; background: var(--surface-2); }

/* pattern switcher */
.fig-pats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px; }
.fig-pat {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  background: var(--surface); border: 1px solid var(--hairline-2); border-radius: 980px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.fig-pat .ic { font-size: 16px; color: var(--faint); transition: color .18s; }
.fig-pat:hover { color: var(--ink); border-color: var(--hairline); }
.fig-pat.is-active { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.fig-pat.is-active .ic { color: var(--accent); }
.fig-caption { text-align: center; max-width: 64ch; margin: 0 auto 34px; font-size: 14.5px; line-height: 1.55; color: var(--muted); min-height: 44px; }
.fig-caption code { font-family: var(--mono); font-size: .86em; background: var(--surface); padding: 1px 6px; border-radius: 5px; }

/* the stage: machines flank a central chat; ledger spans the base */
.fig-stage {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; gap: 22px 48px; align-items: start;
  grid-template-columns: 1fr 1.22fr 1fr;
  grid-template-areas:
    "maya  chat  you"
    "devin chat  you"
    "ledger ledger ledger";
}
#nodeMaya { grid-area: maya; } #nodeDevin { grid-area: devin; }
#nodeChat { grid-area: chat; align-self: stretch; }
#nodeYou { grid-area: you; align-self: start; }
#nodeLedger { grid-area: ledger; }
.fig-node { position: relative; z-index: 1; transition: transform .3s ease, box-shadow .3s ease; }
.fig-node.is-lit { box-shadow: 0 0 0 2px var(--accent); }

.fig-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.fig-edge { fill: none; stroke: var(--hairline); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .65; }
.fig-pulse { fill: var(--accent); }

/* machine = a local terminal card */
.machine { background: var(--ink); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink); }
.machine-bar { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #2C2E25; border-bottom: 1px solid rgba(255,255,255,.07); }
.m-dots { display: inline-flex; gap: 5px; }
.m-dots i { width: 9px; height: 9px; border-radius: 50%; background: #4D4F46; }
.m-dots i:first-child { background: #E06C5A; } .m-dots i:nth-child(2) { background: #E0B23E; } .m-dots i:last-child { background: #5BA773; }
.m-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #D6D8CF; }
.m-title .ic { font-size: 14px; color: #9A9C92; }
.m-rt { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--cta); background: rgba(247,165,1,.12); padding: 2px 7px; border-radius: 980px; }
.term { padding: 12px 13px; font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: #C9CBC2; min-height: 72px; }
.term-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp { color: #6FBF8F; } .tp-you { color: #7FB1D6; } .tpath { color: #7FA8C9; margin-left: 8px; }
.term-line.tok { color: #8FCAA5; } .term-line.trun { color: #E6CC74; }
.tspin { display: inline-block; animation: spin 1.1s linear infinite; }
.machine-foot { display: flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 11px; color: var(--muted); background: var(--surface); border-top: 1px solid var(--hairline-2); }
.machine-foot .ic { font-size: 14px; color: var(--accent); flex: none; }

/* the messaging app — the one shared surface */
.appwin { display: flex; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; min-height: 100%; box-shadow: 0 0 0 1px var(--hairline); }
.app-rail { width: 48px; flex: none; background: var(--surface-2); border-right: 1px solid var(--hairline-2); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 11px 0; }
.app-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline-2); opacity: .45; transition: opacity .2s; }
.app-ic.is-on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.app-rail-note { margin-top: auto; font-size: 8px; line-height: 1.3; color: var(--faint); text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-head { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--hairline-2); }
.app-body { padding: 14px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.app-body .ava { width: 28px; height: 28px; font-size: 10px; }
.app-body .msg-text { font-size: 13px; }
.app-foot { display: flex; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--hairline-2); }
.fig-tag { font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 980px; background: var(--accent-wash); color: var(--accent); }

/* the ledger — appends as work happens */
.ledger { background: var(--ink); border-radius: var(--r-lg); padding: 15px 18px; }
.ledger-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #EEEFE9; margin-bottom: 13px; }
.ledger-head .ic { font-size: 15px; }
.ledger-head i { font-style: normal; font-weight: 400; font-size: 11.5px; color: #9A9C92; }
.ledger-blocks { display: flex; gap: 8px; flex-wrap: wrap; }
.lblock { font-family: var(--mono); font-size: 11px; color: #C9CBC2; background: #2C2E25; border: 1px solid rgba(255,255,255,.08); padding: 5px 11px; border-radius: 6px; transition: opacity .3s, border-color .3s, color .3s; }
.lblock.is-new { border-color: var(--cta); color: #fff; }
.lblock.is-reverted { opacity: .38; text-decoration: line-through; }
@keyframes lpop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
.lblock.pop { animation: lpop .42s cubic-bezier(.16,1,.3,1); }

.arch-legend { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 36px; max-width: 920px; margin-left: auto; margin-right: auto; }
.arch-legend > div { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--hairline-2); }
.arch-legend dt { flex: none; width: 118px; font-size: 13px; font-weight: 600; color: var(--ink); }
.arch-legend dd { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ═════════════  CODE BLOCK  ═════════════ */
.code { position: relative; background: var(--ink); border-radius: var(--r-md); overflow: hidden; }
.code-cap { font-size: 11.5px; color: #8E8E93; padding: 11px 16px 0; font-family: var(--mono); }
.code-cap span { color: #5a5a5e; }
.code pre { padding: 14px 16px; overflow-x: auto; }
.code-cap + pre { padding-top: 8px; }
.code code { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: #F5F5F7; }
.code .copy {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 32px; height: 32px;
  background: rgba(255,255,255,.08); border: none; border-radius: 8px;
  color: #c7c7cc; cursor: pointer; font-size: 15px; transition: background .15s, color .15s;
}
.code .copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.code .copy.copied { color: var(--green); }

/* ═════════════  QUICK START  ═════════════ */
.start { padding: clamp(90px, 13vh, 150px) 0; background: var(--surface-2); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step-n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--canvas); font-size: 15px; font-weight: 600;
}
.step-body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.step .code { margin-bottom: 12px; }
.step-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.step-note code { font-family: var(--mono); font-size: .9em; background: var(--surface); padding: 1px 5px; border-radius: 5px; }

.platforms { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.plat-row h4 { font-size: 13px; font-weight: 600; color: var(--faint); letter-spacing: 0.02em; margin-bottom: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500;
  padding: 7px 13px; border-radius: 980px; background: var(--surface); border: 1px solid var(--hairline-2);
}
.chip i { font-style: normal; font-size: 11px; color: var(--faint); }
.chip-ready { border-color: var(--accent); color: var(--accent); }
.chip-ready i { color: var(--accent); }
.plat-note { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ═════════════  NETWORK SVG (hero diagram)  ═════════════ */

/* Edge lines — subtle tracks, visible but quiet */
.net-edge {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 0.75;
  opacity: 0.45;
}
.net-edge-dim { opacity: 0.15; }

/* Pulse dots */
.net-pulse { fill: var(--accent); opacity: 0; }
.net-pulse-rev { fill: #5A9EBF; }

/* Node rect backgrounds */
.node-bg {
  fill: #2C2E26;
  stroke: #3F4138;
  stroke-width: 1;
}
.node-bg-dim { fill: #222419; stroke: #2E3028; }

/* Node text */
.node-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  fill: #C4C6BD;
  text-anchor: middle;
  pointer-events: none;
}
.node-label-sm { font-size: 10.5px; fill: #606257; }
.node-tag {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 500;
  fill: #525448;
  text-anchor: middle;
  pointer-events: none;
}

/* Hover highlight on nodes */
.net-node:hover .node-bg { fill: #353730; stroke: var(--accent); stroke-width: 1.5; }
.net-node:hover .node-label { fill: #EEEFE9; }
.net-node { cursor: default; }

/* Hub circles */
.hub-ring { fill: none; stroke: var(--accent); stroke-width: 1; }
.hub-core { fill: var(--accent); }
.hub-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  fill: #525448;
  text-anchor: middle;
  pointer-events: none;
}

/* ═════════════  CLOSER  ═════════════ */
.closer { padding: clamp(100px, 16vh, 180px) 0; text-align: center; }
.closer-pre { font-size: clamp(15px, 1.8vw, 20px); font-weight: 500; color: var(--faint); letter-spacing: -0.01em; }
.closer-answer { font-size: clamp(30px, 4.8vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.07; margin-top: 12px; max-width: 18ch; margin-left: auto; margin-right: auto; }
.closer-sub { font-size: clamp(15px, 1.5vw, 18px); color: var(--muted); line-height: 1.5; max-width: 46ch; margin: 18px auto 0; }
.closer-cta { display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* ═════════════  FOOTER  ═════════════ */
.footer { border-top: 1px solid var(--hairline-2); padding: 38px 0; }
.footer-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; margin: 0 auto; }
.footer-links a { font-size: 13.5px; color: var(--muted); transition: color .15s; }
.footer-links a:hover { color: var(--ink); }
.footer-note { font-size: 13px; color: var(--faint); }

/* ═════════════  SETUP PAGE  ═════════════ */
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 24px; }

.subhero { padding: calc(var(--nav-h) + 64px) 0 8px; }
.subhero .eyebrow { margin-bottom: 14px; }
.subhero h1 { font-size: clamp(38px, 5.2vw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
.subhero .lede { font-size: clamp(17px, 1.8vw, 21px); color: var(--muted); line-height: 1.45; max-width: 56ch; margin-top: 16px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.toc a { font-size: 13px; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline-2); padding: 6px 13px; border-radius: 980px; transition: border-color .15s, color .15s; }
.toc a:hover { color: var(--ink); border-color: var(--hairline); }
.toc a b { color: var(--faint); font-weight: 600; margin-right: 6px; }

/* floating, scroll-following TOC — lives in the left gutter on wide screens,
   anchored to the centred 920px content so the gap stays constant. */
.toc-rail { position: fixed; top: calc(var(--nav-h) + 90px); left: max(16px, calc(50vw - 664px)); width: 180px; z-index: 40; display: none; }
.toc-rail-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; margin-bottom: 12px; padding-left: 14px; }
.toc-rail ol { list-style: none; display: flex; flex-direction: column; border-left: 1px solid var(--hairline-2); }
.toc-rail a { display: flex; gap: 9px; align-items: baseline; font-size: 13px; color: var(--muted); padding: 6px 0 6px 13px; margin-left: -1px; border-left: 2px solid transparent; line-height: 1.3; transition: color .15s, border-color .15s; }
.toc-rail a:hover { color: var(--ink); }
.toc-rail .tr-n { font-size: 11px; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.toc-rail a[aria-current="true"] { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.toc-rail a[aria-current="true"] .tr-n { color: var(--accent); }
@media (min-width: 1340px) { .toc-rail { display: block; } }

/* below the rail's breakpoint the gutter is too thin — fall back to a
   floating button that opens a slide-in drawer with the same list. */
.toc-fab, .toc-backdrop, .toc-drawer { display: none; }
@media (max-width: 1339.98px) {
  .toc-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 18px; bottom: 18px; z-index: 90;
    padding: 10px 16px; border-radius: 980px; border: 0; background: var(--ink); color: var(--canvas);
    font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; box-shadow: 0 4px 18px rgba(35,37,29,.20);
    transition: transform .18s ease, background .18s ease; }
  .toc-fab:hover { background: #34362c; }
  .toc-fab:active { transform: scale(.96); }
  .toc-fab .ic { font-size: 16px; }

  .toc-backdrop { display: block; position: fixed; inset: 0; z-index: 190; background: rgba(35,37,29,.34);
    opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .toc-backdrop.is-open { opacity: 1; pointer-events: auto; }

  .toc-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 200;
    width: min(300px, 84vw); padding: 20px 8px 24px 20px; background: var(--surface); border-left: 1px solid var(--hairline-2);
    box-shadow: -8px 0 28px rgba(35,37,29,.12); overflow-y: auto; visibility: hidden; transform: translateX(100%);
    transition: transform .26s cubic-bezier(.16,1,.3,1), visibility .26s; }
  .toc-drawer.is-open { visibility: visible; transform: none; }
  .toc-drawer-head { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; margin-bottom: 14px; }
  .toc-drawer-head .toc-rail-title { margin: 0; padding: 0; }
  .toc-drawer-close { display: inline-flex; padding: 6px; border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: var(--r-sm); }
  .toc-drawer-close:hover { color: var(--ink); background: var(--surface-2); }
  .toc-drawer-close .ic { font-size: 18px; }
  .toc-drawer ol { list-style: none; display: flex; flex-direction: column; }
  .toc-drawer a { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--muted); padding: 11px 12px; border-radius: var(--r-md); line-height: 1.3; }
  .toc-drawer a:hover { background: var(--surface-2); color: var(--ink); }
  .toc-drawer .tr-n { font-size: 12px; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
  .toc-drawer a[aria-current="true"] { color: var(--accent); font-weight: 600; }
  .toc-drawer a[aria-current="true"] .tr-n { color: var(--accent); }
}

.gsec { padding: 56px 0; border-top: 1px solid var(--hairline-2); scroll-margin-top: 70px; }
.gsec > h2 { font-size: clamp(25px, 3.2vw, 34px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.gsec-lede { font-size: 17px; color: var(--muted); line-height: 1.5; max-width: 60ch; margin-top: 12px; }
.gsec h3.sub { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 32px 0 16px; }
.gsec p.body { font-size: 15.5px; color: var(--muted); line-height: 1.55; max-width: 64ch; margin-top: 16px; }
.gsec p.body code, .gtable code, .check code, .callout code, .def code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; color: #3a3a3d; }
.gsec p.body a, .gsec-lede a, .callout a, .gtable a { color: var(--accent); }
.gsec .steps { margin-top: 28px; }
.gsec .code { margin-top: 18px; }

/* definition grid (the model) */
.defs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline-2); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); overflow: hidden; margin-top: 28px; }
.def { background: var(--surface); padding: 24px 26px; }
.def h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.def h3 .def-k { color: var(--accent); }
.def p { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* generic table */
.gtable { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 24px; }
.gtable th { text-align: left; font-weight: 600; color: var(--faint); font-size: 12px; letter-spacing: 0.02em; padding: 0 14px 11px; border-bottom: 1px solid var(--hairline); }
.gtable td { padding: 13px 14px; border-bottom: 1px solid var(--hairline-2); color: var(--muted); vertical-align: top; line-height: 1.45; }
.gtable tr:last-child td { border-bottom: none; }
.gtable td:first-child { color: var(--ink); font-weight: 500; }
.gtable .k-ok { color: var(--green); font-weight: 600; }
.gtable .k-ask { color: var(--amber); font-weight: 600; }
.gtable .k-no { color: var(--red); font-weight: 600; }

/* platform tabs */
.ptabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 24px; }
.ptab { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--hairline-2); padding: 8px 15px; border-radius: 980px; cursor: pointer; transition: border-color .15s, background .15s; }
.ptab:hover { border-color: var(--hairline); }
.ptab i { font-style: normal; font-size: 11px; color: var(--faint); }
.ptab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.ptab.is-active i { color: #c7c7cc; }
.ptab .dot { width: 7px; height: 7px; border-radius: 50%; }
.ptab .dot.ready { background: var(--green); }
.ptab .dot.exp { background: var(--amber); }
.ppanel-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ppanel-h h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.ppanel-h .tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 980px; }
.ppanel-h .tag.ready { background: var(--green-wash); color: var(--green); }
.ppanel-h .tag.exp { background: #FFF6E6; color: var(--amber); }
.ppanel > p { font-size: 14.5px; color: var(--muted); line-height: 1.5; max-width: 62ch; }

/* quick-link: jump straight to a platform's developer console */
.ppanel-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quick-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--accent); background: var(--surface); border: 1px solid var(--hairline-2); padding: 8px 14px; border-radius: 980px; transition: border-color .15s, color .15s, background .15s; }
.quick-link:hover { border-color: var(--accent); color: var(--accent-press); background: var(--surface-2); }
.quick-link .ic { font-size: 15px; }
.quick-link .ic-ext { font-size: 13px; color: var(--faint); margin-left: -2px; }

/* guide steps (lighter than landing steps) */
.gsteps { list-style: none; counter-reset: g; margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }
.gstep { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; }
.gstep::before { counter-increment: g; content: counter(g); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.gstep h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 5px; }
.step-fast { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0; vertical-align: middle; color: var(--green); background: var(--green-wash); padding: 2px 9px; border-radius: 980px; }
.gstep p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.gstep .code { margin-top: 12px; }
.gstep .perm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gstep .perm-chips span { font-size: 12px; color: var(--muted); background: var(--surface-2); padding: 4px 10px; border-radius: 7px; }

/* checks (T1/T2/T3) */
.checks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.check { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-md); }
.check-b { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: center; padding: 5px 0; border-radius: 7px; }
.check-b.ok { background: var(--green-wash); color: var(--green); }
.check-b.ask { background: #FFF6E6; color: var(--amber); }
.check-b.no { background: var(--red-wash); color: var(--red); }
.check b { font-size: 15px; font-weight: 600; }
.check p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 3px; }

/* callouts */
.callout { display: flex; gap: 12px; padding: 16px 18px; background: var(--surface-2); border-radius: var(--r-md); font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 22px; }
.callout.warn { background: #FFF8EC; }
.callout .ic { font-size: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.callout.warn .ic { color: var(--amber); }
.callout strong { color: var(--ink); }
.callout code { background: var(--surface); }

/* deeper-link cards */
.dlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.dlink { display: block; padding: 18px 20px; background: var(--surface); border: 1px solid var(--hairline-2); border-radius: var(--r-md); transition: border-color .15s, transform .12s; }
.dlink:hover { border-color: var(--hairline); transform: translateY(-1px); }
.dlink b { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.dlink b .ic { font-size: 15px; color: var(--accent); }
.dlink span { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: block; margin-top: 5px; }

.guide-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* landing → guide CTA */
.start-cta { margin-top: 40px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ═════════════  REVEAL  ═════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* ═════════════  RESPONSIVE  ═════════════ */
@media (max-width: 900px) {
  /* Hero: smaller node columns on tablet */
  .hero-visual-wrap { max-width: 100%; }
  .hero-feat-row { grid-template-columns: 1fr; gap: 32px; }
  .hero-visual { grid-template-columns: 88px 1fr 88px; gap: 8px; }
  .net-node-card { padding: 6px 7px; gap: 4px; font-size: 10px; min-height: 30px; }
  .net-node-card img { width: 15px; height: 15px; }

  .nav-links { display: none; }
  .flow-grid { grid-template-columns: 1fr; gap: 36px; }
  .flow-note-col { order: -1; text-align: center; }
  .flow-notes { min-height: 150px; }
  .flow-note p { margin: 0 auto; }
  .flow-progress { margin: 32px auto 0; }
  .chat-scroll { height: 400px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .platforms { grid-template-columns: 1fr; gap: 32px; }
  .arch-legend { grid-template-columns: 1fr; }
  .console-grid { grid-template-columns: 1fr; }
  .console-tools { border-right: 0; border-bottom: 1px solid var(--hairline-2); }
  .console-rail { grid-template-columns: 1fr; }
  .rail-item + .rail-item { border-left: 0; border-top: 1px solid var(--hairline-2); }
  /* figure stacks: chat first, then the machines, then the ledger */
  .fig-stage { grid-template-columns: 1fr; gap: 16px;
    grid-template-areas: "chat" "maya" "devin" "you" "ledger"; }
  .fig-svg { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .hero-visual-wrap { padding: 0 16px; }
  /* Phone: hide side nodes, chat full width */
  .hero-visual { grid-template-columns: 1fr; }
  .net-nodes { display: none; }
  .hero-net-svg { display: none; }
  .hero-title { font-size: clamp(36px, 10vw, 48px); }
  .hero-feat-row { grid-template-columns: 1fr; gap: 28px; }
  .console-dial { grid-template-columns: 1fr 1fr; }
  .cstop:nth-child(2) { border-right: 0; }
  .cstop:nth-child(1), .cstop:nth-child(2) { border-bottom: 1px solid var(--hairline-2); }
  .footer-links { margin: 0; }
  /* Architecture chain: stack nodes vertically, arrows point down */
  .arch-chain { flex-direction: column; }
  .arch-node { min-width: 0; }
  .arch-arr { transform: rotate(90deg); }
  .arch-legend dt { width: 100px; }
  /* Flow tabs scroll horizontally rather than wrapping awkwardly */
  .flow-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .flow-tabs::-webkit-scrollbar { display: none; }
  .flow-tab { flex: none; }
}

/* ═════════════  REDUCED MOTION / STATIC  ═════════════ */
.reduced .reveal, .reduced .flow-msg { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduced .flow-note { position: relative; opacity: 1; transform: none; }
.reduced .hero-chat .msg { opacity: 1 !important; transform: none !important; transition: none !important; }
.reduced .chat-scroll { height: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .flow-msg { opacity: 1; transform: none; transition: none; }
  .flow-note { position: relative; opacity: 1; transform: none; }
  .hero-chat .msg { opacity: 1; transform: none; transition: none; }
  .chat-scroll { height: auto; }
  .dot-work, .spin { animation: none; }
}

/* ─────────────  HERO AGENT ROTATION  ───────────── */
.hero-rotate-wrap {
  display: inline-block;
  perspective: 500px;
  vertical-align: baseline;
}
.hero-rotate {
  display: inline-block;
  color: var(--accent);
  font-style: italic;
  will-change: transform, opacity;
}
.hero-knock {
  display: inline-block;
  background: var(--ink);
  color: var(--canvas);
  padding: 0.02em 0.38em 0.1em;
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: -0.01em;
  vertical-align: 0.1em;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotate { will-change: auto; }
}

/* setup-page responsive */
@media (max-width: 760px) {
  .defs { grid-template-columns: 1fr; }
  .dlinks { grid-template-columns: 1fr; }
  .gtable { font-size: 13.5px; }
  .gtable th, .gtable td { padding-left: 10px; padding-right: 10px; }
}