/* GENERATED by marketing/site/build.mjs: the tokens from Design/css/colors_and_type.css, then marketing/site/legal.css.
   Edit those, then npm run build:site. */
:root {
  --bg-0: oklch(0.178 0.014 52);
  --bg-1: oklch(0.232 0.018 52);
  --bg-2: oklch(0.285 0.020 50);
  --bg-3: oklch(0.350 0.022 50);
  --bg-grad: radial-gradient(125% 82% at 50% -6%,
    oklch(0.250 0.028 56) 0%,
    oklch(0.182 0.015 52) 54%,
    oklch(0.150 0.012 46) 100%);
  --bg-grad-warm: radial-gradient(130% 88% at 50% -4%,
    oklch(0.275 0.045 60) 0%,
    oklch(0.190 0.020 50) 52%,
    oklch(0.150 0.012 44) 100%);
  --line-1: oklch(0.46 0.020 55 / 0.18);
  --line-2: oklch(0.58 0.020 55 / 0.22);
  --ink-0: oklch(0.958 0.012 78);
  --ink-1: oklch(0.800 0.016 72);
  --ink-2: oklch(0.662 0.016 66);
  --ink-3: oklch(0.520 0.014 60);
  --accent:       oklch(0.800 0.125 188);
  --accent-soft:  oklch(0.800 0.125 188 / 0.16);
  --accent-line:  oklch(0.800 0.125 188 / 0.42);
  --accent-ink:   oklch(0.210 0.045 195);
  --accent-bold:  oklch(0.865 0.145 186);
  --accent-deep:  oklch(0.630 0.120 192);
  --accent-glow:  oklch(0.820 0.140 188 / 0.48);
  --gold:       #E5CC85;
  --gold-soft:  rgba(229, 204, 133, 0.16);
  --gold-line:  rgba(229, 204, 133, 0.45);
  --gold-glow:  rgba(229, 204, 133, 0.46);
  --gold-ink:   #2A1F08;
  --alert:        oklch(0.800 0.130 62);
  --alert-soft:   oklch(0.800 0.130 62 / 0.16);
  --alert-line:   oklch(0.800 0.130 62 / 0.45);
  --alert-ink:    oklch(0.245 0.050 50);
  --alert-bold:   oklch(0.865 0.150 65);
  --alert-deep:   oklch(0.660 0.140 55);
  --alert-glow:   oklch(0.820 0.150 62 / 0.48);
  --font-wordmark: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:       "Hanken Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono:     "Hanken Grotesk", ui-monospace, "SF Mono", monospace;
  --t-display-xl: 88px;
  --t-display-l:  52px;
  --t-display-m:  34px;
  --t-display-s:  24px;
  --t-body-l:     17px;
  --t-body:       15px;
  --t-body-s:     13px;
  --t-mono:       12px;
  --t-eyebrow:    11px;
  --t-micro:      10px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 28px; --s-7: 36px; --s-8: 48px;
  --glass:        linear-gradient(180deg, oklch(0.98 0.02 72 / 0.10), oklch(0.98 0.02 72 / 0.05));
  --glass-strong: linear-gradient(180deg, oklch(0.98 0.02 72 / 0.11), oklch(0.98 0.02 72 / 0.035));
  --glass-border: oklch(0.92 0.03 66 / 0.12);
  --glass-blur:   16px;
  --shadow-1:     0 1px 0 oklch(1 0 0 / 0.05) inset, 0 0 0 1px oklch(1 0 0 / 0.04);
  --shadow-raise: 0 12px 28px -16px oklch(0 0 0 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-card:  0 24px 48px -24px oklch(0 0 0 / 0.66), inset 0 1px 0 oklch(1 0 0 / 0.06);
  --shadow-sheet: 0 -24px 60px oklch(0 0 0 / 0.55);
  --shadow-glow:       0 0 0 1px var(--accent-glow), 0 14px 40px -10px var(--accent-glow);
  --shadow-glow-alert: 0 0 0 1px var(--alert-glow),  0 14px 40px -10px var(--alert-glow);
  --shadow-glow-gold:  0 0 0 1px var(--gold-glow),   0 14px 44px -10px var(--gold-glow);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    300ms;
  --dur-slow:    900ms;
  --dur-celebrate: 1100ms;
  --nim-time-tint: oklch(0.800 0.125 188);
  --nim-time-glow: oklch(0.800 0.125 188 / 0.22);
}

/* ===================================================================
   Paff · the info pages: How it works, Privacy, Consent, Terms, the
   health-data policy (EN + TR). Hand-written HTML (Terms generated by
   scripts/build-legal.mjs) on the home page's type and ground: the
   tokens sit above this (build.mjs), the fonts are the site's own.
   =================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/fraunces-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/hanken-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/hanken-600.woff2") format("woff2"); }

:root { color-scheme: dark; --maxw: 46rem; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-0); }
body {
  margin: 0; background: var(--bg-grad), var(--bg-0); background-repeat: no-repeat; background-size: 100% 900px, auto;
  color: var(--ink-0); font: 400 16.5px/1.68 var(--font-ui); letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bold); }
:focus-visible { outline: 2px solid var(--accent-bold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ── top bar: the wordmark home, the page's links, its language ───── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0; margin-bottom: 48px; border-bottom: 1px solid var(--line-1); }
.brand {
  display: block; width: 62px; height: 26px; overflow: hidden; color: transparent; white-space: nowrap; text-indent: 120%;
  background: url("wordmark.svg") left center / contain no-repeat;
}
.brand span { color: transparent; }
.nav { display: flex; gap: 20px; align-items: center; font: 500 14px/1 var(--font-ui); }
.nav > a { color: var(--ink-1); }
.nav > a:hover { color: var(--ink-0); }
.lang { font: 600 12px/1 var(--font-ui); letter-spacing: 0.08em; }
.lang .on { color: var(--ink-0); }
.lang .off { color: var(--ink-2); }
.lang .sep { color: var(--ink-3); }

/* ── type ────────────────────────────────────────────────────────── */
.eyebrow { margin: 0 0 12px; font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0 0 14px; font: 500 clamp(36px, 7vw, 54px)/1.05 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
h2 { margin: 48px 0 12px; font: 500 clamp(24px, 4.4vw, 31px)/1.15 var(--font-display); letter-spacing: -0.014em; text-wrap: balance; }
h3 { margin: 30px 0 8px; font: 600 18px/1.4 var(--font-ui); color: var(--ink-0); }
p, li { color: var(--ink-1); }
p { margin: 0 0 14px; text-wrap: pretty; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 6px 0; }
li::marker { color: var(--ink-3); }
strong { color: var(--ink-0); font-weight: 600; }
em { font-style: italic; }
hr { border: none; border-top: 1px solid var(--line-1); margin: 40px 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-1); color: var(--ink-1); }
th { color: var(--ink-0); font-weight: 600; }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-1); }
.updated { font: 500 13px/1.4 var(--font-ui); letter-spacing: 0.02em; color: var(--ink-2); }

/* ── notices ─────────────────────────────────────────────────────── */
.banner { border: 1px solid var(--line-1); border-left: 3px solid var(--alert); background: var(--glass), var(--bg-1); border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 32px; }
.banner.info { border-left-color: var(--accent); }
.banner .eyebrow { color: var(--alert); margin-bottom: 6px; }
.banner.info .eyebrow { color: var(--accent); }
.banner p { margin: 0; font-size: 15px; }
.banner p + p { margin-top: 8px; }
.tbd { font-size: 0.86em; color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
.crisis { border: 1px solid var(--line-1); background: var(--bg-1); border-radius: var(--r-md); padding: 16px 18px; margin: 14px 0; }
.crisis ul { margin: 8px 0 0; }

footer { margin: 64px 0 40px; padding-top: 24px; border-top: 1px solid var(--line-1); color: var(--ink-2); font-size: 14px; }
footer p { color: var(--ink-2); }
footer a { color: var(--ink-1); }
footer a:hover { color: var(--ink-0); }