/* =================================================================== NEXT-STEPS section css ===================================================================

   "What happens next" on thank-you.html — the three beats between the form
   and the day itself.

   No artboard for this page either, so the composition is the reasons band's,
   which is the design's own answer to "a numbered list beside a heading":
   two equal columns on the 100 -> 1820 measure, the display-face number in
   its own 100px column, a 1px --line rule between items and none above the
   first. Nothing here is a new component — it is that block on --cream.
   =================================================================== */
.next-steps {
    padding-block: var(--sectionGap);
    background: var(--cream);

    & .next-steps__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--g100);
        max-width: 100%;
    }

    & .next-steps__intro .section-title-wrap { margin-bottom: var(--sp40); }

    & .next-steps__aside { color: var(--dark-surface); }

    & .next-steps__list {
        display: flex;
        flex-direction: column;
        max-width: 720px;
    }

    & .next-steps__item {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        gap: var(--sp20);
        padding-block: var(--sp40);
        border-top: 1px solid var(--line);

        &:first-child {
            padding-top: 0;
            border-top: 0;
        }
    }

    & .next-steps__num {
        font-family: var(--font-display);
        font-size: var(--f40);
        font-weight: var(--fw-display);
        line-height: var(--lhTight);
        letter-spacing: var(--track-display);
        color: var(--primary);
    }

    & .next-steps__title { margin-bottom: var(--sp15); }

    & .next-steps__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--sp40);
        margin-top: var(--sp50);
    }

    & .next-steps__note {
        font-size: var(--f18);
        color: var(--text);
        opacity: .6;
    }
}

/* =================================================================== responsive =================================================================== */
/* The two columns hold to the tablet breakpoint, the same place the reasons
   pair gives up its split. Below it the heading sits above the list. */
@media (max-width: 991.98px) {
    .next-steps {
        & .next-steps__grid { grid-template-columns: minmax(0, 1fr); }

        & .next-steps__list { max-width: none; }
    }
}

@media (max-width: 767.98px) {
    .next-steps {
        & .next-steps__item {
            grid-template-columns: 70px minmax(0, 1fr);
            gap: var(--sp15);
        }
    }
}

@media (max-width: 575.98px) {
    .next-steps {
        /* the number column costs more than it earns at this measure — it
           goes above the copy rather than squeezing it to nothing */
        & .next-steps__item {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--sp10);
        }

        & .next-steps__foot {
            align-items: flex-start;
            gap: var(--sp25);
        }
    }
}