/* ============================================================
   aweb design system — Paper/Clay, light + dark.
   Type: Berkeley Mono (display + record/identity artifacts),
   system sans (body). One web font, preloaded, mono fallback —
   so headings never reflow when the face swaps in.
   ============================================================ */

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BerkeleyMono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Berkeley Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BerkeleyMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Berkeley Mono";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/BerkeleyMono-SemiBold.woff2") format("woff2");
}

:root {
  /* body stays system sans for fast, legible long-form reading */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Berkeley Mono carries the brand: headlines + every id/address/event.
     ui-monospace fallback keeps advance width identical, so no swap jump. */
  --font-display: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: "Berkeley Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid type scale */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --step-1:  clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --step-2:  clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.6vw, 2.7rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.8vw, 4rem);

  /* spacing (8px system) */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;  --s6: 4rem;  --s7: 6rem;  --s8: 8rem;

  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1120px;

  /* ---- light theme (default) ---- */
  --bg: #faf7f2;
  --bg-tint: #f4efe6;        /* alternating section band */
  --ink: #1c1814;
  --muted: #5f574e;
  --faint: #8f867b;
  --line: rgba(28,24,20,0.10);
  --line-strong: rgba(28,24,20,0.17);
  --surface: #fffdf9;
  --surface-2: #f1ece4;
  --accent: #cf4a26;
  --accent-hover: #b53f1f;
  --accent-ink: #ffffff;
  --accent-soft: rgba(207,74,38,0.10);
  /* accent used AS TEXT (labels, pills): dark needs a brighter shade than the
     button-background accent to stay legible at small sizes */
  --accent-text: #b53f1f;
  --ink-strong: #000000;   /* max-contrast primary-action hover */

  --ok: #15803d;   --ok-soft: rgba(21,128,61,0.12);
  --wait: #b45309; --wait-soft: rgba(180,83,9,0.13);
  --run: #1d4ed8;  --run-soft: rgba(29,78,216,0.11);
  --stop: #b91c1c; --stop-soft: rgba(185,28,28,0.11);

  --shadow-sm: 0 1px 2px rgba(28,24,20,0.05);
  --shadow-lg: 0 1px 2px rgba(28,24,20,0.05), 0 14px 36px -20px rgba(28,24,20,0.30);
}

/* dark tokens, shared by manual toggle + OS preference */
:root[data-theme="dark"] {
  --bg: #0b0a09;
  --bg-tint: #110f0e;
  --ink: #efe9e0;
  --muted: #ded7cc;
  --faint: #b9b1a4;
  --line: rgba(255,255,255,0.12);
  --line-strong: rgba(255,255,255,0.24);
  --surface: #191715;
  --surface-2: #25211e;
  --accent: #ff6a2c;
  --accent-hover: #ff8250;
  --accent-ink: #1a120c;
  --accent-soft: rgba(255,106,44,0.12);
  --accent-text: #ff9468;
  --ink-strong: #ffffff;

  --ok: #5fcf86;   --ok-soft: rgba(95,207,134,0.16);
  --wait: #e0a544; --wait-soft: rgba(224,165,68,0.16);
  --run: #7aa0ff;  --run-soft: rgba(122,160,255,0.16);
  --stop: #f06d6d; --stop-soft: rgba(240,109,109,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-lg: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px -22px rgba(0,0,0,0.65);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0a09;
    --bg-tint: #110f0e;
    --ink: #efe9e0;
    --muted: #ded7cc;
    --faint: #b9b1a4;
    --line: rgba(255,255,255,0.12);
    --line-strong: rgba(255,255,255,0.24);
    --surface: #191715;
    --surface-2: #25211e;
    --accent: #ff6a2c;
    --accent-hover: #ff8250;
    --accent-ink: #1a120c;
    --accent-soft: rgba(255,106,44,0.12);
    --accent-text: #ff9468;
    --ink-strong: #ffffff;
    --ok: #5fcf86;   --ok-soft: rgba(95,207,134,0.16);
    --wait: #e0a544; --wait-soft: rgba(224,165,68,0.16);
    --run: #7aa0ff;  --run-soft: rgba(122,160,255,0.16);
    --stop: #f06d6d; --stop-soft: rgba(240,109,109,0.16);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px -22px rgba(0,0,0,0.65);
  }
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Headings: long statements (h1/h2) read in sans; short labels (h3/h4)
   stay in Berkeley Mono where the machine voice looks sharp. */
h1, h2, h3, h4 { margin: 0; line-height: 1.12; }
h1, h2 { font-family: var(--font-sans); font-weight: 680; letter-spacing: -0.025em; }
h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--s4); padding-right: var(--s4); }
/* eyebrow label — muted so terracotta stays reserved for actions */
.kicker { font: 600 var(--step--1)/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
.section { padding: var(--s8) 0; border-top: 1px solid var(--line); }
.section--tint { background: var(--bg-tint); }
.section-head { max-width: 52ch; margin-bottom: var(--s6); }
.section-head h2 { font-size: var(--step-3); margin-top: var(--s3); }
.section-head p { color: var(--muted); font-size: var(--step-1); margin-top: var(--s2); }
.lede { color: var(--muted); }
.brand-word {
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 680;
  letter-spacing: -0.02em;
  text-transform: none;
  white-space: nowrap;
}

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: var(--s4); padding-top: 0.85rem; padding-bottom: 0.85rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 680; font-size: var(--step-1); letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--accent); flex: none; }
.nav-links { display: flex; gap: var(--s3); margin-left: var(--s2); }
.nav-links a { color: var(--muted); text-decoration: none; font-size: var(--step--1); }
.nav-links a:hover { color: var(--ink); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.theme-toggle, .icon-link { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.theme-toggle:hover, .icon-link:hover { color: var(--ink); background: var(--surface-2); }
.icon-link svg { width: 17px; height: 17px; }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 0.45rem; font: 550 var(--step--1)/1 var(--font-sans); padding: 0.72rem 1.1rem; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background .15s, color .15s, filter .15s; }
.btn svg { width: 15px; height: 15px; }
/* primary action is ink-on-paper (and paper-on-ink in dark) — the warm
   accent is reserved as a sparse spot color, not the button fill */
.btn.primary { background: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--ink-strong); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); }
/* secondary outline reads as disabled on the dark base — lift its contrast */
:root[data-theme="dark"] .btn.secondary { border-color: rgba(255,255,255,0.30); }
:root[data-theme="dark"] .btn.secondary:hover { border-color: rgba(255,255,255,0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.secondary { border-color: rgba(255,255,255,0.30); }
  :root:not([data-theme="light"]) .btn.secondary:hover { border-color: rgba(255,255,255,0.45); }
}
.btn.ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; }
.btn.ghost:hover { gap: 0.65rem; }
.btn--lg { padding: 0.85rem 1.3rem; font-size: var(--step-0); }

/* Split button: a primary action plus a caret that opens an opaque menu. Used for
   the standard llms.txt control in the header — present on every aweb naapp page. */
.split-btn { position: relative; display: inline-flex; align-items: stretch; }
.split-btn__main, .split-btn__caret {
  font: 550 var(--step--1)/1 var(--font-sans); background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); cursor: pointer; display: inline-flex;
  align-items: center; transition: background .15s, color .15s;
}
.split-btn__main {
  gap: 0.45rem; padding: 0.72rem 0.85rem; min-width: 7.25rem; justify-content: flex-start;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right-width: 0;
}
.split-btn__caret {
  padding: 0 0.5rem; color: var(--muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.split-btn__main:hover, .split-btn__caret:hover { background: var(--surface-2); }
.split-btn__main svg, .split-btn__caret svg { width: 15px; height: 15px; flex: none; }
.split-btn__caret svg { transition: transform .15s; }
.split-btn[data-open="true"] .split-btn__caret { background: var(--surface-2); color: var(--ink); }
.split-btn[data-open="true"] .split-btn__caret svg { transform: rotate(180deg); }
.split-btn__main .icon-check { display: none; }
.split-btn__label { display: inline; }
.split-btn__main.copied { color: var(--accent); }
.split-btn__main.copied .icon-clip { display: none; }
.split-btn__main.copied .icon-check { display: inline-flex; }
:root[data-theme="dark"] .split-btn__main, :root[data-theme="dark"] .split-btn__caret { border-color: rgba(255,255,255,0.30); }
:root[data-theme="dark"] .split-btn__main:hover, :root[data-theme="dark"] .split-btn__caret:hover { border-color: rgba(255,255,255,0.45); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .split-btn__main, :root:not([data-theme="light"]) .split-btn__caret { border-color: rgba(255,255,255,0.30); }
}
.split-btn__menu {
  position: absolute; top: calc(100% + 5px); right: 0; z-index: 50; min-width: 15rem;
  padding: 0.3rem; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: none;
}
.split-btn[data-open="true"] .split-btn__menu { display: block; }
.split-btn__item {
  display: block; width: 100%; text-align: left; text-decoration: none; background: transparent;
  border: 0; cursor: pointer; padding: 0.55rem 0.7rem; border-radius: 7px;
  font: var(--step--1)/1.35 var(--font-sans); color: var(--ink);
}
.split-btn__item:hover { background: var(--surface-2); }
.split-btn__item + .split-btn__item { margin-top: 2px; }
.split-btn__item .lead { display: block; font-weight: 600; }
.split-btn__item .sub { display: block; color: var(--muted); }

/* ---- hero ---- */
.hero { padding: var(--s8) 0 var(--s7); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s6); align-items: center; }
.hero h1 { font-size: var(--step-4); max-width: 15ch; margin-top: var(--s3); }
.hero .lede { font-size: var(--step-1); max-width: 46ch; margin: var(--s3) 0 var(--s4); }
.hero .cta-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.hero-foot { margin-top: var(--s4); font-size: var(--step--1); color: var(--faint); }

/* centered hero (nono direction): one column, big air, dashboard proof below */
.hero-center { padding: var(--s8) 0 var(--s7); text-align: center; }
.hero-center .wrap { max-width: 880px; }
.hero-center .kicker { display: inline-block; margin-bottom: var(--s3); }
.hero-center h1 { font-size: var(--step-4); max-width: 17ch; margin: 0 auto; line-height: 1.08; }
.hero-center .lede { font-size: var(--step-1); max-width: 48ch; margin: var(--s3) auto 0; }
.hero-center .cta-row { justify-content: center; margin-top: var(--s4); }
.hero-center .hero-card { max-width: 640px; margin: var(--s6) auto 0; text-align: left; }

/* homepage proposal hero: browser-led value with a compact CLI proof */
.hero-proposal { padding: var(--s8) 0 var(--s7); }
.hero-proposal-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr); gap: var(--s6); align-items: center; }
.hero-proposal h1 { font-size: var(--step-4); max-width: 13ch; margin-top: var(--s3); }
.hero-proposal .lede { font-size: var(--step-1); max-width: 48ch; margin: var(--s3) 0 0; }
.hero-proposal .cta-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.builder-proof { max-width: 620px; justify-self: end; }
.hero-home h1 { max-width: 19ch; }
.hero-home .lede { max-width: 54ch; }
.hero-home .hero-foot code { font: 500 0.9em/1.3 var(--font-mono); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.08em 0.34em; white-space: nowrap; }
.hero-home .builder-proof { max-width: 720px; margin: var(--s6) auto 0; text-align: left; justify-self: auto; }
.hero-home .btn code { font: inherit; background: transparent; border: 0; padding: 0; color: inherit; }
.hero-value {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 820px;
  margin: var(--s4) auto 0;
  overflow: visible;
  text-align: left;
}
.hero-value p {
  margin: 0;
  padding: 1rem 1.05rem;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.45;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.hero-value p + p { border-left: 1px solid var(--line); }
.hero-value p:last-child {
  grid-column: 1 / -1;
  text-align: left;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
}
.hero-value b {
  display: block;
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}
.hero-value p:last-child b { color: var(--accent); }
.outcome-highlight {
  display: block;
  color: var(--ink);
  font-size: var(--step-0);
  font-weight: 680;
  line-height: 1.35;
  margin-top: 0.28rem;
}
.builder-steps { display: grid; gap: 0.55rem; padding: 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 48%, transparent); }
.builder-step { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center; padding: 0.65rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.builder-step.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.builder-step .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 0.75rem/1 var(--font-mono); }
.builder-step b { display: block; font-size: var(--step--1); line-height: 1.2; }
.builder-step em { display: block; margin-top: 0.15rem; color: var(--muted); font-style: normal; font-size: var(--step--1); }
.builder-roster { border-bottom: 1px solid var(--line); }
.dev-signal { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.85rem 1rem; }
.dev-signal-label { grid-row: 1 / span 2; padding-top: 0.45rem; font: 600 0.78rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.dev-signal .cmd { min-width: 0; padding: 0.35rem 0.35rem 0.35rem 0.55rem; }
.dev-signal .cmd pre { font-size: 0.8rem; line-height: 1.35; }
.proof-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.proof-summary span { display: grid; gap: 0.2rem; padding: 0.8rem 1rem; color: var(--muted); font-size: var(--step--1); border-right: 1px solid var(--line); }
.proof-summary span:last-child { border-right: 0; }
.proof-summary b { color: var(--ink); font: 700 var(--step-1)/1 var(--font-mono); }

/* ---- product surface (workroom card) ---- */
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.surface-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
.surface-head .live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); flex: none; }
.surface-head .title { font-weight: 620; font-size: var(--step--1); }
.surface-head .who { margin-left: auto; font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }
.evt-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; padding: 0.72rem 1rem; border-bottom: 1px solid var(--line); }
.evt-row:last-child { border-bottom: 0; }
.evt-row .agent { font: 600 var(--step--1)/1 var(--font-mono); color: var(--ink); }
.evt-row .what { color: var(--muted); font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-row .meta { display: flex; align-items: center; gap: 0.6rem; }
.evt-row time { font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }
.pill { font: 600 0.78rem/1 var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase; padding: 0.32rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.pill.ok   { color: var(--ok);   background: var(--ok-soft); }
.pill.wait { color: var(--wait); background: var(--wait-soft); }
.pill.run  { color: var(--run);  background: var(--run-soft); }
.pill.stop { color: var(--stop); background: var(--stop-soft); }
.approve { font: 600 0.78rem/1 var(--font-sans); padding: 0.34rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--accent); color: var(--accent-text); background: transparent; cursor: pointer; }
.approve:hover { background: var(--accent); color: var(--accent-ink); }

/* ---- problem: scattered tools ---- */
.scatter { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.chip { display: flex; align-items: center; gap: 0.55rem; padding: 0.8rem 0.95rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--step--1); background: var(--surface); }
.chip .swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--faint); flex: none; }
.problem-points { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.problem-points li { padding-top: var(--s2); border-top: 2px solid var(--line-strong); }
.problem-points b { display: block; font-size: var(--step-1); margin-bottom: 0.3rem; }
.problem-points span { color: var(--muted); font-size: var(--step--1); }

/* ---- product steps ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); margin-top: var(--s2); }
.step { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.step .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 0.8rem/1 var(--font-mono); margin-bottom: var(--s2); }
.step h3 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.step p { color: var(--muted); font-size: var(--step--1); }

/* ---- runtimes ---- */
.runtimes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); margin-top: var(--s2); }
.runtime { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); }
.runtime h3 { font-size: var(--step-1); display: flex; align-items: center; gap: 0.5rem; }
.runtime .tag { font: 600 0.78rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.28rem 0.45rem; border-radius: 5px; background: var(--surface-2); color: var(--faint); }
.runtime p { color: var(--muted); font-size: var(--step--1); margin-top: 0.5rem; }

/* ---- code block ---- */
.codeblock { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; font: 500 var(--step--1)/1.75 var(--font-mono); color: var(--ink); overflow-x: auto; }
.codeblock .c-dim { color: var(--faint); }
.codeblock .c-acc { color: var(--accent); }

/* ---- split helper (text + asset) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.split--text-right { grid-template-columns: 1fr 1fr; }

/* ---- pricing ---- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s2); }
.tier { display: flex; flex-direction: column; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tier.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tier .badge { align-self: flex-start; font: 600 0.78rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-text); background: var(--accent-soft); padding: 0.3rem 0.5rem; border-radius: 5px; margin-bottom: var(--s2); }
.tier .name { font: 600 var(--step--1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.tier .price { font-size: var(--step-3); margin: 0.4rem 0 0.2rem; }
.tier .price small { font-size: var(--step--1); color: var(--faint); font-weight: 500; letter-spacing: 0; }
.tier .desc { color: var(--muted); font-size: var(--step--1); min-height: 2.6em; }
.tier ul { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: 0.6rem; }
.tier li { font-size: var(--step--1); color: var(--ink); padding-left: 1.3rem; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tier .btn { margin-top: auto; justify-content: center; }

/* ---- final CTA ---- */
.cta-band { text-align: center; padding: var(--s8) 0; }
.cta-band h2 { font-size: var(--step-3); max-width: 22ch; margin: 0 auto var(--s4); }
.cta-band .cta-row { justify-content: center; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s5); background: var(--bg-tint); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s4); }
.footer-brand p { color: var(--muted); font-size: var(--step--1); margin-top: var(--s2); max-width: 28ch; }
.footer-col h4 { font: 600 var(--step--1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-bottom: var(--s2); }
.footer-col a { display: block; color: var(--muted); text-decoration: none; font-size: var(--step--1); padding: 0.28rem 0; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--faint); font-size: var(--step--1); }

/* ---- responsive ---- */
@media (max-width: 880px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: var(--s3); }
  .problem-points { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .section { padding: var(--s7) 0; }
  .hero { padding: var(--s4) 0 var(--s6); }
}
@media (max-width: 540px) {
  .pricing-grid, .footer-cols { grid-template-columns: 1fr; }
  /* keep the hero tight so the dashboard proof enters the first screen */
  .hero { padding: var(--s3) 0 var(--s5); }
  .hero h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .hero .lede { margin: var(--s2) 0 var(--s3); }
  /* avoid header overflow: drop Sign in, tighten spacing */
  .header-right .btn.secondary { display: none; }
  .header-right .split-btn { display: none; }
  /* drop the caret on small screens; the main copy action keeps working */
  .split-btn__caret { display: none; }
  .split-btn__main { border-right-width: 1px; border-radius: var(--radius-sm); min-width: 0; }
  .site-header .wrap { gap: var(--s2); }
}

/* ============================================================
   Content pages — prose, docs, blog, simple headers
   ============================================================ */

/* generic page header (list pages, 404, legal) */
.page { padding: var(--s7) 0 var(--s8); }
.page-header { max-width: 60ch; margin-bottom: var(--s5); }
.page-header .kicker { display: block; margin-bottom: var(--s2); }
.page-header h1 { font-size: var(--step-3); }
.page-header p { color: var(--muted); font-size: var(--step-1); margin-top: var(--s2); }

/* prose — rendered markdown */
.prose { max-width: 72ch; color: var(--ink); }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { font-size: var(--step-2); margin-top: var(--s5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--s4); }
.prose h4 { font-size: var(--step-0); margin-top: var(--s3); }
.prose p, .prose li { color: var(--ink); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { font-weight: 650; }
.prose code { font: 500 0.88em/1.5 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.1em 0.35em; }
.prose pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; font-size: var(--step--1); }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--s3); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 650; color: var(--muted); }

/* docs layout: sidebar + content */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s6); align-items: start; padding: var(--s6) 0 var(--s8); }
.docs-sidebar { position: sticky; top: 84px; }
.docs-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.docs-nav a { color: var(--muted); text-decoration: none; font-size: var(--step--1); padding: 0.4rem 0.65rem; border-radius: var(--radius-sm); border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--ink); background: var(--surface-2); }
.docs-nav a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 550; }
.docs-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.docs-page-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }
.docs-content { min-width: 0; }
.docs-content.prose { max-width: none; }
.docs-content.prose > * { max-width: 72ch; }
.docs-kicker { font: 600 var(--step--1)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.docs-page-title { font-size: var(--step-3); }
.docs-description { color: var(--muted); font-size: var(--step-1); margin-top: var(--s2); }

/* blog */
.blog-list-header, .blog-post-header { max-width: 64ch; }
.blog-list-title { font-size: var(--step-3); }
.blog-list-sub { color: var(--muted); font-size: var(--step-1); margin-top: var(--s2); }
.blog-list-posts { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s2); }
.blog-list-post-link { display: block; text-decoration: none; color: inherit; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.blog-list-post-link:hover { border-color: var(--line-strong); }
.blog-list-post-meta, .blog-post-meta { font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }
.blog-list-post-title { font-size: var(--step-1); margin: 0.4rem 0; }
.blog-list-post-summary { color: var(--muted); font-size: var(--step--1); }
.blog-post-eyebrow { font: 600 var(--step--1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 0.5rem; }
.blog-post-title { font-size: var(--step-3); margin: 0.5rem 0; }
.blog-post-lede { color: var(--muted); font-size: var(--step-1); }
.blog-post-body { margin-top: var(--s5); }
.blog-post-footer { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); }
.blog-post-back { color: var(--accent); text-decoration: none; font-size: var(--step--1); }

@media (max-width: 880px) {
  .docs-layout { grid-template-columns: 1fr; gap: var(--s4); }
  .docs-sidebar { position: static; }
  .docs-nav { flex-flow: row wrap; }
}

/* ============================================================
   Reusable marketing components (shared across product pages)
   ============================================================ */

/* generic card + grids */
.card { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card h3 { font-size: var(--step-1); margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.card p { color: var(--muted); font-size: var(--step--1); }
.card p + .cmd, .card p + .cmd-list { margin-top: var(--s2); }
.card .num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 0.75rem/1 var(--font-mono); flex: none; }
.card code, .lede code, .prose-intro code { font: 500 0.88em/1.4 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.08em 0.34em; }
.card-grid { display: grid; gap: var(--s4); margin-top: var(--s2); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* intro / outro paragraphs for sections */
.prose-intro { font-size: var(--step-1); color: var(--muted); max-width: 60ch; margin-top: var(--s2); }
.prose-outro { color: var(--muted); max-width: 64ch; margin-top: var(--s4); }
.arrow-link { color: var(--accent); text-decoration: none; font-weight: 550; white-space: nowrap; }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* command block with copy button */
.cmd-list { display: grid; gap: 0.5rem; }
.cmd { display: flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.5rem 0.5rem 0.85rem; }
.cmd pre { min-width: 0; margin: 0; font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--ink); overflow-x: auto; flex: 1; white-space: pre; }
.cmd-label { font: 500 var(--step--1)/1.5 var(--font-sans); color: var(--muted); margin: var(--s2) 0 0.4rem; }
.cmd-label:first-child { margin-top: 0; }
.copy-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--faint); cursor: pointer; }
.copy-btn:hover { color: var(--ink); background: var(--bg); }
.copy-btn.copied { color: var(--ok); }
.copy-btn svg { width: 15px; height: 15px; }

/* command panel (surface holding labeled command steps, e.g. hero right column) */
.cmd-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--s3); }
.cmd-panel .cmd { background: var(--surface-2); }
.cmd-step + .cmd-step { margin-top: var(--s3); }

@media (max-width: 880px) {
  .card-grid--2, .card-grid--3 { grid-template-columns: 1fr; }
}

/* ============================================================
   /mcp page-specific
   ============================================================ */
.mcp-secure { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: var(--step--1); margin-top: var(--s3); }
.mcp-secure svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.mcp-peer { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mcp-peer:last-child { border-bottom: 0; }
.mcp-peer-id { font-weight: 620; font-size: var(--step--1); }
.mcp-client { font: 500 0.72rem/1 var(--font-mono); color: var(--faint); margin-left: 0.3rem; }
.mcp-peer code { font: 500 var(--step--1)/1 var(--font-mono); color: var(--muted); margin-left: auto; }
.mcp-msg { margin: 0.5rem 1rem; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: var(--step--1); max-width: 80%; }
.mcp-msg--out { background: var(--accent-soft); color: var(--ink); }
.mcp-msg--in { background: var(--surface-2); color: var(--ink); margin-left: auto; }
.mcp-fork { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
.mcp-fork strong { color: var(--ink); }

/* before/after timeline cards */
.mcp-tl-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--s3); }
.mcp-tl-head h3 { font-size: var(--step-1); }
.mcp-tl-meta { color: var(--muted); font-size: var(--step--1); margin-left: auto; }
.mcp-timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.mcp-timeline li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.75rem; font-size: var(--step--1); color: var(--ink); }
.mcp-timeline .mcp-tl-time { font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--faint); }
.mcp-timeline code { font: 500 0.88em/1.4 var(--font-mono); background: var(--ok-soft); color: var(--ok); border-radius: 5px; padding: 0.08em 0.34em; }
.mcp-tl-quiet { color: var(--muted); opacity: 0.85; }
.mcp-tl-foot { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); }
.mcp-tl--after { border-color: var(--accent); }

.mcp-cta-catch { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mcp-card-lead { color: var(--ink); font-weight: 620; margin-top: 0.3rem; }
.mcp-card-foot { color: var(--faint); font: 500 var(--step--1)/1.5 var(--font-mono); margin-top: var(--s2); }
.mcp-target { color: var(--muted); font-size: var(--step--1); margin-top: 0.4rem; }
.mcp-target em { color: var(--faint); }
.mcp-skills { display: grid; gap: var(--s2); }
.mcp-skill { font-size: var(--step--1); }
.mcp-skill span { color: var(--muted); }
.mcp-blog-meta { color: var(--faint); font: 500 var(--step--1)/1 var(--font-mono); margin-bottom: var(--s3); }
.mcp-fr-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
.mcp-fr-card:hover { border-color: var(--line-strong); }
.mcp-fr-card h3 { font-size: var(--step-1); margin: 0.5rem 0; }
.mcp-fr-card .arrow-link { display: inline-block; margin-top: var(--s2); }

/* ============================================================
   /a2a page-specific
   ============================================================ */
.a2a-flow { display: grid; gap: 0; }
.a2a-flow-node { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--s3); text-align: center; display: grid; gap: 0.25rem; }
.a2a-flow-node--gateway { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.a2a-flow-kicker { font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.a2a-flow-name { font-weight: 650; font-size: var(--step-1); }
.a2a-flow-note { color: var(--muted); font-size: var(--step--1); }
.a2a-flow-boundary { justify-self: center; margin-top: 0.4rem; font: 600 0.68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.02em; color: var(--wait); background: var(--wait-soft); padding: 0.3rem 0.5rem; border-radius: 999px; }
.a2a-flow-rail { display: flex; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2) 0; }
.a2a-flow-step { font: 500 var(--step--1)/1 var(--font-mono); color: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.a2a-flow-step b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; }
.a2a-flow-step--back { color: var(--faint); }
.a2a-secure { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: var(--step--1); margin-top: var(--s3); }
.a2a-secure svg { width: 16px; height: 16px; color: var(--accent); }

/* ============================================================
   /orchestration page-specific
   ============================================================ */
.orch-title .l1 { display: block; color: var(--muted); }
.orch-title .l2 { display: block; }
.orch-peer { display: grid; gap: 0.5rem; }
.orch-peer-row { display: grid; grid-template-columns: 110px 1fr; gap: 0.6rem; align-items: center; }
.orch-peer-row .role { font: 600 0.72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent); }
.orch-peer-row code { font: 500 var(--step--1)/1.5 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.5rem; overflow-x: auto; }
.orch-term { padding: 0; }
.orch-term .line { padding: 0.35rem 1rem; font: 500 var(--step--1)/1.5 var(--font-mono); border-bottom: 1px solid var(--line); }
.orch-term .line:last-child { border-bottom: 0; }
.orch-term .cmd { color: var(--ink); }
.orch-term .out { color: var(--muted); }
.orch-term .dim { color: var(--faint); font-style: italic; }
.orch-term .in { color: var(--run); }
.orch-term .note { color: var(--wait); }
.tpl-meta { font: 600 0.66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); }
.tpl-roles { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: var(--s2) 0; }
.tpl-roles span { font: 600 0.7rem/1 var(--font-mono); padding: 0.3rem 0.5rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }

/* vertical numbered flow (home demo beats) */
.flow { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
.flow li { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }
.flow .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 700 0.75rem/1 var(--font-mono); flex: none; }
.flow b { font-weight: 620; }
.flow span:last-child { color: var(--muted); font-size: var(--step--1); }
.flow b { color: var(--ink); }

/* hero dashboard card (faithful to the Monitor / Active agents view) */
.dash-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.dash-row .agent { font: 600 var(--step--1)/1 var(--font-mono); color: var(--ink); display: inline-flex; align-items: center; gap: 0.45rem; }
.dot-on { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.dash-role { color: var(--muted); font-size: var(--step--1); }
.dash-right { margin-left: auto; display: inline-flex; align-items: center; gap: 0.6rem; }
.dash-seen { font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }
.dash-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; font-size: var(--step--1); color: var(--muted); }
.dash-foot-val { font: 500 var(--step--1)/1 var(--font-mono); color: var(--ink); }

.work-card { display: grid; gap: 0.3rem; margin: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.work-label, .path-label { font: 600 0.8rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); }
.work-card strong { font-size: var(--step--1); line-height: 1.4; }
.work-card .cmd { padding: 0.45rem 0.45rem 0.45rem 0.65rem; }
.work-card .cmd pre { font-size: 0.68rem; line-height: 1.4; }
.start-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.start-path { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.start-path h3 { margin-bottom: 0; }
.start-path .btn { align-self: flex-start; margin-top: auto; }
.path-flow { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.path-flow span { font: 600 0.8rem/1 var(--font-mono); color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 0.38rem 0.55rem; }
.cli-example-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: start; max-width: 920px; min-width: 0; }
/* grid items must be allowed to shrink so inner <pre> scrolls instead of
   forcing page-level horizontal scroll on mobile */
.cmd-panel, .cli-result { min-width: 0; }
.cmd-panel .cmd, .cmd-panel .cmd-step { min-width: 0; }
.cli-result { box-shadow: var(--shadow-lg); }
.tree-block { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1rem; padding: 0.85rem 0.5rem 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.tree-block pre { margin: 0; min-width: 0; flex: 1; overflow-x: auto; font: 500 0.78rem/1.55 var(--font-mono); color: var(--ink); white-space: pre; }
.result-list { display: grid; border-top: 1px solid var(--line); }
.result-list div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.result-list div:last-child { border-bottom: 0; }
.result-list b { font: 600 var(--step--1)/1.4 var(--font-mono); color: var(--ink); }
.result-list span { color: var(--muted); font-size: var(--step--1); }

@media (max-width: 880px) {
  .hero-proposal-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .hero-proposal h1 { max-width: 15ch; }
  .builder-proof { justify-self: stretch; max-width: none; }
  .start-paths { grid-template-columns: 1fr; }
  .cli-example-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .hero-proposal { padding: var(--s4) 0 var(--s5); }
  .hero-proposal h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .hero-home .builder-proof { margin-top: var(--s5); }
  .hero-value { grid-template-columns: 1fr; margin-top: var(--s3); }
  .hero-value p { padding: 0.85rem 0.9rem; }
  .hero-value p + p { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .proof-summary { grid-template-columns: 1fr; }
  .proof-summary span { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-summary span:last-child { border-bottom: 0; }
  .dev-signal { grid-template-columns: 1fr; }
  .dev-signal-label { grid-row: auto; padding-top: 0; }
  .dash-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; align-items: start; }
  .dash-row .agent { grid-column: 1; }
  .dash-role { grid-column: 1; }
  .dash-right { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 0; }
  .evt-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.6rem; align-items: start; }
  .evt-row .agent { grid-column: 1; }
  .evt-row .what { grid-column: 1; }
  .evt-row .what { white-space: normal; }
  .evt-row .meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .result-list div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ============================================================
   Homepage 2026-06 — why → how → start, Berkeley Mono identity
   ============================================================ */

/* hero: copy left, live record right */
.hero-home .hero-grid { align-items: center; }
.hero-copy h1 { font-size: var(--step-4); max-width: 16ch; margin-top: var(--s3); }
.head-accent { color: var(--muted); }              /* quiet two-tone tension line */
.hero-copy .lede { font-size: var(--step-1); max-width: 52ch; margin: var(--s3) 0 var(--s4); color: var(--muted); }
.lede-accent { display: block; margin-top: 0.6rem; color: var(--ink); font-weight: 600; }
.hero-copy .cta-row { margin-bottom: var(--s3); }
.hero-foot { color: var(--faint); font-size: var(--step--1); max-width: 54ch; }
.hero-foot b { color: var(--muted); font-weight: 600; }
.hero-cmd { width: max-content; max-width: 100%; margin-top: var(--s2); }
.hero-cmd .hc-prompt { color: var(--faint); user-select: none; font: 500 var(--step--1)/1.5 var(--font-mono); flex: none; }

/* live coordination record — the signature surface */
.record-task { display: grid; gap: 0.3rem; margin: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.record-task strong { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.35; letter-spacing: -0.01em; }
.rec-row { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 0.4rem 0.85rem; align-items: baseline; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.rec-who { font: 600 var(--step--1)/1.4 var(--font-mono); color: var(--ink); }
.rec-what { color: var(--muted); font-size: var(--step--1); line-height: 1.45; }
.record b { color: var(--ink); font-weight: 600; }
.record code { font: 500 0.86em/1.4 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0.05em 0.32em; color: var(--ink); }
.record-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 0.8rem 1rem; flex-wrap: wrap; }
.rec-sign { display: inline-flex; align-items: center; gap: 0.4rem; font: 500 var(--step--1)/1 var(--font-mono); color: var(--ok); }
.rec-meta { font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }

/* centered section head */
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }

/* why: before / after contrast */
.contrast { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: stretch; margin-top: var(--s2); }
.contrast-col { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.contrast-col--before { border-style: dashed; background: transparent; }
.contrast-col--after { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: var(--shadow-sm); }
.contrast-label { font: 600 0.68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.contrast-col--after .contrast-label { color: var(--accent); }
.contrast-list { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: 0.65rem; }
.contrast-list li { position: relative; padding-left: 1.5rem; font-size: var(--step-0); color: var(--ink); line-height: 1.4; }
.contrast-list li::before { position: absolute; left: 0; top: 0; font: 700 1rem/1.4 var(--font-mono); }
.contrast-col--before .contrast-list li::before { content: "×"; color: var(--faint); }
.contrast-col--after .contrast-list li::before { content: "✓"; color: var(--ok); }
.contrast-arrow { display: grid; place-items: center; color: var(--faint); }
.contrast-arrow svg { width: 28px; height: 28px; }
.why-payoff { max-width: 72ch; margin: var(--s5) 0 0; text-align: left; font-size: var(--step-1); color: var(--muted); }
.why-payoff strong { color: var(--ink); }

/* how: the team layer — aweb floating on the tools you run */
.layer { display: grid; gap: 0; margin-top: var(--s2); }
.layer-aweb { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.cap { background: var(--surface); padding: var(--s4); display: grid; gap: 0.55rem; align-content: start; }
.cap-mark { display: inline-flex; align-items: center; justify-content: center; width: max-content; min-width: 2.3rem; height: 2.3rem; padding: 0 0.55rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font: 600 0.95rem/1 var(--font-mono); }
.cap h3 { font-size: var(--step-1); }
.cap p { color: var(--muted); font-size: var(--step--1); }
.layer-base { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-top: 2px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); background: var(--surface-2); }
.layer-base-label { font: 600 0.68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
.layer-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.lchip { font: 500 var(--step--1)/1 var(--font-mono); padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); }

/* get started: notes + apps teaser */
.cmd-note { margin-top: var(--s3); font-size: var(--step--1); color: var(--muted); }
.result-note { margin: 0; padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.roster { display: grid; }
.roster-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem 1.1rem; align-items: baseline; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
.roster-row:last-child { border-bottom: 0; }
.r-name { font: 600 var(--step-0)/1 var(--font-mono); color: var(--ink); }
.r-profile { font: 500 var(--step--1)/1 var(--font-mono); color: var(--muted); }
.r-rt { font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }
.apps-teaser { margin: var(--s5) auto 0; padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--step-0); max-width: 82ch; line-height: 1.55; }
.cta-sub { color: var(--muted); max-width: 52ch; margin: calc(-1 * var(--s2)) auto var(--s4); }

/* ambient: the live dot breathes (calm, not flashy) */
@media (prefers-reduced-motion: no-preference) {
  .surface-head .live { animation: live-pulse 2.6s ease-in-out infinite; }
  @keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--ok-soft); }
    50%      { box-shadow: 0 0 0 6px transparent; }
  }
}

@media (max-width: 880px) {
  .contrast { grid-template-columns: 1fr; gap: var(--s2); }
  .contrast-arrow { transform: rotate(90deg); padding: var(--s1) 0; }
  .layer-aweb { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .rec-row { grid-template-columns: 1fr auto; }
  .rec-who { grid-column: 1; }
  .rec-what { grid-column: 1 / -1; grid-row: 2; }
  .rec-row .pill { grid-column: 2; grid-row: 1; justify-self: end; }
}

/* hero diagram — honest concept figure, not a faux dashboard */
.hero-figure { margin: 0; }
.hero-figure svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-figure figcaption { margin: var(--s3) auto 0; color: var(--muted); font-size: var(--step--1); line-height: 1.55; max-width: 46ch; text-align: center; }

.dg-eyebrow { font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; fill: var(--faint); text-transform: uppercase; }
.dg-node rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.25; }
.dg-dot { fill: var(--accent); }
.dg-name { font: 500 13px/1 var(--font-mono); fill: var(--ink); }
.dg-link path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-link--down path { stroke: var(--accent); stroke-width: 1.5; opacity: 0.9; }
.dg-core rect { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
/* the wordmark matches the inline brand-word (sans), not the mono node labels */
.dg-core-name { font: 680 24px/1 var(--font-sans); letter-spacing: -0.02em; fill: var(--accent); }
.dg-core-sub { font: 500 12px/1 var(--font-mono); fill: var(--muted); }
.dg-live { fill: var(--ok); }
.dg-cap rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.dg-cap-mark { font: 600 11px/1 var(--font-mono); letter-spacing: 0.05em; fill: var(--accent); text-transform: uppercase; }
.dg-cap-name { font: 600 13px/1 var(--font-display); fill: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .dg-live { animation: live-pulse-dot 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes live-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
}

/* how-it-works diagram — specialists sharing one task (honest concept figure) */
.flow-task rect { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 30%, var(--line)); stroke-width: 1.25; }
.dg-action { font: 400 11px/1 var(--font-sans); fill: var(--muted); }
.spec-tag { font: 500 9px/1 var(--font-mono); letter-spacing: 0.04em; fill: var(--faint); }

/* honest trust strip (dogfooding + open source) — the social-proof slot */
.trust-strip { padding: var(--s5) 0 0; }
.trust-strip p { margin: 0 auto; max-width: 60ch; text-align: center; color: var(--muted); font: 500 var(--step--1)/1.5 var(--font-mono); }
.trust-strip .brand-word { font-family: var(--font-mono); font-weight: 600; }
.trust-strip a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.trust-strip a:hover { text-decoration-thickness: 2px; }
.trust-strip .hero-cmd { margin: var(--s3) auto 0; }

/* ============================================================
   Hero story — scroll-driven org-chart narrative, told from the
   end: the page opens on the full stage-4 picture, the first
   caption rewinds to the pre-AI world, and the story plays back
   to the frame it started from. .story's data-stage (1–4) reveals
   scene layers; caption steps scroll past the sticky figure and
   set the stage (org-story.js). Without JS the scene holds the
   full picture and every caption stays readable.
   ============================================================ */
.hero-story { padding-top: var(--s6); }
.story-intro { text-align: center; padding-bottom: var(--s4); }
@media (min-width: 881px) {
  /* balance the opening screen: push the headline + scene toward center */
  .hero-story { padding-top: 15vh; }
}
.story-opener { font: 680 var(--step-3)/1.12 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); max-width: 24ch; margin: var(--s3) auto 0; }
.story-scrollhint { margin: var(--s3) 0 0; font: 600 var(--step--1)/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--faint); }

.story-grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: var(--s6); align-items: start; }
.story-stage { position: sticky; top: max(72px, calc(50vh - 300px)); }
.story-figure { margin: 0; }
/* hold the full end-state picture through the first screen: the first
   caption only reaches the trigger band after this lead-in */
.story-steps { padding-top: 55vh; }

/* the pitch after the story: the classic hero, centered, no figure */
.hero-pitch { padding: var(--s7) 0; }
.hero-copy--center { text-align: center; }
.hero-copy--center .pitch-title { font-size: var(--step-4); max-width: 16ch; margin: var(--s3) auto 0; }
.hero-copy--center .lede { margin-left: auto; margin-right: auto; }
.hero-copy--center .cta-row { justify-content: center; }
.hero-copy--center .hero-foot { margin: 0 auto; }
.story-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.story-step h2 { font-size: var(--step-2); margin-top: var(--s2); max-width: 18ch; }
.story-step p { color: var(--muted); margin-top: var(--s2); max-width: 40ch; }
.story-tag { font: 600 var(--step--1)/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase; color: var(--accent-text); }
.story.js .story-step { opacity: 0.3; transition: opacity 0.35s ease; }
.story.js[data-stage="2"] .story-step[data-step="2"],
.story.js[data-stage="3"] .story-step[data-step="3"],
.story.js[data-stage="4"] .story-step[data-step="4"],
.story.js[data-stage="5"] .story-step[data-step="5"] { opacity: 1; }

/* scene layers appear at their stage */
.st-agents, .st-aweb, .st-subteam, .st-overload { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.st-agents, .st-subteam { transform: translateY(-8px); }
.story[data-stage="2"] .st-agents, .story[data-stage="3"] .st-agents, .story[data-stage="4"] .st-agents,
.story[data-stage="3"] .st-aweb, .story[data-stage="4"] .st-aweb,
.story[data-stage="4"] .st-subteam { opacity: 1; transform: none; }
.story[data-stage="2"] .st-overload { opacity: 1; }

/* sub-team rows cascade in */
.st-subrow { opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.st-subrow + .st-subrow { transition-delay: 0.12s; }
.st-subrow + .st-subrow + .st-subrow { transition-delay: 0.24s; }
.story[data-stage="4"] .st-subrow { opacity: 1; transform: none; }

/* the scene keeps its populated region vertically centered per stage,
   opens large and centered under the headline, and settles beside the
   captions once the story engages (JS-only: without JS it stays docked
   so captions never overlap) */
@media (min-width: 881px) {
  .story-stage { transition: top 0.6s ease, transform 0.6s ease; transform-origin: top center; }
  .story[data-stage="1"] .story-stage { top: max(72px, calc(50vh - 130px)); }
  .story[data-stage="2"] .story-stage { top: max(72px, calc(50vh - 200px)); }
  .story[data-stage="3"] .story-stage { top: max(72px, calc(50vh - 240px)); }
  .story.js:not(.story--engaged) .story-stage { transform: translateX(-35%) scale(1.45); }
}

/* communication lines: dashed traffic, calm by default; overload is
   density and speed, not color — the accent belongs to aweb alone */
.story .comm { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 9; }
.st-overload .comm, .story[data-stage="2"] .st-chatter .comm { stroke-width: 1.75; }
.st-aweb-links .comm { stroke: var(--accent); stroke-width: 1.6; opacity: 0.9; }
.st-hdot { fill: var(--ink); opacity: 0.55; }
.st-aweb-mark rect { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.st-aweb-mark text { font: 680 15px/1 var(--font-sans); letter-spacing: -0.02em; fill: var(--accent); }
.st-subname { font: 500 11px/1 var(--font-mono); fill: var(--ink); }
.st-subrole { fill: var(--muted); font-weight: 400; }

/* final beat: the scene clears, the team drifts left, the command appears */
.st-humans, .st-chatter, .st-sublink { transition: opacity 0.6s ease; }
.story[data-stage="5"] .st-humans, .story[data-stage="5"] .st-chatter, .story[data-stage="5"] .st-sublink { opacity: 0; }
.story[data-stage="5"] .st-subteam, .story[data-stage="5"] .st-subrow { opacity: 1; }
.story[data-stage="5"] .st-subrow { transform: none; }
.st-subteam { transform-box: fill-box; transform-origin: top left; }
.story[data-stage="5"] .st-subteam { transform: translate(-35px, -172px) scale(1.05); }

/* the incantation: static under the scene without JS, an overlay that
   fades in at the final beat with it */
.stage-cmd { margin-top: var(--s3); }
.story.js .stage-cmd { position: absolute; margin: 0; top: 50%; left: 31%; right: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity 0.6s ease 0.2s, visibility 0s 0.8s; }
.story.js[data-stage="5"] .stage-cmd { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.2s; }
.story.js .stage-cmd .cmd { padding-left: 0.55rem; }
.story.js .stage-cmd .cmd pre { font-size: 11.5px; line-height: 1.6; }
.username-field { display: none; align-items: center; gap: var(--s2); margin-bottom: var(--s2); flex-wrap: wrap; }
.username-field.is-live { display: flex; }
.username-field label { font: 500 var(--step--1)/1.5 var(--font-sans); color: var(--muted); }
.username-field input { font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.4rem 0.7rem; width: 14ch; }
.username-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.username-status { font: 500 var(--step--1)/1.5 var(--font-mono); }
.username-status.is-ok { color: var(--ok); }
.username-status.is-ok::before { content: "\2713 "; }
.username-status.is-no { color: var(--stop); }
.username-status.is-checking { color: var(--faint); }
@media (max-width: 880px) {
  /* the final beat hands the pinned panel over to the command — the
     roster it re-states was fully visible one beat earlier */
  .story.js .stage-cmd { position: static; transform: none; margin-top: var(--s2); display: none; }
  .story.js[data-stage="5"] .stage-cmd { display: block; }
  .story.js[data-stage="5"] .story-figure { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .story .comm { animation: comm-flow 1.8s linear infinite; }
  .story[data-stage="2"] .st-chatter .comm,
  .story[data-stage="2"] .st-overload .comm { animation-duration: 0.45s; }
  @keyframes comm-flow { to { stroke-dashoffset: -12; } }
}

@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; gap: var(--s2); }
  .story-stage { order: -1; top: 56px; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
  .story-figure svg { max-height: 36vh; margin: 0 auto; display: block; }
  .story-steps { padding-top: 16vh; }
  /* captions rest below the sticky scene, not centered underneath it */
  .story-step { min-height: 88vh; justify-content: flex-start; padding-top: 48vh; }
}

/* reduced motion: stages still change, but instantly — no fades, drifts,
   scaling, or sticky-top glides */
@media (prefers-reduced-motion: reduce) {
  .story.js .story-step,
  .st-agents, .st-aweb, .st-subteam, .st-overload, .st-subrow,
  .st-humans, .st-chatter, .st-sublink,
  .story-stage,
  .story.js .stage-cmd { transition: none; }
  .st-subrow + .st-subrow,
  .st-subrow + .st-subrow + .st-subrow { transition-delay: 0s; }
}