/* ============================================================================
   DAYNOUGHT DESIGN SYSTEM  ·  v1  ·  brief §5.6
   Foundations + component system. Dark is the only theme.
   No web fonts, no third-party requests.
   ========================================================================== */

/* ---------- 1. TOKENS ---------------------------------------------------- */

:root {
  /* Base ramp — near-black */
  --ink-900: #0A0A0B;   /* page base            */
  --ink-850: #0D0D0F;   /* alternate band       */
  --ink-800: #121216;   /* card                 */
  --ink-750: #17171C;   /* raised card / inset  */

  /* Silver / graphite ramp — 5 steps */
  --silver-1: #F4F5F7;  /* near-white text            */
  --silver-2: #C8CCD2;  /* secondary text, mono values */
  --silver-3: #9AA0A8;  /* body muted   (7.4:1 on base) */
  --silver-4: #868C94;  /* small labels  (5.7:1 on base) */
  --silver-5: #3E434A;  /* borders and disabled only, never text */

  --white: #FFFFFF;

  /* Semantic — exactly two hues, per brief */
  --pass:  #3FB950;     /* PASS / IDENTICAL / ✓ */
  --amber: #D29922;     /* in-progress          */
  --pass-bg:  rgba(63, 185, 80, 0.10);
  --amber-bg: rgba(210, 153, 34, 0.10);

  /* Hairlines */
  --rule:   rgba(255, 255, 255, 0.10);
  --rule-2: rgba(255, 255, 255, 0.15);

  /* Type families */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
               'Liberation Mono', 'Courier New', monospace;

  /* 8px spacing scale */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 40px;  --s6: 48px;  --s8: 64px;  --s10: 80px;
  --s12: 96px; --s16: 128px;

  /* Rhythm & grid */
  --section-y: clamp(64px, 9vw, 160px);
  /* Content measure. At 1920 this leaves roughly half the side space the old
     1200 did, which is the point: on a wide display the page was a narrow
     column with large empty margins. Prose is still capped at 68ch, so lines
     do not become unreadably long as the grids widen. */
  --measure: 1560px;
  --gutter: clamp(20px, 4vw, 40px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
}

/* ---------- 2. RESET & BASE --------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--silver-2);
  background: var(--ink-900);
  overflow-x: hidden;
}

/* Grain — one inline SVG, no network request */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

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

::selection { background: var(--silver-1); color: var(--ink-900); }

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

.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--ink-850); border-block: 1px solid var(--rule); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ink-900);
  padding: 12px 20px;
  z-index: 999;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- 3. TYPOGRAPHY ------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.03;
  color: var(--white);
  font-size: clamp(44px, 7vw, 96px);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-weight: 700;
}

h1 { font-size: clamp(34px, 5vw, 64px); }
h2 { font-size: clamp(27px, 3.4vw, 44px); }
h3 { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.01em; }
h4 { font-size: 17px; letter-spacing: 0; }

p { max-width: 68ch; }
.lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--silver-2); }
.muted { color: var(--silver-3); }
.small { font-size: 14px; line-height: 1.55; }

/* The mono-as-truth motif: every number, hash, metric and command */
.mono, .num, code, kbd, samp, pre { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--silver-3);
}

/* ---------- 4. SECTION HEADER (numbered index motif) -------------------- */

.section-header { margin-bottom: var(--s6); }

.section-header__index {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.section-header__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--silver-4);
  letter-spacing: 0.1em;
}

.section-header__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--white);
  white-space: nowrap;
}

.section-header__index::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.section-header p { margin-top: var(--s2); color: var(--silver-3); }

/* ---------- 5. TAG / CHIP ----------------------------------------------- */

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--silver-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 13px;
  white-space: nowrap;
}

/* ---------- 6. PROOF BADGE ---------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
  border: 1px solid;
  white-space: nowrap;
}

.badge--pass {
  color: var(--pass);
  background: var(--pass-bg);
  border-color: rgba(63, 185, 80, 0.30);
}

.badge--amber {
  color: var(--amber);
  background: var(--amber-bg);
  border-color: rgba(210, 153, 34, 0.30);
}

.badge--neutral {
  color: var(--silver-2);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rule);
}

.badge__mark { font-size: 12px; line-height: 1; }

/* ---------- 7. STAT TILE ------------------------------------------------ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s2);
}

/* Fixed-column variants avoid orphaned tiles on the last row. */
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .stat-grid--3, .stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stat-grid--3, .stat-grid--4 { grid-template-columns: 1fr; }
}

/* Each figure is its own tile with an icon to enter on, matching the band on
   the home page, rather than a cell in a hairline grid. */
.stat-tile {
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s4) var(--s3) var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.stat-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--silver-5);
  transition: background var(--t-base) var(--ease);
}

.stat-tile:hover {
  border-color: var(--rule-2);
  transform: translateY(-2px);
}

.stat-tile:hover::before { background: var(--pass); }

.stat-tile__icon {
  color: var(--silver-4);
  margin-bottom: 2px;
  transition: color var(--t-base) var(--ease);
}

.stat-tile:hover .stat-tile__icon { color: var(--silver-2); }

.stat-tile__icon svg { width: 24px; height: 24px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .stat-tile, .stat-tile:hover { transform: none; }
}

.stat-tile__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}

.stat-tile__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--silver-3);
}

.stat-tile__source {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--silver-4);
  margin-top: auto;
  padding-top: var(--s1);
}

.stat-tile__badge { margin-top: 2px; }

/* ---------- 8. HASH BLOCK ----------------------------------------------- */

.hash {
  background: var(--ink-750);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s2) var(--s3);
}

.hash__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.hash__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--silver-4);
}

.hash__value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--silver-1);
  word-break: break-all;
  flex: 1;
  min-width: 200px;
}

.hash__value[data-truncated='true'] .hash__rest { display: none; }

.hash__actions { display: flex; gap: var(--s1); }

.btn-icon {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--silver-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.btn-icon:hover { color: var(--white); border-color: var(--rule-2); }

/* Paired hashes with match indicator */
.hash-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s2);
  align-items: center;
}

.hash-pair__match {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--pass);
}

.hash-pair__match span {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .hash-pair { grid-template-columns: 1fr; }
  .hash-pair__match { flex-direction: row; }
}

/* ---------- 9. CODE VIEWER ---------------------------------------------- */

.code-viewer {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-850);
}

.code-viewer__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-800);
  overflow-x: auto;
  scrollbar-width: thin;
}

.code-viewer__tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--silver-4);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 13px 20px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.code-viewer__tab:hover { color: var(--silver-2); }
.code-viewer__tab[aria-selected='true'] {
  color: var(--white);
  border-bottom-color: var(--silver-2);
  background: var(--ink-850);
}

.code-viewer__panel[hidden] { display: none; }

.code-viewer__caption {
  padding: 12px 20px;
  font-size: 13px;
  color: var(--silver-3);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.015);
}

.code-viewer__scroll { overflow-x: auto; max-height: 460px; overflow-y: auto; }

.code-viewer pre {
  display: flex;
  font-size: 13px;
  line-height: 1.7;
  padding: var(--s2) 0;
}

.code-viewer__gutter {
  flex: 0 0 auto;
  padding-inline: 16px 14px;
  text-align: right;
  color: var(--silver-4);
  user-select: none;
  border-right: 1px solid var(--rule);
}

.code-viewer__code {
  flex: 1;
  padding-inline: 18px;
  color: var(--silver-2);
  white-space: pre;
}

/* Prisma / code tokens — greyscale + one accent, no rainbow */
.tok-kw  { color: var(--white); font-weight: 700; }
.tok-typ { color: var(--silver-1); }
.tok-att { color: var(--silver-4); }
.tok-str { color: var(--pass); }
.tok-com { color: var(--silver-4); font-style: italic; }
.tok-num { color: var(--silver-1); }

/* ---------- 10. BRIEF DOCUMENT ------------------------------------------ */

.brief-doc {
  position: relative;
  max-width: 920px;          /* reads as a sheet, not a full-bleed panel */
  margin-inline: auto;
  background: #101013;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 24px 60px rgba(0, 0, 0, 0.5);
}

.brief-doc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: 14px var(--s4);
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.02);
}

.brief-doc__title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--silver-3);
}

.brief-doc__body {
  padding: var(--s6) clamp(24px, 5vw, 64px);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--silver-1);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.brief-doc__body p + p { margin-top: 1.4em; }

.brief-doc__foot {
  padding: 12px var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--silver-4);
}

/* ---------- 11. NUMBERED CALLOUT CARDS ---------------------------------- */

.callouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s3);
  counter-reset: callout;
}

.callout {
  position: relative;
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s4) var(--s3) var(--s4) var(--s3);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.callout:hover { border-color: var(--rule-2); transform: translateY(-2px); }

.callout::before {
  counter-increment: callout;
  content: counter(callout, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--silver-4);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--s2);
}

.callout__in {
  font-size: 13.5px;
  color: var(--silver-3);
  line-height: 1.6;
  margin-bottom: 10px;
}

.callout__out {
  font-size: 15px;
  color: var(--white);
  line-height: 1.5;
  font-weight: 500;
}

.callout__arrow { color: var(--silver-4); font-family: var(--font-mono); }

/* ---------- 12. EXAMPLE CARD -------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s3);
}

.example-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s3);
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}

.example-card:hover {
  transform: translateY(-3px);
  border-color: var(--rule-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
              0 18px 40px rgba(0, 0, 0, 0.45);
}

.example-card__title { font-size: 19px; }
.example-card__summary { font-size: 14px; color: var(--silver-3); }

.example-card__stats {
  display: flex;
  gap: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  margin-top: auto;
}

.mini-stat { display: flex; flex-direction: column; gap: 3px; }
.mini-stat__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  color: var(--white);
}
.mini-stat__l {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--silver-4);
}

/* ---------- 13. TIMELINE RAIL ------------------------------------------- */

.rail { position: relative; padding-left: 26px; }

.rail::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--rule);
}

.rail__item { position: relative; padding-bottom: var(--s4); }
.rail__item:last-child { padding-bottom: 0; }

.rail__item::before {
  content: '';
  position: absolute;
  left: -26px; top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink-900);
  border: 1px solid var(--silver-3);
}

.rail__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--silver-4);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ---------- 14. SCREENS GALLERY + LIGHTBOX ------------------------------ */

.screens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3);
}

.screen {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-800);
  padding: 0;
  text-align: left;
  width: 100%;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.screen:hover { border-color: var(--rule-2); transform: translateY(-2px); }
.screen__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

.screen__empty {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.02) 0 10px,
      transparent 10px 20px);
  color: var(--silver-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s2);
}

.screen__cap {
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--silver-3);
  border-top: 1px solid var(--rule);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 7, 0.94);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.lightbox[hidden] { display: none; }
.lightbox img { max-height: 82vh; width: auto; border: 1px solid var(--rule-2); }
.lightbox__cap {
  margin-top: var(--s2);
  font-size: 13px;
  color: var(--silver-3);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  color: var(--silver-1);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 14px;
}

/* ---------- 15. PROVENANCE (certificate footer) ------------------------- */

.provenance {
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
    var(--ink-850);
  padding: var(--s6) var(--s4);
}

.provenance__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.provenance__seal {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--silver-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--silver-2);
}

.provenance__statement {
  font-size: 15px;
  color: var(--silver-2);
  margin-block: var(--s3);
  max-width: 70ch;
}

/* ---------- 16. BUTTONS -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--ink-900);
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease);
}

.btn:hover { background: transparent; color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--silver-1);
  border-color: var(--rule-2);
}

.btn--ghost:hover { background: var(--white); color: var(--ink-900); border-color: var(--white); }

/* ---------- 17. STAGING / PLACEHOLDER AFFORDANCES ----------------------- */
/* Removed at sign-off. Makes unapproved content impossible to mistake.     */

.staging-banner {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--amber-bg);
  border-bottom: 1px solid rgba(210, 153, 34, 0.4);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px var(--gutter);
  backdrop-filter: blur(8px);
}

[data-ph] {
  text-decoration: underline dashed rgba(210, 153, 34, 0.5);
  text-underline-offset: 4px;
}

/* ---------- 18. MOTION --------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 19. PRINT ---------------------------------------------------- */

@media print {
  :root { --ink-900: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, .staging-banner, .lightbox, .btn, .site-nav { display: none !important; }
  h1, h2, h3, h4, .display, .stat-tile__value { color: #000; }
  .muted, .small, .stat-tile__label, .stat-tile__source { color: #444; }
  .brief-doc, .provenance, .callout, .stat-tile, .code-viewer {
    background: #fff;
    border: 1px solid #bbb;
    box-shadow: none;
    break-inside: avoid;
  }
  .brief-doc__body, .code-viewer__code, .hash__value { color: #000; }
  .badge { border-color: #666; color: #000; background: none; }
  .section { padding-block: 18pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ---------- 20. SITE CHROME (nav / footer) ------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 14px var(--gutter);
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-nav__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--white);
}

.site-nav__links { display: flex; gap: var(--s3); list-style: none; align-items: center; }

.site-nav__links a {
  font-size: 13.5px;
  color: var(--silver-3);
  transition: color var(--t-fast) var(--ease);
}

.site-nav__links a:hover { color: var(--white); }
.site-nav__links a[aria-current='page'] { color: var(--white); }

.site-nav__links a[aria-disabled='true'] {
  color: var(--silver-5);
  cursor: not-allowed;
}

@media (max-width: 880px) {
  .site-nav__links { display: none; }
}

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s6);
  margin-top: var(--section-y);
}

.site-footer__legal {
  font-size: 12.5px;
  color: var(--silver-4);
  line-height: 1.7;
}

/* ---------- 21. CASE FILE (example detail) ------------------------------ */

.case-header { padding-block: var(--s10) var(--s6); }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-4);
  margin-bottom: var(--s4);
}

.breadcrumb a { color: var(--silver-3); }
.breadcrumb a:hover { color: var(--white); }

.case-header__title { margin-block: var(--s3) var(--s3); max-width: 20ch; }

.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}

.case-meta__item { display: flex; flex-direction: column; gap: 5px; }

.case-meta__k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--silver-4);
}

.case-meta__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--silver-1);
}

.builds { display: flex; flex-wrap: wrap; gap: var(--s1); }

.stack { display: grid; gap: var(--s3); }
.stack--lg { gap: var(--s6); }

/* ============================================================================
   22. PAGE SYSTEM  ·  hero, pipeline, panels, tables, forms
   ========================================================================== */

/* ---------- Mobile nav ---------- */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  z-index: 120;
}
.nav-mobile-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--white);
  margin: 5px 0;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.nav-mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
.nav-mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

@media (max-width: 880px) {
  .nav-mobile-toggle { display: block; }
  .site-nav__links.open {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    background: rgba(10, 10, 11, 0.98);
    z-index: 110;
  }
  .site-nav__links.open a { font-size: 20px; color: var(--silver-1); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s10) var(--s8);
}

/* Optional hero banner. Empty by default, so the particle field and flat ink
   ground below it are what shows until an image is uploaded from the dashboard.
   Setting an image hides the canvas; clearing it brings the canvas back.

   Desktop and mobile are independent. Each viewport shows the banner only if an
   image exists for it, so a mobile-only image leaves the desktop background
   untouched, and a desktop-only image still covers phones as it did before. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background-color: var(--ink-900);
  background-image: var(--hero-bg-desktop, none);
  background-position: var(--hero-bg-pos, center);
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__bg[data-desktop='1'] { display: block; }

@media (max-width: 720px) {
  /* The mobile focal point re-frames whichever image is showing, so one image
     can be cropped differently on a phone. Unset, it follows the main one. */
  .hero__bg { background-position: var(--hero-bg-pos-mobile, var(--hero-bg-pos, center)); }

  .hero__bg[data-mobile='1'] {
    display: block;
    background-image: var(--hero-bg-mobile, none);
  }
}

/* Two scrims. The first is the dial exposed in the dashboard; the second is
   fixed and weights the left, where the text sits, so white type keeps its
   contrast whatever image is uploaded. */
.hero__bg::before,
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.hero__bg::before {
  background: var(--ink-900);
  opacity: var(--hero-dim, 0.55);
}

.hero__bg::after {
  background:
    linear-gradient(90deg,
      rgba(10, 10, 11, 0.82) 0%,
      rgba(10, 10, 11, 0.55) 48%,
      rgba(10, 10, 11, 0.12) 100%),
    linear-gradient(0deg,
      rgba(10, 10, 11, 0.88) 0%,
      rgba(10, 10, 11, 0) 52%);
}

/* On a phone the text spans the full width rather than the left half, so the
   sideways falloff that protects desktop type leaves the right-hand end of
   every line under-scrimmed. Flatten it and deepen the foot. */
@media (max-width: 720px) {
  .hero__bg::after {
    background:
      linear-gradient(90deg,
        rgba(10, 10, 11, 0.86) 0%,
        rgba(10, 10, 11, 0.62) 100%),
      linear-gradient(0deg,
        rgba(10, 10, 11, 0.94) 0%,
        rgba(10, 10, 11, 0) 62%);
  }
}

#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.55;
}

/* The hero sits in a flex row, so .container's `margin: 0 auto` would centre
   it as a flex item at a narrower measure than the sections below. Filling the
   line keeps its left edge and width identical to every .container on the page. */
.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s3);
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-2);
  margin-bottom: var(--s4);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-2);
  display: inline-block;
}

.hero__headline {
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 20ch;
  text-wrap: balance;
}

.hero__support {
  margin-top: var(--s3);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.5;
  color: var(--silver-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.hero__runs {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--silver-2);
  letter-spacing: 0.08em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

.hero__patent {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--silver-4);
}

/* ---------- Two column split ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split__aside { position: sticky; top: 96px; }

@media (max-width: 900px) {
  .split, .split--even { grid-template-columns: 1fr; }
  .split__aside { position: static; }
}

/* ---------- Pipeline with zone boundary ---------- */
/* ---------- PIPELINE DIAGRAM -------------------------------------------- */
/* Not a row of cards. Each zone is a container that encloses its own steps, so
   the divide is structural: you can see where one ends because the box ends.
   The seal is the gate between them, on the boundary rather than beside it. */

.pipeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s2);
  align-items: stretch;
}

.zone {
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  padding: var(--s3);
  background: rgba(255, 255, 255, 0.015);
}

/* The sealed half is marked as such by its own edge, in the green this site
   already uses for what is verified. */
.zone--engine {
  border-color: rgba(63, 185, 80, 0.38);
  background: rgba(63, 185, 80, 0.035);
}

.zone__head {
  position: relative;
  padding: 0 0 var(--s3) 20px;
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-3);
}

.zone__head b { color: var(--silver-1); }

.zone__head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--silver-4);
}

.zone--engine .zone__head { border-bottom-color: rgba(63, 185, 80, 0.3); }
.zone--engine .zone__head::before { background: var(--pass); }

.zone__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--s2);
}

/* ---- the gate ---- */

.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 var(--s2);
}

.gate::before,
.gate::after {
  content: '';
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(63, 185, 80, 0) 0%, rgba(63, 185, 80, 0.6) 100%);
}

.gate::after {
  background: linear-gradient(180deg,
    rgba(63, 185, 80, 0.6) 0%, rgba(63, 185, 80, 0) 100%);
}

.gate__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: var(--s3) 7px;
  border: 1px solid rgba(63, 185, 80, 0.5);
  border-radius: 999px;
  background: var(--ink-900);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pass);
  white-space: nowrap;
}

/* ---- the steps themselves ---- */

.node {
  position: relative;
  background: #ECEEF0;
  border: 1px solid #ECEEF0;
  border-radius: 10px;
  padding: var(--s3) var(--s3) var(--s3) var(--s3);
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

.node h3,
.node p,
.node .node__tag {
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

/* The number is a solid badge, not a watermark tucked behind the text. A
   translucent wash was invisible on the metal and invisible again once the
   card inverted; this carries its own foreground and ground in both states. */
.node__badge {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.node__tag {
  display: inline-block;
  margin-bottom: var(--s2);
  padding: 4px 10px;
  border: 1px solid rgba(10, 10, 11, 0.28);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3A4048;
}

.node h3 {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--ink-900);
  padding-right: 42px;
}

.node p {
  font-size: 13.5px;
  line-height: 1.65;
  color: #2E333A;
}

.node:hover {
  transform: translateY(-3px);
  background: var(--ink-800);
  border-color: var(--rule-2);
}

.node:hover h3 { color: var(--white); }
.node:hover p { color: var(--silver-3); }
.node:hover .node__tag { color: var(--silver-3); border-color: var(--rule-2); }
.node:hover .node__badge { background: var(--white); color: var(--ink-900); }

/* A chevron between steps inside a zone. */
.node + .node::before {
  content: '\203A';
  position: absolute;
  left: calc(var(--s2) * -1);
  top: 50%;
  width: var(--s2);
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 19px;
  line-height: 1;
  color: var(--silver-4);
}

@media (max-width: 1100px) {
  .zone__steps { grid-template-columns: 1fr; }
  .node + .node::before {
    content: '\2304';
    left: 0;
    right: 0;
    width: 100%;
    top: calc(var(--s2) * -1 - 4px);
    transform: none;
  }
}

@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; }

  /* Stacked, the gate lies across the column instead of standing beside it. */
  .gate { flex-direction: row; padding: var(--s2) 0; }
  .gate::before,
  .gate::after {
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(63, 185, 80, 0) 0%, rgba(63, 185, 80, 0.6) 100%);
  }
  .gate::after {
    background: linear-gradient(90deg,
      rgba(63, 185, 80, 0.6) 0%, rgba(63, 185, 80, 0) 100%);
  }
  .gate__label { writing-mode: horizontal-tb; transform: none; padding: 7px var(--s3); }
}

/* ---------- Panels (property + proof) ---------- */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s2);
}

.panel {
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s4) var(--s3);
  transition: border-color var(--t-base) var(--ease);
}
.panel:hover { border-color: var(--rule-2); }
.panel h3 { font-size: 17px; margin-bottom: 10px; }
.panel p { font-size: 14px; line-height: 1.65; color: var(--silver-3); }

.panel--seal { border-left: 2px solid var(--pass); }

/* ---------- Proof band ---------- */
.proof-band {
  background: var(--ink-850);
  border-block: 1px solid var(--rule);
  padding-block: var(--s10);
}

.proof-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
}

/* Each figure is a tile rather than a bare number against a rule: an icon to
   enter on, the figure, then what it counts. */
.counter {
  position: relative;
  padding: var(--s4) var(--s3) var(--s4) var(--s4);
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

/* The accent that marked the old left rule, kept as a wash that answers to
   hover rather than sitting at full strength all the time. */
.counter::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--silver-5);
  transition: background var(--t-base) var(--ease);
}

.counter:hover {
  border-color: var(--rule-2);
  transform: translateY(-2px);
}

.counter:hover::before { background: var(--pass); }

.counter__icon {
  color: var(--silver-4);
  margin-bottom: var(--s3);
  transition: color var(--t-base) var(--ease);
}

.counter:hover .counter__icon { color: var(--silver-2); }

.counter__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.counter__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  letter-spacing: -0.02em;
}
.counter__l {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--silver-3);
}

@media (prefers-reduced-motion: reduce) {
  .counter, .counter:hover { transform: none; }
}

@media (max-width: 820px) { .proof-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .proof-band__grid { grid-template-columns: 1fr; } }

/* ---------- Data table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; }

.data-table { width: 100%; border-collapse: collapse; min-width: 520px; }

.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--ink-800);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--silver-2);
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-2);
}

.data-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-850);
  font-size: 15px;
  color: var(--silver-1);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--ink-800); }

.data-table .score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  text-align: right;
  white-space: nowrap;
}
.data-table .score em { font-style: normal; font-size: 12px; color: var(--silver-4); }

/* The score drawn against the full ten, not a truncated scale. Every bar
   sitting near the end is the finding, and shortening the axis to dramatise
   the gaps between them would misrepresent it. */
.data-table .bar { width: 42%; padding-right: 0; }

.score-bar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.score-bar__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(63, 185, 80, 0.55), var(--pass));
  transition: width 900ms var(--ease);
}

/* Held at zero only once the row is known to be on screen, so a reader who
   never sees the animation is never shown an empty bar. */
.audit-animate .score-bar__fill { width: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .score-bar__fill { transition: none; }
  .audit-animate .score-bar__fill { width: var(--w) !important; }
}

@media (max-width: 720px) {
  .data-table .bar { display: none; }
}
.row-note { display: block; margin-top: 5px; font-size: 12.5px; color: var(--silver-4); }

/* ---------- Honesty notes ---------- */
.note {
  border-left: 2px solid var(--rule-2);
  padding: 2px 0 2px var(--s3);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--silver-2);
  max-width: 78ch;
}
.note + .note { margin-top: var(--s3); }

/* ---------- Feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
/* A spec sheet rather than nine identical boxes. Most of these items carry a
   figure inside their prose, so the figure is lifted to the top of the card and
   the sentence explains it, which is the order the reader wants them in. */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--ink-750) 0%, var(--ink-800) 60%);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--s4) var(--s3) var(--s3);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}

/* A hairline along the top edge that lights as the card is pointed at. */
.feature::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--silver-5), rgba(255, 255, 255, 0));
  transition: background var(--t-base) var(--ease);
}

.feature:hover {
  border-color: var(--rule-2);
  transform: translateY(-3px);
}

.feature:hover::before {
  background: linear-gradient(90deg, var(--pass), rgba(63, 185, 80, 0));
}

/* The icon sits in a chip, so it reads as a mark rather than a stray glyph. */
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--s3);
  border: 1px solid var(--rule-2);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--silver-3);
  transition: color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.feature:hover .feature__icon {
  color: var(--silver-1);
  border-color: rgba(63, 185, 80, 0.45);
}

.feature__icon svg { width: 20px; height: 20px; display: block; }

.feature__metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin-bottom: 6px;
}

/* A range needs more room than a single figure, so it is set smaller rather
   than allowed to wrap mid-number. */
.feature__metric--long { font-size: clamp(22px, 2.1vw, 28px); }

.feature__unit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-4);
  margin-bottom: var(--s3);
}

.feature h3 {
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
  color: var(--white);
}

.feature p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--silver-3);
}

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

@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Demo steps ---------- */
.steps { display: grid; gap: var(--s2); }
.steps { position: relative; }

.step-row {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: var(--s3);
  padding: 0 0 var(--s5);
}

.step-row:last-child { padding-bottom: 0; }

/* A rail joining one step to the next, stopping at the last. */
.step-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 8px;
  width: 1px;
  background: var(--rule-2);
}

.step-row__n {
  width: 36px; height: 36px;
  background: #ECEEF0;
  border: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  position: relative;
  z-index: 1;
}
.step-row h3 { font-size: 16px; margin-bottom: 6px; }
.step-row p { font-size: 14.5px; line-height: 1.6; color: var(--silver-3); }

.eliminates {
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s3);
}
.eliminates h3 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver-3);
  margin-bottom: var(--s2);
}
.eliminates li {
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
  color: var(--silver-3);
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}
.eliminates li:first-of-type { border-top: none; }
.eliminates li b { color: var(--silver-1); font-weight: 700; }

/* ---------- Statement banner ---------- */
.statement {
  margin-top: var(--s5);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--ink-850);
  padding: var(--s5) var(--s4);
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--silver-1);
  text-align: center;
  max-width: none;
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--ink-800);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s4);
}
.form-card h3 { font-size: 18px; margin-bottom: 8px; }
.form-card > p { font-size: 14px; color: var(--silver-3); margin-bottom: var(--s3); }

.form { display: grid; gap: var(--s2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-3);
  margin-bottom: 8px;
}

.field input, .field select, .field textarea {
  width: 100%;
  background: var(--ink-900);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--silver-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--t-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--silver-2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--silver-4); }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AA0A8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.field select option { background: var(--ink-800); color: var(--silver-1); }

.form .btn { justify-self: start; }
.form-status { font-size: 13.5px; color: var(--silver-2); min-height: 20px; }

/* ---------- Contact meta ---------- */
.contact-meta { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.contact-email {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--white);
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 2px;
  margin-bottom: var(--s3);
}
.contact-email:hover { border-bottom-color: var(--white); }
.contact-founder { font-size: 15px; color: var(--silver-1); margin-bottom: 4px; }
.contact-bio { font-size: 14px; color: var(--silver-3); }

/* ---------- Source line ---------- */
.source {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--silver-4);
  margin-top: 10px;
}
.caption { font-size: 12.5px; color: var(--silver-4); margin-top: var(--s3); }

/* ---------- Footer ---------- */
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s3);
  flex-wrap: wrap;
}
.site-footer__tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-2);
  margin-bottom: 10px;
}
.site-footer__links { display: flex; gap: var(--s3); }
.site-footer__links a { font-size: 13px; color: var(--silver-3); }
.site-footer__links a:hover { color: var(--white); }

/* Long textual stat values (e.g. "a quarter of the engineering week") */
.stat-tile__value--text {
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
}

.site-nav__mark img { height: 22px; width: auto; }

/* ---------- Stat grid variants + prose labels --------------------------- */
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 520px) { .stat-grid--2 { grid-template-columns: 1fr; } }

/* Where the label is a sentence rather than a short caption. */
.stat-grid--prose .stat-tile__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--silver-2);
}

/* ---------- Replay proof card ------------------------------------------- */
.runs-card {
  background: var(--ink-800);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  padding: var(--s3);
  font-family: var(--font-mono);
}

.runs-card-title {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--silver-3);
  margin-bottom: var(--s2);
}

.runs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--silver-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}
.runs-row:last-of-type { border-bottom: none; }
.runs-row .run-id { color: var(--white); font-weight: 700; }
.runs-row .run-result { color: var(--pass); }

.runs-card-footer {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--silver-2);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
}

/* ---------- 20. LEGAL PAGES --------------------------------------------- */
/* Privacy and 404 sit under the fixed navigation with no hero, so the first
   band needs its own top offset. */

.legal, .notfound { padding-top: calc(var(--section-y) + 40px); }

.legal__title { margin-top: var(--s2); }

.legal__intro { margin-top: var(--s3); }

.legal__stamp {
  margin-top: var(--s3);
  color: var(--silver-4);
  letter-spacing: 0.02em;
}

.legal__body {
  margin-top: var(--s8);
  border-top: 1px solid var(--rule);
}

.legal__section {
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.legal__section h2 {
  font-size: clamp(19px, 1.7vw, 23px);
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
}

.legal__section p {
  color: var(--silver-3);
  font-size: 16px;
  line-height: 1.68;
}

.legal__section p + p { margin-top: 1.2em; }

.legal__list {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
  max-width: 68ch;
}

.legal__list li {
  position: relative;
  padding-left: 22px;
  color: var(--silver-3);
  font-size: 16px;
  line-height: 1.68;
}

.legal__list li + li { margin-top: 8px; }

.legal__list + p { margin-top: 1.2em; }

.legal__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--silver-4);
}

/* ---------- 21. NOT FOUND ----------------------------------------------- */

.notfound__inner {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.notfound__code {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--silver-4);
  margin-bottom: var(--s3);
}

.notfound__heading { font-size: clamp(32px, 4.6vw, 56px); }

.notfound__text { margin-top: var(--s3); color: var(--silver-3); }

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s5);
}

/* ---------- 22. BUILD CHAIN --------------------------------------------- */
/* The sequence as one accumulating line: each word arrives with its arrow and
   stays, so the finished state is a readable statement rather than a frame of
   an animation. Everything is present from the start and only staged in, which
   keeps it correct for assistive tech and with JavaScript off. */

.chain {
  list-style: none;
  margin: var(--s8) 0 0;
  padding: var(--s6) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px var(--s3);
  border-top: 1px solid var(--rule);
}

.chain__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: clamp(17px, 2.1vw, 30px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-3);
  white-space: nowrap;
}

/* Arrows are drawn between items rather than written into the text, so they
   are never part of the sequence itself. */
.chain__item + .chain__item::before {
  content: '\2192';
  color: var(--silver-4);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* The seal is the zone boundary, not another step, so it is the one word that
   is set as an object: a stamped chip carrying the pipeline's own marker. */
.chain__item--seal { color: var(--white); }

/* The chip is a child of the item so the arrow stays outside the stamped box. */
.chain__seal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(63, 185, 80, 0.55);
  border-radius: 3px;
  background: var(--pass-bg);
}

.chain__seal::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pass);
  box-shadow: 0 0 0 3px var(--pass-bg);
}

/* The result is not a sixth step. It is what the five produce. */
.chain__item--result {
  color: var(--white);
  font-weight: 700;
}

/* ---- staged arrival ---- */

.chain--animate .chain__item {
  opacity: 0;
}

.chain--animate.is-running .chain__item {
  animation: chain-in 520ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 620ms);
}

/* The arrow slides in with the item like any other; the chip is pressed on
   after it, dropping from oversize, settling past its mark, and throwing a
   ring outward as it bites. */
.chain--animate .chain__seal { opacity: 0; }

.chain--animate.is-running .chain__seal {
  animation:
    chain-seal 620ms var(--ease) forwards,
    chain-seal-ring 760ms ease-out;
  animation-delay:
    calc(var(--i, 0) * 620ms + 100ms),
    calc(var(--i, 0) * 620ms + 380ms);
}

/* The last word waits a beat longer and overshoots slightly, so it lands
   rather than continuing the rhythm of the steps before it. */
.chain--animate.is-running .chain__item--result {
  animation: chain-result 680ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 620ms + 520ms);
}

@keyframes chain-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes chain-seal {
  0%   { opacity: 0; transform: scale(1.55); }
  55%  { opacity: 1; transform: scale(0.94); }
  78%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes chain-seal-ring {
  from { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.45); }
  to   { box-shadow: 0 0 0 22px rgba(63, 185, 80, 0); }
}

@keyframes chain-result {
  0%   { opacity: 0; transform: translateX(-12px) scale(0.96); }
  62%  { opacity: 1; transform: translateX(0) scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* Stacked on a phone, where six words and five arrows cannot share a line.
   Downward arrows echo the pipeline underneath, in their own gutter so every
   word starts on the same left edge. */
@media (max-width: 720px) {
  .chain {
    flex-direction: column;
    align-items: center;
    gap: 12px 0;
  }
  .chain__item {
    flex-direction: column;
    gap: 10px;
  }

  .chain__item + .chain__item::before {
    content: '\2193';
  }
}

/* Motion is decoration here: the finished line carries the meaning, so show it
   complete and skip the staging entirely. */
@media (prefers-reduced-motion: reduce) {
  .chain--animate .chain__item,
  .chain--animate .chain__seal,
  .chain--animate.is-running .chain__item,
  .chain--animate.is-running .chain__seal,
  .chain--animate.is-running .chain__item--result {
    opacity: 1;
    transform: none;
    animation: none;
    box-shadow: none;
  }
}

/* A section's writing on one side, a capture on the other. The wider measure
   left a lot of empty space beside a paragraph capped at 68ch; this uses it,
   and keeps a screenshot from spanning the column and swamping the section. */
.section-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  margin-bottom: var(--s6);
}

.section-lead .section-header { margin-bottom: 0; }

.section-lead .figure { margin-top: 0; width: 100%; }

@media (max-width: 900px) {
  .section-lead {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

/* ---------- 23. FIGURES -------------------------------------------------- */
/* Product screenshots. Framed rather than floated on the page ground, because
   the captures are themselves dark UI and would otherwise bleed into it. */

/* The frame hugs the capture rather than stretching it. A screenshot scaled up
   past its own pixels goes soft, and these are dense interface captures where
   the small type is the point. */
.figure {
  width: fit-content;
  max-width: 100%;
  margin: var(--s6) 0 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-800);
}

.figure img {
  display: block;
  max-width: 100%;
  height: auto;
}

.figure figcaption {
  padding: 12px var(--s3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--silver-4);
}

/* On a phone the capture scales down to fit. A scroll container here pushed the
   page itself sideways, and nothing on this site is allowed to do that. */

/* Supporting copy under a section intro, set quieter than the intro itself so
   the hierarchy still reads intro, then detail. */
.section-detail { margin-top: var(--s3); }

.section-detail p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--silver-3);
  max-width: 62ch;
}

.section-detail p + p { margin-top: 1.1em; }


/* The line the four steps add up to, set as one object under the row. */
.flow-summary {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: var(--s5) auto 0;
  padding: 14px var(--s5);
  border-radius: 999px;
  background: #ECEEF0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}

/* Available to assistive tech, absent from the page. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-th { padding: 0 !important; }

/* The line the categories add up to, given the same treatment as the strip
   that closes the pipeline on the home page. */
.closing-line {
  display: block;
  max-width: 68ch;
  margin: var(--s5) auto 0;
  padding: var(--s3) var(--s5);
  border-radius: 14px;
  background: #ECEEF0;
  color: var(--ink-900);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  font-weight: 700;
  text-align: center;
}

/* Domain chips: a count, then the list, so the number lands before the names. */
.chips-count {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-4);
}

.chips-count b {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
}