/* zero design system tokens */
:root {
  --fg-1: rgb(31, 29, 30);
  --fg-2: rgba(31, 29, 30, 0.70);
  --fg-3: rgba(31, 29, 30, 0.50);
  --fg-4: rgba(31, 29, 30, 0.30);
  --fg-inverse: rgb(255, 255, 255);
  --ink-0: rgb(255, 255, 255);
  --ink-50: rgb(249, 248, 246);
  --ink-100: rgb(246, 245, 243);
  --ink-150: rgb(242, 240, 237);
  --ink-200: rgb(232, 230, 226);
  --ink-300: rgb(217, 217, 217);
  --ink-400: rgb(170, 168, 165);
  --ink-500: rgb(120, 118, 115);
  --ink-800: rgb(42, 33, 24);
  --ink-900: rgb(31, 29, 30);
  --bg-surface: var(--ink-0);
  --bg-app: var(--ink-100);
  --bg-cream: var(--ink-150);
  --bg-sunken: rgba(31, 29, 30, 0.03);
  --border-hair: rgba(31, 29, 30, 0.06);
  --border-subtle: rgba(31, 29, 30, 0.10);
  --border-focus: rgb(73, 186, 97);
  --green-900: rgb(12, 45, 30);
  --green-800: rgb(24, 67, 47);
  --green-700: rgb(42, 110, 72);
  --green-500: rgb(73, 186, 97);
  --green-200: rgb(164, 244, 178);
  --green-100: rgb(210, 250, 220);
  --warning-solid: rgb(255, 183, 58);
  --radius-sm: 8px;
  --radius-base: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 60px; --s-11: 80px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.05), 0 12px 24px rgba(0,0,0,.05);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --font-display: "Faculty Glyphic", Georgia, serif;
  --font-sans: "Google Sans Flex", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--fg-1);
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--green-500); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--green-800);
  letter-spacing: -0.025em;
  text-wrap: pretty;
  margin: 0 0 var(--s-4);
  line-height: 1.1;
}
h1 { font-size: 56px; }
h2 { font-size: 38px; margin-top: var(--s-9); }
h3 { font-size: 24px; margin-top: var(--s-7); }
p { text-wrap: pretty; max-width: 64ch; margin: 0 0 var(--s-4); line-height: 1.6; }
ul, ol { line-height: 1.7; max-width: 64ch; padding-left: var(--s-6); }
li { margin-bottom: var(--s-2); }
.container { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s-7) var(--s-6); }
@media (min-width: 900px) { .container { padding: var(--s-11) var(--s-8); } }
.mono-label { font-family: var(--font-mono); text-transform: uppercase; font-size: 13px; color: var(--fg-3); letter-spacing: -0.01em; }
.tldr { background: var(--bg-surface); border: 1px solid var(--border-hair); border-radius: var(--radius-xl); padding: var(--s-6); margin: var(--s-7) 0; }
.tldr ul { margin: 0; padding-left: var(--s-5); }
.tldr li { color: var(--fg-2); }
.btn { display: inline-block; font-family: var(--font-sans); font-weight: 500; font-size: 16px; line-height: 1; padding: 16px 24px; border-radius: var(--radius-pill); letter-spacing: -0.02em; text-decoration: none; transition: all var(--dur-fast) var(--ease-out); border: 0; cursor: pointer; }
.btn-primary { background: var(--ink-900); color: var(--fg-inverse); }
.btn-primary:hover { background: var(--ink-800); }
.btn-brand { background: var(--green-500); color: var(--fg-inverse); }
.btn-brand:hover { background: var(--green-700); }
.btn-ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--border-subtle); }
.card { background: var(--bg-surface); border: 1px solid var(--border-hair); border-radius: var(--radius-xl); padding: var(--s-7); margin: var(--s-6) 0; }
.proof-card { background: var(--bg-cream); border-radius: var(--radius-lg); padding: var(--s-6); margin: var(--s-4) 0; border: 1px solid var(--border-hair); }
.faq-item { margin: var(--s-6) 0; padding-bottom: var(--s-5); border-bottom: 1px solid var(--border-hair); }
.faq-q { font-weight: 500; margin-bottom: var(--s-2); font-size: 18px; }
.faq-a { color: var(--fg-2); }
.last-updated { margin-top: var(--s-11); padding-top: var(--s-6); border-top: 1px solid var(--border-hair); color: var(--fg-3); font-size: 14px; }
.breadcrumb { color: var(--fg-3); font-size: 14px; margin-bottom: var(--s-5); }
.breadcrumb a { color: var(--fg-3); }
table { width: 100%; border-collapse: collapse; margin: var(--s-6) 0; font-size: 16px; }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-hair); vertical-align: top; }
th { font-weight: 500; color: var(--fg-3); font-size: 14px; }
@media (max-width: 640px) {
  h1 { font-size: 38px; } h2 { font-size: 28px; } h3 { font-size: 20px; } body { font-size: 16px; }
}