/* =================================================================== REASONS section css =================================================================== */
.reasons {
    /* .band-stair pulls the section up 120px so its white corners climb into
       the intro; the top padding buys that 120px back. */
    position: relative;
    padding-block: calc(var(--sectionGap) + var(--stair2)) calc(var(--sectionGap) * 0.5);
    background: var(--white);
    overflow: clip;

    /* Website.pdf measurement, 100->1820 measure:
         left column   100 ->  725   (625)
         gutter                      (100)
         list column   825 -> 1563   (738)   <- the divider rules run 825->1562
       257px of the measure is unused on the right, hence the 85% cap. On the
       old artboard this column pair started 145px further right. */
    & .reasons__intro{
        position: relative;
        .section-title-wrap{
            margin-bottom: var(--sp40);
        }
    }
    & .reasons__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--g100);
        max-width: 100%;
    }

    & .reasons__aside {/* margin-top: var(--sp20); */color: var(--dark-surface);}

    /* the ASCII chevron that replaced the stepped cream block.
       Measured box on Website.pdf: x190->709, y2745->3215 — it runs past the
       flat bottom of the band and is cut off by the stair below it. */
    /* `min(500px, 66.4%)` against the 33.6% offset: the two always add up to the
       column's own right edge, so the chevron can never cross into the list. At
       a fixed 500px it did — measured 22px into the copy at 1440, 46px at 1366
       and 101px at 1200, sitting behind item 03 and the divider rules. Above
       1600 the clamp is inert and the art stays exactly 500px. */
    & .reasons__art-wrap {
        bottom: calc(var(--sectionGap) * -1);
        left: 33.6%;
        width: min(500px, 66.4%);
    }

    /* same reason as .outcomes__head / .outcomes__body: the chevron is anchored
       to the band's bottom edge, so the copy is raised a layer rather than the
       art being re-anchored per breakpoint */
    & .reasons__list {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        max-width: 720px;
    }

    /* measured: 1px rule between items, blue number in its own column */
    & .reasons__item {
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        gap: var(--sp20);
        padding-block: var(--sp40);
        border-top: 1px solid var(--line);
        /* max-width: 90%; */
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

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

    & .reasons__num {
        font-family: var(--font-display);
        font-size: var(--f50);
        font-weight: var(--fw-display);
        line-height: 1;
        color: var(--primary);
    }

    & .reasons__body{
        max-width: 560px;
    }

    /* an h3 by outline level (the section's h2 is "3 reasons to skip it"),
       set at the h4 size because that is what the artboard measures */
    & .reasons__title {
        margin-bottom: var(--sp20);
        font-size: var(--f30);
    }
}

/* =================================================================== responsive =================================================================== */
/* No 1199.98 query: its one declaration re-stated the `max-width: 100%` the base
   .reasons__grid rule already sets. Empty queries are not written (7.2). */

@media (max-width: 991.98px) {
    .reasons {
        padding-bottom: calc(var(--sectionGap) -  var(--stair));
        & .reasons__grid { grid-template-columns: 1fr; }

        /* The art sat in the empty half of the two-column split; with one column
           there is nothing left for it to sit behind. Hide the WRAPPER, not just
           the <img> — the wrapper is the 500px absolute box, so hiding the image
           alone left it overhanging the band edge. */
        & .reasons__art-wrap {             width: 300px;
            right: -10%;
            left: auto; }
    }
}

@media (max-width: 575.98px) {
    .reasons {
        & .reasons__item {
            grid-template-columns: 1fr;
            gap: var(--sp10);
        }
        & .reasons__art-wrap {  display: none; }
        /* the artboard's breaks fall mid-phrase at this measure */
        & .reasons__title br { display: none; }
    }
}