/* Styl „hook typograficzny" — jasna kanwa, jedno zdanie na slajd,
   druga połowa cofnięta kolorem, handle w lewym dolnym rogu.
   Kanwa 1080×1440 px (4:5, format karuzeli IG), sztywna, wycentrowana
   w oknie podglądu. Zastąpił slajd-bazowy.css — tamten usunięty
   2026-08-20, do odzyskania z commita c987a42, jeśli wróci wariant
   ciemny/eyebrow+headline.

   ZRZUT: robić z elementu .slide, nie z viewportu. Poniższy box-shadow
   i tło body są tylko pod podgląd w przeglądarce — w kadrze eksportu
   nie mają czego szukać. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--surface-sunken-2);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  /* Sztywne — bez %, bez vw/vh, bez media queries. */
  width: 1080px;
  height: 1440px;
  flex: none;
  position: relative;
  background: var(--surface-page);
  padding: 96px 92px 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(36, 31, 33, 0.12);
}

/* Zdanie slajdu. Jeden stopień na slajd — nigdy dwa w jednym bloku.
   Przy dłuższej treści schodzić po skali, nie ruszać paddingu. */
.hook {
  font-family: var(--font-body);
  font-weight: var(--fw-hook);
  font-size: 132px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink-primary);
  margin: 0;
}

.hook--md { font-size: 108px; }
.hook--sm { font-size: 88px;  line-height: 1.02; letter-spacing: -0.03em; }
.hook--xs { font-size: 72px;  line-height: 1.06; letter-spacing: -0.025em; }

/* Dopowiedzenie — cofnięte kolorem, nie rozmiarem. */
.cichy { color: var(--ink-muted); }

.stopka {
  position: absolute;
  left: 92px;
  bottom: 112px;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: 30px;
  line-height: 1.35;
  color: var(--ink-primary);
  margin: 0;
}

/* --- Lista kroków: numer szary, treść w typografii hooka --- */
.kroki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.krok {
  display: flex;
  gap: 32px;
  align-items: baseline;
  font-family: var(--font-body);
  font-weight: var(--fw-hook);
  font-size: 72px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink-primary);
}

.krok-nr {
  flex: none;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Lista kroków pod nagłówkiem — mniejsza, żeby zmieściła się z tytułem. */
.kroki--kompakt { margin-top: 56px; gap: 48px; }
.kroki--kompakt .krok { font-size: 60px; }

/* --- Wariant „nagłówek + historia" (dwupoziomowy) ---
   Mocna teza na górze, pod nią mniejszy akapit, który dopowiada.
   Zastępuje inline .cichy tam, gdzie potrzebujemy więcej tekstu
   opowieścią, nie jednym zdaniem. Okładka: tytul--xl, krótki podpis. */
.blok { display: flex; flex-direction: column; }

.tytul {
  font-family: var(--font-body);
  font-weight: var(--fw-hook);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink-primary);
  margin: 0;
  text-wrap: balance;
}

.tytul--xl { font-size: 132px; line-height: 0.98; letter-spacing: -0.035em; }
.tytul--lg { font-size: 104px; }
.tytul--md { font-size: 88px;  line-height: 1.02; }

.podpis {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 46px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink-secondary);
  margin: 44px 0 0;
}

.podpis--krotki { font-size: 52px; }

/* --- Zestawienie dwóch grafik --- */
.porownanie {
  display: flex;
  gap: 40px;
  margin-bottom: 72px;
}

.panel {
  flex: 1;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunken-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-opis {
  font-family: var(--font-body);
  font-size: 26px;
  color: var(--ink-muted);
  text-align: center;
  padding: 0 24px;
  margin: 0;
}