/* ============================================================
   SERO — home (2026 redesign)
   Clean white retail layout: two-tone headlines with an ember
   accent, soft tinted product tiles, big rounded image cards
   and black pill buttons. Loaded after sections.css.
   ============================================================ */

.home{
  --h-bg:#FFFFFF;
  --h-soft:#F7F3EE;
  --h-ink:#14110D;
  --h-ink-2:#5D564E;
  --h-acc:#2F7A4A;
  --h-radius:24px;
  --h-gap:16px;
  background:var(--h-bg);
  color:var(--h-ink);
}

/* ---------- type ---------- */
.home .h1,.home .h2{
  font-family:var(--display); font-weight:500; letter-spacing:-.035em; color:var(--h-ink); margin:0;
}
.home .h1{ font-size:clamp(2.6rem,6vw,4.75rem); line-height:1.02; max-width:13ch; }
.home .h2{ font-size:clamp(2rem,4vw,3.25rem); line-height:1.06; max-width:20ch; }
.home .acc{ color:var(--h-acc); }
.home .acc-l{ color:#F3C7A8; }
.home .h2.on-img{ color:#fff; }
.home .h-sub{ font-size:clamp(1rem,1.3vw,1.125rem); color:var(--h-ink-2); line-height:1.55; margin:1rem 0 0; max-width:52ch; }
.home .eyebrow{
  display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.02em;
  color:var(--h-acc); margin-bottom:1rem;
}
.home .eyebrow.light{ color:#F3C7A8; }
.home .fine{ font-size:.8rem; color:var(--ink-3); margin:.75rem 0 0; }
.home .text-link{ display:inline-flex; align-items:center; min-height:44px; margin-top:1.25rem; font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.home .text-link:hover{ color:var(--h-acc); }

/* ---------- pill buttons ---------- */
.pill-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.85rem 1.9rem;
  border-radius:999px; background:var(--h-ink); color:#fff;
  font-weight:600; font-size:1rem; letter-spacing:-.01em; white-space:nowrap;
  border:1.5px solid var(--h-ink);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.pill-btn:hover{ background:var(--h-acc); border-color:var(--h-acc); transform:translateY(-1px); }
.pill-btn.light{ background:#fff; color:var(--h-ink); border-color:#fff; }
.pill-btn.light:hover{ background:var(--h-acc); border-color:var(--h-acc); color:#fff; }
.pill-btn.glass{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.pill-btn.glass:hover{ background:rgba(255,255,255,.26); border-color:#fff; }

/* ---------- promo bar ---------- */
.promo p{ margin:0 auto; max-width:none; }
.promo{
  background:var(--h-ink); color:#F3EFE8; text-align:center;
  font-size:.82rem; font-weight:500; padding:.6rem var(--pad); line-height:1.4;
}
.promo a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- nav: solid white, sticky ---------- */
.home .nav{ position:sticky; top:0; background:rgba(255,255,255,.96); border-bottom:1px solid transparent; padding:.7rem 0; }
.home .nav.stuck{ background:rgba(255,255,255,.92); border-bottom-color:var(--line); padding:.55rem 0; }
.home .nav-links{ margin-inline:auto; }
.home .nav-links a{ color:var(--h-ink); font-weight:500; }
.home .nav-cta{ margin-left:0; }
.home .nav-cta .btn.sm{ border-radius:999px; --bg:var(--h-ink); --bd:var(--h-ink); --fg:#fff; padding-inline:1.25rem; }
.home .nav-cta .btn.sm:hover{ background:var(--h-acc); border-color:var(--h-acc); color:#fff; }
.nav-login{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.2rem;
  border:1.5px solid var(--line); border-radius:999px; font-weight:600; font-size:.88rem;
}
.nav-login:hover{ border-color:var(--h-ink); }
.home .nav-acct{ display:none; }
.home .drawer{ top:0; }

/* ---------- sections ---------- */
.h-sec{ padding-block:clamp(4rem,8vw,7rem); }
.h-head{ margin-bottom:clamp(2rem,4vw,3rem); }
.h-head.center{ text-align:center; }
.h-head.center .h2,.h-head.center .h-sub{ margin-inline:auto; }
.h-head.split{ display:grid; gap:1.5rem; }
@media(min-width:900px){ .h-head.split{ grid-template-columns:1.1fr 1fr; align-items:end; gap:4rem; } }
.center-cta{ display:flex; justify-content:center; margin-top:clamp(2rem,4vw,3rem); }

/* ---------- hero ---------- */
.h-hero{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.h-hero-top{ display:grid; gap:1.5rem; margin-bottom:clamp(2rem,4vw,3rem); }
@media(min-width:900px){ .h-hero-top{ grid-template-columns:1.3fr 1fr; align-items:end; gap:4rem; } }
.h-hero-side p{ font-size:clamp(1rem,1.3vw,1.15rem); color:var(--h-ink-2); margin:0 0 1.5rem; max-width:40ch; line-height:1.55; }

.tiles{ display:grid; gap:var(--h-gap); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:1000px){ .tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tile{
  position:relative; display:flex; flex-direction:column;
  background:var(--t); border-radius:var(--h-radius); overflow:hidden;
  padding:1.4rem 1.4rem 1.25rem; min-height:100%;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.tile-t{ font-family:var(--display); font-size:clamp(1.25rem,1.8vw,1.6rem); font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.tile-s{ font-size:.86rem; color:var(--h-ink-2); margin-top:.4rem; line-height:1.4; }
.tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; margin-top:1.1rem; mix-blend-mode:multiply; }
.tile-f{ display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-weight:600; font-size:.95rem; }
.tile-go{
  width:40px; height:40px; border-radius:50%; background:var(--h-ink); color:#fff;
  display:grid; place-items:center; font-size:1rem; transition:background .25s var(--ease), transform .25s var(--ease);
}
.tile:hover .tile-go{ background:var(--h-acc); transform:translateX(3px); }

/* ---------- feature image card ---------- */
.h-feature{ padding-block:0; }
.feature-card{
  position:relative; border-radius:var(--h-radius); overflow:hidden; isolation:isolate;
  min-height:clamp(520px,72vh,720px); display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.5rem,4vw,3.5rem); color:#fff;
}
.feature-card picture,.feature-card picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.feature-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(12,11,10,0) 30%,rgba(12,11,10,.62) 100%),linear-gradient(90deg,rgba(12,11,10,.35),transparent 60%);
}
.feature-copy{ max-width:640px; }
.feature-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.feature-stats{
  display:flex; gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.25);
}
.feature-stats b{ display:block; font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.03em; line-height:1; }
.feature-stats span{ display:block; font-size:.82rem; opacity:.8; margin-top:.35rem; }

/* ---------- trust row ---------- */
.trust{ padding-block:clamp(2rem,4vw,3rem); }
.trust-row{ list-style:none; margin:0; padding:0; display:grid; gap:var(--h-gap); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:900px){ .trust-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.trust-row li{ background:var(--h-soft); border-radius:18px; padding:1.25rem 1.4rem; display:flex; flex-direction:column; gap:.2rem; }
.trust-row b{ font-weight:600; font-size:1rem; }
.trust-row span{ font-size:.86rem; color:var(--h-ink-2); }

/* ---------- markers (kept cards, Hims grid) ---------- */
.home .markers{ background:var(--h-soft); border-radius:var(--h-radius); margin-inline:clamp(0px,1.2vw,16px); }
.home .markers .marker-grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--h-gap); }
.home .mk{ border-color:transparent; border-radius:18px; box-shadow:var(--shadow-s); }

/* ---------- how it works ---------- */
.steps{ display:grid; gap:var(--h-gap); grid-template-columns:1fr; }
@media(min-width:820px){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.steps > .step{ background:var(--h-soft); border-radius:var(--h-radius); padding:1rem 1rem 1.75rem; display:flex; flex-direction:column; }
.step-img{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; }
.step-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.step:hover .step-img img{ transform:scale(1.04); }
.step-n{
  width:36px; height:36px; border-radius:50%; background:var(--h-ink); color:#fff;
  display:grid; place-items:center; font-weight:600; font-size:.95rem; margin:1.4rem .5rem 0;
}
.step h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; letter-spacing:-.03em; margin:.9rem .5rem 0; }
.step p{ color:var(--h-ink-2); margin:.5rem .5rem 0; font-size:.98rem; line-height:1.5; }

/* ---------- the reading (kept), framed as a rounded card ---------- */
.home .bio-stage{ margin-inline:clamp(0px,1.2vw,16px); }
.home .bio{ border-radius:var(--h-radius); }
.home .bio h2{ font-family:var(--display); font-weight:500; letter-spacing:-.035em; }
.home .bio .fade{ color:var(--h-acc); }

/* ---------- biological age ---------- */
.age-card{ display:grid; gap:var(--h-gap); background:var(--h-soft); border-radius:var(--h-radius); padding:var(--h-gap); }
@media(min-width:900px){ .home .age-card{ grid-template-columns:1fr 1fr; align-items:stretch; } }
.age-img{ border-radius:18px; overflow:hidden; min-height:320px; }
.age-img img{ width:100%; height:100%; object-fit:cover; }
.age-copy{ padding:clamp(1rem,3vw,2.5rem); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.age-compare{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:1.75rem; width:100%; max-width:440px; }
.age-compare div{ background:#fff; border-radius:16px; padding:1rem 1.2rem; }
.age-compare span{ display:block; font-size:.84rem; color:var(--h-ink-2); }
.age-compare b{ display:block; font-family:var(--display); font-weight:500; font-size:2.75rem; letter-spacing:-.04em; line-height:1.05; margin-top:.25rem; }
.age-compare .hl{ background:var(--h-ink); color:#fff; }
.age-compare .hl span{ color:#F3C7A8; }
.age-copy .pill-btn{ margin-top:1.5rem; }

/* ---------- pricing (kept cards) ---------- */
.home .h-panels{ background:var(--h-soft); border-radius:var(--h-radius); margin-inline:clamp(0px,1.2vw,16px); }
.home .panels{ gap:var(--h-gap); }
.home .panel{ border-radius:var(--h-radius); border-color:transparent; box-shadow:var(--shadow-s); }
.home .panel .btn{ border-radius:999px; }
.home .panel.feat::before{ left:0; width:100%; }
.home .subscribe,.home .guarantee{ border-radius:var(--h-radius); }

/* ---------- faq ---------- */
.home #faq .wrap{ display:grid; gap:2rem; }
@media(min-width:900px){ .home #faq .wrap{ grid-template-columns:.8fr 1.2fr; gap:4rem; align-items:start; } .home #faq .h-head{ position:sticky; top:100px; } }
.home #faq .faq{ max-width:none; margin:0; }
.home #faq .cta-row{ grid-column:1/-1; }

/* ---------- closing ---------- */
.closing{ padding-block:clamp(2rem,4vw,3rem); }
.close-card{
  position:relative; border-radius:var(--h-radius); overflow:hidden; isolation:isolate;
  min-height:clamp(440px,60vh,600px); display:flex; align-items:flex-end;
  padding:clamp(1.5rem,4vw,3.5rem); color:#fff;
}
.close-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.close-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 25%,rgba(12,11,10,.6)); }
.close-copy p{ font-size:1.1rem; margin:1rem 0 1.75rem; opacity:.9; }

/* ---------- footer on white ---------- */
.home footer.ft{ border-radius:var(--h-radius) var(--h-radius) 0 0; padding-bottom:clamp(3.5rem,7vw,5.5rem); }
.home .ft-bot{ padding-bottom:0; }
.home .ft-col a{ display:flex; align-items:center; min-height:44px; padding:0; }
.home .ft-brand p,.home .ft-legal p,.trust-row span,.home .faq button{ text-wrap:balance; }

/* ---------- mobile ---------- */
@media(max-width:899px){
  .home .nav-login{ display:none; }
}
@media(max-width:700px){
  .home{ --h-radius:20px; --h-gap:12px; }
  .tile{ padding:1rem 1rem .9rem; }
  .tile-s{ display:none; }
  .tile img{ margin-top:.75rem; }
  .tile-go{ width:34px; height:34px; }
  .feature-card{ min-height:600px; }
  .feature-actions .pill-btn{ flex:1 1 auto; }
  .feature-stats{ justify-content:space-between; }
  .trust-row li{ padding:1rem 1.1rem; }
}

/* defence sets [class*="card"] to flex column; these cards are deliberate grids/stacks */
.home .age-card{ display:grid; }
.home .close-card{ justify-content:flex-end; align-items:flex-start; }
.home .close-card{ min-height:clamp(480px,60vh,600px); }
@media(min-width:900px){ .home #faq .cta-row{ grid-column:2; } }
@media(max-width:700px){
  .feature-card::after{ background:linear-gradient(180deg,rgba(12,11,10,.15) 0%,rgba(12,11,10,.7) 55%,rgba(12,11,10,.85) 100%); }
  .close-card::after{ background:linear-gradient(180deg,rgba(12,11,10,.1) 10%,rgba(12,11,10,.75)); }
}
@media(max-width:700px){ .close-card > img{ object-position:72% 50%; } }
@media(max-width:999px){ .tile-t{ min-height:2.2em; } }
.home .h1{ max-width:16ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; }
.hero-ctas .text-link{ margin-top:0; }
.home .h-hero-side .hero-meta{ margin:1rem 0 0; font-size:.88rem; color:var(--ink-3); }
.home .nav-cta{ gap:.5rem; }
.nav-login,.home .nav-cta .btn.sm{ height:44px; min-height:44px; padding:0 1.25rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
/* tighter join between how-it-works and the pinned reading card */
.home .how{ padding-block:clamp(3rem,6vw,5rem); }
.home .bio-stage{ margin-inline:0; }
.home .bio-pin{ padding:var(--h-gap); top:64px; height:calc(100svh - 64px); }
.home .bio{ border-radius:var(--h-radius); }
.home .bio-stage + .h-sec{ padding-top:clamp(2rem,4vw,3rem); }

/* the reading: clean warm ground instead of the dune photo, bigger arc */
.home .bio > picture{ display:none; }
.home .bio{
  background:
    radial-gradient(120% 80% at 50% 115%, #F4D3BD 0%, rgba(244,211,189,0) 60%),
    #F7F3EE;
}
.home .arc-wrap{ width:100%; justify-items:stretch; }
.home .arc-box{ width:min(1080px,100%); margin-inline:auto; }
.home .bio-flag{ font-size:.82rem; }
@media(max-width:700px){
  .home .arc-box{ width:118%; margin-inline:-9%; }
}

/* biological age delta */
.age-delta{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:12px;
  background:var(--good-soft); color:var(--good); font-weight:600; font-size:.95rem;
  padding:.5rem .9rem; border-radius:999px;
}
.age-delta svg{ width:12px; height:12px; fill:currentColor; }
.home .bio-flag.on{ translate:-50% -72px; }
@media(max-width:700px){ .home .bio-flag.on{ translate:-50% -52px; } }

/* ---------- duo cards (amber, Hims "care for your schedule") ---------- */
.duo-sec{ padding-bottom:0; }
.duo{ display:grid; gap:var(--h-gap); grid-template-columns:1fr; }
@media(min-width:900px){ .duo{ grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); } }
.home .duo-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:#C0843E; color:#fff; border-radius:var(--h-radius);
  padding:clamp(1.5rem,3vw,2.25rem); min-height:clamp(560px,52vw,720px);
  display:flex; flex-direction:column;
}
.duo-t{ font-family:var(--display); font-weight:500; letter-spacing:-.035em; font-size:clamp(2rem,3.4vw,2.75rem); line-height:1.05; margin:0; color:#fff; }
.duo-t span,.duo-p span{ color:#FBD38D; }
.duo-p{ font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.4; margin:.75rem 0 0; max-width:30ch; }
.duo-card img{ position:absolute; left:0; right:0; bottom:0; width:100%; height:72%; object-fit:cover; object-position:50% 100%; z-index:-1; }
.bubbles{ position:absolute; left:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); bottom:clamp(1.25rem,3vw,2rem); display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.bb{ background:rgba(255,255,255,.2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; font-size:.92rem; padding:.75rem 1.1rem; border-radius:999px; }
.bb.you{ align-self:flex-end; color:#FBD38D; }

/* ---------- why list (coloured bar, thumbnail) ---------- */
.why-list{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; }
@media(min-width:900px){ .why-list{ grid-template-columns:1fr 1fr; column-gap:4rem; } }
.why-item{ display:grid; grid-template-columns:1fr minmax(120px,38%); gap:1.25rem; align-items:start; border-left:4px solid #B96A50; padding-left:clamp(1rem,2vw,1.5rem); }
.why-item h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.75rem,2.6vw,2.25rem); letter-spacing:-.035em; line-height:1.05; margin:0; }
.why-item p{ color:var(--h-ink-2); margin:.9rem 0 0; font-size:1rem; line-height:1.5; }
.why-item img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; }

/* ---------- mission closing (Hims hero style) ---------- */
.home .close-card{ min-height:clamp(520px,70vh,760px); justify-content:center; }
.mission{ font-family:var(--display); font-weight:500; color:#fff; letter-spacing:-.04em; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.08; max-width:14ch; margin:0 0 2rem; }
.home .close-card::after{ background:linear-gradient(90deg,rgba(12,11,10,.5),rgba(12,11,10,.1) 65%); }
.home .close-card .pill-btn{ min-width:200px; }

/* ---------- footer: black, Hims columns ---------- */
.home footer.ft{ background:#000; border-radius:0; margin-top:calc(var(--h-radius) * -1); position:relative; z-index:-1; padding-top:calc(clamp(3.5rem,7vw,5.5rem) + var(--h-radius)); }
.home .ft-col h5{ font-family:var(--sans); font-size:1.4rem; font-weight:600; letter-spacing:-.02em; text-transform:none; color:#fff; margin-bottom:1rem; }
.home .ft-col a{ opacity:1; font-size:1rem; }
.home .ft-legal p{ color:#A8A29A; }
.faq-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.faq-cta span{ color:var(--h-ink-2); font-size:.95rem; }
.faq-cta span a{ color:var(--h-ink); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
@media(min-width:900px){ .home #faq .faq-cta{ grid-column:2; } }
.home .duo-card{ background:#C27B33; }
.duo-card img{ top:0; height:100%; object-position:50% 100%; }
.duo-card .duo-t,.duo-card .duo-p{ text-shadow:0 1px 18px rgba(120,60,10,.18); }
.duo-sec{ padding-block:clamp(2rem,4vw,3rem); }
.home .bio-stage + .h-sec{ padding-block:clamp(2rem,4vw,3rem); }
/* closing card sits on the black footer, as on Hims */
.home .closing{ padding-bottom:0; position:relative; z-index:1; }
.home footer.ft{ z-index:0; }
.home .duo-card:nth-child(2){ background:#B7742C; }
.duo-card:nth-child(2) img{ transform:translateY(20%); }
.duo-card:nth-child(2) img{ -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 34%); mask-image:linear-gradient(180deg,transparent 18%,#000 34%); }
.home .duo-card:nth-child(2){ background:#BC772F; }

/* ============================================================
   Green and yellow brand pass (AG1-leaning)
   ============================================================ */
.home{ --h-ink:#0F3B2E; --h-acc:#2F7A4A; --h-soft:#F4F6EE; --h-lime:#E4F46B; }
.home .h1,.home .h2,.tile-t,.step h3,.why-item h3{ color:#10201A; }
.home .acc-l,.home .eyebrow.light{ color:var(--h-lime); }
.pill-btn:hover{ background:#1C5A43; border-color:#1C5A43; }
.pill-btn.light:hover{ background:var(--h-lime); border-color:var(--h-lime); color:var(--h-ink); }
.promo{ background:var(--h-ink); }
.promo a{ color:var(--h-lime); }
.home .nav-cta .btn.sm:hover{ background:#1C5A43; border-color:#1C5A43; }
.tile:hover .tile-go{ background:var(--h-lime); color:var(--h-ink); }
.tiles .tile:nth-child(1){ --t:#EEF2E2 !important; }
.tiles .tile:nth-child(2){ --t:#F6F1CF !important; }
.tiles .tile:nth-child(3){ --t:#E2EDDF !important; }
.tiles .tile:nth-child(4){ --t:#F2F0DC !important; }
.home .bio{ background:radial-gradient(120% 80% at 50% 115%, #DCEBB4 0%, rgba(220,235,180,0) 60%), #F5F7EF; }
.home .duo-card,.home .duo-card:nth-child(2){ background:#1E4D3A; }
.duo-t span,.duo-p span,.bb.you{ color:var(--h-lime); }
.why-item{ border-left-color:#3F8F4E; }
.home .panel.feat{ background:var(--h-ink); border-color:var(--h-ink); }
.home .p-flag{ background:var(--h-lime); color:var(--h-ink); }
.home footer.ft{ background:var(--h-ink); }
.age-compare .hl{ background:var(--h-ink); }
.age-compare .hl span{ color:var(--h-lime); }
.age-delta{ background:#EAF5C8; color:#1F5A3A; }
.home .duo-card:nth-child(1){ background:#21372D; }
.home .duo-card:nth-child(2){ background:#17402E; }
.duo-card:nth-child(2) img{ transform:none; -webkit-mask-image:none; mask-image:none; }

/* ---------- what you can track (Thriva-style pill marquee) ---------- */
.tracksec{ background:var(--h-ink); color:#fff; padding-block:clamp(4rem,8vw,7rem); overflow:hidden; text-align:center; }
.kicker{ display:block; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:1rem; }
.home .h2.on-dark{ color:#fff; margin-inline:auto; max-width:22ch; }
.track-stage{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); display:grid; place-items:center; min-height:520px; }
.track-rows{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.track-row{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.track-run{ display:flex; gap:16px; width:max-content; animation:run 60s linear infinite; }
.track-row:nth-child(even) .track-run{ animation-direction:reverse; animation-duration:70s; }
@keyframes run{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .track-run{ animation:none; } }
.pill{ display:inline-flex; align-items:center; gap:12px; height:56px; padding:0 28px; border-radius:999px; background:#164B39; color:#fff; font-weight:500; font-size:1rem; white-space:nowrap; }
.pill i{ width:12px; height:12px; border-radius:50%; background:#2BB083; font-style:normal; }
.pill.a i{ background:#F2B45F; } .pill.r i{ background:#F26B6B; }
.pill.s{ font-weight:700; }
.pill.s i{ width:auto; height:auto; background:none; color:var(--h-lime); }
.phone{
  position:relative; z-index:2; width:260px; border-radius:36px; background:#fff; color:#10201A;
  border:8px solid #0A2A20; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); overflow:hidden; text-align:center;
}
.ph-top{ background:#F4F6EE; padding:24px 20px 0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.ph-logo{ width:52px; height:52px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.08); margin-bottom:10px; }
.ph-top b{ font-size:.95rem; } .ph-top small{ font-size:.75rem; color:var(--ink-3); }
.ph-card{ margin:16px 0 -36px; background:#fff; border-radius:14px; padding:14px 20px 16px; box-shadow:0 10px 24px -12px rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:center; gap:2px; width:150px; }
.ph-card span{ font-size:.75rem; } .ph-card strong{ font-size:1.9rem; font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.ph-card strong em{ font-style:normal; font-size:.75rem; color:var(--ink-3); }
.ph-card small{ font-size:.7rem; } .ph-card i{ display:block; width:100%; height:4px; border-radius:2px; background:#2BB083; margin-top:8px; }
.ph-chart{ display:block; width:100%; height:auto; margin-top:52px; padding:0 18px; }
.ph-ins{ font-size:.72rem; line-height:1.45; color:var(--ink-2); padding:8px 20px 24px; margin:0; }
.ph-ins b{ display:block; color:#10201A; margin-bottom:4px; }
.text-link.light{ color:#fff; }

/* ---------- journey timeline (Thriva-style) ---------- */
.journey{ background:var(--h-soft); overflow:hidden; }
.jr-scroll{ overflow-x:auto; scrollbar-width:none; padding-inline:max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
.jr-scroll::-webkit-scrollbar{ display:none; }
.jr{ position:relative; width:1400px; height:480px; }
.jr-line{ position:absolute; left:0; top:0; width:100%; height:400px; z-index:3; pointer-events:none; }
.jr-ph{ position:absolute; margin:0; width:320px; height:320px; }
.jr-ph img{ width:100%; height:100%; object-fit:cover; border-radius:22px; }
.jr-ph.p1{ left:0; top:60px; } .jr-ph.p2{ left:360px; top:60px; } .jr-ph.p3{ left:720px; top:40px; height:340px; } .jr-ph.p4{ left:1080px; top:0; height:380px; }
.jr-card{ position:absolute; z-index:4; background:#fff; border-radius:16px; box-shadow:0 14px 34px -18px rgba(0,0,0,.35); padding:14px 18px; font-size:.9rem; color:#10201A; text-align:left; }
.jr-card.num{ right:-60px; bottom:40px; display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; min-width:136px; }
.jr-card.num span{ font-size:.8rem; } .jr-card.num strong{ font-size:1.5rem; font-weight:500; letter-spacing:-.02em; } .jr-card.num small{ font-size:.78rem; }
.jr-card.num i{ display:block; width:100%; height:4px; border-radius:2px; margin-top:6px; background:#F26B6B; }
.jr-card.num i.good{ background:#2BB083; }
.p4 .jr-card.num{ right:auto; left:-60px; top:40px; bottom:auto; }
.jr-card.note{ top:20px; left:56px; right:-24px; line-height:1.45; }
.jr-card.note b{ display:flex; align-items:center; gap:8px; font-size:1rem; margin-bottom:6px; }
.ck{ width:18px; height:18px; border-radius:50%; background:#10201A; color:#fff; display:grid; place-items:center; font-size:.65rem; }
.sp{ color:#E9B23F; }
.jr-axis{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; padding-top:20px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  background:repeating-linear-gradient(90deg,#10201A 0 1.5px,transparent 1.5px 12px) top/100% 8px no-repeat; }
@media(max-width:700px){
  .track-stage{ min-height:460px; }
  .pill{ height:44px; padding:0 18px; font-size:.88rem; }
  .phone{ width:220px; }
}
.jr-card.num > *{ white-space:nowrap; }
.home .closing{ padding-block:0; }

/* ============================================================
   MOBILE FIRST PASS: big thumb-sized buttons, room to breathe
   ============================================================ */
@media(max-width:700px){
  .home{ --pad:20px; }
  .h-sec{ padding-block:72px; }
  .h-head{ margin-bottom:32px; }
  .home .h1{ font-size:2.6rem; line-height:1.05; }
  .home .h2{ font-size:2.1rem; }
  .home .h-sub,.h-hero-side p{ font-size:1.06rem; line-height:1.6; }

  /* buttons: full width, 60px */
  .pill-btn{ min-height:60px; font-size:1.08rem; padding:0 28px; width:100%; }
  .hero-ctas{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-ctas .text-link{ justify-content:center; min-height:52px; font-size:1rem; }
  .home .h-hero-side .hero-meta{ text-align:center; }
  .center-cta .pill-btn,.age-copy .pill-btn,.faq-cta .pill-btn{ width:100%; }
  .faq-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .home .panel .btn{ min-height:60px; font-size:1.05rem; }
  .home .subscribe .btn{ width:100%; min-height:60px; }

  /* hero */
  .h-hero{ padding-block:40px 48px; }
  .h-hero-top{ gap:24px; margin-bottom:40px; }
  .tiles{ gap:12px; }
  .tile{ border-radius:20px; }
  .tile-t{ font-size:1.15rem; }
  .tile-f{ font-size:.95rem; }
  .tile-go{ width:40px; height:40px; }

  /* trust: one per row, roomier */
  .trust-row{ grid-template-columns:1fr; gap:10px; }
  .trust-row li{ flex-direction:row; justify-content:space-between; align-items:center; padding:18px 20px; }

  /* markers: swipeable row instead of a long stack */
  .home .markers .marker-grid{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin-inline:calc(var(--pad) * -1); padding:4px var(--pad) 16px; scrollbar-width:none; }
  .home .markers .marker-grid::-webkit-scrollbar{ display:none; }
  .home .markers .mk{ flex:0 0 78%; scroll-snap-align:start; }
  .home .markers{ margin-inline:0; border-radius:0; }

  /* how: steps breathe */
  .steps{ gap:16px; }
  .step h3{ font-size:1.6rem; }
  .step p{ font-size:1.02rem; }

  /* why: image on top, no mid-word breaks */
  .why-item{ grid-template-columns:1fr; gap:16px; }
  .why-item img{ order:-1; aspect-ratio:16/9; }
  .why-item h3{ overflow-wrap:normal; font-size:1.9rem; }
  .why-list{ gap:40px; }

  /* duo */
  .home .duo-card{ min-height:600px; }
  .bb{ font-size:.95rem; }

  /* age */
  .age-copy{ padding:24px 8px 16px; }
  .age-compare b{ font-size:2.4rem; }

  /* faq: larger tap rows */
  .home .faq button{ font-size:1.05rem; min-height:68px; padding-block:16px; }

  /* closing */
  .home .close-card{ min-height:560px; align-items:stretch; }
  .mission{ font-size:2.2rem; }

  /* nav: bigger order button */
  .home .nav-cta .btn.sm{ height:48px; min-height:48px; font-size:.95rem; padding:0 18px; }
  .home .burger{ width:48px; height:48px; }

  /* sticky order bar: thumb friendly */
  .order-bar .btn{ min-height:56px; border-radius:999px; }
}
.p4 .jr-card.num{ left:24px; top:24px; right:auto; bottom:auto; min-width:150px; }
.jr-card.num strong{ display:block; }
.p4 .jr-card.num{ min-width:180px; }
.home .p-markers,.home .mono,.home .zb-ticks span{ font-family:var(--sans); letter-spacing:0; text-transform:none; font-size:.85rem; }
.home .bio-stats .mono{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }

/* ---------- sample report (Lola "see what you'll get") ---------- */
.home .report-card{ display:grid; gap:var(--h-gap); background:#fff; border:1px solid var(--line); border-radius:var(--h-radius); padding:var(--h-gap); overflow:hidden; }
@media(min-width:900px){ .home .report-card{ grid-template-columns:1.1fr 1fr; align-items:stretch; } }
.report-copy{ padding:clamp(1rem,3vw,2.5rem); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.report-list{ list-style:none; padding:0; margin:1.5rem 0 2rem; display:flex; flex-direction:column; gap:12px; }
.report-list li{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:1.05rem; }
.report-list svg{ width:28px; height:28px; padding:6px; border-radius:50%; background:#EAF5C8; fill:none; stroke:#1F5A3A; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.report-img{ border-radius:18px; overflow:hidden; min-height:360px; background:#17402E; }
.report-img img{ width:100%; height:100%; object-fit:cover; object-position:50% 80%; }
@media(min-width:1000px){ .steps.four{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(min-width:700px) and (max-width:999px){ .steps.four{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.steps.four .step h3{ font-size:1.35rem; }
.steps.four .step p{ font-size:.95rem; }
.why-item{ grid-template-columns:minmax(0,1fr) clamp(120px,32%,200px); }
@media(max-width:1199px){ .why-list{ grid-template-columns:1fr; } }
@media(max-width:700px){ .why-item{ grid-template-columns:1fr; } }
.report-list li span{ white-space:nowrap; }
.home .h2{ text-wrap:balance; }

/* ---------- journey: pinned horizontal scroll on desktop ---------- */
.journey .jr-ph .jr-card{ opacity:0; translate:0 12px; transition:opacity .5s var(--ease), translate .5s var(--ease); }
.journey .jr-ph.on .jr-card{ opacity:1; translate:0 0; }
.journey .jr-ph img{ transition:transform .8s var(--ease); }
@media(min-width:900px){
  .journey.jr-pinned{ height:calc(100vh + var(--travel, 0px)); padding-block:0; overflow:visible; }
  .journey.jr-pinned .jr-sticky{ position:sticky; top:64px; height:calc(100vh - 64px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
  .journey.jr-pinned .jr-scroll{ overflow:visible; }
  .journey.jr-pinned .jr{ will-change:transform; }
  .journey.jr-pinned .h-head{ margin-bottom:24px; }
}
@media (prefers-reduced-motion:reduce){ .journey .jr-ph .jr-card{ opacity:1; translate:none; } }

/* tighter join between the journey and the reading */
.journey + .bio-stage{ margin-top:0; }
.home .journey:not(.jr-pinned){ padding-bottom:48px; }
.ph-logo{ background:none; box-shadow:none; width:52px; height:52px; }
.ph-logo img{ width:52px; height:52px; display:block; border-radius:14px; }

/* journey, desktop: a long strip that travels the full screen, Thriva style */
@media(min-width:900px){
  .journey.jr-pinned .jr{ width:2600px; height:560px; margin-left:22vw; }
  .journey.jr-pinned .jr-line{ height:470px; }
  .journey.jr-pinned .jr-ph{ width:400px; height:400px; }
  .journey.jr-pinned .jr-ph.p1{ left:0; top:70px; }
  .journey.jr-pinned .jr-ph.p2{ left:700px; top:70px; }
  .journey.jr-pinned .jr-ph.p3{ left:1400px; top:40px; height:430px; }
  .journey.jr-pinned .jr-ph.p4{ left:2100px; top:0; height:470px; }
}

/* journey v3: tighter strip, line computed from card positions */
@media(min-width:900px){
  .journey.jr-pinned .jr{ width:1920px; height:540px; margin-left:12vw; }
  .journey.jr-pinned .jr-line{ height:100%; }
  .journey.jr-pinned .jr-ph{ width:420px; height:420px; }
  .journey.jr-pinned .jr-ph.p1{ left:0; top:80px; }
  .journey.jr-pinned .jr-ph.p2{ left:480px; top:60px; height:440px; }
  .journey.jr-pinned .jr-ph.p3{ left:960px; top:40px; height:460px; }
  .journey.jr-pinned .jr-ph.p4{ left:1440px; top:20px; height:480px; }
  .journey.jr-pinned .jr-axis{ bottom:-40px; }
}
.jr-card.num strong{ white-space:nowrap !important; overflow-wrap:normal !important; word-break:keep-all; }
.age-img video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){ .age-img video{ animation:none; } }

/* squared buttons site-wide (owner preference: no pills) */
.pill-btn,.home .nav-cta .btn.sm,.nav-login{ border-radius:10px; }
.home .btn,.home .panel .btn,.order-bar .btn{ border-radius:10px; }
/* footer text on deep green: brighter for contrast */
.home .ft-brand p{ color:rgba(255,255,255,.86); }
.home .ft-legal p{ color:rgba(255,255,255,.7); }
.home .ft-legal strong,.home .ft-bot .tiny{ color:rgba(255,255,255,.86); }
/* mobile nav: order button and menu sit hard right */
@media(max-width:899px){ .home .nav-cta{ margin-left:auto; } .home .nav .wrap{ gap:12px; } }
@media(max-width:700px){ .home .nav-cta .btn.sm{ height:52px; min-height:52px; font-size:1rem; padding:0 20px; } .home .burger{ width:52px; height:52px; } }
@media(max-width:700px){ .pill-btn{ min-height:64px; font-size:1.12rem; } }

/* journey: sit on the page background, axis fully visible, no hard band */
.journey{ background:transparent; }
@media(min-width:900px){
  .journey.jr-pinned .jr-sticky{ justify-content:flex-start; padding-top:clamp(24px,5vh,56px); }
  .journey.jr-pinned .jr{ height:520px; margin-bottom:72px; }
  .journey.jr-pinned .jr-axis{ bottom:-48px; }
}
.journey .jr-axis{ color:var(--ink-3); }
.journey + .bio-stage .bio-pin{ padding-top:8px; }

/* journey v4: cards scale with viewport height so the axis always shows */
@media(min-width:900px){
  .journey.jr-pinned{ --c:min(420px, calc(100vh - 380px)); }
  .journey.jr-pinned .jr{ height:calc(var(--c) + 100px); margin-bottom:0; width:calc(var(--c) * 4 + 300px); }
  .journey.jr-pinned .jr-ph{ width:var(--c); height:var(--c); }
  .journey.jr-pinned .jr-ph.p1{ left:0; top:40px; }
  .journey.jr-pinned .jr-ph.p2{ left:calc(var(--c) + 60px); top:28px; height:calc(var(--c) + 12px); }
  .journey.jr-pinned .jr-ph.p3{ left:calc(var(--c) * 2 + 120px); top:14px; height:calc(var(--c) + 26px); }
  .journey.jr-pinned .jr-ph.p4{ left:calc(var(--c) * 3 + 180px); top:0; height:calc(var(--c) + 40px); }
  .journey.jr-pinned .jr-axis{ bottom:0; }
  .journey.jr-pinned .jr-sticky{ justify-content:center; padding-top:0; }
}
@media(min-width:900px){
  .journey.jr-pinned{ --c:min(400px, calc(100vh - 470px)); }
  .journey.jr-pinned .jr-sticky{ height:calc(100vh - 64px - 88px); }
}

/* ask us anything */
.ask{ border:0; border-radius:20px; padding:28px; width:min(520px, calc(100vw - 32px)); box-shadow:0 30px 80px -30px rgba(0,0,0,.4); color:#10201A; }
.ask::backdrop{ background:rgba(15,59,46,.45); backdrop-filter:blur(3px); }
.ask h2{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:1.8rem; margin:0; }
.ask-sub{ color:var(--ink-2); margin:6px 0 20px; }
.ask form{ display:flex; flex-direction:column; gap:14px; }
.ask label span{ display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.ask input,.ask textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; font:inherit; font-size:1rem; background:#fff; }
.ask input{ min-height:52px; }
.ask input:focus,.ask textarea:focus{ outline:none; border-color:#0F3B2E; }
.ask .pill-btn{ width:100%; margin-top:4px; }
.ask-x{ position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; background:transparent; font-size:1.6rem; cursor:pointer; color:var(--ink-2); }
.ask-out{ margin:14px 0 0; color:var(--ink-2); }
.ask-out b{ color:#1F5A3A; }
.close-card > .close-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
@media(max-width:700px){ .close-card > .close-bg{ object-position:72% 50%; } }