/* CrowdHive access / priority waitlist modal
   Refero lock: Calm single-focus conversion overlay + Fresha waitlist clarity.
   CrowdHive tokens: Inter / Inter Tight, graphite, violet, 16px surfaces. */

body.access-modal-open{ overflow:hidden; }

.access-modal{
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.access-modal.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition:opacity .28s ease;
}
.access-backdrop{
  position:absolute;
  inset:0;
  background:rgba(24,21,38,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.access-dialog{
  position:relative;
  width:min(640px,100%);
  max-height:min(760px,calc(100vh - 48px));
  overflow:auto;
  padding:34px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:16px;
  background:#fff;
  color:var(--ch-ink,#1d1c22);
  box-shadow:0 32px 90px rgba(18,15,32,.35);
  opacity:0;
  transform:translateY(18px) scale(.965);
  transition:opacity .3s ease,transform .42s cubic-bezier(.16,1,.3,1);
}
.access-modal.is-open .access-dialog{
  opacity:1;
  transform:none;
}
.access-close{
  position:absolute;
  z-index:2;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #dfdde6;
  border-radius:10px;
  background:#f5f4f8;
  color:#56525f;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.access-close svg{ width:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.access-close:hover{ background:#eceaf4; color:#292631; transform:rotate(4deg); }
.access-close:focus-visible,
.access-form input:focus-visible,
.access-form button:focus-visible{
  outline:3px solid rgba(79,70,229,.22);
  outline-offset:2px;
}

.access-head{ display:flex; align-items:center; gap:9px; padding-right:50px; margin-bottom:18px; }
.access-brand{ display:inline-flex; color:#574cf0; }
.access-kicker{
  margin:0;
  color:#655cf0;
  font:600 11px/1 'Inter Tight',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.access-dialog h2{
  max-width:15ch;
  margin:0 0 12px;
  font:600 clamp(30px,4.2vw,42px)/1.02 'Inter Tight',sans-serif;
  letter-spacing:-.045em;
}
.access-content > p,
.access-success > p:not(.access-kicker){
  max-width:54ch;
  margin:0;
  color:#686471;
  font-size:15.5px;
  line-height:1.55;
}

.access-capacity{
  margin-top:24px;
  padding:17px 18px;
  border:1px solid #e2e0e8;
  border-radius:12px;
  background:#f7f6fa;
}
.access-capacity-meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; color:#77727e; }
.access-capacity-meta strong{ color:#292631; font:600 13px/1 'Inter Tight',sans-serif; }
.access-capacity-track{ height:6px; margin:11px 0 9px; overflow:hidden; border-radius:999px; background:#e1dfea; }
.access-capacity-track i{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#5147ec,#8178ff);
  transform:scaleX(0);
  transform-origin:left;
}
.access-modal.is-open .access-capacity-track i{ animation:access-capacity-in .8s .24s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes access-capacity-in{ to{ transform:scaleX(1); } }
.access-capacity-note{ color:#77727e; font-size:11.5px; }

.access-offer{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:15px;
  align-items:center;
  margin-top:12px;
  padding:17px 18px;
  border:1px solid rgba(81,71,236,.2);
  border-radius:12px;
  background:linear-gradient(135deg,#eeecff 0%,#f7f6ff 100%);
}
.access-offer > strong{ color:#5147ec; font:600 30px/1 'Inter Tight',sans-serif; letter-spacing:-.04em; }
.access-offer span{ color:#716d7a; font-size:12.5px; line-height:1.42; }
.access-offer span b{ display:block; margin-bottom:3px; color:#292631; font:600 14px/1.2 'Inter Tight',sans-serif; }

.access-form{ margin-top:22px; }
.access-form label{ display:block; margin-bottom:8px; color:#37333e; font:600 12px/1 'Inter Tight',sans-serif; }
.access-form-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.access-form input{
  min-width:0;
  height:48px;
  padding:0 14px;
  border:1px solid #d9d6e1;
  border-radius:10px;
  background:#fff;
  color:#25222b;
  font:400 14px/1 'Inter',sans-serif;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.access-form input:focus{ border-color:#7167f2; box-shadow:0 0 0 3px rgba(81,71,236,.08); }
.access-form-row .btn-prim,
.access-success .btn-prim{
  min-height:48px;
  padding:0 18px;
  font-size:14px;
  white-space:nowrap;
}
.access-form-note{ margin:8px 0 0; color:#8a8690; font-size:11.5px; }
.access-error{ min-height:17px; margin:5px 0 0; color:#b4233a; font-size:12px; }
.access-benefits{ display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:10px; color:#5f5a67; font-size:11.5px; }
.access-benefits span{ display:inline-flex; align-items:center; gap:6px; }
.access-benefits i{ color:#5147ec; font-style:normal; font-weight:700; }

.access-success{ padding:28px 4px 10px; text-align:center; }
.access-success-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 20px;
  border-radius:50%;
  background:#eceaff;
  color:#5147ec;
  font-size:24px;
  font-weight:700;
}
.access-success .access-kicker{ margin-bottom:12px; }
.access-success h2{ max-width:none; margin-left:auto; margin-right:auto; }
.access-success > p:not(.access-kicker){ margin-left:auto; margin-right:auto; }
.access-success .btn-prim{ margin-top:24px; }

.access-modal[data-mode="login"] .access-capacity,
.access-modal[data-mode="login"] .access-offer,
.access-modal[data-mode="login"] .access-benefits{ display:none; }
.access-modal[data-mode="login"] .access-form{ margin-top:26px; }

@media (max-width:640px){
  .access-modal{ align-items:end; padding:10px; }
  .access-dialog{
    width:100%;
    max-height:calc(100vh - 20px);
    padding:28px 20px 22px;
    border-radius:16px;
    transform:translateY(28px) scale(.985);
  }
  .access-dialog h2{ max-width:16ch; font-size:32px; }
  .access-content > p{ font-size:14.5px; }
  .access-form-row{ grid-template-columns:1fr; }
  .access-form-row .btn-prim{ width:100%; }
  .access-benefits{ display:grid; grid-template-columns:1fr; gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .access-modal,
  .access-dialog,
  .access-close,
  .access-capacity-track i{
    transition:none;
    animation:none !important;
  }
  .access-modal.is-open .access-capacity-track i{ transform:scaleX(1); }
}