.hero{
  padding-bottom:8px!important;
}

.hero-video-card{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0!important;
  background:#1b0e08;
}

.hero-host-video{
  display:block;
  width:100%;
  height:auto;
  max-height:calc(100svh - 170px);
  object-fit:contain;
  object-position:center;
  background:#1b0e08;
  border-radius:24px;
}

.video-controls{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.video-sound,
.video-replay{
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(22,16,13,.7);
  color:#fff;
  font:inherit;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.video-sound{
  position:absolute;
  top:14px;
  right:14px;
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}

.video-sound.is-on{
  background:rgba(22,16,13,.78);
  color:#fff;
}

.video-sound:focus-visible,
.video-replay:focus-visible{
  outline:3px solid #fff4cc;
  outline-offset:3px;
}

.video-replay{
  position:absolute;
  right:14px;
  bottom:14px;
  display:none;
  min-height:38px;
  padding:8px 13px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 3px 10px rgba(0,0,0,.18);
}

.video-replay.show{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.intro{
  padding-top:18px!important;
}

.intro .square-panel img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.brand-mark{
  background:rgba(255,255,255,.88)!important;
}

.brand-mark img{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  object-fit:cover!important;
}

.entrance-logo,
.ending-logo{
  object-fit:contain!important;
}

.preview-top-button{
  left:max(14px,env(safe-area-inset-left))!important;
  right:auto!important;
  background:linear-gradient(180deg,#ffd84f 0%,#ff9f0a 58%,#f06a00 100%)!important;
  color:#3a1600!important;
  border:2px solid #fff0a8!important;
  box-shadow:0 10px 30px rgba(255,126,0,.42),0 0 0 5px rgba(255,193,7,.18)!important;
}

.passport-toggle{
  background:linear-gradient(180deg,#ff4f8b 0%,#e9186a 58%,#a90f50 100%)!important;
  color:#fff!important;
  border:2px solid #ffd5e5!important;
  box-shadow:0 12px 30px rgba(233,24,106,.38),0 0 0 5px rgba(255,79,139,.16)!important;
}

.passport-toggle span,
.passport-toggle strong{
  color:#fff!important;
  text-shadow:0 1px 5px rgba(76,0,29,.45);
}

@media(min-width:721px){
  .complete-card.cinematic{
    width:min(680px,calc(100vw - 48px))!important;
    max-height:calc(100dvh - 28px)!important;
    overflow:hidden!important;
    padding:28px 30px 22px!important;
  }

  .ending-copy{
    min-height:190px!important;
  }

  .ending-logo{
    width:clamp(170px,22vh,250px)!important;
    margin-bottom:8px!important;
  }

  .ending-final .eyebrow{
    margin-bottom:9px!important;
  }

  .ending-final h2{
    margin-bottom:9px!important;
    font-size:clamp(1.7rem,4.8vh,2.75rem)!important;
  }

  .ending-final>p:not(.eyebrow):not(.ending-wait){
    margin-bottom:16px!important;
    line-height:1.65!important;
  }

  .ending-final .btn{
    min-height:64px!important;
    padding:14px 26px!important;
  }

  .ending-return{
    margin-top:10px!important;
    padding:7px 16px!important;
  }

  .ending-wait{
    margin-top:7px!important;
  }
}

@media(max-width:720px){
  .hero{
    padding-top:18px!important;
    padding-bottom:4px!important;
  }

  .hero-video-card{border-radius:24px}

  .hero-host-video{
    max-height:none;
    border-radius:18px;
  }

  .video-sound{
    top:max(10px,env(safe-area-inset-top));
    right:max(10px,env(safe-area-inset-right));
    width:36px;
    height:36px;
    font-size:18px;
  }

  .video-replay{
    right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
    min-height:36px;
    padding:7px 12px;
    font-size:.78rem;
  }

  .intro{
    padding-top:14px!important;
  }

  .preview-top-button{
    left:max(12px,env(safe-area-inset-left))!important;
    bottom:126px!important;
  }

  .passport{
    right:max(10px,env(safe-area-inset-right))!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
  }
}