/* odot — the website, dressed exactly like the app: its palette, its pixel fonts, its chunky keys. */

@font-face {
  font-family: "odot-latin";
  src: url("../fonts/odot-latin.woff?v=335ec2c02d") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "odot-ja";
  src: url("../fonts/odot-ja.woff?v=4974cf7b23") format("woff");
  font-display: swap;
}

:root {
  /* The app's interface palette (Palette.swift) */
  --ink: #07040c;
  --ui0: #120c1e; --ui1: #1e1630; --ui2: #2d2245; --ui3: #3f3160;
  --ui4: #5a4780; --ui5: #8066a8; --ui6: #b79ccc; --ui7: #ece0f0;
  --white: #fff8ec;
  --amber0: #3a1a14; --amber1: #7a3a1e; --amber2: #d9822e; --amber3: #ffb84d; --amber4: #ffe6a0;
  --gold2: #f0b432; --gold3: #ffe27a;
  --pink0: #3f1438; --pink1: #8a2a60; --pink2: #e0508a; --pink3: #ff8ab0;
  --green2: #3cbf6a; --blue2: #4f7fe0;
  --sunset1: #3b2a6b; --sunset2: #8a3f7a; --sunset3: #e8765a;

  --p: 3px;                         /* one "pixel" of interface chrome */
  --font: "odot-latin", "odot-ja", ui-monospace, monospace;
  --text: 24px;                     /* fonts are 12 px designs: only whole multiples stay crisp */
  --h2: 48px;
  --h1: 48px;
  --max: 1120px;
  color-scheme: dark;
}
@media (max-width: 720px) {
  :root { --h2: 36px; --h1: 36px; --p: 2px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ui0);
  color: var(--ui7);
  font-family: var(--font);
  font-size: var(--text);
  line-height: 36px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
  /* Lines break only between phrases (the build marks them with <wbr>) or between words. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
/* Sentences and clauses (marked by the build) move to the next line whole rather than splitting. */
.s, .c { display: inline-block; }
p, li, .answer, .lead { text-wrap: pretty; }
h1, h2, h3, summary, figcaption, .tip, .eyebrow { text-wrap: balance; }
img, video { display: block; max-width: 100%; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--amber3); text-decoration: none; }
a:hover { color: var(--amber4); }
:focus-visible { outline: var(--p) solid var(--amber3); outline-offset: var(--p); }
::selection { background: var(--pink2); color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* A faint ordered dither, like the app's night skies, with a few stars blinking in it */
.dither {
  background-image:
    radial-gradient(var(--ui1) 1px, transparent 1.2px);
  background-size: 6px 6px;
  overflow: hidden;
}
.dither::before, .dither::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 3px; pointer-events: none;
  color: var(--ui5);
  box-shadow:
    7vw 9vh, 18vw 31vh var(--ui6), 31vw 6vh, 44vw 22vh var(--ui4), 57vw 12vh, 69vw 37vh var(--ui6),
    81vw 8vh, 93vw 27vh var(--ui4), 12vw 61vh var(--ui4), 26vw 78vh, 49vw 66vh var(--ui6), 63vw 84vh,
    77vw 58vh var(--ui4), 88vw 72vh, 96vw 90vh var(--ui6), 4vw 92vh;
  animation: twinkle 4.2s steps(1) infinite;
}
.dither::after { translate: 3vw 40vh; animation-delay: 2.1s; opacity: .7; }
@keyframes twinkle { 0%, 45% { opacity: .9; } 46%, 70% { opacity: .25; } 71%, 100% { opacity: .65; } }
.dither > * { position: relative; z-index: 1; }

.wrap { width: min(var(--max), 100% - 32px); margin-inline: auto; }

/* ---------- Pixel shapes ---------- */

/* Rectangles with their corner pixel cut off — the app's universal shape. */
.px-round {
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--p)),
                     calc(100% - var(--p)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--p));
}
.drop { filter: drop-shadow(0 var(--p) 0 var(--ink)); }

.panel {
  background: var(--ui1);
  box-shadow: inset 0 0 0 var(--p) var(--ui3);
  padding: calc(var(--p) * 8);
}

/* Chunky keys, built like Widgets.key: edge, side, top, highlight */
.key {
  --edge: var(--amber0); --side: var(--amber1); --top: var(--amber2); --hi: var(--amber3);
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px 12px;
  margin-bottom: calc(var(--p) * 2);
  color: var(--white);
  background: var(--top);
  box-shadow:
    inset 0 var(--p) 0 var(--hi),
    inset var(--p) 0 0 var(--hi),
    inset 0 0 0 var(--p) var(--edge),
    0 calc(var(--p) * 2) 0 var(--side),
    0 calc(var(--p) * 3) 0 var(--edge);
  text-shadow: 0 var(--p) 0 var(--edge);
  cursor: pointer;
  border: 0;
  font: inherit;
  transition: transform 60ms steps(1), box-shadow 60ms steps(1);
}
.key:hover { color: var(--white); filter: brightness(1.08); }
.key:active { transform: translateY(calc(var(--p) * 2)); box-shadow: inset 0 0 0 var(--p) var(--edge), 0 var(--p) 0 var(--edge); }
.key.plum { --edge: var(--ui0); --side: var(--ui2); --top: var(--ui3); --hi: var(--ui4); }
.key.green { --edge: #10322c; --side: #1f6e4e; --top: var(--green2); --hi: #8ff08a; }

/* App Store button (placeholder until the listing is live) */
.store {
  --edge: var(--ink); --side: var(--ui2); --top: var(--ui0); --hi: var(--ui3);
  padding: 10px 22px 10px 16px;
  line-height: 24px;
  text-align: left;
}
.store .store-icon { width: 36px; height: 36px; flex: none; }
.store small { display: block; font-size: 12px; line-height: 12px; color: var(--ui6); margin-bottom: 6px; }
.store b { display: block; font-weight: normal; font-size: 24px; line-height: 24px; }
.store.big { padding: 14px 30px 14px 22px; }
.store.big .store-icon { width: 48px; height: 48px; }
.store.big b { font-size: 36px; line-height: 36px; }
.store.big small { font-size: 24px; line-height: 24px; }
@media (max-width: 720px) {
  .store.big b { font-size: 24px; line-height: 24px; }
  .store.big small { font-size: 12px; line-height: 12px; }
  .store.big .store-icon { width: 36px; height: 36px; }
}

/* ---------- Navigation ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background 200ms steps(4);
}
.nav.solid { background: color-mix(in srgb, var(--ui0) 92%, transparent); box-shadow: 0 var(--p) 0 var(--ink); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
.brand span { font-size: 36px; line-height: 36px; letter-spacing: 1px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ui7); }
.nav-links a:hover { color: var(--amber3); }
.lang { display: flex; gap: 6px; }
.lang a { padding: 0 6px; color: var(--ui5); }
.lang a[aria-current="true"] { color: var(--white); box-shadow: inset 0 calc(var(--p) * -1) 0 var(--amber2); }
.nav .store { margin-bottom: calc(var(--p) * 3); }
@media (max-width: 960px) { .nav-links .section-link { display: none; } }
@media (max-width: 720px) {
  .nav .wrap { height: 60px; gap: 12px; }
  .nav .store { display: none; }
  .brand span { font-size: 24px; line-height: 24px; }
  .brand img { width: 32px; height: 32px; border-radius: 7px; }
}

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

.hero {
  --sky: #282871;                   /* the top row of the loop's sky, carried on above it */
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; place-items: start center;
  overflow: hidden; background: var(--sky);
  isolation: isolate;
  padding: 0;
}
/* The loop sits on the bottom edge at its own shape, so the road and the car are never cropped. */
.hero-media { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 400 / 225; z-index: -2; }
@media (max-aspect-ratio: 4/5) { .hero-media { aspect-ratio: 240 / 360; } }
/* If a cut ever has to be cropped, keep the road and the front of the car (it faces right) in frame. */
.hero-media video, .hero-media .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 92% 100%; }
.hero-media::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 14%; background: linear-gradient(var(--sky), rgba(40, 40, 113, 0)); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(18,12,30,.55) 0%, rgba(18,12,30,.12) 34%, rgba(18,12,30,0) 52%),
    linear-gradient(to top, rgba(18,12,30,.85) 0%, rgba(18,12,30,0) 16%);
}

.hero-inner {
  text-align: center; padding: clamp(84px, 13vh, 150px) 16px 0;
  display: flex; flex-direction: column; align-items: center;
}
.logo-anim {
  width: calc(148px * var(--s)); height: calc(84px * var(--s));
  --s: 2;
  background: url("../sprites/logo.png?v=2228d03fcc") 0 0 / calc(148px * 44 * var(--s)) calc(84px * var(--s)) no-repeat;
  image-rendering: pixelated;
  animation: logo-roll 3.706s steps(44) infinite;
  filter: drop-shadow(0 calc(var(--s) * 1px) 0 rgba(7,4,12,.4));
}
@keyframes logo-roll { to { background-position-x: calc(-148px * 44 * var(--s)); } }
@media (min-width: 1100px) and (min-aspect-ratio: 6/5) and (min-height: 820px) { .hero .logo-anim, .finale .logo-anim { --s: 3; } }
.hero h1 {
  margin: 12px 0 12px;
  font-weight: normal;
  font-size: var(--h1); line-height: calc(var(--h1) * 1.5);
  color: var(--white);
  text-shadow: var(--p) var(--p) 0 var(--ui0);
}
.hero h1 span { display: block; }
.hero .lead { max-width: 30em; margin: 0 0 30px; color: var(--ui7); text-shadow: 2px 2px 0 var(--ui0); }
.hero-cta { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: center; }
.ghost { color: var(--white); text-shadow: 2px 2px 0 var(--ui0); }
.ghost::after { content: " ↓"; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  display: grid; gap: 2px; justify-items: center;
}
.scroll-hint i {
  width: 18px; height: 9px; display: block;
  background: linear-gradient(135deg, transparent 50%, currentColor 50%) left / 50% 100% no-repeat,
              linear-gradient(225deg, transparent 50%, currentColor 50%) right / 50% 100% no-repeat;
  color: var(--amber3);
  animation: chevron 1.2s steps(1) infinite;
}
.scroll-hint i:nth-child(2) { animation-delay: .4s; }
@keyframes chevron { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }

/* On wide screens the words take the left, the car drives on the right. */
@media (min-width: 1100px) and (min-aspect-ratio: 6/5) {
  .hero { place-items: center start; }
  .hero-inner {
    text-align: left; align-items: flex-start;
    padding: 84px 0 10vh max(32px, calc((100vw - var(--max)) / 2));
    max-width: calc(50vw - 24px);
  }
  .hero .lead { max-width: 19em; }
  .hero-cta { justify-content: flex-start; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(18,12,30,.62) 0%, rgba(18,12,30,.25) 40%, rgba(18,12,30,0) 56%),
      linear-gradient(to top, rgba(18,12,30,.85) 0%, rgba(18,12,30,0) 16%);
  }
}
/* Load-in: the hero copy rises like the app's banners drop */
.rise { opacity: 0; translate: 0 18px; animation: rise 900ms cubic-bezier(.2,.8,.2,1) forwards; }
.rise.d1 { animation-delay: 150ms; } .rise.d2 { animation-delay: 450ms; } .rise.d3 { animation-delay: 750ms; } .rise.d4 { animation-delay: 1050ms; }
@keyframes rise { to { opacity: 1; translate: 0 0; } }

/* ---------- Sections ---------- */

section { position: relative; padding: 132px 0; }
@media (max-width: 720px) { section { padding: 84px 0; } }
.eyebrow { display: inline-flex; gap: 12px; align-items: center; color: var(--amber3); margin: 0 0 12px; }
.eyebrow img { width: 24px; height: 24px; }
h2 {
  margin: 0 0 24px; font-weight: normal;
  font-size: var(--h2); line-height: calc(var(--h2) * 1.5);
  color: var(--white);
  text-shadow: var(--p) var(--p) 0 var(--ink);
}
h2 span { display: block; }
h3 { margin: 0 0 12px; font-weight: normal; font-size: 24px; line-height: 36px; color: var(--white); }
p { margin: 0 0 24px; }
.muted { color: var(--ui6); }
.small { font-size: 12px; line-height: 24px; }
@media (min-width: 721px) { .small { font-size: 24px; line-height: 36px; } }

/* Sections fade up as they arrive */
.reveal { opacity: 0; translate: 0 24px; transition: opacity 700ms ease, translate 700ms cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; translate: 0 0; }
.reveal.d1 { transition-delay: 100ms; } .reveal.d2 { transition-delay: 200ms; } .reveal.d3 { transition-delay: 300ms; }
.reveal.d4 { transition-delay: 400ms; } .reveal.d5 { transition-delay: 500ms; }

/* A strip of road between sections, dashes rolling by */
.road {
  height: 33px;
  background:
    linear-gradient(var(--ui2), var(--ui2)) 0 0 / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--amber2) 0 48px, transparent 48px 84px) 0 15px / 100% 3px no-repeat,
    linear-gradient(var(--ui2), var(--ui2)) 0 30px / 100% 3px no-repeat,
    #2c2839;
  animation: road 1.4s linear infinite;
}
@keyframes road { to { background-position: 0 0, -84px 15px, 0 30px, 0 0; } }

/* ---------- Split layout with a phone ---------- */

.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 900px) { .split, .split.flip { grid-template-columns: 1fr; gap: 48px; } .split.flip > :first-child { order: 0; } }

/* An iPhone 16 Pro, drawn in its own points (screen 402 × 874): --u is one point at the current size,
   so the frame and the Dynamic Island (125 × 37, 11 pt from the top) keep their proportions at every width.
   No status bar: odot hides it while it runs. */
.phone {
  --sw: 402px;
  --u: calc(var(--sw) / 402);
  position: relative;
  width: calc(var(--sw) + 36 * var(--u));
  margin-inline: auto;
  padding: calc(18 * var(--u));
  border-radius: calc(80 * var(--u));
  background: linear-gradient(90deg, #25252b, #77777f 18%, #3a3a41 50%, #8a8a92 82%, #25252b);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.12);
}
.phone::before { /* black glass */
  content: ""; position: absolute; inset: calc(5 * var(--u)); border-radius: calc(75 * var(--u)); background: #060608;
}
.phone .btn { /* action button and volume keys on the left, side button on the right */
  position: absolute; width: calc(3 * var(--u)); border-radius: calc(2 * var(--u));
  background: linear-gradient(90deg, #5a5a62, #8a8a92 60%, #3a3a41);
}
.phone .act { left: calc(-2.5 * var(--u)); top: 17.6%; height: 3.6%; }
.phone .vup { left: calc(-2.5 * var(--u)); top: 24.4%; height: 7%; }
.phone .vdn { left: calc(-2.5 * var(--u)); top: 32.8%; height: 7%; }
.phone .pwr { right: calc(-2.5 * var(--u)); top: 26%; height: 10.8%; background: linear-gradient(90deg, #3a3a41, #8a8a92 40%, #5a5a62); }
.phone .screen {
  position: relative; width: var(--sw); aspect-ratio: 402 / 874;
  border-radius: calc(62 * var(--u)); overflow: hidden; background: var(--ui0);
}
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone .island {
  position: absolute; z-index: 3; top: calc(11 * var(--u)); left: 50%; translate: -50% 0;
  width: calc(125 * var(--u)); height: calc(37 * var(--u)); border-radius: 999px; background: #000;
}
@media (max-width: 520px) {
  .phone { --sw: min(268px, 66vw); }
}
/* Screens crossfade, one every three seconds, like the promo video */
.slides img { opacity: 0; animation: slide var(--dur) infinite; animation-delay: calc(var(--i) * var(--step)); }
.slides img:first-child { opacity: 1; }
@keyframes slide {
  0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; }
}

/* ---------- Feature cards ---------- */

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card, .card > .drop, .card .panel { height: 100%; }
.card .icon {
  width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px;
  background: var(--ui2); box-shadow: inset 0 0 0 var(--p) var(--ui3);
}
.card .icon img { width: 33px; height: 33px; }
.card p { margin: 0; color: var(--ui6); }

/* ---------- Places (marquee) ---------- */

.places { overflow: hidden; padding-block: 24px; }
.marquee { display: flex; gap: 24px; width: max-content; animation: marquee 80s linear infinite; }
.places:hover .marquee { animation-play-state: paused; }
@keyframes marquee { to { translate: -50% 0; } }
.place { position: relative; flex: none; margin: 0; }
.place img { width: 640px; height: 296px; }
@media (max-width: 720px) { .place img { width: 320px; height: 148px; } }
.place figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 0 12px;
  background: var(--ui0); color: var(--white); box-shadow: inset 0 0 0 var(--p) var(--ui3);
}

/* ---------- Trophies ---------- */

.tiles {
  --cols: 9; --gap: 12px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); margin-top: 48px;
  grid-auto-flow: dense;
  grid-auto-rows: calc((min(var(--max), 100vw - 32px) - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
@media (max-width: 960px) { .tiles { --cols: 6; } }
@media (max-width: 520px) { .tiles { --cols: 4; --gap: 8px; } .tile.wide-only { display: none; } }
.tile {
  position: relative; min-width: 0; overflow: visible; display: grid; place-items: center;
  background: var(--ui1); box-shadow: inset 0 0 0 var(--p) var(--ui3);
}
.tile.found { background: var(--ui2); box-shadow: inset 0 0 0 var(--p) var(--ui4); }
.tile .num { position: absolute; left: 9px; top: 3px; font-size: 12px; line-height: 24px; color: var(--ui5); }
.tile .q { font-size: 48px; line-height: 48px; color: var(--ui3); }
.sprite { --kk: var(--k); }
@media (max-width: 520px) { .sprite { --kk: var(--km); } }
.sprite {
  width: calc(var(--w) * var(--kk) * 1px); height: calc(var(--h) * var(--kk) * 1px);
  background-image: var(--img);
  background-size: calc(var(--w) * var(--n) * var(--kk) * 1px) 100%;
  image-rendering: pixelated;
  animation: sprite calc(var(--n) / var(--fps) * 1s) steps(var(--n)) infinite;
}
@keyframes sprite { to { background-position-x: calc(var(--w) * var(--n) * var(--kk) * -1px); } }
.tile .stars { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 12px; line-height: 12px; color: var(--gold2); letter-spacing: 2px; }
.tile .tip {
  position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; translate: -50% 4px;
  white-space: nowrap; padding: 0 12px; background: var(--ui0); color: var(--white);
  box-shadow: inset 0 0 0 var(--p) var(--amber2); opacity: 0; pointer-events: none;
  transition: opacity 120ms steps(2), translate 120ms steps(2);
}
.tile:hover .tip, .tile:focus-visible .tip { opacity: 1; translate: -50% 0; }
.badge-new {
  position: absolute; right: 6px; top: 6px; padding: 0 6px; font-size: 12px; line-height: 18px;
  color: var(--white); background: var(--pink2); box-shadow: inset 0 0 0 2px var(--pink3), 0 2px 0 var(--ink);
  animation: blink 1.4s steps(1) infinite;
}
@keyframes blink { 50% { background: var(--pink1); } }

/* ---------- FAQ (support page) ---------- */

.pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pill { padding: 6px 18px; background: var(--ui1); box-shadow: inset 0 0 0 var(--p) var(--green2); color: var(--white); }
.pill::before { content: "◆ "; color: #8ff08a; }

.faq details { margin-bottom: 12px; }
.faq summary {
  list-style: none; cursor: pointer; padding: 12px 54px 12px 24px; position: relative;
  background: var(--ui1); box-shadow: inset 0 0 0 var(--p) var(--ui3); color: var(--white);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 12px; color: var(--amber3); }
.faq details[open] summary::after { content: "-"; }
.faq details[open] summary { box-shadow: inset 0 0 0 var(--p) var(--amber2); }
.faq .answer { padding: 18px 24px 6px; color: var(--ui6); }

/* ---------- Closing call to action ---------- */

.finale { text-align: center; overflow: hidden; padding-bottom: 0; background: linear-gradient(var(--ui0), var(--sunset1) 70%, var(--sunset2)); }
.finale .logo-anim { margin: 0 auto 12px; }
.finale h2 span { display: block; }
.drive-scene { position: relative; height: 252px; margin-top: 72px; }
.drive-scene .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background:
  repeating-linear-gradient(90deg, var(--amber2) 0 72px, transparent 72px 132px) 0 42px / 100% 6px repeat-x,
  linear-gradient(#423d56, #2c2839);
  animation: ground 1s linear infinite; }
@keyframes ground { to { background-position: -132px 42px, 0 0; } }
.drive-scene .car {
  position: absolute; left: 50%; bottom: 60px; translate: -50% 0;
  width: calc(178px * 2); height: calc(76px * 2);
  background: url("../sprites/car.png?v=f65ab2120a") 0 0 / calc(178px * 8 * 2) calc(76px * 2);
  image-rendering: pixelated;
  animation: wheels .6s steps(8) infinite, bob 2.1s steps(2) infinite;
}
@keyframes wheels { to { background-position-x: calc(-178px * 8 * 2); } }
@keyframes bob { 50% { translate: -50% -2px; } }

/* ---------- Footer ---------- */

footer { background: var(--ink); padding: 48px 0 60px; color: var(--ui5); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--ui6); }

/* Sticky download key on phones, once the hero has gone by */
.sticky-cta {
  position: fixed; left: 50%; bottom: 12px; z-index: 60; translate: -50% 140%;
  transition: translate 260ms cubic-bezier(.2,.8,.2,1);
}
.sticky-cta.show { translate: -50% 0; }
@media (min-width: 721px) { .sticky-cta { display: none; } }

/* "Coming soon" banner, the app's heads-up banner */
.herald {
  position: fixed; left: 50%; top: 84px; z-index: 80; translate: -50% calc(-100% - 100px);
  display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 9px;
  background: var(--ui1); box-shadow: inset 0 0 0 var(--p) var(--amber2), 0 var(--p) 0 var(--ink);
  color: var(--white); transition: translate 300ms cubic-bezier(.2,.8,.2,1);
}
.herald.show { translate: -50% 0; }
.herald .lamp { width: 30px; height: 30px; display: grid; place-items: center; background: var(--amber3); color: var(--ui0); animation: blink-lamp .5s steps(1) infinite; }
@keyframes blink-lamp { 50% { background: var(--amber1); color: var(--amber3); } }

/* ---------- Text pages (privacy, support) ---------- */

.doc { padding: 144px 0 96px; }
.doc .wrap { max-width: 860px; }
.doc h1 { font-weight: normal; font-size: var(--h2); line-height: calc(var(--h2) * 1.5); color: var(--white); margin: 0 0 12px; text-shadow: var(--p) var(--p) 0 var(--ink); }
.doc h2 { font-size: 36px; line-height: 54px; margin-top: 60px; }
@media (max-width: 720px) { .doc h2 { font-size: 24px; line-height: 36px; } }
.doc ul { padding-left: 1.2em; margin: 0 0 24px; }
.doc li { margin-bottom: 6px; }
.doc .panel { margin: 24px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rise, .reveal { opacity: 1; translate: 0 0; }
  .slides img { opacity: 0; } .slides img:first-child { opacity: 1; }
}