/* chock.sh: the E10 look, navy and teal (RD-E10-1). Dark is the default; light is the companion. Self-hosted fonts. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SchibstedGrotesk-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/SchibstedGrotesk-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/SchibstedGrotesk-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

/* E10 dark: the site's one theme. */
:root {
  --bg: #0B1B33;
  --bg-2: #10254A;
  --panel: #16284A;
  --panel-2: #1B2F55;
  --pill: #1B2F55;
  --line: #2A3D63;
  --line-2: #607198;
  --text: #FFFFFF;
  --body: #C7D2E3;
  --muted: #94A3B8;
  --accent: #38BDF8;
  --accent-2: #0EA5E9;
  --on-accent: #06182F;
  --highlight-text: #7DD3FC;
  --highlight-text-2: #60A5FA;
  --primary: #38BDF8;
  --on-primary: #06182F;
  --highlight: #38BDF8;
  --on-highlight: #06182F;
  --ok: #5EEAD4;
  --info: #8DB8F2;
  --warn-bg: #E8C77A;
  --warn-fg: #06182F;
  --warn-text: #E8C77A;
  --warns-bg: #F4A261;
  --dash: #94A3B8;
  --dots: #16284A;
  --footer-bg: #081326;
  /* Edges of pills and glass panels, and the glass panel's own shadow and fill. */
  --edge-soft: rgba(255, 255, 255, 0.18);
  --glass-edge: rgba(255, 255, 255, 0.1);
  --glass-fill: rgba(22, 40, 74, 0.86);
  --glass-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  /* Vertical rhythm: the gap between blocks, and between items of one block. */
  --flow: 16px;
  --flow-tight: 8px;
  --heading-gap: 40px;
  --chamfer: 14px;
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Sticky panels park this far down: common.js overwrites it with the
     measured header height; this fallback is the static 1280px value. */
  --sticky-top: 117px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

main {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}

p, dd, td, li { overflow-wrap: break-word; }

.row-name, .row-id, .row-desc, .bsays, .bname, .sel-name { overflow-wrap: anywhere; }

h1, h2, h3 {
  color: var(--text);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Display type: 72px and 44px, down to 44px and 32px on a phone. */
h1 { font-size: 72px; line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 16px; }
h2 { font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 14px; }
.section-intro-block h2, .head-row h2, .cta h2 { font-size: 44px; line-height: 1.02; letter-spacing: -0.035em; }
.selection h2 { font-size: 24px; }
h3 { font-size: 21px; margin: 0 0 8px; letter-spacing: -0.01em; font-weight: 600; line-height: 1.2; }

@media (max-width: 720px) {
  h1 { font-size: 44px; }
  h2, .section-intro-block h2, .head-row h2, .cta h2 { font-size: 28px; }
}
/* A section heading never sits flush under the block before it: at least 2 x --flow above it. */
* + h2,
:is(section:not([class]), .install-routes, .faq-group) > h2:first-child { margin-top: var(--heading-gap); }

a { color: var(--highlight-text); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); }

code {
  font-family: var(--mono);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text);
  font-size: 0.85em;
}

pre {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow-x: auto;
  font-weight: 400;
}

pre code {
  font-weight: 400;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font-size: 13px;
  white-space: pre;
}

/* Boxes in text flow (code blocks, notes, callouts): the same space above and below,
   whatever the neighbours' own margins (their facing margins are zeroed, so collapsing
   cannot undo it); a heading after a box keeps its own larger space. A box at the edge
   of a boxed container sits flush with its padding.
   Code never wraps; a long command scrolls inside its box. */
main :where(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors):not([hidden]) { margin-block: var(--flow); }
main :where(.output-box, .section, .client-step) > :where(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors):first-child { margin-top: 0; }
main :where(.output-box, .section, .client-step) > :where(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors):last-child { margin-bottom: 0; }
main :not(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors):has(+ :is(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors):not([hidden])) { margin-bottom: 0 !important; }
main :is(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors):not([hidden]) + :not(pre, .code-block, .callout, .quiz-note, .client-untested, .client-evidence, .note-card, .noscript-note, .friction-note, .author-errors, h2, h3) { margin-top: 0 !important; }

button, input, select, textarea { font-weight: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--primary);
  color: var(--on-primary);
  padding: 8px 14px;
  border-radius: 4px;
  z-index: 20;
  font-weight: 600;
}

.skip-link:focus { top: 8px; }

/* header + nav */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.wordmark .wedge { width: 30px; height: 30px; }

.header-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.wordmark:hover { text-decoration: none; }

.wordmark-text { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }

#nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

#nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--body);
  font-size: 15px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

#nav-links a:hover { color: var(--text); text-decoration: none; }
#nav-links a[aria-current="page"] { color: var(--text); background: var(--pill); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

/* badges */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.badge-design { color: var(--muted); border: 1px dashed var(--dash); }

.badge-ok {
  color: var(--ok);
  background: color-mix(in srgb, var(--ok) 13%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--panel));
}

.badge-ok::before { content: "●"; font-size: 8px; }

.hero .badge, .general-head .badge { font-size: 12px; padding: 6px 12px; }

/* section nav — full-width band under the header on a section's pages */

.section-nav {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.section-nav-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
}

.section-nav-title {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-nav nav { display: flex; align-items: center; gap: 6px; }

.section-nav a {
  color: var(--body);
  font-size: 14px;
  padding: 4px 12px;
  margin: 6px 0;
  white-space: nowrap;
  border-radius: 4px;
}

.section-nav a:hover { color: var(--text); text-decoration: none; }

.section-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--pill);
}

/* buttons: the bottom-left corner is cut, so the edge is an inset shadow (clip-path would clip a border) */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
}

.button:hover { background: var(--pill); color: var(--text); text-decoration: none; }

.button-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: none;
  color: var(--on-accent);
}

.button-primary:hover {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  color: var(--on-accent);
}

.button-secondary { background: var(--panel-2); }

.button-small { min-height: 42px; padding: 0 18px; font-size: 15px; }

/* The home page's closing buttons share the primary and secondary looks. */
.button-dark { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: none; color: var(--on-accent); }
.button-dark:hover { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--on-accent); }
.button-outline-dark { background: var(--panel-2); color: var(--text); }

button.copy, button.download {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--body);
  padding: 5px 10px;
  cursor: pointer;
}

button.copy:hover, button.download:hover { color: var(--text); border-color: var(--accent); }
button.copy[disabled], button.download[disabled] { opacity: 0.5; cursor: default; }

/* hero + demo */

.hero-band {
  padding: 72px 0 56px;
  background-image: radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: 22px 22px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.hero-text { max-width: 660px; }

.eyebrow {
  font-family: var(--mono);
  color: var(--highlight-text);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.hero h1 { margin: 14px 0 18px; }

.sub { font-size: 18px; color: var(--body); }

.hero .sub { margin: 0 0 28px; }

.hero-actions { display: flex; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }

.hero-note { color: var(--muted); font-size: 14px; margin: 0; }

.demo {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.demo-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.demo-body { border: 0; border-radius: 0; white-space: pre-wrap; overflow-wrap: break-word; }

.demo-line { display: block; margin: 0 0 8px; }
.demo-line:last-child { margin-bottom: 0; }
.demo-mark { color: var(--accent); margin-right: 8px; }
.demo-you { color: var(--muted); }
.demo-claude-code { color: var(--text); }
.demo-guard { color: var(--accent); }

.demo-foot {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

/* sections */

.section { padding: 56px 0; border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.section-head h2 { margin: 0; }

.section-intro { margin: 0 0 28px; color: var(--body); max-width: 660px; font-size: 17px; }

.section-note { color: var(--muted); font-size: 13px; margin: 16px 0 0; }

.cards { display: grid; gap: 14px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-presets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cards-clients { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Small card grids: every card is as tall as the tallest one in its grid, across all
   rows. Long lists (.card-rows) only align per row: grid items stretch to their row. */
.card-grid { grid-auto-rows: 1fr; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px;
  color: var(--body);
}

.card h2, .card h3 { color: var(--text); }
.card p { margin: 0 0 8px; }
.card p:last-child { margin-bottom: 0; }

.stop-card .card-label { margin-bottom: 10px; }
.card-says { color: var(--body); font-size: 14px; }

.track-card { display: block; color: var(--body); }
.track-card h3 { margin: 0 0 10px; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px;
}

.step-num {
  display: block;
  font-family: var(--mono);
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 12px;
}

.step h3 { font-size: 16px; }
.step p { margin: 0; font-size: 14px; }
.step code { white-space: nowrap; }

.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}

.stat-num { display: block; color: var(--text); font-size: 36px; font-weight: 800; line-height: 1.1; margin: 0 0 8px; }
.stat-label { color: var(--body); font-size: 14px; margin: 0; }

.stat-block {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--panel));
}

.stat-block .stat-num { color: var(--accent); }

.preset-card { display: block; color: var(--body); }
.preset-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.preset-title { color: var(--text); font-weight: 600; font-size: 16px; }
.preset-count { color: var(--accent); font-size: 13px; white-space: nowrap; }
.preset-summary { display: block; font-size: 14px; }

.agent-card { display: block; color: var(--body); }
.agent-card h3 { margin: 0 0 6px; }
.agent-repo { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

.question h3 { font-size: 15px; }
.question p { font-size: 14px; color: var(--body); }

.cta {
  margin: 48px 0 64px;
  padding: 48px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  text-align: center;
}

.arrow-link { font-size: 14px; font-weight: 600; }
.arrow-link::after { content: ""; }

/* footer */

footer { background: var(--footer-bg); border-top: 1px solid var(--line); margin-top: 56px; }

.footer-inner {
  max-width: 1152px;
  margin: 0 auto;
  padding: 44px 24px 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand .wordmark-text { color: var(--text); }
.footer-tagline { color: var(--muted); font-size: 14px; margin: 12px 0 0; max-width: 260px; }

.footer-head {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-col a { color: var(--body); font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.footer-col a:hover { color: var(--text); text-decoration: none; }

.footer-line {
  max-width: 1152px;
  margin: 0 auto;
  padding: 16px 24px 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.footer-line a { color: var(--body); }
.footer-line a:hover { color: var(--text); }

/* page head */

.page-head { padding: 56px 0 36px; }
.page-head h1 { margin: 10px 0 16px; }
.page-head .sub { max-width: 760px; margin: 0 0 8px; }
.error-code { color: var(--accent); font-size: 40px; font-weight: 700; margin: 0 0 8px; }

/* general section */

.general-head .sub { margin-bottom: 20px; }
.general-head p { margin: 0 0 20px; }

/* distribution bar — segment widths are computed at build time (SEG_* tokens) */

.dist-bar { display: flex; gap: 4px; margin: 28px 0 12px; border-radius: 4px; overflow-x: auto; }

.dist-seg {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  min-width: max-content;
}

.dist-block { flex: 39; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.dist-ask { flex: 3; background: var(--warn-bg); color: var(--warn-fg); }
.dist-warn { flex: 5; background: var(--warns-bg); color: var(--warn-fg); }
.dist-advise { flex: 24; border: 1px dashed var(--dash); color: var(--body); }

.dist-seg:first-child { border-radius: 10px 0 0 10px; }
.dist-seg:last-child { border-radius: 0 10px 10px 0; }

.dist-note { color: var(--muted); font-size: 13px; margin: 0; }

/* filters */

.filters { margin: 4px 0 20px; }

.filter-row {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filter-row:last-child { margin-bottom: 0; }

/* author page (BV-S2) */

.author-link { margin: 20px 0 0; font-size: 14px; }
.author-link a { color: var(--accent); font-weight: 600; }

.report-link { margin: 12px 0 0; font-size: 14px; }
.report-link a { color: var(--accent); }

/* report page (IS-1b): the security card comes first and stands out */

.report-security {
  border: 1px solid color-mix(in srgb, var(--warn-fg) 45%, var(--line));
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-radius: 4px;
  padding: 22px;
  margin: 0 0 24px;
}
.report-security h2 { margin: 0 0 8px; font-size: 24px; color: var(--warn-text); }
.report-security p { margin: 0 0 10px; }
.report-security a { color: var(--warn-text); text-decoration: underline; }
.report-security-links { margin: 0; padding-left: 18px; }
.report-security-links li { margin: 4px 0; }
.report-card { display: flex; flex-direction: column; }
.report-card h2 { margin: 0 0 8px; font-size: 20px; }
.report-card ul { margin: 0 0 16px; padding-left: 18px; }
.report-card .report-action { margin-top: auto; }
.report-note { margin-top: 20px; }

.builder-grid.author-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }

.kind-picker { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.kind-picker legend { color: var(--text); font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.kind-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.kind-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  background: var(--panel);
  color: var(--body);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
}
.kind-card:hover { border-color: var(--accent); color: var(--text); }
.kind-card:has(input:checked) { border-color: var(--accent); color: var(--text); }
.kind-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kind-card input { accent-color: var(--accent); margin: 0; position: absolute; opacity: 0; }
.kind-title { color: var(--text); font-weight: 600; }
.kind-blurb { font-size: 12px; color: var(--body); }

.author-field { margin-bottom: 18px; }
.author-field input, .author-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 10px 14px;
}
.author-field textarea { resize: vertical; }

.author-catalog { margin-top: 28px; }
.author-catalog h3 { color: var(--text); font-size: 14px; margin: 0 0 4px; }
.author-catalog-filter input { width: 100%; margin-top: 10px; }
.author-catalog-list { max-height: 300px; overflow-y: auto; margin-top: 8px; }
.amember {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--body);
  cursor: pointer;
}
.amember:last-child { border-bottom: 0; }
.amember input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.amember-name { color: var(--text); overflow-wrap: anywhere; }

.author-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.author-head .button[hidden], .author-cleared[hidden] { display: none; }
.author-cleared { margin: 0 0 16px; font-size: 13px; color: var(--body); }
.author-cleared .linkish { margin-left: 6px; font-size: 13px; }

.afile { margin-bottom: 18px; }
.afile-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.afile-head code { color: var(--text); font-size: 12px; font-weight: 600; }
.afile-edited {
  color: var(--warn-text);
  font-size: 11px;
  border: 1px dashed var(--warn-text);
  border-radius: 4px;
  padding: 0 6px;
}
.afile-text {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 10px 12px;
  resize: vertical;
  white-space: pre;
  overflow: auto;
}

.author-errors {
  border: 1px solid color-mix(in srgb, var(--warn-fg) 45%, var(--line));
  background: var(--warn-bg);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--warn-fg);
}
.author-errors p { margin: 0 0 6px; font-weight: 600; }
.author-errors ul { margin: 0; padding-left: 18px; }
.author-errors li { margin: 2px 0; }

.author-sha code { color: var(--muted); font-size: 11px; word-break: break-all; }
.author-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.linkish {
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { color: var(--text); }

.field label {
  display: block;
  color: var(--body);
  font-size: 13px;
  margin-bottom: 6px;
}

.field input, .field select {
  font-family: var(--sans);
  font-size: 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 10px 14px;
}

.search-field { flex: 1; min-width: 240px; }
.search-field input { width: 100%; }
.field select { min-width: 200px; }

/* Select-only combobox (select.js) over a native <select>; the list opens under the button. */
.combo { position: relative; min-width: 200px; }
.combo-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  text-align: left;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 10px 14px;
  cursor: pointer;
}
.combo-button:hover, .combo.is-open .combo-button { border-color: var(--accent); }
.combo-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
}
.combo.is-open .combo-chevron { margin-top: 4px; transform: rotate(225deg); }
.combo-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-width: calc(100vw - 32px);
  max-height: min(320px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 14%, transparent);
}
.combo-list[hidden] { display: none; }
.combo-option {
  display: block;
  padding: 8px 12px 8px 30px;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.combo-option.is-active { background: var(--panel-2); }
.combo-option.is-current { font-weight: 600; }
.combo-option.is-current::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 5px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.combo-count { color: var(--muted); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .combo-list:not([hidden]) { animation: combo-open 140ms ease-out; }
  .combo-chevron { transition: transform 140ms ease-out; }
}
@keyframes combo-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.filter-label { color: var(--body); font-size: 13px; align-self: center; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  font-family: var(--sans);
  font-size: 13px;
  background: var(--panel);
  color: var(--body);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 6px 13px;
  cursor: pointer;
}

.chip:hover { border-color: var(--accent); color: var(--text); }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip[aria-pressed="true"] .glyph, .chip[aria-pressed="true"] .chip-count { color: var(--on-accent); }

.status { color: var(--muted); font-size: 14px; margin: 0 0 16px; }

/* policy cards */

.rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 56px; }

.row { display: flex; flex-direction: column; gap: 10px; }
.row.hidden { display: none; }

.row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-ver { color: var(--muted); font-size: 12px; }
.row-name { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.row-name a { color: var(--text); }
.row-name a:hover { color: var(--accent); text-decoration: none; }
.row-id { color: var(--muted); font-size: 12px; margin: 0; }
.row-desc { font-size: 14px; color: var(--body); margin: 0; flex: 1; }
.row-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.row-where { color: var(--muted); font-size: 13px; }
.row-add { color: var(--accent); font-size: 14px; font-weight: 600; }

/* label chips */

.label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 0;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.label .glyph { font-size: 10px; }

.label-block { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.label-ask { background: var(--warn-bg); color: var(--warn-fg); }
.label-warn { background: var(--warns-bg); color: var(--warn-fg); }
.label-advise { border: 1px dashed var(--dash); color: var(--body); }
.label-commit { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.label-agent { border: 1px solid var(--accent); color: var(--accent); }

.label-anchor { display: inline-flex; }

.glyph-block { color: var(--accent); }
.glyph-ask { color: var(--warn-text); }
.glyph-warn { color: var(--warn-text); }
.glyph-advise { color: var(--muted); }
.glyph-commit, .glyph-agent { color: var(--accent); }
.glyph-none { display: none; }

/* policy page */

.breadcrumb {
  padding: 28px 0 0;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--body); }

.policy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  padding: 20px 0 56px;
}

.policy-main { min-width: 0; }

.chip-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

.chip-static {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--body);
}

.chip-link:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.policy-head h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 14px; }
.policy-lede { font-size: 19px; color: var(--body); margin: 0 0 26px; }
.policy-lede::first-letter { text-transform: uppercase; }

.fact-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 36px;
}

.fact {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
}

.fact-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.fact-value { font-size: 16px; font-weight: 600; color: var(--text); margin: 0; }
.fact-ok { color: var(--ok); }

.policy-main section { margin-bottom: 36px; }
.policy-main h2 { font-size: 22px; margin-bottom: 14px; }
.policy-main section p { margin: 0 0 10px; }
.policy-main section p:last-child { margin-bottom: 0; }

.label-note { color: var(--muted); font-size: 14px; margin-top: 12px; }
.plugin-note { color: var(--accent); font-size: 14px; margin-top: 10px; }

.examples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 8px; }
.example, .pick, .selection { min-width: 0; }

.example {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px;
}

.example-refused { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.example-allowed { border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }

.example-word { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; margin: 0 0 10px; }
.example-refused .example-word { color: var(--accent); }
.example-allowed .example-word { color: var(--ok); }
.example-prompt { font-size: 14px; margin: 0 0 12px; color: var(--body); }

.latest-line { color: var(--body); font-size: 14px; }
.latest-line .mono { color: var(--text); }

.policy-side { align-self: start; position: sticky; top: calc(var(--sticky-top) + 16px); display: grid; gap: 14px; }

.side-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}

.side-buttons { display: grid; gap: 10px; padding: 14px; }
.side-buttons .button { text-align: center; width: 100%; }

.side-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

.provenance dl { margin: 0; }
.prov-row { padding: 10px 0; border-top: 1px solid var(--line); }
.prov-row:first-child { border-top: 0; }
.prov-row dt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.prov-row dd { margin: 0; font-size: 13px; color: var(--body); }
.prov-row .hash { word-break: break-all; display: block; margin-bottom: 6px; font-size: 12px; }

.also-in .also-link { display: block; padding: 5px 0; font-size: 13px; color: var(--body); }
.also-in .also-link:hover { color: var(--accent); text-decoration: none; }

/* builder */

.builder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  padding-bottom: 48px;
  align-items: start;
}

.pick .filter-row { margin-bottom: 16px; }
.pick .chips { margin-bottom: 20px; }

/* Each group is its own panel, so where one group ends and the next starts is plain. */
.bgroup {
  margin-bottom: 24px;
  padding: 16px 20px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.bgroup h3 {
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
}
.bgroup-count { color: var(--muted); font-weight: 500; font-size: 12px; }

/* The chip column has one width, so every row's says text starts at one x. */
.bmember {
  display: grid;
  grid-template-columns: 220px 7.5rem minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.bmember:last-child { border-bottom: 0; }
.bmember .label { justify-self: start; align-self: start; }
.bpick { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; cursor: pointer; }
.bpick input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}
.bsays { color: var(--body); font-size: 12px; }
.bdetails { font-size: 12px; }

.selection {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
  position: sticky;
  top: var(--sticky-top);
  max-height: calc(100vh - var(--sticky-top) - 16px);
  overflow-y: auto;
}

/* Long pick lists scroll inside the panel so the notes and outputs stay on screen. */
.selection .sel-list { max-height: 35vh; overflow-y: auto; }

.bmember.hidden, .bgroup.hidden { display: none; }
.sel-items { list-style: none; margin: 0; padding: 0; }
.sel-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.sel-item:last-child { border-bottom: 0; }
.sel-name { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
.sel-says { grid-column: 1 / 3; color: var(--body); font-size: 12px; }
.sel-item .remove {
  grid-column: 3;
  grid-row: 1;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--body);
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
}
.sel-item .remove:hover { color: var(--text); border-color: var(--accent); }
.need-one { color: var(--body); font-size: 13px; margin: 16px 0 0; }
.sel-count { color: var(--body); font-size: 13px; font-weight: 500; }
.sel-list .empty { color: var(--muted); }

.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notes .note-card,
.link-notice .note-card {
  border: 1px solid color-mix(in srgb, var(--warn-fg) 45%, var(--line));
  background: var(--warn-bg);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--warn-fg);
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 16px; }
.tabs [role="tab"] {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--body);
  font-family: var(--sans);
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
}
.tabs [role="tab"][disabled] { cursor: default; opacity: 0.6; }
.tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.output-box { padding: 12px 0; }
.share-url {
  width: 100%;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-2);
  color: var(--body);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.hint { color: var(--muted); font-size: 12px; margin: 12px 0 0; }

/* the agent picker and each agent's install panel (BV-S1) */
.client-picker { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.client-picker legend { color: var(--text); font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.client-options { display: flex; flex-wrap: wrap; gap: 8px; }
.client-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  background: var(--panel);
  color: var(--body);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
}
.client-option:hover { border-color: var(--accent); color: var(--text); }
.client-option:has(input:checked) { border-color: var(--accent); color: var(--text); }
.client-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.client-option input { accent-color: var(--accent); margin: 0; }
.client-state { color: var(--muted); font-size: 12px; }
.state-witnessed { color: var(--accent); }
.client-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.client-untested, .client-evidence {
  border: 1px dashed var(--dash);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--body);
}
.client-untested strong, .client-evidence strong { color: var(--text); font-weight: 600; }
.client-steps { margin-top: 12px; }
.steps-heading { color: var(--text); font-size: 13px; }
.steps-list { padding-left: 24px; font-size: 13px; color: var(--body); }
.steps-note { font-size: 13px; color: var(--body); }

/* Install steps, on the install page and in the builder: one rhythm between the
   command, the lead-in, each step, the notes and the remove block. */
.install-agent > :not(pre, .code-block, .client-evidence), .client-steps > :not(pre, .code-block), .steps-list .client-step { margin: 0; }
.install-agent > * + :not(pre, .code-block, .client-evidence), .client-steps > * + :not(pre, .code-block), .steps-list .client-step + .client-step { margin-top: var(--flow-tight); }
.install-agent > * + .steps-heading { margin-top: var(--flow); }
.steps-list pre { padding: 10px 12px; }
.noscript-note {
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn-fg) 45%, var(--line));
  border-radius: 4px;
  padding: 14px 18px;
  color: var(--warn-fg);
}

/* faq / agents / security / clients */

.faq-list { padding-bottom: 48px; }
.faq-item { border-top: 1px solid var(--line); padding: 20px 0; }
.faq-item h2 { font-size: 18px; }
.faq-item p { margin: 0; max-width: 720px; }

.note-section { padding: 24px 0 48px; }

.client-card h2 { font-size: 17px; }

table.fields {
  border-collapse: collapse;
  width: 100%;
  margin-top: 12px;
  font-size: 13px;
}

.fields th, .fields td {
  text-align: left;
  border: 1px solid var(--line);
  padding: 8px 12px;
}

.fields th { color: var(--text); background: var(--panel); }
.fields td { color: var(--body); }

/* home page (redesign R-2) */

body { overflow-x: clip; }

.accent { color: var(--accent); }

.center { text-align: center; }

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

.pill {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  box-shadow: inset 0 0 0 1px var(--edge-soft);
  border-radius: 0;
  color: var(--body);
}

.pill-accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, var(--accent-2) 25%, transparent));
  color: var(--text);
}

.home-hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; }

.hero-sub { font-size: 19px; color: var(--body); margin: 0 0 26px; max-width: 560px; }

.install-line {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 0 0 18px;
  padding: 10px 12px 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.install-line .prompt { color: var(--muted); }

.install-code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
}

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--body);
}

.tick { color: var(--ok); }

/* the terminal demo: a list without JavaScript, tabs with it */

.demo-head {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  background: var(--panel-2);
}

.demo-dots { display: inline-flex; gap: 6px; }
.demo-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }

.demo-list { list-style: none; margin: 0; padding: 0; }

.demo-case { padding: 16px 18px 6px; border-top: 1px solid var(--line); }
.demo-case:first-child { border-top: 0; }
.demo-tab-name { margin: 0 0 8px; color: var(--accent); font-size: 12px; }

.demo-body { background: transparent; padding: 0; border: 0; font-size: 13px; line-height: 1.7; }
.demo-input { color: var(--text); }
.demo-input .demo-mark { color: var(--accent); }
.demo-refusal {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--warn-bg);
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  color: var(--warn-fg);
}
.demo-refusal .demo-mark { color: var(--accent); }

.demo-link { margin: 10px 0 8px; }

.demo-tabbed .demo-tab-name { display: none; }
.demo-tabbed .demo-case { border-top: 0; }

.demo-tabs, .usecase-tablist { display: flex; flex-wrap: wrap; gap: 4px; }
.demo-tabs { padding: 10px 12px 0; border-bottom: 1px solid var(--line); }

.tab-button {
  font: 500 13px var(--mono);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 8px 12px;
  cursor: pointer;
  min-height: 36px;
}

.tab-button:hover { color: var(--text); }

.tab-button[aria-selected="true"] {
  color: var(--text);
  background: var(--bg-2);
  border-color: var(--line-2);
  border-bottom-color: var(--bg-2);
  margin-bottom: -1px;
}

.demo-foot { margin: 0; padding: 12px 18px 16px; }

/* works with */

.works {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 36px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.works-label { color: var(--muted); font-size: 12px; letter-spacing: 0.1em; }
.works-list { display: flex; flex-wrap: wrap; gap: 14px 32px; list-style: none; margin: 0; padding: 0; }
.works-item { display: inline-flex; align-items: center; gap: 10px; color: var(--body); font-weight: 600; font-size: 17px; }
.works-item:hover { color: var(--text); text-decoration: none; }
.works-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.works-how { color: var(--muted); font-size: 11px; font-weight: 500; }

/* section scaffolding */

.eyebrow + h2 { margin-top: 12px; }
.section-intro-block { max-width: 720px; }
.section-intro-block.center { margin: 0 auto 8px; text-align: center; }
.section-intro-block .section-intro { margin-bottom: 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.lede { font-size: 18px; color: var(--body); margin: 0 0 16px; }

.band { position: relative; isolation: isolate; }

.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 92%, var(--bg)));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.split-narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; }

/* two kinds of agent */

.track-cards { margin-top: 32px; }

.track-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--body);
}

.track-card-available { border-color: var(--accent); }
.track-card-in-design { background: var(--bg-2); border-style: dashed; border-color: var(--dash); }
.track-card h3 { font-size: 28px; margin: 0; }
.track-card h3 a { color: var(--text); }
.track-card p { margin: 0; }
.track-badge { margin: 0; }
.track-summary { font-size: 16px; }
.track-note { color: var(--muted); font-size: 14px; }
.track-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 6px; }

.track-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.track-stats dt { color: var(--body); font-size: 13px; }
.track-stats dd { margin: 0; color: var(--text); font-size: 26px; font-weight: 700; line-height: 1.2; }
.track-stats div { display: flex; flex-direction: column-reverse; }

/* how it works */

.how-steps { margin-top: 32px; }
.step-code { font-size: 12px; background: var(--bg); }
.step-note { margin-top: 8px; font-size: 13px; }

/* one policy, every surface */

.surfaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.surface {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 8px 14px;
  padding: 12px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.surface-name { color: var(--text); font-weight: 600; font-size: 14px; }
.surface-label { color: var(--body); font-size: 13px; }
.surface-label .label { margin-right: 6px; }
.surface-source { color: var(--muted); font-size: 13px; margin: 18px 0 0; }

/* use cases */

.usecases { margin-top: 28px; }
.usecase-tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.usecase-tabs[hidden] { display: none; }
.usecase-tab { display: inline-block; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--body); background: var(--panel); font-weight: 600; font-size: 14px; }
.usecase-tab:hover { color: var(--text); text-decoration: none; }

.usecase-tablist { gap: 8px; margin-bottom: 16px; }
.usecases-tabbed .tab-button {
  font: 600 14px var(--sans);
  padding: 10px 16px;
  min-height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel);
  color: var(--body);
  margin-bottom: 0;
}
.usecases-tabbed .tab-button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.usecase {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
}

.usecase[hidden] { display: none; }
.usecase-main { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.usecase-main h3 { font-size: 26px; margin: 0; }
.usecase-main p { margin: 0; }
.usecase-kicker { color: var(--accent); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.usecase-points { margin: 0; padding-left: 20px; color: var(--text); }
.usecase-side { padding: 32px; background: var(--bg-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.usecase-panel-title { color: var(--muted); font-size: 12px; letter-spacing: 0.08em; margin: 0; }
.usecase-policies { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.usecase-policy {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.usecase-policy a { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.usecase-says { display: block; color: var(--body); font-size: 13px; margin-top: 3px; }
.usecase-policy .label { flex: none; }

/* honest by design */

.friction-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 22px;
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn-fg) 45%, var(--line));
  border-radius: 4px;
  color: var(--warn-fg);
}

.friction-note p { margin: 0; flex: 1 1 300px; }
.friction-note strong { color: var(--text); }
.friction-note a { color: var(--warn-text); }
.label-cards { margin-top: 28px; }
.label-card p { margin: 0 0 8px; }

/* no model; shift left; local */

.caveat {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--text);
}

.pipelines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.pipeline { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.pipeline-chock { border-color: var(--accent); }
.pipeline h3 { margin-bottom: 14px; }
.pipeline-steps { list-style: none; counter-reset: pipe; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.pipeline-steps li { counter-increment: pipe; display: flex; gap: 10px; align-items: baseline; color: var(--text); }
/* The font shorthand comes first so it does not reset line-height; text-box trims the line to the digit's height. */
.pipeline-steps li::before { content: counter(pipe); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); font: 600 12px var(--mono); line-height: 1; text-box: trim-both cap alphabetic; }
.pipeline-chock .pipeline-steps li::before { border-color: var(--accent); color: var(--accent); }
.pipeline-note { color: var(--body); font-size: 14px; margin: 0; }

.calc { padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.calc h3 { font-size: 22px; }
.calc-label { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.calc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.calc-form .field input { width: 100%; }
.calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 14px; }
.calc-out div { display: flex; flex-direction: column-reverse; padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; }
.calc-out dt { color: var(--body); font-size: 13px; }
.calc-out dd { margin: 0; color: var(--text); font-size: 32px; font-weight: 700; line-height: 1.15; }
.calc-invalid { color: var(--warn-text); font-size: 14px; margin: 0 0 12px; }
.calc-formula-heading { color: var(--text); font-size: 14px; margin: 18px 0 6px; }
.calc-formula { margin: 0 0 10px; padding-left: 20px; font-family: var(--mono); font-size: 13px; color: var(--body); }
.calc-example { color: var(--muted); font-size: 14px; margin: 0; }

/* incident and comparison tables */

.table-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--line); border-radius: 4px; }
.incidents, .fit, .routes { width: 100%; border-collapse: collapse; font-size: 15px; }
.incidents th, .incidents td, .fit th, .fit td, .routes th, .routes td { text-align: left; padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.incidents thead th, .fit thead th, .fit thead td, .routes thead th { border-top: 0; background: var(--panel-2); color: var(--text); font-weight: 600; }
.incidents tbody th, .fit tbody th, .routes tbody th { color: var(--text); font-weight: 500; }
.incidents td, .fit td, .routes td { color: var(--body); }
.routes { font-size: 14px; min-width: 760px; }
.routes code { overflow-wrap: anywhere; }
.route-word, .route-evidence, .route-note { display: block; margin-top: 6px; }
.route-word, .route-source { color: var(--muted); font-size: 13px; }
.incident-policies a { display: block; font-size: 13px; overflow-wrap: anywhere; }
.fit .fit-chock { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
.fit thead .fit-chock { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); }
.honesty { color: var(--text); font-weight: 600; margin: 6px 0 0; }

/* trust, faq, cta */

.trust-card p { margin: 0 0 10px; }
.proof { margin-top: auto; font-size: 12px; }
.cards-3 .trust-card { display: flex; flex-direction: column; }

.faq-accordion { display: grid; gap: 10px; max-width: 840px; margin: 28px auto 20px; }
.faq-details { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.faq-details summary { cursor: pointer; padding: 18px 22px; color: var(--text); font-weight: 600; font-size: 17px; list-style: none; min-height: 44px; }
.faq-details summary::-webkit-details-marker { display: none; }
.faq-details summary::after { content: "+"; float: right; color: var(--accent); font: 500 20px var(--mono); }
.faq-details[open] summary::after { content: "−"; }
.faq-details p { margin: 0; padding: 0 22px 20px; }

.cta { background: var(--panel-2); border-color: var(--line); border-radius: 4px; padding: 56px 32px; }
.cta h2 { color: var(--text); }
.cta p { color: var(--body); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* builder start screen */

.builder-grid[hidden], .quiz[hidden] { display: none; }

.quiz { max-width: 820px; margin: 0 auto; padding: 0 0 80px; }
.quiz-top { display: flex; justify-content: flex-end; margin-bottom: calc(2 * var(--flow)); }
.quiz-bars { display: flex; gap: 6px; }
.quiz-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.quiz-bar.on { background: var(--accent); }
.quiz-step {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.quiz-title { margin: 10px 0 0; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; }
.quiz-title:focus { outline: none; }
.quiz-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.quiz-hint-text { margin: 12px 0 0; font-size: 17px; color: var(--body); }
.quiz-options {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.quiz-opt { position: relative; display: block; cursor: pointer; }
.quiz-bars, .quiz-opt, .quiz-nav .button, .quiz-actions .button, .quiz-pick .remove, .quiz-title { scroll-margin-top: calc(var(--sticky-top) + 16px); scroll-margin-bottom: 16px; }
.quiz-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.quiz-opt-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 96px;
  padding: 20px 44px 20px 20px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  position: relative;
}
.quiz-opt:hover .quiz-opt-box { border-color: var(--accent); }
.quiz-opt input:checked + .quiz-opt-box { border-color: var(--accent); background: var(--panel-2); }
.quiz-opt input:checked + .quiz-opt-box::after {
  content: "✓";
  position: absolute;
  top: 16px;
  right: 18px;
  color: var(--accent);
  font-weight: 700;
}
.quiz-opt input:focus-visible + .quiz-opt-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-opt-label { font-size: 17px; font-weight: 600; color: var(--text); }
.quiz-opt-sub { font-size: 13.5px; line-height: 1.45; color: var(--body); }
.quiz-note, .quiz-need { font-size: 15px; color: var(--body); }
.quiz-need { margin: 16px 0 0; }
/* The note sits between the options and the nav (32px above it), as far from each. */
.quiz .quiz-note { margin-block: 32px; }
.quiz-note { padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); }
.quiz-note[hidden], .quiz-need[hidden] { display: none; }
.quiz-nav { margin-top: 32px; display: flex; justify-content: space-between; gap: 12px; }
.quiz-nav .button { min-height: 46px; cursor: pointer; font-family: var(--sans); }
.quiz-nav .button[hidden] { display: none; }
.quiz-nav .button[disabled] { opacity: 0.55; cursor: default; }
.quiz-nav #quiz-back { margin-right: auto; }
.quiz-nav #quiz-next { margin-left: auto; }
.quiz-mix { margin: 8px 0 0; font-size: 14px; color: var(--body); font-family: var(--mono); }
.quiz-picks { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.quiz-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 6px 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.quiz-pick-name { justify-self: start; overflow-wrap: anywhere; font-weight: 600; }
.quiz-pick-id { font-weight: 400; font-size: 12px; color: var(--muted); }
.quiz-pick-why { font-size: 13px; color: var(--muted); }
.quiz-pick .remove {
  min-width: 36px;
  min-height: 36px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--body);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
}
.quiz-pick .remove:hover { color: var(--text); border-color: var(--accent); }
.quiz-empty { margin: 24px 0 0; color: var(--body); }
.quiz-command {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
}
.quiz-command-title { font-size: 13px; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.quiz-actions .button { min-height: 46px; cursor: pointer; font-family: var(--sans); }

/* git repositories */

.stats-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-card .stat-label { margin-bottom: 10px; }
.tier-meaning { color: var(--body); font-size: 14px; margin: 0; }
.repos-group { margin-top: 32px; }
.repos-group h3 { font-size: 18px; margin: 0 0 8px; }
.repos-count { color: var(--muted); font-weight: 500; }
/* Name over id, one divider per row; equal rows keep the two columns aligned. */
.repos-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: 32px; border-top: 1px solid var(--line); }
.repos-list li { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.repos-list a { color: var(--body); font-size: 15px; font-weight: 500; line-height: 1.4; text-underline-offset: 3px; }
.repos-list a:hover, .repos-list a:focus-visible { color: var(--accent); text-decoration: underline; }
.repos-list .repos-id { display: block; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.quiz-ci { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--body); }
.quiz-ci input { width: 18px; height: 18px; accent-color: var(--accent); }
.quiz-unknown, .quiz-shared { color: var(--muted); font-size: 14px; margin: 12px 0 0; overflow-wrap: anywhere; }

.mobile-bar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 0.15s ease; }
  .card-hover {
    transition: transform 0.18s ease, border-color 0.18s ease;
  }
  .card-hover:hover { transform: translateY(-2px); border-color: var(--line-2); text-decoration: none; }
}

/* mobile */

@media (max-width: 960px) {
  .builder-grid, .builder-grid.author-grid, .policy-grid { grid-template-columns: minmax(0, 1fr); }
  .policy-side { position: static; }
  .selection { position: static; max-height: none; overflow-y: visible; }
  .selection .sel-list { max-height: none; overflow-y: visible; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  main { padding: 0 16px; }
  .header-inner { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .nav-toggle { display: none; }
  html.js .nav-toggle { display: block; order: 3; margin-left: auto; }
  html.js #nav-links { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
  html.js #nav-links.nav-open { display: flex; }
  #nav-links { order: 4; flex-basis: 100%; }
  .header-inner .button-small { margin-left: auto; }

  /* One row of section links keeps the sticky header short on a phone. */
  .header-inner { padding: 8px 16px; gap: 8px; }
  .section-nav-inner { gap: 0 14px; padding: 0 16px; scrollbar-width: none; }
  .section-nav nav { gap: 2px; }
  .section-nav a { font-size: 13px; padding: 4px 6px; }
  .section-nav-title { display: none; }

  .hero-band { padding: 44px 0 36px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cards-2, .cards-3, .cards-4, .steps, .examples { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-tiers, .repos-list { grid-template-columns: minmax(0, 1fr); }
  .repos-list { grid-auto-rows: auto; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 20px; }
  .footer-line { padding: 12px 16px 32px; }
  .bmember { grid-template-columns: minmax(0, 1fr); }
  .bgroup { padding: 12px 14px 4px; }
  /* One column on a phone: each card keeps its natural height. */
  .card-grid { grid-auto-rows: auto; }
  .quiz { padding-bottom: 48px; }
  .quiz-pick { grid-template-columns: minmax(0, 1fr) auto; }
  .quiz-pick .label { grid-column: 1; grid-row: 1; justify-self: start; }
  .quiz-pick .remove { grid-column: 2; grid-row: 1; }
  .quiz-pick-name, .quiz-pick-why { grid-column: 1 / -1; }
  .page-head { padding: 40px 0 24px; }
  .cta { padding: 28px 20px; }
  /* The bar is the last element in <body>: its own box is the bottom space that
     keeps the footer clear, and sticky pins it to the viewport until the end. */
  html.js .mobile-bar:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: 10px 16px;
    background: var(--panel);
    border-top: 1px solid var(--accent);
  }
  .mb-count { color: var(--text); font-size: 13px; flex: 1; min-width: 0; }
  .mb-jump { font-size: 13px; white-space: nowrap; }
}

@media (max-width: 960px) {
  .split, .split-narrow, .usecase, .pipelines { grid-template-columns: minmax(0, 1fr); }
  .usecase-side { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .home-hero h1 { font-size: 40px; }
  .track-card { padding: 22px; }
  .usecase-main, .usecase-side { padding: 22px; }
  .surface { grid-template-columns: minmax(0, 1fr); }
  .calc { padding: 20px; }
  .cta { padding: 36px 20px; }
  .install-line { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* A policy page prints like a document: no navigation, actions or fixed
   chrome, and dark-on-light ink instead of the dusk screen palette. */
@media print {
  body > header, .section-nav, .skip-link, footer, .nav-toggle,
  .mobile-bar, .side-buttons, .filters, .breadcrumb, button.copy,
  button.download, .sel-item .remove, .tabs, .docs-tab-list, .docs-toc, .docs-search {
    display: none;
  }
  .docs-tab-panel[hidden], .docs-tab-heading[hidden] { display: block; }
  * { color: #000 !important; background: none !important; box-shadow: none !important; clip-path: none !important; }
  a { text-decoration: underline; }
  .card, .example, .side-card, .stat, .step, .demo, .cta, .fact,
  pre, .row, .bmember, .sel-item, .fields th, .fields td, table.fields,
  .label, .chip, .chip-static, code {
    border: 1px solid #000;
  }
  pre { border: 1px solid #000; white-space: pre-wrap; }
  main, .policy-grid, .builder-grid, .hero, .examples, .steps, .stats,
  .cards-2, .cards-3, .cards-4, .cards-presets, .section-nav-inner {
    max-width: none;
    display: block;
    padding: 0;
  }
  .policy-side, .selection, .selection .sel-list {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* BV-S1b: per-agent labels, install steps, the agents page and the status badge */

.bgroup-note { color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.selection .outputs { margin-bottom: 16px; }
.label-ungraded { border: 1px dashed var(--dash); color: var(--muted); }
.status-badge { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-fg); }
.by-agent .agent-labels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.agent-label {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.agent-label-name { color: var(--text); font-weight: 600; }
.agent-label-grade { color: var(--body); font-size: 14px; }
.install-agent { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.install-agent h3 { display: flex; align-items: center; gap: 10px; }
.client-repo { color: var(--muted); font-size: 13px; }
.surface-name .client-state, .agent-label-name .client-state { margin-left: 6px; }

@media (max-width: 760px) {
  .agent-label { grid-template-columns: minmax(0, 1fr); }
}

/* docs section (DOC-1): left nav, one article per topic */

.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-bottom: 64px; }
.docs-nav { position: sticky; top: var(--sticky-top); align-self: start; max-height: calc(100vh - var(--sticky-top)); overflow-y: auto; padding: 56px 0 24px; }
.docs-nav-group { margin: 0 0 6px; color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.docs-nav ul { list-style: none; margin: 0 0 22px; padding: 0; }
.docs-nav li a { display: block; padding: 5px 10px; border-left: 2px solid var(--line); color: var(--body); text-decoration: none; font-size: 15px; }
.docs-nav li a:hover { color: var(--text); border-left-color: var(--line-2); }
.docs-nav li a[aria-current="page"] { color: var(--text); background: var(--pill); border-left-color: var(--accent); border-radius: 0 8px 8px 0; font-weight: 600; }
/* Docs search (search.js): a combobox whose results list sits in the nav's flow. */
.docs-search { margin: 0 0 22px; }
.docs-search-fallback { margin: 0; font-size: 14px; }
.docs-search-label { display: block; margin: 0 0 6px; color: var(--muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.docs-search-input { width: 100%; font-family: var(--sans); font-size: 15px; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 12px; }
.docs-search-input::placeholder { color: var(--muted); opacity: 1; }
.docs-nav .docs-search-list { margin: 6px 0 0; padding: 4px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 4px; }
.docs-nav .docs-search-list[hidden] { display: none; }
.docs-search-option { display: block; padding: 8px 10px; border-radius: 4px; border-left: 2px solid transparent; cursor: pointer; }
.docs-search-option:hover { background: var(--panel-2); }
.docs-search-option[aria-selected="true"] { background: var(--bg-2); border-left-color: var(--accent); }
.docs-search-title { display: block; color: var(--text); font-weight: 600; font-size: 14px; }
.docs-search-where { display: block; color: var(--accent); font-size: 13px; }
.docs-search-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--body); font-size: 13px; line-height: 1.45; }
.docs-main { min-width: 0; max-width: 820px; }
.docs-head { padding-bottom: 12px; }
.docs-crumb { margin: 0; color: var(--muted); font-size: 13px; }
.page-actions { margin: 8px 0 0; font-size: 13px; }
.page-actions-fallback[hidden], .page-actions-split[hidden], .page-actions-menu[hidden] { display: none; }
.page-actions-split { position: relative; display: inline-flex; }
.page-actions-split button.page-actions-copy { border-radius: 8px 0 0 8px; }
.page-actions-split button.page-actions-toggle { border-radius: 0 8px 8px 0; border-left: 0; }
.page-actions-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 230px; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line-2); border-radius: 4px; }
.page-actions-item { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 4px; background: none; color: var(--body); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.page-actions-item:hover, .page-actions-item:focus-visible { background: var(--panel-2); color: var(--text); }
.docs-intro { color: var(--body); font-size: 17px; margin: 0 0 8px; }
.docs-section, .docs-prose { padding-top: 40px; }
.docs-section h2, .docs-prose h2 { margin: 40px 0 12px; }
.docs-section > h2:first-child, .docs-from + h2 { margin-top: 0; }
.docs-section h3, .docs-prose h3 { margin: 28px 0 10px; color: var(--text); }
.docs-from { margin: 0 0 8px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.docs-list { padding-left: 22px; }
.docs-list li { margin-bottom: var(--flow-tight); overflow-wrap: anywhere; }
.docs-prose blockquote { margin: var(--flow) 0; padding: 4px 18px; border-left: 3px solid var(--line-2); background: var(--panel); border-radius: 0 12px 12px 0; }
.docs-quote { margin: var(--flow) 0; padding: 4px 18px; border-left: 3px solid var(--line-2); background: var(--panel); border-radius: 0 12px 12px 0; }
.docs-stale { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-fg); font-weight: 600; }
.docs-prose li { margin-bottom: var(--flow-tight); }
.docs-table { width: 100%; border-collapse: collapse; font-size: 15px; }
/* Table words never break mid-word: a table too wide for the column scrolls inside its .table-wrap. */
.docs-table th, .docs-table td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: normal; }
.docs-table code { white-space: nowrap; }
.docs-table thead th { border-top: 0; background: var(--panel-2); color: var(--text); font-weight: 600; }
.docs-table tbody th { color: var(--text); font-weight: 500; }
.docs-table .align-right { text-align: right; }
.docs-table .align-center { text-align: center; }
.docs-facts { display: grid; gap: 8px; margin: var(--flow) 0; }
.docs-facts div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.docs-facts dt { color: var(--muted); }
.docs-facts dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.docs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.docs-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; color: var(--body); text-decoration: none; }
.docs-card:hover { border-color: var(--accent); }
.docs-card-title { color: var(--text); font-weight: 600; }
.docs-state { display: inline-block; padding: 1px 10px; border-radius: 4px; font-family: var(--mono); font-size: 13px; border: 1px solid var(--line-2); }
.docs-state-witnessed { color: var(--ok); }
.docs-state-untested { color: var(--warn-fg); background: var(--warn-bg); }
.docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); }
.docs-pager-link { color: var(--text); text-decoration: none; }
.docs-pager-link:hover { color: var(--accent); }
.docs-pager-next { margin-left: auto; text-align: right; }
.docs-pager-link .mono { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; }
.docs-built { margin-top: 32px; color: var(--muted); font-size: 13px; }

/* "On this page": a third column on wide screens, a closed box above the page on narrow ones. */
.docs-layout:has(> .docs-toc) { grid-template-columns: 200px minmax(0, 1fr) 190px; gap: 40px; }
.docs-layout > .docs-nav { grid-column: 1; grid-row: 1; }
.docs-layout > .docs-main { grid-column: 2; grid-row: 1; }
.docs-toc { grid-column: 3; grid-row: 1; position: sticky; top: var(--sticky-top); align-self: start; max-height: calc(100vh - var(--sticky-top)); overflow-y: auto; padding: 56px 0 24px; font-size: 14px; }
.docs-toc-title { margin: 0 0 8px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc a { display: block; padding: 4px 10px; border-left: 2px solid var(--line); color: var(--body); text-decoration: none; overflow-wrap: anywhere; }
.docs-toc .docs-toc-h3 a { padding-left: 22px; font-size: 13px; }
.docs-toc a:hover { color: var(--text); border-left-color: var(--line-2); }
.docs-toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }

/* Tabs (docs.js adds the tab list; without it the panels stay stacked under their h3). */
.docs-tabs { margin-top: 28px; }
.docs-tab-list { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.docs-tab { margin-bottom: -1px; padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--body); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.docs-tab:hover { color: var(--text); }
.docs-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.docs-tab-heading { margin: 28px 0 10px; color: var(--text); }
.docs-tabs-on .docs-tab-panel { padding-top: var(--flow); }
.docs-tab-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Code blocks get a Copy button from docs.js. The wrapper draws the box and keeps a
   gutter for the button, so the code scrolls inside its own area and never under it. */
.code-block { position: relative; padding-right: 72px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; }
main .code-block > pre { margin: 0; background: none; border: 0; border-radius: 0; }
.code-copy { position: absolute; top: 9px; right: 9px; }

/* Callouts: `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]` in engine docs, and evidence notices. */
.callout { --callout: var(--info); padding: 12px 16px; background: color-mix(in srgb, var(--callout) 10%, var(--panel)); border: 1px solid var(--line); border-left: 4px solid var(--callout); border-radius: 4px; color: var(--body); }
.callout-tip { --callout: var(--ok); }
.callout-warning { --callout: var(--warn-text); }
.callout > * { margin: 0; }
.callout > * + * { margin-top: var(--flow-tight); }
.callout-title { color: var(--text); font-weight: 600; }

@media (max-width: 1180px) {
  .docs-layout:has(> .docs-toc) { grid-template-columns: 220px minmax(0, 1fr); gap: 0 48px; }
  .docs-layout > .docs-nav { grid-row: 1 / span 2; }
  .docs-toc { grid-column: 2; position: static; max-height: none; padding: 32px 0 0; }
  .docs-layout:has(> .docs-toc) > .docs-main { grid-row: 2; }
  .docs-toc-box { padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
  .docs-toc-box:not([open]) .docs-toc-title { margin: 0; }
}

@media (max-width: 960px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-nav { position: static; max-height: none; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
  .docs-nav-group, .docs-search { flex-basis: 100%; }
  .docs-nav .docs-search-list { display: block; }
  .docs-nav li a { border-left: 0; border-bottom: 2px solid var(--line); }
  .docs-nav li a[aria-current="page"] { border-bottom-color: var(--accent); border-radius: 8px 8px 0 0; }
  .docs-layout:has(> .docs-toc) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .docs-layout > .docs-nav, .docs-layout > .docs-toc, .docs-layout > .docs-main, .docs-layout:has(> .docs-toc) > .docs-main { grid-column: 1; grid-row: auto; }
  .docs-toc { padding-top: 16px; }
}

@media (max-width: 760px) {
  .docs-cards { grid-template-columns: minmax(0, 1fr); }
  .docs-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* SITE-TOC: "On this page" beside a single-column page (FAQ), reusing the docs list
   (.docs-toc, docs.js). The text keeps its measure; the list fills the empty right side
   on wide screens and is left out at 1,180 px and below, where there is no room for it. */
.toc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 48px; }
.toc-layout > .toc-main { grid-column: 1; grid-row: 1; min-width: 0; }
.toc-layout > .docs-toc { grid-column: 2; grid-row: 1; padding-bottom: 48px; }
.toc-main :is(h2, h3)[id] { scroll-margin-top: calc(var(--sticky-top) + 16px); }

@media (max-width: 1180px) {
  .toc-layout { display: block; }
  .toc-layout > .docs-toc { display: none; }
}

/* Header nav without JavaScript (SITE-NAV): there is no menu button, so the
   links wrap onto as many rows as they need instead of widening the page,
   and the taller header scrolls away rather than staying stuck on screen. */
@media (max-width: 760px) {
  html:not(.js) body > header { position: static; }
  html:not(.js) #nav-links { flex-wrap: wrap; gap: 6px 18px; }
}

/* Mid widths: the header's nav, button and wordmark in the heavier E10 type need tighter gaps to fit 1024px. */
@media (min-width: 761px) and (max-width: 1100px) {
  .header-inner { gap: 14px; }
  #nav-links { gap: 2px; }
  #nav-links a { font-size: 14px; padding: 4px 7px; }
  .header-inner .button-small { padding: 0 14px; }
}

/* Small phones: the header row (wordmark, button, menu) still fits on one line. */
@media (max-width: 380px) {
  .header-inner { gap: 6px; }
  .header-inner .button-small { padding: 0 10px; font-size: 13px; }
}

/* CC-4: chock's Claude Code plugin option under an agent's steps. */
.claude-plugin { margin-top: var(--flow); border-left: 2px solid var(--line); padding-left: 12px; font-size: 13px; color: var(--body); }
.claude-plugin > :not(pre, .code-block) { margin: 0; }
.claude-plugin > * + :not(pre, .code-block) { margin-top: var(--flow-tight); }
.claude-route strong, .claude-warning strong { color: var(--text); font-weight: 600; }

/* E10 components */

/* The wedge: a right triangle that marks the wordmark, point lists and agent names. The
   gradient is one shared <svg> of <defs> at the top of <body> (id wedge-grad), filled by reference. */
.wedge { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; }
.wedge-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wedge-stop-a { stop-color: var(--accent); }
.wedge-stop-b { stop-color: var(--accent-2); }

/* Cards and numerals cut their bottom-left corner. clip-path also clips a border, so the
   edge is an inset 1px shadow in --edge (hover and state rules set --edge, not border-color). */
.card, .step, .stat, .fact, .example, .side-card, .docs-card, .track-card, .pipeline, .cta {
  --edge: var(--line);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--edge);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}

.card { padding: 26px 28px; }
.card:hover, .docs-card:hover { --edge: var(--line-2); }
.card:is(a):focus-visible, .docs-card:focus-visible { outline-offset: -4px; }
.track-card-available { --edge: var(--accent); }
.track-card-in-design { --edge: var(--dash); }
.example-refused { --edge: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.example-allowed { --edge: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.stat-block { --edge: color-mix(in srgb, var(--accent) 55%, var(--panel)); }
.pipeline-chock { --edge: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  .card-hover:hover { --edge: var(--line-2); }
}

/* Glass: anything that holds data. Without backdrop-filter the panel is opaque. */
.glass, .demo {
  background: var(--glass-fill);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.table-wrap { border: 0; box-shadow: inset 0 0 0 1px var(--glass-edge); background: var(--glass-fill); }

@supports not (backdrop-filter: blur(1px)) {
  .glass, .demo, .table-wrap { background: var(--panel); }
}

/* Note boxes (a warning, the friction note, an error list) are a tint of the amber fill over
   the panel, so a large box does not glare; the amber chips and badges keep the full fill. */
.report-security, .notes .note-card, .link-notice .note-card, .noscript-note, .author-errors, .friction-note, .callout-warning {
  background: color-mix(in srgb, var(--warn-bg) 16%, var(--panel));
  border-color: color-mix(in srgb, var(--warn-text) 55%, var(--line));
  color: var(--body);
}

/* E10 home page (RD-E10-2) */

.home { margin-bottom: -56px; }
.home .section { padding: 96px 0; border-top: 0; }
.home .section-intro { font-size: 19px; max-width: 760px; }
.home .lede { font-size: 19px; line-height: 1.5; }

/* The headline's accent words, and the stat numbers, take the headline gradient. */
.accent, .track-stats dd {
  background: linear-gradient(90deg, var(--highlight-text), var(--highlight-text-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .accent, .track-stats dd { background: none; color: var(--highlight-text); }
}

/* hero: a full-bleed band on the hero gradient, the wedge and wheel behind two columns */
.home .hero-band {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 586px);
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  min-height: 980px;
  padding: 56px 0 64px;
  background: none;
}

.hero-art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(160deg, #122A4F 0%, #0B1B33 50%, #081326 100%);
}

.hero-wedge { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art-inner { position: relative; max-width: 1152px; height: 100%; margin: 0 auto; }
.hero-wheel { position: absolute; right: 120px; top: 150px; width: 420px; height: 420px; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.45)); }

.home .hero-text { display: flex; flex-direction: column; gap: 28px; align-self: start; }
.home .hero-text > * { margin: 0; }
.home .home-hero h1 { font-size: 72px; line-height: 0.95; letter-spacing: -0.04em; }
.home .hero-sub { font-size: 19px; line-height: 1.45; max-width: 40ch; }
.home .install-line { max-width: 520px; padding: 10px 12px 10px 16px; border-radius: 0; }
.home .ticks { gap: 6px 22px; }
.home .demo { align-self: end; justify-self: end; width: 100%; max-width: 586px; border-radius: 14px 0 0 0; }

.home .demo-head { padding: 22px 26px 10px; background: none; border: 0; }
.home .demo-dots { display: none; }
.home .demo-tool { color: var(--text); font-size: 14px; font-weight: 700; }
.home .demo-tabs { padding: 0 26px 14px; gap: 6px; border: 0; }
.home .demo-case { padding: 4px 26px 0; border: 0; }
.home .demo-body { font-size: 14px; line-height: 1.65; margin: 0; }
.home .demo-refusal {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  margin: 6px -26px;
  padding: 10px 26px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
}
.home .demo-refusal .demo-mark { width: 14px; height: 14px; margin-top: 5px; font-size: 0; background: var(--on-accent); clip-path: polygon(0 100%, 100% 100%, 100% 0); }
.home .demo-link { margin: 12px 0 14px; }
.home .demo-foot { padding: 12px 26px 18px; border-top: 1px solid var(--glass-edge); }

/* tab chips: the demo's and the use cases' */
.tab-button {
  font: 400 12.5px var(--mono);
  color: var(--body);
  background: var(--panel-2);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 7px 12px;
  min-height: 34px;
  margin: 0;
}

.tab-button:hover { color: var(--text); }

.tab-button[aria-selected="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: none;
  color: var(--on-accent);
  font-weight: 700;
  margin-bottom: 0;
}

.usecases-tabbed .tab-button { font: 600 15px var(--sans); background: var(--panel-2); color: var(--body); border: 0; min-height: 44px; padding: 10px 16px; }
.usecases-tabbed .tab-button[aria-selected="true"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); border: 0; }

/* works with */
.works { padding: 28px 0 32px; }
.works-label { color: var(--highlight-text); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.works-item { font-size: 18px; font-weight: 800; color: var(--text); }
.works-how { color: var(--muted); font-size: 11px; font-weight: 400; }
.works-how.state-witnessed { color: var(--ok); }

/* three places */
.home .track-card { gap: 14px; padding: 28px; background: var(--panel); }
.home .track-card-in-design { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 10px, transparent 10px 20px), var(--panel); }
.home .track-card h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.home .track-stats { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 18px; }
.home .track-stats dd { font-size: 40px; font-weight: 800; line-height: 1.1; }
.home .track-actions { flex-direction: column; align-items: flex-start; }

/* how it works: a chamfered numeral beside each title */
.home .steps { gap: 16px; }
.home .step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 26px 28px; }
.home .step-num {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font: 800 18px var(--sans);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.home .step h3 { grid-column: 2; display: flex; align-items: center; min-height: 40px; margin: 0 0 8px; }
.home .step p, .home .step .step-code { grid-column: 2; font-size: 16px; }
.how-steps + .step-note { margin: 20px 0 0; color: var(--muted); font-size: 15px; }

/* one policy, every agent */
.home .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.surfaces.glass { gap: 0; padding: 6px 26px; }
.home .surface {
  grid-template-columns: 130px 96px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: start;
  padding: 16px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.home .surface:first-child { border-top: 0; }
.home .surface-name { font-size: 18px; font-weight: 800; }
.home .surface-label { font-size: 15px; }
.home .surface .client-state { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.home .surface .state-witnessed { color: var(--ok); }

/* use cases */
.home .usecase { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin: 0; border: 0; border-radius: 0; overflow: visible; }
.home .usecase-main { padding: 32px 36px; }
.home .usecase-main h3 { font-size: 30px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }
.usecase-kicker { color: var(--highlight-text); letter-spacing: 0.14em; }
.usecase-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.usecase-points li { display: flex; align-items: center; gap: 12px; color: var(--text); }
.home .usecase-side { padding: 32px 36px; background: none; border-left: 1px solid var(--line); }
.usecase-panel-title { color: var(--highlight-text); letter-spacing: 0.14em; text-transform: uppercase; }
.home .usecase-policy { padding: 10px 12px; background: var(--bg-2); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }
.usecase-side p:last-child { margin: 8px 0 0; }

/* plain labels */
.home .label-card h3 { font-size: 21px; }
.home .friction-note {
  border: 0;
  border-radius: 0;
  background: var(--glass-fill);
  color: var(--body);
  box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px var(--glass-edge), var(--glass-shadow);
  padding: 22px 28px;
}
.home .friction-note a { color: var(--highlight-text); }

/* no model, your code stays put: one band, two cards */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.duo-card { padding: 36px 40px; }
.duo-card h2 { margin: 12px 0 14px; font-size: 34px; }
.duo-card .caveat { margin: 16px 0 0; padding: 0; border: 0; color: var(--muted); font-size: 15px; }

/* shift left */
.home .pipelines { gap: 24px; margin: 40px 0 24px; }
.home .pipeline { padding: 26px 28px; }
.home .pipeline-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 36px; margin: 0 0 14px; }
.home .pipeline-steps li { position: relative; display: block; padding: 7px 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 13.5px var(--mono); color: var(--text); }
.home .pipeline-steps li::before { content: none; }
.home .pipeline-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -26px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.home .pipeline-chock .pipeline-steps li:nth-child(2), .home .pipeline-chock .pipeline-steps li:nth-child(3) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: none; color: var(--on-accent); font-weight: 700; }
.home .calc { padding: 28px 32px; border: 0; border-radius: 0; }
.home .calc-out div { background: var(--panel-2); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }
.home .calc-out dd { font-size: 30px; }
.home .calc-formula { list-style: none; padding: 0; color: var(--muted); }

/* incidents */
.incidents thead th { font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.incident-policies a { font-family: var(--mono); font-size: 13px; }
.home .section-note, .home .honesty { color: var(--muted); font-weight: 400; font-size: 15px; }

/* presets */
.home .cards-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home .preset-card { padding: 22px 24px; }
.home .preset-row { flex-direction: column-reverse; align-items: flex-start; gap: 6px; margin: 0 0 10px; }
.home .preset-title { font-size: 19px; font-weight: 800; line-height: 1.2; }
.home .preset-count { color: var(--muted); font-size: 12px; }
.home .preset-summary { font-size: 14px; line-height: 1.55; }

/* where chock fits */
.fit tbody th { font-size: 17px; font-weight: 800; }
.fit thead th, .fit thead td { font: 700 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fit thead .fit-chock { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--highlight-text); }

/* open source */
.open-split { align-items: center; }
.open-actions { justify-self: end; margin: 0; }

/* questions */
.faq-accordion.glass { gap: 0; max-width: 860px; margin: 36px auto 24px; }
.home .faq-details { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.home .faq-details:first-child { border-top: 0; }
.home .faq-details summary { font-weight: 800; }

/* ready in a minute */
.home .cta { position: relative; isolation: isolate; margin: 0; padding: 120px 0; background: none; text-align: center; clip-path: none; box-shadow: none; border-radius: 0; }
.home .cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -2; background: linear-gradient(160deg, #122A4F 0%, #0B1B33 50%, #081326 100%); }
.cta-wedge { position: absolute; bottom: 0; z-index: -1; height: 320px; background: linear-gradient(135deg, #0E7490, #0EA5E9 55%, #2563EB); }
.cta-wedge-right { right: calc(50% - 50vw); width: 460px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cta-wedge-left { left: calc(50% - 50vw); width: 300px; height: 200px; opacity: 0.35; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.home .cta h2 { font-size: 64px; line-height: 0.95; letter-spacing: -0.04em; }
.home .cta p { color: var(--body); font-size: 19px; }
.home .cta .button { min-height: 56px; font-size: 17px; }

/* the wheel crosses the hero text at every width up to 1039px (measured); the wedge stays */
@media (max-width: 1039px) {
  .hero-wheel { display: none; }
}

@media (max-width: 1000px) {
  .home .hero-band { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 40px 0; }
  .hero-art { opacity: 0.4; }
  .home .demo { justify-self: stretch; max-width: none; }
  .home .split, .home .usecase, .duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home .usecase { gap: 0; }
  .home .usecase-side { border-left: 0; border-top: 1px solid var(--line); }
  .cards-3, .home .cards-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-actions { justify-self: start; }
}

@media (max-width: 720px) {
  .home .section { padding: 56px 0; }
  .home .home-hero h1 { font-size: 44px; }
  .cards-3, .cards-4, .home .cards-presets { grid-template-columns: minmax(0, 1fr); }
  .home .surface { grid-template-columns: minmax(0, 1fr); }
  .home .demo-refusal { margin-inline: -18px; padding-inline: 18px; }
  .home .demo-head, .home .demo-tabs, .home .demo-case, .home .demo-foot { padding-inline: 18px; }
  .duo-card, .home .usecase-main, .home .usecase-side { padding: 24px; }
  .home .cta { padding: 72px 0; }
  .home .cta h2 { font-size: 40px; }
  .cta-wedge-right { width: 220px; height: 160px; }
  .cta-wedge-left { width: 140px; height: 100px; }
  .home .pipeline-steps { gap: 10px 30px; }
}

.home .track-card-available, .home .pipeline-chock { --edge: var(--line); }
.home .section > .section-intro-block { margin-bottom: 36px; }
.incidents tbody th { font-weight: 800; }