/* ═══════════════════════════════════════════════════════════════
   SkyMochi Weather — "Dusk"
   Airy twilight redesign. Space Grotesk display over system body.
   Glass cards on a deep navy gradient. Red only for real warnings.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #080c16;
  --bg-hero-1: #0c1526;
  --bg-hero-2: #0a1120;
  --ink: #e8edf8;
  --ink-soft: rgba(232, 237, 248, 0.62);
  --ink-faint: rgba(232, 237, 248, 0.42);
  --glass: rgba(232, 237, 248, 0.05);
  --glass-2: rgba(232, 237, 248, 0.07);
  --stroke: rgba(232, 237, 248, 0.12);
  --stroke-2: rgba(232, 237, 248, 0.18);
  --accent: #7fb2ff;
  --plus: #918ad9;
  --plus-ink: #c3b9ff;
  --plus-stroke: rgba(145, 138, 217, 0.38);
  --danger: #e5372f;
  --danger-ink: #ff8f96;
  --night-1: #1b1440;
  --night-2: #0c0820;
  --night-stroke: rgba(159, 143, 255, 0.25);
  --shell: min(1120px, 92vw);
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection {
  background: rgba(127, 178, 255, 0.32);
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--bg-hero-2);
  padding: 10px 16px;
  border-radius: 99px;
  font-weight: 600;
  text-decoration: none;
  transition: top 200ms var(--ease);
}
.skip-link:focus {
  top: 16px;
}

.shell {
  width: var(--shell);
  margin: 0 auto;
}

/* ── Buttons: light pill on dark ── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms var(--ease), box-shadow 220ms var(--ease),
    background 200ms var(--ease);
}
.button-primary {
  background: var(--ink);
  color: var(--bg-hero-2);
  box-shadow: 0 12px 30px -14px rgba(232, 237, 248, 0.45);
}
.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(232, 237, 248, 0.5);
}
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 0;
  border-bottom: 1px solid transparent;
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}
.site-header.is-scrolled {
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--stroke);
}
.nav-shell {
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}
.nav-links {
  display: flex;
  gap: 30px;
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  transition: color 180ms var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active {
  color: var(--ink);
}

/* ── Hero ── */
.hero {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--bg-hero-1) 0%,
    var(--bg-hero-2) 40%,
    var(--bg) 100%
  );
  text-align: center;
  padding: clamp(56px, 8vw, 88px) 0 0;
  overflow: hidden;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 17px;
  border-radius: 99px;
  background: rgba(232, 237, 248, 0.06);
  border: 1px solid var(--stroke);
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: smPulse 2.4s infinite;
}
@keyframes smPulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(127, 178, 255, 0.5);
  }
  50% {
    opacity: 0.6;
    box-shadow: 0 0 0 6px rgba(127, 178, 255, 0);
  }
}
.hero-title {
  margin: 26px auto 18px;
  max-width: 20ch;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-text {
  margin: 0 auto;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero .store-cta {
  margin-top: 30px;
}
.hero-fine {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Floating phone trio */
.hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  margin-top: 56px;
}
.phone {
  flex: 0 0 auto;
  border-radius: 42px;
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
  padding: 10px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(127, 178, 255, 0.08);
}
.phone .device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  aspect-ratio: 9 / 19.5;
  background: #000;
}
.phone .device-screen img,
.phone .device-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-main {
  width: min(320px, 62vw);
  position: relative;
  z-index: 1;
}
.phone-side {
  width: 280px;
  border-radius: 38px;
  padding: 9px;
  background: var(--glass);
  border-color: var(--stroke);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.phone-side .device-screen {
  border-radius: 30px;
}
.phone-left {
  transform: translateY(40px) rotate(-3deg);
}
.phone-right {
  transform: translateY(40px) rotate(3deg);
}

/* ── Section scaffolding ── */
.section {
  padding: clamp(72px, 9vw, 116px) 0;
}
.section-kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.section-intro {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 56ch;
}
.center .section-title,
.center .section-intro {
  margin-left: auto;
  margin-right: auto;
}
.center {
  text-align: center;
}

/* ── Warning band ── */
.warn-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
  padding: 38px 42px;
  border-radius: 28px;
  background: linear-gradient(
    120deg,
    rgba(229, 55, 47, 0.14),
    rgba(229, 55, 47, 0.06)
  );
  border: 1px solid rgba(229, 55, 47, 0.28);
}
.warn-band .section-kicker {
  color: var(--danger-ink);
}
.warn-title {
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.02em;
}
.warn-text {
  margin-top: 12px;
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 52ch;
}
.warn-classes {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--danger-ink);
  letter-spacing: 0.02em;
}
.warn-band .phone-flat {
  width: 196px;
  border-radius: 30px;
  background: rgba(232, 237, 248, 0.06);
  border: 1px solid var(--stroke);
  padding: 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
}
.phone-flat .device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 23px;
  aspect-ratio: 9 / 19.5;
  background: #000;
}
.phone-flat .device-screen img,
.phone-flat .device-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Feature rows: copy beside a glass media frame ── */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
  padding: clamp(44px, 5.5vw, 70px) 0;
}
.feature-flip .feature-media {
  order: 2;
}
.feature-media {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.feature-points {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.feature-points li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-soft);
  font-size: 15px;
}
.feature-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.feature .phone-flat {
  width: min(250px, 40vw);
  border-radius: 34px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  padding: 9px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.feature .phone-flat .device-screen {
  border-radius: 27px;
}
.media-pair .phone-flat {
  width: min(228px, 36vw);
}

/* ── Statement ── */
.statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1.25;
  text-align: center;
  max-width: 24ch;
  margin: 0 auto;
}
.statement-sub {
  margin: 16px auto 0;
  text-align: center;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* ── Night sky section ── */
.night {
  position: relative;
  border-radius: 32px;
  background: linear-gradient(140deg, var(--night-1), var(--night-2));
  border: 1px solid var(--night-stroke);
  padding: clamp(44px, 5vw, 64px);
  overflow: hidden;
}
.night::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
      1px 1px at 12% 22%,
      rgba(255, 255, 255, 0.5),
      transparent 100%
    ),
    radial-gradient(1px 1px at 34% 68%, rgba(255, 255, 255, 0.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 18%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 72% 52%, rgba(255, 255, 255, 0.3), transparent 100%),
    radial-gradient(1px 1px at 88% 30%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.5px 1.5px at 45% 84%, rgba(255, 255, 255, 0.28), transparent 100%),
    radial-gradient(1px 1px at 8% 76%, rgba(255, 255, 255, 0.32), transparent 100%);
  pointer-events: none;
}
.night-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.night-grid .phone-flat {
  width: min(250px, 60vw);
  border-radius: 34px;
  background: rgba(236, 233, 247, 0.06);
  border: 1px solid rgba(159, 143, 255, 0.28);
  padding: 9px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.night-grid .phone-flat .device-screen {
  border-radius: 27px;
}
/* Two devices in the night column now: the planetarium still and the moon
   scrub. Same flex pair the feature rows use, just narrower per device so the
   two together sit in roughly the width the single phone used to take. The
   selector carries .night-grid so it outranks the single-phone width above,
   which is set at the same specificity and would otherwise win on order. */
.night-media {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.night-grid .night-media .phone-flat {
  width: min(208px, 38vw);
}
.night .section-kicker {
  color: #b9a9ff;
}
.night-cards {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}
.night-card {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(236, 233, 247, 0.05);
  border: 1px solid rgba(159, 143, 255, 0.2);
}
.night-card h3 {
  font-size: 16.5px;
  font-weight: 600;
}
.night-card p {
  margin-top: 6px;
  font-size: 14.5px;
  color: rgba(236, 233, 247, 0.62);
}

/* ── Chips grid (everything else) ── */
.chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.chip {
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
@media (hover: hover) {
  .chip:hover {
    transform: translateY(-3px);
    border-color: var(--stroke-2);
  }
}
.chip-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(127, 178, 255, 0.1);
  border: 1px solid rgba(127, 178, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 14px;
}
.chip-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip h3 {
  font-size: 17.5px;
  font-weight: 600;
}
.chip p {
  margin-top: 7px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ── Free and Plus ──
   Two tiers side by side. Plus carries the visual weight: wider column,
   its own surface and stroke, and the price line. The free tier stays
   quiet but complete, because the safety promise is the point. */
.tiers {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 20px;
  align-items: start;
  margin-top: 44px;
}
.tier {
  padding: clamp(28px, 3vw, 38px);
  border-radius: 26px;
  background: var(--glass);
  border: 1px solid var(--stroke);
}
.tier-plus {
  background: linear-gradient(
      150deg,
      rgba(145, 138, 217, 0.16),
      rgba(145, 138, 217, 0.03) 60%
    ),
    var(--glass-2);
  border-color: var(--plus-stroke);
  box-shadow: 0 30px 70px -40px rgba(145, 138, 217, 0.7);
}
.tier-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tier-plus .tier-name {
  font-size: 24px;
  color: var(--plus-ink);
}
.tier-note {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.tier-plus .tier-note {
  color: var(--ink-soft);
}
.tier-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.tier-list li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--ink-soft);
}
.tier-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.tier-plus .tier-list li {
  color: var(--ink);
}
.tier-plus .tier-list li::before {
  background: var(--plus);
}
.tier-fine {
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── App Store call to action ── */
.store-cta {
  display: flex;
  justify-content: center;
}
.button-store {
  padding: 15px 30px;
  font-size: 15.5px;
}
.close-panel {
  text-align: center;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border-radius: 32px;
  background: linear-gradient(
      160deg,
      rgba(127, 178, 255, 0.1),
      rgba(127, 178, 255, 0.02) 55%
    ),
    var(--glass);
  border: 1px solid var(--stroke);
}
.close-panel .store-cta {
  margin-top: 28px;
}

/* ── Footer ── */
.site-footer {
  border-top: 1px solid var(--stroke);
  padding: 30px 0 40px;
}
.footer-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-size: 13.5px;
  color: var(--ink-faint);
}
.footer-links {
  display: flex;
  gap: 22px;
}
.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--ink);
}

/* ── Video toggle (injected by script.js) ── */
.video-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(8, 12, 20, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease), background 200ms var(--ease);
}
/* Surface the control only when autoplay failed or the user paused. */
.device-screen.needs-tap .video-toggle {
  opacity: 1;
  pointer-events: auto;
}
.video-toggle svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.video-toggle-pause {
  display: none;
}
.device-screen.is-playing .video-toggle {
  opacity: 0;
  pointer-events: none;
}
.device-screen.is-playing:hover .video-toggle,
.video-toggle:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.device-screen.is-playing .video-toggle-play {
  display: none;
}
.device-screen.is-playing .video-toggle-pause {
  display: block;
}

/* ── Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.phone-left.reveal.is-visible {
  transform: translateY(40px) rotate(-3deg);
}
.phone-right.reveal.is-visible {
  transform: translateY(40px) rotate(3deg);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .eyebrow-dot {
    animation: none;
  }
}

/* ── Responsive ── */
@media (max-width: 1000px) {
  .phone-side {
    width: 220px;
  }
  .chips {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .nav-links {
    display: none;
  }
  /* The hero lineup becomes a swipeable deck on mobile: each shot near
     full width and snap-centered, with computed edge guards so every
     phone size shows a clean peek of the neighbors instead of a crop. */
  .hero-phones {
    justify-content: flex-start;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    gap: 12px;
    margin-top: 44px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overflow-y: hidden;
    padding: 10px calc((100vw - min(68vw, 280px)) / 2) 34px;
  }
  .hero-phones::-webkit-scrollbar {
    display: none;
  }
  .phone-side,
  .phone-main {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .phone-side {
    width: min(64vw, 264px);
    padding: 8px;
    border-radius: 36px;
  }
  .phone-side .device-screen {
    border-radius: 29px;
  }
  .phone-main {
    width: min(68vw, 280px);
  }
  .phone-left,
  .phone-left.reveal.is-visible {
    transform: translateY(12px) rotate(-2deg);
  }
  .phone-right,
  .phone-right.reveal.is-visible {
    transform: translateY(12px) rotate(2deg);
  }
  .feature,
  .feature-flip {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .feature-flip .feature-media {
    order: 0;
  }
  .feature-media {
    order: 1;
  }
  .feature .phone-flat {
    width: min(74vw, 300px);
  }
  /* Paired media becomes a large side-by-side swipe deck. touch-action
     locks the gesture to the horizontal axis and snap-stop makes each
     swipe land one card at a time instead of drifting. */
  .feature-media.media-pair {
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overflow-y: hidden;
    padding: 10px 2px 16px;
  }
  .feature-media.media-pair::-webkit-scrollbar {
    display: none;
  }
  .media-pair .phone-flat {
    flex: 0 0 auto;
    width: min(78vw, 310px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .warn-band {
    grid-template-columns: 1fr;
    padding: 30px 26px;
  }
  .warn-band .phone-flat {
    margin: 0 auto;
  }
  .night-grid {
    grid-template-columns: 1fr;
  }
  .tiers {
    grid-template-columns: 1fr;
  }
  .night-grid .phone-flat {
    margin: 0 auto;
  }
  /* The night card is heavily padded, so two devices side by side overrun its
     inner width and the second one gets clipped by the card's own overflow.
     Same fix the chips row uses: an axis-locked swipe deck, one device per
     swipe. .device-swipe is already on the element, so script.js pauses the
     moon clip whenever it is the panel swiped out of view. */
  .night-grid .night-media {
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
  }
  .night-grid .night-media::-webkit-scrollbar {
    display: none;
  }
  .night-grid .night-media .phone-flat {
    flex: 0 0 auto;
    width: min(62vw, 240px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .store-cta .button-store {
    width: 100%;
  }
  .footer-shell {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Chips become a swipeable deck too: axis-locked, one card per swipe. */
  .chips {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    overflow-y: hidden;
    padding: 10px 2px 16px;
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    flex: 0 0 auto;
    width: min(72vw, 300px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}