/* ══════════════════════════════════════════════════════════════
   Keln — the early access form on the landing.

   Sits where "Start free" sits, and is sized like it: one field,
   one button, and underneath, the list's progress toward the public
   launch. The count is honest — it is the real list — which is the
   only kind of number this page quotes.
   ══════════════════════════════════════════════════════════════ */

/* Which door is open is decided by the server, on <html>. */
[data-launch="waitlist"] [data-launch-when="public"],
[data-launch="public"]   [data-launch-when="waitlist"] { display: none !important; }

/* ONE GAP INSIDE THE FORM. Every row is 12px from the next — label,
   field, message, fine print — set once, as the column's gap,
   rather than as a margin on each row that the next row then has to
   agree with. A row with nothing in it (the message before anyone has
   pressed Join, the captcha before it mounts) takes no space at all,
   so an empty slot can never open a hole in the rhythm. */
.ea-join {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 460px;
}
.ea-join__captcha:empty { display: none; }
/* The message is a live region, and a live region that is display:none
   is not reliably announced when text arrives in it. Empty, it leaves
   the flow (so it opens no gap) but stays in the accessibility tree. */
.ea-join__msg:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ea-join__label {
  display: block;
  font-size: var(--t-md);
  color: var(--ink);
}

.ea-join__row { display: flex; gap: var(--s-4); }

.ea-join__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-6) var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(8, 12, 20, .55);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-lg);
}
.ea-join__input::placeholder { color: var(--muted); opacity: .7; }
.ea-join__input:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-color: transparent;
}
.ea-join__btn { flex: none; white-space: nowrap; }
.ea-join__btn[disabled] { opacity: .6; cursor: progress; }


.ea-join__msg {
  margin: 0;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--muted);
}
.ea-join__msg[data-tone="ok"]  { color: var(--accent2); }
.ea-join__msg[data-tone="err"] { color: var(--hot); }

/* The same width as the form above it, so its edges line up with the
   field's instead of stopping at an arbitrary 44 characters. */
.ea-join__fine {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
  opacity: .8;
}

/* Stacked landing (the same breakpoint as landing.css): the column is
   centred, so the form is centred in it, and so is every row inside —
   a flex row ignores text-align. */
@media (max-width: 900px), (max-height: 639px) {
  .ea-join { margin-inline: auto; width: 100%; }
}

@media (max-width: 560px) {
  /* Stacked, the field and the button are two rows of the form, so
     they take the form's row gap rather than the 8px they have side
     by side. */
  .ea-join__row { flex-direction: column; gap: var(--s-6); }
}