/* Preserve the complete portrait frame instead of cropping it to a landscape background. */
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,420px);
  align-items:center;
  gap:clamp(32px,5vw,80px);
  min-height:100svh;
  padding:112px max(24px,calc((100% - 1240px)/2)) 64px;
  background:var(--hero-surface);
  isolation:isolate;
}
.hero > video {
  position:relative;
  inset:auto;
  grid-column:2;
  grid-row:1;
  justify-self:center;
  width:auto;
  height:min(760px,calc(100svh - 176px));
  min-height:320px;
  max-width:100%;
  aspect-ratio:9/16;
  object-fit:contain;
  object-position:center;
  z-index:2;
  border-radius:14px;
}
.hero > .veil {display:none}
.hero > .inner {
  grid-column:1;
  grid-row:1;
  min-width:0;
  max-width:none;
  margin:0;
  padding:0;
  width:100%;
}
.hero h1 {font-size:clamp(2.75rem,5.5vw,5.75rem);overflow-wrap:break-word}
.hero .btnrow {gap:12px}
.hero .btn {max-width:100%;justify-content:center;text-align:center}
.hero .live::before {flex-shrink:0}
.hero > .blob,.hero > .glow {pointer-events:none}
.hero > .sticker {z-index:3}
@media(max-width:819px) {
  .hero {
    grid-template-columns:minmax(0,1fr);
    min-height:0;
    padding:104px 22px 64px;
    gap:32px;
  }
  .hero > video {
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:420px;
    height:auto;
    min-height:0;
  }
  .hero > .inner {grid-column:1;grid-row:2}
  .hero h1 {font-size:clamp(2.5rem,10.5vw,4.5rem)}
  .hero .frame {padding:24px 18px}
  .hero .btnrow {display:grid;grid-template-columns:minmax(0,1fr)}
  .hero .btn {width:100%}
}
@media(max-width:360px) {
  .hero {padding-top:136px}
}