/* ==========================================================================
   WayLoo "Oura Warm" - homepage
   One idea per screen. Warm sand canvas, night-map hero, soft large radii,
   real app screenshots, one gesture of motion (a calm rise).
   Tokens, header, footer and consent banner live in site.css.
   ========================================================================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type ------------------------------------------------------- */

.display { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.02; letter-spacing: -.02em; }
.display em { font-style: italic; color: var(--teal-700); }
.display--xl { font-size: clamp(3rem, 1.2rem + 7.4vw, 6rem); font-size: clamp(3rem, min(1.2rem + 7.4vw, 9.6svh), 6rem); line-height: .98; letter-spacing: -.025em; }
.display--md { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.01em; }
.on-dark :is(h1, h2, h3) { color: var(--on-night); }
.on-dark .display em { color: var(--amber-500); }

.eyebrow { margin: 0 0 20px; color: var(--teal-700); font: 600 .8125rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow--night { color: var(--teal-300); }

.lead { color: var(--ink-700); font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.45; text-wrap: pretty; }
.on-dark .lead { color: var(--on-night-soft); }

.pill { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 16px 0 14px; border-radius: var(--r-pill); font: 600 .8125rem/1.2 var(--font-body); letter-spacing: .02em; }
.pill--night { background: rgba(244, 241, 236, .08); border: 1px solid rgba(244, 241, 236, .16); color: var(--on-night); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 4px rgba(43, 181, 166, .22); }
.pill__dot--amber { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(242, 165, 69, .22); }

.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; color: var(--ink-900); font-weight: 600; text-decoration: none; transition: color .15s linear; }
.text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.text-link .i { transition: transform .3s var(--ease); }
.text-link:hover .i { transform: translateX(3px); }
.on-dark .text-link { color: var(--on-night); }
.on-dark .text-link:hover { color: var(--teal-300); }

.i { width: 18px; height: 18px; flex: none; }
.i--lg { width: 24px; height: 24px; }

.section-head { max-width: 820px; }
.section-head .lead { margin-top: 22px; max-width: 34em; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

/* ---------- Motion: one calm rise -------------------------------------- */
/* Hidden "before" states exist only under html.js, which home.js sets itself.
   If home.js is blocked or fails, nothing here applies and the page is fully visible. */

@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: hero-rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* a block that receives keyboard focus appears at once, so the focus ring is never drawn on something still faded out */
  .js .reveal:focus-within { opacity: 1; transform: none; transition: none; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Glass chips ------------------------------------------------- */

.glass {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 32px -14px rgba(20, 32, 30, .35);
  color: var(--ink-900);
  font: 600 .875rem/1.2 var(--font-body);
  white-space: nowrap;
}
.glass .i { color: var(--teal-700); }
.on-dark .glass { border-color: rgba(244, 241, 236, .16); background: rgba(12, 26, 36, .56); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .6); color: var(--on-night); }
.on-dark .glass .i { color: var(--teal-300); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, .94); }
  .on-dark .glass { background: rgba(12, 26, 36, .94); }
}

/* ---------- Device frame (CSS only, around the real screenshots) ------- */

.device {
  --w: 300px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * .026);
  border-radius: 16.25% / 7.68%;
  background: linear-gradient(155deg, #3b4046 0%, #15181c 36%, #0a0c0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55), 0 44px 90px -32px rgba(0, 0, 0, .6);
}
.device__screen { position: relative; overflow: hidden; border-radius: 14.5% / 6.67%; aspect-ratio: 1206 / 2622; background: #0d1a3a; }
.device__screen img, .device__screen picture { display: block; width: 100%; height: 100%; }
.device__screen img { object-fit: cover; }
/* Dynamic Island: matches the island baked into the screenshots (same pixels) */
.device__screen::after { content: ""; position: absolute; top: 1.64%; left: 38.1%; width: 23.6%; height: 4.2%; border-radius: 999px; background: #000; }

/* ---------- Hero: night map -------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: max(100svh, 780px);
  padding: var(--header-h) 0 48px;
  overflow: hidden;
  background: var(--night-900);
  color: var(--on-night);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0C1A24;
}
.hero__inner { flex: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 72px); align-items: stretch; }
.hero__copy { align-self: center; max-width: 700px; padding: clamp(16px, 3vh, 48px) 0 clamp(72px, 12vh, 120px); }
.hero__copy .display { margin: 24px 0 26px; }
.display .line { display: block; }
.hero__copy .lead { max-width: 28em; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 38px; }

.hero__stage { --hero-w: clamp(260px, min(27vw, calc((100svh - 150px) * .5)), 470px); position: relative; min-height: 560px; }
.device--hero { --w: var(--hero-w); position: absolute; top: 28px; left: 50%; transform: translateX(-50%); }
.glass--hero-a { left: 0; top: 36%; }
/* Anchored to the phone, not to the stage: the stage height follows the window, the phone
   follows its own width, so a percentage of the stage slid onto the in-phone "Nearest" button
   (about 85% down the phone) at some sizes, and a spot below the phone fell under the sand sheet
   on every standard desktop. The phone is 2.113 times its width tall (screen 1206:2622 plus its
   bezel); 66% of that is where prototype B shows the chip at 1440x900, well above "Nearest" and
   inside the part of the phone that is never covered by the sheet. */
.glass--hero-b { right: 0; top: calc(28px + var(--hero-w) * 2.113 * .66); }

/* ---------- Sheet: sand rises over the night hero ---------------------- */

.sheet { position: relative; z-index: 2; margin-top: -48px; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--canvas); }

/* ---------- Proof ------------------------------------------------------ */

.proof { padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px); }
.proof__head { max-width: 900px; margin: 0 auto; text-align: center; }
.proof__head .lead { margin: 26px auto 0; max-width: 33em; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; list-style: none; border-block: 1px solid var(--hairline); }
.stats li { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(28px, 3vw, 44px) clamp(16px, 2.4vw, 36px) clamp(26px, 3vw, 40px); border-left: 1px solid var(--hairline); }
.stats li:first-child { border-left: 0; padding-left: 0; }
/* Numbers are set in the body grotesk with lining, tabular figures: in the display serif a
   "1" reads like a lowercase "l". Same generous scale, no ambiguity. */
.stats__value { color: var(--ink-900); font: 500 clamp(2.5rem, 1.5rem + 2.5vw, 3.875rem)/1 var(--font-body); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; letter-spacing: -.035em; white-space: nowrap; }
.stats__value .i--star { display: inline-block; width: .56em; height: .56em; margin-left: .04em; color: var(--amber-500); vertical-align: .02em; }
.stats__label { color: var(--ink-500); font-size: .9375rem; line-height: 1.4; }
/* the footnote mark is tiny, so its link gets a 44px hit area from padding; the negative margins keep it sitting exactly where it did */
.fn { margin: 0 -8px 0 -6px; padding: 15px 11px; color: var(--teal-700); font-size: .75em; font-weight: 600; text-decoration: none; vertical-align: super; line-height: 0; }
.fn:hover { text-decoration: underline; }
.footnote { max-width: 760px; margin: 28px auto 0; color: var(--ink-500); font-size: .8125rem; line-height: 1.6; text-align: center; text-wrap: pretty; }

/* ---------- Features: a day with WayLoo -------------------------------- */

.story { padding: clamp(16px, 3vw, 40px) 0 clamp(72px, 9vw, 128px); overflow-x: clip; }
.story .section-head { margin-bottom: clamp(56px, 8vw, 112px); }
.story__row {
  max-width: var(--wrap);
  margin: 0 auto clamp(80px, 11vw, 160px);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 7vw, 112px);
  align-items: center;
}
.story__row:last-child { margin-bottom: 0; }
.story__row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.story__row--flip .story__copy { order: 2; }
.story__copy { max-width: 480px; }
.story__copy .display { margin: 24px 0 22px; }
.story__copy > p:not(.time-chip) { color: var(--ink-700); font-size: 1.125rem; line-height: 1.6; text-wrap: pretty; }

.time-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px 0 14px; border-radius: var(--r-pill); background: var(--card); color: var(--ink-900); font-size: .9375rem; line-height: 1.2; }
.time-chip .i { color: var(--teal-700); }
.time-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.time-chip span { color: var(--ink-500); font-weight: 500; }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.tag-list li { padding: 7px 14px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); color: var(--ink-700); font-size: .875rem; line-height: 1.3; }

/* media panel: bleeds to the viewport edge, only the inner corners are rounded */
.story__media {
  --bleed: calc(-1 * (var(--gutter) + (100vw - min(var(--wrap), 100vw)) / 2));
  --dw: clamp(230px, 22vw, 316px);
  position: relative;
  height: clamp(520px, 47vw, 680px);
  margin-right: var(--bleed);
  overflow: hidden;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.story__row--flip .story__media { margin-right: 0; margin-left: var(--bleed); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.story__media--teal { background: radial-gradient(70% 60% at 22% 8%, rgba(255, 255, 255, .5), transparent 62%), linear-gradient(160deg, #D5E6E0 0%, #BCD6CE 100%); }
.story__media--amber { background: radial-gradient(70% 60% at 78% 8%, rgba(255, 255, 255, .5), transparent 62%), linear-gradient(160deg, #F1E3C9 0%, #E6D0A8 100%); }
.story__media--sand { background: radial-gradient(70% 60% at 22% 8%, rgba(255, 255, 255, .45), transparent 62%), linear-gradient(160deg, #E8E1D4 0%, #D6CCBA 100%); }
.device--row { --w: var(--dw); position: absolute; top: 60px; left: 50%; transform: translateX(-50%); }
.story__media--phone .glass--a { left: 11%; top: 27%; }

/* Sheet cards: the detail and filter sheets are cut straight out of the real screenshots at
   native size, so their text stays readable (>= 12px for the main lines on desktop and
   phone) instead of shrinking to 8px inside a full phone frame. The chips sit in the flow,
   overlapping the card edge a little over empty sheet padding, never over text. */
.story__media--sheet { display: flex; align-items: center; justify-content: center; height: auto; min-height: clamp(520px, 47vw, 680px); padding: clamp(28px, 4vw, 56px) 0; }
.sheet-stack { --sw: clamp(360px, 40vw, 500px); position: relative; display: flex; flex-direction: column; width: min(var(--sw), calc(100% - 16px)); }
.sheet-card { position: relative; margin: 0; overflow: hidden; background: #202022; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 44px 80px -32px rgba(0, 0, 0, .55), 0 14px 32px -14px rgba(0, 0, 0, .35); }
.sheet-card--detail { border-radius: 6.2% / 6.2%; }
.sheet-card--filters { border-radius: 6.2% / 5.4%; }
.sheet-card img { display: block; width: 100%; height: auto; }
.sheet-stack .glass { position: relative; left: auto; right: auto; top: auto; bottom: auto; z-index: 3; }
.sheet-stack .glass--a { align-self: flex-start; margin: 0 0 -12px 20px; }
.sheet-stack .glass--b { align-self: flex-end; margin: -6px 20px 0 0; }
.sheet-card--filters + .glass--b { margin-top: 10px; }

/* ---------- Built together --------------------------------------------- */

.together { padding: 0 0 clamp(72px, 9vw, 128px); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 0; padding: clamp(28px, 3vw, 40px); border-radius: var(--r-lg); background: var(--card); }
.card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 36px; border-radius: 50%; background: var(--canvas); color: var(--teal-700); }
.card__icon .brand-icon { width: 24px; height: 24px; }
.card__title { margin-top: 0; color: var(--ink-900); font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -.01em; }
.card p { max-width: 28em; color: var(--ink-700); font-size: 1rem; line-height: 1.6; }

/* ---------- Pro + offline: the one deep panel -------------------------- */

.pro { padding: 0 0 clamp(72px, 9vw, 128px); }
.pro__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  min-height: 680px;
  padding: clamp(40px, 6vw, 96px) clamp(28px, 6vw, 96px);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--night-900);
}
.pro__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0C1A24;
}
.pro__copy { max-width: 520px; }
.pro__copy .display { margin: 24px 0 20px; }
.checks { display: grid; gap: 12px; margin: 30px 0 34px; padding: 0; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-night); font-size: 1.0625rem; line-height: 1.4; }
.i--check { width: 20px; height: 20px; margin-top: 2px; color: var(--teal-300); }
.pro__media { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; }
.device--pro { --w: clamp(240px, 25vw, 340px); position: absolute; left: 50%; top: 11%; transform: translateX(-42%) rotate(-6deg); transform-origin: 50% 100%; }

/* ---------- Coverage ---------------------------------------------------- */

.cities { padding: 0 0 clamp(72px, 9vw, 128px); }
.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; }
.city-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 360px;
  padding: 30px 28px 26px;
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink-700);
  text-decoration: none;
  transition: background-color .2s linear, transform .35s var(--ease);
}
.city-card:hover { background: var(--sand-deep); transform: translateY(-3px); }
.city-card__pin { width: 14px; height: 14px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 7px rgba(43, 181, 166, .18), 0 0 0 17px rgba(43, 181, 166, .09); }
.city-card__pin--amber { background: var(--amber-500); box-shadow: 0 0 0 7px rgba(242, 165, 69, .22), 0 0 0 17px rgba(242, 165, 69, .1); }
.city-card__coords { margin-top: auto; color: var(--ink-500); font: 600 .75rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.city-card__name { margin-top: 14px; color: var(--ink-900); font: 400 clamp(2.25rem, 1.7rem + 1.3vw, 2.75rem)/1 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.city-card__region { margin-top: 8px; color: var(--ink-500); font-size: .9375rem; }
.city-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-wrap: balance; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--hairline); color: var(--ink-900); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.city-card__arrow { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--hairline-strong); border-radius: 50%; transition: background-color .2s linear, color .2s linear, border-color .2s linear; }
.city-card:hover .city-card__arrow { border-color: var(--teal-500); background: var(--teal-500); color: var(--teal-ink); }

/* ---------- FAQ ---------------------------------------------------------- */

.faq { padding: 0 0 clamp(72px, 9vw, 128px); }
.faq__inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 32px); }
.faq__list { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-md); background: var(--card); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; padding: 14px 28px; color: var(--ink-900); font: 600 1.125rem/1.3 var(--font-body); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: linear-gradient(var(--ink-900), var(--ink-900)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink-900), var(--ink-900)) center / 1.5px 12px no-repeat;
  transition: transform .35s var(--ease), background-color .2s linear;
}
.faq summary:hover::after { background-color: rgba(42, 39, 35, .06); }
.faq details[open] summary::after { background: linear-gradient(var(--ink-900), var(--ink-900)) center / 12px 1.5px no-repeat; transform: rotate(180deg); }
.faq details p { max-width: 58ch; padding: 0 28px 28px; color: var(--ink-700); font-size: 1.0625rem; line-height: 1.65; }
.faq summary:focus-visible { outline-offset: -4px; border-radius: var(--r-md); }
.faq details a { color: var(--teal-700); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Community links --------------------------------------------- */

.community { padding: 0 0 clamp(88px, 10vw, 144px); }
.community__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.community__grid li { display: flex; }
.card--link { width: 100%; min-height: 330px; color: var(--ink-700); text-decoration: none; transition: background-color .2s linear, transform .35s var(--ease); }
.card--link:hover { background: var(--sand-deep); transform: translateY(-3px); }
.card--link .card__icon { color: var(--ink-900); }
.card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; color: var(--ink-900); font-weight: 600; }
.card__link .i { transition: transform .3s var(--ease); }
.card--link:hover .card__link .i { transform: translateX(3px); }
.card--amber { background: var(--amber-100); }
.card--amber:hover { background: #EFD9B1; }

/* ---------- Download: closing night ------------------------------------- */

.download {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  padding-top: clamp(72px, 9vw, 136px);
  border-radius: var(--r-xl);
  background: var(--night-900);
  color: var(--on-night);
}
.download__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0C1A24;
}
.download__inner { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.download__copy { align-self: center; max-width: 580px; padding-bottom: clamp(72px, 9vw, 136px); }
.download__copy .display { margin-bottom: 22px; }
.download__copy .store-links { margin-top: 34px; }
.download__stage { position: relative; min-height: 520px; }
.device--dl { position: absolute; }
/* The centre phone is cut right after the "Status is based on listed hours" line, between
   two lines of the sheet, so no word is sliced. The two side phones only rise as far as the
   map: the section edge cuts them above the sheet, so no text is sliced there either. */
.device--dl-c { --w: clamp(210px, 21vw, 290px); z-index: 3; left: 50%; bottom: calc(var(--w) * -.31); transform: translateX(-50%); }
.device--dl-l { --w: clamp(140px, 14vw, 196px); z-index: 2; left: 2%; bottom: calc(var(--w) * -1.2); transform: rotate(-7deg); transform-origin: 50% 100%; opacity: .96; }
.device--dl-r { --w: clamp(140px, 14vw, 196px); z-index: 2; right: 2%; bottom: calc(var(--w) * -1.2); transform: rotate(7deg); transform-origin: 50% 100%; opacity: .96; }

/* the footer tucks under the curve of the download panel */
.home .site-footer { margin-top: -48px; padding-top: calc(48px + 80px); }

/* ---------- Tablet ------------------------------------------------------ */

@media (max-width: 1100px) {
  .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-card { min-height: 300px; }
  .stats__value { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem); }
}

@media (max-width: 960px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__copy { padding: 40px 0 24px; max-width: 640px; }
  .hero__copy .display { max-width: 10em; }
  .hero__stage { min-height: 0; height: clamp(420px, 78vw, 560px); margin-top: 8px; }
  .device--hero { --w: clamp(250px, 44vw, 340px); top: 0; }
  .glass--hero-a { left: max(0px, calc(50% - 300px)); }
  .glass--hero-b { right: max(0px, calc(50% - 300px)); top: auto; bottom: 30%; }
  .sheet { margin-top: -40px; }

  .story__row, .story__row--flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .story__row--flip .story__copy { order: 0; }
  .story__copy { max-width: 560px; }
  .story__media, .story__row--flip .story__media { margin: 0; height: clamp(460px, 90vw, 620px); border-radius: var(--r-lg); }
  .story__media--sheet, .story__row--flip .story__media--sheet { height: auto; min-height: 0; }
  .sheet-stack { --sw: clamp(360px, 64vw, 500px); }
  .story__media { --dw: clamp(240px, 44vw, 300px); }

  .trio, .community__grid { grid-template-columns: minmax(0, 1fr); }
  .card, .card--link { min-height: 0; }
  .card__icon { margin-bottom: 8px; }
  .card__title { margin-top: 12px; }
  .card__link { margin-top: 8px; }

  .pro__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 48px 28px 0; }
  .pro__media { position: relative; width: 100%; height: clamp(380px, 80vw, 520px); margin-top: 32px; }
  .device--pro { --w: clamp(230px, 46vw, 310px); top: 6%; transform: translateX(-50%) rotate(-5deg); }

  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq__head { position: static; }

  .download__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .download__copy { padding-bottom: 40px; }
  .download__stage { min-height: 0; height: clamp(380px, 80vw, 500px); }
  .device--dl-c { --w: clamp(200px, 40vw, 270px); }
  .device--dl-l { --w: clamp(130px, 27vw, 190px); left: 2%; }
  .device--dl-r { --w: clamp(130px, 27vw, 190px); right: 2%; }
}

/* ---------- Phone ------------------------------------------------------- */

@media (max-width: 640px) {
  .hero__copy { padding-top: 44px; }
  .hero__copy .lead { max-width: 24em; }
  .hero__actions { margin-top: 28px; }
  .hero .store-links { width: 100%; gap: 10px; }
  .hero .store-link { flex: 1 1 0; padding: 0 14px; gap: 8px; }
  .hero .store-link__platform { display: none; }
  .hero__stage { height: 430px; }
  .device--hero { --w: min(62vw, 250px); }
  .glass { padding: 8px 14px 8px 10px; font-size: .8125rem; }
  .glass--hero-a { left: 0; top: 22%; }
  .glass--hero-b { right: 0; top: auto; bottom: 34%; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { padding: 26px 16px 24px; }
  .stats li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats li:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .stats__value { font-size: clamp(2.25rem, 10vw, 2.875rem); }

  /* story panels run edge to edge on phones so the sheet cards can use the full width */
  .story__media, .story__row--flip .story__media { --dw: clamp(236px, 64vw, 288px); height: calc(48px + var(--dw) * 2.06); margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .story__media--sheet, .story__row--flip .story__media--sheet { height: auto; padding: 32px 0 36px; }
  .device--row { top: 48px; }
  /* on phones one chip floats over the map area; the sheet stays unobstructed */
  .story__media--phone .glass--b { display: none; }
  .story__media--phone .glass--a { left: 4%; top: 21%; }
  .sheet-stack .glass--a { margin-left: 12px; }
  .sheet-stack .glass--b { margin-right: 12px; }

  .city-grid { grid-template-columns: minmax(0, 1fr); }
  .city-card { min-height: 280px; }

  .pro__panel { border-radius: var(--r-lg); padding: 40px 22px 0; }
  .faq summary { min-height: 68px; padding: 12px 20px; font-size: 1.0625rem; }
  .faq details p { padding: 0 20px 24px; }

  .download { border-radius: var(--r-lg); }
  .home .site-footer { margin-top: -32px; padding-top: calc(32px + 56px); }
  .download__stage { height: 420px; }
  .download .store-links { width: 100%; }
  .download .store-link { flex: 1 1 0; padding: 0 14px; gap: 8px; }
  .download .store-link__platform { display: none; }
}

@media (max-width: 380px) {
  .glass--hero-b { display: none; }
  .tag-list li { padding: 6px 12px; }
}

/* short phones (a 375x667 screen, or any phone once the browser toolbars take their share of the
   height): the consent sheet covers the lower part of the screen, so the badge goes and the
   headline moves up to keep the store buttons above it */
@media (max-width: 640px) and (max-height: 760px) {
  .hero__copy { padding-top: 24px; }
  .hero__copy .pill { display: none; }
  .hero__copy .display { margin: 0 0 18px; font-size: 2.75rem; }
  .hero__copy .lead { font-size: 1rem; }
  .hero__actions { margin-top: 24px; }
}

/* short laptop screens: keep the store buttons above the consent card */
@media (min-width: 961px) and (max-height: 800px) {
  .hero__copy .pill { display: none; }
  .hero__copy .display { margin: 0 0 20px; }
  .hero__copy .lead { font-size: 1.125rem; max-width: 32em; }
  .hero__actions { margin-top: 26px; }
}

/* ---------- Reduced motion: no movement at all, content fully visible ---- */

@media (prefers-reduced-motion: reduce) {
  .hero-in, .reveal { animation: none; opacity: 1; transform: none; filter: none; }
  .city-card:hover, .card--link:hover { transform: none; }
  .text-link:hover .i, .card--link:hover .card__link .i { transform: none; }
  .faq details[open] summary::after { transform: none; }
}

/* ---------- Print / save as PDF: reveal blocks start transparent, so show everything ---------- */
@media print {
  .js .reveal, .hero-in { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; transition: none !important; }
}