/* Mężczyzna 2.0 - lista oczekujących w jednej sekcji (lista.html). Bazuje na styles.css. */

.lista-hero .hero__sub-lead { color: var(--on-ink); font-weight: 600; margin: 0; }
.lista-hero .hero__sub { margin-bottom: var(--sp-5); }
.lista-hero .lista-bridge { margin: var(--sp-3) 0 0; color: var(--on-ink-muted); }

.lista-promises { list-style: none; padding: 0; margin: 0 auto var(--sp-6); max-width: 520px; display: grid; gap: var(--sp-3); text-align: left; }
.lista-promises li { position: relative; padding-left: 34px; font-family: var(--font-body); font-size: 1.12rem; line-height: 1.45; color: var(--on-ink); }
.lista-promises li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--crimson) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE8E0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }

.lista .hero__actions { flex-direction: column; gap: var(--sp-4); }
.lista .cta-sub { max-width: 46ch; }

/* styles.css chowa logo w hero na telefonie; na liście ma zostać. */
.landing.lista .hero:not(.hero--split) .hero__logo { display: block; }

@media (max-width: 680px) {
  .landing.lista .hero:not(.hero--split) .hero__logo { width: 112px; margin-bottom: var(--sp-4); }
  .lista-promises li { font-size: 1rem; }
}