/* ==========================================================================
   FAQ (post 57) -> AGENT-LIST DARK MATCH (2026-07-26)
   --------------------------------------------------------------------------
   Same direct request as w9-agents/agent-pages-dark-match.css (the other 7
   agent/help-desk pages): FAQ must use the exact same colors/design as
   Agent List too. Scoped ENTIRELY to `body.page-id-57` — NOT the shared
   `w9-pillpage` class, which also covers About (12) and Terms (14): those
   two were never part of this request and stay on their existing light
   "premium pill" look (pages-pills.css) untouched.

   Palette identical to agent-pages-dark-match.css / agentlist-hero-cta-v2.css:
     bg gradient #0B0906 -> #15110A -> #17150F | gold #FFC72C
     heading #FBF6EC | muted #C9BFA6 / #8A8270 | card text #F3ECDD

   Loads after pages-pills.css (dependency) so it wins every cascade tie
   against the shared w9-pillpage light-card rules for this one page.
   ========================================================================== */

/* ---------- HERO ---------- */
body.page-id-57 .s5-ihero {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
	border-bottom: 1px solid rgba(255, 199, 44, .16);
	position: relative;
}
body.page-id-57 .s5-ihero.s5-wave-t::before,
body.page-id-57 .s5-ihero.s5-wave-b::after,
body.page-id-57 .s5-sec.s5-wave-t::before,
body.page-id-57 .s5-sec.s5-wave-b::after {
	background-image: none !important;
}
body.page-id-57 .s5-ihero .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}
body.page-id-57 .s5-ihero h1.elementor-heading-title { color: #FBF6EC !important; }
body.page-id-57 .s5-ihero .s5-lede p { color: #C9BFA6 !important; }

/* orbit visual: unlike the other 7 pages' simple text-only hero, FAQ's hero
   also holds a full-width 2-column category grid (.s5-jump) directly under
   the lede — there's no free right-hand column for an absolutely-positioned
   orbit to sit in without overlapping that grid's cards. Left out here
   rather than forced into a collision; every other element (colors, chips,
   accordion, category sections) still matches Agent List exactly. */
body.page-id-57 .s5-ihero .vk-alh-visual { display: none !important; }

/* ---------- FAQ stat pills (.s5-faqstat) ---------- */
body.page-id-57 .s5-faqstat span {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid rgba(255, 199, 44, .16);
	box-shadow: none !important;
	color: #C9BFA6 !important;
}
body.page-id-57 .s5-faqstat span b { color: #FFC72C !important; }

/* ---------- category jump grid (.s5-jump) ---------- */
body.page-id-57 .s5-jump li a {
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%) !important;
	border: 1px solid rgba(255, 199, 44, .16) !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35) !important;
	color: #F3ECDD !important;
}
body.page-id-57 .s5-jump li a:hover {
	border-color: rgba(255, 199, 44, .40) !important;
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .22) !important;
}
body.page-id-57 .s5-jump li a i {
	background: rgba(255, 199, 44, .12) !important;
	color: #FFC72C !important;
}

/* ---------- category sections (.s5-sec / .s5-sec--white) ---------- */
body.page-id-57 .s5-sec {
	background: linear-gradient(180deg, #0B0906 0%, #15110A 55%, #17150F 100%) !important;
}
body.page-id-57 .s5-eyebrow .elementor-heading-title {
	background: rgba(255, 199, 44, .12) !important;
	border: 1px solid rgba(255, 199, 44, .30);
	color: #FFC72C !important;
}
body.page-id-57 .s5-sechead .elementor-heading-title,
body.page-id-57 .s5-head { color: #FBF6EC !important; }
body.page-id-57 .s5-lede-c p { color: #C9BFA6 !important; }

/* ---------- accordion (.s5-faq) -> dark pill rows ---------- */
body.page-id-57 .s5-faq .elementor-accordion-item {
	background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%) !important;
	border: 1px solid rgba(255, 199, 44, .16) !important;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35) !important;
}
body.page-id-57 .s5-faq .elementor-accordion-item::after {
	background: radial-gradient(closest-side, #FFC72C, transparent 72%);
}
body.page-id-57 .s5-faq .elementor-accordion-item:hover {
	border-color: rgba(255, 199, 44, .40) !important;
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .22) !important;
}
body.page-id-57 .s5-faq .elementor-accordion-item:has(.elementor-tab-title.elementor-active) {
	border-color: rgba(255, 199, 44, .45) !important;
	box-shadow: 0 16px 38px -6px rgba(255, 199, 44, .26) !important, 0 0 0 1px rgba(255, 199, 44, .14) inset !important;
}
body.page-id-57 .s5-faq .elementor-tab-title { color: #F3ECDD !important; }
body.page-id-57 .s5-faq .elementor-tab-title:hover,
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active { color: #FFC72C !important; }
body.page-id-57 .s5-faq .elementor-tab-title::before,
body.page-id-57 .s5-faq .s5-tnum {
	background: rgba(255, 199, 44, .12) !important;
	border-color: rgba(255, 199, 44, .30) !important;
	color: #FFC72C !important;
}
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active::before,
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active .s5-tnum {
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
	color: #1A0F02 !important;
}
body.page-id-57 .s5-faq .elementor-accordion-icon.elementor-accordion-icon-left {
	background: rgba(255, 255, 255, .06) !important;
	border-color: rgba(255, 199, 44, .18) !important;
	color: #F3ECDD !important;
}
body.page-id-57 .s5-faq .elementor-tab-title:hover .elementor-accordion-icon,
body.page-id-57 .s5-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: linear-gradient(150deg, #FFD34D 0%, #C8860B 100%) !important;
	color: #1A0F02 !important;
}
body.page-id-57 .s5-faq .elementor-tab-content { color: #C9BFA6 !important; }
body.page-id-57 .s5-faq .elementor-tab-content p { color: #C9BFA6 !important; }
body.page-id-57 .s5-faq .elementor-tab-content strong { color: #F3ECDD !important; }
body.page-id-57 .s5-faq .elementor-tab-content h3 { color: #FBF6EC !important; }
body.page-id-57 .s5-faq .elementor-tab-content a { color: #FFC72C !important; }