/* Values V7 — title/description cards + image card with CTA pill row */

.vls.v7 {
    /* Headline (h4 → fnt_t-1) — Figma is mixed case, lh 0.9 */
    --fnt-t-1-tt: none;
    --fnt-t-1-lh: 0.9;

    /* Subheader (h5 → fnt_t-5) — Albert Sans Medium 500, lh 1.7, neutral text color */
    --fnt-t-5-w: 500;
    --fnt-t-5-lh: 1.7;
    --fnt-t-5: var(--text-color);

    /* Card radius — Figma 20px */
    --bdr-rds-crd: 1.111rem;
    --bdr-rds: 1.11rem;

    /* Stat list — Figma 40px gap, wraps to N rows of 2 alongside the image */
    .vls-v7-stt {
        --grd-sp: 2.222rem;
    }

    .vls-v7-lbl {
        color: var(--text-color);
    }

    .vls-v7-img-crd::before {
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, hsl(from var(--black) h s l / 0.7) 100%);
        pointer-events: none;
        z-index: 1;
    }

    /* CTA row — absolute at bottom, overlapping the gradient */
    .vls-v7-btns {
        position: absolute;
        left: 50%;
        bottom: 4.44rem;
        transform: translateX(-50%);
        gap: 1.167rem;
        z-index: 2;
        white-space: nowrap;
    }

    @media screen and (min-width: 1280px) {
        .vls-v7-bd {
            --flx-gap: 2.778rem;
        }
    }
}

@media screen and (max-width: 700px) {
    .vls-v7-btns {
        flex-direction: column;
    }
}