/* ==========================================================================
   OnKommon : Precision Oncology, Navigated
   Design system & site styles
   Brand: #4F1865 (purple) · #D2F9EA (mint)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand : purple */
  --ink-950: #1A0722;
  --ink-900: #2A0C36;
  --ink-800: #3A1049;
  --brand-700: #4F1865; /* primary brand */
  --brand-600: #632080;
  --brand-500: #7B378F;
  --brand-400: #9A63A9;
  --brand-200: #D8C7E0;
  --brand-100: #EDE4F1;
  --brand-50:  #F7F3FA;

  /* Brand : mint */
  --mint-100: #EAFDF5;
  --mint-200: #D2F9EA; /* brand mint */
  --mint-400: #7FD9B8;
  --mint-600: #17795A; /* accessible mint-family text on light */
  --mint-700: #0F5C44;

  /* Neutrals */
  --paper:   #FBFAFC;
  --surface: #FFFFFF;
  --ink:     #1C1322;
  --body:    #3D3448;
  --muted:   #6B6178;
  --line:    #E6E0EB;
  --line-strong: #D4CBDC;

  /* Semantic */
  --warn-bg: #FFF8E9;
  --warn-line: #E8D7AC;
  --warn-ink: #6B4E10;

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --step-2:  clamp(1.35rem, 1.24rem + 0.55vw, 1.6rem);
  --step-3:  clamp(1.65rem, 1.44rem + 1.05vw, 2.15rem);
  --step-4:  clamp(2rem, 1.62rem + 1.9vw, 2.9rem);
  --step-5:  clamp(2.4rem, 1.75rem + 3.25vw, 4rem);

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Shape */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px;

  /* Layout */
  --wrap: 1200px;
  --wrap-wide: 1360px;
  --prose: 68ch;

  /* Motion.

     Duration follows what is actually moving: a colour change is not a panel
     and a panel is not a page. Every entrance has a matching exit at about
     two thirds of its length, because leaving should feel quicker than
     arriving. Two curves, not one: things decelerate as they arrive and
     accelerate as they go. */
  --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);   /* arriving */
  --ease-leave: cubic-bezier(0.4, 0.0, 1, 1);     /* leaving */
  --ease-press: cubic-bezier(0.34, 1.4, 0.64, 1); /* release, with a little give */

  --t-tap:      90ms;   /* acknowledging a press */
  --t-fast:    140ms;   /* hover, colour, a small state */
  --t-base:    240ms;   /* a panel, an accordion, a menu */
  --t-enter:   380ms;   /* content arriving on scroll */
  --t-page:    320ms;   /* one document to the next */

  --t-fast-out: 90ms;
  --t-base-out: 160ms;
  --t-exit:    220ms;

  --t-stagger:  28ms;   /* per item in a sequence */

  /* Elevation : hairline first, shadow sparingly */
  --shadow-sm: 0 1px 2px rgba(28, 19, 34, 0.05);
  --shadow-md: 0 6px 24px -8px rgba(28, 19, 34, 0.14);
  --shadow-lg: 0 24px 60px -24px rgba(42, 12, 54, 0.32);

  --header-h: 116px;
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Any component that sets its own `display` outranks the user agent's
   `[hidden] { display: none }`, because author styles beat UA styles at equal
   specificity. Every filter on this site toggles `hidden`, so without this the
   JavaScript sets the property correctly and nothing disappears. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h, 77px) + var(--sticky-h, 0px) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 {
  font-size: var(--step-1);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

/* A sub-heading that is an h3 in the outline (so h2 is never followed by h4)
   but keeps the quieter UI-font appearance an h4 had. */
h3.h-sub {
  font-size: var(--step-1);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-600); }

strong, b { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

::selection { background: var(--mint-200); color: var(--ink-900); }

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

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--brand-700);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - 2 * var(--s-5), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--s-5), var(--wrap-wide)); margin-inline: auto; }
.prose { max-width: var(--prose); }

@media (min-width: 1024px) {
  .wrap, .wrap-wide { width: min(100% - 2 * var(--s-8), var(--wrap)); }
  .wrap-wide { width: min(100% - 2 * var(--s-8), var(--wrap-wide)); }
}

.section { padding-block: var(--s-9); }
.section--tight { padding-block: var(--s-8); }
.section--loose { padding-block: var(--s-10); }
.section--paper { background: var(--paper); }
.section--surface { background: var(--surface); }
.section--tint { background: var(--brand-50); }
.section--rule { border-top: 1px solid var(--line); }

.section--dark {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.82);
}
.section--dark h2, .section--dark h3, .section--dark strong {
  color: #fff;
}
/* Buttons carry their own foreground/background pair, so they must be excluded
   here: otherwise a mint button in a dark band gets mint text on mint. */
.section--dark a:not(.btn) { color: var(--mint-200); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
@media (min-width: 700px)  { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px)  { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Editorial split: sticky heading beside content */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--s-8); }
  .split > .split-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
}

/* --------------------------------------------------------------------------
   4. Typographic utilities
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--mint-400);
  flex: none;
}
.section--dark .eyebrow { color: var(--mint-200); }
.section--dark .eyebrow::before { background: var(--mint-400); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--body);
  max-width: 62ch;
}
.section--dark .lede { color: rgba(255, 255, 255, 0.88); }


.kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.serif-quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.3;
  color: var(--ink);
  font-style: italic;
}

/* Bulleted lists : content book uses a lot of these */
ul.list, ol.list { padding-left: 0; margin: 0 0 var(--s-4); list-style: none; }
ul.list > li, ol.list > li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
}
ul.list > li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.68em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 2px solid var(--brand-500);
}
.section--dark ul.list > li::before { border-color: var(--mint-400); }

ol.list { counter-reset: ol; }
ol.list > li { counter-increment: ol; padding-left: var(--s-7); }
ol.list > li::before {
  content: counter(ol);
  position: absolute;
  left: 0; top: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brand-600);
  background: var(--brand-100);
  width: 1.65rem; height: 1.65rem;
  border-radius: 50%;
  display: grid; place-items: center;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--brand-700);
  --btn-fg: #fff;
  --btn-bd: var(--brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--brand-600); --btn-bd: var(--brand-600); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--brand-700); --btn-bd: var(--line-strong); }
.btn--secondary:hover { --btn-bg: var(--brand-50); --btn-bd: var(--brand-400); color: var(--brand-700); }

.btn--mint { --btn-bg: var(--mint-200); --btn-fg: var(--ink-900); --btn-bd: var(--mint-200); }
.btn--mint:hover { --btn-bg: var(--mint-400); --btn-bd: var(--mint-400); color: var(--ink-900); }

/* Defined light-safe first, then given its white treatment only where there is
   actually a dark ground under it. The old definition was white-on-transparent
   unconditionally, so on a light band the button was invisible. */
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--brand-700); --btn-bd: var(--line-strong); }
.btn--ghost-light:hover { --btn-bg: var(--brand-50); --btn-bd: var(--brand-400); color: var(--brand-700); }
.section--dark .btn--ghost-light,
.hero .btn--ghost-light,
.cta-block .btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.35); }
.section--dark .btn--ghost-light:hover,
.hero .btn--ghost-light:hover,
.cta-block .btn--ghost-light:hover { --btn-bg: rgba(255,255,255,0.1); --btn-bd: rgba(255,255,255,0.6); color: #fff; }

.btn--sm { min-height: 40px; padding: var(--s-2) var(--s-5); font-size: 0.875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  /* WCAG 2.2 wants 24px, and sitting exactly on the floor means any sub-pixel
     rounding lands under it. Four pixels of headroom costs nothing here. */
  min-height: 28px;
  gap: var(--s-2);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--brand-700);
}
.link-arrow::after {
  content: "→";
  transition: transform var(--t-fast) var(--ease);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover::after { transform: translateX(3px); }
.section--dark .link-arrow { color: var(--mint-200); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.utility-bar {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.utility-bar .wrap-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 40px;
  padding-block: var(--s-2);
}
.utility-bar__partner { display: inline-flex; align-items: center; gap: var(--s-2); }
.utility-bar__partner .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mint-400); flex: none; }
.utility-bar__links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.utility-bar a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.utility-bar a:hover { color: var(--mint-200); text-decoration: underline; }

@media (max-width: 900px) { .utility-bar { display: none; } }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-base) var(--ease);
}
.masthead.is-stuck { box-shadow: var(--shadow-md); }

/* The masthead needs more room than the editorial grid: use tighter gutters. */
.masthead .wrap-wide,
.utility-bar .wrap-wide {
  width: min(100% - var(--s-6), 1440px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 76px;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  text-decoration: none; flex: none;
  min-height: 44px; /* touch target : the wordmark itself is shorter */
}
.brand img.brand__word { width: 168px; }
.brand__mark { width: 30px; height: 30px; flex: none; }
@media (max-width: 480px) { .brand img.brand__word { width: 132px; } }

/* Primary nav + mega menu */
.nav { display: none; }
@media (min-width: 1180px) { .nav { display: flex; align-items: center; gap: 0; } }

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) 10px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  border-radius: var(--r-sm);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--brand-700); background: var(--brand-50); }
.nav__link[aria-current="page"], .nav__item.is-active > .nav__link { color: var(--brand-700); font-weight: 600; }
.nav__link .chev { width: 9px; height: 9px; transition: transform var(--t-fast) var(--ease); opacity: 0.55; }
.nav__link[aria-expanded="true"] .chev { transform: rotate(180deg); }

.megamenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.megamenu[data-open="true"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.megamenu--wide { min-width: 640px; }

/* Menus near the ends of the bar anchor to their edge so they never leave the viewport. */
.megamenu--start { left: 0; transform: translateY(-6px); }
.megamenu--start[data-open="true"] { transform: translateY(0); }
.megamenu--end { left: auto; right: 0; transform: translateY(-6px); }
.megamenu--end[data-open="true"] { transform: translateY(0); }
.megamenu { max-width: calc(100vw - 2 * var(--s-5)); }

.megamenu__head {
  padding: var(--s-3) var(--s-4) var(--s-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-2);
}
.megamenu__head .kicker { display: block; margin-bottom: 2px; }
.megamenu__head p { font-size: 0.8125rem; color: var(--muted); margin: 0; }

.megamenu__list { display: grid; gap: 2px; }
.megamenu--wide .megamenu__list { grid-template-columns: 1fr 1fr; gap: 2px var(--s-3); }

.megamenu__link {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.megamenu__link:hover { background: var(--brand-50); color: var(--brand-700); }
.megamenu__link strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.megamenu__link span { display: block; font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }
.megamenu__link:hover span { color: var(--body); }

.masthead__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
@media (max-width: 1179px) { .masthead__actions .btn { display: none; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
}
/* Only the header toggle hides on desktop : the drawer's own close button must always show. */
@media (min-width: 1180px) { .masthead .nav-toggle { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--surface);
  overflow-y: auto;
  padding: var(--s-5) 0 var(--s-9);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-base) var(--ease), visibility var(--t-base);
}
.drawer[data-open="true"] { transform: translateX(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-6); }
.drawer__group { border-top: 1px solid var(--line); }
.drawer__group > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.drawer__group > button .chev { width: 12px; transition: transform var(--t-fast) var(--ease); }
.drawer__group > button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.drawer__panel { display: none; padding-bottom: var(--s-4); }
.drawer__panel[data-open="true"] { display: grid; gap: 2px; }
.drawer__panel a {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--brand-50);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9375rem;
}
.drawer__panel a:hover { background: var(--brand-100); }
.drawer__cta { margin-top: var(--s-6); display: grid; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.84);
  padding-block: var(--s-9) var(--s-9);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(99, 32, 128, 0.75) 0%, rgba(42, 12, 54, 0) 62%),
    radial-gradient(90% 70% at 4% 96%, rgba(23, 121, 90, 0.32) 0%, rgba(42, 12, 54, 0) 60%);
  z-index: -1;
}
.hero h1 { color: #fff; }
/* The hero is a dark band, so its eyebrow needs the dark-section treatment.
   Without this it renders brand purple on deep ink at 1.7:1. */
.hero .eyebrow { color: var(--mint-200); }
.hero .eyebrow::before { background: var(--mint-400); }
.hero .lede { color: rgba(255, 255, 255, 0.86); }

.hero--home { padding-block: var(--s-10) var(--s-10); }
.hero__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-9); }
}

.hero__statement {
  font-family: var(--font-display);
  font-size: var(--step-5);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 var(--s-5);
}
.hero__statement em { font-style: italic; color: var(--mint-200); }

.hero__actions { margin-top: var(--s-7); }
.hero__note { margin-top: var(--s-5); font-size: 0.875rem; color: rgba(255,255,255,0.62); }

/* Page hero (interior pages) */
.hero--page { padding-block: var(--s-8) var(--s-8); }
.hero--page h1 { font-size: var(--step-4); margin-bottom: var(--s-4); }
.hero--page .lede { max-width: 60ch; }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--s-5);
  list-style: none; padding: 0;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.breadcrumb a:hover { color: var(--mint-200); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); opacity: 0.5; }

/* Orbit graphic : built from the OnKommon mark geometry */
.orbit { width: 100%; max-width: 460px; margin-inline: auto; }
.orbit .ring { fill: none; stroke: rgba(210, 249, 234, 0.22); stroke-width: 1; }
.orbit .ring--dash { stroke-dasharray: 3 9; stroke: rgba(210, 249, 234, 0.34); }
.orbit .arc { fill: none; stroke: var(--mint-200); stroke-width: 7; stroke-linecap: round; }
.orbit .bar { stroke: var(--mint-200); stroke-width: 7; stroke-linecap: round; }
.orbit .node { fill: var(--mint-400); }
.orbit .node--dim { fill: rgba(210, 249, 234, 0.4); }
.orbit .spin { transform-origin: 200px 200px; animation: orbit-spin 46s linear infinite; }
.orbit .spin--rev { animation-duration: 68s; animation-direction: reverse; }

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

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.card h3 { margin-bottom: 0; }
.card p { margin-bottom: 0; }
.card > .link-arrow { margin-top: auto; padding-top: var(--s-3); }

a.card { text-decoration: none; color: var(--body); }
a.card:hover { border-color: var(--brand-400); transform: translateY(-3px); box-shadow: var(--shadow-md); }
a.card:hover h3 { color: var(--brand-700); }

.card__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-100);
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
}
.card__tag--mint { color: var(--mint-700); background: var(--mint-200); }
.card__tag--free { color: var(--mint-700); background: var(--mint-100); border: 1px solid var(--mint-400); }

.card--dark {
  background: var(--ink-800);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}
.card--dark h3 { color: #fff; }

.card--flush { background: transparent; border: 0; padding: 0; }

/* Job cards: DECIDE / TRACK / CATCH / PROTECT */
.jobcard { position: relative; overflow: hidden; }
.jobcard__word {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--mint-700);
  background: var(--mint-100);
  border: 1px solid var(--mint-400);
  border-radius: var(--r-pill);
  padding: 4px var(--s-3);
  align-self: flex-start;
}

/* Layer cards (CloneTrace, SynerGx …) */
.layer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
}
.layer .h-sub { margin-bottom: var(--s-2); }
.tm { font-family: var(--font-mono); font-size: 0.75em; vertical-align: super; color: var(--brand-500); }
.section--dark .tm { color: var(--mint-400); }
.layer p { margin: 0; font-size: 0.9375rem; }
.section--dark .layer { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); border-left-color: var(--mint-400); }

/* Stat / number highlight */
.stat { display: flex; flex-direction: column; gap: var(--s-1); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  color: var(--brand-700);
}
.section--dark .stat__value { color: var(--mint-200); }
.stat__label { font-size: 0.875rem; color: var(--muted); }
.section--dark .stat__label { color: rgba(255,255,255,0.7); }

/* --------------------------------------------------------------------------
   9. Steppers, stages and key points
   -------------------------------------------------------------------------- */

/* Numbered stepper: a connected line of steps rather than stacked boxes. */
.stepper {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.step__dot {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--brand-700);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px var(--paper);
}

.step__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: 2px;
}

.step__title {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.35;
}

.step__body {
  margin: var(--s-2) 0 0;
  font-size: 0.9375rem;
  max-width: 46ch;
}

/* Vertical connector */
.stepper:not(.stepper--row) .step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: calc(var(--s-5) * -1);
  width: 2px;
  background: linear-gradient(var(--brand-200), var(--brand-200));
}

/* Horizontal on wide screens */
@media (min-width: 900px) {
  .stepper--row {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--s-6);
  }
  .stepper--row .step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  .stepper--row .step::after {
    content: "";
    position: absolute;
    left: 44px;
    right: calc(var(--s-6) * -1);
    top: 22px;
    height: 2px;
    background: var(--brand-200);
  }
  .stepper--row .step:last-child::after { display: none; }
  .stepper--row .step__body { max-width: none; }
}

/* Dark-section variants */
.section--dark .step__dot { background: var(--mint-200); color: var(--ink-900); box-shadow: 0 0 0 6px var(--ink-900); }
.section--dark .step__label { color: var(--mint-200); }
.section--dark .step__title { color: #fff; }
.section--dark .stepper:not(.stepper--row) .step:not(:last-child)::before,
.section--dark .stepper--row .step::after { background: rgba(210, 249, 234, 0.3); }

/* Four-stage arc */
.stages { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 700px)  { .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }

.stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-700);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.stage__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.stage__word {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--mint-700);
  background: var(--mint-100);
  border: 1px solid var(--mint-400);
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
  align-self: flex-start;
  margin: 0;
}
.stage h3 { font-size: var(--step-1); font-family: var(--font-ui); font-weight: 600; margin: var(--s-2) 0 0; }
.stage p:not([class]) { font-size: 0.9375rem; margin: 0; }
.stage .link-arrow { margin-top: auto; padding-top: var(--s-4); }

/* Stat band */
.statband {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
  padding-top: var(--s-6);
}
@media (min-width: 600px) { .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .statband { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.statband__item { display: grid; gap: var(--s-1); }
.statband__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}
.statband__label { font-size: 0.9375rem; color: var(--muted); }
.section--dark .statband { border-top-color: rgba(255,255,255,0.16); }
.section--dark .statband__value { color: var(--mint-200); }
.section--dark .statband__label { color: rgba(255,255,255,0.72); }

/* Key points: short, scannable, no long prose */
.keypoints { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 700px)  { .keypoints--2, .keypoints--3, .keypoints--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .keypoints--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .keypoints--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.keypoint { border-top: 2px solid var(--brand-700); padding-top: var(--s-4); }
.keypoint .h-sub { margin-bottom: var(--s-2); }
.keypoint p { margin: 0; font-size: 0.9375rem; }
.section--dark .keypoint { border-top-color: var(--mint-400); }

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: var(--s-6) 0 0; border-radius: var(--r-md); }
.table-scroll:focus-visible { outline-offset: 0; }

table.data {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.9375rem;
  text-align: left;
}
table.data caption {
  text-align: left;
  font-size: 0.875rem;
  color: var(--muted);
  padding-bottom: var(--s-3);
}
table.data th, table.data td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.data tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 1%;
  white-space: nowrap;
}
/* Row-header links fill the cell so they are comfortable to tap. */
table.data tbody th a {
  display: block;
  padding-block: 10px;
  margin-block: -10px;
}
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--brand-50); }
table.data .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Terminology table : quieter */
table.data--terms tbody th { color: var(--brand-700); font-family: var(--font-ui); }

.section--dark table.data { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.82); }
.section--dark table.data thead th { background: rgba(255,255,255,0.07); color: var(--mint-200); border-bottom-color: rgba(255,255,255,0.2); }
.section--dark table.data th, .section--dark table.data td { border-bottom-color: rgba(255,255,255,0.12); }
.section--dark table.data tbody th { color: #fff; }
.section--dark table.data tbody tr:hover { background: rgba(255,255,255,0.05); }

/* --------------------------------------------------------------------------
   11. Editorial blocks
   -------------------------------------------------------------------------- */

/* Decoder : plain-language explainer, mint */
.decoder {
  background: var(--mint-100);
  border: 1px solid var(--mint-400);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin: var(--s-6) 0 0;
}
.decoder__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-700);
  margin-bottom: var(--s-3);
}
.decoder__label svg { width: 14px; height: 14px; flex: none; }
.decoder .h-sub { color: var(--ink-900); margin-bottom: var(--s-2); }
.decoder p { color: #234438; margin-bottom: var(--s-3); }
.decoder p:last-child { margin-bottom: 0; }

/* Callout : neutral highlight */
.callout {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  margin: var(--s-6) 0 0;
}
.callout .h-sub { margin-bottom: var(--s-2); }
.callout p:last-child { margin-bottom: 0; }

/* The callout has a light surface of its own. Inside a dark band it would
   inherit that band's white text onto near-white, so it needs a dark surface. */
.section--dark .callout,
.hero .callout,
.cta-block .callout {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.section--dark .callout .h-sub { color: #fff; }

.callout--rule {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--brand-500);
  border-radius: 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-6);
}

/* Pull statement : big serif line used for principles */
/* Two jobs, two treatments. `.thesis` is a one-line aphorism and earns the
   display face at size. `.governing` is the two-or-three-sentence idea that
   organises a dictionary entry: at 34px over 34ch it became six lines of large
   serif, which reads as a headline that will not end. It is set at reading size
   and marked as a statement by the rule rather than by scale. */

.thesis {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
  color: var(--ink);
  border-top: 2px solid var(--brand-700);
  padding-top: var(--s-5);
  margin: 0 0 var(--s-5);
  max-width: 34ch;
  text-wrap: balance;
}
.section--dark .thesis { color: #fff; border-top-color: var(--mint-400); }

.governing {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
  border-left: 3px solid var(--brand-700);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  margin: 0 0 var(--s-5);
  max-width: 62ch;
}
.governing strong,
.governing em { color: inherit; }
.section--dark .governing { color: #fff; border-left-color: var(--mint-400); }

/* Research & evidence */
.evidence { border-top: 1px solid var(--line); }
.evidence__study {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) {
  .evidence__study { grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr) minmax(0, 15rem); gap: var(--s-5); align-items: start; }
}
.evidence__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--brand-500);
  padding-top: 4px;
}
.evidence__claim { font-weight: 600; color: var(--ink); margin-bottom: var(--s-2); }
.evidence__body { font-size: 0.9375rem; margin: 0; }
.evidence__cite {
  font-size: 0.8125rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
  padding-top: 2px;
}
.evidence__disclaimer {
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: var(--s-5);
  max-width: 72ch;
}
.section--dark .evidence, .section--dark .evidence__study { border-color: rgba(255,255,255,0.14); }
.section--dark .evidence__claim { color: #fff; }
.section--dark .evidence__cite, .section--dark .evidence__disclaimer { color: rgba(255,255,255,0.62); }

/* Transparency : what we DO / DON'T */
.transparency { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 800px) { .transparency { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.transparency__col {
  border-radius: var(--r-lg);
  padding: var(--s-6);
  border: 1px solid var(--line);
  background: var(--surface);
}
.transparency__col--do { border-color: var(--mint-400); background: var(--mint-100); }
.transparency__col--dont { border-color: var(--line-strong); background: var(--brand-50); }
.transparency__col .h-sub { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
/* Same light-surface-in-a-dark-band problem as the callout. */
.section--dark .transparency__col { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); }
.section--dark .transparency__col--do { border-color: var(--mint-400); }
.section--dark .transparency__col--dont { border-color: rgba(255, 255, 255, 0.28); }
.section--dark .transparency__col .h-sub { color: #fff; }
.section--dark .transparency__col li { color: rgba(255, 255, 255, 0.88); }
.transparency__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.transparency__col li { position: relative; padding-left: var(--s-6); font-size: 0.9375rem; }
.transparency__col li::before {
  position: absolute; left: 0; top: 0.05em;
  font-family: var(--font-mono);
  font-weight: 600;
}
.transparency__col--do li { color: #234438; }
.transparency__col--do li::before { content: "✓"; color: var(--mint-700); }
.transparency__col--dont li::before { content: "✕"; color: var(--brand-600); }

/* Regulatory / important information : quiet, legal register */
.legal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: var(--s-5);
}
.legal .h-sub { font-size: 0.9375rem; color: var(--ink); margin-bottom: var(--s-3); }
.legal ul { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.legal li { position: relative; padding-left: var(--s-5); }
.legal li::before { content: "•"; position: absolute; left: var(--s-2); color: var(--brand-400); }
.legal p:last-child { margin-bottom: 0; }

/* Pricing band */
.pricing {
  border: 1px solid var(--brand-200);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--brand-50), var(--surface));
  padding: var(--s-6);
  margin-top: var(--s-6);
}
.pricing__figure {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--brand-700);
  margin-bottom: var(--s-2);
}
.pricing__figure .unit { font-family: var(--font-ui); font-size: 0.9375rem; color: var(--muted); }
.pricing__note { font-size: 0.9375rem; margin: 0; }
/* Pricing also appears inside dark bands, where brand purple on deep ink is
   1.37:1. */
.section--dark .pricing__figure { color: var(--mint-200); }
.section--dark .pricing__figure .unit { color: rgba(255, 255, 255, 0.7); }

/* Gene / marker chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.chips li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--brand-700);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 4px var(--s-3);
}
.chips--mint li { color: var(--mint-700); border-color: var(--mint-400); background: var(--mint-100); }

/* Second-opinion recurring block */
.second-opinion {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  background: var(--ink-800);
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
  margin-top: var(--s-6);
}
@media (min-width: 860px) {
  .second-opinion { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); }
}
.second-opinion .h-sub { color: #fff; margin-bottom: var(--s-2); }
.second-opinion p { margin: 0; font-size: 0.9375rem; }

/* Accordion (FAQ) */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.3;
  color: var(--ink);
}
.accordion__trigger:hover { color: var(--brand-700); }
.accordion__icon { flex: none; width: 22px; height: 22px; margin-top: 4px; position: relative; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--brand-600);
  transition: transform var(--t-base) var(--ease);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }
.accordion__panel { display: none; padding-bottom: var(--s-5); max-width: var(--prose); }
.accordion__panel[data-open="true"] { display: block; }

/* Dictionary / glossary */
.deflist { display: grid; gap: 0; margin: var(--s-6) 0 0; }
.deflist__row {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 700px) {
  .deflist__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s-6); align-items: baseline; }
}
.deflist__row:first-child { border-top: 1px solid var(--line); }
.deflist__term { font-weight: 600; color: var(--brand-700); }
.deflist__def { margin: 0; font-size: 0.9375rem; }

/* Video playlist */
.playlist { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-3); }
.playlist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.playlist__play {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  display: grid; place-items: center;
  flex: none;
}
.playlist__play svg { width: 12px; height: 12px; }
.playlist strong { display: block; color: var(--ink); }
.playlist span { font-size: 0.9375rem; }

/* Nothing in the series is recorded yet. A play button that plays nothing is a
   broken promise, so the pending rows are muted and each carries its own label
   rather than relying on one note further up the page. */
.playlist--pending li { grid-template-columns: auto minmax(0, 1fr) auto; }
.playlist--pending .playlist__play { background: var(--line); color: var(--muted); }
.playlist__soon {
  align-self: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  padding: 0.3rem var(--s-3);
}
@media (max-width: 560px) {
  .playlist--pending li { grid-template-columns: auto minmax(0, 1fr); }
  .playlist__soon { grid-column: 2; justify-self: start; margin-top: var(--s-2); }
}

/* Testimonial placeholder slots */
.quote-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
}
.quote-card figcaption { font-size: 0.8125rem; color: var(--muted); }

/* Editorial note (visible only to the site team, styled but unobtrusive) */
.todo {
  background: var(--warn-bg);
  border: 1px dashed var(--warn-line);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: 0.875rem;
  color: var(--warn-ink);
  margin-top: var(--s-5);
}
.todo strong { color: var(--warn-ink); }

/* --------------------------------------------------------------------------
   12. Shared CTA block
   -------------------------------------------------------------------------- */

.cta-block {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-block::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(99, 32, 128, 0.6) 0%, rgba(42, 12, 54, 0) 60%),
    radial-gradient(60% 100% at 0% 100%, rgba(23, 121, 90, 0.28) 0%, rgba(42, 12, 54, 0) 60%);
  z-index: -1;
}
.cta-block h2 { color: #fff; }
/* Same dark-band problem as the hero: without this the eyebrow is brand purple
   on deep ink, at 1.7:1. */
.cta-block .eyebrow { color: var(--mint-200); }
.cta-block .eyebrow::before { background: var(--mint-400); }
.cta-block__intro { max-width: 52ch; color: rgba(255, 255, 255, 0.82); }

.cta-grid { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 860px) { .cta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }

.cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.cta-card:hover { border-color: rgba(210, 249, 234, 0.5); background: rgba(255, 255, 255, 0.08); }
.cta-card__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--mint-200);
  letter-spacing: 0.1em;
}
.cta-card h3 { color: #fff; font-size: var(--step-1); font-family: var(--font-ui); font-weight: 600; margin: 0; }
.cta-card p { font-size: 0.9375rem; margin: 0; color: rgba(255, 255, 255, 0.78); }
.cta-card .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   13. Page navigation (prev / next within a pillar)
   -------------------------------------------------------------------------- */

.pagenav {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .pagenav { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.pagenav a {
  display: grid;
  gap: 2px;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease);
}
.pagenav a:hover { border-color: var(--brand-400); }
.pagenav .kicker { color: var(--brand-500); }
.pagenav strong { color: var(--ink); font-size: 1.0625rem; }
.pagenav .next { text-align: right; }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--ink-950);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9375rem;
}
.footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.footer a:hover { color: var(--mint-200); text-decoration: underline; }

.footer__signup {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s-8);
}
.footer__signup-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .footer__signup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s-9); } }
.footer__signup h2 { color: #fff; font-size: var(--step-2); margin-bottom: var(--s-2); }
.footer__signup p { margin: 0; }

.signup-form { display: grid; gap: var(--s-3); }
.signup-form label { font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); font-weight: 500; }
.signup-form .field { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.signup-form input {
  flex: 1 1 12rem;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
}
.signup-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.signup-form input:focus-visible { outline-color: var(--mint-400); border-color: var(--mint-400); }
.signup-form .hint { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); margin: 0; }

.footer__main { padding-block: var(--s-8); }
.footer__cols { display: grid; gap: var(--s-7); }
@media (min-width: 640px)  { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__cols { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }

.footer__brand img { width: 170px; margin-bottom: var(--s-4); }
.footer__brand p { font-size: 0.875rem; line-height: 1.6; }

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-200);
  margin-bottom: var(--s-4);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.footer__col a { font-size: 0.875rem; }

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--s-7);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}
.footer__legal p { max-width: 90ch; }
.footer__legal strong { color: rgba(255, 255, 255, 0.8); }
.footer__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__meta ul { display: flex; flex-wrap: wrap; gap: var(--s-5); list-style: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   15. Motion & reveal
   -------------------------------------------------------------------------- */

/* The hidden start state applies only once JS has confirmed it can reveal
   again (see site.js). Without JS the content simply renders. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */

@media print {
  .masthead, .utility-bar, .drawer, .cta-block, .footer__signup, .pagenav { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { background: #fff !important; color: #000 !important; }
  .hero h1, .hero .lede, .hero__statement { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* --------------------------------------------------------------------------
   17. Media placeholders

   These ship. Until the real photograph or film exists, this block is both
   what a visitor sees and what the production team works from, so it is built
   to read as a deliberate shot card rather than as a missing image.
   -------------------------------------------------------------------------- */

.media { margin: var(--s-7) 0 0; }

.media__frame {
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 9);
  display: grid;
  place-content: center;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55)),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px),
    var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Crop marks, so the frame reads as a shot being set up rather than as a
   broken asset. */
.media__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--brand-400);
  opacity: 0.75;
}
.media__corner--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.media__corner--tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.media__corner--bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.media__corner--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }

.media__inner { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }

/* A film brief should be distinguishable from a photo brief before reading the
   badge, so video frames carry a play affordance. */
.media__play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-700);
  color: var(--mint-200);
  box-shadow: 0 0 0 8px rgba(79, 24, 101, 0.1);
}
.media__play svg { width: 18px; height: 18px; margin-left: 2px; }
.section--dark .media__play {
  background: var(--mint-200);
  color: var(--ink-900);
  box-shadow: 0 0 0 8px rgba(210, 249, 234, 0.14);
}

.media__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--surface);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-pill);
  padding: 6px var(--s-4);
}
.media__badge svg { width: 16px; height: 16px; flex: none; }

.media__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  max-width: 24ch;
  text-wrap: balance;
}

.media__specs { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.media__spec {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brand-700);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-sm);
  padding: 3px var(--s-3);
}
.media__spec > span {
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.45em;
}

/* --- The brief ---------------------------------------------------------- */

.media__brief {
  margin-top: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-400);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--surface);
}

.media__briefhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.media__brieflabel {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.media__flag {
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
  border: 1px solid transparent;
}
.media__flag--blocker { color: #7A2718; background: #FDEDE9; border-color: #F0C4B9; }
.media__flag--high    { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.media__flag--later   { color: var(--mint-700); background: var(--mint-100); border-color: var(--mint-400); }

.media__gist { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--body); max-width: 74ch; }

.media__shot {
  margin: var(--s-3) 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--brand-700);
}

.media__cols { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 720px) { .media__cols { grid-template-columns: 1fr 1fr; } }
.media__coltitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-700);
  margin: 0 0 var(--s-2);
}
.media__col--avoid .media__coltitle { color: var(--warn-ink); }
.media__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.media__col li {
  position: relative;
  padding-left: var(--s-5);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body);
}
.media__col li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 2px solid var(--mint-600);
}
.media__col--avoid li::before { border-color: var(--warn-line); border-radius: 1px; }

.media__notes { margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.media__note { display: grid; gap: 2px; }
@media (min-width: 720px) { .media__note { grid-template-columns: 150px 1fr; gap: var(--s-4); } }
.media__note dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.media__note dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--body); }

/* --- On dark bands ------------------------------------------------------ */

.section--dark .media__frame {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 40px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.section--dark .media__corner { border-color: var(--mint-400); }
.section--dark .media__badge {
  color: var(--ink-900);
  background: var(--mint-200);
  border-color: var(--mint-200);
}
.section--dark .media__title { color: #fff; }
.section--dark .media__spec { color: var(--mint-200); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.section--dark .media__spec > span { color: rgba(255,255,255,0.66); }
.section--dark .media__brief {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  border-left-color: var(--mint-400);
}
.section--dark .media__brieflabel { color: var(--mint-200); }
.section--dark .media__gist,
.section--dark .media__col li,
.section--dark .media__note dd { color: rgba(255, 255, 255, 0.88); }
.section--dark .media__shot { color: var(--mint-200); }
.section--dark .media__coltitle { color: var(--mint-200); }
.section--dark .media__col--avoid .media__coltitle { color: #F3D9A8; }
.section--dark .media__col li::before { border-color: var(--mint-400); }
.section--dark .media__col--avoid li::before { border-color: #F3D9A8; }
.section--dark .media__note dt { color: rgba(255, 255, 255, 0.66); }
.section--dark .media__flag--high { color: #F7E6BE; background: rgba(232, 215, 172, 0.16); border-color: rgba(232, 215, 172, 0.5); }
.section--dark .media__flag--blocker { color: #FBC9BC; background: rgba(240, 196, 185, 0.16); border-color: rgba(240, 196, 185, 0.5); }
.section--dark .media__flag--later { color: var(--mint-200); background: rgba(210, 249, 234, 0.14); border-color: var(--mint-400); }

@media (prefers-reduced-motion: no-preference) {
  .media__frame { transition: box-shadow var(--t-base) var(--ease); }
}

/* --------------------------------------------------------------------------
   18. Gene panels
   -------------------------------------------------------------------------- */

.genepanel {
  margin-top: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.genepanel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--brand-50);
  border-bottom: 1px solid var(--line);
}

.genepanel__total {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--brand-700);
  line-height: 1.1;
}
.genepanel__total .num { font-variant-numeric: tabular-nums; }

.genepanel__search { display: grid; gap: var(--s-2); }
.genepanel__search label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.genepanel__search input {
  min-height: 44px;
  min-width: 14rem;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink);
}
.genepanel__search input::placeholder { color: var(--muted); font-family: var(--font-ui); }

.genepanel__empty {
  margin: 0;
  padding: var(--s-5) var(--s-6);
  font-size: 0.9375rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

/* Collapsed by default: show the first group, clip the rest. */
.genepanel__groups {
  padding: var(--s-6);
  display: grid;
  gap: var(--s-6);
  max-height: 22rem;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(#000 60%, transparent 100%);
}
.genepanel[data-open="true"] .genepanel__groups {
  max-height: none;
  overflow: visible;
  mask-image: none;
}
.genepanel[data-searching="true"] .genepanel__groups {
  max-height: none;
  overflow: visible;
  mask-image: none;
}

.genegroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
}
.genegroup__head .h-sub { margin: 0; }
.genegroup__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-100);
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
}
.genegroup__desc { font-size: 0.9375rem; margin: calc(var(--s-3) * -1) 0 var(--s-4); }

.genelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.genelist li {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}
.genelist li[hidden] { display: none; }
.genelist li.is-match {
  background: var(--mint-200);
  border-color: var(--mint-400);
  color: var(--ink-900);
  font-weight: 500;
}

.genegroup[hidden] { display: none; }

.genepanel__note {
  margin: 0;
  padding: 0 var(--s-6) var(--s-5);
  font-size: 0.875rem;
  color: var(--muted);
}

.genepanel__toggle {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-700);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.genepanel__toggle:hover { background: var(--brand-50); }
.genepanel[data-searching="true"] .genepanel__toggle { display: none; }

/* Comparison table: highlight our column */
table.data--compare thead th.is-primary { color: #fff; background: var(--brand-700); }
table.data--compare tbody td:first-of-type { background: var(--brand-50); font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------------------------
   19. Disclosures (progressive disclosure for dense reference material)
   -------------------------------------------------------------------------- */

.disclose {
  margin-top: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.disclose > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4) var(--s-5);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary:hover { color: var(--brand-700); }

.disclose__icon { position: relative; width: 18px; height: 18px; flex: none; }
.disclose__icon::before, .disclose__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--brand-600);
  transition: transform var(--t-fast) var(--ease);
}
.disclose__icon::after { transform: rotate(90deg); }
.disclose[open] .disclose__icon::after { transform: rotate(0deg); }

.disclose__body { padding: 0 var(--s-5) var(--s-5); }
.disclose__body > .table-scroll { margin-top: 0; }
.disclose__body .legal { border: 0; padding: 0; margin: 0; background: none; }
.disclose__body .legal__reg { margin-top: var(--s-4); }

.section--dark .disclose { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.section--dark .disclose > summary { color: #fff; }
.section--dark .disclose__icon::before, .section--dark .disclose__icon::after { background: var(--mint-400); }

/* Layer name / role split, so no dash is needed between them */
.layer .h-sub .layer__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-top: 4px;
}
.section--dark .layer .h-sub .layer__sub { color: var(--mint-200); }

/* --------------------------------------------------------------------------
   20. Real image and video figures
   -------------------------------------------------------------------------- */

.figure { margin: var(--s-6) 0 0; }

.figure__img,
.figure__video {
  width: 100%;
  aspect-ratio: var(--media-ratio, 16 / 9);
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  border: 1px solid var(--line);
  display: block;
}

/* Documents and diagrams should be shown whole, not cropped. */
.figure--contain .figure__img {
  object-fit: contain;
  background: var(--surface);
  padding: var(--s-4);
}

.figure--video .figure__video { border-color: var(--ink-800); background: var(--ink-900); }

.figure__caption {
  margin-top: var(--s-3);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

.section--dark .figure__img,
.section--dark .figure__video { border-color: rgba(255, 255, 255, 0.16); }
.section--dark .figure__caption { color: rgba(255, 255, 255, 0.7); }

/* A photo that runs to the edge of its band */
.figure--bleed .figure__img { border-radius: var(--r-lg); }

@media (prefers-reduced-motion: reduce) {
  .figure__video { /* site.js pauses these; the poster or first frame remains */ }
}

/* --------------------------------------------------------------------------
   21. Interactive care journey
   -------------------------------------------------------------------------- */

.journey {
  margin-top: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* --- Phase track --- */
.journey__track { position: relative; padding: var(--s-7) var(--s-6) var(--s-6); }

.journey__rail,
.journey__progress {
  position: absolute;
  top: calc(var(--s-7) + 27px);
  height: 3px;
  border-radius: var(--r-pill);
}
.journey__rail { left: 12%; right: 12%; background: var(--line-strong); }
.journey__progress {
  left: 12%;
  width: 4%;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  transition: width 520ms var(--ease);
  max-width: 76%;
}

.journey__phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  position: relative;
}

.jphase {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-1) var(--s-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.jphase__dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--brand-700);
  display: grid;
  place-items: center;
  transition: background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.jphase__dot svg { width: 24px; height: 24px; }

.jphase[aria-selected="true"] .jphase__dot {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(79, 24, 101, 0.5);
}
.jphase:hover .jphase__dot { border-color: var(--brand-400); }

.jphase__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  font-weight: 500;
}
.jphase[aria-selected="true"] .jphase__label { color: var(--brand-600); }
.jphase__time { font-size: 0.8125rem; color: var(--muted); }

/* --- Product bars --- */
.journey__bars {
  padding: 0 var(--s-6) var(--s-5);
  display: grid;
  gap: var(--s-3);
}

.jbar-row { display: grid; gap: var(--s-2); align-items: center; }
@media (min-width: 760px) { .jbar-row { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-4); } }

.jbar-name { font-weight: 600; color: var(--brand-700); font-size: 0.9375rem; }

.jbar-track {
  position: relative;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid var(--line);
  overflow: hidden;
}

.jbar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  min-width: 8.5rem;
  border-radius: var(--r-pill);
  background: var(--mint-200);
  border: 1px solid var(--mint-400);
  color: var(--mint-700);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-4);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.jbar__word {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.jbar__role { font-size: 0.8125rem; color: #1D4C3D; }
@media (max-width: 420px) { .jbar__role { display: none; } }
.jbar.is-inactive { opacity: 0.32; filter: grayscale(0.5); }

.journey__always {
  margin: 0;
  padding: var(--s-4) var(--s-6) var(--s-6);
  font-size: 0.9375rem;
  color: var(--muted);
}
.journey__always strong { color: var(--brand-700); }

/* --- Detail panel --- */
.journey__detail {
  border-top: 1px solid var(--line);
  background: var(--brand-50);
  display: grid;
}
@media (min-width: 900px) {
  .journey__detail { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
  .journey__side { border-left: 1px solid var(--line); }
}
.journey__main, .journey__side { padding: var(--s-6); }
.journey__side { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .journey__side { border-top: 0; } }

.journey__main h3 { font-size: var(--step-2); margin-bottom: var(--s-3); }
.journey__main p { font-size: 0.9375rem; margin: 0; max-width: 62ch; }

.jchips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.jchip {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--brand-700);
  background: var(--surface);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-pill);
  padding: 5px var(--s-4);
}

.jside { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.jside__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  font-size: 0.875rem;
  line-height: 1.55;
}
.jside__item strong { display: block; color: var(--brand-700); margin-bottom: 2px; }
.jside__item span { color: var(--body); }

.journey__hint {
  margin: 0;
  padding: var(--s-4) var(--s-6);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--muted);
}

/* Narrow screens: phases become a scrollable row, bars stay full width */
@media (max-width: 760px) {
  /* The timeline positioning cannot hold four staggered bars in a narrow
     track, so each product spans its track and keeps its word. */
  .jbar { position: static; min-width: 0; width: auto !important; left: auto !important; height: 100%; }
  .jbar-track { height: 42px; }
  .jbar.is-inactive { opacity: 0.4; }
}

@media (max-width: 700px) {
  .journey__rail, .journey__progress { display: none; }
  .journey__phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .journey__track { padding: var(--s-6) var(--s-5) var(--s-5); }
  .journey__bars { padding-inline: var(--s-5); }
  .journey__always { padding-inline: var(--s-5); }
  .journey__main, .journey__side { padding: var(--s-5); }
  .journey__hint { padding-inline: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .journey__progress { transition: none; }
  .jphase[aria-selected="true"] .jphase__dot { transform: none; }
}

/* --------------------------------------------------------------------------
   22. Mega-menu columns (solid tumour / blood cancer)
   -------------------------------------------------------------------------- */

.megamenu__columns {
  display: grid;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
}
@media (min-width: 700px) {
  .megamenu__columns { grid-template-columns: 1fr 1fr; }
}

.megacol__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.megacol__letter {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: grid; place-items: center;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  flex: none;
}
.megacol:nth-child(2) .megacol__letter { background: var(--mint-100); color: var(--mint-700); }

.megamenu__link--tight { padding-block: var(--s-2); }

/* --------------------------------------------------------------------------
   23. Test index (solid tumour / blood cancer split)
   -------------------------------------------------------------------------- */

.testindex { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
/* Three families now: solid tumour, blood cancer, and the custom route. */
@media (min-width: 900px) { .testindex { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (min-width: 1180px) { .testindex { grid-template-columns: 1.1fr 1.1fr 0.8fr; } }

.testgroup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.testgroup__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}
.testgroup__letter {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  background: var(--brand-100);
  color: var(--brand-700);
  flex: none;
}
.testgroup__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.testgroup--blood .testgroup__letter { background: var(--mint-100); color: var(--mint-700); }
.testgroup--blood .testgroup__title { color: var(--mint-700); }
.testgroup--custom .testgroup__letter { background: var(--warn-bg); color: var(--warn-ink); }
.testgroup--custom .testgroup__title { color: var(--warn-ink); }

.testlist { list-style: none; margin: 0; padding: 0; }
.testlist li + li { border-top: 1px solid var(--line); }

.testlist a {
  display: grid;
  /* The name is what a reader is looking for, so it is never the column that
     gets squeezed. An `auto` meta column took 206px of a 375px row and left the
     name 43px, wrapping "Signature Custom" onto two lines. */
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-4) var(--s-2);
  margin-inline: calc(var(--s-2) * -1);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
.testlist a:hover { background: var(--brand-50); }
.testlist__name { font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.testlist a:hover .testlist__name { color: var(--brand-700); }
.testlist__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
/* Side by side only once there is room for both, with the name taking priority. */
@media (min-width: 560px) {
  .testlist a { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .testlist__meta { text-align: right; }
}
.testlist__flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-100);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  margin-left: var(--s-2);
  vertical-align: 2px;
}

/* ==========================================================================
   24. Mega menu : intent-first navigation
   ==========================================================================
   Ten brand-name dropdowns asked visitors to know our vocabulary before they
   could navigate. Six intent groups, each with a "what" and a "when" on every
   link, ask them only to know their own situation.
   ========================================================================== */

.nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }

.megamenu--narrow { min-width: 340px; }
.megamenu--wide   { min-width: min(720px, calc(100vw - 3rem)); }
/* The widest panel is centred on the viewport rather than on its trigger, so
   the Services menu does not run off the edge of the screen. site.js sets its
   `top` from the live masthead height; this is the no-JS fallback. */
.megamenu--full {
  width: min(1320px, calc(100vw - 3rem));
  min-width: 0;
  position: fixed;
  left: 50%;
  top: var(--header-h);
  /* Five columns of Signature tests can outgrow a laptop screen, so the panel
     scrolls inside itself rather than running off the bottom. site.js sets the
     exact height from the live masthead position. */
  max-height: var(--menu-max-h, calc(100vh - var(--header-h) - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.megamenu__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); }
.megamenu__head p { max-width: 62ch; }

.mm__grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .megamenu--wide .mm__grid { grid-template-columns: minmax(200px, 250px) 1fr; }
  .megamenu--full .mm__grid { grid-template-columns: minmax(210px, 260px) 1fr; }
}

.mm__feature {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--ink-900), var(--brand-700));
  color: #fff;
  text-decoration: none;
  min-height: 44px;
}
.mm__feature strong { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.2; }
.mm__feature > span:not(.mm__kicker):not(.link-arrow) { font-size: 0.8125rem; color: rgba(255,255,255,0.82); line-height: 1.5; }
.mm__feature .link-arrow { margin-top: auto; color: var(--mint-200); font-size: 0.875rem; }
.mm__feature:hover { color: #fff; }
.mm__feature:hover .link-arrow::after { transform: translateX(3px); }
.mm__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-400);
}

.mm__cols { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .megamenu--wide .mm__cols { grid-template-columns: 1fr 1fr; } }
/* Five columns: Decide, the two Signature families, Monitor, Protect. */
@media (min-width: 900px)  { .megamenu--full .mm__cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .megamenu--full .mm__cols { grid-template-columns: repeat(5, 1fr); } }

.mm__colhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: 0 var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.mm__colnote { text-transform: none; letter-spacing: 0; font-family: var(--font-ui); color: var(--muted); }

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

.mm__link {
  display: grid;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-fast) var(--ease);
}
.mm__link:hover { background: var(--brand-50); color: var(--brand-700); }
.mm__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.mm__what  { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.mm__link:hover .mm__what { color: var(--body); }
.mm__when {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--mint-600);
  margin-top: 2px;
}
.mm__when::before { content: "When: "; opacity: 0.75; }

.mm__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-1);
  border-top: 1px solid var(--line);
}
.mm__quick a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.mm__quick a::after { content: "→"; margin-left: 0.4em; }
.mm__quick a:hover { text-decoration: underline; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brand-700); --btn-bd: transparent; font-weight: 600; }
.btn--ghost:hover { --btn-bg: var(--brand-50); --btn-bd: var(--brand-100); color: var(--brand-700); }
@media (max-width: 1319px) { .masthead__find { display: none; } }

/* Drawer, rebuilt for the same information */
.drawer__group > button { align-items: flex-start; }
.drawer__glabel { display: block; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.drawer__gblurb { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--muted); line-height: 1.45; margin-top: 2px; max-width: 46ch; }
.drawer__group > button .chev { margin-top: 6px; flex: none; }
.drawer__panel[data-open="true"] { gap: 4px; }
.drawer__colhead {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: var(--s-3) 0 var(--s-1);
}
.drawer__panel a { display: grid; gap: 1px; min-height: 44px; align-content: center; }
.drawer__panel a strong { font-size: 0.9375rem; font-weight: 600; }
.drawer__panel a span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.drawer__overview { background: var(--ink-900) !important; color: #fff !important; }
.drawer__overview strong { color: #fff; }
.drawer__overview span { color: var(--mint-200) !important; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.drawer__cta--top { margin: 0 0 var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .drawer__cta--top { grid-template-columns: 1fr 1fr; } }

.footer__more { margin-top: var(--s-7); }
.footer__spread { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ==========================================================================
   25. At a glance, when-lines, questions and marker grids
   ========================================================================== */

.glance {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.section--dark .glance { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); }
.glance__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: 0 0 var(--s-4);
}
.section--dark .glance__title { color: var(--mint-200); }
.glance__list { margin: 0; display: grid; gap: var(--s-3); }
.glance__row { display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.section--dark .glance__row { border-color: rgba(255,255,255,0.12); }
.glance__row:last-child { border-bottom: 0; padding-bottom: 0; }
.glance__row dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--dark .glance__row dt { color: rgba(255,255,255,0.66); }
.glance__row dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); }
.section--dark .glance__row dd { color: #fff; }
.glance__note { margin: var(--s-4) 0 0; font-size: 0.8125rem; color: var(--muted); }
.section--dark .glance__note { color: rgba(255,255,255,0.66); }

.whenline__title { font-family: var(--font-ui); font-size: var(--step-1); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-3); }
.section--dark .whenline__title { color: #fff; }
.whenline__lede { color: var(--muted); margin-bottom: var(--s-5); }
.whenline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.whenline__row {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
  border-left: 2px solid var(--line-strong);
  position: relative;
}
.section--dark .whenline__row { border-left-color: rgba(255,255,255,0.24); }
.whenline__row::before {
  content: "";
  position: absolute;
  left: -6px; top: calc(var(--s-4) + 0.45em);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-700);
  border: 2px solid var(--paper);
}
.section--surface .whenline__row::before { border-color: var(--surface); }
.section--dark .whenline__row::before { background: var(--mint-400); border-color: var(--ink-900); }
.whenline__row:first-child { padding-top: 0; }
.whenline__row:first-child::before { top: 0.45em; }
.whenline__when {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--brand-700);
  font-weight: 500;
}
.section--dark .whenline__when { color: var(--mint-200); }
.whenline__when svg { flex: none; }
.whenline__what { color: var(--body); line-height: 1.6; }
.section--dark .whenline__what { color: rgba(255,255,255,0.88); }
@media (min-width: 860px) {
  .whenline__row { grid-template-columns: minmax(180px, 260px) 1fr; gap: var(--s-5); align-items: start; }
}

.qagrid { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .qagrid { grid-template-columns: 1fr 1fr; align-items: start; } }

.qa {
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-5);
}
.qa--resist { border-left-color: var(--mint-600); }
.section--dark .qa { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); border-left-color: var(--mint-400); }
.section--dark .qa--resist { border-left-color: var(--brand-400); }
.qa__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.section--dark .qa__title { color: #fff; }
.qa__title svg { flex: none; color: var(--brand-600); }
.section--dark .qa__title svg { color: var(--mint-400); }
.qa__lede { margin: 0 0 var(--s-4); font-size: 0.875rem; color: var(--muted); }
.section--dark .qa__lede { color: rgba(255,255,255,0.7); }
.qa__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.qa__list li {
  position: relative;
  padding-left: var(--s-5);
  line-height: 1.6;
  color: var(--body);
}
.section--dark .qa__list li { color: rgba(255,255,255,0.9); }
.qa__list li::before {
  content: "?";
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--brand-500);
}
.section--dark .qa__list li::before { color: var(--mint-400); }

.markers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.section--dark .markers { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.14); }
@media (min-width: 700px) { .markers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .markers { grid-template-columns: repeat(3, 1fr); } }
.marker { background: var(--surface); padding: var(--s-4) var(--s-5); }
.section--dark .marker { background: var(--ink-900); }
.marker__name {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand-700);
  margin: 0 0 var(--s-1);
}
.section--dark .marker__name { color: var(--mint-200); }
.marker__why { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--body); }
.section--dark .marker__why { color: rgba(255,255,255,0.82); }
.markers__note { margin: var(--s-4) 0 0; font-size: 0.8125rem; color: var(--muted); max-width: 78ch; }
.section--dark .markers__note { color: rgba(255,255,255,0.7); }

.catgrid { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .catgrid { grid-template-columns: 1fr 1fr; } }
.cat {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.section--dark .cat { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.cat__name { margin: 0 0 var(--s-2); font-weight: 600; font-size: 1.0625rem; color: var(--ink); line-height: 1.35; }
.section--dark .cat__name { color: #fff; }
.cat__note { margin: 0; color: var(--body); line-height: 1.6; }
.section--dark .cat__note { color: rgba(255,255,255,0.85); }

.factrow { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-5) 0; }
.factrow__item { display: grid; gap: 2px; }
.factrow__label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.factrow__value { font-weight: 600; color: var(--ink); }
.section--dark .factrow__value { color: #fff; }

.svclinks { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
@media (min-width: 760px) { .svclinks { grid-template-columns: 1fr 1fr; } }
.svclink {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.svclink:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); }
.svclink__name { font-weight: 600; color: var(--ink); }
.svclink__why { font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.svclink .link-arrow { font-size: 0.8125rem; margin-top: var(--s-2); }

/* Sticky in-page contents */
.jumpnav {
  position: sticky;
  /* The masthead's own height, not the full header: the utility bar above it
     scrolls away, so pinning to --header-h leaves a gap once scrolled. */
  top: var(--masthead-h, 77px);
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.jumpnav__title { display: none; }
.jumpnav__links {
  width: min(100% - var(--s-6), var(--wrap));
  margin-inline: auto;
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: var(--s-2) 0;
  -webkit-overflow-scrolling: touch;
}
.jumpnav__links::-webkit-scrollbar { display: none; }

/* A rail wider than the screen has to say so. The fade is applied to the edge
   that actually has chips behind it, set by script, so a rail that fits shows
   its first and last chip at full strength instead of half-dissolved. */
.jumpnav__links[data-overflow="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.jumpnav__links[data-overflow="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}
.jumpnav__links[data-overflow="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .jumpnav__links { scroll-behavior: auto; }
}
.jumpnav__links a {
  flex: none;
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
}
.jumpnav__links a:hover { background: var(--brand-50); color: var(--brand-700); }
.jumpnav__links a.is-here { background: var(--brand-700); color: #fff; }
/* The rail used to be hidden below 700px. That removed in-page navigation from
   exactly the readers who need it most: these pages run to several screens on a
   phone, and the drawer above carries site navigation, not contents. It stays,
   slimmed down, and scrolls sideways the way a phone expects. */
@media (max-width: 700px) {
  .jumpnav__links {
    width: calc(100% - var(--s-4));
    gap: 0.25rem;
    padding: 0.3125rem 0;
  }
  .jumpnav__links a {
    min-height: 36px;
    padding: var(--s-1) var(--s-3);
    font-size: 0.8125rem;
  }
}

/* ==========================================================================
   26. Cancer Dictionary
   ========================================================================== */

.dxsearch { max-width: 720px; margin-bottom: var(--s-5); }
.dxsearch__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--s-2);
}
.dxsearch__field { position: relative; }
.dxsearch input {
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
}
.dxsearch input::placeholder { color: var(--muted); }
.dxsearch input:focus-visible { border-color: var(--brand-600); }
.dxsearch__hint { margin: var(--s-2) 0 0; font-size: 0.8125rem; color: var(--muted); }

.dxchips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.dxchip {
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--body);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dxchip .num { font-variant-numeric: tabular-nums; opacity: 0.6; margin-left: 0.35em; }
.dxchip:hover { border-color: var(--brand-400); color: var(--brand-700); }
.dxchip.is-on { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.dxchip.is-on .num { opacity: 0.75; }

.dxempty { margin: 0 0 var(--s-5); color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }

.dxgrid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .dxgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .dxgrid { grid-template-columns: repeat(3, 1fr); } }

.dxcard {
  content-visibility: auto;
  contain-intrinsic-size: auto 260px;
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dxcard:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dxcard__system {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-600);
}
.dxcard__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.15; color: var(--ink); }
.dxcard__gov { font-size: 0.875rem; line-height: 1.55; color: var(--body); }
.dxcard .link-arrow { font-size: 0.8125rem; margin-top: var(--s-2); }

/* Entry pages */
.dxlead { display: grid; gap: var(--s-6); }
@media (min-width: 980px) { .dxlead { grid-template-columns: 1fr minmax(300px, 380px); gap: var(--s-8); align-items: start; } }
.dxlead__side { position: sticky; top: calc(var(--header-h) + 60px); }
@media (max-width: 979px) { .dxlead__side { position: static; } }

.dxknown {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--brand-50);
}
.section--dark .dxknown { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.dxknown__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 var(--s-3);
}
.dxknown__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
@media (min-width: 760px) { .dxknown__list { grid-template-columns: 1fr 1fr; } }
.dxknown__list li { position: relative; padding-left: var(--s-5); font-size: 0.9375rem; line-height: 1.5; }
.dxknown__list li::before {
  content: "";
  position: absolute; left: 2px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-500);
}

.dxsub {
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  margin: var(--s-7) 0 var(--s-4);
}
.section--dark .dxsub { color: #fff; }

.dxpanels { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .dxpanels { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.dxpanel {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.dxpanel h3 { font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--s-3); }
.dxpanel p { color: var(--body); line-height: 1.6; }
.dxpanel .link-arrow { margin-top: auto; font-size: 0.875rem; }

.dxsvc-lede { font-size: 0.9375rem; color: var(--muted); max-width: 70ch; }

.dxrels { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dxrel {
  display: grid;
  gap: 1px;
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}
.dxrel:hover { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-700); }
.dxrel__sys { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.dxcaution {
  margin: var(--s-8) 0 0;
  padding: var(--s-5);
  border-top: 2px solid var(--line-strong);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 80ch;
}

/* ==========================================================================
   27. Biomarker Library
   ========================================================================== */

.bmlist { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .bmlist { grid-template-columns: 1fr 1fr; } }

.bm {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.bm__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.bm__head h3 { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500; color: var(--brand-700); margin: 0; letter-spacing: -0.01em; }
.bm__kind {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint-700);
  background: var(--mint-100);
  border: 1px solid var(--mint-400);
  border-radius: var(--r-pill);
  padding: 3px var(--s-3);
  cursor: help;
}
.bm__aka { margin: 0 0 var(--s-4); font-size: 0.8125rem; color: var(--muted); }
.bm__body { display: grid; gap: var(--s-4); }
.bm__field p:last-child { margin: 0; font-size: 0.9375rem; line-height: 1.6; }
.bm__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s-1);
}
.bm__caution {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--warn-ink);
}
.bm__caution strong { color: var(--warn-ink); }
.bm__rel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; }
.bm__rel > span:first-child {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.bm__rel a {
  font-size: 0.8125rem;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  text-decoration: none;
  border: 1px solid transparent;
}
.bm__rel a:hover { border-color: var(--brand-400); }

/* ==========================================================================
   28. Start here : situation router
   ========================================================================== */

.sit__head { display: flex; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-6); }
.sit__n {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--brand-400);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  flex: none;
}
.sit__head h2 { margin-bottom: var(--s-3); }
.sit__voice {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--brand-700);
  margin: 0;
  max-width: 56ch;
}
.sit__body { display: grid; gap: var(--s-6); }
@media (min-width: 940px) { .sit__body { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }
.sit__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: 0 0 var(--s-3);
}
.sit__truth p { line-height: 1.7; }
.sit__avoid {
  margin: var(--s-5) 0 0;
  padding: var(--s-4);
  border-left: 3px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--warn-ink);
}
.sit__avoid strong { color: var(--warn-ink); }
.sit__routes { display: grid; gap: var(--s-3); align-content: start; }

.route {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.route:hover { border-color: var(--brand-400); box-shadow: var(--shadow-md); }
.route__name { font-weight: 600; color: var(--ink); font-size: 1.0625rem; }
.route__why { font-size: 0.9375rem; color: var(--body); line-height: 1.55; }
.route .link-arrow { font-size: 0.8125rem; margin-top: var(--s-1); }

/* ==========================================================================
   29. Services comparison and choosing
   ========================================================================== */

.data--services th[scope="row"] { min-width: 180px; }
.data--services td { font-size: 0.9375rem; vertical-align: top; }
.services__note { margin-top: var(--s-5); font-size: 0.875rem; color: var(--muted); max-width: 88ch; }

.choose { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .choose { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .choose { grid-template-columns: repeat(3, 1fr); } }
.choose__item { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.choose__item h3 { font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 600; margin-bottom: var(--s-3); }
.choose__item p { margin: 0; color: var(--body); line-height: 1.6; }

/* ==========================================================================
   30. Pipeline readiness, engine layers and collaboration models
   ========================================================================== */

.stagekey { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
@media (min-width: 720px) { .stagekey { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .stagekey { grid-template-columns: repeat(3, 1fr); } }
.stagekey__item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.05);
}
.stagekey__code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-900);
  background: var(--mint-200);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  height: fit-content;
  flex: none;
}
.stagekey__item strong { display: block; color: #fff; font-size: 0.9375rem; margin-bottom: 2px; }
.stagekey__item p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.78); }

/* The stage rail is wider than a phone, so it scrolls inside its own box.
   `min-width: 0` is what actually lets it: a grid item defaults to
   `min-width: auto`, so without it the card refuses to shrink below the rail
   and pushes the whole page sideways. */
.stagebar { margin: var(--s-5) 0; overflow-x: auto; min-width: 0; }
.stagebar__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; min-width: 480px; }
.stagebar__cell {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  background: var(--brand-50);
  border-top: 3px solid var(--line-strong);
  display: grid;
  gap: 1px;
}
.stagebar__cell:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.stagebar__cell:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.stagebar__cell.is-past { background: var(--brand-100); border-top-color: var(--brand-400); }
.stagebar__cell.is-now { background: var(--brand-700); border-top-color: var(--mint-400); }
.stagebar__code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.stagebar__name { font-size: 0.75rem; font-weight: 500; color: var(--body); line-height: 1.3; }
.stagebar__cell.is-past .stagebar__code,
.stagebar__cell.is-past .stagebar__name { color: var(--brand-700); }
.stagebar__cell.is-now .stagebar__code { color: var(--mint-200); }
.stagebar__cell.is-now .stagebar__name { color: #fff; font-weight: 600; }

.progs { display: grid; gap: var(--s-6); }
.progs > * { min-width: 0; }
@media (min-width: 1000px) { .progs { grid-template-columns: 1fr 1fr; } }
.prog {
  min-width: 0;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prog--mint { border-color: var(--mint-400); box-shadow: 0 0 0 3px var(--mint-100); }
.prog__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-600);
}
.prog__head h3 { margin: var(--s-2) 0 var(--s-3); }
.prog__one { font-size: var(--step-1); line-height: 1.5; color: var(--body); margin: 0; max-width: 56ch; }
.prog__grid { margin: 0; display: grid; gap: var(--s-4); }
.prog__grid > div { display: grid; gap: var(--s-1); }
.prog__grid dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-600);
}
.prog__grid dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--body); }
.prog__not {
  padding: var(--s-4);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-md);
}
.prog__not dt { color: var(--warn-ink); }
.prog__not dd { color: var(--warn-ink); }

.io { display: grid; gap: var(--s-4); margin: var(--s-7) 0; }
@media (min-width: 820px) { .io { grid-template-columns: 1fr 1fr; } }
.io__col {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
}
.io__col--out { background: rgba(210, 249, 234, 0.1); border-color: var(--mint-400); }
.io__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-200);
  margin: 0 0 var(--s-3);
}
.io__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.io__col li {
  position: relative;
  padding-left: var(--s-5);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
}
.io__col li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid var(--mint-400);
}

.layers2 { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .layers2 { grid-template-columns: 1fr 1fr; } }
.layer2 {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.layer2 h3 { font-family: var(--font-ui); font-size: var(--step-1); font-weight: 700; color: var(--brand-700); margin-bottom: var(--s-3); }
.layer2__sub { display: block; font-weight: 400; font-size: 0.875rem; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.layer2__does { color: var(--body); line-height: 1.65; }
.layer2__meta { margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); }
.layer2__meta > div { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); align-items: start; }
.layer2__meta dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-600);
  padding-top: 3px;
}
.layer2__cant dt { color: var(--warn-ink); }
.layer2__meta dd { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--body); }

.models { display: grid; gap: var(--s-5); }
@media (min-width: 1000px) { .models { grid-template-columns: 1fr 1fr; } }
.model {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.model__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--brand-500);
}
.model h3 { margin: var(--s-2) 0 var(--s-2); font-family: var(--font-ui); font-size: var(--step-1); font-weight: 600; }
.model__gist { font-size: 0.9375rem; color: var(--mint-600); font-weight: 500; margin-bottom: var(--s-4); }
.model__grid { margin: 0; display: grid; gap: var(--s-3); }
.model__grid > div { display: grid; gap: 2px; }
.model__grid dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.model__grid dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--body); }

/* ==========================================================================
   31. Motion and reduced-motion for the new components
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .dxcard:hover, .route:hover, .svclink:hover { transform: none; }
  .jumpnav__links { scroll-behavior: auto; }
}

@media print {
  .jumpnav, .dxchips, .dxsearch { display: none !important; }
  .dxcard, .prog, .bm, .model, .layer2 { break-inside: avoid; }
}

/* ==========================================================================
   32. Laboratory accreditation

   A row of logos proves nothing. Each item states what the standard actually
   certifies, so the block is evidence rather than decoration.
   ========================================================================== */

.accredblock { margin-top: var(--s-7); }
.accredblock__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 var(--s-3);
}
.section--dark .accredblock__title { color: var(--mint-200); }
.accred__lede { margin-bottom: var(--s-5); max-width: 70ch; }

.accreds { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .accreds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .accreds { grid-template-columns: repeat(3, 1fr); } }
.accreds--compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.accred {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-500);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface);
}
.section--dark .accred {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: var(--mint-400);
}
.accred__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--brand-700);
  letter-spacing: -0.01em;
}
.section--dark .accred__name { color: var(--mint-200); }
.accred__scope {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}
.section--dark .accred__scope { color: #fff; }
.accred__what {
  margin: var(--s-3) 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body);
}
.section--dark .accred__what { color: rgba(255, 255, 255, 0.85); }

.accredblock__note {
  margin: var(--s-5) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 80ch;
}
.section--dark .accredblock__note { color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   33. Report map and One Path

   Both are ported from supplied prototypes. Their idea is kept and their
   palette is not: they use this design system's tokens so they read as part of
   the site rather than as embedded artwork.
   ========================================================================== */

/* Light by default, with a dark-band override, so the component works wherever
   it is placed rather than assuming the section behind it. */

.rmap { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 940px) {
  .rmap { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
}

.rmap__tabs { display: grid; gap: var(--s-2); }
.rmap__tab {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: var(--s-4);
  min-height: 44px;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rmap__tab:hover { background: var(--brand-50); border-left-color: var(--brand-400); }
.rmap__tab[aria-selected="true"] {
  background: var(--brand-50);
  border-color: var(--brand-200);
  border-left-color: var(--brand-700);
}
.rmap__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--mint-600);
}
.rmap__label { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.rmap__blurb { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.rmap__tab[aria-selected="true"] .rmap__blurb { color: var(--body); }

.rmap__stage {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--s-6);
  min-height: 320px;
}
.rmap__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin: 0 0 var(--s-2);
}
.rmap__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
.rmap__body { color: var(--body); max-width: 62ch; }
.rmap__rows { margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.rmap__row { display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.rmap__row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 700px) { .rmap__row { grid-template-columns: minmax(0, 230px) 1fr; gap: var(--s-4); } }
.rmap__row dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mint-600);
}
.rmap__row dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--body); }
.rmap__page {
  margin: var(--s-5) 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.rmap__hint { margin: var(--s-4) 0 0; font-size: 0.875rem; color: var(--muted); }

/* Dark band */
.section--dark .rmap__tab {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.section--dark .rmap__tab:hover { background: rgba(255, 255, 255, 0.08); border-left-color: var(--mint-400); }
.section--dark .rmap__tab[aria-selected="true"] {
  background: rgba(210, 249, 234, 0.1);
  border-color: rgba(210, 249, 234, 0.35);
  border-left-color: var(--mint-200);
}
.section--dark .rmap__n { color: var(--mint-400); }
.section--dark .rmap__label { color: #fff; }
.section--dark .rmap__blurb { color: rgba(255, 255, 255, 0.62); }
.section--dark .rmap__tab[aria-selected="true"] .rmap__blurb { color: rgba(255, 255, 255, 0.85); }
.section--dark .rmap__stage {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}
.section--dark .rmap__kicker { color: var(--mint-200); }
.section--dark .rmap__title { color: #fff; }
.section--dark .rmap__body { color: rgba(255, 255, 255, 0.88); }
.section--dark .rmap__row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.section--dark .rmap__row dt { color: var(--mint-200); }
.section--dark .rmap__row dd { color: rgba(255, 255, 255, 0.85); }
.section--dark .rmap__page,
.section--dark .rmap__hint { color: rgba(255, 255, 255, 0.6); }

/* --- One Path ----------------------------------------------------------- */

.opath { position: relative; margin-top: var(--s-6); }
.opath__axis {
  display: none;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--s-3);
}
@media (min-width: 900px) { .opath__axis { display: flex; } }

.opath__rail { display: none; }
@media (min-width: 900px) {
  .opath__rail {
    display: block;
    position: relative;
    height: 4px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--mint-400), var(--brand-400));
    margin-bottom: var(--s-5);
  }
  .opath__progress {
    position: absolute;
    left: 0; top: 0; height: 100%;
    width: 16.6%;
    border-radius: var(--r-pill);
    background: var(--mint-200);
    transition: width var(--t-base) var(--ease);
  }
}

.opath__stages { display: grid; gap: var(--s-3); }
@media (min-width: 700px) { .opath__stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .opath__stages { grid-template-columns: repeat(4, 1fr); } }

.opath__stage, .opath__any {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  text-align: left;
  padding: var(--s-4);
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.opath__stage:hover, .opath__any:hover { border-color: rgba(210, 249, 234, 0.45); transform: translateY(-3px); }
.opath__stage[aria-selected="true"], .opath__any[aria-selected="true"] {
  background: rgba(210, 249, 234, 0.1);
  border-color: var(--mint-200);
}
.opath__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 3px solid var(--mint-400);
  background: var(--ink-900);
}
.opath__stage[aria-selected="true"] .opath__dot { background: var(--mint-200); }
.opath__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-400);
}
.opath__title { font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
.opath__short { font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.opath__stage[aria-selected="true"] .opath__short,
.opath__any[aria-selected="true"] .opath__short { color: rgba(255, 255, 255, 0.85); }
.opath__pill {
  justify-self: start;
  margin-top: var(--s-1);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid rgba(210, 249, 234, 0.3);
  background: rgba(210, 249, 234, 0.08);
  color: var(--mint-200);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.opath__any { border-style: dashed; border-color: rgba(210, 249, 234, 0.42); }
.opath__anytop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); justify-content: space-between; }
.opath__anyname { font-size: 1.0625rem; font-weight: 600; }
.opath__badge {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint-200);
}

.opath__branch {
  position: relative;
  margin: var(--s-5) 0 0 auto;
  width: min(620px, 100%);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}
.opath__branch::before {
  content: "";
  position: absolute;
  left: -2px; top: var(--s-5); bottom: var(--s-5);
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--mint-200);
}
.opath__branchlabel {
  display: inline-flex;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(154, 99, 169, 0.35);
  color: #EDE4F1;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.opath__branch h3 { margin: var(--s-3) 0 var(--s-2); font-family: var(--font-ui); font-size: var(--step-1); font-weight: 600; color: #fff; }
.opath__branch p { margin: 0 0 var(--s-3); font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,.85); }

.opath__detail {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.opath__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint-200);
  margin: 0 0 var(--s-2);
}
.opath__q {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 var(--s-3);
}
.opath__copy { color: rgba(255, 255, 255, 0.88); max-width: 66ch; }
.opath__next {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.9375rem;
  color: #fff;
}
.opath__next span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-200);
  margin-bottom: var(--s-1);
}
.opath__links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-4); }
.opath__note { margin: var(--s-5) 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); max-width: 80ch; }

/* ==========================================================================
   34. Video: click to play, plays once

   The film waits behind a play button rather than starting on its own. A
   documentary about a cancer diagnosis autoplaying while someone reads is
   intrusive, and a loop implies there is nothing to finish.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.figure__videowrap {
  position: relative;
  aspect-ratio: var(--media-ratio, 16 / 9);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
}
.figure__videowrap .figure__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.videoplay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--s-3);
  justify-items: center;
  width: 100%;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  color: #fff;
  background:
    radial-gradient(circle at center, rgba(42, 12, 54, 0.35), rgba(26, 7, 34, 0.72));
  transition: opacity var(--t-base) var(--ease), visibility var(--t-base);
}
.videoplay[hidden] { display: none; }
.videoplay__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--mint-200);
  color: var(--ink-900);
  box-shadow: 0 0 0 10px rgba(210, 249, 234, 0.16);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.videoplay__icon svg { width: 24px; height: 24px; margin-left: 3px; }
.videoplay:hover .videoplay__icon {
  transform: scale(1.06);
  box-shadow: 0 0 0 16px rgba(210, 249, 234, 0.14);
}
.videoplay__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.videoplay:focus-visible { outline: 3px solid var(--mint-200); outline-offset: -6px; }

@media (prefers-reduced-motion: reduce) {
  .videoplay__icon, .videoplay:hover .videoplay__icon { transform: none; transition: none; }
}

/* ==========================================================================
   35. Motion

   Two rules govern everything here. Motion carries meaning, so elements enter
   from the direction they belong rather than all sliding the same way. And
   nothing can get stuck invisible: every hidden start state is applied only
   once JavaScript has confirmed it can undo it, and reduced-motion turns the
   whole system off rather than merely speeding it up.
   ========================================================================== */

/* --- Staggered children -------------------------------------------------
   A grid whose items appear together reads as one block. Appearing in
   sequence tells the eye there are several things and which order to read
   them in. Capped so a long list never feels like it is buffering. */

.js-reveal [data-reveal] .grid > *,
.js-reveal [data-reveal] .keypoints > *,
.js-reveal [data-reveal] .stages > *,
.js-reveal [data-reveal] .dxgrid > *,
.js-reveal [data-reveal] .catgrid > *,
.js-reveal [data-reveal] .markers > *,
.js-reveal [data-reveal] .accreds > *,
.js-reveal [data-reveal] .stepper > *,
.js-reveal [data-reveal] .whenline__row,
.js-reveal [data-reveal] .statband__item,
.js-reveal [data-reveal] .opath__stages > *,
.js-reveal [data-reveal] .progs > *,
.js-reveal [data-reveal] .models > *,
.js-reveal [data-reveal] .layers2 > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
  transition-delay: calc(var(--stagger-i, 0) * var(--t-stagger));
}
.js-reveal [data-reveal].is-visible .grid > *,
.js-reveal [data-reveal].is-visible .keypoints > *,
.js-reveal [data-reveal].is-visible .stages > *,
.js-reveal [data-reveal].is-visible .dxgrid > *,
.js-reveal [data-reveal].is-visible .catgrid > *,
.js-reveal [data-reveal].is-visible .markers > *,
.js-reveal [data-reveal].is-visible .accreds > *,
.js-reveal [data-reveal].is-visible .stepper > *,
.js-reveal [data-reveal].is-visible .whenline__row,
.js-reveal [data-reveal].is-visible .statband__item,
.js-reveal [data-reveal].is-visible .opath__stages > *,
.js-reveal [data-reveal].is-visible .progs > *,
.js-reveal [data-reveal].is-visible .models > *,
.js-reveal [data-reveal].is-visible .layers2 > * {
  opacity: 1;
  transform: none;
}

/* Media enters with a slight scale, because a photograph settling into place
   reads differently from a text block sliding up. */
.js-reveal [data-reveal] .figure,
.js-reveal [data-reveal] .media {
  opacity: 0;
  transform: scale(0.985) translateY(12px);
  transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease);
  transition-delay: 40ms;
}
.js-reveal [data-reveal].is-visible .figure,
.js-reveal [data-reveal].is-visible .media { opacity: 1; transform: none; }

/* --- Hero -----------------------------------------------------------------
   The one place worth choreographing. Each part enters in reading order, so
   the eye is led down the page rather than presented with everything at once. */

.hero__seq > * { --hero-i: 0; }
.js-hero .hero__seq > * {
  opacity: 0;
  transform: translateY(18px);
}
.js-hero.is-ready .hero__seq > * {
  opacity: 1;
  transform: none;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: calc(var(--hero-i, 0) * 65ms);
}

/* The orbit arrives last, scaling up from the centre it already rotates around. */
.js-hero .hero__art { opacity: 0; transform: scale(0.94); }
.js-hero.is-ready .hero__art {
  opacity: 1;
  transform: none;
  transition: opacity 640ms var(--ease) 160ms, transform 640ms var(--ease) 160ms;
}

/* A slow drift on the hero's ambient light, so a static hero is not quite
   static. Very low amplitude: it should be felt rather than noticed. */
/* --- Counting numbers ----------------------------------------------------
   Statband figures count up when they scroll into view. The final value is in
   the HTML, so with JS off it is simply correct. */
.statband__value { font-variant-numeric: tabular-nums; }

/* --- Interaction polish -------------------------------------------------- */

.card, .dxcard, .route, .svclink, .choose__item, .prog, .model, .layer2, .accred {
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.card:hover, .choose__item:hover, .accred:hover { border-color: var(--brand-400); }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* The mark in the masthead turns a little as the header sticks, which is the
   only feedback the header itself gives that the page has moved. */
.masthead .brand__mark { transition: transform var(--t-enter) var(--ease); }
.masthead.is-stuck .brand__mark { transform: rotate(-90deg); }

@media (prefers-reduced-motion: reduce) {
  /* Everything above is decoration. None of it may hide content. */
  .js-reveal [data-reveal] *,
  .js-hero .hero__seq > *,
  .js-hero .hero__art {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .masthead.is-stuck .brand__mark { transform: none; }
}

/* ==========================================================================
   36. Signature test switcher

   Ten tests across three families is too many to navigate by returning to an
   index each time. This sits under the hero on every Signature page so any
   test is one click from any other.
   ========================================================================== */

.tsw {
  position: sticky;
  top: var(--masthead-h, 77px);
  z-index: 40;
  background: var(--ink-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tsw__inner {
  display: flex;
  align-items: stretch;
  gap: var(--s-5);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block: var(--s-3);
  -webkit-overflow-scrolling: touch;
}

.tsw__all {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.tsw__all:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.tsw__group { flex: none; display: flex; align-items: center; gap: var(--s-3); }
.tsw__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-400);
}
.tsw__links { display: flex; gap: var(--s-2); }

.tsw__link {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tsw__link:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(210, 249, 234, 0.45); }
.tsw__link.is-current {
  background: var(--mint-200);
  border-color: var(--mint-200);
}
.tsw__name { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.tsw__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
}
/* The meta line is useful context but not worth a second row on a laptop. */
@media (max-width: 1280px) { .tsw__meta { display: none; } }
.tsw__link.is-current .tsw__name { color: var(--ink-900); }
.tsw__link.is-current .tsw__meta { color: rgba(42, 12, 54, 0.7); }

/* Below the hero on a phone the switcher would eat the screen, so it scrolls
   in place rather than sticking. */
@media (max-width: 900px) {
  .tsw { position: static; }
  .tsw__inner { gap: var(--s-4); }
}

/* Two sticky bars would stack, so a page with both keeps only the switcher. */
.tsw ~ .jumpnav { top: calc(var(--masthead-h, 77px) + var(--tsw-h, 84px)); }
@media (max-width: 900px) { .tsw ~ .jumpnav { top: var(--masthead-h, 64px); } }

/* ==========================================================================
   37. Journeys and case studies

   Both are illustrative and the design says so: the composite label sits above
   the name, not in a footnote, and "what it did not do" is given the same
   visual weight as "what changed".
   ========================================================================== */

.jy__head { max-width: 74ch; }
.jy__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.section--dark .jy__label {
  background: rgba(232, 215, 172, 0.16);
  border-color: rgba(232, 215, 172, 0.5);
  color: #F7E6BE;
}
.jy__name { margin: 0 0 var(--s-1); }
.jy__who {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--muted);
}
.jy__situation {
  margin: 0 0 var(--s-4);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--brand-700);
}
.jy__quote {
  margin: 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-left: 3px solid var(--mint-400);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--ink);
  max-width: 56ch;
}
.section--dark .jy__quote { color: #fff; }

.jy__body { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
@media (min-width: 980px) { .jy__body { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-8); align-items: start; } }

.jy__subhead {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin: 0 0 var(--s-3);
}
.jy__known {
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--brand-50);
}
.section--dark .jy__known { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.2); }
.jy__known ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.jy__known li { position: relative; padding-left: var(--s-5); font-size: 0.9375rem; line-height: 1.5; }
.jy__known li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500);
}

.jy__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.jy__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.section--dark .jy__step { border-bottom-color: rgba(255,255,255,.12); }
.jy__step:last-child { border-bottom: 0; }
.jy__stepn {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--brand-500);
  padding-top: 2px;
}
.section--dark .jy__stepn { color: var(--mint-400); }
.jy__stepwhen {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--dark .jy__stepwhen { color: rgba(255,255,255,.66); }
.jy__stepwhat { margin: 2px 0 var(--s-2); font-weight: 600; color: var(--ink); }
.section--dark .jy__stepwhat { color: #fff; }
.jy__stepcopy { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--body); }
.section--dark .jy__stepcopy { color: rgba(255,255,255,.85); }

.jy__outcome { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 820px) { .jy__outcome { grid-template-columns: 1fr 1fr; } }
.jy__did, .jy__didnot {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.jy__did { border-left: 3px solid var(--mint-600); }
.jy__didnot { border-left: 3px solid var(--warn-line); background: var(--warn-bg); }
.jy__didnot .jy__subhead { color: var(--warn-ink); }
.jy__didnot p { color: var(--warn-ink); }
.section--dark .jy__did { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); border-left-color: var(--mint-400); }
.section--dark .jy__didnot { background: rgba(232,215,172,.12); border-color: rgba(232,215,172,.4); }
.section--dark .jy__didnot .jy__subhead,
.section--dark .jy__didnot p { color: #F7E6BE; }
.jy__did p, .jy__didnot p { margin: 0; line-height: 1.6; }
/* The three things the service actually did. Numbered, because they happen in
   that order: nothing is matched before it is planned, and access work only
   starts once there is something to get access to. */
.jy__helped { margin-top: var(--s-7); }
.jy__helpgrid { display: grid; gap: var(--s-4); counter-reset: jyhelp; }
@media (min-width: 900px) { .jy__helpgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jy__help {
  counter-increment: jyhelp;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-400);
  background: var(--surface);
}
.jy__help p:last-child { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--body); }
.jy__helplabel {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--ink);
}
.jy__helplabel::before {
  content: counter(jyhelp, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brand-600);
}
.section--dark .jy__help { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); border-top-color: var(--mint-400); }
.section--dark .jy__helplabel { color: #fff; }
.section--dark .jy__helplabel::before { color: var(--mint-200); }
.section--dark .jy__help p:last-child { color: rgba(255,255,255,.85); }

.jy__links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }

/* --- Case studies -------------------------------------------------------- */

.cslist { display: grid; gap: var(--s-5); }
@media (min-width: 1100px) { .cslist { grid-template-columns: 1fr 1fr; } }

.cs {
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-margin-top: calc(var(--header-h) + 24px);
  /* The list goes two-up above 1100px, so a card on a wide screen is narrower
     than a card on a medium one. Its own width is what decides whether three
     columns fit, not the viewport's. */
  container-type: inline-size;
}
.cs__n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-600);
}
.cs__head h3 { margin: var(--s-2) 0 var(--s-2); font-family: var(--font-ui); font-size: var(--step-1); font-weight: 600; }
.cs__setting { margin: 0 0 var(--s-4); font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.cs__q {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--brand-500);
  background: var(--brand-50);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 600;
  color: var(--ink);
}
.cs__grid { margin: 0 0 var(--s-5); display: grid; gap: var(--s-3); }
.cs__grid > div { display: grid; gap: 2px; }
.cs__grid dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cs__grid dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--body); }

/* The same plan / match / access spine as the journeys, so a reader moving
   between the two pages is reading one shape rather than two. */
.cs__do {
  display: grid;
  gap: var(--s-4);
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0;
  border-block: 1px solid var(--line);
}
@container (min-width: 620px) { .cs__do { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.cs__doitem p:last-child { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--body); }
.cs__dolabel {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.section--dark .cs__do { border-block-color: rgba(255,255,255,.16); }
.section--dark .cs__dolabel { color: var(--mint-200); }
.section--dark .cs__doitem p:last-child { color: rgba(255,255,255,.85); }

.cs__cols { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .cs__cols { grid-template-columns: 1fr 1fr; } }
.cs__coltitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-700);
  margin: 0 0 var(--s-2);
}
.cs__col--not .cs__coltitle { color: var(--warn-ink); }
.cs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cs__col li { position: relative; padding-left: var(--s-5); font-size: 0.875rem; line-height: 1.55; color: var(--body); }
.cs__col li::before {
  content: ""; position: absolute; left: 2px; top: 0.58em;
  width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--mint-600);
}
.cs__col--not li::before { border-color: var(--warn-line); border-radius: 1px; }
.cs__links { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }

/* ==========================================================================
   38. Tone safety

   Band tone is derived from what a section contains (see `accountable_tones`
   in engine.py), so any component can now find itself on either ground. These
   are the variants that were missing. Two approaches: components that are
   inherently light get a dark variant, and components that are inherently dark
   carry their own surface so they are portable.
   ========================================================================== */

/* --- Light components that can now land on a dark band ------------------- */

.section--dark .legal { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
.section--dark .legal p,
.section--dark .legal li { color: rgba(255, 255, 255, 0.88); }
.section--dark .legal .h-sub { color: #fff; }
.section--dark .legal__reg { color: rgba(255, 255, 255, 0.78); }

.section--dark .evidence__n { color: var(--mint-400); }
.section--dark .evidence__study { border-color: rgba(255, 255, 255, 0.14); }
.section--dark .evidence__claim { color: #fff; }
.section--dark .evidence__body,
.section--dark .evidence__cite { color: rgba(255, 255, 255, 0.82); }
.section--dark .evidence__disclaimer { color: rgba(255, 255, 255, 0.7); }

.section--dark .jy__who { color: rgba(255, 255, 255, 0.72); }
.section--dark .jy__situation { color: var(--mint-200); }
.section--dark .jy__subhead { color: var(--mint-200); }
.section--dark .jy__stepwhen { color: rgba(255, 255, 255, 0.7); }

.section--dark .sit__voice { color: var(--mint-200); }
.section--dark .sit__label { color: var(--mint-200); }
.section--dark .sit__truth p:not(.sit__avoid) { color: rgba(255, 255, 255, 0.88); }
.section--dark .route { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .route__name { color: #fff; }
.section--dark .route__why { color: rgba(255, 255, 255, 0.82); }

.section--dark .cs { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .cs__head h3 { color: #fff; }
.section--dark .cs__setting { color: rgba(255, 255, 255, 0.7); }
.section--dark .cs__q { background: rgba(255, 255, 255, 0.06); border-left-color: var(--mint-400); color: #fff; }
.section--dark .cs__grid dt { color: rgba(255, 255, 255, 0.66); }
.section--dark .cs__grid dd,
.section--dark .cs__col li { color: rgba(255, 255, 255, 0.85); }
.section--dark .cs__coltitle { color: var(--mint-200); }
.section--dark .cs__col--not .cs__coltitle { color: #F3D9A8; }

.section--dark .choose__item { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .choose__item h3 { color: #fff; }
.section--dark .choose__item p { color: rgba(255, 255, 255, 0.85); }

/* --- Dark components made portable by carrying their own ground ---------- */

/* These were designed against the band behind them. Giving each its own
   surface means it reads correctly wherever a section puts it. */
.io__col {
  background: var(--ink-900);
  border-color: rgba(255, 255, 255, 0.16);
}
.io__col--out { background: var(--ink-800); border-color: var(--mint-400); }

.stagekey__item {
  background: var(--ink-900);
  border-color: rgba(255, 255, 255, 0.16);
}

.opath {
  background: var(--ink-900);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
@media (max-width: 700px) { .opath { padding: var(--s-5) var(--s-4); } }
.opath__axis span,
.opath__n,
.opath__kicker { color: var(--mint-200); }
.opath__links .link-arrow { color: var(--mint-200); }
.opath__title,
.opath__anyname,
.opath__q { color: #fff; }
.opath__short,
.opath__copy { color: rgba(255, 255, 255, 0.75); }
.opath__note { color: rgba(255, 255, 255, 0.62); }

.rmap__stage,
.rmap__tab { /* already tone-aware from section 33 */ }

/* A component that paints its own surface must also set its own text colour,
   or it inherits the band's and disappears. These four were relying on the
   band to colour text they had already covered up. */

.prog h3,
.prog__one,
.prog__grid dd { color: var(--ink); }
.prog__one,
.prog__grid dd { color: var(--body); }
.prog__grid dt { color: var(--brand-600); }
.prog__not dt,
.prog__not dd { color: var(--warn-ink); }
.section--dark .prog { background: var(--surface); border-color: var(--line); }

.sit__avoid,
.sit__avoid strong { color: var(--warn-ink); }
.section--dark .sit__avoid { background: var(--warn-bg); border-left-color: var(--warn-line); }

/* The branch panel sits inside the always-dark One Path card. */
.opath__branch .link-arrow { color: var(--mint-200); }

/* The caption sits outside the card, on the band. */
.opath__note { color: var(--muted); }
.section--dark .opath__note { color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   39. Between pages

   Every transition on this site used to be an arrival. Clicking a link was a
   hard cut to white and then the next page, which on a site people navigate
   anxiously reads as a rupture rather than as a step.

   This is the cross-document View Transitions API, which is pure CSS: no
   JavaScript, and browsers without support simply navigate as they do today.
   The masthead and footer are named so they persist across the navigation
   while only the content changes, which is the spatial continuity a hard cut
   destroys: the chrome stays put and you can see that you are still in the
   same place.
   ========================================================================== */

@view-transition { navigation: auto; }

/* Named parts are lifted out of the root snapshot and animated on their own. */
.masthead { view-transition-name: masthead; }
.utility-bar { view-transition-name: utilitybar; }
.footer { view-transition-name: sitefooter; }
main { view-transition-name: content; }

/* The chrome does not move. It is the fixed point the content changes against. */
::view-transition-group(masthead),
::view-transition-group(utilitybar),
::view-transition-group(sitefooter) { animation: none; }
::view-transition-old(masthead),
::view-transition-new(masthead),
::view-transition-old(utilitybar),
::view-transition-new(utilitybar),
::view-transition-old(sitefooter),
::view-transition-new(sitefooter) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
}

/* Leaving accelerates and is shorter; arriving decelerates and comes from
   below, because moving into a page is moving deeper. */
::view-transition-old(content) {
  animation: page-leave var(--t-exit) var(--ease-leave) both;
}
::view-transition-new(content) {
  animation: page-arrive var(--t-page) var(--ease) both;
}
@keyframes page-leave  { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes page-arrive { from { opacity: 0; transform: translateY(10px); } }

/* The root crossfade underneath is quicker still, so the seam is not visible. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--t-exit); }

@media (prefers-reduced-motion: reduce) {
  /* Turn the mechanism off rather than speeding it up: a fast page-wide
     crossfade is still a page-wide crossfade. */
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   40. Acknowledging a press

   The whole site had one :active rule. A control that does not respond within
   about a hundred milliseconds reads as broken before it reads as slow.
   Transform only, so nothing around it moves.
   ========================================================================== */

.btn:active { transform: translateY(0) scale(0.985); transition-duration: var(--t-tap); }
.btn { transition-timing-function: var(--ease-press); }

a.card:active,
.dxcard:active,
.route:active,
.svclink:active,
.dxrel:active,
.mm__link:active,
.tsw__link:active { transform: scale(0.99); transition-duration: var(--t-tap); }

.dxchip:active,
.rmap__tab:active,
.opath__stage:active,
.opath__any:active { transform: scale(0.985); transition-duration: var(--t-tap); }

.nav-toggle:active,
.videoplay:active .videoplay__icon { transform: scale(0.94); transition-duration: var(--t-tap); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, a.card:active, .dxcard:active, .route:active, .svclink:active,
  .dxrel:active, .mm__link:active, .tsw__link:active, .dxchip:active,
  .rmap__tab:active, .opath__stage:active, .opath__any:active,
  .nav-toggle:active, .videoplay:active .videoplay__icon { transform: none; }
}

/* ==========================================================================
   41. Switching a panel

   Content replacing content in the same container should cross-fade, not cut.
   Both panels sit in one grid cell so the outgoing one can fade under the
   incoming one, which also stops the container jumping height between tabs.

   These rules apply only under [data-tabs-live], which JavaScript sets once it
   is running. Without it the panels stack normally and every one is readable.
   ========================================================================== */

[data-tabs-live] .rmap__stage,
[data-tabs-live] .opath__detail { display: grid; }

[data-tabs-live] .rmap__panel,
[data-tabs-live] .opath__panel {
  grid-area: 1 / 1;
  opacity: 0;
  /* visibility, not display: it keeps the panel out of the tab order and the
     accessibility tree while still allowing the fade. */
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--t-base-out) var(--ease-leave),
    transform var(--t-base-out) var(--ease-leave),
    visibility var(--t-base-out);
}

[data-tabs-live] .rmap__panel[data-active="true"],
[data-tabs-live] .opath__panel[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* Arriving takes longer than leaving and decelerates into place. */
  transition:
    opacity var(--t-base) var(--ease),
    transform var(--t-base) var(--ease),
    visibility var(--t-base);
}

/* Without JavaScript the panels read as a sequence, so they need separating. */
.rmap__panel + .rmap__panel,
.opath__panel + .opath__panel {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
[data-tabs-live] .rmap__panel + .rmap__panel,
[data-tabs-live] .opath__panel + .opath__panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The very first application of state lands without animating, so the panels
   do not all appear and then fade out on load. */
[data-tabs-init] .rmap__panel,
[data-tabs-init] .opath__panel { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-tabs-live] .rmap__panel,
  [data-tabs-live] .opath__panel { transform: none; transition: none; }
}