/* ════════════════════════════════════════════════════════════════════════════
   ValuePropsGrid — generalized 2x2 check-bullet value-props grid.
   Extracted from content-v1.css (.cnt-v1-vp*); values preserved verbatim.
   Root selector is ul.vp-grd (0,1,1) so the explicit two-column grid keeps
   out-competing the .grd/.mx-2 container-query utilities regardless of CSS
   load order (the old rules won via .cnt.v1 ancestor specificity).
   ════════════════════════════════════════════════════════════════════════════ */

/* The container-query .grd/mx-2 never reaches 2-up inside the narrow card,
   so force an explicit two-column grid here (keep the gp_sp-sml gap). */
ul.vp-grd {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    .vp-item {
        align-items: center;
    }

    /* Check-circle wrapper: inline span had no box, so the icon collapsed.
       Give it the icon's box and keep it from shrinking. */
    .vp-check {
        display: inline-flex;
        flex: 0 0 auto;
        width: 1.778rem;        /* 32px / 18 */
        height: 1.778rem;
    }

    .vp-icn {
        width: 1.778rem;        /* 32px / 18 */
        height: 1.778rem;
        flex: 0 0 auto;
    }

    .vp-text {
        display: flex;
        flex-direction: column;
    }

    .vp-note {
        opacity: 0.7;
    }

    /* Stack into a single column on mobile */
    @media (max-width: 699px) {
        grid-template-columns: 1fr;
    }
}