/* ==========================================================================
   Semantic Integrity — page stylesheet
   semiosphere.co.uk/semantic-integrity

   PART 1 (TOKENS) is copied VERBATIM from the Semantic Integrity design
   system, which lives in the sibling repository:
       ../semantic-risk-audit/design/tokens/{colors,typography,spacing,elevation}.css
   Do not hand-edit the token block. Change it at source and regenerate —
   see README.md in this directory for the command.

   PART 2 (PAGE) is specific to this page. It composes the same patterns as
   that system's landing UI kit (design/ui_kits/landing/index.html) with eight
   deliberate departures. They are listed, with their reasons, under "Where the
   design comes from" in README.md in this directory, and each is also recorded
   at the point it occurs. The list lives in the README only, so that the two
   cannot disagree.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ---- tokens/colors.css (verbatim) ---- */
/* ==========================================================================
   Semantic Integrity · Color tokens
   A warm, editorial palette: ink navy on parchment, a single teal accent,
   and a calm severity system (Low → Critical). Severity carries the only
   strong colour in the interface; everything else is ink, slate & parchment.
   ========================================================================== */

:root {
  /* ---- Base scale: parchment neutrals (warm) ---------------------------- */
  --paper:            #F6F2E9;  /* page background */
  --paper-raised:     #FCFAF4;  /* cards, panels */
  --paper-sunk:       #F0EADD;  /* insets, hover fills, table stripes */
  --paper-white:      #FFFFFF;  /* crisp surfaces (finding cards, inputs) */

  /* ---- Ink scale: navy ---------------------------------------------------*/
  --ink:              #16233A;  /* primary ink — headings, dark surfaces */
  --ink-2:            #1E2E48;  /* raised dark surface */
  --ink-3:            #2A3A55;  /* dark surface hover */
  --slate:            #3A4A63;  /* strong secondary */

  /* ---- Text tiers (on paper) --------------------------------------------- */
  --text-strong:      #16233A;
  --text-body:        #3A3833;  /* warm near-black for running text */
  --text-secondary:   #57534B;
  --text-muted:       #6D6962;  /* lightest tier that clears AA: 4.89:1 on paper */
  /* --text-faint retired upstream (SRA PR #79, 2026-09-20): at 2.35:1 on paper
     it failed AA even for large text, and there is deliberately no tier below
     --text-muted. Removed here rather than kept as a trap. Nothing used it. */

  /* ---- Text on ink surfaces ---------------------------------------------- */
  --on-ink:           #F6F2E9;
  --on-ink-secondary: #C6D0DE;
  --on-ink-muted:     #9FB0C6;

  /* ---- Lines & rules ----------------------------------------------------- */
  --rule:             #DED6C4;  /* default border / hairline */
  --rule-strong:      #CFC4AC;
  --rule-soft:        #EAE3D5;
  --on-ink-line:      rgba(246, 242, 233, 0.14);
  --on-ink-line-2:    rgba(246, 242, 233, 0.28);

  /* Interactive boundaries. The rules above are decorative dividers, which
     WCAG SC 1.4.11 does not reach; these two are for borders that identify a
     control, which it does. Measured 2026-09-20:
       --rule-interactive         3.38:1 on --paper, 3.61 raised, 3.15 sunk
       --on-ink-line-interactive  3.06:1 on --ink-2, 3.53 on --ink         */
  --rule-interactive: #92825B;
  --on-ink-line-interactive: rgba(246, 242, 233, 0.38);

  /* ---- Accent — petrol teal (used sparingly: rules, marks, primary CTA) --
     A cool, scholarly accent — deliberately NOT gold/brass. Distinct from
     every severity colour, so accent never reads as a status. --------------*/
  --accent:           #2F6E63;
  --accent-deep:      #234F48;
  --accent-bright:    #79BEB0;  /* on ink surfaces */
  --accent-tint:      #E3EDEA;  /* faint fill */

  /* ---- Focus ------------------------------------------------------------- */
  --focus-ring:       rgba(47, 110, 99, 0.40);

  /* ======================================================================
     SEVERITY BANDS — the interface's signal colours.
     Each has a solid (dot/marker), a fill (chip bg) and a line (chip border),
     plus a foreground for text on the fill. Calm, muted, conventional.
     ====================================================================== */
  --sev-low:          #4B7B6B;
  --sev-low-fill:     #E4EDE8;
  --sev-low-line:     #C4D8CC;
  --sev-low-fg:       #33604F;

  --sev-moderate:     #C8971F;
  --sev-moderate-fill:#F6EBD2;
  --sev-moderate-line:#E6D2A0;
  --sev-moderate-fg:  #8A6412;

  --sev-high:         #C4611F;
  --sev-high-fill:    #F5DEC9;
  --sev-high-line:    #E7BE97;
  --sev-high-fg:      #9B4A18;

  --sev-critical:     #A32E2E;
  --sev-critical-fill:#F2D2D0;
  --sev-critical-line:#E0A6A3;
  --sev-critical-fg:  #8F2A2A;

  /* ---- Semantic status (non-severity UI feedback) ------------------------ */
  /* Aliased, not duplicated. Each was byte-identical to the token it now
     points at, so the two could drift apart silently. The status names are
     kept because a UI feedback state is not a finding's severity band. */
  --positive:         var(--sev-low);
  --positive-fill:    var(--sev-low-fill);
  --caution:          var(--sev-moderate);
  --danger:           var(--sev-critical);
  --info:             var(--slate);

  /* ---- Semantic aliases -------------------------------------------------- */
  --surface-page:     var(--paper);
  --surface-card:     var(--paper-raised);
  --surface-inset:    var(--paper-sunk);
  --surface-dark:     var(--ink);
  --border-default:   var(--rule);
  --border-subtle:    var(--rule-soft);
  --border-interactive: var(--rule-interactive);
  --link:             var(--accent-deep);
}

/* ---- tokens/typography.css (verbatim) ---- */
/* ==========================================================================
   Semantic Integrity · Typography tokens
   Editorial contrast: Spectral (display serif) over IBM Plex Sans (UI/body),
   with IBM Plex Mono reserved for evidence — codes, scores, captured text.
   ========================================================================== */

:root {
  /* ---- Families ---------------------------------------------------------- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Type scale (px) --------------------------------------------------- */
  --text-display:   44px;  /* hero / cover — Spectral 600 */
  --text-h1:        34px;
  --text-h2:        26px;
  --text-h3:        20px;
  --text-title:     17px;  /* card & section titles */
  --text-lead:      18px;  /* standfirst / lead paragraph */
  /* DEPARTURE. Upstream this is --text-body, which collides with the COLOUR
     --text-body above: same :root, same name, and the length is declared
     second, so it wins. `color: var(--text-body)` then becomes invalid at
     computed-value time and running text falls back to the initial value,
     pure black, instead of #3A3833. Renamed here because the length is the
     one that should move — --text-body reads as a colour everywhere else. */
  --text-size-body: 15px;
  --text-small:     13px;
  --text-caption:   12px;
  --text-micro:     11px;  /* mono eyebrows / labels */

  /* ---- Line heights ------------------------------------------------------ */
  --leading-tight:  1.1;
  --leading-snug:   1.28;
  --leading-body:   1.6;
  --leading-loose:  1.7;

  /* ---- Weights ----------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---- Letter spacing ---------------------------------------------------- */
  --tracking-display: -0.01em;  /* tighten large serif */
  --tracking-normal:  0;
  --tracking-label:   0.2em;    /* mono eyebrows, uppercased */
  --tracking-caps:    0.14em;

  /* ---- Semantic roles ---------------------------------------------------- */
  --role-eyebrow-family: var(--font-mono);
  --role-eyebrow-size:   var(--text-micro);
  --role-eyebrow-track:  var(--tracking-label);

  --role-heading-family: var(--font-display);
  --role-body-family:    var(--font-sans);
  --role-evidence-family:var(--font-mono);
}

/* ---- tokens/spacing.css (verbatim) ---- */
/* ==========================================================================
   Semantic Integrity · Spacing & radii tokens
   4px base grid. Editorial layouts breathe — prefer generous vertical rhythm.
   Direction (2026-07): more whitespace, fewer rules. Let air — not hairlines —
   do the separating; surfaces stay quiet and uncrowded.
   ========================================================================== */

:root {
  /* ---- Space scale (4px base) -------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---- Radii — softly rounded (2026-07: brand moved off square corners for a
     more modern, approachable surface). Circles (dots, avatars) still use an
     explicit 50% in place. */
  --radius-xs:  1px;
  --radius-sm:  2px;
  --radius:     3px;  /* default: cards, inputs, buttons */
  --radius-lg:  4px;  /* large panels / hero surfaces */
  --radius-pill:999px; /* chips, counts, badges */

  /* ---- Layout ------------------------------------------------------------ */
  --measure:        68ch;   /* optimal reading width for body copy */
  --measure-narrow: 46ch;
  --container:      1120px; /* max content width */
  --container-wide: 1320px;
  --gutter:         var(--space-10);  /* was space-8 — roomier page gutters */
  --hairline:       1px;    /* rules are used sparingly; air carries most separation */
}

/* ---- tokens/elevation.css (verbatim) ---- */
/* ==========================================================================
   Semantic Integrity · Elevation & motion tokens
   Shadows are soft, warm, and low.
   Revised 2026-07: shadow now carries the separation that borders used to.
   Cards/panels/tiles rest on --shadow-sm with NO border; interactive ones lift to
   --shadow-md on hover; dialogs and hero surfaces go higher. Hairline rules are
   reserved for genuine structural divisions — air does most of the separating.
   ========================================================================== */

:root {
  /* ---- Shadows (warm navy-tinted, never grey/blue) ----------------------- */
  --shadow-sm:  0 1px 2px rgba(22, 35, 58, 0.06);
  --shadow:     0 2px 8px -2px rgba(22, 35, 58, 0.10);
  --shadow-md:  0 8px 24px -8px rgba(22, 35, 58, 0.16);
  --shadow-lg:  0 24px 60px -30px rgba(22, 35, 58, 0.35);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* calm, decisive */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur:           180ms;
  --dur-slow:      280ms;

  /* Interaction convention:
     hover  → darken/lift via background token swap (no scale on links)
     press  → subtle 1px translateY, no bounce
     No decorative animation; transitions are for state clarity only. */
}

/* ==========================================================================
   PART 2 — PAGE

   The page is built from one grammar and three grounds. The grammar: a
   section opens with a labelled rule and a display heading, and its content
   sits on a text measure with the apparatus — labels, margin notes, numbers —
   ruled off beside it. The grounds alternate paper / sunk so that consecutive
   sections read as separate arguments, and --ink is reserved for three beats:
   the first screen, the white paper, and the enquiry.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-size-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
figure { margin: 0; }
p { margin: 0; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 16px; font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* The gutter is set on the two axes it means: a padding shorthand here also
   writes padding-top and padding-bottom of zero, and at the breakpoints this
   rule falls after .section and wins on equal specificity. */
.container {
  width: 100%; max-width: var(--container-wide); margin: 0 auto;
  padding-left: var(--space-16); padding-right: var(--space-16);
}

/* ---- section furniture ---------------------------------------------------
   Every section opens the same way and carries the same vertical rhythm, so
   the reader can tell where one argument ends and the next begins. */
.section { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.band { background: var(--paper-sunk); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.sec-tag { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); }
.sec-tag .lbl {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-deep); font-weight: 600;
}
.sec-tag .ln { flex: 1; height: 1px; background: var(--rule-strong); }
.sec-tag.on-ink .lbl { color: var(--accent-bright); }
.sec-tag.on-ink .ln { background: var(--on-ink-line-2); }

h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(28px, 3.1vw, 40px); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--text-strong); margin: 0; max-width: 24ch;
}
.lede { font-size: 17px; line-height: 1.65; color: var(--text-secondary); margin: var(--space-5) 0 0; max-width: 64ch; }
.lede b { color: var(--text-strong); }

.eyebrow {
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-deep);
  margin: 0 0 var(--space-4);
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 16px 24px; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn-ghost { color: var(--text-strong); border-color: var(--border-interactive); background: transparent; }
.btn-ghost:hover { background: var(--paper-sunk); border-color: var(--accent); color: var(--accent-deep); }

/* ================= masthead ================= */
.masthead {
  border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20;
  background: rgba(246, 242, 233, 0.92); backdrop-filter: saturate(120%) blur(8px);
}
.masthead .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 64px; }
.brand { display: flex; align-items: center; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.wm { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.005em; color: var(--text-strong); line-height: 1.05; }
.by { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em; color: var(--text-secondary); line-height: 1.2; }
.brand:hover .by { color: var(--accent-deep); }
.nav-links { display: flex; align-items: center; gap: var(--space-8); }
.nav-links a { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--text-secondary); transition: color var(--dur); }
.nav-links a:hover { color: var(--text-strong); }
.nav-links a.nav-cta {
  font-weight: 600; color: #fff; background: var(--accent);
  padding: 12px 16px; border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.nav-links a.nav-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ================= 1. the first screen =================
   Full-bleed ink. The page's one loud moment: a display line at the top of
   the type scale over a teal wash off the right shoulder. */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-ink);
  border-bottom: 1px solid var(--ink-3);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 75% at 82% 28%, rgba(121, 190, 176, 0.20), transparent 70%),
    radial-gradient(45% 60% at 8% 95%, rgba(47, 110, 99, 0.18), transparent 70%);
  pointer-events: none;
}
.hero .container {
  position: relative; z-index: 1;
  padding-top: clamp(80px, 11vh, 132px); padding-bottom: clamp(80px, 11vh, 132px);
}
.hero .eyebrow { color: var(--accent-bright); margin-bottom: var(--space-6); }
h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(42px, 6.6vw, 88px);
  line-height: 1.04; letter-spacing: -0.03em; color: var(--on-ink);
  margin: 0; max-width: 15ch;
}
h1 .mk { color: var(--accent-bright); font-style: italic; }
.standfirst {
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--on-ink-secondary);
  max-width: 58ch; margin: var(--space-8) 0 0;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-10); }
.hero .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.hero .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink); }
.hero .btn-ghost { color: var(--on-ink); border-color: var(--on-ink-line-interactive); }
.hero .btn-ghost:hover { background: var(--ink-3); border-color: var(--accent-bright); color: var(--accent-bright); }

/* ================= 2. the wager ================= */
.wager { background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.wager .container { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.wager-line {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--text-strong); max-width: 34ch; margin: 0;
}
.wager-line .mk { color: var(--accent-deep); font-style: italic; }

/* ================= 3. the problem ================= */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin-top: var(--space-6); }
.two-col p { font-size: 16px; line-height: 1.7; color: var(--text-body); max-width: 56ch; }

/* The four assurance layers, after the explainer deck: a tag that says
   whether the layer is owned, the layer, its owner, and the question it
   answers. The fourth is marked, and carries the page's only accent fill. */
.layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
.layer {
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: var(--space-6);
  display: flex; flex-direction: column;
}
.lay-tag {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.layer h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: var(--text-strong); margin: 0; }
.lay-owner { font-size: 13px; line-height: 1.45; color: var(--accent-deep); font-weight: 600; margin-top: var(--space-1); }
.lay-d { font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin-top: var(--space-4); }
.layer.on { background: var(--ink); border-color: var(--ink); }
.layer.on .lay-tag { color: var(--accent-bright); border-bottom-color: var(--on-ink-line-2); }
.layer.on h3 { color: var(--on-ink); }
.layer.on .lay-owner { color: var(--accent-bright); }
.layer.on .lay-d { color: var(--on-ink-secondary); }

/* ================= 4. what it looks like ================= */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
.case {
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-8); display: flex; flex-direction: column;
}
.case-no {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em;
  color: var(--accent-deep); margin-bottom: var(--space-3);
}
.case h3 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.015em; color: var(--text-strong); margin: 0 0 var(--space-4); }
.case-said {
  font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--text-strong);
  padding-left: var(--space-5); border-left: 2px solid var(--accent);
}
.case-what { font-size: 15px; line-height: 1.65; color: var(--text-body); margin-top: var(--space-5); }
.case-what em { font-style: italic; color: var(--text-strong); }
.case-then {
  margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--rule);
  font-size: 14.5px; line-height: 1.55; color: var(--text-strong);
}
.case-then span {
  display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.case-then a { border-bottom: 1px solid var(--rule-strong); }
.case-then a:hover { border-bottom-color: var(--accent); }
.case-then cite { display: block; font-style: normal; font-size: 13px; color: var(--text-secondary); margin-top: var(--space-1); }

/* ================= 5. the framework ================= */
.fw {
  display: grid; grid-template-columns: 280px 1fr 300px; gap: var(--space-8);
  margin-top: var(--space-12); align-items: start;
}
.fw-col { min-width: 0; }
.fw-lab {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent-deep);
  padding-bottom: var(--space-3); margin-bottom: var(--space-5); border-bottom: 1px solid var(--rule-strong);
}
.fw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.fw-list li { font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.fw-list b { display: block; color: var(--text-strong); }
.fw-mid { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-6); }
.lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.lens {
  background: var(--paper); border: 1px solid var(--rule-soft); border-radius: var(--radius-sm);
  padding: var(--space-4); display: flex; flex-direction: column; gap: 2px;
}
.ln-no { font-family: var(--font-mono); font-size: 12px; color: var(--accent-deep); }
.ln-name { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); line-height: 1.2; }
.ln-q { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-top: var(--space-1); }
.fw-mech { margin-top: var(--space-6); }
.fw-mech .fw-lab { margin-bottom: var(--space-4); }
.fw-mech p { font-size: 14.5px; line-height: 1.65; color: var(--text-body); }
.risks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.risks li { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-3) var(--space-2); align-items: baseline; }
.rk { font-family: var(--font-mono); font-size: 13px; color: var(--accent-deep); }
.rn { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.rg { grid-column: 2; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--text-secondary); }
.fw-score { font-size: 14px; line-height: 1.6; color: var(--text-body); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.fw-score b { color: var(--text-strong); }

/* the worked example, in the apparatus grammar: a captured line on the
   measure, the reading in the margin beside it */
.excerpt { margin-top: var(--space-16); }
.excerpt-main { align-items: start; }
/* The evidence pair: what the system said, against what it was held to. The
   stacked version spent 400px saying the same thing. */
.spec-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.excerpt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); }
.excerpt-head .cap { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.excerpt-head .id { font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); }
.excerpt-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-12);
  border-top: 2px solid var(--ink); padding-top: var(--space-8);
}
.excerpt-col { min-width: 0; }
.quote {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.5; color: var(--text-strong);
  background: var(--paper-white); border: 1px solid var(--rule-soft); padding: var(--space-6); margin: 0;
}
.exc-mark {
  background: rgba(121, 190, 176, 0.30);
  box-shadow: 0.18em 0 0 rgba(121, 190, 176, 0.30), -0.18em 0 0 rgba(121, 190, 176, 0.30);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.excerpt-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.6; color: var(--text-secondary); }

/* The specimen reads in four numbered moves, because that is the order an
   audit finding is written in: what was said, what it was held against, what
   diverged, what to do about it. */
.spec-auth + .spec-block { margin-top: var(--space-8); }
.spec-lab {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-deep);
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
}
.spec-auth { font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
.spec-auth b, .spec-why b { color: var(--text-strong); }
.spec-why { font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
.quote-src { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: var(--space-2) 0 0; }
.quote-src a { border-bottom: 1px solid var(--rule-strong); }
.quote-src a:hover { border-bottom-color: var(--accent); }

/* The score, as the report carries it: four anchored factors, the arithmetic
   shown, and the band it maps to. The severity ramp is the interface's only
   strong colour, and this is what it is for. */
.score-strip {
  display: grid; grid-template-columns: 90px 1fr auto; gap: var(--space-8);
  align-items: start; margin-top: var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid var(--rule-strong);
}
.ss-lab { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); padding-top: 2px; }
.ss-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin: 0; }
.ss-facts .fact { border-left: 2px solid var(--rule-strong); padding-left: var(--space-4); }
.ss-facts dt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-strong);
}
.ss-facts .fval { font-family: var(--font-mono); font-size: 17px; color: var(--accent-deep); }
.ss-facts dd { margin: var(--space-1) 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.ss-band { display: grid; justify-items: end; gap: var(--space-2); text-align: right; }
.band-chip {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.band-chip.crit { background: var(--sev-critical-fill); border: 1px solid var(--sev-critical-line); color: var(--sev-critical-fg); }
.band-calc { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }
.band-scale { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); max-width: 34ch; }
.marg-note { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.marg-note:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.marg-lab { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; margin-bottom: var(--space-2); }
.marg-val { font-size: 15px; line-height: 1.4; color: var(--text-strong); font-weight: 600; }
.marg-val.sub { font-weight: 400; color: var(--text-secondary); font-size: 13px; margin-top: var(--space-1); }

/* ================= 6. the method, as a stepper ================= */
.stepper {
  list-style: none; margin: var(--space-12) 0 0; padding: 0;
  display: grid; grid-auto-rows: 1fr; row-gap: var(--space-10);
}
.stp { display: grid; grid-template-columns: 56px minmax(0, 640px); gap: var(--space-8); align-items: start; position: relative; }
.stp::before {
  content: ''; position: absolute; left: 27px; top: 64px; width: 2px;
  bottom: calc(-1 * var(--space-10) - 8px);
  background: var(--rule-strong);
}
.stp:last-child::before { display: none; }
.stp-no {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 22px; position: relative; z-index: 1;
}
.stp-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--text-strong); margin: var(--space-3) 0 var(--space-2); }
.stp-body p { font-size: 15px; line-height: 1.65; color: var(--text-body); }

/* what the sequence produces, given the weight the sequence earns */
.deliver {
  margin-top: var(--space-12); background: var(--ink); color: var(--on-ink);
  border-radius: var(--radius-lg); padding: var(--space-12);
  display: grid; grid-template-columns: 220px 1fr; gap: var(--space-12);
}
.dl-lab { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); }
.dl-body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.015em; color: var(--on-ink); margin: 0; max-width: 30ch; }
.dl-body ul { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-10); }
.dl-body li { position: relative; padding-left: var(--space-5); font-size: 14.5px; line-height: 1.55; color: var(--on-ink-secondary); }
.dl-body li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.dl-body b { color: var(--on-ink); font-weight: 600; }

/* ================= 7. what you get out of it ================= */
.out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); margin-top: var(--space-12); }
.out { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--space-8); border-top: 3px solid var(--accent); }
.out h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--text-strong); margin: 0 0 var(--space-4); }
.out p { font-size: 15px; line-height: 1.65; color: var(--text-body); }

/* ================= 8. the white paper ================= */
.paper { background: var(--ink); color: var(--on-ink); }
.paper h2 { color: var(--on-ink); }
.paper-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-16); align-items: start; }
.paper-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-xs); border: 1px solid var(--on-ink-line-2); }
.colophon { margin-top: var(--space-8); }
.colophon .marg-note { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.colophon .marg-lab { color: var(--accent-bright); }
.colophon .marg-val.sub { color: var(--on-ink-secondary); }
.paper-main .plead { font-size: 17px; line-height: 1.65; color: var(--on-ink-secondary); margin: var(--space-5) 0 0; max-width: 60ch; }
.plist { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-8); }
.plist li { position: relative; padding-left: var(--space-5); font-size: 14.5px; line-height: 1.55; color: var(--on-ink-secondary); }
.plist li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }
.paper-form { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--on-ink-line); max-width: 560px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pf-field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.pf-field label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-muted); font-weight: 600; }
.pf-field .req { text-transform: none; letter-spacing: 0.02em; color: var(--accent-bright); font-weight: 400; }
.pf-field input {
  font-family: var(--font-sans); font-size: 15px; color: var(--on-ink);
  background: var(--ink-2); border: 1px solid var(--on-ink-line-interactive);
  border-radius: var(--radius-sm); padding: 12px 16px; outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.pf-field input:focus { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(121,190,176,0.25); }
.paper-form .btn-primary { margin-top: var(--space-2); background: var(--accent); border-color: var(--accent); color: #fff; }
.paper-form .btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink); }
.pf-note { font-size: 12.5px; line-height: 1.6; color: var(--on-ink-muted); margin-top: var(--space-4); max-width: 58ch; }
.pf-note a { color: var(--accent-bright); border-bottom: 1px solid var(--on-ink-line-2); }

/* ================= 9. what we offer ================= */
.eng { background: var(--paper-sunk); border-top: 1px solid var(--rule); }
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); align-items: stretch; }
.prod {
  background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--space-8); display: flex; flex-direction: column;
}
.prod.feature { border-color: var(--accent); border-top: 3px solid var(--accent); }
/* The third rung is specified but not built. It stays on the page because the
   ladder is the argument, and it recedes because it cannot be bought: no
   accent, no price, no call to action. Muting stops at --text-secondary,
   which clears AA — a product that is not for sale still has to be read. */
.prod.soon { background: transparent; border-style: dashed; }
.prod.soon .step-of { color: var(--text-secondary); }
.prod.soon .oname, .prod.soon .oprice b { color: var(--text-secondary); }
.prod.soon .oq { color: var(--text-secondary); font-style: italic; }
.prod.soon li::before { background: var(--rule-strong); }
.prod.soon li b { color: var(--text-secondary); }
.soon-flag {
  display: block; text-align: center; padding: 16px 24px;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary);
}
.step-of { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; }
.oname { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; color: var(--text-strong); margin: var(--space-3) 0 0; }
.oq { font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--accent-deep); margin: var(--space-3) 0 0; }
.oprice { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.oprice b { display: block; font-family: var(--font-display); font-size: 25px; font-weight: 600; color: var(--text-strong); }
.oprice span { display: block; font-size: 13px; color: var(--text-secondary); margin-top: var(--space-1); }
.oprice .ofound { margin-top: var(--space-2); }
.oprice .ofound strong { color: var(--text-strong); font-weight: 600; }
.olead { font-size: 14.5px; line-height: 1.6; color: var(--text-body); margin: var(--space-5) 0 0; }
.olead b { color: var(--text-strong); }
.prod ul { list-style: none; padding: 0; margin: var(--space-5) 0 var(--space-6); display: grid; gap: var(--space-3); }
.prod li { position: relative; padding-left: var(--space-5); font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.prod li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.prod li b { color: var(--text-strong); font-weight: 600; }
.prod-note { margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--rule-soft); font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.prod-note b { color: var(--text-strong); }
.octa { padding-top: var(--space-6); }
/* A card with no closing note still sends its call to action to the foot. */
.prod ul + .octa { margin-top: auto; }
.octa .btn { width: 100%; }

.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-10); margin-top: var(--space-16); border-top: 1px solid var(--rule-strong); padding-top: var(--space-10); }
.term h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text-strong); margin: 0 0 var(--space-3); }
.term p { font-size: 14px; line-height: 1.6; color: var(--text-body); }

/* ================= 10. enquiries ================= */
.contact-sec { background: var(--ink); color: var(--on-ink); }
.contact-sec .container { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 600px) 300px; gap: var(--space-16); align-items: start; }
.contact-col { min-width: 0; }
.contact-sec .eyebrow { color: var(--accent-bright); }
.contact-sec h2 { color: var(--on-ink); max-width: 20ch; text-wrap: balance; }
.contact-sec p { font-size: 16px; line-height: 1.7; color: var(--on-ink-secondary); margin: var(--space-5) 0 0; max-width: 60ch; }
.contact-sec .btn-mail {
  display: inline-flex; margin-top: var(--space-8); background: var(--accent); border-color: var(--accent);
  color: #fff; font-size: 16px; padding: 16px 24px;
}
.contact-sec .btn-mail:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--ink); }
.contact-apparatus { padding-top: var(--space-2); }
.contact-apparatus .marg-note { border-bottom-color: var(--on-ink-line-2); }
.contact-apparatus .marg-lab { color: var(--accent-bright); }
.contact-apparatus .marg-val { color: var(--on-ink); }
.contact-apparatus .marg-val.sub { color: var(--on-ink-secondary); }

/* ================= footer ================= */
.site-foot { padding-top: var(--space-16); padding-bottom: var(--space-20); }
.foot { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-16); border-top: 1px solid var(--rule-strong); padding-top: var(--space-10); }
.foot-col { min-width: 0; }
.foot .wm { font-size: 24px; }
.foot .note { font-size: 13px; color: var(--text-secondary); max-width: 62ch; line-height: 1.7; margin-top: var(--space-4); }
.foot-apparatus a { color: var(--accent-deep); border-bottom: 1px solid var(--rule-strong); }
.foot-apparatus a:hover { border-bottom-color: var(--accent); }

/* ================= thanks + prose pages ================= */
.thanks { background: var(--ink); color: var(--on-ink); }
.thanks .container { padding-top: var(--space-20); padding-bottom: var(--space-24); }
.thanks .paper-main h1 {
  font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--on-ink); margin: 0; max-width: 20ch;
}
.thanks .pf-note { margin-top: var(--space-5); }
.tafter { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--on-ink-line); font-size: 14.5px; line-height: 1.7; color: var(--on-ink-secondary); max-width: 62ch; }
.tafter a { color: var(--accent-bright); border-bottom: 1px solid var(--on-ink-line-2); }

.prose-page .container { padding-top: var(--space-20); padding-bottom: var(--space-24); max-width: 860px; }
.prose-h1 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); margin: 0; }
.prose-lede { font-size: 17px; line-height: 1.7; color: var(--text-secondary); margin: var(--space-5) 0 0; max-width: 64ch; }
.prose-page h2 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--text-strong); margin: var(--space-10) 0 var(--space-3); max-width: none; }
.prose-page p { font-size: 15.5px; line-height: 1.75; color: var(--text-body); max-width: 68ch; }
.prose-page p + p { margin-top: var(--space-3); }
.prose-page p b { color: var(--text-strong); }
.prose-page a { color: var(--accent-deep); border-bottom: 1px solid var(--rule-strong); }
.prose-page a:hover { border-bottom-color: var(--accent); }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .container { padding-left: var(--space-12); padding-right: var(--space-12); }
  .fw { grid-template-columns: 1fr; gap: var(--space-10); }
  .fw-in .fw-list { grid-template-columns: repeat(3, 1fr); display: grid; }
  .risks { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .layers { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
  .deliver { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-10); }
}

@media (max-width: 980px) {
  .section { padding-top: var(--space-20); padding-bottom: var(--space-20); }
  .two-col { grid-template-columns: 1fr; gap: var(--space-6); }
  .case-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .out-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .prod-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .paper-grid { grid-template-columns: 200px 1fr; gap: var(--space-10); }
  .excerpt-main { grid-template-columns: 1fr; gap: var(--space-8); }
  .spec-two { grid-template-columns: 1fr; gap: var(--space-6); }
  .score-strip { grid-template-columns: 1fr; gap: var(--space-5); }
  .ss-facts { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .ss-band { justify-items: start; text-align: left; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .foot { grid-template-columns: 1fr; gap: var(--space-8); }
  .lens-grid { grid-template-columns: repeat(2, 1fr); }
  .dl-body ul { grid-template-columns: 1fr; }
  .plist { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
  .masthead .container { min-height: 56px; }
  .nav-links { gap: var(--space-4); }
  .nav-links a:not(.nav-cta) { display: none; }
  .hero-cta { display: grid; }
  .layers { grid-template-columns: 1fr; }
  .lens-grid { grid-template-columns: 1fr; }
  .risks { grid-template-columns: 1fr; }
  .fw-in .fw-list { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; gap: var(--space-6); }
  .paper-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .paper-cover { max-width: 200px; }
  .pf-row { grid-template-columns: 1fr; gap: 0; }
  .stp { grid-template-columns: 44px 1fr; gap: var(--space-5); }
  .stp-no { width: 44px; height: 44px; font-size: 18px; }
  .stp::before { left: 21px; top: 52px; }
  .quote { padding: var(--space-5); }
  .case { padding: var(--space-6); }
  .prod { padding: var(--space-6); }
  .deliver { padding: var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}