/* =====================================================================
   panele.wolomin.pl — MAKIETA PREMIUM
   „NIE SKLEJAJ AUTOMATYCZNIE RÓŻNYCH ZEGARÓW”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: h2 „**Nie sklejaj automatycznie
   różnych zegarów**”, „**Zbieżność godziny jest wskazówką do sprawdzenia,
   a nie dowodem, że wszystkie zapisy opisują tę samą przyczynę**”,
   „**Produkcja, alarm i wartość napięcia tworzą chronologię, lecz same nie
   rozstrzygają przyczyny**”, h2 „**Kontrola, serwis i obserwacja to trzy
   różne rzeczy**”, „Warstwa dowodowa bez własnej diagnozy”.

   Rysunek (zmierzony): trzy rzędy = trzy źródła zapisów, każde z WŁASNYM
   zegarem — produkcja (belki), alarm (kwadraty), napięcie (wąskie słupki).
   W każdym rzędzie trzy zapisy. W jednym miejscu zapisy z trzech rzędów
   PRAWIE pokrywają się w czasie — i właśnie tam NIE MA żadnej linii, która
   by je łączyła.

   ⚠⚠ ŻADNEJ PIONOWEJ LINII PRZEZ TRZY ZAPISY I ŻADNEJ WSPÓLNEJ OSI. Linia
   byłaby „sklejeniem zegarów”, oś byłaby wspólnym zegarem. Zbliżenie
   w czasie widać z samego rozmieszczenia; wniosek zostaje czytelnikowi.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNEGO ZEGARA JAKO ZEGARA, WYKRESU, FALOWNIKA ANI PANELU — zakaz
     rodziny PV; „zegar” jest tu rytmem zapisów, nie tarczą.
   * ŻADNEJ WSPÓLNEJ LINII CZASU Z OKRESAMI — fotowoltaika.ilawa.pl: tam
     JEDEN obiekt ma jedną oś; tu trzy źródła mają trzy osobne rytmy i osi
     nie ma wcale.
   * ŻADNYCH DWÓCH RZĘDÓW O TEJ SAMEJ SUMIE — fotowoltaika.ketrzyn.pl:
     tam znaki są JEDNAKOWE i chodzi o rozstaw; tu znaki są TRZECH RODZAJÓW
     i chodzi o zbliżenie bez łącznika.
   * ŻADNEJ KOLUMNY JEDNAKOWYCH PUNKTÓW Z WYNIKAMI — świdnica.
   * ŻADNEGO STOSU WARSTW, mimo h2 „Trzy warstwy harmonogramu” — betamax.pl.
   * ŻADNEJ PODZIAŁKI ANI OSI; bez cyfr i liter (kanon, punkt 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: len biały #F3F0EA to TRZYNASTA jasna płyta rodziny
   i **najjaśniejsza z jasnych** — jaśniejsza od kości #EDEBE4 i piaskowego
   #EDE7DC; płyta i papier (#FAF9F6) różnią się tylko 1,08:1, więc płytę
   rozdziela od pasm CIEŃ (#E1DDD3), kreska pod hero i pas ozdobny.
   Atrament #1F3A7A stoi między granatem kancelaryjnym ostrołęki #16345E
   (ciemniejszy, szarszy) a indygo mrągowa #3C4194 (bardziej fiołkowe) —
   jest czystszym, bardziej nasyconym błękitem królewskim.

   ⚠ BENTHAM ma tylko wagę 400 — WSZYSTKIE nagłówki idą 400, hierarchia na
   ROZMIARZE (kanon, punkt 11). ⚠ JETBRAINS MONO w wadze 400.

   ⚠ SZKIELET przeniesiony z aquadvantage.pl; ozdobniki i tokeny przepisane.
   Kopiowanie SZKIELETU dozwolone, PROJEKTU nie.

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena na liście premium-recznie.txt.
   ⚠ KANON 9b i 9c: odsyłacz w wykazie ma cel dotykowy 44 px I barwę.
   ⚠ KANON 2c: h3 i .zajawka mają własną barwę na ciemnym paśmie.
   ⚠ KANON 13c: nadpisania list `background-position` mają tyle wartości,
   ile warstw ma baza — albo nie istnieją.
   ⚠ Proporcja kadru 2,76 ≥ 2,0 — przy 390 px rysunek mieści się nad tytułem.
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --len:       #F3F0EA;   /* jasna płyta nagłówka i hero — NAJJAŚNIEJSZA w rodzinie */
  --len-cien:  #E1DDD3;   /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */
  --papier:    #FAF9F6;
  --karta:     #FFFFFF;
  --noc:       #12162A;   /* pasmo domykające i stopka */
  --noc-blask: #2D3452;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1B1B1F;   /* 15,09 / 12,66 na cieniu / 16,31 / 17,17 */
  --tekst-cichy: #4B4C55;   /*  7,49 /  6,28 na cieniu /  8,09 /  8,52 */
  --na-nocy:     #E9EAF2;   /* 14,92 / 10,16 na blasku */
  --na-nocy-cichy: #AEB2C6; /* 8,50 / 5,79 na blasku */

  /* atrament — TRZY wartości (kanon, punkt 12), policzone */
  --atrament-pismo:  #1F3A7A; /* PISMO — 9,49 / 7,96 na cieniu / 10,26 / 10,80 */
  --atrament-kreska: #4A62A8; /* kreski — 5,12 / 4,30 na cieniu / 5,53 / 5,83 */
  --atrament-jasny:  #B9C8F0; /* na ciemnych płytach — 10,72 / 7,30 na blasku */

  --obwodka:       #78766F; /* 4,00 na lnie / 3,35 na cieniu / 4,32 / 4,55 */
  --linia-cicha:   #E8E5DD;
  --obwodka-ciemna:#8388A0; /* 5,11 na nocy / 3,48 na blasku */

  --kroj-naglowek: "Bentham", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Assistant", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

  --kolumna:         34rem;
  --kolumna-hero:    36rem;
  --kolumna-szeroka: 56rem;
  --margines:        clamp(20px, 5vw, 104px);
  --szyna: 15rem;
  --rowek: 2.6rem;

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(18, 22, 42, .42);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* B13 warunek 1 i 2 */
  font-size: clamp(1rem, .9rem + .3vw, 1.34rem);
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
}
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font-family: var(--kroj-tekst); font-size: 1rem; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
::selection { background: var(--atrament-jasny); color: var(--noc); }
:focus-visible { outline: 3px solid var(--atrament-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--atrament-jasny); }
/* ⚠ NIE „1px + clip” — cel dotykowy 1x1 px, B7 zapala czerwień. */
.omin {
  position: absolute; inset-inline-start: -9999px; inset-block-start: 0; z-index: 40;
  display: inline-flex; align-items: center; min-height: 48px; padding: .6rem 1.2rem;
  background: var(--atrament-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. LEN I PAPIER --------------------------------------------- */
/* ⚠ Nagłówek i hero są JASNE, więc pismo w nich jest CIEMNE. */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--tekst); }
.naglowek { background: var(--len); }

/* --- 3. KONTENER ----------------------------------------------------- */
.kontener {
  width: 100%; max-width: calc(var(--kolumna-szeroka) + 2 * var(--margines));
  margin-inline: auto; padding-inline: var(--margines);
}
.pasmo > .kontener > *  { max-width: var(--kolumna);      margin-inline: auto; }
.hero__kontener > *     { max-width: var(--kolumna-hero); margin-inline: auto; }
/* ⚠ KANON 10b: karty biorą szerszą miarę SAME — nie ma opakowania listy. */
.pasmo > .kontener > .zapowiedz    { max-width: var(--kolumna-szeroka); }
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek__len {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--len);
  background-image: linear-gradient(180deg, var(--len) 0%, var(--len-cien) 100%);
}
/* wzdłuż dolnej krawędzi: TRZY RZĘDY ZAPISÓW o własnym rytmie (belki,
   kwadraty, słupki); w jednym miejscu okresu zapisy się zbliżają — bez
   łącznika. Okres 84 px.
   ⚠⚠ NAZWA WARSTWY NIE MOŻE BRZMIEĆ `naglowek__pas` — tak nazywa się
   KONTENER nagłówka w HTML generatora (`.kontener.naglowek__pas`); 6.09
   kolizja nazw rozsypała nagłówek (kontener stał się 13-pikselowym paskiem). */
.naglowek__zegary {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, var(--atrament-kreska) 0 14px, transparent 14px 40px, var(--atrament-kreska) 40px 54px, transparent 54px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--atrament-kreska) 20px 26px, transparent 26px 46px, var(--atrament-kreska) 46px 52px, transparent 52px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--atrament-kreska) 8px 11px, transparent 11px 43px, var(--atrament-kreska) 43px 46px, transparent 46px 84px);
  background-size: 100% 3px, 100% 6px, 100% 4px;
  background-position: 0 1px, 0 5px, 0 11px;
  background-repeat: repeat-x;
  opacity: .6;
}
/* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest
   zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__zegary`. */
.naglowek__pas {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem clamp(1rem, 3vw, 2.6rem); justify-content: space-between;
  padding-block: clamp(.9rem, .6rem + .8vw, 1.5rem) clamp(1.2rem, .9rem + .9vw, 1.9rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--tekst); text-decoration: none; }
/* znak rozpoznawczy: trzy zapisy różnego rodzaju PRAWIE w jednej linii,
   bez łącznika — plus drugi komplet dalej, żeby rytm był widoczny */
.znak__zegary {
  flex: none; width: 36px; height: 22px;
  background-image:
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%);
  background-size: 14px 4px, 6px 6px, 3px 9px, 14px 4px, 6px 6px, 3px 9px;
  background-position: left 0px top 0px, left calc(0px + 6px) top 6px, left calc(0px + 3px) top 13px, left 20px top 0px, left calc(20px + 6px) top 6px, left calc(20px + 3px) top 13px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.08rem, .96rem + .46vw, 1.4rem); letter-spacing: -.01em;
}
.znak:hover .znak__slowo { color: var(--atrament-pismo); }

.menu { min-width: 0; }
.menu__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.2rem, 1vw, 1.1rem); margin: 0; padding: 0; list-style: none; }
.menu__link {
  position: relative; display: inline-flex; align-items: center; min-height: 46px;  /* B7 */
  padding-inline: .5em;
  color: var(--tekst-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .78rem; letter-spacing: -.01em;
}
.menu__link:hover { color: var(--atrament-pismo); }
/* pozycja bieżąca: pod napisem trzy zapisy różnego rodzaju, prawie
   w jednej linii, przy lewej krawędzi — i drugi komplet przy prawej.
   ⚠⚠ KANON 3b: znacznik OBOK pisma, nigdy tło pod nim.
   ⚠ Odstępy w PIKSELACH — pudełko ma sztywne min-height 46px (P-11). */
.menu__link[aria-current="page"] { color: var(--tekst); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 4px;
  inset-inline-start: calc(.5em + 2px); inset-inline-end: calc(.5em + 2px);
  height: 22px;
  background-image:
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%);
  background-size: 14px 4px, 6px 6px, 3px 9px, 14px 4px, 6px 6px, 3px 9px;
  background-position: left 0px top 0px, left calc(0px + 6px) top 6px, left calc(0px + 3px) top 13px, right 4px top 0px, right calc(4px + 6px) top 6px, right calc(4px + 3px) top 13px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — trzy zegary, bez łącznika --------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--len);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__len {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--len);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--len-cien) 0%, rgba(225, 221, 211, 0) 66%),
    linear-gradient(170deg, var(--len) 0%, var(--len-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__zegary {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie trzy rzędy, po trzy zapisy),
     obok kolumny (1320–1920 px), nie pod nią.
     ⚠⚠ Obcięcie z boków zostawiłoby samo zbliżenie — a bez pozostałych
     zapisów nie widać, że każdy rząd ma WŁASNY rytm.
     ⚠ Kadr ciasny i szeroki (proporcja 2,76 ≥ 2,0). */
  inset-block-start: 54%; inset-inline-end: 2%;
  width: clamp(26rem, 30vw, 38rem); aspect-ratio: 400 / 145;
  transform: translateY(-50%);
  color: var(--atrament-pismo); opacity: .38;
}
.hero__zegary svg { width: 100%; height: 100%; }
/* zanik od lewej — w jasnym rejestrze warstwa jest JASNA. Rysunek stoi
   po prawej w całości, więc zanik chroni tylko kolumnę tekstu. */
.hero__zanik {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    var(--len) 0%, rgba(243, 240, 234, .94) 30%, rgba(243, 240, 234, .2) 50%, rgba(243, 240, 234, 0) 100%);
}
.hero__kontener { position: relative; z-index: 3; }
/* ⚠ EKRANY DO 1319 px: rysunek dostaje WŁASNE MIEJSCE nad tytułem (kontener
   dostaje górne dopełnienie równe wysokości rysunku), a zanik zaczyna się
   dopiero pod nim — z boku wchodziłby pod akapit. */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__zegary {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(243, 240, 234, 0) 0%, rgba(243, 240, 234, 0) 22%, rgba(243, 240, 234, .9) 40%, rgba(243, 240, 234, .9) 100%);
  }
}

/* ⚠ Tu barwa tytułu jest ta sama w hero i poza nim, bo hero JEST jasne —
   ale reguła zostaje jawna, żeby specimen.html też był poprawny
   (kanon, punkt 4). */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem);
  line-height: 1.12; letter-spacing: -.018em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--tekst); }
/* nad tytułem: trzy rzędy po trzy zapisy różnego rodzaju; środkowe
   zbliżają się do siebie, bez łącznika — cała teza w dziewięciu warstwach */
.hero .tytul::before {
  content: ""; display: block;
  width: 11rem; height: 26px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%);
  background-size: 1.4rem 5px, 1.4rem 5px, 1.4rem 5px, 8px 8px, 8px 8px, 8px 8px, 4px 7px, 4px 7px, 4px 7px;
  background-position: left 0px top 0px, left 4.6rem top 0px, left 9rem top 0px, left 1.6rem top 9px, left 5.2rem top 9px, left 10.4rem top 9px, left .9rem top 19px, left 4.9rem top 19px, left 9.7rem top 19px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--tekst);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--tekst-cichy); }
/* ⚠⚠ KANON 3c i 3d: swoistość (0-3-1), ale TYLKO proza — nie pigułka odsyłacza. */
.tresc .hero p:not(.przejscie) a:not(.przycisk) { color: var(--atrament-pismo); }

/* --- 6. PASMA TREŚCI ------------------------------------------------- */
.tresc { display: block; counter-reset: pasmo; }
.pasmo {
  position: relative; counter-increment: pasmo;
  padding-block: clamp(2.2rem, 1.5rem + 2.4vw, 4.2rem);
  background: var(--papier);
}
.pasmo:nth-of-type(even) { background: var(--karta); }
.pasmo + .pasmo::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 1px; background: var(--linia-cicha);
}
/* ⚠⚠ KANON 1 i 3 */
.pasmo:last-of-type:not(:nth-of-type(1)) {
  background-color: var(--noc);
  background-image: linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 62%);
  color: var(--na-nocy);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--atrament-jasny); height: 2px; opacity: .8; }
/* ⚠⚠ KANON 2: TYLKO BEZPOŚREDNIE DZIECI KONTENERA */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p  { color: var(--na-nocy-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-nocy); }
/* ⚠⚠ KANON 2c: h3 i .zajawka mają własną CIEMNĄ barwę z jasnego tła —
   bez tego 1,07:1 (zmierzone 4.09 na otoenergia.pl). */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3 { color: var(--na-nocy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-nocy-cichy); border-inline-start-color: var(--atrament-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--atrament-jasny); text-decoration-color: var(--atrament-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-nocy); }

/* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */
.tresc h2 {
  margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1.08vw, 2.16rem);
  line-height: 1.2; letter-spacing: -.016em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji STOI NAD trzema zapisami różnego rodzaju, prawie w jednej
   linii, bez łącznika.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 24 px), więc przesunięcia
   ozdobnika w px, składnią `left … bottom …`. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`: inline stawał w jednym wierszu
     z pierwszym słowem tytułu (zmierzone 6.09). */
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 4.4rem; height: 2.6rem; margin-block-end: .6rem; padding-block-end: 24px;
  background-image:
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%);
  background-size: 14px 4px, 6px 6px, 3px 8px, 14px 4px, 6px 6px, 3px 8px;
  background-position: left 0px bottom 18px, left 6px bottom 9px, left 3px bottom 0px, right 0px bottom 18px, right 8px bottom 9px, right 4px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .76rem; letter-spacing: -.01em;
  color: var(--atrament-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--atrament-jasny);
  background-image:
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%);
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.08rem, .98rem + .4vw, 1.32rem); line-height: 1.34; color: var(--tekst);
}
.tresc p { margin: 0 0 1.1em; }
.tresc p:last-child { margin-block-end: 0; }
.wprowadzenie { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); line-height: 1.66; }
.zajawka {
  margin: 0 0 1.3em; padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--atrament-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--atrament-pismo);
  text-decoration-line: underline; text-decoration-color: var(--atrament-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. KROKI I WYLICZENIA -------------------------------------------
   KROKI to procedura po kolei — numer w PEŁNYM PUDEŁKU: krok jest jednym
   zapisem, zamkniętym.
   WYLICZENIE to rzeczy do sprawdzenia — trzy zapisy różnego rodzaju prawie
   w jednej linii: pozycja wykazu to zbieżność do sprawdzenia, nie dowód.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   ⚠ Pismo w pudełku to --karta na --atrament-pismo (10,80:1); na ciemnym
   paśmie pudełko odwraca się na --atrament-jasny z pismem --noc (10,72:1).
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em 0 1.4em; padding: 0; list-style: none; counter-reset: krok; }
.tresc .kroki li {
  counter-increment: krok; position: relative; padding: .7em 0 .7em 3.2rem;
  border-block-end: 1px solid var(--linia-cicha);
}
/* ⚠ Kreskę zdejmujemy ostatniej pozycji W UKŁADZIE; wykaz jednoszpaltowy (P-2). */
.tresc .kroki li:last-child { border-block-end: 0; }
/* ⚠⚠ KANON 9b: ODSYŁACZ WEWNĄTRZ `.kroki` JEST CELEM UI. B7 mierzy sam
   element `<a>`, nie `<li>`, więc padding listy go NIE ratuje. Zmierzone
   4.09→5.09 na tej domenie: `<a>` „Czy ten dokument trzeba drukować?”
   259 × 20 px przy progu 44.
   ⚠ `display: inline-block`, NIE `inline-flex`: flex nie zawija tekstu,
   więc długi tytuł wyszedłby za krawędź i zapalił B5 (brak przewijania
   w poziomie 360–1920). */
.tresc .kroki li > a { display: inline-block; min-height: 44px; padding-block: .7rem; }
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .5em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 1.7rem; padding-inline: .4rem;
  background: var(--atrament-pismo); color: var(--karta);
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li { border-block-end-color: var(--obwodka-ciemna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li::before {
  background: var(--atrament-jasny); color: var(--noc);
}

.tresc .wyliczenie { margin: .4em 0 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.9rem; }
/* znacznik: trzy zapisy różnego rodzaju PRAWIE w jednej linii, bez łącznika.
   ⚠ Trzy warstwy; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c).
   ⚠ Wariantów `nth-child` tu NIE MA — pozycje wykazu są równorzędne. */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .2em; inset-inline-start: 0;
  width: 18px; height: 22px;
  background-image:
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%);
  background-size: 14px 4px, 6px 6px, 3px 9px;
  background-position: left 0px top 0px, left calc(0px + 6px) top 6px, left calc(0px + 3px) top 13px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%);
}

/* ⚠⚠ KANON 9c: odsyłacz w wykazie nie jest objęty regułami prozy (te celują
   w `<a>` wewnątrz `<p>`), więc bez własnej reguły dostaje DOMYŚLNY BŁĘKIT
   przeglądarki. Tutaj hero jest JASNE, więc bramka B6 by przeszła — ale to
   i tak barwa spoza projektu, a ten serwis MA w hero spis treści
   („Wybierz pytanie, które blokuje decyzję”), więc reguła jest konieczna. */
.tresc .wyliczenie li a:not(.przycisk),
.tresc .kroki li a:not(.przycisk) {
  color: var(--atrament-pismo);
  text-decoration-line: underline; text-decoration-color: var(--atrament-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc .wyliczenie li a:not(.przycisk):hover,
.tresc .kroki li a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }
/* w ciemnym paśmie domykającym — barwa jasna */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li a:not(.przycisk),
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li a:not(.przycisk) {
  color: var(--atrament-jasny); text-decoration-color: var(--atrament-jasny);
}

.tresc .zrodlo {
  margin: 1.6em 0 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--atrament-kreska); border-radius: var(--promien);
  font-size: .93rem; line-height: 1.6; color: var(--tekst-cichy);
}
.pasmo:nth-of-type(even) .zrodlo { background: var(--papier); }
/* ⚠⚠ KANON 2b — blok z własnym jasnym tłem w ciemnym paśmie. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wzor {
  background: rgba(233, 234, 242, .07);
  color: var(--na-nocy-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--atrament-jasny);
}

/* --- 9. ODSYŁACZ KIERUNKOWY ----------------------------------------- */
/* ⚠ B7: samodzielny odsyłacz jest celem UI — min. 44 px. */
.tresc .przejscie { margin-block: 1.7em 0; }
.tresc .przejscie + .przejscie { margin-block-start: .7em; }
.tresc .przejscie a {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 50px; padding: .5em 1.3em;
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta);
  color: var(--tekst); text-decoration: none; font-weight: 600; font-size: .99rem;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.tresc .przejscie a::after { content: "→"; font-size: 1.04em; line-height: 1; transition: transform .22s ease; }
.tresc .przejscie a:hover { background: var(--noc); border-color: var(--noc); color: var(--na-nocy); }
.tresc .przejscie a:hover::after { transform: translateX(4px); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a { background: transparent; border-color: var(--atrament-jasny); color: var(--na-nocy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--atrament-jasny); border-color: var(--atrament-jasny); color: var(--noc); }

/* --- 10. POLE WEZWANIA I PRZYCISK ----------------------------------- */
.tresc .cta { margin-block: clamp(1.7rem, 1.2rem + 1.3vw, 2.7rem) 1.7em; }  /* KANON 7 (P-1) */
/* ⚠⚠ KANON 5: swoistość musi dorównać `.tresc .przejscie a` (0-2-1). */
.przycisk,
.tresc a.przycisk,
.tresc .przejscie a.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 56px; padding: .85rem 1.9rem;
  background: var(--atrament-pismo); color: var(--karta);
  border: 2px solid var(--atrament-pismo); border-radius: var(--promien-karta);
  font-family: var(--kroj-tekst); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .004em; text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease;
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover, .tresc a.przycisk:hover, .tresc .przejscie a.przycisk:hover {
  background: var(--noc); border-color: var(--noc);
}
/* ⚠ pułapka „.tresc p a bije .przycisk” */
.tresc p a.przycisk { color: var(--karta); text-decoration: none; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk {
  background: var(--atrament-jasny); color: var(--noc); border-color: var(--atrament-jasny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-nocy); border-color: var(--na-nocy);
}

/* --- 11. KARTY KATALOGU — TRZY ZAPISY NA GÓRNEJ KRAWĘDZI ------------ */
.lista-wpisow {
  margin: clamp(1.6rem, 1.1rem + 1.4vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.7rem); counter-reset: wpis;
}
@media (min-width: 900px)  { .lista-wpisow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zapowiedz {
  counter-increment: wpis; position: relative; display: flex; flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.2rem, .9rem + 1vw, 1.8rem) clamp(1.2rem, .9rem + 1vw, 1.8rem);
  background: var(--karta); border: 1px solid var(--obwodka);
  border-radius: var(--promien-karta); box-shadow: var(--cien-karta);
}
.pasmo:nth-of-type(even) .zapowiedz { background: var(--papier); }
/* na górnej krawędzi karty: trzy zapisy różnego rodzaju obok siebie — tu
   POZIOMO, bo krawędź karty ma 12 px wysokości; rytm trzech zegarów, nie
   zbliżenie */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 4.6rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%),
    linear-gradient(90deg, var(--atrament-kreska) 0 100%);
  background-size: 1.6rem 4px, 7px 7px, 3px 10px;
  background-position: left 0px top 4px, left 2rem top 3px, left 2.9rem top 1px;
  background-repeat: no-repeat;
}
.zapowiedz::after {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-start: 1.15rem; inset-inline-end: 1rem;
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem; color: var(--atrament-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z OZDOBNIKIEM NUMERU (background, min-width, height,
   padding, display: inline-flex). */
.tresc .zapowiedz__tytul {
  margin: .3rem 2.4rem .5rem 0; padding: 0; border: 0;
  width: auto; min-width: 0; height: auto; background: none; max-width: none; display: block;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.06rem, .98rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -.012em;
  color: var(--tekst);
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠ „.tresc li a” (0-1-2) bije „.zapowiedz__tytul a” (0-1-1). */
.tresc .zapowiedz__tytul a { display: block; min-height: 44px; color: var(--tekst); text-decoration: none; }
.tresc .zapowiedz__tytul a:hover { color: var(--atrament-pismo); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--tekst-cichy); font-size: .96rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem;
  text-decoration: none; color: var(--atrament-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--atrament-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--atrament-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--atrament-pismo);
}
.tresc .zapowiedz .przejscie a::after { content: none; }
.tresc .zapowiedz .przejscie a:hover { background: none; color: var(--tekst); border-block-end-color: var(--tekst); }

/* --- 12. STOPKA ----------------------------------------------------- */
.stopka {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.6rem);
  background: var(--noc); color: var(--na-nocy);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--noc-blask) 0%, rgba(45, 52, 82, 0) 64%),
    linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 58%);
}
/* ten sam pas co w nagłówku */
.stopka__zegary {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, var(--atrament-jasny) 0 14px, transparent 14px 40px, var(--atrament-jasny) 40px 54px, transparent 54px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--atrament-jasny) 20px 26px, transparent 26px 46px, var(--atrament-jasny) 46px 52px, transparent 52px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--atrament-jasny) 8px 11px, transparent 11px 43px, var(--atrament-jasny) 43px 46px, transparent 46px 84px);
  background-size: 100% 3px, 100% 6px, 100% 4px;
  background-position: 0 1px, 0 5px, 0 11px;
  background-repeat: repeat-x;
  opacity: .55;
}
.stopka .kontener { position: relative; z-index: 2; }
.stopka__znak {
  margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.04rem, .96rem + .4vw, 1.3rem); color: var(--na-nocy);
}
/* pod znakiem stopki: dwa komplety trzech zapisów, prawie w jednej linii */
.stopka__znak::after {
  content: ""; display: block; width: 4.4rem; height: 22px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%),
    linear-gradient(90deg, var(--atrament-jasny) 0 100%);
  background-size: 14px 4px, 6px 6px, 3px 9px, 14px 4px, 6px 6px, 3px 9px;
  background-position: left 0px top 0px, left calc(0px + 6px) top 6px, left calc(0px + 3px) top 13px, left 2.4rem top 0px, left calc(2.4rem + 6px) top 6px, left calc(2.4rem + 3px) top 13px;

  background-repeat: no-repeat;
}
.stopka__menu ul { display: flex; flex-wrap: wrap; gap: 0 clamp(.6rem, 2vw, 1.8rem); margin: 0; padding: 0; list-style: none; }
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 44px;   /* B7 */
  color: var(--na-nocy-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--atrament-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — TRZY ZEGARY PIONOWO W PRAWYM TORZE -------
   ⚠⚠ KANON 10: tory boczne SYMETRYCZNE, środkowy w REM, row-gap ZEROWY,
   ozdobnik w TORZE SIATKI (nie pseudoelementem `main.tresc`).
   -------------------------------------------------------------------- */
@media screen and (min-width: 1560px) {
  .pasmo > .kontener, .hero__kontener {
    display: grid;
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna)) [proza-end]
      minmax(0, 1fr) [pelna-end];
    column-gap: var(--rowek); row-gap: 0; align-items: start; max-width: none;
  }
  .hero__kontener {
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna-hero)) [proza-end]
      minmax(0, 1fr) [pelna-end];
  }
  .pasmo > .kontener > *, .hero__kontener > * { grid-column: proza; max-width: none; margin-inline: 0; }
  .pasmo > .kontener > h2 {
    grid-column: pelna-start / proza-start;
    justify-self: end; text-align: end;
    max-width: var(--szyna); margin-block: 0;
  }
  .pasmo > .kontener > h2::before { margin-inline-start: auto; }
  .pasmo > .kontener > h2 + * { margin-block-start: 0; }
  /* ⚠⚠ KANON 8 (P-17) */
  .pasmo > .kontener > h3 { margin-block: clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem) 0; }
  .pasmo > .kontener > h3 + * { margin-block-start: .5rem; }
  /* ⚠ KANON 10b: karty biorą szerszy tor SAME, bo nie ma opakowania listy. */
  .pasmo > .kontener > .zapowiedz    { grid-column: proza-start / pelna-end; max-width: none; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* trzy kolumny zapisów różnego rodzaju; w jednym miejscu toru zbliżenie */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 5rem;
    background-image:
      linear-gradient(180deg, var(--atrament-kreska) 0 100%),
      linear-gradient(180deg, var(--atrament-kreska) 0 100%),
      linear-gradient(90deg, var(--atrament-kreska) 0 100%),
      linear-gradient(90deg, var(--atrament-kreska) 0 100%),
      linear-gradient(180deg, var(--atrament-kreska) 0 100%),
      linear-gradient(180deg, var(--atrament-kreska) 0 100%);
    background-size: 4px 14px, 4px 14px, 6px 6px, 6px 6px, 3px 9px, 3px 9px;
    background-position: left 0px top 12%, left 0px top 60%, left 7px top 22%, left 7px top 64%, left 16px top 30%, left 16px top 62%;
    background-repeat: no-repeat;
    opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(180deg, var(--atrament-jasny) 0 100%),
      linear-gradient(180deg, var(--atrament-jasny) 0 100%),
      linear-gradient(90deg, var(--atrament-jasny) 0 100%),
      linear-gradient(90deg, var(--atrament-jasny) 0 100%),
      linear-gradient(180deg, var(--atrament-jasny) 0 100%),
      linear-gradient(180deg, var(--atrament-jasny) 0 100%);
    opacity: .55;
  }
}

/* --- 14. ARKUSZ SYSTEMU (specimen.html — dokument warsztatowy) ------ */
.próbki { margin: 1.6rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.próbka__pole { display: block; height: 3.2rem; border: 1px solid var(--obwodka); }
.próbka__opis { display: block; font-family: var(--kroj-maszyna); font-size: .78rem; color: var(--tekst-cichy); padding-block-start: .35em; }

/* --- 15. RUCH I DRUK ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}
@media print {
  .naglowek__len, .naglowek__zegary, .hero__len, .hero__zegary,
  .hero__zanik, .stopka__plyta, .stopka__zegary { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even),
  .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; }
  .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak,
  .hero p, .stopka__menu a, .menu__link { color: #000 !important; }
  .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; }
  .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; }
  .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; }
  .tresc .wyliczenie li::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .stopka__znak::after {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .pasmo > .kontener > h2::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::after { color: #000 !important; }
  a.przycisk { background: none !important; color: #000 !important; border-color: #000 !important; }
  .pasmo > .kontener > *, .hero__kontener > * { max-width: none; }
  .pasmo > .kontener::after { display: none; }
}