/* ============================================================
   PILOT — Founding / Design-Partner application form.
   Theme-aware; uses kit.css tokens via local aliases so the
   component loads standalone without a custom property cascade.
   Mount: <div data-pilot></div>
   ============================================================ */
.pi-wrap{
  --pi-neon:var(--neon,#22e0c8); --pi-violet:var(--violet,#8b6cff);
  --pi-line:var(--line,#262640); --pi-card:var(--card,#16162a);
  --pi-ink:var(--ink,#eef0ff); --pi-mut:var(--mut,#a6a9c8);
  max-width:680px; margin:0 auto;
}
.pi-card{
  background:var(--pi-card); border:1px solid var(--pi-line); border-radius:18px;
  padding:28px 26px; box-shadow:0 30px 70px -40px #000;
  animation:pi-rise .35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes pi-rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce){ .pi-card{ animation:none } }

.pi-intro{ color:var(--pi-mut); margin:0 0 22px; line-height:1.65; }

/* labels + wrappers */
.pi-form{ display:flex; flex-direction:column; gap:14px; }
.pi-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pi-field{ display:flex; flex-direction:column; gap:5px; }
.pi-label{ font-size:12px; font-weight:700; color:var(--pi-mut); }
.pi-req{ color:var(--pi-neon); margin-left:2px; }
.pi-req-note{ font-size:12px; color:var(--pi-mut); opacity:.8; margin:0; }
.pi-hint{ font-size:12px; color:var(--pi-mut); opacity:.8; }

/* inputs, selects, textarea */
.pi-input,.pi-select,.pi-area{
  width:100%; background:#0c0c18; color:var(--pi-ink);
  border:1px solid var(--pi-line); border-radius:10px;
  padding:11px 14px; font-size:15px; font-family:inherit;
  transition:border-color .18s, box-shadow .18s;
}
.pi-select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6a9c8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.pi-area{ resize:vertical; min-height:80px; }
.pi-input:focus,.pi-select:focus,.pi-area:focus,
.pi-input:focus-visible,.pi-select:focus-visible,.pi-area:focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--pi-neon) 55%,var(--pi-line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pi-neon) 14%,transparent);
}

/* submit + error */
.pi-submit{ width:100%; text-align:center; margin-top:4px; }
.pi-err{ color:#ff5e7e; font-size:13px; min-height:18px; line-height:1.4; }
.pi-err:not(:empty){ margin-top:4px; }

/* success / confirm state */
.pi-done{ text-align:center; padding:32px 26px; }
.pi-kick{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--pi-neon); margin-bottom:6px;
}
.pi-done h3{ margin:8px 0 20px; font-size:26px; line-height:1.2; }
.pi-ticket-box{
  display:inline-flex; flex-direction:column; align-items:center;
  background:color-mix(in srgb,var(--pi-neon) 8%,#0c0c18);
  border:1px solid color-mix(in srgb,var(--pi-neon) 28%,var(--pi-line));
  border-radius:14px; padding:14px 32px; margin:0 auto 22px;
}
.pi-ticket-num{
  font-size:28px; font-weight:800; color:var(--pi-neon);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.pi-waitlist-line{ font-size:17px; color:var(--pi-ink); margin:0 0 6px; }
.pi-waitlist-line b{ color:var(--pi-neon); }
.pi-spots-line{ font-size:14px; color:var(--pi-mut); margin:0 0 16px; }
.pi-spots-line b{ color:var(--pi-ink); }
.pi-msg-line{
  background:var(--pi-card); border:1px solid var(--pi-line); border-radius:10px;
  padding:12px 16px; color:var(--pi-mut); font-size:14px; margin:0 0 22px; text-align:left;
}
.pi-cta-row{ display:flex; justify-content:center; }
.pi-cta-row .btn{ min-width:200px; text-align:center; }

@media(max-width:580px){
  .pi-two{ grid-template-columns:1fr; }
  .pi-card{ padding:20px 16px; }
  .pi-done{ padding:24px 16px; }
}