/* Scroll-driven “Why” benefit cards — channel / solution landing pages */
:root {
  --benefits-scroll-runway: 1000px;
}

/* Two classes — beats page `.why-reddit { height: 620px }` (same specificity, one class). */
.why-reddit.why-reddit--scroll-reveal {
  height: calc(620px + var(--benefits-scroll-runway));
  z-index: 3;
  background: #fff;
  isolation: isolate;
}

.why-reddit.why-reddit--scroll-reveal.is-benefits-pinned {
  z-index: 20;
}

.why-reddit--scroll-reveal .why-reddit__pin {
  height: 620px;
  z-index: 3;
}

.why-reddit--scroll-reveal .why-reddit__pin.is-pinned {
  position: fixed;
  left: 0;
  top: 91px;
  width: 100%;
  height: 620px;
  z-index: 21;
  background: #fff;
}

.why-reddit--scroll-reveal .why-reddit__pin.is-pinned::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 32px);
  background: #fff;
  z-index: 0;
  pointer-events: none;
}

.why-reddit--scroll-reveal .why-reddit__pin.is-pinned > * {
  z-index: 1;
}

.why-reddit__pin-spacer {
  width: 100%;
  height: 0;
}

.why-reddit--scroll-reveal .why-reddit__viewport {
  position: absolute;
  top: 137px;
  left: 0;
  width: 100%;
  overflow: visible;
}

.why-reddit--scroll-reveal .why-reddit__track {
  display: flex;
  gap: 21px;
  width: max-content;
  padding-left: calc(var(--gutter) + 123px);
  padding-right: calc(var(--gutter) + 123px);
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

.why-reddit--scroll-reveal .benefit-card__image {
  border-radius: 32px;
  overflow: hidden;
}

.why-reddit--scroll-reveal .benefit-card__body {
  border-radius: 32px;
}

.why-reddit--scroll-reveal .benefit-card:nth-child(4) .benefit-card__body h3 {
  line-height: 1.15;
}