/* =====================================================================
   OFFER BANNER
   "Refer 2 friends -> 1 month free" top strip, shown above the nav on every
   page that includes it. Visible by default (fail-open — see js/offer.js);
   JS only ever hides it or edits its copy after a successful app_config read.
   ===================================================================== */
.offer-banner {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
}
.offer-banner__inner {
  width: min(94%, 1100px);
  margin: 0 auto;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: -.005em;
}
.offer-banner__icon {
  flex: none;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offer-banner__text {
  line-height: 1.3;
}

@media (max-width: 560px) {
  .offer-banner__inner { font-size: .78rem; padding: 8px 12px; }
}

/* ---------------------------------------------------------------------
   Affiliate rates: the free-month bonus card sits alongside the 50/20/10
   cash-commission cards in .aff-rates, reusing .aff-rate/.aff-rate--lead.
   No new card classes needed — .aff-rate--bonus only swaps the icon row.
   --------------------------------------------------------------------- */
.aff-rate--bonus .aff-rate__when {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aff-rate--bonus .offer-banner__icon {
  stroke: var(--accent-ink);
}