/* Final adjustments after Chromium preview */
.revision-v4 .visual-hero {
  min-height: auto !important;
  padding: 180px 0 120px;
  display: block !important;
  background:
    radial-gradient(circle at 82% 20%, rgba(22,174,228,.18) 0 13%, transparent 14%),
    radial-gradient(circle at 89% 72%, rgba(201,237,74,.25) 0 12%, transparent 13%),
    linear-gradient(135deg, #f8f9f5 0%, #edf6f8 100%) !important;
}

.revision-v4 .visual-hero-media,
.revision-v4 .visual-hero::after {
  display: none !important;
}

.revision-v4 .visual-hero-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.revision-v4 .visual-service-lockup strong {
  display: block;
  white-space: nowrap;
}

/*
 * The legacy .visual-problem rule adds a navy ::after overlay.
 * The v4 section is a light before/after comparison, so the overlay must not exist.
 */
.revision-v4 .visual-problem-v4 {
  position: relative;
  isolation: isolate;
  color: #271712 !important;
  background: #fff3ed !important;
}

.revision-v4 .visual-problem-v4::before,
.revision-v4 .visual-problem-v4::after,
.revision-v4 .visual-problem-v4 .visual-problem-media {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

.revision-v4 .visual-problem-v4-inner {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
}

.revision-v4 .visual-problem-v4-heading,
.revision-v4 .visual-comparison,
.revision-v4 .visual-comparison-card {
  position: relative;
  z-index: 3;
  opacity: 1 !important;
}

.revision-v4 .visual-problem-v4-heading h2,
.revision-v4 .visual-problem-v4-heading p {
  opacity: 1 !important;
}

/* Before/after is sufficiently clear with two cards; remove the center badge. */
.revision-v4 .visual-comparison {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

.revision-v4 .visual-comparison-change {
  display: none !important;
}

@media (max-width: 820px) {
  .revision-v4 .visual-hero {
    padding: calc(var(--header-height) + 54px) 0 78px !important;
  }

  .revision-v4 .visual-hero-card {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .revision-v4 .visual-service-lockup {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .revision-v4 .visual-service-lockup strong {
    font-size: clamp(52px, 15.4vw, 68px) !important;
    letter-spacing: -.085em;
  }

  .revision-v4 .visual-comparison {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 390px) {
  .revision-v4 .visual-service-lockup strong {
    font-size: 51px !important;
  }
}