/* Homepage and shared frontend-component performance overrides. */

.home-page a {
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, opacity .22s ease, transform .22s ease;
}

.home-page .mega-menu:not(.active) {
    content-visibility: hidden;
    contain-intrinsic-size: 0 420px;
}

.home-page .mega-menu.active {
    content-visibility: visible;
}

.home-page .expert-section,
.home-page .h5-about-section,
.home-page .h5-features-section,
.home-page .why-royelhost-section,
.home-pricing-tabs-section,
.brand-footer,
.rh-section.rh-review-section {
    content-visibility: auto;
    contain: layout paint;
}

.home-page .expert-section {
    contain-intrinsic-size: auto 740px;
}

.home-page .h5-about-section,
.home-page .h5-features-section {
    contain-intrinsic-size: auto 680px;
}

.home-page .why-royelhost-section {
    contain-intrinsic-size: auto 920px;
}

.home-pricing-tabs-section {
    contain-intrinsic-size: auto 800px;
}

.faq-shell {
    /* FAQ is scrolled into view as a dense, expensive section. Rendering it
       normally avoids the one-time content-visibility reveal hitch on mobile. */
    content-visibility: visible;
    contain: layout paint;
}

.brand-footer {
    contain-intrinsic-size: auto 1120px;
}

.rh-section.rh-review-section {
    contain-intrinsic-size: auto 640px;
}

.faq-shell .rh-faq-collapse {
    overflow: clip;
    transition: opacity .16s ease;
}

.faq-shell .rh-faq-collapse[hidden],
.faq-shell .rh-faq-reveal-panel[hidden] {
    display: none !important;
    content-visibility: hidden;
    contain-intrinsic-size: 0 0;
}

.faq-shell .rh-faq-reveal-panel {
    max-height: none;
    overflow: clip;
    opacity: 1;
    transform: none;
    transition: opacity .16s ease;
    will-change: auto;
}

.home-pricing-load-state .btn-d {
    width: auto;
}

@media (max-width: 767px) {
    .home-page .navbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, .96) !important;
    }

    .home-page .hero-section::before,
    .home-page .hero-section::after,
    .faq-shell .faq-v1-wrap .faq-card .question-mark,
    .brand-footer::before {
        animation: none !important;
        filter: none !important;
    }

    .faq-shell .faq-v1-wrap .faq-card,
    .faq-shell .faq-v2-wrap .faq-v2-inner,
    .faq-shell .faq-v2-wrap .accordion-item.faq-v2-item,
    .pricing-section .plan-card,
    .pricing-section .bottom-cta {
        box-shadow: none !important;
    }

    .pricing-section .popular-ribbon {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .faq-shell .rh-faq-collapse,
    .faq-shell .rh-faq-reveal-panel,
    .pricing-section .feature-content,
    .pricing-section .feature-group,
    .rh-review-section .rh-review-card,
    .rh-review-section .rh-track {
        transition: none !important;
    }

    .brand-footer .footer-big-brand,
    .brand-footer .footer-big-brand::before,
    .brand-footer.is-brand-animated .footer-big-brand,
    .brand-footer.is-brand-animated .footer-big-brand::before,
    .marquee-line.is-running .marquee-track {
        animation: none !important;
        filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-page *::before,
    .home-page *::after,
    .faq-shell *,
    .faq-shell *::before,
    .faq-shell *::after,
    .brand-footer *,
    .brand-footer *::before,
    .brand-footer *::after,
    .rh-section.rh-review-section *,
    .rh-section.rh-review-section *::before,
    .rh-section.rh-review-section *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}