:root {
  --navy: #0B1220;
  --text: #0F172A;
  --teal: #0E7490;
  --teal-dark: #155E75;
  --mint: #2DD4BF;
  --bg: #F8FAFC;
  --fg: var(--text);
}
* { 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(--teal); text-decoration:none; font-weight:600; }
.logo { display:flex; align-items:center; gap: 10px; text-decoration:none; color: var(--navy); font-weight:700; font-size: 18px; }
.logo picture { display:flex; }
.logo img { height: 44px; width: 44px; border-radius: 10px; }
.eyebrow { letter-spacing:.14em; text-transform:uppercase; color: var(--teal); 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; }
.points li { margin: 6px 0; }
.points li::marker { color: var(--mint); }
article { max-width: 720px; }
article a { color: var(--teal); }
footer { opacity:.6; font-size:14px; }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07111D;
    --fg: #F8FAFC;
    --navy: #F8FAFC;
    --teal: #22D3EE;
  }
}