/* =====================================================================
   internetmobilny.com.pl — MAKIETA PREMIUM
   „NIŻSZY, ALE RÓWNY, WYGRYWA Z WYSOKIM, ALE PRZERYWANYM”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: „**Wariant z niższym rekordem, ale
   stabilnym wykonaniem zadania, może być trafniejszy od wariantu, który
   przeplata bardzo dobre wyniki z przerwami**”; h2 „**Jeden szybki pomiar
   nie opisuje usługi**”; „**a nie na pojedynczym wyniku lub haśle
   reklamowym**”.

   Rysunek (zmierzony): dwa rzędy tych samych pól na tych samych miejscach.
   Górny WYSOKO, co drugie miejsce PUSTE (dobre wyniki z przerwami).
   Dolny NIŻEJ, każde miejsce zajęte (stabilne wykonanie). Wysokość to
   rekord, ciągłość to usługa.

   ⚠⚠ POLA RÓWNE; rząd jest wysoko albo nisko W CAŁOŚCI — żadnych słupków
   o różnej wysokości (ikona zasięgu). Puste miejsca są PUSTE (13b).
   ⚠ Teza wybrana CELOWO inna niż internet5g.com.pl (mapa ↔ miejsce),
   choć h2 „Mapa podpowiada, test rozstrzyga” mówi to samo.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNYCH OKIEN W CZASIE — internet4g.pl (jedna seria, zmienne
     położenie); tu DWIE serie, obecność/brak i wysokość całego rzędu.
   * ŻADNYCH RZĘDÓW SEGMENTÓW — zagranicznynumer; ŻADNEGO PASMA Z WIERSZAMI
     — cheaproaming; ŻADNYCH DWÓCH TORÓW — centralewirtualne (tam urwanie
     raz, tu przerwy co drugie miejsce = rytm); ŻADNYCH DWÓCH BELEK — Łomża.
   * ŻADNEJ ANTENY, FAL, ROUTERA, KRESEK ZASIĘGU, OSI, CZERWIENI —
     zakazy rodziny TELEFON; bez cyfr i liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: kobalt nocny #1E2A4A — sąsiedzi: atrament nocny
   otosmsy.pl (czarniejszy), granat głęboki małopolski #182234 (PV).
   Musztarda #7A6410 — żółcie w rodzinie już są (złoto dellmont.pl na
   zieleni nocnej, bursztyn zagranicznynumer.com na łupku); rozróżnia
   PŁYTA: **musztarda na kobalcie** to para, której w serii nie ma.

   ⚠ CASTORO ma tylko wagę 400 — WSZYSTKIE nagłówki idą 400, hierarchia
   na ROZMIARZE (kanon, punkt 11). ⚠ NOTO SANS MONO 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 {
  --kobalt:       #1E2A4A;
  --kobalt-noc:   #131B33;
  --kobalt-blask: #354468;
  --papier:       #F3F4F7;
  --karta:        #FFFFFF;

  --tekst:       #161A24;   /* 15.82 / 17.39 */
  --tekst-cichy: #474D5C;   /* 7.69 / 8.45 */
  --na-kobalcie: #EDF0F7;   /* 12.39 / 14.94 / 8.45 na blasku */
  --na-kobalcie-cichy: #BCC5DA; /* 8.17 / 9.85 / 5.57 na blasku */

  /* musztarda — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --musztarda-pismo:  #7A6410; /* PISMO — 5.22 / 5.74 */
  --musztarda-kreska: #9E8420; /* kreski — 3.31 / 3.64 (na blasku 2.65 — patrz sekcja 8) */
  --musztarda-jasna:  #EDD97A; /* na płytach — 9.97 / 12.02 / 6.80 na blasku */

  --obwodka:       #71747C; /* 4.25 / 4.68 */
  --linia-cicha:   #E1E3E8;
  --obwodka-ciemna:#98A3BC; /* 5.59 / 6.74 / 3.81 na blasku */
  /* przyciski: biel na piśmie 5.74, noc na jasnej 12.02 */

  --kroj-naglowek: "Castoro", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Schibsted Grotesk", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Noto 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: 4px;
  --cien-karta: 0 16px 34px -28px rgba(30, 42, 74, .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(--musztarda-jasna); color: var(--kobalt); }
:focus-visible { outline: 3px solid var(--musztarda-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--musztarda-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(--musztarda-jasna); color: var(--kobalt); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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(--kobalt);
  background-image: linear-gradient(180deg, var(--kobalt-noc) 0%, var(--kobalt) 62%, var(--kobalt-blask) 100%);
}
/* wzdłuż dolnej krawędzi: górny rząd z przerwami, dolny bez przerw;
   okres 84 px. */
.naglowek__rzedy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 17px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--musztarda-jasna) 0px 6px, transparent 6px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--musztarda-jasna) 24px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--musztarda-jasna) 48px 54px, transparent 54px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, var(--musztarda-jasna) 0px 6px, transparent 6px 84px),
    repeating-linear-gradient(90deg, transparent 0 12px, var(--musztarda-jasna) 12px 18px, transparent 18px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--musztarda-jasna) 24px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 36px, var(--musztarda-jasna) 36px 42px, transparent 42px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--musztarda-jasna) 48px 54px, transparent 54px 84px);
  background-size: 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px;
  background-position: 0 1px, 0 1px, 0 1px, 0 10px, 0 10px, 0 10px, 0 10px, 0 10px;
  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-kobalcie); text-decoration: none; }
/* znak rozpoznawczy: górny rząd z przerwami, dolny bez przerw */
.znak__rzedy {
  flex: none; width: 34px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%);
  background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px;
  background-position: left 0px top 1px, left 20px top 1px, left 0px top 10px, left 10px top 10px, left 20px top 10px, left 30px top 10px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.06rem, .94rem + .46vw, 1.38rem); letter-spacing: -.008em;
}
.znak:hover .znak__slowo { color: var(--musztarda-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-kobalcie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-kobalcie); }
/* pozycja bieżąca: pod napisem górny rząd z przerwami i dolny bez przerw
   (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-kobalcie); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 5px; inset-inline: .5em;
  height: 11px;
  background-image:
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px;
  background-position: left 0px top 0px, left 14px top 0px, left 28px top 0px, left 0px top 7px, left 7px top 7px, left 14px top 7px, left 21px top 7px, left 28px top 7px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — niższy, ale równy, wygrywa z wysokim, ale przerywanym */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--kobalt);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--kobalt);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--kobalt-blask) 0%, rgba(53, 68, 104, 0) 62%),
    linear-gradient(180deg, var(--kobalt) 0%, var(--kobalt-noc) 100%);
}
.hero__rzedy {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (oba rzędy, wszystkie sześć miejsc), obok
     kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px.
     ⚠⚠ Obcięcie z boku zabrałoby miejsca — a rytm „co drugie puste” czyta
     się dopiero od trzech par. Kadr ciasny (3,3 ≥ 2,0). */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--musztarda-jasna); opacity: .4;
}
.hero__rzedy svg { width: 100%; height: 100%; }
/* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze —
   oba rzędy zostają czytelne. Puste miejsca górnego rzędu są puste
   Z ZAŁOŻENIA — scrim nie może „dorysować” tam przygaszonego pola. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(19, 27, 51, .95) 0%, rgba(19, 27, 51, .86) 22%, rgba(19, 27, 51, .1) 40%, rgba(19, 27, 51, 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__rzedy {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(19, 27, 51, 0) 0%, rgba(19, 27, 51, 0) 22%, rgba(19, 27, 51, .9) 40%, rgba(19, 27, 51, .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: 400;
  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-kobalcie); }
/* nad tytułem: górny rząd z przerwami, dolny bez przerw — największa skala
   w arkuszu (sześć miejsc, dziewięć warstw) */
.hero .tytul::before {
  content: ""; display: block;
  width: 11rem; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%);
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px;
  background-position: left 0px top 0px, left 64px top 0px, left 128px top 0px, left 0px top 18px, left 32px top 18px, left 64px top 18px, left 96px top 18px, left 128px top 18px, left 160px top 18px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-kobalcie);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-kobalcie-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(--musztarda-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(--kobalt-noc);
  background-image: linear-gradient(180deg, var(--kobalt) 0%, var(--kobalt-noc) 100%);
  color: var(--na-kobalcie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--musztarda-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-kobalcie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-kobalcie); }
/* ⚠⚠ 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-kobalcie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-kobalcie-cichy); border-inline-start-color: var(--musztarda-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--musztarda-jasna); text-decoration-color: var(--musztarda-jasna); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-kobalcie); }

/* --- 7. TYPOGRAFIA TREŚCI ------------------------------------------- */
.tresc h2 {
  margin: 0 0 clamp(.7rem, .5rem + .5vw, 1.1rem);
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.36rem, 1.06rem + 1.06vw, 2.1rem);
  line-height: 1.22; letter-spacing: -.008em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji STOI NAD dwoma rzędami: górny z przerwami, dolny bez.
   ⚠⚠ Pozycje składnią `left … bottom …` (dolny rząd przy dolnej krawędzi). */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: block; width: 4.4rem; margin-block-end: .7rem; padding-block-end: 1rem;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px;
  background-position: left 0px bottom 7px, left 14px bottom 7px, left 28px bottom 7px, left 0px bottom 0px, left 7px bottom 0px, left 14px bottom 0px, left 21px bottom 0px, left 28px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .72rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--musztarda-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--musztarda-jasna);
  background-image:
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 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(--musztarda-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--musztarda-pismo);
  text-decoration-line: underline; text-decoration-color: var(--musztarda-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. KROKI I WYLICZENIA -------------------------------------------
   KROKI to procedura po kolei — numer w PEŁNYM PUDEŁKU: krok wykonany
   jest zajętym miejscem w rzędzie, nie przerwą.
   WYLICZENIE to rzeczy do sprawdzenia — dwa rzędy: pozycja wykazu to
   porównanie ciągłości, nie rekordu.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   ⚠ Pismo w pudełku to --karta na --musztarda-pismo; na ciemnym paśmie
   pudełko odwraca się na --musztarda-jasna z pismem --kobalt-noc.
   -------------------------------------------------------------------- */
.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: .6em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 1.6rem; padding-inline: .4rem;
  background: var(--musztarda-pismo); color: var(--karta);
  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: var(--musztarda-jasna); color: var(--kobalt-noc); }

.tresc .wyliczenie { margin: .4em 0 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.9rem; }
/* znacznik: górny rząd z przerwami, dolny bez przerw (pięć miejsc).
   ⚠ OSIEM warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 24px; height: 11px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px;
  background-position: left 0px top 0px, left 10px top 0px, left 20px top 0px, left 0px top 7px, left 5px top 7px, left 10px top 7px, left 15px top 7px, left 20px top 7px;
  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(--musztarda-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(--musztarda-pismo);
  text-decoration-line: underline; text-decoration-color: var(--musztarda-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(--musztarda-jasna); text-decoration-color: var(--musztarda-jasna);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-kobalcie); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --musztarda-kreska na blasku
   #354468 daje 2,65:1 — poniżej progu 3:1 dla kresek. Na ciemnym idzie
   --musztarda-jasna. */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 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(--musztarda-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, 240, 247, .07);
  color: var(--na-kobalcie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--musztarda-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(--kobalt); border-color: var(--kobalt); color: var(--na-kobalcie); }
.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(--musztarda-jasna); color: var(--na-kobalcie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--musztarda-jasna); border-color: var(--musztarda-jasna); color: var(--kobalt); }

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

/* --- 11. KARTY KATALOGU — DWA RZĘDY 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: górny rząd z przerwami, dolny bez przerw */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 4.4rem; height: 11px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px;
  background-position: left 0px top 0px, left 16px top 0px, left 32px top 0px, left 0px top 7px, left 8px top 7px, left 16px top 7px, left 24px top 7px, left 32px top 7px;
  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(--musztarda-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(--musztarda-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(--musztarda-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--musztarda-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(--musztarda-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--musztarda-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(--kobalt-noc); color: var(--na-kobalcie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--kobalt-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--kobalt-blask) 0%, rgba(53, 68, 104, 0) 64%),
    linear-gradient(180deg, var(--kobalt) 0%, var(--kobalt-noc) 84%);
}
/* ten sam pas co w nagłówku */
.stopka__rzedy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 17px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--musztarda-jasna) 0px 6px, transparent 6px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--musztarda-jasna) 24px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--musztarda-jasna) 48px 54px, transparent 54px 84px),
    repeating-linear-gradient(90deg, transparent 0 0px, var(--musztarda-jasna) 0px 6px, transparent 6px 84px),
    repeating-linear-gradient(90deg, transparent 0 12px, var(--musztarda-jasna) 12px 18px, transparent 18px 84px),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--musztarda-jasna) 24px 30px, transparent 30px 84px),
    repeating-linear-gradient(90deg, transparent 0 36px, var(--musztarda-jasna) 36px 42px, transparent 42px 84px),
    repeating-linear-gradient(90deg, transparent 0 48px, var(--musztarda-jasna) 48px 54px, transparent 54px 84px);
  background-size: 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px, 100% 6px;
  background-position: 0 1px, 0 1px, 0 1px, 0 10px, 0 10px, 0 10px, 0 10px, 0 10px;
  background-repeat: repeat-x;
  opacity: .55;
}
.stopka .kontener { position: relative; z-index: 2; }
.stopka__znak {
  margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.02rem, .94rem + .4vw, 1.28rem); color: var(--na-kobalcie);
}
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 20px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasna) 0 100%);
  background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
  background-position: left 0px top 0px, left 28px top 0px, left 56px top 0px, left 0px top 12px, left 14px top 12px, left 28px top 12px, left 42px top 12px, left 56px top 12px, left 70px top 12px;
  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-kobalcie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--musztarda-jasna); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — DWA RZĘDY 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: lewa kolumna z przerwami (co drugie miejsce), prawa bez przerw */
  .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(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px, 6px 6px;
    background-position: left 0px top 10%, left 0px top 50%, left 0px top 90%, left 12px top 10%, left 12px top 30%, left 12px top 50%, left 12px top 70%, left 12px top 90%;
    background-repeat: no-repeat;
    opacity: .6;
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasna) 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__rzedy, .hero__plyta, .hero__rzedy,
  .hero__scrim, .stopka__plyta, .stopka__rzedy { 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 { background: none !important; 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; }
}