/* Nerida Health marketing site.
   Palette source: the product design system (care-app/apps/web/src/index.css,
   read-only reference), extended here into a marketing-specific composition
   system (bands, display scale, split grids) via semantic tokens.

   Architecture rules:
   · The BASE stylesheet is the complete, settled page. Every animation and
     transition lives inside the single @media (prefers-reduced-motion:
     no-preference) block at the end.
   · MOTION IS TARGETED, NOT AMBIENT (2026-08-04): only the hero thread, the
     transformation joins, the progress ledger, the role journeys and ordinary
     hover/focus feedback animate. No text-bearing element is EVER hidden
     pre-reveal — [data-reveal] is an in-view TRIGGER hook (JS adds .in), and
     each component animates only its decoration (strokes, dots, transforms).
   · No colour literal is used in a component rule — components consume the
     semantic tokens defined in :root.
   · Buttons own their colours via .btn only; navigation/footer/menu link
     colours are scoped to explicit classes (.nav-link, .sub-link, .mm-link,
     .f-link) so no descendant selector can override button text colour.
   · No global overflow-x clipping: layout failures must be visible and are
     caught by src/overflow-check.mjs (rendered check at 320/390/768). */

/* ---------------- fonts (self-hosted IBM Plex Sans, OFL) ---------------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------- tokens ---------------- */
:root {
  /* canonical product values */
  --text: #042c53;
  --muted: #5f6b7a;
  --bg: #f4f8fa;
  --surface: #ffffff;
  --border: #dce7ea;
  --border-strong: #bfd0d4;
  --border-control: #748594; /* ≥3:1 on white and on --bg: interactive outlines */
  --accent: #1d5f8a;
  --accent-strong: #174e73;
  --accent-bg: #eaf3f8;
  --accent-label: #285f86;
  --teal: #2f6f5e;
  --teal-bg: #e8f4ef;
  --lavender: #685c8d;
  --lavender-bg: #f1eff7;
  --warning: #7a5a18;
  --warning-bg: #fbf3dd;
  --navy-deep: #123a5a;
  --radius: 12px;
  --shadow-card: 0 1px 3px rgba(4, 44, 83, 0.08);
  --shadow-hover: 0 8px 18px rgba(29, 95, 138, 0.18);
  --shadow-pop: 0 24px 60px rgba(4, 44, 83, 0.18);
  --focus: #246b68;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* semantic marketing tokens */
  --action: var(--accent);           /* principal action / trust colour: blue */
  --action-hover: var(--accent-strong);
  --action-text: #ffffff;            /* 6.8:1 on --action, 8.8:1 on hover */
  --care: var(--teal);               /* care / completion / positive status only */
  --care-bg: var(--teal-bg);
  --insight: var(--lavender);        /* research / insight accents only */
  --insight-bg: var(--lavender-bg);
  --band-bg: var(--bg);
  --band-tint: var(--surface);
  --band-navy: var(--navy-deep);
  --on-navy: #d8e9f2;                /* 9.4:1 on navy */
  --on-navy-strong: #ffffff;
  --space-band: clamp(3.5rem, 3rem + 3.5vw, 7rem);   /* ≈56–72px mobile, 88–112px desktop */
  --space-band-tight: clamp(2.6rem, 2.2rem + 2.5vw, 4.5rem);
  --head-h: 68px;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--head-h) + 56px); }
body {
  font: 400 1.03rem/1.66 var(--sans);
  color: var(--text);
  background: var(--band-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
p { color: var(--text); }
.muted { color: var(--muted); }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.14; letter-spacing: -0.016em; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 1.4rem + 3.4vw, 3.5rem); font-weight: 700; letter-spacing: -0.024em; line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); }
h3 { font-size: 1.12rem; }
h4 { font-size: 1.03rem; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.05rem, 4vw, 2.5rem); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--text); color: #fff; padding: 0.75rem 1.2rem; border-radius: 0 0 8px 0; }
.skip:focus-visible { left: 0; }
.measured { max-width: 62ch; }
.body-p { color: var(--muted); margin-top: 0.9rem; }
.body-p:first-child { margin-top: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-label);
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--care); flex: none; }
.glyph { width: 22px; height: 22px; }
.glyph .g-fill { fill: currentColor; stroke: none; }

/* ---------------- buttons (colours owned HERE and nowhere else) ----------------
   Long localized labels WRAP (centred, full width available) — meaning is
   never clipped at narrow widths. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.62rem 1.35rem; border-radius: var(--radius);
  background: var(--action); color: var(--action-text); font-weight: 600; font-size: 0.98rem;
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  max-width: 100%; text-align: center; overflow-wrap: break-word; line-height: 1.3;
}
.btn:hover { background: var(--action-hover); color: var(--action-text); box-shadow: var(--shadow-hover); }
.btn:active { background: var(--navy-deep); color: var(--action-text); box-shadow: none; }
.btn.ghost { background: var(--surface); color: var(--accent-strong); border-color: var(--border-control); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-bg); color: var(--accent-strong); box-shadow: none; }
.btn.ghost:active { background: var(--accent-bg); color: var(--navy-deep); }
@media (max-width: 519.98px) {
  .cta-row .btn { flex: 1 1 100%; } /* long invitation actions go full-width */
}

/* ---------------- banner + header ---------------- */
.banner {
  background: var(--band-navy); color: var(--on-navy); font-size: 0.88rem;
  text-align: center; padding: 0.5rem 1rem;
}
.banner a { color: var(--on-navy-strong); }
.site-head {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.head-wrap { display: flex; align-items: center; gap: 0.9rem; min-height: var(--head-h); }
.brand { text-decoration: none; flex: none; }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--text); font-weight: 700; font-size: 1.14rem;
  letter-spacing: -0.02em; white-space: nowrap;
}
.wm-mark { height: 22px; width: auto; flex: none; }

.nav { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.nav-link, .nav-toggle {
  display: inline-flex; align-items: center; gap: 0.28rem; min-height: 44px;
  padding: 0.35rem 0.7rem; border-radius: 10px; border: 0; background: none;
  color: var(--text); font: 500 0.94rem var(--sans); cursor: pointer; text-decoration: none;
}
.nav-link:hover, .nav-toggle:hover { background: var(--accent-bg); color: var(--text); }
.nav-link[aria-current='page'], .nav-link.is-parent, .nav-toggle.is-parent {
  color: var(--accent-strong); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 10px 10px 0 0;
}
.nav-item { position: relative; display: flex; align-items: center; }
.caret {
  width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-2px); display: inline-block; flex: none;
}
.sub-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 44px; padding: 0 0.25rem; margin-left: -0.35rem;
  border: 0; border-radius: 10px; background: none; color: var(--text); cursor: pointer;
}
.sub-btn:hover { background: var(--accent-bg); }
.nav-item[data-open='true'] .sub-btn .caret,
.nav-item[data-open='true'] .nav-toggle .caret { transform: rotate(225deg) translateY(-1px); }
.sub {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 0.45rem; list-style: none;
  display: none; z-index: 95;
}
/* the right-most group's dropdown opens leftward so it cannot cross the
   viewport edge (there is no global overflow clip to hide such a failure) */
.nav-item:last-of-type .sub { left: auto; right: 0; }
.nav-item[data-open='true'] > .sub { display: block; }
.sub-link { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; color: var(--text); font-size: 0.94rem; text-decoration: none; }
.sub-link:hover { background: var(--accent-bg); color: var(--text); }
.sub-link[aria-current='page'] { color: var(--accent-strong); font-weight: 600; }

.lang { display: flex; gap: 0.1rem; margin-left: 0.35rem; padding-left: 0.6rem; border-left: 1px solid var(--border); }
.lang a { padding: 0.35rem 0.45rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; color: var(--muted); font-size: 0.82rem; font-weight: 600; text-decoration: none; letter-spacing: 0.04em; }
.lang a:hover { background: var(--accent-bg); color: var(--text); }
.lang a[aria-current='true'] { color: var(--accent-strong); background: var(--accent-bg); }
.nav-cta { margin-left: 0.35rem; padding-block: 0.45rem; flex: none; }

/* menu button + collapse. The full desktop navigation needs ~1100px with the
   longest (Spanish) labels; collapse BEFORE content collision. */
.menu-btn { display: none; margin-left: auto; }
@media (max-width: 1119.98px) {
  .nav, .lang { display: none; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-width: 44px; min-height: 44px; padding: 0.4rem 0.85rem; border-radius: 10px;
    border: 1px solid var(--border-control); background: var(--surface); color: var(--text);
    font: 600 0.92rem var(--sans); cursor: pointer;
  }
  .nav-cta { margin-left: auto; }
  .menu-btn { margin-left: 0; }
}
@media (max-width: 679.98px) {
  .nav-cta { display: none; } /* Coming Soon stays reachable at the top of the menu */
  .menu-btn { margin-left: auto; }
}
/* no-JS: the menu button is inert — show the full navigation, wrapped, with
   submenus expanded statically so every destination stays reachable. */
html:not(.js) .menu-btn { display: none; }
html:not(.js) .site-head { position: static; }
@media (max-width: 1119.98px) {
  html:not(.js) .nav { display: flex; flex-wrap: wrap; padding: 0.5rem 0; }
  html:not(.js) .lang { display: flex; }
  html:not(.js) .head-wrap { flex-wrap: wrap; }
  html:not(.js) .nav-cta { display: inline-flex; }
}
html:not(.js) .nav-item { flex-wrap: wrap; }
html:not(.js) .sub {
  position: static; display: block; min-width: 0; border: 0; box-shadow: none;
  background: none; padding: 0; display: flex; flex-wrap: wrap;
}
html:not(.js) .sub-btn { display: none; }
html:not(.js) .nav-toggle .caret, html:not(.js) .nav-toggle { cursor: default; }

/* ---------------- mobile menu (dialog) ---------------- */
.mobile-menu { display: none; }
.mobile-menu[data-open='true'] { display: block; position: fixed; inset: 0; z-index: 120; background: var(--surface); overflow-y: auto; }
.mm-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem clamp(1.05rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border); }
.mm-close { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border-control); background: var(--surface); font: 600 0.92rem var(--sans); color: var(--text); cursor: pointer; padding: 0.4rem 0.85rem; }
.mm-top { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 1rem clamp(1.05rem, 4vw, 2.5rem) 0.2rem; }
.mm-cta { flex: 1 1 12rem; }
.mm-lang { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.mm-lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.7rem; border-radius: 10px; color: var(--muted); font-size: 0.95rem; font-weight: 500; text-decoration: none; }
.mm-lang a:hover { background: var(--accent-bg); color: var(--text); }
.mm-lang a[aria-current='true'] { color: var(--accent-strong); background: var(--accent-bg); font-weight: 600; }
.mobile-menu nav { padding: 0.6rem clamp(1.05rem, 4vw, 2.5rem) 2.5rem; }
.mm-details { border-bottom: 1px solid var(--border); }
.mm-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 48px; padding: 0.6rem 0.2rem; font-weight: 600; font-size: 1.02rem;
  color: var(--text); cursor: pointer; list-style: none; border-radius: 8px;
}
.mm-details summary::-webkit-details-marker { display: none; }
.mm-details[open] summary .caret { transform: rotate(225deg) translateY(-1px); }
.mm-sub { padding: 0 0 0.7rem 0.6rem; }
.mm-link { display: flex; align-items: center; min-height: 44px; padding: 0.45rem 0.4rem; border-radius: 10px; color: var(--text); font-size: 1rem; text-decoration: none; }
.mm-link:hover { background: var(--accent-bg); color: var(--text); }
.mm-link[aria-current='page'] { color: var(--accent-strong); font-weight: 600; }
.mm-top-link { min-height: 48px; font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid var(--border); border-radius: 0; padding-inline: 0.2rem; }

/* ---------------- breadcrumbs ---------------- */
.crumbs { font-size: 0.85rem; padding-block: 0.85rem 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.2rem; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: '/'; color: var(--border-strong); margin: 0 0.45rem; }
.crumbs a { color: var(--muted); text-decoration: none; padding: 0.2rem 0.1rem; border-radius: 6px; }
.crumbs a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a[aria-current='page'] { color: var(--text); font-weight: 500; }

/* ---------------- bands + section rhythm ---------------- */
.band { padding-block: var(--space-band); }
.band-bg { background: var(--band-bg); }
.band-tint { background: var(--band-tint); border-block: 1px solid var(--border); }
.band-tint + .band-tint { border-top: 0; }
.band-navy { background: var(--band-navy); }
.band-navy h2, .band-navy h3 { color: var(--on-navy-strong); }
.band-navy p, .band-navy .body-p { color: var(--on-navy); }
.band-navy .eyebrow { color: #b8d5e2; }
.band-navy .eyebrow .dot { background: #6fb3a4; }
.band-navy a:not(.btn) { color: var(--on-navy-strong); }
.strip { padding-block: var(--space-band-tight); }
.sec-head { max-width: 760px; }
.sec-head .eyebrow { margin-bottom: 0.85rem; }
.sec-head .lede { margin-top: 0.95rem; color: var(--muted); font-size: 1.08rem; max-width: 58ch; }
.band-navy .sec-head .lede { color: var(--on-navy); }
.cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.9rem; }

/* ---------------- hero: shared ---------------- */
.hero { padding-block: clamp(2.6rem, 6vh, 4.6rem) var(--space-band); }
.hero-note { margin-top: 1.4rem; font-size: 0.9rem; color: var(--muted); max-width: 52ch; }

/* homepage hero: centred copy over the convergence signature */
.hero-conv { padding-top: clamp(2.4rem, 5vh, 4rem); }
.hero-conv .hero-inner { max-width: 840px; margin-inline: auto; text-align: center; }
.hero-conv h1 { margin-top: 1rem; margin-inline: auto; max-width: 18ch; }
.hero-conv .lede { margin-top: 1.2rem; margin-inline: auto; max-width: 56ch; color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.hero-conv .cta-row { justify-content: center; }
@media (max-width: 679.98px) {
  /* long mobile copy reads better left-aligned */
  .hero-conv .hero-inner { text-align: left; }
  .hero-conv h1, .hero-conv .lede { margin-inline: 0; }
  .hero-conv .cta-row { justify-content: flex-start; }
}

/* ---------------- the convergence (hero signature) ----------------
   The doctor's journey enters from the left, the patient's from the right;
   they meet in the Nerida mark itself, whose interlinked forms come together.
   The thread then continues to the practice team, follow-up and learning. */
.conv { margin-top: clamp(2rem, 4.5vw, 3.4rem); }
.cv-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 70px 132px 70px minmax(0, 1fr);
  gap: 0 clamp(0.4rem, 1.5vw, 1rem); align-items: center; max-width: 980px; margin-inline: auto;
}
.cv-side { list-style: none; display: grid; }
.cv-side li {
  min-height: 63px; display: flex; align-items: center;
  font-size: 0.95rem; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.45rem 0.9rem; margin-block: 0.35rem; box-shadow: var(--shadow-card);
}
.cv-doc li { justify-content: flex-end; text-align: right; border-left: 3px solid var(--accent); }
.cv-pat li { justify-content: flex-start; text-align: left; border-right: 3px solid var(--navy-deep); }
.cv-fan { width: 70px; height: 100%; align-self: stretch; }
.cv-fan .cv-c { stroke: var(--border-control); stroke-width: 2; fill: none; stroke-linecap: round; }
.cv-core { display: grid; place-items: center; }
.cv-mark { width: 132px; height: auto; }
.cv-after { position: relative; max-width: 980px; margin-inline: auto; text-align: center; padding-top: 26px; }
.cv-stem { position: absolute; left: 50%; top: 0; height: 22px; width: 2.5px; margin-left: -1.25px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--care)); }
.cv-thread { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-label); }
.cv-down { list-style: none; margin-top: 0.7rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.cv-down li {
  font-size: 0.88rem; font-weight: 500; color: var(--text);
  background: var(--care-bg); border: 1px solid var(--care); border-radius: 999px; padding: 0.32rem 0.9rem;
}
.cv-cap { margin-top: 1.1rem; text-align: center; font-size: 0.82rem; color: var(--muted); }
@media (max-width: 899.98px) {
  /* short vertical sequence: journeys stacked, then the mark, then downstream */
  .cv-grid { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; max-width: 560px; }
  .cv-fan { display: none; }
  .cv-side li { min-height: 44px; margin-block: 0.2rem; }
  .cv-doc li { justify-content: flex-start; text-align: left; }
  .cv-core { padding-block: 0.8rem 0.2rem; }
  .cv-mark { width: 104px; }
  .cv-cap { text-align: left; }
  .cv-after { text-align: left; padding-top: 0.9rem; }
  .cv-stem { display: none; }
  .cv-down { justify-content: flex-start; }
}

/* page hero (centred composition) */
.hero-page .hero-inner { max-width: 780px; margin-inline: auto; text-align: center; }
.hero-page h1 { margin-top: 1rem; margin-inline: auto; max-width: 22ch; }
.hero-page .lede { margin-top: 1.2rem; margin-inline: auto; max-width: 56ch; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.16rem); }
.hero-page .cta-row { justify-content: center; }
.hero-page .hero-note { margin-inline: auto; }
.hero-back { margin-bottom: 1.1rem; font-size: 0.9rem; }
.hero-back a { color: var(--accent-strong); text-decoration: none; font-weight: 500; }
.hero-back a::before { content: '←'; margin-right: 0.4rem; }
.hero-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- text sections ---------------- */
.text-split .split-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem clamp(1.4rem, 4vw, 3.5rem); }
.text-split .sec-head-wide { grid-column: 1 / span 5; }
.text-split .split-body { grid-column: 7 / -1; align-self: center; }
@media (max-width: 859.98px) {
  .text-split .sec-head-wide, .text-split .split-body { grid-column: 1 / -1; }
}

/* ---------------- cards + grids (cards = destination/conversion links only) ---------------- */
.grid { display: grid; gap: 1rem; margin-top: 2.2rem; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 679.98px) { .grid.cols-2 { grid-template-columns: 1fr; } }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 1.35rem 1.4rem 1.45rem; min-width: 0;
}
a.card-link { display: block; color: inherit; text-decoration: none; }
a.card-link:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.card h3, .card h4 { margin-bottom: 0.35rem; }
.card p.value { color: var(--accent-strong); font-weight: 500; font-size: 0.97rem; margin-bottom: 0.5rem; }
.card p, .card li { font-size: 0.95rem; color: var(--muted); }
.card .go { display: inline-flex; align-items: center; margin-top: 0.9rem; color: var(--accent-strong); font-weight: 600; font-size: 0.92rem; }
.go-arrow { display: inline-block; margin-left: 0.35rem; }
a.card-link:hover .go { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- capability groups (six destinations, three plain labels) ----------------
   The three groups SHARE row tracks (subgrid): labels align, first-row cards
   share a height, second-row cards start on the same baseline, and each card
   is a column flex box whose Explore link sits on the bottom edge. Localized
   wrapping changes the shared track height, never the alignment. */
.cap-groups { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 1rem clamp(1.2rem, 2.5vw, 2rem); }
.cap-group { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 1rem; min-width: 0; }
.cap-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-label); align-self: end; }
a.cap-card { display: flex; flex-direction: column; } /* a.card-link's display:block must not win */
.cap-card h4 { font-size: 1.08rem; }
.cap-how { margin-top: 0.15rem; }
.cap-card .go { margin-top: auto; padding-top: 0.9rem; }
@supports not (grid-template-rows: subgrid) {
  .cap-group { grid-template-rows: none; grid-row: auto; align-content: start; }
}
@media (max-width: 1024.98px) {
  .cap-groups { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.8rem; }
  .cap-group { grid-row: auto; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .cap-label { grid-column: 1 / -1; align-self: auto; }
}
@media (max-width: 679.98px) {
  .cap-group { grid-template-columns: 1fr; }
}

/* ---------------- transformation rows (today → connected pairs) ---------------- */
.tf { margin-top: 2.2rem; display: grid; gap: 1.1rem; }
.tf-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 0.6rem 1.2rem; align-items: center; }
.tf-row + .tf-row { border-top: 1px solid var(--border); padding-top: 1.1rem; }
.tf-tag { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.15rem; }
.tf-today { color: var(--muted); font-size: 1rem; }
.tf-connected { color: var(--text); font-weight: 500; font-size: 1rem; }
.tf-connected .tf-tag { color: var(--care); }
.tf-join { width: 82px; height: auto; justify-self: center; }
.tf-link { stroke: var(--care); stroke-width: 2.5; stroke-linecap: round; fill: none; }
/* row 1 — repeated history: loose fragments consolidate into a growing record */
.tfh-frag rect { fill: none; stroke: var(--border-control); stroke-width: 1.8; stroke-dasharray: 4 3; }
.tfh-doc { fill: var(--surface); stroke: var(--care); stroke-width: 2.2; }
.tfh-seg { stroke: var(--border-strong); stroke-width: 2.4; stroke-linecap: round; }
.tfh-new { stroke: var(--care); }
/* row 2 — separate tools join one connected thread */
.tft-box rect { fill: none; stroke: var(--border-control); stroke-width: 1.8; stroke-dasharray: 4 3; }
.tft-dot circle { fill: var(--border-control); }
.tft-on circle { fill: var(--care); }
/* row 3 — a loose reminder becomes an owned step on the plan */
.tfm-loose { fill: none; stroke: var(--border-control); stroke-width: 1.8; stroke-dasharray: 4 3; }
.tfm-drift { stroke: var(--border-strong); stroke-width: 1.6; stroke-linecap: round; }
.tfm-line { stroke: var(--border-strong); stroke-width: 2.2; stroke-linecap: round; }
.tfm-step { fill: var(--care-bg); stroke: var(--care); stroke-width: 2.2; }
.tfm-stem { stroke: var(--care); stroke-width: 2; }
.tfm-bar { fill: none; stroke: var(--accent); stroke-width: 2; }
@media (max-width: 719.98px) {
  .tf-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .tf-join { display: none; }
  .tf-connected { border-left: 3px solid var(--care); padding-left: 0.8rem; }
}

/* ---------------- trust roles + supporting controls ---------------- */
.troles { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem clamp(1.4rem, 3vw, 2.6rem); }
.trole { display: flex; gap: 0.9rem; align-items: flex-start; }
.trole-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-bg); color: var(--accent-strong);
  display: grid; place-items: center;
}
.trole-body strong { color: var(--text); }
.trole-body p { margin-top: 0.2rem; color: var(--muted); font-size: 0.95rem; }
.thow { margin-top: 2.2rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.thow-h { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-label); }
.thow-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin-top: 0.9rem; }
.thow-list li { font-size: 0.88rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.3rem 0.85rem; }
@media (max-width: 719.98px) { .troles { grid-template-columns: 1fr; } }

/* ---------------- progress ledger (status groups, no percentages) ---------------- */
.lg-summary { margin-top: 1.2rem; max-width: 62ch; font-size: 1.06rem; font-weight: 500; color: var(--text); }
.lg-groups { margin-top: 2.2rem; display: grid; gap: 1.8rem clamp(1.4rem, 3vw, 2.4rem); }
.lg-groups.lg-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg-groups.lg-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-groups.lg-n1 { max-width: 680px; }
.lg-group { border-top: 3px solid var(--border-strong); padding-top: 1rem; min-width: 0; }
.lg-built { border-top-color: var(--care); }
.lg-progress { border-top-color: var(--accent); }
.lg-planned { border-top-color: var(--accent-label); }
.lg-required { border-top-color: var(--navy-deep); }
.lg-status { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.lg-built .lg-status { color: var(--care); }
.lg-progress .lg-status { color: var(--accent-strong); }
.lg-planned .lg-status { color: var(--accent-label); }
.lg-required .lg-status { color: var(--navy-deep); }
.lg-mark { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.lg-built .lg-mark { background: var(--care); }
.lg-progress .lg-mark { border: 2.5px solid var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.lg-planned .lg-mark { border: 2px dashed var(--accent-label); }
.lg-required .lg-mark { border: 2.5px solid var(--navy-deep); border-radius: 3px; }
.lg-items { list-style: none; margin-top: 1rem; display: grid; gap: 0.75rem; }
.lg-items strong { color: var(--text); font-size: 0.98rem; }
.lg-items p { margin-top: 0.1rem; color: var(--muted); font-size: 0.9rem; }
.lg-more { margin-top: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.lg-more summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 44px; padding: 0.5rem 0.9rem; font-weight: 600; font-size: 0.9rem; color: var(--text); cursor: pointer; list-style: none; border-radius: 10px; }
.lg-more summary::-webkit-details-marker { display: none; }
.lg-more summary:hover { background: var(--accent-bg); }
.lg-more[open] summary { border-bottom: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.lg-more[open] summary .caret { transform: rotate(225deg) translateY(-1px); }
.lg-more ul { list-style: none; padding: 0.7rem 0.9rem 0.85rem; display: grid; gap: 0.45rem; }
.lg-more li { font-size: 0.9rem; color: var(--muted); padding-left: 0.9rem; position: relative; }
.lg-more li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--care); }
.lg-launch { margin-top: 1.6rem; max-width: 62ch; font-size: 0.98rem; color: var(--text); }
.lg-fact { margin-top: 0.8rem; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 1024.98px) { .lg-groups.lg-n3 { grid-template-columns: 1fr; } }
@media (max-width: 719.98px) { .lg-groups.lg-n4 { grid-template-columns: 1fr; } }

/* ---------------- doctor day arc (three connected phases) ---------------- */
.arc { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem clamp(1.2rem, 2.5vw, 2rem); position: relative; }
.arc::before { content: ''; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--care)); }
.arc-ph { padding-top: 1.1rem; min-width: 0; }
.arc-lab { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-label); }
.arc-dot { position: absolute; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--accent); }
.arc-ph[data-n='3'] .arc-dot { border-color: var(--care); background: var(--care-bg); }
.arc-ph ul { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.75rem; }
.arc-ph strong { color: var(--text); font-size: 0.98rem; }
.arc-ph li p { margin-top: 0.1rem; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 859.98px) {
  .arc { grid-template-columns: 1fr; }
  .arc::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: linear-gradient(180deg, var(--accent), var(--care)); }
  .arc-ph { padding-top: 0; padding-left: 1.9rem; }
  .arc-dot { left: 0; top: auto; margin-top: 0.1rem; }
  .arc-lab { position: relative; }
  .arc-lab .arc-dot { left: -1.9rem; }
}

/* ---------------- practice-day board (six stations) ---------------- */
.stations { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.station { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 10px; padding: 0.95rem 1.05rem; min-width: 0; }
.station:nth-child(even) { border-top-color: var(--care); }
.station strong { color: var(--text); font-size: 0.98rem; }
.station p { margin-top: 0.2rem; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 1024.98px) { .stations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .stations { grid-template-columns: 1fr; } }

/* ---------------- sub-capability list ("what you can do") ---------------- */
.cap-list { list-style: none; margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem clamp(1.6rem, 3.5vw, 3rem); }
.cl-item { border-left: 3px solid var(--accent-bg); padding-left: 0.9rem; }
.cl-item strong { color: var(--text); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.cl-item p { margin-top: 0.2rem; color: var(--muted); font-size: 0.95rem; }
.cl-dev { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--accent-strong); background: var(--accent-bg); border: 1px solid var(--border); border-radius: 999px; padding: 0.12rem 0.55rem; }
@media (max-width: 719.98px) { .cap-list { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------------- "how it connects" strip ---------------- */
.connects-sec { border-top: 1px solid var(--border); }
.connects { display: grid; gap: 0.8rem; }
.connects-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.connects ul { list-style: none; display: grid; gap: 0.6rem; }
.connects li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; }
.connect-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--accent-strong); font-weight: 600; font-size: 0.95rem; text-decoration: none; min-height: 44px; align-items: center; }
.connect-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.connect-why { color: var(--muted); font-size: 0.92rem; }

/* ---------------- history-build figure (preparation) ---------------- */
.hb-sec figure { margin-top: 2.2rem; }
.hb { display: grid; grid-template-columns: minmax(0, 5fr) 44px minmax(0, 6fr); gap: 1rem clamp(0.8rem, 2vw, 1.6rem); align-items: center; max-width: 780px; }
.hb-lab { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-label); margin-bottom: 0.6rem; }
.hb-pat ul { list-style: none; display: grid; gap: 0.5rem; }
.hb-pat li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.93rem; color: var(--text); background: var(--surface); border: 1px dashed var(--border-control); border-radius: 9px; padding: 0.45rem 0.8rem; }
.hb-pat li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.hb-arrow { width: 44px; height: auto; }
.hb-head { stroke: var(--care); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hb-card { background: var(--surface); border: 1.5px solid var(--care); border-radius: 10px; padding: 0.8rem 0.95rem; box-shadow: var(--shadow-card); }
.hb-bar { display: block; height: 8px; border-radius: 4px; background: var(--accent-bg); margin-top: 0.45rem; transform-origin: left; }
.hb-bar.hb-b1 { width: 85%; margin-top: 0; }
.hb-bar.hb-b2 { width: 65%; }
.hb-bar.hb-b3 { width: 74%; background: var(--care-bg); }
.hb-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.hb .chip { font: 600 0.72rem var(--mono); border-radius: 999px; padding: 0.2rem 0.6rem; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); }
.hb .chip.ok { background: var(--care-bg); border-color: var(--care); color: var(--care); }
.hb .chip.warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.hb-line { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 679.98px) {
  .hb { grid-template-columns: 1fr; }
  .hb-arrow { transform: rotate(90deg); margin-inline: auto; }
}

/* ---------------- loop flow (follow-up) + trace flow (reporting) ---------------- */
.flow { list-style: none; display: grid; gap: 1rem 2rem; }
.flow-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.95rem 1.05rem; min-width: 0; }
.band-bg .flow-step { box-shadow: var(--shadow-card); }
.flow-step + .flow-step::before {
  content: '→'; position: absolute; left: -1.65rem; top: 0.85rem;
  color: var(--border-control); font-size: 1.15rem;
}
.flow-label { display: block; font: 600 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-label); margin-bottom: 0.4rem; }
.flow-step p { font-size: 0.92rem; color: var(--muted); }
.loop-sec figure, .trace-sec figure { margin-top: 2.2rem; }
.loop-return, .trace-back { position: relative; margin-top: 0.5rem; }
.loop-return svg, .trace-back svg { display: block; width: 100%; height: 40px; }
.trace-back svg { height: 30px; }
.loop-path { stroke: var(--care); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.trace-path { stroke: var(--insight); stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 6 5; }
.loop-head, .trace-head { position: absolute; left: 2px; top: 2px; width: 9px; height: 9px; border-left: 2.5px solid var(--care); border-top: 2.5px solid var(--care); transform: rotate(45deg); }
.trace-head { border-color: var(--insight); }
.loop-lab { display: inline-block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--care); }
.trace-lab { display: inline-block; margin-top: 0.35rem; font: 500 0.8rem var(--mono); color: var(--insight); }
@media (max-width: 859.98px) {
  .flow-3, .flow-4 { grid-template-columns: 1fr; gap: 1.4rem; }
  .flow-step + .flow-step::before { content: '↓'; left: 1.05rem; top: -1.35rem; }
  .loop-return svg, .trace-back svg { display: none; }
  .loop-head, .trace-head { display: none; }
}

/* ---------------- research workflow (numbered — order carries meaning) ---------------- */
.rflow { list-style: none; margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem clamp(1.2rem, 2.5vw, 2rem); counter-reset: rf; }
.rf-step { position: relative; border-top: 1px solid var(--border-strong); padding-top: 0.8rem; min-width: 0; }
.rf-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--insight-bg); color: var(--insight); font: 600 0.78rem var(--mono); margin-bottom: 0.4rem; }
.rf-step strong { display: block; color: var(--text); font-size: 0.98rem; }
.rf-step p { margin-top: 0.2rem; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 1024.98px) { .rflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .rflow { grid-template-columns: 1fr; } }

/* ---------------- role split (patients & carers) ---------------- */
.rsplit { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem clamp(1.6rem, 3.5vw, 3rem); }
.rs-col h3 { font-size: 1.05rem; }
.rs-col ul { list-style: none; margin-top: 0.9rem; display: grid; gap: 0.6rem; }
.rs-col li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.97rem; color: var(--text); }
.rs-col li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; position: relative; top: -1px; }
.rs-a li::before { background: var(--care); }
.rs-b li::before { background: var(--accent); }
@media (max-width: 719.98px) { .rsplit { grid-template-columns: 1fr; } }

/* ---------------- peer-audience links ---------------- */
.peers-sec { border-top: 1px solid var(--border); }
.peers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; }
.peers-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.peer-link {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px;
  padding: 0.4rem 1.05rem; border: 1px solid var(--border-control); border-radius: 999px;
  background: var(--surface); color: var(--accent-strong); font-weight: 600; font-size: 0.93rem;
  text-decoration: none;
}
.peer-link:hover { background: var(--accent-bg); }

/* ---------------- check rows ---------------- */
.checks { list-style: none; margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem clamp(1.4rem, 3vw, 2.6rem); }
.check { display: flex; gap: 0.8rem; align-items: flex-start; }
.check-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--care-bg); border: 1px solid var(--care); position: relative; top: 0.1em; }
.check-mark::before { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--care); font-size: 0.85rem; font-weight: 700; }
.check-body strong { color: var(--text); }
.check-body p { margin-top: 0.2rem; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 719.98px) { .checks { grid-template-columns: 1fr; } }

/* ---------------- at a glance (depth pages) ---------------- */
.glance-sec { border-top: 1px solid var(--border); }
.glance-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-label); }
.glance { list-style: none; margin-top: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem clamp(1.2rem, 3vw, 2.4rem); }
.glance li { display: flex; gap: 0.55rem; align-items: baseline; font-weight: 500; color: var(--text); border-left: 3px solid var(--care); padding-left: 0.8rem; }
@media (max-width: 719.98px) { .glance { grid-template-columns: 1fr; } }

/* ---------------- facts (unboxed definition rows) ---------------- */
.facts { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem clamp(1.6rem, 3.5vw, 3rem); }
.fact { border-top: 1px solid var(--border-strong); padding-top: 0.85rem; }
.fact dt { font-weight: 600; color: var(--text); }
.fact dd { margin-top: 0.25rem; color: var(--muted); font-size: 0.96rem; }
@media (max-width: 719.98px) { .facts { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ---------------- information layers (clinical workspace) ---------------- */
.layers-sec figure { margin-top: 2.2rem; }
.layers { display: grid; gap: 0.7rem; max-width: 640px; }
.layer { background: var(--surface); border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 0.85rem 1.05rem; }
.layer-private { border-left-color: var(--navy-deep); }
.layer-shared { border-left-color: var(--accent); margin-left: clamp(0rem, 3vw, 1.6rem); }
.layer-ops { border-left-color: var(--border-control); margin-left: clamp(0rem, 6vw, 3.2rem); }
.layer-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.layer-private .layer-label { color: var(--navy-deep); }
.layer-shared .layer-label { color: var(--accent-strong); }
.layer-ops .layer-label { color: var(--muted); }
.layer p { margin-top: 0.2rem; font-size: 0.93rem; color: var(--muted); }

/* ---------------- permission matrix (practice operations) ---------------- */
.matrix-sec figure { margin-top: 2.2rem; }
table.matrix { border-collapse: collapse; width: 100%; max-width: 720px; font-size: 0.95rem; background: var(--surface); }
table.matrix th, table.matrix td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
table.matrix thead th { background: var(--bg); color: var(--text); font-size: 0.88rem; }
table.matrix tbody th { color: var(--text); font-weight: 500; }
.cell-yes { color: var(--care); font-weight: 600; }
.cell-yes::before { content: '✓ '; }
.cell-never { color: var(--navy-deep); font-weight: 600; }
@media (max-width: 599.98px) {
  table.matrix.resp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.matrix.resp-table, table.matrix.resp-table tbody { display: block; }
  table.matrix.resp-table tr { display: block; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 0.5rem 0.85rem 0.7rem; margin-top: 0.8rem; }
  table.matrix.resp-table th[scope='row'] { display: block; border: 0; padding: 0.35rem 0 0.1rem; font-weight: 600; }
  table.matrix.resp-table td { display: block; border: 0; padding: 0.3rem 0 0; }
  table.matrix.resp-table td::before { content: attr(data-th) ': '; font-weight: 500; color: var(--muted); font-size: 0.85rem; }
}

/* ---------------- disclosure (secondary technical detail) ---------------- */
.disc-sec { padding-block: 0 var(--space-band-tight); }
.disc { max-width: 640px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.disc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  min-height: 48px; padding: 0.7rem 1.05rem; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none; border-radius: var(--radius);
}
.disc summary::-webkit-details-marker { display: none; }
.disc summary:hover { background: var(--accent-bg); }
.disc[open] summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.disc[open] summary .caret { transform: rotate(225deg) translateY(-1px); }
.disc-body { padding: 0.9rem 1.05rem 1.05rem; }
.disc-body p { color: var(--muted); font-size: 0.96rem; }
.disc-body p + p { margin-top: 0.7rem; }

/* ---------------- boundary callout (one per depth page) ---------------- */
.boundary-sec { padding-top: 0; }
.boundary { display: flex; gap: 0.9rem; align-items: flex-start; max-width: 640px; background: var(--accent-bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 1rem 1.15rem; }
.boundary-mark { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--navy-deep); position: relative; top: 0.45em; }
.boundary-body strong { color: var(--text); }
.boundary-body p { margin-top: 0.25rem; color: var(--muted); font-size: 0.95rem; }
.boundary-link { display: inline-flex; align-items: center; margin-top: 0.55rem; color: var(--accent-strong); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.boundary-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- audience summary grid (four visible destinations) ---------------- */
.aud-grid { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
a.aud-card { display: flex; flex-direction: column; } /* beats a.card-link's display:block */
.aud-card h3 { font-size: 1.08rem; }
.aud-card ul { list-style: none; margin-top: 0.55rem; display: grid; gap: 0.35rem; }
.aud-card li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.92rem; color: var(--muted); }
.aud-card li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--care); position: relative; top: -2px; }
.aud-card .go { margin-top: auto; padding-top: 0.9rem; }
@media (max-width: 1024.98px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---------------- specialty strip ---------------- */
.strip-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(1.4rem, 3.5vw, 3rem); align-items: center; }
.strip-lede { color: var(--text); font-weight: 500; max-width: 30ch; }
.specs { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.specs li { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 0.34rem 0.85rem; font-size: 0.88rem; color: var(--text); }
.specs li.more { border-style: dashed; color: var(--muted); }
@media (max-width: 719.98px) { .strip-row { grid-template-columns: 1fr; } .strip-lede { max-width: 62ch; } }

/* ---------------- stageband + invite ---------------- */
.stageband .body-p { color: var(--on-navy); }
.invite-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: clamp(1.6rem, 4vw, 2.4rem); }
.invite-lede { max-width: 60ch; margin-top: 0.8rem; color: var(--muted); }
.invite-note { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }
.invite .cta-row { margin-top: 1.4rem; }

/* ---------------- link rows ---------------- */
.rows { margin-top: 2rem; display: grid; gap: 0.8rem; }
a.row-link {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.05rem 1.25rem; color: inherit; text-decoration: none;
}
a.row-link:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
a.row-link .r-title { font-weight: 600; color: var(--text); }
a.row-link .r-text { color: var(--muted); font-size: 0.92rem; flex: 1; }
a.row-link .r-go { color: var(--accent-strong); font-weight: 600; white-space: nowrap; font-size: 0.92rem; display: inline-flex; align-items: center; }
@media (max-width: 639.98px) { a.row-link { flex-direction: column; gap: 0.3rem; } }

/* ---------------- agreement demonstration ----------------
   BASE state = settled (agreed). JS + motion step data-step 0 → 1, then
   remove the attribute. Labels always wrap — meaning is never ellipsized. */
.agreement { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.2rem; }
@media (max-width: 739.98px) { .agreement { grid-template-columns: 1fr; } }
.a-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 3px solid var(--accent); padding: 1.05rem 1.15rem 0.9rem; box-shadow: var(--shadow-card); }
.a-panel.a-doctor { border-top-color: var(--navy-deep); }
.a-panel .ph { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 0.55rem; margin-bottom: 0.3rem; }
.a-panel .ph h3 { font-size: 0.98rem; }
.a-panel .ph .tag { font: 500 0.74rem var(--mono); color: var(--muted); }
.arow { display: grid; grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr) auto; gap: 0.4rem 0.6rem; align-items: center; padding: 0.55rem 0; min-height: 2.1rem; }
.arow + .arow { border-top: 1px solid var(--accent-bg); }
.atime { font: 500 0.74rem var(--mono); color: var(--muted); white-space: nowrap; }
.alabel { font-size: 0.87rem; font-weight: 500; min-width: 0; overflow-wrap: break-word; }
.anote { grid-template-columns: minmax(0, 1fr) auto; }
.anote .note-label { color: var(--muted); font-weight: 400; }
.a-panel .chip { font: 600 0.74rem var(--mono); border-radius: 999px; padding: 0.22rem 0.6rem; border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); white-space: nowrap; }
.a-panel .chip.ok { background: var(--care-bg); border-color: var(--care); color: var(--care); }
.a-panel .chip.warn { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.a-panel .chip.mini { font-size: 0.7rem; }
.astate { display: inline-grid; justify-items: end; }
.astate > * { grid-area: 1 / 1; }
/* settled base: only the agreed chip is visible */
.astate .st-0, .astate .st-1 { opacity: 0; pointer-events: none; }
.astate .st-2 { opacity: 1; }
/* stepped states (set by JS only) */
.agreement[data-step='0'] .astate .st-0 { opacity: 1; }
.agreement[data-step='0'] .astate .st-1, .agreement[data-step='0'] .astate .st-2 { opacity: 0; }
.agreement[data-step='1'] .astate .st-1 { opacity: 1; }
.agreement[data-step='1'] .astate .st-0, .agreement[data-step='1'] .astate .st-2 { opacity: 0; }
.agreement[data-step='1'] .a-patient .anote .note-label { color: var(--text); }
@media (max-width: 519.98px) {
  .arow { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .atime { grid-row: 1; grid-column: 1; }
  .astate, .anote .chip { grid-row: 1; grid-column: 2; justify-self: end; }
  .alabel { grid-row: 2; grid-column: 1 / -1; }
  .anote { grid-template-columns: 1fr auto; }
  .anote .note-label { grid-row: 1; grid-column: 1; }
}
.agree-controls { display: none; margin-top: 1.1rem; } /* shown only with JS + motion */
.fig-cap { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); max-width: 62ch; }

/* ---------------- prose (legal + long-form) ---------------- */
.prose-sec { padding-block: var(--space-band-tight) var(--space-band); }
.prose { max-width: 46rem; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.prose .updated { font: 500 0.8rem var(--mono); color: var(--muted); margin-top: 0.7rem; }
.prose h2 { font-size: 1.3rem; margin: 2.1rem 0 0.5rem; }
.prose h3 { margin: 1.4rem 0 0.3rem; }
.prose p, .prose li { color: var(--muted); }
.prose p { margin-top: 0.85rem; }
.prose ul, .prose ol { margin: 0.6rem 0 0 1.25rem; }
.prose li + li { margin-top: 0.3rem; }
.prose strong { color: var(--text); }
.prose .notice { background: var(--accent-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.05rem 1.25rem; margin-top: 1.5rem; color: var(--text); font-size: 0.96rem; }
.prose .notice p, .prose .notice li { color: var(--text); }
.prose table { border-collapse: collapse; margin-top: 1rem; width: 100%; font-size: 0.92rem; }
.prose caption { text-align: left; font-weight: 600; color: var(--text); padding-bottom: 0.5rem; caption-side: top; }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; color: var(--muted); vertical-align: top; }
.prose th { color: var(--text); background: var(--bg); }
/* narrow screens: the labelled-cards pattern (no horizontal clipping) */
@media (max-width: 599.98px) {
  .prose table.resp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prose table.resp-table, .prose table.resp-table tbody { display: block; }
  .prose table.resp-table caption { display: block; }
  .prose table.resp-table tr { display: block; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 0.35rem 0.85rem 0.7rem; margin-top: 0.8rem; }
  .prose table.resp-table td { display: block; border: 0; padding: 0.35rem 0 0; }
  .prose table.resp-table td::before { content: attr(data-th); display: block; font-weight: 600; color: var(--text); font-size: 0.8rem; }
}

/* ---------------- contact channels ---------------- */
.channels { margin-top: 2rem; display: grid; gap: 0.8rem; }
.channel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.05rem 1.2rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; align-items: baseline; }
.channel .c-label { font-weight: 600; min-width: 15rem; }
.channel a { font-family: var(--mono); font-size: 0.93rem; overflow-wrap: anywhere; }
.channel .c-hint { flex-basis: 100%; color: var(--muted); font-size: 0.9rem; }
.warnbox { background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius); padding: 0.9rem 1.1rem; margin-top: 1.5rem; color: var(--warning); font-size: 0.94rem; font-weight: 500; }

/* ---------------- path cards ---------------- */
.path-grid { margin-top: 2rem; }
.path-card h3 { font-size: 1.15rem; }

/* ---------------- sibling navigation ---------------- */
.sibnav { padding-block: 0 var(--space-band-tight); background: var(--band-bg); }
.sib-wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; }
.sib { display: flex; flex-direction: column; gap: 0.15rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1.1rem; text-decoration: none; color: inherit; min-width: 0; }
.sib:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.sib strong { color: var(--accent-strong); font-size: 0.95rem; }
.sib-dir { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sib.next { text-align: right; align-items: flex-end; }
.sib.up { text-align: center; align-items: center; }
.sib.empty { visibility: hidden; border: 0; }
@media (max-width: 639.98px) {
  .sib-wrap { grid-template-columns: 1fr; }
  .sib.next { text-align: left; align-items: flex-start; }
  .sib.up { text-align: left; align-items: flex-start; }
  .sib.empty { display: none; }
}

/* ---------------- footer ---------------- */
.site-foot { background: var(--surface); border-top: 1px solid var(--border); margin-top: 0; padding: 2.8rem 0 3rem; }
.f-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 1.6rem; }
@media (max-width: 999.98px) { .f-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 519.98px) { .f-cols { grid-template-columns: 1fr; } }
.f-label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.55rem; }
.f-group li { list-style: none; }
.f-link { display: inline-flex; min-height: 36px; align-items: center; color: var(--text); font-size: 0.93rem; text-decoration: none; }
.f-link:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.f-link[aria-current='page'] { color: var(--accent-strong); font-weight: 600; }
.f-brand p { color: var(--muted); font-size: 0.9rem; margin-top: 0.7rem; max-width: 34ch; }
.f-legal { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: space-between; color: var(--muted); font-size: 0.86rem; }
.f-legal-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* ---------------- 404 + root redirect ---------------- */
.nf { text-align: center; padding: clamp(3rem, 10vh, 6rem) 1rem; }
.nf .code { font: 600 0.9rem var(--mono); color: var(--accent-label); letter-spacing: 0.14em; margin-top: 2rem; }
.nf h1 { margin-top: 0.6rem; }
.nf p { color: var(--muted); margin-top: 0.8rem; }
.nf .cta-row { justify-content: center; margin-top: 1.6rem; }
.nf-block { margin-top: 2.2rem; }
.nf-block[hidden] { display: none; }
.nf-langs { list-style: none; margin-top: 1rem; display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.nf .wordmark { justify-content: center; width: 100%; }
.redirect-page { font-family: var(--sans); padding: 2rem; }

/* [data-reveal] is an IN-VIEW TRIGGER ONLY (JS adds .in). The base state is
   the settled page; nothing text-bearing is ever hidden. */

/* ---------------- motion (ALL of it lives here; targeted, one-shot) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* interaction feedback (≈180–350ms) */
  .btn, .nav-link, .nav-toggle, .sub-btn, .sub-link, .lang a, .mm-link, .mm-lang a,
  a.card-link, a.row-link, .sib, .f-link, .crumbs a, .peer-link, .disc summary {
    transition: background-color 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease,
      color 0.18s ease, transform 0.18s ease;
  }
  a.card-link:hover, a.row-link:hover, .sib:hover { transform: translateY(-2px); }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .go-arrow { transition: transform 0.18s ease; }
  a.card-link:hover .go-arrow, a.row-link:hover .go-arrow { transform: translateX(3px); }

  /* dropdown + mobile menu entrances */
  .nav-item[data-open='true'] > .sub { animation: subIn 0.16s ease; }
  .mobile-menu[data-open='true'] { animation: menuIn 0.22s ease; }
  .caret { transition: transform 0.16s ease; }

  /* HERO CONVERGENCE (load, once, ≈1s): the journeys ease inward (transform
     only — every word visible from first paint), the fans draw, the mark's
     interlinked forms come together, the thread continues downstream. */
  html.js .cv-doc li { animation: fromLeft 0.3s ease backwards; }
  html.js .cv-pat li { animation: fromRight 0.3s ease backwards; }
  html.js .cv-side li[data-n='2'] { animation-delay: 0.06s; }
  html.js .cv-side li[data-n='3'] { animation-delay: 0.12s; }
  html.js .cv-fan .cv-c { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawPath 0.32s ease forwards; }
  html.js .cv-fan .cv-c:nth-of-type(1) { animation-delay: 0.18s; }
  html.js .cv-fan .cv-c:nth-of-type(2) { animation-delay: 0.26s; }
  html.js .cv-fan .cv-c:nth-of-type(3) { animation-delay: 0.34s; }
  html.js .cvm-l { animation: fromLeft 0.3s ease 0.42s backwards; }
  html.js .cvm-r { animation: fromRight 0.3s ease 0.42s backwards; }
  html.js .cvm-weave { opacity: 0; animation: fadeIn 0.18s ease 0.72s forwards; }
  html.js .cvm-dot { opacity: 0; animation: fadeIn 0.2s ease 0.78s forwards; }
  html.js .cv-stem { transform: scaleY(0); transform-origin: top; animation: drawRail 0.25s ease 0.8s forwards; }
  html.js .cv-down li { opacity: 0; animation: fadeIn 0.22s ease forwards; }
  html.js .cv-down li[data-n='1'] { animation-delay: 0.88s; }
  html.js .cv-down li[data-n='2'] { animation-delay: 0.95s; }
  html.js .cv-down li[data-n='3'] { animation-delay: 1.02s; } /* completes ≈1.05s */

  /* TRANSFORMATION rows: each concept-specific join settles once in view
     (both statements always visible). */
  html.js .tf .tf-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .tf.in .tf-link { animation: drawPath 0.55s ease forwards; }
  html.js .tf.in .tf-row:nth-child(1) .tf-link { animation-delay: 0.05s; }
  html.js .tf.in .tf-row:nth-child(2) .tf-link { animation-delay: 0.25s; }
  html.js .tf.in .tf-row:nth-child(3) .tf-link { animation-delay: 0.45s; }
  html.js .tf .tfh-stack, html.js .tf .tft-on, html.js .tf .tfm-plan { opacity: 0; }
  html.js .tf.in .tf-row:nth-child(1) .tfh-stack { animation: fadeIn 0.3s ease 0.5s forwards; }
  html.js .tf.in .tf-row:nth-child(2) .tft-on { animation: fadeIn 0.3s ease 0.7s forwards; }
  html.js .tf.in .tf-row:nth-child(3) .tfm-plan { animation: fadeIn 0.3s ease 0.9s forwards; }
  html.js .tf .tfh-frag rect { animation: none; }
  html.js .tf.in .tfh-frag rect:nth-of-type(1) { animation: nudgeR 0.4s ease 0.15s; }
  html.js .tf.in .tfh-frag rect:nth-of-type(3) { animation: nudgeR 0.4s ease 0.25s; }

  /* PROGRESS LEDGER: status marks settle, groups nudge up (transform only). */
  html.js .lg-groups .lg-group { transform: translateY(10px); transition: transform 0.4s ease; }
  html.js .lg-groups .lg-mark { opacity: 0; transition: opacity 0.3s ease; }
  html.js .lg-groups.in .lg-group { transform: none; }
  html.js .lg-groups.in .lg-mark { opacity: 1; }
  html.js .lg-groups.in .lg-group:nth-child(2) { transition-delay: 0.12s; }
  html.js .lg-groups.in .lg-group:nth-child(3) { transition-delay: 0.24s; }
  html.js .lg-groups.in .lg-group:nth-child(4) { transition-delay: 0.36s; }

  /* DAY ARC / STATIONS / HISTORY-BUILD / LOOP / TRACE / RESEARCH FLOW:
     one quiet settle each — decoration only, text always visible. */
  html.js .arc::before { transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease 0.1s; }
  html.js .arc.in::before { transform: none; }
  html.js .arc .arc-dot { opacity: 0; transition: opacity 0.25s ease; }
  html.js .arc.in .arc-dot { opacity: 1; }
  html.js .arc.in .arc-ph[data-n='2'] .arc-dot { transition-delay: 0.18s; }
  html.js .arc.in .arc-ph[data-n='3'] .arc-dot { transition-delay: 0.36s; }
  html.js .stations .station { transform: translateY(8px); transition: transform 0.35s ease; }
  html.js .stations.in .station { transform: none; }
  html.js .stations.in .station:nth-child(2), html.js .stations.in .station:nth-child(5) { transition-delay: 0.08s; }
  html.js .stations.in .station:nth-child(3), html.js .stations.in .station:nth-child(6) { transition-delay: 0.16s; }
  html.js .hb .tf-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .hb.in .tf-link { animation: drawPath 0.45s ease 0.25s forwards; }
  html.js .hb .hb-bar { transform: scaleX(0); }
  html.js .hb.in .hb-bar { animation: growBar 0.4s ease forwards; }
  html.js .hb.in .hb-b2 { animation-delay: 0.12s; }
  html.js .hb.in .hb-b3 { animation-delay: 0.24s; }
  html.js .hb .hb-chips .chip { opacity: 0; }
  html.js .hb.in .hb-chips .chip:nth-child(1) { animation: fadeIn 0.25s ease 0.55s forwards; }
  html.js .hb.in .hb-chips .chip:nth-child(2) { animation: fadeIn 0.25s ease 0.7s forwards; }
  html.js .loop .loop-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .loop.in .loop-path { animation: drawPath 0.7s ease 0.2s forwards; }
  html.js .loop .loop-head, html.js .loop .loop-lab { opacity: 0; }
  html.js .loop.in .loop-head, html.js .loop.in .loop-lab { animation: fadeIn 0.25s ease 0.85s forwards; }
  html.js .trace .trace-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.js .trace.in .trace-path { animation: drawPath 0.7s ease 0.2s forwards; }
  html.js .trace .trace-head { opacity: 0; }
  html.js .trace.in .trace-head { animation: fadeIn 0.25s ease 0.85s forwards; }
  html.js .rflow .rf-n { opacity: 0; transition: opacity 0.25s ease; }
  html.js .rflow.in .rf-n { opacity: 1; }
  html.js .rflow.in .rf-step:nth-child(3n+2) .rf-n { transition-delay: 0.1s; }
  html.js .rflow.in .rf-step:nth-child(3n) .rf-n { transition-delay: 0.2s; }

  /* agreement demonstration: play button appears (JS + motion only), chips
     transition between the user-driven states */
  html.js .agree-controls { display: block; }
  .astate .chip { transition: opacity 0.35s ease, transform 0.35s ease; }
  .astate .st-0, .astate .st-1 { transform: translateY(4px); }
  .agreement[data-step='0'] .astate .st-0,
  .agreement[data-step='1'] .astate .st-1 { transform: none; }
  .anote .note-label { transition: color 0.3s ease; }

  @keyframes fromLeft { from { transform: translateX(-14px); } to { transform: none; } }
  @keyframes fromRight { from { transform: translateX(14px); } to { transform: none; } }
  @keyframes nudgeR { 50% { transform: translateX(3px); } }
  @keyframes growBar { to { transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes drawRail { to { transform: scaleY(1); } }
  @keyframes drawPath { to { stroke-dashoffset: 0; } }
  @keyframes subIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* very short viewports (e.g. 400% zoom in a small window): release the sticky
   header so content keeps the room */
@media (max-height: 500px) {
  .site-head { position: static; }
}