/* Styles for index.html. The legal pages use page.css instead.
   Paths here are relative to this file, not to the page. */

:root {
  --band-light-ground: #edf1f4;
  --pilot-ground: #f1f3f5;
  --footer-ground: #e4e9ed;
  --band-light-border: #c6d0d8;
  --band-light-ink: #22303b;
  --band-light-muted: #4d5c69;
  --band-light-accent: #27637a;

  --section-title-scale: 1.15;
  --section-title-size: calc(var(--title-page) * var(--section-title-scale));

  /* Shared heading accents preserve the approved hero gradients. */
  --text-gradient-direction: 90deg;
  --text-gradient-blue-stop: 52%;
  --text-gradient-violet-stop: 84%;
  --text-gradient-violet: #6552b9;
  --text-gradient-rose: #9b5a80;
  --text-gradient: linear-gradient(
    var(--text-gradient-direction),
    var(--teal),
    var(--accent) var(--text-gradient-blue-stop),
    var(--text-gradient-violet)
  );
  --text-gradient-smarter: linear-gradient(
    var(--text-gradient-direction),
    var(--teal),
    var(--accent) var(--text-gradient-blue-stop),
    var(--text-gradient-violet) var(--text-gradient-violet-stop),
    var(--text-gradient-rose)
  );
}

/* ---------------------------------------------------------------------------
   Motion. Two moments and no more: the hero arriving, and each block rising as
   it comes into view.

   The reveal is guarded by an attribute the script writes on <html>. Without
   it, a browser with no JavaScript would leave every block at opacity 0 and the
   page would be blank. Hiding first and revealing later has to be something
   only a page that can reveal ever does.
   --------------------------------------------------------------------------- */
@keyframes omRise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-reveals] [data-reveal] {
  opacity: 0;
  transform: translateY(46px) scale(0.985);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
}
[data-reveals] [data-reveal][data-shown] {
  opacity: 1;
  transform: none;
}

/* The hero arrives on its own, without waiting to be scrolled to: it is already
   in view. Each part follows the one above it by a beat. */
.hero-headline,
.hero-actions {
  animation: omRise var(--t-reveal) var(--ease) both;
}
.hero-actions {
  animation-delay: 80ms;
}

/* A visitor who has asked their system for less movement gets none of it. The
   content is identical; only the arrival is removed. */
@media (prefers-reduced-motion: reduce) {
  .hero-headline,
  .hero-actions {
    animation: none;
  }
  [data-reveals] [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Section "Know by week 6". The first section converted from inline styles.
   Names describe what the thing is, never how it looks.
   --------------------------------------------------------------------------- */

/* The shell every section shares: vertical rhythm and side gutter. Twelve
   sections use these exact values. The background alternates between white and
   the sunken surface, so it is a modifier rather than part of the base. */
.band {
  padding: var(--section-rhythm) var(--gutter);
  background: var(--ground);
}
.band--sunken {
  background: var(--ground-alt);
}

/* Preserve the existing section hooks while giving the former dark bands a
   pearl gray palette. These overrides are local to the home page; the shared
   foundation and legal pages retain their own colors. */
.band--dark,
.band--navy,
.site-footer {
  --d-ground: var(--pilot-ground);
  --d-ground-navy: var(--band-light-ground);
  --d-ground-deep: var(--footer-ground);
  --d-border: var(--band-light-border);
  --d-ink: var(--band-light-ink);
  --d-muted: var(--band-light-muted);
  --d-muted-hi: var(--band-light-muted);
  --d-accent: var(--accent);
}
.band--dark,
.band--navy {
  color: var(--d-ink);
}
.band--dark {
  background: var(--d-ground);
}
.band--navy {
  background: var(--d-ground-navy);
}
/* The one blue section. A tint that fades back into the ground, never a flat
   field: the gradient is an accent everywhere else on this page and it stays
   one here. */
.band--tint {
  background: linear-gradient(180deg, var(--accent-wash), var(--ground));
}

/* Two columns side by side, folding to one when the screen cannot hold both. */
.split {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

/* Section headings keep solid ink; selected words share the text gradient. */
.headline {
  font-size: var(--title-page);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.06;
  margin: 0 0 var(--space-4);
  color: var(--ink);
  text-wrap: pretty;
}

/* Body copy under a heading. The last one carries no bottom margin. */
.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-5);
  max-width: var(--measure-lead);
  text-wrap: pretty;
}
.lead:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Sections "A healthier world" and "About us". Both are a block of text beside
   a picture, so they share every class below.
   --------------------------------------------------------------------------- */

/* Same two columns as .split, with a smaller minimum column and a tighter gap. */
.split--narrow {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(32px, 5vw, 64px);
}

/* The single sentence that introduces a section, under its heading. */
.standfirst {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 var(--space-6);
  max-width: var(--measure-standfirst);
}

/* Running body copy. */
.body-copy {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-6);
  max-width: var(--measure-prose);
  text-wrap: pretty;
}

/* One paragraph used to sit 2px lower than the others, which read as an
   accident. One rhythm now. A heading had the same 4px drift and was put back
   on the one rhythm too. */
.body-copy--loose {
  margin-bottom: var(--space-6);
}
.body-copy--last {
  margin-bottom: 0;
}

/* A tinted band repaints the type inside it. These sit after the type rules
   rather than before, so that the more specific selector is also the later
   one and the cascade never has to break a tie. */
.band--dark .headline,
.band--navy .headline {
  color: var(--d-ink);
}
.band--dark .standfirst,
.band--navy .standfirst,
.band--dark .body-copy,
.band--navy .body-copy,
.band--dark .lead,
.band--navy .lead {
  color: var(--d-muted-hi);
}
.band--dark a:not(.btn),
.band--navy a:not(.btn) {
  color: var(--d-accent);
}

/* The link that closes a block of text. It is .link-underline with the space
   above it that a closing link needs, rather than a fourth kind of link: the
   page has three controls and this is one of them. */
.more {
  margin-top: var(--space-5);
}

/* A picture or an animated scene, held in a rounded frame of fixed proportion.
   The proportion comes from the artwork, so it belongs to the modifier. */
.figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}
.figure--impact {
  aspect-ratio: 1007 / 700;
  background: var(--accent-wash);
  /* The picture comes before the words on screen at every width, so this one
     carries no media query. See the note under .figure--about. */
  order: -1;
}
.figure--about {
  aspect-ratio: 4 / 3;
  background: var(--ground-alt);
}

/* Both sections keep their heading first in the document, so a reader who is
   listening to the page meets the subject of the section before the description
   of its picture. Where the picture is drawn is left to the display, and the two
   sections want different things.

   A healthier world draws its picture before the words at every width, in the
   first column on a wide screen and above the words on a phone. That is one
   order for every width, set on .figure--impact above.

   About us draws its picture after the words on a wide screen, in the second
   column on the right, and above them only once the columns have folded into
   one. The 735px is measured, not chosen: it is the widest screen on which the
   .split--narrow grid still stands on a single column. At 736px it already
   holds two, which is where the section first fits two 320px tracks plus the
   gap. Those two numbers have to stay welded together. This rule stood at
   736px, and the section spent that one width with its picture beside the words
   on the left, the only place on the page where it is drawn neither on the
   right nor on top. Change the track or the gap and both have to be measured
   again. */
@media (max-width: 735px) {
  .figure--about {
    order: -1;
  }
}

/* --- The About us scene ---------------------------------------------------
   The picture inside .figure--about is drawn by onc-about-scene.js, which
   builds an SVG and puts it in a div of class .onc-about. These rules used to
   live inside that file, as a single line of text the script turned into a
   <style> tag at run time. Three things were wrong with that: no tool could
   read them, the blue below was a fourth hand-typed copy of the accent, and a
   style tag created by a script is refused outright by a strict security policy.

   The timings are the imported scene's own and were moved as they stood. Only
   the values that are said more than once are named here.

   .onc-js is written by the script on the element it just built, so everything
   under it applies to a scene that is being driven. .is-in is added when the
   scene comes into view. */
.onc-about {
  --glow-rest: 0.75;
  --glow-drift: 0.95;
  --glow-drift-b: 0.92;

  position: relative;
  width: 100%;
  height: 100%;
  background: var(--accent);
  /* The SVG is the only child and is a block, so the line box the div would
     otherwise keep for it is removed rather than left as a gap under it. */
  line-height: 0;
}
/* The custom element itself. An unknown tag is inline until something says
   otherwise, and the script used to say it, writing three properties onto the
   host on its way past. Presentation is not a script's to decide, and a reader
   whose script never ran got an inline element. */
onc-about-scene {
  display: block;
  width: 100%;
  height: 100%;
}
.onc-about svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The two glows lighten what is under them instead of covering it, which is
   what keeps the gradient readable through them. */
.onc-about .oncAU-glowA,
.onc-about .oncAU-glowB {
  mix-blend-mode: screen;
}

/* The wordmark under the disc. Its size is in the units of the drawing, so it
   scales with the picture rather than with the page. */
.onc-about .oncAU-word {
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* The grain laid over everything. It covers the whole picture, so without this
   it would take every click meant for what is underneath. */
.onc-about .oncAU-veil {
  pointer-events: none;
}
/* Every animated part is transformed about its own middle rather than the
   origin of the drawing. */
.onc-about [class^="oncAU"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Hidden until the scene is in view, and only when the script is driving it.
   Without that condition a reader whose script never ran would be left with a
   permanently blank picture. */
.onc-about.onc-js .oncAU-fig,
.onc-about.onc-js .oncAU-glowA,
.onc-about.onc-js .oncAU-glowB {
  opacity: 0;
}

.onc-about.is-in .oncAU-fig {
  animation: oncAU-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* The disc lands, then the wordmark under it. */
.onc-about.is-in .oncAU-f1 {
  animation-delay: 0.24s;
}
.onc-about.is-in .oncAU-f2 {
  animation-delay: 0.33s;
}
/* Each glow fades in, then drifts for as long as the page is open. The two
   drifts have different lengths on purpose: equal ones would beat together. */
.onc-about.is-in .oncAU-glowA {
  animation:
    oncAU-gfade 1.2s ease-out 0.2s both,
    oncAU-driftA 18s ease-in-out 1.4s infinite alternate;
}
.onc-about.is-in .oncAU-glowB {
  animation:
    oncAU-gfade 1.2s ease-out 0.35s both,
    oncAU-driftB 23s ease-in-out 1.55s infinite alternate;
}
.onc-about.is-in .oncAU-mark {
  animation: oncAU-breathe 12s ease-in-out 2s infinite;
}

@keyframes oncAU-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes oncAU-gfade {
  from {
    opacity: 0;
  }
  to {
    opacity: var(--glow-rest);
  }
}
@keyframes oncAU-driftA {
  from {
    opacity: var(--glow-rest);
    transform: none;
  }
  to {
    opacity: var(--glow-drift);
    transform: translate(46px, 64px) scale(1.1);
  }
}
@keyframes oncAU-driftB {
  from {
    opacity: 0.7;
    transform: none;
  }
  to {
    opacity: var(--glow-drift-b);
    transform: translate(-56px, -48px) scale(1.12);
  }
}
/* A movement of half a percent, which reads as breathing rather than scaling. */
@keyframes oncAU-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.005);
  }
}

/* Motion reduced. Every animation above is named again here rather than swept
   away with one wildcard: a wildcard is lighter than the rules it has to beat,
   which is why this block used to carry the only !important of the project.
   The scene still arrives, once, by a plain fade. */
@media (prefers-reduced-motion: reduce) {
  .onc-about.is-in .oncAU-fig,
  .onc-about.is-in .oncAU-glowA,
  .onc-about.is-in .oncAU-glowB,
  .onc-about.is-in .oncAU-mark {
    animation: none;
  }
  .onc-about.onc-js .oncAU-fig {
    opacity: 1;
  }
  .onc-about.onc-js .oncAU-glowA,
  .onc-about.onc-js .oncAU-glowB {
    opacity: var(--glow-rest);
  }
  .onc-about.onc-js {
    opacity: 0;
  }
  .onc-about.onc-js.is-in {
    opacity: 1;
    transition: opacity 0.4s ease-out;
  }
}

/* The photograph filling a figure, and the blue wash laid over it. */
.figure-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.02) brightness(1.02);
}
.figure-wash {
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: 0.18;
}

/* A closing paragraph separated from what precedes it by a hairline. */
.note {
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}

/* Shared section containers. */

/* This one band has no side gutter, because the card row bleeds past it. The
   blocks inside restore the gutter themselves. Must stay after .band. */
.band--flush {
  padding-left: 0;
  padding-right: 0;
}

/* The centered content column a band holds. .split is its two-column version. */
.band-inner {
  max-width: var(--container);
  margin: 0 auto;
}

/* Puts back the side gutter that .band--flush removed. */
.band-inner--gutter {
  padding: 0 var(--gutter);
}

/* A block of text capped at a readable line length. */
.measure {
  max-width: 70ch;
}

/* A standfirst alone in its block: the block already caps the measure and
   nothing follows it, so it carries neither. */
.standfirst--solo {
  max-width: none;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Week-6 trial decisions. Routine imaging leads to three possible next moves.
   Every class, color and animation stays local to the approved composition.
   --------------------------------------------------------------------------- */
.clocks {
  /* Approved week-6 palette, scoped to this section. */
  --week-six-ground: #c8d4df;
  --week-six-surface: #dfe7ee;
  --week-six-ink: #22303b;
  --week-six-muted: #435361;
  --week-six-line: #aebecb;
  --week-six-teal: #08657d;
  --week-six-violet: #5f49ae;
  --week-six-gradient: linear-gradient(
    90deg,
    var(--week-six-teal),
    var(--accent-deep) 52%,
    var(--week-six-violet)
  );
  --week-six-rule: 1px;
  --week-six-stroke: 2px;
  --week-six-heading: clamp(30px, 3.2vw, 44px);
  --week-six-weight: 500;
  --week-six-weight-strong: 600;
  --week-six-leading: 1.5;
  --week-six-title-leading: 1.08;
  --week-six-tracking: -0.028em;
  --week-six-heading-measure: 100%;
  --week-six-card-inset: clamp(20px, 3.2vw, 44px);
  --week-six-panel-ground: #cddae5;
  --week-six-takeaway-leading: 1.4;
  --week-six-week-size: clamp(44px, 4vw, 54px);
  --week-six-late-size: clamp(26px, 2.4vw, 32px);
  --week-six-timeline-height: 140px;
  --week-six-track-top: 100px;
  --week-six-early-position: 27%;
  --week-six-late-position: 83%;
  --week-six-marker: 12px;
  --week-six-marker-ring: 28px;
  --week-six-late-marker: 8px;
  --week-six-round: 50%;
  --week-six-marker-border: #b9ceea;
  --week-six-callout-gap: 18px;
  --week-six-mobile-timeline-height: 220px;
  --week-six-mobile-early: 33%;
  --week-six-mobile-late: 78%;
  --week-six-mobile-indent: 26px;
  --week-six-action-leading: 1.18;
  --week-six-action-size: clamp(21px, 2vw, 24px);
  --week-six-takeaway-size: clamp(20px, 1.7vw, 22px);
  --week-six-copy-measure: 29ch;
  --week-six-draw-duration: 900ms;
  --week-six-pulse-duration: 650ms;
  --week-six-reveal-duration: 450ms;
  --week-six-lens-duration: 1150ms;
  --week-six-action-duration: 650ms;
  --week-six-action-pause: 240ms;
  --week-six-pulse-scale: 2.8;
  --week-six-scan-width: 280px;
  --week-six-image-width: 160px;
  --week-six-image-radius: 10px;
  --week-six-image-ratio: 335 / 340;
  --week-six-image-shadow: 0 12px 28px rgb(34 48 59 / 12%);
  --week-six-image-ground: #162029;
  --week-six-lens-ring: #67dcf2;
  --week-six-lens-rim: 5px;
  --week-six-lens-line: 2.5px;
  --week-six-lens-handle: 13px;
  --week-six-lens-core: 7px;
  --week-six-lens-origin: 805px 310px;
  --week-six-lens-start: 0.72;
  --week-six-lens-overshoot: 1.035;
  --week-six-forks-height: 32px;
  padding: var(--space-6) var(--gutter);
  background: var(--week-six-ground);
  color: var(--week-six-ink);
  scroll-margin-top: var(--nav-height);
}
.week-six-inner {
  max-width: var(--container);
  margin-inline: auto;
}
.week-six-title {
  margin: 0;
  max-width: var(--week-six-heading-measure);
  font-size: var(--week-six-heading);
  font-weight: var(--week-six-weight-strong);
  letter-spacing: var(--week-six-tracking);
  line-height: var(--week-six-title-leading);
  text-wrap: pretty;
}
.week-six-text-accent {
  background: var(--week-six-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.week-six-intro {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--week-six-muted);
  font-size: var(--text-lead);
  line-height: var(--week-six-leading);
}
.week-six-decision {
  position: relative;
  margin: 0;
  background: var(--week-six-surface);
  border: var(--week-six-rule) solid var(--week-six-line);
  border-radius: var(--radius);
}
.week-six-timeline {
  position: relative;
  height: var(--week-six-timeline-height);
  margin: var(--space-6) var(--week-six-card-inset) 0;
}
.week-six-track {
  position: absolute;
  top: var(--week-six-track-top);
  inset-inline: 0;
  height: var(--week-six-stroke);
  background: var(--hairline);
}
.week-six-track::after {
  content: "";
  position: absolute;
  right: 0;
  top: var(--week-six-round);
  width: var(--space-2);
  height: var(--space-2);
  border-top: var(--week-six-stroke) solid var(--week-six-line);
  border-right: var(--week-six-stroke) solid var(--week-six-line);
  transform: translateY(-50%) rotate(45deg);
}
.week-six-early-track,
.week-six-late-track {
  position: absolute;
  inset-block: 0;
  transform-origin: left;
}
.week-six-early-track {
  left: 0;
  width: var(--week-six-early-position);
  background: var(--week-six-gradient);
}
.week-six-late-track {
  left: var(--week-six-early-position);
  right: 0;
  background: var(--week-six-line);
}
.week-six-start,
.week-six-moment {
  position: absolute;
  top: var(--week-six-track-top);
}
.week-six-start {
  left: 0;
}
.week-six-moment--early {
  left: var(--week-six-early-position);
}
.week-six-moment--late {
  left: var(--week-six-late-position);
}
.week-six-start::before {
  content: "";
  position: absolute;
  width: var(--week-six-late-marker);
  height: var(--week-six-late-marker);
  background: var(--week-six-muted);
  border-radius: var(--week-six-round);
  transform: translate(-50%, -25%);
}
.week-six-dot {
  position: absolute;
  width: var(--week-six-marker);
  height: var(--week-six-marker);
  border-radius: var(--week-six-round);
  transform: translate(-50%, calc(-50% + var(--week-six-stroke) / 2));
  background: var(--accent);
}
.week-six-moment--early .week-six-dot::before,
.week-six-moment--early .week-six-dot::after {
  content: "";
  position: absolute;
  border: var(--week-six-rule) solid var(--week-six-marker-border);
  border-radius: var(--week-six-round);
}
.week-six-moment--early .week-six-dot::before {
  inset: calc((var(--week-six-marker) - var(--week-six-marker-ring)) / 2);
}
.week-six-moment--early .week-six-dot::after {
  inset: 0;
  border-color: var(--accent);
  opacity: 0;
}
.week-six-moment--late .week-six-dot {
  width: var(--week-six-late-marker);
  height: var(--week-six-late-marker);
  background: var(--week-six-muted);
}
.week-six-callout {
  position: absolute;
  bottom: var(--week-six-callout-gap);
  transform: translateX(-50%);
  white-space: nowrap;
}
.week-six-moment-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--week-six-weight);
}
.week-six-moment--early .week-six-moment-label {
  color: var(--accent);
}
.week-six-moment--late .week-six-moment-label {
  color: var(--week-six-muted);
}
.week-six-moment-time {
  margin: 0;
  font-size: var(--week-six-week-size);
  font-weight: var(--week-six-weight-strong);
  letter-spacing: var(--week-six-tracking);
  line-height: 1;
}
.week-six-moment--late .week-six-moment-time {
  font-size: var(--week-six-late-size);
  font-weight: var(--week-six-weight);
  color: var(--week-six-muted);
}
.week-six-start-label,
.week-six-result {
  position: absolute;
  top: var(--space-6);
  margin: 0;
  font-size: var(--text-label);
  line-height: var(--week-six-leading);
  color: var(--week-six-muted);
  white-space: nowrap;
}
.week-six-start-label {
  left: 0;
}
.week-six-result {
  left: 0;
  transform: translateX(-50%);
}
.week-six-branches {
  position: absolute;
  top: var(--week-six-track-top);
  left: 0;
  width: 100%;
  height: calc(var(--week-six-timeline-height) - var(--week-six-track-top));
  overflow: visible;
}
.week-six-branches path {
  stroke: var(--accent);
  stroke-width: var(--week-six-rule);
  fill: none;
  vector-effect: non-scaling-stroke;
}
.week-six-branches .week-six-fork--advance {
  stroke: var(--week-six-teal);
}
.week-six-branches .week-six-fork--stop {
  stroke: var(--week-six-violet);
}
.week-six-readout {
  position: relative;
  margin-inline: var(--week-six-card-inset);
}
.week-six-scan {
  width: min(100%, var(--week-six-scan-width));
  margin-inline: auto;
}
.week-six-scan-image {
  display: block;
  width: min(100%, var(--week-six-image-width));
  margin-inline: auto;
  aspect-ratio: var(--week-six-image-ratio);
  overflow: hidden;
  background: var(--week-six-image-ground);
  border-radius: var(--week-six-image-radius);
  box-shadow: var(--week-six-image-shadow);
}
.week-six-scan-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  font-size: var(--text-label);
  color: var(--week-six-muted);
}
.week-six-scan-caption strong {
  color: var(--accent);
  font-weight: var(--week-six-weight-strong);
}
.week-six-magnifier {
  transform-origin: var(--week-six-lens-origin);
}
.week-six-lens-rim {
  fill: none;
  stroke: var(--surface);
  stroke-width: var(--week-six-lens-rim);
}
.week-six-lens-ring {
  fill: none;
  stroke: var(--week-six-lens-ring);
  stroke-width: var(--week-six-lens-line);
}
.week-six-lens-handle {
  stroke: var(--surface);
  stroke-width: var(--week-six-lens-handle);
  stroke-linecap: round;
}
.week-six-lens-handle-core {
  stroke: var(--accent);
  stroke-width: var(--week-six-lens-core);
  stroke-linecap: round;
}
.week-six-lens-focus {
  fill: none;
  stroke: var(--week-six-lens-ring);
  stroke-width: var(--week-six-lens-line);
  stroke-linecap: round;
}
.week-six-decision-branches {
  position: static;
  display: block;
  height: var(--week-six-forks-height);
}
.week-six-decision-branches .week-six-fork--advance {
  stroke: var(--week-six-teal);
}
.week-six-decision-branches .week-six-fork--stop {
  stroke: var(--week-six-violet);
}
.week-six-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: var(--week-six-card-inset);
  padding-bottom: var(--space-5);
}
.week-six-action {
  --week-six-action-accent: var(--week-six-teal);
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-2);
  text-align: center;
}
.week-six-action--adapt {
  --week-six-action-accent: var(--accent);
}
.week-six-action--stop {
  --week-six-action-accent: var(--week-six-violet);
}
.week-six-action::before {
  content: "";
  position: absolute;
  width: var(--week-six-late-marker);
  height: var(--week-six-late-marker);
  top: 0;
  left: var(--week-six-round);
  background: var(--week-six-action-accent);
  border-radius: var(--week-six-round);
  transform: translate(-50%, -50%);
}
.week-six-action-verb {
  display: inline-block;
  position: relative;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--week-six-weight-strong);
  color: var(--week-six-action-accent);
}
.week-six-action-verb::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--week-six-stroke);
  background: currentColor;
  transform-origin: left;
}
.week-six-action h3 {
  margin: 0;
  font-size: var(--week-six-action-size);
  line-height: var(--week-six-action-leading);
  font-weight: var(--week-six-weight);
  letter-spacing: var(--week-six-tracking);
  text-wrap: balance;
}
.week-six-action-copy {
  max-width: var(--week-six-copy-measure);
  margin: var(--space-2) auto 0;
  color: var(--week-six-muted);
  font-size: var(--text-small);
  line-height: var(--week-six-leading);
  text-wrap: pretty;
}
.week-six-takeaway {
  margin: 0;
  padding: var(--space-4) var(--week-six-card-inset);
  border-top: var(--week-six-rule) solid var(--week-six-line);
  background: var(--week-six-panel-ground);
  text-align: center;
}
.week-six-takeaway strong {
  font-size: var(--week-six-takeaway-size);
  line-height: var(--week-six-takeaway-leading);
  color: var(--week-six-ink);
  font-weight: var(--week-six-weight-strong);
  letter-spacing: var(--week-six-tracking);
  text-wrap: balance;
}
@keyframes weekSixFillTrack {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes weekSixFillVertical {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes weekSixDrawBranch {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}
@keyframes weekSixPulseSignal {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(var(--week-six-pulse-scale));
    opacity: 0;
  }
}
@keyframes weekSixReveal {
  from {
    opacity: 0;
    transform: translateY(var(--space-3));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes weekSixRevealMoment {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes weekSixFocusLens {
  0% {
    opacity: 0;
    transform: scale(var(--week-six-lens-start));
  }
  65% {
    opacity: 1;
    transform: scale(var(--week-six-lens-overshoot));
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .week-six-decision[data-enhanced] [data-step]:not([data-shown]) {
    opacity: 0;
  }
  .week-six-decision[data-enhanced] [data-shown] {
    opacity: 1;
  }
  .week-six-decision[data-enhanced] [data-enter] {
    animation: weekSixReveal var(--week-six-reveal-duration) var(--ease)
      backwards;
  }
  .week-six-decision[data-enhanced] .week-six-early-track[data-enter] {
    animation-name: weekSixFillTrack;
    animation-duration: var(--week-six-draw-duration);
  }
  .week-six-decision[data-enhanced] .week-six-moment[data-enter] {
    animation-name: weekSixRevealMoment;
  }
  .week-six-decision[data-enhanced]
    .week-six-moment[data-enter]
    .week-six-dot::after {
    animation: weekSixPulseSignal var(--week-six-pulse-duration) var(--ease)
      backwards;
  }
  .week-six-decision[data-enhanced] path[data-enter] {
    animation-name: weekSixDrawBranch;
  }
  .week-six-decision[data-enhanced] .week-six-magnifier[data-enter] {
    animation-name: weekSixFocusLens;
    animation-duration: var(--week-six-lens-duration);
  }
  .week-six-decision[data-enhanced] .week-six-action[data-enter] {
    animation-duration: var(--week-six-action-duration);
    animation-delay: var(--week-six-action-pause);
  }
}
@media (max-width: 860px) {
  .clocks {
    --week-six-week-size: 46px;
    --week-six-late-size: 28px;
  }
  .week-six-action {
    padding-inline: var(--space-2);
  }
  .week-six-action-copy {
    font-size: var(--text-label);
  }
  .week-six-moment-label {
    font-size: var(--text-label);
  }
}
@media (max-width: 600px) {
  .clocks {
    --week-six-week-size: 44px;
    --week-six-late-size: 26px;
  }
  .week-six-intro {
    font-size: var(--text-body);
  }
  .week-six-timeline {
    height: var(--week-six-mobile-timeline-height);
    margin-left: calc(var(--week-six-card-inset) + var(--space-2));
  }
  .week-six-track {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--week-six-stroke);
    height: auto;
  }
  .week-six-early-track,
  .week-six-late-track {
    inset-inline: 0;
    width: auto;
    transform-origin: top;
  }
  .week-six-early-track {
    top: 0;
    bottom: auto;
    height: var(--week-six-mobile-early);
  }
  .week-six-late-track {
    top: var(--week-six-mobile-early);
    bottom: 0;
    height: auto;
  }
  .week-six-track::after {
    right: var(--week-six-round);
    top: auto;
    bottom: 0;
    transform: translateX(50%) rotate(135deg);
  }
  .week-six-branches {
    display: none;
  }
  .week-six-start {
    top: 0;
    left: 0;
  }
  .week-six-start::before {
    transform: translate(-25%, -50%);
  }
  .week-six-moment {
    left: 0;
  }
  .week-six-moment--early {
    top: var(--week-six-mobile-early);
  }
  .week-six-moment--late {
    top: var(--week-six-mobile-late);
  }
  .week-six-dot {
    transform: translate(calc(-50% + var(--week-six-stroke) / 2), -50%);
  }
  .week-six-callout {
    top: 0;
    bottom: auto;
    left: var(--week-six-mobile-indent);
    transform: translateY(-50%);
  }
  .week-six-start-label {
    top: calc(var(--space-2) * -1);
    left: var(--week-six-mobile-indent);
  }
  .week-six-result {
    top: var(--space-7);
    left: var(--week-six-mobile-indent);
    transform: none;
  }
  .week-six-readout {
    margin-top: var(--space-4);
  }
  .week-six-scan-caption {
    font-size: var(--text-fine);
  }
  .week-six-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
  }
  .week-six-action {
    text-align: left;
    padding: 0 0 0 var(--space-4);
    border-left: var(--week-six-stroke) solid var(--week-six-action-accent);
  }
  .week-six-action::before {
    display: none;
  }
  .week-six-action-verb {
    margin-bottom: var(--space-2);
  }
  .week-six-action-copy {
    margin-left: 0;
    max-width: none;
    font-size: var(--text-small);
  }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .week-six-decision[data-enhanced] .week-six-early-track[data-enter] {
    animation-name: weekSixFillVertical;
  }
}

/* ---------------------------------------------------------------------------
   Imaging biomarkers. Five colored panels form a selectable row. Every card
   contributes to the shared height; selection changes depth, never layout.
   Without JavaScript, the complete content remains in a responsive grid.
   --------------------------------------------------------------------------- */
.bio-section {
  --bio-volume: #076775;
  --bio-volume-deep: #06394e;
  --bio-texture: #6635a6;
  --bio-texture-deep: #382161;
  --bio-shape: #a63671;
  --bio-shape-deep: #631b47;
  --bio-organs: #1d63b7;
  --bio-organs-deep: #153b72;
  --bio-body: #147457;
  --bio-body-deep: #114b3d;
  --bio-card-ink: #ffffff;
  --bio-card-muted: #eef3ff;
  --bio-rule: 1px;
  --bio-card-radius: 16px;
  --bio-tab-radius: 8px;
  --bio-selection-gap: 2px;
  --bio-selection-ring: 4px;
  --bio-gradient-angle: 115deg;
  --bio-card-title-size: 29px;
  --bio-kind-size: 11px;
  --bio-body-size: 16px;
  --bio-small-size: 14px;
  --bio-tracking: -0.045em;
  --bio-label-tracking: 0.1em;
  --bio-title-leading: 1.12;
  --bio-body-leading: 1.5;
  --bio-weight: 600;
  --bio-control-height: 48px;
  --bio-arrow-size: 22px;
  --bio-card-width: 360px;
  --bio-image-height: 224px;
  --bio-card-padding: var(--space-6);
  --bio-copy-height: 136px;
  --bio-static-image-height: 145px;
  --bio-step-near: 76%;
  --bio-step-far: 133%;
  --bio-scale-near: 0.85;
  --bio-scale-far: 0.7;
  --bio-lift-near: var(--space-4);
  --bio-lift-far: var(--space-7);
  --bio-depth-active: 3;
  --bio-depth-near: 2;
  --bio-depth-far: 1;
  --bio-duration: 520ms;
  --bio-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bio-card-shadow: 0 8px 20px #0c1d3614;
  --bio-active-shadow: 0 24px 42px -14px #0c1d3640;
  --bio-card-outline: #ffffff4d;
  overflow: clip;
  background: var(--surface);
}
.bio-heading {
  margin-bottom: var(--space-7);
}
.bio-heading .headline {
  font-size: var(--section-title-size);
  letter-spacing: var(--bio-tracking);
}
.bio-heading .standfirst {
  font-size: var(--bio-body-size);
  max-width: var(--measure-prose);
}
[data-bio-color="volume"] {
  --bio-color: var(--bio-volume);
  --bio-color-deep: var(--bio-volume-deep);
}
[data-bio-color="texture"] {
  --bio-color: var(--bio-texture);
  --bio-color-deep: var(--bio-texture-deep);
}
[data-bio-color="shape"] {
  --bio-color: var(--bio-shape);
  --bio-color-deep: var(--bio-shape-deep);
}
[data-bio-color="organs"] {
  --bio-color: var(--bio-organs);
  --bio-color-deep: var(--bio-organs-deep);
}
[data-bio-color="body"] {
  --bio-color: var(--bio-body);
  --bio-color-deep: var(--bio-body-deep);
}
.bio-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
}
.bio-card {
  position: relative;
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--bio-card-radius);
  color: var(--bio-card-ink);
  background: linear-gradient(
    var(--bio-gradient-angle),
    var(--bio-color),
    var(--bio-color-deep)
  );
}
.bio-card-media {
  height: var(--bio-static-image-height);
}
.bio-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bio-card-copy {
  margin-top: var(--space-5);
}
.bio-card-kind {
  margin: 0 0 var(--space-3);
  font-size: var(--bio-kind-size);
  font-weight: var(--bio-weight);
  letter-spacing: var(--bio-label-tracking);
  line-height: var(--bio-body-leading);
  text-transform: uppercase;
}
.bio-card-kind,
.bio-card-text {
  color: var(--bio-card-muted);
}
.bio-card-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lead);
  font-weight: var(--bio-weight);
  line-height: var(--bio-title-leading);
  letter-spacing: var(--bio-tracking);
}
.bio-card-text {
  margin: 0;
  font-size: var(--bio-small-size);
  line-height: var(--bio-body-leading);
}
.bio-card-select {
  position: absolute;
  inset: 0;
  z-index: var(--bio-depth-active);
  width: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.bio-controls {
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.bio-controls:not([hidden]) {
  display: flex;
}
.bio-tabs {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bio-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--bio-control-height);
  padding: var(--space-3);
  border: var(--bio-rule) solid var(--hairline);
  border-radius: var(--bio-tab-radius);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--bio-small-size);
  line-height: var(--bio-body-leading);
  cursor: pointer;
}
.bio-tab:hover {
  border-color: var(--ink);
  background: var(--ground-alt);
}
.bio-tab[aria-pressed="true"] {
  border-color: var(--bio-color);
  background: var(--bio-color);
  color: var(--bio-card-ink);
  box-shadow:
    0 0 0 var(--bio-selection-gap) var(--surface),
    0 0 0 var(--bio-selection-ring) var(--bio-color);
}
.bio-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--bio-control-height);
  height: var(--bio-control-height);
  padding: 0;
  border: var(--bio-rule) solid var(--hairline);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--bio-arrow-size);
  cursor: pointer;
}
.bio-arrow:hover {
  border-color: var(--ink);
  background: var(--ground-alt);
}
.bio-announcement,
.bio-legend {
  position: absolute;
  width: var(--bio-rule);
  height: var(--bio-rule);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-bio-active] .bio-stage {
  touch-action: pan-y pinch-zoom;
  user-select: none;
  cursor: grab;
}
[data-bio-active] .bio-cards {
  grid-template-columns: minmax(0, var(--bio-card-width));
  justify-content: center;
  gap: 0;
  padding-block: var(--space-3) var(--space-5);
  isolation: isolate;
}
[data-bio-active] .bio-card {
  --bio-offset: 0%;
  --bio-lift: 0px;
  --bio-scale: 1;
  grid-area: 1 / 1;
  padding: var(--bio-card-padding);
  box-shadow: var(--bio-card-shadow);
  text-align: center;
  transform: translateX(var(--bio-offset)) translateY(var(--bio-lift))
    scale(var(--bio-scale));
}
[data-bio-active] .bio-card-media {
  height: var(--bio-image-height);
}
[data-bio-active] .bio-card-copy {
  min-height: var(--bio-copy-height);
  margin-top: var(--space-4);
}
[data-bio-active] .bio-card-title {
  font-size: var(--bio-card-title-size);
}
[data-bio-active] .bio-card-text {
  font-size: var(--bio-body-size);
}
.bio-card[data-bio-position="far-previous"],
.bio-card[data-bio-position="far-next"] {
  --bio-lift: var(--bio-lift-far);
  --bio-scale: var(--bio-scale-far);
  z-index: var(--bio-depth-far);
}
.bio-card[data-bio-position="previous"],
.bio-card[data-bio-position="next"] {
  --bio-lift: var(--bio-lift-near);
  --bio-scale: var(--bio-scale-near);
  z-index: var(--bio-depth-near);
}
.bio-card[data-bio-position="far-previous"] {
  --bio-offset: calc(-1 * var(--bio-step-far));
}
.bio-card[data-bio-position="previous"] {
  --bio-offset: calc(-1 * var(--bio-step-near));
}
.bio-card[data-bio-position="next"] {
  --bio-offset: var(--bio-step-near);
}
.bio-card[data-bio-position="far-next"] {
  --bio-offset: var(--bio-step-far);
}
.bio-card[data-current] {
  z-index: var(--bio-depth-active);
  box-shadow: var(--bio-active-shadow);
  outline: var(--bio-rule) solid var(--bio-card-outline);
  outline-offset: calc(-1 * var(--bio-rule));
}
.bio-card[data-current] .bio-card-select {
  cursor: grab;
}
.bio-stage.is-dragging,
.bio-stage.is-dragging .bio-card-select {
  cursor: grabbing;
}
@media (prefers-reduced-motion: no-preference) {
  [data-bio-active] .bio-card {
    transition:
      transform var(--bio-duration) var(--bio-ease),
      box-shadow var(--bio-duration) var(--bio-ease);
  }
}
@media (max-width: 1000px) {
  .bio-section {
    --bio-card-width: 320px;
    --bio-card-title-size: 26px;
    --bio-card-padding: var(--space-5);
    --bio-image-height: 210px;
  }
  .bio-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .bio-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
@media (max-width: 600px) {
  .bio-section {
    --bio-card-width: 72vw;
    --bio-card-title-size: 25px;
    --bio-image-height: 190px;
    --bio-card-padding: var(--space-4);
    --bio-copy-height: 146px;
    --bio-small-size: 12px;
    --bio-body-size: 14px;
  }
  .bio-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .bio-controls:not([hidden]) {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .bio-tabs {
    order: -1;
    flex-basis: 100%;
    gap: var(--space-1);
  }
  .bio-tab {
    padding: var(--space-2);
  }
  .bio-card[data-bio-position="far-previous"],
  .bio-card[data-bio-position="far-next"] {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ---------------------------------------------------------------------------
   Sections "Navigation" and "Hero".

   Several classes below are written twice, once plain and once with :hover.
   The reason is the same as for .more: the page-wide rule a:hover outranks a
   plain class, while the style attribute it replaces outranked a:hover. The
   twin repeats only the properties the attribute actually set, so a link looks
   under the pointer exactly as it looks today.

   Literal colors kept as written, with no token invented for them: #FFFFFF on
   white ink over the gradient, and the translucent whites of the glows, the
   outline button and the scroll cue.
   --------------------------------------------------------------------------- */

/* The bar that stays at the top of the screen. It is translucent and blurred
   rather than opaque, so the page reads as one surface passing behind it. It
   condenses on scroll: site.js writes a data attribute, the padding is here.
   The hairline stays visible from the first view. */
.site-nav {
  --nav-rule-width: 1px;

  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(var(--ground-rgb), 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--nav-rule-width) solid var(--hairline);
  transition:
    transform var(--t-element) var(--ease),
    border-color var(--t-element) var(--ease),
    box-shadow var(--t-element) var(--ease),
    visibility 0s linear;
}

/* The bar leaves while the reader goes down and comes back when they climb, on
   every screen: held at the top of the window it covers the page for the whole
   visit, and on a phone, where it holds three rows, it covers a third of it.
   site.js decides when; the slide itself belongs here. */
.site-nav[data-hidden] {
  transform: translateY(-100%);
  /* Off the screen is not enough: a bar that is merely moved still takes the
     keyboard through its links. Hidden once the slide is over, so the movement
     is still seen. */
  visibility: hidden;
  transition:
    transform var(--t-element) var(--ease),
    visibility 0s linear var(--t-element);
}

/* The three bars that bring it back. Transparent, as asked: the page shows
   through it, and only the strokes are drawn. It exists on a narrow screen and
   only while the bar is away, so the two never sit on top of one another. */
.nav-toggle {
  display: none;
}
@media (max-width: 860px) {
  .nav-toggle {
    position: fixed;
    z-index: calc(var(--z-nav) + 1);
    top: var(--space-2);
    right: var(--gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* The size a finger needs. WCAG 2.1 asks for 44px, and the strokes inside
       stay at 24px whatever the button measures. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--t-element) var(--ease),
      visibility 0s linear var(--t-element);
  }
  .site-nav[data-hidden] + .nav-toggle {
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--t-element) var(--ease),
      visibility 0s linear;
  }

  /* Solid ink keeps the transparent menu control visible on the light bands. */
  .nav-toggle-icon {
    color: var(--band-light-ink);
  }
}

/* The single row inside the bar. It wraps on a narrow screen, so the height is
   a minimum and not a fixed value. The vertical padding is what condenses. */
.nav-bar {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
  min-height: var(--nav-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-7);
  transition: padding var(--t-element) var(--ease);
}
.site-nav[data-condensed] .nav-bar {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.site-nav[data-condensed] {
  border-bottom-color: var(--hairline);
  box-shadow:
    0 1px 0 rgba(20, 23, 28, 0.03),
    0 10px 30px rgba(20, 23, 28, 0.06);
}

/* The badge and the company name, together as one link back to the top. */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  white-space: nowrap;
}
.nav-brand:hover {
  text-decoration: none;
}

/* Reuse the tab's SVG so the page and tab share the exact same brand mark. */
.nav-mark {
  --nav-mark-size: 32px;

  display: block;
  width: var(--nav-mark-size);
  height: var(--nav-mark-size);
  flex: none;
}

/* The company name, set in wide letter spacing. */
.nav-wordmark {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink);
}

/* The right-hand group: three section links, the Explore button, the pilot
   button. */
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* One link in the bar. Its hover is a faded rectangle of the gradient rather
   than an underline or a color swap: it lights the whole target, so the thing a
   pointer is over is unmistakable. Pressing it pushes it down one pixel. */
.nav-link,
.nav-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border: none;
  border-radius: var(--radius);
  background: none;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--t-control) var(--ease),
    color var(--t-control) var(--ease),
    transform var(--t-micro) var(--ease);
}
.nav-link:hover,
.nav-more:hover {
  background: linear-gradient(
    120deg,
    rgba(var(--gradient-cyan-rgb), 0.16),
    rgba(var(--accent-rgb), 0.16) 55%,
    rgba(var(--gradient-violet-rgb), 0.16)
  );
  color: var(--accent);
  text-decoration: none;
}
.nav-link:active,
.nav-more:active {
  transform: translateY(1px);
  background: linear-gradient(
    120deg,
    rgba(var(--gradient-cyan-rgb), 0.28),
    rgba(var(--accent-rgb), 0.26) 55%,
    rgba(var(--gradient-violet-rgb), 0.26)
  );
}
/* The filled button in the bar: the primary control, one size down. */
.nav-cta {
  padding: 11px 20px;
  font-size: var(--text-small);
  margin-left: var(--space-2);
}

/* The Explore panel, closed at rest. site.js measures the content and writes
   the open height onto the element.

   It hangs under the bar instead of standing in the flow of the page. In the
   flow, opening it pushed everything below down by its own height, 240px on a
   wide screen, and the browser answered that jump by scrolling to keep the
   reading in place. The bar reads a scroll as the reader going down, so it left;
   leaving took the pointer off Explore, which closed the panel, which pushed the
   page back, which brought the bar back under the pointer, which opened the
   panel again. The bar rocked up and down for as long as the pointer stayed
   there, and could not be reached. Out of the flow, opening it moves nothing. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  transition:
    max-height 0.24s ease-out,
    opacity 0.2s ease-out;
}
.nav-panel-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(32px, 4vw, 52px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(28px, 4vw, 56px);
}

/* One column of the panel: a small heading, then its links. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-group-title {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--faint);
}

/* Panel links use the same compact type size as the navigation bar. */
.nav-panel-link {
  font-size: var(--text-small);
  color: var(--ink);
  text-decoration: none;
}
.nav-panel-link:hover {
  color: var(--ink);
  text-decoration: none;
}

/* The opening pairs a mostly black headline with a single radiology monitor.
   The image blends into the neutral ground without a frame. */
.hero {
  --hero-columns: 1.12fr 1fr;
  --hero-title-size: clamp(42px, 4.7vw, 68px);
  --hero-title-tablet: clamp(36px, 11.8vw, 68px);
  --hero-title-weight: 600;
  --hero-title-leading: 1.04;
  --hero-title-tracking: -0.035em;
  --hero-title-measure: 18ch;
  --hero-gap: clamp(32px, 4vw, 64px);
  --hero-padding: clamp(64px, 9vh, 108px);
  --hero-actions-top: clamp(32px, 5vh, 48px);
  --hero-image-ratio: 1;
  --hero-image-max-height: 460px;
  --hero-image-brightness: 1.04;
  --hero-image-fade-start: 4%;
  --hero-image-fade-end: 96%;
  --hero-mask-opaque: #000000;
  --hero-overlay-inset: 0;
  --hero-overlay-size: 100%;
  position: relative;
  overflow: hidden;
  background: var(--ground);
  padding: var(--hero-padding) var(--gutter);
}

/* The image precedes the heading and actions on phones and tablets. */
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--hero-columns);
  align-items: center;
  gap: var(--hero-gap);
  max-width: var(--container);
  margin: 0 auto;
}
.hero-copy,
.hero-media {
  min-width: 0;
}

/* The page's only h1. One weight, not two: the emphasis on "faster" and
   "smarter" is carried by color now, so setting them bolder as well would say
   the same thing twice. */
.hero-headline {
  font-weight: var(--hero-title-weight);
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-leading);
  letter-spacing: var(--hero-title-tracking);
  color: var(--ink);
  margin: 0;
  max-width: var(--hero-title-measure);
  text-wrap: pretty;
}

/* The hero and section headings share the same text gradient. */
.hero-emphasis,
.roi-emphasis,
.score-emphasis,
.therapy-emphasis,
.bio-emphasis,
.platform-emphasis {
  background-image: var(--text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-emphasis--smarter {
  background-image: var(--text-gradient-smarter);
}

.therapy-emphasis {
  --text-gradient-overhang: calc(-1 * var(--panel-tight));
}
.bio-emphasis {
  --text-gradient-overhang: calc(-1 * var(--bio-tracking));
}
.therapy-emphasis,
.bio-emphasis {
  /* Reserve paint space for the final glyph without adding visible spacing. */
  padding-inline-end: var(--text-gradient-overhang);
  margin-inline-end: calc(-1 * var(--text-gradient-overhang));
}

/* Keep the period inside the paint box so negative tracking cannot clip the
   final letter. Its own text fill preserves the heading's dark punctuation. */
.roi-dot,
.title-dot {
  -webkit-text-fill-color: currentColor;
}
.roi-dot {
  color: var(--roi-heading-ink);
}
.hero-visual {
  position: relative;
}
.hero-connectors {
  position: absolute;
  inset: var(--hero-overlay-inset);
  width: var(--hero-overlay-size);
  height: var(--hero-overlay-size);
  object-fit: contain;
  pointer-events: none;
}
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--hero-image-ratio);
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: brightness(var(--hero-image-brightness));
  mask-image: linear-gradient(
    to bottom,
    transparent,
    var(--hero-mask-opaque) var(--hero-image-fade-start),
    var(--hero-mask-opaque) var(--hero-image-fade-end),
    transparent
  );
}

/* The row of controls under the heading. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--hero-actions-top);
}
@media (max-width: 860px) {
  .hero {
    --hero-columns: minmax(0, 1fr);
    --hero-title-size: var(--hero-title-tablet);
    --hero-title-leading: 1.06;
    --hero-stack-gap: var(--space-2);
    --hero-media-order: 1;
    --hero-headline-order: 2;
    --hero-actions-order: 3;
  }
  .hero-copy {
    display: contents;
  }
  .hero-inner {
    row-gap: var(--hero-stack-gap);
  }
  .hero-headline {
    order: var(--hero-headline-order);
    max-width: none;
    text-wrap: balance;
  }
  .hero-media {
    order: var(--hero-media-order);
  }
  .hero-image {
    max-height: var(--hero-image-max-height);
  }
  .hero-actions {
    order: var(--hero-actions-order);
    /* Preserve the larger heading-to-actions gap while tightening the image gap. */
    margin-top: calc(var(--hero-gap) - var(--hero-stack-gap));
  }
}

/* ---------------------------------------------------------------------------
   Sections "Therapy areas" and "Evidence". Both open with a heading and one
   sentence, then a list or a grid, so they reuse .band-inner, .measure and
   .standfirst rather than naming those a second time.
   --------------------------------------------------------------------------- */

/* A row of equal items that folds when the screen cannot hold them. The gap and
   the space above depend on what the row holds, so they live in the modifier. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.card-grid--metrics {
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(32px, 4.5vh, 48px);
}

/* The approved score and therapy panels share their typography and edges. */
.score-section,
.treatments-section {
  --panel-heading: #132c50;
  --panel-edge: #bed2ed;
  --panel-rule: 1px;
  --panel-radius: 8px;
  --panel-title-size: clamp(36px, 4vw, 54px);
  --panel-tight: -0.055em;
  --panel-leading: 1.1;
  --panel-body-leading: 1.6;
  --panel-anchor-offset: calc(var(--nav-height) + var(--space-3));
  padding-block: var(--space-9);
}
.score-section,
.use-cases,
.case,
.treatments-section {
  scroll-margin-top: var(--panel-anchor-offset);
}

/* The approved therapy carousel. Its plain HTML shows all four cards. */
.therapy-cinema {
  --therapy-ground: #eaf0f5;
  --therapy-ground-blue: #d4e1ed;
  --therapy-ink: #142e4c;
  --therapy-muted: #52657a;
  --therapy-blue: #095bc4;
  --therapy-paper: #ffffff;
  --therapy-panel: #0b1c32;
  --therapy-panel-teal: #0a2532;
  --therapy-panel-violet: #191d38;
  --therapy-panel-mixed: #111f35;
  --therapy-panel-ink: #f1f6ff;
  --therapy-panel-muted: #bbcbe0;
  --therapy-line: #b6c7d7;
  --therapy-panel-line: rgb(198 218 246 / 24%);
  --therapy-stage-glow: rgb(250 253 255 / 85%);
  --therapy-s1: 4px;
  --therapy-s3: 12px;
  --therapy-s4: 16px;
  --therapy-s5: 24px;
  --therapy-s6: 32px;
  --therapy-s7: 40px;
  --therapy-s8: 48px;
  --therapy-zero: 0px;
  --therapy-rule: 1px;
  --therapy-radius: 18px;
  --therapy-text-small: 13px;
  --therapy-text-body: 16px;
  --therapy-title: clamp(36px, 4.3vw, 60px);
  --therapy-panel-title: clamp(25px, 2.8vw, 39px);
  --therapy-leading: 1.5;
  --therapy-title-leading: 1.08;
  --therapy-tight: -0.05em;
  --therapy-weight-medium: 500;
  --therapy-focus: 3px;
  --therapy-stage-height: calc(
    var(--therapy-card-height) +
    var(--therapy-stage-clearance)
  );
  --therapy-stage-clearance: 50px;
  --therapy-stage-max: 1440px;
  --therapy-card-width: min(58vw, 600px);
  --therapy-card-height: calc(
    var(--therapy-art-height) +
    var(--therapy-copy-height)
  );
  --therapy-copy-height: 145px;
  --therapy-photo-ratio: 1.5;
  --therapy-card-top: 16px;
  --therapy-art-height: calc(
    var(--therapy-card-width) /
    var(--therapy-photo-ratio)
  );
  --therapy-perspective: 1400px;
  --therapy-side-offset: 83%;
  --therapy-side-depth: -220px;
  --therapy-side-turn: 48deg;
  --therapy-side-scale: 0.9;
  --therapy-back-depth: -750px;
  --therapy-back-turn: 180deg;
  --therapy-back-scale: 0.65;
  --therapy-side-brightness: 0.64;
  --therapy-duration: 720ms;
  --therapy-ease: cubic-bezier(0.22, 0.68, 0.17, 1);
  --therapy-shadow:
    0 22px 45px rgb(17 42 75 / 23%), 0 3px 8px rgb(17 42 75 / 12%);
  --therapy-arrow-size: 52px;
  --therapy-arrow-offset: max(
    28px,
    calc((100% - var(--therapy-card-width)) / 2 - 72px)
  );
  --therapy-icon-size: 24px;
  --therapy-icon-stroke: 1.6;
  --therapy-orbit-width: 1060px;
  --therapy-orbit-height: 120px;
  --therapy-orbit-top: calc(
    var(--therapy-card-height) -
    var(--therapy-orbit-rise)
  );
  --therapy-orbit-rise: 46px;
  --therapy-orbit-alpha: 0.55;
  --therapy-mobile-copy-height: 175px;
  --therapy-mobile-stage-clearance: calc(
    var(--therapy-s5) +
    var(--therapy-arrow-size)
  );
  --therapy-mobile-title: 30px;
  --therapy-mobile-panel-title: 29px;
  --therapy-phone-title: 33px;
  --therapy-tablet-arrow-size: 44px;
}
.therapy-cinema {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  color: var(--therapy-ink);
  padding: var(--therapy-s8) 0 var(--therapy-s7);
  background:
    radial-gradient(
      ellipse at 50% 55%,
      var(--therapy-stage-glow),
      transparent 65%
    ),
    linear-gradient(155deg, var(--therapy-ground), var(--therapy-ground-blue));
}
.therapy-intro {
  position: relative;
  text-align: center;
  padding: 0 var(--therapy-s5);
}
.therapy-intro h2 {
  font-size: var(--therapy-title);
  line-height: var(--therapy-title-leading);
  letter-spacing: var(--therapy-tight);
  font-weight: var(--therapy-weight-medium);
  margin: 0;
}
.therapy-standfirst {
  margin: var(--therapy-s5) 0 var(--therapy-s6);
  font-size: var(--therapy-text-body);
  color: var(--therapy-muted);
  line-height: var(--therapy-leading);
}
.therapy-stage {
  position: relative;
  max-width: var(--therapy-stage-max);
  margin: 0 auto;
}
.therapy-reel {
  display: grid;
  gap: var(--therapy-s5);
  justify-items: center;
  padding: var(--therapy-s4) var(--therapy-s5) var(--therapy-s6);
}
.therapy-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--therapy-art-height) minmax(0, 1fr);
  width: var(--therapy-card-width);
  min-height: var(--therapy-card-height);
  overflow: hidden;
  border: var(--therapy-rule) solid var(--therapy-panel-line);
  border-radius: var(--therapy-radius);
  background: var(--therapy-panel);
  color: var(--therapy-panel-ink);
  box-shadow: var(--therapy-shadow);
}
.therapy-theme-teal {
  --therapy-panel: var(--therapy-panel-teal);
}
.therapy-theme-violet {
  --therapy-panel: var(--therapy-panel-violet);
}
.therapy-theme-mixed {
  --therapy-panel: var(--therapy-panel-mixed);
}
.therapy-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: var(--therapy-s3);
  padding: var(--therapy-s5) var(--therapy-s6);
  position: relative;
  z-index: 1;
}
.therapy-panel h3 {
  font-weight: var(--therapy-weight-medium);
  font-size: var(--therapy-panel-title);
  line-height: var(--therapy-title-leading);
  letter-spacing: var(--therapy-tight);
  margin: 0;
}
.therapy-description {
  font-size: var(--therapy-text-body);
  color: var(--therapy-panel-muted);
  line-height: var(--therapy-leading);
  margin: 0;
}
.therapy-art {
  margin: 0;
  position: relative;
  min-width: 0;
  background: var(--therapy-panel);
}
.therapy-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--therapy-panel), transparent 25%);
  pointer-events: none;
}
.therapy-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.therapy-orbit {
  display: none;
}
.therapy-cinema[data-therapy-ready] .therapy-stage {
  height: var(--therapy-stage-height);
  touch-action: pan-y pinch-zoom;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.therapy-cinema[data-therapy-ready] .therapy-stage.is-dragging {
  cursor: grabbing;
}
.therapy-cinema[data-therapy-ready] .therapy-reel {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  perspective: var(--therapy-perspective);
}
.therapy-cinema[data-therapy-ready] .therapy-panel {
  position: absolute;
  top: var(--therapy-card-top);
  left: calc((100% - var(--therapy-card-width)) / 2);
  height: var(--therapy-card-height);
  min-height: 0;
  backface-visibility: hidden;
  transition:
    transform var(--therapy-duration) var(--therapy-ease),
    filter var(--therapy-duration) var(--therapy-ease);
}
.therapy-cinema[data-therapy-ready] .is-active {
  transform: translate3d(
      var(--therapy-zero),
      var(--therapy-zero),
      var(--therapy-zero)
    )
    rotateY(0deg);
  opacity: 1;
  filter: brightness(1);
  z-index: 3;
  cursor: auto;
}
.therapy-cinema[data-therapy-ready] .is-previous {
  transform: translate3d(
      calc(-1 * var(--therapy-side-offset)),
      var(--therapy-zero),
      var(--therapy-side-depth)
    )
    rotateY(var(--therapy-side-turn)) scale(var(--therapy-side-scale));
  opacity: 1;
  filter: brightness(var(--therapy-side-brightness));
  z-index: 2;
  pointer-events: none;
}
.therapy-cinema[data-therapy-ready] .is-next {
  transform: translate3d(
      var(--therapy-side-offset),
      var(--therapy-zero),
      var(--therapy-side-depth)
    )
    rotateY(calc(-1 * var(--therapy-side-turn)))
    scale(var(--therapy-side-scale));
  opacity: 1;
  filter: brightness(var(--therapy-side-brightness));
  z-index: 2;
  pointer-events: none;
}
.therapy-cinema[data-therapy-ready] .is-back {
  transform: translate3d(
      var(--therapy-zero),
      var(--therapy-zero),
      var(--therapy-back-depth)
    )
    rotateY(var(--therapy-back-turn)) scale(var(--therapy-back-scale));
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.therapy-cinema[data-therapy-ready] .therapy-orbit {
  display: block;
  position: absolute;
  top: var(--therapy-orbit-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(95%, var(--therapy-orbit-width));
  height: var(--therapy-orbit-height);
  border: var(--therapy-rule) solid var(--therapy-line);
  border-radius: 50%;
  opacity: var(--therapy-orbit-alpha);
}
.therapy-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.therapy-controls[hidden] {
  display: none;
}
.therapy-arrow {
  font: inherit;
  position: absolute;
  top: calc(
    var(--therapy-card-top) +
    (var(--therapy-card-height) - var(--therapy-arrow-size)) /
    2
  );
  z-index: 4;
  width: var(--therapy-arrow-size);
  height: var(--therapy-arrow-size);
  border: var(--therapy-rule) solid var(--therapy-line);
  border-radius: 50%;
  background: var(--therapy-paper);
  color: var(--therapy-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.therapy-arrow:hover {
  background: var(--therapy-ink);
  color: var(--therapy-paper);
  border-color: var(--therapy-ink);
}
.therapy-arrow.therapy-previous {
  left: var(--therapy-arrow-offset);
}
.therapy-arrow.therapy-next {
  right: var(--therapy-arrow-offset);
}
.therapy-arrow svg {
  width: var(--therapy-icon-size);
  height: var(--therapy-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--therapy-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.therapy-announcement {
  position: absolute;
  width: var(--therapy-rule);
  height: var(--therapy-rule);
  padding: 0;
  margin: calc(-1 * var(--therapy-rule));
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 860px) {
  .therapy-cinema {
    --therapy-card-width: 70vw;
    --therapy-panel-title: var(--therapy-mobile-title);
    --therapy-arrow-size: var(--therapy-tablet-arrow-size);
    --therapy-arrow-offset: var(--therapy-s4);
    --therapy-orbit-height: 88px;
  }
  .therapy-cinema {
    padding-top: var(--therapy-s8);
  }
  .therapy-cinema[data-therapy-ready] .therapy-stage,
  .therapy-cinema[data-therapy-ready] .is-active {
    cursor: grab;
  }
  .therapy-copy {
    padding: var(--therapy-s5);
  }
}
.therapy-cinema[data-therapy-ready] .therapy-stage.is-dragging .is-active {
  cursor: grabbing;
}
@media (max-width: 600px) {
  .therapy-cinema {
    --therapy-card-width: calc(100vw - var(--therapy-s8));
    --therapy-copy-height: var(--therapy-mobile-copy-height);
    --therapy-stage-clearance: var(--therapy-mobile-stage-clearance);
    --therapy-card-top: 0px;
    --therapy-side-offset: 93%;
    --therapy-side-depth: -200px;
    --therapy-side-turn: 38deg;
    --therapy-side-brightness: 0.55;
    --therapy-panel-title: var(--therapy-mobile-panel-title);
    --therapy-arrow-size: 48px;
    --therapy-arrow-offset: var(--therapy-s5);
  }
  .therapy-cinema {
    padding: var(--therapy-s6) 0 var(--therapy-s5);
  }
  .therapy-intro h2 {
    font-size: var(--therapy-phone-title);
    max-width: var(--therapy-card-width);
    margin-inline: auto;
  }
  .therapy-standfirst {
    font-size: var(--therapy-text-small);
    margin: var(--therapy-s4) 0 var(--therapy-s5);
  }
  .therapy-desktop-break {
    display: none;
  }
  .therapy-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .therapy-art {
    grid-row: 1;
  }
  .therapy-art::after {
    background: linear-gradient(0deg, var(--therapy-panel), transparent 35%);
  }
  .therapy-copy {
    grid-row: 2;
    padding: var(--therapy-s4) var(--therapy-s5) var(--therapy-s5);
    gap: var(--therapy-s3);
  }
  .therapy-panel h3 {
    margin: 0;
  }
  .therapy-description {
    font-size: var(--therapy-text-body);
  }
  .therapy-cinema[data-therapy-ready] .therapy-orbit {
    display: none;
  }
  .therapy-arrow {
    top: auto;
    bottom: var(--therapy-zero);
  }
  .therapy-reel {
    padding: 0 0 var(--therapy-s5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .therapy-cinema[data-therapy-ready] .therapy-panel {
    transition: none;
  }
}
.therapy-arrow:focus-visible {
  outline: var(--therapy-focus) solid var(--therapy-blue);
  outline-offset: var(--therapy-s1);
}
@media (max-width: 860px) {
  .score-section,
  .treatments-section {
    --panel-anchor-offset: calc(2 * var(--nav-height) + var(--space-7));
  }
}

/* One published figure. It used to open with a rule across its top, the same
   rule the notes and the journals block use, so three different things looked
   like one thing repeated. A bar down the left edge marks it as a figure and
   puts the number first. */
.metric {
  border-left: 4px solid var(--accent);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
}
.metric-value {
  font-size: var(--figure);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-label {
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--muted);
  margin: var(--space-3) 0 0;
}

/* Journal names follow the introduction as one compact block. Twelve tracks
   balance the desktop rows as four, three, and four mastheads. */
.journals {
  --journal-columns: 12;
  --journal-span: 3;
  --journal-middle-span: 4;
  --journal-leading: 1.4;
  margin-top: var(--space-6);
}
.journals-label {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.journal-list {
  display: grid;
  grid-template-columns: repeat(var(--journal-columns), minmax(0, 1fr));
  align-items: center;
  gap: var(--space-5) var(--space-7);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  line-height: var(--journal-leading);
}
.journal-list > li {
  grid-column: span var(--journal-span);
  min-width: 0;
  min-height: var(--space-8);
  align-content: center;
  justify-self: center;
  text-align: center;
}
.journal-list > li:nth-child(n + 5):nth-child(-n + 7) {
  grid-column: span var(--journal-middle-span);
}
@media (max-width: 860px) {
  .journals {
    --journal-columns: 2;
    --journal-span: 1;
    --journal-middle-span: var(--journal-span);
  }
  .journal-list {
    column-gap: var(--space-6);
  }
  .journal-list > li:last-child {
    grid-column: 1 / -1;
  }
}

/* Each masthead imitates the wordmark of the journal it names, so the family,
   the size and the weight belong to that journal and not to the list. Journals
   set the same way share one rule, and none is named after another. */
.journal-lancet,
.journal-jama {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
}
.journal-annals,
.journal-nature-communications {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.journal-ccr {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 700;
}
.journal-jitc,
.journal-jnm {
  font-size: 15px;
  font-weight: 700;
}
.journal-ejnmmi {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 230px;
}
.journal-ejc {
  font-size: 16px;
  font-weight: 700;
}
.journal-european-radiology {
  font-size: 17px;
  font-weight: 700;
}

/* Two mastheads print the journal name and its series at different weights. */
.journal-title {
  font-weight: 800;
}
.journal-series {
  font-weight: 400;
}

/* JNCI is the only masthead with no size of its own: each half carries one.
   The 12.5px half pixel is odd, and is kept exactly as it was written. */
.journal-jnci-acronym {
  font-size: 19px;
  font-weight: 800;
}
.journal-jnci-name {
  font-size: 12.5px;
  font-weight: 500;
}

/* The trademark line under the mastheads. */
.trademark-note {
  font-size: var(--text-fine);
  line-height: 1.6;
  color: var(--muted);
  margin: 22px 0 0;
  max-width: 100ch;
}

/* ---------------------------------------------------------------------------
   Sections "IMPACT Consortium" and "What it changes". The consortium is text
   beside the globe; the second is an intro above two cards. They used to share a
   list of labeled facts, .spec-list and its parts. They no longer do: the cards
   are .seam-* now and carry their own facts, so .spec-list was removed.
   --------------------------------------------------------------------------- */

/* One initial letter of the acronym the standfirst spells out. */
.acronym-initial {
  font-weight: 700;
  color: var(--ink);
}

/* The three steps of the consortium, as one route rather than as three lines
   of a table. A rule down the left in the brand gradient, a numbered stud on
   each step, the verb at full size and its sentence under it: what the reader
   takes from it is an order, which three aligned rows never said. */
.path {
  /* The three numbers everything here is built from. The stud is centered on
     the first line of the verb, and the indent is the stud plus the space the
     page uses between a mark and the text it belongs to, so moving one moves
     all of it. */
  --path-stud: 34px;
  --path-verb: 21px;
  --path-gutter: calc(var(--path-stud) + var(--space-5));

  position: relative;
  list-style: none;
  margin: var(--space-7) 0;
  padding: 0 0 0 var(--path-gutter);
}

/* The route. It is drawn from the top once, when the section arrives, and then
   never moves again. The studs sit on it and hide it where they stand, which is
   what makes it read as one line threaded through the three of them. */
.path::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--path-stud) / 2 - 1px);
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--gradient-cyan),
    var(--accent) 52%,
    var(--gradient-violet)
  );
  transform-origin: top;
  animation: path-draw var(--t-reveal) var(--ease) both;
}
@keyframes path-draw {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.path-step {
  position: relative;
}
.path-step + .path-step {
  margin-top: var(--space-8);
}

/* The numbered stud. Its ground is opaque on purpose: it is what interrupts the
   rule behind it. */
.path-num {
  position: absolute;
  top: calc(var(--path-verb) * 0.6 - var(--path-stud) / 2);
  left: calc(var(--path-gutter) * -1);
  width: var(--path-stud);
  height: var(--path-stud);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-secondary);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--t-control) var(--ease),
    color var(--t-control) var(--ease),
    box-shadow var(--t-control) var(--ease);
}
.path-verb {
  margin: 0;
  font-size: var(--path-verb);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.path-detail {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

/* The pointer lights one step at a time. Nothing is clickable here: it answers
   the hand without promising anything. */
.path-step:hover .path-num {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

/* Less movement asked for: the rule is simply there, drawn, from the first
   frame. Same words, same places, nothing removed. */
@media (prefers-reduced-motion: reduce) {
  .path::before {
    animation: none;
  }
}

/* The line of attributes printed under the globe, middle dots included. */
.globe-caption {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-fine);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.globe-caption-separator {
  color: var(--border-secondary);
}

/* Decision support. One static layout, enhanced only when motion is allowed.
   The local review's five device views all use this same pair of panels. */
#roi {
  --seam-ground: rgb(var(--d-ground-navy-rgb));
  --seam-ink: var(--ground);
  --seam-copy-color: var(--footer-ground);
  --seam-line-opacity: 0.14;
  --seam-line: rgba(var(--ground-rgb), var(--seam-line-opacity));
  --seam-accent: var(--accent);
  --scrim: var(--d-ground-navy-rgb);
  --seam-veil: 0.08;
  --seam-veil-open: 0.04;
  --seam-text-veil: 0.66;
  --seam-veil-direction: 90deg;
  --seam-zoom: 1.06;
  /* Keep small facts fully opaque over the photo scrim. */
  --seam-facts-rest: 1;
  --seam-open-share: 0.62;
  --seam-rest: 50%;
  --seam-open: calc(100% * var(--seam-open-share));
  --seam-closed: calc(100% - var(--seam-open));
  --seam-text: 100%;
  --seam-height: 540px;
  --seam-pad: clamp(24px, 3.1vw, 48px);
  --seam-facts-gap: 48px;
  --seam-fact-columns: 2;
  --seam-rule: 1px;
  --seam-focus: 3px;
  --seam-focus-inset: 5px;
  --seam-weight: 600;
  --seam-label-size: 12px;
  --seam-fact-size: 20px;
  --seam-small-size: 14px;
  --seam-title-size: clamp(27px, 2.65vw, 38px);
  --seam-heading-size: clamp(34px, 4.2vw, 60px);
  --seam-heading-measure: 25ch;
  --seam-title-measure: 22ch;
  --seam-copy-measure: 46ch;
  --seam-heading-leading: 1.1;
  --seam-copy-leading: 1.6;
  --seam-tracking: -0.035em;
  --seam-label-tracking: 0.12em;
  --seam-photo-layer: -2;
  --seam-veil-layer: -1;

  padding: 0;
  background: var(--seam-ground);
  color: var(--band-light-ink);
}
.roi-heading {
  --roi-heading-ground: rgb(var(--d-ground-navy-rgb));
  --roi-heading-ink: var(--ground);
  --text-gradient: linear-gradient(
    var(--text-gradient-direction),
    var(--gradient-cyan),
    var(--accent-hi) var(--text-gradient-blue-stop),
    var(--gradient-violet)
  );
  padding: var(--seam-pad);
  background: var(--roi-heading-ground);
  color: var(--roi-heading-ink);
  box-shadow: inset 0 calc(-1 * var(--seam-rule)) 0 var(--seam-line);
}
.roi-heading .headline {
  margin: 0;
  max-width: var(--seam-heading-measure);
  font-size: var(--seam-heading-size);
  line-height: var(--seam-heading-leading);
  letter-spacing: var(--seam-tracking);
  text-wrap: balance;
  color: inherit;
}
.seam {
  display: flex;
  container-type: inline-size;
}
.seam-half {
  /* Fade the scrim past the text instead of drawing a separate text panel. */
  --seam-veil-text-edge: min(
    100%,
    calc(var(--seam-pad) + var(--seam-text) + var(--space-5))
  );
  --seam-photo-scrim: linear-gradient(
    var(--seam-veil-direction),
    rgba(var(--scrim), var(--seam-text-veil)) var(--seam-veil-text-edge),
    transparent
  );
  position: relative;
  isolation: isolate;
  flex: 0 1 var(--seam-rest);
  min-width: 0;
  min-height: var(--seam-height);
  padding: var(--seam-pad);
  display: flex;
  overflow: hidden;
  color: var(--seam-ink);
}
.seam-half + .seam-half {
  border-left: var(--seam-rule) solid var(--seam-line);
}
.seam-half:focus-visible {
  outline: var(--seam-focus) solid var(--seam-accent);
  outline-offset: calc(-1 * var(--seam-focus-inset));
}
.seam-shot,
.seam-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.seam-shot {
  /* This positioned background needs a box; the site's other pictures use
     display: contents to keep their images in the surrounding layout. */
  display: block;
  z-index: var(--seam-photo-layer);
}
.seam-photo {
  object-fit: cover;
}
.seam-half::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--seam-veil-layer);
  background-color: rgba(var(--scrim), var(--seam-veil));
  background-image: var(--seam-photo-scrim);
}
.seam-body {
  display: flex;
  flex-direction: column;
  width: var(--seam-text);
}
.seam-audience {
  margin: 0 0 var(--space-6);
  font-size: var(--seam-label-size);
  font-weight: var(--seam-weight);
  line-height: var(--seam-copy-leading);
  letter-spacing: var(--seam-label-tracking);
  text-transform: uppercase;
}
.seam-title {
  margin: 0 0 var(--space-6);
  font-size: var(--seam-title-size);
  font-weight: var(--seam-weight);
  letter-spacing: var(--seam-tracking);
  line-height: var(--seam-heading-leading);
  max-width: var(--seam-title-measure);
  text-wrap: balance;
}
.seam-copy {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--seam-copy-leading);
  color: var(--seam-copy-color);
  max-width: var(--seam-copy-measure);
}
.seam-facts {
  margin: auto 0 0;
  padding: var(--seam-facts-gap) 0 0;
  list-style: none;
}
.seam-facts--pair {
  display: grid;
  grid-template-columns: repeat(var(--seam-fact-columns), minmax(0, 1fr));
  gap: var(--space-6);
}
.seam-fact-value {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--seam-fact-size);
  font-weight: var(--seam-weight);
  line-height: var(--seam-heading-leading);
}
.seam-fact-label {
  margin: 0;
  font-size: var(--seam-small-size);
  line-height: var(--seam-copy-leading);
  color: var(--seam-copy-color);
}

/* Scripts disabled or reduced motion: keep the static layout above. The
   interaction itself is CSS; no event handlers or duplicated content. On
   touch screens only the photo and veil respond, without moving the panels. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .seam-half::after {
    transition: background var(--t-reveal) var(--ease);
  }
  .seam-photo {
    transition: transform var(--t-reveal) var(--ease);
  }
  .seam-half:is(:hover, :focus, :active)::after {
    background-color: rgba(var(--scrim), var(--seam-veil-open));
  }
  .seam-half:is(:hover, :focus, :active) .seam-photo {
    transform: scale(var(--seam-zoom));
  }
}

/* Expansion requires room, a pointer, and container units. Copy keeps the
   narrowest panel's width so no line reflows while either side opens. */
@supports (width: 1cqw) and selector(:has(*)) {
  @media (min-width: 861px) and (hover: hover) and (pointer: fine) and (
      scripting: enabled
    ) and (prefers-reduced-motion: no-preference) {
    .seam-half {
      --seam-text: min(
        100%,
        calc(
          100cqw *
          (1 - var(--seam-open-share)) -
          2 *
          var(--seam-pad) -
          var(--seam-rule)
        )
      );
      transition: flex-basis var(--t-reveal) var(--ease);
    }
    .seam-facts {
      opacity: var(--seam-facts-rest);
      transition: opacity var(--t-element) var(--ease);
    }
    .seam:not(:has(.seam-half:focus-visible)):hover .seam-half,
    .seam:has(.seam-half:focus-visible) .seam-half {
      flex-basis: var(--seam-closed);
    }
    .seam:not(:has(.seam-half:focus-visible)):hover .seam-half:hover,
    .seam:has(.seam-half:focus-visible) .seam-half:focus-visible {
      flex-basis: var(--seam-open);
    }
    .seam-half:is(:hover, :focus-visible) .seam-facts {
      opacity: 1;
    }
  }
}
@media (max-width: 860px) {
  .seam {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .seam-half {
    min-height: 0;
    padding-block: var(--seam-facts-gap);
  }
  .seam-half + .seam-half {
    border-left: 0;
    border-top: var(--seam-rule) solid var(--seam-line);
  }
}

/* ---------------------------------------------------------------------------
   Sections "How it works" and "Plan a pilot", and the site footer. Reuses
   .band-inner, .measure and .standfirst rather than naming them again.
   --------------------------------------------------------------------------- */

/* Image-based response assessment: the approved connected timeline. The
   text, photo, and three steps arrive separately, then stay still. */
#platform {
  --platform-ground: #e7eff8;
  --platform-ink: #14212c;
  --platform-muted: #516171;
  --platform-columns: 2;
  --platform-step-columns: 3;
  --platform-rhythm: 72px;
  --platform-gutter: clamp(24px, 5vw, 80px);
  --platform-layout-gap: var(--space-9);
  --platform-step-gap: 48px;
  --platform-timeline-space: 80px;
  --platform-photo-height: 390px;
  --platform-photo-position: 52%;
  --platform-photo-radius: 8px;
  --platform-photo-shadow: 0 26px 50px -28px #1a3e6266;
  --platform-copy-measure: 44ch;
  --platform-title-size: clamp(38px, 4.4vw, 62px);
  --platform-title-min: 32px;
  --platform-title-fit: 9cqi;
  --platform-title-leading: 1.07;
  --platform-title-tracking: -0.045em;
  --platform-lead-size: var(--text-lead);
  --platform-lead-space: var(--space-7);
  --platform-step-size: 23px;
  --platform-copy-size: 16px;
  --platform-step-leading: 1.2;
  --platform-copy-leading: 1.55;
  --platform-weight: 600;
  --platform-node: 36px;
  --platform-node-radius: 50%;
  --platform-rule: 1px;
  --platform-route: 2px;
  --platform-body-layer: 1;
  --platform-entry-distance: 18px;
  --platform-image-distance: 34px;
  --platform-image-scale: 1.06;
  --platform-copy-duration: 680ms;
  --platform-image-duration: 1100ms;
  --platform-step-duration: 620ms;
  --platform-trace-duration: 640ms;
  --platform-title-delay: 80ms;
  --platform-lead-delay: 220ms;
  --platform-image-delay: 160ms;
  --platform-step-start: 440ms;
  --platform-step-beat: 180ms;
  --platform-step-index: 0;
  --platform-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --platform-trace-animation: platform-trace-across;

  padding: var(--platform-rhythm) var(--platform-gutter);
  overflow: clip;
  background: var(--platform-ground);
}

.platform-layout {
  display: grid;
  grid-template-columns: repeat(var(--platform-columns), minmax(0, 1fr));
  align-items: center;
  gap: var(--platform-layout-gap);
}
.platform-copy {
  min-width: 0;
  container-type: inline-size;
}
.platform-headline {
  margin: 0;
  color: var(--platform-ink);
  font-size: clamp(
    var(--platform-title-min),
    var(--platform-title-fit),
    var(--platform-title-size)
  );
  font-weight: var(--platform-weight);
  line-height: var(--platform-title-leading);
  letter-spacing: var(--platform-title-tracking);
  text-wrap: balance;
}
.platform-lead {
  max-width: var(--platform-copy-measure);
  margin: var(--platform-lead-space) 0 0;
  color: var(--platform-muted);
  font-size: var(--platform-lead-size);
  line-height: var(--platform-copy-leading);
}
.platform-figure {
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--platform-photo-radius);
  box-shadow: var(--platform-photo-shadow);
}
.platform-photo {
  display: block;
  width: 100%;
  height: var(--platform-photo-height);
  object-fit: cover;
  object-position: var(--platform-photo-position);
}
.platform-steps {
  display: grid;
  grid-template-columns: repeat(var(--platform-step-columns), minmax(0, 1fr));
  gap: var(--platform-step-gap);
  margin: var(--platform-timeline-space) 0 0;
  padding: 0;
  list-style: none;
}
.platform-step {
  position: relative;
  min-width: 0;
  --platform-step-delay: calc(
    var(--platform-step-index) *
    var(--platform-step-beat)
  );
}
.platform-step:nth-child(2) {
  --platform-step-index: 1;
}
.platform-step:nth-child(3) {
  --platform-step-index: 2;
}
.platform-step-body {
  position: relative;
  z-index: var(--platform-body-layer);
}
.platform-step-number {
  display: grid;
  place-items: center;
  width: var(--platform-node);
  height: var(--platform-node);
  margin-bottom: var(--space-6);
  border: var(--platform-rule) solid var(--accent);
  border-radius: var(--platform-node-radius);
  background: var(--platform-ground);
  color: var(--accent);
  font-size: var(--text-label);
  font-weight: var(--platform-weight);
}
.platform-step-title {
  margin: 0 0 var(--space-3);
  color: var(--platform-ink);
  font-size: var(--platform-step-size);
  font-weight: var(--platform-weight);
  letter-spacing: var(--platform-title-tracking);
  line-height: var(--platform-step-leading);
}
.platform-step-copy {
  margin: 0;
  color: var(--platform-muted);
  font-size: var(--platform-copy-size);
  line-height: var(--platform-copy-leading);
}
.platform-step-track {
  position: absolute;
  top: calc(var(--platform-node) / 2);
  left: calc(var(--platform-node) / 2);
  width: calc(100% + var(--platform-step-gap));
  height: var(--platform-route);
  background: var(--text-gradient);
}
.platform-step:last-child .platform-step-track {
  display: none;
}

@keyframes platform-copy-arrival {
  from {
    opacity: 0;
    transform: translateY(var(--platform-entry-distance));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes platform-photo-wipe {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(var(--platform-image-distance));
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
  }
}
@keyframes platform-photo-settle {
  from {
    transform: scale(var(--platform-image-scale));
  }
  to {
    transform: none;
  }
}
@keyframes platform-trace-across {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes platform-trace-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* Static HTML is complete. Only a connected observer can enable hidden
   states. Reduced motion, including a live change, never hides content. */
@media (prefers-reduced-motion: no-preference) {
  [data-platform-motion]
    :is(.platform-headline, .platform-lead, .platform-figure):not([data-shown]),
  [data-platform-motion] .platform-step:not([data-shown]) .platform-step-body {
    opacity: 0;
  }
  [data-platform-motion] :is(.platform-headline, .platform-lead)[data-shown] {
    animation: platform-copy-arrival var(--platform-copy-duration)
      var(--platform-ease) var(--platform-title-delay) backwards;
  }
  [data-platform-motion] .platform-lead[data-shown] {
    animation-delay: var(--platform-lead-delay);
  }
  [data-platform-motion] .platform-figure[data-shown] {
    animation: platform-photo-wipe var(--platform-image-duration)
      var(--platform-ease) var(--platform-image-delay) backwards;
  }
  [data-platform-motion] .platform-figure[data-shown] .platform-photo {
    animation: platform-photo-settle var(--platform-image-duration)
      var(--platform-ease) var(--platform-image-delay) backwards;
  }
  [data-platform-motion] .platform-step[data-shown] .platform-step-body {
    animation: platform-copy-arrival var(--platform-step-duration)
      var(--platform-ease)
      calc(var(--platform-step-start) + var(--platform-step-delay)) backwards;
  }
  [data-platform-motion] .platform-step:not([data-shown]) .platform-step-track {
    opacity: 0;
  }
  [data-platform-motion] .platform-step[data-shown] .platform-step-track {
    animation: var(--platform-trace-animation) var(--platform-trace-duration)
      var(--platform-ease) var(--platform-step-delay) backwards;
  }
}

@media (max-width: 1000px) {
  #platform {
    --platform-rhythm: 56px;
    --platform-photo-height: 340px;
    --platform-lead-size: 18px;
    --platform-step-size: 21px;
    --platform-step-gap: var(--space-7);
    --platform-layout-gap: 40px;
  }
}
@media (max-width: 860px) {
  #platform {
    --platform-columns: 1;
    --platform-title-size: 48px;
    --platform-step-start: 80ms;
    --platform-step-beat: 100ms;
    --platform-timeline-space: 48px;
    --platform-lead-space: var(--space-6);
  }
  .platform-headline {
    font-size: var(--platform-title-size);
  }
  .platform-lead {
    max-width: none;
  }
}
@media (max-width: 600px) {
  #platform {
    --platform-rhythm: var(--space-8);
    --platform-gutter: var(--space-6);
    --platform-title-size: clamp(25px, 7.9vw, 32px);
    --platform-lead-size: var(--text-body);
    --platform-step-size: 22px;
    --platform-copy-size: var(--text-small);
    --platform-photo-height: 248px;
    --platform-layout-gap: var(--space-7);
    --platform-step-columns: 1;
    --platform-timeline-space: 40px;
    --platform-node: var(--space-7);
    --platform-trace-animation: platform-trace-down;
  }
  .platform-step-body {
    display: grid;
    grid-template-columns: var(--platform-node) minmax(0, 1fr);
    gap: var(--space-4);
  }
  .platform-step-number {
    margin: 0;
  }
  .platform-step-track {
    width: var(--platform-route);
    height: calc(100% + var(--platform-step-gap));
  }
}
@media (max-width: 360px) {
  #platform {
    --platform-gutter: var(--space-5);
    --platform-step-size: 20px;
  }
}

/* Two columns whose contents start at the top instead of centering on each
   other, because the pilot form is taller than the text beside it. */
.split--top {
  align-items: start;
}

/* Body copy capped 2ch narrower than .body-copy. The difference looks
   accidental; both values are kept until it is decided. */
.body-copy--narrow {
  max-width: 58ch;
}

/* A white form separates the inputs from the pearl gray section. */
.pilot-form {
  --form-input-border: #8294a3;
  background: var(--surface);
  border: 1px solid var(--d-border);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* One field: its label sits above its control. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-label {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--d-muted);
}

/* The box a visitor types in. It is a rule under the text rather than a box
   around it: four sides of border on every field turns a short form into a
   grid of cages, and the line alone says "write here" just as clearly. */
.form-input {
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--form-input-border);
  border-radius: 0;
  padding: 10px 0;
  font-size: var(--text-body);
  color: var(--d-ink);
  transition: border-color var(--t-control) var(--ease);
}
.form-input::placeholder {
  color: var(--d-muted);
}
.form-input:focus {
  outline: none;
  border-bottom-color: var(--d-accent);
}
.form-input:focus-visible {
  outline: none;
  border-bottom-color: var(--d-accent);
}
.form-input--multiline {
  resize: vertical;
}

/* The button that sends the request, and the warning under it. */
.form-submit {
  align-self: flex-start;
  margin-top: var(--space-2);
}
.form-note {
  font-size: var(--text-label);
  line-height: 1.6;
  color: var(--d-muted);
}

/* A cool gray footer closes the sequence of light sections. */
.site-footer {
  background: var(--d-ground-deep);
  color: var(--d-ink);
  border-top: 1px solid var(--band-light-border);
  padding: clamp(72px, 10vh, 104px) var(--gutter) var(--space-8);
}

/* The brand block and the four link columns beside it. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: clamp(28px, 4vw, 48px);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer-mark {
  --footer-mark-size: 30px;

  display: block;
  width: var(--footer-mark-size);
  height: var(--footer-mark-size);
  flex: none;
}
.footer-wordmark {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--d-ink);
}
.footer-tagline {
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--d-muted);
  margin: var(--space-4) 0 0;
  max-width: 30ch;
}

/* A column of links, and the small heading above it. */
.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer-heading {
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--d-muted);
}

/* Every link in those columns, eleven of them. */
.footer-link {
  font-size: var(--text-small);
  color: var(--d-muted-hi);
  text-decoration: none;
  transition: color var(--t-control) var(--ease);
}
.footer-link:hover {
  color: var(--d-ink);
  text-decoration: none;
}

/* The bar closing the footer: publisher on the left, contact on the right. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: clamp(40px, 6vh, 64px);
  border-top: 1px solid var(--band-light-border);
  padding-top: var(--space-6);
}
.footer-publisher {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-label);
  line-height: 1.6;
  color: var(--d-muted);
}
.footer-contact {
  font-size: var(--text-label);
  color: var(--d-muted);
}

/* ---------------------------------------------------------------------------
   The data label. It marks every number, axis tick and chart caption on the
   page, so it gets one name rather than being repeated 44 times. It works the
   same on an SVG <text> or <g> as on a <div>.

   It used to be set in a monospaced face, which is why the class is still
   called .mono in the markup. That face is gone: a typewriter on a clinical
   site reads as a terminal window, and the charter drops it. What marks a label
   now is the tracking and the caps, in the one family the page uses. */
.mono {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Using the score. The numeric value, rings and bars all read data-score.
   The table maps those data values to CSS without runtime style writes.
   --------------------------------------------------------------------------- */

/* The twelve scores the section shows. Missing from this table, a row falls
   back to zero and draws an empty ring and an empty bar, which is visibly
   nothing rather than a plausible wrong number. */
#score [data-score="0.12"] {
  --score: 0.12;
}
#score [data-score="0.50"] {
  --score: 0.5;
}
#score [data-score="0.68"] {
  --score: 0.68;
}
#score [data-score="0.72"] {
  --score: 0.72;
}
#score [data-score="0.78"] {
  --score: 0.78;
}
#score [data-score="0.80"] {
  --score: 0.8;
}
#score [data-score="0.86"] {
  --score: 0.86;
}
#score [data-score="0.88"] {
  --score: 0.88;
}
#score [data-score="0.93"] {
  --score: 0.93;
}
#score [data-score="0.95"] {
  --score: 0.95;
}
#score [data-score="0.97"] {
  --score: 0.97;
}
#score [data-score="1.00"] {
  --score: 1;
}

/* Local panel tokens keep the approved palette out of unrelated sections. */
.score-section {
  --score-ground: #f1f5fb;
  --score-panel: #e2edfc;
  --case-ground: #e3ebf6;
  --case-edge: #7288a2;
  --case-accent: var(--accent);
  --case-tab-ground: #cad8eb;
  --case-tab-hover: #b8cce6;
  --case-tab-selected: var(--panel-heading);
  --case-tab-selected-ink: var(--ground);
  --surface: var(--case-ground);
  --hairline: var(--case-edge);
  --card-inset: clamp(20px, 3.2vw, 46px);
  --card-stripe: var(--space-1);
  --score-title-size: clamp(50px, 6vw, 82px);
  --score-title-tablet: 56px;
  --score-lead-size: clamp(24px, 2.6vw, 32px);
  --score-lead-width: 20ch;
  --score-heading-width: 11ch;
  --score-value-size: clamp(84px, 8vw, 112px);
  --score-gauge-width: 330px;
  --score-gauge-top-crop: calc(-1 * var(--space-7));
  --score-animation-duration: 2200ms;
  --score-animation-easing: cubic-bezier(0.33, 1, 0.68, 1);
  --score-path-unit: 1px;
  --score-tick-size: 7px;
  --score-tick-tracking: 0.08em;
  --score-rule-weight: 1.1;
  --score-fill-weight: 3;
  --score-band-opacity: 0.18;
  --score-floor-dashes: 2 3;
  --chart-maximum: 1080px;
  --chart-mobile-maximum: 500px;
  --chart-metadata-width: 100ch;
  --chart-row-columns: 1.3rem 4.6rem minmax(0, 1fr) 2.5rem;
  --case-tab-leading: 1.2;
  --case-tab-focus-width: 2px;
  /* JS reads these millisecond tokens to schedule the six arrivals. */
  --chart-lead: 80ms;
  --chart-step: 600ms;
  --chart-motion: 450ms;
  --chart-fade: 250ms;
  background: var(--score-ground);
}
.score-overview {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--space-10);
  padding-bottom: var(--space-9);
}
.score-title {
  max-width: var(--score-heading-width);
  margin: 0 0 var(--space-6);
  color: var(--panel-heading);
  font-size: var(--score-title-size);
  font-weight: 600;
  line-height: var(--panel-leading);
  letter-spacing: var(--panel-tight);
}
.title-dot {
  color: var(--ink);
}
.score-lead {
  max-width: var(--score-lead-width);
  margin: 0;
  font-size: var(--score-lead-size);
  line-height: var(--panel-leading);
  letter-spacing: var(--panel-tight);
}
.score-description {
  max-width: var(--measure-standfirst);
  margin: var(--space-4) 0 0;
  color: var(--muted);
  line-height: var(--panel-body-leading);
}
.score-points {
  display: grid;
  gap: var(--space-5);
  padding: 0;
  padding-inline-start: var(--space-5);
  margin: var(--space-7) 0;
  list-style: disc;
}
.score-points li {
  padding-inline-start: var(--space-1);
}
.confidence-row > span {
  color: var(--muted);
}
.score-points li::marker {
  color: var(--accent);
}
.score-points h3 {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 600;
}
.score-points p {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  font-size: var(--text-label);
  line-height: var(--panel-body-leading);
}
.score-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  min-height: var(--space-8);
  color: var(--accent);
  font-size: var(--text-small);
  text-decoration: none;
  border-bottom: var(--panel-rule) solid currentColor;
}
.using-score {
  padding: var(--space-8);
  border: var(--panel-rule) solid var(--panel-edge);
  border-top: var(--card-stripe) solid var(--accent);
  border-radius: var(--panel-radius);
  background: var(--score-panel);
}
.using-score h3 {
  margin: 0;
  color: var(--panel-heading);
  font-size: var(--text-lead);
  font-weight: 500;
}
.sample-value {
  margin-top: var(--space-6);
  color: var(--accent);
  font-size: var(--score-value-size);
  line-height: var(--panel-leading);
  letter-spacing: var(--panel-tight);
  font-variant-numeric: tabular-nums;
}
.gauge-fig {
  display: block;
  width: 100%;
  max-width: var(--score-gauge-width);
  height: auto;
  margin-block: var(--score-gauge-top-crop) var(--space-3);
  overflow: visible;
}
.gauge-rule {
  fill: none;
  stroke: var(--border-secondary);
  stroke-width: var(--score-rule-weight);
}
.gauge-floor {
  fill: none;
  stroke: var(--muted);
  stroke-width: var(--score-rule-weight);
  stroke-dasharray: var(--score-floor-dashes);
}
.gauge-band {
  fill: var(--accent);
  opacity: var(--score-band-opacity);
}
.gauge-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: var(--score-fill-weight);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc((1 - var(--score)) * var(--score-path-unit));
}
.gauge-tick {
  font-size: var(--score-tick-size);
  font-weight: 500;
  letter-spacing: var(--score-tick-tracking);
  fill: var(--faint);
}
.gauge-tick--end {
  text-anchor: end;
}
.using-score[data-score-ready]:not([data-score-complete]) .gauge-fill {
  stroke-dashoffset: var(--score-path-unit);
}
.using-score[data-score-animating] .gauge-fill {
  animation: score-arrival var(--score-animation-duration)
    var(--score-animation-easing) both;
}
@keyframes score-arrival {
  from {
    stroke-dashoffset: var(--score-path-unit);
  }
  to {
    stroke-dashoffset: calc((1 - var(--score)) * var(--score-path-unit));
  }
}
.confidence-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--panel-rule) solid var(--panel-edge);
  font-size: var(--text-small);
}
.use-cases {
  /* Darker chart labels and rules stay local to the three clinical examples. */
  --faint: #4d596a;
  --panel-edge: var(--case-edge);
  padding-top: var(--space-8);
}
.case-tabs {
  display: none;
}
.use-cases[data-tabs-active] .case-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-5);
  border: var(--panel-rule) solid var(--case-edge);
  border-radius: var(--panel-radius);
  overflow: hidden;
  background: var(--case-tab-ground);
}
.case-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: var(--space-9);
  padding: var(--space-4) var(--space-5);
  border: 0;
  background: transparent;
  color: var(--panel-heading);
  font: inherit;
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: var(--case-tab-leading);
  text-align: left;
  cursor: pointer;
}
.case-tab + .case-tab {
  border-left: var(--panel-rule) solid var(--case-edge);
}
.case-tab:hover {
  background: var(--case-tab-hover);
  color: var(--ink);
}
.case-tab:focus-visible {
  outline: var(--case-tab-focus-width) solid var(--accent);
  outline-offset: calc(-1 * var(--case-tab-focus-width));
}
.case-tab[aria-selected="true"] {
  background: var(--case-tab-selected);
  color: var(--case-tab-selected-ink);
}
.case-tab[aria-selected="true"]:focus-visible {
  outline-color: var(--case-tab-selected-ink);
}
.cases-list {
  display: grid;
  gap: var(--space-8);
}
.use-cases[data-tabs-active] .cases-list {
  display: block;
}
.use-cases[data-tabs-active] .case[hidden] {
  display: none;
}
.case {
  min-width: 0;
  padding: var(--card-inset);
  border: var(--panel-rule) solid var(--case-edge);
  border-left: var(--card-stripe) solid var(--case-accent);
  border-radius: var(--panel-radius);
  background: var(--case-ground);
}
.case-heading {
  margin-bottom: var(--space-6);
}
.chart-title {
  margin: 0 0 var(--space-3);
  color: var(--panel-heading);
  font-size: var(--title-card);
  font-weight: 600;
  letter-spacing: var(--panel-tight);
}
.case-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--panel-body-leading);
}
.case-figure {
  min-width: 0;
  max-width: var(--chart-maximum);
  margin-inline: auto;
}
.shared-notes {
  max-width: var(--chart-metadata-width);
  padding-top: var(--space-6);
  margin-inline: auto;
  color: var(--muted);
  font-size: var(--text-label);
  line-height: var(--panel-body-leading);
}
.shared-notes p {
  margin: 0;
}
.shared-notes p + p {
  margin-top: var(--space-3);
}

/* Each figure is complete in HTML, then enhanced only when motion can run. */
.case.is-animated [data-tp] {
  opacity: 0;
  transition: opacity var(--chart-fade) var(--ease);
}
.case.is-animated [data-tp][data-on] {
  opacity: 1;
}
.case.is-animated [data-seg] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--chart-motion) var(--ease);
}
.case.is-animated [data-seg][data-on] {
  stroke-dashoffset: 0;
}
.case.is-animated [data-arc] {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--chart-motion) var(--ease);
}
.case.is-animated [data-tp][data-on] [data-arc] {
  stroke-dashoffset: calc(1 - var(--score));
}
.case.is-complete [data-tp],
.case.is-complete [data-seg],
.case.is-complete [data-arc] {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .using-score[data-score-animating] .gauge-fill {
    animation: none;
  }
  .case.is-animated [data-tp],
  .case.is-animated [data-seg],
  .case.is-animated [data-arc] {
    transition: none;
  }
}

/* Clinical categories retain their existing colors and written labels. */
.ch-grid {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.ch-axis {
  fill: none;
  stroke: var(--border-secondary);
  stroke-width: 1;
}
.ch-base {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}
.ch-area {
  fill: var(--accent);
  fill-opacity: 0.06;
}
.ch-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.ch-dot {
  fill: var(--accent);
}
.ch-ring-track {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 4;
}
.ch-ring {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--score));
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.ch-name,
.ch-axis-y {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  fill: var(--faint);
}
.ch-note {
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: var(--faint);
}
.ch-tick {
  font-size: 11px;
  fill: var(--faint);
  font-variant-numeric: tabular-nums;
}
.ch-time {
  font-size: 12px;
  fill: var(--muted);
}
.ch-sub {
  font-size: 8px;
}
.ch-val {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ch-read {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
/* The frame around a read, thinned right down: it marks the state without
   turning back into the filled pill it replaces. */
.ch-frame {
  fill: none;
  stroke-width: 1;
  opacity: 0.42;
}
.ch-read--base {
  fill: var(--faint);
}
.ch-frame--base {
  stroke: var(--faint);
}
.ch-read--stable {
  fill: var(--state-stable-ink);
}
.ch-frame--stable {
  stroke: var(--state-stable-ink);
}
.ch-read--response {
  fill: var(--state-response-ink);
}
.ch-frame--response {
  stroke: var(--state-response-ink);
}
.ch-read--progression {
  fill: var(--state-progression-ink);
}
.ch-frame--progression {
  stroke: var(--state-progression-ink);
}

/* ---------------------------------------------------------------------------
   The forecast chart, third and last of the three. It answers a different
   question from the two above it, so it carries marks they do not need: a rule
   at the week the call is made, a wash over the months that have not happened
   yet at that moment, and three curves instead of one.

   The curves are told apart by weight and by dash, and each carries its own
   name written at the end of it. Nothing here is said by color alone.

   What this replaces: 28 colors written by hand inside the drawing, 11 of them
   different, and 5 of those existing nowhere else on the site.
   --------------------------------------------------------------------------- */

/* The week-6 rule marks the forecast horizon on the shared card surface. */
.fc-veil {
  fill: none;
}

/* The week the call is made, and the line that marks it. */
.fc-mark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}
.fc-when {
  font-size: 12px;
  font-weight: 600;
  fill: var(--accent);
}
/* The short rule that hangs the readout off that mark. */
.fc-tie {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}

.fc-curve {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.fc-curve--a {
  stroke: var(--accent);
}
.fc-curve--b {
  stroke: var(--muted);
  stroke-width: 2;
}
/* The control is built from past patients rather than observed in this trial,
   and the dashes are what say so. It is also the one curve the sequence fades
   in rather than draws: drawing a line works by moving its dashes, and would
   leave this one solid. */
.fc-curve--soc {
  stroke: var(--faint);
  stroke-width: 1.6;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}
/* The name printed at the end of a curve, in place of a legend. */
.fc-lead {
  font-size: 12px;
  font-weight: 600;
  fill: var(--muted);
}
.fc-lead--a {
  fill: var(--accent);
}
.fc-lead--soc {
  fill: var(--faint);
  font-weight: 500;
}

/* The readout: the two calls, framed, in the empty corner under the curves. */
.fc-box {
  fill: var(--surface);
  stroke: var(--hairline);
  stroke-width: 1;
}
.fc-name {
  font-size: 12px;
  font-weight: 600;
  fill: var(--ink);
}
.fc-val {
  font-size: 13px;
  font-weight: 600;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The two verdicts. The word is written out, so the color never says anything
   the word has not already said. Measured on white, the same two inks the
   charts above use for their reads: 6.5 and 7.9, where the rules ask 4.5. */
.fc-up {
  fill: var(--state-response-ink);
}
.fc-down {
  fill: var(--state-progression-ink);
}

/* The same two calls on a phone. The drawing is 720 units wide and a phone
   gives it about 330 pixels, so a 12 pixel number inside it would land at
   five. They leave the drawing and become rows of real type, which grow with
   the reader's own font size and can be read out by a screen reader. */
.fc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
}
.fc-row-name {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
}
.fc-row-val {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fc-row-bar {
  grid-column: 1 / -1;
  grid-row: 2;
}
.fc-row-verdict {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: var(--text-label);
}
.fc-row-verdict--up {
  color: var(--state-response-ink);
}
.fc-row-verdict--down {
  color: var(--state-progression-ink);
}

/* Which of the two figures is on screen. Only ever one: the other is taken out
   of the page, so a screen reader is never read the same six numbers twice.

   How wide a phone figure is allowed to get. All three are drawn 320 units
   across, and a tablet card is about 790 pixels wide: left to fill it, an 11
   unit label lands at 27 pixels, larger than the title of the chart it sits
   under. Measured at 860px on the first chart before this rule, where the
   "200" of the vertical axis came out bigger than the heading above it. They
   stop growing at the width of a large phone. */
.chart-narrow {
  --chart-phone-width: 420px;
  display: none;
}
.chart-narrow .chart {
  max-width: var(--chart-phone-width);
  /* Centered, so that on a screen wider than the cap the figure sits in the
     middle of its card rather than pinned to the left edge. On a phone the
     card is narrower than the cap and this changes nothing. */
  margin-inline: auto;
}
.chart-rows {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}
.chart-rows-name {
  font-size: var(--text-fine);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--faint);
  margin: var(--space-6) 0 0;
}
.chart-row {
  display: grid;
  grid-template-columns: 2rem 5.2rem minmax(0, 1fr) 2.8rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline);
}
.chart-row-t {
  font-size: var(--text-label);
  color: var(--muted);
}
.chart-row-read {
  font-size: var(--text-fine);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 3px 0;
  border: 1px solid currentColor;
}
.chart-row-read--base {
  color: var(--faint);
  border-color: var(--border-secondary);
}
.chart-row-read--stable {
  color: var(--state-stable-ink);
}
.chart-row-read--response {
  color: var(--state-response-ink);
}
.chart-row-read--progression {
  color: var(--state-progression-ink);
}
.chart-row-bar {
  display: block;
  height: 6px;
  background: var(--hairline);
}
.chart-row-bar-fill {
  display: block;
  /* Derived from the score its row carries, so the bar and the number beside it
     cannot drift apart. */
  width: calc(var(--score, 0) * 100%);
  height: 100%;
  background: var(--accent);
}
.chart-row-val {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Lighter than `.chart-narrow .chart` further up, which normally means the
   lighter one silently loses. Not here: that rule sets a maximum width and a
   centering margin, this one sets display, width, height and a top margin, so
   the two never claim the same property. The order is deliberate, and the note
   under .chart--after-copy says why. */
/* biome-ignore lint/style/noDescendingSpecificity: no property is shared with .chart-narrow .chart */
.chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
}
.chart--after-copy {
  margin-top: 14px;
}

/* Wide charts remain readable on tablets; phones use the compact drawing
   and real text rows. Both layouts contain the same data. */
@media (max-width: 1100px) {
  .score-overview {
    gap: var(--space-8);
  }
}
@media (min-width: 601px) and (max-width: 860px) {
  .score-title {
    font-size: var(--score-title-tablet);
  }
  .score-overview {
    gap: var(--space-7);
  }
  .using-score {
    padding: var(--space-6);
  }
  .case {
    padding: var(--space-7);
  }
}
@media (max-width: 600px) {
  .score-section {
    padding-block: var(--space-8);
  }
  .score-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding-bottom: var(--space-8);
  }
  .score-points {
    margin-block: var(--space-6);
  }
  .using-score {
    padding: var(--space-6);
  }
  .use-cases[data-tabs-active] .case-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(3, minmax(max-content, 1fr));
  }
  .case-tab {
    min-height: var(--space-8);
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
  }
  .case {
    padding: var(--space-5) var(--space-4);
  }
  .case-heading {
    margin-bottom: var(--space-5);
  }
  .chart-title {
    font-size: var(--text-lead);
  }
  .chart--wide {
    display: none;
  }
  .chart-narrow {
    display: block;
    max-width: var(--chart-mobile-maximum);
    margin-inline: auto;
  }
  .chart-rows-name {
    margin-top: var(--space-5);
  }
  .chart-row {
    gap: var(--space-2);
    grid-template-columns: var(--chart-row-columns);
  }
}

/* ---------------------------------------------------------------------------
   The page container. Everything the visitor sees sits inside it.
   --------------------------------------------------------------------------- */

/* Clip horizontal decoration at the page edge.

   `clip` and not `hidden`: `hidden` also turns this element into a scroll
   container, and a scroll container breaks every `position: sticky` inside it.
   Measured before the change, the navigation bar sat 1500px above the window
   after a 1500px scroll, though it is written to stick. The `hidden` line is
   kept first as the fallback for browsers older than `clip`, which lose sticky
   and keep the clipping rather than the other way round. */
.page {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  /* biome-ignore lint/suspicious/noDuplicateProperties: the second declaration
     is the point. A browser that knows `clip` takes it and keeps sticky; one
     that does not ignores the line and keeps `hidden`, so neither ever scrolls
     sideways. */
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Modern image formats.
   --------------------------------------------------------------------------- */

/* Each photograph is offered twice, as WebP and as PNG, and the browser takes the
   one it understands. Only one is ever downloaded.
   `display: contents` makes the wrapper generate no box at all, so the image keeps
   the same containing block it had before the wrapper existed. Without it, an image
   sized `height: 100%` would resolve against the wrapper instead of the frame, and
   every card would collapse. */
picture {
  display: contents;
}

/* A row whose title answers the pointer. It was written from JavaScript, with
   the two colors spelled out as literals in that file; it belongs here, next to
   every other hover on the page, and in the tokens. */
[data-row] [data-row-title] {
  transition: color var(--t-control) var(--ease);
}
[data-row]:hover [data-row-title],
[data-row]:focus-within [data-row-title] {
  color: var(--accent);
  text-decoration: underline;
}