/* ===== agency ===== */
/* ---- Levels of agency ---- */
.lv-hero {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.25rem, 5vw, 4rem);
  align-items: center;
}
.lv-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.lv-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 26rem;
}
.lv-hero__lead {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 1vw, 1.375rem);
  line-height: 1.35; letter-spacing: -0.02em;
  max-width: 30rem; text-wrap: pretty;
}
.lv-hero__art {
  width: 100%; max-width: 28rem; height: auto;
  display: block; justify-self: center;
}

/* One section step for the page, and the 2px ink rule every major section
   opens on. The rule sits on the inner column so it starts and ends on the
   text, not on the wrap's padding. The closing block carries the space beneath. */
.lv-body { padding-top: clamp(4rem, 8vw, 6rem); }
.lv-rule-top {
  padding-top: clamp(2rem, 4vw, 3rem);
}
.lv-scenario {
  background: var(--muted); border-radius: var(--radius);
  padding: 0.875rem 1rem; margin-bottom: 1.25rem;
}
.lv-scenario__label {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-primary); margin-bottom: 0.4375rem;
}
.lv-scenario__text {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.6; text-wrap: pretty;
}

/* The detail column sits on the page ground and opens on the brand rule, the
   same list-and-detail treatment the other worked examples use. */
.lv-panels { border-top: 2px solid var(--brand-primary); padding-top: 1.25rem; }
.lv-panel { display: flex; flex-direction: column; gap: 1.5rem; }
.lv-panel__head { display: grid; gap: 0.375rem; }

.lv-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0; font-weight: 600; line-height: 1; }
.lv-title__name {
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 1.75rem);
  line-height: 1.1; letter-spacing: -0.025em;
}
.lv-badge {
  background: color-mix(in oklab, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lv-def { font-size: 1rem; margin: 0; max-width: 46ch; color: var(--quiet); }

/* Avatar and name share row one; the bubble hangs under the name on wide
   screens and goes full-bleed once the indent starts eating the measure. */
.lv-msg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 0.875rem;
  align-items: center;
}
.lv-msg__avatar { grid-column: 1; grid-row: 1; }
.lv-msg__who { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 0.875rem; }
.lv-bubble {
  grid-column: 2; grid-row: 2;
  background: var(--muted); border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
  font-size: 1.0625rem; line-height: 1.65;
  white-space: pre-line; text-wrap: pretty;
  max-width: 62ch;
}

.lv-rule { margin: 2rem 0 1.5rem; }
.lv-rule--tight { margin: 2.25rem 0 1.25rem; }

.lv-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
}
.lv-label {
  line-height: 1.45;
  display: flex; align-items: center; gap: 0.4375rem;
  margin-bottom: 0.5rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  /* Plain --muted-foreground is only 4.3:1 on --muted, which 11px tracked-out
     mono cannot afford; a fifth of the way to ink puts it near 6:1. */
  color: var(--quiet);
}
/* Blue is the emphasis, not the default: only the sweet spot earns it. */
.lv-label--brand { color: var(--brand-primary); }
.lv-mark { width: 1.25rem; height: 1.25rem; flex: none; display: block; }
.lv-field__text {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.65;
  text-wrap: pretty; max-width: 46ch;
}

.lv-sweet {
  margin-top: 1.75rem;
  background: color-mix(in oklab, var(--brand-primary) 6%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-primary) 20%, transparent);
  border-radius: var(--radius);
  padding: 1.0625rem 1.25rem;
}
.lv-sweet__text {
  margin: 0;
  font-size: 1rem; line-height: 1.6;
  text-wrap: pretty; max-width: 62ch;
}

.lv-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lv-nav__btn { height: 2.25rem; gap: 0.5rem; }
.lv-nav__arrow { font-size: 0.9em; line-height: 1; }

/* Heading and its supporting line on one baseline, stacking when narrow. */
.lv-pair { display: flex; flex-wrap: wrap; gap: 0.875rem 3.5rem; align-items: baseline; }
.lv-h2 {
  margin: 0; flex: 1 1 16rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance;
}
.lv-pair__p {
  margin: 0; flex: 1 1 24rem;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 38rem; text-wrap: pretty;
}
/* Same muted box as the scenario and the bubble; mono marks it as copyable. */
.lv-steal {
  margin-top: 1.75rem;
  background: var(--muted); border-radius: var(--radius);
  padding: 1.25rem 1.375rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.9;
  white-space: pre-line; text-wrap: pretty;
  max-width: 52rem;
}

.lv-close { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.lv-close__text {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 42rem; text-wrap: pretty;
}

@media (max-width: 34rem) {
  .lv-bubble {
    grid-column: 1 / -1;
    padding: 1rem 1.0625rem;
    font-size: 1rem;
  }
  .lv-fields { gap: 1.75rem; }
  /* Comfortable tap targets for the only two controls inside the panel. */
  .lv-nav__btn { min-height: 2.75rem; padding-inline: 0.875rem; }
  .lv-steal { padding: 1rem 1.0625rem; line-height: 1.8; }
}

/* ===== bluf ===== */
/* Supporting text on this page runs 10–15px almost everywhere. The shared
   --muted-foreground (#737373) is only 4.6:1 on --background, which is thin at
   those sizes, so the page carries a darker grey of its own (6.5:1). */
.bluf { --bluf-quiet: var(--quiet); }

/* One vertical step for the whole site: every top-level section wrap. */
.bluf-sec { padding-top: clamp(4rem, 8vw, 6rem); }
.bluf-sec--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.bluf-sec--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }

/* ---- Hero ---- */
.bluf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .bluf-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.bluf-kicker {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.bluf-h1 {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.bluf-lead {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1875rem, 2.4vw, 1.375rem);
  line-height: 1.35; letter-spacing: -0.02em;
  max-width: 30rem; text-wrap: pretty;
}
.bluf-sub {
  margin: 0; font-size: 1.0625rem; line-height: 1.6;
  color: var(--bluf-quiet); max-width: 32rem; text-wrap: pretty;
}

/* The source PNG is 928x1152 with the drawing at x 125-804, y 154-997 and a
   stray scan line down its left edge. The frame crops to the ink, so the
   illustration fills its box and the artifact never renders. The wrapper's
   aspect-ratio reserves the space, so nothing shifts when the image lands. */
.bluf-fig {
  position: relative; overflow: hidden;
  width: 100%; max-width: 28rem;
  aspect-ratio: 679 / 843;
  justify-self: center;
}
.bluf-fig img {
  position: absolute; display: block; max-width: none;
  left: -18.4%; top: -18.3%; width: 136.7%; height: 136.7%;
}

/* ---- Worked out / sent in this order ---- */
.bluf-order { padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem clamp(2rem, 5vw, 4rem);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.875rem;
}
.bluf-order__label { line-height: 1.45;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bluf-quiet); margin-bottom: 0.5rem;
}
.bluf-order__seq { color: var(--bluf-quiet); }
.bluf-order__seq span { color: var(--foreground); }
.bluf-order__seq strong { font-weight: 600; color: var(--brand-primary); }

/* ---- Section openers ---- */
.bluf-block {
  padding-top: clamp(2rem, 4vw, 3rem);
}
.bluf-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 18ch; text-wrap: balance;
}
.bluf-h2__sub {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--bluf-quiet); max-width: 34rem; text-wrap: pretty;
}

.bluf-case { margin-top: clamp(1.5rem, 3vw, 2rem); }
.bluf-case__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.bluf-case__name {
  margin: 0; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.025em;
}
.bluf-case__when {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; color: var(--brand-primary);
}
.bluf-case__scenario {
  flex: 1 1 20rem; max-width: 34rem;
  font-size: 0.9375rem; line-height: 1.55;
  color: var(--bluf-quiet); text-wrap: pretty;
}
/* Also carries the template and its checks, which are the same two-up shape. */
.bluf-case__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 2.5rem);
}

.bluf-col__label { line-height: 1.45;
  display: block; margin-bottom: 0.875rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bluf-quiet);
}
.bluf-col__label--good { color: var(--brand-primary); }

.bluf-msg { border-top: 1px solid var(--border); padding-top: 1rem; }
.bluf-msg--good { border-top: 2px solid var(--brand-primary); }
.bluf-msg__subject {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; color: var(--bluf-quiet); margin-bottom: 1rem;
}
.bluf-msg__subject--good { color: var(--foreground); }
/* The mail client's own label, so the keyword beside it reads as typed text. */
.bluf-msg__field { color: var(--bluf-quiet); }
/* Single column below ~50rem makes this block as wide as the page; cap the
   measure so the long example never runs past ~72ch. */
.bluf-msg__body {
  font-size: 0.9375rem; line-height: 1.75; white-space: pre-line;
  color: var(--bluf-quiet); max-width: 36rem; text-wrap: pretty;
}
.bluf-msg__point {
  margin: 0 0 1.375rem; max-width: 30rem;
  font-size: 1.375rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty;
}
.bluf-bullets {
  display: flex; flex-direction: column; gap: 0.875rem; max-width: 36rem;
}
.bluf-bullet {
  display: flex; flex-wrap: wrap; gap: 0.125rem 0.875rem; align-items: baseline;
}
.bluf-bullet__tag { line-height: 1.45;
  flex: 0 0 7rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bluf-quiet);
}
.bluf-bullet__text {
  flex: 1 1 12rem; font-size: 0.9375rem; line-height: 1.6;
  color: var(--bluf-quiet); text-wrap: pretty;
}

/* Under ~34rem the tag column leaves the text a ~30ch gutter, so the tag
   takes its own line instead. */
@media (max-width: 34rem) {
  .bluf-bullets { gap: 1.25rem; }
  .bluf-bullet { gap: 0.25rem; }
  .bluf-bullet__tag { flex: 0 0 100%; }
}

/* ---- The blank you fill in ---- */
/* The template is the good message with its facts removed, so it reuses the
   message styles wholesale. The slots are the only new thing: mono so they read
   as fields rather than prose, brand colour so the eye finds them first. */
.bluf-slot {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.88em; color: var(--brand-primary);
}
.bluf-msg__point .bluf-slot { font-weight: 500; }
/* The checks column has no message block above it, so it needs its own top rule
   to sit level with the template it faces. */
.bluf-checks { border-top: 1px solid var(--border); padding-top: 1rem; }

.bluf-verdict {
  margin: 1.25rem 0 0; max-width: 36rem;
  font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty;
}
.bluf-lede {
  line-height: 1.45;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bluf-quiet);
}
.bluf-lede--good { color: var(--brand-primary); }
/* The rule runs the full width of the panel it closes; only the prose is
   capped to a readable measure. */
.bluf-changed {
  margin-top: clamp(2rem, 4vw, 2.25rem);
  padding-top: 1.25rem; border-top: 1px solid var(--border);
}
.bluf-changed p {
  margin: 0; font-size: 1.0625rem; line-height: 1.6;
  max-width: 38rem; text-wrap: pretty;
}

/* ---- When not to lead with it ---- */
.bluf-caveat { padding-top: 2rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.75rem 4rem;
}
.bluf-caveat__head {
  display: flex; align-items: baseline; gap: 0.5rem; flex: 0 0 13rem;
}
.bluf-caveat__head img { height: 1.375rem; width: auto; display: block; flex: none; }
.bluf-caveat__h {
  margin: 0; font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bluf-quiet);
}
.bluf-caveat__p {
  margin: 0; flex: 1 1 22rem; max-width: 34rem;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- Closer ---- */
.bluf-closer {
  margin: 0; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 20ch; text-wrap: balance;
}

/* ===== doors ===== */
.doors-section { padding-top: clamp(4rem, 8vw, 6rem); }
.doors-section--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.doors-section--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }

.doors-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.doors-label {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.doors-label--brand { color: var(--brand-primary); }

/* ---- Hero ---- */
.doors-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.doors-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.doors-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.doors-hero__lead {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
.doors-hero__art {
  width: 100%; max-width: 28rem;
  height: auto; max-height: 26rem;
  object-fit: contain;
  display: block; justify-self: center;
}

/* ---- Section headings ---- */
.doors-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}
.doors-h2--tool {
  font-weight: 600; font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.12; letter-spacing: -0.03em;
}
.doors-standfirst {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}

/* ---- The two decisions ---- */
.doors-tabs {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
/* .chip is sized to its text; 34px is under the 44px touch minimum. */
.doors-tab { min-height: 2.75rem; padding-inline: 1rem; }

.doors-panel { display: block; max-width: 44rem; }
.doors-panel[hidden] { display: none; }
.doors-panel:not([hidden]) { animation: doors-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes doors-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .doors-panel:not([hidden]) { animation: none; }
}
.doors-panel__q {
  margin: 0.625rem 0 1.5rem;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.02em; text-wrap: pretty;
  overflow-wrap: anywhere;
}
.doors-rows { margin: 0; border-top: 1px solid var(--border); }
.doors-rows__row {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline;
  padding-block: 1rem; border-bottom: 1px solid var(--border);
}
.doors-rows__row dt { flex: 0 0 8.5rem; }
.doors-rows__row dd {
  margin: 0; flex: 1 1 18rem;
  font-size: 1rem; line-height: 1.6; text-wrap: pretty;
}
.doors-panel__call {
  margin: 1.5rem 0 0;
  background: var(--muted); border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 1rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- The two failure modes ---- */
.doors-fail {
  border-top: 1px solid var(--border);
  margin-top: 2rem; padding-top: 2rem;
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 2.5rem; align-items: baseline;
}
.doors-fail__name {
  margin: 0; flex: 1 1 14rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.doors-fail__text {
  margin: 0; flex: 2 1 24rem; max-width: 34rem;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- The test ---- */
.doors-test {
  margin: 0;
  background: var(--muted); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 44rem;
}
.doors-test__row { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; align-items: baseline; }
.doors-test__row dt {
  flex: 0 0 13rem;
  font-weight: 600; font-size: 1rem; line-height: 1.5;
}
.doors-test__row dd {
  margin: 0; flex: 1 1 16rem;
  font-size: 0.9375rem; line-height: 1.6; color: var(--quiet); text-wrap: pretty;
}
.doors-note {
  margin: clamp(2rem, 4vw, 2.5rem) 0 0;
  border-top: 1px solid var(--border); padding-top: 1.5rem;
  max-width: 40rem;
}
.doors-note__p {
  margin: 0.625rem 0 0;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- Closing line ---- */
.doors-close {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 38rem; text-wrap: balance;
}

/* ===== hub ===== */
/* --muted-foreground (#737373) clears 4.5:1 on this near-white by 0.13, which is
   too fine a margin for the quiet type this page leans on. One darker quiet ink
   (~6.9:1) carries every secondary voice: labels, subheads and card footnotes. */
.hub-hero, .hub-section, .hub-outro { --hub-quiet: var(--quiet); }

/* ---- Rhythm: one section step, one hero step, one closing block ---- */
.hub-hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.hub-section { padding-top: clamp(4rem, 8vw, 6rem); }
.hub-outro { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }

.hub-rule {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* ---- Type ---- */
.hub-eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}
.hub-label {
  line-height: 1.45;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hub-quiet);
}
.hub-h1 {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 0.94;
  letter-spacing: -0.04em; max-width: 30rem; text-wrap: balance;
}
.hub-lede {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.375rem);
  line-height: 1.35; letter-spacing: -0.02em;
  max-width: 30rem; text-wrap: pretty;
}
.hub-sub {
  margin: 0;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--hub-quiet); max-width: 32rem; text-wrap: pretty;
}
.hub-h2 {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.12;
  letter-spacing: -0.03em; text-wrap: balance;
}
.hub-h2--lead {
  margin: 0 0 0.75rem;
  font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
}
.hub-note {
  margin: 0;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--hub-quiet); max-width: 32rem; text-wrap: pretty;
}

/* ---- Hero ---- */
.hub-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hub-hero__art {
  width: 100%; max-width: 28rem; height: auto;
  display: block; justify-self: center;
}

/* ---- Framework cards ---- */
/* The heading now runs straight into the first group label, so the label carries
   the step the section lede used to open. */
.hub-group { margin: clamp(2rem, 5vw, 2.75rem) 0 1.25rem; }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 3rem);
}
.hub-grid:last-child { margin-bottom: 0; }
/* Four per section: one intact row each on desktop, two by two on tablets.
   Auto-fit would cap rows at three and strand the fourth card alone. */
@media (min-width: 52rem) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 71rem) {
  .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hub-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.375rem, 4vw, 1.75rem);
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.hub-card:hover {
  color: inherit;
  border-color: var(--brand-primary);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.06);
}
.hub-card:focus-visible { border-color: var(--brand-primary); }
/* A fixed 96x40 slot rather than width:auto — the width/height attributes
   describe an aspect none of these PNGs actually has, so an auto width snapped
   from 96px to the real one on load. Contained and left-aligned, every card's
   mark now shares one left edge and one optical centre. */
.hub-card__art {
  width: 3.5rem; height: 3.5rem; flex: none;
  object-fit: contain; object-position: left bottom;
  display: block; margin-bottom: 1rem;
}
/* Below two columns the cards stack twelve deep; side-by-side art halves their height. */
@media (max-width: 51.99rem) {
  .hub-grid { gap: 0.75rem; }
  .hub-card {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem;
    align-items: start; padding: 1.125rem 1.25rem;
  }
  .hub-card__art { grid-row: span 2; width: 3rem; height: 3rem; margin: 0; object-position: center; }
}
.hub-card__rag { display: flex; gap: 0.375rem; align-items: center; }
.hub-card__rag span {
  display: block; width: 0.75rem; height: 0.75rem; border-radius: 50%;
}
.hub-card__rag span:nth-child(1) { background: var(--destructive); }
.hub-card__rag span:nth-child(2) { background: oklch(0.76 0.155 72); }
.hub-card__rag span:nth-child(3) { background: oklch(0.66 0.145 152); }
.hub-card__name {
  margin: 0 0 0.625rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 1.375rem; line-height: 1.1; letter-spacing: -0.025em;
}
/* The card carries one line: the situation you are in. That makes it the card's
   body rather than a footnote, so it takes the body size and sits under the
   name. Bottom-aligning it left a ragged band of white under the shorter names
   across a stretched row. */
.hub-card__when {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.55;
  color: var(--hub-quiet); text-wrap: pretty;
}

/* ---- The chain: one incident, two tools, in order ---- */

/* ---- Closing line ---- */
.hub-outro p {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.15;
  letter-spacing: -0.035em; max-width: 36rem; text-wrap: pretty;
}

/* ===== mece ===== */
/* Repeated mono label: section kickers, column headings, caption keys. */
.mece-label {
  margin: 0 0 0.875rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.mece-label--brand { color: var(--brand-primary); }
/* An equation, not a label: less tracking and no caps, so it holds one line at 390px. */
.mece-label--eq {
  letter-spacing: 0.02em; text-transform: none;
  font-size: 0.75rem; color: var(--foreground);
}

/* Section rhythm: every band below the hero opens at the same distance. */
.mece-band { padding-top: clamp(4rem, 8vw, 6rem); }
.mece-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.mece-hero {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.mece-hero__kicker { margin-bottom: clamp(1.25rem, 3vw, 2rem); font-size: 0.75rem; letter-spacing: 0.16em; }
.mece-hero h1 {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  text-wrap: balance;
}
/* The hero carries one paragraph now, so it takes the bottom margin off and
   the block stays optically centred against the square. */
.mece-hero__lede {
  margin: 0;
  font-size: clamp(1.1875rem, 2.2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
.mece-hero__art {
  width: 100%; max-width: 28rem; height: auto;
  display: block; justify-self: center;
}

/* The two letters, side by side, so the pair reads as one comparison rather
   than two sections the reader scrolls between. */
.mece-tests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 2.75rem clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.mece-tests h2 {
  margin: 0 0 0.625rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.1; letter-spacing: -0.03em;
}
.mece-tests p {
  margin: 0; font-size: 1rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}

.mece-figure { margin: 1.5rem 0 0; }
.mece-figure img { width: 100%; max-width: 100%; height: auto; display: block; }
/* Two equal keys under the artwork, so each one sits over the half it names
   and they never wrap onto separate lines on a phone. */
.mece-figure figcaption {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem; max-width: 100%; margin-top: 0.625rem;
}
.mece-figure figcaption .mece-label {
  margin: 0; justify-self: center; text-align: center;
}

.mece-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 30rem; text-wrap: pretty;
}
.mece-intro {
  margin: 0 0 2.25rem; font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}

.mece-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
/* Comfortable thumb target; .chip alone lands just under it. */
.mece-tabs .chip { display: inline-flex; align-items: center; min-height: 2.75rem; }

.mece-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 3.5rem; align-items: start;
}
/* The class sets display, so the hidden panel needs to win it back explicitly. */
.mece-panel[hidden] { display: none; }

.mece-list { display: flex; flex-direction: column; gap: 0.375rem; }

/* .pick pads the box, but only the summary toggles it, so the padding has to
   live on the summary or the top and bottom of every row is dead to touch. */
.mece-pick { padding: 0; }
/* A flat row carries no disclosure, so the padding the summary would have
   supplied has to live on the row itself. */
.mece-pick--flat, .mece-pick > summary {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 2.75rem; padding: 0.75rem 0.875rem;
  cursor: pointer; list-style: none;
}
.mece-pick > summary::-webkit-details-marker { display: none; }
/* Nothing opens, so it must not offer to. */
.mece-pick--flat { cursor: default; }
.mece-pick--flat:hover { border-color: var(--border); }
.mece-pick__n {
  flex: 0 0 1.375rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; color: var(--quiet);
}
.mece-pick__t { flex: 1 1 auto; min-width: 0; }
/* It names the defect, so it stays near-ink rather than dropping to muted grey. */
.mece-pick__flag {
  flex: 0 0 auto;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--foreground); opacity: 0.72;
}
/* Same slot, but a quantity rather than a verdict, so it drops the caps. */
.mece-pick__flag--amt {
  letter-spacing: 0.02em; text-transform: none;
  font-size: 0.75rem; white-space: nowrap;
}
/* Drawn, not typed: a glyph here would end up in the accessible name. */
.mece-pick > summary::after {
  content: ''; flex: none; align-self: center;
  width: 0.4375rem; height: 0.4375rem; margin-left: 0.125rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.125rem) rotate(45deg);
  opacity: 0.35;
  transition: transform 180ms ease, opacity 180ms ease;
}
.mece-pick[open] > summary::after {
  transform: translateY(0.0625rem) rotate(225deg);
  opacity: 0.7;
}
.mece-pick[open] {
  border-color: transparent;
  background: color-mix(in oklab, var(--brand-primary) 9%, transparent);
}
.mece-pick[open] .mece-pick__n { color: inherit; opacity: 0.7; }
.mece-pick__why {
  margin: 0; padding: 0 0.875rem 0.75rem 3rem;
  font-size: 0.875rem; font-weight: 400; line-height: 1.6;
  opacity: 0.85; text-wrap: pretty;
}
.mece-pick--branch { font-weight: 600; }
/* The ring belongs to the whole row, not to the text inside it. */
.mece-pick > summary:focus-visible { outline: none; }
.mece-pick:has(> summary:focus-visible) {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.mece-checks {
  border-top: 2px solid var(--brand-primary); padding-top: 1.25rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.mece-check__head {
  display: flex; align-items: baseline; gap: 0.625rem;
  margin-bottom: 0.375rem;
}
.mece-check__name {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.125rem;
  line-height: 1.2; letter-spacing: -0.02em;
}
.mece-check__count {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem;
}
.mece-check__note {
  margin: 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}
.mece-source { padding-top: 1.25rem; }
.mece-source .mece-label { margin-bottom: 0.75rem; }
.mece-source__note {
  margin: 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}

/* The arithmetic the cut came from, set as a ledger so the two lines line up
   on the divisor and the reader can check the sum without reading a sentence. */
.mece-sum .mece-label--eq { margin-bottom: 0.75rem; }
.mece-sum__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  padding: 0.5rem 0; border-top: 1px solid var(--border);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem;
}
.mece-sum__k { flex: 0 0 4rem; color: var(--quiet); }
.mece-sum__expr { flex: 1 1 auto; }
.mece-sum__out { flex: 0 0 auto; font-weight: 600; color: var(--brand-primary); }
.mece-sum__note {
  margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}

.mece-fallback {
  margin: 2rem 0 0; font-size: 1.0625rem; line-height: 1.6;
  max-width: 38rem; text-wrap: pretty;
}

.mece-close { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.mece-close p {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 34rem; text-wrap: balance;
}

/* ===== monkeys ===== */
.mk {
  /* The 11px mono labels need more contrast than --muted-foreground gives
     them on the near-white background; a fifth of the way to ink puts them
     near 6:1. Expressed exactly as trees does it so both pages land on the
     same grey. */
  --mk-label: var(--quiet);
}

/* One vertical rhythm for every band, tightened on small screens. */
.mk-band { padding-top: clamp(4rem, 8vw, 6rem); }
.mk-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.mk-mono {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mk-label);
}
.mk-mono--brand { color: var(--brand-primary); }

.mk-h2 {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.mk-h2--lead {
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; margin-bottom: 0.75rem;
}
.mk-body {
  margin: 0;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet);
  max-width: 34rem; text-wrap: pretty;
}
.mk-body--intro { margin-bottom: 2rem; }

/* ---- Hero ---- */
.mk-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
}
.mk-hero__eyebrow {
  font-size: 0.75rem; letter-spacing: 0.16em;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.mk-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em; text-wrap: balance;
}
.mk-hero__lede {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1875rem, 2.4vw, 1.375rem);
  line-height: 1.35; letter-spacing: -0.02em;
  max-width: 42ch; text-wrap: pretty;
}

/* The hero art box, shared with every other page. */
.mk-hero__art {
  width: 100%; max-width: 28rem; height: auto;
  display: block; justify-self: center;
}
/* The test, run on the headline sentence, in the same muted box the rewrite
   formula uses further down: one demonstration instead of one illustration. */
.mk-rule--hair { padding-top: 2rem; }
.mk-demo {
  background: var(--muted);
  border-radius: var(--radius);
  padding: clamp(1.375rem, 3vw, 1.875rem);
  max-width: 44rem;
}
.mk-demo__label { display: block; margin-bottom: 1rem; }
.mk-demo__row + .mk-demo__row {
  margin-top: 1.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.mk-demo__line {
  margin: 0 0 0.5rem;
  font-size: clamp(1.125rem, 2.2vw, 1.25rem);
  line-height: 1.4; letter-spacing: -0.02em; text-wrap: pretty;
}

/* ---- The rewrite formula ---- */
.mk-formula {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  max-width: 36rem;
  margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
.mk-formula__line {
  margin: 0.4375rem 0 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.9375rem; line-height: 1.7; text-wrap: pretty;
}
.mk-formula__line b { font-weight: 600; color: var(--brand-primary); }
.mk-formula__eg {
  margin: 0.5rem 0 0;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}

/* ---- Run the test ---- */
.mk-test { display: grid; gap: 2.5rem; align-items: start; }
.mk-test__list { display: flex; flex-direction: column; gap: 0.375rem; }
.mk-test__label { display: block; line-height: 1; margin-bottom: 0.875rem; }
.mk-test__panels { border-top: 2px solid var(--brand-primary); padding-top: 1.25rem; }

.mk-pick { font-size: 1rem; padding-block: 0.6875rem; }
.mk-pick__where { display: block; margin-bottom: 0.1875rem; }
.mk-pick__line { display: block; }

.mk-panel__line {
  margin: 0 0 0.5rem;
  font-size: clamp(1.125rem, 2.2vw, 1.25rem);
  line-height: 1.4; letter-spacing: -0.02em; text-wrap: pretty;
}
.mk-panel__suffix { color: var(--brand-primary); font-weight: 600; white-space: nowrap; }
.mk-panel__verdict { margin-bottom: 1.5rem; }
.mk-panel__label { margin: 0 0 0.375rem; }
.mk-panel__text, .mk-panel__note { margin: 0; font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.mk-panel__note { color: var(--quiet); }
.mk-panel__fixed {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem; font-weight: 600;
  line-height: 1.5; letter-spacing: -0.015em; text-wrap: pretty;
}
.mk-panel__block + .mk-panel__block {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
/* The empty slots read as the same three words the section above named, so the
   badge row carries the diagnosis and the sentence under it only adds the cost. */
.mk-slots { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.625rem; }

@media (min-width: 54rem) {
  .mk-test { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; }
  /* Drop the list by the height of the detail label so the first row and the
     blue rule start on the same line. */
  .mk-test__list { padding-top: 1.5625rem; }
  /* Panels differ in length; reserving the tallest keeps the page from
     jumping under the pointer when you switch sentences. The tallest shrinks
     as the column widens, so the reserve steps down with it. */
  .mk-test__panels { min-height: 24rem; }
}
@media (min-width: 66rem) { .mk-test__panels { min-height: 21rem; } }
@media (min-width: 75rem) { .mk-test__panels { min-height: 19.5rem; } }

@media (prefers-reduced-motion: no-preference) {
  .mk-test__panels > [role="tabpanel"]:not([hidden]) {
    animation: mk-panel-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes mk-panel-in {
  from { opacity: 0; transform: translateY(0.375rem); }
  to { opacity: 1; transform: none; }
}

/* ---- The three slots ---- */
.mk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(2rem, 3vw, 2.5rem);
}
.mk-card__head { display: flex; align-items: center; gap: 0.4375rem; margin-bottom: 0.625rem; }
.mk-card__head img { height: 1.375rem; width: auto; display: block; flex: none; }
.mk-card__title {
  margin: 0 0 0.5rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance;
}
.mk-card__quote {
  margin: 0 0 0.25rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.55; color: var(--quiet);
}
/* The repair sits in the same mono column as the quote it answers, one shade
   darker, so the pair reads as one before/after and not as two remarks. */
.mk-card__fix {
  margin: 0 0 0.625rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.55;
}
.mk-card__fix span { color: var(--brand-primary); }
/* The What repair runs to two lines; reserving them once the cards sit side by
   side keeps all three bodies on one baseline. */
@media (min-width: 54rem) { .mk-card__fix { min-height: 2.52rem; } }
.mk-card__body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--quiet); text-wrap: pretty; }

/* ---- Closing note ---- */
.mk-aside {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.75rem 4rem; padding-top: 2rem;
}
.mk-aside__head { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 13rem; }
.mk-aside__head img { height: 1.375rem; width: auto; display: block; flex: none; }
.mk-aside__title { margin: 0; }
.mk-aside__body {
  margin: 0; flex: 1 1 22rem;
  font-size: 1.0625rem; line-height: 1.6;
  max-width: 34rem; text-wrap: pretty;
}

/* ---- Close ---- */
.mk-close { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.mk-close__line {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 30ch; text-wrap: balance;
}

/* ===== premortem ===== */
.pm-section { padding-top: clamp(4rem, 8vw, 6rem); }
.pm-section--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.pm-section--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.pm-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.pm-label {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.pm-label--brand { color: var(--brand-primary); }

/* ---- Hero ---- */
.pm-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.pm-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.pm-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.pm-hero__lead {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
.pm-hero__art {
  width: 100%; max-width: 28rem;
  height: auto; max-height: 26rem;
  object-fit: contain;
  display: block; justify-self: center;
}

/* ---- Section headings ---- */
.pm-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}
.pm-standfirst {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}
.pm-facts {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  max-width: 36rem;
}
.pm-facts__body {
  margin: 0.4375rem 0 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7; text-wrap: pretty;
}

/* ---- The two questions ---- */
.pm-tabs {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
.pm-tab {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0.5rem 1rem;
  cursor: pointer; font: inherit;
  font-family: 'Geist Variable', system-ui, sans-serif;
  font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--radius);
  border: 2px solid var(--border); background: var(--card); color: var(--foreground);
  transition: border-color 160ms ease;
}
.pm-tab:hover { border-color: color-mix(in oklab, var(--brand-primary) 45%, var(--border)); }
.pm-tab[aria-selected="true"] { border-color: var(--brand-primary); }

.pm-panel { display: block; max-width: 52rem; }
.pm-panel[hidden] { display: none; }
.pm-panel:not([hidden]) { animation: pm-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pm-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.pm-ask {
  margin: 0 0 1.5rem;
  border-top: 2px solid var(--brand-primary); padding-top: 1.25rem;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.02em; max-width: 36rem; text-wrap: pretty;
}
.pm-quiet { margin: 0; padding: 0; list-style: none; max-width: 36rem; }
.pm-quiet li {
  display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; align-items: baseline;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border);
}
.pm-quiet .pm-label { flex: 0 0 12rem; }
.pm-quiet q { flex: 1 1 14rem; font-size: 1rem; line-height: 1.6; }

.pm-notes {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(11.5rem, 100%), 1fr));
}
.pm-note {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 0.875rem 1rem 1rem;
  font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty;
}
.pm-note .pm-label { display: block; margin-bottom: 0.375rem; }

.pm-read {
  margin: 2rem 0 0; max-width: 36rem;
  border-top: 1px solid var(--border); padding-top: 1.25rem;
  font-size: 1rem; line-height: 1.6; text-wrap: pretty;
}
.pm-read .pm-label { margin-bottom: 0.5rem; }

/* ---- From notes to risks ---- */
.pm-steps { margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.pm-step { border-top: 1px solid var(--border); padding-block: 1.75rem; }
.pm-step__h {
  margin: 0 0 0.5rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.12; letter-spacing: -0.03em;
}
.pm-step__p {
  margin: 0; max-width: 36rem;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}
.pm-step__p a { color: var(--brand-primary); }
.pm-piles {
  margin: 1.25rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.pm-pile {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  border-radius: var(--radius); background: var(--muted);
  padding: 0.375rem 0.75rem;
  font-size: 0.9375rem;
}
.pm-risks { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.pm-risk {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.pm-risk__name {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4; text-wrap: pretty;
}
.pm-risk__rows { margin: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.pm-risk__row {
  display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: baseline;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7;
}
.pm-risk__row dt { flex: 0 0 4.5rem; color: var(--brand-primary); }
.pm-risk__row dd { margin: 0; flex: 1 1 14rem; text-wrap: pretty; }

/* ---- Recipe ---- */
.pm-tmpl {
  background: var(--muted);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  max-width: 44rem;
}
.pm-tmpl__head {
  margin: 0.625rem 0 1.125rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.875rem; line-height: 1.7; text-wrap: pretty;
}
.pm-tmpl__rows { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.pm-tmpl__row {
  display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; align-items: baseline;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7;
}
.pm-tmpl__row dt { flex: 0 0 6.5rem; color: var(--brand-primary); }
.pm-tmpl__row dd { margin: 0; flex: 1 1 14rem; max-width: 34rem; color: var(--quiet); text-wrap: pretty; }
@media (max-width: 30rem) {
  .pm-tmpl__row dt, .pm-risk__row dt { flex: 0 0 100%; }
}

/* ---- Closing line ---- */
.pm-close {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 38rem; text-wrap: balance;
}

/* ===== pyramid ===== */
/* --muted-foreground is #737373, which is 4.4:1 on the card and 4.39:1 on the
   page ground — just under AA for the 11-17px text this page sets in it, and
   the smallest of it is the mono labels. Darkened for this page's own scope
   only; the token itself belongs to app.css. */
.pyr-hero, .pyr-split, .pyr-sec, .pyr-close { --muted-foreground: var(--quiet); }

/* Hero */
.pyr-hero {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 4vw, 4rem);
  align-items: center;
}
.pyr-hero__kicker {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
}
.pyr-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  /* 26rem is the site's headline measure; this one needs 31 to break after
     "answer," instead of stranding "One" and "three" on lines of their own. */
  max-width: 31rem; text-wrap: balance;
}
.pyr-hero__lede {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.375rem);
  line-height: 1.35; letter-spacing: -0.02em;
  max-width: 30rem; text-wrap: pretty;
}
.pyr-hero__art {
  width: 100%; max-width: 28rem; height: auto;
  display: block; justify-self: center;
}

/* One vertical rhythm for the page: the same section step, the same 2px rule
   opening every major section, and the house closing block. */
.pyr-sec { padding-top: clamp(4rem, 8vw, 6rem); }
.pyr-rule-top { padding-top: clamp(2rem, 4vw, 3rem); }

/* Section heading, in the house pairing: Poppins title, quiet line under it. */
.pyr-h2 {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1; letter-spacing: -0.03em;
  max-width: 26rem; text-wrap: balance;
}
.pyr-h2__sub {
  margin: 0.75rem 0 0;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--muted-foreground); max-width: 36rem; text-wrap: pretty;
}

/* The scenario opens the worked example, directly above the pitch it explains. */
.pyr-scenario {
  background: var(--muted); border-radius: var(--radius);
  padding: 0.875rem 1rem; margin-bottom: 1.75rem;
  max-width: 52rem;
}
.pyr-scenario__line {
  margin: 0.4375rem 0 0; max-width: 42rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.6; text-wrap: pretty;
}

/* The dissection sits below its own heading, not against the section rule. */
.pyr-split { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* Once the split stacks, the rail has the full page width to itself and the
   pyramid stretches into a set of thin ribbons. Capping it keeps the diagram in
   roughly the proportion it has beside the panel. */
@media (max-width: 60rem) {
  .pyr-rail, .pyr-why { max-width: 32rem; }
}

.pyr-stems { display: grid; gap: 0.5rem; padding-block: 0.375rem; }
.pyr-stems--one { grid-template-columns: minmax(0, 1fr); }
.pyr-stems--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pyr-stems > .pyr__stem { justify-self: center; }
/* The stems are diagram, not decoration: they need to read on the near-white ground. */
.pyr__stem {
  background: color-mix(in oklab, var(--muted-foreground) 40%, var(--border));
  transition: background 200ms ease;
}
/* The line into the tier you are reading lights up. */
.pyr-rail:has(#pyr-tab-1[aria-selected="true"]) .pyr-stems--one > .pyr__stem,
.pyr-rail:has(#pyr-tab-3[aria-selected="true"]) .pyr-stems--three > .pyr__stem:nth-child(1),
.pyr-rail:has(#pyr-tab-4[aria-selected="true"]) .pyr-stems--three > .pyr__stem:nth-child(2),
.pyr-rail:has(#pyr-tab-5[aria-selected="true"]) .pyr-stems--three > .pyr__stem:nth-child(3) {
  background: var(--brand-primary);
}

.pyr-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.pyr__name { display: block; font-weight: 600; font-size: 0.875rem; line-height: 1.3; letter-spacing: -0.01em; }
.pyr__name--setup { font-size: 1rem; }
.pyr__name--answer {
  font-family: Poppins, sans-serif; font-size: 1.25rem;
  line-height: 1.15; letter-spacing: -0.02em;
}
/* One-line and two-line tiles sit at the same optical centre. */
.pyr__btn--reason { display: flex; flex-direction: column; justify-content: center; }
.pyr__num {
  display: block; margin-bottom: 0.25rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--muted-foreground);
}
/* Brand blue on its own 12% tint is only 4.2:1, so selecting a tile made its
   name and numeral harder to read than the unselected ones. Darkening just the
   foreground clears AA without touching the tint. Belongs beside
   .pyr__btn[aria-selected="true"] in app.css. */
.pyr__btn[aria-selected="true"]:not(.pyr__btn--answer) { color: color-mix(in oklab, var(--brand-primary) 85%, black); }
.pyr__btn[aria-selected="true"] .pyr__num { color: inherit; }
/* A blue focus ring is invisible on the filled apex, so it flips to the tile's own foreground. */
.pyr__btn--answer[aria-selected="true"]:focus-visible {
  outline-color: var(--brand-primary-foreground);
  outline-offset: -5px;
}
@media (max-width: 26rem) {
  .pyr-reasons { gap: 0.375rem; }
  .pyr__btn--reason .pyr__name { font-size: 0.8125rem; }
}

/* The key under the pyramid: which question each reason is there to answer.
   It also gives the sticky rail something to hold below the diagram. */
.pyr-why { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.pyr-why .pyr-label { margin-bottom: 0.875rem; }
.pyr-why__row {
  display: grid; grid-template-columns: 1.875rem minmax(0, 1fr);
  gap: 0.125rem 0.5rem; align-items: baseline;
  padding-bottom: 0.625rem;
}
.pyr-why__n {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em;
  color: var(--brand-primary);
}
.pyr-why__q { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }

/* Panels: the detail column sits on the page ground, opened by the same 2px
   brand rule the other worked examples use. */
.pyr-panels { border-top: 2px solid var(--brand-primary); padding-top: 1.25rem; }
.pyr-panel {
  animation: pyr-panel-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
  /* The tier links land here; 6.25rem clears the 3.75rem sticky header and the
     rule above the panel, and leaves the panel title a little air. */
  scroll-margin-top: 6.25rem;
}
/* The panel takes focus when a keyboard user follows a tier link, so the ring
   is pushed clear of the text it wraps. */
.pyr-panel:focus-visible { outline-offset: 4px; }
@keyframes pyr-panel-in {
  from { opacity: 0; transform: translateY(0.375rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pyr-panel { animation: none; }
}

.pyr-panel__body { margin-top: 1.5rem; }
.pyr-panel__title {
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap; margin: 0; line-height: 1.1;
}
.pyr-panel__name {
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
  line-height: 1.1; letter-spacing: -0.025em;
}
.pyr-panel__kind {
  background: color-mix(in oklab, var(--brand-primary) 10%, transparent);
  color: var(--brand-primary);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
/* The house mono label: also used as a heading inside the panels, hence the
   margin and weight resets. Grey is the default; brand blue is reserved for the
   hero eyebrow and the panel kind badge. */
.pyr-label {
  margin: 0; font-weight: 400;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.pyr-lead { border-left: 3px solid var(--brand-primary); padding: 0.25rem 0 0.25rem 1.125rem; }
.pyr-lead .pyr-label { margin-bottom: 0.5rem; }
.pyr-lead__text {
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.3125rem);
  line-height: 1.35; letter-spacing: -0.02em;
  white-space: pre-line; text-wrap: pretty;
}
.pyr-note {
  margin: 0.875rem 0 0; padding-left: 1.125rem;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--muted-foreground); max-width: 44rem; text-wrap: pretty;
}
/* The read-out under a script block. */
.pyr-after {
  margin: 1rem 0 0;
  font-size: 0.9375rem; line-height: 1.65;
  color: var(--muted-foreground); max-width: 44rem; text-wrap: pretty;
}

.pyr-ev { margin-top: 2rem; }
.pyr-ev .pyr-label { margin-bottom: 1rem; }
.pyr-ev__list { display: flex; flex-direction: column; gap: 0.625rem; }
.pyr-ev__row {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.125rem 1rem; align-items: baseline;
  padding-bottom: 0.625rem; border-bottom: 1px solid var(--border);
}
/* The last rule would sit a hair above the separator below it. */
.pyr-ev__row:last-child { padding-bottom: 0; border-bottom: 0; }
.pyr-ev__n {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--brand-primary); font-variant-numeric: tabular-nums;
}
.pyr-ev__v { font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 32rem) {
  .pyr-ev__row { grid-template-columns: minmax(0, 1fr); }
}

.pyr-rule { margin-block: 2rem 1.5rem; }
.pyr-rule--end { margin-block: 2rem 1.25rem; }

/* A panel carries one note, at the house measure. */
.pyr-notes .pyr-label { margin-bottom: 0.4375rem; }
.pyr-notes__v { margin: 0; font-size: 0.9375rem; line-height: 1.65; max-width: 44rem; text-wrap: pretty; }

.pyr-script {
  margin-top: 2rem; background: var(--muted);
  border-radius: var(--radius); padding: 1.125rem 1.25rem;
  max-width: 52rem;
}

/* The whole pitch in one block: the role on the left, the words on the right,
   in the order they leave your mouth. */
.pyr-say { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem 1.375rem; }
.pyr-say__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem; align-items: baseline;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.pyr-say__row:last-child { padding-bottom: 0; border-bottom: 0; }
.pyr-say__role {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-primary);
}
.pyr-say__line { margin: 0; font-size: 1rem; line-height: 1.65; max-width: 44rem; text-wrap: pretty; }
@media (max-width: 32rem) {
  .pyr-say__row { grid-template-columns: minmax(0, 1fr); }
}

/* The blanks you fill in, marked so the skeleton reads as a template. */
.pyr-slot {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125em;
  color: color-mix(in oklab, var(--brand-primary) 85%, black);
  background: color-mix(in oklab, var(--brand-primary) 9%, transparent);
  border-radius: 0.1875rem; padding: 0.1em 0.28em;
}

.pyr-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* 32px is fine for a mouse and too small for a thumb. */
.pyr-nav__btn {
  height: auto; min-height: 2.75rem; padding-inline: 0.875rem;
  text-decoration: none; text-align: left;
}
.pyr-nav__btn--prev { margin-left: -0.875rem; --pyr-nudge: -0.125rem; }
/* The arrow leans into the direction you are about to travel. The global
   reduced-motion rule flattens the transition to an instant state change. */
.pyr-nav__arrow {
  display: block; line-height: 1;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.pyr-nav__btn:hover .pyr-nav__arrow,
.pyr-nav__btn:focus-visible .pyr-nav__arrow { transform: translateX(var(--pyr-nudge, 0.125rem)); }

/* Where it fails, and the source, in the site's caveat idiom. */
.pyr-caveat { padding-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 4rem; align-items: baseline;
}
.pyr-caveat__head { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 13rem; }
.pyr-caveat__head .pyr-label { margin: 0; }
.pyr-caveat__head img { height: 1.375rem; width: auto; display: block; flex: none; }
.pyr-caveat__body { flex: 1 1 20rem; max-width: 36rem; }
.pyr-caveat__body p {
  margin: 0; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}
.pyr-caveat__source {
  margin: 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--muted-foreground); max-width: 44rem; text-wrap: pretty;
}

.pyr-close { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.pyr-close__line {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 42rem; text-wrap: pretty;
}

/* ===== rag ===== */
/* Every top-level block on this page carries .rag-section, which is also where the
   page-local tokens live so they inherit into everything below without leaking. */
.rag-section {
  /* --muted-foreground on --background is 4.33:1 — just under AA, and this page sets
     a lot of it at 15px and below. One notch darker clears it without losing "muted". */
  --rag-soft: var(--quiet);
  padding-top: clamp(4rem, 8vw, 6rem);
}
.rag-section--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.rag-section--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }

.rag-rule { padding-top: clamp(2rem, 4vw, 3rem); }
.rag-rule--hair { padding-top: 2rem; }

.rag-label {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rag-soft);
}
.rag-label--brand { color: var(--brand-primary); }

/* ---- Hero ---- */
.rag-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.rag-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.rag-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  /* House h1 size, with the break tuned by measure rather than by type size:
     13ch is what holds the headline to an even stack once the hero collapses
     to one column and the wrap would otherwise let it run the full width. */
  max-width: 13ch; text-wrap: balance;
}
.rag-hero__lead {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
/* Same hero-art box as every other page. The signal artwork is tall and narrow,
   so the height is capped rather than driven, and the ink is centred in the box. */
.rag-hero__art {
  width: 100%; max-width: 28rem;
  height: auto; max-height: 26rem;
  object-fit: contain;
  display: block; justify-self: center;
}

/* ---- The three colour claims ---- */
.rag-row {
  border-top: 1px solid var(--border);
  margin-top: 2rem; padding-top: 2rem;
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 2.5rem; align-items: baseline;
}
.rag-row--first {
  margin-top: 0; padding-top: clamp(2rem, 4vw, 2.5rem);
}
.rag-row__dot {
  flex: 0 0 auto; display: block;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--hue);
}
.rag-row__name {
  margin: 0; flex: 1 1 14rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1; letter-spacing: -0.03em;
}
.rag-row__body { flex: 2 1 24rem; max-width: 34rem; }
.rag-row__text {
  margin: 0;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}
/* The routing column: a mono label and its answer, on the baseline of the
   prose above it, the way the footer's rail labels sit. */
.rag-row__acts {
  margin: 0.75rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; align-items: baseline;
  font-size: 0.9375rem; line-height: 1.6;
}
.rag-row__acts .rag-label { flex: 0 0 5.25rem; }
/* Stacked, the 2.5rem column gap strands the dot away from the name it labels. */
@media (max-width: 40rem) {
  .rag-row { column-gap: 0.875rem; }
}

/* ---- Section headings ---- */
.rag-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}
.rag-standfirst {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--rag-soft); max-width: 34rem; text-wrap: pretty;
}

/* ---- The shared facts ---- */
.rag-facts {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  max-width: 36rem;
}
.rag-facts__body {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7; text-wrap: pretty;
  margin-top: 0.4375rem;
}

/* ---- The three status calls ---- */
.rag-tabs {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
/* app.css sizes .rag-tab to the text; 34px is under the 44px touch minimum. */
.rag-tab { min-height: 2.75rem; padding-inline: 1rem; }
.rag-tab:hover { border-color: color-mix(in oklab, var(--hue) 45%, var(--border)); }
.rag-tab[aria-selected="true"] { border-color: var(--hue); }
.rag-tab__dot {
  display: block; flex: none;
  width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--hue);
}

/* The read is two lines against the update's eight, so side by side it left a
   hole. Stacked, opened by the house hairline, at a readable measure. */
.rag-panel {
  display: block;
  max-width: 44rem;
}
/* Inline display:grid used to beat the [hidden] rule in app.css, so all three
   panels rendered at once. Keep the attribute selector above the base rule here. */
.rag-panel[hidden] { display: none; }
.rag-panel:not([hidden]) { animation: rag-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes rag-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.rag-panel__head { margin-bottom: 0.875rem; }
.rag-panel__read { margin-top: 2.25rem; padding-top: 2rem; }
.rag-update { border-top: 2px solid var(--hue); padding-top: 1.25rem; }
.rag-update__headline {
  margin: 0 0 1rem;
  font-size: 1.1875rem; font-weight: 600; line-height: 1.4;
  letter-spacing: -0.02em; text-wrap: pretty;
}
.rag-update__body {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.7;
  white-space: pre-line; color: var(--rag-soft); text-wrap: pretty;
}
.rag-read {
  margin: 0;
  border-top: 1px solid var(--border); padding-top: 1.25rem;
  font-size: 1rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- The template ---- */
.rag-lede {
  display: flex; flex-wrap: wrap;
  gap: 1rem 4rem; align-items: baseline;
}
/* The claims section opens on the heavy rule of its first row, so its lede
   sits above that rule rather than under one of its own. */
.rag-lede--claims { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.rag-lede__h {
  margin: 0; flex: 1 1 16rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.rag-lede__p {
  margin: 0; flex: 1 1 22rem;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--rag-soft); max-width: 32rem; text-wrap: pretty;
}
/* Same muted card as .rag-facts, sized for a block someone copies out. */
.rag-tmpl {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  background: var(--muted);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
}
.rag-tmpl__head {
  margin: 0.625rem 0 1.125rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7; text-wrap: pretty;
}
.rag-tmpl__rows { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.rag-tmpl__row {
  display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; align-items: baseline;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7;
}
.rag-tmpl__row dt { flex: 0 0 6.5rem; color: var(--brand-primary); }
.rag-tmpl__row dd { margin: 0; flex: 1 1 14rem; max-width: 34rem; color: var(--rag-soft); text-wrap: pretty; }
@media (max-width: 30rem) {
  .rag-tmpl__row dt { flex: 0 0 100%; }
}
.rag-tmpl__foot {
  margin: 1.125rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--rag-soft); text-wrap: pretty;
}

/* ---- Closing line ---- */
.rag-close {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 38rem; text-wrap: balance;
}

/* ===== raid ===== */
.raid-section { padding-top: clamp(4rem, 8vw, 6rem); }
.raid-section--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.raid-section--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.raid-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.raid-label {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.raid-label--brand { color: var(--brand-primary); }

/* ---- Hero ---- */
.raid-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.raid-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.raid-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.raid-hero__lead {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
.raid-hero__art {
  width: 100%; max-width: 28rem;
  height: auto; max-height: 26rem;
  object-fit: contain;
  display: block; justify-self: center;
}

/* ---- Section headings ---- */
.raid-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}
.raid-standfirst {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}
.raid-standfirst a, .raid-lede__p a { color: inherit; text-underline-offset: 0.2em; }

.raid-facts {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  max-width: 36rem;
}
.raid-facts__body {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7; text-wrap: pretty;
  margin-top: 0.4375rem;
}

/* ---- The four tabs ---- */
.raid-tabs {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: clamp(2rem, 4vw, 2.5rem);
}
.raid-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.5rem 1rem;
  cursor: pointer; font: inherit;
  font-family: 'Geist Variable', system-ui, sans-serif;
  font-size: 0.9375rem; font-weight: 500;
  border-radius: var(--radius);
  border: 2px solid var(--border); background: var(--card); color: var(--foreground);
  transition: border-color 160ms ease;
}
.raid-tab:hover { border-color: color-mix(in oklab, var(--brand-primary) 45%, var(--border)); }
.raid-tab[aria-selected="true"] { border-color: var(--brand-primary); }
.raid-tab__letter {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-weight: 600; color: var(--brand-primary);
}

.raid-panel { display: block; max-width: 44rem; }
.raid-panel[hidden] { display: none; }
.raid-panel:not([hidden]) { animation: raid-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes raid-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.raid-panel__head { margin-bottom: 0.5rem; }
.raid-panel__note {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}

.raid-entries { list-style: none; margin: 0; padding: 0; }
.raid-entry { border-top: 1px solid var(--border); padding-block: 1.25rem; }
.raid-entry__head { display: flex; gap: 0.875rem; align-items: baseline; }
.raid-entry__id {
  flex: none; min-width: 2rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; font-weight: 600; color: var(--brand-primary);
}
.raid-entry__text {
  margin: 0;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.45;
  letter-spacing: -0.015em; text-wrap: pretty;
}
.raid-entry__fields {
  margin: 0.75rem 0 0 2.875rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.raid-field {
  display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: baseline;
  font-size: 0.9375rem; line-height: 1.6;
}
.raid-field dt {
  flex: 0 0 6.5rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.raid-field dd { margin: 0; flex: 1 1 14rem; text-wrap: pretty; }
.raid-fired { color: var(--destructive-ink); font-weight: 600; }
@media (max-width: 30rem) {
  .raid-entry__fields { margin-left: 0; }
  .raid-field dt { flex-basis: 100%; }
}

/* ---- Risk to issue, and assumption against dependency ---- */
.raid-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1rem;
  max-width: 52rem;
}
.raid-card {
  border-top: 2px solid var(--border);
  padding-top: 1.25rem;
}
.raid-card--hot { border-top-color: var(--destructive); }
.raid-card__when { margin-bottom: 0.75rem; }
.raid-card__text {
  margin: 0 0 0.75rem;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.45;
  letter-spacing: -0.015em; text-wrap: pretty;
}
.raid-card__body {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}
.raid-test {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  border-top: 1px solid var(--border); padding-top: 1.25rem;
  font-size: 1.0625rem; line-height: 1.6;
  max-width: 40rem; text-wrap: pretty;
}

/* ---- The template ---- */
.raid-lede {
  display: flex; flex-wrap: wrap;
  gap: 1rem 4rem; align-items: baseline;
}
.raid-lede__h {
  margin: 0; flex: 1 1 16rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.raid-lede__p {
  margin: 0; flex: 1 1 22rem;
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 32rem; text-wrap: pretty;
}
.raid-tmpl {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  background: var(--muted);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
}
.raid-tmpl__rows { margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.raid-tmpl__row {
  display: flex; flex-wrap: wrap; gap: 0.125rem 1rem; align-items: baseline;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7;
}
.raid-tmpl__row dt { flex: 0 0 6.5rem; color: var(--brand-primary); }
.raid-tmpl__row dd { margin: 0; flex: 1 1 14rem; max-width: 34rem; color: var(--quiet); text-wrap: pretty; }
@media (max-width: 30rem) {
  .raid-tmpl__row dt { flex: 0 0 100%; }
}
.raid-tmpl__foot {
  margin: 1.125rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}

.raid-close {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 38rem; text-wrap: balance;
}

/* ===== scqa ===== */
.scqa-section { padding-top: clamp(4rem, 8vw, 6rem); }
.scqa-section--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.scqa-section--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.scqa-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.scqa-label {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.scqa-label--brand { color: var(--brand-primary); }

/* ---- Hero ---- */
.scqa-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.scqa-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.scqa-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.scqa-hero__lead {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
.scqa-hero__art {
  width: 100%; max-width: 28rem;
  height: auto; max-height: 26rem;
  object-fit: contain;
  display: block; justify-self: center;
}

/* ---- Section headings ---- */
.scqa-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}
.scqa-standfirst {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}

/* ---- The two emails ---- */
.scqa-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.scqa-mail {
  background: var(--muted);
  border-radius: var(--radius);
  padding: clamp(1.125rem, 3vw, 1.5rem);
  margin-top: 0.875rem;
}
.scqa-mail__subject {
  margin: 0 0 1rem; padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.6; overflow-wrap: anywhere;
}
.scqa-mail__body {
  margin: 0;
  font-size: 0.9375rem; line-height: 1.7;
  white-space: pre-line; text-wrap: pretty;
}
.scqa-mail__body--before { color: var(--quiet); }
.scqa-mail__ask {
  color: var(--foreground);
  text-decoration: underline wavy color-mix(in oklab, var(--destructive) 70%, transparent);
  text-underline-offset: 0.25em;
}
.scqa-note {
  margin: 1rem 0 0;
  font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty;
}

.scqa-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; }
.scqa-line {
  display: flex; gap: 0.75rem; align-items: baseline;
  margin: 0 -0.5rem; padding: 0.375rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.9375rem; line-height: 1.65; text-wrap: pretty;
  transition: background 200ms ease, color 200ms ease;
}
.scqa-line__letter {
  flex: none; width: 1rem;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; color: var(--brand-primary);
}
.scqa-tail {
  margin: 1rem 0 0; padding-top: 0.875rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem; line-height: 1.6; color: var(--quiet); text-wrap: pretty;
}
/* The tab engine only toggles aria-selected and [hidden]; :has() lets the selected
   tab light its sentence in the email without any page script. Where :has() is
   unsupported the email simply stays unlit. */
.scqa-after:has(.scqa-tab[aria-selected="true"]) .scqa-line { color: var(--quiet); }
.scqa-after:has(.scqa-tab[data-value="s"][aria-selected="true"]) .scqa-line--s,
.scqa-after:has(.scqa-tab[data-value="c"][aria-selected="true"]) .scqa-line--c,
.scqa-after:has(.scqa-tab[data-value="q"][aria-selected="true"]) .scqa-line--q,
.scqa-after:has(.scqa-tab[data-value="a"][aria-selected="true"]) .scqa-line--a {
  color: var(--foreground);
  background: color-mix(in oklab, var(--brand-primary) 12%, transparent);
}

.scqa-tabs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.25rem;
}
/* app.css sizes .chip to its text; 34px is under the 44px touch minimum. */
.scqa-tab {
  min-height: 2.75rem; padding-inline: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.scqa-tab__letter {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem;
}
.scqa-panel { margin-top: 1.25rem; }
.scqa-panel[hidden] { display: none; }
.scqa-panel:not([hidden]) { animation: scqa-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes scqa-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.scqa-panel__text {
  margin: 0.5rem 0 0;
  font-size: 1rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- SCQA against BLUF ---- */
.scqa-vs { border-top: 1px solid var(--border); }
.scqa-vs__row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; align-items: baseline;
  padding-block: 1.5rem; border-bottom: 1px solid var(--border);
}
.scqa-vs__name {
  margin: 0; flex: 1 1 12rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  line-height: 1.15; letter-spacing: -0.03em;
}
.scqa-vs__name a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.scqa-vs__text {
  margin: 0; flex: 2 1 22rem; max-width: 34rem;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}

/* ---- Template ---- */
.scqa-tmpl {
  background: var(--muted);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
}
.scqa-tmpl__rows { margin: 0.875rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
.scqa-tmpl__row {
  display: flex; gap: 1rem; align-items: baseline;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7;
}
.scqa-tmpl__row dt { flex: 0 0 1rem; color: var(--brand-primary); }
.scqa-tmpl__row dd { margin: 0; flex: 1 1 auto; min-width: 0; max-width: 40rem; text-wrap: pretty; }
.scqa-slot { color: var(--brand-primary); }
.scqa-tmpl__foot {
  margin: 1.125rem 0 0; padding-top: 1.125rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}

/* ---- Closing line ---- */
.scqa-close {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 38rem; text-wrap: balance;
}

/* ===== sow ===== */
.sow-section { padding-top: clamp(4rem, 8vw, 6rem); }
.sow-section--hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); }
.sow-section--end { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.sow-rule { padding-top: clamp(2rem, 4vw, 3rem); }

.sow-label {
  margin: 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--quiet);
}
.sow-label--brand { color: var(--brand-primary); }
.sow-label--warn { color: var(--destructive-ink); }

/* ---- Hero ---- */
.sow-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.sow-hero__eyebrow {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.sow-hero__title {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.sow-hero__lead {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.375rem); line-height: 1.35;
  letter-spacing: -0.02em; max-width: 30rem; text-wrap: pretty;
}
/* The contract page is portrait, so cap the height and let the width follow. */
.sow-hero__art {
  width: 100%; max-width: 24rem;
  height: auto; max-height: 28rem;
  object-fit: contain;
  display: block; justify-self: center;
}

/* ---- Section headings ---- */
.sow-h2 {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}
.sow-standfirst {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 34rem; text-wrap: pretty;
}

.sow-facts {
  background: var(--muted);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  max-width: 36rem;
}
.sow-facts__body {
  margin: 0.4375rem 0 0;
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.7; text-wrap: pretty;
}

/* ---- Vague / Tight ---- */
.sow-tabs {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
/* .chip is sized to its text; 2.75rem is the touch minimum. */
.sow-tab { min-height: 2.75rem; min-width: 6rem; }

.sow-panel { display: block; max-width: 52rem; }
.sow-panel[hidden] { display: none; }
.sow-panel:not([hidden]) { animation: sow-panel-in 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes sow-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.sow-clause {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 2.5rem; align-items: baseline;
  border-top: 1px solid var(--border);
  padding-block: 1.5rem;
}
.sow-clause:first-child { border-top: 2px solid var(--brand-primary); }
.sow-clause__name {
  margin: 0; flex: 1 1 11rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.02em;
}
.sow-clause__body { flex: 3 1 24rem; min-width: 0; max-width: 36rem; }
.sow-clause__text {
  margin: 0;
  font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty;
}
.sow-clause__text--vague { font-style: italic; }
.sow-clause__cost {
  margin: 0.75rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; align-items: baseline;
  font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}
.sow-clause__cost .sow-label { flex: 0 0 4rem; }
.sow-clause__cost span:last-child { flex: 1 1 16rem; }

/* ---- Before you sign ---- */
.sow-lede { max-width: 44rem; }
.sow-lede__h {
  margin: 0 0 0.75rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.sow-lede__p {
  margin: 0;
  font-size: 1.0625rem; line-height: 1.6;
  max-width: 32rem; text-wrap: pretty;
}
.sow-note {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem; line-height: 1.6;
  color: var(--quiet); max-width: 40rem; text-wrap: pretty;
}

.sow-close {
  margin: 0;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.035em;
  max-width: 38rem; text-wrap: balance;
}

/* ===== trees ===== */
/* One mono micro-label size for the whole page. The 10px grey it replaces was
   the least legible text here; 11px is the size the column headers already used. */
.t-label {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.6875rem; font-weight: 400; line-height: 1.45;
  letter-spacing: 0.1em; text-transform: uppercase;
  /* The plain muted grey clears 4.5:1 by a hair, which is not enough for 11px
     tracked-out mono. A fifth of the way to ink puts these labels near 6:1. */
  color: var(--quiet);
}
.t-label--brand { color: var(--brand-primary); }
/* An equation, not a label: less tracking so it still holds one line at 390px. */
.t-label--eq { letter-spacing: 0.045em; }

/* A link inside a heading needs more than colour to be a link. */
.t-inline-link {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
}
.t-inline-link:hover { text-decoration-color: currentColor; }

/* One vertical rhythm for the page. 6rem between sections is right at desktop
   and most of a viewport at 390px, so the same step scales with the screen. */
.t-sec { padding-top: clamp(4rem, 8vw, 6rem); }
.t-sec--close { padding-block: clamp(4.5rem, 9vw, 7rem) clamp(5rem, 10vw, 8rem); }
.t-hero {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: 2.5rem 4rem; align-items: center;
}
/* Every section opens on the same rule at the same distance from its heading. */
.t-rule { padding-top: clamp(2rem, 4vw, 3rem); }

/* The heading inside a mono-labelled step column, shared with rag and monkeys. */
.t-step__h {
  margin: 0 0 0.625rem;
  font-family: Poppins, sans-serif; font-weight: 600;
  font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* ---- Hero ---- */
.t-hero__eyebrow {
  display: block; font-size: 0.75rem; letter-spacing: 0.16em;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.t-hero h1 {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 0.94; letter-spacing: -0.04em;
  max-width: 13ch; text-wrap: balance;
}
.t-hero__lead {
  margin: 0 0 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.375rem);
  line-height: 1.35; letter-spacing: -0.02em;
  max-width: 30rem; text-wrap: pretty;
}
.t-hero__sub {
  margin: 0; font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 30rem; text-wrap: pretty;
}

/* ---- The one big heading tier, shared with the rest of the site ---- */
.t-h2--lead {
  margin: 0 0 2rem;
  font-family: Poppins, sans-serif; font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1; letter-spacing: -0.04em;
  max-width: 20ch; text-wrap: balance;
}

/* The tree rail */
.t-rail { display: flex; flex-direction: column; gap: 0.375rem; }
/* The selected branch is filled brand blue, so the default brand focus ring
   reads as a halo on it. Ink is the one colour that stays legible on both. */
.t-rail .pick--branch[aria-selected="true"]:focus-visible {
  outline-color: var(--foreground); outline-offset: 3px;
}
.t-node__row { display: flex; align-items: baseline; gap: 0.75rem; }
.t-node__name { flex: 1 1 auto; min-width: 0; }
.t-node__id, .t-node__size {
  font-family: 'Geist Mono Variable', ui-monospace, monospace; font-size: 0.6875rem;
}
.t-node__id { flex: 0 0 1.75rem; opacity: 0.62; }
.t-node__size { flex: 0 0 4.75rem; text-align: right; opacity: 0.78; }
/* White at 0.6 over the filled blue branch is 2.8:1. Hold both labels above 4.5. */
.pick--branch[aria-selected="true"] .t-node__id { opacity: 0.96; }
.pick--branch[aria-selected="true"] .t-node__size { opacity: 1; }
/* A branch and the leaves under it are one group; the next branch starts a new one. */
.t-node--newgroup { margin-top: 1.375rem; }

/* The detail column sits on the page ground and opens on the brand rule, the
   same list-and-detail treatment the other worked examples use. */
.t-panels { border-top: 2px solid var(--brand-primary); padding-top: 1.25rem; }
/* The detail panel. Six of these ship in the HTML, so they are one class
   rather than one copy of the same inline styles per node. */
/* No fill mode: with animations off the panel is simply already there. */
.t-panel:not([hidden]) { animation: t-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes t-panel-in { from { opacity: 0; transform: translateY(4px); } }
.t-panel__kind { margin-bottom: 0.875rem; }
.t-panel__title {
  margin: 0 0 0.75rem; font-family: Poppins, sans-serif; font-weight: 600;
  font-size: clamp(1.375rem, 4.5vw, 1.5rem); line-height: 1.15;
  letter-spacing: -0.03em; text-wrap: pretty;
}
.t-panel__what { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.65; text-wrap: pretty; }
.t-panel__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem;
  border-top: 1px solid var(--border); padding-top: 1.25rem; margin-bottom: 1.25rem;
}
.t-stat__label { margin-bottom: 0.25rem; }
/* The stat values are words now ("Not this year"), not figures, so they sit at
   reading size: a half-column at 390px cannot hold thirteen mono characters at
   display size without wrapping mid-phrase. */
.t-stat__value {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 1.0625rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em; text-wrap: pretty;
}
.t-panel__note { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.t-panel__note-label { margin-bottom: 0.5rem; }
.t-panel__note-body {
  margin: 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}

/* The read-out under the tree, in the same stat pairing a panel uses, laid
   across the full width so the whole board is legible on one line. The node
   name is the figure here, so it keeps the display size the panels gave up. */
.t-verdict { margin-top: 2.75rem; padding-top: 2rem; }
.t-verdict__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1.75rem 2.5rem; margin-top: 1.25rem;
}
.t-verdict__value {
  font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: clamp(1.3125rem, 4.6vw, 1.5rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.03em;
}
.t-verdict__label { margin: 0.25rem 0 0.375rem; }
.t-verdict__note {
  margin: 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); text-wrap: pretty;
}
.t-verdict__close {
  margin: 2rem 0 0; font-size: 1.0625rem; line-height: 1.6;
  max-width: 40rem; text-wrap: pretty;
}

/* Numbered step columns: the numeral is the house mono label in brand blue and
   the row carries no rule, the same treatment the other step rows use. */
.t-step__head {
  display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1rem;
}
/* Where the method comes from, in the quiet aside size the other pages use for
   the same job. */
.t-source {
  margin: 2.5rem 0 0; font-size: 0.9375rem; line-height: 1.6;
  color: var(--quiet); max-width: 46rem; text-wrap: pretty;
}

/* The template sits under the four steps as a coda: the same hairline the
   panels use, with the copyable half in the card. */
/* Block, not a two-column grid: every other page's steal-this block
   (.lv-steal, .pyr-script, .rag-tmpl, .mk-formula) runs full width under its
   intro, and the short intro here left a hole beside the card. */
.t-steal { margin-top: 3rem; padding-top: 2rem;
}
.t-steal__intro { margin-bottom: 1.5rem; }
.t-steal__body {
  margin: 0; font-size: 1.0625rem; line-height: 1.6;
  color: var(--quiet); max-width: 32rem; text-wrap: pretty;
}

/* The copyable card, in the card idiom the rest of the site already uses. */
/* Grey fill, no border: white-plus-border is this site's interactive idiom
   (.hub-card, .pick, .site-nav__card) and this template is not clickable. */
.t-card {
  max-width: 52rem;
  background: var(--muted); border: 0;
  border-radius: var(--radius); padding: 1.5rem;
}
.t-tmpl {
  margin: 0; font-family: 'Geist Mono Variable', ui-monospace, monospace;
  font-size: 0.8125rem; line-height: 1.75; text-wrap: pretty;
}
/* The filled-in rows are examples of the row above them, so they sit back a step.
   Two of them: the leaf you work and the leaf you refuse have to survive the same line. */
.t-tmpl--filled { color: var(--quiet); }
.t-tmpl--filled + .t-tmpl--filled { margin-top: 0.875rem; }
.t-card__rule { border-top: 1px solid var(--border); margin: 1.125rem 0; }