/* ── MOTYWY ─────────────────────────────────────────────────────────────────
   Jeden komplet zmiennych, dwa komplety wartości. Ciemny jest domyślny (taki
   powstał projekt), jasny wchodzi przez [data-motyw="jasny"] na <html>.
   Wybór człowieka zapisuje app.js w localStorage; gdy człowiek nic nie wybrał,
   decyduje ustawienie systemu (prefers-color-scheme). */
:root{
  color-scheme:dark;
  --tlo:#0F0F0F;
  --tlo-stopki:#0C0C0C;
  --tlo-sekcji:#151515;
  --tlo-kafla:#1A1A1A;
  --tlo-karty:#202020;
  --tlo-karty-2:#1F1F1F;
  --tlo-pola:#151515;
  --tlo-neutralne:#2B2B2B;
  --tlo-pelne:#1C1C1C;
  --tlo-ciemne-2:#2A2A2A;
  --tlo-ciemne-3:#2E2E2E;
  --tlo-ciemne-4:#3A3A3A;
  --tlo-ciemne-5:#4A4A4A;
  --tlo-ciemne-6:#6A6A6A;
  --tekst:#F4F4F2;
  --tekst-tresci:#E6E6E2;
  --tekst-drugi:#A6A6A6;
  --tekst-przygaszony:#9C9C9C;
  --tekst-slaby:#8E8E8E;
  --tekst-slabszy:#7E7E7E;
  --tekst-ledwie:#6A6A6A;
  --tekst-odwrotny:#0F0F0F;
  --tekst-jasny:#D6D6D4;
  --tekst-akcent:#E0F64B;
  --tekst-nawigacji:#D4D4D0;
  --akcent:#E0F64B;
  --znak-logo:#E0F64B;
  --akcent-mocny:#D2E93A;
  --obrys-fokusu:#E0F64B;
  --akcent-ciemny:#8A9A2E;
  --uwaga:#FFB040;
  --ramka:#2B2B2B;
  --ramka-slaba:#1E1E1E;
  --ramka-slaba-2:#232323;
  --ramka-pola:#3A3A3A;
  --ramka-mocna:#4A4A4A;
  --ramka-mocniejsza:#6A6A6A;
  --ramka-2:#2E2E2E;
  --nakladka-06:rgba(255,255,255,0.06);
  --nakladka-08:rgba(255,255,255,0.08);
  --nakladka-30:rgba(255,255,255,0.3);
  --nakladka-45:rgba(255,255,255,0.45);
  --nakladka-07:rgba(255,255,255,0.07);
  --nakladka-14:rgba(255,255,255,0.14);
  --nakladka-10:rgba(255,255,255,0.10);
  --nakladka-12:rgba(255,255,255,0.12);
  --nakladka-16:rgba(255,255,255,0.16);
  --nakladka-28:rgba(255,255,255,0.28);
  --karta-przezroczysta:rgba(32,32,32,0.94);
  --karta-przezroczysta-92:rgba(32,32,32,0.92);
  --cien-mocny:rgba(0,0,0,0.9);
  --cien-sredni:rgba(0,0,0,0.65);
  --cien-slaby:rgba(0,0,0,0.35);
  --akcent-06:rgba(224,246,75,0.06);
  --akcent-08:rgba(224,246,75,0.08);
  --akcent-14:rgba(224,246,75,0.14);
  --akcent-15:rgba(224,246,75,0.15);
  --akcent-16:rgba(224,246,75,0.16);
  --akcent-18:rgba(224,246,75,0.18);
  --akcent-20:rgba(224,246,75,0.20);
  --akcent-30:rgba(224,246,75,0.30);
  --akcent-45:rgba(224,246,75,0.45);
  --akcent-5:rgba(224,246,75,0.5);
  --akcent-04:rgba(224,246,75,0.04);
  --akcent-035:rgba(224,246,75,0.035);
  --uwaga-08:rgba(255,176,64,0.08);
  --uwaga-45:rgba(255,176,64,0.45);
  --uwaga-5:rgba(255,176,64,0.5);
  --uwaga-8:rgba(255,176,64,0.8);
  --cien-95:rgba(0,0,0,0.95);
  --pasek-makiety:rgba(15,15,15,0.88);
  --szklo-gora:rgba(30,30,30,0.90);
  --szklo-dol:rgba(12,12,12,0.90);
  --szklo-panel-gora:rgba(30,30,30,0.97);
  --szklo-panel-dol:rgba(14,14,14,0.97);
  --x-10-10-10-072:rgba(10,10,10,0.72);
  --x-224-246-75-0:rgba(224,246,75,0);
  --x-224-246-75-005:rgba(224,246,75,0.05);
  --x-224-246-75-01:rgba(224,246,75,0.10);
  --x-224-246-75-022:rgba(224,246,75,0.22);
  --x-224-246-75-055:rgba(224,246,75,.55);
  --x-255-120-120-06:rgba(255,120,120,0.6);
  --x-255-176-64-0:rgba(255,176,64,0);
  --x-255-176-64-005:rgba(255,176,64,0.05);
  --x-255-176-64-055:rgba(255,176,64,.55);
  --x-255-176-64-06:rgba(255,176,64,0.6);
}
:root[data-motyw="jasny"]{
  color-scheme:light;
  --tlo:#F6F6F3;
  --tlo-stopki:#EFEFEA;
  --tlo-sekcji:#FFFFFF;
  --tlo-kafla:#ECECE6;
  --tlo-karty:#FFFFFF;
  --tlo-karty-2:#FBFBF9;
  --tlo-pola:#FFFFFF;
  --tlo-neutralne:#DEDED7;
  --tlo-pelne:#FFFFFF;
  --tlo-ciemne-2:#E4E4DD;
  --tlo-ciemne-3:#DCDCD4;
  --tlo-ciemne-4:#CFCFC7;
  --tlo-ciemne-5:#BDBDB4;
  --tlo-ciemne-6:#9E9E95;
  --tekst:#15150F;
  --tekst-tresci:#22221B;
  --tekst-drugi:#4E4E46;
  --tekst-przygaszony:#57574F;
  --tekst-slaby:#5F5F57;
  --tekst-slabszy:#66665E;
  --tekst-ledwie:#74746B;
  --tekst-odwrotny:#0F0F0F;
  --tekst-jasny:#33332C;
  --tekst-akcent:#4C5A00;
  --tekst-nawigacji:#3A3A33;
  --akcent:#E0F64B;
  --znak-logo:#15150F;
  --akcent-mocny:#CBE234;
  --obrys-fokusu:#15150F;
  --akcent-ciemny:#6F7D1E;
  --uwaga:#B26A00;
  --ramka:#E2E2DA;
  --ramka-slaba:#EAEAE3;
  --ramka-slaba-2:#E6E6DF;
  --ramka-pola:#C9C9C0;
  --ramka-mocna:#B3B3AA;
  --ramka-mocniejsza:#94948B;
  --ramka-2:#DEDED6;
  --nakladka-06:rgba(20,20,10,0.05);
  --nakladka-08:rgba(20,20,10,0.06);
  --nakladka-30:rgba(20,20,10,0.22);
  --nakladka-45:rgba(20,20,10,0.35);
  --nakladka-07:rgba(20,20,10,0.05);
  --nakladka-14:rgba(20,20,10,0.10);
  --nakladka-10:rgba(20,20,10,0.08);
  --nakladka-12:rgba(20,20,10,0.09);
  --nakladka-16:rgba(20,20,10,0.10);
  --nakladka-28:rgba(20,20,10,0.20);
  --karta-przezroczysta:rgba(255,255,255,0.94);
  --karta-przezroczysta-92:rgba(255,255,255,0.92);
  --cien-mocny:rgba(40,40,25,0.18);
  --cien-sredni:rgba(40,40,25,0.14);
  --cien-slaby:rgba(40,40,25,0.10);
  --akcent-06:rgba(120,140,0,0.10);
  --akcent-08:rgba(120,140,0,0.12);
  --akcent-14:rgba(120,140,0,0.16);
  --akcent-15:rgba(120,140,0,0.18);
  --akcent-16:rgba(120,140,0,0.18);
  --akcent-18:rgba(120,140,0,0.20);
  --akcent-20:rgba(120,140,0,0.22);
  --akcent-30:rgba(120,140,0,0.30);
  --akcent-45:rgba(120,140,0,0.45);
  --akcent-5:rgba(120,140,0,0.5);
  --akcent-04:rgba(120,140,0,0.07);
  --akcent-035:rgba(120,140,0,0.06);
  --uwaga-08:rgba(178,106,0,0.12);
  --uwaga-45:rgba(178,106,0,0.45);
  --uwaga-5:rgba(178,106,0,0.5);
  --uwaga-8:rgba(178,106,0,0.85);
  --cien-95:rgba(40,40,25,0.20);
  --pasek-makiety:rgba(246,246,243,0.88);
  --szklo-gora:rgba(255,255,255,0.90);
  --szklo-dol:rgba(246,246,243,0.90);
  --szklo-panel-gora:rgba(255,255,255,0.97);
  --szklo-panel-dol:rgba(246,246,243,0.97);
  --x-10-10-10-072:rgba(255,255,255,0.72);
  --x-224-246-75-0:rgba(120,140,0,0.000);
  --x-224-246-75-005:rgba(120,140,0,0.060);
  --x-224-246-75-01:rgba(120,140,0,0.120);
  --x-224-246-75-022:rgba(120,140,0,0.264);
  --x-224-246-75-055:rgba(120,140,0,0.660);
  --x-255-120-120-06:rgba(176,32,32,0.6);
  --x-255-176-64-0:rgba(178,106,0,0);
  --x-255-176-64-005:rgba(178,106,0,0.05);
  --x-255-176-64-055:rgba(178,106,0,0.55);
  --x-255-176-64-06:rgba(178,106,0,0.6);
}
/* Zrzuty panelu są jasne w obu motywach; w ciemnym przygaszamy je odrobinę,
   żeby nie świeciły jak latarka, w jasnym zostają bez zmian. */
:root:not([data-motyw="jasny"]) [data-kadr] img{filter:brightness(0.96)}

/* ── fleetify · wspólny arkusz lendinga ───────────────────────────────────────
   Generowany przez build.mjs. Nie edytuj tutaj — popraw build.mjs i przebuduj.
   Kupiona jest TYLKO odmiana Roobert Regular 400: font-synthesis:none pilnuje,
   żeby przeglądarka nie dorabiała pogrubienia ani kursywy. Hierarchia buduje się
   rozmiarem, kolorem i odstępem, nigdy grubością. */
@font-face{font-family:'Roobert';src:url('fonts/Roobert-Regular.woff2') format('woff2'),
      url('fonts/Roobert-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;
}
html,body{font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{border:0}
/* Atrybut hidden przełącza app.js. Elementy makiety mają inline display:flex,
   które bije regułę user-agenta, więc bez !important nic by się nie ukryło. */
[hidden]{display:none!important}
/* Klawiaturowy fokus widoczny wszędzie, także tam, gdzie makieta go nie opisała. */
:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
/* Nagłówek jest przyklejony (64 px). Bez tego skok po kotwicy (#pokaz, #panel)
   chowałby początek sekcji pod paskiem nawigacji. */
section[id]{scroll-margin-top:84px}
/* Blog: filtry kategorii i kafle wpisów (strony Blog nie było w makiecie). */
[data-filtr]{background:var(--tlo-sekcji);border:1px solid var(--ramka);border-radius:999px;color:var(--tekst-drugi);font:inherit;font-size:14px;height:44px;padding:0 18px;cursor:pointer;transition:border-color .3s,background .3s,color .3s}
[data-filtr].on{border-color:var(--akcent);background:var(--akcent-08);color:var(--tekst)}
[data-wpis]{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s}

/* ── RAMKA ZRZUTU ────────────────────────────────────────────────────────────
   Zrzuty są pełnostronicowe (do 750×15 054 px, proporcja 1:20). Dopóki <picture>
   siedział w układzie, obrazek brał swoją naturalną proporcję (height:100% w
   kontenerze o wysokości auto degeneruje do auto), a kontener — jako element
   flexa z min-height:auto — rósł razem z nim: karta „Deklaracje przygotowane”
   miała na telefonie 6 355 px. Teraz kadr wyznacza WYŁĄCZNIE kontener i jego
   aspect-ratio, a obrazek jest wyjęty z układu i przycięty przez object-fit. */
[data-kadr]{position:relative;overflow:hidden}
[data-kadr] > picture[data-kadr-obraz]{position:absolute;inset:0;display:block}
[data-kadr] > picture[data-kadr-obraz] > img{width:100%;height:100%}

/* ── FORMULARZ BEZ JS ───────────────────────────────────────────────────────
   Widoczny tylko wtedy, gdy JavaScript jest wyłączony (patrz <noscript>). */
[data-bez-js]{display:none}

/* ── STOPKA: cele dotykowe ──────────────────────────────────────────────────
   Odnośniki stopki miały 14 px tekstu i zero paddingu — cel dotykowy około 17 px
   wysokości przy wymaganym minimum 24 px (WCAG 2.2 AA, 2.5.8) i 44 px zalecanych
   (AAA, 2.5.5). Dostają pełne 44 px.
     Ujemnego marginesu (pierwsze podejście: margin:-13px 0, żeby wiersz stopki
   nie urósł) tu NIE MA: pudełko robiło się wtedy wyższe niż miejsce, które zajmuje
   w układzie, więc po złamaniu listy na dwa wiersze (320 px) cele nachodziły na
   siebie o 3 px i kliknięcie przy granicy trafiało w sąsiedni odnośnik. Zamiast
   tego skracamy odstęp między wierszami — 44 px wysokości same je rozdzielają. */
footer a{display:inline-flex;align-items:center;min-height:44px}
footer [data-stopka-linki]{align-items:center;row-gap:4px!important}

/* ── KREATOR „UMÓW POKAZ” ───────────────────────────────────────────────────
   Trzy kroki w jednym formularzu. Wygląd trzyma się reszty strony: karty na
   tle powierzchni, limonka tylko tam, gdzie coś znaczy (wybrana opcja, aktywny
   krok, przycisk wysyłki). Cele dotykowe nie schodzą poniżej 44 px. */
form.kreator,[data-kreator]{display:flex;flex-direction:column;gap:20px}
.kroki{display:flex;gap:8px;margin:0;padding:0;list-style:none;counter-reset:krok}
.kroki li{flex:1;display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--tekst-slaby);padding-top:10px;border-top:2px solid var(--ramka);transition:color .2s,border-color .2s}
.kroki li[aria-current="step"]{color:var(--tekst);border-top-color:var(--akcent)}
.kroki li[data-zrobiony]{color:var(--tekst-drugi);border-top-color:var(--akcent-ciemny)}
.kroki .numer{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;border-radius:50%;border:1px solid currentColor;font-size:11px}
.kroki li[aria-current="step"] .numer{background:var(--akcent);border-color:var(--akcent);color:var(--tekst-odwrotny)}
.kroki .nazwa{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:479px){.kroki li{font-size:12px;gap:6px}}
@media (max-width:359px){.kroki .nazwa{display:none}.kroki li{justify-content:center}}
.kreator section{display:flex;flex-direction:column;gap:14px}
.kreator .wstep{margin:0;font-size:15px;color:var(--tekst-drugi);text-wrap:pretty}
.cele{display:flex;flex-direction:column;gap:10px}
.cel{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--ramka);border-radius:10px;background:var(--tlo-pola);cursor:pointer;transition:border-color .2s,background .2s}
.cel:hover{border-color:var(--ramka-mocna)}
.cel input{position:absolute;opacity:0;width:1px;height:1px}
.cel-tresc{display:flex;flex-direction:column;gap:3px;min-width:0}
.cel-tytul{font-size:16px;color:var(--tekst)}
.cel-opis{font-size:14px;color:var(--tekst-drugi);text-wrap:pretty}
.cel::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:3px;border-radius:50%;border:1px solid var(--ramka-mocna);transition:border-color .2s,box-shadow .2s,background .2s}
.cel:has(input:checked){border-color:var(--akcent);background:var(--akcent-08)}
.cel:has(input:checked)::before{border-color:var(--akcent);background:var(--akcent);box-shadow:inset 0 0 0 4px var(--tlo-pola)}
.cel:has(input:focus-visible){outline:2px solid var(--obrys-fokusu);outline-offset:3px}
.kreator .pole{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tekst-drugi)}
.kreator .pole input{height:48px;padding:0 14px;border-radius:8px;border:1px solid var(--ramka-pola);background:var(--tlo-pola);color:var(--tekst);font:inherit;font-size:16px}
.kreator .pole input:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:2px;border-color:var(--akcent)}
.kreator .pole input[aria-invalid="true"]{border-color:var(--uwaga)}
.kreator .podpowiedz{font-size:13px;color:var(--tekst-slaby)}
.dni,.godziny{display:flex;flex-wrap:wrap;gap:8px}
.dni button,.godziny button{min-height:44px;padding:6px 14px;border-radius:8px;border:1px solid var(--ramka);background:var(--tlo-pola);color:var(--tekst-drugi);font:inherit;font-size:15px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;transition:border-color .2s,background .2s,color .2s}
.dni button .dzien{font-size:12px;color:var(--tekst-slaby)}
.dni button:hover,.godziny button:hover{border-color:var(--ramka-mocna);color:var(--tekst)}
.dni button[aria-pressed="true"],.godziny button[aria-pressed="true"]{border-color:var(--akcent);background:var(--akcent-08);color:var(--tekst)}
.dni button:focus-visible,.godziny button:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
.kreator .stan{font-size:14px;color:var(--tekst-slaby)}
.kreator .podsumowanie{margin:0;padding:12px 14px;border-radius:8px;background:var(--tlo-kafla);border:1px solid var(--ramka);font-size:14px;color:var(--tekst-drugi)}
.kreator .blad{margin:0;font-size:14px;color:var(--uwaga)}
.kreator .nawigacja{display:flex;gap:12px;align-items:center;margin-top:2px}
.kreator .nawigacja button{min-height:48px;border-radius:8px;font:inherit;font-size:16px;cursor:pointer;padding:0 20px}
.kreator .wstecz{background:none;border:1px solid var(--ramka-mocna);color:var(--tekst)}
.kreator .wstecz:hover{border-color:var(--akcent)}
.kreator .dalej,.kreator .wyslij{flex:1;background:var(--akcent);border:0;color:var(--tekst-odwrotny);transition:background .2s}
.kreator .dalej:hover,.kreator .wyslij:hover{background:var(--akcent-mocny)}
.kreator .nawigacja button:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
.kreator .nawigacja button[disabled]{opacity:.7;cursor:progress}

/* Przyciski w dobudowanym oknie rezerwacji. Makieta strony głównej miała je
   opisane atrybutami style, ale okno dokładane na pozostałych stronach powstaje
   po zapisaniu arkusza, więc stany muszą stać tutaj. */
[data-okno-zamknij]{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--ramka);border-radius:50%;background:none;color:var(--tekst-drugi);font-size:22px;line-height:1;cursor:pointer;transition:border-color .3s,color .3s}
[data-okno-zamknij]:hover{border-color:var(--akcent);color:var(--tekst)}
[data-okno-wroc]{align-self:flex-start;margin-top:8px;border:1px solid var(--ramka-mocna);background:none;color:var(--tekst);font:inherit;font-size:16px;height:48px;padding:0 20px;border-radius:8px;cursor:pointer;transition:border-color .3s,background .3s}
[data-okno-wroc]:hover{border-color:var(--akcent);background:var(--akcent-08)}
[data-okno-zamknij]:focus-visible,[data-okno-wroc]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}

/* Telefon: para wezwań staje w pionie, więc obie kotwice dostają tę samą
   szerokość. Dwa przyciski różnej długości jeden pod drugim wyglądają jak
   przypadek, a nie jak wybór między dwiema drogami. */
@media (max-width:520px){
  [data-konto],[data-akcja="umow-otworz"]{width:100%;justify-content:center;text-align:center;text-wrap:balance}
  header [data-konto],footer [data-konto],footer [data-akcja="umow-otworz"],
  [data-czat] [data-konto]{width:auto;justify-content:flex-start;text-align:left}
}

/* Data sprawdzenia stanu prawnego: nie ozdoba, tylko powód, dla którego
   czytelnik (i silnik odpowiedzi) ma uznać liczby na stronie za aktualne. */
.stan-prawny{margin:10px 0 0;font-size:14px;color:var(--tekst-slaby);max-width:60ch}
/* W nagłówku wpisu „Stan prawny…” należy do metryczki nad nim, więc stoi przy
   niej (odstęp flexa 16–24 px minus 8 px), a nie jako szósty osobny rząd. */
.artykul-glowa .stan-prawny{margin-top:-8px}
.stan-prawny time{color:var(--tekst-drugi)}

/* ── CZAT ───────────────────────────────────────────────────────────────────
   Bąbel i okno w prawym dolnym rogu. Okno jest w znaczniku od początku, więc
   nie ma mrugnięcia przy otwarciu; pokazuje je app.js zdejmując [hidden].
   Na telefonie okno zajmuje prawie cały ekran, bo rozmowa na 300 px to męka. */
[data-czat]{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* Bąbel ma tło karty i obwódkę, nie limonkę: przy bloku zakupu limonkowe były
   naraz przycisk w pasku, przycisk #kup i bąbel. Limonka zostaje na jednym
   wypełnionym przycisku w sekcji, a pomoc wygląda jak pomoc, nie jak wezwanie. */
[data-czat-otworz]{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:1px solid var(--ramka-mocniejsza);border-radius:26px;background:var(--tlo-karty);color:var(--tekst);font:inherit;font-size:16px;cursor:pointer;box-shadow:0 18px 40px -20px var(--cien-mocny);transition:transform .2s,box-shadow .3s,border-color .2s}
[data-czat-otworz]:hover{transform:translateY(-2px);box-shadow:0 22px 46px -20px var(--cien-mocny);border-color:var(--tekst)}
[data-czat-otworz]:active{transform:translateY(0) scale(.97)}
/* Kropka pojawia się, gdy odpowiedź przyszła przy zamkniętym oknie. Puls jest
   jednorazowy i krótki: migające bez końca kółko to reklama, nie informacja. */
[data-czat-kropka]{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--uwaga);border:2px solid var(--tlo);animation:czat-puls 1.6s ease-out 3}
@keyframes czat-puls{0%{box-shadow:0 0 0 0 var(--uwaga-45)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
[data-czat-otworz]:active{transform:translateY(0) scale(.97)}
/* Kropka pojawia się, gdy odpowiedź przyszła przy zamkniętym oknie. Puls jest
   jednorazowy i krótki: migające bez końca kółko to reklama, nie informacja. */
[data-czat-kropka]{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--uwaga);border:2px solid var(--tlo);animation:czat-puls 1.6s ease-out 3}
@keyframes czat-puls{0%{box-shadow:0 0 0 0 var(--uwaga-45)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
[data-czat-otworz]:active{transform:translateY(0) scale(.97)}
/* Kropka pojawia się, gdy odpowiedź przyszła przy zamkniętym oknie. Puls jest
   jednorazowy i krótki: migające bez końca kółko to reklama, nie informacja. */
[data-czat-kropka]{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--uwaga);border:2px solid var(--tlo);animation:czat-puls 1.6s ease-out 3}
@keyframes czat-puls{0%{box-shadow:0 0 0 0 var(--uwaga-45)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
[data-czat-otworz]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
[data-czat-ikona]{width:18px;height:18px;flex:0 0 auto;border-radius:50% 50% 50% 4px;border:2px solid currentColor}
[data-czat][data-otwarty] [data-czat-otworz]{display:none}
[data-czat-okno]{display:flex;flex-direction:column;width:min(440px,calc(100vw - 32px));height:min(680px,calc(100dvh - 110px));background:var(--tlo-karty);border:1px solid var(--ramka);border-radius:18px;box-shadow:0 34px 80px -32px var(--cien-mocny),0 2px 10px -6px var(--cien-slaby);overflow:hidden;transform-origin:100% 100%}
/* Okno rośnie z rogu, w którym siedzi bąbel: dzięki temu widać, SKĄD się wzięło,
   zamiast pojawiać się znikąd. Zamknięcie gra tę samą animację wstecz, dlatego
   [hidden] zdejmuje dopiero app.js, po jej zakończeniu. */
[data-czat-okno]{animation:czat-wejscie .28s cubic-bezier(.2,.8,.25,1) both}
[data-czat][data-zamykanie] [data-czat-okno]{animation:czat-wyjscie .18s ease-in both}
@keyframes czat-wejscie{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes czat-wyjscie{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.96)}}
[data-czat-okno] header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ramka);background:var(--tlo-sekcji)}
[data-czat-okno] header .tytul{font-size:16px;color:var(--tekst)}
[data-czat-okno] header .stan{flex:1;font-size:12px;color:var(--tekst-slaby);transition:color .3s}
[data-czat][data-czlowiek] [data-czat-okno] header .stan{color:var(--tekst-akcent)}
[data-czat-zamknij]{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:8px;background:none;color:var(--tekst-drugi);font-size:22px;line-height:1;cursor:pointer}
[data-czat-zamknij]:hover{background:var(--nakladka-08);color:var(--tekst)}
[data-czat-watek]{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:10px}
[data-czat-watek] .wiadomosc{max-width:88%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;animation:czat-wiadomosc .32s cubic-bezier(.2,.8,.25,1) both}
/* Moja wiadomość wjeżdża z prawej, odpowiedź z lewej: kierunek ruchu mówi, kto
   mówi, zanim zdążysz przeczytać. */
[data-czat-watek] .ja{animation-name:czat-wiadomosc-prawa}
@keyframes czat-wiadomosc{from{opacity:0;transform:translateY(10px) translateX(-6px)}to{opacity:1;transform:none}}
@keyframes czat-wiadomosc-prawa{from{opacity:0;transform:translateY(10px) translateX(6px)}to{opacity:1;transform:none}}
[data-czat-watek] .wiadomosc p{margin:0}
[data-czat-watek] .wiadomosc p + p{margin-top:8px}
[data-czat-watek] .bot{align-self:flex-start;background:var(--tlo-kafla);color:var(--tekst-tresci);border-bottom-left-radius:4px}
[data-czat-watek] .ja{align-self:flex-end;background:var(--akcent-14);color:var(--tekst);border-bottom-right-radius:4px}
[data-czat-watek] .czlowiek{align-self:flex-start;background:var(--tlo-sekcji);border:1px solid var(--akcent-45);color:var(--tekst-tresci);border-bottom-left-radius:4px}
[data-czat-watek] .pisze{align-self:flex-start;display:flex;gap:4px;padding:12px 14px}
[data-czat-watek] .pisze span{width:6px;height:6px;border-radius:50%;background:var(--tekst-slaby);animation:czat-kropka 1.2s infinite}
[data-czat-watek] .pisze span:nth-child(2){animation-delay:.15s}
[data-czat-watek] .pisze span:nth-child(3){animation-delay:.3s}
@keyframes czat-kropka{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
[data-czat-podpowiedzi]{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
[data-czat-podpowiedzi] button{min-height:36px;padding:6px 12px;border:1px solid var(--ramka);border-radius:999px;background:none;color:var(--tekst-drugi);font:inherit;font-size:13px;cursor:pointer;text-align:left;animation:czat-wiadomosc .3s cubic-bezier(.2,.8,.25,1) both}
[data-czat-podpowiedzi] button:nth-child(2){animation-delay:.06s}
[data-czat-podpowiedzi] button:nth-child(3){animation-delay:.12s}
[data-czat-podpowiedzi] button:active{transform:scale(.97)}
[data-czat-podpowiedzi] button:hover{border-color:var(--akcent);color:var(--tekst)}
[data-czat-formularz]{display:flex;gap:8px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--ramka)}
[data-czat-pole]{flex:1;min-height:44px;max-height:120px;padding:11px 12px;border:1px solid var(--ramka-pola);border-radius:10px;background:var(--tlo-pola);color:var(--tekst);font:inherit;font-size:15px;resize:none}
[data-czat-pole]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:2px;border-color:var(--akcent)}
[data-czat-wyslij]{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:10px;background:var(--akcent);color:var(--tekst-odwrotny);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
[data-czat-wyslij][disabled]{opacity:.6;cursor:progress}
.czat-informacja{margin:0;padding:12px 16px 4px;border-top:1px solid var(--ramka);font-size:15px;line-height:1.45;color:var(--tekst-drugi);text-wrap:pretty}
.czat-informacja a{color:var(--tekst);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ramka-mocna);border-radius:3px}
.czat-informacja a:hover{color:var(--tekst-akcent);text-decoration-color:currentColor}
.czat-informacja a:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:2px}
.czat-informacja + [data-czat-formularz]{border-top:0}
/* Nagłówek, podpowiedzi, informacja i pole nie kurczą się: kurczy się tylko wątek,
   a i on ma dolną granicę. Bez tego na 320×568 wątek miał 32 px, a podpowiedzi
   wjeżdżały na nagłówek „fleetify · Asystent AI · ×”. */
[data-czat-okno] > header,[data-czat-podpowiedzi],.czat-informacja,[data-czat-formularz]{flex-shrink:0}
[data-czat-watek]{min-height:120px}
.czat-informacja-watek{display:none}
/* Niski ekran (telefon 667 px, laptop 640 px): pod wątkiem na stałe zostaje zdanie
   o asystencie AI i odnośnik do szczegółów (art. 50 AI Act), środek informacji stoi
   w wątku pod powitaniem, a podpowiedzi w jednym przewijanym rzędzie.
   Stopień pisma zostaje 15 px, jak w wiadomościach (czat-informacja.md, pkt 1.1).
   Czytnik ekranu dostaje pełną informację z opisu pola (środek schowany wizualnie,
   kopia w wątku ma aria-hidden). */
@media (max-height:760px){
  .czat-informacja{padding:8px 16px 2px}
  .czat-informacja-srodek{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .czat-informacja-watek{display:block;margin:0;padding:0 4px;font-size:15px;line-height:1.45;color:var(--tekst-drugi);text-wrap:pretty}
  [data-czat-podpowiedzi]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  [data-czat-podpowiedzi]::-webkit-scrollbar{display:none}
  [data-czat-podpowiedzi] button{flex:0 0 auto;white-space:nowrap}
  [data-czat-okno] > header{padding:8px 12px 8px 16px}
}
[data-czat] .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Przycisk konta pod odpowiedzią (narzędzie zaloz_konto, rysuje go app.js).
   Z obwódką, nie limonkowy: w oknie wypełniony jest już przycisk wysyłania,
   a odpowiedź czatu nie ma wyglądać jak baner. data-konto zostaje, bo tak
   rozpoznaje go przepisanie dla zalogowanych; reguła najechania zdejmuje
   limonkowe tło, które [data-konto] dostaje w całym serwisie. */
[data-czat-watek] .czat-konto{align-self:flex-start;display:inline-flex;align-items:center;max-width:88%;min-height:44px;padding:10px 16px;box-sizing:border-box;border:1px solid var(--ramka-mocniejsza);border-radius:10px;background:transparent;color:var(--tekst);font-size:15px;line-height:1.3;text-decoration:none;transition:border-color .2s;animation:czat-wiadomosc .32s cubic-bezier(.2,.8,.25,1) both}
[data-czat-watek] .czat-konto[data-konto]:hover{background:transparent!important;box-shadow:none!important;border-color:var(--tekst)}
@media (max-width:520px){
  [data-czat]{right:12px;bottom:12px;left:12px;align-items:stretch}
  /* Na telefonie bąbel z napisem miał 190 px i zasłaniał odnośniki pod
     wezwaniami. Zostaje sama ikona; etykieta idzie do czytnika ekranu. */
  [data-czat-otworz]{align-self:flex-end;width:56px;min-height:56px;padding:0;justify-content:center;border-radius:50%}
  [data-czat-etykieta]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-czat-ikona]{width:22px;height:22px}
  [data-czat-okno]{width:100%;height:calc(100dvh - 88px);border-radius:20px}
}
/* Kto prosi o mniej ruchu, dostaje mniej ruchu: okno i wiadomości pojawiają się
   od razu, zostaje samo przenikanie. */
@media (prefers-reduced-motion:reduce){
  [data-czat-okno],[data-czat][data-zamykanie] [data-czat-okno],[data-czat-watek] .wiadomosc,[data-czat-watek] .czat-konto,[data-czat-podpowiedzi] button{animation:czat-przenikanie .01s both}
  [data-czat-kropka]{animation:none}
  @keyframes czat-przenikanie{from{opacity:0}to{opacity:1}}
}
/* Bez JavaScriptu czat nie ma jak wysłać wiadomości, więc go nie pokazujemy. */
/* Bąbel nie może zasłaniać bloku zakupu: app.js stawia data-czat-ukryty, gdy
   prostokąt bąbla nachodzi na treść bloku [data-zamkniecie], i zdejmuje go,
   gdy blok minie. Otwarte okno czatu zostaje nietknięte. visibility wyłącza
   bąbel z kolejności Tab, dopóki go nie widać. */
[data-czat-otworz]{transition:transform .2s,box-shadow .3s,border-color .2s,opacity .2s,visibility 0s}
[data-czat][data-czat-ukryty]:not([data-otwarty]) [data-czat-otworz]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:transform .2s,box-shadow .3s,border-color .2s,opacity .2s,visibility 0s .2s}
/* Na telefonie [data-czat] to pas na całą szerokość ekranu (left i right 12 px),
   w którym widać tylko bąbel po prawej. Przezroczysta reszta pasa łapała
   dotknięcia przeznaczone dla przycisku pod spodem. */
@media (max-width:520px){
  [data-czat]{pointer-events:none}
  [data-czat] > *{pointer-events:auto}
}

/* ── ZAMKNIĘCIE: BLOK ZAKUPU NA KOŃCU STRONY ────────────────────────────────
   Jeden blok na stronę (build.mjs, sekcja 14f: zamkniecieHtml). Kolory wyłącznie z tokenów
   motywu, więc jasny i ciemny działają bez osobnych reguł. Bez karty, cienia
   i paska akcentu: tło sekcji i kreska u góry oddzielają go od FAQ.
   Na szerokim ekranie dwie kolumny (nagłówek | wybór i przycisk), na węższym
   jedna, w kolejności znacznika. Limonka jest tylko na przycisku. */
.zamkniecie{background:var(--tlo-sekcji);border-top:1px solid var(--ramka-slaba)}
.zam-srodek{max-width:1200px;margin:0 auto;padding:clamp(48px,6vw,88px) 24px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:960px){.zam-srodek{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(56px,7vw,112px);align-items:start}}
.zam-glowa{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:560px}
.zam-glowa h2{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-0.02em;text-wrap:balance}
.zam-hak{margin:0;font-size:18px;line-height:1.5;color:var(--tekst-drugi);text-wrap:pretty}
.zam-dopisek{margin:0;font-size:16px;line-height:1.5;color:var(--tekst-drugi);text-wrap:pretty}
/* Kicker w bloku bez limonki: w ciemnym motywie byłby drugim limonkowym akcentem tuż nad przyciskiem. */
.zamkniecie .kicker{color:var(--tekst-slaby)}
.zam-zakup{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;max-width:640px}
/* Wybór formy firmy: zwykłe wiersze z radiem, nie karty. Radio rysujemy sami
   w kolorze tekstu: natywne w ciemnym motywie Chrome wypełnia szarym kołem
   (niezaznaczone wyglądało na wyłączone), a Safari na iOS maluje akcent po
   swojemu; limonka na bieli miałaby 1,2:1 i zaznaczenie mogłoby zniknąć.
   Zostaje prawdziwy <input type=radio>: strzałki, Tab i czytnik działają. */
.zam-forma{width:100%;min-width:0;margin:0 0 12px;padding:0;border:0}
.zam-forma legend{padding:0;margin:0 0 8px;font-size:14px;color:var(--tekst-slaby)}
.zam-forma label{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 0;box-sizing:border-box;border-top:1px solid var(--ramka);cursor:pointer}
.zam-forma label:last-of-type{border-bottom:1px solid var(--ramka)}
.zam-forma input{flex:0 0 auto;-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:20px;height:20px;margin:0;border:1.5px solid var(--tekst-slaby);border-radius:50%;background:transparent;cursor:pointer;transition:border-color .2s}
.zam-forma input::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tekst);transform:scale(0);transition:transform .15s}
.zam-forma input:checked{border-color:var(--tekst)}
.zam-forma input:checked::before{transform:scale(1)}
.zam-forma input:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
/* W trybie wysokiego kontrastu własne kółko mogłoby zniknąć: wraca natywne. */
@media (forced-colors:active){.zam-forma input{-webkit-appearance:auto;appearance:auto}.zam-forma input::before{content:none}}
.zam-opis{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;min-width:0}
.zam-opcja{font-size:17px;color:var(--tekst-drugi);transition:color .2s}
.zam-pod{font-size:14px;color:var(--tekst-slaby)}
.zam-forma label:hover .zam-opcja,.zam-forma label:has(input:checked) .zam-opcja{color:var(--tekst)}
/* Od 960 px balance i 34em: w dwóch kolumnach jedno zdanie ceny łamało się na
   sierotę „jedno auto.”. Na telefonie zostaje pretty, bo balance odrywał „150 zł”
   od „plan JDG”. */
.zam-cena{margin:0;max-width:34em;font-size:17px;line-height:1.5;color:var(--tekst);font-variant-numeric:tabular-nums;text-wrap:pretty}
@media (min-width:960px){.zam-cena{text-wrap:balance}}
.zam-paczki{margin:0;font-size:15px;line-height:1.5;color:var(--tekst-drugi);text-wrap:pretty}
/* Wysokość przez min-height i padding, nie przez height: dłuższy napis na
   wąskim ekranie łamie się na dwie linie i nie wychodzi poza przycisk. */
.zam-przycisk{margin-top:12px;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;box-sizing:border-box;border-radius:8px;background:var(--akcent);color:var(--tekst-odwrotny);font-size:17px;line-height:1.25;text-align:center;text-decoration:none;transition:background .2s,box-shadow .3s,transform .2s}
.zam-link{display:inline-flex;align-items:center;min-height:44px;color:var(--tekst-drugi);font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ramka-mocna);border-radius:4px;transition:color .2s,text-decoration-color .2s}
.zam-link:hover{color:var(--tekst);text-decoration-color:var(--tekst-akcent)}
.zam-link:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
.zam-drobne{margin:4px 0 0;max-width:560px;font-size:14px;line-height:1.55;color:var(--tekst-slaby);text-wrap:pretty}
.zam-nw{white-space:nowrap}
/* Roobert ma alternatywy kontekstowe (calt): cyfra w nawiasie tuż po literze
   zamienia się w cyfrę w kółku, a „->” w strzałkę. „FA(3)” nad przyciskiem
   czytało się „FA③”, a „JPK_EWP(4)” we wpisie „JPK_EWP④”: to nazwy
   dokumentów, nie ikony. Wyłączamy calt w nazwach z bloku zakupu, w treści
   wpisów i w wątku czatu (tekst z modelu). Sborka ostrzega, gdy taki zapis
   stanie poza tymi miejscami (sprawdzAlternatywyGlifow). */
.zam-nw,.artykul-cialo,[data-czat-watek]{font-feature-settings:"calt" 0}
/* Wyjaśnienie „bez JavaScriptu” (strona główna, id=pokaz) stoi pod blokiem
   zakupu, nie w nim: mówi o pokazie, a pokazu w bloku zakupu nie ma. */
.bez-js-pokaz{box-sizing:border-box;width:calc(100% - 48px);max-width:1152px;margin:clamp(40px,5vw,64px) auto}
@media (max-width:767px){.zam-przycisk{width:100%}}
/* Kroki po kliknięciu (cennik): zwykła lista numerowana, bez kart i kółek. */
.zam-kroki{margin:0;padding:0 0 0 1.4em;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.5;color:var(--tekst-drugi);text-wrap:pretty}
.zam-kroki li{padding-left:4px}
.zam-kroki li::marker{color:var(--tekst-slaby);font-variant-numeric:tabular-nums}

/* Link pod potwierdzeniem rezerwacji pokazu: konto można założyć od razu. */
.po-pokazie{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;color:var(--tekst);font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--ramka-mocna);border-radius:4px}
.po-pokazie:hover{text-decoration-color:var(--tekst-akcent)}

/* „Dla kierowcy”: przewodniki po licencji w miastach jako jedna linia
   odnośników nad FAQ, a nie trzynaście kart przed blokiem zakupu. */
.miasta-linia{border-bottom:1px solid var(--ramka-slaba)}
.miasta-linia .srodek{padding-top:clamp(32px,4vw,48px);padding-bottom:clamp(32px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.miasta-linia p{margin:0;max-width:880px;font-size:17px;line-height:1.9;color:var(--tekst-drugi);text-wrap:pretty}
.miasta-linia a{color:var(--tekst);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ramka-mocna);border-radius:3px}
.miasta-linia a:hover{text-decoration-color:var(--tekst-akcent)}
.miasta-linia a:focus-visible,.po-pokazie:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}

/* ── STOPKA ─────────────────────────────────────────────────────────────────
   Cztery do pięciu kolumn na desktopie, jedna na telefonie. Kolumny są listami
   (<ul>), bo to lista odnośników, a nie zdanie; nagłówki kolumn to <h2>, więc
   czytnik ekranu ma po czym skakać. Pasek rejestrowy (KRS/NIP/REGON) jest
   oddzielony kreską — to dowód, z kim czytelnik ma do czynienia, i ma być
   znaleziony wzrokiem, a nie doczytany. */
footer[data-stopka]{border-top:1px solid var(--ramka-slaba);background:var(--tlo-stopki);color:var(--tekst-przygaszony);font-size:15px}
footer[data-stopka] .srodek{max-width:1200px;margin:0 auto;padding:clamp(40px,5vw,64px) 24px 32px;width:100%;box-sizing:border-box}
.siatka-stopki{display:grid;grid-template-columns:minmax(240px,1.6fr) repeat(auto-fit,minmax(150px,1fr));gap:32px 40px;align-items:start}
.siatka-stopki .marka{display:flex;flex-direction:column;gap:12px;max-width:360px}
.siatka-stopki .znak{display:inline-flex;align-items:center;gap:8px;color:var(--tekst);text-decoration:none;font-size:22px;letter-spacing:-0.02em;min-height:44px;border-radius:6px}
.siatka-stopki .znak:hover{color:var(--tekst-akcent)}
.siatka-stopki .opis{margin:0;font-size:14px;line-height:1.55;color:var(--tekst-slaby);text-wrap:pretty}
.siatka-stopki .firma{margin:6px 0 0;display:flex;flex-direction:column;gap:2px;color:var(--tekst);font-size:15px}
.siatka-stopki .firma .forma{color:var(--tekst-slaby);font-size:13px}
.siatka-stopki .adres{margin:0;font-size:14px;color:var(--tekst-slaby)}
.siatka-stopki .kolumna h2{margin:0 0 4px;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tekst-akcent);font-weight:400}
.siatka-stopki .kolumna ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.siatka-stopki .kolumna li{margin:0}
.siatka-stopki .kolumna a{display:flex;align-items:center;min-height:40px;padding:4px 0;color:var(--tekst-drugi);text-decoration:none;font-size:15px;line-height:1.35;border-radius:4px}
.siatka-stopki .kolumna a:hover{color:var(--tekst-akcent)}
.siatka-stopki .kolumna a[aria-current="page"]{color:var(--tekst)}
.siatka-stopki .kolumna .podpis{margin:12px 0 2px;font-size:13px;color:var(--tekst-slaby)}
.siatka-stopki .kolumna ul.miasta{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));column-gap:20px}
/* Lista bloga: od 1100 px cztery karty w rzędzie. Przy trzech 16 wpisów zostawiało
   jedną kartę samą w ostatnim rzędzie. */
@media (min-width:1100px){section:not([data-hero]) .lista-wpisow[data-lista]{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.rejestr{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(28px,4vw,40px);padding-top:20px;border-top:1px solid var(--ramka-slaba);font-size:14px;color:var(--tekst-drugi)}
.rejestr .etykieta{color:var(--tekst-slabszy);letter-spacing:0.08em;text-transform:uppercase;font-size:11px;margin-right:6px}
.dokumenty{display:flex;flex-wrap:wrap;gap:0 28px;margin-top:8px}
.dokumenty a{display:inline-flex;align-items:center;min-height:44px;color:var(--tekst-drugi);text-decoration:none;font-size:14px;border-radius:4px}
.dokumenty a:hover{color:var(--tekst-akcent)}
.dokumenty a[aria-current="page"]{color:var(--tekst)}
.prawne{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:12px;font-size:13px;color:var(--tekst-slaby)}
.prawne .zastrzezenie{margin:0;max-width:760px;text-wrap:pretty;line-height:1.5}
.prawne .prawa{margin:0;white-space:nowrap}
footer[data-stopka] a:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
@media (max-width:767px){
  /* Jedna kolumna dawała stopkę o wysokości 1 370 px: każdy odnośnik w osobnym
     wierszu po 40 px. Dwie kolumny i ciaśniejsze wiersze skracają ją o połowę,
     a marka z opisem zostaje na całą szerokość. */
  .siatka-stopki{grid-template-columns:1fr 1fr;gap:24px 20px}
  .siatka-stopki .marka{grid-column:1 / -1;max-width:none}
  .siatka-stopki .kolumna a{min-height:40px;padding:3px 0;font-size:14px}
  .prawne{flex-direction:column}
}

/* ── NAGŁÓWEK: SZKLANY PASEK WISZĄCY NAD TREŚCIĄ ────────────────────────────
   Makieta miała pasek na pełną szerokość, przyklejony do góry i oddzielony
   kreską. Tutaj <header> zostaje tylko pojemnikiem (przezroczystym, sticky),
   a szkłem jest WNĘTRZE o szerokości treści: zaokrąglone, odsunięte od krawędzi
   i unoszące się nad stroną. Efekt szkła to trzy warstwy naraz — rozmycie tła
   z podbiciem nasycenia (przez rozmycie kolory bledną), własny gradient, obwódka
   i wewnętrzny błysk u góry plus miękki cień pod spodem.
     Wysokość paska (64 px) i odstęp (12 px) trzymamy w zmiennych, bo zależy od
   nich pozycja panelu menu, kotwice (scroll-margin-top) i maksymalna wysokość
   rozwiniętego menu. */
:root{--pasek:64px;--odstep-paska:12px}
header{position:sticky;top:0;z-index:30;background:none!important;border-bottom:0!important;backdrop-filter:none!important;padding:var(--odstep-paska) 24px 0}
header > div{position:relative;border-radius:20px;background:linear-gradient(180deg,var(--szklo-gora),var(--szklo-dol));backdrop-filter:blur(10px) saturate(2.2);-webkit-backdrop-filter:blur(10px) saturate(2.2);border:1px solid var(--nakladka-12);box-shadow:0 24px 50px -26px var(--cien-95),0 3px 12px -6px var(--cien-sredni),inset 0 1px 0 var(--nakladka-16),inset 0 -1px 0 var(--cien-slaby);transition:box-shadow .3s,border-color .3s}
/* Błysk u góry szkła: cienki, wygaszany na bokach — bez niego krawędź wygląda
   jak zwykły ciemny prostokąt z rozmyciem. */
header > div::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;border-radius:1px;background:linear-gradient(90deg,transparent,var(--nakladka-28) 22%,var(--akcent-30) 50%,var(--nakladka-28) 78%,transparent);pointer-events:none}
header > div::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 180% at 82% -60%,var(--x-224-246-75-01),transparent 58%);pointer-events:none}
header > div > *{position:relative;z-index:1}
/* Znak firmowy: kształt z pliku, kolor z motywu. */
/* Ścieżka w url() liczy się od PLIKU ARKUSZA, nie od strony: „assets/logo-znak.svg”
   dawało /assets/assets/… i maska po cichu nie wchodziła (znak znikał bez błędu). */
[data-znak]{background-color:var(--znak-logo);-webkit-mask:url(logo-znak.svg) center/contain no-repeat;mask:url(logo-znak.svg) center/contain no-repeat}
/* PORZĄDEK W PASKU. Makieta rozpychała trzy elementy przez space-between, więc
   nawigacja wisiała w przypadkowym miejscu, a przełącznik motywu odjeżdżał na
   sam brzeg. Teraz: logo po lewej, nawigacja WYŚRODKOWANA w pasku, a po prawej
   jedna grupa (CTA i przełącznik) trzymana razem stałym odstępem. */
header > div{justify-content:flex-start!important;gap:24px!important}
header nav[data-desktop-only]{margin-left:auto;margin-right:auto;order:1}
/* Auto-marginesy we flexie DZIELĄ wolne miejsce, a nie centrują: prawa grupa
   (przełącznik i przycisk) jest szersza od logo, więc nawigacja siadała o kilkadziesiąt
   pikseli za bardzo w lewo. Od 1280 px wyjmujemy ją z układu i przypinamy do środka
   szkła; niżej zostaje w potoku, bo tam liczy się już tylko to, żeby wszystko się zmieściło.
   Próg był 1100 px przy pięciu pozycjach. Szósta („Umów spotkanie”, 114 px) poszerzyła
   nawigację do 558 px i wyśrodkowana mieści się obok prawej grupy dopiero od 1280 px
   (zmierzone: 18 px odstępu od przełącznika motywu; przy 1240 px zostawało 7 px,
   przy 1180 px nawigacja łamała się na dwie linie i wchodziła pod przełącznik). */
@media (min-width:1280px){
  header nav[data-desktop-only]{position:absolute;left:50%;transform:translateX(-50%);margin:0}
}
header > div > a:first-child{order:0}
/* Przełącznik motywu stoi TUŻ PRZY przycisku, po jego lewej: to para „ustawienie
   i akcja”, a nie dwa osobne elementy rozrzucone po pasku. Kolejność zmieniamy
   flexem, nie w znaczniku, bo znacznik przychodzi z makiety. */
header > div > details[data-menu]{order:4}
header nav a{color:var(--tekst-nawigacji)}
header nav a[aria-current="page"]{color:var(--tekst)}
/* Kotwice (#pokaz, #faq, #zus) nie mogą chować się pod wiszącym paskiem. */
[id]{scroll-margin-top:calc(var(--pasek) + var(--odstep-paska) + 12px)}
/* Gdy szkło nie jest dostępne (starsze przeglądarki) albo użytkownik prosi
   o mniej przezroczystości — pełny, nieprzezroczysty pasek. Treść zawsze czytelna. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header > div{background:var(--tlo-pelne)}
  [data-menu-panel]{background:var(--tlo-sekcji)}
}
@media (prefers-reduced-transparency:reduce){
  header > div{background:var(--tlo-pelne);backdrop-filter:none;-webkit-backdrop-filter:none}
  [data-menu-panel]{background:var(--tlo-sekcji);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:767px){
  header{padding:8px 10px 0}
  header > div{border-radius:16px}
}

/* ── WEZWANIA W PASKU ───────────────────────────────────────────────────────
   Główne wezwanie to „Załóż konto”; „Zaloguj się” stoi obok jako zwykły
   odnośnik, bo to droga dla tych, którzy już są klientami. Poniżej 768 px
   logowanie schodzi do menu: w pasku ma zostać jedno wezwanie, nie trzy. */
header > div > [data-logowanie]{order:2}
header > div > [data-konto]{order:3;margin-left:0}
header > div > [data-motyw-przelacz]{order:1;margin-left:auto;margin-right:-12px}
@media (max-width:767px){
  /* !important, bo konkurencją jest display:inline-flex w atrybucie style
     (znacznik wezwań budujemy z tym samym stylem, co makieta). */
  header > div > [data-logowanie]{display:none!important}
}
@media (min-width:768px){
  [data-menu-logowanie]{display:none}
}

/* Stany wezwań „Załóż konto”. Muszą stać w arkuszu, a nie w atrybutach
   style-hover: te przyciski powstają PO zapisaniu arkusza (sekcja 14e i 14f),
   więc wygenerowana wtedy klasa nie miałaby swojej reguły i przycisk zostawał
   bez najechania i bez widocznego fokusu.
   Obwódka fokusu ma własny token: limonka na białym tle motywu jasnego daje
   1,5:1 i po prostu jej nie widać. */
/* „!important” nie jest tu ozdobą. Te wezwania powstają w generatorze i noszą
   pełny styl w atrybucie „style” (tło, kolor, podkreślenie). Deklaracja inline
   ma wyższy priorytet niż zwykła reguła z arkusza, więc bez „!important” cały
   ten blok był martwy: kursor stał na przycisku, „:hover” pasował, a tło się
   nie ruszało. Zmierzone: 4 elementy [data-konto] na każdej z 21 stron.
   Właściwości, których w stylu inline NIE MA (transform, outline), działają
   i bez tego — dlatego „:active” i „:focus-visible” zostają bez zmian. */
[data-konto]:hover{background:var(--akcent-mocny)!important;box-shadow:0 0 0 6px var(--akcent-15)!important;transform:translateY(-1px)}
[data-konto]:active{transform:translateY(1px)}
[data-konto]:focus-visible,[data-logowanie]:focus-visible,[data-menu-logowanie]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
[data-logowanie]:hover{color:var(--tekst)!important}
/* Karty planów na cenniku: przycisk z obwódką, obie karty tej samej wagi.
   Wypełniony przycisk zakupu jest na stronie jeden, w bloku #kup na końcu.
   data-konto zostaje, bo zalogowanemu app.js przepisuje go na wejście do
   panelu; reguła niżej zdejmuje tylko limonkowe tło najechania. */
[data-konto][data-karta-planu]:hover{background:transparent!important;box-shadow:none!important;border-color:var(--tekst)!important}
/* Gdy przycisk bloku zakupu (#kup) jest na ekranie, „Załóż konto” w pasku
   oddaje mu limonkę i zostaje z obwódką: dwa wypełnione przyciski z tym samym
   napisem na jednym ekranie. Atrybut na <html> stawia app.js
   (IntersectionObserver na #kup [data-zam-przycisk]). !important, bo tło
   i kolor przycisku w pasku stoją w atrybucie style. */
html[data-kup-widoczny] header [data-konto]{background:transparent!important;color:var(--tekst)!important;box-shadow:inset 0 0 0 1px var(--ramka-mocniejsza)!important}
html[data-kup-widoczny] header [data-konto]:hover{background:transparent!important;box-shadow:inset 0 0 0 1px var(--tekst)!important}
/* Lista w karcie planu: zwykłe punkty zamiast ikon „ptaszków”. */
[data-lista-planu] > li + li{margin-top:12px}
[data-lista-planu] > li::marker{color:var(--tekst-slaby)}

/* „Umów pokaz” jako odnośnik tekstowy obok konta: podkreślenie nabiera limonki
   przy najechaniu, tekst jaśnieje. Ma być czytelne, ale nie konkurować.
   Zaokrąglenia obwódki fokusu tu nie ustawiamy: element ma w stylu inline
   border-radius:8px, a deklaracja z arkusza i tak by przegrała. */
/* Podkreślenie bierze --tekst-akcent, nie --akcent: limonka #E0F64B na jasnym tle
   motywu daje 1,1:1, czyli przy najechaniu podkreślenie po prostu znika.
   --tekst-akcent to ta sama limonka w ciemnym motywie i oliwka #4C5A00 (6,8:1)
   w jasnym. */
[data-wezwanie-pokaz]:hover,[data-wezwanie-hero]:hover{color:var(--tekst)!important;text-decoration-color:var(--tekst-akcent)!important}
[data-wezwanie-pokaz]:focus-visible,[data-wezwanie-hero]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}

/* Zrzut ZUS na telefonie: plik 375 ma na dole pasek nawigacji, więc kadr wraca
   do góry (na desktopie kadr od 87% omija pole miesiąca w obcym języku). */
@media (max-width:767px){[data-kadr] img[src*="zus-dra"]{object-position:top left!important}}

/* ── HERO: JEDEN UKŁAD NA KAŻDEJ STRONIE ───────────────────────────────────
   Od 17.09.2026 każda strona ma to samo hero, co strona główna: tekst
   wyśrodkowany na górze (etykieta, nagłówek, lead, wezwania, zdanie o cenie),
   a pod nim, gdy strona ma co pokazać, prawdziwy ekran panelu na pełną
   szerokość kolumny. Wpisy bloga i strony miast mają ten sam tekst, bez ekranu.
   UMOWA ZNACZNIKÓW (trzymają się jej reguły niżej i krok ze zdjęciem w tle):
     section[data-hero]                 sekcja hero, jedna na stronę (pilnuje walidujHtml)
       > [data-hero-tlo]                warstwy ozdobne (poświata, wygaszenie do tła), aria-hidden
       > [data-hero-tekst]              blok tekstu, zawsze jest, zawsze position:relative
       > [data-hero-ekran]              zrzut panelu pod tekstem (strona główna, Dla floty,
                                        Dla kierowcy, Jak to działa, Cennik); na liście
                                        bloga, wpisach i miastach go nie ma
         > div:first-child              ramka zrzutu z aspect-ratio ([data-kadr])
         > [data-hero-karta]            pływające karty (tylko strona główna, desktop)
   Style bazowe stoją w atrybutach style makiet (edytor musi je widzieć), więc
   poprawki niżej potrzebują !important. */
/* Warunki na Cenniku („Płatność co miesiąc · Bez limitu wyciągów”) łamią się
   tylko między pozycjami: „Bez / umowy” w dwóch wierszach czytało się jak dwie
   różne rzeczy. Kropki są w znaczniku, doklejone do pozycji przed nimi. */
[data-hero-tekst] ul[data-cena-pod-wezwaniem] li{white-space:nowrap}
/* Hero bez zrzutu (lista bloga, wpisy, miasta): blok tekstu jest ostatni w sekcji
   i sam trzyma dolny oddech, tyle co odstęp zdania o cenie od ramki na głównej.
   Wcześniej 97 px paddingu plus 72 px sekcji pod spodem dawało 169 px pustki. */
section[data-hero] > [data-hero-tekst]:last-child{padding-bottom:clamp(40px,4vw,56px)!important}
@media (max-width:767px){
  /* Na telefonie nagłówek i lead zjadały cały pierwszy widok: zrzut zaczynał się
     na 743 px przy oknie 844 px, a zdanie o cenie w ogóle nie mieściło się nad
     zagięciem. Ciaśniejszy rytm oddaje około 60 px. */
  section[data-hero] > [data-hero-tekst]{gap:16px!important;padding-top:32px!important}
  [data-hero-tekst] h1{font-size:32px!important;line-height:1.08!important}
  /* Druga część nagłówka strony głównej („Wyciągi, tygodniówki, ZUS…”) szła
     w tym samym stopniu co tytuł i w kolorze tekstu akapitowego, więc na
     telefonie pierwszy ekran to była ściana dziesięciu linii bez hierarchii.
     Tam to wyraźny podtytuł — mniejszy od tytułu, większy od leadu. Znacznik
     [data-hero-podtytul] stoi tylko tam, gdzie druga część jest wyliczanką;
     krótkie dopowiedzenia („Policzone.”, „tydzień po tygodniu.”) są dalszym
     ciągiem zdania i zostają w stopniu nagłówka. */
  [data-hero-tekst] h1 [data-hero-podtytul]{font-size:21px;line-height:1.24;letter-spacing:-0.01em;margin-top:10px}
  /* Lead schodzi o stopień: przy 16 px zajmował sześć linii i ważył tyle samo
     co podtytuł, który mówi to samo krócej. Tylko akapit tuż pod nagłówkiem:
     zdanie o cenie i metryczka wpisu mają własne, mniejsze stopnie. */
  [data-hero-tekst] > h1 + p{font-size:15px!important;line-height:1.55!important}
  /* Zrzut stoi pod tekstem i ma pełną szerokość; pływające karty to
     dekoracja powtarzająca treść, na telefonie tylko zasłaniałyby ekran.
     Selektor przez „section[data-hero] >” celowo: starsza reguła z audytu
     telefonu „section:has(h1[data-rise]) > div” (0,1,3, niżej w arkuszu) dawała
     blokowi tekstu 28 px, a ekranowi 40 px od góry i 28 px od dołu, więc między
     zdaniem o cenie a ramką było 92 px zamiast 24 px, a przy 360×740 zrzut na
     „Dla floty” i „Dla kierowcy” w ogóle nie wchodził w pierwszy ekran. */
  section[data-hero] > [data-hero-ekran]{margin-top:24px!important;padding:0 16px!important}
  section[data-hero] > [data-hero-tekst]:not(:last-child){padding-bottom:0!important}
  [data-hero-karta]{display:none!important}
  /* Kadr 16:10 na telefonie ma 224 px i mieści sam nagłówek panelu. Pionowy
     kadr pokazuje też kwotę i pierwsze pozycje, czyli to, po co ten zrzut
     w ogóle stoi na stronie. */
  [data-hero-ekran] > div:first-child{aspect-ratio:4/5!important}
  /* Co widać w ramce, nie ustala tu żaden object-position: do hero idą gotowe
     kadry WebP w proporcji ramki (4:5 na telefonie, 16:10 wyżej), opisane
     w budowa/kadry-hero.mjs. */
}
@media (max-width:520px){
  /* Etykieta nad nagłówkiem ma na telefonie jedną linię: dopowiedzenie po „·”
     („od jednego auta do całej floty”) łamało ją na dwie i spychało zrzut
     o kolejne 18 px. Nagłówek i lead mówią to samo pełnym zdaniem. */
  [data-hero-dopisek]{display:none}
}

/* ── TELEFON: KOMPOZYCJE ATRAP ─────────────────────────────────────────────
   Makieta układa zrzut panelu w 3D (szerokość 125%, obrót, karty pływające
   wystające za lewą krawędź). Na 390 px to się rozsypywało: karty zasłaniały
   nagłówek zrzutu, a sam zrzut był ucięty. Na telefonie zrzut leży płasko,
   a pływające karty (dekoracja powtarzająca treść) znikają. Ta sama zasada
   dla atrap w sekcjach kroków, floty i kierowcy. */
/* !important wszędzie niżej, bo makiety trzymają układ w atrybutach style,
   a tych zwykła reguła arkusza nie przebije. */
@media (max-width:767px){
  /* (Hero ma własny blok wyżej: „HERO: JEDEN UKŁAD NA KAŻDEJ STRONIE”.) */
  #panel [style*="pointer-events:none"][style*="position:absolute"],
  #flota [style*="pointer-events:none"][style*="position:absolute"],
  #jdg [style*="pointer-events:none"][style*="position:absolute"]{display:none!important}
  /* Sekcje krótsze: 56 px odstępu góra/dół z makiety to na telefonie pusty ekran co sekcję. */
  body > div > section > div[style*="padding:clamp(56px"],
  body > div > section > div[style*="padding:clamp(64px"]{padding-top:40px!important;padding-bottom:40px!important}
  /* Karty „Znasz to?”: rysowane atrapy nad tekstem są dekoracją, tekst zostaje. */
  #problem article > div[aria-hidden="true"]{display:none!important}
  /* Karty wpisów na stronie głównej: miniatura zabierała 190 px na kartę; tytuł i zajawka mówią wszystko. */
  #blog article .kafel-obraz, #blog article picture{display:none!important}
}
/* Siatki z makiet „repeat(auto-fit,minmax(300px,1fr))”: przy 320 px ekranu
   i 24 px marginesu na treść zostaje 272 px, a kolumna nie schodzi poniżej 300,
   więc karty cennika, kroki i FAQ wystawały o 28-44 px i body ucinało ich prawą
   krawędź. min(…,100%) daje to samo, gdy kolumna się mieści, i jedną kolumnę
   na szerokość kontenera, gdy nie. Hero pomijamy: przebudowuje je osobna gałąź. */
section:not([data-hero]) [style*="repeat(auto-fit,minmax(250px,1fr))"]{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))!important}
section:not([data-hero]) [style*="repeat(auto-fit,minmax(280px,1fr))"]{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important}
section:not([data-hero]) [style*="repeat(auto-fit,minmax(300px,1fr))"]{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))!important}
section:not([data-hero]) [style*="repeat(auto-fit,minmax(320px,1fr))"]{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))!important}
/* Karta „Dwa niezależne przebiegi” na głównej: przy 320 px dwie kwoty i znacznik
   „zgodne · plik wydany” (nowrap) nie mieszczą się w wierszu; znacznik schodzi niżej. */
section:not([data-hero]) li > [aria-hidden="true"] > div[style*="align-items:baseline;gap:10px"]{flex-wrap:wrap;row-gap:6px}

/* ── TELEFON: RESZTA Z AUDYTU ────────────────────────────────────────────── */
@media (max-width:767px){
  /* Zygzak z „order” składa się na telefonie w kartę PRZED jej nagłówkiem. */
  section [style^="order:"],section [style*=";order:"]{order:0!important}
  /* Wiersze terminów „Najbliższe obowiązki”: chip pod opis, numer rachunku w 1–2 liniach. */
  section div[style*="grid-template-columns:auto 1fr auto"][style*="padding:12px"]{grid-template-columns:auto minmax(0,1fr)!important;row-gap:6px!important}
  section div[style*="grid-template-columns:auto 1fr auto"][style*="padding:12px"] > :last-child{grid-column:2;justify-self:start}
  /* „Pięć rzeczy”: ciaśniej, bez ruszania tekstu. */
  #funkcje > div{gap:40px!important;padding-top:48px!important;padding-bottom:48px!important}
  #funkcje [data-feature]{gap:20px!important}
  #funkcje [data-feature] > div:last-child{padding:16px!important}
  body > div > section > div[style*="gap:56px"]{gap:40px!important}
  div[style*="border-radius:12px;padding:24px"]{padding:18px!important}
  /* Kadr zrzutów z panelu: pas z treścią, nie pasek logo. */
  [data-kadr] img[src*="zus-dra"]{object-position:left 10%!important}
  [data-kadr] img[src*="kalendarz"]{object-position:left 9%!important}
  [data-kadr] img[src*="ksiega"]{object-position:left 22%!important}
  [data-kadr] img[src*="deklaracje"]{object-position:left 3%!important}
  [data-kadr] img[src*="kadry-karta"]{object-position:left 6%!important}
  [data-kadr] img[alt^="Lista aut floty"]{object-position:left 9%!important}
  /* Źródła: cel dotyku 40 px bez rozjeżdżania rytmu listy. */
  /* vertical-align:top: punktor stał przy OSTATNIEJ linii zawiniętego odnośnika
     (inline-block wyrównuje się do linii bazowej swojej ostatniej linii). */
  .artykul li > a:only-child{display:inline-block;vertical-align:top;padding:10px 0;margin:-6px 0}
  .artykul ul li{margin:8px 0}
  /* Nagłówki bez sierot. */
  h2,h3{text-wrap:balance}
  /* Blog: filtry w jednym przewijanym rzędzie, kafle kart schowane (27% wysokości listy). */
  [aria-label="Kategorie wpisów"]{flex:1 1 100%;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;margin:0 -24px;padding:2px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  [aria-label="Kategorie wpisów"]::-webkit-scrollbar{display:none}
  [data-filtr]{flex:0 0 auto}
  [data-licznik]{margin-left:0!important;font-size:14px!important}
  .karta .kafel{display:none}
  /* Z audytu telefonu, sprzed wspólnego hero. Blok tekstu i ekran hero mają
     mocniejsze reguły w bloku „HERO: JEDEN UKŁAD…”. Taśmy haseł pod zrzutem na
     stronie głównej już nie ma, więc reguła dotyka tylko warstw ozdobnych
     [data-hero-tlo]; zostaje, żeby nie zmieniać rozmiaru poświaty na telefonie. */
  section:has(h1[data-rise]) > div{padding-top:40px!important;padding-bottom:28px!important}
  section:has([aria-label="Kategorie wpisów"]) > div{padding-top:24px!important;gap:20px!important}
  /* Czat i okno: cele dotyku, czytelne drobne teksty. */
  [data-czat-podpowiedzi] button{min-height:44px;font-size:14px}
  [data-zgoda]{font-size:14px!important}
  /* „Jak to działa”: chip nazwy pliku pod nazwą, liczby kafli w jednej linii,
     podpisy pozycji jako druga linijka, teksty 14 px. */
  div:has(> span > [data-w="step"]),[data-panel] [data-rowin="6"],[data-panel] [data-rowin] span > span,[data-panel="1"] > [data-fade] + [data-fade] > span:last-child{font-size:14px}
}
@media (max-width:479px){
  [data-panel="1"] [data-fly]{grid-template-columns:auto minmax(0,1fr);gap:6px 12px}
  [data-panel="1"] [data-fly] > span:last-child{grid-column:2;justify-self:start}
  [data-panel="1"] > [data-fade]:nth-of-type(2){align-items:end}
  [data-panel="1"] > [data-fade] + [data-fade]{flex-direction:column;align-items:flex-start;gap:6px}
  [data-panel="2"] [data-rowin] > span:nth-child(2) > span,[data-panel="3"] [data-rowin] > span:first-child > span{display:block}
  [data-panel="3"] > div:first-child{flex-wrap:wrap;gap:6px 12px}
  [data-panel="3"] > div:first-child > span:last-child{white-space:nowrap}
}
@media (max-width:520px){
  /* Okno rezerwacji: 32 px paddingu + 16 px marginesu zjadały 96 px szerokości. */
  [data-modal]{padding:10px!important}
  [data-okno-panel]{padding:22px 18px!important;max-height:calc(100dvh - 20px)!important}
  /* Cennik: karty planów i kalkulator z paddingiem 24 zamiast 32–36. */
  body.s-cennik section article,body.s-cennik div[style*="padding:32px;display:flex;flex-direction:column;gap:24px"]{padding:24px!important}
}
/* Suwaki na telefonie: tor 4 px był jedynym celem dotyku. Element rośnie do 44 px,
   ale tor zostaje cienki, bo gradient rysujemy i przycinamy do pola treści
   (samo background-clip nie wystarcza: bez background-origin gradient nadal
   startuje od krawędzi paddingu i wygląda jak gruba wstęga). */
@media (max-width:767px){
  /* !important przy clip/origin: reguła zebrana z makiety ustawia skrócony
     „background”, a skrót zeruje clip i origin do wartości początkowych. */
  body input[type=range]{height:44px!important;padding:20px 0!important;box-sizing:border-box!important;background-clip:content-box!important;background-origin:content-box!important}
}

/* Tabele we wpisach i na stronach miejskich są szersze niż ekran telefonu
   (min-width 460 px): pudełko .tabela przewija je poziomo zamiast rozpychać stronę. */
.tabela{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
/* Na telefonie tabela z dwiema kolumnami mieści się w 342 px, jeśli pozwolić
   komórkom zawijać: bez tego min-width 460 chowało kolumnę z kwotą za krawędzią. */
@media (max-width:767px){.tabela table{min-width:0!important}.tabela td,.tabela th{white-space:normal!important}}
/* Kontener flex wyrzuca węzły tekstowe złożone z samych odstępów, więc
   „za <span>15</span> <span>dni</span>” w chipie czytało się „za15dni”. */
:is([style*="inline-flex"],[style*="display:flex"]):not([style*="gap:"]) > [data-term="zus-liczba"],
:is([style*="inline-flex"],[style*="display:flex"]):not([style*="gap:"]) > [data-term="zus-slowo"]{margin-left:.28em}

/* ── PRZEŁĄCZNIK MOTYWU ─────────────────────────────────────────────────────
   Cel dotykowy 44×44, jak przycisk menu. Napis jest dla czytnika ekranu i dla
   klawiatury (aria-pressed mówi, czy jasny jest włączony); na ekranie widać samą
   ikonę, bo pasek na telefonie jest ciasny. Ikona rysowana CSS-em: pełne kółko
   (słońce) i to samo kółko z wyciętym księżycem przez cień wewnętrzny. */
[data-motyw-przelacz]{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--ramka);border-radius:10px;background:var(--tlo-sekcji);color:var(--tekst);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
[data-motyw-przelacz]:hover{border-color:var(--akcent)}
[data-motyw-przelacz]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
[data-motyw-napis]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Wersja w panelu menu: pełnej szerokości, z widocznym napisem, oddzielona kreską
   od odnośników, bo to ustawienie, a nie kolejna strona. */
[data-motyw-w-menu]{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin-top:4px;padding:0 4px;border:0;border-top:1px solid var(--ramka-slaba);border-radius:0;background:none;color:var(--tekst-drugi);font:inherit;font-size:17px;cursor:pointer}
[data-motyw-w-menu]:hover{color:var(--akcent)}
[data-motyw-w-menu] [data-motyw-napis]{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
[data-motyw-w-menu] [data-motyw-ikona]{box-shadow:inset 6px -6px 0 0 var(--tlo-sekcji)}
@media (max-width:767px){header > div > [data-motyw-przelacz]{display:none}}
@media (min-width:768px){[data-motyw-w-menu]{display:none}}
[data-motyw-ikona]{position:relative;display:block;width:16px;height:16px;border-radius:50%;background:currentColor;box-shadow:inset 6px -6px 0 0 var(--tlo-sekcji);transition:box-shadow .3s,transform .3s}
[data-motyw-ikona]::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:radial-gradient(circle,transparent 55%,currentColor 56%,currentColor 60%,transparent 61%);opacity:0;transition:opacity .3s}
:root[data-motyw="jasny"] [data-motyw-ikona]{box-shadow:none;transform:scale(0.72)}
:root[data-motyw="jasny"] [data-motyw-ikona]::after{opacity:1}

/* ── NAWIGACJA MOBILNA ──────────────────────────────────────────────────────
   <details> jest natywnym disclosure: działa bez JS i sam wystawia stan
   czytnikowi ekranu. Panel jest nakładką pod paskiem nagłówka; app.js dokłada
   Escape, zamykanie kliknięciem obok i pułapkę fokusu. */
[data-menu]{position:static;flex:0 0 auto}
/* Panel liczy pozycję od szkła (header > div ma position:relative). */
[data-menu] > summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--nakladka-45);border-radius:8px;background:var(--tlo-sekcji);cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-menu] > summary::-webkit-details-marker{display:none}
[data-menu] > summary::marker{content:''}
[data-menu-ikona]{position:relative;display:block;width:18px;height:2px;background:var(--tekst);border-radius:1px;transition:background .2s}
[data-menu-ikona]::before,[data-menu-ikona]::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--tekst);border-radius:1px;transition:transform .2s}
[data-menu-ikona]::before{top:-6px}
[data-menu-ikona]::after{top:6px}
[data-menu][open] > summary{border-color:var(--akcent)}
[data-menu][open] [data-menu-ikona]{background:transparent}
[data-menu][open] [data-menu-ikona]::before{transform:translateY(6px) rotate(45deg)}
[data-menu][open] [data-menu-ikona]::after{transform:translateY(-6px) rotate(-45deg)}
[data-menu-panel]{position:absolute;left:0;right:0;top:100%;z-index:20;display:flex;flex-direction:column;background:var(--tlo);border-bottom:1px solid var(--ramka-slaba-2);box-shadow:0 24px 48px -24px var(--cien-mocny);padding:8px 24px 16px;max-height:calc(100dvh - 64px);overflow:auto;overscroll-behavior:contain}
/* Panel wisi POD szkłem: ta sama materia, to samo zaokrąglenie, widoczna szczelina.
   Reguła MUSI być za regułą wyżej — inaczej top:100% z niej wygrywa nad szczeliną. */
[data-menu-panel]{top:calc(100% + 8px);border-radius:18px;border:1px solid var(--nakladka-10);background:linear-gradient(180deg,var(--szklo-panel-gora),var(--szklo-panel-dol));box-shadow:0 26px 50px -26px var(--cien-95),inset 0 1px 0 var(--nakladka-12);max-height:calc(100dvh - var(--pasek) - var(--odstep-paska) - 32px)}
[data-menu-link]{display:flex;align-items:center;min-height:52px;padding:0 4px;color:var(--tekst-drugi);text-decoration:none;font-size:17px;border-bottom:1px solid var(--ramka-slaba)}
[data-menu-link]:last-child{border-bottom:0}
[data-menu-link][aria-current="page"]{color:var(--tekst)}
@media (min-width:768px){[data-menu]{display:none}}
/* PASEK NAGŁÓWKA PONIŻEJ 768 px.
   Makieta trzyma gap:24px i padding:0 24px W ATRYBUCIE style paska, a CTA ma tam
   padding:0 18px i font-size:15px — zwykła reguła tego nie ruszy, potrzebne
   !important. Bez tego szerokości sumowały się do 412 px (logo 98 + CTA 174 +
   przycisk menu 44 + 2×24 gap + 2×24 padding): przy oknie 375 px przycisk menu
   stał od x=345 do x=389, czyli 14 px za krawędzią, a przy 320 px w całości poza
   ekranem. Że tego nie widać, załatwiał overflow-x:hidden na <body> — paska nie
   dało się nawet przewinąć w bok. Menu mobilne było więc dodane i niedostępne.
     Zabezpieczenie na wypadek dłuższego napisu w przyszłości jest w regułach
   flex niżej: logo i przycisk menu nie kurczą się nigdy, kurczy się wyłącznie
   CTA. Dzięki temu przycisk menu ZAWSZE mieści się w oknie — bez względu na to,
   ile miejsca zajmie tekst obok. */
@media (max-width:767px){
  header{padding:8px 10px 0}
  header > div{gap:8px!important;padding:0 12px!important}
  /* CTA to OSTATNI odnośnik w pasku. Wcześniej reguły celowały w
     a[data-akcja="umow-otworz"], a ten atrybut ma tylko strona główna: na
     pozostałych 20 stronach CTA się nie kurczyło i przycisk menu wychodził poza
     ekran (przy 320 px pudełko 293–337 px przy oknie 320 px). Selektor
     strukturalny działa wszędzie, bo w każdym pasku CTA jest ostatnim <a>. */
  header > div > a{flex:0 0 auto}
  /* Bez tego trzy widoczne elementy zbijały się do lewej (justify-content:flex-start
     z reguły desktopowej), a po prawej zostawało ~85 px pustego szkła — pasek
     wyglądał na niedokończony. Auto-margines przy CTA odsuwa parę „CTA + menu”
     do prawej krawędzi, logo zostaje przy lewej. */
  header > div > [data-konto]{margin-left:auto}
  header > div > [data-konto]{flex:0 1 auto;min-width:0;padding:0 12px!important;font-size:14px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  [data-menu-panel]{padding:8px 12px 16px}
}
/* Poniżej 360 px (iPhone SE 1. generacji, stare Androidy) sam napis CTA ma 153 px
   i przy zwykłych odstępach zaczynał tracić prawy padding. Zmniejszamy jeszcze
   znak firmowy — treść zostaje w komplecie, nic się nie ucina. */
@media (max-width:359px){
  header > div{gap:6px!important;padding:0 10px!important}
  header > div > a:first-child{font-size:18px!important}
}
/* TABLET I MAŁY LAPTOP (768–1119 px). Logo, sześć odnośników nawigacji, przełącznik
   motywu, „Zaloguj się” i „Załóż konto” potrzebują w szkle około 1030 px. Przy
   768 px szkło ma 720 px: nawigacja łamała się na dwie linie, a „Załóż konto”
   wychodziło poza pasek i ucinała je krawędź okna („Załóż kont”). Zmierzone przy
   pięciu pozycjach: wszystko mieściło się od 940 px; po dodaniu „Umów spotkanie”
   od około 1080 px (przy 1024 px nawigacja szła w dwie linie), więc próg z zapasem
   to 1120 px. Poniżej pasek wygląda jak na telefonie: logo, przełącznik motywu,
   „Załóż konto” i menu, a nawigacja (z „Umów spotkanie”) i „Zaloguj się” są
   w menu. app.js zamyka menu od tej samej szerokości. */
@media (min-width:768px) and (max-width:1119px){
  header nav[data-desktop-only],header > div > [data-logowanie]{display:none!important}
  header > div > details[data-menu]{display:block}
  header [data-menu-logowanie]{display:flex}
}

/* ── NUMER AKTYWNEGO KROKU ──────────────────────────────────────────────────
   Makieta trzyma limonkowy kolor cyfry w ATRYBUCIE style (color:#E0F64B), a stan
   „krok otwarty” maluje kółko na limonkowo regułą [data-tab].on [data-num].
   Styl z atrybutu wygrywa ze zwykłą regułą, więc na limonkowym kółku zostawała
   limonkowa cyfra: 1:1, numer aktywnego kroku po prostu znikał. #0F0F0F na
   #E0F64B to 15,93:1. Kolor kółka nie zmienia się — poprawiamy tylko cyfrę. */
[data-tab].on [data-num]{color:var(--tekst-odwrotny)!important}

/* ── WPISY BLOGA I STRONY MIEJSKIE (treść z Markdownu) ─────────────────────
   Klasy zamiast style="" z makiet: te strony powstają w sborce, nie w edytorze.
   Roobert jest tylko w kroju Regular (licencja DP15869), więc <strong> nie
   pogrubia (syntetyczne pogrubienie rozmazuje kontury) — podkreśla limonką. */
.srodek{max-width:1200px;margin:0 auto;padding:0 24px;width:100%;box-sizing:border-box}
.kicker{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tekst-akcent)}
.artykul-glowa{position:relative;overflow:hidden;border-bottom:1px solid var(--ramka-slaba)}
/* Nagłówek wpisu i strony miasta ma kompozycję hero strony głównej: wszystko
   wyśrodkowane, te same stopnie nagłówka i leadu. Tytuły wpisów są długie
   (do ~95 znaków), więc nagłówek ma własny limit szerokości, a text-wrap:balance
   rozkłada go na równe linie zamiast zostawiać jedno słowo w ostatniej.
   Treść wpisu (.artykul-cialo) zostaje wyrównana do lewej: czyta się ją ciągiem. */
.artykul-glowa .srodek{position:relative;z-index:1;padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(40px,5vw,72px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,1.6vw,24px)}
.okruszki{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--tekst-przygaszony);margin-bottom:8px}
.okruszki a{color:var(--tekst-drugi);text-decoration:none;padding:12px 0;display:inline-flex;align-items:center;border-radius:4px}
.okruszki a:hover{color:var(--tekst-akcent)}
/* Okruszki nad wyśrodkowanym nagłówkiem: bieżąca strona powtarzała cały H1 tuż
   nad H1 (na desktopie w jednej linii z „Strona główna / Blog”). Zostaje droga
   do rodzica; pełne okruszki są w JSON-LD (BreadcrumbList). */
.okruszki [aria-current="page"],.okruszki > span[aria-hidden]:nth-last-child(2){display:none}
.artykul-glowa h1{margin:0;font-size:clamp(30px,4.2vw,54px);line-height:1.06;letter-spacing:-0.035em;max-width:980px;text-wrap:balance}
.artykul-glowa .lead{margin:0;color:var(--tekst-drugi);font-size:clamp(16px,1.35vw,20px);max-width:820px;text-wrap:pretty}
.artykul-glowa .meta{margin:0;display:block;text-wrap:balance;font-size:14px;color:var(--tekst-przygaszony)}
.artykul-glowa .meta > time,.artykul-glowa .meta > span{white-space:nowrap}
.artykul-cialo{border-bottom:1px solid var(--ramka-slaba)}
.uklad{display:grid;grid-template-columns:minmax(0,720px) minmax(260px,320px);gap:48px 64px;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(56px,7vw,96px);align-items:start;justify-content:space-between}
/* Boczna kolumna przykleja się pod paskiem i nie może być wyższa od ekranu:
   dawniej (spis nad ramką, 850 px) przycisk ramki był poza ekranem na każdym
   laptopie. Teraz ramka stoi pierwsza i się nie kurczy, a spis dostaje resztę
   wysokości i przewija się w sobie. */
/* Dół kolumny kończy się NAD przyciskiem czatu (52 px + 20 px od krawędzi + 16 px
   odstępu): przy 100vh − 112 px przycisk „Zapytaj asystenta AI” zasłaniał 92×48 px
   spisu treści („§ 3 Rodzaje i zakres Usł…”). */
.bok{position:sticky;top:88px;display:flex;flex-direction:column;gap:24px;max-height:calc(100vh - 176px)}
/* Długi spis przewija się w sobie, a dół listy wygasa: widać, że lista trwa dalej,
   zamiast urywać wpis w pół wiersza na krawędzi ramki. Przewija się sama lista,
   więc tytuł „Spis treści” i ramka pudełka zostają ostre. */
@media (min-width:901px){
  .bok > .spis,.bok > .dokument-spis{display:flex;flex-direction:column;overflow:hidden}
  .bok > .spis ol,.bok > .dokument-spis ol{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
}
.artykul{font-size:17px;line-height:1.65;color:var(--tekst-tresci);min-width:0}
.artykul>p:first-child{font-size:19px;color:var(--tekst)}
.artykul h2{margin:44px 0 14px;font-size:clamp(24px,2.6vw,32px);line-height:1.15;letter-spacing:-0.02em;color:var(--tekst);text-wrap:balance}
.artykul h2:first-child{margin-top:0}
.artykul h3{margin:28px 0 10px;font-size:20px;line-height:1.25;color:var(--tekst)}
.artykul p{margin:0 0 18px}
.artykul a{color:var(--tekst);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ramka-mocna);border-radius:3px}
.artykul a:hover{color:var(--tekst-akcent);text-decoration-color:var(--akcent)}
.artykul ul,.artykul ol{margin:0 0 18px;padding-left:22px}
.artykul li{overflow-wrap:anywhere}
.artykul li{margin:6px 0}
.artykul li::marker{color:var(--tekst-akcent)}
/* Pogrubienie bez limonkowego zakreślacza: pasek pod „Online:” czy „Opłata:” stał
   obok prawdziwych odnośników z szarym podkreśleniem i czytelnik nie odróżniał
   jednego od drugiego. Roobert ma tylko krój Regular, więc wyróżnieniem zostaje
   jaśniejszy kolor tekstu (font-weight 500 i tak narysowałby 400). */
.artykul strong{font-weight:400;color:var(--tekst);box-shadow:none}
.artykul code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.9em;background:var(--tlo-karty);border:1px solid var(--ramka);border-radius:4px;padding:1px 6px;color:var(--tekst);white-space:nowrap}
.artykul pre{background:var(--tlo-sekcji);border:1px solid var(--ramka);border-radius:8px;padding:16px;overflow:auto;margin:0 0 18px}
.artykul pre code{border:0;background:none;padding:0;white-space:pre}
.artykul blockquote{margin:0 0 18px;padding:14px 20px;border:1px solid var(--ramka);background:var(--tlo-sekcji);border-radius:8px}
.artykul blockquote p:last-child{margin:0}
.artykul hr{border:0;border-top:1px solid var(--ramka);margin:32px 0}
.tabela{overflow-x:auto;margin:0 0 22px;border:1px solid var(--ramka);border-radius:10px;-webkit-overflow-scrolling:touch}
.tabela table{border-collapse:collapse;width:100%;font-size:15px;min-width:460px}
/* Kwot NIE blokujemy white-space:nowrap na całej komórce: w tabeli ZUS kolumna
   wyrównana do prawej ma zdania („456,18 zł z chorobową, 420,86 zł bez”), a nowrap
   robił z niej 450 px i ściskał kolumnę „Kod” do „05 / 40”. Kwota nie łamie się
   w środku, bo twardaSpacjaWTekscie wiąże cyfry tysięcy i „zł” twardą spacją. */
.tabela td[style*="right"]{font-variant-numeric:tabular-nums}
.tabela table:has(th[style*="right"]){min-width:0}
@media (max-width:767px){
  .tabela th:first-child,.tabela td:first-child{position:sticky;left:0;background:var(--tlo-sekcji);box-shadow:1px 0 0 var(--tlo-neutralne)}
  .tabela td:first-child{min-width:130px}
  .tabela th,.tabela td{padding:8px 10px}
}
.tabela th,.tabela td{padding:10px 14px;border-bottom:1px solid var(--ramka);text-align:left;vertical-align:top}
.tabela th{color:var(--tekst);background:var(--tlo-kafla);font-weight:400;font-size:12px;letter-spacing:0.06em;text-transform:uppercase}
.tabela tr:last-child td{border-bottom:0}
/* Telefon: tabela z trzema kolumnami i więcej we wpisie albo na stronie miasta nie
   mieści się w 342 px (saldo 401 px, terminy ZUS 457 px) i chowała kolumny za
   krawędzią bez znaku, że da się przewinąć. Wiersz staje się kartą z parami
   „kolumna: wartość”, jak w dokumentach (etykiety z data-etykieta). Tabele
   z dwiema kolumnami zostają tabelami: mieszczą się, gdy komórki się zawijają. */
@media (max-width:767px){
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)){border:0;border-radius:0;overflow:visible}
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)) :is(table,tbody,tr,td){display:block;width:auto;min-width:0!important}
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)) tr{margin:0 0 10px;padding:6px 14px;border:1px solid var(--ramka);border-radius:10px;background:var(--tlo-sekcji)}
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)) :is(td,td:first-child){position:static;min-width:0;padding:8px 0;border:0;background:none;box-shadow:none;text-align:left!important;font-size:15px;line-height:1.5}
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)) td + td{border-top:1px solid var(--ramka)}
  .artykul:not(.dokument) .tabela:has(th:nth-child(3)) td[data-etykieta]::before{content:attr(data-etykieta);display:block;margin-bottom:2px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tekst-slaby)}
}
.faq{margin:32px 0 22px;border-top:1px solid var(--ramka)}
.faq-pozycja{border-bottom:1px solid var(--ramka);padding:18px 0}
.faq-pozycja h3{margin:0 0 8px;font-size:19px}
.faq-pozycja p{margin:0;color:var(--tekst-drugi)}
.spis{background:var(--tlo-sekcji);border:1px solid var(--ramka);border-radius:12px;padding:20px 22px;min-height:0;overflow:auto;overscroll-behavior:contain}
.spis-tytul{display:block;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--tekst-akcent);margin-bottom:10px}
.spis ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px}
/* vertical-align:top: numer punktu przy pierwszej linii zawiniętego tytułu, nie przy ostatniej.
   Ujemny górny margines zjada górne 4 px paddingu, żeby tekst stał na linii numeru. */
.spis a{color:var(--tekst-drugi);text-decoration:none;display:inline-block;vertical-align:top;padding:4px 0;margin-top:-4px;border-radius:3px}
.spis a:hover{color:var(--tekst-akcent)}
.ramka-produkt{flex:0 0 auto;background:var(--tlo-karty);border:1px solid var(--ramka);border-radius:12px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ramka-produkt p{margin:0;font-size:15px;color:var(--tekst-drugi);text-wrap:pretty}
.ramka-produkt .link{color:var(--tekst);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ramka-mocna);font-size:15px;min-height:44px;display:inline-flex;align-items:center;border-radius:3px}
.ramka-produkt .link:hover{color:var(--tekst-akcent);text-decoration-color:var(--akcent)}
/* Telefon i tablet. Blok MUSI stać po regułach bazowych .spis i .ramka-produkt:
   przy tej samej specyficzności wygrywa reguła późniejsza, a dawniej media
   query stało wyżej i spis rysował się jako wysoka, przycięta kolumna zamiast
   rzędu pigułek. Ramkę chowamy: przycisk „Załóż konto” jest w pasku, a ramka
   nad artykułem spychała pierwszy akapit (odpowiedź) na drugi ekran. */
@media (max-width:900px){
  .uklad{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .bok{display:contents}
  .artykul,.spis{width:100%;min-width:0}
  .ramka-produkt{display:none}
  /* Spis treści jako jeden przewijany rząd: tytuł po lewej, pigułki obok. */
  .spis{order:-1;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;overflow:visible;box-sizing:border-box}
  .spis-tytul{flex:0 0 auto;margin:0;font-size:11px}
  .spis ol{flex:1 1 auto;min-width:0;display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding:0;margin:0;list-style:none;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .spis ol::-webkit-scrollbar{display:none}
  .spis li{flex:0 0 auto;margin:0}
  .spis a{display:inline-flex;min-height:44px;align-items:center;padding:0 12px;margin-top:0;border:1px solid var(--ramka);border-radius:999px;white-space:nowrap}
}
.dalej{border-bottom:1px solid var(--ramka-slaba)}
.dalej .srodek{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:24px}
.dalej h2{margin:0;font-size:clamp(24px,2.6vw,32px);letter-spacing:-0.02em;line-height:1.1}
.siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.karta{text-decoration:none;color:var(--tekst);display:flex;flex-direction:column;background:var(--tlo-karty);border:1px solid var(--ramka);border-radius:12px;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s}
.karta:hover{transform:translateY(-6px);border-color:var(--akcent-5);color:var(--tekst)}
.karta .kafel{position:relative;aspect-ratio:16/9;background:var(--tlo-kafla);border-bottom:1px solid var(--ramka);overflow:hidden}
.kafel-obraz{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.karta .tresc{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1}
.karta .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--tekst-przygaszony);align-items:center}
/* Data, kropka i czas czytania to jedna grupa bez łamania: po 6 px przed kropką
   i po niej, a przy ciasnej karcie cała grupa schodzi pod chip. Dawniej kropka
   wisiała przy „7 min” z 10 px luki przed sobą albo kończyła linię. */
.karta .meta .kiedy{white-space:nowrap}
.karta .meta .kropka{margin:0 6px}
.karta .chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;border:1px solid var(--nakladka-30);background:var(--nakladka-06);font-size:12px;color:var(--tekst)}
.karta h2,.karta h3{margin:0;font-size:21px;line-height:1.22;letter-spacing:-0.015em;text-wrap:balance;font-weight:400}
.karta p{margin:0;color:var(--tekst-drugi);font-size:15px;text-wrap:pretty}
.karta .dalej-link{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-size:14px}
/* „Czytaj też” i „Inne miasta” stoją pod blokiem zakupu. Na telefonie trzy
   karty z miniaturami to prawie dwa ekrany przewijania, więc zostaje lista
   samych tytułów oddzielonych kreską. */
@media (max-width:767px){
  section.dalej .srodek{gap:12px}
  section.dalej .siatka{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--ramka)}
  section.dalej .karta,section.dalej .karta:hover{background:none;border:0;border-bottom:1px solid var(--ramka);border-radius:0;transform:none;overflow:visible}
  section.dalej .kafel,section.dalej .karta .meta,section.dalej .karta p,section.dalej .dalej-link{display:none}
  section.dalej .karta .tresc{padding:12px 0;min-height:44px;box-sizing:border-box;justify-content:center}
  section.dalej .karta h3{font-size:17px;line-height:1.35;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ramka-mocna)}
}
.artykul a:focus-visible,.okruszki a:focus-visible,.spis a:focus-visible,.ramka-produkt a:focus-visible,.karta:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}

/* ── DOKUMENTY PRAWNE: regulamin, polityka, umowa powierzenia, kontakt ──────
   Nagłówek jak przy wpisach (.artykul-glowa, data-hero). Treść w mierze ok.
   70 znaków, tabele na całą szerokość kolumny (mają po 4 do 6 kolumn).
   Numery punktów są TEKSTEM (budowa/markdown.mjs, tryb prawny) w wąskiej
   kolumnie po lewej: wcięcie trzyma się przy zawijaniu, a „§ 10 ust. 2” znaczy
   to samo na ekranie, w wydruku i w skopiowanym tekście. */
.dokument-projekt{margin:0;padding:10px 16px;border:1px solid var(--uwaga-45);border-radius:10px;background:var(--uwaga-08);color:var(--tekst);font-size:15px;line-height:1.4;max-width:640px;text-wrap:balance}
.dokument-druk{margin:0}
.dokument-druk[hidden],.kontakt-skrot [hidden]{display:none!important}
html:not(.js) [data-drukuj-wiersz],html:not(.js) [data-czat-link-wiersz]{display:none!important}
.dokument-druk button,.kontakt-skrot button.link{font:inherit;font-size:15px;line-height:1.3;color:var(--tekst-drugi);background:none;border:0;padding:0 4px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ramka-mocna);border-radius:4px}
.dokument-druk button:hover,.kontakt-skrot button.link:hover{color:var(--tekst);text-decoration-color:currentColor}
.dokument-druk button:focus-visible,.kontakt-skrot button.link:focus-visible,.kontakt-skrot a:focus-visible,.dokument-spis a:focus-visible,.spis-rozwijany a:focus-visible,.spis-rozwijany summary:focus-visible,.dokument .nr:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:3px}
/* Sprawa do rozstrzygnięcia: przerywana ramka i ciepłe tło, czytelne w obu
   motywach i na wydruku (reguła niżej w @media print). */
mark.luka{display:inline-block;padding:0 6px;border:1px dashed var(--uwaga-8);border-radius:4px;background:var(--uwaga-08);color:var(--tekst);font-size:.9em;line-height:1.45;white-space:nowrap;cursor:help}
.nw{white-space:nowrap}
.dokument-uklad{grid-template-columns:minmax(0,860px) minmax(220px,280px)}
.dokument{font-size:17px;line-height:1.65}
.dokument > p,.dokument > h2,.dokument > h3,.dokument > .punkty,.dokument > hr{max-width:70ch}
.dokument p,.dokument li{overflow-wrap:break-word}
.dokument h2{margin:52px 0 14px;font-size:clamp(21px,2vw,26px);line-height:1.2;letter-spacing:-0.015em}
.dokument h2:first-child,.dokument .spis-rozwijany + h2{margin-top:0}
.dokument h3{margin:32px 0 10px;font-size:19px;line-height:1.3}
.dokument h2 .nr,.dokument h3 .nr,.dokument p.pkt > .nr{color:var(--tekst-slaby);text-decoration:none;border-radius:3px}
.dokument h2 .nr:hover,.dokument h3 .nr:hover,.dokument p.pkt > .nr:hover{color:var(--tekst-akcent)}
/* Definicje i nazwy pogrubione w tekście prawnym są liczne: bez limonkowego
   podkreślenia z wpisów, które przy 35 definicjach robiło z § 2 pasiak. */
.dokument strong{box-shadow:none;color:var(--tekst)}
/* Definicje („1) **Asystent AI**: …”, klasa z budowa/markdown.mjs): Roobert ma
   tylko Regular, więc termin od definicji odróżnia kolor, nie grubość. */
.dokument li.definicja > .punkt{color:var(--tekst-drugi)}
.dokument li.definicja > .punkt strong:first-child{color:var(--tekst)}
.dokument .punkty{list-style:none;margin:0 0 18px;padding:0}
.dokument .punkty > li{margin:10px 0}
.dokument ol.punkty > li{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:baseline}
.dokument ol.punkty > li > .nr{color:var(--tekst-slaby);font-variant-numeric:tabular-nums}
.dokument ul.punkty > li{position:relative;padding-left:1.3em}
.dokument ul.punkty > li::before{content:"";position:absolute;left:.2em;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--tekst-slaby)}
.dokument .punkt > p{margin:0 0 10px}
.dokument .punkt > :last-child{margin-bottom:0}
.dokument .punkt > .punkty{margin:6px 0 10px}
.dokument .punkt .punkty > li{margin:6px 0}
.dokument .punkt > .tabela{margin:12px 0 14px}
/* Nazwy zapisów w przeglądarce („fleetify-motyw”, „firebaseLocalStorageDb”) łamią
   się tylko tam, gdzie nie mieszczą się w wierszu. overflow-wrap:anywhere liczył
   je do najmniejszej szerokości kolumny i tabela z sześcioma kolumnami ściskała
   kolumnę „Nazwa” do 50 px: „fireb / aseLoc / alStor / ageDb”. */
.dokument code{white-space:normal;overflow-wrap:break-word;word-break:normal}
.dokument .tabela th{white-space:normal}
.dokument .tabela td{font-size:15px;line-height:1.5}
.dokument hr{margin:52px 0}
.dokument-spis{background:var(--tlo-sekcji);border:1px solid var(--ramka);border-radius:12px;padding:18px 18px 12px;min-height:0;overflow:auto;overscroll-behavior:contain}
.dokument-spis ol,.spis-rozwijany ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:14px;line-height:1.35}
.dokument-spis a,.spis-rozwijany a{display:grid;grid-template-columns:3.4em minmax(0,1fr);align-items:baseline;padding:6px 0;color:var(--tekst-drugi);text-decoration:none;border-radius:4px}
.dokument-spis a .nr,.spis-rozwijany a .nr{color:var(--tekst-slaby);white-space:nowrap}
.dokument-spis a:hover,.spis-rozwijany a:hover{color:var(--tekst)}
.spis-rozwijany{display:none}
.kontakt-skrot{flex:0 0 auto;background:var(--tlo-karty);border:1px solid var(--ramka);border-radius:12px;padding:20px 22px 12px;display:flex;flex-direction:column;gap:10px}
.kontakt-skrot .wiersz{display:flex;flex-direction:column;align-items:flex-start}
.kontakt-skrot p{margin:2px 0 0;font-size:15px;line-height:1.45;color:var(--tekst-drugi);text-wrap:pretty}
.kontakt-skrot .etykieta{font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--tekst-slaby)}
.kontakt-skrot a{color:var(--tekst);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ramka-mocna);border-radius:3px;overflow-wrap:anywhere}
.kontakt-skrot a:hover{color:var(--tekst-akcent);text-decoration-color:currentColor}
.kontakt-skrot .link,.kontakt-skrot button.link{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:15px}
.kontakt-skrot button.link{color:var(--tekst);text-decoration-color:var(--ramka-mocna)}
@media (max-width:900px){
  .dokument-spis{display:none}
  .dokument > p,.dokument > h2,.dokument > h3,.dokument > .punkty,.dokument > hr{max-width:none}
  .spis-rozwijany{display:block;margin:0 0 32px;border:1px solid var(--ramka);border-radius:12px;background:var(--tlo-sekcji)}
  .spis-rozwijany summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;cursor:pointer;list-style:none;font-size:15px;color:var(--tekst);border-radius:12px}
  .spis-rozwijany summary::-webkit-details-marker{display:none}
  .spis-rozwijany summary .liczba{font-size:13px;color:var(--tekst-slaby)}
  .spis-rozwijany summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .spis-rozwijany[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .spis-rozwijany ol{padding:0 16px 10px;border-top:1px solid var(--ramka)}
  .spis-rozwijany a{align-items:center;min-height:44px;padding:4px 0}
  .kontakt-skrot{order:-1}
}
@media screen and (max-width:767px){
  .dokument{font-size:16px}
  .dokument h2{margin-top:40px}
  .dokument ol.punkty > li{grid-template-columns:2.3em minmax(0,1fr)}
  /* Podpunkty „1)”, „10)” w punkcie: kolumna na szerokość numeru zamiast drugiego
     2,3 em, które przy dwóch poziomach zostawiały tekstowi ok. 265 px. */
  .dokument .punkt ol.punkty > li{grid-template-columns:auto minmax(0,1fr);column-gap:.45em}
  .dokument-glowa .meta > span{display:block}
  .dokument-glowa .meta > span[aria-hidden]{display:none}
  /* Tabele o 4 do 6 kolumnach na telefonie: wiersz staje się kartą z parami
     „kolumna: wartość” (etykiety z data-etykieta), bez przewijania w bok. */
  .dokument .tabela{border:0;border-radius:0;overflow:visible}
  .dokument .tabela table,.dokument .tabela tbody,.dokument .tabela tr,.dokument .tabela td{display:block;width:auto;min-width:0!important}
  .dokument .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dokument .tabela tr{margin:0 0 10px;padding:6px 14px;border:1px solid var(--ramka);border-radius:10px;background:var(--tlo-sekcji)}
  .dokument .tabela td,.dokument .tabela td:first-child{position:static;min-width:0;padding:8px 0;border:0;background:none;box-shadow:none}
  .dokument .tabela td + td{border-top:1px solid var(--ramka)}
  .dokument .tabela td[data-etykieta]::before{content:attr(data-etykieta);display:block;margin-bottom:2px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tekst-slaby)}
}
/* Tabele z pięcioma kolumnami i więcej (wykaz zapisów w polityce: 6, dalsi
   podmiotowie przetwarzający w umowie: 5) są kartami na KAŻDEJ szerokości.
   W kolumnie 860 px pięć kolumn dawało komórki na 15–20 wierszy. Od 768 px
   para „kolumna: wartość” stoi w jednym wierszu (etykieta po lewej). */
@media screen{
  .dokument .tabela:has(th:nth-child(5)){border:0;border-radius:0;overflow:visible}
  .dokument .tabela:has(th:nth-child(5)) :is(table,tbody,tr,td){display:block;width:auto;min-width:0!important}
  .dokument .tabela:has(th:nth-child(5)) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dokument .tabela:has(th:nth-child(5)) tr{margin:0 0 10px;padding:6px 14px;border:1px solid var(--ramka);border-radius:10px;background:var(--tlo-sekcji)}
  .dokument .tabela:has(th:nth-child(5)) :is(td,td:first-child){position:static;min-width:0;padding:8px 0;border:0;background:none;box-shadow:none}
  .dokument .tabela:has(th:nth-child(5)) td + td{border-top:1px solid var(--ramka)}
  .dokument .tabela:has(th:nth-child(5)) td[data-etykieta]::before{content:attr(data-etykieta);display:block;margin-bottom:2px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tekst-slaby)}
}
@media screen and (min-width:768px){
  /* Etykieta w kolumnie po lewej przez position:absolute, nie grid: w gridzie
     każdy <code> i <a> w komórce byłby osobnym elementem siatki. */
  .dokument .tabela:has(th:nth-child(5)) td[data-etykieta]{position:relative;padding-left:calc(12em + 16px);min-height:48px}
  .dokument .tabela:has(th:nth-child(5)) td[data-etykieta]::before{position:absolute;left:0;top:11px;width:15em;margin:0;line-height:1.35}
}
/* Wydruk i „zapisz jako PDF”: sam dokument, czarny tekst na białym bez względu
   na motyw, bez paska, stopki, czatu, spisu i poświaty. Pasek projektu i luki
   „do uzupełnienia” drukują się, żeby wydruk projektu nie udawał umowy. */
@media print{
  @page{margin:18mm 16mm}
  body:has(article.dokument){background:#fff!important}
  body:has(article.dokument) *{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;animation:none!important;transition:none!important}
  body:has(article.dokument) header,body:has(article.dokument) footer,body:has(article.dokument) [data-czat],body:has(article.dokument) [data-modal],body:has(article.dokument) [data-hero-tlo],body:has(article.dokument) .okruszki,.dokument-bok,.spis-rozwijany,.dokument-druk,.zamkniecie{display:none!important}
  body:has(article.dokument) [data-rise],body:has(article.dokument) [data-reveal]{opacity:1!important;transform:none!important}
  .artykul-glowa.dokument-glowa,.artykul-cialo.dokument-cialo{border:0!important;overflow:visible!important}
  .dokument-glowa .srodek{padding:0 0 10pt!important;align-items:flex-start!important;text-align:left!important;gap:6pt!important}
  .dokument-glowa h1{font-size:20pt!important;line-height:1.15!important}
  .dokument-glowa .lead{font-size:11pt!important}
  .dokument-glowa .kicker{font-size:8pt!important}
  .dokument-projekt{border:1.5pt solid #000!important;font-size:10pt!important}
  .dokument-uklad{display:block!important;padding:0!important;max-width:none!important}
  .dokument{font-size:10.5pt!important;line-height:1.45!important}
  .dokument > p,.dokument > h2,.dokument > h3,.dokument > .punkty,.dokument > hr{max-width:none!important}
  .dokument h2{font-size:13pt!important;margin:16pt 0 6pt!important;break-after:avoid;page-break-after:avoid}
  .dokument h3{font-size:11.5pt!important;margin:12pt 0 4pt!important;break-after:avoid;page-break-after:avoid}
  .dokument li,.dokument tr,.dokument p.pkt{break-inside:avoid;page-break-inside:avoid}
  .dokument a{text-decoration:none!important}
  .dokument .tabela{overflow:visible!important;border:1pt solid #999!important;border-radius:0!important}
  .dokument .tabela table{min-width:0!important;font-size:9pt!important}
  .dokument .tabela th,.dokument .tabela td{position:static!important;border-color:#999!important;padding:4pt 6pt!important;font-size:9pt!important;line-height:1.35!important}
  mark.luka{border:1pt dashed #000!important;background:#e6e6e6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ── FORMULARZ: zgoda i błąd ────────────────────────────────────────────────── */
[data-zgoda] input:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:2px}
[data-zgoda]:hover span{color:var(--tekst)}
form[data-formularz] button[disabled]{opacity:.7;cursor:progress}

/* ── AKORDEON FAQ: zwinięta odpowiedź poza kolejnością tabulacji ───────────
   [data-acc] zwija się przez grid-template-rows:0fr, więc treść ma 0 px, ale
   odnośnik w środku dalej był w kolejności Tab (fokus znikał z ekranu — WCAG
   2.4.7 / 2.4.11). Sborka i app.js dokładają atrybut inert na zwinięte <dd>;
   visibility tu jest pasem bezpieczeństwa i czeka na koniec animacji. */
[data-acc]:not(.open)>div{visibility:hidden;transition:visibility 0s .5s}
[data-acc].open>div{visibility:visible;transition:visibility 0s}

/* ── ZDJĘCIE POD HERO ───────────────────────────────────────────────────────
   Szare zdjęcie w tle hero: pliki robi narzedzia/hero.mjs (hero.json), kadr
   i zasłonę opisuje zrodla/hero/zdjecia.json, znacznik wstawia wstawZdjecieHero.
   Każdy motyw ma własny, upieczony plik (ciemny: szary kadr, jasny: rozjaśniony
   albo negatyw). Stoją obok siebie dwa <picture>, niewidoczny ma display:none,
   a <img> mają loading="lazy": obraz bez pudełka nie przecina okna, więc
   przeglądarka go nie pobiera. Każdy ściąga tylko zdjęcie swojego motywu.
   Warstwa zaczyna się pod szklanym paskiem: sekcja wjeżdża pod nagłówek ujemnym
   marginesem i oddaje tę samą wysokość paddingiem, więc tekst stoi tam, gdzie stał.
   --odstep-paska na telefonie = 8 px, tyle co padding nagłówka niżej w arkuszu.
   Dół: maska do przezroczystości (pod spodem tło strony w danym motywie)
   i rozmyta kopia zdjęcia przenikana drugą maską. Bez backdrop-filter: pięć
   warstw rozmycia dawało od 24 do 79 ms na klatkę przy przewijaniu.
   Zasłona (::after) z kanałów --tlo-rgb, nie z rgba(): tokenizer kolorów zamienia
   ciemne rgba na biel w motywie jasnym. W maskach „black”, nie #000, z tego
   samego powodu. Poziomy zasłony per zdjęcie i motyw: cssZdjecHero(). */
:root{--naglowek:calc(var(--pasek) + var(--odstep-paska));--tlo-rgb:15 15 15}
:root[data-motyw="jasny"]{--tlo-rgb:246 246 243}
@media (max-width:767px){:root{--odstep-paska:8px}}
section[data-hero-foto]{margin-top:calc(-1*var(--naglowek));padding-top:var(--naglowek);isolation:isolate;--foto-a-tekst:.72;--foto-a-spokoj:.3;--foto-a-gora:.5;--foto-strefa:540px}
.artykul-glowa[data-hero-foto]{--foto-strefa:500px}
/* Zdanie o cenie (--tekst-slaby, 14 px) nad zdjęciem spadało do 3,6:1 w ciemnym
   motywie; w kolorze leadu ma 4,8:1 i więcej na każdym zdjęciu. */
section[data-hero-foto] [data-cena-pod-wezwaniem]{color:var(--tekst-drugi)!important}
section[data-hero-foto] > [data-hero-tlo][data-hero-zdjecie]{position:absolute;left:0;right:0;top:0;bottom:auto;height:min(100%,calc(var(--naglowek) + 100vh));height:min(100%,calc(var(--naglowek) + 100svh));z-index:-1;overflow:hidden;pointer-events:none;margin:0;padding:0!important;--zanik:clamp(160px,35%,420px);-webkit-mask-image:linear-gradient(black calc(100% - var(--zanik)),transparent);mask-image:linear-gradient(black calc(100% - var(--zanik)),transparent)}
[data-hero-zdjecie] picture,[data-hero-zdjecie] img{position:absolute;inset:0;width:100%;height:100%;display:block}
[data-hero-zdjecie] img{object-fit:cover;object-position:var(--foto-poz,50% 50%)}
[data-hero-zdjecie] [data-hero-rozmyte]{-webkit-mask-image:linear-gradient(transparent calc(100% - var(--zanik)*1.2),black calc(100% - var(--zanik)*.45));mask-image:linear-gradient(transparent calc(100% - var(--zanik)*1.2),black calc(100% - var(--zanik)*.45))}
:root[data-motyw="jasny"] [data-hero-zdjecie] [data-foto-motyw="ciemny"],:root:not([data-motyw="jasny"]) [data-hero-zdjecie] [data-foto-motyw="jasny"]{display:none}
[data-hero-zdjecie]::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tlo-rgb)/var(--foto-a-spokoj)) 0,rgb(var(--tlo-rgb)/var(--foto-a-tekst)) calc(50% - var(--foto-strefa)),rgb(var(--tlo-rgb)/var(--foto-a-tekst)) calc(50% + var(--foto-strefa)),rgb(var(--tlo-rgb)/var(--foto-a-spokoj)) 100%);-webkit-mask-image:linear-gradient(rgb(0 0 0/var(--foto-a-gora)) var(--naglowek),black calc(var(--naglowek) + clamp(8px,6vw - 16px,80px)));mask-image:linear-gradient(rgb(0 0 0/var(--foto-a-gora)) var(--naglowek),black calc(var(--naglowek) + clamp(8px,6vw - 16px,80px)))}
@media (max-width:767px){
  [data-hero-zdjecie]{--foto-poz:var(--foto-poz-telefon,50% 50%)}
  [data-hero-zdjecie]::after{background:rgb(var(--tlo-rgb)/var(--foto-a-tekst))}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){section[data-hero-foto]{--foto-a-tekst:.94!important;--foto-a-spokoj:.88!important}}
@media (forced-colors:active){[data-hero-zdjecie]{display:none}}
@media print{[data-hero-zdjecie]{display:none}section[data-hero-foto]{margin-top:0;padding-top:0}}

/* ── RUCH OGRANICZONY ───────────────────────────────────────────────────────
   Reguła *{transition:none} z makiet nie łapie pseudoelementów, więc kreska
   przekreślenia [data-strike]::after nadal się animowała (0,8 s z opóźnieniem
   0,6 s) mimo prefers-reduced-motion. Rysujemy ją od razu. */
@media (prefers-reduced-motion:reduce){
  [data-strike]::after{transition:none!important;transform:scaleX(1)!important}
  [data-menu-ikona],[data-menu-ikona]::before,[data-menu-ikona]::after{transition:none!important}
}
/* ── zdjęcia pod hero: kadr i zasłona per zdjęcie (zrodla/hero/zdjecia.json) ── */
section[data-hero-foto="glowna"]{--foto-poz:50% 40%;--foto-poz-telefon:50% 30%}
section[data-hero-foto="flota"]{--foto-poz:50% 45%;--foto-poz-telefon:50% 40%}
section[data-hero-foto="cennik"]{--foto-poz:50% 70%;--foto-poz-telefon:60% 60%}
section[data-hero-foto="jak"]{--foto-poz:50% 0%;--foto-poz-telefon:50% 0%}
:root[data-motyw="jasny"] section[data-hero-foto="jak"]{--foto-a-tekst:0.8}
:root:not([data-motyw="jasny"]) section[data-hero-foto="jak"]{--foto-a-tekst:0.8}
section[data-hero-foto="kierowca"]{--foto-poz:50% 40%;--foto-poz-telefon:50% 30%}
section[data-hero-foto="blog"]{--foto-poz:50% 100%;--foto-poz-telefon:50% 0%}
section[data-hero-foto="licencja"]{--foto-poz:50% 0%;--foto-poz-telefon:50% 0%}

/* ── reguły przeniesione z bloków <style> w makietach (deduplikowane) ── */
html,body{margin:0;padding:0;background:var(--tlo);color:var(--tekst);font-family:Roobert,system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
*{box-sizing:border-box;font-weight:400;font-synthesis:none}
a{color:var(--tekst)}
a:hover{color:var(--tekst-akcent)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
@media (max-width:767px){[data-desktop-only]{display:none!important}}
input::placeholder{color:var(--tekst-przygaszony)}
[data-card] [data-arrow]{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}
[data-card]:hover [data-arrow]{transform:translate(4px,-4px);color:var(--tekst-akcent)}
[data-card] [data-title]{transition:color .3s}
[data-card]:hover [data-title]{color:var(--tekst-akcent)}
[data-card] [data-shine]{transition:opacity .5s}
/* opacity:0 stoi w stylu inline elementu, więc bez !important ten połysk nigdy się nie zapalał */[data-card]:hover [data-shine]{opacity:1!important}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes drift{0%{transform:translate(-10%,-10%) scale(1)}50%{transform:translate(8%,6%) scale(1.15)}100%{transform:translate(-10%,-10%) scale(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--x-224-246-75-055)}70%{box-shadow:0 0 0 8px var(--x-224-246-75-0)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal="2"]{transition-delay:.12s}
[data-reveal="3"]{transition-delay:.24s}
[data-reveal="4"]{transition-delay:.36s}
[data-reveal].in{opacity:1;transform:none}
[data-line]{transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
[data-line].in{transform:scaleX(1)}
[data-dot]{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
[data-dot].in{transform:scale(1)}
[data-rise]{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
[data-rise="2"]{animation-delay:.1s}
[data-rise="3"]{animation-delay:.2s}
[data-rise="4"]{animation-delay:.3s}
[data-rise="5"]{animation-delay:.5s}
[data-vline]{transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
[data-vline].in{transform:scaleY(1)}
[data-bar]{transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
[data-bar].in{transform:scaleX(1)}
[data-bar="2"]{transition-delay:.15s}
[data-bar="3"]{transition-delay:.3s}
[data-bar="4"]{transition-delay:.45s}
[data-acc]{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
[data-acc].open{grid-template-rows:1fr}
[data-acc]>div{overflow:hidden;min-height:0}
[data-plus]{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s}
[data-plus].open{transform:rotate(45deg);color:var(--tekst-akcent)}
[data-row]{padding:20px 0;border-bottom:1px solid var(--ramka);display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:16px;transition:padding-left .4s cubic-bezier(.2,.7,.2,1),background .4s;border-left:1px solid transparent}
[data-row]:hover{padding-left:16px;border-left-color:var(--akcent);background:linear-gradient(90deg,var(--akcent-06),transparent)}
[data-row]:hover dt{color:var(--tekst-akcent)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scan{0%{top:0}100%{top:100%}}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-line],[data-dot],[data-vline],[data-bar]{opacity:1;transform:none}}
@keyframes flyin{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
body.s-jak-to-dziala [data-rise="5"]{animation-delay:.45s}
[data-fly]{animation:flyin .7s cubic-bezier(.2,.7,.2,1) both}
[data-fly="2"]{animation-delay:.25s}
[data-fly="3"]{animation-delay:.5s}
[data-rowin]{animation:rowin .5s cubic-bezier(.2,.7,.2,1) both}
[data-rowin="2"]{animation-delay:.1s}
[data-rowin="3"]{animation-delay:.2s}
[data-rowin="4"]{animation-delay:.3s}
[data-rowin="5"]{animation-delay:.4s}
[data-rowin="6"]{animation-delay:.5s}
[data-grow]{transform-origin:left;animation:grow 1.1s cubic-bezier(.2,.7,.2,1) both}
[data-grow="2"]{animation-delay:.15s}
[data-grow="3"]{animation-delay:.3s}
[data-grow="4"]{animation-delay:.45s}
[data-fade]{animation:fade .8s ease both;animation-delay:.9s}
[data-tab]{transition:border-color .3s,color .3s,background .3s}
[data-tab].on{border-color:var(--akcent);background:var(--akcent-08)}
[data-tab].on [data-num]{background:var(--akcent);color:var(--tekst-odwrotny)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}[data-reveal],[data-vline],[data-dot]{opacity:1;transform:none}}
@keyframes pulseAmber{0%,100%{box-shadow:0 0 0 0 var(--x-255-176-64-055)}70%{box-shadow:0 0 0 8px var(--x-255-176-64-0)}}
[data-reveal="5"]{transition-delay:.48s}
body.s-dla-floty [data-rise="5"]{animation-delay:.45s}
[data-fill]{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
[data-fill].in{transform:scaleX(1)}
[data-strike]{position:relative}
[data-strike]::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tekst-przygaszony);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1) .6s}
[data-strike].in::after{transform:scaleX(1)}
[data-feature]{scroll-margin-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}[data-reveal],[data-bar],[data-fill]{opacity:1;transform:none}}
[data-reveal="6"]{transition-delay:.6s}
body.s-dla-kierowcy [data-rise="5"]{animation-delay:.45s}
body.s-dla-kierowcy [data-fill]{transform:scaleY(0);transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
body.s-dla-kierowcy [data-fill].in{transform:scaleY(1)}
body.s-dla-kierowcy [data-rowin="2"]{animation-delay:.08s}
body.s-dla-kierowcy [data-rowin="3"]{animation-delay:.16s}
body.s-dla-kierowcy [data-rowin="4"]{animation-delay:.24s}
body.s-dla-kierowcy [data-rowin="5"]{animation-delay:.32s}
body.s-dla-kierowcy [data-tab]{transition:border-color .3s,background .3s,color .3s;color:var(--tekst-drugi)}
body.s-dla-kierowcy [data-tab].on{border-color:var(--tekst-akcent)!important;background:var(--akcent-08)!important;color:var(--tekst)}
[data-col]{transition:transform .8s cubic-bezier(.2,.7,.2,1),background .4s;transform-origin:bottom}
[data-col].on{background:var(--tekst-akcent)!important}
[data-day]{transition:background .3s,color .3s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}[data-reveal],[data-line],[data-dot],[data-fill]{opacity:1;transform:none}}
body.s-cennik [data-rise="5"]{animation-delay:.45s}
[data-seg]{position:relative;color:var(--tekst-drugi);transition:color .3s}
[data-seg].on{color:var(--tekst-odwrotny)}
[data-thumb]{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
[data-thumb].right{transform:translateX(100%)}
body.s-cennik input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--akcent) var(--p,30%),var(--tlo-neutralne) var(--p,30%));outline:none}
body.s-cennik input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--akcent);border:4px solid var(--tlo);box-shadow:0 0 0 1px var(--akcent);cursor:pointer}
body.s-cennik input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--akcent);border:4px solid var(--tlo);box-shadow:0 0 0 1px var(--akcent);cursor:pointer}
body.s-cennik input[type=range]:focus-visible{outline:2px solid var(--obrys-fokusu);outline-offset:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}[data-reveal]{opacity:1;transform:none}}

/* ── atrybuty stanów z makiet (hover / active / focus) → prawdziwe reguły ── */
.hv-1:hover{color:var(--tekst) !important}
.fv-1:focus-visible{outline:2px solid var(--obrys-fokusu) !important;outline-offset:3px !important;border-radius:4px !important}
.hv-2:hover{background:var(--akcent-mocny) !important;box-shadow:0 0 0 6px var(--akcent-15) !important;transform:translateY(-1px) !important}
.ac-1:active{transform:translateY(1px) !important}
.fv-2:focus-visible{outline:2px solid var(--obrys-fokusu) !important;outline-offset:3px !important}
.hv-3:hover{transform:translateY(-6px) !important;border-color:var(--akcent-5) !important}
.hv-4:hover{transform:scale(1.02) !important}
.hv-5:hover{color:var(--tekst-akcent) !important;text-decoration-color:var(--akcent) !important}
.hv-6:hover{transform:translateY(-6px) !important;border-color:var(--akcent-5) !important;color:var(--tekst) !important}
.hv-7:hover{color:var(--tekst-akcent) !important}
.fv-3:focus-visible{outline:2px solid var(--obrys-fokusu) !important;outline-offset:2px !important;border-color:var(--akcent) !important}
.hv-8:hover{border-color:var(--akcent) !important;color:var(--tekst) !important}
.hv-9:hover{border-color:var(--akcent) !important;background:var(--akcent-08) !important}
.hv-10:hover{background:var(--akcent-mocny) !important;color:var(--tekst-odwrotny) !important;box-shadow:0 0 0 6px var(--akcent-15) !important;transform:translateY(-1px) !important}
.hv-11:hover{transform:scale(1.02) !important;border-color:var(--akcent-5) !important}
.hv-12:hover{transform:translateY(-4px) !important;border-color:var(--akcent-5) !important}
.hv-13:hover{border-color:var(--akcent) !important;background:var(--akcent-08) !important;color:var(--tekst) !important}
.hv-14:hover{border-color:var(--ramka-mocna) !important}
.hv-15:hover{transform:translateY(-6px) !important;border-color:var(--ramka-mocna) !important}
.hv-16:hover{background:linear-gradient(90deg,var(--akcent-06),transparent) !important;padding-left:12px !important}