/* Quiz funnel (/quiz) in the Fritz look. Load after /assets/fritz.css, on quiz.html only.
   quiz.js and quiz.css are shared with the old site on main and stay untouched, so this file styles
   every class quiz.js renders (quiz-*, .btn-primary, .btn-ghost, .key, .spinner, .score-dial …).
   Everything is scoped to the funnel (body.qz, #quiz-root, quiz-* / qz-* names) so it never fights fritz.css.
   No url() to site files here: the landing copy script only rewrites /assets and /images paths in HTML. */

/* ---------- funnel chrome ---------- */
body.qz{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.qz-main{position:relative;flex:1 0 auto}
/* the background pools sit fixed behind the whole page, so short steps never show their edges */
.qz-pools{position:fixed;z-index:-1}
.qz-top{position:relative;z-index:5;padding-top:18px}
.qz-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.qz-back{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 9px;border-radius:10px;font:500 14.5px var(--display);color:var(--ink2);white-space:nowrap;transition:background .15s,color .15s}
.qz-back svg{width:15px;height:15px;color:var(--ink3);transition:transform .2s}
.qz-top :focus-visible,.qz-main :focus-visible,.qz-foot :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.qz-foot{padding:28px 0 34px}
.qz-foot .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;font:400 12.5px/1.4 var(--mono);color:var(--quiet)}
.qz-foot .wrap>*+*::before{content:'·';padding:0 10px;color:#C5C6D6}
.qz-foot a,.qz-foot button{font:inherit;color:inherit;transition:color .15s}

/* ---------- layout ---------- */
.quiz-section{position:relative;padding:28px 0 64px}
#quiz-root{position:relative}
#quiz-root>.quiz-step-label,#quiz-root>.quiz-progress,.quiz-question,.quiz-interstitial,.quiz-gate{max-width:720px;margin-left:auto;margin-right:auto}
@keyframes qz-in{from{opacity:0;transform:translateY(10px)}}
.quiz-intro,.quiz-question,.quiz-interstitial,.quiz-gate,.quiz-loading,.quiz-result{animation:qz-in .4s cubic-bezier(.2,.8,.2,1) both}

/* ---------- buttons quiz.js renders (same as .btn-p / .btn-s in fritz.css) ---------- */
#quiz-root .btn-primary{background:var(--btn);color:#fff;box-shadow:0 0 0 1px rgba(59,59,217,.4),0 1px 2px rgba(14,15,26,.2),0 10px 30px -8px rgba(91,91,245,.7),inset 0 1px 0 rgba(255,255,255,.25)}
#quiz-root .btn-ghost{background:rgba(255,255,255,.75);color:var(--ink);box-shadow:0 0 0 1px rgba(14,15,26,.08),0 1px 3px rgba(14,15,26,.08)}
#quiz-root .btn:active{transform:translateY(0) scale(.985)}

/* ---------- intro ---------- */
.quiz-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center;padding-top:30px}
.qz-eye{gap:10px;padding:5px 16px 5px 5px}
.qz-eye .ftile{width:26px;height:26px;border-radius:8px;font-size:13.5px}
.qz-h1{font:600 clamp(44px,5.4vw,78px)/.98 var(--display);letter-spacing:-.05em;margin-top:24px;text-wrap:balance}
.quiz-intro .quiz-sub{margin-top:24px;max-width:540px;font-size:19px;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.qz-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:34px}
.qz-start{height:56px;padding:0 28px;border-radius:15px;font-size:16.5px}
.qz-start span{transition:transform .2s}
.quiz-meta{font:400 12.5px/1.5 var(--mono);color:var(--quiet);text-wrap:pretty}

/* example diagnostic card (an app card, like the home hero cards) */
.quiz-hero-visual{display:grid;place-items:center;min-height:420px}
.quiz-hero-visual .halo{inset:-40px -30px}
@keyframes qz-bob{50%{translate:0 -8px}}
.quiz-preview-card{position:relative;z-index:1;width:min(440px,100%);padding:20px;border-radius:22px;background:var(--glass);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);box-shadow:var(--sh-glass);font-family:var(--ui);color:var(--ink);font-variant-numeric:tabular-nums;animation:qz-bob 7s ease-in-out infinite}
.quiz-preview-card .hc-h{font-size:14px;margin-bottom:14px}
.quiz-preview-card .quiz-score{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line)}
#quiz-root .quiz-preview-card .score-dial{width:74px;height:74px}
#quiz-root .quiz-preview-card .score-dial span{width:60px;height:60px;font-size:23px}
.quiz-preview-card h3{margin-top:5px;font:700 19px/1.2 var(--ui);letter-spacing:-.01em}
.quiz-preview-waste{margin-top:10px;padding:11px 14px;border-radius:12px;background:var(--warnSoft);box-shadow:inset 0 0 0 1px rgba(229,148,9,.22);font:400 13px/1.45 var(--ui);color:var(--ink2)}
.quiz-preview-waste strong{font-weight:700;color:#8A5600}
.quiz-preview-mods{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.quiz-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:999px;border:1px solid rgba(91,91,245,.35);background:var(--brandSoft);font:600 11.5px var(--ui);color:var(--brandInk);white-space:nowrap}
.quiz-chip::before{content:'';width:14px;height:14px;flex:none;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}

/* customer logos (same row as the home page) */
.qz-proof{margin-top:84px}

/* ---------- shared bits ---------- */
#quiz-root .quiz-eyebrow{font:500 11.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
#quiz-root .score-dial{flex:none;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#8A7BFF 0%,var(--brand) calc(var(--score) * 1%),#ECEBF3 0);box-shadow:0 10px 26px -12px rgba(91,91,245,.55)}
#quiz-root .score-dial span{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#fff;font:600 32px/1 var(--display);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(14,15,26,.04)}
.quiz-sub{color:var(--ink2)}

/* ---------- progress ---------- */
.quiz-step-label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.quiz-step-label span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--brandInk)}
.quiz-step-label span:first-child::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brandSoft),0 0 14px 2px rgba(91,91,245,.55)}
.quiz-progress{height:8px;margin-top:14px;border-radius:999px;background:#ECEBF3;box-shadow:inset 0 0 0 1px rgba(14,15,26,.03);overflow:hidden}
.quiz-progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#9385EE,var(--brand));box-shadow:0 0 12px rgba(91,91,245,.45)}

/* ---------- question ---------- */
.quiz-question{margin-top:44px}
.quiz-question h2{font:600 clamp(28px,3.5vw,42px)/1.08 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.quiz-options{display:grid;gap:10px;margin-top:30px}
.quiz-option{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 18px 12px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,26,.07),0 1px 2px rgba(14,15,26,.04),0 14px 30px -22px rgba(43,43,120,.4);font:500 16.5px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink);text-align:left;transition:box-shadow .2s,transform .2s}
.quiz-option .key{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--line2);box-shadow:inset 0 0 0 1px rgba(14,15,26,.06);font:500 13px/1 var(--mono);color:var(--ink3);transition:background .2s,color .2s,box-shadow .2s}
.quiz-option::after{content:'';flex:none;width:18px;height:18px;margin-left:auto;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4 9h10M10 5l4 4-4 4' fill='none' stroke='%233B3BD9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.quiz-option:focus-visible{box-shadow:0 0 0 1.5px var(--brand),0 16px 34px -18px rgba(91,91,245,.55);transform:translateY(-1px)}
.quiz-option:focus-visible{outline:none}
.quiz-option:focus-visible .key,.quiz-option.is-selected .key{background:var(--brand);color:#fff;box-shadow:0 0 12px rgba(91,91,245,.45)}
.quiz-option:focus-visible::after{opacity:1;transform:none}
.quiz-option:active{transform:scale(.99)}
.quiz-option.is-selected{box-shadow:0 0 0 1.5px var(--brand),0 16px 34px -18px rgba(91,91,245,.55);background:#FBFBFF}

@media (hover:hover){
  .qz-back:hover{background:rgba(14,15,26,.045);color:var(--ink)}
  .qz-back:hover svg{transform:translateX(-2px)}
  .qz-foot a:hover,.qz-foot button:hover{color:var(--brandInk)}
  #quiz-root .btn-primary:hover{background:#484BF3;transform:translateY(-1px)}
  #quiz-root .btn-ghost:hover{background:#fff}
  .qz-start:hover span{transform:translateX(3px)}
  .quiz-option:hover{box-shadow:0 0 0 1.5px var(--brand),0 16px 34px -18px rgba(91,91,245,.55);transform:translateY(-1px)}
  .quiz-option:hover .key{background:var(--brand);color:#fff;box-shadow:0 0 12px rgba(91,91,245,.45)}
  .quiz-option:hover::after{opacity:1;transform:none}
}

/* ---------- glass step cards: interstitial, gate, loading ---------- */
.quiz-interstitial,.quiz-gate,.quiz-loading{position:relative;border-radius:26px;background:var(--glass);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);box-shadow:var(--sh-glass);text-align:center}

/* interstitial */
.quiz-interstitial{margin-top:40px;padding:42px 40px 38px}
.quiz-interstitial h2{max-width:580px;margin:0 auto;font:600 clamp(26px,3.1vw,38px)/1.1 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.quiz-interstitial p{max-width:540px;margin:14px auto 0;font-size:17px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
.quiz-interstitial-art{max-width:460px;margin:28px auto 0;padding:24px 20px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),0 20px 40px -30px rgba(43,43,120,.4)}
.quiz-interstitial-art svg{width:100%;max-width:340px;height:auto;margin:0 auto;font-family:var(--ui);overflow:visible}
.quiz-interstitial-art text{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.quiz-interstitial .btn{margin-top:28px}
/* quiz.js draws the art for a dark page: recolour it for the light one */
.quiz-interstitial-art [fill="#EFF3FF"]{fill:var(--ink)}
.quiz-interstitial-art [fill="#9aa6ff"]{fill:var(--brandInk)}
.quiz-interstitial-art [fill="rgba(239,243,255,.65)"]{fill:var(--ink2)}
.quiz-interstitial-art [stroke="rgba(239,243,255,.3)"]{stroke:#D6D7E2}
.quiz-interstitial-art [stroke="#6B77FF"]{stroke:var(--brand)}
.quiz-interstitial-art [stroke="#8C9CFF"]{stroke:#7D73FF}
.quiz-interstitial-art [stroke="#B6C0FF"]{stroke:#A699FF}
.quiz-interstitial-art [stroke="#FBBF24"]{stroke:var(--warn)}
.quiz-interstitial-art [fill="#FBBF24"]{fill:var(--warn)}
.quiz-interstitial-art text[fill="#FBBF24"],.quiz-interstitial-art [fill="rgba(251,191,36,.9)"]{fill:#B87300}
.quiz-interstitial-art [fill="rgba(251,191,36,.09)"]{fill:var(--warnSoft)}
.quiz-interstitial-art [fill="rgba(251,191,36,.13)"]{fill:rgba(229,148,9,.13)}

/* email gate */
.quiz-gate{margin-top:40px;padding:44px 40px 34px}
.quiz-gate::before{content:'';display:block;width:52px;height:52px;margin:0 auto 20px;border-radius:16px;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 0 0 6px var(--brandSoft),0 0 26px 4px rgba(91,91,245,.45)}
.quiz-gate h2{font:600 clamp(30px,3.8vw,46px)/1.04 var(--display);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.quiz-gate .quiz-sub{max-width:460px;margin:12px auto 0;font-size:17px;line-height:1.55}
.quiz-gate form{position:relative;max-width:520px;margin:28px auto 0;text-align:left}
.quiz-gate .quiz-email-row{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 8px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(91,91,245,.26),0 12px 34px -12px rgba(91,91,245,.45);transition:box-shadow .2s}
.quiz-gate .quiz-email-row:focus-within{box-shadow:0 0 0 2px var(--brand),0 0 0 6px rgba(91,91,245,.12),0 12px 34px -12px rgba(91,91,245,.45)}
.quiz-gate input[type="email"]{flex:1;min-width:0;height:48px;padding:0 10px;border:0;background:transparent;font:500 16.5px var(--display);letter-spacing:-.01em;color:var(--ink);outline:none}
.quiz-gate input[type="email"]::placeholder{color:#A3A5BA;opacity:1}
.quiz-gate .quiz-email-row .btn{flex:none}
.quiz-consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:0 4px;font:400 14px/1.5 var(--display);color:var(--ink2);cursor:pointer}
.quiz-consent input[type="checkbox"]{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--brand);cursor:pointer}
.quiz-consent a{color:var(--brandInk);text-decoration:underline;text-underline-offset:2px}
.quiz-error{min-height:20px;margin-top:10px;font:500 14px/1.45 var(--display);color:#B42328}
.quiz-error:not(:empty){padding:10px 14px;border-radius:12px;background:var(--badSoft);box-shadow:inset 0 0 0 1px rgba(229,72,77,.3)}
/* the old avatar row quiz.js renders stays hidden; the inline script swaps in the logo row */
.quiz-gate .quiz-proof{display:none}
.quiz-gate .quiz-proof.qz-gp{display:block;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.qz-gp-l{font:500 11.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}
.qz-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 30px;margin-top:16px}
.qz-logos img{width:auto;filter:grayscale(1) brightness(0);opacity:.6}

/* loading */
.quiz-loading{max-width:560px;margin:56px auto 0;padding:52px 32px 48px}
.quiz-loading h2{font:600 clamp(22px,2.6vw,28px)/1.2 var(--display);letter-spacing:-.03em;color:var(--ink)}
/* the Fritz "Working" band: fritz.js turns .spinner into the dither; until then (or without it) a CSS sweep */
#quiz-root .spinner{position:relative;width:241px;height:19px;margin:0 auto 26px;border-radius:4px;background:#ECEBF3;overflow:hidden}
#quiz-root .spinner:not(.wk-track)::before{content:'';position:absolute;inset:1px;background:linear-gradient(90deg,#E2E1EE 0%,#E2E1EE 30%,#9385EE 45%,#5848DC 50%,#9385EE 55%,#E2E1EE 70%,#E2E1EE 100%) 0 0/300% 100%;-webkit-mask:conic-gradient(from 270deg at 5px 5px,#000 25%,transparent 0) 0 0/6px 6px;mask:conic-gradient(from 270deg at 5px 5px,#000 25%,transparent 0) 0 0/6px 6px;animation:qz-sweep 1.8s linear infinite}
@keyframes qz-sweep{from{background-position:100% 0}to{background-position:0 0}}
#quiz-root .spinner.wk-track{max-width:100%}

/* ---------- result ---------- */
.quiz-result{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px;max-width:960px;margin:24px auto 0}
.quiz-result>*{grid-column:1/-1;min-width:0}
.quiz-result>.quiz-score{grid-column:1}
.quiz-result>.quiz-waste{grid-column:2}
.quiz-result>.quiz-score{display:flex;align-items:center;gap:22px;padding:24px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,26,.06),0 1px 2px rgba(14,15,26,.04),0 30px 60px -34px rgba(43,43,120,.3)}
.quiz-result>.quiz-score h2{margin-top:8px;font:600 clamp(26px,2.6vw,32px)/1.08 var(--display);letter-spacing:-.04em;color:var(--ink)}
.quiz-waste{display:flex;flex-direction:column;justify-content:center;padding:24px 26px;border-radius:22px;background:linear-gradient(180deg,#FFFAF0,var(--warnSoft));box-shadow:0 0 0 1px rgba(229,148,9,.24),0 30px 60px -36px rgba(229,148,9,.45);font:400 15px/1.55 var(--display);color:var(--ink2);text-wrap:pretty}
.quiz-waste strong{display:block;margin-bottom:6px;font:600 clamp(26px,2.7vw,34px)/1.08 var(--display);letter-spacing:-.04em;color:#8A5600;font-variant-numeric:tabular-nums}
.quiz-result h1{max-width:860px;margin-top:44px;font:600 clamp(30px,3.6vw,46px)/1.05 var(--display);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.quiz-plan{margin-top:14px;padding:6px 30px 28px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px rgba(14,15,26,.06),0 1px 2px rgba(14,15,26,.04),0 30px 60px -34px rgba(43,43,120,.3);counter-reset:qp}
.quiz-plan h3{counter-increment:qp;display:flex;align-items:baseline;gap:14px;padding-top:24px;font:600 20px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.quiz-plan h3::before{content:counter(qp,decimal-leading-zero);flex:none;width:28px;font:500 13px var(--mono);letter-spacing:0;color:var(--brandInk)}
.quiz-plan h3+p{margin-top:8px;padding-left:42px;font-size:16px;line-height:1.65;color:var(--ink2);text-wrap:pretty}
.quiz-plan p+h3{margin-top:24px;border-top:1px solid #F2F2F6}
.quiz-mod-cards{margin-top:36px}
.quiz-mod-cards-title{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brandInk)}
.quiz-mod-cards-title::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brandSoft),0 0 14px 2px rgba(91,91,245,.55)}
.quiz-mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.quiz-mod-grid:has(>.quiz-mod-card:nth-child(2):last-child),.quiz-mod-grid:has(>.quiz-mod-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.quiz-mod-card{padding:18px 18px 20px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 14px 30px -20px rgba(43,43,120,.3)}
.quiz-mod-card h4{display:flex;align-items:center;gap:10px;font:600 15.5px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.quiz-mod-card h4 svg{flex:none;width:28px;height:28px;padding:7px;border-radius:9px;background:var(--brandSoft);stroke:var(--brandInk)}
.quiz-mod-card p{margin-top:10px;font-size:14px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.quiz-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:34px}
.quiz-ctas .btn{height:52px;padding:0 24px}
.quiz-inbox-note{display:flex;align-items:center;gap:8px;margin-top:2px;font:400 12.5px/1.5 var(--mono);color:var(--quiet)}
.quiz-inbox-note::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--goodSoft)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .quiz-hero{gap:40px}
}
@media (max-width:900px){
  .quiz-hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .quiz-hero-visual{min-height:0;padding:20px 0 4px;justify-items:start}
  .qz-h1{font-size:clamp(44px,7.4vw,64px)}
  .qz-proof{margin-top:56px}
}
@media (max-width:760px){
  .quiz-result{grid-template-columns:minmax(0,1fr)}
  .quiz-result>.quiz-score,.quiz-result>.quiz-waste{grid-column:1}
  .quiz-mod-grid,.quiz-mod-grid:has(>.quiz-mod-card:nth-child(2):last-child),.quiz-mod-grid:has(>.quiz-mod-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .qz-top{padding-top:10px}
  .qz-foot .wrap>*+*::before{padding:0 8px}
  .qz-top-in{height:56px}
  .qz-back{font-size:14px;padding:0 8px 0 6px}
  .quiz-section{padding:12px 0 40px}
  .quiz-hero{padding-top:18px}
  .qz-eye{font-size:13px}
  .qz-h1{font-size:44px;margin-top:20px}
  .quiz-intro .quiz-sub{font-size:17px;margin-top:18px}
  .qz-cta{margin-top:26px}
  .qz-start{width:100%}
  .quiz-hero-visual .halo{inset:-30px -16px}
  .quiz-preview-card{padding:14px;border-radius:20px;animation:none}
  .quiz-step-label{margin-top:10px;font-size:11px}
  .quiz-question{margin-top:30px}
  .quiz-question h2{font-size:28px}
  .quiz-options{margin-top:22px;gap:8px}
  .quiz-option{min-height:58px;padding:10px 14px 10px 10px;gap:12px;font-size:15.5px}
  .quiz-option .key{width:30px;height:30px}
  .quiz-option::after{display:none}
  .quiz-interstitial{margin-top:28px;padding:30px 18px 24px;border-radius:22px}
  .quiz-interstitial p{font-size:16px}
  .quiz-interstitial-art{margin-top:22px;padding:18px 10px 14px;border-radius:16px}
  .quiz-interstitial .btn{width:100%}
  .quiz-gate{margin-top:20px;padding:32px 18px 26px;border-radius:22px}
  .quiz-gate .quiz-sub{font-size:16px}
  .quiz-gate .quiz-email-row{flex-direction:column;align-items:stretch;padding:6px}
  .quiz-gate input[type="email"]{height:48px;padding:0 10px}
  .quiz-gate .quiz-email-row .btn{width:100%}
  .qz-logos{gap:14px 22px}
  .quiz-loading{margin-top:32px;padding:40px 18px 36px;border-radius:22px}
  .quiz-result{margin-top:12px;gap:12px}
  .quiz-result>.quiz-score{padding:18px;gap:16px;border-radius:20px}
  #quiz-root .quiz-result .score-dial{width:84px;height:84px}
  #quiz-root .quiz-result .score-dial span{width:68px;height:68px;font-size:26px}
  .quiz-waste{padding:18px 20px;border-radius:20px;font-size:14.5px}
  .quiz-result h1{margin-top:28px;font-size:30px}
  .quiz-plan{padding:4px 18px 22px;border-radius:20px}
  .quiz-plan h3{font-size:18px;gap:10px;padding-top:20px}
  .quiz-plan h3::before{width:22px}
  .quiz-plan h3+p{padding-left:0;font-size:15.5px}
  .quiz-plan p+h3{margin-top:20px}
  .quiz-mod-grid,.quiz-mod-grid:has(>.quiz-mod-card:nth-child(2):last-child),.quiz-mod-grid:has(>.quiz-mod-card:nth-child(4):last-child){grid-template-columns:minmax(0,1fr);gap:10px}
  .quiz-mod-card{padding:16px}
  .quiz-ctas{flex-direction:column;align-items:stretch}
  .quiz-ctas .btn{width:100%}
}

/* Google's reCAPTCHA badge sits fixed at the bottom right: keep the footer links clear of it on phones */
@media (max-width:640px){
  .qz-foot{padding-bottom:84px}
}