/* ============================================================
   Strona główna brum.pl — warstwa na design systemie (ds/).
   Rytm jak w kalkulator/kalkulator.css: h1 44/44, h2 32/36,
   treść 16/22, sekcje 96 px; zero cieni, zero akcentów.
   ============================================================ */

.kontener-640 { max-width: 640px; margin-left: auto; margin-right: auto; }

.k-h1 { font-weight: var(--wght-display); font-size: 44px; line-height: 44px; letter-spacing: var(--ls-display); color: var(--text-primary); }
.k-h2 { font-weight: var(--wght-display); font-size: 32px; line-height: 36px; letter-spacing: var(--ls-display); color: var(--text-primary); }
.k-h3 { font-weight: var(--wght-ui); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: 0; color: var(--text-primary); }
.k-h1 + .lead-hero, .k-h2 + .opis, .k-h3 + .opis { margin-top: 12px; }
.kicker { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--wght-ui); letter-spacing: var(--ls-light); color: var(--text-secondary); margin-bottom: 16px; }
.wordmark-nav { font-weight: var(--wght-display); font-size: 22px; line-height: 18px; }

/* Sekcje w HTML mają też klasę DS `sekcja` (padding poziomy 32/20 px z ds/brum.css) — bez niej treść dotyka krawędzi ekranu na mobile (zrzut Piedro 06.09). */
.s { padding-top: 96px; padding-bottom: 0; }
.s.hero { padding-top: 152px; }
.s:last-child { padding-bottom: 96px; }
.hero .para-cta { margin-top: 40px; justify-content: flex-start; }
.para-cta.lewo { justify-content: flex-start; margin-top: 32px; }

/* Jak to działa — 3 kroki */
.kroki { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kroki li { padding: 24px; border-radius: 12px; background: var(--surface-subtle); }
.kroki .nr { display: inline-block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--wght-ui); letter-spacing: var(--ls-light); color: var(--text-secondary); margin-bottom: 12px; }
.kroki .opis { color: var(--text-secondary); }

/* Dowód — rata vs koszt */
.dowod { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dowod-kafel { padding: 24px; border-radius: 12px; background: var(--surface-subtle); }
.dowod-etykieta { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--wght-ui); letter-spacing: var(--ls-light); color: var(--text-secondary); min-height: calc(2 * var(--lh-small)); }
.dowod-liczba { margin-top: 16px; font-weight: var(--wght-display); font-size: 44px; line-height: 44px; letter-spacing: var(--ls-display); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.dowod-jedn { margin-top: 4px; color: var(--text-secondary); }
.dowod-nota { margin-top: 24px; color: var(--text-secondary); max-width: 640px; }
#dowod > .kontener-960 > .opis { max-width: 640px; }

/* Stopka — mały blok „powiadom mnie" */
.powiadom { margin-top: 48px; max-width: 520px; }
.powiadom-etykieta { display: block; font-weight: var(--wght-ui); margin-bottom: 12px; }
.powiadom .wiersz { display: flex; gap: 8px; flex-wrap: wrap; }
.powiadom input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 10px 16px; border: 1px solid rgba(127,127,127,.5); border-radius: var(--r-pill); background: transparent; color: inherit; font: inherit; }
.powiadom .consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: var(--fs-small); line-height: var(--lh-small); }
.powiadom .consent input { margin-top: 3px; flex: none; }
.powiadom .msg { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-small); min-height: var(--lh-small); }
.powiadom .msg.err { color: #c0392b; }
.powiadom .thanks[hidden], .powiadom form[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* mobile <810 */
@media (max-width: 809.98px) {
  .s { padding-top: 64px; }
  .s.hero { padding-top: 104px; }
  .s:last-child { padding-bottom: 64px; }
  .k-h1 { font-size: 36px; line-height: 38px; }
  .k-h2 { font-size: 28px; line-height: 32px; }
  .kroki, .dowod { grid-template-columns: 1fr; gap: 16px; }
  .dowod-liczba { font-size: 36px; line-height: 38px; }
  .dowod-etykieta { min-height: 0; }
}

/* Stopka (ciemna): btn-primary to czarna pigułka — na #141414 niewidoczna, więc odwrócone kolory */
.stopka .btn-primary { background: var(--text-on-dark); color: var(--bg-footer); }
.stopka .btn-primary:hover { background: var(--text-on-dark-muted); }
/* Mobile: stopka z blokiem e-mail jest wyższa od viewportu — kurtyna sticky ucinałaby jej górę */
@media (max-width: 809.98px) { .stopka { position: static; } }