:root {
  --bg: #0B1020;
  --hull: #1B2A4A;
  --text: #DFF6FF;
  --body: #B9CBE6;
  --muted: #8FA6CF;
  --accent: #3FE0D0;
  --pixel: "Silkscreen", monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); }
a { color: var(--muted); }
a:hover { color: var(--accent); }
img { max-width: 100%; }

/* Touch devices get the store badges, not the demo. */
.phone-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .desktop-only { display: none !important; }
  .phone-only { display: flex; }
}

.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.badge { display: inline-flex; align-items: center; min-height: 48px; }
.badge img { display: block; width: 144px; height: 48px; }
/* The Google badge PNG has transparent padding around the badge. */
.badge-play { margin: -12px 0; }
.badge-play img { width: 186px; height: 72px; }

.btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px;
  border: 2px solid var(--accent); color: var(--accent); text-decoration: none;
  font-family: var(--pixel); font-size: 15px; letter-spacing: 1px;
}
.btn:hover { background: var(--accent); color: var(--bg); }

.logo {
  display: inline-flex; align-items: center; min-height: 44px; align-self: center;
  font-family: var(--pixel); font-size: 24px; letter-spacing: 2px;
  color: var(--accent); text-decoration: none;
}

.foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px;
  font-size: 14px; color: var(--muted);
}
.foot > * { min-height: 44px; display: inline-flex; align-items: center; }

/* Home */
.home {
  max-width: 960px; margin: 0 auto; padding: 96px var(--gutter) 64px;
  display: flex; flex-direction: column; align-items: center; gap: 72px;
}
.hero { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.logo-big {
  margin: 0; font-family: var(--pixel); font-weight: 400;
  font-size: clamp(56px, 12vw, 112px); line-height: 0.9; letter-spacing: 2px; color: var(--accent);
}
.tagline { margin: 0; font-family: var(--pixel); font-size: 18px; letter-spacing: 3px; }
.modes { margin: -8px 0 0; font-family: var(--pixel); font-size: 13px; letter-spacing: 2px; color: var(--muted); }
.hero .actions { padding-top: 12px; }
.shots { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.shots img { flex: 1 1 140px; max-width: 180px; min-width: 0; height: auto; image-rendering: pixelated; }

/* Privacy and other text pages */
.doc {
  max-width: 640px; margin: 0 auto; padding: 48px var(--gutter) 64px;
  display: flex; flex-direction: column; gap: 18px;
  font-size: 17px; line-height: 1.7; color: var(--body);
}
.doc .logo { align-self: flex-start; }
.doc h1 { margin: 40px 0 0; font-family: var(--pixel); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--text); text-transform: uppercase; }
.doc h2 { margin: 24px 0 0; font-family: var(--pixel); font-weight: 400; font-size: 16px; letter-spacing: 1px; color: var(--text); text-transform: uppercase; }
.doc p, .doc ul { margin: 0; }
.doc .date { font-size: 15px; color: var(--muted); }
.doc .foot { margin-top: 48px; justify-content: flex-start; }

/* Demo */
.play {
  max-width: 960px; margin: 0 auto; padding: 48px var(--gutter) 64px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.frame { position: relative; width: 324px; height: 580px; border: 2px solid var(--hull); }
.frame img, .frame iframe { display: block; width: 320px; height: 576px; border: 0; image-rendering: pixelated; }
.overlay {
  position: absolute; inset: 0; background: rgba(4, 4, 6, 0.72);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--pixel); font-size: 11px; letter-spacing: 2px; color: var(--muted);
}
.overlay button {
  min-height: 52px; padding: 0 24px; border: 2px solid var(--accent); background: var(--bg); color: var(--accent);
  font-family: var(--pixel); font-size: 16px; letter-spacing: 1px; cursor: pointer;
}
.overlay button:hover { background: var(--accent); color: var(--bg); }
.play .phone-only { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.play .phone-only p { margin: 0; font-family: var(--pixel); font-size: 15px; letter-spacing: 1px; }