/* The waitlist form, on top of brand.css (qa's look). Every rule is scoped to
 * .waitlist so the landing page, which loads both files, stays an exact copy
 * of qa. Mobile first: most visitors arrive by scanning a QR code.
 */

.page.waitlist {
  max-width: 520px;
  padding: 32px 16px 24px;
}

.waitlist h1 { font-size: 1.75rem; line-height: 1.2; }
.waitlist h2 { font-size: 1.1rem; margin: 1.25em 0 0.25em; }
.waitlist .lede { color: #5a6472; font-size: 1.05rem; margin-bottom: 1.5em; }
.waitlist .muted { color: #5a6472; font-size: 0.9rem; }
.waitlist .eyebrow {
  margin: 0 0 4px;
  color: var(--color-teal);
  font-family: var(--font-heading);
  font-weight: 700;
}

.waitlist .field { margin-bottom: 18px; }
.waitlist .field > label { display: block; font-weight: 700; margin-bottom: 6px; }

/* 16px+ text stops iOS Safari zooming the page when a field is focused. */
.waitlist input[type=text],
.waitlist input[type=email],
.waitlist textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 1.05rem;
  color: var(--color-navy);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.waitlist textarea { min-height: 96px; resize: vertical; }
.waitlist input:focus-visible,
.waitlist textarea:focus-visible,
.waitlist .chips label:has(input:focus-visible) span {
  outline: 3px solid var(--color-tint);
  border-color: var(--color-teal);
}
/* Element-qualified to outrank the input[type=...] rule above. */
.waitlist input[aria-invalid=true],
.waitlist textarea[aria-invalid=true] { border-color: var(--color-danger); }

.waitlist .field-error { margin: 6px 0 0; color: var(--color-danger); font-size: 0.9rem; }
.waitlist .error-summary {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--color-danger);
  border-radius: 4px;
  color: var(--color-danger);
}

.waitlist .consent label,
.waitlist .toggles label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-weight: 400;
}
.waitlist .consent input,
.waitlist .toggles input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--color-teal);
}

.waitlist fieldset { border: 0; margin: 0 0 20px; padding: 0; }
.waitlist legend { font-weight: 700; margin-bottom: 8px; padding: 0; }

/* Big tap targets instead of tiny checkboxes and radios, in the outline
 * style of qa's secondary button; selected ones fill like its primary. */
.waitlist .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.waitlist .chips legend { width: 100%; }
.waitlist .chips label { position: relative; }
.waitlist .chips input { position: absolute; inset: 0; margin: 0; opacity: 0; }
.waitlist .chips span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--color-teal);
  border-radius: 4px;
  color: var(--color-teal);
  font-weight: 700;
  cursor: pointer;
}
.waitlist .chips input:checked + span { background: var(--color-teal); color: #fff; }

/* qa's .button, full width and thumb-sized. */
.waitlist .button {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
  padding: 14px;
  font-size: 1rem;
  text-align: center;
}
.waitlist .skip { display: block; padding: 14px; text-align: center; color: #5a6472; }

.waitlist .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Admin: a wide table, not a phone form. */
.page.waitlist.admin { max-width: 1000px; }
.waitlist .button-inline { display: inline-block; width: auto; min-height: 0; padding: 10px 20px; }
.waitlist .table-wrap { overflow-x: auto; margin: 16px 0; }
.waitlist table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.waitlist th,
.waitlist td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.waitlist .free-email { background: var(--color-tint); }

/* Not scoped: the privacy link belongs on every page, the landing page
 * included - SES reviewers look for it there. */
.site-footer {
  padding: 8px 16px 24px;
  text-align: center;
  color: #5a6472;
  font-size: 0.85rem;
}