@layer components {

    /* ── Steps row ──────────────────────────────────────────────────
     Process explainer. A step is a third of the row whatever the
     count: fewer than three leave the rest of the row empty, more than
     three share it. The hairline is each step's own 1px shadow meeting
     across the gap, not a painted grid background, so an empty cell
     stays page background. */
    .c-how {
        max-width: 80rem;
        margin-inline: auto;
        padding: var(--section-space) var(--space-7);
    }

    @media (max-width: 900px) {
        .c-how { padding-inline: var(--space-5); }
    }

    .c-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 2px;
    }

    @media (max-width: 900px) {
        .c-steps { grid-template-columns: 1fr; grid-auto-flow: row; }
    }

    .c-step {
        background: var(--color-surface);
        box-shadow: 0 0 0 1px var(--color-line);
        padding: var(--space-7) var(--space-6);
    }

    .c-step__num {
        font-family: var(--font-display);
        font-size: 3rem;
        font-weight: 300;
        color: var(--color-accent);
        line-height: 1;
        letter-spacing: -0.02em;
        margin-bottom: var(--space-5);
    }

    .c-step__title {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-body-lg);
        margin-bottom: var(--space-2);
    }

    .c-step__copy {
        font-size: var(--fs-ui);
        color: var(--color-ink-soft);
    }
}