@layer components {
    .privacy {
        padding-block: var(--space-l);
        max-inline-size: 70ch;

        & .privacy__title {
            font-size: var(--size-step-3);
        }

        & .privacy__body {
            margin-block-start: var(--space-l);

            & > * + * {
                margin-block-start: var(--space-s);
            }

            & h2 {
                margin-block-start: var(--space-xl);
                font-size: var(--size-step-2);
            }

            & h3 {
                margin-block-start: var(--space-l);
                font-size: var(--size-step-1);
            }

            & ul,
            & ol {
                padding-inline-start: var(--space-m);
            }

            & li + li {
                margin-block-start: var(--space-2xs);
            }

            & a {
                color: var(--color-text);
                text-decoration-color: var(--color-accent);
                text-underline-offset: 0.2em;
            }

            /* A table on a phone scrolls inside itself, never the page. */
            & table {
                display: block;
                overflow-x: auto;
                border-collapse: collapse;
                font-size: var(--size-step--1);
            }

            & th,
            & td {
                padding: var(--space-2xs) var(--space-xs);
                border: 1px solid var(--color-border);
                text-align: start;
                vertical-align: top;
            }

            & th {
                background: var(--color-surface-raised);
            }
        }
    }
}