/* Mapish landing page ("journey" design, v2). Hand-written, no dependencies, no external requests.
   privacy.html and 404.html still use site.css. Brand greens mirror mobile/lib/app/theme/app_theme.dart;
   text colours are darker/lighter variants so copy passes WCAG AA. */

:root {
  color-scheme: light dark;
  --bg: #f3f7f4;
  --surface: #ffffff;
  --band: #e8f0eb;
  --ink: #102019;
  --muted: #4f5f58;
  --line: #d3ded8;
  --brand: #0b5f3c;
  --brand-ink: #ffffff;
  --brand-2: #17b978;
  --gold: #a88a3f;
  --wm-map: #0b5f3c; --wm-bang: #a88a3f; --wm-sh: #0f7a4d;
  --focus: #0b5f3c;
  --shadow: 0 24px 48px -24px rgba(16, 40, 30, .28), 0 6px 14px -8px rgba(16, 40, 30, .18);

  /* Stop categories */
  --k-fuel: #0f9d63; --k-food: #e8702a; --k-hotel: #6a55e0;
  --k-view: #1b8fd0; --k-deal: #c9951a; --k-ev: #0fa89a;

  /* 3D scene palette */
  --land: #cfe6c4; --land-2: #bfdcb2; --park: #a9d49a; --water: #8fcbe8; --water-2: #6bb6dc;
  --road: #fbfbf7; --road-edge: #cfd6cf; --route: #0f9d63;
  --road-case: #b9c5bc; --lane: #e6c36a; --urban: #e6e8e1; --street-case: #d5dbd3; --shade: rgba(30, 62, 42, .17);
  --terrain-dark: #5f8f55; --terrain-light: #f6fbf1; --field-line: rgba(90, 130, 80, .22);
  --deck: #e6e3da; --deck-edge: #9aa29d; --rock-1: #b9b2a4; --rock-2: #aaa395; --mtn: #8e9cab; --mtn-lit: #b5c1cc; --snow: #f7f9fb;
  --bld-top: #ffffff; --bld-a: #e3e8ee; --bld-b: #c9d1db;
  --r1t: #f6e7d2; --r1s: #e9dcc8; --r2t: #dfe9f5; --r3t: #f3dcd6; --r3s: #eed7cf;
  --hill-1: #b6d7a6; --hill-2: #9cc98c; --hill-3: #86bb78; --hill-4: #74ab69; --hill-5: #eef3ea;
  --tree: #3f9a5c; --tree-2: #2f7f4a;
  --card: rgba(255, 255, 255, .9); --card-ink: #102019;

  --radius: 20px;
  --maxw: 76rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1110; --surface: #141b19; --band: #111816; --ink: #eef4f1; --muted: #a3b2ab; --line: #26322e;
    --brand: #4bd497; --brand-ink: #04140c; --brand-2: #35d08f; --gold: #d1ae55;
    --wm-map: #7fe3b4; --wm-bang: #d1ae55; --wm-sh: #35d08f; --focus: #7fe3b4;
    --shadow: 0 24px 48px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
    --k-fuel: #2fc585; --k-food: #ff8a45; --k-hotel: #8b7bff; --k-view: #45b3f0; --k-deal: #e6b43a; --k-ev: #2cc9b9;
    --land: #2a3d31; --land-2: #25372b; --park: #2f4a35; --water: #1d4a63; --water-2: #183e55;
    --road: #56625c; --road-edge: #3b4641; --route: #35d08f;
  --road-case: #2b3530; --lane: #9c8a52; --urban: #2e3833; --street-case: #27312c; --shade: rgba(0, 0, 0, .32);
  --terrain-dark: #0b150f; --terrain-light: #4e7057; --field-line: rgba(0, 0, 0, .22);
  --deck: #5b625e; --deck-edge: #7f8883; --rock-1: #55524b; --rock-2: #5e5a53; --mtn: #34414d; --mtn-lit: #46535f; --snow: #c3cfd6;
    --bld-top: #6a7680; --bld-a: #48525c; --bld-b: #3a434c;
    --r1t: #7a7466; --r1s: #4f4a42; --r2t: #62707e; --r3t: #7a6a68; --r3s: #524846;
    --hill-1: #32503a; --hill-2: #3a5c42; --hill-3: #43684b; --hill-4: #4d7455; --hill-5: #c9d6cf;
    --tree: #2e6e45; --tree-2: #25593a;
    --card: rgba(20, 27, 25, .88); --card-ink: #eef4f1;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c1110; --surface: #141b19; --band: #111816; --ink: #eef4f1; --muted: #a3b2ab; --line: #26322e;
  --brand: #4bd497; --brand-ink: #04140c; --brand-2: #35d08f; --gold: #d1ae55;
  --wm-map: #7fe3b4; --wm-bang: #d1ae55; --wm-sh: #35d08f; --focus: #7fe3b4;
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  --k-fuel: #2fc585; --k-food: #ff8a45; --k-hotel: #8b7bff; --k-view: #45b3f0; --k-deal: #e6b43a; --k-ev: #2cc9b9;
  --land: #2a3d31; --land-2: #25372b; --park: #2f4a35; --water: #1d4a63; --water-2: #183e55;
  --road: #56625c; --road-edge: #3b4641; --route: #35d08f;
  --road-case: #2b3530; --lane: #9c8a52; --urban: #2e3833; --street-case: #27312c; --shade: rgba(0, 0, 0, .32);
  --terrain-dark: #0b150f; --terrain-light: #4e7057; --field-line: rgba(0, 0, 0, .22);
  --deck: #5b625e; --deck-edge: #7f8883; --rock-1: #55524b; --rock-2: #5e5a53; --mtn: #34414d; --mtn-lit: #46535f; --snow: #c3cfd6;
  --bld-top: #6a7680; --bld-a: #48525c; --bld-b: #3a434c;
  --r1t: #7a7466; --r1s: #4f4a42; --r2t: #62707e; --r3t: #7a6a68; --r3s: #524846;
  --hill-1: #32503a; --hill-2: #3a5c42; --hill-3: #43684b; --hill-4: #4d7455; --hill-5: #c9d6cf;
  --tree: #2e6e45; --tree-2: #25593a;
  --card: rgba(20, 27, 25, .88); --card-ink: #eef4f1;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; }
.narrow { max-width: 48rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.preview-banner { background: #b3261e; color: #fff; text-align: center; padding: .5rem 1rem; font-weight: 700; font-size: .9rem; }
svg use { pointer-events: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.4rem;
  border-radius: 999px; border: 0; background: var(--brand); color: var(--brand-ink); font: 700 1rem var(--font); text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--brand) 70%, transparent); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.btn.big { min-height: 56px; padding-inline: 2rem; font-size: 1.1rem; }
.btn:disabled { opacity: .6; cursor: default; transform: none; }
/* "Let's go for a ride": golden metallic rim, soft glow and a metal pin in front (owner, 25 Oct 2026). */
.btn.go { position: relative; gap: .7rem; min-height: 60px; padding: .8rem 2.4rem; border: 3px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand)) padding-box,
    linear-gradient(135deg, #8a6a1f 0%, #f7e7a1 22%, #b8892b 42%, #fff4c8 58%, #9c7426 78%, #e9cc78 100%) border-box;
  box-shadow: 0 0 0 1px rgba(120, 90, 20, .35), 0 0 18px 2px rgba(240, 200, 90, .45), 0 12px 26px -14px rgba(0, 0, 0, .45);
  letter-spacing: .01em; animation: goGlow 3.2s ease-in-out infinite; }
.btn.go:hover { box-shadow: 0 0 0 1px rgba(120, 90, 20, .4), 0 0 26px 5px rgba(240, 200, 90, .6), 0 14px 28px -14px rgba(0, 0, 0, .5); }
.btn.go:focus-visible { outline: 3px solid #e9cc78; outline-offset: 4px; }
.cta-row:has(.btn.go) { margin-block: 2rem 1.5rem; }
.go-row { margin-block: 1.5rem 2.25rem; }
@keyframes goGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(240, 200, 90, 0)); } 50% { filter: drop-shadow(0 0 6px rgba(240, 200, 90, .55)); } }
@media (prefers-reduced-motion: reduce) { .btn.go { animation: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
/* Logo: the pin stands taller than the wordmark (owner, 25 Oct 2026). */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { width: auto; height: 96px; margin-block: -10px; position: relative; top: -10px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .28)); }
.wordmark { font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; }
.brand .wordmark { font-size: 1.9rem; line-height: 1; position: relative; top: .14em; }
.wordmark .map { color: var(--wm-map); } .wordmark .bang { color: var(--wm-bang); } .wordmark .sh { color: var(--wm-sh); }
.nav { display: flex; gap: .25rem; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: .5rem .7rem; border-radius: 999px; }
.nav a:hover { background: var(--band); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.theme-toggle { display: inline-flex; background: var(--band); border-radius: 999px; padding: 3px; }
.theme-toggle button { border: 0; background: transparent; color: var(--muted); font: 600 .8rem var(--font); padding: .4rem .7rem; border-radius: 999px; cursor: pointer; min-height: 32px; }
.theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.nav-toggle { display: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9rem var(--font); padding: .5rem .9rem; border-radius: 999px; min-height: 40px; cursor: pointer; }
@media (max-width: 64em) {
  .nav-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: .75rem 1rem 1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .site-header.nav-open .nav { display: flex; }
  .nav a { padding: .8rem 1rem; }
}
@media (max-width: 26em) { .theme-toggle button { padding: .4rem .5rem; } .brand .wordmark { font-size: 1.5rem; } .brand img { height: 72px; margin-block: -8px; top: -9px; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; }
.hero::before { content: ""; position: absolute; inset: -10% 0 auto; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--brand-2) 22%, transparent), transparent 70%); }
.hero-copy { text-align: center; max-width: 52rem; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; color: var(--brand); background: color-mix(in srgb, var(--brand-2) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-2) 35%, transparent); padding: .35rem .85rem; border-radius: 999px; margin-bottom: 1.25rem; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); box-shadow: 0 0 0 0 var(--brand-2); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-2) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.hero h1 { font-size: min(clamp(2.1rem, 1.2rem + 3.6vw, 3.5rem), 7.4vw); white-space: nowrap; /* one line, down to small phones */ font-weight: 850; letter-spacing: -.035em; line-height: 1.02; margin-bottom: .35em; }
.grad { background: linear-gradient(100deg, var(--k-fuel) 0%, var(--k-view) 40%, var(--k-hotel) 70%, var(--k-food) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* "BiG" in the headline: same ink as the rest of the line; the i is the font's dotless "ı" and its dot is the
   Mapish logo pin (owner, 25 Oct 2026). */
.hero h1 .big { font-weight: 950; letter-spacing: -.02em; }
.big-i { position: relative; display: inline-block; margin: 0 .01em; }
.big-pin { position: absolute; left: calc(50% + .01em); bottom: .46em; transform: translateX(-50%); width: auto; height: .8em; max-width: none;
  filter: drop-shadow(0 .03em .04em rgba(0, 0, 0, .3)); pointer-events: none; }
.lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--muted); max-width: 44rem; }
.hero-copy .lead { margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.soon { color: var(--muted); font-size: .95rem; }
.soon strong { color: var(--ink); }

/* Waitlist */
.waitlist { margin: 1.5rem auto 0; max-width: 34rem; text-align: left; }
.wl-row { display: flex; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px; box-shadow: var(--shadow); }
.wl-row input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 1rem var(--font); padding: 0 1rem; min-height: 44px; }
.wl-row input:focus-visible { outline: none; }
.wl-row:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.wl-hp { position: absolute; left: -9999px; }
.wl-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; color: var(--muted); margin-top: .75rem; padding-inline: .5rem; }
.wl-consent input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--brand); }
.wl-status { min-height: 1.4em; font-size: .9rem; margin: .5rem .5rem 0; }
.wl-status.ok { color: var(--brand); } .wl-status.err { color: #c62828; }
@media (max-width: 30em) { .wl-row { flex-direction: column; border-radius: 20px; } .wl-row input { min-height: 48px; } }

/* ---------- The 3D journey ---------- */
.journey { --sky-top: #9fd3f1; --sky-bot: #eaf6fb; --dusk: 0; --night: 0;
  position: relative; width: 100%; margin: clamp(.5rem, 2vw, 1.5rem) 0 0; height: clamp(480px, 62vw, 780px);
  overflow: hidden; isolation: isolate;
  --skyT: color-mix(in srgb, var(--sky-top), #2d3a78 calc(var(--dusk) * 100%));
  --skyB: color-mix(in srgb, var(--sky-bot), #f39a62 calc(var(--dusk) * 100%)); }
html:not(.jsx) .journey { display: none; }
/* The map melts into the page on every side; the overlay cards (log, postcard, note) stay crisp. */
.sky, .stage, .haze {
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.35) 10%, #000 24%, #000 76%, rgba(0,0,0,.35) 90%, transparent), linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 10%, #000 24%, #000 60%, rgba(0,0,0,.4) 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.35) 10%, #000 24%, #000 76%, rgba(0,0,0,.35) 90%, transparent), linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 10%, #000 24%, #000 60%, rgba(0,0,0,.4) 82%, transparent);
  mask-composite: intersect; }
:root[data-theme="dark"] .journey { --sky-top: #0f2536; --sky-bot: #28475a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .journey { --sky-top: #0f2536; --sky-bot: #28475a; } }
.sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--skyT), var(--skyB) 45%, var(--land) 75%); }

.stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 20%; overflow: hidden; }
.world { position: absolute; left: 50%; top: 58%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; transform-style: preserve-3d; will-change: transform;
  transform: scale(var(--s, .6)) rotateX(var(--tilt, 56deg)) rotateZ(var(--spin, -28deg)) translate(var(--cx, 0px), var(--cy, 0px)); }
.world * { transform-style: preserve-3d; }
.ground { position: absolute; left: -700px; top: -1300px; width: 2800px; height: 2800px; /* matches GX, GY, GS in landing.js */ transform: translateZ(0); }
.ground svg { display: block; width: 100%; height: 100%; max-width: none; }
.g-land { fill: var(--land); } .g-land2 { fill: var(--land-2); } .g-park { fill: var(--park); }
/* Field edges and crop rows; parks get a soft darker rim. */
.g-land2, .g-park { stroke: var(--field-line); stroke-width: 2; }
.g-rows { fill: url(#grows); stroke: none; }
.g-water { fill: var(--water); stroke: var(--water-2); stroke-width: 3; stroke-opacity: .55; } .g-water2 { fill: none; stroke: var(--water-2); stroke-width: 3; opacity: .6; }
/* Soft terrain: broad light and shade patches, lit from the north-west like the buildings. */
.g-terrain-d { fill: url(#gterd); } .g-terrain-l { fill: url(#gterl); }
.gs-d { stop-color: var(--terrain-dark); } .gs-l { stop-color: var(--terrain-light); } .gs-row { fill: var(--field-line); }
.g-urban { fill: var(--urban); }
.g-street-case { fill: none; stroke: var(--street-case); stroke-width: 11; stroke-linecap: round; }
.g-street { fill: none; stroke: var(--road); stroke-width: 8; stroke-linecap: round; }
.g-lane { fill: none; stroke: var(--road); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.g-lane-case { fill: none; stroke: var(--street-case); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.g-shade { fill: var(--shade); opacity: calc(1 - var(--night, 0) * .6); } /* shadows soften after dark */
/* Rivers (a darker bank under the water) and the bridges the road takes over them. */
.g-river-bank { fill: none; stroke: var(--water-2); stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.g-river { fill: none; stroke: var(--water); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }
.g-deck { fill: var(--deck); stroke: var(--deck-edge); stroke-width: 1.5; }
.g-rail { fill: none; stroke: var(--deck-edge); stroke-width: 3; }
.bx.station .top { background: var(--k-fuel); } .bx.station .fs, .bx.station .fn, .bx.station .fe, .bx.station .fw { background: #f4f6f5; }
.sp-fuel { --sc: #0f9d63; }
.bridge .rail > i { background: var(--deck-edge); } .bridge .rail > .top { background: var(--deck); }
/* The far mountain range: facing the camera, blended towards the sky colour so it sits in the distance. */
.peak { transform: translateX(-50%); }
.peak::before, .peak::after { content: ""; position: absolute; inset: 0; }
.peak::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--snow) 80%, var(--skyB)) 0 16%, color-mix(in srgb, var(--mtn) 50%, var(--skyB)) 16%);
  clip-path: polygon(0 100%, 16% 56%, 27% 66%, 50% 0, 63% 38%, 72% 28%, 100% 100%); }
.peak::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--snow) 90%, var(--skyB)) 0 16%, color-mix(in srgb, var(--mtn-lit) 50%, var(--skyB)) 16%);
  clip-path: polygon(0 100%, 16% 56%, 22% 63%, 50% 0, 42% 100%); }
.g-road-edge { fill: none; stroke: var(--road-case); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.g-road { fill: none; stroke: var(--road); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.g-dash { fill: none; stroke: var(--lane); stroke-width: 2; stroke-dasharray: 12 12; opacity: .9; }
.g-route-ahead { fill: none; stroke: var(--route); stroke-width: 7; stroke-linecap: round; opacity: .28; stroke-dasharray: 2 12; }
.g-route { fill: none; stroke: var(--route); stroke-width: 8; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--route) 60%, transparent)); }
.g-dim { fill: #0b1a2e; opacity: calc(var(--dusk) * .22 + var(--night) * .38); pointer-events: none; }

.bx { position: absolute; }
.bx > i { position: absolute; display: block; }
.bx .top { inset: 0; background: var(--bld-top); }
.bx .fs, .bx .fn { left: 0; width: 100%; transform-origin: 0 0; transform: rotateX(90deg); background: var(--bld-a); }
.bx .fn { top: 0; } .bx .fs { background: var(--bld-a); }
.bx .fe, .bx .fw { top: 0; height: 100%; transform-origin: 0 0; transform: rotateY(-90deg); background: var(--bld-b); }
.bx .fw { left: 0; }
/* Light comes from the north-west: west faces are lit, east faces in shade, and every wall darkens a
   little towards the ground (ambient occlusion). Side faces map "to bottom" (fn/fs) or "to right"
   (fe/fw) onto ground-to-roof. */
.bx .fw { background-color: color-mix(in srgb, var(--bld-a) 55%, var(--bld-top)); }
.bx .fs, .bx .fn { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .16), transparent 60%); }
.bx .fe, .bx .fw { background-image: linear-gradient(to right, rgba(0, 0, 0, .16), transparent 60%); }
.bx.win .fs { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .16), transparent 60%), repeating-linear-gradient(to right, transparent 0 5px, rgba(255, 214, 120, calc(var(--night) * .95)) 5px 9px, transparent 9px 14px),
  repeating-linear-gradient(to bottom, transparent 0 5px, var(--bld-a) 5px 9px); }
.bx.win .fe { background-image: linear-gradient(to right, rgba(0, 0, 0, .16), transparent 60%), repeating-linear-gradient(to right, transparent 0 5px, rgba(255, 214, 120, calc(var(--night) * .95)) 5px 9px, transparent 9px 14px),
  repeating-linear-gradient(to bottom, transparent 0 5px, var(--bld-a) 5px 9px); }
.bx.r1 .top { background: var(--r1t); } .bx.r2 .top { background: var(--r2t); } .bx.r3 .top { background: var(--r3t); }
.bx.r1 .fs, .bx.r1 .fn { background-color: var(--r1s); } .bx.r3 .fs, .bx.r3 .fn { background-color: var(--r3s); }
.bx.hotel .top { background: color-mix(in srgb, var(--k-hotel) 25%, var(--bld-top)); }
.bx.hotel .fs, .bx.hotel .fe { background-color: color-mix(in srgb, var(--k-hotel) 18%, var(--bld-a)); }

/* The car: a hatchback on four wheels, body 3px off the road. Its x axis points the way it drives,
   so the east face is the nose (headlights) and the west face the tail (brake lights). */
.car { --p1: #cf4a2f; --p2: #ec6446; --p3: #f37a5c; --p4: #e2573a; --side: #c94328; --side-hi: #dd5436; --nose: #c4432a; --rear: #b23b23; --trim: #6e2415; --roof1: #e45a3d; --roof2: #f47456; }
/* The weekend SUV: deep blue paint over black plastic cladding. */
.car.suv { --p1: #24507a; --p2: #2f6696; --p3: #3f7bb0; --p4: #2c5f8d; --side: #285a86; --side-hi: #336c9e; --nose: #234f78; --rear: #1f4870; --trim: #20262b; --roof1: #2c5f8d; --roof2: #3a73a6; }
.car .body > .top { background: linear-gradient(90deg, var(--p1), var(--p2) 38%, var(--p3) 72%, var(--p4)); border-radius: 2px; }
.car .body > .fs, .car .body > .fn { background: linear-gradient(to bottom, var(--trim) 0 22%, var(--side) 22% 70%, var(--side-hi)); }
.car .body > .fe { background: radial-gradient(circle at 62% 18%, #fffbe8 0 1.6px, rgba(255, 244, 196, .6) 2.2px, transparent 3px),
  radial-gradient(circle at 62% 82%, #fffbe8 0 1.6px, rgba(255, 244, 196, .6) 2.2px, transparent 3px), linear-gradient(to right, var(--trim) 0 22%, var(--nose) 22%); }
.car .body > .fw { background: linear-gradient(to bottom, transparent 0 12%, #ff3b30 12% 26%, transparent 26% 74%, #ff3b30 74% 88%, transparent 88%) 55% 0 / 30% 100% no-repeat,
  linear-gradient(to right, var(--trim) 0 22%, var(--rear) 22%); }
.car .cab > .top { background: linear-gradient(90deg, var(--roof1), var(--roof2)); border-radius: 2px; }
.car .cab > .fs, .car .cab > .fn { background: linear-gradient(to bottom, #1c2833, #3f5669 85%, var(--p4) 85%); }
.car .cab > .fe { background: linear-gradient(to right, #22313f, #7e9bb1 80%, var(--p4) 80%); }
.car .cab > .fw { background: linear-gradient(to right, #1c2833, #4a6275 80%, var(--p4) 80%); }
.car .wheel > i { background: #1b2126; } .car .wheel > .top { background: #2a3339; }
.car .rail > i { background: #1d2327; } .car.suv .glow { left: 46px; }
/* Headlight beams from dusk on; brake lights glow in the dark. */
.car .glow { position: absolute; left: 42px; top: -13px; width: 84px; height: 48px; transform: translateZ(1px);
  clip-path: polygon(0 36%, 100% 0, 100% 100%, 0 64%);
  background: radial-gradient(90% 60% at 0 50%, rgba(255, 240, 186, .85), rgba(255, 240, 186, .25) 60%, transparent);
  opacity: max(calc(var(--dusk) * .75), var(--night)); }
.car .tail { position: absolute; left: -9px; top: 1px; width: 14px; height: 20px; transform: translateZ(1px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 70, 50, .7), transparent); opacity: max(calc(var(--dusk) * .5), var(--night)); }
/* Soft shadow, pushed away from the light by landing.js (it turns with the car). */
.car .shadow { position: absolute; inset: -2px -3px; border-radius: 9px; background: rgba(10, 25, 18, .26); filter: blur(3px); }

.hill { position: absolute; border-radius: 50%; }
.hill > i { position: absolute; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); }

/* Upright things: undo the world rotation so they always face the camera. */
.bb { position: absolute; width: 0; height: 0; transform: translateZ(var(--z, 0px)) rotateZ(calc(var(--spin, -28deg) * -1)) rotateX(calc(var(--tilt, 56deg) * -1)); }
.bb > * { position: absolute; left: 0; bottom: 0; }
.tree { width: 14px; height: 30px; transform: translateX(-50%); }
.tree::before { content: ""; position: absolute; left: 0; bottom: 6px; width: 14px; height: 24px; background: var(--tree); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tree::after { content: ""; position: absolute; left: 6px; bottom: 0; width: 2px; height: 7px; background: #7a5a3c; }
.tree.t2::before { background: var(--tree-2); border-radius: 50% 50% 40% 40%; clip-path: none; height: 20px; }

.pin { --c: var(--k-fuel); width: 44px; height: 56px; transform: translateX(-50%) scale(.62); transform-origin: 50% 100%; opacity: 1; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .4s; }
/* Contact shadow on the ground under a pin's tip, nudged away from the north-west light. */
.pin-shadow { width: 26px; height: 8px; margin: 0 0 -3px -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 25, 18, .38), rgba(10, 25, 18, 0)); }
.pin img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3)); }
/* Shine sweeps across the pin when the car arrives, clipped to the pin's shape. */
.pin::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 160% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.pin.on::before { animation: shine 1.2s ease-in-out .25s; }
.pin.k-food { --c: var(--k-food); } .pin.k-hotel { --c: var(--k-hotel); } .pin.k-play { --c: #1b8fd0; } .pin.k-steak { --c: #7b3fb0; } .pin.k-cafe, .pin.k-bakery { --c: #d9a520; } .pin.k-boutique { --c: #d9443a; } .pin.k-view { --c: #d4a33a; } .pin.k-view.on img { filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .3)) drop-shadow(0 0 10px rgba(255, 204, 102, .75)); } .pin.k-deal { --c: var(--k-deal); } .pin.k-ev { --c: var(--k-ev); }
.pin.on { transform: translateX(-50%) scale(1.05); opacity: 1; }
.pin.done { transform: translateX(-50%) scale(.8); opacity: 1; }
.pin.on::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; border: 3px solid var(--c); opacity: 0; animation: ring 1.4s ease-out infinite; transform: scaleY(.45); }
@keyframes ring { from { opacity: .9; transform: scaleY(.45) scale(.3); } to { opacity: 0; transform: scaleY(.45) scale(1.4); } }
.tag { left: 0; bottom: 64px; transform: translateX(-50%) translateY(8px) scale(.8); opacity: 0; white-space: nowrap; transition: .45s cubic-bezier(.3, 1.4, .5, 1);
  background: var(--card); color: var(--card-ink); font: 700 13px/1.1 var(--font); padding: 7px 11px; border-radius: 12px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35); }
.tag small { display: block; font-weight: 600; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tag.on { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
/* Special-price label, drawn like the app's map marker (MarkerIconFactory.specialBadge):
   category colour at half opacity, white 1px edge, icon + price in white 800, leader line to the pin. */
.sp { --sc: #8e44ad; left: 0; bottom: 0; width: 0; height: 0; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.sp.on { opacity: 1; transform: none; }
.sp-coffee { --sc: #8d5a3c; } .sp-hot_food { --sc: #e8590c; } .sp-snack { --sc: #f2a900; } .sp-drink { --sc: #1e88e5; } .sp-groceries { --sc: #2e7d32; } .sp-car_care { --sc: #546e7a; }
.sp-pill { position: absolute; left: -2px; bottom: 44px; display: flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 3px; white-space: nowrap;
  background: color-mix(in srgb, var(--sc) 50%, transparent); border: 1px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  color: #fff; font: 800 13px/1.15 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sp-pill svg { flex: none; display: block; }
.sp-snack .sp-pill { color: #3a2900; }
.sp-line { position: absolute; left: 1px; bottom: 30px; width: 1.6px; height: 17px; border-radius: 1px; background: color-mix(in srgb, var(--sc) 75%, transparent);
  transform-origin: 50% 100%; transform: rotate(36deg); }
.dotpin { width: 10px; height: 10px; border-radius: 50%; background: #9aa6a0; border: 2px solid #fff; transform: translateX(-50%); }
.dest-flag { width: 3px; height: 40px; background: #2b3a48; transform: translateX(-50%); }
.dest-flag::after { content: ""; position: absolute; left: 3px; top: 0; width: 22px; height: 14px; background: var(--route); clip-path: polygon(0 0, 100% 50%, 0 100%); }

.haze { position: absolute; inset: 0; pointer-events: none;
  /* Atmospheric perspective: the far side of the map fades into the sky colour. */
  background: linear-gradient(to bottom, var(--skyB) 0%, color-mix(in srgb, var(--skyB) 55%, transparent) 16%, color-mix(in srgb, var(--skyB) 18%, transparent) 30%, transparent 44%),
    linear-gradient(to bottom, transparent 55%, rgba(255, 150, 80, calc(var(--dusk) * .16)) 100%); }

/* Overlays */
.log { position: absolute; left: max(16px, 9%); bottom: 14%; width: min(300px, calc(100% - 32px)); background: var(--card); color: var(--card-ink);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 18px; padding: 12px 14px; box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .45); font-size: 14px; }
.log-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; font-size: 13px; letter-spacing: .01em; }
.log-total { color: var(--muted); font-weight: 600; } .log-total b { color: var(--brand); font-size: 15px; font-variant-numeric: tabular-nums; }
.log-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.log-list:empty::before { content: "Route planned. 5 stops found."; color: var(--muted); font-size: 13px; }
.log-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; animation: logIn .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.log-list .li { width: 26px; height: 28px; display: grid; place-items: center; }
.log-list .li img { width: 22px; height: 28px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.log-list .lt { line-height: 1.2; font-weight: 700; font-size: 13px; } .log-list .lt small { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.log-list .ls { font-weight: 800; font-size: 12.5px; color: var(--brand); font-variant-numeric: tabular-nums; }
@keyframes logIn { from { opacity: 0; transform: translateY(8px); } }
.postcard { position: absolute; right: max(18px, 10%); top: 14%; width: 160px; background: #fff; padding: 8px 8px 6px; border-radius: 6px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .45);
  transform: rotate(6deg) translateY(-20px) scale(.8); opacity: 0; transition: .7s cubic-bezier(.3, 1.4, .5, 1); color: #203029; }
.postcard.on { opacity: 1; transform: rotate(4deg); }
.postcard p { margin: 6px 2px 0; font: 700 13px/1.2 var(--font); display: flex; justify-content: space-between; align-items: center; }
.postcard p svg { width: 16px; height: 16px; color: #e5484d; }
.pc-img { position: relative; height: 96px; overflow: hidden; border-radius: 3px; background: linear-gradient(#ffb36b, #ffd9a0 55%, #ffe9c6); }
.pc-sun { position: absolute; left: 58%; top: 34%; width: 30px; height: 30px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 20px #fff3c4; }
.pc-m1, .pc-m2 { position: absolute; bottom: 22px; }
.pc-m1 { left: -10px; width: 110px; height: 60px; background: #6d5a8e; clip-path: polygon(0 100%, 45% 10%, 100% 100%); }
.pc-m2 { left: 60px; width: 120px; height: 48px; background: #8a6d8f; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.pc-lake { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: linear-gradient(#5e7fa8, #3f5e86); }
.finale { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 16, 30, .55), rgba(8, 16, 30, 0)); color: #fff; opacity: 0; transition: opacity .8s; }
.finale.on { opacity: 1; }
.f-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .8rem; margin: 0 0 .4rem; color: #ffe2b0; }
.f-big { font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); font-weight: 800; max-width: 26ch; margin: 0 auto; line-height: 1.2; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.f-big b { color: #7fe3b4; }
.illus-note { position: absolute; right: max(16px, 9%); bottom: 9%; margin: 0; font-size: 11.5px; color: var(--card-ink); background: var(--card); padding: 3px 8px; border-radius: 999px; opacity: .85; }
@media (max-width: 40em) {
  .journey { height: 540px; }
  .sky, .stage, .haze { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent); }
  .log { left: 10px; right: 10px; bottom: 34px; width: auto; padding: 10px 12px; }
  .log-list li:not(:last-child) { display: none; }
  .postcard { width: 120px; right: 10px; top: 10px; } .pc-img { height: 70px; }
  .illus-note { right: 10px; bottom: 8px; font-size: 10.5px; }
}

/* ---------- Journey extras: playground, steakhouse, 5-star hotel, return line, captions, cards ---------- */
.g-play { fill: #f1d9a6; stroke: #e2c07e; stroke-width: 3; }
:root[data-theme="dark"] .g-play { fill: #6b5a3a; stroke: #5a4b30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-play { fill: #6b5a3a; stroke: #5a4b30; } }
.toy { transform: translateX(-50%); overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.bx.steak .top { background: #4a2e24; } .bx.steak .fs, .bx.steak .fn { background: #a5503a; } .bx.steak .fe, .bx.steak .fw { background: #86402e; }
.bx.five .top { background: #fff; box-shadow: inset 0 0 0 3px #d4a33a; }
.g-route-back { fill: none; stroke: #ff9f43; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 159, 67, .7)); }
.scene-stars { opacity: var(--night, 0); transition: opacity .3s; }
.caption { position: absolute; left: 50%; top: 12%; margin: 0; transform: translate(-50%, -10px); opacity: 0; transition: .5s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none;
  background: var(--card); color: var(--card-ink); font-weight: 800; font-size: clamp(.95rem, .8rem + .6vw, 1.25rem); padding: .55rem 1.2rem; border-radius: 999px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); white-space: nowrap; }
.caption.on { opacity: 1; transform: translate(-50%, 0); }
.review { position: absolute; left: max(16px, 9%); top: 14%; width: 250px; background: #fff; color: #1d2a24; border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(-14px) scale(.94); transition: .55s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.review.on { opacity: 1; transform: none; }
.rv-top { display: flex; gap: 8px; align-items: center; }
.rv-top img { width: 22px; height: 28px; }
.rv-top b { display: block; font-size: 14px; line-height: 1.2; } .rv-top small { display: block; font-size: 11.5px; color: #5b6862; }
.rv-stars { margin: 8px 0 4px; font-size: 22px; letter-spacing: 2px; line-height: 1; color: #d9dde0; }
.review.no-stars .rv-stars { display: none; }
.review.on .rv-stars i { animation: star .4s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.rv-stars i { font-style: normal; display: inline-block; }
.review.on .rv-stars i:nth-child(2) { animation-delay: .15s; } .review.on .rv-stars i:nth-child(3) { animation-delay: .3s; }
.review.on .rv-stars i:nth-child(4) { animation-delay: .45s; } .review.on .rv-stars i:nth-child(5) { animation-delay: .6s; }
@keyframes star { from { transform: scale(.4); } 60% { transform: scale(1.3); } to { color: #f5b301; transform: scale(1); text-shadow: 0 0 8px rgba(245, 179, 1, .5); } }
#rv-text { margin: 4px 0 8px; font-size: 13px; font-style: italic; line-height: 1.35; }
.rv-ok { display: inline-block; font-size: 11.5px; font-weight: 800; color: #0b5f3c; background: #e3f5ec; padding: 3px 8px; border-radius: 999px; opacity: 0; }
.review.on .rv-ok { animation: okIn .4s ease 1s forwards; }
@keyframes okIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 40em) { .review { left: 10px; top: 10px; width: 200px; padding: 10px 12px; } .rv-stars { font-size: 18px; } .caption { top: auto; bottom: 110px; } }

/* ---------- App store badges (Google Play is a link; App Store a placeholder until the iPhone release) ---------- */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.store-badge { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 54px; padding: .45rem 1.15rem .45rem .85rem;
  background: #0b0b0c; color: #fff; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5);
  cursor: default; user-select: none; text-align: left; }
.store-badge > svg { width: 26px; height: 26px; flex: none; }
.store-badge span { display: flex; flex-direction: column; font-weight: 600; font-size: 1.2rem; line-height: 1.05; letter-spacing: -.01em; }
.store-badge small { font-size: .68rem; font-weight: 500; letter-spacing: .02em; opacity: .9; }
.store-badge em { position: absolute; top: -9px; right: -9px; font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #3a2a05; background: linear-gradient(135deg, #ffe7a3, #d4a33a); padding: 2px 8px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
a.store-badge { cursor: pointer; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
a.store-badge:hover, a.store-badge:focus-visible { transform: translateY(-1px); border-color: rgba(255, 255, 255, .55); }
.night .stores { margin: 0 0 1rem; }

/* ---------- Launch countdown ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.countdown { margin: .25rem auto 1.5rem; }
.cd-label { margin: 0 0 .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.cd-units { display: flex; justify-content: center; gap: clamp(.4rem, 1.5vw, .8rem); }
.cd-units span { display: grid; place-items: center; min-width: clamp(64px, 14vw, 88px); padding: .6rem .5rem .5rem; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cd-units b { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); font-weight: 850; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.cd-units small { margin-top: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cd-date { margin: .7rem 0 0; font-size: .88rem; color: var(--muted); }
.countdown.launched .cd-units { display: none; }
.countdown.compact { margin: 0 auto 1.5rem; }
.night .cd-label { color: #7fe3b4; } .night .cd-date { color: #c9cbe8; }
.night .cd-units span { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.night .cd-units b { color: #fff; } .night .cd-units small { color: #c9cbe8; }

/* ---------- Phones and touch devices (html.lite, set by landing.js) ----------
   Dense CSS 3D flickers on phone GPUs when masks, backdrop blur or SVG filters sit on or over it. Here the map
   edges fade with a plain overlay instead of a mask, cards are solid and clouds use a simple blur. */
.lite .journey .stage, .lite .journey .sky, .lite .journey .haze { -webkit-mask-image: none; mask-image: none; }
.lite .journey::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 70%, var(--bg) 100%),
    linear-gradient(to right, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%); }
.lite .journey .log, .lite .journey .postcard, .lite .journey .review, .lite .journey .caption, .lite .journey .finale, .lite .journey .illus-note { z-index: 2; }
.lite .log { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
.lite .cd-units span { backdrop-filter: none; -webkit-backdrop-filter: none; }
.lite .g-route, .lite .g-route-back { filter: none; }
.lite .cloud::before { filter: blur(5px); } .lite .cloud::after { filter: blur(4px); }
.lite .cloud { animation: none; }

/* Trip banner beside the car, and the monthly savings card (bottom right) */
.car-tag { background: var(--brand); color: var(--brand-ink); bottom: 18px; margin-left: 46px; }
.car-tag small { color: color-mix(in srgb, var(--brand-ink) 75%, transparent); }
.car-note { left: 26px; bottom: 30px; width: 220px; padding: 10px 12px; border-radius: 14px; background: var(--card); color: var(--card-ink);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .45); font: 400 12.5px/1.35 var(--font); opacity: 0; transform: translateY(10px) scale(.85);
  transform-origin: 0 100%; transition: .5s cubic-bezier(.3, 1.4, .5, 1); }
.car-note.on { opacity: 1; transform: none; }
.car-note::after { content: ""; position: absolute; left: -7px; bottom: 6px; border: 7px solid transparent; border-right-color: var(--card); border-left: 0; }
.cn-top { display: flex; gap: 8px; align-items: center; }
.cn-top b { display: block; font-size: 13px; } .cn-top small { display: block; font-size: 11px; color: var(--muted); }
.car-note p { margin: 6px 0; }
.cn-ok { display: inline-block; font-size: 11px; font-weight: 800; color: #0b5f3c; background: #e3f5ec; padding: 2px 8px; border-radius: 999px; }
.month { position: absolute; right: max(16px, 9%); bottom: 14%; width: 240px; background: var(--card); color: var(--card-ink); border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .45); font-size: 13px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.m-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.m-head b { font-size: 20px; color: var(--brand); font-variant-numeric: tabular-nums; }
.m-list { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 4px; }
.m-list li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); padding: 3px 6px; border-radius: 8px; transition: background .3s, color .3s; }
.m-list li b { font-variant-numeric: tabular-nums; color: var(--card-ink); }
.m-list li.now { background: color-mix(in srgb, var(--brand-2) 16%, transparent); color: var(--card-ink); font-weight: 700; }
.m-foot { margin: 0; font-size: 11px; color: var(--muted); }
@media (min-width: 40.01em) { .illus-note { bottom: 6%; } }
.lite .month { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); z-index: 2; }
@media (max-width: 40em) {
  .month { left: 10px; right: 10px; bottom: auto; top: 10px; width: auto; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
  .month .m-head { gap: 10px; } .month .m-head b { font-size: 16px; }
  .month .m-list, .month .m-foot { display: none; }
  .postcard, .review { top: 58px; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band { background: var(--band); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 800; color: var(--brand); margin-bottom: .75rem; }
.note { color: var(--muted); font-size: .85rem; margin-top: 1.5rem; }

.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.use { --c: var(--k-view); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.3rem; overflow: hidden;
  transition: transform .3s, box-shadow .3s; }
.use::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--c); }
.use:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.u-shop { --c: var(--k-deal); } .u-commute { --c: var(--k-fuel); } .u-deals { --c: var(--k-food); }
.use-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--c); margin-bottom: 1rem; }
.use-ico svg { width: 26px; height: 26px; }
.use p { color: var(--muted); font-size: .98rem; }
.use ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; font-size: .92rem; font-weight: 600; }
.use li { display: flex; gap: .5rem; } .use li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--c); }

.stops { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.stop-card { --c: var(--k-fuel); background: var(--surface); border-radius: var(--radius); padding: 1.25rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: start; border: 1px solid var(--line); }
.stop-card h3 { margin: .2rem 0 .2rem; } .stop-card p { grid-column: 2; margin: 0; color: var(--muted); font-size: .95rem; }
.spin { grid-row: span 2; width: 44px; height: 54px; position: relative; display: grid; place-items: start center; padding-top: 9px; color: #fff; }
.spin::before { content: ""; position: absolute; inset: 0; background: var(--c); border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.78); transform-origin: 50% 40%; box-shadow: 0 6px 12px -6px var(--c); }
.spin svg { position: relative; width: 22px; height: 22px; }
.k-food { --c: var(--k-food); } .k-hotel { --c: var(--k-hotel); } .k-view { --c: var(--k-view); } .k-deal { --c: var(--k-deal); } .k-ev { --c: var(--k-ev); }
.stop-card:hover .spin { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { transform: translateY(-8px); } }

.story-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 56em) { .story-grid { grid-template-columns: 1fr 1fr; } }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.1rem; }
.timeline::before { content: ""; position: absolute; left: 4.35rem; top: 20px; bottom: 20px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--k-fuel), var(--k-food), var(--k-view), var(--k-hotel)); }
.timeline li { --c: var(--k-fuel); display: grid; grid-template-columns: 3rem 2.75rem 1fr; gap: .75rem; align-items: start; }
.timeline .k-food { --c: var(--k-food); } .timeline .k-view { --c: var(--k-view); } .timeline .k-hotel { --c: var(--k-hotel); }
.t-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); padding-top: .55rem; text-align: right; font-size: .95rem; }
.t-dot { position: relative; z-index: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent); }
.t-dot svg { width: 22px; height: 22px; }
.timeline h3 { margin: .45rem 0 .2rem; } .timeline p { margin: 0; color: var(--muted); font-size: .98rem; }

.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mode { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; }
.mode p { color: var(--muted); margin: 0; }
.mode-tag { display: inline-block; font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; margin-bottom: .75rem;
  background: color-mix(in srgb, var(--k-fuel) 16%, var(--surface)); color: var(--brand); }
.mode-tag.crazy { background: color-mix(in srgb, var(--k-food) 18%, var(--surface)); color: color-mix(in srgb, var(--k-food) 70%, var(--ink)); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 3vw, 2.5rem); max-width: 56rem; margin-inline: auto; align-items: start; }
.shots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phone { margin: 0; text-align: center; }
.phone.lift { margin-top: -1.5rem; }
.frame { border-radius: 28px; padding: 7px; background: #17181d; box-shadow: var(--shadow); overflow: hidden; }
.frame img { display: block; width: 100%; height: auto; border-radius: 22px; }
.phone figcaption { margin-top: .75rem; font-weight: 700; font-size: .92rem; color: var(--muted); }
@media (max-width: 40em) { .shots { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin-inline: -1rem; padding-inline: 1rem; }
  .shots.two { grid-template-columns: repeat(2, 70%); } .phone { scroll-snap-align: center; } .phone.lift { margin-top: 0; } }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 56em) { .split { grid-template-columns: 1.05fr 1fr; } }
.stats { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0 .75rem; }
.stat { flex: 1 1 8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; }
.stat .num { display: block; font-size: 2rem; font-weight: 850; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--muted); font-size: .88rem; font-weight: 600; }

.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.badge-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.badge-card p { color: var(--muted); margin: 0; }
.badge { display: inline-block; font-weight: 800; font-size: .8rem; padding: .3rem .75rem; border-radius: 999px; margin-bottom: .9rem; }
.badge.official { background: color-mix(in srgb, var(--k-fuel) 18%, var(--surface)); color: var(--brand); }
.badge.reported { background: color-mix(in srgb, var(--k-view) 18%, var(--surface)); color: color-mix(in srgb, var(--k-view) 65%, var(--ink)); }
.badge.estimate { background: color-mix(in srgb, var(--k-deal) 20%, var(--surface)); color: color-mix(in srgb, var(--k-deal) 55%, var(--ink)); }
.countries { margin-top: 1.75rem; color: var(--muted); }
.countries strong { color: var(--ink); }

.owners { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line);
  border-radius: 28px; padding: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--shadow); }
.owners > div { flex: 1 1 28rem; } .owners p { color: var(--muted); margin: 0; } .owners h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }

.faq { display: grid; gap: .6rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--brand); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.25rem 1rem; color: var(--muted); }
.faq details > div p { margin: 0; }

.outro { text-align: center; background: radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 70%); }
.outro h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.outro .lead { margin: 0 auto 1.5rem; }

.site-footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: center; justify-content: space-between; }
.site-footer ul { list-style: none; display: flex; gap: 1.25rem; padding: 0; margin: 0; }
.site-footer .small { flex-basis: 100%; margin: .5rem 0 0; }
.site-footer .copyright { color: var(--muted); opacity: .7; font-size: .78rem; }
.site-footer .wordmark { margin: 0; font-size: 1.15rem; }
.site-footer .wordmark .muted { font-weight: 500; font-size: .95rem; letter-spacing: 0; }

/* ---------- Reveal on scroll (only when JS adds .js and motion is allowed) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js [data-reveal="2"] { transition-delay: .08s; } .js [data-reveal="3"] { transition-delay: .16s; } .js [data-reveal="4"] { transition-delay: .24s; }
.js [data-reveal="5"] { transition-delay: .32s; } .js [data-reveal="6"] { transition-delay: .4s; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Sky details: moon, stars, sunset, night ---------- */
:root { --star: #b9a15a; --star-o: .45; --moon-o: .6; --moon-glow: 0 0 0 transparent;
  --ss-1: #fff1dc; --ss-2: #ffd2a8; --ss-3: #ffab8a; --ss-4: #f2899b; --ss-5: #c58bd1; --ss-ink: #2a1726; --ss-muted: #573a4f; --ss-h1: #b77aa6; --ss-h2: #8d5b8f; --ss-sun: #fff4c9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --star: #ffffff; --star-o: .9; --moon-o: 1; --moon-glow: 0 0 60px 14px rgba(255, 240, 200, .22);
  --ss-1: #0c1110; --ss-2: #2b1d3a; --ss-3: #5c2a4d; --ss-4: #a0433f; --ss-5: #e0784a; --ss-ink: #fff3ea; --ss-muted: #f1cfc3; --ss-h1: #3a1f3f; --ss-h2: #24142c; --ss-sun: #ffcf7a; } }
:root[data-theme="dark"] { --star: #ffffff; --star-o: .9; --moon-o: 1; --moon-glow: 0 0 60px 14px rgba(255, 240, 200, .22);
  --ss-1: #0c1110; --ss-2: #2b1d3a; --ss-3: #5c2a4d; --ss-4: #a0433f; --ss-5: #e0784a; --ss-ink: #fff3ea; --ss-muted: #f1cfc3; --ss-h1: #3a1f3f; --ss-h2: #24142c; --ss-sun: #ffcf7a; }

.stars { position: absolute; inset: 0; }
.star { position: absolute; width: var(--sz, 2px); height: var(--sz, 2px); border-radius: 50%; background: var(--star); opacity: var(--star-o);
  box-shadow: 0 0 6px var(--star); animation: twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite; }
.star.x { width: 9px; height: 9px; background: none; box-shadow: none; }
.star.x::before, .star.x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1.5px; margin: -.75px 0 0 -50%; background: var(--star); border-radius: 2px; }
.star.x::after { transform: rotate(90deg); }
@keyframes twinkle { 0%, 100% { opacity: calc(var(--star-o) * .25); transform: scale(.7); } 50% { opacity: var(--star-o); transform: scale(1.15); } }
.moon { position: absolute; width: 58px; height: 58px; border-radius: 50%; opacity: var(--moon-o);
  background: radial-gradient(circle at 30% 38%, rgba(0, 0, 0, .07) 0 7%, transparent 8%), radial-gradient(circle at 62% 64%, rgba(0, 0, 0, .06) 0 10%, transparent 11%),
    radial-gradient(circle at 66% 30%, rgba(0, 0, 0, .05) 0 5%, transparent 6%), radial-gradient(circle at 38% 36%, #fffdf2, #f3e8c6 60%, #dccf9f);
  box-shadow: var(--moon-glow); animation: moonFloat 9s ease-in-out infinite; }
@keyframes moonFloat { 50% { transform: translateY(-8px); } }

.hero-sky { position: absolute; inset: 0 0 auto; height: 560px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }

.sunset { position: relative; isolation: isolate; overflow: hidden; color: var(--ss-ink); padding-bottom: clamp(7rem, 14vw, 11rem);
  background: linear-gradient(to bottom, var(--bg) 0%, var(--ss-1) 8%, var(--ss-2) 30%, var(--ss-3) 55%, var(--ss-4) 78%, var(--ss-5) 100%); }
.sunset .eyebrow { color: var(--ss-ink); opacity: .8; }
.sunset .lead, .sunset .timeline p, .sunset .t-time { color: var(--ss-muted); }
.sunset .t-dot { box-shadow: 0 0 0 5px rgba(255, 255, 255, .28); }
.sunset-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The sun sets behind the hills: a bright disc inside a wide glow. */
.sunset-sun { position: absolute; left: 50%; bottom: clamp(40px, 7vw, 110px); width: min(62vw, 560px); aspect-ratio: 1; transform: translate(-50%, 50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ss-sun) 70%, transparent) 0 18%, color-mix(in srgb, var(--ss-sun) 35%, transparent) 32%, transparent 68%);
  animation: sunGlow 7s ease-in-out infinite; }
.sunset-sun::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fffdf0, var(--ss-sun) 55%, #ffb25a);
  box-shadow: 0 0 40px 12px color-mix(in srgb, var(--ss-sun) 70%, transparent), 0 0 120px 40px color-mix(in srgb, #ff9a5a 45%, transparent); }
@keyframes sunGlow { 50% { transform: translate(-50%, 50%) scale(1.05); } }
.sunset-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(90px, 14vw, 200px); max-width: none; }
.sunset-hills .h1 { fill: var(--ss-h1); opacity: .75; } .sunset-hills .h2 { fill: var(--ss-h2); }
.sunset + .band { position: relative; }
.sunset + .band::before { content: ""; position: absolute; inset: 0 0 auto; height: 70px; pointer-events: none;
  background: linear-gradient(var(--ss-h2), transparent); opacity: .9; }

.night { position: relative; isolation: isolate; overflow: hidden; color: #f4f1ff; padding-block: clamp(6rem, 14vw, 10rem);
  background: linear-gradient(to bottom, var(--band) 0%, #1b2450 22%, #0e1433 60%, #121c42 100%); --star: #ffffff; --star-o: .95; }
.night .lead, .night .soon { color: #c9cbe8; } .night .soon strong { color: #fff; }
.night .btn { background: #7fe3b4; color: #04140c; }
.night-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 35%); mask-image: linear-gradient(to bottom, transparent 5%, #000 35%); }
.night .moon.big { width: 110px; height: 110px; right: 14%; top: 22%; opacity: 1; box-shadow: 0 0 80px 22px rgba(255, 240, 200, .25), 0 0 0 1px rgba(255, 255, 255, .06); }
@media (max-width: 40em) { .night .moon.big { width: 70px; height: 70px; right: 8%; top: 16%; } }
/* Shooting stars. The element is the meteor's head; it is rotated to its direction of travel
   (--a, clockwise from "right") and moves along its own x axis, so the tail (::before, drawn
   behind the head) always points straight back along the path. Each streak lasts under a second:
   the tail grows as the meteor enters, then shrinks and fades as it burns out. */
.shooting { position: absolute; width: 0; height: 0; opacity: 0; --a: 32deg; --run: 300px; --len: 170px;
  transform: rotate(var(--a)); animation: shoot var(--cyc, 11s) var(--dl, 2s) infinite; }
.shooting::before { content: ""; position: absolute; right: 0; top: -1px; width: var(--len); height: 2px; border-radius: 2px;
  background: linear-gradient(to right, transparent, rgba(200, 215, 255, .35) 55%, rgba(255, 255, 255, .95));
  transform-origin: right center; transform: scaleX(0); animation: shoot-tail var(--cyc, 11s) var(--dl, 2s) infinite; }
.shooting::after { content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px rgba(210, 225, 255, .9), 0 0 14px 4px rgba(160, 190, 255, .35); }
.shooting.s1 { left: 10%; top: 18%; }
.shooting.s2 { left: 62%; top: 12%; --a: 148deg; --run: 240px; --len: 130px; --cyc: 13s; --dl: 7s; }
@media (max-width: 40em) { .shooting { --run: 180px; --len: 110px; } .shooting.s2 { --run: 150px; --len: 90px; } }
@keyframes shoot {
  0%, 90% { opacity: 0; transform: rotate(var(--a)) translateX(0); animation-timing-function: cubic-bezier(.25, .6, .45, 1); }
  91% { opacity: 1; }
  96.5% { opacity: 1; }
  98%, 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--run)); }
}
@keyframes shoot-tail {
  0%, 90% { transform: scaleX(0); }
  94% { transform: scaleX(1); }
  98%, 100% { transform: scaleX(.35); }
}

/* ---------- Clouds (page decoration, outside the 3D map) ----------
   Each cloud is a lit body (::before) plus a brighter billowing top (::after); an SVG noise filter
   (#f-cloud in index.html) roughens the outlines so they read as vapour, not ovals. */
.cloud { --hi: #ffffff; --sh: #d6dfe9; position: absolute; width: var(--cw, 160px); height: calc(var(--cw, 160px) * .42);
  will-change: transform; animation: drift var(--dd, 70s) ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; }
.cloud::before { inset: 22% 4% 8%; background: radial-gradient(120% 95% at 45% 15%, var(--hi) 25%, var(--sh) 95%); filter: url(#f-cloud) blur(3px); }
.cloud::after { left: 22%; top: 0; width: 46%; height: 72%; background: radial-gradient(90% 90% at 40% 25%, var(--hi) 35%, color-mix(in srgb, var(--sh) 60%, var(--hi)) 100%);
  filter: url(#f-cloud-puff) blur(2px); opacity: .95; }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
/* Moonlit: silver tops, cool shadowed undersides, a little see-through so the moon glows behind. */
.cloud.moonlit { --hi: rgba(255, 255, 255, .92); --sh: rgba(196, 206, 224, .75); }
:root[data-theme="dark"] .cloud.moonlit { --hi: rgba(214, 222, 242, .5); --sh: rgba(70, 82, 118, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cloud.moonlit { --hi: rgba(214, 222, 242, .5); --sh: rgba(70, 82, 118, .35); } }
.night .cloud.moonlit { --hi: rgba(222, 228, 250, .55); --sh: rgba(40, 50, 92, .5); }
.hero-sky .moon { right: 12%; left: auto; top: 46px; }
.m1 { --cw: 210px; right: 3%; top: 84px; --dd: 55s; } .m2 { --cw: 140px; right: 13%; top: 64px; --dd: 80s; } .m3 { --cw: 130px; right: 21%; top: 22px; --dd: 65s; opacity: .7; }
.n1 { --cw: 230px; right: 5%; top: 30%; --dd: 60s; } .n2 { --cw: 150px; right: 21%; top: 18%; --dd: 85s; opacity: .85; }
@media (max-width: 40em) { .hero-sky .moon { right: 6%; top: 18px; width: 40px; height: 40px; } .m2, .m3 { display: none; } .m1 { --cw: 140px; top: 36px; } }
/* Dusk clouds: lit peach on top, rose underneath, catching the setting sun. */
.cloud.dusk { --hi: #fff0e2; --sh: #f4a3a3; }
:root[data-theme="dark"] .cloud.dusk { --hi: rgba(255, 178, 130, .6); --sh: rgba(120, 48, 78, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cloud.dusk { --hi: rgba(255, 178, 130, .6); --sh: rgba(120, 48, 78, .5); } }
.d1 { --cw: 260px; left: 22%; bottom: 34%; --dd: 60s; } .d2 { --cw: 180px; left: 58%; bottom: 44%; --dd: 75s; }
.d3 { --cw: 220px; left: 66%; bottom: 24%; --dd: 50s; opacity: .85; } .d4 { --cw: 150px; left: 6%; bottom: 52%; --dd: 90s; opacity: .75; }

/* ---------- Moonlit lake at the foot of the night sky ---------- */
.night { padding-bottom: clamp(11rem, 20vw, 15rem); }
.moon-lake { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 20vw, 230px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, #121c42, #0a1230 45%, var(--bg) 100%); }
.moon-lake .shore { position: absolute; left: 0; top: -2px; width: 100%; height: 34px; max-width: none; transform: translateY(-100%); fill: #0a0f24; }
/* The moon's reflection: a soft glow on the water, broken into glints on the ripples (added by
   landing.js) that are tight near the far shore and spread wider toward the viewer. */
.moon-lake::before { content: ""; position: absolute; inset: 0; opacity: .8;
  background: repeating-linear-gradient(to bottom, rgba(170, 190, 255, .07) 0 1px, transparent 1px 8px);
  -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%); animation: ripple 6s linear infinite; }
@keyframes ripple { to { background-position: 0 16px; } }
.moonpath { position: absolute; top: 2px; left: calc(86% - 55px); width: clamp(180px, 22vw, 320px); height: 82%; transform: translateX(-50%);
  background: radial-gradient(28% 100% at 50% 0, rgba(255, 236, 190, .26), rgba(255, 236, 190, .08) 55%, transparent 80%); }
.moonpath::before { content: ""; position: absolute; left: 50%; top: 0; width: 64px; height: 16px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 248, 220, .95), rgba(255, 236, 190, .4) 60%, transparent); filter: blur(2px); animation: moonWobble 4s ease-in-out infinite; }
@keyframes moonWobble { 50% { transform: translateX(-50%) scaleX(1.12) scaleY(.85); } }
.gl { position: absolute; height: var(--h, 2px); border-radius: 2px; opacity: calc(var(--o) * .6);
  background: linear-gradient(90deg, transparent, rgba(255, 246, 215, .95) 30%, #fffbe9 50%, rgba(255, 246, 215, .95) 70%, transparent);
  filter: blur(.3px); animation: glint var(--d, 2.4s) ease-in-out var(--dl, 0s) infinite; }
@keyframes glint { 0%, 100% { opacity: calc(var(--o) * .15); transform: scaleX(.5); } 45% { opacity: var(--o); transform: scaleX(1.1); } 60% { opacity: calc(var(--o) * .7); } }
@media (max-width: 40em) { .moonpath { left: calc(92% - 35px); width: 150px; } }

/* ---------- Pins that pop up while scrolling down ---------- */
.pop-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.pop { position: absolute; width: var(--w, 34px); aspect-ratio: 256 / 327; opacity: 0; transform-origin: 50% 100%;
  background: var(--img) center / contain no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .25));
  animation: popPin 3.2s cubic-bezier(.3, 1.5, .5, 1) forwards; }
/* Shine: a light band sweeps across the pin, clipped to the pin's own shape. */
.pop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 160% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; animation: shine 1.2s ease-in-out .3s forwards; }
/* Twinkle beside the pin */
.pop::after { content: ""; position: absolute; right: -22%; top: -6%; width: 42%; aspect-ratio: 1; background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px rgba(255, 244, 200, .95));
  opacity: 0; transform: scale(.2) rotate(0); animation: spark 1s ease-out .45s forwards; }
/* Pops in fast, stays fully solid (so the colours read true), then leaves quickly. */
@keyframes popPin {
  0% { opacity: 0; transform: translate(-50%, -100%) translateY(24px) scale(.2); }
  8% { opacity: var(--o, 1); transform: translate(-50%, -100%) scale(1.12); }
  16% { transform: translate(-50%, -100%) scale(1); }
  86% { opacity: var(--o, 1); transform: translate(-50%, -100%) translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -100%) translateY(-26px) scale(.8); } }
@keyframes shine { to { background-position: -60% 0; } }
@keyframes spark { 40% { opacity: 1; transform: scale(1) rotate(45deg); } to { opacity: 0; transform: scale(.3) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}