/* Legal pages on reach.codyn.se: the front page's paper, glass and Geist,
   tuned for long reading. Loaded after landing.css. */
.legal-hero { padding-top: clamp(48px, 9vw, 110px); padding-bottom: 28px; }
.legal-hero h1 { font-weight: 800; font-size: clamp(44px, 7.4vw, 104px); line-height: .96; letter-spacing: -.045em; margin: 18px 0 20px; }
.legal-hero .lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); max-width: 680px; margin: 0; font-weight: 300; }
.legal-hero .stamp { margin-top: 22px; }

.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 40px; }
.legal-toc { position: sticky; top: 96px; padding: 18px; border-radius: 18px; }
.legal-toc ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.legal-toc a:hover { background: rgba(255,255,255,.7); color: var(--ink); }

.legal-doc { padding: clamp(22px, 4vw, 52px); max-width: 860px; }
.legal-doc section + section { margin-top: 40px; padding-top: 34px; border-top: 1px solid rgba(11,15,20,.08); }
.legal-doc h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 14px; scroll-margin-top: 100px; }
.legal-doc h3 { font-size: 17px; font-weight: 600; margin: 22px 0 6px; }
.legal-doc p, .legal-doc li { color: var(--ink-2); font-size: 16px; }
.legal-doc p { margin: 0 0 12px; }
.legal-doc ul { margin: 0 0 12px; padding-left: 20px; }
.legal-doc li { margin: 4px 0; }
.legal-doc a { text-decoration: underline; text-underline-offset: 3px; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc .callout { border-radius: 16px; padding: 16px 18px; background: rgba(255,255,255,.65); border: 1px solid var(--glass-border); margin: 14px 0; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 14px; }
.legal-doc th, .legal-doc td { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(11,15,20,.08); vertical-align: top; color: var(--ink-2); }
.legal-doc th { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.legal-doc .table-scroll { overflow-x: auto; }

/* Data deletion */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 8px; }
.way { padding: 20px; border-radius: 18px; }
.way .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.way h3 { margin: 8px 0 6px; font-size: 18px; }
.way p { margin: 0; font-size: 15px; }
.status-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
.status-form input { flex: 1 1 220px; min-width: 0; font: 500 15px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 13px 14px; border-radius: 6px; border: 1px solid rgba(11,15,20,.18); background: #fff; color: var(--ink); }
.status { display: flex; gap: 12px; align-items: flex-start; }
.status .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--orange); }
.status.done .dot { background: #16a34a; }
.status.missing .dot { background: var(--ink-3); }

@media (max-width: 960px) {
    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { position: static; }
    .ways { grid-template-columns: 1fr; }
}