/* ---------- apply.css · the founding-access application modal (12 Sep 2026) ----------
   On top of styles.css (Frost tokens, .glass, .btn, .kicker). Nothing here touches the page. */

.ap{position:fixed; inset:0; z-index:95; display:grid; place-items:center; height:100%; height:100dvh; padding:clamp(12px,3vw,32px); overflow:auto; overscroll-behavior:contain}
.ap[hidden]{display:none}
.ap-veil{position:absolute; inset:0; background:rgba(3,7,14,.82); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%)}
.ap-card{position:relative; width:min(760px,100%); margin:auto; padding:clamp(20px,3.4vw,34px); border-radius:var(--radius);
  background-color:rgba(9,17,31,.96); box-shadow:0 40px 100px -40px rgba(0,0,0,.95), inset 0 0 0 1px var(--frost-hairline);
  animation:apIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes apIn{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
.ap-x{position:absolute; top:12px; right:12px; appearance:none; cursor:pointer; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--frost-hairline); background:var(--frost-glass); color:var(--text-2); font-size:1.3rem; line-height:1; display:grid; place-items:center}
.ap-x:hover{border-color:var(--cyan); color:var(--cyan)}
.ap-x:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.ap-h{font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0 0 10px; color:var(--text)}
.ap-h em{font-style:normal; color:var(--cyan)}
.ap-lede{margin:0 0 18px; font-size:.94rem; line-height:1.6; color:var(--text-2); max-width:62ch}

.ap-form{display:grid; gap:16px}
.ap-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ap-field{display:grid; gap:8px; min-width:0}
.ap-field > label{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.ap-opt{color:var(--steel); text-transform:none; letter-spacing:.06em}
.ap-field input[type=text],.ap-field input[type=email],.ap-field textarea{
  width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--frost-hairline); background:rgba(5,14,24,.7);
  color:var(--text); font:inherit; font-size:.95rem}
.ap-field textarea{resize:vertical; min-height:78px; line-height:1.5}
.ap-field input:focus,.ap-field textarea:focus{outline:2px solid var(--cyan); outline-offset:1px; border-color:transparent}
.ap-field input::placeholder,.ap-field textarea::placeholder{color:var(--steel)}

.ap-chips{display:flex; flex-wrap:wrap; gap:8px}
.ap-chip{appearance:none; cursor:pointer; padding:9px 15px; border-radius:999px; border:1px solid var(--frost-hairline);
  background:var(--frost-glass); color:var(--text-2); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; transition:border-color .2s, color .2s, background .2s}
.ap-chip:hover{border-color:var(--cyan); color:var(--text)}
.ap-chip[aria-pressed="true"]{border-color:var(--cyan); color:var(--text-inverse); background:var(--cyan); font-weight:600}
.ap-chip:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}

.ap-check{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:12px;
  background:rgba(41,211,145,.05); box-shadow:inset 0 0 0 1px rgba(41,211,145,.25); cursor:pointer}
.ap-check input{margin-top:3px; width:17px; height:17px; accent-color:var(--green); flex:none}
.ap-check span{font-size:.88rem; line-height:1.55; color:var(--text-2)}
.ap-check b{color:var(--text)}
.ap[data-mode="beta"] .ap-check{background:rgba(0,212,255,.05); box-shadow:inset 0 0 0 1px rgba(0,212,255,.28)}

.ap-terms{margin:0; font-size:.76rem; line-height:1.6; color:var(--text-3)}
.ap-msg{margin:0; min-height:1.2em; font-size:.84rem; color:var(--amber)}
.ap-msg:empty{min-height:0}
.ap-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

@media (max-width:640px){
  .ap{padding:0; place-items:stretch}
  .ap-card{width:100%; min-height:100dvh; align-self:start; margin:0; border-radius:0; padding:56px 16px max(28px, env(safe-area-inset-bottom)); overflow:visible}
  .ap-row{grid-template-columns:1fr}
  .ap-actions{position:sticky; bottom:0; z-index:1; margin:4px -16px 0; padding:14px 16px max(14px, env(safe-area-inset-bottom)); background:rgba(9,17,31,.97); box-shadow:0 -1px 0 var(--frost-hairline)}
  .ap-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.ap-card{animation:none}}