/* ============================================================
   SERO — responsive
   ============================================================ */

@media (max-width:1000px){
  .steps-wrap{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .showcase-stage,.cta-stage{ height:130vh; }
  .order-bar .ob-t{ display:none; }
  .order-bar .ob-p{ margin-left:0; }
  .order-bar .btn{ margin-left:auto; }
  .order-bar .wrap{ gap:1rem; }
  .nav-links{ display:none; }
  .nav-cta .btn.ghost{ display:none; }
  .burger{ display:flex; }
  .nav .wrap{ gap:.8rem; }
  .nav-cta{ margin-left:auto; }

  .hero-hud{ top:4.8rem; }
  .hero-hud .col.r{ display:none; }
  .hero-copy{ padding-bottom:2.6rem; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-actions .from{ margin:.2rem 0 0; text-align:center; }
  .scroll-cue{ display:none; }

  .showcase-inner::after{
    background:linear-gradient(180deg, rgba(14,16,12,.55) 0%, rgba(14,16,12,.3) 26%, rgba(14,16,12,.8) 74%);
  }
  .readout{ max-width:100%; }
  .dial-card{ display:none; }

  .cta-inner h2{ max-width:100%; }
  .cta-inner img.bg{ object-position:62% 40%; }
  .cta-inner::after{ background:linear-gradient(180deg, rgba(12,11,10,.5) 0%, rgba(12,11,10,.72) 50%, rgba(12,11,10,.88) 100%); }
  .cta-actions .btn{ width:100%; }
  .cta-row{ flex-direction:column; align-items:stretch; text-align:left; }
  .cta-row .btn{ width:100%; }

  .cmp-scroll{ margin-inline:calc(var(--pad) * -1); }
}

@media (max-width:560px){
  .nv-l,.hide-s{ display:none; }
  .nv-s{ display:inline; }
  .nav-cta .btn.sm{ padding:.55rem .85rem; font-size:.84rem; min-height:44px; }
  .nav-cta .btn.sm .arw{ display:none; }
  .logo .wm{ font-size:1.06rem; }
}

@media (max-width:640px){
  body{ font-size:16px; }
  .order-head{ padding-top:7rem; }
  .summary{ padding:1.2rem; }
  :root{ --sec:clamp(4rem,13vw,6rem); }

  .hero h1{ font-size:clamp(2.3rem,9.6vw,3.1rem); max-width:100%; }
  .hero .lede{ font-size:1rem; }
  .hero-stats{ justify-content:space-between; gap:1rem; }
  .hero-stats div .v{ font-size:1.4rem; }
  .hero-stats div .mono{ font-size:.56rem; letter-spacing:.1em; }

  .marker-grid{ grid-template-columns:1fr; }
  .drawer a{ font-size:1.85rem; }
  .guarantee{ grid-template-columns:1fr; }
  .subscribe{ text-align:left; }
  .subscribe .btn{ width:100%; }
  .calc-grid{ grid-template-columns:repeat(2,1fr); }
  .kit-list li{ flex-direction:column; gap:.2rem; }
  .kit-list li b{ min-width:0; }
}

@media (hover:none){
  .mk:hover,.panel:hover{ transform:none; }
  .btn:hover{ background:var(--bg); border-color:var(--bd); color:var(--fg); transform:none; box-shadow:none; }
  .btn.ghost:hover{ background:transparent; border-color:var(--line); color:var(--ink); }
}

/* Safari <18 has no backdrop-filter on some contexts — keep it legible */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.stuck,.drawer{ background:rgba(252,250,247,.97); }
  .nav.inv.stuck{ background:rgba(12,11,10,.94); }
  .row,.dial-card{ background:rgba(40,20,12,.72); }
  .glass-void,.loop,.trend{ background:rgba(255,255,255,.1); }
  .chapters,.steps-media figcaption{ background:rgba(12,11,10,.8); }
}

/* ============================================================
   Small-screen typography and density corrections
   ============================================================ */
@media (max-width:700px){
  .d2{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .d3{ font-size:clamp(1.45rem, 6vw, 1.9rem); }

  .row{ padding:.8rem .95rem .85rem; }
  .row .nm{ font-size:.9rem; }
  .showcase-head{ max-width:100%; }

  .bio{ padding:clamp(2.6rem,8vw,3.4rem) 1.1rem 2rem; }
  .bio-sub{ font-size:.95rem; max-width:32ch; }
  .arc-wrap{ padding-block:1.4rem; }
  .arc-box{ width:140%; margin-inline:-20%; }
  .bio-flag{ font-size:.68rem; padding:.34rem .55rem .34rem .46rem; }
  .bio-flag .mono{ display:none; }
  .bio-flag.on{ translate:-50% -38px; }
  .bio-stats{ gap:2.4rem; }
  .bio-stats .mono{ font-size:.58rem; letter-spacing:.1em; }

  .bioage-inner{ border-radius:var(--r-l); padding-inline:1.1rem; }
  .bioage-nums{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1rem; text-align:center; }
  .bioage-nums .delta{ grid-column:1 / -1; order:3; justify-self:center; }
  .bioage-nums b{ font-size:clamp(2.6rem,13vw,3.4rem); }
  .ruler .lb{ font-size:26px; }
  .ruler .m text{ display:none; }
  .ruler .tk{ stroke-width:2.4; }
  .ruler .tk.major{ stroke-width:3; }
  .ruler .m-line{ stroke-width:4; }
  .ruler .m circle{ r:9; }
  .ruler .m .halo{ r:22; }

  .body-stage{ height:min(66vh, 520px); }
  .body-stage .foot span:first-child{ display:none; }

  .premise{ border-radius:var(--r-l) var(--r-l) 0 0; }
  .live-card h4{ font-size:1.1rem; padding-bottom:1rem; }
  .trend .tl .num b{ font-size:1.7rem; }
  .kit-media{ aspect-ratio:5/4; }
}

@media (max-width:700px){
  .bio-stage{ height:175vh; }
  .bio-pin{ padding:calc(var(--pad) * (1 - var(--p, 0)) * .6); }
  .hero-stage{ height:160svh; }
  .premise{ margin-top:-62svh; }
}