/* ═══════════════════════════════════════════════════════════════════════════
   RC4U — Strona glowna — hero i progi cenowe

   Zrodlo: design/makiety/rc4u-redesign.html (blok <style> nr 3).
   Wygenerowane 2026-08-28. Zmiany wprowadzaj TUTAJ — makieta jest juz tylko
   dokumentacja decyzji, nie zrodlem prawdy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- hero wariantu B: split --- */
.heroB{display:grid; gap:2rem; align-items:center}

@media (min-width:940px){.heroB{grid-template-columns:1.05fr 1fr; gap:3.4rem}}

.heroB__title{font-size:clamp(2.9rem,1.6rem + 6.4vw,5.6rem); line-height:calc(.88em + 4px)}

.heroB__title em{font-style:normal; color:var(--accent)}

.heroB__media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg)}

.heroB__media img{width:100%; aspect-ratio:4/3; object-fit:cover}

@media (min-width:940px){.heroB__media img{aspect-ratio:3/4}}

.heroB__tag{position:absolute; left:1rem; bottom:1rem}

.heroB .trust{border-top:1px solid var(--line); margin-top:1.8rem}

/* --- wykres progów --- */
.tiers{display:grid; gap:.55rem}

.tier{
  display:grid; grid-template-columns:5.5rem 1fr auto; gap:.85rem; align-items:center;
  font-size:.88rem;
}

.tier__range{font-weight:600; color:var(--ink-muted); font-size:.8rem}

.tier__bar{height:34px; background:var(--bg-sunken); border-radius:var(--r-sm); overflow:hidden}

.tier__fill{
  height:100%; background:var(--accent-fill); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:flex-end; padding-right:.6rem;
  color:var(--accent-on-fill); font-weight:600; font-size:.8rem; min-width:4rem;
}

.tier__save{font-weight:600; color:var(--ok); font-size:.8rem; white-space:nowrap}

@media (max-width:560px){.tier{grid-template-columns:4.2rem 1fr; row-gap:.2rem}.tier__save{grid-column:2}}