@layer components {
    .security-and-data {
        text-align: center;
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);
        background: var(--color-surface-mixed);

        & .security-and-data__badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: var(--radius-full);
            background: var(--gradient-brand-strong);
            color: var(--color-on-brand);
            box-shadow: var(--shadow-glow);
            margin-block-end: var(--space-s);
        }

        & .security-and-data__claim {
            max-width: 42rem;
            margin-inline: auto;
            font-weight: 600;
            font-size: 1.1rem;
        }

        & .security-and-data__note {
            max-width: 40rem;
            margin-inline: auto;
            color: var(--color-text-muted);
        }
    }
}