/* Pre-launch /join waitlist capture page. Token-only, per the design system. */
.join { padding: var(--space-16) 0 var(--space-20); }
.join-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}
@media (max-width: 880px) {
  .join-inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

.join-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}
.join-card h1 {
  font: var(--text-h1);
  color: var(--text-strong);
  text-wrap: balance;
  margin: var(--space-2) 0 var(--space-3);
}
.join-lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  margin: 0 0 var(--space-6);
}
.join-form { margin-top: var(--space-4); }
.join-aux { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-4) 0 0; }

/* Success state */
.join-success { text-align: center; }
.join-success-icon { width: 44px; height: 44px; color: var(--success); margin-bottom: var(--space-3); }
.join-success h1 { margin-top: 0; }

/* Aside: what you'll get at launch */
.join-aside { padding-top: var(--space-4); }
.join-aside h2 { font: var(--text-h3); color: var(--text-strong); margin: 0 0 var(--space-5); }
.join-perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.join-perks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.join-perks i, .join-perks svg { width: 22px; height: 22px; color: var(--brand); flex: none; }
.join-perks strong { display: block; color: var(--text-strong); font-weight: var(--fw-semibold); }
.join-perks span { color: var(--text-muted); font-size: var(--fs-sm); }