:root {
  color-scheme: dark;
  --ink: #080a09;
  --paper: #f2f5ef;
  --muted: #aeb6ad;
  --signal: #b8ff5a;
  --line: rgba(242, 245, 239, 0.16);
  font-family: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--paper); }
a { color: var(--signal); }
.shell { width: min(760px, calc(100vw - 40px)); margin: 0 auto; padding: 44px 0 96px; }
.wordmark { color: var(--paper); font-weight: 600; text-decoration: none; }
.eyebrow { margin: 88px 0 18px; color: var(--signal); font: 500 12px/1.4 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0 0 22px; font-size: clamp(42px, 8vw, 72px); line-height: .98; letter-spacing: -.055em; }
h2 { margin: 44px 0 12px; font-size: 22px; }
p, li { color: var(--muted); font-size: 16px; line-height: 1.75; }
ul { padding-left: 22px; }
.updated { padding-bottom: 28px; border-bottom: 1px solid var(--line); font: 12px/1.5 ui-monospace, monospace; }
.action { display: inline-flex; margin-top: 24px; min-height: 48px; align-items: center; padding: 0 20px; border: 1px solid var(--signal); border-radius: 999px; color: var(--ink); background: var(--signal); font-weight: 600; text-decoration: none; }
.footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font: 12px/1.7 ui-monospace, monospace; }
.billing-shell { width: min(980px, calc(100vw - 40px)); }
.billing-intro { max-width: 690px; font-size: 18px; }
.billing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.billing-card { min-height: 310px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: rgba(242, 245, 239, 0.035); }
.billing-card h2 { margin-top: 12px; }
.card-eyebrow { margin: 0; color: var(--signal); font: 500 12px/1.4 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.billing-help { margin-top: 32px; }
.sandbox-notice { margin-top: 28px; padding: 14px 16px; border: 1px solid rgba(184, 255, 90, .38); border-radius: 12px; }
.empty-state { margin-top: 44px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 8px; }
.empty-state span { color: var(--muted); line-height: 1.6; }

@media (max-width: 700px) {
  .billing-grid { grid-template-columns: 1fr; }
  .billing-card { min-height: 0; }
}