* { box-sizing: border-box; }
body { background: #F5F0E8; }

.beta-wrap { max-width: 520px; margin: 0 auto; padding: 72px 20px 64px; text-align: center; }

.beta-eyebrow {
  display: inline-block; font-size: .58rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .22em; color: #fff;
  background: #1a1a1a; border-radius: 20px; padding: 5px 14px; margin-bottom: 28px;
}
.beta-title {
  font-size: 2.8rem; font-weight: 900; color: #1a1a1a;
  line-height: 1.1; margin: 0 0 16px;
}
.beta-title span { color: #F0C840; }
.beta-sub {
  font-size: .95rem; color: #6b7280; line-height: 1.65;
  max-width: 400px; margin: 0 auto 36px;
}

.waitlist-form {
  display: flex; gap: 10px; max-width: 640px; margin: 0 auto 16px;
  flex-wrap: wrap; justify-content: center;
}
.waitlist-form input,
.waitlist-form select {
  flex: 1 1 140px; min-width: 0;
  padding: 12px 16px; font-size: .92rem;
  border: 2px solid #dde8e6; border-radius: 14px;
  background: #fff; color: #1a1a1a; font-weight: 600;
  font-family: inherit;
}
.waitlist-form input[type="email"] { flex: 2 1 220px; }
.waitlist-form input:focus,
.waitlist-form select:focus {
  border-color: #4DBDAD; outline: none;
  box-shadow: 0 0 0 3px rgba(77,189,173,.18);
}
.waitlist-form input::placeholder { color: #b0b8c0; font-weight: 500; }
.waitlist-form select {
  color: #6b7280;
  appearance: none;
  -webkit-appearance: none;
  /* Custom chevron , inline SVG keeps it under our control so the
     arrow has the same padding from the border as the text does. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
.waitlist-form select:has(option:checked:not([value=""])) { color: #1a1a1a; }
.waitlist-form button {
  padding: 12px 24px; font-size: .88rem; font-weight: 900;
  background: #1a1a1a; color: #F0C840; border: none;
  border-radius: 14px; cursor: pointer; white-space: nowrap;
  transition: transform .12s, box-shadow .12s;
}
.waitlist-form button:hover {
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.beta-note {
  font-size: .76rem; color: #9ca3af; margin-top: 8px;
}
.beta-login {
  margin-top: 40px; padding-top: 28px; border-top: 1.5px solid #e5e0d8;
}
.beta-login-text {
  font-size: .78rem; color: #9ca3af; margin-bottom: 10px;
}
.beta-login a {
  font-size: .88rem; font-weight: 900; color: #4DBDAD;
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: border-color .15s;
}
.beta-login a:hover { border-bottom-color: #4DBDAD; }

@media (max-width: 480px) {
  .beta-title { font-size: 2.2rem; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form button { width: 100%; }
}