/* ============================================================
   CORDA . design system "Instrument"
   Warm paper ground, Inter for display and body, monospace for data,
   one signal colour. Measurement, not decoration.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  /* light is the canonical palette */
  --paper: #F1F2F2;
  --surface: #F8F9F9;
  --sunken: #E4E6E6;
  --ink: #14161A;
  --ink-2: #4A4E54;
  --ink-3: #63676D;
  --rule: #D6D8D9;
  --rule-2: #B4B7BA;
  --signal: #0141F3;
  --signal-soft: rgba(1, 65, 243, .07);
  --signal-line: rgba(1, 65, 243, .28);
  --wire: rgba(1, 65, 243, .45);
  --on-signal: #F8F9F9;
  --pass: #14161A;
  --pass-soft: rgba(20, 22, 26, .07);
  --warn: #63676D;
  --clay: #63676D;
  /* three rule weights, ratio 1:4:9, after the FDA nutrition panel.
     one weight everywhere is what makes a page read as generated. */
  --hair: 1px;
  --rule-mid: 4px;
  --rule-heavy: 9px;
  --shadow: 0 1px 0 var(--rule), 0 22px 46px -34px rgba(21, 23, 15, .42);
  --shadow-lift: 0 1px 0 var(--rule), 0 40px 70px -40px rgba(21, 23, 15, .45);

  --f-display: 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 66px;
  /* what the sticky bar actually occupies -- one row on desktop, two on a
     phone. Everything that has to clear the bar reads this, not --nav-h. */
  --nav-off: var(--nav-h);

  /* ---- reading scale -------------------------------------------------
     One ladder for every run of prose on the page, so "how big is body
     copy" is a single decision rather than sixty. The rungs are the sizes
     the page was designed at: body sets at 16-17px, secondary prose at 15,
     card copy at 14, and the mono label voice runs 11/10/9 in wide-tracked
     uppercase, where width is gained faster than legibility.
     Raising these is a whole-page decision, not a per-block one -- a step
     up here reads as a browser zoom rather than as emphasis. */
  --t-body: clamp(1rem, .97rem + .16vw, 1.0625rem);
  /* 16 -> 17 */
  --t-lede: clamp(1.06rem, 1.02rem + .32vw, 1.3rem);
  /* 17 -> 20.8 */
  --t-lg: clamp(1.04rem, 1rem + .28vw, 1.22rem);
  /* 16.6 -> 19.5 */
  --t-sm: .9375rem;
  /* 15 -- secondary prose, list rows, footer */
  --t-xs: .875rem;
  /* 14 -- card copy, dense list rows */
  --t-2xs: .8125rem;
  /* 13 -- field labels, hints, captions */
  --t-code: .75rem;
  /* 12 -- code and policy blocks */
  --t-lbl: .6875rem;
  /* 11 -- mono/eyebrow label voice */
  --t-lbl-sm: .625rem;
  /* 10 */
  --t-lbl-xs: .5625rem;
  /*  9 */
  --t-lbl-xxs: .5rem;
  /*  8 -- smallest column head only */
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --paper: #131517;
    --surface: #1B1D20;
    --sunken: #0D0E10;
    --ink: #ECEEEF;
    --ink-2: #A8ADB2;
    --ink-3: #868B91;
    --rule: #292C30;
    --rule-2: #3E4247;
    --signal: #6E9BFF;
    --signal-soft: rgba(110, 155, 255, .13);
    --signal-line: rgba(110, 155, 255, .38);
    --wire: rgba(110, 155, 255, .5);
    --on-signal: #131517;
    --pass: #ECEEEF;
    --pass-soft: rgba(236, 238, 239, .08);
    --warn: #868B91;
    --clay: #868B91;
    --shadow: 0 1px 0 var(--rule), 0 22px 46px -34px rgba(0, 0, 0, .7);
    --shadow-lift: 0 1px 0 var(--rule), 0 40px 70px -40px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --paper: #131517;
  --surface: #1B1D20;
  --sunken: #0D0E10;
  --ink: #ECEEEF;
  --ink-2: #A8ADB2;
  --ink-3: #868B91;
  --rule: #292C30;
  --rule-2: #3E4247;
  --signal: #6E9BFF;
  --signal-soft: rgba(110, 155, 255, .13);
  --signal-line: rgba(110, 155, 255, .38);
  --wire: rgba(110, 155, 255, .5);
  --on-signal: #131517;
  --pass: #ECEEEF;
  --pass-soft: rgba(236, 238, 239, .08);
  --warn: #868B91;
  --clay: #868B91;
  --shadow: 0 1px 0 var(--rule), 0 22px 46px -34px rgba(0, 0, 0, .7);
  --shadow-lift: 0 1px 0 var(--rule), 0 40px 70px -40px rgba(0, 0, 0, .8);
}

@media (-webkit-min-device-pixel-ratio:2),
(min-resolution:192dpi) {
  :root {
    --hair: 0.5px
  }
}

/* ---------- 2. reset + base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-off) + 24px)
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none
}

button,
input {
  font: inherit;
  color: inherit
}

h1,
h2,
h3,
p,
figure,
blockquote,
ol,
ul,
dl {
  margin: 0
}

ol,
ul {
  list-style: none;
  padding: 0
}

table {
  border-collapse: collapse;
  width: 100%
}

::selection {
  background: var(--signal);
  color: var(--on-signal)
}

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

.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 2px
}

.skip:focus {
  left: 8px
}

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

/* ---------- 3. type primitives ---------- */
.h-display {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(2.3rem, 5.9vw, 5.3rem);
  line-height: 1.0;
  letter-spacing: -.028em;
  margin: 0;
}

.h-display em {
  font-style: normal;
  color: inherit
}

.h-display,
.h2,
.cta-h,
.pull p,
figcaption,
.lede {
  text-wrap: balance
}

.body,
.body-lg,
.step p,
.vc p,
.tcard p,
.fit p {
  text-wrap: pretty
}

.h2 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.95rem, 3.7vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -.024em;
  text-wrap: balance;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 33em;
  margin-bottom: 34px
}

.body-lg {
  font-size: var(--t-lg);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 36em
}

.body {
  color: var(--ink-2);
  max-width: 36em;
  margin-top: 16px
}

.body-lg+.body,
.body-lg+.body-lg {
  margin-top: 18px
}

.fig,
.eyebrow,
.secname,
.lbl,
.stack-lbl {
  font-family: var(--f-sans);
  font-size: var(--t-lbl);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.fig {
  color: var(--ink-3)
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  margin-bottom: 22px
}

.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-2);
  position: relative;
  flex: none
}

.pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ink-2);
  opacity: .5;
  animation: ping 2.6s var(--ease-io) infinite
}

@keyframes ping {
  0% {
    transform: scale(.5);
    opacity: .7
  }

  70%,
  100% {
    transform: scale(1.5);
    opacity: 0
  }
}

.closer {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 60, 'wdth' 100;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -.018em;
  max-width: 22em;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

.note {
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 40em;
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid var(--rule-2)
}

/* numerals everywhere they matter */
.n,
.num,
td,
.doc-stat b,
.mk-tag i,
.slip,
.agree,
.ucount,
.ltable {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum', 'zero'
}

/* ---------- 4. buttons + chips ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: -.005em;
  padding: 11px 20px;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background .22s var(--ease-io), color .22s var(--ease-io), border-color .22s var(--ease-io), transform .22s var(--ease);
  white-space: nowrap;
  cursor: pointer;
}

.btn-lg {
  padding: 14px 26px;
  font-size: 1rem
}

.btn-solid {
  background: var(--ink);
  color: var(--paper)
}

.btn-solid:hover {
  background: var(--ink-2);
  color: var(--paper)
}

.btn-line {
  border-color: var(--rule-2);
  color: var(--ink)
}

.btn-line:hover {
  border-color: var(--ink);
  background: var(--surface)
}

.btn-ghost {
  color: var(--ink-2)
}

.btn-ghost:hover {
  color: var(--ink)
}

.btn:active {
  transform: translateY(1px)
}

.arrow {
  transition: transform .3s var(--ease);
  display: inline-block
}

.btn:hover .arrow {
  transform: translateX(4px)
}

/* a downward arrow should nudge the way it points */
.btn:hover .arrow-dn {
  transform: translateY(3px)
}

.chip {
  font-family: var(--f-sans);
  font-size: var(--t-lbl);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip.pass {
  color: var(--ink-3)
}

.chip.fail {
  color: var(--signal)
}

/* ---------- 5. page chrome ---------- */
.regmarks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90
}

.rm {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: .45
}

.rm::before,
.rm::after {
  content: '';
  position: absolute;
  background: var(--rule-2)
}

.rm::before {
  width: 100%;
  height: 1px;
  top: 0
}

.rm::after {
  width: 1px;
  height: 100%;
  left: 0
}

.rm-tl {
  top: 14px;
  left: 14px
}

.rm-tr {
  top: 14px;
  right: 14px
}

.rm-tr::after {
  left: auto;
  right: 0
}

.rm-bl {
  bottom: 14px;
  left: 14px
}

.rm-bl::before {
  top: auto;
  bottom: 0
}

.rm-br {
  bottom: 14px;
  right: 14px
}

.rm-br::before {
  top: auto;
  bottom: 0
}

.rm-br::after {
  left: auto;
  right: 0
}

@media (max-width:900px) {
  .regmarks {
    display: none
  }
}

.gridlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.gridlines i {
  border-left: 1px solid var(--rule);
  opacity: .42
}

.gridlines i:first-child {
  border-left: 0
}

@media (max-width:900px) {
  .gridlines {
    display: none
  }
}

/* nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}

.nav.is-stuck {
  border-bottom-color: var(--rule)
}

.nav-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 var(--gut);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none
}

.brand-mark {
  width: 25px;
  height: 25px;
  color: var(--ink)
}

.brand-dot {
  transform-origin: 14px 14px;
  animation: orbit 9s linear infinite
}

@keyframes orbit {
  to {
    transform: rotate(360deg)
  }
}

.brand-word {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 36, 'wdth' 100;
  font-size: 1.32rem;
  letter-spacing: -.018em;
  ;
  font-weight: 560
}

.nav-links {
  display: flex;
  gap: clamp(12px, 1.8vw, 26px);
  margin-left: auto;
  font-size: var(--t-xs);
  color: var(--ink-2)
}

.nav-links a {
  position: relative;
  padding: 4px 0;
  transition: color .2s
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease)
}

.nav-links a:hover {
  color: var(--ink)
}

.nav-links a:hover::after,
.nav-links a.is-cur::after {
  transform: scaleX(1)
}

.nav-links a.is-cur {
  color: var(--ink)
}

.nav-act {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto
}

.nav-links+.nav-act {
  margin-left: clamp(12px, 3vw, 40px)
}

.theme-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  transition: color .2s, border-color .2s, transform .4s var(--ease)
}

.theme-btn svg {
  width: 15px;
  height: 15px
}

.theme-btn:hover {
  color: var(--ink);
  border-color: var(--rule-2)
}

.theme-btn:active {
  transform: rotate(180deg)
}

.nav-progress {
  height: 1px;
  background: var(--rule);
  position: relative
}

.nav-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--signal);
  transition: width .12s linear
}

/* With the single design-partner CTA the bar carries far less width than it did
   with two buttons, so the section links survive well into tablet territory.
   Past that the bar turns instead of hiding them: the links drop to a second
   ruled row spanning the bar. A hamburger would be one more piece of hidden
   state for three short labels, and this page is meant to read as an
   instrument panel -- nothing on it is behind a lid. --nav-off carries the
   real sticky height so scroll anchoring and the form both follow. */
@media (max-width:720px) {

  /* 58 bar + 44 link row + the hairline between them */
  :root {
    --nav-h: 58px;
    --nav-off: calc(var(--nav-h) + 45px)
  }

  .nav-in {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0
  }

  .nav-in>.brand {
    min-height: var(--nav-h)
  }

  .nav-links,
  .nav-links+.nav-act {
    margin-left: auto
  }

  .nav-links {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    gap: 0;
    height: 44px;
    align-items: stretch;
    border-top: 1px solid var(--rule);
  }

  .nav-links a {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* the underline is the current-section marker, so on a full-width cell it
     reads better tucked under the label than stretched edge to edge */
  .nav-links a::after {
    left: 16%;
    right: 16%
  }
}

@media (max-width:560px) {
  .btn-lg {
    padding: 12px 18px;
    font-size: var(--t-sm)
  }
}

/* The nav CTA is the longest label on the bar and it is the conversion goal,
   so the bar gives up its own spacing before the button gives up its verb.
   The one thing it may not do is push the actions onto a row of their own: the
   bar is now two rows on a phone, and a third would eat a quarter of the
   screen. So the verb goes at the width where the first row stops fitting,
   which the larger button type moved up from 380px to here. */
@media (max-width:460px) {
  .nav-cta-long {
    display: none
  }

  .nav-cta {
    padding: 10px 14px;
    font-size: var(--t-xs)
  }
}

@media (max-width:400px) {

  /* column gap only -- a row gap here would open a band between the bar and
     the links row and put --nav-off out by exactly that much */
  .nav-in {
    column-gap: 14px
  }

  .nav-act {
    gap: 8px
  }

  .brand-word {
    font-size: 1.18rem
  }
}

@media (max-width:360px) {
  .nav-cta {
    padding: 9px 11px;
    font-size: var(--t-2xs)
  }
}

/* ---------- 6. sections ---------- */
.sec {
  position: relative;
  z-index: 1;
  padding: clamp(74px, 9vw, 132px) 0;
  border-top: 1px solid var(--rule)
}

.sec-tint {
  background: var(--surface)
}

.sec-dark {
  background: var(--sunken)
}

.sechead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: clamp(30px, 4vw, 52px)
}

.sep {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  margin-left: 4px;
  white-space: nowrap
}

.sep::before {
  content: '';
  position: absolute;
  left: 6px;
  top: .1em;
  bottom: .1em;
  width: var(--hair);
  background: var(--rule-2)
}

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

.secname {
  color: var(--ink)
}

.two {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start
}

.two-a .h2 {
  max-width: 13ch
}

/* 13ch is a measure for a two- or three-word headline. Where a section leads on a
   full sentence it stacks to five ragged lines with 136px of its own column left
   empty beside it, so those sections read at the column measure instead -- the
   same exemption #safety and #autonomy already take. */
#registry .two-a .h2,
#report .two-a .h2 {
  max-width: none
}

@media (max-width:860px) {
  .two {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px
  }

  .two-a .h2 {
    max-width: none
  }
}

/* reveal */
.reveal {
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay: calc(var(--d, 0)*90ms)
}

.js-anim .reveal {
  opacity: 0;
  transform: translateY(18px)
}

.js-anim .reveal.in {
  opacity: 1;
  transform: none
}

.reveal[data-d="1"] {
  --d: 1
}

.reveal[data-d="2"] {
  --d: 2
}

.reveal[data-d="3"] {
  --d: 3
}

/* ---------- 7. hero ---------- */
.hero {
  position: relative;
  z-index: 1;
  padding-top: clamp(46px, 7vw, 86px)
}

.hero-in {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: 0 clamp(34px, 5vw, 76px);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 104px)
}

.hero-head {
  grid-column: 1 / -1;
  margin-bottom: clamp(30px, 4.4vw, 58px)
}

.hero-copy {
  grid-column: 1;
  align-self: start;
  padding-top: clamp(6px, 1.6vw, 22px)
}

.h-display .l {
  display: block
}

.js-anim .h-display .l {
  clip-path: inset(0 0 108% 0);
  transform: translateY(.24em);
  opacity: 0;
  animation: lineIn .95s var(--ease) forwards
}

.h-display .l:nth-child(1) {
  animation-delay: .06s
}

.h-display .l:nth-child(2) {
  animation-delay: .16s
}

.h-display .l:nth-child(3) {
  animation-delay: .26s
}

@keyframes lineIn {
  to {
    clip-path: inset(-.18em -.12em -.16em 0);
    transform: none;
    opacity: 1
  }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px
}

.js-anim .hero-cta {
  opacity: 0;
  animation: fadeUp .8s var(--ease) .5s forwards
}

.hero-foot {
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 34em;
  padding-top: 22px;
  border-top: 1px solid var(--rule)
}

.js-anim .hero-foot {
  opacity: 0;
  animation: fadeUp .8s var(--ease) .62s forwards
}

.js-anim .lede {
  opacity: 0;
  animation: fadeUp .8s var(--ease) .4s forwards
}

/* the hero carries a lede plus one supporting paragraph -- the lede sheds its
   own bottom margin so the pair reads as a single block */
.hero-copy .lede {
  margin-bottom: 14px
}

.hero-sub {
  margin-bottom: 32px
}

.js-anim .hero-sub {
  opacity: 0;
  animation: fadeUp .8s var(--ease) .46s forwards
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}


/* the instrument */
.inst {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  container-type: inline-size;
}

.inst-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule)
}

.inst-title {
  font-size: var(--t-xs);
  font-weight: 500
}

.inst-meta {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .1em;
  color: var(--ink-3);
  text-transform: uppercase
}

.inst-meta i,
.inst-cap i {
  font-style: normal;
  color: var(--rule-2);
  padding: 0 3px
}

.inst-body {
  padding: clamp(18px, 3.4cqw, 30px)
}

.gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px
}

.gauge-head .lbl {
  color: var(--ink-2)
}

.gauge-head .req {
  color: var(--signal);
  text-align: right
}

/* the hair space between the operator and the figure is breakable, so on the
   narrow instrument the label wrapped as "THRESHOLD>=" / "96%" and left the
   operator pointing at nothing. It wraps before the value or not at all. */
.gauge-head .req b {
  font-weight: 500;
  white-space: nowrap
}

.rail {
  position: relative;
  height: 192px;
  margin-bottom: 26px
}

.rail-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 66px;
  height: 1px;
  background: var(--rule-2)
}

.ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 67px;
  height: 12px
}

.ticks span {
  position: absolute;
  bottom: 0;
  width: 1px;
  background: var(--rule-2);
  height: 4px;
  transform-origin: bottom;
  transition: opacity .3s, transform .4s var(--ease)
}

.ticks span.maj {
  height: 9px;
  background: var(--ink-3)
}

.scale {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .08em;
  color: var(--ink-3)
}

.scale span {
  position: absolute;
  transform: translateX(-50%)
}

.scale span:first-child {
  transform: none
}

.scale span:last-child {
  transform: translateX(-100%)
}

.thresh {
  position: absolute;
  left: var(--x);
  bottom: 66px;
  height: 52px;
  width: 1px;
  background: repeating-linear-gradient(to top, var(--signal) 0 4px, transparent 4px 8px);
  transition: opacity .5s .5s
}

.thresh span {
  position: absolute;
  top: -13px;
  left: 6px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .14em;
  color: var(--signal);
  white-space: nowrap
}

.mk {
  position: absolute;
  left: var(--x);
  bottom: 66px
}

.mk-tag {
  position: absolute;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .09em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 2px
}

.mk-tag i {
  font-style: normal;
  letter-spacing: -.01em
}

.mk-human .mk-dot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
  transition: opacity .4s, transform .5s var(--ease) .3s
}

.mk-human .mk-tag {
  top: 12px;
  right: -2px;
  left: auto;
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  color: var(--clay);
  transition: opacity .5s .45s
}

.mk-human .mk-tag i {
  color: var(--ink-2);
  font-size: var(--t-2xs);
  font-weight: 500
}

.mk-ai {
  transition: left 1.5s var(--ease) .55s
}

.mk-ai .mk-blade {
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 2px;
  height: 56px;
  background: var(--signal);
  transition: height .5s var(--ease) .55s
}

.mk-ai::after {
  content: '';
  position: absolute;
  left: -5px;
  bottom: 52px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--signal);
  border-radius: 50%;
  background: var(--surface);
  transition: opacity .4s 1.5s
}

.mk-ai .mk-tag {
  bottom: 70px;
  left: -6px;
  color: var(--signal);
  transition: opacity .5s 1.5s
}

.mk-ai .mk-tag i {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1
}

.mtable {
  font-size: clamp(.75rem, 2.9cqw, .8125rem)
}

.mtable thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0)
}

.mtable th,
.mtable td {
  text-align: right;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-weight: 400
}

.mtable th[scope=row] {
  text-align: left;
  color: var(--ink-2);
  font-weight: 400
}

.mtable .base {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--rule-2)
}

.mtable .ai {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--f-mono)
}

.mtable .req {
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: var(--t-code)
}

.mrow {
  transition: opacity .5s var(--ease), transform .5s var(--ease)
}

.is-live .mrow:nth-child(1) {
  transition-delay: 1.6s
}

.is-live .mrow:nth-child(2) {
  transition-delay: 1.72s
}

.is-live .mrow:nth-child(3) {
  transition-delay: 1.84s
}

.is-live .mrow:nth-child(4) {
  transition-delay: 1.96s
}

.mtable .u-short {
  display: none
}

@container (max-width:520px) {
  .mtable .req {
    display: none
  }

  .mtable thead th:nth-child(4) {
    display: none
  }
}

/* Below the tablet rung the criterion names need every pixel the number
   columns can give back, so the time units go to their abbreviated form. */
@container (max-width:470px) {
  .mtable .u-long {
    display: none
  }

  .mtable .u-short {
    display: inline
  }

  /* once the spare width is gone the columns need a gutter of their own */
  .mtable td {
    padding-left: 6px
  }
}

.verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule)
}

.verdict .lbl {
  color: var(--ink-3)
}

.stamp {
  display: inline-block;
  color: var(--ink);
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(.9375rem, 3.4cqw, 1.24rem);
  letter-spacing: -.016em;
  border-bottom: 3px double var(--ink);
  padding-bottom: 3px;
  max-width: calc(100% - 4px);
  transform: scale(1);
  transition: opacity .3s, transform .62s cubic-bezier(.2, 1.5, .4, 1);
}

.is-live .stamp {
  transition-delay: 2.2s
}

.js-anim .inst:not(.is-live) .stamp {
  transform: scale(1.12)
}

/* held-back states: only while the entrance is actually going to play */
.js-anim .inst {
  opacity: 0;
  animation: fadeUp .9s var(--ease) .3s forwards
}

.js-anim .inst:not(.is-live) .ticks span,
.js-anim .inst:not(.is-live) .thresh,
.js-anim .inst:not(.is-live) .mk-human .mk-dot,
.js-anim .inst:not(.is-live) .mk-human .mk-tag,
.js-anim .inst:not(.is-live) .mk-ai .mk-tag,
.js-anim .inst:not(.is-live) .mk-ai::after,
.js-anim .inst:not(.is-live) .mrow,
.js-anim .inst:not(.is-live) .verdict-note,
.js-anim .inst:not(.is-live) .stamp {
  opacity: 0
}

.js-anim .inst:not(.is-live) .ticks span {
  transform: scaleY(.2)
}

.js-anim .inst:not(.is-live) .mk-human .mk-dot {
  transform: scale(0)
}

.js-anim .inst:not(.is-live) .mk-ai .mk-blade {
  height: 0
}

.js-anim .inst:not(.is-live) .mrow {
  transform: translateY(8px)
}

.stamp-in {
  display: block
}

.verdict-note {
  margin-top: 10px;
  font-size: var(--t-2xs);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 50em;
  transition: opacity .5s
}

.is-live .verdict-note {
  transition-delay: 2.34s
}

.replay {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  margin-right: auto;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 5px 7px;
  border-radius: 2px;
  transition: color .2s, background .2s;
}

.replay:hover {
  color: var(--ink);
  background: transparent
}

.replay .rot {
  display: inline-block;
  transition: transform .6s var(--ease)
}

.replay:hover .rot {
  transform: rotate(-180deg)
}

.replay:hover {
  border-color: var(--signal-line)
}

@container (max-width:430px) {
  .verdict {
    flex-wrap: wrap;
    gap: 12px
  }

  .stamp {
    flex-basis: 100%
  }
}

/* On the smallest phones the baseline tag is longer than the rail has room
   for to the left of its own dot. Stack it the way the AI tag is already
   stacked rather than let it run out past the card edge. */
@container (max-width:330px) {
  .mk-human .mk-tag {
    top: 9px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0
  }

  .mk-human .mk-tag i {
    font-size: var(--t-code)
  }
}

@media (max-width:520px) {
  .inst-meta {
    margin-left: 0
  }
}

/* The hero used to give up its second column at 980px, 80px before the rest
   of the desktop composition does -- the register marks and the column rules
   both run to 900. That left a band of widths showing a stacked, phone-shaped
   hero inside a ruled desktop grid. The hero now ends where they end, and the
   last laptop tier before that pays for the narrower columns out of the gap
   rather than out of the instrument. */
@media (min-width:900px) and (max-width:1199px) {
  .hero-in {
    gap: 0 clamp(30px, 4vw, 52px)
  }

  .hero-in .hero-head {
    margin-bottom: clamp(26px, 3.4vw, 42px)
  }
}

@media (max-width:899px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px
  }

  .hero-in .hero-head,
  .hero-in .hero-copy,
  .hero-in .inst {
    grid-column: 1
  }

  .hero-in .inst {
    grid-row: auto
  }

  .hero-in .hero-head {
    margin-bottom: 0
  }
}

/* stack strip */
.stackstrip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: relative;
  z-index: 1
}

.stack-in {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  padding-block: 16px;
  flex-wrap: wrap
}

.stack-lbl {
  color: var(--ink-3);
  flex: 1 1 auto;
  min-width: 0
}

.stack-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2.6vw, 34px);
  align-items: center
}

.stack-list li {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 30, 'wdth' 100;
  font-size: 1.0625rem;
  letter-spacing: -.014em;
  color: var(--ink-2);
  transition: color .25s, transform .35s var(--ease);
  cursor: default;
}

.stack-list li:hover {
  color: var(--ink);
  transform: translateY(-2px)
}

/* ---------- 8. problem ---------- */
/* the four questions live on the shared .four / .tcard grid in section 11 */

/* The shared 13ch cap suits the short headlines further down the page. This one
   carries a second full sentence, and at 13ch it shatters into four ragged lines.
   Letting it use the column keeps the two sentences reading as two thoughts. */
#problem .two-a .h2 {
  max-width: none
}

/* ---------- 9. insight ---------- */
.insight .pull {
  margin: 0 0 30px
}

.pull p {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(2.05rem, 5.4vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  max-width: 17ch;
  ;
  font-weight: 560
}

.pull em {
  font-style: normal;
  color: inherit
}

.pull-sub {
  color: var(--ink-2);
  max-width: 44em;
  font-size: clamp(1.02rem, 1rem + .26vw, 1.18rem)
}

.anat {
  margin-top: clamp(46px, 6vw, 84px);
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.42fr);
  grid-template-rows: auto 1fr;
  gap: 14px clamp(20px, 4vw, 56px);
  align-items: start;
}

.anat-cap {
  grid-area: 1/1;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2)
}

.anat-stage {
  grid-area: 1/2/span 2/auto;
  perspective: 1300px;
  height: clamp(420px, 40vw, 455px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 34px;
  overflow: hidden
}

.anat-stack {
  position: relative;
  width: min(380px, 72vw);
  height: 34px;
  transform-style: preserve-3d;
  transform: rotateX(34deg) rotateZ(-12deg);
  transition: transform 1.1s var(--ease)
}

.anat:hover .anat-stack {
  transform: rotateX(30deg) rotateZ(-10deg)
}

.plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  border: 1px solid var(--rule-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  transform: translateZ(calc(var(--i) * 58px));
  transition: transform .95s var(--ease), opacity .6s var(--ease), border-color .3s, background .3s;
  transition-delay: calc(var(--i) * 65ms);
  box-shadow: 0 10px 20px -16px rgba(21, 23, 15, .55);
}

.js-anim .anat:not(.in) .plate {
  opacity: 0;
  transform: translateZ(calc(var(--i) * 14px)) translateY(16px)
}

.anat:hover .plate {
  transform: translateZ(calc(var(--i) * 68px))
}

.p-n {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .14em;
  color: var(--ink-3);
  flex: none
}

.p-t {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap
}

.plate.is-out {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal) 9%, var(--surface))
}

.plate.is-out .p-t,
.plate.is-out .p-n {
  color: var(--signal)
}

.anat-note {
  grid-area: 2/1;
  color: var(--ink-2);
  max-width: 34em;
  font-size: var(--t-sm)
}

@media (max-width:900px) {
  .anat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto
  }

  .anat-cap {
    grid-area: auto
  }

  .anat-stage {
    grid-area: auto
  }

  .anat-note {
    grid-area: auto
  }
}

/* The stack is drawn in 3D, so its painted width is not its layout width: the
   Z-offsets are tipped into the picture plane by rotateX and then swung
   sideways by rotateZ, and the further the plates are pushed apart the wider
   the whole thing leans. On a phone that lean ran into the stage's own
   overflow clip and sheared the top plates off. Shallower lean, tighter
   plate spacing and a smaller plate label keep the projection inside the
   column, which is the only way this reads as one object. */
@media (max-width:520px) {
  .anat-stack {
    width: 64vw;
    transform: rotateX(31deg) rotateZ(-8deg)
  }

  .anat:hover .anat-stack {
    transform: rotateX(29deg) rotateZ(-7deg)
  }

  .plate {
    transform: translateZ(calc(var(--i) * 40px));
    padding: 0 12px;
    gap: 9px
  }

  .anat:hover .plate {
    transform: translateZ(calc(var(--i) * 46px))
  }

  .p-t {
    font-size: var(--t-lbl-xs)
  }

  .anat-stage {
    height: clamp(330px, 84vw, 420px);
    padding-bottom: 24px
  }
}

/* ---------- 10. method ---------- */
.rail-wrap {
  margin: clamp(40px, 5vw, 64px) 0 clamp(14px, 2vw, 24px)
}

.lifecycle {
  position: relative;
  padding-top: 22px
}

.lc-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-2)
}

.lc-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--signal);
  transition: width .1s linear
}

/* Three stages, so the rail is a three-segment scale that fills as the reader
   moves through the section. Three short labels fit at every width, which is why
   this one needs no reflow rule of its own. */
.lc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px
}

.lc-steps li {
  position: relative;
  padding-top: 12px
}

.lc-steps li::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 0;
  width: 1px;
  height: 9px;
  background: var(--rule-2)
}

.lc-steps span {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .3s
}

.lc-steps li.on span {
  color: var(--ink)
}

.lc-steps li.on::before {
  background: var(--signal);
  height: 13px
}

.steps {
  margin-top: clamp(30px, 4vw, 48px)
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: start;
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 1px solid var(--rule)
}

.step:has(.step-c--wide) {
  grid-template-columns: minmax(0, 1fr) auto
}

.step-n {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: .8;
  color: var(--ink);
  letter-spacing: -.04em;
  transition: color .5s var(--ease);
  ;
  font-weight: 560
}

.js-anim .step:not(.in) .step-n {
  color: var(--rule-2)
}

.step h3 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 60, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.34rem, 2.4vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin-bottom: 12px
}

.step p {
  color: var(--ink-2);
  max-width: 44em
}

@media (max-width:700px) {

  .step,
  .step:has(.step-c--wide) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px
  }

  .step-n {
    order: -1
  }
}

/* the three stages -------------------------------------------------------
   The numeral stays the anchor of each stage; the mono key only names it, and
   one display-weight sentence closes each one. Nothing new gets invented here:
   the readouts reuse the report panel and the criteria list from the product. */
#method .two-a .h2 {
  max-width: none
}

#method .step-k {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 11px;
}

#method .step p+p {
  margin-top: 15px
}

#method .step-say {
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: 15px;
  border-top: 1px solid var(--ink);
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 60, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.14rem, 1.9vw, 1.46rem);
  line-height: 1.26;
  letter-spacing: -.018em;
  color: var(--ink);
  max-width: 26em;
}

#method .readout {
  margin-top: 24px
}

#method .readout .crit-lbl {
  margin-bottom: 10px
}

#method .readout .doc-grid {
  margin-top: 0
}

#method .readout .doc-stat b {
  font-size: clamp(1.14rem, 2.2vw, 1.44rem)
}

#method .crit-lbl .sep {
  padding-left: 16px;
  letter-spacing: inherit
}

#method .flywheel {
  margin-top: 26px
}

/* the chips read as a path rather than a loop here: the arrows get room to sit
   between two chips instead of against the next border, and the last one drops
   the return arrow the registry flywheel needs. */
#method .fw-path {
  gap: 9px 24px
}

#method .fw-path li::after {
  right: -17px
}

#method .fw-path li:last-child::after {
  content: none
}

/* Four steps cannot sit on one line on a phone, and a wrapped path leaves an
   arrow pointing at nothing. Below this width the path turns and points down. */
@media (max-width:540px) {
  #method .fw-path {
    display: grid;
    justify-items: start;
    gap: 19px 0
  }

  #method .fw-path li::after {
    content: '\2193';
    top: 100%;
    right: auto;
    left: 15px;
    transform: translateY(4px)
  }
}

#method .method-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 26px);
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule);
}

#method .mc-lbl {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.crit,
.map,
.code,
.prog,
.verdicts {
  margin-top: 24px
}

.crit {
  border-top: 1px solid var(--ink);
  padding-top: 12px
}

.crit-lbl {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 8px
}

.crit ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-xs)
}

.crit ul li b {
  font-weight: 400;
  color: var(--ink-2)
}

.crit ul li i {
  font-style: normal;
  font-family: var(--f-mono);
  color: var(--ink);
  margin-left: auto
}

.sev {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  flex: none;
  width: 10.2em;
  text-align: right;
  white-space: nowrap
}

.sev.req {
  color: var(--ink)
}

.sev.rec {
  color: var(--ink-3)
}

.map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.6vw, 34px)
}

.map-col {
  border-top: 1px solid var(--ink);
  padding-top: 11px
}

.map-h {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule)
}

.map-h.in {
  color: var(--ink-2)
}

.map-h.gt {
  color: var(--ink)
}

.map-h.md {
  color: var(--ink-3)
}

.map-col code {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-code);
  color: var(--ink-2);
  padding: 3px 0
}

@media (max-width:620px) {
  .map {
    grid-template-columns: minmax(0, 1fr)
  }
}

.code {
  border-left: 2px solid var(--rule-2);
  padding-left: clamp(14px, 2vw, 22px)
}

.code-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 0 6px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.code-h--res {
  padding-top: 18px;
  color: var(--pass)
}

.code-tag {
  color: var(--signal);
  letter-spacing: .16em;
  font-size: var(--t-lbl-xs)
}

.code pre {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: var(--t-code);
  line-height: 1.74;
  color: var(--ink-2)
}

.prog {
  border-top: 1px solid var(--ink);
  padding-top: 13px
}

.prog-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px
}

.prog-n {
  color: var(--ink);
  font-size: 1.32rem;
  letter-spacing: -.01em
}

.prog-bar {
  height: 3px;
  background: var(--rule);
  overflow: hidden
}

.prog-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width .2s linear
}

.prog-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 9px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .05em;
  color: var(--ink-3)
}

.prog-legend b {
  color: var(--ink);
  font-weight: 500
}

.prog-legend .warn b {
  color: var(--signal)
}

.prog-legend .mute b {
  color: var(--ink-3)
}

.verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px)
}

.vc {
  padding-top: 13px
}

.vc-k {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 8px
}

.vc p {
  font-size: var(--t-xs);
  line-height: 1.5
}

.vc-no {
  border-top: var(--rule-heavy) solid var(--signal)
}

.vc-no .vc-k {
  color: var(--signal)
}

.vc-mid {
  border-top: var(--rule-mid) solid var(--ink)
}

.vc-mid .vc-k {
  color: var(--ink-2)
}

.vc-go {
  border-top: var(--hair) solid var(--ink)
}

.vc-go .vc-k {
  color: var(--ink-2)
}

@media (max-width:700px) {
  .verdicts {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* ============================================================
   11. LEDGERS
   Naked tables on the page ground. No container, no radius, no fill.
   Accounting rules do the work: a heavy rule opens the table, a
   hairline separates rows, a heavy rule closes it. The evidence table
   is pulled wider than every other element on the page, so the one
   table that settles the argument is physically the widest thing here.
   ============================================================ */
.ledger,
.diff,
.reg {
  margin-top: clamp(30px, 4vw, 48px)
}

.ledger {
  margin-inline: calc(var(--gut) * -0.62)
}

.ledger-cap,
.diff-cap,
.reg-cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.cap-note {
  margin-left: auto;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: .03em;
  font-size: var(--t-lbl-sm)
}

@media (max-width:680px) {
  .cap-note {
    display: none
  }
}

/* These tables are the evidence, so they keep all five columns and scroll
   sideways rather than dropping a column or collapsing into stacked cards. A
   swipe inside the table must not drag the page with it, and the right edge
   fades so it is visible that there is more table than viewport. */
.ledger-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width:760px) {
  .ledger-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }

  .ledger-cap,
  .diff-cap,
  .reg-cap {
    padding-bottom: 10px
  }
}

/* the floor grew with the type: five columns of 17px figures plus the column
   gutters need more room than the 15px set did */
.ltable {
  font-size: var(--t-sm);
  min-width: 690px
}

.ltable thead th {
  font-family: var(--f-sans);
  font-size: var(--t-lbl);
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
  padding: 0 0 9px 26px;
  border-bottom: var(--hair) solid var(--ink);
}

.ltable thead th:first-child {
  text-align: left;
  padding-left: 0
}

.ltable td,
.ltable tbody th {
  padding: 13px 0 13px 26px;
  text-align: right;
  font-weight: 400;
  border-bottom: 0;
}

.ltable tbody th {
  text-align: left;
  padding-left: 0;
  color: var(--ink);
  font-weight: 400
}

.ltable tbody tr:last-child td,
.ltable tbody tr:last-child th {
  padding-bottom: 15px
}

.ltable tbody {
  border-bottom: var(--hair) solid var(--ink)
}

.ltable .n {
  font-family: var(--f-mono);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums
}

.ltable .mute {
  color: var(--ink-3)
}

.ltable .hi {
  color: var(--ink);
  font-weight: 500
}

.ltable .dlt {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 4px;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.js-anim .ledger:not(.in) .dlt {
  opacity: 0;
  transform: translateY(-5px)
}

.ledger.in .lrow:nth-child(1) .dlt {
  transition-delay: .14s
}

.ledger.in .lrow:nth-child(2) .dlt {
  transition-delay: .23s
}

.ledger.in .lrow:nth-child(3) .dlt {
  transition-delay: .32s
}

.ledger.in .lrow:nth-child(4) .dlt {
  transition-delay: .41s
}

.ledger.in .lrow:nth-child(5) .dlt {
  transition-delay: .50s
}

.lrow {
  transition: background .25s
}

.lrow:hover {
  background: color-mix(in srgb, var(--signal) 3.5%, transparent)
}

/* the verdict is a statement under the table, not a tinted footer bar */
.ledger-foot {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px
}

.lf-k {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.lf-v {
  margin-left: auto;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.24rem, 2.6vw, 1.72rem);
  letter-spacing: -.02em;
  color: var(--ink);
  border-bottom: 3px double var(--ink);
  padding-bottom: 4px
}

/* the three evaluation kinds: columns divided by rules, not three cards */
.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.4vw, 48px);
  margin-top: clamp(34px, 4.4vw, 58px)
}

.tcard {
  border-top: 1px solid var(--ink);
  padding-top: 16px
}

.tcard .fig {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: var(--f-sans);
  font-size: var(--t-lbl-sm);
  letter-spacing: .18em;
  color: var(--ink-3)
}

.tcard h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.012em;
  margin-bottom: 8px
}

.tcard p {
  font-size: var(--t-xs);
  line-height: 1.56;
  color: var(--ink-2)
}

@media (max-width:820px) {
  .three {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px
  }
}

/* the four questions in the problem section, same rules-not-boxes logic as .three */
.four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(38px, 4.8vw, 62px)
}

.four .fig {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .14em
}

@media (max-width:1000px) {
  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3.4vw, 36px)
  }
}

@media (max-width:600px) {
  .four {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px
  }
}

.delta {
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  font-variant-numeric: tabular-nums
}

.delta.up {
  color: var(--pass)
}

.delta.down {
  color: var(--warn)
}

.diff-read {
  padding-top: 16px;
  color: var(--ink-2);
  font-size: var(--t-sm);
  max-width: 58em
}

/* ---------- 12. failures ---------- */
/* ============================================================
   RECONCILIATION SLIP
   No container. The arithmetic is the composition.
   Accounting conventions do the emphasis: a single rule above the
   operation, a double rule under the total. Both are real, both are
   specific to money, neither is a bordered card.
   ============================================================ */
.recon {
  max-width: none;
  margin-top: clamp(48px, 7vw, 96px)
}

.recon-head {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 34px);
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink)
}

.recon-head h3 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.022em;
  line-height: 1
}

.recon-src {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  gap: 18px;
  flex-wrap: wrap
}

.recon-src span {
  position: relative;
  display: inline-block;
  padding-left: 18px
}

.recon-src span::before {
  content: '';
  position: absolute;
  left: 6px;
  top: .1em;
  bottom: .1em;
  width: var(--hair);
  background: var(--rule-2)
}

.recon-body {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.16fr);
  gap: clamp(24px, 5vw, 64px);
  padding-top: clamp(22px, 3vw, 34px);
  align-items: start
}

.recon-col {
  min-width: 0
}

.recon-quote {
  font-family: var(--f-sans);
  font-style: italic;
  font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  line-height: 1.44;
  letter-spacing: -.006em;
  color: var(--ink-2);
  text-indent: -.4em
}

/* the slip ------------------------------------------------- */
.slip {
  font-variant-numeric: tabular-nums
}

.slip-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0
}

.slip-k {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.slip-v {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: .92;
  letter-spacing: -.028em;
  color: var(--ink-2);
  white-space: nowrap;
  font-weight: 560
}

.slip-v i {
  font-style: normal;
  font-size: .46em;
  color: var(--ink-3);
  vertical-align: .66em;
  margin-right: .12em
}

.slip-v em {
  font-style: normal;
  font-size: .5em;
  color: var(--ink-3);
  vertical-align: .4em
}

/* accountant's single rule above the operation */
.slip-sum {
  border-top: 1px solid var(--ink);
  margin-top: 3px;
  padding-top: 15px
}

.slip-sum .slip-k {
  color: var(--signal)
}

.slip-sum .slip-v {
  color: var(--signal);
  /* accountant's double rule under a total */
  border-bottom: 3px double var(--signal);
  padding-bottom: 9px
}

/* same slip, but the values are decisions rather than figures. keeps the
   rules and the weight, drops the currency furniture. */
.slip-word .slip-v {
  display: block;
  text-align: right;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.024em;
  text-transform: uppercase;
  white-space: normal
}

.slip-tol {
  margin-top: 20px;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 16px;
  border-left: 2px solid var(--signal)
}

.slip-tol b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

/* everything that matched, deliberately quiet ---------------- */
.agree {
  margin-top: clamp(26px, 4vw, 42px);
  font-variant-numeric: tabular-nums
}

.agree>div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.4em 6.4em;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule)
}

.agree dt {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .06em;
  color: var(--ink-3)
}

.agree dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  color: var(--ink-2);
  text-align: right
}

.agree dd.na {
  color: var(--ink-3);
  font-style: italic
}

.agree-head {
  border-bottom-color: var(--ink)
}

.agree-head dd {
  font-size: var(--t-lbl-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.agree-note {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3)
}

/* the comparison rows carry two-word labels, so the pair of columns stacks
   before the left column gets too narrow to hold one on a single line */
@media (max-width:1000px) {
  .recon-body {
    grid-template-columns: minmax(0, 1fr)
  }

  .recon-src {
    margin-left: 0
  }
}

@media (max-width:430px) {
  .agree>div {
    grid-template-columns: minmax(0, 1fr) 5.4em 5.4em;
    gap: 9px
  }

  .agree dt,
  .agree dd,
  .agree-note {
    font-size: var(--t-lbl-sm)
  }

  .agree-head dd {
    font-size: var(--t-lbl-xxs)
  }
}

/* ============================================================
   FAILURE MODES as a directly-labelled unit column
   Every group is five marks wide, so height encodes the count and
   the columns read as a chart without being a chart in a card.
   ============================================================ */
/* two sentences on one deck. each is its own block so it breaks on its own
   terms; a single <br> would let the balancer see them as one run and strand
   a last word once the column loses its 13ch cap. */
#failures .two-a .h2 span {
  display: block;
  text-wrap: balance
}

.modes {
  margin-top: clamp(40px, 5.5vw, 74px)
}

.modes-head {
  padding-bottom: 14px;
  border-bottom: var(--hair) solid var(--ink);
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap
}

.modes-head h3 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -.022em;
  line-height: 1
}

.modes-sub {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.units {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 2.2vw, 26px);
  align-items: end;
  padding: clamp(26px, 4vw, 44px) 0 0
}

.ucol {
  min-width: 0
}

.umarks {
  display: grid;
  grid-template-columns: repeat(5, 7px);
  gap: 3px;
  align-content: end;
  justify-content: start;
  margin-bottom: 11px
}

.umarks i:nth-child(10n) {
  margin-bottom: 4px
}

.umarks i {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--rule-2)
}

.ucount {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--ink);
  padding-top: 9px;
  border-top: 1px solid var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 560
}

.ulabel {
  margin-top: 7px;
  font-size: var(--t-2xs);
  line-height: 1.28;
  color: var(--ink-2);
  text-wrap: pretty
}

/* one mode is a fabrication, not a mistake. it gets the only colour. */
.ucol-crit .umarks i {
  background: var(--signal)
}

.ucol-crit .ucount {
  color: var(--signal);
  border-top-color: var(--signal)
}

.ucol-crit .ulabel {
  color: var(--signal)
}

.modes-note {
  margin-top: clamp(26px, 4vw, 40px);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44em;
  padding-left: 16px;
  border-left: 2px solid var(--signal)
}

@media (max-width:760px) {
  .units {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px
  }

  .modes-sub {
    margin-left: 0
  }
}

@media (max-width:430px) {
  .units {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* ---------- 14. autonomy ladder (3D) ---------- */
.ladder-wrap {
  margin-top: clamp(40px, 5vw, 68px);
  perspective: 1500px;
  perspective-origin: 50% 30%
}

.ladder {
  transform-style: preserve-3d;
  display: grid;
  gap: 9px
}

.rung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 20px;
  align-items: baseline;
  border: 1px solid var(--rule-2);
  border-radius: 3px;
  background: var(--surface);
  padding: clamp(15px, 2vw, 21px) clamp(17px, 2.4vw, 26px);
  margin-left: calc(var(--i) * 3.4%);
  margin-right: calc((4 - var(--i)) * 0.6%);
  transform: translateZ(calc(var(--i) * 26px));
  transition: transform .95s var(--ease), opacity .7s var(--ease), border-color .35s, box-shadow .5s;
  transition-delay: calc(var(--i) * 95ms);
  box-shadow: 0 10px 22px -20px rgba(21, 23, 15, .6);
}

.js-anim .ladder:not(.in) .rung {
  opacity: 0;
  transform: translateZ(0) translateY(26px) rotateX(9deg)
}

.rung::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -7px;
  height: 7px;
  background: var(--rule);
  border-radius: 0 0 3px 3px;
  transform: scaleX(.985);
  opacity: .55;
}

.rung:last-child::after {
  display: none
}

.rung:hover {
  border-color: var(--ink-2);
  box-shadow: 0 26px 46px -30px rgba(21, 23, 15, .55)
}

.rung:hover {
  transform: translateZ(calc(var(--i) * 26px + 34px)) translateY(-3px)
}

.r-k {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  font-size: clamp(1.14rem, 2vw, 1.5rem);
  letter-spacing: -.018em;
  grid-column: 1;
  font-weight: 560
}

.r-s {
  grid-column: 1;
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
  max-width: 40em
}

.r-d {
  grid-column: 1;
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 52em;
  line-height: 1.5
}

/* The boundary conditions on rung 04 are a list, but a bulleted list inside a rung
   doubles the card's height. Kept on one wrapping mono line with the shared hairline
   separator, so it reads as criteria without breaking the stack's rhythm. */
.r-x {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  row-gap: 6px
}

.r-i {
  grid-row: 1 / span 2;
  grid-column: 2;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .14em;
  color: var(--ink-3)
}

.rung:hover .r-i {
  color: var(--ink)
}

.rung.is-top {
  border-color: var(--ink);
  border-width: var(--hair);
  box-shadow: 0 0 0 1px var(--ink), 0 26px 46px -30px rgba(20, 22, 26, .4)
}

.rung.is-top .r-k {
  color: var(--ink)
}

@media (max-width:700px) {
  .rung {
    margin-left: 0;
    margin-right: 0
  }
}

/* The stack is drawn in 3D, so the top rung is projected past its layout box, and the
   overshoot grows with the card height. These rungs carry three lines apiece, which put
   rung 05 over the policy label at the old 34px floor. Clearance raised to sit clear of
   the projection at every width. */
.policy {
  margin-top: clamp(78px, 5vw, 88px);
  border-left: 2px solid var(--rule-2);
  padding-left: clamp(14px, 2vw, 22px)
}

/* One column makes the stack much taller, and the projection scales with it. */
@media (max-width:700px) {
  .policy {
    margin-top: 100px
  }
}

/* .sep carries its own spacing (4px margin + 18px padding around the hairline), so a
   flex gap here stacks on top of it and pushes the rule twice as far from the left
   label as the right one. Gap stays at 0 and the separator owns the rhythm. */
.policy-h {
  display: flex;
  gap: 0;
  align-items: baseline;
  padding: 0 0 10px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.policy-h i {
  font-style: normal;
  color: var(--rule-2);
  padding: 0 4px
}

.policy-code {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: var(--t-2xs);
  line-height: 1.85;
  color: var(--ink-2)
}

.policy-code b {
  font-weight: 500
}

.policy-code .k {
  color: var(--ink-3)
}

.policy-code .s,
.policy-code .v {
  color: var(--ink)
}

.policy-code .allow {
  color: var(--pass)
}

.policy-code .hold {
  color: var(--warn)
}

.policy-code .block {
  color: var(--signal)
}

.policy-note {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 62em
}

.policy-key {
  margin-top: 14px;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  font-size: clamp(1.14rem, 1.6vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -.018em;
  font-weight: 560;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance
}

/* This headline carries a full sentence. At the shared 13ch it breaks into five
   ragged lines; 16ch holds it to three and keeps the two-column balance. Scoped to
   the two-column widths so the 860px release to full measure still applies. */
@media (min-width:861px) {
  #autonomy .two-a .h2 {
    max-width: 16ch
  }
}

/* ---------- 15. containment ---------- */
/* Two written lines, one per sentence, the same idiom #position uses. The shared
   13ch measure would shred both into ragged stacks. */
#safety .two-a .h2 {
  max-width: none
}

.barrier {
  margin-top: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--ink)
}

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

.bar-side {
  padding: 20px 22px
}

.bar-side--off {
  opacity: .44
}

.bar-h {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px
}

.bar-side--off .bar-h {
  color: var(--signal)
}

.bar-side ul li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule)
}

.bar-side ul li:last-child {
  border-bottom: 0
}

.bar-side ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--pass)
}

.bar-t {
  display: block
}

.bar-d {
  display: block;
  margin-top: 2px;
  font-size: var(--t-2xs);
  line-height: 1.45;
  color: var(--ink-3)
}

/* Strike the label only. Running the rule through the explanatory line makes the
   muted column unreadable. */
.bar-side--off .bar-t {
  text-decoration: line-through;
  text-decoration-color: var(--rule-2)
}

.bar-side--off ul li::before {
  border-color: var(--signal);
  background: var(--signal-soft)
}

.bar-wall {
  position: relative;
  width: clamp(46px, 7vw, 84px);
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--signal-soft) 6px 12px);
  border-inline: 1px solid var(--signal-line)
}

.bar-wall i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--signal);
  opacity: .5
}

.bar-wall-t {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--signal);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  background: var(--surface);
  padding: 8px 3px;
}

@media (max-width:760px) {
  .bar-grid {
    grid-template-columns: minmax(0, 1fr)
  }

  .bar-wall {
    width: auto;
    height: 44px;
    border-inline: 0;
    border-block: 1px solid var(--signal-line)
  }

  .bar-wall-t {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 3px 10px
  }

  .bar-wall i {
    inset: 50% 0 auto 0;
    width: auto;
    height: 1px;
    left: 0
  }
}

.bar-key {
  margin-top: clamp(20px, 2.6vw, 30px);
  border-left: 2px solid var(--signal);
  padding-left: 18px;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  font-size: clamp(1.08rem, 1.4vw, 1.34rem);
  line-height: 1.3;
  letter-spacing: -.014em;
  font-weight: 560;
  color: var(--ink);
  max-width: 46ch;
  text-wrap: balance
}

.sec-list {
  margin-top: clamp(30px, 4vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start
}

.checks {
  display: grid;
  gap: 1px
}

.checks li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule)
}

.checks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 15px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--pass);
  border-bottom: 1.5px solid var(--pass);
  transform: rotate(-45deg)
}

.checks-h {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.14rem, 1.3vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -.014em;
  color: var(--ink);
  margin-bottom: 14px
}

.honest {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
  border-left: 2px solid var(--signal);
  padding-left: 18px
}

.honest>*+* {
  margin-top: 10px
}

.honest-h {
  display: block;
  color: var(--ink);
  font-weight: 520
}

@media (max-width:820px) {
  .sec-list {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* ---------- 16. registry ---------- */
.rtable .n {
  color: var(--ink)
}

.stage {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap
}

.stage.prod {
  color: var(--pass);
  background: var(--pass-soft)
}

.stage.shadow {
  color: var(--ink-2);
  background: var(--sunken)
}

.stage.eval {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent)
}

.stage.no {
  color: var(--signal);
  background: var(--signal-soft)
}

.rtable td:last-child,
.rtable th:last-child {
  text-align: right
}

.flywheel {
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--rule);
  padding-top: 24px
}

.fw-lbl {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 16px
}

.fw {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.fw li {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 7px 13px;
  color: var(--ink-2);
  transition: color .3s, border-color .3s, background .3s;
}

.fw li:hover {
  color: var(--ink);
  border-color: var(--ink)
}

.fw li::after {
  content: '\2192';
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rule-2);
  font-size: var(--t-code)
}

.fw li:last-child::after {
  content: '\21BA';
  right: -13px
}

.fw-note {
  margin-top: 22px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: 44em
}

/* ---------- 17. why corda ----------
   Two columns of the same shape, so the difference is what each one measures
   rather than how loudly it is drawn. Only the Corda column takes the signal
   rule, and only its rows are set in full ink. */
/* This headline is two sentences; the shared 13ch cap would shatter it. */
#position .two-a .h2 {
  max-width: none
}

.compare {
  margin-top: clamp(34px, 4vw, 54px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 64px)
}

.cmp-col {
  min-width: 0;
  border-top: var(--rule-mid) solid var(--rule-2);
  padding-top: 14px
}

.cmp-col--us {
  border-top-color: var(--signal)
}

.cmp-k {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px
}

.cmp-col--us .cmp-k {
  color: var(--signal)
}

.cmp-h {
  display: block;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.14rem, 2vw, 1.44rem);
  letter-spacing: -.018em;
  margin-bottom: 12px
}

.cmp-col ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2)
}

.cmp-col--us ul li {
  color: var(--ink)
}

@media (max-width:640px) {
  .compare {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px
  }
}

.chain {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.6vw, 18px);
  flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid var(--rule)
}

.chain-n {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .11em;
  text-transform: uppercase;
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 9px 14px;
  color: var(--ink-2)
}

.chain-n--us {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--signal-soft)
}

.chain-a {
  color: var(--rule-2);
  font-size: var(--t-xs);
  line-height: 1
}

/* A wrapped row leaves an arrow pointing at nothing, so on a phone the
   relationship turns and points down instead. */
@media (max-width:560px) {
  .chain {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }

  .chain-a {
    transform: rotate(90deg);
    margin-left: 16px
  }
}

/* ---------- 17b. ecosystem ----------
   The same 1px-gap panel grid the report sheet uses, so the tools you already
   own are presented as a plain inventory rather than a logo wall. */


.sec-tint .eco li {
  background: var(--surface)
}


/* the last cell is the promise, not a vendor, so it drops to the mono label voice */

@media (max-width:820px) {
  .eco {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

/* ---------- 17c. use cases ---------- */
/* .fitgrid carries no spacing of its own, so the section sets its own gap
   below the headline, matching the four-question grid in the problem section. */
#usecases .fitgrid {
  margin-top: clamp(38px, 4.8vw, 62px)
}

#usecases .fit-n {
  text-transform: uppercase
}

/* ---------- 18. fit ---------- */
.fitgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 44px)
}

.fit {
  border-top: 1px solid var(--ink);
  padding-top: 14px
}

.fit-n {
  font-family: var(--f-sans);
  font-size: var(--t-lbl-sm);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 14px
}

.fit h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.012em;
  margin-bottom: 9px
}

.fit p {
  font-size: var(--t-xs);
  line-height: 1.56;
  color: var(--ink-2)
}

@media (max-width:980px) {
  .fitgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:600px) {
  .fitgrid {
    grid-template-columns: minmax(0, 1fr)
  }
}

.trigger {
  margin-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--rule);
  padding-top: 30px
}

.trigger p {
  font-family: var(--f-sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.34rem, 2.9vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -.016em;
  max-width: 24ch;
}

.trigger cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3)
}

/* ---------- 19. readiness report sheet ---------- */
.doc {
  margin-top: clamp(34px, 4vw, 54px);
  perspective: 1600px
}

.doc-sheet {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(22px, 3.4vw, 44px);
  box-shadow: var(--shadow-lift);
  transform-origin: top center;
  transition: transform 1.1s var(--ease);
  max-width: 960px;
  margin-inline: auto;
}

.js-anim .doc:not(.in) .doc-sheet {
  transform: rotateX(4deg) translateY(10px)
}

.doc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink)
}

.doc-head>div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap
}

.doc-brand {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 36, 'wdth' 100;
  font-size: 1.24rem;
  letter-spacing: -.018em;
  font-weight: 560
}

.doc-kind,
.doc-date {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.doc-title {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -.024em;
  line-height: 1.1;
  margin-top: 24px;
}

.doc-title span {
  color: var(--ink-3)
}

.doc-sub {
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 7px
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 26px
}

.doc-stat {
  background: var(--surface);
  padding: 14px 16px
}

.doc-stat span {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px
}

.doc-stat b {
  font-family: var(--f-mono);
  font-size: clamp(1.24rem, 2.4vw, 1.62rem);
  font-weight: 500;
  letter-spacing: -.014em
}

.doc-stat:last-child b {
  color: var(--ink)
}

.doc-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: 28px
}

.doc-h {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule)
}

.doc-fail li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 6px 0;
  font-size: var(--t-xs);
  color: var(--ink-2)
}

.doc-fail b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--ink);
  width: 2.2em;
  flex: none
}

.doc-scope li {
  padding: 8px 0 8px 13px;
  border-left: 2px solid var(--rule-2);
  margin-bottom: 8px;
  font-size: var(--t-xs);
  color: var(--ink-2)
}

.doc-scope li span {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 3px
}

.doc-scope li.ok {
  border-left-color: var(--pass)
}

.doc-scope li.ok span {
  color: var(--pass)
}

.doc-scope li.mid {
  border-left-color: var(--warn)
}

.doc-scope li.mid span {
  color: var(--warn)
}

.doc-scope li.no {
  border-left-color: var(--signal)
}

.doc-scope li.no span {
  color: var(--signal)
}

.doc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 2px solid var(--ink)
}

.doc-foot .doc-h {
  margin: 0;
  padding: 0;
  border: 0
}

.doc-verdict {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 72, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(1.06rem, 2.2vw, 1.5rem);
  letter-spacing: -.018em;
  color: var(--ink);
  border-bottom: 3px double var(--ink);
  padding-bottom: 4px;
}

@media (max-width:760px) {
  .doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .doc-two {
    grid-template-columns: minmax(0, 1fr)
  }
}

@media (max-width:460px) {
  .doc-grid {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* ---------- 20. faq ---------- */
.faq-h {
  margin-bottom: clamp(22px, 3vw, 38px)
}

.faqs {
  border-top: 1px solid var(--rule)
}

.faq {
  border-bottom: 1px solid var(--rule)
}

.faq summary {
  display: flex;
  align-items: baseline;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  padding: 19px 0;
  font-size: clamp(1rem, .97rem + .3vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -.014em;
  transition: color .25s, padding-left .35s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none
}

.faq summary:hover {
  color: var(--ink);
  padding-left: 8px
}

.faq summary span {
  flex: 1
}

.faq summary i {
  flex: none;
  width: 13px;
  height: 13px;
  position: relative;
  align-self: center;
  transition: transform .4s var(--ease);
}

.faq summary i::before,
.faq summary i::after {
  content: '';
  position: absolute;
  background: var(--ink-3);
  transition: background .25s, opacity .3s
}

.faq summary i::before {
  left: 0;
  right: 0;
  top: 6px;
  height: 1px
}

.faq summary i::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 1px
}

.faq[open] summary i {
  transform: rotate(90deg)
}

.faq[open] summary i::before {
  opacity: 0
}

.faq[open] summary {
  color: var(--ink)
}

.faq[open] summary i::after {
  background: var(--ink)
}

.faq-a {
  overflow: hidden;
  animation: faqOpen .45s var(--ease)
}

.faq-a p {
  padding: 0 0 22px;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: 1.62
}

.faq-a b {
  color: var(--ink);
  font-weight: 500
}

@keyframes faqOpen {
  from {
    opacity: 0;
    transform: translateY(-8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---------- 21. design partner cta ----------
   The one conversion section on the page. #evidence and #safety also sit on
   --sunken, so background alone cannot carry it: this is the only band
   bracketed top AND bottom by the heaviest rule (9px signal) and the only one
   washed in signal, which is what makes it read as the end of the argument.
   Hierarchy inside the band: signal wash > surface value cards > the form,
   the only lifted, signal-edged, sticky object on the page. */
.cta {
  position: relative;
  z-index: 1;
  border-top: var(--rule-heavy) solid var(--signal);
  border-bottom: var(--rule-heavy) solid var(--signal);
  background: var(--sunken);
  padding: clamp(84px, 11vw, 148px) 0;
  overflow: hidden
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 108%, var(--signal-soft), transparent 62%),
    linear-gradient(var(--signal-soft), transparent 34%);
}

.cta-h {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  font-weight: 560;
  font-size: clamp(2.3rem, 6.4vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.032em;
  margin-bottom: 24px;
}

.cta-h em {
  font-style: normal;
  color: inherit
}

.cta-sub {
  color: var(--ink-2);
  max-width: 44em;
  font-size: clamp(1rem, .98rem + .26vw, 1.14rem);
  margin-bottom: 34px
}

.dp-in {
  position: relative
}

.dp-head {
  max-width: 26ch
}

/* 26ch is a phone measure. From tablet up it would hold the display face to a
   312px column -- narrower than the band's own content box allows for. */
@media (min-width:768px) and (max-width:860px) {
  .dp-head {
    max-width: none
  }
}

.dp-head .cta-h {
  font-size: clamp(2.2rem, 4.8vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin-bottom: 26px
}

/* signal is the failure colour everywhere else in this system, so the stressed
   word gets an annotation rule under it rather than red type */
.dp-head .cta-h em {
  text-decoration: underline;
  text-decoration-color: var(--signal-line);
  text-decoration-thickness: 3px;
  text-underline-offset: .13em
}

.dp-head .cta-sub {
  max-width: 38em;
  margin-bottom: 16px;
  color: var(--ink)
}

.dp-lead {
  color: var(--ink-2);
  max-width: 38em;
  font-size: clamp(1rem, .98rem + .26vw, 1.14rem)
}

@media (min-width:861px) {
  .dp-head {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    column-gap: clamp(28px, 5vw, 72px);
    align-items: end
  }

  .dp-head .eyebrow {
    grid-column: 1 / -1
  }

  .dp-head .cta-h {
    grid-row: 2;
    margin-bottom: 0;
    max-width: none;
    font-size: clamp(2.2rem, 4.4vw, 3.7rem)
  }

  .dp-head .cta-sub {
    grid-row: 2;
    margin-bottom: 14px
  }

  .dp-head .dp-lead {
    grid-column: 2;
    grid-row: 3
  }
}

/* mono rail label: names what the next block is, so the offer is not left to
   be inferred from three headings */
.dp-rail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(48px, 5.6vw, 76px);
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink)
}

.dp-rail::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-2);
  opacity: .65
}

.dp-rail-tight {
  margin-top: 0;
  margin-bottom: 18px
}

/* three value blocks -- promoted from hairline text blocks to surface cards,
   because this is the part the reader is being asked to want */
.dp-vals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: 22px
}

.dp-val {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: var(--rule-mid) solid var(--signal);
  border-radius: 2px;
  padding: clamp(20px, 2.2vw, 30px);
  box-shadow: var(--shadow);
  transition: opacity .78s var(--ease), transform .48s var(--ease), box-shadow .3s var(--ease);
  transition-delay: calc(var(--d, 0)*90ms)
}

@media (hover:hover) {
  .dp-val:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift)
  }
}

.dp-n {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .16em;
  color: var(--signal);
  margin-bottom: 14px
}

.dp-val h3 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32;
  font-weight: 560;
  font-size: clamp(1.16rem, 1.08rem + .34vw, 1.4rem);
  line-height: 1.16;
  letter-spacing: -.016em;
  margin-bottom: 10px
}

.dp-val p {
  font-size: var(--t-sm);
  line-height: 1.58;
  color: var(--ink-2);
  text-wrap: pretty
}

@media (max-width:820px) {
  .dp-vals {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px
  }
}

/* qualification + form */
.dp-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(30px, 4.4vw, 64px);
  align-items: start;
  margin-top: clamp(46px, 5.6vw, 78px);
  padding-top: clamp(38px, 4.4vw, 58px);
  border-top: 1px solid var(--rule)
}

@media (max-width:900px) {
  .dp-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px
  }
}

.dp-h {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32;
  font-weight: 560;
  font-size: clamp(1.3rem, 1.16rem + .7vw, 1.75rem);
  line-height: 1.16;
  letter-spacing: -.018em;
  margin-bottom: 18px
}

/* ruled like a spec sheet -- five criteria a reader scores themselves against */
.dp-check {
  max-width: 34em;
  border-top: 1px solid var(--rule)
}

.dp-check li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty
}

.dp-check li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 9px;
  color: var(--signal);
  font-size: var(--t-xs);
  line-height: 1.6
}

.dp-need {
  margin-top: clamp(26px, 3vw, 38px);
  padding: clamp(18px, 2vw, 24px);
  background: var(--signal-soft);
  border-left: var(--rule-mid) solid var(--signal)
}

.dp-need p {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32;
  font-weight: 500;
  font-size: clamp(1.06rem, 1rem + .42vw, 1.34rem);
  line-height: 1.3;
  letter-spacing: -.014em;
  color: var(--ink-2)
}

.dp-need p+p {
  margin-top: 7px
}

.dp-need .dp-need-key {
  color: var(--ink);
  font-weight: 560;
  font-size: clamp(1.14rem, 1.04rem + .5vw, 1.46rem);
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--signal-line)
}

.dp-act {
  margin-top: clamp(26px, 3vw, 36px)
}

/* the only signal-filled buttons on the page: the section CTA and the submit
   it scrolls to, so the primary action is unmistakable and reads as one act */
.dp-cta,
.dp-submit {
  background: var(--signal);
  color: var(--on-signal);
  border-color: var(--signal);
  width: 100%;
  justify-content: center;
  padding: 16px 26px;
  font-size: 1.0625rem
}

.dp-cta:hover,
.dp-submit:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink)
}

.dp-support {
  margin-top: 14px;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 34em
}

.dp-formwrap {
  align-self: stretch
}

.dp-form {
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-top: var(--rule-mid) solid var(--signal);
  border-radius: 2px;
  padding: clamp(22px, 2.8vw, 34px);
  box-shadow: var(--shadow-lift);
  position: relative;
  container-type: inline-size;
  scroll-margin-top: calc(var(--nav-off) + 28px)
}

/* pin the form beside the qualification list while it is read -- only where
   there is room for the whole card, otherwise the submit scrolls out of reach */
@media (min-width:901px) and (min-height:900px) {
  .dp-form {
    position: sticky;
    top: calc(var(--nav-off) + 28px)
  }
}

.dp-form-top {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rule)
}

.dp-form-h {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 32;
  font-weight: 560;
  font-size: clamp(1.18rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -.018em;
  margin-bottom: 7px
}

.dp-form-note {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.dp-tick {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--on-signal);
  font-size: var(--t-xs);
  line-height: 1
}

.dp-field+.dp-field,
.dp-row+.dp-field,
.dp-field+.dp-row {
  margin-top: 16px
}

.dp-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

/* the row is its own grid, so its children must not inherit the stacking gap */
.dp-row .dp-field+.dp-field {
  margin-top: 0
}

/* the card is narrow in the two-column panel long before the viewport is,
   so this pair stacks on the card's width, not the page's */
@container (max-width:400px) {
  .dp-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px
  }
}

.dp-field label {
  display: block;
  font-size: var(--t-2xs);
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 7px;
  line-height: 1.4
}

.dp-opt {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 6px
}

.dp-field input,
.dp-field textarea,
.dp-field select {
  width: 100%;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color .25s, box-shadow .25s;
}

.dp-field textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5
}

.dp-field input::placeholder,
.dp-field textarea::placeholder {
  color: var(--ink-3)
}

.dp-field input:focus,
.dp-field textarea:focus,
.dp-field select:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft)
}

.dp-select {
  position: relative
}

.dp-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer
}

.dp-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-62%);
  color: var(--ink-3);
  font-size: var(--t-code);
  pointer-events: none
}

.dp-hint {
  margin-top: 7px;
  font-size: var(--t-2xs);
  line-height: 1.45;
  color: var(--ink-3)
}

/* per-field errors: the person is told which field, next to that field */
.dp-err {
  display: none;
  margin-top: 7px;
  font-size: var(--t-2xs);
  line-height: 1.45;
  color: var(--signal)
}

.dp-field.is-bad .dp-err {
  display: block
}

.dp-field.is-bad .dp-hint {
  display: none
}

.dp-field.is-bad input,
.dp-field.is-bad textarea {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft)
}

/* honeypot -- off-screen rather than display:none, which some bots skip */
.dp-trap {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.dp-submit {
  margin-top: 22px
}

.dp-submit[aria-busy="true"] {
  opacity: .62;
  pointer-events: none
}

.dp-assure {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin-top: 15px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.dp-assure li {
  position: relative
}

.dp-msg {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--pass);
  opacity: 0;
  transition: opacity .3s
}

.dp-msg.show {
  opacity: 1
}

.dp-msg.err {
  color: var(--signal)
}

/* sent state: the card becomes the confirmation rather than moving the page.
   the CTA above it would now point at a hidden field, so it goes too. */
.dp-form.is-sent .dp-field,
.dp-form.is-sent .dp-row,
.dp-form.is-sent .dp-submit,
.dp-form.is-sent .dp-assure,
.dp-form.is-sent .dp-form-note,
.dp-form.is-sent .dp-trap {
  display: none
}

.dp-in.is-sent .dp-act {
  display: none
}

.dp-form.is-sent .dp-form-top {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0
}

.dp-form.is-sent .dp-tick {
  display: flex
}

.dp-form.is-sent .dp-msg {
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: 0;
  text-wrap: pretty
}

.dp-sent {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.dp-sent p+p {
  margin-top: 8px
}

.dp-sent b {
  font-family: var(--f-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink)
}

.dp-sent a {
  color: var(--signal);
  border-bottom: 1px solid var(--signal-line)
}

.dp-sent a:hover {
  border-bottom-color: var(--signal)
}

/* ---------- 22. footer ---------- */
.foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding-top: clamp(46px, 6vw, 72px)
}

.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 50px);
  padding-bottom: clamp(38px, 5vw, 60px)
}

.foot-brand .brand {
  margin-bottom: 14px
}

.foot-line {
  color: var(--ink-3);
  font-size: var(--t-sm);
  max-width: 26em
}

.foot-h {
  font-family: var(--f-mono);
  font-size: var(--t-lbl-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 13px
}

.foot-nav ul li {
  padding: 5px 0
}

.foot-nav a {
  font-size: var(--t-sm);
  color: var(--ink-2);
  transition: color .2s
}

.foot-nav a:hover {
  color: var(--signal)
}

.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: var(--t-lbl-sm);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3)
}

.foot-status {
  display: flex;
  align-items: center;
  gap: 8px
}

.foot-status .pulse {
  background: var(--pass)
}

.foot-status .pulse::after {
  border-color: var(--pass)
}

@media (max-width:860px) {
  .foot-in {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:520px) {
  .foot-in {
    grid-template-columns: minmax(0, 1fr)
  }

  .foot-bot {
    justify-content: flex-start
  }
}

/* ============================================================
   23. RESPONSIVE FLOOR AND CEILING
   Every block above carries its own reflow rule at the width where its
   own composition breaks. What is left here is the page-wide behaviour:
   what the reading scale does at the extremes, and what a touch pointer
   needs that a mouse does not.
   ============================================================ */

/* Two nowrap runs that are wider than a phone rung.
   The boundary conditions on ladder rung 04 include "Amount below approval
   threshold", which no longer fits a 320px rung on one line, and the flywheel
   chips draw their arrow outside their own box, so the row needs somewhere to
   put it when a chip lands against the edge. */
@media (max-width:520px) {
  .r-x .sep {
    white-space: normal
  }

  .fw {
    padding-right: 15px
  }
}

/* Smallest phones still in use, 320-360px. The gutter is the only thing
   left worth reclaiming, and the display sizes drop below their clamp
   floors, which were set for the 375px class of device. */
@media (max-width:360px) {
  :root {
    --gut: 16px
  }

  .h-display {
    font-size: 2.05rem
  }

  .pull p {
    font-size: 1.82rem
  }

  .cta-h,
  .dp-head .cta-h {
    font-size: 2rem
  }

  .step-n {
    font-size: 2.3rem
  }

  .slip-v {
    font-size: 1.7rem
  }

  .slip-word .slip-v {
    font-size: 1.34rem
  }

  .brand-word {
    font-size: 1.12rem
  }

  /* the negative pull that makes the ledger the widest object on the page
     has nothing left to pull into at this width */
  .ledger {
    margin-inline: 0
  }
}

/* A finger is not a cursor: hit areas that a mouse hits precisely at 34px
   need 44, and hover-only affordances need to be reachable without one.
   Scoped to coarse pointers so the desktop composition is untouched. */
@media (pointer:coarse) {
  .theme-btn {
    width: 44px;
    height: 44px
  }

  .foot-nav ul li {
    padding: 0
  }

  .foot-nav a {
    display: block;
    padding-block: 9px
  }

  .faq summary {
    padding-block: 22px
  }

  .replay {
    padding: 10px 11px
  }

  /* nothing here should depend on a hover to be found */
  .stack-list li:hover,
  .eco li:hover {
    transform: none
  }
}

/* Above the two-row breakpoint the links are still a 4px-padded inline row,
   which is a fine mouse target and a poor finger one. */
@media (pointer:coarse) and (min-width:721px) {
  .nav-links a {
    padding-block: 13px
  }
}

/* Wide displays. The prose blocks are capped in em, so they stop growing on
   their own; what a 1600px+ screen needs is for the frame around them to
   stop looking stranded. The frame and the gutter grow together, which
   leaves the reading measure almost where it was -- the room goes to the
   grid, the rules and the ledger pull, not to longer lines. */
@media (min-width:1600px) {
  :root {
    --wrap: 1340px;
    --gut: clamp(64px, 5vw, 92px)
  }
}

/* Display cutouts. The page asks for viewport-fit=cover, which is what lets
   the paper ground run to the physical edge of the screen instead of stopping
   at a letterboxed band -- and the manifest asks for display:standalone, so
   once this is added to a home screen there is no browser chrome between the
   page and the hardware. Both together mean the layout viewport now contains
   the status bar, the sensor housing, the rounded corners and the home
   indicator, and nothing above has been told about any of them.

   Every correction below is max(designed value, what the device asks for), so
   a screen with no cutouts computes exactly the values it computes today and
   the desktop composition is untouched. The gutter is a single token and the
   sticky height is a single token, which is what keeps this to one block
   rather than a special case per section. */
@supports (padding:max(0px, env(safe-area-inset-left))) {
  :root {
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
  }

  /* the three elements that own the gutter: the reading column, the fixed
     column rules behind it, and the bar. They have to stay registered to each
     other, so they take the same correction. */
  .wrap,
  .gridlines,
  .nav-in {
    padding-left: max(var(--gut), var(--safe-l));
    padding-right: max(var(--gut), var(--safe-r));
  }

  /* The bar is sticky at top:0, so in standalone its first row lands under the
     status bar. Padding rather than offset: the translucent ground still runs
     up under the clock, only the brand and the CTA move down out of it. */
  .nav {
    padding-top: var(--safe-t)
  }

  /* --nav-off is what scroll anchoring and the sticky form measure against, so
     it has to grow by the same amount or every anchor lands short. Restated in
     the same two tiers section 5 sets, in the same order. */
  :root {
    --nav-off: calc(var(--nav-h) + var(--safe-t))
  }

  @media (max-width:720px) {
    :root {
      --nav-off: calc(var(--nav-h) + 45px + var(--safe-t))
    }
  }

  /* last band on the page, so this is where the home indicator sits */
  .foot-bot {
    padding-bottom: max(18px, var(--safe-b))
  }

  /* The register marks are the only furniture pinned to the physical corners.
     They are hidden below 900px, which a notched phone still clears in
     landscape -- exactly the orientation where the cutout is beside them. */
  .rm-tl,
  .rm-bl {
    left: max(14px, var(--safe-l))
  }

  .rm-tr,
  .rm-br {
    right: max(14px, var(--safe-r))
  }

  .rm-tl,
  .rm-tr {
    top: max(14px, var(--safe-t))
  }

  .rm-bl,
  .rm-br {
    bottom: max(14px, var(--safe-b))
  }
}

/* ---------- 24. performance + motion + print ---------- */

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }

  .h-display .l {
    opacity: 1;
    clip-path: none;
    transform: none;
    animation: none
  }

  .lede,
  .hero-sub,
  .hero-cta,
  .hero-foot,
  .inst {
    opacity: 1;
    animation: none
  }

  .anat-stack {
    transform: none
  }

  .plate {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1;
    margin-bottom: 5px
  }

  .anat-stage {
    height: auto;
    display: block;
    perspective: none;
    overflow: visible;
    padding: 6px 0
  }

  .anat-stack {
    position: static;
    width: 100%;
    height: auto;
    transform: none
  }

  .rung {
    transform: none !important;
    opacity: 1
  }

  .doc-sheet {
    transform: none
  }

  .stamp {
    opacity: 1;
    transform: rotate(-2.4deg)
  }

  .mk-ai {
    transition: none
  }
}

@media print {

  .nav,
  .regmarks,
  .gridlines,
  .replay,
  .cta,
  .theme-btn {
    display: none !important
  }

  body {
    background: #fff;
    color: #000
  }

  .sec {
    page-break-inside: avoid;
    border-top: 1px solid #ccc
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: .7em;
    color: #666
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}
/* ---- illustrative data labels ---------------------------------------
   A buyer who reads a demo as a customer result will ask for the reference.
   Cheaper to say so on the figure than to correct it on a call. */
.demo-tag {
  display: inline-block; margin-left: 10px; padding: 2px 8px;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-3); border: 1px solid var(--rule-2); border-radius: 2px;
  vertical-align: 2px;
}
.doc-sub .demo-tag { margin: 0 10px 0 0; }
.demo-note i { color: var(--ink-3); font-style: normal; }

@media (max-width: 700px) {
  .demo-tag { margin-left: 0; margin-top: 6px; }
}


/* ---- diagrams: Where Corda sits & How Corda works ------------------- */
.diags-container {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 48px;
}

.diag-card {
  margin: 0;
  padding: clamp(28px, 4.5vw, 48px) clamp(20px, 3.5vw, 40px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow);
  position: relative;
}

.diag-card-head {
  text-align: center;
  margin-bottom: 30px;
}

.diag-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid var(--signal-line);
  padding: 3px 9px;
  border-radius: 2px;
  margin-bottom: 10px;
}

.diag-cap {
  font-family: var(--f-display);
  font-size: clamp(1.22rem, 2.4vw, 1.58rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* Diagram 1: Where Corda sits */
.diag-sits {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diag-tier {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 18px 20px;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .2s;
}

.diag-tier:hover {
  border-color: var(--rule-2);
}

.diag-tier-title {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-lbl);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.diag-tier-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
}

.diag-tier-chips span:not(.diag-sep) {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  white-space: nowrap;
}

.diag-sep {
  color: var(--rule-2);
  font-weight: 700;
  user-select: none;
  display: none;
}

.diag-conn {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 42px;
  color: var(--signal);
}

.diag-stem {
  width: 1.5px;
  flex: 1;
  background: var(--signal);
  opacity: .55;
}

.diag-arrow-svg {
  color: var(--signal);
  margin-top: -1px;
}

.diag-hub {
  width: 100%;
  max-width: 520px;
  background: var(--signal-soft);
  border: 2px solid var(--signal);
  border-radius: 4px;
  padding: 20px 24px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 4px 20px -8px var(--signal-soft);
}

.diag-hub-tag {
  display: block;
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--signal);
}

.diag-hub-role {
  display: block;
  margin-top: 4px;
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 500;
}

.diag-note {
  margin: 26px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-3);
}

/* Diagram 2: How Corda works */
.diag-works {
  --col-gap: 16px;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.diag-subcap {
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 6px 0 0;
  font-weight: 400;
}

.diag-w-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.diag-w-box:hover {
  border-color: var(--rule-2);
}

.diag-w-top {
  padding: 16px 20px;
}

.diag-w-title {
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

.diag-w-meta {
  margin-top: 6px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
}

.diag-w-dot {
  color: var(--signal);
  font-weight: 700;
  user-select: none;
  font-size: 1.1em;
  line-height: 1;
}

.diag-w-row {
  display: grid;
  gap: var(--col-gap);
  width: 100%;
}

.diag-w-cols-2 {
  grid-template-columns: 1fr 1fr;
}

.diag-w-cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.diag-w-card {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 70px;
}

.diag-w-card .diag-w-title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
}

.diag-w-desc {
  margin-top: 4px;
  font-size: var(--t-2xs);
  color: var(--ink-3);
  line-height: 1.35;
}

.diag-w-engine {
  background: var(--signal-soft);
  border: 1.5px solid var(--signal);
  border-radius: 4px;
  padding: 22px 24px;
  box-shadow: 0 4px 20px -8px var(--signal-soft);
}

.diag-w-engine-title {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--signal);
}

.diag-w-engine-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diag-w-engine-list li {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}

.diag-w-decision {
  padding: 14px 20px;
}

.diag-w-decision-title {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 700;
  color: var(--signal);
  letter-spacing: -.01em;
}

.diag-w-report {
  background: var(--signal-soft);
  border: 1.5px solid var(--signal);
  border-radius: 4px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px -8px var(--signal-soft);
}

.diag-w-report-title {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--signal);
}

.diag-w-report-meta {
  margin-top: 6px;
  font-size: var(--t-xs);
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 6px;
  font-weight: 500;
}

/* Connectors */
.diag-w-conn {
  position: relative;
  height: 32px;
  color: var(--signal);
  width: 100%;
}

.diag-w-stem-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 16px;
  background: currentColor;
  opacity: .8;
}

.diag-w-bar {
  position: absolute;
  top: 16px;
  height: 1.5px;
  background: currentColor;
  opacity: .8;
}

.diag-w-conn-1to2 .diag-w-bar,
.diag-w-conn-2to1 .diag-w-bar {
  left: calc(25% - var(--col-gap) / 4);
  right: calc(25% - var(--col-gap) / 4);
}

.diag-w-conn-1to3 .diag-w-bar,
.diag-w-conn-3to1 .diag-w-bar {
  left: calc(100% / 6 - var(--col-gap) / 3);
  right: calc(100% / 6 - var(--col-gap) / 3);
}

.diag-w-drop {
  position: absolute;
  top: 16px;
  height: 16px;
  width: 1.5px;
  background: currentColor;
  opacity: .8;
}

.diag-w-drop-l {
  left: calc(25% - var(--col-gap) / 4);
  transform: translateX(-50%);
}

.diag-w-drop-r {
  right: calc(25% - var(--col-gap) / 4);
  transform: translateX(50%);
}

.diag-w-conn-1to3 .diag-w-drop-l {
  left: calc(100% / 6 - var(--col-gap) / 3);
  transform: translateX(-50%);
}

.diag-w-conn-1to3 .diag-w-drop-r {
  right: calc(100% / 6 - var(--col-gap) / 3);
  transform: translateX(50%);
}

.diag-w-drop-c {
  left: 50%;
  transform: translateX(-50%);
}

.diag-w-stem-up {
  position: absolute;
  top: 0;
  height: 16px;
  width: 1.5px;
  background: currentColor;
  opacity: .8;
}

.diag-w-conn-2to1 .diag-w-stem-l {
  left: calc(25% - var(--col-gap) / 4);
  transform: translateX(-50%);
}

.diag-w-conn-2to1 .diag-w-stem-r {
  right: calc(25% - var(--col-gap) / 4);
  transform: translateX(50%);
}

.diag-w-conn-3to1 .diag-w-stem-l {
  left: calc(100% / 6 - var(--col-gap) / 3);
  transform: translateX(-50%);
}

.diag-w-conn-3to1 .diag-w-stem-r {
  right: calc(100% / 6 - var(--col-gap) / 3);
  transform: translateX(50%);
}

.diag-w-conn-3to1 .diag-w-stem-c {
  left: 50%;
  transform: translateX(-50%);
}

.diag-w-conn-1to1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  position: relative;
}

.diag-w-stem-down {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  background: currentColor;
  opacity: .8;
}

.diag-w-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -2px);
  color: var(--signal);
}

.diag-w-conn-1to1 .diag-w-arrow {
  position: absolute;
  bottom: 0;
  top: auto;
  left: 50%;
  transform: translate(-50%, 2px);
}

@media (max-width: 640px) {
  .diag-works {
    --col-gap: 10px;
  }
  .diag-w-top {
    padding: 14px 14px;
  }
  .diag-w-card {
    padding: 10px 8px;
    min-height: 60px;
  }
  .diag-w-card .diag-w-title {
    font-size: var(--t-xs);
  }
  .diag-w-desc {
    font-size: var(--t-lbl-sm);
  }
  .diag-w-engine {
    padding: 16px 16px;
  }
  .diag-w-engine-list li {
    font-size: var(--t-xs);
  }
  .diag-w-report {
    padding: 14px 14px;
  }
}

@media (max-width: 480px) {
  .diag-works {
    --col-gap: 8px;
  }
  .diag-w-card {
    padding: 8px 4px;
  }
  .diag-w-card .diag-w-title {
    font-size: .75rem;
  }
  .diag-w-desc {
    font-size: .65rem;
    line-height: 1.25;
  }
  .diag-w-meta,
  .diag-w-report-meta {
    font-size: .75rem;
    gap: 2px 4px;
  }
}

/* ---- design partner honesty ------------------------------------------
   The qualification list exists to exclude people. A line admitting that
   is worth more to a founder led sale than another benefit bullet. */
.dp-honest {
  margin: 14px 0 0; font-size: .86rem; line-height: 1.55; color: var(--ink-3);
  max-width: 52ch;
}
.dp-check-plain li::before { content: none; }
.dp-check-plain {
  list-style: none; margin: 10px 0 0; padding: 0;
}
.dp-check-plain li {
  padding: 7px 0 7px 0; font-size: .88rem; color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
/* the reciprocal list needs air after the callout above it */
.dp-need + .dp-rail { margin-top: 34px; }