/* The app's flat system, on the web: Archivo, zero radius, 2px rules, no
   shadows. Navy ground, amber accent, mint only for things earned, sky only
   for water. Same restraint as the phone, so the site and the app feel like
   one product rather than a landing page bolted onto it. */

:root {
  --ground: #10161d;
  --surface: #182029;
  --raised: #212b36;
  --divider: #2c3845;
  --text: #f6f5f3;
  --muted: #8a97a6;
  --faint: #4a5768;
  --accent: #ffce5c;
  --earned: #6ee7a8;
  --water: #74d0f5;
  --gutter: 24px;
  --rule: 2px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Chrome ── */

header {
  border-bottom: var(--rule) solid var(--divider);
  position: sticky;
  top: 0;
  background: var(--ground);
  z-index: 10;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.logo {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
}

.logo span {
  color: var(--accent);
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-left: 22px;
}

nav a:hover {
  color: var(--text);
}

/* ── Hero ── */

/* Centred, and no bottom rule. The rule sat on the 960px container rather than
   the full width, so it read as a stray line floating in the middle of the
   page rather than as a divider. */
.hero {
  padding: 96px 0 84px;
  text-align: center;
}

.kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

h1 {
  font-size: clamp(44px, 8vw, 76px);
  line-height: 0.98;
  letter-spacing: -2.6px;
  font-weight: 800;
  margin-bottom: 24px;
}

.lede {
  color: var(--muted);
  font-size: clamp(17px, 2.4vw, 20px);
  max-width: 560px;
  margin: 0 auto 36px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--ground);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 18px 28px;
}

.cta:hover {
  background: #e8b33c;
}

.cta-note {
  color: var(--faint);
  font-size: 13px;
  margin-top: 14px;
}

/* ── The score strip ── */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rule);
  background: var(--divider);
  border-bottom: var(--rule) solid var(--divider);
}

.strip div {
  background: var(--surface);
  padding: 26px 20px;
}

.strip b {
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--accent);
}

.strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

/* ── Sections ── */

section {
  padding: 0 0 88px;
}

h2 {
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.06;
  letter-spacing: -1.3px;
  font-weight: 800;
  margin-bottom: 18px;
}

.tick {
  display: inline-block;
  width: 5px;
  height: 15px;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: -1px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rule);
  background: var(--divider);
}

.card {
  background: var(--surface);
  padding: 30px 26px;
}

.card h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
  font-size: 15px;
}

.card .mint {
  color: var(--earned);
}

.card .sky {
  color: var(--water);
}

/* ── Long-form pages ── */

.doc {
  padding: 60px 0 90px;
  max-width: 720px;
}

.doc h2 {
  font-size: 26px;
  margin: 42px 0 14px;
  letter-spacing: -0.7px;
}

.doc p,
.doc li {
  color: var(--muted);
  margin-bottom: 14px;
}

.doc strong {
  color: var(--text);
}

.doc ul {
  padding-left: 22px;
  margin-bottom: 14px;
}

.doc a {
  color: var(--accent);
}

.updated {
  color: var(--faint);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* ── Footer ── */

footer {
  padding: 40px 0 56px;
  color: var(--faint);
  font-size: 14px;
  text-align: center;
  border-top: var(--rule) solid var(--divider);
}

footer a:last-child {
  margin-right: 0;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 20px;
}

footer a:hover {
  color: var(--text);
}

.footer-links {
  margin-bottom: 16px;
}

@media (max-width: 620px) {
  .strip {
    grid-template-columns: repeat(2, 1fr);
  }
  nav a {
    margin-left: 14px;
    font-size: 11px;
  }
}