/* ============================================================
   Curo — effects, packshot & mega-menu layer (additive)
   ============================================================ */

/* ---- transparent product packshots on the cards' own dark art ---- */
/* .art (treatment pages) has a fixed 220px height — img fills it.
   .product-art (index / sexual-health) is a flexible area — the img gets a
   fixed 220px height so cards stay the same size as the treatment pages. */
.art.has-img{display:block;padding:22px}
.product-art.has-img{display:grid;place-items:center;padding:18px;min-height:0}
.art.has-img::before,
.art.art-pending::before{display:none !important}
.art.has-img img{width:100%;height:100%;object-fit:contain}
.product-art.has-img img{width:100%;height:220px;object-fit:contain}
.art.has-img img,
.product-art.has-img img{filter:drop-shadow(0 24px 26px rgba(0,0,0,.55));transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
.product:hover .art.has-img img,
.product-card:hover .product-art.has-img img{transform:scale(1.06) translateY(-3px)}

/* ---- pending / missing product image tile ---- */
.art.art-pending,
.product-art.art-pending{display:grid;place-items:center;padding:18px}
.art.art-pending span,
.product-art.art-pending span{border:1px dashed rgba(255,255,255,.3);color:#8b919c;padding:24px 26px;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.8}
.white .art.art-pending span{border-color:rgba(0,0,0,.28);color:#7a8088}

/* ---- scroll progress bar ---- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:2px;background:#0098ff;transform:scaleX(0);transform-origin:0 50%;z-index:9999;pointer-events:none}

/* ---- when GSAP takes over, neutralize the old CSS reveal ---- */
html.fx .reveal{opacity:1;transform:none;transition:none}

/* ---- split headline word masks (<i> so `h1 span` color rules skip them) ---- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em;font-style:normal;color:inherit}
.fx-wi{display:inline-block;font-style:normal;color:inherit}

/* ---- rolling hero phrase (homepage) ---- */
.fx-rot{display:inline-block;white-space:nowrap;will-change:transform,opacity}

/* ---- GPU hints for parallaxed media ---- */
.hero > img,.hero-bg,.split-image img,.fx-clip img,.cta > img,.image-cta > img{will-change:transform;backface-visibility:hidden}

/* ============================================================
   Round-4 polish: typography, hierarchy, CTAs, sticky nav,
   pricing, blue sections, accordion
   ============================================================ */

/* ---- kerning: let the display type breathe ---- */
h1,h2,.section-title,.title{letter-spacing:-.015em !important}
h3,h4,summary{letter-spacing:-.008em !important}
.hero h1{letter-spacing:-.018em !important}

/* ---- hierarchy: section intro copy sits under its heading, not beside it ---- */
.section-head,.program-head,.review-top,.treat-head,.stats-intro{display:block !important}
.section-head .muted,.program-head p,.review-top p,.treat-head .copy,.stats-intro p{margin:16px 0 0;max-width:640px}

/* ---- CTAs: white text on blue; hover inverts to white/black — same everywhere ---- */
.btn-blue{color:#fff !important}
.btn-blue:hover{background:#fff !important;border-color:#fff !important;color:#0a0b0d !important}
.btn-white{background:#fff;color:#0a0b0d}
.btn-white:hover{background:#0098ff !important;border-color:#0098ff !important;color:#fff !important}
.btn-outline:hover{border-color:#0098ff;color:#0098ff}

/* ---- sticky header ---- */
.nav{transition:background .3s ease,border-color .3s ease}
.nav.nav-stuck{position:fixed !important;top:0 !important;left:0;right:0;z-index:90;background:rgba(7,9,12,.88);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.12)}

/* ---- product pricing: big and unmissable, like the card title ---- */
.tags{align-items:center}
.tag.tag-price{border:0;border-radius:0;padding:0;flex-basis:100%;order:2;font-family:"Gotham","Montserrat","Arial Black",Arial,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.01em !important;color:#0098ff;line-height:1.1;margin-top:2px}
.product-foot .price-big{font-family:"Gotham","Montserrat","Arial Black",Arial,sans-serif;font-size:16px;font-weight:800;letter-spacing:-.01em !important;color:#0098ff}
.product-foot{align-items:center}

/* ---- blue-background sections: white text ----
   .fx-on-blue is added by effects.js to any <section> whose computed
   background is the brand blue (so the light-grey .standards on the
   treatment pages keeps its dark text) */
.final,.final h2,.final p{color:#fff}
.fx-on-blue h1,.fx-on-blue h2,.fx-on-blue h3,.fx-on-blue h4,.fx-on-blue p,.fx-on-blue li,.fx-on-blue summary{color:#fff}
.manifesto-card:nth-child(3),.manifesto-card:nth-child(3) h3{color:#fff}
.row.head > div:last-child{color:#fff}

/* ---- "Find out what fits your life" card: real photo, no blue duotone ---- */
.editorial-card{background:#14171c !important;color:#f7f8fb !important}
.editorial-card .product-info p{color:#b7bbc3 !important}
.editorial-card img{filter:none !important;mix-blend-mode:normal !important;opacity:1 !important}
.editorial-card .product-art{position:relative}
.editorial-card .product-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,12,.85),rgba(7,9,12,0) 55%);pointer-events:none}
.editorial-card .editorial-copy{z-index:2}
.editorial-card .editorial-copy .eyebrow{color:#0098ff}
.editorial-card .product-bottom{border-color:rgba(255,255,255,.13) !important}
.editorial-card .product-bottom a{color:#f7f8fb}
.editorial-card .product-bottom a + a{border-color:rgba(255,255,255,.13) !important;color:#0098ff !important}

/* ---- keep faces in frame when the hero crops at narrower widths ---- */
.hero > img:not(.hero-bg){object-position:66% 28%}
.cta > img{object-position:66% 28%}

/* ---- clip container for parallaxed grid images ---- */
.fx-clip{overflow:hidden;position:relative;height:100%;min-height:0}
.fx-clip img{width:100%;height:100%;object-fit:cover;display:block}
.science .fx-clip{height:auto}
.science .fx-clip img{height:510px}
@media(max-width:680px){.science .fx-clip img{height:360px}}

/* ---- gentle polish on interactive bits ---- */
.btn{will-change:transform}
details summary{transition:color .25s ease}
details[open] summary{color:#0078ca}
details p{animation:fxFaqIn .45s ease both}
@keyframes fxFaqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.other a{transition:transform .3s ease}
.other a:hover{transform:translateY(-4px)}

/* ---- nav mega menu (hover product panels, desktop only) ---- */
.nav-item{position:relative;display:inline-flex}
.nav-mega{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);padding-top:22px;width:max-content;max-width:min(640px,94vw);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,transform .24s ease,visibility .24s;z-index:80}
.nav-item:hover .nav-mega,
.nav-item:focus-within .nav-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-item.nm-left .nav-mega{left:0;transform:translate(0,10px)}
.nav-item.nm-left:hover .nav-mega,.nav-item.nm-left:focus-within .nav-mega{transform:translate(0,0)}
.nav-item.nm-right .nav-mega{left:auto;right:0;transform:translate(0,10px)}
.nav-item.nm-right:hover .nav-mega,.nav-item.nm-right:focus-within .nav-mega{transform:translate(0,0)}
.nav-mega-in{background:#0c0f13;border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -24px rgba(0,0,0,.85);padding:14px}
.nav-mega-head{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:2px 4px 11px;margin-bottom:11px;border-bottom:1px solid rgba(255,255,255,.1)}
.nav-mega-head span{font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#828997}
.nav-mega-head a{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0098ff;white-space:nowrap}
.nav-mega-grid{display:grid;grid-template-columns:repeat(3,148px);gap:8px}
.nav-mega-item{display:flex;flex-direction:column;gap:8px;padding:9px;background:#12151a;border:1px solid rgba(255,255,255,.07);transition:transform .22s ease,border-color .22s ease}
.nav-mega-item:hover{transform:translateY(-3px);border-color:rgba(0,152,255,.65)}
.mi-thumb{height:84px;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#262e37,#12151a 72%);overflow:hidden}
.mi-thumb img{max-height:72px;max-width:78%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5));transition:transform .25s ease}
.nav-mega-item:hover .mi-thumb img{transform:scale(1.08)}
.mi-thumb.mi-none::after{content:"SOON";font-size:8px;letter-spacing:.18em;font-weight:800;color:#6b727e;border:1px dashed rgba(255,255,255,.25);padding:9px 12px}
.nav-mega-item b{font-family:"Gotham","Montserrat","Arial Black",Arial,sans-serif;font-size:10px;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em;color:#f7f8fb}
.nav-mega-item small{font-size:8.5px;line-height:1.4;color:#9aa1ac;text-transform:uppercase;letter-spacing:.05em}
@media(max-width:1100px){.nav-item .nav-mega{display:none}}

/* ============================================================
   Unified product cards — every page uses the homepage card
   (kicker / title / description / packshot / price footer)
   ============================================================ */
.products .product,
.product-grid .product{background:#171b21;border:1px solid rgba(255,255,255,.09);min-height:380px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.25s ease;color:inherit}
.products .product:hover,
.product-grid .product:hover{transform:translateY(-6px);border-color:rgba(0,152,255,.65)}
.products .product-copy,
.product-grid .product-copy{padding:18px 16px 12px;min-height:118px}
.product-kicker{display:block;color:#0098ff;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:900}
.products .product h3,
.product-grid .product h3{font-size:17px;text-transform:uppercase;line-height:1.08;margin:9px 0 7px;font-weight:800}
.products .product p,
.product-grid .product p{font-size:11px;color:#b4b8c1;line-height:1.5;margin:0}
.products .product-art,
.product-grid .product .product-art{flex:1;min-height:235px;display:grid;place-items:center;position:relative;overflow:hidden;background:linear-gradient(145deg,#1c2025,#121419)}
.products .product-foot,
.product-grid .product .product-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.1);padding:12px 14px;text-transform:uppercase;font-size:9px;font-weight:900;letter-spacing:.08em}
.products .product-foot span:last-child,
.product-grid .product .product-foot span:last-child{color:#0098ff}

/* ============================================================
   Wide-screen alignment + calmer type scale
   ============================================================ */

/* homepage + sexual-health hero grids declared width:100%, which beat the
   centered .wrap width — on ultrawide monitors the text pinned to the left.
   Restore the wrap constraint so every hero centers like the treatment pages. */
.wrap.hero-grid{width:min(1380px,calc(100% - 52px)) !important;margin:0 auto !important}

/* homepage hero is video-backed with a single content column now */
.hero-grid--solo{grid-template-columns:1fr !important}
video.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}

/* keep faces framed in the bottom CTA banners on very wide screens
   (no parallax on these — see effects.js — so framing is identical everywhere) */
@media(min-width:2000px){
  .cta > img{object-position:66% 16%}
  .image-cta > img{object-position:center 20%}
}

/* ---- global type scale, one notch down (readable, cleaner) ---- */
body{font-size:14px !important}
.hero h1{font-size:clamp(26px,3vw,46px) !important;line-height:.98}
.hero p,.hero .lead{font-size:clamp(12px,.95vw,14px) !important;max-width:480px}
/* homepage video hero: sit the copy in the bottom-left corner */
.hero-grid--solo{align-items:end !important;padding:40px 0 40px !important}
.hero-grid--solo > div{max-width:640px}
.hero p,.hero .lead{font-size:14px !important}
.section-title,.title{font-size:clamp(28px,3.5vw,52px) !important}
.section-copy,.copy{font-size:14px !important}
.program-head h2{font-size:clamp(30px,2.8vw,38px) !important}
.split-copy h2,.pricing h2,.review-top h2,.clinician-grid h2,.faq-grid h2,.feature-copy h2,.stats-intro h2{font-size:clamp(30px,3.6vw,54px) !important}
.image-banner h2{font-size:clamp(30px,4vw,58px) !important}
.big-cta h2{font-size:clamp(34px,4.6vw,68px) !important}
.cta h2{font-size:clamp(32px,4.2vw,62px) !important}
.image-cta h2{font-size:clamp(30px,4vw,58px) !important}
.final h2{font-size:clamp(36px,4.8vw,70px) !important}
.standards h2{font-size:clamp(28px,3.4vw,48px) !important}
.stat strong{font-size:clamp(36px,4.2vw,62px) !important}
.step b{font-size:30px !important}
.hero-side h2{font-size:22px !important}
summary{font-size:14px !important}
details p{font-size:12.5px !important}

/* ---- small fixes (pre-existing issues) ---- */
body{overflow-x:clip}
.feature-copy .btn{align-self:flex-start}

/* consistent header logo size on every page (pages disagreed: 38px vs 40px) */
.brand img{height:40px !important;width:auto;max-width:168px}
@media(max-width:680px){.brand img{height:34px !important;max-width:138px}}

/* product price turns white when the card is hovered */
.price-big{transition:color .25s ease}
.product:hover .price-big,
.product-card:hover .price-big{color:#fff !important}
@media(max-width:1050px) and (min-width:681px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps .step:nth-child(even){border-right:0}
  .steps .step{padding-left:0}
  .steps .step:nth-child(even){padding-left:25px}
}

/* ============================================================
   "How Curo Works" — kudos-template section rebuilt square
   (iPhone 17 Pro mockups with live HTML screens, ECG timeline)
   ============================================================ */
.howto{background:#f7f8fb;color:#0a0b0d;padding:72px 0;border-top:1px solid rgba(0,0,0,.08)}
.howto__bigtitle{font-family:"Gotham","Montserrat","Arial Black",Arial,sans-serif;font-size:clamp(32px,4.6vw,60px);font-weight:800;text-transform:uppercase;letter-spacing:-.015em !important;line-height:.95;text-align:center;color:#0a0b0d;margin:0 0 clamp(26px,3.6vw,42px);display:flex;align-items:baseline;justify-content:center;gap:.24em;flex-wrap:wrap}
.howto__logo{height:.72em;width:auto;display:inline-block;align-self:baseline}
.howline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:18px;margin:0 0 clamp(28px,3.6vw,44px)}
.howline__beat{position:absolute;left:12.5%;right:12.5%;top:50%;height:56px;transform:translateY(-50%);z-index:0;overflow:visible}
.howline__beat svg{width:100%;height:100%;display:block;overflow:visible}
.howline__beat path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.howline__beat .base{stroke:rgba(0,152,255,.22);stroke-width:2.5}
.howline__beat .pulse{stroke:#0098ff;stroke-width:3.5;filter:drop-shadow(0 0 6px rgba(0,152,255,.75));stroke-dasharray:220 4000;stroke-dashoffset:220;animation:howBeat 2.8s linear infinite}
.howline__node{position:relative;z-index:1;justify-self:center;width:46px;height:46px;border-radius:50%;background:#0098ff;color:#fff;font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,152,255,.45)}
@keyframes howBeat{0%{stroke-dashoffset:220}100%{stroke-dashoffset:-2100}}
.hcards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hcard{display:flex;flex-direction:column;transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.hcard:hover{transform:translateY(-6px)}
.hcard__imgwrap{position:relative;aspect-ratio:5/4;background:linear-gradient(145deg,#1c2025,#121419);border:1px solid rgba(255,255,255,.09);overflow:hidden;display:flex;align-items:center;justify-content:center;transition:box-shadow .38s}
.hcard:hover .hcard__imgwrap{box-shadow:0 30px 60px -30px rgba(10,14,20,.55);border-color:rgba(0,152,255,.45)}
.hcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9%;box-sizing:border-box;filter:drop-shadow(0 18px 28px rgba(0,0,0,.5))}
.hcard__info{padding:16px 4px 0}
.hcard__name{font-family:"Gotham","Montserrat",Arial,sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;color:#0a0b0d;line-height:1.18;margin:0}
.hcard__role{font-size:12.5px;color:#5a6472;line-height:1.5;margin:9px 0 0}
.howto__cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:46px;text-align:center}
.howto__cta small{color:#7a8088;font-size:11px;line-height:1.5;max-width:560px}

/* iPhone 17 Pro mockup — live HTML runs in .iphone__screen over the frame */
.iphone{position:relative;height:88%;aspect-ratio:760/1556;--u:1px}
.iphone__frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none;user-select:none}
.iphone__screen{position:absolute;left:4.5%;right:4.5%;top:8%;bottom:6.5%;z-index:2;overflow:hidden;border-radius:calc(4*var(--u));display:flex;flex-direction:column}
/* menu screen (card 1) */
.ipx-menu{background:#fff;padding:calc(5.5*var(--u)) calc(6*var(--u)) calc(6*var(--u))}
.ipx-eyebrow{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;font-size:calc(3.3*var(--u));letter-spacing:.14em;text-transform:uppercase;color:#0098ff;margin-bottom:calc(3*var(--u))}
.ipx-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(3*var(--u));flex:1;justify-content:center}
.ipx-nav li{font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:800;font-size:calc(9.6*var(--u));line-height:1.1;letter-spacing:-.03em;color:#0a0b0d;white-space:nowrap;animation:ipxLit 6s infinite;animation-delay:calc(var(--i) * 1s)}
.ipx-btn{align-self:flex-start;margin-top:calc(3.5*var(--u));background:#0098ff;color:#fff;font-family:"Inter",Arial,sans-serif;font-weight:800;font-size:calc(3.8*var(--u));padding:calc(2.8*var(--u)) calc(5*var(--u));text-transform:uppercase;letter-spacing:.05em}
@keyframes ipxLit{0%{color:#0a0b0d}5%,13%{color:#0098ff}18%,100%{color:#0a0b0d}}
/* triage quiz screen (card 2) */
.ipx-triage{background:radial-gradient(120% 62% at 94% 0%,rgba(0,152,255,.10),rgba(255,255,255,0) 52%),#fff;padding:calc(6*var(--u)) calc(4.6*var(--u)) calc(4*var(--u))}
.ipx-eyebrow--b{color:#0098ff;margin-bottom:calc(1.5*var(--u));font-size:calc(2.9*var(--u))}
.ipx-h{font-family:"Gotham","Montserrat",Arial,sans-serif;font-weight:800;font-size:calc(8*var(--u));line-height:1.02;letter-spacing:-.04em;color:#0a0b0d;margin-bottom:calc(4*var(--u))}
.ipx-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(2.3*var(--u));flex:1}
.ipx-opts li{display:flex;align-items:center;gap:calc(3*var(--u));background:#f3f5f7;border:1px solid rgba(0,0,0,.08);padding:calc(2.9*var(--u)) calc(3.2*var(--u));overflow:hidden;animation:ipxRow 5s infinite;animation-delay:calc(var(--i) * 1s)}
.ipx-ico{flex:none;width:calc(10.5*var(--u));height:calc(10.5*var(--u));background:rgba(0,152,255,.12);display:grid;place-items:center;color:#0098ff}
.ipx-ico svg{width:calc(5.6*var(--u));height:calc(5.6*var(--u))}
.ipx-ot{display:flex;flex-direction:column;gap:calc(.5*var(--u));min-width:0;overflow:hidden}
.ipx-ot b{font-family:"Inter",Arial,sans-serif;font-weight:800;font-size:calc(4.3*var(--u));color:#0a0b0d;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipx-ot small{font-family:"Inter",Arial,sans-serif;font-weight:600;font-size:calc(2.6*var(--u));letter-spacing:.05em;text-transform:uppercase;color:#6b7280;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ipx-secure{display:flex;align-items:center;gap:calc(2*var(--u));margin-top:calc(3*var(--u));font-family:"Inter",Arial,sans-serif;font-weight:500;font-size:calc(2.7*var(--u));color:#6b7280;line-height:1.2}
.ipx-secure svg{width:calc(3.3*var(--u));height:calc(3.3*var(--u));flex:none;color:#0098ff}
@keyframes ipxRow{0%{background:#f3f5f7;border-color:rgba(0,0,0,.08)}5%,15%{background:rgba(0,152,255,.14);border-color:rgba(0,152,255,.55)}20%,100%{background:#f3f5f7;border-color:rgba(0,0,0,.08)}}
@media(max-width:1050px){.hcards{grid-template-columns:repeat(2,1fr)}.howline{gap:8px}.howline__node{width:38px;height:38px;font-size:15px}}
@media(max-width:680px){.hcards{grid-template-columns:1fr;max-width:360px;margin:0 auto}.howline{display:none}}

/* ============================================================
   Quiz cards (after hero) + Featured-programs category filter
   ============================================================ */
.quiz{background:#f4f5f7;color:#0a0b0d;padding:64px 0;border-top:1px solid rgba(0,0,0,.08)}
.quiz-head{margin-bottom:30px}
.quiz .eyebrow{color:#0078ca}
.quiz .section-title{color:#0a0b0d}
.quiz .section-copy{color:#525862}
.quiz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quiz-card{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0a0c10;display:block;border:0}
.quiz-card img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(.9);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.quiz-card:hover img{transform:scale(1.06)}
.quiz-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,7,11,.92),rgba(4,7,11,.15) 55%,rgba(4,7,11,0) 82%)}
.quiz-card__body{position:absolute;left:18px;right:18px;bottom:18px;z-index:2}
.quiz-card__cat{display:block;font-family:"Gotham","Montserrat",Arial,sans-serif;font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.quiz-card__cta{display:inline-flex;align-items:center;gap:7px;margin-top:9px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#0098ff}
.quiz-card__cta b{transition:transform .25s ease}
.quiz-card:hover .quiz-card__cta b{transform:translateX(4px)}
@media(max-width:900px){.quiz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.quiz-grid{grid-template-columns:1fr}.quiz-card{aspect-ratio:16/10}}

/* featured filter tabs — same look as our CTAs */
.prog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.prog-tab{white-space:nowrap}
.prog-tab.btn-outline{color:#fff}
.prog-tab.is-active{background:var(--blue) !important;border-color:var(--blue) !important;color:#fff !important}
/* filtered featured grid: 4-up, only the active category shows */
.program-grid{grid-template-columns:repeat(4,1fr) !important}
.program-grid .product[data-cat]{display:none}
.program-grid .product.is-shown{display:flex;animation:progFade .45s ease both}
@keyframes progFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.program-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:680px){.program-grid{grid-template-columns:1fr !important}}

/* ============================================================
   Marquee (after hero), white treatments, momentum final CTA,
   redesigned footer
   ============================================================ */
.marquee{background:#0c0e12;color:#fff;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:14px 0}
.marquee__track{display:flex;align-items:center;gap:30px;width:max-content;animation:marq 42s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:"Gotham","Montserrat",Arial,sans-serif;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;color:#f7f8fb}
.marquee__pill{height:40px;width:auto;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
@keyframes marq{to{transform:translateX(-50%)}}

/* treatments section → white (but the image cards keep white text over their dark gradient) */
.section.treatments{background:#fff;color:#0a0b0d}
.section.treatments .eyebrow{color:#0078ca}
.section.treatments .section-title{color:#0a0b0d}
.section.treatments .treatment-card h3{color:#fff}

/* final CTA → momentum image bg instead of flat blue */
.final{position:relative;overflow:hidden;background:#04121f !important}
.final::before{content:"";position:absolute;inset:0;background:url('../images/momentum.jpg') center 30%/cover no-repeat;opacity:.55}
.final::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,18,.62),rgba(4,10,18,.84))}
.final .wrap{position:relative;z-index:2}
.final h2,.final p{color:#fff !important}

/* ---- redesigned footer (all pages) ---- */
/* treatments.css leaves the footer transparent → it went white under body.light.
   Force the dark footer on every page so all footers match the homepage. */
footer{background:#050608 !important}
.footer-grid{grid-template-columns:1.4fr 1fr 1.3fr !important;gap:50px}
.footer-col--brand .brand{margin-bottom:20px;display:inline-flex}
.footer-col--brand h4,.footer-col h4{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin:0 0 14px}
.footer-social{display:flex;gap:10px}
.footer-social a.footer-soc{display:grid;place-items:center;width:40px;height:40px;margin:0;border:1px solid rgba(255,255,255,.24);color:#c4c8d0;transition:border-color .2s,color .2s}
.footer-social a.footer-soc:hover{border-color:var(--blue);color:var(--blue)}
.footer-social a.footer-soc svg{width:18px;height:18px}
.footer-col--right{display:flex;flex-direction:column;gap:30px}
.footer-col--right a.footer-contact,.footer-col--right span.footer-contact{display:flex;align-items:center;gap:9px;color:#b8bcc4;font-size:12px;margin:0 0 10px}
.footer-col--right .footer-contact svg{width:15px;height:15px;flex:none;color:var(--blue)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr !important;gap:34px}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr !important}}

/* ---- mobile: keep quiz / featured / how-it-works two-up (like the manifesto) ---- */
@media(max-width:680px){
  .quiz-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .quiz-card{aspect-ratio:3/4 !important}
  .quiz-card__cat{font-size:15px}
  .program-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .hcards{grid-template-columns:repeat(2,1fr) !important;max-width:none !important;margin:0 !important;gap:12px}
}

/* ===== R18 patch (2026-07-21) ===== */
/* Quiz cards + images are both 3:4, so object-position can't crop; zoom-from-bottom
   lifts the subject and trims the empty headspace to match the weight-loss framing. */
.quiz-card.q-up img{transform-origin:50% 100%}
/* ED: gentle bottom-lift so the couple's heads sit like the weight-loss head (was 1.20 = too high) */
.quiz-card.q-up-ed img{transform:scale(1.06)}
.quiz-card.q-up-ed:hover img{transform:scale(1.11)}
/* hair: reference framing — leave */
.quiz-card.q-up-hair img{transform:scale(1.14)}
.quiz-card.q-up-hair:hover img{transform:scale(1.20)}
/* skin: forehead sits at the very top, so NO bottom-lift (it was cropping her forehead);
   zoom gently from the face on hover instead */
.quiz-card.q-up-skin img{transform:none;transform-origin:50% 35%}
.quiz-card.q-up-skin:hover img{transform:scale(1.05)}

/* "Mind and Muscle" slot replaced by the treatments grid on a black bg */
.section.treatments.treatments--dark{background:#000;color:#fff}
.section.treatments.treatments--dark .eyebrow{color:#0098ff}
.section.treatments.treatments--dark .section-title{color:#fff}
.section.treatments.treatments--dark .treatment-card h3{color:#fff}

/* ===== Section-intro consistency (homepage only, scoped to .home) =====
   One eyebrow, one heading scale, one body scale + identical gaps in every section.
   Colour stays theme-aware only where a section background flips to near-white. */

/* Eyebrow — identical size / tracking / weight / colour / gap everywhere.
   !important is needed because inline `.program-head p` and `.split-copy p`
   were catching the eyebrow <p> and turning it grey at 14–15px. */
.home .eyebrow{
  font-size:11px !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  color:#0078ca !important;
  margin:0 0 16px !important;
  max-width:none !important;
}

/* Featured head was the only two-column intro — stack it like the rest */
.home .program-head{display:block !important;align-items:initial !important}

/* Section heading — one scale for every intro */
.home .section-title,
.home .program-head h2,
.home .split-copy h2,
.home .pricing h2,
.home .clinician-grid h2,
.home .faq-grid h2{
  font-size:clamp(30px,3.6vw,54px) !important;
  line-height:1.04 !important;
  letter-spacing:-.03em !important;
  font-weight:800 !important;
  margin:0 !important;
}

/* Section body — one size / line-height / gap / measure across all intros */
.home .section-copy,
.home .program-head > p,
.home .split-copy > p:not(.eyebrow),
.home .pricing-grid > .reveal > p:not(.eyebrow),
.home .faq-grid > .reveal > p:not(.eyebrow){
  font-size:15px !important;
  line-height:1.6 !important;
  margin:16px 0 0 !important;
  max-width:600px !important;
}

/* Keep body copy on the near-white sections a single soft dark-grey */
.home .quiz .section-copy,
.home .pricing-grid > .reveal > p:not(.eyebrow),
.home .faq-grid > .reveal > p:not(.eyebrow){
  color:#525862 !important;
}

/* Heading highlight spans that had no blue rule yet
   (Pricing / FAQ / Patient / Care already colour their h2 span inline). */
.home .section-title span,
.home .program-head h2 span{color:var(--blue)}
.home .final h2 span{color:var(--blue) !important}
.home .howto__bigtitle .howto__hl{color:var(--blue)}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .fx-progress{display:none}
  details p{animation:none}
  .nav-mega{transition:none}
  .howline__beat .pulse,.ipx-nav li,.ipx-opts li{animation:none}
  .marquee__track{animation:none}
}

/* ===== Rounded corners (client request — replaces the locked sharp/square look) =====
   Applies on every page. Full-bleed hero/banner/split media stays square on purpose. */
:root{--r-card:16px;--r-btn:12px;--r-chip:10px}
/* CTAs / buttons / category filter tabs */
.btn,.prog-tab{border-radius:var(--r-btn) !important}
/* cards & image cards (home + treatment pages; all already have overflow:hidden) */
.product,
.quiz-card,
.treatment-card,
.manifesto-card,
.hcard__imgwrap,
.editorial-card,
.receipt,
.curobox,
.curoreview{border-radius:var(--r-card) !important}
/* small square chips */
.footer-soc{border-radius:var(--r-chip) !important}

/* ===== Alternating BLACK / WHITE bands (body.bw) — replaces the all-white theme.
   Header stays frosted glass · footer stays dark · the final section keeps its image. ===== */

/* --- Frosted-glass header (kept) --- */
body.bw .nav{background:rgba(14,18,26,.42) !important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.14) !important}
body.bw .nav.nav-stuck{background:rgba(10,13,19,.6) !important}

/* ---------- HOMEPAGE bands: quiz W · featured B · howto W · split B · pricing W · care B · faq W.
   featured/split/care are already dark w/ white text; quiz/howto/pricing/faq already light w/ dark text.
   R22: removing the "treatments" band (it duplicated the bento) took a BLACK band out of the middle,
   which would have left pricing W against care W. Reverting R20's two flips — care back to its native
   dark, faq back to its native white — restores the alternation with no new overrides. ---------- */
body.bw .quiz,
body.bw .howto,
body.bw .pricing{background:#fff !important}

/* ---------- TREATMENT PAGES: alternate every flat band (hero + CTA keep their photo).
   Base = readable-on-white (dark text, whitened sections, dark cards keep light text);
   then every ODD flat band flips to black with light text. ---------- */
body.bw:not(.home) main{color:#0b0f14;--muted:#4b515c}
body.bw:not(.home) main > section:not(.px-sec):not(.px-bar):not(.hero):not(.cta):not(.final):not(.image-cta):not(.big-cta):not(.image-banner){background:#fff !important}
body.bw:not(.home) main h1,
body.bw:not(.home) main h2,
body.bw:not(.home) main h3,
body.bw:not(.home) main h4,
body.bw:not(.home) main h5{color:#0b0f14}
body.bw:not(.home) main .section-copy,
body.bw:not(.home) main .copy,
body.bw:not(.home) main li{color:#3f4650}
/* dark photo / card surfaces keep light text */
body.bw:not(.home) .hero,
body.bw:not(.home) .cta,
body.bw:not(.home) .image-cta,
body.bw:not(.home) .big-cta,
body.bw:not(.home) .image-banner,
body.bw:not(.home) .split-image{color:#fff !important}
body.bw:not(.home) .hero h1,
body.bw:not(.home) .hero h2,
body.bw:not(.home) .hero p,
body.bw:not(.home) .cta h2,
body.bw:not(.home) .cta p,
body.bw:not(.home) .image-cta h2,
body.bw:not(.home) .image-cta p,
body.bw:not(.home) .big-cta h2,
body.bw:not(.home) .big-cta p,
body.bw:not(.home) .image-banner h2,
body.bw:not(.home) .image-banner p{color:#fff !important}
body.bw:not(.home) .product{color:#f7f8fb !important}
body.bw:not(.home) .product h3{color:#f7f8fb !important}
body.bw:not(.home) .product p{color:#b4b8c1 !important}
body.bw:not(.home) .editorial-card h1,
body.bw:not(.home) .editorial-card h2,
body.bw:not(.home) .editorial-card h3,
body.bw:not(.home) .fact,
body.bw:not(.home) .fact h1,
body.bw:not(.home) .fact h2,
body.bw:not(.home) .fact h3,
body.bw:not(.home) .fact h4{color:#f7f8fb !important}
body.bw:not(.home) .fact p{color:#b4b8c1 !important}
/* --- ODD flat bands → black with light text (the alternation) --- */
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta):not(.image-cta):not(.big-cta):not(.image-banner){background:#08090b !important;--muted:#a9adb7}
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) h1,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) h2,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) h3,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) h4,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) h5,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) summary,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) b,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) strong{color:#f7f8fb !important}
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .section-copy,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .copy,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) li,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .stat p,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) p:not(.eyebrow){color:#a9adb7 !important}
/* white bands: hardcoded light-grey stat labels → dark grey */
body.bw:not(.home) main > section:nth-of-type(even):not(.px-sec):not(.px-bar) .stat p{color:#4b515c !important}
/* light inner cards (e.g. the "other treatments" link cards, #f4f4f3) always keep
   dark text — even inside a black band. Matches the odd-band selector structure so it
   out-specifies the odd-band lightening rule. */
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .other a,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .other a h3,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .other a h4,
body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta) .other a p{color:#0b0f14 !important}

/* ================= "Find your treatment" — product-showcase bento ================= */
.tc{margin-top:26px}
.tc-banners{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tc-banner{position:relative;display:block;aspect-ratio:1440/860;border-radius:22px;overflow:hidden;perspective:1200px;box-shadow:0 26px 50px -26px rgba(8,42,78,.5);opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.tc.in .tc-banner{opacity:1;transform:none}
.tc.in .tc-banner:nth-child(2){transition-delay:.09s}
.tc-banner:hover{box-shadow:0 40px 72px -22px rgba(8,42,78,.55)}
.tc-banner:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.tc-bg{position:absolute;inset:-9%;z-index:0;will-change:transform;transition:transform .3s ease-out}
.tc-wl .tc-bg{background:radial-gradient(95% 80% at 28% 16%,rgba(255,255,255,.4),rgba(255,255,255,0) 55%),radial-gradient(120% 120% at 92% 112%,rgba(3,46,92,.55),rgba(3,46,92,0) 62%),linear-gradient(140deg,#8ec6f6 0%,#3f8ede 48%,#0b62b6 100%)}
.tc-sh{background:#0b1526}
.tc-banners + .tc-banners{margin-top:18px}
/* Skin + Hair banners — photo cards */
.tc-sk{background:#141414}
.tc-hr{background:#0e1420}
.tc-sk .tc-photo{object-position:66% 32%}
.tc-hr .tc-photo{object-position:60% 22%}
.tc-stage{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;transition:transform .3s ease-out}
.tc-prod{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:transform;transition:transform .3s ease-out}
.tc-prod img{position:absolute;display:block}
.tc-wl .tc-pen{right:-4%;top:-3%;width:60%;filter:drop-shadow(0 20px 22px rgba(6,38,72,.34));animation:tcpenf 6s ease-in-out infinite}
.tc-wl .tc-pill{right:13%;bottom:14%;width:17%;filter:drop-shadow(0 12px 14px rgba(6,38,72,.38));animation:tcpillf 5.2s ease-in-out .5s infinite}
@keyframes tcpenf{0%,100%{transform:rotate(2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-11px)}}
@keyframes tcpillf{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes tctabf{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tc-photo{position:absolute;inset:0;width:100%;height:108%;object-fit:cover;object-position:58% 20%;animation:tccoupf 6.5s ease-in-out infinite}
@keyframes tccoupf{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.015)}}
.tc-graph{position:absolute;left:6%;top:12%;width:48%;height:25%;z-index:2;pointer-events:none;overflow:visible}
.tc-gl{fill:none;stroke:rgba(233,244,255,.62);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:3000;stroke-dashoffset:3000;transition:stroke-dashoffset 1.5s .25s ease-out}
.tc.in .tc-gl{stroke-dashoffset:0}
.tc-claim{position:absolute;left:6%;top:8%;z-index:5;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;color:#0b3d70;background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.7);padding:7px 13px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 16px rgba(6,38,72,.16)}
.tc-claim b{color:var(--blue);font-weight:900;font-size:13px}
.tc-scrim{position:absolute;inset:0;z-index:3;pointer-events:none}
.tc-scrim--wl{background:radial-gradient(150% 108% at 0% 100%,rgba(6,30,58,.6) 0%,rgba(6,30,58,.3) 44%,rgba(6,30,58,0) 72%)}
.tc-sh .tc-scrim,.tc-hr .tc-scrim,.tc-sk .tc-scrim{background:linear-gradient(103deg,rgba(9,14,26,.9) 0%,rgba(9,14,26,.48) 40%,rgba(9,14,26,0) 66%),linear-gradient(0deg,rgba(9,14,26,.72) 0%,rgba(9,14,26,0) 40%)}
.tc-copy{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:26px 28px;display:flex;flex-direction:column;align-items:flex-start}
.tc-ey{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px;color:#fff}
.tc-wl .tc-ey{color:#eaf4ff}
.tc-t{font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;font-size:clamp(26px,3.1vw,42px);line-height:1.04;letter-spacing:-.025em;text-transform:uppercase;margin:0 0 18px;color:#fff;text-shadow:0 1px 16px rgba(6,24,48,.42)}
.tc-cta{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;padding:12px 20px;border-radius:999px;background:rgba(255,255,255,.92);color:#0a3866;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 22px -8px rgba(6,30,58,.5);transition:background .25s,transform .25s}
.tc-cta svg{width:16px;height:16px;transition:transform .25s}
.tc-banner:hover .tc-cta{background:#fff}
.tc-banner:hover .tc-cta svg{transform:translateX(5px)}
.tc-cta--light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tc-banner:hover .tc-cta--light{background:rgba(255,255,255,.28)}
.tc-glass{position:absolute;inset:0;z-index:6;border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 60px rgba(255,255,255,.08);pointer-events:none}
/* tiles */
.tc-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.tc-tile{position:relative;display:flex;align-items:center;gap:6px;padding:14px 16px;min-height:82px;border-radius:16px;background:#fff;border:1px solid rgba(10,40,74,.1);box-shadow:0 14px 30px -20px rgba(8,42,78,.5);opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;transform-style:preserve-3d}
.tc.in .tc-tile{opacity:1;transform:none}
.tc.in .tc-tiles .tc-tile:nth-child(2){transition-delay:.06s}
.tc.in .tc-tiles .tc-tile:nth-child(3){transition-delay:.12s}
.tc.in .tc-tiles .tc-tile:nth-child(4){transition-delay:.18s}
.tc-tile:hover{transform:perspective(900px) translateY(-6px) rotateX(7deg) rotateY(-5deg);box-shadow:0 30px 48px -20px rgba(8,42,78,.5);border-color:rgba(0,152,255,.5)}
.tc-tile:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.tc-tlabel{font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;color:#12233a;flex:1 1 auto;line-height:1.1;padding-right:6px}
.tc-trender{width:56px;height:56px;flex:0 0 auto;transition:transform .32s cubic-bezier(.34,1.56,.64,1);animation:tctabf 5s ease-in-out infinite}
.tc-trender img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 10px rgba(8,34,64,.24))}
.tc-tile:hover .tc-trender{transform:translateZ(26px) scale(1.14)}
.tc-tchev{position:absolute;right:12px;bottom:9px;color:var(--blue);display:inline-flex;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tc-tchev svg{width:16px;height:16px}
.tc-tile:hover .tc-tchev{transform:translateX(5px)}
@media(max-width:820px){
  .tc-banners{grid-template-columns:1fr;gap:14px}
  .tc-tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .tc-banner{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){
  .tc-pen,.tc-pill,.tc-photo,.tc-trender{animation:none !important}
}

/* ============ R22 — photo banners go LIGHT ============
   The three photo cards were shot on dark backdrops, which fought both the blue
   weight-loss card and the white band around the section. Photos regenerated on a
   pale Curo-blue studio backdrop, so the near-black scrim + white copy are replaced
   with a soft blue-white scrim + ink copy. The blue WL card stays the one saturated
   tile. Crop is pulled to the left edge so the subject sits in the RIGHT half and
   the copy gets clean negative space. */
.tc-sh,.tc-sk,.tc-hr{background:#eaf3fc;box-shadow:0 22px 44px -28px rgba(8,42,78,.42)}
/* The three photos are now pre-cropped to the box ratio (1440/860/1.08 = 1.55),
   so the framing lives in the file, not in object-position — see scratchpad
   imgprep/r22.js for the crop rectangles. Nothing left to crop here. */
.tc-photo,.tc-sh .tc-photo,.tc-sk .tc-photo,.tc-hr .tc-photo{object-position:50% 50%}
.tc-sh .tc-scrim,.tc-sk .tc-scrim,.tc-hr .tc-scrim{background:linear-gradient(100deg,rgba(240,247,255,.97) 0%,rgba(240,247,255,.9) 24%,rgba(240,247,255,.52) 44%,rgba(240,247,255,0) 64%),linear-gradient(0deg,rgba(240,247,255,.82) 0%,rgba(240,247,255,0) 34%)}
/* Curo Deep, not the #0078ca used on the white bands: at 12px the lighter blue
   only reaches 4.29:1 on this wash, Curo Deep reaches 6.52:1. */
.tc-sh .tc-ey,.tc-sk .tc-ey,.tc-hr .tc-ey{color:#0056b3}
.tc-sh .tc-t,.tc-sk .tc-t,.tc-hr .tc-t{color:#0b2340;text-shadow:none}
.tc-cta--light{background:#fff;color:#0a3866;border:1px solid rgba(10,56,102,.16);box-shadow:0 10px 22px -10px rgba(6,30,58,.34);-webkit-backdrop-filter:none;backdrop-filter:none}
.tc-banner:hover .tc-cta--light{background:#f2f8ff}
.tc-sh .tc-glass,.tc-sk .tc-glass,.tc-hr .tc-glass{box-shadow:inset 0 0 0 1px rgba(10,40,74,.09)}
/* On phones the card goes 16/10 and the copy takes most of the width, so it lands
   on the subject. Push the light wash much further across to keep the ink legible. */
@media(max-width:820px){
  .tc-sh .tc-scrim,.tc-sk .tc-scrim,.tc-hr .tc-scrim{background:linear-gradient(100deg,rgba(240,247,255,.99) 0%,rgba(240,247,255,.97) 44%,rgba(240,247,255,.78) 64%,rgba(240,247,255,.12) 86%,rgba(240,247,255,0) 100%)}
  /* 16/10 + a bottom-anchored copy stack pushes the WL eyebrow up into the
     "Same price at every dose" chip; the chip is the one that can go. */
  .tc-wl .tc-claim{display:none}
}

/* ================= R23 — treatment-page heroes go LIGHT =================
   The six hero photos were regenerated on the same pale Curo-blue studio
   backdrop as the homepage bento, subject on the right and clean space at the
   bottom-left. So the heroes stop being dark photo banners with white copy and
   become light bands with ink copy, matching the bento's eyebrow/accent/type.
   Scoped to the treatment pages (`body.bw:not(.home)`); the homepage video hero
   is untouched. ======================================================== */

/* 1. Copy sits CENTRE-left on every hero, treatment pages and homepage alike.
   The heroes previously disagreed: `.hero{align-items:flex-end}` with a child
   `.wrap{margin:auto}` (auto margins absorb the free space and beat flex-end),
   plus lopsided paddings like `150px 0 48px`, so some pages read bottom-left and
   others centre-left. Centre them explicitly and drop the top-heavy padding — the
   small bottom padding lifts the block to optical centre. */
body.bw:not(.home) .hero{align-items:center !important}
body.bw:not(.home) .hero > .wrap{margin:0 auto !important}
body.bw:not(.home) .hero-content{padding:0 0 40px !important}
body.bw:not(.home) .hero-grid{align-items:center !important;padding:0 0 40px !important}
/* homepage video hero: same treatment, dark styling untouched */
body.home .hero{align-items:center !important}
body.home .hero-grid--solo{align-items:center !important;padding:0 0 40px !important}

/* 2. The hero background IS the gradient now, and the scrim is gone.
   Each photo was shot on a pale blue-to-white backdrop; `--hg1/2/3` below are
   sampled from that photo's own left-hand column, so the CSS gradient continues
   it seamlessly. No white wash over the image any more — the copy sits on clean
   gradient, not on a scrim. */
body.bw:not(.home) .hero{background:linear-gradient(180deg,#cfe6f7 0%,#e6f2fb 52%,#f7fbff 100%) !important}
body.bw:not(.home) .hero::after{display:none !important}
/* Per-page subject height. The set is deliberately mixed: weight-loss and
   anti-aging are full standing figures (trimmed ratio ~0.42-0.84), while skin,
   hair and hormones are the closer crops the client preferred (~1.08-1.18 wide).
   A wide crop at the same height as a standing figure would render its head
   roughly twice the size, so the closer ones sit lower. */
body.bw:not(.home) .hero--wl{--hh:84%}
body.bw:not(.home) .hero--aa{--hh:82%}
body.bw:not(.home) .hero--sh{--hh:80%}
body.bw:not(.home) .hero--ho{--hh:72%}
body.bw:not(.home) .hero--sk{--hh:80%}
body.bw:not(.home) .hero--hr{--hh:78%}

/* 3. Ink copy — has to out-rank the `body.bw:not(.home) .hero{color:#fff}` block
   above, which assumed every hero was a dark photo. */
body.bw:not(.home) .hero{color:#0b2340 !important}
body.bw:not(.home) .hero h1{color:#0b2340 !important}
body.bw:not(.home) .hero p,
body.bw:not(.home) .hero .lead{color:#3f4650 !important}
/* accent on the emphasised words. Curo Blue #0098ff only reaches 2.8:1 on this
   wash — under even the large-text bar, and it reads washed out. #0078ca is the
   blue already used for eyebrows on the site's other light bands: 4.29:1. */
body.bw:not(.home) .hero h1 span{color:#0078ca !important}
/* eyebrow: Curo Deep + the bento's 12px/.15em, replacing the old 9px blue crumb */
body.bw:not(.home) .hero .eyebrow{color:#0056b3 !important;font-size:12px !important;letter-spacing:.15em !important;font-weight:800 !important;text-transform:uppercase !important;margin:0 0 12px !important}

/* 4. Framing. The hero is far wider than 16:9 (720px tall against a 1280-1920px
   viewport = 1.8-2.7), so `cover` crops the HEIGHT, not the width — the
   left-to-right composition survives as generated. Bias the crop upward so heads
   stay in frame on ultrawide instead of centring and slicing them. */
/* 4. The subject is a transparent CUTOUT standing on the gradient.
   It replaces the rectangular photo, which fixed three things at once:
   (a) the "card" — the photo's own backdrop never matched the hero gradient
       exactly, so its edges read as a panel sitting behind the person;
   (b) clipping — there is no image boundary left for a hand or a hip to be cut
       off by, and the files are trimmed to the alpha bounds so the asset IS the
       subject;
   (c) heads behind the nav — the cutout is anchored to the hero's BOTTOM and
       sized by height, so it can never reach up under the chrome.
   Anchored to the wrap's right edge (not `right:0`, which pinned it to the
   VIEWPORT edge and left it stranded far from the copy on an ultrawide).
   Sized off the hero height, so it is identical at 1440 / 1920 / 2560+. */
body.bw:not(.home) .hero > img,
body.bw:not(.home) .hero .hero-bg{
  left:auto !important;
  right:max(26px, calc((100% - 1380px) / 2)) !important;
  top:auto !important;bottom:0 !important;
  width:auto !important;height:var(--hh,82%) !important;max-width:none !important;
  object-fit:contain !important;object-position:right bottom !important;
  /* Kill the GSAP parallax on these heroes. It applies an inline
     scale(1.09) translateY(-18px), which inflated the box 9% past the wrap edge
     and lifted the subject ~45px — that, not the crop, was clipping heads behind
     the nav. `!important` beats GSAP's inline style. Same call that was already
     made for the CTA/image banners (see the R4 notes above). */
  transform:none !important;will-change:auto !important;
  /* a cutout needs no edge mask — it needs grounding instead */
  -webkit-mask-image:none !important;mask-image:none !important;
  filter:drop-shadow(0 26px 26px rgba(12,46,84,.16)) !important;
}

/* 5. Light header. The R20 frosted DARK nav was invisible over the old dark hero
   photos; over a light hero it reads as a grey smear across the top. Treatment
   pages get a white frosted nav + the black logo (CuroLogoAnimated.svg). The
   homepage keeps the dark nav — its hero is still a dark video. */
body.bw:not(.home) .nav{background:rgba(255,255,255,.72) !important;border-bottom:1px solid rgba(10,40,74,.12) !important}
body.bw:not(.home) .nav.nav-stuck{background:rgba(255,255,255,.92) !important;border-bottom-color:rgba(10,40,74,.14) !important}
body.bw:not(.home) .nav-links a{color:#0b2340;opacity:.88}
body.bw:not(.home) .nav-links a:hover,
body.bw:not(.home) .nav-links a.active{color:#0056b3;opacity:1}
body.bw:not(.home) .nav-actions .fr,
body.bw:not(.home) .menu,
body.bw:not(.home) .menu-btn{color:#0b2340 !important}
/* the nav CTA is .btn-white — invisible on a white bar, so make it the blue one */
body.bw:not(.home) .nav .btn-white{background:#0098ff !important;border-color:#0098ff !important;color:#fff !important}
body.bw:not(.home) .nav .btn-white:hover{background:#0b2340 !important;border-color:#0b2340 !important;color:#fff !important}

/* 6. Phones. A 375x720 hero is portrait, so `cover` crops the WIDTH hard and the
   subject fills the frame — there is no empty left column left to write on. Swap
   the side wash for a strong bottom-up one and centre the crop on the subject. */
@media(max-width:680px){
  /* portrait hero: the contained photo would be wider than the screen, so sit it
     bottom-right at a fraction of the height and let the copy have the top-left */
  /* a cutout must never hang off the edge — pull it fully on-screen */
  body.bw:not(.home) .hero > img,
  body.bw:not(.home) .hero .hero-bg{height:50% !important;top:auto !important;bottom:0 !important;right:14px !important}
  body.bw:not(.home) .hero-content,
  body.bw:not(.home) .hero-grid{padding:0 0 190px !important}
}

/* ================= R24 — treatment-page section system =================
   Rebuilds the body of the 6 treatment pages on the structure the client
   supplied as reference (trust strip · statement · focus · how-it-works ·
   trust mosaic · FAQ · final CTA). Scoped `body.bw:not(.home)` so the
   homepage is untouched. Hero and product grid are left alone.

   DARK BANDS ARE PATTERNED: the reference uses flat blue with ribbon sweeps;
   the Curo version is near-black with the same sweeps in brand blue, drawn as
   SVG (assets/images/pattern-swirl.svg) so they stay crisp at any width. ==== */

.px-dark{position:relative;background-color:#08090b !important;color:#f7f8fb;overflow:hidden;isolation:isolate}
.px-dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../images/pattern-swirl.svg) center/cover no-repeat;opacity:.55}
.px-dark > *{position:relative;z-index:1}
.px-light{background-color:#eef4fa !important;color:#0b2340}
.px-white{background-color:#fff !important;color:#0b2340}

body.bw:not(.home) .px-sec{padding:78px 0;border-top:0 !important}
body.bw:not(.home) .px-dark h2,
body.bw:not(.home) .px-dark h3,
body.bw:not(.home) .px-dark h4{color:#fff !important}
body.bw:not(.home) .px-dark p,
body.bw:not(.home) .px-dark li{color:#c3cad6 !important}
body.bw:not(.home) .px-light h2,body.bw:not(.home) .px-white h2,
body.bw:not(.home) .px-light h3,body.bw:not(.home) .px-white h3{color:#0b2340 !important}
body.bw:not(.home) .px-light p,body.bw:not(.home) .px-white p,
body.bw:not(.home) .px-light li,body.bw:not(.home) .px-white li{color:#49535f !important}
.px-eye{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#0056b3 !important;margin:0 0 14px}
.px-dark .px-eye{color:#38b6ff !important}
.px-h{font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,46px) !important;line-height:1.03;letter-spacing:-.03em;margin:0}
.px-cta{display:inline-flex;align-items:center;white-space:nowrap;gap:9px;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:15px 26px;border-radius:999px;background:#0098ff;color:#fff !important;border:0;transition:background .25s,transform .25s}
.px-cta:hover{background:#0b2340;transform:translateY(-2px)}

/* ---- 1. trust strip ---- */
.px-bar{background:#fff;border-bottom:1px solid rgba(10,40,74,.1)}
.px-bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.px-bar div{display:flex;align-items:center;gap:9px;padding:17px 18px 17px 0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0b2340}
.px-bar div + div{padding-left:20px;border-left:1px solid rgba(10,40,74,.1)}
.px-bar svg{width:15px;height:15px;flex:0 0 auto;color:#0098ff}

/* ---- 2. statement ---- */
.px-intro .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.px-intro p{font-size:15px;line-height:1.65;margin:0 0 14px;max-width:640px}
.px-intro p:last-child{margin-bottom:0}

/* ---- 3. focus band (per page) ---- */
.px-focus .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.px-focus--full .wrap{display:block}
.px-shot{border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.px-shot img{width:100%;height:100%;object-fit:cover;display:block}
.px-card{background:#fff;border-radius:18px;padding:34px 32px}
.px-card h3{font-family:var(--display),"Montserrat",Arial,sans-serif;font-size:23px;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 20px;color:#0b2340 !important}
.px-check{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.px-check li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45;color:#49535f !important}
.px-check svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:#0098ff}
.px-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.px-cards article{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:26px 24px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.px-cards h3{font-family:var(--display),"Montserrat",Arial,sans-serif;font-size:18px;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 11px}
.px-cards p{font-size:13.5px;line-height:1.55;margin:0}
.px-focus .px-head{text-align:center;max-width:760px;margin:0 auto}

/* ---- 4. how it works ---- */
.px-how .px-head{text-align:center;margin-bottom:40px}
.px-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.px-steps figure{margin:0}
.px-steps .px-shot{aspect-ratio:16/10;box-shadow:0 22px 44px -28px rgba(8,42,78,.45)}
.px-tag{display:inline-block;margin:18px 0 9px;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#0056b3;background:#e7f2fd;border-radius:999px;padding:5px 11px}
.px-steps h3{font-family:var(--display),"Montserrat",Arial,sans-serif;font-size:19px;letter-spacing:-.02em;margin:0 0 8px;color:#0b2340 !important}
.px-steps p{font-size:13.5px;line-height:1.55;margin:0}

/* ---- 5. trust mosaic ---- */
.px-trust .px-head{text-align:center;margin-bottom:38px}
.px-mos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.px-mos article{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px 22px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.px-mos article.px-mos--blue{background:linear-gradient(150deg,#0098ff,#0056b3);border-color:transparent}
.px-mos article.px-mos--blue h3,.px-mos article.px-mos--blue p{color:#fff !important}
.px-mos h3{font-family:var(--display),"Montserrat",Arial,sans-serif;font-size:17px;letter-spacing:-.015em;text-transform:uppercase;margin:0 0 10px}
.px-mos p{font-size:13px;line-height:1.55;margin:0}
.px-mos .px-wide{grid-column:span 2}

/* ---- 6. FAQ ---- */
.px-faq .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.px-faq h2{margin-bottom:26px}
.px-faq details{border-top:1px solid rgba(10,40,74,.14);padding:16px 0}
.px-faq details:last-of-type{border-bottom:1px solid rgba(10,40,74,.14)}
.px-faq summary{font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;font-size:14.5px !important;letter-spacing:-.01em;color:#0b2340;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2px solid #0098ff;border-bottom:2px solid #0098ff;transform:rotate(45deg);transition:transform .25s}
.px-faq details[open] summary::after{transform:rotate(-135deg)}
.px-faq details p{font-size:13.5px !important;line-height:1.6;margin:12px 0 0;max-width:640px}
.px-faq .px-shot{aspect-ratio:4/3;position:sticky;top:100px}

/* ---- 7. final CTA ---- */
.px-final .wrap{display:grid;grid-template-columns:1fr .85fr;gap:64px;align-items:center}
.px-grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.px-grid6 span{display:block;border-radius:14px;overflow:hidden;aspect-ratio:1}
.px-grid6 img{width:100%;height:100%;object-fit:cover;display:block}
.px-final ul{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:12px}
.px-final li{display:flex;gap:11px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0b2340 !important}
.px-final li svg{width:15px;height:15px;flex:0 0 auto;color:#0098ff}

/* ---- weight calculator (weight-loss only) ---- */
.px-calc{background:#fff;border-radius:20px;padding:34px 34px 30px;box-shadow:0 34px 70px -40px rgba(0,0,0,.6)}
.px-calc .px-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:6px}
.px-calc label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#49535f}
.px-calc output{font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;color:#0b2340;line-height:1}
.px-calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,#0098ff var(--fill,40%),#dce6f0 var(--fill,40%));outline:none;margin:16px 0 26px}
.px-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:#0098ff;border:4px solid #fff;box-shadow:0 4px 12px rgba(6,38,72,.35);cursor:pointer}
.px-calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#0098ff;border:4px solid #fff;box-shadow:0 4px 12px rgba(6,38,72,.35);cursor:pointer}
.px-calc .px-out{border-top:1px solid rgba(10,40,74,.12);padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.px-calc .px-out b{display:block;font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.035em;line-height:1;color:#0098ff}
.px-calc .px-out span{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#49535f;margin-top:8px}
.px-fine{font-size:11px;line-height:1.5;color:#8892a0 !important;margin:18px 0 0}
.px-dark .px-fine{color:#8b95a4 !important}

@media(max-width:900px){
  body.bw:not(.home) .px-sec{padding:56px 0}
  .px-bar .wrap{grid-template-columns:1fr 1fr}
  .px-bar div{border-left:0 !important;padding-left:0 !important;border-top:1px solid rgba(10,40,74,.1)}
  .px-bar div:nth-child(-n+2){border-top:0}
  .px-bar div:nth-child(even){padding-left:18px !important;border-left:1px solid rgba(10,40,74,.1) !important}
  .px-intro .wrap,.px-focus .wrap,.px-faq .wrap,.px-final .wrap{grid-template-columns:1fr;gap:30px}
  .px-steps,.px-cards{grid-template-columns:1fr;gap:20px}
  .px-mos{grid-template-columns:1fr 1fr}
  .px-mos .px-wide{grid-column:span 2}
  .px-faq .px-shot{position:static}
  .px-calc{padding:26px 22px}
}

/* R24 fix — the R20 alternating-band rule
   (`body.bw:not(.home) main > section:nth-of-type(odd):not(.px-sec):not(.px-bar):not(.hero):not(.cta)`)
   carries more specificity than a bare `.px-white`, so it was repainting the
   new sections black by position. The R24 sections choose their own band
   colour, so restate them at matching specificity to win. */
body.bw:not(.home) main > section.px-white{background-color:#fff !important;color:#0b2340 !important}
body.bw:not(.home) main > section.px-light{background-color:#eef4fa !important;color:#0b2340 !important}
body.bw:not(.home) main > section.px-dark{background-color:#08090b !important;color:#f7f8fb !important}
body.bw:not(.home) main > section.px-bar{background-color:#fff !important;color:#0b2340 !important}

/* the same rule also forces light text on odd bands — undo it inside the
   light R24 sections, and keep it inside the dark ones */
body.bw:not(.home) main > section.px-white h2,
body.bw:not(.home) main > section.px-white h3,
body.bw:not(.home) main > section.px-white h4,
body.bw:not(.home) main > section.px-light h2,
body.bw:not(.home) main > section.px-light h3,
body.bw:not(.home) main > section.px-light h4,
body.bw:not(.home) main > section.px-light summary,
body.bw:not(.home) main > section.px-bar div{color:#0b2340 !important}
body.bw:not(.home) main > section.px-white p,
body.bw:not(.home) main > section.px-white li,
body.bw:not(.home) main > section.px-light p,
body.bw:not(.home) main > section.px-light li{color:#49535f !important}
body.bw:not(.home) main > section.px-white .px-eye,
body.bw:not(.home) main > section.px-light .px-eye{color:#0056b3 !important}
body.bw:not(.home) main > section.px-dark h2,
body.bw:not(.home) main > section.px-dark h3{color:#fff !important}
body.bw:not(.home) main > section.px-dark p,
body.bw:not(.home) main > section.px-dark li{color:#c3cad6 !important}
body.bw:not(.home) main > section.px-dark .px-eye{color:#38b6ff !important}
body.bw:not(.home) main > section.px-dark .px-card h3{color:#0b2340 !important}
body.bw:not(.home) main > section.px-dark .px-card li,
body.bw:not(.home) main > section.px-dark .px-calc label{color:#49535f !important}
body.bw:not(.home) main > section.px-dark .px-calc output{color:#0b2340 !important}
body.bw:not(.home) main > section.px-dark .px-calc .px-out b{color:#0098ff !important}
body.bw:not(.home) main > section.px-dark .px-calc .px-out span{color:#49535f !important}
body.bw:not(.home) main > section.px-final li{color:#0b2340 !important}
body.bw:not(.home) main > section .px-cta{color:#fff !important}

/* the product grid keeps the dark treatment styling it already had */
body.bw:not(.home) main > section#treatments{background:#08090b !important}

/* ================= R25 — pattern everywhere, no flat black =================
   The swirl now carries its opacity internally (see pattern-swirl.svg), so it
   can be applied as a plain background-image rather than a ::before overlay.
   That matters because several dark surfaces already use ::before for their own
   art (the homepage .final photo), which an overlay would have fought. ======= */

.px-dark::before{content:none !important}

.px-dark,
body.bw:not(.home) main > section#treatments,
body.home main > section:not(.quiz):not(.howto):not(.pricing):not(.faq-section):not(.hero):not(.marquee):not(.final),
body.home .marquee,
footer{
  background-image:url(../images/pattern-swirl.svg) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
/* the homepage bands are transparent over the body, so give them the base colour
   the pattern needs to sit on */
body.home main > section:not(.quiz):not(.howto):not(.pricing):not(.faq-section):not(.hero):not(.marquee):not(.final){
  background-color:#08090b !important;
}
footer{background-color:#050608 !important}

/* ---- product grid: it is a dark band, so its type must be light ---- */
body.bw:not(.home) main > section#treatments{background-color:#08090b !important}
body.bw:not(.home) main > section#treatments .section-title,
body.bw:not(.home) main > section#treatments h2,
body.bw:not(.home) main > section#treatments h3,
body.bw:not(.home) main > section#treatments .product h3{color:#f7f8fb !important}
body.bw:not(.home) main > section#treatments .muted,
body.bw:not(.home) main > section#treatments .product p,
body.bw:not(.home) main > section#treatments .fine{color:#a9adb7 !important}
body.bw:not(.home) main > section#treatments .eyebrow{color:#38b6ff !important}
body.bw:not(.home) main > section#treatments .product-kicker{color:#38b6ff !important}
body.bw:not(.home) main > section#treatments .product-foot span{color:#e7eef7 !important}
body.bw:not(.home) main > section#treatments .product-foot span:last-child{color:#38b6ff !important}

/* ---- emphasis word in every section heading ---- */
.px-h span{color:#0098ff}
.px-dark .px-h span{color:#38b6ff}

/* ---- FOCUS band is now WHITE (was dark) ---- */
body.bw:not(.home) main > section.px-focus .px-cards article{
  background:#fff;border:1px solid rgba(10,40,74,.12);
  box-shadow:0 18px 40px -28px rgba(8,42,78,.45);-webkit-backdrop-filter:none;backdrop-filter:none}
body.bw:not(.home) main > section.px-focus .px-cards h3{color:#0b2340 !important}
body.bw:not(.home) main > section.px-focus .px-cards p{color:#49535f !important}
body.bw:not(.home) main > section.px-focus .px-card{
  background:#eef4fa;border:1px solid rgba(10,40,74,.1)}
body.bw:not(.home) main > section.px-focus .px-calc{
  background:#f7fbff;border:1px solid rgba(10,40,74,.1);
  box-shadow:0 26px 56px -34px rgba(8,42,78,.4)}
body.bw:not(.home) main > section.px-focus .px-shot{box-shadow:0 26px 52px -30px rgba(8,42,78,.42)}

/* ---- HOW band is now DARK ---- */
body.bw:not(.home) main > section.px-how h3{color:#fff !important}
body.bw:not(.home) main > section.px-how p{color:#c3cad6 !important}
body.bw:not(.home) main > section.px-how .px-tag{background:rgba(56,182,255,.16);color:#8fd2ff}

/* ---- FAQ band is now DARK ---- */
body.bw:not(.home) main > section.px-faq details{border-top-color:rgba(255,255,255,.16)}
body.bw:not(.home) main > section.px-faq details:last-of-type{border-bottom-color:rgba(255,255,255,.16)}
body.bw:not(.home) main > section.px-faq summary{color:#f7f8fb !important}
body.bw:not(.home) main > section.px-faq summary::after{border-color:#38b6ff}
body.bw:not(.home) main > section.px-faq details p{color:#c3cad6 !important}

/* ---- 5. Explore other treatments ---- */
.px-other .px-head{text-align:center;margin-bottom:38px}
.px-tcards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.px-tcard{position:relative;display:block;border-radius:18px;overflow:hidden;background:#0b1220;
  box-shadow:0 18px 40px -26px rgba(8,42,78,.5);
  transform:translateY(0);
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s}
.px-tcard-img{display:block;aspect-ratio:3/4;overflow:hidden}
.px-tcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.px-tcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,14,26,.88) 0%,rgba(6,14,26,.32) 42%,rgba(6,14,26,0) 68%)}
.px-tcard-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px;display:block}
.px-tcard-body b{display:block;font-family:var(--display),"Montserrat",Arial,sans-serif;font-weight:800;
  font-size:16px;letter-spacing:-.015em;text-transform:uppercase;color:#fff}
.px-tcard-body em{display:block;font-style:normal;font-size:11.5px;line-height:1.4;color:#c3cad6;margin-top:5px}
.px-tcard-go{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-6px) scale(.85);
  transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1),background .3s}
.px-tcard-go svg{width:16px;height:16px}
.px-tcard:hover{transform:translateY(-8px);box-shadow:0 34px 60px -26px rgba(8,42,78,.6)}
.px-tcard:hover .px-tcard-img img{transform:scale(1.07)}
.px-tcard:hover .px-tcard-go{opacity:1;transform:none;background:#0098ff}
.px-tcard:focus-visible{outline:3px solid #0098ff;outline-offset:3px}

/* ---- make the product cards feel clickable too ---- */
body.bw:not(.home) main > section#treatments .product{
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s}
body.bw:not(.home) main > section#treatments .product:hover{
  transform:translateY(-6px);border-color:rgba(0,152,255,.6) !important;
  box-shadow:0 30px 54px -28px rgba(0,0,0,.75)}

@media(max-width:1100px){ .px-tcards{grid-template-columns:repeat(3,1fr)} }
@media(max-width:680px){
  .px-tcards{grid-template-columns:repeat(2,1fr);gap:10px}
  .px-tcard-body{padding:13px 12px}
  .px-tcard-body b{font-size:14px}
  .px-tcard-go{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .px-tcard,.px-tcard-img img,.px-tcard-go{transition:none !important}
  .px-tcard:hover{transform:none}
  .px-tcard:hover .px-tcard-img img{transform:none}
}

/* ================= R26 — explore cards take the client's own photos =========
   The six supplied images are 16:9 studio shots with the subject in a different
   place in each frame. 3:2 is the tightest card ratio that still contains every
   subject (haircard's raised arm spans 78% of its frame), and each crop is
   centred on the measured subject rather than on the frame — so nothing is cut
   and every person sits mid-card. Layout goes 3-up then a centred pair. ====== */

.px-tcards{grid-template-columns:repeat(6,1fr);gap:16px}
.px-tcard{grid-column:span 2}
.px-tcard:nth-child(4){grid-column:2 / span 2}   /* centre the trailing pair */
.px-tcard-img{aspect-ratio:3/2}

/* landscape cards give the label more room */
.px-tcard-body{padding:20px 20px}
.px-tcard-body b{font-size:18px}
.px-tcard-body em{font-size:12.5px;margin-top:6px}
.px-tcard::after{background:linear-gradient(0deg,rgba(6,14,26,.9) 0%,rgba(6,14,26,.34) 46%,rgba(6,14,26,0) 74%)}

@media(max-width:1100px){
  .px-tcards{grid-template-columns:repeat(4,1fr)}
  .px-tcard:nth-child(4){grid-column:span 2}
  .px-tcard:nth-child(5){grid-column:2 / span 2}
}
@media(max-width:680px){
  .px-tcards{grid-template-columns:1fr;gap:12px}
  .px-tcard,
  .px-tcard:nth-child(4),
  .px-tcard:nth-child(5){grid-column:1 / -1}
  .px-tcard-body{padding:15px 15px}
  .px-tcard-body b{font-size:16px}
}

/* ================= R27 — de-patterned marquee =================
   Client: the swirl ribbons hurt legibility. Keep the marquee a flat colour,
   no pattern. (Footer treatment moved to R29 — momentum photo.) ============= */
body.home .marquee{
  background-image:none !important;
  background-color:#0c0e12 !important;
}

/* ============= R29 — footer background = momentum photo (all pages) =========
   Client wants the momentum lifestyle image behind the footer instead of the
   R27 blue gradient. Layer a dark scrim on top of the photo so the white footer
   text/links stay legible. Footer markup is identical on all 7 pages, so this
   single rule covers every page. ========================================== */
footer{
  position:relative;
  background-image:
    linear-gradient(180deg, rgba(4,10,18,.72) 0%, rgba(4,10,18,.9) 100%),
    url('../images/momentum.jpg') !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center center, center 28% !important;
  background-size:cover, cover !important;
  background-color:#04121f !important;
}

/* ============= R28 — swirl only at the borders, clean centre =============
   Client likes the swirl but it hurt legibility behind body text. Keep it, but
   composite a solid base-colour ellipse (closest-side: clean out to 68% of the
   band, fading to transparent by the edges) ON TOP of the pattern layer. Result:
   the middle is flat #08090b so text reads cleanly; the swirl only shows in the
   outer frame/corners. Same selectors as the R25 pattern rule (minus the
   marquee/footer, handled in R27) so it wins by source order. All these bands
   share the #08090b base. ================================================== */
.px-dark,
body.bw:not(.home) main > section#treatments,
body.home main > section:not(.quiz):not(.howto):not(.pricing):not(.faq-section):not(.hero):not(.marquee):not(.final){
  background-image:
    radial-gradient(closest-side at 50% 50%, #08090b 0%, #08090b 68%, rgba(8,9,11,0) 100%),
    url(../images/pattern-swirl.svg) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center center, center center !important;
  background-size:cover, cover !important;
  background-color:#08090b !important;
}

/* ============= R30 — Featured programs: ONE-ROW slider ===================
   Client: don't wrap products to a 2nd row — put every product of the active
   category in a single horizontal row you can slide/drag to reveal the rest.
   The 4-col wrapping grid becomes a nowrap flex scroller; cards keep a fixed
   width and overflow horizontally. Touch = native swipe; mouse = drag-to-scroll
   + arrow buttons (both wired in index.html's inline script). =============== */
#programs .wrap{position:relative}
.program-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  grid-template-columns:none !important;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  padding:2px 2px 10px;
  scroll-padding-left:2px;
}
.program-grid::-webkit-scrollbar{height:0;width:0}
.program-grid.dragging{cursor:grabbing;scroll-snap-type:none}
.program-grid.dragging .product{pointer-events:none}
.program-grid .product[data-cat]{display:none}
.program-grid .product.is-shown{
  display:flex !important;
  flex:0 0 auto !important;
  width:290px !important;
  scroll-snap-align:start;
}
/* prev / next arrows (created in JS); hidden on touch-first small screens */
.prog-nav{position:absolute;top:6px;right:0;display:flex;gap:8px;z-index:3}
.prog-arrow{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  background:#fff;color:#0b2340;border:1px solid rgba(10,40,74,.16);
  font-size:18px;line-height:1;transition:background .18s,color .18s,border-color .18s,opacity .18s;
}
.prog-arrow:hover{background:#0098ff;color:#fff;border-color:#0098ff}
.prog-arrow:disabled{opacity:.32;cursor:default;background:#fff;color:#0b2340;border-color:rgba(10,40,74,.16)}
@media(max-width:680px){
  .program-grid{grid-template-columns:none !important}
  .program-grid .product.is-shown{width:76vw !important}
  .prog-nav{display:none !important}
}

/* ================= R31 — treatment pages: clean LIGHT theme (no dark bands, no swirl) =================
   Client dropped the dark bands + swirl on the 6 treatment pages. Flip px-how,
   px-faq and the product grid to light (white / very light blue) with dark text,
   and remove the pattern. Product CARDS stay dark so they pop. Scoped to
   body.bw:not(.home) so the homepage is untouched. Wins over R20/R25/R26/R28. ==== */
/* remove the swirl pattern everywhere on treatment pages */
body.bw:not(.home) .px-dark::before{content:none !important}
body.bw:not(.home) .px-dark,
body.bw:not(.home) main > section.px-dark,
body.bw:not(.home) main > section#treatments{background-image:none !important}
/* flip the dark bands to light */
body.bw:not(.home) main > section.px-how{background:#eef4fb !important;background-color:#eef4fb !important;color:#0b2340 !important}
body.bw:not(.home) main > section.px-faq{background:#fff !important;background-color:#fff !important;color:#0b2340 !important}
body.bw:not(.home) main > section#treatments{background:#f6f9fd !important;background-color:#f6f9fd !important}
/* headings + body text on the (now light) bands */
body.bw:not(.home) .px-dark h2,
body.bw:not(.home) .px-dark h3,
body.bw:not(.home) .px-dark h4,
body.bw:not(.home) main > section.px-dark h2,
body.bw:not(.home) main > section.px-dark h3,
body.bw:not(.home) main > section.px-how h3{color:#0b2340 !important}
body.bw:not(.home) .px-dark p,
body.bw:not(.home) .px-dark li,
body.bw:not(.home) main > section.px-dark p,
body.bw:not(.home) main > section.px-dark li,
body.bw:not(.home) main > section.px-how p{color:#49535f !important}
body.bw:not(.home) .px-dark .px-eye,
body.bw:not(.home) main > section.px-dark .px-eye{color:#0078ca !important}
body.bw:not(.home) .px-dark .px-h span,
body.bw:not(.home) main > section.px-dark .px-h span{color:#0098ff !important}
body.bw:not(.home) .px-dark .px-fine,
body.bw:not(.home) main > section.px-dark .px-fine{color:#66768a !important}
/* how-step tags */
body.bw:not(.home) main > section.px-how .px-tag{background:rgba(0,152,255,.12) !important;color:#0056b3 !important}
/* faq -> light dividers + dark summary */
body.bw:not(.home) main > section.px-faq details{border-top-color:rgba(10,40,74,.14) !important}
body.bw:not(.home) main > section.px-faq details:last-of-type{border-bottom-color:rgba(10,40,74,.14) !important}
body.bw:not(.home) main > section.px-faq summary{color:#0b2340 !important}
body.bw:not(.home) main > section.px-faq summary::after{border-color:#0098ff !important}
body.bw:not(.home) main > section.px-faq details p{color:#49535f !important}
/* product grid: light section, dark cards kept; fix section-level text only */
body.bw:not(.home) main > section#treatments .section-head h2,
body.bw:not(.home) main > section#treatments .section-title{color:#0b2340 !important}
body.bw:not(.home) main > section#treatments .section-head .muted,
body.bw:not(.home) main > section#treatments .fine{color:#66768a !important}
body.bw:not(.home) main > section#treatments .section-head .eyebrow{color:#0078ca !important}

/* ================= R33 — HOMEPAGE: drop the dark bands + swirl (match the light treatment pages) =================
   The three homepage dark bands (#programs, .split, .care-band) all match the
   R25/R28 `body.home main > section:not(...)` selector. Re-use that exact
   selector (later in the file = wins the tie) to flip them to light + kill the
   swirl, then dark-ify the section text (NOT the dark product cards) and swap
   the white --line hairlines for dark ones. Gives a clean W / light-blue rhythm. */
body.home main > section:not(.quiz):not(.howto):not(.pricing):not(.faq-section):not(.hero):not(.marquee):not(.final){
  background:#eef4fb !important;
  background-color:#eef4fb !important;
  background-image:none !important;
}
/* section headings + body -> dark (scoped to the copy blocks, never the product cards) */
body.home .program-head h2,
body.home .split-copy h2,
body.home .clinician-grid h2{color:#0b2340 !important}
body.home .program-head h2 span,
body.home .split-copy h2 span,
body.home .clinician-grid h2 span{color:#0098ff !important}
body.home .program-head > p,
body.home .split-copy > p:not(.eyebrow),
body.home .clinician-grid .section-copy,
body.home .clinician-grid > .reveal > p{color:#49535f !important}
body.home .program-head .eyebrow,
body.home .split-copy .eyebrow,
body.home .clinician-grid .eyebrow{color:#0078ca !important}
/* split number-grid */
body.home .split-copy .number-grid b{color:#0098ff !important}
body.home .split-copy .number-grid span{color:#49535f !important}
/* care cred cards */
body.home .care-band .cred b{color:#0b2340 !important}
body.home .care-band .cred p{color:#49535f !important}
/* white --line hairlines -> soft dark hairlines on the now-light bands */
body.home .split-copy,
body.home .split-copy .number-grid,
body.home .split-copy .number-grid div,
body.home .care-band .cred{border-color:rgba(10,40,74,.14) !important}
/* featured filter tabs (outline) readable on light */
body.home .prog-tab.btn-outline{color:#0b2340 !important;border-color:rgba(10,40,74,.22) !important}

/* ================= R35 — treatment-page header = homepage dark-glass nav =================
   Client: treatment nav had a white bg; match the homepage floating dark-glass
   header (white logo + links). Overrides the R23 white-nav block (same selector,
   later in file = wins). Logo swapped to CuroLogoWhiteAnimated.svg in the 6 HTML. */
body.bw:not(.home) .nav{background:rgba(14,18,26,.42) !important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.14) !important}
body.bw:not(.home) .nav.nav-stuck{background:rgba(10,13,19,.6) !important}
body.bw:not(.home) .nav-links a{color:#f7f8fb !important;opacity:.85}
body.bw:not(.home) .nav-links a:hover,
body.bw:not(.home) .nav-links a.active{color:#38b6ff !important;opacity:1}
body.bw:not(.home) .nav-actions .fr{color:#fff !important}
body.bw:not(.home) .nav .btn-white{background:#fff !important;border-color:#fff !important;color:#08090b !important}
body.bw:not(.home) .nav .btn-white:hover{background:#eaf3ff !important;border-color:#eaf3ff !important;color:#08090b !important}
body.bw:not(.home) .menu-btn,
body.bw:not(.home) .nav .menu{color:#fff !important}

/* ================= R36 — remove the blue topbar strip site-wide =================
   Client: drop the "Free to start · Licensed Canadian clinicians · …" top bar on
   every page. Hide it and pull the nav flush to the top (it was offset 27px to
   sit below the topbar). Applies wherever effects.css loads (all 7 + quad). ==== */
.topbar{display:none !important}
.nav{top:0 !important}

/* ================= R37 — treatment PRODUCTS: white one-row slider + hover-reveal =================
   Client: product grid -> one-row slideable (like homepage), cards white with a
   hover that reveals the description + cool motion, on the light theme.
   Scoped body.bw:not(.home) #treatments. Arrows/drag wired in assets/js/px-slider.js. */
body.bw:not(.home) main > section#treatments .products{
  display:flex !important;flex-wrap:nowrap !important;grid-template-columns:none !important;
  gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;padding:4px 2px 14px}
body.bw:not(.home) main > section#treatments .products::-webkit-scrollbar{height:0}
body.bw:not(.home) main > section#treatments .products.dragging{cursor:grabbing;scroll-snap-type:none}
body.bw:not(.home) main > section#treatments .products .product{
  flex:0 0 auto !important;width:288px;scroll-snap-align:start;min-height:404px;
  background:#fff !important;border:1px solid #e4e9f0 !important;border-radius:18px;overflow:hidden;
  box-shadow:0 20px 44px -32px rgba(11,40,74,.4);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
body.bw:not(.home) main > section#treatments .products .product:hover{
  transform:translateY(-8px) !important;border-color:rgba(0,152,255,.6) !important;box-shadow:0 36px 64px -30px rgba(8,42,78,.42) !important}
/* image area -> light tint + zoom on hover */
body.bw:not(.home) main > section#treatments .products .product .product-art{
  background:linear-gradient(160deg,#f2f7fe,#e9f0f9) !important;min-height:206px}
body.bw:not(.home) main > section#treatments .products .product .product-art img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
body.bw:not(.home) main > section#treatments .products .product:hover .product-art img{transform:scale(1.07)}
body.bw:not(.home) main > section#treatments .products .product .product-art.art-pending span{border-color:rgba(10,40,74,.22) !important;color:#8b95a4 !important;background:transparent}
/* copy -> dark text, description hidden until hover */
body.bw:not(.home) main > section#treatments .products .product-copy{min-height:0 !important;padding:16px 16px 6px}
body.bw:not(.home) main > section#treatments .products .product .product-kicker{color:#0078ca !important}
body.bw:not(.home) main > section#treatments .products .product h3{color:#0b2340 !important}
body.bw:not(.home) main > section#treatments .products .product p{
  color:#66768a !important;max-height:0;opacity:0;overflow:hidden;margin:0;
  transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,margin .3s ease}
body.bw:not(.home) main > section#treatments .products .product:hover p{max-height:100px;opacity:1;margin-top:8px}
/* foot -> light divider */
body.bw:not(.home) main > section#treatments .products .product .product-foot{
  border-top:1px solid #eef1f5 !important;color:#0b2340 !important}
body.bw:not(.home) main > section#treatments .products .product .product-foot span:last-child{color:#0098ff !important;transition:transform .3s}
body.bw:not(.home) main > section#treatments .products .product:hover .product-foot span:last-child{transform:translateX(4px)}
/* slider arrows (created in px-slider.js) */
body.bw:not(.home) main > section#treatments .wrap{position:relative}
.px-prod-nav{position:absolute;top:4px;right:0;display:flex;gap:8px;z-index:4}
.px-prod-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:#fff;color:#0056b3;border:1px solid #e4e9f0;font-size:18px;box-shadow:0 12px 26px -16px rgba(11,30,60,.5);transition:background .18s,color .18s,border-color .18s,opacity .18s}
.px-prod-arrow:hover{background:#0098ff;color:#fff;border-color:#0098ff}
.px-prod-arrow:disabled{opacity:.32;cursor:default;background:#fff;color:#0056b3;border-color:#e4e9f0}
@media(max-width:680px){
  body.bw:not(.home) main > section#treatments .products .product{width:80vw}
  .px-prod-nav{display:none}
}

/* ================= R38 — homepage "How Curo Works" cards -> LIGHT =================
   Client: the howto card background was dark; lighten it to match the theme. */
body.home .hcard__imgwrap{background:linear-gradient(160deg,#eef4fb,#f6f9fd) !important;border:1px solid rgba(10,40,74,.10) !important;box-shadow:0 22px 46px -30px rgba(11,40,74,.3) !important}

/* ================= R39 — homepage "Care from your couch" -> image bento =================
   Client: too plain; add an image + make it creative. 2-col: bright lifestyle
   photo (care-home.webp) + 4 icon points as white cards on the light-blue band. */
.care2{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.care2-media{border-radius:22px;overflow:hidden;aspect-ratio:11/9;box-shadow:0 34px 72px -34px rgba(11,40,74,.5)}
.care2-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.care2:hover .care2-media img{transform:scale(1.04)}
.care2-body .eyebrow{color:#0078ca !important}
.care2-body h2{font-size:clamp(30px,3.6vw,54px) !important;line-height:1.04 !important;letter-spacing:-.03em !important;font-weight:800 !important;color:#0b2340 !important;margin:0 !important}
.care2-body h2 span{color:#0098ff !important}
.care2-body .section-copy{font-size:15px !important;line-height:1.6 !important;color:#49535f !important;margin:16px 0 0 !important;max-width:520px}
.care2-points{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.care2-pt{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid #e4e9f0;border-radius:14px;padding:16px 15px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.care2-pt:hover{transform:translateY(-4px);border-color:rgba(0,152,255,.5);box-shadow:0 22px 44px -28px rgba(11,40,74,.42)}
.care2-ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,#e9f2fc,#dfeaf7);color:#0056b3}
.care2-ico svg{width:20px;height:20px}
.care2-pt b{display:block;font-size:14px;color:#0b2340 !important;margin-bottom:3px;letter-spacing:-.01em;font-weight:800}
.care2-pt p{font-size:12px;line-height:1.5;color:#66768a !important;margin:0}
@media(max-width:900px){.care2{grid-template-columns:1fr;gap:26px}.care2-points{margin-top:0}}
@media(max-width:560px){.care2-points{grid-template-columns:1fr}}

/* ================= R40 — homepage product cards -> WHITE + hover-reveal (match treatment R37) ==== */
body.home .program-grid .product{background:#fff !important;border:1px solid #e4e9f0 !important;border-radius:18px;overflow:hidden;box-shadow:0 20px 44px -32px rgba(11,40,74,.4);min-height:404px;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
body.home .program-grid .product:hover{transform:translateY(-8px) !important;border-color:rgba(0,152,255,.6) !important;box-shadow:0 36px 64px -30px rgba(8,42,78,.42) !important}
body.home .program-grid .product .product-art{background:linear-gradient(160deg,#f2f7fe,#e9f0f9) !important}
body.home .program-grid .product .product-art img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
body.home .program-grid .product:hover .product-art img{transform:scale(1.07)}
body.home .program-grid .product .product-art.art-pending span{border-color:rgba(10,40,74,.22) !important;color:#8b95a4 !important;background:transparent}
body.home .program-grid .product-copy{min-height:0 !important;padding:16px 16px 6px}
body.home .program-grid .product .product-kicker{color:#0078ca !important}
body.home .program-grid .product h3{color:#0b2340 !important}
body.home .program-grid .product p{color:#66768a !important;max-height:0;opacity:0;overflow:hidden;margin:0;transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,margin .3s ease}
body.home .program-grid .product:hover p{max-height:100px;opacity:1;margin-top:8px}
body.home .program-grid .product .product-foot{border-top:1px solid #eef1f5 !important;color:#0b2340 !important}
body.home .program-grid .product .product-foot span:last-child{color:#0098ff !important;transition:transform .3s}
body.home .program-grid .product:hover .product-foot span:last-child{transform:translateX(4px)}

/* ================= R41 — product sliders: DOT indicators, hide old arrows, kill native drag ==== */
.prog-nav,.px-prod-nav{display:none !important}
.program-grid,#treatments .products{-webkit-user-select:none;user-select:none}
.program-grid img,.program-grid a,#treatments .products img,#treatments .products a{-webkit-user-drag:none;user-drag:none}
.px-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.px-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#c3ccda;cursor:pointer;padding:0;transition:background .2s,width .2s}
.px-dots button.on{background:#0098ff;width:26px;border-radius:4px}

/* ================= R42 — header hover mega-menu -> LIGHT ==== */
.nav-mega-in{background:#fff !important;border:1px solid #e4e9f0 !important;box-shadow:0 40px 90px -30px rgba(11,30,60,.35) !important}
.nav-mega-head{border-bottom:1px solid rgba(10,40,74,.12) !important}
.nav-mega-head span{color:#66768a !important}
.nav-mega-head a{color:#0098ff !important}
.nav-mega-item{background:#f6f9fd !important;border:1px solid #e4e9f0 !important}
.nav-mega-item:hover{border-color:rgba(0,152,255,.6) !important}
.mi-thumb{background:radial-gradient(circle at 50% 38%,#eef4fb,#f6f9fd 72%) !important}
.mi-thumb img{filter:drop-shadow(0 10px 14px rgba(11,40,74,.18)) !important}
.mi-thumb.mi-none::after{color:#8b95a4 !important;border-color:rgba(10,40,74,.25) !important}
.nav-mega-item b{color:#0b2340 !important}
.nav-mega-item small{color:#66768a !important}