/* Better Health — Wi-Fi pre-arrival guide (site root)
   Phone (<768px) keeps the Figma 375x812 layout. Tablet and desktop use
   wider page layouts with a centered column. Guide steps pin a segmented
   progress rail at the top so copy and screenshot height cannot shift it. */

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:#0A0C14;
}
html[data-screen="welcome"],html[data-screen="welcome"] body,html[data-screen="welcome"] #fit{ background:#FFFAF5 }
html[data-screen="dark"] #fit{ background:#0A0C14 }
#screen p,#screen h1,#screen h2{ margin:0 }
body{
  overflow:hidden;
  font-family:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  display:flex; align-items:center; justify-content:center;
}
#fit{ transform:scale(var(--s,1)); transform-origin:center center }

/* ---------- the phone screen: 375x812, no bezel, no mask, no overlay ---------- */
#screen{ position:relative; width:375px; height:812px; overflow:hidden; isolation:isolate }
/* decorative art lives here: clipped, inert, and always behind the content.
   Without the clip, the glows' scale() transforms add phantom scroll on wide layouts. */
.bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1 }
#screen.light{ background:#FFFAF5 }
#screen.dark{ background:#0A0C14 }

/* living background: the two glows breathe on separate cycles,
   three star layers drift at different speeds in opposing directions */
.amb,.amb2{ position:absolute; inset:0; pointer-events:none }
.amb{ transform:scale(1.04);
  background:radial-gradient(300px 260px at 320px 20px, rgba(50,90,160,.50), transparent 72%);
  animation:breatheA 15s ease-in-out infinite alternate }
.amb2{ transform:scale(1.12);
  background:radial-gradient(290px 250px at 20px 710px, rgba(90,50,160,.40), transparent 72%);
  animation:breatheB 19s ease-in-out infinite alternate }
@keyframes breatheA{
  0%{   transform:scale(1.04) translate3d(-10px,8px,0);  opacity:.80 }
  100%{ transform:scale(1.13) translate3d(10px,-10px,0); opacity:1.12 }
}
@keyframes breatheB{
  0%{   transform:scale(1.12) translate3d(9px,-8px,0);   opacity:1.10 }
  100%{ transform:scale(1.04) translate3d(-9px,9px,0);   opacity:.80 }
}
.layer{ position:absolute; inset:0; pointer-events:none }
.layer.far{  animation:driftFar  32s linear infinite alternate }
.layer.mid{  animation:driftMid  20s linear infinite alternate }
.layer.near{ animation:driftNear 12s linear infinite alternate }
@keyframes driftFar { from{ transform:translate3d(0,0,0) } to{ transform:translate3d(6px,5px,0) } }
@keyframes driftMid { from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-11px,8px,0) } }
@keyframes driftNear{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(22px,-18px,0) } }
.star{ position:absolute; border-radius:50%; background:#fff; pointer-events:none;
  opacity:var(--o1); animation:tw var(--d) ease-in-out infinite alternate; animation-delay:var(--dl) }
@keyframes tw{ from{ opacity:var(--o0) } to{ opacity:var(--o1) } }

/* in-app back: 30px disc, invisible 44px hit area */
.back{ position:absolute; left:16px; top:18px; width:30px; height:30px; border:0; padding:0;
  border-radius:50%; background:#2A2D3A; cursor:pointer; z-index:2;
  display:grid; place-items:center; transition:transform .16s ease, filter .22s ease }
.back::before{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50% }
@media (hover:hover){ .back:hover{ filter:brightness(1.35); transform:translateY(-1px) } }
.back.press{ transform:scale(.94); transition-duration:.09s }
.back:focus-visible{ outline:2px solid #7FE0B8; outline-offset:3px }

/* welcome */
.gridv,.gridh{ position:absolute; left:0; right:0; top:92px; bottom:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.17), rgba(0,0,0,1) 85%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.17), rgba(0,0,0,1) 85%) }
.gridv{ background-image:repeating-linear-gradient(to right, #F4ECE4 0 1px, transparent 1px 36px);
  background-position:7px 0 }
.gridh{ background-image:repeating-linear-gradient(to bottom, #F4ECE4 0 1px, transparent 1px 36px) }
.logo{ position:absolute; left:24px; top:60px; width:98px; height:48px; object-fit:contain; object-position:left center }
.wrap{ position:absolute; left:24px; top:158px; width:327px; display:flex; flex-direction:column; gap:26px }
.eyebrow{ font:600 13px/18px "Host Grotesk",sans-serif; letter-spacing:1.7px; color:#5682D0 }
.headgroup{ display:flex; flex-direction:column; gap:16px }
.h1{ font:500 40px/46px "Host Grotesk",sans-serif; letter-spacing:-1.2px; color:#002C8B; margin:0 }
.lead{ font:400 18px/28px "Host Grotesk",sans-serif; letter-spacing:-.2px; color:#2F58B1 }
.helper{ display:flex; align-items:center; gap:12px;
  font:500 16px/24px "Host Grotesk",sans-serif; letter-spacing:-.1px; color:#5682D0 }
.dot{ width:10px; height:10px; border-radius:50%; background:#FFAC88; flex:0 0 auto }
.hero{ position:absolute; left:107px; top:494px; width:195px; height:196px; pointer-events:none }
.headset{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center;
  animation:float 11s ease-in-out infinite alternate; will-change:transform }
.spark{ position:absolute; display:block; pointer-events:none }
.spark svg{ display:block; width:100%; height:100% }
.spark-a{ left:-20%; top:-10.7%; width:31.8%; aspect-ratio:1 }
.spark-b{ left:-20%; top:20.9%; width:13.85%; aspect-ratio:1 }
@keyframes float{
  from{ transform:perspective(600px) translate3d(0,-4px,0) rotateY(-2.5deg) rotateX(1.5deg) }
  to{   transform:perspective(600px) translate3d(0,5px,0)  rotateY(2.5deg)  rotateX(-1.5deg) }
}

/* step chrome: Instagram Stories-style segments. Count is the segments, not a label. */
.rail{ position:absolute; left:24px; top:118px; width:327px; height:6px;
  display:flex; gap:4px; align-items:stretch; background:transparent }
.rail .seg{ flex:1; min-width:0; height:6px; border-radius:3px; background:#2A2D3A; overflow:hidden }
.rail .seg i{ display:block; width:0; height:100%; border-radius:3px; background:#7FE0B8 }
.content{ position:absolute; left:12px; top:164px; width:351px;
  display:flex; flex-direction:column; align-items:center; gap:28px }
.content.last{ top:156px; gap:18px }
.instr{ width:327px; font:500 26px/34px "Host Grotesk",sans-serif; letter-spacing:-.4px; color:#fff }
.content.last .instr{ font-size:24px; line-height:32px }
.card{ width:351px; padding:12px; background:#12141C; border:1px solid #2A2D3A; border-radius:20px;
  display:flex; align-items:center; justify-content:center }
/* Size to the Figma box (--imgw). Android source crops are short; give them a
   taller 2:1 frame so the phone UI is not squished. object-fit:fill maps the
   full screenshot into that frame (cover would clip the gear / password eye). */
.card img{ display:block; width:auto; max-width:100%; height:auto; object-fit:contain; border-radius:10px }
.content > .card > img{ width:calc(var(--imgw) * 1px) }
.content > .card > img.android-shot{ aspect-ratio:2 / 1; height:auto; object-fit:fill }
.hshots{ display:flex; flex-direction:column; align-items:center; gap:28px; width:100% }
.hcard{ flex:0 0 auto; width:calc(var(--cw) * 1px); height:calc(var(--ch) * 1px) }
.hcard img{ width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain }
.note{ width:327px; padding:18px; background:#0E1815; border:1px solid #254A3D; border-radius:16px;
  display:flex; flex-direction:column; gap:8px }
.note .nh{ display:flex; align-items:center; gap:8px;
  font:600 16px/22px "Host Grotesk",sans-serif; letter-spacing:-.1px; color:#7FE0B8 }
.note .nb{ font:400 15px/21px "Host Grotesk",sans-serif; letter-spacing:-.1px; color:#C8CAD4 }

/* device selection */
.dhead{ position:absolute; left:24px; top:136px; width:327px;
  font:500 28px/36px "Host Grotesk",sans-serif; letter-spacing:-.6px; color:#fff }
.dcards{ position:absolute; left:24px; top:276px; width:327px;
  display:grid; grid-template-columns:155.5px 155.5px; gap:16px }
.dcard{ height:144px; padding:26px 0; border-radius:20px; background:#161822;
  border:1.25px solid #3A3F52; color:#fff; cursor:pointer;
  font:500 17px/22px "Host Grotesk",sans-serif; letter-spacing:-.2px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:border-color .1s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
  will-change:transform }
@media (hover:hover){
  .dcard:hover{ transform:translateY(-3px); border-color:#7FE0B8;
    box-shadow:0 10px 26px rgba(127,224,184,.16) }
}
.dcard.press{ transform:scale(.975); transition-duration:.09s }
.dcard.sel{ background:#141C22; border-color:#7FE0B8; border-width:2px;
  box-shadow:0 0 24px rgba(127,224,184,.22); font-weight:600; color:#7FE0B8 }
.dcard.sel .lab{ color:#fff }
.dcard:focus-visible{ outline:2px solid #7FE0B8; outline-offset:3px }
.dico{ width:52px; height:52px; overflow:clip; flex:0 0 auto }
.dico img,.dico svg{ width:100%; height:100%; display:block }

/* write it down */
.wcol{ position:absolute; left:24px; top:140px; width:327px; display:flex; flex-direction:column; gap:26px }
.wh{ font:500 28px/36px "Host Grotesk",sans-serif; letter-spacing:-.6px; color:#fff }
.wp{ font:400 18px/28px "Host Grotesk",sans-serif; letter-spacing:-.2px; color:#C8CAD4 }
.prompts{ display:flex; flex-direction:column; gap:16px }
.prompt{ background:#12141C; border:1px solid #2A2D3A; border-radius:20px;
  padding:20px 20px 22px; display:flex; flex-direction:column; gap:18px }
.prompt b{ font:600 17px/22px "Host Grotesk",sans-serif; letter-spacing:-.1px; color:#7FE0B8 }
.prompt span{ border-top:1.5px dashed #3A3D4A; display:block }
.wcap{ font:400 15px/22px "Host Grotesk",sans-serif; color:#8A8D99 }

/* success */
.markwrap{ position:relative; display:flex; align-items:center; justify-content:center }
.sglow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:220px; height:220px; pointer-events:none;
  background:radial-gradient(circle, rgba(127,224,184,.22), transparent 68%) }
.scol{ position:absolute; left:24px; top:203px; width:327px;
  display:flex; flex-direction:column; align-items:center; gap:32px }
.scol.scol-final{ top:334px }
.sh{ font:500 34px/42px "Host Grotesk",sans-serif; letter-spacing:-.8px; color:#fff; text-align:center }
.sp{ font:400 18px/28px "Host Grotesk",sans-serif; letter-spacing:-.2px; color:#C8CAD4; text-align:center }

.again{ position:absolute; left:24px; top:752px; width:327px; text-align:center; background:none; border:0;
  font:500 17px/24px "Host Grotesk",sans-serif; letter-spacing:-.1px; color:#C8CAD4; cursor:pointer;
  padding:8px 0; transition:transform .16s ease, color .2s ease }
@media (hover:hover){ .again:hover{ color:#fff; transform:translateY(-1px) } }
.again.press{ transform:scale(.97); transition-duration:.09s }
.again:focus-visible{ outline:2px solid #7FE0B8; outline-offset:3px }
.mark{ width:120px; height:120px; overflow:clip; animation:pop .6s cubic-bezier(.2,.8,.3,1) both }
.mark .fill{ animation:fade .5s ease-out both }
.mark .ring{ stroke-dasharray:371; stroke-dashoffset:371; animation:draw .75s .05s cubic-bezier(.3,.8,.4,1) forwards }
.mark .check{ stroke-dasharray:60; stroke-dashoffset:60; animation:draw .45s .55s ease-out forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes pop{ from{ opacity:0; transform:scale(.93) } to{ opacity:1; transform:scale(1) } }

/* ---------- one CTA interaction system ---------- */
.cta{ position:absolute; left:24px; top:724px; width:327px; height:56px; border-radius:28px;
  border:0; background:#7FE0B8; color:#05060A; cursor:pointer;
  font:600 18px/24px "Host Grotesk",sans-serif; letter-spacing:-.2px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:transform .16s ease, box-shadow .22s ease, filter .22s ease; will-change:transform }
.cta.navy{ background:#002C8B; color:#fff }
.cta .arw{ display:inline-flex; width:16px; height:16px; overflow:clip; transition:transform .22s ease }
.cta .arw svg{ width:100%; height:100%; display:block }
@media (hover:hover){
  .cta:hover{ transform:translateY(-2px); filter:brightness(1.05);
    box-shadow:0 8px 22px rgba(127,224,184,.30) }
  .cta.navy:hover{ box-shadow:0 8px 22px rgba(0,44,139,.36) }
  .cta:hover .arw{ transform:translateX(4px) }
}
.cta.press{ transform:scale(.97); filter:brightness(.98); box-shadow:none; transition-duration:.09s }
.cta:focus-visible{ outline:2px solid #7FE0B8; outline-offset:3px }
.cta.navy:focus-visible{ outline-color:#002C8B }

#snd{ position:fixed; top:14px; right:14px; z-index:10;
  background:#FBF8F5; color:#16233F; border:1px solid #DCD5CC;
  border-radius:999px; padding:9px 16px; cursor:pointer;
  font:500 12.5px/1 "Host Grotesk",sans-serif; letter-spacing:.02em }
html[data-screen="dark"] #snd{
  background:#161B24; color:#E7EBF2; border-color:#262D3A }
#snd:disabled{ opacity:.55; cursor:not-allowed }
#snd:focus-visible{ outline:2px solid #7FE0B8; outline-offset:2px }

@media (prefers-reduced-motion:reduce){
  .mark,.mark .ring,.mark .check,.mark .fill{
    animation:none !important; stroke-dashoffset:0 !important; opacity:1 !important; transform:none !important }
  .headset,.layer,.star,.amb,.amb2{ animation:none !important }
  .back{ transition:none !important }
  .amb,.amb2{ transform:scale(1.06) !important; opacity:1 !important }
  .star{ opacity:var(--o1) !important }
  .cta,.dcard,.again,.rail .seg i,.cta .arw{ transition:none !important }
  .cta:hover,.dcard:hover,.again:hover,.cta:hover .arw{ transform:none !important }
}

/* ======================= responsive: tablet & desktop =======================
   Phone (<768px) is untouched above. From 768px up the fixed 375x812 stage is
   released and each screen is laid out as a real web page. Same colours, type
   family, motion, and routes throughout. */
@media (min-width:768px){
  body{ align-items:stretch; justify-content:stretch }
  #fit{ transform:none; width:100%; height:100% }
  #screen{ width:100%; height:100%; overflow-y:auto; overflow-x:hidden }

  /* release every phone-absolute rule. .back stays fixed to the stage corner. */
  .rail,.content,.cta,.dhead,.dcards,.wcol,.scol,.again,.wrap,.logo,.hero{
    position:static; left:auto; top:auto; width:auto }

  #screen.device,#screen.write,#screen.success,#screen.final,#screen.welcome{
    display:grid; justify-content:center;
    align-content:center; align-content:safe center;
    padding:clamp(52px,6vh,72px) clamp(28px,5vw,72px) clamp(24px,4vh,54px);
    row-gap:clamp(18px,2.6vh,30px); column-gap:clamp(32px,5vw,72px) }

  /* ---------- guide steps: rail pinned at top, copy starts below it ----------
     Do not justify-center the pane. Two-screenshot headset steps are taller than
     the viewport; center overflow in flex splits above and below, so the heading
     slides up through the sticky rail. */
  #screen.step,#screen.hstep{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap:clamp(16px,2vh,24px);
    padding:clamp(52px,6vh,72px) clamp(28px,5vw,72px) clamp(24px,4vh,54px) }
  .rail{ width:100%; max-width:660px; height:auto; gap:6px; flex:0 0 auto;
    position:sticky; top:0; z-index:2; padding:8px 0 12px }
  /* full-bleed scrim so content scrolling under the bar fades out instead of
     colliding with it. Edgeless, so it never reads as a box over the glow. */
  .rail::before{ content:""; position:absolute; top:0; bottom:0; left:50%; z-index:-1;
    width:100vw; transform:translateX(-50%);
    background:linear-gradient(#0A0C14 55%, rgba(10,12,20,0)) }
  .rail .seg{ height:8px; border-radius:4px }
  .pane{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-start; width:100%; max-width:660px; min-height:min-content;
    gap:clamp(18px,2.6vh,30px) }
  .content{ display:flex; flex-direction:column; align-items:center; width:100%;
    gap:clamp(18px,2.6vh,30px) }
  .content.last{ gap:18px }
  .instr{ width:100%; font-size:30px; line-height:40px; text-align:center;
    text-wrap:pretty; flex:0 0 auto }
  .content.last .instr{ font-size:27px; line-height:36px }
  .card{ width:fit-content; max-width:100%; padding:16px; border-radius:24px;
    flex:0 0 auto; align-self:center }
  .hshots{ width:100% }
  .hcard{ width:min(100%, calc(var(--cw) * 1.15px)); height:auto }
  .content > .card > img{ width:min(calc(var(--imgw) * 1.16px), calc(var(--natw) * 1px));
    max-width:100%; height:auto; max-height:min(56vh,520px);
    object-fit:contain; border-radius:12px }
  .content > .card:has(> img.android-shot){ padding:16px 18px }
  .content > .card > img.android-shot{ width:min(calc(var(--imgw) * 1.45px), 480px);
    max-width:100%; aspect-ratio:2 / 1; height:auto; object-fit:fill;
    max-height:none }
  .hcard img{ max-height:min(56vh,520px) }
  .hshots:has(.hcard:nth-child(2)) .hcard img{ max-height:min(32vh,320px) }
  .note{ width:100%; padding:22px; border-radius:20px }
  .note .nh{ font-size:17px; line-height:24px }
  .note .nb{ font-size:16px; line-height:24px }

  /* ---------- one CTA treatment for every wide layout ---------- */
  .cta{ width:100%; max-width:440px; height:64px; font-size:19px; justify-self:center; flex-shrink:0 }
  .again{ width:auto; font-size:18px; padding:12px 8px; justify-self:center }

  /* ---------- device selection ---------- */
  #screen.device{ grid-template-columns:minmax(0,660px) }
  .dhead{ font-size:34px; line-height:44px }
  .dcards{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px }
  .dcard{ height:180px; gap:20px; font-size:19px; border-radius:24px }
  .dcard svg,.dico{ width:60px; height:60px }

  /* ---------- write it down ---------- */
  #screen.write{ grid-template-columns:minmax(0,660px) }
  .wcol{ width:100%; gap:28px }
  .wh{ font-size:34px; line-height:44px }
  .wp{ font-size:20px; line-height:30px }
  .prompt{ padding:24px 24px 26px; border-radius:24px }
  .prompt b{ font-size:19px; line-height:26px }
  .wcap{ font-size:16px; line-height:24px }

  /* ---------- success + final ---------- */
  #screen.success,#screen.final{ grid-template-columns:minmax(0,620px) }
  .scol{ width:100%; gap:34px }
  .sh{ font-size:40px; line-height:50px }
  .sp{ font-size:20px; line-height:30px }
  .scol .mark{ width:140px; height:140px }
  .sglow{ width:268px; height:268px }

  /* ---------- welcome ---------- */
  #screen.welcome{ grid-template-columns:minmax(0,660px) }
  .logo{ width:118px; height:58px; justify-self:start }
  .wrap{ width:100%; display:flex; flex-direction:column; gap:28px }
  .h1{ font-size:48px; line-height:56px }
  .lead{ font-size:20px; line-height:31px }
  .helper{ font-size:18px; line-height:27px }
  .hero{ position:relative; width:min(100%,300px); height:auto; aspect-ratio:195/196; justify-self:center }
  .cta.navy{ justify-self:start }
}

/* ======================= desktop: wider type, still a centered column ======================= */
@media (min-width:1024px){

  /* keep steps in one centered column so the rail never jumps with copy or image height */
  .rail,.pane{ max-width:800px }
  .instr{ font-size:32px; line-height:42px }
  .content.last .instr{ font-size:30px; line-height:40px }
  .card{ padding:20px }
  .content > .card > img{ width:min(calc(var(--imgw) * 1.35px), calc(var(--natw) * 1px));
    max-height:min(58vh,560px) }
  .content > .card:has(> img.android-shot){ padding:20px 22px }
  .content > .card > img.android-shot{ width:min(calc(var(--imgw) * 1.6px), 540px);
    max-width:100%; aspect-ratio:2 / 1; height:auto; object-fit:fill;
    max-height:none }
  .hcard{ width:min(100%, calc(var(--cw) * 1.35px)); height:auto }
  .hcard img{ max-height:min(58vh,560px) }
  .hshots:has(.hcard:nth-child(2)) .hcard img{ max-height:min(34vh,360px) }
  .cta{ height:66px; font-size:20px }

  /* four devices in one row */
  #screen.device{ grid-template-columns:minmax(0,1040px) }
  .dhead{ text-align:center; font-size:40px; line-height:50px }
  .dcards{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px }
  .dcard{ height:210px; font-size:20px }
  .dcard svg,.dico{ width:68px; height:68px }

  /* write-it-down: the two prompts sit side by side */
  #screen.write{ grid-template-columns:minmax(0,940px) }
  .wh{ font-size:40px; line-height:50px; text-align:center }
  .wp{ font-size:21px; line-height:32px; text-align:center; max-width:70ch; margin-inline:auto }
  .prompts{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
  .wcap{ text-align:center }
  #screen.write .cta{ justify-self:center }

  /* success + final */
  #screen.success,#screen.final{ grid-template-columns:minmax(0,720px) }
  .sh{ font-size:46px; line-height:56px }
  .sp{ font-size:21px; line-height:32px }
  .scol .mark{ width:156px; height:156px }
  .sglow{ width:314px; height:314px }

  /* welcome: copy left, headset right */
  #screen.welcome{
    grid-template-columns:minmax(0,560px) minmax(0,460px);
    grid-template-areas:
      "logo logo"
      "text shot"
      "cta  shot";
    row-gap:34px }
  .logo{ grid-area:logo; width:132px; height:64px }
  .wrap{ grid-area:text; align-self:center }
  .hero{ grid-area:shot; width:min(100%,400px); align-self:center }
  .cta.navy{ grid-area:cta; align-self:start }
  .h1{ font-size:60px; line-height:66px }
  .lead{ font-size:21px; line-height:33px }
  .helper{ font-size:19px; line-height:28px }
}