/* =====================================================================
   Mobile pass — loaded last on every page. Nothing here applies above
   900px, so the desktop site is untouched.
   ===================================================================== */

/* ---------- header: identical on every page ----------
   logo on the left · light/dark, menu dots and Sign up on the right,
   all vertically centred in one 64px bar with even 16px side margins. */
@media (max-width:900px){
  :root{--hdr:64px}
  header.top .wrap.topbar{
    height:var(--hdr);max-width:none;
    padding-left:16px;padding-right:16px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
  }
  header.top .brand-cluster{flex:0 1 auto;min-width:0;gap:0}
  header.top .logo{display:inline-flex;align-items:center;height:var(--hdr)}
  /* the logo is always there on phones (the fly-in is a desktop effect) */
  header.top .logo .logo-mark{height:22px;opacity:1!important;transition:none}
  /* home page: the logo arrives by flying up out of the pharmacy doorway, as on desktop */
  html[data-route="/"] header.top .logo:not(.shown) .logo-mark{opacity:0!important}
  #flyLogo{display:block!important}
  header.top .top-actions{flex:0 0 auto;display:flex;align-items:center;gap:2px;margin:0}
  header.top .top-actions .btn-signin{display:none}
  header.top .icon-btn.plain{width:40px;height:40px}
  header.top .menu-toggle{width:40px;height:40px;padding:0}
  header.top .menu-toggle .bars{width:16px;height:16px}
  header.top .menu-toggle .bars i{width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
  header.top .top-actions .btn-primary{
    height:38px;padding:0 16px!important;margin-left:6px;
    font-size:.88rem;border-radius:11px;
  }
  /* the dots menu opens under the bar, aligned to the right edge, never off screen */
  header.top .top-actions .menu-panel{
    position:fixed;top:calc(var(--hdr) + 6px);right:12px;left:auto;
    width:min(280px,calc(100vw - 24px));min-width:0;transform:translateY(-6px);
  }
  header.top .top-actions .menu-wrap:hover .menu-panel,
  header.top .top-actions .menu-panel.open{transform:translateY(0)}
  /* everything that sits under the bar */
  .sv-pin,.service-bundle .sv-scroll .sv-pin{top:var(--hdr)}
}
@media (max-width:360px){
  header.top .wrap.topbar{padding-left:12px;padding-right:12px}
  header.top .logo .logo-mark{height:20px}
  header.top .top-actions .btn-primary{padding:0 13px!important}
}

/* ---------- background glow: a soft accent, not a wash ---------- */
@media (max-width:900px){
  :root,:root[data-theme]{
    --blob-size:260px;
    --blob-blur:60px;
    --blob-cyan-opacity:.13;
  }
  :root[data-theme="light"]{--blob-ink-opacity:.12}
}

/* ---------- rhythm: even spacing, no screens of empty space ---------- */
@media (max-width:900px){
  .wrap{padding-left:20px;padding-right:20px}
  section.band{padding:56px 0}
  section.band.first{padding-top:28px}
  .hero{padding:36px 0 40px!important}
  .hero-grid{gap:32px}
  .sec-head{margin-bottom:28px}
  .beat{padding:32px 0}
  /* text first, then the drawing it describes */
  .beat .txt{order:0}
  .beat > :not(.txt){order:1}

  /* typed one-liners: each gets a full screen of its own, centred */
  .oneliner .ol-pin,
  .prevent-intro .pi-pin{
    min-height:calc(100svh - var(--hdr));padding:0;
    display:flex;align-items:center;
  }
  html[data-route="/"] section.band.prevent-intro{padding:0}

  /* type that reads comfortably at arm's length */
  h1,.hero-grid h1,.say-grid h1{font-size:clamp(2.3rem,10.5vw,3rem);line-height:1.04;letter-spacing:-.04em}
  .sec-head h2,section h2{font-size:clamp(1.75rem,7.6vw,2.2rem);line-height:1.08}
  .beat .bt,.bs-txt h3,.sv-panel h3{font-size:clamp(1.35rem,6vw,1.65rem);line-height:1.15}
  .lede,.hero-grid .lede,.say-grid .lede{font-size:1.06rem;line-height:1.6}
  .beat p,.bs-txt p,.sv-panel p,.sec-head p{font-size:1rem;line-height:1.6}

  /* drawings use the full width */
  .micro,.ns-api,.rp-remote,.pa-activate{width:100%;max-width:none;padding:0;margin:0 auto}
  .micro .cap{font-size:.86rem}

  /* buttons: full-width pair, easy to tap */
  .btn-row{gap:10px}
  .hero .btn-row .btn,.say-grid .btn-row .btn{flex:1 1 auto;justify-content:center;min-height:48px}
  .cta-band{padding:32px 24px;grid-template-columns:1fr;gap:20px}
  .cta-band .btn{min-height:48px}

  /* left-aligned body copy reads better than centred paragraphs on a phone */
  .cx-band .sec-head,.cx-band .sec-head p{text-align:left!important;margin-left:0!important}
}

/* ---------- "Telemedicine as a service": three stacked frames on phones ----------
   The pinned, scroll-driven slideshow becomes a plain list: each drawing
   with its text underneath. The drawings still play when on screen. */
@media (max-width:900px){
  .service-bundle .sv-scroll{height:auto!important}
  .service-bundle .sv-scroll .sv-pin{position:static;height:auto!important;display:block;cursor:auto}
  .service-bundle .sv-head{margin-bottom:8px}
  .service-bundle .sv-body{display:grid;grid-template-columns:1fr;gap:0}
  .service-bundle .sv-stage,
  .service-bundle .sv-copy,
  .service-bundle .sv-slides{display:contents}
  .service-bundle .sv-frame{
    position:relative;inset:auto;opacity:1!important;transform:none!important;
    aspect-ratio:220/132;width:100%;margin-top:18px;transition:none;
  }
  .service-bundle .sv-frame svg{width:100%;height:100%}
  .service-bundle .sv-panel{
    position:relative;inset:auto;opacity:1!important;transform:none!important;
    pointer-events:auto;transition:none;margin-top:44px;
  }
  .service-bundle .sv-frame[data-frame="0"]{order:2}
  .service-bundle .sv-panel[data-slide="0"]{order:1}
  .service-bundle .sv-frame[data-frame="1"]{order:4}
  .service-bundle .sv-panel[data-slide="1"]{order:3}
  .service-bundle .sv-frame[data-frame="2"]{order:6}
  .service-bundle .sv-panel[data-slide="2"]{order:5}
  .service-bundle .sv-bar{display:none}
  .service-bundle .sv-cta{margin-top:14px}
}

/* ---------- "How it works" tabs: fit the screen, no clipped labels ---------- */
@media (max-width:900px){
  .pov-tabs{display:flex;width:100%;overflow:visible}
  .pov-tabs button{flex:1 1 0;min-width:0;padding:10px 6px;font-size:.84rem;white-space:nowrap;text-align:center}
}

/* ---------- footer: two columns of links instead of one long list ---------- */
@media (max-width:900px){
  footer{padding:40px 0 28px}
  .foot{grid-template-columns:1fr 1fr!important;gap:28px 20px}
  .foot > div:first-child{grid-column:1 / -1}
  .foot-base{margin-top:28px;flex-direction:column;gap:6px}
}

/* ---------- header bar: solid enough that page content never shows through the logo ---------- */
@media (max-width:900px){
  [data-theme="light"] header.top,[data-theme="light"] header.top.clear{
    background:rgba(250,250,250,.96);
    backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
    box-shadow:0 1px 0 rgba(10,13,18,.06);
  }
  [data-theme="dark"] header.top,[data-theme="dark"] header.top.clear{
    background:rgba(0,0,0,.94);
    backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
    box-shadow:0 1px 0 rgba(255,255,255,.06);
  }
}

/* ---------- For pharmacies: the $10 leads its section on phones too ---------- */
@media (max-width:900px){
  .beat.beat-price .txt{order:0}
  .beat.beat-price .micro{order:1}
}

/* ---------- home opening on phones: a shorter scroll, no gap before the first headline ---------- */
@media (max-width:900px){
  .hero-full{height:150svh}
  .hero-say{padding:28px 0 48px!important;min-height:0!important}
}

/* ---------- footer wordmark: big and clearly there on phones ---------- */
@media (max-width:900px){
  .foot-mark{
    margin:32px -6px -28px;padding:0;
    --foot-mark-crop:18%;
  }
  .foot-mark{--foot-mark-opacity:.32}
  [data-theme="light"] .foot-mark{--foot-mark-opacity:.45}
}

/* ---------- home opening: the doorway wordmark in dark mode ----------
   An SVG colour matrix (works in Safari) instead of a CSS filter, which
   Safari ignores on SVG images. */
.door-logo{filter:none}
[data-theme="dark"] .door-logo{filter:url(#doorLogoDark)}
/* the doorway wordmark's clipping box must clip (other rules set every svg here to overflow:visible) */
#doorLogoMask{overflow:hidden!important}

/* ---------- home: an unmissable scroll prompt on phones ----------
   A Scriptify-blue pill at the bottom of the opening screen with a
   bouncing arrow and a soft pulse; tapping it scrolls in too. */
@media (max-width:900px){
  .door-stage .scroll-cue{
    display:flex!important;align-items:center;gap:10px;
    position:absolute;left:0;right:0;margin:0 auto;width:max-content;
    transform:none;
    bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    padding:15px 24px 15px 26px;border-radius:999px;
    background:transparent;color:var(--cyan-deep);
    border:0;
    font-size:1.12rem;font-weight:700;letter-spacing:-.01em;
    box-shadow:none;
    pointer-events:auto;cursor:pointer;z-index:5;
    animation:cueFloat 2s ease-in-out infinite;
    -webkit-tap-highlight-color:transparent;
  }
  .door-stage .scroll-cue span{animation:none;opacity:1;font-weight:700}
  [data-theme="dark"] .door-stage .scroll-cue{color:var(--cyan)}
  .door-stage .scroll-cue svg{width:22px;height:22px;stroke-width:2.6;animation:cueBob 1.2s ease-in-out infinite}
  .door-stage .scroll-cue::after{content:none}
  .hero-full.flying .door-stage .scroll-cue{opacity:0;pointer-events:none;animation:none}
}
@keyframes cueFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cueRing{0%{box-shadow:0 0 0 0 rgba(34,184,232,.55)}80%,100%{box-shadow:0 0 0 16px rgba(34,184,232,0)}}
@media (prefers-reduced-motion:reduce){
  .door-stage .scroll-cue,.door-stage .scroll-cue svg,.door-stage .scroll-cue::after{animation:none!important}
}