/* ============================================================
   QUALIFICATION QUIZ — one question per screen
   ============================================================ */

.quiz-page{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,#f6faf8 0%,#eef5f1 100%);
}

/* progress */
.quiz-top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.quiz-top-inner{max-width:720px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.quiz-track{height:5px;background:var(--line)}
.quiz-bar{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width .4s cubic-bezier(.4,0,.2,1)}
.quiz-count{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.02em;white-space:nowrap}

.quiz-main{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 24px 64px}
#quiz-root{width:100%;max-width:720px}

/* card
   No fill-mode on purpose: if the animation never runs (background tab,
   reduced motion, old browser) the card is simply visible. Never invisible. */
.q-card{animation:q-in .38s cubic-bezier(.2,.7,.3,1)}
@keyframes q-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.q-title{font-size:clamp(1.5rem,3.6vw,2.15rem);font-weight:800;margin-bottom:12px;letter-spacing:-.015em}
.q-help{color:var(--muted);font-size:1.02rem;margin-bottom:30px;max-width:600px}

/* options */
.q-options{display:grid;gap:12px}
.q-option{
  display:flex;align-items:flex-start;gap:15px;width:100%;text-align:left;
  background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:19px 22px;cursor:pointer;font-family:inherit;font-size:1.04rem;
  color:var(--ink);font-weight:600;line-height:1.45;
  transition:border-color .16s,box-shadow .16s,transform .1s,background .16s;
}
.q-option:hover{border-color:var(--green);box-shadow:0 6px 20px rgba(18,92,63,.1);transform:translateY(-1px)}
.q-option:focus-visible{outline:3px solid rgba(200,153,46,.5);outline-offset:2px}
.q-option.is-selected{border-color:var(--green);background:#eef7f2;box-shadow:0 8px 24px rgba(18,92,63,.16)}

.q-key{
  flex-shrink:0;width:27px;height:27px;border-radius:8px;
  background:var(--soft);color:var(--muted);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;margin-top:1px;transition:background .16s,color .16s;
}
.q-option:hover .q-key,.q-option.is-selected .q-key{background:var(--green);color:#fff;border-color:var(--green)}
.q-label{flex:1}
.q-note{display:block;font-weight:500;font-size:.88rem;color:var(--muted);margin-top:5px;line-height:1.4}

/* nav */
.q-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;flex-wrap:wrap}
.q-back{background:none;border:none;font-family:inherit;font-size:.95rem;font-weight:700;color:var(--muted);cursor:pointer;padding:8px 0}
.q-back:hover{color:var(--green)}
.q-hint{font-size:.84rem;color:#93a89e;margin-left:auto}
.q-hint b{color:var(--muted)}

/* contact form */
.q-form{display:grid;gap:17px;margin-top:4px}
.q-field{display:grid;gap:6px}
.q-field label{font-size:.92rem;font-weight:700;color:var(--ink)}
.q-field .opt{font-weight:500;color:var(--muted)}
.q-field input,.q-field select{
  font-family:inherit;font-size:1.02rem;padding:15px 17px;
  border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  transition:border-color .16s,box-shadow .16s;width:100%;
}
.q-field input:focus,.q-field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(18,92,63,.1)}
.q-consent{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--muted);line-height:1.45;cursor:pointer}
.q-consent input{width:19px;height:19px;margin-top:2px;accent-color:var(--green);flex-shrink:0}
.q-consent a{color:var(--green);font-weight:600}
.q-error{background:#fdecec;border:1px solid #f3c9c9;color:#8f2f2f;padding:12px 15px;border-radius:10px;font-size:.92rem;margin:0}
.q-submit{width:100%;margin-top:4px}
.q-reassure{text-align:center;font-size:.87rem;color:var(--muted);margin:0}

/* result */
.q-result{text-align:left}
.q-badge{
  display:inline-block;background:#e7f2ec;color:var(--green);
  font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.q-result-list{margin:22px 0 30px}
.q-result-list li{font-weight:600}
.q-calendly{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:120px}

/* not-a-fit page */
.outcome{max-width:660px;margin:0 auto;padding:70px 24px 90px;text-align:left}
.outcome .q-badge{background:#fdf3e3;color:#8a6a12}
.outcome h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:16px}
.outcome p{color:var(--muted);font-size:1.06rem}
.outcome .box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;margin:30px 0}
.outcome .box h3{margin-bottom:10px}
.outcome .box p:last-child{margin-bottom:0}

@media(max-width:560px){
  .quiz-main{padding:30px 18px 50px;align-items:flex-start}
  .q-option{padding:16px 17px;font-size:1rem;gap:12px}
  .q-hint{display:none}
  .q-title{margin-bottom:10px}
  .q-help{margin-bottom:24px;font-size:.98rem}
}
@media(prefers-reduced-motion:reduce){
  .q-card{animation:none}
}