/* Shared styles for /privacy, /support and the 404 page. The home page carries the same tokens inline. */
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/assets/fonts/poppins-semibold.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
:root {
  --ink: #1d1b1c; --surface: #262324; --line: #3a3638; --text: #eeece7; --muted: #a5a49f; --accent: #c8f169;
  --text-2: oklch(94.3% 0.007 88.6 / 0.8);
  --glass-fill: oklch(22.5% 0.004 345.6 / 0.55); --glass-border: oklch(100% 0 0 / 0.14);
  --font: "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 5vw, 72px); --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--ink); color: var(--text); font: 400 17px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: var(--text); text-underline-offset: 4px; text-decoration-color: oklch(100% 0 0 / 0.4); transition: text-decoration-color 160ms var(--ease-out); }
a:hover { text-decoration-color: var(--accent); }
.skip { position: absolute; left: 16px; top: -80px; z-index: 20; padding: 12px 16px; background: var(--accent); color: var(--ink); font-weight: 600; border-radius: 14px; text-decoration: none; }
.skip:focus { top: 16px; }
.nav { position: sticky; top: 12px; z-index: 10; width: min(calc(100% - 24px), 760px); margin: 12px auto 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 60px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--glass-fill); -webkit-backdrop-filter: saturate(170%) blur(22px); backdrop-filter: saturate(170%) blur(22px); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.12); }
@media (prefers-reduced-transparency: reduce) { .nav-inner { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .nav-inner { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: oklch(100% 0 0 / 0.6); } :root { --text-2: var(--text); } }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color 160ms var(--ease-out); }
.nav ul a:hover { background: oklch(100% 0 0 / 0.1); }
.nav ul a[aria-current] { background: oklch(100% 0 0 / 0.12); }
main { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(56px, 10vw, 112px) var(--gutter) 96px; }
h1 { margin: 0; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.updated { margin-top: 16px; color: var(--muted); font-size: 15px; }
h2 { margin: 56px 0 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
h3 { margin: 32px 0 0; font-size: 1.125rem; font-weight: 600; }
main p, main li { color: var(--text-2); max-width: 66ch; text-wrap: pretty; }
p { margin: 12px 0 0; }
ul, ol { margin: 12px 0 0; padding-left: 1.3em; }
main li + li { margin-top: 8px; }
.lead { margin-top: 24px; font-size: 1.1875rem; color: var(--text); }
.card { margin-top: 32px; padding: 20px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); }
footer .in { max-width: 1280px; margin: 0 auto; padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 15px; color: var(--muted); }
footer ul { display: flex; gap: 0 24px; list-style: none; margin: 0; padding: 0; }
footer a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
footer p { margin: 0; color: var(--muted); }
@media (max-width: 420px) { .brand span { display: none; } .nav ul a { padding: 0 10px; } }