/* Shared by the privacy and terms pages. Same tokens as the landing page — a legal page in a different visual language reads as somebody else's document. */ :root{ --bg:#faf8f6; --surface:#ffffff; --ink:#2a211c; --muted:#7a6f68; --line:#e8e2dd; --subtle:#f1ece8; --primary:#c2603f; --alarm:#c0392b; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#231f1d; --surface:#2b2523; --ink:#f0e9e4; --muted:#a89e97; --line:#3d3532; --subtle:#3a322e; --primary:#e0876a; --alarm:#e26d5c; } } :root[data-theme="dark"]{ --bg:#231f1d; --surface:#2b2523; --ink:#f0e9e4; --muted:#a89e97; --line:#3d3532; --subtle:#3a322e; --primary:#e0876a; --alarm:#e26d5c; } *{box-sizing:border-box} body{ margin:0;background:var(--bg);color:var(--ink); font:17px/1.7 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:44rem;margin:0 auto;padding:0 1.5rem} header{padding:1.5rem 0} .back{color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem} .back:hover{color:var(--ink)} main{padding:1.5rem 0 4rem} h1{font-size:clamp(2rem,1.5rem + 2vw,2.7rem);letter-spacing:-.025em;margin:0 0 .5rem;text-wrap:balance} h2{font-size:1.25rem;letter-spacing:-.015em;margin:2.75rem 0 .75rem;text-wrap:balance} h3{font-size:1rem;margin:1.75rem 0 .4rem} p{margin:0 0 1rem;max-width:66ch} .meta{color:var(--muted);font-size:.9rem;margin-bottom:2rem} a{color:var(--primary)} ul{margin:0 0 1rem;padding-left:1.25rem;display:flex;flex-direction:column;gap:.6rem;max-width:66ch} li{color:var(--ink)} .callout{ background:var(--subtle);border-left:3px solid var(--primary); border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:0 0 2rem; } .callout.warn{border-left-color:var(--alarm)} .callout p:last-child{margin-bottom:0} table{border-collapse:collapse;width:100%;font-size:.93rem;margin:0 0 1rem;display:block;overflow-x:auto} th{ text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em; color:var(--muted);padding:.6rem .8rem;background:var(--subtle); border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap; } td{padding:.7rem .8rem;border-bottom:1px solid var(--line);vertical-align:top} tr:last-child td{border-bottom:none} footer{padding:2rem 0 4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem} footer a{color:var(--muted)} a:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px} /* Same three-language mechanism as the landing page: everything with data-l is hidden, and the one matching is shown. Set before is parsed, so these pages also paint in the right language the first time. */ /* !important on both halves deliberately: exactly one language must be on screen, and that must not be losable to any layout rule that happens to match a span more specifically. The first version of this lost to `.btn-store span` and printed all three languages inside the App Store badge. */ [data-l]{display:none!important} html[data-lang="en"] [data-l="en"], html[data-lang="nl"] [data-l="nl"], html[data-lang="tr"] [data-l="tr"]{display:inline!important}