@layer components {
    .proof {
        text-align: center;
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);

        & .proof__card {
            max-width: 32rem;
            margin: var(--space-l) auto 0;
            padding: var(--space-l);
            border: 2px dashed var(--color-border);
            border-radius: var(--radius-l);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-s);
        }

        & .proof__icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            border-radius: var(--radius-full);
            background: var(--gradient-brand-soft);
            color: var(--color-accent-strong);
        }

        & .proof__text {
            color: var(--color-text-muted);
            font-weight: 500;
        }
    }
}