@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../brand/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../brand/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../brand/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../brand/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../brand/jetbrains-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.rooms,
.meaning,
.roadmap,
.conversion {
  font-family: "Archivo", Helvetica, Arial, sans-serif;
}

.concept-page {
  --section-space: clamp(4rem, 6.5vw, 6.5rem);
  --page-gutter: clamp(1rem, 3.8889vw, 3.5rem);
  /* Mirrors .site-header__inner min-block-size so the hero fills exactly the
     rest of the viewport with no sliver of the next block showing. */
  --header-h: clamp(5.5rem, 7vw, 6rem);
  background: var(--brand-off-white);
}

.concept-page .button,
.concept-page input,
.concept-page textarea {
  border-radius: 0;
}

.concept-page .button {
  min-block-size: clamp(3.125rem, 3.6vw, 3.25rem);
}

.site-header {
  background: var(--brand-blue);
  color: var(--brand-off-white);
}

.site-header__inner {
  display: flex;
  min-block-size: clamp(5.5rem, 7vw, 6rem);
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: var(--space-md);
}

.site-header__brand {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  inline-size: clamp(12.5rem, 18vw, 16.5rem);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.site-header__brand img {
  inline-size: 100%;
  block-size: auto;
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.site-header__actions .button {
  min-block-size: 2.75rem;
  padding: 0.625rem 1rem;
  /* 1.1875rem, not 1rem: off-white on brand blue is 3.75:1, which passes as
     large text (>=18.66px bold) but fails the 4.5:1 small-text rule. */
  font-size: 1.1875rem;
  white-space: nowrap;
}

/* Every content block and its navy crisis band form one page. The content row
   takes the flexible space while the band closes the page at its natural
   height. The light sign-off row remains separate and appears once at the end. */
.screen {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.screen > :first-child {
  min-block-size: 0;
}

.crisis-band {
  background: var(--brand-navy);
  color: var(--brand-off-white);
  border-block-start: clamp(0.5rem, 0.85vw, 0.75rem) solid var(--brand-yellow);
}

.crisis-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.4vw, 2.5rem);
  padding-block: clamp(0.75rem, 1.9svh, 1.75rem);
}

/* Two short lines beside the numbers rather than a three-row column above them.
   The retired hero repeat forced the column and cost every screen ~50px of
   height for a line the hero already says once, properly, at display size. */
.crisis-band__support {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.5svh, 0.4rem);
}

.crisis-band__label {
  margin: 0;
  color: var(--brand-yellow);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.crisis-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Tap targets, not underlined links. 44px minimum on every pointer type. */
.crisis-action {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem clamp(0.9rem, 1.4vw, 1.5rem);
  font-size: clamp(1.125rem, 1.15vw, 1.375rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.crisis-action--signal {
  background: var(--brand-yellow);
  color: var(--brand-navy);
}

.crisis-action--outline {
  border: 2px solid var(--brand-off-white);
  color: var(--brand-off-white);
}

.crisis-action:active {
  transform: translateY(0.0625rem);
}

.crisis-band__note {
  margin: 0;
  color: var(--color-dark-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.concept-hero {
  display: flex;
  overflow: hidden;
  background: var(--brand-off-white);
}

.concept-hero__inner {
  display: grid;
  flex: 1;
  grid-template-areas:
    "copy media"
    "lead details";
  grid-template-columns: minmax(0, 46fr) minmax(0, 48fr);
  align-content: center;
  align-items: start;
  column-gap: 2%;
  row-gap: clamp(0.75rem, 1.2vw, 1rem);
  padding-block: clamp(1.5rem, 2.2vw, 2.25rem);
}

/* Centred, not end-aligned. Bottom-aligning to close the gap under the headline
   drove "Alone."'s yellow underline into the lead line below it: the underline
   sits 0.16em past the baseline, which already overflows the h1 box, and the
   16px row-gap is not enough clearance once the slack is removed. */
.concept-hero__copy {
  grid-area: copy;
  align-self: center;
  min-inline-size: 0;
}

.concept-hero h1,
.section-heading h2,
.meaning h2 {
  margin: 0;
  /* Own stacking context so a marker band's z-index:-1 layer stays above the
     section background (the blue manifesto field) while still sitting under
     every line of the heading. */
  isolation: isolate;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.035em;
  line-height: 0.9;
}

.concept-hero h1 {
  margin-block-start: var(--space-lg);
  font-size: clamp(4.5rem, 9.17vw, 8.25rem);
}

.concept-hero__headline-line,
.section-heading h2 > span {
  display: block;
}

.concept-hero__headline-line {
  white-space: nowrap;
}

.concept-hero__accent {
  color: var(--brand-blue);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1;
  letter-spacing: -0.02em;
}

.concept-hero__underline {
  text-decoration: underline;
  text-decoration-color: var(--brand-yellow);
  text-decoration-thickness: 0.11em;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

/* A highlighter mark, not the browser's selection box. The pseudo-element
   extends beyond the measured text box without padding the inline, so wrapping
   and display geometry stay unchanged. It must remain a z-index:-1 layer: a
   plain background would paint over the line above.

   The block insets are measured, not guessed. In Proxima Nova Condensed Bold
   the inline content box is 1.4258em tall with the baseline 1.0645em down it;
   the tallest ink in any banded phrase rises 0.7031em above that baseline
   ("first") and the deepest falls 0.1953em below it (the y in "an ordinary
   week."). The full box therefore left 0.361em of dead yellow above the letters
   against 0.166em below — top-heavy, half again as tall as it needed to be, and
   reaching up into the line above, which is what made the band under "climb."
   read as misaligned.

   0.28em on both sides is measured off the BASELINE, not the descenders: it
   leaves an even 0.081em of yellow above the tallest ink and 0.081em below the
   baseline, and it starts the band below the line box instead of inside the
   previous line. Three of the four banded phrases have no descender at all, so
   pushing the band down to clear the one that does ("an ordinary week.", which
   is unbanded on desktop anyway) would make every other one sag. A tail hanging
   past the mark is what a real highlighter does. nowrap keeps the band to one
   fragment while only the pseudo-element carries the inline bleed. */
.marker-band {
  position: relative;
  display: inline;
  padding-inline: 0;
  color: var(--brand-navy);
  white-space: nowrap;
}

.marker-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0.28em;
  inset-inline: -0.125em;
  background: var(--brand-yellow);
}

/* The inset above is Proxima Nova Condensed's. Archivo — which sets the rooms,
   corner and sign-up headings — reports an inline box of 1.093em against
   Proxima's 1.426em, so the identical em inset there cut 6px off the caps of
   "A Corner." and clipped the baseline under it. Measured in Archivo Bold:
   the baseline sits 0.884em down the box and the tallest banded ink reaches
   0.7474em above it (the f and t of "first"), so 0.055em/0.1em leaves the same
   ~0.07-0.09em of yellow around the letters that the Proxima rule does. */
.rooms .marker-band::before,
.meaning .marker-band::before,
.conversion .marker-band::before {
  inset-block: 0.055em 0.1em;
}

.concept-hero__lead {
  grid-area: lead;
  align-self: start;
  max-inline-size: 33ch;
  margin: 0;
  font-size: clamp(1.375rem, 1.78vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

/* Unconditional, unlike the lead beside it. Below 769px the right column used
   to fall back to plain inline wrapping, so "Not for much longer" only started
   its own line when the measure happened to run out in the right place — it
   held by luck, not by rule. The break is a stated requirement, so it is a
   rule at every width. The second sentence may still wrap within itself on a
   narrow phone; what cannot happen is the two sentences sharing a line. */
.concept-hero__body-line {
  display: block;
}

@media (min-width: 48.0625rem) {
  .concept-hero__lead-line {
    display: block;
  }
}

.concept-hero__details {
  grid-area: details;
  align-self: start;
}

/* Design review item 4: this line was set at body weight and body leading in a
   55ch measure, so it read as a different voice from the left column. It now
   takes the same family, weight, size and leading as .concept-hero__lead and a
   short measure, and it starts at the image's left edge. */
/* 50ch, not 42ch: the two lines are now an explicit break between the two
   SENTENCES rather than wherever a 42ch measure happened to run out, which had
   been snapping the line after "Not for much" and leaving "longer" orphaned on
   the second row. The measure now only has to hold the longer of the two
   sentences (57 characters) without wrapping it a third time, so it widens
   just far enough to do that and no further. Size, weight and leading are
   untouched, and they still match .concept-hero__lead so the two columns square
   up line for line. */
.concept-hero__body {
  max-inline-size: 50ch;
  margin: 0;
  font-size: clamp(1.375rem, 1.78vw, 1.75rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.concept-hero__media {
  position: relative;
  isolation: isolate;
  grid-area: media;
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  /* The 3:2 image is width-driven, so on a short window it alone pushed the
     hero past one screen. Cap it against the viewport and let object-fit crop.
     The reserve covers the masthead and the hero's own copy rows. */
  max-block-size: calc(100svh - 30rem);
  margin: 0;
  overflow: hidden;
  background: var(--brand-navy);
}

.concept-hero__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.image-frame {
  position: relative;
  overflow: hidden;
  background: var(--brand-blue);
}

.image-frame::after {
  content: attr(data-image-fallback-label);
  position: absolute;
  inset: var(--space-xl);
  display: none;
  place-items: center;
  padding: var(--space-xl);
  border: 1px solid var(--brand-navy);
  background: var(--brand-off-white);
  color: var(--brand-navy);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.image-frame.is-image-missing::after {
  display: grid;
}

.section-heading {
  max-inline-size: none;
}

.section-heading h2,
.meaning h2 {
  /* A marker band on the FIRST line reaches (1.4309 - 0.9) / 2 = 0.266em above
     the line box, so a fixed 24px gap let it cut through the eyebrow above once
     the display scale grew. The em term keeps the clearance proportional. */
  margin-block-start: max(var(--space-lg), 0.32em);
  font-size: clamp(3.75rem, 6.94vw, 8.5rem);
}

/* The same overhang runs DOWNWARD off the last line. Without this the yellow
   butted straight into whatever followed — measured at 7px above the statistics
   band and flush against the room tiles and the manifesto line. Only headings
   whose final line actually carries a band pay for the clearance. */
.section-heading h2:has(> span:last-child > .marker-band:last-child),
.meaning h2:has(> span:last-child > .marker-band:last-child) {
  padding-block-end: 0.32em;
}

/* Per-section display scale. The shared cap is set by the roadmap, whose
   longest line is locked to one line and already fills 81% of the frame; the
   stats and rooms headings have far more room and looked undersized on a
   wide screen, so they get their own ceilings. */
.stats__heading h2 {
  font-size: clamp(3.25rem, min(6.4vw, 13svh), 8.5rem);
}

.rooms__heading h2 {
  font-size: clamp(3rem, min(6vw, 11svh), 7.5rem);
}

.stats {
  display: flex;
  background: var(--brand-off-white);
  color: var(--brand-navy);
}

.stats__inner {
  display: flex;
  /* Full bleed like every other section. The retired 84% inset put the stats
     left edge 170px inboard of the rooms one on a wide screen. */
  inline-size: 100%;
  max-inline-size: none;
  flex-direction: column;
  justify-content: center;
  /* padding-block only — the inline padding is .page-frame's gutter. The old
     `padding: … 0` shorthand zeroed it, which was invisible while the inner was
     84% wide and auto-centred, but flush to the viewport edge at 100%. */
  padding-block: clamp(1rem, 2.1svh, 2.5rem);
}

/* Design review item 7: the four yellow rules under the figures and the navy
   vertical dividers are gone. The whole row is one navy band with yellow
   figures and white captions, which also stops the yellow competing with the
   single highlighted word in the heading above it. */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  margin-block-start: clamp(1rem, 2.6svh, 2.25rem);
  padding: clamp(1.5rem, 3.4svh, 2.75rem) clamp(1.25rem, 2vw, 2rem);
  background: var(--brand-navy);
  color: var(--brand-off-white);
}

.stat {
  min-inline-size: 0;
}

.stat__value {
  display: block;
  color: var(--brand-yellow);
  font-size: clamp(3rem, min(5.4vw, 10svh), 6.5rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.stat p {
  max-inline-size: 24ch;
  margin: clamp(0.6rem, 1.4svh, 1.1rem) 0 0;
  color: var(--brand-off-white);
  font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.3125rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  text-wrap: balance;
}

/* Design review item 8: noticeably smaller than body copy, and the two lines
   sit tight with no gap between them. */
.stats__sources {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-block-start: clamp(0.75rem, 1.8svh, 1.25rem);
  font-size: var(--font-size-small);
  line-height: 1.35;
}

.stats__sources p {
  margin: 0;
}

/* -------------------------------------------------------------- four rooms */
/* Design review, page 3: the giant left column and the thin right rows never
   met and the rules read as a table of contents. Each item is now a scene —
   a room with the man absent, so the viewer supplies him. */
.rooms {
  display: flex;
  background: var(--brand-off-white);
}

.rooms__inner {
  display: flex;
  inline-size: 100%;
  max-inline-size: none;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1rem, 2.1svh, 2.5rem);
}

.rooms__grid {
  display: grid;
  min-block-size: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.4vw, 1.25rem);
  margin-block-start: clamp(1rem, 2.6svh, 2.25rem);
}

.room {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
}

/* The commissioning brief renders inside the frame until the four shots land.
   Swapping in a photograph is one element per tile; nothing else moves. */
.room__slot {
  position: relative;
  display: flex;
  min-block-size: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(0.75rem, 1vw, 1rem);
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklch, var(--brand-blue) 18%, var(--brand-off-white)) 0 0.625rem,
      color-mix(in oklch, var(--brand-blue) 26%, var(--brand-off-white)) 0.625rem 1.25rem
    );
}

.room__slot img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.room__slot-label {
  position: absolute;
  inset-block-start: clamp(0.75rem, 1vw, 1rem);
  inset-inline-start: clamp(0.75rem, 1vw, 1rem);
  color: var(--brand-navy);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.room__slot-brief {
  color: var(--brand-navy);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.room__copy {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(0.25rem, 0.8svh, 0.5rem);
  padding: clamp(0.85rem, 1.9svh, 1.35rem) clamp(0.9rem, 1.2vw, 1.15rem) clamp(1rem, 2.2svh, 1.5rem);
  background: var(--brand-navy);
}

.room__copy h3 {
  margin: 0;
  color: var(--brand-yellow);
  font-size: clamp(1.25rem, min(1.85vw, 3.1svh), 2rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
}

.room__copy p {
  margin: 0;
  color: var(--color-dark-muted);
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.1875rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

/* ------------------------------------------------- corner: manifesto + plan */
/* Design review, pages 4 + 5: "Not a clinic. A Corner." is the strongest line
   on the site and two sentences of explanation talked over it. Both pages say
   one thing each, so they are one screen — this is a corner, and therapy is
   the first thing in it. */
.corner-block {
  display: grid;
  min-block-size: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.meaning {
  background: var(--brand-blue);
}

.meaning__inner {
  display: grid;
  grid-template-columns: 12.6% minmax(0, 87.4%);
  min-block-size: inherit;
  inline-size: 100%;
  max-inline-size: none;
  padding: 0;
}

.meaning__mark {
  display: grid;
  min-block-size: inherit;
  place-items: center;
  border-inline-end: clamp(0.25rem, 0.4vw, 0.4rem) solid var(--brand-yellow);
  background: var(--brand-navy);
}

.meaning__mark img {
  inline-size: clamp(3.25rem, 5vw, 5rem);
  block-size: auto;
}

.meaning__copy {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1rem, 3.1svh, 2.5rem) 5vw clamp(1rem, 3.1svh, 2.5rem) 7.4vw;
  color: var(--brand-off-white);
}

.meaning h2 {
  white-space: nowrap;
  font-size: clamp(3rem, min(5.6vw, 11svh), 7rem);
}

.meaning__body {
  max-inline-size: 46ch;
  margin: clamp(0.75rem, 1.8svh, 1.25rem) 0 0;
  font-size: clamp(1.375rem, 1.55vw, 1.875rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.roadmap {
  display: flex;
  min-block-size: 0;
  background: var(--brand-off-white);
}

.roadmap__inner {
  display: flex;
  inline-size: 100%;
  max-inline-size: none;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(1rem, 2.6svh, 2.75rem);
}

.roadmap__heading h2 {
  font-size: clamp(2.75rem, min(5.4vw, 10svh), 6.5rem);
}

.roadmap__support {
  max-inline-size: 46ch;
  margin: clamp(0.4rem, 1.2svh, 0.85rem) 0 0;
  font-size: clamp(1.25rem, 1.4vw, 1.625rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

/* Cards, not tabs. Tabs imply you can click them today; only therapy is live,
   so it is the one dark card and everything else is labelled Next. */
.roadmap__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.1vw, 1rem);
  padding: 0;
  margin: clamp(1rem, 2.4svh, 2rem) 0 0;
  list-style: none;
}

.roadmap-item {
  display: flex;
  min-block-size: clamp(6rem, 14svh, 8.5rem);
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(0.35rem, 1vh, 0.65rem);
  padding: clamp(0.9rem, 2vh, 1.4rem) clamp(0.9rem, 1.4vw, 1.4rem) clamp(1rem, 2.2vh, 1.5rem);
}

.roadmap-item__status {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.roadmap-item__name {
  font-size: clamp(1.375rem, min(2.05vw, 3.6svh), 2.25rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.roadmap-item__detail {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.roadmap-item--current {
  background: var(--brand-navy);
  color: var(--brand-off-white);
}

.roadmap-item--current .roadmap-item__status {
  color: var(--brand-yellow);
}

.roadmap-item--future {
  background: color-mix(in oklch, var(--brand-navy) 13%, var(--brand-off-white));
  color: color-mix(in oklch, var(--brand-navy) 78%, var(--brand-off-white));
}

.conversion {
  display: flex;
  background: var(--brand-blue);
  color: var(--brand-off-white);
}

.conversion__inner {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 42fr) minmax(0, 53fr);
  align-content: center;
  align-items: start;
  gap: 5%;
  padding-block: clamp(0.5rem, 1.6svh, 2.5rem);
}

.conversion__heading {
  color: var(--brand-off-white);
}

.conversion__heading h2 {
  font-size: clamp(3.5rem, 6.2vw, 5.75rem);
}

.conversion__heading h2 > .marker-band {
  display: inline;
}

@media (min-width: 64.0625rem) {
  .conversion__heading h2 {
    font-size: 3.5rem;
  }
}

@media (min-width: 48.0625rem) and (max-width: 64rem) {
  .conversion__heading h2 {
    font-size: clamp(3.5rem, 7.2vw, 4.75rem);
  }

  /* Four columns are still in play in this band but each is only ~185px wide,
     and the 4rem floor pushed the widest figure past its content box. Scale the
     numeral with the column here; mobile keeps the floor. */
  .stat__value {
    font-size: clamp(2.5rem, 6.2vw, 3.5rem);
  }
}

/* Design review, page 6: one sub-line, not two. */
.conversion__body {
  max-inline-size: 38ch;
  margin: var(--space-lg) 0 0;
  /* Pinned to the 24px WCAG large-text threshold for the same reason as
     .meaning__body: muted off-white on the brand blue field is 3.13:1, which
     clears the 3:1 large-text rule but not the 4.5:1 small-text one. */
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-dark-muted);
}

.conversion__forms {
  display: grid;
  inline-size: 100%;
  max-inline-size: 45rem;
  align-self: start;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  justify-self: end;
}

/* The card is the tallest thing on the sign-up screen, so its rhythm scales
   with svh like every other block. Fixed rem spacing here made it a rigid
   711px at every window height and overflowed the screen by 113px at 830px
   tall — exactly the cliff the max-height breakpoints were banned for. */
.conversion-path {
  align-self: start;
  padding: clamp(0.5rem, 1.4svh, 1.25rem) clamp(1.5rem, 2vw, 1.75rem);
  border: 1px solid var(--brand-navy);
  background: var(--brand-off-white);
  color: var(--brand-navy);
}

.conversion-path--member {
  border-block-start: 0.75rem solid var(--brand-yellow);
}

.conversion-path h3 {
  margin: 0 0 clamp(0.25rem, 0.9svh, 0.75rem);
  font-size: clamp(1.75rem, min(3vw, 5svh), 3rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.prototype-disclosure {
  margin: 0 0 clamp(0.4rem, 1.2svh, 1rem);
  padding: 0.375rem var(--space-sm);
  border: 1px solid color-mix(in oklch, var(--brand-navy) 38%, var(--brand-off-white));
  background: color-mix(in oklch, var(--brand-yellow) 9%, var(--brand-off-white));
  color: var(--brand-navy);
  font-size: var(--font-size-support);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

/* The standing "Prototype" notice is gone from the card — the privacy page says
   it at length and the CSP enforces it — but the element stays, because it is
   also this form's only VISIBLE error summary: the per-field messages are
   screen-reader-only, so without it a failed submit would look like nothing
   happened. Empty it paints nothing and keeps its reserved height, so the
   message that appears on a validation error cannot shift the button under the
   cursor. :empty is exact here: the script writes text content or clears it. */
.prototype-disclosure:empty {
  border-color: transparent;
  background: transparent;
}


.prototype-disclosure[data-validation-state="error"] {
  border-color: var(--brand-navy);
  background: color-mix(in oklch, var(--brand-yellow) 24%, var(--brand-off-white));
  color: var(--brand-navy);
  font-weight: var(--font-weight-bold);
}

.prototype-role {
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.prototype-role > legend {
  padding: 0;
  font-size: var(--font-size-support);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.prototype-role__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block-start: clamp(0.35rem, 0.9svh, 0.75rem);
}

.prototype-role__choice {
  position: relative;
  display: block;
  min-block-size: 0;
  padding: 0.9375rem 1rem;
  border: 1px solid #c3d3ec;
  background: #fff;
  color: #5b6f9c;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: var(--font-weight-bold);
  line-height: normal;
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.prototype-role__choice:has(input:checked) {
  padding: 0.875rem 1rem;
  border: 2px solid var(--brand-navy);
  background: #fff;
  color: var(--brand-navy);
  outline: 0;
}

.prototype-role__choice input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.prototype-role__choice:has(input:focus-visible) {
  outline: 3px solid var(--brand-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--color-focus);
}

.prototype-role.has-error .field-error {
  font-weight: var(--font-weight-bold);
}

.prototype-role.has-error .prototype-role__choices {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}

/* The consent tick. A real checkbox with accent-color rather than a custom
   control: this is a legal affirmation, so it has to read as an ordinary
   checkbox to every user and every assistive technology, and it has to be
   obvious when it is NOT ticked. The role radios can afford to be styled
   boxes; this cannot. */
.prototype-consent {
  min-inline-size: 0;
}

.prototype-consent__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
  cursor: pointer;
  color: var(--brand-navy);
  font-size: var(--font-size-support);
  line-height: 1.35;
}

.prototype-consent__choice input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  /* Optically aligns the box with the cap height of the first line rather than
     its line box, which sits it visibly high. */
  margin: 0.125rem 0 0;
  accent-color: var(--brand-navy);
  cursor: pointer;
}

.prototype-consent__choice:has(input:focus-visible) {
  outline: 3px solid var(--brand-navy);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--color-focus);
}

.prototype-consent.has-error .prototype-consent__choice {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
}

/* Bot trap. Deliberately NOT display:none — a growing share of form bots skip
   hidden inputs but still fill off-screen ones. aria-hidden and tabindex="-1"
   in the markup keep it out of the accessibility tree and the tab order, so no
   person reaches it by any route. */
.hp-field {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.conversion .prototype-form,
.conversion .prototype-form fieldset {
  gap: clamp(0.4rem, 1.1svh, 1rem);
}

.conversion .field-grid {
  gap: clamp(0.35rem, 1svh, 0.75rem);
}

.conversion .field {
  gap: var(--space-2xs);
}

.conversion .field-error {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-block-size: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

@media (min-width: 48.0625rem) and (max-width: 64rem) {
  .conversion-path {
    padding-block: var(--space-md);
  }

  .conversion .prototype-form fieldset {
    gap: var(--space-sm);
  }

  .conversion .field-grid {
    gap: var(--space-xs);
  }

  .conversion .prototype-disclosure {
    block-size: 4.625rem;
  }
}

.conversion-path__note {
  margin: 0;
  font-size: var(--font-size-support);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

/* ------------------------------------------------------------ privacy page */
.prose {
  display: flex;
  background: var(--brand-off-white);
}

.prose__inner {
  display: flex;
  inline-size: 100%;
  max-inline-size: none;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}

.prose h1 {
  margin: max(var(--space-lg), 0.32em) 0 0;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.035em;
  line-height: 0.9;
}

.prose__lead {
  max-inline-size: 34ch;
  margin: var(--space-xl) 0 0;
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.prose__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-xl) clamp(2rem, 4vw, 4rem);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-xl);
  border-block-start: 2px solid color-mix(in oklch, var(--brand-navy) 26%, var(--brand-off-white));
}

.prose__section h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.prose__section p {
  margin: var(--space-sm) 0 0;
  max-inline-size: 46ch;
  font-size: var(--font-size-support);
  line-height: 1.5;
}

/* ------------------------------------------------------ sign-off, once only */
/* Design review, page 7: the ghost wordmark is gone. It was the only decorative
   element on the site and it competed with the one piece of information that
   has to be found fast. The lockup is now a sign-off line under the crisis
   band, at the end of the page and nowhere else. */
.concept-footer {
  background: var(--brand-off-white);
  color: var(--brand-navy);
}

.concept-footer__signoff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.25rem, 2.2vw, 2rem);
}

.concept-footer__brand {
  display: inline-flex;
  min-block-size: 2.75rem;
  align-items: center;
  inline-size: clamp(11rem, 15vw, 14rem);
  transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.concept-footer__brand img {
  inline-size: 100%;
  block-size: auto;
}

.concept-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) clamp(1.25rem, 2.4vw, 2rem);
}

.concept-footer__legal {
  margin: 0;
  color: color-mix(in oklch, var(--brand-navy) 74%, var(--brand-off-white));
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

@media (min-width: 64.0625rem) {
  /* Each block fills one viewport. Scrolling stays free — no snap, no lock. */
  .screen {
    min-block-size: 100svh;
  }

  /* The hero screen also carries the masthead above it. */
  .screen--hero {
    min-block-size: calc(100svh - var(--header-h));
  }

  .concept-hero__inner {
    padding-block: clamp(1rem, 2.2vh, 2.25rem);
  }

  .room__slot {
    aspect-ratio: 3 / 4;
    flex: 0 0 auto;
  }

  .room__copy {
    min-block-size: 7.5625rem;
    flex: 1 1 auto;
    padding: 1.125rem 1.125rem 1.375rem;
  }

  .rooms__grid {
    min-block-size: 0;
    flex: 1;
    gap: 1.25rem;
  }

  .meaning__inner {
    grid-template-columns: 11.875rem minmax(0, 1fr);
  }

  .meaning h2 {
    font-size: clamp(3rem, 4.84375vw, 7rem);
  }

  .roadmap__heading h2 {
    font-size: clamp(2.75rem, 4.84375vw, 6.5rem);
  }

  .roadmap__list {
    gap: 0.875rem;
  }

  .roadmap-item {
    min-block-size: auto;
    gap: 0.625rem;
    padding: 1.375rem 1.375rem 1.5rem;
  }

  .conversion__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
  }

  .conversion__forms {
    max-inline-size: none;
  }

  .conversion-path {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    padding: 2.125rem 2.125rem 2.375rem;
  }

  .conversion-path--member {
    border-block-start-width: 0.5rem;
  }

  .conversion-path h3,
  .prototype-disclosure {
    margin: 0;
  }

  .conversion .prototype-form,
  .conversion .prototype-form fieldset {
    gap: 1.375rem;
  }

  /* The manifesto takes exactly the height its one line needs; the plan below
     takes the slack, so the two together are one page. */
  .meaning {
    min-block-size: clamp(13rem, 30svh, 19rem);
  }
}

/* 88rem, not 86rem: the manifesto body is pinned at the WCAG large-text
   threshold, which is what lets off-white on brand blue pass at 3.75:1, so its
   locked line needs room. Measured: 1376 overflows by 6px, 1400+ is clean. */
@media (min-width: 88rem) {
  .meaning__copy {
    padding-inline: 4.5vw 4vw;
  }

  .meaning__body {
    max-inline-size: none;
    white-space: nowrap;
  }
}

@media (min-width: 82.0625rem) {
  /* Keeps 7.5rem at 1440 and grows from there: at 2120 the fixed size left the
     copy column half empty against a 656px-tall hero image. The ceiling is set
     by "Fights Alone." staying on one line inside the 46fr column. */
  .concept-hero h1 {
    font-size: clamp(6.5rem, min(7.7vw, 15svh), 10.2rem);
  }
}

@media (min-width: 64.0625rem) {
  /* Pinned, not auto. The four portrait tiles are the only content on the site
     that cannot fit a short window at its natural size: a 3:4 slot in a
     quarter-width column is ~630px tall on a 2048px screen, which put this
     block 110px over one page at 1200 and 459px over at 830. It was the one
     screen you had to scroll inside. A definite height gives the grid row
     something to shrink against, so the chrome tightens with the window and the
     photographs — which are object-fit: cover and crop rather than squash —
     take whatever is left. Tall windows still get the full 3:4 tile. */
  .screen--rooms {
    block-size: 100svh;
  }

  /* The reviewed mock is authored at 1280px wide and every value in it is a
     fixed pixel. Copying those pixels to a 2048px screen does NOT reproduce the
     design — it flattens it: the plan cards go from 2.13:1 to 4.69:1 and the
     sign-up card flips from portrait 0.9:1 to landscape 1.5:1, because the type
     and padding stay put while the columns stretch.

     So one unit here IS one pixel of the mock, and everything is expressed in
     it. The vw term reproduces the mock exactly at any width; the svh term caps
     the scale so the block plus its crisis band still fits one page on a short
     window. Both screens share the tighter of the two constraints so their type
     scale matches across the pair. Aspect ratios and line breaks are then
     scale-invariant by construction — "Nutrition & wellness" wraps to two lines
     at every size, exactly as it does in the mock. */
  .screen--corner,
  .screen--join {
    --u: min(0.078125vw, 0.1115svh);
    --frame: calc(var(--u) * 1280);
  }

  /* Full bleed, like every other band on the site. A centred frame reproduced
     the mock's ratios more exactly, but it put empty gutters down both sides
     that matched neither the mock nor the rest of the page, so the blocks run
     edge to edge and the plan cards carry the ratio instead (see below). */
  .meaning__inner,
  .roadmap__inner,
  .conversion__inner {
    max-inline-size: none;
    margin-inline: 0;
  }

  .rooms,
  .roadmap {
    background: #eef3fb;
  }

  /* Every vertical value here scales continuously with svh so a short window
     spends its height on the photographs instead of on padding. The ceilings
     are the reviewed 1280px mock's own numbers, so a tall window is unchanged. */
  .rooms__inner {
    min-block-size: 0;
    justify-content: flex-start;
    padding: clamp(1.75rem, 4.3svh, 3.5rem) 3rem clamp(2rem, 4.6svh, 3.75rem);
  }

  .rooms__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.6svh, 1.375rem);
  }

  .rooms__heading .eyebrow {
    max-inline-size: none;
    padding: 0.625rem 1.125rem;
    background: #f5c518;
    color: #0d2b6b;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .rooms__heading h2 {
    max-inline-size: 20ch;
    margin: 0;
    padding-block-end: 0;
    color: #0d2b6b;
    font-size: min(4.5rem, 7.2svh);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.98;
    text-wrap: balance;
  }

  .rooms__heading .marker-band::before {
    display: none;
  }

  .rooms__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 1.25rem;
    flex: 1 1 auto;
    min-block-size: 0;
    margin-block-start: clamp(1.25rem, 3.4svh, 2.75rem);
  }

  .room {
    min-block-size: 0;
  }

  /* 3:4 is the tile's BASIS, not a ceiling. The row always fills the page, so
     the slot gives up the difference on a short window and takes the surplus on
     a tall one — measured 1.11:1 at 1600x830 through 0.75:1 near 1600x1020 and
     on to 0.60:1 at 1600x1200. Either way the photograph crops through
     object-fit rather than squashing, and the caption keeps its measured
     height, so the picture is the only thing that moves. Capping growth at 3:4
     would just trade the surplus for dead space under the row, which is the
     thing the review asked to remove. */
  .room__slot {
    aspect-ratio: 3 / 4;
    flex: 1 1 auto;
    min-block-size: 0;
  }

  .room__slot:has(img) > .room__slot-label,
  .room__slot:has(img) > .room__slot-brief {
    display: none;
  }

  .room__copy {
    min-block-size: 7.5625rem;
    flex: 0 0 auto;
    gap: 0.5rem;
    padding: 1.125rem 1.125rem 1.375rem;
    background: #0d2b6b;
  }

  .room__copy h3 {
    color: #f5c518;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .room__copy p {
    color: #c6d5f2;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
  }

  .meaning {
    min-block-size: auto;
    background: #1273e0;
  }

  /* The corner panel closes the RIGHT edge. Held on the left it read as a
     floating slab with the headline beside it and the band's whole right
     two-thirds left over; moved across, the same emptiness becomes measured
     margin between the line and the mark that closes the band. The copy is
     placed explicitly rather than reordered in the DOM — the mark is decorative
     and aria-hidden, so only the visual order moves. */
  .meaning__inner {
    grid-template-columns: minmax(0, 1fr) calc(var(--u) * 190);
  }

  /* The block runs edge to edge, so the navy corner is already flush with the
     viewport and needs no bleed of its own. */
  .meaning__mark {
    grid-column: 2;
    grid-row: 1;
    place-items: center;
    border-inline-end: 0;
    border-inline-start: calc(var(--u) * 4) solid #f5c518;
    background: #0d2b6b;
  }

  .meaning__mark img {
    display: none;
  }

  .meaning__mark::before {
    content: "";
    inline-size: calc(var(--u) * 64);
    block-size: calc(var(--u) * 64);
    border-block-start: calc(var(--u) * 20) solid #eef3fb;
    border-inline-end: calc(var(--u) * 20) solid #eef3fb;
  }

  /* The corner screen is one page, so its three bands are a zero-sum split:
     the crisis band gave back ~50px when it stopped repeating the hero line,
     and that height goes to the manifesto rather than to the light section
     below it, which is where the reviewed mock puts it (blue 34%, light 54%,
     crisis 12%). Growing the padding here is what stops the plan block
     inheriting the slack as yet more empty space. */
  .meaning__copy {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-start;
    justify-content: center;
    gap: calc(var(--u) * 20);
    padding: calc(var(--u) * 76) calc(var(--u) * 56) calc(var(--u) * 80);
  }

  .meaning__copy .eyebrow,
  .roadmap__heading .eyebrow,
  .conversion__heading .eyebrow {
    max-inline-size: none;
    padding: calc(var(--u) * 8) calc(var(--u) * 14);
    background: #f5c518;
    color: #0d2b6b;
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: normal;
    white-space: nowrap;
  }

  .meaning h2 {
    margin: 0;
    padding-block-end: 0;
    color: #fff;
    font-size: calc(var(--u) * 62);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .meaning h2:has(> span:last-child > .marker-band:last-child) {
    padding-block-end: 0;
  }

  .meaning .marker-band {
    padding-inline: calc(var(--u) * 12);
    color: #0d2b6b;
  }

  .meaning .marker-band::before {
    inset-inline: 0;
    background: #f5c518;
  }

  /* max(), not the bare mock unit. --u carries an svh term, so on a short window
     this dropped to ~21px — under the 24px WCAG large-text threshold, which is
     the only thing letting muted off-white sit on the brand blue at 3.75:1. The
     base rule pins 1.5rem for exactly this reason and the mock scale was
     overriding it; the floor puts it back without capping the mock on a tall
     window. Measured: 3.75:1 at 21px is a fail, the same colour at 24px is a
     pass. */
  .meaning__body {
    max-inline-size: 46ch;
    margin: 0;
    color: #dce9fb;
    font-size: max(1.5rem, calc(var(--u) * 22));
    font-weight: 500;
    line-height: 1.45;
    text-wrap: pretty;
    white-space: normal;
  }

  /* Even top and bottom. The 56/60 split was drawn against a card row that
     stretched to fill the block; with the cards sized to their own content the
     leftover is real whitespace, and uneven whitespace reads as a mistake. */
  .roadmap__inner {
    align-items: flex-start;
    justify-content: center;
    gap: calc(var(--u) * 22);
    padding: calc(var(--u) * 56);
  }

  .roadmap__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--u) * 22);
  }

  .roadmap__heading h2 {
    margin: 0;
    color: #0d2b6b;
    font-size: calc(var(--u) * 62);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
  }

  .roadmap__support {
    margin: 0;
    color: #31508f;
    font-size: calc(var(--u) * 20);
    font-weight: 600;
    line-height: normal;
  }

  /* Sized to content now. Stretching the row to the page's leftover height was
     what produced a ~250px card holding one word in its top corner and nothing
     underneath — the box was inflated to fill space rather than because it had
     anything in it. Each card now carries a line of detail under the service
     name and takes exactly the height that needs; the leftover goes back to the
     block, where .roadmap__inner splits it evenly above and below. */
  .roadmap__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: calc(var(--u) * 14);
    inline-size: 100%;
    margin-block-start: calc(var(--u) * 14);
  }

  .roadmap-item {
    min-block-size: 0;
    gap: calc(var(--u) * 10);
    padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 24);
  }

  .roadmap-item--current {
    background: #0d2b6b;
    color: #fff;
  }

  .roadmap-item--future {
    background: #dbe4f4;
    color: #31508f;
  }

  .roadmap-item__status {
    font-family: "JetBrains Mono", monospace;
    font-size: calc(var(--u) * 11);
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: normal;
  }

  .roadmap-item--current .roadmap-item__status {
    color: #f5c518;
  }

  /* Full navy, not #5b6f9c. NEXT is the label that tells you a service is not
     live yet, and at 11px on a pale card the old grey-blue was the least
     readable thing on the page — 3.91:1, under the 4.5:1 small-text rule. */
  .roadmap-item--future .roadmap-item__status,
  .roadmap-item--future .roadmap-item__name {
    color: #0d2b6b;
  }

  .roadmap-item__name {
    font-size: calc(var(--u) * 28);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: normal;
  }

  .roadmap-item__detail {
    font-size: calc(var(--u) * 15);
    font-weight: 500;
    line-height: 1.35;
  }

  .roadmap-item--current .roadmap-item__detail {
    color: #c6d5f2;
  }

  .conversion {
    background: #1273e0;
  }

  /* The mock's 1px #d6d4cf outline was its preview frame, not the design. With
     the block centred in a wider screen it would read as a stray beige rectangle
     on the blue, so it goes; the section colour is the block edge now. */
  .conversion__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-content: center;
    align-items: start;
    gap: calc(var(--u) * 48);
    padding: calc(var(--u) * 56) calc(var(--u) * 56) calc(var(--u) * 60);
    border: 0;
  }

  /* Centred against the card, not pinned to the top of it. The heading block is
     ~211px beside a ~582px form, so start-aligning it left a single 486px well
     of blue under three lines of type — the emptiness the review flagged on this
     screen, and it grew by the ~57px the crisis band gave back. Centring does
     not remove the slack (the screen is one page and the form sets its height)
     but it stops it pooling in one corner: the line now sits opposite the middle
     of the card and the space reads as margin instead of a hole. */
  .conversion__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: center;
    gap: calc(var(--u) * 26);
  }

  .conversion__heading h2 {
    margin: 0;
    color: #fff;
    font-size: calc(var(--u) * 56);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.02;
    text-wrap: balance;
  }

  .conversion__heading .marker-band {
    padding-inline: calc(var(--u) * 10);
    color: #0d2b6b;
  }

  .conversion__heading .marker-band::before {
    inset-inline: 0;
    background: #f5c518;
  }

  /* Same 24px large-text floor as .meaning__body, and for the same reason. */
  .conversion__body {
    max-inline-size: 38ch;
    margin: 0;
    color: #dce9fb;
    font-size: max(1.5rem, calc(var(--u) * 21));
    font-weight: 500;
    line-height: 1.45;
  }

  .conversion__forms {
    max-inline-size: none;
    align-self: start;
  }

  .conversion-path {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 22);
    padding: calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 38);
    border: 0;
    background: #eef3fb;
    color: #0d2b6b;
  }

  .conversion-path--member {
    border-block-start: calc(var(--u) * 8) solid #f5c518;
  }

  .conversion-path h3 {
    margin: 0;
    color: #0d2b6b;
    font-size: calc(var(--u) * 34);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: normal;
  }

  /* Tempting to claw back the gap this now-invisible slot leaves under the
     title with a :empty negative margin. Do not: :empty stops matching the
     moment a validation message arrives, so the card grows by a gap and moves
     the submit button 11px under the cursor at the exact moment you clicked it.
     Measured and reverted. The reserve is constant in both states by design. */
  .prototype-disclosure {
    block-size: calc(var(--u) * 41);
    margin: 0;
    padding: calc(var(--u) * 12) calc(var(--u) * 14);
    border: 1px solid #c3d3ec;
    background: #dce9fb;
    color: #31508f;
    font-size: calc(var(--u) * 14);
    font-weight: 400;
    line-height: normal;
  }

  .conversion .prototype-form,
  .conversion .prototype-form fieldset {
    gap: calc(var(--u) * 22);
  }

  .conversion .prototype-form > fieldset {
    padding-block-start: calc(var(--u) * 10);
    padding-block-end: 0;
  }

  .conversion .prototype-form .prototype-role {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 10);
  }

  .prototype-role > legend {
    color: #0d2b6b;
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    line-height: normal;
  }

  .prototype-role__choices {
    display: flex;
    gap: calc(var(--u) * 12);
    margin-block-start: 0;
  }

  .prototype-role__choice {
    display: block;
    flex: 1 1 0;
    min-block-size: 0;
    padding: calc(var(--u) * 15) calc(var(--u) * 16);
    border: 1px solid #c3d3ec;
    background: #fff;
    color: #5b6f9c;
    font-size: calc(var(--u) * 17);
    font-weight: 700;
    line-height: normal;
  }

  .prototype-role__choice:has(input:checked) {
    padding: calc(var(--u) * 15 - 1px) calc(var(--u) * 16 - 1px);
    border: 2px solid #0d2b6b;
    background: #fff;
    color: #0d2b6b;
  }

  .conversion .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--u) * 14);
    row-gap: calc(var(--u) * 22);
  }

  .conversion .field:first-child {
    grid-column: 1 / -1;
  }

  .conversion .field {
    gap: calc(var(--u) * 8);
  }

  .conversion .field label {
    color: #0d2b6b;
    font-size: calc(var(--u) * 15);
    font-weight: 700;
    letter-spacing: normal;
    line-height: normal;
  }

  .conversion .field input {
    block-size: calc(var(--u) * 47);
    min-block-size: calc(var(--u) * 47);
    padding: calc(var(--u) * 14) calc(var(--u) * 16);
    border: 1px solid #c3d3ec;
    background: #fff;
    color: #8fa4c6;
    font-size: calc(var(--u) * 16);
    line-height: calc(var(--u) * 17);
  }

  .conversion .field input::placeholder {
    color: #8fa4c6;
  }

  .conversion-path .button--signal {
    inline-size: 100%;
    min-block-size: 0;
    justify-content: center;
    padding: calc(var(--u) * 18);
    border: 0;
    background: #f5c518;
    color: #0d2b6b;
    font-size: calc(var(--u) * 19);
    font-weight: 800;
    line-height: normal;
  }

  .conversion-path__note {
    color: #31508f;
    font-size: calc(var(--u) * 14);
    font-weight: 600;
    line-height: normal;
  }
}

@media (max-width: 48rem) {
  .conversion .prototype-disclosure {
    block-size: 2.8125rem;
  }
}

@media (max-width: 44.25rem) {
  .conversion .prototype-disclosure {
    block-size: 4.75rem;
  }
}

@media (max-width: 26.375rem) {
  .conversion .prototype-disclosure {
    block-size: 6.6875rem;
  }
}

@media (max-width: 64rem) {
  .concept-page {
    --page-gutter: 2.5rem;
  }

  /* Narrow enough that the two blocks stack; the numbers get the full width. */
  .crisis-band__inner {
    gap: clamp(0.75rem, 2svh, 1.25rem);
  }

  .concept-hero__inner {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    column-gap: 0;
  }

  .concept-hero h1 {
    font-size: clamp(4rem, 7.2vw, 4.75rem);
  }

  .meaning h2 {
    font-size: clamp(3rem, 6.6vw, 4.5rem);
  }

  .rooms__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room__slot {
    min-block-size: 11rem;
  }

  .roadmap__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .concept-page {
    --page-gutter: 1.75rem;
  }

  .site-header {
    inline-size: 100%;
  }

  .site-header__inner {
    min-block-size: 0;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    padding-block: var(--space-lg);
  }

  .site-header__actions {
    flex: 1 1 22rem;
  }

  .concept-hero__inner {
    grid-template-areas:
      "copy"
      "media"
      "lead"
      "details";
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-3xl);
  }

  .concept-hero__copy,
  .concept-hero__media,
  .concept-hero__lead,
  .concept-hero__details {
    max-inline-size: 100%;
  }

  .concept-hero__media {
    max-block-size: none;
  }

  .concept-hero h1 {
    font-size: clamp(3.75rem, 12.5vw, 5.5rem);
  }

  .concept-hero__body {
    max-inline-size: 100%;
  }

  .stats__inner,
  .rooms__inner,
  .roadmap__inner {
    inline-size: 100%;
    padding-block: var(--space-4xl);
  }

  .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats__sources,
  .prototype-disclosure,
  .conversion-path__note {
    line-height: 1.55;
  }

  .prototype-disclosure,
  .conversion-path__note {
    font-size: var(--font-size-support);
  }

  .meaning__inner {
    grid-template-columns: 1fr;
    min-block-size: 0;
  }

  .meaning__mark {
    min-block-size: 7rem;
    place-items: center start;
    padding-inline: var(--page-gutter);
    border-inline-end: 0;
    border-block-end: 0.375rem solid var(--brand-yellow);
  }

  .meaning__mark img {
    inline-size: 4rem;
  }

  .meaning__copy {
    padding: var(--space-4xl) var(--page-gutter);
  }

  .meaning h2 {
    white-space: normal;
  }

  .conversion__inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    padding-block: var(--space-3xl);
  }

  .crisis-band__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--space-xl);
  }

  .concept-footer__signoff {
    align-items: flex-start;
  }
}

@media (max-width: 39rem) {
  .site-header__brand {
    inline-size: min(13rem, 100%);
  }

  .site-header__actions {
    inline-size: 100%;
    flex: 1 0 100%;
    justify-content: stretch;
  }

  .site-header__actions .button {
    flex: 1 1 12rem;
  }

  .concept-hero h1 {
    font-size: clamp(2.625rem, 13.8vw, 3.375rem);
  }

  .prototype-role__choices {
    grid-template-columns: 1fr;
  }

  .concept-hero__headline-line {
    white-space: normal;
  }

  .stats__grid,
  .stats__sources {
    grid-template-columns: 1fr;
  }

  .rooms__grid,
  .roadmap__list {
    grid-template-columns: 1fr;
  }

  .crisis-band__actions {
    inline-size: 100%;
  }

  .crisis-action {
    flex: 1 1 9rem;
  }
}

@media (max-width: 24.375rem) {
  .concept-page {
    --page-gutter: 1rem;
  }

  .section-heading h2,
  .meaning h2,
  .conversion__heading h2 {
    font-size: clamp(2.625rem, 13.5vw, 3.375rem);
  }

  .rooms__heading h2 > span:last-child {
    letter-spacing: -0.11em;
  }

  .prose h1 {
    font-size: clamp(2.625rem, 13.5vw, 3.375rem);
  }
}

@media (max-width: 20rem) {
  .rooms h2 {
    letter-spacing: -0.04em;
  }
}