/* ============================================================================
   OKR Poland, arkusz strony. Kierunek A: czern, papier, jeden czerwony akcent.
   Zrodlo projektu: kanwa Claude Design (research/strona-2026-09), plansze Www-*.
   Zasady: zero stylow w atrybucie style (T23 w JG), kolumna 1248 px, przerwy
   z clamp(), responsywnosc mierzona, nie zgadywana.
   ========================================================================== */

:root {
  --ink: #141413;
  --papier: #f2f1ef;
  --biel: #ffffff;
  --czerw: #d31219;
  --szary: #6b6a66;
  --szary-d: #b9b7b1;
  --linia: #e6e5e1;
  --linia-c: #2a2a28;
  --tekst: #3d3c39;
  --q: "Quicksand", system-ui, sans-serif;
  --r: "Raleway", "Segoe UI", system-ui, sans-serif;
  --m: "IBM Plex Mono", Consolas, monospace;
  --szpalta: 1248px;
  --margines: clamp(20px, 6.6vw, 96px);
  --pas: clamp(48px, 7vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--biel); color: var(--ink);
  font-family: var(--r); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--czerw); outline-offset: 3px; }
.mono { font-family: var(--m); font-size: 12.5px; color: var(--szary); }
/* ⚠ `.czerw` MUSI stac PO `.mono`. Obie reguly maja te sama wage (jedna klasa), wiec o kolorze
   decyduje kolejnosc w arkuszu, a `.mono` niesie wlasny `color: var(--szary)`. Do 13.09.2026
   `.czerw` stalo WYZEJ i kazdy `class="mono czerw"` wychodzil SZARY, choc w zrodle strony stoi
   „czerwony”: numery kart na /strategia i /wdrazanie-okr, numery pol na /one-pager, numery
   wnioskow w artykulach, rozdzialy na /rozmowa i „404”. Na planszach kanwy wszystkie te numery
   sa czerwone, wiec rozjazd znalazl pomiar obu stron (T21), a nie czytanie kodu. */
.czerw { color: var(--czerw); }

/* ------------------------------------------------------------ szkielet */
/* ⚠ `--szpalta` to szerokosc TRESCI, nie pudelka: margines boczny dochodzi DO niej, a nie zjada
   jej od srodka. Przy `box-sizing: border-box` samo `max-width: var(--szpalta)` liczylo `padding`
   wewnatrz, wiec przy 1440 px kolumna miala 1058 px zamiast 1248 px i stala 191 px od krawedzi
   zamiast 96 px. Na planszach `.band` ma `padding: 0 96px` na pelnej szerokosci, czyli dokladnie
   1248 px tresci, wiec KAZDA sekcja serwisu (naglowek, pasy, stopka) byla o 190 px za waska.
   Golym okiem widac to bylo tylko tam, gdzie w wierszu stoi przycisk dosuniety do prawej: pasek
   „Porozmawiajmy o Twojej firmie" na /o-nas i /historie (uwaga Szymona 13.09: „jakis ogromny
   margines po prawej"). Ten sam wzorzec stoi juz obok w `.kol` i `.kol-doc`. Ponizej 1248 px
   szerokosci okna nic sie nie zmienia, bo tam o wszystkim decyduje szerokosc okna. */
.szpalta { max-width: calc(var(--szpalta) + 2 * var(--margines)); margin: 0 auto; padding-left: var(--margines); padding-right: var(--margines); }
.szpalta--srednia > * { max-width: 900px; }
.szpalta--waska > * { max-width: 760px; }
.pas { padding-top: var(--pas); padding-bottom: var(--pas); }
.pas--papier { background: var(--papier); }
.pas--ink { background: var(--ink); color: var(--biel); }
.pas--bez-dolu { padding-bottom: 32px; }
.pas--koniec { padding-bottom: clamp(64px, 9vw, 96px); }
.pas--art { padding-top: 40px; padding-bottom: 24px; }
.kol { max-width: calc(740px + 2 * var(--margines)); }
.kol-doc { max-width: calc(800px + 2 * var(--margines)); }

.siatka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; }
.siatka-2--waska { grid-template-columns: 380px 1fr; }
.siatka-2--form { grid-template-columns: 1fr 480px; }
.siatka-2--film { grid-template-columns: 1fr 640px; align-items: center; }
.siatka-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.siatka-3--ciasna { gap: 18px; }
.siatka-3--stopka-art { grid-template-columns: 1fr 1fr 360px; gap: 48px; }   /* proporcje z plansz artykulu */
/* Koniec artykulu po wyprowadzeniu autorki do wlasnego pasa: zostaly DWIE kolumny, nie trzy
   (proporcje z plansz `Www-Artykul-Wariacje-PL`, punkt 12). Newsletter szerszy, bo to on jest
   konwersja tekstu; kolumna 360 px niesie „czytaj dalej" albo odnosnik do nagrania. */
.siatka-2--koniec-art { grid-template-columns: 1fr 360px; gap: 56px; align-items: start; }
.siatka-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 24px; }
.siatka-art { display: grid; grid-template-columns: 1fr 340px; gap: 64px; align-items: start; }
.naglowek-rzad { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 30px; }

/* ------------------------------------------------------------ typografia */
.eb { font-family: var(--m); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--szary); margin-bottom: 14px; }
.eb--czerw { color: var(--czerw); }
.eb--light { color: var(--szary-d); }
.h1 { font-family: var(--q); font-weight: 700; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 20px; }
.h1--waski { max-width: 900px; }
.h2 { font-family: var(--q); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.01em; max-width: 760px; text-wrap: balance; margin-bottom: 16px; }
.h2--m { font-size: clamp(24px, 2.6vw, 34px); }
.h3 { font-family: var(--q); font-weight: 700; font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--tekst); max-width: 620px; }
.lead--ink { color: var(--ink); font-size: 20px; }
.lead--light { color: var(--szary-d); }
.p { font-size: 17px; line-height: 1.55; color: var(--tekst); max-width: 620px; }
.p--maly { font-size: 15px; }
.p--light { color: var(--szary-d); }
.pas--ink .h1, .pas--ink .h2, .pas--ink .h3 { color: var(--biel); }
.nota { font-family: var(--m); font-size: 12px; color: var(--szary); line-height: 1.5; }
.lnk { color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-color: var(--czerw); text-underline-offset: 5px; white-space: nowrap; }
.lnk--maly { font-size: 14px; }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.kropki { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.kropki li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.45; color: var(--tekst); }
.kropki li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
/* Dluga lista jednolinijkowa (typy Klientow na /wdrazanie-okr): dwie kolumny, zeby nie rosla w pion */
.kropki--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; margin-top: 24px; }
.kropki--2 + .nota--kim { margin-top: 24px; }
/* Drugi eyebrow w tym samym pasie (np. „co z tego masz” pod akapitem o tym, co robimy dzis) */
.eb--sekcja { margin-top: 52px; margin-bottom: 0; }
.eb--sekcja + .karty-2, .eb--sekcja + .karty-3, .eb--sekcja + .lista-linkow { margin-top: 16px; }

/* ------------------------------------------------------------ przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; font-family: var(--r); font-weight: 700; font-size: 15px; border-radius: 2px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.btn--ink { background: var(--ink); color: var(--biel); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--lite { background: var(--biel); color: var(--ink); }
/* ⚠ ODWROCENIE KOLOROW TYLKO TAM, GDZIE NAJECHANIE W OGOLE ISTNIEJE. Na dotyku przegladarka
   zostawia `:hover` na elemencie PO STUKNIECIU, az do stukniecia gdzie indziej, wiec przycisk
   zostawal odwrocony po powrocie z miejsca, do ktorego prowadzil. Na telefonie bylo to widac
   najmocniej na „Jak pracujemy”: tam `.btn--line` jest przerysowany na zwykly link (bez tla
   i bez ramki, arkusz nizej), a `:hover` dokladal do niego samo `color: var(--biel)`, czyli
   bialy napis na papierze. Zmierzone 13.09 na stagingu, 390 px, kontekst dotykowy: spoczynek
   rgb(20,20,19) -> po stuknieciu i powrocie w gore rgb(255,255,255) (uwaga Szymona: „po
   wcisnieciu font zmienia sie na bialy [...] po powrocie w gore napis jest bialy na jasnym tle
   i niewidoczny”). Ta sama pulapka dotyczyla dwoch pozostalych `.btn--line` w serwisie
   (/wdrazanie-okr, strony po zapisie), wiec bramka stoi przy REGULE, nie przy jednym miejscu.
   Stan skupienia zostaje widoczny: `:focus-visible` rysuje czerwony obrys (gora arkusza). */
@media (hover: hover) {
  .btn--ink:hover { background: #2a2a28; }
  .btn--line:hover { background: var(--ink); color: var(--biel); }
  .btn--lite:hover { background: var(--papier); }
}
.btn--maly { height: 44px; padding: 0 20px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: wait; }

/* ------------------------------------------------------------ nawigacja */
.nawigacja { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; border-bottom: 1px solid var(--linia); }
.nawigacja--sama { min-height: 80px; }
.nawigacja__logo { display: block; line-height: 0; }
.nawigacja__linki { display: flex; align-items: center; gap: 30px; }
.nawigacja__linki a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nawigacja__linki a[aria-current="page"] { border-bottom-color: var(--czerw); }
/* Waski pas tuz nad progiem hamburgera: piec pozycji menu z dluzsza nazwa „Wdrozenia OKR"
   lamalo sie na dwie linie miedzy 901 a 909 px (pomiar 13.09). Ciasniejsze odstepy kupuja
   tyle miejsca, ile trzeba, bez przesuwania progu hamburgera i bez skracania nazwy. */
@media (min-width: 701px) and (max-width: 980px) {
  .nawigacja__linki { gap: 22px; }
  .nawigacja { column-gap: 18px; }
}
.nawigacja__jezyk { font-family: var(--m); font-size: 13px; color: var(--szary) !important; }
.nawigacja__linki { margin-left: auto; }
/* Ponizej 900 px: DWA rzedy (znak + przycisk, pod nimi linki), jak T22 na justgravity.pl.
   Trzeci rzad czyta sie jak przypadkowe zawiniecie, a przycisk w przewijanym rzedzie linkow
   wypadal poza kadr (zmierzone 12.09.2026 przy 375 px). */
@media (max-width: 900px) {
  .nawigacja { flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 12px; row-gap: 12px; }
  .nawigacja__logo { order: 0; }
  .nawigacja__cta { order: 1; margin-left: auto; }
  .nawigacja__linki { order: 2; width: 100%; margin: 0; gap: 8px 18px; flex-wrap: wrap; }
  .nawigacja__linki a { font-size: 14px; }
}
@media (max-width: 400px) {
  .nawigacja__linki a[aria-current="page"] { display: none; }
  .karta-form { padding: 22px 18px; }  /* 320 px: karta z angielskim przyciskiem miala 305 px w kolumnie 280 px */
}

/* ------------------------------------------------------------ hero */
.hero { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 48px; }
.hero__siatka { display: grid; grid-template-columns: 1fr 600px; gap: 56px; align-items: center; }
.hero__tresc .eb { margin-bottom: 18px; }
.hero__tresc .h1 { font-size: clamp(36px, 4.6vw, 58px); }
/* ⚠ Byla tu druga regula `max-width: var(--szpalta)`, powtarzajaca to, co `.szpalta` i tak
   nadaje. Po poprawce szerokosci kolumny (wyzej) przestala byc powtorzeniem i zaczela cofac
   ten pasek do starej, waskiej wersji: kreska szla od 96 px, a liczby pod nia od 191 px. */
.hero__pasek { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 44px; padding-top: 22px; border-top: 1px solid #dad9d4; font-family: var(--q); font-weight: 700; font-size: 17px; }
@media (max-width: 1000px) {
  .hero__siatka { grid-template-columns: 1fr; gap: 32px; }
  .hero__foto { order: -1; }
}

/* ------------------------------------------------------------ zdjecia z kolorem po najechaniu */
.foto { position: relative; display: block; line-height: 0; overflow: hidden; }
.foto img { display: block; width: 100%; height: auto; object-fit: cover; }
.foto__kolor { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
.foto:hover .foto__kolor, .foto.w-kadrze .foto__kolor { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .foto__kolor { transition: none; } }
/* kolko plynne: w waskiej kolumnie siatki kurczy sie zamiast wypychac strone w bok (pomiar kontrola_ukladu.py, 620 px) */
.foto--kolo { width: min(176px, 100%); aspect-ratio: 1 / 1; height: auto; border-radius: 50%; }
.foto--kolo img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.foto--pelna { width: 100%; }
.foto--pelna img { aspect-ratio: 16 / 9; }
/* Zdjecie w O nas: szerokosc kolumny tekstu, nie caly ekran (uwaga Szymona 12.09: przy 1440 px
   jakosc pliku nie wystarcza; wersja pelnoekranowa zostaje na kanwie na cmentarzysku) */
.foto--srednia { max-width: 900px; margin: 0 auto; }
.foto--srednia img { aspect-ratio: 16 / 9; }
/* Zdjecie w O nas stoi we WLASNYM ciemnym pasie, nie pod akapitem (uwaga Szymona 12.09: zdjecie
   przylegajace do tekstu wygladalo zle). Czern ramuje czarno-biale zdjecie z czerwonym fotelem. */
.pas--foto { padding-top: 56px; padding-bottom: 44px; }
.pas--foto .nota { max-width: 900px; margin: 12px auto 0; }
.nota--light { color: var(--szary-d); }
.hero__foto img { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------ cytaty (z czym firmy przychodza) */
.cyt li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--linia); }
.cyt li:last-child { border-bottom: 1px solid var(--linia); }
.cyt__tekst { font-family: var(--q); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.2; }

/* ------------------------------------------------------------ kroki */
.kroki { display: grid; gap: 20px; margin-top: 44px; }
.kroki--5 { grid-template-columns: repeat(5, 1fr); }
.kroki--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.kroki li { border-left: 2px solid var(--ink); padding-left: 18px; padding-right: 12px; display: flex; flex-direction: column; gap: 10px; }
.kroki__nr { font-family: var(--q); font-weight: 700; font-size: 44px; line-height: 1; }
.kroki--3 .kroki__nr { font-size: 40px; }
.kroki li p { font-size: 14.5px; line-height: 1.5; color: var(--tekst); }
.kroki li .h3 { font-size: 19px; }
.kroki__bramka { font-family: var(--m); font-size: 12px; line-height: 1.45; color: var(--szary); margin-top: auto; }
.kroki__bramka span { text-transform: uppercase; letter-spacing: .1em; }
.kroki__bramka--czerw { color: var(--czerw); }
.pas .kroki + .p, .pas .zasady + .p { margin-top: 36px; max-width: 900px; }

/* ------------------------------------------------------------ liczby, dowod */
.liczby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 30px 0 44px; }
.liczby--4 { grid-template-columns: repeat(4, 1fr); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linia-c); }
.liczba { display: flex; flex-direction: column; gap: 8px; }
.liczba__wartosc { font-family: var(--q); font-weight: 700; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; color: var(--biel); }
.liczba__opis { font-size: 15px; line-height: 1.45; color: var(--szary-d); max-width: 260px; }
.firmy { font-family: var(--q); font-weight: 700; font-size: 20px; line-height: 1.55; max-width: 1100px; color: var(--biel); margin-bottom: 10px; }
.firmy--ink { color: var(--ink); }

/* ------------------------------------------------------------ karty, kafle */
.karta-form { background: var(--papier); border: 1px solid var(--linia); padding: 30px; }

/* Kafel materialu OnePagera (/one-pager/materialy/<token>): ciemny, kolor dopiero po najechaniu, miniatura jako badz
   w prawym gornym rogu (plansza Www-OnePager-Materialy-*, wariant 1, decyzja Szymona 21.10). Miniatura jak karty
   odcinkow i fasada filmu (T28, T45): `grayscale(1)` w spoczynku, kolor po najechaniu i w kadrze na dotyku (`.w-kadrze`
   z obserwatora w okrp.js). Ramka, podkreslenie tytulu i przycisk reaguja razem z nia, W JEDNYM TEMPIE (.5s ease,
   standard „przejscia po najechaniu” w README): cztery zmiany w roznych tempach szarpaly (uwaga Szymona 21.10).
   Kafle w wierszu maja rowna wysokosc (siatka rozciaga, przycisk przypiety do dolu), bo .siatka-2 ma align-items: start
   i kafel z dluzszym tytulem wystawal pod sasiada. */
.siatka-2--materialy { gap: 28px 24px; padding-top: 24px; align-items: stretch; }
.kafel-m { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; background: var(--ink); color: var(--biel); border: 1px solid #2a2a28; padding: 92px 30px 30px; margin-top: 44px; text-decoration: none; transition: border-color .5s ease; }
.kafel-m .h3 { color: var(--biel); margin-bottom: 0; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .5s ease; }
.kafel-m p { font-size: 15px; line-height: 1.5; color: var(--szary-d); }
.kafel-m__eb { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.kafel-m__tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--czerw); color: var(--czerw); font-size: 10.5px; letter-spacing: 0.1em; }
.kafel-m__badz { position: absolute; right: -16px; top: -44px; width: 196px; height: 118px; display: block; border: 3px solid var(--biel); background: var(--biel); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); overflow: hidden; }
.kafel-m__badz img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; filter: grayscale(1); transition: filter .5s ease; }
.kafel-m__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.kafel-m__play span { width: 44px; height: 44px; border-radius: 50%; background: rgba(20, 20, 19, .78); border: 2px solid var(--biel); display: flex; align-items: center; justify-content: center; }
.kafel-m__play span::after { content: ""; width: 0; height: 0; border-left: 14px solid var(--biel); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.kafel-m__btn { margin-top: auto; padding-top: 0; color: var(--biel); border-color: var(--biel); transition: background-color .5s ease, color .5s ease; }
.kafel-m p { margin-bottom: 12px; }
.kafel-m.w-kadrze .kafel-m__badz img { filter: none; }
@media (hover: hover) {
  .kafel-m:hover { border-color: var(--czerw); }
  .kafel-m:hover .kafel-m__badz img { filter: none; }
  .kafel-m:hover .h3 { text-decoration-color: var(--czerw); }
  .kafel-m:hover .kafel-m__btn { background: var(--biel); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .kafel-m, .kafel-m .h3, .kafel-m__badz img, .kafel-m__btn { transition: none; } }
@media (max-width: 720px) { .kafel-m__badz { right: 12px; } }
/* Kafel materialu przy 320 px: angielski przycisk „Download the template (PDF)” (nowrap z .btn) rozpychal kafel
   do 328 px i cala strone /one-pager/materials do 348 px (kontrola_ukladu.py na produkcji 23.10.2026). */
@media (max-width: 400px) { .kafel-m { min-width: 0; } .kafel-m__btn { white-space: normal; text-align: left; } }
.pas--papier .karta-form { background: var(--biel); }
.karta-form--biala { background: var(--biel); }
.karty-2, .karty-3 { display: grid; gap: 20px; margin-top: 36px; }
.karty-2 { grid-template-columns: repeat(2, 1fr); }
.karty-3 { grid-template-columns: repeat(3, 1fr); }
.karty-2 li, .karty-3 li { background: var(--biel); border: 1px solid var(--linia); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.karty-2 li p, .karty-3 li p { font-size: 15px; line-height: 1.5; color: var(--tekst); }
.pas--papier .karty-3 li { background: var(--biel); }
.pas:not(.pas--papier) .karty-2 li { background: var(--papier); }
.karty-2 .mono, .karty-3 .mono { font-family: var(--q); font-weight: 700; font-size: 30px; line-height: 1; }
/* Piec pol OnePagera: numer jest tu MALY, monospace i czerwony, a nie wielka liczba Quicksandem.
   Tak stoi na obu planszach OnePagera (desktop i telefon) i tylko tam, wiec to wariant listy,
   a nie zmiana reguly dla wszystkich kart. Regula MUSI stac po tej wyzej: ma te sama wage. */
.karty-3--pola .mono { font-family: var(--m); font-weight: 400; font-size: 12px; line-height: 1.45; }
.kafle { margin-top: 44px; }
.kafel { background: var(--biel); border: 1px solid var(--linia); padding: 30px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; }
.kafel:hover { border-color: var(--ink); }
.kafel .h3 { font-size: 26px; line-height: 1.15; }
.kafel .p { font-size: 15px; }
.karta-ciemna { background: var(--ink); color: var(--biel); padding: 24px; display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.karta-ciemna .h3 { color: var(--biel); }
.karta-ciemna .btn { align-self: flex-start; }
.cta-pas { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
/* ⚠ `text-wrap: wrap`, czyli WYLACZENIE `balance` z `.h2`: w pasku CTA naglowek ma wypelnic
   kolumne, jak na planszach. Wyrownywanie dlugosci wierszy lamie „Porozmawiajmy o Twojej firmie"
   po pierwszym slowie i zostawia obok pusta polowe pasa, co na telefonie czyta sie jako blad
   ukladu. W pozostalych naglowkach `balance` zostaje: tam tekst stoi w kolumnie tekstowej,
   a nie w wierszu z przyciskiem. (`text-wrap: normal` NIE dziala, to nie jest wartosc tej
   wlasciwosci i przegladarka po cichu pomija cala deklaracje.) */
.cta-pas .h2 { margin-bottom: 8px; text-wrap: wrap; }
.rzad-nota { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linia); }
.rzad-nota a { color: var(--ink); }

/* ------------------------------------------------------------ sygnet zamykajacy strone
   Znak OKR Poland w ostatnim pasie /strategia: na szerokim ekranie stoi w drugiej kolumnie
   obok tekstu (`siatka-2--sygnet` zrownuje obie w pionie), na telefonie pod tekstem, na srodku.
   Tak samo na obu planszach: `Www-Strategia-PL` (72 px, kolumna obok) i
   `Www-Mobile-Strategia-A-PL` (64 px, pod tekstem). Wielkosc rozstrzyga plansza. */
.siatka-2--sygnet { align-items: center; }
.sygnet-koniec { display: flex; justify-content: center; }
.sygnet-koniec svg { width: 72px; height: auto; }

/* ------------------------------------------------------------ odcinki Kawy */
.karta-odc { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; }
.karta-odc__obraz { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
/* Miniatura odcinka zachowuje sie DOKLADNIE jak zdjecia zespolu (uwaga Szymona 13.09: „niech kolor
   zachowuje sie na miniaturach tak samo jak na twarzach przy scrollowaniu”): czarno-biala, kolor po
   najechaniu, a na dotyku po wjechaniu w srodkowy pas kadru. Ten sam obserwator i ta sama klasa
   `.w-kadrze` co w `zdjecia()` w okrp.js, wiec prog i zachowanie sa jedna decyzja, nie dwiema.
   ⚠ Tutaj wystarcza `filter: grayscale()`, a zdjecia zespolu potrzebuja DWOCH plikow (T12): tam
   trzeba bylo zostawic czerwony fotel w wersji czarno-bialej, czego filtr nie umie. Miniatura nie
   ma takiego elementu do zachowania, wiec drugi plik per odcinek (57 sztuk, dwa razy wiecej pobran)
   bylby kosztem bez powodu. */
.karta-odc__obraz img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s; }
.karta-odc:hover .karta-odc__obraz img,
.karta-odc.w-kadrze .karta-odc__obraz img { filter: none; }
@media (prefers-reduced-motion: reduce) { .karta-odc__obraz img { transition: none; } }
.karta-odc__obraz .eb { position: absolute; left: 14px; top: 12px; margin: 0; padding: 4px 8px; background: rgba(20, 20, 19, .75); }
.karta-odc__tytul { font-family: var(--q); font-weight: 700; font-size: 20px; line-height: 1.25; }
.karta-odc:hover .karta-odc__tytul { text-decoration: underline; text-decoration-color: var(--czerw); text-underline-offset: 4px; }

/* Doladowywanie listy odcinkow po piec (T50). Karty poza pierwsza porcja chowa TEN arkusz,
   a nie skrypt: bez skryptu `<noscript>` w naglowku hubu przywraca im `display: flex`, wiec
   widac wszystkie szescdziesiat. Gdyby chowal je skrypt, byloby odwrotnie i gorzej w obie
   strony: przesuniecie ukladu przy wlaczonym skrypcie i piec odcinkow na zawsze bez niego.
   Przycisk jest `hidden` w zrodle i odslania go dopiero skrypt, stad wyjatek `[hidden]`
   (ta sama mechanika co przy banerze zgody i pasku CTA). */
.karta-odc--dalsza { display: none; }
.lista-wiecej { display: flex; justify-content: center; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--linia); }
.lista-wiecej[hidden] { display: none; }

/* ------------------------------------------------------------ wideo (fasada) */
.wideo { position: relative; aspect-ratio: 16 / 9; background: var(--ink); cursor: pointer; overflow: hidden; margin-top: 8px; }
/* Miniatura i plakat filmu zachowuja sie jak zdjecia zespolu i karty odcinkow: czarno-biale,
   kolor po najechaniu, a na dotyku po wjechaniu w SRODKOWY PAS kadru (uwaga Szymona 13.09).
   Ten sam filtr, ten sam czas przejscia i ta sama klasa `.w-kadrze` co przy kartach odcinkow
   (T28), wiec obserwator w okrp.js jest jeden i prog jest jedna decyzja, nie trzema.
   ⚠ Dotyczy KAZDEGO `.wideo`, nie listy stron: miniatury odcinkow z YouTube (strona odcinka,
   /historie) i plakatow nagrania. Na czarnej planszy nagrania filtr niczego nie zmienia, wiec
   wyjatek dla niej byłby wyjatkiem bez skutku. Po uruchomieniu odtwarzacza obrazka juz nie ma
   (okrp.js podmienia zawartosc na iframe), wiec filtr nie ma jak dotknac filmu. */
.wideo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .5s ease; }
.wideo:hover img, .wideo.w-kadrze img { filter: none; }
@media (prefers-reduced-motion: reduce) { .wideo img { transition: none; } }
.wideo__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wideo__play svg { width: 72px; height: 72px; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .4)); transition: transform .15s; }
.wideo:hover .wideo__play svg { transform: scale(1.06); }
.wideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wideo__wkrotce { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: rgba(20, 20, 19, .85); color: var(--szary-d); font-family: var(--m); font-size: 12.5px; }
.wideo--wkrotce { cursor: default; }
.wideo--wkrotce .wideo__play { display: none; }
.rozdzialy { margin-top: 6px; }
.rozdzialy li { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linia); font-size: 16px; color: var(--tekst); }
.rozdzialy li:last-child { border-bottom: 1px solid var(--linia); }

/* ------------------------------------------------------------ zespol */
.zespol { display: grid; gap: 40px 24px; }
.zespol--5 { grid-template-columns: repeat(5, 1fr); }
.zespol--3 { grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.osoba { display: flex; flex-direction: column; gap: 10px; }
.osoba .h3 { font-size: 18px; margin: 4px 0 0; }
.osoba__rola { font-size: 13.5px; line-height: 1.45; color: var(--szary); max-width: 240px; }
.osoba p { font-size: 14.5px; line-height: 1.5; color: var(--tekst); max-width: 260px; }
.zespol--3 .foto--kolo { width: min(200px, 100%); }
.zasady { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 30px; }
.zasady--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.zasady--2 { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 12px; }
/* Jedna kolumna mimo szerokiego ekranu: lista stoi w polowie siatki, obok rysunku */
.zasady--kolumna { grid-template-columns: 1fr; gap: 22px; }
.zasady li { border-left: 2px solid var(--ink); padding-left: 18px; }
/* ⚠ `:not(.eb)` jest tu konieczne: etykieta sekcji to TEZ akapit (`<p class="eb">`), a ta regula
   ma wieksza wage niz `.eb`, wiec bez wyjatku nadtytul etapu na /wdrazanie-okr wychodzil
   15 px w kolorze tekstu zamiast 12 px na szaro. Zmierzone na obu szerokosciach (T21). */
.zasady li p:not(.eb) { font-size: 15px; line-height: 1.55; color: var(--tekst); }

/* ------------------------------------------------------------ historie */
.historie { margin-top: 10px; }
.historia { display: grid; grid-template-columns: 560px 1fr; gap: 48px; align-items: start; padding: 40px 0; border-top: 1px solid var(--linia); }
.historia--odwrotna { grid-template-columns: 1fr 560px; }
.historia--odwrotna .historia__film { order: 2; }
.historia__film .wideo { margin: 0 0 10px; }
.historia__tresc { display: flex; flex-direction: column; gap: 22px; }
.historia__tresc .h2 { margin: 0; }
.historia__tresc .siatka-3 p { font-size: 14.5px; line-height: 1.5; color: var(--tekst); }
.cytat { border-left: 3px solid var(--czerw); padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cytat p { font-family: var(--q); font-weight: 700; font-size: 19px; line-height: 1.35; }
.cytat cite { font-style: normal; }
.historie + * { border-top: 1px solid var(--linia); }

/* ------------------------------------------------------------ formularze */
.formularz { display: flex; flex-direction: column; gap: 14px; }
.pole { display: flex; flex-direction: column; gap: 6px; }
.pole__etykieta { font-size: 13px; font-weight: 600; color: var(--tekst); }
.pole input, .pole textarea { width: 100%; min-height: 52px; border: 1.5px solid var(--ink); background: var(--biel); padding: 12px 16px; font: inherit; font-size: 15px; color: var(--ink); border-radius: 2px; }
.pole textarea { min-height: 110px; resize: vertical; }
.pole input:focus, .pole textarea:focus { outline: 2px solid var(--czerw); outline-offset: 1px; }
.pole--blad input, .pole--blad textarea { border-color: var(--czerw); }
.pole__blad { font-family: var(--m); font-size: 12px; color: var(--czerw); min-height: 0; }
.pole__blad:empty { display: none; }
/* Pulapka na roboty BEZ left:-9999px (T20 w JG: przesuniecie poszerza dokument na telefonie) */
.pole--pulapka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zgoda-pole { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--tekst); cursor: pointer; }
.zgoda-pole input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--ink); }
.zgoda-pole a { color: var(--ink); }
.formularz .btn { align-self: flex-start; padding: 0 40px; }
.formularz--ciemny .pole__etykieta { color: var(--szary-d); }
.formularz__ok { border-top: 1px solid var(--linia); padding-top: 16px; }
.formularz__ok p { font-size: 15px; color: var(--tekst); }
.formularz.wyslany > *:not(.formularz__ok) { display: none; }
.formularz.wyslany .formularz__ok { display: block; }
.po-zapisie { border-top: 1px solid var(--linia); padding-top: 16px; margin-top: 8px; }
.po-zapisie p { font-size: 13.5px; line-height: 1.5; color: var(--tekst); }
.dane { margin-top: 32px; }
.dane__wiersz { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linia); font-size: 15px; color: var(--tekst); }
.dane__wiersz:last-child { border-bottom: 1px solid var(--linia); }

/* ---------- /kontakt: trzy klocki, dwa ulozenia (T21)
   Szeroki ekran (plansza `Www-Kontakt-PL`): tekst i dane w lewej kolumnie jeden pod drugim,
   formularz w prawej kolumnie 560 px na cala wysokosc sekcji, POLA WPROST NA PAPIERZE, bez
   bialej karty z ramka. Telefon (plansza `Www-Mobile-Kontakt-A-PL`): formularz wchodzi
   MIEDZY naglowek a dane jako osobny bialy pas pelnej szerokosci (`pasmo-biel` w `pas--pasma`).
   Obszary siatki, a nie `order`, bo kolejnosc zmienia sie w obu wymiarach naraz, a HTML ma
   pozostac ten sam. Odstep 48 px miedzy tekstem a danymi daje `gap` siatki, wiec wlasny
   `margin-top` bloku danych musi tu zniknac, zeby nie liczyl sie drugi raz. */
/* ⚠ `grid-template-rows: max-content 1fr` jest tu konieczne, nie kosmetyczne: formularz
   rozciaga sie na OBA wiersze i jest wyzszy od tekstu z danymi razem, wiec bez tego siatka
   rozdziela jego nadmiar miedzy oba wiersze i blok „Dane" odjezdza o ponad 100 px w dol
   od akapitu, pod ktorym stoi na planszy. Pierwszy wiersz ma byc wysoki na tekst, drugi
   bierze reszte, a `align-items: start` z `.siatka-2` trzyma dane przy jego gornej krawedzi. */
.siatka-2--kontakt { grid-template-columns: 1fr 560px; grid-template-rows: max-content 1fr; grid-template-areas: "tekst form" "dane form"; }
.kontakt__tekst { grid-area: tekst; }
.kontakt__form { grid-area: form; }
.siatka-2--kontakt .kontakt__dane { grid-area: dane; margin-top: 0; }

/* ---------- /newsletter: ten sam wzorzec co /kontakt, inne proporcje i inny srodkowy klocek
   Szeroki ekran (plansza `Www-Newsletter-PL`): hero i „na start" w lewej kolumnie, formularz
   w prawej na 520 px. Telefon (plansza `Www-Mobile-Newsletter-A-PL`): formularz NAD sekcja
   „na start", a ona na wlasnym bialym pasie. Odstep miedzy wierszami 40 px, a nie 48 px
   z `.siatka-2`, bo tyle ma plansza miedzy akapitem wstepu a etykieta „Na start". */
.siatka-2--newsletter { grid-template-columns: 1fr 520px; grid-template-rows: max-content 1fr; grid-template-areas: "tekst form" "start form"; gap: 40px 64px; }
.nl-tekst { grid-area: tekst; }
.nl-form { grid-area: form; }
.nl-start { grid-area: start; }

/* ------------------------------------------------------------ listy linkow */
.lista-linkow li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--linia); }
.lista-linkow li:last-child { border-bottom: 1px solid var(--linia); }
.lista-linkow a { font-family: var(--q); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.lista-linkow a:hover { text-decoration: underline; text-decoration-color: var(--czerw); text-underline-offset: 4px; }
.lista-linkow p { font-size: 15px; color: var(--tekst); margin-top: 4px; }
.lista-linkow--bok a { font-size: 16px; }
.lista-linkow--duza a { font-size: 22px; }
.lista-linkow--arch li { flex-direction: row; justify-content: space-between; gap: 20px; font-family: var(--q); font-weight: 700; font-size: 17px; }
/* Pojedynczy link „czytaj dalej” pod siatka; lista zamiast .lnk, bo .lnk nie lamie sie na telefonie */
.lista-linkow--dalej { margin-top: 44px; }
.bok { display: flex; flex-direction: column; gap: 28px; }

/* ------------------------------------------------------------ lista tekstow (/wiedza/artykuly) */
/* DWA RYTMY na jednej stronie, zeby bylo widac, co jest nasze: NASZ tekst to duzy wiersz
   z rysunkiem ostrej kreski po prawej (rysunek ma TYLKO nasz tekst, wiec dziala jak znak
   wlasnosci), a tekst u cudzego wydawcy to zwarta pozycja ze strzalka w gore. Do 13.09.2026
   obie listy byly tym samym klockiem `lista-linkow--duza` i nie dalo sie ich odroznic. */
.teksty-nasze { margin-top: 10px; }
.tekst-nasz { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; padding: 44px 0; border-top: 1px solid var(--linia); }
.tekst-nasz:last-child { border-bottom: 1px solid var(--linia); }
.tekst-nasz__tresc { display: flex; flex-direction: column; gap: 12px; }
.tekst-nasz__tresc .eb { margin-bottom: 0; }
.tekst-nasz__tytul { font-family: var(--q); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; max-width: 760px; margin: 0; }
.tekst-nasz__tytul a { text-decoration: none; }
.tekst-nasz__tytul a:hover { text-decoration: underline; text-decoration-color: var(--czerw); text-underline-offset: 5px; }
.tekst-nasz .p { font-size: 16.5px; max-width: 760px; }
.tekst-nasz__czytaj { margin-top: 4px; }
.tekst-nasz__rys { display: flex; justify-content: center; }
/* Rysunki maja `overflow: visible` (podpisy wychodza poza ramke viewBox), wiec stoja wysrodkowane
   w kolumnie szerszej od siebie: inaczej podpis z prawej strony dotyka krawedzi kolumny tekstu. */
.tekst-nasz__rys svg { width: 100%; max-width: 260px; height: auto; }

.teksty-zew { margin-top: 10px; max-width: 900px; }
.teksty-zew li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--linia); }
.teksty-zew li:last-child { border-bottom: 1px solid var(--linia); }
.teksty-zew .mono { font-size: 12px; }
.teksty-zew a { font-family: var(--q); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.teksty-zew a:hover { text-decoration: underline; text-decoration-color: var(--czerw); text-underline-offset: 4px; }
.tekst-zew__strzalka { color: var(--szary); margin-left: 6px; font-weight: 400; }
.teksty-zew li p:not(.mono) { font-size: 15px; line-height: 1.5; color: var(--tekst); }
.teksty-zew__nota { margin-top: 16px; max-width: 900px; }

/* ------------------------------------------------------------ artykul */
/* .art = typografia artykulu; szerokosc kolumny daje .kol (740 px + marginesy), zeby tekst stal w osi naglowka */
.art p { font-size: 18px; line-height: 1.7; color: var(--tekst); margin: 0 0 22px; }
.art h2 { font-family: var(--q); font-weight: 700; font-size: 28px; line-height: 1.2; margin: 40px 0 16px; letter-spacing: -0.01em; }
.art h2:first-child { margin-top: 0; }
.art .p { margin-bottom: 0; }
.ilu { display: flex; flex-direction: column; gap: 10px; margin: 34px 0; }
.ilu svg { width: 100%; max-width: 560px; height: auto; }
.ilu figcaption { font-family: var(--m); font-size: 12px; color: var(--szary); line-height: 1.45; max-width: 560px; }
.ilu figcaption b { color: var(--ink); }
.zrodla { font-size: 11.5px; line-height: 1.5; padding-top: 18px; border-top: 1px solid var(--linia); }
.wnioski { background: var(--papier); border: 1px solid var(--linia); padding: 30px 34px 14px; margin: 8px 0 56px; }
.wnioski .h2 { margin-bottom: 14px; }
.wnioski__lista li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid #dad9d4; }
.wnioski__lista .mono { font-family: var(--q); font-weight: 700; font-size: 26px; line-height: 1; }
.wnioski__lista .h3 { font-size: 20px; }
.wnioski__lista p { font-size: 15.5px; line-height: 1.55; color: var(--tekst); }
/* Numer wniosku: ZAWSZE czerwony, na kazdej szerokosci (decyzja Szymona 13.09).
   Pierwsza wersja odslaniala czerwien dopiero po najechaniu; odrzucona, bo w spoczynku
   desktop tracil akcent, ktory pokazuje plansza, sekcja czytala sie plasko, a na duzych
   ekranach dotykowych najechania nie ma wcale.
   Sprzezenie zwrotne daje wiec KRESKA, nie kolor: po najechaniu na lewej krawedzi pozycji
   wjezdza czerwona linia 2 px, a tlo wiersza przechodzi na papier. To ten sam slownik, ktorym
   juz mowimy (ostra kreska w rysunkach, czerwone podkreslenie linkow), wiec nie dokladamy
   czwartego mechanizmu obok trzech, ktore odslaniaja kolor (zdjecia T12, miniatury T28).
   `:focus-within` obok `:hover`, zeby przejscie klawiatura dawalo ten sam sygnal. */
@media (hover: hover) {
  .wnioski__lista li { padding-left: 0; border-left: 2px solid transparent; transition: border-color .2s ease, background-color .2s ease, padding-left .2s ease; }
  .wnioski__lista li:hover, .wnioski__lista li:focus-within { border-left-color: var(--czerw); background: var(--papier); padding-left: 14px; }
  @media (prefers-reduced-motion: reduce) { .wnioski__lista li { transition: none; } }
}

/* AUTORKA: wlasny pas na koncu artykulu i strony odcinka, zamiast jednej z trzech rownych
   kolumn (uwaga Szymona 13.09: „nie ma odpowiedniej ciezkosci, przynajmniej na desktopie").
   Trzy rzeczy robia te ciezkosc i wszystkie trzy sa tu, a nie w HTML: portret 200 px zamiast
   176 px, nazwisko w rozmiarze naglowka sekcji zamiast `.h3`, oraz ROLA jako osobny wiersz
   mono, ktorej wczesniej nie bylo w ogole (generator podawal ja pusta, wiec w zrodle stal pusty
   akapit). Biogram odciety kreska, zeby blok mial wewnetrzny podzial, a nie byl jednym slupkiem.
   Zrodlo ukladu: plansze Www-Artykul-Wariacje-PL i Www-Mobile-Artykul-Wariacje-A-PL, punkt 11. */
.autorka { display: grid; grid-template-columns: 200px 1fr; grid-template-areas: "foto eb" "foto tresc" "foto opis";
  gap: 14px 40px; align-content: start; }
.autorka__eb { grid-area: eb; margin-bottom: 0; align-self: end; }
.autorka .foto--kolo { grid-area: foto; width: 200px; align-self: start; }
.autorka__tresc { grid-area: tresc; display: flex; flex-direction: column; gap: 10px; }
.autorka__opis { grid-area: opis; }
.autorka__nazwisko { font-family: var(--q); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; }
.autorka__rola { font-family: var(--m); font-size: 13px; color: var(--szary); letter-spacing: 0.02em; line-height: 1.45; }
.autorka__opis { font-size: 16.5px; line-height: 1.6; color: var(--tekst); max-width: 720px; border-top: 1px solid var(--linia); padding-top: 14px; }
/* Pas autorki zaczyna sie kreska 2 px: to ona oddziela go od tekstu artykulu, bo oba stoja
   na papierze i bez kreski blok czytalby sie jak kolejny akapit. */
.pas--autorka { border-top: 2px solid var(--ink); padding-top: 48px; padding-bottom: 48px; }
.doc section { padding: 26px 0; border-top: 1px solid var(--linia); }
.doc section:last-child { border-bottom: 1px solid var(--linia); }
.doc p { font-size: 15.5px; line-height: 1.6; color: var(--tekst); margin-top: 10px; }

/* ------------------------------------------------------------ stopka */
/* STYK CIEMNEGO PASA CTA ZE STOPKA (uwaga Szymona 13.09 z /o-nas: „w sekcji porozmawiajmy
   o Twojej firmie przydalby sie jakis lekki separator od stopki, bo zlewaja sie te dwie sekcje").
   Zmierzone: oba tla to dokladnie #141413, przerwa miedzy nimi 0 px, zadnych krawedzi, wiec
   przyciskowi CTA i logo w stopce nie oddziela nic poza 140 px czerni (96 px padding pasa plus
   44 px stopki). Kreska 1 px w `--linia-c` to ten sam token, ktorym rysowane sa wszystkie linie
   na ciemnym tle w tym serwisie (wewnetrzna kreska stopki, liczby w ciemnym pasie na telefonie),
   wiec separator nie wprowadza nowego koloru. Przy okazji dol pasa schodzi z 96 px na 72 px:
   sama kreska w srodku 140 px pustki czytalaby sie jak przypadek, a nie jak granica.
   ⚠ Separator siedzi na PASIE, nie na stopce, i to nie jest wybor estetyczny: stopka jest
   siostra `<main>`, a pas jest w srodku, wiec zaden selektor sasiedztwa nie siega ze stopki do
   poprzedzajacego ja pasa.
   ⚠ Wyzwalaczem jest PARA klas `pas--ink` + `pas--koniec`, czyli „ciemny pas konczacy tresc",
   a nie lista stron: dzis taki styk maja /kontakt, /one-pager, /o-nas i /historie w obu jezykach
   (8 stron, zmierzone), a kazda nastepna strona z takim blokiem dostanie separator razem z nim.
   Ciemne pasy w SRODKU strony (film w artykule, pas z firmami) maja samo `pas--ink` i nie sa
   tym dotkniete. */
.pas--ink.pas--koniec { border-bottom: 1px solid var(--linia-c); padding-bottom: clamp(52px, 7vw, 72px); }
.stopka { background: var(--ink); color: var(--szary-d); padding: 44px 0 40px; }
.stopka__gora { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.stopka__linki { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.stopka__linki a { color: var(--szary-d); text-decoration: none; font-size: 14px; }
.stopka__linki a:hover { color: var(--biel); }
.stopka__dol { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linia-c); }
.stopka__dol .mono { color: var(--szary-d); text-decoration: none; }
.stopka--mala { padding: 26px 0; }
.stopka--mala .stopka__dol { margin: 0; padding: 0; border: 0; }

/* ------------------------------------------------------------ baner zgody */
.zgoda { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; margin: 0 auto; max-width: 720px; background: var(--biel); color: var(--ink); border: 1px solid var(--linia); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.zgoda[hidden] { display: none; }
.zgoda__tekst { font-size: 14px; line-height: 1.5; color: var(--tekst); }
.zgoda__tekst a { color: var(--ink); }
.zgoda__akcje { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.zgoda__btn { height: 40px; padding: 0 16px; border-radius: 2px; border: 1.5px solid var(--ink); background: var(--biel); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; }
.zgoda__btn--tak { background: var(--ink); color: var(--biel); }

/* ------------------------------------------------------------ landing (bez nawigacji) */
.landing main { padding-bottom: 0; }

/* ------------------------------------------------------------ responsywnosc */
@media (max-width: 1100px) {
  .siatka-2--waska { grid-template-columns: 1fr; }
  .siatka-4 { grid-template-columns: repeat(3, 1fr); }
  .kroki--5 { grid-template-columns: repeat(3, 1fr); }
  .zespol--5 { grid-template-columns: repeat(3, 1fr); }
  .zasady--4 { grid-template-columns: repeat(2, 1fr); }
  .siatka-2--film { grid-template-columns: 1fr; }
  /* /kontakt: jedna kolumna i kolejnosc z planszy telefonu (naglowek, formularz, dane).
     ⚠ `grid-template-areas` trzeba przestawic RAZEM z liczba kolumn, bo inaczej zostaje opis
     dwukolumnowy i siatka doklada druga kolumne mimo `1fr`. Prog 1100 px, a nie 860: kolumna
     formularza ma 560 px i miedzy 861 a 1100 px nie miesci sie obok tekstu (zmierzone:
     przelew w poziomie do 919 px przy 900 px okna). Plansze opisuja 1440 px i 390 px,
     wiec o tym, co dzieje sie po drodze, decyduje pomiar. */
  .siatka-2--kontakt { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "tekst" "form" "dane"; }
  /* /newsletter: ta sama mechanika i ten sam prog co /kontakt, kolumna formularza ma 520 px */
  .siatka-2--newsletter { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "tekst" "form" "start"; }
  .siatka-3--stopka-art { grid-template-columns: 1fr 1fr; }
  .historia, .historia--odwrotna { grid-template-columns: 1fr; }
  .historia--odwrotna .historia__film { order: 0; }
}
@media (max-width: 860px) {
  .siatka-2, .siatka-2--form { grid-template-columns: 1fr; gap: 36px; }
  .siatka-3, .siatka-3--stopka-art { grid-template-columns: 1fr 1fr; }
  .siatka-art { grid-template-columns: 1fr; }
  .zespol--3 { grid-template-columns: 1fr 1fr; }
  .liczby, .liczby--4 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .zasady { grid-template-columns: 1fr; gap: 24px; }
  .karty-2, .karty-3 { grid-template-columns: 1fr; }
  .cta-pas { flex-direction: column; align-items: flex-start; }
  .naglowek-rzad { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* ⚠ Wyjatek: naglowek listy (etykieta plus „Wszystkie …") zostaje WIERSZEM takze na waskim
     ekranie, bo plansza mobile huba Wiedzy trzyma oba napisy obok siebie, a oba sa krotkie.
     Pozostale uzycia `naglowek-rzad` maja link `bez-telefonu`, wiec zwijanie do kolumny
     dotyczy tam pustego miejsca po ukrytym linku. */
  .naglowek-rzad--wiersz { flex-direction: row; align-items: baseline; gap: 16px; margin-bottom: 10px; }
  .kropki--2 { grid-template-columns: 1fr; gap: 10px; }
  /* Lista tekstow: rysunek nad tekstem, jak miniatura karty (kolumna 300 px byla tu juz za waska) */
  .tekst-nasz { grid-template-columns: 1fr; gap: 18px; }
  .tekst-nasz__rys { order: -1; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .siatka-3, .siatka-4, .kroki--5, .kroki--3, .zespol--5, .zespol--3, .zasady--2, .zasady--4 { grid-template-columns: 1fr; }
  .liczby, .liczby--4 { grid-template-columns: 1fr; }
  .cyt li { grid-template-columns: 1fr; gap: 6px; }
  .rozdzialy li { grid-template-columns: 1fr; gap: 4px; }
  .rzad-nota { flex-direction: column; align-items: flex-start; }
  /* ⚠ Numer wniosku ZOSTAJE OBOK tekstu, tylko w wezszej kolumnie (36 px zamiast 44 px),
     a nie przenosi sie nad tytul. Tak rysuje to plansza `Www-Mobile-Artykul-A-PL` i tak jest
     czytelniej: numer nad tytulem robi z kazdego wniosku trzy wiersze zamiast dwoch i gubi
     rytm listy (uwaga Szymona 13.09: „sekcja wnioski jest inna niz na kanwie: kolory cyfr
     i inne ulozenie tekstow"; kolor cyfr naprawilo juz T29, ulozenie zostawalo). */
  .wnioski { padding: 22px 20px 8px; margin: 10px 0 34px; }
  .wnioski .h2 { margin-bottom: 8px; }
  .wnioski__lista li { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 0; }
  .wnioski__lista .mono { font-size: 22px; }
  .wnioski__lista .h3 { font-size: 18px; }
  .wnioski__lista p { font-size: 15px; }
  .formularz .btn { align-self: stretch; padding: 0 24px; }
  .zgoda { left: 8px; right: 8px; bottom: 8px; }
  .zgoda__akcje { justify-content: stretch; }
  .zgoda__btn { flex: 1 1 auto; }
  .historia__tresc .siatka-3 { grid-template-columns: 1fr; }
  .art p { font-size: 17px; }
}

/* ============================================================================
   WIDOK TELEFONU (max-width: 700px), T19. To NIE jest zwezony desktop, tylko inny
   uklad: menu chowa sie do panelu pod hamburgerem, glowne CTA stoi w pasku przyklejonym
   do dolu ekranu, zdjecia ida od krawedzi do krawedzi, rzedy kart przewija sie w bok,
   piec krokow staje sie pionowa osia czasu. Zrodlo: plansza Www-Mobile-Glowna-A-PL
   z kanwy, przyjeta przez Szymona 13.09.2026.

   ⚠ PROG 700 px, a nie 900: miedzy 701 a 900 px zostaje uklad DWOCH RZEDOW nawigacji
   (znak i przycisk, pod nimi linki), bo na tabletach jest na niego miejsce, a hamburger
   chowalby tam menu bez potrzeby.

   ⚠ BLOK STOI NA KONCU ARKUSZA celowo: jego reguly maja wygrywac z wczesniejszymi
   media o tej samej wagi (m.in. z regula <= 400 px, ktora chowa link biezacej strony
   w rzedzie linkow, a w panelu menu ma on byc widoczny).

   ⚠ PARA KLAS `.tylko-telefon` / `.bez-telefonu` to JEDYNY dopuszczony sposob pokazania
   innego klocka na telefonie niz na desktopie (dzis: podpis zdjecia w hero i liczby
   w ciemnym pasie pod hero). Tekst nie ginie z pomiaru: kontrola ukladu mierzy obie
   szerokosci, wiec kazdy z tych klockow jest widziany na tej szerokosci, dla ktorej
   powstal (wyjatek w `narzedzia/kontrola_ukladu.py`, kontrola 6).
   ========================================================================== */
.tylko-telefon, .pasek-cta, .nawigacja__telefon { display: none; }

@media (max-width: 700px) {
  :root { --margines: clamp(20px, 5vw, 32px); }
  .tylko-telefon { display: block; }
  .bez-telefonu { display: none; }
  .rzad-link { margin-top: 18px; }  /* link pod rzedem przewijanym, jak na planszy A */
  /* Przycisk doladowania odcinkow na cala szerokosc kolumny, jak kazde CTA na telefonie (T41). */
  .lista-wiecej .btn { width: 100%; }
  .zespol--3 { grid-template-columns: 1fr 1fr; gap: 28px 16px; }  /* O nas: portrety parami, jak na planszy A */
  .zespol--3 .foto--kolo { width: min(160px, 100%); }

  /* ---------- nawigacja: znak, jezyk, hamburger; linki w panelu pod paskiem */
  .nawigacja { position: relative; flex-wrap: nowrap; min-height: 0; gap: 12px; row-gap: 0; padding-top: 12px; padding-bottom: 12px; }
  .nawigacja__cta { display: none; }
  .nawigacja__telefon { display: flex; align-items: center; gap: 18px; margin-left: auto; order: 1; }
  .nawigacja__jezyki { font-family: var(--m); font-size: 13px; color: var(--szary); white-space: nowrap; }
  .nawigacja__jezyki a { color: var(--szary); text-decoration: none; }
  .nawigacja__jezyk-tu { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--czerw); padding-bottom: 2px; }
  .nawigacja__hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
  .nawigacja__hamburger span { display: block; width: 100%; height: 2px; background: var(--ink); transform-origin: center; transition: transform .2s ease, width .2s ease, opacity .2s ease; }
  .nawigacja__hamburger span:last-child { width: 14px; background: var(--czerw); }
  /* Po otwarciu menu hamburger staje sie X w dwoch kolorach (uwaga Szymona 13.09): gorna czarna
     kreska idzie w dol o 45 stopni, dolna czerwona wydluza sie do pelnej szerokosci i idzie w gore
     o 45, srodkowa znika. Przesuniecie 7 px to polowa odleglosci miedzy kreskami: przy trzech
     kreskach 2 px i przerwach 5 px srodki stoja na 5, 12 i 19 px wysokosci przycisku.
     ⚠ Stan czytamy z `aria-expanded`, nie z osobnej klasy: to ten sam atrybut, ktory oglasza
     stan czytnikowi ekranu, wiec obrazek nie ma jak rozjechac sie z tym, co slyszy uzytkownik. */
  .nawigacja__hamburger[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .nawigacja__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nawigacja__hamburger[aria-expanded="true"] span:last-child { width: 100%; transform: translateY(-7px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .nawigacja__hamburger span { transition: none; } }
  .nawigacja__linki { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; order: 0;
    width: auto; margin: 0; padding: 4px var(--margines) 18px; gap: 0;
    flex-direction: column; align-items: stretch;
    background: var(--papier); border-bottom: 1px solid var(--linia); box-shadow: 0 14px 28px rgba(0, 0, 0, .10); }
  .nawigacja--otwarta .nawigacja__linki { display: flex; }
  .nawigacja__linki a { display: block; font-family: var(--q); font-weight: 700; font-size: 21px; padding: 14px 0 10px; border-bottom: 1px solid var(--linia); }
  .nawigacja__linki a[aria-current="page"] { display: block; border-bottom: 2px solid var(--czerw); }
  /* ⚠ Z WAGA `.nawigacja__linki` przed soba: sama klasa `.nawigacja__jezyk` przegrywa
     z regula `.nawigacja__linki a` wyzej i przelacznik zostawal w panelu (zmierzone). */
  .nawigacja__linki .nawigacja__jezyk { display: none; }   /* w pasku stoi wlasny PL | EN */

  /* ---------- pasek z glownym CTA przyklejony do dolu ekranu */
  .pasek-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 72px;
    display: flex; align-items: center; gap: 10px; padding: 9px var(--margines);
    background: rgba(255, 255, 255, .96); border-top: 1px solid var(--linia); backdrop-filter: blur(6px); }
  .pasek-cta[hidden] { display: none; }
  .pasek-cta__kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--czerw); flex: none; }
  .pasek-cta .btn { flex: 1; height: 54px; font-size: 16px; }
  /* ⚠ ZAPAS POD PASEK TYLKO WTEDY, GDY PASEK JEST WIDOCZNY (uwaga Szymona 13.09: „na dole pod
     stopka jest przestrzen na plywajacy przycisk, ale tu go nie ma, bo na dole strony jest
     formularz i pasek sie chowa; glupio to wyglada"). Wczesniej `body.z-paskiem` mialo staly
     `padding-bottom: 72px`, wiec na kazdej stronie, na ktorej pasek sie chowal przy dolnej
     krawedzi, dokument konczyl sie 72 px PONIZEJ stopki i zostawal pusty pas. Klase
     `pasek-widoczny` przestawia `okrp.js` razem z chowaniem paska; generator wpisuje ja od razu
     do `<body>`, zeby stan przed uruchomieniem skryptu (i bez skryptu, gdy pasek jest widoczny
     zawsze) byl poprawny, a nie zeby strona podskakiwala o 72 px przy pierwszym odswiezeniu. */
  body.z-paskiem.pasek-widoczny { padding-bottom: 72px; }

  /* ---------- hero: zdjecie od krawedzi do krawedzi, jedno CTA tekstowe */
  .hero { padding-top: 0; padding-bottom: 28px; }
  .hero__siatka { gap: 0; }
  .hero__foto { margin-left: calc(-1 * var(--margines)); margin-right: calc(-1 * var(--margines)); }
  .hero__foto img { height: 250px; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; }
  .hero__podpis { position: absolute; left: var(--margines); bottom: 12px; padding: 4px 8px;
    background: rgba(20, 20, 19, .72); color: var(--biel); font-size: 11px; }
  .hero__tresc { padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
  .hero__tresc .eb, .hero__tresc .h1, .hero__tresc .lead { margin-bottom: 0; }
  .hero__tresc .h1 { font-size: 38px; line-height: 1.04; }
  .hero__tresc .lead { font-size: 17px; }
  .hero__pasek { display: none; }        /* liczby sa nizej, w ciemnym pasie `.liczby-tel` */
  .hero .przyciski { margin-top: 4px; }
  .hero .przyciski .btn--ink { display: none; }   /* glowne CTA stoi w pasku na dole ekranu */
  /* ⚠ `color` JAWNIE, mimo ze taki jest kolor spoczynkowy `.btn--line`: ta regula przerysowuje
     przycisk na zwykly link (zdejmuje tlo i ramke), wiec bez wlasnego koloru kazda regula stanu
     o tej samej wadze (dawniej `.btn--line:hover`) zostawiala tu bialy napis na papierze. */
  .hero .przyciski .btn--line { height: auto; padding: 0; border: 0; background: none; font-size: 15px;
    color: var(--ink); text-decoration: underline; text-decoration-color: var(--czerw); text-underline-offset: 5px; }

  /* ---------- trzy liczby w ciemnym pasie pod hero */
  .liczby-tel { background: var(--ink); padding: 24px var(--margines) 8px; }
  .liczby-tel .eb { display: block; margin-bottom: 8px; }
  .liczby-tel .liczby { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
  .liczby-tel .liczba { gap: 6px; padding: 16px 0; border-top: 1px solid var(--linia-c); }
  .liczby-tel .liczba__wartosc { font-size: 44px; }
  .liczby-tel .liczba__opis { font-size: 14px; max-width: none; }

  /* ---------- ciemny pas z firmami: wlasny naglowek, bo liczby stoja dwa ekrany wyzej.
     Rytm z planszy Www-Mobile-Glowna-A-PL: etykieta, 10 px, zdanie kontekstu 15 px, 18 px,
     nazwy 17 px, 10 px, nota o NDA. Nazwy schodza tu z 20 px na 17 px, czyli do wartosci
     z planszy (T21: roznica wieksza niz 2 px albo znika, albo jest swiadoma). */
  .firmy-wstep { margin-bottom: 18px; }
  .firmy-wstep .eb { margin-bottom: 10px; }
  .firmy-wstep .p { font-size: 15px; }
  .firmy { font-size: 17px; }

  /* ---------- cytaty: numer w kolumnie obok, jak na planszy */
  .cyt li { grid-template-columns: 26px 1fr; gap: 14px; align-items: start; padding: 16px 0; }
  .cyt__nr { padding-top: 5px; }
  .cyt__tekst { font-size: 21px; line-height: 1.22; }

  /* ---------- kroki: pionowa os czasu (kolko z numerem + kreska miedzy kolkami)
     Dotyczy OBU odmian: pieciu krokow wspolpracy (`kroki--5`) i trzech krokow na
     /strategia, /strategia/dziekujemy i /one-pager (`kroki--3`). Do 13.09.2026 os czasu
     mialy tylko `kroki--5`, wiec trzy kroki zostawaly na telefonie zwezonym desktopem:
     jedna kolumna z czarna kreska po lewej i numerem 40 px nad tytulem. Na wszystkich
     trzech planszach mobile (`Www-Mobile-Strategia-A-PL`, `-Strategia-Dziekujemy-`,
     `-OnePager-`) stoi tam ta sama os czasu co przy pieciu krokach, wiec rozjazd byl
     w kodzie, nie w projekcie. Kolumna 58 px = kolko 36 px + 22 px odstepu; na planszy
     siatka 44 px + 14 px przerwy daje dokladnie te sama liczbe. */
  .kroki--5, .kroki--3 { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .kroki--5 li, .kroki--3 li { position: relative; border-left: 0; padding: 0 0 26px 58px; gap: 8px; }
  .kroki--5 li::before, .kroki--3 li::before { content: ""; position: absolute; left: 17px; top: 42px; bottom: 0; width: 2px; background: var(--ink); }
  .kroki--5 li:last-child, .kroki--3 li:last-child { padding-bottom: 0; }
  .kroki--5 li:last-child::before, .kroki--3 li:last-child::before { display: none; }
  .kroki--5 .kroki__nr, .kroki--3 .kroki__nr { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--ink); color: var(--biel); font-size: 17px; display: flex; align-items: center; justify-content: center; }
  .kroki--5 .h3, .kroki--3 .h3 { padding-top: 4px; }
  .kroki--5 .kroki__bramka { margin-top: 2px; padding: 8px 10px; border: 1px solid var(--linia); border-radius: 2px; }
  .kroki--5 .kroki__bramka--czerw { border-color: var(--czerw); }

  /* ---------- cztery etapy ewolucji firmy (/wdrazanie-okr): ta sama os czasu co kroki
     Na szerokim ekranie to cztery kolumny z kreska po lewej i bez numerow, i tak zostaje
     (plansza `Www-Wdrozenia-PL`). Na telefonie plansza `Www-Mobile-Wdrozenia-A-PL` robi z nich
     os czasu z kolkami, wiec numer etapu jest w zrodle `tylko-telefon`: na szerokim ekranie
     nie ma go w ogole, zamiast byc ukrywanym po fakcie. */
  .zasady--etapy { gap: 0; margin-top: 28px; }
  .zasady--etapy li { position: relative; border-left: 0; padding: 0 0 26px 58px; }
  .zasady--etapy li::before { content: ""; position: absolute; left: 17px; top: 42px; bottom: 0; width: 2px; background: var(--ink); }
  .zasady--etapy li:last-child { padding-bottom: 0; }
  .zasady--etapy li:last-child::before { display: none; }
  .zasady--etapy .zasady__nr { position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--ink); color: var(--biel); font-family: var(--q); font-weight: 700; font-size: 17px;
    display: flex; align-items: center; justify-content: center; }
  .zasady--etapy .eb { padding-top: 8px; margin-bottom: 8px; }

  /* ---------- piec pol OnePagera: na telefonie lista rozdzielona kreskami, nie karty
     Plansza `Www-Mobile-OnePager-A-PL` zdejmuje tu ramki i tla, a numer stawia w waskiej
     kolumnie obok tekstu. Numer rozciaga sie na OBA wiersze siatki, bo inaczej akapit
     zjechalby pod numer, do pierwszej kolumny drugiego wiersza. */
  .karty-3--pola { gap: 0; margin-top: 10px; border-bottom: 1px solid var(--linia); }
  .karty-3--pola li { background: none; border: 0; border-top: 1px solid var(--linia);
    padding: 16px 0; display: grid; grid-template-columns: 36px 1fr; gap: 6px 12px; align-items: start; }
  .karty-3--pola li .mono { grid-column: 1; grid-row: 1 / span 2; padding-top: 4px; }
  .karty-3--pola li .h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .karty-3--pola li p { grid-column: 2; grid-row: 2; }

  /* ---------- sekcja, ktora na telefonie rozpada sie na DWA pasy pelnej szerokosci
     Na desktopie to jedna sekcja z dwiema kolumnami (`siatka-2`), bo tam obie tresci
     stoja obok siebie. Na telefonie kolumny ida jedna pod druga i plansza pokazuje je
     jako dwa OSOBNE pasy o roznych tlach (np. „Dla kogo" na papierze i „Kto prowadzi"
     na bieli). Sekcja oddaje wtedy swoje marginesy dzieciom, a te staja sie pasami.
     Tla flipuje `pasmo-biel` / `pasmo-papier` na konkretnym dziecku. */
  .pas--pasma { padding-top: 0; padding-bottom: 0; }
  .pas--pasma > .szpalta { padding-left: 0; padding-right: 0; gap: 0; }
  /* ⚠ `margin: 0` jest tu konieczne, nie kosmetyczne: sekcja oddala swoj `padding`, wiec kazdy
     wlasny odstep dziecka (np. `.kroki { margin-top: 28px }`) wychodzi POZA pas i zostawia nad
     nim pasek golego tla. Zmierzone: 28 px bieli miedzy hero a krokami na /strategia/dziekujemy. */
  .pas--pasma > .szpalta > * { padding: var(--pas) var(--margines); margin: 0; }
  .pas--pasma .pasmo-biel { background: var(--biel); }
  .pas--pasma .pasmo-papier { background: var(--papier); }
  /* Wiersz „nota + przycisk” na stronach po zapisie jest na telefonie osobnym pasem, wiec
     traci kreske i odstep, ktore na szerokim ekranie oddzielaja go od krokow nad nim. */
  .pas--pasma .rzad-nota { margin-top: 0; border-top: 0; }
  /* /newsletter: formularz jest OSOBNYM pasem, ale o tym samym tle co hero nad nim, wiec
     pelny odstep u gory rozsuwalby na dwa ekrany cos, co na planszy czyta sie jako jedna
     calosc. Dolny odstep zostaje, bo pod spodem zaczyna sie juz bialy pas „na start". */
  .pas--pasma .nl-form { padding-top: 0; }

  /* ---------- „Kto prowadzi” na /strategia: zdjecie OBOK nazwiska, opis pod spodem
     Na szerokim ekranie portret stoi w kolumnie (zdjecie, nazwisko, opis) i tak zostaje,
     bo tak pokazuje plansza desktopowa. Na telefonie plansza stawia kolko 100 px obok
     nazwiska, a opis puszcza przez cala szerokosc. Wiersz roli jest tu pusty (ta osoba ma
     opis, nie funkcje), wiec znika, zamiast zabierac odstep. */
  .kto-prowadzi .osoba { display: grid; grid-template-columns: 100px 1fr; gap: 16px 18px; align-items: center; }
  .kto-prowadzi .osoba .foto--kolo { width: 100px; grid-column: 1; grid-row: 1; }
  .kto-prowadzi .osoba .h3 { grid-column: 2; grid-row: 1; font-size: 22px; margin: 0; }
  .kto-prowadzi .osoba__rola { display: none; }
  .kto-prowadzi .osoba p:not(.osoba__rola) { grid-column: 1 / -1; max-width: none; font-size: 16px; line-height: 1.55; }

  /* ---------- odwrocenie tla pasa na samym telefonie
     Rozbicie sekcji wyzej przesuwa rytm papier/biel o jedno miejsce, wiec kolejne pasy
     musza go odzyskac. Desktop zostaje bez zmian, bo tam do rozbicia nie dochodzi. */
  .pas--tel-biel { background: var(--biel); }
  .pas--tel-papier { background: var(--papier); }

  /* ---------- sygnet zamykajacy strone: pod tekstem, 64 px, jak na planszy mobile */
  .siatka-2--sygnet { gap: 24px; }
  .sygnet-koniec { justify-content: center; }
  .sygnet-koniec svg { width: 64px; }

  /* ---------- rzedy kart przewijane w bok (podglad odcinkow, portrety zespolu) */
  .rzad-tel { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(-1 * var(--margines)); padding-right: var(--margines); }
  .rzad-tel::-webkit-scrollbar { display: none; }
  .rzad-tel > * { flex: 0 0 250px; scroll-snap-align: start; }
  .rzad-tel .karta-odc__tytul { font-size: 17px; }
  .zespol.rzad-tel { gap: 10px; }
  .zespol.rzad-tel > * { flex: 0 0 128px; align-items: center; text-align: center; }
  .zespol.rzad-tel .foto--kolo { width: 116px; }
  .zespol.rzad-tel .osoba .h3 { font-size: 15px; }
  .zespol.rzad-tel .osoba__rola { font-size: 12px; max-width: none; }

  /* ---------- zdjecie w O nas: od krawedzi do krawedzi we wlasnym ciemnym pasie */
  .pas--foto { padding-top: 0; padding-bottom: 28px; }
  .pas--foto .foto--srednia { max-width: none; margin-left: calc(-1 * var(--margines)); margin-right: calc(-1 * var(--margines)); }

  /* ---------- historie: wyrazny poczatek kazdej z nich (uwaga Szymona 13.09: „nie wiem, gdzie
     sie konczy, a gdzie zaczyna kolejna"). Na desktopie granice widac z naprzemiennego ukladu
     (film raz z lewej, raz z prawej), a na telefonie wszystko stoi w jednej kolumnie, wiec robia
     to trzy rzeczy naraz: kreska 2 px na cala szerokosc kolumny, czerwony numer i 56 px oddechu.
     Tla nie zmieniamy co druga historie: po planszy widac, ze te trzy znaki wystarczaja, a pasy
     papieru bilyby sie z papierowym pasem „czwarty rok wspolpracy" tuz pod lista.

     ⚠ RYTM WEWNATRZ historii jest PRZEPISANY Z PLANSZY co do pikseli (wyrownanie 13.09 po
     uwadze Szymona: „nie ma szarych separatorow miedzy tekstami, nie ma odpowiedniego swiatla,
     jest za bardzo scisniete, a w niektorych miejscach bardziej rozstrzelone"). Trzy liczby
     trzymaja caly uklad: 14 px miedzy KAZDYMI dwoma klockami (numer, film, tytul, pola, cytat),
     szara kreska 1 px nad kazdym z trzech pol z 12 px swiatla po obu jej stronach, i 22 px nad
     cytatem (14 + 8). Wczesniej te same miejsca mialy 18 / 22 / 18 px BEZ kresek, wiec granica
     miedzy „przed", „co zrobilismy" i „po roku" nie istniala, a odstepy czytaly sie jak przypadek. */
  .historia { border-top: 2px solid var(--ink); padding: 18px 0 0; margin-top: 56px; gap: 14px; }
  .historia:first-child { margin-top: 28px; }
  /* 12 px, nie 11: etykiety mono maja w calym serwisie 12 px, a plansza mobile zostala do tego
     doprowadzona (decyzja Szymona 13.09, wzorzec dziala w obie strony). Tu i w polach historii
     nizej stalo 11 px wylacznie dlatego, ze tyle mial wtedy `.eb` na planszy. */
  .historia__nr { font-size: 12px; line-height: 1.3; color: var(--czerw); letter-spacing: 0.14em; text-transform: uppercase; }
  .historia__film .wideo { margin-bottom: 0; }   /* podpis firmy jest nizej, pod tytulem */
  .historia__tresc { gap: 14px; }
  .historia__tresc .h2 { font-size: 24px; line-height: 1.2; }
  .historia__firma { font-size: 11.5px; line-height: 1.3; margin-top: -6px; }   /* 8 px pod tytulem */
  /* Trzy pola historii: jedna kolumna az do 700 px (miedzy 601 a 700 px stawaly w dwoch,
     co przy kreskach rozdzielajacych czytaloby sie jak tabela) */
  .historia__tresc .siatka-3 { grid-template-columns: 1fr; gap: 14px; }
  .historia__tresc .siatka-3--ciasna > div { border-top: 1px solid var(--linia); padding: 12px 0; }
  .historia__tresc .siatka-3--ciasna .eb { font-size: 12px; line-height: 1.3; margin-bottom: 6px; }
  .historia__tresc .siatka-3 p { font-size: 15px; }
  .historia .cytat { margin-top: 8px; padding-left: 16px; }
  .historia .cytat p { font-size: 18px; }
  .historia .cytat cite { font-size: 11.5px; line-height: 1.3; }

  /* ---------- lista tekstow: rysunek jako miniatura nad tytulem, tytul mniejszy */
  .tekst-nasz { padding: 26px 0; gap: 12px; }
  .tekst-nasz__tytul { font-size: 23px; }
  .tekst-nasz__rys svg { max-width: none; }
  .teksty-zew a { font-size: 18px; }

  /* ---------- hub Wiedzy: kafle w osobnym bialym pasie, ciasniej niz na szerokim ekranie
     Plansza mobile daje im 20 px wypelnienia i 14 px miedzy kartami (na szerokim ekranie
     jest 30 px i 28 px), bo przy jednej kolumnie te same odstepy rozciagaja pas o ekran. */
  .kafle { gap: 14px; }
  .kafel { padding: 20px; }

  /* ---------- /kontakt: dane kontaktowe zostaja DWIEMA kolumnami takze na telefonie
     Plansza mobile trzyma tam etykiete (84 px) obok wartosci, a nie nad nia: wiersze sa
     krotkie („E-mail", „Miasto", „LinkedIn"), wiec zlozenie ich w pion tylko wydluza liste. */
  .dane__wiersz { grid-template-columns: 84px 1fr; gap: 12px; }

  /* ---------- pasek CTA: przycisk na cala szerokosc kolumny, 16 px pod naglowkiem
     Plansze mobile rysuja go tak wszedzie, gdzie ten pas stoi (O nas, historie, kontakt,
     OnePager): przycisk jest tam elementem tej samej wagi co naglowek, a nie guzikiem
     dosunietym do lewej z pustym pasem obok. 40 px odstepu z szerokiego ekranu bylo tu
     odstepem MIEDZY KOLUMNAMI, wiec po zlozeniu do pionu nie mial juz czego rozdzielac. */
  .cta-pas { gap: 16px; }
  .cta-pas .btn { align-self: stretch; justify-content: center; }

  /* ---------- reszta: formularze w pionie, rysunki na cala szerokosc kolumny, film */
  .karta-form { padding: 20px; }
  .formularz .btn { align-self: stretch; padding: 0 24px; }
  .ilu svg, .ilu figcaption { max-width: none; }
  .wideo__play svg { width: 64px; height: 64px; }

  /* ---------- autorka: etykieta na calej szerokosci, portret obok nazwiska, biogram pod spodem
     Uklad z planszy `Www-Mobile-Artykul-Wariacje-A-PL` (punkt 11): na 390 px biogram nie miesci
     sie w kolumnie obok portretu (zostaloby na niego 206 px), wiec schodzi pod spod na cala
     szerokosc, a portret idzie w pare z nazwiskiem i rola. Te sama role pelni tu `grid-template-
     areas`, ktore na szerokim ekranie ustawia portret na trzy wiersze po lewej. */
  .autorka { grid-template-columns: 128px 1fr; grid-template-areas: "eb eb" "foto tresc" "opis opis"; gap: 14px 16px; }
  .autorka .foto--kolo { width: 128px; align-self: center; }
  .autorka__tresc { gap: 8px; }
  .autorka__nazwisko { font-size: 26px; }
  .autorka__rola { font-size: 12px; }
  .autorka__opis { font-size: 15px; padding-top: 12px; }
  .pas--autorka { padding-top: 32px; padding-bottom: 32px; }

  /* ---------- stopka: znak, linki w dwoch kolumnach, dane mono pod kreska */
  .stopka { padding: 32px 0 40px; }
  .stopka__gora { flex-direction: column; align-items: flex-start; gap: 22px; }
  .stopka__linki { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; }
  .stopka__dol { flex-direction: column; gap: 6px; margin-top: 22px; }
}