/* Shared styles for whopaid.today.
   Prices shown on pricing.html are marketing copy only. The authoritative
   source for all billing behaviour is docs/07-billing.md; the live numbers
   are owned by Settings/Stripe. Update this page when those change. */

:root {
  --bg: #ffffff; --fg: #16181d; --muted: #5c6270;
  --line: #e3e6eb; --accent: #1d4ed8; --card: #f7f8fa; --accent-soft: #eef2ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101216; --fg: #e8eaee; --muted: #9aa1ad;
    --line: #262a32; --accent: #7ea6ff; --card: #171a20; --accent-soft: #1a2237;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

header { padding: 3rem 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.brand { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; color: var(--fg); }
.brand span { color: var(--muted); font-weight: 400; }
nav { display: flex; gap: 1.25rem; font-size: 0.92rem; }
nav a { color: var(--muted); text-decoration: none; }
nav a:hover, nav a[aria-current] { color: var(--fg); }

h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.15; letter-spacing: -0.03em; margin: 2.5rem 0 1rem; font-weight: 650; }
h1.doc { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0.4rem; }
.lede { font-size: 1.2rem; color: var(--muted); margin: 0 0 2.5rem; }
.updated { color: var(--muted); font-size: 0.9rem; margin: 0 0 2.5rem; }

h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; margin: 3.5rem 0 1.25rem; }
.doc-body h2 { font-size: 1.05rem; text-transform: none; letter-spacing: -0.01em; color: var(--fg); margin: 2.5rem 0 0.75rem; }
.doc-body p, .doc-body li { color: var(--muted); }
.doc-body strong { color: var(--fg); font-weight: 600; }
.doc-body ul { padding-left: 1.2rem; }
.doc-body li { margin-bottom: 0.5rem; }

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

ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li { counter-increment: step; position: relative; padding: 0 0 1.4rem 2.75rem; color: var(--muted); }
ol.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--fg);
  font-size: 0.8rem; font-weight: 600; display: grid; place-items: center;
}
ol.steps li b { color: var(--fg); font-weight: 600; }

.note { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.4rem; margin: 2rem 0; font-size: 0.96rem; color: var(--muted); }
.note b { color: var(--fg); }
.note.flag { background: var(--accent-soft); border-color: var(--accent); }

.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.pack { border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem; background: var(--card); }
.pack.featured { border-color: var(--accent); }
.pack h3 { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-weight: 600; }
.pack .price { font-size: 2rem; font-weight: 650; letter-spacing: -0.02em; margin: 0.5rem 0 0.15rem; }
.pack .per { color: var(--muted); font-size: 0.9rem; margin: 0; }
.tag { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; margin-top: 0.75rem; }

footer { margin-top: 4.5rem; border-top: 1px solid var(--line); padding: 1.75rem 0 4rem; font-size: 0.9rem; color: var(--muted); display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer a { color: var(--muted); }