/* Opening questionnaire: full-screen cream sheet, one question at a time. */
.quiz { position: fixed; inset: 0; z-index: 40; background: var(--cream); display: flex; flex-direction: column; padding: 20px 16px 32px; overflow-y: auto; }
.quiz[hidden] { display: none; }
html.quiz-open { overflow: hidden; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quiz-count { font: 500 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--strong); }
.quiz-skip { background: none; border: 0; padding: 8px 0; cursor: pointer; font: 500 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--strong); text-decoration: underline; text-underline-offset: 4px; }
.quiz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 900px; width: 100%; margin: 0 auto; padding: 32px 0; }
.quiz-q { font-size: 40px; line-height: 1.02; letter-spacing: -0.045em; }
.quiz-q:focus { outline: none; }
.quiz-sub { font: italic 400 24px/1.35 var(--note); color: var(--strong); margin: 18px 0 0; }
.quiz-answers { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.quiz-answers .btn { height: auto; min-height: 56px; padding: 14px 26px; font-size: 18px; white-space: normal; text-align: center; }
.quiz-answers .btn.ghost { background: var(--paper); }
.quiz-note { flex-basis: 100%; margin: 8px 0 0; }
.quiz-note a { font: italic 400 20px/1.3 var(--note); color: var(--strong); text-decoration-color: var(--lime-deep); text-decoration-thickness: 3px; text-underline-offset: 5px; }
@media (min-width: 700px) {
  .quiz { padding: 28px 40px 48px; }
  .quiz-q { font-size: 76px; }
  .quiz-sub { font-size: 30px; }
}

/* "Don't like answering?" link under each question */
.quiz-nope { flex-basis: 100%; margin-top: 8px; padding: 6px 0; background: none; border: 0; cursor: pointer; text-align: left; font: italic 400 20px/1.3 var(--note); color: var(--strong); text-decoration: underline; text-decoration-color: var(--lime-deep); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* The popup that asks them to stay */
.quiz-ask { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--cream) 70%, transparent); backdrop-filter: blur(4px); }
.quiz-ask[hidden] { display: none; }
.quiz-ask-card { width: min(560px, 100%); border-radius: 24px; padding: 32px 24px; border: 1.5px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.quiz-ask-card h3 { font-size: 34px; line-height: 1.02; letter-spacing: -0.04em; }
.quiz-ask-card p { font: italic 400 24px/1.3 var(--note); margin: 12px 0 0; color: var(--strong); }
.quiz-ask-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (min-width: 700px) { .quiz-ask-card { padding: 44px 40px; } .quiz-ask-card h3 { font-size: 44px; } }

/* Last screen: facts about leverage */
.quiz-facts { display: grid; gap: 14px; margin-top: 28px; }
.quiz-fact { border-radius: 20px; padding: 22px 20px; border: 1.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.quiz-fact.paper { background: var(--paper); }
.quiz-fact.lime { background: var(--lime); }
.quiz-fact strong { display: block; font: 500 40px/1 var(--display); letter-spacing: -0.04em; color: var(--strong); font-variation-settings: "SOFT" 100, "opsz" 144; }
.quiz-fact p { font: 17px/1.5 var(--serif); margin: 10px 0 0; color: var(--strong); }
.quiz-fact.black-label p { color: var(--text); }
.quiz-copy { font: 20px/1.6 var(--serif); color: var(--strong); margin: 24px 0 0; max-width: 680px; }
.quiz-copy + .quiz-copy { margin-top: 12px; }
@media (min-width: 760px) { .quiz-facts { grid-template-columns: repeat(3, 1fr); } .quiz-fact strong { font-size: 48px; } }