:root {
  /* Cool foundation. No cream, no beige — the previous direction's warmth is
     the specific thing being corrected. */
  --white: #FFFFFF;
  --cool-25: #F7F9FB;
  --cool-50: #EDF1F6;
  --cool-100: #DCE3EA;
  --cool-400: #5A6B7B;
  --slate-900: #0D1620;

  /* Fidren identity: deep navy anchors, cobalt acts. */
  --navy-950: #0A1A2F;
  --navy-800: #12294A;
  --cobalt-600: #1552D8;
  --cobalt-700: #1348C0;
  --cobalt-500: #1F6FEA;

  /* Interface signals. Deliberately different hue families from the risk inks
     below, so an invalid field cannot be mistaken for a verdict. */
  --sig-teal: #0E7C7B;
  --sig-amber: #A35A00;
  --sig-red: #C62B24;
  --sig-blue: #1552D8;

  /* Risk inks. Restrained, instrument-readout colours — not status-page
     primaries, and not decoration. */
  --rk-green: #1B7F4B;
  --rk-seagreen: #3D7C6A;
  --rk-bronze: #7A5A16;
  --rk-steel: #3C5B84;
  --rk-crimson: #9E1B1B;
  --rk-grey: #59636D;

  --surface: var(--cool-25);
  --surface-raised: var(--white);
  --surface-subtle: var(--cool-50);
  --surface-inverse: var(--navy-950);
  --surface-inverse-raised: var(--navy-800);

  --text-primary: var(--slate-900);
  --text-muted: var(--cool-400);
  --text-inverse: var(--white);
  --text-inverse-muted: #A9B7C6;
  --border: var(--cool-100);
  --border-inverse: #24405F;

  --accent: var(--cobalt-600);
  --accent-deep: var(--navy-950);
  --link: var(--cobalt-700);

  --ui-success: var(--sig-teal);
  --ui-warning: var(--sig-amber);
  --ui-error: var(--sig-red);
  --ui-info: var(--sig-blue);
  --ui-focus: var(--cobalt-500);

  --risk-allow: var(--rk-green);
  --risk-limit: var(--rk-seagreen);
  --risk-escrow: var(--rk-bronze);
  --risk-review: var(--rk-steel);
  --risk-block: var(--rk-crimson);
  --risk-unknown: var(--rk-grey);

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Small. Oversized rounding reads as consumer software and was ruled out. */
  --radius: 3px;

  --measure: 62ch;
  --container: 76rem;

  /* The rail's own geometry, so every variant stays in proportion. */
  --rail-line: 1px;
  --rail-node: 9px;
  --rail-node-terminal: 15px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--sans);
  margin: 0;
  color: var(--text-primary);
  letter-spacing: -0.022em;
  line-height: 1.12;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); font-weight: 600; }
h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }

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

.skip-link {
  position: absolute; left: -9999px; top: var(--space-2);
  background: var(--surface-raised); border: 1px solid var(--accent);
  padding: var(--space-2) var(--space-4); z-index: 10;
}
.skip-link:focus { left: var(--space-4); }

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

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-6); }
.stack > * + * { margin-top: var(--space-6); }
.section { padding: var(--space-24) 0; border-top: 1px solid var(--border); }
.lede { font-size: 1.15rem; color: var(--text-muted); max-width: var(--measure); }

/*
 * Mono labels are the connective tissue of this identity. Every section, column
 * and field is announced by one, which is what makes the page read as an
 * instrument rather than a brochure.
 */
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}
.label-accent { color: var(--accent); }
.annotation {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.5;
}


.masthead { border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.masthead .container {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  align-items: center; justify-content: space-between;
  padding-top: var(--space-5, 1.15rem); padding-bottom: var(--space-5, 1.15rem);
}

.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--sans);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
}
.wordmark::before {
  content: '';
  width: 22px; height: var(--rail-line);
  background: var(--cool-100);
  display: inline-block;
}
.wordmark::after {
  content: '';
  width: 9px; height: 9px;
  background: var(--accent);
  display: inline-block;
  margin-left: -0.18em;
}

.nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.nav a {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--text-muted); text-decoration: none;
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--accent); text-decoration: underline; }

.site-footer {
  background: var(--surface-inverse); color: var(--text-inverse-muted);
  padding: var(--space-16) 0 var(--space-12); margin-top: var(--space-24);
}
.site-footer .wordmark { color: var(--text-inverse); }
.site-footer .wordmark::before { background: var(--border-inverse); }
.site-footer a { color: var(--text-inverse); }
.site-footer p { max-width: var(--measure); }
.site-footer .label { color: var(--text-inverse-muted); }


.rail { display: block; }
.rail-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  position: relative;
  border-top: var(--rail-line) solid var(--border);
}
.rail-stage { padding-top: var(--space-4); position: relative; padding-right: var(--space-4); }
.rail-stage::before {
  content: '';
  position: absolute; top: calc(var(--rail-node) / -2 - var(--rail-line) / 2); left: 0;
  width: var(--rail-node); height: var(--rail-node);
  background: var(--surface);
  border: var(--rail-line) solid var(--text-muted);
}
.rail-stage.is-decision::before {
  width: var(--rail-node-terminal); height: var(--rail-node-terminal);
  top: calc(var(--rail-node-terminal) / -2 - var(--rail-line) / 2);
  background: var(--accent); border-color: var(--accent);
}
.rail-stage.is-record::before { border-style: dashed; }
.rail-stage .n { font-family: var(--mono); font-size: 0.7rem; color: var(--accent); }
.rail-stage .name {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; display: block; margin: var(--space-1) 0 var(--space-2);
  color: var(--text-primary);
}
.rail-stage p { font-size: 0.86rem; color: var(--text-muted); margin: 0; max-width: 26ch; }

/* On the inverse surface the rail keeps its geometry and swaps its inks. */
.on-inverse .rail-track { border-top-color: var(--border-inverse); }
.on-inverse .rail-stage::before { background: var(--surface-inverse); border-color: var(--text-inverse-muted); }
.on-inverse .rail-stage.is-decision::before { background: var(--ui-focus); border-color: var(--ui-focus); }
.on-inverse .rail-stage .name { color: var(--text-inverse); }
.on-inverse .rail-stage .n { color: var(--ui-focus); }
.on-inverse .rail-stage p { color: var(--text-inverse-muted); }

/*
 * Vertical variant, for narrow viewports and for the future portal's side
 * panels. The horizontal rail becomes a column with the rule on the left, which
 * is the same idea rotated rather than a different component.
 */
.rail-vertical .rail-track {
  grid-auto-flow: row; grid-auto-columns: auto;
  border-top: none; border-left: var(--rail-line) solid var(--border);
}
.rail-vertical .rail-stage { padding: 0 0 var(--space-6) var(--space-6); }
.rail-vertical .rail-stage::before {
  top: 0; left: calc(var(--rail-node) / -2 - var(--rail-line) / 2);
}
.rail-vertical .rail-stage.is-decision::before {
  left: calc(var(--rail-node-terminal) / -2 - var(--rail-line) / 2); top: -3px;
}
.on-inverse.rail-vertical .rail-track { border-left-color: var(--border-inverse); }

@media (max-width: 62rem) {
  .rail .rail-track {
    grid-auto-flow: row; grid-auto-columns: auto;
    border-top: none; border-left: var(--rail-line) solid var(--border);
  }
  .rail .rail-stage { padding: 0 0 var(--space-6) var(--space-6); }
  .rail .rail-stage::before { top: 0; left: calc(var(--rail-node) / -2 - var(--rail-line) / 2); }
  .rail .rail-stage.is-decision::before { left: calc(var(--rail-node-terminal) / -2 - var(--rail-line) / 2); top: -3px; }
  .on-inverse .rail-track { border-left-color: var(--border-inverse); }
}

/* Compact: the rail as a progress mark inside a result or a table row. */
.rail-compact { display: inline-flex; align-items: center; gap: 3px; }
.rail-compact i { width: 6px; height: 6px; border: 1px solid var(--text-muted); display: block; }
.rail-compact i.on { background: var(--accent); border-color: var(--accent); }


.hero { padding: var(--space-24) 0 var(--space-16); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; }
@media (max-width: 68rem) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } }
.hero h1 { max-width: 15ch; margin-top: var(--space-4); }
.hero .lede { margin-top: var(--space-6); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.btn {
  display: inline-block; font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  border: 1px solid var(--accent); text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
.btn-primary:hover { background: var(--cobalt-700); border-color: var(--cobalt-700); }
.btn-secondary { background: transparent; color: var(--link); }
.btn-secondary:hover { background: var(--surface-subtle); }
.btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }

/*
 * The hero panel: agent request in, Fidren layer, action out. Dark, so the page
 * has one place with real weight instead of an evenly grey field.
 */
.panel-inverse {
  background: var(--surface-inverse); color: var(--text-inverse);
  border-radius: var(--radius); padding: var(--space-8);
}
.panel-inverse .label { color: var(--text-inverse-muted); }
.panel-inverse .rule { border: 0; border-top: 1px solid var(--border-inverse); margin: var(--space-6) 0; }
.io-line {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-inverse);
}
.io-line .k { color: var(--text-inverse-muted); }


.verdict {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  padding: 0.2rem var(--space-3);
  border: 1px solid var(--border); border-left: 3px solid var(--vt, var(--risk-unknown));
  background: var(--surface-raised); color: var(--text-primary);
  border-radius: 0;
}
.verdict::before { content: ''; width: 7px; height: 7px; background: var(--vt, var(--risk-unknown)); display: block; }
.verdict .t { color: var(--vt); }

/* Colour, rule weight and marker shape all differ, so the five actions are
   still distinguishable in greyscale. */
.v-allow { --vt: var(--risk-allow); }
.v-limit { --vt: var(--risk-limit); border-left-style: double; border-left-width: 4px; }
.v-escrow { --vt: var(--risk-escrow); border-left-style: dashed; }
.v-review { --vt: var(--risk-review); border-left-style: dotted; }
.v-block { --vt: var(--risk-block); border-left-width: 6px; }
.v-unknown { --vt: var(--risk-unknown); border-left-width: 1px; }
.v-limit::before { height: 3px; }
.v-escrow::before { height: 7px; width: 3px; }
.v-review::before { border-radius: 50%; }
.v-block::before { width: 9px; height: 9px; }
.v-unknown::before { background: transparent; border: 1px solid var(--risk-unknown); }

.result { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
@media (max-width: 58rem) { .result { grid-template-columns: minmax(0, 1fr); } }
.result > * { background: var(--surface-raised); padding: var(--space-6); }
.result .decision-value {
  font-family: var(--mono); font-size: 1.7rem; letter-spacing: -0.01em;
  color: var(--vt, var(--text-primary)); margin-top: var(--space-2);
}

.meters { display: grid; gap: var(--space-6); }
.meter .head { display: flex; justify-content: space-between; align-items: baseline; }
.meter .v { font-family: var(--mono); font-size: 0.9rem; }
.meter .bar { height: 3px; background: var(--surface-subtle); margin-top: var(--space-2); display: flex; gap: 2px; }
.meter .bar i { flex: 1; background: var(--surface-subtle); display: block; }
.meter .bar i.on { background: var(--accent); }
.meter .bar.muted i.on { background: var(--text-muted); }


.panel { border: 1px solid var(--border); background: var(--surface-raised); border-radius: var(--radius); }
.panel > .head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.panel .body { padding: var(--space-6); }

.scroll { overflow-x: auto; }
.scroll table { min-width: 46rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
th {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 400; color: var(--text-muted);
  background: var(--surface-subtle);
}
tbody tr:last-child td { border-bottom: none; }
td.num, td.code { font-family: var(--mono); white-space: nowrap; font-size: 0.84rem; }
.empty { color: var(--text-muted); font-family: var(--mono); font-size: 0.8rem; }

pre.code {
  font-family: var(--mono); font-size: 0.82rem; line-height: 1.6;
  background: var(--surface-inverse); color: #C8D6E5;
  padding: var(--space-6); border-radius: var(--radius); overflow-x: auto; margin: 0;
}
pre.code .c { color: #7C95B0; }
pre.code .k { color: #7FB2FF; }
code.inline {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--surface-subtle); padding: 0.1em 0.35em; border-radius: var(--radius);
}
.mono { font-family: var(--mono); font-size: 0.84rem; }
.mono-break { font-family: var(--mono); font-size: 0.84rem; word-break: break-all; }

.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--ct, var(--ui-info));
  background: var(--surface-raised); padding: var(--space-4) var(--space-6);
  border-radius: var(--radius);
}
.callout > *:last-child { margin-bottom: 0; }
.callout .label { color: var(--ct, var(--ui-info)); margin-bottom: var(--space-2); }
.c-info { --ct: var(--ui-info); }
.c-success { --ct: var(--ui-success); }
.c-warning { --ct: var(--ui-warning); }
.c-error { --ct: var(--ui-error); }

/* Asymmetric section head: a mono label column beside the prose, rather than a
   centred title over a grid of identical cards. */
.split { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-8); }
@media (max-width: 62rem) { .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }


.field { margin-bottom: var(--space-6); max-width: 32rem; }
.field label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: var(--space-2); }
.field .hint { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--space-2); }
.field .optional { color: var(--text-muted); font-weight: 400; }

input[type='text'], input[type='email'], textarea, select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--text-primary);
  background: var(--surface-raised); border: 1px solid var(--cool-100);
  border-radius: var(--radius); padding: var(--space-3);
}
textarea { min-height: 6.5rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 1px; border-color: var(--ui-focus);
}
.field-invalid input, .field-invalid textarea { border-color: var(--ui-error); border-width: 2px; }
.field .error {
  display: block; color: var(--ui-error); font-size: 0.85rem; margin-top: var(--space-2);
  font-family: var(--mono);
}
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-6); max-width: 32rem; }
legend { font-size: 0.9rem; font-weight: 500; padding: 0 var(--space-2); }
.choice { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }


/* A compact primary action, for the masthead, where the button sits beside the
   navigation rather than under a heading. */
.btn-compact { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
@media (max-width: 48rem) {
  .masthead .container { gap: var(--space-4); }
  /* The wordmark's wide tracking is right at display size and cramped at phone
     size, where it starts eating the line. It tightens instead of shrinking. */
  .wordmark { letter-spacing: 0.16em; font-size: 1rem; }
  .wordmark::before { width: 14px; }
}

.questions { margin: 0 0 var(--space-4); padding: 0; list-style: none; max-width: var(--measure); }
.questions li {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.5;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: var(--rail-line) solid var(--border);
}

.action-list, .concepts { margin: var(--space-6) 0 0; }
.action-row, .concept { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.action-row dd, .concept dd { margin: var(--space-2) 0 0; max-width: var(--measure); }
.action-row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.action-row dd { margin: 0; }
@media (max-width: 52rem) { .action-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }
.concept dt { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }

/*
 * "Unknown is not guilty" gets the page's one inverse block outside the hero.
 * The principle is load-bearing for the product, so it is given weight rather
 * than a callout that reads as a footnote.
 */
.principle {
  background: var(--surface-inverse); color: var(--text-inverse);
  border-radius: var(--radius); padding: var(--space-12) var(--space-8);
}
.principle .label-on-inverse { color: var(--text-inverse-muted); }
.principle-statement {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: var(--space-4) 0 var(--space-8);
}
.principle-statement .mono { font-family: var(--mono); font-size: 0.86em; color: var(--ui-focus); }
.principle-body { max-width: var(--measure); }
.principle-body p { color: var(--text-inverse-muted); }

.boundary { margin: 0 0 var(--space-6); padding: 0; list-style: none; max-width: var(--measure); }
.boundary li {
  font-family: var(--mono); font-size: 0.9rem;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.boundary li::before { content: '—'; color: var(--risk-block); margin-right: var(--space-3); }

.rail-compact-row { display: flex; align-items: center; gap: var(--space-3); margin: 0; }

/*
 * The product page's own components.
 *
 * Same language, different sentences. They reuse the rail's geometry tokens and
 * the mono label system rather than introducing a second visual vocabulary —
 * the flow below is a line with nodes on it, like the rail, because it is
 * describing the same kind of thing: a sequence with a point that matters.
 */

/* The one question the product answers, given the weight of a pull quote. */
.question-statement {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem);
  line-height: 1.45;
  color: var(--text-primary);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  max-width: var(--measure);
}

/* Term, one-line definition, then the nuance. The short line carries the
   weight so a reader skimming the four terms still gets the distinction. */
.concept-short { font-weight: 600; color: var(--text-primary); }

.decision-list { margin: var(--space-6) 0 0; }
.decision-row {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-6);
  align-items: start; padding: var(--space-6) 0; border-top: 1px solid var(--border);
}
@media (max-width: 56rem) { .decision-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }
.decision-row dd { margin: 0; max-width: var(--measure); }
.decision-row dd p { margin: 0 0 var(--space-2); }
.decision-row dd p:last-child { margin-bottom: 0; }
.decision-meaning { font-weight: 600; color: var(--text-primary); }

/* Stage 06, set apart from the five that produce an answer. */
.rail-after { border-top: 1px solid var(--border); padding-top: var(--space-8); }
.rail-after .rail { margin: var(--space-4) 0; }

/*
 * The architecture flow.
 *
 * An ordered list with the two Fidren steps marked. The handover is the whole
 * point of the diagram, so it is carried by the layout — a filled marker and a
 * named owner per step — rather than by a caption asking the reader to notice.
 * Semantic markup, so it survives being read aloud in order.
 */
.flow { list-style: none; margin: var(--space-6) 0 var(--space-4); padding: 0; border-left: var(--rail-line) solid var(--border); }
.flow-step {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
}
.flow-step::before {
  content: '';
  position: absolute; top: calc(var(--space-4) + 0.45rem);
  left: calc(var(--rail-node) / -2 - var(--rail-line) / 2);
  width: var(--rail-node); height: var(--rail-node);
  background: var(--surface); border: var(--rail-line) solid var(--text-muted);
}
.flow-step.is-fidren::before { background: var(--accent); border-color: var(--accent); }
.flow-actor { font-weight: 600; color: var(--text-primary); }
.flow-what { grid-column: 1; font-size: 0.9rem; color: var(--text-muted); }
.flow-owner {
  grid-row: 1; grid-column: 2;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.flow-step.is-fidren .flow-owner { color: var(--accent); }

/*
 * The security page's trust zones.
 *
 * Three cards side by side because the content is the comparison between them:
 * a reader has to see at a glance that only the third layer moves value. A
 * stacked prose treatment loses exactly that. Same owner label as .flow-owner,
 * because it is the same idea — who operates this layer — and a second
 * vocabulary for it would be drift.
 *
 * Separation is carried by a rule rather than a colour. These are ownership
 * boundaries, not risk verdicts, so the UI and risk namespaces stay apart:
 * nothing here is green and nothing carries a badge.
 */
.trust-zones {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6);
}
@media (max-width: 62rem) { .trust-zones { grid-template-columns: minmax(0, 1fr); } }
.zone {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-raised); padding: var(--space-6);
  border-top: var(--rail-line) solid var(--text-muted);
}
.zone.is-fidren { border-top-color: var(--accent); }
.zone-owner {
  display: block; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.zone.is-fidren .zone-owner { color: var(--accent); }
.zone-name {
  font-size: 1.05rem; margin: var(--space-2) 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.zone ul { margin: 0; padding-left: var(--space-4); }
.zone li { font-size: 0.9rem; margin-bottom: var(--space-2); }
.zone li:last-child { margin-bottom: 0; }

/*
 * The developer page's additions.
 *
 * Three small things, all reusing what exists. Code blocks scroll in their own
 * box rather than widening the page — the scroll discipline the design system
 * already applies to wide tables, applied to the one other thing that is
 * legitimately wider than the measure.
 */
pre.scroll {
  margin: 0; overflow-x: auto; font-family: var(--mono);
  font-size: 0.8rem; line-height: 1.6; color: var(--text-primary);
}
pre.scroll code { font: inherit; }

/* Required vs optional, on a field name. Mono because they qualify a machine
   value, muted because the field name is the thing being read. */
.req, .opt {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-left: var(--space-2);
}
.req { color: var(--accent); }
.opt { color: var(--text-muted); }

/* A response field and its meaning: the meaning is a sentence, so the pair
   stacks instead of trying to sit on one line like a short machine value. */
.io-line.io-stacked {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.io-line.io-stacked:last-child { border-bottom: 0; }
.io-line.io-stacked span:last-child {
  font-family: var(--sans); font-size: 0.88rem; color: var(--text-muted);
}

/* The first section on a page with no hero still needs air above it. */
.section-first { border-top: 0; padding-top: var(--space-16); }
.section-first h1 { margin-bottom: var(--space-4); }

/*
 * The honeypot.
 *
 * Moved out of the viewport rather than removed with display none. A field that
 * is not rendered at all is one a capable bot can detect by reading the computed
 * style; a field that is laid out and positioned off-screen looks ordinary in
 * the DOM. It carries aria-hidden and a negative tabindex so nobody using a
 * screen reader or a keyboard can reach it by accident, which is the failure
 * mode that makes honeypots hostile to real people.
 */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* An invalid radio group gets the same treatment as an invalid input. */
fieldset.field-invalid { border-color: var(--ui-error); border-width: 2px; }
fieldset .hint { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--space-2); }
fieldset .error { display: block; color: var(--ui-error); font-size: 0.85rem; margin-top: var(--space-2); font-family: var(--mono); }
form .actions { margin-top: var(--space-8); }

/* The request/response lines are inverse in the hero panel and ordinary text
   inside a light panel; only the inks change. */
.panel .io-line { color: var(--text-primary); padding: var(--space-1) 0; }
.panel .io-line .k { color: var(--text-muted); }