/* The written pages: privacy and terms.
   A large title over two columns - the contents list, held in view on wide
   screens, and the text at a reading measure. Section numbers are grey and
   quiet; the one being read turns the brand colour in the list. Tokens from
   ds.css only, so both themes follow. */

.legal {
    position: relative;
    z-index: 3;
    max-width: 1120px;
    margin: 0 auto;
    padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) var(--sp-20) clamp(64px, 12vh, 140px);
}

/* ── Head: the switch, the title, the date ── */

.legal__head {
    padding-bottom: clamp(40px, 7vh, 72px);
    border-bottom: 1px solid var(--color-line);
}

.legal__switch {
    display: inline-flex;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--color-line);
    border-radius: var(--r-pill);
}
.legal__switch a {
    padding: var(--sp-8) var(--sp-18);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--color-text-label);
    text-decoration: none;
    transition: color .2s, background-color .2s;
}
.legal__switch a:hover { color: var(--color-text); }
.legal__switch a[aria-current] { background: var(--color-surface); color: var(--color-text); }

.legal h1 {
    margin-top: clamp(28px, 5vh, 48px);
    font-weight: var(--fw-m);
    font-size: clamp(48px, 8vw, 104px);
    line-height: .95;
    letter-spacing: var(--ls-6);
    color: var(--color-text);
}

.legal__meta {
    margin-top: var(--sp-20);
    font-size: var(--fs-sm);
    color: var(--color-text-label);
}
.legal__meta span { white-space: nowrap; }

/* dense text runs under the header here, so its band fades over the whole
   header height on an eased curve: slow at first, so the wordmark keeps a
   near-solid ground, and quicker towards the bottom edge */
body:has(.legal) #header::before {
    background: linear-gradient(to bottom,
        var(--color-bg) 0,
        var(--color-bg) calc(100% - var(--header-h)),
        color-mix(in srgb, var(--color-bg) 94%, transparent) calc(100% - var(--header-h) * .75),
        color-mix(in srgb, var(--color-bg) 78%, transparent) calc(100% - var(--header-h) * .5),
        color-mix(in srgb, var(--color-bg) 42%, transparent) calc(100% - var(--header-h) * .25),
        transparent 100%);
}

/* ── Body: contents | sections ── */

.legal__grid {
    display: grid;
    grid-template-columns: 200px minmax(0, 680px);
    justify-content: space-between;
    gap: clamp(40px, 6vw, 120px);
    padding-top: clamp(40px, 7vh, 72px);
}

.legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-30));
    align-self: start;
}
.legal__toc ol { list-style: none; display: grid; gap: var(--sp-2); }
.legal__toc a {
    display: flex;
    gap: var(--sp-15);
    padding: var(--sp-7) 0;
    font-size: var(--fs-sm);
    color: var(--color-text-label);
    text-decoration: none;
    transition: color .2s;
}
.legal__toc a span { color: var(--color-text-faint); font-variant-numeric: tabular-nums; transition: color .2s; }
.legal__toc a:hover,
.legal__toc a[aria-current] { color: var(--color-text); }
.legal__toc a[aria-current] span { color: var(--color-cognitive); }

.legal__sec { scroll-margin-top: calc(var(--header-h) + var(--sp-30)); padding-bottom: clamp(40px, 6vh, 56px); }
.legal__sec + .legal__sec { padding-top: clamp(40px, 6vh, 56px); border-top: 1px solid var(--color-line); }
.legal__sec:last-child { padding-bottom: 0; }

.legal h2 {
    display: flex;
    align-items: baseline;
    gap: var(--sp-16);
    font-weight: var(--fw-m);
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.1;
    letter-spacing: var(--ls-3);
    color: var(--color-text);
}
.legal__no {
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    font-weight: var(--fw-r);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-faint);
}

.legal h3 {
    margin-top: var(--sp-30);
    font-weight: var(--fw-m);
    font-size: var(--fs-md);
    color: var(--color-text);
}

.legal p,
.legal li {
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-muted);
}
.legal p { margin-top: var(--sp-16); }

.legal__doc a:not(.button) {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--color-line);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s;
}
.legal__doc a:not(.button):hover { text-decoration-color: currentColor; }

/* lists: a small brand dot instead of the browser's bullet */
.legal__list { margin-top: var(--sp-16); list-style: none; display: grid; gap: var(--sp-10); }
.legal__list li { position: relative; padding-left: 22px; }
.legal__list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-cognitive);
}

/* who else sees the data: one tile per party */
.legal__cards {
    margin-top: var(--sp-20);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-10);
}
.legal__cards li {
    display: grid;
    align-content: start;
    gap: var(--sp-4);
    padding: var(--sp-18) var(--sp-20);
    border-radius: var(--r-item);
    background: var(--color-surface);
}
.legal__cards b { font-weight: var(--fw-m); font-size: var(--fs-md); line-height: 1.3; color: var(--color-text); }
.legal__cards span { font-size: var(--fs-sm); line-height: 1.4; color: var(--color-text-label); }

.legal__mail { margin-top: var(--sp-20); }

/* one column: the contents list goes, the switch and the title stay */
@media (max-width: 860px) {
    .legal { padding-top: calc(var(--header-h) + var(--sp-20)); }
    .legal__grid { grid-template-columns: minmax(0, 1fr); }
    .legal__toc { display: none; }
    .legal__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legal p, .legal li { font-size: var(--fs-md); }
}