/* ==========================================================================
   Join the waitlist

   One screen: the copy over the deep end of the field, the form over the lit
   end — the composition the For Schools hero uses, on the blue environment the
   home hero opens with, so the page reads as part of that experience.

   Loads on top of app.css for the reset, the face and the navbar. No new type
   is introduced, and the field's stops are lifted from .hero__bg directly.
   ========================================================================== */

:root{
  --pad: clamp(22px, 5.2vw, 96px);
  --light:0;                        /* app.css navbar: the dark pill, as it sits
                                       on the home hero's blue */

  --hd:#fff;
  --ld:rgba(255,255,255,.80);
  --eyebrow:rgba(203,222,252,.95);

  --surf:#fffdfa;
  --surf2:#f5f2ec;
  --line:rgba(18,24,32,.12);
  --line2:rgba(18,24,32,.20);
  --ink:#151a22;
  --ink2:rgba(21,26,34,.58);

  /* the accents come off the home hero's own ramp, so the form reads as part
     of that environment rather than as a green card dropped onto blue */
  --acc:#2a5fb8;
  --acc-deep:#0e2b63;
  --err:#b3452f;
}

html{background:#02081a}
.wbody{background:transparent;color:var(--hd);min-height:100svh;overflow-x:hidden}

/* the error lines and the confirmation are toggled by the hidden attribute,
   and every one of them carries a display of its own that would otherwise
   outrank the UA sheet's display:none */
[hidden]{display:none !important}

/* The home hero's environment, rebuilt: the same 127deg ramp from deep navy
   at the top-left out to a lit blue at the bottom-right, the same luminous
   bloom in that corner, and the same depth wash over the dark end. Stops are
   taken from .hero__bg in app.css rather than re-picked, so the two screens
   are the same place. The only change is that each fade lands on a zero-alpha
   copy of its own colour — `transparent` is zero-alpha black in sRGB and
   would grey the middle of the falloff. */
.w-field{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(78% 66% at 96% 112%,
      rgba(214,231,253,.98) 0%, rgba(160,193,242,.72) 24%,
      rgba(92,140,222,.34) 46%, rgba(48,95,190,.10) 66%, rgba(48,95,190,0) 80%),
    linear-gradient(127deg,
      #02081a 0%, #04102c 14%, #081c44 28%, #0e2b63 42%,
      #17408b 56%, #2258b0 69%, #3573cf 82%, #578fdd 92%, #7aa8e8 100%);
}
/* depth only — never enough to read as black */
.w-field::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(127deg,
    rgba(0,4,14,.50) 0%, rgba(0,6,20,.18) 22%, rgba(0,6,20,0) 44%);
}
/* the copy sits over the darkest corner of the ramp, where the bloom has not
   reached — this lifts it a little and feathers to nothing, the same job the
   hero's own scrim does */
.w-field::before{
  content:'';position:absolute;z-index:1;
  left:-6%;top:50%;translate:0 -50%;
  width:min(62%,820px);height:min(84%,700px);
  background:radial-gradient(56% 52% at 38% 50%, rgba(120,160,230,.16), rgba(120,160,230,0) 72%);
}

/* ── The screen ───────────────────────────────────────────────────────────── */

.w{
  min-height:100svh;display:grid;align-content:center;
  padding:clamp(104px,13vh,150px) 0 clamp(44px,7vh,88px);
}
.w__in{
  width:min(1320px,100%);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;gap:clamp(30px,4.6vw,84px);
}

/* ── Copy ─────────────────────────────────────────────────────────────────── */

.w-eyebrow{
  margin:0 0 clamp(16px,1.7vw,26px);
  font-size:clamp(11px,.8vw,12.5px);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--eyebrow);
}
/* the break is a pair of blocks rather than a <br>: hiding a <br> on narrow
   takes the space with it and welds the two words together */
.w-h1{
  margin:0;font-weight:400;
  font-size:clamp(2.25rem,4.5vw,4.4rem);line-height:1.04;letter-spacing:-.04em;
  color:var(--hd);
}
.w-h1 span{display:block}
.w-lede{
  margin:clamp(20px,2.2vw,34px) 0 0;
  font-size:clamp(.94rem,1.06vw,1.14rem);line-height:1.58;
  color:var(--ld);max-width:36ch;
}

/* ── The card ─────────────────────────────────────────────────────────────
   The window language from Horizon and For Schools, minus the chrome: this
   one is a form, not a screenshot of the product.                          */

.w__panel{display:grid;justify-items:end}
.card{
  width:min(520px,100%);
  padding:clamp(22px,2.2vw,34px);
  border-radius:clamp(14px,1.35vw,22px);
  background:var(--surf);
  border:1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(4,12,32,.05),
    0 4px 14px -6px rgba(4,12,32,.10),
    0 52px 100px -46px rgba(1,8,26,.66);
  color:var(--ink);
}

/* ── Fields ───────────────────────────────────────────────────────────────── */

.form{display:grid;gap:clamp(14px,1.35vw,19px)}
.field{display:grid;gap:7px;margin:0;padding:0;border:0;min-width:0}
.field__l{
  font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--ink);
  display:flex;align-items:baseline;gap:7px;padding:0;
}
.field__o{font-weight:400;font-size:10.5px;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase}

.field__i{
  width:100%;height:46px;padding:0 13px;
  font:inherit;font-size:14.5px;letter-spacing:-.006em;color:var(--ink);
  background:var(--surf2);
  border:1px solid var(--line);border-radius:11px;
  transition:border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field__i::placeholder{color:var(--ink2)}
.field__i:hover{border-color:var(--line2)}
.field__i:focus{
  outline:none;background:var(--surf);
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(42,95,184,.16);
}
.field__i[aria-invalid="true"]{
  border-color:var(--err);background:rgba(179,69,47,.045);
}
.field__i[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(179,69,47,.15)}

.field__e{
  margin:0;font-size:11.5px;line-height:1.4;color:var(--err);
  display:flex;align-items:center;gap:5px;
}
.field__e::before{
  content:'';width:3px;height:3px;border-radius:50%;background:currentColor;flex:none;
}

/* ── Role ─────────────────────────────────────────────────────────────────
   Four radios as pills. A select would be one tap shorter to render and one
   tap longer to answer; the whole set is visible here, which is what keeps
   the form feeling short.                                                  */

.field--role{display:grid;gap:9px}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pill span{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--ink2);
  background:var(--surf2);border:1px solid var(--line);
  transition:color .22s var(--ease), background .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.pill:hover span{border-color:var(--line2);color:var(--ink)}
.pill input:checked + span{
  background:rgba(42,95,184,.10);border-color:rgba(42,95,184,.40);color:var(--acc);
}
.pill input:focus-visible + span{
  outline:2px solid var(--acc);outline-offset:2px;
}
.pills[aria-invalid="true"] .pill span{border-color:rgba(179,69,47,.55)}

/* the honeypot: out of the layout and out of the tab order, but not
   display:none — some bots skip what is explicitly hidden */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── Submit ───────────────────────────────────────────────────────────────── */

.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  width:100%;height:50px;margin-top:4px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--acc-deep);color:#fff;
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:-.008em;
  box-shadow:0 16px 34px -20px rgba(2,12,38,.85);
  transition:background .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.btn:hover{background:#17408b;transform:translateY(-1px);box-shadow:0 22px 42px -22px rgba(2,12,38,.9)}
.btn:active{transform:translateY(0)}
.btn:disabled{cursor:default;transform:none;opacity:.72}
.btn:disabled:hover{background:var(--acc-deep);box-shadow:0 16px 34px -20px rgba(2,12,38,.85)}

.btn__s{
  display:none;width:15px;height:15px;flex:none;
  border:1.8px solid rgba(255,255,255,.34);
  border-top-color:#fff;border-radius:50%;
  animation:wspin .68s linear infinite;
}
.btn.is-busy .btn__s{display:block}
@keyframes wspin{to{transform:rotate(360deg)}}

.form__err{
  margin:0;padding:11px 13px;
  border-radius:11px;
  background:rgba(179,69,47,.09);
  border:1px solid rgba(179,69,47,.26);
  color:#8f351f;
  font-size:12.5px;line-height:1.45;
}
.form__note{
  margin:0;font-size:11.5px;line-height:1.5;color:var(--ink2);text-align:center;
}

/* ── The confirmation ─────────────────────────────────────────────────────── */

.done{
  display:grid;justify-items:center;text-align:center;
  padding:clamp(8px,1.4vw,20px) 0 clamp(4px,1vw,10px);
}
.done:focus{outline:none}
.done__mark{display:block;width:54px;height:54px;margin-bottom:clamp(16px,1.8vw,24px)}
.done__mark svg{width:100%;height:100%;overflow:visible}
.done__ring{
  fill:rgba(42,95,184,.09);stroke:rgba(42,95,184,.30);stroke-width:1.5;
}
.done__tick{
  fill:none;stroke:var(--acc);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:32;stroke-dashoffset:32;
  animation:wtick .58s var(--ease-out) .12s forwards;
}
@keyframes wtick{to{stroke-dashoffset:0}}

.done__h{
  margin:0;font-weight:400;
  font-size:clamp(1.4rem,1.9vw,1.85rem);line-height:1.12;letter-spacing:-.032em;
  color:var(--ink);
}
.done__d{
  margin:clamp(11px,1.2vw,16px) 0 0;
  font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:34ch;
}
.done__d b{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.done__link{
  display:inline-flex;align-items:center;gap:.45em;
  margin-top:clamp(20px,2.2vw,30px);
  font-size:13.5px;font-weight:500;color:var(--acc);
  padding-bottom:5px;border-bottom:1px solid rgba(42,95,184,.34);
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.done__link:hover{gap:.8em;border-bottom-color:var(--acc)}
.done__link .ico{width:1em;height:1em;font-size:13px;fill:currentColor;flex:none}

/* the whole panel arrives, rather than the card's contents swapping in place */
.done[data-in]{animation:wIn .55s var(--ease-out) forwards}
@keyframes wIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

/* ── Arrival ──────────────────────────────────────────────────────────────
   The same staged entrance as the For Schools hero. Held only while the
   script is alive; without it every piece is simply present.              */

.i1,.i2,.i3,.i4{
  transition:opacity 1.05s var(--ease-out) var(--d,0s),
             translate 1.15s var(--ease-out) var(--d,0s);
}
html.js-w .i1,html.js-w .i2,html.js-w .i3,html.js-w .i4{opacity:0;translate:0 16px}
html.js-w .i4{translate:0 24px}
.i1{--d:.06s} .i2{--d:.17s} .i3{--d:.34s} .i4{--d:.28s}
html.js-w.w-run .i1,html.js-w.w-run .i2,
html.js-w.w-run .i3,html.js-w.w-run .i4{opacity:1;translate:0 0}

/* ── Narrow ───────────────────────────────────────────────────────────────── */

@media (max-width:940px){
  .w{align-content:start;padding-top:clamp(96px,15vh,132px)}
  .w__in{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px)}
  .w__panel{justify-items:stretch}
  .card{width:100%}
  .w-lede{max-width:46ch}
  .w-h1 span{display:inline}
}

@media (max-width:420px){
  .pills{gap:6px}
  .pill span{padding:7px 12px;font-size:12px}
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .i1,.i2,.i3,.i4{transition:none}
  html.js-w .i1,html.js-w .i2,html.js-w .i3,html.js-w .i4{opacity:1;translate:0 0}
  .btn__s{animation-duration:1.4s}
  .done__tick{animation:none;stroke-dashoffset:0}
  .done[data-in]{animation:none}
}