/* =====================================================================
   contactcenterwchmurze.pl — MAKIETA PREMIUM
   „GRANICE NARYSOWANE MOCNO, TABLICZKI PUSTE”
   ---------------------------------------------------------------------
   Metafora z RODZINA-TELEFON.md (6.09). Teza serwisu, jego własnymi
   słowami: h1 „**Bezpieczeństwo i ciągłość contact center: kontroluj
   granice, nie etykiety**”; „**Awaria jednego ogniwa może zatrzymać
   kontakt mimo zielonego statusu samej platformy**”; „**Zamknięcie
   incydentu następuje po odzyskaniu procesu i danych, a nie po zmianie
   koloru panelu**”.

   Rysunek (zmierzony): trzy równe obszary o CIĘŻKICH krawędziach,
   rozdzielone przerwą; w każdym mała PUSTA tabliczka cienką kreską.
   W ozdobnikach jeden obszar z tabliczką.

   ⚠⚠ KRAWĘDŹ GRUBA (to ona jest treścią), TABLICZKA CIENKA I PUSTA (13b).
   To odwrotność „bloku w obrysie” doadowania (tam pełny blok w cienkim
   obrysie) i nie zagnieżdżenie nonoh (jeden poziom, dwa ciężary).

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNEGO BLOKU W OBRYSIE — doadowania; ŻADNEGO ZAGNIEŻDŻENIA — nonoh;
     ŻADNEJ RAMY SYSTEMU — otocms; ŻADNYCH CZTERECH PÓL — pomowienia;
     ŻADNEGO STATUSU — premium.olsztyn (tabliczka nie ma stanów, jest pusta).
   * ŻADNEJ CHMURKI, SŁUCHAWKI, WYKRESU, PTASZKA, CYFR, CZERWIENI —
     zakazy rodziny TELEFON; bez liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: grafit stalowy #33383B — sąsiedzi: łupek
   voipwkomorce.pl #29323A, antracyt wificaller.pl #2C2E31, stal ciemna
   #2F3644; jaśniejszy, chłodno-szary. Srebro — JEDYNA para bez barwy
   w rodzinie: planowana limonka blada była limonką technologia6g.pl
   (#4F6B1E / #D2E6A0), więc akcent zszedł do srebra; surowość pasuje do
   „granice, nie etykiety”.

   ⚠ BODONI MODA ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ SONO w wadze 400.

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

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

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --stal:       #33383B;
  --stal-noc:   #24282A;
  --stal-blask: #484E52;
  --papier:     #F4F5F6;
  --karta:      #FFFFFF;

  --tekst:       #1B1E20;   /* 15.35 / 16.76 */
  --tekst-cichy: #4D5357;   /* 7.15 / 7.81 */
  --na-stali:    #EEF0F1;   /* 10.38 / 13.01 / 7.39 na blasku */
  --na-stali-cichy: #C5CACD; /* 7.18 / 9.00 / 5.11 na blasku */

  /* srebro — TRZY wartości (kanon, punkt 12), policzone skryptem; para bez barwy */
  --srebro-pismo:  #3F4B52; /* PISMO — 8.22 / 8.98 */
  --srebro-kreska: #6B7A83; /* kreski — 4.06 / 4.43 (na blasku 1.90 — patrz sekcja 8) */
  --srebro-jasne:  #D6DEE3; /* na płytach — 8.71 / 10.92 / 6.20 na blasku */

  --obwodka:       #74797C; /* 4.03 / 4.40 */
  --linia-cicha:   #E2E4E6;
  --obwodka-ciemna:#9AA3A8; /* 4.62 / 5.79 / 3.29 na blasku */
  /* przyciski: biel na piśmie 8.98, noc na jasnej 10.92 */

  --kroj-naglowek: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Encode Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Sono", 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: 4px;
  --cien-karta: 0 16px 34px -28px rgba(51, 56, 59, .5);
}

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

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

/* --- 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(--stal);
  background-image: linear-gradient(180deg, var(--stal-noc) 0%, var(--stal) 62%, var(--stal-blask) 100%);
}
/* wzdłuż dolnej krawędzi: obszary o ciężkiej krawędzi z pustą tabliczką; okres 84 px. */
.naglowek__granice {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--srebro-jasne) 0px 56px, transparent 56px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, var(--srebro-jasne) 0px 56px, transparent 56px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, var(--srebro-jasne) 0px 3px, transparent 3px 84px),
    repeating-linear-gradient(90deg, transparent 0 53px, var(--srebro-jasne) 53px 56px, transparent 56px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--srebro-jasne) 8px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--srebro-jasne) 8px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--srebro-jasne) 8px 9px, transparent 9px 84px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--srebro-jasne) 29px 30px, transparent 30px 84px);
  background-size: 100% 3px, 100% 3px, 100% 15px, 100% 15px, 100% 1px, 100% 1px, 100% 5px, 100% 5px;
  background-position: 0 0, 0 12px, 0 0, 0 0, 0 5px, 0 9px, 0 5px, 0 5px;
  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-stali); text-decoration: none; }
/* znak rozpoznawczy: obszar o ciężkiej krawędzi z pustą tabliczką */
.znak__granice {
  flex: none; width: 30px; height: 20px;
  background-image:
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%);
  background-size: 30px 3px, 30px 3px, 3px 20px, 3px 20px, 12px 1px, 12px 1px, 1px 5px, 1px 5px;
  background-position: left 0px top 0px, left 0px top 17px, left 0px top 0px, left 27px top 0px, left 5px top 5px, left 5px top 9px, left 5px top 5px, left 16px top 5px;
  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(--srebro-jasne); }

.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-stali-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-stali); }
/* pozycja bieżąca: pod napisem obszar o ciężkiej krawędzi z pustą tabliczką
   (px od lewej).
   ⚠⚠ 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-stali); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 5px; inset-inline: .5em;
  height: 11px;
  background-image:
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%);
  background-size: 22px 2px, 22px 2px, 2px 11px, 2px 11px, 8px 1px, 8px 1px, 1px 3px, 1px 3px;
  background-position: left 0px top 0px, left 0px top 9px, left 0px top 0px, left 20px top 0px, left 4px top 4px, left 4px top 6px, left 4px top 4px, left 11px top 4px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — granice mocno, tabliczki puste ----------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--stal);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--stal);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--stal-blask) 0%, rgba(72, 78, 82, 0) 62%),
    linear-gradient(180deg, var(--stal) 0%, var(--stal-noc) 100%);
}
.hero__granice {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (trzy obszary z tabliczkami), obok
     kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px.
     ⚠⚠ Obcięcie z lewej zabrałoby jeden obszar — a treścią jest, że
     granic jest kilka i każda ma pustą tabliczkę. */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--srebro-jasne); opacity: .4;
}
.hero__granice svg { width: 100%; height: 100%; }
/* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze —
   wszystkie trzy obszary zostają czytelne. Lewy obszar nie może być
   przygaszony: granice mają być równe. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(36, 40, 42, .95) 0%, rgba(36, 40, 42, .86) 22%, rgba(36, 40, 42, .1) 40%, rgba(36, 40, 42, 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__granice {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(36, 40, 42, 0) 0%, rgba(36, 40, 42, 0) 22%, rgba(36, 40, 42, .9) 40%, rgba(36, 40, 42, .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-stali); }
/* nad tytułem: obszar o ciężkiej krawędzi z pustą tabliczką — największa
   skala w arkuszu, osiem warstw */
.hero .tytul::before {
  content: ""; display: block;
  width: 6rem; height: 40px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%);
  background-size: 96px 5px, 96px 5px, 5px 40px, 5px 40px, 30px 2px, 30px 2px, 2px 10px, 2px 10px;
  background-position: left 0px top 0px, left 0px top 35px, left 0px top 0px, left 91px top 0px, left 9px top 9px, left 9px top 17px, left 9px top 9px, left 37px top 9px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-stali);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-stali-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(--srebro-jasne); }

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

/* --- 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 STOI NAD obszarem o ciężkiej krawędzi z pustą tabliczką. 8 warstw.
   ⚠⚠ Pozycje składnią `left … bottom …`. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: block; width: 4.4rem; margin-block-end: .7rem; padding-block-end: 1.1rem;
  background-image:
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%);
  background-size: 22px 2px, 22px 2px, 2px 11px, 2px 11px, 8px 1px, 8px 1px, 1px 3px, 1px 3px;
  background-position: left 0px bottom 9px, left 0px bottom 0px, left 0px bottom 0px, left 20px bottom 0px, left 4px bottom 6px, left 4px bottom 4px, left 4px bottom 4px, left 11px bottom 4px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .72rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--srebro-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--srebro-jasne);
  background-image:
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%);
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.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(--srebro-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--srebro-pismo);
  text-decoration-line: underline; text-decoration-color: var(--srebro-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. KROKI I WYLICZENIA -------------------------------------------
   KROKI to procedura po kolei — numer w PUSTEJ RAMCE: krok jest granicą,
   którą się kontroluje, nie etykietą.
   WYLICZENIE to rzeczy do sprawdzenia — obszar z pustą tabliczką: pozycja
   wykazu to jedno pytanie „co jest za tą etykietą?”.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em 0 1.4em; padding: 0; list-style: none; counter-reset: krok; }
.tresc .kroki li {
  counter-increment: krok; position: relative; padding: .7em 0 .7em 3.2rem;
  border-block-end: 1px solid var(--linia-cicha);
}
/* ⚠ Kreskę zdejmujemy ostatniej pozycji W UKŁADZIE; wykaz jednoszpaltowy (P-2). */
.tresc .kroki li:last-child { border-block-end: 0; }
/* ⚠⚠ KANON 9b: odsyłacz WEWNĄTRZ `.kroki` jest celem UI — B7 mierzy sam
   `<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: .64em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 1.5rem; padding-inline: .35rem;
  background: var(--karta); color: var(--srebro-pismo);
  border: 2px solid var(--srebro-kreska);
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .7rem;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li { border-block-end-color: var(--obwodka-ciemna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .kroki li::before { background: transparent; color: var(--srebro-jasne); border-color: var(--srebro-jasne); }

.tresc .wyliczenie { margin: .4em 0 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.9rem; }
/* znacznik: obszar o ciężkiej krawędzi z pustą tabliczką.
   ⚠ OSIEM warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .45em; inset-inline-start: 0;
  width: 24px; height: 13px;
  background-image:
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%);
  background-size: 24px 2px, 24px 2px, 2px 13px, 2px 13px, 9px 1px, 9px 1px, 1px 3px, 1px 3px;
  background-position: left 0px top 0px, left 0px top 11px, left 0px top 0px, left 22px top 0px, left 4px top 4px, left 4px top 6px, left 4px top 4px, left 12px top 4px;
  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(--srebro-jasne); }

/* ⚠⚠ 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(--srebro-pismo);
  text-decoration-line: underline; text-decoration-color: var(--srebro-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(--srebro-jasne); text-decoration-color: var(--srebro-jasne);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-stali); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --srebro-kreska na blasku
   #484E52 daje 1,90:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --srebro-jasne. */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%);
}

.tresc .zrodlo {
  margin: 1.6em 0 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--srebro-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(238, 240, 241, .07);
  color: var(--na-stali-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--srebro-jasne);
}

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

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

/* --- 11. KARTY KATALOGU — GRANICA 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: obszar o ciężkiej krawędzi z pustą tabliczką */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 3rem; height: 16px;
  background-image:
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%),
    linear-gradient(90deg, var(--srebro-kreska) 0 100%);
  background-size: 48px 3px, 48px 3px, 3px 16px, 3px 16px, 16px 1px, 16px 1px, 1px 4px, 1px 4px;
  background-position: left 0px top 0px, left 0px top 13px, left 0px top 0px, left 45px top 0px, left 5px top 5px, left 5px top 8px, left 5px top 5px, left 20px top 5px;
  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(--srebro-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: 400;
  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(--srebro-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(--srebro-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--srebro-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(--srebro-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--srebro-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(--stal-noc); color: var(--na-stali);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--stal-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--stal-blask) 0%, rgba(72, 78, 82, 0) 64%),
    linear-gradient(180deg, var(--stal) 0%, var(--stal-noc) 84%);
}
/* ten sam pas co w nagłówku */
.stopka__granice {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--srebro-jasne) 0px 56px, transparent 56px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, var(--srebro-jasne) 0px 56px, transparent 56px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, var(--srebro-jasne) 0px 3px, transparent 3px 84px),
    repeating-linear-gradient(90deg, transparent 0 53px, var(--srebro-jasne) 53px 56px, transparent 56px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--srebro-jasne) 8px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--srebro-jasne) 8px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--srebro-jasne) 8px 9px, transparent 9px 84px),
    repeating-linear-gradient(90deg, transparent 0 29px, var(--srebro-jasne) 29px 30px, transparent 30px 84px);
  background-size: 100% 3px, 100% 3px, 100% 15px, 100% 15px, 100% 1px, 100% 1px, 100% 5px, 100% 5px;
  background-position: 0 0, 0 12px, 0 0, 0 0, 0 5px, 0 9px, 0 5px, 0 5px;
  background-repeat: repeat-x;
  opacity: .55;
}
.stopka .kontener { position: relative; z-index: 2; }
.stopka__znak {
  margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .94rem + .4vw, 1.28rem); color: var(--na-stali);
}
.stopka__znak::after {
  content: ""; display: block; width: 4rem; height: 26px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%),
    linear-gradient(90deg, var(--srebro-jasne) 0 100%);
  background-size: 64px 4px, 64px 4px, 4px 26px, 4px 26px, 20px 1px, 20px 1px, 1px 6px, 1px 6px;
  background-position: left 0px top 0px, left 0px top 22px, left 0px top 0px, left 60px top 0px, left 7px top 7px, left 7px top 12px, left 7px top 7px, left 26px top 7px;
  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-stali-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--srebro-jasne); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — GRANICA PIONOWO W PRAWYM TORZE -----------
   ⚠⚠ KANON 10: tory boczne SYMETRYCZNE, środkowy w REM, row-gap ZEROWY,
   ozdobnik w TORZE SIATKI (nie pseudoelementem `main.tresc`).
   -------------------------------------------------------------------- */
@media screen and (min-width: 1560px) {
  .pasmo > .kontener, .hero__kontener {
    display: grid;
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna)) [proza-end]
      minmax(0, 1fr) [pelna-end];
    column-gap: var(--rowek); row-gap: 0; align-items: start; max-width: none;
  }
  .hero__kontener {
    grid-template-columns:
      [pelna-start] minmax(0, 1fr)
      [proza-start] minmax(0, var(--kolumna-hero)) [proza-end]
      minmax(0, 1fr) [pelna-end];
  }
  .pasmo > .kontener > *, .hero__kontener > * { grid-column: proza; max-width: none; margin-inline: 0; }
  .pasmo > .kontener > h2 {
    grid-column: pelna-start / proza-start;
    justify-self: end; text-align: end;
    max-width: var(--szyna); margin-block: 0;
  }
  /* ⚠ Ozdobnik numeru jest zakotwiczony od lewej w px; przy wyrównaniu
     nagłówka do prawej nie przestawiamy ANI JEDNEJ warstwy (kanon 13c). */
  .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: wysoki obszar o ciężkiej krawędzi z pustą tabliczką u góry */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 5rem;
    background-image:
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%),
      linear-gradient(90deg, var(--srebro-kreska) 0 100%);
    background-size: 3px 72px, 3px 72px, 24px 3px, 24px 3px, 1px 24px, 1px 24px, 8px 1px, 8px 1px;
    background-position: left 0px top 0px, left 21px top 0px, left 0px top 0px, left 0px top 69px, left 6px top 6px, left 13px top 6px, left 6px top 6px, left 6px top 29px;
    background-repeat: no-repeat;
    opacity: .6;
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%),
      linear-gradient(90deg, var(--srebro-jasne) 0 100%);
    opacity: .7;
  }
}

/* --- 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__granice, .hero__plyta, .hero__granice,
  .hero__scrim, .stopka__plyta, .stopka__granice { 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; background-image: none !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; }
}