/* The Flossing Quiz. Loaded only on /flossing-quiz. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--green);color:var(--cream);padding:12px 20px;border-radius:999px;font-weight:500;font-size:15px;text-decoration:none;}
.skip-link:focus{top:12px;color:var(--cream);}

:focus-visible{outline:3px solid var(--green);outline-offset:3px;}
footer :focus-visible{outline-color:var(--mint);}
.waitlist-row:focus-within{outline:3px solid var(--green);outline-offset:3px;}
.waitlist-input:focus-visible{outline:none;}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,.q-feedback:focus{outline:none;}

.quiz-wrap{flex:1;width:100%;max-width:640px;margin:0 auto;padding:clamp(28px,5vw,56px) clamp(20px,5vw,32px) clamp(56px,8vw,96px);}
.q-screen{display:flex;flex-direction:column;gap:22px;animation:qin .35s ease;}
.q-screen[hidden]{display:none;}
.q-center{align-items:center;text-align:center;}
@keyframes qin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.q-screen{animation:none;}html{scroll-behavior:auto;}}

.q-flo{display:block;aspect-ratio:6/5;flex:none;}
.q-flo-lg{width:min(220px,60%);}
.q-flo-sm{width:64px;margin:0 auto 14px;}
.q-title{font-size:clamp(34px,6vw,52px);line-height:1.05;color:var(--green);text-wrap:balance;}
.q-body{font-size:18px;font-weight:400;line-height:1.5;max-width:460px;text-wrap:balance;}
.q-personal{color:var(--green);font-weight:500;}
.q-score{font-size:clamp(56px,10vw,84px);font-weight:500;line-height:1;color:var(--green);}

.q-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.q-count{font-size:13px;letter-spacing:.08em;color:var(--green);}
.q-progress{height:8px;border-radius:999px;background:var(--sand);overflow:hidden;}
.q-progress span{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .3s ease;}
.q-lead{font-size:17px;font-weight:400;color:#5B6B64;}

.q-options{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:12px;}
.q-options legend{padding:0;margin:0 0 6px;width:100%;text-align:center;}
.q-question{font-size:clamp(26px,4.4vw,34px);line-height:1.15;color:var(--green);text-wrap:balance;}

.opt{display:block;cursor:pointer;}
.opt-box{display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 20px;background:#fff;border:1.5px solid var(--green);border-radius:20px;font-size:17px;font-weight:400;line-height:1.3;color:var(--ink);transition:background .15s;}
.opt-text{flex:1;}
.opt-mark{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--green);background:transparent;}
.opt-tag{flex:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.opt:hover .opt-box{background:var(--sand);}
.opt input:checked + .opt-box{background:var(--green);color:var(--cream);}
.opt input:checked + .opt-box .opt-mark{background:var(--cream);border-color:var(--cream);box-shadow:inset 0 0 0 4px var(--green);}
.opt input:focus-visible + .opt-box{outline:3px solid var(--green);outline-offset:3px;}
.q-options:disabled .opt{cursor:default;}
.q-options:disabled .opt:hover .opt-box{background:#fff;}
.q-options:disabled .opt input:checked + .opt-box,.q-options:disabled .opt:hover input:checked + .opt-box{background:var(--green);}
.opt-box.is-correct{box-shadow:0 0 0 3px var(--mint);}
.opt-box.is-wrong,.q-options:disabled .opt input:checked + .opt-box.is-wrong{background:var(--peach);color:var(--ink);}
.opt-box.is-wrong .opt-mark{border-color:var(--ink);box-shadow:inset 0 0 0 4px var(--peach);background:var(--ink);}

.q-after{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.q-after[hidden]{display:none;}
.q-feedback{width:100%;background:var(--sand);border-radius:20px;padding:18px 22px;display:flex;flex-direction:column;gap:4px;font-size:17px;line-height:1.5;}
.q-feedback strong{font-weight:600;color:var(--green);}

.q-privacy{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:#5B6B64;margin-top:4px;}
.q-center .q-privacy{justify-content:center;max-width:380px;text-align:left;}
.q-privacy-box{display:flex;align-items:flex-start;gap:10px;text-align:left;background:var(--sand);border-radius:18px;padding:14px 18px;font-size:15px;line-height:1.45;max-width:460px;}
.q-privacy-box svg{flex:none;margin-top:2px;color:var(--green);}
.q-privacy svg{flex:none;}

.cta-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;}
.link-btn{background:none;border:none;color:var(--green);text-decoration:underline;font-size:15px;font-weight:500;padding:14px 16px;}
.link-btn:hover{color:var(--ink);}

#quiz-faq .faq-item p{font-weight:400;max-width:62ch;}