/* „Dla kogo” v2 (04.10): jasny kafel, cztery białe karty (granatowy kwadrat ikony, tytuł, zdanie), pod spodem branże i „nie dla Was”.
   Poprzednia forma (granatowy blok): strona/archiwum-s04-dlakogo-v1/. Tylko var(--cr-*). */
.s04-karty { display: grid; gap: var(--cr-karty-odstep); margin: 0; padding: 0; list-style: none; }
.s04-k { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--cr-tlo); border: 1px solid var(--cr-linia-2); border-radius: var(--cr-r-m); }
.s04-k__ik { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 12px; background: var(--cr-marka); color: var(--cr-biel); }
.s04-k__ik .i { width: 26px; height: 26px; }
.s04-k h3 { font-size: 1.3125rem; line-height: 1.25; color: var(--cr-marka); }
.s04-k p { font-size: 1rem; line-height: 1.5; color: var(--cr-tekst-2); }
.s04-dol { display: grid; justify-items: center; gap: 16px; margin-top: 28px; text-align: center; }
.s04-branze { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.s04-branze li { padding: 7px 14px; border-radius: 999px; background: var(--cr-tlo); border: 1px solid var(--cr-linia); font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 600; color: var(--cr-marka); }
.s04-nie { display: inline-flex; align-items: center; gap: 8px; font-size: .9375rem; color: var(--cr-tekst-2); }
.s04-nie .i { width: 18px; height: 18px; flex: none; }
@media (min-width: 700px) { .s04-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .s04-karty { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }