/* The kind "quiz" (work order 51): the quiz. From content/ugc-quiz, word for word. The quiz's script stays in its
   file. */
.svc .qz{max-width:880px;margin:0 auto}
.svc .qz-h{text-align:center;margin-bottom:22px}
.svc .qz-h h1{font-size:clamp(30px,5vw,48px);line-height:1.08;margin:6px 0 10px}
.svc .qz-h p{color:var(--mute);margin:0}
.svc .qbox{background:var(--glass);border:1px solid #fff;border-radius:26px;padding:26px;box-shadow:0 24px 60px -36px var(--b)}
.svc .qpr{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.svc .qpr span{font:800 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--deep);white-space:nowrap}
.svc .qbar{flex:1;height:10px;border-radius:10px;background:#E6EDF6;overflow:hidden}
.svc .qbar i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,var(--a),var(--b));transition:width .45s cubic-bezier(.2,.8,.2,1)}
.svc .qq[hidden],.svc .qres[hidden],.svc .qend[hidden]{display:none}
.svc .qq h2{font-size:clamp(22px,3.2vw,30px);margin:0 0 6px;text-align:center}
.svc .qq .qs{text-align:center;color:var(--mute);margin:0 0 20px;font-size:15px}
.svc .qos{display:grid;gap:12px}
.svc .qos.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.svc .qos.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc .qos.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc .qo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:14px 12px;border-radius:16px;border:2px solid #DDE7F3;background:#fff;font:700 15.5px/1.25 var(--body);color:var(--ink);text-align:center;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}
.svc .qo small{font-weight:500;font-size:13.5px;color:var(--mute)}
.svc .qo:hover,.svc .qo:focus-visible{transform:translateY(-3px);border-color:var(--a);box-shadow:0 12px 24px -14px var(--a);outline:0}
.svc .qo:focus-visible{outline:3px solid var(--bb);outline-offset:2px}
.svc .qnav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;min-height:30px}
.svc .qnav button{background:none;border:0;padding:6px 0;font:700 14.5px var(--body);color:var(--deep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.svc .qnav button[hidden]{visibility:hidden;display:block}
.svc .qres{text-align:center}
.svc .qres h2{font-size:clamp(24px,3.6vw,34px);margin:4px 0 8px}
.svc .qres .qw{color:var(--mute);max-width:560px;margin:0 auto 14px}
.svc .qres .price{font:800 40px var(--disp);margin:0 0 18px}
.svc .qres .price small{display:block;font:800 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.svc .qres .row{justify-content:center}
.svc .qend{margin-top:20px;padding-top:18px;border-top:1px solid #E6EDF6;text-align:center}
.svc .qsum{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.svc .qsum li{background:#fff;border:1px solid #DDE7F3;border-radius:999px;padding:6px 13px;font-size:13.5px;font-weight:700}
@media(max-width:900px){.svc .qos.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.svc .qo{overflow-wrap:anywhere}
@media(max-width:719px){.svc .qos.c5{grid-auto-rows:1fr}.svc .qbox{padding:18px 16px}.svc .qos.c3,.svc .qos.c2{grid-template-columns:1fr}.svc .qo{min-height:72px}.svc .qres .row{flex-direction:column}.svc .qres .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.svc .qbar i,.svc .qo{transition:none}}
/* Work order 54: the fuller result of the plan questions (four tiles above the price), from content/plan-quiz-new, word
   for word. This stylesheet is also loaded on a page of the kind service that holds a block of questions (.qz). */
.svc .qres .wg{max-width:640px;margin:6px auto 18px}
.svc .qres .wt{background:#fff}
.svc .qres .wt b{font-size:19px}