/* =====================================================================
   fotowoltaika.karpacz.pl — MAKIETA PREMIUM „CZĘŚĆ ZMIERZONA I CZĘŚĆ
   ZAŁOŻONA”
   ---------------------------------------------------------------------
   Teza serwisu: h2 „TRZY SCENARIUSZE BEZ UDAWANEJ PEWNOŚCI”; podstrona-2
   „Poziom 1: faktury i odczyty okresowe / Poziom 2: dane interwałowe /
   Poziom 3: podliczniki / Poziom 4: celowana kampania pomiarowa”, „CZTERY
   WARIANTY ZUŻYCIA”; wpis-3 „TRZY ZBIORY, TRZY POZIOMY PEWNOŚCI”, „Ładowanie
   i nowe odbiory NIE NALEŻĄ do historycznej bazy”; h1 „Dopasuj analizę PV do
   RYTMU KONKRETNEGO OBIEKTU”.

   Rysunek (zmierzony): CZTERY pasy o TEJ SAMEJ długości 900 px (to samo
   pytanie), każdy podzielony INACZEJ na część ZMIERZONĄ (pełną: 740, 520,
   300, 140 px) i część ZAŁOŻONĄ (sam obrys 3 px: 160, 380, 600, 760 px).
   Część założona nigdy nie znika i nigdy nie udaje pełnej.

   ⚠⚠ SEDNO: równa długość mówi „to samo pytanie”, różny podział mówi „inny
   poziom pewności”. Assert w hero.py: każdy wariant dzieli się inaczej,
   część założona ZAWSZE widoczna, część zmierzona nigdy zerowa.
   ⚠⚠ ŻADNEJ ROSNĄCEJ GĘSTOŚCI ZNACZNIKÓW (pap2t.pl — tu nie ma zagęszczania,
   jest granica pełne/puste), ŻADNEGO PEŁNEGO I PUSTEGO TEGO SAMEGO KSZTAŁTU
   OBOK SIEBIE (lokatorski.pl — tu pełne i puste są DWIEMA CZĘŚCIAMI JEDNEGO
   pasa), ŻADNEGO PUSTEGO POLA NAD WYPEŁNIONYMI (darmowycertyfikat.pl),
   ŻADNYCH SŁUPKÓW Z PODZIAŁKĄ (deszczomierz — brak osi, skali i jednostek),
   ŻADNEJ WAGI (cudownatabletka.pl), ŻADNEGO POLA I SZCZYTU
   (pompyciepla.gmina.pl — choć wpis-3 mówi wprost „Moc to nie energia”).
   ⚠ Żadnego słońca, panelu, domu, wykresu zużycia, licznika, gór Karpacza.
   Bez liter i cyfr. Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ ROZMOWA W RODZINIE PV: czeladź mówi „cztery odpowiedzi na osobnych
   podstawach”, iława „ten sam sygnał, inny okres”, a tutaj „to samo pytanie,
   inna pewność”. Trzy różne sposoby powiedzenia „nie sklejaj tego, co ma
   inną wagę”.

   ⚠ UCZCIWIE O BARWIE: przestrzeń barwna serii wyczerpana (PLAN-PREMIUM,
   5.09). Błękit stalowy sąsiaduje z turkusem fotowoltaika.beskidy.pl
   (#10535F — zieleńszy, na JASNEJ płycie) i błękitem sygnałowym
   wirtualnykantor.pl (#14588F — nasyceńszy). Sepia nocna jest CIEPŁA
   i sąsiaduje z węglem fotowoltaika.czeladz.pl (#241F1B), ale tam akcentem
   jest fiolet, a tu chłodny błękit — w rodzinie PV cztery różne zestawy.

   ⚠ SZKIELET przeniesiony z otocertyfikat.pl (ST-NQ; ciemna płyta, blog
   `lista-wpisow`) — ten sam szkielet co fotowoltaika.czeladz.pl, 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 tej domenie brak), 9b i 9c (`kroki` w wpis-1;
   `wyliczenie` w wpis-2 i wpis-3).
   ⚠ NAPRAWA 6.09: `.kroki`, `.wyliczenie` i `.zrodlo` mają `margin-inline: auto`.
   ⚠ Rodzina PV (RODZINA-PV.md).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --sepia:       #26201C;   /* płyta nagłówka i hero — sepia nocna, ciepła */
  --sepia-noc:   #181310;
  --sepia-blask: #3F3630;
  --papier:      #F5F3F0;
  --karta:       #FFFFFF;

  --tekst:        #1F1D1B;   /* 15,17 na papierze, 16,80 na karcie */
  --tekst-cichy:  #534D48;   /*  7,52 na papierze */
  --na-sepii:       #EFEDEA; /* 13,76 / 15,77 na nocy / 10,09 na blasku */
  --na-sepii-cichy: #B8B2AB; /*  7,65 / 8,77 / 5,61 na blasku */

  /* błękit stalowy — TRZY wartości (kanon, punkt 12), policzone */
  --blekit-pismo:  #1E4C6B; /* PISMO — 8,24 na papierze, 9,13 na karcie */
  --blekit-kreska: #2E6E96; /* kreski — 5,01 / 5,55 */
  --blekit-jasny:  #A9CFE8; /* na ciemnych płytach — 9,79 / 11,21 / 7,17 na blasku */

  --obwodka:       #7E786F; /* 3,95 na papierze / 4,37 na karcie */
  --linia-cicha:   #E2DCD4;
  --obwodka-ciemna:#98908A; /* 5,12 na sepii / 5,87 na nocy / 3,76 na blasku */

  --kroj-naglowek: "Instrument Serif", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Onest", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Spline Sans 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(--blekit-jasny); color: var(--sepia); }
:focus-visible { outline: 3px solid var(--blekit-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--blekit-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(--blekit-jasny); color: var(--sepia); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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(--sepia);
  background-image: linear-gradient(180deg, var(--sepia-noc) 0%, var(--sepia) 62%, var(--sepia-blask) 100%);
}
/* wzdłuż dolnej krawędzi: dwa pasy o tej samej długości, podzielone INACZEJ
   na część pełną (zmierzoną) i część samego obrysu (założoną); okres 56 px */
.naglowek__podzial {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 4px, var(--blekit-jasny) 4px 34px, transparent 34px),
    linear-gradient(90deg, transparent 0 34px, var(--blekit-jasny) 34px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 34px, var(--blekit-jasny) 34px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 51px, var(--blekit-jasny) 51px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 4px, var(--blekit-jasny) 4px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 18px, var(--blekit-jasny) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 18px, var(--blekit-jasny) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 51px, var(--blekit-jasny) 51px 52px, transparent 52px);
  background-size: 56px 4px, 56px 1px, 56px 1px, 56px 4px, 56px 4px, 56px 1px, 56px 1px, 56px 4px;
  background-position: left 0px bottom 7px, left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 0px bottom 1px, left 0px bottom 4px, left 0px bottom 1px, left 0px bottom 1px;
  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-sepii); text-decoration: none; }
/* znak rozpoznawczy: dwa pasy o tej samej długości, dzielone inaczej */
.znak__podzial {
  flex: none; width: 30px; height: 16px;
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 20px 6px, 10px 1px, 10px 1px, 1px 6px, 11px 6px, 19px 1px, 19px 1px, 1px 6px;
  background-position: left 0px bottom 9px, left 20px bottom 14px, left 20px bottom 9px, left 29px bottom 9px, left 0px bottom 1px, left 11px bottom 6px, left 11px bottom 1px, left 29px bottom 1px;
  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(--blekit-jasny); }

.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-sepii-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-sepii); }
/* pozycja bieżąca: pod napisem dwa pasy tej samej długości — każdy z inną
   granicą między częścią pełną a założoną.
   ⚠⚠ 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-sepii); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em;
  height: 10px;
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 34% 1px, 30% 4px, 26% 1px, 22% 3px, 24% 1px, 20% 2px;
  background-position: left 0px bottom 0px, left 2% bottom 1px, left 40% bottom 5px, left 42% bottom 6px, right 0px bottom 3px, right 2% bottom 4px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — część zmierzona i część założona ------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--sepia);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--sepia);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--sepia-blask) 0%, rgba(63, 54, 48, 0) 62%),
    linear-gradient(180deg, var(--sepia) 0%, var(--sepia-noc) 100%);
}
.hero__podzial {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie cztery pasy i granice ich części), obok
     kolumny, nie pod nią — 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(--blekit-jasny); opacity: .4;
}
.hero__podzial svg { width: 100%; height: 100%; }
/* Scrim wygasza lewą stronę pod kolumną tytułu. Granica między częścią
   zmierzoną a założoną musi zostać czytelna w każdym pasie — to sedno rysunku. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(24, 19, 16, .95) 0%, rgba(24, 19, 16, .86) 22%, rgba(24, 19, 16, .1) 40%, rgba(24, 19, 16, 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__podzial {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(24, 19, 16, 0) 0%, rgba(24, 19, 16, 0) 22%, rgba(24, 19, 16, .9) 40%, rgba(24, 19, 16, .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-sepii); }
/* nad tytułem: dwa pasy tej samej długości, dzielone inaczej */
.hero .tytul::before {
  content: ""; display: block;
  width: 124px; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 88px 11px, 36px 2px, 36px 2px, 2px 11px, 44px 11px, 80px 2px, 80px 2px, 2px 11px;
  background-position: left 0px bottom 17px, left 88px bottom 26px, left 88px bottom 17px, left 122px bottom 17px, left 0px bottom 2px, left 44px bottom 11px, left 44px bottom 2px, left 122px bottom 2px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-sepii);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-sepii-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(--blekit-jasny); }

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

/* --- 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 PASAMI Z CZĘŚCIĄ ZMIERZONĄ I ZAŁOŻONĄ */
.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(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%);
  background-size: 27px 4px, 13px 1px, 13px 1px, 1px 4px, 14px 4px, 26px 1px, 26px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 27px bottom 10px, left 27px bottom 7px, left 39px bottom 7px, left 0px bottom 1px, left 14px bottom 4px, left 14px bottom 1px, left 39px bottom 1px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--blekit-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--blekit-jasny);
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 27px 4px, 13px 1px, 13px 1px, 1px 4px, 14px 4px, 26px 1px, 26px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 27px bottom 10px, left 27px bottom 7px, left 39px bottom 7px, left 0px bottom 1px, left 14px bottom 4px, left 14px bottom 1px, left 39px bottom 1px;
  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(--blekit-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--blekit-pismo);
  text-decoration-line: underline; text-decoration-color: var(--blekit-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 pasami podzielonymi na część
   zmierzoną i założoną.
   WYLICZENIE to rzeczy do sprawdzenia — dwa pasy, a przy każdej pozycji
   granica pełne/puste leży gdzie indziej: to samo pytanie, inna pewność.
   ⚠ 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(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%);
  background-size: 21px 4px, 11px 1px, 11px 1px, 1px 4px, 10px 4px, 22px 1px, 22px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 21px bottom 10px, left 21px bottom 7px, left 31px bottom 7px, left 0px bottom 1px, left 10px bottom 4px, left 10px bottom 1px, left 31px bottom 1px;
  background-repeat: no-repeat;
  color: var(--blekit-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(--blekit-jasny);
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 21px 4px, 11px 1px, 11px 1px, 1px 4px, 10px 4px, 22px 1px, 22px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 21px bottom 10px, left 21px bottom 7px, left 31px bottom 7px, left 0px bottom 1px, left 10px bottom 4px, left 10px bottom 1px, left 31px bottom 1px;
  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; }
/* ⚠ inna granica pełne/puste co pozycję: to samo pytanie, inny poziom pewności */
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%);
  background-size: 11px 4px, 17px 1px, 17px 1px, 1px 4px, 22px 4px, 6px 1px, 6px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 11px bottom 10px, left 11px bottom 7px, left 27px bottom 7px, left 0px bottom 1px, left 22px bottom 4px, left 22px bottom 1px, left 27px bottom 1px;
  background-repeat: no-repeat;}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%);
  background-size: 16px 4px, 12px 1px, 12px 1px, 1px 4px, 6px 4px, 22px 1px, 22px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 16px bottom 10px, left 16px bottom 7px, left 27px bottom 7px, left 0px bottom 1px, left 6px bottom 4px, left 6px bottom 1px, left 27px bottom 1px;
  background-repeat: no-repeat;}
/* znacznik: dwa pasy tej samej długości, dzielone inaczej */
.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(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%);
  background-size: 20px 4px, 8px 1px, 8px 1px, 1px 4px, 9px 4px, 19px 1px, 19px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 20px bottom 10px, left 20px bottom 7px, left 27px bottom 7px, left 0px bottom 1px, left 9px bottom 4px, left 9px bottom 1px, left 27px bottom 1px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before,
.tresc .hero .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 20px 4px, 8px 1px, 8px 1px, 1px 4px, 9px 4px, 19px 1px, 19px 1px, 1px 4px;
  background-position: left 0px bottom 7px, left 20px bottom 10px, left 20px bottom 7px, left 27px bottom 7px, left 0px bottom 1px, left 9px bottom 4px, left 9px bottom 1px, left 27px bottom 1px;
  background-repeat: no-repeat;}

/* ⚠⚠ 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(--blekit-pismo);
  text-decoration-line: underline; text-decoration-color: var(--blekit-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(--blekit-jasny); text-decoration-color: var(--blekit-jasny);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-sepii); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --blekit-kreska na blasku
   #433C35 daje 2,37:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --blekit-jasny (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(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 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(--blekit-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(239, 237, 234, .07);
  color: var(--na-sepii-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--blekit-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(--sepia); border-color: var(--sepia); color: var(--na-sepii); }
.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(--blekit-jasny); color: var(--na-sepii); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--blekit-jasny); border-color: var(--blekit-jasny); color: var(--sepia); }

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

/* --- 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 pasy tej samej długości, dzielone inaczej */
.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(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%),
    linear-gradient(90deg, var(--blekit-kreska) 0 100%);
  background-size: 38px 5px, 18px 1px, 18px 1px, 1px 5px, 20px 5px, 36px 1px, 36px 1px, 1px 5px;
  background-position: left 0px bottom 7px, left 38px bottom 11px, left 38px bottom 7px, left 55px bottom 7px, left 0px bottom 1px, left 20px bottom 5px, left 20px bottom 1px, left 55px bottom 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: .72rem; color: var(--blekit-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(--blekit-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(--blekit-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--blekit-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(--blekit-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--blekit-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(--sepia-noc); color: var(--na-sepii);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--sepia-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--sepia-blask) 0%, rgba(63, 54, 48, 0) 64%),
    linear-gradient(180deg, var(--sepia) 0%, var(--sepia-noc) 84%);
}
.stopka__podzial {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 4px, var(--blekit-jasny) 4px 34px, transparent 34px),
    linear-gradient(90deg, transparent 0 34px, var(--blekit-jasny) 34px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 34px, var(--blekit-jasny) 34px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 51px, var(--blekit-jasny) 51px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 4px, var(--blekit-jasny) 4px 18px, transparent 18px),
    linear-gradient(90deg, transparent 0 18px, var(--blekit-jasny) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 18px, var(--blekit-jasny) 18px 52px, transparent 52px),
    linear-gradient(90deg, transparent 0 51px, var(--blekit-jasny) 51px 52px, transparent 52px);
  background-size: 56px 4px, 56px 1px, 56px 1px, 56px 4px, 56px 4px, 56px 1px, 56px 1px, 56px 4px;
  background-position: left 0px bottom 7px, left 0px bottom 10px, left 0px bottom 7px, left 0px bottom 7px, left 0px bottom 1px, left 0px bottom 4px, left 0px bottom 1px, left 0px bottom 1px;
  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-sepii);
}
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%),
    linear-gradient(90deg, var(--blekit-jasny) 0 100%);
  background-size: 38px 5px, 18px 1px, 18px 1px, 1px 5px, 20px 5px, 36px 1px, 36px 1px, 1px 5px;
  background-position: left 0px bottom 7px, left 38px bottom 11px, left 38px bottom 7px, left 55px bottom 7px, left 0px bottom 1px, left 20px bottom 5px, left 20px bottom 1px, left 55px bottom 1px;
  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-sepii-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--blekit-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — PASY Z CZĘŚCIĄ ZMIERZONĄ I ZAŁOŻONĄ W 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: trzy pasy pionowe tej samej długości, każdy dzielony inaczej */
  .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(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%),
      linear-gradient(90deg, var(--blekit-kreska) 0 100%);
    background-size: 4px 30%, 1px 48%, 1px 48%, 4px 1px, 4px 52%, 1px 26%, 1px 26%, 4px 1px, 4px 18%, 1px 60%, 1px 60%, 4px 1px;
    background-position: left 2px top 10%, left 2px top 40%, left 5px top 40%, left 2px top 88%, left 10px top 10%, left 10px top 62%, left 13px top 62%, left 10px top 88%, left 18px top 10%, left 18px top 28%, left 21px top 28%, left 18px top 88%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%),
      linear-gradient(90deg, var(--blekit-jasny) 0 100%);
    background-size: 4px 30%, 1px 48%, 1px 48%, 4px 1px, 4px 52%, 1px 26%, 1px 26%, 4px 1px, 4px 18%, 1px 60%, 1px 60%, 4px 1px;
    background-position: left 2px top 10%, left 2px top 40%, left 5px top 40%, left 2px top 88%, left 10px top 10%, left 10px top 62%, left 13px top 62%, left 10px top 88%, left 18px top 10%, left 18px top 28%, left 21px top 28%, left 18px top 88%;
    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__podzial, .hero__plyta, .hero__podzial,
  .hero__scrim, .stopka__plyta, .stopka__podzial { 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%) !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; }
}