/* Body Age niche layer over kit.css. Colours only from CSS vars (tokens in theme.css and kit.css).
   Roles: coral = strength / chair, sky = balance, mint (pass) = younger / better, sun = number highlight, ink = navy. */
/* night scene in dark mode: moon + stars on night sections */
.sec--night{isolation:isolate}
.sec--night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:radial-gradient(1.5px 1.5px at 12% 18%,var(--on-night) 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 12%,var(--on-night) 50%,transparent 51%),
  radial-gradient(1px 1px at 64% 30%,var(--on-night) 50%,transparent 51%),radial-gradient(2px 2px at 88% 64%,var(--sun) 50%,transparent 51%),radial-gradient(1px 1px at 30% 80%,var(--on-night) 50%,transparent 51%)}

.logo{color:var(--ink)}
.logo svg{width:30px;height:30px}
.eyebrow{display:flex;align-items:center;gap:12px;font:800 .8rem/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:16px 0 0 var(--sky),32px 0 0 var(--pass);margin-right:34px}
.sec--night .eyebrow{color:var(--on-night-soft)}
.t-coral{color:var(--brand-text)} .t-sky{color:var(--sky-text)} .t-mint{color:var(--mint-text)}
.sec--night .t-coral{color:var(--coral)} .sec--night .t-sky{color:var(--sky)} .sec--night .t-mint{color:var(--pass)}
.btn--brand{--b:var(--brand-text);--on:var(--on-brand)}
.btn svg{width:1.1em;height:1.1em}
.btn--block{width:100%;justify-content:center}
.src{font-size:.82rem;color:var(--ink-soft)}
.src a{color:inherit;text-underline-offset:2px}
.sec--night .src{color:var(--on-night-soft)}
.sec--night .src a{color:var(--on-night)}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(2.2rem,5vw,5rem) clamp(4rem,8vw,7rem);overflow:clip}
.hero .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hero h1 .t2{color:var(--brand-text)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:.3rem}
.hero__privacy{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--ink-soft)}
.hero__privacy svg{width:18px;height:18px;color:var(--mint-text)}
.hero__tests{display:flex;flex-wrap:wrap;gap:.5em .45em;margin-top:.6rem}
.hero__vis{position:relative;justify-self:center;width:min(100%,320px);margin-inline:auto;isolation:isolate}
.glow{position:absolute;z-index:-1;width:170%;aspect-ratio:1;left:-35%;top:-8%;border-radius:50%;background:
  radial-gradient(closest-side,color-mix(in oklab,var(--sun) 55%,transparent),color-mix(in oklab,var(--sun) 22%,transparent) 55%,transparent) 60% 20%/80% 60% no-repeat,
  radial-gradient(closest-side,color-mix(in oklab,var(--coral) 30%,transparent),transparent) 20% 75%/70% 50% no-repeat}
.frame--phone{--bezel:var(--phone-bezel);--island:var(--phone-island)}
.frame--phone{max-width:300px;margin:0 auto}
.frame--phone>picture{background:var(--screen)}
.s-chair{--w:128px;left:-34%;bottom:4%;z-index:-1}
.s-books{--w:150px;left:-18%;bottom:-6%;z-index:2}
.s-watch{--w:84px;right:-22%;top:-4%}
.s-shoe{--w:104px;right:-30%;bottom:16%}
.s-candle{--w:74px;left:-26%;top:6%}
.s-spark1{--w:26px;right:-6%;top:34%;color:var(--coral)}
.s-spark2{--w:18px;left:-8%;top:44%;color:var(--sky-s)}

/* ---------- STEPS (paper note) ---------- */
.steps-vis{position:relative;justify-self:center;width:min(100%,34rem);padding:22px 0 30px}
.paper-note .step{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;align-items:center;padding:8px 0}
.paper-note .step svg.pic{width:62px;height:74px}
.paper-note .step b{display:block;font:800 1.12rem/1.2 var(--f-display);letter-spacing:-.01em}
.paper-note .step span{display:block;color:var(--ink-soft);font-size:.98rem;line-height:1.45}
.paper-note .step .step__n,.step__n{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:50%;background:var(--c,var(--coral));color:var(--on-sun);font:800 .85rem/1 var(--f-display);vertical-align:2px}
.steps-vis .s-watch{--w:70px;right:-18px;top:-26px;left:auto}

/* ---------- STATS (night) ---------- */
.stats{display:grid;gap:clamp(1.8rem,3.5vw,3rem)}
.stats .big-stat__num{font-size:clamp(4.2rem,2.4rem + 7vw,8.6rem)}
.stats--row{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(1rem,3vw,2.2rem)}
.stats--row .big-stat{grid-template-columns:minmax(0,1fr);align-content:start}
.stats--row .big-stat__num{font-size:clamp(4.2rem,2.6rem + 4.4vw,7.2rem)}
@media (max-width:860px){.stats--row{grid-template-columns:minmax(0,1fr)}}
.stats .big-stat__label b{color:var(--on-night)}

/* ---------- NORMS CHART ---------- */
.chart-card{position:relative;justify-self:center;width:min(100%,33rem);padding:22px 22px 18px;border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--sh-card)}
.chart-card h3{font-size:1.15rem;margin-bottom:4px}
.chart-legend{display:flex;gap:16px;font-size:.85rem;font-weight:700;color:var(--ink-soft);margin:6px 0 10px}
.chart-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--c)}
.chart{width:100%;height:auto;overflow:visible}
.chart .bar-m{fill:var(--coral)} .chart .bar-f{fill:var(--sky)}
.chart .bar-m,.chart .bar-f{stroke:var(--stk-line);stroke-width:2}
.chart text{font:700 13px var(--f-text);fill:var(--ink-soft)}
.chart .val{font:800 14px var(--f-display);fill:var(--ink)}
.chart .axis{stroke:var(--line);stroke-width:2}
@media (prefers-reduced-motion:no-preference){
  html.js [data-in] .chart .grow{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease-bounce);transition-delay:calc(var(--i,0) * 90ms + .15s)}
  html.js [data-in].is-in .chart .grow{transform:scaleY(1)}
}

/* ---------- FREE vs PAID ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem);align-items:start}
.plan-card{position:relative;padding:24px 22px 22px;border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--sh-card)}
.plan-card--paid{box-shadow:inset 0 0 0 3px var(--coral),var(--sh-card)}
.plan-card h3{margin-bottom:4px}
.plan-card .price{font:800 1.9rem/1 var(--f-display);letter-spacing:-.03em;margin:10px 0 2px}
.plan-card .price small{font:700 .95rem var(--f-text);letter-spacing:0;color:var(--ink-soft)}
.plan-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid}
.plan-card li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line);font-weight:600;line-height:1.35}
.plan-card li svg{width:22px;height:22px;flex:none;margin-top:1px}
.plan-card .tag{position:absolute;top:-14px;right:18px}
.compare-vis{position:relative}
.compare-vis .stamp-svg{position:absolute;width:112px;right:-18px;bottom:-40px;rotate:-10deg;z-index:5}
@media (max-width:700px){.compare{grid-template-columns:minmax(0,1fr)}.compare-vis .stamp-svg{right:6px;bottom:-54px;width:96px}.compare-vis{padding-bottom:40px}}

/* ---------- SAFETY ---------- */
.safe-vis{position:relative;justify-self:center;width:min(100%,32rem);padding:24px 0 34px}
.safe-vis .s-chair{--w:92px;left:auto;right:-28px;bottom:-24px;top:auto;z-index:5}

/* ---------- PRIVACY (skeleton-only phone) ---------- */
.privacy-vis{position:relative;justify-self:center;width:min(100%,19rem)}
.skel{display:block;width:100%;height:auto;border-radius:34px;background:var(--screen)}
.skel .bone{stroke:var(--pose);stroke-width:5;stroke-linecap:round;fill:none}
.skel .joint{fill:var(--pose-joint)}
.skel text{font:700 13px var(--f-text);fill:var(--screen-soft)}
.skel .big{font:800 30px var(--f-display);fill:var(--on-screen)}
.privacy-vis .caption-card{left:auto;right:clamp(-3rem,-3vw,-.75rem)}
@media (max-width:560px){.privacy-vis .caption-card{right:auto}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq__list{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--sun);color:var(--on-sun);font:800 1.2rem/1 var(--f-text);transition:rotate .2s var(--ease-out)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 0 18px;color:var(--ink-soft);max-width:38rem}
.disclaimer{margin-top:1.4rem;padding:16px 18px;border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-soft);font-size:.95rem;color:var(--ink-soft)}
.disclaimer b{color:var(--ink)}

/* ---------- CLOSING + FOOTER ---------- */
.fin{overflow:clip}
.fin .split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.fin .frame--phone{max-width:250px}
.foot{margin-top:clamp(3rem,6vw,5rem);padding-top:22px;border-top:1px solid color-mix(in oklab,var(--on-night) 14%,transparent);display:grid;gap:10px;font-size:.88rem;color:var(--on-night-soft)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:700}
.foot a{color:var(--on-night)}
.sticky-bar .btn{--b:var(--brand-text);--on:var(--on-brand)}

@media (max-width:1100px){
  .hero .split,.fin .split{grid-template-columns:minmax(0,1fr)}
  .hero__vis{width:min(62%,280px);margin-top:1.2rem}
  .fin .hero__vis{width:min(60%,240px)}
}
@media (max-width:860px){.faq{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .hero__vis{width:min(64%,240px)}
  .s-chair{--w:90px;left:-30%}
  .s-books{--w:110px;left:-14%}
  .s-watch{--w:60px;right:-20%}
  .s-shoe{--w:76px;right:-26%}
  .s-candle{--w:54px;left:-24%}
  .steps-vis .s-watch{right:4px;top:-30px}
  .safe-vis .s-chair{right:4px;bottom:-30px;--w:74px}
}

/* ---------- LEGAL PAGES ---------- */
.legal{max-width:44rem;margin-inline:auto;padding-block:clamp(2rem,5vw,4rem)}
.legal h1{font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);margin-bottom:.6rem}
.legal h2{font-size:1.35rem;letter-spacing:-.02em;margin:1.8rem 0 .5rem}
.legal p,.legal li{color:var(--ink-soft);margin-bottom:.7rem}
.legal .note{padding:14px 16px;border-radius:var(--r-md);background:var(--paper);box-shadow:var(--sh-soft)}

/* ---------- LEGIT (polaroid with the two chair-stand positions) ---------- */
.legit-vis{position:relative;justify-self:center;width:min(100%,19rem);margin-top:1rem}
.flip{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:6px;padding:18px 10px 8px;border-radius:6px;background:var(--cream)}
.flip svg{width:100%;height:auto}
.flip__a{opacity:.72}
@media (prefers-reduced-motion:no-preference){
  html.js [data-in] .flip__b{translate:0 8px;transition:translate .6s var(--ease-bounce) .5s}
  html.js [data-in].is-in .flip__b{translate:0 0}
}

/* chip on coral: white fails contrast (2.75), dark ink passes */
.chip--brand{--on:var(--on-coral)}