@layer components {
    .eyebrow {
        display: inline-flex;
        align-items: flex-start;
        gap: 10px;
        color: var(--fg-accent);
        font-family: var(--font-mono);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .eyebrow__icon {
        flex: none;
        margin-top: 3px;
    }

    .prose-legal {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .prose-legal > .h1 {
        margin-block: 12px 16px;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .prose-legal > h2 {
        margin-block: 32px 8px;
        font-size: 21px;
        line-height: 1.3;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .prose-legal > p {
        margin-bottom: 12px;
    }

    .prose-legal > p:has(+ ul) {
        margin-bottom: 0;
    }

    .prose-legal > ul {
        margin-bottom: 12px;
        padding-left: 22px;
        list-style: disc;
    }

    .prose-legal > ul > li + li {
        margin-top: 6px;
    }

    .prose-legal > ul > li::marker {
        color: var(--fg-accent);
    }
}