/* Proposal I · Responsive, phone-first scroll story
 * H's structure with the photography removed: each screen is a clean surface
 * (warm off-white / white / pale blue, navy only in the footer) where an
 * animated phone on a soft disc is the subject. One brand blue for actions.
 *   Mobile  (base, designed at 390)  single column, as H
 *   Tablet  (≥ 768)                  single column, larger phones and type
 *   Desktop (≥ 1024)                 two columns: copy beside a large phone,
 *                                    chapters alternate sides, 3 reviews in
 *                                    view, apps as a row of five
 * Every [data-screen] fits one viewport under the sticky header (and, below
 * 1024, under the sticky app bar on the chapter screens). */
:root {
  --bg: var(--sw-bg-warm);
  --surface: var(--sw-light);
  --line: var(--sw-bg-grey);
  --line-soft: #e7e5e1;
  --ink: var(--sw-dark);
  --muted: var(--sw-secondary);
  --blue: var(--sw-primary);
  --blue-press: #005e9e;
  --tint: var(--sw-bg-blue);
  --navy: var(--sw-navy);
  --g: 20px; /* side gutter */
  --bar-h: 58px; /* sticky app bar (< 1024), overlays the chapters' top padding */
  --main-w: 560px; /* content width (sections are full bleed, content is not) */
  --header-h: 60px;
  --foot-h: 212px; /* footer shares the last screen with "Pick an app" */
  --vh: 100vh;
  --screen: min(calc(var(--vh) - var(--header-h)), 960px);

  /* inline padding that centres --main-w content inside a full-bleed section */
  --side: max(var(--g), calc((100% - var(--main-w)) / 2 + var(--g)));
  --r-card: 22px;
  --shadow-phone:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(12, 14, 30, 0.12),
    0 18px 34px -14px rgba(12, 14, 30, 0.34), 0 50px 80px -34px rgba(12, 56, 89, 0.45);
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

@supports (height: 100svh) {
  :root {
    --vh: 100svh;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/24px var(--font);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

img,
svg {
  display: block;
  max-inline-size: 100%;
}

a {
  color: var(--blue);
}

button {
  font: inherit;
  color: inherit;
}

figure,
blockquote {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip {
  position: absolute;
  inset-inline-start: 8px;
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  top: -60px;
  z-index: 12;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.2s var(--ease);
}

.skip:focus {
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  top: 8px;
}

/* ───────── Header ───────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 11;
  background: #fff;
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 0.25s var(--ease);
}

.site-header.is-scrolled {
  box-shadow:
    inset 0 -1px 0 var(--line-soft),
    0 6px 20px -12px rgba(12, 14, 30, 0.16);
}

/* while the app bar is down it carries the shadow; the header keeps a hairline */
.bar-on .site-header.is-scrolled {
  box-shadow: inset 0 -1px 0 var(--line-soft);
}

.header-in {
  block-size: var(--header-h);
  max-inline-size: var(--main-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--g);
}

.brand {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  border-radius: 6px;
  flex: none;
}

.brand img {
  inline-size: 124px;
  block-size: auto;
}

.top-nav {
  display: none;
}

.login-btn {
  flex: none;
  min-block-size: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.login-btn:hover {
  background: var(--ink);
  color: #fff;
}

/* ───────── Shared micro type (13 px minimum) ───────── */
.hero-rating,
.ix-num,
.rv-label,
.car-count {
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ───────── App bar (< 1024): the five apps, pinned under the header ─────────
 * White surface, hairline, app icons, short names on one line. Items size to
 * their names (flex, extra space shared evenly); a pale-blue pill slides to
 * the app on screen, taking that item's box (JS sets its width and offset). It slides down from
 * behind the header once the hero has scrolled away (JS adds .is-on). */
.appbar {
  position: fixed;
  z-index: 10;
  inset-inline: 0;
  inset-block-start: var(--header-h);
  block-size: var(--bar-h);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  box-shadow:
    inset 0 -1px 0 var(--line-soft),
    0 8px 22px -14px rgba(12, 56, 89, 0.32);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.25s var(--ease),
    visibility 0s linear 0.4s;
}

.appbar.is-on {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.25s var(--ease),
    visibility 0s;
}

.ab-in {
  position: relative;
  block-size: 100%;
  max-inline-size: var(--main-w);
  margin: 0 auto;
  padding: 4px 6px;
}

.appbar ul {
  position: relative;
  z-index: 1;
  block-size: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.appbar li {
  flex: 1 1 auto;
  display: flex;
}

.ab {
  flex: 1 1 auto;
  block-size: 100%;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 0 5px;
  border-radius: 14px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s var(--ease);
}

.ab-ic {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 7px;
  flex: none;
  opacity: 0.6;
  transition:
    opacity 0.3s var(--ease),
    transform 0.35s var(--spring);
}

.ab-name {
  font-size: 12px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}

.ab:hover {
  color: var(--ink);
}

.ab:hover .ab-ic,
.ab:hover .ab-name {
  opacity: 1;
}

.ab.is-on {
  color: var(--blue);
}

.ab.is-on .ab-ic {
  opacity: 1;
  transform: scale(1.06);
}

.ab.is-on .ab-name {
  opacity: 1;
}

.ab:focus-visible {
  outline-offset: -2px;
  border-radius: 14px;
}

/* the sliding pill: JS sizes it to the active item */
.ab-ind {
  position: absolute;
  z-index: 0;
  inset-block: 4px;
  inset-inline-start: 0;
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  width: 0;
  border-radius: 14px;
  background-color: var(--tint);
  transition:
    transform 0.45s var(--ease-out),
    width 0.45s var(--ease-out);
}

/* ───────── Phone device frame ───────── */
.phone {
  --bz: 5px;
  --r: calc(var(--pw) * 0.17);

  position: relative;
  display: block;
  inline-size: var(--pw);
  padding: var(--bz);
  border-radius: var(--r);
  background: #101218;
  box-shadow: var(--shadow-phone);
}

.phone::before,
.phone::after {
  content: '';
  position: absolute;
  inline-size: 3px;
  border-radius: 2px;
  background: #1c1f27;
}

.phone::before {
  inset-inline-start: -2px;
  inset-block-start: 22%;
  block-size: 9%;
  box-shadow: 0 calc(var(--pw) * 0.24) 0 #1c1f27;
}

.phone::after {
  inset-inline-end: -2px;
  inset-block-start: 28%;
  block-size: 14%;
}

.phone-scr {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 300 / 650;
  border-radius: calc(var(--r) - var(--bz));
  background: #fff;
}

.phone-scr .phone-svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.phone-svg text {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}

.phone-svg .mono text,
.phone-svg text.mono {
  font-family: var(--mono);
}

.phone-svg .a {
  transform-box: fill-box;
  transform-origin: center;
}

.island {
  position: absolute;
  z-index: 3;
  inset-inline-start: 50%;
  inset-block-start: calc(var(--bz) + 2.2%);
  inline-size: 31%;
  block-size: 3.6%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.scr-fallback,
.phone-scr .phone-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: var(--tint);
  color: var(--navy);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.scr-fallback .app-icon,
.phone-fallback .app-icon {
  inline-size: 40%;
  max-inline-size: 64px;
  block-size: auto;
  border-radius: 22%;
}

/* ───────── Stage: a phone centred on a soft disc ─────────
 * The stage is a size container; the phone's width is derived from the
 * stage's height (phone aspect: screen 300/650 plus a 5 px bezel), so phones
 * always fill the height each screen has left. */
.stage {
  --ph: 100cqh; /* phone height (resolved on the children) */
  --pw-max: 236px;
  --pw-cqw: 62cqw;
  --pw: min(calc((var(--ph) - 10px) * 0.4615 + 10px), var(--pw-max), var(--pw-cqw));

  position: relative;
  container-type: size;
  display: grid;
  place-items: center;
}

.stage > * {
  grid-area: 1 / 1;
}

/* Disc: a solid surface circle with two hairline orbit rings */
.disc {
  --d: min(100cqw, calc(var(--pw) * 1.9), 100cqh);

  position: relative;
  inline-size: var(--d);
  block-size: var(--d);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--disc-hi, #f6fbfe) 0%, var(--disc, var(--tint)) 64%);
  box-shadow: var(--disc-shadow, none);
  pointer-events: none;
}

.disc::before,
.disc::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--orbit, rgba(0, 113, 189, 0.14));
}

.disc::before {
  inset: calc(var(--d) * -0.075);
}

.disc::after {
  inset: calc(var(--d) * -0.17);
  border-color: var(--orbit-2, rgba(0, 113, 189, 0.07));
}

@media (max-width: 767px) {
  .ch .disc::after {
    display: none;
  }
}

/* soft contact shadow under each phone */
.ch-phone,
.reel-phone {
  position: relative;
  z-index: 2;
}

.ch-phone::after,
.reel-phone::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset-inline: 12%;
  inset-block-end: -14px;
  block-size: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 14, 30, 0.22), rgba(12, 14, 30, 0));
  pointer-events: none;
}

/* ───────── Hero ───────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  block-size: var(--screen);
  min-block-size: 460px;
  padding: 16px var(--side) 14px;
  background: var(--bg);
  overflow: clip;
}

.hero-rating {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

.hero-rating .stars {
  display: inline-flex;
  gap: 2px;
  color: var(--ink);
}

.hero-rating .stars svg {
  inline-size: 12px;
  block-size: 12px;
}

.hero-rating strong {
  color: var(--ink);
  font-weight: 700;
}

.hero h1 {
  grid-row: 2;
  margin: 0 0 6px;
  font-size: clamp(34px, 11.2vw, 50px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.hero h1 span {
  display: block;
}

.hero h1 .l1 {
  color: var(--muted);
}

.reel {
  grid-row: 3;
  min-block-size: 200px;
  padding: 10px 0 14px;

  --pw-max: 250px;
  --pw-cqw: 70cqw;
}

.disc-hero {
  --d: min(100cqw, calc(var(--pw) * 2.15), 112cqh);
}

.reel-phone {
  border-radius: calc(var(--pw) * 0.17);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.reel-phone .phone {
  transition: transform 0.4s var(--ease);
}

.reel-phone:hover .phone {
  transform: translateY(-3px);
}

.reel-phone:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px var(--blue);
}

.slide {
  position: absolute;
  inset: 0;
  transform: translateX(104%);
  transition:
    transform 0.72s var(--ease-out),
    opacity 0.6s var(--ease);
}

.slide.prep {
  transition: none;
  transform: translateX(104%);
}

.slide.is-on {
  transform: none;
  opacity: 1;
  z-index: 1;
}

.slide.is-off {
  transform: translateX(-34%);
  opacity: 0;
}

.slide .phone-svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.reel-toggle {
  position: absolute;
  z-index: 3;
  inset-block-start: 10px;
  inset-inline-start: 0;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--line-soft),
    0 6px 18px -8px rgba(12, 14, 30, 0.35);
  transition:
    transform 0.25s var(--spring),
    background-color 0.2s var(--ease);
}

.reel-toggle:hover {
  background: var(--tint);
}

.reel-toggle:active {
  transform: scale(0.92);
}

.reel-toggle svg {
  inline-size: 14px;
  block-size: 14px;
}

/* the play path is already optically centered in its 16px box */
.reel-toggle .i-play {
  display: none;
}

.reel-toggle[data-state='paused'] .i-pause {
  display: none;
}

.reel-toggle[data-state='paused'] .i-play {
  display: block;
}

.reel-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--blue);
  border-radius: 50%;
}

.explore {
  grid-row: 4;
  margin-block-start: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition:
    background-color 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.explore svg {
  inline-size: 16px;
  block-size: 16px;
}

.explore:hover {
  background: #23263a;
}

.explore:active {
  transform: scale(0.985);
}

.explore:focus-visible {
  border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
  .js:not(.still) .explore svg {
    animation: nudge 2.4s var(--ease) 2s infinite;
  }
}

@keyframes nudge {
  0%,
  60%,
  100% {
    transform: none;
  }

  30% {
    transform: translateY(3px);
  }
}

/* ───────── Video hero (all widths) ─────────
 * One contractor in five settings. At each cut a small phone with that app's
 * real screen (+ name chip) springs out of his phone toward the empty side of
 * the frame; a dot and hairline tie it to the phone in his hand. JS adds
 * .v-on to the hero; without it (no JS, video error) the phone reel above is
 * used and this stays hidden. Mobile: a 4:5 crop; desktop: the full 16:9. */
.vstage {
  display: none;
}

/* the stage is at most 4:5 and the column centres vertically on tall phones */
.hero.v-on {
  grid-template-rows: auto auto minmax(0, auto) auto;
  align-content: center;
}

.hero.v-on .reel {
  display: none;
}

.hero.v-on .vstage {
  display: block;
  grid-row: 3;
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 0;
  aspect-ratio: 4 / 5;
  margin: 6px 0 0;

  --vs-r: 20px;

  border-radius: var(--vs-r);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0); /* Safari: keep the rounded clip on the composited video */
  container-type: size;
  background: #3b3328 url('../assets/video/hero-film-poster-4x5.jpg') 50% 50% / cover no-repeat;
  box-shadow:
    0 0 0 1px rgba(12, 14, 30, 0.06),
    0 18px 40px -22px rgba(12, 14, 30, 0.5);
  -webkit-tap-highlight-color: transparent;
}

.hero.v-on .explore {
  margin-block-start: 14px;
}

.vs-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  pointer-events: none;

  /* Safari ignores the parent's overflow clip on a playing <video>: round the video itself */
  border-radius: var(--vs-r, 20px);
  clip-path: inset(0 round var(--vs-r, 20px));
}

/* the whole frame is a (duplicate, unfocusable) link to the current app */
.vs-hit {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

/* soft top/bottom scrims keep the white chips and toggle legible on bright frames */
.vstage::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(12, 14, 30, 0.22),
    rgba(12, 14, 30, 0) 22%,
    rgba(12, 14, 30, 0) 62%,
    rgba(12, 14, 30, 0.34)
  );
}

/* pause / play: dark glass in the top corner, clear of his face in every scene */
.vs-toggle {
  z-index: 4;
  inset-block-start: 10px;
  inset-inline: auto 10px;
  background: rgba(12, 14, 30, 0.46);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.vs-toggle:hover {
  background: rgba(12, 14, 30, 0.66);
}

/* the film's phones sit in the top corners and its captions bottom-left, so the
 * control takes the free bottom-right corner (desktop: bottom centre) */
.vstage .vs-toggle {
  inset-block: auto 12px;
  inset-inline-end: 12px;
}

/* ───────── Chapters ─────────
 * Alternating surfaces: white with a pale-blue disc, warm with a white disc */
.ch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  block-size: var(--screen);
  min-block-size: 460px;
  padding: calc(18px + var(--bar-h)) var(--side) 18px;
  background: var(--surface);
  overflow: clip;
}

.ch:nth-child(even) {
  --disc: #fff;
  --disc-hi: #fff;
  --orbit: rgba(12, 56, 89, 0.1);
  --orbit-2: rgba(12, 56, 89, 0.05);
  --disc-shadow: 0 1px 2px rgba(12, 56, 89, 0.04), 0 40px 80px -40px rgba(12, 56, 89, 0.22);

  background: var(--bg);
}

/* App identity: icon + app name (a separate product per chapter) */
.ch-id {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}

.ch-ic {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 10px;
  flex: none;
  box-shadow:
    0 0 0 1px rgba(12, 14, 30, 0.05),
    0 3px 10px -4px rgba(12, 14, 30, 0.3);
}

.ch-idtx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-inline-size: 0;
  margin: 0;
}

.ch-name {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ch-title {
  grid-row: 2;
  margin: 0 0 4px;
  font-size: clamp(28px, 8.4vw, 38px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  outline: none;
  text-wrap: balance;
}

.ch-title:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.ch-visual {
  grid-row: 3;
  min-block-size: 0;
  padding: 12px 0 14px;
}

.ch-ctrl {
  /* beside the phone's lower corner, on the outer side */
  --off: calc(var(--pw) / 2 + var(--ctrl-gap, 36px));

  z-index: 3;
  align-self: end;
  justify-self: center;
  margin-block-end: 6px;
  translate: calc(-1 * var(--off)) 0;
}

.ch:nth-child(even) .ch-ctrl {
  translate: var(--off) 0;
}

/* Demo control: white pill with a progress ring */
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  min-inline-size: 48px;
  padding: 0 16px 0 8px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 1px var(--line-soft),
    0 8px 22px -10px rgba(12, 14, 30, 0.4);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s var(--ease);
}

.demo-ic {
  position: relative;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  transition:
    transform 0.25s var(--spring),
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.demo-btn:hover .demo-ic {
  background: var(--blue);
}

.demo-btn:active .demo-ic {
  transform: scale(0.9);
}

.demo-ic svg.ic {
  inline-size: 12px;
  block-size: 12px;
}

.play-ring {
  position: absolute;
  inset: 0;
  inline-size: 32px;
  block-size: 32px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.play-ring circle {
  fill: none;
  stroke-width: 2.4;
}

.play-ring .bg {
  stroke: var(--line);
  opacity: 0;
  transition: opacity 0.2s;
}

.play-ring .fg {
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.2s;
}

.demo-btn[data-state='playing'] .play-ring circle,
.demo-btn[data-state='paused'] .play-ring circle {
  opacity: 1;
}

.demo-btn[data-state='playing'] .demo-ic,
.demo-btn[data-state='paused'] .demo-ic {
  background: #fff;
  color: var(--ink);
}

.demo-btn .ic-pause,
.demo-btn .ic-replay {
  display: none;
}

.demo-btn[data-state='playing'] .ic-play {
  display: none;
}

.demo-btn[data-state='playing'] .ic-pause {
  display: block;
}

.demo-btn[data-state='ended'] .ic-play {
  display: none;
}

.demo-btn[data-state='ended'] .ic-replay {
  display: block;
}

.demo-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--blue);
  border-radius: 999px;
}

.demo-label {
  display: none;
}

/* ───────── CTA: the one blue action (+ Google Play for the Android apps) ───────── */
.cta-row {
  grid-row: 5;
  display: flex;
  gap: 8px;
  margin-block-start: 12px;
}

.cta {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(0, 113, 189, 0.9);
  transition:
    background-color 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.cta:hover {
  background: var(--blue-press);
}

.cta:active {
  transform: scale(0.985);
}

.cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 999px;
}

.cta-label {
  min-inline-size: 0;
  text-align: center;
}

.cta .store {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 500;
  opacity: 0.92;
}

.cta .store svg {
  inline-size: 13px;
  block-size: 13px;
  margin-block-start: -2px;
}

.cta .arrow {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  transition: transform 0.25s var(--ease);
}

.cta:hover .arrow {
  transform: translateX(3px);
}

.cta.shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  animation: shine 0.7s var(--ease) forwards;
}

/* with the Play button beside it, narrow phones show just the Apple mark */
@media (max-width: 413px) {
  .cta-row.has-play .cta .store {
    font-size: 0;
    gap: 0;
  }

  .cta-row.has-play .cta .store svg {
    inline-size: 15px;
    block-size: 15px;
  }
}

/* square companion: same height as the CTA, white with a hairline, Play mark in ink */
.cta-play {
  flex: 0 0 54px;
  min-block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 6px 16px -12px rgba(12, 14, 30, 0.5);
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.cta-play svg {
  inline-size: 18px;
  block-size: 18px;
  margin-inline-start: 2px;
}

.cta-play:hover {
  background: var(--tint);
  color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(0, 113, 189, 0.35);
}

.cta-play:active {
  transform: scale(0.96);
}

.cta-play:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 999px;
}

@keyframes shine {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/* ───────── Proof strip (right under the hero) ─────────
 * Four white cards, each led by a small animated visual (growth line, medal,
 * clock sweep, rising bars); the digits roll in like an odometer. JS adds
 * .is-armed (start states) and then .is-on once the strip is in view; without
 * JS, with reduced motion or ?still, everything shows at rest. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stats {
  padding: 18px var(--side) 34px;
  background: var(--bg);
}

.stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-inline-size: 0;
  padding: 14px 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow:
    0 1px 1px rgba(12, 56, 89, 0.04),
    0 12px 28px -18px rgba(12, 56, 89, 0.32);
}

.stat-viz {
  display: block;
  inline-size: 54px;
  block-size: 30px;
  margin-block-end: 6px;
}

.stat-viz svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.stat-num {
  display: inline-flex;
  align-items: flex-start;
  font-size: clamp(22px, 6.6vw, 30px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}

.stat-num i {
  display: block;
  block-size: 1em;
  line-height: 1;
  font-style: normal;
  color: var(--blue);
}

.stat-label {
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

.stat-aside {
  color: var(--muted);
  font-weight: 400;
}

/* visuals (final state) */
.viz-area {
  fill: var(--blue);
  opacity: 0.12;
}

.viz-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.viz-dot {
  fill: var(--blue);
  transform-box: fill-box;
  transform-origin: center;
}

.viz-ring {
  fill: var(--tint);
  stroke: var(--blue);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.viz-star {
  fill: var(--blue);
  transform-box: fill-box;
  transform-origin: center;
}

.viz-ribbon {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.viz-track {
  fill: none;
  stroke: var(--tint);
  stroke-width: 3.4;
}

.viz-arc {
  fill: none;
  stroke: var(--blue);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0.38;
  transform: rotate(-90deg);
  transform-origin: 16px 16px;
}

.viz-hand {
  stroke: var(--navy);
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: 16px 16px;
  transform: rotate(223deg);
}

.viz-hub {
  fill: var(--navy);
}

.viz-bar {
  fill: #cfe3f1;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.viz-bar.is-top {
  fill: var(--blue);
}

/* odometer digits */
.odo {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}

.odo-s {
  display: block;
  block-size: 1em;
  line-height: 1;
}

.odo-d {
  display: inline-block;
  block-size: 1em;
  overflow: hidden;
}

.odo-col {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--n) * -1em));
}

.odo-col > span {
  display: block;
  block-size: 1em;
  line-height: 1;
}

/* start states, then the entrance */
.is-armed .odo-col {
  transform: translateY(0);
  transition: transform 1.5s var(--ease-out) var(--od, 0ms);
}

.is-armed.is-on .odo-col {
  transform: translateY(calc(var(--n) * -1em));
}

.stats.is-armed .viz-line {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease) 0.2s;
}

.stats.is-armed .viz-area {
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.9s;
}

.stats.is-armed .viz-dot {
  transform: scale(0);
  transition: transform 0.5s var(--spring) 1.3s;
}

.stats.is-armed .viz-ring {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease) 0.25s;
}

.stats.is-armed .viz-star {
  transform: scale(0) rotate(-40deg);
  transition: transform 0.6s var(--spring) 1s;
}

.stats.is-armed .viz-ribbon {
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.9s;
}

.stats.is-armed .stat-pop {
  transform: scale(0.55);
  opacity: 0;
  transition:
    transform 0.6s var(--spring) 0.55s,
    opacity 0.3s var(--ease) 0.55s;
}

.stats.is-armed .viz-arc {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease-out) 0.3s;
}

.stats.is-armed .viz-hand {
  transform: rotate(0deg);
  transition: transform 1.4s var(--ease-out) 0.3s;
}

.stats.is-armed .viz-bar {
  transform: scaleY(0);
  transition: transform 0.7s var(--spring);
}

.stats.is-armed .viz-bar:nth-child(1) {
  transition-delay: 0.3s;
}

.stats.is-armed .viz-bar:nth-child(2) {
  transition-delay: 0.42s;
}

.stats.is-armed .viz-bar:nth-child(3) {
  transition-delay: 0.54s;
}

.stats.is-armed .viz-bar:nth-child(4) {
  transition-delay: 0.66s;
}

.stats.is-armed.is-on .viz-line {
  stroke-dashoffset: 0;
}

.stats.is-armed.is-on .viz-area {
  opacity: 0.12;
}

.stats.is-armed.is-on .viz-dot,
.stats.is-armed.is-on .viz-bar {
  transform: none;
}

.stats.is-armed.is-on .viz-ring {
  stroke-dashoffset: 0;
}

.stats.is-armed.is-on .viz-star {
  transform: none;
}

.stats.is-armed.is-on .viz-ribbon {
  opacity: 1;
}

.stats.is-armed.is-on .stat-pop {
  transform: none;
  opacity: 1;
}

.stats.is-armed.is-on .viz-arc {
  stroke-dashoffset: 0.38;
}

.stats.is-armed.is-on .viz-hand {
  transform: rotate(223deg);
}

/* the live "and counting" dot keeps a slow pulse */
@keyframes viz-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.stats.is-on .viz-dot {
  animation: viz-pulse 2.4s var(--ease) 2s infinite;
}

/* ───────── Hero proof pill: stars fill in (the fifth to 80% for 4.8), score + users roll ───────── */
.hero-rating.proof {
  justify-self: start;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  inline-size: max-content;
  max-inline-size: 100%;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  letter-spacing: 0.08em;
  box-shadow:
    0 0 0 1px rgba(12, 14, 30, 0.06),
    0 10px 22px -14px rgba(12, 56, 89, 0.45);
}

.proof .pr-stars {
  display: inline-flex;
  gap: 2px;
}

.proof .st {
  position: relative;
  inline-size: 14px;
  block-size: 14px;
  color: #e3e0db;
}

.proof .st svg {
  inline-size: 14px;
  block-size: 14px;
}

.proof .st-fill {
  position: absolute;
  inset: 0 auto 0 0;
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  width: calc(var(--f) * 100%);
  overflow: hidden;
  color: #f2a900;
}

.proof .pr-score {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.proof .pr-sep {
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--line);
}

.proof .pr-users {
  color: var(--muted);
}

.proof .pr-users b {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.proof .pr-score,
.proof .pr-users {
  display: inline-flex;
  align-items: flex-start;
  line-height: 1;
}

.proof .pr-users span {
  line-height: 1;
}

.hero-rating.proof::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  transform: translateX(-120%);
}

.proof.is-armed .st-fill {
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  width: 0;
  transition: width 0.45s var(--ease-out);
  transition-delay: calc(var(--i) * 110ms + 150ms);
}

.proof.is-armed.is-on .st-fill {
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  width: calc(var(--f) * 100%);
}

.proof.is-armed.is-on::after {
  transition: transform 1.1s var(--ease) 1.5s;
  transform: translateX(120%);
}

/* ───────── Reviews: pale-blue surface, white cards ───────── */
.reviews {
  display: flex;
  flex-direction: column;
  block-size: var(--screen);
  min-block-size: 460px;
  padding: 22px 0 16px;
  background: var(--tint);

  --pad: var(--side);
}

.rv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 var(--pad);
}

.rv-title,
.closer-title {
  margin: 0;
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.rv-label {
  flex: none;
  margin: 0 0 4px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(12, 56, 89, 0.18);
  color: var(--navy);
  letter-spacing: 0.06em;
}

.car {
  position: relative;
  flex: 1 1 0;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
}

.car-track {
  position: relative;
  flex: 1 1 0;
  min-block-size: 0;
  max-block-size: 470px;
  display: flex;
  gap: 12px;
  padding: 16px var(--pad) 26px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.car-track::-webkit-scrollbar {
  display: none;
}

.car-track:focus-visible {
  outline-offset: -4px;
  border-radius: 28px;
}

.rv-card {
  position: relative;
  flex: 0 0 calc(100% - 2 * var(--g) - 26px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow:
    0 1px 1px rgba(12, 56, 89, 0.04),
    0 12px 28px -16px rgba(12, 56, 89, 0.32);
}

.rv-app {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rv-app .app-icon {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 11px;
  flex: none;
  box-shadow: 0 2px 8px -3px rgba(12, 14, 30, 0.25);
}

.rv-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.rv-stars {
  flex: 0 0 100%;
  display: inline-flex;
  gap: 3px;
  color: var(--blue);
}

.rv-stars svg {
  inline-size: 15px;
  block-size: 15px;
}

.rv-quote {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 14px 0;
  position: relative;
}

.rv-quote::before {
  content: '\201C';
  display: block;
  block-size: 34px;
  margin-block-end: 4px;
  font:
    700 64px/1 Georgia,
    'Times New Roman',
    serif;
  color: var(--blue);
}

.rv-quote p {
  margin: 0;
  font-size: clamp(21px, 6.4vw, 27px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.rv-who {
  padding-block-start: 14px;
  border-block-start: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.rv-who b {
  color: var(--ink);
  font-weight: 600;
}

.car-nav {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--pad);
}

.car-count {
  color: var(--muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.car-count b {
  color: var(--ink);
  font-weight: 700;
}

.car-dots {
  display: flex;
  gap: 6px;
  flex: 1;
}

.car-dots i {
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  width: 6px;
  block-size: 6px;
  border-radius: 3px;
  background: rgba(12, 56, 89, 0.2);
  transition:
    width 0.35s var(--ease),
    background-color 0.3s var(--ease);
}

.car-dots i.is-on {
  /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
  width: 20px;
  background: var(--blue);
}

.car-btns {
  display: flex;
  gap: 8px;
}

.car-btn {
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    opacity 0.2s var(--ease),
    transform 0.15s var(--ease);
}

.car-btn svg {
  inline-size: 18px;
  block-size: 18px;
}

.car-btn:hover:not(:disabled) {
  background: var(--ink);
  color: #fff;
}

.car-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.car-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.car-btn:focus-visible {
  border-radius: 50%;
}

/* ───────── Pick an app + footer: one screen ───────── */
.closer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: calc(var(--screen) - var(--foot-h));
  padding: 16px var(--side) 20px;
  background: var(--bg);
}

.closer-title {
  margin: 0 0 14px;
}

.index {
  --ix-gap: 12px;

  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}

.index li {
  position: relative;
  border-block-end: 1px solid var(--line);
}

.ix-row {
  display: flex;
  align-items: center;
  gap: var(--ix-gap);
  min-block-size: 56px;
  padding: 4px 2px;
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color 0.2s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.ix-row:focus-visible {
  outline-offset: 0;
}

.ix-num {
  flex: 0 0 26px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.index .app-icon {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  flex: none;
  box-shadow: 0 2px 8px -3px rgba(12, 14, 30, 0.25);
}

.ix-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* store marks: matching 32 px hairline chips. The Apple chip belongs to the
 * row link (App Store); the Play chip is its own link, laid over .ix-slot */
.ix-store,
.ix-play-ic {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
}

.ix-store {
  color: var(--ink);
  background: #fff;
}

.ix-store svg {
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: -1px;
}

.ix-slot {
  flex: 0 0 32px;
  block-size: 32px;
  margin-inline-start: -4px;
}

.ix-play {
  /* centred on .ix-slot: row padding 2 + arrow 20 + gap + half the slot, less half the link */
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: calc(16px + var(--ix-gap));
  inline-size: 44px;
  block-size: 44px;
  margin-block-start: -22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ix-play-ic {
  background: #fff;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.ix-play svg {
  inline-size: 15px;
  block-size: 15px;
  margin-inline-start: 1px;
}

.ix-play:hover {
  color: var(--blue);
}

.ix-play:hover .ix-play-ic {
  background: var(--tint);
  box-shadow: inset 0 0 0 1px rgba(0, 113, 189, 0.35);
}

.ix-play:focus-visible {
  outline-offset: -2px;
  border-radius: 50%;
}

.index .arrow {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--blue);
  transition: transform 0.3s var(--ease);
}

.ix-row:hover .arrow {
  transform: translateX(4px);
}

.ix-row:hover .ix-name {
  color: var(--blue);
}

/* ───────── Footer (navy, the one large navy surface) ───────── */
.site-footer {
  min-block-size: var(--foot-h);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.72);
  padding: 30px var(--g) calc(22px + env(safe-area-inset-bottom));
}

.site-footer > div {
  max-inline-size: calc(var(--main-w) - 2 * var(--g));
  margin: 0 auto;
}

.site-footer .wm {
  inline-size: 132px;
  block-size: auto;
}

.site-footer .tag {
  margin: 10px 0 14px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.foot-links {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.foot-links a,
.foot-links button {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.foot-links a:hover,
.foot-links button:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer small {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 18px;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

/* ───────── Entrance motion ───────── */
.js .rise {
  opacity: 0;
  transform: translateY(18px);
}

.js .rise.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--ease),
    transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .ch-phone.rise,
.js .reel-phone.rise {
  transform: translateY(48px);
}

.js .ch-phone.rise.in,
.js .reel-phone.rise.in {
  transform: none;
  transition:
    opacity 0.9s var(--ease),
    transform 1.2s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .disc.reveal {
  opacity: 0;
  transform: scale(0.82);
}

.js .disc.reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 1s var(--ease),
    transform 1.4s var(--ease-out);
}

/* ───────── Narrow phones ───────── */
@media (max-width: 389px) {
  .cta {
    padding: 0 16px;
    gap: 10px;
    font-size: 15px;
  }

  .cta-label {
    white-space: nowrap;
  }

  .cta .store {
    padding-inline-start: 10px;
  }

  .index {
    --ix-gap: 10px;
  }

  .ix-num {
    flex-basis: 22px;
  }

  .ix-name {
    font-size: 17px;
    letter-spacing: -0.025em;
  }

  /* the bar uses the full width so every name stays on one line */
  .ab-in {
    padding-inline: 4px;
  }

  .ab {
    padding: 0 3px;
  }

  .ab-name {
    letter-spacing: -0.025em;
  }
}

@media (max-width: 359px) {
  :root {
    --g: 16px;
  }

  .foot-links {
    gap: 0 14px;
  }

  .hero h1 {
    letter-spacing: -0.04em;
  }

  .cta {
    padding: 0 14px;
  }

  .cta .store {
    font-size: 0;
    gap: 0;
  }

  .cta .store svg {
    inline-size: 15px;
    block-size: 15px;
  }

  .ix-name {
    font-size: 16px;
  }

  .ab {
    padding: 0 2px;
  }

  .ab-name {
    font-size: 11.5px;
    letter-spacing: -0.03em;
  }

  .rv-card {
    padding: 18px 18px 16px;
  }
}

/* below 375 the index drops its numbers so every app name stays on one line */
@media (max-width: 374px) {
  .ix-num {
    display: none;
  }
}

/* Short phones: tighten the vertical rhythm so every screen still fits */
@media (max-height: 680px) and (max-width: 1023px) {
  .hero {
    padding-block-start: 14px;
  }

  .hero-rating {
    display: none;
  }

  .hero h1 {
    font-size: clamp(32px, 10.4vw, 44px);
  }

  :root {
    --bar-h: 54px;
  }

  .ch {
    padding-block: calc(12px + var(--bar-h)) 14px;
  }

  .ch-id {
    margin-block-end: 8px;
  }

  .ch-ic {
    inline-size: 36px;
    block-size: 36px;
  }

  .ab-ic {
    inline-size: 24px;
    block-size: 24px;
  }

  .ch-title {
    font-size: clamp(26px, 7.8vw, 34px);
  }

  .cta-row {
    margin-block-start: 10px;
  }

  .cta {
    min-block-size: 50px;
  }

  .rv-quote {
    margin: 10px 0;
  }

  .ix-row {
    min-block-size: 50px;
  }
}

/* ═════════ Tablet (≥ 768): wider column, larger phones and type ═════════ */
@media (min-width: 768px) {
  /* hero film: the tablet's own 4:3 cut */
  .hero.v-on .vstage {
    aspect-ratio: 4 / 3;
    background-image: url('../assets/video/hero-film-poster-4x3.jpg');
  }

  :root {
    --g: 32px;
    --main-w: 720px;
    --header-h: 64px;
    --foot-h: 196px;
    --bar-h: 56px;
  }

  /* wide enough for icon beside name */
  .ab {
    flex-direction: row;
    gap: 8px;
  }

  .ab-name {
    font-size: 13px;
    line-height: 16px;
    white-space: nowrap;
  }

  .brand img {
    inline-size: 136px;
  }

  .hero h1 {
    font-size: clamp(50px, 7.4vw, 64px);
  }

  .reel {
    --pw-max: 300px;
  }

  .ch-title {
    font-size: clamp(38px, 5.6vw, 48px);
  }

  .stage {
    --pw-max: 300px;
  }

  .cta-row {
    justify-self: center;
  }

  .cta {
    min-inline-size: 340px;
  }

  .explore {
    justify-self: center;
    min-inline-size: 280px;
  }

  .rv-card {
    flex-basis: calc((100% - 12px) / 2);
  }

  .rv-title,
  .closer-title {
    font-size: 44px;
  }

  /* proof strip: one row of four */
  .stats {
    padding: 24px var(--side) 52px;
  }

  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .stat {
    padding: 18px 18px 20px;
    border-radius: 22px;
    gap: 8px;
  }

  .stat-viz {
    inline-size: 60px;
    block-size: 34px;
    margin-block-end: 8px;
  }

  .stat-num {
    font-size: clamp(22px, 3.3vw, 30px);
  }

  .stat-label {
    font-size: 14px;
    line-height: 19px;
  }

  .site-footer > div {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'wm links' 'tag links' 'copy copy';
    column-gap: 32px;
    align-items: center;
  }

  .site-footer .wm {
    grid-area: wm;
  }

  .site-footer .tag {
    grid-area: tag;
    margin: 8px 0 0;
  }

  .foot-links {
    grid-area: links;
    margin: 0;
    justify-content: flex-end;
  }

  .site-footer small {
    grid-area: copy;
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* ═════════ Desktop (≥ 1024): two columns, phone beside the copy ═════════ */
@media (min-width: 1024px) {
  :root {
    --g: 48px;
    --main-w: 1200px;
    --header-h: 72px;
    --foot-h: 164px;
    --bar-h: 0px;
  }

  .appbar {
    display: none;
  }

  /* Header: wordmark · the five apps · Log in */
  .header-in {
    max-inline-size: var(--main-w);
  }

  .brand img {
    inline-size: 142px;
  }

  /* each app with its icon; a pale-blue pill slides to the app on screen */
  .top-nav {
    position: relative;
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .top-nav ul {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
  }

  .top-nav li {
    position: static;
  }

  .tn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition:
      color 0.2s var(--ease),
      background-color 0.2s var(--ease);
  }

  .tn-ic {
    inline-size: 22px;
    block-size: 22px;
    border-radius: 6px;
    flex: none;
    opacity: 0.72;
    transition: opacity 0.2s var(--ease);
  }

  .tn:hover {
    color: var(--ink);
    background: rgba(12, 14, 30, 0.04);
  }

  .tn:hover .tn-ic {
    opacity: 1;
  }

  .tn.is-on {
    color: var(--blue);
    font-weight: 600;
    background: none;
  }

  .tn.is-on .tn-ic {
    opacity: 1;
  }

  .tn:focus-visible {
    border-radius: 999px;
  }

  .tn-ind {
    position: absolute;
    z-index: 0;
    inset-inline-start: 0;
    inset-block-start: 50%;
    block-size: 44px;
    margin-block-start: -22px;
    /* stylelint-disable-next-line csstools/use-logical -- transitioned by its physical name; keep it physical */
    width: 0;
    border-radius: 999px;
    background: var(--tint);
    opacity: 0;
    transition:
      transform 0.45s var(--ease-out),
      width 0.45s var(--ease-out),
      opacity 0.25s var(--ease);
  }

  /* Hero: headline and prompt on the left; the video (or, as fallback, the
   * reel phone) large on the right */
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    column-gap: 56px;
    padding: 28px var(--side) 28px;
  }

  .hero-rating {
    grid-column: 1;
    grid-row: 2;
    margin-block-end: 18px;
  }

  .hero h1 {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    font-size: clamp(52px, 5.1vw, 76px);
    line-height: 1;
    letter-spacing: -0.05em;
    white-space: nowrap;
  }

  .reel {
    grid-column: 2;
    grid-row: 1 / -1;
    min-block-size: 0;
    padding: 8px 0 24px;

    --pw-max: 340px;
    --pw-cqw: 60cqw;
  }

  .disc-hero {
    --d: min(100cqw, calc(var(--pw) * 2.1), 104cqh);
  }

  /* pause control sits just left of the phone's lower corner */
  .reel-toggle {
    inset-block: auto 36px;
    inset-inline-start: max(0px, calc(50% - var(--pw) / 2 - 72px));
  }

  .explore {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-block-start: 40px;
    min-block-size: 54px;
    padding: 0 28px;
    min-inline-size: 0;
  }

  /* video hero: headline + CTA in one row on top, the 16:9 video large below
   * (as big as one screen allows, so each app scene reads in detail) */
  .hero.v-on {
    --hero-top: 150px; /* rating + two-line headline row */

    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 0;
    align-content: start;
    padding-block: 24px;
  }

  .hero.v-on .hero-rating {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 10px;
  }

  .hero.v-on h1 {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    font-size: clamp(40px, 3.3vw, 52px);
    line-height: 1;
    white-space: nowrap;
  }

  .hero.v-on .explore {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    margin: 0;
  }

  .hero.v-on .vstage {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    align-self: start;
    margin: 24px 0 0;
    inline-size: min(100%, calc((100svh - var(--header-h) - 48px - var(--hero-top) - 24px) * 16 / 9));
    block-size: auto;
    aspect-ratio: 16 / 9;

    --vs-r: 28px;

    border-radius: var(--vs-r);
    box-shadow:
      0 0 0 1px rgba(12, 14, 30, 0.06),
      0 40px 80px -40px rgba(12, 14, 30, 0.55);
    background-image: url('../assets/video/hero-film-poster.jpg');
  }

  /* pause / play: bottom centre */
  .vs-toggle {
    inset-block: auto 14px;
    inset-inline: 50% auto;
    margin-inline-start: -22px;
  }

  /* Chapters: phone on one side, copy on the other, alternating */
  .ch {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
    column-gap: 72px;
    padding: 28px var(--side) 28px;
  }

  .ch > .ch-id,
  .ch > .ch-title,
  .ch > .cta-row {
    grid-column: 2;
  }

  .ch-id {
    grid-row: 2;
    gap: 14px;
    margin-block-end: 22px;
  }

  .ch-ic {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 12px;
  }

  .ch-name {
    font-size: 18px;
    line-height: 22px;
  }

  .ch-title {
    grid-row: 3;
    margin: 0;
    font-size: clamp(48px, 4.6vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .ch-visual {
    grid-column: 1;
    grid-row: 1 / -1;
    padding: 8px 0 28px;

    --pw-max: 330px;
    --pw-cqw: 70cqw;
  }

  .cta-row {
    grid-row: 5;
    justify-self: start;
    margin-block-start: 36px;
  }

  .cta {
    min-block-size: 56px;
    padding: 0 26px;
    min-inline-size: 320px;
  }

  .cta-play {
    flex-basis: 56px;
  }

  .ch:nth-child(even) > .ch-id,
  .ch:nth-child(even) > .ch-title,
  .ch:nth-child(even) > .cta-row {
    grid-column: 1;
  }

  .ch:nth-child(even) .ch-visual {
    grid-column: 2;
  }

  /* demo control sits beside the phone's lower corner, on the outer side */
  .ch-ctrl {
    --ctrl-gap: 56px;

    margin-block-end: 14px;
  }

  /* Reviews: three cards in view */
  .reviews {
    justify-content: center;
    padding: 48px 0 44px;

    --pad: var(--side);
  }

  .rv-title {
    font-size: 56px;
  }

  .car {
    flex: 0 1 auto;
    margin-block-start: 12px;
  }

  .car-track {
    flex: 0 1 auto;
    padding-block: 24px 32px;
    gap: 20px;
    max-block-size: none;
  }

  .rv-card {
    flex-basis: calc((100% - 40px) / 3);
    min-block-size: 380px;
    padding: 30px 30px 26px;
  }

  .rv-quote p {
    font-size: 24px;
  }

  .car-dots {
    justify-content: center;
  }

  /* Pick an app: a row of five cards; footer spreads horizontally */
  .closer {
    padding: 40px var(--side) 48px;
  }

  .closer-title {
    font-size: 56px;
    margin-block-end: 32px;
  }

  /* proof strip: larger cards and numerals */
  .stats {
    padding: 40px var(--side) 72px;
  }

  .stats-grid {
    gap: 20px;
  }

  .stat {
    padding: 24px 24px 26px;
    gap: 10px;
  }

  .stat-viz {
    inline-size: 72px;
    block-size: 40px;
    margin-block-end: 10px;
  }

  .stat-num {
    font-size: clamp(32px, 2.7vw, 40px);
  }

  .stat-label {
    font-size: 16px;
    line-height: 22px;
  }

  .hero-rating.proof {
    padding: 8px 16px 8px 12px;
  }

  .index {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    border: 0;
  }

  .index li {
    border: 0;
  }

  .ix-row {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-block-size: 0;
    block-size: 100%;
    padding: 22px 22px 20px;
    border-radius: 22px;
    background: #fff;
    box-shadow:
      0 0 0 1px rgba(12, 14, 30, 0.04),
      0 10px 26px -18px rgba(12, 56, 89, 0.4);
  }

  .index li:hover > .ix-row {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(0, 113, 189, 0.25),
      0 18px 34px -18px rgba(12, 56, 89, 0.45);
  }

  .index .app-icon {
    inline-size: 60px;
    block-size: 60px;
    border-radius: 16px;
    margin: 22px 0 18px;
    order: 1;
  }

  .ix-num {
    flex: none;
    order: 0;
  }

  .ix-name {
    order: 2;
    flex: 1 1 auto;
    font-size: 18px;
  }

  /* store chips top-right, Apple then Play (its own link) as on mobile;
   * cards without Play keep the Apple chip in the corner */
  .ix-store {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 52px;
    order: 3;
  }

  .index li:not(.has-play) .ix-store {
    inset-inline-end: 14px;
  }

  .ix-slot {
    display: none;
  }

  .ix-play {
    inset-block-start: 8px;
    inset-inline-end: 8px;
    margin-block-start: 0;
    transition: transform 0.3s var(--ease);
  }

  .index li:hover > .ix-play {
    transform: translateY(-3px);
  }

  .index .arrow {
    order: 4;
    margin-block-start: 18px;
  }

  .site-footer {
    padding: 36px var(--g) 28px;
  }

  .site-footer > div {
    max-inline-size: calc(var(--main-w) - 2 * var(--g));
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'wm tag links' 'copy copy copy';
    column-gap: 28px;
  }

  .site-footer .tag {
    margin: 0;
  }
}

/* Desktop short windows (e.g. 1280×720): keep the copy column compact */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero h1 {
    font-size: clamp(52px, 5vw, 70px);
  }

  .hero.v-on h1 {
    font-size: clamp(44px, 3.6vw, 52px);
  }

  .explore,
  .hero.v-on .explore {
    margin-block-start: 30px;
  }

  .ch-title {
    font-size: clamp(44px, 4.2vw, 56px);
  }

  .ch-id {
    margin-block-end: 18px;
  }

  .cta-row {
    margin-block-start: 28px;
  }

  .reviews {
    padding: 32px 0 28px;
  }

  .rv-card {
    min-block-size: 330px;
  }

  .closer {
    padding: 28px var(--side) 32px;
  }

  .closer-title {
    margin-block-end: 24px;
  }
}

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

  .js .rise,
  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .js .ch-phone.rise,
  .js .reel-phone.rise,
  .js .disc.reveal {
    transform: none;
  }

  .cta.shine::after {
    animation: none;
  }

  .stats.is-on .viz-dot {
    animation: none;
  }

  * {
    transition-duration: 0ms !important;
  }
}

/* Dev hook (?still): render at rest for static screenshots */
.still *,
.still *::before,
.still *::after {
  transition: none !important;
  animation: none !important;
}