/* Production shell and shared contact-form controls. */
.waitlist-layout .waitlist-page {
  flex: 1;
  min-width: 0;
  min-height: calc(100svh - 40px);
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.waitlist-page .waitlist-form { width: 100%; max-width: 600px; }
.waitlist-page [hidden] { display: none !important; }
.waitlist-step { display: grid; gap: 28px; }
.waitlist-step-copy, .waitlist-intro-details { display: grid; gap: 16px; }
.waitlist-step :is(h1, h2) { font-size: var(--type-xl); font-weight: var(--font-weight-bold); line-height: 1.4; }
.waitlist-step p { line-height: 1.4; }
.waitlist-email-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.waitlist-field { min-width: 0; display: flex; flex-direction: column; gap: 16px; border: 0; }
.waitlist-field > :is(label, legend) { font-size: var(--type-xl); font-weight: var(--font-weight-bold); line-height: 1.4; }
.waitlist-field > legend { margin-bottom: 20px; }
.waitlist-hint { font-size: var(--type-reg); color: var(--text-muted); font-weight: var(--font-weight-regular); }
.waitlist-options { display: grid; gap: 12px; padding-left: calc(1em + 10px); }
.waitlist-option { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; }
.waitlist-form .waitlist-option input { flex: none; width: 1em; height: 1em; margin: .2em 0 0; padding: 0; accent-color: var(--foreground-color); }
.waitlist-option-group { display: grid; gap: 8px; }
.waitlist-option-row { display: flex; align-items: center; gap: 8px; }
.waitlist-info-toggle { display: inline-flex; padding: 4px; color: var(--text-muted); background: none; border: 0; border-radius: 50%; cursor: pointer; translate: 0 -1.5px; }
.waitlist-info-toggle:hover { color: var(--foreground-color); background: var(--surface-label); }
.waitlist-option-info { padding-left: calc(1em + 10px); color: var(--text-muted); }
.waitlist-conditional { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 0; border: 0; }
.waitlist-conditional > legend { margin-bottom: 12px; }
.waitlist-conditional > label { font-size: var(--type-reg); font-weight: var(--font-weight-regular); color: var(--text-muted); }
.waitlist-option-followup { padding-inline: calc(1em + 10px); }
.waitlist-subfield > legend { font-size: var(--type-xl); font-weight: var(--font-weight-bold); line-height: 1.4; }
.waitlist-step-actions { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 12px; }
.waitlist-step-actions [data-back] { grid-column: 1; justify-self: start; }
.waitlist-step-actions [data-next] { grid-column: 3; justify-self: end; min-width: 6em; justify-content: center; }
.waitlist-progress { grid-column: 2; display: flex; gap: 8px; }
.waitlist-progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-color); }
.waitlist-progress-dot[data-done] { background: var(--foreground-color); }
.waitlist-step-thanks { text-align: center; }
.waitlist-step-thanks p { text-wrap: balance; }
.waitlist-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.waitlist-step :is(h1,h2,legend)[tabindex="-1"]:focus { outline: none; }
@media (min-width: 640px) and (max-width: 1199px) {
  .waitlist-layout { grid-template-rows: auto; }
  .waitlist-layout .waitlist-page { grid-column: 2; grid-row: 1; padding-inline: 28px; }
}
@media (max-width: 639px) {
  .waitlist-layout .waitlist-page { width: 100%; min-height: calc(100svh - var(--mobile-header-height) - 20px); padding: 32px 10px; }
  .waitlist-email-row { grid-template-columns: minmax(0, 1fr); }
  .waitlist-email-row .button { justify-self: start; }
}
.waitlist-page .waitlist-range {
  --dot: 14px;
  --end-inset: calc(var(--dot) / 2);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-right: max(0px, var(--end-inset) - var(--dot) / 2);
  cursor: pointer;
  touch-action: pan-y;
}

.waitlist-page .waitlist-range::before,
.waitlist-page .waitlist-range::after {
  content: '';
  position: absolute;
  left: calc(var(--dot) / 2);
  bottom: calc(var(--dot) / 2 - 1px);
  height: 2px;
  pointer-events: none;
}

.waitlist-page .waitlist-range::before {
  right: var(--end-inset);
  background: var(--border-color-strong);
}

.waitlist-page .waitlist-range::after {
  width: calc(var(--range-progress, 0) * (100% - var(--dot) / 2 - var(--end-inset)));
  background: var(--foreground-color);
  transition: width 150ms ease, height 150ms ease;
}

.waitlist-page label.waitlist-range-stop {
  flex: none;
  width: var(--dot);
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  font-size: var(--type-reg);
  line-height: 1.35;
  color: var(--text-muted);
  cursor: pointer;
}

.waitlist-page .waitlist-range-stop span {
  white-space: nowrap;
}

/* The first dot lines up with the question text, so its label starts there instead of centering. */
.waitlist-page label.waitlist-range-stop:first-child { align-items: flex-start; }

.waitlist-page label.waitlist-range-stop:is([data-hover], :has(:checked), :has(:focus-visible)) {
  color: var(--foreground-color);
}

.waitlist-page .waitlist-range-stop input {
  padding: 0;
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--dot);
  height: var(--dot);
  margin: 0;
  appearance: none;
  background: var(--background-color);
  border: 2px solid var(--border-color-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 150ms ease;
}

.waitlist-page .waitlist-range-stop[data-hover] input {
  border-color: var(--foreground-color);
}

.waitlist-page .waitlist-range-stop:is(:has(:checked), :has(~ .waitlist-range-stop :checked)) input {
  background: var(--foreground-color);
  border-color: var(--foreground-color);
}

.waitlist-page .waitlist-range-stop input:checked {
  transform: scale(1.45);
}


@media (max-width: 639px) {
  /* Five labels don't fit across a phone, so the slider stands upright with each label beside its dot. */
  .waitlist-page .waitlist-range { --row: 24px; flex-direction: column; align-items: stretch; gap: 14px; padding-right: 0; }
  .waitlist-page .waitlist-range::before,
  .waitlist-page .waitlist-range::after { top: calc(var(--row) / 2); left: calc(var(--dot) / 2 - 1px); width: 2px; }
  .waitlist-page .waitlist-range::before { right: auto; bottom: calc(var(--row) / 2); height: auto; }
  .waitlist-page .waitlist-range::after { bottom: auto; height: calc(var(--range-progress, 0) * (100% - var(--row))); }
  .waitlist-page label.waitlist-range-stop,
  .waitlist-page label.waitlist-range-stop:first-child {
    width: auto;
    height: var(--row);
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-page .waitlist-range::after,
  .waitlist-page .waitlist-range-stop input { transition: none; }
}

.waitlist-form button:disabled { opacity: .5; cursor: wait; }
.waitlist-submit-error { color: var(--text-muted); line-height: 1.4; }

.waitlist-company-details { margin-top: 0; margin-left: calc(1em + 10px); }

/* Forward actions use the full yellow fill, with the shared button hover colors. */
.waitlist-form .button.yellow {
  background-color: oklch(var(--color-yellow));
  color: #000;
}
.waitlist-form .button.yellow:hover {
  background-color: var(--foreground-color);
  color: var(--background-color);
  outline-color: var(--border-color);
}

/* Match the homepage mark beside the navigation, without shifting the form. */
.waitlist-layout .waitlist-page { position: relative; }
.waitlist-wordmark { position: absolute; top: 0; left: 20px; }
@media (min-width: 640px) {
  .waitlist-layout .waitlist-page { padding-block: 68px; }
}
@media (max-width: 639px) {
  .waitlist-wordmark { display: none; }
}

.waitlist-step-intro .waitlist-step-copy { text-align: center; gap: 4px; }
.waitlist-step-intro #waitlist-title a,
.waitlist-step-intro #waitlist-title a:visited,
.waitlist-step-intro #waitlist-title a:hover,
.waitlist-step-intro #waitlist-title a:active,
.waitlist-step-thanks a,
.waitlist-step-thanks a:visited,
.waitlist-step-thanks a:hover,
.waitlist-step-thanks a:active {
  color: var(--foreground-color);
  text-decoration: underline;
  text-decoration-color: rgb(var(--foreground-rgb) / 0.25);
}
.waitlist-step-intro #waitlist-title a:hover,
.waitlist-step-thanks a:hover {
  text-decoration-color: var(--foreground-color);
}
.waitlist-animation {
  width: min(200px, 75vw);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  position: relative;
  overflow: visible;
  color: var(--foreground-color);
  opacity: 1;
  pointer-events: none;
}
.waitlist-animation canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(circle closest-side, rgb(0 0 0 / .8) 65%, rgb(0 0 0 / 0) 100%);
  mask-image: radial-gradient(circle closest-side, rgb(0 0 0 / .8) 65%, rgb(0 0 0 / 0) 100%);
}

/* The stem's upper-right corner and head center share the same anchor. */
.waitlist-dandelion {
  width: min(320px, 100%);
  height: 290px;
  justify-self: center;
  position: relative;
  pointer-events: none;
  --head-scale: 0.6;
  --stem-width: 0.32;
  --stem-height: 1.14;
  --stem-opacity: 0.3;
  --stem-thickness: 1.55px;
  --group-x: -57px;
  --group-y: 40px;
}
.waitlist-dandelion-group {
  position: absolute;
  left: 68.75%;
  top: 100px;
  transform: translate(var(--group-x), var(--group-y));
}
.waitlist-dandelion .waitlist-animation {
  position: absolute;
  width: 200px;
  height: 200px;
  left: -100px;
  top: -100px;
  transform: scale(var(--head-scale));
}
.waitlist-dandelion-stem {
  position: absolute;
  width: calc(220px * var(--stem-width));
  height: calc(150px * var(--stem-height));
  right: 0;
  top: 0;
  overflow: visible;

}
.waitlist-dandelion-stem path {
  stroke: var(--foreground-color);
  stroke-opacity: var(--stem-opacity);
  stroke-width: var(--stem-thickness);
  fill: none;
  shape-rendering: geometricPrecision;
}

/* Move the form upward without adding padding that makes the page taller.
   Clamp the shift so long steps remain reachable from the top. */
.waitlist-page .waitlist-form {
  transform: translateY(clamp(-10vh, calc(50% - 50svh + 88px), 0px));
}
@media (max-width: 639px) {
  .waitlist-page .waitlist-form {
    transform: translateY(clamp(-10vh, calc(50% - 50svh + var(--mobile-header-height) / 2 + 42px), 0px));
  }
}

@media (prefers-color-scheme: dark) {
  .waitlist-form .button[data-next] {
    font-weight: var(--font-weight-bold);
  }
}