/* The original site.js scroll-title animation (splitTitleWords) rebuilt the
   [data-rmx-scroll-title] h1 from its plain textContent, which dropped the
   inner <span class="text-primary"> — so the rendered hero title was
   uniformly ink-colored. Reproduce that visible end state statically. */
.rmx-faq-hero .rmx-section-title .text-primary {
    color: inherit !important;
}

/* Ported verbatim from Views/Shared/Sections/_FrontCtaCard.cshtml inline <style>. */
.cta-premium {
    background: linear-gradient(135deg,
        rgba(var(--rmx-primary-rgb), 0.12) 0%,
        rgba(var(--rmx-primary-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--rmx-primary-rgb), 0.2);
    border-radius: 1.5rem;
    padding: 3.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.cta-premium::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 50%;
    height: 150%;
    background: radial-gradient(circle, rgba(var(--rmx-primary-rgb), 0.08), transparent 60%);
}

.cta-premium::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 40%;
    height: 100%;
    background: radial-gradient(circle, rgba(var(--rmx-primary-rgb), 0.06), transparent 60%);
}

/* Static <details>-based accordion support (replaces the original page-script
   .active toggling — mirrors the .rmx-accordion-item.active rules in
   front-polish.css so the accordion works without JavaScript). */
summary.rmx-accordion-header {
    list-style: none;
}

    summary.rmx-accordion-header::-webkit-details-marker,
    summary.rmx-accordion-header::marker {
        display: none;
    }

details.rmx-accordion-item[open] > .rmx-accordion-body {
    max-height: none;
}

details.rmx-accordion-item[open] .rmx-accordion-icon {
    transform: rotate(180deg);
    background: linear-gradient(135deg, var(--rmx-primary), #00d4aa);
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--rmx-primary-rgb), 0.4);
}