/* =====================================================================
   mojprad.ketrzyn.pl — MAKIETA PREMIUM „CZTERY STATUSY, ZANIM OTWORZYSZ
   JEDEN FORMULARZ”
   ---------------------------------------------------------------------
   Teza serwisu: h1 „CZTERY STATUSY PROSUMENTA, ZANIM OTWORZYSZ JEDEN
   FORMULARZ” — status naboru, istniejącego wniosku MP6, innego programu
   (magazyny — „NIE BYŁO MP7”), przyłączenia u OSD; h2 „NAZWIJ FAKT, KTÓRY
   POTWIERDZA PLIK”; podstrona-1 „RADAR źródła i ogłoszenia”; wpis-2
   „OSD to nie sprzedawca”.

   Rysunek (zmierzony): po lewej CZTERY osobne statusy — pełny kwadrat
   46 px i odchodząca od niego kreska ZAPISU 10 px o INNEJ długości
   (300/180/420/240 — każdy status ma inną odpowiedź), jeden pod drugim
   co 90 px; po prawej, za pustą strefą ≥ 176 px, JEDEN pełny formularz —
   stojąca płyta 220×308. Żadna kreska nie dosięga płyty.

   ⚠⚠ CZTERY NIEZALEŻNE ODCZYTY, POTEM JEDEN FORMULARZ — to jest cała
   treść: statusy sprawdza się PRZED formularzem, nie w nim; odpowiedzi
   są różne, więc kreski są różne.
   ⚠⚠ ŻADNYCH CZTERECH RAM (pomowienia.pl — tu pełne kwadraty, nie ramy,
   i żadna ścieżka nie wchodzi do żadnego), ŻADNEGO PUSTEGO POLA NAD
   WYPEŁNIONYMI (darmowycertyfikat.pl — nic tu nie jest puste), ŻADNEJ
   ŚCIEŻKI PIĘCIU SPRAWDZEŃ Z MAŁYM GESTEM (dobrypodpis.pl — tu odczyty są
   małe, a formularz duży, i nie ma toru), ŻADNEJ MATRYCY (dobrykandydat.pl),
   ŻADNEJ TECZKI Z PRZEGRÓDKAMI (mojecieplo.olsztyn.pl — choć h2 mówi
   „jeden segregator, cztery przegródki”), ŻADNEGO RADARU Z PIERŚCIENIAMI
   (aptekanatelefon.pl — choć podstrona-1 mówi „radar”).
   ⚠ Żadnego panelu PV, licznika, wtyczki, domu. Bez liter i cyfr.
   Pełny zapis: PROJEKT-PREMIUM.md.

   ⚠ UCZCIWIE O BARWIE: musztarda to ciemna żółć — sąsiad w rodzinie:
   bursztyn mazur (#7A5000, pomarańczowy, na mgle jeziornej) i oliwka warmii
   (#4F5A1E, zielona). Gołębi jest NAJCIEMNIEJSZĄ jasną płytą rodziny
   (#D9DCE2 — stal jasna wolomina #DEE3E8 jest jaśniejsza i bardziej
   niebieska); różnicę robi jasność płyty i żółty akcent na chłodnej szarości.
   Kasztan sąsiaduje z brązem kominowym gminy (#241C18) — jest jaśniejszy
   i czerwieńszy.
   ⚠ SONO (400, oś MONO domyślnie 1) powtórzone po podpiselektroniczny.info.pl
   — pula nieużytych mono z latin-ext wyczerpana (sprawdzone 6.09: Fragment,
   Spline Sans, Kode, Sometype, Reddit, Victor, Cousine, Courier Prime, PT,
   Anonymous Pro — bez latin-ext albo użyte); plan dopuszcza powtórki.

   ⚠ SZKIELET przeniesiony z cieplemieszkanie.gmina.pl (jasna płyta, karty
   `lista-wpisow`, blok do 1319 px); ozdobniki, tokeny i kroje 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. Seria ST-CBF.
   ⚠ KANON 2b (`.zrodlo` w wpis-2), 9b i 9c (`wyliczenie` w blog, podstrona-1,
   wpis-2); ozdobniki na jasnej płycie biorą `--musztarda-kreska`;
   kotwiczone do dołu; pozycje czterowartościowe; pas repeat-x: warstwy
   o szerokości okresu z twardymi przejściami.
   ⚠ Rodzina DOTACJE (RODZINA-DOTACJE.md).
   ===================================================================== */

/* ⚠ 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 {
  --golebi:       #D9DCE2;   /* jasna płyta nagłówka i hero — szary gołębi */
  --golebi-cien:  #CBD0D8;
  --papier:       #EEF0F3;
  --karta:        #FFFFFF;
  --kasztan-noc:  #33231C;   /* pasmo domykające i stopka — kasztan */
  --kasztan-blask:#52403A;   /* ⚠ najjaśniejszy punkt ciemnej płyty */

  --tekst:       #1B1D22;   /* 12,27 / 10,88 na cieniu / 14,77 / 16,86 */
  --tekst-cichy: #4A4F58;   /*  5,99 / 5,31 na cieniu / 7,21 */
  --na-kasztanie:       #F1ECE6; /* 12,79 / 8,30 na blasku */
  --na-kasztanie-cichy: #C7B9AE; /*  7,85 / 5,10 na blasku */

  /* musztarda — TRZY wartości (kanon, punkt 12), policzone */
  --musztarda-pismo:  #665300; /* PISMO — 5,45 / 4,84 na cieniu / 6,56 / 7,49 */
  --musztarda-kreska: #7A6600; /* kreski — 4,10 / 3,64 na cieniu / 4,93 */
  --musztarda-jasny:  #F0D874; /* na ciemnych płytach — 10,57 / 6,86 na blasku */

  --obwodka:       #626C76; /* 3,89 na gołębim / 3,45 na cieniu / 4,69 */
  --linia-cicha:   #CFD4DB;
  --obwodka-ciemna:#A69690; /* 5,28 na kasztanie / 3,43 na blasku */

  --kroj-naglowek: "Judson", Georgia, "Times New Roman", serif;
  --kroj-tekst:    "Afacad", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kroj-maszyna:  "Sono", ui-monospace, "DejaVu Sans Mono", Consolas, monospace;

  --kolumna:         34rem;
  --kolumna-hero:    36rem;
  --kolumna-szeroka: 56rem;
  --margines:        clamp(20px, 5vw, 104px);
  --szyna: 15rem;
  --rowek: 2.6rem;

  --promien:       2px;
  --promien-karta: 3px;
  --cien-karta: 0 16px 34px -28px rgba(51, 35, 28, .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(--musztarda-jasny); color: var(--kasztan-noc); }
:focus-visible { outline: 3px solid var(--musztarda-pismo); outline-offset: 2px; }
.stopka :focus-visible { outline-color: var(--musztarda-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(--musztarda-pismo); color: var(--karta); font-weight: 600; text-decoration: none;
}
.omin:focus { inset-inline-start: 0; }

/* --- 2b. GOŁĘBI 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(--golebi); }

/* --- 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__golebi {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--golebi);
  background-image: linear-gradient(180deg, var(--golebi) 0%, var(--golebi-cien) 100%);
}
/* wzdłuż dolnej krawędzi: szereg — cztery statusy z kreską zapisu różnej
   długości, pusta strefa, jeden formularz; okres 56 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__statusy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-kreska) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-kreska) 7px 16px, transparent 16px),
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-kreska) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-kreska) 7px 12px, transparent 12px),
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-kreska) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-kreska) 7px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-kreska) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-kreska) 7px 14px, transparent 14px),
    linear-gradient(90deg, transparent 0 44px, var(--musztarda-kreska) 44px 52px, transparent 52px);
  background-size: 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 11px;
  background-position: left 0px top 1px, left 0px top 1px, left 0px top 4px, left 0px top 4px, left 0px top 7px, left 0px top 7px, left 0px top 10px, left 0px top 10px, left 0px top 1px;
  background-repeat: repeat-x;
  opacity: .9;
}
/* ⚠ To jest KONTENER nagłówka z HTML generatora — nazwa `naglowek__pas` jest
   zajęta przez HTML, warstwa ozdobna nazywa się `naglowek__statusy`. */
.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: cztery statusy z zapisem, pusta strefa, formularz */
.znak__statusy {
  flex: none; width: 34px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 10px 1px, 2px 2px, 6px 1px, 2px 2px, 13px 1px, 2px 2px, 8px 1px, 9px 14px;
  background-position: left 0px bottom 12px, left 3px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 25px bottom 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(--musztarda-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(--musztarda-pismo); }
/* pozycja bieżąca: pod napisem cztery statusy z zapisem i formularz po prawej.
   ⚠⚠ 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: .5em;
  height: 10px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 30% 1px, 2px 2px, 18% 1px, 2px 2px, 40% 1px, 2px 2px, 24% 1px, 22% 100%;
  background-position: left 0px bottom 8px, left 4px bottom 8px, left 0px bottom 5px, left 4px bottom 5px, left 0px bottom 2px, left 4px bottom 2px, left 0px bottom -1px, left 4px bottom -1px, right 0px bottom 0px;
  background-repeat: no-repeat;
}

/* --- 5. HERO — cztery statusy, zanim otworzysz jeden formularz ------- */
.hero {
  overflow: hidden;
  padding-block: clamp(2.6rem, 1.6rem + 4vw, 6rem) clamp(3rem, 1.8rem + 4.4vw, 6.6rem);
  background: var(--golebi);
  border-block-end: 1px solid var(--linia-cicha);
}
.hero__golebi {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--golebi);
  background-image:
    radial-gradient(62% 68% at 88% 12%, var(--golebi-cien) 0%, rgba(203, 208, 216, 0) 66%),
    linear-gradient(170deg, var(--golebi) 0%, var(--golebi-cien) 100%);
}
/* Rysunek jest CIEMNY na jasnym, więc pracuje przy niskim kryciu — ma nie
   konkurować z tytułem. */
.hero__statusy {
  position: absolute; z-index: 1;
  /* ⚠ Rysunek W CAŁOŚCI w kadrze (cztery statusy i formularz), obok kolumny (1320–1920 px). */
  inset-block-start: 54%; inset-inline-end: 2%;
  width: clamp(26rem, 30vw, 38rem); aspect-ratio: 1200 / 420;
  transform: translateY(-50%);
  color: var(--musztarda-pismo); opacity: .52;
}
.hero__statusy 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(--golebi) 0%, rgba(217, 220, 226, .94) 30%, rgba(217, 220, 226, .2) 50%, rgba(217, 220, 226, 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__statusy {
    inset-block-start: 0; inset-inline-end: 4%; width: clamp(16rem, 74vw, 34rem);
    transform: none; opacity: .38;
  }
  .hero__zanik {
    background: linear-gradient(180deg,
      rgba(217, 220, 226, 0) 0%, rgba(217, 220, 226, 0) 22%, rgba(217, 220, 226, .9) 40%, rgba(217, 220, 226, .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: cztery statusy z zapisem różnej długości, pusta strefa, formularz.
   ⚠ Pudełko ma stałą wysokość w px, więc przesunięcia w px. */
.hero .tytul::before {
  content: ""; display: block;
  width: 120px; height: 30px; margin-block-end: clamp(1rem, .7rem + .8vw, 1.7rem);
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 5px 5px, 34px 2px, 5px 5px, 20px 2px, 5px 5px, 48px 2px, 5px 5px, 27px 2px, 24px 30px;
  background-position: left 0px bottom 25px, left 8px bottom 26px, left 0px bottom 17px, left 8px bottom 18px, left 0px bottom 8px, left 8px bottom 9px, left 0px bottom 0px, left 8px bottom 1px, left 96px bottom 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(--musztarda-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(--kasztan-noc);
  background-image: linear-gradient(180deg, var(--kasztan-blask) 0%, var(--kasztan-noc) 62%);
  color: var(--na-kasztanie);
}
.pasmo:last-of-type:not(:nth-of-type(1))::before { background: var(--musztarda-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-kasztanie-cichy); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2 { color: var(--na-kasztanie); }
/* ⚠⚠ 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-kasztanie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zajawka { color: var(--na-kasztanie-cichy); border-inline-start-color: var(--musztarda-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk) { color: var(--musztarda-jasny); text-decoration-color: var(--musztarda-jasny); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > p a:not(.przycisk):hover { color: var(--na-kasztanie); }

/* --- 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 NAD CZTEREMA STATUSAMI I FORMULARZEM.
   ⚠ Pudełko ma stałą wysokość w px u dołu (padding 14 px), więc przesunięcia
   ozdobnika w px; WSZYSTKO kotwiczone do dołu (ozdobnik w dolnych 12 px). */
.pasmo > .kontener > h2::before {
  content: counter(pasmo, decimal-leading-zero);
  /* ⚠ `flex` (blokowy), nie `inline-flex`. Ozdobnik w dolnych 12 px pudełka. */
  display: flex; width: max-content; align-items: flex-start; justify-content: flex-start;
  min-width: 3.6rem; height: 2rem; margin-block-end: .6rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 12px 1px, 2px 2px, 7px 1px, 2px 2px, 16px 1px, 2px 2px, 9px 1px, 10px 12px;
  background-position: left 0px bottom 10px, left 3px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 0px bottom 3px, left 3px bottom 3px, left 0px bottom 0px, left 3px bottom 0px, left 30px bottom 0px;
  background-repeat: no-repeat;
  font-family: var(--kroj-maszyna); font-weight: 400;
  font-size: .74rem; letter-spacing: -.01em;
  color: var(--musztarda-pismo);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > h2::before {
  color: var(--musztarda-jasny);
  background-image:
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%);
  background-size: 2px 2px, 12px 1px, 2px 2px, 7px 1px, 2px 2px, 16px 1px, 2px 2px, 9px 1px, 10px 12px;
  background-position: left 0px bottom 10px, left 3px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 0px bottom 3px, left 3px bottom 3px, left 0px bottom 0px, left 3px bottom 0px, left 30px bottom 0px;
  background-repeat: no-repeat;
}
.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.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(--musztarda-kreska);
  color: var(--tekst-cichy); font-size: clamp(1.01rem, .96rem + .28vw, 1.16rem);
}
.tresc p a:not(.przycisk) {
  color: var(--musztarda-pismo);
  text-decoration-line: underline; text-decoration-color: var(--musztarda-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc p a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }

/* --- 8. KROKI I WYLICZENIA -------------------------------------------
   KROKI to czynności po kolei — numer nad czterema statusami i formularzem.
   WYLICZENIE to rzeczy do sprawdzenia — inny układ długości zapisów co
   pozycję: inne odpowiedzi, te same cztery pytania.
   ⚠ 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
   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: .4em;
  display: inline-flex; align-items: flex-start; justify-content: center;
  min-width: 2.4rem; height: 2.1rem; padding-inline: .35rem; padding-block-end: 14px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 9px 1px, 2px 2px, 5px 1px, 2px 2px, 12px 1px, 2px 2px, 7px 1px, 9px 12px;
  background-position: left 0px bottom 10px, left 3px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 0px bottom 3px, left 3px bottom 3px, left 0px bottom 0px, left 3px bottom 0px, left 23px bottom 0px;
  background-repeat: no-repeat;
  color: var(--musztarda-pismo);
  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 {
  color: var(--musztarda-jasny);
  background-image:
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%);
  background-size: 2px 2px, 9px 1px, 2px 2px, 5px 1px, 2px 2px, 12px 1px, 2px 2px, 7px 1px, 9px 12px;
  background-position: left 0px bottom 10px, left 3px bottom 10px, left 0px bottom 7px, left 3px bottom 7px, left 0px bottom 3px, left 3px bottom 3px, left 0px bottom 0px, left 3px bottom 0px, left 23px bottom 0px;
  background-repeat: no-repeat;
}

.tresc .wyliczenie { margin: .4em auto 1.4em; padding: 0; list-style: none; display: grid; gap: .6rem; }
.tresc .wyliczenie li { position: relative; padding-inline-start: 2.5rem; }
/* znacznik: cztery statusy z zapisem — inny układ długości co pozycję — i formularz */
.tresc .wyliczenie li::before {
  content: ""; position: absolute; inset-block-start: .5em; inset-inline-start: 0;
  width: 36px; height: 14px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 14px 1px, 2px 2px, 8px 1px, 2px 2px, 18px 1px, 2px 2px, 11px 1px, 10px 14px;
  background-position: left 0px bottom 12px, left 3px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 26px bottom 0px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n+2)::before {
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 8px 1px, 2px 2px, 18px 1px, 2px 2px, 11px 1px, 2px 2px, 14px 1px, 10px 14px;
  background-position: left 0px bottom 12px, left 3px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 26px bottom 0px;
  background-repeat: no-repeat;
}
.tresc .wyliczenie li:nth-child(3n)::before {
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 18px 1px, 2px 2px, 11px 1px, 2px 2px, 8px 1px, 2px 2px, 14px 1px, 10px 14px;
  background-position: left 0px bottom 12px, left 3px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 26px bottom 0px;
  background-repeat: no-repeat;
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wyliczenie li::before {
  background-image:
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%);
  background-size: 2px 2px, 14px 1px, 2px 2px, 8px 1px, 2px 2px, 18px 1px, 2px 2px, 11px 1px, 10px 14px;
  background-position: left 0px bottom 12px, left 3px bottom 12px, left 0px bottom 8px, left 3px bottom 8px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 26px bottom 0px;
  background-repeat: no-repeat;
}

/* ⚠⚠ 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(--musztarda-pismo);
  text-decoration-line: underline; text-decoration-color: var(--musztarda-kreska);
  text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.tresc .wyliczenie li a:not(.przycisk):hover,
.tresc .kroki li a:not(.przycisk):hover { color: var(--tekst); text-decoration-thickness: 2px; }
/* 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(--musztarda-jasny); text-decoration-color: var(--musztarda-jasny);
}

.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(--musztarda-kreska); border-radius: var(--promien);
  font-size: .93rem; line-height: 1.6; color: var(--tekst-cichy);
}
.pasmo:nth-of-type(even) .zrodlo { background: var(--papier); }
/* ⚠⚠ KANON 2b — blok z własnym jasnym tłem w ciemnym paśmie. */
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .zrodlo,
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .wzor {
  background: rgba(241, 236, 230, .07);
  color: var(--na-kasztanie-cichy);
  border-color: var(--obwodka-ciemna);
  border-inline-start-color: var(--musztarda-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(--kasztan-noc); border-color: var(--kasztan-noc); color: var(--na-kasztanie); }
.tresc .przejscie a:hover::after { transform: translateX(4px); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a { background: transparent; border-color: var(--musztarda-jasny); color: var(--na-kasztanie); }
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .przejscie a:hover { background: var(--musztarda-jasny); border-color: var(--musztarda-jasny); color: var(--kasztan-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(--musztarda-pismo); color: var(--karta);
  border: 2px solid var(--musztarda-pismo); border-radius: var(--promien-karta);
  font-family: var(--kroj-tekst); font-weight: 600; font-size: 1.02rem;
  letter-spacing: .004em; text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease;
}
.tresc .przejscie a.przycisk::after { content: "→"; }
.przycisk:hover, .tresc a.przycisk:hover, .tresc .przejscie a.przycisk:hover {
  background: var(--kasztan-noc); border-color: var(--kasztan-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(--musztarda-jasny); color: var(--kasztan-noc); border-color: var(--musztarda-jasny);
}
.pasmo:last-of-type:not(:nth-of-type(1)) > .kontener > .cta a.przycisk:hover {
  background: var(--na-kasztanie); border-color: var(--na-kasztanie);
}

/* --- 11. KARTY KATALOGU — STATUSY I FORMULARZ 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: cztery statusy z zapisem, pusta strefa, formularz */
.zapowiedz::before {
  content: ""; position: absolute; inset-block-start: -1px;
  inset-inline-start: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  width: 56px; height: 13px;
  background-image:
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
    linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
  background-size: 2px 2px, 20px 1px, 2px 2px, 12px 1px, 2px 2px, 26px 1px, 2px 2px, 16px 1px, 12px 13px;
  background-position: left 0px bottom 11px, left 3px bottom 11px, left 0px bottom 7px, left 3px bottom 7px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 44px bottom 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(--musztarda-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: 500;
  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(--musztarda-pismo); text-decoration: underline; text-decoration-thickness: 2px; }
.tresc .zapowiedz__tekst { margin: 0 0 1rem; color: var(--tekst-cichy); font-size: .96rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem;
  text-decoration: none; color: var(--musztarda-pismo); font-weight: 600; font-size: .95rem;
  border-block-end: 2px solid var(--musztarda-kreska);
}
.tresc .zapowiedz__wiecej a:hover { color: var(--tekst); border-block-end-color: var(--tekst); }
/* ⚠ `.zapowiedz__wiecej` ma OBIE klasy naraz (`zapowiedz__wiecej przejscie`). */
.tresc .zapowiedz .przejscie a {
  background: none; border: 0; border-block-end: 2px solid var(--musztarda-kreska);
  border-radius: 0; padding: 0 .1rem; min-height: 44px; color: var(--musztarda-pismo);
}
.tresc .zapowiedz .przejscie a::after { content: none; }
.tresc .zapowiedz .przejscie a:hover { background: none; color: var(--tekst); border-block-end-color: var(--tekst); }

/* --- 12. STOPKA ----------------------------------------------------- */
.stopka {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.6rem);
  background: var(--kasztan-noc); color: var(--na-kasztanie);
}
.stopka__plyta {
  position: absolute; z-index: 0; inset: 0;
  background-color: var(--kasztan-noc);
  background-image:
    radial-gradient(66% 128% at 88% 100%, var(--kasztan-blask) 0%, rgba(82, 64, 58, 0) 64%),
    linear-gradient(180deg, var(--kasztan-blask) 0%, var(--kasztan-noc) 58%);
}
.stopka__statusy {
  position: absolute; z-index: 1; inset-inline: 0; inset-block-start: 0; height: 13px;
  background-image:
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-jasny) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-jasny) 7px 16px, transparent 16px),
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-jasny) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-jasny) 7px 12px, transparent 12px),
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-jasny) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-jasny) 7px 19px, transparent 19px),
    linear-gradient(90deg, transparent 0 3px, var(--musztarda-jasny) 3px 5px, transparent 5px),
    linear-gradient(90deg, transparent 0 7px, var(--musztarda-jasny) 7px 14px, transparent 14px),
    linear-gradient(90deg, transparent 0 44px, var(--musztarda-jasny) 44px 52px, transparent 52px);
  background-size: 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 2px, 56px 1px, 56px 11px;
  background-position: left 0px top 1px, left 0px top 1px, left 0px top 4px, left 0px top 4px, left 0px top 7px, left 0px top 7px, left 0px top 10px, left 0px top 10px, left 0px top 1px;
  background-repeat: repeat-x;
  opacity: .56;
}
.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-kasztanie);
}
/* pod znakiem stopki: cztery statusy z zapisem, pusta strefa, formularz */
.stopka__znak::after {
  content: ""; display: block; width: 56px; height: 13px; margin-block-start: .6rem;
  background-image:
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
    linear-gradient(90deg, var(--musztarda-jasny) 0 100%);
  background-size: 2px 2px, 20px 1px, 2px 2px, 12px 1px, 2px 2px, 26px 1px, 2px 2px, 16px 1px, 12px 13px;
  background-position: left 0px bottom 11px, left 3px bottom 11px, left 0px bottom 7px, left 3px bottom 7px, left 0px bottom 4px, left 3px bottom 4px, left 0px bottom 0px, left 3px bottom 0px, left 44px bottom 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-kasztanie-cichy); text-decoration: none;
  font-family: var(--kroj-maszyna); font-size: .78rem; letter-spacing: -.01em;
}
.stopka__menu a:hover { color: var(--musztarda-jasny); text-decoration: underline; text-underline-offset: .3em; }

/* --- 13. SZEROKIE EKRANY — CZTERY STATUSY NAD FORMULARZEM -------------
   ⚠⚠ 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: cztery statusy (kwadrat + zapis różnej długości) jeden nad drugim, niżej formularz */
  .pasmo > .kontener::after {
    content: ""; grid-column: proza-end / pelna-end; grid-row: 2;
    justify-self: start; align-self: stretch;
    width: 1.5rem; min-height: 2.4rem;
    background-image:
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%),
      linear-gradient(90deg, var(--musztarda-kreska) 0 100%);
    background-size: 3px 3px, 12px 1px, 3px 3px, 7px 1px, 3px 3px, 16px 1px, 3px 3px, 9px 1px, 10px 16%;
    background-position: left 0px top 10%, left 5px top calc(10% + 1px), left 0px top 26%, left 5px top calc(26% + 1px), left 0px top 42%, left 5px top calc(42% + 1px), left 0px top 58%, left 5px top calc(58% + 1px), left 12px top 78%;
    background-repeat: no-repeat;
}
  .pasmo:last-of-type:not(:nth-of-type(1)) > .kontener::after {
    background-image:
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%),
      linear-gradient(90deg, var(--musztarda-jasny) 0 100%);
    background-size: 3px 3px, 12px 1px, 3px 3px, 7px 1px, 3px 3px, 16px 1px, 3px 3px, 9px 1px, 10px 16%;
    background-position: left 0px top 10%, left 5px top calc(10% + 1px), left 0px top 26%, left 5px top calc(26% + 1px), left 0px top 42%, left 5px top calc(42% + 1px), left 0px top 58%, left 5px top calc(58% + 1px), left 12px top 78%;
    background-repeat: no-repeat;
}
}

/* --- 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__golebi, .naglowek__statusy, .hero__golebi, .hero__statusy,
  .hero__zanik, .stopka__plyta, .stopka__statusy { 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, .zapowiedz::before, .stopka__znak::after, .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%) !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; }
}