@font-face{font-family:'Fraunces';src:url(/brand/fonts/fraunces/400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(/brand/fonts/poppins/400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url(/brand/fonts/poppins/500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url(/brand/fonts/poppins/600.woff2) format('woff2');font-weight:600;font-display:swap}
:root{--ink:#141B2E;--muted:#6A7183;--line:#E4E0D8;--paper:#FAF8F4;--crimson:#ff0e4d;--ok:#1FA971}
@supports (color:color(display-p3 1 1 1)){:root{--crimson:color(display-p3 1 0.055 0.302)}}
*{box-sizing:border-box}
body{margin:0;background:#0F0F0F;font:400 15px Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* the same shell as the school sign-in page: a slanted plane of covers behind one card */
.au{position:relative;overflow:hidden;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:var(--g);color:var(--tx);
  --g:#0F0F0F;--bar:#141414;--cardbg:rgba(26,22,23,.97);--cline:rgba(255,255,255,.11);--tx:#F3EDE6;--mut:#A29B9D;
  --fld:rgba(255,255,255,.05);--fline:rgba(255,255,255,.15);--ph:#7C7573;--soft:rgba(255,255,255,.05);
  --shadow:0 30px 70px rgba(0,0,0,.6);
  --w1:rgba(255,255,255,.10);--w2:rgba(15,15,15,.12);--w3:rgba(15,15,15,.56);--w4:rgba(15,15,15,.06);--w5:rgba(15,15,15,.46)}
.au-top,.au-mid,.au-bot{position:relative;z-index:2}
.au-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;perspective:1500px;perspective-origin:50% 38%}
.au-art .plane{position:absolute;left:50%;top:50%;width:2400px;
  display:grid;grid-template-columns:repeat(16,1fr);gap:13px;grid-auto-rows:min-content;align-content:start;
  transform:translate(-50%,-50%) rotateX(26deg) rotateZ(-15deg) scale(1.02);transform-origin:50% 50%;
  filter:blur(0.5px) saturate(1.16);
  -webkit-mask-image:radial-gradient(ellipse 36% 36% at 50% 47%,#000 0%,rgba(0,0,0,.94) 50%,rgba(0,0,0,.42) 76%,transparent 95%);
  mask-image:radial-gradient(ellipse 36% 36% at 50% 47%,#000 0%,rgba(0,0,0,.94) 50%,rgba(0,0,0,.42) 76%,transparent 95%)}
.au-art .plane div{aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--soft);box-shadow:0 10px 22px rgba(20,27,46,.20)}
.au-art .plane img{width:100%;height:100%;object-fit:cover;display:block}
.au-art::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 62% at 22% 8%,var(--w1),rgba(255,255,255,0) 58%),
             radial-gradient(ellipse 60% 55% at 50% 50%,var(--w2),var(--w3) 72%),
             linear-gradient(176deg,var(--w4),var(--w5))}
@media (prefers-reduced-motion:reduce){.au-art .plane{filter:none}}
/* on a phone the card covers the middle, so the plane is scaled up and pulled north:
   the covers that are actually visible are the band above the card, and they need to be readable */
@media (max-width:560px){.au-art{perspective-origin:50% 24%}
 .au-art .plane{width:1080px;grid-template-columns:repeat(8,1fr);gap:9px;top:34%;
  -webkit-mask-image:radial-gradient(ellipse 54% 42% at 50% 40%,#000 0%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.42) 78%,transparent 96%);
  mask-image:radial-gradient(ellipse 54% 42% at 50% 40%,#000 0%,rgba(0,0,0,.94) 52%,rgba(0,0,0,.42) 78%,transparent 96%)}}

.au-top{display:flex;align-items:center;padding:18px 28px;background:var(--bar);border-bottom:1px solid var(--cline)}
.au-logo{width:165px;height:25px;position:relative;top:-3px;background:var(--crimson);-webkit-mask:url(/brand/logo.svg) no-repeat left center/contain;mask:url(/brand/logo.svg) no-repeat left center/contain}
.au-top a{margin-left:auto;font:500 13.5px Poppins;color:var(--mut);text-decoration:none}
.au-top a:hover{color:var(--tx)}
.au-mid{display:flex;align-items:center;justify-content:center;padding:44px 22px}

.card{width:100%;max-width:396px;background:var(--cardbg);border:1px solid var(--cline);border-radius:16px;padding:34px 32px 30px;box-shadow:var(--shadow)}
.card h1{margin:0 0 15px;font:600 25px/1.2 Fraunces,Georgia,serif;letter-spacing:-.01em}
.card .sub{margin:0 0 24px;font:400 14px/1.55 Poppins;color:var(--mut)}

label{display:block;font:500 13px Poppins;margin:0 0 6px;color:var(--tx)}
.f{margin-bottom:16px}
input[type=text],input[type=email]{width:100%;font:400 15px Poppins;color:var(--tx);background:var(--fld);
  border:1px solid var(--fline);border-radius:10px;padding:11px 13px;outline:0;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--ph)}
.sel{position:relative}
.sel::after{content:'';position:absolute;right:14px;top:50%;width:9px;height:9px;margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--ph);border-bottom:2px solid var(--ph);transform:rotate(45deg)}
select{width:100%;font:400 15px Poppins;color:var(--tx);background:var(--fld);color-scheme:dark;
  border:1px solid var(--fline);border-radius:10px;padding:11px 36px 11px 13px;outline:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
select:focus-visible{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(255,14,77,.13)}
select:invalid,select.empty{color:var(--ph)}
select option{color:#141B2E;background:#fff}
input:focus-visible{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(255,14,77,.13)}
input[aria-invalid=true]{border-color:var(--crimson)}
.opt{font-weight:400;color:var(--mut)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the pilot ask: a box, so it reads as an offer rather than another field */
.pilot{border:1px solid var(--fline);background:var(--soft);border-radius:12px;padding:14px 15px;margin:4px 0 20px;transition:border-color .15s,background .15s}
.pilot:has(input:checked){border-color:color-mix(in srgb,var(--ok) 52%,transparent);background:color-mix(in srgb,var(--ok) 11%,var(--cardbg))}
.pilot .check{display:flex;align-items:flex-start;gap:10px;font:500 14.5px/1.4 Poppins;color:var(--tx);cursor:pointer;margin:0}
.pilot .check input{width:18px;height:18px;accent-color:var(--ok);margin:1px 0 0;flex:none}
.pilot p{margin:9px 0 0 28px;font:400 13px/1.55 Poppins;color:var(--mut)}

.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:48px;border:0;border-radius:10px;cursor:pointer;
  font:600 15px Poppins;background:var(--crimson);color:#fff;transition:filter .15s}
.btn:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.6;cursor:default}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;display:none}
@keyframes sp{to{transform:rotate(360deg)}}
.btn.busy .spin{display:block}
.err{display:none;margin:12px 0 0;font:400 13.5px/1.5 Poppins;color:#FF6B8E}
.err.on{display:block}
.foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--cline);font:400 12.5px/1.55 Poppins;color:var(--mut)}

/* the success state replaces the form in place, so nothing navigates */
.done{display:none;text-align:center}
.card.sent .form{display:none}
.card.sent .done{display:block}
.big{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,var(--cardbg));margin:2px auto 16px}
.big svg{width:28px;height:28px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.done h2{margin:0 0 8px;font:600 23px/1.25 Fraunces,Georgia,serif}
.done p{margin:0;font:400 14px/1.6 Poppins;color:var(--mut)}

.au-bot{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;padding:20px 24px 26px;font:400 13px Poppins;color:var(--mut)}
.au-bot a{color:var(--mut);text-decoration:none}
.au-bot a:hover{color:var(--tx);text-decoration:underline}
@media (max-width:560px){
  .au-top{padding:15px 18px}.au-logo{width:143px;height:22px}
  .au-mid{padding:104px 14px 34px;align-items:flex-start}
  .card{padding:24px 20px 22px;border-radius:14px}
  .card h1{font-size:22px}
}

/* the question form needs a message box; everything else it shares with the waiting list */
textarea{width:100%;min-height:118px;resize:vertical;font:400 15px/1.55 Poppins;color:var(--tx);background:var(--fld);
  border:1px solid var(--fline);border-radius:10px;padding:11px 13px;outline:0;transition:border-color .15s,box-shadow .15s}
textarea::placeholder{color:var(--ph)}
textarea:focus-visible{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(255,14,77,.13)}
/* the logo doubles as a way back to the waiting list on the help page */
.au-top a.au-logo{display:block;margin-left:0}