/* Mobile + touch fixes. Everything is either a no-op on desktop (env() insets are 0) or scoped to
   small screens / touch, so the desktop look is unchanged. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* The tilted marquee and drifting aurora are wider than the screen; body{overflow-x:hidden} alone
   still let phones zoom out / side-scroll. clip on both stops it without creating a scroll container. */
@supports (overflow:clip) { html, body { overflow-x:clip; } }
section { padding-left:max(6vw, env(safe-area-inset-left)); padding-right:max(6vw, env(safe-area-inset-right)); }
footer { padding-left:max(6vw, env(safe-area-inset-left)); padding-right:max(6vw, env(safe-area-inset-right)); padding-bottom:calc(14vh + env(safe-area-inset-bottom)); }
.scroll { bottom:calc(4vh + env(safe-area-inset-bottom)); }
button, .card, kbd { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
@media (hover:none) {
  .cta:hover { transform:none; }
  .tile:hover { box-shadow:none; }
  footer kbd { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:0 4px; cursor:pointer; }
}
@media (max-width:640px) {
  .kicker { font-size:13px; letter-spacing:.35em; }
  .scroll { font-size:14px; }
  .meter label { font-size:16px; letter-spacing:.04em; gap:12px; }
  .meter label span:last-child { white-space:nowrap; }
  .tile { padding:22px; }
  .card { padding:28px 22px; }
}