/* Homepage before-and-after comparison using real TMD R2 media. */
.before-after-home .reveal-compare {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  isolation: isolate;
  background: #dce9dc;
}
.before-after-home .reveal-compare img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.before-after-home .reveal-compare .compare-before {
  clip-path: inset(0 50% 0 0);
}
.before-after-home .reveal-compare .compare-finished {
  clip-path: none;
}
.before-after-home .compare-label {
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(13,50,35,.9);
}
.before-after-home .reveal-divider {
  left: 50%;
  z-index: 5;
}
.before-after-home .reveal-handle {
  left: 50%;
  z-index: 6;
  border: 1px solid rgba(16,67,43,.08);
}
.before-after-home .reveal-compare [data-compare-range] {
  z-index: 7;
  display: block;
  touch-action: pan-y;
}
.before-after-home .reveal-compare:focus-within {
  outline: 3px solid #7bb85a;
  outline-offset: 4px;
}
.before-after-home .comparison-caption {
  max-width: 740px;
  margin: 19px auto 0;
  line-height: 1.65;
}
.before-after-home .comparison-caption a {
  color: #12633e;
  text-underline-offset: 3px;
  font-weight: 750;
}
.home-compare-access-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .before-after-home .reveal-compare {
    aspect-ratio: 4 / 5;
    max-height: 540px;
    border-radius: 20px;
  }
  .before-after-home .compare-label {
    top: 12px;
    padding: .55rem .8rem;
    font-size: .65rem;
    letter-spacing: .06em;
  }
  .before-after-home .compare-label.left { left: 12px; }
  .before-after-home .compare-label.right { right: 12px; }
  .before-after-home .reveal-handle { width: 49px; height: 49px; }
}
@media (max-width: 390px) {
  .before-after-home .reveal-compare { aspect-ratio: 5 / 6; }
  .before-after-home .compare-label {
    padding: .45rem .65rem;
    font-size: .58rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .before-after-home .reveal-compare * {
    scroll-behavior: auto;
    transition: none;
  }
}