/* Arbor motion walkthrough in the existing hero frame. */
.product-demo {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  margin: -260px auto 0;
  padding: 0 26px;
  scroll-margin-top: 105px;
}
.product-window {
  overflow: hidden;
  padding: 7px;
  border: 1px solid #fff;
  border-radius: 19px;
  background: linear-gradient(160deg, #fff, #eaede9);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px #263e3020, 0 22px 55px -15px #263e3038;
}
.hero-demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  background: #f7f8f5;
}
@media (max-width: 760px) {
  .product-demo { margin-top: -220px; padding: 0 20px; }
}
@media (max-width: 430px) {
  .product-demo { margin-top: -185px; padding: 0 14px; }
  .product-window { padding: 5px; border-radius: 14px; }
  .hero-demo-video { border-radius: 8px; }
}

.hero-demo-video { cursor: pointer; }
.hero-demo-video:focus-visible { outline: 3px solid #397858; outline-offset: 3px; }
.hero-demo-video::-webkit-media-controls { display: none !important; }