.legal-page {
        min-height: 80vh;
        padding: 80px 20px 100px;
        background: var(--background-color, #fff);
    }

    .legal-content {
        max-width: 800px;
        margin: 0 auto;
    }

    .legal-content h1 {
        font-size: clamp(32px, 5vw, 48px);
        color: var(--color-darkgrey, #15171A);
        margin-bottom: 16px;
        font-weight: 700;
    }

    .legal-content .last-updated {
        font-family: var(--font-mono, monospace);
        font-size: 13px;
        color: var(--color-midgrey, #738a94);
        margin-bottom: 40px;
    }

    .legal-content h2 {
        font-size: 24px;
        color: var(--color-darkgrey, #15171A);
        margin: 40px 0 16px;
        padding-top: 20px;
        border-top: 1px solid var(--color-lightgrey, #e5eff5);
        font-weight: 600;
    }

    .legal-content h2:first-of-type {
        border-top: none;
        padding-top: 0;
    }

    .legal-content h3 {
        font-size: 18px;
        color: var(--color-darkgrey, #15171A);
        margin: 24px 0 12px;
        font-weight: 600;
    }

    .legal-content p,
    .legal-content li {
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-secondary-text, #394047);
        margin-bottom: 16px;
    }

    .legal-content ul,
    .legal-content ol {
        padding-left: 24px;
        margin-bottom: 24px;
    }

    .legal-content li {
        margin-bottom: 8px;
    }

    .legal-content a {
        color: var(--ghost-accent-color, #FF1A75);
        text-decoration: none;
    }

    .legal-content a:hover {
        text-decoration: underline;
    }

    .legal-content .highlight-box {
        background: rgba(255, 26, 117, 0.05);
        border: 1px solid rgba(255, 26, 117, 0.2);
        border-radius: 8px;
        padding: 20px;
        margin: 24px 0;
    }

    .legal-content .highlight-box p {
        margin-bottom: 0;
    }

    .legal-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 24px 0;
        font-size: 14px;
    }

    .legal-content th,
    .legal-content td {
        text-align: left;
        padding: 12px;
        border: 1px solid var(--color-lightgrey, #e5eff5);
        color: var(--color-secondary-text, #394047);
    }

    .legal-content th {
        background: var(--color-lighter-grey, #f8f8f8);
        color: var(--color-darkgrey, #15171A);
        font-weight: 600;
    }

    .toc {
        background: var(--color-lighter-grey, #f8f8f8);
        border: 1px solid var(--color-lightgrey, #e5eff5);
        border-radius: 8px;
        padding: 24px;
        margin: 24px 0 40px;
    }

    .toc h3 {
        margin-top: 0;
        margin-bottom: 16px;
    }

    .toc ol {
        margin-bottom: 0;
        columns: 2;
        column-gap: 40px;
    }

    .toc li {
        margin-bottom: 8px;
        break-inside: avoid;
    }

    .toc a {
        color: var(--color-secondary-text, #394047);
    }

    .toc a:hover {
        color: var(--ghost-accent-color, #FF1A75);
    }

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

/* ── Dark-theme override (mc-platform) ────────────────────────────────────
 * The original legal-page CSS is light-themed (white bg, dark text, pink Ghost
 * accent) — it clashes with the dark-native site chrome. Re-map it to the MC
 * dark palette so /privacy matches the rest of the site. */
.legal-page {
	background: var(--mc-black, #0a0a0a);
	color: var(--mc-offwhite, #e5e5e5);
}
.legal-content h1,
.legal-content h2,
.legal-content h3 {
	color: var(--mc-white, #fafafa);
}
.legal-content h2 {
	border-top-color: var(--mc-slate, #262626);
}
.legal-content p,
.legal-content li {
	color: var(--mc-offwhite, #e5e5e5);
}
.legal-content .last-updated {
	color: var(--mc-muted, #a3a3a3);
}
.legal-content a {
	color: var(--mc-blue, #3b82f6);
}
.legal-content a:hover {
	color: var(--mc-blue-light, #60a5fa);
}
/* Any light panels (toc, callouts) → dark surfaces. */
.legal-content .toc,
.legal-content table,
.legal-content th,
.legal-content td,
.legal-content pre,
.legal-content code {
	background: var(--mc-charcoal, #171717);
	color: var(--mc-offwhite, #e5e5e5);
	border-color: var(--mc-ghost-gray, #525252);
}