/* Whozit: one system everywhere. Hanken Grotesk + Fragment Mono; peach = a known name, blue = an unknown voice.
   Light by default, dark from the system or [data-theme="dark"]. Page-specific styles live in each page's own CSS. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/hanken-grotesk-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/fragment-mono-latin-400-normal.woff2) format("woff2"); }

:root {
  --bg: #F4F4F1; --fg: #111214; --muted: #676A71; --line: #DCDCD7; --chip: #FFFFFF; --panel: #FFFFFF;
  --blue: #3246E6; --peach: #B04A16;          /* peach darkened from #C2551F for AA contrast on light */
  --raw: #F9F9F7; --rawtext: #6E7178;
  --sans: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 3vw, 40px); --max: 1240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0E0F12; --fg: #F0F0EC; --muted: #9A9DA5; --line: #26282E; --chip: #17191D; --panel: #14161A; --blue: #8F9BFF; --peach: #FFB38A; --raw: #17191D; --rawtext: #9A9DA5; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0E0F12; --fg: #F0F0EC; --muted: #9A9DA5; --line: #26282E; --chip: #17191D; --panel: #14161A; --blue: #8F9BFF; --peach: #FFB38A; --raw: #17191D; --rawtext: #9A9DA5; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: 400 1rem/1.6 var(--sans); margin: 0; overflow-x: hidden; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); }
.known { color: var(--peach); font-weight: 600; }
.unknown { color: var(--blue); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Nav: the same on every page. */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 18px; font-size: .9375rem; flex-wrap: wrap; }
.logo { font: 800 1.375rem var(--sans); letter-spacing: -.05em; text-decoration: none; color: var(--fg); }
.logo i { font-style: normal; color: var(--blue); }
.nav .links { display: flex; gap: 22px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.nav .links a { text-decoration: none; padding-block: 6px; }
.nav .links a:hover { color: var(--fg); }
.nav .links a[aria-current="page"] { color: var(--fg); }
.nav .cta { color: var(--bg); background: var(--fg); padding: 8px 16px !important; border-radius: 999px; }
.nav .cta:hover { color: var(--bg) !important; }

/* Buttons and chips. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font: 600 1rem var(--sans); padding: 12px 24px; border-radius: 999px; border: 2px solid var(--fg); background: var(--fg); color: var(--bg); cursor: pointer; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--fg); }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ln { display: inline-flex; gap: 10px; align-items: baseline; background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; white-space: nowrap; font-size: .9375rem; }
.ln .t { font: .75rem var(--mono); color: var(--muted); }
.ln b { color: var(--peach); font-weight: 600; }
.ln b.q { color: var(--blue); }

/* Type. */
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.eyebrow { font: .8125rem var(--mono); color: var(--muted); text-transform: lowercase; letter-spacing: 0; }
.lede { color: var(--muted); font-size: 1.125rem; max-width: 46ch; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: 2.2em 0 .5em; }
.prose p, .prose li { color: var(--fg); }
.prose code, code { font-family: var(--mono); font-size: .875em; }

/* Footer: the same on every page. */
.footer { border-top: 1px solid var(--line); margin-top: 72px; padding-block: 28px 40px; color: var(--muted); font-size: .875rem; display: grid; gap: 14px; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--fg); }
.footer .credit { font-size: .8125rem; }
.theme { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; font: .8125rem var(--mono); padding: 6px 12px; cursor: pointer; min-height: 32px; }

/* Small screens: keep Pricing, Sign in and Get started in the bar; the rest is in the footer. */
@media (max-width: 760px) {
  .nav { font-size: .875rem; }
  .nav .links { gap: 14px; }
  .nav .links a:not(.cta):not([href="/pricing"]):not([href="/signin"]) { display: none; }
  .nav .cta { padding: 8px 14px !important; }
}