/*-- -------------------------- -->
<---         Legal Pages         -->
<--- -------------------------- -*/

@media only screen and (min-width: 0rem) {
    #legal-hero {
        background: radial-gradient(ellipse at 60% 40%, #1e3a8a 0%, #0f172a 55%, #11150F 100%);
        padding: clamp(6rem, 14vw, 8rem) 1rem 3rem;
        text-align: center;
    }

    #legal-hero .cs-topper {
        color: #3B82F6;
        font-family: 'Barlow', sans-serif;
        font-size: var(--topperFontSize);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
        display: block;
    }

    #legal-hero h1 {
        font-family: 'Barlow', sans-serif;
        font-size: clamp(1.9375rem, 3.9vw, 3rem);
        font-weight: 800;
        color: #F4F6F2;
        text-transform: uppercase;
        margin: 0;
        line-height: 1.15;
    }

    #legal-hero p {
        font-family: 'Satoshi', sans-serif;
        color: #9CA39A;
        font-size: 0.9375rem;
        margin: 0.75rem 0 0;
    }

    #legal-content {
        background-color: #11150F;
        padding: clamp(3rem, 7vw, 5rem) 1rem;
    }

    .legal-body {
        max-width: 48rem;
        margin: 0 auto;
    }

    .legal-body h2 {
        font-family: 'Barlow', sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #F4F6F2;
        margin: 2.5rem 0 1rem;
    }

    .legal-body h2:first-child {
        margin-top: 0;
    }

    .legal-body p {
        font-family: 'Satoshi', sans-serif;
        font-size: 0.9375rem;
        line-height: 1.7;
        color: #C7CCC2;
        margin: 0 0 1rem;
    }

    .legal-body ul {
        margin: 0 0 1rem;
        padding-left: 1.25rem;
    }

    .legal-body li {
        font-family: 'Satoshi', sans-serif;
        font-size: 0.9375rem;
        line-height: 1.7;
        color: #C7CCC2;
        margin-bottom: 0.5rem;
    }

    .legal-body a {
        color: #3B82F6;
        text-decoration: underline;
    }

    .legal-body a:hover {
        color: #6ea1f9;
    }

    .legal-updated {
        font-family: 'Satoshi', sans-serif;
        font-size: 0.8125rem;
        font-style: italic;
        color: #9CA39A;
        margin-top: 3rem;
        border-top: 1px solid #2A3022;
        padding-top: 1.5rem;
    }
}