body.video-hero-page .hero-logo-brand--image {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: 210px;
  min-width: 0;
  text-decoration: none;
}

body.video-hero-page .hero-logo-img {
  display: block;
  width: 180px;
  max-width: min(42vw, 210px);
  height: auto;
  object-fit: contain;
}

body.video-hero-page .library-logo-link {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 190px;
  margin: 0 0 14px;
  text-decoration: none;
}

body.video-hero-page .library-logo-img {
  display: block;
  width: 168px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

body.video-hero-page .chatkit-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  z-index: 95;
  align-items: flex-end;
}

body.video-hero-page .chatkit-widget__button {
  width: auto;
  justify-content: center;
}

body.video-hero-page .hero-video-stage {
  pointer-events: auto;
  width: clamp(312px, 38.4vw, 492px);
  aspect-ratio: 128 / 81;
  align-self: flex-end;
  position: relative;
  z-index: 3;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(134,239,172,.16);
  background: #020a05;
  box-shadow:
    0 0 0 1px rgba(134,239,172,.06),
    0 0 46px rgba(34,197,94,.15),
    0 18px 96px rgba(34,197,94,.13),
    0 24px 64px rgba(0,0,0,.42);
}

body.video-hero-page .hero-video-stage::before {
  content: "";
  position: absolute;
  inset: -68px;
  z-index: -1;
  border-radius: 12px;
  background:
    radial-gradient(circle at 42% 34%, rgba(134,239,172,.34), transparent 42%),
    radial-gradient(circle at 62% 76%, rgba(34,197,94,.22), transparent 58%);
  filter: blur(46px);
  opacity: .82;
  pointer-events: none;
  animation: heroVideoGlowParallax 6.5s ease-in-out infinite alternate;
}

body.video-hero-page .hero-video-stage::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(134,239,172,.08) 38%, transparent 56%),
    radial-gradient(circle at 14% 22%, rgba(134,239,172,.10), transparent 30%),
    radial-gradient(circle at 86% 82%, rgba(34,197,94,.09), transparent 34%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -24px 44px rgba(0,0,0,.18);
  mix-blend-mode: screen;
  animation: heroVideoRimParallax 5.2s ease-in-out infinite alternate;
}

body.video-hero-page .hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #020a05;
}

@keyframes heroVideoGlowParallax {
  0% { transform: translate3d(-22px, -14px, 0) scale(1.02); }
  100% { transform: translate3d(24px, 16px, 0) scale(1.10); }
}

@keyframes heroVideoRimParallax {
  0% { transform: translate3d(18px, -12px, 0); opacity: .52; }
  100% { transform: translate3d(-22px, 15px, 0); opacity: .90; }
}

@media (max-width: 860px) {
  body.video-hero-page .hero-logo-brand--image {
    flex: 0 0 auto;
    max-width: 154px;
  }

  body.video-hero-page .hero-logo-img {
    width: 138px;
    max-width: 100%;
  }

  body.video-hero-page .hero-video-stage {
    width: min(100%, 520px);
    align-self: center;
  }

  body.video-hero-page .chatkit-widget {
    right: 10px;
    left: auto;
    bottom: 10px;
  }

  body.video-hero-page .chatkit-widget__panel {
    width: min(390px, calc(100vw - 20px));
  }

  body.video-hero-page .chatkit-widget__button {
    width: auto;
  }
}