/* ══════════════════════════════════════════════════════════════════════════
   css/bmi-calculator.css — THE BMI CALCULATOR  (prefix fw-bmi)
   /bmi-calculator, built 29 Sep 2026.

   ITS OWN PAGE. Same tokens, gutters, masthead band and no-cards rule as
   every FW page, but about 80% of the devices are this page's alone (the
   owner's standing rule): the masthead carries the tool (sliders left, the
   live answer in the side); a full-width ruler; four expanding panels; a
   table with inline range bars; big numerals beside a photograph; two
   column questions; a photograph close.

   ZONE COLOURS, this page's alone: underweight --bl, healthy --mt-d,
   overweight --go, obese --co. Pink stays the action colour and marks
   "you"; blue marks your partner.

   NO CARDS: structure comes from space, type and FADE DIVIDERS (a hairline
   that fades out at both ends). Round things are objects only.

   Each band after the masthead is compact, at least half a screen and no
   more than it needs. On a phone the page is laid out as an app: settings
   as a swipe row, the panels as a swipe deck, and a result bar within
   thumb reach. No inline styles: every moving position is an SVG attribute.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-page{
	--pad:28px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 10%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 6%, transparent);
	--fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
	--fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
	--sec:clamp(30px, 5vh, 56px);
	/* ONE COLUMN SPLIT FOR THE WHOLE PAGE: the masthead's own (.fw-mast__grid
	   gap), so every two-column section divides on the same vertical line. */
	--split:minmax(0, 1.15fr) minmax(0, .85fr);
	--split-gap:clamp(24px, 4vw, 72px);
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-pop:cubic-bezier(.34,1.56,.64,1);
	background:var(--wh);
}
.fw-bmi{display:block;position:relative}
.fw-bmi em{font-family:var(--ff);font-style:normal}
.fw-bmi-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.fw-bmi-sec{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:50vh;padding:var(--sec) 0}
.fw-bmi-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade)}

/* Zone colours: one family per zone. */
/* Two classes deep on purpose, so a zone always wins over a block's own
   neutral default (.fw-bmi-out, .fw-bmi-dock). */
.fw-bmi .is-under,.fw-bmi .fw-bmi-panel--bl{--zc:var(--bl);--zc-ink:var(--bl-d);--zc-l:var(--bl-l)}
.fw-bmi .is-healthy,.fw-bmi .fw-bmi-panel--mt{--zc:var(--mt-d);--zc-ink:var(--mt-ink);--zc-l:var(--mt-l)}
.fw-bmi .is-over,.fw-bmi .fw-bmi-panel--go{--zc:var(--go);--zc-ink:var(--go-ink);--zc-l:var(--go-l)}
.fw-bmi .is-obese,.fw-bmi .fw-bmi-panel--co{--zc:var(--co);--zc-ink:var(--co-ink);--zc-l:var(--co-l)}

.fw-bmi-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(16px, 2.4vh, 26px)}
.fw-bmi-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}
.fw-bmi-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pk-dd)}
.fw-bmi-eyebrow .fw-ico{width:16px;height:16px;flex:none}
.fw-bmi-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.fw-bmi-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.65;color:var(--g6);text-wrap:pretty}
.fw-bmi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.fw-bmi-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border-radius:999px;
	background:var(--pk-dd);color:var(--wh);font-size:15px;font-weight:600;box-shadow:var(--pk-glow);
	transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease)
}
.fw-bmi-btn:hover{color:var(--wh);background:var(--pk-d);transform:translateY(-2px);box-shadow:var(--pk-glow-lg)}
.fw-bmi-btn--sm{min-height:40px;padding:0 16px;font-size:14px}
.fw-bmi-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--pk-dd);transition:color .2s var(--ease)}
.fw-bmi-link:hover{color:var(--bl-d)}
.fw-bmi-link .bi,.fw-bmi-btn .bi{transition:transform .25s var(--ease)}
.fw-bmi-link:hover .bi-arrow-right,.fw-bmi-btn:hover .bi-arrow-right{transform:translateX(4px)}
.fw-bmi-btn:hover .bi-arrow-down{transform:translateY(3px)}

/* reveal: only once the script has run */
.fw-bmi.fw-bmi-anim [data-bmi-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.fw-bmi.fw-bmi-anim [data-bmi-reveal].is-in{opacity:1;transform:none}
.fw-bmi-nums > :nth-child(2){transition-delay:.1s}
.fw-bmi-nums > :nth-child(3){transition-delay:.2s}

/* ══════════════════════════════════════════════════════════════
   01 · THE MASTHEAD IS THE TOOL
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-mast{background:linear-gradient(160deg, var(--mt-wash), var(--wh) 45%, var(--bl-wash))}
.fw-bmi .fw-bmi-grid{grid-template-columns:var(--split);gap:var(--split-gap);align-items:stretch}
.fw-bmi .fw-bmi-h1{font-size:clamp(32px, 5.4vh, 54px)}
.fw-bmi .fw-bmi-mast .fw-mast__h1 span{display:inline;margin-left:.25em;color:var(--mt-ink);font-weight:500}
.fw-bmi-lede{margin:10px 0 18px;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6)}

/* ── settings ── */
.fw-bmi-set{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding-bottom:16px;margin-bottom:6px;position:relative}
.fw-bmi-set::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fade)}
.fw-bmi-seg{display:inline-grid;grid-auto-flow:column;gap:3px;padding:3px;border-radius:999px;background:var(--g1)}
.fw-bmi-seg__btn{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--g6);transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease)}
.fw-bmi-seg__btn:hover{color:var(--bl-d)}
.fw-bmi-seg__btn.is-on{background:var(--wh);color:var(--ink);box-shadow:0 2px 8px var(--ink-a06)}
.fw-bmi-sw{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--g7);transition:color .2s var(--ease)}
.fw-bmi-sw .fw-ico{width:16px;height:16px;color:var(--g5)}
.fw-bmi-sw__t{position:relative;width:38px;height:22px;border-radius:999px;background:var(--g3);transition:background .25s var(--ease)}
.fw-bmi-sw__t::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--wh);box-shadow:0 1px 3px var(--ink-a12);transition:transform .3s var(--ease-pop)}
.fw-bmi-sw:hover{color:var(--bl-d)}
.fw-bmi-sw[aria-checked="true"]{color:var(--mt-ink)}
.fw-bmi-sw[aria-checked="true"] .fw-bmi-sw__t{background:var(--mt-d)}
.fw-bmi-sw[aria-checked="true"] .fw-bmi-sw__t::after{transform:translateX(16px)}
.fw-bmi-sw[aria-checked="true"] .fw-ico{color:var(--mt-ink)}
.fw-bmi-sw:focus-visible{outline:none}
.fw-bmi-sw:focus-visible .fw-bmi-sw__t{box-shadow:0 0 0 3px var(--bl-ring)}
.fw-bmi-reset{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600;color:var(--g7);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s var(--ease), color .2s var(--ease)}
.fw-bmi-reset:hover{background:var(--bl);color:var(--wh);box-shadow:none}
.fw-bmi-reset .bi{transition:transform .5s var(--ease)}
.fw-bmi-reset:hover .bi{transform:rotate(-270deg)}
.fw-bmi-reset[hidden]{display:none}

/* ── the sliders, one block per person ── */
.fw-bmi-people{display:grid;gap:4px}
/* Couple mode on a desk: the two people side by side, so switching it on or
   off never changes the height of the masthead (it used to grow by 210px and
   push the ruler off the screen). */
.fw-bmi.is-couple .fw-bmi-people{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:clamp(20px, 2.4vw, 40px)}
.fw-bmi.is-couple .fw-bmi-person--b{padding-top:10px;padding-left:clamp(20px, 2.4vw, 40px)}
.fw-bmi.is-couple .fw-bmi-person--b::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;background:var(--fade-v)}
.fw-bmi-person{min-width:0;margin:0;padding:10px 0 4px;border:0;--pc:var(--pk);--pc-ink:var(--pk-dd)}
.fw-bmi-person--b{--pc:var(--bl);--pc-ink:var(--bl-d);position:relative;padding-top:16px;animation:fw-bmi-in .4s var(--ease)}
.fw-bmi-person--b::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-bmi-person[hidden]{display:none}
@keyframes fw-bmi-in{from{opacity:0;transform:translateY(8px)}}
.fw-bmi-person__who{display:flex;align-items:center;gap:8px;float:none;width:auto;margin:0 0 4px;padding:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pc-ink)}
.fw-bmi-dot{width:10px;height:10px;border-radius:50%;background:var(--pc)}
.fw-bmi-slide{display:grid;gap:4px;padding:6px 0}
.fw-bmi-slide__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fw-bmi-slide__top label{margin:0;font-size:13px;font-weight:600;color:var(--g6)}
.fw-bmi-slide__val{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--g4);font-variant-numeric:tabular-nums;transition:color .2s var(--ease)}
.fw-bmi-slide.is-set .fw-bmi-slide__val{color:var(--ink)}
.fw-bmi-slide__row{display:grid;grid-template-columns:36px minmax(0, 1fr) 36px;align-items:center;gap:12px}
.fw-bmi-step{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease)}
.fw-bmi-step:hover{background:var(--pc);color:var(--wh);box-shadow:none;transform:scale(1.06)}

.fw-bmi-range{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:0;background:transparent;cursor:pointer}
.fw-bmi-range:focus{outline:none}
.fw-bmi-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg, var(--bl), var(--mt-d) 30%, var(--go) 60%, var(--co))}
.fw-bmi-range::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg, var(--bl), var(--mt-d) 30%, var(--go) 60%, var(--co))}
[data-bmi-slide="h"] .fw-bmi-range::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--g2), var(--pc))}
[data-bmi-slide="h"] .fw-bmi-range::-moz-range-track{background:linear-gradient(90deg, var(--g2), var(--pc))}
.fw-bmi-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--wh);border:5px solid var(--pc);box-shadow:0 6px 16px -4px var(--ink-a28);transition:transform .2s var(--ease)}
.fw-bmi-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--wh);border:5px solid var(--pc);box-shadow:0 6px 16px -4px var(--ink-a28)}
.fw-bmi-range:hover::-webkit-slider-thumb,.fw-bmi-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.fw-bmi-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--bl-ring)}
.fw-bmi-slide:not(.is-set) .fw-bmi-range{opacity:.55}

.fw-bmi-private{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12.5px;color:var(--g6)}
.fw-bmi-private .fw-ico{width:16px;height:16px;flex:none;color:var(--mt-ink)}

/* ── the live answer ── */
.fw-bmi .fw-bmi-side{display:flex;flex-direction:column;justify-content:center}
.fw-bmi-idle{display:none}
.fw-js .fw-bmi:not(.is-live) .fw-bmi-idle{display:grid;justify-items:start;gap:14px}
.fw-js .fw-bmi:not(.is-live) .fw-bmi-res{display:none}
.fw-bmi-idle__ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--wh);background:conic-gradient(from 200deg, var(--bl), var(--mt-d), var(--go), var(--co), var(--bl));box-shadow:0 18px 40px -18px var(--bl-edge);animation:fw-bmi-spin 9s linear infinite}
.fw-bmi-idle__ring .bi{animation:fw-bmi-spin 9s linear infinite reverse}
@keyframes fw-bmi-spin{to{transform:rotate(360deg)}}
.fw-bmi-idle__big{margin:0;font-size:clamp(24px, 3.6vh, 34px);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.fw-bmi-idle__txt{margin:0;font-size:15px;line-height:1.6;color:var(--g6)}

.fw-bmi-res{display:grid;gap:18px}
.fw-bmi-outs{display:grid;gap:18px}
.fw-bmi.is-couple .fw-bmi-outs{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:clamp(20px, 2.4vw, 40px);align-items:start}
.fw-bmi.is-couple .fw-bmi-out--b{padding-top:0;padding-left:clamp(20px, 2.4vw, 40px)}
.fw-bmi.is-couple .fw-bmi-out--b::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;background:var(--fade-v)}
.fw-bmi.is-couple .fw-bmi-out__num b,.fw-bmi.is-couple .fw-bmi-out--b .fw-bmi-out__num b{font-size:clamp(46px, 7.4vh, 76px)}
.fw-bmi.is-couple .fw-bmi-out__num span{font-size:14px;padding:5px 12px}
.fw-bmi.is-couple .fw-bmi-out__range,.fw-bmi.is-couple .fw-bmi-out__gap{font-size:14px}
.fw-bmi-out{display:grid;gap:8px;--zc:var(--g4);--zc-ink:var(--g6)}
.fw-bmi-out[hidden]{display:none}
.fw-bmi-out--b{position:relative;padding-top:16px}
.fw-bmi-out--b::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-bmi-out__who{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g6)}
.fw-bmi-chip{padding:3px 10px;border-radius:999px;background:var(--go);color:var(--wh);font-size:10.5px;letter-spacing:.04em;text-transform:none}
.fw-bmi-chip[hidden]{display:none}
.fw-bmi-out__num{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin:0}
.fw-bmi-out__num b{font-size:clamp(64px, 11vh, 112px);font-weight:700;line-height:.95;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-bmi-out--b .fw-bmi-out__num b{font-size:clamp(40px, 6.4vh, 60px)}
.fw-bmi-out__num span{padding:6px 16px;border-radius:999px;background:var(--zc);color:var(--wh);font-size:16px;font-weight:700;letter-spacing:.02em}
.fw-bmi-out__range{margin:0;font-size:15px;color:var(--g7)}
.fw-bmi-out__range b{color:var(--ink)}
.fw-bmi-out__gap{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:600;color:var(--zc-ink)}
.fw-bmi-out.is-new .fw-bmi-out__num b{animation:fw-bmi-pop .45s var(--ease)}
@keyframes fw-bmi-pop{40%{transform:scale(1.04)}}
.fw-bmi-res__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding-top:4px}

/* ══════════════════════════════════════════════════════════════
   02 · THE RULER
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-ruler{position:relative;padding:22px 0 26px;background:linear-gradient(180deg, var(--bl-wash), var(--wh))}
.fw-bmi-ruler__svg{display:block;width:100%;height:100px;overflow:visible}
.fw-bmi-ruler__zone rect{fill:var(--tn);transition:x .6s var(--ease), width .6s var(--ease), opacity .3s var(--ease)}
.fw-bmi-ruler__zone text{font-family:var(--ff);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;fill:var(--tn-ink);text-anchor:middle;transition:x .6s var(--ease)}
.fw-bmi-ruler__zone--bl{--tn:var(--bl);--tn-ink:var(--bl-d)}
.fw-bmi-ruler__zone--mt{--tn:var(--mt-d);--tn-ink:var(--mt-ink)}
.fw-bmi-ruler__zone--go{--tn:var(--go);--tn-ink:var(--go-ink)}
.fw-bmi-ruler__zone--co{--tn:var(--co);--tn-ink:var(--co-ink)}
.fw-bmi-ruler__zone:first-child rect{rx:9}
.fw-bmi-ruler__tick line{stroke:var(--g4);stroke-width:1.5}
.fw-bmi-ruler__tick text{font-family:var(--ff);font-size:12px;font-weight:600;fill:var(--g6);text-anchor:middle}
/* The two end numbers sit inside the gutters rather than half outside. */
.fw-bmi-ruler__tick[data-bmi-tick="15"] text{text-anchor:start}
.fw-bmi-ruler__tick[data-bmi-tick="40"] text{text-anchor:end}
.fw-bmi-mark{transition:opacity .3s var(--ease)}
.fw-bmi-mark[hidden]{display:none}
.fw-bmi-mark line{stroke:var(--ink);stroke-width:2;transition:x1 .7s var(--ease), x2 .7s var(--ease)}
.fw-bmi-mark circle{fill:var(--wh);stroke:var(--mc);stroke-width:5;transition:cx .7s var(--ease)}
.fw-bmi-mark text{font-family:var(--ff);font-size:13px;font-weight:800;fill:var(--mc-ink);text-anchor:middle;paint-order:stroke;stroke:var(--wh);stroke-width:5px;transition:x .7s var(--ease)}
.fw-bmi-mark--a{--mc:var(--pk);--mc-ink:var(--pk-dd)}
.fw-bmi-mark--b{--mc:var(--bl);--mc-ink:var(--bl-d)}
.fw-js .fw-bmi:not(.is-live) .fw-bmi-mark{opacity:0}

/* ══════════════════════════════════════════════════════════════
   03 · WHAT IT MEANS — four expanding panels
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-panels{display:flex;margin:0;padding:0;list-style:none;min-height:clamp(230px, 28vh, 300px)}
.fw-bmi-panel{
	position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;padding:20px clamp(14px, 2vw, 30px) 10px;cursor:pointer;outline:none;
	transition:flex-grow .6s var(--ease)
}
.fw-bmi-panel + .fw-bmi-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fade-v)}
.fw-bmi-panel::after{content:"";position:absolute;left:clamp(14px, 2vw, 30px);right:clamp(14px, 2vw, 30px);top:0;height:4px;border-radius:4px;background:var(--zc);transform:scaleX(.18);transform-origin:left;transition:transform .6s var(--ease)}
.fw-bmi-panel.is-open{flex-grow:2.6}
.fw-bmi-panel.is-open::after{transform:scaleX(1)}
.fw-bmi-panel__hd{display:grid;gap:6px;justify-items:start}
.fw-bmi-panel__ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--zc);color:var(--wh);transition:transform .45s var(--ease-pop)}
.fw-bmi-panel__ico .fw-ico{width:24px;height:24px}
.fw-bmi-panel:hover .fw-bmi-panel__ico{transform:rotate(-10deg) scale(1.08)}
.fw-bmi-panel__name{margin:6px 0 0;font-family:var(--ff);font-size:clamp(19px, 2.6vh, 24px);font-weight:700;color:var(--ink)}
.fw-bmi-panel__range{margin:0;font-size:14px;font-weight:600;color:var(--zc-ink);white-space:nowrap}
.fw-bmi-panel__you{display:inline-flex;gap:6px;margin:4px 0 0;flex-wrap:wrap}
.fw-bmi-panel__you[hidden]{display:none}
.fw-bmi-panel__you span{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wh)}
.fw-bmi-panel__you .is-a{background:var(--pk)}
.fw-bmi-panel__you .is-b{background:var(--bl)}
/* A closed panel's words take no height: in a narrow column they would
   wrap tall and stretch the whole row. */
.fw-bmi-panel__body{display:grid;gap:10px;margin:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease), transform .4s var(--ease)}
.fw-bmi-panel.is-open .fw-bmi-panel__body{max-height:none;overflow:visible;opacity:1;transform:none;transition-delay:.2s}
.fw-bmi-panel__body div{display:grid;gap:3px}
.fw-bmi-panel__body dt{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-bmi-panel__body dd{margin:0;font-size:15px;line-height:1.55;color:var(--g7)}
.fw-bmi-panel__body .is-do dd{font-weight:600;color:var(--zc-ink)}
.fw-bmi-panel:focus-visible .fw-bmi-panel__name{color:var(--bl-d)}

/* ══════════════════════════════════════════════════════════════
   04 · THE TABLE WITH BARS
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-tgrid{display:grid;grid-template-columns:var(--split);gap:var(--split-gap);align-items:center}
.fw-bmi-tgrid .fw-bmi-head{margin:0;align-items:flex-start}
.fw-bmi-seg--sm{margin-top:6px}
.fw-bmi-tab{width:100%;border-collapse:collapse}
.fw-bmi-tab thead th{padding:0 12px 10px 0;text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-bmi-tab tbody tr{position:relative;transition:background .25s var(--ease)}
.fw-bmi-tab tbody th,.fw-bmi-tab tbody td{padding:7px 12px 7px 0;border-top:1px solid var(--line-soft);vertical-align:middle}
.fw-bmi-tab tbody th{display:flex;align-items:baseline;gap:8px;font-weight:400}
.fw-bmi-tab tbody th b{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-bmi-tab tbody th small{font-size:12px;color:var(--g5)}
.fw-bmi-tab__kg{font-size:15px;font-weight:600;color:var(--g7);font-variant-numeric:tabular-nums;white-space:nowrap}
.fw-bmi-tab__kg .is-asia{display:none}
.fw-bmi-tab.is-asia .fw-bmi-tab__kg .is-who{display:none}
.fw-bmi-tab.is-asia .fw-bmi-tab__kg .is-asia{display:inline}
.fw-bmi-tab__bar{width:46%}
.fw-bmi-tab__bar svg{display:block;width:100%;height:20px}
.fw-bmi-tab__bg{fill:var(--g1)}
.fw-bmi-tab__who,.fw-bmi-tab__asia{fill:var(--mt-d);transition:opacity .3s var(--ease)}
.fw-bmi-tab__asia{opacity:0}
.fw-bmi-tab.is-asia .fw-bmi-tab__who{opacity:0}
.fw-bmi-tab.is-asia .fw-bmi-tab__asia{opacity:1}
.fw-bmi-tab tbody tr:hover th b,.fw-bmi-tab tbody tr:hover .fw-bmi-tab__kg{color:var(--bl-d)}
.fw-bmi-tab tbody tr:hover .fw-bmi-tab__who,.fw-bmi-tab tbody tr:hover .fw-bmi-tab__asia{fill:var(--bl)}
.fw-bmi-tab tbody tr.is-you th b,.fw-bmi-tab tbody tr.is-you .fw-bmi-tab__kg{color:var(--pk-dd)}
.fw-bmi-tab tbody tr.is-you .fw-bmi-tab__who,.fw-bmi-tab tbody tr.is-you .fw-bmi-tab__asia{fill:var(--pk)}
.fw-bmi-tab tbody tr.is-you th::after{content:"You";padding:2px 8px;border-radius:999px;background:var(--pk);color:var(--wh);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ══════════════════════════════════════════════════════════════
   05 · BIG NUMERALS BESIDE A PHOTOGRAPH
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-facts{padding:0}
.fw-bmi-facts__grid{display:grid;grid-template-columns:var(--split);column-gap:var(--split-gap);align-items:stretch;min-height:50vh;padding-inline:var(--pad)}
.fw-bmi-facts__pic{margin:0 0 0 calc(var(--pad) * -1);min-height:320px;overflow:hidden}
.fw-bmi-facts__pic img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;transition:transform 1.2s var(--ease)}
.fw-bmi-facts__pic:hover img{transform:scale(1.04)}
.fw-bmi-facts__copy{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:clamp(24px, 4vh, 44px) 0}
.fw-bmi-nums{margin:4px 0 0;padding:0;list-style:none}
.fw-bmi-num{position:relative;display:grid;grid-template-columns:minmax(150px, auto) minmax(0, 1fr);align-items:center;gap:20px;padding:10px 0;--nc:var(--mt-ink)}
.fw-bmi-num + .fw-bmi-num::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)}
.fw-bmi-num--bl{--nc:var(--bl-d)}
.fw-bmi-num--co{--nc:var(--co-ink)}
.fw-bmi-num b{font-size:clamp(28px, 4.4vh, 42px);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--nc);transition:transform .35s var(--ease-pop)}
.fw-bmi-num:hover b{transform:scale(1.06)}
.fw-bmi-num span{font-size:14.5px;line-height:1.5;color:var(--g7)}
.fw-bmi-num em{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--nc)}

/* ══════════════════════════════════════════════════════════════
   06 · QUESTIONS IN TWO COLUMNS
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-qa{display:grid;grid-template-columns:var(--split);column-gap:var(--split-gap);align-items:start}
.fw-bmi-qa details{position:relative}
.fw-bmi-qa details::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fade)}
.fw-bmi-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;cursor:pointer;list-style:none;font-size:16.5px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)}
.fw-bmi-qa summary::-webkit-details-marker{display:none}
.fw-bmi-qa summary .bi{flex:none;font-size:16px;color:var(--mt-ink);transition:transform .35s var(--ease)}
.fw-bmi-qa summary:hover{color:var(--bl-d)}
.fw-bmi-qa details[open] summary{color:var(--mt-ink)}
.fw-bmi-qa details[open] summary .bi{transform:rotate(45deg)}
.fw-bmi-qa details p{margin:0;padding:0 0 18px;font-size:15px;line-height:1.7;color:var(--g6);animation:fw-bmi-in .4s var(--ease)}

/* ══════════════════════════════════════════════════════════════
   07 · CLOSE — copy beside a photograph
   ══════════════════════════════════════════════════════════════ */
.fw-bmi-close{position:relative;display:grid;grid-template-columns:var(--split);column-gap:var(--split-gap);padding-inline:var(--pad);align-items:stretch;min-height:50vh;background:linear-gradient(120deg, var(--mt-wash), var(--wh) 60%)}
.fw-bmi-close::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade)}
.fw-bmi-close__copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:32px 0}
.fw-bmi-close__h{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.4vh, 42px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.fw-bmi-close__sub{margin:0;font-size:clamp(15px, 2vh, 17px);line-height:1.6;color:var(--g6)}
.fw-bmi-close__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px}
.fw-bmi-close__pic{margin:0 calc(var(--pad) * -1) 0 0;min-height:320px;overflow:hidden}
.fw-bmi-close__pic img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}

.fw-bmi-dock{display:none;--zc:var(--mt-d)}

/* ══════════════════════════════════════════════════════════════
   08 · RESPONSIVE — and the phone as an app
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
	.fw-bmi-page{--pad:14px;--sec:clamp(36px, 8vw, 56px)}
	.fw-bmi-h2{font-size:clamp(24px, 6.4vw, 32px)}
	.fw-bmi .fw-bmi-h1{font-size:clamp(30px, 8vw, 44px)}
	.fw-bmi .fw-bmi-grid{grid-template-columns:minmax(0, 1fr)}
	.fw-bmi-sec{min-height:0}
	.fw-bmi-tgrid,.fw-bmi-facts__grid,.fw-bmi-close{grid-template-columns:minmax(0, 1fr)}
	.fw-bmi-facts__grid,.fw-bmi-close{min-height:0}
	.fw-bmi-facts__grid,.fw-bmi-close{padding-inline:0;column-gap:0}
	.fw-bmi-facts__pic{aspect-ratio:16/10;min-height:0;margin:0}
	.fw-bmi-facts__copy{padding:var(--sec) var(--pad)}
	.fw-bmi-close__copy{padding:var(--sec) var(--pad) 28px}
	.fw-bmi-close__pic{aspect-ratio:16/10;min-height:0;margin:0}

	/* The panels become a swipe deck: every panel open, one per screen. */
	.fw-bmi-panels{overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);gap:0;min-height:0;scrollbar-width:none}
	.fw-bmi-panels::-webkit-scrollbar{display:none}
	.fw-bmi-panel{flex:0 0 82%;scroll-snap-align:start;padding:22px 18px 22px 0}
	.fw-bmi-panel + .fw-bmi-panel{padding-left:18px}
	.fw-bmi-panel::after{left:0;right:18px}
	.fw-bmi-panel + .fw-bmi-panel::after{left:18px}
	.fw-bmi-panel .fw-bmi-panel__body{max-height:none;overflow:visible;opacity:1;transform:none}
	.fw-bmi-panel::after{transform:scaleX(1)}
}
@media (max-width:760px){
	/* A phone keeps the two people stacked: side by side would be too narrow. */
	.fw-bmi.is-couple .fw-bmi-people,.fw-bmi.is-couple .fw-bmi-outs{grid-template-columns:minmax(0, 1fr)}
	.fw-bmi.is-couple .fw-bmi-person--b,.fw-bmi.is-couple .fw-bmi-out--b{padding-left:0;padding-top:16px}
	.fw-bmi.is-couple .fw-bmi-person--b::before,.fw-bmi.is-couple .fw-bmi-out--b::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:var(--fade)}
}
@media (max-width:640px){
	/* Settings as a swipe row. */
	.fw-bmi-set{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-bottom:14px}
	.fw-bmi-set::-webkit-scrollbar{display:none}
	.fw-bmi-set > *{flex:none}
	.fw-bmi-reset{margin-left:0}
	.fw-bmi-lede{font-size:14.5px}
	.fw-bmi-out__num b{font-size:72px}
	.fw-bmi-ruler__zone text{font-size:9.5px;letter-spacing:.02em}
	.fw-bmi-ruler__tick text{font-size:10.5px}
	.fw-bmi-tab__bar{display:none}
	.fw-bmi-tab tbody th{flex-direction:column;gap:0}
	.fw-bmi-num{grid-template-columns:minmax(0, 1fr);gap:6px}
	.fw-bmi-qa{grid-template-columns:minmax(0, 1fr)}

	/* The result bar, within thumb reach, above the site's tab bar. */
	.fw-bmi.is-live .fw-bmi-dock{
		position:fixed;left:10px;right:10px;bottom:calc(82px + env(safe-area-inset-bottom));z-index:1030;
		display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;border-radius:20px;background:var(--wh);
		box-shadow:0 12px 40px var(--ink-a28), inset 0 0 0 1px var(--line-soft);transform:translateY(160%);transition:transform .45s var(--ease)
	}
	.fw-bmi.is-live.is-docked .fw-bmi-dock{transform:none}
	.fw-bmi-dock__num{min-width:58px;height:44px;padding:0 10px;border-radius:14px;display:grid;place-items:center;background:var(--zc);color:var(--wh);font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
	.fw-bmi-dock__t{flex:1;display:grid;min-width:0}
	.fw-bmi-dock__t small{font-size:11px;color:var(--g5)}
	.fw-bmi-dock__t b{font-size:15px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
	.fw-bmi *,.fw-bmi *::before,.fw-bmi *::after{transition:none !important;animation:none !important}
	.fw-bmi.fw-bmi-anim [data-bmi-reveal]{opacity:1;transform:none}
}