/* Legal and contact pages (contact, data, legal, privacy, cookies) and the 404. Rules from the v1 landing,
   removed 2026-10-13 (apps/landing/page.css .doc, .todo, .center-page); colours and type from tokens.css, light and dark. */
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:var(--text-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin-inline:auto;padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}

.nav{display:flex;align-items:center;gap:24px;max-width:1200px;margin:0 auto;width:100%;padding:14px 24px}
.brand{display:inline-flex;align-items:center;gap:9px;font:800 21px/1 var(--font-display);letter-spacing:-.02em;color:var(--fg);text-decoration:none}
.brand .sym-off rect{fill:var(--surface-3)}
.brand .sym-on{fill:var(--brand)}
.brand:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{font:var(--text-ui);color:var(--fg-2);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm)}
.nav-links a:hover{color:var(--fg);background:var(--surface-2)}
@media (max-width:640px){.nav{padding:12px 16px}.nav-links{display:none}}

.doc{flex:1;padding-block:40px 80px}
.doc h1{margin:0 0 12px;font:700 clamp(30px,4vw,44px)/1.1 var(--font-display);letter-spacing:-.03em}
.doc .crumbs{font:var(--text-caption);color:var(--fg-3);margin-bottom:20px}
.doc .crumbs a{color:var(--fg-2)}
.doc h2{margin:40px 0 12px;font:700 22px/1.2 var(--font-display);letter-spacing:-.02em;scroll-margin-top:24px}
.doc p,.doc li{margin:0;font:var(--text-body);color:var(--fg-2);max-width:66ch}
.doc p+p,.doc ul+p,.doc p+ul{margin-top:12px}
.doc ul{margin:0;list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.doc a{color:var(--brand-text)}
.doc .lead{font:var(--text-body-lg);color:var(--fg-2)}
.todo{background:var(--diag-soft);color:var(--diag-text);border-radius:4px;padding:1px 6px;font:500 .92em/1.4 var(--font-mono)}

.center-page{flex:1;display:flex;align-items:center;padding-block:64px}
.center-page .wrap{max-width:640px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.center-page h1{margin:0;font:700 clamp(30px,4vw,44px)/1.1 var(--font-display);letter-spacing:-.03em}
.center-page p{margin:0;font:var(--text-body-lg);color:var(--fg-2)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius-md);background:var(--brand);color:var(--on-brand);font:600 15px/1 var(--font-body);text-decoration:none}
.btn:hover{background:var(--brand-hover)}
.btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot .wrap{max-width:1200px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-block:24px;font:var(--text-ui);color:var(--fg-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{color:var(--fg-2);text-decoration:none}
.foot a:hover{color:var(--brand-text);text-decoration:underline}