/* Waitlist pop-up. Opened by assets/join.js from any [data-join] link. */
:root {
  --join-scrim: rgba(0, 0, 0, 0.48);
  --join-width: 26rem;
  --join-rise: 12px;
  --join-error: #d70015;   /* Apple red, 5.9:1 on white */
}

.join {
  width: min(calc(100% - 2 * var(--space-md)), var(--join-width));
  max-height: calc(100% - 2 * var(--space-md));
  margin: auto; padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  border: 0; border-radius: var(--radius-lg);
  background: var(--color-canvas); color: var(--color-ink);
  box-shadow: var(--shadow-product);
  overflow: auto; overscroll-behavior: contain;
}
.join::backdrop { background: var(--join-scrim); }
.join[open] { animation: join-in var(--duration-base) var(--ease-out); }
.join[open]::backdrop { animation: join-fade var(--duration-base) var(--ease-out); }
@keyframes join-in { from { opacity: 0; transform: translateY(var(--join-rise)) scale(0.98); } }
@keyframes join-fade { from { opacity: 0; } }

.join h2 {
  margin: 0; font-family: var(--font-display); font-size: var(--text-display-md);
  font-weight: var(--weight-semibold); line-height: var(--leading-display); letter-spacing: var(--tracking-display);
}
.join h2:focus { outline: none; }
.join-sub { margin: var(--space-xs) 0 0; color: var(--color-ink-muted-56); }
.join-sub b { color: var(--color-ink); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

.join-close {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  display: grid; place-items: center; width: var(--target-min); height: var(--target-min);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-muted-56);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.join-close:hover { background: var(--color-canvas-parchment); color: var(--color-ink); }
.join-close:active { transform: scale(var(--press-scale)); }
.join-close .icon, .join-ok .icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.join-form { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.join-field { display: grid; gap: var(--space-2xs); font-size: var(--text-caption); color: var(--color-ink-muted-80); }
.join-field input {
  min-height: var(--target-min); padding: 0 var(--space-md);
  border: 0; border-radius: var(--radius-md); background: var(--color-canvas);
  box-shadow: inset 0 0 0 1px var(--color-ink-muted-48);
  font: inherit; font-size: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-ink);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.join-field input:hover { box-shadow: inset 0 0 0 1px var(--color-ink); }
.join-field input:focus-visible { outline: var(--focus-ring-width) solid var(--color-primary-focus); outline-offset: var(--focus-ring-width); }
.join-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--focus-ring-width) var(--join-error); }

.join-hp { position: absolute; left: var(--offscreen); width: 1px; height: 1px; overflow: hidden; }

.join-status { margin: 0; min-height: calc(1em * var(--leading-caption)); font-size: var(--text-caption); color: var(--join-error); }
.join-status:empty { display: none; }

.join .join-submit { width: 100%; }
.join .join-submit:disabled { opacity: 0.56; cursor: progress; transform: none; }

.join-fine { margin: var(--space-md) 0 0; font-size: var(--text-fine); color: var(--color-ink-muted-56); text-align: center; }
.join-fine a { color: var(--color-primary); }

.join-step[data-step="done"] { display: grid; justify-items: start; }
.join-step[data-step="done"][hidden] { display: none; }
.join-ok {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--space-md);
  border-radius: var(--radius-pill); background: var(--color-success); color: var(--color-on-primary);
}
.join-step[data-step="done"] .join-submit { margin-top: var(--space-xl); }