/* ==========================================================================
   Crisis Lab design system — styles.css.
   The two @font-face src values point at /fonts/*.woff2 served by the site,
   with the original *.ttf kept as the fallback for anything that cannot take
   woff2. Both are the same variable fonts with the same axes.
   All token values are byte-identical to the verified v3 mock.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/MonaSansVF.woff2") format("woff2"),
       url("/fonts/MonaSansVF.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMonoVF.woff2") format("woff2"),
       url("/fonts/JetBrainsMonoVF.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
/* Surfaces — paper ground, white-card pattern (S425 ruling) */
--paper: oklch(98.5% 0.003 240);
--card: oklch(100% 0 0);
--band: oklch(94% 0.005 240);
--dark: oklch(14% 0.012 240);
/* Ink — text on light */
--ink: oklch(18% 0.008 240);
--ink-soft: oklch(38% 0.008 240);
--ink-quiet: oklch(52% 0.006 240);
/* Text on dark */
--paper-soft: oklch(82% 0.01 240);
--paper-quiet: oklch(64% 0.012 240);
/* Rules */
--rule: oklch(89% 0.005 240);
--rule-strong: oklch(80% 0.007 240);
--rule-dark: oklch(28% 0.012 240);
/* Accent — three reds */
--accent: oklch(48% 0.18 27);
--accent-strong: oklch(40% 0.163 27);
--accent-soft: oklch(96% 0.018 27);
/* States — never red, never color alone */
--state-error: oklch(45% 0.17 40);
--state-success: oklch(46% 0.13 150);
--state-warning: oklch(50% 0.13 75);
/* Layout — approved decision record */
--container: 1280px;
--section-py: 96px;
--section-py-mobile: 72px;
/* S426: gutters widened ~10% (28->31, 24->26) per Kyle — content sat too
   close to the viewport edge at desktop width. Single shared tokens, so
   every section's .container / .nav .inner picks up the change uniformly. */
--section-px: 31px;
--section-px-mobile: 26px;
/* Elevation — resting and hover shadows */
--shadow-lift: 0 1px 2px oklch(50% .01 240 / .04), 0 8px 24px oklch(50% .01 240 / .05);
--shadow-lift-hover: 0 4px 10px oklch(20% 0.03 240 / 0.10), 0 14px 40px oklch(20% 0.03 240 / 0.14);
/* Motion — 200ms ring and ~220ms lift are approved anchors */
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--duration-reveal: 600ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
/* Type — scale (px in comments): display-hero 64/66, display-large 52/56, display-medium 44/48, headline-large 34/40, headline-medium 28/34, headline-small 23/30, title-large 20/28, title-medium 17/24, title-small 15/22, body-large 17/27, body-medium 16/26, body-small 14/22, label-large 12.5/16, label-medium 11/16, label-small 9.5/14 */
--tracking-hero: -0.035em;
--tracking-heading: -0.028em;
--tracking-label: 0.12em;
--tracking-label-wide: 0.18em;
/* Spacing — 2/4/8 scale: 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 160px */
/* Breakpoints: 767, 899, 1023, 1279 (max-width queries; 1024 as the one min-width) */
}

/* Base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Mona Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: var(--tracking-heading);
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

a { color: var(--accent-strong); text-decoration: none; }

/* Mono utility: labels, datelines, section markers, figure numbers */
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
}

/* Zero radius everywhere. Buttons and inputs are the sole exception. */
button, input, select, textarea { border-radius: 1px; font-family: inherit; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* WCAG 1.4.11: the accent ring measures 2.77:1 against --dark, below the 3:1
   floor for non-text contrast. On the dark and accent grounds the ring steps
   to --paper, the same near-white already used for text there. The
   light-ground default above is unchanged. */
.hero :focus-visible,
.pagehead :focus-visible,
.grid-dark :focus-visible,
.sec--dark :focus-visible,
.sec--accent :focus-visible,
.ticker :focus-visible,
.closing :focus-visible,
.foot :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute;
  top: -48px;
  left: 0;
  z-index: 50;
  padding: 12px 20px;
  background: var(--dark);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

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

.label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 10px;
  color: var(--ink-quiet);
}

/* ==========================================================================
   Page composition. Every value below resolves to a token, a step on the
   2/4/8 spacing scale, or a literal named in a card (art literals only).
   ========================================================================== */

img { max-width: 100%; display: block; }
blockquote, figure { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--section-px); }

/* Section rhythm — 96px desktop, 72px mobile (layout card) */
.sec { padding: var(--section-py) 0; position: relative; }
.sec--paper { background: var(--paper); }
.sec--band  { background: var(--band); }
.sec--dark  { background: var(--dark); color: var(--paper-soft); }

/* Blueprint grid texture — hero-art card, exact tints, 32px pitch */
.grid-light {
  background-image:
    repeating-linear-gradient(0deg,  rgba(20, 26, 33, 0.028) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(20, 26, 33, 0.028) 0 1px, transparent 1px 32px);
}
.grid-dark {
  background-image:
    repeating-linear-gradient(0deg,  rgba(150, 162, 182, 0.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 162, 182, 0.04) 0 1px, transparent 1px 32px);
}

/* --- Eyebrow: the section-opening device. One per section. (S425) -------- */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* Section labels are marked up as h2 where the section needs a heading in the
   outline. The text styling lives on .eyebrow span, so this only neutralizes
   the h2 user-agent defaults and the global heading rule above, leaving an
   h2.eyebrow rendering identical to the div version. */
h2.eyebrow { margin: 0 0 16px; font-size: 1rem; font-weight: 400; }
.eyebrow i { width: 26px; height: 3px; background: var(--accent); flex: none; display: block; }
.eyebrow span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label-wide);
  font-size: 11px; line-height: 16px;
  color: var(--ink-quiet);
}
/* Eyebrow text on dark steps out of red entirely (hero-art open item 01) */
/* S426: paper-soft (11.4:1) read visually dark to Kyle; stepped to the
   paper token (near-white, already used for text-on-dark elsewhere) for
   the intended white/off-white treatment. */
.eyebrow--dark span { color: var(--paper); }
.eyebrow--center { justify-content: center; }

/* --- Type steps ---------------------------------------------------------- */
.t-display-hero   { font-size: 64px; line-height: 66px; font-weight: 900; letter-spacing: var(--tracking-hero); }
.t-display-medium, .t-headline-large, .t-headline-small, .beat { text-wrap: balance; }
.t-display-medium { font-size: 44px; line-height: 48px; font-weight: 800; letter-spacing: var(--tracking-heading); }
.t-headline-large { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: var(--tracking-heading); }
.t-headline-small { font-size: 23px; line-height: 30px; font-weight: 800; letter-spacing: var(--tracking-heading); }
.t-title-large    { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.012em; }
.t-title-medium   { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.012em; }
.t-body-large     { font-size: 17px; line-height: 27px; color: var(--ink-soft); }
.t-body-medium    { font-size: 16px; line-height: 26px; color: var(--ink-soft); }
.t-body-small     { font-size: 14px; line-height: 22px; color: var(--ink-soft); }

.measure  { max-width: 72ch; }
.measure-s { max-width: 62ch; }

.sec-head { margin-bottom: 48px; }
.sec-head .t-body-large { margin-top: 16px; }

/* --- Buttons: three ranks (buttons-forms card) --------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.008em;
  border: 1px solid transparent; border-radius: 1px;
  cursor: pointer; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn .arw { transition: transform var(--duration-base) var(--ease-standard); }
.btn:hover .arw { transform: translateX(4px); }

.btn-primary   { background: var(--accent); color: var(--card); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-secondary { background: var(--card); color: var(--ink); border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
.btn-secondary:hover { border-color: var(--ink-quiet); }
.btn-ghost     { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink-quiet); }
/* Ghost on the dark ground: the rule-dark hairline is the border value on dark,
   stepped to paper-quiet on hover so the state is visible. */
.btn-ghost-dark { background: transparent; color: var(--paper); border-color: var(--paper-quiet); }
.btn-ghost-dark:hover { border-color: var(--paper); }
.btn-block { width: 100%; }

/* --- Cards and elevation (cards-elevation card) -------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-lift);
  padding: 24px;
  transition: transform 220ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-lift-hover);
}

/* ==========================================================================
   01 — Hero. Five layers over one ground (hero-art card).
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--dark);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero #glyphfield { position: absolute; inset: 0; z-index: 0; display: block; }
/* Layer 03 — radial scrim. Art literal: oklch(11% .01 240), three points under
   the ground. No token holds that value. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 72% 62% at 50% 46%, transparent 0%, transparent 44%, oklch(11% .01 240 / .55) 100%);
}
/* Layer 04 — bottom vignette */
.hero .vign {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, oklch(11% .01 240 / .85) 100%);
}
/* Layer 05 — corner registration marks. Hero only. */
.marks { position: absolute; inset: 26px; z-index: 2; pointer-events: none; }
.marks span { position: absolute; width: 13px; height: 13px; opacity: .55; }
.marks span::before, .marks span::after { content: ""; position: absolute; background: var(--accent); }
.marks span::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.marks span::after  { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.marks .tl { top: 0; left: 0; } .marks .tr { top: 0; right: 0; }
.marks .bl { bottom: 0; left: 0; } .marks .br { bottom: 0; right: 0; }

.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  border-bottom: 1px solid var(--rule-dark);
}
.nav .inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--section-px);
  height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.brand { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.028em; color: var(--paper); }
.brand em { font-style: normal; color: var(--accent); margin-left: 4px; }
.nav ul { display: flex; align-items: center; gap: 32px; }
.nav a {
  font-size: 15px; line-height: 22px; font-weight: 500; color: var(--paper-soft);
  transition: color var(--duration-fast) var(--ease-standard);
  position: relative; padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-standard);
}
.nav a:hover { color: var(--paper); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--paper); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .sep { width: 1px; height: 16px; background: var(--rule-dark); }

.hero .content { position: relative; z-index: 2; width: 100%; padding: 96px 0 64px; }
.hero h1 { color: var(--paper); }
.hero h1 .ln { display: block; }
.hero .sub { font-size: 20px; line-height: 30px; color: var(--paper-soft); max-width: 56ch; margin-top: 32px; }
.hero .cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.hero .micro {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  /* S426: paper-quiet (5.9:1) read too dark to Kyle; stepped to the paper
     token (near-white, already used for text-on-dark elsewhere) so the
     hero's fine print reads white/off-white. */
  color: var(--paper); margin-top: 24px;
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
/* The brand red (accent-strong) is 2.0:1 on the hero's dark background —
   fails AA. Rather than lighten the global red (used across light
   surfaces), the hero's inline "Privacy Policy" link steps to the same
   off-white as the surrounding micro copy, with an underline standing in
   for color as the link affordance. Scoped to the dark hero only — the
   light-surface "cta-row .micro a" instance keeps the brand red. Flagging
   for Kyle: this trades the red link treatment for off-white+underline on
   dark; override if the red is wanted here regardless of contrast. */
.hero .micro a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   02 — Decision-making support. Spectrum rule.
   ========================================================================== */
.spectrum { margin-top: 64px; max-width: 880px; }
.spectrum .rail { position: relative; height: 1px; background: var(--rule-strong); }
.spectrum .rail i { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--rule-strong); }
.spectrum .rail i:first-child, .spectrum .rail i:last-child { height: 13px; top: -6px; background: var(--ink-quiet); }
.spectrum .ends { display: flex; justify-content: space-between; margin-top: 16px; }
.spectrum .ends span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-quiet);
}

/* ==========================================================================
   03 — Coverage ticker. Dark band, dark blueprint tint.
   ========================================================================== */
.ticker { background: var(--dark); border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); overflow: hidden; }
.ticker .row { display: flex; align-items: stretch; height: 64px; }
.ticker .tag {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 0 24px 0 max(28px, calc((100vw - var(--container)) / 2 + 28px));
  border-right: 1px solid var(--rule-dark);
}
.ticker .tag i { width: 26px; height: 3px; background: var(--accent); flex: none; }
.ticker .tag span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: var(--tracking-label-wide); text-transform: uppercase;
  color: var(--paper-soft); white-space: nowrap;
}
.ticker .track-wrap { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; }
.ticker .track { display: flex; align-items: center; white-space: nowrap; animation: marq 48s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker .track b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; font-weight: 400; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper-quiet); padding: 0 32px; border-right: 1px solid var(--rule-dark);
}
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   04 — The difference. 6/6 split, editorial callout on accent-soft.
   ========================================================================== */
.split66 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.prose p + p { margin-top: 24px; }
.prose strong { color: var(--ink); font-weight: 700; }
/* Sanctioned use 1 of 2 for --accent-soft: the editorial callout. */
.callout { background: var(--accent-soft); box-shadow: inset 3px 0 0 0 var(--accent), inset 0 0 0 1px var(--accent); padding: 40px; }
.callout .q { font-size: 23px; line-height: 32px; font-weight: 800; letter-spacing: var(--tracking-heading); color: var(--ink); }
.callout .a { font-size: 14px; line-height: 22px; color: var(--ink-soft); margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--accent); }

/* ==========================================================================
   05 — What changes. Beat + metrics.
   ========================================================================== */
.beat { font-size: 34px; line-height: 44px; font-weight: 800; letter-spacing: var(--tracking-heading); color: var(--ink); max-width: 52ch; }
.metrics { margin-top: 80px; }
.metric-hero { display: inline-block; }
.metric-hero .n { font-size: 96px; line-height: 96px; font-weight: 900; letter-spacing: var(--tracking-hero); color: var(--ink); }
.metric-hero .dim { width: 100%; border-top: 1px solid var(--ink-quiet); margin-top: 12px; padding-top: 8px; position: relative; }
.metric-hero .dim::before, .metric-hero .dim::after { content: ""; position: absolute; top: -5px; width: 1px; height: 9px; background: var(--ink-quiet); }
.metric-hero .dim::before { left: 0; } .metric-hero .dim::after { right: 0; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.metric-row > div { border-left: 1px solid var(--rule); padding-left: 24px; }
.metric-row .n { font-size: 34px; line-height: 40px; font-weight: 800; letter-spacing: var(--tracking-heading); color: var(--ink); }
/* A figure mid-decode swaps glyphs, never lines. JS measures and pins the
   width; this keeps the swap on one line. Reduced motion never enters the
   scrambled state at all, so nothing here has a motion cost. */
.dec { white-space: nowrap; }

.cap {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-quiet); margin-top: 8px;
}

/* ==========================================================================
   06 — Field operations ledger, held in one white card.
   ========================================================================== */
.ledger { padding: 16px 40px; }
.ledger .row { display: grid; grid-template-columns: 220px 1fr; gap: 40px; padding: 32px 0; border-top: 1px solid var(--rule); }
.ledger .row:first-child { border-top: 0; }
/* Each row is one link. The state is the card treatment: the same ring, the
   same 6px rise, the same lift shadow, so an operation reads as the same kind
   of object as every other card on the page. */
.ledger a.row {
  color: inherit; text-decoration: none; cursor: pointer;
  padding: 32px 24px; margin: 0 -24px;
  transition: transform 220ms var(--ease-standard),
              box-shadow 200ms var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.ledger a.row:hover, .ledger a.row:focus-visible {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-lift-hover);
  background-color: var(--card);
}
.ledger a.row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Reduced motion keeps the state and drops the movement. */
@media (prefers-reduced-motion: reduce) {
  .ledger a.row:hover, .ledger a.row:focus-visible { transform: none; }
}
.ledger .meta span { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 18px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.ledger .meta .org { color: var(--ink); font-weight: 700; }
.ledger .meta .loc, .ledger .meta .dat { color: var(--ink-quiet); }
.ledger .row h3 { margin-bottom: 8px; }

/* ==========================================================================
   07 — Who we serve. Affiliation wall.
   ========================================================================== */
.wall { margin: 64px 0 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); padding: 40px 0; text-align: center; }
.wall .lab { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: var(--tracking-label-wide); text-transform: uppercase; color: var(--ink-soft); }
.wall ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; margin-top: 24px; }
.wall li { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.012em; text-transform: uppercase; color: var(--ink-quiet); }

/* ==========================================================================
   08 / 09 — Article and brief cards.
   ========================================================================== */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.acard { display: flex; flex-direction: column; padding: 32px 24px 24px; }
.acard h3 { margin-bottom: 12px; }
.acard .ckicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); margin-bottom: 16px; }
.acard .t-body-small { flex: 1; }
.acard .cfoot { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.acard .cfoot span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); }

/* Editorial treatment for the article card (card lab, Variant B). A framed
   photo plate leads the card, following the work.html precedent: a 1px
   rule-strong frame inset on the white card, a band plate inside it, mono
   photo label. On hover the plate's inner area scales 3% inside the fixed
   frame, the title underline slides in, and the card takes the system ring,
   6px rise, and hover shadow. Motion sits on the plate fill and on
   background-size only, so nothing reflows and the frame never moves. */
.acard--editorial { padding: 0; }
.acard--editorial .ashot { padding: 16px 16px 0; }
.acard--editorial .frame { border: 1px solid var(--rule-strong); padding: 8px; }
.acard--editorial .plate {
  position: relative; aspect-ratio: 3 / 2;
  background: var(--band); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* The inner plate area is the only thing that moves. */
.acard--editorial .fill {
  position: absolute; inset: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.acard--editorial .plate .cap { position: relative; margin-top: 0; }
.acard--editorial:hover .fill,
.acard--editorial:focus-visible .fill { transform: scale(1.03); }
.acard--editorial .abody { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.acard--editorial .ckicker { margin-bottom: 12px; }
/* The underline slides in on background-size, so reduced motion resolves it
   to a plain instant underline with no transform involved. */
.acard--editorial .aul {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-standard);
}
.acard--editorial:hover .aul,
.acard--editorial:focus-visible .aul { background-size: 100% 1px; }
/* Reduced motion keeps the state and drops the movement, matching the ledger
   row: no plate scale, no card rise. The underline still resolves, instantly. */
@media (prefers-reduced-motion: reduce) {
  .acard--editorial.card-hover:hover,
  .acard--editorial.card-hover:focus-visible { transform: none; }
  .acard--editorial:hover .fill,
  .acard--editorial:focus-visible .fill { transform: none; }
}

.bcard { padding: 0; overflow: hidden; }
.bcard .plate { position: relative; aspect-ratio: 2 / 1; background: var(--dark); overflow: hidden; }
.bcard .plate .g {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(150, 162, 182, 0.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(150, 162, 182, 0.04) 0 1px, transparent 1px 32px);
}
.bcard .plate .edition { position: absolute; left: 0; top: 0; background: var(--card); color: var(--ink); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 8px 12px; }
.bcard .body { padding: 32px 24px 24px; }
/* Each brief card is one link out to the live edition, the same construction
   as a ledger row: the anchor is the card, the state is the card treatment. */
a.bcard { display: block; color: inherit; text-decoration: none; cursor: pointer; }
/* The read affordance closes the footer rule, opposite the dateline. */
.bcard .cfoot .rd {
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}
.bcard .cfoot .rd .arw { display: inline-block; transition: transform var(--duration-base) var(--ease-standard); }
a.bcard:hover .rd, a.bcard:focus-visible .rd { color: var(--accent-strong); }
a.bcard:hover .rd .arw, a.bcard:focus-visible .rd .arw { transform: translateX(4px); }

/* ==========================================================================
   10 — Pricing.
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; }
.plan { padding: 40px 32px; display: flex; flex-direction: column; }
/* Featured card, exactly as specced in cards-elevation: accent-soft ground,
   inset 3px red top edge, 1px red ring, deeper drop, breaks the row line. */
.plan.featured {
  background: var(--accent-soft); border: 0; margin: -26px 0; overflow: hidden; position: relative;
  box-shadow: inset 0 3px 0 0 var(--accent), inset 0 0 0 1px var(--accent), 0 20px 48px oklch(50% .01 240 / .14);
}
.plan.featured:hover { transform: none; box-shadow: inset 0 3px 0 0 var(--accent), inset 0 0 0 1px var(--accent), 0 20px 48px oklch(50% .01 240 / .14); }
.plan .nm { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.012em; color: var(--ink); }
.plan .pr { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
/* overflow-wrap keeps a long single word ("partnership") from forcing an 8px
   horizontal scroll at 320px. */
.plan .pr b { font-size: 44px; line-height: 48px; font-weight: 900; letter-spacing: var(--tracking-heading); color: var(--ink); overflow-wrap: anywhere; }
.plan .pr span { font-size: 14px; line-height: 22px; color: var(--ink-soft); }
.plan .desc { margin-top: 24px; }
.plan ul.feat { margin-top: 24px; flex: 1; }
.plan ul.feat li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 24px; color: var(--ink-soft); }
.plan ul.feat svg { width: 14px; height: 14px; margin-top: 4px; color: var(--ink-quiet); }
.plan--compact { align-self: start; }
.plan .btn { margin-top: 32px; }

/* ==========================================================================
   11 — /work. Same grammar as the home page: a dark head carrying the nav,
   then one section per field operation, each with a framed thumbnail. The
   thumbnail is inset on a white card and never runs to the edge.
   ========================================================================== */
.pagehead { position: relative; background: var(--dark); overflow: hidden; min-height: 100svh; display: flex; flex-direction: column; }
.pagehead .content { position: relative; z-index: 2; padding: 176px 0 96px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pagehead h1 { color: var(--paper); max-width: 20ch; }
.pagehead .lead { font-size: 20px; line-height: 30px; color: var(--paper-soft); max-width: 62ch; margin-top: 32px; }

section[id], main[id] { scroll-margin-top: 24px; }

.op { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.op .meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 16px; }
.op .meta span {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 18px; letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.op .meta .org { color: var(--ink); font-weight: 700; }
.op .meta .loc, .op .meta .dat { color: var(--ink-quiet); }
.op h2 { margin-bottom: 16px; }

/* Framed thumbnail: a 1px frame held inside the white card, with the plate
   inside that. Two rules of separation from the page ground, so the image
   reads as a plate on a card, never as a background. */
.shot .frame { border: 1px solid var(--rule-strong); padding: 8px; }
.shot .plate { aspect-ratio: 3 / 2; background: var(--band); display: flex; align-items: center; justify-content: center; }
.shot .plate .cap { margin-top: 0; }

/* ==========================================================================
   12 — Testimonials.
   ========================================================================== */
.tcard { display: flex; flex-direction: column; padding: 32px 24px; }
.tcard .tag { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); }
.tcard .q { font-size: 16px; line-height: 26px; color: var(--ink); margin-top: 24px; flex: 1; }
.tcard .who { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* --- Testimonial (long-form). An oversized accent quote mark, italic body,
   mono position-only attribution. Slots stay empty until quotes clear source
   verification (S428). --------------------------------------------------- */
.testimonial { position: relative; max-width: 720px; padding: 12px 0 0 64px; }
.testimonial .qmark {
  position: absolute; left: 0; top: 0;
  font-family: "Mona Sans", system-ui, sans-serif;
  font-size: 96px; line-height: 0.62; font-weight: 800;
  color: var(--accent); user-select: none; pointer-events: none;
}
.testimonial blockquote {
  font-style: italic; font-size: 22px; line-height: 34px; letter-spacing: -0.012em;
  color: var(--ink); margin: 0;
}
.testimonial figcaption { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.testimonial figcaption i { width: 26px; height: 3px; background: var(--accent); flex: none; }
.testimonial figcaption span {
  font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase;
  letter-spacing: var(--tracking-label-wide); font-size: 11px; line-height: 16px; color: var(--ink-quiet);
}
.testimonial--dark blockquote { color: var(--paper-soft); }
.testimonial--dark figcaption span { color: var(--paper-quiet); }

/* ==========================================================================
   13 — Free CTA. Band ground; the red is the button, not the field.
   The band is one composed unit on two columns, the page's own left-aligned
   grammar rather than a second centred block ahead of the closing zone: the
   statement holds the section's eyebrow, heading, and supporting line; the
   form column takes 600px, half the 1224px content width, so the instrument
   reads as the equal half of the band and not as a fitting on the end of a
   headline. Both columns close on the same bottom line, so the micro line and
   the last line of the statement sit on one rule of the composition.
   ========================================================================== */
.cta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 40px 72px; align-items: end; }
.cta-row .statement { min-width: 0; }
.cta-row h2 { max-width: 22ch; }
.cta-row .statement .t-body-large { margin-top: 20px; max-width: 46ch; }
.cta-row .right { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.cta-row .micro { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-quiet); }

/* ==========================================================================
   14 — Organizations CTA + footer. One closing dark zone.
   ========================================================================== */
.closing { background: var(--dark); }
.closing .inner { text-align: center; padding: 160px 0; }
.closing h2 { color: var(--paper); max-width: 26ch; margin: 0 auto; }
.closing p { color: var(--paper-soft); font-size: 17px; line-height: 27px; max-width: 56ch; margin: 24px auto 0; }
.closing .btn { margin-top: 40px; }

.foot { background: var(--dark); border-top: 1px solid var(--rule-dark); padding: 80px 0 40px; }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.foot .brand { margin-bottom: 16px; }
.foot .blurb { font-size: 14px; line-height: 22px; color: var(--paper-quiet); max-width: 38ch; }
.foot h3 { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-label-wide); text-transform: uppercase; color: var(--paper-quiet); margin-bottom: 24px; }
.foot li + li { margin-top: 12px; }
.foot li a { font-size: 15px; line-height: 22px; color: var(--paper-soft); transition: color var(--duration-fast) var(--ease-standard); }
.foot li a:hover { color: var(--paper); }
.foot .base { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--rule-dark); }
.foot .base .c { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 18px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--paper-quiet); }
.foot .base .tm { font-size: 13px; line-height: 20px; color: var(--paper-quiet); margin-top: 12px; max-width: 60ch; }

/* ==========================================================================
   Reveal — 600ms, decelerate, 60ms stagger capped at 360ms (motion card).
   Resolves to the final state under reduced motion via the base sheet.
   ========================================================================== */
/* The reveal moves on the independent `translate` property, not `transform`,
   so a card's hover lift still composes on top of a revealed element. */
.rv { opacity: 0; translate: 0 16px; transition: opacity var(--duration-reveal) var(--ease-decelerate), translate var(--duration-reveal) var(--ease-decelerate); transition-delay: var(--d, 0ms); }
.rv.in { opacity: 1; translate: 0 0; }
/* A card that also reveals needs both transitions. The shorthand above sets
   the whole transition list, so on `.card.rv` it replaces the card's own
   transform/box-shadow pair and hover snaps. Compose all four here, carrying
   the stagger as a per-property delay so it reaches the reveal only, never
   the hover. */
.card.rv {
  transition:
    opacity var(--duration-reveal) var(--ease-decelerate) var(--d, 0ms),
    translate var(--duration-reveal) var(--ease-decelerate) var(--d, 0ms),
    transform 220ms var(--ease-standard),
    box-shadow 200ms var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; translate: none; } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .split66, .grid3, .grid2, .plans, .foot .cols, .op { grid-template-columns: 1fr; }
  .metric-row { grid-template-columns: 1fr 1fr; }
  .plan.featured { margin: 0; }
}
@media (max-width: 767px) {
  .sec { padding: var(--section-py-mobile) 0; }
  .container, .nav .inner { padding: 0 var(--section-px-mobile); }
  .t-display-hero { font-size: 40px; line-height: 44px; }
  .t-display-medium { font-size: 32px; line-height: 38px; }
  .metric-hero .n { font-size: 64px; line-height: 66px; }
  .ledger .row { grid-template-columns: 1fr; gap: 16px; }
  .pagehead .content { padding: 152px 0 72px; }
  .hero .content { padding-top: 152px; }
  .nav .inner { height: auto; min-height: 80px; }
  .nav ul { gap: 8px 16px; flex-wrap: wrap; } .nav .sep { display: none; }
  .testimonial { padding: 48px 0 0; }
  .testimonial .qmark { font-size: 72px; }
}

/* ==========================================================================
   15 — Email capture. One inline control: a field joined to the button on a
   single shared hairline, so the pair reads as one instrument rather than a
   widget dropped onto the page. Two grounds are supported. On the hero's dark
   ground the field takes the hero scrim literal as its fill and the
   btn-ghost-dark border value, so it sits beside the ghost button as the same
   kind of object. On the band it takes the white card ground and the
   rule-strong hairline, matching btn-secondary. Height, type size, and the
   1px radius are the button's own values. States never rely on hue: the
   status line is the mono micro step, and attention is carried by contrast
   plus an accent tick, the eyebrow's own marker.
   ========================================================================== */
.sub-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; }
.sub-form .field { display: flex; align-items: stretch; }

.sub-input {
  flex: 1 1 auto; min-width: 0;
  height: 48px; padding: 0 16px;
  font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.008em;
  border: 1px solid transparent; border-radius: 1px;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
/* One shared hairline between field and button. */
.sub-form .field .btn { flex: none; margin-left: -1px; }
.sub-form .btn:disabled { opacity: .55; cursor: default; }
.sub-form .btn:disabled .arw { transform: none; }

/* Honeypot and the field label: present for machines, gone for people. */
.sub-hp, .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sub-status {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* One line of the status type is reserved whether or not there is text, so
     filling the live region never shifts the form below it. */
  min-height: 16px;
}
/* visibility rather than display: the live region has to stay laid out so a
   screen reader has something to announce into when the text arrives.
   display: none tears the region out and drops the announcement. */
.sub-status:empty { visibility: hidden; }
/* The accent tick is the eyebrow's marker, cut to the type's scale. */
.sub-form.is-done .sub-status::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 14px; height: 2px; background: var(--accent); margin-right: 8px; position: relative; top: -1px;
}
/* --- Dark ground (hero) --- */
.sub-form--dark .sub-input {
  background: oklch(11% .01 240 / .55);
  border-color: var(--paper-quiet);
  color: var(--paper);
}
.sub-form--dark .sub-input::placeholder { color: var(--paper-quiet); opacity: 1; }
.sub-form--dark .sub-input:hover { border-color: var(--paper); }
.sub-form--dark .sub-input:focus { border-color: var(--accent); }
.sub-form--dark.is-error .sub-input { border-color: var(--paper); }
.sub-form--dark .sub-status { color: var(--paper-quiet); }
.sub-form--dark.is-error .sub-status { color: var(--paper); }

/* --- Band ground (free briefing) --- */
.sub-form--band .sub-input {
  background: var(--card);
  border-color: var(--rule-strong);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.sub-form--band .sub-input::placeholder { color: var(--ink-quiet); opacity: 1; }
.sub-form--band .sub-input:hover { border-color: var(--ink-quiet); }
.sub-form--band .sub-input:focus { border-color: var(--accent); }
.sub-form--band.is-error .sub-input { border-color: var(--ink); }
.sub-form--band .sub-status { color: var(--ink-quiet); }
.sub-form--band.is-error .sub-status { color: var(--ink); }

/* --- Placement on the two rows --- */
.hero .cta { align-items: flex-start; }
.hero .cta .sub-form { flex: 0 1 460px; }
/* On the band the form is a column of the composition, not a fixed-basis
   object sitting beside a headline: it fills the 600px column it is given. */
.cta-row .right .sub-form { max-width: none; }

/* Below the two-column threshold the band stacks: statement, then the form
   across the full measure, keeping the same order and the same rhythm. */
@media (max-width: 1023px) {
  .cta-row { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .cta-row h2 { max-width: 26ch; }
}

@media (max-width: 767px) {
  .hero .cta .sub-form, .sub-form { flex: 1 1 100%; max-width: none; }
  .sub-form .field { flex-direction: column; }
  .sub-form .field .btn { margin: -1px 0 0; width: 100%; }
}

/* ==========================================================================
   16 — Nav disclosure menu. The Log In item is a two-choice menu built on
   details/summary, so it opens and closes with no JavaScript at all. main.js
   only adds what the native element does not: aria-expanded, Escape, outside
   click, and arrow-key movement between the two choices. The panel is a dark
   card on the same rule and the same 250ms standard ease as the rest.
   ========================================================================== */

.nav-menu { position: relative; }

.nav-menu > summary {
  font-size: 15px; line-height: 22px; font-weight: 500; color: var(--paper-soft);
  padding: 4px 0; cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover,
.nav-menu[open] > summary { color: var(--paper); }

/* The caret is drawn, not typed, so no glyph enters the type scale. */
.nav-menu > summary .chev {
  width: 7px; height: 7px; flex: none; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-standard);
}
.nav-menu[open] > summary .chev { transform: rotate(-135deg); margin-top: 2px; }

.nav .nav-menu-list {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 4;
  display: block; min-width: 232px;
  background: var(--dark); border: 1px solid var(--rule-dark);
  box-shadow: 0 12px 40px oklch(0% 0 0 / .45);
  padding: 8px 0; margin: 0;
}
.nav .nav-menu-list li + li { margin-top: 0; }
.nav .nav-menu-list a {
  display: block; padding: 10px 20px; font-size: 15px; line-height: 22px;
  font-weight: 500; color: var(--paper-soft);
}
.nav .nav-menu-list a::after { content: none; }
.nav .nav-menu-list a:hover,
.nav .nav-menu-list a:focus-visible { background: var(--rule-dark); color: var(--paper); }

/* Below the two-column threshold the panel hangs from the right edge of the
   bar rather than the item, so a narrow viewport never clips it. */
@media (max-width: 767px) {
  .nav .nav-menu-list { right: -8px; min-width: 208px; }
}

/* ==========================================================================
   17 — Legal pages. One readable column at a 65ch measure on the paper
   ground. Headings, body, and lists all resolve to the existing type scale;
   nothing here introduces a new size, colour, or rule.
   ========================================================================== */

.legal { max-width: 65ch; margin-left: auto; margin-right: auto; }
.legal > * + * { margin-top: 24px; }
.legal h2 {
  font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.012em;
  color: var(--ink); margin-top: 48px;
}
.legal h3 {
  font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.012em;
  color: var(--ink); margin-top: 32px;
}
.legal p { font-size: 17px; line-height: 27px; color: var(--ink-soft); }
.legal a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--accent); }
.legal strong { color: var(--ink); font-weight: 700; }

.legal ol, .legal ul { padding-left: 24px; margin-top: 24px; }
.legal ol { list-style: decimal; }
.legal ul { list-style: disc; }
.legal li { font-size: 17px; line-height: 27px; color: var(--ink-soft); }
.legal li + li { margin-top: 16px; }
.legal li > p { margin: 0; }
.legal li ol, .legal li ul { margin-top: 16px; }
.legal li ul { list-style: circle; }

/* The effective date is a dateline, so it is set as one. */
.legal .effective {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 18px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--ink-quiet);
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule);
}

/* Footer legal row. It sits under the trademark line inside the existing
   base block rather than becoming a fifth column, so the 2fr/1fr/1fr/1fr
   grid above it is untouched. */
.foot .base .legal-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 20px;
}
.foot .base .legal-links a {
  font-size: 13px; line-height: 20px; color: var(--paper-quiet);
  transition: color var(--duration-fast) var(--ease-standard);
}
.foot .base .legal-links a:hover { color: var(--paper-soft); }
.foot .base .legal-links .sep { color: var(--rule-dark); }

/* ==========================================================================
   18 — /courses. The catalog card: the editorial card language of section
   08/09, with the framed plate carrying a reveal that holds the course
   description and the one red call to action.

   Two interaction modes, both CSS only, no script:
     • Fine pointer. The reveal shares the plate's grid cell and comes in on
       hover or on :focus-within. The call to action is the card's only link,
       so a tab press reveals the panel before focus can land on anything
       invisible, and nothing is ever hidden from assistive technology.
     • Coarse pointer, and any browser that does not report a hover
       capability. The reveal is an ordinary row in the card, always visible.
       Nothing needs a tap, and this is the base state the sheet degrades to.

   The flagship NATO program is not a card. It runs as a full-width dark band
   above the grid (.courses-feature), so the catalog below it is fifteen
   evenly priced courses in one uniform grid.

   Under a fine pointer the reveal is an absolutely positioned grid item: it
   takes its media grid area as containing block, so it lands over the plate
   without adding its own height to the row. The catalog drops a column early
   enough that the plate always outruns the longest description, so the panel
   is never clipped and nothing shifts when it comes in.
   ========================================================================== */

.courses-accred {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 32px;
}

/* --- The feature band: the flagship program, run across the full catalog
       width above the grid. Dark ground, the page's instrument language:
       mono kicker, the same framed plate, and the primary button carrying
       the red. Every text value on this ground is --paper (19.1:1); the
       accent appears only as a button fill under white text (7.2:1), never
       as small red type on dark. -------------------------------------- */
.courses-feature {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 40px;
  align-items: center;
  background-color: var(--dark);
  border: 1px solid var(--rule-dark);
  padding: 40px;
  margin-bottom: 48px;
}

.courses-feature-media .frame { border: 1px solid var(--paper-quiet); padding: 8px; }
.courses-feature-media .plate {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--dark); overflow: hidden;
}
.courses-feature-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}
.courses-feature:hover .courses-feature-media img { transform: scale(1.03); }

.courses-feature-body { display: flex; flex-direction: column; align-items: flex-start; }

.courses-feature-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.courses-feature-cat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
}
.courses-feature-chip {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid var(--paper-quiet);
  padding: 2px 8px;
}

.courses-feature-name { color: var(--paper); }
.courses-feature-desc {
  font-size: 17px; line-height: 27px;
  color: var(--paper);
  margin-top: 16px;
  max-width: 54ch;
}
.courses-feature-cta { margin-top: 32px; }

/* The price line closes the band on a hairline, the same device as the card
   footer, stepped to the dark ground's rule value. */
.courses-feature-foot {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  width: 100%;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-dark);
}
.courses-feature-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px; line-height: 20px; font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
/* The CEU figure is a cited value, set as written and never upper-cased. */
.courses-feature-sep, .courses-feature-ceu {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
  .courses-feature:hover .courses-feature-media img { transform: none; }
}

.courses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.courses-card {
  position: relative;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "media" "kicker" "name" "reveal" "foot";
  grid-template-rows: auto auto auto 1fr auto;
}

/* --- The plate. Course covers are 16:9 title cards, so the plate carries
       their native ratio and the image is never cropped. ----------------- */
.courses-media { grid-area: media; padding: 16px 16px 0; align-self: start; }
.courses-media .frame { border: 1px solid var(--rule-strong); padding: 8px; }
.courses-media .plate {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--band); overflow: hidden;
}
.courses-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}
.courses-card:hover .courses-media img,
.courses-card:focus-within .courses-media img { transform: scale(1.03); }

/* --- Kicker row: the subject area. The tier chip belongs to the feature
       band above the grid, which carries its own kicker rules. ---------- */
.courses-kicker {
  grid-area: kicker;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 24px 24px 0;
}
.courses-cat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --- Name, with the sliding underline of the editorial card. ------------- */
.courses-name { grid-area: name; padding: 12px 24px 0; color: var(--ink); }
.courses-ul {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-standard);
}
.courses-card:hover .courses-ul,
.courses-card:focus-within .courses-ul { background-size: 100% 1px; }

/* --- Price line closes the card on a hairline. --------------------------- */
.courses-foot {
  grid-area: foot;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 24px 24px 0;
  padding: 16px 0 24px;
  border-top: 1px solid var(--rule);
}
.courses-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px; line-height: 20px; font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The CEU figure is a cited value, so it is set as written and never
   upper-cased: "2.2 CEUs", not "2.2 CEUS". */
.courses-sep, .courses-ceu {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  color: var(--ink-quiet);
}

/* --- The reveal. -------------------------------------------------------- */
.courses-reveal {
  grid-area: reveal;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 16px 24px 0;
  background: var(--card);
}
.courses-desc { font-size: 14px; line-height: 22px; color: var(--ink-soft); }
.courses-cta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-strong);
  transition: color var(--duration-fast) var(--ease-standard);
}
.courses-cta:hover { color: var(--accent); }
.courses-cta .arw { display: inline-block; transition: transform var(--duration-base) var(--ease-standard); }
.courses-card:hover .courses-cta .arw,
.courses-card:focus-within .courses-cta .arw { transform: translateX(4px); }
/* The call to action claims the whole card, so a click anywhere on a revealed
   card enrolls. While the panel is hidden it inherits pointer-events: none,
   so the claim only exists once the card has been revealed. */
.courses-cta::after { content: ""; position: absolute; inset: 0; }

/* --- Fine pointer: the reveal overlays the framed plate. ----------------- */
@media (hover: hover) and (pointer: fine) {
  .courses-card {
    grid-template-areas: "media" "kicker" "name" "foot";
    grid-template-rows: auto auto 1fr auto;
  }
  /* The panel is taken out of row sizing: it keeps its media grid area as
     containing block, so inset: 16px lays it exactly over the framed plate
     while contributing nothing to the media row's height. Copy is top set;
     the call to action is pushed to the panel floor so it holds one line
     whatever the description runs to. The 7px inline padding puts the text
     on the card's own 24px column: 16px inset plus a 1px border plus 7px. */
  .courses-reveal {
    grid-area: media;
    position: absolute;
    inset: 16px;
    z-index: 2;
    justify-content: flex-start;
    margin: 0;
    padding: 24px 7px;
    border: 1px solid var(--rule-strong);
    opacity: 0;
    translate: 0 12px;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard),
                translate var(--duration-base) var(--ease-standard);
  }
  /* Live at rest, so a hybrid touchscreen enrols on the first tap instead of
     spending one tap on the reveal. */
  .courses-reveal .courses-cta { margin-top: auto; pointer-events: auto; }
  .courses-card:hover .courses-reveal,
  .courses-card:focus-within .courses-reveal {
    opacity: 1; translate: 0 0; pointer-events: auto;
  }
}

/* Focus takes the card's state, matching hover: the ring and the rise. */
.courses-card.card-hover:focus-within {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-lift-hover);
}

/* Reduced motion keeps every state and drops the movement, matching the
   editorial article card: no rise, no plate scale, no slide. The reveal
   still resolves on hover and on focus, instantly. */
@media (prefers-reduced-motion: reduce) {
  .courses-card.card-hover:hover,
  .courses-card.card-hover:focus-within { transform: none; }
  .courses-card:hover .courses-media img,
  .courses-card:focus-within .courses-media img { transform: none; }
  .courses-card:hover .courses-cta .arw,
  .courses-card:focus-within .courses-cta .arw { transform: none; }
  .courses-reveal { translate: none; transition: none; }
}

/* The catalog steps down a column early so the plate, and with it the
   overlay panel, is always tall enough for the longest description. */
@media (max-width: 1279px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .courses-grid { grid-template-columns: 1fr; }
  .courses-reveal { padding-left: 20px; padding-right: 20px; }
  .courses-feature {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px;
    margin-bottom: 32px;
  }
}

/* ==========================================================================
   19 — /intelligence. The sales page for Crisis Lab Intelligence, built from
   the grammar already on /courses and the home page: the dark .pagehead
   carrying the nav, then alternating paper / band / dark sections, the same
   eyebrow device, the same card, the same reveal.

   Two things are new here and both are instruments rather than decoration:

     • The mono spec block. A hairline-bordered definition list of four
       facts about the product, set beside the hero statement. It is the
       same object as the ledger's meta column and the course card's price
       line, given a frame.
     • The specimen sheet. One published edition's opening, set on the dark
       ground inside a hairline frame, with its source lines set as a mono
       two-column list rather than as space-padded plain text, so the column
       alignment survives every viewport instead of forcing a scroll.

   Contrast. Every text/ground pair on this page clears 4.5:1. One pair the
   shared sheet already carries did not, so it is stepped here and here
   only, under .page-intel, rather than changed for every page that uses
   it. The other was fixed site-wide:
     • --ink-quiet on the --band ground was 4.24:1 (it was 4.84:1 on --paper
       and 5.05:1 on --card, so the failure was the band ground alone). The
       band eyebrow and the band micro line still step to --ink-soft, 8.4:1,
       here on this page.
     • The footer trademark line composited --paper-quiet at 80% over
       --dark, which landed at 4.12:1. That fix landed site-wide: --ink-quiet
       stepped to 52%, and the .tm opacity was dropped globally, taking the
       line to its token value of 5.9:1 everywhere.
   ========================================================================== */

.page-intel .sec--band .eyebrow span,
.page-intel .sec--band .cta-row .micro { color: var(--ink-soft); }

/* --- Hero ---------------------------------------------------------------- */
.intel-hero {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: 56px 72px;
  align-items: end;
}
.intel-hero-copy { min-width: 0; }
.intel-hero h1 { color: var(--paper); max-width: 22ch; }
.intel-hero .lead { max-width: 56ch; }
.intel-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* The hero's fine print is the mono micro step, in --paper, matching the
   home page's own treatment of the same line on the same ground. */
.pagehead .micro {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 24px;
}

/* --- The spec block: four facts, one hairline frame. --------------------- */
.intel-spec { border: 1px solid var(--rule-dark); min-width: 0; }
.intel-spec-row { padding: 20px 24px; border-top: 1px solid var(--rule-dark); }
.intel-spec-row:first-child { border-top: 0; }
.intel-spec dt,
.intel-spec dd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.intel-spec dt {
  font-size: 10px; line-height: 16px;
  letter-spacing: var(--tracking-label-wide);
  color: var(--paper-soft);
}
.intel-spec dd {
  font-size: 14px; line-height: 20px; font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--paper);
  margin-top: 8px;
}

/* --- 02 · The three tiers. Three cards, the same object as every
       other card on the site. ------------------------------------------ */
.tier { display: flex; flex-direction: column; padding: 40px 32px; }
.tier-name { color: var(--ink); }
.tier-desc { margin-top: 16px; flex: 1; }
.tier-foot { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule); }
.tier-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px; line-height: 20px; font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tier-cta { margin-top: 24px; }

/* --- 04 · The specimen sheet. -------------------------------------------- */
.spec-title { color: var(--paper); }
.spec-sheet { border: 1px solid var(--rule-dark); padding: 48px; max-width: 940px; }
.spec-dateline {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 18px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper-soft);
}
/* The pull takes the editorial callout's own quote step, 23/32 at 800, so no
   new size enters the scale. */
.pull {
  font-size: 23px; line-height: 32px; font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: var(--paper);
  max-width: 44ch;
  margin-top: 24px;
}
/* The second pull is set apart on a hairline, the page's own device. */
.pull--quoted { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--rule-dark); }

/* The source lines. The edition sets these as a label column and a value
   column; here that column is the grid, not a run of spaces, so the pairing
   holds at every width and nothing ever scrolls sideways. */
.spec-lines { margin-top: 32px; }
.spec-lines--tight { margin-top: 20px; }
.spec-line { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 6px 0; }
.spec-line dt,
.spec-line dd,
.spec-stat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 18px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.spec-line dt { color: var(--paper-soft); }
.spec-line dd { color: var(--paper); }
.spec-stat { color: var(--paper); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule-dark); }

.spec-body {
  font-size: 17px; line-height: 27px;
  color: var(--paper-soft);
  max-width: 66ch;
  margin-top: 48px; padding-top: 40px;
  border-top: 1px solid var(--rule-dark);
}
.spec-cta { margin-top: 32px; }

/* --- 06 · Members. The lead quote leads; the three role quotes run as the
       standard testimonial row underneath it. ------------------------- */
.lead-quote { display: block; padding: 48px; margin-bottom: 24px; }
.lead-quote .tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.lead-quote .q {
  font-size: 23px; line-height: 32px; font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  max-width: 48ch;
  margin-top: 24px;
}
.lead-quote .who {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--rule);
}
/* These three carry a role, not a tag, so the quote is the card's first line
   and takes the padding rather than a stacked margin. */
.quote-row .tcard .q { margin-top: 0; }

/* --- 07 · Employer block and the justification kit. ---------------------- */
.employer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 464px);
  gap: 48px 72px;
  align-items: start;
}
.employer-copy { min-width: 0; }
.employer-p {
  font-size: 17px; line-height: 27px;
  color: var(--paper-soft);
  max-width: 58ch;
  margin-top: 24px;
}
.employer-form { border: 1px solid var(--rule-dark); padding: 32px; min-width: 0; }

/* The kit form is deliberately not a .sub-form: main.js binds that class to
   one fixed confirmation line, and this confirmation carries a download
   link. Everything visual below is the .sub-form--dark treatment, so the two
   instruments read as the same object on the same ground. */
.kit-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kit-label {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
}
.kit-form .field { display: flex; align-items: stretch; }
.kit-form .field[hidden] { display: none; }
.kit-form .field .btn { flex: none; margin-left: -1px; }
.kit-form .btn:disabled { opacity: .55; cursor: default; }
.kit-form .btn:disabled .arw { transform: none; }
.kit-form .sub-input {
  background: oklch(11% .01 240 / .55);
  border-color: var(--paper-quiet);
  color: var(--paper);
}
.kit-form .sub-input::placeholder { color: var(--paper-quiet); opacity: 1; }
.kit-form .sub-input:hover { border-color: var(--paper); }
.kit-form .sub-input:focus { border-color: var(--accent); }
.kit-form.is-error .sub-input { border-color: var(--paper); }

.kit-msg:empty { display: none; }
.kit-status {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--paper);
  /* One line of the status type is reserved whether or not there is text, so
     filling the live region never shifts the form below it. */
  min-height: 16px;
}
/* visibility rather than display: the live region has to stay laid out so a
   screen reader has something to announce into when the text arrives.
   display: none tears the region out and drops the announcement. */
.kit-status:empty { visibility: hidden; }
.kit-done { font-size: 15px; line-height: 24px; color: var(--paper); }
.kit-done[hidden] { display: none; }
/* The accent tick is the eyebrow's marker, cut to the type's scale. */
.kit-form.is-done .kit-done::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 14px; height: 2px; background: var(--accent);
  margin-right: 8px; position: relative; top: -2px;
}
.kit-done a,
.kit-fine a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.kit-fine { font-size: 13px; line-height: 20px; color: var(--paper); max-width: 52ch; }

/* --- 08 · Intelligence+. One band across the full measure, closed top and
       bottom on the affiliation wall's own rules. Not a card. ---------- */
.plus-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 64px;
  align-items: center;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 48px 0;
}
.plus-copy { min-width: 0; }
.plus-line {
  font-size: 34px; line-height: 42px; font-weight: 800;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
  max-width: 44ch;
}
.plus-act { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.plus-price {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px; line-height: 20px; font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- 09 · Checkout close, with the guarantee held beside it. ------------- */
.close-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 48px 72px;
  align-items: start;
}
.close-main { min-width: 0; }
.close-body { margin-top: 24px; max-width: 58ch; }
.close-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.faq { padding: 32px; }
.faq-q { color: var(--ink); }
.faq-a { margin-top: 16px; }

/* ========================================================================
   21 · /faq: list rules, plus the band hairline override (S428)
   ======================================================================== */
.faq-list { max-width: 780px; }
.faq-item { padding: 28px 0; border-top: 1px solid var(--rule); }
.faq-list .faq-item:first-child { border-top: 0; padding-top: 0; }
.faq-item p { margin-top: 12px; }
.sec--band .faq-item { border-top-color: var(--rule-strong); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
  .intel-hero, .employer, .close-row, .plus-band { grid-template-columns: 1fr; }
  .intel-hero { align-items: start; }
  .plus-band { align-items: start; }
  .close-row { gap: 40px; }
}
@media (max-width: 767px) {
  .spec-sheet { padding: 24px; }
  .spec-line { grid-template-columns: 1fr; gap: 0; }
  .employer-form { padding: 24px; }
  .lead-quote { padding: 32px 24px; }
  .kit-form .field { flex-direction: column; }
  .kit-form .field .btn { margin: -1px 0 0; width: 100%; }
  .intel-hero-cta .btn, .close-cta .btn { width: 100%; }
}

/* ========================================================================
   20 · /intelligence — pricing ruling (monthly + annual, Intelligence+ note)
   ======================================================================== */

/* The tier foot now carries two lines: the headline price, then the annual
   alternative in a quieter, sentence-case mono so the hierarchy stays clear. */
/* Two lines of price where the free card has one. Bottom-anchoring the foot
   and holding the taller two-line foot on every card keeps the hairlines
   aligned across the three-card row. Between 1024px and 1279px the column
   narrows enough that .tier-price-alt wraps to three lines on one card; the
   min-height is raised for that band below so all three cards still align. */
.tier-foot { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 84px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .tier-foot { min-height: 124px; }
}
.tier-price-alt,
.plus-price-alt {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; line-height: 20px; font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* Intelligence+ band: prices stack together, the benefit line sits under the
   headline sentence at body weight so it reads as a fact, not a second pitch. */
.plus-prices { display: flex; flex-direction: column; gap: 6px; }
.plus-note {
  margin-top: 14px;
  font-size: 16px; line-height: 26px;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* The legal separator inherits --rule-dark, which rasterizes at 1.37:1 on the
   footer ground. It is aria-hidden, but it is still painted text, so this page
   carries it at the same value as the links it divides. Site-wide fix pending. */
.page-intel .foot .base .legal-links .sep { color: var(--paper-quiet); }

/* --- S428 Kyle review fixes ------------------------------------------- */
/* Pricing-card small print sits up a size so the cards read evenly. */
.plan .t-body-small { font-size: 15px; line-height: 24px; }
/* Testimonial quotes carry visible quotation marks. */
.tcard .q::before, .lead-quote .q::before { content: "\201C"; }
.tcard .q::after,  .lead-quote .q::after  { content: "\201D"; }
/* Accent conversion band: brand red ground, white primary button. Pairs
   with .sec--dark, which keeps supplying the light text colors. */
.sec--accent { background: var(--accent); color: var(--paper); }
.sec--accent .employer-p { color: var(--paper); }
/* The tick runs black on the red ground; the label stays paper. */
.sec--accent .eyebrow i { background: var(--dark); }
/* The kit box is a white card on the red ground: black text, white input,
   the standard accent button. Stretch matches the box to the left column;
   the top margin drops the box to the title text's cap line (eyebrow 16px
   + its 16px margin + the display line's cap offset). */
.sec--accent .employer { align-items: stretch; }
.sec--accent .employer-form {
  background: var(--card);
  border-color: var(--card);
  margin-top: 43px;
  display: flex; flex-direction: column; justify-content: center;
}
.sec--accent .kit-label { color: var(--ink); }
.sec--accent .kit-form .sub-input { background: var(--card); border-color: var(--rule-strong); color: var(--ink); }
.sec--accent .kit-form .sub-input::placeholder { color: var(--ink-quiet); }
.sec--accent .kit-form .sub-input:hover { border-color: var(--ink-quiet); }
.sec--accent .kit-form .sub-input:focus { border-color: var(--accent); }
.sec--accent .kit-form.is-error .sub-input { border-color: var(--accent-strong); }
.sec--accent .kit-status { color: var(--ink); }
.sec--accent .kit-done { color: var(--ink); }
.sec--accent .kit-done a,
.sec--accent .kit-fine a { color: var(--ink); }
.sec--accent .kit-fine { color: var(--ink-soft); }
@media (max-width: 1023px) { .sec--accent .employer-form { margin-top: 0; } }

/* Testimonial sections: the red quotation mark as a page graphic, pinned to
   the section's top-right corner as a decorative overlay. */
.sec-quotes .container { position: relative; }
.sec-qmark {
  position: absolute; top: -36px; right: 0;
  font-size: 220px; line-height: 1; font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--accent);
  pointer-events: none; user-select: none;
}
@media (max-width: 1023px) { .sec-qmark { font-size: 120px; top: -16px; } }
/* Why-anyone-pays: prose beside the wordless brief-plate graphic. */
.pays-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 48px 72px; align-items: start; }
/* Guarantee badge beside the checkout CTAs. */
.guarantee { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; }
.guarantee svg { width: 26px; height: 26px; color: var(--accent-strong); flex: none; }
.guarantee span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink); }
@media (max-width: 1023px) { .pays-grid { grid-template-columns: 1fr; } }
.brief-plate { align-self: start; }
.brief-plate svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; filter: drop-shadow(0 12px 32px oklch(20% 0.02 240 / .12)); }
@media (max-width: 1023px) { .brief-plate { display: none; } }