.campaign-flyout {
    --campaign-accent: #ffcc00;
    --campaign-accent-ink: #1c1028;
    --campaign-duration: 6500ms;
    background: #171021;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 26px;
    bottom: 1rem;
    box-shadow: 0 30px 90px rgba(9, 7, 20, .42), 0 8px 26px rgba(9, 7, 20, .32);
    color: #fff;
    contain: layout paint;
    height: 330px;
    isolation: isolate;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
    position: fixed;
    right: 1rem;
    width: 410px;
    z-index: 1090;
}

.campaign-flyout[hidden] { display: none !important; }

.campaign-flyout::after {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 25px;
    content: "";
    inset: 5px;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.campaign-flyout__media,
.campaign-flyout__image,
.campaign-flyout__wash,
.campaign-flyout__glow {
    inset: 0;
    position: absolute;
}

.campaign-flyout__media { z-index: -3; }

.campaign-flyout__image {
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity .7s ease, transform 6.5s ease;
    width: 100%;
}

.campaign-flyout__image.is-active {
    opacity: 1;
    transform: scale(1.1);
}

.campaign-flyout__wash {
    background:
        linear-gradient(90deg, rgba(12, 9, 18, .97) 0%, rgba(12, 9, 18, .88) 47%, rgba(12, 9, 18, .25) 82%),
        linear-gradient(0deg, rgba(12, 9, 18, .92), transparent 52%);
    z-index: -2;
}

.campaign-flyout__glow {
    background: radial-gradient(circle at 12% 72%, color-mix(in srgb, var(--campaign-accent) 55%, transparent), transparent 42%);
    mix-blend-mode: screen;
    opacity: .5;
    transition: background .5s ease;
    z-index: -1;
}

.campaign-flyout__toolbar {
    align-items: center;
    display: flex;
    gap: .45rem;
    left: 1rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 7;
}

.campaign-flyout__badge {
    backdrop-filter: blur(9px);
    background: rgba(15, 13, 24, .54);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .15em;
    padding: .42rem .68rem;
    text-transform: uppercase;
}

.campaign-flyout__icon-button,
.campaign-flyout__controls button {
    align-items: center;
    backdrop-filter: blur(9px);
    background: rgba(15, 13, 24, .58);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.campaign-flyout__icon-button {
    font-size: .8rem;
    height: 32px;
    padding: 0;
    width: 32px;
}

.campaign-flyout__icon-button:first-of-type { margin-left: auto; }
.campaign-flyout__close { font-size: 1.2rem; }

.campaign-flyout button:hover,
.campaign-flyout button:focus-visible {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
    transform: translateY(-1px);
}

.campaign-flyout button:focus-visible,
.campaign-flyout a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.campaign-flyout__content {
    bottom: 4.25rem;
    left: 1.15rem;
    max-width: 275px;
    position: absolute;
    z-index: 4;
}

.campaign-flyout__content.is-changing {
    animation: campaign-copy-in .46s ease both;
}

.campaign-flyout__kicker {
    color: var(--campaign-accent);
    display: block;
    font-size: .69rem;
    font-weight: 950;
    letter-spacing: .16em;
    margin-bottom: .38rem;
    text-transform: uppercase;
    transition: color .5s ease;
}

.campaign-flyout h2 {
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 1.62rem;
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.02;
    margin: 0 0 .48rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.campaign-flyout p {
    color: rgba(255, 255, 255, .88);
    font-size: .79rem;
    line-height: 1.38;
    margin: 0 0 .75rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

.campaign-flyout__cta {
    align-items: center;
    background: var(--campaign-accent);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--campaign-accent) 28%, transparent);
    color: var(--campaign-accent-ink) !important;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 950;
    gap: .55rem;
    min-height: 38px;
    padding: 0 .92rem;
    text-decoration: none;
    transition: background .5s ease, color .5s ease, transform .2s ease;
}

.campaign-flyout__cta:hover { transform: translateY(-2px); }

.campaign-flyout__footer {
    align-items: center;
    bottom: 1rem;
    display: flex;
    gap: .8rem;
    left: 1.15rem;
    position: absolute;
    right: 1.15rem;
    z-index: 6;
}

.campaign-flyout__dots { display: flex; gap: .38rem; }

.campaign-flyout__dot {
    background: rgba(255, 255, 255, .48);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    height: 7px;
    padding: 0;
    transition: background .25s ease, width .25s ease;
    width: 7px;
}

.campaign-flyout__dot.is-active {
    background: var(--campaign-accent);
    width: 23px;
}

.campaign-flyout__controls {
    align-items: center;
    display: flex;
    gap: .38rem;
    margin-left: auto;
}

.campaign-flyout__controls button {
    font-size: 1.15rem;
    height: 27px;
    padding: 0;
    width: 27px;
}

.campaign-flyout__controls span {
    color: rgba(255, 255, 255, .78);
    font-size: .65rem;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    min-width: 44px;
    text-align: center;
}

.campaign-flyout__progress {
    animation: campaign-progress var(--campaign-duration) linear forwards;
    background: var(--campaign-accent);
    bottom: 0;
    height: 4px;
    left: 0;
    position: absolute;
    transform-origin: left center;
    width: 100%;
    z-index: 8;
}

.campaign-flyout.is-paused .campaign-flyout__progress,
.campaign-flyout.is-hover-paused .campaign-flyout__progress {
    animation-play-state: paused;
}

@keyframes campaign-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes campaign-copy-in { from { opacity: .25; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 640px) {
    .campaign-flyout {
        bottom: .65rem;
        height: 315px;
        max-width: none;
        right: .65rem;
        width: calc(100vw - 1.3rem);
    }

    .campaign-flyout__content { bottom: 4rem; max-width: min(72vw, 270px); }
    .campaign-flyout h2 { font-size: 1.46rem; }
}

@media (max-width: 380px) {
    .campaign-flyout { height: 300px; }
    .campaign-flyout__content { bottom: 3.75rem; }
    .campaign-flyout h2 { font-size: 1.32rem; }
    .campaign-flyout p { font-size: .73rem; }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-flyout__image,
    .campaign-flyout__cta,
    .campaign-flyout__content { transition: none; }
    .campaign-flyout__content.is-changing { animation: none; }
    .campaign-flyout__progress { animation: none; transform: scaleX(1); }
}

@media print { .campaign-flyout { display: none !important; } }