/* ============================================================
   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.82rem, 0.8rem + 0.1vw, 0.875rem);
  --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);
  --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: #d2cabe;
  --faint: #a69d90;
  --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);
  --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: #d2cabe;
    --faint: #a69d90;
    --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);
    --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__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.68rem/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.72rem; 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.72rem/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.72rem/1 var(--font-sans); padding: 0.34rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--accent); color: var(--accent); 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.66rem/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.66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); 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(3, 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.68rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.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.7rem/1 var(--font-mono); color: var(--accent); 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); }
.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: 62ch; margin: var(--s5) auto 0; text-align: center; 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 { border-top: 1px solid var(--line); padding: var(--s4) 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; }

/* ============================================================
   naapp component layer
   Components emitted by the aweb-naapp chrome/reference renderers.

   Layer 1 (aweb.css) is vendored byte-for-byte from the ac site SOT. Keep this
   layer grouped by emitted component so design-system owners can later
   reclassify individual selectors as shared or naapp-only without repeating the
   destructive re-vendor failure.
   ============================================================ */

/* Chrome: header source link, rendered only when a SiteConfig has source_url. */
.gh-link { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--muted); }
.gh-link:hover { color: var(--ink); background: var(--surface-2); }
.gh-link svg { width: 19px; height: 19px; }

/* Chrome: split-button label. Known shared-candidate selector; keep it isolated
   so it can move cleanly into the ac SOT if design-system owners choose. */
.split-btn__label { display: inline; }

/* Chrome: optional OSS line in the shared footer. */
.footer-oss { color: var(--muted); font-size: var(--step--1); }
.footer-oss a { color: var(--accent); text-decoration: none; }
.footer-oss a:hover { text-decoration: underline; }

/* ---- reference page (engineering API reference) ---- */
.ref-page-header { padding: var(--s5) 0 var(--s4); border-bottom: 1px solid var(--line-strong); }
.ref-page-title { font-size: var(--step-2); font-weight: 650; letter-spacing: -0.02em; }
.ref-page-desc { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); margin-top: var(--s1); }
.ref-page-desc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.ref-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--s5); align-items: start; padding-top: var(--s4); padding-bottom: var(--s8); }
.ref-sidebar { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; }
.ref-nav-group { margin-bottom: var(--s3); display: grid; gap: 0.1rem; }
.ref-nav-label { font: 600 var(--step--1)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s1); }
.ref-nav-group a, .ref-nav-link { display: block; font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--muted); text-decoration: none; padding: 0.18rem 0.5rem; border-left: 2px solid transparent; }
.ref-nav-group a:hover, .ref-nav-link:hover { color: var(--ink); background: var(--surface-2); }
.ref-nav-group a.active, .ref-nav-link.active { color: var(--ink); border-left-color: var(--accent); background: var(--accent-soft); }
.ref-nav-divider { height: 1px; background: var(--line); margin: var(--s2) 0; }

.ref-content { min-width: 0; max-width: 800px; }
.ref-section-label { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s5) 0 var(--s1); }
.ref-section-label h2 { font: 650 var(--step-1)/1 var(--font-sans); letter-spacing: -0.015em; }
.ref-section-label .count { font: 600 var(--step--1)/1 var(--font-mono); color: var(--muted); }

.ref-op, .ref-section-label { scroll-margin-top: 84px; }
.ref-op { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.ref-op-sig { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.ref-op-id { display: inline-flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.ref-op-tags { display: inline-flex; align-items: baseline; gap: var(--s1); flex: none; }
.ref-op-anchor { color: var(--faint); text-decoration: none; font-family: var(--font-mono); opacity: 0; transition: opacity .12s; margin-left: -0.9rem; }
.ref-op:hover .ref-op-anchor { opacity: 1; }
.ref-op-verb { font: 620 var(--step-1)/1.2 var(--font-mono); color: var(--ink); letter-spacing: -0.01em; }
.ref-op-method { font: 600 var(--step--1)/1 var(--font-mono); color: var(--muted); letter-spacing: 0.04em; }
.ref-op-method--write { font-weight: 700; color: var(--ink); }
.ref-op-path { font: 500 var(--step--1)/1 var(--font-mono); color: var(--faint); }
.ref-auth-tag { font: 600 0.66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.24rem 0.45rem; border-radius: 5px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.ref-auth-tag--public { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); }
.ref-auth-tag--team { color: var(--muted); background: var(--surface-2); }
.ref-scope-tag { font: 600 0.66rem/1 var(--font-mono); letter-spacing: 0.02em; padding: 0.24rem 0.45rem; border-radius: 5px; color: var(--faint); background: var(--surface-2); white-space: nowrap; }
.ref-op-desc { color: var(--ink); font-size: var(--step--1); max-width: 72ch; margin-top: var(--s2); }
.ref-section-note { font-size: var(--step--1); color: var(--muted); max-width: 72ch; margin-top: var(--s1); }

.ref-params { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin-top: var(--s3); }
.ref-params th { text-align: left; font: 650 var(--step--1)/1 var(--font-sans); color: var(--muted); padding: 0.4rem 0.9rem 0.4rem 0; border-bottom: 1px solid var(--line-strong); }
.ref-params td { padding: 0.42rem 0.9rem 0.42rem 0; vertical-align: top; color: var(--muted); border-bottom: 1px solid var(--line); font-family: var(--font-sans); }
.ref-params td:first-child { font-family: var(--font-mono); color: var(--ink); }
.ref-params .ref-req { color: var(--ink); }
.ref-params .ref-opt { color: var(--faint); }

.ref-cmd-primary { margin-top: var(--s3); }
.ref-wire-details { margin-top: var(--s2); }
.ref-wire-details > summary { font: 500 var(--step--1)/1.5 var(--font-mono); color: var(--muted); cursor: pointer; list-style: none; padding: 0.3rem 0; }
.ref-wire-details > summary::-webkit-details-marker { display: none; }
.ref-wire-details > summary::before { content: "\25B8  "; color: var(--faint); }
.ref-wire-details[open] > summary::before { content: "\25BE  "; }
.ref-wire-details > summary:hover { color: var(--ink); }
.ref-wire-body { padding-top: var(--s2); display: grid; gap: var(--s2); }
.ref-wire-note { font-size: var(--step--1); color: var(--faint); max-width: 72ch; }

@media (max-width: 880px) {
  .ref-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .ref-sidebar { position: static; max-height: none; overflow: visible; border-bottom: 1px solid var(--line); margin-bottom: var(--s2); padding: var(--s3) 0; }
  .ref-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
  .ref-nav-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-bottom: 0; }
  .ref-nav-divider { display: none; }
}