/* Public pages (about, privacy). Colours and fonts come from /tokens.css and /fonts/fonts.css. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.6; }
a { color: var(--accent-text); }
.page { max-width: 680px; margin: 0 auto; min-height: 100dvh; background: var(--bg); padding-block: 28px 56px; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.brand svg { width: 30px; height: 30px; color: var(--logo); }
.wordmark { font-family: var(--f-display); font-weight: 640; font-size: 26px; letter-spacing: -0.02em; line-height: 1; font-variation-settings: "opsz" 72; }
.wordmark i, h1 i { font-style: normal; color: var(--accent); }
.langs { display: flex; gap: 4px; font-size: 14px; }
.langs a { color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.langs a[aria-current="true"] { color: var(--accent-text); font-weight: 600; }
h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 7vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 18px; text-wrap: balance; }
h2 { font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 40px 0 10px; }
p, li { max-width: 62ch; }
.lead { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
.points { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; }
.points li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.points b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 18px; margin-bottom: 2px; }
.cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 16px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none; }
.note { color: var(--muted); font-size: 14px; margin-top: 14px; }
.meta { color: var(--muted); font-size: 14px; }
footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--muted); }
.email { -webkit-user-select: all; user-select: all; }
/* With JavaScript, only the reader's language shows; without it (search engines, reviewers), both do. */
.js [lang]:not(html).off { display: none; }