/* Shared styles for sub-pages (pricing, status, changelog).
   Mirrors the design tokens from index.html so the pages feel like one site. */
:root {
  --bg: #0a0a0b;
  --bg-raised: #111113;
  --ink: #ededee;
  --ink-dim: #8a8a90;
  --ink-faint: #45454a;
  --accent: #c6ff3c;
  --accent-dim: #7a9e20;
  --rule: #1e1e22;
  --warn: #ff7a59;
  --good: #4ade80;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(198,255,60,0.06), transparent 70%),
    radial-gradient(900px 500px at 10% 110%, rgba(198,255,60,0.04), transparent 70%),
    var(--bg);
  min-height: 100vh;
}
a { color: inherit; }
::selection { background: var(--accent); color: #000; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.brand { font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.brand .tag { color: var(--ink-dim); font-weight: 400; }
.nav-links { display: flex; gap: 28px; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.nav-links a { text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-family: var(--mono); font-size: 13px; padding: 8px 14px;
  border: 1px solid var(--rule); border-radius: 6px; text-decoration: none;
  color: var(--ink); transition: border-color .15s, background .15s;
}
.nav-cta:hover { border-color: var(--accent); background: rgba(198,255,60,0.06); }

main { padding: 80px 0 120px; }
.eyebrow { font-family: var(--mono); font-size: 12px; color: var(--accent-dim); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; }
h1 { font-size: 56px; line-height: 1.05; margin: 0 0 24px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 28px; margin: 56px 0 16px; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 18px; margin: 24px 0 8px; font-weight: 600; }
p { font-size: 17px; line-height: 1.6; color: var(--ink-dim); max-width: 720px; }
p strong { color: var(--ink); font-weight: 600; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-raised); padding: 2px 6px; border-radius: 4px; color: var(--accent); }

footer { border-top: 1px solid var(--rule); padding: 32px 0 64px; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-align: center; }
footer a { color: var(--ink-dim); text-decoration: none; margin: 0 6px; }
footer a:hover { color: var(--ink); }

/* Pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; }
.tier { border: 1px solid var(--rule); border-radius: 10px; padding: 28px 24px; background: var(--bg-raised); }
.tier.featured { border-color: var(--accent-dim); position: relative; }
.tier.featured::before { content: "RECOMMENDED"; position: absolute; top: -10px; left: 24px; background: var(--accent); color: #000; font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .08em; }
.tier-name { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; }
.tier-price { font-size: 40px; font-weight: 700; margin: 12px 0 4px; letter-spacing: -0.02em; }
.tier-price .unit { font-size: 16px; color: var(--ink-dim); font-weight: 400; margin-left: 6px; }
.tier-meta { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin-bottom: 18px; }
.tier ul { list-style: none; padding: 0; margin: 16px 0 24px; font-size: 14px; color: var(--ink-dim); }
.tier li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.tier li:last-child { border-bottom: 0; }
.tier li::before { content: "→ "; color: var(--accent-dim); }
.tier-cta { display: inline-block; padding: 10px 18px; border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; font-family: var(--mono); font-size: 13px; transition: all .15s; }
.tier-cta:hover { border-color: var(--accent); color: var(--accent); }
.tier.featured .tier-cta { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }
.tier.featured .tier-cta:hover { background: transparent; color: var(--accent); }

/* Status board */
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.status-card { border: 1px solid var(--rule); border-radius: 10px; padding: 20px; background: var(--bg-raised); }
.status-card .label { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; }
.status-card .value { font-size: 24px; font-weight: 600; margin: 8px 0 4px; }
.status-card .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-pill.up .dot { background: var(--good); box-shadow: 0 0 10px var(--good); }
.status-pill.down .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.status-pill.checking .dot { background: var(--ink-dim); }

/* Changelog */
.changelog { max-width: 760px; }
.changelog .entry { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.changelog .entry:last-child { border-bottom: 0; }
.changelog .date { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
.changelog .subject { font-size: 17px; margin: 4px 0 6px; color: var(--ink); }
.changelog .body { font-size: 14px; color: var(--ink-dim); line-height: 1.6; white-space: pre-wrap; }
.changelog .sha { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

@media (max-width: 720px) {
  h1 { font-size: 40px; }
  .nav-links { display: none; }
}