/* ==========================================================================
   FLICKNEXS TYPOGRAPHY UNIFICATION
   Single source of truth for all font rules across the site.
   Reference: Flicknexs Homepage.dc.html
   ========================================================================== */

:root {
  --font-serif: 'Cormorant Garamond', var(--font-cormorant-garamond), Georgia, serif;
  --font-sans: 'Hanken Grotesk', var(--font-hanken-grotesk), system-ui, -apple-system, sans-serif;
  --font-jakarta: var(--font-sans);
  --color-text: #282233;
  --color-heading: #17121f;
  --color-muted: #4e4757;
  --color-gold: #845f20;
  --color-purple: #3f2170;
}

/* ==========================================================================
   HEADINGS — Cormorant Garamond, weight 400
   H1: clamp(40px, 6vw, 74px) / 1.02, letter-spacing: -0.015em, color: #17121f
   H2: clamp(34px, 4.6vw, 60px) / 1.05, letter-spacing: -0.01em, color: #17121f
   H3: clamp(20px, 1.8vw, 26px) / 1.25 (section-level)
   ========================================================================== */
h1:not(footer *):not(#support *),
main h1:not(footer *):not(#support *),
.home-sections h1:not(footer *):not(#support *),
.fnx-h1,
.h1 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--color-heading) !important;
  letter-spacing: -0.015em !important;
  font-size: clamp(40px, 6vw, 74px) !important;
  line-height: 1.02 !important;
}

/* Force nested spans inside H1 to inherit 400 font-weight and serif */
h1:not(footer *):not(#support *) span,
main h1:not(footer *):not(#support *) span,
.home-sections h1:not(footer *):not(#support *) span,
.fnx-h1 span,
.h1 span {
  font-family: inherit !important;
  font-weight: 400 !important;
  letter-spacing: inherit !important;
}

/* Italic accent words inside H1 (e.g. streaming) */
h1:not(footer *):not(#support *) em,
main h1:not(footer *):not(#support *) em,
.home-sections h1:not(footer *):not(#support *) em,
.fnx-h1 em,
.h1 em {
  font-family: inherit !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--color-purple, #3f2170) !important;
}

/* Section H2 Headings — Exact Homepage Spec: Cormorant Garamond, 400, clamp(34px, 4.6vw, 60px), 1.05 */
h2:not(.demo-popup-title):not([class*="demo-popup"]):not(.quick-answer-title):not(#quick-answer h2):not(footer *):not(#support *),
main h2:not(.demo-popup-title):not([class*="demo-popup"]):not(.quick-answer-title):not(#quick-answer h2):not(footer *):not(#support *),
.home-sections h2:not(.demo-popup-title):not([class*="demo-popup"]):not(.quick-answer-title):not(#quick-answer h2):not(footer *):not(#support *),
.fnx-h2,
.h2 {
  font-family: var(--font-serif) !important;
  font-size: clamp(34px, 4.6vw, 60px) !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--color-heading) !important;
  letter-spacing: -0.01em !important;
}

h2:not(.demo-popup-title):not([class*="demo-popup"]):not(.quick-answer-title):not(#quick-answer h2):not(footer *):not(#support *) span,
main h2:not(.demo-popup-title):not([class*="demo-popup"]):not(.quick-answer-title):not(#quick-answer h2):not(footer *):not(#support *) span,
.home-sections h2:not(.demo-popup-title):not([class*="demo-popup"]):not(.quick-answer-title):not(#quick-answer h2):not(footer *):not(#support *) span,
.fnx-h2 span,
.h2 span {
  font-family: inherit !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Quick Answer Title — Matching Enterprise CTA H2 Spec */
.quick-answer-title,
#quick-answer h2 {
  font-family: var(--font-serif) !important;
  font-size: clamp(36px, 5vw, 66px) !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  color: #17121f !important;
  letter-spacing: -0.01em !important;
}

/* Section H3 Headings */
h3:not(.demo-popup-title):not(.fnx-platform-name):not(footer *):not(#support *),
main h3:not(.demo-popup-title):not(.fnx-platform-name):not(footer *):not(#support *),
.home-sections h3:not(.demo-popup-title):not(.fnx-platform-name):not(footer *):not(#support *),
.fnx-h3,
.h3 {
  font-family: var(--font-serif) !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--color-heading) !important;
}

/* ==========================================================================
   POPUP MODAL HEADINGS (Isolated from large clamp rules)
   ========================================================================== */
.demo-popup-title,
h2.demo-popup-title,
[class*="demo-popup"] h2 {
  font-family: var(--font-serif) !important;
  font-size: 1.5rem !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  color: #17121f !important;
  white-space: normal !important;
  letter-spacing: -0.01em !important;
}

/* ==========================================================================
   BODY TEXT — Hanken Grotesk, weight 400-500
   Desktop/tablet: clamp(18px, 1.45vw, 21.5px) / 1.7
   Mobile (≤639px): 16px / 1.6
   ========================================================================== */
main p:not(footer *):not(#support *):not(.demo-popup-desc):not([class*="demo-popup"] *):not(#demo-popup *):not(.demo-popup-subtitle):not(.demo-popup-note):not(.demo-popup-privacy):not(.fnx-fineprint),
.home-sections p:not(footer *):not(#support *):not(.demo-popup-desc):not([class*="demo-popup"] *):not(#demo-popup *):not(.demo-popup-subtitle):not(.demo-popup-note):not(.demo-popup-privacy):not(.fnx-fineprint) {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  color: var(--color-text, #282233);
  font-size: clamp(18px, 1.45vw, 21.5px);
  line-height: 1.7;
}

/* Fine-print & disclaimer footnotes — always stay small & muted, never inherit body clamp */
.fnx-fineprint,
[class*="fnx-fineprint"],
span.fnx-fineprint {
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #6b6577 !important;
  font-weight: 400 !important;
}

.hero-subtitle,
.fnx-hero-lead {
  font-size: clamp(20px, 1.75vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1.68 !important;
  color: #282233 !important;
}

.section-subtitle-text,
.fnx-section-lead {
  font-size: clamp(19px, 1.55vw, 22.5px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #373142 !important;
}

/* Explicit Demo Popup Typography Rules */
.demo-popup-subtitle {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #64748b !important;
}

.demo-popup-note {
  font-size: 9.5px !important;
  line-height: 1.25 !important;
  color: #94a3b8 !important;
}

.demo-popup-privacy {
  font-size: 9.5px !important;
  line-height: 1.25 !important;
  color: #94a3b8 !important;
}

/* ==========================================================================
   EYEBROW LABELS — Clean text styling only
   ========================================================================== */
.section-subtitle,
.fnx-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-size: 11.5px;
}

/* ==========================================================================
/* ==========================================================================
   UNIFIED SECTION BADGES — Exact Hero Badge Standard
   Pill border, brand purple dot (#3f2170), text 11.5px semi-bold uppercase tracking-[0.22em]
   ========================================================================== */
div[class*="rounded-full"][class*="border"][class*="px-5"][class*="py-2"],
div[class*="rounded-full"][class*="border"][class*="px-4"][class*="py-1.5"],
div[class*="rounded-full"][class*="border"][class*="px-3.5"][class*="py-1"],
.fnx-section-badge {
  border: 1px solid rgba(23, 18, 31, 0.14) !important;
}

div[class*="rounded-full"][class*="border"] span[class*="rounded-full"][class*="bg-"] {
  background-color: #3f2170 !important;
}

div[class*="rounded-full"][class*="border"] span[class*="tracking-"] {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #17121f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.22em !important;
}

/* ==========================================================================
   HERO STAT NUMBERS — Cormorant Garamond, weight 400
   ========================================================================== */
main div[class*="sm:text-3xl"][class*="md:text-4xl"][class*="font-bold"],
.home-sections div[class*="sm:text-3xl"][class*="md:text-4xl"][class*="font-bold"],
.fnx-stat-number {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-text);
}

.card-num,
.home-sections .card-num {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-gold);
}

/* ==========================================================================
   STEP NUMBER BADGES & CONNECTORS — Unified to Homepage Purple & Lavender
   ========================================================================== */
div[class*="bg-gradient-to-br"][class*="from-violet-600"],
div[class*="bg-gradient-to-br"][class*="from-purple-600"],
div[class*="bg-gradient-to-br"][class*="from-pink-600"],
div[class*="bg-gradient-to-r"][class*="from-violet-600"] {
  background: #efe9f6 !important;
  color: #3f2170 !important;
  border: 1px solid rgba(63, 33, 112, 0.15) !important;
  box-shadow: 0 1px 3px rgba(63, 33, 112, 0.08) !important;
}

div[class*="bg-gradient-to-br"][class*="from-violet-600"] span,
div[class*="bg-gradient-to-br"][class*="from-purple-600"] span,
div[class*="bg-gradient-to-br"][class*="from-pink-600"] span,
div[class*="bg-gradient-to-r"][class*="from-violet-600"] span {
  color: #3f2170 !important;
  font-family: var(--font-serif) !important;
}

.group:hover div[class*="bg-gradient-to-br"][class*="from-violet-600"],
.group:hover div[class*="bg-gradient-to-br"][class*="from-purple-600"],
.group:hover div[class*="bg-gradient-to-br"][class*="from-pink-600"] {
  background: #3f2170 !important;
  color: #ffffff !important;
}

.group:hover div[class*="bg-gradient-to-br"][class*="from-violet-600"] span,
.group:hover div[class*="bg-gradient-to-br"][class*="from-purple-600"] span,
.group:hover div[class*="bg-gradient-to-br"][class*="from-pink-600"] span {
  color: #ffffff !important;
}

div[class*="bg-gradient-to-r"][class*="from-violet-200"],
div[class*="bg-gradient-to-r"][class*="from-purple-200"] {
  background: rgba(63, 33, 112, 0.12) !important;
}

/* ==========================================================================
   EMPHASIZED ITALIC TEXT
   ========================================================================== */
main em,
.home-sections em {
  font-style: italic;
  color: var(--color-purple);
}

/* ==========================================================================
   HERO SECTION BACKGROUND — Only explicit hero containers
   ========================================================================== */
section#hero,
section.hero,
.fnx-hero-section {
  background-color: #f4f0ea;
}

/* ==========================================================================
   FAQ ACCORDION STYLING
   ========================================================================== */
main section#faq {
  background-color: #fbf9f5;
}

main details summary {
  font-family: var(--font-sans);
  list-style: none;
}

main details summary::-webkit-details-marker {
  display: none;
}

main details summary>span:first-of-type,
main details summary span:first-child {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

main details>div {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
}

/* ==========================================================================
   DECORATIVE UNDERLINE REMOVAL
   ========================================================================== */
h1,
h2,
h3,
h4,
h1 span,
h2 span,
h3 span,
h4 span,
h1 em,
h2 em,
h3 em,
h4 em,
.fnx-h1,
.fnx-h2,
.fnx-h3,
.fnx-h1 span,
.fnx-h2 span,
.fnx-h3 span {
  text-decoration: none;
  border-bottom: none;
}

h1::after,
h2::after,
h3::after,
h4::after,
h1 span::after,
h2 span::after,
h3 span::after,
h1::before,
h2::before,
h3::before,
.fnx-h1::after,
.fnx-h2::after,
.fnx-h3::after,
.fnx-h1 span::after,
.fnx-h2 span::after {
  display: none;
  border-bottom: none;
  background: none;
  height: 0;
}

/* ==========================================================================
   MOBILE RESPONSIVE — ≤639px
   ========================================================================== */
@media (max-width: 639px) {

  main p,
  .home-sections p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  main h3,
  .home-sections h3 {
    font-size: 1.2rem;
    line-height: 1.3;
  }
}

/* ==========================================================================
   TABLE HEADER TYPOGRAPHY — Dark headers get white text, light headers get dark text
   ========================================================================== */
thead[class*="bg-slate-900"] th,
thead[class*="bg-gray-900"] th,
thead[class*="bg-black"] th,
thead[class*="bg-[#17121f]"] th,
thead[class*="bg-[#3f2170]"] th,
thead[class*="bg-[#0b1120]"] th,
thead tr[class*="bg-slate-900"] th,
thead tr[class*="bg-gray-900"] th,
thead tr[class*="bg-black"] th,
thead tr[class*="bg-[#17121f]"] th,
thead tr[class*="bg-[#3f2170]"] th,
thead tr[class*="bg-[#0b1120]"] th {
  color: #ffffff !important;
}

thead[class*="bg-[#faf8f5]"] th,
thead[class*="bg-[#fbf9f5]"] th,
thead[class*="bg-slate-50"] th,
thead[class*="bg-gray-50"] th,
thead[class*="bg-white"] th,
thead tr[class*="bg-[#faf8f5]"] th,
thead tr[class*="bg-[#fbf9f5]"] th,
thead tr[class*="bg-slate-50"] th,
thead tr[class*="bg-gray-50"] th,
thead tr[class*="bg-white"] th {
  color: #17121f;
}

/* ==========================================================================
   FOOTER ISOLATION — Exact Staging2 Fonts
   ========================================================================== */
footer,
footer *,
#support,
#support * {
  font-family: var(--font-sans) !important;
}

footer h3,
#support h3 {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ==========================================================================
   GLOBAL BUTTON & CTA BORDER RADIUS & HOVER CONSISTENCY
   ========================================================================== */
button,
a[role="button"],
a[data-event="cta_click"],
a[data-cta],
a[class*="px-"][class*="py-"][class*="bg-"],
button[class*="px-"][class*="py-"],
a[class*="bg-[#3f2170]"],
button[class*="bg-[#3f2170]"],
a[class*="bg-slate-100"][class*="px-"],
a[class*="bg-white"][class*="px-"][class*="py-"][class*="shadow"],
.btn,
.cta-btn {
  border-radius: 2px !important;
}

/* Brand Purple CTA Buttons: Consistent #3f2170 on hover, no dark shift, no hover shadow, no transform */
a[class*="bg-[#3f2170]"],
button[class*="bg-[#3f2170]"],
a[class*="bg-[#3f2170]"]:hover,
button[class*="bg-[#3f2170]"]:hover,
main a[class*="bg-[#3f2170]"]:hover,
main button[class*="bg-[#3f2170]"]:hover,
main a[class*="border-blue-500"]:hover,
main button[class*="border-blue-500"]:hover,
main a.btn[href*="/trial"]:hover,
main a.btn-trial:hover,
main a[class*="rounded-"][href*="/trial"]:not([class*="text-[#3f2170]"]):hover,
main a[class*="rounded-"][href*="/request-playout-trial"]:hover,
main a[data-event="cta_click"]:hover,
main a.btn-primary:hover,
main button.btn-primary:hover,
main a.nav-cta:hover,
main .btn-plan:hover,
main a[class*="rounded-none"][class*="bg-"]:hover {
  background-color: #3f2170 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Ensure inline text links never get a solid background on hover */
main a[class*="text-[#3f2170]"]:not([class*="btn"]):not([class*="rounded-2px"]):hover,
#platform-availability a:hover,
#platform-availability a {
  background-color: transparent !important;
  background-image: none !important;
}

/* ==========================================================================
   LOGO CLOUD — Clean Seamless Logos
   ========================================================================== */
.logo-card-custom,
.logo-card-custom:hover,
#img_logo .logo-card-custom,
#img_logo .logo-card-custom:hover,
main section#img_logo .logo-card-custom,
main section#img_logo .logo-card-custom:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* ==========================================================================
   GLOBAL CARD & CONTAINER STANDARDIZATION
   Normalizes all cards across the application to Homepage design tokens:
   - 8px border radius (no loud 2xl/3xl/2.5rem corners)
   - Subtle 1px border rgba(23, 18, 31, 0.08)
   - Flat/subtle shadow (no harsh dark shadows)
   ========================================================================== */
main div[class*="rounded-3xl"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
main div[class*="rounded-2xl"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
main div[class*="rounded-[2.5rem]"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
main section div[class*="rounded-3xl"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
main section div[class*="rounded-2xl"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
main section div[class*="rounded-[2.5rem]"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
.home-sections div[class*="rounded-3xl"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
.home-sections div[class*="rounded-2xl"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
.home-sections div[class*="rounded-[2.5rem]"]:not([class*="rounded-full"]):not([class*="w-"]):not([class*="h-"]),
main details[class*="rounded-"] {
  border-radius: 8px !important;
}

/* Soften all harsh box shadows on cards and containers */
main div[class*="shadow-2xl"],
main div[class*="shadow-xl"],
main section div[class*="shadow-2xl"],
main section div[class*="shadow-xl"],
.home-sections div[class*="shadow-2xl"],
.home-sections div[class*="shadow-xl"] {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
}

/* FAQ Details Normalization */
main details {
  border-radius: 8px !important;
  border-color: rgba(23, 18, 31, 0.08) !important;
}

/* ==========================================================================
   HOMEPAGE BACKGROUND PALETTE UNIFICATION
   Normalizes cold gray/slate backgrounds to warm homepage tones:
   - #f4f0ea: Hero sections & primary ambient backgrounds
   - #fbf9f5: Alternating section backgrounds & subtle cards
   - #ffffff: Crisp white sections & cards
   - #efe9f6: Brand light purple accents, icon containers & highlights
   ========================================================================== */
main section.bg-slate-50,
main section.bg-gray-50,
main section.bg-gray-100,
main section.bg-slate-100,
main section[class*="bg-slate-50"],
main section[class*="bg-gray-50"],
main div[class*="bg-slate-50"],
main div[class*="bg-gray-50"],
.home-sections section.bg-slate-50,
.home-sections section.bg-gray-50,
.home-sections section[class*="bg-slate-50"],
.home-sections section[class*="bg-gray-50"] {
  background-color: #fbf9f5 !important;
}

/* Gradient Hero fallback overrides */
main section[class*="from-slate-50"],
main section[class*="from-gray-50"],
main section:first-of-type[class*="bg-slate"],
main section:first-of-type[class*="bg-gray"] {
  background: #f4f0ea !important;
  background-color: #f4f0ea !important;
  background-image: none !important;
}

/* Hero section background color standard */
main section#hero,
main section.hero {
  background-color: #f4f0ea !important;
}

/* Border normalization across cards & sections */
main div[class*="border-slate-200"],
main div[class*="border-gray-200"],
main div[class*="border-slate-100"],
main div[class*="border-gray-100"] {
  border-color: rgba(23, 18, 31, 0.08) !important;
}

/* Rounded standard for cards (8px) */
main div[class*="rounded-3xl"]:not(.demo-popup *):not([class*="demo-popup"] *),
main div[class*="rounded-2xl"]:not(.demo-popup *):not([class*="demo-popup"] *),
main div[class*="rounded-xl"]:not(.demo-popup *):not([class*="demo-popup"] *) {
  border-radius: 8px !important;
}

/* ==========================================================================
   HOMEPAGE CARD & LIST TEXT SIZE NORMALIZATION
   Ensures no card or list item has tiny, unreadable font
   ========================================================================== */
main .card p,
main div[class*="rounded-"] > p:not(.demo-popup-desc):not([class*="demo-popup"] *):not(#demo-popup *):not(.demo-popup-subtitle):not(.demo-popup-note):not(.demo-popup-privacy):not(.toast *),
main li:not(footer *):not(#support *):not(.demo-popup *):not([class*="demo-popup"] *),
main div[class*="border"] p:not(.demo-popup-desc):not([class*="demo-popup"] *):not(#demo-popup *):not(.demo-popup-subtitle):not(.demo-popup-note):not(.demo-popup-privacy):not(.toast *) {
  font-size: clamp(15.5px, 1.1vw, 16.5px) !important;
  line-height: 1.65 !important;
}

/* Eyebrows / Badges Standard */
main span[class*="tracking-[0.22em]"],
main span[class*="tracking-widest"],
main span[class*="tracking-wider"],
main span[class*="uppercase"][class*="text-xs"],
main span[class*="uppercase"][class*="text-[11px]"] {
  font-family: var(--font-sans) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Card list item check badges standard */
main div[class*="rounded-md"][class*="bg-[#efe9f6]"],
main div[class*="rounded-lg"][class*="bg-[#efe9f6]"],
main span[class*="rounded-md"][class*="bg-[#efe9f6]"],
main span[class*="rounded-lg"][class*="bg-[#efe9f6]"] {
  background-color: #efe9f6 !important;
  color: #3f2170 !important;
}

/* Section and table border unification */
main section[class*="border-slate"],
main section[class*="border-gray"],
main table tr[class*="border-slate"],
main table tr[class*="border-gray"],
main table td,
main table th {
  border-color: rgba(23, 18, 31, 0.08) !important;
}

/* Global body paragraph minimum legibility */
main section > div p:not(.demo-popup-desc):not([class*="demo-popup"] *):not(#demo-popup *):not(.demo-popup-subtitle):not(.demo-popup-note):not(.demo-popup-privacy):not(footer *):not(.toast *) {
  font-size: clamp(15.5px, 1.1vw, 16.5px);
  line-height: 1.65;
}

/* Pills and Badges subtle background normalization */
main span[class*="bg-slate-100"],
main span[class*="bg-slate-50"],
main span[class*="bg-gray-100"],
main span[class*="bg-gray-50"] {
  background-color: #fbf9f5 !important;
  border-color: rgba(23, 18, 31, 0.08) !important;
  color: #17121f !important;
}

/* ==========================================================================
   FAQ SECTION TYPOGRAPHY UNIFICATION
   Single source of truth matching /migrate-from-muvi spec across all pages:
   - Section Title: Cormorant Garamond, 400, #17121f with purple accent
   - Question: Cormorant Garamond, 400, normal, #17121f, clamp(20px, 1.8vw, 24px)
   - Answer: Hanken Grotesk, 400, 16px / 1.7, #373142
   ========================================================================== */

/* FAQ Section Headings */
#faq h2,
#faqs h2,
.faq h2,
.faq-section h2,
section[id*="faq"] h2 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--color-heading, #17121f) !important;
}

#faq h2 span,
#faqs h2 span,
.faq h2 span,
.faq-section h2 span,
section[id*="faq"] h2 span {
  font-family: inherit !important;
  font-weight: 400 !important;
}

/* FAQ Subtitle */
#faq > div > div > p,
#faqs > div > div > p,
.faq .section-desc,
section[id*="faq"] > div > div > p {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: #373142 !important;
  line-height: 1.65 !important;
}

/* FAQ Accordion Question Headers */
#faq summary span:not([class*="rounded"]):not([class*="w-8"]):not([class*="badge"]),
#faq summary h3,
#faq button:not([role="tab"]) h3,
#faq button:not([role="tab"]) > span:first-child,
#faq [role="button"]:not([role="tab"]) span,
#faq [role="button"]:not([role="tab"]) h3,
#faqs summary span:not([class*="rounded"]):not([class*="w-8"]):not([class*="badge"]),
#faqs summary h3,
#faqs button:not([role="tab"]) h3,
#faqs button:not([role="tab"]) > span:first-child,
.faq summary span:not([class*="rounded"]):not([class*="w-8"]):not([class*="badge"]),
.faq summary h3,
.faq button:not([role="tab"]) h3,
.faq button:not([role="tab"]) > span:first-child,
.faq-question,
.faq-accordion-title,
section[id*="faq"] summary span:not([class*="rounded"]):not([class*="w-8"]):not([class*="badge"]),
section[id*="faq"] summary h3,
section[id*="faq"] button:not([role="tab"]) h3,
section[id*="faq"] button:not([role="tab"]) > span:first-child,
section[id*="faq"] [role="button"]:not([role="tab"]) span {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(20px, 1.8vw, 24px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #17121f !important;
}

/* FAQ Accordion Answers */
#faq summary ~ div p,
#faq summary ~ div div,
#faq button:not([role="tab"]) + div p,
#faq button:not([role="tab"]) + div div,
#faq [role="region"] p,
#faq [role="region"] div,
#faqs summary ~ div p,
#faqs summary ~ div div,
#faqs button:not([role="tab"]) + div p,
#faqs button:not([role="tab"]) + div div,
.faq summary ~ div p,
.faq summary ~ div div,
.faq button:not([role="tab"]) + div p,
.faq button:not([role="tab"]) + div div,
.faq-answer,
.faq-accordion-content,
section[id*="faq"] summary ~ div p,
section[id*="faq"] summary ~ div div,
section[id*="faq"] button:not([role="tab"]) + div p,
section[id*="faq"] button:not([role="tab"]) + div div {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #373142 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}