/* The app's Neo-Brutalist look (src/theme.ts): white page, black ink, thick borders, hard shadows, acid green. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@600;700&display=swap');

:root { --ink: #0a0a0a; --muted: #4a4a4a; --acid: #ccff00; --purple: #7000ff; --pink: #ff0099; --well: #f2f2f2; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #ffffff; color: var(--ink); }
body { font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--purple); }
main { max-width: 440px; margin: 0 auto; padding: 40px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.lower { text-transform: lowercase; }
.icon { width: 96px; height: 96px; border-radius: 22px; transform: rotate(-4deg); box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink); }
.eyebrow { margin: 12px 0 0; font: 600 14px 'Space Grotesk', sans-serif; letter-spacing: 0.08em; color: var(--purple); text-transform: lowercase; }
h1 { margin: 0; font: 700 40px/1.05 'Space Grotesk', sans-serif; letter-spacing: -0.05em; overflow-wrap: anywhere; }
.lead { margin: 0; font-size: 17px; line-height: 1.45; }
.card { background: var(--acid); border-radius: 40px; padding: 20px; text-align: center; box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink); margin: 8px 0; transform: rotate(0.8deg); }
.label { margin: 0; font: 600 14px 'Space Grotesk', sans-serif; }
.key { margin: 6px 0 12px; font: 700 44px 'Space Grotesk', sans-serif; letter-spacing: 0.08em; text-transform: none; }
.copy { font: 600 15px 'Space Grotesk', sans-serif; text-transform: lowercase; background: #ffffff; color: var(--ink); border: 0; border-radius: 999px; padding: 8px 18px; box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); cursor: pointer; }
.button { display: block; text-align: center; text-decoration: none; font: 700 20px 'Space Grotesk', sans-serif; letter-spacing: -0.03em; color: #ffffff; background: var(--ink); border-radius: 999px; padding: 18px; box-shadow: 6px 6px 0 0 var(--purple); transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-transform: lowercase; }
.button:active, .copy:active { transform: scale(0.95); }
.small { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- site pages: header, footer, landing, documents ---------- */
.top { max-width: 760px; margin: 0 auto; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 22px 'Space Grotesk', sans-serif; letter-spacing: -0.04em; text-transform: lowercase; }
.brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink); font: 600 14px 'Space Grotesk', sans-serif; text-transform: lowercase; padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 0 2px var(--ink); }
.nav a[aria-current] { background: var(--acid); }
.wide { max-width: 760px; }
.hero { background: var(--acid); border-radius: 40px; padding: 28px 22px; box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink); transform: rotate(-0.6deg); }
.doc .hero h1 { font-size: clamp(48px, 13vw, 76px); text-transform: lowercase; }
.hero .lead { margin-top: 10px; font-size: 19px; }
.pill { display: inline-block; margin-top: 16px; font: 600 14px 'Space Grotesk', sans-serif; text-transform: lowercase; background: var(--ink); color: #ffffff; border-radius: 999px; padding: 8px 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 8px; }
.feature { border-radius: 40px; padding: 20px 22px; box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink); background: #ffffff; }
.feature:nth-child(3n+2) { transform: rotate(0.8deg); }
.feature:nth-child(3n) { transform: rotate(-0.8deg); }
.feature .emoji { font-size: 34px; }
.feature h2 { margin: 6px 0 6px; font: 700 22px 'Space Grotesk', sans-serif; letter-spacing: -0.04em; text-transform: lowercase; }
.feature p { margin: 0; font-size: 15px; line-height: 1.45; }
.feature.purple { background: var(--purple); color: #ffffff; }
.feature.pink { background: var(--pink); }
.section-title { margin: 20px 0 0; font: 700 28px 'Space Grotesk', sans-serif; letter-spacing: -0.05em; text-transform: lowercase; }

.doc { max-width: 760px; }
.doc h1 { font-size: clamp(36px, 9vw, 52px); text-transform: lowercase; }
.doc h2 { margin: 24px 0 0; font: 700 24px 'Space Grotesk', sans-serif; letter-spacing: -0.04em; }
.doc h3 { margin: 12px 0 0; font: 700 18px 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; }
.doc p { margin: 0; }
.doc ul, .doc ol { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc .updated { color: var(--muted); font-size: 14px; }
.box { background: var(--acid); border-radius: 40px; padding: 20px 24px; box-shadow: 0 0 0 4px var(--ink), 6px 6px 0 4px var(--ink); }
.box ul { margin-top: 6px; }
.table-wrap { overflow-x: auto; border-radius: 24px; box-shadow: 0 0 0 2px var(--ink); }
table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
th, td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 2px solid var(--well); }
th { font: 600 14px 'Space Grotesk', sans-serif; background: var(--well); }
tr:last-child td { border-bottom: 0; }

.foot { max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--muted); border-top: 2px solid var(--ink); }
.foot a { color: var(--ink); }