/* The Join free pop-up (round 15, after learnaiwithmariah.com's), in ABAI's
   palette: the card on the brand surface, white text, electric purple for the
   button. Loaded on every page when it is switched on; the button styles are
   its own, so the homepage's home.css needs nothing else. */

.pop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.pop[hidden] { display: none; }
.pop__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.74); }

.pop__card {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 30px 24px 18px; border-radius: 18px; color: #FFFFFF; font-family: inherit;
  background: radial-gradient(120% 70% at 100% 0%, rgba(86, 0, 255, 0.32), rgba(86, 0, 255, 0) 60%), #100E20;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  animation: pop-in 240ms ease-out;
}
/* The card takes focus only so screen readers start at its title; the cross,
   field and buttons inside keep their own focus rings. */
.pop__card:focus, .pop__card:focus-visible { outline: none; }

.pop__x {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 999px; color: rgba(255, 255, 255, 0.72); cursor: pointer;
}
.pop__x:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.pop__x svg { width: 22px; height: 22px; }

.pop__title {
  margin: 0 44px 12px 0; color: #FFFFFF; text-wrap: balance;
  font-size: clamp(28px, 7.4vw, 36px); font-weight: 800; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase;
}
.pop__body { margin: 0 0 20px; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.84); }

.pop__join {
  display: flex; width: 100%; min-height: 52px; box-sizing: border-box; justify-content: center;
  border-radius: 10px; font-family: inherit; font-size: 16px; font-weight: 700;
}

.pop__later {
  display: block; min-height: 44px; margin: 6px auto 0; padding: 0 16px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 15px; color: rgba(255, 255, 255, 0.72);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 4px;
}
.pop__later:hover { color: #FFFFFF; }

/* The page behind stays still while the pop-up is open. */
html.pop-open, html.pop-open body { overflow: hidden; }

@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pop__card { animation: none; } }