/* Mainstage S1 — Split with Coupon */

.mstg.s1 {
    --flx-gap: 3.8rem;

    /* ── Spacing overrides ──────────────────────────── */

    --mstg-tls-pd-v-tp:      150;
    --mstg-tls-pd-v-tp-mbl:  60;
    --mstg-tls-pd-v-bt:      173;
    --mstg-tls-pd-v-bt-mbl:  60;

    /* ── Background image — via mainstage tools ─────── */

    --mstg-img-bg-o:   0.45;

    .inf {
        @media screen and (min-width: 1280px) {
            .two-thirds p {
                width: 70%;
            }
        }
    }

    /* ── Prevent right column from overflowing flex ── */

    .third {
        min-width: 0;
    }

    /* ── Coupon card — logo overlap ──────────────────── */

    --cpn-s1-lgo-ovlp: 5.5rem;
    --cpn-bdr-w: 3px;
    --cpn-bdr-s: dashed;

    .cpn-itm {
        overflow: visible;
    }

    .lgo {
        margin-top: calc(var(--cpn-s1-lgo-ovlp) * -1);
        z-index: 2;
        position: relative;
    }

    .act {
        justify-content: center;

        @media (width >= 700px) {
            & > li + li {
                border-left: 1px solid hsl(from white h s l / 0.3);
                padding-left: var(--grd-sp-dyn);
            }
        }
    }

    .cpn-div {
        display: flex;
        justify-content: center;

        svg {
            width: 100%;
        }
    }

    /* ── Entrance animations ────────────────────────── */

    &.mstg-anm {
        @media (prefers-reduced-motion: no-preference) {
            .two-thirds > div > em        { animation: mstg-s1-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0s    both; }
            .two-thirds > div > strong    { animation: mstg-s1-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s  both; }
            .two-thirds > div > p         { animation: mstg-s1-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
            .two-thirds > div > .mrg_tp   { animation: mstg-s1-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s  both; }
            .third                        { animation: mstg-s1-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s  both; }
        }
    }

}

@media (prefers-reduced-motion: no-preference) {
    @keyframes mstg-s1-fade-up {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}