/* ============================================================================
 * FANATIK · v2.2 Launch Quiz section · #the-quiz
 * ----------------------------------------------------------------------------
 * Section 2 of homepage. Replaces v2.1 demoted Pitchside Test CTA.
 *
 * Palette consumed from :root tokens declared in test.css / sections-tail.css:
 *   --black, --off-black, --lime, --white, --gold, --mute, --mute-deep,
 *   --line, --red (#FF8080 per FIX-7).
 *
 * Voice law: lime period margin -0.05em (slammed against the word).
 * Reduced motion: all transitions collapse to opacity-only via the global
 * @media (prefers-reduced-motion: reduce) block in test.css.
 *
 * No exclamation, no emoji, no decorative fonts. JBM Mono on pip rail and
 * QMETA, Inter Black 900 on headlines.
 * ========================================================================== */

#the-quiz.the-quiz {
  position: relative;
  /* v2.11.2 alignment: harmonised with .app-tour and .cabinet — section
     inline padding uses the brand spacing scale (var(--space-3) → mobile,
     var(--space-5) at tablet+) so the inner column's left edge lands at the
     same x-coordinate across sections. Block padding kept fluid via
     --section-py to preserve the existing vertical rhythm.
     Was: padding: clamp(64px, 10vw, 128px) clamp(24px, 5vw, 80px); */
  padding: var(--section-py) var(--space-3);
  /* T17 micro-shift: slightly darker than --off-black for subliminal
     section-boundary breathing (Art Director). */
  --tq-section-bg: #060606; /* P2 hex hygiene: tokenized near-black */
  background: var(--tq-section-bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.the-quiz__inner {
  /* v2.11.2 alignment: inner container width now matches the brand
     --max-width token (1280px) shared by .cabinet__header, .cabinet__grid,
     .footer__inner, and the .app-tour__header / desktop .app-tour__panels.
     Was: max-width: 1080px;  — caused the quiz column to sit ~100px to the
     right of the app-tour column at 1440w (180px vs 80px left edge).
     Individual readable elements (.the-quiz__sub, .the-quiz__answers,
     .the-quiz__form etc.) keep their own typography-driven max-widths so
     prose stays at a ~70-char measure inside the wider container.
     v2.11.7 — CEO directive: centre the quiz intro screen (eyebrow + title
     + sub + BEGIN. CTA) to match the V2.11.4 centred app-tour INSIDE. header.
     Both sections now share a centred editorial axis. */
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

/* ─────── Header (eyebrow + pip rail) ─────── */
.the-quiz__header {
  display: flex;
  /* v2.11.7 — centred header pairs the eyebrow with the progress pip rail
     around the section's centre axis. Was: space-between (eyebrow left,
     rail right). At the intro screen the rail is opacity:0 so the eyebrow
     alone reads centred; once a question is active the rail fades in
     beside the eyebrow, still around the centre. */
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(32px, 5vw, 48px);
  flex-wrap: wrap;
}

.the-quiz__eyebrow {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  color: var(--lime);
  font-weight: 700;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
}
.the-quiz__eyebrow .period {
  color: var(--lime);
  margin-left: -0.05em;
}

.the-quiz__progress {
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
#the-quiz[data-screen="q"] .the-quiz__progress {
  opacity: 1;
}
.the-quiz__pip {
  display: block;
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s;
}
.the-quiz__pip.is-active { background: var(--lime); }
.the-quiz__pip.is-correct { background: var(--lime); }
/* Wrong pip: neutral mute (no red per brand). Correct = lime, so a wrong pip
   reads as "answered, not lime" — distinguished by value rather than hue. */
.the-quiz__pip.is-wrong { background: var(--mute); }

/* ─────── Screens (state machine) ─────── */
.the-quiz__screen {
  display: none;
  animation: quizFadeIn 0.4s ease-out;
}
.the-quiz__screen.is-visible { display: block; }

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .the-quiz__screen { animation: none; }
}

/* ─────── Lime period weapon (shared across all headlines) ─────── */
.the-quiz .period {
  color: var(--lime);
  margin-left: -0.05em;
}
/* BRAND "No red": the TRY AGAIN period is a lime period weapon like every
   other manifesto period (was --red). Repointed here so no HTML edit needed. */
.the-quiz .period--red {
  color: var(--lime);
}

/* ─────── Intro ─────── */
.the-quiz__title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  /* FW2 fix #7 (CDO C4): bumped from clamp(40, 9vw, 96) so the quiz
     headline matches the manifesto's typographic authority — CDO
     measured ~45px at typical desktop, which read as a section sub-
     heading rather than a hero call-to-test. clamp(56, 5.5vw, 80)
     keeps the floor at the same 56px the manifesto uses on the
     375-639w band, scales linearly with viewport, and caps at 80px
     so it never out-shouts the manifesto. */
  font-size: clamp(56px, 5.5vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: clamp(20px, 3vw, 32px);
  /* H5 (2026-05-25 audit) — was `overflow-wrap: anywhere`, which let the
     oversized headline break mid-word at narrow widths: "FIVE QUESTIONS."
     wrapped so the period orphaned as "S." on its own line, and Serbian
     "ПОКУШАЈ." dropped to "Ј." at ≤360px. Keep whole words (and their welded
     lime period) intact; the ≤360px clamp floor below shrinks the type so
     long words still fit the column without overflowing. */
  overflow-wrap: normal;
  word-break: keep-all;
}

.the-quiz__sub {
  font-weight: 400;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.5;
  color: var(--mute);
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped prose sits
     centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto clamp(20px, 3vw, 28px);
}

.the-quiz__meta {
  display: flex;
  gap: 12px;
  /* v2.11.7 — centred flex so any meta chips sit around the section axis. */
  justify-content: center;
  align-items: center;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  color: var(--mute);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 4vw, 40px);
  flex-wrap: wrap;
}
.the-quiz__meta-sep { color: var(--mute-deep); }

/* ─────── CTA buttons ─────── */
.the-quiz__cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  /* v2.11.7 — centred flex so the BEGIN. CTA (and any secondary CTA beside
     it) sits around the section's centre axis. */
  justify-content: center;
}

.the-quiz__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  background: var(--lime);
  border: none;
  color: var(--black);
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s, opacity 0.15s;
  white-space: nowrap;
  min-height: 56px;
  text-decoration: none;
}
/* v2.6 a11y · hover guarded with @media (hover: hover) so it doesn't stick
 * on touch devices (mobile Safari / Android Chrome). */
@media (hover: hover) and (pointer: fine) {
  .the-quiz__cta:hover { filter: brightness(0.92); }
}
.the-quiz__cta:active { transform: scale(0.98); }
.the-quiz__cta:disabled { opacity: 0.5; cursor: wait; }

/* v2.6 a11y · primary CTA focus-visible — standard 3px lime outline @ 3px offset.
 * Lime (#D3FE4C) on near-black backdrop = 19.56:1 contrast (WCAG AAA). */
.the-quiz__cta:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.the-quiz__cta-period {
  color: var(--black);
  /* M9 (2026-05-25 audit) — was `margin-left: 2px`, which detached the period
     from the label ("POČNI ." / "BEGIN ."). Weld it to the word like the
     manifesto periods. */
  margin-left: 0;
  letter-spacing: 0;
}

.the-quiz__cta--secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .the-quiz__cta--secondary:hover {
    background: var(--white);
    color: var(--black);
    filter: none;
  }
}
.the-quiz__cta--secondary:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

/* ─────── Question screen ─────── */
.the-quiz__qmeta {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: clamp(11px, 1.2vw, 13px);
  color: var(--mute);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.the-quiz__qmeta-num {
  color: var(--lime);
  font-weight: 700;
}
.the-quiz__qmeta-sep { color: var(--mute-deep); }

.the-quiz__question {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 5.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  max-width: 900px;
  /* v2.11.7 — centred-section auto-margins so the 900px-capped question sits
     centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto clamp(24px, 4vw, 36px);
  /* v2.13.3 — lock answer block in same vertical position regardless of
     question length. Reserve space for up to 3 lines of text (44px × 1.1 × 3
     = ~145px) so the answer buttons don't jump on Q1→Q5.
     v2.13.7 — REVERTED display: flex which broke text flow (parent's span
     children became flex columns instead of inline text). Back to block
     layout; vertical alignment of short text inside the reserved slot is
     handled by line-height padding implicit in the min-height alone. */
  min-height: clamp(80px, 14vw, 145px);
  display: block;
  text-align: center;
}
.the-quiz__question .lime {
  color: var(--lime);
}

.the-quiz__answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
  /* v2.11.7 — centred-section auto-margins so the 720px-capped answer column
     sits centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto;
}

.the-quiz__answer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03);
  /* P2-2 (WCAG 1.4.11): resting border raised from 0.12 (≈1.6:1) to 0.4
     (≥3:1 on off-black) so the answer control's boundary is perceivable. */
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-align: left;
  cursor: pointer;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 4.2vw, 17px);
  letter-spacing: -0.01em;
  transition: border-color 0.2s, background 0.2s, transform 0.1s, color 0.2s;
  min-height: 56px;
  width: 100%;
}
/* v2.6 a11y · hover-guarded so it doesn't stick on touch (mobile Safari) */
@media (hover: hover) and (pointer: fine) {
  .the-quiz__answer:hover {
    border-color: var(--lime);
    background: rgba(211, 254, 76, 0.05);
  }
}
.the-quiz__answer:active { transform: scale(0.99); }
/* v2.6 a11y · radio-role answer button — focus-visible for keyboard nav */
.the-quiz__answer:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-color: var(--lime);
}

.the-quiz__answer.is-correct {
  border-color: var(--lime);
  background: rgba(211, 254, 76, 0.12);
  color: var(--lime);
  animation: quizPulseLime 0.5s ease-out;
}
/* BRAND "No red": wrong answer uses a NEUTRAL mute treatment (was red border
   + red bg + red text). Distinguished from the lime correct state by value,
   and by the non-colour "✗" glyph below (WCAG 1.4.1). */
.the-quiz__answer.is-wrong {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mute);
}
.the-quiz__answer.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Non-colour cue (WCAG 1.4.1): correct/wrong distinguishable without colour.
   Glyph trails the answer text (margin-left:auto pushes it to the row end).
   Decorative only — SR users get the live status region (#srStatus). */
.the-quiz__answer.is-correct::after,
.the-quiz__answer.is-wrong::after {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
}
.the-quiz__answer.is-correct::after { content: "\2713"; color: var(--lime); }   /* ✓ */
.the-quiz__answer.is-wrong::after   { content: "\2717"; color: var(--white); }  /* ✗ — white for contrast on neutral bg */

@keyframes quizPulseLime {
  0%   { box-shadow: 0 0 0 0 rgba(211, 254, 76, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(211, 254, 76, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .the-quiz__answer.is-correct { animation: none; }
}

.the-quiz__answer-letter {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--lime);
  flex-shrink: 0;
  width: 28px;
}
.the-quiz__answer.is-wrong .the-quiz__answer-letter { color: var(--mute); }

/* ─────── Result · Pass ─────── */
.the-quiz__result-label {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  color: var(--mute);
  font-weight: 400;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.the-quiz__result-tier {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}

.the-quiz__result-id {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-weight: 700;
  font-size: clamp(56px, 12vw, 128px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--lime);
  margin-bottom: clamp(20px, 3vw, 28px);
  overflow-wrap: anywhere;
}
.the-quiz__result-id.is-placeholder {
  color: var(--mute-deep);
}

.the-quiz__result-score {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--mute);
  letter-spacing: 0.04em;
  margin-bottom: clamp(24px, 3vw, 32px);
}
.the-quiz__result-score-num {
  color: var(--lime);
  font-weight: 900;
}
.the-quiz__result-score-sep { color: var(--mute-deep); }

.the-quiz__reveal-cta {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--white);
  line-height: 1.4;
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped reveal CTA
     sits centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto clamp(20px, 3vw, 28px);
}
.the-quiz__reveal-cta.is-hidden { display: none; }

/* v2.12.3 — Pass-state CTA line. Sits between the score reveal and the
   "Download FANATIK." line. Inter 400 mute body register with lime period
   weapons. The score is the slam (Inter 900); this is the supporting
   "play more in the app, prove you're real" voice that motivates the
   download below. */
.the-quiz__pass-cta {
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.45;
  color: var(--mute);
  max-width: 560px;
  margin: 0 auto clamp(16px, 2.4vw, 24px);
}

/* ─────── Form (email gate) ─────── */
.the-quiz__form {
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped form sits
     centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto 16px;
}
.the-quiz__form.is-hidden { display: none; }

.the-quiz__form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.the-quiz__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.005em;
  transition: border-color 0.15s, background 0.15s;
  min-height: 56px;
}
/* v2.6 a11y · email input — keep :focus (for click-into-field) AND
 * :focus-visible (keyboard-only). Both standardized to 3px lime @ 3px offset. */
.the-quiz__input:focus {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-color: var(--lime);
  background: rgba(211, 254, 76, 0.04);
}
.the-quiz__input:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}
.the-quiz__input::placeholder { color: var(--mute); }

/* v2.6 a11y · consent checkbox — keyboard focus must be visible */
.the-quiz__consent input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.the-quiz__cta--submit {
  flex: 0 0 auto;
}

.the-quiz__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--mute);
  line-height: 1.4;
  margin-bottom: 8px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.the-quiz__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--lime);
  cursor: pointer;
}

.the-quiz__form-error {
  font-size: 13px;
  /* BRAND "No red": error salience comes from weight (700) + white against the
     surrounding --mute body copy, not a red hue. Was var(--red). */
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  min-height: 1.4em;
}
.the-quiz__form-error:empty { min-height: 0; }

.the-quiz__form-note {
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* ─────── Success (post-lock) ─────── */
.the-quiz__success {
  display: none;
  padding: 20px 24px;
  background: rgba(211, 254, 76, 0.08);
  border: 1px solid var(--lime);
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped success block
     sits centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto clamp(20px, 3vw, 28px);
}
.the-quiz__success.is-visible { display: block; }
.the-quiz__success-title {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 8px;
}
.the-quiz__success-text {
  font-size: 14px;
  color: var(--white);
  line-height: 1.5;
}

.the-quiz__post-lock {
  margin-top: 16px;
}

/* ─────── LOCKED badge (FIX-G T11) ───────
 * Non-actionable indicator that replaces the destructive TRY AGAIN button.
 * JBM 700, lime-on-off-black, lime hairline border. Reads as a credential,
 * not an interactive element — no hover, no cursor pointer.
 */
.the-quiz__locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  background: var(--off-black);
  border: 1px solid var(--lime);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
  min-height: 56px;
  user-select: none;
  cursor: default;
}
.the-quiz__locked-label {
  color: var(--mute);
}
.the-quiz__locked-num {
  color: var(--lime);
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* ─────── Fail screen ─────── */
.the-quiz__fail-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.the-quiz__fail-text {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--mute);
  line-height: 1.4;
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped fail copy
     sits centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto clamp(24px, 3vw, 32px);
}
.the-quiz__fail-score {
  /* BRAND "No red": the failed score is emphasised by weight (900) + white
     against the --mute fail copy, not red. Lime would read as celebratory
     here, so white carries the stark "not yet" emphasis. Was var(--red). */
  color: var(--white);
  font-weight: 900;
}

/* ─────── Cooldown screen ─────── */
.the-quiz__cooldown-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 8vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.the-quiz__cooldown-text {
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--mute);
  letter-spacing: 0.04em;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.the-quiz__cooldown-timer {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  color: var(--lime);
  font-weight: 700;
}

/* ─────── Closed (cap reached, 410 Gone) ─────── */
.the-quiz__closed-headline {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 9vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.the-quiz__closed-body {
  font-weight: 400;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--mute);
  line-height: 1.5;
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped closed body
     sits centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin: 0 auto clamp(28px, 4vw, 40px);
}

/* ─────── 410 closed-cap notify-me form (FIX-G T12) ───────
 * Don't waste 410 traffic — give them a waitlist path. Visually subordinate
 * to the main "142 NAMES. CLOSED." statement (secondary CTA, mute label).
 */
.the-quiz__closed-followup {
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--mute-deep);
  max-width: 560px;
  /* v2.11.7 — centred-section auto-margins so the 560px-capped closed-followup
     block sits centred inside the now-centred .the-quiz__inner (not left-pinned). */
  margin-inline: auto;
}
.the-quiz__closed-sub {
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--white);
  line-height: 1.4;
  margin-bottom: clamp(14px, 2vw, 18px);
  letter-spacing: 0.02em;
}
.the-quiz__notify-form {
  margin-top: 0;
}
.the-quiz__notify-success {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--lime);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 12px;
  line-height: 1.4;
}

/* ─────── Responsive ─────── */
/* v2.6 Agent-B FIX-2: defensive overflow guard. Quiz section had
   .the-quiz__question max-width:900px and .the-quiz__answers max-width:720px,
   but the section padding clamps to 24px+ on mobile so total content +
   padding could exceed 414w under heavy zoom. Pin section + inner to 100%. */
#the-quiz.the-quiz {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.the-quiz__inner {
  width: 100%;
  /* v2.11.2 alignment: mirror the brand --max-width (1280px) so this
     overflow-safety rule doesn't reintroduce the old 1080px ceiling
     that the earlier rule now drops in favour of var(--max-width). */
  max-width: var(--max-width);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .the-quiz__pip { width: 18px; }
  .the-quiz__progress { gap: 5px; }
}

@media (max-width: 480px) {
  #the-quiz.the-quiz {
    /* v2.11.2 alignment: keep the tighter ≤480w inline padding (16px)
       so the quiz still has breathing room on the narrowest viewports —
       app-tour uses clamp(20px,5vw,…) which lands near 20px here, and
       16px keeps the slam headline from getting cropped on 320w. Block
       padding compressed to 48px (was the existing override). */
    padding: 48px 16px;
  }
  .the-quiz__header {
    margin-bottom: 24px;
    padding-bottom: 12px;
    flex-wrap: wrap;
  }
  .the-quiz__pip { width: 14px; }
  .the-quiz__progress { gap: 4px; }
  .the-quiz__cta-row .the-quiz__cta { flex: 1 1 100%; }
  .the-quiz__form-row { flex-direction: column; }
  .the-quiz__input,
  .the-quiz__cta--submit { width: 100%; }
  .the-quiz__answer-letter { width: 24px; font-size: 20px; }
  .the-quiz__answer { padding: 16px; gap: 12px; }
}

@media (max-width: 360px) {
  .the-quiz__progress { display: none; }
  /* H5 (2026-05-25 audit) — reduce the headline floor at ≤360px so whole
     words still fit the ~288px column (320w − 16px×2 padding) now that
     word-break:keep-all prevents mid-word splits. At 56px "QUESTIONS." is
     333px (overflows); at 44px it is ~257px and Serbian "ПОКУШАЈ." ~236px —
     both fit, so "FIVE QUESTIONS." / "ONE TRY." keep their welded periods
     instead of orphaning "S." / "Ј." onto a line of their own. */
  .the-quiz__title {
    font-size: clamp(40px, 13vw, 48px);
  }
}

/* ----------------------------------------------------------
   v2.6 Agent-B FIX-2: TABLET breakpoint · 768-959w
   ----------------------------------------------------------
   Tablet treatment per audit: centred column max-width 640px on
   results / form / fail / closed screens, larger CTA buttons
   (min-height 56px is already the base), comfortable padding.
   Quiz question screen keeps its 900-px max but inner column
   uses the tablet container width for symmetry.
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 959px) {
  #the-quiz.the-quiz {
    /* v2.11.2 alignment: tablet inline padding bumped to var(--space-5)
       (48px) so it matches the cabinet's --space-5 inline rhythm and the
       app-tour's tablet padding band. Block padding still clamps via
       --section-py. Was: padding: clamp(72px, 9vw, 96px) clamp(40px, 5vw, 64px); */
    padding: var(--section-py) var(--space-5);
  }

  .the-quiz__inner {
    /* v2.11.2 alignment: inner container no longer narrows to 720px on
     tablet — that override produced a content column ~280-560px to the
     right of where the app-tour and cabinet inner columns sat at the same
     viewport widths. Container stays full --max-width; readable elements
     keep their own narrower caps via the per-element overrides below. */
    max-width: var(--max-width);
  }

  /* Tablet — answer rows stay full-width inside the wider column
     so the rows don't drift toward the section centre. */
  .the-quiz__answers {
    max-width: 100%;
  }

  /* Result + form + cooldown + closed all sit in a centred column. */
  .the-quiz__form,
  .the-quiz__success,
  .the-quiz__fail-text,
  .the-quiz__cooldown-text,
  .the-quiz__closed-body,
  .the-quiz__closed-followup,
  .the-quiz__sub {
    max-width: 640px;
    /* v2.11.7 — centred-section auto-margins so the 640px tablet caps sit
       centred inside the now-centred .the-quiz__inner. The longhand pairs
       with each rule's own margin-bottom from the base cascade. */
    margin-inline: auto;
  }

  /* Larger CTAs at tablet — comfortable thumb / cursor target. */
  .the-quiz__cta {
    padding: 20px 32px;
    min-height: 60px;
    font-size: 15px;
  }

  /* Question caps tighter than 900px on tablet so prose doesn't
     stretch wider than a comfortable line measure (~70 chars). */
  .the-quiz__question {
    max-width: 720px;
  }
}

/* ─────── Reduced motion (Agent-B v2.6 verify) ─────── */
@media (prefers-reduced-motion: reduce) {
  .the-quiz__cta,
  .the-quiz__cta--secondary,
  .the-quiz__answer,
  .the-quiz__input,
  .the-quiz__pip {
    transition: none !important;
  }
}

/* ─────── Fallback for older browsers without gap ─────── */
@supports not (gap: 1px) {
  .the-quiz__answers > .the-quiz__answer + .the-quiz__answer { margin-top: 12px; }
  .the-quiz__cta-row > * + * { margin-left: 12px; }
  .the-quiz__form-row > * + * { margin-left: 8px; }
  .the-quiz__progress > * + * { margin-left: 6px; }
  .the-quiz__meta > * + * { margin-left: 12px; }
}

/* ─────── v2.6 a11y · sr-only utility for screen-reader status region ─────── */
/* Visually hide the live region but keep it in the accessibility tree. */
.the-quiz .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────── v2.6 a11y · Windows High Contrast Mode (forced-colors) ─────── */
/* In forced-colors mode, custom colours are stripped — every brand colour
 * collapses to system tokens (Canvas / CanvasText / ButtonFace / ButtonText
 * / Highlight). We override:
 *   - CTAs use ButtonFace/ButtonText with a CanvasText border.
 *   - Lime period (the manifesto-word weapon) becomes Highlight.
 *   - The answer button bg/border collapse to system; focus uses Highlight.
 *   - Pip rail uses Highlight for active/correct, GrayText otherwise. */
@media (forced-colors: active) {
  .the-quiz__cta {
    border: 1px solid CanvasText;
    background: ButtonFace;
    color: ButtonText;
    forced-color-adjust: none;
  }
  .the-quiz__cta:focus-visible,
  .the-quiz__cta--secondary:focus-visible,
  .the-quiz__answer:focus-visible,
  .the-quiz__input:focus-visible,
  .the-quiz__input:focus,
  .the-quiz__consent input[type="checkbox"]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
  .the-quiz__cta--secondary {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .the-quiz__cta-period { color: ButtonText; }
  .the-quiz .period,
  .the-quiz .period--red,
  .the-quiz__qmeta-num,
  .the-quiz__result-score-num,
  .the-quiz__result-id,
  .the-quiz__answer-letter { color: Highlight; }
  /* .period--red is now a lime period (no red) — grouped with .period above.
     In forced-colors the OS palette governs; Mark = system emphasis text (not
     a brand red) and the ✗ glyph still carries the non-colour cue. */
  .the-quiz__fail-score { color: Mark; }
  .the-quiz__answer {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .the-quiz__answer.is-correct {
    border-color: Highlight;
    color: Highlight;
  }
  .the-quiz__answer.is-wrong {
    border-color: Mark;
    color: Mark;
  }
  .the-quiz__pip { background: GrayText; }
  .the-quiz__pip.is-active,
  .the-quiz__pip.is-correct { background: Highlight; }
  .the-quiz__pip.is-wrong { background: Mark; }
  .the-quiz__input {
    border: 1px solid CanvasText;
    background: Field;
    color: FieldText;
  }
  .the-quiz__locked-badge {
    border: 1px solid Highlight;
    background: Canvas;
  }
  .the-quiz__locked-num { color: Highlight; }
  .the-quiz__success {
    border: 1px solid Highlight;
    background: Canvas;
  }
}

/* ===========================================================================
   v2.7 PIVOT — download CTAs on pass + closed screens
   ---------------------------------------------------------------------------
   The download row sits beneath the founding-number reveal on the pass
   screen, and beneath the "142 NAMES. CLOSED." copy on the closed screen.
   Two SVG store badges, fixed 56px tall (fits within the brand's quiet
   density), gap fluid 12-20px, wrap on narrow widths.

   The img inside each badge is the only visible affordance — no border, no
   background plate. WCAG 2.5.3 accessible name comes from the alt attribute
   on the <img> (matches the visible text inside the SVG).
   ========================================================================= */

.the-quiz__download-row {
  display: flex;
  gap: clamp(12px, 2vw, 20px);
  justify-content: center;
  align-items: center;
  margin: clamp(20px, 3vw, 36px) 0;
  flex-wrap: wrap;
}

.the-quiz__download-badge {
  display: inline-block;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.the-quiz__download-badge:hover { transform: translateY(-1px); }
.the-quiz__download-badge:active { transform: translateY(0); opacity: 0.85; }

.the-quiz__download-badge:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 4px;
}

.the-quiz__download-badge img {
  display: block;
  height: 56px;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .the-quiz__download-badge,
  .the-quiz__download-badge:hover,
  .the-quiz__download-badge:active {
    transform: none;
    transition: none;
  }
}