/* The Early Team waitlist (/early-team/ and any page that embeds the form; the markup
   contract is in /waitlist.js). Loaded after soft.css and pages-art.css. Every colour is
   a token: light-dark() pairs here or soft.css's. Red stays the action fill only: the
   error mark is --wl-alert, a separate deep red that never sets text. */

:root {
  --wl-alert: light-dark(#b42318, #ff8f80);
  --wl-ok: light-dark(#2e7d4f, #56b977);
  --wl-edge: light-dark(rgb(255 255 255 / 75%), var(--rim-dark));
}

/* ─── The form card (shared by every page that embeds it) ─────────────────────────────
   Without JavaScript (no html.wl-js) the form is hidden and the email fallback shows; with
   it, the reverse. A form waitlist.js cannot bind (no endpoint) falls back the same way. */
html:not(.wl-js) [data-waitlist],
html.wl-js [data-waitlist-fallback],
html.wl-js .wl-card--fallback [data-waitlist] {
  display: none;
}
html.wl-js .wl-card--fallback [data-waitlist-fallback] {
  display: block;
}

.wl-card {
  position: relative;
  z-index: 2;
  padding: var(--pad-card);
  border: 1px solid var(--wl-edge);
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-float-dark);
  color: var(--ink);
}
.wl-form {
  margin: 0;
}
.wl-label {
  display: block;
  margin: 0 0 10px;
  color: var(--ink);
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.wl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.wl-input {
  flex: 1 1 240px;
  min-width: 0;
  min-height: var(--btn-md);
  margin: 0;
  padding: 12px 20px;
  border: 1px solid var(--wl-edge);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--e-inset-sm);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
.wl-input::placeholder {
  color: var(--ink-secondary);
}
.wl-input[aria-invalid='true'] {
  border: 2px solid var(--wl-alert);
  padding: 11px 19px;
}
.wl-input:read-only {
  color: var(--ink-secondary);
}
.wl-submit {
  flex: none;
}
.wl-submit[aria-disabled='true'] {
  opacity: 0.65;
  cursor: progress;
}
@media (hover: hover) {
  .wl-submit[aria-disabled='true']:hover {
    transform: none;
  }
}

/* The inline field error and the status line. Both stay rendered (an empty paragraph has
   no height) so assistive technology tracks them as live regions from the start. */
.wl-error,
.wl-status {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: var(--lh-prose);
}
.wl-error:not(:empty),
.wl-status:not(:empty) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
}
.wl-error:not(:empty)::before,
.wl-status:not(:empty)::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: var(--wl-alert);
  -webkit-mask: url('/icons/info.svg') center / 20px 20px no-repeat;
  mask: url('/icons/info.svg') center / 20px 20px no-repeat;
}
.is-done .wl-status:not(:empty)::before {
  background: var(--wl-ok);
  -webkit-mask-image: url('/icons/circle-check.svg');
  mask-image: url('/icons/circle-check.svg');
}
.wl-status a {
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: no-preference) {
  .wl-error:not(:empty),
  .wl-status:not(:empty) {
    animation: wl-arrive 200ms var(--ease-out) both;
  }
}
@keyframes wl-arrive {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* The honeypot: off-screen, out of the tab order (tabindex=-1) and aria-hidden. */
.wl-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wl-notice {
  max-width: 64ch;
  margin: 16px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-prose);
}
.wl-fallback__text {
  max-width: 52ch;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
}

/* ─── /early-team/ hero ────────────────────────────────────────────────────────────────
   Phones and tablets: h1, lede, the card, then the footage window, which slides up under
   the card so the card rests on its top edge. From 1024px: h1 and lede on columns 1-6,
   the window on 7-12 spanning both rows, the card on 1-7 so it reaches one column onto
   the footage, its foot level with the window's. */
/* Lane SP (2026-10-20): the soft.css spacing scale. */
.wl-hero {
  padding-top: var(--space-top);
  row-gap: var(--space-lede);
}
.wl-hero__copy,
.wl-card,
.wl-hero__window {
  grid-column: 1 / -1;
  min-width: 0;
}
.wl-hero__copy .pages-title {
  margin: 0;
}
.wl-hero__lede {
  max-width: 34em;
  margin: var(--space-head) 0 0;
}
/* The window slides up under the card by one row gap, so the card rests on its top edge. */
.wl-hero__window {
  z-index: 0;
  aspect-ratio: 16 / 9;
  margin-top: calc(-1 * var(--space-lede));
}
.wl-hero__window .field-window__media {
  object-position: 62% 100%;
}
@media (max-width: 760px) {
  .wl-submit {
    flex: 1 1 100%;
  }
  /* 2:1 keeps the hero inside 1.25 screens at 390x664 (fit rule). */
  .wl-hero__window {
    aspect-ratio: 2 / 1;
  }
}
@media (min-width: 1024px) {
  .wl-hero {
    grid-template-rows: auto auto;
  }
  .wl-hero__copy {
    grid-column: 1 / 7;
    grid-row: 1;
  }
  .wl-card {
    grid-column: 1 / 8;
    grid-row: 2;
    align-self: end;
  }
  .wl-hero__window {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    margin-top: 0;
  }
  .wl-hero__window .field-window__media {
    object-position: 60% 50%;
  }
}

/* ─── Sections: the h2 and a short lede on columns 1-5, the content on 7-12 ─────────── */
.wl-section {
  align-items: start;
  row-gap: var(--space-block);
  margin-top: var(--space-section);
}
.wl-section.wl-faq {
  row-gap: var(--space-lede);
}
.wl-section__head,
.wl-section > [data-grid-col='7'] {
  grid-column: 1 / -1;
  min-width: 0;
}
.wl-section__head h2 {
  margin: 0;
}
.wl-section__lede {
  max-width: 40ch;
  margin: var(--space-head) 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
}
@media (min-width: 1024px) {
  .wl-section__head {
    grid-column: 1 / 6;
  }
  .wl-section > [data-grid-col='7'] {
    grid-column: 7 / 13;
  }
  .wl-section__lede {
    font-size: var(--fs-20);
  }
}

/* The pass: a raised pearl ticket with a perforated stub (the /pricing/ pass's vocabulary). */
.wl-pass {
  max-width: 560px;
  padding: var(--pad-card);
  border: 1px solid var(--wl-edge);
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.wl-pass__stub {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px dashed var(--border);
}
.wl-pass__name {
  margin: 0;
}
.wl-pass__price {
  margin: 24px 0 4px;
  font-size: var(--d-price);
  line-height: var(--d-price-lh);
  font-variant-numeric: lining-nums tabular-nums;
}
.wl-pass__term {
  margin: 0;
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.wl-pass__facts {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.wl-pass__facts li {
  display: flex;
  gap: 10px;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
}
.wl-pass__facts li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  background: var(--ink-secondary);
  -webkit-mask: url('/icons/check.svg') center / 16px 16px no-repeat;
  mask: url('/icons/check.svg') center / 16px 16px no-repeat;
}
.wl-pass__lock {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
}

/* What joining does: three short facts under the offer's lede. */
.wl-facts {
  display: grid;
  gap: 16px;
  margin: var(--space-lede) 0 0;
  padding: 0;
  list-style: none;
}
.wl-fact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.wl-fact p {
  max-width: 52ch;
  margin: 0;
  padding-top: 8px;
  color: var(--ink-secondary);
  font-size: var(--fs-17);
  line-height: var(--lh-prose);
}
.wl-fact strong {
  color: var(--ink);
  font-weight: 600;
}
.icon-disc[data-icon='x'] {
  --icon: url('/icons/x.svg');
}
/* Phones: the facts drop their discs so the offer and its pass stay near one screen. */
@media (max-width: 760px) {
  .wl-facts {
    gap: 8px;
  }
  .wl-fact {
    grid-template-columns: minmax(0, 1fr);
  }
  .wl-fact .icon-disc {
    display: none;
  }
  .wl-fact p {
    padding-top: 0;
    font-size: var(--fs-15);
  }
}

/* Questions. */
.wl-faq .faq-list {
  min-width: 0;
}