/* UMP video hero — scoped .ump-vban* avoids theme / generic .banner / .smd-* collisions */
    .ump-vban.ump-vban__root {
        --ump-vban-ink: #fff7fb;
        --ump-vban-ink2: rgba(255, 245, 250, 0.9);
        position: relative;
        width: 100%;
        background: transparent;
        overflow: hidden;
        contain: layout style;
        min-height: calc(min(56vw, 300px) + 248px);
        box-sizing: border-box;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .ump-vban__root--pad {
        padding: 8px 10px 0;
        margin: 0 0 12px;
        box-sizing: border-box;
    }

    /* Mobile-first stage: image on top, promo cards stacked below */
    .ump-vban__stage {
        position: relative;
        width: 100%;
        background: #14040f;
        max-width: 1400px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 22px;
        box-shadow:
            0 0 0 1px rgba(255, 40, 120, 0.14),
            0 22px 56px rgba(12, 2, 10, 0.5);
        --ump-vban-stage-bg: #14040f;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        aspect-ratio: auto !important;
    }

    .ump-vban__stage--image {
        --ump-vban-left-gutter: 0px;
        aspect-ratio: auto !important;
        padding-left: 0 !important;
        box-sizing: border-box;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        contain: layout;
        background: var(--ump-vban-stage-bg);
    }

    .ump-vban__media,
    .ump-vban__stage--image .ump-vban__media--image {
        position: relative !important;
        inset: auto !important;
        grid-column: 1;
        grid-row: 1;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        max-height: min(56vw, 300px);
        aspect-ratio: 1024 / 593;
        object-fit: cover;
        object-position: center center;
        opacity: 1;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-radius: 22px 22px 0 0;
        display: block;
        animation: none !important;
        background: #14040f;
    }

    .ump-vban__stage--image .ump-vban__veil {
        display: none;
    }

    /* Never fade hero media — opacity 0→1 delays LCP and registers as CLS. */
    .ump-vban__media[data-loaded="true"],
    .ump-vban__stage--image .ump-vban__media--image,
    .ump-vban__stage--image .ump-vban__media--image[data-loaded="true"] {
        opacity: 1 !important;
        animation: none !important;
    }

    @keyframes ump-vban-accent-glow-blue {
        0%, 100% {
            text-shadow:
                0 1px 0 rgba(0, 20, 60, 0.75),
                0 2px 10px rgba(0, 0, 0, 0.72),
                0 0 20px rgba(56, 130, 246, 0.95),
                0 0 38px rgba(29, 78, 216, 0.72),
                0 0 54px rgba(99, 102, 241, 0.45),
                0 0 68px rgba(255, 70, 140, 0.28);
        }
        50% {
            text-shadow:
                0 1px 0 rgba(0, 25, 70, 0.78),
                0 2px 12px rgba(0, 0, 0, 0.78),
                0 0 30px rgba(125, 190, 255, 1),
                0 0 52px rgba(59, 130, 246, 0.82),
                0 0 72px rgba(37, 99, 235, 0.58),
                0 0 84px rgba(255, 90, 160, 0.34);
        }
    }

    @keyframes ump-vban-accent-glow-gold {
        0%, 100% {
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.55),
                0 2px 8px rgba(0, 0, 0, 0.65),
                0 0 18px rgba(255, 215, 130, 0.85),
                0 0 34px rgba(255, 175, 70, 0.58),
                0 0 48px rgba(255, 130, 90, 0.38);
        }
        50% {
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.55),
                0 2px 10px rgba(0, 0, 0, 0.72),
                0 0 28px rgba(255, 236, 180, 0.95),
                0 0 46px rgba(255, 205, 100, 0.68),
                0 0 58px rgba(255, 160, 110, 0.48);
        }
    }

    .ump-vban__veil {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        border-radius: inherit;
        background:
            linear-gradient(90deg, rgba(10, 2, 8, 0.9) 0%, rgba(28, 8, 22, 0.68) 33%, rgba(44, 14, 36, 0.28) 54%, transparent 74%),
            radial-gradient(ellipse 100% 95% at 8% 48%, rgba(160, 0, 90, 0.22), transparent 58%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, transparent 42%, rgba(20, 0, 16, 0.35) 100%);
    }

    .ump-vban__rail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .ump-vban__rail--dock {
        position: relative !important;
        z-index: 3;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 100%;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px 12px max(18px, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
    }

    /* Level cards — reference mockup (no Z-axis spin) */
    .ump-vban__rail--dock .ump-vban__card--1,
    .ump-vban__rail--dock .ump-vban__card--2 {
        transform: none;
        transform-origin: left center;
    }

    .ump-vban .ump-vban__card {
        position: relative;
        min-height: 118px;
        display: flex;
        align-items: center;
        gap: clamp(10px, 1.4vw, 16px);
        padding: clamp(14px, 1.8vw, 18px) clamp(14px, 1.6vw, 18px);
        border-radius: 22px;
        overflow: visible;
        border: 2px solid rgba(255, 30, 140, 0.82);
        background: linear-gradient(155deg, rgba(18, 4, 16, 0.94) 0%, rgba(34, 8, 28, 0.9) 48%, rgba(42, 10, 34, 0.86) 100%);
        box-shadow:
            0 0 0 1px rgba(255, 60, 160, 0.35),
            0 0 14px rgba(255, 20, 147, 0.42),
            0 0 32px rgba(255, 20, 147, 0.22),
            0 0 48px rgba(255, 20, 147, 0.12),
            inset 0 1px 0 rgba(255, 140, 200, 0.14),
            0 18px 44px rgba(6, 0, 5, 0.55);
        transition: transform 0.28s ease, box-shadow 0.28s ease;
    }

    @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
        .ump-vban .ump-vban__card {
            background: linear-gradient(155deg, rgba(18, 4, 16, 0.88) 0%, rgba(34, 8, 28, 0.78) 48%, rgba(42, 10, 34, 0.68) 100%);
            backdrop-filter: blur(8px) saturate(1.15);
            -webkit-backdrop-filter: blur(8px) saturate(1.15);
        }
    }

    .ump-vban .ump-vban__card::before {
        content: '';
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 50, 150, 0.22), transparent 58%);
        opacity: 0.95;
    }

    .ump-vban__emblem {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
    }

    .ump-vban__emblem-ring {
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(46px, 4.2vw, 56px);
        height: clamp(46px, 4.2vw, 56px);
        border-radius: 50%;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(230, 210, 225, 0.92) 38%, rgba(200, 170, 195, 0.88) 100%);
        border: 2px solid rgba(255, 255, 255, 0.65);
        box-shadow:
            0 2px 0 rgba(255, 255, 255, 0.85) inset,
            0 -4px 10px rgba(120, 60, 100, 0.28) inset,
            0 4px 0 rgba(140, 70, 115, 0.35),
            0 8px 18px rgba(0, 0, 0, 0.42),
            0 0 16px rgba(255, 20, 147, 0.28);
        color: #ff2d9a;
    }

    .ump-vban__emblem--gift .ump-vban__emblem-ring {
        color: #ff69b4;
    }

    .ump-vban__emblem-svg {
        width: 52%;
        height: 52%;
        display: block;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    }

    .ump-vban__emblem-img {
        width: 68%;
        height: 68%;
        display: block;
        object-fit: contain;
        border-radius: 4px;
    }

    /* Uploaded transparent PNG/WebP icons — no white ring, larger, true alpha */
    .ump-vban__emblem--custom {
        flex: 0 0 auto;
        width: clamp(88px, 7.5vw, 112px);
        height: clamp(88px, 7.5vw, 112px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
    }

    .ump-vban__emblem--custom .ump-vban__emblem-img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 0;
        background: transparent !important;
        filter: drop-shadow(0 2px 10px rgba(255, 20, 147, 0.38));
    }

    .ump-vban__rail--dock .ump-vban__card {
        border-radius: 18px;
    }

    .ump-vban__rail--dock .ump-vban__accent {
        display: block;
        margin-top: 2px;
        font-size: clamp(14px, 1.2vw, 17px);
    }

    .ump-vban__lede--invite .ump-vban__brand {
        color: #ff4da6 !important;
        font-style: italic;
        text-shadow: 0 0 14px rgba(255, 20, 147, 0.35);
    }

    .ump-vban .ump-vban__card:hover {
        transform: translateY(-3px);
        box-shadow:
            0 0 0 1px rgba(255, 80, 170, 0.45),
            0 0 20px rgba(255, 20, 147, 0.55),
            0 0 40px rgba(255, 20, 147, 0.32),
            0 0 56px rgba(255, 20, 147, 0.18),
            inset 0 1px 0 rgba(255, 180, 210, 0.2),
            0 24px 56px rgba(6, 0, 5, 0.62);
    }

    @media (hover: none) {
        .ump-vban .ump-vban__card:hover {
            transform: none;
        }
    }

    .ump-vban .ump-vban__body {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 2px;
        text-align: left;
    }

    .ump-vban .ump-vban__head {
        margin: 0 0 8px !important;
        font-size: clamp(15px, 1.15vw, 18px);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: 0.02em;
        color: var(--ump-vban-ink) !important;
        text-shadow:
            0 2px 14px rgba(0, 0, 0, 0.65),
            0 0 2px rgba(0, 0, 0, 0.85) !important;
        max-width: min(24ch, 100%);
    }

    .ump-vban .ump-vban__kicker {
        display: inline;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0.06em;
        text-transform: none;
        color: #fff6fc !important;
        text-shadow:
            0 2px 14px rgba(0, 0, 0, 0.85),
            0 0 24px rgba(255, 120, 190, 0.22),
            0 1px 0 rgba(0, 0, 0, 0.45) !important;
        font-size: clamp(13px, 1.1vw, 15px);
    }

    .ump-vban .ump-vban__lede {
        margin: 0 0 12px !important;
        line-height: 1.48;
        max-width: 34ch;
    }

    /* Body copy — card 1: crisp “hours / availability” feel */
    .ump-vban .ump-vban__lede--chat {
        font-size: clamp(12px, 0.95vw, 13.5px);
        font-weight: 600;
        font-style: normal;
        letter-spacing: 0.07em;
        text-transform: none;
        color: rgba(236, 248, 255, 0.94) !important;
        text-shadow:
            0 1px 12px rgba(0, 0, 0, 0.65),
            0 0 20px rgba(120, 200, 255, 0.15);
    }

    /* Body copy — card 2: softer, intimate editorial */
    .ump-vban .ump-vban__lede--invite {
        font-size: clamp(12px, 0.95vw, 13.5px);
        font-weight: 500;
        font-style: italic;
        letter-spacing: 0.045em;
        color: rgba(255, 228, 245, 0.95) !important;
        text-shadow:
            0 1px 12px rgba(0, 0, 0, 0.62),
            0 0 22px rgba(255, 140, 190, 0.18);
    }

    .ump-vban .ump-vban__note {
        margin: 10px 0 0 !important;
        font-size: 11px;
        font-style: italic;
        color: rgba(255, 215, 240, 0.88) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
    }

    /* Hero accents: keep consistent with description sizing */
    .ump-vban .ump-vban__accent {
        display: inline-block;
        padding: 0;
        margin: 2px 0 0;
        max-width: 100%;
        border-radius: 0;
        font-style: italic;
        font-weight: 900;
        text-transform: none;
        line-height: 1.12;
        border: 0 !important;
        box-shadow: none !important;
        background: none !important;
        text-decoration: none !important;
        vertical-align: baseline;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        font-size: clamp(13px, 1vw, 16px);
        letter-spacing: 0.04em;
    }

    .ump-vban .ump-vban__accent--primary {
        letter-spacing: 0.04em;
        color: #ff4da6 !important;
        -webkit-text-fill-color: #ff4da6 !important;
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.65),
            0 2px 10px rgba(0, 0, 0, 0.72),
            0 0 18px rgba(255, 20, 147, 0.55),
            0 0 32px rgba(255, 20, 147, 0.32) !important;
        animation: none;
    }

    .ump-vban .ump-vban__accent--burst {
        letter-spacing: 0.06em;
        color: #ffd86a !important;
        -webkit-text-fill-color: #ffd86a !important;
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.55),
            0 2px 8px rgba(0, 0, 0, 0.65),
            0 0 16px rgba(255, 215, 100, 0.75),
            0 0 30px rgba(255, 175, 60, 0.45) !important;
        animation: none;
    }

    .ump-vban .ump-vban__cta {
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        padding: 11px 22px;
        border-radius: 999px;
        font-weight: 800;
        font-size: clamp(11px, 0.85vw, 12.5px);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-decoration: none !important;
        color: #d4007f !important;
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.88);
        text-shadow: none;
        transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    }

    /* White pill CTAs with pink text — mockup neon style */
    .ump-vban .ump-vban__cta--1,
    .ump-vban .ump-vban__cta--2 {
        background: linear-gradient(180deg, #ffffff 0%, #f8f2f6 48%, #ebe3ea 100%);
        box-shadow:
            0 2px 0 rgba(255, 255, 255, 0.95) inset,
            0 -4px 10px rgba(160, 100, 140, 0.22) inset,
            0 4px 0 rgba(150, 80, 120, 0.32),
            0 10px 22px rgba(0, 0, 0, 0.38);
    }

    .ump-vban .ump-vban__cta--1:hover,
    .ump-vban .ump-vban__cta--2:hover {
        filter: brightness(1.04);
        transform: translateY(-2px);
        color: #c40072 !important;
        box-shadow:
            0 2px 0 rgba(255, 255, 255, 1) inset,
            0 -4px 10px rgba(160, 100, 140, 0.18) inset,
            0 6px 0 rgba(150, 80, 120, 0.32),
            0 14px 28px rgba(0, 0, 0, 0.42);
    }

    .ump-vban .ump-vban__cta--1:active,
    .ump-vban .ump-vban__cta--2:active {
        transform: translateY(3px);
        box-shadow:
            0 2px 0 rgba(255, 255, 255, 0.85) inset,
            0 3px 8px rgba(140, 90, 120, 0.25) inset,
            0 2px 0 rgba(150, 80, 120, 0.28),
            0 6px 16px rgba(0, 0, 0, 0.32);
    }

    /* Modal button sits outside .ump-vban — standalone selector */
    button.ump-vban__cta.ump-vban__cta--modal {
        display: inline-block;
        width: 100%;
        max-width: 280px;
        margin-top: 6px;
        padding: 12px 22px;
        border-radius: 999px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.42);
        background: linear-gradient(180deg, #ee52ad 0%, #c41080 42%, #840056 100%) !important;
        box-shadow:
            0 2px 0 rgba(255, 198, 228, 0.32) inset,
            0 -3px 10px rgba(32, 0, 22, 0.45) inset,
            0 5px 0 #4c0034,
            0 11px 28px rgba(130, 0, 88, 0.44);
        cursor: pointer;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
        transition: transform 0.2s ease, filter 0.2s ease;
    }

    button.ump-vban__cta--modal:hover {
        filter: brightness(1.06);
        transform: translateY(-2px);
    }

    button.ump-vban__cta--modal:active {
        transform: translateY(2px);
    }

    /* Static layout (no video): soft blush panels */
    .ump-vban__root--static .ump-vban__card {
        background: linear-gradient(158deg, rgba(255, 250, 253, 0.97) 0%, rgba(255, 236, 248, 0.93) 100%);
        border-color: rgba(210, 90, 150, 0.28);
        box-shadow: 0 18px 44px rgba(70, 30, 55, 0.12);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .ump-vban__root--static .ump-vban__head {
        color: #160812 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 14px rgba(255, 190, 220, 0.45) !important;
    }

    .ump-vban__root--static .ump-vban__kicker {
        color: #2a1428 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) !important;
    }

    .ump-vban__root--static .ump-vban__lede--chat {
        color: #3a2840 !important;
        text-shadow: none;
        letter-spacing: 0.06em;
    }

    .ump-vban__root--static .ump-vban__lede--invite {
        color: #4d3048 !important;
        text-shadow: none;
        font-style: italic;
    }

    .ump-vban__root--static .ump-vban__note {
        color: #6a4558 !important;
    }

    .ump-vban__root--static .ump-vban__accent {
        font-size: clamp(24px, 5.5vw, 36px) !important;
    }

    .ump-vban__root--static .ump-vban__accent--primary {
        animation: none !important;
        color: #e0108a !important;
        -webkit-text-fill-color: #e0108a !important;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.98),
            0 2px 14px rgba(255, 20, 147, 0.28) !important;
    }

    .ump-vban__root--static .ump-vban__accent--burst {
        animation: none !important;
        color: #c48a00 !important;
        -webkit-text-fill-color: #c48a00 !important;
        text-shadow:
            0 1px 0 rgba(255, 255, 255, 0.98),
            0 2px 14px rgba(200, 150, 50, 0.32) !important;
    }

    .ump-vban__root--static .ump-vban__card {
        border: 2px solid rgba(255, 40, 130, 0.55);
        box-shadow:
            0 0 12px rgba(255, 20, 147, 0.2),
            0 18px 44px rgba(70, 30, 55, 0.14);
    }

    /* Video failure */
    .ump-vban--failed .ump-vban__stage {
        background: #faf6f8;
    }

    .ump-vban--failed .ump-vban__media {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .ump-vban--failed .ump-vban__cta--1,
    .ump-vban--failed .ump-vban__cta--2 {
        background: #fff !important;
        color: #c4007a !important;
        border: 1px solid rgba(110, 70, 95, 0.28) !important;
        box-shadow: 0 6px 18px rgba(50, 25, 40, 0.1) !important;
        text-shadow: none !important;
        filter: none !important;
    }

    .ump-vban-modal {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 14px;
        background: rgba(10, 2, 10, 0.64);
    }

    .ump-vban-modal.is-open {
        display: flex;
    }

    .ump-vban-modal__panel {
        position: relative;
        width: min(460px, 100%);
        border-radius: 22px;
        padding: 26px 22px 22px;
        text-align: center;
        background: linear-gradient(180deg, #fffafd 0%, #fff2f8 100%);
        border: 1px solid rgba(220, 100, 160, 0.28);
        box-shadow: 0 28px 64px rgba(30, 6, 24, 0.38);
    }

    .ump-vban-modal__title {
        margin: 0 0 8px !important;
        font-size: clamp(21px, 2.4vw, 26px);
        font-weight: 800;
        color: #b00074 !important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .ump-vban-modal__text {
        margin: 0 0 18px !important;
        color: #4a3045 !important;
        max-width: 34ch;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ump-vban-modal__x {
        position: absolute;
        top: 8px;
        right: 11px;
        border: 0;
        background: transparent;
        color: #714465;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
    }

    /* Desktop: overlay promo cards on the hero image */
    @media (min-width: 769px) {
        .ump-vban.ump-vban__root {
            min-height: clamp(300px, 40vw, 600px);
        }

        .ump-vban__root--pad {
            padding: clamp(10px, 2vw, 22px) clamp(12px, 2vw, 24px) 0;
            margin: 0;
        }

        .ump-vban__stage {
            display: block;
            border-radius: 28px;
        }

        .ump-vban__stage:not(.ump-vban__stage--image) {
            aspect-ratio: 16 / 9;
        }

        .ump-vban__stage--image {
            height: clamp(280px, 36vw, 560px) !important;
            min-height: 280px !important;
            max-height: 560px !important;
            contain: layout style paint;
        }

        .ump-vban__media,
        .ump-vban__stage--image .ump-vban__media--image {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            max-height: none !important;
            min-height: 0;
            aspect-ratio: auto;
            object-position: right center;
            border-radius: inherit;
        }

        .ump-vban__veil,
        .ump-vban__stage--image .ump-vban__veil {
            display: block;
            background:
                linear-gradient(90deg, rgba(10, 2, 8, 0.82) 0%, rgba(28, 8, 22, 0.52) 28%, rgba(44, 14, 36, 0.2) 48%, transparent 70%),
                radial-gradient(ellipse 90% 90% at 8% 48%, rgba(160, 0, 90, 0.16), transparent 56%),
                linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 40%, rgba(20, 0, 16, 0.22) 100%);
        }

        .ump-vban__rail {
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        /* Desktop: stacked horizontal cards on the left */
        .ump-vban__rail--dock {
            position: absolute !important;
            left: clamp(20px, 3.2vw, 44px) !important;
            right: auto !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: min(46%, 520px);
            max-width: 520px;
            min-height: 0;
            padding: 0;
            grid-column: auto;
            grid-row: auto;
            grid-template-columns: 1fr !important;
            gap: 14px;
        }

        .ump-vban__rail--dock .ump-vban__card--1,
        .ump-vban__rail--dock .ump-vban__card--2 {
            transform-origin: left center;
        }

        .ump-vban__rail--dock .ump-vban__card {
            min-height: 96px;
            max-height: none;
            width: 100%;
            flex-direction: row;
            align-items: center;
            padding: 14px 18px;
            border-radius: 18px;
        }

        .ump-vban__rail--dock .ump-vban__body {
            flex: 1 1 auto;
            min-width: 0;
        }

        .ump-vban__rail--dock .ump-vban__head {
            margin: 0 0 6px;
            font-size: clamp(14px, 1.05vw, 17px);
            line-height: 1.2;
        }

        .ump-vban__rail--dock .ump-vban__lede {
            margin: 0 0 10px;
            font-size: clamp(11.5px, 0.9vw, 13px);
            line-height: 1.4;
        }

        .ump-vban__rail--dock .ump-vban__cta {
            padding: 9px 14px;
            font-size: clamp(11px, 0.9vw, 13px);
        }
    }

    @media (max-width: 768px) {
        /* layout-only containment so glows / stacked promos are not clipped (contain:paint was cutting headlines) */
        .ump-vban.ump-vban__root {
            contain: layout;
            min-height: calc(min(56vw, 300px) + 260px);
        }

        .ump-vban__root--pad {
            /* Reduce top whitespace on mobile */
            padding: 8px 10px 0 !important;
            margin: 0 0 12px 0;
        }

        .ump-vban .ump-vban__card {
            max-width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            padding: clamp(14px, 3.8vw, 20px);
            min-height: 104px;
            align-items: flex-start;
        }

        .ump-vban__emblem--custom {
            width: clamp(56px, 16vw, 72px);
            height: clamp(56px, 16vw, 72px);
        }

        .ump-vban__rail--dock .ump-vban__card--1,
        .ump-vban__rail--dock .ump-vban__card--2 {
            transform: none;
        }

        .ump-vban__rail--dock .ump-vban__card--1:hover,
        .ump-vban__rail--dock .ump-vban__card--2:hover {
            transform: none;
        }

        .ump-vban .ump-vban__body {
            padding: 2px 0;
            width: 100%;
            min-width: 0;
        }

        .ump-vban .ump-vban__head {
            max-width: 100%;
            margin-bottom: 10px !important;
            overflow: visible;
            word-break: normal;
            overflow-wrap: break-word;
            hyphens: manual;
        }

        /* Mobile: make kicker / highlight / description uniform + smaller */
        .ump-vban .ump-vban__kicker,
        .ump-vban .ump-vban__accent,
        .ump-vban .ump-vban__lede--chat,
        .ump-vban .ump-vban__lede--invite {
            font-size: clamp(10.5px, 3.05vw, 12.5px) !important;
        }

        .ump-vban .ump-vban__kicker {
            letter-spacing: 0.04em;
            display: inline;
            margin: 0;
            line-height: 1.35;
        }

        .ump-vban .ump-vban__accent {
            display: inline;
            margin: 0;
            line-height: 1.35;
            letter-spacing: 0.04em;
        }

        .ump-vban .ump-vban__head {
            margin-bottom: 8px !important;
            line-height: 1.35;
        }

        /* Lighter shadows on small screens = fewer paint layers, still readable */
        .ump-vban .ump-vban__accent--primary {
            animation: none;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.65),
                0 2px 8px rgba(0, 0, 0, 0.75),
                0 0 14px rgba(255, 20, 147, 0.5),
                0 0 24px rgba(255, 20, 147, 0.28) !important;
        }

        .ump-vban .ump-vban__accent--burst {
            animation: none;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.55),
                0 2px 8px rgba(0, 0, 0, 0.72),
                0 0 14px rgba(255, 200, 100, 0.7),
                0 0 24px rgba(255, 160, 70, 0.38) !important;
        }

        .ump-vban__emblem-ring {
            width: 42px;
            height: 42px;
        }

        .ump-vban .ump-vban__lede--chat {
            letter-spacing: 0.04em;
            line-height: 1.52;
        }

        .ump-vban .ump-vban__lede--invite {
            letter-spacing: 0.04em;
            line-height: 1.52;
        }

        .ump-vban .ump-vban__cta {
            width: 100%;
            text-align: center;
            font-size: clamp(12px, 3.2vw, 13px);
            padding: 11px 16px;
        }

        .ump-vban .ump-vban__note {
            font-size: clamp(10px, 2.9vw, 11px);
        }

        .ump-vban__root--static .ump-vban__accent {
            font-size: clamp(26px, 8.2vw, 42px) !important;
        }
    }

    @media (max-width: 380px) {
        .ump-vban .ump-vban__kicker {
            font-size: clamp(10px, 3.25vw, 12px) !important;
        }

        .ump-vban .ump-vban__accent {
            font-size: clamp(10px, 3.25vw, 12px) !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ump-vban__media,
        .ump-vban .ump-vban__card,
        .ump-vban .ump-vban__cta,
        button.ump-vban__cta--modal {
            animation: none !important;
            transition: none !important;
        }

        .ump-vban .ump-vban__accent,
        .ump-vban .ump-vban__accent--primary,
        .ump-vban .ump-vban__accent--burst {
            animation: none !important;
        }

        .ump-vban .ump-vban__card:hover,
        .ump-vban__rail--dock .ump-vban__card--1:hover,
        .ump-vban__rail--dock .ump-vban__card--2:hover,
        button.ump-vban__cta--modal:hover {
            transform: none;
        }
    }