.privacy-policy-hero {
    background: rgba(22, 41, 73, 0.9) url("../../images/nav-bg.7519c9d5e3ed.png") center/cover no-repeat;
    background-blend-mode: multiply;
    padding-bottom: var(--panel-space);
    /* .page-hero's 500px is sized for a tagline above a form; a title needs less. */
    min-height: 0;
}

.privacy-policy-card {
    position: relative;
    margin-top: calc(var(--panel-space) * -1);
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    padding: 3rem;
}

/* Long-form text. The landing CSS has no styles for it: Tailwind's preflight
   strips list bullets, h2 is sized for section banners, and links are coral
   with no underline. */
.legal-prose {
    color: var(--bs-body-color);
    line-height: 1.75;
}

.legal-prose h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    /* The header is fixed, so an #anchor would land underneath it. */
    scroll-margin-top: calc(var(--header-size) + 1rem);
}

.legal-prose ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.legal-prose li + li {
    margin-top: 0.375rem;
}

.legal-prose strong {
    color: var(--bs-dark);
    font-weight: 600;
}

.legal-prose a {
    color: var(--bs-secondary);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.legal-prose a:hover {
    color: var(--bs-primary);
}

.legal-prose address {
    font-style: normal;
}

.legal-prose > :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .privacy-policy-card {
        padding: 2rem 1.5rem;
    }

    .legal-prose h2 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }
}

@media (max-width: 576px) {
    .privacy-policy-card {
        padding: 1.5rem 1.25rem;
        border-radius: 15px;
    }
}