/* ============================================================================
   Legal documents — privacy.html, terms.html
   ----------------------------------------------------------------------------
   Loaded after tokens.css and landing.css: the nav bar, the footer and every
   colour come from those. This file only adds what a long read needs — a
   narrow measure, a sticky contents rail, and prose rhythm.

   Nothing here animates. landing.js finds no clock, no menu and no accordion
   on these pages and quietly does nothing, which is why they share the script.
   ========================================================================== */

/* ------------------------------------------------------------------- head */

.doc-head {
    padding-block: clamp(var(--sp-7), 5vw, 4.5rem) clamp(var(--sp-5), 3vw, var(--sp-6));
    border-bottom: 1px solid var(--border-hairline);
}

.doc-head__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.doc-head__lede {
    color: var(--text-secondary);
    max-width: 60ch;
}

.doc-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-4);
    margin: 0;
    padding-top: var(--sp-2);
}

/* --------------------------------------------------------------- document */

.doc {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(var(--sp-6), 5vw, var(--sp-8));
    padding-block: clamp(var(--sp-7), 5vw, 4.5rem);
    align-items: start;
}

/* Contents rail. Sticky under the nav bar so the reader keeps their place in
   a document that is mostly one long column. */
.toc {
    position: sticky;
    top: calc(60px + var(--sp-5));
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.toc__title {
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-hairline);
}

.toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    counter-reset: toc;
}

.toc a {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    font-size: var(--t-caption);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-relay);
}

.toc a::before {
    counter-increment: toc;
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--tr-label);
    color: var(--c-signal-ink);
    padding-top: 0.15em;
    flex: none;
}

.toc a:hover {
    color: var(--text-primary);
}

@media (max-width: 900px) {
    .doc {
        grid-template-columns: minmax(0, 1fr);
    }

    .toc {
        position: static;
        padding: var(--sp-5);
        background: var(--surface-raised);
        border: 1px solid var(--border-hairline);
        border-radius: var(--r-lg);
    }
}

/* ------------------------------------------------------------------ prose
   A legal page is read in fragments, so every section is anchored and the
   numbering is visible rather than implied by order.
   ------------------------------------------------------------------------ */

.prose {
    max-width: 68ch;
    counter-reset: sec;
}

.prose section + section {
    margin-top: clamp(var(--sp-6), 4vw, var(--sp-7));
    padding-top: clamp(var(--sp-5), 3vw, var(--sp-6));
    border-top: 1px solid var(--border-hairline);
}

.prose h2 {
    display: flex;
    gap: var(--sp-4);
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    scroll-margin-top: calc(60px + var(--sp-5));
}

.prose h2::before {
    counter-increment: sec;
    content: counter(sec, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-label);
    color: var(--c-signal-ink);
    padding-top: 0.35em;
    flex: none;
}

.prose h3 {
    margin: var(--sp-5) 0 var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--t-body-l);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

.prose p {
    margin: 0 0 var(--sp-4);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose strong {
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
}

.prose a:not(.btn) {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-strong);
    transition: text-decoration-color var(--dur-fast) var(--ease-relay);
}

.prose a:not(.btn):hover {
    text-decoration-color: var(--c-signal);
}

.prose ul {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.prose ul li {
    position: relative;
    padding-left: var(--sp-5);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 12px;
    height: 1px;
    background: var(--c-patch);
}

/* Definition rows — "which channel carries what" tables read better as pairs
   than as a real table at this width. */
.prose dl {
    margin: 0 0 var(--sp-4);
    border-top: 1px solid var(--border-hairline);
}

.prose dl > div {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-3);
    border-bottom: 1px solid var(--border-hairline);
}

.prose dt {
    margin: 0;
    font-size: var(--t-body-s);
    font-weight: var(--fw-semibold);
}

.prose dd {
    margin: 0;
    font-size: var(--t-body-s);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

@media (max-width: 560px) {
    .prose dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-1);
    }
}

/* A callout for the one paragraph in each document that answers the question
   the reader actually arrived with. */
.callout {
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
    background: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-left: 2px solid var(--c-patch);
    border-radius: var(--r-md);
}

.callout :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------- fill
   Deliberately loud. These are the facts only the company can supply, and a
   placeholder that blends in is a placeholder that ships. */

.fill {
    padding: 0.05em 0.35em;
    border-bottom: 1px dashed var(--c-signal-ink);
    background: rgba(13, 115, 119, 0.14);
    color: var(--c-signal-ink);
    font-size: 0.95em;
    font-weight: var(--fw-medium);
}