/* NearMe homepage: a short illustrated story. Brand green, sunrise amber, nothing invented. */
:root {
  --ink-deep: #06241c;
  --amber: #ffc24a;
  --amber-ink: #3a2600;
  --hero-text: #f4fff9;
}
body.show-home { display: block; height: auto; min-height: 100dvh; overflow: visible; }
body.show-home .app-shell { display: none; }
body.show-app .home { display: none; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.home { font-family: var(--font); color: var(--ink); background: var(--bg); }
.home h1, .home h2, .home h3 { font-family: var(--font); letter-spacing: -0.02em; margin: 0; }
.home a { color: inherit; }

/* ---------- top bar ---------- */
.home-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(3, 31, 24, 0.72), rgba(3, 31, 24, 0));
  color: var(--hero-text); transition: background 0.2s, box-shadow 0.2s;
}
.home-nav.solid { background: rgba(5, 40, 30, 0.92); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.home-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; text-decoration: none; letter-spacing: -0.02em; color: inherit; }
.home-brand.small { color: var(--brand); font-size: 18px; }
.logo-pin { color: var(--amber); --logo-hole: #06241c; flex: none; }
.home-brand.small .logo-pin { color: var(--brand); --logo-hole: var(--bg); }
.home-links { display: flex; gap: 6px; margin-left: 18px; flex: 1; }
.home-links a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; opacity: 0.9; }
.home-links a:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; }
.home-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.home-nav .btn.ghost { color: var(--hero-text); border-color: rgba(255, 255, 255, 0.35); background: transparent; }
.home-nav .btn { min-height: 42px; }
.home-nav .btn.primary { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: 120px max(22px, env(safe-area-inset-right)) 90px max(22px, env(safe-area-inset-left));
  background: #04261e url(/img/hero.svg) center bottom / cover no-repeat; color: var(--hero-text); overflow: hidden;
}
/* a soft shade behind the words, so they stay readable over the lit-up skyline */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 31, 24, 0.86) 0%, rgba(3, 31, 24, 0.58) 42%, rgba(3, 31, 24, 0) 74%); }
.hero-inner { position: relative; z-index: 2; max-width: 660px; margin-left: max(0px, calc((100vw - 1180px) / 2)); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px);
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
}
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #5df0b0; box-shadow: 0 0 0 0 rgba(93, 240, 176, 0.7); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(93, 240, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(93, 240, 176, 0); } }
.hero h1 { font-size: clamp(44px, 8.2vw, 88px); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; margin: 18px 0 16px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.lead { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.55; max-width: 560px; opacity: 0.95; margin: 0 0 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn.big { min-height: 54px; padding: 0 26px; font-size: 17px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn.glass { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.38); backdrop-filter: blur(8px); }
.btn.glass:hover { background: rgba(255, 255, 255, 0.24); border-color: #fff; }
.hero .btn.primary, .final .btn.primary { background: linear-gradient(135deg, #ffd166, var(--amber)); color: var(--amber-ink); border-color: transparent; box-shadow: 0 10px 28px rgba(255, 194, 74, 0.35); }
.hero .btn.primary:hover, .final .btn.primary:hover { background: linear-gradient(135deg, #ffdc8a, #ffc24a); }
.hero-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.18); }

.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.95); color: #14181f; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); max-width: 280px;
  animation: floaty 6s ease-in-out infinite;
}
.float-card b { display: block; font-size: 14px; } .float-card small { color: #5b6574; font-size: 12px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; } .dot.good { background: #0f8a5f; box-shadow: 0 0 0 4px rgba(15, 138, 95, 0.18); } .dot.bad { background: #d4452f; box-shadow: 0 0 0 4px rgba(212, 69, 47, 0.18); }
.fc1 { right: max(4%, calc((100vw - 1180px) / 2 + 20px)); top: 26%; } .fc2 { right: max(14%, calc((100vw - 1180px) / 2 + 190px)); top: 46%; animation-delay: -2s; } .fc3 { right: max(3%, calc((100vw - 1180px) / 2)); top: 62%; animation-delay: -4s; }
@keyframes floaty { 50% { transform: translateY(-12px); } }
.scroll-hint { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); font-weight: 600; font-size: 13px; text-decoration: none; opacity: 0.85; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.25); }

/* ---------- the story ---------- */
.story { max-width: 1180px; margin: 0 auto; padding: 84px 22px 20px; }
.story-kicker { text-align: center; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; color: var(--brand); margin: 0 0 54px; }
.chapter { display: grid; grid-template-columns: 1.12fr 1fr; gap: 56px; align-items: center; margin-bottom: 96px; }
.chapter.flip { grid-template-columns: 1fr 1.12fr; } .chapter.flip .chapter-art { order: 2; }
.chapter-art {
  position: relative; min-height: 380px; border-radius: 28px; overflow: hidden; background-size: cover; background-position: center;
  box-shadow: 0 30px 70px rgba(6, 36, 28, 0.28); border: 1px solid rgba(255, 255, 255, 0.08);
}
.time-pill { position: absolute; z-index: 3; top: 18px; left: 18px; padding: 7px 14px; border-radius: 999px; background: rgba(6, 36, 28, 0.82); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; }
.chapter-text h2 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; font-weight: 800; margin-bottom: 16px; }
.chapter-text p { font-size: 18px; line-height: 1.65; color: var(--muted); margin: 0 0 14px; }
.chapter-text .pain { color: #c2410c; font-weight: 700; } .chapter-text .win { color: var(--brand); font-weight: 800; }
.chapter-text strong { color: var(--ink); }

/* a phone showing the real product */
.chapter-art.map { display: grid; place-items: center; padding: 34px 20px; }
.phone { position: relative; z-index: 2; width: min(300px, 82%); border-radius: 38px; padding: 12px; background: #0b1a15; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 2px #26352f; transform: rotate(-3deg); }
.phone-notch { position: absolute; z-index: 3; top: 16px; left: 50%; transform: translateX(-50%); width: 86px; height: 20px; border-radius: 12px; background: #0b1a15; }
.phone-screen { border-radius: 28px; background: #f4f6f8; padding: 40px 12px 14px; min-height: 420px; color: #14181f; }
.mock-search { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #e1e5ea; font-size: 13px; color: #5b6574; margin-bottom: 10px; }
.mock-card { background: #fff; border: 1px solid #e1e5ea; border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06); }
.mock-card.dim { opacity: 0.9; } .mock-card > b { display: block; font-size: 14px; } .mock-card > small { color: #5b6574; font-size: 12px; }
.mock-badge { margin-top: 8px; padding: 8px 10px; border-radius: 10px; border-left: 4px solid #0f8a5f; background: #f4f6f8; }
.mock-badge.bad { border-left-color: #b42318; } .mock-badge b { display: block; font-size: 12.5px; color: #0f8a5f; } .mock-badge.bad b { color: #b42318; }
.mock-badge small { color: #5b6574; font-size: 11px; }
.mock-vote { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: #5b6574; }
.mock-vote i { font-style: normal; padding: 3px 10px; border-radius: 999px; border: 1px solid #d3d9e0; background: #fff; font-weight: 700; color: #14181f; } .mock-vote i.on { background: #0f8a5f; border-color: #0f8a5f; color: #fff; }
.mock-comment { margin-top: 8px; font-size: 12px; } .mock-comment small { color: #5b6574; }
.pin { position: absolute; z-index: 1; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #0f8a5f; box-shadow: 0 6px 14px rgba(15, 138, 95, 0.45); animation: drop 3.5s ease-in-out infinite; }
.pin::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.pin.p1 { left: 9%; top: 24%; } .pin.p2 { right: 10%; top: 58%; animation-delay: -1.2s; } .pin.p3 { left: 14%; bottom: 14%; animation-delay: -2.2s; }
.pin.off { background: #98a2b3; box-shadow: none; }
@keyframes drop { 50% { transform: rotate(-45deg) translate(-4px, 6px); } }

/* the celebration, as people see it in the app */
.chapter-art.community-art { display: grid; place-items: center; padding: 40px 20px 78px; background: linear-gradient(160deg, #0a6b4c, #159b6a 55%, #ffd27a); }
.community-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 25%, #ffc24a 3px, transparent 4px), radial-gradient(circle at 78% 18%, #fff 3px, transparent 4px), radial-gradient(circle at 66% 70%, #ff7a59 3px, transparent 4px), radial-gradient(circle at 30% 80%, #fff 2px, transparent 3px), radial-gradient(circle at 88% 55%, #ffc24a 3px, transparent 4px); background-size: 260px 260px; opacity: 0.9; }
.hurray-card { position: relative; width: min(330px, 90%); padding: 26px 22px 22px; border-radius: 24px; background: #fff; text-align: center; color: #14181f; box-shadow: 0 30px 60px rgba(3, 38, 28, 0.4); transform: rotate(2deg); }
.hurray-badge { width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%; background: #0f8a5f; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 32px; box-shadow: 0 0 0 8px rgba(15, 138, 95, 0.2); }
.hurray-card h3 { font-size: 28px; font-weight: 800; } .hurray-card p { color: #5b6574; margin: 4px 0 12px; font-size: 14px; }
.hurray-line { padding: 10px 12px; border-radius: 10px; background: #f4f6f8; font-size: 13.5px; text-align: left; }
.avatars { position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; }
.avatars i { width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; color: #fff; border: 3px solid #fff; background: #0f8a5f; }
.avatars i:nth-child(2) { background: #e0533d; } .avatars i:nth-child(3) { background: #3b82c4; } .avatars i:nth-child(4) { background: #b7791f; } .avatars i:nth-child(5) { background: #14181f; }

/* ---------- how it works ---------- */
.how { max-width: 1180px; margin: 0 auto; padding: 40px 22px 90px; text-align: center; }
.how h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; margin-bottom: 36px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.how-card { padding: 28px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06); }
.step { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--brand-ink); font-weight: 800; font-size: 18px; margin-bottom: 14px; }
.how-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; } .how-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0; margin: 28px 0 0; }
.facts li { padding: 18px 14px; border-radius: 18px; background: color-mix(in srgb, var(--brand) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); }
.facts b { display: block; font-size: 22px; font-weight: 800; color: var(--brand); } .facts span { font-size: 13.5px; color: var(--muted); }

/* ---------- levels ---------- */
.levels { background: var(--ink-deep); color: #eafff5; padding: 84px 22px; }
.levels-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.levels h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-bottom: 14px; } .levels p { font-size: 18px; line-height: 1.6; opacity: 0.85; margin: 0 0 30px; }
.ladder { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: 0; counter-reset: lvl; }
.ladder li { padding: 22px 12px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); position: relative; }
.ladder li::before { counter-increment: lvl; content: counter(lvl); position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.ladder b { display: block; font-size: 16px; margin-bottom: 4px; } .ladder span { font-size: 13px; opacity: 0.75; }
.ladder li:last-child { background: linear-gradient(160deg, rgba(255, 194, 74, 0.28), rgba(255, 255, 255, 0.07)); border-color: rgba(255, 194, 74, 0.5); }

/* ---------- final call ---------- */
.final { position: relative; padding: 120px 22px 140px; text-align: center; background-size: cover; background-position: center bottom; color: #fff; }
.final-inner { max-width: 720px; margin: 0 auto; }
.final h2 { font-size: clamp(32px, 5.4vw, 58px); line-height: 1.06; font-weight: 800; margin-bottom: 14px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25); }
.final p { font-size: 19px; margin: 0 0 28px; opacity: 0.95; } .final .cta-row { justify-content: center; }
.home-foot { padding: 34px 22px max(34px, env(safe-area-inset-bottom)); text-align: center; background: var(--card); border-top: 1px solid var(--line); }
.home-foot p { max-width: 560px; margin: 10px auto 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.home-foot .home-brand { justify-content: center; }

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in { opacity: 1; transform: none; }
  .hero-inner .reveal:nth-child(2) { transition-delay: 0.08s; } .hero-inner .reveal:nth-child(3) { transition-delay: 0.16s; }
  .hero-inner .reveal:nth-child(4) { transition-delay: 0.24s; } .hero-inner .reveal:nth-child(5) { transition-delay: 0.32s; }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 960px) {
  .home-links { display: none; }
  .float-card { display: none; }
  .hero-inner { margin-left: 0; max-width: none; }
  .chapter, .chapter.flip { grid-template-columns: 1fr; gap: 26px; margin-bottom: 70px; }
  .chapter.flip .chapter-art { order: 0; }
  .chapter-art { min-height: 300px; border-radius: 24px; }
  .how-grid { grid-template-columns: 1fr; } .facts { grid-template-columns: repeat(2, 1fr); } .ladder { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
}
@media (max-width: 560px) {
  .home-nav { gap: 10px; padding-left: 14px; padding-right: 14px; } .home-nav .btn { padding: 0 12px; font-size: 14px; }
  .hero { padding-top: 104px; align-items: center; padding-bottom: 90px; }
  .hero::before { background: linear-gradient(180deg, rgba(3, 31, 24, 0.55) 0%, rgba(3, 31, 24, 0.82) 45%, rgba(3, 31, 24, 0.9) 100%); }
  .btn.big { width: 100%; } .cta-row { gap: 10px; }
  .story { padding-top: 60px; } .chapter-text p { font-size: 17px; }
  .phone { width: min(280px, 86%); transform: rotate(-2deg); } .phone-screen { min-height: 380px; }
}

/* =====================================================================================
   v2: less template, more street. Warm paper, a soft serif, handwriting, scrapbook photos,
   a danfo stripe and a fuel receipt. (Overrides the first pass above.)
   ===================================================================================== */
.home {
  --paper: #f6f1e6; --p-ink: #1d231f; --p-muted: #5d655e; --p-line: #ddd3bd; --aside: #b4570a; --serif: "Fraunces", Georgia, "Times New Roman", serif; --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  background: var(--paper); color: var(--p-ink);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home { --paper: #0f1713; --p-ink: #eef3ee; --p-muted: #a4b0a8; --p-line: #2b3b32; --aside: #ffc24a; } }
:root[data-theme="dark"] .home { --paper: #0f1713; --p-ink: #eef3ee; --p-muted: #a4b0a8; --p-line: #2b3b32; --aside: #ffc24a; }
.home h1, .home h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; font-variation-settings: "opsz" 120; }

/* hero */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url(/img/grain.svg); opacity: 0.09; }
.hero h1 { font-weight: 800; font-size: clamp(40px, 7.4vw, 84px); line-height: 1.03; letter-spacing: -0.025em; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.3); }
.kicker { margin: 0 0 16px; font: 700 13px/1.4 var(--font); letter-spacing: 0.13em; text-transform: uppercase; color: var(--amber); }
.scribble { position: relative; display: inline-block; }
.scribble-line { position: absolute; left: -2%; width: 104%; bottom: -0.14em; height: 0.26em; pointer-events: none; }
.hero .lead { max-width: 540px; }
.link-cta { background: none; border: 0; color: inherit; font: 700 17px var(--font); padding: 12px 6px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.link-cta:hover { text-decoration-color: #fff; } .link-cta.light { color: #fff; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 3px; }
.hero-find { margin: 18px 0 0; max-width: 470px; font-size: 14.5px; line-height: 1.55; opacity: 0.82; }
.hero .btn.primary { border-radius: 10px; }
.float-cards { display: contents; }
.float-card { border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); }
.fc1 { rotate: 2deg; } .fc2 { rotate: -2.5deg; } .fc3 { rotate: 1.5deg; }
.hero-note { position: absolute; z-index: 2; right: max(6%, calc((100vw - 1180px) / 2 + 40px)); top: 15%; margin: 0; display: flex; align-items: flex-end; gap: 6px; color: var(--amber); font: 700 25px/1.1 var(--hand); rotate: -3deg; max-width: 260px; }
.doodle-arrow { width: 54px; flex: none; rotate: 62deg; margin-bottom: -20px; order: 2; }

/* the danfo stripe: yellow body, black band, the way every Lagos bus is painted */
.danfo-stripe { height: 26px; background: linear-gradient(#ffc928 0 34%, #14181f 34% 64%, #ffc928 64% 100%); }

/* story */
.story-kicker { font-family: var(--hand); font-size: 30px; letter-spacing: 0.02em; text-transform: none; color: var(--aside); rotate: -1.5deg; }
.chapter-text h2 { font-size: clamp(32px, 4.6vw, 50px); line-height: 1.05; color: var(--p-ink); }
.chapter-text p { color: var(--p-muted); } .chapter-text strong { color: var(--p-ink); } .chapter-text .pain { color: #c2410c; } .chapter-text .win { color: var(--brand); }
.chapter-text .aside { font: 700 27px/1.1 var(--hand); color: var(--aside); rotate: -2deg; margin: 10px 0 0; }
.chapter-art { overflow: visible; border: 10px solid #fffdf6; border-radius: 4px; background-clip: padding-box; box-shadow: 0 22px 46px rgba(70, 52, 20, 0.3); }
:root[data-theme="dark"] .chapter-art { border-color: #ece6d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chapter-art { border-color: #ece6d6; } }
.chapter:nth-of-type(odd) .chapter-art { rotate: -1.1deg; } .chapter:nth-of-type(even) .chapter-art { rotate: 0.9deg; }
.tape::before, .tape::after { content: ""; position: absolute; z-index: 4; top: -22px; width: 104px; height: 28px; background: rgba(255, 223, 128, 0.82); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.tape::before { left: 12%; rotate: -5deg; } .tape::after { right: 12%; rotate: 4deg; }
.time-pill { top: 12px; left: 10px; border-radius: 3px; background: #fff7d4; color: #3a2a00; font: 700 22px/1 var(--hand); letter-spacing: 0; padding: 5px 12px 4px; rotate: -3deg; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); }
.example-tag { position: absolute; z-index: 3; top: 18px; right: 14px; padding: 2px 9px; border: 2px dashed rgba(255, 255, 255, 0.85); border-radius: 4px; color: #fff; background: rgba(0, 0, 0, 0.35); font: 800 10.5px/1.5 var(--font); letter-spacing: 0.14em; text-transform: uppercase; rotate: 4deg; }
.chapter-art.map .example-tag { color: #14181f; background: rgba(255, 255, 255, 0.75); border-color: #14181f; }

/* how it works: a plain numbered list, no row of identical boxes */
.how { max-width: 820px; text-align: left; }
.how h2 { text-align: left; font-size: clamp(32px, 4.6vw, 48px); }
.how-list { list-style: none; margin: 0 0 64px; padding: 0; }
.how-list li { display: flex; gap: 22px; align-items: flex-start; padding: 24px 0; border-bottom: 2px dashed var(--p-line); }
.how-list li:last-child { border-bottom: 0; }
.big-num { font: 800 76px/0.9 var(--serif); color: var(--brand); flex: none; width: 54px; text-align: center; }
.how-list h3 { font: 700 24px/1.2 var(--serif); margin: 4px 0 8px; } .how-list p { margin: 0; color: var(--p-muted); line-height: 1.65; font-size: 17px; }
.receipt {
  position: relative; max-width: 390px; margin: 0 auto; padding: 24px 22px 20px; background: #fffdf5; color: #26231c; rotate: 1.6deg;
  font: 500 14px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; box-shadow: 0 16px 34px rgba(60, 45, 20, 0.24);
}
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 6px, #fffdf5 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 6px, #fffdf5 0) 0 0 / 14px 10px repeat-x; }
.receipt-head, .receipt-foot { text-align: center; font-weight: 800; letter-spacing: 0.12em; font-size: 12.5px; }
.receipt-head { padding-bottom: 10px; border-bottom: 2px dashed #b9b09a; margin-bottom: 6px; } .receipt-foot { padding-top: 12px; border-top: 2px dashed #b9b09a; margin-top: 6px; }
.receipt dl { margin: 0; } .receipt dl div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dotted #c9c0aa; }
.receipt dl div:last-child { border-bottom: 0; } .receipt dt { color: #4a463a; } .receipt dd { margin: 0; font-weight: 800; white-space: nowrap; color: #0b6b49; }

/* levels as stamps */
.levels h2 { font-size: clamp(30px, 4.4vw, 46px); }
.ladder { gap: 18px; }
.ladder li { aspect-ratio: 1; display: grid; place-content: center; padding: 8px; border: 2px dashed rgba(255, 255, 255, 0.45); border-radius: 50%; background: transparent; }
.ladder li::before { display: none; }
.ladder li:nth-child(1) { rotate: -5deg; } .ladder li:nth-child(2) { rotate: 3deg; } .ladder li:nth-child(3) { rotate: -2deg; } .ladder li:nth-child(4) { rotate: 5deg; }
.ladder li:last-child { border-style: solid; border-color: var(--amber); background: rgba(255, 194, 74, 0.12); color: #ffe3a0; }
.ladder b { font: 700 18px/1.15 var(--serif); }

/* closing */
.final h2 { font-size: clamp(32px, 5.2vw, 56px); }
.final::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url(/img/grain.svg); opacity: 0.08; }
.final-inner { position: relative; z-index: 2; }
.home-foot { background: var(--paper); border-top: 2px dashed var(--p-line); }
.home-foot p { color: var(--p-muted); }

/* phones and tablets: the status cards become a swipeable strip under the buttons */
@media (max-width: 960px) {
  .hero { flex-direction: column; justify-content: center; align-items: stretch; }
  .hero-note { display: none; }
  .float-cards { display: flex; gap: 12px; margin: 26px -22px 0; padding: 6px 22px 16px; overflow-x: auto; scroll-snap-type: x mandatory; position: relative; z-index: 2; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .float-cards::-webkit-scrollbar { display: none; }
  .float-cards { scroll-padding-left: 22px; }
  .hero::before { background: linear-gradient(180deg, rgba(3, 31, 24, 0.72) 0%, rgba(3, 31, 24, 0.8) 55%, rgba(3, 31, 24, 0.3) 100%); }
  .float-card { display: flex; position: static; flex: 0 0 auto; max-width: 250px; scroll-snap-align: start; animation: none; }
  .fc2 { margin-top: 10px; }
  .chapter-art { border-width: 8px; }
  .how-list li { gap: 16px; } .big-num { font-size: 60px; width: 42px; }
  .ladder li { aspect-ratio: auto; border-radius: 22px; padding: 18px 10px; }
  .receipt { rotate: 0.8deg; }
}
@media (max-width: 560px) {
  .hero { padding-top: 96px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(38px, 11.5vw, 56px); }
  .story-kicker { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .float-card { animation: none; } }

/* =====================================================================================
   v3: motion. Things happen as you scroll to them: the underline is drawn, the steps join up,
   the receipt prints, the stamps land, the phone screen plays out, a bus drives by.
   Everything here is off for people who ask for reduced motion.
   ===================================================================================== */
.bus { position: absolute; z-index: 2; left: 0; bottom: 10px; pointer-events: none; }
.bus svg { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* hero: the underline is drawn, the bus drives by, the sun-glow breathes */
  .scribble-line path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s 0.7s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .bus { animation: drive 26s linear infinite; }
  @keyframes drive { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 40px)); } }
  .bus .wheel { transform-box: fill-box; transform-origin: center; animation: spin 0.5s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .bus svg { animation: bump 0.45s ease-in-out infinite; }
  @keyframes bump { 50% { transform: translateY(-1.5px); } }
  .hero-note { animation: nudge 3.2s ease-in-out infinite; }
  @keyframes nudge { 50% { translate: 0 -6px; } }
  .float-card { animation: floaty 6s ease-in-out infinite, pop-in 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
  .fc1 { animation-delay: 0s, 0.9s; } .fc2 { animation-delay: -2s, 1.2s; } .fc3 { animation-delay: -4s, 1.5s; }
  @keyframes pop-in { from { opacity: 0; scale: 0.7; } }

  /* the three steps: the numbers pop and a dashed line draws down the page between them */
  .how-list li { position: relative; border-bottom: 0; }
  .how-list li:not(:last-child)::after { content: ""; position: absolute; left: 26px; top: 92px; bottom: -16px; border-left: 3px dashed color-mix(in srgb, var(--brand) 55%, transparent); transform: scaleY(0); transform-origin: top; transition: transform 0.9s 0.5s ease-out; }
  .how-list li.in:not(:last-child)::after { transform: scaleY(1); }
  .big-num { opacity: 0; transform: scale(0.3) rotate(-14deg); transition: opacity 0.35s, transform 0.7s cubic-bezier(0.2, 1.7, 0.4, 1); }
  .how-list li.in .big-num { opacity: 1; transform: none; transition-delay: 0.15s; }
  .how-list li h3 { position: relative; display: inline-block; }
  .how-list li h3::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 4px; width: 100%; background: var(--amber); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.7s 0.7s ease-out; }
  .how-list li.in h3::after { transform: scaleX(1); }

  /* the receipt prints out of the top, one line at a time */
  .receipt { clip-path: inset(0 0 100% 0); }
  .receipt-wrap.in .receipt { animation: print 1.5s steps(16, end) 0.2s forwards; }
  @keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -14px 0); } }
  .receipt dl div { opacity: 0; translate: -10px 0; transition: opacity 0.4s, translate 0.4s; }
  .receipt-wrap.in .receipt dl div { opacity: 1; translate: 0 0; }
  .receipt-wrap.in .receipt dl div:nth-child(1) { transition-delay: 0.55s; } .receipt-wrap.in .receipt dl div:nth-child(2) { transition-delay: 0.8s; }
  .receipt-wrap.in .receipt dl div:nth-child(3) { transition-delay: 1.05s; } .receipt-wrap.in .receipt dl div:nth-child(4) { transition-delay: 1.3s; } .receipt-wrap.in .receipt dl div:nth-child(5) { transition-delay: 1.55s; }
  .receipt-foot { opacity: 0; transition: opacity 0.5s 1.9s; } .receipt-wrap.in .receipt .receipt-foot { opacity: 1; }

  /* the levels are stamped down one after another */
  .ladder li { opacity: 0; scale: 2; transition: opacity 0.2s, scale 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
  .ladder.in li { opacity: 1; scale: 1; }
  .ladder.in li:nth-child(1) { transition-delay: 0.2s; } .ladder.in li:nth-child(2) { transition-delay: 0.6s; } .ladder.in li:nth-child(3) { transition-delay: 1s; } .ladder.in li:nth-child(4) { transition-delay: 1.4s; }
  .ladder.in li:last-child { animation: glow 2.6s 2.2s ease-in-out infinite; }
  @keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(255, 194, 74, 0.0), 0 0 34px rgba(255, 194, 74, 0.55); } }

  /* the example phone plays out: the search is typed, results slide in, someone taps True, the count goes up */
  .mock-search { display: flex; align-items: center; }
  .typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid transparent; }
  .map.in .typed { animation: typing 1.3s 0.5s steps(14, end) forwards, caret 0.6s 0.5s step-end 3; }
  @keyframes typing { to { width: 14ch; } } @keyframes caret { 50% { border-right-color: #14181f; } }
  .mock-card { opacity: 0; translate: 0 22px; }
  .map.in .mock-card { animation: rise 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; }
  .map.in .mock-card:nth-of-type(1) { animation-delay: 1.9s; } .map.in .mock-card:nth-of-type(2) { animation-delay: 2.3s; }
  @keyframes rise { to { opacity: 1; translate: 0 0; } }
  .mock-vote i.on { background: #fff; border-color: #d3d9e0; color: #14181f; }
  .map.in .mock-vote i.on { animation: tap 7s 3.6s infinite; }
  @keyframes tap { 0%, 4% { background: #fff; border-color: #d3d9e0; color: #14181f; scale: 1; } 7% { scale: 0.86; } 10%, 92% { background: #0f8a5f; border-color: #0f8a5f; color: #fff; scale: 1; } 98%, 100% { background: #fff; border-color: #d3d9e0; color: #14181f; scale: 1; } }
  .cnt { position: relative; display: inline-block; }
  .cnt em { font-style: normal; font-weight: inherit; }
  .cnt .n4 { position: absolute; left: 0; top: 0; }
  .n4 { opacity: 0; } .map.in .n3 { animation: n3 7s 3.6s infinite; } .map.in .n4 { animation: n4 7s 3.6s infinite; }
  @keyframes n3 { 0%, 8% { opacity: 1; } 10%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } } @keyframes n4 { 0%, 8% { opacity: 0; } 10%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
  /* pins: they drop in, and the grey one turns green when someone confirms */
  .pin.p3.off { animation: drop 3.5s ease-in-out infinite, turn-on 8s 3s infinite; }
  @keyframes turn-on { 0%, 8% { background: #98a2b3; box-shadow: none; } 14%, 70% { background: #0f8a5f; box-shadow: 0 6px 14px rgba(15, 138, 95, 0.45), 0 0 0 10px rgba(15, 138, 95, 0.18); } 80%, 100% { background: #98a2b3; box-shadow: none; } }

  /* the celebration pops, rings pulse, neighbours arrive one by one */
  .community-art .hurray-badge { scale: 0.2; opacity: 0; }
  .community-art.in .hurray-badge { animation: badge-in 0.8s 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) forwards, ring 2.4s 1.5s ease-out infinite; }
  @keyframes badge-in { to { scale: 1; opacity: 1; } } @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(15, 138, 95, 0.45); } 100% { box-shadow: 0 0 0 22px rgba(15, 138, 95, 0); } }
  .community-art .hurray-card h3, .community-art .hurray-card p, .community-art .hurray-line { opacity: 0; translate: 0 10px; }
  .community-art.in .hurray-card h3 { animation: rise 0.5s 1s forwards; } .community-art.in .hurray-card p { animation: rise 0.5s 1.2s forwards; } .community-art.in .hurray-line { animation: rise 0.5s 1.5s forwards; }
  .community-art .avatars i { opacity: 0; translate: 0 18px; scale: 0.6; }
  .community-art.in .avatars i { animation: avatar-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
  .community-art.in .avatars i:nth-child(1) { animation-delay: 1.7s; } .community-art.in .avatars i:nth-child(2) { animation-delay: 1.85s; } .community-art.in .avatars i:nth-child(3) { animation-delay: 2s; } .community-art.in .avatars i:nth-child(4) { animation-delay: 2.15s; } .community-art.in .avatars i:nth-child(5) { animation-delay: 2.3s; }
  @keyframes avatar-in { to { opacity: 1; translate: 0 0; scale: 1; } }
  .community-art::before { animation: drift 14s linear infinite; }
  @keyframes drift { to { background-position: 260px 260px; } }

  /* handwritten notes appear as if written */
  .chapter-text .aside { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s 0.9s ease-out; }
  .chapter-text.in .aside { clip-path: inset(0 -4px 0 0); }
  /* the taped photos settle into place */
  .chapter-art.reveal { rotate: 0deg; transition: opacity 0.7s ease, transform 0.7s ease, rotate 0.9s cubic-bezier(0.2, 1.3, 0.4, 1); }
  .chapter:nth-of-type(odd) .chapter-art.reveal.in { rotate: -1.1deg; } .chapter:nth-of-type(even) .chapter-art.reveal.in { rotate: 0.9deg; }
}

/* =====================================================================================
   Animated story scenes. They start when you scroll to them (the .in class) and stop for
   people who ask for reduced motion. Tapping a scene makes it honk or buzz.
   ===================================================================================== */
.scene { overflow: hidden; background: #2a1a33; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .time-pill { z-index: 5; }
.tap-hint { position: absolute; z-index: 5; right: 12px; bottom: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #14181f; font: 800 11.5px/1.5 var(--font); letter-spacing: 0.04em; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); pointer-events: none; }
.scene.tapped .tap-hint { opacity: 0; transition: opacity 0.3s; }
.card-dots { display: none; }
.honk, .think { opacity: 0; }
.scene-svg * { transform-box: fill-box; }

@media (prefers-reduced-motion: no-preference) {
  .scene.in .veh, .scene.in .attendant, .scene.in .sign, .scene.in .driver, .scene.in .ppl { transform-origin: 50% 100%; }

  /* ---- scene 1: the fuel queue ---- */
  /* the queue creeps forward a little, stops, creeps again; each vehicle on its own rhythm */
  .scene.in .veh { animation: creep 7s ease-in-out infinite; }
  .scene.in .v2 { animation-duration: 7.6s; animation-delay: -1.3s; } .scene.in .v3 { animation-duration: 6.4s; animation-delay: -2.4s; } .scene.in .v4 { animation-duration: 8.2s; animation-delay: -0.6s; }
  @keyframes creep { 0%, 12% { translate: 0 0; } 34%, 48% { translate: 16px 0; } 52%, 60% { translate: 16px 0; } 82%, 100% { translate: 0 0; } }
  .scene.in .veh::after { content: none; }
  .scene.in .wheel { transform-origin: center; animation: spin 1.3s linear infinite; }
  .scene.in .veh { transform-box: fill-box; }
  /* engines idling: a gentle shudder */
  .scene.in .v1 > *:not(.puff):not(.brake), .scene.in .v2 > *:not(.puff):not(.brake), .scene.in .v3 > *:not(.puff):not(.brake), .scene.in .v4 > *:not(.puff):not(.brake) { animation: idle 0.32s ease-in-out infinite; }
  .scene.in .v2 > *:not(.puff):not(.brake) { animation-delay: -0.1s; } .scene.in .v3 > *:not(.puff):not(.brake) { animation-delay: -0.2s; }
  @keyframes idle { 50% { translate: 0 -1.2px; } }
  /* exhaust puffs rise and fade */
  .puff { opacity: 0; }
  .scene.in .puff { animation: puff 1.9s ease-out infinite; animation-delay: var(--d); }
  @keyframes puff { 0% { opacity: 0.7; translate: 0 0; scale: 0.5; } 100% { opacity: 0; translate: -26px -34px; scale: 2.4; } }
  /* the pumps: the display flickers, the hose sways */
  .scene.in .pump-screen { animation: flicker 2.2s steps(1) infinite; }
  @keyframes flicker { 0%, 48%, 52%, 100% { opacity: 0.9; } 50% { opacity: 0.1; } 80% { opacity: 0.5; } }
  .scene.in .hose { transform-origin: 0 0; animation: sway 3.2s ease-in-out infinite; }
  @keyframes sway { 50% { rotate: 6deg; } }
  /* the sign swings and its lamp flashes */
  .scene.in .sign { transform-origin: 50% 0; animation: swing 2.8s ease-in-out infinite; }
  @keyframes swing { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
  .scene.in .lamp { animation: blink 0.9s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0.15; } }
  /* the attendant waves both arms: no fuel! */
  .scene.in .attendant { animation: bob 0.9s ease-in-out infinite; }
  @keyframes bob { 50% { translate: 0 -3px; } }
  .arm-l, .arm-r { transform-origin: 50% 8%; }
  .scene.in .arm-l { animation: wave-l 0.7s ease-in-out infinite; } .scene.in .arm-r { animation: wave-r 0.7s ease-in-out infinite; }
  @keyframes wave-l { 0%, 100% { rotate: 150deg; } 50% { rotate: 205deg; } } @keyframes wave-r { 0%, 100% { rotate: -150deg; } 50% { rotate: -205deg; } }
  /* the driver sags and checks the empty can */
  .scene.in .driver { animation: sag 3.4s ease-in-out infinite; } @keyframes sag { 50% { rotate: 4deg; translate: 0 2px; } }
  .scene.in .jerry { animation: swing-can 3.4s ease-in-out infinite; transform-origin: 50% 0; } @keyframes swing-can { 50% { rotate: 9deg; } }
  /* the sun sinks very slowly, the birds cross */
  .scene.in .sun { animation: sink 18s ease-in-out infinite alternate; } @keyframes sink { to { translate: -6px 26px; } }
  .scene.in .bird { animation: fly 12s linear infinite; animation-delay: var(--d); } @keyframes fly { from { translate: -60px 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { translate: 280px -26px; opacity: 0; } }
  /* the honking: a speech bubble pops over a vehicle, sound waves flick, and it shakes */
  .scene.in .honk .honk-pop { transform-origin: 0 0; }
  .scene.in .h1 { animation: honk-cycle 9s 1.2s infinite; } .scene.in .h2 { animation: honk-cycle 9s 4.4s infinite; } .scene.in .h3 { animation: honk-cycle 9s 7.1s infinite; }
  @keyframes honk-cycle { 0% { opacity: 0; scale: 0.3; } 2% { opacity: 1; scale: 1.18; } 4% { scale: 1; } 12% { scale: 1.08; } 15%, 17% { opacity: 1; scale: 1; } 20%, 100% { opacity: 0; scale: 0.6; } }
  .scene.in .wave { animation: wave-flick 0.28s steps(1) infinite; } .scene.in .w2 { animation-delay: 0.14s; }
  @keyframes wave-flick { 50% { opacity: 0; } }
  .scene.in.honking .honk { animation: honk-now 1.4s ease-out 1 !important; }
  @keyframes honk-now { 0% { opacity: 0; scale: 0.3; } 8% { opacity: 1; scale: 1.2; } 16% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
  .scene.honking .veh { animation: shake 0.1s linear 10 !important; }
  @keyframes shake { 25% { translate: 3px 0; } 75% { translate: -3px 0; } }

  /* ---- scene 2: the ATM ---- */
  .scene.in .atm-screen { animation: screen-flash 1.4s steps(1) infinite; }
  @keyframes screen-flash { 0%, 100% { fill: #2a1216; } 50% { fill: #6b1a1a; } }
  .scene.in .atm-text { animation: text-blink 1.4s steps(1) infinite; } @keyframes text-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  .scene.in .atm-arrow { animation: arrow-bounce 0.9s ease-in-out infinite; } @keyframes arrow-bounce { 50% { translate: 0 4px; } }
  .scene.in .slot { animation: slot-glow 2.4s ease-in-out infinite; } @keyframes slot-glow { 50% { fill: #3a4650; } }
  .scene.in .glow { transform-origin: center; animation: glow-pulse 3s ease-in-out infinite; } @keyframes glow-pulse { 50% { scale: 1.12; opacity: 0.75; } }
  .scene.in .star { animation: twinkle 3s ease-in-out infinite; animation-delay: var(--d); } @keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
  /* people fidget in the queue */
  .scene.in .ppl { animation: fidget 2.6s ease-in-out infinite; } .scene.in .p2 { animation-delay: -0.9s; animation-duration: 3.1s; }
  @keyframes fidget { 0%, 100% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -3px; rotate: 1.5deg; } 60% { translate: 2px 0; rotate: -1.5deg; } }
  /* one person loses patience and walks off; another takes the place */
  .scene.in .leaves { animation: leave 12s ease-in-out infinite; }
  @keyframes leave { 0%, 28% { translate: 0 0; opacity: 1; } 46% { translate: -120px 0; opacity: 1; } 52%, 100% { translate: -150px 0; opacity: 0; } }
  .scene.in .joins { animation: join 12s ease-in-out infinite; }
  @keyframes join { 0%, 52% { translate: -180px 0; opacity: 0; } 56% { opacity: 1; } 78%, 100% { translate: 0 0; opacity: 1; } }
  .joins { opacity: 0; }
  /* a thought bubble pops up every few seconds */
  .scene.in .think { animation: think 6s 1s infinite; transform-origin: 20% 90%; }
  @keyframes think { 0%, 100% { opacity: 0; scale: 0.2; } 6% { opacity: 1; scale: 1.15; } 10%, 40% { opacity: 1; scale: 1; } 48% { opacity: 0; scale: 0.6; } }
  /* a danfo goes by behind them */
  .scene.in .passbus { animation: pass 15s linear infinite; } @keyframes pass { from { translate: -240px 0; } to { translate: 1500px 0; } }
  .scene.honking .atm-screen { animation: screen-flash 0.18s steps(1) 6 !important; }
  .scene.honking .think { animation: think 2.4s 1 !important; }

  /* ---- phone hero: the status cards slide by themselves, with dots ---- */
  .card-dots i { transition: width 0.3s, background 0.3s; }
}
@media (max-width: 960px) {
  .card-dots { display: flex; justify-content: center; gap: 7px; position: relative; z-index: 2; margin: -4px 0 0; }
  .card-dots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.35); }
  .card-dots i.on { width: 22px; background: var(--amber); }
  .float-cards { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) { .veh, .attendant, .scene .honk { animation: none; } .scene .honk { opacity: 0; } }

/* ---- the page must never be wider than the screen ---- */
html, body.show-home { overflow-x: clip; }
.home { overflow-x: clip; max-width: 100vw; }
.home-nav { max-width: 100vw; box-sizing: border-box; }
.home-nav-actions { min-width: 0; flex-shrink: 1; }
.home-nav .btn { white-space: nowrap; }
@media (max-width: 430px) {
  .home-brand span { display: none; }            /* the pin is enough; the name is right under it in the hero */
  .home-nav { gap: 8px; }
  .home-nav-actions { margin-left: auto; gap: 6px; }
  .home-nav .btn { min-height: 40px; padding: 0 11px; font-size: 13.5px; }
}
@media (max-width: 350px) {
  .home-nav .btn { padding: 0 8px; font-size: 12.5px; }
  .home-nav .lang-pill svg { display: none; }
}

/* ---- keep it fast: no blur layers over moving pictures, and nothing animates when it cannot be seen ---- */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.btn.glass { background: rgba(255, 255, 255, 0.2); }
.eyebrow { background: rgba(8, 40, 30, 0.55); }
.home-nav.solid { background: rgba(5, 40, 30, 0.97); }

/* ---- scene 3: Monday go-slow ---- */
@media (prefers-reduced-motion: no-preference) {
  .scene.in .brake { animation: blink 1.1s steps(1) infinite; }
  .scene.in .veh:nth-child(odd) .brake { animation-delay: -0.4s; }
  .scene.in .okada { animation: ride 11s linear infinite; }
  @keyframes ride { from { translate: -140px 0; } to { translate: 980px 0; } }
  .scene.in .wobble { animation: wob 0.5s ease-in-out infinite; } @keyframes wob { 50% { translate: 0 -3px; rotate: -3deg; } }
  .scene.in .tl-red { animation: tl-pulse 1.8s ease-in-out infinite; } @keyframes tl-pulse { 50% { opacity: 0.35; } }
  .scene.in .tline { animation: tline 2.6s ease-in-out infinite; } @keyframes tline { 50% { opacity: 0.45; } }
}
.home-privacy { margin: 8px 0 0; font-size: 13px; } .home-privacy a { color: inherit; opacity: 0.8; }