/* ============================================================
   Workback — "Join the beta" modal
   Shared across all pages. Matches the brand system:
   Geist, Paper/Ink, Workback Blue, soft shadows, rainbow band.
   ============================================================ */
:root{
  --wb-ink:#1A1A1C; --wb-ink-2:#3D3D42; --wb-muted:#6A6A70; --wb-muted-2:#86868B;
  --wb-line:#E8E7E2; --wb-paper:#FAFAF7; --wb-paper-2:#F2F1EC;
  --wb-blue:#1F4FD9; --wb-blue-light:#E8EEFB; --wb-orange:#E8704A; --wb-green:#2F8F5E;
}

.wb-modal-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(26,26,28,0.42);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .28s ease;
}
.wb-modal-overlay.open{ opacity:1; pointer-events:auto; }

.wb-modal{
  position:relative;
  width:min(480px, 100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--wb-paper);
  border:1px solid var(--wb-line);
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,0.22), 0 4px 12px rgba(0,0,0,0.08);
  font-family:'Geist', system-ui, sans-serif;
  color:var(--wb-ink);
  transform:translateY(14px) scale(0.98);
  transition:transform .28s cubic-bezier(0.16,1,0.3,1);
}
.wb-modal-overlay.open .wb-modal{ transform:translateY(0) scale(1); }

.wb-modal-band{
  height:3px; border-radius:18px 18px 0 0;
  background:linear-gradient(90deg, var(--wb-blue), var(--wb-orange), var(--wb-green), var(--wb-blue));
}

.wb-modal-close{
  position:absolute; top:16px; right:16px;
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--wb-line); background:var(--wb-paper);
  color:var(--wb-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.wb-modal-close:hover{ background:var(--wb-paper-2); color:var(--wb-ink); }

.wb-modal-body{ padding:30px 30px 30px; }

.wb-modal-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px; border-radius:999px;
  background:var(--wb-blue-light); color:var(--wb-blue);
  font-size:12px; font-weight:500; margin-bottom:16px;
}
.wb-modal-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--wb-blue); }

.wb-modal h2{
  font-size:25px; font-weight:700; letter-spacing:-0.02em;
  line-height:1.12; margin:0 0 8px;
}
.wb-modal .wb-modal-sub{
  font-size:14.5px; line-height:1.5; color:var(--wb-ink-2); margin:0 0 22px;
}

.wb-form{ display:flex; flex-direction:column; gap:14px; }
.wb-row{ display:flex; gap:12px; }
.wb-row .wb-field{ flex:1; }
.wb-field{ display:flex; flex-direction:column; gap:6px; }
.wb-field label{
  font-family:'Geist Mono', monospace; font-size:10px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--wb-muted);
}
.wb-field input{
  height:42px; padding:0 13px;
  border:1px solid var(--wb-line); border-radius:9px;
  background:#fff; font-family:inherit; font-size:14px; color:var(--wb-ink);
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.wb-field input::placeholder{ color:var(--wb-muted-2); }
.wb-field input:focus{
  border-color:var(--wb-blue);
  box-shadow:0 0 0 3px var(--wb-blue-light);
}

.wb-submit{
  height:46px; margin-top:6px;
  border:none; border-radius:9px; cursor:pointer;
  background:var(--wb-blue); color:#fff;
  font-family:inherit; font-size:14.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease, opacity .15s ease;
}
.wb-submit:hover{ background:#1A43BC; }
.wb-submit:disabled{ opacity:0.6; cursor:default; }

.wb-fine{ font-size:12px; color:var(--wb-muted-2); text-align:center; margin:14px 0 0; }
.wb-error{ font-size:13px; color:var(--wb-orange); margin:2px 0 0; min-height:0; }

/* success state */
.wb-success{ text-align:center; padding:14px 0 6px; }
.wb-success .wb-check{
  width:56px; height:56px; border-radius:50%;
  background:var(--wb-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px;
}
.wb-success h2{ margin-bottom:8px; }
.wb-success p{ font-size:14.5px; color:var(--wb-ink-2); line-height:1.55; margin:0; }

@media (max-width:520px){
  .wb-modal-body{ padding:24px 20px; }
  .wb-row{ flex-direction:column; gap:14px; }
}