/* =====================================================================
   audytorenergetyczny.com — MAKIETA PREMIUM „CZTERY JEDNAKOWE OKŁADKI,
   CZTERY RÓŻNE WNĘTRZA”
   ---------------------------------------------------------------------
   Teza serwisu: „Najpierw nazwij dokument, dopiero potem szukaj jego
   autora”; „Cztery dokumenty odpowiadają na cztery różne pytania”;
   „podobne słowa nie tworzą zamiennych dokumentów”.

   Rysunek (zmierzony): cztery okładki 200 × 270, kreska 9, odstęp 80 —
   IDENTYCZNE, w każdej ten sam pełny pasek tytułu 96 × 16. W środku CZTERY
   RÓŻNE budowy: pełna kolumna, cztery wiersze, puste koło, przekątna
   z punktem. Zewnętrze celowo takie samo; różnica jest w środku.

   ⚠⚠ OKŁADKI MUSZĄ BYĆ IDENTYCZNE — różne kształty zewnętrzne to teza
   podpiselektroniczny.warszawa.pl („cztery nieporównywalne figury”); tu
   jest odwrotnie: „podobne słowa”, inne wnętrze.
   ⚠⚠ ŻADNEGO DRZEWA DECYZJI, choć podstrona-1 tak się nazywa — drzewo
   należy do bizneswanglii.pl. ŻADNEJ KARTY PÓL / MATRYCY (otoszablony.pl,
   dobrykandydat.pl) — dlatego wnętrze nr 3 jest kołem, nie siatką.
   ⚠⚠ ŻADNEJ PIECZĘCI, PODPISU, LUPY, ŻARÓWKI, DOMU, TERMOMETRU.
   ⚠ Bez liter i cyfr — pasek tytułu jest pełnym prostokątem, nie napisem.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: seledyn #8FE0C5 to nowy akcent serii; najbliżej mu
   do zieleni szałwiowej podpiskwalifikowany.warszawa.pl (przygaszona, na
   śliwce szarej). Fiolet nocny nie sąsiaduje z żadną płytą serii.

   ⚠ OXYGEN MONO ma jedną wagę (400) — pismo maszynowe wszędzie 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ę.
   ===================================================================== */

/* ⚠ NAPRAWA 2026-09-06 (Opus 5): `margin-inline: auto` dla .kroki, .wyliczenie i .zrodlo.
   Skrót `margin: … 0 …` w tych trzech regułach (swoistość 0-2-0, PÓŹNIEJ w arkuszu) bił
   `.pasmo > .kontener > * { margin-inline: auto }` i przy 1100–1439 px — czyli na typowym
   ekranie laptopa — listy i ramka źródeł stały 204 px w lewo od kolumny prozy. Powyżej progu
   siatki (1440 px) blok @media i tak ustawia `margin-inline: 0`, więc szerokie ekrany bez zmian.
   Zmierzone sondą narzedzia-fable/sonda-listy-1366.mjs na 78 arkuszach premium. */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  --fiolet:       #221D33;
  --fiolet-noc:   #16122A;
  --fiolet-blask: #38315C;
  --papier:       #F5F4F8;
  --karta:        #FFFFFF;

  --tekst:       #1B1826;   /* 15,91 / 17,42 */
  --tekst-cichy: #514C5E;   /*  7,53 /  8,25 */
  --na-fiolecie: #EBE8F2;   /* 13,44 / 9,85 na blasku */
  --na-fiolecie-cichy: #B6B0CC; /* 7,80 / 5,72 na blasku */

  /* seledyn — TRZY wartości (kanon, punkt 12), policzone */
  --seledyn-pismo:  #1B6653; /* PISMO — 6,24 / 6,84 */
  --seledyn-kreska: #2C8672; /* kreski — 4,03 / 4,41 */
  --seledyn-jasny:  #8FE0C5; /* na płytach — 10,56 / 11,82 / 7,74 na blasku */

  --obwodka:       #7C7A84; /* 3,86 / 4,22 */
  --linia-cicha:   #E2E0E8;
  --obwodka-ciemna:#8E88AE; /* 5,44 na nocy / 3,57 na blasku */

  --kroj-naglowek: "Bricolage Grotesque", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-tekst:    "Wix Madefor Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Oxygen 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(34, 29, 51, .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(--seledyn-jasny); color: var(--fiolet); }
:focus-visible { outline: 3px solid var(--seledyn-pismo); outline-offset: 2px; }
.naglowek :focus-visible, .hero :focus-visible, .stopka :focus-visible { outline-color: var(--seledyn-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(--seledyn-jasny); color: var(--fiolet); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

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

/* --- 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(--fiolet);
  background-image: linear-gradient(180deg, var(--fiolet-noc) 0%, var(--fiolet) 62%, var(--fiolet-blask) 100%);
}
/* wzdłuż dolnej krawędzi: SZEREG JEDNAKOWYCH NAROŻNIKÓW OKŁADEK (górna
   i lewa krawędź) z tym samym paskiem tytułu; okres 36 px */
.naglowek__okladki {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    repeating-linear-gradient(90deg, var(--seledyn-jasny) 0 20px, transparent 20px 36px),
    repeating-linear-gradient(90deg, var(--seledyn-jasny) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(90deg, transparent 0 5px, var(--seledyn-jasny) 5px 14px, transparent 14px 36px);
  background-size: 100% 2px, 100% 13px, 100% 3px;
  background-position: 0 0, 0 0, 0 5px;
  background-repeat: repeat-x;
  opacity: .55;
}
.naglowek__pas {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem clamp(1rem, 3vw, 2.6rem); justify-content: space-between;
  padding-block: clamp(.9rem, .6rem + .8vw, 1.5rem) clamp(1.4rem, 1rem + 1vw, 2.1rem);
}
.znak { display: inline-flex; align-items: center; gap: .7rem; min-height: 46px; color: var(--na-fiolecie); text-decoration: none; }
/* znak rozpoznawczy: DWIE JEDNAKOWE OKŁADKI (narożnik + ten sam pasek),
   inne wnętrze — wiersz w pierwszej, punkt w drugiej */
.znak__okladki {
  flex: none; width: 32px; height: 18px;
  background-image:
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%),
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), radial-gradient(circle, var(--seledyn-jasny) 0 2px, transparent 2.6px);
  background-size: 14px 2px, 2px 18px, 7px 3px, 8px 2px,  14px 2px, 2px 18px, 7px 3px, 5px 5px;
  background-position: 0 0, 0 0, 4px 5px, 4px 12px,  18px 0, 18px 0, 22px 5px, 24px 11px;
  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(--seledyn-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-fiolecie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.008em;
}
.menu__link:hover { color: var(--na-fiolecie); }
/* pozycja bieżąca: pod napisem NAROŻNIK OKŁADKI z paskiem tytułu.
   ⚠⚠ 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-fiolecie); }
.menu__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-block-end: 7px; inset-inline: .5em;
  height: 9px;
  background-image: linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%);
  background-size: 100% 2px, 2px 9px, 40% 3px;
  background-position: 0 0, 0 0, 4px 4px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — cztery jednakowe okładki --------------------------------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--fiolet);
}
.hero__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--fiolet);
  background-image:
    radial-gradient(64% 58% at 16% 4%, var(--fiolet-blask) 0%, rgba(56, 49, 92, 0) 62%),
    linear-gradient(180deg, var(--fiolet) 0%, var(--fiolet-noc) 100%);
}
.hero__okladki {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (wszystkie cztery okładki), obok kolumny,
     nie pod nią — szerokość liczona od 1320 do 1920 px. */
  inset-block-start: 50%; inset-inline-end: 2%;
  width: clamp(26rem, 28vw, 36rem); aspect-ratio: 1200 / 420;
  transform: translateY(-50%);
  color: var(--seledyn-jasny); opacity: .4;
}
.hero__okladki svg { width: 100%; height: 100%; }
/* Scrim kończy się na 40 procentach: rysunek stoi po prawej w całości,
   więc scrim chroni tylko kolumnę tekstu. */
.hero__scrim {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(96deg,
    rgba(22, 18, 42, .95) 0%, rgba(22, 18, 42, .86) 22%, rgba(22, 18, 42, .1) 40%, rgba(22, 18, 42, 0) 100%);
}
.hero__kontener { position: relative; z-index: 3; }
/* ⚠ EKRANY DO 1319 px: rysunek dostaje WŁASNE MIEJSCE nad tytułem (kontener
   dostaje górne dopełnienie równe wysokości rysunku), a scrim zaczyna się
   dopiero pod nim — na 390 px rysunek z boku wchodził pod akapit
   (zmierzone 6.09 na tej domenie, poprawka po zamknięciu). */
@media (max-width: 1319px) {
  .hero__kontener { padding-block-start: clamp(6rem, 26vw, 12rem); }
  .hero__okladki {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .5;
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(22, 18, 42, 0) 0%, rgba(22, 18, 42, 0) 22%, rgba(22, 18, 42, .9) 40%, rgba(22, 18, 42, .9) 100%);
  }
}

/* ⚠ Barwa jasna należy do TYTUŁU W HERO (kanon, punkt 4). */
.tytul {
  margin: 0 0 clamp(.9rem, .6rem + .8vw, 1.5rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2rem, 1.26rem + 2.9vw, 3.8rem);
  line-height: 1.12; letter-spacing: -.01em;
  color: var(--tekst); text-wrap: balance;
}
.hero .tytul { color: var(--na-fiolecie); }
/* nad tytułem: CZTERY MAŁE JEDNAKOWE OKŁADKI (narożnik + ten sam pasek),
   cztery różne wnętrza: kolumna, wiersze, koło, punkt.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 8.4rem; height: 26px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%),
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%),
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), radial-gradient(circle, var(--seledyn-jasny) 0 4px, transparent 4.6px),
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), radial-gradient(circle, var(--seledyn-jasny) 0 2.5px, transparent 3.1px);
  background-size:
    1.6rem 2px, 2px 26px, 12px 3px, 4px 10px,
    1.6rem 2px, 2px 26px, 12px 3px, 14px 2px, 14px 2px,
    1.6rem 2px, 2px 26px, 12px 3px, 10px 10px,
    1.6rem 2px, 2px 26px, 12px 3px, 6px 6px;
  background-position:
    0 0, 0 0, 5px 5px, 9px 13px,
    2.2rem 0, 2.2rem 0, calc(2.2rem + 5px) 5px, calc(2.2rem + 5px) 14px, calc(2.2rem + 5px) 20px,
    4.4rem 0, 4.4rem 0, calc(4.4rem + 5px) 5px, calc(4.4rem + 6px) 13px,
    6.6rem 0, 6.6rem 0, calc(6.6rem + 5px) 5px, calc(6.6rem + 8px) 15px;
  background-repeat: no-repeat;
}
.hero .wprowadzenie {
  margin: 0 0 1.1rem; color: var(--na-fiolecie);
  font-size: clamp(1.04rem, .98rem + .34vw, 1.26rem); line-height: 1.64;
}
.hero p { color: var(--na-fiolecie-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(--seledyn-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(--fiolet-noc);
  background-image: linear-gradient(180deg, var(--fiolet) 0%, var(--fiolet-noc) 100%);
  color: var(--na-fiolecie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--seledyn-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-fiolecie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-fiolecie); }
/* ⚠⚠ 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-fiolecie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-fiolecie-cichy); border-inline-start-color: var(--seledyn-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--seledyn-jasny); text-decoration-color: var(--seledyn-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-fiolecie); }

/* --- 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 W NAROŻNIKU OKŁADKI — górna i lewa krawędź; numer jest
   „paskiem tytułu”. ⚠ Reset tytułu karty (kanon 6) zdejmuje border. */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  display: block; width: max-content; margin-block-end: .7rem;
  padding: .35rem .7rem .15rem .5rem;
  border: 0; border-block-start: 3px solid var(--seledyn-kreska); border-inline-start: 3px solid var(--seledyn-kreska);
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .72rem; letter-spacing: -.01em; line-height: 1.5;
  color: var(--seledyn-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--seledyn-jasny); border-color: var(--seledyn-jasny);
}
.tresc h3 {
  margin: clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem) 0 .5rem;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.06rem, .96rem + .4vw, 1.3rem); line-height: 1.36; color: var(--tekst);
}
.tresc p { margin: 0 0 1.1em; }
.tresc p:last-child { margin-block-end: 0; }
.wprowadzenie { font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem); line-height: 1.66; }
.zajawka {
  margin: 0 0 1.3em; padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--seledyn-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--seledyn-pismo);
  text-decoration-line: underline; text-decoration-color: var(--seledyn-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 odbioru po kolei — numer W NAROŻNIKU OKŁADKI
   (każdy krok jest osobnym dokumentem odbioru).
   WYLICZENIE to rzeczy do sprawdzenia — narożnik z tym samym paskiem,
   a wnętrze inne co pozycję (kolumna, wiersz, punkt): to samo z zewnątrz,
   inne w środku.
   ⚠ To rozróżnienie jest treścią serwisu, nie dekoracją.
   -------------------------------------------------------------------- */
.tresc .kroki { margin: .4em auto 1.4em; padding: 0; list-style: none; counter-reset: krok; }
.tresc .kroki li {
  counter-increment: krok; position: relative; padding: .7em 0 .7em 3.2rem;
  border-block-end: 1px solid var(--linia-cicha);
}
/* ⚠ Kreskę zdejmujemy ostatniej pozycji W UKŁADZIE; wykaz jednoszpaltowy (P-2). */
.tresc .kroki li:last-child { border-block-end: 0; }
/* ⚠⚠ KANON 9b: odsyłacz WEWNĄTRZ `.kroki` jest celem UI — B7 mierzy sam
   `<a>`, nie `<li>` (zmierzone na pap2.pl: 259 × 20 px przy progu 44).
   ⚠ `inline-block`, NIE `inline-flex`: flex nie zawija tekstu → B5. */
.tresc .kroki li > a { display: inline-block; min-height: 44px; padding-block: .7rem; }
.tresc .kroki li::before {
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .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(--seledyn-pismo);
  border: 0; border-block-start: 2px solid var(--seledyn-kreska); border-inline-start: 2px solid var(--seledyn-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(--seledyn-jasny); border-color: var(--seledyn-jasny); }

.tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 1.9rem; }
/* znacznik: NAROŻNIK OKŁADKI z paskiem, wnętrze inne co pozycję */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 18px; height: 15px;
  background-image: linear-gradient(90deg, var(--seledyn-kreska) 0 100%), linear-gradient(90deg, var(--seledyn-kreska) 0 100%), linear-gradient(90deg, var(--seledyn-kreska) 0 100%), linear-gradient(90deg, var(--seledyn-kreska) 0 100%);
  background-size: 18px 2px, 2px 15px, 8px 3px, 3px 6px;
  background-position: 0 0, 0 0, 4px 4px, 7px 9px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before { background-size: 18px 2px, 2px 15px, 8px 3px, 9px 2px; background-position: 0 0, 0 0, 4px 4px, 4px 11px; }
.tresc .wyliczenie li:nth-child(3n)::before   { background-size: 18px 2px, 2px 15px, 8px 3px, 4px 4px; background-position: 0 0, 0 0, 4px 4px, 11px 10px; }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before,
.tresc .hero .wyliczenie li::before { border-color: var(--seledyn-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(--seledyn-pismo);
  text-decoration-line: underline; text-decoration-color: var(--seledyn-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(--seledyn-jasny); text-decoration-color: var(--seledyn-jasny);
}
.tresc .hero .wyliczenie li a:not(.przycisk):hover,
.tresc .hero .kroki li a:not(.przycisk):hover { color: var(--na-fiolecie); }
/* ⚠ Znacznik wykazu w hero i w ciemnym paśmie: --seledyn-kreska na blasku
   #38315C nie sięga progu 3:1 dla kresek. Na ciemnym idzie --seledyn-jasny
   (7,74 na blasku). */
.tresc .hero .wyliczenie li::before,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image: linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%);
}

.tresc .zrodlo {
  margin: 1.6em auto 0; padding: clamp(.9rem, .7rem + .6vw, 1.3rem);
  background: var(--karta); border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--seledyn-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(235, 232, 242, .07);
  color: var(--na-fiolecie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--seledyn-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(--fiolet); border-color: var(--fiolet); color: var(--na-fiolecie); }
.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(--seledyn-jasny); color: var(--na-fiolecie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--seledyn-jasny); border-color: var(--seledyn-jasny); color: var(--fiolet); }

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

/* --- 11. KARTY KATALOGU — NAROŻNIK OKŁADKI 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: narożnik okładki z paskiem tytułu */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 4rem; height: 14px;
  background-image: linear-gradient(90deg, var(--seledyn-kreska) 0 100%), linear-gradient(90deg, var(--seledyn-kreska) 0 100%), linear-gradient(90deg, var(--seledyn-kreska) 0 100%);
  background-size: 100% 3px, 3px 14px, 1.6rem 4px;
  background-position: 0 0, 0 0, 7px 6px;
  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(--seledyn-pismo);
}
/* ⚠⚠ KANON 6: tytuł karty JEST h2 — cofamy reguły „.tresc h2” tym samym
   prefiksem, RAZEM Z RAMKĄ NUMERU (border, border-inline-end: 0, min-width,
   height, display: inline-flex, padding-inline). */
.tresc .zapowiedz__tytul {
  margin: .3rem 2.4rem .5rem 0; padding: 0; border: 0;
  width: auto; min-width: 0; height: auto; background: none; max-width: none; display: block;
  font-family: var(--kroj-naglowek); font-weight: 500;
  font-size: clamp(1.04rem, .96rem + .4vw, 1.28rem); line-height: 1.32; letter-spacing: -.006em;
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
/* ⚠ „.tresc li a” (0-1-2) bije „.zapowiedz__tytul a” (0-1-1). */
.tresc .zapowiedz__tytul a { display: block; min-height: 44px; color: var(--tekst); text-decoration: none; }
.tresc .zapowiedz__tytul a:hover { color: var(--seledyn-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(--seledyn-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--seledyn-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(--seledyn-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--seledyn-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(--fiolet-noc); color: var(--na-fiolecie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--fiolet-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--fiolet-blask) 0%, rgba(56, 49, 92, 0) 64%),
    linear-gradient(180deg, var(--fiolet) 0%, var(--fiolet-noc) 84%);
}
.stopka__okladki {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    repeating-linear-gradient(90deg, var(--seledyn-jasny) 0 20px, transparent 20px 36px),
    repeating-linear-gradient(90deg, var(--seledyn-jasny) 0 2px, transparent 2px 36px),
    repeating-linear-gradient(90deg, transparent 0 5px, var(--seledyn-jasny) 5px 14px, transparent 14px 36px);
  background-size: 100% 2px, 100% 13px, 100% 3px;
  background-position: 0 0, 0 0, 0 5px;
  background-repeat: repeat-x;
  opacity: .55;
}
.stopka .kontener { position: relative; z-index: 2; }
.stopka__znak {
  margin: 0 0 .9rem; font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .94rem + .4vw, 1.28rem); color: var(--na-fiolecie);
}
/* pod znakiem stopki: dwie jednakowe okładki, inne wnętrza */
.stopka__znak::after {
  content: ""; display: block; width: 4.4rem; height: 18px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%),
    linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%), radial-gradient(circle, var(--seledyn-jasny) 0 2.5px, transparent 3.1px);
  background-size: 1.8rem 2px, 2px 18px, 12px 3px, 12px 2px,  1.8rem 2px, 2px 18px, 12px 3px, 6px 6px;
  background-position: 0 0, 0 0, 5px 5px, 5px 12px,  2.4rem 0, 2.4rem 0, calc(2.4rem + 5px) 5px, calc(2.4rem + 8px) 10px;
  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-fiolecie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .74rem; letter-spacing: -.008em;
}
.stopka__menu a:hover { color: var(--seledyn-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — WYSOKA OKŁADKA 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;
  }
  /* numer w narożniku stoi do prawej, bo nagłówek stoi do prawej */
  .pasmo > .kontener > h2::before { margin-inline-start: auto; }
  .pasmo > .kontener > h2 + * { margin-block-start: 0; }
  /* ⚠⚠ KANON 8 (P-17) */
  .pasmo > .kontener > h3 { margin-block: clamp(1.9rem, 1.2rem + 1.4vw, 2.7rem) 0; }
  .pasmo > .kontener > h3 + * { margin-block-start: .5rem; }
  .pasmo > .kontener > .lista-wpisow { grid-column: proza-start / pelna-end; max-width: none; }
  .hero__kontener > .tytul { grid-column: proza; }

  /* WYSOKA OKŁADKA: narożnik (górna i lewa krawędź), pasek tytułu, pod nim
     wiersze wnętrza co 14 px */
  .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(--seledyn-kreska) 0 100%), linear-gradient(180deg, var(--seledyn-kreska) 0 100%), linear-gradient(90deg, var(--seledyn-kreska) 0 100%),
      repeating-linear-gradient(180deg, var(--seledyn-kreska) 0 2px, transparent 2px 14px);
    background-size: 100% 3px, 3px 100%, 60% 5px, 55% 40%;
    background-position: 0 0, 0 0, 7px 8px, 7px 22px;
    background-repeat: no-repeat;
    opacity: .45;
  }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--seledyn-jasny) 0 100%), linear-gradient(180deg, var(--seledyn-jasny) 0 100%), linear-gradient(90deg, var(--seledyn-jasny) 0 100%),
      repeating-linear-gradient(180deg, var(--seledyn-jasny) 0 2px, transparent 2px 14px);
    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: .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__okladki, .hero__plyta, .hero__okladki,
  .hero__scrim, .stopka__plyta, .stopka__okladki { display: none !important; }
  html { font-size: 11pt; }
  body, .naglowek, .hero, .stopka, .pasmo, .pasmo:nth-of-type(even),
  .pasmo:last-of-type:not(:nth-of-type(1)) { background: #fff !important; color: #000 !important; }
  .tytul, .hero .tytul, .tresc h2, .tresc h3, .znak__slowo, .stopka__znak,
  .hero p, .stopka__menu a, .menu__link { color: #000 !important; }
  .tresc .hero p:not(.przejscie) a:not(.przycisk) { color: #000 !important; }
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h3,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka,
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo { color: #000 !important; border-inline-start-color: #000 !important; }
  .pasmo > .kontener > h2::before { color: #000 !important; border-color: #000 !important; }
  .tresc .wyliczenie li::before, .tresc .hero .wyliczenie li::before {
    background-image: linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%), linear-gradient(90deg, #000 0 100%) !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; }
}