/* ===== Early access: use-type question + optional qualification step ===== */

/* step 1 — "how do you plan to use Astra?" (sits under the email field, same glass language) */
.use-type{border:0;margin:12px 0 0;padding:0;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;min-inline-size:0}
.use-type legend{float:right;padding:0;font-size:14.5px;font-weight:600;color:var(--on-dark)}
.join-form.center .use-type{justify-content:center}
.join-form.center .use-type legend{float:none;width:100%;text-align:center;margin-bottom:8px}
.ut-opts{display:flex;gap:6px;flex-wrap:wrap}
.ut-opts label{position:relative;cursor:pointer}
.ut-opts input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ut-opts label>span{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--white);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,box-shadow .2s}
.ut-opts span:before{content:"";width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);transition:box-shadow .2s,background .2s;flex:none}
.ut-opts label:hover>span{background:rgba(255,255,255,.1)}
.ut-opts input:checked+span{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(22,209,242,.8)}
.ut-opts input:checked+span:before{background:var(--aqua);box-shadow:inset 0 0 0 3px var(--indigo),0 0 0 1.5px var(--aqua)}
.ut-opts input:focus-visible+span{outline:2px solid var(--aqua);outline-offset:3px}
.use-type.invalid .ut-opts label>span{box-shadow:inset 0 0 0 1px #FFB4C0}
.join-form.done .use-type{display:none}

.form-note{font-size:13.5px;color:rgba(255,255,255,.55)}
.form-note a{color:inherit;text-underline-offset:3px}
.form-note a:hover{color:var(--white)}

/* step 2 — dialog */
.qual{width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:0;border-radius:22px;color:var(--white);overflow:auto;
  background:var(--indigo);background-image:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 140px,rgba(255,255,255,.022) 140px 280px);
  box-shadow:0 50px 120px -30px rgba(4,2,30,.8),inset 0 0 0 1px rgba(255,255,255,.1)}
.qual::backdrop{background:rgba(6,4,40,.62)}
.qual[open]{animation:qualIn .45s cubic-bezier(.2,.7,.2,1)}
@keyframes qualIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.qual-form,.qual-thanks{padding:clamp(22px,4vw,34px)}
.qual-done{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:15px;font-weight:600;color:var(--aqua)}
.qual-tick{width:22px;height:22px;border-radius:50%;background:var(--aqua);position:relative;flex:none}
.qual-tick:after{content:"";position:absolute;left:8px;top:4px;width:5px;height:10px;border:solid var(--indigo);border-width:0 2px 2px 0;transform:rotate(45deg)}
.qual h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,34px);line-height:1.25;margin:0;text-wrap:balance}
.qual-sub{margin:10px 0 22px;font-size:15.5px;line-height:1.7;color:var(--on-dark)}
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.q-f{display:grid;gap:7px;min-width:0;margin:0;padding:0;border:0}
.q-f>span,.q-f>legend,.q-f>label{font-size:13.5px;font-weight:600;color:var(--on-dark);padding:0}
.q-size,.q-phone{grid-column:1/-1}
.q-f input[type=text],.q-tel{width:100%;border:0;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:var(--white);
  font:500 16px var(--body);padding:12px 14px;outline:none;transition:box-shadow .2s,background .2s}
.q-f input[type=text]::placeholder,.q-tel input::placeholder{color:rgba(255,255,255,.4)}
.q-f input[type=text]:focus,.q-tel:focus-within{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(22,209,242,.8)}
.q-tel{display:flex;align-items:center;gap:0;padding:0}
.q-cc{position:relative;flex:none;display:flex;align-items:center;gap:6px;padding:12px 12px 12px 14px;border-right:1px solid rgba(255,255,255,.14);font:600 15px "Inter Tight",var(--body);color:var(--white)}
.q-cc:after{content:"";width:6px;height:6px;border:solid rgba(255,255,255,.6);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px)}
.q-cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.q-cc:has(select:focus-visible){outline:2px solid var(--aqua);outline-offset:-2px;border-radius:10px}
.q-tel select option{color:var(--indigo)}
.q-tel input{flex:1;min-width:0;border:0;background:transparent;color:var(--white);font:500 16px "Inter Tight",var(--body);padding:12px 14px;outline:none;text-align:left}
.q-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.q-chips label{position:relative;cursor:pointer}
.q-chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.q-chips label>span{display:flex;align-items:center;justify-content:center;gap:4px;height:44px;border-radius:11px;font-size:14.5px;font-weight:600;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,box-shadow .2s}
.q-chips label:hover>span{background:rgba(255,255,255,.1)}
.q-chips input:checked+span{background:var(--white);color:var(--indigo);box-shadow:none}
.q-chips input:focus-visible+span{outline:2px solid var(--aqua);outline-offset:2px}
.qual.personal .q-team{display:none}
.q-consent{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;font-size:14px;line-height:1.7;color:var(--on-dark);cursor:pointer}
.q-consent input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:3px 0 0;border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);cursor:pointer;position:relative;transition:background .2s}
.q-consent input:checked{background:var(--aqua);box-shadow:none}
.q-consent input:checked:after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;border:solid var(--indigo);border-width:0 2px 2px 0;transform:rotate(45deg)}
.q-consent input:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
.qual-msg{min-height:1.5em;margin:12px 0 0;font-size:14.5px;color:#FFB4C0}
.q-acts{display:flex;gap:8px;margin-top:6px}
.q-acts button,.q-close{border:0;cursor:pointer;font:600 16px var(--body);padding:13px 22px;border-radius:12px;transition:background .2s,transform .15s}
.q-save,.q-close{background:var(--white);color:var(--indigo)}
.q-save:hover,.q-close:hover{background:var(--aqua)}
.q-skip{background:rgba(255,255,255,.08);color:var(--white)}
.q-skip:hover{background:rgba(255,255,255,.14)}
.q-acts button:active{transform:scale(.98)}
.q-acts button[disabled]{opacity:.6;cursor:progress}
.q-privacy{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.5)}
.q-privacy a{color:inherit;text-underline-offset:3px}
.qual-thanks{text-align:center;display:grid;justify-items:center;gap:6px;padding-block:44px}
.qual-thanks[hidden]{display:none}
.qual-tick.big{width:52px;height:52px;margin-bottom:10px}
.qual-tick.big:after{left:19px;top:11px;width:10px;height:21px;border-width:0 3px 3px 0}
.qual-thanks h2{outline:none}
.qual-thanks p{margin:4px 0 18px;color:var(--on-dark)}

@media (max-width:560px){
  .use-type legend{float:none;width:100%;margin-bottom:6px}
  .ut-opts{width:100%}
  .ut-opts label{flex:1}
  .ut-opts label>span{width:100%;justify-content:center;padding-inline:8px;font-size:13.5px}
  .qual{width:100vw;max-width:100vw;max-height:92svh;margin:auto 0 0;border-radius:22px 22px 0 0}
  .qual[open]{animation-name:qualUp}
  @keyframes qualUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
  .q-grid{grid-template-columns:minmax(0,1fr)}
  .q-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-acts{flex-direction:column}
  .q-acts button{width:100%}
}
@media (prefers-reduced-motion:reduce){.qual[open]{animation:none}}