/* Post-result paid offer for the three inline quizzes.
   Shared so the pages cannot drift; every colour comes from the tokens in
   main.css (no literals here, so a token change repaints this too).
   Contrast against --bg-card (#1a1a24): --gold 7.9, --gold-bright 12.3,
   --text-body 12.2, --muted 8.0; --bg on --gold 9.1. All >= WCAG AA 4.5. */
.quiz-offer{
  box-sizing:border-box;
  width:100%;
  max-width:640px;
  margin:28px auto 0;
  padding:20px 20px 18px;
  text-align:left;
  background:var(--bg-card);
  border:1px solid var(--gold-dim);
  border-radius:12px;
}

.quiz-offer-kicker{
  margin:0 0 6px;
  font-family:var(--font-ui);
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
}

.quiz-offer-title{
  margin:0 0 10px;
  font-family:var(--font-heading);
  font-size:1.15rem;
  line-height:1.35;
  color:var(--gold-bright);
}

.quiz-offer-copy{
  margin:0 0 16px;
  font-size:0.95rem;
  line-height:1.6;
  color:var(--text-body);
}

/* 48px min height keeps the tap target above the 44px WCAG 2.5.5 floor. */
.quiz-offer-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 20px;
  background:var(--gold);
  color:var(--bg);
  border-radius:8px;
  font-family:var(--font-ui);
  font-size:0.92rem;
  font-weight:700;
  letter-spacing:0.02em;
  text-align:center;
  text-decoration:none;
  transition:background 0.2s ease,color 0.2s ease;
}

.quiz-offer-cta:hover{
  background:var(--gold-bright);
  color:var(--bg);
}

/* Visible for keyboard and low-vision users on both --bg and --bg-card. */
.quiz-offer-cta:focus-visible{
  outline:3px solid var(--gold-bright);
  outline-offset:3px;
}

.quiz-offer-note{
  margin:12px 0 0;
  font-size:0.8rem;
  line-height:1.55;
  color:var(--muted);
}

@media (max-width:520px){
  .quiz-offer{margin-top:22px;padding:16px 16px 14px}
  .quiz-offer-cta{padding:12px 14px;font-size:0.88rem}
}

@media (prefers-reduced-motion:reduce){
  .quiz-offer-cta{transition:none}
}

/* Low-vision / high-contrast readers: make the card edge and the fine print
   heavier instead of relying on the subtle token contrast. */
@media (prefers-contrast:more){
  .quiz-offer{border-width:2px}
  .quiz-offer-note{color:var(--text-body)}
}

/* Windows high-contrast mode replaces the palette entirely. */
@media (forced-colors:active){
  .quiz-offer{border-color:CanvasText}
  .quiz-offer-cta{border:1px solid ButtonText}
  .quiz-offer-cta:focus-visible{outline:3px solid Highlight}
}