/* ============================================================
   Legal sheets
   ------------------------------------------------------------
   Read mode. Same room as Duelight, but the job here is a person
   getting through a long document without losing their place, so
   everything decorative comes off: one column at a comfortable
   measure, numbered clauses in the margin, and a contents list
   that stays put on a wide screen.
   ============================================================ */

.doc { padding-top: calc(var(--rail) + clamp(46px, 7vh, 86px)); padding-bottom: clamp(64px, 8vw, 110px); }

.doc-grid {
    max-width: var(--sheet);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: clamp(30px, 5vw, 74px);
    align-items: start;
}

/* ── Head ──────────────────────────────────────────────────── */

.doc-head { grid-column: 1 / -1; padding-bottom: 22px; border-bottom: 1px solid var(--hair); margin-bottom: clamp(30px, 4vw, 50px); }
.doc-head h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-variation-settings: 'wdth' 84; margin-bottom: 14px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; }

/* ── Contents ──────────────────────────────────────────────── */

.toc { position: sticky; top: calc(var(--rail) + 26px); }
.toc h2 { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 14px; }
.toc ol { list-style: none; counter-reset: c; }
.toc li { counter-increment: c; }

.toc a {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--ink-3);
    transition: color 0.2s;
}
.toc a::before { content: counter(c, decimal-leading-zero); font-family: var(--mono); font-size: 0.688rem; padding-top: 2px; flex: none; opacity: 0.7; }
.toc a:hover { color: var(--ink); }
/* The contents list is the main way through a long document on a phone,
   where there is no hover to tell you a line took the tap. */
.toc a:active { color: var(--ink); background: rgba(255, 255, 255, 0.06); transition-duration: var(--press); }

/* ── Body ──────────────────────────────────────────────────── */

.doc-body { max-width: 68ch; }
.doc-body > p:first-of-type { font-size: 1.06rem; color: var(--ink-2); }

.doc-body section + section { margin-top: clamp(34px, 4vw, 50px); }
.doc-body h2 { font-size: clamp(1.18rem, 1.7vw, 1.42rem); margin-bottom: 14px; scroll-margin-top: calc(var(--rail) + 26px); }
.doc-body p { color: var(--ink-2); margin-bottom: 14px; line-height: 1.68; }
.doc-body p:last-child { margin-bottom: 0; }
.doc-body a { color: var(--cyan); text-underline-offset: 3px; text-decoration: underline; text-decoration-thickness: 1px; }
.doc-body a:hover { color: var(--ink); }

.doc-body ul { list-style: none; margin: 0 0 16px; }
.doc-body li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--ink-2); line-height: 1.62; }
.doc-body li::before { content: ''; position: absolute; left: 2px; top: 0.72em; width: 6px; height: 1px; background: var(--ink-3); }

/* The single most useful thing on a privacy page: a short answer
   before the long one. */
.summary {
    padding: 22px 24px;
    margin-bottom: clamp(30px, 4vw, 44px);
    border-radius: var(--r-l);
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.summary p { color: var(--ink); font-size: 1rem; margin: 0; }
.summary p + p { margin-top: 10px; color: var(--ink-2); font-size: 0.938rem; }

.doc-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: clamp(38px, 4vw, 54px); font-size: 0.938rem; color: var(--ink-2); transition: color 0.2s; }
.doc-back:hover { color: var(--ink); }
.doc-back:active { color: var(--ink); transform: translateX(-2px); transition-duration: var(--press); }
.doc-body a:active { color: var(--ink); transition-duration: var(--press); }
.doc-back svg { width: 17px; height: 17px; transform: scaleX(-1); }

@media (max-width: 900px) {
    .doc-grid { grid-template-columns: 1fr; }
    .toc { position: static; padding-bottom: 26px; border-bottom: 1px solid var(--hair-2); }
    .toc ol { columns: 2; column-gap: 26px; }
}

@media (max-width: 520px) {
    .toc ol { columns: 1; }
}