/* ============================================================================
   JNZ Insurance — Homepage-only styles
   ============================================================================
   Loaded only on /index.html. Depends on /styles.css being loaded first.
   Anything that COULD appear on another page belongs in /styles.css instead.
   Pillars and testimonials live in /styles.css now (used on /quote/ as well).
============================================================================ */


/* ============ Team teaser (homepage-specific bottom spacing) ============ */
/* .team-grid and .team-cta base styles live in styles.css; the homepage adds
   extra bottom spacing on the grid so the "View all 18" link below has air. */
.team-grid { margin-bottom: 40px; }


/* ============ Refer ============ */
.refer-banner {
  background: var(--bg);
  border: 1px solid rgba(18, 58, 92, 0.08);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px; align-items: center;
  box-shadow: var(--shadow-1);
}
.refer-medallion {
  width: 110px; height: 110px;
  border-radius: var(--r-xl);
  background: var(--jnz-navy);
  color: var(--jnz-champagne);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.refer-medallion .amount { font-size: 36px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.02em; }
.refer-medallion .label {
  font-size: 10px; font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 4px; opacity: 0.85;
}
.refer-eyebrow {
  font-size: 12px; font-weight: var(--fw-bold);
  color: var(--jnz-teal);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; margin-bottom: 10px;
}
.refer-banner h3 { font-size: 26px; font-weight: var(--fw-bold); color: var(--jnz-navy); margin: 0 0 8px; letter-spacing: -0.01em; }
.refer-banner p { font-size: 15px; line-height: 1.55; color: var(--jnz-slate); margin: 0; max-width: 560px; }


/* ============ Homepage responsive ============ */
/* .coverage-* responsive collapses live in styles.css. Pillars + testimonials
   responsive lives in /styles.css too (they're shared components now). */
@media (max-width: 820px) {
  .refer-banner { grid-template-columns: 1fr; padding: 32px 24px; gap: 20px; }
}