/**
 * /waitlist layout only.
 *
 * Loaded after site.css from waitlistPage extraHead. Overrides the dark
 * full-bleed gate: light ground, two phone columns, a large email field.
 */
.gate {
  background:
    radial-gradient(closest-side at 50% -8%, var(--brand-100), transparent 72%),
    var(--c-bg);
}
.gate__row {
  display: grid;
  grid-template-columns: auto minmax(20rem, 34rem) auto;
  grid-template-areas: "l copy r";
  align-items: center;
  justify-content: center;
  gap: var(--s-xxl);
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
.gate__phone--l { grid-area: l; }
.gate__in       { grid-area: copy; }
.gate__phone--r { grid-area: r; }
.gate__phone { pointer-events: none; justify-self: center; }
.gate__phone .dev__mount,
.gate__phone .iphone { pointer-events: none; }
.gate__in {
  width: 100%;
  max-width: none;
  text-align: center;
}
.gate__title { margin: 0 auto 12px; }
.gate__form { max-width: none; width: 100%; }
.cta__form.gate__form input {
  height: var(--l-session-log);
  min-height: var(--l-session-log);
  font: var(--t-title-sm);
  padding: 0 var(--s-xl);
}
.cta__form.gate__form .btn {
  width: 100%;
  min-height: var(--l-session-log);
  height: var(--l-session-log);
  font: var(--t-title-sm);
}
.gate .cta__note:empty { display: none; margin: 0; }
.gate .cta__spots { display: none !important; }
.gate__phone--l .iphone { --scale: .50 !important; }
.gate__phone--r .iphone { --scale: .56 !important; }

@media (max-width: 900px) {
  .gate { justify-content: flex-start; }
  .gate__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "copy copy"
      "l r";
    gap: var(--s-xxl) var(--s-md);
    align-items: start;
  }
  .gate__in { padding-top: var(--s-sm); }
  .gate__phone--l .iphone,
  .gate__phone--r .iphone { --scale: .38 !important; }
}