/* ============================================================
   BetaDocta core  (assets/css/bd-core.css)
   ------------------------------------------------------------
   THREE COLOURS. Every other value on the page is one of these
   three at a different opacity. The eye reads a tint as the same
   colour; it reads a new hue as a new decision.

     ink    #07262b   deep clinical teal-black
     teal   #137d8d   the single accent
     paper  #f4f2ee   warm off-white ground

   Red does not appear here. It exists only inside danger-sign
   content and on the emergency page, where it means something
   clinical rather than decorative.

   One typeface. Hanken Grotesk carries the whole platform, with
   weight doing the work a second family would otherwise do. For
   readers who did not finish secondary school, one clear face
   beats an editorial pairing.

   Load order: bd-core.css LAST, after styles.css, so the token
   set wins. Nothing in here references a token it does not also
   define.
   ============================================================ */

:root{
  /* --- the three, and only the three --- */
  --ink:#07262b;
  --teal:#137d8d;
  --paper:#f4f2ee;

  /* --- surfaces: paper and ink at opacity --- */
  --surface:#fbfaf8;                    /* paper lightened, for cards */
  --sunken:#ece9e3;                     /* paper darkened, for wells */
  --hairline:rgba(7,38,43,.14);
  --hairline-soft:rgba(7,38,43,.08);

  /* --- text: ink at opacity --- */
  --text:var(--ink);
  --text-soft:rgba(7,38,43,.72);
  --text-mute:rgba(7,38,43,.56);

  /* --- accent states --- */
  --teal-press:#0e626f;                 /* darker, for the pressed and filled states */
  --teal-wash:rgba(19,125,141,.08);
  --focus:#137d8d;

  /* --- theme-invariant, for the ink band (header, footer) --- */
  --on-ink:#f4f2ee;
  --on-ink-soft:rgba(244,242,238,.72);
  --on-ink-line:rgba(244,242,238,.18);
  --teal-on-ink:#5fc3d2;                /* lightened, because halation eats contrast on dark */

  /* --- geometry ---
     The first build used 2px everywhere and it read as hard: the
     page looked printed rather than handled. These are soft enough
     to feel made for a phone and far from a pill. */
  --r:8px;          /* cards, panels, buttons */
  --r-sm:6px;       /* inputs, chips, small controls */
  --r-lg:14px;      /* media, the hero, anything large */
  --r-pill:8px;
  --rule:1px solid var(--hairline);
  --shadow:none;

  /* --- rhythm --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --measure:62ch;
  --wide:1120px;

  --font:"Hanken Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,monospace;
}

/* ============================================================
   Reset the parts of styles.css that fight the system
   ============================================================ */
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--font);
  font-size:1rem;
  line-height:1.6;
}
body::after{ content:none; }               /* the film-grain overlay */

h1,h2,h3,h4{
  font-family:var(--font);
  color:var(--ink);
  text-transform:none;                     /* styles.css uppercases headings */
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0 0 var(--s2);
}
h1{ font-size:clamp(2rem,5.2vw,3.1rem); line-height:1.08; font-weight:700 }
h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.15; font-weight:700 }
h3{ font-size:1.06rem; line-height:1.3; font-weight:650 }
p{ text-wrap:pretty; margin:0 0 var(--s2) }
a{ color:var(--teal) }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r) }

.bd-wrap{ width:min(var(--wide),100% - 2*var(--s3)); margin-inline:auto }
.bd-measure{ max-width:var(--measure) }
.bd-sec{ padding-block:var(--s6) }
.bd-sec--tight{ padding-block:var(--s5) }
.bd-sec + .bd-sec{ border-top:var(--rule) }

/* ============================================================
   Buttons. One filled, one outlined, one plain. No third style.
   ============================================================ */
.bdb{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 var(--s3);
  font:600 1rem/1 var(--font);
  border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.bdb--fill{ background:var(--teal-press); color:var(--on-ink); border-color:var(--teal-press) }
.bdb--fill:hover{ background:var(--ink); border-color:var(--ink) }
.bdb--line{ background:transparent; color:var(--ink); border-color:var(--hairline) }
.bdb--line:hover{ border-color:var(--teal); color:var(--teal-press) }
.bdb--plain{ background:transparent;color:var(--teal);border:0;padding:0;min-height:0;text-decoration:underline;text-underline-offset:3px }
.bdb--plain:hover{ color:var(--ink) }
.bdb--wide{ width:100% }

/* ============================================================
   Hero. Four text elements maximum, and on a phone the words
   come first. The old build let the two avatars take the screen
   and pushed the headline out of view entirely.
   ============================================================ */
.bd-hero{
  padding-block:clamp(var(--s4),7vw,var(--s6)) var(--s5);
  border-bottom:var(--rule);
}
.bd-hero__grid{
  display:grid;gap:var(--s4);align-items:center;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
}
.bd-hero h1{ max-width:16ch }
.bd-hero__lede{
  font-size:1.09rem;color:var(--text-soft);max-width:44ch;margin-bottom:var(--s3);
}
.bd-hero__actions{ display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap }
.bd-hero__art{ display:flex;justify-content:flex-end;align-items:flex-end;gap:0 }
.bd-hero__art img{ width:min(46%,210px);height:auto }

@media (max-width:820px){
  .bd-hero__grid{ grid-template-columns:1fr; gap:var(--s3) }
  /* the words, then the picture. Never the picture alone. */
  .bd-hero__art{ order:2; justify-content:flex-start }
  .bd-hero__art img{ width:min(38%,132px) }
  .bd-hero__text{ order:1 }
  .bd-hero__actions .bdb{ flex:1 1 auto }
}

/* ============================================================
   Doors. Three, for the three people who arrive here. Not a row
   of identical icon-top cards: each door states who it is for,
   and the whole card is the link.
   ============================================================ */
/* ============================================================
   The three doors.
   They used to be one bordered strip cut by hairlines, which on a
   phone read as a single block rather than three choices. Each is
   now its own card, with room for a picture, because the picture
   is what tells someone who cannot read quickly which one is
   theirs.
   ============================================================ */
.bd-doors{ display:grid;gap:var(--s3) }
.bd-door{
  display:grid;gap:var(--s1);align-content:start;
  padding:0 0 var(--s3);
  text-decoration:none;color:inherit;background:var(--surface);
  border:var(--rule);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s ease,transform .18s ease,background .18s ease;
}
.bd-door:hover,.bd-door:focus-visible{ border-color:var(--teal);background:var(--teal-wash) }
@media (prefers-reduced-motion:no-preference){
  .bd-door:hover{ transform:translateY(-2px) }
}
.bd-door__pic{
  display:grid;place-items:end center;height:152px;margin:0 0 var(--s2);
  background:linear-gradient(180deg,var(--teal-wash),var(--sunken));
  border-bottom:var(--rule);overflow:hidden;
}
.bd-door__pic img{
  height:144px;width:auto;display:block;object-fit:contain;object-position:bottom center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:no-preference){
  .bd-door:hover .bd-door__pic img{ transform:translateY(-4px) scale(1.03) }
}
.bd-door__who{
  font-size:.82rem;font-weight:700;color:var(--teal-press);
  letter-spacing:.02em;padding-inline:var(--s3);
}
.bd-door__what{
  font-size:1.16rem;font-weight:700;color:var(--ink);line-height:1.25;
  padding-inline:var(--s3);
}
.bd-door__why{
  font-size:.94rem;color:var(--text-soft);margin:0;padding-inline:var(--s3);
}
.bd-door__go{
  font-size:.9rem;font-weight:600;color:var(--teal-press);padding-inline:var(--s3);
  margin-top:.2rem;
}
@media (min-width:820px){
  .bd-doors{ grid-template-columns:repeat(3,1fr) }
}

/* ============================================================
   Steps. The how-it-works, stated once, as a list rather than
   four decorated cards. The step content is the label, so there
   are no "01 / 02 / 03" numerals.
   ============================================================ */
.bd-steps{ display:grid;gap:0;max-width:var(--measure);border-top:var(--rule);
  list-style:none;padding:0;margin:0 }          /* the headings carry the order, not numerals */
.bd-step{ padding-block:var(--s3);border-bottom:var(--rule) }
.bd-step h3{ margin:0 0 4px }
.bd-step p{ margin:0;color:var(--text-soft);font-size:.96rem }

/* ============================================================
   Promises. The one trust section. Plain rows, no icons, no
   coloured left borders, no cards.
   ============================================================ */
.bd-promises{ display:grid;gap:0;border-top:var(--rule);max-width:var(--measure) }
.bd-promise h3{ max-width:34ch }
.bd-promise{ padding-block:var(--s3);border-bottom:var(--rule) }
.bd-promise h3{ margin:0 0 4px }
.bd-promise p{ margin:0;color:var(--text-soft);font-size:.96rem }

/* ============================================================
   Plans. A priced row list, the pattern that works in this
   market, not four cards of unequal height.
   ============================================================ */
.bd-plans{ border-top:var(--rule);max-width:var(--measure) }
.bd-plan{
  display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s3);
  align-items:baseline;padding-block:var(--s3);border-bottom:var(--rule);
}
.bd-plan__name{ font-weight:700;color:var(--ink) }
.bd-plan__note{ grid-column:1/-1;margin:0;color:var(--text-soft);font-size:.92rem }
.bd-plan__price{ font:700 1.05rem/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap }
.bd-plan__price span{ font-weight:400;color:var(--text-mute);font-size:.85rem }

/* ============================================================
   Ink band. Dark in every theme, so its text uses the
   theme-invariant tokens and never --text.
   ============================================================ */
.bd-ink{ background:var(--ink);color:var(--on-ink) }
.bd-ink h2,.bd-ink h3{ color:var(--on-ink) }
.bd-ink p{ color:var(--on-ink-soft) }
.bd-ink a{ color:var(--teal-on-ink) }
.bd-ink .bdb--line{ color:var(--on-ink);border-color:var(--on-ink-line) }
.bd-ink .bdb--line:hover{ border-color:var(--teal-on-ink);color:var(--teal-on-ink) }

/* ============================================================
   The single emergency route. One per page, in the header, and
   nowhere else. It is quiet because it is always there, not
   loud because it is competing for attention.
   ============================================================ */
.bd-emg{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:650;font-size:.94rem;color:var(--ink);text-decoration:none;
  border:1px solid var(--hairline);border-radius:var(--r);
  padding:.5rem .75rem;min-height:40px;
}
.bd-emg::before{ content:"";width:7px;height:7px;border-radius:50%;background:#9b2c20;flex:none }
.bd-emg:hover{ border-color:var(--ink) }
.bd-ink .bd-emg{ color:var(--on-ink);border-color:var(--on-ink-line) }
.bd-ink .bd-emg:hover{ border-color:var(--on-ink) }

/* ============================================================
   Quiet entrance. Transform and opacity only.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .bd-rise{
    opacity:0;transform:translateY(14px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1) var(--bd-delay,0ms),
               transform .55s cubic-bezier(.16,1,.3,1) var(--bd-delay,0ms);
    will-change:opacity,transform;
  }
  .bd-rise.is-in{ opacity:1;transform:none;will-change:auto }
}

/* ============================================================
   Header and footer. One bar, not three. The old build stacked
   a utility strip, a mega menu and a mobile list: 42 visible
   strings before a word of the page was read.
   ============================================================ */
.bd-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--on-ink);padding:.75rem 1rem;border-radius:var(--r);
}
.bd-skip:focus{ left:var(--s2);top:var(--s2) }

.bd-head{ background:var(--paper);border-bottom:var(--rule);position:sticky;top:0;z-index:40 }
.bd-head__inner{ display:flex;align-items:center;gap:var(--s3);min-height:66px }
.bd-head__brand{ display:flex;align-items:center;flex:none }
.bd-head__brand img{ height:26px;width:auto;display:block }

.bd-nav{ display:flex;gap:var(--s3);flex:1 1 auto }
.bd-nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.96rem;
  padding:.35rem 0;border-bottom:2px solid transparent;
}
.bd-nav a:hover,.bd-nav a[aria-current="page"]{ border-bottom-color:var(--teal) }

.bd-head__end{ display:flex;align-items:center;gap:var(--s2);flex:none }
.bd-head__lang,.bd-head__login{
  color:var(--text-soft);text-decoration:none;font-weight:600;font-size:.92rem;
}
.bd-head__lang:hover,.bd-head__login:hover{ color:var(--ink) }
.bd-head__toggle{
  display:none;background:transparent;border:1px solid var(--hairline);border-radius:var(--r);
  width:44px;height:44px;cursor:pointer;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.bd-head__toggle span{ display:block;width:18px;height:2px;background:var(--ink) }

@media (max-width:900px){
  .bd-head__inner{ flex-wrap:wrap;gap:var(--s2) }
  .bd-head__toggle{ display:flex }
  /* "Log in" used to be display:none here, and nothing put it into the
     mobile menu instead. So on every phone — which is nearly every
     visitor — the platform had NO way to sign in at all. The desktop
     pair now collapses into the menu below rather than vanishing. */
  .bd-head__login,.bd-head__join{ display:none }
  .bd-nav{
    order:3;flex-basis:100%;flex-direction:column;gap:0;
    display:none;border-top:var(--rule);margin-top:var(--s1);
  }
  .bd-nav[data-open="true"]{ display:flex }
  .bd-nav a{ padding:.9rem 0;border-bottom:var(--rule) }
  .bd-nav a:last-child{ border-bottom:0 }
  .bd-head__end{ margin-left:auto }
}

.bd-foot{ padding-block:var(--s5) var(--s3) }
.bd-foot__grid{
  display:grid;gap:var(--s4);
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
}
.bd-foot__line{ max-width:34ch;font-size:1rem;margin-bottom:var(--s3) }
.bd-foot h3{ font-size:.82rem;letter-spacing:.04em;margin:0 0 var(--s2);color:var(--on-ink) }
.bd-foot nav{ display:grid;gap:.6rem;align-content:start }
.bd-foot nav a{ color:var(--on-ink-soft);text-decoration:none;font-size:.94rem }
.bd-foot nav a:hover{ color:var(--on-ink);text-decoration:underline;text-underline-offset:3px }
.bd-foot__note{ margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--on-ink-line) }
.bd-foot__note p{ margin:0;font-size:.86rem;max-width:80ch;color:var(--on-ink-soft) }
@media (max-width:760px){ .bd-foot__grid{ grid-template-columns:1fr } }

/* ============================================================
   Desktop composition.
   The first build put every section in a 62ch column against the
   left edge, so half of a 1280px screen was empty and three
   sections running used the same list shape. Doctrine: a layout
   family appears once per page.

   Families now on the home page:
     hero split . door row . heading-beside-list . two-up grid
     . priced rows
   ============================================================ */
@media (min-width:900px){
  /* heading sits beside its content instead of above a narrow column */
  .bd-split{ display:grid;grid-template-columns:minmax(0,26ch) minmax(0,1fr);gap:var(--s5) }
  .bd-split__head{ position:sticky;top:96px;align-self:start }
  .bd-split__head h2{ margin-bottom:var(--s2) }
  .bd-split__head p{ color:var(--text-soft);font-size:.95rem;margin:0 }
  .bd-split__body{ max-width:none }
  .bd-steps,.bd-plans{ max-width:none }

  /* promises read as a two-up grid, not a fourth stacked list */
  .bd-promises{
    grid-template-columns:1fr 1fr;
    column-gap:var(--s5);border-top:var(--rule);max-width:none;
  }
  .bd-promise{ border-bottom:var(--rule) }
  .bd-promise:nth-last-child(-n+2){ border-bottom:0 }
}

/* ============================================================
   Page components, added for the action-first pages
   (specialist care, brain health). Same three colours. The
   pattern on those pages is: the tool itself sits at the top,
   not a button that leads to a page that describes the tool.
   ============================================================ */

/* --- the ask box: a well, not a card. It is the page's first act. --- */
.bd-ask{
  background:var(--sunken);border:var(--rule);border-radius:var(--r);
  padding:var(--s3);max-width:none;
}
.bd-ask__label{
  display:block;font-weight:600;font-size:1.05rem;margin-bottom:.35rem;color:var(--ink);
}
.bd-ask__help{ margin:0 0 var(--s2);font-size:.92rem;color:var(--text-soft) }
.bd-ask textarea,.bd-ask input[type="text"],.bd-ask input[type="search"]{
  width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r);
  padding:.75rem .85rem;resize:vertical;line-height:1.5;
}
.bd-ask textarea:focus-visible,.bd-ask input:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--teal);
}
.bd-ask textarea::placeholder{ color:var(--text-mute) }
.bd-ask__row{ display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2);align-items:center }

/* quick chips. Not pills: 2px, like everything else. */
.bd-chip{
  font:inherit;font-size:.88rem;cursor:pointer;
  background:transparent;color:var(--text-soft);
  border:1px solid var(--hairline);border-radius:var(--r);padding:.4rem .7rem;
}
.bd-chip:hover{ color:var(--ink);border-color:var(--ink) }
.bd-chip[aria-pressed="true"]{ background:var(--teal-wash);border-color:var(--teal);color:var(--teal-press);font-weight:600 }

/* --- the answer the ask box gives back --- */
.bd-answer{
  margin-top:var(--s3);padding:var(--s3);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--teal);
}
.bd-answer h3{ margin:0 0 .4rem;font-size:1.12rem }
.bd-answer p{ margin:0 0 var(--s2);color:var(--text-soft) }
.bd-answer p:last-child{ margin-bottom:0 }
.bd-answer--danger{ border-left-color:#9b2c20 }
.bd-answer__actions{ display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2) }
.bd-answer__place{
  display:block;padding:var(--s2) 0;border-top:var(--rule);
}
.bd-answer__place strong{ display:block;font-size:1.02rem }
.bd-answer__place span{ display:block;font-size:.9rem;color:var(--text-mute);margin-bottom:var(--s1) }

/* --- one feature link, whole block clickable --- */
.bd-feature{
  display:block;text-decoration:none;color:inherit;
  border:var(--rule);border-left:3px solid var(--teal);border-radius:var(--r);
  padding:var(--s3);background:var(--surface);
  transition:background .18s ease,border-color .18s ease;
}
.bd-feature:hover,.bd-feature:focus-visible{ background:var(--teal-wash) }
.bd-feature h3{ margin:0 0 .4rem;font-size:1.2rem;color:var(--ink) }
.bd-feature p{ margin:0 0 var(--s2);color:var(--text-soft);max-width:60ch }
.bd-feature__go{ font-weight:600;color:var(--teal-press);font-size:.95rem }

/* --- compact facts: the explanation, kept short, at the bottom --- */
.bd-brief{ border-top:var(--rule);padding-top:var(--s3) }
.bd-brief h2{ font-size:1.1rem;margin:0 0 var(--s2) }
.bd-facts{ list-style:none;margin:0;padding:0;display:grid;gap:var(--s2) }
.bd-facts li{ display:grid;gap:.15rem;max-width:64ch }
.bd-facts strong{ font-weight:600;color:var(--ink) }
.bd-facts span{ color:var(--text-soft);font-size:.94rem }
@media (min-width:900px){ .bd-facts{ grid-template-columns:1fr 1fr;column-gap:var(--s5) } }

/* ============================================================
   The two tools on brain-health.html are rendered by
   brain-health.js and brain-check.js, which emit .bh-* and
   .bc-* markup that styles.css draws with gradients, pills,
   16px radii and a second green. Re-drawn here in the token
   set. The scripts are untouched; only the paint changes.
   ============================================================ */

/* --- language switch: a segmented control, square --- */
.bh-lang{
  display:inline-flex;gap:0;margin:0 0 var(--s2);padding:0;
  background:transparent;border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;
}
.bh-lang button{
  border:0;border-right:1px solid var(--hairline);background:var(--surface);
  padding:.55rem 1rem;border-radius:0;font:inherit;font-size:.9rem;color:var(--text-soft);cursor:pointer;
}
.bh-lang button:last-child{ border-right:0 }
.bh-lang button:hover{ color:var(--ink);background:var(--teal-wash) }
.bh-lang button.active{ background:var(--ink);color:var(--on-ink);font-weight:600 }

/* --- suggested questions: a list of quiet buttons, not floating cards --- */
.bh-questions{ display:grid;gap:0;margin:0 0 var(--s3);border-top:var(--rule) }
.bh-q{
  text-align:left;border:0;border-bottom:var(--rule);background:transparent;border-radius:0;
  padding:.85rem 0;font:inherit;font-size:1rem;color:var(--ink);cursor:pointer;
  transition:color .16s ease,padding-left .16s ease;
}
.bh-q:hover{ color:var(--teal-press);padding-left:.4rem;box-shadow:none;transform:none }
.bh-q:focus-visible{ outline:2px solid var(--focus);outline-offset:2px }

/* --- ask row --- */
.bh-ask{ display:flex;gap:var(--s1);margin-bottom:var(--s1);flex-wrap:wrap }
.bh-input{
  flex:1 1 15rem;border:1px solid var(--hairline);border-radius:var(--r);
  padding:.75rem .85rem;font:inherit;font-size:1rem;background:var(--surface);color:var(--ink);
}
.bh-input:focus-visible{ outline:2px solid var(--focus);outline-offset:1px;border-color:var(--teal) }
.bh-input::placeholder{ color:var(--text-mute) }

/* --- the answer --- */
.bh-answer{
  background:var(--surface);border:1px solid var(--hairline);border-left:3px solid var(--teal);
  border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);
}
.bh-a-q{ font-weight:600;color:var(--ink);margin-bottom:.4rem;text-transform:none }
.bh-a-body{ line-height:1.65;color:var(--text-soft);white-space:pre-wrap }
.bh-loading{ opacity:.6;font-style:normal }
.bh-disclaimer{ font-size:.86rem;color:var(--text-mute);margin:var(--s1) 0 0 }

/* --- the brain health check --- */
.bc-quiz{ display:grid;gap:var(--s3) }
.bc-q{ margin:0;padding-bottom:var(--s3);border-bottom:var(--rule) }
.bc-q-text{ font-weight:600;margin:0 0 var(--s1);display:flex;gap:.6rem;align-items:baseline;color:var(--ink) }
.bc-q-num{
  display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;border-radius:var(--r);
  background:transparent;border:1px solid var(--hairline);color:var(--text-mute);
  font-size:.78rem;flex:0 0 auto;font-weight:600;
}
.bc-opts{ display:flex;flex-wrap:wrap;gap:var(--s1);padding-left:2rem }
.bc-opt{
  border:1px solid var(--hairline);background:transparent;border-radius:var(--r);
  padding:.45rem .8rem;font:inherit;font-size:.92rem;cursor:pointer;color:var(--text-soft);
  transition:border-color .16s ease,color .16s ease;
}
.bc-opt:hover{ border-color:var(--ink);color:var(--ink) }
.bc-opt.sel{ background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600 }
.bc-result{ margin-top:var(--s3) }
.bc-band{
  border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s3);
  background:var(--sunken);border-left:3px solid var(--ink);
}
.bc-band strong{ font-size:1.1rem;display:block;margin-bottom:.3rem;color:var(--ink) }
.bc-band p{ margin:0;line-height:1.6;color:var(--text-soft) }
.bc-band-good{ background:var(--teal-wash);border-left-color:var(--teal) }
.bc-band-high{ background:rgba(155,44,32,.06);border-left-color:#9b2c20 }
.bc-tips-h{ margin:var(--s3) 0 var(--s2);font-size:1.05rem }
.bc-tips{ margin:0 0 var(--s2);padding-left:1.1rem;line-height:1.7;color:var(--text-soft) }
.bc-tips li{ margin-bottom:.4rem }

/* the scripts still emit .btn / .btn-outline; make those read as our buttons */
#brainHealth .btn,#brainHealthCheck .btn,
#brainHealth .btn-outline,#brainHealthCheck .btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.96rem;font-weight:600;line-height:1;
  padding:.85rem 1.35rem;border-radius:var(--r);text-decoration:none;cursor:pointer;
  box-shadow:none;text-transform:none;letter-spacing:0;
}
#brainHealth .btn,#brainHealthCheck .btn{ background:var(--ink);color:var(--on-ink);border:1px solid var(--ink) }
#brainHealth .btn:hover,#brainHealthCheck .btn:hover{ background:var(--teal-press);border-color:var(--teal-press) }
#brainHealth .btn-outline,#brainHealthCheck .btn-outline{
  background:transparent;color:var(--ink);border:1px solid var(--hairline);
}
#brainHealth .btn-outline:hover,#brainHealthCheck .btn-outline:hover{ border-color:var(--ink) }

/* ============================================================
   Legacy token remap.

   styles.css and bd-ui.css were built on a seven-step green
   ramp, a coral accent, 26px corners and three tinted shadows.
   Every page that still carries that markup inherits it. Rather
   than rewrite fourteen stylesheets' worth of rules, the old
   token names are pointed at the three colours here. bd-core.css
   loads last, so this wins everywhere at once.

   Coral is gone. It was a fourth hue doing the job teal already
   does. Danger red stays, at one value, and only where content
   is actually dangerous.
   ============================================================ */
:root{
  --bg:#f4f2ee;
  --paper:#f4f2ee;
  --surface:#fbfaf8;
  --surface-2:#fbfaf8;

  --green-900:#07262b;
  --green-800:#07262b;
  --green-700:#0e626f;
  --green-600:#0e626f;
  --green-500:#137d8d;
  --green-400:#137d8d;
  --green-300:rgba(19,125,141,.35);
  --green-200:rgba(19,125,141,.22);
  --green-100:rgba(19,125,141,.08);

  --accent:#137d8d;
  --accent-600:#0e626f;
  --accent-300:rgba(19,125,141,.30);
  --accent-soft:rgba(19,125,141,.08);

  --info:#137d8d;
  --danger:#9b2c20;
  --danger-soft:rgba(155,44,32,.08);

  --text:#07262b;
  --muted:rgba(7,38,43,.72);
  --line:rgba(7,38,43,.14);
  --line-strong:rgba(7,38,43,.24);

  --shadow:none;
  --shadow-sm:none;
  --shadow-gold:none;

  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;

  /* one typeface. Fraunces is not loaded on these pages. */
  --font-display:"Hanken Grotesk",-apple-system,"Segoe UI",system-ui,sans-serif;
}

/* the few places the old files wrote a hex instead of a token */
.bd-toast{ color:var(--on-ink);box-shadow:none;border-radius:var(--r) }
.bd-toast[data-tone="warn"]{ background:var(--ink) }
.bd-toast__close:hover,.bd-toast__close:focus-visible{ background:rgba(244,242,238,.14);border-radius:var(--r) }
.bd-btn--primary{ background:var(--ink);color:var(--on-ink);box-shadow:none;border:1px solid var(--ink) }
.bd-btn--primary:hover{ background:var(--teal-press);border-color:var(--teal-press);color:var(--on-ink);translate:none }
.bd-choice:has(input:checked){ border-color:var(--teal);background:var(--teal-wash) }
.bd-banner{ background:var(--ink);color:var(--on-ink) }
.bd-banner .bd-btn--quiet{ color:var(--on-ink-soft);border-color:var(--on-ink-line) }
.bd-dialog::backdrop{ background:rgba(7,38,43,.55) }
.bd-dialog__panel{ border-radius:var(--r);box-shadow:none;border:1px solid var(--hairline) }
.bd-head__toggle{ color:var(--ink) }

/* the film grain overlay is defined in styles.css on body::after and
   is switched off at the top of this file; repeated here because some
   pages load a second copy of styles.css. */
body::after{ content:none }

/* The first section of an inner page carries the h1 in the head
   column. 26ch is right for a section h2 and too narrow for a
   page title, which broke to four lines. Doctrine: three. */
@media (min-width:900px){
  .bd-split--lead{ grid-template-columns:minmax(0,32ch) minmax(0,1fr) }
  .bd-split__head h1{ font-size:clamp(2rem,3.1vw,2.6rem);line-height:1.08;margin-bottom:var(--s2) }
}

/* the check's submit and retake are inside a grid; keep them their own width */
#brainHealthCheck .btn,#brainHealthCheck .btn-outline{ justify-self:start;width:auto }

/* Remaining hardcoded values in styles.css that no token reaches.
   Pure white is not one of the three; text on ink is paper. */
.btn,a.btn,button.btn,.dir-badge,.step-n,.neuro-feature-icon,.big-emergency-btn{ color:var(--on-ink) }
.chip{ background:var(--surface);color:var(--text-soft);border-radius:var(--r) }
.chip.active,.chip[aria-pressed="true"]{ background:var(--teal-wash);border-color:var(--teal);color:var(--teal-press) }
.eyebrow{ color:var(--teal-press) }
.pulse-rule{ color:var(--hairline);border-color:var(--hairline) }
.pic-card h3,.pc-body h3{ color:var(--on-ink) }
.pic-card p,.pc-body p{ color:var(--on-ink-soft) }

/* ============================================================
   Caregiver guide.
   The do / do-not / get-help blocks were a green, a pink and a
   red. Someone reading this is frightened and scanning. One red
   on the page, on the block that says go now, is easier to find
   than three coloured boxes competing. Do and do-not are told
   apart by the rule and the heading, not by a wash.
   ============================================================ */
.cg-lang{ background:transparent;border:1px solid var(--hairline);border-radius:var(--r);padding:0;gap:0;overflow:hidden }
.cg-lang button{ border-radius:0;border-right:1px solid var(--hairline);color:var(--text-soft);padding:.55rem 1rem }
.cg-lang button:last-child{ border-right:0 }
.cg-lang button.active{ background:var(--ink);color:var(--on-ink) }

.cg-navbtn{ background:transparent;border:1px solid var(--hairline);border-radius:var(--r);color:var(--text-soft);transition:border-color .16s ease,color .16s ease }
.cg-navbtn:hover{ border-color:var(--ink);color:var(--ink) }
.cg-navbtn.active{ background:var(--ink);border-color:var(--ink);color:var(--on-ink) }

.cg-panel{ background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r) }
.cg-block{ border-radius:var(--r);padding:var(--s2) var(--s3);border-left:3px solid var(--hairline);background:transparent }
.cg-block h4{ color:var(--ink);font-size:1rem;text-transform:none }
.cg-do{ background:var(--teal-wash);border-left-color:var(--teal) }
.cg-do h4{ color:var(--teal-press) }
.cg-dont{ background:var(--sunken);border-left-color:var(--text-mute) }
.cg-dont h4{ color:var(--ink) }
.cg-help{ background:rgba(155,44,32,.06);border:1px solid rgba(155,44,32,.22);border-left:3px solid #9b2c20 }
.cg-help h4{ color:#9b2c20 }
.cg-living{ background:var(--sunken);border-left-color:var(--hairline) }
.cg-living h4{ color:var(--ink) }
.cg-selfcare-card{ background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r) }
.cg-selfcare-card h4{ color:var(--ink) }
.cg-avatar{ background:var(--sunken);border-radius:var(--r) }

/* ============================================================
   Getting there. Each proposal is a decision, so it is a block
   with a reason above the name, not a card in a row of cards.
   ============================================================ */
.bd-go__list{ list-style:none;margin:var(--s3) 0 0;padding:0;border-top:var(--rule) }
.bd-go{ padding-block:var(--s3);border-bottom:var(--rule) }
.bd-go.is-skipped{ opacity:.5 }
.bd-go__why{ margin:0 0 .3rem;font-size:.86rem;font-weight:600;color:var(--teal-press) }
.bd-go__name{ margin:0 0 .3rem;font-size:1.12rem;line-height:1.3;text-transform:none }
.bd-go__where{ margin:0 0 var(--s2);font-size:.94rem;color:var(--text-soft) }
.bd-go__actions{ display:flex;flex-wrap:wrap;gap:var(--s1) }
.bd-go__open{ margin-top:var(--s3);padding-top:var(--s3);border-top:var(--rule) }
.bd-go__call{ margin:0 0 var(--s3);font-size:.94rem;color:var(--text-soft);max-width:62ch }
.bd-go__call a{ color:var(--teal-press);font-weight:600;white-space:nowrap }
.bd-go__modes{ list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:var(--rule) }
.bd-go__mode{
  display:grid;gap:.2rem;padding-block:var(--s2);border-bottom:var(--rule);
  grid-template-columns:1fr auto;align-items:baseline;
}
.bd-go__mode-name{ font-weight:600;color:var(--ink);grid-column:1;grid-row:1 }
.bd-go__mode-time{ color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;grid-column:2;grid-row:1 }
.bd-go__mode-note{ grid-column:1 / -1;grid-row:2;font-size:.88rem;color:var(--text-mute);max-width:46ch }
.bd-go__mode .bdb{ grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:.4rem;padding:.45rem .8rem;font-size:.86rem }
@media (min-width:560px){
  .bd-go__mode{ grid-template-columns:minmax(0,1fr) auto auto;column-gap:var(--s2) }
  .bd-go__mode-name{ grid-column:1;grid-row:1 }
  .bd-go__mode-note{ grid-column:1;grid-row:2 }
  .bd-go__mode-time{ grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right }
  .bd-go__mode .bdb{ grid-column:3;grid-row:1 / span 2;align-self:center;justify-self:end;margin-top:0 }
}
.bd-go__caveat{ margin:var(--s2) 0 0;font-size:.86rem;color:var(--text-mute);max-width:66ch }

/* styles.css rounds every .btn to a pill; the platform is 2px. */
.btn,.btn-outline,.btn-ghost,.chip,.big-emergency-btn{ border-radius:var(--r) }

/* ============================================================
   Neurology page. styles.css draws this with gradients on the
   BE-FAST letters, pill tags, a blue and an amber that exist
   nowhere else, and translateY hovers. Redrawn in the token
   set, with red kept for the stroke block and the danger tags
   only.
   ============================================================ */
.neuro-alert{
  border:1px solid rgba(155,44,32,.28);border-left:3px solid #9b2c20;
  background:rgba(155,44,32,.04);border-radius:var(--r);padding:var(--s3);
}
.neuro-alert h2{ margin-top:.4rem }
.cp-tag{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r);background:var(--teal-wash);color:var(--teal-press);
  margin-bottom:var(--s1);
}
.danger-tag{ background:rgba(155,44,32,.1);color:#9b2c20 }

.neuro-fast{ display:grid;gap:0;margin-top:var(--s3);border-top:var(--rule) }
.neuro-fast .card{
  background:transparent;border:0;border-bottom:var(--rule);border-radius:0;
  padding:var(--s3) 0;box-shadow:none;position:static;
  display:grid;gap:.2rem var(--s2);align-items:start;
  grid-template-columns:2.4rem minmax(0,1fr) auto;
}
/* the illustration sits at the right of the row, small, and is the
   first thing to go when the screen is narrow */
.neuro-fast-fig{ grid-column:3;grid-row:1 / span 2;align-self:center;width:64px }
.neuro-fast-fig img,.neuro-fast-fig svg{ width:64px;height:auto;display:block }
@media (max-width:420px){ .neuro-fast-fig{ display:none } }
.neuro-let{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--r);
  background:transparent;border:1px solid var(--hairline);color:var(--ink);
  font-family:var(--font);font-size:1.15rem;font-weight:700;margin:0;
}
.neuro-time .neuro-let{ background:transparent;border-color:#9b2c20;color:#9b2c20 }
.neuro-fast .card h3{ margin:0;font-size:1rem;grid-column:2;grid-row:1;text-transform:none;align-self:center }
.neuro-fast .card p{ margin:0;grid-column:2;grid-row:2;color:var(--text-soft);font-size:.94rem }
.neuro-fast .neuro-let{ grid-column:1;grid-row:1 / span 2;align-self:start }
@media (min-width:760px){ .neuro-fast{ grid-template-columns:1fr 1fr;column-gap:var(--s4) } }

.neuro-lkw{
  margin-top:var(--s3);padding:var(--s3);border-radius:var(--r);
  background:var(--sunken);border:1px solid var(--hairline);
}
.neuro-lkw h3{ margin:0 0 .4rem;font-size:1.05rem }
.neuro-lkw-input{
  display:block;margin-top:.4rem;padding:.6rem .7rem;border-radius:var(--r);
  border:1px solid var(--hairline);font:inherit;font-size:1rem;max-width:18rem;background:var(--surface);
}
.neuro-lkw-result{ margin-top:var(--s2);padding:var(--s2);border-radius:var(--r);font-size:.95rem }
.neuro-lkw-result.good,.neuro-lkw-result.warn{
  background:rgba(155,44,32,.06);border:1px solid rgba(155,44,32,.22);color:#7d241a;
}
.neuro-alert-actions{ display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3) }
.big-emergency-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:auto;
  background:#9b2c20;border:1px solid #9b2c20;color:var(--on-ink);border-radius:var(--r);
  font:inherit;font-weight:600;padding:.85rem 1.35rem;cursor:pointer;box-shadow:none;
}
.big-emergency-btn:hover{ background:#7d241a;border-color:#7d241a;transform:none }

/* two columns of plain blocks, replacing the card grids */
.neuro-doubles{ display:grid;gap:0;border-top:var(--rule) }
.neuro-doubles > *{ padding-block:var(--s3);border-bottom:var(--rule) }
.neuro-doubles .card,.neuro-doubles .neuro-cond{
  background:transparent;border:0;border-bottom:var(--rule);border-radius:0;
  box-shadow:none;padding:var(--s3) 0;transform:none;text-decoration:none;color:inherit;
}
.neuro-doubles .card h3,.neuro-doubles .neuro-cond h3{ margin:0 0 .3rem;font-size:1.05rem }
.neuro-doubles .card p,.neuro-doubles .neuro-cond p{ margin:0 0 .3rem;color:var(--text-soft);font-size:.94rem }
.neuro-doubles a.neuro-cond:hover{ background:var(--teal-wash) }
.neuro-doubles h3{ text-transform:none }
.neuro-doubles ul{ margin:0;padding-left:1.1rem;line-height:1.7;color:var(--text-soft) }
@media (min-width:760px){
  .neuro-doubles{ grid-template-columns:1fr 1fr;column-gap:var(--s5) }
}
.neuro-act{ font-size:.9rem;color:var(--text-mute);margin-top:.3rem }
.neuro-cond-tag{
  display:inline-block;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  padding:.2rem .5rem;border-radius:var(--r);margin-bottom:.4rem;
  background:var(--sunken);color:var(--text-mute);
}
.neuro-cond-tag.emergency{ background:rgba(155,44,32,.08);color:#9b2c20 }
.neuro-cond-tag.common{ background:var(--teal-wash);color:var(--teal-press) }
.neuro-cond-tag.chronic{ background:var(--sunken);color:var(--ink) }

.neuro-warn{
  margin-top:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r);font-size:.94rem;
  background:rgba(155,44,32,.06);border-left:3px solid #9b2c20;color:var(--text);
}

.neuro-tabs{ display:flex;gap:0;flex-wrap:wrap;margin-bottom:var(--s3);border-bottom:var(--rule) }
.neuro-tab{
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:.7rem 1rem .7rem 0;margin-right:var(--s3);
  font:inherit;font-size:.96rem;font-weight:600;color:var(--text-mute);cursor:pointer;
}
.neuro-tab:hover{ color:var(--ink) }
.neuro-tab.active{ color:var(--ink);border-bottom-color:var(--teal) }

.neuro-ask{ max-width:none;background:var(--sunken);border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s3) }
.neuro-chat{ max-height:20rem;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s1);margin-bottom:var(--s2) }
.neuro-chat-you{
  align-self:flex-end;background:var(--ink);color:var(--on-ink);
  padding:.55rem .8rem;border-radius:var(--r);max-width:80%;
}
.neuro-chat-bot{
  align-self:flex-start;background:var(--surface);border:1px solid var(--hairline);
  padding:.55rem .8rem;border-radius:var(--r);max-width:85%;
}
.neuro-ask-row{ display:flex;gap:var(--s1);flex-wrap:wrap }
.neuro-ask-row .cc-text{
  flex:1 1 14rem;border:1px solid var(--hairline);border-radius:var(--r);
  padding:.7rem .8rem;font:inherit;font-size:1rem;background:var(--surface);color:var(--ink);
}
.neuro-ask-row .cc-text:focus-visible{ outline:2px solid var(--focus);outline-offset:1px;border-color:var(--teal) }

.firstaid-hero{ margin-bottom:var(--s3) }
.firstaid-caption{ font-size:.94rem;color:var(--text-soft);margin:var(--s1) 0 0 }
.neuro-link:hover{ transform:none;box-shadow:none }

/* a short list of links, unadorned */
.bd-links{ list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:var(--rule) }
.bd-links li{ border-bottom:var(--rule) }
.bd-links a{ display:block;padding:.75rem 0;color:var(--ink);text-decoration:none;font-weight:600 }
.bd-links a:hover{ color:var(--teal-press) }

/* Token names styles.css uses only through var(name, fallback).
   Defining them here means the old fallback hex never fires. */
:root{
  --petrol:#07262b;
  --bone:#ece9e3;
  --leaf:#137d8d;
  --ink:#07262b;
}
.list li{ color:var(--text-soft) }
.nt-stat,.nt-prog,.nt-mood-opt,.nt-safety{ border-radius:var(--r) }
.nt-stat{ border-color:var(--hairline) }
.nt-prog,.nt-mood-opt{ background:var(--surface);border:1px solid var(--hairline) }
.nt-mood-opt.sel{ background:var(--ink);color:var(--on-ink);border-color:var(--ink) }
.neuro-lang-bar{ background:transparent;border:1px solid var(--hairline);border-radius:var(--r);padding:0;overflow:hidden;display:inline-flex }
.neuro-lang-bar button{ border:0;border-right:1px solid var(--hairline);background:var(--surface);color:var(--text-soft);padding:.55rem 1rem;border-radius:0;font:inherit;font-size:.9rem;cursor:pointer }
.neuro-lang-bar button:last-child{ border-right:0 }
.neuro-lang-bar button.active{ background:var(--ink);color:var(--on-ink);font-weight:600 }

/* A tick beside "Do not put anything in the mouth" reads as approval
   to someone scanning in a panic. The two lists must not share a mark. */
.list li{ color:var(--text-soft) }
.list li::before{
  content:"\2713";color:var(--on-ink);background:var(--teal);
  width:1.15rem;height:1.15rem;border-radius:var(--r);font-size:.7rem;margin-top:.22rem;
}
.list--no li::before{ content:"\00d7";background:transparent;color:#9b2c20;border:1px solid #9b2c20;font-size:.8rem }
.firstaid-hero{
  display:flex;gap:var(--s3);align-items:center;background:var(--sunken);
  border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s3);margin:0 0 var(--s3);
}

/* ============================================================
   Emergency page. The hero was a maroon gradient, which is two
   colours the system does not have, and the danger red then had
   nothing to stand out against. Ink ground, one red, and the
   only red thing above the fold is the button that finds a
   hospital.
   ============================================================ */
.emergency-hero{ background:var(--ink) !important;color:var(--on-ink) }
.emergency-hero h1,.emergency-hero .section-intro,.emergency-hero .eyebrow{ color:var(--on-ink) !important }
.emergency-hero .section-intro{ color:var(--on-ink-soft) !important }
.emergency-hero .glass{
  background:transparent !important;border:1px solid var(--on-ink-line);border-radius:var(--r);box-shadow:none;
}
.emergency-hero .cp-tag,.emergency-hero .eyebrow{ background:transparent;border:1px solid var(--on-ink-line) }

.em-hosp{
  display:block;background:var(--paper);color:var(--ink);
  border:1px solid var(--hairline);border-left:3px solid #9b2c20;border-radius:var(--r);
  padding:var(--s3);margin-top:var(--s2);
}
.em-hosp strong{ display:block;font-size:1.1rem;color:var(--ink) }
.em-hosp > span{ display:block;font-size:.94rem;color:var(--text-soft);margin-bottom:var(--s2) }
.em-hosp-actions{ display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center }
.em-carry-card{
  background:var(--paper);color:var(--ink);border:1px solid var(--hairline);
  border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s2);
}
.em-carry-card strong{ color:var(--ink) }
.em-carry-sum,.em-carry-note{ color:var(--text-soft);font-size:.94rem;margin:.3rem 0 var(--s2) }

/* ============================================================
   The hero, with the video back.

   The video is decoration: it carries no information, so it is
   the first thing to go when the connection is poor. The markup
   ships a poster image only; bd-hero.js attaches the video
   source when the connection can afford it and the person has
   not asked for reduced motion. Nothing on this page depends on
   it playing.
   ============================================================ */
.bd-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ink);color:var(--on-ink);
  padding-block:var(--s6) var(--s5);
  border:0;
}
.bd-hero__media{
  position:absolute;inset:0;z-index:-2;
  background:var(--ink) center/cover no-repeat;
}
.bd-hero__media video,.bd-hero__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.34;filter:saturate(.75);
}
/* an ink wash so the words always win, whatever frame is showing */
.bd-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(7,38,43,.94) 0%,rgba(7,38,43,.86) 48%,rgba(7,38,43,.58) 100%);
}
.bd-hero__grid{ display:block;max-width:var(--wide) }
.bd-hero__text{ max-width:none }
.bd-hero__text h1{ max-width:16ch }
.bd-hero h1{
  color:var(--on-ink);font-size:clamp(2.1rem,6.2vw,3.4rem);line-height:1.04;
  letter-spacing:-.02em;margin:0 0 var(--s2);text-wrap:balance;
}
.bd-hero__lede{
  color:var(--on-ink-soft);font-size:1.06rem;line-height:1.6;
  max-width:52ch;margin:0 0 var(--s4);
}
.bd-hero__actions{ display:flex;flex-wrap:wrap;gap:var(--s2) }
.bd-hero .bdb--fill{ background:var(--paper);color:var(--ink);border-color:var(--paper) }
.bd-hero .bdb--fill:hover{ background:var(--teal-on-ink);border-color:var(--teal-on-ink);color:var(--ink) }
.bd-hero .bdb--line{ color:var(--on-ink);border-color:var(--on-ink-line) }
.bd-hero .bdb--line:hover{ border-color:var(--paper);color:var(--paper);background:rgba(244,242,238,.08) }
.bd-hero__note{
  margin:var(--s4) 0 0;font-size:.88rem;color:var(--on-ink-soft);
  display:flex;align-items:center;gap:.5rem;
}
@media (min-width:900px){
  .bd-hero{ padding-block:calc(var(--s6) + var(--s3)) var(--s6) }
}

/* ============================================================
   Tell us what is wrong. The first step of the triage, on the
   home page, because asking someone to click through to a page
   before they can say what hurts is a step that earns nothing.
   The rest of the flow continues on the consultation page.
   ============================================================ */
.bd-check{
  background:var(--surface);border:var(--rule);border-radius:var(--r-lg);
  padding:var(--s4);
}
.bd-check h2{ margin-top:0 }
.bd-check__help{ color:var(--text-soft);margin:0 0 var(--s3);max-width:56ch }
.bd-check textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:1.05rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);
  padding:.9rem 1rem;resize:vertical;line-height:1.5;min-height:5.5rem;
}
.bd-check textarea:focus-visible{ outline:2px solid var(--focus);outline-offset:1px;border-color:var(--teal) }
.bd-check textarea::placeholder{ color:var(--text-mute) }
.bd-check__or{ margin:var(--s3) 0 var(--s1);font-size:.9rem;color:var(--text-mute) }
.bd-check__chips{ display:flex;flex-wrap:wrap;gap:var(--s1) }
.bd-check__go{ margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center }
.bd-check__safe{ font-size:.88rem;color:var(--text-mute);margin:var(--s3) 0 0;max-width:60ch }

/* article pages in the health library */
.bd-lede{ font-size:1.1rem;line-height:1.65;color:var(--text);max-width:62ch }
.bd-measure h2{ font-size:1.25rem;margin:var(--s4) 0 var(--s2) }
.bd-measure h3{ font-size:1.05rem;margin:var(--s3) 0 var(--s1) }
.bd-measure p{ max-width:62ch }
.bd-summary{
  cursor:pointer;font-weight:600;color:var(--ink);padding:.7rem 0;
  border-bottom:var(--rule);list-style:none;
}
.bd-summary::marker,.bd-summary::-webkit-details-marker{ display:none;content:'' }
.bd-summary::before{ content:'+ ';color:var(--teal-press);font-weight:700 }
details[open] > .bd-summary::before{ content:'\2212 ' }
/* the announcement topbar still carried its own near-white */
.topbar{ background:var(--ink);color:var(--on-ink) }
.topbar a{ color:var(--teal-on-ink) }

/* ============================================================
   Lists that carry meaning.

   .list was display:flex, so a bold lead-in and the sentence after
   it were pushed into two columns and the line broke in the middle
   of a thought. It is now a normal paragraph with the marker in the
   margin, so the text simply flows.

   And the marker itself matters: a teal tick beside "a fit or
   convulsion" reads as approval. A list of danger signs gets a
   warning mark, a list of things not to do gets a cross, and only
   a list of things TO do keeps the tick.
   ============================================================ */
.list{ display:block;padding:0;margin:var(--s2) 0 0;list-style:none }
.list li{
  display:block;position:relative;padding-left:1.9rem;margin-bottom:.7rem;
  color:var(--text-soft);line-height:1.6;max-width:62ch;
}
.list li strong{ color:var(--ink) }
.list li::before{
  position:absolute;left:0;top:.28em;
  content:"\2713";color:var(--on-ink);background:var(--teal);
  width:1.15rem;height:1.15rem;border-radius:var(--r-sm);
  display:grid;place-items:center;font-size:.7rem;font-weight:700;margin:0;
}
.list--no li::before{
  content:"\00d7";background:transparent;color:#9b2c20;
  border:1px solid #9b2c20;font-size:.8rem;
}
.list--danger li::before{
  content:"!";background:#9b2c20;color:var(--on-ink);border:0;font-size:.74rem;
}

/* ============================================================
   Access notes, and the forms that ask for something real.
   ============================================================ */
.bd-note{
  margin:0 auto var(--s3);max-width:var(--wide);
  width:calc(100% - 32px);
  background:var(--teal-wash);border:1px solid var(--teal);border-left:3px solid var(--teal);
  border-radius:var(--r);padding:var(--s2) var(--s3);color:var(--ink);font-size:.95rem;
}

.bd-field{ display:grid;gap:.3rem;margin-bottom:var(--s3) }
.bd-field label{ font-weight:600;color:var(--ink);font-size:.95rem }
.bd-field input,.bd-field select,.bd-field textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:.7rem .8rem;line-height:1.5;
}
.bd-field textarea{ resize:vertical;min-height:4.5rem }
.bd-field input:focus-visible,.bd-field select:focus-visible,.bd-field textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--teal);
}
.bd-field input:user-invalid,.bd-field select:user-invalid{ border-color:#9b2c20 }
.bd-field .helper{ color:var(--text-mute);font-size:.86rem }
.bd-opt{ font-weight:400;color:var(--text-mute);font-size:.86rem }

.bd-check-line{
  display:flex;gap:.7rem;align-items:flex-start;margin:var(--s2) 0 var(--s3);
  font-size:.94rem;color:var(--text-soft);max-width:60ch;font-weight:400;
}
.bd-check-line input{ margin-top:.28rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--teal) }

.bd-form-note{ margin:var(--s2) 0 0;font-size:.94rem;color:var(--text-soft);min-height:1.2em }
.bd-form-note--ok{ color:var(--teal-press);font-weight:600 }
.bd-form-note--warn{ color:#9b2c20 }

/* ============================================================
   Emergency page.

   Everything here is sized for someone who is frightened and
   possibly holding a phone in one hand: the targets are large, the
   type does not go below 16px, and nothing depends on hover,
   because there is no hover on a phone and no patience in an
   emergency.

   Red is used here and essentially nowhere else. That is the
   point of keeping it for one meaning: when it appears, it means
   this is the dangerous thing.
   ============================================================ */
.bd-eyebrow{
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; opacity:.8; margin:0 0 var(--s2)
}

.bdb--danger{
  background:#9b2c20; color:#fff; border:1px solid #9b2c20;
  font-size:1.0625rem; padding:.85em 1.4em; font-weight:600
}
.bdb--danger:hover,.bdb--danger:focus-visible{ background:#7d2319; border-color:#7d2319 }

/* The chooser. Three across on a desktop, one across on a phone,
   and each one big enough to hit without looking. */
.bd-doors--em{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)) }
.bd-door--em{
  text-align:left; font:inherit; cursor:pointer;
  border:1px solid rgba(155,44,32,.35); background:var(--paper);
  border-left:3px solid #9b2c20
}
.bd-door--em:hover,.bd-door--em:focus-visible{ border-color:#9b2c20 }
.bd-door__icon{
  display:inline-flex; width:2.25rem; height:2.25rem; border-radius:var(--r-sm);
  align-items:center; justify-content:center; margin-bottom:var(--s2);
  background:rgba(155,44,32,.1); color:#9b2c20
}
.bd-door__icon svg{ width:1.375rem; height:1.375rem }
.bd-door--em .bd-door__what{ font-size:1.0625rem; line-height:1.3 }

/* The steps. Numbered, because the order is the instruction. */
.bd-brief--danger{ border-color:rgba(155,44,32,.4); border-left:3px solid #9b2c20 }
.bd-steps{ list-style:none; counter-reset:s; margin:var(--s3) 0 0; padding:0 }
.bd-steps li{
  counter-increment:s; position:relative;
  padding:0 0 var(--s3) 2.75rem; line-height:1.55
}
.bd-steps li::before{
  content:counter(s); position:absolute; left:0; top:-.1em;
  width:1.9rem; height:1.9rem; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  background:#9b2c20; color:#fff; font-weight:600; font-size:.9375rem
}
.bd-steps li:last-child{ padding-bottom:0 }

.bd-note--carry{
  border:var(--rule); border-left:3px solid var(--teal);
  padding:var(--s3); border-radius:var(--r)
}
.bd-note--carry p{ margin:.35rem 0 0 }

@media (max-width:30rem){
  .bd-steps li{ padding-left:2.5rem }
  .bdb--danger{ display:block; width:100%; text-align:center }
}

/* ============================================================
   Numbers: the admin panel's stats and bar lists.

   Deliberately not a charting library. A bar list built from two
   spans reads correctly at 320px, works with no network, needs no
   JavaScript to lay out, and cannot mislead through a truncated
   axis — which a real chart on a small screen very easily does.
   ============================================================ */
.bd-stats{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))
}
.bd-stat{
  border:var(--rule); border-radius:var(--r); padding:var(--s3);
  display:flex; flex-direction:column; gap:.15rem
}
.bd-stat__n{ font-size:1.75rem; line-height:1.1; font-weight:600; font-variant-numeric:tabular-nums }
.bd-stat__l{ font-size:.875rem; opacity:.75 }
.bd-stat__note{ font-size:.8125rem; opacity:.6 }

.bd-bars{ list-style:none; margin:var(--s3) 0 0; padding:0 }
.bd-bars li{
  display:grid; grid-template-columns:minmax(6rem,10rem) 1fr auto;
  align-items:center; gap:var(--s2); padding:.3rem 0
}
.bd-bars__k{ font-size:.9375rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bd-bars__t{ background:rgba(7,38,43,.08); border-radius:var(--r-sm); height:.6rem; overflow:hidden }
.bd-bars__t>span{ display:block; height:100%; background:var(--teal) }
.bd-bars__v{ font-variant-numeric:tabular-nums; font-size:.875rem; opacity:.75 }

@media (max-width:30rem){
  .bd-bars li{ grid-template-columns:1fr auto; }
  .bd-bars__t{ grid-column:1 / -1 }
}

/* The footer's two nav headings are <h2> so that a short page does not
   jump h1 -> h3 in its outline. They are sized as the small labels they
   look like; the level is for the reader who navigates by headings, the
   size is for the one who navigates by eye. */
.bd-foot__h{
  font-size:.875rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; margin:0 0 var(--s2); opacity:.75
}

/* ============================================================
   The hero, made one whole section.

   It used to be a 520px band in a 900px window: video across the
   top, then an empty strip, then the next section on paper. Read
   as a banner that had run out rather than as the opening of a
   page, and the video looked like it only covered half of it.

   Now the section fills the window under the header and the video
   fills the section. 100svh, not 100vh: on a phone, vh is the
   height with the browser chrome hidden, so a 100vh hero is taller
   than the screen and the buttons sit below the fold until you
   scroll. svh is the height you can actually see.

   A cap at 46rem stops it becoming a wall on a tall desktop
   monitor, and the min-height falls away entirely in landscape on
   a phone, where a full-height hero means the h1 alone fills the
   screen.
   ============================================================ */
.bd-hero{
  min-height:min(100svh - 4.25rem, 46rem);
  display:grid; align-items:center;
  padding-block:clamp(var(--s5),9vh,var(--s7)) clamp(var(--s5),9vh,var(--s7));
}
/* NOT width:100%. .bd-wrap sets width:min(--wide, 100% - gutter),
   and a later width:100% on the same element wins and takes the side
   gutter away — which put the h1 hard against the left edge of a
   390px phone. Only the positioning context is needed here. */
.bd-hero__grid{ position:relative }

/* The wash is stronger at the left, where the words are, and lets
   the picture through on the right. Without a floor under it, a
   bright frame in the clip washes the type out for the two seconds
   it is on screen. */
.bd-hero::after{
  background:
    linear-gradient(100deg,rgba(7,38,43,.95) 0%,rgba(7,38,43,.88) 46%,rgba(7,38,43,.55) 100%),
    linear-gradient(180deg,rgba(7,38,43,.35) 0%,rgba(7,38,43,0) 30%);
}
.bd-hero__media video,.bd-hero__media img{ opacity:.42 }

.bd-hero__eyebrow{
  margin:0 0 var(--s2); font-size:.8125rem; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600; color:var(--teal-on-ink);
}
.bd-hero__text h1{ max-width:14ch }
.bd-hero__lede{ max-width:50ch }

/* A quiet mark that there is more below. It is the one thing the
   empty strip used to say by accident, said on purpose and in 24px
   instead of 90. */
/* Pinned to the bottom of the section, not to the text block, so it
   sits where the eye leaves the hero rather than trailing the note. */
.bd-hero{ position:relative }
.bd-hero__scroll{
  position:absolute; left:50%; translate:-50% 0;
  bottom:clamp(var(--s3),3vh,var(--s4));
  margin:0; width:1px; height:clamp(1.5rem,4vh,2.5rem);
  background:linear-gradient(180deg,transparent,var(--on-ink-line));
  overflow:hidden;
}
@media (prefers-reduced-motion:no-preference){
  .bd-hero__scroll>span{
    display:block; width:1px; height:40%; background:var(--teal-on-ink);
    animation:bd-scroll 2.4s cubic-bezier(.65,0,.35,1) infinite;
  }
  @keyframes bd-scroll{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(250%)} }
}

/* Landscape on a phone: a full-height hero would show the heading
   and nothing else. Let it be as tall as its content. */
@media (max-height:32rem) and (orientation:landscape){
  .bd-hero{ min-height:0; padding-block:var(--s5) }
  .bd-hero__scroll{ display:none }
}
@media (max-width:48rem){
  .bd-hero{ min-height:min(100svh - 3.75rem, 42rem) }
  .bd-hero__actions .bdb{ flex:1 1 14rem; text-align:center }
}

/* "Hospitals near me" moved out of the main menu and into the end
   cluster, beside Emergency. It is a thing you reach for in a moment,
   not a section of the site, and standing in the menu it carried the
   same weight as the specialisation. Quiet here, still one tap away,
   and it folds into the menu panel on a phone where the end cluster
   has no room. */
.bd-head__near{
  font-size:.875rem; color:var(--text-soft); text-decoration:none;
  white-space:nowrap; padding:.35rem 0;
}
.bd-head__near:hover,.bd-head__near:focus-visible{ color:var(--teal); text-decoration:underline }
@media (max-width:60rem){ .bd-head__near{ display:none } }

/* "Hospitals near me" exists twice in the markup: once in the
   header's end cluster, once appended to the menu. Exactly one of
   them is ever visible, and which one is decided here rather than in
   JavaScript — a width test in JS is right once and wrong the moment
   the phone is turned sideways.
     wide  : the quiet end-cluster link, menu copy hidden
     narrow: the menu copy, end-cluster link hidden */
.bd-nav a.bd-nav__util{ opacity:.85; display:none }
@media (max-width:60rem){
  .bd-nav a.bd-nav__util{
    display:block; border-top:var(--rule);
    padding-top:var(--s2); margin-top:var(--s1);
  }
}

/* ------------------------------------------------------------------
   The exercise figure that moves.
   bd-motion.js draws a rigged SVG and plays the exercise at its own
   stated tempo. This is the frame around it: the panel, the transport
   bar, and the phase word.

   The old panel used a pale mint gradient (#f6f9f8 -> #eef3f2) that
   belongs to no palette here. Paper on ink at 4% is the same idea in
   the colours the platform actually has.
------------------------------------------------------------------- */
.nt-ex-anim{
  max-width:17rem; margin-inline:auto;
  background:rgba(7,38,43,.04); border:var(--rule); border-radius:var(--r-lg);
  padding:var(--s3); display:grid; place-items:center; overflow:hidden;
}
.nt-rig{ width:100%; display:grid; place-items:center }
.bdm-svg{ width:100%; height:auto; max-height:15rem; display:block; aspect-ratio:200/240 }
/* the face figures carry a tighter viewBox, so their width follows it */
.bdm-svg--face{ aspect-ratio:auto; height:12rem; width:auto; max-width:100% }

/* Motion off: the figure holds the working pose. Mark it, so the
   stillness reads as a setting rather than as a failure to load. */
.nt-rig[data-motion="off"] .bdm-svg{ opacity:.9 }

.nt-rig-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s2); margin:var(--s2) auto var(--s3); max-width:22rem;
}
.nt-rig-btn{
  font:inherit; font-size:.8125rem; font-weight:600;
  padding:.4rem .85rem; border-radius:var(--r-sm); cursor:pointer;
  background:var(--teal); color:var(--paper); border:1px solid var(--teal);
  min-height:2.25rem;   /* a thumb, not a mouse pointer */
}
.nt-rig-btn--slow{ background:transparent; color:var(--teal); }
.nt-rig-btn--slow[aria-pressed="true"]{ background:var(--teal); color:var(--paper) }
.nt-rig-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* The phase word is the instruction, so it is the loudest thing in
   the bar. The rep count is reassurance, so it is not. */
.nt-rig-phase{
  font-weight:700; font-size:.9375rem; color:var(--teal);
  min-width:6ch; text-align:center;
}
.nt-rig-reps{ font-size:.8125rem; color:var(--text-soft); font-variant-numeric:tabular-nums }

@media (max-width:26rem){
  .nt-rig-bar{ gap:var(--s1) }
  .nt-rig-btn{ padding:.4rem .7rem }
}

/* ------------------------------------------------------------------
   The BE-FAST stroke signs on a phone.

   The figure column was 64px wide and `display:none` below 420px. So on
   the phones this platform is actually for, the pictures showing what a
   stroke looks like were not on the screen at all — the most important
   content on the site, missing on the device almost everybody reads it
   on. Below 420px the illustration now takes the full width of the row,
   above the words, where it can be seen.
------------------------------------------------------------------- */
@media (max-width:420px){
  .neuro-fast .card{ grid-template-columns:2.4rem minmax(0,1fr) }
  .neuro-fast-fig{
    display:flex; grid-column:1 / -1; grid-row:1; width:100%; height:auto;
    margin-bottom:var(--s2);
  }
  .neuro-fast-fig img{ width:auto; max-height:9.5rem; max-width:100% }
  .neuro-fast .card:has(.neuro-fast-fig) .neuro-let{ grid-row:2 / span 2 }
  .neuro-fast .card:has(.neuro-fast-fig) h3{ grid-row:2 }
  .neuro-fast .card:has(.neuro-fast-fig) p{ grid-row:3 }
}

/* ------------------------------------------------------------------
   The three doors on the home page.

   These carry commissioned character art — one PNG each. A photograph
   cannot be rigged the way the stroke figures are, so this does the one
   honest thing a still image allows: gives each person a slow idle so
   they read as somebody standing there rather than as a sticker.

   The amplitudes are deliberately small (a degree or two, two or three
   pixels) and the cycles are long and deliberately not multiples of
   each other, so the three never fall into step and start looking like
   a machine. Anything larger on a photographic figure reads as a
   glitch, not as life.

   Transform only — no layout property is touched, so this runs on the
   compositor and costs a cheap phone nothing.
------------------------------------------------------------------- */
@keyframes bd-idle-a{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  50%    { transform:translateY(-3px) rotate(-.5deg) }
}
@keyframes bd-idle-b{
  0%,100%{ transform:translateY(0) rotate(0deg) }
  45%    { transform:translateY(-2px) rotate(.6deg) }
}
@keyframes bd-idle-c{
  0%,100%{ transform:translateY(0) scale(1) }
  50%    { transform:translateY(-2px) scale(1.008) }
}
.bd-door__pic img{
  will-change:transform;
  transform-origin:50% 100%;   /* they are standing on the ground, so they pivot at the feet */
}
.bd-door:nth-of-type(1) .bd-door__pic img{ animation:bd-idle-a 7.3s ease-in-out infinite }
.bd-door:nth-of-type(2) .bd-door__pic img{ animation:bd-idle-b 8.9s ease-in-out infinite }
.bd-door:nth-of-type(3) .bd-door__pic img{ animation:bd-idle-c 6.1s ease-in-out infinite }

/* Opening the door: the person steps very slightly towards you. This
   is the only motion here that means anything — it answers "is this
   thing clickable" on a card that is mostly a picture. */
.bd-door:hover .bd-door__pic img,
.bd-door:focus-visible .bd-door__pic img{
  animation-play-state:paused;
  transform:translateY(-6px) scale(1.03);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce){
  .bd-door__pic img{ animation:none }
  .bd-door:hover .bd-door__pic img,
  .bd-door:focus-visible .bd-door__pic img{ transform:none; transition:none }
}

/* ------------------------------------------------------------------
   Buttons that sit on a LIGHT background.

   bd-core loads last and carries a blanket
       .btn, a.btn, button.btn { color: var(--on-ink) }
   which is right for the filled teal buttons that make up most of the
   site and wrong for the handful that deliberately invert — a white
   button on a dark panel. Those are declared in styles.css with the
   same specificity, so this file simply won out, and "+ Send a new
   case" was rendering paper-coloured text on a white button: legible
   only as a faint smudge, which is exactly how it looked on screen.

   Naming each one is deliberate. A blanket rule is what caused this.
------------------------------------------------------------------- */
.hw-cta .hw-cta-btn,
.hw-cta-btn.btn{ color:var(--ink); background:var(--paper) }
.hw-cta .hw-cta-btn:hover,
.hw-cta-btn.btn:hover{ color:var(--ink); background:#fff }
.btn-google, .cg-navbtn, .dir-btn{ color:var(--ink) }


/* ------------------------------------------------------------------
   Getting in.

   The header carried a single quiet "Log in" and no way to register at
   all, and it disappeared below 900px. There was no account link in the
   footer either, so on a phone the platform had no visible front door.

   Log in stays quiet — most visitors are here to check a symptom, not
   to sign in. Create an account is the outlined one, because a health
   worker arriving from a colleague's link needs somewhere obvious to go.
------------------------------------------------------------------- */
.bd-head__join{
  color:var(--teal); text-decoration:none; font-weight:600; font-size:.92rem;
  border:1px solid var(--teal); border-radius:var(--r-sm); padding:.35rem .7rem;
  white-space:nowrap;
}
.bd-head__join:hover{ background:var(--teal); color:var(--paper) }

/* In the mobile menu the two sit at the bottom, under a rule, where a
   phone user looks for them. Hidden on desktop, where the header pair
   is doing the job. */
.bd-nav a.bd-nav__acct{ display:none }
@media (max-width:900px){
  .bd-nav a.bd-nav__acct{
    display:block; border-top:var(--rule); font-weight:700; color:var(--teal);
  }
  .bd-nav a.bd-nav__acct--new{ border-top:0 }
}

/* ------------------------------------------------------------------
   The recovery exercise figure.

   This went to a rigged stick figure for a while so the limb could
   actually bend. It bent correctly and it was cold: a person relearning
   to use a hand after a stroke was being shown a diagram of a body
   instead of a body. The commissioned illustrations are Cameroonian
   people sitting on a real chair, and they are the right thing to look
   at, so they are back.

   The motion is a ring over the working part, keeping the exercise's
   own tempo. It cannot pretend the hand is closing — one drawing never
   could — but the rhythm is the part a person follows, and the phase
   word says in plain language what the rhythm means.
------------------------------------------------------------------- */
.nt-fig{ position:relative; display:inline-block; line-height:0; margin-inline:auto }
.nt-fig .nt-ex-img{ display:block; max-height:15rem; width:auto; margin:0 }
.nt-fig-ring{
  /* Sized by WIDTH only. Giving it a percentage height as well made it
     an ellipse, because the two percentages resolve against a container
     that is taller than it is wide. aspect-ratio keeps it a circle at
     any image size. */
  position:absolute; border-radius:50%; height:auto; aspect-ratio:1;
  border:3px solid var(--teal); background:rgba(19,125,141,.10);
  transform:translate(-50%,-50%); pointer-events:none;
  box-shadow:0 0 0 4px rgba(19,125,141,.10);
}
/* Motion off: hold the ring open and steady so it still marks the part
   that is working, rather than disappearing and marking nothing. */
.nt-fig-ring[data-still]{ opacity:.7; transform:translate(-50%,-50%) scale(1) }