:root {
  --cyan: #00D4FF;
  --blue: #007AFF;
  --deep: #0044FF;
  --magenta: #E100FF;
  --navy: #0B1B3A;
  --mist: #F5F8FF;
  --card: #ffffff;
  --bg: var(--mist);
  --fg: var(--navy);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}
header, footer, main { max-width: 880px; margin: 0 auto; padding: 24px 20px; }
header { display:flex; justify-content:space-between; align-items:center; gap: 16px; }
nav a { margin-left: 16px; color: var(--blue); text-decoration:none; font-weight:600; }
.logo { display:flex; align-items:center; text-decoration:none; }
.logo picture { display:flex; }
.logo img { height: 52px; width: auto; }
.eyebrow { letter-spacing:.14em; text-transform:uppercase; color: var(--blue); font-weight:700; font-size:12px; }
h1 { font-size: clamp(32px, 6vw, 56px); line-height:1.1; margin: 8px 0 16px; color: var(--fg); }
.lead { font-size: 20px; max-width: 40rem; }
.store { text-align: center; margin: 28px 0; }
.store a { display: inline-block; }
.store img { height: 64px; width: auto; }
.points { padding-left: 18px; }
article { max-width: 720px; }
article a { color: var(--blue); }
footer { opacity:.6; font-size:14px; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070E1C;
    --fg: #E8EEF8;
    --card: #101A2E;
    --blue: #5AB8FF;
  }
}