#waitlist-overlay {
  position: fixed;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--color-bg-glass-dark);
  backdrop-filter: blur(2px);

  transition: var(--transition-main);

  z-index: 9999;
}

#waitlist-modal {
  position: relative;

  width: 25rem;
  height: 30rem;

  background: var(--color-background);

  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);

  transition: var(--transition-main);
}

#waitlist-close {
  position: absolute;

  top: 1rem;
  right: 1rem;

  transition: var(--transition-main);
  z-index: 10;
}

#waitlist-close:hover {
  color: var(--color-primary);
}

.waitlist-view {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-evenly;

  padding: 2rem;
}

.waitlist-view p {
  text-align: center;
  color: var(--color-text-muted);
}

#waitlist-form {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  width: 100%;

  gap: 1rem;
}

#waitlist-success {
  transition: var(--transition-main);
}

@media (max-width: 700px) {

  #waitlist-modal {
    scale: .7;
  }

}