/* MapFill site — same palette as the app so the pages feel like part of it. */
:root {
  --fog: #173b4b;
  --deep: #0e242f;
  --card: rgba(20, 49, 64, 0.9);
  --ice: #bfe0ee;
  --ice-dim: #8fb2c2;
  --gold: #ffe066;
  --green: #4fe06a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--deep);
  color: var(--ice);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 680px; margin: 0 auto; }
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 40px 0 8px;
}
header img { width: 54px; height: 54px; border-radius: 12px; }
header h1 { margin: 0; font-size: 26px; color: #fff; letter-spacing: -0.2px; }
header a { color: var(--ice-dim); text-decoration: none; font-size: 14px; }
h2 {
  color: #fff;
  font-size: 20px;
  margin: 34px 0 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(191, 224, 238, 0.15);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
p { margin: 12px 0; }
a { color: var(--green); }
code { color: var(--gold); font-size: 0.95em; }
.date { color: var(--ice-dim); font-size: 14px; margin-top: 4px; }
.lede {
  background: var(--card);
  border: 2px solid rgba(191, 224, 238, 0.25);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 22px 0 8px;
}
.lede strong { color: #fff; }
ul { padding-left: 22px; }
li { margin: 8px 0; }
footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(191, 224, 238, 0.15);
  color: var(--ice-dim);
  font-size: 14px;
}
footer a { color: var(--ice-dim); }