/* The quiz. Four screens on one page: landing, question, email, results.
   Only one carries .active at a time, which is how the live version works too. */
.qz-screen{display:none}
.qz-screen.active{display:block}

/* the header on every quiz screen: the mark alone */
.qz-bar{border-bottom:1px solid var(--hair);background:var(--cream)}
.qz-bar .wrap{display:flex;justify-content:center;padding-top:18px;padding-bottom:18px}
.qz-bar .logo{font-size:16px}

/* ---- landing ----
   This screen has one job: get one click. The first rebuild made it a charcoal
   band with a left-aligned heading, which is the site's section pattern and the
   wrong shape here, it spreads the eye across the full width and competes for
   attention. Back to the original composition: cream ground, centred, held in a
   narrow column, vertically centred so the whole ask sits in one view. Only the
   type is new. */
.qz-hero{background:var(--cream);min-height:calc(100vh - 62px);display:flex;
  align-items:center;justify-content:center;text-align:center;
  padding:var(--xl) var(--md)}
.qz-hero .inner{max-width:640px}
.qz-hero .eyebrow{display:block;font-size:var(--t-eyebrow);letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--teal-dk);margin-bottom:var(--md)}
/* two-tone, the way the original split it: the question lands in terracotta */
.qz-hero h1{font-size:38px;line-height:1.18;font-weight:600;color:var(--char);
  letter-spacing:-.005em;text-transform:uppercase;margin:0 auto;text-wrap:balance}
.qz-hero h1 em{display:block;font-style:normal;color:var(--terra)}
.qz-hero .lede{font-size:var(--t-body);line-height:1.7;color:var(--ink-soft);
  max-width:46ch;margin:var(--md) auto var(--lg)}
.qz-list{margin:0 auto var(--xl);padding:0;list-style:none;
  display:inline-block;text-align:left}
.qz-list li{position:relative;padding:6px 0 6px 26px;color:var(--ink);
  font-size:var(--t-small);line-height:1.6}
.qz-list li::before{content:"";position:absolute;left:4px;top:14px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}
.qz-foot{margin-top:var(--lg);font-size:12.5px;color:var(--ink-soft)}
.qz-foot b{color:var(--char);font-weight:600}
@media(max-width:640px){ .qz-hero h1{font-size:27px} }

/* ---- the question card ---- */
.qz-wrap{padding:var(--xxl) 0;min-height:60vh}
.qz-card{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-md);padding:var(--xl);box-shadow:0 10px 34px rgba(39,38,38,.07)}
.qz-track{height:4px;background:var(--tint);border-radius:var(--r-pill);overflow:hidden;
  margin-bottom:var(--md)}
.qz-fill{display:block;height:100%;width:0;background:var(--terra);
  border-radius:var(--r-pill);transition:width .35s ease}
.qz-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sm);
  font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);margin-bottom:var(--lg)}
.qz-back{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:var(--teal-dk);cursor:pointer}
.qz-back:hover{color:var(--terra-dk)}
.qz-back.hidden{visibility:hidden}
.qz-q{font-size:26px;line-height:1.35;font-weight:600;color:var(--char);
  letter-spacing:-.01em;margin-bottom:var(--lg);text-wrap:balance}
.qz-options{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qz-opt{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;
  background:var(--tint);border:1px solid var(--hair);border-radius:var(--r-box);
  padding:16px 18px;font:inherit;font-size:var(--t-body);color:var(--ink);cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s}
.qz-opt:hover{border-color:var(--terra);background:#fff;transform:translateX(2px)}
.qz-opt.selected{border-color:var(--terra);background:#fff;
  box-shadow:0 0 0 2px rgba(220,90,59,.16)}
.qz-letter{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--char);
  color:var(--cream);font-size:12px;font-weight:600;display:flex;align-items:center;
  justify-content:center;margin-top:1px}
.qz-opt.selected .qz-letter{background:var(--terra)}
/* each new question fades up, so it is obvious the card changed */
.qz-in{animation:qzin .32s ease both}
@keyframes qzin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .qz-in{animation:none}
  .qz-fill,.qz-score-fill{transition:none}
}

/* ---- email gate ---- */
.qz-email{max-width:560px;margin:0 auto;text-align:center}
.qz-email h2{font-size:var(--t-h3);font-weight:600;color:var(--char);
  letter-spacing:-.01em;margin-bottom:var(--sm)}
.qz-email p{color:var(--ink-soft);margin-bottom:var(--lg)}
.qz-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.qz-input{flex:1 1 260px;padding:15px 18px;border:2px solid var(--hair);
  border-radius:var(--r-box);font:inherit;font-size:var(--t-body);color:var(--char);
  background:#fff;outline:none;transition:border-color .2s}
.qz-input:focus{border-color:var(--teal)}
.qz-err{display:none;color:var(--terra-dk);font-size:13px;margin-top:10px}
.qz-fine{font-size:12px;color:var(--ink-soft);margin-top:var(--md)}

/* ---- results ---- */
.qz-res{max-width:780px;margin:0 auto}
.qz-score{font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:76px;line-height:1;color:var(--terra);font-variant-numeric:tabular-nums}
.qz-score span{font-size:.42em;color:var(--ink-soft)}
.qz-tier{font-size:var(--t-h3);font-weight:600;color:var(--char);
  letter-spacing:-.01em;margin:var(--xs) 0 var(--sm)}
.qz-desc{color:var(--ink);max-width:64ch;margin-bottom:var(--lg)}
.qz-score-track{height:10px;background:var(--tint);border-radius:var(--r-pill);
  overflow:hidden;margin-bottom:8px}
.qz-score-fill{display:block;height:100%;width:0;border-radius:var(--r-pill);
  background:var(--terra);transition:width .9s cubic-bezier(.22,.7,.24,1)}
/* the four tier labels under the score bar. This was a hardcoded 11.5px,
   which is the same size as --t-eyebrow but does not follow it, so the phone
   override that lifts the eyebrow to 12px missed these four and they were the
   last text on the site under the readable floor. Use the token. */
.qz-scale{display:flex;justify-content:space-between;font-size:var(--t-eyebrow);
  color:var(--ink-soft);margin-bottom:var(--xl)}
.qz-proof{margin-top:var(--xl);padding-top:var(--lg);
  border-top:1px solid rgba(39,38,38,.14);font-size:var(--t-small);
  color:var(--ink-soft);line-height:1.65}
.qz-proof strong{color:var(--char);font-weight:600}
.qz-proof a{color:var(--terra-dk);text-decoration:underline;
  text-underline-offset:2px}
.qz-tier.ghost{color:var(--ink-soft)}
.qz-tier.random{color:var(--terra-dk)}
.qz-tier.steady{color:var(--teal-dk)}
.qz-tier.authority{color:var(--teal-dk)}
.qz-score-fill.ghost{background:var(--ink-soft)}
.qz-score-fill.random{background:var(--terra)}
.qz-score-fill.steady{background:var(--teal)}
.qz-score-fill.authority{background:var(--teal-dk)}
.qz-block{margin-bottom:var(--xl)}
.qz-block h3{font-size:var(--t-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);margin-bottom:var(--md)}
.qz-item{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--hair)}
.qz-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-top:2px;color:#fff}
.qz-icon.good{background:var(--teal-dk)}
.qz-icon.fix{background:var(--terra)}
.qz-item .t{font-size:var(--t-small);line-height:1.65;color:var(--ink)}
.qz-item .t strong{display:block;color:var(--char);font-weight:600;margin-bottom:3px}