/* Layout safety and editable breakpoint adjustments. */
[hidden] {
  display: none !important;
}

.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.waitlist-form input:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 5px;
  border-radius: 4px;
}

.waitlist-form button:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}

.continuous-scroll .tunnel-content {
  transition: none;
}

/* Without motion scripts, display both sections normally. */
.continuous-scroll:not(.motion-ready) .hero-line {
  opacity: 1;
  transform: none;
}

@media (max-width: 1600px) {
  .hero-copy {
    padding-inline: clamp(24px, 6vw, 80px);
  }

  .hero h1 {
    font-size: clamp(64px, 10vw, 150px);
  }

  .tunnel-content {
    padding-inline: clamp(24px, 7vw, 96px);
  }

  .waitlist-form {
    max-width: 790px;
  }
}

@media (max-width: 650px) {
  .hero-copy {
    padding: 24px 18px;
  }

  .hero h1 {
    font-size: clamp(48px, 17vw, 86px);
    line-height: 1.02;
  }

  .tunnel-content {
    padding: max(36px, env(safe-area-inset-top)) 20px max(34px, env(safe-area-inset-bottom));
  }

  .tunnel-content > h2 {
    font-size: clamp(40px, 12.5vw, 64px);
    line-height: 1.04;
  }

  .waitlist-form {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 420px;
    gap: 8px;
  }

  .waitlist-form input {
    font-size: 16px;
  }

  .waitlist-form button {
    min-height: 52px;
  }

  .success-card {
    padding: 24px;
  }

  .success-card p {
    font-size: 18px;
  }
}

@media (max-height: 680px) {
  .tunnel-content {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 32px;
  }

  .tunnel-content > h2 {
    font-size: clamp(32px, 9vh, 64px);
  }

  .tunnel-content .waitlist-form {
    margin-top: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .continuous-scroll .tunnel-content {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    mask: none;
    -webkit-mask: none;
  }
}