/* =====================================================================
   telefonia5g.pl — MAKIETA PREMIUM
   „ZGODNOŚĆ JEST ILOCZYNEM — JEDEN PUSTY CZYNNIK ZERUJE WYNIK”
   ---------------------------------------------------------------------
   Teza serwisu, jego własnymi słowami: h2 „**Zgodność jest iloczynem, nie
   cechą pudełka**”; „**Pasma są konieczne, lecz niewystarczające**”;
   „**Obsługa częstotliwości nie dodaje jednak profilu IMS, certyfikacji
   operatora ani funkcji fallback**”; h1 „**Ikona 5G nie mówi jeszcze,
   którędy płynie głos**”.

   Rysunek (zmierzony): pięć równych pól (czynniki) — cztery pełne, jeden
   pusty obrys (nie ostatni); po przerwie większy pusty obrys (wynik):
   iloczyn z jednym zerem jest zerem.

   ⚠⚠ CZYNNIKI RÓWNE; WYNIK WIĘKSZY I PUSTY; bez znaku mnożenia. W ozdobnikach
   trzy czynniki (dwa pełne, jeden pusty) i pusty wynik.

   ⚠⚠ CZEGO TU NIE MA — I DLACZEGO:
   * ŻADNYCH PAR — darmowe-rozmowy (kompletność funkcji vs iloczyn);
     ŻADNYCH TRZECH STANÓW — premium.olsztyn (pustka = niesprawdzone vs
     pustka = brak czynnika ze skutkiem); ŻADNEGO REZULTATU NA POCZĄTKU —
     konferencjevideo (tu wynik OSTATNI i pusty); ŻADNEJ MACIERZY —
     fritzboxfon (odwrotność: jedno puste rządzi).
   * ŻADNEJ IKONY 5G, KRESEK ZASIĘGU, ANTENY, SŁUCHAWKI, PTASZKA, ZNAKU
     MNOŻENIA, CZERWIENI — zakazy rodziny TELEFON; bez cyfr i liter.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: lawenda szara #E4E1EA — sąsiedzi: popiół fiołkowy
   #E9E5EE (PV), lawenda blada nonoh.com.pl #EEEBF4; ciemniejsza i szarsza.
   Szmaragd #1E5C4C — najbliższy sąsiad: butelkowa centralewirtualne.pl
   #1F5A46 (na kredzie); szmaragd jest bardziej niebieski, płyta inna.
   **Szmaragd na lawendzie szarej** to para, której w serii nie ma.

   ⚠ NOTO SERIF ma wagi 400 i 700 — waga 500 szkieletu idzie na 400.
   ⚠ LATO: waga 600 tekstu spada na 700. ⚠ UBUNTU SANS MONO w wadze 400.

   ⚠ SZKIELET przeniesiony z aquadvantage.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 {
  --lawenda:      #E4E1EA;   /* jasna płyta nagłówka i hero — lawenda szara */
  --lawenda-cien: #D2CEDA;   /* ⚠ najciemniejszy punkt jasnej płyty — pismo liczone TAKŻE tu */
  --papier:      #F5F4F7;
  --karta:       #FFFFFF;
  --noc:         #1C2422;   /* pasmo domykające i stopka — noc szmaragdowa */
  --noc-blask:   #34423E;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1B1A1E;   /* 15.80 / 17.31 / 13.40 na płycie / 11.20 na cieniu */
  --tekst-cichy: #4B4852;   /* 8.16 / 8.94 / 6.92 na płycie / 5.78 na cieniu */
  --na-nocy:     #ECF2EF;   /* 13.97 / 9.28 na blasku */
  --na-nocy-cichy: #B8C8C2;   /* 9.12 / 6.05 na blasku */

  /* szmaragd — TRZY wartości (kanon, punkt 12), policzone skryptem */
  --szmaragd-pismo:  #1E5C4C; /* PISMO — 7.12 / 7.81 / 6.04 na płycie / 5.05 na cieniu */
  --szmaragd-kreska: #2A735E; /* kreski — 5.16 / 5.66 / 4.38 na płycie / 3.66 na cieniu */
  --szmaragd-jasny:  #A6DCCA; /* na ciemnych płytach — 10.35 / 6.87 na blasku */

  --obwodka:       #6C6A72; /* 4.86 / 5.33 / 4.12 na płycie / 3.45 na cieniu */
  --linia-cicha:   #E0DDE5;
  --obwodka-ciemna:#8CA39B; /* 5.91 / 3.92 na blasku */
  /* przyciski: biel na piśmie 7.81, noc na jasnej 10.35 */

  --kroj-naglowek: "Noto Serif", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Lato", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Ubuntu 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: 3px;
  --cien-karta: 0 16px 34px -28px rgba(28, 36, 34, .42);
}

/* --- 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(--szmaragd-jasny); color: var(--noc); }
:focus-visible { outline: 3px solid var(--szmaragd-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--szmaragd-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(--szmaragd-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. LAWENDA I PAPIER ----------------------------------------- */
/* ⚠ Nagłówek i hero są JASNE, więc pismo w nich jest CIEMNE. */
.naglowek, .hero { position: relative; isolation: isolate; color: var(--tekst); }
.naglowek { background: var(--lawenda); }

/* --- 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; }
/* ⚠ KANON 10b: karty biorą szerszą miarę SAME — nie ma opakowania listy. */
.pasmo > .kontener > .zapowiedz    { max-width: var(--kolumna-szeroka); }
.pasmo > .kontener > .lista-wpisow { max-width: var(--kolumna-szeroka); }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek__lawenda {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--lawenda);
  background-image: linear-gradient(180deg, var(--lawenda) 0%, var(--lawenda-cien) 100%);
}
/* wzdłuż dolnej krawędzi: trzy czynniki (jeden pusty) i pusty wynik; okres 84 px.
   ⚠⚠ NAZWA WARSTWY NIE MOŻE BRZMIEĆ `naglowek__pas` — tak nazywa się
   KONTENER nagłówka w HTML generatora (`.kontener.naglowek__pas`); 6.09
   kolizja nazw rozsypała nagłówek (kontener stał się 13-pikselowym paskiem). */
.naglowek__iloczyn {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--szmaragd-kreska) 0px 7px, transparent 7px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--szmaragd-kreska) 10px 17px, transparent 17px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--szmaragd-kreska) 10px 17px, transparent 17px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--szmaragd-kreska) 10px 11px, transparent 11px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, var(--szmaragd-kreska) 16px 17px, transparent 17px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--szmaragd-kreska) 20px 27px, transparent 27px 84px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--szmaragd-kreska) 34px 47px, transparent 47px 84px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--szmaragd-kreska) 34px 47px, transparent 47px 84px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--szmaragd-kreska) 34px 36px, transparent 36px 84px),
    repeating-linear-gradient(90deg, transparent 0 45px, var(--szmaragd-kreska) 45px 47px, transparent 47px 84px);
  background-size: 100% 7px, 100% 1px, 100% 1px, 100% 7px, 100% 7px, 100% 7px, 100% 2px, 100% 2px, 100% 13px, 100% 13px;
  background-position: 0 4px, 0 4px, 0 10px, 0 4px, 0 4px, 0 4px, 0 1px, 0 12px, 0 1px, 0 1px;
  background-repeat: repeat-x;
  opacity: .6;
}
/* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest
   zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__iloczyn`. */
.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.2rem, .9rem + .9vw, 1.9rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--tekst); text-decoration: none; }
/* znak rozpoznawczy: trzy czynniki (jeden pusty) i pusty wynik */
.znak__iloczyn {
  flex: none; width: 40px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 7px 7px, 7px 2px, 7px 2px, 2px 7px, 2px 7px, 7px 7px, 18px 2px, 18px 2px, 2px 18px, 2px 18px;
  background-position: left 0px top 5px, left 10px top 5px, left 10px top 10px, left 10px top 5px, left 15px top 5px, left 20px top 5px, left 31px top 0px, left 31px top 16px, left 31px top 0px, left 47px top 0px;
  background-repeat: no-repeat;
}
.znak__slowo {
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.08rem, .96rem + .46vw, 1.4rem); letter-spacing: -.01em;
}
.znak:hover .znak__slowo { color: var(--szmaragd-pismo); }

.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(--tekst-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .78rem; letter-spacing: -.01em;
}
.menu__link:hover { color: var(--szmaragd-pismo); }
/* pozycja bieżąca: pod napisem trzy czynniki (jeden pusty) i pusty wynik
   (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(--tekst); font-weight: 600; }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 6px;
  inset-inline-start: calc(.5em + 2px); inset-inline-end: calc(.5em + 2px);
  height: 9px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 5px 1px, 5px 1px, 1px 5px, 1px 5px, 5px 5px, 9px 1px, 9px 1px, 1px 9px, 1px 9px;
  background-position: left 0px top 2px, left 7px top 2px, left 7px top 6px, left 7px top 2px, left 11px top 2px, left 14px top 2px, left 23px top 0px, left 23px top 8px, left 23px top 0px, left 31px top 0px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — zgodność jest iloczynem ------------------------------ */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--lawenda);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__lawenda {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--lawenda);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--lawenda-cien) 0%, rgba(210, 206, 218, 0) 66%),
    linear-gradient(170deg, var(--lawenda) 0%, var(--lawenda-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__iloczyn {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie czynniki i wynik), obok
     kolumny (1320–1920 px), nie pod nią.
     ⚠⚠ Obcięcie z prawej zabrałoby wynik — a bez wyniku pusty czynnik jest
     tylko pustym polem, nie zerem iloczynu. Kadr ciasny (3,3 ≥ 2,0). */
  inset-block-start: 54%; inset-inline-end: 2%;
  width: clamp(26rem, 30vw, 38rem); aspect-ratio: 430 / 130;
  transform: translateY(-50%);
  color: var(--szmaragd-pismo); opacity: .38;
}
.hero__iloczyn svg { width: 100%; height: 100%; }
/* zanik od lewej — w jasnym rejestrze warstwa jest JASNA. Rysunek stoi
   po prawej w całości, więc zanik chroni tylko kolumnę tekstu. */
.hero__zanik {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    var(--lawenda) 0%, rgba(228, 225, 234, .94) 30%, rgba(228, 225, 234, .2) 50%, rgba(228, 225, 234, 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 zanik zaczyna się
   dopiero pod nim — z boku wchodziłby pod akapit. */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__iloczyn {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(228, 225, 234, 0) 0%, rgba(228, 225, 234, 0) 22%, rgba(228, 225, 234, .9) 40%, rgba(228, 225, 234, .9) 100%);
  }
}

/* ⚠ Tu barwa tytułu jest ta sama w hero i poza nim, bo hero JEST jasne —
   ale reguła zostaje jawna, żeby specimen.html też był poprawny
   (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: -.018em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--tekst); }
/* nad tytułem: trzy czynniki (jeden pusty) i pusty wynik — największa
   skala w arkuszu, dziesięć 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(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 22px 22px, 22px 3px, 22px 3px, 3px 22px, 3px 22px, 22px 22px, 34px 3px, 34px 3px, 3px 34px, 3px 34px;
  background-position: left 0px top 6px, left 30px top 6px, left 30px top 25px, left 30px top 6px, left 49px top 6px, left 60px top 6px, left 104px top 0px, left 104px top 31px, left 104px top 0px, left 135px top 0px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--tekst);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--tekst-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(--szmaragd-pismo); }

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

/* --- 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.4rem, 1.1rem + 1.08vw, 2.16rem);
  line-height: 1.2; letter-spacing: -.016em;
  color: var(--tekst); text-wrap: balance;
}
/* numer sekcji STOI NAD trzema czynnikami (jeden pusty) i pustym wynikiem.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 12 px), więc przesunięcia
   ozdobnika w px, składnią `left … bottom …`. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`: inline stawał w jednym wierszu
     z pierwszym słowem tytułu (zmierzone 6.09). */
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 4.2rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 12px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 5px 1px, 5px 1px, 1px 5px, 1px 5px, 5px 5px, 9px 1px, 9px 1px, 1px 9px, 1px 9px;
  background-position: left 0px bottom 2px, left 7px bottom 2px, left 7px bottom 6px, left 7px bottom 2px, left 11px bottom 2px, left 14px bottom 2px, left 23px bottom 0px, left 23px bottom 8px, left 23px bottom 0px, left 31px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .76rem; letter-spacing: -.01em;
  color: var(--szmaragd-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--szmaragd-jasny);
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-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.08rem, .98rem + .4vw, 1.32rem); line-height: 1.34; 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(--szmaragd-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--szmaragd-pismo);
  text-decoration-line: underline; text-decoration-color: var(--szmaragd-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
   czynnikiem pełnym.
   WYLICZENIE to rzeczy do sprawdzenia — trzy czynniki i pusty wynik:
   pozycja wykazu to jeden czynnik iloczynu.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   ⚠ Pismo w pudełku to --karta na --szmaragd-pismo; na ciemnym paśmie
   pudełko odwraca się na --szmaragd-jasny z pismem --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
   element `<a>`, nie `<li>`, więc padding listy go NIE ratuje. Zmierzone
   4.09→5.09 na tej domenie: `<a>` „Czy ten dokument trzeba drukować?”
   259 × 20 px przy progu 44.
   ⚠ `display: inline-block`, NIE `inline-flex`: flex nie zawija tekstu,
   więc długi tytuł wyszedłby za krawędź i zapalił B5 (brak przewijania
   w poziomie 360–1920). */
.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: .5em;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 1.7rem; padding-inline: .4rem;
  background: var(--szmaragd-pismo); color: var(--karta);
  font-family: var(--kroj-maszyna); font-weight: 400; font-size: .74rem;
}
.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(--szmaragd-jasny); color: var(--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: trzy czynniki (jeden pusty) i pusty wynik.
   ⚠ Dziesięć warstw; wariant ciemny i druk MUSZĄ mieć tyle samo (kanon 13c).
   ⚠ Wariantów `nth-child` tu NIE MA — pozycje wykazu są równorzędne. */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 28px; height: 10px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 5px 5px, 5px 1px, 5px 1px, 1px 5px, 1px 5px, 5px 5px, 10px 1px, 10px 1px, 1px 10px, 1px 10px;
  background-position: left 0px top 2px, left 7px top 2px, left 7px top 6px, left 7px top 2px, left 11px top 2px, left 14px top 2px, left 23px top 0px, left 23px top 9px, left 23px top 0px, left 32px top 0px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
}

/* ⚠⚠ KANON 9c: odsyłacz w wykazie nie jest objęty regułami prozy (te celują
   w `<a>` wewnątrz `<p>`), więc bez własnej reguły dostaje DOMYŚLNY BŁĘKIT
   przeglądarki. Tutaj hero jest JASNE, więc bramka B6 by przeszła — ale to
   i tak barwa spoza projektu, a ten serwis MA w hero spis treści
   („Wybierz pytanie, które blokuje decyzję”), więc reguła jest konieczna. */
.tresc .wyliczenie li a:not(.przycisk),
.tresc .kroki li a:not(.przycisk) {
  color: var(--szmaragd-pismo);
  text-decoration-line: underline; text-decoration-color: var(--szmaragd-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; }
/* w ciemnym paśmie domykającym — barwa jasna */
.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(--szmaragd-jasny); text-decoration-color: var(--szmaragd-jasny);
}

.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(--szmaragd-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(236, 242, 239, .07);
  color: var(--na-nocy-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--szmaragd-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(--noc); border-color: var(--noc); color: var(--na-nocy); }
.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(--szmaragd-jasny); color: var(--na-nocy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--szmaragd-jasny); border-color: var(--szmaragd-jasny); color: var(--noc); }

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

/* --- 11. KARTY KATALOGU — CZYNNIKI I WYNIK 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: trzy czynniki (jeden pusty) i pusty wynik */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 3.4rem; height: 12px;
  background-image:
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
    linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
  background-size: 7px 7px, 7px 2px, 7px 2px, 2px 7px, 2px 7px, 7px 7px, 12px 2px, 12px 2px, 2px 12px, 2px 12px;
  background-position: left 0px top 2px, left 10px top 2px, left 10px top 7px, left 10px top 2px, left 15px top 2px, left 20px top 2px, left 33px top 0px, left 33px top 10px, left 33px top 0px, left 43px 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: .74rem; color: var(--szmaragd-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z OZDOBNIKIEM NUMERU (background, min-width, height,
   padding, display: inline-flex). */
.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.06rem, .98rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -.012em;
  color: var(--tekst);
}
.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(--szmaragd-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(--szmaragd-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--szmaragd-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--szmaragd-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--szmaragd-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(--noc); color: var(--na-nocy);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--noc-blask) 0%, rgba(52, 66, 62, 0) 64%),
    linear-gradient(180deg, var(--noc-blask) 0%, var(--noc) 58%);
}
/* ten sam pas co w nagłówku */
.stopka__iloczyn {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 15px;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 0px, var(--szmaragd-jasny) 0px 7px, transparent 7px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--szmaragd-jasny) 10px 17px, transparent 17px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--szmaragd-jasny) 10px 17px, transparent 17px 84px),
    repeating-linear-gradient(90deg, transparent 0 10px, var(--szmaragd-jasny) 10px 11px, transparent 11px 84px),
    repeating-linear-gradient(90deg, transparent 0 16px, var(--szmaragd-jasny) 16px 17px, transparent 17px 84px),
    repeating-linear-gradient(90deg, transparent 0 20px, var(--szmaragd-jasny) 20px 27px, transparent 27px 84px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--szmaragd-jasny) 34px 47px, transparent 47px 84px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--szmaragd-jasny) 34px 47px, transparent 47px 84px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--szmaragd-jasny) 34px 36px, transparent 36px 84px),
    repeating-linear-gradient(90deg, transparent 0 45px, var(--szmaragd-jasny) 45px 47px, transparent 47px 84px);
  background-size: 100% 7px, 100% 1px, 100% 1px, 100% 7px, 100% 7px, 100% 7px, 100% 2px, 100% 2px, 100% 13px, 100% 13px;
  background-position: 0 4px, 0 4px, 0 10px, 0 4px, 0 4px, 0 4px, 0 1px, 0 12px, 0 1px, 0 1px;
  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.04rem, .96rem + .4vw, 1.3rem); color: var(--na-nocy);
}
/* pod znakiem stopki: trzy czynniki (jeden pusty) i pusty wynik */
.stopka__znak::after {
  content: ""; display: block; width: 5rem; height: 22px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
    linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
  background-size: 12px 12px, 12px 2px, 12px 2px, 2px 12px, 2px 12px, 12px 12px, 22px 2px, 22px 2px, 2px 22px, 2px 22px;
  background-position: left 0px top 5px, left 16px top 5px, left 16px top 15px, left 16px top 5px, left 26px top 5px, left 32px top 5px, left 54px top 0px, left 54px top 20px, left 54px top 0px, left 74px top 0px;

  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-nocy-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--szmaragd-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — CZYNNIKI I WYNIK 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;
  }
  .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; }
  /* ⚠ KANON 10b: karty biorą szerszy tor SAME, bo nie ma opakowania listy. */
  .pasmo > .kontener > .zapowiedz    { grid-column: proza-start / pelna-end; max-width: none; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* pionowo: trzy czynniki jeden pod drugim (środkowy pusty), pusty wynik niżej */
  .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(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%),
      linear-gradient(90deg, var(--szmaragd-kreska) 0 100%);
    background-size: 8px 8px, 8px 2px, 8px 2px, 2px 8px, 2px 8px, 8px 8px, 18px 2px, 18px 2px, 2px 18px, 2px 18px;
    background-position: left 5px top 0px, left 5px top 12px, left 5px top 18px, left 5px top 12px, left 11px top 12px, left 5px top 24px, left 0px top 40px, left 0px top 56px, left 0px top 40px, left 16px top 40px;
    background-repeat: no-repeat;
    opacity: .45;
    -webkit-mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0 58%, transparent 100%);
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%),
      linear-gradient(90deg, var(--szmaragd-jasny) 0 100%);
    opacity: .55;
  }
}

/* --- 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: .78rem; 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__lawenda, .naglowek__iloczyn, .hero__lawenda, .hero__iloczyn,
  .hero__zanik, .stopka__plyta, .stopka__iloczyn { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even),
  .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; }
  .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak,
  .hero p, .stopka__menu a, .menu__link { color: #000 !important; }
  .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; }
  .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; }
  .tresc .kroki li::before { background: none !important; color: #000 !important; border-color: #000 !important; }
  .tresc .wyliczenie li::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .zapowiedz::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .stopka__znak::after {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !important;
  }
  .pasmo > .kontener > h2::before {
    background-image:
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%),
      linear-gradient(90deg, #000 0 100%) !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; }
}