/* SERPIFAI Insights — Unified Cinematic Hero V1.5.2
   Cinematic visibility refinement for every flagship and authority article.
   Category hubs and the main Insights hub are intentionally excluded. */

.insights-page.ri5-unified-hero,
.insights-authority-page.ri5-unified-hero {
  --ri5-bg: #020914;
  --ri5-text: #ffffff;
  --ri5-soft: #d7e3ed;
  --ri5-muted: #a9bdca;
  --ri5-cyan: #78e1f4;
  --ri5-violet: #9a7cff;
  --ri5-gold: #e6bd73;
  --ri5-image-opacity: .86;
  --ri5-image-position: center center;
  --ri5-hero-min: clamp(25.5rem, 42vw, 31rem);
}

/* ---------------------------------------------------------------
   AUTHORITY LIBRARY ARTICLE HERO
   --------------------------------------------------------------- */
.insights-authority-page.ri5-unified-hero .ri2-article-hero {
  position: relative !important;
  isolation: isolate !important;
  min-height: var(--ri5-hero-min) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(6.5rem, 8vw, 7.75rem) 0 clamp(2.75rem, 4.5vw, 3.65rem) !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(125, 227, 245, .14) !important;
  background: var(--ri5-bg) !important;
}

.insights-authority-page.ri5-unified-hero .ri2-article-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -3 !important;
  background-image: var(--ri2-hero-image) !important;
  background-size: cover !important;
  background-position: var(--ri5-image-position) !important;
  opacity: var(--ri5-image-opacity) !important;
  filter: saturate(1.02) contrast(1.04) brightness(.94) !important;
  transform: scale(1.018) !important;
}

.insights-authority-page.ri5-unified-hero .ri2-article-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    linear-gradient(90deg,
      rgba(2, 9, 20, .86) 0%,
      rgba(2, 9, 20, .76) 22%,
      rgba(2, 9, 20, .56) 43%,
      rgba(2, 9, 20, .30) 64%,
      rgba(2, 9, 20, .13) 83%,
      rgba(2, 9, 20, .07) 100%),
    linear-gradient(0deg,
      rgba(2, 9, 20, .70) 0%,
      rgba(2, 9, 20, .05) 48%,
      rgba(2, 9, 20, .24) 100%),
    radial-gradient(circle at 78% 42%, rgba(83, 216, 244, .18), transparent 30rem),
    radial-gradient(circle at 68% 16%, rgba(154, 124, 255, .18), transparent 26rem) !important;
}

.insights-authority-page.ri5-unified-hero .ri2-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: min(calc(100% - 40px), 1200px) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
}

.insights-authority-page.ri5-unified-hero .ri2-hero-content::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -2.5rem auto -2.25rem -3.25rem !important;
  width: min(53rem, 78vw) !important;
  background: radial-gradient(ellipse at 24% 50%, rgba(2, 9, 20, .64) 0%, rgba(2, 9, 20, .42) 46%, rgba(2, 9, 20, .12) 68%, transparent 80%) !important;
  pointer-events: none !important;
}

.insights-authority-page.ri5-unified-hero .ri2-article-hero h1 {
  max-width: 18ch !important;
  margin: 0 !important;
  color: var(--ri5-text) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(2.28rem, 4.15vw, 3.95rem) !important;
  line-height: 1.035 !important;
  letter-spacing: -.047em !important;
  text-wrap: balance !important;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .48) !important;
}

.insights-authority-page.ri5-unified-hero .ri2-deck {
  max-width: 45rem !important;
  margin-top: 1.1rem !important;
  color: var(--ri5-soft) !important;
  font-size: clamp(1rem, 1.42vw, 1.18rem) !important;
  line-height: 1.68 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42) !important;
}

.insights-authority-page.ri5-unified-hero .ri2-meta,
.insights-authority-page.ri5-unified-hero .ri2-breadcrumbs,
.insights-authority-page.ri5-unified-hero .ri2-eyebrow {
  color: var(--ri5-muted) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .42) !important;
}

.insights-authority-page.ri5-unified-hero .ri2-breadcrumbs a {
  color: var(--ri5-cyan) !important;
}

/* ---------------------------------------------------------------
   FLAGSHIP ARTICLE HERO
   --------------------------------------------------------------- */
.insights-page.ri5-unified-hero .ri-article-hero,
.insights-page.ri5-unified-hero .ri-article-hero--background,
.insights-page.ri5-unified-hero .ri-article-hero--cinematic {
  position: relative !important;
  isolation: isolate !important;
  min-height: var(--ri5-hero-min) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(6.5rem, 8vw, 7.75rem) 0 clamp(2.75rem, 4.5vw, 3.65rem) !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(125, 227, 245, .14) !important;
  background: var(--ri5-bg) !important;
}

.insights-page.ri5-unified-hero .ri-article-hero::before,
.insights-page.ri5-unified-hero .ri-article-hero--background::before,
.insights-page.ri5-unified-hero .ri-article-hero--cinematic::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2, 9, 20, .86) 0%,
      rgba(2, 9, 20, .76) 22%,
      rgba(2, 9, 20, .56) 43%,
      rgba(2, 9, 20, .30) 64%,
      rgba(2, 9, 20, .13) 83%,
      rgba(2, 9, 20, .07) 100%),
    linear-gradient(0deg,
      rgba(2, 9, 20, .70) 0%,
      rgba(2, 9, 20, .05) 48%,
      rgba(2, 9, 20, .24) 100%) !important;
  pointer-events: none !important;
}

.insights-page.ri5-unified-hero .ri-article-hero::after,
.insights-page.ri5-unified-hero .ri-article-hero--background::after,
.insights-page.ri5-unified-hero .ri-article-hero--cinematic::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 78% 42%, rgba(83, 216, 244, .18), transparent 30rem),
    radial-gradient(circle at 68% 16%, rgba(154, 124, 255, .18), transparent 26rem) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

.insights-page.ri5-unified-hero .ri-article-hero__background,
.insights-page.ri5-unified-hero .ri-article-hero__image {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--ri5-image-position) !important;
  opacity: var(--ri5-image-opacity) !important;
  filter: saturate(1.02) contrast(1.04) brightness(.94) !important;
  transform: scale(1.018) !important;
}

.insights-page.ri5-unified-hero .ri-article-hero .ri-shell,
.insights-page.ri5-unified-hero .ri-article-hero--background .ri-shell,
.insights-page.ri5-unified-hero .ri-article-hero--cinematic .ri-shell {
  position: relative !important;
  z-index: 2 !important;
  width: min(calc(100% - 40px), 1200px) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  display: block !important;
}

.insights-page.ri5-unified-hero .ri-article-hero .ri-shell::before,
.insights-page.ri5-unified-hero .ri-article-hero--background .ri-shell::before,
.insights-page.ri5-unified-hero .ri-article-hero--cinematic .ri-shell::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -2.5rem auto -2.25rem -3.25rem !important;
  width: min(53rem, 78vw) !important;
  background: radial-gradient(ellipse at 24% 50%, rgba(2, 9, 20, .64) 0%, rgba(2, 9, 20, .42) 46%, rgba(2, 9, 20, .12) 68%, transparent 80%) !important;
  pointer-events: none !important;
}

.insights-page.ri5-unified-hero .ri-article-title,
.insights-page.ri5-unified-hero .ri-article-title * {
  max-width: 18ch !important;
  color: var(--ri5-text) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: clamp(2.28rem, 4.15vw, 3.95rem) !important;
  line-height: 1.035 !important;
  letter-spacing: -.047em !important;
  text-wrap: balance !important;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .48) !important;
}

.insights-page.ri5-unified-hero .ri-article-deck {
  max-width: 45rem !important;
  color: var(--ri5-soft) !important;
  font-size: clamp(1rem, 1.42vw, 1.18rem) !important;
  line-height: 1.68 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42) !important;
}

.insights-page.ri5-unified-hero .ri-article-meta,
.insights-page.ri5-unified-hero .ri-breadcrumbs,
.insights-page.ri5-unified-hero .ri-eyebrow {
  color: var(--ri5-muted) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .42) !important;
}

/* ---------------------------------------------------------------
   PRESERVE BOTH VISUAL GENERATIONS AFTER RETIRING THEIR CSS FILES
   --------------------------------------------------------------- */
.ri3-article-visual,
.ri4-article-visual {
  position: relative;
  margin: 6px 0 54px;
  overflow: hidden;
  border: 1px solid rgba(125, 227, 245, .18);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(7, 20, 34, .98), rgba(3, 10, 21, .98));
  box-shadow: 0 26px 66px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255,255,255,.025);
  content-visibility: auto;
  contain-intrinsic-size: 760px 470px;
}

.ri3-article-visual::after,
.ri4-article-visual::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(154, 124, 255, .68), rgba(120, 225, 244, .65), rgba(230, 189, 115, .52), transparent);
  pointer-events: none;
}

.ri3-article-visual img,
.ri4-article-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f4f7fb;
}

.ri3-article-visual figcaption,
.ri4-article-visual figcaption {
  margin: 0;
  padding: 15px 18px 17px;
  border-top: 1px solid rgba(125, 227, 245, .11);
  color: #9fb3c1;
  font-size: .82rem;
  line-height: 1.55;
}

.ri3-article-visual figcaption strong,
.ri4-article-visual figcaption strong {
  color: #f7fbff;
}

/* Per-article image art direction for the current ten illustrated articles. */
.ri5-article-seo-competitors-vs-business-competitors { --ri5-image-position: center 55%; }
.ri5-article-how-many-seo-competitors { --ri5-image-position: center center; }
.ri5-article-publishers-directories-marketplaces-not-real-competitors { --ri5-image-position: center 58%; }
.ri5-article-identify-local-seo-competitors { --ri5-image-position: center 54%; }
.ri5-article-qualify-b2b-saas-competitors { --ri5-image-position: center 52%; }
.ri5-article-when-to-update-competitor-set { --ri5-image-position: center 54%; }
.ri5-article-reliable-evidence-competitor-analysis { --ri5-image-position: center center; }
.ri5-article-confidence-without-fake-precision { --ri5-image-position: center 52%; }
.ri5-article-contradictory-competitor-evidence { --ri5-image-position: center 56%; }
.ri5-article-observed-inferred-unresolved { --ri5-image-position: center 50%; }
.ri5-article-choose-right-competitors { --ri5-image-position: 72% center; }
.ri5-article-evidence-vs-assumptions { --ri5-image-position: 66% center; }
.ri5-article-where-to-invest-next { --ri5-image-position: 60% center; }

@media (max-width: 760px) {
  .insights-page.ri5-unified-hero,
  .insights-authority-page.ri5-unified-hero {
    --ri5-image-opacity: .68;
    --ri5-image-position: center center;
    --ri5-hero-min: 23rem;
  }

  .insights-authority-page.ri5-unified-hero .ri2-article-hero,
  .insights-page.ri5-unified-hero .ri-article-hero,
  .insights-page.ri5-unified-hero .ri-article-hero--background,
  .insights-page.ri5-unified-hero .ri-article-hero--cinematic {
    padding: 6.15rem 0 2.55rem !important;
  }

  .insights-authority-page.ri5-unified-hero .ri2-article-hero::after {
    background:
      linear-gradient(90deg, rgba(2,9,20,.82), rgba(2,9,20,.36)),
      linear-gradient(0deg, rgba(2,9,20,.72), rgba(2,9,20,.08) 58%, rgba(2,9,20,.28)) !important;
  }

  .insights-authority-page.ri5-unified-hero .ri2-hero-content::before,
  .insights-page.ri5-unified-hero .ri-article-hero .ri-shell::before,
  .insights-page.ri5-unified-hero .ri-article-hero--background .ri-shell::before,
  .insights-page.ri5-unified-hero .ri-article-hero--cinematic .ri-shell::before {
    inset: -1.75rem -1rem -1.75rem -1.5rem !important;
    width: calc(100% + 2.5rem) !important;
    background: linear-gradient(90deg, rgba(2,9,20,.66), rgba(2,9,20,.34) 70%, rgba(2,9,20,.14)) !important;
  }

  .insights-authority-page.ri5-unified-hero .ri2-article-hero h1,
  .insights-page.ri5-unified-hero .ri-article-hero .ri-shell::before,
.insights-page.ri5-unified-hero .ri-article-hero--background .ri-shell::before,
.insights-page.ri5-unified-hero .ri-article-hero--cinematic .ri-shell::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -2.5rem auto -2.25rem -3.25rem !important;
  width: min(53rem, 78vw) !important;
  background: radial-gradient(ellipse at 24% 50%, rgba(2, 9, 20, .64) 0%, rgba(2, 9, 20, .42) 46%, rgba(2, 9, 20, .12) 68%, transparent 80%) !important;
  pointer-events: none !important;
}

.insights-page.ri5-unified-hero .ri-article-title,
  .insights-page.ri5-unified-hero .ri-article-title * {
    max-width: 21ch !important;
    font-size: clamp(2rem, 9.5vw, 3.05rem) !important;
  }

  .ri3-article-visual,
  .ri4-article-visual {
    margin-bottom: 42px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insights-authority-page.ri5-unified-hero .ri2-article-hero::before,
  .insights-page.ri5-unified-hero .ri-article-hero__background,
  .insights-page.ri5-unified-hero .ri-article-hero__image {
    transform: none !important;
  }
}