/* Landing page. Sections, top to bottom: nav, hero, how, modes, tune, more,
   trust, langs, faq, join, footer. Layout families differ per section on purpose. */

/* ---------- Shared pieces ---------- */

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}

/* Phone: an unedited app capture inside a plain bezel. Upright, no tilt, no
   reflections. Corner radii follow the iPhone 16 Pro display (55 pt on 402 x 874). */
.phone {
  position: relative;
  width: 100%;
  padding: 3%;
  border-radius: 16.5% / 7.6%;
  background: #0d0d0e;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 0 0 3px #000,
    var(--shadow-lg);
}
.phone img,
.phone video {
  width: 100%;
  height: auto;
  border-radius: 13.7% / 6.3%;
  background: #000;
}
.phone video { aspect-ratio: 600 / 1304; object-fit: cover; }
.phone-stack { display: grid; }
.phone-stack > * {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.55s var(--ease), transform 0.8s var(--ease);
}
.phone-stack > .is-active { opacity: 1; transform: none; }

/* Segmented control, drawn like the app's (Controls.tsx): a sunken track and
   one raised segment that slides to the choice. */
.seg {
  --pad: 3px;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: var(--pad);
  border-radius: 11px;
  background: var(--seg-track);
  isolation: isolate;
}
.seg button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.seg button[aria-selected="true"],
.seg button[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.seg button:hover { color: var(--ink); }
.seg button:focus-visible { outline-offset: -2px; border-radius: 8px; }
.seg .i { width: 18px; height: 18px; }
.seg-thumb {
  position: absolute;
  z-index: 0;
  top: var(--pad);
  bottom: var(--pad);
  left: 0;
  width: var(--w, 0px);
  transform: translateX(var(--x, 0px));
  border-radius: 8px;
  background: var(--seg-thumb);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}
.no-anim .seg-thumb { transition: none; }


/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), backdrop-filter 0.5s;
}
.nav.is-solid {
  background: var(--glass);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-solid { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav-inner {
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gx);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-links {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-links a { padding: 8px 2px; transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-menu {
  display: none;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--tint);
}
.nav-sheet { display: none; }
/* Day / Night: one switch, drawn as a small sky. The sun sets below its bottom edge
   while the moon rises; then the other way round. Pure CSS, keyed to data-theme. */
.sky {
  position: relative;
  flex: none;
  width: 62px;
  height: 34px;
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #6fb1f0 0%, #b9dcfb 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s var(--ease);
  view-transition-name: sky;   /* kept out of the page cross-fade so its own motion shows */
  -webkit-tap-highlight-color: transparent;
}
.sky::before {                 /* the night sky, faded over the day one */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #0a1430 0%, #22315c 100%);
  opacity: 0;
  transition: opacity 0.8s var(--ease-in-out);
}
.sky:hover { transform: scale(1.04); }
.sky:active { transform: scale(0.97); }
.sky:focus-visible { outline-offset: 3px; }
.sky-sun,
.sky-moon { position: absolute; top: 8px; width: 18px; height: 18px; border-radius: 50%; }
.sky-sun {
  left: 10px;
  background: radial-gradient(circle at 38% 36%, #fff6d2 0%, #ffd45c 52%, #f6ad2e 100%);
  box-shadow: 0 0 10px 2px rgba(255, 205, 90, 0.55);
  transition: transform 0.6s var(--ease) 0.2s;           /* rising: after the moon has gone */
}
.sky-moon {
  right: 10px;
  background: radial-gradient(circle at 60% 40%, #ffffff 0%, #e4e9f5 70%, #c9d1e4 100%);
  -webkit-mask: radial-gradient(circle at 76% 28%, transparent 0 46%, #000 47%);
          mask: radial-gradient(circle at 76% 28%, transparent 0 46%, #000 47%);
  transform: translate(-4px, 30px);                       /* below the horizon by day */
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0);
}
.sky-stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.sky-stars i:nth-child(1) { left: 12px; top: 9px; }
.sky-stars i:nth-child(2) { left: 22px; top: 19px; width: 1.5px; height: 1.5px; }
.sky-stars i:nth-child(3) { left: 30px; top: 7px; width: 1.5px; height: 1.5px; }
:root[data-theme="dark"] .sky { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .sky::before { opacity: 1; }
:root[data-theme="dark"] .sky-sun {
  transform: translate(6px, 30px);                        /* sets first */
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0);
}
:root[data-theme="dark"] .sky-moon { transform: none; transition: transform 0.6s var(--ease) 0.2s; }
:root[data-theme="dark"] .sky-stars i { opacity: 0.9; }
:root[data-theme="dark"] .sky-stars i:nth-child(1) { transition-delay: 0.35s; }
:root[data-theme="dark"] .sky-stars i:nth-child(2) { transition-delay: 0.5s; }
:root[data-theme="dark"] .sky-stars i:nth-child(3) { transition-delay: 0.62s; }
::view-transition-old(sky) { display: none; }
::view-transition-new(sky) { animation: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.8s; animation-timing-function: var(--ease-in-out); }
/* Without JavaScript the page follows the system and the switch could do nothing. */
html:not(.js) .sky { display: none; }

/* ---------- Hero ---------- */

/* Phones, tablets and portrait screens: words, then the place in its own 3:2 frame
   (never cropped), then the story sheet. Wide screens: the place fills the hero and
   the words and sheet sit over its calm side (see the media query below). */
.hero { padding: calc(var(--nav-h) + clamp(16px, 3.2vh, 44px)) 0 clamp(8px, 2vw, 24px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.hero-side { display: grid; gap: 22px; justify-items: start; }
.hero-sub { max-width: 34ch; color: var(--ink-2); font-size: clamp(1.125rem, 0.95rem + 0.45vw, 1.375rem); line-height: 1.4; }
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;   /* descenders of y, p, g inside the clipping line */
  margin-bottom: -0.1em;
}
.hero-line > span { display: block; }

.hero-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--media-bg);
}
.hero-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-in-out); }
.hero-photo.is-active { opacity: 1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* A hairline on every framed photo, so a bright sky never melts into a light page
   (and a night sky into a black one). Drawn over the photo, never a shadow under it. */
.hero-frame::after,
.local-photo picture::after,
.mode-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--edge);
}

.hero-sheet {
  display: grid;
  border-radius: var(--r-media);
  background: var(--card);
  overflow: hidden;
}
@media (min-width: 640px) {
  /* the sheet's player and place list side by side */
  .hero-sheet { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .places-wrap { border-top: 0; border-left: 1px solid var(--sep); }
}

/* Wide, landscape screens: the place is the whole hero. Its picture is composed with
   calm sky on the left for the words and calm ground at the bottom for the sheet, so
   nothing important is ever covered. A soft wash in the page colour keeps the words
   readable on any picture; it is not a dark scrim. */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .hero {
    position: relative;
    display: flex;
    min-height: max(640px, 100svh);
    padding: calc(var(--nav-h) + clamp(16px, 6vh, 96px)) 0 clamp(20px, 4vh, 48px);
    isolation: isolate;
  }
  .hero-grid {             /* not positioned: the picture belongs to the whole hero */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 24px;
    row-gap: clamp(20px, 3vh, 30px);
    align-items: start;
  }
  .hero-title { grid-column: 1 / 9; }
  .hero-line > span { white-space: nowrap; }
  .hero-title { font-size: clamp(2.75rem, min(1.25rem + 4vw, 8.4vh, (min(100vw, var(--max)) - 2 * var(--gx)) * 0.62 / 12.4), 5.25rem); }
  .hero-side { grid-column: 1 / 7; gap: 20px; }
  .hero-sub { max-width: 40ch; color: var(--ink); }      /* over a picture: full ink, never grey */
  .hero-frame {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .hero-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 52% 46% at 16% 26%, color-mix(in srgb, var(--bg) 58%, transparent), transparent 72%),
      radial-gradient(ellipse 46% 34% at 18% 92%, color-mix(in srgb, var(--bg) 34%, transparent), transparent 70%);
  }
  .hero-frame::after { display: none; }
  .hero-photo img { object-position: var(--focus, 50% 50%); }
  .hero-sheet {
    grid-column: 1 / 8;
    align-self: end;
    width: min(100%, 640px);
    background: color-mix(in srgb, var(--card) 84%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(22px);
            backdrop-filter: saturate(160%) blur(22px);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--edge);
  }
}
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) and (prefers-reduced-transparency: reduce) {
  .hero-sheet { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.listen { display: grid; gap: 14px; padding: 20px 20px 18px; }
.listen-head { display: flex; align-items: center; gap: 16px; }
.listen-btn {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.listen-btn:hover { background: var(--primary-hover); }
.listen-btn:active { transform: scale(0.94); }
.listen-btn:focus-visible { border-radius: 50%; outline-offset: 8px; }
.listen-btn .i { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity 0.2s, transform 0.3s var(--ease); }
.listen-btn .i-play { transform: translateX(1px); }
.listen-btn .i-pause { opacity: 0; transform: scale(0.6); }
.listen.is-playing .i-play { opacity: 0; transform: scale(0.6); }
.listen.is-playing .i-pause { opacity: 1; transform: none; }
.listen-ring {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 70px;
  height: 70px;
  max-width: none; /* base.css caps svg at 100%, which shrank and shifted the ring */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.listen-ring circle {
  fill: none;
  stroke: var(--green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--p, 0) 100;
  opacity: 0;
  transition: opacity 0.3s;
}
.listen.is-playing .listen-ring circle,
.listen.is-paused .listen-ring circle { opacity: 1; }
.listen-meta { display: grid; gap: 2px; min-width: 0; }
.listen-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.listen-sub { font-size: 0.9375rem; color: var(--ink-3); font-weight: 450; }
.listen-state { display: inline-flex; align-items: center; gap: 7px; transition: color 0.3s; }
.listen-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: none; }
.listen.is-playing .listen-state { color: var(--green-ink); }
.listen.is-playing .listen-state::before { display: inline-block; animation: live 1.6s var(--ease-in-out) infinite; }
@keyframes live { 50% { opacity: 0.35; } }

.captions {
  min-height: calc(3 * 1.36em); /* steady card height whatever the cue */
  font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.3125rem);
  line-height: 1.36;
  font-weight: 500;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-wrap: pretty;
}
.captions .w { opacity: 0.3; transition: opacity 0.28s linear; }
.captions .w.on { opacity: 1; }
.captions.is-idle .w { opacity: 0.9; }
.captions.swap { animation: cue-in 0.5s var(--ease) both; }
@keyframes cue-in { from { opacity: 0; transform: translateY(6px); } }
.listen-more { justify-self: start; }
.listen-more.is-invite { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.listen-more.is-invite:hover { background: var(--primary-hover); }

/* The places: a list like the app's Around you. */
.places-wrap { padding: 2px 8px 10px; border-top: 1px solid var(--sep); display: grid; align-content: start; gap: 0; }
.places-label { padding: 12px 12px 4px; color: var(--ink-3); }
.places { display: grid; gap: 2px; }
.places button {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border-radius: 10px;
  text-align: left;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.places button:hover { background: var(--tint); }
.places button[aria-pressed="true"] { background: var(--tint-2); }
.place-thumb { flex: none; width: 54px; height: 36px; border-radius: 7px; overflow: hidden; background: var(--media-bg); }
.place-thumb img { width: 100%; height: 100%; object-fit: cover; }
.place-text { display: grid; min-width: 0; }
.place-name { font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-city { font-size: 0.875rem; color: var(--ink-3); }
/* while the hero visits the places by itself, the active row shows its time left */
.places button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-3);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
.hero.is-advancing .places button[aria-pressed="true"]::after { opacity: 0.5; animation: advance 8s linear both; }
@keyframes advance { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Without the script the player cannot play. */
html:not(.js) .listen-btn,
html:not(.js) .listen-more { display: none; }

/* Entrance: type, then the place. Nothing zooms. */
.js .hero-line > span { animation: line-up 1.05s var(--ease) both; }
.js .hero-line:nth-child(1) > span { animation-delay: 0.08s; }
.js .hero-line:nth-child(2) > span { animation-delay: 0.18s; }
@keyframes line-up { from { transform: translateY(104%); } }
.js .hero-side,
.js .hero-frame,
.js .hero-sheet { animation: fade-up 1s var(--ease) both; }
.js .hero-side { animation-delay: 0.35s; }
.js .hero-frame { animation-delay: 0.45s; }
.js .hero-sheet { animation-delay: 0.6s; }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .js .hero-frame { animation: fade-in 1.2s var(--ease-in-out) both; animation-delay: 0s; }  /* the backdrop never moves */
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }

/* ---------- How it works ---------- */

.how { padding-top: var(--section); }
.how-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.how-steps { grid-column: 1 / 7; display: grid; gap: var(--head-gap); align-content: center; }
/* The four steps sit beside one phone, all readable; the one being played is in full ink
   and its line fills with the clip. No step is ever greyed out of reach. */
.steps { display: grid; gap: clamp(16px, 2.2vh, 30px); }
.step { display: grid; gap: 8px; justify-items: start; }
.step h3 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.1; letter-spacing: -0.03em; }
.step-pick { font: inherit; letter-spacing: inherit; color: var(--ink-2); text-align: left; cursor: pointer; transition: color 0.4s var(--ease); }
.step-pick:hover { color: var(--ink); }
.step.is-active .step-pick { color: var(--ink); }
.step .t-lead { max-width: 36ch; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-3); transition: color 0.4s var(--ease); }
.step .t-lead strong { color: var(--ink-2); transition: color 0.4s var(--ease); }
.step.is-active .t-lead { color: var(--ink-2); }
.step.is-active .t-lead strong { color: var(--ink); }
.step-bar { display: block; width: min(100%, 30ch); height: 2px; margin-top: 6px; border-radius: 2px; background: var(--seg-track); overflow: hidden; opacity: 0; transition: opacity 0.4s var(--ease); }
.step.is-active .step-bar { opacity: 1; }
.step-bar span { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(0); transition: transform 0.25s linear; }
.step-shot { display: none; }
.how-device { grid-column: 8 / 13; }
.how-stage { display: grid; justify-items: center; gap: 18px; }
.how-stage .phone { width: min(clamp(300px, 27vw, 420px), (100svh - var(--nav-h) - 136px) / 2.17); }
.how-clip { cursor: pointer; }

/* Pause control for the looping app footage (it runs longer than 5 s). */
.video-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--seg-track);
  transition: background-color 0.2s, opacity 0.3s;
}
.video-toggle:hover { background: var(--tint-2); }
.video-toggle:focus-visible { border-radius: 50%; }
.video-toggle .i { grid-area: 1 / 1; width: 18px; height: 18px; }
.video-toggle .i-play { display: none; }
.video-toggle[aria-pressed="true"] .i-play { display: block; }
.video-toggle[aria-pressed="true"] .i-pause { display: none; }
.phone-video .video-toggle { position: absolute; right: -52px; bottom: 6%; }

/* ---------- A walk through Rome ---------- */

.walk { padding-top: var(--section); }
.walk-head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(24px, 3vh, 40px); }
.walk-head .t-lead { max-width: 34ch; }
.walk-stage { position: relative; container-type: inline-size; }
/* The map is a panel, like the app's map: one shape, the full width of the page, and never
   taller than the screen leaves room for (heading, map and stop buttons fit in one view).
   The map behind it is a wide panorama (1000 x 400) that covers the panel, so a short
   panel crops only empty streets: the route band (y 59 to 359) always shows. */
.walk-map {
  --walk-cap: calc(100svh - var(--nav-h) - 76px - var(--head-row, 0px));
  position: relative;
  width: 100%;
  height: max(36cqw, min(50cqw, var(--walk-cap)));
  container-type: size;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--map-bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.walk-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 0 60px rgba(0, 0, 0, 0.12);
}
.walk-canvas { position: absolute; left: 50%; top: 50%; width: max(100cqw, 250cqh); aspect-ratio: 1000 / 400; transform: translate(-50%, -50%); }
.walk-canvas img,
.walk-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.walk-route-base { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; }
.walk-route { fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round; }
/* Each stop is its place's photo, as the app's cards show it; its number sits on the shoulder. */
.walk-pin {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--pin) center / cover no-repeat;
  box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px var(--line), var(--shadow-md);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  cursor: pointer;
}
.walk-pin::after {
  content: attr(data-n);
  position: absolute;
  right: -5px;
  top: -5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--bg);
  transition: background-color 0.4s, color 0.4s;
}
.walk-pin.is-heard::after { background: var(--green); color: #fff; }
.walk-pin.is-now { transform: scale(1.22); box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 5px var(--ink), var(--shadow-lg); }
.walk-label {
  position: absolute;
  transform: translate(32px, -50%);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--map-label);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.4s;
}
.walk-label.is-left { transform: translate(calc(-100% - 32px), -50%); }
.walk-label.is-now { color: var(--ink); }
/* The traveller: the native blue location dot. */
.walk-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px #fff, 0 0 0 12px rgba(10, 132, 255, 0.22);
  will-change: transform;
  pointer-events: none;
}

/* The card the app shows at a stop: photo, name, its line, and how far through it is. */
.walk-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  border-radius: var(--r-media);
  background: var(--card);
}
.walk-thumb { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--fill); }
.walk-card-text { display: grid; gap: 6px; min-width: 0; }
.walk-meta { font-size: 0.9375rem; color: var(--ink-3); display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.walk-state { display: inline-flex; align-items: center; gap: 7px; }
.walk-card.is-playing .walk-state { color: var(--green-ink); }
.walk-card.is-playing .walk-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: live 1.6s var(--ease-in-out) infinite;
}
.walk-sep { white-space: pre; }
.walk-kind { overflow: hidden; text-overflow: ellipsis; }
.walk-name { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.walk-line { font-size: 1rem; line-height: 1.5; color: var(--ink-2); min-height: calc(3 * 1.5em); text-wrap: pretty; }
.walk-card.swap .walk-name,
.walk-card.swap .walk-line { animation: fade-up 0.5s var(--ease) both; }
.walk-bar { height: 3px; border-radius: 3px; background: var(--seg-track); overflow: hidden; margin-top: 4px; }
.walk-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--ink); transform-origin: left center; transform: scaleX(0); }
/* Wide screens: the card sits on the map's empty corner, in the same glass as the hero's card. */
@media (min-width: 901px) {
  .walk-card {
    position: absolute;
    left: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    width: min(440px, 46%);
    background: var(--glass);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
  }
}
@media (min-width: 901px) and (prefers-reduced-transparency: reduce) {
  .walk-card { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.walk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.walk-play .i { width: 16px; height: 16px; }
.walk-play .i-pause { display: none; }
.walk.is-playing .walk-play .i-pause { display: block; }
.walk.is-playing .walk-play .i-play { display: none; }
.walk-stops { display: flex; flex-wrap: wrap; gap: 8px; }
.walk-stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 6px;
  border-radius: var(--r-pill);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background-color 0.25s, color 0.25s;
}
.walk-stop:hover { background: var(--tint-2); color: var(--ink); }
.walk-stop[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.walk-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tint);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.walk-stop.is-heard .walk-num { background: var(--green); color: #fff; }
.walk-stop[aria-pressed="true"] .walk-num { background: var(--on-primary); color: var(--primary); }
.walk-credit { margin-top: 18px; color: var(--ink-3); }
.walk-credit a { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 2px; }

/* ---------- Your own street ---------- */

.local { padding-top: var(--section); }
.local-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 36px;
  align-items: center;
}
.local-photo { grid-column: 1 / 6; margin: 0; display: grid; gap: 14px; }
.local-photo picture {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--media-bg);
}
.local-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.local-photo figcaption { padding-inline: 4px; }
.local-copy { grid-column: 7 / 13; display: grid; gap: 22px; }
.local-copy .t-lead { max-width: 24ch; }
.local .t-lead, .modes .t-lead, .device .t-lead, .tune .t-lead { color: var(--ink-2); }
.local .t-lead strong, .modes .t-lead strong, .device .t-lead strong, .tune .t-lead strong { color: inherit; }
.local-copy .t-body { max-width: 42ch; }

/* ---------- Travel modes ---------- */

.modes { padding-top: var(--section); }
.modes-head { display: grid; gap: 22px; max-width: 46rem; margin-bottom: var(--head-gap); }
.modes-head .t-lead { max-width: 34ch; }
/* Wide landscape screens: these two sections show heading, picture and controls in one
   view. The intro runs wider (two lines at most) and the picture's height budget
   subtracts the heading block: heading, gap, two lines of intro, margin. */
@media (min-width: 1000px) and (min-aspect-ratio: 5 / 4) {
  .walk, .modes { --head-row: calc(var(--t-h2) * 1.06 + 14px + var(--t-lead) * 1.4 * 2 + 28px); }
  .walk-head, .modes-head { max-width: none; gap: 14px; margin-bottom: 28px; }
  .walk-head .t-lead, .modes-head .t-lead { max-width: 58ch; }
}
.modes-stage { display: grid; gap: clamp(20px, 2.4vw, 36px); container-type: inline-size; }
/* 2:1, but never taller than the screen leaves for the photo and its line of text. */
.mode-media {
  position: relative;
  height: min(50cqw, 100svh - var(--nav-h) - 210px - var(--head-row, 0px));
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--media-bg);
}
.mode-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.mode-photo img { width: 100%; height: 100%; object-fit: cover; }
.mode-photo[data-mode="walk"] img { object-position: 50% 55%; }
.mode-photo[data-mode="cycle"] img { object-position: 50% 50%; }
.mode-photo[data-mode="drive"] img { object-position: 50% 55%; }
.mode-photo.is-active { opacity: 1; }
.seg-modes {
  position: absolute;
  z-index: 1;
  left: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  background: var(--glass);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md);
}
.seg-modes button { min-height: 40px; padding: 0 18px; }
@media (prefers-reduced-transparency: reduce) {
  .seg-modes { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.mode-panels { display: grid; gap: 22px; }
.js .mode-panel { grid-area: 1 / 1; }
.js .mode-panel:not(.is-active) { visibility: hidden; }
.mode-panel .t-lead { max-width: 44ch; }
.mode-panel.is-active { animation: fade-up 0.6s var(--ease) both; }
.js .mode-lock { grid-area: 2 / 1; }
.mode-lock {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mode-lock .i { color: var(--ink-2); width: 20px; height: 20px; }

.mode-note { margin-top: 14px; max-width: 52ch; }

/* ---------- On your phone ---------- */

.device { padding-top: var(--section); }
.device-head { display: grid; gap: 22px; max-width: 50rem; margin-bottom: var(--head-gap); }
.device-head .t-lead { max-width: 38ch; }
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 28px;
  align-items: stretch;
}
.flow-step { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 36px); }
.flow-step .t-small { max-width: 34ch; }
.flow-word { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; }
.flow-server {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* the facts travel from the sources into the phone */
.flow-server::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -28px;
  width: 28px;
  height: 1px;
  background: var(--line-2);
}
.flow-phone {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.flow-phone-label { grid-column: 1 / -1; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px) 0; }
.flow-phone .flow-step { padding-top: 12px; }
.flow-phone .flow-step + .flow-step { position: relative; }
.flow-phone .flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: clamp(24px, 2.6vw, 36px);
  width: 1px;
  background: var(--sep);
}
.flow-server .t-label { margin-bottom: 0; }
.device-notes {
  margin-top: clamp(48px, 5vw, 72px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
}
.device-notes > div { display: grid; gap: 10px; align-content: start; }
.device-notes .t-body { max-width: 44ch; }

/* ---------- Tune ---------- */

.tune { padding-top: var(--section); }
.tune-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: var(--head-gap);
  align-items: stretch;
}
.tune-head { grid-column: 1 / 9; display: grid; gap: 22px; }
.tune-head .t-lead { max-width: 40ch; }
.tune-copy { grid-column: 1 / 6; display: grid; gap: 16px; align-content: start; }
.tune-panel {
  padding: 2px 16px;
  border-radius: var(--r-list);
  background: var(--card);
}
.tune-row { display: grid; gap: 14px; padding: 18px 0; }
.tune-row + .tune-row { border-top: 0.5px solid var(--sep); }
.tune-row-head { display: grid; gap: 2px; }
.tune-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.tune-hint { font-size: 0.875rem; color: var(--ink-3); }
.seg-tune { width: 100%; }
.seg-tune button { padding: 0 8px; font-size: 0.875rem; }
.tune-summary { transition: opacity 0.25s; }

.tune-story { grid-column: 7 / 13; margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 16px; }
.story-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: var(--r-card);
  background: var(--card);
}
.story-head { display: flex; align-items: center; gap: 16px; }
.story-thumb { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
.story-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.story-sub { font-size: 0.9375rem; color: var(--ink-3); }
.story-text {
  margin-top: clamp(18px, 2vw, 28px);
  min-height: calc(6 * 1.38em);
  font-size: var(--t-lead);
  line-height: 1.38;
  font-weight: 450;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: pretty;
  transition: opacity 0.22s linear;
}
.story-text.is-swapping { opacity: 0; }
/* The app's "why this story" line, at the foot of the card. */
.story-why {
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.9375rem;
  color: var(--ink-3);
  border-top: 1px solid var(--sep);
}
.tune-story figcaption { max-width: 52ch; }

/* ---------- More: index of features with the real screens ---------- */

.more { padding-top: var(--section); }
.more-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.more-list { grid-column: 7 / 13; grid-row: 1; }
.more-list h2 { max-width: 12ch; }
.index { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.index-item { border-bottom: 1px solid var(--line); }
.index-item h3 { font: inherit; }
.index-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2vw, 26px) 0;
  text-align: left;
  color: var(--ink-4);
  -webkit-tap-highlight-color: transparent;
}
.index-title {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  transition: color 0.35s var(--ease);
}
.index-row:hover,
.index-item.is-open .index-row { color: var(--ink); }
.index-row .i { width: 24px; height: 24px; transition: transform 0.5s var(--ease); }
.index-item.is-open .index-row .i { transform: rotate(45deg); }
.index-row:focus-visible { outline-offset: 6px; border-radius: 10px; }
@media (min-width: 901px) { .index-item.is-open .index-row .i { opacity: 0; } }
.index-body { padding: 0 0 clamp(22px, 2.4vw, 32px); }
/* Collapsed rows and other modes are hidden only when the script can open them. */
.js .index-item:not(.is-open) .index-body { display: none; }
.index-body .t-body { max-width: 44ch; }
.index-item.is-open .index-body { animation: fade-up 0.5s var(--ease) both; }
.index-shot { display: none; }
.more-device { grid-column: 1 / 6; grid-row: 1; }
.more-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 4vh);
  display: grid;
  justify-items: center;
}
.more-sticky .phone { width: min(clamp(270px, 23vw, 370px), (100vh - 160px) / 2.17); }

/* ---------- Trust ---------- */

.trust { padding-top: var(--section); }
.trust-head { display: grid; gap: 22px; max-width: 50rem; }
.trust-head .t-lead { max-width: 44ch; }
.check {
  margin-top: var(--head-gap);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.check-col {
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--r-card);
  background: var(--bg-raised);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  align-content: start;
  gap: 20px;
}
.check-text {
  font-size: var(--t-lead);
  line-height: 1.42;
  letter-spacing: -0.016em;
  font-weight: 450;
  color: var(--ink-3);
  text-wrap: pretty;
}
.check-source .check-text { color: var(--ink-3); }
.pair {
  padding: 0 0.12em;
  margin: 0 -0.12em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color 0.5s var(--ease), background-color 0.5s var(--ease);
}
.pair.is-lit { color: var(--ink); background-color: var(--tint-2); }
.pair.is-hot { background-color: var(--green-soft); }

/* ---------- Languages ---------- */

.langs { padding-top: var(--section); }
.langs h2 { margin-bottom: clamp(16px, 2vw, 28px); color: var(--ink-2); }
.lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em 0.55em;
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--ink-4);
}
.lang-list li { transition: color 0.3s; }
.lang-list li:hover { color: var(--ink); }

/* ---------- Questions ---------- */

.faq { padding-top: var(--section); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.faq-grid h2 { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-list { grid-column: 7 / 13; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover .i { color: var(--ink); }
.faq-list details:hover { border-bottom-color: var(--line-2); }
.faq-list summary:focus-visible { outline-offset: 6px; border-radius: 10px; }
.faq-list summary .i { width: 22px; height: 22px; color: var(--ink-3); transition: transform 0.45s var(--ease); }
.faq-list details[open] summary .i { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 26px; max-width: 58ch; }
.faq-list details[open] p { animation: fade-up 0.45s var(--ease) both; }

/* ---------- Join ---------- */

/* One gap between every section: each section pads its top only; the last
   one also pads its bottom. */
/* The last call: one centred column. */
.join { padding-block: var(--section) calc(var(--section) * 1.1); }
.join-inner { display: grid; justify-items: center; text-align: center; gap: 22px; }
.app-icon {
  display: block;
  width: 104px;
  height: 104px;
  margin-bottom: 8px;
  border-radius: 23px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
}
.app-icon img { width: 100%; height: 100%; }
.join-inner h2 { max-width: 16ch; }
.join-inner .t-lead { max-width: 36ch; }
.join-form { width: min(100%, 520px); display: grid; gap: 10px; margin-top: 10px; text-align: left; }
.join-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.25s;
}
.join-field:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.join-field:has(input.invalid) { box-shadow: inset 0 0 0 2px var(--red); }
.join-field input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  font-size: 1.0625rem;
  color: var(--ink);
}
.join-field input::placeholder { color: var(--ink-3); }
.join-field input:focus { outline: none; }
.join-msg { min-height: 1.5em; text-align: center; }
.join-msg.error { color: var(--red); }
.join-msg.ok { color: var(--green-ink); }
.join-terms { color: var(--ink-3); }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 80px) 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.footer-brand { grid-column: 1 / 5; display: grid; gap: 14px; align-content: start; }
.footer-brand .brand { font-size: 1.625rem; gap: 14px; }
.footer-brand .brand img { width: 34px; }
.socials { display: flex; flex-wrap: wrap; gap: 0; margin-left: -10px; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink-3);
  transition: color 0.2s, background-color 0.2s;
}
.socials a:hover { color: var(--ink); background: var(--tint); }
.socials .i { width: 17px; height: 17px; }
.footer-links { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-links > div { display: grid; gap: 4px; align-content: start; }
.footer-links .t-label { margin-bottom: 8px; color: var(--ink); font-weight: 600; }
.footer-links a { width: fit-content; padding: 5px 0; color: var(--ink-3); font-size: 0.9375rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--ink); }
.footer-base {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.footer-base > p:first-child { flex: none; white-space: nowrap; }
.credits { max-width: 72ch; text-align: left; }
.credits a { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 2px; }
.credits a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .tune-copy { grid-column: 1 / 7; }
  .tune-story { grid-column: 7 / 13; }
}

@media (max-width: 900px) {
  /* How it works: steps stack, each with its own screen. */
  .how-grid { align-items: start; }
  .how-steps { grid-column: 1 / -1; }
  .how-device { display: none; }
  .steps { gap: 0; }
  .step { padding-block: 28px; gap: 14px; }
  .step-pick, .step.is-active .step-pick { color: var(--ink); }
  .step .t-lead { max-width: 32ch; color: var(--ink-3); }
  .step .t-lead strong, .step.is-active .t-lead strong { color: var(--ink); }
  .step-bar { display: none; }
  .step-shot { display: block; margin-top: 12px; }
  .step-shot .phone { width: min(76vw, 320px); }
  .step-shot .phone-video { width: min(68vw, 290px); }

  .tune-head, .tune-copy, .tune-story { grid-column: 1 / -1; }
  .tune-panel { max-width: 520px; }

  /* Small screens: a taller window on the same map, the route filling it; the card below. */
  .walk-map { height: auto; aspect-ratio: 10 / 8; }
  .walk-canvas { width: 200%; }
  .walk-card { margin-top: 16px; }
  .walk-name { font-size: 1.25rem; }
}

@media (max-width: 600px) {
  /* small map: only the stop being told, or the next one, carries its name */
  .walk-label { opacity: 0; transition: opacity 0.3s, color 0.4s; }
  .walk-label.is-now { opacity: 1; }
  .walk-pin { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .walk-pin::after { width: 18px; height: 18px; font-size: 0.625rem; }
  .walk-label, .walk-label.is-left { transform: translate(-50%, 24px); }
}

@media (max-width: 900px) {
  .local-photo, .local-copy { grid-column: 1 / -1; }
  .local-photo picture { aspect-ratio: 4 / 5; max-width: 480px; }

  .flow { grid-template-columns: 1fr; gap: 20px; }
  .flow-server::after { top: auto; bottom: -20px; right: auto; left: 50%; width: 1px; height: 20px; }
  .device-notes { grid-template-columns: 1fr; }


  .faq-grid h2, .faq-list { grid-column: 1 / -1; }
  .faq-grid h2 { position: static; }


  .footer-brand, .footer-links { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-menu { display: inline-block; }
  .nav-sheet {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: grid;
    padding: 8px var(--gx) 28px;
    background: var(--glass-solid);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0.25s;
  }
  .nav-sheet.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-sheet a { padding: 14px 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
  .nav-sheet a:last-child { border-bottom: 0; }
  .menu-open .nav { background: var(--glass-solid); border-bottom-color: var(--line); }


  .mode-media { height: auto; aspect-ratio: 3 / 2; }
  .seg-modes { left: 12px; right: 12px; bottom: 12px; }
  .seg-modes button { padding: 0 8px; font-size: 0.875rem; gap: 6px; }

  .check { grid-template-columns: 1fr; }
  .flow-phone { grid-template-columns: 1fr; }
  .flow-phone .flow-step + .flow-step { border-left: 0; border-top: 1px solid var(--sep); }
  .app-icon { width: 88px; height: 88px; border-radius: 20px; }

  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; }
}

@media (max-width: 520px) {
  .nav-cta { display: none; }
}
@media (max-width: 760px) {
  .hero-frame { border-radius: var(--r-card); }
  .hero-sheet { border-radius: var(--r-card); }
  .captions { font-size: 1.1875rem; }
}

@media (max-width: 760px) {
  .more-list { grid-column: 1 / -1; grid-row: auto; }
  .more-device { display: none; }
  .index-shot { display: block; margin-top: 24px; }
  .index-shot .phone { width: min(70vw, 300px); }
}

@media (max-width: 480px) {
  .join-field { flex-direction: column; align-items: stretch; border-radius: 26px; }
  .join-field input { flex: none; height: 50px; }
  .join-field .btn { width: 100%; }
}

@media (max-width: 400px) {
  .seg-modes .i { display: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .hero-line > span,
  .js .hero-side,
  .js .hero-frame,
  .js .hero-sheet,
  .mode-panel.is-active,
  .index-item.is-open .index-body,
  .faq-list details[open] p,
  .captions.swap { animation: none; }
  .phone-stack > *, .mode-photo, .mode-photo img, .seg-thumb, .story-text, .pair, .step-bar span, .walk-pin { transition: none; }
  .walk-card.swap .walk-name, .walk-card.swap .walk-line { animation: none; }
  .mode-photo img { transform: none; }
  .listen.is-playing .listen-state::before { animation: none; }
  .hero.is-advancing .places button[aria-pressed="true"]::after { animation: none; }
  .hero-photo { transition: none; }
  .sky, .sky::before, .sky-sun, .sky-moon, .sky-stars i { transition: none !important; }
}

.hero-photo[data-place-photo="colosseum"] { --focus: 0% 35%; }
.hero-photo[data-place-photo="brooklyn"] { --focus: 50% 12%; }
.hero-photo[data-place-photo="cntower"] { --focus: 50% 45%; }
.tune-memory { max-width: 52ch; }
.how-lead { max-width: 36ch; margin-top: calc(var(--head-gap) * -0.5); }