/* Launch film — portrait product story above early-access signup */
.launch-demo {
  margin: 0 auto clamp(36px, 5vw, 52px);
  max-width: 920px;
}

.launch-demo__intro {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.launch-demo__intro p {
  color: var(--slate);
  font-size: 0.98rem;
  max-width: 42ch;
  margin: 0 auto;
}

.launch-demo__frame {
  margin: 0 auto;
  width: min(100%, 400px);
  aspect-ratio: 9 / 16;
  height: auto;
  min-height: 480px;
  max-height: min(74vh, 720px);
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 16%, #16252F 0%, #13212B 48%, #0E1A22 100%);
  box-shadow:
    0 40px 80px -40px rgba(19, 33, 43, 0.5),
    inset 0 1px 0 rgba(159, 230, 221, 0.08);
  border: 1px solid rgba(159, 230, 221, 0.12);
}

.launch-demo__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #13212B;
}

/* Click-to-load poster (avoids loading the heavy demo for every visitor) */
.launch-demo__poster {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: #EAF3F2;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.launch-demo__poster-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.launch-demo__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #13212B;
  background: #9FE6DD;
  box-shadow: 0 12px 30px -10px rgba(159, 230, 221, 0.6);
  transition: transform 0.25s ease, background 0.25s ease;
}

.launch-demo__play svg {
  width: 30px;
  height: 30px;
  margin-left: 3px;
}

.launch-demo__poster-label {
  position: relative;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.launch-demo__poster-note {
  position: relative;
  font-size: 0.72rem;
  color: #9FB6B4;
}

.launch-demo__poster:hover .launch-demo__poster-art,
.launch-demo__poster:focus-visible .launch-demo__poster-art {
  opacity: 0.62;
  transform: scale(1.02);
}

.launch-demo__poster:hover .launch-demo__play,
.launch-demo__poster:focus-visible .launch-demo__play {
  transform: scale(1.08);
  background: #B6F0E8;
}

.launch-demo__poster:focus-visible {
  outline: 2px solid #9FE6DD;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .launch-demo__frame {
    width: 100%;
    border-radius: 22px;
    max-height: min(68vh, 640px);
  }
}