/* Readiness quiz. Sits on top of the site stylesheet. */

.quiz-shell{
  max-width:840px;
  margin:0 auto;
}

.quiz-privacy{
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--red);
  border-radius:14px;
  padding:16px 18px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
  margin:0 0 clamp(22px,3vw,32px);
}

.quiz-form{display:grid;gap:clamp(16px,2vw,22px)}

.quiz-q{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:20px 20px 16px;
  margin:0;
  box-shadow:0 10px 28px rgba(0,0,0,.04);
}

.quiz-q legend{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-weight:900;
  font-size:17px;
  line-height:1.35;
  padding:0;
}

.quiz-num{
  color:var(--red);
  font-size:13px;
  letter-spacing:1px;
  flex:0 0 auto;
}

.quiz-choices{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

/* The radio itself stays in the accessibility tree and keeps keyboard support;
   the label is what gets styled. */
.quiz-choice{
  position:relative;
  display:inline-flex;
}
.quiz-choice input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}
.quiz-choice span{
  display:inline-block;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 15px;
  font-size:14px;
  font-weight:700;
  color:#3d4450;
  background:#fbfbfc;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.quiz-choice input:hover + span{border-color:#c9ccd4}
.quiz-choice input:checked + span{
  background:var(--red);
  border-color:var(--red);
  color:#fff;
}
.quiz-choice input:focus-visible + span{
  outline:3px solid var(--red);
  outline-offset:3px;
}

.quiz-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.quiz-hint{margin:0;color:var(--muted);font-size:14px}

/* --- result ---------------------------------------------------------------- */

.quiz-result{
  margin-top:clamp(26px,3vw,36px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(22px,3vw,32px);
  box-shadow:0 14px 36px rgba(0,0,0,.06);
  scroll-margin-top:130px;
}
.quiz-result:focus{outline:none}
.quiz-result h3{
  margin:26px 0 12px;
  font-size:19px;
}

.quiz-band{
  margin:0;
  font-size:clamp(22px,3vw,30px);
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.4px;
}
.quiz-band-ready{color:#12151a}
.quiz-band-close{color:#12151a}
.quiz-band-early{color:#12151a}
.quiz-band:before{
  content:"";
  display:block;
  width:46px;
  height:5px;
  border-radius:3px;
  background:var(--red);
  margin-bottom:14px;
}

/* The one-line explanation of why the band came out the way it did. */
.quiz-reason{
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width:62ch;
}

.quiz-room{
  margin-top:20px;
  padding:18px 20px;
  background:var(--soft);
  border-radius:14px;
}
.quiz-room span{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--muted);
}
.quiz-room strong{
  display:block;
  font-size:clamp(26px,3.4vw,34px);
  line-height:1.1;
  margin:6px 0 8px;
}
.quiz-room p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

.quiz-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.quiz-list li{
  padding-left:20px;
  position:relative;
  font-size:14.5px;
  line-height:1.6;
  color:var(--muted);
}
.quiz-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
}
.quiz-list strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px}

.quiz-steps{margin:0;padding-left:20px;display:grid;gap:10px}
.quiz-steps li{color:var(--muted);font-size:14.5px;line-height:1.6}
.quiz-steps li::marker{color:var(--red);font-weight:900}

.quiz-disclaimer{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.quiz-disclaimer strong{display:block;margin-bottom:6px;font-size:14px}
.quiz-disclaimer p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}

.quiz-cta{
  margin-top:clamp(26px,3vw,36px);
  background:#050505;
  color:#fff;
  border-radius:18px;
  padding:clamp(24px,3vw,34px);
}
.quiz-cta h2{margin:0 0 8px;font-size:clamp(20px,2.4vw,26px)}
.quiz-cta p{margin:0 0 18px;color:rgba(255,255,255,.78);max-width:62ch}

@media (max-width:640px){
  .quiz-q{padding:18px 16px 14px}
  .quiz-q legend{font-size:16px}
  .quiz-choice span{padding:9px 13px;font-size:13.5px}
  .quiz-actions .btn{width:100%;justify-content:center}
}

@media print{
  .quiz-form,.quiz-cta,.quiz-privacy{display:none}
  .quiz-result{box-shadow:none;border:0;padding:0}
}