/* hormones.ng — calm, warm, airy. Ivory + sand cards, deep sage-green actions, tan highlight words.
   Built from patterns Nelle chose (Hims, Hers, MEDVi, Mochi, Fridays) in our own words and colours. */
:root{
  --bg:#FAF7F2; --sand:#F3ECE2; --sand-2:#EDE4D7; --surface:#FFFFFF; --ink:#1F2A26; --muted:#56615C; --line:#E6DED2;
  --green:#23473A; --green-2:#2F6B57; --sage:#E5EEE8; --lime:#E3EFD8; --tan:#8C5E3A;
  --pink:#A44A74; --pink-bg:#FBF0F4; --blue:#3A6489; --blue-bg:#EEF2F6; --taupe:#6E5440; --taupe-bg:#F1EBE4;
  --lilac:#6B4E9B; --lilac-bg:#F4EFF9; --coral:#A9472F; --coral-bg:#FBEEE9;
  --display:"Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:"Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:28px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17.5px/1.7 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}
@media (max-width:600px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.025em;line-height:1.06;font-weight:600;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:1.3rem;line-height:1.2;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
em.t,h1 em,h2 em,h3 em{font-style:normal;color:var(--tan)}
[id]{scroll-margin-top:110px}
:focus-visible{outline:3px solid var(--green-2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.eyebrow{display:block;font:600 .8rem/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:1.2rem;color:var(--muted);max-width:58ch}
section{padding-block:96px}
@media (max-width:700px){section{padding-block:64px}}
.sec-head{display:grid;gap:14px;margin-bottom:44px;max-width:780px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1.02rem var(--body);border-radius:999px;padding:1rem 1.8rem;border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--green);color:#fff;box-shadow:0 12px 26px -16px rgba(35,71,58,.8)}
.btn-dark:hover{background:#1A372C}
.btn-light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-white{background:#fff;color:var(--ink)}
.btn-glass{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn-block{width:100%}
.btn-soon{background:var(--c,#B9A7D6);color:#fff;cursor:default}
.btn-soon:hover{transform:none}
.reassure{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.95rem;color:var(--muted)}
.reassure span::before{content:"✓ ";color:var(--green-2);font-weight:700}

/* announcement bar */
.announce{background:var(--lime);color:var(--ink);font-size:.95rem;text-align:center;padding:9px 16px}
.announce a{display:inline-flex;align-items:center;gap:6px;margin-left:8px;background:rgba(255,255,255,.7);border-radius:999px;padding:3px 12px;font-weight:600;text-decoration:none}

/* header */
.top{position:sticky;top:0;z-index:40;padding:10px 16px 0}
.top-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 22px;box-shadow:0 10px 30px -22px rgba(31,42,38,.45)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:700 1.35rem var(--display);letter-spacing:-.03em;color:var(--ink)}
.logo i{font-style:normal;color:var(--tan)}
.logo svg{width:26px;height:26px;color:var(--green-2)}
nav.links{display:flex;gap:24px;font-size:.98rem;font-weight:500}
nav.links a{text-decoration:none;color:var(--ink);opacity:.82}
nav.links a:hover{opacity:1;color:var(--green-2)}
.top-r{display:flex;align-items:center;gap:8px}
.top .btn{padding:.8rem 1.4rem}
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1120px){nav.links{display:none}.menu-btn{display:inline-flex}}
.menu{max-width:1240px;margin:8px auto 0;background:#fff;border:1px solid var(--line);border-radius:26px;padding:14px 22px 22px;box-shadow:0 24px 44px -26px rgba(0,0,0,.4);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 26px;max-height:calc(100vh - 120px);overflow:auto}
.menu[hidden]{display:none}
.menu b{grid-column:1/-1;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.menu a{color:var(--ink);text-decoration:none;padding:10px 0;font-weight:500;border-bottom:1px solid var(--line)}
@media (max-width:700px){.menu{grid-template-columns:1fr}}
@media (max-width:480px){.top{padding:8px 8px 0}.top-in{padding:6px 6px 6px 14px;gap:8px}.top .btn{padding:.7rem 1rem;font-size:.9rem}.menu-btn{width:40px;height:40px}.logo{font-size:1.15rem}.logo svg{width:22px;height:22px}}
@media (max-width:340px){.logo svg{display:none}}

/* image slots: labelled placeholder until the real photo is uploaded */
.slot{position:relative;overflow:hidden;background:var(--slot-bg,var(--sand-2));color:var(--slot-ink,var(--tan))}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:1}
.slot .ph{position:absolute;inset:0;display:grid;place-items:center;opacity:.5}
.slot .ph svg{width:44px;height:44px}

/* home hero */
.hero{padding:64px 0 30px}
.hero h1{max-width:13ch}
.hero .lead{margin-top:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 16px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bcard{position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);display:block;transition:transform .18s,box-shadow .18s}
.bcard:hover{transform:translateY(-3px);box-shadow:0 22px 40px -28px rgba(31,42,38,.55)}
.bcard.big{grid-column:span 4;min-height:380px;color:#fff}
.bcard.big .slot{position:absolute;inset:0;--slot-ink:rgba(255,255,255,.9)}
.bcard.big::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
.bcard.big .t1{position:absolute;z-index:3;left:26px;top:22px;right:26px;font:600 1.6rem/1.15 var(--display);letter-spacing:-.02em}
.bcard.big .t1 em{color:#FFE2C2;font-style:normal}
.bcard.big .t2{position:absolute;z-index:3;left:26px;bottom:22px;right:60px;font-weight:600}
.bcard.big .go{position:absolute;z-index:3;right:22px;bottom:18px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:1.2rem}
.bcard.big .two{display:flex;gap:8px;flex-wrap:wrap}
.bcard.big .two a{background:#fff;color:var(--ink);text-decoration:none;border-radius:999px;padding:8px 16px;font-weight:600}
.bcard.small{grid-column:span 3;background:#fff;border:1px solid var(--line);min-height:128px;padding:22px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bcard.small .lab{font:500 1.22rem/1.25 var(--display);letter-spacing:-.01em}
.bcard.small .lab em{color:var(--c,var(--tan));font-style:normal}
.bcard.small .pic{width:76px;height:76px;border-radius:50%;flex:none;--slot-bg:var(--cb,var(--sand))}
.bcard.small .pic .ph svg{width:30px;height:30px;color:var(--c,var(--tan))}
.bcard.small .pic .ph{opacity:.85}
.bcard.small .chev{color:var(--muted);font-size:1.2rem;margin-left:4px}
.bcard.small.help{background:var(--sage)}
@media (max-width:1000px){.bcard.big{grid-column:span 6}.bcard.big:first-child{grid-column:span 12}.bcard.small{grid-column:span 6}}
@media (max-width:600px){.bento{gap:10px}.bcard.big,.bcard.big:first-child{grid-column:span 12;min-height:300px}.bcard.small{grid-column:span 12;min-height:96px;padding:16px 18px}.bcard.small .pic{width:60px;height:60px}}

/* trust strip */
.trust{border-block:1px solid var(--line);background:#fff;padding-block:20px;margin-top:56px}
.trust .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
.trust span{display:inline-flex;align-items:center;gap:10px;font:600 .8rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.trust svg{width:22px;height:22px;color:var(--green-2);flex:none}

/* how it works (step rows) */
.steps{display:grid}
.step{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding-block:44px;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
@media (max-width:900px){.step{grid-template-columns:1fr;gap:26px;padding-block:32px}}
.step .tags{display:flex;gap:8px;margin-bottom:16px}
.step .tags b{background:var(--ink);color:#fff;border-radius:999px;padding:4px 14px;font-size:.92rem;font-weight:600}
.step .tags span{background:var(--sand);border-radius:999px;padding:4px 14px;font-size:.92rem;font-weight:500}
.step h3{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600}
.step p{color:var(--muted);font-size:1.2rem;margin-top:12px;max-width:34ch}
.stage{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;background:linear-gradient(150deg,#D9C2A7,#C8AA8A);display:grid;place-items:center;padding:24px}
.stage>.slot{position:absolute;inset:0;--slot-bg:transparent}
.stage>.slot .ph{display:none}
.stage .ui{position:relative;z-index:2}
.phone{width:min(250px,62%);background:#fff;border-radius:34px;border:8px solid #1C1C1C;padding:22px 16px 18px;box-shadow:0 30px 50px -24px rgba(0,0,0,.55);transform:rotate(-4deg)}
.phone .pl{font:700 .95rem var(--display);color:var(--ink)} .phone .pl i{font-style:normal;color:var(--tan)}
.phone .bar{height:4px;border-radius:4px;background:var(--sand);margin:10px 0 14px;overflow:hidden}.phone .bar i{display:block;width:40%;height:100%;background:var(--green-2)}
.phone .qq{font:600 1.05rem/1.25 var(--display);margin-bottom:10px}
.phone .o{border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.82rem;margin-top:7px}
.phone .o.on{border-color:var(--green-2);background:var(--sage)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.chips .col{display:grid;gap:8px;align-content:start}
.chip{background:rgba(70,48,30,.55);backdrop-filter:blur(4px);color:#fff;border-radius:14px;padding:10px 14px;display:flex;justify-content:space-between;gap:10px;font-size:.88rem}
.chip b{font-weight:500;opacity:.9}.chip span{color:#FFE2B8;text-align:right}
.chip.head{background:rgba(255,255,255,.88);color:var(--ink);font-weight:600;justify-content:flex-start}
.rx{background:#fff;border-radius:20px;width:min(340px,90%);padding:22px 22px 18px;box-shadow:0 30px 50px -24px rgba(0,0,0,.5);transform:rotate(2deg)}
.rx .h{display:flex;justify-content:space-between;align-items:center;font:700 1rem var(--display)} .rx .h i{font-style:normal;color:var(--tan)}
.rx .sym{font:700 2rem var(--display);color:var(--green-2);margin:8px 0 2px}
.rx .ln{height:9px;border-radius:9px;background:var(--sand);margin-top:9px}.rx .ln.s{width:60%}
.rx .ok{margin-top:16px;background:var(--sage);color:var(--green);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.88rem;display:inline-block}
.bub{max-width:270px;border-radius:18px;padding:12px 16px;font-size:.95rem;box-shadow:0 14px 28px -18px rgba(0,0,0,.45)}
.bub small{display:block;opacity:.7;font-size:.72rem;margin-top:4px}
.bub.me{background:#fff;color:var(--ink);margin-left:auto}
.bub.dr{background:#DCF3D8;color:var(--ink);margin-top:12px}
.chat{width:min(380px,92%);display:grid}
.example{position:absolute;right:14px;bottom:10px;z-index:3;font-size:.72rem;color:rgba(255,255,255,.85)}

/* feature cards (sand) */
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){.feat{grid-template-columns:1fr}}
.fcard{background:var(--sand);border-radius:var(--r);padding:34px 34px 0;display:grid;grid-template-rows:auto 1fr;min-height:430px;overflow:hidden}
.fcard p.say{font:500 clamp(1.3rem,2.2vw,1.6rem)/1.3 var(--display);letter-spacing:-.01em;max-width:30ch}
.fcard p.say em{color:var(--tan);font-style:normal}
.fcard .art{position:relative;display:grid;place-items:end center;padding-top:22px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#F6C36A;color:#2A1E0B;border-radius:999px;padding:8px 16px;font-weight:600;font-size:.92rem;box-shadow:0 10px 20px -12px rgba(0,0,0,.4)}
.doc{width:min(320px,80%);aspect-ratio:4/4.4;border-radius:24px 24px 0 0;--slot-bg:#E7D9C6}
.doc+.badge{position:absolute;left:8%;top:44%}
.report{width:min(360px,92%);background:#fff;border-radius:22px 22px 0 0;padding:22px;box-shadow:0 -10px 40px -26px rgba(0,0,0,.4);font-size:.92rem}
.report .r{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.report .r span{color:var(--muted)}
.report .flag{background:#FFF1E6;border-radius:10px;padding:8px 10px;border:0;margin:4px -10px}
.report .flag b{color:var(--coral)}
.report .note{margin-top:10px;background:var(--sage);border-radius:12px;padding:10px 12px;color:var(--green);font-weight:500}
.mini-q{position:relative;width:min(360px,92%);height:260px}
.mini-q .c1{position:absolute;left:0;bottom:-10px;width:62%;background:#fff;border-radius:22px;padding:20px;box-shadow:0 20px 40px -24px rgba(0,0,0,.45);z-index:2;transform:rotate(-3deg)}
.mini-q .c1 b{display:block;font:600 1.15rem/1.2 var(--display);margin:6px 0 12px}
.mini-q .c1 .in{display:flex;gap:8px}.mini-q .c1 .in span{flex:1;background:var(--bg);border-radius:10px;padding:8px 10px;color:var(--muted);font-size:.85rem}.mini-q .c1 .in i{width:34px;height:34px;border-radius:50%;background:#F6C36A;display:grid;place-items:center;font-style:normal}
.mini-q .c2{position:absolute;right:0;top:0;width:58%;height:230px;border-radius:22px;background:linear-gradient(160deg,#E8B867,#B9772F);color:#fff;padding:18px;transform:rotate(3deg)}
.mini-q .c2 small{opacity:.85}.mini-q .c2 b{display:block;font:600 1.2rem var(--display);margin-top:4px}
.pharm{display:grid;gap:10px;width:min(360px,92%);padding-bottom:30px}
.pharm div{background:#fff;border-radius:16px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 10px 24px -20px rgba(0,0,0,.4)}
.pharm div span{color:var(--green-2);font-weight:600;font-size:.9rem}

/* topic sections (MEDVi-like) */
.tsec{background:linear-gradient(180deg,var(--tb,#fff) 0%,var(--bg) 100%)}
.tgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
@media (max-width:900px){.tgrid{grid-template-columns:1fr;gap:34px}}
.tbox{border-radius:36px;aspect-ratio:1.15/1;--slot-bg:color-mix(in srgb,var(--tc) 14%,#fff);--slot-ink:var(--tc)}
.tbox .ph svg{width:70px;height:70px}
.incl{margin-top:34px}
.incl h3{font-size:1.45rem;font-weight:600;margin-bottom:14px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:1.08rem}
.ticks li::before{content:"";flex:none;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--tc,var(--green-2)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/15px no-repeat}
.tright .eyebrow{margin-bottom:14px}
.tright h2 em{color:var(--tc)}
.pics2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.pics2 .slot{aspect-ratio:3/4;border-radius:30px;--slot-bg:color-mix(in srgb,var(--tc) 10%,#fff);--slot-ink:var(--tc)}
.pics2 .slot:first-child{margin-top:60px}
.tcopy{margin-top:34px;display:grid;gap:16px;max-width:52ch}
.tcopy h3{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.tcopy p{color:var(--muted);font-size:1.12rem}
.tcopy .btn{justify-self:start}
.btn-tc{background:var(--tc);color:#fff}
.tlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tlinks a{border:1px solid color-mix(in srgb,var(--tc) 35%,#fff);background:#fff;border-radius:999px;padding:8px 15px;text-decoration:none;font-weight:500;font-size:.95rem}
.tlinks a:hover{border-color:var(--tc);color:var(--tc)}

/* founder */
.founder{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:40px}
@media (max-width:760px){.founder{grid-template-columns:1fr;padding:26px}}
.headshot{width:190px;height:190px;border-radius:50%;--slot-bg:var(--sage);--slot-ink:var(--green-2)}
.founder h2{font-size:clamp(2rem,4vw,3rem);color:var(--green)}
.founder .role{font-size:1.15rem;color:var(--muted);margin-top:4px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.facts b{display:block;font:600 1.15rem var(--display);color:var(--green)}
.facts span{color:var(--muted)}
.story{max-width:72ch;display:grid;gap:18px;margin-top:40px;font-size:1.12rem}
.story h2{font-size:1.9rem;color:var(--green)}
.story p{color:#37413D}
.todo{background:#FFE9A8;border-radius:4px;padding:0 4px;color:#3A2E00}
.draft-note{background:#FFF6DA;border:1px solid #EAD08A;border-radius:14px;padding:12px 16px;font-size:.95rem;margin-bottom:22px}

/* reviews carousel */
.revs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.review{scroll-snap-align:start;background:var(--sage);border-radius:var(--r);padding:30px;display:grid;gap:14px;margin:0;align-content:start}
.review .top2{display:flex;justify-content:space-between;align-items:center}
.review .stars{color:var(--green-2);letter-spacing:2px}
.review blockquote{margin:0;font-size:1.08rem;line-height:1.6}
.review .more{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.review .more li{padding-left:12px;border-left:3px solid var(--green-2)}
.review figcaption{font-size:.92rem;color:var(--muted)}

/* goals chips on photo (topic pages) */
.goals{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;color:#fff;display:grid;align-content:space-between;padding:34px}
.goals>.slot{position:absolute;inset:0;--slot-bg:var(--tc);--slot-ink:rgba(255,255,255,.6)}
.goals::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.08))}
.goals h3{position:relative;z-index:2;font-size:clamp(1.7rem,3vw,2.3rem);max-width:12ch}
.goals .gl{position:relative;z-index:2;display:grid;gap:10px;justify-items:end}
.goals .gl a{background:rgba(255,255,255,.2);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.45);color:#fff;text-decoration:none;border-radius:999px;padding:12px 22px;font-weight:600}
.goals .gl a:hover{background:rgba(255,255,255,.34)}

/* treatment options (cards) */
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1050px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.opts{grid-template-columns:1fr}}
.optc{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--tc) 9%,#fff));border:1px solid var(--line);border-radius:26px;padding:26px 24px 22px;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px}
.optc .ic{width:54px;height:54px;border-radius:16px;background:color-mix(in srgb,var(--tc) 14%,#fff);color:var(--tc);display:grid;place-items:center;margin-bottom:8px}
.optc .ic svg{width:28px;height:28px}
.optc h3{font-size:1.25rem}
.optc p{color:var(--muted);font-size:.98rem}
.optc .btn{margin-top:14px;padding:.85rem 1rem}
.disclaim{color:var(--muted);font-size:.9rem;text-align:center;margin-top:24px}

/* topic hero */
.thero{padding:18px 0 0}
.thero .card{position:relative;border-radius:36px;overflow:hidden;min-height:min(78vh,640px);display:grid;align-content:end;color:#fff;padding:40px}
.thero .card>.slot{position:absolute;inset:0;--slot-bg:var(--tc);--slot-ink:rgba(255,255,255,.55)}
.thero .card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.6) 100%)}
.thero .inner{position:relative;z-index:2;max-width:760px}
.thero .crumbs{color:rgba(255,255,255,.85);font-size:.92rem;margin-bottom:12px}
.thero .crumbs a{color:inherit}
.thero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);color:#fff}
.thero h1 em{color:#FFE2C2}
.thero p.sub{font-size:1.2rem;margin-top:16px;color:rgba(255,255,255,.92);max-width:52ch}
.thero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.thero .reassure{color:rgba(255,255,255,.9);margin-top:16px}.thero .reassure span::before{color:#CFE8D6}
@media (max-width:600px){.thero .card{padding:24px;min-height:560px;border-radius:28px}}

/* feel list */
.feel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.feel{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.feel{grid-template-columns:1fr}}
.feel div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;font:500 1.12rem/1.4 var(--display)}
.feel div::before{content:"“";display:block;color:var(--tc,var(--tan));font:700 2.2rem/1 var(--display);height:22px}

/* weight calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc .panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px}
.calc .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.calc .big{font:600 clamp(2.4rem,5vw,3.4rem) var(--display);color:var(--green)}
.calc input[type=range]{width:100%;margin:30px 0;accent-color:var(--green-2);height:28px}
.calc small{color:var(--muted);display:block;margin-top:14px;font-size:.88rem}

/* coming soon */
.soon{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.soon{grid-template-columns:1fr}}
.soonc{border-radius:var(--r);padding:34px;background:var(--sb);display:grid;gap:14px;align-content:start}
.soonc h3{font-size:1.6rem}
.soonc h3 em{color:var(--c)}
.soonc p{color:var(--muted)}
.soonc .btn{justify-self:start}

/* services (labs page) */
.svc-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:860px){.svc-wrap{grid-template-columns:1fr;gap:28px}}
.svc-wrap>div:first-child{display:grid;gap:16px}
.svc-wrap .btn{justify-self:start}
.svc-prices{display:grid;gap:14px}
.svc-p{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:22px 24px;display:grid;gap:2px}
.svc-p.rec{border-color:var(--green-2)}
.svc-p b{font-weight:600;font-size:1.1rem}
.svc-p span{font:700 1.7rem var(--display);color:var(--green)}
.svc-p small{color:var(--muted);font-size:.95rem}
.panels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:980px){.panels{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.panels{grid-template-columns:1fr}}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;display:grid;gap:10px;align-content:start}
.panel-card ul{margin:0;padding-left:1.1rem;color:var(--muted)}
.panel-card a{color:var(--green-2);font-weight:600}

/* faq */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:24px}}
.faq{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 4px}
summary{cursor:pointer;font:600 1.12rem var(--display);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--green-2);font-size:1.5rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted)}
details a{color:var(--green-2)}

/* final CTA */
.final{background:var(--green);color:#fff;text-align:center;border-radius:40px;margin:0 16px;padding:80px 24px}
.final h2{color:#fff}.final h2 em{color:#F6C36A}
.final p{color:rgba(255,255,255,.85);max-width:560px;margin:16px auto 28px}
.final .reassure{justify-content:center;color:rgba(255,255,255,.85);margin-top:18px}.final .reassure span::before{color:#CFE8D6}

/* other links */
.other-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.other-links a{border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;font-weight:500;background:#fff}
.other-links a:hover{border-color:var(--green-2);color:var(--green-2)}

/* footer */
footer{padding:70px 0 110px;font-size:.95rem;color:var(--muted)}
footer .wrap{display:grid;gap:22px}
.emergency{background:#FFF3DF;color:var(--ink);border-radius:18px;padding:16px 20px}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols div{display:grid;gap:8px;align-content:start}
.foot-cols b{color:var(--ink);font-family:var(--display)}
.foot-cols a{color:var(--ink);opacity:.8;text-decoration:none;padding:3px 0}
.foot-cols a:hover{opacity:1;color:var(--green-2)}
.socials{display:flex;gap:16px}.socials a{font-weight:600;color:var(--ink)}
.socials:empty{display:none}
.stats{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.stats:empty{display:none}
.stats div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 24px;font-size:1.05rem}
.stats b{font:700 1.6rem var(--display);margin-right:6px}

/* floating: questions + back to top + sticky quiz bar */
.float{position:fixed;right:18px;bottom:18px;z-index:50;display:grid;gap:10px;justify-items:end}
.to-top{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line);display:grid;place-items:center;text-decoration:none;font-size:1.25rem;font-weight:700;box-shadow:0 10px 24px -12px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.ask{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;border:0;border-radius:999px;padding:14px 20px;font:600 1rem var(--body);cursor:pointer;box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.ask svg{width:20px;height:20px}
.askp{position:fixed;right:18px;bottom:84px;z-index:51;width:min(360px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 30px 60px -28px rgba(0,0,0,.5);display:grid;gap:12px}
.askp[hidden]{display:none}
.askp h3{font-size:1.2rem}
.askp details{padding:12px 2px}.askp summary{font-size:1rem}
.askp .x{position:absolute;right:14px;top:12px;border:0;background:none;font-size:1.4rem;cursor:pointer;color:var(--muted)}
.sticky-cta{position:fixed;left:12px;right:84px;bottom:18px;z-index:49;display:none}
.sticky-cta .btn{width:100%}
@media (max-width:700px){.sticky-cta.show{display:block}.ask span{display:none}.ask{padding:14px}}

/* misc */
.crumbs{font-size:.92rem;color:var(--muted);margin:0 0 18px}
.crumbs a{color:inherit}
.center{text-align:center}
.mt{margin-top:28px}
.price-line{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 22px}
.tbox{display:block}.tbox .ph{opacity:.55}
.goals>.slot{background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 55%,#2A1E14))}
.goals>.slot .ph{justify-content:start;padding-left:8%;opacity:.18}.goals>.slot .ph svg{width:260px;height:260px;color:#fff}
.thero .card,.goals{background:var(--tc)}
.bcard.big{background:#5A4A40}
.float{pointer-events:none}.float .ask{pointer-events:auto}
.badge svg{width:20px;height:20px;flex:none}.optc .btn{white-space:normal}

/* ---- airy home + hub pages ---- */
.soft{background:var(--sand)}
.page-head{padding:56px 0 24px}
.page-head h1{font-size:clamp(2.4rem,5.4vw,4.2rem);max-width:16ch;margin-top:10px}
.page-head .lead{margin-top:18px}
.simple3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:820px){.simple3{grid-template-columns:1fr}}
.simple3 a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;text-decoration:none;color:var(--ink);display:grid;gap:10px;transition:transform .15s,border-color .15s}
.simple3 a:hover{transform:translateY(-3px);border-color:var(--green-2)}
.simple3 b{width:44px;height:44px;border-radius:50%;background:var(--sage);color:var(--green);display:grid;place-items:center;font:700 1.2rem var(--display)}
.simple3 h3{font-size:1.35rem}
.simple3 p{color:var(--muted)}
.more-link{font-weight:600;color:var(--green-2);text-decoration:none;font-size:1.08rem;border-bottom:2px solid currentColor;padding-bottom:2px}
.doc-teaser{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;max-width:1000px}
.doc-teaser h2{margin:10px 0 16px}
.doc-teaser .lead{margin-bottom:22px}
@media (max-width:700px){.doc-teaser{grid-template-columns:1fr;gap:24px}.doc-teaser .headshot{width:150px;height:150px}}
.care-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.care-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.care-grid{gap:10px}}
.care-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--ink);display:grid;grid-template-rows:auto 1fr;transition:transform .15s,border-color .15s}
.care-card:hover{transform:translateY(-3px);border-color:var(--acc)}
.care-card .slot{aspect-ratio:4/3}
.care-card .txt{padding:16px 18px 18px;display:grid;gap:4px;align-content:start}
.care-card b{font:600 1.1rem/1.25 var(--display)}
.care-card span{color:var(--muted);font-size:.94rem}
.care-card em{font-style:normal;color:var(--acc);font-weight:600;font-size:.95rem;margin-top:6px}
@media (max-width:480px){.care-card .txt{padding:12px}.care-card b{font-size:.98rem}.care-card span{font-size:.85rem}}
.bcard.small{grid-column:span 4}
@media (max-width:1000px){.bcard.small{grid-column:span 6}}
@media (max-width:600px){.bcard.small{grid-column:span 12}}
.ptitle{font-size:1.35rem;margin:26px 0 12px}
.ptable{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:22px}
.ptable table{border-collapse:collapse;width:100%;min-width:640px;font-size:.98rem}
.ptable th{text-align:left;font:600 .78rem var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 18px;border-bottom:1px solid var(--line)}
.ptable td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable tr:last-child td{border-bottom:0}
.ptable .pr{font:700 1.05rem var(--display);color:var(--green);white-space:nowrap}

/* website assistant (chat) */
.chatp{padding:0;gap:0;width:min(400px,calc(100vw - 24px));right:12px;max-height:min(640px,calc(100dvh - 110px));grid-template-rows:auto 1fr auto auto;overflow:hidden}
.ch-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 12px 18px;border-bottom:1px solid var(--line);background:var(--sage)}
.ch-head b{display:block;font:700 1.02rem var(--display);color:var(--green)}
.ch-head small{display:block;font-size:.8rem;color:var(--muted);line-height:1.3}
.chatp .x{position:static;width:36px;height:36px;border-radius:50%;flex:none}
.chatp .x:hover{background:#fff}
.ch-body{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:180px;overscroll-behavior:contain}
.ch-intro p{margin:0 0 10px;font-size:.98rem}
.ch-intro ul{margin:0 0 14px;padding-left:18px;font-size:.92rem;color:var(--muted);display:grid;gap:6px}
.ch-intro b{color:var(--ink)}
.ch-start{width:100%}
.ch-small{font-size:.85rem;color:var(--muted);margin:8px 0 0}
.ch-msg{max-width:88%;padding:10px 14px;border-radius:18px;font-size:.97rem;line-height:1.5}
.ch-msg p{margin:0}.ch-msg p+p{margin-top:8px}
.ch-msg.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:6px}
.ch-msg.bot{align-self:flex-start;background:var(--sand);color:var(--ink);border-bottom-left-radius:6px}
.ch-msg.soon{border:1.5px solid #C98A2B;background:#FBF1E1}
.ch-msg.safety{align-self:stretch;max-width:none;background:#FDECEA;border:1.5px solid #C0392B;color:#5B1A12}
.ch-cta{display:inline-block;margin-top:10px;background:#fff;color:var(--green);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;font-size:.9rem;text-decoration:none}
.ch-cta:hover{border-color:var(--green-2)}
.ch-phone{margin-top:12px;display:grid;gap:6px}
.ch-phone label{font-size:.85rem;font-weight:600}
.ch-row{display:flex;gap:8px}
.ch-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:1rem;background:#fff}
.ch-row .btn{padding:10px 16px}
.ch-typing{display:flex;gap:4px;padding:14px}
.ch-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:chb 1s infinite}
.ch-typing i:nth-child(2){animation-delay:.15s}.ch-typing i:nth-child(3){animation-delay:.3s}
@keyframes chb{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-4px);opacity:1}}
.ch-err{font-size:.85rem;color:#A1301F;margin:0}
.ch-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.ch-quick[hidden]{display:none}
.ch-quick button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:500 .85rem var(--body);color:var(--ink);cursor:pointer}
.ch-quick button:hover{border-color:var(--green-2);color:var(--green)}
.ch-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px 12px;border-top:1px solid var(--line);background:#fff}
.ch-form[hidden]{display:none}
.ch-form textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:16px;padding:10px 14px;font:inherit;font-size:1rem;line-height:1.4;max-height:120px;background:var(--bg)}
.ch-form textarea:focus{outline:2px solid var(--green-2);outline-offset:0;background:#fff}
.ch-send{width:44px;height:44px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:1.05rem;cursor:pointer;flex:none}
@media (max-width:700px){.chatp{right:8px;left:8px;width:auto;bottom:80px;max-height:calc(100dvh - 100px)}}
@media (prefers-reduced-motion:reduce){.ch-typing i{animation:none}}

/* homepage photo hero */
.hero{padding-top:28px}
.hero-photo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.hero-copy{order:1}
.hero-photo img{order:2;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:100% center;border-radius:32px;display:block}
.hero-photo + .bento{margin-top:36px}
@media (max-width:900px){.hero-photo{grid-template-columns:1fr;gap:22px}.hero-photo img{aspect-ratio:4/3;object-position:90% center;border-radius:24px}}
/* focus points: keep each face in view at every screen size (x% = where the face sits) */
.slot img[src*="weight-hero"]{object-position:60% 30%}
.slot img[src*="sexual-hero"]{object-position:100% 30%}
.slot img[src*="meno-hero"]{object-position:75% 30%}
.slot img[src*="pcos-hero"]{object-position:63% 30%}
.slot img[src*="fertility-hero"]{object-position:68% 30%}
.slot img[src*="skin-hero"]{object-position:40% 30%}
.slot img[src*="hair-hero"]{object-position:86% 40%}
.slot img[src*="labs-hero"]{object-position:95% 30%}
.slot img[src*="womens-hero"]{object-position:75% 40%}
.slot img[src*="men-hero"]{object-position:74% 30%}
/* focus points for the added photos */
.slot img[src*="weight-man"]{object-position:55% 30%}
.slot img[src*="weight-woman2"]{object-position:52% 25%}
.slot img[src*="hair-man"]{object-position:42% 30%}
.slot img[src*="skin-man"]{object-position:48% 30%}

/* rotating photos: shared topics show women and men in turn */
.slot img.slide{transition:opacity 1.2s ease}
.slot img.slide:not(.on){opacity:0}
.hero-rot{order:2;position:relative;border-radius:32px;overflow:hidden}
.hero-rot img{transition:opacity 1.2s ease}
.hero-rot img.slide:not(:first-child){position:absolute;inset:0;height:100%}
.hero-rot img.slide:not(.on){opacity:0}
.hero-photo img[src*="home-hijab"]{object-position:100% 30%}
.hero-photo img[src*="home-afro"]{object-position:32% 30%}
@media (max-width:900px){.hero-rot{border-radius:24px}.hero-photo img[src*="home-hijab"]{object-position:100% 30%}.hero-photo img[src*="home-afro"]{object-position:32% 30%}}
.slide-dots{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.slide-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.slide-dots i.on{background:#fff}
/* "Not sure? Start here" card: question mark instead of a photo */
.slot.pic.qmark{background:var(--c,#23473A);color:#fff;display:grid;place-items:center}
.slot.pic.qmark svg{width:66%;height:66%}
.slot img[src*="labs-man"]{object-position:64% 25%}
.slot img[src*="hair-man2"]{object-position:28% 30%}
.slot img[src*="weight-man2"]{object-position:52% 30%}
.slot img[src*="mens-pill"]{object-position:58% 30%}
.slot img[src*="fertility-pregnant"]{object-position:46% 5%}