/* MVIII Health. A purple band across the top of every page (nav, headline),
   a light gray ground, white cards. Black caps, orange for action and risk,
   green for benefit. One flat file: a component is written once, colours come
   from the variables below.

   How it got here, all on 2026-11-13: the owner chose the purple "X-ray"
   direction, asked for white ("it would look more legitimate"), then asked for
   purple back somewhere and more gray ("possibly both"). So purple holds the
   brand at the top, and the reading surface stays light. The all-dark version
   is in git history (commit 1cd666f), the all-white one at 20e0771. */
:root{
  --bg:#fff;--ground:#f0eff4;--ink:#0b0b0f;--soft:#33333b;--dim:#63636e;--faint:#a5a5af;
  --panel:#fff;--panel-2:#e6e4ec;
  --band:linear-gradient(145deg,#2f1954 0%,#1f1038 55%,#150b27 100%);--band-flat:#1f1038;
  --on-band:#fff;--on-band-soft:#dcd6e8;--on-band-dim:#a9a1bd;
  --rule:rgba(11,11,15,.13);--rule-strong:rgba(11,11,15,.6);
  --accent:#f25623;--accent-ink:#c2400f;--on-accent:#fff;
  --help:#0c7a3d;--help-fill:rgba(12,122,61,.2);--help-soft:#e6f6ec;
  --risk:#f25623;--risk-ink:#c2400f;--risk-fill:rgba(242,86,35,.28);--risk-soft:#fdeee8;
  --purple:#2a164a;--sel:#2a164a;--sel-fill:rgba(42,22,74,.3);
  --body-fill:rgba(42,22,74,.03);--body-line:rgba(42,22,74,.6);--organ-line:rgba(42,22,74,.26);
  --callout-line:rgba(194,64,15,.7);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font:inherit;color:inherit;border-radius:0}
details>summary{cursor:pointer}
[hidden]{display:none !important}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;text-transform:uppercase;line-height:1.02}
h2{font-size:clamp(26px,3.2vw,42px);margin-bottom:22px}
h2::before{content:"";display:block;width:64px;height:4px;background:var(--accent);margin-bottom:14px}
section{padding:64px 0;border-top:1px solid var(--rule)}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{text-decoration:underline}
.standfirst{font-size:18px;line-height:1.5;color:var(--soft);max-width:60ch;margin-top:22px}
.note,.fine,.also,.private{color:var(--dim);font-size:13px}
.label{display:block;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 10px;background:none;border:0;padding:0;text-align:left}
.step{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:var(--accent);color:var(--on-accent);margin-right:10px;letter-spacing:0}
.search{width:100%;background:var(--bg);border:1px solid var(--rule-strong);padding:14px;font-size:16px}
.search::placeholder,.bh-row input::placeholder{color:var(--faint)}
.gkey{font-size:13px;color:var(--dim);margin:0 0 18px}
.gkey b{color:var(--ink)}
.back{margin-top:48px}

/* Buttons, chips, marks */
.btn,.app-btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:14px 20px;white-space:nowrap;border:0}
.btn-quiet{background:none;color:var(--ink);border:1px solid var(--rule-strong)}
.app-btn{background:var(--ink);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-strong);padding:7px 11px;font-size:13px;text-decoration:none;color:var(--ink);background:var(--bg)}
.chip b{font-weight:700;font-size:11px;color:var(--help)}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
button.chip{cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill{display:inline-block;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border:1.5px solid currentColor;white-space:nowrap;align-self:start;text-align:center}
/* Strength is not a colour. Orange is risk and action, green is benefit, and a
   strong null or a strong risk must not borrow either. */
.pill-strong{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pill-moderate{color:var(--ink)}
.pill-limited,.pill-no,.pill-none{color:var(--dim)}
.pill-untested{color:var(--dim);border-style:dashed}
.freq{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;white-space:nowrap;background:var(--panel-2);color:var(--ink)}
/* Who a finding was studied in, when it was one group alone. */
.studied{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;white-space:nowrap;background:var(--purple);color:#fff}
.freq-very-common{background:var(--risk);color:var(--on-accent)}
.freq-common{background:var(--risk-soft);color:var(--risk-ink)}
.freq-rare,.freq-not-known{color:var(--dim)}
.f-outcome .freq-very-common{background:var(--help);color:#fff}
.f-outcome .freq-common{background:var(--help-soft);color:var(--help)}
/* Grey market: not approved for human use in the US, and sold anyway. */
.grey{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;background:var(--ink);color:var(--bg);white-space:nowrap;vertical-align:middle}
.grey-line{margin:14px 0 4px;font-size:15px;color:var(--soft)}
.grey-line .grey{margin-right:10px}
.caution{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;background:var(--risk);color:#fff;white-space:nowrap;vertical-align:middle;margin-left:6px}
.grey-line .caution{margin:0 10px 0 0}
.bw-caution{font-size:14px;color:var(--ink);margin-top:8px}
.bw-caution .caution{margin:0 6px 0 0}

/* Nav and footer */
.nav{position:sticky;top:0;z-index:5;background:rgba(31,16,56,.97);backdrop-filter:blur(10px);color:var(--on-band)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:58px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:14px}
.nav-links{display:flex;gap:22px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-links a{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--on-band-dim);white-space:nowrap;padding:20px 0}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--on-band)}
.nav-app{font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:var(--accent);color:var(--on-accent);padding:9px 13px;white-space:nowrap}
.footer{background:var(--band-flat);color:var(--on-band-dim);padding:34px 0 50px}
.footer .fine{color:var(--on-band-dim)}
.footer .fine a{color:var(--on-band-soft)}
.footer-links{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:18px}
.footer-links a{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--on-band-soft)}
.footer-links a:hover{color:var(--on-band)}
.fine{max-width:90ch;margin-top:8px}

/* The body. Both figures can be on the page; one shows. */
.body-stage{position:relative;--fig-w:100%}
.bodymap{display:block;width:var(--fig-w,100%);height:auto;overflow:visible;margin:0 auto}
.body[data-sex="male"] .bodymap-female,.body[data-sex="female"] .bodymap-male{display:none}
.bodymap [id$="LAYER_OUTLINE"] *{fill:var(--body-fill);stroke:var(--body-line);stroke-width:.32}
.bodymap [data-region],.bodymap [data-region] *{fill:none;stroke:var(--organ-line);stroke-width:.12;transition:stroke .2s,fill .2s}
/* Shapes that are lines or cover the whole figure never take a fill. */
.bodymap [data-part="skin"],.bodymap [data-part="skin"] *,.bodymap [data-part="nerve"] *,.bodymap [data-part="skeletal muscle"] *,
.bodymap [data-part="bone"],.bodymap [data-part="cartilage"],.bodymap [data-part="bone marrow"],.bodymap [data-part="trachea"] *,
.bodymap [data-part="bronchus"] *,.bodymap [data-part="lymph node"] *,.bodymap [data-part="blood vessel"],.bodymap [data-part="blood vessel"] *,
.bodymap [data-part="pleura"] *,.bodymap [data-part="adipose tissue"] *,.bodymap [data-part="smooth muscle"],
.bodymap [data-part="diaphragm"],.bodymap [data-part="spinal cord"]{fill:none !important}
.bodymap [data-part="skin"]{stroke:none !important}
/* Skin is the figure's own edge. */
.body[data-help~="skin-hair"] [id$="LAYER_OUTLINE"] *{stroke:var(--help);stroke-width:.5}
.body[data-risk~="skin-hair"] [id$="LAYER_OUTLINE"] *{stroke:var(--risk);stroke-width:.5}
.body[data-sel~="skin-hair"] [id$="LAYER_OUTLINE"] *{stroke:var(--sel);stroke-width:.5}
.body[data-help~="brain"] [data-region="brain"],.body[data-help~="brain"] [data-region="brain"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="brain"] [data-region="brain"],.body[data-risk~="brain"] [data-region="brain"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="brain"] [data-region="brain"],.body[data-sel~="brain"] [data-region="brain"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="eyes"] [data-region="eyes"],.body[data-help~="eyes"] [data-region="eyes"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="eyes"] [data-region="eyes"],.body[data-risk~="eyes"] [data-region="eyes"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="eyes"] [data-region="eyes"],.body[data-sel~="eyes"] [data-region="eyes"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="teeth-mouth"] [data-region="teeth-mouth"],.body[data-help~="teeth-mouth"] [data-region="teeth-mouth"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="teeth-mouth"] [data-region="teeth-mouth"],.body[data-risk~="teeth-mouth"] [data-region="teeth-mouth"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="teeth-mouth"] [data-region="teeth-mouth"],.body[data-sel~="teeth-mouth"] [data-region="teeth-mouth"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="thyroid"] [data-region="thyroid"],.body[data-help~="thyroid"] [data-region="thyroid"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="thyroid"] [data-region="thyroid"],.body[data-risk~="thyroid"] [data-region="thyroid"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="thyroid"] [data-region="thyroid"],.body[data-sel~="thyroid"] [data-region="thyroid"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="heart-vessels"] [data-region="heart-vessels"],.body[data-help~="heart-vessels"] [data-region="heart-vessels"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="heart-vessels"] [data-region="heart-vessels"],.body[data-risk~="heart-vessels"] [data-region="heart-vessels"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="heart-vessels"] [data-region="heart-vessels"],.body[data-sel~="heart-vessels"] [data-region="heart-vessels"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="lungs"] [data-region="lungs"],.body[data-help~="lungs"] [data-region="lungs"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="lungs"] [data-region="lungs"],.body[data-risk~="lungs"] [data-region="lungs"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="lungs"] [data-region="lungs"],.body[data-sel~="lungs"] [data-region="lungs"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="liver"] [data-region="liver"],.body[data-help~="liver"] [data-region="liver"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="liver"] [data-region="liver"],.body[data-risk~="liver"] [data-region="liver"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="liver"] [data-region="liver"],.body[data-sel~="liver"] [data-region="liver"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="kidneys"] [data-region="kidneys"],.body[data-help~="kidneys"] [data-region="kidneys"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="kidneys"] [data-region="kidneys"],.body[data-risk~="kidneys"] [data-region="kidneys"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="kidneys"] [data-region="kidneys"],.body[data-sel~="kidneys"] [data-region="kidneys"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="gut"] [data-region="gut"],.body[data-help~="gut"] [data-region="gut"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="gut"] [data-region="gut"],.body[data-risk~="gut"] [data-region="gut"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="gut"] [data-region="gut"],.body[data-sel~="gut"] [data-region="gut"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="urinary-prostate"] [data-region="urinary-prostate"],.body[data-help~="urinary-prostate"] [data-region="urinary-prostate"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="urinary-prostate"] [data-region="urinary-prostate"],.body[data-risk~="urinary-prostate"] [data-region="urinary-prostate"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="urinary-prostate"] [data-region="urinary-prostate"],.body[data-sel~="urinary-prostate"] [data-region="urinary-prostate"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="reproductive-hormones"] [data-region="reproductive-hormones"],.body[data-help~="reproductive-hormones"] [data-region="reproductive-hormones"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="reproductive-hormones"] [data-region="reproductive-hormones"],.body[data-risk~="reproductive-hormones"] [data-region="reproductive-hormones"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="reproductive-hormones"] [data-region="reproductive-hormones"],.body[data-sel~="reproductive-hormones"] [data-region="reproductive-hormones"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="skin-hair"] [data-region="skin-hair"],.body[data-help~="skin-hair"] [data-region="skin-hair"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="skin-hair"] [data-region="skin-hair"],.body[data-risk~="skin-hair"] [data-region="skin-hair"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="skin-hair"] [data-region="skin-hair"],.body[data-sel~="skin-hair"] [data-region="skin-hair"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="bones-joints"] [data-region="bones-joints"],.body[data-help~="bones-joints"] [data-region="bones-joints"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="bones-joints"] [data-region="bones-joints"],.body[data-risk~="bones-joints"] [data-region="bones-joints"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="bones-joints"] [data-region="bones-joints"],.body[data-sel~="bones-joints"] [data-region="bones-joints"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="muscle"] [data-region="muscle"],.body[data-help~="muscle"] [data-region="muscle"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="muscle"] [data-region="muscle"],.body[data-risk~="muscle"] [data-region="muscle"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="muscle"] [data-region="muscle"],.body[data-sel~="muscle"] [data-region="muscle"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="blood-metabolic"] [data-region="blood-metabolic"],.body[data-help~="blood-metabolic"] [data-region="blood-metabolic"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="blood-metabolic"] [data-region="blood-metabolic"],.body[data-risk~="blood-metabolic"] [data-region="blood-metabolic"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="blood-metabolic"] [data-region="blood-metabolic"],.body[data-sel~="blood-metabolic"] [data-region="blood-metabolic"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="immune"] [data-region="immune"],.body[data-help~="immune"] [data-region="immune"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="immune"] [data-region="immune"],.body[data-risk~="immune"] [data-region="immune"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="immune"] [data-region="immune"],.body[data-sel~="immune"] [data-region="immune"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
.body[data-help~="whole-body"] [data-region="whole-body"],.body[data-help~="whole-body"] [data-region="whole-body"] *{stroke:var(--help);fill:var(--help-fill);stroke-width:.3}
.body[data-risk~="whole-body"] [data-region="whole-body"],.body[data-risk~="whole-body"] [data-region="whole-body"] *{stroke:var(--risk);fill:var(--risk-fill);stroke-width:.3}
.body[data-sel~="whole-body"] [data-region="whole-body"],.body[data-sel~="whole-body"] [data-region="whole-body"] *{stroke:var(--sel);fill:var(--sel-fill);stroke-width:.3}
/* The vessel tree is long and thin. Lit, it stays a line. */
.bodymap [data-part="blood vessel"],.bodymap [data-part="blood vessel"] *{stroke-opacity:.6}
/* A callout is a label at the edge of the stage and a hairline that runs to
   the organ. --x is where the organ sits across the figure (0 left, 1 right). */
.callout{position:absolute;display:flex;text-decoration:none;color:inherit;gap:8px;align-items:flex-start;font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.callout span{display:block}
.callout b{display:block;color:var(--ink)}
.callout i{font-style:normal;font-weight:400;letter-spacing:.08em;color:var(--risk-ink)}
.callout::after{content:"";flex:1;min-width:10px;height:1px;margin-top:.65em;background:var(--callout-line)}
.callout-l{left:0;text-align:left;width:calc((100% - var(--fig-w)) / 2 + var(--fig-w) * var(--x))}
.callout-r{right:0;text-align:right;flex-direction:row-reverse;width:calc((100% - var(--fig-w)) / 2 + var(--fig-w) * (1 - var(--x)))}
.sexes{display:flex;justify-content:center;margin-top:14px}
.sexes button{background:none;border:1px solid var(--rule-strong);padding:6px 14px;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--dim)}
.sexes button+button{border-left:0}
.sexes button[aria-pressed="true"]{color:var(--bg);background:var(--ink);border-color:var(--ink)}

/* Home. The hero is one column: headline, then the figure with the checker
   laid over its legs, so the tool is on the first screen. */
.hero{padding:44px 0 0;border-top:0;background:var(--band) no-repeat top / 100% calc(100% - 170px);color:var(--on-band);
  --body-fill:rgba(190,170,255,.06);--body-line:rgba(226,216,255,.6);--organ-line:rgba(214,202,255,.34);--callout-line:rgba(255,138,99,.8)}
.hero .eyebrow{color:#ff8a63}
.hero .standfirst{color:var(--on-band-soft)}
.hero .callout b{color:var(--on-band)}
.hero .callout i{color:#ff8a63}
.hero .bh-start{color:var(--ink)}
/* align-items:start matters: a stretched item with a negative top margin grows
   by that margin, which made the checker card three times its height. */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:start;text-align:center;gap:0;--fw:calc(min(760px,100vw - 56px) * .44)}
.hero-text{display:contents}
.hero .eyebrow{order:1}
.hero h1{order:2;font-size:clamp(38px,6.3vw,92px);letter-spacing:-.04em;line-height:.9}
.hero h1 span{color:var(--accent)}
.hero .standfirst{order:3;margin:20px auto 6px;max-width:62ch}
/* The figure gives up the room its faded legs take, so the checker sits over
   them and what follows the checker sits right under it. */
.hero .body{order:4;width:100%;margin-bottom:calc(var(--fw) * -.86)}
/* Two ways in, side by side: check a stack, or type in bloodwork. */
.hero-tools{order:5;position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;width:min(1080px,100%);text-align:left}
.hero-tools:has(> :only-child){grid-template-columns:minmax(0,720px);justify-content:center}
.hero .bh-start{background:var(--bg);border:1px solid var(--rule-strong);border-top:4px solid var(--accent);padding:16px;box-shadow:0 18px 50px rgba(21,11,39,.28)}
.hero .bh-blood{border-top-color:var(--purple)}
.hero .bh-blood button{background:var(--purple)}
.hero .bh-start .chips{margin-top:12px}
.hero .private{order:7;margin:18px 0 44px;color:var(--dim);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.bh-start label{display:block;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.bh-row{display:flex}
.bh-row input{flex:1;min-width:0;width:0;background:var(--bg);border:1px solid var(--rule-strong);border-right:0;padding:14px;font-size:16px}
.bh-row button{background:var(--accent);color:var(--on-accent);border:0;padding:0 20px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;cursor:pointer;white-space:nowrap}
.body-hero .body-stage{max-width:760px;margin:0 auto;--fig-w:44%}
.body-hero .bodymap{-webkit-mask-image:linear-gradient(#000 46%,transparent 70%);mask-image:linear-gradient(#000 46%,transparent 70%)}
.stats{padding:0;background:var(--bg);border-bottom:1px solid var(--rule)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stats .wrap>div{padding:26px 20px 24px 0;border-right:1px solid var(--rule)}
.stats .wrap>div+div{padding-left:20px}
.stats .wrap>div:last-child{border-right:0}
.stats b{display:block;font-weight:700;font-size:clamp(34px,5vw,68px);letter-spacing:-.04em;line-height:1.05}
.stats span{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.goals .note{margin:-8px 0 18px;max-width:70ch}
.kind-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.kind{padding:18px 14px;text-decoration:none;border:1px solid var(--rule);border-top:4px solid var(--purple);background:var(--panel);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
a.kind:hover{border-color:var(--accent)}
.kind b{display:block;font-weight:700;font-size:30px;letter-spacing:-.03em}
.kind span{font-size:12px;color:var(--dim)}
.kind-soon b{color:var(--faint)}
.feed-list li{display:grid;grid-template-columns:120px 1fr auto;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.feed-list time,.feed-list span{font-size:12px;color:var(--dim)}
.feed-list a{text-decoration:none;font-weight:700}
.feed-list a:hover{color:var(--accent-ink)}
.app{background:var(--accent);color:var(--on-accent);border-top:0}
.app .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between}
.app .eyebrow,.app p{color:var(--on-accent)}
.app h2{max-width:22ch}.app h2::before{background:var(--on-accent)}
.app p{max-width:62ch}
.app .app-btn{background:var(--on-accent);color:var(--ink)}

/* Pages */
.page{padding:0 0 70px;overflow-x:clip}
/* The headline of every page sits on the same purple as the nav. The band is
   painted out to both edges of the window from inside the centred column. */
.page-head{position:relative;padding:44px 0 40px;margin-bottom:34px;color:var(--on-band)}
.page-head::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--band-flat)}
.page-head .eyebrow{color:#ff8a63}
.back{display:inline-block;margin:0 0 18px;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-band-soft);text-decoration:none;padding:6px 0}
.back:hover{color:var(--on-band)}
.page-head .standfirst,.page-head .grey-line{color:var(--on-band-soft)}
.page-head .checked{color:var(--on-band-dim)}
.page-head .btn-quiet{color:var(--on-band);border-color:rgba(255,255,255,.5)}
.page-head .grey{background:var(--on-band);color:var(--band-flat)}
.page>.wrap{max-width:880px}
.page-wide>.wrap{max-width:1200px}
.page-head h1{font-size:clamp(44px,7.4vw,104px);letter-spacing:-.04em}
.page-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px}
.checked{font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-left:6px}
.facts{display:grid;grid-template-columns:130px 1fr;gap:10px 18px;margin:0 0 30px;padding:18px 20px;background:var(--bg);border:1px solid var(--rule);font-size:14px}
.facts dt{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.glance{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-strong);padding:0;margin-bottom:10px}
.glance-col{padding:20px;background:var(--bg)}
.glance-col+.glance-col{border-left:1px solid var(--rule-strong)}
.glance-col h3,.group{font-weight:700;font-size:13px;letter-spacing:.14em;display:flex;justify-content:space-between;color:var(--help);margin-bottom:14px}
.glance-risk h3,.group.g-risk.g-reported,.group.g-risk.g-mixed{color:var(--risk-ink)}
.group.g-no-effect,.group.g-not-found,.group.g-gap,.group.g-untested,.group.g-did-not-match,.group.g-not-linked,.group.g-outcome.g-mixed,.group.g-accuracy.g-mixed,.group.g-association.g-mixed{color:var(--dim)}
.glance li{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--rule);font-size:14px}
.glance li a{text-decoration:none}
.glance li a:hover{text-decoration:underline}
.glance li .freq{grid-column:2;justify-self:start;margin-top:4px}
.findings,.prose,.refs{padding:44px 0 0;border-top:0}
.group{margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.finding{border:1px solid var(--rule);border-left:4px solid var(--help);background:var(--bg);padding:16px 18px;margin-bottom:10px}
.finding.f-risk{border-left-color:var(--risk)}
.finding.f-no-effect,.finding.f-not-found,.finding.f-mixed,.finding.f-gap,.finding.f-med,.finding.f-did-not-match,.finding.f-not-linked{border-left-color:var(--faint)}
.finding.f-untested{border-left-color:var(--faint);border-left-style:dashed}
.finding header,.fhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.finding h3,.fhead a{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-decoration:none}
.finding h3 a{text-decoration:none}
.finding h3 a:hover,.fhead a:hover{color:var(--ink)}
.who{font-weight:700;font-size:15px}
.finding-line{font-size:17px;line-height:1.4;font-weight:500}
.vs{font-size:14.5px;color:var(--ink);margin-top:8px}
.vs b{font-weight:700;margin-right:4px}
.topic-line{font-size:14.5px;color:var(--soft);margin-top:8px;padding-left:12px;border-left:1px solid var(--rule-strong)}
.basis{font-size:14px;color:var(--dim);margin-top:8px}
.finding details{margin-top:12px}
.finding summary{font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.finding summary:hover{color:var(--ink)}
.finding dl{margin-top:12px;font-size:14px;color:var(--soft)}
.finding dt{font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:10px}
.ref-cite{color:var(--accent-ink);text-decoration:none;font-size:.8em;font-weight:700}
.prose p{max-width:70ch;color:var(--soft);margin-bottom:14px}
.prose{margin-bottom:34px}
.prose h2{margin-bottom:12px}
.prose ul{max-width:70ch;color:var(--soft);margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:8px}
.prose li b{color:var(--ink)}
.guide-list{list-style:none;padding-left:0!important}
.guide-list li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
.legal-n{display:inline-block;min-width:38px;color:var(--accent-ink);font-weight:700}
.refs ol{counter-reset:r;font-size:13px;color:var(--dim)}
.refs li{counter-increment:r;padding:8px 0 8px 40px;border-top:1px solid var(--rule);position:relative;word-break:break-word}
.refs li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;font-weight:700;color:var(--faint)}
.refs a{color:var(--accent-ink)}
.tested{list-style:decimal;padding-left:22px;max-width:70ch;color:var(--soft)}
.tested li{margin-bottom:10px}
.range{border:1px solid var(--rule);background:var(--panel);padding:16px 18px;margin-bottom:10px}
.range h3{font-size:16px;text-transform:none;letter-spacing:0}
.range-who,.range-cav{font-size:13.5px;color:var(--dim);margin-top:4px}
.range-other{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--risk-ink);margin-top:6px}
.range table{width:100%;border-collapse:collapse;margin-top:12px;font-size:15px}
.range th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:6px 0;border-bottom:1px solid var(--rule)}
.range td{padding:8px 0;border-bottom:1px solid var(--rule)}
.card{border:1px solid var(--rule);padding:16px;margin-bottom:12px;background:var(--panel)}
.card>h3{font-size:16px;margin-bottom:12px;letter-spacing:.01em}
.card-alert{border:1px solid var(--risk);border-top:4px solid var(--risk);background:var(--risk-soft)}
.card-alert>h3{color:var(--risk-ink)}
.medtag{font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--risk-ink)}
.jump{margin:6px 0 10px}
.moves{list-style:none;padding:0;margin:0 0 6px;background:var(--bg);border:1px solid var(--rule)}
.moves li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px 16px;border-top:1px solid var(--rule);align-items:start}
.moves li:first-child{border-top:0}
.moves a{font-weight:700;text-decoration:none}
.moves a:hover{text-decoration:underline}
.moves .grey,.moves .studied{margin-left:8px}
.moves-about{color:var(--dim);font-size:13px;margin-left:8px}
.moves p{font-size:14.5px;color:var(--soft);margin-top:4px}
.stores{margin-top:18px}
.more{margin-top:14px}
.more>summary{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.handoff{margin-top:44px;border:0;background:var(--accent);color:var(--on-accent);padding:26px}
.handoff .eyebrow,.handoff p{color:var(--on-accent)}
.handoff h2::before{display:none}
.handoff p{margin-bottom:18px;max-width:60ch}
.handoff .app-btn{background:var(--on-accent);color:var(--ink)}

/* The library index */
.stack-tools{margin:30px 0 10px;display:grid;gap:14px}
.stack-fold{cursor:default}
.stack-fold-hint{display:none;margin-left:10px;color:var(--accent-ink)}
.stack-section{padding:34px 0 0;border:0}
.stack-group{font-size:22px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stack-card{display:block;text-decoration:none;border:1px solid var(--rule);border-top:4px solid var(--purple);background:var(--bg);padding:16px 16px 18px}
a.stack-card:hover{border-top-color:var(--accent);box-shadow:0 8px 22px rgba(21,11,39,.1)}
.stack-card h3{font-size:18px;margin-bottom:8px}
.stack-card p{font-size:14px;color:var(--soft)}
.stack-card .stack-grades{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:12px;font-weight:700}
.stack-card .grey{margin:0 0 8px}
.stack-stub{opacity:.6;border-top-color:var(--faint)}

/* Bio Hack */
.ck-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;margin-top:30px}
.ck-add{position:relative}
.ck-suggest{position:absolute;z-index:4;left:0;right:0;top:100%;background:var(--bg);border:1px solid var(--rule-strong);border-top:0;max-height:320px;overflow:auto;box-shadow:0 14px 30px rgba(42,22,74,.14)}
.ck-option{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:12px 14px;cursor:pointer;font-size:15px}
.ck-option:hover,.ck-option:focus{background:var(--ground)}
.ck-option-group{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ck-none{padding:12px 14px;color:var(--dim);font-size:14px}
.ck-picks,.ck-popular{margin-top:12px}
.ck-pick,.ck-pop{display:inline-flex;gap:6px;border:1px solid var(--rule-strong);background:var(--bg);padding:7px 11px;font-size:13px;cursor:pointer}
.ck-pick{border-color:var(--ink);background:var(--ink);color:var(--bg);font-weight:700}
.ck-pop:hover{border-color:var(--accent);color:var(--accent-ink)}
.ck-popular-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);align-self:center;font-weight:700}
.ck-meds{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:184px;overflow:hidden}
.ck-meds.is-open{max-height:none}
.ck-med{text-align:left;background:var(--bg);border:1px solid var(--rule-strong);padding:9px 11px;cursor:pointer;font-size:13.5px}
.ck-med b{display:block}.ck-med small{display:block;color:var(--dim);font-size:11.5px;margin-top:2px}
.ck-med[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ck-med[aria-pressed="true"] small{color:var(--on-accent)}
.ck-meds-toggle,.ck-buttons button,.ck-addbtn{background:none;border:1px solid var(--rule-strong);padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-top:10px}
.ck-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.ck-actions .gkey{margin:0}
.ck-buttons{display:flex;gap:8px}.ck-buttons button{margin-top:0}
.ck-emptystate{margin-top:34px}
.ck-empty-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ck-empty-grid div{border:1px solid var(--rule);border-top:4px solid var(--purple);background:var(--panel);padding:16px;font-size:14px;color:var(--soft)}
.ck-empty-grid b{display:block;color:var(--ink);text-transform:uppercase;font-size:15px;margin-bottom:8px}
#ck-out{margin-top:34px}
.score{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;border:0}
.score a{padding:18px 18px 16px;text-decoration:none;border:1px solid var(--rule);border-top:4px solid var(--purple);background:var(--panel)}
.score b{display:block;font-weight:700;font-size:56px;letter-spacing:-.04em;line-height:1}
.score span{font-size:12.5px;color:var(--dim)}
.score .hot{border-top-color:var(--risk)}
.score .hot b{color:var(--risk)}
.ck-glance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:34px}
.ck-section{padding:0;border:0}
.ck-section h2{font-size:clamp(22px,2.6vw,32px)}
.ck-sub{font-size:14px;letter-spacing:.12em;color:var(--dim);margin:26px 0 10px}
.ck-summary{color:var(--dim)}
.glabel{display:flex;gap:10px;align-items:center;margin:18px 0 8px;font-size:12px;color:var(--dim)}
.glist li{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:9px 0;border-top:1px solid var(--rule);font-size:14.5px}
.glist a{font-weight:700;text-decoration:none}
.glist a:hover{color:var(--accent-ink)}
.glist span{color:var(--soft)}
.ck-item{border:1px solid var(--rule);background:var(--bg);margin-bottom:8px}
.ck-item>summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:14px 16px}
.ck-item-name{font-weight:700;font-size:17px}
.ck-item-count{font-size:12px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.ck-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:0 16px 16px}
.ck-col h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.ck-label{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--help);margin:14px 0 8px}
.ck-label-reported{color:var(--risk-ink)}
.ck-label-mixed,.ck-label-no-effect,.ck-label-not-found,.ck-label-gap,.ck-label-untested{color:var(--dim)}
.ck-gap,.ck-empty,.ck-notshown{font-size:14px;color:var(--dim)}
.ck-notshown{list-style:disc;padding-left:18px}
.ck-full{padding:0 16px 16px;font-size:14px}
.ck-have{font-size:14px;margin-top:10px}
.ck-more-meds{margin-top:22px}
.ck-more-meds>summary{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}

/* Bloodwork */
.bw-tools{margin-top:6px}
.bw-age{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;max-width:620px}
.bw-age label{font-weight:700;font-size:14px}
.bw-age input{width:96px;flex:0 0 auto}
.bw-age .private{flex:1 1 200px}
.bw-add{max-width:620px}
.bw-rows{display:grid;gap:8px;margin-top:14px;max-width:620px}
.bw-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 110px 40px;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--rule);padding:8px 8px 8px 14px}
.bw-name{font-weight:700}
.bw-value{padding:10px 12px}
.bw-unit{font-size:14px;color:var(--dim)}
select.bw-unit{font:inherit;font-size:14px;padding:9px 6px;border:1px solid var(--rule-strong);background:var(--bg);color:var(--ink);border-radius:0}
.bw-x{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--dim)}
.bw-x:hover{color:var(--ink)}
.bw-who-pick{grid-column:1 / -1;justify-self:start;min-width:200px}
.bw-pick{font-size:14px;color:var(--risk-ink);font-weight:700;margin-bottom:8px}
.bw-urgent{font-size:15px;color:var(--ink);border:1px solid var(--risk);border-left:6px solid var(--risk);padding:14px 16px;background:var(--risk-soft);margin:0 0 16px}
.bw-urgent-head{font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.bw-now{background:var(--risk);color:#fff;border-color:var(--risk)}
.bw-now .bw-urgent-head{font-size:22px}
.bw-seen{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px;font-weight:700;cursor:pointer}
.bw-seen input{width:18px;height:18px;accent-color:var(--ink)}
.bw-ok{font-size:15px;color:var(--ink);border:1px solid var(--help);border-left:6px solid var(--help);padding:14px 16px;background:var(--help-soft);margin:0 0 16px}
.bw-ok-head,.bw-sum-head{font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.bw-ok-head{color:var(--help)}
.bw-sum{margin-top:18px;margin-bottom:0;font-size:15px}
.bw-sum:not(.bw-ok){border:1px solid var(--rule-strong);border-left:6px solid var(--ink);padding:14px 16px;background:var(--bg)}
.bw-level{font-size:15px;color:var(--ink);border:1px solid var(--lv);border-left:6px solid var(--lv);padding:14px 16px;background:var(--lv-soft);margin:0 0 16px}
.bw-level-head{font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px;color:var(--lv-ink)}
.bw-level-slight{--lv:#c08a00;--lv-soft:#fdf5dc;--lv-ink:#7a5600}
.bw-level-full{--lv:var(--risk);--lv-soft:var(--risk-soft);--lv-ink:var(--risk-ink)}
.bw-special{margin-top:10px}
.bw-special .bw-where li:first-child{border-top:0}
.urgent{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;margin-left:8px;background:var(--risk);color:#fff;white-space:nowrap}
.bw-result{padding:0;border:1px solid var(--rule);background:var(--bg);margin-top:18px;padding:22px}
.bw-result h2{font-size:clamp(22px,2.6vw,32px);margin-bottom:14px}
.bw-result h2 a{text-decoration:none}
.bw-where li{padding:10px 0;border-top:1px solid var(--rule);font-size:15.5px;color:var(--soft)}
.bw-where b{color:var(--ink)}
.bw-where q{font-weight:700;color:var(--ink)}
.bw-who{color:var(--dim);font-size:13px}
.bw-movers{margin-top:22px}
.bw-may{font-size:17px;letter-spacing:.02em;color:var(--help);margin-bottom:4px}
.bw-null .bw-may,.more .bw-may{color:var(--dim)}
.bw-push .bw-may{color:var(--risk-ink)}
.bw-apart{border-left:4px solid var(--purple);padding-left:14px}
.bw-apart .bw-may{color:var(--purple)}
.bw-push .ck-label{color:var(--dim)}
.bw-band{background:var(--purple);color:var(--on-band);border-top:0}
.bw-band .wrap{display:flex;gap:40px;align-items:center;justify-content:space-between}
.bw-band h2{max-width:24ch}
.bw-band p{color:var(--on-band-soft);max-width:62ch}
@media(max-width:640px){
  .bw-row{grid-template-columns:minmax(0,1fr) 104px;row-gap:6px}
  .bw-name{grid-column:1}.bw-x{grid-column:2;grid-row:1;justify-self:end}
  .bw-value{grid-column:1}.bw-unit{grid-column:2;grid-row:2;width:100%}
  .bw-row .bw-who-pick{grid-column:1 / -1;grid-row:3;width:100%}
  .bw-row .bw-phase{grid-row:4}
  .bw-band .wrap{flex-direction:column;align-items:flex-start}
}

/* Body map page */
.map{display:grid;grid-template-columns:340px 250px minmax(0,1fr);gap:32px;margin-top:36px;align-items:start}
.map-fig{position:sticky;top:78px;background:var(--bg);border:1px solid var(--rule);padding:18px}
.map-list{display:grid;border:1px solid var(--rule-strong)}
.map-key{display:flex;justify-content:space-between;padding:8px 12px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--rule);background:var(--panel-2)}
.region-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:var(--bg);border:0;border-bottom:1px solid var(--rule);padding:11px 12px;font-size:13.5px;cursor:pointer;text-decoration:none;color:inherit}
.region-btn:last-child{border-bottom:0}
.region-btn:hover{background:var(--ground)}
.region-btn[aria-current="page"]{background:var(--purple);color:#fff;font-weight:700}
.region-n{display:flex;gap:6px;flex:none}
.region-n b{min-width:34px;text-align:center;font-size:12px;font-weight:700;padding:2px 4px}
.map-key .region-n b{font-size:10px}
.region-n .n-help{color:var(--help)}
.region-n .n-risk{color:var(--risk-ink)}
.region-btn[aria-current="page"] .region-n b{color:#fff}
.map-panel h2{font-size:34px}
.region-cols{display:grid;gap:6px}
.region-col .group{margin-top:18px}
/* An organ takes a tap anywhere inside it, not only on its outline. The long
   thin and whole-figure shapes do not, or they would swallow every tap. */
.body-map .bodymap [data-region]{pointer-events:all;cursor:pointer}
.body-map .bodymap [data-region="context"],.body-map .bodymap [data-part="skin"],.body-map .bodymap [data-part="skeletal muscle"],
.body-map .bodymap [data-part="blood vessel"],.body-map .bodymap [data-part="adipose tissue"],.body-map .bodymap [data-part="lymph node"],
.body-map .bodymap [data-part="pleura"],.body-map .bodymap [data-part="diaphragm"],.body-map .bodymap [data-part="bone"],
.body-map .bodymap [data-part="cartilage"],.body-map .bodymap [data-part="bone marrow"],.body-map .bodymap [data-part="spinal cord"]{pointer-events:none;cursor:default}
.body-map .bodymap [data-region]:hover,.body-map .bodymap [data-region]:hover *{stroke:var(--accent);stroke-width:.3}

@media(max-width:900px){
  .map-fig{position:static}
  .kind-row{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ck-builder,.ck-glance,.ck-cols{grid-template-columns:minmax(0,1fr)}
  .ck-empty-grid{grid-template-columns:1fr 1fr}
  .map{grid-template-columns:minmax(0,1fr)}
  .map-fig{position:static;max-width:260px;margin:0 auto}
  .map-list{grid-template-columns:1fr 1fr}
  .map-key{grid-column:1 / -1}
  .app .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .wrap{padding:0 16px}
  section{padding:44px 0}
  .nav .wrap{gap:14px}.nav-app{display:none}
  .hero .wrap{--fw:calc((100vw - 32px) * .5)}
  .hero{background-size:100% calc(100% - 330px)}
  .hero-tools{grid-template-columns:minmax(0,1fr)}
  .body-hero .body-stage{--fig-w:50%}
  .hero .standfirst{font-size:16px}
  .callout{font-size:8.5px;letter-spacing:.06em}
  .bh-row button{padding:0 12px;font-size:12px}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stats .wrap>div{border-bottom:1px solid var(--rule)}
  .stats .wrap>div:nth-child(2){border-right:0}
  .stats .wrap>div:nth-child(3){padding-left:0}
  .kind-row{grid-template-columns:1fr 1fr}
  .glance{grid-template-columns:1fr}
  .glance-col+.glance-col{border-left:0;border-top:1px solid var(--rule-strong)}
  .score{grid-template-columns:1fr 1fr}
  .glist li{grid-template-columns:1fr;gap:2px}
  .feed-list li{grid-template-columns:1fr auto}.feed-list time{display:none}
  .facts{grid-template-columns:1fr;gap:2px}.facts dd{margin-bottom:10px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .stack-wants{max-height:84px;overflow:hidden}
  .stack-tools.is-open .stack-wants{max-height:none}
  .stack-fold{cursor:pointer}.stack-fold-hint{display:inline}
  .ck-meds{grid-template-columns:1fr}
  .map-list{grid-template-columns:1fr}
}
.callout:hover b{color:#ff8a63}
.goals{border-top:0}