/* ===== FINAL MOBILE VISIBILITY + HERO PERFORMANCE FIX =====
           Dynamic cards start hidden for their reveal observers. On mobile,
           keep real content visible permanently so scrolling cannot make it
           disappear when an observer or compositor state changes. */
        @media (max-width: 639px) {
            .hero-fade,
            .hero-fade-safe,
            .scroll-reveal,
            #bullet-cards > *,
            #problem-cards > *,
            #solution-steps .group,
            #product-cards > *,
            #credential-cards > *,
            #benefit-cards > *,
            #testimonial-cards > *,
            #bonus-cards > *,
            #pricing-cards > *,
            #offer-table,
            #value-stack,
            #final-cta-card,
            #faq-accordion > * {
                opacity: 1 !important;
                transform: none !important;
                filter: none !important;
                visibility: visible !important;
            }

            #bullet-cards,
            #problem-cards,
            #solution-steps,
            #product-cards,
            #credential-cards,
            #benefit-cards,
            #testimonial-cards,
            #bonus-cards,
            #pricing-cards,
            #offer-table,
            #value-stack,
            #final-cta-card,
            #faq-accordion {
                opacity: 1 !important;
                visibility: visible !important;
            }
        }

        /* Disable paint containment/content-visibility on mobile. These browser
           optimizations can briefly blank composited content during fast scroll. */
        @media (max-width: 639px) {
            body > section,
            body > footer,
            body > section > *,
            body > footer > * {
                content-visibility: visible !important;
                contain: none !important;
            }

            #hero, #bullets, #problem, #solution, #credentials, #benefits,
            #testimonials, #offer, #bonuses, #pricing, #final-cta, #faq,
            #products {
                contain: none !important;
                overflow: visible !important;
            }
        }

        /* The hero is static for fast paint. Stars are the only exception. */
        #hero,
        #hero * {
            animation: none !important;
            transition: none !important;
        }

        #hero .ri-star-fill.animate-star-glow {
            animation: star-glow-pulse 2s ease-in-out infinite !important;
        }

        /* The mobile trust badge is the only non-star hero animation. */
        #hero #mobile-trust .mobile-trust-slide {
            animation: mobile-trust-slide 2.5s ease-in-out both !important;
        }

        /* Remove the white shine from the top urgency bar and hero CTA. */
        body > div:first-child .animate-shimmer-skew,
        #hero .btn-cta-warm::after {
            display: none !important;
            animation: none !important;
            opacity: 0 !important;
        }

        /* Product category marquee below the hero testimonial. */
        .hero-category-marquee {
            overflow: hidden;
            width: 100%;
            cursor: pointer;

            max-width: 42rem;
            margin: 1.5rem auto 0;
            padding: 0.75rem 0;
            border-top: 1px solid rgba(217, 119, 6, 0.18);
            border-bottom: 1px solid rgba(217, 119, 6, 0.18);
            -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        }
        #hero         .hero-category-track {
            display: flex;
            width: max-content;
            animation: category-marquee 28s linear infinite !important;
            animation-delay: 0s !important;
            will-change: transform;
        }
        .hero-category-group {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        .hero-category-item {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0 0.9rem;
            color: oklch(var(--foreground-700));
            font-size: 0.8rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .hero-category-item::after {
            content: "•";
            color: #f59e0b;
            font-size: 1.1rem;
        }
        @keyframes category-marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        @media (prefers-reduced-motion: reduce) {
            #hero .hero-category-track {
                animation: none !important;
            }
        }

        /* The marquee is decorative, not selectable text or an interactive control. */
        .hero-category-marquee,
        .hero-category-marquee * {
            cursor: default !important;
            -webkit-user-select: none !important;
            user-select: none !important;
        }