@charset "utf-8";
/* =====================================================================
   KALENICA — system projektowy makiety dachsolarny.eu (przebudowa premium)
   Seria STRONY-WWW-ST-CBF. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero formularzy, zero znaków firmowych. Wszystkie barwy przez zmienne.

   IDEA. Kalenica to najwyższa linia dachu — od niej każda połać schodzi
   pod swoim kątem. Widok jest zbudowany z pasm, których styki NIE SĄ
   poziome: każdy szew wznosi się w prawo o ten sam mały kąt, tak jak
   krawędź połaci. Ten kąt wraca wszędzie: w skośnej kresce nad nagłówkiem,
   w łacie na górnej krawędzi płyty, w fakturze rzędów modułów i w kącie
   ozdobnika hero. Barwy: grafit konstrukcji, żółć energii, chłodny błękit
   nieba nad połacią.

   ⚠ KOLEJNOŚĆ MA ZNACZENIE (katalog pułapek, sekcja 8 INSTRUKCJI):
   reguły ogólne PRZED komponentami; każdy komponent stojący w prozie ma
   prefiks „.tresc", żeby wygrać specyficzność z „.tresc p a" (0-2-1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root {
  /* ⚠⚠ BARWY BAZOWE — nigdy nie nadpisywane. Pasmo ciemne przestawia ROLE
     (--papier, --atrament…), więc szew między pasmami musi sięgać po barwę
     bezwzględną: „var(--papier)" wewnątrz .pas--grafit znaczyłoby grafit. */
  --barwa-papier:    #F1F4F7;
  --barwa-niebo:     #DDE7EF;
  --barwa-biel:      #FFFFFF;
  --barwa-grafit:    #101820;
  --hero-1:          #0C1218;
  --hero-2:          #16232E;
  --hero-3:          #24404F;
  --hero-lid:        #C6D6E2;   /* 7,35:1 wobec najjaśniejszego stopnia hero */

  /* powierzchnie jasne */
  --papier:          var(--barwa-papier);   /* chłodny papier — podłoże */
  --papier-karta:    var(--barwa-biel);     /* płyta, karta */
  --tlo-2:           var(--barwa-niebo);    /* niebo — pasmo drugoplanowe */
  --wiodaca-jasna:   #CBDCE8;   /* plakietki, pola numerów */

  /* pismo */
  --atrament:        var(--barwa-grafit);  /* grafit — 16,21:1 na papierze */
  --atrament-cichy:  #46535E;   /* 7,15:1 na papierze */

  /* barwa wiodąca — chłodny błękit nieba nad połacią */
  --wiodaca:         #2E6C8E;   /* 5,21:1 na papierze — powierzchnie i kreski */
  --wiodaca-ciemna:  #1A4C68;   /* 8,35:1 — nagłówki i odsyłacze na jasnym */

  /* akcent — żółć energii */
  --zolc:            #F5C518;   /* 10,98:1 wobec grafitu — POWIERZCHNIE */
  --zolc-jasna:      #FFD84D;   /* 12,94:1 wobec grafitu — tekst na ciemnym */
  --akcent:          #7C5A00;   /* 5,73:1 na papierze — tekst akcentu na jasnym */
  --na-akcencie:     var(--barwa-grafit);
  --na-wiodacej:     var(--barwa-biel);

  /* linie */
  --linia:           #6B7C89;   /* 3,91:1 na papierze — element nietekstowy */
  --linia-cicha:     #C9D6E0;   /* 1,34:1 — wyłącznie dekoracja */

  /* powierzchnie ciemne */
  --grafit:          var(--barwa-grafit);
  --grafit-2:        #18242E;
  --grafit-3:        #22323F;   /* karta na ciemnym */
  --grafit-blekit:   var(--hero-3); /* najjaśniejszy stopień gradientu hero */
  --na-ciemnym:      #EEF3F7;   /* 16,02:1 na graficie */
  --cichy-na-ciemnym:#B9CBD8;   /* 10,73:1 na graficie */
  --linia-ciemna:    #35485A;
  --linia-na-ciemnym:#8FA3B2;   /* 6,86:1 na graficie — element nietekstowy */

  /* ornament — wyłącznie dekoracja, nigdy nośnik informacji */
  --orn-jasny:       rgba(46, 108, 142, .10);
  --orn-jasny-2:     rgba(46, 108, 142, .16);
  --orn-ciemny:      rgba(238, 243, 247, .055);
  /* ⚠⚠ NIE WOLNO tu wstawić półprzezroczystej żółci. rgba(245,197,24,.16)
     położona na granacie karty (#22323F) daje #444A39 — brudną oliwkę SPOZA
     palety (grafit / żółć / stal). Wada zgłoszona przez dwie niezależne
     krytyki wizualne 2026-08-31 na ściętym narożniku w domykającym pasie CTA.
     Ornament pasma ciemnego ma barwę PODANĄ WPROST, bez krycia. */
  --orn-stal:        #35485A;   /* stal — 1,41:1 na karcie ciemnej: czysta dekoracja */
  /* ⭐ PASEK SZYNY PRAWEJ MA WAŻYĆ TYLE SAMO NA JASNYM I NA CIEMNYM.
     Szyna używa WŁASNEGO tokenu, a nie --orn-jasny-2, bo tamten obsługuje
     jeszcze blok łat i ścięte narożniki i nie wolno go ruszać. Miara ciężaru
     to różnica jasności CIE L* paska wobec własnej płaszczyzny szyny —
     patrz nota 17 w koncepcja.txt. */
  --szyna-pasek:     rgba(46, 108, 142, .26);

  --obwodka-fokus:   #1A4C68;

  /* pismo */
  --krój-naglowek: "Space Grotesk", "Archivo", "Liberation Sans", "Helvetica Neue", Arial, sans-serif;
  --krój-tekst:    "Source Serif 4", "Source Serif Pro", Georgia, "Liberation Serif", "Times New Roman", serif;
  --krój-maszyna:  ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;

  /* ⚠⚠ MIARA W REM, NIE W EM (pułapka 9): „ch" w foncie o wąskim zerze kłamie,
     a „em" na nagłówku i na prozie daje DWIE różne krawędzie. */
  --kolumna:        35rem;                     /* kolumna prozy */
  --zwis:           0rem;                      /* zwis nagłówków w lewy margines */
  --pas-szer:       84rem;                     /* maksymalna szerokość pasma */
  --plyta-szer:     60rem;                     /* płyta jest KARTĄ, nie płachtą */
  --margines:       clamp(20px, 5vw, 108px);

  /* ⭐ KĄT — jedna miara skosu dla całej makiety */
  --skos:           clamp(26px, 3.2vw, 72px);  /* wysokość szewu między pasmami */
  --skos-latwy:     18px;                      /* przesunięcie łaty / kreski */
  --zachodzenie:    clamp(1.1rem, .7rem + 1.6vw, 2.8rem);

  --promien:        0px;                       /* system KĄTA — bez zaokrągleń */
  --cien-plyta:     0 30px 60px -34px rgba(16, 24, 32, .55), 0 2px 0 0 rgba(16, 24, 32, .06);
  --cien-karta:     0 22px 44px -30px rgba(16, 24, 32, .50);
  --cien-twardy:       14px 14px 0 -1px rgba(26, 76, 104, .16);
  --cien-twardy-mocny: 18px 18px 0 -1px rgba(26, 76, 104, .22);  /* :hover */
  --cien-twardy-maly:   9px  9px 0 -1px rgba(26, 76, 104, .16);  /* <= 620 px */
}
@media (min-width: 1100px) { :root { --zwis: 3rem; } }
@media (min-width: 1500px) { :root { --zwis: 7rem; } }
@media (min-width: 1800px) { :root { --zwis: 8rem; } }

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, .9rem + .34vw, 1.42rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* ⚠ pułapka 6: „clip" leczy przepełnienia od skosów i faktur,
   nie psując position:sticky (czego „hidden" nie potrafi). */
@supports (overflow: clip) { html { overflow-x: clip; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--krój-tekst);
  font-size: 1rem;
  line-height: 1.72;
  /* ⚠ długie adresy i nazwy własne potrafią rozepchnąć widok na 360 px (B5) */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }
/* ⚠⚠ pułapka „globalne strong,b{color}" — pogrubienie samą wagą pisma */
strong, b { color: inherit; font-weight: 600; }

:focus-visible { outline: 3px solid var(--obwodka-fokus); outline-offset: 3px; }

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 200px; height: 48px;
  display: flex; align-items: center;
  color: var(--atrament);
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus {
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.6rem;
  background: var(--zolc); color: var(--grafit);
  font-family: var(--krój-naglowek);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}

/* --- 3. RAMY I KOLUMNA ----------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z szynami po bokach: proza stoi
   w torze środkowym, nagłówki ZWISAJĄ o --zwis w lewo (rytm redakcyjny),
   a bloki .szeroki / .para / .lista-wpisow biorą całe pasmo. */
.kontener {
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [zwis-start]  minmax(0, var(--zwis))
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end]   minmax(0, 1fr) [pelna-end];
}
.kontener > *      { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > h2,
.kontener > .zwis  { grid-column: zwis-start / tekst-end; }
.kontener > .szeroki,
.kontener > .para,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
.kontener--hero > * { grid-column: zwis-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek {
  position: sticky; inset-block-start: 0; z-index: 40;
  background-color: var(--grafit);
  background-image:
    linear-gradient(97deg, rgba(46, 108, 142, .30) 0%, rgba(46, 108, 142, 0) 58%),
    repeating-linear-gradient(101deg, var(--orn-ciemny) 0 1px, transparent 1px 26px);
  color: var(--na-ciemnym);
  box-shadow: 0 18px 34px -30px rgba(16, 24, 32, .9);
}
/* łata pod paskiem — kreska w barwach kalenicy */
.naglowek::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--zolc) 0 22%, var(--wiodaca) 22% 46%, var(--linia-ciemna) 46% 100%);
}
.naglowek__pas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .2rem clamp(1rem, 3vw, 3rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — wyłącznie typograficzna (pułapka T8: żadnego sygnetu) */
.znak {
  display: inline-flex; align-items: center; min-height: 46px;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .92rem + .3vw, 1.34rem);
  line-height: 1.15; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: var(--na-ciemnym);
  padding-inline-end: .2em;
}
.znak__tekst { position: relative; display: inline-block; padding-block-end: .3em; }
/* skośna kreska pod sygnaturą — ten sam kąt co szwy pasm */
.znak__tekst::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.6em; height: 4px; background: var(--zolc);
  transform: skewX(-32deg); transform-origin: left bottom;
  transition: width .28s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* menu — zwykła lista, która ZAWIJA SIĘ na wąskim ekranie.
   ⚠ świadomie bez <details>: pułapka T7 (::details-content) nie ma tu
   jak wystąpić, a wszystkie cztery pozycje mieszczą się w dwóch rzędach. */
.menu { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 0 clamp(.1rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link {
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .7em;
  font-family: var(--krój-naglowek);
  font-weight: 500; font-size: .8rem;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; color: var(--cichy-na-ciemnym);
}
.menu__link::after {
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: .7em; width: 0; height: 3px;
  background: var(--zolc);
  transform: skewX(-32deg); transform-origin: left bottom;
  transition: width .25s ease;
}
.menu__link:hover { color: var(--na-ciemnym); }
.menu__link:hover::after { width: calc(100% - 1.4em); }
.menu__link[aria-current="page"] { color: var(--na-ciemnym); font-weight: 700; }
.menu__link[aria-current="page"]::after { width: calc(100% - 1.4em); }
/* ⭐ WĄSKI EKRAN: ZAWINIĘCIE MA WYGLĄDAĆ NA DECYZJĘ.
   Stary pasek zawijał się 3 + 1 i „Poradnik” zostawał sam w drugim rzędzie
   pod lewą krawędzią — jak resztka po zawinięciu (krytyka wizualna
   2026-08-31). Teraz sygnatura bierze cały pierwszy wiersz, a cztery
   pozycje stoją w siatce 2 x 2 o równych torach: dwa rzędy po równo,
   obie kolumny wyrównane do wspólnych krawędzi. */
@media (max-width: 760px) {
  .naglowek__pas { justify-content: flex-start; row-gap: .15rem; }
  .znak { flex: 1 0 100%; }
  .menu { flex: 1 0 100%; justify-content: flex-start; }
  .menu__lista {
    display: grid; width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start; gap: 0;
    /* ⚠⚠ WYRÓWNANIE OPTYCZNE, NIE PUDEŁKOWE (krytyka wizualna 2026-08-31,
       pomiar na własnym zrzucie 390 px w skali 3x). Pudełka stały równo: i
       sygnatura, i pozycje menu zaczynały się na 20 px (wyściółka .rama).
       Ale pozycja menu ma jeszcze WŁASNĄ wyściółkę .45 em (5,76 px), więc
       ink glifów wypadał: „D" sygnatury na 20,67 px, „S" ze START na 26,00 px,
       „P" z PV CZY KOLEKTORY na 26,67 px — lewa krawędź nagłówka łamała się
       o 5,3–6,0 px, a razem z nią obie skośne żółte belki (20,00 vs 26,00).
       NAPRAWA: cała siatka pozycji cofa się o dokładnie tę wyściółkę
       (.45 em pisma pozycji = .36 rem), więc TOK PISMA, a nie pudełko, staje
       na krawędzi sygnatury. Zmierzone po naprawie: D 20,67 · P 20,67 ·
       S 20,33 (litera okrągła ma prawo o ułamek wystawać) i obie belki na
       20,00. Miara w REM, bo obie wyściółki idą za stopniem pisma korzenia. */
    margin-inline-start: -.36rem;
  }
  .menu__poz { display: flex; }
  .menu__link { padding-inline: .45em; }
  /* podkreślenie idzie za zmienioną wyściółką, żeby kreska nie odstawała */
  .menu__link::after { inset-inline-start: .45em; }
  .menu__link:hover::after,
  .menu__link[aria-current="page"]::after { width: calc(100% - .9em); }
}

/* --- 5. HERO --------------------------------------------------------- */
.tresc { display: block; }

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* ⚠ B6 rozwiązuje tło po background-color, nie po gradiencie — jako kolor
     bazowy stoi NAJJAŚNIEJSZY stopień gradientu, żeby pomiar był ostrożny. */
  background-color: var(--grafit-blekit);
  background-image:
    radial-gradient(58% 52% at 88% 6%, rgba(245, 197, 24, .20) 0%, rgba(245, 197, 24, 0) 62%),
    radial-gradient(64% 60% at 4% 92%, rgba(46, 108, 142, .38) 0%, rgba(46, 108, 142, 0) 66%),
    repeating-linear-gradient(101deg, var(--orn-ciemny) 0 1px, transparent 1px 34px),
    linear-gradient(163deg, var(--hero-1) 0%, var(--hero-2) 48%, var(--hero-3) 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(3.2rem, 1.6rem + 5vw, 7.6rem) calc(clamp(3.6rem, 2rem + 5vw, 8rem) + var(--skos));
}
/* ORNAMENT: abstrakcyjna połać — równoległe rzędy modułów w płaskiej
   perspektywie. Bez treści, bez informacji, aria-hidden. */
.hero__polac {
  position: absolute; z-index: 0;
  inset-block-start: 50%; inset-inline-end: -8%;
  width: clamp(340px, 52vw, 1000px);
  transform: translateY(-52%);
  color: var(--zolc);              /* B6: barwa ikony wobec tła hero = 6,71:1 */
  pointer-events: none;
  /* połać wychodzi z mgły: lewa część ornamentu gaśnie, żeby tytuł nie
     leżał na siatce modułów */
  -webkit-mask-image: linear-gradient(101deg, transparent 0 20%, #000 56%);
  mask-image: linear-gradient(101deg, transparent 0 20%, #000 56%);
}
.hero__polac svg { width: 100%; height: auto; display: block; }
/* poświata pod kalenicą */
.hero__swiatlo {
  position: absolute; z-index: 0;
  inset-block-start: -26%; inset-inline-start: -10%;
  width: clamp(300px, 42vw, 820px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(245, 197, 24, .16) 0%, rgba(245, 197, 24, 0) 66%);
  pointer-events: none;
}
.hero > .kontener { position: relative; z-index: 1; }

.hero .tytul {
  margin: 0;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(2.3rem, 1.35rem + 2.6vw, 4.5rem);
  line-height: 1.02; letter-spacing: -.022em;
  color: var(--na-ciemnym);
  max-width: 14em;
  text-wrap: balance;
}
/* skośna łata nad tytułem — kąt połaci jako podpis kompozycji */
.hero .tytul::before {
  content: ""; display: block;
  width: clamp(74px, 11vw, 190px); height: 10px;
  margin-block-end: clamp(1.1rem, .7rem + 1.2vw, 2.4rem);
  background: linear-gradient(90deg, var(--zolc) 0 46%, var(--wiodaca) 46% 100%);
  transform: skewX(-32deg); transform-origin: left bottom;
}
.hero .lid, .hero .zajawka {
  margin: clamp(1.2rem, .8rem + 1vw, 2.2rem) 0 0;
  max-width: 40rem;
  font-size: 1.16rem; line-height: 1.66;
  color: var(--hero-lid);
}
.hero .zajawka {
  font-family: var(--krój-naglowek); font-weight: 500;
  font-size: 1.1rem; line-height: 1.5; letter-spacing: .005em;
  color: var(--zolc-jasna);
  padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--zolc);
}
.hero .zajawka + .lid { margin-block-start: clamp(1rem, .7rem + .8vw, 1.8rem); }

/* --- 6. PASMA I SZWY -------------------------------------------------- */
/* ⭐ SZEW: styk dwóch pasm NIE JEST poziomy — wznosi się w prawo o ten sam
   kąt na całej stronie. Trójkąt jest malowany WEWNĄTRZ pasma (inset-inline:0),
   więc nie ma prawa wywołać przewijania poziomego (bramka B5). */
.pas, .hero { position: relative; display: flow-root; }
.pas::after, .hero::after {
  content: ""; position: absolute; z-index: 0;
  inset-inline: 0; inset-block-end: -1px;
  height: var(--skos);
  background: var(--nast, transparent);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
.nast--papier  { --nast: var(--barwa-papier); }
.nast--niebo   { --nast: var(--barwa-niebo); }
.nast--grafit  { --nast: var(--barwa-grafit); }
.nast--biel    { --nast: var(--barwa-biel); }
.pas > .kontener { position: relative; z-index: 1; }

.pas {
  padding-block: clamp(2.4rem, 1.3rem + 3vw, 5rem)
                 calc(clamp(2.4rem, 1.3rem + 3vw, 5rem) + var(--skos));
}
.pas--papier { background-color: var(--papier); }
.pas--niebo  {
  background-color: var(--tlo-2);
  background-image: repeating-linear-gradient(101deg, var(--orn-jasny) 0 1px, transparent 1px 30px);
}
.pas--biel   { background-color: var(--papier-karta); }

/* pasmo z PŁYTĄ, która nachodzi na szew poprzedniego pasma */
.pas--plyta {
  background-color: var(--papier);
  background-image: repeating-linear-gradient(101deg, var(--orn-jasny) 0 1px, transparent 1px 38px);
  padding-block: 0 calc(clamp(2.4rem, 1.3rem + 3vw, 5rem) + var(--skos));
  /* ⚠ MARGINES ZEWNĘTRZNY KARTY. Przy 390 px stare 8 px zostawiało 9–10 px
     luzu do krawędzi ekranu i karta wyglądała, jakby wypadała z okna
     (krytyka wizualna 2026-08-31). Dolna granica podniesiona do 18 px. */
  padding-inline: clamp(18px, 1.8vw, 30px);
}
.plyta {
  /* ⚠ Kolumna prozy jest wyśrodkowana w oknie, więc zwężenie płyty NIE
     przesuwa tekstu: szyny siatki oddają dokładnie tyle, ile ubyło płycie.
     Dzięki temu płyta czyta się jak karta, a krawędź prozy stoi tam,
     gdzie w pozostałych pasmach (bramka B13 mierzy dominującą krawędź). */
  max-width: min(100%, var(--plyta-szer));
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.9rem, 1.1rem + 2.4vw, 3.8rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  box-shadow: var(--cien-plyta);
}
/* ŁATA — skośna belka na górnej krawędzi płyty */
.plyta > * { position: relative; z-index: 1; }
@media (min-width: 1280px) {
  /* łaty w lewym polu karty — treść stoi w torze prozy, więc pole po jej
     lewej stronie dostaje ornament zamiast pustki */
  .plyta::after {
    content: ""; position: absolute; z-index: 0;
    inset-block-start: clamp(3rem, 6vw, 7.5rem);
    inset-inline-start: clamp(20px, 3vw, 68px);
    width: clamp(80px, 9vw, 190px); height: clamp(150px, 17vw, 330px);
    background: repeating-linear-gradient(101deg, var(--orn-jasny-2) 0 2px, transparent 2px 17px);
    clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
    pointer-events: none;
  }
}
.plyta::before {
  content: ""; position: absolute; z-index: 1; inset-block-start: -6px;
  inset-inline-start: clamp(18px, 5%, 96px);
  width: clamp(120px, 26%, 340px); height: 10px;
  background: linear-gradient(90deg, var(--zolc) 0 38%, var(--wiodaca) 38% 100%);
  transform: skewX(-32deg);
}

/* pasmo CIEMNE — nadpisujemy TOKENY, więc każdy komponent w środku
   dostaje wariant na ciemnym bez osobnych reguł (pułapka „globalny kolor
   na powierzchni o odwrotnej jasności"). */
.pas--grafit {
  --papier:          var(--grafit);
  --papier-karta:    var(--grafit-3);
  --tlo-2:           var(--grafit-2);
  --wiodaca-jasna:   var(--grafit-3);
  --atrament:        var(--na-ciemnym);
  --atrament-cichy:  var(--cichy-na-ciemnym);
  --wiodaca:         var(--zolc);
  --wiodaca-ciemna:  var(--zolc-jasna);
  --akcent:          var(--zolc-jasna);
  --na-akcencie:     var(--grafit);
  --na-wiodacej:     var(--grafit);
  --linia:           var(--linia-na-ciemnym);
  --linia-cicha:     var(--linia-ciemna);
  --orn-jasny:       var(--orn-ciemny);
  --orn-jasny-2:     var(--orn-stal);   /* ⚠ barwa WPROST — patrz nota przy --orn-stal */
  /* ⚠ stal ciemniejsza od --orn-stal WYŁĄCZNIE dla szyny: #35485A na
     płaszczyźnie szyny (28,36,44) dawał ΔL* 16,4 przy 7,0 na paśmie jasnym —
     ten sam motyw ważył na ciemnym 2,3 raza więcej. Barwa PODANA WPROST
     (zasada z noty 14: nad granatem nie stawiamy krycia). */
  --szyna-pasek:     #2C3C4B;
  --obwodka-fokus:   var(--zolc);
  --cien-plyta:      0 30px 60px -30px rgba(0, 0, 0, .75);
  --cien-karta:      0 22px 44px -28px rgba(0, 0, 0, .7);
  /* ⚠⚠ TA SAMA WADA CO PRZY --orn-stal: rgba(245,197,24,.18) na graficie
     #101820 daje #393B1E — brudną oliwkę. Twardy cień leżał DOKŁADNIE pod
     przyciskiem domykającego pasa CTA. Barwy podane WPROST, stalowe. */
  --cien-twardy:       14px 14px 0 -1px #1D3646;
  --cien-twardy-mocny: 18px 18px 0 -1px #24455A;
  --cien-twardy-maly:   9px  9px 0 -1px #1D3646;
  background-color: var(--grafit);
  background-image:
    radial-gradient(60% 70% at 92% 0%, rgba(46, 108, 142, .40) 0%, rgba(46, 108, 142, 0) 64%),
    radial-gradient(46% 60% at 2% 100%, rgba(245, 197, 24, .10) 0%, rgba(245, 197, 24, 0) 62%),
    repeating-linear-gradient(101deg, var(--orn-ciemny) 0 1px, transparent 1px 30px);
  color: var(--na-ciemnym);
}

/* pasmo zamknięcia — mocne, ciemne, z jednym zdaniem */
.pas--zamkniecie { padding-block: clamp(3rem, 1.6rem + 3.6vw, 6rem) calc(clamp(3rem, 1.6rem + 3.6vw, 6rem) + var(--skos)); }

/* ⭐ SZYNA PRAWA — prawa trzecia część pasma należy do kompozycji.
   ⚠ WADA, KTÓRĄ TO NAPRAWIA (krytyka wizualna 2026-08-31): przy 1920 px pasmo
   było barwne na całe 1920, proza kończyła się na ~1410 px, a kwadratowy blok
   łat wisiał osobno przy krawędzi okna (~1600–1830 px), niezwiązany z niczym.
   Między jednym a drugim zostawało ~510 px martwego tła.
   ⭐ WIĄZANIE. Szyna zaczyna się DOKŁADNIE tam, gdzie kończy się tor tekstu,
   i dobiega do krawędzi okna, więc prawa trzecia jest domknięta.
   Wyprowadzenie miary: w siatce .kontener tor prozy leży między dwiema szynami
   1fr o równej szerokości, a cała siatka jest wyśrodkowana w oknie — więc tor
   prozy JEST symetryczny wobec środka pasma i jego prawa krawędź wypada na
   50% + (--zwis + --kolumna) / 2. Miara nie zależy ani od --pas-szer, ani od
   --margines: oba skracają obie szyny 1fr o tyle samo. Do tego rynna, żeby
   faktura nie dotykała wiersza.
   ⚠⚠ MIARA WIERSZA NIETKNIĘTA: --kolumna zostaje 35rem — proza się NIE rozciąga.
   Wyłącznie dekoracja: z-index 0 pod .kontener (z-index 1), pointer-events: none,
   płaszczyzna gaśnie pionowo (bez twardej krawędzi u góry i przy szwie),
   faktura gaśnie maską ku krawędzi okna. */
@media (min-width: 1280px) {
  .pas--niebo::before, .pas--papier::before,
  .pas--grafit::before, .pas--plyta::before {
    content: ""; position: absolute; z-index: 0;
    inset-block: 0 var(--skos);
    inset-inline-start: calc(50% + (var(--zwis) + var(--kolumna)) / 2 + clamp(28px, 2.6vw, 60px));
    inset-inline-end: 0;
    background-image:
      repeating-linear-gradient(101deg, var(--szyna-pasek) 0 3px, transparent 3px 26px),
      linear-gradient(180deg, transparent 0, var(--orn-jasny) 16% 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(101deg, #000 0 42%, rgba(0, 0, 0, .26) 100%);
            mask-image: linear-gradient(101deg, #000 0 42%, rgba(0, 0, 0, .26) 100%);
    pointer-events: none;
  }
}

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc h2 {
  position: relative;
  margin: clamp(2.2rem, 1.4rem + 2vw, 3.6rem) 0 1rem;
  padding-block-start: clamp(1.1rem, .8rem + 1vw, 1.9rem);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.42rem, 1.06rem + 1.25vw, 2.28rem);
  line-height: 1.14; letter-spacing: -.014em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* ⭐ KĄT NAD NAGŁÓWKIEM — dwie skośne kreski, żółta i błękitna */
.tresc h2::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(56px, 7vw, 116px); height: 8px;
  background: linear-gradient(90deg, var(--zolc) 0 44%, var(--wiodaca) 44% 100%);
  transform: skewX(-32deg); transform-origin: left bottom;
}
.kontener > h2:first-child { margin-block-start: 0; }

.tresc h3 {
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem) 0 .5rem;
  font-family: var(--krój-naglowek); font-weight: 500;
  font-size: 1.2rem; line-height: 1.3; color: var(--atrament);
}

.tresc p { margin: 0 0 1.15em; }
.tresc p:last-child { margin-block-end: 0; }

.tresc .wprowadzenie {
  font-size: 1.16rem; line-height: 1.68;
  color: var(--atrament);
}
.tresc .wprowadzenie::first-letter {
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: 2.9em; line-height: .82;
  float: left; margin: .06em .12em 0 0;
  color: var(--wiodaca-ciemna);
}

/* odsyłacz w prozie — ⚠ pułapka 1: reguła MUSI omijać przyciski */
.tresc p a:not(.przycisk),
.tresc li a:not(.przycisk) {
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--zolc);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.tresc p a:not(.przycisk):hover,
.tresc li a:not(.przycisk):hover {
  color: var(--akcent); text-decoration-color: var(--wiodaca);
}

/* --- 8. PARA — dwa bloki danych obok siebie -------------------------- */
.tresc .para {
  display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  margin: clamp(1.4rem, .9rem + 1.4vw, 2.4rem) 0 0;
}
@media (min-width: 900px) { .tresc .para { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tresc .para > p {
  position: relative; margin: 0;
  padding: clamp(1.3rem, .9rem + 1.4vw, 2.2rem) clamp(1.2rem, .9rem + 1.2vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-block-start: 6px solid var(--wiodaca);
  box-shadow: var(--cien-karta);
}
.tresc .para > p:first-child { border-block-start-color: var(--zolc); }
/* skośny narożnik — powtórzenie kąta w małej skali */
.tresc .para > p::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: 34px; height: 34px;
  background: linear-gradient(to bottom right, transparent 0 50%, var(--orn-jasny-2) 50% 100%);
}

/* --- 9. WYRÓŻNIK / ODSYŁACZ KIERUNKOWY ------------------------------- */
.tresc .odsylacz {
  position: relative;
  margin: clamp(1.5rem, 1rem + 1.4vw, 2.6rem) 0 0;
  padding: clamp(1.2rem, .9rem + 1.2vw, 2rem) clamp(1.2rem, .9rem + 1.2vw, 2rem)
           clamp(1.2rem, .9rem + 1.2vw, 2rem) clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  background: var(--tlo-2);
  border-inline-start: 8px solid var(--zolc);
  font-size: 1.02rem;
}
.tresc .odsylacz::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  width: 46px; height: 46px;
  background: linear-gradient(to bottom left, var(--orn-jasny-2) 0 50%, transparent 50% 100%);
}

.kontener > .odsylacz--duzy { grid-column: zwis-start / pelna-end; max-width: 46rem; }
.tresc .odsylacz--duzy {
  font-family: var(--krój-naglowek); font-weight: 500;
  font-size: clamp(1.12rem, .96rem + .72vw, 1.7rem);
  line-height: 1.34; letter-spacing: -.005em;
  padding-block: clamp(1.6rem, 1.1rem + 1.6vw, 2.8rem);
  background: var(--papier-karta);
  box-shadow: var(--cien-plyta);
}
.tresc .odsylacz--duzy::after { width: 64px; height: 64px; }

/* --- 10. PRZYCISK ---------------------------------------------------- */
.tresc .cta { margin-block: clamp(1.6rem, 1.1rem + 1.4vw, 2.8rem) 0; }
/* przycisk domykający pasmo — pas ma już własne wypełnienie, więc
   dokładanie odstępu nad nim rozrywałoby zamknięcie strony. */
.pas--zamkniecie .cta:first-child { margin-block-start: 0; }
/* ⚠⚠ SELEKTOR MUSI DORÓWNAĆ „.tresc p a" (0-2-1), inaczej przycisk
   dostanie kolor odsyłacza prozy i napis zniknie na własnym tle. */
.przycisk,
.tresc a.przycisk,
.tresc p a.przycisk {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 58px; padding: .8rem 2.2rem;
  background: var(--zolc); color: var(--grafit);
  border: 2px solid var(--zolc);
  font-family: var(--krój-naglowek);
  font-weight: 700; font-size: .96rem;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--cien-twardy);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.tresc p a.przycisk::after,
.przycisk::after { content: "→"; font-size: 1.15em; line-height: 1; }
.przycisk:hover,
.tresc a.przycisk:hover,
.tresc p a.przycisk:hover {
  background: var(--zolc-jasna); border-color: var(--zolc-jasna);
  transform: translate(-3px, -3px);
  box-shadow: var(--cien-twardy-mocny);
}

/* ⚠⚠ WĄSKI EKRAN: STRZAŁKA NIE MOŻE ZOSTAĆ SAMA PRZY PRAWEJ KRAWĘDZI.
   WADA (krytyka wizualna 2026-08-31, potwierdzona pomiarem na własnym zrzucie
   390 px): przycisk był układem flex, więc napis i „→" były DWOMA elementami
   układu. Gdy najdłuższe wezwanie („Utwórz kartę dachu przed pierwszą wyceną")
   łamało się na dwa wiersze, ink napisu zajmował x 20,0–286,7 px, a strzałka
   wisiała samotnie na x 318,0–326,7 px w połowie wysokości przycisku —
   243 px od ostatniego słowa i na wysokości, na której nie ma żadnego pisma.
   NAPRAWA: na wąskim ekranie przycisk przestaje być układem flex i staje się
   zwykłym blokiem, a strzałka wraca do TOKU PISMA — spacja nierozdzielająca
   przykleja ją do ostatniego słowa i łamanie nie ma jej jak oderwać.
   ⚠ „line-height: 0" na strzałce: bez tego jej własny wiersz (1,15 em) rozpycha
   wiersz tekstu i przycisk rośnie z 58 na 63 px. Wyściółka .98 rem odtwarza
   dawną wysokość przycisku JEDNOWIERSZOWEGO co do piksela (58,00 px — tyle
   dawało min-height przy układzie flex); dwuwierszowy rośnie z 74,7 na 80,5 px,
   bo strzałka stoi teraz w wierszu pisma, a nie obok niego.
   ⚠ Ta sama wada dotyczyła odsyłacza .przejscie (arkusz systemu, 2 wiersze
   przy 360–390 px) — leczona tak samo. */
@media (max-width: 620px) {
  .przycisk, .tresc a.przycisk, .tresc p a.przycisk {
    display: block; text-align: center;
    width: 100%; padding-inline: 1.1rem; padding-block: .98rem;
    font-size: .82rem; letter-spacing: .04em;
    box-shadow: var(--cien-twardy-maly);
  }
  .przycisk::after,
  .tresc p a.przycisk::after {
    content: "\00A0\2192"; margin-inline-start: .28em; line-height: 0;
  }
}

/* --- 11. WYLICZENIA I KROKI (arkusz systemu) -------------------------- */
.tresc .wyliczenie {
  margin: .6em 0 1.8em; padding: 0; list-style: none;
  display: grid; gap: .1rem;
}
.tresc .wyliczenie li {
  position: relative;
  padding: .8em 1em .8em 2.6em;
  border-block-end: 1px solid var(--linia-cicha);
}
.tresc .wyliczenie li::before {
  content: ""; position: absolute;
  inset-inline-start: .5em; inset-block-start: 1.5em;
  width: 1.4em; height: 5px; background: var(--zolc);
  transform: skewX(-32deg);
}
.tresc .kroki {
  margin: .6em 0 1.9em; padding: 0; list-style: none;
  counter-reset: krok; display: grid; gap: .8rem;
}
.tresc .kroki li {
  counter-increment: krok; position: relative;
  padding: 1.1em 1.3em 1.1em 4.4em;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 6px solid var(--wiodaca);
  box-shadow: var(--cien-karta);
}
.tresc .kroki li::before {
  content: counter(krok); position: absolute;
  inset-inline-start: 1em; inset-block-start: 1em;
  width: 2.3em; height: 2.3em;
  display: grid; place-items: center;
  background: var(--wiodaca-jasna); color: var(--wiodaca-ciemna);
  font-family: var(--krój-naglowek); font-weight: 700; font-size: 1em;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1;
  transform: skewX(-10deg);
}
.tresc .wzor {
  margin: 1.4em 0 1.8em;
  padding: clamp(1rem, .6rem + 1.4vw, 1.8rem) clamp(1rem, .6rem + 1.6vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-inline-start: 6px solid var(--wiodaca);
  font-family: var(--krój-maszyna);
  font-size: .9rem; line-height: 1.85; letter-spacing: .01em;
  color: var(--atrament);
}
/* akapit, którego CAŁĄ treścią jest odsyłacz — B7 traktuje go jak cel UI */
.tresc .przejscie { margin-block: 1.5em 0; }
.tresc .przejscie a:not(.przycisk).przejscie-cel,
.tresc .przejscie a:not(.przycisk) {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 52px; padding: .5em 1.4em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia);
  color: var(--wiodaca-ciemna);
  font-family: var(--krój-naglowek); font-weight: 500;
  font-size: .92rem; letter-spacing: .04em;
  text-decoration: none;
}
.tresc .przejscie a:not(.przycisk)::after { content: "→"; }
.tresc .przejscie a:not(.przycisk):hover {
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej); border-color: var(--wiodaca-ciemna);
}
/* ⚠⚠ TA SAMA WADA CO W PRZYCISKU: przy 360–390 px odsyłacz arkusza systemu
   łamie się na dwa wiersze i „→" — jako osobny element układu flex — zostaje
   sam przy prawej krawędzi. Tu też strzałka wraca do toku pisma.
   ⚠ BLOK MUSI STAĆ PO REGULE BAZOWEJ: obie mają specyficzność (0-3-1), więc
   decyduje KOLEJNOŚĆ. W dawnym miejscu (przy przycisku, sekcja 10) „width: 100%"
   z tego samego zapytania medialnego było MARTWE — reguła bazowa stoi niżej. */
@media (max-width: 620px) {
  .tresc .przejscie a:not(.przycisk).przejscie-cel,
  .tresc .przejscie a:not(.przycisk) {
    display: block; width: 100%; padding-block: .84em;
  }
  .tresc .przejscie a:not(.przycisk).przejscie-cel::after,
  .tresc .przejscie a:not(.przycisk)::after {
    content: "\00A0\2192"; margin-inline-start: .2em; line-height: 0;
  }
}

/* --- 12. LISTA WPISÓW ------------------------------------------------ */
.tresc .lista-wpisow {
  margin: clamp(1.6rem, 1rem + 1.6vw, 2.8rem) 0 0; padding: 0; list-style: none;
  display: grid; gap: clamp(1rem, .6rem + 1.6vw, 2.2rem);
  counter-reset: wpis;
}
@media (min-width: 900px)  { .tresc .lista-wpisow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tresc .zapowiedz {
  counter-increment: wpis;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  box-shadow: var(--cien-plyta);
}
/* skośna łata na górnej krawędzi karty */
.tresc .zapowiedz::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 8px;
  background: linear-gradient(90deg, var(--zolc) 0 34%, var(--wiodaca) 34% 62%, var(--linia-cicha) 62% 100%);
}
/* duża ozdobna cyfra — ornament (pseudoelement), nie informacja */
.tresc .zapowiedz::before {
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-end: -.16em; inset-inline-end: .02em;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 7rem; line-height: 1;
  color: var(--wiodaca-jasna);
  pointer-events: none;
}
.tresc .zapowiedz > * { position: relative; z-index: 1; }
.tresc .zapowiedz__tytul {
  margin: .4rem 0 .7rem; padding: 0; border: 0; background: none;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.06rem, .96rem + .4vw, 1.32rem); line-height: 1.24;
  color: var(--wiodaca-ciemna);
}
.tresc .zapowiedz__tytul::before, .tresc .zapowiedz__tytul::after { content: none; }
.tresc .zapowiedz .zapowiedz__tytul a {
  display: block; min-height: 44px;
  color: var(--wiodaca-ciemna); text-decoration: none;
}
.tresc .zapowiedz .zapowiedz__tytul a:hover {
  color: var(--akcent); text-decoration: underline;
  text-decoration-color: var(--zolc); text-decoration-thickness: 2px;
}
.tresc .zapowiedz__tekst { margin: 0 0 1.2rem; color: var(--atrament-cichy); font-size: .98rem; }
.tresc .zapowiedz__wiecej { margin: auto 0 0; }
.tresc .zapowiedz .zapowiedz__wiecej a { text-decoration: none; }
.tresc .zapowiedz__wiecej a {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px;
  padding-inline: .1rem; text-decoration: none;
  color: var(--wiodaca-ciemna);
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  border-block-end: 3px solid var(--zolc);
}
.tresc .zapowiedz__wiecej a::after { content: "→"; }
.tresc .zapowiedz__wiecej a:hover { color: var(--akcent); border-block-end-color: var(--wiodaca); }

/* --- 13. STOPKA ------------------------------------------------------ */
.stopka {
  position: relative; overflow: hidden;
  background-color: var(--grafit);
  background-image:
    radial-gradient(56% 84% at 90% 0%, rgba(46, 108, 142, .34) 0%, rgba(46, 108, 142, 0) 64%),
    repeating-linear-gradient(101deg, var(--orn-ciemny) 0 1px, transparent 1px 30px);
  color: var(--na-ciemnym);
  padding-block: clamp(2.4rem, 1.4rem + 2.6vw, 4.6rem);
}
.stopka::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, var(--zolc) 0 24%, var(--wiodaca) 24% 52%, var(--linia-ciemna) 52% 100%);
}
.stopka__pas {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 3rem);
}
.stopka__znak {
  margin: 0; position: relative;
  font-family: var(--krój-naglowek); font-weight: 700;
  font-size: clamp(1.02rem, .92rem + .3vw, 1.34rem);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--na-ciemnym);
  padding-block-end: .4em;
}
.stopka__znak::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 2.6em; height: 4px; background: var(--zolc);
  transform: skewX(-32deg); transform-origin: left bottom;
}
.stopka__menu ul {
  display: flex; flex-wrap: wrap; gap: 0 clamp(.4rem, 2vw, 1.6rem);
  margin: 0; padding: 0; list-style: none;
}
.stopka__menu a {
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .3em; text-decoration: none;
  color: var(--cichy-na-ciemnym);
  font-family: var(--krój-naglowek); font-weight: 500;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
  border-block-end: 3px solid transparent;
}
.stopka__menu a:hover { color: var(--na-ciemnym); border-block-end-color: var(--zolc); }
/* ⭐ TA SAMA ZASADA CO W NAGŁÓWKU: przy wąskim ekranie nawigacja serwisu
   układała się 3 + 1 i „Poradnik” zostawał sam w drugim rzędzie — resztka po
   zawinięciu (krytyka wizualna 2026-08-31). Dwa rzędy po równo, tory wspólne
   z siatką pozycji menu głównego. */
@media (max-width: 760px) {
  .stopka__menu { flex: 1 0 100%; }
  .stopka__menu ul {
    display: grid; width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start; gap: 0;
    /* ta sama wada optyczna co w nagłówku i ta sama naprawa: wyściółka
       pozycji stopki to .3 em pisma .8 rem, czyli .24 rem */
    margin-inline-start: -.24rem;
  }
  .stopka__menu li { display: flex; }
}
.stopka__gora { margin: 0; }
.do-gory {
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 48px; padding: .4em 1.4em;
  border: 2px solid var(--zolc);            /* B6: obwódka 10,98:1 wobec grafitu */
  color: var(--zolc); text-decoration: none;
  font-family: var(--krój-naglowek); font-weight: 500;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
}
.do-gory svg { width: 1em; height: 1em; }
.do-gory:hover { background: var(--zolc); color: var(--grafit); }
.stopka :focus-visible { outline-color: var(--zolc); }

/* --- 14. ARKUSZ SYSTEMU (specimen.html) ------------------------------ */
.tresc .próbki {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 1.6rem 0 2.2rem; padding: 0; list-style: none;
}
.próbka {
  border: 1px solid var(--linia-cicha);
  background: var(--papier-karta); padding: 0; overflow: hidden;
  box-shadow: var(--cien-karta);
}
.próbka__pole { display: block; height: 84px; }
.próbka__opis {
  display: block; padding: .8rem 1rem;
  font-family: var(--krój-maszyna); font-size: .78rem;
  color: var(--atrament); line-height: 1.55;
}

/* --- 15. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  html { font-size: 11pt; }
  body { background: #FFFFFF; color: #000000; }
  .naglowek { position: static; background: #FFFFFF; color: #000000; box-shadow: none; }
  .hero, .stopka, .pas--grafit { background: #FFFFFF !important; color: #000000 !important; }
  .hero__polac, .hero__swiatlo, .pas::after, .hero::after, .stopka::before { display: none !important; }
  .plyta { box-shadow: none; margin-block-start: 0; }
  .przycisk { box-shadow: none; }
  a { color: #000000; }
}