/* Waitlist form, used in the hero, the footer and the modal (all on dark) */
.waitlist { width: 100%; max-width: 520px; }
.waitlist__row {
  display: flex; height: 48px;
  background: var(--tone-8); border: 1px solid var(--tone-7);
  transition: border-color .15s;
}
.waitlist__row:focus-within { border-color: var(--tone-5); }
.waitlist input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  padding: 0 16px; color: var(--bg); font: inherit; font-family: var(--font-code); font-size: 14px;
}
.waitlist input::placeholder { color: var(--tone-5); }
.waitlist button {
  flex: none; border: 0; margin: 0; cursor: pointer;
  background: var(--bg); color: var(--tone-9);
  font: inherit; font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 0 20px; white-space: nowrap;
  transition: background .15s;
}
.waitlist button:hover { background: var(--tone-2); }
.waitlist button:disabled { cursor: progress; background: var(--tone-3); }
.waitlist__note { margin-top: 10px; font-family: var(--font-code); font-size: 12px; color: var(--tone-4); min-height: 1.5em; }
.waitlist[data-state="done"] .waitlist__note { color: var(--ok-bright); }
.waitlist[data-state="done"] .waitlist__row { border-color: var(--ok-bright); }
.waitlist[data-state="error"] .waitlist__note { color: var(--stop-bright); }
@media (min-width: 480px) {
  .waitlist--big .waitlist__row { height: 56px; }
  .waitlist--big input, .waitlist--big button { font-size: 15px; }
}
@media (max-width: 479px) {
  .waitlist__row { height: auto; flex-direction: column; background: transparent; border: 0; gap: 8px; }
  .waitlist input { flex: none; height: 48px; background: var(--tone-8); border: 1px solid var(--tone-7); }
  .waitlist button { height: 48px; }
}

/* ---------- waitlist modal (#waitlist-modal, opened by [data-open-waitlist]) ----------
   Same language as the page: square, 1px tone-7 frame, a tone-8 "stage" with three agent heads (neutral,
   denied, approved; the approved one under a stepped light cone) that dissolves into the panel through a
   transition band (drawBand's algorithm, 5 bands, 2 px Bayer cells), Funnel Display title and
   the same waitlist form as the hero. */
html:has(.wl-modal[open]) { overflow: hidden; }
.wl-modal {
  width: min(680px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 1px solid var(--tone-7); border-radius: 0;
  background: var(--tone-9); color: var(--bg);
  overflow: auto; overscroll-behavior: contain;
}
.wl-modal::backdrop { background: color-mix(in srgb, var(--tone-9) 82%, transparent); }
.wl-modal[open] { animation: wl-in .18s steps(4, end); }
@keyframes wl-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .wl-modal[open] { animation: none; } }
.wl-modal__panel { position: relative; }

.wl-modal__stage {
  position: relative; overflow: hidden;
  display: flex; justify-content: center; align-items: flex-end; gap: 32px;
  height: 176px; padding-bottom: 4px; background: var(--tone-8);
}
/* stepped light cone from the top edge onto the approved head (the hero's spotlight, in flat pixel steps);
   heads are 120 px wide (4 px cells), so the third head's centre is 50% + 152 px */
.wl-modal__cone {
  position: absolute; top: 0; bottom: 0; left: calc(50% + 152px); width: 200px; transform: translateX(-50%);
  background: var(--tone-7);
  clip-path: polygon(40% 0, 60% 0, 60% 8%, 64% 8%, 64% 24%, 68% 24%, 68% 40%, 72% 40%, 72% 56%, 76% 56%, 76% 72%, 80% 72%, 80% 88%, 84% 88%, 84% 100%,
    16% 100%, 16% 88%, 20% 88%, 20% 72%, 24% 72%, 24% 56%, 28% 56%, 28% 40%, 32% 40%, 32% 24%, 36% 24%, 36% 8%, 40% 8%);
}
.wl-modal__bot { position: relative; flex: none; }
.wl-modal__bot--dim { opacity: .42; }
.wl-modal__band {
  height: 32px;
  /* the SVG is only the dither mask (its fill-opacity steps); the colour is tone-8, so it follows the palette */
  background: var(--tone-8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%231A1C1F' d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.8' d='M2 6h1v1h-1zM3 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM0 11h1v1h-1zM1 11h1v1h-1zM2 11h1v1h-1zM3 11h1v1h-1zM4 11h1v1h-1zM5 11h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.6' d='M0 12h1v1h-1zM1 12h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM6 12h1v1h-1zM7 12h1v1h-1zM0 13h1v1h-1zM1 13h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM6 13h1v1h-1zM7 13h1v1h-1zM0 14h1v1h-1zM1 14h1v1h-1zM2 14h1v1h-1zM3 14h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM0 15h1v1h-1zM1 15h1v1h-1zM2 15h1v1h-1zM3 15h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM6 15h1v1h-1zM7 15h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.4' d='M0 16h1v1h-1zM1 16h1v1h-1zM2 16h1v1h-1zM3 16h1v1h-1zM4 16h1v1h-1zM5 16h1v1h-1zM6 16h1v1h-1zM7 16h1v1h-1zM0 17h1v1h-1zM1 17h1v1h-1zM2 17h1v1h-1zM3 17h1v1h-1zM4 17h1v1h-1zM5 17h1v1h-1zM6 17h1v1h-1zM7 17h1v1h-1zM0 18h1v1h-1zM1 18h1v1h-1zM2 18h1v1h-1zM3 18h1v1h-1zM4 18h1v1h-1zM5 18h1v1h-1zM6 18h1v1h-1zM7 18h1v1h-1zM0 19h1v1h-1zM1 19h1v1h-1zM2 19h1v1h-1zM3 19h1v1h-1zM4 19h1v1h-1zM5 19h1v1h-1zM6 19h1v1h-1zM7 19h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.2' d='M0 20h1v1h-1zM1 20h1v1h-1zM2 20h1v1h-1zM3 20h1v1h-1zM4 20h1v1h-1zM5 20h1v1h-1zM6 20h1v1h-1zM7 20h1v1h-1zM0 21h1v1h-1zM1 21h1v1h-1zM2 21h1v1h-1zM3 21h1v1h-1zM4 21h1v1h-1zM5 21h1v1h-1zM6 21h1v1h-1zM7 21h1v1h-1zM0 22h1v1h-1zM1 22h1v1h-1zM2 22h1v1h-1zM3 22h1v1h-1zM4 22h1v1h-1zM5 22h1v1h-1zM6 22h1v1h-1zM7 22h1v1h-1zM0 23h1v1h-1zM1 23h1v1h-1zM2 23h1v1h-1zM3 23h1v1h-1zM4 23h1v1h-1zM5 23h1v1h-1zM6 23h1v1h-1zM7 23h1v1h-1zM2 24h1v1h-1zM3 24h1v1h-1zM6 24h1v1h-1zM7 24h1v1h-1zM2 25h1v1h-1zM3 25h1v1h-1zM6 25h1v1h-1zM7 25h1v1h-1z'/%3E%3C/svg%3E") repeat-x 0 0 / 8px 32px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='32' shape-rendering='crispEdges'%3E%3Cpath fill='%231A1C1F' d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM4 0h1v1h-1zM5 0h1v1h-1zM6 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM2 1h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM6 1h1v1h-1zM7 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM4 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM1 5h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM6 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM0 7h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.8' d='M2 6h1v1h-1zM3 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM1 8h1v1h-1zM2 8h1v1h-1zM3 8h1v1h-1zM4 8h1v1h-1zM5 8h1v1h-1zM6 8h1v1h-1zM7 8h1v1h-1zM0 9h1v1h-1zM1 9h1v1h-1zM2 9h1v1h-1zM3 9h1v1h-1zM4 9h1v1h-1zM5 9h1v1h-1zM6 9h1v1h-1zM7 9h1v1h-1zM0 10h1v1h-1zM1 10h1v1h-1zM2 10h1v1h-1zM3 10h1v1h-1zM4 10h1v1h-1zM5 10h1v1h-1zM6 10h1v1h-1zM7 10h1v1h-1zM0 11h1v1h-1zM1 11h1v1h-1zM2 11h1v1h-1zM3 11h1v1h-1zM4 11h1v1h-1zM5 11h1v1h-1zM6 11h1v1h-1zM7 11h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.6' d='M0 12h1v1h-1zM1 12h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM6 12h1v1h-1zM7 12h1v1h-1zM0 13h1v1h-1zM1 13h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM6 13h1v1h-1zM7 13h1v1h-1zM0 14h1v1h-1zM1 14h1v1h-1zM2 14h1v1h-1zM3 14h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM6 14h1v1h-1zM7 14h1v1h-1zM0 15h1v1h-1zM1 15h1v1h-1zM2 15h1v1h-1zM3 15h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM6 15h1v1h-1zM7 15h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.4' d='M0 16h1v1h-1zM1 16h1v1h-1zM2 16h1v1h-1zM3 16h1v1h-1zM4 16h1v1h-1zM5 16h1v1h-1zM6 16h1v1h-1zM7 16h1v1h-1zM0 17h1v1h-1zM1 17h1v1h-1zM2 17h1v1h-1zM3 17h1v1h-1zM4 17h1v1h-1zM5 17h1v1h-1zM6 17h1v1h-1zM7 17h1v1h-1zM0 18h1v1h-1zM1 18h1v1h-1zM2 18h1v1h-1zM3 18h1v1h-1zM4 18h1v1h-1zM5 18h1v1h-1zM6 18h1v1h-1zM7 18h1v1h-1zM0 19h1v1h-1zM1 19h1v1h-1zM2 19h1v1h-1zM3 19h1v1h-1zM4 19h1v1h-1zM5 19h1v1h-1zM6 19h1v1h-1zM7 19h1v1h-1z'/%3E%3Cpath fill='%231A1C1F' fill-opacity='0.2' d='M0 20h1v1h-1zM1 20h1v1h-1zM2 20h1v1h-1zM3 20h1v1h-1zM4 20h1v1h-1zM5 20h1v1h-1zM6 20h1v1h-1zM7 20h1v1h-1zM0 21h1v1h-1zM1 21h1v1h-1zM2 21h1v1h-1zM3 21h1v1h-1zM4 21h1v1h-1zM5 21h1v1h-1zM6 21h1v1h-1zM7 21h1v1h-1zM0 22h1v1h-1zM1 22h1v1h-1zM2 22h1v1h-1zM3 22h1v1h-1zM4 22h1v1h-1zM5 22h1v1h-1zM6 22h1v1h-1zM7 22h1v1h-1zM0 23h1v1h-1zM1 23h1v1h-1zM2 23h1v1h-1zM3 23h1v1h-1zM4 23h1v1h-1zM5 23h1v1h-1zM6 23h1v1h-1zM7 23h1v1h-1zM2 24h1v1h-1zM3 24h1v1h-1zM6 24h1v1h-1zM7 24h1v1h-1zM2 25h1v1h-1zM3 25h1v1h-1zM6 25h1v1h-1zM7 25h1v1h-1z'/%3E%3C/svg%3E") repeat-x 0 0 / 8px 32px;
}
.wl-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px;
  display: grid; place-items: center; padding: 0; margin: 0; cursor: pointer;
  background: var(--tone-9); color: var(--tone-3); border: 1px solid var(--tone-7); border-radius: 0;
  transition: color .15s, border-color .15s;
}
.wl-modal__close:hover { color: var(--bg); border-color: var(--tone-5); }
.wl-modal__close:focus-visible { outline: 2px solid var(--ok-bright); outline-offset: 2px; }
.wl-modal__body { padding: 24px 56px 48px; }
.wl-modal__title {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: 44px; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
}
.wl-modal__desc { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--tone-3); max-width: 48ch; }
.wl-modal__form { margin-top: 32px; max-width: none; }
.wl-modal__form .waitlist__note { margin-top: 12px; }
/* success: the frame and the note turn green */
.wl-modal:has(.waitlist[data-state="done"]) { border-color: var(--ok); }
@media (max-width: 599px) {
  /* heads at 2 px cells (still integer, crisp) so the cone clears the close button */
  .wl-modal__stage { height: 112px; gap: 16px; }
  .wl-modal__bot { width: 60px; }
  .wl-modal__cone { left: calc(50% + 76px); width: 104px; }
  .wl-modal__body { padding: 16px 20px 24px; }
  .wl-modal__title { font-size: 30px; }
  .wl-modal__desc { font-size: 16px; }
  .wl-modal__form { margin-top: 24px; }
  .wl-modal__close { top: 8px; right: 8px; }
}