/* ==========================================================================
   IteraUX. Shared design system.
   Extracted verbatim from codex-vision-v2.html. Tokens are LOCKED.
   Extensions (steps, faq, form, ledger, interior hero) follow the same
   grammar: 1px rules, mono micro-labels, mega Archivo with a ghost-weight
   word, full-bleed colour bands, asymmetric 4-column placement.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Palette (locked) */
  --paper: #e9e7e1;
  --white: #f6f4ef;
  --ink: #17202c;
  --grey: #898c95;
  --line: rgba(23, 32, 44, .22);
  --line-soft: rgba(23, 32, 44, .12);
  --iris: #8589aa;
  --iris-deep: #5f647f;
  --silver: #c9ced5;
  --ink-line: rgba(255, 255, 255, .2);
  --ink-line-soft: rgba(255, 255, 255, .16);
  /* .46 measured 4.51:1 on --ink: nominally passing, with no margin at all
     for the mono labels that carry it. .50 is 5.05:1 and still sits a clear
     step under --ink-body. */
  --ink-mute: rgba(255, 255, 255, .50);
  --ink-body: rgba(255, 255, 255, .55);
  --dim: #60605a;
  /* --dim reads 5.12:1 on --paper but only 4.00:1 on --silver, so the silver
     bands (fitband, founder) take this darker sibling: 4.90:1 there, still
     clearly quieter than the ink body copy beside it. Additive, not a change
     to any locked value. */
  --dim-strong: #53534c;

  /* Type (locked) */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Space: 4pt scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: clamp(90px, 11vw, 150px);
  --gutter: 19px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .25s;
}

/* --------------------------------------------------------------- 2. Reset */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
figure, blockquote { margin: 0; }
::selection { color: var(--white); background: var(--iris-deep); }

:focus-visible {
  outline: 2px solid var(--iris-deep);
  outline-offset: 3px;
}
.on-ink :focus-visible,
.evidence :focus-visible,
footer :focus-visible { outline-color: var(--iris); }

.skip {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  padding: 10px 16px;
  color: var(--white);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-110%);
}
.skip:focus { transform: translateY(0); }

.sr-only {
  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;
}

/* ------------------------------------------------------------ 3. Primitives */
/* Derived from --gutter so banded sections stay flush with the nav, the hero
   copy and the contact block at every breakpoint. */
.wrap { width: calc(100% - var(--gutter) * 2); margin: 0 auto; }

/* 12px is the floor for any mono label that carries meaning. The only mono
   left below it is the figure furniture (.image-index / .image-caption) and
   the asterisk bullets, which is what section 27 pins back down. */
.micro {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.bracket-link {
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
}
.bracket-link::before { content: "["; }
.bracket-link::after { content: "]"; }
.bracket-link span { transition: letter-spacing var(--t-fast) ease; }
.bracket-link:hover span,
.bracket-link:focus-visible span { letter-spacing: .07em; }

/* Ghost word: the light-weight counterpoint inside a mega heading. */
em, .ghost {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ------------------------------------------------------------- 4. Cursor */
.cursor {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--iris);
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width .18s, height .18s;
}
.cursor.is-over { width: 38px; height: 38px; }

/* ---------------------------------------------------------------- 5. Nav */
.nav {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav.on-paper { background: var(--paper); }

.logo {
  text-decoration: none;
  font-weight: 750;
  font-size: 20px;
  letter-spacing: -.065em;
  white-space: nowrap;
}
.logo sup { color: var(--iris-deep); font-size: 9px; vertical-align: top; }

.nav-center { display: flex; justify-content: center; gap: 28px; }
.nav-center a {
  position: relative;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-center a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav-center a:hover::after,
.nav-center a:focus-visible::after { transform: scaleX(1); }
.nav-center a[aria-current="page"] { color: var(--iris-deep); }
.nav-center a[aria-current="page"]::after { transform: scaleX(1); }

.nav-end { display: flex; justify-content: flex-end; }
.menu-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

/* ------------------------------------------------------- 6. Homepage hero */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 70px;
  overflow: hidden;
  background: var(--paper);
}
.hero-grid {
  min-height: calc(100svh - 70px);
  display: grid;
  grid-template-columns: 38% 62%;
}
/* --title-band is set by JS to the height the mega word occupies inside the
   hero, so the bottom row and the image caption always clear it. */
.hero-copy {
  position: relative;
  z-index: 4;
  padding: 31px var(--gutter) calc(26px + var(--title-band, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  border-right: 1px solid var(--line);
}
.hero-copy-top { display: grid; grid-template-columns: 50px 1fr; gap: 30px; }
.hero-copy-top .micro { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--dim); }
.hero-copy p {
  max-width: 360px;
  margin: 0;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.09;
  letter-spacing: -.045em;
}
.hero-copy p em { font-family: var(--sans); font-style: normal; font-weight: 680; }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.hero-bottom .micro { max-width: 170px; color: var(--dim); }

.hero-image {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  margin: 0;
  background: #c8cbca;
}
.hero-image img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(.84) contrast(1.04);
  transform: translateY(-4%);
  will-change: transform;
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(236, 235, 230, .12), transparent 30%);
  pointer-events: none;
}
.image-index { position: absolute; z-index: 2; top: 18px; right: 18px; color: #20201e; }
.image-caption {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: calc(18px + var(--title-band, 0px));
  padding: 6px 8px;
  color: var(--white);
  background: var(--ink);
}

/* The mega line. JS fits it edge to edge; the clamp is the pre-JS fallback.
   --fit-mode tells the fit routine which contract applies: "fit" scales one
   nowrap line to the gutters, "stack" (mobile) lets CSS size a wrapped lockup. */
.hero-title {
  --fit-mode: fit;
  position: absolute;
  z-index: 8;
  left: 10px;
  right: 10px;
  bottom: clamp(14px, 1.4vw, 24px);
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(52px, 15.7vw, 235px);
  font-weight: 900;
  line-height: .76;
  letter-spacing: -.094em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variation-settings: "wdth" 78;
  transform: scaleX(.94);
  transform-origin: left bottom;
}
.hero-title span {
  color: var(--iris-deep);
  font-family: var(--display);
  font-style: normal;
  font-weight: 250;
  text-transform: uppercase;
}

/* The desktop lockup crosses from the paper panel onto photography. Match the
   letter colour to each surface so the headline remains readable end to end. */
@media (min-width: 901px) {
  .hero-title {
    color: transparent;
    /* 40.3% compensates for the lockup's .94 horizontal scale, aligning the
       visible colour change with the hero grid's 38% panel boundary. */
    background-image: linear-gradient(
      90deg,
      var(--ink) 0%,
      var(--ink) 40.3%,
      var(--white) 40.31%,
      var(--white) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
  }

  .hero-title span {
    color: var(--white);
  }
}

/* --------------------------------------------------- 7. Interior page hero */
.phero {
  position: relative;
  padding-top: 70px;
  overflow: hidden;
  background: var(--paper);
}
.phero-grid {
  min-height: calc(94svh - 70px);
  display: grid;
  grid-template-columns: 54% 46%;
}
.phero-copy {
  position: relative;
  z-index: 4;
  padding: 34px var(--gutter) 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  border-right: 1px solid var(--line);
}
.phero-index { display: flex; justify-content: space-between; gap: var(--sp-5); color: var(--dim); }
.phero-copy h1 {
  margin: var(--sp-7) 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-size: clamp(54px, 7.4vw, 118px);
  font-weight: 650;
  line-height: .82;
  letter-spacing: -.075em;
}
.phero-copy h1 em { font-family: var(--sans); font-style: normal; font-weight: 250; color: var(--iris-deep); }
.phero-lede {
  max-width: 430px;
  margin: var(--sp-5) 0 0;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.22;
  letter-spacing: -.03em;
}
.phero-lede em { font-weight: 680; }
.phero-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 25px; }
.phero-bottom .micro { max-width: 200px; color: var(--dim); }

.phero-media { position: relative; overflow: hidden; background: #c8cbca; }
.phero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.03);
}
.phero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(236, 235, 230, .14), transparent 34%);
  pointer-events: none;
}

/* ------------------------------------------------------------- 8. Ticker */
.ticker {
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ticker-track {
  width: max-content;
  padding: 12px 0 11px;
  display: flex;
  gap: 25px;
  animation: marquee 27s linear infinite;
}
.ticker-track span {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-track b { color: var(--silver); font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- 9. Manifesto */
.manifesto { padding: var(--sp-10) 0 calc(var(--sp-10) + 20px); }
.manifesto-top {
  display: grid;
  grid-template-columns: 1fr 3fr;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--line);
}
.manifesto-copy { max-width: 330px; font-size: 16px; line-height: 1.35; }
.manifesto h2 {
  grid-column: 1 / -1;
  margin: 35px 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-size: clamp(46px, 11vw, 168px);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.073em;
}
.manifesto h2 span {
  display: block;
  margin-left: 16%;
  font-family: var(--sans);
  font-size: .9em;
  font-weight: 650;
  font-style: normal;
  letter-spacing: -.079em;
}
.manifesto-bottom { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.manifesto-bottom .micro { color: var(--dim); }
.manifesto-bottom p {
  grid-column: 3 / 5;
  max-width: 570px;
  margin: 0;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.manifesto-bottom p em { font-family: var(--sans); font-style: normal; font-weight: 680; }

/* ------------------------------------------------- 10. Evidence (ink band) */
.evidence { color: var(--paper); background: var(--ink); }
.evidence-head {
  min-height: 118px;
  padding: 16px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--ink-line);
}
.evidence-head h2 {
  grid-column: 2 / 5;
  margin: 0;
  font-size: clamp(36px, 6.8vw, 104px);
  line-height: .87;
  letter-spacing: -.067em;
  font-weight: 650;
}
.evidence-head h2 em { color: #b9bdd2; font-family: var(--sans); font-style: normal; font-weight: 300; }

.evidence-stage { display: grid; grid-template-columns: 29% 71%; }
.stage-nav { border-right: 1px solid var(--ink-line); }
.stage-item {
  position: relative;
  width: 100%;
  min-height: 138px;
  padding: 18px 18px 22px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-5);
  text-align: left;
  /* An unselected tab is still a readable label, not a hint: .55 on --ink is
     5.87:1. The selected state is carried by pure white (12.90:1), the 4px
     iris rule and the indent, so the hierarchy survives the raise. */
  color: var(--ink-body);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-line-soft);
  cursor: pointer;
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.stage-item:hover { color: rgba(255, 255, 255, .78); }
.stage-item.active { padding-left: 18px; color: var(--white); }
.stage-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--iris);
}
.stage-item span { font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.stage-item strong { max-width: 260px; font-size: 19px; line-height: 1.05; letter-spacing: -.035em; font-weight: 620; }

.stage-main { position: relative; overflow: hidden; padding: 35px; min-height: 620px; }
.stage-main::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .22) 1px, transparent 1px);
  background-size: 10% 86px;
}
.finding-number { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: start; gap: var(--sp-5); }
.finding-number strong {
  color: #b9bdd2;
  font-family: var(--display);
  font-size: clamp(74px, 14vw, 210px);
  line-height: .7;
  font-weight: 700;
  letter-spacing: -.09em;
  font-variation-settings: "wdth" 76;
}
.finding-number .micro { max-width: 175px; color: var(--ink-mute); text-align: right; }
.stage-copy { position: relative; z-index: 2; margin: 130px 0 0 20%; }
.stage-copy h3 {
  max-width: 800px;
  margin: 0 0 24px;
  font-size: clamp(30px, 5.3vw, 82px);
  line-height: .91;
  letter-spacing: -.065em;
  font-weight: 570;
}
.stage-copy h3 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.stage-copy > p { max-width: 520px; margin: 0; color: var(--ink-body); font-size: 16px; line-height: 1.4; }
.impact-line { margin-top: 46px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .25); }
.impact-line div { padding: 14px 0; }
.impact-line div + div { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .25); }
.impact-line span { display: block; margin-bottom: 12px; color: rgba(255, 255, 255, .62); }
.impact-line strong { font-family: var(--sans); font-size: clamp(18px, 1.8vw, 23px); font-weight: 560; letter-spacing: -.04em; line-height: 1.1; }

/* --------------------------------------------------------- 11. System rows */
.system { padding: 0; background: var(--paper); }
.system-head {
  min-height: 230px;
  padding: 18px 0 32px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: end;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.system-head .micro { color: var(--dim); }
.system-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(42px, 8.5vw, 126px);
  line-height: .79;
  letter-spacing: -.078em;
  font-weight: 650;
}
.system-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.system-list { border-bottom: 1px solid var(--line); }
.system-row {
  min-height: 170px;
  display: grid;
  grid-template-columns: .75fr 2.25fr 1fr;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast), background var(--t-fast);
}
.system-row:last-child { border-bottom: 0; }
a.system-row:hover,
a.system-row:focus-visible { color: var(--white); background: var(--iris-deep); }
article.system-row { cursor: default; }
.system-row:hover .count,
.system-row:hover .row-go { color: var(--white); }
.system-row .count { padding-left: 18px; font-family: var(--mono); font-size: 13px; }
.system-row h3 { margin: 0; font-size: clamp(30px, 5vw, 76px); line-height: .85; letter-spacing: -.065em; font-weight: 620; }
.system-row h3 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.system-row p { max-width: 320px; margin: 0; padding-right: 18px; font-size: 12px; line-height: 1.4; }
.system-row .row-go { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }

/* ---------------------------------------------------------- 12. Owner proof */
.owner-proof {
  position: relative;
  min-height: 850px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 56% 44%;
  background: #c8cbca;
}
.owner-proof-media { position: relative; overflow: hidden; }
.owner-proof-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
  filter: saturate(.72) contrast(1.02);
  transform: scale(1.035);
}
.owner-proof-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(95, 100, 127, .09);
  mix-blend-mode: multiply;
}
.owner-proof-copy {
  position: relative;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  background: var(--paper);
  border-left: 1px solid var(--ink);
}
.owner-proof-copy .micro { color: var(--dim); }
.owner-proof-copy blockquote {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 87;
  font-size: clamp(32px, 5.5vw, 82px);
  font-weight: 420;
  line-height: .93;
  letter-spacing: -.06em;
}
.owner-proof-copy blockquote strong {
  display: block;
  color: var(--iris-deep);
  font-family: var(--sans);
  font-weight: 650;
}
.owner-proof-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.owner-proof-bottom p { max-width: 330px; margin: 0; font-size: 17px; line-height: 1.28; letter-spacing: -.025em; }

/* ------------------------------------------------- 13. Metric (iris band) */
.metric { padding: var(--sp-10) 0; color: var(--white); background: var(--iris-deep); }
.metric-grid { display: grid; grid-template-columns: 1fr 3fr; }
.metric-copy { grid-column: 2; }
.metric-copy .micro { display: block; margin-bottom: 85px; }
.metric-number {
  font-family: var(--display);
  font-variation-settings: "wdth" 76;
  font-size: clamp(110px, 23vw, 350px);
  font-weight: 850;
  line-height: .58;
  letter-spacing: -.12em;
  transform: scaleX(.92);
  transform-origin: left;
}
.metric-copy h2 {
  max-width: 930px;
  margin: 80px 0 25px;
  font-size: clamp(38px, 7vw, 105px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 650;
}
.metric-copy h2 em { color: var(--ink); font-family: var(--sans); font-style: normal; font-weight: 300; }
.metric-copy p { max-width: 550px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.4; }
.metric-foot { margin-top: var(--sp-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .3); }
.metric-foot div { padding: 16px 16px 0 0; }
.metric-foot div + div { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .3); }
.metric-foot strong { display: block; margin-top: 10px; font-size: clamp(19px, 2vw, 27px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
/* .6 measured 3.24:1 against --iris-deep, the lightest band on the site. */
.metric-foot span { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------ 14. Steps (numbered band) */
.steps { padding: var(--sp-10) 0; background: var(--paper); }
.steps-head {
  padding-bottom: 34px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: end;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.steps-head .micro { color: var(--dim); }
.steps-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(38px, 7vw, 108px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 650;
}
.steps-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.step {
  display: grid;
  grid-template-columns: .75fr 1.6fr 1.65fr;
  gap: var(--sp-4);
  padding: 34px 0 30px;
  border-bottom: 1px solid var(--line);
}
.step-n {
  font-family: var(--display);
  font-variation-settings: "wdth" 76;
  font-size: clamp(40px, 5vw, 74px);
  font-weight: 800;
  line-height: .72;
  letter-spacing: -.09em;
  color: var(--iris-deep);
}
.step h3 { margin: 0; max-width: 320px; font-size: clamp(22px, 2.4vw, 34px); line-height: .96; letter-spacing: -.05em; font-weight: 620; }
.step-body { max-width: 520px; }
.step-body p { margin: 0; font-size: 15px; line-height: 1.45; }
.step-body .micro { display: block; margin-top: 14px; color: var(--dim); }

/* --------------------------------------------------------- 15. Ledger list */
/* Flat spec rows: label left, value right, hairline between. No cards. */
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid;
  grid-template-columns: .75fr 1.4fr 1.85fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--line);
}
.ledger-row .micro { color: var(--dim); }
.ledger-row dt, .ledger-row h3 {
  margin: 0;
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 620;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.ledger-row dd, .ledger-row p { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.45; }
.on-ink .ledger { border-top-color: var(--ink-line); }
.on-ink .ledger-row { border-bottom-color: var(--ink-line-soft); }
.on-ink .ledger-row .micro { color: var(--ink-mute); }
.on-ink .ledger-row dd, .on-ink .ledger-row p { color: var(--ink-body); }

/* ------------------------------------------------------------- 16. Offer */
.offer { color: var(--paper); background: var(--ink); padding: var(--sp-10) 0; }
.offer-head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--ink-line); }
.offer-head .micro { color: var(--ink-mute); }
.offer-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(38px, 7vw, 106px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 650;
}
.offer-head h2 em { color: #b9bdd2; font-family: var(--sans); font-style: normal; font-weight: 300; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.offer-col {
  padding: 34px 24px 30px 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--ink-line-soft);
}
.offer-col + .offer-col { padding-left: 24px; border-left: 1px solid var(--ink-line); }
.offer-col .micro { color: var(--ink-mute); }
.offer-price {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-size: clamp(44px, 5.4vw, 86px);
  font-weight: 780;
  line-height: .78;
  letter-spacing: -.085em;
}
.offer-col.is-lead .offer-price { color: var(--iris); }
.offer-col h3 { margin: 0; font-size: clamp(20px, 2vw, 27px); font-weight: 620; letter-spacing: -.045em; line-height: 1.02; }
.offer-col p { margin: 0; color: var(--ink-body); font-size: 14px; line-height: 1.45; }
.offer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.offer-col li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .75);
}
.offer-col li::before { content: "✳"; color: var(--iris); font-size: 10px; line-height: 1.5; }
.offer-col .bracket-link { margin-top: auto; padding-top: var(--sp-5); }

.terms { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); }
.terms-body { grid-column: 2 / 3; max-width: 720px; }
.terms-body p { margin: 0 0 14px; color: var(--ink-body); font-size: 15px; line-height: 1.5; }
.terms-body p strong { color: var(--white); font-weight: 620; }
.terms .micro { color: var(--ink-mute); }

/* ------------------------------------------------ 15b. Full-bleed image plate */
/* A breath between two heavy colour bands. Same overlay grammar as the heroes. */
.plate {
  position: relative;
  height: clamp(300px, 42vw, 560px);
  overflow: hidden;
  background: #c8cbca;
}
.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(.78) contrast(1.03);
}
.plate .image-index { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------- 16b. Fit / qualifier */
.fitband { padding: var(--sp-10) 0; background: var(--silver); }
.fitband-head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.fitband-head .micro { color: var(--dim-strong); }
.fitband-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(34px, 6.2vw, 92px);
  line-height: .83;
  letter-spacing: -.075em;
  font-weight: 650;
}
.fitband-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; }
.fit-col { padding: 30px 26px 26px 0; }
.fit-col + .fit-col { padding-left: 26px; border-left: 1px solid var(--line); }
.fit-col > .micro { color: var(--dim-strong); }
.fit-col h3 { margin: 12px 0 22px; font-size: clamp(21px, 2.3vw, 31px); font-weight: 620; letter-spacing: -.05em; line-height: 1.02; }
.fit-col ul { margin: 0; padding: 0; list-style: none; }
.fit-col li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 13px 0;
  font-size: 14px;
  line-height: 1.4;
  border-top: 1px solid var(--line);
}
.fit-col li::before { content: "✳"; color: var(--iris-deep); font-family: var(--mono); font-size: 10px; line-height: 1.6; }
/* --grey measured 2.12:1 on --silver, which made the negative marker all but
   invisible. The bullets stay decorative (the column heading carries the
   polarity), but a marker nobody can see is not decoration either. */
.fit-col.is-not li::before { content: "✕"; color: var(--dim-strong); }

/* ---------------------------------------------------------------- 17. FAQ */
.faq { padding: var(--sp-10) 0; background: var(--paper); }
.faq-head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.faq-head .micro { color: var(--dim); }
.faq-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(36px, 6.4vw, 96px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 650;
}
.faq-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  padding: 26px 0 24px;
  display: grid;
  grid-template-columns: .75fr 2.6fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast);
}
.faq-q:hover { color: var(--iris-deep); }
.faq-q .micro { color: var(--dim); }
.faq-q h3 { margin: 0; font-size: clamp(19px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; }
.faq-mark { font-family: var(--mono); font-size: 15px; transition: transform var(--t-fast) var(--ease); }
.faq-q[aria-expanded="true"] .faq-mark { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner > div {
  display: grid;
  grid-template-columns: .75fr 2.6fr auto;
  gap: var(--sp-4);
  padding-bottom: 30px;
}
.faq-a-inner p { grid-column: 2 / 3; margin: 0 0 12px; max-width: 620px; font-size: 15px; line-height: 1.5; }
.faq-a-inner p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- 18. Form */
.formband { color: var(--paper); background: var(--ink); padding: var(--sp-10) 0 calc(var(--sp-10) - 20px); }
.formband-head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--ink-line); }
.formband-head .micro { color: var(--ink-mute); }
.formband-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(40px, 7.4vw, 112px);
  line-height: .81;
  letter-spacing: -.078em;
  font-weight: 650;
}
.formband-head h2 em { color: #b9bdd2; font-family: var(--sans); font-style: normal; font-weight: 300; }

.form-shell { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-7); }
.form-aside { display: flex; flex-direction: column; gap: var(--sp-5); }
.form-aside .micro { color: var(--ink-mute); }
.form-aside p { margin: 0; color: var(--ink-body); font-size: 13px; line-height: 1.5; }
.form-aside strong { display: block; color: var(--white); font-size: 15px; font-weight: 620; letter-spacing: -.03em; margin-bottom: 6px; }

.form-main { max-width: 900px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); }
.field { display: flex; flex-direction: column; }
.field.is-wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -.03em;
  text-transform: uppercase;
  /* A field label is the whole meaning of the control: 7.06:1, above the
     hint and the placeholder that sit under it. */
  color: rgba(255, 255, 255, .62);
  transition: color var(--t-fast);
}
.field label .req { color: var(--iris); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 0 11px;
  color: var(--white);
  background: transparent;
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.03em;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
  appearance: none;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.4; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--iris) 50%), linear-gradient(135deg, var(--iris) 50%, transparent 50%);
  background-position: right 8px center, right 3px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 24px;
  cursor: pointer;
}
.field select option { color: var(--ink); background: var(--paper); }
/* The placeholders are worked examples, not decoration. .28 measured 2.51:1;
   --ink-mute is 5.05:1 and still nowhere near the typed value's 14.93:1. */
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-mute); font-weight: 400; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 0; border-bottom-color: var(--iris); }
.field:focus-within label { color: var(--iris); }
.field .hint { margin-top: 8px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: -.03em; color: var(--ink-mute); }
.field .err {
  display: none;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: var(--iris);
}
.field .err::before { content: "↑ "; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom: 2px solid var(--iris); }
.field.has-error .err { display: block; }
.field.has-error label { color: var(--iris); }

.form-foot { margin-top: var(--sp-8); padding-top: var(--sp-5); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: center; border-top: 1px solid var(--ink-line); }
.form-foot p { margin: 0; max-width: 420px; color: var(--ink-mute); font-family: var(--mono); font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: -.03em; }
.submit {
  padding: 20px 34px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), letter-spacing var(--t-fast);
}
.submit::before { content: "[ "; }
.submit::after { content: " ]"; }
.submit:hover { color: var(--paper); background: var(--iris-deep); border-color: var(--iris-deep); letter-spacing: .05em; }
.submit[disabled] { opacity: .45; cursor: progress; }

.form-success {
  display: none;
  margin-top: var(--sp-7);
  padding: var(--sp-7) 0 0;
  border-top: 1px solid var(--iris);
}
.form-success.is-shown { display: block; }
.form-success .micro { color: var(--iris); }
.form-success h3 {
  margin: var(--sp-4) 0 var(--sp-5);
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-size: clamp(34px, 5.4vw, 76px);
  font-weight: 650;
  line-height: .84;
  letter-spacing: -.072em;
}
.form-success h3 em { color: #b9bdd2; font-family: var(--sans); font-style: normal; font-weight: 300; }
.form-success p { max-width: 540px; margin: 0 0 var(--sp-5); color: var(--ink-body); font-size: 16px; line-height: 1.45; }
.form-hidden { display: none; }

/* --------------------------------------------------------------- 19. Contact */
.contact {
  position: relative;
  min-height: 94svh;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  background: var(--silver);
}
.contact-top { display: flex; justify-content: space-between; gap: var(--sp-5); }
.contact h2 {
  max-width: 1300px;
  margin: 80px 0 0;
  font-size: clamp(52px, 12.3vw, 184px);
  line-height: .79;
  letter-spacing: -.088em;
  font-weight: 650;
}
.contact h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.contact-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: end; }
.contact-bottom p { grid-column: 2 / 3; max-width: 260px; margin: 0; font-size: 14px; line-height: 1.4; }
.contact-action { grid-column: 4; display: flex; justify-content: flex-end; }
.contact-button {
  width: min(100%, 340px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--white);
  background: var(--ink);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  text-transform: uppercase;
  transition: transform .35s var(--ease), background .35s;
}
.contact-button:hover,
.contact-button:focus-visible { transform: rotate(-7deg) scale(1.04); background: var(--iris-deep); }

/* ---------------------------------------------------------------- 20. Footer */
footer { color: var(--paper); background: var(--ink); }
.footer-main { min-height: 220px; padding: 18px 0; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-5); align-items: end; }
.footer-logo { font-size: clamp(48px, 10vw, 150px); font-weight: 750; letter-spacing: -.095em; line-height: .65; }
.footer-links { display: grid; gap: 7px; align-content: end; }
.footer-links a {
  width: max-content;
  max-width: 100%;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  transition: color var(--t-fast);
}
.footer-links a:hover { color: var(--iris); }
/* The legal line is the entity identity, not ornament. .4 measured 3.75:1. */
.footer-legal {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  color: rgba(255, 255, 255, .62);
  border-top: 1px solid var(--ink-line-soft);
}

/* ------------------------------------------------------- 21. Entrance motion */
/* Applied only once JS confirms support, so a no-JS render stays visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ 22. Responsive */
@media (max-width: 1100px) {
  /* The nav labels went from 9px to 12px, which widens the centre track by
     about 100px. At the 901px floor of the desktop nav that left the header
     CTA with 10px of clearance; 14px of gap gives it back. */
  .nav-center { gap: 14px; }
  .stage-copy { margin-left: 8%; }
  .offer-grid { grid-template-columns: 1fr; }
  .offer-col + .offer-col { padding-left: 0; border-left: 0; }
  .offer-col .bracket-link { margin-top: 0; }
}

@media (max-width: 900px) {
  :root { --gutter: 16px; --sp-10: 80px; }
  .cursor { display: none; }

  /* --- Touch legibility -------------------------------------------------
     Mono micro-labels never drop below 12px and running copy never below
     16px: the audience reads this one-handed, at arm's length. The desktop
     rules now set the same 12px floor, so this block only guards against a
     future component reintroducing a smaller size. */
  .micro,
  .bracket-link,
  .ticker-track span,
  .footer-links a,
  .system-row .row-go,
  .form-foot p,
  .field label,
  .field .hint,
  .field .err,
  .stage-item span,
  .nav-center a,
  .contact-button,
  .skip { font-size: 12px; }
  .system-row .count { font-size: 12px; }

  .manifesto-copy,
  .system-row p,
  .step-body p,
  .ledger-row dd, .ledger-row p,
  .offer-col p, .offer-col li,
  .terms-body p,
  .fit-col li,
  .faq-a-inner p,
  .stage-copy > p,
  .impact-line strong,
  .form-aside p,
  .owner-proof-bottom p,
  .contact-bottom p,
  .form-success p { font-size: 16px; line-height: 1.45; }
  .offer-col li, .fit-col li { line-height: 1.4; }
  .form-aside strong { font-size: 16px; }
  .submit { font-size: 13px; }

  /* --- Touch targets ----------------------------------------------------
     Every control clears 44px of height without disturbing the hairline
     grammar: the growth comes from min-height, not from boxes. */
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .skip { display: inline-flex; align-items: center; min-height: 44px; }
  .bracket-link { min-height: 44px; align-items: center; }
  .footer-links { gap: 0; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .form-aside .micro a { display: inline-flex; align-items: center; min-height: 44px; }
  .field input,
  .field select,
  .field textarea { min-height: 48px; padding: 14px 0 13px; }
  .field textarea { min-height: 116px; }
  .submit { min-height: 52px; }

  .nav { grid-template-columns: 1fr auto; }
  .nav-center, .nav-end { display: none; }
  .logo { grid-row: 1; grid-column: 1; }
  .menu-toggle {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    align-items: center;
    justify-content: flex-end;
    min-width: 56px;
    min-height: 44px;
  }
  .nav.mobile-open {
    height: auto;
    min-height: 70px;
    align-items: start;
    padding-top: 22px;
    padding-bottom: 24px;
    background: var(--paper);
  }
  .nav.mobile-open .nav-center {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 26px;
    display: grid;
    grid-auto-flow: row;
    justify-content: stretch;
    justify-items: stretch;
    gap: 0;
  }
  .nav.mobile-open .nav-center a {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0;
    font-size: 13px;
    border-top: 1px solid var(--line);
  }
  .nav.mobile-open .nav-center a::after { display: none; }
  .nav.mobile-open .nav-end {
    grid-row: 3;
    grid-column: 1 / -1;
    margin-top: 22px;
    padding-top: 20px;
    display: flex;
    justify-content: flex-start;
    border-top: 1px solid var(--line);
  }

  /* Broken grid recomposed, not squashed: the lockup leaves the photograph
     and becomes its own paper band between the copy and the image. Ink on
     paper is legible where ink on photography is a gamble. */
  .hero { min-height: 0; }
  .hero-grid { display: block; min-height: 0; }
  .hero-copy {
    min-height: 0;
    padding-bottom: var(--sp-6);
    justify-content: flex-start;
    gap: var(--sp-6);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-title {
    --fit-mode: stack;
    position: static;
    padding: var(--sp-5) var(--gutter) var(--sp-6);
    font-size: clamp(38px, 12.4vw, 76px);
    line-height: .84;
    white-space: normal;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .hero-title span { display: block; }
  .hero-image { min-height: 54svh; }
  /* A percentage height cannot resolve against an auto-height parent, which
     left the photograph short of the figure. Out of flow it resolves. */
  .hero-image img { position: absolute; top: 0; left: 0; }

  .phero-grid { display: block; min-height: 0; }
  .phero-copy {
    min-height: 0;
    padding-bottom: var(--sp-7);
    justify-content: flex-start;
    gap: var(--sp-6);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .phero-media { min-height: 54svh; }
  .phero-media img { position: absolute; inset: 0; }
  .phero-copy h1 { margin-top: var(--sp-6); }

  .manifesto-top { grid-template-columns: 1fr; gap: 24px; }
  .manifesto h2 span { margin-left: 0; }
  .manifesto-bottom { grid-template-columns: 1fr 1fr; }
  .manifesto-bottom p { grid-column: 1 / -1; }

  .evidence-head { grid-template-columns: 1fr; gap: 25px; }
  .evidence-head h2 { grid-column: 1; }
  .evidence-stage { grid-template-columns: 1fr; }
  .stage-nav { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .stage-item { min-height: 130px; padding: 16px 12px 18px; border-right: 1px solid var(--ink-line-soft); }
  .stage-item:last-child { border-right: 0; }
  .stage-item.active { padding-left: 12px; }
  .stage-item.active::before { top: auto; right: 0; width: auto; height: 4px; }
  .stage-main { min-height: 640px; }
  .stage-copy { margin: 120px 0 0; }

  .system-head { grid-template-columns: 1fr; min-height: 0; padding-top: var(--sp-10); }
  .system-head h2 { grid-column: 1; }
  .system-row { grid-template-columns: 50px 1fr; padding: 26px 0; min-height: 0; row-gap: 12px; }
  .system-row p { grid-column: 2; padding-right: 0; }

  .owner-proof { grid-template-columns: 1fr; min-height: 0; }
  .owner-proof-media { min-height: 560px; }
  .owner-proof-copy { min-height: 620px; border-left: 0; border-top: 1px solid var(--ink); }

  .metric-grid { grid-template-columns: 1fr; }
  .metric-copy { grid-column: 1; }
  .metric-copy .micro { margin-bottom: 48px; }
  .metric-copy h2 { margin-top: 56px; }
  .metric-foot { grid-template-columns: 1fr; }
  .metric-foot div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .3); }

  .steps-head { grid-template-columns: 1fr; gap: 22px; }
  .steps-head h2 { grid-column: 1; }
  .step { grid-template-columns: 60px 1fr; row-gap: 14px; }
  .step-body { grid-column: 2; }

  .ledger-row { grid-template-columns: 60px 1fr; row-gap: 8px; }
  .ledger-row dd, .ledger-row p { grid-column: 2; }

  .offer-head { grid-template-columns: 1fr; gap: 22px; }
  .offer-head h2 { grid-column: 1; }
  .terms { grid-template-columns: 1fr; gap: 20px; }
  .terms-body { grid-column: 1; }

  .fitband-head { grid-template-columns: 1fr; gap: 22px; }
  .fitband-head h2 { grid-column: 1; }
  .fit-cols { grid-template-columns: 1fr; }
  .fit-col { padding: 26px 0 22px; }
  .fit-col + .fit-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }

  .faq-head { grid-template-columns: 1fr; gap: 22px; }
  .faq-head h2 { grid-column: 1; }
  .faq-q { grid-template-columns: 46px 1fr auto; }
  .faq-a-inner > div { grid-template-columns: 46px 1fr; }
  .faq-a-inner p { grid-column: 2 / 3; }

  .formband-head { grid-template-columns: 1fr; gap: 22px; }
  .formband-head h2 { grid-column: 1; }
  .form-shell { grid-template-columns: 1fr; gap: var(--sp-6); }
  .field-grid { gap: var(--sp-6) var(--sp-5); }

  .contact-bottom { grid-template-columns: 1fr 1fr; }
  .contact-bottom p { grid-column: 1; }
  .contact-action { grid-column: 2; }
}

@media (max-width: 620px) {
  /* One rhythm token drives every band, so the page cannot drift into
     alternating voids and collisions as sections are added. */
  :root { --sp-10: 62px; }

  .hero-copy-top { grid-template-columns: 28px 1fr; gap: 18px; }
  .hero-copy p { font-size: 23px; }
  .hero-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
  .hero-bottom .micro { max-width: none; }

  .phero-copy { padding-top: 28px; }
  .phero-index { flex-direction: column; gap: 8px; }
  .phero-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .phero-bottom .micro { max-width: none; }

  .manifesto-bottom { grid-template-columns: 1fr; gap: 14px; }
  .manifesto-bottom p { margin-top: 12px; }

  /* A three-across tab strip inside a 320px measure hid two of the three
     findings behind an unsignposted sideways scroll. Stacked, they read as
     the ledger rows they already resemble and every one is reachable. */
  .stage-nav { display: block; overflow: visible; }
  .stage-item {
    min-height: 0;
    padding: 15px 0 17px;
    gap: 7px;
    border-right: 0;
  }
  .stage-item.active { padding-left: 14px; }
  .stage-item.active::before { top: 0; right: auto; bottom: 0; width: 4px; height: auto; }
  .stage-item strong { max-width: none; font-size: 20px; }
  .stage-main { padding: 26px var(--gutter) 32px; min-height: 0; }
  .finding-number .micro { display: none; }
  .stage-copy { margin-top: 52px; }
  .impact-line { margin-top: 32px; grid-template-columns: 1fr; }
  .impact-line div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); }

  .system-row { grid-template-columns: 40px 1fr; }
  .system-row .count { padding-left: 0; }

  .owner-proof-bottom { grid-template-columns: 1fr; gap: 26px; }
  .owner-proof-media { min-height: 420px; }
  .owner-proof-copy { min-height: 0; padding: 26px var(--gutter) 32px; gap: var(--sp-6); }

  /* The band exists to carry one word. shrinkAll() is the safety net, so it
     can be pushed to the measure instead of sitting timidly inside it. */
  .metric-number { font-size: 42vw; }
  .metric-copy h2 { margin: 44px 0 20px; }

  .step { grid-template-columns: 46px 1fr; padding: 26px 0; }
  .step h3 { max-width: none; }

  .ledger-row { grid-template-columns: 46px 1fr; }

  .offer-col { padding: 28px 0 26px; }

  .faq-q { grid-template-columns: 1fr auto; padding: 22px 0 20px; }
  .faq-q .micro { grid-column: 1; }
  .faq-q h3 { grid-column: 1; }
  .faq-mark { grid-row: 1; grid-column: 2; }
  .faq-a-inner > div { grid-template-columns: 1fr; padding-bottom: 24px; }
  .faq-a-inner p { grid-column: 1; }

  .field-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .form-foot { margin-top: var(--sp-7); grid-template-columns: 1fr; align-items: start; }
  .submit { width: 100%; }

  .contact { min-height: 0; padding: 18px var(--gutter) 40px; }
  .contact h2 { margin-top: 48px; font-size: 15vw; }
  .contact-top { flex-direction: column; gap: 12px; }
  .contact-bottom { grid-template-columns: 1fr; gap: 28px; }
  .contact-bottom p, .contact-action { grid-column: 1; }
  .contact-action { justify-content: flex-start; }
  .contact-button { width: 230px; }

  /* min-width:0 stops the max-content link widths from inflating the two
     columns past the viewport; the links wrap inside their column instead. */
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px var(--sp-5); }
  .footer-logo { grid-column: 1 / -1; }
  .footer-links { min-width: 0; }
  .footer-links a { width: auto; }
  .footer-legal { padding: 14px 0; align-items: flex-start; flex-direction: column; gap: 7px; }
}

/* --------------------------------------------------- 23. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-track { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   24. UTILITY PAGES / Phase D1, 2026-08-16
   Added for about / privacy-policy / terms / process / work / sample-audit /
   page.php / index.php / 404.php. No new tokens, no parallel component system.
   These pages reuse .phero, .ticker, .manifesto, .evidence, .ledger,
   .owner-proof, .offer, .system and .contact unchanged; the only pieces the
   frozen six never needed are a photograph-free page header (.docband) and
   long-form prose (.doc-prose), plus the 404 plate.
   ========================================================================== */

/* --- Compact page header ---------------------------------------------------
   Same 1fr/3fr placement and hairline as .steps-head / .faq-head, with the
   nav's 70px reserved above it the way .phero does it. Nothing here is fitted
   by shrinkAll(), so the clamp ceiling is set low enough to be safe on its own
   at every breakpoint. Keep headings to short lines. */
.docband { padding: calc(70px + var(--sp-8)) 0 0; background: var(--paper); }
.docband-head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.docband-head > .micro { color: var(--dim); }
.docband-head h1 {
  grid-column: 2 / 3;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-size: clamp(42px, 6.4vw, 102px);
  font-weight: 650;
  line-height: .84;
  letter-spacing: -.075em;
}
.docband-head h1 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 250;
  color: var(--iris-deep);
}
.docband-lede {
  grid-column: 2 / 3;
  max-width: 640px;
  margin: var(--sp-5) 0 0;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.docband-lede em { font-weight: 680; }
.docband-foot {
  grid-column: 2 / 3;
  margin-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
}
.docband-foot .micro { color: var(--dim); }

/* --- Long-form prose -------------------------------------------------------
   Legal copy and editor content. Held in the right-hand 3fr column so the
   measure and the rules line up with every other band; the left column stays
   empty on purpose. Lists keep the hairline-and-asterisk grammar of .fit-col
   rather than becoming bulleted browser defaults. */
.doc-prose {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 0 var(--sp-4);
  padding: var(--sp-8) 0 var(--sp-10);
}
.doc-prose > * { grid-column: 2 / 3; max-width: 760px; }
.doc-prose > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-prose h2 {
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-5);
  font-size: clamp(21px, 2.3vw, 31px);
  font-weight: 650;
  letter-spacing: -.05em;
  line-height: 1.04;
  border-top: 1px solid var(--line);
}
.doc-prose h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.doc-prose p { margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.6; }
.doc-prose ul, .doc-prose ol { margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
/* The marker is absolute, not a grid track: legal list items carry inline
   <strong> runs, and every child of a grid li becomes its own grid item,
   which would drop the text after the lead-in into the 18px marker column. */
.doc-prose li {
  position: relative;
  padding: 11px 0 11px 28px;
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid var(--line-soft);
}
.doc-prose li::before {
  content: "✳";
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--iris-deep);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
}
.doc-prose li:last-child { border-bottom: 1px solid var(--line-soft); }
.doc-prose strong { font-weight: 650; }
.doc-prose a {
  color: var(--iris-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.doc-prose a:hover, .doc-prose a:focus-visible { color: var(--ink); }
.doc-prose img { margin: var(--sp-5) 0; }
.doc-prose blockquote {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line);
}
.doc-prose table { width: 100%; margin: 0 0 var(--sp-5); border-collapse: collapse; font-size: 14px; }
.doc-prose th, .doc-prose td { padding: 10px 14px 10px 0; text-align: left; border-bottom: 1px solid var(--line-soft); }
.doc-prose th { font-weight: 650; }

/* The bridge pages hang a .system band straight off the header. The band was
   built to follow a full hero, so it needs the air back. */
.docband + .system .system-head { padding-top: var(--sp-8); }

/* Archive rows reuse the ledger grammar rather than inventing cards. */
.doc-list { padding: var(--sp-8) 0 var(--sp-10); }
.doc-list .ledger-row { text-decoration: none; }
.doc-list a.ledger-row:hover h3,
.doc-list a.ledger-row:focus-visible h3 { color: var(--iris-deep); }

/* --- 404 -------------------------------------------------------------------
   The number is the whole design. Links and behaviour are unchanged from the
   legacy template. */
.notfound {
  min-height: calc(100svh - 70px);
  padding: calc(70px + var(--sp-8)) var(--gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  background: var(--paper);
}
.notfound-top { display: flex; justify-content: space-between; gap: var(--sp-5); }
.notfound-top .micro { color: var(--dim); }
.notfound h1 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 78;
  font-size: clamp(96px, 25vw, 360px);
  font-weight: 850;
  line-height: .72;
  letter-spacing: -.09em;
}
.notfound h1 em { font-family: var(--sans); font-style: normal; font-weight: 250; color: var(--iris-deep); }
.notfound-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  align-items: end;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.notfound-bottom p { grid-column: 2 / 4; max-width: 420px; margin: 0; font-size: 15px; line-height: 1.45; }
.notfound-bottom .bracket-link { grid-column: 4; justify-self: end; }

/* --- Responsive ------------------------------------------------------------
   Same contract as section 22: mono labels hold at 11px, running copy at 16px,
   every control clears 44px, and the 1fr/3fr grids collapse to one column. */
@media (max-width: 900px) {
  .docband { padding-top: calc(70px + var(--sp-6)); }
  .docband-head { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
  .docband-head h1,
  .docband-lede,
  .docband-foot { grid-column: 1; }
  .docband-lede { font-size: 17px; }
  .docband-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .doc-prose { grid-template-columns: 1fr; padding: var(--sp-7) 0 var(--sp-9); }
  .doc-prose > * { grid-column: 1; max-width: none; }
  .doc-prose p,
  .doc-prose li { font-size: 16px; line-height: 1.55; }
  .doc-prose h2 { margin-top: var(--sp-7); }

  .doc-list { padding: var(--sp-7) 0 var(--sp-9); }

  .notfound { min-height: 0; padding: calc(70px + var(--sp-6)) var(--gutter) var(--sp-7); }
  .notfound h1 { font-size: 36vw; }
  .notfound-bottom { grid-template-columns: 1fr; gap: var(--sp-5); }
  .notfound-bottom p { grid-column: 1; font-size: 16px; line-height: 1.45; }
  .notfound-bottom .bracket-link { grid-column: 1; justify-self: start; }
}

/* ==========================================================================
   25. CLIENT AUDIT PAGES / Phase D2, 2026-08-16
   single-client.php, the template behind /clients/{slug}. The deliverable
   reuses .phero, .ticker, .metric, .evidence, .ledger, .steps, .formband and
   .contact unchanged. Only four things the marketing pages never needed are
   defined here: a photograph-free content band with a responsive media frame
   (.audit-band), a fourth column on the finding rows (.audit-findings), a
   modest founder row and a proof grid, plus the two wedge-form states the
   inline tracking script toggles by id. No new tokens.
   ========================================================================== */

/* --- Content band ---------------------------------------------------------
   Same 1fr/3fr head, hairline and rhythm as .steps-head / .faq-head. The
   heading here is NOT in the shrinkAll() selector list, so the clamp ceiling
   is set at the .fitband-head level and the copy is kept to short lines. */
.audit-band { padding: var(--sp-10) 0; background: var(--paper); }
.audit-head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
  align-items: end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.audit-head > .micro { color: var(--dim); }
.audit-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(34px, 6.2vw, 92px);
  line-height: .83;
  letter-spacing: -.075em;
  font-weight: 650;
}
.audit-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }

/* Shared lede under a 1fr/3fr head. Same placement contract as .docband-lede. */
.audit-lede {
  grid-column: 2 / 3;
  max-width: 640px;
  margin: var(--sp-5) 0 0;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.28;
  letter-spacing: -.03em;
}
.audit-lede strong { font-weight: 680; }
.formband-head .audit-lede { color: var(--paper); }

/* --- Media frame ----------------------------------------------------------
   The video and the deck are the deliverable, so they get a fixed ratio box
   rather than an intrinsic height that reflows as the file loads. */
.audit-frame {
  position: relative;
  margin-top: var(--sp-7);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.audit-frame > .audit-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--ink);
}
/* A portrait deck wants height, not a ratio: capped so it never eats a whole
   phone screen and always leaves the next section visible. */
.audit-frame.is-doc { aspect-ratio: auto; height: clamp(440px, 76vh, 900px); }
@supports not (aspect-ratio: 16 / 9) {
  .audit-frame { height: 0; padding-bottom: 56.25%; }
  .audit-frame.is-doc { height: clamp(440px, 76vh, 900px); padding-bottom: 0; }
}
.audit-caption { margin: var(--sp-3) 0 0; color: var(--dim); }

/* --- Revenue band ---------------------------------------------------------
   The shared .metric band was written to carry one short word. Here it
   carries a currency range, whose min-content width is wide enough to push
   the 1fr grid track past the viewport, and past shrinkAll()'s reach: that
   routine measures the element's own box, which by then is already inflated.
   Zeroing the track minimum puts the number back inside the measure, and a
   lower ceiling keeps the range on one line at every width without waiting
   for JavaScript. */
.audit-metric .metric-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.audit-metric .metric-copy { min-width: 0; }
.audit-metric .metric-number {
  font-size: clamp(38px, 10vw, 150px);
  line-height: .8;
  letter-spacing: -.085em;
  white-space: nowrap;
}
.audit-metric .metric-copy .micro { margin-bottom: 42px; }
.audit-metric .metric-copy h2 { margin-top: 42px; }

/* --- Placeholder note ----------------------------------------------------- */
.audit-note {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
}
.audit-note > .micro { color: var(--dim); }
.audit-note p {
  grid-column: 2 / 3;
  max-width: 620px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.audit-note a {
  color: var(--iris-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* --- Findings ledger ------------------------------------------------------
   A finding carries one more field than a spec row: what the leak costs. It
   becomes a fourth track rather than a card, so the hairline grid holds. */
.audit-findings .ledger-row { grid-template-columns: .5fr 1.35fr 1.9fr 1.05fr; }
.audit-impact {
  max-width: 280px;
  color: var(--iris);
  font-size: 15px;
  font-weight: 560;
  line-height: 1.28;
  letter-spacing: -.03em;
}
.audit-impact strong { color: var(--white); font-weight: 650; }
.audit-impact em { font-family: var(--sans); font-style: normal; font-weight: 300; }

/* --- Founder --------------------------------------------------------------
   Deliberately not .owner-proof: that band is a full-bleed photograph, and
   this page is opened from a printed QR code on a phone. A modest portrait
   costs the reader nothing. */
.audit-founder { padding: var(--sp-9) 0; background: var(--paper); }
.audit-founder-grid {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.audit-founder-portrait { margin: 0; overflow: hidden; background: #c8cbca; }
.audit-founder-portrait img {
  width: 100%;
  height: auto;
  filter: saturate(.85) contrast(1.02);
}
.audit-founder-copy > .micro { color: var(--dim); }
.audit-founder-copy h3 {
  margin: var(--sp-4) 0 var(--sp-5);
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-size: clamp(27px, 3.6vw, 50px);
  font-weight: 650;
  line-height: .88;
  letter-spacing: -.062em;
}
.audit-founder-copy h3 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 250;
  color: var(--iris-deep);
}
.audit-founder-copy p {
  max-width: 62ch;
  margin: 0 0 var(--sp-4);
  font-size: 16px;
  line-height: 1.55;
}
.audit-founder-copy p:last-child { margin-bottom: 0; }

/* --- Wedge form states ----------------------------------------------------
   The ids are the contract with the inline tracking script: it swaps inline
   display between #wedge-form and #wedge-form-success and writes into
   #wedge-form-status. Height is forced at every width, not only on touch:
   this form is the funnel. */
/* The shared .field rule already floors the type at 16px; the 48px control
   height is only granted below 900px, and this form is the funnel. */
#wedge-form .field input { min-height: 48px; }
.wedge-status {
  margin: var(--sp-5) 0 0;
  min-height: 1.4em;
  color: var(--iris);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.wedge-success {
  margin-top: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--iris);
}
.wedge-success > .micro { color: var(--iris); }
.wedge-success h3 {
  margin: var(--sp-4) 0;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 650;
  line-height: .94;
  letter-spacing: -.055em;
}
.wedge-success p {
  max-width: 540px;
  margin: 0;
  color: var(--ink-body);
  font-size: 16px;
  line-height: 1.45;
}

/* --- Proof grid -----------------------------------------------------------
   Four delivered audits. Hairline cells, not cards: the image carries the
   same saturate/contrast treatment as every other photograph on the site. */
.audit-proof { padding: var(--sp-10) 0; background: var(--paper); }
/* The divider is a pseudo-element in the gap rather than a border plus
   asymmetric padding: with padding the first cell is wider than the rest, and
   a fixed aspect ratio turns that into a visibly taller first thumbnail. */
.audit-proof-grid {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 36px;
}
.audit-proof-item { position: relative; display: block; text-decoration: none; }
.audit-proof-item + .audit-proof-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18px;
  width: 1px;
  background: var(--line);
}
.audit-proof-item figure {
  position: relative;
  margin: 0 0 14px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #c8cbca;
}
.audit-proof-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.78) contrast(1.03);
  transition: filter var(--t-fast), transform .5s var(--ease);
}
.audit-proof-item:hover img,
.audit-proof-item:focus-visible img { filter: saturate(1) contrast(1.05); transform: scale(1.03); }
.audit-proof-name {
  display: block;
  font-size: 17px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.audit-proof-go { display: block; margin-top: 8px; color: var(--dim); }
.audit-proof-item:hover .audit-proof-go,
.audit-proof-item:focus-visible .audit-proof-go { color: var(--iris-deep); }

/* --- Guarantee ------------------------------------------------------------
   Same 1fr/3fr measure and voice as .terms, on paper. */
.audit-pledge { padding: var(--sp-8) 0; background: var(--paper); border-top: 1px solid var(--line); }
.audit-pledge-grid { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); }
.audit-pledge-grid > .micro { color: var(--dim); }
.audit-pledge-body { grid-column: 2 / 3; max-width: 760px; }
.audit-pledge-body p { margin: 0; font-size: 16px; line-height: 1.5; }
.audit-pledge-body strong { font-weight: 650; }

/* The alternative CTA sits in the empty third column of .contact-bottom. */
.audit-alt-link { grid-column: 3; align-self: end; }

/* --- Responsive -----------------------------------------------------------
   Same contract as sections 22 and 24: the 1fr/3fr grids collapse to one
   column, running copy holds at 16px, every control clears 44px. */
@media (max-width: 900px) {
  .audit-metric .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .audit-metric .metric-copy .micro { margin-bottom: 28px; }
  .audit-metric .metric-copy h2 { margin-top: 34px; }

  .audit-head { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
  .audit-head h2 { grid-column: 1; }
  /* .audit-lede also rides inside .formband-head, which collapses to a single
     column of its own. Leaving the explicit column here would rebuild a
     phantom second track and squeeze the heading beside it. */
  .audit-lede { grid-column: 1; font-size: 17px; }

  .audit-note { grid-template-columns: 1fr; gap: var(--sp-3); }
  .audit-note p { grid-column: 1; }
  .audit-note a { display: inline-block; min-height: 44px; }

  .audit-findings .ledger-row { grid-template-columns: 60px 1fr; row-gap: 10px; }
  .audit-findings .ledger-row p,
  .audit-impact { grid-column: 2; }
  .audit-impact { max-width: none; font-size: 16px; line-height: 1.4; }

  .audit-founder { padding: var(--sp-8) 0; }
  .audit-founder-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .audit-founder-portrait { max-width: 170px; }
  .audit-founder-copy p { max-width: none; }

  .audit-proof-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6) 24px; }
  .audit-proof-item + .audit-proof-item::before { display: none; }
  .audit-proof-item:nth-child(even)::before { display: block; left: -12px; }
  .audit-proof-name { font-size: 16px; }

  .audit-pledge-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .audit-pledge-body { grid-column: 1; max-width: none; }

  .wedge-status { font-size: 12px; }
  .audit-alt-link { grid-column: 1; }
}

@media (max-width: 620px) {
  .audit-findings .ledger-row { grid-template-columns: 46px 1fr; }
  .audit-frame { margin-top: var(--sp-6); }
  .audit-frame.is-doc { height: clamp(380px, 68vh, 620px); }
  .audit-proof-grid { margin-top: var(--sp-6); }
}

/* ==========================================================================
   26. FOUNDER + PROOF / Trust pass, 2026-08-16
   One band, rendered from template-parts/founder-proof.php immediately before
   the price table on front-page.php and page-request-audit.php: the reader
   meets the person and the record before she meets the number. Placement is
   the same 1fr/3fr grid as every other band, with the portrait taking the
   narrow track that normally carries the mono label, and the proof row
   borrowing .metric-foot's hairline grammar. The heading is NOT in the
   shrinkAll() selector list, so the clamp ceiling is set low enough to hold on
   its own at every width. Also here: the small portrait credit added to the
   existing .owner-proof founder band on /about. No new tokens.
   ========================================================================== */
.founder { padding: var(--sp-8) 0; background: var(--silver); }
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
  align-items: start;
}

/* Modest, not full-bleed: .owner-proof already owns the photographic band on
   this page, and a portrait competing with it would read as a second hero. */
.founder-portrait {
  width: min(100%, 300px);
  margin: 0;
  overflow: hidden;
  background: #c8cbca;
  border: 1px solid var(--line);
}
.founder-portrait img {
  width: 100%;
  height: auto;
  filter: saturate(.85) contrast(1.02);
}

.founder-copy { min-width: 0; }
.founder-copy > .micro { color: var(--dim-strong); }
.founder-copy h2 {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: .86;
  letter-spacing: -.07em;
  font-weight: 650;
}
.founder-copy h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.founder-copy p {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.5;
}
/* Profile link: the one outbound affordance on the band. Mono, 44px floor. */
.founder-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-2);
  color: var(--dim-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.founder-link:hover { color: var(--ink); border-bottom-color: currentColor; }

/* Three claims, hairline-separated. Every one of them is a description of the
   method or the record, never an outcome. */
.founder-proof {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  border-top: 1px solid var(--line);
}
.founder-proof div { padding: 16px 16px 0 0; }
.founder-proof div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.founder-proof .micro { color: var(--dim-strong); }
.founder-proof strong {
  display: block;
  margin-top: 10px;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 620;
  letter-spacing: -.04em;
  line-height: 1.12;
}

/* --- Portrait credit on /about --------------------------------------------
   That page already carries the founder copy inside .owner-proof, whose
   photograph is the front desk rather than the person. The portrait is added
   as a small credit beside the section label, so the band keeps its shape.
   The label moves one level down the tree, so it needs its colour back. */
.owner-proof-id { display: grid; gap: var(--sp-4); }
.owner-proof-id .micro { color: var(--dim); }
.founder-chip { display: flex; align-items: center; gap: var(--sp-3); margin: 0; }
.founder-chip img {
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: center top;
  background: #c8cbca;
  filter: saturate(.85) contrast(1.02);
}
.founder-chip figcaption { line-height: 1.45; }

/* --- Responsive -----------------------------------------------------------
   Same contract as sections 22, 24 and 25: the 1fr/3fr grid collapses to one
   column, mono labels hold at 11px, running copy at 16px. The band carries no
   controls of its own, so the 44px floor is inherited unchanged. */
@media (max-width: 900px) {
  .founder { padding: var(--sp-7) 0; }
  .founder-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .founder-portrait { width: min(100%, 170px); }
  .founder-copy h2 { margin-top: 0; font-size: clamp(30px, 8vw, 44px); }
  .founder-copy p { max-width: none; font-size: 16px; line-height: 1.45; }

  .founder-proof { margin-top: var(--sp-5); grid-template-columns: 1fr; gap: 0; }
  .founder-proof div { padding: 16px 0; }
  .founder-proof div + div { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
  .founder-proof div:last-child { padding-bottom: 0; }
  .founder-proof strong { font-size: 17px; }

  .founder-chip img { width: 56px; height: 70px; }
}

@media (max-width: 620px) {
  .founder-portrait { width: min(100%, 150px); }
}

/* ==========================================================================
   27. LEGIBILITY EXCEPTIONS / Polish pass, 2026-08-16
   Section 3 now floors .micro at 12px, which is the right default for every
   label that carries information. Two things are genuinely not information
   and are pinned back down here so the floor stays honest rather than
   becoming a size nobody believes: the plate/hero figure furniture, and the
   asterisk bullets, which are already handled where they are defined.
   Everything else that was under 12px or under 4.5:1 was raised in place in
   the section that owns it, so this file has one rule per component and no
   override layer. No new tokens beyond --dim-strong in section 1.
   ========================================================================== */

/* Figure numbering and the photograph's own caption. Both restate what the
   image already shows ("Fig. 001 / Owner operator"), neither is referenced
   from the running copy, and both sit on photography where a larger label
   would read as an interface element rather than a plate credit. */
.image-index,
.image-caption { font-size: 10px; }

@media (max-width: 900px) {
  .image-index,
  .image-caption { font-size: 11px; }
}

/* ==========================================================================
   28. BOOKING PATH INDEX / 2026-08-16
   page-booking-path-index.php, the public anonymised record of every audited
   booking path. The page is built from .docband, .ticker, .metric, .evidence,
   .ledger, .doc-prose and .contact unchanged. Three things those components
   never had to do are defined here: carry a tally beside a ledger row, print
   several hundred rows of dense data without becoming a spreadsheet, and hold
   a key for the three-letter codes those rows use.

   The table is the proof, so the table has to survive a 360px phone. It is
   table-layout: fixed, so the tracks always sum to the width of .wrap and the
   two text columns wrap instead of pushing the page sideways. Nothing here
   scrolls horizontally, which is also what lets the header row stay sticky: a
   wrapper with overflow-x would become the scroll container and the sticky
   offset would resolve against it rather than the viewport. No new tokens.
   ========================================================================== */

/* --- Leak-type ledger ------------------------------------------------------
   .evidence carries no padding of its own because the frozen pages always
   stack it against a band that already has some. Here it follows .metric, so
   it takes its own. The row gains a fourth track for the tally, the same way
   .audit-findings does on the client deliverable. */
.bpindex-types { padding: var(--sp-9) 0; }
.bpindex-types .ledger-row { grid-template-columns: .5fr .75fr 1.5fr 2fr; }
.bpi-tally { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.bpindex-note {
  max-width: 660px;
  margin: var(--sp-6) 0 0;
  color: var(--ink-body);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Index band ------------------------------------------------------------ */
.bpindex { padding: var(--sp-9) 0 var(--sp-10); background: var(--paper); }
.bpindex-head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.bpindex-head .micro { color: var(--dim); }
.bpindex-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(38px, 7vw, 104px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 650;
}
.bpindex-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.bpindex-head p {
  grid-column: 2 / 3;
  max-width: 700px;
  margin: var(--sp-5) 0 0;
  font-size: 15px;
  line-height: 1.55;
}

/* --- Code key --------------------------------------------------------------
   Fourteen pairs, sized so the code stays a fixed 34px column and the labels
   line up down each column. Not interactive, so no 44px floor applies. */
.bpindex-legend {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line);
}
.bpindex-legend > .micro { color: var(--dim); }
.bpindex-legend ul {
  grid-column: 2 / 3;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px var(--sp-5);
}
.bpindex-legend li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--sp-2);
  align-items: baseline;
}
.bpindex-legend b {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--iris-deep);
}
.bpindex-legend span { font-size: 13px; line-height: 1.35; }

/* --- The table -------------------------------------------------------------
   Text only, so several hundred rows cost nothing to paint. The header sticks
   because the run is long and the columns are otherwise unlabelled by the time
   you are three hundred rows in; the nav is position:absolute and scrolls away
   before it could collide. */
.bpindex-scroll { margin-top: var(--sp-6); }
.bpindex-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bpindex-table th,
.bpindex-table td {
  padding: 9px 10px 8px 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--line-soft);
}
.bpindex-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 12px;
  padding-bottom: 10px;
  color: var(--dim);
  background: var(--paper);
  text-transform: uppercase;
  letter-spacing: -.03em;
  /* The body cells break anywhere so long place names reflow. The four column
     names must not: "Leaks" splitting across two lines reads as a typo. */
  overflow-wrap: normal;
  white-space: nowrap;
  /* border-collapse drops the borders of a sticky cell in Safari and Chrome,
     so the rule under the header row is painted as an inset shadow. */
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--ink);
}
.bpindex-table tbody th { color: var(--dim); letter-spacing: .01em; }
.bpindex-table tbody tr:hover td,
.bpindex-table tbody tr:hover th { background: rgba(133, 137, 170, .13); }

.bpindex-rank { width: 68px; }
.bpindex-n { width: 62px; text-align: right; padding-right: var(--sp-5); }
.bpindex-loc { width: 26%; }
.bpindex-prof b {
  display: inline-block;
  margin: 0 8px 2px 0;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--iris-deep);
}

/* Band heading: the tie structure made visible. Five of these in the whole
   table, so the ink fill reads as a divider rather than as decoration. */
.bpindex-table .bpindex-band th {
  padding: 11px 12px 10px;
  color: var(--paper);
  background: var(--ink);
  border-bottom: 0;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.bpindex-band th > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-5);
  justify-content: space-between;
}
.bpindex-band th span:first-child { font-weight: 500; }
.bpindex-band th span:not(:first-child) { color: var(--silver); }

/* --- Method note and the geography roll-up -------------------------------- */
.bpindex-method { background: var(--paper); }
.bpindex-method .doc-prose { padding-top: 0; }
.bpindex-method .doc-prose > .micro { color: var(--dim); grid-column: 1; }
.bpindex-places {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 var(--sp-5);
  border-top: 1px solid var(--line);
}
.bpindex-places div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 11px 0 10px;
  border-bottom: 1px solid var(--line-soft);
}
.bpindex-places .micro { color: var(--dim); }
.bpindex-places b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- Responsive ------------------------------------------------------------
   Same contract as sections 24 and 25: the 1fr/3fr grids collapse, mono stays
   at 12px, running copy sits at 16px. The table keeps all four columns because
   the leak profile beside the count is the point of the row; it buys the room
   by dropping the fixed pixel columns to the narrowest legible width and
   letting both text columns wrap. Measured at 360px: rank 40px, count 46px,
   which leaves 242px for the two wrapping columns inside a 16px gutter, and
   the profile codes take a second line rather than a scrollbar. */
@media (max-width: 900px) {
  .bpindex-types { padding: var(--sp-7) 0; }
  .bpindex-types .ledger-row { grid-template-columns: 60px 1fr; row-gap: 8px; }
  .bpindex-types .ledger-row h3,
  .bpindex-types .ledger-row p { grid-column: 2; }
  .bpi-tally { grid-column: 2; }
  .bpindex-note { font-size: 16px; line-height: 1.45; }

  .bpindex { padding: var(--sp-7) 0 var(--sp-8); }
  .bpindex-head { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
  .bpindex-head h2,
  .bpindex-head p { grid-column: 1; }
  .bpindex-head p { max-width: none; font-size: 16px; line-height: 1.5; }

  .bpindex-legend { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) 0; }
  .bpindex-legend ul { grid-column: 1; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* The key is what makes the table readable, so it takes the same 16px the
     rest of the running copy takes rather than staying a caption size. */
  .bpindex-legend span { font-size: 16px; line-height: 1.35; }
  .bpindex-legend li { align-items: start; }

  .bpindex-table th,
  .bpindex-table td { padding: 10px 8px 9px 0; }
  .bpindex-rank { width: 46px; }
  .bpindex-n { width: 48px; padding-right: var(--sp-3); }
  .bpindex-loc { width: 32%; }
  .bpindex-prof b { margin-right: 6px; }
  .bpindex-band th { padding: 11px 10px 10px; }

  .bpindex-places { grid-template-columns: 1fr; }

}

@media (max-width: 620px) {
  .bpindex-types .ledger-row { grid-template-columns: 46px 1fr; }
  .bpindex-table th,
  .bpindex-table td { padding: 10px 6px 9px 0; }
  .bpindex-rank { width: 40px; }
  .bpindex-n { width: 46px; padding-right: var(--sp-2); }
  .bpindex-loc { width: 33%; }
  .bpindex-prof b { margin-right: 5px; letter-spacing: .01em; }
  .bpindex-band th > div { gap: 2px var(--sp-4); }
}

/* ==========================================================================
   29. AUTHORITY PAGES / 2026-08-16
   page-hiring.php (/hiring/) and page-client-access.php (/client-access/),
   plus the one anchor added to the founder band so the audit count on it
   leads somewhere. Both pages are built from .docband, .evidence, .ledger and
   .contact unchanged; what is defined here is only the four things those
   components cannot already do:

     1. .evidence carries no padding of its own (see section 28), and on both
        of these pages it follows .docband rather than a padded band, so the
        two variants take their own.
     2. A two-up grid of work TYPES on /hiring/ that must not read as a list
        of vacancies, which is why it is a plain hairline grid with no control
        affordance anywhere in it and a note in running copy above it.
     3. A short paper note band on /client-access/, same 1fr/3fr measure and
        voice as .terms and .audit-pledge.
     4. A link wrapper inside .founder-proof that keeps the three-cell grid
        intact: the cell stays a grid item and the anchor is a block inside
        it, so nothing about the band's placement changes.

   No new tokens. Mono holds at 12px, running copy at 16px on touch, and every
   control clears 44px through the existing floors in sections 22 and 24.
   ========================================================================== */

/* --- Shared band padding --------------------------------------------------- */
.hire-how,
.access-what { padding: var(--sp-9) 0; }

/* --- Work types (/hiring/) -------------------------------------------------
   Two columns of hairline cells. Deliberately not .ledger-row and deliberately
   not a link: a row that highlights on hover reads as something to apply to.
   The headings are NOT in the shrinkAll() selector list, so the clamp ceiling
   is set at the .ledger-row h3 level and the labels are kept to short lines. */
.hire-note {
  max-width: 660px;
  margin: var(--sp-7) 0 0;
  color: var(--ink-body);
  font-size: 14px;
  line-height: 1.5;
}
.hire-types {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink-line);
}
.hire-type { padding: 20px 18px 22px 0; border-bottom: 1px solid var(--ink-line-soft); }
.hire-type:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--ink-line-soft); }
.hire-type .micro { color: var(--ink-mute); }
.hire-type h3 {
  margin: 12px 0 8px;
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 620;
  letter-spacing: -.045em;
  line-height: 1.02;
}
.hire-type p { max-width: 46ch; margin: 0; color: var(--ink-body); font-size: 14px; line-height: 1.45; }

/* The email address repeated as text beside the round CTA, in the third
   column .contact-bottom leaves empty. Same placement as .audit-alt-link. */
.hire-alt-link { grid-column: 3; align-self: end; }

/* --- Client access ---------------------------------------------------------
   The count sentence sits under the ledger the way .bpindex-note does, with
   the cross-link pulled out of the sentence and onto its own bracket link so
   it inherits the 44px touch floor instead of being an inline run of text. */
.access-count {
  max-width: 660px;
  margin: var(--sp-7) 0 0;
  color: var(--ink-body);
  font-size: 14px;
  line-height: 1.5;
}
.access-index-link { margin-top: var(--sp-4); }

.access-note { padding: var(--sp-8) 0; background: var(--paper); border-top: 1px solid var(--line); }
.access-note-grid { display: grid; grid-template-columns: 1fr 3fr; gap: var(--sp-4); }
.access-note-grid > .micro { color: var(--dim); }
.access-note-body { grid-column: 2 / 3; max-width: 760px; }
.access-note-body h2 {
  margin: 0 0 var(--sp-4);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 650;
}
.access-note-body p { margin: 0; font-size: 16px; line-height: 1.5; }
.access-note-body strong { font-weight: 650; }
.access-note-body .bracket-link { margin-top: var(--sp-5); }

/* --- Founder band: the record cell becomes a link --------------------------
   The first cell of .founder-proof states the audit count, and /booking-path-
   index/ is that count written out. The anchor wraps the cell's contents, not
   the cell, so .founder-proof div keeps its padding and its hairline and the
   three-column grid is untouched. Colour is inherited: turning the whole cell
   iris would make one of three equal claims look like the only real one. The
   affordance is the mono line underneath, which follows the ↗ convention the
   band's LinkedIn link already uses and carries the 44px floor on its own. */
.founder-proof-link { display: block; color: inherit; text-decoration: none; }
.founder-proof-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--sp-2);
  color: var(--dim-strong);
  border-bottom: 1px solid var(--line);
}
.founder-proof-link:hover .founder-proof-go,
.founder-proof-link:focus-visible .founder-proof-go { color: var(--ink); border-bottom-color: currentColor; }

/* --- Responsive ------------------------------------------------------------
   Same contract as sections 22, 24, 25, 26 and 28: the 1fr/3fr grids collapse
   to one column, the two-up grid becomes one, mono labels hold at 12px and
   running copy at 16px. */
@media (max-width: 900px) {
  .hire-how,
  .access-what { padding: var(--sp-7) 0; }

  .hire-note,
  .access-count { max-width: none; margin-top: var(--sp-6); font-size: 16px; line-height: 1.45; }

  .hire-types { grid-template-columns: 1fr; margin-top: var(--sp-5); }
  .hire-type { padding: 18px 0; }
  .hire-type:nth-child(even) { padding-left: 0; border-left: 0; }
  .hire-type p { max-width: none; font-size: 16px; line-height: 1.45; }

  .hire-alt-link { grid-column: 1; }

  .access-note { padding: var(--sp-7) 0; }
  .access-note-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .access-note-body { grid-column: 1; max-width: none; }
}

/* ==========================================================================
   30. GROWTH LEAK CALCULATOR / 2026-08-16
   page-leak-calculator.php. The page is assembled out of components that
   already exist: .docband, .ticker, .formband (with .field, .field-grid,
   .form-shell, .form-aside and .hint unchanged), .metric, .doc-prose and
   .contact. Only the controls those components never had to carry are
   defined here: a slider paired with a number, a checkbox that reads as a
   filled square rather than an operating-system tick, an editable assumption
   panel on the paper band, and a live figure that has to be a range instead
   of the single mega word .metric-number was built for.

   Two constraints shaped the rest. Every control clears 44px at every
   breakpoint, including the ones that are only 24px of ink, because the
   whole page is a form the visitor drives one-handed. And the figure is not
   in the shrinkAll() list in iteraux.js, so its clamp ceiling and its 620px
   stack are sized to hold on their own: at the input maxima the widest
   possible string still sits inside a 360px measure. No new tokens.
   ========================================================================== */

/* --- The input band --------------------------------------------------------
   .calcband is .formband with a checklist where the field grid usually ends.
   Nothing about the band itself changes. */
.calcband .field-grid { grid-template-columns: 1fr 1fr; }

/* Number and slider are one value with two controls. The hairline lives on
   the wrapper so the currency mark sits inside it with the figure. */
.calc-num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px solid var(--ink-line);
  transition: border-color var(--t-fast);
}
.calc-num:focus-within { border-bottom-color: var(--iris); }
.calc-num-mark { color: var(--ink-mute); font-family: var(--mono); font-size: 14px; }
.field .calc-num input {
  border-bottom: 0;
  -moz-appearance: textfield;
}
.field .calc-num input::-webkit-outer-spin-button,
.field .calc-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* .field input:focus clears the outline and moves the border instead. Here
   the border belongs to the wrapper, so the keyboard ring is put back. */
.field .calc-num input:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }

.field .calc-slider {
  width: 100%;
  height: 44px;
  margin: var(--sp-2) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.field .calc-slider:focus { outline: 0; }
.field .calc-slider:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
/* The 44px belongs to the control, not the thumb: the whole height of the
   input is draggable along the track, which is the axis that matters. */
.calc-slider::-webkit-slider-runnable-track { height: 1px; background: var(--ink-line); border: 0; }
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 0;
  border-radius: 50%;
  background: var(--iris);
  transition: background var(--t-fast);
}
.calc-slider:hover::-webkit-slider-thumb { background: var(--white); }
.calc-slider::-moz-range-track { height: 1px; background: var(--ink-line); border: 0; }
.calc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--iris);
  transition: background var(--t-fast);
}
.calc-slider:hover::-moz-range-thumb { background: var(--white); }

/* --- The checklist ---------------------------------------------------------
   The whole row is the label, so the tap target is the statement rather than
   the box. Checked state is a filled square inside its own ring: a drawn tick
   would depend on a pseudo-element rendering on a replaced element, and this
   reads at a glance either way. */
.calc-checks { margin-top: var(--sp-8); border-top: 1px solid var(--ink-line); }
.calc-checks-head { padding: var(--sp-6) 0 var(--sp-5); }
.calc-checks-head .micro { display: block; color: var(--ink-mute); }
.calc-checks-head h3 {
  margin: var(--sp-4) 0 var(--sp-3);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 620;
  letter-spacing: -.05em;
  line-height: 1.05;
}
.calc-checks-head p { margin: 0; max-width: 560px; color: var(--ink-body); font-size: 15px; line-height: 1.5; }

.calc-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--sp-4);
  align-items: start;
  min-height: 44px;
  padding: 16px 0;
  cursor: pointer;
  border-top: 1px solid var(--ink-line-soft);
}
.calc-check:first-of-type { border-top: 0; }
.calc-box {
  width: 24px;
  height: 24px;
  margin: 0;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.calc-check:hover .calc-box { border-color: var(--iris); }
.calc-box:checked {
  background: var(--iris);
  border-color: var(--iris);
  box-shadow: inset 0 0 0 4px var(--ink);
}
.calc-check-body { display: block; }
.calc-check-text { display: block; color: var(--ink-body); font-size: 15px; line-height: 1.45; transition: color var(--t-fast); }
.calc-box:checked ~ .calc-check-body .calc-check-text,
.calc-check:hover .calc-check-text { color: var(--white); }
.calc-check-freq { display: block; margin-top: 8px; color: var(--ink-mute); }
/* 4.71:1 on --ink. The measured figure is the one number on this row that is
   not ours, so it gets the accent and the rest of the line does not. */
.calc-check-freq b { color: var(--iris); font-weight: 500; letter-spacing: .02em; }

/* --- The running figure inside the input band ----------------------------- */
.calc-tally {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-top: 1px solid var(--ink-line);
}
.calc-tally p { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.calc-tally .micro { color: var(--ink-mute); }
.calc-tally strong {
  font-family: var(--display);
  font-variation-settings: "wdth" 84;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 640;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.calc-noscript { margin: var(--sp-6) 0 0; max-width: 620px; color: var(--ink-body); font-size: 15px; line-height: 1.5; }

/* --- The assumptions panel -------------------------------------------------
   Same head grammar as .bpindex-head. The panel is a <details> so the
   disclosure is native and keyboard-operable with no script; iteraux-calc.js
   only folds it shut below 900px, where it would otherwise stand between the
   last checkbox and the figure it produces. */
.calc-assume { padding: var(--sp-9) 0 var(--sp-10); background: var(--paper); }
.calc-assume-head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--sp-4);
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.calc-assume-head > .micro { color: var(--dim); }
.calc-assume-head h2 {
  grid-column: 2 / 3;
  margin: 0;
  font-size: clamp(36px, 6.6vw, 98px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 650;
}
.calc-assume-head h2 em { font-family: var(--sans); font-style: normal; font-weight: 300; }
.calc-assume-head p {
  grid-column: 2 / 3;
  max-width: 700px;
  margin: var(--sp-5) 0 0;
  font-size: 15px;
  line-height: 1.55;
}
.calc-assume-head p em { font-weight: 650; }

.calc-panel { border-bottom: 1px solid var(--line); }
.calc-panel summary {
  min-height: 56px;
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-fast);
}
.calc-panel summary::-webkit-details-marker { display: none; }
.calc-panel summary:hover { color: var(--iris-deep); }
.calc-panel summary .micro { color: var(--dim); }
.calc-panel summary:hover .micro { color: var(--iris-deep); }
.calc-panel-mark { font-family: var(--mono); font-size: 15px; transition: transform var(--t-fast) var(--ease); }
.calc-panel[open] .calc-panel-mark { transform: rotate(45deg); }
.calc-panel-body { padding: var(--sp-2) 0 var(--sp-8); }

.calc-assume-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: var(--sp-7); align-items: start; }
.calc-assume-col > .micro { display: block; margin-bottom: var(--sp-4); color: var(--dim); }
.calc-assume-rows { border-top: 1px solid var(--line); }
.calc-assume-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-soft);
}
.calc-assume-row label { font-size: 14px; line-height: 1.35; cursor: pointer; }
.calc-assume-row label b {
  display: inline-block;
  min-width: 34px;
  color: var(--iris-deep);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}
.calc-assume-row.is-model { align-items: start; padding: var(--sp-3) 0; }
.calc-assume-row.is-model label { display: block; font-size: 14px; font-weight: 620; }
/* Sibling of the label rather than a child of it: the accessible name of the
   control stays two words, and this is its description. */
.calc-assume-why {
  display: block;
  max-width: 330px;
  margin-top: 6px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.4;
}
.calc-assume-input { display: flex; align-items: center; gap: 4px; }
.calc-assume-input input {
  width: 68px;
  min-height: 44px;
  padding: 8px 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.03em;
  text-align: right;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  appearance: none;
  -moz-appearance: textfield;
  transition: border-color var(--t-fast);
}
.calc-assume-input input::-webkit-outer-spin-button,
.calc-assume-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-assume-input input:focus { border-bottom-color: var(--iris-deep); }
.calc-assume-input span { color: var(--dim); font-family: var(--mono); font-size: 12px; }

.calc-assume-note { max-width: 460px; margin: var(--sp-6) 0 0; color: var(--dim); font-size: 14px; line-height: 1.55; }
.calc-assume-note b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

.calc-reset {
  margin-top: var(--sp-5);
  min-height: 48px;
  padding: 14px 24px;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), letter-spacing var(--t-fast);
}
.calc-reset::before { content: "[ "; }
.calc-reset::after { content: " ]"; }
.calc-reset:hover { background: var(--iris-deep); border-color: var(--iris-deep); letter-spacing: .05em; }

/* --- The figure ------------------------------------------------------------
   .metric with a range in place of the mega word. Three states, and the copy
   for each is a different claim: nothing answered yet, answered and clean,
   answered and leaking. Only one is ever in the flow. */
.calc-range {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .3em;
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-size: clamp(38px, 8vw, 104px);
  font-weight: 780;
  line-height: .9;
  letter-spacing: -.07em;
  font-variant-numeric: tabular-nums;
}
.calc-range-join {
  color: rgba(255, 255, 255, .9);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.calc-out .calc-range-sub { max-width: none; margin: var(--sp-5) 0 0; }
/* .metric-copy .micro carries an 85px drop for the section label. The sub-line
   is a caption on the figure above it and must stay against it. */
.calc-out .calc-range-sub .micro { display: block; margin-bottom: 0; color: rgba(255, 255, 255, .9); }
.calc-out .calc-range-sub b { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }

.calc-out .calc-state { display: none; max-width: 620px; margin: var(--sp-4) 0 0; }
.calc-out.is-idle .calc-state-idle,
.calc-out.is-clean .calc-state-clean { display: block; }
.calc-out.is-idle .calc-range,
.calc-out.is-idle .calc-range-sub,
.calc-out.is-clean .calc-range,
.calc-out.is-clean .calc-range-sub { display: none; }
.calc-out .metric-foot strong { font-variant-numeric: tabular-nums; }

.calc-method { background: var(--paper); }
.calc-method .doc-prose b { font-weight: 650; font-variant-numeric: tabular-nums; }

/* --- Responsive ------------------------------------------------------------
   Same contract as sections 22, 24, 25, 26, 28 and 29: the 1fr/3fr grids
   collapse to one column, mono labels hold at 12px, running copy at 16px, and
   every control clears 44px. The checkbox and the slider thumb both grow,
   because on a phone they are the only two things being aimed at. */
@media (max-width: 900px) {
  .calc-assume { padding: var(--sp-7) 0 var(--sp-8); }

  .calcband .field-grid { grid-template-columns: 1fr 1fr; }

  .field .calc-slider { height: 48px; min-height: 48px; padding: 0; }
  .calc-slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -14px; }
  .calc-slider::-moz-range-thumb { width: 28px; height: 28px; }

  .calc-checks-head p,
  .calc-check-text,
  .calc-noscript { font-size: 16px; line-height: 1.45; }
  .calc-check { grid-template-columns: 28px 1fr; gap: var(--sp-3); padding: 14px 0; }
  .calc-box { width: 28px; height: 28px; }

  .calc-tally { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  .calc-assume-head { grid-template-columns: 1fr; gap: var(--sp-4); align-items: start; }
  .calc-assume-head h2,
  .calc-assume-head p { grid-column: 1; }
  .calc-assume-head p { font-size: 16px; line-height: 1.5; }

  .calc-panel summary { min-height: 60px; }
  .calc-assume-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .calc-assume-row label,
  .calc-assume-row.is-model label,
  .calc-assume-why,
  .calc-assume-note { font-size: 16px; line-height: 1.45; }
  .calc-assume-note { line-height: 1.55; }
  .calc-assume-why { max-width: none; }
  .calc-reset { width: 100%; min-height: 52px; font-size: 13px; }

  .calc-out .calc-state { font-size: 16px; line-height: 1.45; }
}

@media (max-width: 620px) {
  /* Stacked, each figure is one short token on its own line, which is what
     keeps the widest possible string inside a 360px measure. */
  .calc-range { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 15vw; }
  .calc-range-join { font-size: 12px; }
  .calcband .field-grid { grid-template-columns: 1fr; }
  .calc-check { gap: var(--sp-3); }
}