/* Mainstage V1 — Centered with Trust Logos */

.mstg.v1 {

    /* ── Spacing overrides ──────────────────────────── */
    --mstg-tls-pd-v-tp: 175;
	--mstg-tls-pd-v-tp-mbl: 75;
    --mstg-tls-pd-v-bt:      600;
    --mstg-tls-pd-v-bt-mbl:  200;

    /* ── Background image opacity ───────────────────── */

    --mstg-img-bg-o: 1;

    /* ── Body text ──────────────────────────────────── */

    --fnt-pl-s: 1.6875rem; /* 27px from Figma */

    p {
        font-weight: 600;
        margin-inline: auto;
    }

    .bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient( to bottom, hsl(from black h s l / 0.75), hsl(from black h s l / 0));
        z-index: 1;
    }

    /* Bottom fade into the next panel — color set by the :has() rules below */
    > .bg::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20%;
        background: linear-gradient(to bottom, transparent, var(--mstg-next-bg, transparent) 92%);
        pointer-events: none;
        z-index: 1;
    }

    .inf {
        z-index: 1;
    }

    .ctrls {
        bottom: 20%;
    }
}


header:has(.overlap .hdr.v1) .mstg.v1 {
    --mstg-tls-pd-v-tp:      49;
    --mstg-tls-pd-v-tp-mbl:  30;

    /* Reserve approximate header space before overlapping-header.js measures
       and writes the exact paddingTop inline. JS overrides via inline style.
       Calibrated against the site's vw-clamped html font-size, which makes
       1rem 14.97px at 375 and 18px at 1920 — so these rem values track the
       header's vw-driven height, not a fixed 16px. */
    --hdr-h: 14.25rem;
    padding-top: var(--hdr-h);

    @media screen and (min-width: 700px)  { --hdr-h: 14rem; }
    @media screen and (min-width: 1280px) { --hdr-h: 17.5rem; }
    @media screen and (min-width: 1920px) { --hdr-h: 17rem; }
}

/* Pick up the next panel's solid background color so the bottom of the
   mainstage image fades into it. Skipped when the next panel has its own
   bg image (would clash with a color fade). */
body:has(main > section[data-colors="primary-light"]:first-child:not(.bg-image))   .mstg.v1 { --mstg-next-bg: var(--lt-bg); }
body:has(main > section[data-colors="alternate-light"]:first-child:not(.bg-image)) .mstg.v1 { --mstg-next-bg: var(--lt-alt-bg); }
body:has(main > section[data-colors="primary-dark"]:first-child:not(.bg-image))    .mstg.v1 { --mstg-next-bg: var(--dk-bg); }
body:has(main > section[data-colors="alternate-dark"]:first-child:not(.bg-image))  .mstg.v1 { --mstg-next-bg: var(--dk-alt-bg); }