/* PixBus landing — the app's street scene, assembled by scroll.
   HI-RES sprites from pixel-art-assets (lilac background stripped), the app's real palette
   (src/theme/colors.ts) and the REAL buildStopScene street: brown road #461e00 with a #783246
   gloss line and #f0dcb4 dashes, then a grey dithered FRONT pavement (#a8a298 + #9c968c dots,
   #461e00 curb). Pixel-hard everywhere: image-rendering: pixelated, no blur. */

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/PressStart2P-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  /* the app's palette */
  --board-bg: #0a0a0a;
  --amber: #ffb000;
  --amber-mid: #c08400;
  --amber-dim: #7a5400;
  --sky-day-top: #7ec0ee;
  --sky-day-bot: #a9d6f5;
  --sky-dusk-top: #5b5286;
  --sky-dusk-bot: #e6935a;
  --sky-night-top: #0d1330;
  --sky-night-bot: #1b2650;
  --star: #dbe8ff;
  --moon: #f2ead0;
  --cloud: #eef6ff;
  /* buildStopScene street */
  --road: #461e00;
  --road-gloss: #783246;
  --lane: #f0dcb4;
  --pavement: #a8a298;
  --pavement-dot: #9c968c;
  --ink: #efe9dc;

  /* ── SCENE SCALE — the single knob every object is sized from (the web's BUS_SCALE) ──
     The scene used to have SIX independent sizing formulas (buildings max(100vw,160vh) capped at
     1800px, bus min(46vw,78vh), shelter 34vh, tree 30vh…) plus per-breakpoint overrides that fought
     each other. They agreed only near 1440x900; anywhere else the proportions drifted — on 4K the
     terrace hit its 1800px cap while the bus kept growing with vh (bus went from 46% to 62% of the
     terrace), and on a tall phone the terrace ballooned to 300vw so only two houses fitted.
     Now: --terrace is the terrace width, and --u is 1% of it. Every object is a multiple of --u, so
     the proportions are IDENTICAL at every viewport by construction, not by luck.
       max(100vw, …)  the terrace must always span the screen (no gap at the edges)
       min(160vh, …)  otherwise it is ~56vh tall, the app's framing
       …170vw         but never more than 1.7 screen-widths, so a tall phone still sees a street
                      and not two enormous front doors
     --u additionally clamps to 200vh so that on ultrawide (where covering the width forces a very
     wide terrace) the furniture does not dwarf the viewport height. */
  --terrace: max(100vw, min(160vh, 170vw));
  --u: calc(min(var(--terrace), 200vh) / 100);

  /* scene geometry (one place to tune every breakpoint) */
  --street-h: 20vh;   /* road + pavement belt */
  --pave-h: 11vh;     /* front pavement (app: pavement is DEEPER than the road) */
  --road-h: 9vh;
  --horizon: 20vh;    /* = street-h: buildings base / road top, from the bottom */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--board-bg);
  color: var(--ink);
  font-family: 'Press Start 2P', monospace;
  /* NO overflow-x here: it silently reparents scrolling off the viewport and desyncs
     position: sticky/fixed from the visual viewport in some embedders. Horizontal
     overflow is prevented at the source instead (.stage clips; nothing else exceeds 100vw). */
}

img { image-rendering: pixelated; }

.heart { color: #e23d3d; }

/* language toggle (top-right corner, board-style chip) */
.lang {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10;
  color: var(--amber);
  text-decoration: none;
  font-size: 10px;
  padding: 8px 10px;
  border: 3px solid #23201a;
  border-radius: 8px;
  background: var(--board-bg);
}
.lang:hover { color: #ffd977; }
.star { color: var(--amber); }

/* ─────────── HERO ─────────── */
.greetings { width: min(560px, 84vw); height: auto; }

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  text-align: center;
  padding: 24px;
}

.hero-board, .mini-la {
  background: var(--board-bg);
  border: 4px solid #23201a;
  border-radius: 10px;
  padding: 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  /* faint LED cell grid */
  background-image: radial-gradient(#141209 18%, transparent 19%);
  background-size: 7px 7px;
  box-shadow: 0 0 0 6px #000, 0 12px 40px rgba(0, 0, 0, 0.8);
}

.board-line { color: var(--amber); text-shadow: 0 0 8px rgba(255, 176, 0, 0.45); }
.hero-board .board-title { font-size: clamp(28px, 7vw, 56px); }
.hero-board .board-heart { font-size: clamp(13px, 3vw, 22px); }
.hero-board .board-eta { font-size: clamp(16px, 4vw, 30px); color: var(--amber); }

.hero-tag { font-size: clamp(10px, 2.4vw, 15px); line-height: 1.9; max-width: 34em; }

.hero-hint {
  font-size: 9px;
  color: var(--amber-mid);
  line-height: 2.2;
  margin-top: 8px;
}
.chevron { display: inline-block; animation: bob 1.4s steps(2) infinite; font-size: 13px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ─────────── THE BUILD (pinned stage) ─────────── */
.build { height: 560vh; position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: 1100px; /* the "Apple 3D" depth: layers travel in z */
}

/* sky bands (day under, dusk + night crossfaded on top by scroll) */
.sky { position: absolute; inset: 0 0 var(--street-h) 0; }
.sky-day { background: linear-gradient(var(--sky-day-top), var(--sky-day-bot)); }
.sky-dusk { background: linear-gradient(var(--sky-dusk-top), var(--sky-dusk-bot)); opacity: 0; }
.sky-night { background: linear-gradient(var(--sky-night-top), var(--sky-night-bot)); opacity: 0; }

/* stars: pixel dots via box-shadow, twinkle in steps */
.stars { position: absolute; inset: 0 0 30vh 0; opacity: 0; }
.stars::before, .stars::after {
  content: '';
  position: absolute;
  width: 3px; height: 3px;
  background: var(--star);
  box-shadow:
    12vw 10vh 0 var(--star), 24vw 22vh 0 var(--star), 33vw 8vh 0 var(--star),
    41vw 18vh 0 var(--star), 52vw 6vh 0 var(--star), 61vw 15vh 0 var(--star),
    72vw 9vh 0 var(--star), 83vw 20vh 0 var(--star), 91vw 12vh 0 var(--star),
    18vw 30vh 0 var(--star), 47vw 28vh 0 var(--star), 78vw 32vh 0 var(--star);
}
.stars::after {
  transform: translate(4vw, 3vh);
  animation: twinkle 2.2s steps(2) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* moon: pixel-hard disc with a stepped terminator (waxing look) */
.moon {
  position: absolute;
  top: 9vh; right: 12vw;
  width: clamp(44px, 5vw, 72px); height: clamp(44px, 5vw, 72px);
  background: var(--moon);
  clip-path: polygon(
    25% 0, 75% 0, 75% 8%, 88% 8%, 88% 18%, 100% 18%, 100% 82%, 88% 82%,
    88% 92%, 75% 92%, 75% 100%, 25% 100%, 25% 92%, 12% 92%, 12% 82%, 0 82%,
    0 18%, 12% 18%, 12% 8%, 25% 8%
  );
  opacity: 0;
}
.moon::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--sky-night-top);
  clip-path: polygon(0 0, 42% 0, 30% 25%, 26% 50%, 30% 75%, 42% 100%, 0 100%);
}

/* clouds: chunky pixel rectangles */
.cloud-px {
  position: absolute;
  background: var(--cloud);
  box-shadow: 24px 10px 0 var(--cloud), -20px 12px 0 var(--cloud), 6px -10px 0 var(--cloud);
  width: 70px; height: 22px;
}
.cloud-1 { top: 12vh; left: 14vw; animation: drift 46s linear infinite; }
.cloud-2 { top: 24vh; left: 58vw; width: 52px; height: 18px; animation: drift 62s linear infinite reverse; }
@keyframes drift { from { transform: translateX(-6vw); } to { transform: translateX(12vw); } }

/* buildings: base ON the horizon (road top), like buildStopScene */
.buildings {
  position: absolute;
  bottom: var(--horizon);
  left: 50%;
  width: var(--terrace); /* height follows the sprite's aspect ratio */
  transform: translateX(-50%);
}

/* ── street: road (top) + FRONT pavement (bottom) — the app's exact order and colours ── */
.street { position: absolute; left: 0; right: 0; bottom: 0; height: var(--street-h); }
.road {
  position: relative;
  height: var(--road-h);
  background: var(--road);
  border-top: 4px solid var(--road-gloss); /* the "brillo" line */
}
.lane {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 5vw, transparent 5vw 10vw);
}
.pavement {
  height: var(--pave-h);
  background: var(--pavement);
  /* the 2px dither grain */
  background-image: radial-gradient(var(--pavement-dot) 26%, transparent 27%);
  background-size: 5px 5px;
  border-top: 4px solid var(--road); /* warm-dark curb, contact with the road */
}

/* facade-depth furniture: feet just below the horizon (app: FAROLA_Y = horizon + 0.04·AH) */
.tree { position: absolute; bottom: calc(var(--horizon) - 2.5vh); left: 12vw; height: calc(var(--u) * 19); }
.farola { position: absolute; bottom: calc(var(--horizon) - 2vh); height: calc(var(--u) * 17.5); }
.farola-a { left: 5vw; }
.farola-b { left: 66vw; }

/* the bus rides the road (wheels on the asphalt, tucks behind YOUR shelter at DUE) */
.bus { position: absolute; bottom: calc(var(--pave-h) - 2vh); left: 30vw; width: calc(var(--u) * 46); }

/* YOUR shelter stands on the front pavement, in FRONT of the bus (app z-order) */
.shelter-wrap { position: absolute; bottom: 3.5vh; right: 12vw; width: calc(var(--u) * 33.5); aspect-ratio: 1114 / 707; }
.shelter-img { height: 100%; width: 100%; }
/* the six-sheet poster panel of shelter-hd.png (right side of the sprite), filled with the REAL
   v2 house-ad artwork cropped from mupi.png ("Your ~ad~ ART here") — same asset, no imitation */
.poster-ad {
  position: absolute;
  left: 64.5%; top: 30%;
  width: 31%; height: 52%;
  object-fit: contain;
}

/* the LED board drops in at the end */
.board {
  position: absolute;
  top: 6vh; left: 50%;
  transform: translateX(-50%);
  background: var(--board-bg);
  background-image: radial-gradient(#141209 18%, transparent 19%);
  background-size: 7px 7px;
  border: 4px solid #23201a;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #000, 0 14px 44px rgba(0, 0, 0, 0.55);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.7);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.95);
  align-items: center;
  text-align: center;
}
/* sized off the scene unit like everything else, with a px floor so a small phone stays legible */
.board .b1 { font-size: max(11px, calc(var(--u) * 1.33)); white-space: nowrap; }
.board .b2 { font-size: max(8px, calc(var(--u) * 1.09)); white-space: nowrap; }
.board .b3 { font-size: max(15px, calc(var(--u) * 1.88)); }

/* the conductor narrates from the front pavement, tutorial-style */
.conductor-guide {
  position: absolute;
  left: 3vw;
  bottom: 2.5vh;
  height: calc(var(--u) * 16);
  transform-origin: bottom center;
  opacity: 0;
}

/* captions = the conductor's speech bubble (large type for glance-reading, like the app tour) */
.caption {
  position: absolute;
  bottom: 16vh;
  left: calc(3vw + 14vh);
  max-width: 26em;
  background: rgba(10, 10, 10, 0.88);
  border: 4px solid #23201a;
  border-radius: 12px;
  padding: 18px 22px;
  text-align: left;
  font-size: clamp(12px, 2vw, 17px);
  line-height: 1.9;
  color: #fff;
  opacity: 0;
  pointer-events: none;
}
.caption::before {
  content: '';
  position: absolute;
  left: -16px; bottom: 24px;
  width: 16px; height: 16px;
  background: #23201a;
  clip-path: polygon(100% 0, 0 60%, 100% 100%);
}
.caption small { font-size: 0.62em; color: #ffe9bd; }

/* ─────────── FEATURES ─────────── */
.features {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14vh 24px;
  display: flex;
  flex-direction: column;
  gap: 16vh;
}

.feature {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
  justify-content: center;
}
.feature.reverse { flex-direction: row-reverse; }

.f-visual { flex: 0 1 380px; display: flex; justify-content: center; }
.f-copy { flex: 1 1 340px; max-width: 30em; }

.f-copy h2 {
  color: var(--amber);
  font-size: clamp(13px, 2.6vw, 19px);
  line-height: 1.8;
  margin-bottom: 22px;
}
.f-copy p {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15px;
  line-height: 1.9;
  color: #cfc9bb;
}

.mini-la { padding: 20px 26px; gap: 10px; }
.mini-la .b1 { font-size: 12px; }
.mini-la .b2 { font-size: 10px; }
.mini-la .b3 { font-size: 18px; }

.mini-croquis {
  background: #101010;
  border: 4px solid #23201a;
  border-radius: 10px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mc-title { font-size: 11px; color: #fff; margin-bottom: 6px; }
.mc-stop { font-size: 9px; line-height: 1.6; }
.mc-stop.dim { color: #8d8778; }
.mc-stop.marked { color: var(--amber); }

.daynight-chip { display: flex; border: 4px solid #23201a; border-radius: 10px; overflow: hidden; }
.dn { width: 90px; height: 130px; display: block; }
.dn-day { background: linear-gradient(var(--sky-day-top), var(--sky-day-bot)); }
.dn-dusk { background: linear-gradient(var(--sky-dusk-top), var(--sky-dusk-bot)); }
.dn-night { background: linear-gradient(var(--sky-night-top), var(--sky-night-bot)); }

.philosophy {
  color: var(--amber);
  font-size: clamp(17px, 3.4vw, 26px);
  line-height: 2;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.35);
}

/* ─────────── FOOTER — the conductor sees you off ─────────── */
.footer {
  padding: 14vh 24px 10vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
}

.conductor-row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}
.conductor { height: clamp(180px, 30vh, 300px); }

.bubble {
  position: relative;
  background: #101010;
  border: 4px solid #23201a;
  border-radius: 12px;
  padding: 28px 30px;
  max-width: 24em;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bubble::before {
  /* pixel speech-tail pointing at the conductor */
  content: '';
  position: absolute;
  left: -18px; top: 50%;
  width: 18px; height: 18px;
  background: #23201a;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.bubble p { font-size: clamp(11px, 2.2vw, 14px); line-height: 2; color: var(--ink); }

.stores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.store-badge {
  font-size: 9px;
  color: var(--amber);
  border: 3px solid #23201a;
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--board-bg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.store-badge em { font-style: normal; font-size: 7px; color: var(--amber-dim); }
/* The stores' official badges, side by side. Google's art carries its own mandatory
   padding (the button is 40 of those 52 px); Apple's has none, so it is set to 40 and
   the two buttons read the same size — Apple asks for its badge to be no smaller than
   the others, and the flex gap covers Apple's clear-space rule. */
.store-badge-link { display: inline-flex; align-items: center; }
.store-badge-link img { height: 52px; display: block; }
.store-badge-link.app-store img { height: 40px; }

.footer-small {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  color: #8d8778;
  line-height: 1.8;
}

/* ─────────── responsive ─────────── */
/* short/wide screens (landscape laptops are the default; ultrawide handled by buildings max-width) */
@media (max-width: 900px) {
  /* POSITION only — sizes come from --u. (`.shelter` here matched nothing: the element is
     `.shelter-wrap`, so the shelter never actually shrank on tablet or phone.) */
  .bus { left: 20vw; }
  .shelter-wrap { right: 8vw; }
  .farola-b { left: 72vw; }
}

@media (max-width: 640px) {
  :root { --street-h: 16vh; --pave-h: 9vh; --road-h: 7vh; --horizon: 16vh; }
  .bus { left: 6vw; bottom: calc(var(--pave-h) - 1.5vh); }
  .shelter-wrap { right: 4vw; bottom: 2.5vh; }
  .tree { left: 4vw; }
  .farola-a { left: 24vw; }
  .farola-b { display: none; }
  .greetings { width: 92vw; }
  .conductor-guide { left: 4vw; }
  .caption { bottom: 22vh; left: 4vw; right: 4vw; max-width: none; font-size: 13px; }
  .caption::before { left: 20px; bottom: -16px; transform: rotate(-90deg); }
  .feature, .feature.reverse { flex-direction: column; gap: 36px; }
  .conductor-row { flex-direction: column; }
  .bubble::before { left: 50%; top: -18px; transform: translateX(-50%) rotate(90deg); }
}

/* ultrawide is handled by the 200vh clamp inside --u (see :root) — no size override needed here. */

/* reduce motion: everything lands assembled, no scrub */
@media (prefers-reduced-motion: reduce) {
  .chevron, .cloud-px { animation: none; }
}


/* ─────────── LEGAL PAGES + COOKIE BANNER ─────────── */
.legal {
  max-width: 46em;
  margin: 0 auto;
  padding: 96px 24px 48px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15px;
  line-height: 1.9;
  color: #cfc9bb;
}
.legal h1 { font-family: 'Press Start 2P', monospace; color: var(--amber); font-size: clamp(13px, 2.6vw, 19px); line-height: 1.8; margin: 0 0 26px; }
.legal h2 { font-family: 'Press Start 2P', monospace; color: var(--amber); font-size: clamp(12px, 2.2vw, 16px); line-height: 1.8; margin: 40px 0 18px; }
.legal h3 { font-family: 'Press Start 2P', monospace; color: #ffd977; font-size: 11px; line-height: 1.9; margin: 30px 0 12px; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px 1.4em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--amber); }
.legal hr { border: none; border-top: 2px solid #23201a; margin: 30px 0; }
.legal-home { font-family: 'Press Start 2P', monospace; font-size: 10px; margin-bottom: 30px; }
.legal-home a { color: var(--amber); text-decoration: none; }
.legal-company { margin-top: 40px; color: #8d8778; font-size: 13px; }
.legal-footer { padding-top: 6vh; }
.footer-small a { color: #b8b09e; }

/* cookie banner — board language: dark, pixel border, amber action */
.cookie-banner {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 40;
  background: var(--board-bg);
  border: 4px solid #23201a;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  max-width: 560px;
  margin: 0 auto;
}
.cookie-text {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #cfc9bb;
  margin-bottom: 14px;
}
.cookie-text a { color: var(--amber); }
.cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #cfc9bb;
  background: transparent;
  border: 3px solid #23201a;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}
.cookie-btn.cookie-accept { color: var(--board-bg); background: var(--amber); border-color: var(--amber); }

/* ── Support page: FAQ + the mailto contact form ───────────────────────────────
   Reuses the .legal column and the cookie-banner button so the page inherits the
   site's type scale and palette instead of inventing a second one. */
.legal h4.faq-q {
  font-family: 'Press Start 2P', monospace;
  color: #ffd977;
  font-size: 10px;
  line-height: 1.9;
  margin: 26px 0 10px;
}
.faq-note { color: #8d8778; font-size: 13px; }
.support-form { margin: 18px 0 10px; max-width: 560px; }
.support-label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #b8b09e;
  margin: 18px 0 8px;
}
.support-input {
  width: 100%;
  box-sizing: border-box;
  background: #16140f;
  color: var(--ink);
  border: 2px solid #23201a;
  border-radius: 0; /* pixel-art: no soft corners anywhere on this site */
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
}
.support-input:focus { outline: none; border-color: var(--amber-mid); }
textarea.support-input { resize: vertical; min-height: 120px; }
.support-error { color: #ff8a6b; font-size: 13px; margin: 12px 0 0; }
.support-send { margin-top: 18px; }

/* "Cookie settings" in the footer: an action, so a <button>, styled to sit beside
   the sibling links without looking like a form control. */
.footer-link {
  font: inherit;
  color: #b8b09e;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.footer-link:hover { color: var(--amber); }