/* =====================================================================
 *  jb-quiz-band.css - homepage band for the down payment program matcher.
 *  Reuses the brand tokens. Deliberately left-aligned and split, so it
 *  does not read as a repeat of the centred .pf-cta band at page bottom.
 * =================================================================== */

.jbq-band{padding-top:0}

.jbq-band-card{
  background:var(--brand-green-deep,#0F4C3A);
  border-radius:18px;
  padding:clamp(2rem,4vw,3.25rem) clamp(1.5rem,4vw,3rem);
  display:grid;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:900px){.jbq-band-card{grid-template-columns:1.55fr 1fr}}

.jbq-band-card .pf-eyebrow{color:var(--brand-accent-gold,#FFC03A)}

.jbq-band-h{
  font-family:var(--font-heading);
  font-weight:700;color:#fff;
  font-size:clamp(1.55rem,2.6vw,2.25rem);
  line-height:1.15;margin:0 0 .85rem;
}
.jbq-band-p{
  color:var(--wolf-white,#F2EFE7);
  font-size:1.02rem;line-height:1.62;margin:0;max-width:54ch;
}

.jbq-band-act{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
@media(min-width:900px){.jbq-band-act{align-items:flex-end;text-align:right}}

.jbq-band-note{
  color:rgba(242,239,231,.78);
  font-size:.9rem;line-height:1.5;margin:0;max-width:32ch;
}

/* Off-white fill so the button is actually visible on the dark card.
 * Deep green on wolf-white clears WCAG AA comfortably. */
.rt-button.jbq-band-btn{background:var(--wolf-white,#F2EFE7) !important;border-color:var(--wolf-white,#F2EFE7) !important}
.rt-button.jbq-band-btn,.rt-button.jbq-band-btn *{color:var(--brand-green-deep,#0F4C3A) !important}
.rt-button.jbq-band-btn:hover{background:#fff !important;border-color:#fff !important}