/* ============================================================
   Barsys 360 — mobile hardening pass (loaded LAST, overrides).
   Targets real phone widths. Fixes: cavernous section rhythm,
   too-tall stacked full-screen scenes, fixed-bar overlap,
   tap targets, and edge padding. Desktop untouched.
   ============================================================ */

/* ---------- fixed bottom bars must not stack on top of each other ---------- */
@media (max-width: 920px){
  /* cookie banner sits ABOVE the sticky buy-bar, full width, reachable */
  #cookies{
    left:12px !important; right:12px !important; max-width:none !important;
    bottom:calc(80px + env(safe-area-inset-bottom)) !important;
  }
  /* buy-bar: comfortable height + tap targets */
  #buybar{padding:.8rem 4vw calc(.8rem + env(safe-area-inset-bottom)) !important;}
  #buybar a,#buybar button{min-height:44px}
}

/* ---------- phone layout ---------- */
@media (max-width: 640px){
  /* kill the horizontal-overflow class of bug defensively */
  html,body{overflow-x:hidden; max-width:100%}

  /* section rhythm: ~100px top+bottom was making the page endless */
  .hl{padding:58px 0 !important}
  .sec{padding:56px 0 !important}
  .sec .intro{margin-bottom:1.6rem !important}
  .premise{padding:64px 22px !important}

  /* stacked full-screen cinematic scenes -> tighter on a phone */
  .hero{min-height:90svh !important}
  .scene{min-height:62svh !important}
  .finale{min-height:auto !important; padding:70px 22px !important}

  /* edge gutters: consistent, never cramped */
  .wrap{padding:0 20px !important}
  .wide{padding:0 20px !important}
  .scene .cap{padding:0 20px 7vh !important}
  .finale .inner{padding:0 20px !important}
  .hero .inner{padding:0 20px 8vh !important}

  /* tap targets for nav + icon buttons */
  .nvic,#lnav .nvic,#navBurger{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* display headings: rein in the largest clamps so nothing feels shouty/cramped */
  .lib .big{font-size:clamp(3.2rem,20vw,5rem) !important; line-height:1.02 !important}
  .premise h2{font-size:clamp(1.7rem,7.4vw,2.4rem) !important}
  .scene .cap h3{font-size:clamp(1.8rem,7.4vw,2.6rem) !important}

  /* the top promo ticker: one tidy line, not a cramped wrap */
  .tick .it{padding:.7rem 1.3rem !important; font-size:.62rem !important; letter-spacing:.12em !important}

  /* roadmap horizontal scroller: snap + a hint it swipes */
  .roadwrap{scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .road>*{scroll-snap-align:start}
}

/* very small phones */
@media (max-width: 380px){
  .hero .k{font-size:.72rem !important; letter-spacing:.16em !important}
  .buyhero h1,.hero h1{letter-spacing:-.02em !important}
}

/* F-13: touch targets */
@media (max-width:920px){.qty button{min-width:44px;min-height:44px}.cardlink{min-height:44px;display:flex;align-items:center;justify-content:center}}

/* J-safearea: keep hero CTA/price above the iOS floating tab bar */
@media (max-width:640px){.hero .inner{padding-bottom:calc(11vh + env(safe-area-inset-bottom)) !important}.hero{min-height:96svh !important}.hero .cue{display:none}}