/* Base: reset, layout helpers and the device layer. Nothing here is page-specific. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; overflow-x: hidden; }
@supports (overflow: clip) { body { overflow-x: clip; } }  /* clip, not hidden: hidden would break position: sticky */
img, svg { max-width: 100%; }
.container, .inner { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.band { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.inner { padding-left: 0; padding-right: 0; max-width: var(--container); }
section[id], div[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--solid); color: var(--ink); padding: 10px 16px; border-radius: 12px; font-weight: 800; border: 2px solid var(--fill); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
/* real mobile height */
.skyhero { min-height: 560px; }
@supports (min-height: 1svh) { .skyhero.tall { min-height: min(88svh, 820px); } }
/* touch screens */
@media (pointer: coarse) {
  .btn, .smallbtn, .chip, .links a, .tabs button, summary, .nav-toggle, .hchip, .rolepills button, .chapter, .rolebtn, .presets button, .cartrow button, .back, .catnav a, .phone select, .phone input, .phone textarea { min-height: 44px; }
  .back { display: inline-flex; align-items: center; } .catnav a { display: inline-flex; align-items: center; }
  .links a { display: inline-flex; align-items: center; }
}
@media (hover: none) { .btn:hover, .card:hover, .pack:hover, .mini:hover, .big:hover { transform: none; filter: none; } }
/* phones sideways */
@media (orientation: landscape) and (max-height: 520px) {
  .skyhero { min-height: 0; padding-top: 28px !important; padding-bottom: 150px !important; }
  .topnav { position: static; }
  .sun, .cloud { display: none; }
}
/* small phones */
@media (max-width: 380px) {
  .btn { padding: 12px 16px; font-size: 14px; }
  .cta-row { width: 100%; }
  .cta-row .btn { flex: 1 1 100%; }
}
/* big monitors */
@media (min-width: 1600px) { :root { --container: 1280px; } html { font-size: 112.5%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }