/* Services quiz — BOR review site
   Companion to assets/site.css (uses its :root tokens). Loaded by quiz.html only. */

.quiz-sec{padding-top:3.4rem}
.quiz-wrap{max-width:760px}
.quiz-frame{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--blue-dark);font-size:.95rem;margin-bottom:.2rem}
.quiz-frame span{display:block;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:.95rem;margin-top:.35rem}

.quiz-card{margin-top:2rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem 1.6rem 1.8rem}
@media(max-width:560px){.quiz-card{padding:1.15rem 1.05rem 1.4rem}}

.q-track{height:6px;border-radius:3px;background:var(--wash-2);overflow:hidden}
.q-bar{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--orange) 0%,var(--orange-2) 35%,var(--blue) 80%,var(--blue-dark) 100%);transition:width .35s ease}
.q-top{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:.55rem 0 .4rem}
.q-back{visibility:hidden;background:none;border:0;color:var(--blue-dark);font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;cursor:pointer;padding:.55rem .4rem;min-height:44px}
.q-back.show{visibility:visible}
.q-back:hover{color:var(--blue)}
.q-left{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:var(--muted)}

.q-q{font-family:var(--font-head);font-size:clamp(1.5rem,4.6vw,2rem);line-height:1.15;color:var(--blue-ink);margin:.4rem 0 1.15rem}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media(max-width:560px){.q-opts{grid-template-columns:1fr}}
.q-opt{display:flex;align-items:center;gap:.6rem;text-align:left;background:var(--wash);border:2px solid var(--line);border-radius:12px;padding:1rem 1.05rem;font-family:var(--font-body);font-weight:600;font-size:1.02rem;color:var(--blue-ink);cursor:pointer;min-height:62px;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.q-opt:hover{border-color:var(--blue);background:var(--wash-2)}
.q-opt:active{transform:scale(.985)}
.q-opt.picked{border-color:var(--orange-2);background:#fff4e0}
.q-fade{animation:qfade .28s ease}
@keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Results */
.r-path{background:linear-gradient(120deg,var(--blue-dark) 0%,var(--blue) 90%);color:#fff;border-radius:12px;padding:1.25rem 1.3rem;margin-bottom:1.2rem}
.r-path .r-kicker{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:#ffd98c}
.r-path h3{color:#fff;font-size:1.55rem;margin-top:.3rem;text-transform:none;letter-spacing:0}
.r-sec{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;color:var(--blue-ink);font-size:1.05rem;margin:1.25rem 0 .5rem}
.r-list{list-style:none}
.r-list li{padding:.42rem 0 .42rem 1.5rem;position:relative;color:var(--ink)}
.r-list li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.r-answers{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.r-answers .row{display:flex;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--wash-2);font-size:.97rem}
.r-answers .row:last-child{border-bottom:0}
.r-answers .k{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:.78rem;min-width:118px;padding-top:.18rem}
.r-urgent{border:1.5px solid #f0c169;background:#fff8ec;border-radius:12px;padding:1rem 1.15rem;color:#7a5200;margin-top:1.2rem}
.r-urgent strong{color:#8a5a00}
.r-disc{font-size:.9rem;color:var(--muted);margin-top:1.2rem}
.r-ctas{display:grid;gap:.8rem;margin-top:1.5rem}
.r-ctas .btn{width:100%}
.r-alt{font-size:.95rem;color:var(--muted);text-align:center}
.r-restart{display:block;margin:1.3rem auto 0;background:none;border:0;color:var(--blue-dark);font-weight:700;cursor:pointer;font-size:.98rem;padding:.6rem;min-height:44px}
.r-restart:hover{color:var(--blue);text-decoration:underline}