/* Content V1 — Image split with content + Promise callout */

.cnt.v1 {
    --three-8ths: 40%;

    /* background: linear-gradient(to bottom, #f4f0e8, #e6f5fb); */
    background: linear-gradient(to top, var(--inner-theme), var(--background));

    /* Flat variant (opt-in via `flat` prop, used on the parent layout):
       drop the gradient tint for a solid panel. */
    &.flat-bg {
        background: var(--background);
    }

    .mn_wd{
        animation: unset;
    }
    .cnt-stl.ui-scroll{
        max-height: 40rem;
    }
    .bg-bx.frst-bg {
        --frst-bg-o: 1;
        --frst-blur: 7px;
        background-color: hsl(from var(--frst-bg-clr) h s l / var(--frst-bg-o));
        padding: 2rem 2.78rem;
        border: none;

        @media screen and (min-width:1280px) {
            & {
                gap: 4.4rem;

                .itm {
                    gap: 3.33rem;
                }
            }
        }
    }
    
    /* padding-bottom: 0; */


    /* ── Mascot image ──────────────────────────────────────── */

    .cnt-v1-msc {


        img {
            object-fit: contain;
            max-width: 29.5rem;
            margin-inline: auto;
        }
    }

    .five-8ths {
        position: relative;
        z-index: 1;
    }


    /* ── Bottom teal section ───────────────────────────────── */

    .cnt-v1-btm {
        padding-block: 2.5rem;
    }


    /* ── Callout card ──────────────────────────────────────── */

    /* Let the mascot poke above the bar (.crd clips overflow by default).
       The rounded corners still clip the background; only the mascot escapes. */
    .cnt-v1-cta {
        overflow: visible;
        margin-top: 4rem;
    }

    /* Mascot peeking over the top edge of the CTA bar */
    .cnt-v1-cta-msc {
        position: absolute;
        left: 50%;
        bottom: calc(100% - 1.25rem);   /* sit just above the bar, slight overlap */
        transform: translateX(-50%);
        width: 22rem;                    /* mascot size — tune to taste */
        pointer-events: none;
        z-index: 2;
    }

    .cnt-v1-cta-msc img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Header — lime green. The theme colors <em> inside .fnt_t-co with the
       blue accent; force it back to the callout green and enlarge it. */
    .cnt-v1-cta .fnt_t-co {
        font-size: clamp(2.25rem, 3.2vw, 3rem);
        line-height: 1;
    }

    .cnt-v1-cta .fnt_t-co em {
        color: var(--fnt-t-co);
    }

    /* Button — lime-green pill with dark text. Inside the dark .ulk-bg box the
       v1 button resolves to white; force it to the callout green. */
    .cnt-v1-cta .btn.v1 {
        --btn-bg: var(--callout);
        --btn-clr: var(--btn-pry-txt);
    }

    /* SubHeader — white (was the green callout), slightly larger */
    .cnt-v1-cta-sub {
        --title-color: var(--text-color);
        font-family: var(--fnt-t);
        font-weight: var(--fnt-t-co-w);
        font-size: clamp(1.25rem, 1.6vw, 1.6rem);
        text-transform: uppercase;
        margin: 0;
    }


    /* ── Responsive ────────────────────────────────────────── */

    @media screen and (max-width: 1279px) {
        .cnt-v1-cta {
            padding: 2rem;
        }
    }

    @media screen and (max-width: 699px) {
        .cnt-v1-btm {
            padding-block: 1.5rem;
        }

        .cnt-v1-cta {
            gap: 1rem;
            padding: 1.5rem;
        }
    }
}