/* Claima public website — isolated presentation surface.
   Identity is carried by the judgement rail, the evidence-state geometry, the
   verdict masthead, the evidence ledger, provenance/currentness, the blocker
   and the next action — not by decoration.
   Type: Source Serif 4 (display) + Geist (UI/body), self-hosted.

   The homepage follows the Founder-locked visual direction of 21 September
   2026, which supersedes the earlier flat treatment: product proof is shown in
   a raised white panel with a soft drop shadow and a 10px radius, the
   walk-through sits on a dark ground, and the grounds alternate paper / white /
   dark / band so a long page reads as distinct movements. The earlier rule
   against shadows and rounded panels no longer holds where that direction
   requires depth; it still holds everywhere the direction does not, and
   gradients remain unused.

   Two deliberate accessibility floors: micro labels are never smaller than
   12px, and the recessive ink is one value that clears 4.5:1 on every ground
   used here — on the dark ground its light counterpart does the same.
   Inactive rail segments are separated by bar colour and weight, so
   geometry carries the distinction rather than colour alone. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Grounds */
  --paper: #fbfaf7;
  --ledger-ground: #f7f6f1;
  --action-ground: #f1f5f1;
  --white: #ffffff;          /* the statement band and the raised panel */
  --band: #f1f0eb;           /* the private-beta band */

  /* Dark ground — the walk-through movement */
  --dark: #15181c;
  --dark-raised: #1d2229;
  --dark-edge: #2e343b;
  --dark-rule: #3a4149;
  --on-dark: #f3f2ee;
  --on-dark-muted: #a9b0b8;  /* 8.4:1 on the dark ground */

  /* Ink */
  --ink: #15181c;
  --body: #333a42;
  --muted: #5f6b7a;          /* 5.01:1 on paper, 4.75:1 on the action ground */
  --blocker-ink: #57462d;

  /* Rules */
  --rule: #dde1dd;
  --rule-strong: #c9cfc9;
  --rail-inactive: #dfe3df;
  --control-edge: #848b84;   /* 3.35:1 on paper: a control's boundary is its only cue */
  --hairline: #e6e8e4;       /* inside a raised panel, where the ground is white */
  --panel-edge: #d9ddd8;
  --panel-bar: #f7f6f2;
  --panel-radius: 10px;
  --panel-shadow: 0 1px 2px rgba(21, 24, 28, 0.05), 0 18px 40px rgba(21, 24, 28, 0.08);

  /* Judgement */
  --apply: #1f5b46;
  --prepare: #95652d;
  --ruleout: #8a3a2c;
  /* The same three judgements read on the dark ground. Each clears 4.5:1 on
     both #15181C and the raised #1D2229, which the paper values do not. */
  --apply-dk: #7cc7a6;
  --prepare-dk: #d9a860;
  --ruleout-dk: #e3927f;
  /* The brand accent and its edge on the dark ground. Deliberately a teal
     rather than the Apply Now green: an eyebrow is not a judgement, and a
     colour a reader has learned to mean Apply Now must not be spent on one. */
  --accent-dk: #6fc9b6;
  --edge-dk: #4e7f69;

  --accent: #0f6e5c;         /* brand accent: actions only, never a judgement */
  --accent-dark: #0b5646;
  --radius: 6px;           /* controls only: the accepted system requires square geometry for panels */

  --focus: #15181c;

  --display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", serif;
  --ui: "Geist", "Helvetica Neue", Arial, sans-serif;

  /* Five display sizes only: 82 / 66 / 58 / 38 / 30 at 1440. */
  --display-1: clamp(2.625rem, 1.696rem + 3.81vw, 5.125rem);
  --display-2: clamp(2.3125rem, 1.639rem + 2.76vw, 4.125rem);
  --display-3: clamp(2rem, 1.396rem + 2.48vw, 3.625rem);
  --display-4: clamp(1.625rem, 1.15rem + 1.9vw, 2.375rem);
  --display-5: clamp(1.5rem, 1.34rem + 0.64vw, 1.875rem);

  /* Body: 19 / 16 / 14.5 / 12.5, with micro labels floored at 12. */
  --text-lede: clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem);
  --text-body: 1rem;
  --text-small: 0.90625rem;
  --text-micro: 0.78125rem;
  --text-label: 0.75rem;

  --measure: 62ch;
  --gutter: clamp(18px, 4vw, 72px);
  --max: 1440px;
}

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

html {
  font-family: var(--ui);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--text-body);
  line-height: 1.55;
  font-feature-settings: "tnum" 1;
  /* Deliberately no overflow-x clip on the body. Clipping hid a reflow problem
     rather than preventing one: at 200% text size the layout exceeded the
     viewport, and clipping turned that into silently lost copy and navigation,
     which WCAG 2.2 1.4.4 forbids. The layout itself is repaired — see the
     reflow control below — so there is nothing left to clip. */
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--display-2); letter-spacing: -0.033em; line-height: 1.02; }
h2 { font-size: var(--display-4); letter-spacing: -0.025em; line-height: 1.15; }
h3 { font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: 0.85em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
ul, ol { margin: 0; padding-left: 1.25em; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 10;
}
.skip-link:focus { top: 0.5rem; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Reflow control ----------
   A grid with no explicit template gets an implicit `auto` track, which is
   sized to its content and cannot shrink below it. Every grid named here is
   single-column, so its track is pinned to one that may shrink. Without this,
   text resized to 200% pushes these containers — and with them the page —
   wider than the viewport, and the copy past the right edge cannot be read.
   WCAG 2.2 1.4.4 and 1.4.10. */
.section-head, .col, .glyph-legend li, .provenance, .chain, .chain li,
.audience > div, .boundary, .fact-list, .capture, .capture form, .field,
.fieldset, .capture .truth-notes, .stages > li, .steps > li, .disclosure,
.faq, .faq > div, .checklist, .site-footer ul {
  grid-template-columns: minmax(0, 1fr);
}
/* The same failure's fourth cause: a word wider than the cell it sits in. At a
   doubled text size a long word set in the display face — "collaboration",
   "recommendation" — is wider than a narrow column, and no grid or flex repair
   changes that, because the word itself is the minimum content size. Every
   text-bearing box may break a word it cannot otherwise fit. This changes
   nothing at ordinary text sizes, where no word is ever that wide. */
p, li, dt, dd, th, td, caption, .state, .judge, .requirement, .subject {
  overflow-wrap: break-word;
}

/* ---------- Labels, chips, meta ----------
   Exactly one label type in the whole system is uppercase: the synthetic-example
   classification, which marks where the example begins and where it ends. Every
   other label is sentence case, so nothing competes with it. */
.label {
  font-family: var(--ui);
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.meta { font-size: var(--text-micro); color: var(--muted); }
.chip {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header / footer ---------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  flex-wrap: wrap;
  padding-block: 0.5rem;
}
@media (min-width: 900px) { .site-header .wrap { min-height: 72px; padding-block: 0; } }
.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  /* Never --apply. The wordmark was once painted in the Apply Now judgement
     colour, which put a judgement on every page permanently. Ink, as the
     locked direction sets it, so the brand carries no state at all. */
  color: var(--ink);
  text-decoration: none;
}
@media (min-width: 900px) { .site-header .wordmark { font-size: 1.625rem; } }
.site-nav ul { display: flex; align-items: center; gap: 0.75rem 1.5rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
@media (min-width: 1040px) { .site-nav ul { gap: 2.25rem; } }
.site-nav a { text-decoration: none; font-size: var(--text-small); font-weight: 500; color: var(--ink); padding-block: 0.25rem; }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--ink); }
.site-nav a:hover { text-decoration: underline; }
/* The access route is the one header item that reads as a control. */
.site-nav-cta a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-weight: 600;
}
.site-nav-cta a:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }

/* ---------- Compact navigation ----------
   The locked mobile design gives the header one bar of 56px with a single
   control. The control ships with the `hidden` attribute, so without the
   script it is not rendered at all and the full list is simply visible: every
   route stays reachable and nothing is put behind a control that cannot be
   operated. The script removes `hidden` and marks the document, which is the
   only thing that collapses the list. Desktop is untouched at every step. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Optical alignment only, and capped against the gutter it pulls into. A
     bare -0.625rem doubles with the text: at 200% it is 20px against an 18px
     gutter, which put 2px of the control past the viewport edge on every page
     at 390 and 320 — the fifth instance on this surface of a length that
     scales with the text and is never checked against the space it has. */
  margin-right: calc(-1 * min(0.625rem, 0.5 * var(--gutter)));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
@media (min-width: 900px) { .nav-toggle { display: none; } }
@media (max-width: 899.98px) {
  [data-nav="on"] .site-header .wrap { min-height: 56px; padding-block: 0; }
  [data-nav="on"] .site-nav ul { display: none; }
  /* Open, the list becomes a panel under the bar rather than widening it, so
     the bar keeps the height the locked design gives it. */
  [data-nav="on"] .site-nav[data-open="true"] { flex-basis: 100%; }
  [data-nav="on"] .site-nav[data-open="true"] ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    padding-block: 0.25rem 0.75rem;
    border-top: 1px solid var(--rule);
  }
  [data-nav="on"] .site-nav[data-open="true"] li { padding-block: 0.375rem; }
  [data-nav="on"] .site-nav[data-open="true"] li a { display: inline-flex; align-items: center; min-height: 24px; }
  [data-nav="on"] .site-nav-cta a { margin-top: 0.375rem; }
}

.site-footer {
  border-top: 1px solid var(--rule-strong);
  margin-top: 5rem;
  padding-block: 2.5rem 3rem;
  font-size: var(--text-small);
  color: var(--body);
}
.site-footer .wrap { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .site-footer .wrap { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
/* Footer links are stacked, so each one carries its own 24px target height. */
.site-footer li a { display: inline-flex; align-items: center; min-height: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.status-line { color: var(--muted); font-size: var(--text-micro); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  /* The inline pad is capped against the viewport too: at 200% text a
     rem-only pad is wider than the words it frames on a narrow screen. */
  padding: 0.85rem min(1.625rem, 8vw);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius);
  font: 600 var(--text-small)/1.2 var(--ui);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 48px;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.btn-link:hover { color: var(--accent-dark); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; }

/* ---------- Sections ----------
   The locked direction separates movements by ground rather than by a rule,
   and gives each one room: 112–128px of vertical air at 1440, 56–72px at 390.
   Only the bands that change ground carry an edge. */
.section { padding-block: clamp(3.5rem, 8vw, 7.25rem); }
.section-head { display: grid; gap: 1rem; margin-bottom: 2.75rem; }
.section-head p { color: var(--body); font-size: var(--text-body); max-width: 62ch; }
/* Heading left, its qualifying note right — the locked direction's way of
   keeping a section's caveat beside the claim rather than under it. */
.section-head--split { display: grid; gap: 1.25rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1040px) {
  .section-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
  .section-head--split p { font-size: var(--text-small); }
}
.grid-3 { display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-2 { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.col { display: grid; gap: 0.75rem; align-content: start; }
.col h3 { padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.col p { color: var(--body); font-size: var(--text-small); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(1.75rem, 4vw, 5rem) clamp(3rem, 7vw, 7rem); }
/* Mobile reading order is the DOM order: audience, headline, three-outcome
   rail, promise, primary CTA, judgement proof, adviser route, assurances.
   Desktop keeps the copy in the left columns and the proof panel in the right
   column via grid areas only — never `order`, so what is read and what is
   seen can never come apart. */
.hero .wrap {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "brow"
    "title"
    "vocab"
    "lede"
    "cta"
    "panel"
    "adviser"
    "assure"
    "foot";
  align-items: start;
}
.hero .eyebrow { grid-area: brow; }
.hero .hero-title { grid-area: title; font-size: var(--display-1); letter-spacing: -0.035em; line-height: 0.98; }
.hero .outcome-vocab { grid-area: vocab; margin-top: 1rem; max-width: 470px; }
.hero .lede { grid-area: lede; margin-top: 1rem; font-size: var(--text-lede); line-height: 1.55; color: var(--body); max-width: 46ch; }
.hero .cta-row { grid-area: cta; margin-top: 1rem; }
.hero .cta-row .btn { max-width: 100%; }
.hero .truth-panel { grid-area: panel; margin-top: 1.5rem; }
.hero .adviser-route { grid-area: adviser; }
.hero .boundary { grid-area: assure; margin-top: 0.75rem; }
.hero .hero-foot { grid-area: foot; font-size: var(--text-micro); line-height: 1.6; color: var(--muted); max-width: 52ch; }
@media (min-width: 1080px) {
  .hero .wrap {
    /* Two flexible copy columns and the panel. The copy columns carry no
       intrinsic sizing, so a doubled text size cannot widen a track: the
       button wraps inside its own column instead of pushing the page. */
    grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr) minmax(0, 580px);
    grid-template-areas:
      "brow   brow    panel"
      "title  title   panel"
      "vocab  vocab   panel"
      "lede   lede    panel"
      "cta    adviser panel"
      "assure assure  panel"
      "foot   foot    panel";
    /* The proof panel is the tall column. Pin the copy rows to their content
       and let the last row absorb the slack, so the left column keeps the
       intended rhythm instead of stretching to the panel's height. */
    grid-template-rows: auto auto auto auto auto auto 1fr;
    column-gap: 4rem;
    row-gap: 0;
  }
  /* The copy column packs to the top and the slack falls below it, so the
     footnote follows the assurances instead of floating at the panel's
     foot with a dead gap above it. */
  .hero .hero-foot { align-self: start; }
  .hero .truth-panel { margin-top: 0; }
  .hero .outcome-vocab { margin-top: 1.75rem; }
  .hero .lede { margin-top: 1.625rem; font-size: 1.25rem; }
  .hero .cta-row { margin-top: 1.75rem; }
  .hero .adviser-route { margin: 0; align-self: center; justify-self: start; }
  .hero .boundary { margin-top: 1.75rem; }
  .hero .hero-foot { margin-top: 1.125rem; }
}

/* The assurance strip under the hero: three short guarantees on one rule,
   the locked direction's closing note to the first viewport. */
.hero .boundary[data-tone="assurance"] {
  display: grid;
  gap: 0.625rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
  max-width: none;
}
@media (min-width: 640px) { .hero .boundary[data-tone="assurance"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero .boundary[data-tone="assurance"] li {
  padding: 0;
  border: 0;
  font-size: var(--text-micro);
  line-height: 1.45;
  color: var(--body);
}
.hero .boundary[data-tone="assurance"] li:last-child { border-bottom: 0; }

/* ---------- Section eyebrow ----------
   A short label above a display heading. It names the audience or the movement
   and asserts nothing, so it is never a judgement colour. */
.eyebrow {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-dark);
  max-width: 48ch;
}

/* ---------- Judgement rail ----------
   Position is fixed: Apply Now left, Prepare Now centre, Do Not Apply right,
   so the reader learns one order. Exactly one segment is ever active. Inactive
   segments keep their cell and their rule but never their colour. The rail is
   never used for progress, percentage or sequence. */
.judgement-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.judgement-rail li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-content: start;
  min-width: 0;
  padding-right: 1.125rem;
  /* Three fixed positions in one row: at 200% text a judgement word is wider
     than its third of the rail, and breaking it keeps it readable where
     spilling it past the viewport would not. */
  overflow-wrap: break-word;
}
.judgement-rail li + li { padding-left: 1.125rem; border-left: 1px solid var(--rule); }
.judgement-rail li:last-child { padding-right: 0; }
.judgement-rail li::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--rail-inactive);
}
.judgement-rail .state {
  display: block;
  margin-top: 0.6875rem;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--muted);
}
.judgement-rail li > span:not(.state) {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-label);
  line-height: 1.45;
  color: var(--muted);
}
.judgement-rail li[aria-current="true"] .state { font-weight: 600; }
.judgement-rail li[aria-current="true"][data-judgement="apply"]::before { background: var(--apply); }
.judgement-rail li[aria-current="true"][data-judgement="apply"] .state { color: var(--apply); }
.judgement-rail li[aria-current="true"][data-judgement="prepare"]::before { background: var(--prepare); }
.judgement-rail li[aria-current="true"][data-judgement="prepare"] .state { color: var(--prepare); }
.judgement-rail li[aria-current="true"][data-judgement="ruleout"]::before { background: var(--ruleout); }
.judgement-rail li[aria-current="true"][data-judgement="ruleout"] .state { color: var(--ruleout); }
.judgement-rail li[aria-current="true"] > span:not(.state) { color: var(--blocker-ink); }

/* Compact scale — inside a proof panel. */
.judgement-rail--compact li { padding-right: 0.75rem; }
.judgement-rail--compact li + li { padding-left: 0.75rem; border-left: 0; }
.judgement-rail--compact li::before { height: 3px; }
.judgement-rail--compact .state { margin-top: 0.4375rem; }

/* Filled scale — the locked direction's reading of the same instrument. One
   bordered bar of three equal cells; the judgement in force is the filled one
   and carries its own word, so the fill is never the only cue. Used where the
   rail is the judgement itself rather than a legend beside it. */
.judgement-rail--filled {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.judgement-rail--filled li { padding: 0; }
.judgement-rail--filled li + li { padding-left: 0; border-left: 1px solid var(--rule); }
.judgement-rail--filled li::before { display: none; }
.judgement-rail--filled .state {
  display: block;
  margin: 0;
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--muted);
}
/* The active cell's word is white on its own judgement colour. The attribute
   is repeated so this outweighs the legend rule that paints the same word in
   that colour: without it the word was brown on brown and the rail read as an
   empty block. */
.judgement-rail--filled li[aria-current="true"][data-judgement] .state,
.judgement-rail--filled li[data-current="true"][data-judgement] .state { color: var(--white); font-weight: 600; }
.judgement-rail--filled li[aria-current="true"][data-judgement="apply"],
.judgement-rail--filled li[data-current="true"][data-judgement="apply"] { background: var(--apply); }
.judgement-rail--filled li[aria-current="true"][data-judgement="prepare"],
.judgement-rail--filled li[data-current="true"][data-judgement="prepare"] { background: var(--prepare); }
.judgement-rail--filled li[aria-current="true"][data-judgement="ruleout"],
.judgement-rail--filled li[data-current="true"][data-judgement="ruleout"] { background: var(--ruleout); }
/* On the dark ground the same bar keeps its inactive cells legible. */
.section--dark .judgement-rail--filled { background: var(--dark-raised); border-color: var(--dark-rule); }
.section--dark .judgement-rail--filled li + li { border-left-color: var(--dark-rule); }
.section--dark .judgement-rail--filled .state { color: var(--on-dark-muted); font-size: var(--text-micro); padding-block: 0.5rem; }
.section--dark .judgement-rail--filled li[data-current="true"] .state { color: var(--white); }

/* The three-outcome vocabulary beside the headline. This names the three
   answers Claima can give; it is not a judgement about anything, so no
   segment is marked current. */
.outcome-vocab { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.outcome-vocab li { min-width: 0; padding-right: 1.125rem; }
.outcome-vocab li + li { padding-left: 1.125rem; border-left: 1px solid var(--rule); }
.outcome-vocab li:last-child { padding-right: 0; }
.outcome-vocab li::before { content: ""; display: block; height: 4px; }
.outcome-vocab li[data-judgement="apply"]::before { background: var(--apply); }
.outcome-vocab li[data-judgement="prepare"]::before { background: var(--prepare); }
.outcome-vocab li[data-judgement="ruleout"]::before { background: var(--ruleout); }
.outcome-vocab .state { display: block; margin-top: 0.625rem; font-size: var(--text-label); font-weight: 600; }
.outcome-vocab li[data-judgement="apply"] .state { color: var(--apply); }
.outcome-vocab li[data-judgement="prepare"] .state { color: var(--prepare); }
.outcome-vocab li[data-judgement="ruleout"] .state { color: var(--ruleout); }
@media (max-width: 400px) {
  .outcome-vocab li, .judgement-rail li { padding-right: 0.625rem; }
  .outcome-vocab li + li, .judgement-rail li + li { padding-left: 0.625rem; }
}

/* Micro scale — three ticks and the active label only, for dense rows. */
.micro-rail { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.micro-rail span { display: block; width: 14px; height: 3px; background: var(--rail-inactive); }
.micro-rail[data-judgement="apply"] span:nth-child(1) { background: var(--apply); }
.micro-rail[data-judgement="prepare"] span:nth-child(2) { background: var(--prepare); }
.micro-rail[data-judgement="ruleout"] span:nth-child(3) { background: var(--ruleout); }

/* ---------- Verdict masthead ---------- */
.verdict { display: block; }
.verdict-word {
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--display-3);
  line-height: 1;
  letter-spacing: -0.03em;
}
.verdict[data-judgement="apply"] .verdict-word { color: var(--apply); }
.verdict[data-judgement="prepare"] .verdict-word { color: var(--prepare); }
.verdict[data-judgement="ruleout"] .verdict-word { color: var(--ruleout); }
.verdict .basis { margin-top: 1rem; color: var(--body); font-size: var(--text-small); line-height: 1.5; max-width: 46ch; }
.truth-panel .basis { max-width: none; }
.truth-panel .verdict-word { font-size: var(--display-5); letter-spacing: -0.02em; }
.verdict-masthead { display: block; padding-top: 1.5rem; border-top: 3px solid currentColor; }
.verdict-masthead .verdict-word { margin-top: 0.875rem; }
.verdict-masthead[data-judgement="apply"] { color: var(--apply); }
.verdict-masthead[data-judgement="prepare"] { color: var(--prepare); }
.verdict-masthead[data-judgement="ruleout"] { color: var(--ruleout); }
.verdict-masthead > .label { color: var(--muted); }
.verdict-masthead .judgement-rail { margin-top: 1.75rem; max-width: 560px; }

/* ---------- Evidence-state geometry ----------
   Meaning is carried by the border treatment — continuous, broken, filled,
   doubled — so the four states separate with colour removed. Colour only
   reinforces. Three sizes only: 40px in explanation, 22px in a ledger,
   16px inline; border weight 2 / 1.5 / 1.5. */
.glyph {
  display: inline-grid;
  place-items: center;
  width: 1rem; height: 1rem;
  flex: none;
  vertical-align: -0.15em;
  border: 1.5px solid currentColor;
  color: var(--body);
  position: relative;
}
.glyph svg { width: 62%; height: 62%; display: block; }
.glyph[data-state="supported"] { color: var(--apply); }
.glyph[data-state="unknown"] { color: var(--prepare); border-style: dashed; }
.glyph[data-state="conflict"] { color: var(--ruleout); background: var(--ruleout); }
.glyph[data-state="conflict"] svg { color: var(--paper); }
/* Stale is a doubled border: the outer rule, a gap of ground, and an inner
   rule drawn as a real border on a pseudo-element — no shadow, per the
   accepted visual system. */
.glyph[data-state="stale"] { color: var(--prepare); }
.glyph[data-state="stale"]::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border: 1.5px solid currentColor;
}
.glyph[data-state="stale"] svg { width: 56%; height: 56%; }

.glyph--lg { width: 2.5rem; height: 2.5rem; border-width: 2px; }
.glyph--lg[data-state="stale"]::after { inset: 2px; border-width: 2px; }
.glyph--md { width: 1.375rem; height: 1.375rem; }

.state-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-micro);
  font-weight: 500;
  white-space: nowrap;
}
.state-tag[data-state="supported"] { color: var(--apply); }
.state-tag[data-state="unknown"] { color: var(--prepare); }
.state-tag[data-state="conflict"] { color: var(--ruleout); }
.state-tag[data-state="stale"] { color: var(--prepare); }

.glyph-legend {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px) { .glyph-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .glyph-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.glyph-legend li { display: grid; gap: 0; align-content: start; }
.glyph-legend strong { display: block; margin-top: 1rem; font-size: var(--text-body); font-weight: 600; color: var(--ink); }
.glyph-legend p { margin-top: 0.375rem; font-size: var(--text-micro); line-height: 1.5; color: var(--body); }
.glyph-legend .geometry { margin-top: 0.625rem; font-size: var(--text-label); line-height: 1.5; color: var(--muted); }

/* ---------- Evidence / readiness ledger ---------- */
.ledger-wrap { position: relative; overflow-x: auto; } /* positioned so visually hidden labels inside are contained by the scroll region */
.ledger-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.scroll-hint { display: none; margin-top: 0.75rem; font-size: var(--text-micro); color: var(--muted); }
.scroll-hint::before { content: "\2194\00a0"; }
/* Revealed only when the region it describes actually overflows, which a media
   query cannot know: it sees the viewport, not whether the table fits. Shown at
   a breakpoint instead, the hint told visitors they could scroll sideways at
   widths where there was nothing to scroll. The script sets data-overflowing
   when it measures one; without the script no hint appears, which is silent
   rather than untrue. */
.scroll-hint[data-overflowing="true"] { display: block; }
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  min-width: 640px;
}
/* A caption must stay display:table-caption, or the browser drops it out of
   the caption box and paints it after the header row. Its parts run inline. */
.ledger caption { text-align: left; padding-bottom: 1rem; }
.ledger caption .meta { margin-left: 1rem; }
.ledger th, .ledger td {
  text-align: left;
  vertical-align: top;
  padding: 0.9375rem 1.25rem 0.9375rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger thead th { border-bottom: 1px solid var(--ink); font-size: var(--text-label); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.ledger th[scope="row"] { font-weight: 500; color: var(--ink); }
.ledger td.provenance { color: var(--muted); font-size: var(--text-micro); border-left: 0; padding-left: 0; }
.ledger td.next { color: var(--body); }
.ledger-summary { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.25rem; }

/* Compact ledger inside the hero proof: one cell per requirement, each
   carrying its state mark. It encodes what is missing, not how much. */
.ledger-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0.6875rem 0 0;
  border-top: 1px solid var(--ink);
}
/* Requirement first, its state at the end of the row. Placed with grid areas,
   never `order`: the row is read state-then-requirement, which is the sense a
   screen reader needs, and seen requirement-then-state, which is the sense the
   eye scans. Neither is a reordering of the other's content. */
.ledger-cells li {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "requirement state";
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}
.ledger-cells li > .state-tag { grid-area: state; }
.ledger-cells p { grid-area: requirement; margin-top: 0; font-size: var(--text-small); line-height: 1.35; color: var(--ink); }
.ledger-cells li:last-child { border-bottom: 0; }

/* ---------- Provenance / currentness ----------
   Deadline and currentness read as one paired unit, never two separate facts. */
/* Scoped to the description-list form. The same class is used on ledger cells,
   where display:grid would take the cell out of table-cell behaviour. */
dl.provenance {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-size: var(--text-micro);
  line-height: 1.5;
  color: var(--muted);
}
.provenance dt { display: inline; font-weight: 600; color: var(--body); }
.provenance dd { display: inline; margin: 0; }
.provenance div::after { content: ""; display: block; }
.currentness { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.currentness[data-current="true"] { color: var(--apply); }
.currentness[data-current="false"] { color: var(--prepare); }
.currentness::before { content: ""; width: 0.5rem; height: 0.5rem; flex: none; border: 1.5px solid currentColor; }
.currentness[data-current="true"]::before { background: currentColor; }

/* ---------- Blocker ----------
   Its own form: a rule in the state's colour, no box and no fill, so it never
   reads as an alarm banner. */
/* The rule takes the colour of the evidence state that is blocking the route,
   so the blocker and the ledger cell behind it never disagree. */
.blocker {
  display: block;
  border-left: 2px solid var(--prepare);
  padding: 0 0 0 0.875rem;
}
.blocker[data-state="conflict"] { border-left-color: var(--ruleout); }
.blocker .label { display: block; color: var(--prepare); }
.blocker[data-state="conflict"] .label { color: var(--ruleout); }
.blocker p { margin-top: 0.375rem; color: var(--ink); font-size: var(--text-small); line-height: 1.5; font-weight: 600; max-width: 46ch; }
.blocker p + p { color: var(--blocker-ink); font-weight: 400; }

/* ---------- Next action ---------- */
.next-action {
  display: block;
  border-top: 1px solid var(--rule-strong);
  background: var(--action-ground);
  padding: 0.9375rem 1.625rem 1rem;
  margin-inline: calc(-1 * var(--panel-pad, 0px));
}
.next-action .label { display: block; color: var(--apply); }
.next-action .action { margin-top: 0.375rem; font-family: var(--display); font-size: 1.1875rem; font-weight: 500; line-height: 1.35; color: var(--ink); max-width: 46ch; }
.next-action .why { margin-top: 0.5rem; font-size: var(--text-micro); line-height: 1.5; color: var(--body); max-width: 60ch; }

/* ---------- Hero proof panel ---------- */
.truth-panel {
  /* The pad is capped against the viewport as well as the text size: at 200%
     text on a narrow screen a rem-only pad is wider than the space left for
     the words it frames, and the panel then pushes the page sideways. */
  --panel-pad: min(1.75rem, 7vw);
  align-self: start;
  background: var(--white);
  border: 1px solid var(--panel-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
/* Grid and flex children refuse to shrink below their content by default, so
   the panel's blocks have to be told they may. */
.truth-panel > * { min-width: 0; }
.truth-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0.75rem var(--panel-pad);
  border-bottom: 1px solid var(--hairline);
  background: var(--panel-bar);
}
.truth-panel-head .meta { color: var(--ink); font-weight: 600; }
.truth-panel-head .chip, .panel-bar .chip {
  letter-spacing: 0.04em;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--control-edge);
  border-radius: var(--radius);
  color: var(--body);
  /* No nowrap: at a doubled text size the classification is wider than the bar
     it sits in, and the panel clips its own overflow to keep its radius, so a
     word that cannot wrap is a word the visitor never sees. */
  max-width: 100%;
  overflow-wrap: break-word;
}
.truth-panel-head .meta { font-size: var(--text-micro); }
.truth-panel-body { padding: 1.25rem var(--panel-pad) 1rem; }
/* Opportunity and its classification read as one line, so the verdict sits
   directly beneath them. */
.truth-panel-body .programme,
.truth-panel-body .funder { display: inline; font-size: var(--text-micro); color: var(--muted); }
.truth-panel-body .funder::before { content: "\00b7"; padding-inline: 0.3em; }
.truth-panel-body .verdict { margin-top: 0.875rem; }
.truth-panel-body .judgement-rail { margin-top: 0.875rem; }
.truth-panel-ledger {
  padding: 0.9375rem var(--panel-pad) 1rem;
  border-top: 1px solid var(--hairline);
  background: var(--ledger-ground);
}
.truth-panel-ledger .ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.truth-panel-ledger .ledger-head .label { color: var(--body); }
.truth-panel-blocker { padding: 0.9375rem var(--panel-pad); border-top: 1px solid var(--hairline); }
.truth-panel-provenance { padding: 0 var(--panel-pad) 0.875rem; }
.truth-panel .next-action { margin-inline: 0; background: var(--panel-bar); border-top-color: var(--hairline); }

/* ---------- Outcome rail ----------
   One continuous instrument. The three judgements are positions on it, not
   three feature cards. */
.outcome-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}
@media (min-width: 900px) { .outcome-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.outcome-rail > li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
/* The three judgements read as one continuous instrument: each heading is a
   segment of a single rail, painted in its own state, with the explanation
   directly beneath it. Not three feature cards. */
.outcome-rail h3 {
  margin: 0;
  padding: 1.0625rem min(1.25rem, 4vw);
  font-family: var(--ui);
  font-size: var(--text-lede);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  color: var(--white);
}
.outcome-rail li[data-judgement="apply"] h3 { background: var(--apply); }
.outcome-rail li[data-judgement="prepare"] h3 { background: var(--prepare); }
.outcome-rail li[data-judgement="ruleout"] h3 { background: var(--ruleout); }
@media (min-width: 900px) {
  .outcome-rail > li:first-child h3 { border-radius: var(--radius) 0 0 var(--radius); }
  .outcome-rail > li:last-child h3 { border-radius: 0 var(--radius) var(--radius) 0; }
}
.outcome-rail > li { padding-bottom: 1.75rem; }
@media (min-width: 900px) {
  .outcome-rail > li { padding-right: 2rem; padding-bottom: 0; }
  .outcome-rail > li:last-child { padding-right: 0; }
  .outcome-rail h3 { margin-right: -2rem; }
  .outcome-rail > li:last-child h3 { margin-right: 0; }
}
.outcome-rail p { margin-top: 1.375rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); max-width: 34ch; }
.outcome-rail .meta { display: block; margin-top: 0.625rem; line-height: 1.5; max-width: 34ch; }
.outcome-rail .rail-marks { display: flex; gap: 5px; margin-top: 1.125rem; }
.outcome-rail .rail-closed { display: flex; align-items: center; gap: 0.625rem; margin-top: 1.125rem; font-size: var(--text-micro); font-weight: 500; color: var(--body); }
.outcome-rail .rail-closed::before { content: ""; width: 1rem; height: 1rem; flex: none; background: var(--ruleout); }
.outcome-rail .rail-note { margin-top: 0.75rem; font-size: var(--text-micro); color: var(--muted); }

/* ---------- Chain (how a judgement is built) ---------- */
.chain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .chain { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.chain li { counter-increment: step; padding: 1rem 1.5rem 1.5rem 0; border-top: 1px solid var(--rule-strong); display: grid; gap: 0.375rem; align-content: start; }
.chain li::before { content: counter(step, decimal-leading-zero); font-family: var(--ui); font-size: var(--text-label); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.chain h3 { font-size: var(--text-body); font-family: var(--ui); font-weight: 600; letter-spacing: 0; }
.chain p { font-size: var(--text-micro); line-height: 1.5; color: var(--body); }

/* ---------- Audience split ---------- */
.audience { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .audience { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.audience > div { display: grid; gap: 0.75rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.audience p { color: var(--body); font-size: var(--text-small); }

/* ---------- Boundary list ---------- */
.boundary { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; max-width: 68ch; }
.boundary li { padding: 0.9375rem 0; border-top: 1px solid var(--rule); font-size: var(--text-small); line-height: 1.55; color: var(--body); }
.boundary li:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- Example journey ---------- */
.journey { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 4.5rem); }
.journey-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.journey-section > p { color: var(--body); font-size: var(--text-small); max-width: 62ch; }
.fact-list { display: grid; gap: 0; margin: 0; }
.fact-list div { display: flex; flex-wrap: wrap; gap: 0.15rem 2rem; padding-block: 0.75rem; border-bottom: 1px solid var(--rule); }
.fact-list dt { flex: 0 1 16rem; min-width: 0; font-size: var(--text-micro); color: var(--muted); }
.fact-list dd { flex: 1 1 min(24rem, 100%); min-width: 0; margin: 0; font-size: var(--text-small); color: var(--ink); }
.journey-pair { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .journey-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }

/* ---------- Adviser: portfolio rail and client rows ---------- */
.portfolio { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
@media (min-width: 1040px) { .portfolio { margin-top: 2.5rem; padding-top: 1.5rem; } }
.portfolio-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; margin-bottom: 1.25rem; max-width: none; }
.portfolio-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 520px;
}
.portfolio-rail li { min-width: 0; padding-right: 1.25rem; }
.portfolio-rail li + li { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.portfolio-rail li:last-child { padding-right: 0; }
.portfolio-rail li::before { content: ""; display: block; height: 4px; }
.portfolio-rail li[data-judgement="apply"]::before { background: var(--apply); }
.portfolio-rail li[data-judgement="prepare"]::before { background: var(--prepare); }
.portfolio-rail li[data-judgement="ruleout"]::before { background: var(--ruleout); }
.portfolio-rail .count { display: block; margin-top: 0.875rem; font-family: var(--display); font-size: 2.125rem; font-weight: 500; line-height: 1; color: var(--ink); }
.portfolio-rail .state { display: block; margin-top: 0.375rem; font-size: var(--text-label); font-weight: 600; }
.portfolio-rail li[data-judgement="apply"] .state { color: var(--apply); }
.portfolio-rail li[data-judgement="prepare"] .state { color: var(--prepare); }
.portfolio-rail li[data-judgement="ruleout"] .state { color: var(--ruleout); }

.client-rows { width: 100%; border-collapse: collapse; font-size: var(--text-small); min-width: 900px; }
.client-rows caption { text-align: left; padding-bottom: 1rem; }
.client-rows caption .meta { margin-left: 1rem; }
.client-rows th, .client-rows td { text-align: left; vertical-align: top; padding: 1.125rem 1.25rem 1.125rem 0; border-bottom: 1px solid var(--rule); }
.client-rows thead th { border-bottom: 1px solid var(--ink); font-size: var(--text-label); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.client-rows th[scope="row"] { font-weight: 600; color: var(--ink); }
.client-rows td { color: var(--body); }
.client-rows td.basis-cell { color: var(--body); font-size: var(--text-micro); line-height: 1.5; max-width: 22rem; }
.client-rows .micro-rail { margin-bottom: 0.5rem; }
.client-rows .judge { display: block; font-weight: 600; white-space: nowrap; }
.client-rows .judge[data-judgement="apply"] { color: var(--apply); }
.client-rows .judge[data-judgement="prepare"] { color: var(--prepare); }
.client-rows .judge[data-judgement="ruleout"] { color: var(--ruleout); }
.client-rows td.evidence { white-space: nowrap; }
.client-rows td.evidence .state-tag + .state-tag { margin-left: 0.875rem; }

/* ---------- Forms (lead capture / preview booking) ---------- */
.capture {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  max-width: 44rem;
}
.capture .chip { margin-bottom: 1rem; }
.capture h2 { font-size: var(--display-4); }
.capture .capture-intro { margin-top: 1rem; color: var(--body); font-size: var(--text-small); max-width: 60ch; }
.capture form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 500; font-size: var(--text-small); }
.field .hint { font-size: var(--text-micro); color: var(--muted); }
.field input, .field select {
  border-radius: var(--radius);
  min-height: 48px;
  padding: 0.75rem 0.9375rem;
  border: 1px solid var(--control-edge);
  background: var(--paper);
  font: var(--text-small) var(--ui);
  color: var(--ink);
  width: 100%;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.field input[aria-invalid="true"] { border-color: var(--ruleout); border-width: 2px; }
.field .error { font-size: var(--text-micro); color: var(--ruleout); font-weight: 600; }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.fieldset legend { font-weight: 500; font-size: var(--text-small); padding: 0; margin-bottom: 0.25rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.radio-row label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 32px; font-size: var(--text-small); }
.radio-row input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--accent); }  /* 24px: WCAG 2.2 target size */
.capture .truth-notes { display: grid; gap: 0.5rem; font-size: var(--text-micro); line-height: 1.55; color: var(--muted); padding-left: 0.875rem; border-left: 2px solid var(--rule-strong); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.needs-script { font-size: var(--text-micro); padding: 0.875rem 1rem; border-left: 2px solid var(--prepare); color: var(--blocker-ink); }
.form-status { font-size: var(--text-micro); line-height: 1.55; padding: 0.875rem 1rem; border-left: 2px solid var(--rule-strong); color: var(--body); }
.form-status[data-tone="pending"] { border-left-color: var(--prepare); }
.form-status[data-tone="error"] { border-left-color: var(--ruleout); }
.form-status[data-tone="ok"] { border-left-color: var(--apply); }

/* ---------- Page intro ---------- */
.page-intro { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.page-intro > * { min-width: 0; }
.page-intro .lede { font-size: var(--text-lede); line-height: 1.55; color: var(--body); max-width: 46ch; }
/* The adviser first viewport puts the proposition on the left and the counted
   book on the right. */
@media (min-width: 1040px) {
  .page-intro--adviser {
    grid-template-columns: minmax(0, 1fr) 520px;
    grid-template-areas:
      "eyebrow portfolio"
      "title   portfolio"
      "lede    portfolio"
      "cta     portfolio";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 4.5rem;
    row-gap: 1.25rem;
  }
  .page-intro--adviser > .label { grid-area: eyebrow; }
  .page-intro--adviser > h1 { grid-area: title; }
  .page-intro--adviser > .lede { grid-area: lede; }
  .page-intro--adviser > .cta-row { grid-area: cta; align-self: start; }
  .page-intro--adviser > .portfolio { grid-area: portfolio; margin-top: 0; align-self: end; }
}

/* ---------- Reduced motion & misc ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .site-nav a, .btn-link { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Canonical section architecture ----------
   The page alternates paper and ledger grounds so a long narrative reads as
   distinct movements rather than one repeated panel. Numbered eyebrows carry
   the section order without a decorative device. */
.section--ledger { background: var(--ledger-ground); }
.section-index {
  font: 500 var(--text-label)/1 var(--ui);
  letter-spacing: 0.08em;
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}
.section-head--wide p { max-width: 68ch; }
.section-lead { font-size: var(--text-lede); color: var(--body); max-width: var(--measure); }
.pair { display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Reusable evidence record ---------- */
.record {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}
.record caption { text-align: left; padding-bottom: 0.75rem; }
.record th, .record td {
  text-align: left;
  vertical-align: top;
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.record thead th {
  border-bottom: 1px solid var(--ink);
  font: 500 var(--text-label)/1.3 var(--ui);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.record th[scope="row"] { font-weight: 500; color: var(--ink); }
.record td.source, .record td.checked { color: var(--body); }

/* ---------- Readiness to application work ---------- */
.stages { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.stages > li { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: 0.6rem; }
.stages .label { color: var(--muted); }
.stages .requirement { font-weight: 600; color: var(--ink); }
.stages p { font-size: var(--text-small); color: var(--body); }

/* ---------- Method steps ---------- */
.steps { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); list-style: none; padding-left: 0; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.steps > li { border-top: 2px solid var(--ink); padding-top: 1rem; display: grid; gap: 0.5rem; }
.steps h3 { font-family: var(--display); font-size: var(--display-5); }
.steps p { font-size: var(--text-small); color: var(--body); }

/* ---------- Disclosure anatomy (trust) ---------- */
.disclosure {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  max-width: 34rem;
}
.disclosure div {
  /* Term beside value while both fit, term above value when they do not. A
     media query cannot do this: it reads the viewport, and the case that
     breaks here is a doubled text size at an unchanged viewport. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-small);
}
.disclosure dt { flex: 0 1 11rem; min-width: 0; color: var(--muted); }
.disclosure dd { flex: 1 1 min(16rem, 100%); min-width: 0; margin: 0; color: var(--ink); }

/* ---------- Compact FAQ ---------- */
.faq { display: grid; gap: 1.25rem; }
.faq > div { display: grid; gap: 0.35rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.faq dt { font-weight: 600; font-size: var(--text-small); }
.faq dd { margin: 0; color: var(--body); font-size: var(--text-small); max-width: var(--measure); }

/* ---------- Programme facts (fund-triggered page) ---------- */
.programme-facts {
  /* Hairline and whitespace, not a filled card: a second surface colour would
     read as card-grid depth, which the accepted system does not use. */
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.programme-facts .disclosure { border-top: 0; max-width: none; }
.programme-facts .disclosure div:last-child { border-bottom: 0; }
.criteria { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.criteria caption { text-align: left; padding-bottom: 0.75rem; }
.criteria th, .criteria td {
  text-align: left; vertical-align: top;
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.criteria thead th {
  border-bottom: 1px solid var(--ink);
  font: 500 var(--text-label)/1.3 var(--ui);
  letter-spacing: 0.04em; color: var(--muted);
}
.checklist { display: grid; gap: 0; border-top: 1px solid var(--rule); max-width: 46rem; list-style: none; padding-left: 0; }
.checklist li {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
  align-items: baseline; justify-content: space-between;
  padding: 0.75rem 0; border-bottom: 1px solid var(--rule);
  font-size: var(--text-small);
}

/* ---------- Selected client detail (adviser) ---------- */
.client-detail {
  /* Same as the programme panel: a rule and space, no second ground. */
  border: 1px solid var(--rule);
  /* The rem floor of the clamp doubles with the text size, so it is capped
     against the viewport as well. */
  padding: min(clamp(1.25rem, 2.5vw, 2rem), 8vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  min-width: 0;
  overflow-wrap: break-word;
}
.client-detail .verdict-word { margin: 0; }


/* ================================================================
   The Founder-locked homepage direction, 21 September 2026
   ================================================================ */

/* ---------- Raised panel ----------
   Product proof is shown as a window on the product rather than as flat page
   copy: white ground, hairline edge, 10px radius and a soft drop shadow, with
   a quiet bar naming what the panel holds. This is the one place the surface
   uses depth, and it is used only where a panel stands for the product. */
.panel {
  background: var(--white);
  border: 1px solid var(--panel-edge);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  min-width: 0;
}
.panel + .panel { margin-top: 2rem; }
.panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding: 0.75rem min(1.25rem, 5vw);
  border-bottom: 1px solid var(--hairline);
  background: var(--panel-bar);
}
.panel-bar .meta { color: var(--ink); font-weight: 600; }
.panel-body { padding: min(1.5rem, 6vw) min(1.5rem, 6vw) min(1.75rem, 6vw); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.panel-body--flush { padding-top: 0.5rem; }
.panel-body h3 { font-family: var(--display); font-size: var(--display-5); }
.panel .ledger-wrap { margin: 0; }
.panel .ledger caption,
.panel .record caption,
.panel .portfolio-rows caption { padding-bottom: 0.75rem; }

/* ---------- Statement band ----------
   A white ground and one large serif statement: the pause between movements. */
.section--statement {
  background: var(--white);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.section--statement h2 { font-size: var(--display-3); max-width: 17em; }
.section--statement .section-head { margin-bottom: 2.25rem; }
.section--statement .pair { gap: 2rem 4rem; max-width: 1120px; }
.section--statement .section-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }

/* ---------- Dark movement ----------
   The worked walk-through sits on a dark ground so the change of evidence and
   the judgement that does not move are read as one continuous scene. */
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h2,
.section--dark h3 { color: var(--on-dark); }
.section--dark h2 { font-size: var(--display-3); max-width: 19em; }
.section--dark .eyebrow { color: var(--accent-dk); }
.section--dark .section-head { gap: 1.125rem; margin-bottom: 3.5rem; }
.section--dark p { color: var(--on-dark); }
.section--dark .meta,
.section--dark .muted { color: var(--on-dark-muted); }
.section--dark .label { color: var(--on-dark-muted); }
/* The three beats of the walk-through: raised blocks on the dark ground. */
.section--dark .stages { gap: 1rem; }
@media (min-width: 900px) { .section--dark .stages { gap: 1.5rem; } }
.section--dark .stages > li {
  background: var(--dark-raised);
  border: 1px solid var(--dark-edge);
  border-top: 1px solid var(--dark-edge);
  border-radius: var(--panel-radius);
  padding: min(1.875rem, 7vw);
  gap: 1rem;
  align-content: start;
}
.section--dark .stages > li:nth-child(2) { border-color: var(--edge-dk); }
.section--dark .stages .label { letter-spacing: 0.06em; text-transform: uppercase; }
.section--dark .stages > li:nth-child(2) .label { color: var(--accent-dk); }
.section--dark .stages .judgement-rail--filled { margin-top: 0.25rem; }
.section--dark .stages .requirement,
.section--dark .stages .subject {
  font-family: var(--display);
  font-size: var(--display-5);
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-dark);
}
.section--dark .stages p:not(.label):not(.requirement):not(.subject) { font-size: var(--text-small); color: var(--on-dark); }
.section--dark .state-tag { justify-self: start; }
.section--dark .state-tag[data-state="supported"] { color: var(--apply-dk); }
.section--dark .state-tag[data-state="unknown"],
.section--dark .state-tag[data-state="stale"] { color: var(--prepare-dk); }
.section--dark .state-tag[data-state="conflict"] { color: var(--ruleout-dk); }
.section--dark .glyph[data-state="supported"] { color: var(--apply-dk); }
.section--dark .glyph[data-state="unknown"],
.section--dark .glyph[data-state="stale"] { color: var(--prepare-dk); }
.section--dark .glyph[data-state="conflict"] { color: var(--ruleout-dk); background: var(--ruleout-dk); }
.section--dark .glyph[data-state="conflict"] svg { color: var(--dark-raised); }
/* What the assessment keeps, and what it hands on. */
.pair--carried { margin-top: 1.5rem; gap: 2rem 3rem; }
@media (min-width: 900px) { .pair--carried { margin-top: 1.5rem; } }
.pair--carried > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; align-content: start; padding-top: 1.375rem; border-top: 1px solid var(--dark-rule); }
.pair--carried h3 { font-family: var(--ui); font-size: var(--text-lede); font-weight: 600; letter-spacing: 0; }
.section--dark .disclosure { border-top: 0; max-width: none; }
.section--dark .disclosure div { border-bottom-color: var(--dark-rule); font-size: var(--text-micro); }
.section--dark .disclosure dt { flex: 1 1 14rem; color: var(--on-dark); }
.section--dark .disclosure dd { flex: 0 1 auto; color: var(--on-dark-muted); }
.section--dark .pair--carried .requirement {
  font-family: var(--display);
  font-size: var(--display-5);
  font-weight: 500;
  line-height: 1.25;
}
.section--dark > .wrap > .capability { margin-top: 2.5rem; font-size: var(--text-micro); color: var(--on-dark-muted); max-width: 90ch; }

/* ---------- Adviser split ---------- */
.adviser-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 1040px) { .adviser-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; } }
.adviser-proposition { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.125rem; align-content: start; }
.adviser-proposition h2 { font-size: var(--display-4); }
.adviser-proposition .capability { font-size: 1.0625rem; color: var(--ink); }
.portfolio-rows { width: 100%; border-collapse: collapse; font-size: var(--text-small); min-width: 620px; }
.portfolio-rows caption { text-align: left; }
.portfolio-rows th, .portfolio-rows td { text-align: left; vertical-align: middle; padding: 0.8125rem 1rem 0.8125rem 0; border-bottom: 1px solid var(--hairline); }
.portfolio-rows thead th { border-bottom: 1px solid var(--ink); font: 500 var(--text-label)/1.3 var(--ui); color: var(--muted); }
.portfolio-rows th[scope="row"] { font-weight: 600; color: var(--ink); }
.portfolio-rows td { color: var(--body); }
.portfolio-rows tbody tr:last-child th, .portfolio-rows tbody tr:last-child td { border-bottom: 0; }
.portfolio-rows .micro-rail { margin-bottom: 0.375rem; }
.portfolio-rows .judge { display: block; font-weight: 600; white-space: nowrap; }
.portfolio-rows .judge[data-judgement="apply"] { color: var(--apply); }
.portfolio-rows .judge[data-judgement="prepare"] { color: var(--prepare); }
.portfolio-rows .judge[data-judgement="ruleout"] { color: var(--ruleout); }
.portfolio-rows td.basis-cell { font-size: var(--text-micro); line-height: 1.5; }

/* ---------- Trust split ----------
   What the product will not do, set large enough to be read as a commitment. */
.trust-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 1040px) { .trust-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; } }
.trust-split .eyebrow { margin-bottom: 1.5rem; }
.boundary[data-tone="limits"] { max-width: none; }
.boundary[data-tone="limits"] li {
  font-family: var(--display);
  font-size: var(--display-5);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 1.0625rem 0;
}
.boundary[data-tone="limits"] li:first-child { border-top-color: var(--ink); }
.trust-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; }
@media (min-width: 1040px) { .trust-aside { padding-top: 2.75rem; } }
.trust-aside .disclosure { border-top: 0; max-width: none; }
.trust-aside .disclosure div:last-child { border-bottom: 0; }
.trust-aside .capability { font-size: var(--text-small); color: var(--body); }

/* ---------- Access band ---------- */
.section--band { background: var(--band); padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (min-width: 1040px) { .band { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 3rem; } }
.band h2 { font-size: var(--display-4); }
.band p { color: var(--body); font-size: var(--text-small); }
@media (min-width: 1040px) { .band .cta-row { justify-content: flex-end; } }

/* ---------- Closing movement ---------- */
.section--finale { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section--finale h2 { font-size: var(--display-2); max-width: 17ch; letter-spacing: -0.03em; }
.section--finale .section-head { margin-bottom: 2.25rem; }
.section--finale .faq { margin-top: clamp(3rem, 6vw, 5.5rem); padding-top: 2rem; border-top: 1px solid var(--ink); }
@media (min-width: 900px) { .section--finale .faq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; } }
.section--finale .faq > div { border-top: 0; padding-top: 0; }

/* ---------- Holding page (website/holding/, option A) ----------
   Scoped to body.holding so nothing here reaches the full site. One statement,
   one sentence and one email action on the paper ground; the footer carries the
   company disclosure. Approved visually by the Founder on 21 October 2026. */
body.holding { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--paper); }
.holding-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(24px, 4vw, 48px); box-sizing: border-box; }
.holding-header { padding-block: 1.25rem 0; }
.holding-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; }
.holding .wordmark { font-size: 1.5rem; }
.holding .holding-status { display: block; color: var(--muted); font-size: var(--text-small); line-height: 1.4; }
.holding .holding-status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.6em; vertical-align: 0.15em; border-radius: 50%; background: var(--accent); }
.holding .holding-status .site-nav, .holding .holding-status .site-nav a, .holding .holding-status .status-line { display: inline; }
.holding .holding-status .site-nav a { font-size: inherit; font-weight: 400; color: var(--muted); padding: 0; text-decoration: none; }
.holding .holding-status .site-nav a:hover { color: var(--ink); text-decoration: underline; }
.holding .holding-status .status-line { margin: 0; font-size: inherit; line-height: inherit; max-width: none; }
.holding .holding-status .status-line::before { content: "· "; }
.holding main { flex: 1; display: flex; align-items: center; padding-block: clamp(2.5rem, 7vh, 4rem); }
.holding .eyebrow { margin: 0 0 1.75rem; color: var(--muted); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.holding .hero-title { margin: 0; max-width: none; font-family: var(--display); font-weight: 400; font-size: min(clamp(3.625rem, 1.2rem + 7.9vw, 8.25rem), calc(12vw + 0.9rem)); line-height: 1.04; overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: -0.035em; color: var(--ink); }
.holding .holding-line { display: block; }
.holding-body { margin-top: clamp(1.75rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; max-width: 34rem; }
.holding .lede { margin: 0; max-width: none; color: var(--body); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem); line-height: 1.5; text-wrap: pretty; }
.holding .cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; margin: 0; }
.holding .btn { min-height: 56px; padding: 0.875rem 1.875rem; border-color: var(--ink); background: var(--ink); color: var(--paper); border-radius: 2px; font-weight: 500; font-size: 1rem; line-height: 1.3; text-align: center; }
.holding .btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #ffffff; }
.holding .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.holding .cta-row .status-line { margin: 0; max-width: none; font-size: var(--text-small); line-height: 1.5; }
/* The fallback inbox link sits inside the sentence, as in the approved design:
   ink, underlined, no button box. Inline text links are exempt from the target
   size minimum; the focus ring matches the button's. */
.holding .cta-row .status-line .btn-link { display: inline; min-height: 0; gap: 0; font-size: inherit; font-weight: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.holding .cta-row .status-line .btn-link:hover { color: var(--accent-dark); }
.holding .cta-row .status-line .btn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.holding .site-footer { margin: 0; padding: 0 0 2rem; border: 0; background: transparent; }
.holding .site-footer .holding-wrap { display: block; }
.holding .site-footer .status-line { margin: 0; max-width: none; padding-top: 1.125rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; line-height: 1.6; }
@media (min-width: 720px) {
  .holding .holding-line { display: inline; }
  .holding .holding-line:last-child { display: block; }
}
@media (max-width: 719px) {
  .holding .holding-bar { flex-direction: column; align-items: flex-start; }
  .holding .btn { align-self: stretch; }
  .holding .cta-row { align-items: stretch; }
}