body:has(.legal-section) .navbar {
    position: static;
    background-color: rgb(var(--color-primary));
}

.legal-section {
    background: rgb(var(--color-white));
    color: rgb(var(--color-gray-1));

    > .container {
        padding: var(--space-sections-xs) 0;

        > .legal-section-item {
            scroll-margin-top: 40px;
            margin-top: var(--space-12);

            &:first-child {
                margin-top: 0;
            }

            > h2 {
                font-size: var(--font-size-ml);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-ml);
                margin-bottom: var(--space-4);
                color: rgb(var(--color-gray-1));
            }

            > h3 {
                font-size: var(--font-size-m);
                font-weight: var(--font-weight-bold);
                line-height: var(--line-height-m);
                margin-top: var(--space-8);
                margin-bottom: var(--space-3);
                color: rgb(var(--color-gray-1));
            }

            > h4 {
                font-size: var(--font-size-xs);
                font-weight: var(--font-weight-bold);
                line-height: var(--line-height-s);
                margin-top: var(--space-5);
                margin-bottom: var(--space-2);
                color: rgb(var(--color-gray-1));
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            > p {
                max-width: 100%;
                font-size: var(--font-size-s);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-s);
                opacity: var(--opacity-700);
                margin-bottom: var(--space-2);
            }

                > p.legal-meta {
                    font-size: var(--font-size-xs);
                    color: rgb(var(--color-gray-2));
                    margin-bottom: var(--space-8);
                }

            a {
                color: rgb(var(--color-primary));
                font-weight: var(--font-weight-regular);
            }

                a:hover {
                    text-decoration: underline;
                }

            > .legal-list {
                list-style: none;
                padding-left: var(--space-5);
                margin: 0 0 var(--space-2) 0;

                > li {
                    position: relative;
                    font-family: var(--font-main), sans-serif;
                    font-size: var(--font-size-s);
                    font-weight: var(--font-weight-regular);
                    line-height: var(--line-height-s);
                    opacity: var(--opacity-700);
                    margin-bottom: var(--space-1);

                    > i {
                        display: none;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        left: calc(-1 * var(--space-4));
                        top: 9px;
                        width: 5px;
                        height: 5px;
                        border-radius: 50%;
                        background-color: rgb(var(--color-gray-1));
                    }

                    strong {
                        font-weight: var(--font-weight-bold);
                    }
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .legal-section > .container {
        padding: var(--space-sections-xs) var(--space-4);
    }
}