/* ============================================================
   Agentic Terminal, agenticterminal.io
   Design system. Institutional, document-derived, no ornament.

   Rules this stylesheet holds itself to:
   - No gradients. No box-shadows. No border-radius above 2px.
   - One text colour family (deep teal-navy ink), never pure black.
   - Display type is LIGHT (300) and large. Body is 400.
   - Structure comes from hairline rules and an asymmetric grid,
     not from cards floating on a background.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper:        #ffffff;
  --paper-off:    #f7f9fa;
  --panel:        #edf3f6;
  --panel-line:   #dbe6eb;

  /* Every text colour below clears WCAG AA (4.5:1) against every surface it
     is actually used on: white, --paper-off and --panel. Checked, not eyeballed. */
  --ink:          #0b3a4e;  /* all body text          12.1:1 on white */
  --ink-strong:   #06283a;  /* display headings              */
  --ink-muted:    #4e6e7d;  /* secondary text          5.5:1 on white */
  --ink-faint:    #547079;  /* small mono labels       5.3:1 on white, 5.0:1 on off */

  --primary:      #0e5c7a;  /* links                   7.4:1 on white */
  --primary-deep: #0b3a4e;
  --accent:       #b57620;  /* brass. RULES AND MARKS ONLY, 3.8:1, not text-safe */
  --accent-text:  #8f5a14;  /* the brass, darkened for text  5.8:1 white, 5.2:1 panel */
  --deny:         #9b2c2c;  /* denial state            7.1:1 on off */
  --ok:           #1a6b47;  /* attested / paid         6.5:1 white, 5.7:1 on its tint */
  --ok-tint:      #e8f4ec;
  --ok-line:      #bfdccc;
  --deny-tint:    #fdecec;
  --deny-line:    #f0cfcf;
  --flag-tint:    #fdf4e3;  /* row awaiting approval. ink on it 11.1:1 */
  --flag-line:    #eddcb8;

  --rule:         #d7dee2;
  --rule-soft:    #e8edf0;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell:  1240px;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --rail:   200px;   /* left spec-label column */
  --measure: 64ch;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;         /* 17px */
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--primary); text-decoration: none; }

/* ---------- layout primitives ---------- */
.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The spec grid: a narrow label rail, then the content column.
   This is the page's structural signature. It reads as a
   specification document rather than a marketing page. */
.spec {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.spec__rail { position: sticky; top: 6.5rem; }
.spec__body { min-width: 0; }

@media (max-width: 900px) {
  .spec { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .spec__rail { position: static; }
}

section { border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
section > .shell { padding-block: clamp(3.75rem, 7vw, 6.5rem); }

/* ---------- type scale ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
}
.rail-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  color: var(--accent-text);
  display: block;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.7rem;
}
.rail-label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  line-height: 1.45;
}

h1, .h1 {
  font-size: clamp(2.25rem, 4vw, 3.125rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.021em;
  color: var(--ink-strong);
  text-wrap: balance;
}
h2, .h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.016em;
  color: var(--ink-strong);
  max-width: 22ch;
}
h3, .h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.004em;
  color: var(--ink-strong);
}
.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
  max-width: 56ch;
}
p { max-width: var(--measure); }
p + p { margin-top: 1.1em; }
.dim { color: var(--ink-muted); }

/* ---------- header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  max-width: var(--shell);
  margin-inline: auto;
  padding-left: var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 2rem;
  min-height: 4.25rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink-strong);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  margin-right: auto;
}
.brand__mark { flex: none; }
.brand__name b { font-weight: 600; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.nav a {
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--ink-muted);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink-strong); border-bottom-color: var(--accent); }

/* Guidewire's move: the primary CTA is a solid block flush to the
   header's right edge, full-bleed vertically. */
.masthead__cta {
  display: flex;
  align-items: center;
  padding-inline: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--primary-deep);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.masthead__cta:hover { background: var(--primary); color: #fff; }

@media (max-width: 780px) {
  .nav { display: none; }
  .masthead__cta { font-size: 0.8125rem; }
}
/* keep the header CTA on one line rather than letting it squeeze the brand */
@media (max-width: 480px) {
  .masthead__in { gap: 0.75rem; }
  .masthead__cta { font-size: 0.75rem; padding-inline: 0.875rem; text-align: center; }
  .brand__name { font-size: 0.875rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border-radius: 1px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  transition: background-color 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}
.btn--solid { background: var(--primary-deep); color: #fff; }
.btn--solid:hover { background: var(--primary); }
.btn--ghost {
  background: transparent;
  color: var(--ink-strong);
  border-color: var(--ink-strong);
}
.btn--ghost:hover { background: var(--ink-strong); color: #fff; }
.btn--onDark { background: #fff; color: var(--primary-deep); }
.btn--onDark:hover { background: var(--panel); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* ---------- hero ---------- */
.hero > .shell {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 7vw, 6.5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* The concession is quiet; the constraint is loud. */
.hero h1 { max-width: 15ch; }
.hero h1 .concede { color: var(--ink-muted); display: block; white-space: nowrap; }
.hero h1 .constrain { color: var(--ink-strong); display: block; white-space: nowrap; }
@media (max-width: 420px) {
  .hero h1 .concede, .hero h1 .constrain { white-space: normal; }
}

.hero__deck {
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--primary);
  max-width: 30ch;
}
.hero__body { margin-top: 1.75rem; max-width: 52ch; }

/* "Not a warning. Not a log entry. No payment." is the page's
   most quotable line, given a rule and its own air. */
.enforce {
  margin-top: 1.75rem;
  padding: 0.9rem 0 0.9rem 1.25rem;
  border-left: 3px solid var(--accent);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 42ch;
}
/* "No payment." must never break across lines. It is the whole point. */
.enforce b { color: var(--ink-strong); font-weight: 600; white-space: nowrap; }
.hero .btn-row { margin-top: 2.25rem; }

/* ---------- artifact panel (hero right) ---------- */
.artifact {
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
}
.artifact__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-off);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.artifact__body { padding: 1.1rem 1rem; }
.artifact__body table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.artifact__body td { padding: 0.22rem 0; vertical-align: baseline; }
/* the field path may wrap; the value never does, and is never clipped */
.artifact__body td:first-child {
  padding-right: 1rem;
  color: var(--ink-muted);
  word-break: break-word;
}
.artifact__body td:last-child {
  width: 6.5rem;
  text-align: right;
  color: var(--ink-strong);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.k-scope { color: var(--ink-faint); }

.artifact__eval {
  border-top: 1px solid var(--rule);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--paper-off);
  font-size: 0.75rem;
}
.artifact__eval .req { color: var(--ink-muted); }
.verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--deny);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.verdict::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--deny);
  flex: none;
}
.artifact__note {
  margin-top: 0.8rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
}
.artifact__note a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.artifact__note a:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* Narrow screens: drop the (decorative) scope prefix so field names stay
   whole instead of breaking mid-token, e.g. "per_transac / tion_ceiling". */
@media (max-width: 560px) {
  .artifact { font-size: 0.75rem; }
  .k-scope { display: none; }
  .artifact__body td:last-child { width: 5.75rem; }
  .artifact__bar { font-size: 0.625rem; }
}
/* iPhone SE class. One more step down keeps field names unbroken. */
@media (max-width: 380px) {
  .artifact { font-size: 0.6875rem; }
  .artifact__body { padding-inline: 0.75rem; }
  .artifact__body td:last-child { width: 5.25rem; }
  .hero h1 { font-size: 1.875rem; }
}

/* ---------- hero console ----------
   An illustration of the approval surface, built as markup rather than an
   image so it stays sharp, selectable and checkable by the deploy gate.
   Same discipline as the page: square corners, hairline rules, no shadows. */
.console-fig { margin: 0; }
.console {
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.75rem;
  line-height: 1.45;
}
.console__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.console__org { font-size: 0.875rem; font-weight: 600; color: var(--ink-strong); }
.console__sub { color: var(--ink-muted); }
.console__id {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-align: right;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* the four standing limits */
.console__limits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem 0.75rem;
  padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-off);
}
.console__limits span { display: block; color: var(--ink-muted); font-size: 0.6875rem; }
.console__limits b {
  display: block;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-strong);
  margin-top: 0.15rem;
}

.console__panel { border-bottom: 1px solid var(--rule); }
.console__panel:last-child { border-bottom: 0; }
.panel__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
  font-weight: 600;
  color: var(--ink-strong);
}
.panel__bar em { font-style: normal; font-weight: 400; color: var(--ink-faint); }

/* ledger */
.ledger { margin: 0; }
.ledger li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger li:last-child { border-bottom: 0; }
.ledger li.is-flagged { background: var(--flag-tint); box-shadow: inset 3px 0 0 var(--accent); }
.led__id { font-family: var(--mono); font-weight: 500; color: var(--ink-strong); }
.led__why { grid-column: 1; color: var(--ink-muted); font-size: 0.6875rem; }
/* Fixed tracks, not flex packing, so badge / amount / rail / state line up as
   columns down the ledger instead of shifting with each row's content width. */
.led__right {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: 4.75rem 4.5rem 4.5rem 6.5rem;
  align-items: center;
  gap: 0.4rem;
}
.led__amt {
  font-family: var(--mono);
  text-align: right;
  font-weight: 500;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.led__rail { font-family: var(--mono); font-size: 0.625rem; color: var(--ink-faint); white-space: nowrap; }
.led__state { font-weight: 500; white-space: nowrap; text-align: right; }
.led__state.is-ok { color: var(--ok); }
.led__state.is-bad { color: var(--deny); }
.led__state.is-wait { color: var(--accent-text); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 1px;
  white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; }
.tag--ok { color: var(--ok); background: var(--ok-tint); border: 1px solid var(--ok-line); }
.tag--none { color: var(--deny); background: var(--deny-tint); border: 1px solid var(--deny-line); }

/* key/value detail */
.kv { margin: 0; padding: 0.6rem 0.9rem; }
.kv div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.2rem 0;
}
.kv dt { color: var(--ink-muted); }
.kv dd {
  margin: 0;
  text-align: right;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 0.6875rem;
  word-break: break-word;
}
.kv dd.plain { font-family: var(--sans); font-size: 0.75rem; }
.kv dd.is-ok { color: var(--ok); }
.kv dd.is-flag { color: var(--accent-text); }
.kv__sub {
  padding: 0.7rem 0.9rem 0;
  border-top: 1px solid var(--rule-soft);
  margin-top: 0.4rem;
  color: var(--ink-faint);
  font-size: 0.6875rem;
}

/* the agent's own words, marked as unverified input */
.agent-note {
  margin: 0.5rem 0.9rem;
  padding: 0.55rem 0.7rem;
  background: var(--paper-off);
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
}
.agent-note span {
  display: block;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.2rem;
}
.agent-note q { font-family: var(--mono); font-size: 0.6875rem; }

.console__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}
.cbtn {
  padding: 0.4rem 0.7rem;
  border-radius: 1px;
  font-size: 0.6875rem;
  font-weight: 500;
  border: 1px solid var(--rule);
  color: var(--ink-strong);
  background: var(--paper);
}
.cbtn--primary { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
/* export affordance, decorative */
.cbtn--icon {
  width: 1.6rem; height: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 50%;
  color: var(--ink-muted); font-size: 0.75rem; margin-left: 0.35rem;
}
.console__sig { margin-left: auto; color: var(--ink-muted); font-size: 0.6875rem; }

.console-fig figcaption {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 52ch;
}
.console-fig figcaption a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.console-fig figcaption a:hover { color: var(--primary); text-decoration-color: var(--primary); }

@media (max-width: 620px) {
  .console__limits { grid-template-columns: repeat(2, 1fr); }
  .console__head { flex-direction: column; gap: 0.4rem; }
  .console__id { text-align: left; white-space: normal; word-break: break-all; }
  .led__right { grid-template-columns: 4.25rem 4rem 5.5rem; }
  .led__rail { display: none; }
  .console { font-size: 0.6875rem; }
  .led__right { flex-wrap: wrap; justify-content: flex-start; }
}

/* ---------- capability rows (§3) ---------- */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--rule-soft);
}
.row__n {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-faint);
  padding-top: 0.28rem;
}
.row h3 { margin-bottom: 0.5rem; }
.row p { color: var(--ink-muted); }
/* A claim's qualifier sits with the claim, not two sections away. */
.qualifier {
  margin-top: 0.75rem;
  padding-left: 0.875rem;
  border-left: 2px solid var(--rule);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 56ch;
}
/* #8fb4c4 on #0b3a4e = 5.5:1, AA at this size */
.qualifier--onDark { border-left-color: #1d566e; color: #8fb4c4; margin-top: 1.25rem; }
.row__fields {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}
.field {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-muted);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* ---------- §4 inverted band: the two protected claims ---------- */
.claims {
  background: var(--primary-deep);
  color: #d3e3ea;
  border-top: none;
}
.claims .eyebrow { color: #6f9cb0; }
.claims .rail-num { color: #d29b45; border-bottom-color: #1d566e; }
.claims .rail-label { color: #8fb4c4; }
.claims h2 { color: #fff; max-width: 20ch; }
.claims p { color: #b7d0da; }
.claims strong { color: #fff; font-weight: 500; }
.claim + .claim { margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: clamp(2.75rem, 5vw, 4rem); border-top: 1px solid #1d566e; }
.claim h2 + p { margin-top: 1.5rem; }
.claim__contrast {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid #1d566e;
  color: #8fb4c4;
  font-size: 0.9375rem;
}

/* ---------- §5 who it is for ---------- */
.segments {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
}
.segments li {
  display: flex;
  align-items: baseline;
  padding: 0.9rem 2rem 0.9rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  color: var(--ink);
}
.segments li span {
  flex: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  margin-right: 0.7rem;
}
/* NB: must stay a normal flow paragraph. Making this a grid turns each
   inline <b> into a grid item and orphans the commas onto their own lines. */
.parties {
  margin-top: 1.5rem;
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  max-width: 58ch;
}
.parties b { color: var(--ink-strong); font-weight: 600; }

/* the statutory fact, set as a record rather than a marketing stat */
.stat {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
}
.stat__n {
  font-size: clamp(3.25rem, 7vw, 5rem);
  font-weight: 200;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.stat__n small { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--mono); margin-top: 0.6rem; }
.stat p { font-size: 1rem; color: var(--ink-muted); max-width: 48ch; }
.stat p b { color: var(--ink-strong); font-weight: 600; }
@media (max-width: 640px) { .stat { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }

/* ---------- §6 artifact manifest ---------- */
.manifest { margin-top: 2.25rem; border-top: 1px solid var(--ink-strong); }
.manifest__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 2rem;
  align-items: baseline;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.manifest__row:hover { background: var(--paper-off); }
.manifest__t { font-size: 1rem; font-weight: 600; color: var(--ink-strong); }
.manifest__d { grid-column: 1; font-size: 0.9375rem; color: var(--ink-muted); margin-top: 0.25rem; max-width: 58ch; }
.manifest__d code { font-family: var(--mono); font-size: 0.8125rem; white-space: nowrap; }
/* the URL is visible on the page. an engineer reads it, not a label. */
.manifest__u {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--primary);
  word-break: break-all;
  text-decoration: underline;
  text-decoration-color: var(--panel-line);
  text-underline-offset: 3px;
}
.manifest__u:hover { text-decoration-color: var(--primary); }
/* An honestly-named gap. Reads as deliberate, not as a broken link:
   no URL line, and the meta label carries the state. */
.manifest__row--pending { background: var(--paper-off); padding-inline: 1rem; margin-inline: -1rem; }
.manifest__row--pending .manifest__t { color: var(--ink-muted); }
.manifest__row--pending .manifest__meta {
  color: var(--accent-text);
  border: 1px solid var(--panel-line);
  padding: 0.15rem 0.45rem;
  background: var(--paper);
}
.manifest__meta {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- §7 status notice ---------- */
.status__note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--paper-off);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.status__note .eyebrow { margin-bottom: 1rem; }
.status__note p { max-width: 68ch; }
.status__note b { color: var(--ink-strong); font-weight: 600; }

/* ---------- §8 contact ---------- */
.contact { background: var(--panel); border-top: 1px solid var(--panel-line); }
.contact .question {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--ink-strong);
  max-width: 44ch;
}
.contact .question em { font-style: italic; }
/* ---------- pilot enquiry form ----------
   Same discipline as the rest of the page: square corners, hairline borders,
   no shadows, label above field. Inputs sit on white so they read as fields
   against the panel-tinted section rather than as floating cards. */
.pilot-form {
  margin-top: 2.5rem;
  max-width: 34rem;
  border-top: 1px solid var(--panel-line);
  padding-top: 2rem;
}
.field-group { margin-bottom: 1.25rem; }
.field-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-strong);
  margin-bottom: 0.4rem;
}
.pilot-form input[type="text"],
.pilot-form input[type="email"],
.pilot-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 1px;
  padding: 0.7rem 0.8rem;
  transition: border-color 0.12s linear;
}
.pilot-form textarea { resize: vertical; min-height: 6.5rem; }
.pilot-form input::placeholder,
.pilot-form textarea::placeholder { color: var(--ink-faint); }
.pilot-form input:hover,
.pilot-form textarea:hover { border-color: var(--ink-faint); }
.pilot-form input:focus,
.pilot-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}
/* two fields side by side above the narrow breakpoint */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.pilot-form button { margin-top: 0.5rem; cursor: pointer; font-family: var(--sans); }
.form-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); background: var(--paper); }
.foot__in {
  padding-block: 2.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.foot a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.foot a:hover { color: var(--primary); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--mono); font-size: 0.8125rem; }

/* ---------- a11y ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink-strong); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- section summary ----------
   One sentence under each heading, so a scanner gets the argument without
   reading the body. Sits between the display heading and the body copy and
   must not compete with either: same size as body, muted, rule above nothing. */
.summary {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 54ch;
}
.claims .summary { color: #8fb4c4; }

/* A conclusion the section has earned, set apart from the flow. Same brass
   left rule as .enforce and .parties, one register quieter. */
.pull {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-size: 1.0625rem;
  color: var(--ink-strong);
  max-width: 52ch;
}

/* the second line of a capability row: the technical consequence, demoted */
.row__detail { font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- hero additions ---------- */
/* The audience, named above the fold. It was 60% of the way down the page,
   which is late for the single strongest qualifying line we have. */
.hero__audience {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 50ch;
}
/* the demoted verify link: labelled for the reader it is actually for */
.cta-second { margin-top: 1.5rem; font-size: 0.9375rem; max-width: 46ch; }
.cta-second__label {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}
.cta-second a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--panel-line);
  text-underline-offset: 3px;
}
.cta-second a:hover { text-decoration-color: var(--primary); }

/* ---------- contents ----------
   A specification's table of contents, not a progress rail. Reuses the
   section numbers the spec rail already carries so the page does not grow a
   second navigation idiom. */
.contents { background: var(--paper-off); }
.contents > .shell { padding-block: 2rem; }
.contents .eyebrow { margin-bottom: 1rem; }
.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2.5rem;
  border-top: 1px solid var(--rule);
}
.contents li { border-bottom: 1px solid var(--rule-soft); }
.contents a {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  font-size: 0.9375rem;
  color: var(--ink);
}
.contents a:hover { color: var(--primary); }
.contents b {
  flex: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--accent-text);
}

/* ---------- the keystone ----------
   One claim, lifted out of the numbered list because it is the only one no
   competitor can make and it was sitting at the same weight as a feature row.

   NOT INVERTED, ON PURPOSE. Section 04 is the only inverted band on this page
   and it carries the two protected claims. A second dark band directly above it
   competes with the thing this block exists to set up. So: the strongest
   treatment available that is not the inverted band. Panel ground, a brass rule
   heavy enough to read as structural, and a display-weight lede at a size no
   body copy on the page uses.

   This is one bold moment. If a second .keystone ever appears, the pattern has
   become a component and the emphasis is gone. */
.keystone {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--panel);
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--panel-line);
  border-right: 1px solid var(--panel-line);
  border-bottom: 1px solid var(--panel-line);
}
.keystone__head {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 1.1rem;
  max-width: none;
}
.keystone__lede {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.36;
  letter-spacing: -0.012em;
  color: var(--ink-strong);
  max-width: 46ch;
}
.keystone__sub {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 58ch;
}
/* the qualifier is part of the block, not an afterthought pinned under it */
.keystone__q {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  padding-left: 0;
  border-left: 0;
  border-top: 1px solid var(--panel-line);
  max-width: 62ch;
}

/* The gate. Same block, one register quieter than the keystone in section 03,
   because two identical bold moments cancel rather than compound. Paper ground
   instead of panel, so the section 03 keystone stays the loudest thing after the
   hero and this reads as the frame it fills in. */
.keystone--gate { background: var(--paper-off); }

/* the litigation evidence: a record, set quieter than the argument it supports */
.evidence {
  margin-top: 1.5rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* ---------- document tables ----------
   Hairline rules and a ruled header, like a schedule in a contract. No zebra
   striping, no rounded corners, no card. Wide tables scroll inside their own
   container so the page body never scrolls sideways. */
.ctable {
  width: 100%;
  margin-top: 2.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: left;
}
.ctable caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.7rem;
}
.ctable thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-strong);
  border-bottom: 1px solid var(--ink-strong);
  padding: 0 0.9rem 0.6rem 0;
  vertical-align: bottom;
}
.ctable tbody th,
.ctable tbody td {
  padding: 0.85rem 0.9rem 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  line-height: 1.5;
}
.ctable tbody th {
  font-weight: 500;
  color: var(--ink-strong);
  padding-right: 1.5rem;
}
.ctable tbody td { color: var(--ink-muted); }
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
/* the "after" column is the argument, so it carries the ink */
.ctable--ba tbody td:last-child { color: var(--ink); }
.ctable--map td .field { margin-right: 0.35rem; }
.ctable--status { table-layout: fixed; }
.ctable--status td { color: var(--ink); }
.ctable--status thead th:first-child { color: var(--ok); }
.ctable--status thead th + th { color: var(--accent-text); }
.ctable--status thead th + th + th { color: var(--ink-muted); }
.ctable-scroll { overflow-x: auto; }
@media (max-width: 640px) {
  .ctable, .ctable thead, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; }
  .ctable thead { display: none; }
  .ctable tbody tr { border-bottom: 1px solid var(--rule); padding-block: 0.6rem; }
  .ctable tbody th, .ctable tbody td { border-bottom: 0; padding: 0.2rem 0; }
  .ctable tbody th { padding-top: 0.6rem; }
  /* without the header row the columns need their own labels */
  .ctable--ba tbody td::before,
  .ctable--status tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
}

/* ---------- the statutory record ---------- */
.statute { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.statute .stat { margin-top: 0; }
.statute__q {
  margin: 2rem 0 0;
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-left: 3px solid var(--accent);
  background: var(--paper-off);
}
.statute__q p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-strong);
  max-width: 56ch;
  quotes: "\201C" "\201D";
}
.statute__q p::before { content: open-quote; }
.statute__q p::after  { content: close-quote; }
.statute__q cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 60ch;
}
.statute__q cite a { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.statute__q cite a:hover { color: var(--primary); text-decoration-color: var(--primary); }
.statute__note { margin-top: 1.5rem; color: var(--ink-muted); }
.nowrap { white-space: nowrap; }

/* ---------- enterprise questions ---------- */
.qa { margin: 2.5rem 0 0; border-top: 1px solid var(--ink-strong); }
.qa dt {
  padding-top: 1.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink-strong);
  max-width: 46ch;
}
.qa dd {
  margin: 0.6rem 0 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-muted);
  max-width: var(--measure);
}
.qa dd:last-of-type { border-bottom: 1px solid var(--rule); }
/* a multi-part answer: each part gets its own line without becoming a list */
.qa__block { display: block; margin-top: 0.8rem; }

/* ---------- glossary ---------- */
.glossary { margin: 2.5rem 0 0; border-top: 1px solid var(--rule); }
.glossary dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-text);
  padding-top: 1.25rem;
}
.glossary dd {
  margin: 0.4rem 0 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-muted);
  max-width: 60ch;
}

/* ---------- where we sit ---------- */
.touches {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2.5rem;
  border-top: 1px solid var(--rule);
}
.touches > div { padding-block: 1.5rem; border-bottom: 1px solid var(--rule-soft); }
.touches h3 { margin-bottom: 0.5rem; }
.touches p { font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- contact additions ---------- */
.starter {
  margin-top: 1.75rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--panel-line);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: 52ch;
}

/* ---------- ledger, the squeezed band ----------
   Between the hero's stacking breakpoint and about 1180px the console is narrow
   while still sitting beside the headline, and the ledger's fixed right-hand
   tracks (20.25rem plus gaps) leave the claim column around 90px, which wraps
   "adjudicate-01 decided, disburse-01 paid" onto four lines and breaks the
   identifier mid-token. Measured at 1001px before this rule. Tighten the tracks
   across that band only; the rail column stays, because the rail mix is the
   point of the illustration. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .console { font-size: 0.6875rem; }
  .console__id { font-size: 0.625rem; }
  .led__right { grid-template-columns: 4.1rem 3.9rem 3.9rem 5.5rem; gap: 0.3rem; }
  .console__limits { gap: 0.4rem 0.5rem; }
}

/* ---------- print ----------
   A sticky header prints on top of body text and eats a line on every page
   break. Unstick everything, drop the page chrome, and print link targets
   so a PDF of this page is still checkable. */
@media print {
  .masthead, .staging, .skip { display: none !important; }
  .spec__rail { position: static !important; }
  html, body { background: #fff; color: #000; font-size: 11pt; }
  section, section > .shell { padding-block: 1.25rem; break-inside: auto; }
  .spec { grid-template-columns: 9rem minmax(0, 1fr); gap: 0 1.5rem; }
  /* break-after alone still lets a heading split across the break itself */
  h1, h2, h3 { break-after: avoid; break-inside: avoid; }
  .row, .manifest__row, .claim, .status__note, .artifact { break-inside: avoid; }
  /* new blocks that must not straddle a page break */
  .statute__q, .touches > div, .ctable tr, .keystone, .evidence { break-inside: avoid; }
  .qa dt { break-after: avoid; }
  .glossary dt { break-after: avoid; }
  /* the contents list is navigation, and paper does not navigate */
  .contents { display: none !important; }
  .ctable thead { display: table-header-group; }
  .contents, .ctable caption, .summary { color: #000 !important; }

  /* the inverted band would flood a printer */
  .claims { background: #fff !important; color: #000 !important; }
  .claims h2, .claims p, .claims strong { color: #000 !important; }
  .claims .rail-num { color: #000 !important; }
  .claims .claim + .claim, .claims .claim__contrast { border-color: #999 !important; }
  .contact { background: #fff !important; }

  /* URLs are already visible in the manifest; expose the rest */
  .artifact__note a::after, .qualifier a::after { content: " (" attr(href) ")"; font-size: 9pt; }
  a { text-decoration: none; color: #000; }
  .manifest__u { color: #000; }
}

/* ---------- staging banner ---------- */
.staging {
  background: var(--accent-text);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 0.5rem 1rem;
}