/* Legal pages (privacy.html, data-deletion.html), on top of ui.css: a slim top bar with the way back, then the
   document as a column of cards. */
body{overflow:auto;background:var(--app)}
.top{position:sticky;top:0;z-index:10;height:var(--head-h);display:flex;align-items:center;padding:0 24px;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(10px);-webkit-backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--line)}
.top .back{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 12px;border-radius:var(--r-md);color:var(--ink);text-decoration:none;
  font-family:var(--font-brand);font-weight:700;font-size:15px;transition:background-color var(--t-fast)}
.top .back:hover{background:var(--hover)}
.top .back svg{width:18px;height:18px;color:var(--stone);flex:none}
.top .back img{width:24px;height:24px;flex:none}
.wrap{width:100%;margin:0 auto;padding:40px 24px 80px}
.legal{max-width:840px;display:grid;gap:16px}
.legal .hero{padding:8px 4px 16px;display:grid;gap:10px}
.legal .hero h1{font-size:30px;font-weight:700;letter-spacing:-.01em}
.legal .meta{color:var(--stone);font-size:14px}
.legal .toc{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.legal .card{display:grid;gap:12px;background:var(--surface);border-radius:var(--r-xl);padding:24px 26px;box-shadow:0 0 0 1px var(--line),var(--sh-xs);scroll-margin-top:72px}
.legal h2{font-size:19px;font-weight:700;margin:0}
.legal h3{font-size:16px;font-weight:600;margin:6px 0 0}
.legal p,.legal li{color:var(--ink-2);font-size:15px;line-height:1.85}
.legal p{margin:0}
.legal ul,.legal ol{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.legal table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.legal th,.legal td{padding:10px 12px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.7}
.legal th+th,.legal td+td{border-inline-start:1px solid var(--line)}
.legal tr:last-child td{border-bottom:0}
.legal th{background:var(--app);font-weight:600;color:var(--ink)}
.legal .tbl{overflow-x:auto}
.legal [lang=en]{font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
.legal [lang=en] h2,.legal [lang=en] h3{font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
.legal a{color:var(--primary);text-decoration:underline;text-decoration-color:rgba(114,50,242,.35);text-underline-offset:3px}
.legal a:hover{text-decoration-color:currentColor}
.legal a.btn{text-decoration:none;color:var(--ink)}
.legal .steps li{padding-inline-start:4px}
.legal code{font-family:var(--font-mono);background:var(--soft);border-radius:6px;padding:1px 6px;font-size:13px;direction:ltr;unicode-bidi:embed}
@media (max-width:640px){
  .top{padding:0 12px}
  .wrap{padding:24px 14px 56px}
  .legal .hero h1{font-size:24px}
  .legal .card{padding:18px 16px}
  .legal p,.legal li{font-size:14.5px}
}