.legal-main {
    background: var(--gj-light);
    color: var(--gj-secondary);
}

.legal-hero {
    padding: 96px var(--gj-gutter) 72px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--gj-primary) 96%, transparent), color-mix(in srgb, var(--gj-primary) 76%, transparent)),
        url("/images/home/hero.avif") center / cover;
    color: var(--gj-light);
}

.legal-hero__inner {
    width: 100%;
    max-width: var(--gj-container);
    margin: 0 auto;
}

.legal-hero__eyebrow {
    margin: 0 0 14px;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.legal-hero h1 {
    margin: 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 0.95;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.legal-hero p:last-child {
    max-width: 760px;
    margin: 24px 0 0;
    color: color-mix(in srgb, var(--gj-light) 90%, transparent);
    font-size: 20px;
    line-height: 1.6;
}

.legal-content {
    padding: 72px var(--gj-gutter) 96px;
}

.legal-content__inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

.legal-card {
    padding: 32px;
    border: 1px solid color-mix(in srgb, var(--gj-primary) 75%, transparent);
    border-radius: 20px;
    background: var(--gj-light);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--gj-secondary) 8%, transparent);
}

.legal-card h2 {
    margin: 0 0 16px;
    color: var(--gj-primary);
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.legal-card p {
    margin: 0 0 14px;
    color: var(--gj-secondary);
    font-size: 16px;
    line-height: 1.7;
}

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

.legal-card a {
    color: var(--gj-primary);
    font-weight: 800;
    text-decoration: none;
}

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

@media (max-width: 640px) {
    .legal-hero {
        padding: 72px var(--gj-gutter) 56px;
    }

    .legal-content {
        padding: 56px var(--gj-gutter) 80px;
    }

    .legal-card {
        padding: 24px;
    }
}