.faq-route {
  --faq-bg-opacity: 0.54;
  --faq-card-bg: rgba(35, 18, 34, 0.64);
  --faq-card-bg-strong: rgba(72, 37, 63, 0.66);
  --faq-card-border: rgba(255, 150, 188, 0.25);
  background:
    radial-gradient(ellipse at 56% 18%, rgba(255, 203, 141, 0.2), transparent 38%),
    linear-gradient(180deg, #120812 0%, #0f0710 48%, #050305 100%) !important;
}

html {
  background: #050305;
}

.faq-route::before {
  background-image: url("/assets/backgrounds/dawn-bloom-faq.webp") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  opacity: var(--faq-bg-opacity) !important;
  filter: saturate(1.16) contrast(1.08) brightness(0.9);
  -webkit-filter: saturate(1.16) contrast(1.08) brightness(0.9);
  mix-blend-mode: normal !important;
}

.faq-route::after {
  background:
    radial-gradient(ellipse at 24% 32%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 31%, transparent 58%),
    radial-gradient(ellipse at 78% 36%, rgba(255, 131, 165, 0.14), transparent 36%),
    linear-gradient(90deg, rgba(5, 3, 5, 0.2) 0%, rgba(28, 10, 28, 0.4) 24%, rgba(16, 7, 16, 0.2) 50%, rgba(34, 14, 31, 0.44) 78%, rgba(5, 3, 5, 0.32) 100%),
    linear-gradient(180deg, rgba(5, 3, 5, 0.14) 0%, rgba(5, 3, 5, 0.36) 38%, rgba(5, 3, 5, 0.82) 86%, #050305 100%) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.faq-page {
  isolation: isolate;
  overflow-x: clip;
  background: transparent !important;
}

.faq-page .page-hero,
.faq-page .section {
  position: relative;
  z-index: 1;
}

.faq-page .page-hero {
  max-width: 880px;
  padding-bottom: 0.45rem;
}

.faq-page .page-hero + .section {
  padding-top: clamp(0.7rem, 2vw, 1.2rem);
}

.faq-page .page-hero h1,
.faq-page .page-hero .lead,
.faq-page .eyebrow {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.72);
}

.faq-page .faq-item,
.faq-page .faq-card,
.faq-page .download-bar {
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--faq-card-bg) !important;
  border-color: var(--faq-card-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 216, 154, 0.06), 0 14px 36px rgba(0, 0, 0, 0.18) !important;
}

.faq-page :is(.faq-item, .faq-card, .download-bar):is(:hover, :focus-within, [open], .is-active) {
  background: var(--faq-card-bg-strong) !important;
  border-color: rgba(255, 216, 154, 0.34) !important;
}

.faq-route {
  --faq-readable-text: rgba(255, 244, 236, 0.9);
  --faq-readable-muted: rgba(255, 231, 221, 0.82);
  --faq-readable-faint: rgba(255, 217, 199, 0.76);
}

.faq-page .page-hero .lead,
.faq-page .faq-answer,
.faq-page .faq-card p,
.faq-page .muted {
  color: var(--faq-readable-text) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.62);
}

.faq-page .faq-card p,
.faq-route .site-footer .muted,
.faq-route .brand-sub,
.faq-route .footer-bottom {
  color: var(--faq-readable-muted) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.58);
}

.faq-page .eyebrow {
  color: rgba(255, 224, 190, 0.86) !important;
}
@media (max-width: 860px) {
  .faq-route {
    --faq-bg-opacity: 0.36;
  }

  .faq-route::after {
    background:
      radial-gradient(ellipse at 50% 18%, rgba(255, 131, 165, 0.12), transparent 38%),
      linear-gradient(180deg, rgba(5, 3, 5, 0.52) 0%, rgba(5, 3, 5, 0.76) 46%, rgba(5, 3, 5, 0.95) 100%) !important;
  }
}

@media (max-width: 620px) {
  .faq-route {
    --faq-bg-opacity: 0.28;
  }
}