/* ---------- LEGAL PAGES ---------- */

.legal-page {
    font-family: "Inter", Arial, sans-serif;
    color: #111;
    background: #fcfcfc;
}

.legal-page .site-header {
    position: fixed;

    top: var(--ui-offset);
    left: var(--ui-offset);
    right: var(--ui-offset);
}

.legal-main {
    width: 100%;
    min-height: 100svh;
}

.legal-content {
    max-width: 920px;

    padding:
        clamp(160px, 22vh, 240px)
        var(--reading-pad-x)
        clamp(96px, 14vh, 160px);
}

.legal-content h1 {
    margin: 0 0 clamp(56px, 8vh, 96px);

    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(34px, 3.1vw, 52px);
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.025em;
}

.legal-section + .legal-section {
    margin-top: 48px;
}

.legal-section h2 {
    margin: 0 0 18px;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}

.legal-section p,
.legal-section li,
.legal-section a {
    margin: 0;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 300;
}

.legal-section a {
    color: #111;
    text-decoration: underline;
}


.legal-section h3 {
    margin: 32px 0 12px;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}

.legal-section h4 {
    margin: 24px 0 10px;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 400;
}

.legal-section ul {
    margin: 12px 0 0;
    padding-left: 1.2em;
}

.legal-section li + li {
    margin-top: 0.4em;
}

/* ---------- LEGAL MOBILE ---------- */

@media (max-width: 800px) {

    .legal-page .site-header {
    position: absolute;
        top: 16px;
        left: 16px;
        right: 16px;
    }

    .legal-content {
        max-width: none;

        padding:
            120px
            20px
            72px;
    }

    .legal-content h1 {
        font-size: clamp(34px, 9vw, 48px);
    }

    .legal-section p,
    .legal-section li,
    .legal-section a,
    .legal-section h2,
    .legal-section h3,
    .legal-section h4 {
        font-size: 16.5px;
        line-height: 1.35;
    }

}

/* ---------- LEGAL big screen ---------- */

@media (min-width: 1600px) {

    .legal-section p,
    .legal-section li,
    .legal-section a,
    .legal-section h3 {
        font-size: 15.5px;
        line-height: 1.35;
    }

}

@media (min-width: 2200px) {

   .legal-section p,
    .legal-section li,
    .legal-section a,
    .legal-section h3 {
        font-size: 16px;
    }

}