/* =================================================================== LEGAL section css =================================================================== */
/* Long-form policy text (Privacy policy, Terms of use) on a white panel. */
.legal {
    --notch-space: 90px;   /* badge + notch padding */

    & .legal__panel {
        position: relative;
        max-width: 900px;
        margin-inline: auto;
        padding: var(--sp60);
        background: var(--white);
        border-radius: var(--r-xl);
    }

    & .legal__notch {
        --notch-r: var(--r-xl);

        & .notch-badge { width: 70px; height: 70px; background: var(--primary); color: var(--white); }
    }

    & .legal__block + .legal__block {
        margin-top: var(--sp35);
        padding-top: var(--sp35);
        border-top: 1px solid var(--line);
    }

    & .legal__heading {
        margin-bottom: var(--sp12);
        padding-right: var(--notch-space);
        font-size: var(--f25);
    }

    & .legal__block a {
        color: var(--primary);
        text-decoration: underline;

        &:hover { color: var(--ink); }
    }
}

/* =================================================================== LEGAL responsive =================================================================== */
@media (max-width: 575.98px) {
    .legal {
        & .legal__panel { padding: var(--sp35) var(--sp20); border-radius: var(--r-lg); }
        --notch-space: 72px;

        & .legal__notch { --notch-r: var(--r-lg); }
        & .legal__notch .notch-badge { width: 55px; height: 55px; }
    }
}