/* Legal pages — privacy policy and imprint.
   Long-form reading layout: one narrow column, generous line height, and
   tables that scroll on their own rather than pushing the page sideways. */

.legal-page {
    padding: calc(var(--header-h) + 56px) 0 96px;
    background: var(--c-bg);
}

.legal-page .container-narrow { max-width: 760px; }

/* ---------------------------------------------------------------- hero */

.legal-hero { margin-bottom: 40px; }

.legal-hero h1 {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 16px;
}

.legal-lede {
    font-size: var(--fs-h4);
    line-height: 1.6;
    color: var(--c-text-soft);
    margin: 0 0 12px;
}

.legal-updated {
    font-size: var(--fs-eyebrow);
    color: var(--c-text-muted);
    margin: 0;
}

/* ------------------------------------------------------------ contents */

.legal-toc {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-bottom: 48px;
}
.legal-toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: 32px;
    font-size: var(--fs-small);
    line-height: 2;
}
.legal-toc a { color: var(--c-text-soft); }
.legal-toc a:hover { color: var(--c-grad-from); }

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

/* ------------------------------------------------------------ sections */

.legal-section {
    margin-bottom: 52px;
    /* the sticky header must not cover a heading jumped to from the ToC */
    scroll-margin-top: calc(var(--header-h) + 20px);
}

.legal-section h2 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c-border-soft);
}

.legal-section h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin: 32px 0 12px;
}

.legal-section h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    margin: 30px 0 8px;
}

.legal-section h5 {
    font-size: var(--fs-body);
    font-weight: 700;
    margin: 0 0 8px;
}

.legal-section p {
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--c-text-soft);
    margin: 0 0 16px;
}

.legal-section a { color: var(--c-grad-from); text-decoration: underline; }
.legal-section a:hover { color: var(--c-grad-to); }

.legal-section strong { color: var(--c-text); font-weight: 600; }

.legal-section code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

.legal-list {
    margin: 0 0 18px;
    padding-left: 22px;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--c-text-soft);
}
.legal-list li { margin-bottom: 10px; }

.legal-address {
    font-style: normal;
    font-size: var(--fs-body);
    line-height: 1.9;
    color: var(--c-text-soft);
    background: var(--c-bg-soft);
    border-left: 3px solid var(--c-grad-from);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 18px 22px;
    margin: 0 0 20px;
}

.legal-note {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: var(--fs-small) !important;
}

/* Unconfirmed facts. Loud on purpose: a placeholder that looks like body text
   is a placeholder that ships to production unnoticed. */
.legal-todo {
    display: inline-block;
    background: #FFF4CC;
    border: 1px dashed #C9A227;
    border-radius: 4px;
    padding: 1px 8px;
    color: #7A5E00;
    font-size: .92em;
    font-weight: 600;
}

/* ------------------------------------------------------- cookie tables */

.legal-cat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.legal-pill {
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: #E8F0FE;
    color: #1A56C4;
}
.legal-pill-opt { background: #F3E8FE; color: #6B21A8; }

.legal-cat-desc {
    font-size: var(--fs-small) !important;
    margin-bottom: 10px !important;
}

.legal-svc {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin: 18px 0 22px;
}
.legal-svc p { font-size: var(--fs-small); margin-bottom: 10px; }
.legal-svc-meta { font-size: var(--fs-eyebrow) !important; line-height: 1.7; }

.legal-table-wrap {
    overflow-x: auto;
    margin-top: 14px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
}

.legal-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: var(--fs-eyebrow);
}
.legal-table th,
.legal-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border-soft);
    vertical-align: top;
    line-height: 1.6;
}
.legal-table th {
    background: var(--c-bg-soft);
    font-weight: 700;
    color: var(--c-text);
    white-space: nowrap;
}
.legal-table td { color: var(--c-text-soft); }
.legal-table tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------- mobile */

@media (max-width: 700px) {
    .legal-page { padding-top: calc(var(--header-h) + 32px); }
    .legal-section h2 { font-size: 22px; }
}