/* =====================================================================
CURO — REDESIGN PREVIEW STYLESHEET (rd.css) v2 · 2026-09-01
Round 2 (Raven-inspired): cream ground, pastel gradient bands with
rounded edges, product-forward bento hero (no video), light everywhere
(no navy slabs), gradient hovers. Same words, same packshots.
===================================================================== */
:root{
--bg:#F7F4F0; /* warm cream ground (Raven-like) */
--paper:#FFFFFF;
--sand:#F1EBE3; /* soft sand panel */
--ink:#151A2C; /* deep navy-plum text */
--ink-2:#2A3147;
--slate:#4F5669;
--mute:#7E8595;
--blue:#0095FF; /* Curo blue — CTAs + emphasis only */
--blue-ink:#0757C8;
--blue-soft:#E3F1FF;
--lav:#BFD9FF; /* pastel set */
--lav-ink:#0757C8;
--peach:#FFB48A;
--peach-ink:#B85C2A;
--sky:#9CC9FF;
--mint:#BFE6C8;
--g-peach:linear-gradient(160deg,#FFE7D6 0%,#FFD2B6 100%);
--g-sky:linear-gradient(160deg,#EEF5FF 0%,#D6E7FF 100%);
--g-lav:linear-gradient(160deg,#E4EFFF 0%,#C6DDFF 100%);
--g-mint:linear-gradient(160deg,#E6F6EA 0%,#CDEBD6 100%);
--g-sand:linear-gradient(180deg,#F6F1EA 0%,#EDE5DA 100%);
--g-hover:linear-gradient(140deg,#FFF 0%,#EEF4FF 55%,#FFE9DB 100%);
--line:rgba(21,26,44,.08);
--line-2:rgba(21,26,44,.14);
--shadow-1:0 1px 2px rgba(21,26,44,.04),0 10px 30px -18px rgba(21,26,44,.18);
--shadow-2:0 2px 4px rgba(21,26,44,.05),0 30px 60px -30px rgba(21,26,44,.26);
--r-xl:32px; --r-lg:24px; --r-md:18px; --r-sm:12px;
--ease:cubic-bezier(.2,.7,.2,1);
--spring:cubic-bezier(.34,1.4,.64,1);
--display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
--body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--max:1280px;
--gutter:clamp(18px,4vw,48px);
--band:clamp(60px,7vw,104px);
--edge:clamp(8px,1.2vw,16px); /* rounded band inset from the viewport edge */
}
/* ---------- reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--bg);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;color:var(--ink)}
h1{font-weight:700}
h2{font-weight:700;font-size:clamp(32px,4.2vw,54px)}
h3{font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.wrap,.twrap{width:min(var(--max),calc(100% - var(--gutter)*2));margin-inline:auto}
.curo-skip{position:absolute;left:-999px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;z-index:100}
.curo-skip:focus{left:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.topbar{display:none}
::selection{background:var(--blue);color:#fff}
.eyebrow,.teye,.px-eye,.tc-ey{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin:0 0 18px}
.eyebrow::before,.teye::before,.px-eye::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
h2 span,h2 .cl,.section-title span{color:var(--blue);font-weight:inherit}
.section-copy,.pxg-sub,.cm-sub,.cp-sub,.hi-lead,.hpx-lead,.tsec-head p{font-size:18px;line-height:1.6;color:var(--slate);max-width:600px}
.section{padding:var(--band) 0;border:0}
/* ---------- rounded, tinted bands (Raven's section language) ---------- */
.rd-band{margin:var(--edge) var(--edge) 0;border-radius:var(--r-xl);padding:var(--band) 0}
.rd-white{background:var(--paper)}
.rd-sand{background:var(--g-sand)}
.rd-sky{background:var(--g-sky)}
.rd-lav{background:var(--g-lav)}
.rd-peach{background:var(--g-peach)}
.rd-mint{background:var(--g-mint)}
.rd-band .wrap,.rd-band .twrap{width:min(var(--max),calc(100% - var(--gutter)*2))}
/* --------- buttons --------- */
.btn,.tbtn,.cf-cta,.hi-primary,.wlc-btn,.hfaq-cta,.tc-cta,.nav .btn-white{
display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;
font:600 15px/1 var(--body);letter-spacing:0;text-transform:none;background:var(--ink);color:#fff;border:1px solid transparent;
transition:transform .28s var(--spring),background .25s,box-shadow .28s var(--ease),color .2s;will-change:transform;-webkit-tap-highlight-color:transparent;touch-action:manipulation;white-space:nowrap}
.btn:hover,.tbtn:hover,.cf-cta:hover,.hi-primary:hover,.wlc-btn:hover,.hfaq-cta:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(21,26,44,.45)}
.btn:active,.tbtn:active,.cf-cta:active,.hi-primary:active,.wlc-btn:active,.hfaq-cta:active,.tc-cta:active{transform:scale(.97)}
.btn-blue,.tbtn-primary,.hi-primary,.wlc-btn:not(.wlc-btn-ghost),.cf-cta,.nav .btn-white{background:var(--blue);color:#fff}
.btn-blue:hover,.tbtn-primary:hover,.hi-primary:hover,.cf-cta:hover,.nav .btn-white:hover{background:var(--blue-ink)}
.wlc-btn-ghost,.hi-link{background:transparent;color:var(--ink);border-color:var(--line-2)}
.hi-link{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;transition:background .2s,border-color .2s}
.hi-link:hover,.wlc-btn-ghost:hover{background:#fff;border-color:var(--ink)}
.tbtn .arr{transition:transform .28s var(--spring)}
.tbtn:hover .arr{transform:translateX(4px)}
/* =====================================================================
NAV
===================================================================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,244,240,.74);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid transparent;transition:transform .45s var(--ease),background .3s,border-color .3s}
.nav.is-stuck{background:rgba(247,244,240,.88);border-bottom-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;gap:22px;height:76px;transition:height .35s var(--ease)}
.nav.is-stuck .nav-in{height:62px}
.brand img{height:30px;width:auto;transition:height .35s var(--ease)}
.nav.is-stuck .brand img{height:26px}
.nav-ca{display:none;font:500 12px/1 var(--body);color:var(--slate);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);white-space:nowrap}
@media(min-width:1180px){.nav-ca{display:inline-flex}}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{position:relative;padding:10px 12px;border-radius:999px;font:500 15px/1 var(--body);color:var(--ink-2);transition:background .2s,color .2s}
.nav-links a:hover{background:rgba(255,255,255,.9);color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-links + .nav-actions{margin-left:0}
.nav-actions .fr{font:600 12px/1 var(--body);letter-spacing:.08em;color:var(--slate);padding:0 6px;cursor:pointer}
.nav-login{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);font:600 14px/1 var(--body);color:var(--ink);transition:background .2s,border-color .2s}
.nav-login svg{width:15px;height:15px}
.nav-login:hover{background:#fff;border-color:var(--ink)}
.nav .btn-white{min-height:44px;padding:0 18px;font-size:14px;background:var(--lav);color:var(--ink)}
.nav .btn-white:hover{background:#A6A2EE;color:var(--ink)}
.menu-btn,button.menu{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);font-size:18px;line-height:1;place-items:center}
.menu-btn svg,button.menu svg{width:20px;height:20px}
.mobile-menu,.mobile{display:none}
@media(max-width:1100px){
.nav-links,.nav-login{display:none}
.menu-btn,button.menu{display:grid}
.mobile-menu,.mobile{position:fixed;inset:0;z-index:60;background:var(--bg);padding:96px var(--gutter) 40px;display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .32s var(--ease),visibility .3s}
.mobile-menu.open,.mobile.open{opacity:1;transform:none;visibility:visible}
.mobile-menu a,.mobile a{font:700 clamp(26px,7vw,34px)/1.1 var(--display);letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.mobile-menu a.mob-login,.mobile a.mob-login{font:600 16px/1 var(--body);letter-spacing:0;margin-top:18px;border:0;color:var(--blue-ink)}
.mob-close{position:absolute;top:18px;right:var(--gutter);width:44px;height:44px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;background:#fff}
.mob-close svg{width:20px;height:20px}
body.mnav2-open .nav,body.mnav-open .nav{transform:none!important}
}
@media(max-width:480px){.nav .btn-white{padding:0 14px;font-size:13px}.nav-in{gap:12px}.brand img{height:26px}}
/* =====================================================================
HOMEPAGE HERO — to the point: headline row + product bento (no video)
===================================================================== */
.hero{position:relative;padding:clamp(28px,4vw,56px) 0 0}
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);column-gap:clamp(20px,4vw,64px);row-gap:0;align-items:end}
.hero .hero-grid > div{display:contents}
.hero .eyebrow{grid-column:1;grid-row:1;margin:0 0 14px}
.hero h1{grid-column:1;grid-row:2;font-size:clamp(38px,5.6vw,78px);line-height:1;letter-spacing:-.04em;max-width:14ch}
.hero h1 br{display:none}
.hero h1 span{color:var(--blue)}
.hero h1 .w{color:inherit;display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w > i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .9s var(--ease)}
.hero.in h1 .w > i,.rd:not(.js) .hero h1 .w > i{transform:none}
.hero .hero-grid p:not(.eyebrow){grid-column:2;grid-row:2;align-self:end;font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--slate);max-width:36ch;margin:0 0 6px}
.hero .btn{grid-column:2;grid-row:3;justify-self:start;margin-top:18px;min-height:52px;padding:0 26px;font-size:15px}
.hero-bento{margin-top:clamp(28px,3.5vw,44px)}
@media(max-width:900px){
.hero .hero-grid{grid-template-columns:1fr;gap:8px}
.hero .hero-grid p:not(.eyebrow){grid-column:1;grid-row:3;margin-top:14px}
.hero .btn{grid-column:1;grid-row:4}
.hero h1{font-size:clamp(34px,9.5vw,46px)}
}
/* the bento: WL (peach, pen) + SH (sky photo) on top; skin, hair, hormones, anti-aging below */
.tc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tc-banners{display:contents}
.tc-tiles{display:contents}
.tc-banner{position:relative;display:flex;align-items:flex-end;min-height:360px;padding:26px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tc-banner:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.tc-wl,.tc-sh{grid-column:span 2}
.tc-sk,.tc-hr{grid-column:span 1;min-height:250px;padding:20px}
.tc-stage{position:absolute;inset:0;z-index:0}
.tc-photo{width:100%;height:100%;object-fit:cover;object-position:60% 30%;transition:transform 1.1s var(--ease)}
.tc-banner:hover .tc-photo{transform:scale(1.04)}
.tc-wl{background:var(--g-peach)}
.tc-wl .tc-stage{display:grid;place-items:center;justify-items:end;padding:8% 6% 10% 0}
.tc-prod{position:relative;width:min(44%,270px);aspect-ratio:1;transition:transform .9s var(--ease)}
.tc-banner:hover .tc-prod{transform:translateY(-8px) rotate(-4deg)}
.tc-pen{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(120,60,20,.25))}
.tc-pill{position:absolute;width:26%;right:-2%;bottom:6%;filter:drop-shadow(0 10px 18px rgba(120,60,20,.2));animation:rdFloat 6s ease-in-out infinite alternate}
.tc-bg,.tc-wire,.tc-glass{display:none}
.tc-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(21,26,44,0) 45%,rgba(21,26,44,.66) 100%)}
.tc-scrim--wl{background:none}
.tc-copy{position:relative;z-index:2;display:grid;gap:8px;color:#fff;max-width:26ch}
.tc-wl .tc-copy{color:var(--ink);align-self:start}
.tc-wl{align-items:flex-start}
.tc-ey{color:rgba(255,255,255,.82);margin:0}
.tc-wl .tc-ey{color:var(--peach-ink)}
.tc-t{font:700 clamp(24px,2.4vw,32px)/1.05 var(--display);letter-spacing:-.03em}
.tc-sk .tc-t,.tc-hr .tc-t{font-size:clamp(20px,1.7vw,24px)}
.tc-cta{margin-top:10px;width:max-content;min-height:44px;padding:0 18px;background:#fff;color:var(--ink);font-size:14px}
.tc-sk .tc-cta,.tc-hr .tc-cta{min-height:40px;padding:0 14px;font-size:13px}
.tc-cta svg{width:16px;height:16px;transition:transform .3s var(--spring)}
.tc-banner:hover .tc-cta svg{transform:translateX(4px)}
.tc-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:250px;padding:22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s,background .4s}
.tc-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:transparent;background:var(--g-hover)}
.tc-tlabel{font:700 clamp(20px,1.7vw,24px)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink);order:2}
.tc-trender{order:1;flex:1;display:grid;place-items:center;min-height:120px}
.tc-trender img{max-height:140px;width:auto;filter:drop-shadow(0 16px 24px rgba(21,26,44,.16));transition:transform .6s var(--ease)}
.tc-tile:hover .tc-trender img{transform:translateY(-6px) rotate(-5deg)}
.tc-tchev{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink);transition:background .25s,color .25s,transform .35s var(--spring)}
.tc-tchev svg{width:18px;height:18px}
.tc-tile:hover .tc-tchev{background:var(--blue);color:#fff;transform:translateX(3px)}
@keyframes rdFloat{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-10px) rotate(4deg)}}
@media(max-width:900px){
.tc{grid-template-columns:1fr 1fr;gap:10px}
.tc-wl,.tc-sh{grid-column:span 2;min-height:280px}
.tc-sk,.tc-hr{min-height:220px}
.tc-tile{min-height:200px;padding:18px}
.tc-prod{width:min(50%,240px)}
}
@media(max-width:520px){.tc-banner{padding:18px}.tc-tile{min-height:180px}.tc-trender img{max-height:100px}}
/* quiz strip (the old quiz heading, now a slim lavender band) */
.quiz{padding:clamp(40px,5vw,64px) 0}
.quiz-head{position:relative;max-width:760px;margin:0 auto;text-align:center;display:grid;justify-items:center}
.quiz-head h2{font-size:clamp(28px,3.4vw,42px)}
.quiz .eyebrow{color:var(--lav-ink)}
.quiz .eyebrow::before{background:var(--lav-ink);box-shadow:0 0 0 4px rgba(91,88,168,.18)}
.cx-pict{display:none}
/* =====================================================================
MARQUEE
===================================================================== */
.marquee{position:relative;z-index:1;margin-top:clamp(28px,3.5vw,44px);padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:40px;width:max-content;animation:rdMarq 60s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font:600 14.5px/1 var(--body);color:var(--ink-2);white-space:nowrap}
.marquee__pill{width:18px;height:18px;opacity:.5}
@keyframes rdMarq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
/* =====================================================================
PROGRAMS — six product cards, pastel tint per card, gradient hover
===================================================================== */
.programs{padding:var(--band) 0}
.pxg-head{max-width:760px;margin-bottom:40px}
.pxg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pxg-card{position:relative;display:grid;grid-template-rows:1fr auto;min-height:330px;padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.pxg-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.pxg-tint{position:absolute;inset:0;z-index:-1;opacity:.55;transition:opacity .45s}
.pxg-card:nth-child(1) .pxg-tint{background:var(--g-peach)}
.pxg-card:nth-child(2) .pxg-tint{background:var(--g-sky)}
.pxg-card:nth-child(3) .pxg-tint{background:var(--g-lav)}
.pxg-card:nth-child(4) .pxg-tint{background:var(--g-mint)}
.pxg-card:nth-child(5) .pxg-tint{background:var(--g-sky)}
.pxg-card:nth-child(6) .pxg-tint{background:var(--g-peach)}
.pxg-card:hover .pxg-tint{opacity:1}
.pxg-shdw{position:absolute;left:50%;top:52%;width:46%;height:18px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(21,26,44,.22),transparent 70%);filter:blur(6px);transition:transform .5s var(--ease),opacity .5s}
.pxg-card:hover .pxg-shdw{transform:translateX(-50%) scale(.8);opacity:.6}
.pxg-card > svg{display:none}
.pxg-obj{position:relative;justify-self:center;align-self:center;max-height:180px;width:auto;filter:drop-shadow(0 20px 30px rgba(21,26,44,.18));transition:transform .6s var(--ease)}
.pxg-card:hover .pxg-obj{transform:translateY(-12px) rotate(-5deg) scale(1.04)}
.pxg-title{font:700 23px/1.1 var(--display);letter-spacing:-.03em;color:var(--ink);margin-top:16px;padding-right:56px}
.pxg-chev{position:absolute;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--ink);transition:background .25s,color .25s,transform .35s var(--spring)}
.pxg-chev svg{width:18px;height:18px}
.pxg-card:hover .pxg-chev{background:var(--blue);color:#fff;transform:translate(3px,-3px)}
@media(max-width:900px){.pxg-grid{grid-template-columns:1fr 1fr}.pxg-card{min-height:270px}.pxg-obj{max-height:140px}}
@media(max-width:520px){.pxg-grid{gap:10px}.pxg-card{min-height:220px;padding:16px}.pxg-obj{max-height:105px}.pxg-title{font-size:17px;padding-right:40px}.pxg-chev{width:36px;height:36px;right:14px;bottom:14px}}
/* =====================================================================
HOW CURO WORKS — pinned story (approved in round 1)
===================================================================== */
.chow{padding:var(--band) 0}
.ch-head{max-width:760px;margin-bottom:48px}
.ch-story{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.ch-grid{display:grid;gap:0;counter-reset:step}
.ch-card{position:relative;padding:10vh 0 10vh 34px;border-left:2px solid var(--line-2);counter-increment:step}
.ch-card::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:0;background:var(--blue);transition:height .6s var(--ease)}
.ch-card.is-on::before{height:100%}
.ch-card::after{content:counter(step,decimal-leading-zero);position:absolute;left:34px;top:calc(10vh - 34px);font:600 13px/1 var(--mono);letter-spacing:.08em;color:var(--mute)}
.ch-card.is-on::after{color:var(--blue-ink)}
.ch-card .ch-photo{display:none}
.ch-card h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;color:var(--ink);opacity:.32;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateX(-4px)}
.ch-card p{margin-top:12px;font-size:17px;color:var(--slate);max-width:36ch;opacity:.32;transition:opacity .5s var(--ease)}
.ch-card.is-on h3,.ch-card.is-on p{opacity:1;transform:none}
.ch-stage{position:sticky;top:96px;height:min(76vh,720px)}
.ch-stage-in{position:relative;height:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--sand);box-shadow:var(--shadow-1)}
.ch-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.ch-stage-img.is-on{opacity:1;transform:none}
.ch-stage-n{position:absolute;right:26px;bottom:22px;font:600 14px/1 var(--mono);letter-spacing:.1em;color:#fff;padding:12px 16px;border-radius:999px;background:rgba(21,26,44,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ch-stage-n::before{content:"0" attr(data-n) " / 04"}
.ch-rail{display:none}
@media(max-width:900px){
.ch-story{grid-template-columns:1fr}
.ch-stage{display:none}
.ch-grid{gap:14px}
.ch-card{padding:0;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-lg);overflow:hidden}
.ch-card::before{display:none}
.ch-card::after{left:auto;right:16px;top:16px;color:#fff;background:rgba(21,26,44,.5);padding:8px 10px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ch-card .ch-photo{display:block;aspect-ratio:16/9;overflow:hidden}
.ch-card .ch-photo img{width:100%;height:100%;object-fit:cover}
.ch-card h3{padding:18px 20px 0;font-size:22px;opacity:1;transform:none}
.ch-card p{padding:0 20px 20px;opacity:1;margin-top:8px}
}
/* =====================================================================
SPLIT — patient experience (sand band, photo card)
===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.rd-band{padding-left:var(--gutter);padding-right:var(--gutter)}
.split > *{max-width:calc(var(--max)/2)}
.split-copy{order:2;position:relative;justify-self:start}
.split-copy h2{margin-bottom:18px}
.split-copy > p:not(.eyebrow){font-size:18px;color:var(--slate);max-width:48ch}
.number-grid{margin-top:34px;display:grid;border-top:1px solid var(--line-2)}
.number-grid > div{display:flex;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.number-grid b{font:600 14px/1 var(--mono);letter-spacing:.1em;color:var(--blue-ink)}
.number-grid span{font:700 clamp(18px,1.6vw,22px)/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.split-image{order:1;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.2;justify-self:end;width:100%}
.split-image img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.06)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split > *{max-width:none}.split-image{aspect-ratio:4/3.2}}
/* =====================================================================
FIRST MONTH — centred pen + horizontal timeline (the round-1 layout
the client preferred, on a sky band)
===================================================================== */
.cmonth .wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.cm-head{max-width:760px;margin-bottom:8px;display:grid;justify-items:center}
.cm-sub{text-align:center;margin-top:14px}
.cm-stage{position:relative;width:min(100%,720px);aspect-ratio:16/8;display:grid;place-items:center;margin-top:10px}
.cm-glow{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.9),rgba(0,149,255,.18) 60%,transparent 72%);filter:blur(18px)}
.cm-pen{position:relative;max-height:96%;width:auto;filter:drop-shadow(0 40px 50px rgba(21,26,44,.28))}
.cm-shadow{position:absolute;bottom:6%;left:50%;width:36%;height:14px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(21,26,44,.22),transparent 70%);filter:blur(6px)}
.cm-line{position:relative;width:100%;min-width:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:34px;margin-top:8px}
.cm-line::before{content:"";position:absolute;left:8%;right:8%;top:47px;border-top:2px dashed rgba(21,26,44,.22)}
.cm-prog{position:absolute;left:8%;top:46px;height:3px;width:0;background:var(--blue);border-radius:2px;max-width:84%}
.cm-node{position:relative;display:grid;justify-items:center;gap:10px}
.cm-chip{order:1;font:600 13px/1 var(--body);color:var(--ink);padding:10px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);position:relative;z-index:2;margin-top:-34px;transition:background .3s,color .3s,border-color .3s}
.cm-node.is-on .cm-chip{background:var(--ink);color:#fff;border-color:transparent}
.cm-dot{order:2;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--line-2);display:grid;place-items:center;transition:border-color .3s,box-shadow .3s}
.cm-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;transition:background .3s}
.cm-node.is-on .cm-dot{border-color:var(--blue);box-shadow:0 0 0 6px rgba(0,149,255,.15)}
.cm-node.is-on .cm-dot::after{background:var(--blue)}
.cm-lab{order:3;font:500 16px/1.35 var(--body);color:var(--ink);max-width:20ch;text-align:center}
@media(max-width:700px){.cm-line{grid-template-columns:1fr 1fr;gap:26px 12px}.cm-line::before,.cm-prog{display:none}.cm-chip{margin-top:0}.cm-stage{aspect-ratio:4/3}.cm-pen{max-height:90%}}
/* =====================================================================
PRIVACY — light lavender band, photo card right, glass cards
===================================================================== */
.cpriv{position:relative;overflow:hidden;isolation:isolate}
.cp-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(24px,4vw,64px);align-items:center}
.cp-bg{grid-column:2;grid-row:1/3;width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 40%;border-radius:var(--r-lg);position:static;box-shadow:var(--shadow-1)}
.cp-shade,.cp-emblem{display:none}
.cp-head{grid-column:1;grid-row:1}
.cp-head h2{max-width:14ch}
.cp-sub{margin-top:14px}
.cp-grid{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px;max-width:560px}
.cp-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-md);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,transform .4s var(--ease),box-shadow .4s}
.cp-card:hover{background:#fff;transform:translateX(4px);box-shadow:var(--shadow-1)}
.cp-card svg{flex:0 0 26px;width:26px;height:26px;color:var(--lav-ink)}
.cp-card p{font:500 16px/1.4 var(--body);color:var(--ink)}
.cpriv .wrap{position:relative}
@media(max-width:860px){.cp-wrap{grid-template-columns:1fr}.cp-bg{grid-column:1;grid-row:1;aspect-ratio:16/10}.cp-head{grid-row:2}.cp-grid{grid-row:3}}
/* =====================================================================
FAQ
===================================================================== */
.faq-section{padding:var(--band) 0}
.faq-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-grid > div:first-child{position:sticky;top:110px}
.faq-grid > div:first-child p:not(.eyebrow){margin-top:16px;font-size:18px;color:var(--slate);max-width:40ch}
.faq-grid details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px;padding:0 22px;transition:background .3s,border-color .3s}
.faq-grid details:hover{border-color:var(--lav)}
.faq-grid details[open]{background:var(--g-hover)}
.faq-grid summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;font:700 clamp(17px,1.5vw,20px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::after{content:"";flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--bg) url("data:image/svg+xml;utf8,") center/18px no-repeat;transition:transform .35s var(--spring),background-color .25s}
.faq-grid details[open] summary::after{transform:rotate(45deg);background-color:#fff}
.faq-grid details > p,.faq-grid .rd-acc > p{padding:0 60px 22px 0;font-size:16.5px;line-height:1.6;color:var(--slate);max-width:60ch}
.faq-grid details .rd-acc{overflow:hidden}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-grid > div:first-child{position:static}}
/* =====================================================================
PRICING — peach band, receipt as a paper object
===================================================================== */
.pricing{position:relative;overflow:hidden;isolation:isolate}
.pricing-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,6vw,96px);align-items:center}
.pricing-grid > div:first-child p:not(.eyebrow){margin-top:20px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:50ch}
.pricing .eyebrow{color:var(--peach-ink)}
.pricing .eyebrow::before{background:var(--peach-ink);box-shadow:0 0 0 4px rgba(184,92,42,.18)}
.wx-pw,.wx-pict{display:none}
.receipt{position:relative;justify-self:center;width:min(100%,420px);padding:30px 30px 34px;border-radius:14px;background:#fff;color:var(--ink);transform:rotate(-1.5deg);box-shadow:0 40px 80px -30px rgba(120,60,20,.45),0 2px 0 rgba(255,255,255,.6) inset;transition:transform .5s var(--ease)}
.receipt:hover{transform:rotate(0deg) translateY(-4px)}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:12px;background:radial-gradient(circle at 8px -2px,transparent 8px,#fff 8.5px) 0 0/16px 12px repeat-x}
.receipt h3{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding-bottom:16px;border-bottom:1px dashed var(--line-2)}
.receipt-logo{height:18px;width:auto}
.receipt-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:15.5px;color:var(--slate);opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.receipt.in .receipt-row,.rd:not(.js) .receipt-row{opacity:1;transform:none}
.receipt-row strong{font:600 13px/1 var(--mono);letter-spacing:.04em;color:#2E7D4F;padding:6px 10px;border-radius:999px;background:#E3F5E8}
.receipt-total{border:0;padding-top:18px;font-weight:700;color:var(--ink);font-size:17px}
.receipt-total strong{font:800 17px/1 var(--display);letter-spacing:-.02em;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr}.receipt{transform:rotate(-1deg)}}
/* =====================================================================
FOOTER — light lavender, dark logo, giant wordmark
===================================================================== */
footer{position:relative;margin:var(--edge);border-radius:var(--r-xl);background:var(--g-lav);color:var(--ink);padding:var(--band) 0 0;overflow:hidden}
.cf-glass{padding-bottom:40px}
.cf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.cf-brand .brand img{height:30px;width:auto}
.cf-tag{margin-top:22px;max-width:36ch;color:var(--ink-2);font-size:16px}
.cf-cta{margin-top:24px}
.cf-mail{display:inline-flex;align-items:center;gap:8px;margin-top:22px;color:var(--ink-2);font-size:15px}
.cf-mail svg{width:16px;height:16px}
.cf-soc{display:flex;gap:8px;margin-top:20px}
.cf-soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(21,26,44,.16);transition:background .2s}
.cf-soc a:hover{background:rgba(255,255,255,.7)}
.cf-soc svg{width:18px;height:18px}
.cf-col{display:grid;gap:10px;align-content:start}
.cf-col h4{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--lav-ink);margin-bottom:8px}
.cf-col a{font-size:15px;color:var(--ink-2);width:max-content;transition:color .2s}
.cf-col a:hover{color:var(--blue-ink)}
.cf-rule{height:1px;background:rgba(21,26,44,.12);margin:44px 0 24px}
.cf-legal{display:grid;gap:10px;font-size:13px;line-height:1.55;color:var(--slate);max-width:900px}
.cf-legal a{color:var(--ink-2)}
.cf-giant{margin-top:24px;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.cf-giant img{width:110%;max-width:none;margin-left:-5%;opacity:.12;transform:translateY(18%)}
@media(max-width:860px){.cf-grid{grid-template-columns:1fr 1fr}.cf-brand{grid-column:1/-1}}
/* =====================================================================
QUIZ MODAL
===================================================================== */
.qmodal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px}
.qmodal[hidden]{display:none}
.qmodal-bg{position:absolute;inset:0;background:rgba(21,26,44,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:qmfade .25s ease}
.qmodal-card{position:relative;width:min(960px,96vw);height:min(90vh,920px);background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 50px 100px -30px rgba(2,10,25,.6);display:flex;flex-direction:column;animation:qmpop .35s var(--spring)}
.qmodal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px 13px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.qmodal-brand{display:inline-flex;align-items:center;gap:10px;font:800 15px/1 var(--display);color:var(--ink)}
.qmodal-brand img{height:22px;width:auto}
.qmodal-acts{display:flex;align-items:center;gap:8px}
.qmodal-restart{border:1px solid var(--line-2);border-radius:999px;padding:0 15px;min-height:40px;font:600 13px var(--body);color:var(--slate);background:#fff}
.qmodal-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:#fff;color:var(--slate);font-size:15px}
.qmodal-x:hover{background:var(--blue-soft);color:var(--ink);border-color:var(--blue)}
.qmodal-frame{flex:1 1 auto;width:100%;border:0;background:var(--bg)}
@keyframes qmfade{from{opacity:0}to{opacity:1}}
@keyframes qmpop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
body.qmodal-open{overflow:hidden}
@media(max-width:640px){.qmodal{padding:0}.qmodal-card{width:100vw;height:100dvh;border-radius:0}}
/* =====================================================================
REVEAL GRAMMAR
===================================================================== */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.js .reveal.on{opacity:1;transform:none}
.js .pxg-card.reveal:nth-child(2),.js .cp-card.reveal:nth-child(2){transition-delay:.06s}
.js .pxg-card.reveal:nth-child(3),.js .cp-card.reveal:nth-child(3){transition-delay:.12s}
.js .pxg-card.reveal:nth-child(4){transition-delay:.18s}
.js .pxg-card.reveal:nth-child(5){transition-delay:.24s}
.js .pxg-card.reveal:nth-child(6){transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
.js .reveal{opacity:1;transform:none;transition:none}
.hero h1 .w > i{transform:none!important;transition:none}
.tc-pill{animation:none}
*{scroll-behavior:auto!important}
}
/* =====================================================================
===================== TREATMENT PAGE (weight loss) ================
===================================================================== */
.crumb{display:flex;gap:10px;align-items:center;padding:18px 0 0;font:500 13px/1 var(--body);color:var(--mute)}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.5}
/* hero: copy left, pens on a sky card right */
.thero{position:relative;padding:clamp(22px,3vw,40px) 0 0}
.bloom{display:none}
.thero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center}
.curoseal{display:none}
.thero-copy{display:grid;justify-items:start}
.thero-copy .teye{padding:9px 14px 9px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.thero h1{font-size:clamp(36px,5.2vw,68px);line-height:1;letter-spacing:-.04em;text-transform:none;max-width:12ch}
.thero h1 .cl{color:var(--blue)}
.thero .sub{margin-top:22px;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--slate);max-width:52ch}
.thero .tbtn{margin-top:26px;min-height:54px;padding:0 28px;font-size:16px}
.thero-note{margin-top:14px;font-size:14px;color:var(--mute)}
.thero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tchip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font:500 13.5px/1 var(--body);color:var(--ink-2)}
.tchip i{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.tchip .ca-flag{width:14px;height:10px;border-radius:2px;background:linear-gradient(90deg,#e11 0 25%,#fff 25% 75%,#e11 75%)}
.thero-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/11;background:var(--g-sky);box-shadow:var(--shadow-1)}
.thero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;mix-blend-mode:multiply;transform:scale(1.02)}
@media(max-width:900px){.thero-in{grid-template-columns:1fr}.thero-photo{order:-1;aspect-ratio:16/10}.thero h1{font-size:clamp(32px,9vw,44px)}}
.strap-in{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;width:min(var(--max),calc(100% - var(--gutter)*2));margin:clamp(24px,3.5vw,40px) auto 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strap-in span{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--body);color:var(--ink-2)}
.strap-pict{width:30px;height:30px;object-fit:contain}
@media(max-width:700px){.strap-in{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;justify-items:start}.strap-in span{font-size:13px}}
.hintro{position:relative;padding:var(--band) 0;overflow-x:clip}
.wl-pen-a,.wl-pen-b{position:absolute;top:50%;width:clamp(120px,14vw,220px);height:auto;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(21,26,44,.18));z-index:0}
.wl-pen-a{left:max(0px,calc((100% - var(--max))/2 - 120px));transform:translateY(-50%) rotate(-14deg)}
.wl-pen-b{right:max(0px,calc((100% - var(--max))/2 - 120px));transform:translateY(-40%) rotate(16deg)}
.hi-wrap{position:relative;z-index:1}
.hi-copy{max-width:720px;margin:0 auto;text-align:center;display:grid;justify-items:center}
.hi-copy h2{margin-bottom:22px}
.hi-lead{text-align:center;margin:0 auto 18px}
.hi-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
@media(max-width:900px){.wl-pen-a,.wl-pen-b{display:none}}
/* BMI — Raven-style: one photo card, glass panel with sliders + big number */
.bmi-sec{position:relative;overflow:hidden}
.band-photo,.band-scrim{display:none}
.bmi-sec .twrap{display:grid;gap:28px}
.bmi-sec .tsec-head{max-width:760px}
.bmi-sec .tsec-head p{margin-top:14px}
.bmi-box{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:#fff;
background:url("../images/px/wl-meterbg.webp") center 30%/cover no-repeat;min-height:420px}
.bmi-box::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(40,22,10,.82) 0%,rgba(40,22,10,.55) 55%,rgba(40,22,10,.35) 100%);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.bf{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label val" "range range";gap:12px 16px;align-items:center;padding:18px;border-radius:var(--r-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.bf label{grid-area:label;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.bf input[type=number]{grid-area:val;width:110px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);font:700 22px/1 var(--display);color:#fff;letter-spacing:-.02em;text-align:right;-moz-appearance:textfield;transition:border-color .2s,background .2s}
.bf input[type=number]::-webkit-outer-spin-button,.bf input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.bf input[type=number]::placeholder{color:rgba(255,255,255,.45)}
.bf input[type=number]:focus{outline:0;border-color:var(--mint);background:rgba(255,255,255,.16)}
.bmi-range{grid-area:range;width:100%;height:14px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;--p:50%}
.bmi-range::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--mint) 0 var(--p),rgba(255,255,255,.18) var(--p) 100%)}
.bmi-range::-moz-range-track{height:14px;border-radius:999px;background:rgba(255,255,255,.18)}
.bmi-range::-moz-range-progress{height:14px;border-radius:999px;background:var(--mint)}
.bmi-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-10px;border-radius:50%;background:#fff;border:0;box-shadow:0 4px 14px rgba(0,0,0,.35);background-image:url("data:image/svg+xml;utf8,");background-size:16px;background-position:center;background-repeat:no-repeat;transition:transform .2s var(--spring)}
.bmi-range::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;border:0;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.bmi-range:active::-webkit-slider-thumb{transform:scale(1.1)}
.bres{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:12px 32px;align-items:center;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.bnum{font:700 clamp(48px,6vw,88px)/1 var(--display);letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.btxt{font-size:15px;line-height:1.55;color:rgba(255,255,255,.85);max-width:52ch}
@media(max-width:860px){.bmi-box{grid-template-columns:1fr}.bres{grid-template-columns:1fr}.bnum{font-size:clamp(44px,12vw,64px)}}
.winfo h2{max-width:760px;margin-bottom:40px}
.winfo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.winfo-grid h3{font-size:22px;margin:0 0 10px;padding-top:22px;border-top:1px solid var(--line-2)}
.winfo-grid > div > h3:first-child{border-top:0;padding-top:0}
.winfo-grid p{font-size:17px;line-height:1.6;color:var(--slate);margin-bottom:26px;max-width:52ch}
.wk{padding:22px 24px;border-radius:var(--r-md);background:var(--g-peach);color:var(--ink);font-size:16px;line-height:1.55}
@media(max-width:800px){.winfo-grid{grid-template-columns:1fr}}
/* brand meds — pastel tints per card, gradient hover */
.hprod{padding:var(--band) 0}
.hpx-head{max-width:760px;margin-bottom:36px}
.hpx-head h2{margin-bottom:16px}
.hpx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hpx{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;gap:6px;min-height:390px;padding:24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.hpx::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;transition:opacity .45s}
.hpx:nth-child(1)::before{background:var(--g-sky)}
.hpx:nth-child(2)::before{background:var(--g-lav)}
.hpx:nth-child(3)::before{background:var(--g-mint)}
.hpx:nth-child(4)::before{background:var(--g-peach)}
.hpx:nth-child(5)::before{background:var(--g-sky)}
.hpx:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.hpx:hover::before{opacity:1}
.hpx-chip{width:max-content;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.85)}
.hpx h3{font-size:26px;margin-top:8px}
.hpx-price{font-size:14.5px;color:var(--slate);max-width:26ch}
.hpx-art2{align-self:end;justify-self:center;display:grid;place-items:center;width:100%;height:200px;margin-top:10px}
.hpx-art2 img{max-height:190px;width:auto;filter:drop-shadow(0 24px 30px rgba(21,26,44,.2));transition:transform .6s var(--ease)}
.hpx:hover .hpx-art2 img{transform:translateY(-10px) rotate(-4deg)}
.hpx-go{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--ink);transition:background .25s,color .25s,transform .35s var(--spring)}
.hpx-go svg{width:18px;height:18px}
.hpx:hover .hpx-go{background:var(--blue);color:#fff;transform:translate(3px,-3px)}
.hpx-alt{background:var(--ink);color:#fff;border-color:transparent}
.hpx-alt::before{background:var(--g-lav);opacity:.16}
.hpx-alt:hover::before{opacity:.28}
.hpx-alt h3{color:#fff}
.hpx-alt .hpx-price{color:rgba(255,255,255,.75)}
.hpx-alt .hpx-chip{background:rgba(255,255,255,.14);color:#fff}
.hpx-alt .hpx-go{background:rgba(255,255,255,.14);color:#fff}
.hpx-ledger{align-items:end}
.lgr{display:grid;width:100%;padding:16px 18px;border-radius:14px;background:#fff;color:var(--ink);transform:rotate(-2deg);box-shadow:0 20px 40px -20px rgba(0,0,0,.5);transition:transform .5s var(--ease)}
.hpx-alt:hover .lgr{transform:rotate(0deg) translateY(-4px)}
.lgr-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--slate)}
.lgr-row i{font-style:normal}
.lgr-row b{font:600 11px/1 var(--mono);color:#2E7D4F}
.lgr-total{border:0;padding-top:10px;font-weight:700;color:var(--ink)}
.lgr-total b{font:800 12px/1 var(--display);color:var(--ink)}
.hpx-foot{margin-top:22px;font-size:13.5px;line-height:1.55;color:var(--mute);max-width:80ch}
@media(max-width:900px){.hpx-grid{grid-template-columns:1fr 1fr}.hpx{min-height:340px}.hpx-art2{height:160px}.hpx-art2 img{max-height:150px}}
@media(max-width:560px){.hpx-grid{grid-template-columns:1fr}}
/* journey — mint band, numbered rail */
.tl-sec .tsec-head{max-width:760px;margin-bottom:40px}
.tl-sec .tsec-head p{margin-top:14px}
.tl-grid{position:relative;list-style:none;margin:0;padding:34px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tl-grid::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(21,26,44,.14)}
.tl-prog{position:absolute;left:0;top:0;height:2px;width:0;background:var(--ink)}
.tl-grid li{position:relative;display:grid;gap:8px;padding:24px;border-radius:var(--r-lg);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);opacity:.55;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s,box-shadow .4s}
.tl-grid li:hover{background:#fff;box-shadow:var(--shadow-1)}
.tl-grid li.is-on,.rd:not(.js) .tl-grid li{opacity:1;transform:none}
.tl-grid li::before{content:"";position:absolute;left:24px;top:-41px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid rgba(21,26,44,.2);transition:background .3s,border-color .3s}
.tl-grid li.is-on::before{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 5px rgba(21,26,44,.1)}
.tl-grid img{width:56px;height:56px;object-fit:contain}
.tl-grid b{font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#2E7D4F;margin-top:6px}
.tl-grid h3{font-size:21px}
.tl-grid p{font-size:15.5px;line-height:1.55;color:var(--slate)}
@media(max-width:900px){.tl-grid{grid-template-columns:1fr 1fr}.tl-grid::before,.tl-prog,.tl-grid li::before{display:none}.tl-grid li{opacity:1;transform:none}}
@media(max-width:520px){.tl-grid{grid-template-columns:1fr}}
/* expert care (lavender card) + FAQ */
.hfaq{padding:var(--band) 0}
.wlc-wrap{position:relative;padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);border-radius:var(--r-xl);background:var(--g-lav);color:var(--ink);overflow:hidden;isolation:isolate;margin-bottom:var(--band)}
.wlc-pen{position:absolute;width:clamp(120px,14vw,230px);height:auto;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(60,50,120,.3))}
.wlc-pen-a{right:14%;top:-6%;transform:rotate(18deg)}
.wlc-pen-b{right:4%;bottom:-10%;transform:rotate(-12deg)}
.wlc-head{position:relative;max-width:560px;display:grid;justify-items:start}
.wlc-head p{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.wlc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.wlc-btn:not(.wlc-btn-ghost){background:var(--ink)}
.wlc-btn:not(.wlc-btn-ghost):hover{background:var(--blue-ink)}
.hfaq-wrap{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);gap:clamp(28px,5vw,80px);align-items:start}
.hfaq-left{position:sticky;top:110px;display:grid;justify-items:start}
.hfaq-left h2{margin-bottom:16px}
.hfaq-left p{font-size:18px;color:var(--slate);max-width:40ch}
.hfaq-cta{margin-top:22px;background:var(--ink)}
.hfaq-card{display:grid;gap:10px}
.hfq{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:0 22px;transition:background .3s,border-color .3s}
.hfq:hover{border-color:var(--lav)}
.hfq.open{background:var(--g-hover)}
.hfq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;text-align:left;font:700 clamp(17px,1.5vw,20px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.hfq-x{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--bg) url("data:image/svg+xml;utf8,") center/18px no-repeat;transition:transform .35s var(--spring),background-color .25s}
.hfq.open .hfq-x{transform:rotate(45deg);background-color:#fff}
.hfq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.hfq.open .hfq-a{grid-template-rows:1fr}
.hfq-a > p{overflow:hidden;padding:0 60px 0 0;font-size:16.5px;line-height:1.6;color:var(--slate);max-width:60ch;opacity:0;transition:opacity .35s var(--ease),padding .35s var(--ease)}
.hfq.open .hfq-a > p{opacity:1;padding-bottom:22px}
@media(max-width:860px){.hfaq-wrap{grid-template-columns:1fr}.hfaq-left{position:static}.wlc-pen{display:none}}
/* explore other treatments */
.px-head{max-width:760px;margin-bottom:36px}
.px-tcards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.px-tcard{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-lg);overflow:hidden;background:var(--bg);border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s,background .4s}
.px-tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:transparent;background:var(--g-hover)}
.px-tcard-img{display:block;aspect-ratio:4/3.4;overflow:hidden;background:var(--g-peach)}
.px-tcard-img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform 1s var(--ease)}
.px-tcard:hover .px-tcard-img img{transform:scale(1.06)}
.px-tcard-body{display:grid;gap:4px;padding:16px 18px 20px}
.px-tcard-body b{font:700 18px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.px-tcard-body em{font-style:normal;font-size:13.5px;color:var(--slate)}
.px-tcard-go{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s,transform .35s var(--spring)}
.px-tcard-go svg{width:16px;height:16px}
.px-tcard:hover .px-tcard-go{background:var(--blue);color:#fff;transform:translate(2px,-2px)}
@media(max-width:1000px){.px-tcards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.px-tcards{grid-template-columns:1fr 1fr}}
/* ISI + sticky CTA */
.tisi{margin:40px auto 0;width:min(var(--max),calc(100% - var(--gutter)*2));border-top:1px solid rgba(21,26,44,.12);padding:22px 0 24px}
.isi-d summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font:600 14px/1 var(--body);color:var(--ink);padding:10px 0}
.isi-d summary::-webkit-details-marker{display:none}
.isi-x{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.7) url("data:image/svg+xml;utf8,") center/16px no-repeat;transition:transform .3s var(--spring)}
.isi-d[open] .isi-x{transform:rotate(45deg)}
.isi-body{padding-top:12px;font-size:13px;line-height:1.6;color:var(--slate);max-width:100ch}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));display:flex;justify-content:center;transform:translateY(120%);transition:transform .45s var(--ease);pointer-events:none}
.sticky.is-on{transform:none;pointer-events:auto}
.sticky .tbtn{min-height:52px;padding:0 26px;box-shadow:0 20px 40px -14px rgba(0,149,255,.6)}
.sticky .cap-i{font-style:normal;display:none}
@media(min-width:861px){.sticky{justify-content:flex-end}}
/* ===== v3 (round 3) ===== */
.rd-blue{background:var(--g-lav)}
.nav .btn-white{background:var(--blue);color:#fff}
.nav .btn-white:hover{background:var(--blue-ink);color:#fff}
.quiz .eyebrow{color:var(--blue-ink)}
.quiz .eyebrow::before{background:var(--blue);box-shadow:0 0 0 4px rgba(0,149,255,.18)}
.cp-card svg{color:var(--blue-ink)}
.cf-col h4{color:var(--blue-ink)}
.wlc-wrap{background:var(--g-sky)}
.wlc-pen{filter:drop-shadow(0 30px 40px rgba(21,60,120,.28))}
.hpx-alt::before{background:var(--g-sky)}
.faq-grid details:hover,.hfq:hover{border-color:var(--sky)}
/* hero accent word: typewriter caret */
.hero h1 .fx-type{display:inline;white-space:nowrap}
.hero h1 .fx-type::after{content:"";display:inline-block;width:.06em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--blue);border-radius:2px;animation:rdCaret 1s steps(1) infinite}
.hero h1 .fx-type.is-typing::after{animation:none}
@keyframes rdCaret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero h1 .fx-type::after{display:none}}
/* the client's 3D icons, seated at the right end of the eyebrow row (as on live) */
.cx-pict{display:block;position:absolute;right:0;top:-10px;width:76px;height:76px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 20px rgba(21,66,134,.18));animation:rdIcoFloat 6s ease-in-out infinite alternate}
.quiz-head,.split-copy,.faq-grid > div:first-child,.pricing-grid > div:first-child{position:relative}
.quiz-head .cx-pict{position:static;margin:0 auto 10px;width:64px;height:64px}
.split-copy .cx-pict{top:-4px;right:8px}
.wx-pw{display:block;position:absolute;right:0;top:-10px}
.wx-pict{display:block;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(21,66,134,.18));animation:rdIcoFloat 6s ease-in-out infinite alternate}
@keyframes rdIcoFloat{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg)}}
@media(max-width:900px){.cx-pict,.wx-pict{width:54px;height:54px}.split-copy .cx-pict{right:0}}
@media(prefers-reduced-motion:reduce){.cx-pict,.wx-pict{animation:none}}
/* first month: smaller pen that floats; tilts toward the cursor (rd.js) */
.cm-stage{aspect-ratio:16/6;perspective:900px;cursor:pointer}
.cm-pen{max-height:82%;transform-style:preserve-3d;will-change:transform}
.cm-stage.is-live .cm-pen{animation:rdPenFloat 5.5s ease-in-out infinite alternate}
@keyframes rdPenFloat{from{translate:0 -8px}to{translate:0 10px}}
.cm-glow{width:40%;opacity:.9}
.cm-shadow{bottom:4%;width:30%;animation:rdShadow 5.5s ease-in-out infinite alternate}
@keyframes rdShadow{from{transform:translateX(-50%) scale(.92);opacity:.7}to{transform:translateX(-50%) scale(1.08);opacity:1}}
@media(max-width:700px){.cm-stage{aspect-ratio:16/8}}
@media(prefers-reduced-motion:reduce){.cm-stage.is-live .cm-pen,.cm-shadow{animation:none}}
/* receipt: back to the original card — white, ink outline, Curo-blue offset slab, uppercase rows */
.receipt{position:relative;width:min(100%,560px);padding:26px 30px 30px;border-radius:18px;background:#fff;border:2px solid var(--ink);box-shadow:none;transform:none;transition:transform .35s var(--ease)}
.receipt::before{content:"";position:absolute;inset:14px -16px -16px 16px;z-index:-1;border-radius:18px;background:var(--blue)}
.receipt::after{display:none}
.receipt:hover{transform:translate(-3px,-3px)}
.receipt h3{font:700 22px/1 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--ink);gap:8px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.receipt-logo{height:22px}
.receipt-row{padding:15px 0;border-bottom:1px solid var(--line-2);font:700 13px/1 var(--body);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.receipt-row strong{font:700 13px/1 var(--body);letter-spacing:.02em;text-transform:uppercase;color:var(--blue);background:none;padding:0;border-radius:0}
.receipt-total{border:0;padding-top:22px;font:700 17px/1 var(--body);text-transform:uppercase;color:var(--ink)}
.receipt-total strong{font:700 17px/1 var(--body);text-transform:uppercase;color:var(--blue);background:none;padding:0;border-radius:0}
@media(max-width:860px){.receipt{transform:none}.receipt::before{inset:12px -10px -10px 12px}}
/* quiz bento without eyebrows: nudge copy */
.tc-copy{gap:6px}
/* ===== WEIGHT LOSS ===== */
/* hero — Hims-style: heading left, body + CTA right, three visual cards under it, warm sand band */
.thero{margin:0 var(--edge);border-radius:var(--r-xl);background:linear-gradient(180deg,#F7F2EA 0%,#EBDFCB 100%);padding:clamp(28px,4vw,56px) 0 clamp(20px,2.4vw,32px)}
.crumb{padding-top:16px}
.thero .twrap{width:min(var(--max),calc(100% - var(--gutter)*2))}
.thero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:clamp(20px,4vw,64px);align-items:end}
.thero h1{max-width:12ch;font-size:clamp(38px,5.4vw,72px)}
.thero-side{display:grid;justify-items:start;gap:0}
.thero-side .sub{margin:0;font-size:clamp(16px,1.3vw,18px);max-width:34ch;color:var(--ink-2)}
.thero-side .tbtn{margin-top:18px;background:#fff;color:var(--ink);min-height:52px;padding:0 24px}
.thero-side .tbtn:hover{background:var(--ink);color:#fff}
.thero-cards{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:14px;margin-top:clamp(36px,5vw,72px)}
.thc{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(300px,34vw,520px);isolation:isolate}
.thc img{width:100%;height:100%;object-fit:cover;display:block}
.thc-a{background:linear-gradient(160deg,#F3EADB 0%,#DCCBB0 100%)}
.thc-pen{position:absolute;width:auto;height:78%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(90,60,20,.28));will-change:transform}
.thc-pen-1{left:12%;top:-6%;rotate:-18deg}
.thc-pen-2{right:10%;bottom:-8%;rotate:14deg;height:74%}
.thc-b img{object-position:50% 20%}
.thc-c{background:var(--g-sky)}
.thc-c img{transform:scale(1.12)}
@media(max-width:900px){
.thero-in{grid-template-columns:1fr}
.thero-cards{grid-template-columns:1fr 1fr;margin-top:28px}
.thc{min-height:200px}
.thc-b{grid-column:1/-1;min-height:280px}
}
@media(max-width:520px){.thero-cards{grid-template-columns:1fr}}
/* honest version — four tinted cards with the 3D icons, staggered reveal, hover lift */
.winfo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.winfo-grid > div{display:contents}
.wi-card{position:relative;display:grid;grid-template-rows:auto auto 1fr;gap:10px;padding:26px 26px 28px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;overflow:hidden;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;counter-increment:wi}
.wi-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;transition:opacity .45s}
.winfo-grid{counter-reset:wi}
.wi-card:nth-of-type(1)::before{background:var(--g-sky)}
.wi-card:nth-of-type(2)::before{background:var(--g-mint)}
.wi-card:nth-of-type(3)::before{background:var(--g-sand)}
.wi-card:nth-of-type(4)::before{background:var(--g-lav)}
.wi-card::after{content:"0" counter(wi);position:absolute;right:22px;top:20px;font:600 13px/1 var(--mono);letter-spacing:.08em;color:var(--mute)}
.wi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.wi-card:hover::before{opacity:1}
.wi-ico{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(21,66,134,.18));transition:transform .5s var(--spring)}
.wi-card:hover .wi-ico{transform:translateY(-6px) rotate(-6deg) scale(1.08)}
.wi-card h3{font-size:22px;margin:4px 0 0;padding:0;border:0}
.wi-card p{font-size:16.5px;line-height:1.6;color:var(--slate);margin:0;max-width:none}
.winfo-grid .wk{grid-column:1/-1;margin-top:4px;display:flex;gap:14px;align-items:flex-start;padding:22px 26px;border-radius:var(--r-lg);background:var(--g-peach)}
.winfo-grid .wk::before{content:"";flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff url("../images/px-shield.webp") center/72% no-repeat}
.js .wi-card.reveal:nth-of-type(2){transition-delay:.08s}
.js .wi-card.reveal:nth-of-type(3){transition-delay:.16s}
.js .wi-card.reveal:nth-of-type(4){transition-delay:.24s}
@media(max-width:800px){.winfo-grid{grid-template-columns:1fr}}
/* 12 weeks — same pinned story component as the homepage */
.tl-story{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.tl-story .tl-grid{display:grid;grid-template-columns:1fr;gap:0;padding:0;counter-reset:step}
.tl-story .tl-grid::before,.tl-story .tl-prog{display:none}
.tl-story .tl-grid > li{display:grid;gap:8px;padding:9vh 0 9vh 34px;border:0;border-left:2px solid rgba(21,26,44,.14);border-radius:0;background:none;opacity:1;transform:none;position:relative;counter-increment:step;box-shadow:none}
.tl-story .tl-grid > li::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:0;border:0;border-radius:0;background:var(--ink);box-shadow:none;transition:height .6s var(--ease)}
.tl-story .tl-grid > li.is-on::before{height:100%}
.tl-story .tl-grid img{width:52px;height:52px;opacity:.4;transition:opacity .5s,transform .5s var(--spring)}
.tl-story .tl-grid > li.is-on img{opacity:1;transform:translateY(-3px)}
.tl-story .tl-grid b{margin-top:2px}
.tl-story .tl-grid h3{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;opacity:.32;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateX(-4px)}
.tl-story .tl-grid p{font-size:17px;max-width:36ch;opacity:.32;transition:opacity .5s var(--ease)}
.tl-story .tl-grid > li.is-on h3,.tl-story .tl-grid > li.is-on p{opacity:1;transform:none}
.tl-story .ch-stage-in{background:#fff}
@media(max-width:900px){
.tl-story{grid-template-columns:1fr}
.tl-story .ch-stage{display:none}
.tl-story .tl-grid{gap:12px}
.tl-story .tl-grid > li{padding:22px;border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);background:rgba(255,255,255,.75)}
.tl-story .tl-grid > li::before{display:none}
.tl-story .tl-grid img,.tl-story .tl-grid h3,.tl-story .tl-grid p{opacity:1;transform:none}
.tl-story .tl-grid h3{font-size:21px}
}
/* v3b: pen sizing must not depend on a percentage of an aspect-ratio box */
.cm-stage{aspect-ratio:auto;height:clamp(260px,30vw,400px);width:min(100%,720px)}
.cm-pen{height:clamp(220px,24vw,320px);max-height:none;width:auto}
@media(max-width:700px){.cm-stage{height:240px}.cm-pen{height:200px}}
/* v3c: WL hero pen cut-outs sized to the card; worth-knowing callout back to one paragraph with the shield icon */
.thc-pen{height:64%}
.thc-pen-1{left:10%;top:6%;rotate:-16deg}
.thc-pen-2{right:9%;bottom:4%;height:58%;rotate:12deg}
.thc-c img{transform:none;object-position:50% 50%}
.winfo-grid .wk{display:block;position:relative;padding:22px 26px 22px 84px}
.winfo-grid .wk::before{position:absolute;left:26px;top:50%;transform:translateY(-50%)}
/* v3d: the blue slab behind the receipt as a hard offset shadow (a z-index:-1 pseudo covers the card while the reveal transition runs) */
.receipt::before{display:none}
.receipt{box-shadow:16px 16px 0 0 var(--blue)}
.receipt:hover{box-shadow:20px 20px 0 0 var(--blue)}
@media(max-width:860px){.receipt{box-shadow:10px 10px 0 0 var(--blue)}}
/* v3e: pen cut-outs get fixed heights (percent heights collapse to natural size inside min-height boxes) */
.thc-pen{height:clamp(150px,22vw,330px)}
.thc-pen-2{height:clamp(140px,20vw,300px)}
@media(max-width:900px){.thc-pen-1{left:8%;top:8%}.thc-pen-2{right:8%;bottom:6%}}
/* ===== v4 (rollout) ===== */
/* hero tints: men pages cool, women pages warm, weight loss sand, anti-aging mint */
.rd-tint-cool .thero{background:linear-gradient(180deg,#F1F5FA 0%,#D7E4F2 100%)}
.rd-tint-cool .thc-a,.rd-tint-cool .thc-c{background:var(--g-sky)}
.rd-tint-warm .thero{background:linear-gradient(180deg,#FBF3EE 0%,#F3DCD0 100%)}
.rd-tint-warm .thc-a,.rd-tint-warm .thc-c{background:var(--g-peach)}
.rd-tint-mint .thero{background:linear-gradient(180deg,#F2F7F1 0%,#D8EBDD 100%)}
.rd-tint-mint .thc-a,.rd-tint-mint .thc-c{background:var(--g-mint)}
.rd-tint-cool .thero-side .tbtn:hover,.rd-tint-warm .thero-side .tbtn:hover,.rd-tint-mint .thero-side .tbtn:hover{background:var(--blue);color:#fff}
.thc img{object-position:50% 30%}
/* men / women switch inside the hero side column */
.sx-switch{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line);margin-top:18px}
.sx-switch a{min-height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;font:600 14px/1 var(--body);color:var(--ink-2);transition:background .25s,color .25s}
.sx-switch a.on{background:var(--ink);color:#fff}
.sx-switch a:not(.on):hover{background:#fff}
.thero-side .sx-switch + .tbtn{margin-top:14px}
/* intro with a product cluster / photo on the right */
.hi-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.hi-wrap:not(:has(.hi-shot)){grid-template-columns:1fr}
.hi-wrap:has(.hi-shot) .hi-copy{text-align:left;margin:0;justify-items:start;max-width:none}
.hi-wrap:has(.hi-shot) .hi-lead{text-align:left;margin:0 0 18px}
.hi-wrap:has(.hi-shot) .hi-acts{justify-content:flex-start}
.hi-shot{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;background:var(--g-sky);display:grid;place-items:center;isolation:isolate}
.rd-tint-warm .hi-shot{background:var(--g-peach)}
.rd-tint-mint .hi-shot{background:var(--g-mint)}
.hi-halo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.9),transparent 70%);filter:blur(20px);z-index:0}
.hi-group{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:4%;width:88%;height:78%}
.hi-group img{max-height:100%;width:auto;max-width:40%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(21,26,44,.22));transition:transform .6s var(--ease)}
.hi-group img:nth-child(2){max-height:92%;transform:translateY(-6%)}
.hi-shot:hover .hi-group img{transform:translateY(-6px)}
.hi-shot:hover .hi-group img:nth-child(2){transform:translateY(calc(-6% - 10px))}
.hi-float{position:relative;z-index:1;max-height:80%;width:auto;filter:drop-shadow(0 30px 40px rgba(21,26,44,.22))}
.hi-float.hi-photo{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
@media(max-width:860px){.hi-wrap{grid-template-columns:1fr}.hi-shot{aspect-ratio:4/3;order:-1}}
/* understanding (hedu): three chip cards + a "cycle" note */
.he-head{max-width:760px;margin-bottom:36px}
.he-head h2{margin-bottom:14px}
.he-sub{font-size:18px;line-height:1.6;color:var(--slate);max-width:600px}
.he-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:he}
.he-card{position:relative;padding:26px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);counter-increment:he;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s}
.he-card::before{content:"0" counter(he);position:absolute;right:22px;top:20px;font:600 13px/1 var(--mono);letter-spacing:.08em;color:var(--mute)}
.he-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);background:var(--g-hover)}
.he-card h3{font-size:22px;padding-right:40px}
.he-when{margin:8px 0 16px;font-size:15px;color:var(--slate)}
.he-chips{display:flex;flex-wrap:wrap;gap:8px}
.he-chips span{font:500 13px/1 var(--body);color:var(--ink-2);padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.he-rail{display:none}
.he-cycle{margin-top:14px;padding:26px 28px;border-radius:var(--r-lg);background:var(--g-sky);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:20px 40px;align-items:center}
.he-cycle h3{font-size:24px}
.he-cycle p{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:900px){.he-grid{grid-template-columns:1fr}.he-cycle{grid-template-columns:1fr}}
/* self-check stages (skin concern picker, hair stage slider) */
.sstage,.hstage{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:var(--ink);color:#fff}
.hs-copy{display:grid;justify-items:start;gap:0}
.hs-copy .eyebrow{color:#8FC9FF}
.hs-copy .eyebrow::before{box-shadow:0 0 0 4px rgba(0,149,255,.25)}
.hs-copy h3{color:#fff;font-size:clamp(24px,2.6vw,34px);margin-bottom:12px}
.hs-lede{font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.75);max-width:44ch}
.hs-state{margin-top:22px;padding:18px 20px;border-radius:var(--r-md);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);width:100%;max-width:520px}
.hs-name{font:700 19px/1.2 var(--display);color:#fff}
.hs-desc{margin-top:6px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.8)}
.hs-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--blue);color:#fff;font:600 15px/1 var(--body);margin-top:22px;transition:transform .28s var(--spring),background .2s}
.hs-cta:hover{transform:translateY(-2px);background:var(--blue-ink)}
.hs-fine{margin-top:14px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55);max-width:52ch}
.hs-visual{display:grid;gap:18px;justify-items:center}
.hs-visual > svg{width:min(100%,320px);height:auto;color:#fff}
.hs-ticks{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hs-tick{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:600 13.5px/1 var(--body);transition:background .2s,border-color .2s,transform .28s var(--spring)}
.hs-tick:hover{background:rgba(255,255,255,.14)}
.hs-tick.on{background:#fff;color:var(--ink);border-color:#fff}
.hs-range{width:100%;max-width:420px;height:14px;-webkit-appearance:none;appearance:none;border-radius:999px;background:rgba(255,255,255,.18);cursor:pointer}
.hs-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:0;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.hs-range::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;border:0}
@media(max-width:860px){.sstage,.hstage{grid-template-columns:1fr}.hs-visual{order:-1}}
/* formats (how you take it) */
.fmt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fmt-card{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.9);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fmt-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.fmt-card .fm{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.fmt-card .fm img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.fmt-card:hover .fm img{transform:scale(1.05)}
.fmt-card .fb{position:relative;display:grid;gap:8px;padding:20px 22px 24px;align-content:start}
.fmt-card .fb h3{font-size:21px;padding-right:80px}
.fmt-card .fb p{font-size:15.5px;line-height:1.55;color:var(--slate)}
.fmt-card .freq{position:absolute;right:16px;top:18px;font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);padding:8px 10px;border-radius:999px;background:var(--blue-soft)}
.fmt-note{margin-top:18px;font-size:14px;color:var(--slate)}
.tsec .tsec-head{max-width:760px;margin-bottom:36px}
.tsec .tsec-head p{margin-top:14px}
@media(max-width:900px){.fmt-grid{grid-template-columns:1fr}}
/* signs / labs */
.sym-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:sym}
.sym-card{position:relative;padding:24px 24px 26px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);counter-increment:sym;transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .4s}
.sym-card::before{content:"0" counter(sym);display:block;font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--blue-ink);margin-bottom:14px}
.sym-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);background:var(--g-hover)}
.sym-card h3{font-size:20px}
.sym-card p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--slate)}
@media(max-width:900px){.sym-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sym-grid{grid-template-columns:1fr}}
/* the science, simply — tabs left, stage right (videos from the live site) */
.sci .tsec-head{position:relative}
.sci .teye{margin-bottom:14px}
.exp{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:start}
.etabs{display:grid;gap:10px}
.etab{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;text-align:left;padding:18px 20px;border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);transition:background .3s,border-color .3s,transform .3s var(--ease)}
.etab:hover{background:#fff}
.etab.on{background:var(--g-hover);border-color:var(--sky);transform:translateX(4px)}
.etab .en{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:600 13px/1 var(--mono)}
.etab.on .en{background:var(--blue)}
.etab h3{font-size:18px}
.etab p{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--slate)}
.tstage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--sand);min-height:380px}
.tstage .bloom{display:none}
.spanel{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.spanel.on{opacity:1;pointer-events:auto;position:relative}
.spanel .ic{position:relative;min-height:260px;overflow:hidden}
.spanel .ic video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.spanel h4{font:700 20px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);padding:18px 22px 0}
.spanel p{padding:6px 22px 22px;font-size:15px;line-height:1.55;color:var(--slate)}
.dual,.exp-note{margin-top:18px;padding:20px 24px;border-radius:var(--r-md);background:var(--g-peach);font-size:15.5px;line-height:1.55;color:var(--ink)}
@media(max-width:900px){.exp{grid-template-columns:1fr}.tstage{min-height:0}}
/* programs cards (art variant, sub line) */
.hpx-two{grid-template-columns:repeat(2,1fr)}
.hpx-sub{font-size:14.5px;color:var(--slate);max-width:28ch}
.hpx-art{align-self:end;justify-self:center;display:grid;place-items:center;width:100%;height:200px;margin-top:10px}
.hpx-art img{max-height:190px;width:auto;filter:drop-shadow(0 24px 30px rgba(21,26,44,.2));transition:transform .6s var(--ease)}
.hpx:hover .hpx-art img{transform:translateY(-10px) rotate(-4deg)}
@media(max-width:900px){.hpx-two{grid-template-columns:1fr 1fr}.hpx-art{height:160px}.hpx-art img{max-height:150px}}
@media(max-width:560px){.hpx-two{grid-template-columns:1fr}}
/* cross-link band (women's page pointer) */
.sxc-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center}
.sxc-wrap h2{margin-bottom:12px}
.sxc-wrap .hs-cta{margin:0;background:var(--ink)}
.sxc-wrap .hs-cta:hover{background:var(--blue-ink)}
@media(max-width:700px){.sxc-wrap{grid-template-columns:1fr}}
/* men / women chooser dialog */
.whofor{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(21,26,44,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.whofor[hidden]{display:none}
.whofor-card{width:min(640px,100%);padding:clamp(26px,4vw,44px);border-radius:var(--r-lg);background:#fff;display:grid;justify-items:start;gap:10px;animation:qmpop .35s var(--spring)}
.whofor-eye{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink)}
.whofor-card h2{font-size:clamp(28px,3.4vw,40px)}
.whofor-card > p{font-size:16.5px;color:var(--slate);max-width:48ch}
.whofor-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:12px}
.whofor-b{display:grid;gap:4px;padding:20px;border-radius:var(--r-md);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.whofor-m{background:var(--g-sky)}
.whofor-w{background:var(--g-peach)}
.whofor-b:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.whofor-b b{font:700 20px/1.1 var(--display);color:var(--ink)}
.whofor-b span{font-size:14px;color:var(--ink-2)}
.whofor-skip{margin-top:8px;font:600 14px/1 var(--body);color:var(--slate);text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){.whofor-opts{grid-template-columns:1fr}}
/* misc */
.isi-warn{color:var(--ink)}
.tm{display:block;margin-top:10px;color:var(--mute)}
.strap-in{display:none}
.rd-p-weight-loss .strap-in{display:flex}
@media(max-width:700px){.rd-p-weight-loss .strap-in{display:grid}}
/* utility pages: legal documents */
.doc-band{margin-top:var(--edge)}
.doc-page{width:min(820px,calc(100% - var(--gutter)*2));margin:0 auto}
.doc-page__eyebrow{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:16px}
.doc-page h1{font-size:clamp(36px,5vw,64px);margin-bottom:14px}
.doc-page__lead,.doc-updated{font-size:18px;line-height:1.6;color:var(--slate);margin-bottom:8px}
.doc-updated{font:600 13px/1 var(--mono);letter-spacing:.06em;color:var(--mute);margin-top:6px}
.doc-page h2{font-size:clamp(22px,2.2vw,28px);margin:44px 0 12px;padding-top:24px;border-top:1px solid var(--line-2)}
.doc-page h3{font-size:19px;margin:22px 0 8px}
.doc-page p,.doc-page li{font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.doc-page p{margin-bottom:14px}
.doc-page ul,.doc-page ol{padding-left:22px;margin:0 0 14px}
.doc-page a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
/* utility page: medication pricing */
.mp-shell{margin:var(--edge) var(--edge) 0;display:grid;gap:var(--edge)}
.mp-shell > *{border-radius:var(--r-xl)}
.mp-shell .hero{background:var(--g-sand);padding:var(--band) 0}
.mp-shell .hin{width:min(760px,calc(100% - var(--gutter)*2));margin:0 auto;display:grid;justify-items:start;text-align:left;position:relative}
.mp-shell .eye{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:16px}
.mp-shell .hin h1{font-size:clamp(36px,5vw,64px);margin-bottom:16px}
.mp-shell .hin p{font-size:17px;line-height:1.6;color:var(--ink-2)}
.mp-shell .curoseal{display:none}
.mp-shell main{width:min(var(--max),calc(100% - var(--gutter)*2));margin:0 auto;padding:var(--band) 0 0}
.cmp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cc{position:relative;display:grid;gap:6px;padding:22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cc:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.ccm{display:block;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--g-sky);margin-bottom:8px}
.ccm img{width:100%;height:100%;object-fit:cover}
.cc .bn{font:700 22px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.cc .pn{font-size:14px;color:var(--slate)}
.cc .fmt{font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink);padding:8px 10px;border-radius:999px;background:var(--blue-soft);width:max-content;margin:6px 0}
.cc dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:8px 0 0;font-size:13.5px;line-height:1.45}
.cc dt{color:var(--mute)}.cc dd{margin:0;color:var(--ink-2)}
.cc .pr{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2);font-size:14px;color:var(--slate)}
.cc .pr .od{font:700 26px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.cc .pr small{display:block;font-size:12.5px;margin-top:4px}
.mp-shell .diff{background:var(--g-sky);padding:var(--band) 0}
.din{width:min(var(--max),calc(100% - var(--gutter)*2));margin:0 auto}
.din h2{margin-bottom:10px}
.dsub{font-size:17px;color:var(--slate);margin-bottom:26px}
.dwrap{overflow-x:auto;border-radius:var(--r-lg);background:#fff;border:1px solid rgba(255,255,255,.9)}
.dt{width:100%;border-collapse:collapse;min-width:720px}
.dt th,.dt td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-2);vertical-align:top}
.dt thead th{vertical-align:bottom}
.dt th.hl,.dt td.hl{background:var(--blue-soft)}
.dth{display:grid;justify-items:center;gap:6px;text-align:center}
.dth img{width:64px;height:48px;object-fit:cover;border-radius:10px}
.dth b{font:700 15px/1.1 var(--display);color:var(--ink)}
.dth span{font-size:12.5px;color:var(--slate)}
.mp-shell main h2{margin:var(--band) 0 18px}
.mp-shell main table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-md);overflow:hidden}
.mp-shell main table th,.mp-shell main table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
.mp-shell main table th{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.mp-shell main td.pr{font-weight:700;color:var(--ink)}
.mp-shell .faq{display:grid;gap:10px}
.mp-shell .fq{padding:20px 22px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line)}
.mp-shell .fq h3{font-size:18px;margin-bottom:6px}
.mp-shell .fq p{font-size:15.5px;line-height:1.55;color:var(--slate)}
.mp-shell .foot{margin:32px 0 var(--band);font-size:13.5px;line-height:1.55;color:var(--mute)}
@media(max-width:1000px){.cmp{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cmp{grid-template-columns:1fr}}
/* v4b: nav must never wrap at laptop widths (1280–1366) */
.nav-links a,.nav-login,.nav .btn-white,.nav-ca{white-space:nowrap}
.nav-ca{display:none}
@media(min-width:1340px){.nav-ca{display:inline-flex}}
@media(max-width:1339px) and (min-width:1101px){.nav-in{gap:14px}.nav-links a{padding:10px 9px;font-size:14px}.nav-login{padding:0 13px;font-size:13.5px}.nav .btn-white{padding:0 15px;font-size:13.5px}}
/* ===== v5 (mobile sliders) ===== */
/* dots are built by rd.js under every slider */
.rd-dots{display:none}
@media(max-width:700px){
:root{--band:44px;--edge:8px;--gutter:18px}
body{font-size:16px}
h2{font-size:clamp(27px,7.6vw,32px)}
.section-copy,.pxg-sub,.cm-sub,.cp-sub,.hi-lead,.hpx-lead,.tsec-head p,.he-sub{font-size:16px}
.btn,.tbtn,.cf-cta,.hi-primary,.wlc-btn,.hfaq-cta,.hs-cta{min-height:50px}
.tc-cta{min-height:44px}
.pxg-head,.ch-head,.cm-head,.hpx-head,.he-head,.px-head,.tsec .tsec-head,.tl-sec .tsec-head{margin-bottom:22px}
.hero{padding-top:24px}
.hero h1{font-size:clamp(34px,9.6vw,40px)}
.hero .btn{min-height:50px;padding:0 22px}
.hero-bento{margin-top:22px}
.thero{padding-top:16px}
.thero h1{font-size:clamp(32px,9vw,38px)}
.thero-side .sub{font-size:16px}
.quiz{padding:36px 0}
.quiz-head h2{font-size:clamp(26px,7vw,30px)}
.marquee{margin-top:22px}
/* ---- the slider pattern ---- */
.rd-slider{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px var(--gutter) 6px;margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));width:auto!important;cursor:grab;touch-action:pan-x pan-y}
.rd-slider::-webkit-scrollbar{display:none}
.rd-slider.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rd-slider .rd-slide{flex:0 0 min(78vw,330px)!important;width:min(78vw,330px)!important;max-width:none!important;scroll-snap-align:start;scroll-snap-stop:always;grid-column:auto!important;grid-row:auto!important;margin:0!important;transform:none!important}
.rd-slider.is-drag .rd-slide{pointer-events:none}
.rd-dots{display:flex;justify-content:center;gap:2px;margin-top:10px}
.rd-dots button{width:24px;height:24px;min-height:0;padding:0;border-radius:0;background:none;display:grid;place-items:center}
.rd-dots button::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--line-2);transition:width .3s var(--ease),background .3s}
.rd-dots button.on::before{width:20px;background:var(--blue)}
/* per-grid tuning */
.tc.rd-slider .rd-slide{min-height:300px!important;height:300px}
.tc-banner{padding:18px!important}
.tc-t{font-size:24px}
.tc-tile{padding:18px}
.tc-trender img{max-height:120px}
.pxg-card.reveal,.wi-card.reveal,.cp-card.reveal,.ch-card.reveal{opacity:1;transform:none}
.pxg-grid.rd-slider .rd-slide{min-height:280px!important;padding:20px}
.pxg-obj{max-height:150px}
.pxg-title{font-size:20px;padding-right:48px}
.ch-grid.rd-slider .rd-slide{height:auto}
.ch-card .ch-photo{aspect-ratio:4/3}
.thero-cards.rd-slider{margin-top:22px}
.thero-cards.rd-slider .rd-slide{min-height:0!important;height:320px}
.thc-pen{height:clamp(150px,44vw,210px)}
.he-grid.rd-slider .rd-slide{min-height:230px}
.fmt-grid.rd-slider .rd-slide{min-height:0}
.fmt-card .fm{aspect-ratio:16/10}
.hpx-grid.rd-slider .rd-slide{min-height:380px!important;padding:20px}
.hpx-art2,.hpx-art{height:170px}
.hpx-art2 img,.hpx-art img{max-height:160px}
.sym-grid.rd-slider .rd-slide{min-height:180px}
.px-tcards.rd-slider .rd-slide{min-height:0}
.winfo-grid.rd-slider .wi-card.rd-slide{min-height:280px}
.winfo-grid.rd-slider .wk.rd-slide{padding:22px 22px 22px 84px!important;align-self:stretch}
.tl-story .tl-grid.rd-slider .rd-slide{min-height:240px}
.cmp.rd-slider .rd-slide{min-height:0}
.cp-grid{gap:10px}
/* stacks that stay vertical get a little more air */
.cm-line{gap:22px 12px}
.faq-grid summary,.hfq-q{padding:18px 0;font-size:17px}
.faq-grid details,.hfq{padding:0 18px}
.cf-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
.cf-brand{grid-column:1/-1}
.receipt{padding:22px 20px 26px}
.sticky .tbtn{width:100%;max-width:420px}
.whofor-card{padding:24px 20px}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.rd-slider{scroll-behavior:auto}}
/* ===== v6 (menu + cta) ===== */
/* mobile menu: rd.js moves it to so no filtered/transformed ancestor can shrink its fixed box */
.mobile-menu,.mobile{background:var(--bg)!important;opacity:1;height:100dvh;width:100vw;left:0;top:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
body > .mobile-menu,body > .mobile{z-index:120}
.mobile-menu:not(.open),.mobile:not(.open){opacity:0;visibility:hidden;pointer-events:none}
.mobile-menu.open,.mobile.open{opacity:1;visibility:visible;pointer-events:auto}
/* one primary CTA colour: the homepage blue */
.thero-side .tbtn,.wlc-btn:not(.wlc-btn-ghost),.hfaq-cta,.sxc-wrap .hs-cta,.hs-cta,.tc-cta,.thero-side .tbtn:hover{background:var(--blue);color:#fff;border-color:transparent}
.thero-side .tbtn:hover,.wlc-btn:not(.wlc-btn-ghost):hover,.hfaq-cta:hover,.sxc-wrap .hs-cta:hover,.hs-cta:hover,.tc-cta:hover{background:var(--blue-ink);color:#fff}
.rd-tint-cool .thero-side .tbtn:hover,.rd-tint-warm .thero-side .tbtn:hover,.rd-tint-mint .thero-side .tbtn:hover{background:var(--blue-ink);color:#fff}
.tc-wl .tc-cta{color:#fff}
.tc-cta svg{color:#fff}
/* ===== v7 (self-check stages) ===== */
.hs-visual > svg{width:min(100%,300px);height:auto;position:relative;z-index:1}
.hst,.hstage #st-1,.hstage #st-2,.hstage #st-3,.hstage #st-4,.hstage #st-5,.sstage #st-1,.sstage #st-2,.sstage #st-3,.sstage #st-4{opacity:0;transition:opacity .45s ease}
.hstage[data-stage="1"] #st-1,.hstage[data-stage="2"] #st-2,.hstage[data-stage="3"] #st-3,.hstage[data-stage="4"] #st-4,.hstage[data-stage="5"] #st-5{opacity:1}
.sstage[data-stage="1"] #st-1,.sstage[data-stage="2"] #st-2,.sstage[data-stage="3"] #st-3,.sstage[data-stage="4"] #st-4{opacity:1}
.ss-photo .ssp{transform-box:fill-box;transform-origin:center;animation:sspulse 2.6s ease-in-out infinite}
.ss-photo .ssp:nth-child(2){animation-delay:.3s}.ss-photo .ssp:nth-child(3){animation-delay:.6s}.ss-photo .ssp:nth-child(4){animation-delay:.9s}.ss-photo .ssp:nth-child(5){animation-delay:1.2s}.ss-photo .ssp:nth-child(6){animation-delay:1.5s}.ss-photo .ssp:nth-child(7){animation-delay:1.8s}
.ss-photo .ssb{animation:ssbreathe 4.2s ease-in-out infinite}
.ss-photo .ssb:nth-child(2){animation-delay:.5s}.ss-photo .ssb:nth-child(3){animation-delay:1s}.ss-photo .ssb:nth-child(4){animation-delay:1.5s}.ss-photo .ssb:nth-child(5){animation-delay:2s}.ss-photo .ssb:nth-child(6){animation-delay:2.5s}
.ss-photo .sst4{animation:ssshim 3.2s ease-in-out infinite}
.ss-photo .sst4:nth-child(2){animation-delay:.4s}.ss-photo .sst4:nth-child(3){animation-delay:.8s}.ss-photo .sst4:nth-child(4){animation-delay:1.2s}.ss-photo .sst4:nth-child(5){animation-delay:1.6s}.ss-photo .sst4:nth-child(6){animation-delay:2s}
@keyframes sspulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.35);opacity:1}}
@keyframes ssbreathe{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes ssshim{0%,100%{opacity:.68}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ss-photo .ssp,.ss-photo .ssb,.ss-photo .sst4{animation:none}}
/* ===== v8 (polish) ===== */
/* ---- 1. colour tuning: same palette, better contrast + softer tints ---- */
:root{
--ink:#141A2B; --ink-2:#283047; --slate:#4A5266; --mute:#77808F;
--line:rgba(20,26,43,.09); --line-2:rgba(20,26,43,.16);
--g-peach:linear-gradient(160deg,#FFEADC 0%,#FBD5BD 100%);
--g-sky:linear-gradient(160deg,#EEF5FF 0%,#D7E7FF 100%);
--g-lav:linear-gradient(160deg,#E6F0FF 0%,#CBDFFF 100%);
--g-mint:linear-gradient(160deg,#E9F6EC 0%,#D4ECDB 100%);
--g-sand:linear-gradient(180deg,#F7F2EB 0%,#EEE6DB 100%);
--g-hover:linear-gradient(140deg,#FFFFFF 0%,#F0F5FF 60%,#FFEBDE 100%);
--shadow-0:0 1px 2px rgba(20,26,43,.03),0 10px 28px -24px rgba(20,26,43,.16); /* resting card */
--shadow-1:0 1px 2px rgba(20,26,43,.04),0 14px 34px -22px rgba(20,26,43,.20);
--shadow-2:0 2px 4px rgba(20,26,43,.05),0 28px 56px -30px rgba(20,26,43,.26);
--shadow-cta:0 1px 0 rgba(255,255,255,.28) inset,0 8px 20px -10px rgba(0,149,255,.55);
--shadow-cta-h:0 1px 0 rgba(255,255,255,.3) inset,0 14px 28px -12px rgba(0,149,255,.6);
}
body{color:var(--ink)}
::selection{background:#0095FF;color:#fff}
/* ---- 2. typography: same faces + roles, tuned rhythm ---- */
h1,h2,h3,h4{text-wrap:balance;font-feature-settings:"ss01","cv11"}
h1{letter-spacing:-.036em;line-height:1.02}
.hero h1{letter-spacing:-.038em;line-height:1.02}
h2{font-size:clamp(31px,4vw,52px);letter-spacing:-.028em;line-height:1.08}
h3{letter-spacing:-.018em}
.section-copy,.pxg-sub,.cm-sub,.cp-sub,.hi-lead,.hpx-lead,.tsec-head p,.he-sub,.hero .hero-grid p:not(.eyebrow),.thero-side .sub{font-size:17.5px;line-height:1.62;color:var(--slate)}
.eyebrow,.teye,.px-eye{font-weight:700;letter-spacing:.12em;font-size:11.5px;margin-bottom:16px}
.eyebrow::before,.teye::before,.px-eye::before{width:7px;height:7px}
.ch-card h3{font-size:clamp(25px,2.4vw,32px)}
.ch-card p,.cm-lab,.tl-story .tl-grid p{color:var(--slate)}
.number-grid span{font-weight:700}
.faq-grid summary,.hfq-q{font-size:clamp(17px,1.4vw,19px);font-weight:700;letter-spacing:-.015em}
.faq-grid details > p,.faq-grid .rd-acc > p,.hfq-a > p{font-size:16px;line-height:1.65}
.nav-links a{font-size:14.5px;font-weight:500;letter-spacing:-.005em}
.nav .btn-white,.nav-login{font-size:14px;font-weight:600;letter-spacing:-.005em}
.btn,.tbtn,.cf-cta,.hi-primary,.wlc-btn,.hfaq-cta,.tc-cta,.hs-cta{font-weight:600;letter-spacing:-.005em}
.marquee__item{font-size:14px;color:var(--slate);letter-spacing:.005em}
.strap-in span{font-size:13.5px;color:var(--ink-2)}
.cf-col a{font-weight:500}
.cf-legal{font-size:13.5px;line-height:1.6}
.cf-legal p{max-width:78ch}
/* product + pricing typography: price line reads as the value, not a footnote */
.hpx h3{font-size:24px;letter-spacing:-.022em}
.hpx-price,.hpx-sub{font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;margin-top:2px}
.hpx-alt .hpx-price{color:#fff}
.hpx-chip{font-size:11px;letter-spacing:.09em;padding:7px 10px}
.pxg-title{font-size:22px}
.tc-t{font-size:clamp(24px,2.3vw,30px)}
.receipt h3{font-size:21px}
.receipt-row{font-size:12.5px;letter-spacing:.03em}
.receipt-total{font-size:16px}
.cc .pr .od{font-size:28px}
.cc .bn{font-size:21px}
.bnum{letter-spacing:-.045em}
/* ---- 3. spacing & alignment ---- */
:root{--band:clamp(64px,7.2vw,108px);--edge:clamp(10px,1.2vw,16px)}
.pxg-head,.ch-head,.cm-head,.hpx-head,.he-head,.px-head,.tsec .tsec-head,.tl-sec .tsec-head{margin-bottom:40px}
.pxg-head h2,.ch-head h2,.hpx-head h2,.he-head h2,.px-head h2{margin-bottom:14px}
.hero{padding-top:clamp(40px,5vw,72px)}
.hero .hero-grid p:not(.eyebrow){margin-bottom:8px}
.hero .btn{margin-top:20px}
.hero-bento{margin-top:clamp(34px,4vw,52px)}
.marquee{padding:18px 0;margin-top:clamp(30px,3.6vw,48px)}
.quiz{padding:clamp(44px,5.4vw,68px) 0}
.thero{padding-top:clamp(28px,3.4vw,48px)}
.thero-side .tbtn{margin-top:20px}
.strap-in{gap:12px 32px;padding:18px 0}
.split-copy h2,.cp-head h2,.pricing-grid h2{margin-bottom:16px}
.pricing-grid > div:first-child p:not(.eyebrow){margin-top:16px}
.cf-grid{gap:44px}
.cf-rule{margin:48px 0 26px}
/* ---- 4. components: buttons ---- */
.btn,.tbtn,.cf-cta,.hi-primary,.wlc-btn,.hfaq-cta,.tc-cta,.hs-cta,.nav .btn-white{transition:transform .25s var(--spring),background .2s,box-shadow .3s var(--ease),color .2s}
.btn-blue,.tbtn-primary,.hi-primary,.cf-cta,.nav .btn-white,.thero-side .tbtn,.wlc-btn:not(.wlc-btn-ghost),.hfaq-cta,.hs-cta,.tc-cta,.sxc-wrap .hs-cta,.sticky .tbtn{box-shadow:var(--shadow-cta)}
.btn-blue:hover,.tbtn-primary:hover,.hi-primary:hover,.cf-cta:hover,.nav .btn-white:hover,.thero-side .tbtn:hover,.wlc-btn:not(.wlc-btn-ghost):hover,.hfaq-cta:hover,.hs-cta:hover,.tc-cta:hover,.sticky .tbtn:hover{box-shadow:var(--shadow-cta-h);transform:translateY(-2px)}
.btn:active,.tbtn:active,.cf-cta:active,.hi-primary:active,.wlc-btn:active,.hfaq-cta:active,.tc-cta:active,.hs-cta:active,.nav .btn-white:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-cta)}
.hi-link,.wlc-btn-ghost,.nav-login{background:rgba(255,255,255,.55);border-color:var(--line-2)}
.hi-link:hover,.wlc-btn-ghost:hover,.nav-login:hover{background:#fff;border-color:var(--ink);transform:translateY(-1px)}
.tbtn .arr{display:inline-block;margin-left:2px}
.hs-tick{font-weight:600}
/* ---- 4b. components: cards — one resting depth, one hover depth, one radius scale ---- */
.pxg-card,.tc-tile,.hpx,.wi-card,.he-card,.sym-card,.fmt-card,.px-tcard,.cc,.mp-shell .fq,.faq-grid details,.hfq,.cp-card,.tl-story .tl-grid.rd-slider .rd-slide{box-shadow:var(--shadow-0);border-color:var(--line)}
.pxg-card:hover,.tc-tile:hover,.hpx:hover,.wi-card:hover,.he-card:hover,.sym-card:hover,.fmt-card:hover,.px-tcard:hover,.cc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:rgba(20,26,43,.04)}
.tc-banner{box-shadow:var(--shadow-0)}
.tc-banner:hover{transform:translateY(-3px)}
.faq-grid details,.hfq{transition:background .3s,border-color .3s,box-shadow .3s}
.faq-grid details:hover,.hfq:hover{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.faq-grid summary::after,.hfq-x{background-color:var(--bg);border:1px solid var(--line)}
.he-cycle,.wk,.dual,.exp-note,.hs-state{box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
.rd-white{border:1px solid rgba(20,26,43,.05)}
.rd-band{box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
/* chevron/arrow buttons: one size, one hover */
.pxg-chev,.hpx-go,.tc-tchev{width:42px;height:42px}
.px-tcard-go{width:38px;height:38px}
.pxg-chev,.hpx-go,.tc-tchev,.px-tcard-go{border:1px solid var(--line);background:rgba(255,255,255,.9)}
.pxg-card:hover .pxg-chev,.hpx:hover .hpx-go,.tc-tile:hover .tc-tchev,.px-tcard:hover .px-tcard-go{border-color:transparent}
/* packshots: slightly softer shadow so the card, not the shadow, reads first */
.pxg-obj,.hpx-art2 img,.hpx-art img,.tc-trender img,.hi-group img{filter:drop-shadow(0 18px 26px rgba(20,26,43,.16))}
/* ---- 4c. navigation ---- */
.nav{background:rgba(247,244,240,.8)}
.nav.is-stuck{background:rgba(247,244,240,.92);box-shadow:0 10px 30px -26px rgba(20,26,43,.35)}
.nav-links a{color:var(--ink-2)}
.nav-links a:hover{background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 12px -10px rgba(20,26,43,.3)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-ca{color:var(--slate);border-color:var(--line)}
.brand img{height:29px}
/* ---- 5. product cards (same card, more premium) ---- */
.hpx{padding:26px 26px 24px;gap:6px}
.hpx::before{opacity:.42}
.hpx:hover::before{opacity:.9}
.hpx-art2,.hpx-art{margin-top:14px}
.hpx-art2 img,.hpx-art img{transition:transform .55s var(--ease),filter .55s var(--ease)}
.hpx:hover .hpx-art2 img,.hpx:hover .hpx-art img{transform:translateY(-8px) rotate(-3deg);filter:drop-shadow(0 26px 34px rgba(20,26,43,.22))}
.hpx-foot{margin-top:24px;color:var(--mute)}
.lgr{box-shadow:0 18px 36px -20px rgba(0,0,0,.45)}
.pxg-card{padding:26px}
.pxg-tint{opacity:.48}
.pxg-card:hover .pxg-tint{opacity:.95}
.pxg-card:hover .pxg-obj{transform:translateY(-10px) rotate(-4deg) scale(1.03)}
.pxg-shdw{opacity:.85}
/* ---- 6. hero ---- */
.hero .eyebrow{justify-self:start;width:max-content;padding:9px 14px 9px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.85);box-shadow:var(--shadow-0);margin-bottom:16px}
.hero{background:radial-gradient(60% 40% at 18% 0%,rgba(0,149,255,.06),transparent 70%)}
.thero{box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.thc{box-shadow:var(--shadow-0)}
.thc-b img{transition:transform 1.2s var(--ease)}
.thc:hover img{transform:scale(1.02)}
.thc-c img{transform:none}
.thc-c:hover img{transform:scale(1.02)}
.thero-cards{gap:16px}
.tc{gap:16px}
.pxg-grid,.hpx-grid,.he-grid,.fmt-grid,.sym-grid,.cmp{gap:16px}
/* ---- 7. sections ---- */
.quiz-head h2{font-size:clamp(27px,3.2vw,40px)}
.cm-chip{font-weight:600;font-size:12.5px;padding:9px 15px}
.cm-node.is-on .cm-chip{background:var(--ink)}
.cm-lab{font-weight:500}
.cp-card{background:rgba(255,255,255,.78)}
.cp-card p{font-weight:500}
.split-image{box-shadow:var(--shadow-1)}
.number-grid > div{padding:16px 0}
.receipt{border-width:1.5px;box-shadow:14px 14px 0 0 var(--blue)}
.receipt:hover{box-shadow:18px 18px 0 0 var(--blue)}
.receipt-row strong{font-weight:700}
.cf-giant img{opacity:.10}
footer{box-shadow:0 1px 0 rgba(255,255,255,.4) inset}
.cf-soc a{background:rgba(255,255,255,.4)}
.cf-soc a:hover{background:#fff;border-color:transparent;box-shadow:var(--shadow-1)}
.wlc-wrap{box-shadow:var(--shadow-0)}
.sstage,.hstage{box-shadow:0 30px 60px -36px rgba(20,26,43,.5)}
.bmi-box{box-shadow:0 30px 60px -36px rgba(40,22,10,.6)}
.tl-story .ch-stage-in,.ch-stage-in{box-shadow:var(--shadow-1)}
.doc-page h2{border-top-color:var(--line)}
.mp-shell .hero{box-shadow:0 1px 0 rgba(255,255,255,.5) inset}
/* ---- 9. micro-interactions (kept subtle) ---- */
.js .reveal{transform:translateY(10px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.tc-photo,.px-tcard-img img,.fmt-card .fm img{transition:transform 1s var(--ease)}
.tc-banner:hover .tc-photo,.px-tcard:hover .px-tcard-img img,.fmt-card:hover .fm img{transform:scale(1.035)}
.faq-grid summary::after,.hfq-x{transition:transform .35s var(--spring),background-color .25s,border-color .25s}
.faq-grid details[open] summary::after,.hfq.open .hfq-x{background-color:#fff;border-color:var(--blue)}
.cx-pict,.wx-pict{filter:drop-shadow(0 10px 18px rgba(21,66,134,.16))}
.cm-dot,.cm-chip{transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
/* ---- mobile tune-up of the same rules ---- */
@media(max-width:700px){
h2{font-size:clamp(27px,7.4vw,31px);letter-spacing:-.026em}
.hero h1{letter-spacing:-.034em}
.section-copy,.pxg-sub,.cm-sub,.cp-sub,.hi-lead,.hpx-lead,.tsec-head p,.he-sub,.hero .hero-grid p:not(.eyebrow),.thero-side .sub{font-size:16px;line-height:1.58}
.hpx{padding:22px 22px 20px}
.pxg-card{padding:20px}
.pxg-card:hover,.hpx:hover,.tc-tile:hover,.wi-card:hover,.he-card:hover,.sym-card:hover,.fmt-card:hover,.px-tcard:hover,.cc:hover{transform:none}
}
/* ===== v9 (mobile two-up) ===== */
@media(max-width:700px){
/* reveal animations stay on for everything that is not inside a slider */
.js .wi-card.reveal:not(.on),.js .cp-card.reveal:not(.on),.js .ch-card.reveal:not(.on){opacity:0;transform:translateY(10px)}
.js .pxg-card.reveal{opacity:1;transform:none}
/* hero bento: 2 columns — weight loss + sexual health full width, the rest two-up */
.hero .tc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tc-wl,.tc-sh{grid-column:span 2;min-height:250px}
.tc-sk,.tc-hr{grid-column:span 1;min-height:210px;padding:16px}
.tc-tile{min-height:190px;padding:16px}
.tc-tlabel{font-size:19px}
.tc-trender{min-height:90px}
.tc-trender img{max-height:96px}
.tc-sk .tc-t,.tc-hr .tc-t{font-size:19px}
.tc-sk .tc-cta,.tc-hr .tc-cta{min-height:40px;padding:0 12px;font-size:13px}
/* how it works: 2 x 2 photo cards */
.ch-story .ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ch-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ch-card .ch-photo{aspect-ratio:4/3}
.ch-card h3{font-size:17px;padding:12px 14px 0;letter-spacing:-.02em}
.ch-card p{font-size:13.5px;line-height:1.45;padding:0 14px 14px;margin-top:4px}
.ch-card::after{right:10px;top:10px;font-size:11px;padding:6px 8px}
/* treatment hero cards: photo full width, the two others side by side */
.thero-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.thc{min-height:190px}
.thc-b{grid-column:1/-1;min-height:250px}
.thc-pen{height:clamp(120px,34vw,170px)}
/* understanding / formats / signs / honest version / journey / explore: two-up */
.he-grid,.fmt-grid,.sym-grid,.winfo-grid,.px-tcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.he-card,.sym-card{padding:18px}
.he-card h3,.sym-card h3{font-size:17px;padding-right:0}
.he-card::before{right:14px;top:14px}
.he-when{font-size:13.5px;margin:6px 0 12px}
.he-chips span{font-size:12px;padding:7px 10px}
.sym-card p{font-size:14px}
.he-grid > .he-card:last-child:nth-child(odd),.fmt-grid > .fmt-card:last-child:nth-child(odd),.sym-grid > .sym-card:last-child:nth-child(odd),.px-tcards > .px-tcard:last-child:nth-child(odd){grid-column:1/-1}
.fmt-card .fm{aspect-ratio:16/10}
.fmt-card .fb{padding:14px 16px 18px}
.fmt-card .fb h3{font-size:17px;padding-right:0}
.fmt-card .fb p{font-size:13.5px}
.fmt-card .freq{position:static;width:max-content;margin-top:6px}
.winfo-grid > div{display:contents}
.wi-card{padding:18px;gap:8px}
.wi-ico{width:48px;height:48px}
.wi-card h3{font-size:17px}
.wi-card p{font-size:14px;line-height:1.5}
.wi-card::after{right:14px;top:14px;font-size:11px}
.winfo-grid .wk{grid-column:1/-1;padding:18px 18px 18px 72px!important}
.winfo-grid .wk::before{left:18px;width:36px;height:36px}
.px-tcard-body{padding:12px 14px 16px}
.px-tcard-body b{font-size:16px}
.px-tcard-body em{font-size:12.5px}
.tl-story .tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tl-story .tl-grid > li{padding:18px;border:1px solid rgba(255,255,255,.9);border-radius:var(--r-md);background:rgba(255,255,255,.75);opacity:1;transform:none}
.tl-story .tl-grid > li::before{display:none}
.tl-story .tl-grid img{width:44px;height:44px;opacity:1;transform:none}
.tl-story .tl-grid h3{font-size:17px;opacity:1;transform:none}
.tl-story .tl-grid p{font-size:13.5px;opacity:1}
.tl-story .tl-grid b{font-size:11px}
/* privacy promises: three cards, two-up with the last full width */
.cp-grid{grid-template-columns:1fr 1fr;gap:10px}
.cp-card:last-child{grid-column:1/-1}
.cp-card{padding:14px 16px;gap:12px}
.cp-card p{font-size:14.5px}
}
/* ===== appended from effects.css master: /* ===== CURO-R201 : homepage hero - true alignment, brand pulse background, hero button ===== */
body.home .hero{position:relative;overflow:hidden}
body.home .hero > .wrap{position:relative;z-index:1}
body.home .hero .hero-grid--solo{display:grid !important;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr) !important;grid-template-areas:"eye eye" "h1 sub" "h1 btn" "h1 trust" !important;grid-template-rows:auto 1fr auto auto !important;column-gap:64px !important;row-gap:0 !important;align-items:end !important}
body.home .hero .hero-grid--solo > div{display:contents}
body.home .hero .hero-grid--solo > div > .eyebrow{grid-area:eye;align-self:start;margin:0 0 26px !important}
body.home .hero .hero-grid--solo > div > h1{grid-area:h1;align-self:end;margin:0 !important}
body.home .hero .hero-grid--solo > div > p:not(.eyebrow):not(.hero-trust){grid-area:sub;align-self:end;margin:0 0 24px !important;max-width:34ch;font-size:19px;line-height:1.55;color:#42536a}
body.home .hero .hero-grid--solo > div > .btn-blue{grid-area:btn;justify-self:start;align-self:end}
body.home .hero .hero-grid--solo > div > .hero-trust{grid-area:trust;margin:16px 0 4px !important;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#5b6b83;letter-spacing:.01em}
body.home .hero .hero-trust svg{width:16px;height:16px;flex:none;color:#0B6EF0}
@media(max-width:900px){
body.home .hero .hero-grid--solo{grid-template-columns:1fr !important;grid-template-areas:"eye" "h1" "sub" "btn" "trust" !important;grid-template-rows:auto auto auto auto auto !important}
body.home .hero .hero-grid--solo > div > h1{margin:0 0 22px !important}
body.home .hero .hero-grid--solo > div > p:not(.eyebrow):not(.hero-trust){margin:0 0 20px !important}
}
/* hero button: depth, glow, shine sweep */
body.home .hero .btn.btn-blue{position:relative;overflow:hidden;padding:17px 30px;font-size:16.5px;font-weight:700;letter-spacing:.005em;color:#fff !important;border-radius:999px;background:linear-gradient(135deg,#1aa3ff 0%,#0B6EF0 62%,#0a5fcf 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 18px 36px -16px rgba(11,110,240,.7),0 4px 12px -6px rgba(11,110,240,.45);transition:transform .28s cubic-bezier(.2,.9,.3,1.15),box-shadow .28s ease}
body.home .hero .btn.btn-blue:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 24px 44px -16px rgba(11,110,240,.8),0 6px 14px -6px rgba(11,110,240,.5)}
body.home .hero .btn.btn-blue::after{content:"";position:absolute;top:-10%;left:-60%;width:45%;height:120%;background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
body.home .hero .btn.btn-blue::after{transition:left .7s cubic-bezier(.2,.7,.2,1)}
body.home .hero .btn.btn-blue:hover::after{left:130%}
}
/* background: two soft blooms + the Curo pulse line */
.hero-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-fx i{position:absolute;display:block;border-radius:50%;will-change:transform}
.hero-fx .fx-a{width:760px;height:760px;top:-300px;right:-200px;background:radial-gradient(circle,rgba(0,149,255,.13) 0%,rgba(0,149,255,.05) 38%,rgba(0,149,255,0) 64%)}
.hero-fx .fx-b{width:640px;height:640px;bottom:-320px;left:-200px;background:radial-gradient(circle,rgba(255,171,128,.18) 0%,rgba(255,171,128,.06) 40%,rgba(255,171,128,0) 64%)}
.hero-ecg{position:absolute;left:38%;right:-6%;top:46%;height:120px;width:auto;overflow:visible}
.hero-ecg path{fill:none;stroke:#0095FF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hero-ecg .ecg-base{opacity:.16}
.hero-ecg .ecg-pulse{opacity:0;stroke:#2eaaff;filter:drop-shadow(0 0 6px rgba(0,149,255,.65))}
@media (prefers-reduced-motion:no-preference){
.hero-fx .fx-a{animation:heroBloomA 26s ease-in-out infinite alternate}
.hero-fx .fx-b{animation:heroBloomB 30s ease-in-out infinite alternate}
.hero-ecg .ecg-base{stroke-dasharray:1800;stroke-dashoffset:1800;animation:ecgDraw 2.6s cubic-bezier(.2,.7,.2,1) .35s forwards}
.hero-ecg .ecg-pulse{opacity:.75;stroke-dasharray:120 1700;stroke-dashoffset:1820;animation:ecgPulse 7s linear 3s infinite}
}
@keyframes heroBloomA{from{transform:translate(0,0)}to{transform:translate(-4%,5%)}}
@keyframes heroBloomB{from{transform:translate(0,0)}to{transform:translate(5%,-4%)}}
@keyframes ecgDraw{to{stroke-dashoffset:0}}
@keyframes ecgPulse{to{stroke-dashoffset:0}}
@media(max-width:900px){.hero-ecg{left:-10%;right:-10%;top:58%}}
/* R201b: hero fx anchored to the headline block (section also holds the cards); tighter right stack */
.hero-ecg{top:200px !important;height:110px !important;left:40% !important;right:-4% !important}
.hero-fx .fx-a{top:-320px !important;right:-220px !important;bottom:auto !important}
.hero-fx .fx-b{top:40px !important;bottom:auto !important;left:-280px !important}
body.home .hero .hero-grid--solo > div > p:not(.eyebrow):not(.hero-trust){max-width:none !important;margin:0 0 20px !important;font-size:18.5px !important}
body.home .hero .hero-grid--solo > div > .hero-trust{margin:12px 0 2px !important}
@media(max-width:900px){.hero-ecg{display:none !important}}
/* R201c: hero section must not clip the bento card shadows; the fx layer clips itself */
body.home .hero{overflow:visible !important}
/* R202: nav breathing room, eyebrow becomes the Canadian pill, pulse line retired, blooms a touch warmer */
body.home .nav{padding:8px 0 !important}
body.home .nav .nav-in{min-height:84px}
body.home .nav .nav-in a:not(.btn):not([class*=btn]){padding:10px 14px !important}
body.home .hero .eyebrow{display:inline-flex !important;align-items:center;gap:9px;text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;font-weight:600 !important;line-height:1 !important;color:#0a1628 !important;padding:10px 16px 10px 13px !important;border-radius:999px !important;background:#fff !important;border:1px solid #e3e9f2 !important;box-shadow:0 6px 18px -12px rgba(10,22,40,.35) !important}
body.home .hero .eyebrow::before,body.home .hero .eyebrow::after{content:none !important;display:none !important}
body.home .hero .eyebrow .eb-leaf{font-size:15px;line-height:1}
.hero-ecg{display:none !important}
.hero-fx .fx-a{background:radial-gradient(circle,rgba(0,149,255,.17) 0%,rgba(0,149,255,.06) 38%,rgba(0,149,255,0) 64%) !important}
.hero-fx .fx-b{background:radial-gradient(circle,rgba(255,171,128,.22) 0%,rgba(255,171,128,.08) 40%,rgba(255,171,128,0) 64%) !important}
/* ===== R203 : "Curo classic" palette, homepage only, colours only (2026-09-01) =====
Porcelain #F4F1EC ground · Ink #12151F buttons · Mist #E4E9EE · Sand #EBE2D6 · Slate #5B7A9B · Indigo Night #14183A · Curo Blue kept for highlight words, links, pulse */
body.home{background:#F4F1EC !important}
body.home .nav{background:rgba(244,241,236,.86) !important}
/* buttons: ink pills, blue retired from buttons */
body.home .btn-blue, body.home a.btn-blue, body.home .nav .btn-white{background:#12151F !important;background-image:none !important;color:#fff !important;box-shadow:0 12px 26px -16px rgba(18,21,31,.55) !important}
body.home .btn-blue:hover, body.home .nav .btn-white:hover{background:#262a38 !important}
body.home footer .cf-cta{background:#fff !important;background-image:none !important;color:#12151F !important;box-shadow:0 12px 26px -16px rgba(0,0,0,.6) !important}
body.home footer .cf-cta:hover{background:#eef1f6 !important}
/* section eyebrows: ink, quiet; hero pill already ink */
body.home .eyebrow:not(.hero .eyebrow){color:rgba(18,21,31,.62) !important}
body.home .eyebrow:not(.hero .eyebrow)::before{background:rgba(18,21,31,.45) !important;box-shadow:none !important}
/* light bands */
body.home #quiz.rd-band{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%) !important}
body.home .split.rd-band{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%) !important}
body.home #first-month{background:#EEF1F4 !important;background-image:none !important}
body.home .chow, body.home #how{background:#fff !important}
/* privacy: slate photo band, white type (the hims move) */
body.home #privacy{background:linear-gradient(160deg,#5B7A9B 0%,#4E6B8C 60%,#43607F 100%) !important}
body.home #privacy :is(h2,h3,p,li,span,strong,small){color:#fff !important}
body.home #privacy .eyebrow{color:rgba(255,255,255,.72) !important}
body.home #privacy .eyebrow::before{background:rgba(255,255,255,.6) !important}
/* pricing: indigo night with a slate glow */
body.home #pricing{background:linear-gradient(160deg,#14183A 0%,#1E2350 62%,#5B7A9B 175%) !important}
/* quiz cards */
body.home .tc-banner.tc-wl{background:linear-gradient(160deg,#EBE2D6 0%,#DCCFBF 100%) !important}
body.home .tc-banner.tc-wl .tc-scrim, body.home .tc-scrim--wl{background:none !important}
body.home .tc-banner.tc-wl .tc-copy, body.home .tc-banner.tc-wl .tc-copy *{color:#12151F !important;text-shadow:none !important}
body.home .tc-sh .tc-scrim{background:linear-gradient(100deg,rgba(60,82,110,.94) 0%,rgba(60,82,110,.62) 42%,rgba(60,82,110,.18) 100%) !important}
body.home .tc-sh .tc-copy, body.home .tc-sh .tc-copy *{color:#fff !important}
body.home .tc-sk .tc-scrim{background:linear-gradient(100deg,rgba(228,233,238,.97) 0%,rgba(228,233,238,.86) 22%,rgba(228,233,238,.5) 42%,rgba(228,233,238,0) 62%) !important}
body.home .tc-hr .tc-scrim{background:linear-gradient(100deg,rgba(244,241,236,.97) 0%,rgba(244,241,236,.86) 22%,rgba(244,241,236,.5) 42%,rgba(244,241,236,0) 62%) !important}
/* footer: indigo night stops under the photo background */
html body.home footer{background-image:url(../images/footer-bg.webp),linear-gradient(180deg,#1E2350 0%,#14183A 40%,#0F1230 100%) !important}
/* R203b: explicit dark-band text, footer stack restated, quiz pills, card copy, programs tint */
body.home #pricing :is(h2,h3,li,strong){color:#fff !important}
body.home #pricing p{color:rgba(255,255,255,.78) !important}
body.home #pricing .eyebrow{color:rgba(255,255,255,.7) !important}
body.home #pricing .eyebrow::before{background:rgba(255,255,255,.6) !important}
html body.home footer{background-color:#0F1230 !important;background-image:url(../images/footer-bg.webp),linear-gradient(180deg,#1E2350 0%,#14183A 40%,#0F1230 100%) !important;background-size:cover,auto !important;background-position:center top,0 0 !important;background-repeat:no-repeat,repeat !important;background-blend-mode:screen,normal !important}
body.home footer .cf-col a, body.home footer .cf-mail{color:#b9c7e2 !important}
body.home footer .cf-col a:hover{color:#fff !important}
body.home footer .cf-tag, body.home footer .cf-legal, body.home footer p, body.home footer .cf-soc a{color:#93a5c8 !important}
body.home footer .cf-legal a{color:#aebdda !important}
body.home .tc-cta{background:#fff !important;background-image:none !important;color:#12151F !important}
body.home .tc-sk .tc-copy, body.home .tc-sk .tc-copy *, body.home .tc-hr .tc-copy, body.home .tc-hr .tc-copy *{color:#12151F !important;text-shadow:none !important}
body.home #programs .pxg-card:nth-child(1) .pxg-tint{background:linear-gradient(160deg,#F1EAE0 0%,#E6DCCE 100%) !important}
/* R203c: receipt card labels, footer brand + giant mark, program tints on-palette */
body.home #pricing .receipt, body.home #pricing .receipt :is(span,div,b,p,h3,h4,em){color:#12151F !important}
body.home #pricing .receipt strong{color:#0B6EF0 !important}
body.home footer .brand, body.home footer .cf-brand, body.home footer .brand svg{color:#fff !important;fill:currentColor}
body.home footer .cf-giant img{opacity:.9 !important;filter:none !important}
body.home #programs .pxg-card:nth-child(2) .pxg-tint, body.home #programs .pxg-card:nth-child(3) .pxg-tint, body.home #programs .pxg-card:nth-child(5) .pxg-tint{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%) !important}
body.home #programs .pxg-card:nth-child(4) .pxg-tint{background:linear-gradient(160deg,#EEF1F4 0%,#E4E9EE 100%) !important}
body.home #programs .pxg-card:nth-child(6) .pxg-tint{background:linear-gradient(160deg,#F1EAE0 0%,#E6DCCE 100%) !important}
/* R203d: homepage footer uses the black logo file; restore the inversion my filter:none removed (hue-rotate keeps the pulse blue) */
body.home footer .brand img, body.home footer .cf-brand img, body.home footer .cf-giant img{filter:invert(1) hue-rotate(180deg) !important}
/* ===== R204 : homepage polish round - Raven-size glass header, tighter rhythm, card fixes, pen fan, values section, glass programs, readable promises (2026-09-02) ===== */
/* header: Raven size and Apple glass */
body.home .nav{padding:0 !important;background:rgba(244,241,236,.42) !important;-webkit-backdrop-filter:blur(15px) saturate(1.4) !important;backdrop-filter:blur(15px) saturate(1.4) !important;border-bottom:1px solid rgba(18,21,31,.06) !important;box-shadow:none !important}
body.home .nav .nav-in{min-height:64px !important;padding-top:0 !important;padding-bottom:0 !important}
body.home .nav img{height:24px !important;width:auto !important}
body.home .nav .nav-in a:not(.btn):not([class*=btn]){font-size:15px !important;padding:8px 12px !important}
body.home .nav .btn, body.home .nav [class*=btn]{height:40px !important;padding:0 16px !important;font-size:14px !important;display:inline-flex !important;align-items:center !important;gap:6px}
/* tighter rhythm */
body.home .hero{padding-top:40px !important;padding-bottom:32px !important}
body.home .hero .eyebrow{margin-bottom:18px !important}
body.home main > section.section{padding-top:72px !important;padding-bottom:72px !important}
body.home .rd-band{padding-top:56px !important;padding-bottom:56px !important}
body.home #first-month, body.home .split.rd-band, body.home #privacy{margin-top:22px !important;margin-bottom:22px !important}
/* sexual health card: softer slate, readable pill */
body.home .tc-sh .tc-scrim{background:linear-gradient(100deg,rgba(60,82,110,.74) 0%,rgba(60,82,110,.40) 44%,rgba(60,82,110,.10) 100%) !important}
body.home .tc-sh .tc-cta, body.home .tc-sh .tc-cta *{color:#12151F !important}
/* weight-loss card: real pens fanning up from the bottom edge, one tablet drifting */
body.home .tc-wl .tc-stage{overflow:hidden}
body.home .tc-fan{position:absolute;right:2%;bottom:-6%;width:62%;height:118%;pointer-events:none}
body.home .tc-fanpen{position:absolute;bottom:0;height:112%;width:auto;transform-origin:50% 100%;filter:drop-shadow(0 22px 26px rgba(10,22,40,.28))}
body.home .fp-a{left:4%;transform:rotate(-20deg) translateY(10%)}
body.home .fp-b{left:34%;transform:rotate(-3deg) translateY(2%);z-index:2}
body.home .fp-c{left:60%;transform:rotate(15deg) translateY(12%)}
body.home .tc-fantab{position:absolute;left:8%;top:14%;width:22%;height:auto;filter:drop-shadow(0 14px 18px rgba(10,22,40,.25));transform:rotate(-12deg)}
@media (prefers-reduced-motion:no-preference){
body.home .tc-fantab{animation:tabdrift 6s ease-in-out infinite alternate}
@keyframes tabdrift{from{transform:rotate(-12deg) translateY(0)}to{transform:rotate(-8deg) translateY(-8px)}}
}
@media(max-width:900px){body.home .tc-fan{width:78%;right:-6%}body.home .tc-fantab{display:none}}
/* values section (replaces the quiz band) */
body.home .values{padding-top:64px !important;padding-bottom:56px !important}
body.home .values .reveal{opacity:1 !important;transform:none !important;visibility:visible !important}
body.home .val-head{max-width:720px;margin:0 0 40px}
body.home .val-head .section-copy{margin-top:10px;color:#4a5462}
body.home .val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
body.home .val h3{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:18px 0 8px;color:#12151F}
body.home .val p{font-size:15px;line-height:1.6;color:#4a5462;margin:0;max-width:30ch}
body.home .val-ico{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -2px 6px rgba(10,22,40,.08),0 12px 24px -14px rgba(10,22,40,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#12151F}
body.home .val-ico svg{width:26px;height:26px;overflow:visible}
@media (prefers-reduced-motion:no-preference){
body.home .val-ico{animation:valfloat 4.4s ease-in-out infinite alternate}
body.home .val:nth-child(2) .val-ico{animation-delay:-1.1s}body.home .val:nth-child(3) .val-ico{animation-delay:-2.2s}body.home .val:nth-child(4) .val-ico{animation-delay:-3.3s}
@keyframes valfloat{from{transform:translateY(0)}to{transform:translateY(-4px)}}
body.home .val-ico .pulse{stroke-dasharray:30;stroke-dashoffset:30;animation:valdraw 2.8s ease-out infinite}
@keyframes valdraw{0%{stroke-dashoffset:30}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
body.home .val-ico .hand{transform-box:view-box;transform-origin:12px 12px;animation:valhand 8s linear infinite}
@keyframes valhand{to{transform:rotate(360deg)}}
body.home .val-ico .d1,body.home .val-ico .d2,body.home .val-ico .d3{transform-box:view-box;animation:valdot 1.8s ease-in-out infinite}
body.home .val-ico .d2{animation-delay:.2s}body.home .val-ico .d3{animation-delay:.4s}
@keyframes valdot{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
body.home .val-ico .tag{transform-box:view-box;transform-origin:5px 5px;animation:valsway 3.8s ease-in-out infinite alternate}
@keyframes valsway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
}
@media(max-width:1000px){body.home .val-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:560px){body.home .val-grid{grid-template-columns:1fr}}
/* programs: prominent backdrop, Apple glass cards, real shadows under every object */
body.home #programs{position:relative;overflow:hidden;border-radius:44px;margin:22px 14px !important;background:linear-gradient(160deg,#D7E1EC 0%,#E6E1D7 52%,#D3DDE8 100%) !important;padding-top:64px !important;padding-bottom:64px !important}
body.home #programs::before,body.home #programs::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px)}
body.home #programs::before{width:620px;height:620px;left:-160px;top:-200px;background:radial-gradient(circle,rgba(91,122,155,.42),rgba(91,122,155,0) 66%)}
body.home #programs::after{width:560px;height:560px;right:-140px;bottom:-220px;background:radial-gradient(circle,rgba(217,198,170,.55),rgba(217,198,170,0) 66%)}
body.home #programs .wrap{position:relative;z-index:2}
body.home #programs .pxg-card{background:rgba(255,255,255,.5) !important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.72) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 28px 56px -32px rgba(10,22,40,.45) !important}
body.home #programs .pxg-card .pxg-tint{opacity:.45 !important}
body.home #programs .pxg-card img{filter:drop-shadow(0 24px 26px rgba(10,22,40,.42)) !important}
/* promises band: dark glass pills with white type */
body.home #privacy .cp-card{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.3) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
body.home #privacy .cp-card, body.home #privacy .cp-card *{color:#fff !important}
/* R204b: desktop burger hidden again, pen fan rises from the card edge like Raven, values subline width */
@media(min-width:901px){body.home .nav button.menu-btn{display:none !important}}
body.home .nav button.menu-btn{width:40px;height:40px;padding:0 !important}
body.home .tc-fan{width:68%;right:0;bottom:0;height:100%}
body.home .tc-fanpen{height:132%;bottom:-60%;filter:drop-shadow(0 18px 22px rgba(10,22,40,.30))}
body.home .fp-a{left:2%;transform:rotate(-22deg)}
body.home .fp-b{left:31%;transform:rotate(-4deg);z-index:2}
body.home .fp-c{left:60%;transform:rotate(15deg)}
body.home .tc-fantab{top:auto;bottom:40%;left:4%;width:24%}
body.home .val-head .section-copy{max-width:640px}
/* R204c: couple card scrim - kill stacked layers, keep one light slate tint + legibility shade; pen fan placed per image */
body.home .tc-sh .tc-scrim::before, body.home .tc-sh .tc-scrim::after{content:none !important;display:none !important}
body.home .tc-sh .tc-scrim{background:linear-gradient(100deg,rgba(60,82,110,.62) 0%,rgba(60,82,110,.28) 40%,rgba(60,82,110,.06) 100%),linear-gradient(0deg,rgba(20,28,42,.45) 0%,rgba(20,28,42,0) 48%) !important;opacity:1 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
body.home .tc-sh .tc-stage img{filter:none !important;opacity:1 !important}
/* pens: the source files are square canvases with the pen centred, so each one is placed by hand */
body.home .tc-fan{width:70%;right:-2%;bottom:0;height:100%}
body.home .tc-fanpen{height:auto;bottom:auto;top:auto}
body.home .fp-a{width:78%;left:-16%;bottom:-26%;transform:rotate(-8deg)}
body.home .fp-b{width:58%;left:24%;bottom:-38%;transform:rotate(-6deg);z-index:2}
body.home .fp-c{width:58%;left:50%;bottom:-40%;transform:rotate(12deg)}
body.home .tc-fantab{top:12%;bottom:auto;left:6%;width:22%}
/* cluster geometry note removed, CURO-R243 */
body.home .tc-fan{width:72%;right:-3%}
body.home .fp-a{width:66%;left:-14%;bottom:-20%;transform:rotate(-6deg);z-index:1}
body.home .fp-b{width:80%;left:12%;bottom:-44%;transform:rotate(-5deg);z-index:3}
body.home .fp-c{width:80%;left:42%;bottom:-46%;transform:rotate(12deg);z-index:2}
body.home .tc-fantab{top:10%;left:4%;width:20%}
/* ===== R205 : nav centred, maple ticker, slate hover on programs, bigger FAQ, popping socials (2026-09-02) ===== */
/* nav: logo left, links centred, actions right */
body.home .nav .nav-in{justify-content:space-between !important}
body.home .nav .nav-in .brand{margin-left:-14px}
body.home .nav .nav-in .nav-links{margin:0 auto !important}
/* ticker: animated maple leaf separators */
body.home .marquee__item::before, body.home .marquee__item::after, body.home .marquee [class*="sep"], body.home .marquee [class*="dot"], body.home .marquee [class*="globe"]{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D8352B' d='M12 2l1.7 3.3 2.2-.6-.4 2.6 2.4-.9-1 2.5 2.6.6-2 1.9 1.9 1.3-3.7.4.4 3.4L12 15.8l-4.1 2.7.4-3.4-3.7-.4 1.9-1.3-2-1.9 2.6-.6-1-2.5 2.4.9-.4-2.6 2.2.6z'/%3E%3Cpath stroke='%23D8352B' stroke-width='1.6' stroke-linecap='round' d='M12 15.8v6'/%3E%3C/svg%3E") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;background-color:transparent !important;border:0 !important;width:18px !important;height:18px !important;opacity:1 !important;filter:none !important;transform-origin:50% 90%}
@media (prefers-reduced-motion:no-preference){
body.home .marquee__item::before, body.home .marquee__item::after, body.home .marquee [class*="sep"], body.home .marquee [class*="dot"], body.home .marquee [class*="globe"]{animation:leafsway 3.6s ease-in-out infinite alternate}
@keyframes leafsway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
}
/* programs: the whole card turns slate on hover, the corner circle goes */
body.home #programs .pxg-card{transition:background-color .35s ease,transform .35s ease,box-shadow .35s ease}
body.home #programs .pxg-card .pxg-chev{display:none !important}
body.home #programs .pxg-card .pxg-title{transition:color .3s ease}
body.home #programs .pxg-card:hover{background:#5B7A9B !important;border-color:rgba(255,255,255,.35) !important;transform:translateY(-4px)}
body.home #programs .pxg-card:hover .pxg-title{color:#fff !important}
body.home #programs .pxg-card:hover .pxg-tint{opacity:0 !important}
body.home #programs .pxg-card:hover img{filter:drop-shadow(0 30px 30px rgba(10,22,40,.5)) !important}
/* FAQ: bigger heading, pictogram gone */
body.home .faq-section h2{font-size:clamp(44px,4.6vw,66px) !important;line-height:1.02 !important}
body.home .faq-section .cx-pict{display:none !important}
/* footer socials: glass rings, white icons, blue on hover, soft breathing ring */
body.home footer .cf-soc a{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.38) !important;color:#fff !important;box-shadow:0 0 0 0 rgba(0,149,255,.0);transition:background .3s ease,transform .3s ease,box-shadow .3s ease}
body.home footer .cf-soc a svg{opacity:1 !important}
body.home footer .cf-soc a:hover{background:#0095FF !important;border-color:#0095FF !important;transform:translateY(-3px) scale(1.06);box-shadow:0 12px 26px -10px rgba(0,149,255,.7)}
@media (prefers-reduced-motion:no-preference){
body.home footer .cf-soc a{animation:socbreathe 4.5s ease-in-out infinite}
body.home footer .cf-soc a:nth-child(2){animation-delay:-2.2s}
@keyframes socbreathe{0%,100%{box-shadow:0 0 0 0 rgba(0,149,255,.35)}50%{box-shadow:0 0 0 9px rgba(0,149,255,0)}}
body.home footer .cf-soc a:hover{animation:none}
}
/* R205b: the ticker separators are img.marquee__pill - now the maple leaf file, swaying */
body.home img.marquee__pill{width:18px !important;height:18px !important;opacity:1 !important;filter:none !important;transform-origin:50% 92%}
@media (prefers-reduced-motion:no-preference){body.home img.marquee__pill{animation:leafsway 3.6s ease-in-out infinite alternate}}
/* R206: FAQ heading at Raven size and lifted; ticker mark monochrome */
body.home .faq-section h2{font-size:56px !important;line-height:1.04 !important}
body.home .faq-section .faq-grid > div:first-child{padding-top:0 !important;margin-top:0 !important;transform:none !important;opacity:1 !important}
body.home .faq-section{padding-top:64px !important}
body.home img.marquee__pill{width:20px !important;height:20px !important;opacity:.55 !important}
/* R206b: Raven's exact leaf glyph, 16px, solid ink, no sway (matches their ticker mark) */
body.home img.marquee__pill{width:16px !important;height:16px !important;opacity:.9 !important;animation:none !important;transform:none !important}
/* R207-home: how-it-works gets the same soft blooms as the other light sections */
body.home #how, body.home .chow{background:radial-gradient(720px 440px at 94% 0%,rgba(91,122,155,.13),rgba(91,122,155,0) 62%),radial-gradient(620px 420px at 0% 100%,rgba(217,198,170,.24),rgba(217,198,170,0) 64%),#fff !important}
/* ===== R207 : category-page classic skin, scoped body.rd-treat (weight-loss first) 2026-09-02 ===== */
body.rd-treat{background:#F4F1EC !important;color:#12151F}
/* nav: same Raven-size glass as home */
body.rd-treat .nav{padding:0 !important;background:rgba(244,241,236,.42) !important;-webkit-backdrop-filter:blur(15px) saturate(1.4) !important;backdrop-filter:blur(15px) saturate(1.4) !important;border-bottom:1px solid rgba(18,21,31,.06) !important;box-shadow:none !important}
body.rd-treat .nav .nav-in{min-height:64px !important;padding-top:0 !important;padding-bottom:0 !important;justify-content:space-between !important}
body.rd-treat .nav .nav-in .brand{margin-left:-14px}
body.rd-treat .nav .nav-in .nav-links{margin:0 auto !important}
body.rd-treat .nav img{height:24px !important;width:auto !important}
body.rd-treat .nav .nav-in a:not(.btn):not([class*=btn]){font-size:15px !important;padding:8px 12px !important;color:#12151F !important}
body.rd-treat .nav .btn, body.rd-treat .nav [class*=btn]{height:40px !important;padding:0 16px !important;font-size:14px !important;display:inline-flex !important;align-items:center !important;gap:6px}
body.rd-treat .nav .btn-white{background:#12151F !important;background-image:none !important;color:#fff !important}
@media(min-width:901px){body.rd-treat .nav button.menu-btn{display:none !important}}
/* hero: #wl-intro becomes the page opener, copy left, parallax cluster right */
body.rd-treat .hintro{position:relative;overflow:hidden;padding:52px 0 40px !important;background:radial-gradient(720px 460px at 92% 4%,rgba(0,149,255,.13),rgba(0,149,255,0) 62%),radial-gradient(640px 440px at 2% 100%,rgba(255,171,128,.18),rgba(255,171,128,0) 64%),#F4F1EC !important}
body.rd-treat .hintro .wl-pen-a, body.rd-treat .hintro .wl-pen-b{display:none !important}
body.rd-treat .hintro .hi-wrap{display:grid !important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;text-align:left !important}
body.rd-treat .hintro .hi-copy{max-width:640px;margin:0 !important;text-align:left !important}
body.rd-treat .hintro .eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:none !important;letter-spacing:0 !important;font-size:14px !important;font-weight:600 !important;color:#12151F !important;padding:10px 16px 10px 13px !important;border-radius:999px;background:#fff;border:1px solid #e3e9f2;box-shadow:0 6px 18px -12px rgba(10,22,40,.35);margin-bottom:22px}
body.rd-treat .hintro .eyebrow::before{content:none !important}
body.rd-treat .hintro h2{font-size:clamp(44px,5vw,72px) !important;line-height:1.02 !important;letter-spacing:-.03em;margin:0 0 20px !important;text-align:left !important}
body.rd-treat .hintro h2 span{color:#0095FF}
body.rd-treat .hintro .hi-lead{font-size:17px !important;line-height:1.6;color:#4a5462 !important;max-width:54ch;margin:0 auto 0 0 !important;text-align:left !important}
body.rd-treat .hintro .hi-lead + .hi-lead{display:none}
body.rd-treat .hintro .hi-acts{display:flex !important;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-start !important;margin-top:26px}
body.rd-treat .hintro .hi-primary{background:#12151F !important;background-image:none !important;color:#fff !important;border-radius:999px;padding:15px 26px !important;font-weight:600;box-shadow:0 12px 26px -16px rgba(18,21,31,.55)}
body.rd-treat .hintro .hi-primary:hover{background:#262a38 !important}
body.rd-treat .hintro .hi-link{display:inline-flex;align-items:center;padding:14px 22px;border-radius:999px;background:#fff;border:1.5px solid #d5e0ef;color:#12151F !important;font-weight:600;text-decoration:none !important}
body.rd-treat .hintro .hi-trust{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;color:#4a5462}
body.rd-treat .hintro .hi-trust svg{width:16px;height:16px;color:#0B6EF0}
body.rd-treat .wl-cluster{position:relative;height:540px;pointer-events:none}
body.rd-treat .wl-cluster img{position:absolute;filter:drop-shadow(0 26px 30px rgba(10,22,40,.3));will-change:transform}
body.rd-treat .cl-a{left:-4%;top:6%;width:64%}
body.rd-treat .cl-b{left:38%;top:-4%;width:48%;z-index:2}
body.rd-treat .cl-c{left:60%;top:26%;width:46%}
body.rd-treat .cl-t1{left:14%;top:2%;width:13%}
body.rd-treat .cl-t2{left:70%;top:0;width:11%}
body.rd-treat .cl-t3{left:6%;top:66%;width:12%}
@media(max-width:1000px){body.rd-treat .hintro .hi-wrap{grid-template-columns:1fr}body.rd-treat .wl-cluster{height:340px}}
/* triptych with frosted key points (Ro pattern) */
body.rd-treat .trip{padding:8px 0 64px !important;background:transparent !important}
body.rd-treat .trip-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px}
body.rd-treat .trip-grid img{width:100%;height:440px;object-fit:cover;border-radius:22px;display:block;background:#E4E9EE}
body.rd-treat .trip-card{position:relative;z-index:2;margin:-92px auto 0;width:min(940px,92%);background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.85);border-radius:22px;padding:34px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 28px 56px -32px rgba(10,22,40,.4)}
body.rd-treat .trip-card div{text-align:center;font-size:15.5px;color:#12151F;font-weight:600;line-height:1.4;max-width:24ch;margin:0 auto}
body.rd-treat .trip-card svg{width:34px;height:34px;margin:0 auto 12px;display:block;color:#12151F}
@media(max-width:900px){body.rd-treat .trip-grid{grid-template-columns:1fr 1fr}body.rd-treat .trip-grid img:last-child{display:none}body.rd-treat .trip-card{grid-template-columns:1fr;margin-top:-40px}}
/* products band: glass cards on the slate-to-sand gradient, ink type */
body.rd-treat .hprod{position:relative;overflow:hidden;border-radius:44px;margin:22px 14px !important;padding:64px 0 !important;background:linear-gradient(160deg,#D7E1EC 0%,#E6E1D7 52%,#D3DDE8 100%) !important}
body.rd-treat .hprod::before, body.rd-treat .hprod::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px)}
body.rd-treat .hprod::before{width:620px;height:620px;left:-160px;top:-200px;background:radial-gradient(circle,rgba(91,122,155,.42),rgba(91,122,155,0) 66%)}
body.rd-treat .hprod::after{width:560px;height:560px;right:-140px;bottom:-220px;background:radial-gradient(circle,rgba(217,198,170,.55),rgba(217,198,170,0) 66%)}
body.rd-treat .hprod > .wrap, body.rd-treat .hprod .hpx-grid{position:relative;z-index:2}
body.rd-treat .hprod .eyebrow{color:rgba(18,21,31,.62) !important}
body.rd-treat .hprod h2, body.rd-treat .hprod .hpx-lead, body.rd-treat .hprod .hpx-foot{color:#12151F !important}
body.rd-treat .hprod .hpx-lead, body.rd-treat .hprod .hpx-foot{color:#4a5462 !important}
body.rd-treat .hpx{background:rgba(255,255,255,.58) !important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.8) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 28px 56px -32px rgba(10,22,40,.45) !important;transition:transform .35s ease,background-color .35s ease}
body.rd-treat .hpx:hover{transform:translateY(-4px);background:rgba(255,255,255,.8) !important}
body.rd-treat .hpx-art2 img{filter:drop-shadow(0 22px 26px rgba(10,22,40,.38)) !important}
body.rd-treat .hpx-go{background:#12151F !important}
/* education cards: Mist band, monochrome pictograms */
body.rd-treat .winfo{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%) !important;border-radius:44px;margin:22px 14px !important;padding:64px 0 !important}
body.rd-treat .winfo .eyebrow{color:rgba(18,21,31,.62) !important}
body.rd-treat .wi-card{background:rgba(255,255,255,.72) !important;border:1px solid rgba(255,255,255,.9) !important;border-radius:20px !important;box-shadow:inset 0 1px 0 #fff,0 18px 40px -28px rgba(10,22,40,.35) !important}
body.rd-treat .wi-ico{width:46px !important;height:46px !important;object-fit:contain;filter:grayscale(1) contrast(1.15) !important;opacity:.85}
/* pricing band + care + faq + explore */
body.rd-treat .hfaq{background:transparent !important}
body.rd-treat .wlc-btn{background:#12151F !important}
body.rd-treat .wlc-btn:hover{background:#262a38 !important}
body.rd-treat .hfaq-cta, body.rd-treat .btn-blue{background:#12151F !important;background-image:none !important;color:#fff !important}
html body.bw.rd-treat footer{background-image:url(../images/footer-bg.webp),linear-gradient(180deg,#1E2350 0%,#14183A 40%,#0F1230 100%) !important}
/* R207b: category clutter off, hero alignment, band colours by CSS (rd pages do not load effects.js) */
body.rd-treat .twrap.tpl, body.rd-treat .strap-in.tpl, body.rd-treat .strap-v2{display:none !important}
body.rd-treat .nav .nav-ca{display:none !important}
body.rd-treat .hintro h2{font-size:clamp(40px,4.4vw,60px) !important}
body.rd-treat .hintro .eyebrow{margin-left:0 !important;margin-right:auto !important}
body.rd-treat .hintro .hi-acts{text-align:left !important;justify-content:flex-start !important}
body.rd-treat .hintro .hi-acts > *{margin:0 !important}
body.rd-treat .hintro .hi-trust{justify-content:flex-start}
body.rd-treat #pricing, body.rd-treat .pricing{background:linear-gradient(160deg,#14183A 0%,#1E2350 62%,#5B7A9B 175%) !important}
body.rd-treat .hfaq, body.rd-treat #faq-sec{background:#F4F1EC !important}
body.rd-treat .px-other{background:linear-gradient(180deg,#14183A 0%,#1A1F48 52%,#1E2350 100%) !important}
body.rd-treat .tl-sec{background:radial-gradient(720px 440px at 94% 0%,rgba(91,122,155,.13),rgba(91,122,155,0) 62%),radial-gradient(620px 420px at 0% 100%,rgba(217,198,170,.24),rgba(217,198,170,0) 64%),#fff !important}
/* R207c: shelf cards uniform glass, clinic card ink, care band Sand, BMI sliders blue, floating pill ink */
body.rd-treat .hpx::before, body.rd-treat .hpx::after, body.rd-treat .hpx-art2::before, body.rd-treat .hpx-art2::after, body.rd-treat .hpx > span::before, body.rd-treat .hpx > span::after{background:none !important;background-image:none !important;box-shadow:none !important}
body.rd-treat .hpx, body.rd-treat .hpx.hpx-text, body.rd-treat .hpx.hpx-alt{background:rgba(255,255,255,.6) !important;background-image:none !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 28px 56px -32px rgba(10,22,40,.45) !important}
body.rd-treat .hpx h3, body.rd-treat .hpx .hpx-price, body.rd-treat .hpx .hpx-sub, body.rd-treat .hpx-alt, body.rd-treat .hpx-alt h3, body.rd-treat .hpx-alt p{color:#12151F !important}
body.rd-treat .hpx .hpx-price{color:#4a5462 !important}
body.rd-treat .hpx-chip{background:rgba(18,21,31,.06) !important;color:#12151F !important;border:1px solid rgba(18,21,31,.08) !important}
body.rd-treat .wlc-wrap{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%) !important}
body.rd-treat .wlc-wrap h2, body.rd-treat .wlc-wrap p{color:#12151F !important}
body.rd-treat .wlc-wrap p{color:#4a5462 !important}
html body.rd-treat .bmi-sec input[type=range]:not(#_):not(#__):not(#___){background:linear-gradient(90deg,#0095FF 0%,#0B6EF0 100%) !important;height:12px !important;border-radius:999px !important;border:0 !important;padding:0 !important}
html body.rd-treat .bmi-sec input[type=range]:not(#_):not(#__):not(#___)::-webkit-slider-runnable-track{background:transparent !important;height:12px !important}
html body.rd-treat .bmi-sec input[type=range]:not(#_):not(#__):not(#___)::-webkit-slider-thumb{-webkit-appearance:none !important;width:24px !important;height:24px !important;margin-top:-6px !important;border-radius:50% !important;background:#fff !important;border:3px solid #0B6EF0 !important;box-shadow:0 2px 10px rgba(11,110,240,.45) !important;cursor:pointer}
body.rd-treat .bmi-sec [class*="fill"], body.rd-treat .bmi-sec [class*="progress"]{background:#0095FF !important}
body.rd-treat [class*="float"], body.rd-treat [class*="sticky"], body.rd-treat [class*="fab"], body.rd-treat [class*="dock"] a, body.rd-treat a[class*="float"]{background:#12151F !important;background-image:none !important;color:#fff !important}
body.rd-treat .hpx-go{background:#12151F !important}
/* R207d: the sticky dock is a bar, not a pill - keep the bar transparent, make the pill ink; ghost button readable */
body.rd-treat .sticky.tpl, body.rd-treat div[class*="sticky"]{background:transparent !important;background-image:none !important;pointer-events:none}
body.rd-treat .sticky.tpl a, body.rd-treat .sticky.tpl .tbtn{pointer-events:auto}
body.rd-treat .tbtn-primary, body.rd-treat .sticky.tpl .tbtn{background:#12151F !important;background-image:none !important;color:#fff !important;box-shadow:0 14px 30px -14px rgba(18,21,31,.6) !important}
body.rd-treat .wlc-btn-ghost{background:#fff !important;color:#12151F !important;border:1.5px solid #d5e0ef !important}
body.rd-treat .wlc-btn-ghost:hover{border-color:#12151F !important}
/* R207e: hero action row and trust line flush left (the rd rule centred them with auto margins) */
body.rd-treat .hintro .hi-acts, body.rd-treat .hintro .hi-trust{margin-left:0 !important;margin-right:auto !important;width:auto !important;padding-left:0 !important}
/* ===== R208 : category pages = homepage, scoped body.rd-treat. Append after rd.css line 1769 (2026-09-02, rev 2 after skeptic round 1) =====
Every rule cites the rd.css line it beats. !important only where the beaten rule carries it.
Sub-blocks: a pricing, b footer, c explore band, d eyebrows+buttons, e product cards, f off-palette kills, g hero clusters, h nav+misc. */
/* R208a pricing port */
body.rd-treat #pricing :is(h2,h3,li,strong){color:#fff !important} /* twin of 1501; beats 56 (h2 var(--ink)) */
body.rd-treat #pricing p{color:rgba(255,255,255,.78) !important} /* twin of 1502; beats 379 */
body.rd-treat #pricing .eyebrow{color:rgba(255,255,255,.7) !important} /* twin of 1503; beats 380 peach-ink */
body.rd-treat #pricing .eyebrow::before{background:rgba(255,255,255,.6) !important;box-shadow:none !important} /* twin of 1504 + the box-shadow:none home gets from 1477; beats 381 orange halo */
body.rd-treat #pricing .receipt, body.rd-treat #pricing .receipt :is(span,div,b,p,h3,h4,em){color:#12151F !important} /* twin of 1514; beats the white rule above on the card (1,2,2) > (1,1,2) */
body.rd-treat #pricing .receipt strong{color:#0B6EF0 !important} /* twin of 1515; beats 705/707 var(--blue) */
body.rd-treat #pricing.rd-band{padding-top:56px !important;padding-bottom:56px !important} /* twin of 1535, scoped to the pricing band only (T2); beats 75 var(--band); no mobile branch, same as home */
body.rd-treat #pricing .wx-pw{pointer-events:none} /* parity with .cx-pict at 676; category wrapper is div.wx-pw > img.wx-pict (680/681) */
body.rd-treat #pricing .wx-pict{pointer-events:none} /* parity with 676 */
/* R208b footer port (exact homepage parity: 1473-1474, 1505-1509, 1516-1517, 1522, 1642-1649; the two contrast deltas from rev 1 (.cf-col h4, .cf-rule) are withdrawn, see open points) */
html body.bw.rd-treat footer{background-color:#0F1230 !important;background-image:url(../images/footer-bg.webp),linear-gradient(180deg,#1E2350 0%,#14183A 40%,#0F1230 100%) !important;background-size:cover,auto !important;background-position:center top,0 0 !important;background-repeat:no-repeat,repeat !important;background-blend-mode:screen,normal !important} /* twin of 1505; same (0,2,3) as 1734 and later, so every longhand the 398 shorthand reset is restated (T5) */
body.rd-treat footer{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:0;box-shadow:none} /* D4 merge: beats 398 margin-top/radius/padding-top and 1303 inset hairline at the seam; side margins stay 398 var(--edge), which R208c now shares */
body.rd-treat footer .cfw{padding-top:8px} /* small breathing room under the 120px explore tail (R208c); div.wrap.cfw exists on all four build pages (hair 255, skin 290, sx 187, wl 183) */
body.rd-treat footer .cf-cta{background:#fff !important;background-image:none !important;color:#12151F !important;box-shadow:0 12px 26px -16px rgba(0,0,0,.6) !important} /* twin of 1473; beats 91 blue + 1226 blue glow */
body.rd-treat footer .cf-cta:hover{background:#eef1f6 !important;box-shadow:0 14px 28px -16px rgba(0,0,0,.6) !important} /* twin of 1474; beats 92 + 1227 */
body.rd-treat footer .cf-col a, body.rd-treat footer .cf-mail{color:#b9c7e2 !important} /* twin of 1506; beats 412/404 */
body.rd-treat footer .cf-col a:hover{color:#fff !important} /* twin of 1507; beats 413 */
/* .cf-col h4 keeps 662 #0757C8 and .cf-rule keeps 414, exactly as the homepage renders them (bench-footer risk 1: change both pages together or neither) */
body.rd-treat footer .cf-tag, body.rd-treat footer .cf-legal, body.rd-treat footer p, body.rd-treat footer .cf-entity, body.rd-treat footer .cf-soc a{color:#93a5c8 !important} /* twin of 1508 (+ .cf-entity restated); beats 402/415/398 */
body.rd-treat footer .cf-legal a{color:#aebdda !important} /* twin of 1509; beats 416 */
body.rd-treat footer .brand, body.rd-treat footer .cf-brand, body.rd-treat footer .brand svg{color:#fff !important;fill:currentColor} /* twin of 1516 */
body.rd-treat footer .cf-giant img{opacity:.9 !important} /* twin of 1517 opacity; beats 418/1302 */
body.rd-treat footer .brand img, body.rd-treat footer .cf-brand img, body.rd-treat footer .cf-giant img{filter:invert(1) hue-rotate(180deg) !important} /* twin of 1522 (D3: black logo file stays in markup) */
body.rd-treat footer .cf-soc a{background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.38) !important;color:#fff !important;box-shadow:0 0 0 0 rgba(0,149,255,.0);transition:background .3s ease,transform .3s ease,box-shadow .3s ease} /* twin of 1642; beats 407/1304 and the #93a5c8 colour above (same spec, later) */
body.rd-treat footer .cf-soc a svg{opacity:1 !important} /* twin of 1643 */
body.rd-treat footer .cf-soc a:hover{background:#0095FF !important;border-color:#0095FF !important;box-shadow:0 12px 26px -10px rgba(0,149,255,.7)} /* twin of 1644 minus the lift; beats 408/1305 */
@media(hover:hover){
body.rd-treat footer .cf-soc a:hover{transform:translateY(-3px) scale(1.06)} /* the 1644 lift, pointer devices only so a tap never leaves it raised */
}
@media (prefers-reduced-motion:no-preference){
body.rd-treat footer .cf-soc a{animation:socbreathe 4.5s ease-in-out infinite} /* twin of 1646; @keyframes socbreathe already declared at 1648, not redeclared */
body.rd-treat footer .cf-soc a:nth-child(2){animation-delay:-2.2s} /* twin of 1647 */
body.rd-treat footer .cf-soc a:hover{animation:none} /* twin of 1649 */
}
body.rd-treat footer .tisi{border-top-color:rgba(255,255,255,.14)} /* ISI block, no home referent; beats 643 */
body.rd-treat footer .isi-d summary{color:#fff} /* beats 644 var(--ink) */
body.rd-treat footer .isi-body{color:#93a5c8} /* beats 648 var(--slate) */
body.rd-treat footer .isi-warn{color:#fff !important} /* beats 971 and the hormones.html inline style="color:#A6C0F0" (T10) */
body.rd-treat footer .tm{color:#93a5c8} /* beats 972 var(--mute) */
body.rd-treat footer .isi-x{background-color:rgba(255,255,255,.85)} /* 646 disc a touch brighter on Indigo; icon stays Ink */
/* R208c explore band */
body.rd-treat .px-other{border-radius:44px 44px 0 0;margin:26px var(--edge) 0;padding-bottom:120px;border:0} /* D4: beats 75 (32px radius) and 1243 rd-white hairline; side margin is the same var(--edge) token the footer keeps from 398 (15.07px at 1256, 12px at 1000, 8px under 700 via 1050), so the Indigo silhouette has no step at the seam; background stays 1745 (ends #1E2350, which the footer gradient starts on) */
body.rd-treat .px-other h2{color:#fff !important} /* beats 56 var(--ink); h2 span keeps 70 Curo Blue (T7: span not listed) */
body.rd-treat .px-other .px-head p:not(.eyebrow){color:rgba(255,255,255,.78)} /* any lead copy added to the head */
body.rd-treat .px-other .px-eye{color:rgba(255,255,255,.72) !important} /* (0,3,1) beats the R208d sitewide (0,2,1); beats 68 #0757C8 */
body.rd-treat .px-other .px-eye::before{background:#fff !important;box-shadow:none !important} /* beats 69 blue dot + halo */
body.rd-treat .px-tcard{background:#F4F1EC;border-color:rgba(255,255,255,.35)} /* beats 628 var(--bg) cream + 1235 border */
body.rd-treat .px-tcard:hover{background:#fff;border-color:rgba(255,255,255,.6)} /* beats 629 var(--g-hover) peach tail + 1236 */
body.rd-treat .px-tcard-img{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* Mist image well; beats 630 var(--g-peach) */
body.rd-treat .px-tcard-body b{color:#12151F} /* beats 634 var(--ink) */
body.rd-treat .px-tcard-body em{color:#4a5462} /* beats 635 var(--slate) */
body.rd-treat .px-tcard-go{background:#fff;color:#12151F;border-color:rgba(18,21,31,.08)} /* beats 636/1248 */
body.rd-treat .px-tcard:hover .px-tcard-go{background:#fff;color:#12151F;border-color:transparent} /* beats 638 blue circle */
@media(max-width:700px){body.rd-treat .px-other{margin-top:18px;padding-bottom:80px;border-radius:32px 32px 0 0}} /* mobile branch for the D4 geometry; sides stay var(--edge) (8px from 1050), same as the footer */
/* R208d eyebrow and buttons */
body.rd-treat :is(.eyebrow,.teye,.px-eye):where(:not(.hintro .eyebrow)){color:rgba(18,21,31,.62) !important} /* twin of 1476 at (0,2,1) via :where (C12/T1); beats 68 #0757C8, 471 */
body.rd-treat :is(.eyebrow,.teye,.px-eye):where(:not(.hintro .eyebrow))::before{background:rgba(18,21,31,.45) !important;box-shadow:none !important} /* twin of 1477; beats 69 blue dot + blue-soft halo (the dot 1717/1726 left behind) */
/* dark-band eyebrows AFTER the sitewide rule */
body.rd-treat #pricing .eyebrow{color:rgba(255,255,255,.7) !important} /* restated from R208a for ordering; (1,2,1) */
body.rd-treat #pricing .eyebrow::before{background:rgba(255,255,255,.6) !important;box-shadow:none !important}
body.rd-treat .px-other .px-eye{color:rgba(255,255,255,.72) !important} /* restated from R208c; (0,3,1) */
body.rd-treat .px-other .px-eye::before{background:#fff !important;box-shadow:none !important}
body.rd-treat .hstage .eyebrow, body.rd-treat .sstage .eyebrow, body.rd-treat #stage-check .eyebrow, body.rd-treat #concern-check .eyebrow, body.rd-treat .rd-blue .eyebrow, body.rd-treat .sx-women .eyebrow, body.rd-treat #for-women .eyebrow{color:rgba(255,255,255,.72) !important} /* (0,3,1)+ beats sitewide (0,2,1); beats 867 #8FC9FF; the women's band is section.sx-women.rd-band.rd-blue#for-women (sx 103), every one of its hooks listed */
body.rd-treat .hstage .eyebrow::before, body.rd-treat .sstage .eyebrow::before, body.rd-treat #stage-check .eyebrow::before, body.rd-treat #concern-check .eyebrow::before, body.rd-treat .rd-blue .eyebrow::before, body.rd-treat .sx-women .eyebrow::before, body.rd-treat #for-women .eyebrow::before{background:rgba(255,255,255,.6) !important;box-shadow:none !important} /* beats 868 blue halo */
/* .hprod .eyebrow stays Ink 62% via 1717 + the sitewide rule */
/* filled Ink pills: Ink shadow, #262a38 hover (twins of 1471/1472) */
body.rd-treat .nav .btn-white{box-shadow:0 12px 26px -16px rgba(18,21,31,.55) !important} /* twin of 1471 shadow; beats 1226 blue glow */
body.rd-treat .nav .btn-white:hover{background:#262a38 !important;box-shadow:0 14px 28px -16px rgba(18,21,31,.6) !important} /* twin of 1472; beats 1675 (important) and 1227 */
body.rd-treat .hfaq-cta, body.rd-treat .btn-blue, body.rd-treat .wlc-btn:not(.wlc-btn-ghost){box-shadow:0 12px 26px -16px rgba(18,21,31,.55)} /* beats 1226 blue glow under the Ink fills from 1731/1733 */
body.rd-treat .hfaq-cta:hover, body.rd-treat .btn-blue:hover, body.rd-treat .wlc-btn:not(.wlc-btn-ghost):hover{background:#262a38 !important;box-shadow:0 14px 28px -16px rgba(18,21,31,.6)} /* beats 1733/1731 (important) and 1227 glow */
body.rd-treat .hfaq-cta:active, body.rd-treat .btn-blue:active, body.rd-treat .wlc-btn:active, body.rd-treat .nav .btn-white:active{box-shadow:0 8px 18px -12px rgba(18,21,31,.5)} /* beats 1228 var(--shadow-cta) */
/* pills on dark bands: white with Ink text (twin of 1473) */
body.rd-treat .hs-cta, body.rd-treat .sxc-wrap .hs-cta{background:#fff;color:#12151F;border-color:transparent;box-shadow:0 12px 26px -16px rgba(0,0,0,.6)} /* beats 874, 949, 1127 (blue) and 1226 glow; every .hs-cta on the build pages sits on a dark band (hstage, sstage, #for-women Slate) */
body.rd-treat .hs-cta:hover, body.rd-treat .sxc-wrap .hs-cta:hover{background:#eef1f6;color:#12151F;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);transform:none} /* beats 875, 950, 1128 blue-ink and 1227; the lift is pointer-only below */
@media(hover:hover){
body.rd-treat .hs-cta:hover, body.rd-treat .sxc-wrap .hs-cta:hover{transform:translateY(-2px)} /* 875/1227 lift kept for pointer devices; a tap on iOS no longer leaves the pill raised */
}
body.rd-treat .hs-cta:active{transform:translateY(0) scale(.98);box-shadow:0 8px 18px -12px rgba(0,0,0,.5)} /* beats 1228 */
/* ghost pills: white, Ink text, Ink border on hover (1691/1766 already do .hi-link/.wlc-btn-ghost; restated for the nav login) */
body.rd-treat .nav-login{background:rgba(255,255,255,.55);color:#12151F;border-color:rgba(18,21,31,.16)} /* parity with 1229; beats 119 */
body.rd-treat .nav-login:hover{background:#fff;border-color:#12151F} /* parity with 1230 */
/* R208e product cards */
body.rd-treat .pxg-card{background:rgba(255,255,255,.5) !important;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.72) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 28px 56px -32px rgba(10,22,40,.45) !important;transition:background-color .35s ease,transform .35s ease,box-shadow .35s ease} /* twin of 1585 + 1631; beats 239/1235 (bg, border, shadow) and 240/1236 hover shadow */
body.rd-treat .pxg-card .pxg-tint{opacity:.45 !important} /* twin of 1586; beats 241/1272 */
body.rd-treat .pxg-card:nth-child(1) .pxg-tint{background:linear-gradient(160deg,#F1EAE0 0%,#E6DCCE 100%) !important} /* twin of 1512 Sand; beats 242 peach */
body.rd-treat .pxg-card:nth-child(2) .pxg-tint, body.rd-treat .pxg-card:nth-child(3) .pxg-tint, body.rd-treat .pxg-card:nth-child(5) .pxg-tint{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%) !important} /* twin of 1518 Mist; beats 243/244/246 sky/lav/sky */
body.rd-treat .pxg-card:nth-child(4) .pxg-tint{background:linear-gradient(160deg,#EEF1F4 0%,#E4E9EE 100%) !important} /* twin of 1519 light Mist; beats 245 mint */
body.rd-treat .pxg-card:nth-child(6) .pxg-tint{background:linear-gradient(160deg,#F1EAE0 0%,#E6DCCE 100%) !important} /* twin of 1520 Sand; beats 247 peach */
body.rd-treat .pxg-card:nth-child(n+7) .pxg-tint{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%) !important} /* safety for a seventh card: Mist, never the 242-247 pastels */
body.rd-treat .pxg-card img{filter:drop-shadow(0 24px 26px rgba(10,22,40,.42)) !important} /* twin of 1587; beats 252/1251 */
body.rd-treat .pxg-card .pxg-chev{display:none !important} /* twin of 1632; the corner circle 255-257/1246-1249 never renders */
body.rd-treat .pxg-card .pxg-title{transition:color .3s ease} /* twin of 1633; colour stays 254 var(--ink), same as home */
body.rd-treat .pxg-card .pxg-sub{display:block;font:400 14px/1.4 var(--body);letter-spacing:0;color:#4a5462;margin-top:6px;max-width:none;padding-right:56px;transition:color .3s ease} /* the D2 sub line; beats 71/1176 (18px/17.5px head-subline sizing), 1053/1326 (mobile 16px) */
/* .pxg-obj is NOT restated: 252 (180px), 258 (140px under 900) and 259 (105px under 520) apply exactly as they do on the homepage (T11) */
@media(hover:hover){
body.rd-treat .pxg-card:hover{background:#5B7A9B !important;border-color:rgba(255,255,255,.35) !important;transform:translateY(-4px)} /* twin of 1634; beats 240/1236 */
body.rd-treat .pxg-card:hover .pxg-title, body.rd-treat .pxg-card:hover .pxg-sub{color:#fff !important} /* twin of 1635 + the sub line */
body.rd-treat .pxg-card:hover .pxg-tint{opacity:0 !important} /* twin of 1636; beats 248/1273 */
body.rd-treat .pxg-card:hover img{filter:drop-shadow(0 30px 30px rgba(10,22,40,.5)) !important} /* twin of 1637 */
}
@media(hover:none){
body.rd-treat .pxg-card:hover{transform:none} /* touch: no lift; beats 240/1236 (0,2,0) */
body.rd-treat .pxg-card:hover .pxg-obj{transform:none} /* beats 253/1274 */
body.rd-treat .pxg-card:hover .pxg-shdw{transform:translateX(-50%);opacity:.85} /* beats 250; resting value is 1275 opacity .85, so a tap changes nothing */
}
/* four-card shelves (hair, sexual-wellness): 4-up from 1000px, 2-up 700-999px, slider below 700 via rd.js 283-311 */
body.rd-treat .pxg-grid.pxg-four{grid-template-columns:repeat(4,1fr)} /* beats 238 (3 columns) */
body.rd-treat .pxg-grid.pxg-four .pxg-title, body.rd-treat .pxg-grid.pxg-four .pxg-sub{padding-right:12px} /* narrower column: drop the 254 chevron reserve, chevron is hidden anyway */
body.rd-treat .pxg-grid.pxg-four .pxg-obj{max-height:220px} /* hair shelf renders are px/hp-*.webp at 216-233x860 (about 1:3.8): at the 252 default 180px they are 45-49px wide slivers; 220px fits the 239 min-height 330 minus padding, title and sub line. (0,3,1) beats 252; branches below restate the 258/1087 steps */
@media(max-width:999px){body.rd-treat .pxg-grid.pxg-four{grid-template-columns:1fr 1fr}} /* beats 258 (2 columns at 900) with the same value, extends it to 999 */
@media(max-width:900px){body.rd-treat .pxg-grid.pxg-four .pxg-obj{max-height:160px}} /* the 258 step (140px) plus the sliver allowance, inside the 270 min-height */
/* weight-loss ledger card: the .lgr markup sits in the object slot */
body.rd-treat .pxg-obj.pxg-ledger{display:block;width:82%;max-width:82%;max-height:none;margin:0 auto;filter:none !important;transform:none} /* beats 252 img sizing and the 1587 drop-shadow twin above (span, not img) */
body.rd-treat .pxg-ledger .lgr{transform:rotate(-2deg)} /* keeps 567 rotate */
body.rd-treat .pxg-card:hover .pxg-ledger{transform:none} /* beats 253/1274 lift on the wrapper; the paper lifts instead */
body.rd-treat .pxg-card:hover .pxg-ledger .lgr{transform:rotate(0deg) translateY(-4px)} /* twin of 568 for the new parent */
body.rd-treat .lgr-row b{color:#12151F} /* D7: beats 571 green #2E7D4F */
body.rd-treat .lgr-total b{color:#12151F} /* restates 573 */
/* the .hprod band already equals home #programs (1712-1716 = 1580-1584); only the grid stacking context is added */
body.rd-treat .hprod .pxg-grid{position:relative;z-index:2} /* twin of 1716 for the pxg grid */
body.rd-treat .hprod .pxg-sub, body.rd-treat .hprod .hpx-lead, body.rd-treat .hprod .hpx-foot{color:#4a5462 !important} /* extends 1719 to a head sub line */
/* reveal: no safety animation. 444/1314 + rd.js 63-65 behave exactly as on the homepage (1585-1637 add none); 1085 still force-shows cards inside the phone slider */
@media(max-width:700px){
body.rd-treat .pxg-grid.pxg-four .pxg-obj{max-height:150px} /* restates 1087 inside the slider for the four-card shelf (the (0,3,1) rule above would otherwise beat it) */
body.rd-treat .pxg-card .pxg-sub{font-size:13.5px;padding-right:48px} /* mobile branch for the sub line (T11) */
body.rd-treat .pxg-grid.pxg-four .pxg-title, body.rd-treat .pxg-grid.pxg-four .pxg-sub{padding-right:12px}
}
/* R208f off-palette kills (D7) */
body.rd-treat{--bg:#F4F1EC;--g-peach:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%);--g-sky:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%);--g-lav:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%);--g-mint:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%);--g-sand:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%);--g-hover:linear-gradient(140deg,#FFFFFF 0%,#FFFFFF 100%);--sky:#d5e0ef;--lav:#d5e0ef;--mint:#E4E9EE;--blue-soft:#E4E9EE;--peach-ink:#4a5462} /* safety net: every var(--g-*) consumer in 8-45/1152-1160 inherits on-palette values (peach->Sand, sky/lav/mint->Mist, hover->white); --bg cream #F7F4F0 (9) -> Porcelain for .he-card 851, .etab 919, .hfq-x 1241, .mobile 130/1122, .qmodal-frame 435. --blue-ink is NOT retokened: 662 .cf-col h4 reads it on the Indigo footer and would vanish; its patient-visible consumers are killed one by one below. Explicit kills follow */
body.rd-treat .rd-sky{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* Mist; beats 78 */
body.rd-treat .rd-lav{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* Mist; beats 79 */
body.rd-treat .rd-mint{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* Mist; beats 81; #journey keeps 1746 (important) */
body.rd-treat .rd-sand{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%)} /* Sand token; beats 77 */
body.rd-treat .sci.rd-white{background:radial-gradient(720px 440px at 94% 0%,rgba(91,122,155,.13),rgba(91,122,155,0) 62%),radial-gradient(620px 420px at 0% 100%,rgba(217,198,170,.24),rgba(217,198,170,0) 64%),#fff} /* twin of home #how 1663 for the preserved science band; beats 76 */
body.rd-treat .hedu:not(.rd-blue){background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* education cards sit on Mist (skill step 5), so hedu / sci / journey alternate Mist, white, white-bloom; beats 76 */
body.rd-treat .hedu:not(.rd-blue) .he-card{background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.8)} /* cards read as glass on Mist rather than Sand-on-Mist; beats 851 var(--bg) */
/* Slate cross-link band. The women's pointer on sexual-wellness is section.sx-women.rd-band.rd-blue#for-women (sx 103); every hook is listed so the band styles whether or not rd-blue survives a markup edit */
body.rd-treat .rd-blue, body.rd-treat .sx-women.rd-band, body.rd-treat #for-women.rd-band{background:linear-gradient(160deg,#5B7A9B 0%,#4E6B8C 60%,#43607F 100%)} /* Slate, twin of 1484; beats 656 var(--g-lav), 75 (no background) */
body.rd-treat .rd-blue :is(h2,h3,p,li,strong,small), body.rd-treat .sx-women :is(h2,h3,p,li,strong,small), body.rd-treat #for-women :is(h2,h3,p,li,strong,small){color:#fff !important} /* twin of 1485 minus span (T7: h2 span keeps 70 Blue); beats 56, 1176 .hpx-lead */
body.rd-treat .rd-blue .hpx-lead, body.rd-treat .sx-women .hpx-lead, body.rd-treat #for-women .hpx-lead{color:rgba(255,255,255,.78) !important} /* lead a step quieter than the h2, same as #pricing p (1502); (0,3,1)/(1,2,1) later than the white rule */
body.rd-treat .sx-women.rd-band, body.rd-treat #for-women.rd-band{padding-top:48px;padding-bottom:48px} /* compact band (D8); (0,3,1)/(1,2,1) beats 72/75 var(--band) */
body.rd-treat .wk, body.rd-treat .winfo-grid .wk{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%);color:#12151F} /* Sand; beats 533/759 peach */
body.rd-treat .dual, body.rd-treat .exp-note{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%);color:#12151F} /* Sand; beats 934 peach (inside the preserved .sci, CSS only) */
body.rd-treat .he-cycle{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* Mist; beats 859 sky */
body.rd-treat .he-cycle p{color:#4a5462} /* beats 861 var(--ink-2) */
body.rd-treat .he-card:hover, body.rd-treat .sym-card:hover{background:#fff} /* beats 853/908 var(--g-hover) */
body.rd-treat .sym-card::before{color:rgba(18,21,31,.62)} /* beats 907 var(--blue-ink) #0757C8 counter */
body.rd-treat .hfq.open{background:#fff} /* beats 615 var(--g-hover) */
body.rd-treat .etab.on{background:#fff;border-color:#d5e0ef} /* beats 921 var(--g-hover) + var(--sky) border */
body.rd-treat .tstage, body.rd-treat .fmt-card .fm{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%)} /* Sand token; beats 926/892 var(--sand) #F1EBE3 */
body.rd-treat .fmt-card .freq, body.rd-treat .cc .fmt{color:#12151F;background:rgba(18,21,31,.06)} /* beats 898/1008 blue-ink on blue-soft */
body.rd-treat .fmt-card{border-color:rgba(18,21,31,.06)} /* beats 890 white border on the Mist band */
body.rd-treat .wi-card::before{display:none} /* beats 746-751 pastel tints under the 1727 glass */
body.rd-treat .tl-grid b{color:#12151F} /* D7: beats 590 green #2E7D4F */
body.rd-treat .thero{background:#F4F1EC} /* hormones/anti-aging still carry header.thero; beats 715 and 812/814/816 sky/peach/mint ((0,2,1) over (0,2,0)) */
body.rd-treat .thc-a, body.rd-treat .thc-c{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%)} /* beats 727/732, 813/815/817 */
body.rd-treat .hi-shot{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%)} /* beats 833 and 834/835 ((0,2,1) over (0,2,0)) where .hi-shot survives */
body.rd-treat .whofor-m{background:linear-gradient(160deg,#E9EDF1 0%,#DCE3EA 100%)} /* Mist; beats 962 sky */
body.rd-treat .whofor-w{background:linear-gradient(180deg,#EFE8DE 0%,#E3D9CB 100%)} /* Sand; beats 963 peach */
body.rd-treat .whofor-eye{color:rgba(18,21,31,.62)} /* beats 957 var(--blue-ink) in the sexual-wellness #whofor chooser */
body.rd-treat .mobile a.mob-login{color:#12151F} /* (0,3,2) beats 133 (0,2,1) var(--blue-ink) in the mobile menu; rd.js 48 moves .mobile to body, still under body.rd-treat */
body.rd-treat .wlc-pen{filter:drop-shadow(0 30px 40px rgba(10,22,40,.3))} /* beats 599/664 blue-tinted shadow */
/* self-check bands (hair #stage-check .hstage, skin #concern-check .sstage): Indigo gradient, white copy, white pill */
body.rd-treat .hstage, body.rd-treat .sstage, body.rd-treat #stage-check, body.rd-treat #concern-check{background:linear-gradient(180deg,#1E2350 0%,#14183A 40%,#0F1230 100%);color:#fff;border-radius:24px;box-shadow:0 30px 60px -36px rgba(20,26,43,.5)} /* beats 865 var(--ink) flat #141A2B; restates 1307 shadow */
body.rd-treat .hs-copy h3, body.rd-treat .hs-name{color:#fff} /* restates 869/872 */
body.rd-treat .hs-lede{color:rgba(255,255,255,.8)} /* beats 870 .75 */
body.rd-treat .hs-desc{color:rgba(255,255,255,.84)} /* beats 873 .8 */
body.rd-treat .hs-fine{color:rgba(255,255,255,.7)} /* beats 876 .55 */
body.rd-treat .hs-state{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)} /* restates 871 on the gradient */
body.rd-treat .hs-tick{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff} /* restates 880 */
body.rd-treat .hs-tick.on{background:#fff;color:#12151F;border-color:#fff} /* beats 882 var(--ink) */
/* hair stage slider: rd.js 263 writes an inline background gradient (#39a0ff, off-palette) on .hs-range on every change.
The inline (non-important) style loses to the !important background below, which repaints the trough; the fill is then drawn on the track pseudo-element
keyed on the data-stage attribute rd.js 263 also writes (5 steps, 0/25/50/75/100%), so no JS change is needed. Firefox uses ::-moz-range-progress. */
body.rd-treat .hs-range{background:rgba(255,255,255,.18) !important;height:14px;border-radius:999px} /* beats the rd.js inline background and 883 */
body.rd-treat .hs-range::-webkit-slider-runnable-track{height:14px;border-radius:999px;background:linear-gradient(90deg,#0095FF 0,#0095FF var(--r208p,0%),transparent var(--r208p,0%))} /* new; 883 has no track rule */
body.rd-treat .hstage[data-stage="1"] .hs-range{--r208p:0%}
body.rd-treat .hstage[data-stage="2"] .hs-range{--r208p:25%}
body.rd-treat .hstage[data-stage="3"] .hs-range{--r208p:50%}
body.rd-treat .hstage[data-stage="4"] .hs-range{--r208p:75%}
body.rd-treat .hstage[data-stage="5"] .hs-range{--r208p:100%}
body.rd-treat .hs-range::-moz-range-track{height:14px;border-radius:999px;background:transparent} /* new */
body.rd-treat .hs-range::-moz-range-progress{height:14px;border-radius:999px;background:#0095FF} /* new; Firefox fill */
body.rd-treat .hs-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-8px;border-radius:50%;background:#fff;border:0;box-shadow:0 3px 12px rgba(0,0,0,.35)} /* beats 884 (34px, no margin-top): centred on the 14px track */
body.rd-treat .hs-range::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;box-shadow:0 3px 12px rgba(0,0,0,.35)} /* beats 885 */
body.rd-treat .hs-range:focus-visible{outline:3px solid #fff;outline-offset:4px} /* beats 64 blue ring on the Indigo band */
/* weight-loss BMI sliders: 1756 paints the whole input blue and 1757 blanks the track, so the --p fill rd.js 214 writes never drew; (3,5,3) beats (3,4,3) */
html body.rd-treat .bmi-sec input[type=range].bmi-range:not(#_):not(#__):not(#___){background:rgba(18,21,31,.12) !important}
html body.rd-treat .bmi-sec input[type=range].bmi-range:not(#_):not(#__):not(#___)::-webkit-slider-runnable-track{background:linear-gradient(90deg,#0095FF 0 var(--p,50%),transparent var(--p,50%)) !important;border-radius:999px}
html body.rd-treat .bmi-sec input[type=range].bmi-range:not(#_):not(#__):not(#___)::-moz-range-progress{background:#0095FF !important}
/* R208g hero clusters (per-page sizing keyed on the files the build markup ships; weight-loss 1694-1702 untouched; the 1695 drop-shadow .3 is kept on all four heroes so they match) */
body.rd-treat .hintro.hc-hair .wl-cluster img, body.rd-treat .hintro.hc-skin .wl-cluster img, body.rd-treat .hintro.hc-sx .wl-cluster img{height:auto} /* width-driven sizing; filter stays 1695 */
body.rd-treat .hc-hair .wl-cluster, body.rd-treat .hc-skin .wl-cluster, body.rd-treat .hc-sx .wl-cluster{height:480px} /* (0,3,1) beats 1694 540px: the compositions below span about 20-430px, so the box is trimmed to keep the 1680 centred copy level with the products; column is about 534px at 1256 */
/* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-hair .cl-a{left:9%;top:14%;width:17%} /* 216x860 render: about 100x400px in the 480px box; beats 1696 */
body.rd-treat .hc-hair .cl-b{left:39%;top:1%;width:18.5%;z-index:2} /* about 109x435px in front; beats 1697 */
body.rd-treat .hc-hair .cl-c{left:69%;top:9%;width:17%} /* about 100x400px; beats 1698 */
/* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-skin .cl-a{left:-10%;top:12%;width:56%} /* frame 299x399px, visible bottle about 26-166px wide, 106-417px tall; beats 1696 */
body.rd-treat .hc-skin .cl-b{left:22%;top:-4%;width:54%;z-index:2} /* frame 288x384px, visible bottle about 185-338px, -14-363px; beats 1697 */
body.rd-treat .hc-skin .cl-c{left:50%;top:8%;width:54%} /* frame 288x432px, visible bottle about 329-494px, 58-450px; the transparent frame margin runs 21px past the column into the wrap gutter and 1678 overflow:hidden clips nothing visible; beats 1698 */
/* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-sx .cl-a{left:0;top:14%;width:40%} /* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-sx .cl-b{left:29%;top:-2%;width:44%;z-index:2} /* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-sx .cl-c{left:60%;top:18%;width:40%} /* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-hair .cl-t1, body.rd-treat .hc-hair .cl-t2, body.rd-treat .hc-hair .cl-t3, body.rd-treat .hc-skin .cl-t1, body.rd-treat .hc-skin .cl-t2, body.rd-treat .hc-skin .cl-t3, body.rd-treat .hc-sx .cl-t1, body.rd-treat .hc-sx .cl-t2, body.rd-treat .hc-sx .cl-t3{display:none} /* no tablets on these pages; beats 1699-1701 if any are pasted in */
@media(max-width:1000px){
body.rd-treat .hc-hair .wl-cluster, body.rd-treat .hc-skin .wl-cluster, body.rd-treat .hc-sx .wl-cluster{width:min(100%,420px);height:380px;margin:0 auto} /* stacked under the copy like weight-loss 1702, but width-capped so the percent widths stay render-sized; 380px holds the skin cl-c frame (227x340px from top 30px) */
}
@media(max-width:700px){
body.rd-treat .hc-hair .wl-cluster, body.rd-treat .hc-skin .wl-cluster, body.rd-treat .hc-sx .wl-cluster{height:310px;max-width:340px}
}
/* R208h nav and misc */
@media(min-width:1101px){body.rd-treat .nav button.menu{display:none !important}} /* T6: category burger is button.menu, 1676 only hides .menu-btn. Breakpoint is 1101, not 901: 128 hides .nav-links/.nav-login up to 1100px on every page and nothing restores them, so the burger must stay until the link row returns (1043). Explicit restatement of 124 so a later display rule cannot bring it back */
/* sticky dock: 1763-1765 (R207d) untouched; nothing here matches .sticky */
/* hero opener h1 (D8 promotes the .hintro h2 to h1; 1684/1738 target h2 only) */
body.rd-treat .hintro h1{font-size:clamp(40px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;text-align:left;color:#12151F;max-width:none} /* twin of 1684/1738 for the h1; beats 56/57/1172 */
body.rd-treat .hintro h1 span{color:#0095FF} /* twin of 1685 */
body.rd-treat .hintro .hi-copy h1{margin-bottom:20px} /* twin of 496 for h1 */
body.rd-treat .hintro .hi-copy{justify-items:start} /* beats 495 justify-items:center so a short h1 stays flush left */
body.rd-treat .hstool, body.rd-treat .tool-sec{padding:26px 0 40px} /* self-check wrapper sections: beats 72 var(--band) so the Indigo card sits 15-26px from its neighbours */
body.rd-treat .hstool .hstage, body.rd-treat .tool-sec .sstage{margin-top:0} /* beats 865 margin-top 14px inside the wrapper */
body.rd-treat .hintro .hi-acts, body.rd-treat .hintro .hi-trust{margin-left:0;margin-right:auto;justify-content:flex-start} /* restates 1769 (R207e), already flush left */
/* FAQ heading at the homepage size (1655) */
body.rd-treat .hfaq-left h2{font-size:56px;line-height:1.04} /* beats 1174 clamp; not important so the phone branch below can win */
/* mobile branches for every new !important above (T11) */
@media(max-width:700px){
body.rd-treat .hintro h1{font-size:clamp(32px,9vw,40px);margin-bottom:16px} /* twin of the 1052/1324 phone clamp for the promoted h1 */
body.rd-treat .hfaq-left h2{font-size:clamp(27px,7.4vw,31px);line-height:1.08} /* restates 1324 */
body.rd-treat .hs-range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-7px}
body.rd-treat .hstage, body.rd-treat .sstage, body.rd-treat #stage-check, body.rd-treat #concern-check{border-radius:20px}
body.rd-treat .sx-women.rd-band, body.rd-treat #for-women.rd-band{padding-top:36px;padding-bottom:36px}
body.rd-treat footer .cfw{padding-top:0}
}
/* ===== R210 : homepage promises band, left column organised + 3D Canada availability map (2026-09-02) ===== */
body.home #privacy .cp-wrap:has(.cp-map){grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);gap:clamp(28px,4vw,72px);align-items:center} /* beats 342 */
body.home #privacy .cp-left{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;gap:26px}
body.home #privacy .cp-left .cp-head, body.home #privacy .cp-left .cp-grid{grid-column:auto;grid-row:auto;margin-top:0;max-width:560px} /* beats 345/348 rows that left the gap */
body.home #privacy .cp-left .cp-head h2{max-width:none;margin-bottom:12px}
body.home #privacy .cp-sub{margin-top:0;color:rgba(255,255,255,.82) !important;font-size:17.5px}
body.home #privacy .cp-grid{gap:12px}
body.home #privacy .cp-card{padding:16px 18px;gap:16px;border-radius:18px;background:rgba(255,255,255,.12) !important;border:1px solid rgba(255,255,255,.32) !important;-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 40px -28px rgba(10,22,40,.6);transition:background .3s ease,transform .3s ease}
body.home #privacy .cp-card:hover{background:rgba(255,255,255,.2) !important;transform:translateX(4px)}
body.home #privacy .cp-card svg{flex:0 0 44px;width:44px;height:44px;padding:10px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);color:#fff !important} /* medallion, beats 351/661 */
body.home #privacy .cp-card p{font:600 17px/1.35 var(--body);letter-spacing:-.01em} /* beats 352 */
/* the map */
body.home #privacy .cp-map{grid-column:2;grid-row:1;position:relative;width:100%;perspective:1500px;perspective-origin:50% 30%}
body.home #privacy .cp-map::before{content:"";position:absolute;inset:6% -4% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0) 72%);filter:blur(22px);pointer-events:none}
body.home #privacy .mp-svg{position:relative;display:block;width:100%;height:auto;overflow:visible;transform:rotateX(34deg) rotateZ(-4deg);transform-origin:50% 60%;filter:drop-shadow(0 40px 46px rgba(10,22,40,.45))}
body.home #privacy .mp-svg defs path{fill:#26395A;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke} /* the slab sides: use-clones copy the referenced path's own style, not the use element's colour */
body.home #privacy .mp-ext{opacity:.96}
body.home #privacy .mp-top .mp{fill:rgba(255,255,255,.2);stroke:rgba(255,255,255,.85);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .25s ease,stroke .25s ease;outline:none}
body.home #privacy .mp-top .mp:hover, body.home #privacy .mp-top .mp:focus-visible, body.home #privacy .mp-top .mp.is-on{fill:rgba(255,255,255,.92);stroke:#fff}
body.home #privacy .mp-dots{pointer-events:none}
body.home #privacy .mp-dot{fill:#fff;filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
body.home #privacy .mp-ring{fill:none;stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
body.home #privacy .mp-ring{animation:mpPulse 2.8s ease-out infinite;animation-delay:var(--d,0s)}
body.home #privacy .mp-ring2{animation-delay:calc(var(--d,0s) + 1.4s)}
body.home #privacy .mp-dot{animation:mpGlow 2.8s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes mpPulse{0%{transform:scale(.4);opacity:.9}70%{opacity:.15}100%{transform:scale(3.2);opacity:0}}
@keyframes mpGlow{0%,100%{opacity:.75}50%{opacity:1}}
body.home #privacy .mp-tip{position:absolute;left:0;top:0;z-index:5;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:#fff;color:#12151F !important;font:600 14px/1 var(--body);letter-spacing:-.01em;box-shadow:0 14px 30px -14px rgba(10,22,40,.6);pointer-events:none;transform:translate(-50%,-140%);white-space:nowrap}
body.home #privacy .mp-tip[hidden]{display:none}
body.home #privacy .mp-tip i{width:18px;height:18px;border-radius:50%;background:#0B6EF0;display:inline-block;position:relative}
body.home #privacy .mp-tip i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
body.home #privacy .mp-tip span{color:#12151F !important}
body.home #privacy .mp-cap{margin:18px 0 0;text-align:center;font:500 14px/1.4 var(--body);color:rgba(255,255,255,.72) !important;letter-spacing:.01em}
@media(max-width:860px){
body.home #privacy .cp-wrap:has(.cp-map){grid-template-columns:1fr}
body.home #privacy .cp-map{grid-column:1;grid-row:1;max-width:520px;margin:0 auto}
body.home #privacy .cp-left{grid-row:2;gap:20px}
body.home #privacy .mp-svg{transform:rotateX(28deg)}
body.home #privacy .cp-card p{font-size:15.5px}
}
@media(max-width:700px){
body.home #privacy .cp-grid{grid-template-columns:1fr} /* beats 1392 two-up: one promise per row on phones */
body.home #privacy .cp-card:last-child{grid-column:auto} /* beats 1393 */
body.home #privacy .cp-card{padding:14px 16px;gap:14px}
body.home #privacy .cp-card svg{flex-basis:40px;width:40px;height:40px;padding:9px}
body.home #privacy .cp-map{max-width:none;padding:0 4px}
body.home #privacy .mp-svg{transform:rotateX(26deg) scale(.94);transform-origin:50% 50%}
body.home #privacy .mp-cap{margin-top:8px;font-size:13px}
body.home #privacy .cp-left .cp-head h2{font-size:clamp(30px,8.6vw,36px)}
}
/* ===== R209 : hormone pages (hormones.html men, hormones-women.html women), scoped body.rd-treat. Append after R208 (2026-09-02) =====
Every rule cites the rd.css line it beats. !important only where the beaten rule (or an inline style) carries it.
Sub-blocks: a hero clusters, b classes the two builds introduced, c legacy kills. Alpha boxes below were measured with PIL on the shipped files (alpha > 16 of 255). */
/* cluster geometry note removed, CURO-R243 */
body.rd-treat .hintro.hc-hm .wl-cluster img, body.rd-treat .hintro.hc-hw .wl-cluster img{height:auto} /* twin of R208g 204: width-driven sizing; filter stays 1695 */
body.rd-treat .hc-hm .wl-cluster, body.rd-treat .hc-hw .wl-cluster{height:480px} /* twin of R208g 205; (0,3,1) beats 1694 540px so the copy stays level with the renders */
/* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-hm .cl-a{left:-13%;top:8%;width:50%} /* gel frame 267x400px; visible tube about 101px wide at x 14-115px, y 42-430px; the 69px transparent margin left of the box is harmless (1694 pointer-events:none, 1678 clips at the page edge only); beats 1696 */
body.rd-treat .hc-hm .cl-b{left:10%;top:-2%;width:54%;z-index:2} /* vial frame 288x432px in front; visible about 156px wide at x 119-275px, y 16-400px; beats 1697 */
body.rd-treat .hc-hm .cl-c{left:52%;top:22%;width:46%} /* jar frame 246x369px, right edge at 524px; visible about 197px wide at x 303-500px, y 154-390px; beats 1698 */
/* cluster geometry note removed, CURO-R243 */
body.rd-treat .hc-hw .cl-a{left:8%;top:10%;width:52%} /* single frame 278x417px; visible about 83px wide at x 140-223px, y 56-453px; beats 1696 */
body.rd-treat .hc-hw .cl-b{left:32%;top:-1%;width:60%;z-index:2} /* meno frame 320x480px in front, right edge at 491px; visible about 128px wide at x 267-395px, y 9-465px; beats 1697 */
body.rd-treat .hc-hw .cl-c{display:none} /* no third render on the women's page (D3); beats 1698 if one is pasted in */
body.rd-treat .hc-hm .cl-t1, body.rd-treat .hc-hm .cl-t2, body.rd-treat .hc-hm .cl-t3, body.rd-treat .hc-hw .cl-t1, body.rd-treat .hc-hw .cl-t2, body.rd-treat .hc-hw .cl-t3{display:none} /* no tablets on these pages; twin of R208g 218; beats 1699-1701 */
@media(max-width:1000px){
body.rd-treat .hc-hm .wl-cluster, body.rd-treat .hc-hw .wl-cluster{width:min(100%,420px);height:380px;margin:0 auto} /* twin of R208g 220; (0,3,1) beats 1702 340px. At 420px the tallest frame (men vial 227x340 from -8px, women meno 252x378 from -4px) stays inside 380px */
}
@media(max-width:700px){
body.rd-treat .hc-hm .wl-cluster, body.rd-treat .hc-hw .wl-cluster{height:310px;max-width:340px} /* twin of R208g 223. At 340px: men vial 184x275 from -6px, women meno 204x306 from -3px, both inside 310px */
}
/* R209b classes the two builds introduced */
/* men: "Spot the signs" grid (hormones.html 96: div.sstage#signs > .hs-visual > .hm-signs > .hs-state x6). Without this the six cards stack in one column under 877 (legible, just tall) */
body.rd-treat .hm-signs{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;align-items:stretch} /* new; the parent 877 grid centres its one child, so width:100% keeps the grid full-bleed in the .9fr column (about 485px at 1256, two 236px cards) */
body.rd-treat .hm-signs .hs-state{margin-top:0;max-width:none;padding:16px 18px} /* beats 871 (margin-top 22px, max-width 520px, 18px 20px padding) inside the grid; background and border stay R208f 180 */
body.rd-treat .hm-signs .hs-name{font-size:17px} /* beats 872 19px: two 236px columns hold a two-line question at 17px */
body.rd-treat .hm-signs .hs-desc{font-size:14px} /* beats 873 15px */
@media(max-width:860px){
body.rd-treat #signs-tool .hs-visual{order:0} /* 886 puts .hs-visual first under 860 for the picture pickers; a card grid reads better under its heading and pill. (1,2,1) beats (0,1,0); #signs-tool is the wrapper section, not a homepage id (D4) */
}
@media(max-width:560px){
body.rd-treat .hm-signs{grid-template-columns:1fr} /* one column on phones; rd.js 284 only sliderises .pxg-grid/.hpx-grid/.cmp, so this grid never becomes a slider */
}
/* both: still image in the science stage (men hormones.html 156 and women hormones-women.html 162/166/170: div.ic.ic-img > img, each img also carrying the same declarations inline). Today the rule is a parity twin of the inline style on both pages; it becomes load-bearing the day the inline styles are stripped. 931 only styles .spanel .ic video */
body.rd-treat .spanel .ic-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* twin of 931 for an img; the 930 wrapper keeps its 260px min-height and overflow:hidden, and 926 .tstage (24px radius, overflow:hidden) clips the top corners exactly as it does the hair video tiles, so no inner radius is added (an inner 16px radius would leave four slivers of the 926 Sand ground at the corners) */
body.rd-treat .spanel .ic-img{background:#E4E9EE} /* Mist behind a lazy image while it loads; parity with 1706 trip photos; new (930 has no background) */
/* women: static stage picker (hormones-women.html 88: div.sstage#hw-stage-check, three .hs-state cards in .hs-copy, one photo in .hs-visual). It is deliberately .sstage without #concern-check and not .hstage, so neither rd.js 250 nor 259 binds; 1137 targets #st-N ids that do not exist here */
body.rd-treat .hs-visual .hw-stage-img{width:min(100%,420px);height:auto;border-radius:20px;display:block;box-shadow:0 24px 48px -28px rgba(0,0,0,.6)} /* new; 878/1134 only size a > svg. px/hw-intake.webp is 1536x1024 so this renders 420x280 on the Indigo card */
body.rd-treat #hw-stage-check .hs-state + .hs-state{margin-top:10px} /* three stacked cards: 871 gives each 22px above; the first keeps 22px under the lede, the rest close up. (1,3,1) beats (0,1,0) */
/* women: two-card shelf (hormones-women.html 56). 238 is a 3-column grid, so two cards leave an empty third column; centre them at a 720px cap instead. .pxg-two is the class twin of R208e 117 .pxg-four for any later two-card shelf */
@media(min-width:701px){
body.rd-treat .pxg-grid.pxg-two, body.rd-treat #hw-programs .pxg-grid{grid-template-columns:repeat(2,1fr);max-width:720px;margin-left:auto;margin-right:auto} /* beats 238 (3 columns) and 258 (2 columns under 900, same value); scoped above 700px so the 1069 phone slider keeps its negative gutter margins and width:auto */
}
/* cross-link bands (#hm-women, #hw-men) reuse section.sx-women.rd-band.rd-blue and need nothing: R208f 149-152 paint the Slate band, R208d 72-73 the eyebrow, R208d 82 the white pill */
/* self-check wrappers: R208h 234 pads both #signs-tool (.tool-sec) and #stage-tool (.hstool); R208f 175-180 paint the Indigo card. R208h 235 zeroes the 865 margin only for .hstool .hstage and .tool-sec .sstage, so the men's #signs-tool > .sstage is covered and the women's #stage-tool (.hstool) > .sstage#hw-stage-check is not */
body.rd-treat #stage-tool .sstage{margin-top:0} /* twin of R208h 235 for the women's pairing; (1,2,1) beats 865 (0,1,0) 14px, so the card sits at the 234 padding like the men's page */
/* R209c legacy kills on these two pages. rd.css was grepped for .hm-, .hw-, #signs, #labs, .the-stages, .honest-, .lab-, .sign-, rd-p-hormones: no rule matches (742 and 1359 are comments, 905-912 .sym-* is legacy #signs markup the rebuild no longer ships, 812-817 and 834 key on header.thero / .hi-shot which the rebuild removed and R208f 166-168 already cover). What remains is one inline colour */
/* (inline ISI colour on the women's page replaced in markup by class="isi-warn"; R208b 45 covers it) */
/* ===== R211 : homepage map v2 (paper-white slab, red maple hover, right-weighted) + first-month live-wire timeline (2026-09-02) ===== */
/* Geometry is desktop-only: a plain rule here would beat R210's max-width:860px block
(media queries add no specificity, and this file is later), which squeezed the band on phones. */
@media(min-width:861px){
body.home #privacy .cp-wrap:has(.cp-map){grid-template-columns:minmax(0,.84fr) minmax(400px,1.16fr);gap:clamp(20px,3vw,44px)} /* beats R210: more room for the map */
body.home #privacy .cp-map{width:min(100%,680px);margin-left:auto;margin-right:-3%} /* sits a little further right, fills the column */
body.home #privacy .cp-map::before{inset:4% -6% 6%;background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0) 72%)}
body.home #privacy .mp-svg{transform:rotateX(30deg) rotateZ(-3deg) scale(1.05);transform-origin:50% 58%;filter:drop-shadow(0 34px 40px rgba(10,22,40,.48))}
}
body.home #privacy .mp-svg defs path{fill:#B7C3D1;stroke:rgba(255,255,255,.3);stroke-width:.8} /* slab sides: cool paper grey; beats R210 */
body.home #privacy .mp-ext{opacity:1}
body.home #privacy .mp-top .mp{fill:#F7F5F1;stroke:rgba(18,21,31,.42);stroke-width:1.1;transition:fill .25s ease,stroke .25s ease} /* white paper top with an Ink outline; beats R210 */
body.home #privacy .mp-top .mp:hover, body.home #privacy .mp-top .mp:focus-visible, body.home #privacy .mp-top .mp.is-on{fill:#D52B1E;stroke:#fff} /* Canadian flag red */
body.home #privacy .mp-dot{fill:#0095FF;filter:drop-shadow(0 0 6px rgba(0,149,255,.85))}
body.home #privacy .mp-ring{stroke:#0095FF}
body.home #privacy .mp-tip{padding:9px 14px 9px 11px;gap:9px}
body.home #privacy .mp-tip i{width:18px;height:18px;border-radius:0;background:#D52B1E;-webkit-mask:url(../images/px/maple.svg?v3) center/contain no-repeat;mask:url(../images/px/maple.svg?v3) center/contain no-repeat} /* red maple leaf in the tooltip */
body.home #privacy .mp-tip i::after{display:none}
body.home #privacy .mp-cap{color:rgba(255,255,255,.8) !important}
@media(max-width:860px){body.home #privacy .cp-map{margin-left:auto;margin-right:auto;width:min(100%,560px)}}
/* first-month timeline: the wire runs through the bead centres and carries a travelling light */
body.home #first-month .cm-line{padding-top:0;margin-top:20px;gap:18px} /* beats 325 */
body.home #first-month .cm-node{gap:14px}
body.home #first-month .cm-chip{margin-top:0;height:32px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 15px;background:#12151F;color:#fff;border-color:transparent;box-shadow:0 10px 22px -14px rgba(18,21,31,.55)} /* fixed height so the geometry below is exact; beats 329/1292 */
body.home #first-month .cm-line::before{top:54px;left:5%;right:5%;height:4px;border:0;border-radius:4px;background:linear-gradient(90deg,rgba(0,149,255,.12),rgba(0,149,255,.42) 50%,rgba(0,149,255,.12));box-shadow:0 1px 0 rgba(255,255,255,.8)} /* 32 chip + 14 gap + 12 (half bead) = 58, minus half the 4px line; beats 326 */
body.home #first-month .cm-prog{top:54px;left:5%;height:4px;max-width:90%;border-radius:4px;background:linear-gradient(90deg,#0095FF,#5FB9FF);box-shadow:0 0 12px rgba(0,149,255,.55)} /* JS-driven progress; beats 327 */
body.home #first-month .cm-line::after{content:"";position:absolute;left:5%;right:5%;top:54px;height:4px;border-radius:4px;pointer-events:none;background:linear-gradient(90deg,transparent 0,transparent 42%,rgba(255,255,255,.95) 49%,#0095FF 52%,transparent 60%,transparent 100%);background-size:240% 100%;background-position:120% 0} /* the live wire */
@media (prefers-reduced-motion:no-preference){body.home #first-month .cm-line::after{animation:cmWire 3.6s linear infinite}}
@keyframes cmWire{0%{background-position:120% 0}100%{background-position:-120% 0}}
body.home #first-month .cm-dot{position:relative;z-index:2;width:24px;height:24px;border:0;background:radial-gradient(circle at 35% 30%,#ffffff 0,#eaf3ff 38%,#bfd9f6 72%,#8db5e6 100%);box-shadow:0 8px 16px -8px rgba(0,80,160,.6),inset 0 -2px 4px rgba(0,60,140,.28),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 4px rgba(255,255,255,.75)} /* glossy bead; beats 331 */
body.home #first-month .cm-dot::after{width:8px;height:8px;background:#0095FF;box-shadow:0 0 10px rgba(0,149,255,.9)} /* always lit; beats 332/334 */
body.home #first-month .cm-node.is-on .cm-dot{box-shadow:0 8px 16px -8px rgba(0,80,160,.6),inset 0 -2px 4px rgba(0,60,140,.28),inset 0 1px 0 rgba(255,255,255,.95),0 0 0 6px rgba(0,149,255,.18)} /* beats 333 */
body.home #first-month .cm-lab{margin-top:2px}
@media(max-width:700px){body.home #first-month .cm-line::after{display:none}body.home #first-month .cm-chip{margin-top:0}}
/* ===== R212 : anti-aging page (2026-09-02). Scoped body.rd-p-anti-aging and the two new classes. Appended after R211 ===== */
/* R212a hero cluster. Three 1024x1536 (2:3) renders, alpha measured: gel x 6-99%, vial x 5-99%, caps x 0-98%,
so the visible object nearly fills each frame and the fan needs wider spacing than .hc-hm. Column is about 534px at 1256. */
body.rd-treat .hintro.hc-aa .wl-cluster img{height:auto} /* twin of R209a 13; filter stays 1695 */
body.rd-treat .hc-aa .wl-cluster{height:480px} /* twin of R209a 14; (0,3,1) beats 1694 540px */
body.rd-treat .hc-aa .cl-a{left:-6%;top:12%;width:40%} /* gel, 214x320px; beats 1696 */
body.rd-treat .hc-aa .cl-b{left:26%;top:-2%;width:46%;z-index:2} /* vial in front, 246x369px; beats 1697 */
body.rd-treat .hc-aa .cl-c{left:60%;top:16%;width:42%} /* caps, 224x336px, right edge at 545px; beats 1698 */
body.rd-treat .hc-aa .cl-t1, body.rd-treat .hc-aa .cl-t2, body.rd-treat .hc-aa .cl-t3{display:none} /* no tablets; beats 1699-1701 */
@media(max-width:1000px){body.rd-treat .hc-aa .wl-cluster{width:min(100%,420px);height:380px;margin:0 auto}} /* twin of R209a 25 */
@media(max-width:700px){body.rd-treat .hc-aa .wl-cluster{height:310px;max-width:340px}} /* twin of R209a 28 */
/* R212b pictogram medallion. The plan cards carry a span.pxg-obj.pxg-pict holding a 40px line SVG instead of img.pxg-obj,
so the R208e image rules (which key on img) do not reach it and the glass medallion is written here. */
body.rd-treat .pxg-obj.pxg-pict{display:grid;place-items:center;justify-self:center;align-self:center;width:96px;height:96px;max-height:none;border-radius:50%;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 36px -22px rgba(10,22,40,.5);color:#12151F;transition:background .35s ease,color .35s ease,transform .35s ease} /* beats 252 (img sizing does not apply to a span) */
body.rd-treat .pxg-obj.pxg-pict svg{width:40px;height:40px;display:block}
@media(hover:hover){
body.rd-treat .pxg-card:hover .pxg-obj.pxg-pict{background:rgba(255,255,255,.92);color:#12151F;transform:translateY(-4px)} /* stays legible on the R208e Slate hover fill */
}
@media(max-width:700px){body.rd-treat .pxg-obj.pxg-pict{width:80px;height:80px}body.rd-treat .pxg-obj.pxg-pict svg{width:34px;height:34px}}
/* ===== R213 : scroll performance (2026-09-02). Nothing here changes layout or colour. =====
Three measured causes of jank, in order of cost:
1. 39 SVG circles (the map beacons) animate forever INSIDE .mp-svg, which carried a
drop-shadow filter over ~117 path instances (9