/* Scroll banner that invites visitors to take the Flossing Quiz. Homepage only. */
.quiz-banner{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;width:calc(100% - 32px);max-width:600px;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px 14px;padding:12px 8px 12px 18px;background:var(--green);color:var(--cream);border-radius:28px;box-shadow:0 18px 40px -16px rgba(14,30,26,.55);}
.quiz-banner[hidden]{display:none;}
.quiz-banner.is-visible{transform:translate(-50%,0);opacity:1;pointer-events:auto;}
.qb-flo{width:48px;aspect-ratio:6/5;flex:none;}
.qb-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.qb-text strong{font-size:17px;font-weight:500;line-height:1.2;}
.qb-text span{font-size:14px;font-weight:400;line-height:1.35;color:rgba(251,249,244,.85);}
.qb-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:22px;background:var(--mint);color:var(--green);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .15s;}
.qb-cta:hover{background:var(--cream);color:var(--green);text-decoration:none;}
.qb-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:var(--cream);cursor:pointer;}
.qb-close:hover{background:rgba(251,249,244,.16);}
.quiz-banner :focus-visible{outline:3px solid var(--mint);outline-offset:2px;}
@media (max-width:560px){
  .quiz-banner{grid-template-columns:auto 1fr auto;padding:12px 8px 14px 16px;border-radius:24px;}
  .qb-cta{grid-column:1 / -1;}
  .qb-close{grid-column:3;grid-row:1;}
}
@media (prefers-reduced-motion: reduce){.quiz-banner{transition:none;}}