/* Clarkarion Rewards — reusable company-site banner. Safe to host on any of the family sites. */
.cl-rewards-banner {
  --cl-void: #010207;
  --cl-cyan: #74e8ff;
  --cl-ice: #eaf8ff;
  --cl-gold: #ffd596;
  --cl-t2: rgba(255,255,255,0.7);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 0.85rem 1.15rem;
  background:
    radial-gradient(ellipse at 0 50%, rgba(116,232,255,0.16), transparent 55%),
    linear-gradient(90deg, #010207, #040815 60%, #010207);
  border: 1px solid rgba(234,248,255,0.2);
  border-radius: 1rem;
  color: var(--cl-ice);
  text-decoration: none;
  max-width: 72rem;
  margin: 0 auto;
}
.cl-rewards-banner *, .cl-rewards-banner *::before, .cl-rewards-banner *::after { box-sizing: border-box; }
.cl-rewards-banner:hover { border-color: rgba(116,232,255,0.55); color: var(--cl-ice); }
.cl-rewards-banner .cl-rb-left { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.cl-rewards-banner .cl-rb-mark {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 35% 30%, #fff, #74e8ff 40%, transparent 65%);
  box-shadow: 0 0 12px rgba(116,232,255,0.45);
}
.cl-rewards-banner .cl-rb-kicker {
  display: block; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 700; color: var(--cl-cyan);
}
.cl-rewards-banner .cl-rb-title { display: block; font-weight: 600; font-size: 0.98rem; }
.cl-rewards-banner .cl-rb-sub { margin: 0.15rem 0 0; color: var(--cl-t2); font-size: 0.85rem; }
.cl-rewards-banner .cl-rb-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.85rem;
  border-radius: 999px; border: 1px solid rgba(255,213,150,0.45); color: var(--cl-gold);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}