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

    /* The two large stepped panels that bleed off both edges. Website.pdf
       fills them #252525 — --ink lifted by --tint-light — where the old
       artboard used --dark-surface, and cuts them with a TWO-step staircase
       rather than one step.

       Measured, 1920 artboard:
         right panel  x1137->1920, y3632->4525, 105px steps
         left panel   x   0-> 295, y3796->4299,  54x60 steps

       The right panel runs 105px past the bottom of the band; that last step
       is drawn by .outcomes__step, because this section clips its own box. */
    & .one-reason__block {
        position: absolute;
        z-index: 0;
        background: var(--surface-raised);
        pointer-events: none;
    }

    /* width/right overshoot by two steps so the panel's own right-hand
       notches fall outside the viewport, exactly as the artboard has them */
    & .one-reason__block--a {
        --notch: var(--sp40);
        top: calc(0 + var(--notch));
        right: calc(var(--notch-lg) * -2);
        width: calc(41% + var(--notch-lg) * 2);
        height: calc(100% - calc(var(--notch) * 2) - calc(var(--sectionGap) * 2));
        display: flex;
        align-items: center;
        justify-content: center;
        & .one-reason__art{
            margin-left: calc(var(--notch-lg) * -2);
        }
    }

    & .one-reason__block--b {
        --notch: var(--sp40);

        top: 50%;
        left: calc(var(--sp40) * -4);
        width: calc(15.4% + var(--sp40) * 2);
        height: 35%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* `img, svg` because ascii-scramble.js swaps the <img> for a live
           inline <svg> (CLAUDE.md §8.0.5) — the rule is about the artwork,
           not the element type. Left as `img` alone, the live copy got none
           of this and the star rendered at its natural width. */
        & img, & svg {
            width: 60%;
        }
    }

    & .container {
        position: relative;
        z-index: 1;
    }

    /* measured: the body column starts at x446 in the 100->1820 measure
       (20% in) and runs to x835 */
    & .one-reason__grid {margin-top: var(--sp100);}

    & .one-reason__body {
        margin-left: 20%;
        max-width: 390px;
    }

    /* an h3 by outline level, set at 40px on the artboard */
    & .one-reason__lede {
        margin-bottom: var(--sp40);
        font-size: var(--f40);
        color: var(--text-invert);
    }

    & .one-reason__body p {
        color: var(--muted-invert);

        & + p { margin-top: var(--sp30); }
    }
}

/* =================================================================== responsive =================================================================== */
/* The two slabs sit in the space the copy does NOT occupy, which is what keeps
   their edges off the text at 1920. Narrowing the measure walks the copy into
   them: measured, panel A crossed the paragraphs by 39px at 992 and 27px at
   1024, and panel B by 78-99px from 768 to 991. Panel A is pulled back to clear
   the indented copy here, and both go once the copy takes the full measure. */
@media (max-width: 1199.98px) {
    .one-reason {
        & .one-reason__block--a { width: calc(20% + var(--notch-lg) * 2); 
            img, svg {
                width: 30%;
            }
        }
    }
}

@media (max-width: 991.98px) {
    .one-reason {
        & .one-reason__body {
            margin-left: 0;
            max-width: 620px;
        }

        /* full-measure copy leaves neither slab anywhere to sit — A's left edge
           and B's right edge both land inside the running text */     
        
        & .one-reason__block--b { display: none; }
    }
}

@media (max-width: 767.98px) {
    .one-reason {
        & .one-reason__block--a { display: none; }
        & .one-reason__block--b { display: none; }
        /* the artboard's 3-line break leaves single-word lines at this measure */
        & .one-reason__lede br { display: none; }
    }
}
@media (max-width: 575.98px) {
    .one-reason {
        & .one-reason__block--a { display: none; }
        & .one-reason__block--b { display: none; }
        /* the artboard's 3-line break leaves single-word lines at this measure */
        & .one-reason__lede br { display: none; }
    }
}