/* =====================================================================
   fotowoltaika.kutno.pl — MAKIETA PREMIUM „TRZY ZBIORY, KTÓRE SIĘ ZACHODZĄ”
   ---------------------------------------------------------------------
   Teza serwisu: podstrona-1 h1 „Mapa PPE i liczników: CO NAPRAWDĘ OBEJMUJE
   KAŻDY ZBIÓR DANYCH”; „Licznik rozliczeniowy, licznik techniczny i wewnętrzny
   podlicznik NIE TWORZĄ AUTOMATYCZNIE TRZECH NIEZALEŻNYCH SUM”; „Jedna
   nieruchomość może mieć więcej niż jeden PPE, a jeden PPE może zasilać kilka
   części użytkowanych przez różne osoby”; h2 „NAJPIERW USTAL GRANICĘ DANYCH”.

   Rysunek (zmierzony): TRZY zbiory jako OBRYSY (nie bryły) na trzech
   poziomach — 620, 700 i 500 px długości, od x 120, 330 i 600. Ich zakresy
   ZACHODZĄ na siebie parami, a w każdej części wspólnej stoi jeden mały
   PEŁNY znak 18 px, umieszczony MIĘDZY zbiorami. To samo, policzone dwa razy,
   gdyby zbiory dodać.

   ⚠⚠ ZBIORY SĄ PUSTE, ZNAKI PEŁNE — pusty obrys to zakres, pełny znak to
   rzecz policzona dwukrotnie. Assert w hero.py pilnuje, że znak leży MIĘDZY
   zbiorami, nigdy w środku żadnego (v1 miał znak wewnątrz zbioru środkowego
   i czytał się jak jego zawartość).
   ⚠⚠ ŻADNEGO OBSZARU WOKÓŁ OBSZARU (czystepowietrze.ketrzyn.pl — tam jedna
   granica LEŻY W DRUGIEJ i punkt rozstrzyga przynależność; tu zakresy zachodzą
   BOKAMI, żaden nie zawiera drugiego), ŻADNYCH BRYŁ NA OSOBNYCH PODSTAWACH
   (fotowoltaika.czeladz.pl), ŻADNYCH PASÓW PEŁNE/PUSTE
   (fotowoltaika.karpacz.pl — tam podział WEWNĄTRZ pasa), ŻADNEJ LINII CZASU
   (fotowoltaika.ilawa.pl), ŻADNYCH DWÓCH RZĘDÓW ZNAKÓW
   (fotowoltaika.ketrzyn.pl), ŻADNEJ MATRYCY (dobrykandydat.pl), ŻADNEGO POLA
   I SZCZYTU (pompyciepla.gmina.pl — choć wpis-1 mówi wprost „Moc to nie
   energia”; to zdanie ma już swój rysunek w tamtej domenie).
   ⚠ Żadnego słońca, panelu, domu, licznika, wykresu, kół Venna z krzywymi.
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: przestrzeń barwna serii wyczerpana (PLAN-PREMIUM,
   5.09). Rdza sąsiaduje z miedzią mojecieplo.ketrzyn.pl (#7F3F14 —
   ciemniejsza), koralem pompyciepla.gmina.pl (#9A3328 — czerwieńszy) i cegłą
   cieplemieszkanie.olsztyn.pl (#8E3B26). Różnicę robi płyta: grafit oliwkowy
   jest CIEPŁY I ZIELONKAWY, czego w rodzinie PV nie ma żadna inna domena
   (cynk dachsolarnego jest chłodny, węgiel czeladzi brunatny, sepia karpacza
   szara). Zestaw: zielonkawa ciemna płyta + rdzawy akcent.

   ⚠ SZKIELET przeniesiony z otocertyfikat.pl (ciemna płyta, blog
   `lista-wpisow`) — ten sam szkielet co czeladź i karpacz w tej rodzinie,
   ale inne tokeny, kroje i wszystkie ozdobniki. Kopiowanie SZKIELETU
   dozwolone, PROJEKTU nie.

   ⚠⚠ ARKUSZ RĘCZNY — nie uruchamiać motyw.py / szkielet.py --nadpisz /
   dokladka.py. Domena wchodzi na premium-recznie.txt. Seria ST-CBF.
   ⚠ KANON 2b (`.zrodlo` w wpis-3), 9b i 9c (`wyliczenie` w index,
   podstrona-1, podstrona-2, wpis-1, wpis-2 (2), wpis-3 (3); `kroki` w specimen).
   ⚠ NAPRAWA 6.09: `.kroki`, `.wyliczenie` i `.zrodlo` mają `margin-inline: auto`.
   ⚠ Rodzina PV (RODZINA-PV.md).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --grafit:       #1F231D;   /* płyta nagłówka i hero — grafit oliwkowy, ciepły i zielonkawy */
  --grafit-noc:   #141711;
  --grafit-blask: #38402F;
  --papier:       #F5F4F0;
  --karta:        #FFFFFF;

  --tekst:        #1D1F1B;   /* 15,09 na papierze, 16,61 na karcie */
  --tekst-cichy:  #4F534A;   /*  7,15 na papierze */
  --na-grafit:       #EDEFE9; /* 13,77 / 15,62 na nocy / 9,33 na blasku */
  --na-grafit-cichy: #B4B9AC; /*  7,96 / 9,03 / 5,39 na blasku */

  /* rdza — TRZY wartości (kanon, punkt 12), policzone */
  --rdza-pismo:  #8A4A22; /* PISMO — 6,19 na papierze, 6,81 na karcie */
  --rdza-kreska: #A8622F; /* kreski — 4,28 / 4,72 */
  --rdza-jasna:  #F0BC8E; /* na ciemnych płytach — 9,34 / 10,59 / 6,33 na blasku */

  --obwodka:       #767A6E; /* 3,99 na papierze / 4,39 na karcie */
  --linia-cicha:   #E1DFD6;
  --obwodka-ciemna:#949A8A; /* 5,51 na graficie / 6,25 na nocy / 3,73 na blasku */

  --kroj-naglowek: "Gloock", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Chivo 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: 6px;}

/* --- 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(--rdza-jasna); color: var(--grafit); }
:focus-visible { outline: 3px solid var(--rdza-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--rdza-jasna); }
/* ⚠ 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(--rdza-jasna); color: var(--grafit); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. PŁYTY ------------------------------------------------------- */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--na-grafit); }
.naglowek { background: var(--grafit); }

/* --- 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; }
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--grafit);
  background-image: linear-gradient(180deg, var(--grafit-noc) 0%, var(--grafit) 62%, var(--grafit-blask) 100%);
}
/* wzdłuż dolnej krawędzi: dwa PUSTE zbiory o zachodzących zakresach i jeden
   PEŁNY znak w części wspólnej; okres 56 px */
.naglowek__zbiory {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--rdza-jasna) 2px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 2px, var(--rdza-jasna) 2px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 2px, var(--rdza-jasna) 2px 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 29px, var(--rdza-jasna) 29px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 18px, var(--rdza-jasna) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 18px, var(--rdza-jasna) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 18px, var(--rdza-jasna) 18px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 51px, var(--rdza-jasna) 51px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 23px, var(--rdza-jasna) 23px 25px, transparent 25px);
  background-size: 56px 1px, 56px 1px, 56px 4px, 56px 4px, 56px 1px, 56px 1px, 56px 4px, 56px 4px, 56px 2px;
  background-position: left 0px bottom 11px, left 0px bottom 8px, left 0px bottom 8px, left 0px bottom 8px, left 0px bottom 4px, left 0px bottom 1px, left 0px bottom 1px, left 0px bottom 1px, left 0px bottom 6px;
  background-repeat: repeat-x;
  opacity: .55;
}
.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.4rem, 1rem + 1vw, 2.1rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--na-grafit); text-decoration: none; }
/* znak rozpoznawczy: dwa puste zbiory o zachodzących zakresach, pełny znak między nimi */
.znak__zbiory {
  flex: none; width: 30px; height: 16px;
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
  background-size: 18px 1px, 18px 1px, 1px 5px, 1px 5px, 20px 1px, 20px 1px, 1px 5px, 1px 5px, 3px 3px;
  background-position: left 0px bottom 14px, left 0px bottom 10px, left 0px bottom 10px, left 17px bottom 10px, left 10px bottom 5px, left 10px bottom 1px, left 10px bottom 1px, left 29px bottom 1px, left 13px bottom 7px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.06rem, .94rem + .46vw, 1.38rem); letter-spacing: -.008em;
}
.znak:hover .znak__slowo { color: var(--rdza-jasna); }

.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(--na-grafit-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-grafit); }
/* pozycja bieżąca: pod napisem dwa puste zbiory o zachodzących zakresach
   i pełny znak w części wspólnej.
   ⚠⚠ 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(--na-grafit); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em;
  height: 12px;
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
  background-size: 58% 1px, 58% 1px, 1px 5px, 1px 5px, 56% 1px, 56% 1px, 1px 5px, 1px 5px, 3px 3px;
  background-position: left 0px bottom 11px, left 0px bottom 7px, left 0px bottom 7px, left 58% bottom 7px, right 0px bottom 4px, right 0px bottom 0px, right 0px bottom 0px, right 56% bottom 0px, left 48% bottom 5px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — trzy zbiory, które się zachodzą ---------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--grafit);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--grafit);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--grafit-blask) 0%, rgba(56, 64, 47, 0) 62%),
    linear-gradient(180deg, var(--grafit) 0%, var(--grafit-noc) 100%);
}
.hero__zbiory {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie trzy zbiory i oba znaki części
     wspólnych), obok kolumny — szerokość liczona od 1320 do 1920 px. */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 1200 / 420;
  transform: translateY(-50%);
  color: var(--rdza-jasna); opacity: .4;
}
.hero__zbiory svg { width: 100%; height: 100%; }
/* Scrim wygasza lewą stronę pod kolumną tytułu. Znaki części wspólnych leżą
   w prawej części rysunku i muszą zostać czytelne — one są tu sednem. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(20, 23, 17, .95) 0%, rgba(20, 23, 17, .86) 22%, rgba(20, 23, 17, .1) 40%, rgba(20, 23, 17, 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 scrim zaczyna się
   dopiero pod nim — na 390 px rysunek z boku wchodził pod akapit
   (zmierzone 6.09 na tej domenie, poprawka po zamknięciu). */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__zbiory {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(20, 23, 17, 0) 0%, rgba(20, 23, 17, 0) 22%, rgba(20, 23, 17, .9) 40%, rgba(20, 23, 17, .9) 100%);
  }
}

/* ⚠ Barwa jasna należy do TYTUŁU W HERO (kanon, punkt 4). */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem);
  line-height: 1.12; letter-spacing: -.01em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--na-grafit); }
/* nad tytułem: dwa puste zbiory o zachodzących zakresach i pełny znak między nimi */
.hero .tytul::before {
  content: ""; display: block;
  width: 124px; height: 32px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
  background-size: 74px 2px, 74px 2px, 2px 11px, 2px 11px, 80px 2px, 80px 2px, 2px 11px, 2px 11px, 6px 6px;
  background-position: left 0px bottom 29px, left 0px bottom 20px, left 0px bottom 20px, left 72px bottom 20px, left 44px bottom 10px, left 44px bottom 1px, left 44px bottom 1px, left 122px bottom 1px, left 56px bottom 13px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-grafit);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-grafit-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(--rdza-jasna); }

/* --- 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(--grafit-noc);
  background-image: linear-gradient(180deg, var(--grafit) 0%, var(--grafit-noc) 100%);
  color: var(--na-grafit);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--rdza-jasna); 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-grafit-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-grafit); }
/* ⚠⚠ 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-grafit); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-grafit-cichy); border-inline-start-color: var(--rdza-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--rdza-jasna); text-decoration-color: var(--rdza-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-grafit); }

/* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */
.tresc h2 {
  margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.36rem, 1.06rem + 1.06vw, 2.1rem);
  line-height: 1.22; letter-spacing: -.008em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji NAD DWOMA ZBIORAMI I ZNAKIEM CZĘŚCI WSPÓLNEJ */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 3.6rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%);
  background-size: 24px 1px, 24px 1px, 1px 4px, 1px 4px, 26px 1px, 26px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 23px bottom 7px, left 14px bottom 4px, left 14px bottom 1px, left 14px bottom 1px, left 39px bottom 1px, left 18px bottom 5px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--rdza-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--rdza-jasna);
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
  background-size: 24px 1px, 24px 1px, 1px 4px, 1px 4px, 26px 1px, 26px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 23px bottom 7px, left 14px bottom 4px, left 14px bottom 1px, left 14px bottom 1px, left 39px bottom 1px, left 18px bottom 5px;
  background-repeat: no-repeat;
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.06rem, .96rem + .4vw, 1.3rem); line-height: 1.36; 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(--rdza-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--rdza-pismo);
  text-decoration-line: underline; text-decoration-color: var(--rdza-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 nad dwoma zbiorami i znakiem ich
   części wspólnej.
   WYLICZENIE to rzeczy do sprawdzenia — zakresy zbiorów zachodzą na siebie
   INACZEJ co pozycję: inna część wspólna, ta sama zasada.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em auto 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
   `<a>`, nie `<li>` (zmierzone na pap2.pl: 259 × 20 px przy progu 44).
   ⚠ `inline-block`, NIE `inline-flex`: flex nie zawija tekstu → B5. */
.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: .4em;
  display: inline-flex; align-items: flex-start; justify-content: center;
  min-width: 2.4rem; height: 2.1rem; padding-inline: .35rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%);
  background-size: 19px 1px, 19px 1px, 1px 4px, 1px 4px, 21px 1px, 21px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 18px bottom 7px, left 11px bottom 4px, left 11px bottom 1px, left 11px bottom 1px, left 31px bottom 1px, left 14px bottom 5px;
  background-repeat: no-repeat;
  color: var(--rdza-pismo); background: none; border: 0;
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .73rem;
}
.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 {
  color: var(--rdza-jasna);
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
  background-size: 19px 1px, 19px 1px, 1px 4px, 1px 4px, 21px 1px, 21px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 18px bottom 7px, left 11px bottom 4px, left 11px bottom 1px, left 11px bottom 1px, left 31px bottom 1px, left 14px bottom 5px;
  background-repeat: no-repeat;}

.tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 2.4rem; }
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%);
  background-size: 12px 1px, 12px 1px, 1px 4px, 1px 4px, 21px 1px, 21px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 11px bottom 7px, left 7px bottom 4px, left 7px bottom 1px, left 7px bottom 1px, left 27px bottom 1px, left 8px bottom 5px;
  background-repeat: no-repeat;}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%);
  background-size: 21px 1px, 21px 1px, 1px 4px, 1px 4px, 13px 1px, 13px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 20px bottom 7px, left 15px bottom 4px, left 15px bottom 1px, left 15px bottom 1px, left 27px bottom 1px, left 17px bottom 5px;
  background-repeat: no-repeat;}
/* znacznik: dwa zbiory — inna część wspólna co pozycję */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 28px; height: 12px; border: 0;
  background-image:
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%);
  background-size: 17px 1px, 17px 1px, 1px 4px, 1px 4px, 18px 1px, 18px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 16px bottom 7px, left 10px bottom 4px, left 10px bottom 1px, left 10px bottom 1px, left 27px bottom 1px, left 12px bottom 5px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before,
.tresc .hero .wyliczenie li::before { border-color: var(--rdza-jasna); }

/* ⚠⚠ KANON 9c: ODSYŁACZ W WYKAZIE (`.wyliczenie`, `.kroki`) NIE JEST OBJĘTY
   REGUŁAMI PROZY — te celują w `<a>` wewnątrz `<p>`. Bez własnej reguły
   dostaje DOMYŚLNY BŁĘKIT PRZEGLĄDARKI rgb(0,0,238), co na ciemnej płycie
   hero daje **1,44:1**. Zmierzone 5.09 na tej domenie: „Checklista wymagań
   CMS”, „Backup i test odtwarzania”, „Migracja CMS” w `<ul class="wyliczenie">`
   w hero.
   ⚠ Selektor MUSI zawierać klasę wykazu. Goły `.tresc li a` to (0,1,2)
   i bije `.tresc .zapowiedz__tytul a` (0,2,1)? nie — ale bije
   `.zapowiedz__tytul a` (0,1,1), czyli wchodzi do tytułów kart. Dlatego
   `.tresc .wyliczenie li a` / `.tresc .kroki li a` — (0,2,2), zakres wąski. */
.tresc .wyliczenie li a:not(.przycisk),
.tresc .kroki li a:not(.przycisk) {
  color: var(--rdza-pismo);
  text-decoration-line: underline; text-decoration-color: var(--rdza-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; }
/* na ciemnej płycie hero i w ciemnym paśmie — barwa jasna */
.tresc .hero .wyliczenie li a:not(.przycisk),
.tresc .hero .kroki li a:not(.przycisk),
.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(--rdza-jasna); text-decoration-color: var(--rdza-jasna);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-grafit); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --rdza-kreska na blasku
   #433C35 daje 2,37:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --rdza-jasna (6,20 na blasku). */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
}

.tresc .zrodlo {
  margin: 1.6em auto 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--rdza-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(237, 239, 233, .07);
  color: var(--na-grafit-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--rdza-jasna);
}

/* --- 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(--grafit); border-color: var(--grafit); color: var(--na-grafit); }
.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(--rdza-jasna); color: var(--na-grafit); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--rdza-jasna); border-color: var(--rdza-jasna); color: var(--grafit); }

/* --- 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(--rdza-pismo); color: var(--karta);
  border: 2px solid var(--rdza-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(--grafit); border-color: var(--grafit);
}
/* ⚠ 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(--rdza-jasna); color: var(--grafit); border-color: var(--rdza-jasna);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-grafit); border-color: var(--na-grafit);
}

/* --- 11. KARTY KATALOGU — Z DROGĄ DO REKORDU 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: dwa zbiory i znak części wspólnej */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 13px;
  background-image:
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%),
    linear-gradient(90deg, var(--rdza-kreska) 0 100%);
  background-size: 34px 1px, 34px 1px, 1px 5px, 1px 5px, 36px 1px, 36px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 12px, left 0px bottom 8px, left 0px bottom 8px, left 33px bottom 8px, left 20px bottom 4px, left 20px bottom 1px, left 20px bottom 1px, left 55px bottom 1px, left 24px bottom 6px;
  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: .72rem; color: var(--rdza-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z RAMKĄ NUMERU (border, border-inline-end: 0, min-width,
   height, display: inline-flex, padding-inline). */
.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: 500;
  font-size: clamp(1.04rem, .96rem + .4vw, 1.28rem); line-height: 1.32; letter-spacing: -.006em;
}
.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(--rdza-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(--rdza-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--rdza-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` może mieć OBIE klasy (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--rdza-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--rdza-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(--grafit-noc); color: var(--na-grafit);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--grafit-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--grafit-blask) 0%, rgba(56, 64, 47, 0) 64%),
    linear-gradient(180deg, var(--grafit) 0%, var(--grafit-noc) 84%);
}
.stopka__zbiory {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 2px, var(--rdza-jasna) 2px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 2px, var(--rdza-jasna) 2px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 2px, var(--rdza-jasna) 2px 3px, transparent 3px),
    linear-gradient(90deg, transparent 0 29px, var(--rdza-jasna) 29px 30px, transparent 30px),
    linear-gradient(90deg, transparent 0 18px, var(--rdza-jasna) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 18px, var(--rdza-jasna) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 18px, var(--rdza-jasna) 18px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 51px, var(--rdza-jasna) 51px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 23px, var(--rdza-jasna) 23px 25px, transparent 25px);
  background-size: 56px 1px, 56px 1px, 56px 4px, 56px 4px, 56px 1px, 56px 1px, 56px 4px, 56px 4px, 56px 2px;
  background-position: left 0px bottom 11px, left 0px bottom 8px, left 0px bottom 8px, left 0px bottom 8px, left 0px bottom 4px, left 0px bottom 1px, left 0px bottom 1px, left 0px bottom 1px, left 0px bottom 6px;
  background-repeat: repeat-x;
  opacity: .5;
}
.stopka .kontener { position: relative; z-index: 2; }
.stopka__znak {
  margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .94rem + .4vw, 1.28rem); color: var(--na-grafit);
}
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%),
    linear-gradient(90deg, var(--rdza-jasna) 0 100%);
  background-size: 34px 1px, 34px 1px, 1px 5px, 1px 5px, 36px 1px, 36px 1px, 1px 4px, 1px 4px, 2px 2px;
  background-position: left 0px bottom 12px, left 0px bottom 8px, left 0px bottom 8px, left 33px bottom 8px, left 20px bottom 4px, left 20px bottom 1px, left 20px bottom 1px, left 55px bottom 1px, left 24px bottom 6px;
  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-grafit-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--rdza-jasna); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — DWA ZBIORY 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;
  }
  /* belka dróg pod numerem stoi do prawej, bo nagłówek stoi do prawej */
  .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; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* PIONOWO: dwa puste zbiory o zachodzących zakresach, pełny znak w części wspólnej */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 2.4rem;
    background-image:
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%),
      linear-gradient(90deg, var(--rdza-kreska) 0 100%);
    background-size: 8px 1px, 8px 1px, 1px 44%, 1px 44%, 8px 1px, 8px 1px, 1px 50%, 1px 50%, 3px 3px;
    background-position: left 2px top 8%, left 2px top 52%, left 2px top 8%, left 9px top 8%, left 13px top 38%, left 13px top 88%, left 13px top 38%, left 20px top 38%, left 11px top 45%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%),
      linear-gradient(90deg, var(--rdza-jasna) 0 100%);
    background-size: 8px 1px, 8px 1px, 1px 44%, 1px 44%, 8px 1px, 8px 1px, 1px 50%, 1px 50%, 3px 3px;
    background-position: left 2px top 8%, left 2px top 52%, left 2px top 8%, left 9px top 8%, left 13px top 38%, left 13px top 88%, left 13px top 38%, left 20px top 38%, left 11px top 45%;
    background-repeat: no-repeat;
}
}

/* --- 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: .74rem; 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__plyta, .naglowek__zbiory, .hero__plyta, .hero__zbiory,
  .hero__scrim, .stopka__plyta, .stopka__zbiory { 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 .wyliczenie li::before,
  .tresc .hero .wyliczenie li::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%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .tresc .kroki li::before { border-color: #000 !important; }
  .zapowiedz::before, .stopka__znak::after { background-image: none !important; background: #000 !important; height: 3px !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; }
}