/* healthcalculators.co.uk: the Soft Clay design system.
   Tokens first (colour, type, radius, shadow, spacing), then header, hero stage, calculator shell, results, BMI scale,
   cards and chips, timelines, the sign-off band and the rich footer. body.calm is the gentler tone for sensitive topics. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/figtree.woff2) format('woff2')}

:root{--x-card:#fff;--x-soft:#fbefe3;--x-acc:#0f6f68;--x-rad:30px;--x-rad2:22px;--x-sh:0 34px 60px -28px rgba(130,60,20,.45),0 0 0 1px rgba(130,60,20,.05);--x-sh2:0 18px 36px -28px rgba(100,50,20,.5);--x-over:-96px;--x-over-m:-70px;--x-hw:700;--x-btn:#0f6f68;--x-btnsh:inset 0 -4px 0 rgba(0,0,0,.18),0 8px 18px -8px rgba(15,111,104,.7);--x-imgr:50%;--x-c1:#f2b46b;--x-c2:#7cc8a4;--x-c3:#ee8a7a;--bg:#fbf5ee;--ink:#2b2320;--sub:#6b5d55;--teal:#0f6f68;--teal2:#14857c;--line:#eadfd3;--h:'Bricolage Grotesque',system-ui,sans-serif;--f:'Figtree',system-ui,sans-serif;--cu:#8fb8e0;--ch:#7cc8a4;--co:#f2b46b;--cb:#ee8a7a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--teal);text-underline-offset:3px}
img{max-width:100%}
.w{max-width:1248px;margin:0 auto;padding:0 32px;position:relative}
.sr{position:absolute;left:-9999px}
.top-in{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:12px;font:800 23px var(--h);color:var(--ink);text-decoration:none;letter-spacing:-.02em}.logo i{font-style:normal;color:var(--teal)}
.orb{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,#ffd9b8 18%,#f39a6b 55%,#c9603c 100%);box-shadow:0 6px 12px -4px rgba(190,90,50,.55),inset -3px -4px 6px rgba(120,40,20,.25);flex:none}
.nav{display:flex;gap:28px;align-items:center}.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.nav-cta{background:#fff;padding:10px 18px;border-radius:999px;box-shadow:0 1px 0 #fff inset,0 8px 18px -8px rgba(110,60,30,.35),0 0 0 1px rgba(110,60,30,.08)}
/* hero stage */
.hero{padding:6px 0 0}
.stage{position:relative;border-radius:48px;background-color:var(--s2);background-position:right center;background-size:cover;background-repeat:no-repeat;overflow:hidden;min-height:640px;box-shadow:0 40px 80px -50px rgba(160,80,30,.55)}
.m-only{display:none}.stage-art{position:absolute;right:-6px;bottom:-14px;width:52%;height:auto;max-width:none;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 55% 55%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 55% 55%,#000 72%,transparent 100%);animation:bob 7s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.stage-in{position:relative;padding:36px 52px 36px;max-width:720px}
.kick{display:inline-block;font:700 13px var(--f);letter-spacing:.06em;text-transform:uppercase;color:#8a4a22;background:rgba(255,255,255,.55);padding:5px 13px;border-radius:999px;margin:0 0 14px}
h1{font:800 56px/1 var(--h);letter-spacing:-.035em;margin:0 0 14px;max-width:620px}
h1 span{color:var(--teal)}
.lede{font-size:18px;color:#5a463a;margin:0 0 22px;max-width:48ch}
h2{font:800 44px/1.05 var(--h);letter-spacing:-.03em;margin:0 0 10px}
h3{font:700 23px/1.2 var(--h);letter-spacing:-.015em;margin:0 0 6px}
.sub{color:var(--sub);margin:0;font-size:18px}
/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;background:rgba(255,255,255,.94);border-radius:32px;box-shadow:0 1px 0 #fff inset,0 34px 60px -28px rgba(130,60,20,.5),0 0 0 1px rgba(130,60,20,.06);width:640px;overflow:hidden}
.calc-form{padding:18px 20px 18px}
.calc-out{padding:18px 22px 18px;background:linear-gradient(180deg,#fff7ef,#fdeee0);display:flex;flex-direction:column}
.calc-t{font:700 18px var(--h);margin:0 0 8px}
.bmi{display:grid;gap:10px}
.bmi-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.bmi-lbl{font-weight:700;font-size:15px}
.seg{display:inline-flex;background:#f3ebe3;border-radius:999px;padding:3px;box-shadow:inset 0 2px 3px rgba(90,50,20,.12)}
.seg button{font:700 12.5px var(--f);border:0;background:transparent;color:var(--sub);padding:5px 11px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed=true]{background:linear-gradient(180deg,#1d8a80,#0f6f68);color:#fff;box-shadow:0 3px 6px -2px rgba(15,111,104,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.ins{display:flex;gap:8px}.ins[hidden]{display:none}
.ins label{flex:1;display:flex;align-items:center;background:#f6efe8;border-radius:16px;padding:0 14px;height:46px;box-shadow:inset 0 2px 5px rgba(90,50,20,.12);border:2px solid transparent}
.ins label:focus-within{border-color:var(--teal);background:#fff}
.ins input{width:100%;min-width:0;border:0;outline:0;background:transparent;font:700 21px var(--h);color:var(--ink)}
.ins span{color:var(--sub);font-weight:600;font-size:14px}
.chk{display:flex;gap:10px;font-size:13px;line-height:1.4;color:var(--sub);cursor:pointer}.chk input{width:18px;height:18px;accent-color:var(--teal);flex:none;margin:1px 0 0}.chk small{display:block;font-size:12px;opacity:.85}
.rl{margin:0;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#a0623a}
.rn{font:800 58px/1 var(--h);letter-spacing:-.04em;margin:2px 0 6px}
.rb{display:inline-block;align-self:flex-start;margin:0 0 12px;font-weight:700;font-size:14.5px;padding:4px 12px;border-radius:999px;background:#d9f0e4;color:#145a3c}
.rb.k-under{background:#dde9f7;color:#1c4a7a}.rb.k-over{background:#fbe6c8;color:#7a4a10}.rb.k-obese{background:#fadcd6;color:#83301f}
.scale{position:relative;margin:0 0 14px}
.track{--a:14%;--b:40%;--c:60%;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--cu) 0 var(--a),var(--ch) var(--a) var(--b),var(--co) var(--b) var(--c),var(--cb) var(--c) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 0 #fff}
.track i{display:none}
.ball{position:absolute;top:-7px;left:36%;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0,#e9fff6 14%,#3fb58f 50%,#16704f 100%);box-shadow:0 8px 12px -4px rgba(0,60,40,.5);transition:left .8s cubic-bezier(.2,1.3,.4,1)}
.ball.k-under{background:radial-gradient(circle at 34% 28%,#fff 0,#eaf3ff 14%,#5d93cf 50%,#22507f 100%)}.ball.k-over{background:radial-gradient(circle at 34% 28%,#fff 0,#fff3dc 14%,#ec9f45 50%,#9a5a12 100%)}.ball.k-obese{background:radial-gradient(circle at 34% 28%,#fff 0,#ffe8e2 14%,#e3735f 50%,#93321f 100%)}
.ticks{position:relative;height:16px;font-size:11.5px;color:var(--sub);font-weight:600}.ticks span{position:absolute;top:4px;transform:translateX(-50%)}.ticks span:first-child{left:14%}
.rm{margin:0 0 6px;font-size:13.5px;line-height:1.4;color:#5a463a}.rh{margin:0;font-size:13.5px;line-height:1.4}
.gp{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--sub)}
.more{margin-top:10px;font-weight:700;font-size:14.5px}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}.quick span{font-weight:700;font-size:14.5px;color:#7a4a2a;margin-right:4px}
.quick a{font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.7);padding:7px 14px;border-radius:999px;box-shadow:0 6px 12px -8px rgba(120,60,20,.5)}.quick a:hover{background:#fff}
/* sections */
.sec{padding:104px 0 0}
.sh{margin:0 0 34px}
.find-in{background:#fff;border-radius:40px;padding:48px 56px;text-align:center;box-shadow:0 30px 60px -40px rgba(120,60,20,.4)}
.find-in .sub{margin-bottom:24px}
.search{max-width:640px;margin:0 auto;background:#f6efe8;border-radius:999px;box-shadow:inset 0 2px 6px rgba(90,50,20,.14);border:2px solid transparent}.search:focus-within{border-color:var(--teal);background:#fff}
.search input{width:100%;border:0;outline:0;background:transparent;font:600 19px var(--f);padding:19px 30px;color:var(--ink);text-align:center}
.qc{font-size:14.5px;color:var(--sub);margin:12px 0 0}.qc:empty{display:none}
.results{list-style:none;max-width:640px;margin:12px auto 0;padding:8px;text-align:left;display:grid;gap:4px}
.results a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:8px 12px;border-radius:18px;text-decoration:none;color:var(--ink);font-weight:700}.results a:hover{background:#fbf3ea}
.results img{width:44px;height:44px;border-radius:14px;object-fit:cover}.results span{font-weight:500;color:var(--sub);font-size:14px}.results .none{padding:10px 16px;color:var(--sub)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cat{background:var(--bg);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 26px 44px -30px rgba(100,50,20,.55);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.cat:hover{transform:translateY(-6px)}
.cat-art{aspect-ratio:16/11;overflow:hidden;background:var(--top)}.cat-art img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform .6s ease}.cat:hover .cat-art img{transform:scale(1.16)}
.cat-tx{padding:4px 26px 24px;display:flex;flex-direction:column;flex:1}
.cat-tx p{margin:0 0 12px;font-size:15.5px;color:#4d3f37}
.cat-l{display:flex;flex-wrap:wrap;gap:6px}.cat-l a{font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;background:rgba(255,255,255,.65);padding:5px 12px;border-radius:999px}.cat-l a:hover{background:#fff}
.cat button{margin-top:auto;align-self:flex-start;font:700 14px var(--f);color:#fff;background:var(--ink);border:0;border-radius:999px;padding:9px 16px;cursor:pointer}.cat button[aria-pressed=true]{background:var(--teal)}
.pop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pop a{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:26px;padding:16px;text-decoration:none;color:var(--sub);font-size:14px;line-height:1.45;height:100%;box-shadow:0 20px 36px -28px rgba(100,50,20,.5);transition:transform .25s}
.pop a:hover{transform:translateY(-3px)}.pop img{width:64px;height:64px;border-radius:20px;object-fit:cover;flex:none}.pop b{display:block;font:700 18px/1.2 var(--h);color:var(--ink);margin:2px 0 4px}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.facts li{background:var(--t);border-radius:30px;padding:26px 28px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.04)}
.facts b{display:block;font:800 40px/1.05 var(--h);letter-spacing:-.03em;margin:0 0 6px}.facts span{display:block;color:#4d3f37}.facts i{display:inline-block;margin-top:12px;font-style:normal;font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#7a5a45;background:rgba(255,255,255,.6);padding:3px 10px;border-radius:999px}
.care{position:relative;background:url(/assets/art/care.webp) left center/cover no-repeat,#e6dbef;border-radius:48px;overflow:hidden;min-height:460px;display:flex}
.care-art{position:absolute;left:-40px;top:0;height:100%;width:auto;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.care-in{position:relative;margin-left:auto;width:58%;padding:52px 56px 48px}
.prom{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}.prom b{display:flex;align-items:center;gap:10px;font:700 19px var(--h);margin-bottom:4px}.prom i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:14px;box-shadow:0 4px 8px -3px rgba(80,40,90,.4)}.prom span{font-size:15px;color:#4a3f55}
.srcl{margin:22px 0 0;font-size:14.5px;color:#4a3f55}
.fl{display:flex;align-items:center;gap:12px;font:800 24px var(--h);color:#fff;margin:0 0 12px!important}
/* inner */
.stage-sm{min-height:330px}.stage-sm .stage-art{height:118%;right:20px}.stage-sm .stage-in{padding-bottom:120px}
.crumbs{margin:0 0 14px;font-weight:600;font-size:15px}.crumbs a{color:#6b4a2a}.crumbs span{opacity:.5;margin:0 6px}
.innerp h1{font-size:64px}
.calc-big{width:auto;max-width:1000px;margin:-96px auto 0;position:relative;grid-template-columns:1.1fr 1fr}
.calc-big .calc-form{padding:30px 32px}.calc-big .calc-out{padding:30px 34px}.calc-big .rn{font-size:84px}.calc-big .rm,.calc-big .rh{font-size:15.5px}
.calc-big .bmi{gap:18px}.calc-big .ins label{height:58px}.calc-big .chk{font-size:14.5px}
.hint{font-size:14px;color:var(--sub);margin:16px 0 0}.rg{font-size:14px;margin:12px 0 0;background:#fff;border-radius:16px;padding:10px 14px}.rg:empty{display:none}
.ip{padding-top:88px}.ip-in{max-width:1000px;margin:0 auto}
.ip h2{margin-bottom:12px}.ip-lede{color:var(--sub);margin:0 0 22px;font-size:18px}
.ip-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ip-two>div{background:#fff;border-radius:30px;padding:26px 28px;min-width:0;box-shadow:0 20px 40px -32px rgba(100,50,20,.5)}
.bands{width:100%;border-collapse:collapse;font-size:16px}.bands th{text-align:left;font-weight:700;font-size:13px;color:var(--sub);padding:8px 12px}.bands td{padding:11px 12px;border-top:1px solid var(--line)}
.bands tr.on td{background:#d9f0e4;font-weight:700;border-color:transparent}.bands tr.on td:first-child{border-radius:14px 0 0 14px}.bands tr.on td:last-child{border-radius:0 14px 14px 0}
.note{font-size:14.5px;color:var(--sub)}
.formula{display:inline-block;font:800 30px var(--h);background:#fff;border-radius:999px;padding:12px 30px;box-shadow:0 16px 30px -24px rgba(100,50,20,.6)}
.cannot{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cannot li{background:#fff;border-radius:26px;padding:20px 22px;font-size:15px;color:var(--sub)}.cannot b{display:block;font:700 19px var(--h);color:var(--ink);margin-bottom:4px}
.faq details{background:#fff;border-radius:22px;padding:18px 24px;margin-bottom:10px}.faq summary{font:700 19px var(--h);cursor:pointer}.faq p{margin:8px 0 0;color:var(--sub)}
.srcs{padding-left:18px;font-size:15.5px}.gpbox{background:#d9f0e4!important}.gpbox p{color:#244a3a;font-size:15.5px;margin:0}
.rel{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.rel a{display:block;background:#fff;border-radius:24px;padding:18px 22px;text-decoration:none;color:var(--ink);height:100%}.rel b{display:block;font:700 18px var(--h)}.rel span{font-size:14.5px;color:var(--sub)}
@media(max-width:1100px){.calc{width:100%}}
@media(max-width:900px){.cats,.facts{grid-template-columns:1fr 1fr}.pop{grid-template-columns:1fr 1fr}.care-in{width:100%}.care-art{opacity:.25}.prom{grid-template-columns:1fr}}
@media(max-width:640px){.w{padding:0 14px}.nav{display:none}.m-only{display:block}.stage{border-radius:32px;min-height:0;background:linear-gradient(180deg,var(--s1),var(--s2))!important}.care{background:#e6dbef}.stage-art{position:relative;display:block;top:auto;transform:none;right:auto;height:auto;width:118%;margin:-30px -9% -40px;opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 75%,transparent);mask-image:linear-gradient(180deg,#000 75%,transparent);animation:none}
.stage{display:flex;flex-direction:column-reverse}.stage-in{padding:26px 18px 24px}h1{font-size:40px}.innerp h1{font-size:44px}h2{font-size:32px}.calc{grid-template-columns:minmax(0,1fr)}.cats,.facts,.pop,.cannot,.ip-two,.rel{grid-template-columns:1fr}.find-in{padding:32px 18px;border-radius:30px}.sec{padding-top:72px}.care-in{padding:34px 22px}.results span{display:none}.results a{grid-template-columns:44px 1fr}
.stage-sm .stage-art{width:90%;margin:-20px auto -50px}.stage-sm .stage-in{padding-bottom:90px}.calc-big{margin-top:-70px}.calc-big .calc-form,.calc-big .calc-out{padding:22px 18px}}
/* ---- sign-off band and footer ---- */
.so-wrap{margin-top:112px;position:relative;z-index:1}
.so{position:relative;border-radius:48px;overflow:hidden;min-height:540px;display:flex;align-items:center;background:#f8c08a right center/auto 118% no-repeat;box-shadow:0 30px 60px -30px rgba(120,60,20,.35),inset 0 0 0 1px rgba(255,255,255,.35)}
.so::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,190,135,.96) 0,rgba(248,192,138,.85) 34%,rgba(248,192,138,0) 52%);pointer-events:none}
.so-in{position:relative;padding:60px 64px;max-width:560px}
.so-k{display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.6);font:700 13px var(--h);letter-spacing:.08em;text-transform:uppercase;color:#8a4a22}
.so h2{margin:0;font:800 76px/.98 var(--h);letter-spacing:-.04em;color:var(--ink)}.so h2 span{display:block;color:var(--teal)}
.so-p{margin:18px 0 26px;font-size:18px;color:#5a3a28;max-width:46ch}
.so-s{display:flex;gap:8px;background:#fff;border-radius:999px;padding:8px;box-shadow:0 14px 30px -12px rgba(120,60,20,.45),inset 0 -3px 0 rgba(0,0,0,.05);max-width:440px}
.so-s input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:0 18px;font:600 18px var(--f);color:var(--ink)}
.so-s button{border:0;border-radius:999px;padding:15px 24px;background:var(--teal);color:#fff;font:700 16px var(--h);cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 6px 14px -6px rgba(15,111,104,.8)}
.so-s button:hover{background:var(--teal2)}
.so-c{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0}.so-c span{font-weight:700;font-size:14px;color:#7a4a2c;margin-right:4px}
.so-c a{padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--ink);text-decoration:none;font-weight:700;font-size:14.5px;box-shadow:0 3px 0 rgba(140,80,40,.18)}.so-c a:hover{background:#fff}
.so-m{display:none}
.foot{margin-top:-80px;padding:170px 0 56px;background:radial-gradient(1100px 500px at 85% 0,#16807a 0,rgba(22,128,122,0) 60%),linear-gradient(180deg,#0f5d57,#0a3d3a);color:#d7ebe6;font-size:15px;border-radius:56px 56px 0 0}
.foot a{color:#fff;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot h3{margin:0 0 12px;font:800 17px var(--h);color:#fff;letter-spacing:-.01em}
.f-top{display:grid;grid-template-columns:1fr;gap:44px}.f-brand{display:flex;justify-content:space-between;align-items:center;gap:40px}.f-brand p{max-width:52ch!important}
.f-brand .logo{color:#fff;font-size:26px}.f-brand .logo i{color:#ffcf9e}.f-brand p{margin:18px 0 0;max-width:36ch;color:#cfe5df;font-size:16px}
.f-chk{display:inline-flex!important;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:600;font-size:14px!important;color:#fff!important}
.f-chk .dot{width:10px;height:10px;border-radius:50%;background:#7cf0b8;box-shadow:0 0 0 4px rgba(124,240,184,.2)}
.f-help{background:#fbf5ee;color:var(--ink);border-radius:36px;padding:34px 34px 26px;box-shadow:0 24px 50px -24px rgba(0,0,0,.5)}
.f-help{padding:38px 40px 30px}.f-help-h{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:24px}.f-help h2{margin:0;font:800 38px/1.05 var(--h);letter-spacing:-.03em;flex:none}.f-help-p{margin:0;color:var(--sub);max-width:52ch}
.hps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hps{gap:14px}.hp{display:flex;flex-direction:column;gap:6px;padding:20px 18px 16px;border-radius:22px;background:var(--t);box-shadow:inset 0 -4px 0 rgba(0,0,0,.06)}
.hp0{--t:#fde2c8}.hp1{--t:#d8ecdf}.hp2{--t:#dfe4f6}.hp3{--t:#f9d3cf}.hp4{--t:#ece0f4}
.hp-l{font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.hp b{font:800 38px/1.05 var(--h);letter-spacing:-.03em;color:var(--ink)}.hp1 b{font-size:28px;line-height:1.43}
.hp-x{font-size:14px;line-height:1.4;color:#4e423b;flex:1}
.hp a{margin-top:6px;font-weight:700;font-size:14px;color:var(--teal)!important}
.hp3 b{color:#b8372b}
.beat{margin:16px 0 0;padding:14px 18px;border-radius:18px;background:#fff;border:1px dashed #e3cdb9;font-size:14.5px;color:#4e423b}.beat a{color:var(--teal)!important;font-weight:700;text-decoration:underline!important}
.f-cols{display:grid;grid-template-columns:3fr 1fr;gap:48px;margin-top:72px;padding-top:48px;border-top:1px solid rgba(255,255,255,.14)}
.f-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px}
.fc h3{display:flex;align-items:center;gap:12px}.fc h3 img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.foot ul,.foot ol{list-style:none;margin:0;padding:0}.fc li,.fs-b li{margin:0 0 7px}.fc a,.fs-b a{color:#d7ebe6}.fc a:hover,.fs-b a:hover{color:#fff}
.fc .all{color:#ffcf9e!important;font-weight:700}
.f-side{display:flex;flex-direction:column;gap:30px;padding:26px 26px 18px;border-radius:28px;background:rgba(255,255,255,.07)}
.fs-b ol{counter-reset:m}.fs-b ol li{counter-increment:m;display:flex;gap:10px}.fs-b ol li::before{content:counter(m);flex:none;width:22px;height:22px;border-radius:50%;background:#ffcf9e;color:#5a3a28;font:800 12px/22px var(--h);text-align:center;margin-top:1px}
.f-src{margin-top:56px}.f-src ul{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.f-src a{display:block;height:100%;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.f-src a:hover{background:rgba(255,255,255,.14);text-decoration:none}
.f-src b{display:block;color:#fff;font:800 16px var(--h)}.f-src span{display:block;font-size:13.5px;color:#b9d6cf;margin-top:2px}
.f-sis{margin-top:40px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.f-sis h3{margin:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#ffcf9e}
.f-sis ul{display:flex;flex-wrap:wrap;gap:10px}.f-sis a{display:flex;flex-direction:column;padding:10px 18px;border-radius:18px;background:#fbf5ee;color:var(--ink)!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}.f-sis a:hover{background:#fff;text-decoration:none}
.f-sis b{font:800 14.5px var(--h)}.f-sis span{font-size:12.5px;color:var(--sub)}
.f-legal{margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:#a9cbc3}.f-legal p{margin:0 0 8px;max-width:110ch}.f-legal a{color:#fff;text-decoration:underline}
.f-made{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px!important;color:#d7ebe6}.f-made b{color:#fff}
@media(max-width:1100px){.hps{grid-template-columns:repeat(3,1fr)}.f-top{grid-template-columns:1fr}.f-cols{grid-template-columns:1fr}.f-side{flex-direction:row;flex-wrap:wrap}.fs-b{flex:1;min-width:220px}.f-src ul{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.f-brand,.f-help-h{flex-direction:column;align-items:flex-start;gap:16px}}
@media(max-width:640px){.so-wrap{margin-top:72px}.so{display:block;min-height:0;background:linear-gradient(180deg,#f8be87,#fdd7a6)!important;border-radius:34px}.so::before{display:none}.so-in{padding:34px 22px 0}.so h2{font-size:48px}.so-p{font-size:16px}.so-s{flex-direction:column;border-radius:24px;padding:8px}.so-s input{padding:12px 12px}.so-m{display:block;width:150%;max-width:none;height:auto;margin:-10px 0 -20px -45%;}
.foot{padding:140px 0 40px;border-radius:36px 36px 0 0}.f-help{padding:26px 18px 18px;border-radius:28px}.f-help{padding:26px 18px 18px}.f-help h2{font-size:28px}.hp b{font-size:30px}.hp1 b{font-size:22px;line-height:1.36}.hp{padding:16px 14px 14px}.hps{grid-template-columns:1fr 1fr}.hp4{grid-column:1/-1}.f-cats{grid-template-columns:1fr 1fr;gap:28px 18px}.fc h3{flex-direction:column;align-items:flex-start;gap:8px;font-size:16px}.f-side{flex-direction:column;padding:22px 20px}.f-src ul{grid-template-columns:1fr}.f-sis{display:block}.f-sis h3{margin-bottom:12px}.f-sis ul{display:grid;grid-template-columns:1fr}}

.subp .over{position:relative;background:var(--x-card);border-radius:var(--x-rad);box-shadow:var(--x-sh);max-width:1000px;margin:var(--x-over) auto 0;padding:30px 34px}
.feat{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:center}.feat img{width:240px;height:240px;border-radius:var(--x-rad2);object-fit:cover;display:block}
.feat-k{margin:0 0 6px;font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--x-acc)}.feat h2{margin:0 0 8px}.feat p{margin:0 0 12px;color:var(--sub);max-width:52ch}
.feat-b{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.feat-b span{font-size:14px;color:var(--sub)}
.btn{display:inline-block;padding:14px 24px;border-radius:999px;background:var(--x-btn);color:#fff!important;text-decoration:none;font-weight:800;font-size:16px;box-shadow:var(--x-btnsh)}.btn:hover{filter:brightness(1.08)}
.tops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tops a{display:flex;flex-direction:column;gap:4px;height:100%;padding:18px;border-radius:var(--x-rad2);background:var(--x-card);box-shadow:var(--x-sh2);color:var(--ink);text-decoration:none}
.tops img{width:56px;height:56px;border-radius:var(--x-imgr);object-fit:cover;margin-bottom:8px}.tops b{font:var(--x-hw) 19px/1.2 var(--h)}.tops span{font-size:14px;color:var(--sub)}.tops a:hover{transform:translateY(-2px)}
.tops-cats{grid-template-columns:repeat(4,1fr)}
.hub-s{max-width:640px}.hub-s input{width:100%}
.cards3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards3 li{background:var(--x-card);border-radius:var(--x-rad2);box-shadow:var(--x-sh2);padding:22px 24px}.cards3 b{display:block;font:var(--x-hw) 21px/1.2 var(--h);margin-bottom:6px}.cards3 span{color:var(--sub);font-size:15.5px}
.floors li{background:var(--x-soft)}
.formula{font:var(--x-fw,var(--x-hw)) 20px/1.4 var(--x-ff,var(--h));background:var(--x-card);border-radius:var(--x-rad2);padding:16px 22px;box-shadow:var(--x-sh2);margin:16px 0}
.sub-f{display:grid;gap:16px}.bmi-row.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.seg-w{display:flex;width:100%}.seg-w button{flex:1;padding:9px 10px}.seg-3 button{padding:9px 6px}
.sel{position:relative}.ins select{width:100%;min-width:0;border:0;outline:0;background:transparent;font:600 16px var(--f);color:var(--ink);appearance:none;-webkit-appearance:none;padding-right:22px;cursor:pointer}.sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ins input[type=date],.ins input[type=time]{font-size:20px}
.stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--x-soft);margin:6px 0 14px}.stack i{display:block;height:100%;transition:width .4s}.stack .s1{background:var(--x-c1)}.stack .s2{background:var(--x-c2)}.stack .s3{background:var(--x-c3)}
.kv{list-style:none;margin:0 0 12px;padding:0;font-size:14.5px}.kv li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}.kv li:last-child{border-bottom:0}.kv b{font-weight:800}.kv i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:0}
.rn-date{font-size:46px!important;line-height:1.05!important;letter-spacing:-.02em}
.prog{position:relative;height:12px;border-radius:999px;background:var(--x-soft);margin:8px 0 30px}.prog i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--x-c1);transition:width .4s}.prog span{position:absolute;top:16px;font-size:12px;font-weight:700;color:var(--sub)}.prog .t1{left:0}.prog .t2{left:32.5%}.prog .t3{left:67.5%}
.prog::before,.prog::after{content:"";position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--x-card);z-index:1}.prog::before{left:32.5%}.prog::after{left:67.5%}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.tl li{display:grid;grid-template-columns:150px 1fr auto;gap:22px;align-items:center;background:var(--x-card);border-radius:var(--x-rad2);box-shadow:var(--x-sh2);padding:16px 22px}
.tl .wk{font:var(--x-hw) 20px/1.1 var(--h)}.tl b{display:block;font-size:16.5px}.tl span{color:var(--sub);font-size:14.5px}.tl .when{font-weight:700;font-size:14px;text-align:right;white-space:nowrap}
.tl .done{opacity:.6}.tl .done .when{color:var(--x-acc)}.tl .now{background:var(--x-soft);outline:2px solid var(--x-acc)}.tl .now .when{color:var(--x-acc)}
.opts{list-style:none;margin:4px 0 12px;padding:0;display:grid;gap:8px}.opts li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 14px;border-radius:16px;background:var(--x-card);box-shadow:inset 0 0 0 1.5px var(--line)}
.opts li.best{box-shadow:inset 0 0 0 2px var(--x-acc);background:var(--x-soft)}.opts .tm{font:var(--x-hw) 24px/1 var(--h);min-width:96px}.opts .cy{font-size:14px;color:var(--sub)}.opts .cy b{color:var(--ink);display:block;font-size:14.5px}.opts .tag{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--x-c2);color:var(--ink);white-space:nowrap}.opts .tag.short{background:var(--x-c3)}
.prom4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.prom4 div{display:flex;flex-direction:column;gap:4px}.prom4 i{font-style:normal;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--x-soft);color:var(--x-acc);font-weight:800;margin-bottom:6px}.prom4 b{font:var(--x-hw) 19px/1.2 var(--h)}.prom4 span{font-size:14.5px;color:var(--sub)}
.never{list-style:none;margin:0;padding:0;display:grid;gap:12px}.never li{padding-left:28px;position:relative;color:var(--sub)}.never li b{color:var(--ink)}.never li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--x-c3)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:s}.steps li{background:var(--x-card);border-radius:var(--x-rad2);box-shadow:var(--x-sh2);padding:22px 20px;display:flex;flex-direction:column;gap:6px}.steps i{font:var(--x-hw) 40px/1 var(--h);font-style:normal;color:var(--x-acc)}.steps b{font:var(--x-hw) 19px/1.2 var(--h)}.steps span{font-size:14.5px;color:var(--sub)}
.srcgrid{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.srcgrid a{display:block;height:100%;padding:18px 20px;border-radius:var(--x-rad2);background:var(--x-card);box-shadow:var(--x-sh2);text-decoration:none;color:var(--ink)}.srcgrid b{display:block;font:var(--x-hw) 19px var(--h)}.srcgrid span{font-size:14px;color:var(--sub)}
.subp .ip-in{max-width:1080px}
.subp .ip{padding-left:32px;padding-right:32px}
@media(max-width:1100px){.steps{grid-template-columns:repeat(3,1fr)}.tops,.tops-cats{grid-template-columns:1fr 1fr}.prom4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.subp .ip{padding-left:16px;padding-right:16px}.subp .hero-wrap{background-size:auto 250px!important;background-position:right bottom!important;padding-bottom:180px!important}.subp .over{padding:24px 20px;margin-top:var(--x-over-m)}.feat{grid-template-columns:1fr;gap:18px}.feat img{width:100%;height:200px}.cards3,.srcgrid,.steps,.prom4{grid-template-columns:1fr}.tops,.tops-cats{grid-template-columns:1fr 1fr;gap:10px}.tops a{padding:14px}.tops span{display:none}
.tl li{grid-template-columns:1fr;gap:4px;padding:14px 16px}.tl .when{text-align:left}.rn-date{font-size:36px!important}.formula{font-size:17px;padding:14px 16px}.opts .tm{font-size:21px;min-width:80px}.opts li{grid-template-columns:auto 1fr;}.opts .tag{grid-column:1/-1;justify-self:start}.seg-3 button{font-size:11.5px;padding:8px 4px}}

@media(max-width:640px){.stage-sm .stage-art{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 62%,transparent 100%)}}
.hubl{color:inherit;text-decoration:none}.hubl:hover{text-decoration:underline}
.sub-calc .calc-out{gap:0}.sub-calc .rn{font-size:72px}
.k-s1{background:var(--x-c1)}.k-s2{background:var(--x-c2)}.k-s3{background:var(--x-c3)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---- v9 site additions ---- */
:root{--sp1:8px;--sp2:16px;--sp3:24px;--sp4:40px;--sp5:72px;--sp6:104px;--r-sm:14px;--r-md:22px;--r-lg:32px;--r-xl:48px;--peach:#f8c08a;--cream:#fbf5ee}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700}.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.foot :focus-visible,.foot a:focus-visible{outline-color:#ffcf9e}
.sr{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}.crumbs li{color:#5a463a}.crumbs li+li::before{content:"/";opacity:.5;margin:0 8px}
.crumbs a{color:#6b4a2a}
.nav a[aria-current]{color:var(--teal)}
.so{background-image:url(/assets/art/signoff.webp)}
.cat-all{margin-top:auto;align-self:flex-start;font:700 14px var(--f);color:#fff!important;background:var(--ink);border-radius:999px;padding:9px 16px;text-decoration:none}.cat-all:hover{background:var(--teal)}
.ip-card{background:#fff;border-radius:30px;padding:22px 26px;box-shadow:0 20px 40px -32px rgba(100,50,20,.5);overflow-x:auto}
.htable td:nth-child(2){white-space:nowrap}
.waist{display:grid;gap:12px;max-width:560px}.waist .ins label{height:56px}.rw{margin:0;font-size:15.5px}.rw b{font-weight:800}
.rh b{white-space:nowrap}
.calc-out .rl{color:#93542e}
.tl .when{color:#4e423b}
.stage.nf{min-height:300px;background-image:none}
.stage picture{display:contents}
/* ---- calm tone: a gentler palette and less art for pregnancy, weight, mental health, alcohol and illness ---- */
.calm{--teal:#2f6e69;--teal2:#3a7f79;--ch:#9fcdb5;--co:#efc28e;--cb:#e7a597;--cu:#a9c5e2;--x-c1:#efc28e;--x-c2:#9fcdb5;--x-c3:#e7a597}
.calm .stage{box-shadow:0 30px 60px -50px rgba(120,80,50,.4)}
.calm .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,245,238,.42),rgba(251,245,238,.12) 55%,rgba(251,245,238,.28));pointer-events:none}
.calm .stage-in{position:relative;z-index:1}
.calm .stage-art{animation:none}
.calm .kick,.calm .so-k{background:rgba(255,255,255,.7);color:#6e4a33}
.calm .cat:hover,.calm .tops a:hover,.calm .pop a:hover{transform:none}
.calm .so{background:linear-gradient(120deg,#f6e9dc,#eedfd0 60%,#e6d5c6);min-height:380px}
.calm .so::before{display:none}
.calm .so h2 span{color:var(--teal)}
.calm .rb{background:#e6efe9;color:#24483a}.calm .rb.k-under{background:#e4ebf4;color:#24446a}.calm .rb.k-over{background:#f6ead8;color:#6a4614}.calm .rb.k-obese{background:#f4e3df;color:#7a3626}
.calm .gpbox{background:#e6efe9!important}
.calc-big,.subp .over{z-index:2}
@media(max-width:640px){.calm .stage-art{width:64%!important;margin:-6px auto 30px!important;display:block}.calm .so{min-height:0;background:linear-gradient(180deg,#f6e9dc,#eedfd0)!important;padding-bottom:24px}.so-m{content-visibility:auto}}
/* contrast fixes from the Lighthouse pass */
.hp a{color:#0b5550!important}.chk small{opacity:1;color:#6b5d55}
.tl .done{opacity:1;background:#f6efe7;box-shadow:none}.tl .done .wk,.tl .done b{color:#5a4d45}.tl .done span{color:#5f534b}
/* v10: generic calculators and goal pages */
ul.tlist{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:10px}ul.tlist li{position:relative;padding-left:34px}ul.tlist li::before{content:"";position:absolute;left:4px;top:.45em;width:16px;height:16px;border-radius:50%;background:var(--x-c2);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.goal-over{display:block}.gplan{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.gplan a{display:flex;align-items:center;gap:12px;background:var(--x-soft);border-radius:18px;padding:12px 16px;color:var(--ink);text-decoration:none;font-weight:700;line-height:1.25}.gplan a:hover{background:#fff;box-shadow:var(--x-sh2)}.gplan i,.gsteps>li>i{font:800 18px var(--h);font-style:normal;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.gsteps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}.gsteps>li{display:grid;grid-template-columns:48px 1fr;gap:16px;background:#fff;border-radius:26px;padding:22px 24px;box-shadow:var(--x-sh2);scroll-margin-top:90px}.gsteps>li>i{width:48px;height:48px;font-size:22px}.gsteps h3{margin:4px 0 6px;font:700 22px/1.2 var(--h)}.gsteps p{margin:0 0 10px}.gs-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.gs-a span{font-size:14px;color:var(--sub)}
.goal-tops{grid-template-columns:repeat(4,1fr)}
.calc-form .bmi-row+.bmi-row{margin-top:14px}.calc-form .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.goal-tops{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.goal-tops{grid-template-columns:1fr}.gsteps>li{grid-template-columns:1fr;padding:20px}.gplan{grid-template-columns:1fr}}
/* v12: Soft Clay shelves, calculator cards, the coming soon marker and the info, sources and help panels */
.pebble{flex:none;display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff 0,var(--c1) 34%,var(--c2) 100%);box-shadow:inset -2px -3px 4px rgba(0,0,0,.12),0 4px 8px -4px var(--c2)}
.shelf-nav{list-style:none;margin:4px 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.shelf-nav a{display:inline-flex;align-items:center;gap:9px;padding:8px 10px 8px 9px;border-radius:999px;background:#fff;box-shadow:var(--x-sh2);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;line-height:1.2;transition:background .15s}
.shelf-nav a:hover{background:var(--x-soft)}
.shelf-nav a b{font-size:12.5px;font-weight:800;min-width:26px;text-align:center;padding:2px 8px;border-radius:999px;background:var(--x-soft);color:var(--x-acc)}
.shelves{display:grid;gap:24px}
.shelf{background:rgba(255,255,255,.5);border-radius:var(--x-rad);padding:24px 26px 26px;box-shadow:inset 0 0 0 1px rgba(130,60,20,.07);scroll-margin-top:24px}
.shelf-h{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin:0 0 18px}
.shelf-h .pebble{width:54px;height:54px;box-shadow:inset -4px -6px 10px rgba(0,0,0,.13),inset 3px 4px 6px rgba(255,255,255,.55),0 12px 18px -10px var(--c2)}
.shelf-tx h3{margin:0;font:var(--x-hw) 24px/1.15 var(--h)}.shelf-tx p{margin:4px 0 0;color:var(--sub);font-size:15.5px;line-height:1.45}
.shelf-n{margin:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.shelf-n b{font-size:13.5px;font-weight:800;padding:5px 13px;border-radius:999px;background:#fff;color:var(--x-acc);box-shadow:var(--x-sh2);white-space:nowrap}
.shelf-n span{font-size:12.5px;color:var(--sub);white-space:nowrap}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.cards .cc{display:flex;flex-direction:column;height:100%;padding:18px 20px 15px;background:#fff;border-radius:20px;box-shadow:var(--x-sh2);color:var(--ink);text-decoration:none;transition:transform .18s,box-shadow .18s}
.cards .cc:hover{transform:translateY(-3px);box-shadow:var(--x-sh)}
.cc:focus-visible,.shelf-nav a:focus-visible,.tops a:focus-visible,.pop a:focus-visible,.cat-l a:focus-visible,.src-l a:focus-visible,.help-l a:focus-visible{outline:3px solid var(--x-acc);outline-offset:3px}
.cards .cc-t{display:block;font:700 18px/1.25 var(--h);margin:0 0 6px;color:var(--ink)}
.cards .cc-d{display:block;flex:1;font-size:14.5px;line-height:1.45;color:var(--sub)}
.cards .cc-f{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:14px;padding-top:12px;border-top:1px dashed rgba(130,60,20,.14);font-size:13px}
.cards .cc-go{font-weight:800;color:var(--x-acc);font-size:14px}.cards .cc-go::after{content:" \2192"}
.cards .cc-x{font-size:12.5px;color:#7a6a5f}
.cards .cc-soon{background:#fdf8f3;box-shadow:inset 0 0 0 1px rgba(130,60,20,.09)}
.cards .cc-soon:hover{background:#fff;box-shadow:var(--x-sh2)}
.soon{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.01em;color:#7c5232;background:#f6e5d2;padding:4px 10px 4px 8px;border-radius:999px;white-space:nowrap}
.soon i{flex:none;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--x-c1) 45%,#c98a45 100%)}
.tops a.t-soon{background:#fdf8f3}.tops a.t-soon .soon{align-self:flex-start;margin-top:auto}
.pop .soon{display:flex;width:max-content;margin-top:8px}
.cat-l a.l-soon{background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.gs-a .soon{margin-right:2px}
.cards.rel{grid-template-columns:repeat(3,1fr)}
.panels{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;margin-top:6px}
.panel{background:#fff;border-radius:var(--x-rad);padding:26px 28px;box-shadow:var(--x-sh2);min-width:0;display:flex;flex-direction:column}
.panel h3{margin:0 0 10px;font:var(--x-hw) 22px/1.2 var(--h)}.panel p{margin:0 0 12px;font-size:15.5px;color:var(--sub)}
.panel .panel-k{display:inline-block;align-self:flex-start;margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--x-acc);background:var(--x-soft);padding:4px 11px;border-radius:999px}
.panel .panel-a{margin:auto 0 0}.btn-soft{background:var(--x-soft);color:var(--x-acc)!important;box-shadow:none;padding:11px 20px;font-size:15px}
.src-l,.help-l{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.src-l a,.help-l a{display:block;padding:10px 14px;border-radius:16px;background:#fbf5ee;text-decoration:none;color:var(--ink);transition:background .15s}
.src-l a:hover{background:var(--x-soft)}.src-l b,.help-l b{display:block;font-weight:700;font-size:15px}.src-l span,.help-l span{display:block;font-size:13.5px;color:var(--sub);line-height:1.35}
.panel .note{margin:auto 0 0;font-size:13.5px}
.panel-help{background:#d9f0e4}.panel-help p{color:#244a3a}.panel-help .panel-k{background:rgba(255,255,255,.7)}
.help-l a{background:rgba(255,255,255,.75)}.help-l a:hover{background:#fff}.help-l span{color:#2f5a49}
.calm .cards .cc:hover,.calm .shelf-nav a:hover{transform:none}.calm .panel-help{background:#e6efe9}.calm .soon{background:#f1e6da;color:#6e4a33}
@media(max-width:1100px){.panels{grid-template-columns:1fr 1fr}.panel-help{grid-column:1/-1}.cards.rel{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.shelf{padding:20px 16px 18px;border-radius:24px}.shelf-h{grid-template-columns:auto 1fr;gap:12px 14px}.shelf-h .pebble{width:42px;height:42px}.shelf-tx h3{font-size:21px}.shelf-n{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
.cards,.cards.rel{grid-template-columns:1fr;gap:10px}.cards .cc{padding:16px 16px 13px}.cards .cc-t{font-size:17px}
.shelf-nav{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:4px 16px 12px;scrollbar-width:none}.shelf-nav::-webkit-scrollbar{display:none}.shelf-nav a{white-space:nowrap}
.panels{grid-template-columns:1fr}.panel{padding:22px 20px}.panel-help{grid-column:auto}.tops a.t-soon .soon{white-space:normal}}
@media(prefers-reduced-motion:reduce){.cards .cc,.cards .cc:hover{transition:none;transform:none}}
/* v13: info pages, the suggestion form, result actions and print */
.doc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.doc{background:#fff;border-radius:var(--x-rad);padding:30px 34px;box-shadow:var(--x-sh2);min-width:0}
.doc-u{display:inline-block;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--x-acc);background:var(--x-soft);padding:4px 12px;border-radius:999px}
.doc-s{padding:18px 0;border-top:1px solid rgba(130,60,20,.09)}.doc-s:first-of-type{border-top:0}
.doc-s h2{margin:0 0 10px;font:var(--x-hw) 23px/1.2 var(--h)}.doc-s p,.doc-s li{font-size:16.5px;line-height:1.6}.doc-s ul{padding-left:20px;margin:8px 0}.doc-s li{margin:6px 0}
.doc-big{font:700 22px var(--h)}.doc-help{position:sticky;top:20px}
.doc-rel ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}.doc-rel h2{font:var(--x-hw) 20px var(--h);margin:0 0 12px}
.doc-rel a{display:inline-block;padding:9px 16px;border-radius:999px;background:#fff;box-shadow:var(--x-sh2);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}.doc-rel a:hover{background:var(--x-soft)}
.sm-l{columns:3 220px;column-gap:24px;padding-left:18px!important}.sm-l li{break-inside:avoid;font-size:15px!important;margin:3px 0!important}
.suggest{display:grid;gap:14px;max-width:560px;margin:14px 0}.suggest label{display:grid;gap:6px;font-weight:700;font-size:15px}
.suggest input,.suggest textarea,.suggest select{font:inherit;font-weight:400;padding:12px 14px;border-radius:14px;border:1px solid rgba(130,60,20,.2);background:#fdf9f4}
.suggest input:focus-visible,.suggest textarea:focus-visible,.suggest select:focus-visible{outline:3px solid var(--x-acc);outline-offset:2px}
.suggest-hint{color:#8a3b22;font-weight:700;margin:0}
.tmr-b{font:700 14px var(--f);padding:9px 16px;border-radius:999px;border:0;background:var(--x-acc);color:#fff;cursor:pointer;min-height:44px}.tmr-b:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.tmr-b.on{background:var(--ink)}.tmr{display:inline-block;margin-left:8px;font:700 18px var(--f);font-variant-numeric:tabular-nums}.tmr-n{display:block;margin-top:6px;font-size:13px;color:var(--sub)}.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.r-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed rgba(130,60,20,.16)}
.r-act button{font:700 13.5px var(--f);padding:8px 14px;border-radius:999px;border:0;background:var(--x-soft);color:var(--x-acc);cursor:pointer}.r-act button:hover{background:#fff;box-shadow:var(--x-sh2)}.r-act button:focus-visible{outline:3px solid var(--x-acc);outline-offset:2px}
@media(max-width:900px){.doc-wrap{grid-template-columns:1fr}.doc-help{position:static}}
@media(max-width:640px){.doc{padding:22px 18px}}
@media print{.top,.foot,.r-act,.shelf-nav,nav,.so,.rel,.faq,.stage-art,.ip:not(:has(.calc-out)){display:none!important}body{background:#fff}.calc-out{box-shadow:none!important;border:1px solid #ccc}}
.ins-tm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* v13 art: shelf pictures stand in for the clay chip where a shelf has its own piece */
.shelf-pic{width:56px;height:56px;border-radius:18px;flex:none;object-fit:cover;box-shadow:0 2px 6px rgba(80,60,40,.12)}
.shelf-nav .shelf-pic{width:26px;height:26px;border-radius:9px;box-shadow:none}
.help-pic{float:right;width:72px;height:72px;border-radius:22px;margin:0 0 8px 12px;box-shadow:0 2px 6px rgba(80,60,40,.12)}

/* v19: the hero picture lives in its own layer (::before) so the clay art can never meet the card that overlaps the
   bottom of the hero, or the heading and intro. Desktop: the layer stops --ov-gap above the 96px overlap. 641 to 1100 wide:
   the text takes the left 56% and the layer shows only the art end of the picture (the art sits in the right 35% of every
   stage picture, see data/art-bounds.json) in the right 44%. Phones: no picture layer; the art image sits between the text
   and the card with room for the 70px overlap. Checked at 390, 768, 1024, 1280 and 1440 by scripts/hero_overlap.py. */
.stage-sm{--ov-gap:18px;background-image:linear-gradient(180deg,var(--s1),var(--s2))!important}
.stage-sm::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background-image:var(--img);background-size:cover;background-position:right center;background-repeat:no-repeat;pointer-events:none}
.stage-ov::before{bottom:calc(96px + var(--ov-gap));-webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);mask-image:linear-gradient(180deg,#000 88%,transparent)}
@media(min-width:641px) and (max-width:1100px){
.stage-sm .stage-in{max-width:56%;padding-right:12px}
.stage-sm::before,.stage-ov::before{left:auto;right:0;width:44%;top:50%;bottom:auto;transform:translateY(-50%);aspect-ratio:1.183;background-size:286% auto;background-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%),linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%),linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}
.stage-ov::before{top:auto;transform:none;bottom:calc(96px + var(--ov-gap))}
.stage-ov{min-height:calc(130px + 38vw)}}
@media(max-width:640px){.stage-sm::before{display:none}.stage.stage-ov{padding-bottom:calc(70px + var(--ov-gap))}.stage.stage-ov .stage-art{margin-bottom:0!important;width:72%!important}}
/* v19 home hero: the clay cluster sits in the space to the right of the intro and BMI card (wider than 1100), sized so the
   whole cluster fits that space; narrower than that the card is full width, so the desktop picture is left out. */
.stage-home{background-image:linear-gradient(180deg,var(--s1),var(--s2))!important}
.stage-home::before{content:"";position:absolute;top:0;bottom:0;right:0;width:calc(100% - 740px);background-image:var(--img);background-repeat:no-repeat;background-size:200% auto;background-position:right 55%;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%),linear-gradient(180deg,transparent 12%,#000 30%,#000 80%,transparent 95%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%),linear-gradient(180deg,transparent 12%,#000 30%,#000 80%,transparent 95%);mask-composite:intersect}
@media(max-width:1100px){.stage-home::before{display:none}}
@media(min-width:641px) and (max-width:1100px){.stage-sm h1{font-size:clamp(36px,5.2vw,56px);-webkit-hyphens:auto;hyphens:auto}}
/* v20: keep the top nav on one line at tablet widths (768 wrapped onto two lines) */
.nav a{white-space:nowrap}
@media(min-width:641px) and (max-width:980px){.nav{gap:18px}.nav a{font-size:15px}.nav-n{display:none}.nav-cta{padding:10px 16px}}
@media(min-width:641px) and (max-width:760px){.nav{gap:12px}.nav a{font-size:14px}.nav-cta{padding:9px 12px}}
.top-in{gap:20px}
@media(min-width:641px) and (max-width:760px){.top .logo{font-size:20px;gap:10px}}

/* v23s header: hub links with icons and the All calculators mega menu (Ryan, 22 Oct) */
.top-in{gap:16px}.top .logo{flex:none}
.hubnav{flex:1;justify-content:flex-end;gap:6px;min-width:0;overflow:hidden}
.hubnav a{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 7px;border-radius:999px;font-size:15px;white-space:nowrap}
.hubnav a:hover{background:#fff}.hubnav img{width:26px;height:26px;border-radius:50%;flex:none}
.hubnav a[aria-current]{background:#fff;color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset}
.hubnav a:focus-visible,.mega-btn:focus-visible,.mega-panel a:focus-visible,.mega-x:focus-visible,.mega-find input:focus-visible,.mega-find button:focus-visible{outline:3px solid var(--x-acc);outline-offset:2px}
.hubnav a:nth-child(n+6){display:none}
@media(max-width:1239px){.hubnav a:nth-child(n+5){display:none}}
@media(max-width:1099px){.hubnav a:nth-child(n+4){display:none}}
@media(max-width:979px){.hubnav a:nth-child(n+3){display:none}}
@media(max-width:859px){.hubnav a:nth-child(n+2){display:none}}
@media(max-width:759px){.hubnav{display:none}}
.mega{flex:none;position:static}
.mega-btn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;font-weight:700;font-size:15px;padding:10px 18px;border-radius:999px;box-shadow:var(--x-btnsh);white-space:nowrap;min-height:44px;box-sizing:border-box}
.mega-btn::-webkit-details-marker{display:none}.mega-btn::marker{content:''}
.mega-btn span{display:inline-flex;align-items:center;gap:8px}.mx-ico{fill:currentColor;flex:none}
.mb-open-m,.mb-close,.mega[open] .mb-open,.mega[open] .mb-open-m{display:none!important}.mega[open] .mb-close{display:inline-flex!important}
.mega-panel{position:absolute;left:32px;right:32px;top:calc(100% + 4px);z-index:60;background:#fff;border-radius:var(--x-rad2);box-shadow:var(--x-sh),0 0 0 1px var(--line);padding:24px 28px;max-height:calc(100vh - 110px);overflow:auto;box-sizing:border-box}
.mega-find{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 18px}.mega-find label{font-weight:700}
.mf-row{display:flex;gap:8px;flex:1;min-width:220px}.mega-find input{flex:1;min-width:0;font:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg)}
.mega-find button{font:inherit;font-weight:700;padding:10px 18px;border:0;border-radius:999px;background:var(--teal);color:#fff;cursor:pointer}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px}
.mega-sec{display:flex;gap:12px;align-items:flex-start}.mega-sec img{width:44px;height:44px;border-radius:50%;flex:none}
.mega-sec b{display:block;font:700 17px/1.25 var(--h);margin:2px 0 6px}.mega-sec b a{color:var(--ink);text-decoration:none}.mega-sec b a[aria-current]{color:var(--teal)}
.mega-sec ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.35}.mega-sec li{margin:0 0 5px}.mega-sec li a{color:var(--sub);text-decoration:none}.mega-sec li a:hover{color:var(--teal);text-decoration:underline}
.mega-sec .mega-all a{color:var(--teal);font-weight:700}
.mega-more{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-weight:600}
.mega-x{display:none;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;font:inherit;font-weight:700;padding:12px;border:0;border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer;min-height:44px}
@media(max-width:1023px){.mega-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:759px){.mb-open{display:none!important}.mega:not([open]) .mb-open-m{display:inline-flex!important}}
@media(max-width:640px){.nav.hubnav{display:none}.mega-btn{padding:9px 14px}.mega-panel{position:fixed;left:8px;right:8px;top:76px;max-height:calc(100vh - 88px);padding:18px 16px}.mega-grid{grid-template-columns:1fr;gap:16px}.mega-x{display:flex}.top .logo{font-size:19px;gap:8px;min-width:0}.top .logo span:last-child{white-space:nowrap}}
@media(max-width:379px){.top .logo{font-size:17px}}

/* v23u homepage search as the star of Find the right calculator (Ryan, 22 Oct): big clay bar, magnifier, Search button, quick chips, listbox results */
.hsearch{max-width:720px;margin:26px auto 0}
.search.hs-bar{max-width:none;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 22px;background:#fff;border:2px solid #ead9c8;box-shadow:var(--x-sh),inset 0 2px 6px rgba(90,50,20,.08)}
.search.hs-bar:focus-within{border-color:var(--teal);box-shadow:var(--x-sh),0 0 0 4px rgba(20,110,100,.14)}
.hs-mag{flex:none;color:var(--teal)}
.search.hs-bar input{flex:1;min-width:0;text-align:left;font:600 21px var(--f);padding:14px 10px}
.hs-go{flex:none;font:700 18px var(--f);padding:15px 30px;border:0;border-radius:999px;background:var(--teal);color:#fff;cursor:pointer;box-shadow:var(--x-btnsh);min-height:52px}
.hs-go:hover{filter:brightness(1.08)}.hs-go:focus-visible,.chips a:focus-visible,.hsr:focus-visible{outline:3px solid var(--x-acc);outline-offset:3px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin:18px auto 0;max-width:720px}
.chips span{font-weight:700;color:var(--sub);font-size:15px}
.chips a{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border-radius:999px;background:#f6efe8;color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;box-shadow:inset 0 -2px 0 rgba(90,50,20,.1)}
.chips a:hover{background:#fff;color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset}
.find .results{max-width:720px;background:#fff;border-radius:var(--x-rad2);box-shadow:var(--x-sh),0 0 0 1px var(--line)}
.results [role=option]{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:8px 12px;border-radius:18px;color:var(--ink);font-weight:700;cursor:pointer}
.results [role=option]:hover,.results [aria-selected=true]{background:#fbf3ea}.results [aria-selected=true]{box-shadow:0 0 0 2px var(--teal) inset}
.qc a{color:var(--teal);font-weight:700}
.hsr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--teal);box-shadow:0 0 0 2px #ead9c8 inset}.hsr:hover{box-shadow:0 0 0 2px var(--teal) inset}.hsr .hs-mag{width:20px;height:20px}
@media(max-width:640px){.hsearch{margin-top:18px}.search.hs-bar{padding:6px 6px 6px 14px}.search.hs-bar input{font-size:17px;padding:11px 6px}.hs-go{font-size:16px;padding:12px 18px;min-height:46px}.hs-mag{width:20px;height:20px}.chips{justify-content:flex-start}.hsr{width:42px;height:42px}}
/* v23u facts: what each number looks like, and a whole-card link to the matching calculator */
.facts li{padding:0;display:flex}
.facts .fact-a{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:26px 28px;border-radius:30px;color:var(--ink);text-decoration:none}
.facts .fact-a:hover{box-shadow:0 0 0 2px var(--teal) inset}.facts .fact-a:focus-visible{outline:3px solid var(--x-acc);outline-offset:3px}
.facts .fact-w{display:block;font-style:normal;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(90,50,20,.14);color:#3d312b;font-size:15.5px;line-height:1.45}
.facts .fact-a i{margin-top:14px}
.facts .fact-go{display:inline-block;margin-top:auto;padding-top:14px;color:var(--teal);font-weight:700;font-size:15px}
.facts .fact-a:hover .fact-go{text-decoration:underline}
@media(max-width:479px){.hsr{display:none}}
.results[hidden]{display:none!important}.facts .fact-go span{display:inline}