/*
  ProstePosty, strona startowa.

  Warstwa tokenów jest tutaj CELOWO, a nie zaciągana z packages/tokens. Strona ma wdrażać się
  w minutę jako trzy pliki i żyć niezależnie od panelu, więc nie może zależeć od monorepo.
  Kolory pochodzą z dokumentu marki .ralph/specs/MARKA.md (krok S.2a). Układ, odstępy
  i krawędzie nadal z zatwierdzonej makiety design/Start.dc.html.

  Uwaga na przyszłość: packages/tokens/tokens.css to paleta PANELU (niebieski, Inter).
  To jest inny produkt wizualny i te dwa zestawy nie mają się zejść.
*/

:root {
  /*
    Paleta z dokumentu marki. Reguła 60/30/10: krem to tło większości strony, grafit niesie
    dwa ciemne pasma i cały tekst, pomarańcz z kobaltem zostają resztą. Zmierzone pokrycie
    jest w OCENA.md i pilnuje go test/paleta.test.mjs.
  */

  /* Papier i grafit. Cała strona stoi na tych dwóch, reszta jest sygnałem. */
  --papier: #fff7e8;
  --papier-cichy: #f3efe7;
  --tusz: #242b31;

  /*
    Sygnał akcji. WYŁĄCZNIE jako tło przycisku albo bloku, nigdy jako tekst ani kreska
    na papierze: pomarańcz na kremie daje 2,5 do 1, czyli nie przechodzi żadnego progu.
  */
  --pomarancz: #ff7a00;

  /* Kolory systemowe: niosą stan, nie ozdobę. */
  --kobalt: #3b82f6;
  --zielen: #2e7d5b;
  --czerwien: #c24132;

  /* Tekst. Dwa stopnie na papierze, trzy na graficie. Wszystkie zmierzone w OCENA.md. */
  --tekst: #242b31;
  --tekst-cichy: #5d646a;
  --tekst-na-tuszu: #bdbab1;
  --tekst-cichy-na-tuszu: #9c9b96;
  --tekst-na-pomarancz: #242b31;

  /*
    Kroje. Archivo niesie osobowość, Public Sans niesie treść. Dokument marki proponuje
    w punkcie 5 Intera i robi to z dobrego powodu: czytelność i pełne polskie znaki.
    Oba te warunki spełnia też ta para, a Inter jest dziś najczęściej spotykanym krojem
    na stronach generowanych maszynowo i sam z siebie mówi, kto tę stronę zrobił.
    Skala rozmiarów, wag i interlinii pochodzi z dokumentu bez zmian, zmienia się krój.
    Stos zapasowy jest ten z dokumentu, bo strona ma być czytelna także zanim font dojedzie.
  */
  --zapas-systemowy: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-naglowek: "Archivo", var(--zapas-systemowy);
  --font-tresc: "Public Sans", var(--zapas-systemowy);

  /*
    Skala z tabeli w punkcie 5 dokumentu. Każdy stopień ma trafiać w podany tam zakres
    i przy 390 px, i przy 1280 px, więc nie ma tu okrągłych liczb wziętych z powietrza:
    dolna granica clamp to wartość mobilna, górna to desktopowa. Sprawdza to,
    licząc clamp dla obu szerokości, test/typografia.test.mjs.
  */
  --rozmiar-h1: clamp(40px, 2.2rem + 2.6vw, 68px);
  --rozmiar-h2: clamp(32px, 1.55rem + 1.9vw, 46px);
  --rozmiar-h3: clamp(19px, 1.1rem + 0.35vw, 22px);
  --rozmiar-lead: clamp(18px, 1.05rem + 0.3vw, 21px);
  --rozmiar-liczba: clamp(28px, 1.5rem + 0.9vw, 38px);
  --rozmiar-kwota: clamp(32px, 1.7rem + 1.3vw, 44px);
  --rozmiar-tresc: 17px;
  --rozmiar-cta: 16px;
  --rozmiar-cta-duzy: 18px;

  /*
    Dwa stopnie spoza tabeli, bo tabela opisuje sześć elementów, a strona ma ich więcej.
    Drobny siedzi na DOLNEJ granicy zakresu Tekst z dokumentu, czyli 16 px, i bierze wszystko,
    co się czyta zdaniami: opisy kroków, listy pakietów, wiersze stopki, nawigację.
    Podpis, 15 px, jest świadomie poniżej tego zakresu i bierze wyłącznie etykiety
    pod czymś innym: podpis obrazu, opis pod liczbą, dopisek obok przycisku.
    Przed tym krokiem strona prowadziła zdaniami tekst po 14 i 15 px, czyli pod podłogą dokumentu.
  */
  --rozmiar-drobny: 16px;
  --rozmiar-podpis: 15px;
  --rozmiar-etykieta: 12px;

  /* Nazwa marki w pasku to logotyp, a nie stopień skali tekstowej. W kroku S.2c zastępuje
     ją plik z katalogu brand/ i ten token znika razem z nią. */
  --rozmiar-wordmark: 19px;

  /* Interlinie, też z tabeli. Nagłówki ciasno, treść luźno, liczby dokładnie na wysokość. */
  --interlinia-naglowek: 1;
  --interlinia-h2: 1.04;
  --interlinia-lead: 1.45;
  --interlinia-tresc: 1.55;
  --interlinia-podpis: 1.45;
  --interlinia-liczba: 1;
  --interlinia-wiersz: 1.7;

  /* Wagi. Nagłówki i liczby najgrubsze, wezwanie do działania o stopień niżej. */
  --waga-naglowek: 800;
  --waga-cta: 700;

  /*
    Krawędzie. Twarde, dwa piksele, zawsze w kolorze grafitu. Zero zaokrągleń,
    z jednym wyjątkiem opisanym niżej.
  */
  --kreska: 2px;
  --obwodka: var(--kreska) solid var(--tusz);
  --promien: 0;

  /*
    Jedyne zaokrąglenie na całej stronie i jedyne miejsce, gdzie dokument marki wygrywa
    z makietą co do kształtu. Punkt 7 dokumentu zadaje przyciskowi promień 14 px i wysokość
    minimum 52 px na telefonie. Wszystko inne, karty, sekcje, plakietki, zostaje na twardym
    kancie, więc miękkie rogi ma na tej stronie wyłącznie to, w co się klika. Osobna bramka
    pilnuje, żeby zaokrąglenie nie rozlało się na resztę.
  */
  --promien-przycisk: 14px;
  --wysokosc-cta: 52px;

  /*
    Wysokość przyklejonego paska na dole, policzona z jego składników, a nie zgadnięta:
    przycisk, dwa razy odstęp wewnętrzny i kreska u góry. Ta sama wartość oddaje treści
    zapas na końcu strony, więc pasek nigdy nie zasłania ostatniego wiersza stopki.
  */
  --pasek-dolny-wysokosc: calc(var(--wysokosc-cta) + 2 * var(--o3) + var(--kreska));

  /* Obwódka skupienia. Kobalt, trzy piksele, odsunięta o trzy, tak jak w dokumencie marki. */
  --skupienie: 3px solid var(--kobalt);
  --skupienie-odstep: 3px;

  /*
    Jedyne dopuszczalne przesunięcie bloku. To nie jest cień zmiękczający, tylko druga
    płaszczyzna odbita w kolorze akcji, tak jak w makiecie na karcie wyróżnionego pakietu.
  */
  --przesuniecie: 10px 10px 0 var(--pomarancz);

  /* Odstępy. Skala z makiety, bez wartości pośrednich. */
  --o1: 4px;
  --o2: 8px;
  --o3: 12px;
  --o4: 16px;
  --o5: 24px;
  --o6: 32px;
  --o7: 40px;
  --o8: 56px;
  --o9: 64px;
  --o10: 72px;

  /*
    Miara wiersza. Poprzeczka żąda 55 do 75 znaków, a strona miała od 30 do 42 w kolumnach
    i 82 w jednokolumnowym wstępie, czyli mijała się z normą z obu stron naraz. Jednostka ch
    liczy szerokość zera w bieżącym kroju, więc ten limit trzyma się skali, gdy zmieni się
    stopień pisma, a nie rozjeżdża się razem z nią.
  */
  --miara: 53ch;

  /* Margines boczny strony. Na telefonie schodzi w regule niżej. */
  --margines: var(--o8);

  /*
    Ruch. Kilka wartości w jednym miejscu, bo tyle da się przestawić naraz i zobaczyć różnicę.

    To jest DRUGIE podejście. Pierwsze stało na 20 px, 600 ms i 150 ms odstępu, czyli
    **1050 ms, zanim czwarta liczba dojdzie do końca**. Cztery liczby dowodowe to najmocniejszy
    argument na tej stronie i nie mają prawa wjeżdżać przez sekundę jak slajdy w prezentacji.
    Wartości niżej dają 560 ms, czyli prawie o połowę mniej, a przesunięcie zeszło z 20 px
    do 8, więc widać, że treść siada, a nie że nadlatuje.

    Najechanie ma własny, krótki czas. Powściągliwy nie znaczy powolny: reakcja na kursor
    po 600 ms sprawia wrażenie zacinającej się strony, a nie spokojnej.
  */
  --ruch-przesuniecie: 8px;
  --ruch-czas: 380ms;
  --ruch-odstep: 60ms;
  --ruch-czas-najechanie: 180ms;
  --ruch-wciecie: 6px;
  --ruch-krzywa: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Najmniejszy cel dotykowy. Połowa wejść przychodzi z telefonu. */
  --dotyk: 44px;

  /*
    Logo i jego pole ochronne. Dostarczony plik ma 300 x 92, ale rysunek zajmuje w nim
    179 x 63, a reszta to przezroczysta ramka, w tym 104 px pustego z prawej. Plik w media/
    jest przycięty do samego rysunku, więc wysokość zadana tutaj jest wysokością ZNAKU,
    a nie płótna. Znak ma proporcję 1777 na 1859, czyli prawie kwadrat.
  */
  --znak-wysokosc: 40px;
  --pole-ochronne: 40px;

  /*
    Na telefonie zostaje sam znak, bez napisu. Wysokość 36 px trzyma się powyżej minimum
    32 px, jakie dokument marki stawia samemu znakowi w punkcie 3.2, a pole ochronne
    liczone od tej wysokości da się na telefonie dotrzymać.
  */
  --znak-wysokosc-telefon: 36px;
  --znak-pole-ochronne: 36px;
}

@media (max-width: 720px) {
  :root {
    --margines: var(--o5);
  }
}

/* Reset ograniczony do tego, co realnie przeszkadza. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--font-tresc);
  font-size: var(--rozmiar-tresc);
  line-height: var(--interlinia-tresc);
  /* Bez tego Archivo w wersji grubej wygląda na macOS na cięższą, niż jest naprawdę. */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-naglowek);
  font-weight: var(--waga-naglowek);
  letter-spacing: -0.02em;
  line-height: var(--interlinia-naglowek);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--rozmiar-h1);
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--rozmiar-h2);
  line-height: var(--interlinia-h2);
}

h3 {
  font-size: var(--rozmiar-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--interlinia-h2);
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*
  Odnośniki idą grafitem, a nie kobaltem, choć dokument marki przypisuje kobalt do linków.
  Powód jest zmierzony: #3b82f6 na kremie daje 3,46 do 1, czyli poniżej progu 4,5 dla tekstu.
  Kobalt zostaje tam, gdzie próg wynosi 3 do 1: obwódka skupienia i znaczniki stanu.
  Odnośnik odróżnia się podkreśleniem, nie kolorem.
*/
a {
  color: var(--tekst);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
  Obwódka skupienia jest wymagana, a nie opcjonalna. Kobalt czyta się i na kremie, i na
  graficie: 3,46 do 1 na jednym, 3,90 do 1 na drugim, oba powyżej progu 3 do 1 dla elementów
  nietekstowych. Odstęp trzech pikseli odsuwa ją od twardej krawędzi, żeby się z nią nie zlała.
*/
:focus-visible {
  outline: var(--skupienie);
  outline-offset: var(--skupienie-odstep);
}

/* Klasa pomocnicza: treść czytana przez czytnik ekranu, niewidoczna na ekranie. */
.tylko-dla-czytnika {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
  Odnośnik pomijający nawigację MUSI się pokazać, gdy dojdzie do niego tabulator. Schowany
  także przy skupieniu jest bezużyteczny dla osoby, która widzi ekran i porusza się klawiaturą,
  czyli dla większości tych, którym miał pomóc. Do tego kroku był schowany zawsze.
*/
.tylko-dla-czytnika:focus-visible {
  position: fixed;
  top: var(--o3);
  left: var(--o3);
  z-index: 20;
  width: auto;
  height: auto;
  min-height: var(--dotyk);
  margin: 0;
  padding: var(--o3) var(--o4);
  border: var(--obwodka);
  border-radius: var(--promien-przycisk);
  background: var(--papier);
  color: var(--tekst);
  font-weight: var(--waga-cta);
  overflow: visible;
  clip-path: none;
}

/*
  Szerokość kolumny treści. Makieta stoi na 1200 px. Czterdzieści pikseli więcej daje
  sekcji nagłówkowej dokładnie tyle, ile brakowało leadowi do dolnej granicy miary wiersza,
  a przy okazji powiększa zrzut panelu, zamiast go ścieśniać. Zmierzone, nie dobrane na oko:
  przy 1200 px lead miał 54 znaki w najdłuższym wierszu, przy normie od 55.
*/
.strona {
  max-width: 1240px;
  margin: 0 auto;
}

/* ==========================================================================
   Ruch. Trzy sekcje, trzy różne powody, żeby na nie spojrzeć (krok S.7).
   Reguła nadrzędna: nic z tego nie jest potrzebne do przeczytania strony.
   ========================================================================== */

/*
  Ujawnianie przy wejściu w kadr. Cała reguła wisi na klasie, którą dokłada skrypt, więc
  bez JavaScriptu nie ma tu żadnego ukrywania: treść jest widoczna od pierwszej klatki.
*/
.ruch-wlaczony [data-ujawnij] {
  opacity: 0;
  transform: translateY(var(--ruch-przesuniecie));
  transition:
    opacity var(--ruch-czas) var(--ruch-krzywa),
    transform var(--ruch-czas) var(--ruch-krzywa);
}

.ruch-wlaczony [data-ujawnij].widoczny {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Sekcje. Układ i wymiary przeniesione z design/Start.dc.html.
   Każda sekcja kończy się kreską w kolorze tuszu, bo to ona buduje rytm strony.
   ========================================================================== */

.strona {
  padding-inline: var(--margines);
}

/* Pasek górny --------------------------------------------------------------- */

.pasek {
  border-bottom: var(--obwodka);
  background: var(--papier);
}

.pasek__srodek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*
    Odstęp od nawigacji to pełne pole ochronne. To jest ta strona pola, na której realnie
    coś mogłoby dosunąć się do logo, i tu obowiązuje bez ustępstw.
  */
  gap: var(--pole-ochronne);
  padding-block: 20px;
}

/*
  Logo jest odnośnikiem do początku strony, więc obowiązuje je cel dotykowy jak każdy inny.
  Na telefonie sam znak ma 32 px wysokości i bez tej reguły trafialny obszar schodziłby
  poniżej progu razem z nim.
*/
.znak {
  display: inline-flex;
  align-items: center;
  min-height: var(--dotyk);
  color: var(--tekst);
}

.znak:hover {
  color: var(--tekst);
  text-decoration: none;
}

/*
  Znak jest obrazem, napis tekstem. Wymiary w znaczniku są proporcją pliku, więc przeglądarka
  rezerwuje miejsce, zanim obraz dojedzie, i pasek górny nie podskakuje.
*/
.znak {
  gap: 10px;
}

.znak__symbol {
  width: auto;
  height: var(--znak-wysokosc);
  flex-shrink: 0;
}

/*
  Napis dziedziczy kolor po rodzicu, więc ta sama konstrukcja działa na kremie w pasku górnym
  i na graficie w stopce. To jest cała przewaga rozdzielenia znaku od napisu.
*/
.znak__napis {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-wordmark);
  font-weight: var(--waga-naglowek);
  letter-spacing: -0.01em;
  white-space: nowrap;
}


.pasek__nawigacja {
  display: flex;
  align-items: center;
  gap: var(--o5);
  font-size: var(--rozmiar-drobny);
}

/* Odnośniki sekcji też są celem, nawet jeśli na telefonie ich nie ma: laptop z ekranem
   dotykowym to nadal palec, a nie kursor. */
.pasek__odnosnik {
  display: inline-flex;
  align-items: center;
  min-height: var(--dotyk);
}

.pasek__odnosnik {
  color: var(--tekst);
}


/*
  Telefon w pasku górnym jest tekstem, nie przyciskiem. Przycisk obok logo konkurowałby
  z jedynym wezwaniem na tej stronie, a numer ma być po prostu widoczny i klikalny.
  Wysokość celu dotykowego pilnuje --dotyk, bo to jest odnośnik, który realnie klika
  się kciukiem.
*/
.pasek__telefon {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--dotyk);
  color: var(--tekst);
  font-size: var(--rozmiar-tresc);
  font-weight: var(--waga-cta);
  white-space: nowrap;
}

.pasek__telefon:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Przyciski ----------------------------------------------------------------- */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding-inline: var(--o4);
  border: var(--obwodka);
  border-radius: var(--promien-przycisk);
  font-family: var(--font-tresc);
  font-size: var(--rozmiar-cta);
  font-weight: var(--waga-cta);
  line-height: var(--interlinia-liczba);
  text-align: center;
  cursor: pointer;
}

.przycisk:hover {
  text-decoration: none;
}

/*
  Stan kliknięcia. Samoocena w kroku S.5 wykazała, że w arkuszu nie było ani jednego
  `:active`, więc przycisk nie potwierdzał wciśnięcia niczym poza zmianą strony. Przesunięcie
  o piksel jest tanie, nie rusza układu sąsiadów i daje to, czego brakowało: odpowiedź.
*/
.przycisk:active {
  transform: translateY(1px);
}

/* Ikona bierze kolor tekstu, obok którego stoi. Pomarańcz na kremie miałby 2,5 do 1
   i po prostu by zniknął. Od kroku S.2e ta sama ikona stoi też przy telefonie w pasku
   górnym, czyli przy zwykłym odnośniku, więc nie należy już do przycisku. */
.ikona {
  flex-shrink: 0;
}

.przycisk--obwodka {
  background: transparent;
  color: var(--tekst);
}

.przycisk--obwodka:hover {
  background: var(--tusz);
  color: var(--papier);
}


/*
  Główna akcja strony. Pomarańcz pod grafitowym napisem, dokładnie jak w dokumencie marki:
  5,49 do 1, czyli z zapasem ponad próg. Odwrotnie, czyli krem na pomarańczu, dałoby 2,73
  do 1 i byłoby nieczytelne, więc tej wersji tu nie ma.
*/
.przycisk--akcja {
  background: var(--pomarancz);
  color: var(--tekst-na-pomarancz);
  font-family: var(--font-naglowek);
}

/* Najechanie odwraca przycisk zamiast przyciemniać pomarańcz, bo ciemniejszego nie ma w palecie. */
.przycisk--akcja:hover {
  background: var(--tusz);
  color: var(--papier);
}

.przycisk--duzy {
  min-height: var(--wysokosc-cta);
  padding-inline: 26px;
  font-size: var(--rozmiar-cta-duzy);
}

/* Sekcja nagłówkowa --------------------------------------------------------- */

.naglowkowa {
  border-bottom: var(--obwodka);
}

.naglowkowa__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--o8);
  align-items: center;
  padding-block: var(--o10) var(--o9);
}

.plakietka {
  display: inline-block;
  margin-bottom: 22px;
  padding: 5px 12px;
  border: 1.5px solid var(--tusz);
  background: var(--papier-cichy);
  color: var(--tekst);
  font-size: var(--rozmiar-podpis);
  font-weight: 600;
}

.naglowkowa h1 {
  margin-bottom: 22px;
}

.naglowkowa__zajawka {
  max-width: var(--miara);
  margin-bottom: var(--o6);
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-lead);
  line-height: var(--interlinia-lead);
}

.naglowkowa__akcje {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.naglowkowa__dopisek {
  margin-top: var(--o4);
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-podpis);
}

.okno {
  margin: 0;
}

.okno__rama {
  border: var(--obwodka);
  background: var(--papier-cichy);
}

/*
  Proporcja pilnowana z góry, żeby miejsce na zrzut było zajęte, zanim plik dojedzie.
  Bez tego pierwszy ekran podskakuje w momencie wczytania obrazu.
*/
.okno__rama img {
  width: 100%;
  aspect-ratio: 880 / 746;
}

.okno__pasek {
  display: flex;
  align-items: center;
  gap: var(--o2);
  padding: 9px 12px;
  background: var(--tusz);
}

.okno__kropka {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

/*
  Trzy kropki nie są światłami z paska przeglądarki, tylko legendą stanów publikacji
  z dokumentu marki: zieleń wykonane, kobalt oczekuje, czerwień usunięte. Tyle samo pikseli,
  a niosą coś, co na tej stronie ma znaczenie.
*/
.okno__kropka--wykonane {
  background: var(--zielen);
}

.okno__kropka--oczekuje {
  background: var(--kobalt);
}

.okno__kropka--usuniete {
  background: var(--czerwien);
}

.okno__adres {
  flex-grow: 1;
  text-align: center;
  color: var(--tekst-na-tuszu);
  font-size: var(--rozmiar-etykieta);
}

.okno__podpis {
  margin-top: var(--o3);
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-podpis);
  text-align: center;
}

/* Pasek dowodu -------------------------------------------------------------- */

.dowod {
  border-bottom: var(--obwodka);
  background: var(--papier-cichy);
}

.dowod__siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  padding-block: 26px;
}

/*
  Liczby wchodzą po kolei, a nie razem. To nie jest ozdoba: te cztery liczby są dowodem
  zbieranym przez trzy miesiące, więc kolejność mówi „przyszły jedna po drugiej", a nie
  „wysypały się na ekran".
*/
.dowod__pozycja:nth-child(2) {
  transition-delay: var(--ruch-odstep);
}

.dowod__pozycja:nth-child(3) {
  transition-delay: calc(var(--ruch-odstep) * 2);
}

.dowod__pozycja:nth-child(4) {
  transition-delay: calc(var(--ruch-odstep) * 3);
}

.dowod__liczba {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-liczba);
  font-weight: var(--waga-naglowek);
  line-height: var(--interlinia-liczba);
}

.dowod__opis {
  margin-top: 5px;
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-podpis);
  line-height: var(--interlinia-podpis);
}

/* Trzy kroki ---------------------------------------------------------------- */

.kroki {
  border-bottom: var(--obwodka);
}

.kroki .strona {
  padding-block: var(--o9);
}

.kroki h2 {
  margin-bottom: var(--o7);
}

/*
  Trzy kroki stały wcześniej w trzech wąskich kartach obok siebie i wiersz treści schodził
  tam do trzydziestu znaków, czyli do połowy tego, co się czyta bez wysiłku. Teraz to trzy
  szerokie wiersze rozdzielone kreską: numer po lewej, treść po prawej, w pełnej mierze.
  Strona urosła w pionie, ale przestała siekać zdania, a wolne miejsce po prawej jest
  powietrzem, nie brakiem.
*/
.kroki__lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.krok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--o6);
  align-items: start;
  padding-block: var(--o6);
  border-top: var(--obwodka);
}

.krok:last-child {
  border-bottom: var(--obwodka);
}

/*
  Jedyna rzecz na tej stronie, która reaguje na kursor. Wiersz pod kursorem dostaje ton
  papieru pomocniczego i wsuwa się o włos w prawo, czyli tyle, żeby było wiadomo, że to
  jeden blok, a nie trzy luźne akapity. Bez cienia, bez ramki, bez podnoszenia.
*/
.krok {
  padding-inline: var(--o3);
  margin-inline: calc(var(--o3) * -1);
  transition:
    background-color var(--ruch-czas-najechanie) var(--ruch-krzywa),
    padding-left var(--ruch-czas-najechanie) var(--ruch-krzywa);
}

/*
  Pierwsza wersja wsuwała wiersz o 12 px i robiła to przez 600 ms. Wiersz pod kursorem
  odjeżdżał wtedy od sąsiadów tak wyraźnie, że wyglądało to na błąd układu. Zostało 6 px
  i 180 ms, czyli tyle, żeby dało się to zauważyć kątem oka, a nie żeby przyciągało wzrok.
*/
@media (hover: hover) {
  .krok:hover {
    background-color: var(--papier-cichy);
    padding-left: calc(var(--o3) + var(--ruch-wciecie));
  }
}

.krok__tresc {
  max-width: var(--miara);
}

.karta {
  border: var(--obwodka);
  background: var(--papier-cichy);
  padding: 26px;
}

.krok__numer {
  display: block;
  /* Numer wyrównuje się do pierwszego wiersza nagłówka obok, a nie do krawędzi kratki. */
  min-width: 1.2em;
  /* Kobalt, nie pomarańcz: to numer porządkowy, czyli element systemu, a nie wezwanie
     do działania. 42 px liczy się jako duży tekst, więc próg wynosi 3 do 1, a jest 3,46. */
  color: var(--kobalt);
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-kwota);
  font-weight: var(--waga-naglowek);
  line-height: var(--interlinia-liczba);
}

.krok h3 {
  margin-bottom: 10px;
}

/* Kreska nad pierwszym wierszem zastępuje odstęp pod nagłówkiem sekcji. */
.kroki h2 + .kroki__lista {
  margin-top: var(--o6);
}

.krok p {
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-drobny);
  line-height: var(--interlinia-tresc);
}

/* Uczciwe granice ----------------------------------------------------------- */

/*
  Ziarno na ciemnym paśmie. Jedyna sekcja, która dostaje powód do patrzenia BEZ RUCHU:
  to jest sekcja o ryzyku i cokolwiek by się tu poruszało, odciągałoby od liczb.
  Szum jest generowany filtrem w samym arkuszu, więc nie dokłada ani jednego pobrania
  i nie ma tu żadnego pliku do zgubienia.
*/
.granice {
  position: relative;
  border-bottom: var(--obwodka);
  background: var(--tusz);
  color: var(--papier);
}

.granice::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*
    Pierwsza wersja stała na 0.1 i to było za dużo: ziarno rozjaśniało grafit na tyle,
    że pasmo wyglądało na przygaszone, a nie na papierowe, i realnie zbijało kontrast
    tekstu pod spodem. Zmierzone wartości obu wersji są w OCENA.md.
  */
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E");
}

.granice .strona {
  position: relative;
}

.granice .strona {
  padding-block: var(--o8);
}

/* Nagłówek tej sekcji miał własny, mniejszy stopień. Dokument marki zna jeden stopień H2
   i sekcja granic nie ma powodu mówić ciszej od reszty strony, skoro to ona buduje zaufanie. */
.granice h2 {
  margin-bottom: var(--o3);
}

.granice__wstep {
  max-width: var(--miara);
  margin-bottom: 30px;
  color: var(--tekst-na-tuszu);
  font-size: var(--rozmiar-lead);
  line-height: var(--interlinia-lead);
}

.granice__siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.granica {
  /* Kreska kremowa, nie czerwona. Czerwień jawności jest zarezerwowana dla informacji
     o ryzyku, a na graficie miałaby 2,80 do 1, czyli byłaby ledwo widoczna. */
  border-left: 4px solid var(--papier);
  padding-left: 18px;
}

.granica__liczba {
  margin-bottom: 6px;
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-liczba);
  font-weight: var(--waga-naglowek);
  line-height: var(--interlinia-liczba);
}

.granica__opis {
  color: var(--tekst-na-tuszu);
  font-size: var(--rozmiar-drobny);
  line-height: var(--interlinia-tresc);
}

/*
  Zdanie domykające sekcję granic. Stoi osobno, nad kreską i pod trzema liczbami, bo ma być
  ostatnią rzeczą, którą czyta się przed cennikiem. Prowadzi je krem, a nie kolor drugorzędny:
  to jest zdanie, na którym ta sekcja się broni, a nie dopisek pod nią.
*/
.granice__domkniecie {
  margin-top: 30px;
  color: var(--papier);
  font-size: var(--rozmiar-lead);
  line-height: var(--interlinia-lead);
}

/* Cennik -------------------------------------------------------------------- */

.cennik .strona {
  padding-block: var(--o9);
}

.cennik h2 {
  margin-bottom: 10px;
}

.cennik__wstep {
  max-width: var(--miara);
  margin-bottom: 36px;
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-lead);
  line-height: var(--interlinia-lead);
}

.cennik__siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--o5);
  align-items: start;
}

.pakiet {
  padding: 30px;
}

/*
  Jedyne przesunięcie na całej stronie. To nie jest cień, tylko druga płaszczyzna odbita
  w akcencie. Dostaje je wyłącznie pakiet wyróżniony, bo gdy dostają je wszystkie, przestaje
  cokolwiek znaczyć.
*/
.pakiet--wyrozniony {
  box-shadow: var(--przesuniecie);
}

.pakiet__nazwa {
  font-size: var(--rozmiar-h3);
  font-weight: var(--waga-naglowek);
  letter-spacing: -0.02em;
}

.pakiet__dla {
  margin-bottom: 22px;
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-drobny);
}

.pakiet__cena {
  display: flex;
  align-items: baseline;
  gap: var(--o2);
  margin-bottom: 4px;
}

.pakiet__kwota {
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-kwota);
  font-weight: var(--waga-naglowek);
  line-height: var(--interlinia-liczba);
}

.pakiet__okres {
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-tresc);
}

.pakiet__wdrozenie {
  margin-bottom: var(--o5);
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-drobny);
}

.pakiet__lista {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: var(--rozmiar-drobny);
  list-style: none;
}

/*
  Wezwanie na końcu cennika. Ta sama para co w sekcji nagłówkowej i ta sama hierarchia,
  bo strona ma mówić jednym głosem, a nie wymyślać na końcu drugiej akcji.
*/
.cennik__akcje {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: var(--o8);
}

/* Stopka -------------------------------------------------------------------- */

.stopka {
  background: var(--tusz);
  color: var(--tekst-na-tuszu);
}

.stopka__siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  padding-block: var(--o7);
}

.znak--stopka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--papier);
}

/* Na telefonie napis w stopce ZOSTAJE: tam jest miejsce, a stopka bez nazwy firmy
   nie mówi, czyja to strona. Reguła ukrywająca napis dotyczy tylko paska górnego. */
@media (max-width: 720px) {
  .znak--stopka .znak__napis {
    display: inline;
  }
}

.stopka__opis {
  font-size: var(--rozmiar-podpis);
  line-height: var(--interlinia-tresc);
}

.stopka__naglowek {
  margin-bottom: var(--o3);
  color: var(--tekst-cichy-na-tuszu);
  font-family: var(--font-naglowek);
  font-size: var(--rozmiar-etykieta);
  font-weight: var(--waga-cta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stopka__wiersz {
  display: block;
  font-size: var(--rozmiar-drobny);
  line-height: var(--interlinia-wiersz);
}

/* Znacznik address niesie znaczenie, a nie wygląd: przeglądarka domyślnie pisze go kursywą,
   czego stopka z danymi firmy nie potrzebuje. */
.stopka__adres {
  font-style: normal;
}

/*
  Odnośniki w stopce miały przy 390 px po 19 i 20 pikseli wysokości, w tym telefon, czyli
  jedna z trzech ścieżek kontaktu. Cel dotykowy dostają wszystkie, nie tylko telefon:
  kciuk nie wie, że reszta to „tylko" regulamin. Przy okazji stopka dostaje powietrza.
*/
.stopka__telefon,
.stopka__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--dotyk);
}

.stopka__telefon {
  color: var(--papier);
  font-size: var(--rozmiar-tresc);
  font-weight: 600;
}

.stopka__link {
  color: var(--papier);
}

.stopka__link--cichy {
  color: var(--tekst-na-tuszu);
  margin-right: var(--o3);
}

.stopka__cicho {
  margin-top: 6px;
  color: var(--tekst-cichy-na-tuszu);
  font-size: var(--rozmiar-podpis);
  line-height: var(--interlinia-wiersz);
}

.stopka__nip {
  margin-top: 6px;
}

.stopka a:hover {
  color: var(--papier);
}

/* Przyklejony pasek na dole --------------------------------------------------
   Na monitorze go NIE MA. To nie jest element ukryty regułą wyświetlania, tylko element,
   który na szerokim ekranie nie ma po co istnieć: numer stoi tam w pasku górnym
   i w sekcji nagłówkowej, a przyklejona belka zabierałaby wysokość bez powodu. */

.pasek-dolny {
  display: none;
}

/* Wąski ekran. Pełne przejście mobilne robi krok S.9, tu chodzi o to,
   żeby strona była czytelna od razu, a nie dopiero za kilka commitów. */
@media (max-width: 900px) {
  /* Pasek górny nie mieści się w jednym rzędzie przy węższym oknie. Poniżej 720 px
     odnośniki do sekcji znikają i wtedy wraca do jednego rzędu, patrz reguła niżej. */
  .pasek__srodek {
    flex-wrap: wrap;
    row-gap: var(--o3);
  }

  .pasek__nawigacja {
    flex-wrap: wrap;
    gap: var(--o3);
  }

  .naglowkowa__siatka,
  .kroki__lista,
  .granice__siatka,
  .cennik__siatka,
  .stopka__siatka {
    grid-template-columns: minmax(0, 1fr);
  }

  .dowod__siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .naglowkowa__siatka {
    padding-block: var(--o8) var(--o7);
  }
}

/* ==========================================================================
   Telefon (krok S.9). Osobne przejście, nie zwężenie.

   Trzy decyzje, każda z pomiarem w OCENA.md:
     UKRYTE       odnośniki do sekcji w pasku, wezwanie pomocnicze w sekcji nagłówkowej
                  (WhatsApp stoi w przyklejonym pasku w tym samym kadrze) i ramka nadtytułu.
     ŚCIŚNIĘTE    pasek górny z 95 na 72 px, margines strony z 56 na 24 px.
     PRZESKALOWANE  logo na sam znak, nagłówek, zrzut panelu, liczby, główne wezwanie
                  na pełną szerokość kolumny.
   ========================================================================== */

/*
  Telefon. Punkt 7 dokumentu marki: pasek górny ma zostać prosty i nie otwierać menu.
  Zamiast chowania odnośników pod przyciskiem z trzema kreskami po prostu ich tu nie ma:
  obie sekcje leżą niżej na tej samej stronie i dochodzi się do nich przewinięciem,
  a w pasku zostaje to jedno, po co ktoś tu przyszedł, czyli numer.
*/
@media (max-width: 720px) {
  .pasek__odnosnik {
    display: none;
  }

  .pasek__srodek {
    flex-wrap: nowrap;
    /* Pasek ściśnięty z 95 na 72 px. Na ekranie o wysokości 844 px każde 23 px u góry
       to 23 px, których nie widać z pierwszej obietnicy strony. */
    padding-block: var(--o3);
    gap: var(--znak-pole-ochronne);
  }

  /* Na telefonie zostaje sam znak: napis znika, pole ochronne wraca. */
  .znak__napis {
    display: none;
  }

  .znak__symbol {
    height: var(--znak-wysokosc-telefon);
  }

  /*
    Nadtytuł traci ramkę, a zostaje treścią. W ramce zawijał się na dwie linie i wyglądał
    jak ostrzeżenie systemowe, a jest zwykłym wprowadzeniem do nagłówka.
  */
  .plakietka {
    margin-bottom: var(--o4);
    padding: 0;
    border: 0;
    background: none;
    color: var(--tekst-cichy);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  /*
    W sekcji nagłówkowej zostaje jedno wezwanie, na pełną szerokość kolumny. WhatsApp znika
    stąd nie dlatego, że jest mniej ważny, tylko dlatego, że przy 390 px stoi w przyklejonym
    pasku W TYM SAMYM KADRZE, kilka centymetrów niżej. Dwa razy to samo w jednym ekranie
    to nie jest wybór, tylko szum.
  */
  .naglowkowa__akcje .przycisk--obwodka {
    display: none;
  }

  .naglowkowa__akcje .przycisk--akcja {
    width: 100%;
  }

  /* Zapas na dole strony dokładnie wysokości przyklejonego paska, powiększony o obszar
     gestu powrotu na ekranach bez fizycznego przycisku. Bez tego pasek zakrywa
     ostatni wiersz stopki i nikt tego nie zauważa na monitorze. */
  body {
    padding-bottom: calc(var(--pasek-dolny-wysokosc) + env(safe-area-inset-bottom));
  }

  .pasek-dolny {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--o3);
    /* Margines boczny węższy niż w treści strony. Pasek ma zmieścić dwa wezwania w jednym
       rzędzie przy 360 px, a nie równać się do kolumny tekstu. */
    padding: var(--o3) var(--o4);
    padding-bottom: calc(var(--o3) + env(safe-area-inset-bottom));
    border-top: var(--obwodka);
    background: var(--papier);
  }

  /* Hierarchia zostaje ta sama co w sekcji nagłówkowej: numer bierze całą wolną szerokość,
     WhatsApp tylko tyle, ile potrzebuje jego napis. */
  .pasek-dolny__glowne {
    flex: 1 1 auto;
    min-height: var(--wysokosc-cta);
    padding-inline: var(--o3);
    /* Numer telefonu nie może się złamać na dwie linie. Przy 360 px to jest różnica
       między przyciskiem, który wygląda na zaplanowany, a takim, który się nie zmieścił. */
    white-space: nowrap;
  }

  .pasek-dolny__pomocnicze {
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   Strona błędu 404 (krok S.13).

   Nie ma tu własnego kadru nagłówkowego ani zrzutu panelu. Ktoś, kto trafił pod zły adres,
   nie przyszedł oglądać produktu, tylko wyjść z ślepego zaułka, więc zostaje sam napis,
   telefon i droga powrotna. Reszta wyglądu jest pożyczona z klas kadru nagłówkowego,
   żeby strona błędu nie zaczęła z czasem żyć własnym życiem wizualnym.
   ========================================================================== */

.pustka {
  display: flex;
  align-items: center;
  /* Minimalna wysokość liczona od okna, minus pasek górny, żeby stopka nie wjeżdżała
     do połowy ekranu na monitorze i żeby napis stał w kadrze, a nie przy suficie. */
  min-height: 62vh;
  padding-block: var(--o9);
}

/* Kontener strony jest tu elementem elastycznym, więc bez tego skurczyłby się do szerokości
   napisu i wylądował na środku ekranu razem z marginesem auto. Wtedy tekst nie stałby
   w tej samej pionowej linii co logo w pasku górnym. */
.pustka > .strona {
  width: 100%;
}

/*
  Para wezwań na stronie błędu ma WŁASNĄ klasę, choć wygląda tak samo co w kadrze nagłówkowym.
  Powód jest konkretny: przy 390 px reguła chowa drugie wezwanie z kadru nagłówkowego, bo
  WhatsApp stoi tam po raz drugi w przyklejonym pasku. Tutaj drugim wezwaniem jest powrót na
  stronę główną, którego w pasku nie ma i nie będzie, więc odziedziczenie tamtej reguły
  zabrałoby jedyną drogę powrotu na telefonie.
*/
.pustka__akcje {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.pustka__tresc {
  /* Miara wiersza, ale liczona od lewej krawędzi strony, a nie wyśrodkowana. Cała strona
     jest wyrównana do lewej i logo w pasku górnym stoi w tej samej pionowej linii,
     więc wyśrodkowany blok czytałby się jak pomyłka, a nie jak decyzja. */
  max-width: var(--miara);
}

/* ==========================================================================
   Ograniczony ruch (krok S.8).

   Ten blok stoi NA KOŃCU arkusza i to nie jest kwestia porządku. Reguły niżej mają tę samą
   szczegółowość co te, które wyłączają, więc rozstrzyga kolejność. Wstawiony wyżej, jak stał
   do kroku S.8, przegrywałby z regułą najechania z S.7 i wiersz kroku nadal by się przesuwał.

   Zasada podziału: znika RUCH, zostaje KOLOR. Zmiana barwy pod kursorem nie jest ruchem,
   niesie informację „to jest jeden blok" i nikomu nie szkodzi. Przesunięcie o sześć pikseli
   jest ruchem, więc go tu nie ma, choćby trwało zero sekund.
   ========================================================================== */

/* ------------------------------------------------------------------
   Sekcja próby. Kremowa karta na szarym papierze, żeby odcinała się od sąsiadów
   bez sięgania po kolejny kolor. Pomarańcz zostaje tam, gdzie zawsze: na przycisku.
   ------------------------------------------------------------------ */

.kroki__wstep {
  max-width: 46rem;
  margin: 0 0 var(--o6);
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-lead);
  line-height: var(--interlinia-lead);
}

.proba {
  background: var(--papier-cichy);
  border-bottom: var(--obwodka);
}

.proba .strona {
  padding-block: var(--o9);
}

.proba__srodek {
  display: flex;
  justify-content: center;
}

.proba__tresc {
  max-width: 46rem;
  padding: var(--o7);
  background: var(--papier);
  border: var(--obwodka);
}

.proba__lead {
  margin: 0 0 var(--o5);
  font-size: var(--rozmiar-lead);
  line-height: var(--interlinia-lead);
}

.proba__lista {
  margin: 0 0 var(--o6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--o3);
}

/* Haczyk rysowany, nie znak z klawiatury: skaluje się z tekstem i nie zależy od tego,
   czy w foncie systemowym akurat istnieje. */
.proba__lista li {
  position: relative;
  padding-left: 30px;
  line-height: var(--interlinia-tresc);
}

.proba__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 16px;
  height: 9px;
  border-left: 3px solid var(--zielen);
  border-bottom: 3px solid var(--zielen);
  transform: rotate(-45deg);
}

.proba__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o3);
  align-items: center;
}

.proba__dopisek {
  margin: var(--o4) 0 0;
  color: var(--tekst-cichy);
  font-size: var(--rozmiar-drobny);
}

@media (max-width: 720px) {
  .proba__tresc {
    padding: var(--o5) var(--o4);
  }

  /* Na telefonie przyciski jeden pod drugim, na pełną szerokość: kciuk nie musi celować. */
  .proba__akcje {
    display: grid;
    gap: var(--o3);
  }

  .proba__akcje .przycisk {
    justify-content: center;
  }
}



@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /*
    Skrócenie czasu do zera NIE WYSTARCZA i to jest sedno tego kroku. Przejście trwające
    0,01 ms nadal przenosi element w nowe miejsce, tylko robi to w jednej klatce.
    Użytkownik, który prosi o mniej ruchu, dostawał więc ten sam przeskok, tyle że gwałtowniej.
    Zmierzone przed poprawką: 6 px pod kursorem, mimo włączonego ustawienia.
  */
  .krok:hover {
    padding-left: var(--o3);
  }

  .przycisk:active {
    transform: none;
  }

  /*
    Ujawnianie przy przewijaniu nie ma prawa niczego ukryć, nawet gdyby ustawienie zmieniło się
    już po wczytaniu strony, czyli wtedy, gdy skrypt zdążył dołożyć swoją klasę.
  */
  .ruch-wlaczony [data-ujawnij] {
    opacity: 1;
    transform: none;
  }
}