/* loop me in · standalone stellar times sign-up (baa.business/loop/)
   one viewport, no scroll, from 320x568 up. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body.lp {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(168, 85, 247, 0.13), transparent 70%),
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1px 1px at 82% 12%, rgba(226, 210, 255, 0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 68% 72%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1px 1px at 22% 82%, rgba(226, 210, 255, 0.6), transparent 100%),
    radial-gradient(1.1px 1.1px at 92% 58%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 40% 8%, rgba(255, 255, 255, 0.5), transparent 100%),
    #050508;
  color: #f2f2f5;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.lp-wrap {
  min-height: 100vh;
  min-height: 100svh;
  width: min(420px, calc(100% - 32px));
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 4.5vh, 36px);
}
.lp-back {
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #9a9aad;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s;
}
.lp-back:hover, .lp-back:focus-visible { color: #f2f2f5; outline: none; }
.lp-dot { color: #a855f7; }

.lp-card {
  padding: clamp(20px, 4vh, 30px) clamp(18px, 5vw, 28px);
  border: 1px solid rgba(192, 132, 252, 0.22);
  border-radius: 18px;
  background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(168, 85, 247, 0.12), transparent 62%), rgba(10, 10, 16, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.lp-h {
  font-size: clamp(1.6rem, 6.4vw, 2.1rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: lowercase;
}
.lp-planet, .lp-btn span, .lp-done-h span, .lp-veil-p {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}
.lp-planet { display: inline-block; margin-right: 4px; }
.lp-sub {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #9a9aad;
}
.lp-sub b { display: inline-block; max-width: 100%; color: #e6e0f5; font-weight: 400; overflow-wrap: anywhere; }

.lp-form { margin-top: clamp(16px, 3vh, 22px); }
.lp-input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(192, 132, 252, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #f2f2f5;
  font: 400 16px "Roboto", system-ui, sans-serif;   /* 16px: no zoom-on-focus on iOS */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-input::placeholder { color: rgba(154, 154, 173, 0.75); }
.lp-input:focus { outline: none; border-color: #c084fc; box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.18); }
.lp-input[aria-invalid="true"] { border-color: rgba(252, 165, 165, 0.7); }
.lp-hint {
  min-height: 1.3em;
  margin: 6px 4px 8px 18px;
  font-size: 0.76rem;
  line-height: 1.3;
  color: #9a9aad;
}
.lp-hint.err { color: #fca5a5; }
.lp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  border: 1px solid rgba(192, 132, 252, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.95), rgba(139, 61, 225, 0.95));
  color: #fff;
  font: 500 0.98rem "Roboto", system-ui, sans-serif;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.28);
  transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}
.lp-btn:hover, .lp-btn:focus-visible { box-shadow: 0 0 26px rgba(168, 85, 247, 0.5); outline: none; }
.lp-btn:focus-visible { outline: 2px solid #e9d5ff; outline-offset: 2px; }
.lp-btn[disabled] { opacity: 0.7; cursor: progress; }

.lp-done[hidden], .lp-view[hidden] { display: none; }
.lp-done { text-align: center; outline: none; padding: 6px 0; }
.lp-done-h { font-size: clamp(1.6rem, 6.4vw, 2.1rem); font-weight: 300; line-height: 1.2; }
.lp-done .lp-sub { margin-top: 8px; }
.lp-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.88rem;
  color: rgba(192, 132, 252, 0.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 132, 252, 0.3);
}
.lp-link:hover { border-bottom-color: currentColor; }
.lp-done.in { animation: lp-pop 0.45s ease-out both; }
@keyframes lp-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* optional boost, light and quiet */
.lp-boost { text-align: center; }
.lp-boost-k { font-size: 0.8rem; color: #8e8ea6; }
.lp-opt { color: #6e6e84; }
.lp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.lp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.06);
  color: #c9c3d9;
  font: 500 0.78rem "IBM Plex Mono", ui-monospace, monospace;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lp-chip:hover, .lp-chip:focus-visible { background: rgba(168, 85, 247, 0.18); border-color: #c084fc; color: #fff; outline: none; }
.lp-chip-other { font-family: "Roboto", system-ui, sans-serif; font-weight: 400; letter-spacing: 0.02em; }

.lp-sr, .lp-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-hp { left: -9999px; }

/* short screens */
@media (max-height: 620px) {
  .lp-wrap { gap: 14px; }
  .lp-card { padding: 18px 18px; }
  .lp-input, .lp-btn { height: 46px; }
  .lp-chip { height: 32px; }
}
@media (max-width: 360px) {
  .lp-chips { gap: 6px; }
  .lp-chip { min-width: 0; padding: 0 10px; font-size: 0.74rem; }
}

/* ---------- arriving through the wormhole from the top bar ---------- */
html.warp-in { background: #050508; }
html.warp-in body.lp { animation: lp-warp-in 0.42s cubic-bezier(0.3, 0.7, 0.3, 1) backwards; }
html.warp-in::after {
  content: "";
  position: fixed;
  left: var(--wx, 50%);
  top: var(--wy, 30%);
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 180, 254, 0.5);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  animation: lp-warp-ring 0.62s ease-out backwards;
}
@keyframes lp-warp-in {
  from { clip-path: circle(0 at var(--wx, 50%) var(--wy, 30%)); opacity: 0.3; }
  to { clip-path: circle(150vmax at var(--wx, 50%) var(--wy, 30%)); opacity: 1; }
}
@keyframes lp-warp-ring {
  from { width: 0; height: 0; opacity: 0.9; }
  to { width: 170vmax; height: 170vmax; opacity: 0; }
}
@keyframes lp-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.warp-in body.lp, html.warp-in::after, .lp-done.in { animation: none; }
}