/* ============================================================
   LEGAL DOCUMENTS
   ============================================================ */

   .legal-page {
    min-height:
        100vh;

    padding:
        32px 20px 60px;

    background:
        var(--page-background);
}

.legal-document {
    width:
        min(
            100%,
            850px
        );

    margin:
        0 auto;

    padding:
        42px 48px;

    border:
        1px solid var(--border);

    border-radius:
        24px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}

/* ============================================================
   HEADER
   ============================================================ */

.legal-header {
    padding-bottom:
        30px;

    border-bottom:
        1px solid var(--border);
}

.legal-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        34px;

    color:
        var(--text);

    font-size:
        15px;

    font-weight:
        800;

    text-decoration:
        none;
}

.legal-brand-mark {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--brand);

    color:
        #ffffff;

    font-size:
        11px;

    font-weight:
        800;
}

.legal-title .eyebrow {
    display:
        block;

    margin-bottom:
        8px;
}

.legal-title h1 {
    margin:
        0 0 9px;

    color:
        var(--text);

    font-size:
        clamp(
            32px,
            6vw,
            48px
        );

    letter-spacing:
        -0.05em;
}

.legal-title p {
    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        11px;
}

/* ============================================================
   NOTICE
   ============================================================ */

.legal-notice {
    margin:
        24px 0;

    padding:
        15px 17px;

    border:
        1px solid color-mix(
            in srgb,
            var(--yellow) 30%,
            var(--border)
        );

    border-radius:
        13px;

    background:
        var(--yellow-soft);
}

.legal-notice strong {
    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--yellow);

    font-size:
        11px;
}

.legal-notice p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        10px;

    line-height:
        1.6;
}

/* ============================================================
   CONTENT
   ============================================================ */

.legal-content {
    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.8;
}

.legal-content section {
    padding:
        28px 0;

    border-bottom:
        1px solid var(--border);
}

.legal-content section:first-child {
    padding-top:
        8px;
}

.legal-content section:last-child {
    border-bottom:
        0;

    padding-bottom:
        8px;
}

.legal-content h2 {
    margin:
        0 0 10px;

    color:
        var(--text);

    font-size:
        19px;

    line-height:
        1.3;

    letter-spacing:
        -0.03em;
}

.legal-content h3 {
    margin:
        18px 0 6px;

    color:
        var(--text);

    font-size:
        13px;
}

.legal-content p {
    margin:
        0 0 12px;
}

.legal-content p:last-child {
    margin-bottom:
        0;
}

.legal-content ul {
    margin:
        8px 0 14px;

    padding-left:
        21px;
}

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

.legal-content strong {
    color:
        var(--text);
}

.legal-content blockquote {
    margin:
        14px 0;

    padding:
        12px 15px;

    border-left:
        3px solid var(--brand);

    border-radius:
        0 9px 9px 0;

    background:
        var(--surface-soft);

    color:
        var(--text);

    font-size:
        12px;

    font-weight:
        700;
}

.legal-content pre {
    overflow-x:
        auto;

    margin:
        14px 0;

    padding:
        13px 15px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        var(--surface-soft);
}

.legal-content code {
    color:
        var(--brand);

    font-family:
        monospace;

    font-size:
        11px;
}

/* ============================================================
   FOOTER
   ============================================================ */

.legal-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin-top:
        28px;

    padding-top:
        22px;

    border-top:
        1px solid var(--border);
}

.legal-footer a {
    color:
        var(--brand);

    font-size:
        11px;

    font-weight:
        700;

    text-decoration:
        none;
}

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

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 650px) {

    .legal-page {
        padding:
            10px;
    }

    .legal-document {
        padding:
            27px 21px;

        border-radius:
            18px;
    }

    .legal-brand {
        margin-bottom:
            26px;
    }

    .legal-content {
        font-size:
            12px;
    }

    .legal-content h2 {
        font-size:
            17px;
    }

    .legal-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}