.support-route {
  --support-bg-opacity: 0.58;
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255, 58, 50, 0.22), transparent 38%),
    linear-gradient(180deg, #080203 0%, #070203 48%, #020101 100%) !important;
}

html {
  background: #020101;
}

.support-route::before {
  background-image: url("/assets/backgrounds/crimson-starforge-support.webp") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  filter: saturate(1.22) contrast(1.1) brightness(0.92);
  -webkit-filter: saturate(1.22) contrast(1.1) brightness(0.92);
  opacity: var(--support-bg-opacity) !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

.support-route::after {
  background:
    radial-gradient(ellipse at 22% 32%, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.34) 30%, transparent 56%),
    radial-gradient(ellipse at 78% 36%, rgba(255, 48, 42, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(2, 1, 1, 0.18) 0%, rgba(12, 2, 3, 0.36) 22%, rgba(5, 1, 2, 0.18) 50%, rgba(12, 2, 3, 0.44) 78%, rgba(2, 1, 1, 0.28) 100%),
    linear-gradient(180deg, rgba(2, 1, 2, 0.08) 0%, rgba(2, 1, 2, 0.26) 38%, rgba(2, 1, 2, 0.72) 86%, #020101 100%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

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

.support-page .page-hero,
.support-page .article-grid {
  position: relative;
  z-index: 1;
}

.support-page .page-hero {
  max-width: 880px;
}

/* Disable every support-card pseudo layer and every inherited glow/compositing effect. */
.support-page .article-grid::before,
.support-page .article-grid::after,
.support-page .article-aside::before,
.support-page .article-aside::after,
.support-page .article-nav::before,
.support-page .article-nav::after,
.support-page .article-nav a::before,
.support-page .article-nav a::after,
.support-page .article-card::before,
.support-page .article-card::after,
.support-page .callout::before,
.support-page .callout::after,
.support-route .mock-card::before,
.support-route .mock-card::after,
.support-route .feature-card::before,
.support-route .feature-card::after,
.support-route .info-card::before,
.support-route .info-card::after,
.support-route .use-card::before,
.support-route .use-card::after,
.support-route .plan-card::before,
.support-route .plan-card::after,
.support-route .faq-card::before,
.support-route .faq-card::after,
.support-route .download-bar::before,
.support-route .download-bar::after,
.support-route .faq-item::before,
.support-route .faq-item::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.support-page .article-grid,
.support-page .article-aside,
.support-page .article-nav,
.support-page .article-nav a,
.support-page .article-card,
.support-page .callout {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  isolation: auto !important;
  contain: none !important;
}

/* Cards are intentionally almost transparent. The old black rectangles were card surfaces/composited glows, not content. */
.support-page .article-card,
.support-page .callout,
.support-page .article-nav a {
  position: relative;
  overflow: hidden;
  background: rgba(255, 76, 96, 0.026) !important;
  background-color: rgba(255, 76, 96, 0.026) !important;
  background-image: none !important;
  background-clip: padding-box !important;
  border-color: rgba(255, 76, 96, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 176, 103, 0.045) !important;
  text-shadow: none !important;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease !important;
}

.support-page .article-nav a {
  background: rgba(255, 176, 103, 0.018) !important;
  background-color: rgba(255, 176, 103, 0.018) !important;
  border-color: rgba(214, 170, 95, 0.18) !important;
}

.support-page .article-card:hover,
.support-page .callout:hover,
.support-page .article-nav a:hover,
.support-page .article-card:focus-within,
.support-page .callout:focus-within,
.support-page .article-nav a:focus-visible {
  background: rgba(255, 76, 96, 0.04) !important;
  background-color: rgba(255, 76, 96, 0.04) !important;
  background-image: none !important;
  border-color: rgba(255, 76, 96, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 176, 103, 0.07) !important;
  transform: none !important;
}

.support-page .article-card:is(.is-active, :target),
.support-page .article-nav a:is(.is-active, [aria-current="location"]) {
  color: var(--text) !important;
  background: rgba(255, 76, 96, 0.055) !important;
  background-color: rgba(255, 76, 96, 0.055) !important;
  background-image: none !important;
  border-color: rgba(255, 76, 96, 0.46) !important;
  box-shadow:
    inset 3px 0 0 rgba(255, 76, 96, 0.64),
    inset 0 1px 0 rgba(255, 176, 103, 0.08) !important;
}

.support-page .article-card h2,
.support-page .article-card h3,
.support-page .callout strong {
  color: var(--text) !important;
}

.support-page .article-card a:focus-visible,
.support-page .article-nav a:focus-visible {
  outline: 2px solid rgba(255, 176, 103, 0.72) !important;
  outline-offset: 3px;
}

.support-route {
  --support-readable-text: rgba(255, 238, 232, 0.89);
  --support-readable-muted: rgba(255, 220, 210, 0.81);
  --support-readable-faint: rgba(255, 203, 188, 0.75);
  --support-readable-link: rgba(255, 207, 158, 0.94);
}

.support-page .page-hero .lead,
.support-page .article-card p,
.support-page .callout p,
.support-page .muted {
  color: var(--support-readable-text) !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.66);
}

.support-page .article-card h3,
.support-page .article-nav a,
.support-page .callout strong,
.support-route .site-footer .muted,
.support-route .brand-sub,
.support-route .footer-bottom {
  color: var(--support-readable-muted) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.support-page .article-nav a:is(:hover, :focus-visible, .is-active, [aria-current="location"]),
.support-page .article-card:is(.is-active, :target) h2,
.support-page .article-card:is(.is-active, :target) h3 {
  color: rgba(255, 246, 240, 0.93) !important;
}

.support-page .article-card a,
.support-page .callout a {
  color: var(--support-readable-link) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.62);
}

.support-page .eyebrow {
  color: rgba(255, 196, 166, 0.86) !important;
}
@media (min-width: 861px) {
  .support-route::before,
  .support-route::after {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  .support-route::before {
    background-size: cover !important;
    background-position: center top !important;
    transform: none !important;
  }
}

@media (max-width: 860px) {
  .support-route {
    --support-bg-opacity: 0.38;
  }

  .support-route::before {
    position: absolute !important;
    inset: 0 !important;
    min-height: 100vh !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .support-route::after {
    position: absolute !important;
    inset: 0 !important;
    min-height: 100vh !important;
    background:
      radial-gradient(ellipse at 50% 18%, rgba(255, 48, 42, 0.14), transparent 38%),
      linear-gradient(180deg, rgba(3, 1, 2, 0.38) 0%, rgba(3, 1, 2, 0.66) 46%, rgba(3, 1, 2, 0.92) 100%) !important;
  }
}

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