.legal-page {
    /* Reserve the fixed header; the back link's 44px target adds space above its text. */
    padding-top: calc(var(--site-header-height) - 1px + var(--space-24));
}

@media (min-width: 1024px) {
    .legal-page {
        padding-top: calc(var(--site-header-height) - 1px + var(--space-48));
    }
}

.legal-page__content {
    display: grid;
    gap: var(--space-32);
    min-width: 0;
}

.legal-page__content > *,
.legal-page__content section {
    max-width: 80ch;
    min-width: 0;
}

.legal-page__content h1 {
    max-width: 20ch;
    margin-bottom: 0;
}

.legal-page__content h2 {
    position: relative;
    padding-inline-start: var(--space-20);
    font-size: var(--text-h3);
}

.legal-page__content h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: calc(0.5em * var(--line-heading) - var(--space-12));
    width: var(--space-4);
    height: var(--space-24);
    border-radius: var(--radius-8);
    background: var(--color-accent);
}

.legal-page__content > p,
.legal-page__content section > :last-child {
    margin-bottom: 0;
}

.legal-page__content section {
    padding-top: var(--space-32);
    border-top: 1px solid var(--border-divider);
}

.legal-page__content section p {
    color: var(--color-text-secondary);
}

.legal-page__content a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.legal-page__content a:hover,
.legal-page__content a:focus-visible {
    color: var(--color-accent);
    text-decoration-color: currentColor;
}

.legal-page__controller {
    padding: var(--space-20);
    border-inline-start: 2px solid var(--color-accent);
    border-radius: var(--radius-8);
    background: var(--color-canvas-secondary);
}

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

@media (min-width: 768px) {
    .legal-page__controller {
        padding: var(--space-24);
    }
}

.legal-page__back {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: var(--button-height-small);
}

.legal-page--vop h1,
.legal-page--vop h2,
.legal-page--vop .copy-email {
    overflow-wrap: anywhere;
}

.legal-page--vop .legal-vop__contents ul {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-page--vop .legal-vop__contents a {
    display: inline-flex;
    align-items: center;
    min-height: var(--button-height-small);
}

@media (min-width: 768px) {
    .legal-page--vop .legal-vop__contents ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-32);
    }
}

.legal-page--vop .copy-email {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

.legal-page--vop .copy-email__row {
    flex-wrap: wrap;
}

.legal-page--vop .copy-email__status {
    display: block;
}

.legal-page--vop .legal-vop__blank {
    overflow-wrap: anywhere;
    color: var(--color-text-muted);
}

@media (max-width: 1023px) {
    .legal-page--vop .legal-vop__contents,
    .legal-page--vop section p:has(a, .copy-email) {
        /* Keep interactive text outside the existing Back to Top lane. */
        padding-inline-end: calc(var(--button-height-small) + var(--space-12));
    }
}