/* ============================================================
   Legal page (D80). No Figma frame: built to defaults from the
   site's tokens. A heading under the fixed bar, then a reading column
   for the page's own content (headings, lists, tables, and the
   Complianz cookie policy shortcode).
   ============================================================ */

/* The heading clears the fixed bar (80px on desktop, 70 on tablet, 56 on mobile) */
.legal__head { padding: 160px var(--space-gutter) 0; }
.legal__section { padding: 32px var(--space-gutter) var(--space-section-alt); }
.legal__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}
/* A long document reads best in a column, not the full page width */
.legal__body { max-width: 820px; }

.legal__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
}
.legal__updated {
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-logo-grey);
}

/* ── The content ──────────────────────────────────────────── */
.legal__body > * + * { margin-top: 16px; }
.legal__body > :is(h2, h3, h4) { margin-top: 40px; }
.legal__body > :is(h2, h3, h4) + * { margin-top: 12px; }
.legal__body > :first-child { margin-top: 0; }

.legal__body :is(p, li, td, th, dd, dt) {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
.legal__body p { margin: 0; }

.legal__body :is(h2, h3) {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text);
}
.legal__body h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--color-text);
}

.legal__body :is(ul, ol) { margin: 0; padding-left: 24px; }
.legal__body li + li { margin-top: 8px; }
.legal__body ul { list-style: disc; }
.legal__body ol { list-style: decimal; }

.legal__body a { color: var(--color-primary); text-decoration: underline; }
.legal__body a:hover { color: var(--color-primary-hover); }
.legal__body a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.legal__body strong { font-weight: var(--weight-heavy); }

/* Tables (the cookie policy lists every cookie in one): scroll sideways inside the column rather than push the page wider */
.legal__body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.legal__body :is(th, td) {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-surface-tint);
}
.legal__body th { background: var(--color-surface-tint); font-weight: var(--weight-heavy); }

@media (max-width: 1024px) {
    .legal__head { padding-top: 130px; }
    .legal__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .legal__body :is(h2, h3) {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .legal__body h4 {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
}
@media (max-width: 767px) {
    .legal__head { padding-top: 110px; }
    .legal__body > :is(h2, h3, h4) { margin-top: 32px; }
}