/*
 * SEO topic landing V4.
 *
 * V3 remains untouched in ready_assessment.css and topic_landing_v3.html.
 * This layer adds only the universal hero atmosphere; it does not alter the
 * approved copy, form structure, dimensions, or content flow.
 */
.chat-landing-v4 .chat-landing-hero-v3 {
  position: relative;
}

.chat-landing-v4 .chat-landing-hero-v3::before,
.chat-landing-v4 .chat-landing-hero-v3::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  pointer-events: none;
  transform: translateX(-50%);
}

.chat-landing-v4 .chat-landing-hero-v3::before {
  background-image: url("images/topic-landing-hero-universal-v1.jpg");
  background-position: center center;
  background-size: cover;
  filter: saturate(.7) contrast(.88);
}

.chat-landing-v4 .chat-landing-hero-v3::after {
  background:
    linear-gradient(
      90deg,
      rgba(252, 250, 247, .9) 0%,
      rgba(252, 250, 247, .8) 42%,
      rgba(252, 250, 247, .74) 68%,
      rgba(252, 250, 247, .84) 100%
    ),
    linear-gradient(
      180deg,
      rgba(252, 250, 247, .6) 0%,
      rgba(252, 250, 247, .18) 48%,
      rgba(252, 250, 247, .88) 100%
    );
}

.chat-landing-v4 .chat-hero-copy-v3,
.chat-landing-v4 .chat-first-question-v3 {
  position: relative;
  z-index: 1;
}

.chat-landing-v4 .chat-first-question-v3 {
  background: rgba(255, 255, 255, .965);
  box-shadow:
    0 24px 64px rgba(71, 43, 31, .11),
    0 2px 8px rgba(71, 43, 31, .04);
}

@media (max-width: 820px) {
  .chat-landing-v4 .chat-landing-hero-v3::before {
    background-position: 47% center;
  }

  .chat-landing-v4 .chat-landing-hero-v3::after {
    background:
      linear-gradient(
        180deg,
        rgba(252, 250, 247, .78) 0%,
        rgba(252, 250, 247, .7) 38%,
        rgba(252, 250, 247, .86) 100%
      ),
      linear-gradient(
        90deg,
        rgba(252, 250, 247, .78),
        rgba(252, 250, 247, .62),
        rgba(252, 250, 247, .76)
      );
  }
}

@media (max-width: 560px) {
  .chat-landing-v4 .chat-landing-hero-v3::before,
  .chat-landing-v4 .chat-landing-hero-v3::after {
    inset-block: 0 -10px;
  }

  .chat-landing-v4 .chat-landing-hero-v3::before {
    background-position: 43% center;
  }

  .chat-landing-v4 .chat-landing-hero-v3::after {
    background:
      linear-gradient(
        180deg,
        rgba(252, 250, 247, .8) 0%,
        rgba(252, 250, 247, .68) 28%,
        rgba(252, 250, 247, .88) 100%
      ),
      rgba(252, 250, 247, .22);
  }
}