/* Video variant of the homepage hero (see /ma/xhero/hero-video.js). Loaded after hero.css. */
:root { --xh-vleft: 47%; --xh-vpad: 44px; }

/* placeholder before mount: plain card, the video frame's poster on the right */
html:not(.ma-xh-off):not(.ma-xh-mounted) #main-content section:has(> .ma-hero-img)::before { background: var(--xh-card); }

.ma-xh-vwrap { position: absolute; z-index: 2; left: var(--xh-vleft); right: var(--xh-vpad); top: 50%; transform: translateY(-50%);
  aspect-ratio: 16 / 9; max-height: calc(100% - 2 * var(--xh-vpad)); border-radius: 16px; overflow: hidden;
  background: #08080c url(/ma/xhero/factory-lidar-to-sim.webp?v=1) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(190,143,255,.22), 0 30px 80px -20px rgba(141,77,255,.35); animation: ma-xh-in .9s var(--xh-ease) both; }
.ma-xh-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 899px) {
  :root { --xh-vpad: 16px; }
  .ma-xh-vwrap { left: var(--xh-vpad); top: auto; bottom: var(--xh-vpad); transform: none; border-radius: 12px; }
}

/* secondary hero CTA ("See sample" -> /lidarsample/) */
.ma-xh .ma-xh-btn2 { background: transparent; color: var(--xh-text) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); transition: transform .2s var(--xh-ease), box-shadow .2s, background .2s; }
.ma-xh .ma-xh-btn2:hover { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }