@layer block {
    .how-it-works {
        padding-block: var(--space-8);
        padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2));
        border-bottom: 1px solid var(--color-border);
        text-align: center;

        & .how-it-works__eyebrow {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            font-weight: var(--weight-label);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color-accent);
        }

        & .how-it-works__heading {
            margin-top: var(--space-1);
            font-family: var(--font-display);
            font-size: var(--text-headline-md);
            font-weight: var(--weight-display);
            color: var(--color-ink);
            letter-spacing: -0.01em;
        }

        & .how-it-works__list {
            list-style: none;
            margin-top: var(--space-6);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
            gap: var(--space-5);
            text-align: left;
        }

        & .how-it-works__step {
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }

        & .how-it-works__number {
            font-family: var(--font-display);
            font-size: var(--text-headline-md);
            font-weight: var(--weight-display);
            color: var(--color-accent);
        }

        & .how-it-works__title {
            font-family: var(--font-ui);
            font-size: var(--text-body-lg);
            font-weight: var(--weight-label);
            color: var(--color-ink);
        }

        & .how-it-works__description {
            font-family: var(--font-body);
            font-size: var(--text-body-md);
            line-height: var(--leading-body-md);
            color: var(--color-text-muted);
        }
    }
}