.megapot-wrapper p {
    font-size: 16px;
}

.megapot-btn {
    background-color: #6b7fe0;
}

/* ============================================================
   MEGAPOT: Landing page section (desktop promo column / mobile banner)
   ============================================================ */
.section_megapot {
    padding: 40px 20px;
    text-align: center;
}

.megapot-heading {
    max-width: 500px;
    margin: 0 auto 24px;
}
.megapot-heading h3 {
    font-size: 1.75rem;
    margin: 8px 0;
    color: #1a1a1a;
}
.megapot-heading p {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
}

/* Desktop: promo column (hidden on mobile) */
.desktop-promo-column {
    display: none;
}
.megapot-landing-desktop-img {
    max-width: 728px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    animation: megapotPromoPulse 2.5s ease-in-out infinite;
}
@keyframes megapotPromoPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(218, 165, 32, 0); }
    50% { transform: scale(1.02); box-shadow: 0 0 20px rgba(218, 165, 32, 0.35); }
}

.promo-ticker {
    max-width: 400px;
    margin: 12px auto 0;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    height: 28px;
    position: relative;
}
.promo-ticker span {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    opacity: 0;
    animation: megapotTicker 9s infinite;
}
.promo-ticker span:nth-child(1) { animation-delay: 0s; }
.promo-ticker span:nth-child(2) { animation-delay: 3s; }
.promo-ticker span:nth-child(3) { animation-delay: 6s; }
@keyframes megapotTicker {
    0%, 5% { opacity: 0; transform: translateY(10px); }
    10%, 28% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* Fallback: if animations are disabled/unsupported, show the first message statically */
@media (prefers-reduced-motion: reduce) {
    .promo-ticker span { animation: none; opacity: 0; }
    .promo-ticker span:first-child { opacity: 1; }
}

/* Mobile: single in-article banner (visible by default, hidden on desktop) */
.megapot-landing-mobile {
    display: block;
}
.megapot-landing-mobile-img {
    max-width: 90%;
    width: 300px;
    height: auto;
    border-radius: 8px;
}

/* Breakpoint: switch between the two — matches the site's existing 719px breakpoint */
@media (min-width: 720px) {
    .desktop-promo-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .megapot-landing-mobile {
        display: none;
    }
}