/* CarVue — website styles
   Palette taken from the app (CarTheme.swift / PhoneTheme.swift) and the app icon. */

:root {
  --night: #050B18;      /* CarTheme.background */
  --navy: #0A1A3A;       /* CarTheme.backgroundTop */
  --surface: #101C36;    /* CarTheme.surface */
  --raised: #182847;     /* CarTheme.surfaceHigh */
  --accent: #2F8CFF;     /* AccentColor */
  --bright: #4FB3FF;     /* accentBright */
  --deep: #1554D1;       /* accentDeep */
  --sky: #1BBEFA;        /* icon gradient top */
  --cobalt: #0047FE;     /* icon gradient bottom */
  --live: #1E6BFF;
  --movies: #6B3CFF;
  --series: #0FA3B1;
  --red: #E5243B;
  --green: #34C759;
  --heart: #FF4D6A;

  --text: #EAF2FF;
  --muted: #93A6C9;
  --faint: #5F7398;
  --line: rgba(147, 166, 201, 0.16);

  /* page-level tokens that change with the theme */
  --strong: #ffffff;
  --body-strong: #c6d3ea;
  --hover-bg: rgba(255,255,255,.06);
  --soft-bg: rgba(255,255,255,.04);
  --header-bg: rgba(5, 11, 24, .72);
  --header-solid: rgba(5, 11, 24, .97);
  --panel-bg: linear-gradient(180deg, rgba(16,28,54,.7), rgba(10,18,36,.7));
  --parked-bg: radial-gradient(120% 80% at 100% 0, rgba(27,190,250,.18), transparent 60%), linear-gradient(160deg, #0A1A3A, #071229);
  --card-bg: rgba(5,11,24,.55);
  --glow: rgba(21, 84, 209, .45);
  --store-bg: #ffffff;
  --store-fg: #000000;
  --hero-glow: radial-gradient(closest-side, var(--glow), rgba(10, 26, 58, .25) 55%, transparent 100%);
  --display-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9), 0 0 120px -20px rgba(47,140,255,.35);
  --dash-shadow: rgba(0,0,0,.65);
  --figure-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 100px -30px rgba(47,140,255,.35);
  --cta-glow: radial-gradient(50% 60% at 50% 40%, rgba(21,84,209,.35), transparent 70%);
  --icon-shadow: 0 20px 60px -10px rgba(0,71,254,.6);

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings: Apple's system face (SF Pro) on Apple devices, Inter elsewhere */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  /* the CarPlay mock-up keeps the app's rounded face (SF Pro Rounded on Apple devices, Nunito elsewhere) */
  --rounded: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  color-scheme: dark;
}

/* ---------- Light theme: picked with the switch, or the system's setting ---------- */
:root[data-theme="light"] {
  --night: #F4F7FC;
  --navy: #E6EEFB;
  --surface: #FFFFFF;
  --raised: #E4EBF7;
  --bright: #1767DA;
  --sky: #0B8FD6;
  --text: #0B1A33;
  --muted: #4A5B78;
  --faint: #6F7F9C;
  --line: rgba(11, 26, 51, .12);
  --strong: #000000;
  --body-strong: #26344f;
  --hover-bg: rgba(11,26,51,.05);
  --soft-bg: rgba(11,26,51,.04);
  --header-bg: rgba(244, 247, 252, .78);
  --header-solid: rgba(244, 247, 252, .98);
  --panel-bg: linear-gradient(180deg, #FFFFFF, #F3F7FD);
  --parked-bg: radial-gradient(120% 80% at 100% 0, rgba(27,190,250,.16), transparent 60%), linear-gradient(160deg, #E9F1FD, #F8FBFF);
  --card-bg: #FFFFFF;
  --glow: rgba(47, 140, 255, .28);
  --store-bg: #000000;
  --store-fg: #ffffff;
  --hero-glow: radial-gradient(60% 55% at 50% 60%, rgba(47,140,255,.10), transparent 70%);
    --display-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 2px 4px rgba(11,26,51,.06), 0 24px 48px -24px rgba(11,26,51,.35);
    --dash-shadow: rgba(11,26,51,.18);
    --figure-shadow: 0 2px 4px rgba(11,26,51,.06), 0 24px 48px -26px rgba(11,26,51,.35);
    --cta-glow: linear-gradient(180deg, transparent, rgba(47,140,255,.07) 45%, transparent);
    --icon-shadow: 0 12px 28px -10px rgba(0,71,254,.4);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
  --night: #F4F7FC;
  --navy: #E6EEFB;
  --surface: #FFFFFF;
  --raised: #E4EBF7;
  --bright: #1767DA;
  --sky: #0B8FD6;
  --text: #0B1A33;
  --muted: #4A5B78;
  --faint: #6F7F9C;
  --line: rgba(11, 26, 51, .12);
  --strong: #000000;
  --body-strong: #26344f;
  --hover-bg: rgba(11,26,51,.05);
  --soft-bg: rgba(11,26,51,.04);
  --header-bg: rgba(244, 247, 252, .78);
  --header-solid: rgba(244, 247, 252, .98);
  --panel-bg: linear-gradient(180deg, #FFFFFF, #F3F7FD);
  --parked-bg: radial-gradient(120% 80% at 100% 0, rgba(27,190,250,.16), transparent 60%), linear-gradient(160deg, #E9F1FD, #F8FBFF);
  --card-bg: #FFFFFF;
  --glow: rgba(47, 140, 255, .28);
  --store-bg: #000000;
  --store-fg: #ffffff;
  --hero-glow: radial-gradient(60% 55% at 50% 60%, rgba(47,140,255,.10), transparent 70%);
    --display-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 2px 4px rgba(11,26,51,.06), 0 24px 48px -24px rgba(11,26,51,.35);
    --dash-shadow: rgba(11,26,51,.18);
    --figure-shadow: 0 2px 4px rgba(11,26,51,.06), 0 24px 48px -26px rgba(11,26,51,.35);
    --cta-glow: linear-gradient(180deg, transparent, rgba(47,140,255,.07) 45%, transparent);
    --icon-shadow: 0 12px 28px -10px rgba(0,71,254,.4);
  color-scheme: light;
  }
}
/* The car screen and the illustrations always stay dark, like in the car */
.display {
  --night: #050B18; --navy: #0A1A3A; --surface: #101C36; --raised: #182847;
  --bright: #4FB3FF; --sky: #1BBEFA;
  --text: #EAF2FF; --muted: #93A6C9; --faint: #5F7398; --line: rgba(147, 166, 201, 0.16);
  --strong: #ffffff; --hover-bg: rgba(255,255,255,.06); --soft-bg: rgba(255,255,255,.04);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
 
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--strong); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 800; font-family: var(--display); }
.brand, .steps li::before, .meter-top b, .store-btn strong { font-family: var(--display); }

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

.skip {
  position: absolute;
  left: 16px; top: -60px;
  background: var(--accent); color: #fff;
  padding: 10px 16px; border-radius: 10px;
  z-index: 100; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav {
  display: flex; align-items: center; gap: 24px;
  height: 68px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav-links a {
  display: block; padding: 8px 12px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.nav-links a:hover { color: var(--text); background: var(--hover-bg); }
.nav-tools { display: flex; align-items: center; gap: 10px; }

/* appearance: automatic / light / dark */
.theme-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
}
.theme-switch button {
  width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--muted);
  transition: background-color .15s, color .15s;
}
.theme-switch svg { width: 17px; height: 17px; }
.theme-switch button:hover { color: var(--text); background: var(--hover-bg); }
.theme-switch button[aria-pressed="true"] { background: rgba(47,140,255,.16); color: var(--bright); }

/* language menu: globe button + panel with every language in its own name */
.lang-menu { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.lang-btn .icon { width: 18px; height: 18px; stroke-width: 1.6; color: var(--bright); }
.lang-chev { width: 10px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: transform .2s; }
.lang-btn:hover { border-color: var(--faint); }
.lang-btn[aria-expanded="true"] { background: rgba(47,140,255,.16); border-color: rgba(79,179,255,.55); color: var(--bright); }
.lang-btn[aria-expanded="true"] .lang-chev { transform: rotate(180deg); color: var(--bright); }

.lang-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: min(340px, calc(100vw - 32px));
  padding: 14px;
  background: var(--surface);
  border: 1px solid rgba(147,166,201,.2);
  border-radius: 22px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.lang-menu.is-open .lang-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.lang-menu.up .lang-panel { top: auto; bottom: calc(100% + 10px); right: 0; left: auto; transform: translateY(6px); }
@media (max-width: 720px) { .lang-menu.up .lang-panel { right: auto; left: 0; } }
.lang-menu.up.is-open .lang-panel { transform: none; }
.lang-title { margin: 2px 8px 10px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.lang-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; border-radius: 12px; border: 0;
  background: transparent; color: var(--text); text-align: left;
  font: inherit; font-size: .98rem; font-weight: 500; cursor: pointer;
}
.lang-opt:hover { background: var(--hover-bg); }
.lang-opt .icon { width: 18px; height: 18px; stroke-width: 1.6; color: var(--muted); }
.lang-opt .lang-check { margin-left: auto; width: 16px; height: 16px; color: var(--bright); stroke-width: 2.4; visibility: hidden; }
.lang-opt[aria-checked="true"] { background: rgba(47,140,255,.16); color: var(--bright); font-weight: 650; }
.lang-opt[aria-checked="true"] .lang-check { visibility: visible; }
.lang-opt[aria-checked="true"] .icon { color: var(--bright); }
.lang-system, .lang-system[aria-checked="true"] { background: var(--soft-bg); color: var(--text); font-weight: 500; }
.lang-system:hover { background: var(--hover-bg); }
.lang-system[aria-checked="true"] .icon:not(.lang-check) { color: var(--muted); }
.lang-sep { height: 1px; background: var(--line); margin: 10px 2px; }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.footer-links .lang-menu { margin-top: -8px; }
.menu-btn {
  display: none;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  align-items: center; justify-content: center; cursor: pointer;
}
.menu-btn .icon { width: 20px; height: 20px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: inherit; font-weight: 650; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #4598ff; color: #fff; }
.btn-ghost { color: var(--text); border-color: var(--line); background: var(--soft-bg); }
.btn-ghost:hover { border-color: var(--faint); color: var(--strong); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: .9rem; }

/* App Store button (replace with Apple's official badge when the app is live) */
.store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 22px 8px 16px; border-radius: 14px;
  background: var(--store-bg); color: var(--store-fg); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.store-btn:hover { color: var(--store-fg); box-shadow: 0 8px 30px rgba(47,140,255,.35); }
.store-btn:active { transform: scale(.98); }
.store-btn img { width: 32px; height: 32px; border-radius: 8px; }
.store-btn small { display: block; font-size: .72rem; line-height: 1.1; font-weight: 500; }
.store-btn strong { display: block; font-size: 1.15rem; line-height: 1.15; font-weight: 700; }

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

.hero {
  position: relative;
  padding: clamp(40px, 6vw, 72px) 0 clamp(16px, 3vw, 32px);
  isolation: isolate;
  overflow-x: clip;
}
.hero::before { /* the glow of a car display in a dark cabin */
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: 4%; width: min(1400px, 140vw); height: 70%;
  transform: translateX(-50%);
  background: var(--hero-glow);
  pointer-events: none;
}
.hero-copy { max-width: 940px; }
.hero h1 { text-wrap: balance; }
.hero h1 {
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.02;
  margin-bottom: 24px;
}
.hero-lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 40em; margin-bottom: 32px; }
.hero-lede strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 20px; }
.hero-note { font-size: .92rem; color: var(--faint); margin: 0; }

/* ---------- The car display (hero centerpiece) ---------- */

.display-stage { margin-top: clamp(36px, 5vw, 56px); }

.display-stage { position: relative; isolation: isolate; container-type: inline-size; }

/* the screen housing: thick, matte, a little heavier at the bottom, like a factory car display */
.display {
  position: relative; z-index: 1;
  padding: clamp(8px, 1.1vw, 14px) clamp(8px, 1.1vw, 14px) clamp(12px, 1.7vw, 22px);
  border-radius: clamp(14px, 1.8vw, 24px) clamp(14px, 1.8vw, 24px) clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px);
  background: linear-gradient(180deg, #23272f 0, #101216 2%, #0b0c10 75%, #171a20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.05),
    var(--display-shadow);
}
/* the stand under the screen, shaped like the one in the CarVue icon: a neck and a wide base */
.mount { position: relative; z-index: 1; height: clamp(18px, 2.4vw, 32px); margin-top: -1px; }
.mount .neck {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 46%; height: 55%;
  background: linear-gradient(180deg, #0b0c10, #1c2028);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.mount .base {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 86%; height: 62%;
  background: linear-gradient(180deg, #343a46, #151820 70%, #0d0f14);
  clip-path: polygon(1.5% 0, 26% 0, 28.5% 35%, 71.5% 35%, 74% 0, 98.5% 0, 100% 100%, 0 100%);
  border-radius: 0 0 6px 6px;
}
.mount::after { /* shadow of the stand on the dashboard */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -14px; height: 18px;
  background: radial-gradient(50% 100% at 50% 0, rgba(0,0,0,.6), transparent 75%);
  filter: blur(3px);
}

/* the dashboard the screen is mounted on */
.dash {
  position: absolute; z-index: 0; left: -8%; right: -8%;
  top: 33cqw; height: calc(12cqw + 70px);
  border-radius: 50% 50% 0 0 / clamp(40px, 7vw, 110px) clamp(40px, 7vw, 110px) 0 0;
  background:
    radial-gradient(40% 30% at 50% 0, rgba(255,255,255,.08), transparent 70%),
    linear-gradient(180deg, #3a4150 0, #262b36 10%, #191d26 45%, #11141a 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -40px 60px -30px rgba(0,0,0,.5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, #000 70%, transparent);
  mask-composite: intersect;
}
.display-stage .display-caption { position: relative; z-index: 1; margin-top: clamp(56px, 7vw, 88px); }

.screen {
  container-type: inline-size;
  position: relative;
  display: flex;
  aspect-ratio: 1100 / 450;
  border-radius: clamp(8px, 1vw, 12px);
  overflow: hidden;
  background: #000;
  font-family: var(--rounded);
}
.screen::after { /* glass reflection */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 30%);
}

/* generic CarPlay-style dock */
.cp-dock {
  flex: none; width: 7.2cqw;
  display: flex; flex-direction: column; align-items: center; gap: 1.6cqw;
  padding: 1.6cqw 0;
  background: #0b0d12;
  border-right: 1px solid rgba(255,255,255,.05);
}
.cp-time { font-size: 1.3cqw; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.cp-app { width: 4.4cqw; height: 4.4cqw; border-radius: 1.1cqw; background: var(--raised); }
.cp-app.a { background: linear-gradient(160deg, #3dd36b, #1e9e46); }
.cp-app.b { background: linear-gradient(160deg, #ff6a55, #e5243b); }
.cp-app.c { background: linear-gradient(160deg, #ffcf4a, #f59e0b); }
.cp-app img { width: 100%; height: 100%; border-radius: inherit; }
.cp-app.is-on { box-shadow: 0 0 0 .25cqw #0b0d12, 0 0 0 .5cqw rgba(255,255,255,.85); }
.cp-apps { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; }
.cp-grid { display: grid; grid-template-columns: repeat(3, .7cqw); gap: .35cqw; }
.cp-grid i { width: .7cqw; height: .7cqw; border-radius: 50%; background: rgba(255,255,255,.55); }

/* ---- CarVue's car UI. Sizes are the app's own points (CarTheme / CarCells):
   the app area is drawn as a 1100 × 450 pt screen, so 1pt = --pt. ---- */
.app {
  --pt: calc(100cqw * 0.928 / 1100);
  --white2: rgba(255,255,255,.62);   /* textSecondary */
  --white3: rgba(255,255,255,.4);    /* textTertiary */
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--navy), var(--night) 75%);
  font-size: calc(var(--pt) * 13);
  line-height: 1.2;
  color: #fff;
}
.app .icon { width: 1em; height: 1em; stroke-width: 2.1; }

/* top bar: 60pt, pill tab bar centered, round buttons on the right */
.app-bar {
  flex: none; height: calc(var(--pt) * 60);
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 0 calc(var(--pt) * 14);
}
.pills {
  display: inline-flex; gap: calc(var(--pt) * 4);
  padding: calc(var(--pt) * 4) calc(var(--pt) * 6);
  height: calc(var(--pt) * 44);
  border-radius: calc(var(--pt) * 22);
  background: rgba(16, 28, 54, .55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pill {
  font: inherit; font-size: calc(var(--pt) * 15); font-weight: 600; color: #fff;
  padding: 0 calc(var(--pt) * 11);
  border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  white-space: nowrap;
  transition: background .25s, opacity .25s;
}
.pill:hover { background: rgba(255,255,255,.08); }
.pill[aria-selected="true"] { background: linear-gradient(135deg, var(--bright), var(--accent) 50%, var(--deep)); }
.pill:focus-visible { outline-offset: 1px; border-radius: 999px; }
.bar-btns {
  position: absolute; right: calc(var(--pt) * 14); top: 50%; transform: translateY(-50%);
  display: flex; gap: calc(var(--pt) * 6);
}
.cbtn {
  width: calc(var(--pt) * 42); height: calc(var(--pt) * 42); border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.06); color: #fff;
  font-size: calc(var(--pt) * 17);
  border: 0; padding: 0; font-family: inherit; cursor: default;
}
button.cbtn { cursor: pointer; }
button.cbtn:hover { background: rgba(255,255,255,.14); }
.only-local { display: none; }
.app[data-tab="local"] .only-local { display: grid; }

/* content: sections of shelves, grids and tiles */
.panes { position: relative; flex: 1; min-height: 0; }
.pane {
  position: absolute; inset: 0; overflow: hidden;
  padding: calc(var(--pt) * 4) calc(var(--pt) * 16) 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
.pane.is-active { opacity: 1; visibility: visible; transition: opacity .3s ease; }

.sec { padding-bottom: calc(var(--pt) * 10); }
.sec-h {
  height: calc(var(--pt) * 34);
  display: flex; align-items: baseline; gap: calc(var(--pt) * 8);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 4) 0;
}
.sec-h b { font-size: calc(var(--pt) * 17); font-weight: 700; }
.sec-h span { font-size: calc(var(--pt) * 12); font-weight: 500; color: var(--white2); }
.sec-h .chev { width: calc(var(--pt) * 9); height: calc(var(--pt) * 9); color: var(--white2); stroke-width: 3.2; align-self: center; }

.shelf { display: flex; gap: calc(var(--pt) * 12); padding-top: calc(var(--pt) * 4); }
.grid {
  display: grid; gap: calc(var(--pt) * 12);
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--pt) * 140), 1fr));
  padding-top: calc(var(--pt) * 4);
}

/* a tile: image (rounded 10pt) + title 13pt + subtitle 11pt */
.t { flex: none; min-width: 0; }
.t.land { width: calc(var(--pt) * 140); }
.t.logo { width: calc(var(--pt) * 100); }
.t.poster { width: calc(var(--pt) * 86); }
.t.site { width: calc(var(--pt) * 70); text-align: center; }
.grid .t.land { width: auto; }
.t-img {
  position: relative; overflow: hidden;
  border-radius: calc(var(--pt) * 10);
  background: var(--raised);
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
}
.t.logo .t-img { aspect-ratio: 4 / 3; }
.t.poster .t-img { aspect-ratio: 2 / 3; }
.t.site .t-img { aspect-ratio: 1; }
.t-img > .icon { width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); stroke-width: 1.7; color: #fff; position: relative; }
.t.site .t-img > .icon { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); }
.t b {
  display: block; margin-top: calc(var(--pt) * 5); padding: 0 calc(var(--pt) * 2);
  font-size: calc(var(--pt) * 13); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.t small {
  display: block; padding: 0 calc(var(--pt) * 2); margin-top: calc(var(--pt) * 1);
  font-size: calc(var(--pt) * 11); font-weight: 500; color: var(--white2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.2em;
}
.badge {
  position: absolute; right: calc(var(--pt) * 6); bottom: calc(var(--pt) * 6);
  padding: calc(var(--pt) * 2) calc(var(--pt) * 5);
  border-radius: calc(var(--pt) * 6);
  background: rgba(0,0,0,.6);
  font-size: calc(var(--pt) * 11); font-weight: 700;
}
.initial { font-size: calc(var(--pt) * 30); font-weight: 900; position: relative; }
.t.site .initial { font-size: calc(var(--pt) * 26); }

/* tile colors used by the app */
.c-live { background: rgba(30,107,255,.85); }
.c-movies { background: rgba(107,60,255,.85); }
.c-series { background: rgba(15,163,177,.85); }
.c-deep { background: var(--deep); }

/* channel "logos": abstract marks, shown whole on a dark tile */
.mark { position: relative; display: grid; place-items: center; font-weight: 900; color: #fff; line-height: 1; }
.mark.m1 { width: 58%; height: 52%; border-radius: calc(var(--pt) * 8); background: linear-gradient(135deg, #ff4d6a, #e5243b); font-size: calc(var(--pt) * 15); }
.mark.m2 { width: 46%; aspect-ratio: 1; border-radius: 50%; background: #34c759; font-size: calc(var(--pt) * 15); }
.mark.m3 { width: 60%; height: 44%; border-radius: 999px; background: #ffcf4a; color: #1a1300; font-size: calc(var(--pt) * 14); }
.mark.m4 { width: 50%; aspect-ratio: 1; border-radius: calc(var(--pt) * 6); background: #6b3cff; transform: rotate(45deg); }
.mark.m4 span { transform: rotate(-45deg); font-size: calc(var(--pt) * 14); }
.mark.m5 { width: 62%; height: 46%; border-radius: calc(var(--pt) * 6); background: transparent; border: calc(var(--pt) * 3) solid #4fb3ff; color: #4fb3ff; font-size: calc(var(--pt) * 14); }
.mark.m6 { width: 48%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#1bbefa 0 25%, #0047fe 0 50%, #1bbefa 0 75%, #0047fe 0); }

/* movie & series "posters" */
.poster-art { position: absolute; inset: 0; }
.poster-art::after { /* title block of the poster */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 10%; height: 9%;
  border-radius: 2px; background: rgba(255,255,255,.85);
  box-shadow: 0 calc(var(--pt) * -9) 0 calc(var(--pt) * -3) rgba(255,255,255,.45);
}
.pa1 { background: radial-gradient(circle at 50% 36%, #ffd27a 0 16%, transparent 17%), linear-gradient(180deg, #ff7a59, #6b1d4f 70%, #1b0b2a); }
.pa2 { background: linear-gradient(160deg, transparent 55%, #0a1430 55.5%), linear-gradient(180deg, #4fb3ff, #0e5a8a); }
.pa3 { background: radial-gradient(circle at 30% 30%, #34c759 0 12%, transparent 13%), radial-gradient(circle at 70% 45%, #ffcf4a 0 9%, transparent 10%), linear-gradient(180deg, #123c2a, #07160f); }
.pa4 { background: repeating-linear-gradient(135deg, #2a1450 0 10%, #3d1d6e 10% 20%); }
.pa5 { background: radial-gradient(60% 40% at 50% 40%, rgba(229,36,59,.8), transparent), linear-gradient(180deg, #1a0a12, #3a0d16); }
.pa6 { background: linear-gradient(180deg, #d9ecff 0 45%, #7fbcff 45% 60%, #1554d1 60%); }

/* Search: covers the tab bar; back, title, search field and voice in its top bar */
.pane-search { background: linear-gradient(180deg, var(--navy), var(--night) 75%); display: flex; flex-direction: column; }
.app[data-tab="search"] .app-bar { visibility: hidden; }
.s-bar {
  flex: none; height: calc(var(--pt) * 60);
  display: flex; align-items: center; gap: calc(var(--pt) * 8);
  padding: 0 calc(var(--pt) * 14) 0 calc(var(--pt) * 12);
}
.s-bar .cbtn { width: calc(var(--pt) * 40); height: calc(var(--pt) * 40); }
.s-title { font-size: calc(var(--pt) * 17); font-weight: 700; margin: 0 calc(var(--pt) * 4); }
.s-field {
  flex: 1; min-width: 0; height: calc(var(--pt) * 40); border-radius: 999px;
  display: flex; align-items: center; gap: calc(var(--pt) * 7); padding: 0 calc(var(--pt) * 16);
  background: var(--raised); font-size: calc(var(--pt) * 15); font-weight: 600; color: #fff;
}
.s-field .icon { font-size: calc(var(--pt) * 14); flex: none; }
.s-results { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--pt) * 4) calc(var(--pt) * 16) 0; }

/* Browser: covers the whole app, like in the car */
.pane-full { position: absolute; inset: calc(var(--pt) * -60) 0 0 0; padding: 0; z-index: 3; }  /* over the top bar too */
.app[data-tab="browser"] .app-bar, .app[data-tab="cast"] .app-bar { visibility: hidden; }
.browser { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--navy), var(--night) 75%); }
.b-toolbar {
  flex: none; height: calc(var(--pt) * 54);
  display: flex; align-items: center; gap: calc(var(--pt) * 8);
  padding: 0 calc(var(--pt) * 8);
}
.b-group { display: flex; gap: calc(var(--pt) * 4); }
.b-toolbar .cbtn { width: calc(var(--pt) * 38); height: calc(var(--pt) * 38); font-size: calc(var(--pt) * 16); }
.b-url {
  flex: 1; min-width: 0; height: calc(var(--pt) * 36); border-radius: 999px;
  display: flex; align-items: center; gap: calc(var(--pt) * 7); padding: 0 calc(var(--pt) * 14);
  background: rgba(255,255,255,.08); color: var(--white3);
  font-size: calc(var(--pt) * 15); font-weight: 600; white-space: nowrap; overflow: hidden;
}
.b-url .icon { font-size: calc(var(--pt) * 14); flex: none; }
.browser .b-home { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--pt) * 4) calc(var(--pt) * 16) 0; }
.grid.sites { grid-template-columns: repeat(auto-fill, minmax(calc(var(--pt) * 70), 1fr)); }
.grid.sites .t.site { width: auto; }

/* Cast: the iPhone screen, full screen, with Aspect and the red End button */
.cast {
  position: absolute; inset: 0; background: #000;
  display: flex; justify-content: center;
}
.cast { --app-w: 1100; --app-h: 450; }
/* the iPhone held upright: a tall picture in the middle */
.cast-screen {
  position: absolute; inset: 0; margin: auto;
  height: 100%; width: calc(var(--pt) * var(--app-h) * 9 / 19.5);
  display: flex; flex-direction: column; gap: 3%;
  padding: 7% 4% 4%;
  background: linear-gradient(180deg, #13284f, #0a1430);
}
/* the iPhone turned sideways: a full-width video */
.cast-land {
  position: absolute; inset: 0; margin: auto;
  width: min(calc(var(--pt) * var(--app-w)), calc(var(--pt) * var(--app-h) * 19.5 / 9));
  height: calc(min(calc(var(--pt) * var(--app-w)), calc(var(--pt) * var(--app-h) * 19.5 / 9)) * 9 / 19.5);
  overflow: hidden; opacity: 0;
}
.cl-video { position: absolute; inset: 0; }
.cl-top { position: absolute; left: 0; right: 0; top: 0; height: 18%; display: flex; align-items: center; gap: 2%; padding: 0 4%; background: linear-gradient(180deg, rgba(0,0,0,.45), transparent); }
.cl-back { width: 2.4%; aspect-ratio: 1; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.cl-title { width: 22%; height: 9%; min-height: 4px; border-radius: 99px; background: rgba(255,255,255,.85); }
.cl-play { position: absolute; left: 50%; top: 50%; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.4); }
.cl-play::after { content: ""; position: absolute; inset: 30% 28% 30% 38%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cl-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; display: flex; align-items: center; gap: 2%; padding: 0 4%; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent); }
.cl-time { width: 5%; height: 8%; min-height: 3px; border-radius: 99px; background: rgba(255,255,255,.7); }
.cl-progress { flex: 1; height: 6%; min-height: 3px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden; }
.cl-progress i { display: block; height: 100%; width: 38%; background: var(--accent); }

/* turning the phone: the upright picture rotates away and the wide one rotates in */
.pane.is-active .cast-portrait { animation: cast-portrait 7s cubic-bezier(.6,0,.3,1) infinite; }
.pane.is-active .cast-land { animation: cast-land 7s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cast-portrait {
  0%, 26% { opacity: 1; transform: none; }
  38%, 92% { opacity: 0; transform: rotate(-90deg) scale(1.5); }
  100% { opacity: 1; transform: none; }
}
@keyframes cast-land {
  0%, 28% { opacity: 0; transform: rotate(90deg) scale(.45); }
  40%, 90% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: rotate(90deg) scale(.45); }
}
.cast-screen .bar { height: 2.2%; border-radius: 1em; background: rgba(255,255,255,.2); flex: none; }
.cast-screen .bar.w60 { width: 60%; } .cast-screen .bar.w40 { width: 40%; }
.cast-screen .vid { aspect-ratio: 16 / 9; border-radius: calc(var(--pt) * 6); flex: none; }
.cast-tools { position: absolute; top: calc(var(--pt) * 10); right: calc(var(--pt) * 12); display: flex; gap: calc(var(--pt) * 8); align-items: center; }
.cast-tools .cbtn { width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); font-size: calc(var(--pt) * 14); background: rgba(255,255,255,.12); }
.end-btn {
  display: inline-flex; align-items: center; gap: calc(var(--pt) * 6);
  height: calc(var(--pt) * 32); padding: 0 calc(var(--pt) * 14);
  border-radius: 999px; background: var(--red); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-size: calc(var(--pt) * 15); font-weight: 600;
}
.end-btn .icon { font-size: calc(var(--pt) * 11); stroke-width: 3; }

/* abstract "scenes" used as video thumbnails */
.s-lake { background:
  radial-gradient(circle at 70% 46%, #ffe7b0 0 5%, rgba(255,231,176,0) 12%),
  linear-gradient(180deg, #f6a46b 0%, #ef6b8a 50%, #2d3a85 51%, #1a2156 100%); }
.s-soccer { background:
  radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(255,255,255,.75) 17.5% 19%, transparent 19.5%),
  linear-gradient(90deg, transparent 49.6%, rgba(255,255,255,.75) 49.6% 50.4%, transparent 50.4%),
  repeating-linear-gradient(90deg, #2f8f4e 0 12.5%, #38a05a 12.5% 25%); }
.s-concert { background:
  conic-gradient(from 160deg at 30% 0, transparent 0 10deg, rgba(79,179,255,.55) 10deg 26deg, transparent 26deg 360deg),
  conic-gradient(from 175deg at 72% 0, transparent 0 8deg, rgba(255,77,106,.5) 8deg 24deg, transparent 24deg 360deg),
  linear-gradient(180deg, #170f35, #2a1450 70%, #0b0718); }
.s-coast { background: linear-gradient(118deg, #0e5a8a 0 42%, #f1dcab 42.5% 50%, #3d8a55 50.5% 100%); }
.s-mountain { background: linear-gradient(180deg, #7fbcff, #d9ecff 75%); }
.s-mountain::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #3b5384, #1a2645 80%);
  clip-path: polygon(0 100%, 0 72%, 28% 38%, 46% 60%, 68% 26%, 100% 66%, 100% 100%);
}
.s-city { background:
  radial-gradient(circle, #ffd27a 0 1.2px, transparent 1.6px) 0 40% / 9% 14%,
  linear-gradient(180deg, #0d1840 0 38%, #121a33 38% 100%); }
.s-party { background:
  radial-gradient(circle at 20% 30%, #ffd84a 0 4%, transparent 4.5%),
  radial-gradient(circle at 75% 25%, #4fb3ff 0 3.5%, transparent 4%),
  radial-gradient(circle at 60% 70%, #ff4d6a 0 4%, transparent 4.5%),
  radial-gradient(circle at 35% 75%, #34c759 0 3%, transparent 3.5%),
  linear-gradient(160deg, #ff9a5a, #f0558a); }
.s-road { background:
  conic-gradient(from 180deg at 50% 52%, transparent 0 16deg, #f7c948 16deg 18deg, transparent 18deg 342deg, #f7c948 342deg 344deg, transparent 344deg),
  linear-gradient(180deg, transparent 0 52%, #2b2f3a 52%),
  linear-gradient(180deg, #ff9d5c, #ffd59a 52%); }
.s-aurora { background:
  radial-gradient(60% 40% at 30% 40%, rgba(52,199,89,.75), transparent 70%),
  radial-gradient(50% 35% at 72% 30%, rgba(107,60,255,.65), transparent 70%),
  linear-gradient(180deg, #071028, #0d1a3a); }
.s-reef { background:
  radial-gradient(circle at 30% 70%, rgba(255,255,255,.5) 0 2%, transparent 2.5%),
  radial-gradient(circle at 36% 58%, rgba(255,255,255,.4) 0 1.5%, transparent 2%),
  radial-gradient(70% 60% at 50% -10%, #7fe0ff, transparent 70%),
  linear-gradient(180deg, #0a6fa8, #06304f); }
.s-dunes { background:
  radial-gradient(120% 60% at 20% 100%, #d9893f 0 50%, transparent 50.5%),
  radial-gradient(120% 70% at 85% 100%, #c47432 0 55%, transparent 55.5%),
  linear-gradient(180deg, #ffcf8a, #ffe6b8); }
.s-court { background:
  linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.85) 49.5% 50.5%, transparent 50.5%),
  linear-gradient(180deg, transparent 20%, rgba(255,255,255,.85) 20% 22%, transparent 22% 78%, rgba(255,255,255,.85) 78% 80%, transparent 80%),
  linear-gradient(90deg, transparent 12%, rgba(255,255,255,.85) 12% 13%, transparent 13% 87%, rgba(255,255,255,.85) 87% 88%, transparent 88%),
  #2f6fb5; }
.s-forest { background:
  radial-gradient(18% 34% at 15% 80%, #1f5a3a 0 98%, transparent),
  radial-gradient(16% 40% at 38% 76%, #174a30 0 98%, transparent),
  radial-gradient(20% 36% at 64% 82%, #2d7a4c 0 98%, transparent),
  radial-gradient(16% 42% at 88% 74%, #1f5a3a 0 98%, transparent),
  linear-gradient(180deg, #bfe3ff, #e7f4e4); }
.s-kitchen { background:
  radial-gradient(circle at 50% 62%, #f5f0e6 0 22%, #d9cfbd 22.5% 25%, transparent 25.5%),
  radial-gradient(circle at 46% 58%, #e5243b 0 4%, transparent 4.5%),
  radial-gradient(circle at 56% 66%, #34c759 0 3.5%, transparent 4%),
  linear-gradient(180deg, #7a4a2a, #5a341c); }

.display-caption { text-align: center; color: var(--faint); font-size: .9rem; margin: 22px 0 0; }

/* ---------- Generic sections ---------- */

.section { padding: clamp(72px, 10vw, 128px) 0; }
.section + .section { padding-top: 0; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 18px;
}
.section-head p { color: var(--muted); font-size: 1.15rem; margin: 0; }

/* Two ways to watch */
.ways {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel-bg);
  overflow: hidden;
}
.way { padding: clamp(28px, 4vw, 48px); }
.way + .way { border-left: 1px solid var(--line); }
.way-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(47,140,255,.14); color: var(--bright); margin-bottom: 22px;
}
.way-icon .icon { width: 28px; height: 28px; }
.way h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 750; letter-spacing: -0.02em; margin-bottom: 10px; }
.way > p { color: var(--muted); margin-bottom: 26px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .icon { color: var(--bright); margin-top: 2px; }
.checks strong { font-weight: 600; }
.formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; list-style: none; }
.formats li {
  font-size: .85rem; font-weight: 600; color: var(--text);
  padding: 5px 11px; border-radius: 8px; background: var(--raised);
 
}
.ways-note { color: var(--faint); font-size: .95rem; margin: 22px 0 0; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.steps li { counter-increment: step; padding-top: 22px; border-top: 2px solid var(--raised); position: relative; }
.steps li::before {
  content: counter(step);
  display: block; font-size: 3.4rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent);
  margin-bottom: 18px;
}
.steps li:first-child { border-top-color: var(--accent); }
.steps h3 { font-size: 1.3rem; margin-bottom: 8px; }
.steps p { color: var(--muted); margin: 0; }

/* Features */
.feature-groups { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); }
.feature-group h3 {
  font-size: 1.05rem; font-weight: 650; color: var(--bright); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.features { list-style: none; padding: 0; margin: 0; }
.features li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.features li:last-child { border-bottom: 0; }
.f-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); }
.f-icon .icon { width: 22px; height: 22px; }
.features h4 { margin: 0 0 4px; font-size: 1.12rem; font-weight: 750; }
.features p { margin: 0; color: var(--muted); font-size: 1rem; }

/* Cast */
.cast-block { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.cast-figure { margin: 0; }
.cast-figure img {
  width: 100%; height: auto; aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg); border: 1px solid var(--line); background: #05070d;
  box-shadow: var(--figure-shadow);
}
.cast-copy .section-head { margin-bottom: 28px; }
.cast-steps { list-style: none; padding: 0; margin: 0 0 24px; counter-reset: cstep; display: grid; gap: 18px; }
.cast-steps li { counter-increment: cstep; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
.cast-steps li::before {
  content: counter(cstep); grid-row: span 2;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(47,140,255,.16); color: var(--bright); font-weight: 700; font-family: var(--display);
}
.cast-steps h3 { font-size: 1.12rem; margin: 6px 0 4px; }
.cast-steps p { margin: 0; color: var(--muted); }
.cast-notes { list-style: none; padding: 18px 0 0; margin: 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.cast-notes li { display: flex; gap: 10px; color: var(--muted); font-size: .95rem; }
.cast-notes .icon { color: var(--bright); margin-top: 3px; }

/* Parked */
.parked {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px);
  background: var(--parked-bg);
  border: 1px solid var(--line);
}
.parked-head { max-width: 680px; margin-bottom: clamp(24px, 4vw, 40px); }
.parked h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.parked-lede { color: var(--muted); font-size: 1.15rem; margin: 0; }
.moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-bottom: clamp(24px, 4vw, 40px); }
.moment { margin: 0; }
.moment img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  background: #05070d;
}
.moment figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; }
.moment figcaption .icon { color: var(--sky); }
.safety { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.safety-warn { grid-column: 1 / -1; }
.safety-card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px 24px; }
.safety-card h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.safety-card h3 .icon { color: var(--bright); }
.safety-card p { margin: 0; color: var(--muted); font-size: 1rem; }
.safety-warn { font-weight: 600; color: var(--text); margin: 4px 0 0; font-size: 1rem; }

/* Pro */
.pro { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pro .section-head { margin-bottom: 24px; }
.pro-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pro-points li { display: flex; gap: 12px; }
.pro-points .icon { color: var(--bright); margin-top: 3px; }
.meter {
  border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(180deg, var(--surface), #0b1530);
  border: 1px solid var(--line);
}
.meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.meter-top b { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.meter-top span { color: var(--muted); text-align: right; font-size: .95rem; }
.meter-bar { height: 10px; border-radius: 10px; background: var(--raised); overflow: hidden; margin-bottom: 14px; }
.meter-bar i { display: block; height: 100%; width: 62%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--accent)); }
.meter > p { color: var(--muted); font-size: .98rem; margin-bottom: 26px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: rgba(5,11,24,.4); }
.plan b { display: block; font-size: 1.02rem; margin-bottom: 2px; }
.plan span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.4; }
.plan.is-best { border-color: var(--accent); background: rgba(47,140,255,.1); }
.plans-note { font-size: .86rem; color: var(--faint); margin: 14px 0 0; }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 72px); }
.faq .section-head { position: sticky; top: 100px; align-self: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: 1.12rem; font-weight: 600;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s;
}
.faq-list details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-list summary:hover { color: var(--strong); }
.faq-body { padding: 0 0 24px; color: var(--muted); max-width: 62ch; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ol, .faq-body ul { padding-left: 1.2em; margin: 0 0 1em; }

/* Final call to action */
.cta {
  text-align: center; padding: clamp(72px, 10vw, 120px) 0;
  position: relative; isolation: isolate;
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cta-glow);
}
.cta-icon { width: 112px; height: 112px; margin: 0 auto 28px; border-radius: 25px; box-shadow: var(--icon-shadow); }
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.025em; margin-bottom: 16px; }
.cta p { color: var(--muted); font-size: 1.15rem; margin: 0 auto 32px; max-width: 34em; }
.cta .hero-actions { justify-content: center; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 40px; color: var(--muted); font-size: .92rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; margin: 0; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-legal p { margin: 0 0 8px; color: var(--faint); font-size: .85rem; max-width: 80ch; }

/* ---------- Legal pages ---------- */

.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 8vw, 104px); }
.legal-inner { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.legal .updated { color: var(--faint); margin-bottom: 36px; }
.legal h2 { font-size: 1.35rem; font-weight: 700; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--body-strong); }
.legal ul { padding-left: 1.25em; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal .lead { font-size: 1.12rem; }

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

@media (max-width: 960px) {
  .feature-groups, .pro, .faq, .cast-block { grid-template-columns: 1fr; }
  .faq .section-head { position: static; }
}

@media (max-width: 860px) {
  .nav-links {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--header-solid);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 14px 4px; font-size: 1.05rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .menu-btn { display: inline-flex; }
  .nav-tools { margin-left: auto; }
  .nav-tools .btn { display: none; }
  .site-header .lang-panel { position: fixed; top: 74px; left: 16px; right: 16px; width: auto; }
}

@media (max-width: 720px) {
  .ways { grid-template-columns: 1fr; }
  .way + .way { border-left: 0; border-top: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .moments, .safety { grid-template-columns: 1fr; }

  /* the car screen becomes taller and drops the dock on phones (drawn as 540 × 500 pt) */
  .screen { aspect-ratio: 540 / 500; }
  .dash { top: 80cqw; height: calc(14cqw + 40px); }
  .cp-dock { display: none; }
  .app { --pt: calc(100cqw / 540); }
  .cast { --app-w: 540; --app-h: 500; }
  .app-bar { justify-content: flex-start; }
  .app[data-tab="local"] .only-local { display: none; }
  .b-extra { display: none; }
}

@media (max-width: 480px) {
  .site-header .brand span { display: none; }
  .theme-switch button { width: 28px; height: 28px; }
  .nav-tools { gap: 6px; }
}

@media (max-width: 340px) {
  .lang-btn { padding: 0 11px; }
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pane, .pane.is-active { transition: none; transform: none; }
  .pane.is-active .cast-portrait, .pane.is-active .cast-land { animation: none; }
  .btn, .store-btn, .pill { transition: none; }
}