/* NotchDesk waitlist: the notch is the form.
   The header notch expands into a black panel holding the sign-up; after joining, the same panel shows your place
   in line. Around it, a Mac desktop: dusk wallpaper, live notch moments, a Dock. */

.page-waitlist {
  background: oklch(0.2 0.07 280);
}

.page-waitlist .site-footer {
  margin-top: 0;
}

@media (prefers-color-scheme: light) {
  .page-waitlist {
    background: var(--bg);
  }
}

@media (prefers-color-scheme: dark) {
  .wl-founders-grid {
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08), 0 40px 80px -40px oklch(0 0 0 / 0.6);
  }
}

.wl-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: max(100dvh, 760px);
  padding: 0 16px clamp(140px, 18vh, 200px);
  overflow: hidden;
  background:
    radial-gradient(90% 45% at 22% 104%, oklch(0.52 0.16 292) 0%, transparent 70%),
    radial-gradient(80% 40% at 82% 108%, oklch(0.6 0.17 330) 0%, transparent 72%),
    radial-gradient(60% 40% at 70% 62%, oklch(0.86 0.1 50 / 0.5) 0%, transparent 70%),
    linear-gradient(180deg, oklch(0.32 0.13 278) 0%, oklch(0.5 0.16 292) 38%, oklch(0.72 0.12 325) 70%, oklch(0.84 0.09 45) 100%);
  color: oklch(0.98 0.004 var(--hue));
}

/* ── The panel: a notch that has opened ── */
.wl-panel {
  --r: 18px;
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  padding: calc(var(--nav-h) + clamp(28px, 4vw, 40px)) clamp(22px, 5vw, 48px) clamp(26px, 4vw, 40px);
  border-radius: 0 0 clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px);
  background: #000;
  box-shadow: 0 50px 100px -40px oklch(0.1 0.08 var(--hue) / 0.9);
  transform-origin: 50% 0;
}

.wl-panel::before,
.wl-panel::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--r);
  height: var(--r);
}

.wl-panel::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - 0.6px), #000 var(--r));
}

.wl-panel::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.6px), #000 var(--r));
}

/* the header's own shadow would sit on top of the panel: let the two read as one shape */
.page-waitlist .topnav-shape {
  box-shadow: none;
}

.wl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 30px);
  color: oklch(0.98 0.004 var(--hue) / 0.66);
  font-size: 0.8125rem;
  font-weight: 600;
}

.wl-live {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.08);
  color: oklch(0.98 0.004 var(--hue));
}

.wl-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d158;
}

.wl-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #30d158;
  opacity: 0;
  animation: wl-ping 2.2s var(--ease-out) infinite;
}

@keyframes wl-ping {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

.wl-count {
  font-variant-numeric: tabular-nums;
}

.wl-view h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.wl-sub {
  margin-top: 16px;
  color: oklch(0.98 0.004 var(--hue) / 0.72);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Form ── */
.wl-form {
  margin-top: clamp(24px, 3.5vw, 32px);
}

.wl-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.08);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.wl-field:focus-within {
  background: oklch(1 0 0 / 0.11);
  box-shadow: inset 0 0 0 1.5px oklch(0.78 0.13 var(--hue)), 0 0 0 4px oklch(0.6 0.2 var(--hue) / 0.25);
}

.wl-field > .ic {
  width: 18px;
  height: 18px;
  color: oklch(0.98 0.004 var(--hue) / 0.5);
}

.wl-field input {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: oklch(0.99 0.003 var(--hue));
  font: 500 1.0625rem/1.2 var(--font);
  outline: none;
}

.wl-field input::placeholder {
  color: oklch(0.98 0.004 var(--hue) / 0.42);
}

.wl-submit {
  position: relative;
  flex: none;
  min-height: 46px;
}

.wl-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid oklch(0.3 0.05 var(--hue) / 0.25);
  border-top-color: oklch(0.3 0.12 var(--hue));
  opacity: 0;
}

.wl-form.is-busy .wl-submit-label {
  opacity: 0;
}

.wl-form.is-busy .wl-spinner {
  opacity: 1;
  animation: wl-spin 0.7s linear infinite;
}

@keyframes wl-spin {
  to { transform: rotate(360deg); }
}

.wl-form.is-shake .wl-field {
  animation: wl-shake 0.42s var(--ease-out);
}

@keyframes wl-shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.wl-error {
  min-height: 1.4em;
  margin-top: 10px;
  color: oklch(0.8 0.14 25);
  font-size: 0.9375rem;
  font-weight: 500;
}

.wl-error:empty {
  min-height: 0;
  margin-top: 0;
}

.wl-note {
  margin-top: 14px;
  color: oklch(0.98 0.004 var(--hue) / 0.55);
  font-size: 0.8125rem;
}

.wl-note a,
.wl-done a {
  color: oklch(0.86 0.08 var(--hue));
}

.wl-panel :focus-visible {
  outline-color: oklch(0.85 0.09 var(--hue));
}

@media (max-width: 520px) {
  .wl-field {
    flex-wrap: wrap;
    padding: 6px;
    border-radius: 22px;
  }

  .wl-field > .ic {
    margin-left: 10px;
  }

  .wl-submit {
    flex-basis: 100%;
  }
}

/* ── Launch countdown: hours : minutes : seconds, filled by site.js from LAUNCH_AT ── */
.wl-clock {
  display: none;
  align-items: flex-start;
  gap: clamp(6px, 1.4vw, 12px);
  margin: 22px 0 4px;
}

.has-countdown .wl-clock {
  display: flex;
}

.wl-clock-seg {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: clamp(64px, 14vw, 88px);
  padding: 12px 10px 10px;
  border-radius: 0 0 18px 18px;
  background: oklch(1 0 0 / 0.07);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
}

.wl-clock-seg b {
  font: 700 clamp(2rem, 1.4rem + 2.6vw, 2.9rem) / 1 var(--font-round);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.wl-clock-seg small {
  color: oklch(0.98 0.004 var(--hue) / 0.6);
  font-size: 0.75rem;
  font-weight: 600;
}

.wl-clock-sep {
  align-self: center;
  margin-top: -18px;
  color: oklch(0.98 0.004 var(--hue) / 0.35);
  font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem) / 1 var(--font-round);
}

.wl-clock-now {
  display: none;
  color: #30d158;
  font-size: 1.125rem;
  font-weight: 650;
}

.wl-clock.is-now > :not(.wl-clock-now) {
  display: none;
}

.wl-clock.is-now .wl-clock-now {
  display: block;
}

@media (max-width: 380px) {
  .wl-clock-seg {
    min-width: 0;
    flex: 1;
  }
}

/* ── Joined ── */
.wl-done {
  display: grid;
  justify-items: start;
  outline: none;
}

.wl-done-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #30d158;
  font-weight: 650;
}

.wl-done-kicker .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.wl-place {
  display: flex;
  align-items: baseline;
  margin-top: 4px;
  font: 700 clamp(4.5rem, 3rem + 7vw, 7.5rem) / 0.95 var(--font-round);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.wl-hash {
  color: oklch(0.72 0.14 var(--hue));
}

.wl-done-sub {
  margin-top: 12px;
  color: oklch(0.98 0.004 var(--hue) / 0.72);
  line-height: 1.55;
}

.wl-share {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 22px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.08);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14);
}

.wl-share input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: oklch(0.99 0.003 var(--hue));
  font: 500 0.9375rem/1.2 var(--font-mono);
  outline: none;
}

.wl-copy {
  flex: none;
  min-height: 42px;
}

.wl-copy.is-copied {
  background: #30d158;
  color: oklch(0.2 0.05 150);
}

.wl-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
}

.wl-refs {
  margin-top: 16px;
  color: oklch(0.98 0.004 var(--hue) / 0.6);
  font-size: 0.875rem;
}

.wl-refs:empty {
  display: none;
}

/* ── Live notch moments floating on the desktop ── */
.wl-float {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.wl-pill {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 210px;
  height: 36px;
  padding: 0 14px;
  border-radius: 0 0 16px 16px;
  background: #000;
  box-shadow: 0 20px 40px -18px oklch(0.1 0.08 var(--hue) / 0.8);
  color: oklch(0.97 0.005 var(--hue));
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  animation: wl-drift 9s ease-in-out infinite alternate;
}

.wl-pill > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wl-pill .ic {
  width: 12px;
  height: 12px;
}

.wl-pill .clip-app {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

.wl-pill-count {
  color: oklch(0.8 0.12 var(--hue));
  font-variant-numeric: tabular-nums;
}

.wl-pill--meet {
  top: 62%;
  left: 7%;
  transform: rotate(-4deg);
}

.wl-pill--copy {
  top: 30%;
  right: 6%;
  animation-delay: -3s;
  transform: rotate(3deg);
}

.wl-pill--timer {
  top: 76%;
  right: 13%;
  animation-delay: -6s;
  transform: rotate(-2deg);
}

@keyframes wl-drift {
  from { translate: 0 0; }
  to { translate: 0 -14px; }
}

@media (max-width: 1060px) {
  .wl-pill--copy {
    top: auto;
    bottom: 150px;
    right: 4%;
  }

  .wl-pill--meet {
    top: auto;
    bottom: 196px;
    left: 4%;
  }

  .wl-pill--timer {
    display: none;
  }
}

@media (max-width: 600px) {
  .wl-pill--copy {
    display: none;
  }

  .wl-pill--meet {
    left: 50%;
    bottom: 128px;
    translate: -50% 0;
    animation: none;
    transform: none;
  }
}

.wl-dock {
  position: absolute;
  bottom: 24px;
  z-index: 1;
  container-type: normal;
  --dock-u: clamp(30px, 3.6vw, 52px);
  gap: calc(var(--dock-u) * 0.2);
  padding: calc(var(--dock-u) * 0.18);
  border-radius: calc(var(--dock-u) * 0.42);
}

.wl-dock .dock-app {
  width: var(--dock-u);
  height: var(--dock-u);
  border-radius: calc(var(--dock-u) * 0.24);
}

.wl-dock .dock-run {
  bottom: calc(var(--dock-u) * -0.13);
  width: 4px;
  height: 4px;
}

/* ── What you're waiting for ── */
/* ── What you're waiting for: heading on the left, three rows with a live notch moment each ── */
.wl-peek {
  padding: clamp(64px, 9vw, 120px) 0;
  background: var(--bg);
  color: var(--text);
}

.wl-peek-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: start;
}

.wl-peek h2,
.wl-faq h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.wl-peek-head > p:not(.wl-peek-more) {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 1.0625rem;
}

.wl-peek-list {
  list-style: none;
}

.wl-peek-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
  padding: 26px 0;
  border-top: 1px solid var(--line-strong);
  color: var(--text-2);
}

.wl-peek-list li:last-child {
  border-bottom: 1px solid var(--line-strong);
}

.wl-peek-list li > div {
  display: grid;
  gap: 6px;
}

.wl-peek-list strong {
  color: var(--text);
  font-size: 1.1875rem;
  letter-spacing: -0.015em;
}

.wl-peek-pill.wl-pill {
  position: static;
  min-width: 200px;
  animation: none;
  box-shadow: 0 16px 30px -18px oklch(0.2 0.08 var(--hue) / 0.7);
}

.wl-peek-list li:nth-child(2) .wl-peek-pill {
  rotate: 2deg;
}

.wl-peek-list li:nth-child(odd) .wl-peek-pill {
  rotate: -2deg;
}

.wl-peek-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 26px;
  font-weight: 600;
}

@media (max-width: 860px) {
  .wl-peek-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .wl-peek-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .wl-peek-pill.wl-pill {
    justify-self: start;
  }
}

/* ── The founders' offer: a tag in the panel, and a section with the 100 seats as little notches ── */
.wl-perk {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: 16px;
  background: oklch(1 0 0 / 0.06);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
  color: oklch(0.98 0.004 var(--hue) / 0.78);
  font-size: 0.875rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.wl-perk:hover {
  background: oklch(1 0 0 / 0.1);
}

.wl-perk strong {
  color: oklch(0.99 0.003 var(--hue));
  font-weight: 650;
}

.wl-perk > .ic {
  flex: none;
  width: 16px;
  height: 16px;
  rotate: 180deg;
  color: oklch(0.8 0.12 var(--hue));
}

.wl-perk-seats {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 10px);
  gap: 4px 3px;
}

.wl-perk-seats i,
.wl-seats-grid i {
  display: block;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, oklch(0.78 0.14 var(--hue)), oklch(0.82 0.13 160));
}

.wl-perk-seats i {
  height: 5px;
}

.wl-done-perk {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid oklch(1 0 0 / 0.1);
  color: oklch(0.98 0.004 var(--hue) / 0.72);
  font-size: 0.875rem;
  line-height: 1.5;
}

.wl-done-perk .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: oklch(0.8 0.12 var(--hue));
}

.wl-founders {
  padding: clamp(56px, 8vw, 104px) 16px 0;
  background: var(--bg);
}

.wl-founders-grid {
  --text: oklch(0.97 0.005 var(--hue));
  --text-2: oklch(0.8 0.02 var(--hue));
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 40px clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 5vw, 64px);
  border-radius: clamp(28px, 4vw, 40px);
  background:
    radial-gradient(80% 70% at 100% 0%, oklch(0.42 0.2 290 / 0.55), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, oklch(0.4 0.12 160 / 0.25), transparent 70%),
    oklch(0.15 0.02 var(--hue));
  box-shadow: 0 40px 80px -40px oklch(0.25 0.15 var(--hue) / 0.55);
  color: var(--text);
}

.wl-founders h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-wrap: balance;
}

.wl-founders-copy > p {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.wl-steps {
  display: grid;
  gap: 14px;
  margin: 28px 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.wl-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 14px;
  counter-increment: step;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.wl-steps li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 0 0 10px 10px;
  background: #000;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12);
  color: oklch(0.85 0.1 var(--hue));
  font: 700 0.8125rem / 1 var(--font-round);
}

.wl-steps strong {
  color: var(--text);
  font-weight: 650;
}

.wl-seats {
  margin: 0;
}

.wl-seats-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 12px) clamp(6px, 0.9vw, 9px);
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 24px;
  background: oklch(0 0 0 / 0.35);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07);
}

.wl-seats-grid i {
  height: clamp(9px, 1.2vw, 13px);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 14px -4px oklch(0.75 0.15 var(--hue) / 0.7);
}

.wl-seats-grid i.is-taken {
  background: oklch(1 0 0 / 0.1);
  box-shadow: none;
}

.wl-seats figcaption {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 0.875rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wl-seats figcaption strong {
  color: var(--text);
}

@media (max-width: 860px) {
  .wl-founders-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Questions ── */
.wl-faq {
  padding: 0 0 clamp(64px, 9vw, 120px);
  background: var(--bg);
  color: var(--text);
}

.wl-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px clamp(32px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 860px) {
  .wl-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Motion: the notch opens on load; the joined state rises in ── */
@media (prefers-reduced-motion: no-preference) {
  .js .wl-panel {
    animation: wl-open 0.9s var(--spring) 0.15s backwards;
  }

  .js .wl-panel > * {
    animation: wl-fade 0.6s var(--ease-out) 0.55s backwards;
  }

  .wl-done:not([hidden]) > * {
    animation: wl-fade 0.55s var(--ease-out) backwards;
  }

  .wl-done:not([hidden]) > :nth-child(2) { animation-delay: 0.06s; }
  .wl-done:not([hidden]) > :nth-child(3) { animation-delay: 0.12s; }
  .wl-done:not([hidden]) > :nth-child(n + 4) { animation-delay: 0.18s; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .wl-seats-grid i {
    opacity: 0.18;
    transition: opacity 0.5s var(--ease-out) calc(var(--i, 0) * 9ms), transform 0.5s var(--spring) calc(var(--i, 0) * 9ms);
    transform: translateY(-4px);
  }

  .js .wl-seats.is-lit .wl-seats-grid i {
    opacity: 1;
    transform: none;
  }
}

@keyframes wl-open {
  from {
    transform: scale(0.42, 0.12);
    border-radius: 0 0 20px 20px;
  }
}

@keyframes wl-fade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-pill,
  .wl-pulse::after {
    animation: none;
  }
}