/* Essenze Studio — hero quiz variant.
   Loaded only by the `quiz` arm of the hero experiment, so the other two arms
   pay nothing for it. Uses the existing brand tokens (--amber #C9893A,
   --bg #FAFAF7, ink #111110, forest #3c4436) — no new colours introduced. */

.qz{padding:64px 0 72px;display:flex;align-items:center;justify-content:center;min-height:72vh}
.qz-wrap{width:100%;max-width:640px;padding:0 20px;margin:0 auto}

.qz-head{text-align:center;margin-bottom:32px}
.qz-h1{font-family:var(--f-serif,"Cormorant Garamond",Georgia,serif);
  font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.08;font-weight:700;margin:14px 0 12px}
.qz-h1 .a{color:var(--amber,#C9893A);font-style:italic}
.qz-sub{color:var(--muted,#6b6b66);font-size:.95rem;line-height:1.6;max-width:26em;margin:0 auto}

/* Goal-gradient: short, visible, and it moves. */
.qz-prog{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:22px}
.qz-prog-bar{display:block;width:120px;height:3px;border-radius:2px;background:rgba(17,17,16,.12);overflow:hidden}
.qz-prog-bar i{display:block;height:100%;background:var(--amber,#C9893A);
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.qz-prog-txt{font-family:var(--f-mono,"JetBrains Mono",monospace);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6b6b66)}

.qz-q{text-align:center;font-family:var(--f-serif,"Cormorant Garamond",Georgia,serif);
  font-size:1.35rem;font-style:italic;margin:0 0 18px}

/* Fitts's Law: full-width rows, 56px min, comfortable thumb targets. */
.qz-opts{display:flex;flex-direction:column;gap:10px}
.qz-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:56px;padding:14px 18px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(17,17,16,.12);border-radius:12px;
  font-family:inherit;font-size:1rem;color:inherit;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.qz-opt:hover,.qz-opt:focus-visible{border-color:var(--amber,#C9893A);
  transform:translateY(-1px);box-shadow:0 6px 18px rgba(17,17,16,.06);outline:none}
.qz-opt:active{transform:translateY(0)}
.qz-opt-l{display:flex;flex-direction:column;gap:3px;font-weight:500}
/* Recognition over recall: the example notes carry the meaning. */
.qz-opt-hint{font-style:normal;font-size:.76rem;color:var(--muted,#6b6b66);font-weight:400}
.qz-opt-arrow{color:var(--amber,#C9893A);font-size:1.1rem;flex:0 0 auto}

.qz-back{margin:16px auto 0;display:block;background:none;border:none;cursor:pointer;
  font-family:var(--f-mono,"JetBrains Mono",monospace);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted,#6b6b66);padding:8px 12px}
.qz-back:hover{color:var(--amber,#C9893A)}

/* Peak-end: the result is the visual high point of the flow. */
.qz-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.qz-card{display:flex;flex-direction:column;gap:8px;padding:14px;text-decoration:none;
  color:inherit;background:#fff;border:1px solid rgba(17,17,16,.1);border-radius:12px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.qz-card:hover{border-color:var(--amber,#C9893A);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(17,17,16,.08)}
.qz-card-img{display:block;aspect-ratio:1;background:#f4efe6;border-radius:8px;overflow:hidden}
.qz-card-img img{width:100%;height:100%;object-fit:contain;display:block}
.qz-card-n{font-size:.8rem;line-height:1.35;font-weight:500}
.qz-card-go{margin-top:auto;font-family:var(--f-mono,"JetBrains Mono",monospace);
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber,#C9893A)}

.qz-anchor{text-align:center;font-size:.85rem;color:var(--muted,#6b6b66);margin:0 0 18px}
.qz-anchor strong{color:var(--ink,#111110)}
.qz-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.qz-empty{text-align:center;color:var(--muted,#6b6b66);font-size:.9rem;padding:24px 0}

@media(max-width:560px){
  .qz{padding:40px 0 56px;min-height:auto}
  .qz-cards{grid-template-columns:1fr;gap:10px}
  .qz-card{flex-direction:row;align-items:center;gap:12px}
  .qz-card-img{width:64px;flex:0 0 64px}
  .qz-card-go{margin-top:0;margin-left:auto;flex:0 0 auto}
  .qz-actions{flex-direction:column}
  .qz-actions>*{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .qz-prog-bar i,.qz-opt,.qz-card{transition:none}
}