/* ====== BGadiEdu -- step wizard ====== */
.wiz{position:relative;max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);
  border-radius:20px;box-shadow:var(--sh-3);overflow:hidden}

/* progress */
.wiz-top{padding:18px 24px;border-bottom:1px solid var(--border-2);background:linear-gradient(180deg,var(--tint),#fff)}
.wiz-bar{height:4px;border-radius:4px;background:var(--border);overflow:hidden}
.wiz-bar i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--cyan),#5B4FC4 55%,var(--magenta));
  transition:width .45s cubic-bezier(.16,1,.3,1)}
.wiz-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.wiz-meta .step{font-family:var(--m);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.wiz-meta .save{font-size:12px;color:var(--ink-3)}

/* panes */
.pane{display:none;padding:32px 28px 26px;animation:paneIn .45s cubic-bezier(.16,1,.3,1)}
.pane.on{display:block}
@keyframes paneIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pane h2{font-size:clamp(22px,2.6vw,29px);color:var(--indigo);margin-bottom:8px}
.pane .lede{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:24px;max-width:52ch}

/* choice cards -- .picks base lives in style.css */
.picks.c2{grid-template-columns:1fr 1fr}
.picks.c3{grid-template-columns:repeat(3,1fr)}
.picks.grades{grid-template-columns:repeat(6,1fr)}
.pick{position:relative;text-align:left;padding:14px 16px;border:1px solid var(--border);border-radius:12px;
  background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s,background .18s;cursor:pointer}
.pick:hover{border-color:#CFD5EC;transform:translateY(-2px);box-shadow:var(--sh-2)}
.pick b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.pick span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.pick .em{font-size:22px;line-height:1;margin-bottom:8px;display:block}
.pick[aria-pressed="true"]{border-color:var(--cyan);background:linear-gradient(170deg,rgba(0,160,227,.07),rgba(0,160,227,.02));
  box-shadow:0 0 0 3px rgba(0,160,227,.14)}
.pick[aria-pressed="true"]:after{content:"";position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#12ACEC,var(--cyan))}
.picks.grades .pick{text-align:center;padding:14px 6px}
.picks.grades .pick b{font-size:14px}
.picks.grades .pick[aria-pressed="true"]:after{display:none}

/* footer nav */
.wiz-foot{display:flex;align-items:center;gap:12px;padding:18px 28px;border-top:1px solid var(--border-2);background:var(--surface)}
.wiz-foot .btn{min-width:120px}
.wiz-foot .spacer{margin-left:auto}
.wiz-err{color:var(--magenta);font-size:13px;font-weight:500}

/* quote card on the final step */
.quotecard{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:22px}
.quotecard .qh{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;background:linear-gradient(96deg,var(--indigo),#5B4FC4 60%,var(--cyan));color:#fff}
.quotecard .qh b{font-family:var(--d);font-size:15px;letter-spacing:-.02em}
.quotecard .qh .amt2{font-family:var(--d);font-size:24px;font-weight:700;letter-spacing:-.04em}
.quotecard .qh .amt2 small{font-family:var(--b);font-size:11.5px;font-weight:400;opacity:.8;margin-left:4px}
.quotecard .qb{padding:14px 16px;background:#fff}
.qrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13.5px;color:var(--ink-2);
  border-top:1px solid var(--border-2)}
.qrow:first-child{border:none}
.qrow b{color:var(--ink);font-weight:550}

/* exam notice (tutor flow) */
.exam{border-left:2px solid var(--amber);background:linear-gradient(90deg,rgba(245,166,35,.10),rgba(245,166,35,0));
  padding:14px 16px;border-radius:0 10px 10px 0;font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:20px}
.exam b{color:var(--ink)}

/* done state */
.done{text-align:center;padding:46px 28px}
.done .ring{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:26px;color:#fff;
  background:linear-gradient(150deg,#12ACEC,var(--cyan));box-shadow:0 14px 34px -12px rgba(0,160,227,.75);
  animation:pop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.done h2{margin-bottom:10px}
.done p{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:46ch;margin:0 auto}
.done .next{margin-top:24px;text-align:left;border:1px solid var(--border);border-radius:12px;padding:16px;background:var(--surface)}

@media(max-width:640px){
  .picks.c3,.picks.c2{grid-template-columns:1fr}
  .picks.grades{grid-template-columns:repeat(4,1fr)}
  .pane{padding:24px 18px 20px}
  .wiz-foot{padding:14px 18px}
  .wiz-foot .btn{min-width:0;flex:1}
}
@media(prefers-reduced-motion:reduce){.pane,.done .ring{animation:none}.wiz-bar i{transition:none}}

/* ====== "we have it" ======
   A form that swaps one paragraph for another feels like it ate your
   application. This is the moment that says: it landed, here is what happens,
   here is when. */
.thanks{width:min(520px,calc(100vw - 28px));padding:0;border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--sh-3);background:#fff;color:var(--ink);overflow:hidden}
.thanks::backdrop{background:rgba(36,30,88,.5);backdrop-filter:blur(4px)}
.thanks[open]{animation:thin .4s cubic-bezier(.16,1,.3,1)}
@keyframes thin{from{opacity:0;transform:translateY(14px) scale(.97)}}
.th-in{padding:32px 30px 26px;text-align:center;position:relative}
.th-in:before{content:"";position:absolute;inset:0 0 auto 0;height:120px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0,rgba(0,160,227,.12),transparent 70%)}
.th-ring{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;
  background:linear-gradient(150deg,#12ACEC,var(--cyan));box-shadow:0 14px 30px -12px rgba(0,160,227,.8);
  animation:thpop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes thpop{from{transform:scale(.4);opacity:0}}
.th-ring svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:thtick .4s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes thtick{to{stroke-dashoffset:0}}
.thanks h2{position:relative;font-size:24px;color:var(--indigo);letter-spacing:-.035em;margin:0 0 8px}
.th-lead{position:relative;font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 auto 20px;max-width:42ch}
.th-lead b{color:var(--ink)}
.th-steps{text-align:left;display:grid;gap:9px;margin-bottom:18px}
.th-step{display:flex;gap:11px;align-items:flex-start}
.th-step span{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:10px;
  font-weight:700;color:var(--cyan-d);background:rgba(0,160,227,.12);margin-top:1px}
.th-step p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0}
.th-step p b{color:var(--ink)}
.th-note{font-size:12.5px;line-height:1.55;color:var(--ink-3);background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:11px 13px;margin:0 0 18px;text-align:left}
.th-act{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
@media(max-width:520px){.th-in{padding:26px 20px 22px}.th-act .btn{flex:1}}

/* a minimum nobody can see is a trap: count it down as they type */
.counthint{display:flex;justify-content:space-between;gap:10px}
.counthint b{font-family:var(--m);font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.counthint b.ok{color:var(--cyan-d)}
.shake{animation:shake .3s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
textarea:invalid:not(:placeholder-shown){border-color:rgba(245,166,35,.6)}

/* A form that rejects you in silence is a form that is broken, whatever the
   server thinks. This is loud, it names the step, and it promises the typing
   survived -- because it does. */
.formfail{border-left:3px solid var(--magenta);animation:ffin .4s cubic-bezier(.16,1,.3,1)}
@keyframes ffin{from{opacity:0;transform:translateY(-8px)}}
.formfail b{display:block;font-size:15px;margin-bottom:6px}
.formfail div{font-size:13.5px;line-height:1.5}
.ff-note{display:block;margin-top:8px;font-size:12px;opacity:.75}