/* ============================================================
   ARKUSZ STYLU — statyk2 dryseo.com (WZORZEC DOCELOWY, nie kopia)
   Wersja: 2026-10-13 v17 (runda 19, po werdykcie wzrokowym 13.10: U1 trzy szerokości
   treści → kolumna 700 + pasmo wyłamane [`.teza` i siatka cech bez nagłówka w kolumnie,
   rynna 48 px], U2 oddech nad .cta, U3 odstęp i kreskowany pasek `.praktyka`, U4 padding
   pasma na telefonie — §25.7, §28, §29)
   Poprzednia: 2026-10-11 v16 (runda 18, po oglądzie: jedna oś tekstu x=333 — §25 nagłówek pasma,
   §25.5 sekcja dzielona jednokolumnowa, podpis pasma liczb; tabela 4-kol. na telefonie;
   menu PL 504 w jednym wierszu; H1 PL 1100; stopka)
   Poprzednia: 2026-10-11 v15 (naprawa po oglądzie: CTA w nagłówku 640–1279, karta hero 40 rem
   wyśrodkowana, §28 siatki cech 58 rem + subgrid, lewa oś logo)
   Poprzednia: 2026-10-09 v14 (runda 15b: §20a legenda formularza `.formularz__legenda`,
   zdjęty `cursor:help` z gwiazdki)
   Poprzednia: 2026-10-09 v13 (runda 15: §20a formularz kontaktowy w .cta — 0 reguł → pełny
   zestaw, kontrasty liczone względem granatu sekcji, biały fokus; bez zmian w znaczniku)
   Poprzednia: 2026-10-09 v12 (runda 14, część druga: H1 — §6b rysunek w hero z medium
   dostaje 482–606 px zamiast 231–388 px: kontener 92 vw, dwie kolumny od 1100 px
   w proporcji 5:6, jedna kolumna 768–1099 px, padding karty 1,25 em / .5 em na telefonie)
   Poprzednia: 2026-10-09 v11 (runda 14: N1 — §25.6 numer pozycji `.ikony` stoi przy
   własnej ikonie zamiast przy prawej krawędzi komórki, czyli przy sąsiedzie)
   Poprzednia: 2026-10-09 v10 (runda 13: dwie usterki z audytu pary 3 —
   §25.10/25.10a karty „dalej": niepełny ostatni rząd dla DOWOLNEJ liczby kart,
   bez `:has()` i bez wyliczonej listy liczności; §21 blok „Gdzie dalej"
   w kolumnie prozy 700 px zamiast 70 vw)
   Poprzednia: 2026-10-08 v9 (runda 12: trzy usterki z niezależnego audytu
   pary 2 — §10 martwy `column-gap` telefonu ożywiony + niepełny wiersz menu
   na środku, §25.7 płyta `.teza` zwężona do 52rem, §26.7 selektor FAQ
   `article.tresc` → `.tresc`, bo huby mają goły <article>)
   Wcześniej: 2026-10-07 v8 (runda 11: §25.6b niepełny rząd siatki `.ikony`
   wyśrodkowany bez `:has()`, §14 pasmo liczb na 6 torach, §15 `.podzial`
   align-items:start, §25.5 przypis wykresu ściszony)
   Wcześniej: 2026-10-06 v7 (runda 10: §25.4 próg trzech kolumn kart tematycznych
   1100 → 1140 px + stopień dwóch kolumn 768–1139 px z trzecią kartą na środku;
   przyczyna N3 274 px na obu stronach głównych)
   Poprzednia: 2026-10-06 v6 (runda 9: §25.10a niepełny ostatni rząd KART
   wyśrodkowany — 3/5/7/8/11 kart przy obu progach; siatki `.ikony` celowo
   bez zmian, bo ich pozycja nie jest pudełkiem)
   Wcześniej: 2026-10-06 v5 (runda 8: §27 kontener ograniczony — wyłamanie
   bloków z kolumny prozy, wariant .ikony--bez-ikon, karty „dalej" ×4)
   Wcześniej: 2026-10-05 v4 (runda 7: §26 doświadczenie czytania prozy,
   owijka .tabela-obw, teza .wyroznik, usterki FAQ/Podsumowanie/stopka)
   Autor: agent webdesign
   Decyzja usera 03.10: statyk2 to docelowy wygląd serwisu, z którego
   agent Gutenberga będzie pobierał arkusz. Markup wg KONTRAKT-STATYK2.md.

   SKĄD SYSTEM (nie tożsamość — patrz NOTATKA-STYL_2026-10-03_v1.md dla
   pełnego wywodu każdej liczby):
   - referencja wizualna: PKO Bank Polski.html + 0531b946a35434eb.css
     (27 KB, arkusz treści WYSIWYG banku — skala nagłówków, promienie,
     cienie, przyciski, listy, tabele). Kolory i nazwa NIE są przenoszone.
   - paleta i część tokenów: output/statyk/assets/styl.css v1 30.09
     (zmierzone z kitu Elementora dryseo) — punkt wyjścia, rozwijany.
   ============================================================ */

/* ---- reset minimalny ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light} /* dry nie ma trybu ciemnego —
     wymuszamy jasny, żeby przeglądarka/OS nie odwracały kolorów same */

/* ============================================================
   1. PALETA — NIEZMIENNA tożsamość drySEO (user, brief): granat #264F80,
   niebieski #3478C0, pomarańcz #FF8A3D. Rozwinięte o odcienie poniżej —
   żaden nie zastępuje trzech barw marki, tylko im towarzyszy.
   ============================================================ */
:root{
  --granat:#264F80;       /* tekst podstawowy + wszystkie nagłówki */
  --niebieski:#3478C0;    /* link hover/aktywny — 4,57:1 na bieli, AA */
  --pomaranczowy:#FF8A3D; /* akcent marki — WYŁĄCZNIE dekoracja (2,35:1
       na bieli, nie przechodzi AA dla tekstu, patrz NOTATKA) */
  --przygaszony:#42597F;  /* NOWY ton: granat przyciemniony dla podpisów/
       meta-tekstu. Zastępuje `opacity:.75` na granacie ze starego arkusza —
       ta technika dawała ok. 4,38:1 na bieli, PONIŻEJ progu AA 4,5:1 dla
       tekstu zwykłej wielkości. --przygaszony to policzony, stały kolor:
       7,08:1 na bieli — bezpieczny bez względu na tło pod spodem. */
  --ramka:#D7E1F0;        /* obwódki, linie separujące */
  --sekcja:#F5F7FA;       /* tło naprzemiennych sekcji / modułów */
  --tlo2:#E5E8EC;         /* drugie jasne tło, różne od --sekcja celowo */
  --bialy:#FFFFFF;

  /* cień marki — ton granatu o niskiej krycie, wzorowany na dropdownie
     referencji (`box-shadow:0 3px 6px #00006629`, czyli ciemny granat
     banku przy ~16% krycia). Tu własny granat, ta sama proporcja. */
  --cien:0 4px 16px rgba(38,79,128,.12);
  --cien-mocny:0 10px 28px rgba(38,79,128,.22);

  /* RUNDA KOREKTY 03.10 (porównanie z PKO — „serio?"): odcienie granatu
     do gradientów pasm i stanu hover pełnego przycisku. Oba to TINTY
     istniejących barw marki, nie nowe kolory — patrz NOTATKA. */
  --sekcja-g1:#EEF3FB; /* niebieski zmieszany z bielą ~92% — jasne tło pasm,
       odpowiednik bardzo jasnoniebieskich gradientów PKO, ale z palety dry */
  --sekcja-g2:#FFFFFF;
  --granat-ciemny:#1F4269; /* granat przyciemniony ~15% — hover pełnego przycisku,
       policzony tak samo jak --przygaszony (patrz NOTATKA, kontrast liczony) */

  --font-tekst:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-cytat:Georgia,'Times New Roman',serif; /* 25px Georgia 600 — jedyne
       miejsce, gdzie kit dryseo świadomie łamie Poppins; zmierzone 20.09,
       zostaje bez zmian, to tożsamość, nie wygląd do korekty */

  --strona-max:1290px;
  --tresc-max:700px;      /* ok. 80 znaków w wierszu przy 16px — NIE 750
       (zmierzone 750px ≈ 90 znaków, powyżej zalecanych 50–75) */

  /* promień i rytm — Z REFERENCJI: tabela WYSIWYG banku ma border-radius
     10px (box-shadow jako obwódka), tooltip-dropdown 10px, przycisk 8px.
     System referencji jest wyraźnie "bardziej zaokrąglony" niż stary
     statyk dryseo (4–6px) — to jest decyzja usera o zmianie wyglądu.
     ZWIĘKSZONE 03.10 z 10px na 16px: zrzuty PKO (produktowe karty, pasma
     sekcji) mają promień wyraźnie większy niż WYSIWYG-owa tabela, bliżej
     16–24px — to jest ten sam system, bardziej "dopięty do końca". */
  --promien:16px;
  --promien-mala:8px;
  --promien-duza:32px; /* duże, miękkie pasma sekcji i karta hero__media —
       odpowiednik zaokrąglonych "fal" tła widocznych na zrzutach PKO */
  --hero-foto-wys:32rem; /* RUNDA 10.10 (U6): WYSOKOŚĆ zdjęcia w hero, jedna dla
       wszystkich zdjęć niezależnie od proporcji źródła (1:1, 2:3...). Zastępuje
       `--hero-media-proporcja:4/3` + object-fit:cover, które ścinało 25% obrazu
       (wbite w zdjęcia napisy i logo). Równa jest WYSOKOŚĆ, szerokość wynika
       z proporcji źródła — patrz §6, reguła `.hero__foto` */

  --tusz:#142B47;         /* tekst na pomarańczowym przycisku: 6,11:1 na #FF8A3D */
  --akcja-hover:#FF9D5C;  /* hover przycisku głównego; tusz na nim 6,98:1 */
  --przycisk-min-h:48px;  /* cytat: pkobp-button--primary min-height:48px —
       nadal ponad minimum dotykowe WCAG 44px, więc bez regresji a11y */
  --przycisk-pad-y:13px;
  --przycisk-pad-x:28px;
  --przycisk-ease:cubic-bezier(.4,0,.2,1); /* cytat dosłowny z referencji:
       transition: background .3s cubic-bezier(.4,0,.2,1) */
}

/* PIĘĆ KOLORÓW RYSUNKÓW — ROZSTRZYGNIĘTE 07.10.2026 (runda 11): NIE, nie wchodzą
   tu jako zmienne. Pytanie wraca od trzech rund, więc odpowiedź zostaje w pliku,
   a nie w meldunku.

   Kolory: #E4EDFC, #A8C2E3, #FFE9D6, #D9E6F7, #F7FAFF (agent `ilustrator`).

   Powód jest mechaniczny, nie estetyczny. Ilustracje są osadzone jako
   `<img src="../assets/img/*.svg">`, czyli jako OSOBNE DOKUMENTY. Custom
   properties z tego arkusza nie przechodzą przez granicę dokumentu do SVG
   wczytanego przez <img> — zmienna byłaby nieosiągalna dla każdego z 21+
   rysunków. Sformalizowanie jej tutaj stworzyłoby pozór wspólnego źródła prawdy
   przy zerowym sprzężeniu: prawdziwym źródłem zostałby i tak `rysuj.py`,
   tylko teraz z drugą, cichą kopią w CSS, która może się z nim rozjechać
   bez żadnego sygnału.
   Drugi powód: trzy z pięciu (#A8C2E3, #D9E6F7, #F7FAFF) nie występują w tym
   arkuszu ANI RAZU (sprawdzone). Zmienna bez odbiorcy we własnym pliku to
   martwy kod, który następny agent musi najpierw udowodnić, zanim usunie.

   Właściwe miejsce na kanon kolorów rysunków: `output/ilustrator/rysuj.py` —
   tam jest jedno źródło i tam zmiana jest wykonalna.

   AKTUALIZACJA 10.10.2026 — kanon jest teraz SPRAWDZANY MASZYNOWO: lista
   `ODCIENIE_PRZYJETE` w `scripts/kontrola_ilustracji.py` (reguła W1), z rolą i źródłem
   każdego odcienia. Z arkusza do rysunków należą trzy tokeny, które JUŻ są zmiennymi
   i niczego tu nie dokładam: `--przygaszony` #42597F (tekst pomocniczy), `--ramka`
   #D7E1F0 (obrys delikatny), `--sekcja` #F5F7FA (tło pola wtórnego). Dwa ostatnie
   rysunki miały od początku (rysuj.py C_RAMKA / C_SEKCJA), tylko bramka ich nie znała.
   Nie przypinam zmiennych do #E4EDFC / #A8C2E3 / #FFE9D6 / #D9E6F7 / #F7FAFF:
   decyzja z 07.10 wyżej stoi (nie ma odbiorcy w CSS, a <img> i tak nie widzi zmiennych).
   ZMIANA TOKENU `--ramka` / `--sekcja` TUTAJ = zmiana kanonu rysunków: dopisz ją
   w bramce, bo rysunki są osobnymi dokumentami i same się nie zaktualizują.
   UWAGA na dublet między warstwami: tekst na granacie to w CSS #D7E1F0 (`--ramka`,
   6,34:1), a w rysunkach #D9E6F7 (6,61:1) — ΔE 2,1, okiem to jeden kolor; nie ruszam,
   bo oba stoją w przyjętych elementach. Nie wprowadzać trzeciego.

   ZMIERZONE, żeby ilustrator miał liczby zamiast wrażenia (kontrast --granat
   #264F80 na każdym z pięciu jako tle):
     #F7FAFF 7,99:1 · #FFE9D6 7,12:1 · #E4EDFC 7,09:1 · #D9E6F7 6,61:1
     #A8C2E3 4,57:1  <== najsłabszy, AA dla tekstu zwykłego z zapasem 0,07
   Wniosek dla rysunków: na #A8C2E3 NIE stawiać tekstu drobnego ani cieńszego
   niż 400 — przy 4,57:1 nie ma marginesu na żaden dalszy ruch. Pozostałe
   cztery są bezpieczne. Żaden z pięciu nie jest kolorem tekstu, tylko tłem
   i wypełnieniem — to dlatego nie podlegają progowi AA same z siebie. */

/* ============================================================
   2. PODSTAWY DOKUMENTU
   ============================================================ */
html,body{margin:0;padding:0}
body{
  background:var(--bialy);
  color:var(--granat);
  font:400 16px/1.65 var(--font-tekst); /* 1,65 — most między dawnym 1,7
       dryseo a rytmem referencji (ul referencji: 24px/16px=1,5). Długi
       tekst poradnikowy ma pierwszeństwo nad ścisłym cytatem liczby. */
  /* Pułapka #5: overflow-wrap na samych nagłówkach/komórkach nie
     wystarcza — jeden długi token w akapicie (adres, DOI, URL) rozpycha
     stronę. break-word, NIE anywhere: anywhere obniża min-content i psuje
     mechanizm przewijanych tabel (§8). */
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
/* Celowo BEZ max-height obok max-width: dwa niezależne ograniczenia na
   obrazie z object-fit:contain dają pudło większe od zdjęcia (pułapka
   znana z innego statyku). width/height z atrybutów HTML → UA liczy
   aspect-ratio automatycznie → CLS=0 bez dodatkowego CSS. Ta sama reguła
   (po klasie, patrz §7) obsługuje też SVG wklejony inline — wymóg 1. */

a{color:var(--granat);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--niebieski)}
strong,b{font-weight:600}

/* :focus-visible na WSZYSTKIM klikalnym — granat, NIE pomarańcz:
   pomarańcz na bieli = 2,35:1, poniżej progu 3:1 dla wskaźników fokusu
   (WCAG 1.4.11). Granat na bieli = 8,4:1. */
a:focus-visible,button:focus-visible,.przycisk:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--granat);
  outline-offset:3px;
}

.pomin{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--granat);color:#fff;padding:10px 16px;
  border-radius:0 0 var(--promien-mala) 0;
}
.pomin:focus-visible{left:0;outline-offset:-3px}

/* ============================================================
   3. UKŁAD STRONY
   ============================================================ */
/* Pułapka: <body> flex kolumnowy (stopka przyklejona do dołu) +
   margin-inline:auto na main wyłącza align-items:stretch → main mierzy
   się "pod zawartość", szerokość przestaje być znana z góry, a każdy %
   w środku liczy się od ruchomego punktu odniesienia. Tania polisa: nic
   nie psuje, gdy body nie jest flexem, naprawia, gdy jest. */
main{width:100%}

.uklad{
  width:90vw;
  max-width:var(--strona-max);
  margin-inline:auto;
}
@media(min-width:768px){
  .uklad{width:70vw}
}

.tresc{
  width:90vw;
  max-width:var(--tresc-max);
  margin-inline:auto;
}
@media(min-width:768px){
  .tresc{width:100%}
}

/* ============================================================
   4. NAGŁÓWKI
   H1 żyje WYŁĄCZNIE w .hero (§6) — tu H2–H6 treści artykułu.
   Skala H2–H4 Z REFERENCJI (cytat dosłowny, zmierzone w 0531b946a35434eb.css):
     .mce-content-body h1,h2{font-size:24px;line-height:32px} mobile,
       {font-size:48px;line-height:56px} od 1024px — w referencji H1 i H2
       WYSIWYG mają TĘ SAMĄ rangę, bo prawdziwy H1 strony żyje w osobnym
       hero poza edytorem treści — dokładnie jak w statyku2 (hero ≠ .tresc).
       Dlatego H2 artykułu przejmuje liczby referencyjnego "h1,h2".
     h3: mobile 20/24, desktop 32/40. h4: mobile 18/24, desktop 24/32.
   ============================================================ */
h2,h3,h4,h5,h6{
  margin:0 0 .5em;
  font-weight:600;
  color:var(--granat);
}
/* UWAGA: referencja i stary kit Elementora miewają text-transform na
   nagłówkach — to błąd ortograficzny w polskim tekście (nagłówki idą do
   Google). Świadomie NIE przenosimy żadnego text-transform na H2–H6. */

/* KOREKTA SKALI 05.10 (werdykt własny): przeniesienie 48/32/24 z referencji
   1:1 było błędem skali, nie wiernością. Referencja ustawia te liczby w
   kolumnie ~1000 px, a drySEO ma kolumnę 700 px (~80 znaków) — H2 w 48 px
   zajmował tam dwie linie i „krzyczał" nad 16-pikselowym tekstem. Nowa skala
   liczona od tekstu 16 px i kolumny 700 px, stosunek ~1,33 między stopniami:
     H2 32 (mobile 26) | H3 24 (mobile 21) | H4 20 (mobile 18) | H5 18 | H6 16
   Stopnie H2→H3→H4 nadal się rozróżniają (32:24:20 przy tej samej wadze 600),
   a hierarchię dopełnia odstęp nad nagłówkiem (niżej), nie sam rozmiar. */
h2{font-size:26px;line-height:1.25}
h3{font-size:21px;line-height:1.3}
h4{font-size:18px;line-height:1.35}
h5{font-size:17px;line-height:1.35}
h6{font-size:16px;line-height:1.3}
@media(min-width:1024px){
  h2{font-size:32px;line-height:1.2}
  h3{font-size:24px;line-height:1.3}
  h4{font-size:20px;line-height:1.35}
  h5{font-size:18px;line-height:1.35}
  h6{font-size:16px;line-height:1.3}
}
/* Nagłówki wielowierszowe wyrównują długość linii (brak jednosłowowych
   „sierot" w ostatniej linii); akapity unikają osieroconej ostatniej linii.
   Przeglądarki bez obsługi ignorują — czysty bonus, zero skutku ubocznego. */
h1,h2,h3,h4,h5,h6{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}

/* odstęp nagłówek→treść mniejszy niż treść→następny nagłówek — hierarchia
   długiego tekstu samą typografią, bez zdjęć. Odstęp NAD nagłówkiem rośnie
   z rangą: H2 otwiera sekcję (2em ≈ 64 px), H3/H4 tylko podsekcję. */
h2+*,h3+*,h4+*,h5+*,h6+*{margin-top:0}
h2,h3,h4,h5,h6{margin-top:1.6em}
h2{margin-top:2em;margin-bottom:.55em}
h4,h5,h6{margin-top:1.4em}
article>:first-child,.tresc>:first-child{margin-top:0}

/* ============================================================
   5. AKAPITY, LISTY
   Odstępy list Z REFERENCJI: li padding-bottom .5em (ul) / 8px≈.5em (ol);
   marker referencji szary neutralny #636363 — tu świadomie ZOSTAJE akcent
   marki (pomarańcz) na markerze, bo to tożsamość, nie system, i marker
   jest dekoracją bez własnego znaczenia (nie podlega progowi AA tekstu).
   ============================================================ */
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

ul,ol{margin:0 0 1.15em;padding-left:1.3em}
li{margin-bottom:.5em;line-height:1.65}
li:last-child{margin-bottom:0}
li>ul,li>ol{margin-top:.5em}
/* RUNDA KOREKTY 03.10: pomarańcz na KAŻDYM znaczniku listy (w tym numerach
   spisu treści) czytał się jak krzyk, nie akcent — user/konduktor: "ogranicz
   do świadomych miejsc". Rozróżnienie: kropka przy ul to klasyczny, mały
   akcent dekoracyjny (zostaje pomarańcz); cyfra przy ol niesie informację
   porządkową i w dużej liczbie (spis treści, kroki) robi się głośna —
   dostaje neutralny, ciemny ton. */
/* ZAKRES ZMIERZONY PIKSELEM 09.10 (_demo/marker-piksel.html + zrzuty-marker/):
   te dwie reguły są ŻYWE tylko dla list, którym §26/§27 nie zdejmuje znacznika:
   lista w hubie (`article > div.tresc > ul`, 4 strony), lista zagnieżdżona w li
   (1 strona), lista w odpowiedzi FAQ. Są MARTWE dla `article.tresc>ul/ol`
   (list-style:none w §26.5 — znacznikiem jest tam ::before) i dla list w pasmach
   po prozie (§26.7). Pomarańcz #FF8A3D i granat #264F80 widać na ekranie 1:1. */
ul li::marker{color:var(--pomaranczowy)}
ol li::marker{color:var(--granat);font-weight:600}

/* ============================================================
   6. HERO — sekcja H1, poza .tresc.
   RUNDA KOREKTY 03.10: user porównał z PKO i ocenił „serio?" — tokeny
   (promień/skala/cień) były przeniesione, ale KOMPOZYCJA nie: wersja 1
   była wyśrodkowanym dokumentem, referencja jest asymetrycznym układem
   produktowym (tekst od lewej + masa wizualna po prawej na każdym zrzucie:
   promocja, aplikacja mobilna, kalkulator). To jest EKSTRAPOLACJA systemu
   (referencja nie ma komponentu hero w dostarczonym CSS), ale kompozycja
   2-kolumnowa jest bezpośrednio podpatrzona ze zrzutów.
   Eyebrow (.hero__nad) nadal JEST cytatem CSS: referencja ma gotowy
   komponent `.pkobp-preheader{font-size:11px;letter-spacing:1.65px}`.
   ============================================================ */
.hero{
  padding-block:3em;
  background:linear-gradient(135deg,var(--sekcja-g1) 0%,var(--sekcja-g2) 65%);
  /* gradient zamiast płaskiego tła — na zrzutach PKO KAŻDA duża sekcja
     (hero, kalkulator) ma jasny, prawie niezauważalny gradient, nie płaski
     kolor; to jest jeden z sygnałów „zaprojektowanego produktu" wprost
     z porównania. */
}
@media(min-width:768px){.hero{padding-block:4.5em}}

.hero__wnetrze{
  display:grid;
  grid-template-columns:minmax(0,1fr); /* było 1fr = minmax(auto,1fr): szeroki
       obraz hero (1139 px własnej szerokości) mógł rozepchnąć jedyną kolumnę
       na telefonie; bramka N1/N2 zgłaszała to sporadycznie (zob. POSTEP) */
  grid-template-areas:"nad" "tytul" "lid" "akcje" "media";
  gap:.9em;
}
@media(min-width:900px){
  .hero__wnetrze{
    grid-template-columns:1fr 1fr;
    /* 05.10: dwa rzędy-rozpórki (1fr) nad i pod tekstem. Medium obejmuje
       wszystkie rzędy; gdy jest wyższe niż tekst (wykres w karcie, zdjęcie
       pionowe), nadwyżka wysokości trafia do rozpórek, a nie rozciąga
       odstępów między nadtytułem, H1, lidem i przyciskiem. Tekst zostaje
       zwarty i wycentrowany w pionie. Wcześniej wysokość medium rozkładała
       się równo na cztery rzędy tekstu. */
    grid-template-rows:1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".     media"
      "nad   media"
      "tytul media"
      "lid   media"
      "akcje media"
      ".     media";
    column-gap:3.5rem;
    row-gap:1em;
    align-items:center;
  }
}
/* Każdy z pięciu elementów to osobny grid item (bez dodatkowego wrappera —
   kontrakt nie przewiduje klasy „hero__tekst", więc kolumnę tekstową
   budują same nazwane obszary). Grid domyślnie ROZCIĄGA elementy na całą
   szerokość komórki (align-items/justify-items:stretch z definicji grida)
   — stąd TEN SAM błąd co przy flex+align-items:center (p.hero__nad/
   hero__akcje kurczyły się do treści, patrz commit poprzedni) tu się nie
   powtarza bez dodatkowych reguł. */
.hero__nad{grid-area:nad;margin:0}
.hero__tytul{grid-area:tytul;margin:0}
.hero__lid{grid-area:lid;margin:0}
.hero__akcje{grid-area:akcje;margin:.4em 0 0}
.hero__media{grid-area:media}

.hero__nad{
  font:700 13px/1.4 var(--font-tekst);
  letter-spacing:.14em; /* cytat: 1.65px przy 11px ≈ .15em — tu 13px/.14em,
       ten sam efekt wizualny przy nieco większej, czytelniejszej literze */
  text-transform:uppercase;
  color:var(--przygaszony); /* ZMIANA 03.10: było niebieski (4,57:1) —
       na zrzutach PKO eyebrow jest stonowany szary-granat, nie kolor linku;
       --przygaszony (7,08:1) czyta się jak etykieta, nie jak klikalny tekst */
}

.hero__tytul{ /* H1 strony — JEDYNE miejsce z H1 */
  font:600 32px/1.15 var(--font-tekst);
  color:var(--granat);
  /* ŚWIADOMIE bez max-width w ch na H1: przy stretch z grida element i tak
     wypełnia szerokość swojej kolumny, a wąski limit znaków przy dużej
     czcionce i małym ekranie mógłby zepchnąć realną szerokość bloku blisko
     progu bramki (280px), zależnie od metryki fontu zastępczego. */
}
@media(min-width:1024px){.hero__tytul{font-size:48px}}

.hero__lid{
  max-width:52ch; /* przy stretch z grida: gdy max-width mniejszy niż
       szerokość kolumny, element i tak zostaje przy lewej krawędzi (bez
       margin-inline:auto) — to tu jest POŻĄDANE: tekst od lewej, nie
       wyśrodkowany, zgodnie z kompozycją referencji */
  font:400 18px/1.55 var(--font-tekst);
  color:var(--przygaszony);
}
@media(min-width:768px){.hero__lid{font-size:20px}}

/* .hero__media — „masa wizualna" po prawej. User 03.10: nie mamy zdjęć
   produktowych jak PKO, ale MAMY wykresy SVG — dla laboratorium danych to
   jest tożsamość, nie proteza. Karta z delikatnym gradientem, duży promień
   (odpowiednik zaokrąglonej, kolorowej plamy za zdjęciem na zrzutach). */
.hero__media{
  padding:1.25em; /* RUNDA 14: było 1.75em; ramka karty zjadała 56 px z szerokości rysunku */
  background:linear-gradient(160deg,#FFFFFF 0%,var(--sekcja-g1) 55%,#E4EDFC 100%);
  border-radius:var(--promien-duza);
  box-shadow:var(--cien);
}
.hero__media svg,
.hero__media .figura-dane__rysunek{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
/* ZDJĘCIE W HERO — przepisane 10.10 (U6, werdykt oglądacza NIE).
   BYŁO (03.10): aspect-ratio 4/3 + object-fit:cover, żeby karta miała tę samą
   sylwetkę mimo źródeł 1:1, 3:2 i 2:3. Cel słuszny, środek zły: wszystkie trzy
   zdjęcia hero są kwadratami lub portretem Z WBITYM TEKSTEM I LOGIEM (koło
   „Leady dla adwokatów" w górnym pasie, logo drySEO w dolnym). Kadr 4:3 ścinał
   12,5% z góry i z dołu kwadratu — dokładnie te dwa pasy — a z portretu
   864×1184 jeszcze więcej (logo na laptopie, czoło). Zmierzone na zrzutach:
   „Leady" znikało w całości, na sem-seo „Lead".
   DIAGNOZA: to nie jest wada stylu ani klasyfikacji, tylko CELU. Źródła z
   wbitym napisem nie są fotografiami do kadrowania ani rysunkami wektorowymi
   — są grafikami rastrowymi, a grafiki się nie kadruje. Klasyfikacja po
   rozszerzeniu (svg/reszta) była poprawna dla swojego pytania; źle było
   założenie, że „webp = można ściąć".
   TERAZ: NIC SIĘ NIE KADRUJE. Cel pierwotny (równa sylwetka karty) osiągam
   inaczej: RÓWNA JEST WYSOKOŚĆ zdjęcia (`--hero-foto-wys`), a szerokość
   wynika z proporcji źródła (kwadrat 512 × 512, portret 374 × 512). Karta
   zwija się do zdjęcia (fit-content) — nie ma pustego pola w karcie ani
   „połowy" przy wąskiej fotografii.
   Wymiar liczony z `--proporcja` (w/h, wpisywane przez buduj.py z width/height
   obrazu — to zachowanie STRUKTURALNE, więc w znaczniku, nie w liście
   w arkuszu). Ograniczenie od szerokości kolumny robi `max-width:100%`, a
   wysokość liczy się z aspect-ratio (BEZ drugiego, niezależnego max-height —
   pułapka 4: dawałoby pudło większe od zdjęcia). CLS = 0: width/height z
   atrybutów dają aspect-ratio przed załadowaniem.
   Reguła ogólna (bez klasy) zostaje bezpieczna: obraz w naturalnej
   proporcji, na szerokość karty — bez kadrowania. Stary arkusz + nowy znacznik
   (stan pośredni CDN) wraca do dawnego kadru, nowy arkusz + stary znacznik
   nie ścina niczego. */
.hero__media img:not(.figura-dane__rysunek){
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--promien-mala);
  margin:0 auto;
}
.hero__media img.hero__foto{
  width:calc(var(--hero-foto-wys) * var(--proporcja,1));
  max-width:100%;
  aspect-ratio:var(--proporcja,1);
}
/* Karta ze zdjęciem zwija się do zdjęcia i stoi na środku swojej komórki. */
.hero__media:has(img.hero__foto){
  width:fit-content;
  max-width:100%;
  justify-self:center;
}

/* ---- 6b. HERO Z MEDIUM: SZEROKOŚĆ RYSUNKU (RUNDA 14, 09.10) ----
   Usterka H1 (zgłoszona przez ilustratora; pomiar jego narzędziem i moim):
   rysunek w hero miał 231 px przy oknie 900 i 301 px przy 1100 — napis w nim
   6,9 i 9,0 px. Zmierzone na 15 stronach z medium (wszystkie identyczne, bo
   wszystkie to ten sam układ): okno 1348 → 388 px, 1100 → 301, 1000 → 266,
   900 → 231, 768 → 482, 504 → 398. HERO BYŁO NAJWĘŻSZE NA DESKTOPIE, a
   najszersze na tablecie, gdzie stał jeden pod drugim — intuicja ilustratora
   potwierdzona pomiarem.
   Przyczyna to SKŁADANIE czterech rzeczy, nie jedna reguła:
     1. `.hero__wnetrze` jest `.uklad` = 70 vw (kolumna prozy), a §25.0 sam
        pisze, że „70vw jest za wąskie na siatki kart i hero" — pasma dostały
        92 vw, hero nie (nie ma `.uklad--szeroki` w znaczniku). Lewa krawędź
        tekstu hero (x=205 przy 1366) była czwartą osią strony, obok 55 (pasma,
        nagłówek) i 333 (proza),
     2. dwie równe kolumny `1fr 1fr` z odstępem 3,5 rem już od 900 px,
     3. padding karty 1,75 em z każdej strony (−56 px),
     4. proporcja: tekst H1 i rysunek dostawały po tyle samo.
   Co robię (wszystko po `:has(.hero__media)`, więc hero BEZ medium — 63 strony —
   nie drgnie; bez `:has()` zostaje stan sprzed rundy):
     a. kontener hero z medium: 92 vw jak pasma i nagłówek (od 768 px),
     b. dwie kolumny dopiero od 1100 px, w proporcji 5 : 6 (tekst : rysunek),
     c. 768–1099 px: jedna kolumna, rysunek do 34 rem (544 px) przy lewej osi
        tekstu — pełne 828 px byłoby kartą 580 px wysokości,
     d. padding karty 1,25 em.
   Wynik zmierzony (px rysunku, nie karty): 1348 → 606, 1100 → 481,5,
   1099/1000/900/768 → 504 (34 rem − padding), 504 → 437,6 (padding telefonu
   .5em), 390 → 335, 320 → 272. Próg 14 px dla napisu 36-jednostkowego
   w viewBox 1200 to 467 px — spełniony od 768 w górę; na telefonie szerokość
   rysunku to szerokość kolumny minus 16 px i nic jej nie powiększy (przy 504:
   13,1 px; przy 390: 10,1 px) — to granica rysunku, nie arkusza.
   CENA (nazwana wprost): hero z medium jest o 33–143 px wyższe przy ≥1100
   i ~2× wyższe w paśmie 900–1099 (stoi jak dotąd przy 768, rysunek pod tekstem). */
@media(min-width:768px){
  .hero__wnetrze:has(.hero__media){width:92vw}
}
/* 10.10 (werdykt ogladacza U1, NAWRÓT „pustej połowy"): zniesione
   `max-width:34rem` na karcie. Reguła działała od zera w górę, a wariant
   jednokolumnowy kończy się dopiero przy 1100 px, więc w całym paśmie
   768–1099 karta stała przy lewej (544 px w kolumnie 738+ px) i zostawiała
   200–470 px martwego pola. Diagnoza oglądacza potwierdzona; pasmo usterki
   jest szersze niż podał (do 1099, nie 899). Powód nawrotu: dwa warianty hero
   (bez medium — 05.10; z medium) miały każdy własny próg. Teraz karta w
   JEDNEJ kolumnie zawsze wypełnia kolumnę (jedna reguła, zero progów), a o jej
   szerokości decyduje wyłącznie liczba kolumn grida. CENA: karta wyższa przy
   900–1099 (pełna kolumna 92 vw). */
/* 10.10 (U6 + U1-reszta, jedno rozstrzygnięcie): limit 44 rem dla karty ze
   zdjęciem USUNIĘTY. Zdjęcie ma teraz stałą wysokość (`--hero-foto-wys`) i karta
   zwija się do niego, więc nie ma czego limitować; „pusta połowa" przy zdjęciu
   (299 px martwego pola przy 1090) znikła z przyczyny, nie z limitu. */
/* 10.10, KOMPROMIS ŚWIADOMY (nie wracaj do `none`): rysunek w jednej kolumnie
   ma limit 52 rem (832 px). Wyprowadzenie: bez limitu karta miała ~976 px przy
   oknie 1060, diagram ~900 px wysokości — pierwszy ekran kończył się w środku
   diagramu, a hero jest elementem LCP (największy obraz strony, ładowany z
   najwyższym priorytetem, niewidoczny w całości). 52 rem daje diagram ~624 px
   wysokości: wciąż o połowę większy niż 544 px sprzed naprawy U1 (cel: czytelne
   napisy w rysunku), a hero mieści się na ekranie. Tak jak u fotografii —
   jedna klasa `.figura-dane__rysunek` rozróżnia oba przypadki. */
/* 11.10 (usterka 2): 52 rem → 40 rem + WYŚRODKOWANIE. Ogląd przy 1000 px: karta
   832 px, rysunek ~790 px wobec 606 px przy 1366 — hero 1020+ px, etykiety w
   rysunku (~24 px) głośniejsze niż H1 (32 px). Czyli kompromis z 10.10 był za
   luźny w górę. Dlaczego NIE wracam do `34rem` przy lewej osi: zdjęto go, bo przy
   lewej krawędzi karta zostawiała 200–470 px martwego pola z PRAWEJ strony
   (U1, „pusta połowa") — ten powód nadal obowiązuje, więc rozwiązuję go inaczej:
   karta 40 rem (640 px, rysunek ~600 px, etykiety ~18 px = jak przy 1366) stoi
   NA ŚRODKU kolumny, nadwyżka dzieli się po równo na obie strony (90–180 px zamiast
   jednej płachty). Wartość z pomiaru: 600 px rysunku = 606 px przy 1366, czyli ta
   sama wielkość etykiet w całym zakresie ≥ 768 px; poniżej 40 rem (okno < ~720)
   limit nie wiąże i karta wypełnia kolumnę jak dotąd. CENA: hero w paśmie 900–1099
   nadal wyższe niż dwukolumnowe (jedna kolumna), ale o ok. 190 px niższe niż przy
   52 rem. */
@media(max-width:1099.98px){
  .hero__media:has(svg,.figura-dane__rysunek){max-width:40rem;justify-self:center;width:100%}
}
/* Hierarchia: H1 hero z medium od 768 px 40 px (było 32 do 1023). Bez tego rysunek
   z etykietami 18 px stoi obok H1 32 px; przy 40/18 H1 znów dominuje. Hero bez
   medium ma własny rozmiar (§6a) i nie jest ruszane. */
@media(min-width:768px) and (max-width:1023.98px){
  .hero__wnetrze:has(.hero__media) .hero__tytul{font-size:40px}
}
/* Telefon: kolumna to 90 vw i nic jej nie powiększy, więc karta oddaje rysunkowi
   każdy piksel, który może (przy 504: 453,6 − 16 = 437,6 px rysunku zamiast 413,6). */
@media(max-width:767.98px){.hero__media{padding:.5em}}
@media(min-width:900px) and (max-width:1099.98px){
  /* Jedna kolumna dotyczy RYSUNKU (napisy w SVG wymagają szerokości). Hero ze
     ZDJĘCIEM (img.hero__foto) zostaje w dwóch kolumnach już od 900 — zdjęcie ma
     stałą wysokość i nie potrzebuje szerokiej kolumny, a w jednej kolumnie
     stałoby wąskie na tle 900-pikselowej pustki. */
  .hero__wnetrze:has(.hero__media):not(:has(img.hero__foto)){
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;
    grid-template-areas:"nad" "tytul" "lid" "akcje" "media";
    column-gap:0;
    row-gap:.9em;
    align-items:stretch;
  }
}
@media(min-width:1100px){
  .hero__wnetrze:has(.hero__media){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
@media(min-width:900px){
  .hero__wnetrze:has(img.hero__foto){grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
/* RUNDA 18 (11.10): H1 w TRZECH liniach po jednym słowie, PL przy 1100 px
   („SEO / Pozycjonowanie / Stron"). Arytmetyka, nie gust: kolumna tekstu to
   (0,92 W − 3,5 rem) × 5/11 = 434 px przy 1100, a „SEO Pozycjonowanie" w 48 px
   (Poppins 600) ma ~9,3 em = 448 px — o 14 px za dużo, więc łamie po pierwszym
   słowie. Kolumny zostają (rysunek potrzebuje ≥467 px, §6b), zmniejszam H1: 44 px
   daje 410 px, mieści się i `text-wrap:balance` robi z tego dwie linie. Od 1200 px
   kolumna ma 476+ px i 48 px wraca. Dotyczy hero z medium (tylko tam kolumna jest
   wąska); hero bez medium ma szeroką kolumnę 46 rem. */
@media(min-width:1100px) and (max-width:1199.98px){
  .hero__wnetrze:has(.hero__media) .hero__tytul{font-size:44px}
}

/* ---- 6a. HERO BEZ MEDIUM (05.10, werdykt własny: „pusta połowa") ----
   71 z 78 stron nie ma w hero ani zdjęcia, ani wykresu. Układ dwukolumnowy z
   pustą prawą połową wyglądał jak usterka (tekst przyklejony do lewej,
   puste pole obok). Wariant bez medium to INNA kompozycja, nie ta sama z
   brakującym elementem: tekst wyśrodkowany w jednej kolumnie ~46 rem,
   nadtytuł jako pigułka (kotwica wzrokowa zamiast pustego rogu), tło z dwiema
   miękkimi poświatami marki (niebieska z lewej góry, pomarańczowa z prawego
   dołu) — sygnał sekcji budowany kolorem i typografią, nie obrazem. Cały
   wariant to CSS po `:not(:has(.hero__media))` — markup bez zmian; w
   przeglądarce bez :has() (sprzed 2023) zostaje poprzedni układ lewostronny,
   czyli degradacja, nie awaria. Hero Z medium (6 stron) działa jak dotąd. */
.hero:not(:has(.hero__media)){
  padding-block:2.75em;
  background:
    radial-gradient(55% 100% at 6% 0%,rgba(52,120,192,.12) 0%,rgba(52,120,192,0) 70%),
    radial-gradient(50% 90% at 96% 100%,rgba(255,138,61,.15) 0%,rgba(255,138,61,0) 70%),
    linear-gradient(180deg,var(--sekcja-g1) 0%,var(--bialy) 100%);
  border-bottom:1px solid var(--ramka);
}
@media(min-width:768px){.hero:not(:has(.hero__media)){padding-block:3.75em}}
.hero:not(:has(.hero__media)) .hero__wnetrze{
  grid-template-columns:minmax(0,46rem);
  grid-template-rows:none;
  grid-template-areas:"nad" "tytul" "lid" "akcje";
  justify-content:center;
  row-gap:.9em;
  text-align:center;
}
/* Nadtytuł: tekst między dwiema krótkimi pomarańczowymi kreskami. Pierwsza
   wersja była pigułką (justify-self:center → <p> kurczył się do 176–217 px) i
   bramka N3 słusznie zgłosiła 60 stron: blok tekstu węższy niż 280 px. Tu <p>
   zostaje rozciągnięty na całą kolumnę (flex), a „kotwicę" robią kreski. */
.hero:not(:has(.hero__media)) .hero__nad{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9em;
  color:var(--granat); /* 8,4:1 na bieli */
}
.hero:not(:has(.hero__media)) .hero__nad::before,
.hero:not(:has(.hero__media)) .hero__nad::after{
  content:"";
  flex:0 0 28px;
  height:3px;
  border-radius:2px;
  background:var(--pomaranczowy); /* dekoracja, nie tekst — próg AA nie dotyczy */
}
.hero:not(:has(.hero__media)) .hero__tytul{font-size:32px}
@media(min-width:1024px){
  .hero:not(:has(.hero__media)) .hero__tytul{font-size:44px;line-height:1.14}
}
.hero:not(:has(.hero__media)) .hero__lid{margin-inline:auto;text-wrap:balance} /* bez osieroconego „w SEO." */
.hero:not(:has(.hero__media)) .hero__akcje{justify-content:center;margin-top:.6em}

/* ============================================================
   7. OBRAZY, FIGURY
   ============================================================ */
figure{margin:1.75em 0}
figcaption{
  font:400 14px/1.5 var(--font-tekst);
  color:var(--przygaszony); /* było opacity:.75 na granacie (≈4,38:1,
       POD progiem AA) — teraz stały ton 7,08:1, patrz §1 */
  margin-top:.5em;
}

/* LEWA KRAWĘDŹ — KOMPENSACJA ZDJĘTA 11.10 WIECZOREM, RAZEM Z PODMIANĄ ZNAKU.
   Reguła wyżej przesuwała obraz w lewo o ujemny margines, bo stary `dryseo-logo.webp`
   miał pusty pas po bokach i znak zaczynał się dopiero w ~x=51 z 350 px. Komentarz
   tamtej reguły zapowiadał wprost: „gdyby logo dostało przycięty plik, ten przesuw
   trzeba zdjąć razem z podmianą" — i właśnie to się stało.
   ⚠️ PRZY OKAZJI SPROSTOWANIE POMIARU: margines NIE był przezroczysty (plik był RGB,
   bez kanału alfa — był BIAŁY) i NIE był tylko z lewej, tylko SYMETRYCZNY, po 51 px
   z obu stron, czyli 29% szerokości pliku. Kompensowany był wyłącznie lewy; prawy
   został niewidzialną przerwą za znakiem i nikt go nie zauważył.
   Nowy plik jest wektorem przyciętym do tuszu, więc żadnego przesuwu nie potrzeba.
   `max-width:none` ZOSTAJE — pilnuje, żeby `img{max-width:100%}` nie ściskało znaku
   w `.marka` (zmierzone na pierwszej wersji tamtej reguły: 115 px zamiast 181). */
.logo{--logo-h:36px;height:var(--logo-h);width:auto;display:block;max-width:none}
@media(min-width:768px){.logo{--logo-h:44px}}

/* ============================================================
   8. TABELE — mechanizm przewijania to JEDNA reguła, nic więcej.
   Świadomie BEZ zaokrąglonych rogów/cienia na .tabela (referencja ma taki
   efekt na swoich tabelach — `border-radius:10px` + box-shadow-jako-
   -obwódka), bo wymaga clipowania tego samego kontenera, który
   jednocześnie przewija w poziomie (overflow-x:auto). To DOKŁADNIE ten
   rodzaj "drugiego ulepszenia" ostrzeżony w doktrynie — dwa zachowania na
   jednym overflow potrafią się wykluczać w sposób, którego nie zweryfikuję
   bez przeglądarki pod ręką. ODRZUCONE świadomie, patrz NOTATKA.
   ============================================================ */
.tabela{
  margin:1.75rem 0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  max-width:100%;
}
table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* cytat: referencja ".pkobp-table table{table-layout:fixed}".
       Bez tego auto-layout rozdziela szerokość kolumn wg treści — kolumna
       z krótkimi etykietami w jednym rzędzie dostaje za mało miejsca,
       nawet gdy cała tabela ma dość szerokości (zmierzone na demo.html:
       auto-layout dawał komórki do 149px mimo 700px tabeli). Fixed +
       zawijanie tekstu (zamiast nowrap, patrz niżej) trzyma każdą kolumnę
       w przewidywalnej szerokości niezależnie od długości treści. */
  font-size:15px;
  line-height:1.5;
}
th:first-child,td:first-child{width:42%} /* domyślny podział dla typowej
     tabeli 2-kolumnowej etykieta/opis: 42% daje ≥280px już od szerokości
     kolumny .tresc 700px (294px), drugiej kolumnie zostaje 58%. Przy
     więcej niż 2 kolumnach pozostała szerokość dzieli się równo między
     kolumny bez jawnej szerokości — zachowanie standardowe table-layout:fixed. */
/* UWAGA: nigdy display:block na <table> — zdejmuje rolę tabeli w
   czytnikach ekranu; rolę "co się przewija" pełni WYŁĄCZNIE .tabela. */
caption{
  text-align:left;
  font:600 15px var(--font-tekst);
  color:var(--granat);
  margin-bottom:.5em;
}
th,td{
  padding:.75em 1em; /* bliżej gęstości referencji (17px/15px) niż starej
       wartości .6em/.9em — więcej światła w komórce, łatwiej czytać */
  border:1px solid var(--ramka);
  text-align:left; /* ŚWIADOMA różnica wobec referencji (center) — jej
       tabele są krótkie, liczbowe; tabele dryseo mieszają tekst i liczby,
       left czyta się szybciej w takim przypadku */
  vertical-align:top;
}
thead th{
  background:var(--sekcja);
  font-weight:700; /* cytat: thead th/td referencji font-weight:700 */
}
/* UWAGA (zmiana wobec poprzedniego arkusza statyku): BEZ white-space:nowrap
   na nagłówkach. Nagłówek, który nie może się złamać, wymusza intrinsic
   min-width tabeli ponad szerokość kolumny .tresc — tabela wtedy wystaje
   poza prawą krawędź OKNA (nie tylko .tabela), bo bramka mierzy geometrię
   względem viewportu, nie względem nadrzędnego kontenera przewijania.
   Zmierzone na demo.html: z nowrap bramka zgłaszała N2 na table (prawa
   >700–800px) przy 768/390px. Nagłówek łamiący się do dwóch linii jest
   tańszy niż tabela wystająca poza okno. */
tbody tr:nth-child(even){background:var(--sekcja)}

/* RUNDA 7 (05.10) — OWIJKA .tabela-obw MIAŁA ZERO REGUŁ. Builder owija każdą
   tabelę w <div class="tabela-obw" role="region" tabindex="0">, a arkusz znał
   tylko `.tabela` (klasę samej <table>, na której overflow nic nie robi).
   Czyli mechanizm z pułapki nr 1 istniał w markupie, a w CSS go nie było.
   Teraz jest: jedna linia przewijania na owijce (margin / overflow-x /
   overscroll / max-width) + wygląd. ŚWIADOMIE nie ma: ujemnych marginesów
   ani przyklejonej pierwszej kolumny (te dwa wycofane po 4 rundach — przyklejona
   kolumna zasłaniała ostatnią przy pełnym przewinięciu).
   RUNDA 17 (10.10) — ZMIANA DECYZJI w dwóch punktach, z dowodem ze zrzutów
   ogladacza: (1) „ani min-width" było słuszne, zanim komórki urosły o
   mianowniki i opisy; od tamtej pory tabela 4-kolumnowa przy 504 px mieściła
   się w owijce DUSZĄC SIĘ (nagłówek w 7 wierszach, komórka w 11, wiersz 250 px
   na jedną liczbę), czyli owijka istniała i nigdy nie przewijała. Teraz tabela
   ma szerokość minimalną (niżej) i przewija. (2) „ani cieni" — tu cień NIE jest
   osobnym mechanizmem: to tylko tło owijki (`background-attachment:local`),
   zero elementów, zero marginesów, zero wpływu na zakres przewijania. Gdy
   przeglądarka go nie obsłuży, zostaje stan sprzed rundy 17 (bez zapowiedzi).
   Obwódka i promień siedzą na tej samej owijce, która przewija — to zwykłe
   przycinanie do zaokrąglonego prostokąta, nie osobny mechanizm; sprawdzone
   renderem, NIE sprawdzone dotykiem na urządzeniu (patrz DECYZJE). */
.tabela-obw{
  margin:2em 0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  max-width:100%;
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--bialy);
  box-shadow:var(--cien);
}
.tabela-obw>table,.tabela-obw>.tabela{margin:0;overflow:visible}
.tabela-obw th,.tabela-obw td{
  padding:.85em 1.1em;
  border:0;
  border-top:1px solid var(--ramka);
}
.tabela-obw thead th{
  border-top:0;
  background:var(--sekcja-g1);
  font:700 13px/1.4 var(--font-tekst);
  letter-spacing:.02em;
  color:var(--granat);
  vertical-align:bottom;
}
.tabela-obw tbody tr:nth-child(even){background:none} /* linie zamiast pasków: spokojniej */
.tabela-obw tbody tr:first-child td{border-top:0}
.tabela-obw tbody td:first-child{font-weight:600} /* kolumna etykiet */
/* USTERKA ZNALEZIONA PRZY OKAZJI (pl/generowanie-leadow/wskazniki/): reguła
   „pierwsza kolumna 42 %" + table-layout:fixed jest policzona na tabelę
   2-kolumnową etykieta/opis. W tabeli 5-kolumnowej z indeksem „1…10" w
   pierwszej kolumnie numerek dostawał 42 % szerokości, a cztery kolumny z
   treścią dzieliły resztę i łamały się w środku słów („zamówien/ie",
   „parametr/u"). Od trzech kolumn wzwyż: układ automatyczny, bez udziału
   procentowego — kolumny dostają tyle, ile potrzebuje najdłuższe słowo. Gdy
   suma i tak nie mieści się w kolumnie, przewija owijka (jedyny mechanizm). */
.tabela-obw table:has(thead th:nth-child(3)){table-layout:auto}
.tabela-obw table:has(thead th:nth-child(3)) th:first-child,
.tabela-obw table:has(thead th:nth-child(3)) td:first-child{width:auto}

/* RUNDA 17 — SZEROKOŚĆ MINIMALNA: tabela, która się nie mieści, ma się
   PRZEWIJAĆ, nie dusić. Wartości liczone z kolumny .tresc (700 px, owijka
   ~698 px wewnątrz): 40rem = 640 px < 698, więc na desktopie nic się nie
   zmienia (tabela dalej na 100 %), a od ~690 px okna w dół owijka przewija.
   Trzy kolumny: 32rem (512 px) — mniej, bo kolumn mniej. Dwie kolumny: bez
   zmian (fixed 42/58, mieszczą się). Świadomie NIE więcej niż 40rem: powyżej
   698 px tabela przewijałaby się także na desktopie, gdzie dziś nie musi.
   Działa niezależnie od treści komórek — to reguła o liczbie kolumn, nie o
   słowach, więc nie zależy od tego, czy redaktor wyjmie mianowniki. */
.tabela-obw table:has(thead th:nth-child(3)){min-width:32rem}
.tabela-obw table:has(thead th:nth-child(4)){min-width:40rem}
/* Pięć kolumn i więcej, TYLKO na wąskim ekranie: 40rem dawało kolumnie
   z opisem ~130 px (komórka w 11 wierszach). Na desktopie 698 px musi
   wystarczyć (powyżej tabela przewijałaby się także tam), więc ta wartość
   żyje w media query i nie dotyka szerokich ekranów. */
@media(max-width:740px){
  .tabela-obw table:has(thead th:nth-child(5)){min-width:52rem}
}

/* RUNDA 18 (11.10) — TABELA 4-KOLUMNOWA NA TELEFONIE GUBIŁA CZWARTĄ KOLUMNĘ BEZ ŚLADU.
   Zrzut oglądacza przy 504 px: widać kolumny 1–2 i trzecią UCIĘTĄ w pół wyrazu na
   krawędzi karty; czwartej nie ma, a nic nie mówi, że jest. Przyczyna w kodzie to nie
   brak przewijania (owijka przewija, tabela ma min-width 40 rem = 640 px przy owijce
   ~451 px), tylko DWIE rzeczy naraz: (1) granica widoku wypadała w środku trzeciej
   kolumny, więc ucięcie wyglądało na błąd renderu, a nie na zaproszenie; (2) zapowiedź
   (cień z rundy 17) miała 0,9 rem i krycie .28 — na zrzucie to ledwie szary pasek.
   Co robię, NIE ruszając mechanizmu przewijania (jedna owijka, zero marginesów, zero
   przyklejonych kolumn):
     a. poniżej 640 px tabela 4-kolumnowa jest węższa (34 rem = 544 px, komórki 13 px /
        .65 em), więc trzy kolumny mieszczą się CAŁE, a czwarta wystaje ~100 px — ucięcie
        przechodzi z środka wyrazu na granicę kolumn, czyli czytelnik widzi „jest dalej";
     b. cień krawędzi mocniejszy (.28 → .42) i szerszy (.9 → 1.4 rem);
     c. widoczny, cienki pasek przewijania (scrollbar-width/color) — na komputerze stoi
        cały czas, na telefonach z paskiem nakładkowym znika po chwili (ograniczenie
        platformy; dlatego a. i b. niosą główny sygnał, nie c.).
   NIE SPRAWDZONE: dotykiem na prawdziwym telefonie, i tego, czy pasek nakładkowy
   Androida/iOS się pojawia — renderer przyrządu ma `--hide-scrollbars`. Przebudowa na
   karty (komórka = „etykieta: wartość") wymaga atrybutu data-label w KAŻDEJ <td>, czyli
   zmiany markupu — rekomendacja w meldunku, nie wykonana. */
@media(max-width:639.98px){
  .tabela-obw table:has(thead th:nth-child(4)):not(:has(thead th:nth-child(5))){min-width:34rem} /* 5+ kolumn: zostaje 52 rem z reguły wyżej */
  .tabela-obw th,.tabela-obw td{padding:.75em .8em}
  .tabela-obw td{font-size:14px}
}
.tabela-obw{scrollbar-width:thin;scrollbar-color:var(--przygaszony) var(--sekcja-g1)}

/* ZAPOWIEDŹ PRZEWIJANIA — cień na krawędzi, która ma jeszcze treść za sobą.
   Klasyczny wzór z dwóch warstw tła na TEJ SAMEJ owijce: białe „zasłony"
   przyklejone do treści (local) kryją cień, gdy owijka stoi na krawędzi,
   a cienie przyklejone do owijki (scroll) świecą, gdy za krawędzią coś jest.
   Zero JS, zero elementów, zero marginesów — rozmiar i zakres przewijania
   nietknięte. Cień rysuje się pod komórkami: nagłówek ma pełne tło, więc
   widać go w korpusie tabeli, nie w pasku nagłówka (patrz DECYZJE). */
.tabela-obw{
  background:
    linear-gradient(to right,var(--bialy) 30%,rgba(255,255,255,0)) 0 0/2.5rem 100% local no-repeat,
    linear-gradient(to left,var(--bialy) 30%,rgba(255,255,255,0)) 100% 0/2.5rem 100% local no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(38,79,128,.42),rgba(38,79,128,0)) 0 0/1.4rem 100% scroll no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(38,79,128,.42),rgba(38,79,128,0)) 100% 0/1.4rem 100% scroll no-repeat,
    var(--bialy);
}

/* ============================================================
   9. PRZYCISKI — kształt Z REFERENCJI (promień, wysokość, krzywa
   przejścia), ZACHOWANE zachowanie: DECYZJA UŻYTKOWNIKA 20.09 "zawsze
   miałem przezroczyste i ramkę" — to wybór o marce dryseo, nie artefakt
   pomiaru kitu, więc przeżywa zmianę wyglądu.
   ============================================================ */
.przycisk,
button.przycisk,
a.przycisk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--przycisk-min-h);
  padding:var(--przycisk-pad-y) var(--przycisk-pad-x);
  font:600 15px/1.2 var(--font-tekst);
  color:var(--granat);
  background:transparent;
  border:2px solid var(--granat);
  border-radius:var(--promien-mala);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s var(--przycisk-ease),
             color .2s var(--przycisk-ease),
             box-shadow .2s var(--przycisk-ease);
}
.przycisk:hover,
.przycisk:focus-visible{
  background:var(--granat);
  color:var(--bialy); /* biały na granacie = 8,4:1, AA w obu stanach */
  box-shadow:var(--cien-mocny); /* NOWE: uniesienie przy hover — wzorowane
       na cieniu referencyjnego dropdownu (ton marki, niska krycie) */
}
@media(prefers-reduced-motion:reduce){
  .przycisk{transition:none}
}

/* .przycisk--glowny — RUNDA KOREKTY 03.10, ZMIANA DECYZJI Z 20.09.
   Poprzednia decyzja usera (20.09): "zawsze miałem przezroczyste i ramkę".
   Nowsza decyzja (03.10, o referencji PKO): "chciałbym aby nowe dryseo tak
   wyglądało" — a na KAŻDYM z pięciu zrzutów główny CTA jest WYPEŁNIONY, nie
   konturowy. Konduktor rozstrzygnął: `.przycisk` (bez modyfikatora) zostaje
   konturowy jak dotąd (główne akcje poboczne, linki w treści), nowy
   `.przycisk--glowny` jest wypełniony — do najważniejszego wezwania na
   stronie (hero, CTA). TO JEST ZMIANA TOŻSAMOŚCI, NIE TYLKO WYGLĄDU —
   user dostaje to do weta, patrz NOTATKA. */
.przycisk--glowny,
a.przycisk--glowny,
button.przycisk--glowny{
  /* Selektor zdublowany celowo (sam .przycisk--glowny ORAZ a./button.-
     kwalifikowane): bazowa reguła wyżej to `a.przycisk{background:
     transparent}` o specyficzności (0,1,1). Sam `.przycisk--glowny` ma
     (0,1,0) — PRZEGRAŁBY z `a.przycisk` mimo późniejszej pozycji w pliku
     (zmierzone: guzik renderował się konturowo mimo klasy --glowny).
     Dopasowanie specyficzności w górę naprawia kolejność kaskady. */
  /* RUNDA 11.10 (zgłoszenie: „CTA wyglądają mało zachęcająco") — DWA POZIOMY AKCJI.
     Diagnoza zmierzona: wszystkie przyciski w markupie mają TĘ SAMĄ klasę
     `przycisk przycisk--glowny` (hero, nagłówek, treść, stopka, formularz), więc
     poziom wynika z KONTEKSTU, nie z klasy. Granatowy wypełniony przycisk w treści
     miał kolor nagłówków H2 (8,36:1 na bieli — czytelny, ale nie odróżnialny od treści),
     a pomarańcz marki nie występował w interfejsie wcale.
     POZIOM 1 (główny) — tu, w bazie: wypełnienie pomarańczem marki #FF8A3D,
       tekst TUSZ #142B47. BIAŁY NA POMARAŃCZU = 2,35:1 (odpada); granat #264F80 na
       pomarańczu = 3,56:1 (odpada); #1F4269 = 4,39:1 (odpada); tusz #142B47 = 6,11:1 (AA).
       Hover: jaśniejszy pomarańcz #FF9D5C, tusz na nim 6,98:1. Większy (56 px, 17 px).
       Dotyczy: hero, przyciski w treści, formularz poza .cta (gdzie jest biały obrys).
     POZIOM 2 (poboczny/stały) — nagłówek i stopka: granat wypełniony jak dotąd
       (biały na #264F80 8,36:1; hover biały na #1F4269 10,29:1), mniejszy.
     Kontur `.przycisk` bez modyfikatora zostaje trzecim, najcichszym stopniem. */
  background:var(--pomaranczowy);
  border-color:var(--pomaranczowy);
  color:var(--tusz); /* 6,11:1 na #FF8A3D */
  min-height:56px;
  padding:16px 36px;
  font-size:17px;
}
.przycisk--glowny:hover,
.przycisk--glowny:focus-visible,
a.przycisk--glowny:hover,
a.przycisk--glowny:focus-visible{
  background:var(--akcja-hover);
  border-color:var(--akcja-hover);
  color:var(--tusz); /* 6,98:1 na #FF9D5C */
  box-shadow:var(--cien-mocny);
}
a.przycisk--glowny:active,button.przycisk--glowny:active{
  background:var(--pomaranczowy);border-color:var(--pomaranczowy);
  box-shadow:none;transform:translateY(1px); /* „wciśnięcie" — zapowiedź kliknięcia */
}
/* Poziom 2: nagłówek i stopka — granat, jak przed rundą (specyficzność (0,2,1)
   bije bazowe a.przycisk--glowny (0,1,1); rozmiar nagłówka zostaje z
   `.naglowek .przycisk` §10 — pasmo 640–1279 px nietknięte). */
.naglowek a.przycisk--glowny,
.stopka a.przycisk--glowny{
  background:var(--granat);border-color:var(--granat);color:var(--bialy);
}
.naglowek a.przycisk--glowny:hover,.naglowek a.przycisk--glowny:focus-visible,
.stopka a.przycisk--glowny:hover,.stopka a.przycisk--glowny:focus-visible{
  background:var(--granat-ciemny);border-color:var(--granat-ciemny);color:var(--bialy);
  box-shadow:var(--cien-mocny);
}
.stopka a.przycisk--glowny{min-height:var(--przycisk-min-h);padding:var(--przycisk-pad-y) var(--przycisk-pad-x);font-size:15px}
/* Przycisk sam w akapicie treści (`<p><a class="przycisk…">`): zakotwiczony na
   osi strony zamiast wisieć przy lewej krawędzi pod szeroką siatką. :has() jest
   już używany w arkuszu (tabele); bez :has() przycisk po prostu zostaje z lewej. */
/* RUNDA 18c (11.10) — U6 COFNIĘTE, i to nie samym cofnięciem. Werdykt usera: przyciski
   „przypięte do lewej, bez pomysłu wklejone, jakby ze starej wersji". Diagnoza z 18b
   (niespójność wyrównania) była zła: lewy przycisk w kolumnie prozy czytał się jak
   doklejony link. Teraz: (1) ŚRODEK kolumny — ta sama oś co wyśrodkowane nagłówki pasm
   i środek strony, więc przycisk po paśmie siatki i przycisk w środku prozy stoją w TYM
   SAMYM miejscu (x = środek okna); dwa „miejsca" z oglądu to był skutek lewego
   wyrównania z 18b (przycisk na x=333 pod siatką od x=55), nie dwa komponenty;
   (2) własne miejsce zamiast odstępu akapitowego: asymetryczny margines, więcej NAD
   (2,75 rem) niż POD (2,25 rem) — przycisk zamyka to, co nad nim, a nie otwiera to, co
   pod nim. Nic poza odstępem: bez linii i tła (ozdobnik, którego nie umiem sprawdzić na
   telefonie, jest długiem). Selektor obejmuje każdy `.przycisk` sam w akapicie, nie
   tylko `--glowny`, żeby cichy przycisk (sam obrys) stał tam samo. */
.tresc p:has(> a.przycisk--glowny:only-child),
.tresc p:has(> a.przycisk:only-child){
  text-align:center;margin-block:2.75rem 2.25rem;
}

/* wariant na kolorowym tle (.cta, §13) — WYJĄTEK KONTRASTU, nie zmiana
   znaczenia klasy: domyślny .przycisk (granat na białym) byłby niewidoczny
   na granatowym tle CTA. Biały tekst/ramka na granacie = 8,4:1 (jak wyżej),
   wypełnienie białe + granat tekst na hover = też 8,4:1. Dotyczy obu
   wariantów (.przycisk i .przycisk--glowny) — na granatowym tle oba muszą
   wyglądać tak samo (odwrotnie niż na bieli), inaczej user zobaczy
   niewidoczny guzik. */
.cta .przycisk,.cta .przycisk--glowny{
  background:transparent;border-color:#fff;color:#fff;
}
.cta .przycisk:hover,.cta .przycisk:focus-visible,
.cta .przycisk--glowny:hover,.cta .przycisk--glowny:focus-visible{
  background:#fff;border-color:#fff;color:var(--granat);box-shadow:none;
}

/* ============================================================
   10. NAGŁÓWEK STRONY — klasy kontraktu (naglowek, naglowek__wnetrze,
   marka, nawigacja, jezyk). Wnętrze header/nav/footer jest poza zasięgiem
   bramki N3/N4 (test wyklucza closest('header,footer,nav')) — więc
   wewnętrzny układ (wrap, odstępy) nie jest tu ograniczany geometrią
   kolumny tekstu, tylko zwykłą dostępnością i brakiem JS.
   ============================================================ */
.naglowek{padding-block:18px;border-bottom:1px solid var(--ramka)}
.naglowek__wnetrze{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75em 1.25em;
}
/* MIKRO-RUNDA 03.10: na PL ("Generowanie leadów", "SEO i pozycjonowanie")
   cztery elementy paska (marka, nawigacja, jezyk, przycisk) są o ok. 150–200px
   szersze niż na EN — przy 1366px nie mieszczą się w jednym rzędzie.
   `flex-wrap` łamał wtedy OSTATNI element (przycisk) samotnie na drugi
   wiersz, bez niczego do wyrównania przez `space-between` — zawieszony przy
   lewej krawędzi pod logo (zmierzone na zrzucie `home-pl-1366.png`).

   Wybrany wariant: nawigacja jest JEDYNYM elastycznym elementem paska
   (`min-width:0` znosi domyślne `min-width:auto`, które blokuje kurczenie
   poniżej szerokości najdłuższego, niełamliwego fragmentu treści) —
   marka/jezyk/przycisk dostają `flex-shrink:0`, więc zawsze zachowują pełny,
   zamierzony rozmiar. Gdy brakuje miejsca, to WEWNĘTRZNA lista linków się
   łamie (ma już `flex-wrap:wrap`, patrz niżej) na drugi wiersz SWOJEJ
   kolumny — pasek rośnie w pionie, ale nic nie wisi samotnie i nic nie
   znika. Odrzucone warianty: (a) sam zmniejszony odstęp/czcionka nawigacji
   — zbyt kruche, zależne od dokładnej długości etykiet, zadziała dziś i
   pęknie przy następnej dłuższej frazie; (b) próg chowający przycisk
   nagłówka — dałby RÓŻNE zachowanie PL i EN na tej samej szerokości, a
   kryterium rundy to "równie porządnie w obu językach"; CTA w hero i tak
   został, ale usunięcie guzika tylko na PL byłoby zauważalną asymetrią,
   nie naprawą. */
.nawigacja{flex:1 1 0%;min-width:0} /* UWAGA: `0%`, NIE `auto` — z `auto`
     przeglądarka liczy, czy element MIEŚCI SIĘ w linii na podstawie jego
     NIEZSZARPNIĘTEJ (content) szerokości, zanim w ogóle rozważy kurczenie;
     skoro marka+nawigacja+jezyk przy swoich naturalnych szerokościach same
     dokładnie wypełniały wiersz, dołożenie czwartego elementu (przycisku)
     zawsze przepychało go na nowy wiersz, bez próby ściśnięcia nawigacji —
     zmierzone bezpośrednio (getBoundingClientRect) na pl/index.html: szerokość
     .nawigacja zostawała przy swoim naturalnym rozmiarze (652px), przycisk
     i tak wisiał osobno. `flex-basis:0%` każe liczyć dopasowanie do wiersza
     tak, jakby nawigacja na starcie nie zajmowała miejsca wcale — wszystkie
     cztery elementy zawsze trafiają na jeden wiersz, a dopiero potem
     nawigacja dostaje w nim całą wolną przestrzeń (flex-grow:1) i łamie
     swoją listę linków wewnątrz tego, co jej zostało. */
.marka,.jezyk,.naglowek .przycisk{flex-shrink:0}

/* RUNDA 5 (05.10) — MENU PL MA SIĘ MIEŚCIĆ W JEDNYM WIERSZU PRZY 1366px.
   Przyczyna łamania nie była w nawigacji, tylko w SZEROKOŚCI PASKA: .uklad ma
   70vw od 768px (kolumna treści), czyli 956px przy 1366px — na pasek z logo
   (181px), menu (~650px), pigułką języka i przyciskiem zostawało ~400px.
   Pasek nagłówka nie jest kolumną czytelniczą, więc dostaje szerokość
   pełniejszą (92vw, max jak reszta). Do tego stały, deterministyczny podział:
   - >=1280px: wszystko w jednym wierszu (marka | menu | język | przycisk);
   - 990-1279px: przycisk znika z paska (CTA jest w hero i w stopce treści),
     menu zostaje w wierszu; ta sama reguła dla PL i EN, bez asymetrii;
   - <990px: wiersz 1 = marka + język, wiersz 2 = menu na pełną szerokość
     (łamie się dopiero na telefonie), przycisk (jeśli widoczny, <640px)
     w wierszu 3. Zamiast przypadkowego łamania — zamierzony układ. */
@media(min-width:768px){
  .naglowek .naglowek__wnetrze{width:92vw}
}
.jezyk{order:1}
/* RUNDA 11.10 (usterka 1): PRZYCISK NAGŁÓWKA ZNIKAŁ W PAŚMIE 640–1279 px (reguła
   `display:none` stąd zdjęta). Zasada „CTA jest w hero i w stopce" nie wytrzymała
   oglądu: na stronach z rysunkiem w hero przycisk leży poniżej pierwszego ekranu,
   więc przy 1000 px nagłówek nie miał żadnego wezwania w zasięgu wzroku, a przy
   1366 i 504 miał — niespójność, nie decyzja. Układ dwuwierszowy (marka | język |
   przycisk, pod spodem menu) obowiązuje teraz do 1279 px, czyli do progu, od którego
   wszystko mieści się w jednym wierszu (>=1280). CENA: nagłówek 990–1279 jest o ok.
   56 px wyższy niż wcześniej (drugi wiersz menu). */
@media(max-width:1279px){
  .nawigacja{order:2;flex:1 1 100%}
  .naglowek .przycisk{order:3}
  .naglowek__wnetrze{justify-content:space-between}
  .marka{margin-right:auto}
}
/* 640–1279: przycisk w pierwszym wierszu, tuż za językiem (kolejność DOM: język, potem
   przycisk — ten sam `order`). Poniżej 640 zostaje order:3 + pełny wiersz (blok telefonu). */
@media(min-width:640px) and (max-width:1279px){
  .naglowek .przycisk{order:1}
}
/* RUNDA 12 (08.10): blok `@media(max-width:639px)`, który stał TUTAJ, został
   przeniesiony NIŻEJ, za bazową regułę `.nawigacja ul` — patrz komentarz przy
   nim. Powód: `column-gap:.85em` był stąd MARTWY i telefon nigdy go nie
   dostał. */
@media(min-width:1280px){
  .naglowek__wnetrze{flex-wrap:nowrap}
  /* RUNDA 20 (11.10): ZNAK ODDZIELONY OD MENU. Stary plik logo miał po 51 px białego pasa
     z każdej strony, który nieumyślnie oddzielał znak od menu; wektor przycięty do tuszu
     tego pasa nie ma, a odstęp znak→menu (flex gap 1,25 em = 20 px) był prawie równy
     odstępowi między pozycjami (17,6 px), więc marka czytała się jak pierwsza pozycja.
     Dokładam margines SKALOWANY Z OKNEM (3,5 vw, min 1 rem, max 3 rem) do istniejącego
     odstępu: ~45 px przy 1280, 48 px od ~1370 — razem ~65–68 px, czyli ok. 3,7× odstępu
     między pozycjami. Zmierzone przy 1280 px, PL (najgorszy przypadek): lista menu ma
     527 px szerokości (Segoe UI), pole nawigacji ~688 px, zapas 160 px; po dodaniu 45 px
     zostaje ~115 px, a przy Poppinsie (~+9 % szerokości pisma, szacunek) ~68 px. Menu
     łamie się dopiero, gdy zapasu zabraknie — wciąż je łamie się wewnątrz listy
     (flex-wrap), nic nie znika. Poniżej 1280 px menu stoi w drugim wierszu, znak nie jest
     z nim sąsiadem, więc reguła tam nie jest potrzebna. */
  .nawigacja{margin-left:clamp(1rem,3.5vw,3rem)}
  .nawigacja{order:0}
  .naglowek .przycisk{order:2}
}

.marka{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font:700 19px/1.2 var(--font-tekst);
  color:var(--granat);
  text-decoration:none;
}
.marka:hover{color:var(--niebieski)}

.nawigacja ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap; /* od 320px pozycje łamią się zamiast chować za
       hamburgerem — menu bez JS, zgodnie z zasadą "mało pozycji"; to samo
       łamanie teraz też "amortyzuje" różnicę długości PL/EN przy 1366px,
       patrz wyżej */
  gap:.5em 1.1em;
}
.nawigacja a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  font-weight:600;
  color:var(--granat);
}
.nawigacja a:hover{color:var(--niebieski)}
/* RUNDA 19 (11.10) — ZAKREŚLENIE POD POZYCJĄ MENU: TEN SAM ELEMENT CO `--marker` Z §26.4
   (pasmo zakreślacza pod liczbami w prozie, `<strong>` w `.pomiar`): ta sama zmienna,
   gradient w tle, zero elementów w znaczniku. (Pierwsza wersja tej rundy przeniosła
   kreskę 56×3 px z nagłówków §26 — to był zły element; usunięta.)
   DECYZJE (uzasadnienie):
   1. KIEDY: na :hover, :focus-visible i STALE dla strony bieżącej (`aria-current`).
      Zakreślenie pod wszystkimi pięcioma pozycjami naraz zrobiłoby z paska pięć
      zakreśleń i odebrało mu informację („tu jesteś" / „tu wskazujesz").
   2. PROPORCJE: w prozie marker idzie od 56 % do 94 % wysokości WIERSZA (line-height
      1,65 → pole 44 px menu to nie wiersz, więc tamte procenty dałyby pasmo 17 px
      grubości przez środek liter). Tu liczone od środka pola w `em`: od .08 em do .55 em
      pod środkiem tekstu, czyli ok. 7 px przy 15 px pisma — od dolnej ~1/3 wysokości
      x-height przez linię podstawową do pasa podkreśleń (~2/3 pasma pod literami, jak
      w prozie). Położenie zmierzone pikselem na zrzucie, nie wyliczone.
   3. CIĘŻAR NA BIELI: ta sama przezroczystość (.24) na czystej bieli daje #FFE4D2 —
      tyle samo co w prozie na białym tle (w `.pomiar` tłem jest błękit pola, więc tam
      wychodzi cieplej); pasek jest biały jak strona, więc ciężar = ten z akapitu.
   KONTRAST TEKSTU: granat #264F80 na #FFE4D2 = 6,88:1 (AA). DLATEGO na :hover tekst
   zostaje GRANATOWY — dotychczasowy niebieski #3478C0 dawałby na markerze 3,76:1 i nie
   przechodziłby AA; zakreślenie samo jest sygnałem hover.
   NIEKOLOROWY SYGNAŁ STRONY BIEŻĄCEJ: zakreślenie ma 1,2:1 do bieli, a pomarańcz
   2,35:1 — to dekoracja. Strona bieżąca dostaje więc dodatkowo 2 px linię GRANATOWĄ
   (8,36:1) pod zakreśleniem; hover jej NIE ma. Obecność linii o wysokim kontraście
   rozpoznaje się bez odróżniania barw. Grubość pisma celowo nie jest sygnałem: 700
   zamiast 600 poszerza etykietę i przesuwa sąsiadów (PL 504 mieści się z zapasem 10 px).
   FOKUS: `a:focus-visible` z §2 (3 px granat, offset 3 px) zostaje; zakreślenie to
   sygnał dodatkowy, nie zamiennik pierścienia.
   ANIMACJA: wjazd od lewej .2 s tą samą krzywą co przyciski; wyłączona przy
   `prefers-reduced-motion`. */
.nawigacja a{
  padding-inline:.12em;margin-inline:-.12em; /* jak w §26.4: pasmo wystaje za literę, układ nie drga */
  background:
    linear-gradient(transparent calc(50% + .08em),var(--marker) calc(50% + .08em),var(--marker) calc(50% + .55em),transparent calc(50% + .55em)) 0 0/0 100% no-repeat,
    linear-gradient(var(--granat),var(--granat)) 0 calc(50% + .62em)/0 2px no-repeat;
  transition:background-size .2s var(--przycisk-ease);
}
.nawigacja a:hover,
.nawigacja a:focus-visible{color:var(--granat);background-size:100% 100%,0 2px}
.nawigacja a[aria-current="page"]{background-size:100% 100%,100% 2px}
@media(prefers-reduced-motion:reduce){.nawigacja a{transition:none}}

.jezyk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:.3em 1em;
  border:1px solid var(--ramka);
  border-radius:999px; /* pigułka — ten sam język promieni co karty/przyciski,
       tylko doprowadzony do pełnego zaokrąglenia dla małego elementu */
  font:600 13px var(--font-tekst);
  color:var(--granat);
  text-decoration:none;
}
.jezyk:hover{border-color:var(--niebieski);color:var(--niebieski)}

/* .naglowek .przycisk — miejsce na CTA w pasku górnym, obok .jezyk (builder
   dostarczy markup, patrz REKOMENDACJE DLA BUILDERA w NOTATCE). Guzik w
   nagłówku jest fizycznie mniejszy niż w hero — na żadnym zrzucie PKO
   przycisk w pasku górnym nie ma wysokości guzika w treści sekcji. */
.naglowek .przycisk{
  min-height:40px;
  padding:.5em 1.25em;
  font-size:14px;
}
/* Pod 640px: marka+jezyk+przycisk są flex-shrink:0 (patrz wyżej) i same w
   sobie, bez pomocy nawigacji, bywają szersze niż wąski telefon (zmierzone:
   na pl/index.html przy ~504px realnej szerokości Chrome marka+jezyk+
   przycisk=427px fixed + odstępy > 454px dostępnej szerokości) — przycisk
   i tak wypada na własny wiersz, SAMOTNIE, u lewej krawędzi, bo
   `justify-content:space-between` nie ma czym go rozsunąć, gdy jest jedynym
   elementem swojej linii. Zamiast czekać, aż to się przypadkiem zdarzy
   (różnie dla PL/EN, różnie przy każdej kolejnej etykiecie), WYMUSZAMY to
   świadomie poniżej 640px: przycisk zawsze dostaje całą szerokość wiersza
   i wygląda jak zamierzony pasek CTA, nie jak coś, co nie zmieściło się. */
/* ---- RUNDA 12 (08.10): JEDEN blok telefonu dla całego nagłówka ----
   USTERKA A (audyt pary 2): przy 504 px PL „Kontakt" stoi SAM w drugim wierszu
   menu (4+1). Zgłoszona jako usterka pary 2, ale występuje tak samo na
   wzorcu `pl/index.html` — więc nie jest regresją ani pary 2, ani rundy 11.
   Zlecenie kazało sprawdzić, czy to nie regresja mikro-rundy z 03.10.
   ODPOWIEDŹ: TAK, i to w najgorszej postaci — reguła z 03.10 NIGDY NIE DZIAŁAŁA.
   `.nawigacja ul{column-gap:.85em}` stało PRZED bazowym `.nawigacja ul{gap:.5em
   1.1em}`; przy równej specyficzności wygrywa reguła późniejsza, więc skrót
   `gap` cicho kasował węższy odstęp telefonu. Zmierzone w przeglądarce:
   odstęp 17,6 px (= 1,1em) przy 504 i przy 390 px, czyli wartość bazowa.
   To jest pułapka nr 3 z mojego briefu (skrót kasuje wcześniejszy longhand),
   tylko odwrócona w czasie: tu skrót stoi PÓŹNIEJ i kasuje longhand.
   Dlatego ten blok jest teraz JEDEN i stoi ZA wszystkimi regułami bazowymi
   nagłówka — nie da się go nadpisać kolejnością, bo nic po nim nie idzie.

   Dwie rzeczy, które robi, i po co:
   1. `column-gap:.85em` (ożywiony) — zwęża wiersz menu o 4 px na odstęp.
      EN mieści się dzięki temu w JEDNYM wierszu przy 390 px (359,9 → 343,9 px
      przy dostępnych 351,0). PL przy 504 px nadal się nie mieści i NIE DA SIĘ
      tego dociągnąć odstępem: pięć etykiet PL to 426,7 px samego tekstu,
      a dostępne jest 453,6 — zejście z odstępem do zera dałoby 426,7, czyli
      zmieściłoby się dopiero przy odstępie ~6 px, który skleja linki w jedną
      plamę i pęka przy pierwszej dłuższej etykiecie. Ściskanie odrzucone
      TĄ SAMĄ decyzją co 03.10 („zbyt kruche, zależne od długości etykiet").
   2. `justify-content:center` — skoro drugiego wiersza na PL nie da się
      uniknąć, ma wyglądać na zamierzony. To jest ta sama odpowiedź, którą
      serwis daje już na niepełny ostatni rząd kart (§25.10a) i siatek
      (§25.6b): rząd niepełny idzie na środek, zamiast zostawiać dziurę.
      Trzecia odpowiedź na to samo pytanie byłaby gorsza niż każda z osobna.
      CENA, nazwana wprost: przy 504 px EN menu mieści się w jednym wierszu
      i teraz też jest wyśrodkowane — przestaje stać w jednej osi z logo
      (odsunięcie 54,9 px). Płacę ją świadomie, bo reguła ma być jedna dla obu
      języków; wariant „centruj tylko wiersz niepełny" wymaga `:has()` na
      liczbie dzieci ALBO JS, a tego w nagłówku nie chcę. */
@media(max-width:639px){
  .nawigacja ul{column-gap:.85em;justify-content:center}
  .nawigacja a{font-size:15px}
  .naglowek .przycisk{flex-basis:100%}
}
/* RUNDA 18 (11.10) — DECYZJA: cofam część rozstrzygnięcia z rundy 12 („niepełny wiersz
   menu na środek"). Oglądacz zobaczył je na zrzucie PL 504 px: pierwszy wiersz od
   krawędzi do krawędzi, „Kontakt" sam na środku drugiego z pustką po obu stronach —
   wygląda na wypadek, nie na zamiar. Runda 12 wybrała środek, bo „drugiego wiersza nie da
   się uniknąć"; DA SIĘ, przy 504 px: pięć etykiet PL to 426,7 px w 15 px, w 14 px
   ~398 px, a dostępne jest 453,6 px — z odstępem .8 em (11 px) wychodzi 443 px, czyli
   mieści się z zapasem 10 px. (Runda 12 odrzuciła ściskanie samym ODSTĘPEM; tu schodzę
   rozmiarem pisma o 1 px, odstęp zostaje ≥ 11 px — to inna rzecz i inny zapas.)
   Wiersz idzie `space-between`, więc stoi w jednej osi z logo po lewej i z krawędzią po
   prawej (cena z rundy 12 — EN odsunięty o 55 px od logo — też znika).
   Tylko PL: EN (krótsze etykiety) mieści się w 15 px, nie ruszam.
   NIE SPRAWDZONE: węższe okna niż 504 px (Chrome przyrządu nie schodzi niżej, patrz
   podglad.py). Tam PL i tak się łamie; wtedy ostatnia pozycja stoi LEWO, pod logo, a nie
   na środku — porządek listy zamiast „plamy". Jeśli to się okaże gorsze na prawdziwym
   telefonie 360–414 px, wracać z urządzeniem w ręku, jedna zmiana na raz. */
@media(max-width:639px){
  html[lang^="pl"] .nawigacja a{font-size:14px}
  html[lang^="pl"] .nawigacja ul{column-gap:.8em;justify-content:space-between}
  html[lang^="en"] .nawigacja ul{justify-content:space-between}
}

/* ============================================================
   11. ŚCIEŻKA OKRUSZKOWA
   ============================================================ */
nav[aria-label="breadcrumb"] ol,
.sciezka ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.3em;
  margin:0 0 1.5em;
  padding:0;
  font-size:14px;
}
nav[aria-label="breadcrumb"] li,
.sciezka li{display:flex;align-items:center;gap:.3em}
/* Separator na KOŃCU poprzedniego <li> (::after), nie na początku następnego
   (::before). Było ::before: <li> to jedna jednostka łamania, więc gdy ostatni
   człon (tytuł strony = H1) nie mieścił się w wierszu, cały <li> — razem
   z „›" na początku — spadał do nowego wiersza i ten wiersz zaczynał się
   od strzałki (N5; 11 z 76 stron przy 504 px, 39 przy 390, 66 przy 320).
   Teraz „›" należy do członu, który go poprzedza, i nie może zostać
   osierocony na początku wiersza.
   Czytniki ekranu: druga deklaracja `content:"›" / ""` daje separatorowi
   pusty tekst alternatywny, czyli nie jest odczytywany; pierwsza deklaracja to
   zapas dla przeglądarek bez składni z `/` (reguła z nierozumianą wartością
   jest odrzucana, więc zostaje poprzednia). */
nav[aria-label="breadcrumb"] li:not(:last-child)::after,
.sciezka li:not(:last-child)::after{
  content:"›";
  content:"›" / "";
  color:var(--pomaranczowy);
}
nav[aria-label="breadcrumb"] a,
.sciezka a{color:var(--granat);text-decoration:underline}
nav[aria-label="breadcrumb"] [aria-current="page"],
.sciezka [aria-current="page"]{
  color:var(--przygaszony); /* było granat+opacity:.75 (≈4,38:1) — teraz
       stały ton 7,08:1 */
  font-weight:600;
}

/* ============================================================
   12. KARTY I SIATKA KART
   Promień Z REFERENCJI (10px, jak tabela/tooltip), cień NOWY (ton marki).
   Rekomendacja do markupu (patrz NOTATKA): siatka-kart złożona z linków
   (karty "dalej w serwisie") niech stoi w <nav aria-label="…"> — to
   semantycznie trafne (grupa linków) i wyjmuje komponent spod N3/N4
   bramki, która liczy sąsiadujące kolumny h3/p jako możliwy błąd układu
   kolumny czytelniczej. Bez tego opakowania wielokolumnowa siatka kart
   z nagłówkami h3 w jednym rzędzie może fałszywie trafić w N4.
   ============================================================ */
.karta{
  display:flex;
  flex-direction:column;
  gap:.6em;
  padding:1.4em;
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--bialy);
  box-shadow:var(--cien);
}
.karta h3{margin:0;font-size:20px}
@media(min-width:1024px){.karta h3{font-size:22px}} /* NIE skala H3 artykułu
     (32px) — karta to element listingowy, mniejszy niż nagłówek sekcji */
.karta img{border-radius:var(--promien-mala);margin-bottom:.4em}
.karta p{margin:0;font-size:15px;color:var(--przygaszony)}
.karta .przycisk{align-self:flex-start;margin-top:.4em}

.siatka-kart{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5em;
}
@media(min-width:640px){
  .siatka-kart{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){
  .siatka-kart{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   13. WYRÓŻNIK — kluczowy akapit wyciągnięty obok tekstu (§5 kontraktu).
   Rodzina wizualna blockquote (akcent na lewej krawędzi), ale karta:
   promień 10px, tło --sekcja, bez kursywy — to NIE cytat czyjejś
   wypowiedzi, to rozstrzygnięcie/konkluzja autora.
   ============================================================ */
/* RUNDA 7 (05.10): był małą szarą kartą 18 px — czytał się jak przypis, a nie
   jak teza. Teraz to TEZA W KOLUMNIE: tekst 22 px / 600, pomarańczowy słupek
   po lewej, zero tła. Ranga pochodzi z rozmiaru i światła, nie z pudełka —
   dzięki temu działa tak samo na stronie z 20 nagłówkami, jak z dwoma. */
.wyroznik{
  margin:2.5em 0;
  padding:.15em 0 .15em 1.25em;
  background:none;
  border-left:4px solid var(--pomaranczowy);
  border-radius:0;
  font:600 20px/1.45 var(--font-tekst);
  color:var(--granat);
  text-wrap:balance;
}
@media(min-width:768px){.wyroznik{font-size:23px;line-height:1.4;padding-left:1.5em}}
.wyroznik p{margin:0 0 .5em}
.wyroznik p:last-child{margin-bottom:0}
.wyroznik strong{font-weight:700} /* liczby w tezie zachowują marker z §26.4 —
     sprawdzone na zrzucie: w dużym kroju czyta się jako wskazanie liczb, nie szum */

/* ============================================================
   14. PASEK LICZB — §6 kontraktu. Elementy jako DIV (nie p/h2/h3) celowo:
   N3/N4 bramki sprawdzają p/li/h1–h4/blockquote/td — div jest poza tym
   zakresem, więc wielokolumnowy pasek liczb nigdy nie trafi w N4 jako
   rzekome "akapity obok siebie". To jest spójne z zamierzeniem bramki:
   liczby to krótkie etykiety, nie kolumna czytelnicza.
   ============================================================ */
/* PRZEBUDOWANE 05.10 (biblioteka bloków). Stara wersja robiła siatkę na
   <figure>, a w markupie wzorca wartości siedzą w <dl> WEWNĄTRZ figure —
   siatka obejmowała więc <dl> i <figcaption>, nie same liczby, i trzy
   wartości układały się w słupek. Klasa nie była użyta na żadnej z 78 stron
   (sprawdzone grepem), więc zmiana niczego nie rusza. Teraz siatką jest <dl>
   (.liczby__lista, a dla zgodności ze wzorcem także `.liczby>dl`). */
.liczby{margin:2em 0;padding:0;background:none}
.liczby__lista,
.liczby>dl{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:0;padding:0;
}
/* RUNDA 11 (07.10): SZEŚĆ TORÓW ZAMIAST TRZECH KOLUMN.
   Sztywne `repeat(3,1fr)` przy DWÓCH kartach zostawiało pustą trzecią kolumnę —
   zmierzone na paśmie „0,8% / 13,6%": karty zajmowały lewe 62 % pasma, od x=885
   do x=1290 stała płachta gołego tła. Wzorzec (`/pl/index.html`) ma trzy karty
   wypełniające pasmo do końca i to jest house style: pasmo liczb jest pełne.
   Sześć torów po `span 2` daje DOKŁADNIE tę samą geometrię co trzy kolumny
   (6t+5g = 3×(2t+g)+2g), więc sześć istniejących pasm trójkartowych nie drgnie —
   a przy dwóch kartach `span 3` wypełnia pasmo tak samo (2×(3t+2g)+g = 6t+5g).
   Dlaczego wypełnienie, a nie wyśrodkowanie jak w §25.10a: podpis źródła stoi
   przy LEWEJ krawędzi pasma (house style, wzorzec ma tak samo). Wyśrodkowane
   karty odkleiłyby się od niego i podpis zostałby sam; wypełnione trzymają
   z nim wspólną lewą krawędź. Pasm z 4+ kartami nie ma dziś w serwisie ani
   jednego — nie projektuję układu, którego nie mam na czym obejrzeć. */
@media(min-width:640px){
  .liczby__lista,.liczby>dl{grid-template-columns:repeat(6,1fr)}
  .liczby .liczba{grid-column:span 2}
  .liczby .liczba:first-child:nth-last-child(2),
  .liczby .liczba:first-child:nth-last-child(2)~.liczba{grid-column:span 3}
  .liczby .liczba:only-child{grid-column:span 6}
}
.liczba{
  position:relative;
  padding:1.4em 1.5em 1.5em;
  background:var(--bialy);
  border:1px solid var(--ramka);
  border-radius:24px;
  box-shadow:var(--cien);
  text-align:left;
}
/* krótka pomarańczowa kreska nad liczbą — dekoracja, sygnał „to jest wartość",
   zamiast ilustracji (której nie mamy) */
.liczba::before{
  content:"";
  display:block;
  width:40px;height:4px;
  margin-bottom:1rem;
  border-radius:2px;
  background:var(--pomaranczowy);
}
.liczba__wartosc{
  margin:0;
  font:700 40px/1.05 var(--font-tekst);
  color:var(--granat);
}
@media(min-width:768px){.liczba__wartosc{font-size:52px}}
.liczba__opis{
  margin:.6em 0 0;
  font:400 15px/1.5 var(--font-tekst);
  color:var(--przygaszony);
}
/* 18b: ZMIANA Z RUNDY 18 COFNIĘTA — podpis wraca na lewą krawędź pasma, czyli kart, które
   opisuje (x=55). Diagnoza z zlecenia („przy krawędzi okna") była błędna: stał przy
   krawędzi KARTY; na osi tekstu (333) wisiał pod środkiem pierwszej karty. Runda 11 miała rację. */
.liczba__zrodlo{
  margin-top:.9rem;
  font:400 13px/1.4 var(--font-tekst);
  color:var(--przygaszony);
  text-align:left;
}

/* ============================================================
   15. FIGURA Z WYKRESEM — §6/§7 kontraktu + WYMÓG TWARDY 1: ta sama
   reguła musi obsłużyć i <img src="*.svg" class="figura-dane__rysunek">,
   i <svg class="figura-dane__rysunek"> wklejone wprost do markupu.
   Selektor po klasie trafia w obie struktury niezależnie od znacznika;
   width:100%+height:auto działa identycznie na img i na svg z atrybutami
   width/height (UA liczy aspect-ratio z attr() dla obu jako zastępowanych
   elementów) — CLS=0 bez dodatkowego kodu.
   ============================================================ */
figure.figura-dane{
  margin:1.75em 0;
  padding:1.25em;
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--bialy);
}
.figura-dane__rysunek{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
/* SVG wklejony inline (kontrakt §7) ma atrybuty width/height z viewBox i bez
   tej reguły zostawał 480 px przy lewej krawędzi karty. Skalujemy go tak samo,
   jak skaluje się <img class="figura-dane__rysunek"> — ta sama reguła dla obu
   form osadzenia. height:auto + atrybuty = aspect-ratio z viewBox, CLS = 0. */
.figura-dane__rysunek svg{display:block;width:100%;height:auto}
.figura-dane__rodzaj{margin:0 0 .75em}
/* RUNDA 11 (07.10): HIERARCHIA BYŁA ODWRÓCONA. Ten figcaption to wielowierszowy
   przypis metodologiczny (mianowniki, zakres, zastrzeżenia) — najdłuższy i
   najmniej ważny tekst w karcie. Stał w 600 i w --granat, czyli MOCNIEJ niż
   zdanie-wniosek wykresu nad nim, które jest w rysunku zwykłą wagą i jaśniej.
   Oko czytało najpierw przypis. 400 + --przygaszony stawia go tam, gdzie należy:
   pod wnioskiem, nie nad nim. Kontrast 7,08:1 na białej karcie (AA 4,5) — było
   8,36:1, więc to zejście w hierarchii, nie zejście pod próg.
   To jest reguła BAZOWA; wykres w prozie ma własną, mocniejszą (§28). */
.figura-dane__podpis{
  margin-top:.75em;
  font:400 13px/1.55 var(--font-tekst);
  color:var(--przygaszony);
}
.figura-dane__zrodlo{
  /* `display:block`, bo to <span> na KOŃCU przypisu: w toku inline wpadał
     w ostatni wiersz i łamał się na sierotę („…nie ma sensu. dane / drySEO lab").
     Własny wiersz zamyka przypis zamiast go rozmieniać. */
  display:block;
  margin-top:.5em;
  font:400 12px/1.4 var(--font-tekst);
  color:var(--przygaszony); /* mianownik + "dane drySEO lab" — patrz §6 kontraktu */
}

/* ============================================================
   16. FAQ — <details>/<summary>, zero JS. Strzałka rysowana w CSS
   (obrót przy [open]), bez obrazków/ikon.
   ============================================================ */
.faq{margin:2em 0}
.faq__poz{
  border-top:1px solid var(--ramka);
  padding:1.1em 0;
}
.faq__poz:last-child{border-bottom:1px solid var(--ramka)}
.faq__pyt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1em;
  font:600 18px/1.4 var(--font-tekst);
  color:var(--granat);
  cursor:pointer;
  list-style:none; /* usuwa domyślny trójkąt Chrome/Safari */
}
.faq__pyt::-webkit-details-marker{display:none}
.faq__pyt::after{
  content:"+";
  flex:0 0 auto;
  font-weight:400;
  font-size:24px;
  line-height:1;
  color:var(--niebieski);
  transition:transform .2s var(--przycisk-ease);
}
.faq__poz[open] .faq__pyt::after{transform:rotate(45deg)} /* + → × */
.faq__odp{margin-top:.75em;color:var(--granat)}
.faq__odp p:last-child{margin-bottom:0}

/* ============================================================
   17. SPIS TREŚCI — <nav>, poza zasięgiem N3/N4 bramki z definicji testu.
   RUNDA KOREKTY 03.10: wersja 1 "krzyczała jak nagłówek działu" (duże tło,
   pogrubiona etykieta, pomarańczowe cyfry, dwie kolumny jak osobna sekcja)
   — konkurowała z H2 treści. Teraz: mała etykieta, zwarta lista w cienkiej
   ramce, bez koloru akcentu, jedna kolumna zawsze (dwukolumnowy układ
   wyglądał jak blok "Czego potrzebujesz?" z PKO — to jest ranga sekcji
   produktowej, nie spisu treści).
   ============================================================ */
/* Pierwszy element po hero dotykał jego dolnej krawędzi (reguła
   `.tresc>:first-child{margin-top:0}` z §4 zerowała odstęp) — spis/okruszki
   przyklejone do pasma. Odstęp dajemy na kontenerze, nie na dziecku. */
.hero+.tresc,.hero+article{padding-top:1.75em}
/* PRZEBUDOWA 05.10 (werdykt własny: „ramka dokumentu, nie nawigacja"):
   cienka obwódka z etykietą wyglądała jak przypis w dokumencie. Teraz karta
   z jasnym gradientem marki (tak jak pasma), bez obwódki, każda pozycja to
   wiersz-link z polem trafienia (hover/fokus podświetla cały wiersz), linki
   bez podkreślenia — wygląd nawigacji produktowej, nie wyliczenia. Zachowanie
   przy długiej liście: patrz niżej (>= 9 pozycji). */
.spis-tresci{
  margin:2em 0;
  padding:1.1em 1em 1em;
  border:0;
  border-radius:var(--promien);
  background:#EBF1FB; /* płaski, nie gradient: okładziny cienia przewijania
       (niżej) muszą mieć DOKŁADNIE ten kolor, inaczej widać jaśniejszy pas */
  /* RUNDA 5 (05.10): bez max-width:38ch — pudełko ma szerokość kolumny tekstu
     (z buildera: <nav> jest dzieckiem .tresc, więc 100% = kolumna). 38ch dawało
     ~270px obok kolumny 580–700px i wyglądało jak usterka. */
}
/* Etykieta spisu. Builder emituje ją jako <h2 id="na-tej-stronie"> (wcześniej
   <p>), więc reguły `h2` z §4 (48px od 1024px, margin-top 1.6em) trafiały w nią
   i „krzyczała" jak nagłówek sekcji. Selektor .spis-tresci h2 ma wyższą
   specyficzność niż `h2` i `h2` w media-query, więc wygrywa na każdej szerokości.
   Rekomendacja do markupu (NOTATKA): to nie powinien być H2 — spis w outline
   dokumentu konkuruje z prawdziwymi sekcjami; <p> z aria-label na <nav>
   robi to samo bez szumu w nagłówkach dla Google i czytników. */
.spis-tresci p,
.spis-tresci h2{
  margin:0 0 .6em;
  font:600 12px/1.3 var(--font-tekst);
  letter-spacing:.1em;
  text-transform:uppercase; /* kapitaliki to tu ETYKIETA UI, nie nagłówek treści
       — wyjątek od zasady "zero text-transform na nagłówkach" ma sens, bo
       przepisana reguła nie zmienia tekstu w źródle (Google widzi „Na tej
       stronie") i nie dotyczy polskiej ortografii (wersaliki, nie capitalize) */
  color:var(--przygaszony); /* 7,08:1 */
}
.spis-tresci p,.spis-tresci h2{padding-inline:.5rem} /* etykieta w linii z tekstem wierszy */
.spis-tresci ol{
  margin:0;
  padding-left:2.4em; /* miejsce na dwucyfrowe numery (do 20 pozycji) */
  font-size:15px;
  /* dwie kolumny, gdy kolumna tekstu na to pozwala (>= ok. 600px wnętrza):
     9–12 pozycji → ~6 wierszy, 20 pozycji → 10 zamiast 20. Poniżej — jedna.
     column-width zamiast stałej liczby kolumn: telefon dostaje 1 bez media query. */
  column-width:17rem;
  column-gap:1.5rem;
}
.spis-tresci li{margin:0;line-height:1.35;break-inside:avoid}
.spis-tresci li::marker{color:var(--przygaszony);font-weight:600;font-size:13px}
/* ^ ŻYWA (piksel 09.10: najciemniejszy piksel cyfry = rgb(66,89,127) = #42597F),
   na wszystkich 75 stronach ze spisem — `.spis-tresci ol` nie ma list-style:none. */
.spis-tresci a{
  display:block;
  /* wiersz wysuwa się ujemnym marginesem na numer, żeby pole trafienia
     obejmowało marker; tło i tekst nadal w jednym bloku */
  margin-left:-.4rem;
  padding:.3em .6rem; /* wiersz jednolinijkowy ≈ 31 px (pole trafienia ≥ 24 px
       wg WCAG 2.5.8), dwulinijkowy ≈ 51 px; .5em dawało listę 15 pozycji o
       ok. 45% wyższą niż stary spis — odwrotność celu */
  border-radius:var(--promien-mala);
  color:var(--granat);
  text-decoration:none;
}
.spis-tresci a:hover{background:var(--bialy);color:var(--granat);box-shadow:var(--cien)}
/* fokus: ogólny pierścień z §2 (3 px granat) zostaje; wiersz dostaje też tło,
   żeby było widać, gdzie jest kursor klawiatury w gęstej liście */
.spis-tresci a:focus-visible{background:var(--bialy)}

/* DŁUGA LISTA (>= 9 pozycji; 42 z 75 stron ze spisem, maks. 16): spis
   ROZWIJA SIĘ W CAŁOŚCI na każdej szerokości. 10.10 (audyt wzrokowy, U5)
   usunięto stąd przewijaną wysokość (max-height 14.5rem + overflow-y +
   cienie krawędzi) z rundy 05.10: na 504 px przecinała 7. pozycję poziomo
   w połowie liter, resztę chowała, a pod spodem renderował się pasek
   przewijania — czytało się jak zepsuta strona. Stała wysokość nie trafi
   granicą między wiersze, bo wiersze mają 1 albo 2 linijki, a przewijania
   dotykiem w tym pudle nigdy nie sprawdzono na urządzeniu (druga poprawka
   tej samej klasy objawów = odejmować, nie dokładać). Cena: długi spis na
   telefonie jest wyższy (wartości w NOTATCE); na szerokim ekranie bez zmian
   (dwie kolumny przy >= 600 px wnętrza). Docelowo — rekomendacja do
   MARKUPU: <details> z <summary> „Na tej stronie (15)", zwinięty na
   telefonie. To zachowanie strukturalne, więc należy do znacznika. */

/* ============================================================
   18. SEKCJE — rytm długiego tekstu. .sekcja to pasmo (odpowiednik
   dawnego bare `section`), .sekcja--tlo to wariant z tłem — ta sama
   zasada "co druga sekcja ma jasne tło", teraz jako jawna klasa zamiast
   selektora po znaczniku, zgodnie ze słownikiem kontraktu.
   ============================================================ */
.sekcja{padding-block:2.5em}
@media(min-width:768px){.sekcja{padding-block:3.5em}}
/* RUNDA KOREKTY 03.10: wersja 1 miała "ledwie widoczną zmianę tła" —
   na zrzutach PKO pasma sekcji to wyraźny gradient + duży promień u góry,
   jak miękka fala, nie płaski prostokąt o kolorze o 3% ciemniejszym od bieli.
   Nadal AA (gradient kończy się na --sekcja-g2, czyli bieli, więc tekst na
   dole pasma ma ten sam kontrast co na białym tle), nadal paleta dry. */
.sekcja--tlo{
  background:linear-gradient(180deg,var(--sekcja-g1) 0%,var(--sekcja-g2) 100%);
  border-radius:var(--promien-duza) var(--promien-duza) 0 0;
}
/* 10.10 (audyt wzrokowy, U6): pasmo po PROZIE. Zwykły .sekcja ma powietrze w
   własnym paddingu, ale pasmo z tłem zaczyna tło od swojej górnej krawędzi —
   odstęp nad nim musi leżeć NA ZEWNĄTRZ. Pomiar: gdy proza (.tresc) kończy się
   akapitem, `p:last-child{margin-bottom:0}` zostawiał 0 px (na zrzucie ~12 px
   to sam półinterlinia ostatniego wiersza), a gdy figurą — 28–32 px. To stan
   ZASTANY na wszystkich stronach z takim sąsiedztwem, nie skutek skrócenia
   jednej sekcji. Margines kolapsuje z marginesem dolnym ostatniego dziecka
   prozy (max, nie suma). Wartości = padding .sekcja (2,5 / 3,5 em), czyli tyle
   powietrza, ile dostaje zwykła sekcja. Pasma po .sekcja/hero bez zmian. */
.tresc+.sekcja--tlo{margin-top:2.5em}
@media(min-width:768px){.tresc+.sekcja--tlo{margin-top:3.5em}}

hr{border:0;border-top:1px solid var(--ramka);margin:2.5em 0}

/* ============================================================
   19. CYTAT — bez zmian wobec tożsamości dryseo (25px Georgia 600,
   zmierzone 20.09, jedyne świadome odejście od Poppins w kicie).
   ============================================================ */
blockquote{
  margin:1.75em 0;
  padding:.2em 0 .2em 1.2em;
  border-left:4px solid var(--pomaranczowy);
  font:600 20px/1.4 var(--font-cytat);
  color:var(--granat);
}
@media(min-width:768px){blockquote{font-size:25px}}
blockquote p{margin-bottom:.3em}
blockquote footer,blockquote cite{
  font:400 15px/1.5 var(--font-tekst);
  color:var(--przygaszony); /* było opacity:.75, patrz §1 */
}

/* ============================================================
   20. CTA — wezwanie do działania. Blok wypełniony granatem (język
   referencyjnego przycisku primary: pełne tło marki, biały tekst) —
   to jedyne miejsce na stronie z pełnym tłem granatowym, celowo rzadkie,
   żeby zachować siłę kontrastu wobec reszty strony.
   ============================================================ */
.cta{
  background:var(--granat);
  color:#fff;
  text-align:center;
  padding-block:3em;
}
.cta__tytul{
  margin:0 0 .75em;
  color:#fff; /* nadpisuje domyślny granat nagłówków — biały na granacie
       = 8,4:1, patrz §1 */
  font-size:28px;
}
@media(min-width:1024px){.cta__tytul{font-size:36px}}
.cta__akcja{margin:0}
@media(min-width:768px){.cta{padding-block:4em}} /* oddech wokół formularza (to samo
     źródło odstępów co reguła wyżej — zero osobnego padding-bottom, pułapka #3) */

/* ---- 20a. FORMULARZ KONTAKTOWY w sekcji .cta (runda 15, 09.10 wieczór) ----
   Builder wypisuje go na 78/78 stron od 09.10; do tej rundy arkusz nie miał dla
   niego ANI JEDNEJ reguły (przeglądarka układała <label> i <input> w linii).
   Tło to granat .cta, więc KAŻDY kolor poniżej jest policzony względem #264F80
   (L=0,0756), nie względem bieli:
     biały (etykiety, tytuł, tekst pola↔tło pola)      8,36:1
     #D7E1F0 (nota prywatności, podpowiedź)             6,34:1
     #FFC299 (gwiazdka — jasny tint pomarańczu marki)   5,34:1
        (5,34:1 = POMIAR PIKSELA gwiazdki w legendzie, PL i EN, po zmianie znacznika na
         `span.pole__gwiazdka` — nie deklaracja z arkusza; stara reguła ::first-letter
         nie dawała tego koloru na ekranie nigdy, choć getComputedStyle twierdził inaczej)
        (sam #FF8A3D dałby 3,56:1 — poniżej AA dla tekstu; tożsamość zostaje na
         dekoracji, tekst dostaje jaśniejszy odcień — wzorzec jak przy dostawywody)
     pole białe na granacie (obrys, WCAG 1.4.11)        8,36:1 (próg 3:1)
     granat na białym w polu i na przycisku             8,36:1
     przycisk hover: granat na #D7E1F0                  6,34:1
   FOKUS: globalny `outline:3px solid var(--granat)` (§2) jest NIEWIDOCZNY na
   granatowym tle (1:1), więc w formularzu fokus jest biały (8,36:1).
   UKŁAD: grid z `gap` zamiast marginesów <p>. Powód: `p:last-child{margin-bottom:0}`
   (§5) skasowałby odstęp pod drugim polem pary, gdy para spada do jednej kolumny.
   Para = `repeat(auto-fit,minmax(min(100%,17.5rem),1fr))` — bez zapytania o szerokość:
   dwie kolumny, gdy mieszczą się dwa pola po 17,5rem = 280 px (próg N3 bramki układu;
   formularz ma max 37rem = 592 px, więc para jest w rzędzie od okna ≈ 823 px),
   jedna kolumna, gdy nie. Żadnego `:has()`, żadnego JS.
   BRAMKA N4 („bloki tekstu obok siebie") zapala się na tej parze mimo to: pola to
   <p class="pole"> o wspólnym rodzicu, a bramka uznaje za zamierzone tylko pary
   o RÓŻNYCH rodzicach. To zamierzony układ (wzór usera), nie wada — patrz nota.
   MARKUP (data, nie zmieniany): label nad polem, abbr.pole__gwiazdka w etykiecie,
   span.pole__gwiazdka w legendzie (p.formularz__legenda), span.pole__podpowiedz po textarea, p.formularz__nota, p.formularz__akcja.
   Ciemnego motywu NIE MA (html{color-scheme:light}, §0) — formularz stoi na stałym
   granacie sekcji, więc jest od niego niezależny. */
.formularz{
  display:grid;
  gap:1.1rem;
  max-width:var(--tresc-max); /* 18b (U7): było 37 rem — pola zaczynały się na x=388, 55 px od
       kolumny tekstu (333), czyli „niedokładność", nie inna kolumna. 700 px = kolumna prozy */
  margin:1.75em auto 0;
  text-align:left;
}
.formularz>*{min-width:0}
.formularz__para{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));
  gap:1.1rem 1rem;
}
.pole{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin:0;
}
.pole label{
  font:600 15px/1.4 var(--font-tekst);
  color:#fff;
}
.pole__gwiazdka{
  color:#FFC299;
  text-decoration:none;   /* <abbr title> dostaje domyślnie kropkowane podkreślenie */
  /* cursor:help USUNIĘTY (runda 15b): znaczenie gwiazdki niesie widoczna legenda
     (.formularz__legenda), `title` zostaje w znaczniku jako dodatek dla myszy. Kursor
     „?” na celu jednego znaku obiecywał podpowiedź, której dotyk nie pokaże. */
}
/* Legenda „* pole wymagane" — <p> będący pierwszym dzieckiem gridu .formularz.
   Kolor jak nota (#D7E1F0 = 6,34:1 na granacie), lewa krawędź = lewa krawędź pól
   (grid + text-align:left z .formularz). Gwiazdka legendy to `span.pole__gwiazdka`
   w znaczniku (kolor #FFC299 z klasy powyżej). Odstęp od pierwszego pola = gap gridu
   (1,1 rem), bez własnych marginesów (pułapka #3).
   UWAGA: wcześniej była tu reguła ::first-letter — nigdy nie zadziałała (`* ` nie
   tworzy „pierwszej litery"), a komentarz tłumaczył, dlaczego działa. Nie wracać. */
.formularz__legenda{
  margin:0;
  font:400 14px/1.5 var(--font-tekst);
  color:#D7E1F0;
}
.pole input,
.pole textarea{
  display:block;
  width:100%;
  min-height:48px;          /* ≥ 44 px (WCAG 2.5.5) i równe przyciskowi (--przycisk-min-h) */
  padding:.6rem .85rem;
  font:400 16px/1.4 var(--font-tekst); /* 16 px: iOS nie przybliża strony przy fokusie */
  color:var(--granat);
  background:#fff;
  border:2px solid #fff;
  border-radius:var(--promien-mala);
}
.pole textarea{
  min-height:9rem;
  line-height:1.5;
  resize:vertical;          /* poziomo nie: rozepchałoby kolumnę poza max-width */
}
.pole__podpowiedz{
  font:400 14px/1.5 var(--font-tekst);
  color:#D7E1F0;
}
.cta .formularz :focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}
.formularz__nota{
  margin:0;
  font:400 14px/1.5 var(--font-tekst);
  color:#D7E1F0;
  text-align:center;
}
.formularz__akcja{margin:0;text-align:center}
/* Zatwierdzenie to najważniejsza akcja na stronie: wypełnione na biało (a nie
   kontur jak reszta przycisków w .cta). Selektor (0,2,0) jak `.cta .przycisk` z §9
   i późniejszy w pliku — wygrywa kolejnością; hover (0,3,0) wygrywa z `.cta .przycisk:hover`. */
.formularz__akcja .przycisk{
  background:#fff;border-color:#fff;color:var(--granat);
  min-width:min(100%,12rem);
}
.formularz__akcja .przycisk:hover,
.formularz__akcja .przycisk:focus-visible{
  background:var(--ramka);border-color:var(--ramka);color:var(--granat);
}
/* Widżet Turnstile ma stały rozmiar 300×65 (dokumentacja Cloudflare); rezerwa
   wysokości, żeby wstawienie go przez skrypt nie przesunęło noty i przycisku.
   Dziś pusty (TURNSTILE_SITEKEY = ""), więc bez skutku — NIEZWERYFIKOWANE na żywym widżecie. */
.cf-turnstile{display:flex;justify-content:center;min-height:65px}

/* ============================================================
   21. DALEJ W SERWISIE — sekcja z kartami-linkami. Rekomendacja do
   markupu: <nav aria-label="Dalej w serwisie"> wokół .dalej__lista,
   patrz §12 wyżej.
   ============================================================ */
.dalej{padding-block:2.5em}
.dalej__lista{margin:0}
/* RUNDA 13 (09.10), USTERKA U2: „Gdzie dalej" / „Where to go next" wisiało
   ~128 px na lewo od kolumny prozy (nagłówek i punktory od x≈205, pytania FAQ
   od x≈333 przy 1348 px). PRZYCZYNA: builder emituje ten blok jako
   `<nav class="dalej uklad">` — dziecko <main> PO zamknięciu <article>, więc
   żadna reguła prozy go nie obejmuje, a wspólne `.uklad` daje mu 70 vw
   (943,6 px przy 1348) zamiast kolumny 700 px. To NIE jest wzorzec
   `article.tresc …` z R12.2 (tu nie ma żadnej reguły, która by pudłowała —
   po prostu żadna nie istnieje); jest tylko kuzynem: oba biorą się stąd, że
   kolumna czytelnicza jest zapisana w kilku miejscach osobno.
   Rozwiązanie = dokładnie geometria `.tresc` z §3 (90 vw do 767 px, potem 100 %
   rodzica, w obu przypadkach max --tresc-max), więc blok ma tę samą lewą
   krawędź co proza i FAQ na KAŻDEJ szerokości. Poniżej 768 px nic się nie
   zmienia (`.uklad` = 90 vw, a 90 vw < 700 px do 777 px okna).
   Specyficzność (0,2,0) wygrywa z `.uklad` (0,1,0) niezależnie od kolejności
   w pliku — świadomie, bo `.uklad` stoi w §3, wyżej. */
.dalej.uklad{width:90vw;max-width:var(--tresc-max)}
@media(min-width:768px){.dalej.uklad{width:100%}}

/* ============================================================
   22. STOPKA
   ============================================================ */
.stopka{
  padding-block:2.5em;
  border-top:1px solid var(--ramka);
  background:var(--sekcja);
  font-size:14px;
}
.stopka__wnetrze{
  display:grid;
  grid-template-columns:1fr;
  gap:2em;
}
@media(min-width:640px){
  .stopka__wnetrze{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
/* RUNDA 18 (11.10): stopka wyglądała jak zaślepka — trzy równe kolumny po 418 px, a w każdej
   2–3 krótkie wiersze, więc między „SITE" a „COMPANY" ~380 px pustki i zero treści od 960
   do krawędzi. Od 900 px: kolumny mają szerokość SWOJEJ treści (marka do 34 znaków, dwie
   kolumny linków `max-content`), a `space-between` rozkłada je od lewej krawędzi
   do prawej — pierwsza przy osi strony, ostatnia przy prawym brzegu, środkowa pośrodku
   w równych odstępach. Pustka znika, bo nie ma już kolumn szerszych od zawartości.
   Reguła nie liczy linków (liczba kolumn = 3 z DOM); gdyby builder dodał czwartą,
   wypadnie ona do drugiego wiersza gridu zamiast się rozepchnąć — wtedy rozszerzyć tu
   `grid-template-columns`. Poniżej 900 px bez zmian (auto-fit). */
/* 18b: `space-between` zrobił kroki kolumn NIERÓWNE (55 / 722 / 1266, ~420 px pustki
   w środku). Równe kroki były lepsze, więc: trzy tory po 20 rem + odstęp 2 rem = krok
   352 px, kolumny od lewej osi. Prawa część paska zostaje pusta — to zwykła stopka
   zakotwiczona w lewej osi, a nie rozciągnięta na całą szerokość. */
@media(min-width:900px){
  .stopka__wnetrze{
    grid-template-columns:repeat(3,minmax(0,20rem));
    justify-content:start;
    column-gap:2rem;
  }
}
/* Builder emituje tytuły kolumn jako <h2> — bez tej reguły łapały skalę H2
   treści (48 px od 1024 px) i stopka krzyczała jak sekcja. Tytuł kolumny to
   etykieta UI. Rekomendacja do markupu (NOTA-BLOKI): <p>, nie <h2> — stopka
   nie powinna dokładać nagłówków do konspektu dokumentu. */
.stopka__kolumna h2,.stopka__tytul{
  margin:0 0 .8em;
  font:700 13px/1.3 var(--font-tekst);
  letter-spacing:.1em;
  text-transform:uppercase; /* etykieta UI, wersaliki — nie capitalize */
  color:var(--przygaszony);
}
.stopka__kolumna ul{list-style:none;margin:0;padding:0}
.stopka__kolumna li{margin-bottom:.5em}
.stopka a{color:var(--granat)}
.stopka a:hover{color:var(--niebieski)}

/* ============================================================
   23. FIGURA — obraz treściowy (zdjęcie/ilustracja), §7a kontraktu.
   RUNDA 03.10 (trzecia): `image-seo` już używa tej klasy w snippetach,
   w arkuszu jej brakowało — do tej pory samodzielne <figure>/<figcaption>
   bez klasy (§7, reguły po znaczniku) obsługiwały ten sam przypadek bez
   nazwy. Dodaję `.figura`/`.figura__podpis` jako jawne nazwy, NIE zmieniam
   znaczenia reguł po znaczniku niżej (nadal działają na <figure> bez klasy,
   gdyby ktoś go użył) — .figura tylko dokłada promień na obrazie, żeby
   zdjęcia treściowe pasowały do reszty "zaokrąglonego" systemu (karty,
   moduły, hero__media) ustalonego w poprzedniej rundzie korekty.
   ============================================================ */
.figura{margin:1.75em 0}
.figura img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--promien-mala);
}
.figura__podpis{
  font:400 14px/1.5 var(--font-tekst);
  color:var(--przygaszony);
  margin-top:.5em;
  text-wrap:pretty; /* 10.10 U5: bez 2–3-wyrazowej wdowy w ostatnim wierszu podpisu */
}

/* ============================================================
   24. KALKULATOR — pierwszy komponent interaktywny statyku 2 (pierwsze
   pola formularza w serwisie). Klasy i reguły przejęte z tymczasowego
   <style> w komponentach `_szablon/komponenty/kalkulator-koszt-leada-*.html`
   (NOTATKA-KALKULATOR_2026-10-03_v1.md, §6) — tu bez fallbacków `var(x,y)`,
   bo w tym pliku zmienne są już zdefiniowane (fallback miał sens tylko
   w komponencie wklejonym PRZED migracją tego arkusza). Builder ma usunąć
   blok inline po osadzeniu — bez tej sekcji kalkulator byłby goły.
   Karta NIE dziedziczy z `.karta`: `.karta` ma ustalony układ
   flex-column pod linki (obrazek+h3+p+przycisk), kalkulator ma inną
   wewnętrzną strukturę (pola + wyniki) — osobna klasa, wspólny JĘZYK
   (promień, obwódka, tło), nie wspólna reguła.
   ============================================================ */
.kalkulator{
  margin:1.75em 0;
  padding:1.5em;
  border:1px solid var(--ramka);
  border-radius:var(--promien);
  background:var(--bialy);
}
.kalkulator h3{margin-top:0}

.kalkulator__pola{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1em;
  margin:1.25em 0;
}
@media(min-width:640px){.kalkulator__pola{grid-template-columns:repeat(2,1fr)}}

.kalkulator__pole{display:flex;flex-direction:column;gap:.35em}
.kalkulator__pole label{
  font:600 14px/1.4 var(--font-tekst);
  color:var(--granat);
}

/* .kalkulator__input — PIERWSZE pole formularza w statyku 2, zero
   precedensu w arkuszu przed tą rundą. :focus-visible NIE jest
   powtórzony tutaj osobno — selektor globalny w §2 już zawiera `input`
   (`outline:3px solid var(--granat);outline-offset:3px`), więc pole
   kalkulatora dostaje ten sam pierścień fokusu co każdy inny element
   klikalny bez dodatkowej reguły. Jedyna osobna reguła niżej to
   WYGLĄD pola w stanie spoczynku, którego globalny `input` nie ustawia. */
.kalkulator__input{
  min-height:44px; /* minimum dotykowe WCAG, jak wszędzie indziej */
  padding:.5em .75em;
  font:400 16px/1.3 var(--font-tekst);
  color:var(--granat);
  background:var(--bialy);
  border:1px solid var(--ramka);
  border-radius:var(--promien-mala);
}

.kalkulator__wyniki{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1em;
  margin:1.5em 0;
  padding:1.25em;
  background:var(--sekcja);
  border-radius:var(--promien);
}
@media(min-width:640px){.kalkulator__wyniki{grid-template-columns:repeat(3,1fr)}}
.kalkulator__wynik{text-align:center}
.kalkulator__wynik-etykieta{
  font:600 14px/1.4 var(--font-tekst);
  color:var(--przygaszony);
  margin:0 0 .2em;
}
.kalkulator__wynik-wzor{
  font:400 12px/1.4 var(--font-tekst);
  color:var(--przygaszony);
  margin:0 0 .3em;
}
.kalkulator__wynik-wartosc{
  font:700 28px/1.1 var(--font-tekst); /* celowo mniejsze niż .liczba__wartosc
       (36–44px): te trzy liczby stoją W KARCIE obok etykiet i wzorów,
       nie jako samodzielny pasek — mniejsza skala utrzymuje hierarchię */
  color:var(--granat);
  margin:0;
}
.kalkulator__rozrzut{
  grid-column:1/-1;
  text-align:center;
  font:600 14px/1.4 var(--font-tekst);
  color:var(--granat);
  margin:.5em 0 0;
  padding-top:.75em;
  border-top:1px solid var(--ramka);
}
.kalkulator__uwaga{
  grid-column:1/-1;
  font:400 13px/1.5 var(--font-tekst);
  color:var(--granat);
  background:var(--bialy);
  border:1px solid var(--pomaranczowy); /* JEDYNE miejsce poza markerem
       ul i dekoracją hero, gdzie pomarańcz stoi na krawędzi widocznego
       elementu — tu uzasadnione: to ostrzeżenie, ma rzucać się w oczy
       bardziej niż reszta karty, a kontrast dotyczy TEKSTU (granat/biel,
       8,4:1), nie samej ramki */
  border-radius:var(--promien-mala);
  padding:.6em .9em;
  margin:0;
}
.kalkulator__uwaga[hidden]{display:none}

/* .kalkulator__jak-liczymy stoi POZA kartą w markupie (świadoma decyzja
   buildera po usterce bramki — patrz NOTATKA-KALKULATOR §1: `<p>` w
   `.wyroznik` zagnieżdżonym w podwójnie wyściełanej karcie spadał przy
   390px do 247px, próg bramki to 280px). Tu tylko odstęp od poprzedniego
   elementu w normalnym przepływie `.tresc` — bez własnego tła/ramki,
   żeby nie sugerować wizualnie, że to dalszy ciąg karty. */
.kalkulator__jak-liczymy{margin-top:1.5em}
.kalkulator__jak-liczymy h4{margin-bottom:.4em}
.kalkulator__jak-liczymy ul{margin:0 0 .75em;padding-left:1.2em}
.kalkulator__jak-liczymy li{margin-bottom:.4em}

/* ============================================================
   25. BIBLIOTEKA BLOKÓW (05.10.2026, agent webdesign)
   Diagnoza usera: „to co mamy jest bardzo prostą formą strony, nie nadaje się
   dla agenta żeby tworzył bloki Stackable". Statyk 2 wylewał treść w jedną
   kolumnę (h2 → akapit → lista → h2). Referencja (PKO) jest ZŁOŻONA Z BLOKÓW:
   hero z medium, siatka kart, sekcje dzielone, kalkulator, karty aktualności,
   wielokolumnowa stopka. Poniżej bloki z KOMPOZYCJI referencji, w palecie
   drySEO i bez ani jednego cudzego znaku/obrazu/koloru.

   KONWENCJA, od której zależy przeniesienie do Stackable: KAŻDY element
   wewnątrz bloku ma własną klasę (BEM), a reguły celują w klasy liścia, nie
   w strukturę kontenerów (`.karta-tem__tytul`, nie `.karta-tem>div>h3`).
   W Stackable klasę wpisuje się per blok w „Zaawansowane → Dodatkowe klasy
   CSS", więc skórka działa niezależnie od tego, ile wrapperów wstawi Stackable.
   Zachowanie strukturalne (siatka kolumn) żyje tu, w arkuszu, ale każde miejsce,
   gdzie to możliwe, ma odpowiednik natywny (Columns) — patrz NOTA-BLOKI.

   BRAMKA UKŁADU: karty i kolumny są zaprojektowane tak, by AKAPIT wewnątrz
   miał >= 280 px przy 1366/768/390/504 px. Liczba kolumn dobierana jest
   modyfikatorem (--2/--3/--4), nie auto-fit — wynik ma być deterministyczny.
   ============================================================ */

/* ---- 25.0 wspólne ---- */
/* Pasek nagłówka dostał 92vw w rundzie 5; bloki-pasma dostają to samo, bo
   70vw (kolumna czytelnicza) jest za wąskie na siatki kart i hero. Teksty
   ciągłe zostają w .tresc (700 px). */
.uklad.uklad--szeroki{width:90vw;max-width:var(--strona-max)}
@media(min-width:768px){.uklad.uklad--szeroki{width:92vw}}

/* eyebrow bloku — ta sama etykieta co .hero__nad */
.sekcja__nad,.podzial__nad,.karta-tem__nad{
  margin:0 0 .6em;
  font:700 12px/1.4 var(--font-tekst);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--przygaszony);
}
/* nagłówek sekcji: nadtytuł + H2 + lid, wyśrodkowany jak „Czego potrzebujesz?" */
/* RUNDA 18 (11.10) — JEDNA OŚ TEKSTU. Werdykt oglądacza: strona „co drugą sekcję zmienia
   zdanie, gdzie jest jej lewa krawędź". Zmierzone przy 1366 px na /seo/: proza i jej H2/H3
   na x=333, nagłówek pasma (to ten blok) WYŚRODKOWANY, tekst sekcji dzielonej na x=55,
   podpis pasma liczb na x=55 — cztery lewe krawędzie na jednej stronie.
   Reguła, którą wprowadzam (model „kontenera ograniczonego" z §27, dociągnięty do końca):
     TEKST (nagłówek, lid, akapit, podpis) stoi ZAWSZE w kolumnie 700 px na x=333;
     PUDEŁKA (karty, wykresy, siatki, pasma liczb) mogą być szersze, bo mają własną ramkę
     albo tło i nie udają, że są tekstem.
   Ten blok: lewy, w kolumnie tekstu (`margin-inline:auto` wyśrodkowuje KOLUMNĘ, nie
   napis). To rozstrzyga też „wyśrodkowany akapit prozy" (lid `.sekcja__lid`: 5 linii
   centrowanych przy 504 px, ostatnia wisząca) — wielolinijkowa proza centrowana czyta
   się źle, a tu żadnej centrowanej nie zostaje. Zostaje wyśrodkowany tylko hero bez
   medium i pasmo `.cta` — to osobne, zamknięte kompozycje na całą szerokość strony.
   Zmiana markupu NIE jest potrzebna: to ta sama klasa, inny arkusz. */
/* RUNDA 18b (11.10) — KOREKTA D1 PO OGLĄDZIE STRON GŁÓWNYCH. Pierwsza wersja tej reguły
   (nagłówek pasma lewy w kolumnie 700 px) przesuwała TEKST, ale nie MEBLE pasma: przy
   1366 px H2 stał na x=333, a karty pod nim na x=55 — nagłówek nie był ani na krawędzi
   pasma, ani na jego środku (278 px różnicy = 55 + 278). Język strony to DWA rodzaje
   nagłówków: artykułowy (lewy, w kolumnie prozy) i pasmowy (WYŚRODKOWANY nad treścią
   pełnej szerokości). Przywracam drugi. Z rundy 18 zostaje: sekcja dzielona jednokolumnowa
   (tekst w kolumnie, §25.5) i podpis pasma — nie, ten też wraca (§14).
   Poniżej 768 px nagłówek pasma jest LEWY: tam karty są w jednej kolumnie na całą
   szerokość, więc lewa krawędź nagłówka = lewa krawędź kart, a wielolinijkowy lid
   wyśrodkowany (5 linii przy 504 px, wisząca ostatnia) czytał się źle. */
.sekcja__glowa{max-width:46rem;margin:0 auto 2rem;text-align:left}
@media(min-width:768px){.sekcja__glowa{text-align:center}}
.sekcja__glowa--lewa{margin-left:0;text-align:left}
.sekcja__glowa h2{
  margin:0 0 .4em;
  font-size:28px;line-height:1.2;
}
@media(min-width:1024px){
  .sekcja__glowa h2{font-size:36px;line-height:1.15}
}
/* H2 w sekcji dzielonej stoi w kolumnie prozy, więc ma skalę H2 prozy (§4). */
.podzial__tekst h2{margin:0 0 .4em}
.sekcja__lid{margin:0;font-size:18px;color:var(--przygaszony)}

/* znacznik (pigułka) — rodzaj danych / dział; odpowiednik „Promocja" z kart
   aktualności referencji. Granat na jasnym tle ~7:1. */
.znacznik{
  display:inline-flex;align-items:center;
  padding:.25em .8em;
  border-radius:999px;
  background:#E4EDFC;
  color:var(--granat);
  font:600 12px/1.4 var(--font-tekst);
  letter-spacing:.02em;
}
.znacznik--kierunkowe{background:#FFE9D6}

/* ikony inline SVG — paleta marki. Ikona jest PODGLĄDEM: w Stackable
   odpowiada jej Icon Box z własną biblioteką ikon. */
.ikona{
  display:block;
  fill:none;
  stroke:var(--granat);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ikona .akcent{fill:var(--pomaranczowy);stroke:none}
.ikona .akcent2{fill:var(--niebieski);stroke:none}
.ikona .tlo{fill:#E4EDFC} /* jasne wypełnienie, obrys zostaje granatowy */

/* Element siatki ma domyślnie min-width:auto — obraz o szerokości własnej
   1139 px potrafił rozepchnąć kolumnę 1fr (bramka: 2 z 78 stron przy 768 px
   w jednym przebiegu pełnym, przy powtórce OK — zależne od momentu
   załadowania srcset). min-width:0 zdejmuje tę zależność. */
.hero__media,.podzial__media{min-width:0}

/* hero__akcje bywa parą przycisków (główny + kontur) */
.hero__akcje{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---- 25.1 HERO ze zdjęciem: .hero.hero--medium ----
   Zdjęcie bez karty-ramki, z dużym promieniem i przesuniętą jasną „płytą" za
   spodem — odpowiednik kolorowych płyt za zdjęciem na zrzutach PKO. Płyta to
   ::before w obrębie marginesu figure (nie wystaje poza komórkę siatki → zero
   poziomego przewijania). */
.hero--medium .hero__media{
  position:relative;
  margin:0 16px 16px 0;
  padding:0;
  background:none;
  box-shadow:none;
  border-radius:0;
  isolation:isolate;
}
.hero--medium .hero__media::before{
  content:"";
  position:absolute;
  inset:16px -16px -16px 16px;
  z-index:-1;
  border-radius:var(--promien-duza);
  background:linear-gradient(135deg,#CFE0F7 0%,#E4EDFC 60%,#FFE9D6 100%);
}
.hero--medium .hero__media img:not(.figura-dane__rysunek){
  border-radius:var(--promien-duza);
  box-shadow:var(--cien);
}

/* ---- 25.2 HERO z wykresem: .hero.hero--wykres ----
   Karta z gradientem (domyślne .hero__media) + podpis z mianownikiem POD
   wykresem. Wykres bez mianownika jest wadliwy (kontrakt §6), więc w tym
   wariancie figcaption jest obowiązkowy. */
.hero--wykres .hero__media{background:#fff;border:1px solid var(--ramka)}
.hero--wykres .hero__media .figura-dane__rysunek{
  /* biały rysunek na białej karcie — bez ramki wewnętrznej */
  border-radius:var(--promien-mala);
}
.hero__media figcaption{margin-top:.75em}

/* ---- 25.3 PASEK NAWIGACJI SEKCJI / PRZEŁĄCZNIK: nav.przelacznik ----
   Zakładki z hero PKO („Zyskaj do 900 zł | PKO Konto za Zero | …") i pasek
   sekcji ze strony bezpieczeństwa. Bez JavaScriptu: to LINKI (do podstron albo
   kotwic), nie zakładki z przełączaniem treści. */
.przelacznik{margin:0 0 1.5rem}
.przelacznik ul{
  display:inline-flex;flex-wrap:wrap;gap:4px;
  margin:0;padding:4px;
  list-style:none;
  background:#E4EDFC;
  border-radius:26px;
}
.przelacznik li{margin:0}
.przelacznik a{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:.4em 1.15em;
  border-radius:22px;
  color:var(--granat);
  font:600 14px/1.3 var(--font-tekst);
  text-decoration:none;
}
.przelacznik a:hover{background:rgba(255,255,255,.65);color:var(--granat)}
.przelacznik a[aria-current]{background:var(--bialy);box-shadow:var(--cien)}

/* ---- 25.4 SIATKA KART TEMATYCZNYCH: .karty-tem + article.karta-tem ----
   Karta: płyta z ikoną na gradiencie (zamiast ilustracji produktowej, której
   nie mamy), nadtytuł, tytuł-link, zdanie, wskazówka „Dalej". Cała karta
   klikalna przez rozciągnięty link (::after na linku tytułu) — zero JS, zero
   drugiego linku „czytaj więcej" dublującego cel. */
.karty-tem{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:700px){
  .karty-tem--2,.karty-tem--4{grid-template-columns:repeat(2,1fr)}
}

/* ---- RUNDA 10 (06.10): PRÓG TRZECH KOLUMN 1100 -> 1140 px + stopień dwóch kolumn
   Usterkę złapała bramka po dołożeniu szerokości 1100 px: na OBU stronach głównych
   6 z 40 bloków tekstu miało 274 px, czyli 6 px pod progiem czytelności (280 px).
   Źródłem był ten komponent i tylko on — `.karty-tem--3` występuje w serwisie
   dokładnie dwa razy (`index.html`, `pl/index.html`), po trzy karty.

   ARYTMETYKA, nie gust. Kontener `.uklad--szeroki` = 92 vw; karta = (0,92 W − 2 × 20)/3;
   tekst = karta − 2 px ramki − 48 px wyściółki. Przy 1100 px: (1012 − 40)/3 = 324,
   324 − 50 = 274. Żeby tekst miał 280 px, potrzeba W ≥ 1113 px. Próg ustawiony
   na 1140 px (tekst 286 px, zapas 27 px szerokości okna) — bramka mierzy 1100 px
   pod progiem i 1366 px nad nim, więc przełącznik ma pomiar po OBU stronach.

   DRUGI STOPIEŃ (768–1139 px) nie jest ozdobnikiem, tylko naprawą tego, co samo
   przesunięcie progu by pogorszyło. Bez niego trzy karty idą w SŁUPEK na całą
   szerokość: przy 1000 px karta ma 920 px, a nad 15-pikselowym zdaniem stoi
   132-pikselowa płyta z jedną ikoną pośrodku (zrzut PRZED-PL-kartytem_1000.png).
   Dwie kolumny + trzecia karta na środku dają przy 768 px tekst 293 px, przy 900 px
   354 px — obie szerokości są mierzone przez bramkę, próg 768 px też leży między
   pomiarami (390 pod, 768 na nim).

   Technika jak w §25.10a: cztery tory, karta zajmuje dwa, ostatnia nieparzysta
   zaczyna się od toru 2 — wtedy przesunięcie o pół kolumny jest wyrażalne,
   a wszystkie karty mają TĘ SAMĄ szerokość (przy 900 px: 404 px, margines
   lewy 212 = prawy 212). Liczność rozpoznaje `:last-child:nth-child(odd)`;
   `:has()` niepotrzebne, bo liczbę torów ustala klasa, nie zawartość. */
@media(min-width:768px) and (max-width:1139.98px){
  .karty-tem--3{grid-template-columns:repeat(4,1fr)}
  .karty-tem--3>.karta-tem{grid-column:span 2}
  .karty-tem--3>.karta-tem:last-child:nth-child(odd){grid-column:2/span 2}
}
@media(min-width:1140px){
  .karty-tem--3{grid-template-columns:repeat(3,1fr)}
}
.karta-tem{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--bialy);
  border:1px solid var(--ramka);
  border-radius:24px;
  box-shadow:var(--cien);
  transition:transform .25s var(--przycisk-ease),
             box-shadow .25s var(--przycisk-ease),
             border-color .25s var(--przycisk-ease);
}
.karta-tem:hover{
  transform:translateY(-3px);
  border-color:var(--niebieski);
  box-shadow:var(--cien-mocny);
}
.karta-tem__wizual{
  display:flex;align-items:center;justify-content:center;
  height:132px;
  border-radius:23px 23px 0 0;
  background:linear-gradient(160deg,#F5F9FF 0%,#DCE8FA 100%);
}
/* trzy tony płyty z palety — rytm w siatce bez zdjęć */
.karta-tem:nth-child(3n+2) .karta-tem__wizual{background:linear-gradient(160deg,#FFF6EE 0%,#FFE2CA 100%)}
.karta-tem:nth-child(3n+3) .karta-tem__wizual{background:linear-gradient(160deg,#EEF3FB 0%,#C9DBF3 100%)}
.karta-tem__tresc{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:1.25rem 1.5rem 1.5rem;
}
.karta-tem__tytul{margin:0 0 .4em;font-size:20px;line-height:1.25}
@media(min-width:1024px){.karta-tem__tytul{font-size:22px}}
.karta-tem__opis{margin:0;font-size:15px;color:var(--przygaszony)}
.karta-tem__dalej{
  margin-top:auto;padding-top:1rem;
  font:600 14px/1.3 var(--font-tekst);
  color:var(--granat);
}
.karta-tem__dalej::after{content:" →";content:" →" / ""}

/* rozciągnięty link: wspólne dla kart tematycznych i kart „dalej" */
.karta-tem__tytul a,.dalej-karta__tytul a{color:inherit;text-decoration:none}
.karta-tem__tytul a::after,.dalej-karta__tytul a::after{
  content:"";
  position:absolute;inset:0;
  border-radius:24px;
  z-index:1;
}
.karta-tem:hover .karta-tem__tytul a,
.dalej-karta:hover .dalej-karta__tytul a{text-decoration:underline;text-underline-offset:3px}
/* fokus rysujemy na rozciągniętym ::after (obejmuje całą kartę), nie na samym
   tekście linku; granat 8,4:1 jak wszędzie */
.karta-tem__tytul a:focus-visible,.dalej-karta__tytul a:focus-visible{outline:none}
.karta-tem__tytul a:focus-visible::after,
.dalej-karta__tytul a:focus-visible::after{
  outline:3px solid var(--granat);
  outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .karta-tem,.dalej-karta{transition:none}
  .karta-tem:hover,.dalej-karta:hover{transform:none}
}

/* ---- 25.5 SEKCJA DZIELONA tekst <-> wizual: .podzial ----
   Naprzemienność robi KOLEJNOŚĆ W KODZIE, nie CSS: wariant --odwrocony ma
   w DOM najpierw medium, potem tekst (reguła wzorca: kolejność w kodzie =
   kolejność czytania, nic nie jest przestawiane arkuszem). Na telefonie oba
   warianty układają się w słupek zgodnie z DOM. */
.podzial{
  display:grid;grid-template-columns:1fr;
  /* RUNDA 11 (07.10): `center` → `start`. Wyśrodkowanie w pionie zakłada, że obie
     kolumny mają podobną wysokość. Tu nie mają: karta z wykresem bywa dwa razy
     wyższa od kolumny tekstu, a `center` zamieniał tę różnicę na BIAŁĄ DZIURĘ
     NAD TEKSTEM — zmierzone 290 px (karta od y=287, nagłówek od y=577) i 130 px
     w łagodniejszym przypadku. Czytelnik widział wtedy nagłówek sekcji dopiero
     w połowie wysokości pasma, poniżej linii zgięcia. `start` wiąże obie kolumny
     wspólną górną krawędzią — ta sama oś, na której stoi reszta serwisu (§27). */
  gap:2rem;align-items:start;
}
/* RUNDA 18 (11.10) — SEKCJA DZIELONA JEST TERAZ JEDNOKOLUMNOWA NA KAŻDEJ SZEROKOŚCI.
   DECYZJA, nie szlif: od 900 px były dwie równe kolumny (tekst | karta), co dawało DWIE
   usterki z oglądu oglądacza naraz.
   (1) lewa krawędź: tekst sekcji (H3, akapity) w lewej kolumnie na x=55, a H2 tej samej
       sekcji — stojący w sąsiednim bloku prozy — na x=333; ten sam poziom nagłówka
       skakał o 278 px w obrębie jednej strony.
   (2) ~500 px pustej połowy: karta wykresu ma 1370 px wysokości, tekst obok 870 px.
       Poprzednie lekarstwo (§25.5, `align-items:start`) zabrało dziurę SPOD tekstu nad
       niego, ale nie zlikwidowało; przy karcie wyższej o połowę od tekstu zostaje zawsze.
   Układ dwukolumnowy przy tej proporcji tekst:medium jest z natury niestabilny, więc
   zamiast trzeciej łatki — wyjmuję jego przyczynę: tekst wchodzi do kolumny prozy
   (700 px, x=333), medium pod nim w TEJ SAMEJ kolumnie (karta wykresu 700 px, jej
   krawędzie = krawędzie tekstu). Zero dziur, jedna oś.
   CENA, nazwana wprost: sekcja jest wyższa (suma, nie max); pierwszy ekran sekcji to tekst
   bez rysunku. Rysunek wykresu ma 660 px zamiast ~560 px, czyli czytelniejszy.
   KOLEJNOŚĆ: wariant `--odwrocony` ma w DOM najpierw medium, potem tekst (zasada wzorca:
   kolejność w kodzie = kolejność czytania). Jednokolumnowo karta przed nagłówkiem sekcji
   czytałaby się źle, więc `order:-1` stawia tekst pierwszy. Czytnik ekranu dalej dostaje
   kolejność z DOM. REKOMENDACJA DO MARKUPU: builder emituje tekst przed medium w obu
   wariantach, wtedy `order` jest zbędny (patrz meldunek). */
.podzial__tekst{width:100%;max-width:var(--tresc-max);margin-inline:auto;order:-1}
/* Tekst pierwszy, medium drugie — w obu wariantach. `order` na medium wyższy niż na tekście
   gwarantuje to także, gdy builder jednego dnia zmieni kolejność w DOM. */
.podzial__media{order:0}
.podzial__tekst>:first-child{margin-top:0}
.podzial__tekst p{color:var(--granat)}
.podzial__tekst .przycisk{margin-top:.5rem}
.podzial__media{
  position:relative;
  margin:0 16px 16px 0;
  isolation:isolate;
}
.podzial__media::before{
  content:"";
  position:absolute;
  inset:16px -16px -16px 16px;
  z-index:-1;
  border-radius:var(--promien-duza);
  background:linear-gradient(135deg,#CFE0F7 0%,#E4EDFC 60%,#FFE9D6 100%);
}
.podzial--odwrocony .podzial__media{margin:0 0 16px 16px}
.podzial--odwrocony .podzial__media::before{inset:16px 16px -16px -16px}
.podzial__media img:not(.figura-dane__rysunek){
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--promien-duza);
  box-shadow:var(--cien);
}
/* pionowe zdjęcie (np. 864x1184): kadr 4/5, a nie rozciągnięcie kolumny na
   pół ekranu (pułapka #4 — width:auto/aspect-ratio zamiast dwóch max-*) */
.podzial__media--pion{justify-self:center;width:min(440px,calc(100% - 16px))} /* węższy figure, żeby płyta za zdjęciem nie była szersza od zdjęcia */
.podzial__media--pion img:not(.figura-dane__rysunek){aspect-ratio:4/5}
/* wariant z wykresem: medium jest kartą danych (figure.figura-dane), nie zdjęciem */
.podzial__media.figura-dane{
  margin:0;padding:1.25rem;
  background:var(--bialy);
}
.podzial__media.figura-dane::before{display:none}
.podzial--odwrocony .podzial__media.figura-dane{margin:0}
/* RUNDA 18: medium pod tekstem, w kolumnie prozy — krawędzie karty = krawędzie tekstu.
   Zdjęcie: `100% − 32px` zostawia 16 px po obu stronach na płytę za zdjęciem (§25.5 ją
   przesuwa o 16 px w jedną stronę), więc na telefonie nic nie wychodzi poza kontener.
   Margines poziomy zdjęty (centruje `justify-self`), inaczej margin-box przesuwał
   zdjęcie o 8 px od krawędzi tekstu. Karta wykresu: pełna szerokość kolumny. */
.podzial__media{justify-self:center}
.podzial__media:not(.figura-dane):not(.podzial__media--pion){
  width:min(var(--tresc-max),calc(100% - 32px));
  margin:0 0 16px;
}
.podzial__media.figura-dane{width:100%;max-width:var(--tresc-max)}
.podzial .podzial__media--pion{margin:0 0 16px}

/* ---- 25.6 IKONA + TEKST: ul/ol.ikony > li.ikona-tekst ----
   Cecha albo krok procesu. W ol (kroki) numer jest w znaczniku jako
   aria-hidden — czytnik ekranu słyszy numerację z <ol>, nie dwa razy. */
.ikony{
  display:grid;grid-template-columns:1fr;gap:1.75rem;
  margin:0;padding:0;list-style:none;
}
@media(min-width:900px){
  .ikony--2{grid-template-columns:repeat(2,1fr)}
}
/* RUNDA 8 (06.10): próg trzech kolumn 900 → 1000 px. Przy 92 vw i dwóch
   odstępach 2 rem kolumna miała 254 px przy 900 px i 280 px dopiero od ~980 px
   — poniżej progu bramki (280), ale między jej szerokościami pomiarowymi (768
   i 1366), więc nikt tego nie widział. Przy 112 siatkach w serwisie to już nie
   jest przypadek brzegowy. Od 1000 px: (920 − 64) / 3 = 285 px. */
@media(min-width:1000px){
  .ikony--3{grid-template-columns:repeat(3,1fr);gap:2rem}
}
@media(min-width:640px){.ikony--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1340px){.ikony--4{grid-template-columns:repeat(4,1fr)}}
.ikona-tekst{position:relative;margin:0}
.ikona-tekst__ikona{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;
  margin-bottom:1rem;
  border-radius:20px;
  background:linear-gradient(160deg,#F5F9FF 0%,#DCE8FA 100%);
}
/* RUNDA 14 (09.10), N1: numer stał przy SĄSIEDNIEJ pozycji. Przyczyna jedna na każdej
   szerokości: numer jest `position:absolute` w `.ikona-tekst` (relative), a poprzednie
   `right:0` doklejało go do PRAWEJ krawędzi komórki — czyli do miejsca, za którym (w rzędzie)
   zaczyna się ikona następnej pozycji, a w jednej kolumnie (640–999 px, `.ikony--3`) do
   krawędzi pola ~800 px od własnego tekstu. Nie zależy to od szerokości toru, tylko od tego,
   KTÓRĄ krawędź komórki wybrano. Numer stoi teraz tuż za własnym kafelem ikony (lewa
   krawędź = szerokość kafla 64 px + 1 rem), w jego osi pionowej: odległość od własnej ikony
   jest stała (16 px) i nie rośnie z szerokością, a sąsiad jest zawsze dalej o cały odstęp
   siatki. Zmiana nie wpływa na układ (absolute) — pozycje, tytuły i ikony nie drgają.
   Rozmiar kafla trzymany w jednym miejscu: `.ikona-tekst__ikona` (64 px) wyżej. */
.ikona-tekst__numer{
  position:absolute;top:0;left:calc(64px + 1rem);
  display:flex;align-items:center;height:64px; /* oś pionowa kafla, nie góra komórki */
  font:700 44px/1 var(--font-tekst);
  color:var(--ramka);  /* dekoracja bez znaczenia (numer niesie <ol>) — poza progiem AA tekstu */
}
.ikona-tekst__tytul{margin:0 0 .35em;font-size:20px;line-height:1.25}
.ikona-tekst__opis{margin:0;font-size:16px;color:var(--przygaszony)}

/* ---- 25.6a WARIANT BEZ IKONY: .ikony.ikony--bez-ikon (RUNDA 8, 06.10) ----
   Builder rozpoznaje listy „pogrubienie + opis" automatycznie (112 siatek na
   ~55 stronach) i nie ma skąd wziąć ikony pasującej do treści — bierze
   generyczną z cyklu ośmiu. Ikona, która nic nie znaczy, jest szumem, a przy
   112 powtórzeniach uczy czytelnika ją ignorować. Wariant bez ikony buduje
   sygnał pozycji typografią, tym samym językiem co reszta arkusza:
     - lista cech (ul):  krótka pomarańczowa kreska nad tytułem (jak .liczba),
     - lista kroków (ol): numer w granatowym kółku (jak kroki w prozie, §26.5).
   Działa w obu postaciach znacznika: gdy builder NIE emituje
   `.ikona-tekst__ikona` (docelowo) i gdy emituje — wtedy ikona jest chowana.
   Numer: istniejący `.ikona-tekst__numer` (aria-hidden) zostaje nośnikiem;
   gdy go brak (np. markup ze Stackable), numer dorysowuje licznik CSS. */
.ikony--bez-ikon .ikona-tekst__ikona{display:none}
ul.ikony--bez-ikon .ikona-tekst::before{
  content:"";
  display:block;
  width:40px;height:4px;
  margin-bottom:1rem;
  border-radius:2px;
  background:var(--pomaranczowy); /* dekoracja, próg AA nie dotyczy */
}
ol.ikony--bez-ikon{counter-reset:ikona}
ol.ikony--bez-ikon .ikona-tekst{counter-increment:ikona}
ol.ikony--bez-ikon .ikona-tekst__numer,
ol.ikony--bez-ikon .ikona-tekst:not(:has(.ikona-tekst__numer))::before{
  position:static;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.15rem;height:2.15rem;
  margin-bottom:.9rem;
  border-radius:50%;
  background:var(--granat);
  color:var(--bialy); /* 8,4:1 */
  font:700 15px/1 var(--font-tekst);
  letter-spacing:0;
}
ol.ikony--bez-ikon .ikona-tekst:not(:has(.ikona-tekst__numer))::before{
  content:counter(ikona);
  content:counter(ikona) / ""; /* numerację słyszy się z <ol> */
}

/* ---- 25.6b NIEPEŁNY OSTATNI RZĄD SIATKI `.ikony` (RUNDA 11, 07.10) ----

   TO JEST COFNIĘCIE DECYZJI Z RUNDY 9. Napisałem tam: „ostatni niepełny rząd
   KART jest wyśrodkowany; ostatni niepełny rząd TEKSTU (`.ikony`) zostaje przy
   lewej osi", bo pozycja siatki nie ma pudełka, więc pusta komórka miała być
   tylko poszarpanym końcem akapitu. **Zakład przegrany, i to dwoma pomiarami,
   nie opinią:**

   1. Siatka `.ikony` stoi w `.uklad--szeroki`, a proza pod nią w kolumnie
      czytelniczej — zmierzone na `/seo/` przy 1366 px: siatka zaczyna się
      na x=55, akapit na x=333. Pusta komórka nie jest więc „jedną pozycją",
      tylko ĆWIARTKĄ SZEROKOŚCI EKRANU (x≈913–1310) w najszerszym elemencie
      pasma. To największa pojedyncza dziura na stronie.
   2. Argument „to tylko tekst, nie pudełka" nie trzyma się przy wariancie
      Z IKONAMI: kafel ikony ma 64×64 px, własne tło i promień. Rząd trzech
      kafli obiecuje rytm, którego drugi rząd nie dotrzymuje.
   3. Na tej samej stronie karty „dalej" są już wyśrodkowane (§25.10a).
      Dwie odpowiedzi na to samo pytanie w jednym widoku widać gołym okiem —
      i audytor je zobaczył.

   Argument z rundy 9 „krok 4 przestanie stać pod krokiem 1, bo numerowana
   sekwencja czyta się po kolumnach" był po prostu błędny: `grid-auto-flow`
   jest RZĘDOWY, więc sekwencja czyta się 1-2-3 / 4-5, wierszami. Pionowe
   sąsiedztwo kroku 1 i 4 było przypadkiem układu, nie nośnikiem kolejności —
   kolejność niesie `<ol>` i widoczny numer.

   ZAKRES, zmierzony na 78 stronach: 39 siatek ma niepełny ostatni rząd
   (37 × `ikony--3` po 5 pozycji, 2 × `ikony--4` po 7). Pełne są: `--3` po 3 i 6
   (69 siatek), `--4` po 4 (57), `--2` po 2 (8) — tych reguła nie dotyka.

   TECHNIKA: ta sama co §25.10a — dwa razy tyle torów, pozycja zajmuje dwa,
   więc przesunięcie o PÓŁ KOLUMNY staje się wyrażalne, a wszystkie pozycje mają
   tę samą szerokość i ten sam odstęp co rząd pierwszy (6t+5g = 3×(2t+g)+2g).
   RÓŻNICA WOBEC §25.10a, celowa: **bez `:has()`**. Resztę z dzielenia czyta się
   z samej pozycji (`:last-child:nth-child(3n+2)` = ostatni rząd ma dwie pozycje),
   więc kontener nie musi liczyć dzieci. Działa w Safari < 15.4 i Firefox < 121,
   a reguły są modularne — nie wyliczam liczb pozycji, więc nowa strona z ósemką
   albo jedenastką dostanie to samo bez dopisywania selektora.
   Reguły są jawne, nie zostawione autoukładaniu (§25: wynik deterministyczny). */

/* dwie kolumny: `--2` od 900 px oraz `--4` w paśmie 640–1339 px.
   Zakres `--4` domknięty `max-width`, żeby nie zderzał się z blokiem
   czterokolumnowym niżej (ta sama ostrożność co §25.10a). */
@media(min-width:900px){
  .ikony--2{grid-template-columns:repeat(4,1fr)}
  .ikony--2>li{grid-column:span 2}
  .ikony--2>li:last-child:nth-child(odd):not(:first-child){grid-column:2/span 2}
}
@media(min-width:640px) and (max-width:1339.98px){
  .ikony--4{grid-template-columns:repeat(4,1fr)}
  .ikony--4>li{grid-column:span 2}
  .ikony--4>li:last-child:nth-child(odd):not(:first-child){grid-column:2/span 2}
}

/* trzy kolumny (`--3` od 1000 px) — sześć torów */
@media(min-width:1000px){
  .ikony--3{grid-template-columns:repeat(6,1fr)}
  .ikony--3>li{grid-column:span 2}
  /* reszta 2 (5, 8, 11 pozycji — w serwisie 37 siatek): dwie ostatnie od toru 2 i 4 */
  .ikony--3>li:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
  .ikony--3>li:last-child:nth-child(3n+2){grid-column:4/span 2}
  /* reszta 1 (4, 7, 10): ostatnia na środku, po dwa tory z obu stron */
  .ikony--3>li:last-child:nth-child(3n+1):not(:first-child){grid-column:3/span 2}
}

/* cztery kolumny (`--4` od 1340 px) — osiem torów */
@media(min-width:1340px){
  .ikony--4{grid-template-columns:repeat(8,1fr)}
  .ikony--4>li{grid-column:span 2}
  /* reszta 3 (7, 11 pozycji — w serwisie 2 siatki): trzy ostatnie od toru 2, 4, 6 */
  .ikony--4>li:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}
  .ikony--4>li:nth-last-child(2):nth-child(4n+2){grid-column:4/span 2}
  .ikony--4>li:last-child:nth-child(4n+3){grid-column:6/span 2}
  /* reszta 2 (6, 10): dwie ostatnie od toru 3 i 5 */
  .ikony--4>li:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
  .ikony--4>li:last-child:nth-child(4n+2){grid-column:5/span 2}
  /* reszta 1 (5, 9): ostatnia od toru 4 — po trzy tory z obu stron */
  .ikony--4>li:last-child:nth-child(4n+1):not(:first-child){grid-column:4/span 2}
}

/* ---- 25.7 TEZA (callout): aside.teza ----
   Duży wyróżnik — kluczowa teza strony, wyciągnięta ponad tekst. NIE zastępuje
   .wyroznik (mała karta w kolumnie artykułu); .teza stoi w paśmie. Zasada ta
   sama: tekst musi nieść całą treść sam, teza go streszcza. */
/* RUNDA 12 (08.10), USTERKA B z audytu pary 2 — „ok. 45% pola stoi puste".
   SPROSTOWANIE DO ZLECENIA: audyt nazwał ten blok `.wyroznik`. To nie jest
   `.wyroznik` — na `seo/index.html` i `pl/seo-pozycjonowanie-stron/` nie ma
   ANI JEDNEGO `.wyroznik` (klasa występuje w całym serwisie na 2 stronach:
   `pl/generowanie-leadow/koszt/` i `lead-generation/cost/`). Blok ze zrzutu to
   `aside.teza` — i dobrze, że sprawdziłem, bo poprawka w `.wyroznik` nie
   ruszyłaby zgłoszonej strony ani o piksel.

   POMIAR (EN `seo/`, okno 1366 px): płyta `aside.teza` 54,6…1311,4 = 1256,7 px,
   a `.teza__tekst` ma `max-width:40ch` i łamie się na 710,6 px. Po odjęciu
   wyściółki (52 + 48) zostaje 446,1 px gołej pastelowej płachty po prawej —
   to jest te „45%" (1 − 710,6/1256,7 = 43,5% płyty).

   CZEGO NIE ROBIĘ I DLACZEGO: nie zdejmuję `max-width:40ch` z tekstu. 40 znaków
   w kroju 32 px to DOBRY wiersz tezy; poszerzenie go do pełnej szerokości pasma
   dałoby linie po ~70 znaków w 32 px, czyli naprawiłbym pustkę, psując to,
   po co teza istnieje. Pusta jest PŁYTA, nie wiersz — więc zwężam płytę.

   52rem = 832 px to nie jest liczba z gustu: 710,6 (próg tekstu) + 52 (wyściółka
   lewa) + 48 (prawa) = 810,6 px, czyli najmniejsza płyta, przy której tekst
   NIE ŁAMIE SIĘ INACZEJ NIŻ DZIŚ. Stąd zero zmiany wysokości na 8 stronach
   z tezą — w tym na wzorcu `pl/index.html`. Nadmiar 21,4 px ląduje po prawej,
   więc efektywne światło to 52 px z lewej i 69,4 z prawej: płyta oddycha,
   zamiast ciasno obejmować najdłuższy wiersz.
   To NIE JEST nowy próg układu — `max-width` nie przełącza niczego, tylko
   przestaje rosnąć; wiąże dopiero powyżej ~904 px okna, a bramka ma 900 i 1100
   po obu stronach tego punktu. Poniżej 904 px reguła jest bezczynna. */
.teza{
  position:relative;
  margin:0;
  max-width:var(--tresc-max); /* RUNDA 19 (U1): było 52rem (832 px) = czwarta szerokość
       na ekranie (x=270, obok 333 / 219 / 57). Teza to tekst z własnym tłem, a lewy
       pomarańczowy słupek ma teraz stać na tej samej osi co kreska §26 (333). Cena:
       tekst 32 px ma 600 px zamiast 710 px, więc teza łamie się o ~1 linię więcej
       (+~40 px wysokości na 8 stronach) — ZMIERZYĆ. `max-width:40ch` tekstu nie wiąże
       już niczego (600 < 710) i zostaje jako bezpiecznik. */
  margin-inline:auto; /* rodzic `.uklad--szeroki` jest zwykłym blokiem (sprawdzone:
       żadna reguła nie daje mu display:flex/grid) — więc automatyczny margines
       NIE wyłącza tu rozciągania, jak potrafi na dziecku flexa. Stoi w TEJ SAMEJ
       regule co `margin:0` i PO nim, żeby skrót go nie skasował. */
  padding:1.75rem 1.5rem 1.75rem 2rem;
  border-radius:var(--promien-duza);
  background:linear-gradient(135deg,var(--sekcja-g1) 0%,#E4EDFC 100%);
  overflow:hidden;
}
@media(min-width:768px){.teza{padding:2.5rem 3rem 2.5rem 3.25rem}}
.teza::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;
  width:8px;
  background:var(--pomaranczowy);
}
.teza__etykieta{
  margin:0 0 .8em;
  font:700 12px/1.4 var(--font-tekst);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--przygaszony);
}
.teza__tekst{
  margin:0;
  max-width:40ch;
  font:600 22px/1.3 var(--font-tekst);
  color:var(--granat);
}
@media(min-width:768px){.teza__tekst{font-size:32px;line-height:1.25}}
.teza__zrodlo{
  margin:1em 0 0;
  font:400 13px/1.4 var(--font-tekst);
  color:var(--przygaszony);
}

/* ---- 25.8 PASMO CTA: .cta-pasmo ----
   Zaokrąglone pasmo na gradiencie granatu z jednym wezwaniem. Różni się od
   .cta (pełnoszerokie, płaskie): pasmo siedzi W układzie, ma promień i
   dekoracyjną poświatę. Poświata jest w rogu, z dala od tekstu, i przycięta
   przez overflow:hidden — tekst leży na czystym granacie (biały na #264F80 =
   8,4:1, na końcu gradientu #2E69A8 = 5,7:1). */
.cta-pasmo{
  position:relative;
  overflow:hidden;
  display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;
  padding:2rem 1.5rem;
  border-radius:var(--promien-duza);
  background:linear-gradient(120deg,var(--granat-ciemny) 0%,var(--granat) 55%,#2E69A8 100%);
  color:#fff;
}
@media(min-width:800px){
  .cta-pasmo{grid-template-columns:1fr auto;gap:3rem;padding:3rem 3.5rem}
}
.cta-pasmo::before{
  content:"";
  position:absolute;right:-60px;top:-90px;
  width:260px;height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,61,.55) 0%,rgba(255,138,61,0) 70%);
  pointer-events:none;
}
.cta-pasmo>*{position:relative}
.cta-pasmo__tytul{margin:0 0 .4em;color:#fff;font-size:28px;line-height:1.2}
@media(min-width:1024px){.cta-pasmo__tytul{font-size:36px}}
.cta-pasmo__tekst p{margin:0;max-width:46ch;color:#fff;font-size:18px}
.cta-pasmo__akcje{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
/* przyciski na ciemnym tle: główny = biały wypełniony (granat na bieli 8,4:1),
   drugi = kontur biały. Selektory z a. — ta sama przyczyna co przy
   .przycisk--glowny: specyficzność bazowego a.przycisk (0,1,1). */
.cta-pasmo a.przycisk{background:transparent;border-color:#fff;color:#fff}
.cta-pasmo a.przycisk:hover,.cta-pasmo a.przycisk:focus-visible{
  background:#fff;border-color:#fff;color:var(--granat);box-shadow:none;
}
.cta-pasmo a.przycisk--glowny{background:#fff;border-color:#fff;color:var(--granat)}
.cta-pasmo a.przycisk--glowny:hover,.cta-pasmo a.przycisk--glowny:focus-visible{
  background:#FFE9D6;border-color:#FFE9D6;color:var(--granat);
}
.cta-pasmo a:focus-visible{outline-color:#fff} /* fokus biały na granacie */

/* ---- 25.9 LISTA ODHACZEŃ: ul.odhaczenia ----
   Jak „Bezpieczeństwo Twoich finansów" u PKO: hasło + zdanie, znacznik-ptaszek
   w kółku. Ptaszek to tło CSS (data-URI) — dekoracja, nie treść; treść niesie
   <li>. Odpowiednik w Stackable: Icon List z ikoną „check". */
.odhaczenia{margin:0;padding:0;list-style:none}
.odhaczenia li{
  position:relative;
  margin:0;
  padding:1.1rem 0 1.1rem 3.1rem;
  border-top:1px solid var(--ramka);
  line-height:1.55;
}
.odhaczenia li:last-child{border-bottom:1px solid var(--ramka)}
.odhaczenia li::before{
  content:"";
  position:absolute;left:0;top:1.15rem;
  width:30px;height:30px;
  border-radius:50%;
  background:var(--niebieski) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;
}
/* Stackable Icon List rysuje własny ptaszek i nie przyjmie klas na spanach —
   wariant dla niego: wyłącz nasz ::before i celuj w <strong> w pozycji. */
.odhaczenia--natywna-ikona li{padding-left:0}
.odhaczenia--natywna-ikona li::before{display:none}
.odhaczenia strong{display:block;font-weight:600;font-size:17px;color:var(--granat)}
.odhaczenia__tytul{display:block;font-weight:600;font-size:17px;color:var(--granat)}
.odhaczenia__opis{display:block;margin-top:.15em;color:var(--przygaszony);font-size:15px}

/* ---- 25.10 KARTY „DALEJ W SERWISIE": nav.dalej-karty ----
   Zwarte karty tekstowe jak „Aktualności" w referencji: znacznik + tytuł +
   zdanie. Siedzą w <nav> (zbiór przejść), więc bramka N3/N4 ich nie mierzy —
   ale i tak mieszczą się w 280 px. */
.dalej-karty__lista{
  display:grid;grid-template-columns:1fr;gap:1.25rem;
  margin:0;padding:0;list-style:none;
}
/* Liczba TORÓW siatki jest od RUNDY 13 (09.10) stała i podwójna: 4 tory przy
   700–1099 px (karta = 2 tory = „dwie kolumny"), 6 torów od 1100 px (karta =
   2 tory = „trzy kolumny"). Karta zajmuje dwa tory, więc pełny rząd wygląda
   co do piksela jak dawne `repeat(2,1fr)` / `repeat(3,1fr)`, a ostatni
   niepełny rząd da się przesunąć o POŁOWĘ kolumny — patrz §25.10a, gdzie
   leży cała reguła. Zasada 1 kolumny poniżej 700 px bez zmian. */
@media(min-width:700px){.dalej-karty__lista{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.dalej-karty__lista{grid-template-columns:repeat(6,1fr)}}
/* RUNDA 8 (06.10): DOKŁADNIE cztery karty = 2×2, nie 3+1 z sierotą (strona
   główna PL/EN, 10 siatek w serwisie); ta sama decyzja co `.karty-tem--4`
   w §25.4. Cztery kolumny odrzucone: przy 1290 px karta miałaby ~240 px tekstu.
   (RUNDA 9 cofa zdanie „siedem kart zostaje 3+3+1, nie projektuję wariantu pod
   jedną stronę": po obejrzeniu renderu sierota okazała się brzydsza od dziury,
   którą zlecono naprawić — patrz §25.10a.)
   RUNDA 13: liczność wykrywa nie `:has()`, tylko zapytanie o ilość
   `li:first-child:nth-last-child(4)` — pierwszy element, który jest zarazem
   czwartym od końca, istnieje wyłącznie na liście o DOKŁADNIE czterech
   pozycjach; `~ li` łapie resztę. Działa w każdej przeglądarce, nie tylko
   w tych z `:has()`. W szóstce torów karta = 3 tory = połowa szerokości. */
@media(min-width:1100px){
  .dalej-karty__lista>li:first-child:nth-last-child(4),
  .dalej-karty__lista>li:first-child:nth-last-child(4)~li{grid-column:span 3}
}

/* ---- 25.10a NIEPEŁNY OSTATNI RZĄD KART (RUNDA 9, 06.10) ----

   ZASADA, jedno zdanie: **ostatni niepełny rząd KART jest wyśrodkowany;
   ostatni niepełny rząd TEKSTU (siatka `.ikony`, §25.6) zostaje przy lewej osi.**
   Różnica nie jest estetyczna, tylko rzeczowa. Karta „dalej" to BIAŁY PROSTOKĄT
   z ramką i cieniem — brakująca komórka jest realną dziurą w kompozycji, bo oko
   widzi pięć pudełek tam, gdzie rytm obiecał sześć. Pozycja siatki `.ikony`
   w wariancie `--bez-ikon` nie ma ani tła, ani ramki, ani cienia: jej „pusta
   komórka" to poszarpany koniec ostatniego wiersza tekstu łamanego na kolumny,
   czyli rzecz całkowicie zwyczajna. Dlatego siatek NIE ruszam — wyśrodkowanie
   zabrałoby im dwie rzeczy naraz: krok 4 przestałby stać pod krokiem 1
   (numerowana sekwencja czyta się po kolumnach), a lewa krawędź siatki
   przestałaby pokrywać się z krawędzią paska nagłówka i pasm (§27: serwis ma
   mieć dwie osie, nie trzy).

   TECHNIKA: siatka dostaje DWA RAZY tyle torów, a każda karta zajmuje dwa —
   dzięki temu przesunięcie o PÓŁ KOLUMNY jest w ogóle wyrażalne, a karty
   ostatniego rzędu mają DOKŁADNIE tę samą szerokość i ten sam odstęp co rząd
   pierwszy (6 torów = 3 karty po 2 tory + 2 odstępy = 100 %; karta od toru 2
   i od toru 4 zostawia po (tor + odstęp) z obu stron — zmierzone przy 1366 px:
   margines lewy 212 px, prawy 212 px, karty po 406 px, tyle samo co przed zmianą).
   Pozycje podane JAWNIE, nie zostawione autoukładaniu: §25 wymaga wyniku
   deterministycznego, a kursor auto-placement po jawnie wstawionej karcie
   zależy od kolejności, nie od zamiaru.
   Builder nic nie dopisuje.

   RUNDA 13 (09.10) — REGUŁA DLA DOWOLNEJ LICZBY KART, bez `:has()`.
   Do rundy 12 siatka była dobierana po wyliczonej liście liczności
   (`:has(> li:nth-child(5):last-child)`, 7, 8, 11 …). Lista obejmowała to, co
   w serwisie ISTNIAŁO w dniu pomiaru, i 09.10 przestała wystarczać: pierwsza
   lista z TRZYNASTOMA kartami (`pl/generowanie-leadow/`) zostawiła trzynastą
   przy lewej krawędzi, bo 13 nie było na liście (po niej też 10, 12, 14…).
   Wyliczenie służyło wyłącznie DOBOROWI KONTENERA (kto dostaje 6 torów) — sam
   opis ostatnich kart (`:nth-last-child(2)`, `:last-child:nth-child(3n+k)`)
   od początku nie zależał od liczności. A kontener nie musi wiedzieć, ile ma
   kart: sześć torów i `span 2` dla każdej karty daje na pełnych rzędach TO SAMO,
   co trzy kolumny. Dlatego 6 torów dostają WSZYSTKIE listy, a o położeniu
   decyduje reszta z dzielenia numeru karty przez liczbę kolumn:
     N mod 3 = 0 → pełne rzędy, żadna reguła nie pasuje, geometria jak dawniej,
     N mod 3 = 2 → dwie ostatnie karty od toru 2 i 4 (wyśrodkowana para),
     N mod 3 = 1 → ostatnia karta od toru 3 (wyśrodkowana, od siódmej wzwyż),
     N = 4       → 2×2 (zapytanie o ilość, wyżej), N = 1 → lewa, jak dotąd.
   To jest ten sam mechanizm, który od rundy 8 stoi w `.ikony--3` (§25.6b).
   Sprawdzony pomiarem na WSZYSTKICH 48 listach serwisu przy 6 szerokościach
   (1348/1100/1000/900/768/504 = 288 pomiarów, stary arkusz kontra nowy; nota
   NOTATKA-STYL_2026-10-09_v8.md): geometria 47 list jest taka sama co do
   0,6 px, zmieniła się wyłącznie lista z 13 kartami — i to zamierzenie
   (trzynasta karta na środek) — a przy 504 px nie zmieniło się nic.
   Podgląd wszystkich liczności 1–14: _demo/karty-dowolna-liczba.html.

   10.10: zastrzeżenie oglądacza („drugi rząd nie trzyma siatki pierwszego")
   wróciło i zostało ODRZUCONE — wyśrodkowaną parę wprowadziła runda 9 na wyraźne
   polecenie usera (likwidacja dziury), a cofnięcie przywróciłoby dokładnie to, co
   kazał usunąć. Preferencja siatkowa przegrywa z usterką zgłoszoną przez usera.

   ODRZUCONE WARIANTY dla piątki: (a) pięć kolumn w jednym rzędzie — przy
   1290 px karta ma (1290 − 4×20)/5 = 242 px tekstu, poniżej progu 280 px, więc
   odpada arytmetycznie, bez dyskusji o guście; (b) 2+3 — dziura wędruje do
   GÓRNEGO rzędu, czyli tam, gdzie oko patrzy pierwsze; (c) rozciągnięcie dwóch
   ostatnich kart na pół szerokości — trzy różne szerokości kart w jednym bloku
   i 618-pikselowy wiersz 15-pikselowego tekstu; (d) dwie kolumny (2+2+1) —
   dziura zostaje, a dochodzi samotna karta.

   LICZBY KART w serwisie (zmierzone 09.10, dla porządku — reguła od nich
   NIE zależy): 3 → 15 list, 4 → 10, 5 → 11, 6 → 2, 7 → 2, 8 → 4, 9 → 2,
   11 → 1, 13 → 1. */

/* Każda karta zajmuje dwa tory (od 700 px). */
@media(min-width:700px){
  .dalej-karty__lista>li{grid-column:span 2}
}

/* 700–1099 px: DWIE kolumny, więc niepełny rząd ma zawsze jedną kartę —
   każda nieparzysta liczba (3, 5, 7, 9, 11, 13 …). Ostatnia karta od toru 2.
   `:not(:first-child)`: lista z jedną kartą zostaje przy lewej, jak dotąd.
   Zakres domknięty `max-width`, żeby nie było interakcji z blokiem niżej. */
@media(min-width:700px) and (max-width:1099.98px){
  .dalej-karty__lista>li:last-child:nth-child(odd):not(:first-child){grid-column:2/span 2}
}

/* od 1100 px: TRZY kolumny. Dwa kształty niepełnego rzędu:
     reszta 2 (2, 5, 8, 11, 14 …) — dwie karty, przesunięcie o pół kolumny,
     reszta 1 (7, 10, 13 …)       — jedna karta, przesunięcie o całą kolumnę.
   `:nth-child(n+7)` przy reszcie 1: pierwsza i czwarta karta są też „3n+1",
   ale to nie sieroty — pierwsza to lista jednokartowa (zostaje przy lewej),
   czwarta to lista czteroosobowa, która ma własne 2×2 (wyżej). */
@media(min-width:1100px){
  .dalej-karty__lista>li:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
  .dalej-karty__lista>li:last-child:nth-child(3n+2){grid-column:4/span 2}
  .dalej-karty__lista>li:last-child:nth-child(3n+1):nth-child(n+7){grid-column:3/span 2}
}

.dalej-karta{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  margin:0;
  padding:1.5rem;
  background:var(--bialy);
  border:1px solid var(--ramka);
  border-radius:24px;
  box-shadow:var(--cien);
  transition:transform .25s var(--przycisk-ease),
             box-shadow .25s var(--przycisk-ease),
             border-color .25s var(--przycisk-ease);
}
.dalej-karta:hover{transform:translateY(-3px);border-color:var(--niebieski);box-shadow:var(--cien-mocny)}
.dalej-karta__tytul{margin:.8em 0 .4em;font-size:20px;line-height:1.3}
.dalej-karta__opis{margin:0;font-size:15px;color:var(--przygaszony)}

/* ---- 25.11 STOPKA WIELOKOLUMNOWA: footer.stopka.stopka--duza ----
   Kolumna marki (logo, zdanie, CTA) + 3 kolumny tematyczne linków + dolny
   pasek. Stopka nie jest mierzona przez N3/N4 (footer), ale układ i tak
   zachowuje czytelność od 320 px: słupek -> 2 kolumny -> 4 kolumny. */
.stopka--duza{padding-block:3rem 1.5rem}
.stopka__siatka{
  display:grid;grid-template-columns:1fr;gap:2rem;
}
@media(min-width:640px){.stopka__siatka{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){
  .stopka__siatka{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem}
}
.stopka__marka p{margin:.8em 0 0;max-width:34ch;color:var(--przygaszony)}
.stopka__marka .przycisk{margin-top:1rem}
/* `.stopka a{color:granat}` (§22) ma tę samą specyficzność co a.przycisk--glowny
   i leży później — granatowy tekst na granatowym przycisku (zmierzone na
   zrzucie). Przywracamy kolory przycisków w stopce. */
.stopka a.przycisk--glowny,
.stopka a.przycisk--glowny:hover,
.stopka a.przycisk--glowny:focus-visible,
.stopka a.przycisk:hover,
.stopka a.przycisk:focus-visible{color:var(--bialy)}
/* HACK ZDJĘTY 11.10 wieczorem, razem z podmianą znaku. Brzmiał:
   `.stopka--duza .logo{mix-blend-mode:multiply}` z notą „logo to webp z białym tłem;
   na szarej stopce multiply czyni biel przezroczystą". Istniał WYŁĄCZNIE po to, żeby
   ukryć białe tło starego pliku. Nowy znak jest wektorem z prawdziwą przezroczystością,
   więc `multiply` nie miałby już czego ukrywać, a ZMIENIAŁBY kolory znaku na każdym
   nietypowym tle. Na ciemnym tle używa się wariantu `…-inwers.svg`, nie trybu mieszania. */
.stopka--duza .stopka__kolumna a{
  display:inline-block;
  padding:.3em 0;
  text-decoration:none;
}
.stopka--duza .stopka__kolumna a:hover{text-decoration:underline;text-underline-offset:3px}
.stopka__dol{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.5rem;
  margin-top:2.5rem;padding-top:1.25rem;
  border-top:1px solid var(--ramka);
  color:var(--przygaszony);
  font-size:13px;
}
.stopka__dol p{margin:0}

/* ---- 25.12 PASMO KALKULATORA: .pasmo-kalkulator ----
   Pasmo z gradientem i dużym promieniem wokół istniejącego .kalkulator (§24),
   z wyśrodkowanym nagłówkiem — kompozycja „Gotówka online, nawet w jeden
   dzień" z referencji. Sam kalkulator (pola, wyniki, JS) się nie zmienia. */
.pasmo-kalkulator{
  /* telefon: wąskie wcięcia, bo pasmo + karta kalkulatora to dwie warstwy
     odstępów — przy 390 px akapit w karcie spadał do 261 px (próg 280) */
  padding:2rem .6rem;
  border-radius:var(--promien-duza);
  background:linear-gradient(135deg,#F5F9FF 0%,#DCE8FA 100%);
}
@media(max-width:767px){.pasmo-kalkulator .kalkulator{padding:1.1em}}
@media(min-width:768px){.pasmo-kalkulator{padding:3rem 3rem}}
.pasmo-kalkulator .kalkulator{
  max-width:56rem;margin:0 auto;
  box-shadow:var(--cien);
}

/* ============================================================
   26. DOŚWIADCZENIE CZYTANIA PROZY (05.10, runda 7, agent webdesign)
   Przesłanka rund 5–6 „71 stron nie ma bloków, więc arkusz ma malejące zyski"
   była fałszywa: proza to większość serwisu i taka zostanie. Ta sekcja
   projektuje DŁUGI TEKST, a nie tylko go stylizuje. Co działało na stronach
   z blokami (hub, home) i zostało przeniesione:
     1. liczba jest bohaterem (duża, ciężka, z kreską)  -> marker na <strong>,
        teza 23 px, kolumna liczb po zmianie markupu (§26.7)
     2. zmienia się SZEROKOŚĆ i GĘSTOŚĆ (pasmo / kolumna / karta)  -> otwarcia
        sekcji, lid, karty figur i tabel, listy kroków
     3. numer i kreska przy otwarciu bloku  -> licznik sekcji w H2
   Wszystko poniżej celuje w `article.tresc` (proza) — hub i home mają
   gołe <article> i NIE są ruszane. Zero zmian w markupie wzorca: reguły
   działają na tym, co builder emituje dziś. Elementy, które wymagają
   klas w znaczniku, są w §26.7 i bez markupu nic nie robią.
   ============================================================ */
:root{
  --marker:rgba(255,138,61,.24); /* pomarańcz marki ~24% na bieli = #FFE4D2;
       granat na nim 6,9:1, przygaszony 5,9:1 — AA zachowane */
}

/* ---- 26.1 liczniki ---- */
article.tresc{counter-reset:sekcja wykres}

/* ---- 26.2 LID: pierwszy akapit po hero/spisie ----
   Wejście w tekst, nie od razu proza. 19/20 px zamiast 16; reszta tekstu
   zostaje 16. Duży akapit jest też „progiem": oko czyta go jako początek. */
article.tresc>p:first-child{
  font-size:18px;
  line-height:1.6;
  margin-bottom:1.4em;
}
@media(min-width:768px){article.tresc>p:first-child{font-size:20px;line-height:1.6}}

/* ---- 26.3 OTWARCIE SEKCJI: H2 w kolumnie ----
   Każdy H2 wyglądał tak samo, czytelnik nie wiedział, gdzie jest ważny moment.
   Teraz H2 otwiera sekcję: cienka linia na szerokość kolumny, pomarańczowa
   kreska 56 px na jej początku, numer sekcji nad nagłówkiem. Linia i kreska
   to tło (dwie warstwy gradientu) — zero dodatkowych elementów.
   Numerują się TYLKO H2 będące bezpośrednimi dziećmi <article> — to są
   rozdziały wywodu i odpowiadają numerom w spisie treści. FAQ (H2 w
   <section class="faq">) i Podsumowanie (poza <article>) dostają linię i
   kreskę, ale nie numer: są dodatkiem, a w spisie stoją w innej kolejności
   niż na stronie, więc numer by się z nim rozjechał.
   Numer to treść generowana z `/ ""` (pusty alternatyw) — czytnik ekranu nie
   odczyta „zero jeden" przed każdym nagłówkiem. */
article.tresc>h2,
article.tresc>.faq>h2{
  margin-top:2.6em;
  margin-bottom:.6em;
  padding-top:1.15em;
  background:
    linear-gradient(var(--pomaranczowy),var(--pomaranczowy)) 0 0/56px 3px no-repeat,
    linear-gradient(var(--ramka),var(--ramka)) 0 0/100% 1px no-repeat;
}
article.tresc>h2{counter-increment:sekcja}
article.tresc>h2::before{
  content:counter(sekcja,decimal-leading-zero);
  content:counter(sekcja,decimal-leading-zero) / "";
  display:block;
  margin-bottom:.55em;
  font:700 12px/1 var(--font-tekst);
  letter-spacing:.16em;
  color:var(--przygaszony); /* 7,08:1 */
}
/* (Próba: pierwszy akapit po H2 w 18 px. ODRZUCONA po zrzucie — przy akapicie
   150 słów dwa rozmiary tekstu czytały się jak niespójność, nie jak rytm.
   Zmianę gęstości robią lid, kroki, figury i tezy, nie rozmiar zwykłego
   akapitu.) */
/* H3: wyraźniejszy odstęp, bez kreski (kreska należy do H2) */
article.tresc>h3{margin-top:2.1em}
article.tresc>h2+h3{margin-top:1.1em}

/* ---- 26.4 LICZBY I TEZY W AKAPICIE ----
   Serwis stoi na liczbach z mianownikiem; w akapicie były nieodróżnialne.
   <strong> w akapicie dostaje marker (tło w dolnej ~1/3 wiersza, pomarańcz
   marki) — działa na dowolnej długości (zdanie, zakres liczb), łamie się
   razem z wierszem (box-decoration-break:clone). Dotyczy tylko <strong>
   w <p>; w <li> zostaje sam ciężar (hierarchia kroków robi się inaczej). */
article.tresc p strong,
article.tresc~.sekcja--tlo p strong{
  font-weight:600;
  background:linear-gradient(transparent 56%,var(--marker) 56%,var(--marker) 94%,transparent 94%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-inline:.12em;
  margin-inline:-.12em;
}
article.tresc .faq p strong{background:none;padding:0;margin:0} /* FAQ: sam ciężar */
/* 10.10 (werdykt ogladacza U4): marker powstał do LICZB W ZDANIU, a źródło ma
   fałszywe nagłówki `<p><strong>4. Ranking AI…</strong></p>` (dług treści, u redaktora),
   które przez marker czytały się jak zaznaczone zdanie. Cecha rozpoznawcza, którą
   CSS umie sprawdzić: akapit, którego JEDYNĄ zawartością jest <strong> (tekst obok
   by go odróżnił, ale :only-child liczy elementy — dlatego dokładam warunek
   „zaraz po nim lista"; wszystkie 11 takich akapitów w serwisie go spełnia).
   Taki akapit dostaje wygląd podetykiety: bez markera, granat, większy, odstęp
   od poprzedzającego bloku. Liczba w zdaniu (tekst wokół, brak listy zaraz po)
   zachowuje marker. Zmiana wyglądu, nie znacznika: gdy redaktor zamieni to na
   <h3>, reguła przestaje cokolwiek łapać i nic się nie psuje. */
article.tresc p:has(>strong:only-child):has(+ul,+ol){
  margin-block:1.6em .5em; /* NIE skrót `margin` — zerowałby margin-inline, którym §27 centruje kolumnę (zrzut 10.10: nagłówki uciekły do lewej krawędzi) */
  font-size:1.0625em;
  line-height:1.35;
}
article.tresc p:has(>strong:only-child):has(+ul,+ol) strong{
  background:none;padding:0;margin:0;
  font-weight:700;
  color:var(--granat);
}

/* ---- 26.5 LISTY ---- */
/* kroki: ol bezpośrednio w artykule. Numer w granatowym kółku, każda
   pozycja to wiersz między liniami — lista procesu czyta się jak proces. */
article.tresc>ol{
  list-style:none;
  margin-block:1.9em; /* NIE skrót `margin:1.9em 0` — ten zerowałby margin-inline,
       a §27 centruje dzieci artykułu właśnie przez margin-inline:auto (pułapka
       nr 3 w drugą stronę: skrót o wyższej specyficzności kasuje regułę układu) */
  padding:0;
  counter-reset:krok;
}
article.tresc>ol>li{
  counter-increment:krok;
  position:relative;
  margin:0;
  padding:1em 0 1em 3.3rem;
  border-top:1px solid var(--ramka);
  line-height:1.6;
}
article.tresc>ol>li:last-child{border-bottom:1px solid var(--ramka)}
article.tresc>ol>li::before{
  content:counter(krok);
  content:counter(krok) / "";
  position:absolute;
  left:0;top:.95em;
  width:2.15rem;height:2.15rem;
  border-radius:50%;
  background:var(--granat);
  color:var(--bialy); /* 8,4:1 */
  font:700 15px/2.15rem var(--font-tekst);
  text-align:center;
}
article.tresc>ol>li strong{color:var(--granat)}
/* wyliczenia: grupa pod jedną pionową linią zamiast luźnych kropek. Pomarańczowy
   znacznik zostaje (tożsamość), ale jest kwadratem 7 px, nie kropką-bullet. */
article.tresc>ul,
article.tresc .kalkulator__jak-liczymy ul{
  list-style:none;
  margin-block:1.6em; /* jak wyżej: inline zostaje dla §27 */
  padding:.2em 0 .2em 1.5rem;
  border-left:3px solid var(--ramka);
}
article.tresc>ul>li,
article.tresc .kalkulator__jak-liczymy li{position:relative;margin:0 0 .75em;padding-left:.25rem}
article.tresc>ul>li:last-child,
article.tresc .kalkulator__jak-liczymy li:last-child{margin-bottom:0}
article.tresc>ul>li::before,
article.tresc .kalkulator__jak-liczymy li::before{
  content:"";
  position:absolute;
  left:-1.5rem;top:.62em;
  width:7px;height:7px;
  margin-left:-2px; /* środek kwadratu na linii */
  border-radius:2px;
  background:var(--pomaranczowy);
}

/* ---- 26.6 FIGURA Z WYKRESEM i TABELA w prozie ----
   Wykres SVG ma 480 px szerokości własnej i fonty 18–22 px policzone na tę
   szerokość; rozciągnięty do 700 px miał tytuł ~30 px — większy niż H3.
   Teraz: pastelowa płyta, wykres jako biały panel (max 34 rem), numer
   wykresu i podpis pod spodem. Numer „Wykres N" to treść generowana — jedyny
   tekst dodany stylem; wymaga zgody (patrz DECYZJE). */
article.tresc figure.figura-dane{
  counter-increment:wykres;
  margin-block:2.4em; /* inline zostaje dla §27 */
  padding:1rem 1rem 1.1rem;
  border:0;
  border-radius:var(--promien-duza);
  background:linear-gradient(160deg,#F5F9FF 0%,var(--sekcja-g1) 55%,#E4EDFC 100%);
}
article.tresc .figura-dane__rysunek{
  max-width:34rem;
  background:var(--bialy);
  border-radius:var(--promien);
  box-shadow:var(--cien);
}
article.tresc .figura-dane__podpis{
  max-width:34rem;
  margin:1.05rem auto 0;
  padding-inline:.25rem;
  font:400 14px/1.55 var(--font-tekst);
  color:var(--przygaszony); /* 7,08:1 na bieli; na #EEF3FB 6,4:1 */
}
article.tresc .figura-dane__podpis::before{
  content:"Wykres " counter(wykres);
  content:"Wykres " counter(wykres) / "";
  display:block;
  margin-bottom:.55em;
  font:700 11px/1 var(--font-tekst);
  letter-spacing:.16em;
  text-transform:uppercase; /* etykieta UI, nie nagłówek */
  color:var(--granat);
}
html[lang^="en"] article.tresc .figura-dane__podpis::before{
  content:"Chart " counter(wykres);
  content:"Chart " counter(wykres) / "";
}
article.tresc .figura-dane__zrodlo{
  display:block;
  margin-top:.7em;
  font:600 12px/1.4 var(--font-tekst);
  color:var(--przygaszony);
}
article.tresc .figura-dane__zrodlo::before{
  content:"";
  display:inline-block;
  width:18px;height:2px;
  margin-right:.6em;
  vertical-align:middle;
  background:var(--pomaranczowy);
}
/* kalkulator w prozie: ta sama rodzina co karty figur (promień, cień) */
article.tresc .kalkulator{
  border-radius:var(--promien-duza);
  box-shadow:var(--cien);
}

/* ---- 26.7 KOLUMNA, FAQ, PODSUMOWANIE ---- */
/* USTERKA: <section class="faq uklad"> wewnątrz <article class="tresc uklad">
   dostawała szerokość .uklad (70 vw = 956 px przy 1366) wewnątrz kolumny
   700 px — sterczała w prawo poza kolumnę tekstu. */
/* RUNDA 12 (08.10), USTERKA C: selektor zwężony z `article.tresc` do `.tresc`.
   Reguła z rundy 8 wymagała, żeby klasa `tresc` siedziała NA ZNACZNIKU
   <article>. Builder emituje dziś dwa kształty prozy i tylko jeden tak wygląda:
     * 55 stron (liść):  <article class="tresc uklad"> … <section class="faq uklad">
     * 4 strony (hub):   <article> … <div class="tresc uklad"><section class="faq uklad">
   Na hubie `article` jest GOŁY (to świadoma decyzja rundy 8, opisana w §27),
   więc selektor nie łapał i FAQ zostawało przy `.uklad` = 70 vw.
   POMIAR (EN `seo/`, 1366 px): wiersze FAQ 333,0…1289,2 = 956,2 px, a akapity
   nad nimi łamią się na 700 px (333,0…1033,0) — czytelnik dostaje w jednym
   widoku dwie różne długości wiersza, a FAQ WYSTAJE 256 px poza własnego
   rodzica (`div.tresc.uklad` ma 700 px).
   Policzone parserem na 78 stronach: `.faq` jest na 59 stronach i KAŻDA z nich
   ma przodka z klasą `tresc` — czyli nowy selektor łapie komplet, a dla 55
   stron liściowych deklaracje są co do znaku te same co dotąd (zero zmiany).
   Zyskuje 4 strony hubów; przy 900 px dodatkowo prostuje odchylenie w drugą
   stronę (FAQ miało tam 630 px przy kolumnie 700 px). */
.tresc .faq.uklad{width:auto;max-width:var(--tresc-max)}
/* USTERKA: pasmo „Podsumowanie / Kluczowe wnioski" miało 956 px szerokości
   i lewą krawędź 128 px w lewo od kolumny — linie po ~120 znaków i skok
   krawędzi względem tekstu. Teraz ta sama kolumna 700 px, co artykuł.
   Selektor rodzeństwa: tylko pasma PO prozie; bloki hubu/home bez zmian. */
article.tresc~.sekcja--tlo>.uklad:not(.uklad--szeroki){
  width:90vw;
  max-width:var(--tresc-max);
}
@media(min-width:768px){
  article.tresc~.sekcja--tlo>.uklad:not(.uklad--szeroki){width:100%}
}
article.tresc~.sekcja--tlo h2{
  margin-top:0;
  padding-top:1.15em;
  background:linear-gradient(var(--pomaranczowy),var(--pomaranczowy)) 0 0/56px 3px no-repeat;
}
/* lista „najważniejsze fakty": odhaczenia (ten sam język co §25.9) */
/* `ul, ol`, nie samo `ul` (09.10, sprawdzenie pikselem): w 3 pasmach PL stoi <ol>
   (lead-magnet, outsourcing, pozycjonowanie-seo-sem). Z samym `ul` dostawał
   domyślną cyfrę „1." (reguła `ol li::marker` z §5 jest żywa) OBOK
   niebieskiego kółka z ptaszkiem i padding 1.3em przesuwał kreski wierszy. */
article.tresc~.sekcja--tlo ul,
article.tresc~.sekcja--tlo ol{list-style:none;margin:1.4em 0;padding:0}
article.tresc~.sekcja--tlo li{
  position:relative;
  margin:0;
  padding:.85em 0 .85em 2.9rem;
  border-top:1px solid rgba(38,79,128,.14);
  line-height:1.55;
}
article.tresc~.sekcja--tlo li:last-child{border-bottom:1px solid rgba(38,79,128,.14)}
article.tresc~.sekcja--tlo li::before{
  content:"";
  position:absolute;left:0;top:.9em;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--niebieski) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
}
/* akapit zamykający pasmo (po liście) = wniosek, w rodzinie tezy */
article.tresc~.sekcja--tlo ul+p{
  margin-top:1.6em;
  padding-left:1.25em;
  border-left:4px solid var(--pomaranczowy);
  font:600 18px/1.5 var(--font-tekst);
}
@media(min-width:768px){article.tresc~.sekcja--tlo ul+p{font-size:20px}}

/* ---- 26.8 WARSTWA WYMAGAJĄCA ZNACZNIKA (bez niego NIC nie robi) ----
   Tu leży to, czego CSS sam nie rozpozna: który akapit jest pomiarem, a
   który obserwacją z praktyki, które „73 zł" jest liczbą, a który nawias —
   mianownikiem i źródłem. Klasy do wklejenia przez buildera:
   _demo/REKOMENDACJE-MARKUP.md. Kolor niesie znaczenie, zgodnie z legendą
   wykresów: NIEBIESKI = pomiar, POMARAŃCZ = kierunkowa wartość z praktyki. */
.pomiar,.praktyka{
  margin:1.6em 0;
  padding:1em 1.25em 1.05em;
  border-radius:0 var(--promien) var(--promien) 0;
}
.pomiar{background:var(--sekcja-g1);border-left:4px solid var(--niebieski)}
.praktyka{background:#FFF6EE;border-left:4px solid var(--pomaranczowy)} /* granat na #FFF6EE 7,8:1; przygaszony 6,6:1 */
.pomiar>:last-child,.praktyka>:last-child{margin-bottom:0}
.zrodlo-dane{
  font-size:.875em;
  color:var(--przygaszony); /* 7,08:1 */
}
.liczba-w-tekscie{
  font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
/* wzór w osobnym akapicie („CPL = koszt kampanii / liczba leadów"): dziś
   zwykły akapit, nieodróżnialny od prozy. <p class="wzor">. */
.wzor{
  margin:1.5em 0;
  padding:.85em 1.2em;
  background:var(--sekcja);
  border-radius:var(--promien-mala);
  font:600 17px/1.5 var(--font-tekst);
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--granat);
}

/* ---- 26.9 STOPKA: ta sama ramka co nagłówek ----
   Pasek nagłówka ma 92 vw (runda 5), stopka zostawała na .uklad = 70 vw, więc
   lewa krawędź stopki (205 px przy 1366) nie pokrywała się ani z nagłówkiem
   (55 px), ani z kolumną tekstu (333 px). Stopka to nie kolumna czytelnicza —
   dostaje szerokość nagłówka. */
@media(min-width:768px){
  .stopka .uklad{width:92vw}
}

/* ============================================================
   27. KONTENER OGRANICZONY — bloki wyłamane z kolumny prozy
   (06.10.2026, runda 8, agent webdesign)

   PROBLEM: builder rozpoznaje w liściach listy „pogrubienie + opis" i wstawia
   blok `<section class="sekcja"><div class="uklad uklad--szeroki">…` jako
   BEZPOŚREDNIE DZIECKO `article.tresc` (112 siatek na ~55 stronach). Artykuł
   miał 700 px, blok 92 vw → wystawał 500+ px poza kolumnę (bramka N1/N2),
   a karty w siatce miały 212 px (N3).

   TECHNIKA (jedna, nazwana, do odwzorowania 1:1 w WordPressie):
   „KONTENER OGRANICZONY" = model `is-layout-constrained` Gutenberga.
   Kolumna czytelnicza NIE jest kontenerem. Kontenerem jest SZEROKI artykuł
   (92 vw, max --strona-max), a KAŻDE jego dziecko jest ograniczone do
   szerokości treści (--tresc-max) i wyśrodkowane automatycznymi marginesami.
   Blok wyłamany = dziecko, któremu zdejmuje się to ograniczenie. Centrowanie
   jest względem okna, bo artykuł jest wyśrodkowany w oknie, a dziecko w
   artykule. Zero ujemnych marginesów, zero calc() od viewportu, zero zależności
   od szerokości rodzica „pod zawartość" (pułapka nr 2).
   Odpowiednik w WP: `--wp--style--global--content-size: 700px`,
   `--wp--style--global--wide-size: 1290px`, blok z klasą `alignwide`.

   Co zostaje bez zmian: wszystkie selektory §26 celują w te same bezpośrednie
   dzieci `article.tresc>…` — kolumna prozy wygląda identycznie jak przed
   rundą; `div.tresc.uklad` (ścieżka + spis) przed artykułem ma te same 700 px
   i tę samą oś, więc krawędzie się pokrywają.
   Hub i strony główne mają gołe <article> — reguły ich nie dotykają.
   ============================================================ */
article.tresc{
  width:90vw;
  max-width:var(--strona-max);
}
@media(min-width:768px){article.tresc{width:92vw}}
/* każde dziecko = kolumna treści. Elementy §26 z `margin: X 0` zostały
   przepisane na `margin-block`, żeby nie kasowały `margin-inline:auto`. */
article.tresc>*{
  max-width:var(--tresc-max);
  margin-inline:auto;
}
/* blok wyłamany: `.sekcja` jako dziecko artykułu wypełnia szeroki kontener;
   jego wewnętrzny `.uklad--szeroki` (92 vw) nie może liczyć się od okna, bo
   przy >1402 px artykuł jest już ścięty do 1290 px — więc 100 % rodzica. */
article.tresc>.sekcja{max-width:none}
article.tresc>.sekcja>.uklad{width:100%;max-width:none}
/* odstępy pasma w ŚRODKU wywodu mniejsze niż pasma między sekcjami strony:
   blok stoi między akapitem a akapitem tego samego rozdziału, nie otwiera
   nowego. Ten sam blok poza artykułem (karty „dalej") zachowuje 2,5/3,5 em. */
article.tresc>.sekcja{padding-block:1.4em 1.9em}
@media(min-width:768px){article.tresc>.sekcja{padding-block:1.6em 2.2em}}
/* siatka bez własnego nagłówka (automat zostawia H2 w kolumnie, wyłamuje
   tylko listę): zero górnego marginesu na pierwszym elemencie wnętrza */
article.tresc>.sekcja>.uklad>:first-child{margin-top:0}

/* ============================================================
   28. SIATKA CECH BEZ WŁASNEGO NAGŁÓWKA + RÓWNE LINIE BAZOWE (11.10, usterki 3 i 4)

   USTERKA 3 — karty 2,5× szersze od zdania, które je zapowiada. Siatka `.ikony` stoi w
   `.uklad--szeroki` (92 vw → x 55–1310 przy 1366), a zdanie przed nią w kolumnie prozy
   (x 333–1033). Obalona hipoteza osadzającego (kolejność bloków): to SZEROKOŚĆ.
   Co robię: gdy siatka jest PIERWSZYM dzieckiem kontenera (`> .ikony:first-child` —
   czyli nie ma własnego `.sekcja__glowa`; bloki z centrowanym nagłówkiem pasma zostają
   szerokie, bo nagłówek i karty tworzą tam jedno pasmo), dostaje 58 rem (928 px) na
   środku. Liczba nie jest z gustu: trzy kolumny po 2 rem odstępu przy 928 px dają
   (928 − 64) / 3 = 288 px na akapit karty, czyli powyżej progu bramki (280); 56 rem
   dałoby 277. Proporcja do prozy: 700 → 928 (1,33×) zamiast 1255 (1,8×).
   Dlaczego NIE zwężam do 700: trzy kolumny dałyby 212 px (N3), a jedna kolumna kart
   zrobiłaby z sześciu cech ścianę. Dlaczego NIE ruszam markupu: wystarczy to, co
   builder już emituje (`:first-child` jest strukturą, nie klasą do dopisania).
   `--4` stoi w tym samym limicie jako dwie kolumny także od 1340 px (cztery po 928 px
   to 211 px) — lustro reguł 25.6b poniżej, o wyższej specyficzności zamiast zmiany
   progów, które obsługują też siatki poza artykułem. */
/* RUNDA 19 (13.10, U1) — 58 rem (928 px) ZASTĄPIONE KOLUMNĄ PROZY. Oglądacz: wyłom
   114 px na stronę jest „za mały, żeby czytać się jako pasmo, i za duży, żeby czytać się
   jako wyrównanie" — kafle zaczynały się na x=219, pomarańczowa kreska §26 stoi na 333.
   Siatka bez własnego nagłówka jest TEKSTEM (pozycje nie mają tła ani obwódki; znak/ikona
   to dekoracja przy akapicie), więc stoi w kolumnie tekstu jak wszystko, co jest tekstem
   (zasada z §25.0: tekst w kolumnie, pudełka szersze). Bloki Z nagłówkiem pasma
   (`.sekcja__glowa` przed siatką → siatka nie jest :first-child) zostają szerokie.
   Dwie kolumny po (700 − 48)/2 = 326 px: powyżej progu bramki 280 z zapasem 46 px.
   Trzy kolumny w 700 px dałyby 212 px (dlatego §28 w ogóle powstał) — więc WSZYSTKIE
   warianty (--2/--3/--4) mają tu dwie kolumny, od 768 px; poniżej bez zmian (jedna
   kolumna / stopień 640–767 z reguł §25.6).
   Osiem torów nie jest potrzebnych: cztery tory × `span 2` = dwie kolumny (technika
   §25.6b), a niepełny ostatni rząd NIE jest centrowany — w kolumnie tekstu pusta
   komórka to 326 × ~110 px poszarpanego końca akapitów, nie ćwiartka ekranu, i przy
   lewej osi czyta się jak lista (powód z §25.6b nr 1 nie obowiązuje).
   RYNNA 27 → 48 px: przy mierze 326 px to 15 % (było 6 % przy 450 px); oko nie
   przeskakuje do sąsiedniej kolumny w poszukiwaniu następnego wiersza. Sam
   `column-gap` — odstęp między RZĘDAMI zostaje 1,75 rem.
   SPECYFIKACJA: selektor jest celowo ciężki (6 klas = tyle, ile miały zdjęte stąd
   lustra reguł 25.6b dla `--4:first-child`), a stoi NA KOŃCU §28, żeby przy remisie
   wygrać kolejnością. Zdjęte: `max-width:58rem` i blok `@media(min-width:1340px)`. */
.uklad--szeroki>.ikony:first-child{max-width:var(--tresc-max);margin-inline:auto}
@media(min-width:768px){
  .uklad.uklad--szeroki>.ikony.ikony.ikony:first-child{
    grid-template-columns:repeat(4,1fr);
    column-gap:3rem;
  }
  .uklad.uklad--szeroki>.ikony.ikony.ikony:first-child>li{grid-column:span 2}
  /* RUNDA 20 (13.10), U1 z oglądu: OSTATNIA NIEPARZYSTA POZYCJA NA OBIE KOLUMNY.
     Zastępuje decyzję z akapitu wyżej („niepełny rząd NIE jest centrowany"): liczyłem
     pustą komórkę jako 326 × ~110 px, a pozycje z opisem po 7–8 liniach dają 326 × 300–450 px
     (zrzut conversion_1366_09: piąta pozycja sama, prawa strona pusta do kreski sekcji).
     Rozciągnięcie, nie centrowanie: pozycja zostaje przy lewej osi kolumny prozy, a jej linia
     ma 700 px — tyle, ile akapit obok. Zakres = TYLKO ten selektor (tekst w kolumnie, 4 tory
     = 2 kolumny), więc `.ikony--4` w czterech kolumnach i `.ikony--3` w trzech (pasma z nagłówkiem)
     nie są dotknięte. `1 / -1` liczy się po torach jawnych — jest ich zawsze 4.
     Obejmuje też pozycję jedyną (:first-child): sama w jednej z dwóch kolumn to ta sama dziura. */
  .uklad.uklad--szeroki>.ikony.ikony.ikony:first-child>li:last-child:nth-child(odd){grid-column:1/-1}
}

/* USTERKA 4 — tytuł pierwszej karty w dwóch liniach spychał jej tekst o ~22 px niżej
   niż w sąsiednich. Linie bazowe wyrównuje SUBGRID: każda pozycja zajmuje trzy
   wspólne wiersze siatki (znak/ikona · tytuł · opis), więc wiersz tytułów ma wysokość
   najdłuższego tytułu w rzędzie, a opisy startują w jednej linii. Pozycje nie mają
   tła ani obwódki, więc „postrzępione spody" to tu naturalny koniec akapitów o różnej
   długości — wyrównanie dotyczy startu opisów, nie spodów (karty nie są pudełkami).
   `row-gap:0` na pozycji: subgrid dziedziczy odstęp siatki (1,75 rem) między swoje
   wiersze, a odstępy wewnątrz pozycji mają zostać te z marginesów (ikona 1 rem, tytuł
   .35 em). Odstęp MIĘDZY rzędami kart zostaje 1,75 rem, bo wiersze siatki są nadal
   rozdzielone jej gapem. @supports: bez subgrida (Chrome < 117, Safari < 16, Firefox
   < 71) zostaje stan sprzed poprawki, bez uszczerbku. Zakładam trzy dzieci w
   przepływie (znak, tytuł, opis) — tak emituje builder; numer `ol` z ikoną jest
   absolutny i wiersza nie zajmuje. */
@supports (grid-template-rows:subgrid){
  .ikony>.ikona-tekst{
    display:grid;
    grid-template-rows:subgrid;
    grid-row:span 3;
    row-gap:0;
  }
}

/* ============================================================
   29. RUNDA 19 (13.10) — USTERKI U2, U3, U4 Z OGLĄDU 13.10
   (U1 siedzi w §25.7 `.teza` i §28 `.ikony:first-child`.)
   ============================================================ */

/* ---- U2: ODDECH PRZED GRANATOWYM FORMULARZEM ----
   /pl/o-nas/ przy 1366: artykuł kończy się akapitem, zaraz po nim `.cta` — ostatnia
   linia bazowa y≈528, granat od y=533 (5 px). Przyczyna: `p:last-child{margin-bottom:0}`
   (§5) przy rodzicu bez paddingu; nic na zewnątrz artykułu nie dokłada odstępu, bo
   `.tresc+.sekcja--tlo` (§18) dotyczy tylko jasnego pasma, nie `.cta`. EN `/about/` ma
   to pasmo, więc oddycha — stąd „przypadek bez separacji".
   Wartość = padding zwykłej `.sekcja` (2,5 / 3,5 em), czyli tyle powietrza, ile ma
   każde inne przejście w serwisie.
   `:has(+.cta)`: tylko artykuł, po którym BEZPOŚREDNIO stoi `.cta` (inaczej margines
   podwajałby się z paddingiem następnej sekcji). `p:last-child` — ul/ol/blockquote/tabela
   mają już własny dolny margines (≥1,6 em). Margines p wychodzi przez dolną krawędź
   artykułu (brak paddingu/ramki), więc to jest odstęp NA BIAŁYM, nad granatem.
   Dolny margines akapitu w tej samej regule co reszta odstępów elementu (pułapka #3);
   `margin-bottom`, nie skrót — `article.tresc>*` centruje przez margin-inline. */
article.tresc:has(+.cta)>p:last-child{margin-bottom:2.5em}
@media(min-width:768px){article.tresc:has(+.cta)>p:last-child{margin-bottom:3.5em}}

/* ---- U3: DWA KOLOROWE BLOKI POD RZĄD = „JEDEN BLOK ZE SZWEM" ----
   (a) ODSTĘP. `.pomiar`/`.praktyka` mają margin 1,6 em; dwa sąsiednie kolapsują do
   25 px (zmierzone: 311 → 336). Sąsiad kolorowego bloku (inny taki blok albo mata
   figury) dostaje 2,75 em (44 px) NAD sobą: dwa obiekty, nie dwa pasy jednej płyty.
   `margin-top`, nie skrót — inline zostaje dla §27. Prefiks `.tresc` podnosi remis
   z `article.tresc figure.figura-dane{margin-block:2.4em}` (§26.6).
   (b) ZNACZENIE NIE TYLKO KOLOREM. Pomiar (niebieski) i zastrzeżenie z praktyki
   (pomarańcz) różniły się wyłącznie barwą tego samego kształtu — nic nie mówiło
   czytelnikowi, że to dwa różne rodzaje twierdzenia (a kolor jako jedyny nośnik to
   także wada WCAG 1.4.1). Pasek `.praktyka` jest KRESKOWANY: ciągły = zmierzone,
   kreskowany = kierunkowe. Ta sama konwencja co we wykresach (legenda: pomiar vs
   wartość kierunkowa). NIEZWERYFIKOWANE okiem — 4 px kreskowana ramka to w Chrome
   segmenty ~8 px; patrz DECYZJE-19, ewentualne cofnięcie = usunięcie jednej linii.
   (c) CZEGO CSS NIE ZROBI: nie wstawi zdania między bloki ani legendy. To rekomendacja
   do znacznika/treści (DECYZJE-19, pkt M1–M2). */
.tresc :is(.pomiar,.praktyka)+:is(.pomiar,.praktyka,.figura-dane){margin-top:2.75em}
.praktyka{border-left-style:dashed}

/* ---- U4: PASMO `.sekcja--tlo` W ARTYKULE BEZ MARGINESU WEWNĘTRZNEGO (telefon) ----
   §27: `article.tresc>.sekcja>.uklad{width:100%}` — wnętrze pasma równa się pasmu, więc
   przy 504 px tło zaczynało się na x=26 i nagłówek z ikonami też na x=26 (padding 0).
   Poza artykułem pasmo jest pełnej szerokości, a wnętrze 90 vw — tam margines dawał
   sam układ. Dokładam 1 rem po bokach TYLKO poniżej 768 px: tam siatki są w jednej
   kolumnie (504 px → 421 px tekstu, 390 px → 319 px; próg bramki 280 zachowany).
   Od 768 NIE dokładam: czterokolumnowe `.ikony--4` od 1340 px mają 292,7 px tekstu
   w pasie 1255 px; 1 rem po bokach zabiera po 8 px z kolumny → 284,7 przy 1366, ale
   już 279 przy 1340 (pas 1232,8 px) — poniżej progu 280. Mieści się tylko mniejszy
   wcięcie (.75 rem → 281 przy 1340). Na desktopie pasmo zostaje „na styk" i to jest
   DECYZJA DO PODJĘCIA, nie pewnik (DECYZJE-19, pkt N2). */
/* POPRAWKA PO BRAMCE (13.10): przy 390 px padding 1 rem dał 269 px bloku tekstu karty
   (strony główne, N3, próg 280) — arytmetyka z mojego meldunku liczyła kolumnę ikon, a
   bramka mierzy tekst w KARCIE: 0,9·W − 2·16 (padding) − 50 (ramka+wyściółka karty).
   Warunek tekst ≥ 280 przy 1 rem: W ≥ 402 px. Dolna granica 420 px (przy 420: 296 px,
   zapas 16) — 390 px bez wcięcia (301 px, jak przed rundą), 504 px z wcięciem (355 px).
   Górna granica 699,98: od 700 px karty tematyczne są w 2 kolumnach (tekst i bez wcięcia
   ~255 px) i nie pogarszam tego. Wcięcie dotyczy więc 420–699 px. */
@media(min-width:420px) and (max-width:699.98px){
  article.tresc>.sekcja--tlo>.uklad{padding-inline:1rem}
}