.hero-bg-video {
  display: none;
}

.feedback-v02 .hero--selected.hero--video .hero-backdrop {
  inset: 0;
  overflow: hidden;
  /* White so the bottom fade below dissolves into the white section that
     follows every video hero (home + both product pages). */
  background: #ffffff;
}

.feedback-v02 .hero--selected.hero--video .hero-bg-video {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: block;
  width: 100vw;
  height: 100%;
  min-width: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: none;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}

.feedback-v02 .hero--selected.hero--video .hero-bg-video.hero-video-ready {
  opacity: 1;
}

.feedback-v02 .hero--selected.hero--video::after {
  background: none;
}

.feedback-v02 .hero--selected.hero--video .hero__copy,
.feedback-v02.final-view .hero--selected.hero--video .hero__copy,
.feedback-v02.final-view .hero--home.hero--selected.hero--video .hero__copy,
.feedback-v02 .hero--reports.hero--selected.hero--video .hero__copy {
  position: relative;
  width: min(66.66%, 760px);
  margin: 0 0 0 -26px;
  padding: 26px 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 54px rgba(23, 33, 29, 0.12) !important;
}

.feedback-v02 .hero--selected.hero--video h1,
.feedback-v02 .hero--selected.hero--video .hero__lead,
.feedback-v02 .hero--selected.hero--video .eyebrow,
.feedback-v02 .hero--selected.hero--video .button {
  text-shadow: 0 1px 10px rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
  .feedback-v02 .hero--selected.hero--video::after {
    background: none;
  }

  .feedback-v02 .hero--selected.hero--video .hero-backdrop {
    inset: 0;
  }

  .feedback-v02 .hero--selected.hero--video .hero-backdrop img {
    object-position: center;
    opacity: 1;
  }

  .feedback-v02 .hero--selected.hero--video .hero-bg-video {
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    object-position: center;
    filter: none;
  }

  .feedback-v02 .hero--selected.hero--video .hero__copy,
  .feedback-v02.final-view .hero--selected.hero--video .hero__copy,
  .feedback-v02.final-view .hero--home.hero--selected.hero--video .hero__copy,
  .feedback-v02 .hero--reports.hero--selected.hero--video .hero__copy {
    width: min(92%, 660px);
    margin-left: 0;
    padding: 24px 26px 26px;
  }
}

@media (max-width: 620px) {
  .feedback-v02 .hero--selected.hero--video .hero__copy,
  .feedback-v02.final-view .hero--selected.hero--video .hero__copy,
  .feedback-v02.final-view .hero--home.hero--selected.hero--video .hero__copy,
  .feedback-v02 .hero--reports.hero--selected.hero--video .hero__copy {
    width: 100%;
    padding: 22px 22px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feedback-v02 .hero--selected.hero--video .hero-bg-video {
    display: none;
  }
}

/* --- Bottom fade -------------------------------------------------------
   The autoplaying hero video (and its poster) ended on a hard horizontal
   edge at the bottom of the hero, reading as "cut off". Fade the bottom of
   the media to transparent so it dissolves into the white section that
   follows, and drop the hero's 1px hairline border there so the blend
   stays seamless (box-sizing is border-box, so removing it shifts nothing). */
.feedback-v02 .hero--selected.hero--video {
  border-bottom: 0;
}

.feedback-v02 .hero--selected.hero--video .hero-bg-video,
.feedback-v02 .hero--selected.hero--video .hero-backdrop img {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}