/* Beta signup under the hero copy. Remove with beta-signup.mjs and the #beta section. */
:root {
  --beta-fill: rgba(118, 118, 128, .12);
  --beta-error: #d70015;
}
@media (prefers-color-scheme: dark) {
  :root { --beta-fill: rgba(118, 118, 128, .24); --beta-error: #ff6961; }
}

.beta { margin: 28px 0 0; max-width: 420px; animation-delay: 1.12s; }
.beta-title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; }
.beta-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.beta-field {
  width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--beta-fill); color: var(--label); font: inherit; font-size: 17px;
}
.beta-field::placeholder { color: var(--secondary); opacity: 1; }
.beta-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.beta-field[aria-invalid="true"] { outline: 2px solid var(--beta-error); outline-offset: 2px; }
/* Off-screen rather than display:none, so form fillers still find it. */
.beta-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.beta-check { min-height: 65px; }
.beta-submit {
  height: 52px; margin-top: 2px; padding: 0 30px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
  transition: opacity .2s ease;
}
.beta-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.beta-submit:disabled { opacity: .5; cursor: default; }
.beta-status { margin: 0; min-height: 1.35em; font-size: 15px; color: var(--beta-error); }
.beta-status:empty { min-height: 0; }
.beta-fine { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--secondary); }
.beta-thanks { margin-top: 12px; padding: 18px 20px; border-radius: 18px; }
.beta-thanks:focus { outline: none; }
.beta-thanks-title { margin: 0; font-size: 17px; font-weight: 600; }
.beta-thanks-body { margin: 4px 0 0; font-size: 15px; color: var(--secondary); }

/* Joining: the button pops, glitter flies, and the button grows into the thank-you card. */
.beta-submit.is-joined, .beta-submit.is-joined:disabled { opacity: 1; }
.beta-burst { position: fixed; z-index: 10; width: 0; height: 0; pointer-events: none; }
.beta-ring { position: absolute; left: 0; top: 0; border-radius: 999px; border: 2px solid var(--accent); }
.beta-spark { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px var(--glow); }
.beta-spark.is-star { width: 15px; height: 15px; border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
:root { --beta-spark: var(--accent); }
@media (prefers-color-scheme: dark) { :root { --beta-spark: #fff; } }
::view-transition-group(beta-done) { animation-duration: .55s; animation-timing-function: cubic-bezier(.3, 1.25, .5, 1); }
::view-transition-old(beta-done), ::view-transition-new(beta-done) { height: 100%; animation-duration: .3s; }
::view-transition-group(beta-fine), ::view-transition-group(beta-footer) { animation-duration: .55s; animation-timing-function: cubic-bezier(.3, 1, .5, 1); }

@media (max-width: 759px) {
  .beta { margin-top: 24px; }
}