/* Landing page only. The map's chrome lives in app.css. Colours are the same
   two hues the map uses for its dots, so the layers read as familiar on arrival. */
:root {
  --ev: #eb6834;
  --gas: #2a78d6;
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #6b7280;
  --line: #e3e6ea;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 56px 22px 72px; }

h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 6px; }
.lede { font-size: 19px; line-height: 1.5; color: var(--fg); margin: 0 0 28px; }
h2 { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 40px 0 10px; }
p { margin: 0 0 15px; }
a { color: #1d4ed8; }

.cta {
  display: inline-block; margin: 6px 0 8px; padding: 12px 22px;
  background: var(--fg); color: #fff; text-decoration: none;
  border-radius: 8px; font-weight: 600; font-size: 16px;
}
.cta:hover { background: #000; }
.cta-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* The headline numbers. Values are filled from data/counts.json at load so they
   track the weekly refresh instead of going stale in the markup. */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; padding: 0; list-style: none; }
.stats li {
  flex: 1 1 150px; border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
}
.stats .n { display: block; font-size: 25px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats .l { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 3px; }
.stats .gas .n { color: var(--gas); }
.stats .ev .n { color: var(--ev); }

.key { margin: 0 0 15px; padding: 0; list-style: none; font-size: 15px; }
.key li { display: flex; align-items: baseline; gap: 9px; margin: 7px 0; }
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1.5px solid rgba(0,0,0,.2); transform: translateY(1px); }
.dot.ev { background: var(--ev); }
.dot.gas { background: var(--gas); }

footer { margin-top: 46px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
footer a { color: inherit; }

@media (max-width: 560px) {
  .wrap { padding: 34px 18px 56px; }
  h1 { font-size: 25px; }
  .lede { font-size: 17px; }
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #14161a; --fg: #e9ecf1; --muted: #9aa3b0; --line: #2a2f37; }
  a { color: #7ba7ff; }
  .cta { background: #e9ecf1; color: #14161a; }
  .cta:hover { background: #fff; }
}