/* "Find your child's plan" quiz — three questions, a personal plan, then Google Play (or a RevenueCat Funnel later). */
.quiz { text-align: center; }
.quiz .lead { margin: 0.5rem auto 1.25rem; }
.quiz-card {
  position: relative; max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 1.25rem;
  background: var(--panel); border: 3px solid var(--honey); border-radius: var(--radius); box-shadow: var(--shadow);
  text-align: left;
}
.quiz-progress { height: 10px; border-radius: 99px; background: #f1e6c8; overflow: hidden; margin-bottom: 1.1rem; }
.quiz-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--honey), var(--honey-deep)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.quiz-step { border: 0; margin: 0; padding: 0; }
.quiz-step legend { font: 800 clamp(1.25rem, 3.6vw, 1.6rem)/1.15 var(--font-display); color: var(--ink); text-align: center; width: 100%; margin-bottom: 1rem; }
.quiz-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.quiz-opts label { position: relative; cursor: pointer; }
.quiz-opts input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-opts span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 112px; padding: 0.9rem 0.6rem;
  border-radius: 22px; color: #fff; text-align: center; font: 800 1.15rem/1.15 var(--font-display);
  background: linear-gradient(180deg, #3f86ea, #1f4fbf); border: 3px solid rgba(255,255,255,.6);
  box-shadow: 0 6px 0 #1d48a8, 0 12px 22px rgba(15,10,50,.18); text-shadow: 0 2px 2px rgba(0,0,0,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.quiz-opts label:nth-child(2) span { background: linear-gradient(180deg, #8a5cf0, #5a2bc4); box-shadow: 0 6px 0 #4f25a8, 0 12px 22px rgba(15,10,50,.18); }
.quiz-opts label:nth-child(3) span { background: linear-gradient(180deg, #1fa58c, #0b7462); box-shadow: 0 6px 0 #0b6b5c, 0 12px 22px rgba(15,10,50,.18); }
.quiz-opts small { font: 700 0.82rem/1.25 var(--font-body); opacity: .95; }
.quiz-opts label:hover span { transform: translateY(-3px); }
.quiz-opts input:focus-visible + span { outline: 4px solid var(--honey); outline-offset: 3px; }
.quiz-opts input:checked + span { transform: translateY(4px); outline: 4px solid var(--honey); outline-offset: 2px; }
.quiz-nav { display: flex; justify-content: center; margin-top: 1rem; }
.quiz-nav .btn[hidden] { display: none; }

.quiz-result { text-align: center; animation: quizPop .45s cubic-bezier(.2,.8,.2,1); }
.quiz-kicker { display: inline-block; margin: 0 0 .4rem; padding: .25rem .9rem; border-radius: 99px; background: #5a2bc4; color: #fff; font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.quiz-result h3 { margin: .2rem 0 .9rem; font: 800 clamp(1.35rem, 4vw, 1.9rem)/1.15 var(--font-display); color: var(--ink); }
.quiz-result ol { list-style: none; margin: 0 auto 1rem; padding: 0; max-width: 520px; display: grid; gap: .55rem; text-align: left; counter-reset: q; }
.quiz-result li {
  counter-increment: q; display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; align-items: center;
  padding: .7rem .9rem; border-radius: 18px; background: #fff; border: 2px solid #ffe08a; box-shadow: 0 3px 0 rgba(217,131,0,.35);
}
.quiz-result li::before { content: counter(q); grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--honey); color: var(--ink); font-weight: 800; }
.quiz-result li b { font: 800 1.05rem/1.2 var(--font-display); }
.quiz-result li small { color: var(--ink-soft); font-weight: 700; }
.quiz-note { margin: 0 auto 1rem; max-width: 520px; color: var(--ink-soft); font-weight: 700; }
.quiz-cta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.quiz-small { margin: .9rem auto 0; max-width: 560px; font-size: .85rem; color: var(--ink-soft); }
@keyframes quizPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .quiz-card { padding: 1.1rem .8rem 1rem; }
  .quiz-opts { grid-template-columns: 1fr; }
  .quiz-opts span { min-height: 0; flex-direction: row; justify-content: flex-start; gap: .6rem; padding: .85rem 1rem; text-align: left; }
  .quiz-opts small { margin-left: auto; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .quiz-result { animation: none; } .quiz-progress i { transition: none; } }