/* =====================================================================
   wificaller.pl — MAKIETA PREMIUM
   „TWOJA POŁOWA DROGI — PEŁNE POŁĄCZENIE Z ROUTEREM NIC NIE ZNACZY, GDY
   ROUTER STRACIŁ ŁĄCZE”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: „**Sama pełna ikona sieci
   bezprzewodowej nic nie znaczy, jeśli za nią nie ma połączenia ze
   światem — telefon może być świetnie połączony z routerem, który akurat
   stracił łącze**”; „**Wymóg internetu dotyczy wyłącznie ciebie, bo to
   twoja połowa drogi biegnie przez router**”.

   Rysunek (zmierzony): telefon (pełne pole), pierwsza połowa drogi
   (pełna), router (pełny, wyższy blok), druga połowa drogi (PUSTY obrys),
   świat (duże pełne pole). Jedna droga SZEREGOWO z dwóch połów; pusta
   jest DRUGA. Bez fal i strzałki.

   ⚠⚠ ODCINKI SZEREGOWO, NIE RÓWNOLEGLE; PUSTY DRUGI; ŚWIAT WIĘKSZY OD
   TELEFONU (13b). ⚠ h2 „Trzy rzeczy muszą się zgodzić naraz” pominięte
   celowo — „czynniki i wynik” ma telefonia5g.pl.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNYCH DWÓCH TORÓW OBOK SIEBIE — centralewirtualne (równolegle, dwa
     końce; tu szeregowo, trzy stacje).
   * ŻADNEJ PRZERWY W GRUNCIE — wificaller.eu (granica i pas przez nią;
     tu brakujący odcinek drogi).
   * ŻADNEGO OKRESU Z OKNAMI — voipwkomorce (odcinki w czasie; tu pusty
     CAŁY drugi odcinek między dwiema pełnymi stacjami).
   * ŻADNEJ IKONY WI-FI, FAL, ANTENY, SŁUCHAWKI, BATERII, CYFR, STRZAŁKI,
     CZERWIENI — zakazy rodziny TELEFON; bez liter (kanon 13).
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: antracyt #2C2E31 — sąsiedzi: grafit premiummobile
   #434950 (jaśniejszy, niebieskawy), łupek voipwkomorce #29323A
   (zielonkawy); antracyt neutralny i ciemniejszy. Róż pudrowy #93334F —
   malina internet4g.pl #8A2A55 to ten sam obszar barwy, ale pismo na
   JASNEJ mgle; tu widoczny jest pudrowy róż na ciemnym. **Róż pudrowy na
   antracycie** to para, której w serii nie ma.

   ⚠ ALEGREYA ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ KODE 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 {
  --antracyt:       #2C2E31;
  --antracyt-noc:   #1E2022;
  --antracyt-blask: #414448;
  --papier:         #F5F5F6;
  --karta:          #FFFFFF;

  --tekst:       #1B1C1F;   /* 15.64 / 17.04 */
  --tekst-cichy: #4E5055;   /* 7.41 / 8.07 */
  --na-antracycie: #EFF0F1;   /* 11.93 / 14.32 / 8.58 na blasku */
  --na-antracycie-cichy: #C3C6CA; /* 7.94 / 9.53 / 5.71 na blasku */

  /* róż pudrowy — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --roz-pismo:  #93334F; /* PISMO — 6.82 / 7.43 */
  --roz-kreska: #C05A78; /* kreski — 3.87 / 4.22 (na blasku 2.32 — patrz sekcja 8) */
  --roz-jasny:  #F2B4C2; /* na płytach — 7.83 / 9.40 / 5.63 na blasku */

  --obwodka:       #75787C; /* 4.07 / 4.44 */
  --linia-cicha:   #E3E4E6;
  --obwodka-ciemna:#979BA1; /* 4.88 / 5.85 / 3.51 na blasku */
  /* przyciski: biel na piśmie 7.43, noc na jasnej 9.40 */

  --kroj-naglowek: "Alegreya", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Outfit", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Kode 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(44, 46, 49, .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(--roz-jasny); color: var(--antracyt); }
:focus-visible { outline: 3px solid var(--roz-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--roz-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(--roz-jasny); color: var(--antracyt); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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(--antracyt);
  background-image: linear-gradient(180deg, var(--antracyt-noc) 0%, var(--antracyt) 62%, var(--antracyt-blask) 100%);
}
/* wzdłuż dolnej krawędzi: telefon, pełny odcinek, router, pusty odcinek, świat; okres 84 px. */
.naglowek__polowa {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--roz-jasny) 0px 8px, transparent 8px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--roz-jasny) 8px 14px, transparent 14px 84px),
    repeating-linear-gradient(90deg, transparent 0 14px, var(--roz-jasny) 14px 20px, transparent 20px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--roz-jasny) 20px 38px, transparent 38px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--roz-jasny) 20px 38px, transparent 38px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--roz-jasny) 20px 21px, transparent 21px 84px),
    repeating-linear-gradient(90deg, transparent 0 37px, var(--roz-jasny) 37px 38px, transparent 38px 84px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--roz-jasny) 38px 52px, transparent 52px 84px);
  background-size: 100% 8px, 100% 2px, 100% 12px, 100% 1px, 100% 1px, 100% 6px, 100% 6px, 100% 14px;
  background-position: 0 3px, 0 6px, 0 1px, 0 4px, 0 9px, 0 4px, 0 4px, 0 0;
  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-antracycie); text-decoration: none; }
/* znak rozpoznawczy: telefon, pełny odcinek, router, pusty odcinek, świat */
.znak__polowa {
  flex: none; width: 40px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%);
  background-size: 8px 8px, 4px 2px, 5px 14px, 12px 1px, 12px 1px, 1px 6px, 1px 6px, 10px 10px;
  background-position: left 0px top 5px, left 8px top 8px, left 12px top 2px, left 17px top 6px, left 17px top 11px, left 17px top 6px, left 28px top 6px, left 29px top 4px;
  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(--roz-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-antracycie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-antracycie); }
/* pozycja bieżąca: pod napisem telefon, pełny odcinek, router, pusty odcinek,
   świat (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-antracycie); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px; inset-inline: .5em;
  height: 9px;
  background-image:
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%);
  background-size: 5px 5px, 3px 1px, 3px 9px, 9px 1px, 9px 1px, 1px 5px, 1px 5px, 7px 7px;
  background-position: left 0px top 2px, left 5px top 4px, left 8px top 0px, left 11px top 2px, left 11px top 6px, left 11px top 2px, left 19px top 2px, left 20px top 1px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — twoja połowa drogi ----------------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--antracyt);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--antracyt);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--antracyt-blask) 0%, rgba(65, 68, 72, 0) 62%),
    linear-gradient(180deg, var(--antracyt) 0%, var(--antracyt-noc) 100%);
}
.hero__polowa {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (telefon, router, pusty odcinek i świat),
     obok kolumny, nie pod nią — szerokość liczona od 1320 do 1920 px.
     ⚠⚠ Obcięcie z prawej zabrałoby świat — pusty odcinek prowadziłby
     donikąd, a treścią jest, że świat JEST, tylko droga do niego pusta. */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--roz-jasny); opacity: .4;
}
.hero__polowa svg { width: 100%; height: 100%; }
/* Scrim gaśnie na 40 procentach szerokości, a rysunek stoi w prawym torze —
   wszystkie stacje zostają czytelne. Telefon z lewej nie może być
   przygaszony: to od niego zaczyna się „pełna” połowa drogi. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(30, 32, 34, .95) 0%, rgba(30, 32, 34, .86) 22%, rgba(30, 32, 34, .1) 40%, rgba(30, 32, 34, 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__polowa {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(30, 32, 34, 0) 0%, rgba(30, 32, 34, 0) 22%, rgba(30, 32, 34, .9) 40%, rgba(30, 32, 34, .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-antracycie); }
/* nad tytułem: telefon, pełny odcinek, router, pusty odcinek, świat —
   największa skala w arkuszu, osiem warstw */
.hero .tytul::before {
  content: ""; display: block;
  width: 11rem; height: 34px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%);
  background-size: 22px 22px, 20px 5px, 12px 34px, 62px 3px, 62px 3px, 3px 12px, 3px 12px, 30px 30px;
  background-position: left 0px top 6px, left 22px top 15px, left 42px top 0px, left 54px top 11px, left 54px top 20px, left 54px top 11px, left 113px top 11px, left 116px top 2px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-antracycie);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-antracycie-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(--roz-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(--antracyt-noc);
  background-image: linear-gradient(180deg, var(--antracyt) 0%, var(--antracyt-noc) 100%);
  color: var(--na-antracycie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--roz-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-antracycie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-antracycie); }
/* ⚠⚠ 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-antracycie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-antracycie-cichy); border-inline-start-color: var(--roz-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--roz-jasny); text-decoration-color: var(--roz-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-antracycie); }

/* --- 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 telefonem, odcinkami, routerem i światem. 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: 1rem;
  background-image:
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%);
  background-size: 5px 5px, 3px 1px, 3px 9px, 9px 1px, 9px 1px, 1px 5px, 1px 5px, 7px 7px;
  background-position: left 0px bottom 2px, left 5px bottom 4px, left 8px bottom 0px, left 11px bottom 6px, left 11px bottom 2px, left 11px bottom 2px, left 19px bottom 2px, left 20px bottom 1px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .72rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--roz-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--roz-jasny);
  background-image:
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%);
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 400;
  font-size: clamp(1.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(--roz-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--roz-pismo);
  text-decoration-line: underline; text-decoration-color: var(--roz-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: każdy krok jest
   odcinkiem drogi, który trzeba sprawdzić, zanim uzna się go za pełny.
   WYLICZENIE to rzeczy do sprawdzenia — cała droga w miniaturze: pozycja
   wykazu to jedno pytanie „która połowa drogi?”.
   ⚠ 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(--roz-pismo);
  border: 2px solid var(--roz-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(--roz-jasny); border-color: var(--roz-jasny); }

.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: telefon, pełny odcinek, router, pusty odcinek, świat.
   ⚠ OSIEM warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c). */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .55em; inset-inline-start: 0;
  width: 30px; height: 9px;
  background-image:
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%);
  background-size: 5px 5px, 3px 1px, 3px 9px, 9px 1px, 9px 1px, 1px 5px, 1px 5px, 7px 7px;
  background-position: left 0px top 2px, left 5px top 4px, left 8px top 0px, left 11px top 2px, left 11px top 6px, left 11px top 2px, left 19px top 2px, left 20px top 1px;
  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(--roz-jasny); }

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

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

/* --- 11. KARTY KATALOGU — POŁOWA DROGI 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: telefon, pełny odcinek, router, pusty odcinek, świat */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 4.4rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%),
    linear-gradient(90deg, var(--roz-kreska) 0 100%);
  background-size: 8px 8px, 6px 2px, 5px 12px, 22px 2px, 22px 2px, 2px 6px, 2px 6px, 12px 12px;
  background-position: left 0px top 2px, left 8px top 5px, left 14px top 0px, left 19px top 3px, left 19px top 7px, left 19px top 3px, left 39px top 3px, left 41px top 0px;
  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(--roz-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(--roz-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(--roz-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--roz-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(--roz-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--roz-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(--antracyt-noc); color: var(--na-antracycie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--antracyt-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--antracyt-blask) 0%, rgba(65, 68, 72, 0) 64%),
    linear-gradient(180deg, var(--antracyt) 0%, var(--antracyt-noc) 84%);
}
/* ten sam pas co w nagłówku */
.stopka__polowa {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--roz-jasny) 0px 8px, transparent 8px 84px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--roz-jasny) 8px 14px, transparent 14px 84px),
    repeating-linear-gradient(90deg, transparent 0 14px, var(--roz-jasny) 14px 20px, transparent 20px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--roz-jasny) 20px 38px, transparent 38px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--roz-jasny) 20px 38px, transparent 38px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--roz-jasny) 20px 21px, transparent 21px 84px),
    repeating-linear-gradient(90deg, transparent 0 37px, var(--roz-jasny) 37px 38px, transparent 38px 84px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--roz-jasny) 38px 52px, transparent 52px 84px);
  background-size: 100% 8px, 100% 2px, 100% 12px, 100% 1px, 100% 1px, 100% 6px, 100% 6px, 100% 14px;
  background-position: 0 3px, 0 6px, 0 1px, 0 4px, 0 9px, 0 4px, 0 4px, 0 0;
  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-antracycie);
}
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 22px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%),
    linear-gradient(90deg, var(--roz-jasny) 0 100%);
  background-size: 14px 14px, 10px 3px, 8px 22px, 26px 2px, 26px 2px, 2px 8px, 2px 8px, 20px 20px;
  background-position: left 0px top 4px, left 14px top 10px, left 24px top 0px, left 32px top 7px, left 32px top 13px, left 32px top 7px, left 56px top 7px, left 58px top 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-antracycie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--roz-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — POŁOWA DROGI 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: telefon u góry, pełny odcinek, router, pusty odcinek, świat u dołu */
  .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(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%),
      linear-gradient(90deg, var(--roz-kreska) 0 100%);
    background-size: 12px 12px, 3px 10px, 22px 8px, 2px 34px, 2px 34px, 8px 2px, 8px 2px, 18px 18px;
    background-position: left 6px top 0px, left 11px top 12px, left 1px top 22px, left 8px top 30px, left 14px top 30px, left 8px top 30px, left 8px top 62px, left 3px top 64px;
    background-repeat: no-repeat;
    opacity: .6;
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 0 100%),
      linear-gradient(90deg, var(--roz-jasny) 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__polowa, .hero__plyta, .hero__polowa,
  .hero__scrim, .stopka__plyta, .stopka__polowa { 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; }
}