.wl-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(12, 8, 48, .7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
}

.wl-overlay.show {
  opacity: 1;
  visibility: visible;
}

.wl-modal {
  position: relative;
  width: min(100%, 30rem);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1.25rem;
  padding: 2.4rem 2.2rem 2.2rem;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #201466, #0d0a32 72%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  transform: translateY(8px) scale(.96);
  transition: transform .22s ease;
}

.wl-modal::before {
  content: "";
  position: absolute;
  width: 17rem;
  height: 17rem;
  top: -10rem;
  right: -7rem;
  border-radius: 50%;
  background: rgba(3, 92, 238, .32);
  filter: blur(4px);
  pointer-events: none;
}

.wl-overlay.show .wl-modal {
  transform: translateY(0) scale(1);
}

.wl-close {
  position: absolute;
  z-index: 2;
  top: .75rem;
  right: .9rem;
  padding: .25rem;
  border: 0;
  color: rgba(255, 255, 255, .62);
  background: transparent;
  font: inherit;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.wl-close:hover { color: #fff; }
.wl-kicker { position: relative; margin-bottom: .75rem; color: #f7c14b; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wl-title { position: relative; margin: 0 2rem .8rem 0; color: #fff; font-size: clamp(1.7rem, 4vw, 2.15rem); line-height: 1.15; }
.wl-copy { position: relative; margin: 0 0 1.5rem; color: rgba(255, 255, 255, .72); font-size: .95rem; line-height: 1.6; }
.wl-google { position: relative; display: flex; width: 100%; height: 3.2rem; align-items: center; justify-content: center; gap: .75rem; border: 1px solid rgba(0, 0, 0, .16); border-radius: .7rem; color: #202124; background: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
.wl-google:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.wl-google:disabled { cursor: wait; opacity: .65; }
.wl-google svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.wl-google-consent { position: relative; margin: .65rem 0 0; color: rgba(255, 255, 255, .54); font-size: .72rem; line-height: 1.45; text-align: center; }
.wl-divider { position: relative; display: flex; align-items: center; gap: .8rem; margin: 1.15rem 0; color: rgba(255, 255, 255, .46); font-size: .75rem; }
.wl-divider::before, .wl-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255, 255, 255, .16); }
.wl-form { position: relative; }
.wl-label { display: block; margin-bottom: .5rem; color: #fff; font-size: .85rem; font-weight: 600; }
.wl-field-row { display: flex; gap: .65rem; }
.wl-email {
  min-width: 0;
  flex: 1;
  height: 3.2rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: .7rem;
  outline: none;
  color: #fff;
  background: rgba(255, 255, 255, .09);
  font: inherit;
}
.wl-email::placeholder { color: rgba(255, 255, 255, .45); }
.wl-email:focus { border-color: #f7c14b; box-shadow: 0 0 0 3px rgba(247, 193, 75, .14); }
.wl-submit {
  min-width: 8.5rem;
  height: 3.2rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: .7rem;
  color: #1a1446;
  background: linear-gradient(96deg, #f2b8c6, #f7ce9d);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.wl-submit:hover { filter: brightness(1.04); }
.wl-submit:disabled { cursor: wait; opacity: .65; }
.wl-consent { display: flex; align-items: flex-start; gap: .55rem; margin-top: .85rem; color: rgba(255, 255, 255, .62); font-size: .76rem; line-height: 1.45; }
.wl-consent input { flex: 0 0 auto; margin-top: .15rem; accent-color: #f7c14b; }
.wl-message { min-height: 1.35rem; margin: .8rem 0 0; color: rgba(255, 255, 255, .72); font-size: .82rem; line-height: 1.45; }
.wl-message.is-error { color: #ffb8b8; }
.wl-message.is-success { color: #bff1cf; }
.wl-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 560px) {
  .wl-modal { padding: 2.1rem 1.25rem 1.5rem; }
  .wl-field-row { flex-direction: column; }
  .wl-submit { width: 100%; }
}