@layer ds.block {
    .numbered-steps__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
        align-items: start;
    }

    .numbered-steps__intro { display: flex; flex-direction: column; gap: var(--space-4); }

    .numbered-steps__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--font-weight-medium); color: var(--color-heading); }

    .numbered-steps__lead { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-body); line-height: var(--line-height-base); color: var(--color-text); }
    .numbered-steps__lead p { margin: 0; }

    .numbered-steps__list { margin: 0; padding: 0; list-style: none; counter-reset: numbered-step; }

    .numbered-steps__step {
        counter-increment: numbered-step;
        display: flex;
        gap: var(--space-5);
        padding-block: var(--space-5);
        border-bottom: 1px solid color-mix(in srgb, var(--color-heading) 14%, transparent);
    }

    .numbered-steps__step:last-child { border-bottom: none; }

    .numbered-steps__num {
        flex-shrink: 0;
        width: 2.75rem;
        font-family: var(--font-display);
        font-size: var(--text-h3);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
    }

    .numbered-steps__num::before { content: counter(numbered-step, decimal-leading-zero); }

    .numbered-steps__body { display: flex; flex-direction: column; gap: var(--space-2); }

    .numbered-steps__step-title { margin: 0; font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--font-weight-bold); color: var(--color-heading); }

    .numbered-steps__step-text { margin: 0; font-size: var(--text-small); line-height: var(--line-height-base); color: var(--color-text); }

    @media (max-width: 64rem) {
        .numbered-steps__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    }
}