/* Secondary pages (waiting, privacy, terms, report errors). Same tokens and type as landing.css. */
:root {
  --ink: #1e2622; --paper: #f5f6f2; --white: #fff; --muted: #535c57; --rule: #d5d9d2; --tape: #f2c230; --ground: #18201c;
  --f: "Schibsted Grotesk", system-ui, sans-serif;
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --gutter: clamp(16px, 4vw, 56px); --r: 4px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--f); }
::selection { background: var(--tape); color: var(--ink); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
header.top { background: var(--ground); }
header.top .wrap { display: flex; align-items: center; height: 64px; }
.brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--white); text-decoration: none; }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 var(--s4); text-wrap: balance; }
h2 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; margin: var(--s6) 0 var(--s2); }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
.lede { font-size: 1.25rem; color: var(--muted); max-width: 40ch; }
.hint { font-size: 0.875rem; color: var(--muted); }
.center { padding: var(--s8) 0; max-width: 40em; }
.doc { padding: var(--s8) 0; max-width: 44em; }
.doc p { color: var(--muted); max-width: 66ch; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--rule); border-top-color: var(--tape); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 0 var(--s5); }
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
footer { border-top: 1px solid var(--rule); padding: var(--s5) 0 var(--s7); color: var(--muted); font-size: 0.875rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s5); }

/* Article pages */
.article { padding: var(--s7) 0 var(--s8); max-width: 40rem; }
.article h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: var(--s7) 0 var(--s3); }
.article p, .article li { color: #2f3833; max-width: 62ch; text-wrap: pretty; }
.article h2 { text-wrap: balance; }
.article ul, .article ol { padding-left: 1.2em; margin: 0 0 var(--s4); }
.article li + li { margin-top: var(--s2); }
.article strong { color: var(--ink); }
.crumbs { font-size: 0.875rem; color: var(--muted); margin-bottom: var(--s4); }
.pair { margin: var(--s6) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pair div { margin: 0; }
.pair img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 2px; background: var(--rule); }
.pair span { display: block; margin-top: var(--s2); font-weight: 700; font-size: 0.9375rem; }
.pair figcaption { grid-column: 1 / -1; font-size: 0.875rem; color: var(--muted); }
.table-wrap { overflow-x: auto; margin: 0 0 var(--s5); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--rule); }
thead th { font-size: 0.8125rem; color: var(--muted); font-weight: 700; }
tbody th { font-weight: 700; }
.cta { margin-top: var(--s6); }
.button { display: inline-block; padding: 16px 24px; border-radius: var(--r); background: var(--tape); color: var(--ink); font-weight: 700; text-decoration: none; }
.button:hover { background: #e3b21c; }

.updated { font-size: 0.875rem; color: var(--muted); margin: calc(-1 * var(--s2)) 0 var(--s4); }
