/* Strona hiretorin.com (plan/STRONA-WWW-2027.md). Tokeny marki przychodzą
   z marka/tokeny.py w <style> głowy (jasny i ciemny motyw); tu są wyłącznie
   reguły. Barwa tylko z tokenu, cień tylko z tokenu, ruch tylko transform
   i opacity, hover tylko przy prawdziwym kursorze (testy.test_wyglad).

   Układ: kolumna 1200 px w dwunastu kolumnach z widocznymi szynami po
   bokach; etykieta sekcji w pierwszych trzech kolumnach, treść od czwartej
   do końca, na każdej stronie ta sama linia. Akcent należy do przycisku
   głównego i fokusu oraz do jednego żywego elementu: licznika kosztu
   w scenie. Odnośnik w tekście ma barwę tekstu i szare podkreślenie
   (recenzja 3). Obrazem jest produkt: sceny z komponentów aplikacji. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@view-transition{navigation:auto}
body{margin:0;background:var(--tlo);color:var(--tekst);
  font:400 18px/1.6 var(--tresc);min-height:100vh;display:flex;
  flex-direction:column;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
main{flex:1 0 auto;position:relative;overflow-x:clip}
::selection{background:var(--akcent-tlo);color:var(--tekst)}
a{color:var(--tekst);text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--linia-mocna)}
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration-color:var(--tekst)}}
p,li,dd,td{text-wrap:pretty}
.bez-lamania{white-space:nowrap}
img,svg{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--akcent);outline-offset:3px;
  border-radius:4px}
code{font-family:var(--mono);font-size:.86em}
.mono{font-family:var(--tresc);font-variant-numeric:tabular-nums}
.szept{color:var(--tekst-3);font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
td,.liczba,dt.liczba,span.liczba{font-variant-numeric:tabular-nums lining-nums}

/* ---------------------------------------------------------- siatka */
.kontener{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
main::before,main::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;background:var(--linia-slaba);pointer-events:none;z-index:0}
main::before{left:calc(max(40px,50% - 600px) - 20px)}
main::after{right:calc(max(40px,50% - 600px) - 20px)}
main>section{position:relative;z-index:1}

.etykieta{font:500 12.5px/1.4 var(--tresc);text-transform:uppercase;
  letter-spacing:.08em;color:var(--tekst-3);margin:0;display:flex;
  align-items:center}
.etykieta .nr{color:var(--tekst);margin-right:12px}
.sekcja-glowa .etykieta::before,
.naglowek-strony .etykieta::before{content:"";
  width:14px;height:var(--kreska);border-radius:4px;background:currentColor;
  margin-right:12px;flex:none;opacity:.6}

h1,h2,h3,h4{font-family:var(--wysw);color:var(--tekst);text-wrap:balance}
h1{font-weight:700;font-size:clamp(min(46px,12.5vw),8vw,120px);line-height:.94;
  letter-spacing:-.035em;margin:0}
h1 .druga{display:block;color:var(--tekst-3)}
h2{font-weight:700;font-size:clamp(34px,4.4vw,60px);line-height:1.02;
  letter-spacing:-.03em;margin:0}
h2.maly{font-size:clamp(26px,2.6vw,34px);margin:0 0 24px}
h2.odstep{margin-top:clamp(56px,6vw,88px)}
h3{font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.01em;
  margin:0 0 8px}
.wstep{font-size:19px;line-height:1.55;color:var(--tekst-2);max-width:60ch;
  margin:20px 0 0}
.wstep.duzy{font-size:clamp(19px,1.7vw,22px);max-width:56ch}

/* Jedna wysokość rytmu dla każdej sekcji; ostatni element sekcji nie
   dokłada własnego marginesu. */
.sekcja{padding:var(--o-sekcja) 0;border-top:1px solid var(--linia)}
.sekcja.bez-linii{border-top:0;padding-top:0}
.sekcja>.kontener>:last-child{margin-bottom:0}
.sekcja-glowa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;margin-bottom:clamp(40px,5vw,72px);align-items:start}
.sekcja-glowa>.etykieta{grid-column:1/4;padding-top:14px}
.sekcja-tytul{grid-column:4/-1}
/* Treść sekcji, która nie ma własnego układu, stoi w kolumnie 4–12. */
.w-kolumnie,.paragon,.faq,.czytanie-w,.warunki-w{
  margin-left:calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px)}

/* Paragon: sygnatura strony. Jedna linia pod sekcją: źródło, data,
   liczba i miejsce, gdzie ją widać. */
.paragon{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;
  margin-top:40px;padding-top:14px;
  border-top:1px dashed var(--linia-mocna);font:500 12.5px/1.6 var(--tresc);
  color:var(--tekst-3)}
/* Kropka należy do elementu przed nią, więc nigdy nie zaczyna wiersza
   (recenzja 4: na 768 px wiersz zaczynał się od „·”). */
.paragon span:not(:last-of-type)::after{content:"·";margin-left:18px;
  color:var(--linia-mocna)}
.paragon a{margin-left:auto;color:var(--tekst);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;min-height:28px}
.paragon a::after{content:"→";transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .paragon a:hover{text-decoration:underline}
  .paragon a:hover::after{transform:translateX(3px)}}

/* ---------------------------------------------------------- przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:var(--r);
  background:var(--akcent);color:var(--na-barwie);text-decoration:none;
  font:600 15px/1.2 var(--tresc);border:1px solid transparent;
  box-shadow:var(--cien-przycisk);cursor:pointer;white-space:nowrap;
  transition:background-color var(--ruch-krotki) var(--krzywa),
    border-color var(--ruch-krotki) var(--krzywa),
    transform var(--ruch-krotki) var(--krzywa)}
.btn.duzy{min-height:52px;padding:0 26px;font-size:16px}
.btn.maly{min-height:40px;padding:0 14px;font-size:14px}
@media (pointer:coarse),(max-width:760px){.btn.maly{min-height:44px}}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--akcent-mocny)}
  .btn.drugi:hover{border-color:var(--tekst-3);background:var(--karta)}}
.btn.drugi{background:var(--karta);color:var(--tekst);
  border-color:var(--linia-mocna);box-shadow:var(--cien)}
.przyciski{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.przyciski.odstep{margin-top:32px}

/* ---------------------------------------------------------- nagłówek */
.przeskocz{position:absolute;left:16px;top:-80px;z-index:50;
  background:var(--karta);color:var(--tekst);padding:10px 16px;
  border-radius:var(--r);box-shadow:var(--cien-karta)}
.przeskocz:focus{top:12px}
.naglowek{position:sticky;top:0;z-index:30;background:var(--tlo);
  border-bottom:1px solid var(--linia-slaba);
  transition:border-color var(--ruch) var(--krzywa),
    background-color var(--ruch) var(--krzywa)}
.js .naglowek[data-gora]{border-bottom-color:transparent}
.naglowek-w{display:flex;align-items:center;gap:32px;min-height:64px}
.znak{display:inline-flex;align-items:center;gap:10px;
  font:800 22px/1 var(--wysw);letter-spacing:-.03em;color:var(--tekst);
  text-decoration:none;min-height:44px}
/* Logo TORIN (marka/logotyp.py): barwy z tokenów --logo-*, w ciemnym
   motywie znak i napis w papierze, akcent koralowy. */
.logo-torin{display:block;flex:none}
.logo-torin .l-z{fill:var(--logo-znak)}
.logo-torin .l-a{fill:var(--logo-akcent)}
.logo-torin .l-n{fill:var(--logo-napis)}
.menu{display:flex;gap:4px;margin-left:12px}
.menu a{color:var(--tekst-2);text-decoration:none;font-size:15px;
  padding:0 12px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:var(--r);transition:color var(--ruch-krotki) var(--krzywa)}
.menu a[aria-current=page]{color:var(--tekst);font-weight:600}
@media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--tekst)}}
.naglowek-akcje{margin-left:auto;display:flex;align-items:center;gap:8px}
.logowanie{color:var(--tekst-2);text-decoration:none;font-size:15px;
  padding:0 12px;min-height:44px;display:inline-flex;align-items:center}
.naglowek-akcje .btn{min-height:40px;padding:0 16px;font-size:14.5px}
.menu-mobilne{display:none}

/* ---------------------------------------------------------- bohater */

/* Wskaźniki: jeden komponent dla bohatera, wiedzy, strażnika i testów
   (recenzja 3: były cztery). Linia nad, cyfra jednej wielkości, podpis. */
.fakty,.liczby-male{display:grid;margin:0;column-gap:32px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--linia)}
.fakty{grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(56px,6vw,80px)}
.fakty>div,.liczby-male>div{padding:22px 0 0;min-width:0}
.fakty dt,.liczby-male dt{font:600 clamp(40px,3.6vw,56px)/1
  var(--wysw);letter-spacing:-.035em}
.fakty dd,.liczby-male dd{margin:10px 0 0;font-size:15px;
  line-height:1.45;color:var(--tekst-2)}

/* Szerokie ekrany: scena wychodzi w prawy margines, żeby okno produktu
   miało miejsce na rozmowę i płótno obok siebie. */

/* ---------------------------------------------------------- okno */
.okno{background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);overflow:hidden;box-shadow:var(--cien-karta);
  position:relative}
.okno-belka{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:46px;padding:0 12px 0 18px;background:var(--karta-2);
  border-bottom:1px solid var(--linia-slaba);font-size:14px}
.okruszki{display:flex;align-items:center;gap:8px;color:var(--tekst-3);
  min-width:0;white-space:nowrap;overflow:hidden}
.okruszki b{color:var(--tekst);font-weight:600;overflow:hidden;
  text-overflow:ellipsis}
.belka-prawa{display:flex;align-items:center;gap:8px}
.plakietka{font:500 12px/1 var(--tresc);text-transform:uppercase;
  letter-spacing:.05em;color:var(--tekst-3);border:1px solid var(--linia);
  border-radius:var(--r-pastylka);padding:6px 10px;white-space:nowrap}
.pl-krotko{display:none}
/* Na telefonie belka okna mieści nazwę bez wielokropka: krótka plakietka
   i sama nazwa w okruszkach (recenzja 4). */
@media (max-width:480px){
  .pl-dlugo{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .pl-krotko{display:inline}
  .okruszki>span:first-child,.okruszki>span[aria-hidden]{display:none}}
/* Najwęższe telefony: plakietka schodzi pod nazwę zamiast ją ucinać. */
@media (max-width:380px){
  .okno .okno-belka{flex-wrap:wrap;row-gap:6px;padding-top:8px;
    padding-bottom:8px}
  .okruszki{overflow:visible;white-space:normal}}
.licznik{display:inline-flex;align-items:baseline;gap:6px;
  font:500 13px/1 var(--tresc);color:var(--tekst-2);background:var(--tlo);
  border:1px solid var(--linia-slaba);border-radius:var(--r-pastylka);
  padding:7px 12px;white-space:nowrap}
/* Jedyny niebieski element sceny: to, co żyje. */
.licznik b{color:var(--akcent);font-weight:600;min-width:1ch;text-align:right}
.pigulka{display:inline-flex;align-items:center;min-height:24px;
  padding:0 10px;border-radius:var(--r-pastylka);font:600 12.5px/1 var(--tresc);
  white-space:nowrap}
.pigulka.czeka,.p-zgoda{background:var(--zolty-tlo);color:var(--zolty)}
.pigulka.zrobiona,.p-wykonane,.p-dobrze{background:var(--zielony-tlo);
  color:var(--zielony)}
.p-odczyt,.p-kontrola,.pigulka.cofnieta,.p-cofnieta{background:var(--tlo);
  color:var(--tekst-2);box-shadow:0 0 0 1px var(--linia)}
.p-zle{background:var(--czerwony-tlo);color:var(--czerwony)}
.sc-glowny{display:inline-flex;align-items:center;min-height:36px;
  padding:0 14px;border-radius:var(--r);background:var(--tekst);
  color:var(--tlo);font-weight:600;font-size:14px;
  transition:transform 120ms var(--krzywa)}
.sc-glowny.nacisk{transform:scale(.97)}
.sc-drugi{font-size:14px;color:var(--tekst-2);padding:0 8px}
.sc-mini{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;
  border-radius:var(--r);background:var(--tekst);color:var(--tlo);
  font-size:13px;font-weight:600}
.sc-mini.drugi{background:var(--karta);color:var(--tekst);
  box-shadow:0 0 0 1px var(--linia)}

/* ---------------------------------------------------------- scena */
.scena{position:relative;isolation:isolate}
.scena::before{content:"";position:absolute;inset:-10% -8% -6%;z-index:-1;
  background:var(--poswiata);pointer-events:none}
.scena-przebiegi{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.pigulka-przebiegu{font:500 13.5px/1 var(--tresc);min-height:34px;padding:0 14px;
  border-radius:var(--r-pastylka);border:1px solid var(--linia);
  background:var(--karta);color:var(--tekst-2);cursor:pointer;
  transition:color var(--ruch-krotki) var(--krzywa),
    border-color var(--ruch-krotki) var(--krzywa)}
.pigulka-przebiegu[aria-selected=true]{color:var(--tekst);
  border-color:var(--tekst);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .pigulka-przebiegu:hover{color:var(--tekst)}}
/* Trzy przebiegi w jednej komórce: ukryte zajmują miejsce (niewidoczne),
   więc okno ma wysokość najdłuższego i nic nie skacze przy przełączeniu
   ani nie jest ucinane (recenzja 3: stała wysokość cięła ostatnią linię).
   Bez skryptu stoi tylko pierwszy przebieg. */
.scena-okno{display:grid}
.przebieg{grid-area:1/1;min-width:0}
@media (min-width:901px){
  .js .scena-okno>.przebieg[hidden]{display:block!important;visibility:hidden}}
.przebieg-cialo{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  min-height:560px}
.okno-rozmowa{display:flex;flex-direction:column;min-width:0;
  border-right:1px solid var(--linia-slaba)}
.watki{flex:1;display:flex;flex-direction:column;gap:16px;
  padding:22px 22px 10px}
.wiad-ja{align-self:flex-end;max-width:90%;background:var(--tlo);
  border:1px solid var(--linia-slaba);border-radius:14px 14px 4px 14px;
  padding:10px 14px}
.wiad-ja p{margin:0;font-size:14.5px;line-height:1.45;color:var(--tekst)}
.wiad-meta{font:12px/1.4 var(--tresc);color:var(--tekst-3)}
.wiad-ja .wiad-meta{display:block;text-align:right;margin-top:4px}
.wiad-torin{display:flex;flex-direction:column;gap:12px}
.wiad-glowa{display:flex;align-items:center;gap:8px;font-size:14px}
.awatar{display:grid;place-items:center;width:24px;height:24px}
.zespol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:13px;color:var(--tekst-2)}
.zeton-spec{display:inline-flex;align-items:center;gap:6px;min-height:26px;
  padding:0 10px;border:1px solid var(--linia);border-radius:var(--r-pastylka);
  background:var(--karta);color:var(--tekst);font-weight:600;font-size:12.5px}
.zeton-spec svg{color:var(--tekst-3)}
/* Linia kroków należy do każdego kroku: rośnie razem z krokami. */
.kroki-sceny{list-style:none;margin:0 0 0 11px;padding:0;display:flex;
  flex-direction:column}
.kroki-sceny li{position:relative;display:grid;
  grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:center;
  min-height:28px;padding:2px 0 2px 16px;font-size:13px;line-height:1.4;
  color:var(--tekst-2)}
.kroki-sceny li::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:1px;background:var(--linia)}
.krok-tresc b{color:var(--tekst);font-weight:600}
.krok-stan{display:grid;place-items:center;width:18px;height:18px}
.krok-stan>*{grid-area:1/1}
/* Krok w toku: stały pierścień, bez obrotu w pętli (ruch ≤ 300 ms). */
.kolko{width:12px;height:12px;border-radius:50%;
  border:2px solid var(--tekst-3);opacity:0;
  transition:opacity var(--ruch-krotki) var(--krzywa)}
.ptaszek{color:var(--zielony);transition:opacity var(--ruch-krotki) var(--krzywa)}
.odpowiedz>p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
.odpowiedz b{font-weight:650;font-variant-numeric:tabular-nums}
.cytat-wiedzy{display:inline-flex;align-items:flex-start;gap:8px;
  font:12.5px/1.45 var(--tresc);color:var(--tekst-2);background:var(--tlo);
  border:1px solid var(--linia-slaba);border-radius:var(--r);
  padding:6px 10px;margin:2px 0 8px}
.odpowiedz>p.cytat-wiedzy{font-size:12px;line-height:1.45}
.cytat-wiedzy svg{color:var(--tekst-3);flex:none;margin-top:1px}
.odpowiedz>p.wiad-stopka{font-size:12.5px;margin:0;color:var(--tekst-3)}
.kompozytor{padding:10px 18px 18px}
.kompozytor-pole{display:flex;align-items:center;gap:8px;min-height:46px;
  padding:0 7px 0 14px;border:1px solid var(--linia);border-radius:12px;
  background:var(--karta);box-shadow:var(--cien-pole);font-size:14.5px}
.kompozytor-pole [data-pisze]{color:var(--tekst)}
.kompozytor-pole [data-pisze]:empty{display:none}
.kompozytor-pole [data-pisze]:not(:empty)+.kompozytor-podp{display:none}
.kompozytor-podp{color:var(--tekst-3)}
.kompozytor-wyslij{margin-left:auto;display:grid;place-items:center;
  width:32px;height:32px;border-radius:var(--r);background:var(--tekst);
  color:var(--tlo)}
.okno-plotno{position:relative;display:flex;flex-direction:column;gap:10px;
  padding:14px;background:var(--tlo);min-width:0}
.plotno-glowa{display:flex;justify-content:space-between;gap:8px;
  padding:4px 4px 0}
.karta-zgody{background:var(--karta);border:1px solid var(--linia);
  border-radius:12px;padding:16px;box-shadow:var(--cien)}
.karta-zgody h3{font-size:16px;line-height:1.35;margin:10px 0 4px}
.kz-stan{display:grid;justify-items:start}
.kz-stan>*{grid-area:1/1;transition:opacity 200ms var(--krzywa)}
.kz-pod{margin:0;font-size:12.5px;color:var(--tekst-3)}
.kz-etykieta{margin:14px 0 2px}
.piec-pytan{margin:0;display:flex;flex-direction:column}
.piec-pytan>div{padding:7px 0;border-top:1px solid var(--linia-slaba);
  transition:opacity var(--ruch) var(--krzywa)}
.piec-pytan dt{font-size:12.5px;font-weight:650;color:var(--tekst)}
/* Bez wielokropka (recenzja 3): zdanie karty zawsze w całości. W wąskim
   oknie bohatera stoi jednolinijkowy skrót z katalogu, a pełne linie są
   dla czytnika ekranu i na każdej innej szerokości. */
.piec-pytan dd{margin:2px 0 0;font-size:12.5px;line-height:1.45;
  color:var(--tekst-2)}
.kz-skrot{display:none}
.plan-kroki dd{display:flex;justify-content:space-between;gap:12px}
.plan-kroki dd .liczba{white-space:nowrap;flex:none}
.kz-krok{min-width:0}
.kz-akcje{display:grid;margin-top:12px}
.kz-akcje>*{grid-area:1/1;transition:opacity 200ms var(--krzywa)}
.kz-przyciski{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kz-wykonane{display:flex;align-items:center;gap:8px;margin:0;
  padding:9px 12px;border-radius:var(--r);background:var(--zielony-tlo);
  color:var(--zielony);font-size:13px;font-weight:600}
.kz-wykonane.szary{background:var(--tlo);color:var(--tekst-2);
  box-shadow:0 0 0 1px var(--linia)}
.kz-dalej{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  margin:8px 0 0;font-size:13px;color:var(--tekst-3)}
.sc-link{display:inline-flex;align-items:center;gap:4px;min-height:28px;
  padding:0;border:0;background:none;font:600 13px/1 var(--tresc);
  color:var(--tekst);cursor:pointer}
.okno-kursor{position:absolute;left:0;top:0;z-index:3;opacity:0;
  pointer-events:none;transition:transform 280ms var(--krzywa-szuflada),
    opacity 200ms var(--krzywa)}
.okno-kursor path{fill:var(--tekst);stroke:var(--karta);stroke-width:1.5;
  stroke-linejoin:round}
.scena-pod{display:flex;justify-content:space-between;align-items:center;
  gap:24px;margin-top:16px}
.scena-pod p{margin:0;font-size:13.5px;line-height:1.5;color:var(--tekst-3);
  max-width:64ch}

/* Odtwarzanie. Stan końcowy jest domyślny: bez skryptu i przy
   ograniczonym ruchu przebieg stoi gotowy. Elementy zajmują miejsce od
   początku, więc nic się nie przesuwa. */
.przebieg [data-k]{transition:opacity 260ms var(--krzywa),
  transform 260ms var(--krzywa)}
.przebieg.gra [data-k]{opacity:0;transform:translateY(8px)}
.przebieg.gra .karta-zgody[data-k]{transform:translateX(14px)}
.przebieg.gra [data-k].jest{opacity:1;transform:none}
.przebieg.gra .zeton-spec+.zeton-spec{transition-delay:70ms}
.przebieg.gra .piec-pytan>div{opacity:0}
.przebieg.gra .karta-zgody.jest .piec-pytan>div{opacity:1}
.przebieg.gra .karta-zgody.jest .piec-pytan>div:nth-child(2){transition-delay:50ms}
.przebieg.gra .karta-zgody.jest .piec-pytan>div:nth-child(3){transition-delay:100ms}
.przebieg.gra .karta-zgody.jest .piec-pytan>div:nth-child(4){transition-delay:150ms}
.przebieg.gra .karta-zgody.jest .piec-pytan>div:nth-child(5){transition-delay:200ms}
.przebieg.gra li[data-krok]:not(.zrobione) .ptaszek{opacity:0}
.przebieg.gra li[data-krok].trwa .kolko{opacity:1}
/* Pigułka i wynik: czeka → wykonana → (Cofnij) cofnięta. */
.kz-stan .zrobiona,.kz-stan .cofnieta,.kz-cofniete{opacity:0}
.kz-cofniete{pointer-events:none}
.przebieg:not(.gra):not(.cofniete) .kz-stan .zrobiona,
.przebieg.wykonane .kz-stan .zrobiona{opacity:1}
.przebieg:not(.gra):not(.cofniete) .kz-stan .czeka,
.przebieg.wykonane .kz-stan .czeka,.przebieg.cofniete .kz-stan .czeka{opacity:0}
.przebieg.cofniete .kz-stan .cofnieta,.przebieg.cofniete .kz-cofniete{opacity:1}
.przebieg:not(.gra) .kz-przyciski,.przebieg.wykonane .kz-przyciski,
.przebieg.cofniete .kz-przyciski{opacity:0;pointer-events:none}
.przebieg.gra:not(.wykonane) .kz-wynik,.przebieg.cofniete .kz-wynik{opacity:0;
  pointer-events:none}
.okno-kursor.widac{opacity:1}

/* ---------------------------------------------------------- specjaliści */
.specjalisci{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:start}
.spec-lista{grid-column:1/4;display:flex;flex-direction:column;
  border-top:1px solid var(--linia)}
.spec-karty{grid-column:4/-1;min-width:0;display:grid;gap:24px}
.spec-lista a{position:relative;display:flex;align-items:center;gap:12px;
  min-height:44px;padding:0 12px;border-bottom:1px solid var(--linia-slaba);
  color:var(--tekst-2);text-decoration:none;font-size:15px;
  transition:color var(--ruch-krotki) var(--krzywa),
    background-color var(--ruch-krotki) var(--krzywa)}
.spec-lista a svg{color:var(--tekst-3);flex:none}
.spec-poziom{margin-left:auto;font-size:11.5px;color:var(--tekst-3);
  letter-spacing:.02em}
.spec-lista a[aria-selected=true]{color:var(--tekst);font-weight:600;
  background:var(--karta)}
.spec-lista a[aria-selected=true] svg{color:var(--tekst)}
.spec-lista a[aria-selected=true]::before{content:"";position:absolute;
  left:0;top:10px;bottom:10px;width:var(--kreska);border-radius:0 4px 4px 0;
  background:var(--tekst)}
@media (hover:hover) and (pointer:fine){
  .spec-lista a:hover{color:var(--tekst);background:var(--karta-2)}}
.spec-karta{background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);padding:clamp(22px,3vw,40px);
  box-shadow:var(--cien-karta);scroll-margin-top:96px}
.specjalisci:not([data-z-adresu]) .spec-karta{position:sticky;top:96px}
.spec-glowa{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.spec-ikona{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:12px;background:var(--tlo);color:var(--tekst);
  box-shadow:0 0 0 1px var(--linia)}
.spec-glowa h3{font-size:clamp(26px,2.6vw,34px);line-height:1.05;
  letter-spacing:-.03em;margin:0}
.spec-model{margin:6px 0 0;font-size:13px;color:var(--tekst-3)}
.spec-pytanie,.spec-rola{margin:0;padding:20px 0;
  border-top:1px solid var(--linia-slaba)}
.spec-cytat{font:500 clamp(19px,1.8vw,23px)/1.35 var(--wysw);
  letter-spacing:-.01em;margin:8px 0 10px;color:var(--tekst)}
.spec-pytanie .szept{margin:0;font-size:14px}
.spec-rola p:last-child{margin:10px 0 0;padding-left:16px;font-size:15.5px;
  line-height:1.6;color:var(--tekst-2);border-left:2px solid var(--linia-mocna)}
.spec-kolumny{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:32px;padding-top:20px;border-top:1px solid var(--linia-slaba)}
.spec-narz,.spec-wiedza,.spec-kontrola{list-style:none;margin:10px 0 0;
  padding:0}
.spec-narz li,.spec-wiedza li{display:flex;flex-direction:column;gap:2px;
  padding:9px 0;border-bottom:1px solid var(--linia-slaba)}
.spec-narz b,.spec-wiedza b{font-size:14.5px;font-weight:600}
.spec-narz span{font-size:13.5px;line-height:1.45;color:var(--tekst-3)}
.spec-wiedza .mono{font-size:12.5px;color:var(--tekst-3)}
.spec-kolumny .szept{font-size:13.5px;margin:10px 0 0}
.spec-przed{margin-top:24px}
.spec-kontrola li{position:relative;padding:8px 0 8px 22px;font-size:14.5px;
  line-height:1.5;color:var(--tekst-2)}
.spec-kontrola li::before{content:"";position:absolute;left:2px;top:17px;
  width:10px;height:var(--kreska);border-radius:4px;background:var(--linia-mocna)}
.spec-kontrola.duza{margin-left:calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px;
  margin-top:0}
.spec-kontrola.duza li:nth-child(-n+2){padding-top:0}
.spec-kontrola.duza li:nth-child(-n+2)::before{top:9px}
.spec-kontrola.duza li{font-size:17px}

/* ---------------------------------------------------------- droga zmiany */
.droga{position:relative}
.droga-lepka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:center}
.js .droga-lepka{position:sticky;top:max(96px,calc(50vh - 200px))}
.droga-kroki{grid-column:1/6;list-style:none;margin:0;padding:0}
.droga-scena{grid-column:6/-1;min-width:0}
.droga-krok{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 8px;
  padding:14px 0;border-top:1px solid var(--linia-slaba);
  transition:opacity var(--ruch) var(--krzywa)}
.droga-krok:first-child{border-top:0}
.droga-nr{font-size:13px;color:var(--tekst-3);padding-top:6px}
.droga-krok h3{font-size:clamp(20px,1.8vw,24px);line-height:1.2;
  letter-spacing:-.02em;margin:0}
.droga-krok p{margin:8px 0 0;color:var(--tekst-2);font-size:16px;
  max-width:44ch}
.js .droga-krok:not(.aktywny){opacity:.42}
.js .droga-krok:not(.aktywny) p{display:none}
.js .droga-krok.aktywny .droga-nr{color:var(--tekst)}
.droga-okno{background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);overflow:hidden;box-shadow:var(--cien-karta)}
.droga-stos{display:grid;padding:28px;min-height:330px;background:var(--tlo);
  align-items:center}
.droga-warstwa{grid-area:1/1;opacity:0;transform:translateY(10px);
  transition:opacity 260ms var(--krzywa),transform 260ms var(--krzywa)}
.droga-stos[data-krok-drogi="1"] [data-warstwa="1"],
.droga-stos[data-krok-drogi="2"] [data-warstwa="2"],
.droga-stos[data-krok-drogi="3"] [data-warstwa="3"],
.droga-stos[data-krok-drogi="4"] [data-warstwa="4"],
.droga-stos[data-krok-drogi="5"] [data-warstwa="5"]{opacity:1;transform:none}
.droga-znaczniki{display:none}
.js .droga-znaczniki{display:block}
/* Tor przewijania: około 22% wysokości okna na krok, żeby zwykłe kółko
   nie przeskakiwało kroku (recenzja 4: 10vh gubiło krok 3). */
.droga-znaczniki div{height:22vh}
.droga-znaczniki div:last-child{height:32vh}
.droga-karta-mala{display:none;margin-top:18px}
.kd{background:var(--karta);border:1px solid var(--linia);border-radius:12px;
  padding:22px;box-shadow:var(--cien)}
.kd-glowa{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:15px}
.kd dl{margin:0}
.kd dl div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:12px;padding:10px 0;border-top:1px solid var(--linia-slaba);
  font-size:14.5px}
.kd dt{color:var(--tekst-3)}
.kd dd{margin:0;color:var(--tekst);font-weight:500}
.kd-przycisk{margin:14px 0 0}

.bariery-uklad{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:center;margin-top:clamp(56px,6vw,96px);
  padding-top:clamp(48px,5vw,72px);border-top:1px solid var(--linia-slaba)}
.bariery-uklad>div{grid-column:1/6}
.bariery-uklad>.okno{grid-column:6/-1;min-width:0}
.podtytul{font-size:clamp(26px,2.6vw,34px);line-height:1.1;
  letter-spacing:-.03em;margin:0}
.bariery{list-style:none;margin:28px 0 0;padding:0;counter-reset:b}
.bariery li{counter-increment:b;display:grid;
  grid-template-columns:40px minmax(0,1fr);gap:0 8px;padding:16px 0;
  border-top:1px solid var(--linia-slaba)}
.bariery li::before{content:counter(b,decimal-leading-zero);
  font:500 13px/1.9 var(--tresc);
  color:var(--tekst-3);grid-row:1/3}
.bariery h3{font-size:18px;margin:0 0 4px}
.bariery p{margin:0;color:var(--tekst-2);font-size:15.5px}

/* ---------------------------------------------------------- wiedza */

table{width:100%;border-collapse:collapse;font-size:15px}
caption{caption-side:bottom;text-align:left;padding-top:14px;
  font-size:14px;color:var(--tekst-3)}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--linia-slaba);
  vertical-align:top}
th{font:500 12px/1.4 var(--tresc);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tekst-3);white-space:nowrap;border-bottom-color:var(--linia)}
th:first-child,td:first-child{padding-left:0}
th.num,td.num{text-align:right;white-space:nowrap}
th.kwota,td.kwota{text-align:right;white-space:nowrap}

td code{overflow-wrap:anywhere}
.wiecej{margin-top:8px}
.wiecej>summary,.wzor summary,.faq summary{cursor:pointer;font-weight:600;
  min-height:44px;display:flex;align-items:center;list-style:none;gap:10px;
  font-size:16px}
.wiecej>summary::-webkit-details-marker,.wzor summary::-webkit-details-marker,
.faq summary::-webkit-details-marker{display:none}
.wiecej>summary::before,.wzor summary::before,.faq summary::before{content:"+";
  font:500 18px/1 var(--mono);color:var(--tekst-3);width:14px}
.wiecej[open]>summary::before,.wzor[open] summary::before,
.faq details[open] summary::before{content:"−"}

/* ---------------------------------------------------------- kalkulator */
.kalk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;
  align-items:start}
.kalk-opcje{grid-column:1/4;border:0;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px;min-width:0}
.kalk-wyniki{grid-column:4/-1;min-width:0}
.kalk-opcje legend{margin-bottom:12px;padding:0}
.kalk-opcja{position:relative;display:flex;align-items:center;min-height:52px;
  padding:0 16px;border:1px solid var(--linia);border-radius:12px;
  background:var(--karta);cursor:pointer;font-weight:500;font-size:15.5px;
  transition:border-color var(--ruch-krotki) var(--krzywa),
    color var(--ruch-krotki) var(--krzywa)}
.kalk-opcja input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.kalk-opcja:has(input:checked){border-color:var(--tekst);color:var(--tekst);
  font-weight:600;box-shadow:0 0 0 1px var(--tekst)}
.kalk-opcja:has(input:focus-visible){outline:2px solid var(--akcent);
  outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .kalk-opcja:hover{border-color:var(--linia-mocna)}}
/* Wszystkie warianty w jednej komórce, widoczny tylko wybrany: karta ma
   wysokość najdłuższego wariantu i nic pod nią nie skacze (recenzja 4). */
.kalk-wyniki{display:grid}
.kalk-wynik{grid-area:1/1;visibility:hidden;display:flex;
  flex-direction:column;background:var(--karta);
  border:1px solid var(--linia);
  border-radius:var(--r-karta);padding:clamp(22px,3vw,36px);
  box-shadow:var(--cien-karta)}
.kalk:has(input[value=audyt]:checked) .kalk-wynik[data-kalk=audyt],
.kalk:has(input[value=kampania]:checked) .kalk-wynik[data-kalk=kampania],
.kalk:has(input[value=tresci]:checked) .kalk-wynik[data-kalk=tresci],
.kalk:has(input[value=social]:checked) .kalk-wynik[data-kalk=social],
.kalk:has(input[value=strategia]:checked) .kalk-wynik[data-kalk=strategia],
.kalk:has(input[value=audyt_oferta]:checked) .kalk-wynik[data-kalk=audyt_oferta]{
  visibility:visible}
@supports not selector(:has(a)){.kalk-wynik{grid-area:auto;visibility:visible;
  margin-bottom:16px;display:flex!important}}
.kalk-zdanie{font:500 20px/1.35 var(--wysw);margin:8px 0 22px}
.kalk-kwota{margin:0;font-size:18px;color:var(--tekst-2)}
.kalk-kwota .liczba{font:600 clamp(48px,5.6vw,80px)/1 var(--wysw);
  letter-spacing:-.045em;color:var(--tekst);margin-right:6px}
/* Kwota w złotych (03.10) jest dłuższa od samych żetonów: na 320–400 px
   mniejsza, żeby „1.36–5.18 PLN” zmieściło się w karcie bez łamania. */
@media (max-width:400px){.kalk-kwota .liczba{font-size:clamp(30px,10vw,40px)}}
.kalk-wynik .szept{margin:10px 0 24px}
.kalk-kroki{font-size:14px}
.kalk-stopka{margin:auto 0 0;padding-top:16px;font-size:14px;
  color:var(--tekst-3)}
/* Na telefonie wybór jest nad kartą, więc karta może zmienić wysokość:
   widać tylko wybrany wariant, bez pustego ogona (recenzja 5). */
@media (max-width:700px){
  .kalk-wynik{display:none}
  .kalk:has(input[value=audyt]:checked) .kalk-wynik[data-kalk=audyt],
  .kalk:has(input[value=kampania]:checked) .kalk-wynik[data-kalk=kampania],
  .kalk:has(input[value=tresci]:checked) .kalk-wynik[data-kalk=tresci],
  .kalk:has(input[value=social]:checked) .kalk-wynik[data-kalk=social],
  .kalk:has(input[value=strategia]:checked) .kalk-wynik[data-kalk=strategia],
  .kalk:has(input[value=audyt_oferta]:checked) .kalk-wynik[data-kalk=audyt_oferta]{
    display:flex}}
.kalk-co{color:var(--tekst-2)}
.kalk-kroki .mono{font-size:12.5px;color:var(--tekst-3);white-space:nowrap}
.wzor{margin-top:32px;border-top:1px solid var(--linia-slaba);padding-top:12px;
  margin-left:calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px)}
.wzor p{font-size:15px;color:var(--tekst-2);max-width:80ch}

/* ---------------------------------------------------------- dwie kolumny */
.dwie-kolumny{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:start}
.dwie-kolumny>:first-child{grid-column:1/6}
.dwie-kolumny>:last-child{grid-column:6/-1;min-width:0}
.punkty{list-style:none;margin:0;padding:0}
.punkty li{padding:22px 0;border-top:1px solid var(--linia-slaba)}
.punkty li:first-child{border-top:0;padding-top:0}
.punkty h3{font-size:19px;margin:0 0 6px}
.punkty p{margin:0;color:var(--tekst-2);font-size:16.5px}
.punkty.trzy,.punkty.dwa{display:grid;gap:40px 32px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-left:calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px)}
/* 03.10: dwie kolumny na całą szerokość. Wcięcie o trzy łamy zostawiało
   po lewej pustą kolumnę, bo nagłówek sekcji stoi nad listą, nie obok. */
.punkty.dwa{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;
  column-gap:56px}
.punkty.trzy li,.punkty.dwa li,.punkty.trzy li:first-child,
.punkty.dwa li:first-child{border-top:1px solid var(--linia-mocna);
  padding:20px 0 0}
.punkty.dwa li{display:flex;flex-direction:column;gap:6px}
.punkty.dwa b{font:600 20px/1.3 var(--wysw)}
.punkty.dwa span{color:var(--tekst-2)}
.lista-prosta{margin-left:calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px)}
.lista-prosta li{font-size:17px;color:var(--tekst-2)}

/* ---------------------------------------------------------- komponenty */
.pm-filtry{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px;
  border-bottom:1px solid var(--linia-slaba);font-size:13.5px}
.pm-filtry span{padding:6px 10px;border-radius:var(--r-pastylka);
  color:var(--tekst-2)}
.pm-filtry .aktywny{background:var(--tlo);color:var(--tekst);font-weight:600}
.pm-lista,.pl-lista,.pt-opcje{list-style:none;margin:0;padding:0}
.pm-wpis{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;
  align-items:center;padding:16px 20px;border-bottom:1px solid var(--linia-slaba)}
.pm-wpis:last-child{border-bottom:0}
.pm-czeka{box-shadow:inset 3px 0 0 var(--zolty)}
.pm-grupa{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--tekst-3)}
.pm-tresc b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.pm-zrodlo{font-size:13.5px;color:var(--tekst-3)}
.pm-akcje{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:8px}
.pm-cofnij{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;
  color:var(--tekst-3)}
.us-tresc{padding:20px 22px 22px}
.us-glowa{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.us-meta{font-size:12.5px;color:var(--tekst-3)}
.us-tresc h3{font-size:20px;line-height:1.3;margin:14px 0 6px}
.us-dl{margin:6px 0 0}
.us-dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;
  padding:11px 0;border-top:1px solid var(--linia-slaba);font-size:15px}
.us-dl dt{color:var(--tekst-3)}
.us-dl dd{margin:0;color:var(--tekst)}
.us-dl dd.mono{font-size:13px;color:var(--tekst-2)}
.us-akcje{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:16px 0 0}
.us-akcje .sc-glowny{white-space:nowrap}
.pl-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 16px;padding:14px 0;border-top:1px solid var(--linia-slaba)}
.pl-lista li:first-child{border-top:0}
.pl-lista .mono{grid-column:1/-1;font-size:12px;color:var(--tekst-3);
  text-transform:uppercase;letter-spacing:.05em}
.pl-lista b{font-size:15px;font-weight:600}
.pl-lista span:not(.mono):not(.sc-mini){grid-column:1;font-size:14px;
  color:var(--tekst-2)}
.pl-lista .sc-mini{grid-column:2;grid-row:2/4;align-self:center}
.portfel-lista{list-style:none;margin:0;padding:6px 20px 10px}
.portfel-lista li{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:52px;padding:8px 0;border-top:1px solid var(--linia-slaba);
  font-size:15px}
.portfel-lista li:first-child{border-top:0}
.portfel-lista li>b{font-weight:600}
.portfel-lista li>b:has(svg){display:inline-flex;align-items:center;gap:8px}
.portfel-lista li>b svg{color:var(--tekst-3)}
.portfel-lista .mono{font-size:12.5px;color:var(--tekst-3);text-align:right}
.sklad{padding:20px}
.sklad .wiad-ja{margin:0 0 18px auto;width:fit-content}
.sklad .etykieta{margin-bottom:4px}
.sklad-lista{padding:0}
.sklad .szept{margin:12px 0 0;font-size:13.5px}
.pt-opcje{margin:12px 0 16px}
.pt-opcja{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;
  padding:14px;border:1px solid var(--linia);border-radius:12px;margin-bottom:8px}
.pt-opcja.wybrana{border-color:var(--tekst);box-shadow:0 0 0 1px var(--tekst)}
.pt-kolko{width:18px;height:18px;border-radius:50%;margin-top:2px;
  box-shadow:inset 0 0 0 2px var(--linia-mocna)}
.pt-opcja.wybrana .pt-kolko{box-shadow:inset 0 0 0 5px var(--tekst)}
.pt-opcja b{display:block;font-size:15px}
.pt-opcja span span{display:block;margin-top:2px;font-size:14px;
  line-height:1.45;color:var(--tekst-2)}

/* ---------------------------------------------------------- marka */
.marka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;
  align-items:start;margin-top:32px}
.mk-szkic{grid-column:1/8}
.mk-po{grid-column:8/-1;position:sticky;top:96px;display:grid;gap:16px}
.mk-profil-dl{margin:0;padding:4px 22px 14px}
.mk-tresc{padding:22px 22px 10px}
.mk-czesc{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;
  margin:0 0 14px;font-size:16px;line-height:1.55}
.mk-czesc .mono{font-size:12px;color:var(--tekst-3);padding-top:4px}
.mk-naglowek{font:600 21px/1.3 var(--wysw);letter-spacing:-.01em}
mark{background:var(--czerwony-tlo);color:var(--czerwony);border-radius:4px;
  padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk-naruszenia{border-top:1px solid var(--linia-slaba);padding:16px 22px 20px}
.mk-naruszenia ul{list-style:none;margin:10px 0 0;padding:0}
.mk-naruszenia li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:11px 0;
  border-top:1px solid var(--linia-slaba);font-size:14.5px;line-height:1.45}
.mk-naruszenia li b{color:var(--czerwony);font-weight:600}
.mk-frag{color:var(--tekst)}
.mk-naruszenia li span:last-child:not(.mk-frag){flex-basis:100%;
  color:var(--tekst-2)}
.mk-zero{margin:0;padding:0 22px 22px;font-size:12.5px;color:var(--zielony)}
.zetony-lista{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;
  margin:0}
.zetony-lista li{display:inline-flex;align-items:center;min-height:34px;
  padding:0 14px;border:1px solid var(--linia);border-radius:var(--r-pastylka);
  background:var(--karta);font-size:14px}

/* ---------------------------------------------------------- strażnik */
.straznik-uklad{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:start}
.straznik-uklad>:first-child{grid-column:1/6}
.straznik-uklad>:last-child{grid-column:6/-1;min-width:0}
.straznik-uklad .liczby-male{margin-bottom:28px}
.liczby-male.w-kolumnie{margin-bottom:32px}
figure.zrzut{margin:0}
figure.zrzut img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid var(--linia);box-shadow:var(--cien-karta);
  background:var(--karta)}
@media (prefers-color-scheme:dark){figure.zrzut img{filter:brightness(.86)}}
figure.zrzut figcaption{color:var(--tekst-3);font-size:14px;margin-top:12px}
.zrzuty{display:grid;gap:56px;grid-template-columns:minmax(0,1fr)}

/* ---------------------------------------------------------- kanały */

/* ---------------------------------------------------------- porównanie */
.porownanie th,.porownanie td{padding:16px;font-size:16px;line-height:1.5}
.porownanie thead th{padding-top:14px;padding-bottom:14px}
.porownanie tbody th{font:600 16px/1.4 var(--tresc);color:var(--tekst);
  text-transform:none;letter-spacing:0;white-space:normal;width:22%}
.porownanie td.oni{color:var(--tekst-3);width:30%}
.porownanie td.my{background:var(--karta);color:var(--tekst)}
.porownanie thead th:last-child{background:var(--karta);
  border-radius:12px 12px 0 0;color:var(--tekst)}
.my-w{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;
  align-items:start}
.porownanie td.my svg{color:var(--zielony);margin-top:4px}
.porownanie tbody th,.warunki tbody th,.macierz tbody th,.role tbody th{
  border-bottom-color:var(--linia-slaba)}

/* ---------------------------------------------------------- cennik */

.zero{font-size:17px;font-weight:600;margin:28px 0 0;color:var(--tekst)}
.tabela-karty{background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);padding:8px 28px;box-shadow:var(--cien-karta)}
.tabela-karty table tr:last-child td{border-bottom:0}
.tabela-karty+.szept{margin-top:14px}
table.cennik td{padding-top:16px;padding-bottom:16px}
table.cennik td:first-child{white-space:normal}
table.cennik td.kwota{font:600 18px/1.3 var(--wysw)}
table.lista{table-layout:fixed}
/* Okno obok nagłówka cennika: ile zadań mieści pakiet. */
.ile-zadan table{font-size:14.5px}
.ile-zadan th,.ile-zadan td{padding:9px 12px;vertical-align:baseline}
.ile-zadan th:first-child,.ile-zadan td:first-child{padding-left:20px}
.ile-zadan th:last-child,.ile-zadan td:last-child{padding-right:20px}
.ile-zadan th{padding-top:14px}
.ile-zadan td:first-child{color:var(--tekst)}
.ile-zadan td.num{font:600 15px/1.4 var(--tresc);color:var(--tekst)}
.ile-zadan td.num.mono{font:500 12.5px/1.4 var(--tresc);color:var(--tekst-3)}
.ile-zadan tr:last-child td{border-bottom:0}
.ile-zadan .szept{margin:0;padding:12px 20px 18px;font-size:13px;
  line-height:1.5;border-top:1px solid var(--linia-slaba)}
.ile-zadan td.num,.ile-zadan td.num.mono{
  font-variant-numeric:tabular-nums lining-nums}
@media (max-width:480px){
  .ile-zadan table{font-size:13.5px}
  .ile-zadan th,.ile-zadan td{padding:8px 6px}
  .ile-zadan th:first-child,.ile-zadan td:first-child{padding-left:14px}
  .ile-zadan th:last-child,.ile-zadan td:last-child{padding-right:14px}
  .ile-zadan .szept{padding:12px 14px 16px}}
@media (max-width:380px){
  .ile-zadan th:nth-child(2),.ile-zadan td:nth-child(2){display:none}}
/* Okno „ile zadań”: obok nagłówka na szerokim ekranie, pod tabelą na
   telefonie, żeby pierwsza cena stała na pierwszym ekranie (recenzja 6). */
.ile-zadan.tylko-waski,.typowy-miesiac.tylko-waski{display:none}
@media (max-width:700px){
  .ile-zadan.tylko-szeroki,.typowy-miesiac.tylko-szeroki,
  .ns-obok:has(.tylko-szeroki){display:none}
  .ile-zadan.tylko-waski,.typowy-miesiac.tylko-waski{display:block;
    margin-top:32px}}
/* 03.10: „ile zadań” pod kalkulatorem, w łamie wyników. */
.ile-zadan.pod-kalk{margin:40px 0 0 calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px)}
.ile-zadan td.num.koszt{font:500 13.5px/1.4 var(--tresc);color:var(--tekst-2);
  font-variant-numeric:tabular-nums lining-nums}
@media (max-width:900px){.ile-zadan.pod-kalk{margin-left:0}}
/* „Typowy miesiąc” (03.10): trzy profile, kwota w złotych z prawej. */
.tm-wstep{margin:0;padding:14px 20px 4px;font-size:14px;color:var(--tekst-2)}
.tm-lista{list-style:none;margin:0;padding:0 20px}
.tm-lista li{padding:14px 0;border-bottom:1px solid var(--linia-slaba)}
.tm-lista li:last-child{border-bottom:0}
.tm-glowa{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:baseline;gap:4px 16px}
.tm-glowa b{font:600 16px/1.35 var(--wysw);color:var(--tekst)}
.tm-kwota{font:600 17px/1.3 var(--wysw);color:var(--tekst);white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums}
.tm-lista p{margin:6px 0 0;font-size:13.5px;line-height:1.5;
  color:var(--tekst-2)}
.tm-lista .tm-pakiet{color:var(--tekst);font-weight:500}
.typowy-miesiac .szept{margin:0;padding:12px 20px 18px;font-size:13px;
  line-height:1.5;border-top:1px solid var(--linia-slaba)}
@media (max-width:480px){
  .tm-wstep{padding:12px 14px 2px}
  .tm-lista{padding:0 14px}
  .typowy-miesiac .szept{padding:12px 14px 16px}}
/* „Większe zespoły?” pod tabelą pakietów. */
.wieksze{margin-top:28px;padding:20px 24px;border:1px solid var(--linia);
  border-radius:var(--r-karta);max-width:860px}
.wieksze h3{margin:0 0 6px;font-size:18px}
.wieksze p{margin:0;font-size:15.5px;line-height:1.6;color:var(--tekst-2)}
@media (max-width:480px){.wieksze{padding:16px}}
.w-pakiecie-marka{margin:20px 0 0;font-size:16px;color:var(--tekst)}
.dociekliwi{margin-top:16px}
.dociekliwi p{font-size:15px;color:var(--tekst-2);max-width:80ch}
.kalk-poziom{color:var(--tekst-2);white-space:nowrap}
/* „To samo w każdym pakiecie”: liczba, co to jest, gdzie więcej. */
.w-pakiecie{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;
  border-top:1px solid var(--linia)}
.w-pakiecie li{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;
  gap:4px 16px;align-items:baseline;padding:18px 0;
  border-bottom:1px solid var(--linia-slaba)}
.w-pakiecie li>b.liczba{font:600 30px/1 var(--wysw);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums}
.w-pakiecie span{font-size:15px;line-height:1.5;color:var(--tekst-2)}
.w-pakiecie span b{display:block;font-weight:600;color:var(--tekst);
  font-size:16px}
.w-pakiecie a{font:500 12.5px/1.4 var(--tresc);color:var(--tekst-3);
  min-height:24px;display:inline-flex;align-items:center}
@media (max-width:900px){.w-pakiecie{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.w-pakiecie li{grid-template-columns:3.2rem minmax(0,1fr)}
  .w-pakiecie li>b.liczba{font-size:24px}
  .w-pakiecie a{grid-column:2}}
.paragon.pelna{margin-left:0}
.sekcja .fakty.w-kolumnie{margin-top:0}
.faq{border-top:1px solid var(--linia)}
.faq details{border-bottom:1px solid var(--linia-slaba);padding:6px 0}
.faq details p{margin:4px 0 16px 24px;color:var(--tekst-2);max-width:70ch}
.warunki th[scope=row]{font:600 16px/1.45 var(--tresc);color:var(--tekst);
  text-transform:none;letter-spacing:0;white-space:normal;width:34%}
.warunki td{color:var(--tekst-2);font-size:16px}
.warunki td.kod{font-size:12.5px;color:var(--tekst-3);width:26%}

/* ---------------------------------------------------------- CTA, stopka */
.cta{background:var(--karta);border-top:1px solid var(--linia);
  padding:calc(var(--o-sekcja) * 1.2) 0}
.cta-w{display:flex;justify-content:space-between;align-items:center;
  gap:32px 48px;flex-wrap:wrap}
.cta h2{font-size:clamp(34px,4.2vw,56px)}
.cta p{margin:12px 0 0;color:var(--tekst-2);font-size:18px}
.stopka{border-top:1px solid var(--linia);padding:var(--o-sekcja) 0 40px;font-size:15px;
  color:var(--tekst-3);background:var(--tlo);position:relative;z-index:1}
.stopka-kolumny{display:grid;gap:32px;
  grid-template-columns:repeat(12,minmax(0,1fr))}
.stopka-kolumny>.stopka-marka{grid-column:1/4}
.stopka-kolumny>:nth-child(2){grid-column:4/7}
.stopka-kolumny>:nth-child(3){grid-column:7/10}
.stopka-kolumny>:nth-child(4){grid-column:10/-1}
.stopka-kolumny h4{font:600 13px/1.4 var(--tresc);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tekst-3);margin:0 0 12px}
.stopka-kolumny ul{list-style:none;margin:0;padding:0}
.stopka-kolumny li a,.prawa a{display:inline-block;padding:5px 0;
  color:var(--tekst-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .stopka-kolumny li a:hover,.prawa a:hover{color:var(--tekst);
    text-decoration:underline}}
.stopka-marka p{margin:14px 0 0;max-width:32ch}
.prawa{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:20px;
  border-top:1px solid var(--linia-slaba);font-size:14px;line-height:24px}
.prawa a{padding:0}

/* ---------------------------------------------------------- podstrony */
.naglowek-strony{padding:clamp(48px,6vw,96px) 0 var(--o-sekcja)}
.naglowek-strony h1{font-size:clamp(min(44px,12.5vw),6.2vw,88px);line-height:.98;
  letter-spacing:-.04em;margin-top:24px;max-width:17ch}
.katalog,.czytanie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:start}
.spis{grid-column:1/4;position:sticky;top:96px}
.katalog-tresc,.czytanie>.tresc-prawna{grid-column:4/-1;min-width:0}
.spis ol{list-style:none;margin:14px 0 0;padding:0;
  border-left:1px solid var(--linia)}
.spis a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  margin-left:-1px;padding:7px 14px;border-left:2px solid transparent;
  color:var(--tekst-2);text-decoration:none;font-size:14.5px;line-height:1.35;
  transition:color var(--ruch-krotki) var(--krzywa),
    border-color var(--ruch-krotki) var(--krzywa)}
.spis a .mono{font-size:12.5px;color:var(--tekst-3)}
.spis a.aktywny{color:var(--tekst);border-left-color:var(--tekst);
  font-weight:600}
.czytanie .spis a{display:grid;grid-template-columns:4.6ch minmax(0,1fr);
  justify-content:start;gap:8px}
/* 03.10: „§ 10” łamał się na dwie linie w wąskiej kolumnie numerów. */
.czytanie .spis a .mono{white-space:nowrap}
@media (hover:hover) and (pointer:fine){.spis a:hover{color:var(--tekst)}}
.kat-sekcja{padding:0 0 40px;margin:0 0 40px;
  border-bottom:1px solid var(--linia-slaba);scroll-margin-top:96px}
.kat-sekcja:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.kat-sekcja h2{font-size:clamp(28px,3vw,40px);display:flex;align-items:center;
  gap:14px;flex-wrap:wrap}
.licznik-kat{font-size:14px;font-weight:500;letter-spacing:0;
  color:var(--tekst-2);background:var(--karta);padding:5px 10px;
  border-radius:var(--r-pastylka);box-shadow:0 0 0 1px var(--linia);
  font-variant-numeric:tabular-nums}
.kat-sekcja>.wstep{margin:12px 0 24px;font-size:17px;max-width:62ch}
.kat-sekcja p{max-width:62ch}
.kat-siatka+.kat-zwin>.kat-siatka{margin-top:12px}
.kat-grupa{font:600 17px/1.4 var(--tresc);margin:36px 0 4px;display:flex;
  gap:10px;align-items:baseline}
.kat-grupa .mono{font-size:13px;color:var(--tekst-3);font-weight:500}
.kat-grupa+.szept{margin:0 0 12px;font-size:14.5px}
.kat-lista{list-style:none;margin:12px 0 0;padding:0;
  border-top:1px solid var(--linia)}
.kat-lista li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:32px;row-gap:2px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid var(--linia-slaba);font-size:15px;line-height:1.5}
/* Dwie równe kolumny na całej stronie: tytuł z identyfikatorem pod nim,
   obok uwaga. Oś drugiej kolumny jest ta sama w każdej liście, a tytuły
   mają pół szerokości (recenzja 5: trzecia kolumna zwężała tytuły do
   sześciu wierszy). */
.kat-lista li>b{grid-column:1;grid-row:1}
.kat-lista li>span:not(.mono){grid-column:2;grid-row:1/span 2}
.kat-lista li>.mono{grid-column:1;grid-row:2;text-align:left}
.kat-lista li>span:empty{display:none}
.kat-lista li>span:only-child{grid-column:1/-1;grid-row:auto}
.kat-lista li>span:only-child{grid-column:1/-1;color:var(--tekst-2)}
.kat-lista b{font-weight:600}
.kat-lista span{color:var(--tekst-2)}
.kat-lista .mono{font-size:12px;color:var(--tekst-3);overflow-wrap:anywhere}
.kat-siatka{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.kat-siatka li{display:flex;flex-direction:column;gap:6px;padding:18px;
  border:1px solid var(--linia);border-radius:12px;background:var(--karta)}
.kat-siatka a{display:flex;align-items:center;gap:10px;color:var(--tekst);
  text-decoration:none;min-height:28px}
.kat-siatka a svg{color:var(--tekst-3)}
.kat-siatka span{font-size:14px;color:var(--tekst-2)}
.kat-siatka .mono{font-size:12.5px;color:var(--tekst-3)}
.katalog .zetony-lista{margin-top:8px}
.kat-zwin>summary{display:inline-flex;align-items:center;gap:10px;
  min-height:44px;margin-top:4px;padding:0 18px 0 14px;list-style:none;
  cursor:pointer;border:1px solid var(--linia);border-radius:var(--r-pastylka);
  background:var(--karta);font-weight:600;font-size:15px;color:var(--tekst);
  transition:border-color var(--ruch-krotki) var(--krzywa)}
.kat-zwin>summary::-webkit-details-marker{display:none}
.kat-zwin>summary::before{content:"+";font:500 18px/1 var(--mono);
  color:var(--tekst-3);width:14px;text-align:center}
.kat-zwin[open]>summary::before{content:"−"}
.kat-zwin[open]>summary{margin-bottom:8px}
@media (hover:hover) and (pointer:fine){
  .kat-zwin>summary:hover{border-color:var(--linia-mocna)}}
.poziomy{list-style:none;margin:0;padding:0}
.poziomy li{display:flex;flex-direction:column;gap:4px;padding:18px 0;
  border-top:1px solid var(--linia-slaba)}
.poziomy li:first-child{border-top:0;padding-top:0}
.poziomy .mono{font-size:12.5px;color:var(--tekst-3)}
.poziomy b{font:600 20px/1.3 var(--wysw)}
.poziomy span:not(.mono){color:var(--tekst-2);font-size:16px}
/* Trzy poziomy modelu obok siebie w kolumnie treści. */
.poziomy.trzy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px}
.poziomy.trzy li,.poziomy.trzy li:first-child{padding:20px 0 0;
  border-top:1px solid var(--linia-mocna)}
/* Dobór dyrektora: pytanie po lewej, przydział w oknie po prawej. Wybór
   radiem, więc działa bez skryptu. */
.dobor-uklad{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:start}
.dobor-lewa{grid-column:1/6;min-width:0}
.dobor-lewa>.wiecej{margin-top:16px}
.dobor-pytania{border:0;margin:0;padding:0;display:flex;
  flex-direction:column;gap:6px;min-width:0}
.dobor-pytania legend{padding:0;margin-bottom:12px}
.dobor-pytanie{position:relative;display:block;padding:12px 16px;
  border:1px solid var(--linia);border-radius:12px;background:var(--karta);
  font-size:15px;line-height:1.45;color:var(--tekst-2);cursor:pointer;
  transition:border-color var(--ruch-krotki) var(--krzywa),
    color var(--ruch-krotki) var(--krzywa)}
.dobor-pytanie input{position:absolute;inset:0;margin:0;opacity:0;
  cursor:pointer}
.dobor-pytanie:has(input:checked){border-color:var(--tekst);
  color:var(--tekst);box-shadow:0 0 0 1px var(--tekst)}
.dobor-pytanie:has(input:focus-visible){outline:2px solid var(--akcent);
  outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .dobor-pytanie:hover{border-color:var(--linia-mocna)}}
.dobor-okno{grid-column:6/-1;min-width:0;position:sticky;top:96px}
.dobor-wynik{display:none;padding:22px}
.dobor-wynik .wiad-ja{max-width:100%;margin-left:auto;width:fit-content}
.dobor-wynik .zespol{margin-top:18px}
.dobor-wynik .szept{margin:16px 0 0;font-size:13.5px}
.dobor-uklad:has(input[value="0"]:checked) [data-dobor="0"],
.dobor-uklad:has(input[value="1"]:checked) [data-dobor="1"],
.dobor-uklad:has(input[value="2"]:checked) [data-dobor="2"],
.dobor-uklad:has(input[value="3"]:checked) [data-dobor="3"],
.dobor-uklad:has(input[value="4"]:checked) [data-dobor="4"],
.dobor-uklad:has(input[value="5"]:checked) [data-dobor="5"],
.dobor-uklad:has(input[value="6"]:checked) [data-dobor="6"],
.dobor-uklad:has(input[value="7"]:checked) [data-dobor="7"]{display:block}
@supports not selector(:has(a)){.dobor-wynik{display:block}}

.tresc-prawna{max-width:68ch}
.tresc-prawna h2{margin:0 0 8px;font-size:clamp(28px,3vw,40px)}
.tresc-prawna h3{font-size:22px;margin:48px 0 12px;scroll-margin-top:96px}
.tresc-prawna h3:first-of-type,.tresc-prawna>h3:first-child{margin-top:4px}
.tresc-prawna h3 .nr{color:var(--tekst-3);font-weight:500;margin-right:12px;
  font-variant-numeric:tabular-nums}
.tresc-prawna p,.tresc-prawna li{color:var(--tekst-2);line-height:1.7}
.tresc-prawna li{margin-bottom:8px}
/* Listy z kreską jak w całym serwisie, bez domyślnych kropek. */
.tresc-prawna ul{list-style:none;padding:0}
.tresc-prawna ul>li{position:relative;padding-left:24px}
.tresc-prawna ul>li::before{content:"";position:absolute;left:2px;top:.8em;
  width:12px;height:var(--kreska);border-radius:4px;
  background:var(--linia-mocna)}
.czytanie-w .tresc-prawna{max-width:640px}
.tresc-prawna h4.podgrupa{font:600 16px/1.4 var(--tresc);margin:28px 0 4px;
  color:var(--tekst)}
.tresc-prawna b{color:var(--tekst)}
.czytanie .tresc-prawna{max-width:none}
.czytanie .tresc-prawna>p,.czytanie .tresc-prawna>ul,
.czytanie .tresc-prawna>h3,.czytanie .wstep-prawny{max-width:640px}
.metryka{color:var(--tekst-3);font-size:15px;margin:20px 0 0}
.robocza{color:var(--tekst-3);font-size:14px;margin:48px 0 0;padding-top:16px;
  border-top:1px solid var(--linia)}
/* Decyzja 2 z 27.10: dane usługodawcy przed potwierdzeniem właściciela.
   Znak stoi nad danymi, widoczny bez przewijania do stopki dokumentu. */
.robocza-znak{margin:0 0 24px;padding:12px 16px;border-radius:12px;
  background:var(--akcent-tlo);color:var(--tekst);font-size:15px;
  line-height:1.5;max-width:640px}
.robocza-znak b{color:var(--akcent-mocny)}

/* zacznij */
.zacznij-uklad{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:start}
.zacznij-uklad>div{grid-column:1/7}
.co-dalej{grid-column:8/-1;margin-top:54px;background:var(--karta);
  border:1px solid var(--linia);border-radius:var(--r-karta);padding:28px;
  box-shadow:var(--cien-karta)}
.zacznij-uklad h1{font-size:clamp(min(44px,12.5vw),5.6vw,80px);line-height:1;margin-top:24px}
.co-dalej h2{font-size:22px;margin:0 0 16px;letter-spacing:-.01em}
.co-dalej ol{margin:0;padding:0;list-style:none;counter-reset:k}
.co-dalej li{counter-increment:k;display:grid;grid-template-columns:32px 1fr;
  padding:12px 0;border-top:1px solid var(--linia-slaba)}
.co-dalej li:first-child{border-top:0}
.co-dalej li::before{content:counter(k) ".";font:500 14px/1.7 var(--tresc);
  color:var(--tekst-3)}
.co-dalej li b{display:block;font-weight:600}
.co-dalej li span{display:block;color:var(--tekst-2);font-size:15px;
  line-height:1.5;margin-top:2px}
.rejestracja{max-width:520px;margin-top:8px}
.rejestracja label{display:block;font-weight:600;font-size:15px;margin:22px 0 6px}
.rejestracja input{width:100%;min-height:52px;padding:12px 14px;font:inherit;
  font-size:17px;border:1px solid var(--linia-mocna);border-radius:12px;
  background:var(--karta);color:var(--tekst)}
.rejestracja input:focus{outline:2px solid var(--akcent);outline-offset:1px;
  border-color:var(--akcent)}
.rejestracja button{margin-top:28px;cursor:pointer}
.rejestracja .zgoda{font-size:14px;color:var(--tekst-3);margin:14px 0 0}
/* Zgody przy rejestracji (2.10): dwa pola, żadne zaznaczone z góry. */
.rejestracja .pole-zgody{display:flex;gap:12px;align-items:flex-start;
  font-weight:400;font-size:15px;line-height:1.5;color:var(--tekst-2);
  margin:18px 0 0;cursor:pointer}
.rejestracja .pole-zgody input{width:20px;height:20px;min-height:0;
  flex:none;margin:2px 0 0;padding:0;accent-color:var(--akcent)}
.rejestracja .pole-zgody a{color:var(--tekst)}
.w-skrocie{border:1px solid var(--linia);border-radius:16px;
  background:var(--karta);padding:16px 20px;margin:0 0 24px}
.w-skrocie p{margin:0 0 8px}
.w-skrocie ul{margin:0}

/* ---------------------------------------------------------- runda 2 */
.menu-zamknij{display:none}
.szuflada-glowa{display:flex;align-items:center;justify-content:space-between;
  min-height:56px;margin-bottom:8px}
.szuflada-glowa .znak{margin:0 12px}
.szuflada-dol{margin-top:auto;display:grid;gap:8px;padding-top:16px}
.szuflada-dol .btn{width:100%}
.js .menu-zamknij{display:grid;place-items:center;width:44px;height:44px;
  border:0;border-radius:var(--r);background:none;color:var(--tekst);
  cursor:pointer}
.licznik-dopisek{color:var(--tekst-3)}
.scena-przebiegi{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pigulka-przebiegu{flex:none;white-space:nowrap}
.plotno-szkielet{position:absolute;left:14px;right:14px;top:46px;display:grid;
  gap:10px;padding:16px;border:1px solid var(--linia-slaba);border-radius:12px;
  background:var(--karta);opacity:0;pointer-events:none;
  transition:opacity 200ms var(--krzywa)}
.plotno-szkielet span{height:10px;border-radius:4px;background:var(--linia-slaba)}
.plotno-szkielet span:nth-child(1){width:30%}
.plotno-szkielet span:nth-child(2){width:80%;height:14px}
.plotno-szkielet span:nth-child(3){width:65%}
.plotno-szkielet span:nth-child(4){width:90%}
.przebieg.gra .plotno-szkielet{opacity:1}
.przebieg.gra .karta-zgody.jest~.plotno-szkielet{opacity:0}
.bl-lista{list-style:none;margin:16px 0 0;padding:0}
.bl-lista li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:10px 0;border-top:1px solid var(--linia-slaba);
  font-size:15px}
.bl-lista .mono{font-size:12px;color:var(--tekst-3)}
.bl-ok svg{color:var(--zielony)}
.bl-stop svg{color:var(--czerwony)}
.bl-stop span:not(.mono){font-weight:600}
.bl-stop .mono{color:var(--czerwony)}
.bl-pomin{color:var(--tekst-3)}
.bl-komunikat{margin:16px 0 0;padding:12px 14px;border-radius:var(--r);
  background:var(--tlo);box-shadow:0 0 0 1px var(--linia);font:13.5px/1.55
  var(--tresc);color:var(--tekst)}
.bl-komunikat .etykieta{margin-bottom:6px}
.lista-kreska{list-style:none;padding:0;margin-top:0;margin-bottom:0;
  margin-right:0}
.lista-kreska li{position:relative;padding:8px 0 8px 24px;font-size:17px;
  color:var(--tekst-2)}
.lista-kreska li::before{content:"";position:absolute;left:2px;top:22px;
  width:12px;height:var(--kreska);border-radius:4px;background:var(--linia-mocna)}
/* Nagłówek podstrony zaczyna się na tej samej wysokości z oknem obok
   i bez niego (recenzja 4: okno wyższe od tekstu spychało H1 w dół). */
.ns-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;
  align-items:start}
.ns-obok{margin-top:clamp(0px,3vw,40px)}
.ns-tekst{grid-column:1/8}
.ns-obok{grid-column:8/-1;min-width:0}
.ns-obok .okno{margin-top:0}
.wy-lista{list-style:none;margin:0;padding:6px 18px 12px}
.wy-lista li{display:grid;grid-template-columns:minmax(0,1fr) max-content;
  gap:2px 12px;padding:10px 0;border-top:1px solid var(--linia-slaba)}
.wy-lista li:first-child{border-top:0}
.wy-lista b{font-size:14.5px;font-weight:600}
.wy-lista span:not(.mono){grid-column:1;font-size:13px;color:var(--tekst-3)}
.wy-lista .mono{grid-column:2;grid-row:1;font-size:12px;color:var(--tekst-3)}
.be-marka{margin:0;font:700 15px/1 var(--wysw);letter-spacing:-.01em;
  color:var(--tekst-2)}
.be-przelacznik{display:flex;align-items:center;gap:12px;margin:16px 0 0;
  font-size:14.5px}
.be-suwak{position:relative;width:38px;height:22px;border-radius:999px;
  background:var(--linia-mocna);flex:none}
.be-suwak::after{content:"";position:absolute;left:3px;top:3px;width:16px;
  height:16px;border-radius:50%;background:var(--karta);box-shadow:var(--cien)}
.macierz td.mono{font-size:13px;color:var(--tekst-2)}
.macierz tbody th,.dobor td,.role tbody th{font:600 15.5px/1.45 var(--tresc);
  text-transform:none;letter-spacing:0;color:var(--tekst);white-space:normal}
.macierz tbody th a{color:var(--tekst);text-decoration:none}
.dobor td{font-weight:400;color:var(--tekst-2)}
.dobor td:first-child{color:var(--tekst)}
/* Wykres z jednostek: jedna kreska na rzecz (narzędzie, żeton, poziom).
   Bez szerokości w stylu wpisanym, więc przechodzi przez politykę stylów. */
.kreski{display:inline-flex;gap:3px;align-items:center;vertical-align:middle}
.kreski i{width:6px;height:14px;border-radius:2px;background:var(--tekst)}
.kreski i.pusta{background:var(--linia-mocna)}
/* Spis narzędzi modelu: wspólne pełne, własne wybranych średnie,
   bez specjalisty jasne; wzór, a nie sama barwa (stan nie tylko kolorem). */
.kreski i.wlasne{background:var(--tekst-2)}
.kreski i.niczyje{background:var(--karta);box-shadow:inset 0 0 0 1.5px var(--tekst-3)}
.przebieg-doboru p.pd-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;
  max-width:none}
.przebieg-doboru .pd-punkty+p{margin-top:14px}
.pd-legenda .klucz{display:inline-flex;align-items:center;gap:8px}
.pd-legenda .klucz i{width:8px;height:14px;border-radius:2px;
  background:var(--tekst)}
.pd-legenda .klucz i.wlasne{background:var(--tekst-2)}
.pd-legenda .klucz i.niczyje{background:var(--karta);
  box-shadow:inset 0 0 0 1.5px var(--tekst-3)}
.pd-legenda .klucz i.pusta{background:var(--linia-mocna)}
.kreski.poziom i{width:12px;height:var(--kreska)}
.kreski.gesto{display:flex;flex-wrap:wrap;gap:3px;margin-top:14px}
.kreski.gesto i{width:8px;height:18px}
.poziom-modelu{display:inline-flex;align-items:center;gap:10px}
.macierz thead th:first-child{width:24%}
.macierz tbody th a{display:inline-flex;align-items:flex-start;gap:10px}
.macierz tbody th svg{color:var(--tekst-3);flex:none;margin-top:4px}
.macierz .m-model .mono{font-size:13px;color:var(--tekst-2);white-space:nowrap}
.macierz .m-narz{white-space:nowrap}
.macierz .m-narz .liczba{display:inline-block;min-width:1.4em;font-weight:600;
  color:var(--tekst)}
.macierz .m-wiedza{color:var(--tekst);font-size:15px;line-height:1.45}
.macierz .m-wiedza .mono{display:block;margin-top:2px;font-size:12.5px;
  color:var(--tekst-3)}
.macierz td{vertical-align:top}
.macierz-legenda{margin:16px 0 0}
.macierz-legenda .klucz{display:inline-flex;align-items:center;gap:8px;
  margin-right:18px;white-space:nowrap}
/* Rachunek doboru w oknie: kto ile punktów, słabsi od progu szarzy. */
.dobor-punkty{list-style:none;margin:16px 0 0;padding:0;
  border-top:1px solid var(--linia-slaba)}
.dobor-punkty li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto;
  gap:4px 12px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--linia-slaba);font-size:14px}
.dobor-punkty b{font-weight:600}
.dobor-punkty .mono{font-size:13px;color:var(--tekst);text-align:right}
.dobor-punkty li.odpada b,.dobor-punkty li.odpada .mono{color:var(--tekst-3);
  font-weight:400}
.slowa{display:flex;flex-wrap:wrap;gap:4px}
.slowo{display:inline-flex;align-items:baseline;gap:4px;padding:1px 7px;
  border:1px solid var(--linia);border-radius:6px;background:var(--karta-2);
  font:500 12.5px/1.5 var(--tresc);color:var(--tekst)}
.slowo i{font-style:normal;color:var(--tekst-3)}
.slowo.z-narzedzia{border-style:dashed;color:var(--tekst-2)}
.odpada .slowo{color:var(--tekst-3)}
.dobor-wynik .dobor-punkty+.szept{margin-top:10px}
/* Przebieg jednego pytania: pięć kroków na osi z numerami. */
.przebieg-doboru .pd-pytanie{margin:0 0 8px;max-width:100%;width:fit-content}
.przebieg-doboru>ol{list-style:none;margin:0;padding:0}
.przebieg-doboru>ol>li{display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:0 16px;padding:28px 0;border-bottom:1px solid var(--linia-slaba)}
.przebieg-doboru>ol>li:last-child{border-bottom:0;padding-bottom:0}
.pd-nr{font-size:13px;color:var(--tekst-3);padding-top:4px}
.przebieg-doboru h3{margin:0 0 10px}
.przebieg-doboru p{margin:0;color:var(--tekst-2);font-size:16.5px;
  line-height:1.6;max-width:64ch}
.przebieg-doboru p.szept{font-size:14px;margin-top:12px;color:var(--tekst-3)}
.pd-punkty{font-size:15px}
.pd-punkty th:first-child{width:28%}
.pd-punkty tbody th{font:600 15px/1.45 var(--tresc);text-transform:none;
  letter-spacing:0;color:var(--tekst)}
.pd-punkty td.num{font:600 15px/1.45 var(--tresc);
  font-variant-numeric:tabular-nums lining-nums}
.pd-punkty tr.odpada th,.pd-punkty tr.odpada td.num{color:var(--tekst-3);
  font-weight:400}
.pd-koszt{list-style:none;margin:0;padding:0}
.pd-koszt li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,10rem) auto auto;justify-content:start;
  gap:6px 16px;align-items:center;padding:8px 0;
  border-bottom:1px solid var(--linia-slaba);font-size:15px}
.pd-koszt .mono{font-size:13px;color:var(--tekst-2)}
.pd-koszt .liczba{font-weight:600;text-align:right}
/* Poziomy modelu: koszt kroku kreskami, cena dostawcy, kto na poziomie. */
.poziomy .pm-krok{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:10px;color:var(--tekst-2);font-size:15px}
.poziomy .pm-krok b.liczba{font:600 15px/1.4 var(--tresc);color:var(--tekst);
  font-variant-numeric:tabular-nums lining-nums}
.poziomy span.pm-cena{margin-top:10px;font-size:14px;color:var(--tekst-2)}
.poziomy span.pm-kto{margin-top:6px;font-size:14px;color:var(--tekst-3);
  line-height:1.5}
.role td{text-align:center}
.role thead th:not(:first-child){text-align:center}
.role td.tak svg{color:var(--zielony)}
.kreska-brak{display:inline-block;width:12px;height:2px;border-radius:2px;
  background:var(--linia-mocna);vertical-align:middle}
/* Zapytanie nad odpowiedzią, nie obok: obok siebie mały czarny blok stał
   nad białą pustką (recenzja 3). */
.kod-uklad{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
pre.kod{margin:10px 0 0;padding:18px 20px;border-radius:12px;
  background:var(--atrament);color:var(--na-atramencie);font:13px/1.65
  var(--mono);overflow-x:auto;white-space:pre;border:1px solid var(--linia)}
.metoda{display:inline-block;font:600 11.5px/1 var(--mono);padding:4px 8px;
  border:1px solid var(--linia-mocna);border-radius:6px;color:var(--tekst);
  letter-spacing:.04em}
.metoda.post{background:var(--linia);border-color:var(--linia)}
pre.kod>code{display:inline-block;padding-right:20px}
pre.kod code{font-size:inherit}
.uslugodawca{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 24px;margin:0 0 40px;padding:18px 20px;border:1px solid var(--linia);
  border-radius:12px;background:var(--karta)}
.uslugodawca div{padding:8px 0}
.uslugodawca dt{font:500 12px/1.4 var(--tresc);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tekst-3)}
.uslugodawca dd{margin:4px 0 0;font-size:15px;color:var(--tekst)}
.uslugodawca dd.brak{color:var(--tekst-2);font-size:14px}
.uslugodawca .uslugodawca-brak{grid-column:1/-1}
.uslugodawca .uslugodawca-brak dd{font-size:15px;line-height:1.5}
.wstep-prawny{margin-bottom:48px}
table.cennik tr.wyrozniony td{background:var(--karta-2)}
table.cennik tr.wyrozniony td:first-child{box-shadow:inset 3px 0 0 var(--tekst);
  padding-left:14px}
table.cennik td:first-child .plakietka{margin-left:10px;vertical-align:2px}
td.wybor{text-align:right;vertical-align:middle}
td.wybor .btn{min-width:9.5rem}
td.wybor:not(:has(.btn)){vertical-align:top}

/* Kolumna treści 4–12 mocniej niż marginesy własne elementów. */
.sekcja .w-kolumnie,.sekcja pre.kod.w-kolumnie{
  margin-left:calc((100% - 11 * 32px) / 12 * 3 + 3 * 32px)}
.sekcja table.w-kolumnie{width:calc(100% - ((100% - 11 * 32px) / 12 * 3 + 3 * 32px))}

/* Cyfry w równych kolumnach. Osobna reguła po wszystkich, bo skrót `font`
   w regułach wyżej zeruje `font-variant-numeric`. */
.liczba,.fakt dt,.liczby-male dt,.kalk-kwota .liczba,.licznik b,table.cennik td.kwota{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- wejście sekcji */
/* Sekcja wchodzi, kiedy wchodzi w widok: przewijanie steruje ruchem, bez
   skryptu. Zakres kończy się, gdy element w całości wszedł. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sekcja-glowa,.porownanie,.marka,
    .straznik-uklad,.dwie-kolumny{animation:wejdz linear both;
      animation-timeline:view();animation-range:entry 0% entry 90%}}}
@keyframes wejdz{from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}}

/* ---------------------------------------------------------- szerokości */
@media (max-width:1180px){

  .menu a{padding:0 9px}}
@media (max-width:1020px){
  .menu,.naglowek-akcje{display:none}
  .sekcja .w-kolumnie,.sekcja pre.kod.w-kolumnie{margin-left:0}
  .sekcja table.w-kolumnie{width:100%}
  .menu-mobilne{display:block;margin-left:auto}
  .menu-mobilne>summary{list-style:none;cursor:pointer;font-weight:600;
    min-height:44px;display:flex;align-items:center;padding:0 18px;
    border:1px solid var(--linia-mocna);border-radius:var(--r-pastylka);
    font-size:15px;background:var(--karta);color:var(--tekst)}
  .menu-mobilne>summary::-webkit-details-marker{display:none}
  .menu-mobilne[open]>summary::before{content:"";position:fixed;inset:0;
    z-index:39;background:var(--zaslona);cursor:default}
  /* Strona pod otwartą szufladą stoi; bez tego przewijanie palcem po
     zasłonie przesuwało treść pod spodem. */
  html:has(.menu-mobilne[open]){overflow:hidden}
  .menu-mobilne[open]>.szuflada{position:fixed;top:0;right:0;bottom:0;
    width:min(340px,88vw);z-index:40;display:flex;flex-direction:column;
    gap:2px;padding:16px;background:var(--karta);box-shadow:var(--cien-unosi);
    overflow-y:auto;animation:szuflada var(--ruch) var(--krzywa-szuflada)}
  .szuflada .znak{margin:0 12px 16px}
  .szuflada a:not(.znak){display:flex;align-items:center;min-height:48px;
    padding:0 12px;color:var(--tekst);text-decoration:none;border-radius:10px;
    font-size:17px}
  .szuflada a[aria-current=page]{background:var(--tlo);font-weight:600}
  .szuflada a.btn{margin-top:auto;justify-content:center;color:var(--na-barwie);
    background:var(--akcent)}
  .szuflada a.btn.drugi{background:var(--karta);color:var(--tekst);
    border-color:var(--linia-mocna)}
  @keyframes szuflada{from{transform:translateX(100%)}to{transform:none}}
  .sekcja-glowa>.etykieta,.sekcja-tytul{grid-column:1/-1}
  .sekcja-glowa{gap:18px}
  .sekcja-glowa>.etykieta{padding-top:0}
  .w-kolumnie,.paragon,.faq,.czytanie-w,.wzor,
  .punkty.trzy,.punkty.dwa,.lista-prosta,.spec-kontrola.duza{margin-left:0}
  .specjalisci{gap:20px}
  .spec-lista,.spec-karty{grid-column:1/-1}
  .spec-lista{flex-direction:row;gap:8px;overflow-x:auto;border-top:0;
    padding:2px 2px 10px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch}
  .spec-lista a{flex:none;min-height:44px;border:1px solid var(--linia);
    border-radius:var(--r-pastylka);scroll-snap-align:start;background:var(--karta)}
  .spec-poziom{display:none}
  .spec-lista a[aria-selected=true]{border-color:var(--tekst)}
  .spec-lista a[aria-selected=true]::before{display:none}
  .specjalisci:not([data-z-adresu]) .spec-karta{position:static}
  .droga-lepka{display:block}
  .js .droga-lepka{position:static}
  .droga-scena,.js .droga-znaczniki{display:none}
  .js .droga-krok:not(.aktywny){opacity:1}
  .js .droga-krok:not(.aktywny) p{display:block}
  .droga-krok{padding:28px 0}
  .droga-karta-mala{display:block}
  .bariery-uklad>div,.bariery-uklad>.okno,
  .kalk-opcje,.kalk-wyniki,.dwie-kolumny>:first-child,
  .dwie-kolumny>:last-child,.mk-szkic,.mk-po,
  .straznik-uklad>:first-child,.straznik-uklad>:last-child,
  .zacznij-uklad>div,.co-dalej,.spis,.katalog-tresc,
  .czytanie>.tresc-prawna{grid-column:1/-1}
  .mk-po{position:static}
  .co-dalej{margin-top:0}
  .katalog,.czytanie{gap:24px}
  .spis{position:static}
  .spis ol{display:flex;gap:8px;overflow-x:auto;border-left:0;padding-bottom:8px}
  .spis a,.czytanie .spis a{display:flex;margin:0;border:1px solid var(--linia);
    border-radius:var(--r-pastylka);white-space:nowrap;min-height:40px;
    align-items:center;padding:0 14px;background:var(--karta);flex:none}
  .spis a.aktywny{border-color:var(--tekst)}

  .punkty.trzy,.poziomy.trzy{grid-template-columns:minmax(0,1fr)}
  .ns-tekst,.ns-obok{grid-column:1/-1}
  .ns-obok{max-width:560px}
  .dobor-lewa{display:contents}
  .dobor-pytania,.dobor-okno,.dobor-lewa>.wiecej{grid-column:1/-1}
  .dobor-okno{order:1}
  .dobor-lewa>.wiecej{order:2;margin-top:0}
  .dobor-okno{position:static}
  .dobor-pytania{flex-direction:row;overflow-x:auto;padding-bottom:6px;
    scroll-snap-type:x mandatory}
  .dobor-pytanie{flex:none;width:min(300px,78vw);scroll-snap-align:start}
  /* Stopka na tablecie: marka w pełnym wierszu, trzy kolumny odnośników
     pod nią. Dawniej `.stopka-kolumny>div` (0,1,1) przebijało
     `.stopka-marka` (0,1,0), marka zajmowała trzecią część i „Prawne”
     spadały same do drugiego wiersza (zgłoszenie 29.09). */
  .stopka-kolumny{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stopka-kolumny>:nth-child(n){grid-column:auto}
  .stopka-kolumny>.stopka-marka{grid-column:1/-1}}
/* Cennik na tablecie: wiersz jako karta, dwie w rzędzie. Tabela
   potrzebuje ok. 780 px, więc na 701-900 px kolumna przycisków wychodziła
   za kartę, przycięta przez przodka (recenzja 5). */
@media (min-width:701px) and (max-width:900px){
  .tabela-karty{padding:0;background:none;border:0;box-shadow:none}
  table.cennik{display:block}
  table.cennik thead{display:none}
  table.cennik tbody{display:grid;gap:12px;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  table.cennik tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 16px;padding:16px;border:1px solid var(--linia);
    border-radius:14px;background:var(--karta)}
  table.cennik td{display:block;padding:0;border:0;text-align:left;
    white-space:normal}
  table.cennik td:first-child,table.cennik td.wybor{grid-column:1/-1}
  table.cennik td[data-etykieta]::before{content:attr(data-etykieta);
    display:block;font:500 12px/1.4 var(--tresc);text-transform:uppercase;
    letter-spacing:.05em;color:var(--tekst-3);margin-bottom:2px}
  table.cennik td.wybor .btn{width:100%}
  /* Przyciski na jednej wysokości w parze kart, a nieparzysta ostatnia
     karta na całą szerokość (recenzja 6: siódma stała sama). */
  table.cennik tr{grid-template-rows:auto auto 1fr}
  table.cennik td.wybor{align-self:end}
  table.cennik tr:last-child:nth-child(odd){grid-column:1/-1;
    grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
  table.cennik tr:last-child:nth-child(odd) td:first-child{grid-column:1;
    grid-row:1/3}
  table.cennik tr.wyrozniony{box-shadow:0 0 0 2px var(--tekst)}
  table.cennik tr.wyrozniony td,table.cennik tr.wyrozniony td:first-child{
    background:none;box-shadow:none;padding-left:0}}
@media (max-width:900px){
  main::before,main::after{display:none}
  .fakty{grid-template-columns:repeat(2,minmax(0,1fr))}
  .punkty.dwa{grid-template-columns:minmax(0,1fr)}
  .spec-kontrola.duza{grid-template-columns:minmax(0,1fr)}
  .spec-kontrola.duza li:nth-child(2){padding-top:8px}
  .spec-kontrola.duza li:nth-child(2)::before{top:17px}}
@media (max-width:900px){
  .przebieg-cialo{grid-template-columns:minmax(0,1fr);min-height:0}
  .okno-rozmowa{border-right:0;border-bottom:1px solid var(--linia-slaba)}
  .kompozytor{display:none}}
@media (max-width:700px){
  body{font-size:17px}

  .kod-uklad,.uslugodawca{grid-template-columns:minmax(0,1fr)}
  .paragon{display:grid;gap:2px}
  .paragon span:not(:last-of-type)::after{display:none}
  .kalk-opcje{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:6px}
  .kalk-opcja{flex:none;min-height:44px;border-radius:var(--r-pastylka);
    scroll-snap-align:start;white-space:nowrap}
  .rejestracja .btn{width:100%}
  td.wybor{grid-column:1/-1}
  td.wybor .btn{width:100%}
  .role,.macierz{font-size:14px}
  .role thead{display:none}
  .role,.role tbody{display:block}
  .role tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;
    padding:14px 0;border-bottom:1px solid var(--linia-slaba)}
  .role tbody th{grid-column:1/-1;padding:0;border:0}
  .role td{display:flex;align-items:center;gap:8px;padding:0;border:0;
    text-align:left;font-size:13.5px}
  .role td::before{content:attr(data-etykieta);color:var(--tekst-3)}
  .role th,.role td{padding-left:6px;padding-right:6px}
  /* Macierz specjalistów jako lista: nazwa i model po lewej, trzy liczby
     z podpisem po prawej (recenzja 3: model łamał się na trzy wiersze). */
  .macierz thead{display:none}
  .macierz,.macierz tbody{display:block}
  .macierz tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:8px 12px;align-items:center;padding:16px 0;
    border-bottom:1px solid var(--linia-slaba)}
  .macierz th,.macierz td,.macierz tbody th{display:block;padding:0;border:0;
    width:auto}
  .macierz tbody th{grid-column:1/-1}
  /* Model i narzędzia w osobnych wierszach (29.09): obok siebie model
     bez łamania wjeżdżał na liczbę narzędzi („Claude Opus 5.511”). */
  .macierz .m-model{grid-column:1/-1;min-width:0}
  .macierz .m-model .mono{font-size:12.5px}
  .macierz .m-narz{grid-column:1/-1;justify-self:start;display:flex;
    align-items:center;gap:6px}
  .macierz .m-narz .kreski{order:2}
  .macierz .m-narz .kreski i{width:4px;height:12px}
  .macierz .m-narz::after{content:attr(data-etykieta);order:1;
    font:400 12px/1 var(--tresc);color:var(--tekst-3)}
  .macierz .m-wiedza{grid-column:1/-1;font-size:14px}
  .dobor-punkty li{grid-template-columns:minmax(0,1fr) auto}
  .dobor-punkty .slowa{grid-column:1/-1;grid-row:2}
  .przebieg-doboru>ol>li{grid-template-columns:minmax(0,1fr);gap:6px}
  .pd-punkty thead{display:none}
  .pd-punkty,.pd-punkty tbody{display:block}
  .pd-punkty tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:6px 12px;padding:12px 0;border-bottom:1px solid var(--linia-slaba)}
  .pd-punkty th,.pd-punkty td{display:block;padding:0;border:0;width:auto}
  .pd-punkty td:not(.num){grid-column:1/-1;grid-row:2}
  .pd-koszt li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;justify-content:stretch}
  .kreski.gesto{gap:2px}
  .kreski.gesto i{width:3px;height:16px}
  .pd-koszt .mono{grid-column:1;grid-row:2}
  .pd-koszt .kreski{grid-column:2;grid-row:2;justify-self:end}
  .pd-koszt .liczba{grid-column:2;grid-row:1}
  table.cennik tr.wyrozniony{box-shadow:0 0 0 2px var(--tekst)}
  table.cennik tr.wyrozniony td,table.cennik tr.wyrozniony td:first-child{
    background:none;box-shadow:none;padding-left:0}
  .kontener{padding:0 16px}
  .naglowek-w{gap:12px;min-height:58px}

  .scena-pod{flex-direction:column;align-items:flex-start}
  .watki{padding:16px 14px 8px}
  .okno-belka{padding:0 10px 0 14px}
  .belka-prawa .plakietka{display:none}
  .liczby-male{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:16px}
  .fakty dt,.liczby-male dt{font-size:30px}
  .fakty dd,.liczby-male dd{font-size:14px}
  .spec-kolumny{grid-template-columns:minmax(0,1fr)}
  .specjalisci:not([data-z-adresu]) .spec-narz span,
  .specjalisci:not([data-z-adresu]) .spec-rola{display:none}
  .sklad-lista li{flex-direction:column;align-items:flex-start;gap:2px}
  .sklad-lista li>b{white-space:nowrap}
  .sklad-lista .mono{text-align:left}
  .us-akcje{flex-direction:column;align-items:stretch}
  .us-akcje .sc-glowny{justify-content:center}
  .us-akcje .sc-drugi{text-align:center;padding:8px}
  .pm-filtry{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pm-filtry span{flex:none;white-space:nowrap}
  .pm-akcje .pigulka{flex-basis:100%;justify-content:flex-start;
    background:none;padding:0;min-height:0}
  .pm-wpis{grid-template-columns:minmax(0,1fr);gap:8px}
  .pm-akcje{justify-content:flex-start}
  .mk-czesc{grid-template-columns:minmax(0,1fr);gap:2px}
  .kd dl div,.us-dl div{grid-template-columns:minmax(0,1fr);gap:2px}

  .kat-sekcja{padding-bottom:40px;margin-bottom:40px}
  .kat-lista{display:block}
  .kat-lista li{grid-template-columns:minmax(0,1fr);gap:2px}
  .kat-lista li>*{grid-column:auto!important;grid-row:auto!important}
  .kat-lista .mono{text-align:left}
  .kat-siatka{grid-template-columns:minmax(0,1fr)}

  .paragon a{margin-left:0}
  .cta .przyciski{width:100%;flex-direction:column;align-items:stretch}
  .cta{padding:var(--o-sekcja) 0}
  /* Siatki dwunastokolumnowe przechodzą na jedną kolumnę: jedenaście
     odstępów po 32 px to 352 px minimum, więcej niż telefon 360 px
     (recenzja 5: stopka rozpychała każdą stronę do 368 px). */
  .sekcja-glowa,.specjalisci,.bariery-uklad,
  .kalk,.dwie-kolumny,.marka,.straznik-uklad,.katalog,.czytanie,
  .zacznij-uklad,.ns-siatka,.dobor-uklad,.droga-lepka{
    grid-template-columns:minmax(0,1fr)}
  .stopka-kolumny{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .prawa{flex-direction:column;align-items:flex-start}
  .tabela-karty{padding:0;background:none;border:0;box-shadow:none}
  /* Wiersz tabeli jako karta: porównanie, kalkulator, warunki, cennik. */
  .porownanie thead,.kalk-kroki thead,.warunki thead{display:none}
  .porownanie,.porownanie tbody,.porownanie tr,.porownanie th,.porownanie td,
  .porownanie tbody th,.porownanie td.oni,
  .warunki,.warunki tbody,.warunki tr,.warunki th,.warunki td,
  .warunki th[scope=row],.warunki td.kod{display:block;width:auto}
  .porownanie tr,.warunki tr{padding:16px 0;border-bottom:1px solid var(--linia)}
  .porownanie tbody th,.porownanie td,.warunki th,.warunki td{padding:4px 0;
    border:0}
  .porownanie td.my{background:none}
  .porownanie td.oni::before{content:"Typowo: "}
  .kalk-kroki,.kalk-kroki tbody{display:block}
  .kalk-kroki tr{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--linia-slaba)}
  .kalk-kroki td{display:block;padding:0;border:0}
  .kalk-kroki .kalk-kto{font-weight:600}
  .kalk-kroki .kalk-co{grid-column:1/-1;grid-row:2;font-size:13.5px}
  .kalk-kroki .kalk-model{display:none}
  /* 03.10: koszt obok specjalisty, poziom pod opisem kroku. */
  .kalk-kroki td.num{grid-column:2;grid-row:1}
  .kalk-kroki .kalk-poziom{grid-column:1/-1;grid-row:3;font-size:12.5px;
    color:var(--tekst-3)}
  .kalk-kroki.bez-kroku .kalk-poziom{grid-row:2}
  table.cennik,table.lista{display:block}
  table.cennik thead,table.lista thead{display:none}
  table.cennik tbody,table.lista tbody{display:grid;gap:12px}
  table.cennik tr,table.lista tr{display:grid;grid-template-columns:1fr 1fr;
    gap:10px 16px;padding:16px;border:1px solid var(--linia);border-radius:14px;
    background:var(--karta)}
  table.cennik tr{grid-template-columns:1fr 1fr 1fr}
  table.cennik td,table.lista td{display:block;padding:0;border:0;
    text-align:left;white-space:normal}
  table.cennik td:first-child,table.lista td:first-child{grid-column:1/-1}
  table.lista td.szeroka{grid-column:1/-1}
  table.cennik td[data-etykieta]::before,table.lista td[data-etykieta]::before{
    content:attr(data-etykieta);display:block;font:500 12px/1.4 var(--tresc);
    text-transform:uppercase;letter-spacing:.05em;color:var(--tekst-3);
    margin-bottom:2px}
  table.koncowki tbody{gap:8px}
  table.koncowki tr{grid-template-columns:auto minmax(0,1fr);gap:4px 10px;
    padding:12px 14px}
  table.koncowki td:first-child,table.koncowki td:nth-child(2){grid-column:auto}
  table.koncowki td:first-child::before,table.koncowki td:nth-child(2)::before,
  table.koncowki td:nth-child(4)::before{display:none}
  table.koncowki td:nth-child(4){grid-column:1/-1;order:3}
  table.koncowki td:nth-child(3){grid-column:1/-1;order:4;font-size:13px;
    color:var(--tekst-3)}
  table.koncowki td:nth-child(3)::before{display:inline;content:"Zakres klucza: ";
    font-size:13px;text-transform:none;letter-spacing:0}}

/* ==========================================================================
   Strona główna (28.09): pracownik marketingu, nie narzędzie.
   plan/ANALIZA-WYGLAD-SPRZEDAZ-28-09.md, rozdziały 4–6. Ciepły papier,
   sekcje jasne na zmianę z głębokimi (granat z poświatą błękitu i korala),
   kolorowe kafle kanałów, bez pisma maszynowego. Klasy z przedrostkiem
   `g-`, żeby nic nie wyciekło na podstrony.
   ========================================================================== */
.glowna main::before,.glowna main::after{display:none}
/* Szkło nagłówka leży na warstwie pod spodem, nie na samym nagłówku:
   `backdrop-filter` (jak `filter` i `transform`) robi z elementu blok
   zawierający dla potomków z `position: fixed`, więc szuflada menu
   otwierała się w pasku wysokości nagłówka, a zasłona nie przykrywała
   strony (zgłoszenie 29.09, pilnuje przegląd ekranów, reguła „menu”). */
.glowna .naglowek{background:none}
.glowna .naglowek::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;background:var(--szklo);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.glowna .btn,.glowna .naglowek-akcje .btn{border-radius:var(--r-pastylka)}
.glowna .btn.duzy{min-height:54px;padding:0 28px}

/* Tekst w gradiencie: druga linia hasła i druga część tytułów sekcji. */
.g-akcent{background-color:var(--akcent);background-image:var(--gradient-hasla);
  background-size:560% 100%;background-position:0 0;-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.g-akcent.g-koniec{background-color:var(--koral-mocny);background-position:100% 0}
.gleboka .g-akcent{background-color:var(--na-atramencie);
  background-image:var(--gradient-jasny)}

/* Awatar Torina: plik albo krąg w gradiencie marki z literą „T”. */
.awatar-torin{display:inline-grid;place-items:center;flex:none;
  border-radius:50%;object-fit:cover;background-color:var(--atrament);
  background-image:var(--gradient-marki);color:var(--tekst-na-ciemnym);
  font:800 13px/1 var(--wysw);letter-spacing:-.02em}
.awatar-torin.r-24{width:24px;height:24px;font-size:12px}
.awatar-torin.r-36{width:36px;height:36px;font-size:17px}
.awatar-torin.r-40{width:40px;height:40px;font-size:19px}
.awatar-torin.r-64{width:64px;height:64px;font-size:30px}
.awatar-torin.r-96{width:96px;height:96px;font-size:46px}

/* Kafel kanału: zaokrąglony kwadrat w barwie kanału, ikona na białym. */
.g-kafel{display:inline-grid;place-items:center;flex:none;width:56px;
  height:56px;border-radius:16px;color:var(--tekst-na-ciemnym);
  background-color:var(--akcent);box-shadow:var(--cien-karta)}
.g-kafel.maly{width:44px;height:44px;border-radius:13px;box-shadow:var(--cien)}
.k-google .g-kafel,.g-kafel.k-google,.k-google .g-kropka,.k-google .g-marka-ikona{background-color:var(--kanal-reklamy-google)}
.k-meta .g-kafel,.g-kafel.k-meta,.k-meta .g-kropka,.k-meta .g-marka-ikona{background-color:var(--kanal-meta)}
.k-tiktok .g-kafel,.g-kafel.k-tiktok,.k-tiktok .g-kropka,.k-tiktok .g-marka-ikona{background-color:var(--kanal-tiktok)}
.k-mapy .g-kafel,.g-kafel.k-mapy,.k-mapy .g-kropka,.k-mapy .g-marka-ikona{background-color:var(--kanal-mapy)}
.k-seo .g-kafel,.g-kafel.k-seo,.k-seo .g-kropka,.k-seo .g-marka-ikona{background-color:var(--kanal-seo)}
.k-ai .g-kafel,.g-kafel.k-ai,.k-ai .g-kropka,.k-ai .g-marka-ikona{background-color:var(--kanal-ai)}
.k-email .g-kafel,.g-kafel.k-email,.k-email .g-kropka,.k-email .g-marka-ikona{background-color:var(--kanal-email)}
.k-analityka .g-kafel,.g-kafel.k-analityka,.k-analityka .g-kropka,.k-analityka .g-marka-ikona{background-color:var(--kanal-analityka)}
.k-strona .g-kafel,.g-kafel.k-strona,.k-strona .g-kropka,.k-strona .g-marka-ikona{background-color:var(--kanal-strona)}
.k-marka .g-kafel,.g-kafel.k-marka,.k-marka .g-kropka,.k-marka .g-marka-ikona{background-color:var(--akcent-mocny)}
.k-koral .g-kafel,.g-kafel.k-koral,.k-koral .g-kropka,.k-koral .g-marka-ikona{background-color:var(--koral)}
.k-zielony .g-kafel,.g-kafel.k-zielony,.k-zielony .g-kropka,.k-zielony .g-marka-ikona{background-color:var(--zielony)}
.k-tiktok .g-kafel,.g-kafel.k-tiktok{box-shadow:0 0 0 1px var(--linia-mocna)}

/* Znacznik nad tytułem sekcji: pastylka, nie etykieta maszynowa. */
.g-znacznik{display:inline-flex;align-items:center;min-height:30px;margin:0;
  padding:0 14px;border-radius:var(--r-pastylka);background:var(--koral-tlo);
  color:var(--koral-mocny);font:600 14px/1 var(--tresc)}
.gleboka .g-znacznik{background:color-mix(in srgb,var(--koral) 24%,transparent);
  color:var(--tekst-na-ciemnym)}
.g-kto{display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font:600 14px/1.3 var(--tresc);color:var(--tekst-2)}
.g-szept{color:var(--tekst-3);font-size:15px}
.g-pod{margin:18px 0 0;font-size:14px;color:var(--tekst-3)}
.gleboka .g-pod{color:var(--na-atramencie-2)}
.g-dalej{margin:28px 0 0;font-size:16px}
.g-dalej a:not(.btn){font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;min-height:44px}
.g-dalej a:not(.btn)::after{content:"→";transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .g-dalej a:not(.btn):hover::after{transform:translateX(3px)}}

/* ---------------------------------------------------------- sekcje */
.g-sekcja{padding:clamp(64px,7.5vw,112px) 0;position:relative}
.g-glowa{max-width:780px;margin:0 0 clamp(40px,5vw,64px)}
.g-glowa.srodek{margin-left:auto;margin-right:auto;text-align:center}
.g-glowa h2{margin:18px 0 0;font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.g-wstep{margin:20px 0 0;font-size:clamp(18px,1.5vw,20px);line-height:1.55;
  color:var(--tekst-2);max-width:60ch}
.g-glowa.srodek .g-wstep{margin-left:auto;margin-right:auto}
.gleboka{background-color:var(--atrament);background-image:var(--gradient-gleboki);
  color:var(--tekst-na-ciemnym)}
.z-tlem .gleboka{background-image:url(grafika/tlo-gleboki.webp);
  background-size:cover;background-position:center}
.gleboka h2,.gleboka h3{color:var(--tekst-na-ciemnym)}
.gleboka .g-wstep{color:var(--na-atramencie)}
.gleboka a:not(.btn){color:var(--tekst-na-ciemnym);
  text-decoration-color:var(--na-atramencie-3)}
.cieplo{background-color:var(--karta-2);background-image:var(--gradient-cieply)}

/* Przyciski na głębokim tle. */
.btn.jasny-glowny{background:var(--tekst-na-ciemnym);color:var(--atrament)}
.btn.drugi.jasny{background:transparent;color:var(--tekst-na-ciemnym);
  border-color:var(--na-atramencie-3);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .btn.jasny-glowny:hover{background:var(--na-atramencie)}
  .btn.drugi.jasny:hover{background:color-mix(in srgb,var(--tekst-na-ciemnym) 10%,transparent);
    border-color:var(--tekst-na-ciemnym)}}

/* ---------------------------------------------------------- bohater */
.g-bohater{position:relative;padding:clamp(40px,6vw,88px) 0 clamp(40px,5vw,72px);
  isolation:isolate}
.g-bohater::before{content:"";position:absolute;inset:-80px 0 0;z-index:-1;
  pointer-events:none;background-image:
  radial-gradient(38% 46% at 82% 34%,color-mix(in srgb,var(--koral) 20%,transparent),transparent 70%),
  radial-gradient(34% 44% at 62% 70%,color-mix(in srgb,var(--akcent-jasny) 26%,transparent),transparent 72%)}
.g-bohater-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px;align-items:center}
.g-bohater-tekst{grid-column:1/7}
.g-bohater-scena{grid-column:7/-1;position:relative;min-width:0;
  display:grid;justify-items:center;padding:56px 0 24px}
.g-bohater h1{margin:22px 0 0;font-size:clamp(min(40px,11vw),4.6vw,68px);line-height:1;
  letter-spacing:-.045em}
.g-bohater h1 .druga{display:block}
.g-zdanie{margin:26px 0 34px;font-size:clamp(18px,1.45vw,21px);line-height:1.55;
  color:var(--tekst-2);max-width:44ch}
.g-bohater .g-szept{margin:16px 0 0}
/* Z obrazem postaci albo pętlą (30.09, druga wersja): sam obraz w ramie
   z plakietką stanu. Rozmowa przeszła do „Jak to działa”, bo zasłaniała
   pętlę, a na telefonie bohater miał przez nią 1500 px. */
.g-bohater-scena.z-obrazem{display:block;width:100%;padding:0;justify-items:initial}
@media (min-width:1300px){.g-bohater-scena.z-obrazem{margin-right:-64px}}
.g-bohater-obraz{position:relative;margin:0;border-radius:28px;
  overflow:hidden;aspect-ratio:4/3;box-shadow:var(--cien-karta);
  background:var(--karta)}
.g-bohater-obraz img{width:100%;height:100%;object-fit:cover;
  object-position:0 30%;display:block}
.z-obrazem .g-status{position:absolute;top:18px;right:18px;margin:0}
.g-kafle{position:absolute;inset:0;pointer-events:none}
.g-kafle .g-kafel{position:absolute}
@media (prefers-reduced-motion:no-preference){
  .g-kafle .g-kafel{animation:unos 6s ease-in-out infinite alternate}}
.g-kafle .p1{left:0;top:15%;animation-delay:-1s}
.g-kafle .p2{right:0;top:5%;width:60px;height:60px;animation-delay:-3s}
.g-kafle .p3{left:10px;top:50%;width:46px;height:46px;animation-delay:-2s}
.g-kafle .p4{right:6px;top:40%;animation-delay:-4s}
.g-kafle .p5{left:2px;bottom:22%;width:50px;height:50px;animation-delay:-5s}
.g-kafle .p6{right:0;bottom:26%;width:52px;height:52px;animation-delay:-2.5s}
.g-kafle .p7{left:24%;top:0;width:44px;height:44px;animation-delay:-1.5s}
.g-kafle .p8{right:30%;top:4px;width:40px;height:40px;animation-delay:-3.5s}
@keyframes unos{from{transform:translateY(0)}to{transform:translateY(-12px)}}
/* Wąska kolumna sceny (1021–1300 px): kafle wychodzą w margines, żeby nie
   wchodziły na okno rozmowy. */
@media (min-width:1021px) and (max-width:1300px){
  .g-kafle .p1,.g-kafle .p3,.g-kafle .p5{left:-34px}
  .g-kafle .p2,.g-kafle .p4,.g-kafle .p6{right:-34px}}

.g-rozmowa{position:relative;z-index:1;width:min(440px,100%);
  background:var(--karta);border:1px solid var(--linia);border-radius:24px;
  box-shadow:var(--cien-unosi);overflow:hidden}
.g-rozmowa-belka{display:flex;align-items:center;gap:12px;min-height:48px;
  padding:0 18px;border-bottom:1px solid var(--linia-slaba);font-size:14px;
  color:var(--tekst-3);background:var(--karta-2)}
.g-kropki{display:inline-flex;gap:6px}
.g-kropki i{width:10px;height:10px;border-radius:50%;background:var(--linia-mocna)}
.g-kropki i:first-child{background:var(--koral)}
.g-wiad{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;
  padding:18px 20px 0}
.g-wiad:last-child{padding-bottom:20px}
.g-wiad p{margin:0 0 10px;font-size:15.5px;line-height:1.55}
.g-wiad .g-kto{margin-bottom:4px;font-size:13.5px}
.g-wiad-ja>div{background:var(--tlo);border:1px solid var(--linia-slaba);
  border-radius:4px 16px 16px 16px;padding:10px 14px 4px}
.g-osoba{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--koral-tlo);color:var(--koral-mocny);font:700 16px/1 var(--wysw)}
.g-wiad-torin b{color:var(--akcent-mocny);font-weight:700}
.g-zrodlo{display:inline-flex;align-items:flex-start;gap:8px;margin:2px 0 12px;
  padding:7px 12px;border-radius:12px;background:var(--akcent-tlo);
  color:var(--tekst-2);font-size:13.5px;line-height:1.4}
.g-zrodlo svg{color:var(--akcent);flex:none;margin-top:1px}
.g-wiad .g-zrodlo{font-size:13px}
.g-akcje{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.g-zatwierdz,.g-pozniej{display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:0 16px;border-radius:var(--r-pastylka);
  font:600 14px/1 var(--tresc)}
.g-zatwierdz{background:var(--akcent);color:var(--na-barwie);
  box-shadow:var(--cien-przycisk)}
.g-pozniej{color:var(--tekst-2);box-shadow:0 0 0 1px var(--linia-mocna)}
.g-bohater .g-pod{position:relative;z-index:1;text-align:center;font-size:13.5px}
/* Rozmowa wchodzi po kolei: pytanie, odpowiedź, źródło. */
@media (prefers-reduced-motion:no-preference){
  .g-rozmowa .g-wiad-ja{animation:g-wejdz 280ms var(--krzywa) 150ms both}
  .g-rozmowa .g-wiad-torin{animation:g-wejdz 280ms var(--krzywa) 650ms both}
  .g-rozmowa .g-akcje{animation:g-wejdz 280ms var(--krzywa) 1150ms both}}
@keyframes g-wejdz{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------- pas narzędzi */
.g-pas{padding:8px 0 clamp(56px,6vw,88px)}
.g-pas-tytul{margin:0 0 18px;text-align:center;font:600 15px/1.4 var(--tresc);
  color:var(--tekst-2)}
.g-marki{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px 8px;max-width:1200px}
.g-marka{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:0 15px 0 7px;border-radius:var(--r-pastylka);background:var(--karta);
  border:1px solid var(--linia);box-shadow:var(--cien);
  font:600 15px/1.2 var(--tresc);color:var(--tekst)}
/* Oficjalny znak cudzej marki (marka.znaki_obce): pole ochronne co
   najmniej 1/4 szerokości znaku z każdej strony, znak nie mniejszy niż
   16 px, plik bez przebarwiania i efektów. */
.g-marka.z-logotypem{padding-left:12px}
.zetony-lista li.z-logotypem{gap:4px;padding-left:8px}
.zetony-lista .g-marka-znak img{width:20px;height:20px}
.g-marka-ikona{display:grid;place-items:center;width:30px;height:30px;
  border-radius:9px;color:var(--tekst-na-ciemnym)}
.g-marka-znak{display:inline-flex;align-items:center;padding:0 2px}
.g-marka-znak img{display:block;width:24px;height:24px;max-width:none;
  object-fit:contain}
.g-marka.k-google{color:color-mix(in srgb,var(--kanal-reklamy-google) 82%,var(--tekst))}
.g-marka.k-tiktok{color:var(--kanal-tiktok)}
.g-marka.k-mapy{color:color-mix(in srgb,var(--kanal-mapy) 82%,var(--tekst))}
.g-marka.k-seo{color:color-mix(in srgb,var(--kanal-seo) 82%,var(--tekst))}
.g-marka.k-ai{color:color-mix(in srgb,var(--kanal-ai) 82%,var(--tekst))}
.g-marka.k-email{color:color-mix(in srgb,var(--kanal-email) 82%,var(--tekst))}
.g-marka.k-analityka{color:color-mix(in srgb,var(--kanal-analityka) 78%,var(--tekst))}
.g-marka.k-strona{color:var(--kanal-strona)}
.g-marka.k-marka{color:var(--akcent-mocny)}
.g-marka.k-koral{color:var(--koral-mocny)}
.g-marka.k-zielony{color:var(--zielony)}
.g-pas-pod{margin:22px 0 0;text-align:center;font-size:15.5px;color:var(--tekst-3)}
.g-pas-pod a{color:var(--tekst-2);font-weight:600}

/* ---------------------------------------------------------- przy pracy */
.g-zadania{max-width:1120px;margin:0 auto}
.g-zakladki{border:0;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px;min-width:0}
.g-zak{position:relative;display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:var(--r-pastylka);cursor:pointer;
  background:color-mix(in srgb,var(--tekst-na-ciemnym) 7%,transparent);
  box-shadow:0 0 0 1px var(--na-atramencie-3);color:var(--na-atramencie);
  font:600 15.5px/1 var(--tresc);
  transition:background-color var(--ruch-krotki) var(--krzywa),
    color var(--ruch-krotki) var(--krzywa)}
.g-zak input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.g-zak:has(input:checked){background:var(--tekst-na-ciemnym);color:var(--atrament);
  box-shadow:none}
.g-zak:has(input:focus-visible){outline:2px solid var(--akcent-jasny);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .g-zak:hover{background:color-mix(in srgb,var(--tekst-na-ciemnym) 14%,transparent)}
  .g-zak:has(input:checked):hover{background:var(--tekst-na-ciemnym)}}
.g-zad{display:none;grid-template-columns:minmax(0,.85fr) 56px minmax(0,1.15fr);
  align-items:center;gap:0}
.g-zadania:has(input[value=audyt]:checked) [data-zadanie=audyt],
.g-zadania:has(input[value=post]:checked) [data-zadanie=post],
.g-zadania:has(input[value=strona]:checked) [data-zadanie=strona],
.g-zadania:has(input[value=mail]:checked) [data-zadanie=mail]{display:grid}
@supports not selector(:has(a)){.g-zad{display:grid;margin-bottom:24px}}
.g-czat{grid-column:1;border-radius:20px;padding:26px;
  background:color-mix(in srgb,var(--tekst-na-ciemnym) 6%,transparent);
  box-shadow:0 0 0 1px var(--na-atramencie-3)}
.g-czat .g-kto,.g-czat p{color:var(--na-atramencie)}
.g-czat p:last-child{margin:6px 0 0;font-size:17px;line-height:1.55}
.g-zad::after{content:"→";grid-column:2;grid-row:1;justify-self:center;
  font:600 30px/1 var(--wysw);color:var(--koral)}
.g-torin{grid-column:3;border-radius:22px;padding:26px;background:var(--karta);
  color:var(--tekst);border-top:5px solid var(--akcent);box-shadow:var(--cien-unosi)}
.g-torin.k-google{border-top-color:var(--kanal-reklamy-google)}
.g-torin.k-meta{border-top-color:var(--kanal-meta)}
.g-torin.k-mapy{border-top-color:var(--kanal-mapy)}
.g-torin.k-email{border-top-color:var(--kanal-email)}
.g-torin h3,.g-torin .g-kto{color:var(--tekst)}
.g-torin>p{margin:6px 0 18px;font-size:17px;line-height:1.55}
.g-wynik{border-radius:16px;background:var(--karta-2);
  box-shadow:0 0 0 1px var(--linia);padding:16px 18px}
.g-wynik-glowa{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px 12px;margin-bottom:6px;font-size:15px}
.g-pigulka{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;
  border-radius:var(--r-pastylka);background:var(--zolty-tlo);color:var(--zolty);
  font:600 13px/1 var(--tresc);white-space:nowrap}
.g-wynik dl{margin:0}
.g-wynik dl div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;
  padding:9px 0;border-top:1px solid var(--linia-slaba);font-size:14.5px;
  line-height:1.45}
.g-wynik dt{color:var(--tekst-3)}
.g-wynik dd{margin:0;color:var(--tekst)}
#przy-pracy .g-pod{text-align:center}

/* ---------------------------------------------------------- dzień */
.g-dzien-glowa{margin-bottom:clamp(40px,5vw,64px)}
.g-dzien-glowa .g-glowa{margin-bottom:0}
.g-dzien-obraz{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:3/2;
  box-shadow:var(--cien-karta)}
.g-dzien-obraz img{display:block;width:100%;height:100%;object-fit:cover}
.g-dzien-pasmo{height:4px;border-radius:4px;background-color:var(--akcent);
  background-image:var(--gradient-marki);margin:0 0 -26px;position:relative;
  opacity:.8}
.g-os{position:relative;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.g-os li{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.g-os .g-kafel{position:relative;box-shadow:0 0 0 6px var(--karta-2)}
.g-godz{order:2;font:700 24px/1 var(--wysw);letter-spacing:-.02em;color:var(--tekst)}
.g-os li>div{order:3;align-self:stretch;flex:1;padding:16px 16px 18px;
  border-radius:18px;background:var(--karta);box-shadow:var(--cien);
  border:1px solid var(--linia-slaba)}
.g-os h3{margin:0 0 6px;font-size:17px;line-height:1.3}
.g-os p{margin:0;font-size:15px;line-height:1.5;color:var(--tekst-2)}

/* ---------------------------------------------------------- wiedza */
.g-wiedza{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(40px,6vw,88px);align-items:center}
.g-liczby{list-style:none;margin:0;padding:0}
.g-liczby li{display:grid;grid-template-columns:minmax(0,8.2rem) minmax(0,1fr);
  gap:8px 24px;align-items:baseline;padding:18px 0;
  border-top:1px solid var(--na-atramencie-3)}
.g-liczby li:first-child{border-top:0;padding-top:0}
.g-liczby b{font:700 clamp(46px,5.2vw,72px)/1 var(--wysw);letter-spacing:-.045em;
  background-color:var(--na-atramencie);background-image:var(--gradient-jasny);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums lining-nums}
.g-liczby span{font-size:17px;line-height:1.45;color:var(--na-atramencie)}
.g-wiedza-zdanie{margin:24px 0 0;font-size:16px;line-height:1.6;
  color:var(--na-atramencie-2);max-width:56ch}
.g-rekomendacja{margin:0;border-radius:24px;padding:28px;background:var(--karta);
  color:var(--tekst);box-shadow:var(--cien-unosi)}
.g-rekomendacja blockquote{margin:12px 0 18px}
.g-rekomendacja blockquote p{margin:0;font:500 clamp(19px,1.7vw,23px)/1.4 var(--wysw);
  letter-spacing:-.01em;color:var(--tekst)}
.g-rekomendacja .g-zrodlo{margin:0}
.g-chipy{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:10px}
.g-chipy li{display:inline-flex;align-items:center;gap:8px;min-height:38px;
  padding:0 14px;border-radius:var(--r-pastylka);font-size:14.5px;font-weight:600;
  background:color-mix(in srgb,var(--tekst-na-ciemnym) 7%,transparent);
  box-shadow:0 0 0 1px var(--na-atramencie-3);color:var(--tekst-na-ciemnym)}
.g-kropka{width:9px;height:9px;border-radius:50%;background-color:var(--akcent-jasny);
  box-shadow:0 0 0 1.5px var(--na-atramencie-3)}
.g-chip-ile{font-weight:400;color:var(--na-atramencie-2)}
.g-chipy li.g-chip-reszta{background:none;box-shadow:none;font-weight:400;
  color:var(--na-atramencie)}

/* ---------------------------------------------------------- zgoda */
.g-dwie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,96px);align-items:center}
.g-dwie .g-glowa{margin-bottom:32px}
.g-zdania{list-style:none;margin:0;padding:0}
.g-zdania li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  padding:20px 0;border-top:1px solid var(--linia)}
.g-zdania li:first-child{border-top:0;padding-top:0}
.g-zdania h3{margin:2px 0 4px;font-size:19px}
.g-zdania p{margin:0;font-size:16.5px;line-height:1.55;color:var(--tekst-2)}
.gleboka .g-zdania li{border-top-color:var(--na-atramencie-3)}
.gleboka .g-zdania p{color:var(--na-atramencie)}
.ilustracja{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:3/2;
  box-shadow:var(--cien-karta)}
.ilustracja img{display:block;width:100%;height:100%;object-fit:cover}
.ilustracja.zastepstwo{position:relative;display:grid;place-items:center;
  background-color:var(--koral-tlo);background-image:
  radial-gradient(50% 60% at 70% 30%,color-mix(in srgb,var(--koral) 26%,transparent),transparent 70%),
  var(--gradient-cieply)}
.z-kolo{display:grid;place-items:center;width:156px;height:156px;border-radius:50%;
  background:color-mix(in srgb,var(--karta) 45%,transparent);
  box-shadow:0 0 0 12px color-mix(in srgb,var(--karta) 40%,transparent)}
.z-karty{position:absolute;inset:0}
.z-karta{position:absolute;display:flex;flex-direction:column;gap:6px;
  width:120px;padding:12px;border-radius:14px;background:var(--karta);
  box-shadow:var(--cien-karta);color:var(--akcent)}
.z-karta i{display:block;height:6px;border-radius:4px;background:var(--linia)}
.z-karta i:last-child{width:62%}
.z-karta-1{left:9%;top:14%;transform:rotate(-5deg)}
.z-karta-2{right:9%;top:22%;transform:rotate(4deg);color:var(--koral)}
.z-karta-3{right:22%;bottom:12%;transform:rotate(-3deg);color:var(--zielony)}

/* ---------------------------------------------------------- ludzie */
.g-ludzie{list-style:none;margin:0;padding:0;display:grid;gap:28px 24px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.ludzie-foto{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:3/2}
.ludzie-foto img{display:block;width:100%;height:100%;object-fit:cover}
.ludzie-foto.zastepstwo{display:grid;place-items:center;align-content:center;
  gap:12px;background-color:var(--akcent-tlo);background-image:var(--gradient-cieply)}
.g-ludzie li:nth-child(3n+2) .zastepstwo{background-color:var(--koral-tlo);
  background-image:radial-gradient(70% 80% at 30% 20%,var(--karta),transparent 70%)}
.g-ludzie li:nth-child(3n) .zastepstwo{background-color:var(--zielony-tlo);
  background-image:radial-gradient(70% 80% at 70% 20%,var(--karta),transparent 70%)}
.lf-ikona{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;
  background:var(--karta);color:var(--akcent);box-shadow:var(--cien-karta)}
.g-ludzie li:nth-child(3n+2) .lf-ikona{color:var(--koral-mocny)}
.g-ludzie li:nth-child(3n) .lf-ikona{color:var(--zielony)}
.ludzie-foto{position:relative}
.lf-dymek{position:absolute;left:14px;bottom:14px;display:flex;
  align-items:center;gap:10px;max-width:calc(100% - 28px);margin:0;
  padding:8px 14px 8px 8px;border-radius:var(--r-pastylka);
  background:var(--karta);box-shadow:var(--cien-karta);
  font:600 13.5px/1.3 var(--tresc);color:var(--tekst)}
.g-ludzie h3{margin:16px 0 4px;font-size:19px}
.g-ludzie p{margin:0;font-size:15.5px;line-height:1.5;color:var(--tekst-2)}

/* ---------------------------------------------------------- koszt */
.g-koszt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;
  align-items:stretch}
.g-koszt-karta{border-radius:26px;padding:clamp(24px,3vw,40px);background:var(--karta);
  box-shadow:var(--cien-karta);border:1px solid var(--linia)}
.g-kwota{margin:10px 0 14px;font:700 clamp(34px,3.7vw,54px)/1.05 var(--wysw);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums}
.g-koszt-karta>p:last-child{margin:0;font-size:16.5px;line-height:1.55;
  color:var(--tekst-2)}
.g-koszt-fakty{list-style:none;margin:0;padding:clamp(8px,1.5vw,16px) 0 0;
  display:flex;flex-direction:column}
.g-koszt-fakty li{padding:20px 0;border-top:1px solid var(--linia)}
.g-koszt-fakty li:first-child{border-top:0}
.g-koszt-fakty b{display:block;font:650 19px/1.35 var(--wysw);letter-spacing:-.01em}
.g-koszt-fakty span{display:block;margin-top:4px;font-size:16px;color:var(--tekst-2)}

/* ---------------------------------------------------------- agencje */
.g-portal{border-radius:24px;background:var(--karta);color:var(--tekst);
  box-shadow:var(--cien-unosi);overflow:hidden}
.g-portal-belka{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:16px 22px;border-bottom:1px solid var(--linia-slaba);background:var(--karta-2)}
.g-portal-belka b{font:700 16px/1.2 var(--wysw)}
.g-portal-belka span{font-size:14px;color:var(--tekst-3)}
.g-portal-pyt{margin:18px 22px 10px;font:600 16px/1.4 var(--tresc)}
.g-portal-opcje{list-style:none;margin:0 22px;padding:0;display:grid;gap:8px}
.g-portal-opcje li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;
  padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--linia)}
.g-portal-opcje li.wybrana{box-shadow:inset 0 0 0 2px var(--akcent);
  background:var(--akcent-tlo)}
.g-radio{width:18px;height:18px;margin-top:2px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--linia-mocna)}
.wybrana .g-radio{box-shadow:inset 0 0 0 5px var(--akcent)}
.g-portal-opcje b{display:block;font-size:15px}
.g-portal-opcje span span{display:block;margin-top:2px;font-size:14px;
  line-height:1.45;color:var(--tekst-2)}
.g-portal .g-szept{margin:14px 22px 20px;font-size:14px}

/* ---------------------------------------------------------- pytania */
.g-pytania-uklad{align-items:start;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.g-pytania-uklad>div:first-child{position:sticky;top:112px}
.g-faq{border-top:1px solid var(--linia)}
.g-faq details{border-bottom:1px solid var(--linia)}
.g-faq summary{position:relative;display:flex;align-items:center;min-height:64px;
  padding:14px 48px 14px 0;list-style:none;cursor:pointer;
  font:600 18px/1.35 var(--wysw);letter-spacing:-.01em}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"+";position:absolute;right:4px;top:50%;
  width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--linia-mocna);
  font:500 20px/1 var(--tresc);color:var(--tekst-2)}
.g-faq details[open] summary::after{content:"−";background:var(--koral-tlo);
  color:var(--koral-mocny);box-shadow:none}
.g-faq details p{margin:0 0 20px;max-width:62ch;font-size:16.5px;line-height:1.6;
  color:var(--tekst-2)}

/* ---------------------------------------------------------- wezwanie */
.cta.gleboka{border-top:0;padding:clamp(88px,10vw,144px) 0}
.g-wezwanie-w{display:flex;flex-direction:column;align-items:center;gap:22px;
  text-align:center}
.g-wezwanie-w h2{font-size:clamp(40px,5.6vw,80px);line-height:1;color:var(--tekst-na-ciemnym)}
.g-wezwanie-w p{margin:0;max-width:52ch;font-size:19px;color:var(--na-atramencie)}
.g-wezwanie-w .przyciski{justify-content:center;margin-top:8px}
.g-wezwanie-w .awatar-torin{box-shadow:0 0 0 8px color-mix(in srgb,var(--tekst-na-ciemnym) 12%,transparent)}

/* Stopka: nota o cudzych znakach na każdej stronie. */
/* Nota idzie przez całą szerokość siatki stopki, w dwóch łamach od
   tabletu wzwyż: przy 72ch kończyła się w połowie strony i zostawiała
   pustą prawą połowę pod kolumnami odnośników (zgłoszenie 29.09). */
.znaki-nota{margin:40px 0 0;font-size:13.5px;line-height:1.55;
  color:var(--tekst-3);columns:2 34ch;column-gap:48px}
@media (max-width:700px){.znaki-nota{margin-top:32px;font-size:13px}}
.fakty-pod{margin-top:48px}
.odstep-gora{margin-top:48px}
.poziomy-klienta{margin-top:16px}

/* Wejście w widok: przewijanie steruje ruchem, bez skryptu. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .g-glowa,.g-kompetencje>li,.g-os>li,.g-ludzie>li,.g-koszt>*,
    .g-wiedza>*,.g-dwie>*{animation:wejdz linear both;
      animation-timeline:view();animation-range:entry 0% entry 70%}}}

/* W ciemnym motywie barwy kanałów zostają w kaflach, a nazwa idzie
   pismem: ciemne barwy kanałów (TikTok, strona) znikały na ciemnej karcie.
   Na jasnych kaflach (akcent i koral są w ciemnym motywie jasne) ikona
   idzie granatem, bo biała ginęła. */
@media (prefers-color-scheme:dark){
  .g-bohater-obraz img,.ilustracja img,.ludzie-foto img,.g-dzien-obraz img{
    filter:brightness(.86)}
  .g-marki>li.g-marka{color:var(--tekst)}
  .k-marka .g-kafel,.g-kafel.k-marka,.k-koral .g-kafel,.g-kafel.k-koral,
  .k-marka .g-marka-ikona,.k-koral .g-marka-ikona{color:var(--atrament)}}

/* Od 29.09 „Pyta, zanim zmieni” i „Dla kogo” dzieli głęboka sekcja
   Torin Inbox, więc linia między dwiema jasnymi sekcjami zeszła. */

/* Status nad rozmową: Torin jest przy pracy. Kropka pulsuje tylko
   przezroczystością i tylko bez ograniczonego ruchu. */
.g-status{position:relative;z-index:1;display:inline-flex;align-items:center;
  gap:8px;min-height:32px;margin:0 0 14px;padding:0 14px 0 10px;
  border-radius:var(--r-pastylka);background:var(--karta);
  box-shadow:var(--cien-karta);font:600 13.5px/1 var(--tresc);color:var(--tekst-2)}
.g-status i{width:8px;height:8px;border-radius:50%;background:var(--zielony);
  box-shadow:0 0 0 3px var(--zielony-tlo)}
@media (prefers-reduced-motion:no-preference){
  .g-status i{animation:puls 1.6s ease-in-out infinite alternate}}
@keyframes puls{from{opacity:1}to{opacity:.35}}

@media (max-width:1180px){
  .g-os{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .g-dzien-pasmo{display:none}}
@media (max-width:1020px){
  .g-bohater-siatka{grid-template-columns:minmax(0,1fr);gap:0}
  .g-bohater-tekst,.g-bohater-scena{grid-column:1/-1}
  .g-bohater-tekst{max-width:720px}
  .g-bohater-scena{padding-top:40px}
  .g-dwie,.g-wiedza,.g-koszt,.g-pytania-uklad{grid-template-columns:minmax(0,1fr)}
  /* Jedna kolumna: ilustracja nad pytaniami nie może się przyklejać, bo
     przy przewijaniu zasłaniała FAQ na telefonie (recenzja F1-C 15.10). */
  .g-pytania-uklad>div:first-child{position:static}
  .g-zad{grid-template-columns:minmax(0,1fr);gap:0}
  .g-zad::after{grid-column:1;grid-row:2;padding:14px 0;transform:rotate(90deg)}
  .g-czat{grid-column:1;grid-row:1}
  .g-torin{grid-column:1;grid-row:3}
  .g-bohater-obraz{margin-left:0}
  .g-bohater-scena.z-obrazem{max-width:720px;margin:0;padding-top:36px}
  .g-ludzie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  /* Dzień na telefonie: rząd kart przesuwany palcem zamiast sześciu kart
     jedna pod drugą (prawie dwa ekrany przewijania, przegląd 1.10). Kolejna
     karta wystaje zza krawędzi, więc widać, że jest ich więcej. */
  .g-os{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding:6px 2px 14px;scrollbar-width:none}
  .g-os::-webkit-scrollbar{display:none}
  .g-os li{flex:0 0 80%;scroll-snap-align:start}
  .g-godz{font-size:20px}
  .g-liczby li{grid-template-columns:minmax(0,1fr);gap:4px}
  .g-ludzie{grid-template-columns:minmax(0,1fr)}
  .g-wynik dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .g-kafle .p3,.g-kafle .p4,.g-kafle .p5,.g-kafle .p6,.g-kafle .p8{display:none}
  .g-bohater-scena{padding-top:64px}
  .g-kafle .g-kafel{width:44px;height:44px;border-radius:13px}
  .g-kafle .p1{left:0;top:0}
  .g-kafle .p7{left:calc(50% - 22px);top:4px}
  .g-kafle .p2{right:0;top:0}
  .g-bohater .przyciski{flex-direction:column;align-items:stretch}
  .g-bohater-scena.z-obrazem{padding-top:32px}
  .z-obrazem .g-status{top:12px;right:12px;min-height:28px;font-size:12.5px}
  .g-wezwanie-w .przyciski{width:100%;flex-direction:column;align-items:stretch}
  .g-zakladki{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
    margin-left:-16px;margin-right:-16px;padding:4px 16px 8px;scrollbar-width:none}
  .g-zak{flex:none}
  .g-czat,.g-torin{padding:20px}
  .g-marka{min-height:42px;font-size:14px}}
@media (max-width:480px){
  .z-karta{width:92px;padding:10px}
  .z-kolo{width:120px;height:120px}}

/* Telefon, poprawki z 29.09: główna miała na 390 px prawie 20 000 px
   wysokości, z czego szesnaście kart kompetencji i sześć kart „Dla kogo”
   jeden pod drugim to około 4 500 px. Kompetencje idą w dwóch łamach,
   z opisem po rozwinięciu (otwarta karta bierze cały wiersz); rodzaje
   firm przewija się palcem w bok. */
@media (max-width:760px){
  .g-ludzie{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:min(82%,320px);gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 10px;
    scroll-padding:0 16px;scrollbar-width:none}
  .g-ludzie::-webkit-scrollbar{display:none}
  .g-ludzie>li{scroll-snap-align:start}
  .g-ludzie h3{font-size:18px}}
/* Adresy w tekście prawnym (zakresy Google) łamią się w dowolnym miejscu:
   na 320 i 390 px wystawały poza ekran. */
main p code,main li code,main dd code,main p a[href^="https:"],
main li a[href^="https:"]{overflow-wrap:anywhere}

/* ==========================================================================
   Torin Inbox (29.09): makieta skrzynki z czterema krokami. Kroki to radio
   w etykietach (działa bez skryptu, przez :has), panel pokazuje ten jeden
   krok; `strona.js` przełącza je po kolei, gdy sekcja jest w widoku.
   Na głównej sekcja jest głęboka, na /poczta jasna: barwy kroków idą
   z tokenów obu teł.
   ========================================================================== */
.gp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(28px,4vw,64px);align-items:center;max-width:1180px;margin:0 auto}
.gp-kroki{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.gp-krok{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);
  gap:14px;align-items:start;padding:16px 18px;border-radius:18px;cursor:pointer;
  background:var(--karta);box-shadow:0 0 0 1px var(--linia);color:var(--tekst-2);
  transition:background-color var(--ruch-krotki) var(--krzywa),
    box-shadow var(--ruch-krotki) var(--krzywa),color var(--ruch-krotki) var(--krzywa)}
.gp-krok input{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer}
.gp-nr{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  font:700 17px/1 var(--wysw);background:var(--tlo);color:var(--tekst);
  font-variant-numeric:tabular-nums;
  transition:background-color var(--ruch-krotki) var(--krzywa),
    color var(--ruch-krotki) var(--krzywa)}
.gp-krok-tekst b{display:block;font:650 18px/1.3 var(--wysw);letter-spacing:-.01em;
  color:var(--tekst)}
.gp-krok-tekst>span{display:block;margin-top:4px;font-size:15px;line-height:1.5}
.gp-krok:has(input:checked){box-shadow:0 0 0 2px var(--akcent),var(--cien-karta)}
.gp-krok:has(input:checked) .gp-nr{background:var(--akcent);color:var(--na-barwie)}
.gp-krok:has(input:focus-visible){outline:2px solid var(--akcent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .gp-krok:hover{background:var(--karta-2)}}
/* Na głębokim tle (główna) kroki są szkłem, wybrany jest kartą. */
.gleboka .gp-krok{background:color-mix(in srgb,var(--tekst-na-ciemnym) 6%,transparent);
  box-shadow:0 0 0 1px var(--na-atramencie-3);color:var(--na-atramencie)}
.gleboka .gp-krok-tekst b{color:var(--tekst-na-ciemnym)}
.gleboka .gp-nr{background:color-mix(in srgb,var(--tekst-na-ciemnym) 12%,transparent);
  color:var(--tekst-na-ciemnym)}
.gleboka .gp-krok:has(input:checked){background:var(--karta);color:var(--tekst-2);
  outline:2px solid var(--akcent);outline-offset:-2px;
  box-shadow:var(--cien-unosi)}
.gleboka .gp-krok:has(input:checked) b{color:var(--tekst)}
.gleboka .gp-krok:has(input:checked) .gp-nr{background:var(--akcent);color:var(--na-barwie)}
.gleboka .gp-krok:has(input:focus-visible){outline:2px solid var(--akcent-jasny);
  outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .gleboka .gp-krok:hover{background:color-mix(in srgb,var(--tekst-na-ciemnym) 12%,transparent)}
  .gleboka .gp-krok:has(input:checked):hover{background:var(--karta)}}
.gp-opisy{display:none}

/* Okno skrzynki. */
.gp-scena{position:relative;min-width:0}
.gp-okno{position:relative;background:var(--karta);color:var(--tekst);
  border:1px solid var(--linia);border-radius:24px;box-shadow:var(--cien-unosi);
  overflow:hidden}
.gp-belka{display:flex;align-items:center;gap:14px;min-height:46px;padding:0 18px;
  border-bottom:1px solid var(--linia-slaba);background:var(--karta-2)}
.gp-adres{flex:1;max-width:280px;margin:0 auto;padding:5px 14px;
  border-radius:var(--r-pastylka);background:var(--tlo);color:var(--tekst-3);
  font-size:13px;text-align:center;white-space:nowrap}
.gp-cialo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.gp-lista{padding:14px 12px;border-right:1px solid var(--linia-slaba);min-width:0}
.gp-szukaj{display:flex;align-items:center;gap:8px;min-height:38px;margin:0;
  padding:0 12px;border-radius:12px;background:var(--tlo);color:var(--tekst-3);
  font-size:13.5px}
.gp-folder{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  flex-wrap:wrap;margin:16px 8px 8px;font-size:12.5px;color:var(--tekst-3)}
.gp-folder b{font:650 15px/1.2 var(--wysw);color:var(--tekst)}
.gp-lista ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gp-wiersz{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;
  align-items:start;padding:10px;border-radius:14px;
  transition:background-color var(--ruch) var(--krzywa)}
.gp-wiersz.wybrany{background:var(--akcent-tlo)}
.gp-inicjal{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--tlo);color:var(--tekst-2);font:700 12.5px/1 var(--wysw)}
.gp-wiersz.nowy .gp-inicjal{background:var(--koral-tlo);color:var(--koral-mocny)}
.gp-w-tekst{min-width:0}
.gp-w-tekst b{display:block;font-size:14px;line-height:1.3;font-weight:600}
.gp-w-tekst span{display:block;margin-top:2px;font-size:13px;line-height:1.35;
  color:var(--tekst-2)}
.gp-wiersz:not(.nowy) .gp-w-tekst b{font-weight:500}
.gp-czas{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  font-size:12px;line-height:1.2;color:var(--tekst-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.gp-nowa{padding:2px 7px;border-radius:var(--r-pastylka);background:var(--akcent);
  color:var(--na-barwie);font-size:11px;font-weight:600}
.gp-widok{display:flex;flex-direction:column;padding:18px 20px 20px;min-width:0}
.gp-temat{margin:0}
.gp-temat b{display:block;font:650 17px/1.3 var(--wysw);letter-spacing:-.01em}
.gp-temat span{display:block;margin-top:2px;font-size:13px;color:var(--tekst-3)}
.gp-przyciski{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.gp-ai{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;
  border-radius:var(--r-pastylka);box-shadow:0 0 0 1px var(--linia-mocna);
  color:var(--tekst-2);font:600 13px/1 var(--tresc);white-space:nowrap;
  transition:background-color var(--ruch) var(--krzywa),color var(--ruch) var(--krzywa),
    box-shadow var(--ruch) var(--krzywa)}
.gp-stos{display:grid;flex:1}
.gp-panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--ruch) var(--krzywa),transform var(--ruch) var(--krzywa),
    visibility var(--ruch) var(--krzywa)}
.gp:has(input[value="1"]:checked) .gp-p1,
.gp:has(input[value="2"]:checked) .gp-p2,
.gp:has(input[value="3"]:checked) .gp-p3,
.gp:has(input[value="4"]:checked) .gp-p4{opacity:1;visibility:visible;transform:none}
.gp:has(input[value="2"]:checked) .gp-ai-2,
.gp:has(input[value="3"]:checked) .gp-ai-3,
.gp:has(input[value="4"]:checked) .gp-ai-3{background:var(--akcent);color:var(--na-barwie);
  box-shadow:none}
@supports not selector(:has(a)){
  .gp-panel{grid-area:auto;opacity:1;visibility:visible;transform:none}
  .gp-stos{gap:14px}}
.gp-p1 p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.gp-p1 .gp-uwaga{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;
  padding:10px 12px;border-radius:12px;background:var(--tlo);color:var(--tekst-2);
  font-size:13px;line-height:1.45}
.gp-uwaga svg{flex:none;margin-top:1px;color:var(--tekst-3)}
.gp-karta{border-radius:16px;background:var(--karta-2);box-shadow:0 0 0 1px var(--linia);
  padding:14px 16px}
.gp-karta-glowa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px;margin:0 0 8px}
.gp-kto{display:inline-flex;align-items:center;gap:8px;font:650 14.5px/1.3 var(--wysw);
  color:var(--tekst)}
.gp-kto svg{color:var(--akcent)}
.gp-karta dl{margin:0}
.gp-karta dl div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
  gap:10px;padding:8px 0;border-top:1px solid var(--linia-slaba);font-size:13.5px;
  line-height:1.45}
.gp-karta dt{color:var(--tekst-3)}
.gp-karta dd{margin:0}
.gp-szept{margin:10px 2px 0;font-size:13px;line-height:1.45;color:var(--tekst-3)}
.gp-szkic p{margin:0 0 8px;font-size:14.5px;line-height:1.6}
mark.gp-uzup{padding:1px 6px;border-radius:6px;background:var(--zolty-tlo);
  color:var(--zolty);font-weight:600;box-shadow:inset 0 0 0 1px var(--linia-mocna)}
.gp-tag{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;
  border-radius:var(--r-pastylka);background:var(--tlo);color:var(--tekst-2);
  font:600 12px/1 var(--tresc);white-space:nowrap;vertical-align:1px}
.gp-tag-koral{background:var(--koral-tlo);color:var(--koral-mocny)}
.gp-tag-zolty{background:var(--zolty-tlo);color:var(--zolty)}
.gp-wstep-karty{margin:0 0 6px;font-size:13px;line-height:1.45;color:var(--tekst-2)}
.gp-wyslij-wiersz{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin-top:12px}
.gp-wyslij-wiersz .gp-szept{margin:0}
.gp-wyslij{transition:transform var(--ruch-krotki) var(--krzywa)}
.gp-wysylka.klik .gp-wyslij{transform:scale(.97)}
.gp-odlicz{display:none;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:12px 0 0;
  padding:10px 12px;border-radius:12px;background:var(--zielony-tlo);
  color:var(--tekst);font-size:13.5px;line-height:1.4}
.gp-odlicz b{font-variant-numeric:tabular-nums}
.gp-odlicz i{width:8px;height:8px;border-radius:50%;background:var(--zielony)}
.gp-odlicz .g-pozniej{min-height:32px;padding:0 12px;font-size:13px;background:var(--karta)}
.gp-wysylka.wysylana .gp-wyslij-wiersz{display:none}
.gp-wysylka.wysylana .gp-odlicz{display:flex}
@media (prefers-reduced-motion:no-preference){
  .gp-wysylka.wysylana .gp-odlicz{animation:g-wejdz 260ms var(--krzywa) both}
  .gp-odlicz i{animation:puls 1s ease-in-out infinite alternate}}
/* Plakietki przy oknie: to, o co w tym wszystkim chodzi. */
.gp-plakietka{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 15px 0 12px;border-radius:var(--r-pastylka);
  background:var(--karta);color:var(--tekst);box-shadow:var(--cien-unosi);
  font:600 14px/1 var(--tresc);white-space:nowrap}
.gp-plakietka svg{color:var(--zielony)}
.gp-pl1{right:-14px;top:-18px}
.gp-pl2{left:-20px;bottom:28px}
.gp-pl2 svg{color:var(--akcent)}
@media (prefers-reduced-motion:no-preference){
  .gp-plakietka{animation:unos 6s ease-in-out infinite alternate}
  .gp-pl2{animation-delay:-3s}}
.gp-nota{text-align:center;margin-top:28px}
/* Fakty pod makietą (główna). */
.gp-fakty{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gp-fakty li{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;
  background:color-mix(in srgb,var(--tekst-na-ciemnym) 6%,transparent);
  box-shadow:0 0 0 1px var(--na-atramencie-3)}
.gp-fakty h3{margin:0 0 6px;font-size:18px;line-height:1.3}
.gp-fakty p{margin:0;font-size:15px;line-height:1.55;color:var(--na-atramencie)}
.gp-dalej{text-align:center}
/* /poczta: tabela pakietów i pytania karty z numerami. */
.gp-sekcja .gp{margin-left:0}
table.gp-plany th[scope=row]{font:600 15px/1.4 var(--tresc);text-transform:none;
  letter-spacing:0;color:var(--tekst)}
table.gp-plany td.num{font:600 16px/1.3 var(--wysw);font-variant-numeric:tabular-nums}
ol.gp-pytania{counter-reset:pytanie}
ol.gp-pytania li{counter-increment:pytanie;position:relative;padding-left:48px}
ol.gp-pytania li::before{content:counter(pytanie);position:absolute;left:0;top:20px;
  display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--akcent-tlo);color:var(--akcent-mocny);font:700 15px/1 var(--wysw)}
ol.gp-pytania li:first-child::before{top:0}

@media (max-width:1180px){
  .gp-fakty{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1020px){
  .gp{grid-template-columns:minmax(0,1fr)}
  .gp-kroki{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-pl1{right:12px}
  .gp-pl2{left:12px}}
@media (max-width:760px){
  .gp{gap:16px}
  .gp-kroki{gap:8px}
  .gp-krok{grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;
    padding:10px 12px;border-radius:14px}
  .gp-nr{width:30px;height:30px;border-radius:9px;font-size:14px}
  .gp-krok-tekst b{font-size:15px}
  /* Opis kroku zostaje dla czytnika, a oko czyta go pod przyciskami. */
  .gp-krok-tekst>span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .gp-opisy{display:block}
  .gp-opisy p{display:none;margin:0;font-size:15px;line-height:1.5;color:var(--tekst-2)}
  .gleboka .gp-opisy p{color:var(--na-atramencie)}
  .gp:has(input[value="1"]:checked) .gp-opisy [data-opis="1"],
  .gp:has(input[value="2"]:checked) .gp-opisy [data-opis="2"],
  .gp:has(input[value="3"]:checked) .gp-opisy [data-opis="3"],
  .gp:has(input[value="4"]:checked) .gp-opisy [data-opis="4"]{display:block}
  /* Na telefonie lista i list stoją w jednym miejscu: krok 1 to lista,
     reszta to otwarty list z panelem kroku. */
  .gp-cialo{grid-template-columns:minmax(0,1fr)}
  .gp-lista,.gp-widok{grid-area:1/1;
    transition:opacity var(--ruch) var(--krzywa),visibility var(--ruch) var(--krzywa)}
  .gp-lista{border-right:0}
  .gp:has(input[value="1"]:checked) .gp-widok,
  .gp:not(:has(input[value="1"]:checked)) .gp-lista{opacity:0;visibility:hidden}
  .gp-widok{padding:16px}
  .gp-karta{padding:12px 14px}
  .gp-karta dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .gp-wstep-karty{display:none}
  .gp-plakietka{display:none}
  .gp-okno{border-radius:20px}
  .gp-belka{min-height:40px;padding:0 14px}
  .gp-fakty{grid-template-columns:minmax(0,1fr);gap:10px}
  .gp-fakty li{flex-direction:row;align-items:flex-start;padding:18px}
  ol.gp-pytania li{padding-left:44px}}
@supports not selector(:has(a)){
  @media (max-width:760px){.gp-lista,.gp-widok{grid-area:auto}}}

/* ==========================================================================
   Przełącznik języka (30.09): „EN” / „PL” w nagłówku i w szufladzie.
   ========================================================================== */
.jezyk-przelacz{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--r-pastylka);
  color:var(--tekst-2);text-decoration:none;font:600 14px/1 var(--tresc);
  letter-spacing:.04em;transition:color var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){.jezyk-przelacz:hover{color:var(--tekst)}}
.jezyk-szuflada{display:none}
@media (max-width:1020px){
  .szuflada a.jezyk-szuflada{display:flex;margin-top:8px;
    border-top:1px solid var(--linia-slaba);border-radius:0;padding-top:4px;
    font-size:15px;color:var(--tekst-2);letter-spacing:.04em}}

/* ==========================================================================
   „Cały warsztat w jednym pracowniku” (30.09): kafle możliwości na głównej,
   PL i EN (`strona_www/zestaw.py`). Siatka 12 kolumn, ilustracje rysowane
   HTML-em i SVG (bez obrazów), barwa kanału jako lekki odcień pola
   ilustracji. Ruch tylko przy `prefers-reduced-motion: no-preference`.
   ========================================================================== */
.z-sekcja{background-color:var(--tlo)}
.z-kafle{list-style:none;margin:0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(12,minmax(0,1fr))}
.z-kafel{display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--linia);border-radius:24px;background:var(--karta);
  box-shadow:var(--cien);
  transition:transform var(--ruch-krotki) var(--krzywa),
    box-shadow var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .z-kafel:hover{transform:translateY(-3px);box-shadow:var(--cien-karta)}}
.z-w8{grid-column:span 8}.z-w6{grid-column:span 6}
.z-w4{grid-column:span 4}.z-w3{grid-column:span 3}
.z-ilustracja{position:relative;display:grid;align-content:center;gap:12px;
  min-height:188px;padding:22px;border-bottom:1px solid var(--linia-slaba);
  background:var(--akcent-tlo)}
.z-kafel.k-email .z-ilustracja,.z-kafel.k-koral .z-ilustracja{background:var(--koral-tlo)}
.z-kafel.k-mapy .z-ilustracja,.z-kafel.k-zielony .z-ilustracja{background:var(--zielony-tlo)}
.z-kafel.k-ai .z-ilustracja{background:var(--czerwony-tlo)}
.z-kafel.k-strona .z-ilustracja{background:var(--zolty-tlo)}
.z-tekst{padding:22px 24px 26px}
.z-rodzaj{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font:600 14px/1.3 var(--tresc);color:var(--tekst-2)}
.z-rodzaj .g-kafel.maly{width:36px;height:36px;border-radius:11px}
.z-kafel h3{margin:0;font:700 clamp(20px,1.7vw,24px)/1.2 var(--wysw);
  letter-spacing:-.015em;color:var(--tekst)}
.z-tekst>p:not(.z-rodzaj){margin:10px 0 0;font-size:15.5px;line-height:1.55;
  color:var(--tekst-2)}
.z-nota{text-align:center}
.z-dalej{text-align:center}

/* Kafel szeroki: ilustracja obok tekstu. */
@media (min-width:1021px){
  .z-w8{flex-direction:row}
  .z-w8 .z-ilustracja{flex:0 0 46%;border-bottom:0;
    border-right:1px solid var(--linia-slaba)}
  .z-w8 .z-tekst{padding:28px 30px 30px}}

/* Małe elementy wspólne: pigułka, kropka, cofnięcie. */
.z-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;
  border-radius:var(--r-pastylka);background:var(--karta);color:var(--tekst-2);
  box-shadow:0 0 0 1px var(--linia);font:600 12.5px/1 var(--tresc)}
.z-chip-pasmo{background:var(--akcent-tlo);color:var(--akcent-mocny);box-shadow:none}
.z-chip-alarm{background:var(--koral-tlo);color:var(--koral-mocny);box-shadow:none}
.z-etykiety{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.z-cofnij{display:inline-flex;align-items:center;gap:6px;min-height:30px;
  padding:0 12px;border-radius:var(--r-pastylka);background:var(--karta);
  color:var(--tekst);box-shadow:0 0 0 1px var(--linia-mocna);
  font:600 13px/1 var(--tresc)}

/* Linia z pasmem zwykłego zakresu. */
.z-wykres{display:grid;gap:10px}
.z-svg{display:block;width:100%;height:auto;overflow:visible}
.z-pasmo{fill:color-mix(in srgb,var(--akcent) 16%,transparent)}
.z-linia{fill:none;stroke:var(--akcent);stroke-width:2.4;stroke-linejoin:round;
  stroke-linecap:round}
.z-dzis-os{stroke:var(--linia-mocna);stroke-width:1;stroke-dasharray:3 4}
.z-punkt{fill:var(--koral-mocny);stroke:var(--karta);stroke-width:2}
.z-punkt-puls{fill:color-mix(in srgb,var(--koral) 30%,transparent);opacity:.9;
  transform-box:fill-box;transform-origin:center}
.z-sprawy{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.z-sprawy li{display:flex;align-items:center;gap:10px;min-height:34px;
  padding:0 12px;border-radius:12px;background:var(--karta);
  box-shadow:0 0 0 1px var(--linia);font-size:13.5px;color:var(--tekst)}
.z-kropka{flex:none;width:8px;height:8px;border-radius:50%}
.z-k-koral{background:var(--koral)}
.z-k-czerwona{background:var(--czerwony)}
.z-k-zolta{background:var(--zolty)}
.z-fakty{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.z-fakty li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;
  align-items:start}
.z-fakt-ik{display:grid;place-items:center;width:32px;height:32px;
  border-radius:10px;background:var(--akcent-tlo);color:var(--akcent-mocny)}
.z-fakty b{display:block;font-size:15px;color:var(--tekst)}
.z-fakty div span{display:block;margin-top:2px;font-size:14.5px;line-height:1.5;
  color:var(--tekst-2)}

/* Karta wysyłki z pierścieniem okna cofnięcia. */
.z-mail{display:grid;gap:12px;padding:16px;border-radius:18px;
  background:var(--karta);box-shadow:var(--cien-karta)}
.z-mail-glowa{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.z-mail-glowa b{font:700 16px/1.2 var(--wysw);color:var(--tekst)}
.z-mail-glowa span{font-size:13px;color:var(--tekst-3)}
.z-mail-linie{display:grid;gap:7px;margin:0}
.z-mail-linie i{display:block;height:7px;border-radius:4px;background:var(--linia)}
.z-mail-linie i.krotka{width:62%}
.z-mail-dol{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  font-size:13px;color:var(--tekst-2)}
.z-odlicz{position:relative;display:grid;place-items:center;width:40px;height:40px}
.z-odlicz svg{position:absolute;inset:0;width:40px;height:40px;
  transform:rotate(-90deg)}
.z-odlicz b{position:relative;font:700 13px/1 var(--tresc);color:var(--tekst)}
.z-ring-tlo{fill:none;stroke:var(--linia);stroke-width:3}
.z-ring{fill:none;stroke:var(--akcent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:72 100}

/* Mapa cieplna pozycji: 5 × 5, środek to firma. */
.z-mapa{display:grid;gap:10px;justify-items:center}
.z-mapa-glowa{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;
  color:var(--tekst-2)}
.z-siatka-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;
  width:min(100%,290px)}
.z-kom{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;
  font:700 13px/1 var(--tresc);color:var(--tekst)}
.z-kom.p1{background:var(--zielony-tlo);box-shadow:inset 0 0 0 2px var(--zielony)}
.z-kom.p2{background:var(--zolty-tlo);box-shadow:inset 0 0 0 2px var(--zolty)}
.z-kom.p3{background:var(--koral-tlo);box-shadow:inset 0 0 0 2px var(--koral)}
.z-kom.p4{background:var(--czerwony-tlo);box-shadow:inset 0 0 0 2px var(--czerwony)}
.z-kom.p1.z-firma{box-shadow:inset 0 0 0 2px var(--zielony),0 0 0 2px var(--karta),0 0 0 4px var(--akcent)}
.z-legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;
  margin:0;font-size:12.5px;color:var(--tekst-2)}
.z-legenda span{display:inline-flex;align-items:center;gap:6px}
.z-kom-mini{width:10px;height:10px;border-radius:50%}
.z-kom-mini.p1{background:var(--zielony)}
.z-kom-mini.p2{background:var(--zolty)}
.z-kom-mini.p3{background:var(--koral)}
.z-kom-mini.p4{background:var(--czerwony)}
.z-chipy{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px}
.z-chipy li{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;
  border-radius:var(--r-pastylka);background:var(--tlo);color:var(--tekst-2);
  box-shadow:inset 0 0 0 1px var(--linia);font-size:13.5px}

/* Karta zgody z kwotą. */
.z-zgoda{display:grid;gap:6px;width:min(100%,360px);justify-self:center;
  padding:18px;border-radius:18px;background:var(--karta);
  box-shadow:var(--cien-karta)}
.z-zgoda p{margin:0}
.z-zgoda-glowa{display:flex;align-items:center;gap:8px;color:var(--koral-mocny)}
.z-zgoda-glowa b{font:700 16px/1.25 var(--wysw);color:var(--tekst)}
.z-zgoda-ile{font-size:13.5px;color:var(--tekst-3)}
.z-zgoda p.z-zgoda-kwota{margin:4px 0 8px;font:800 30px/1 var(--wysw);
  letter-spacing:-.02em;color:var(--tekst)}

/* Przedziały pomiaru widoczności w AI. */
.z-ai{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.z-ai p{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;
  margin:0 0 6px;font-size:13px;color:var(--tekst-2)}
.z-ai p b{color:var(--tekst);font-size:14px}
.z-ai .z-tor-podpis{display:block;margin:6px 0 0;font-size:12.5px;color:var(--tekst-3)}
.z-tor{display:block;width:100%;height:12px}
.z-tor-tlo{fill:var(--linia)}
.z-tor-przedzial{fill:color-mix(in srgb,var(--kanal-ai) 40%,transparent)}
.z-tor-punkt{fill:var(--tekst)}

/* Oś zmiany: zgoda, zmiana i trzy kontrole. */
.z-os{display:grid;gap:14px;justify-items:start}
.z-os ol{list-style:none;margin:0;padding:0;display:grid;gap:0;width:100%}
.z-os li{position:relative;display:flex;align-items:center;gap:10px;
  min-height:28px;padding-left:2px;font-size:13.5px;color:var(--tekst-2)}
.z-os li i{position:relative;z-index:1;flex:none;width:12px;height:12px;
  border-radius:50%;background:var(--karta);box-shadow:inset 0 0 0 2px var(--linia-mocna)}
.z-os li:not(:last-child)::before{content:"";position:absolute;left:7px;top:18px;
  width:2px;height:20px;background:var(--linia)}
.z-os .z-os-zgoda i{background:var(--akcent);box-shadow:none}
.z-os .z-os-zmiana i{background:var(--kanal-reklamy-google);box-shadow:none}
.z-os .z-os-kontrola i{box-shadow:inset 0 0 0 2px var(--zielony)}
.z-os .z-os-zgoda span,.z-os .z-os-zmiana span{color:var(--tekst);font-weight:600}

/* Portal: trzy poziomy. */
.z-portal p{margin:0 0 10px;font:600 14px/1.4 var(--tresc);color:var(--tekst)}
.z-portal ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.z-portal li{display:flex;align-items:center;gap:10px;min-height:36px;
  padding:0 12px;border-radius:12px;background:var(--karta);
  box-shadow:inset 0 0 0 1px var(--linia);font-size:13.5px;color:var(--tekst)}
.z-portal li .g-radio{margin-top:0;flex:none}
.z-portal li.wybrana{box-shadow:inset 0 0 0 2px var(--akcent);
  background:var(--akcent-tlo)}

/* Mózg firmy: pola z propozycją do potwierdzenia. */
.z-pola{display:grid;gap:6px;margin:0}
.z-pola div{display:grid;gap:2px;padding:8px 12px;border-radius:12px;
  background:var(--karta);box-shadow:inset 0 0 0 1px var(--linia)}
.z-pola dt{font-size:12px;color:var(--tekst-3)}
.z-pola dd{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;
  font-size:13.5px;color:var(--tekst)}
.z-pigulka{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;
  border-radius:var(--r-pastylka);background:var(--zolty-tlo);color:var(--tekst);
  font-size:11.5px;font-weight:600}

/* Ruch: punkt poza pasmem pulsuje, pierścień okna cofnięcia się zamyka. */
@media (prefers-reduced-motion:no-preference){
  .z-punkt-puls{animation:z-puls 1.8s var(--krzywa) infinite}
  .z-ring{transform-box:fill-box;transform-origin:center;
    animation:z-okno 6s linear infinite}
  @keyframes z-puls{0%{transform:scale(.6);opacity:.9}
    70%{transform:scale(1.6);opacity:0}100%{transform:scale(1.6);opacity:0}}
  @keyframes z-okno{to{transform:rotate(360deg)}}}

/* Szerokości: 820 px dwie kolumny, telefon jedna. */
@media (max-width:1020px){
  .z-kafle{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .z-w8,.z-w6{grid-column:1/-1}
  .z-w4,.z-w3{grid-column:span 1}
  .z-w6 .z-ilustracja{min-height:0}}
@media (max-width:640px){
  .z-kafle{grid-template-columns:minmax(0,1fr)}
  .z-w8,.z-w6,.z-w4,.z-w3{grid-column:1/-1}
  .z-ilustracja{min-height:0;padding:18px}
  .z-tekst{padding:18px 18px 22px}
  .z-zgoda-kwota{font-size:26px}}

/* ---------------------------------------------------------- filmy */
/* Film (30.09, karta 2.10): `<video>` z własnych plików, plakat jako
   leniwy `<img>` nad nim, przyciski z HTML, zachowanie w strona.js (blok
   „filmy”). Filmy mają w środku własny telefon, więc karta 9:16 nie stoi
   już w ramie telefonu (rama w ramie, uwaga właściciela z 2.10), tylko
   w zaokrąglonej karcie z cienką linią. Plakat to klatka haka z postacią
   i napisem u góry, więc odtwarzanie jest pigułką w lewym dolnym rogu,
   a nie kołem na środku twarzy. Bez skryptu plakat znika,
   a film ma natywne sterowanie. `width`/`height` trzymają miejsce. */
.film{margin:0;display:grid;gap:18px;align-content:start;min-width:0}
.film-ekran{position:relative;overflow:hidden;isolation:isolate;
  background:var(--atrament)}
.film-9x16 .film-ekran{aspect-ratio:9/16;border-radius:26px;
  box-shadow:0 0 0 1px var(--linia-mocna),var(--cien-wystawa)}
.film-16x9 .film-ekran{aspect-ratio:16/9}
.film-wideo,.film-plakat{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.film-plakat{z-index:1;pointer-events:none;transition:opacity var(--ruch) var(--krzywa)}
.film-ruszyl .film-plakat{opacity:0}
html:not(.js) .film-plakat{display:none}
.film-graj,.film-dzwiek,.film-pauza{position:absolute;z-index:2;border:0;
  cursor:pointer;background:var(--karta);color:var(--tekst);
  box-shadow:var(--cien-wystawa);
  transition:transform var(--ruch-krotki) var(--krzywa)}
.film-graj[hidden],.film-dzwiek[hidden],.film-pauza[hidden]{display:none}
.film-graj{left:14px;right:14px;bottom:14px;width:auto;max-width:max-content;
  min-height:52px;padding:6px 16px 6px 6px;border-radius:var(--r-pastylka);
  display:inline-flex;align-items:center;gap:10px;text-align:left;
  background:var(--karta);
  font:600 15px/1.25 var(--tresc);color:var(--tekst);transform-origin:left center}
/* Film poziomy: hasło haka stoi w lewym dolnym rogu klatki, więc
   przycisk jest kompaktowy (ikona i czas) i stoi w prawym rogu.
   Nazwa filmu zostaje dla czytników w `.sr`. */
.film-16x9 .film-graj{left:auto;right:14px;padding-right:14px;
  transform-origin:right center}
.film-16x9 .film-graj-napis{display:none}
.film-16x9 .film-graj-czas{border-left:0;padding-left:0}
.film-graj-ikona{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;background:var(--akcent);color:var(--na-barwie)}
.film-graj-ikona svg{width:20px;height:20px;margin-left:3px}
.film-graj-napis{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-graj-czas{flex:none;margin-left:2px;padding-left:10px;
  border-left:1px solid var(--linia);color:var(--tekst-2);
  font-weight:500;font-variant-numeric:tabular-nums}
.film-dzwiek{left:0;right:0;bottom:18px;width:max-content;margin:0 auto;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 18px;border-radius:var(--r-pastylka);font:600 15px/1 var(--tresc)}
.film-dzwiek svg{color:var(--akcent)}
.film-pauza{left:14px;top:14px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center}
@media (hover:hover){
  .film-graj:hover,.film-dzwiek:hover,.film-pauza:hover{transform:scale(1.04)}}
.film-graj:active,.film-dzwiek:active,.film-pauza:active{transform:scale(.97)}
.film-graj:focus-visible,.film-dzwiek:focus-visible,.film-pauza:focus-visible{
  outline:3px solid var(--akcent-jasny);outline-offset:3px}
.film-czas{position:absolute;z-index:2;right:14px;top:14px;padding:5px 9px;
  border-radius:var(--r-pastylka);font:600 12.5px/1 var(--tresc);
  font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--atrament) 78%,transparent);
  color:var(--tekst-na-ciemnym)}
.film-ruszyl .film-czas{display:none}
.film figcaption{display:grid;gap:6px}
.film-tytul{margin:0;font:700 20px/1.2 var(--wysw);color:var(--tekst)}
.film-opis{margin:0;color:var(--tekst-2);font-size:15.5px;line-height:1.5}
.film-uwaga{margin:0;color:var(--tekst-2);font-size:14px;line-height:1.5;max-width:60ch}
/* Transkrypcja: cicha linijka pod filmem, rozwijana, nie drugi nagłówek. */
.film-transkrypcja{font-size:14px;line-height:1.55;color:var(--tekst-3)}
.film-transkrypcja summary{display:inline-flex;align-items:center;gap:6px;
  min-height:44px;cursor:pointer;list-style:none;font-weight:500;
  color:var(--tekst-3)}
.film-transkrypcja summary::-webkit-details-marker{display:none}
.film-transkrypcja summary::after{content:"";width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform var(--ruch-krotki) var(--krzywa)}
.film-transkrypcja[open] summary::after{margin-top:3px;transform:rotate(-135deg)}
.film-transkrypcja p{margin:0 0 4px;max-width:60ch}
.gleboka .film-transkrypcja,.gleboka .film-transkrypcja summary,.gleboka .film-uwaga{color:var(--na-atramencie)}
.gleboka .film-tytul{color:var(--tekst-na-ciemnym)}
.gleboka .film-opis{color:var(--na-atramencie)}
.gleboka .film-9x16 .film-ekran{box-shadow:0 0 0 1px var(--na-atramencie-3),var(--cien-wystawa)}
/* Film na górze /poczta i /en/mail: obok nagłówka strony. */
.ns-obok .film{max-width:320px;margin:0 0 0 auto}
@media (max-width:1020px){
  .ns-obok .film{margin:0 auto}}

/* ---------------------------------------------------------- jak to działa */
.g-jak{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,440px);
  gap:clamp(40px,6vw,96px);align-items:center}
.g-jak .g-glowa{margin-bottom:36px}
.g-kroki{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.g-kroki li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;
  align-items:start;padding:20px 22px;border-radius:20px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.g-krok-nr{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--akcent);color:var(--na-barwie);font:700 19px/1 var(--wysw)}
.g-kroki h3{margin:2px 0 4px;font-size:19px}
.g-kroki p{margin:0;font-size:16px;line-height:1.55;color:var(--tekst-2)}
.g-jak-rozmowa{display:grid;justify-items:center;gap:14px}
.g-jak-rozmowa .g-pod{margin:0;text-align:center;font-size:13.5px}
/* Pas narzędzi stoi od 30.09 pod „Jak to działa”, nie pod bohaterem. */
.g-jak-sekcja+.g-pas{padding-top:clamp(40px,5vw,64px)}
/* Gotowe pytania z aplikacji nad przykładową rozmową (jak w pustej rozmowie). */
.g-podpowiedzi{width:min(440px,100%)}
.g-podpowiedzi-tytul{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font:600 14px/1.3 var(--tresc);color:var(--tekst-2)}
.g-podpowiedzi-tytul svg{color:var(--akcent)}
.g-podpowiedzi ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.g-podp{display:inline-flex;align-items:center;min-height:36px;padding:7px 14px;
  border-radius:18px;background:var(--karta);border:1px solid var(--linia);
  box-shadow:var(--cien);font-size:14px;line-height:1.35;color:var(--tekst)}

/* ---------------------------------------------------------- w akcji */
/* Film 1 obok nagłówka i trzech zdań o kontroli. Na telefonie kolejność:
   nagłówek, film, zdania (tekst rozpada się na elementy siatki). */
.g-akcja{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.g-akcja.z-filmem{grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(40px,7vw,112px);align-items:center}
.g-akcja .g-glowa{margin-bottom:32px}
.g-akcja-film .film{max-width:340px}

/* Film obok podpisu (film 2 pod możliwościami). */
.g-film-obok{margin:clamp(56px,6vw,88px) auto 0;max-width:880px;
  padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--linia)}
.g-film-obok .film{grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center}
.g-film-obok .film-tytul{font-size:clamp(24px,2.4vw,32px)}
.g-film-obok .film-opis{font-size:17px}

/* Poczta na głównej: film 3 obok faktów, makieta pod nimi. */
.gp-z-filmem{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(8px,2vw,24px)}
.gp-z-filmem .gp-fakty{margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.gp-makieta-glownej{margin-top:clamp(56px,6vw,88px)}

/* Wezwanie z Torinem i listą zadań obok. */
.g-wezwanie-siatka{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(40px,6vw,88px);align-items:center}
.g-wezwanie-siatka .g-wezwanie-w{align-items:flex-start;text-align:left}
.g-wezwanie-siatka .g-wezwanie-w .przyciski{justify-content:flex-start}
.g-wezwanie-obraz .ilustracja{box-shadow:var(--cien-wystawa)}

@media (max-width:1020px){
  .g-jak{grid-template-columns:minmax(0,1fr)}
  .g-jak-rozmowa{max-width:520px;margin:0 auto;width:100%}
  .gp-z-filmem .gp-fakty{grid-template-columns:minmax(0,1fr)}
  .g-wezwanie-siatka{grid-template-columns:minmax(0,1fr)}
  .g-wezwanie-siatka .g-wezwanie-w{align-items:center;text-align:center}
  .g-wezwanie-siatka .g-wezwanie-w .przyciski{justify-content:center}
  .g-wezwanie-obraz{max-width:520px;width:100%;margin:0 auto}}
@media (max-width:760px){
  .g-jak .g-glowa{margin-bottom:24px}
  .g-kroki{gap:10px}
  .g-kroki li{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:16px}
  .g-krok-nr{width:36px;height:36px;border-radius:11px;font-size:16px}
  .g-kroki h3{font-size:17.5px}
  .g-kroki p{font-size:15.5px}
  .g-jak-rozmowa .g-wiad{padding:14px 16px 0;grid-template-columns:28px minmax(0,1fr);gap:10px}
  .g-jak-rozmowa .g-wiad:last-child{padding-bottom:16px}
  .g-jak-rozmowa .g-wiad p{font-size:15px;margin-bottom:8px}
  .g-jak-rozmowa .g-osoba,.g-jak-rozmowa .awatar-torin.r-36{width:28px;height:28px;font-size:14px}
  .g-jak-rozmowa .g-rozmowa-belka{min-height:40px;font-size:13px}
  .g-akcja.z-filmem{grid-template-columns:minmax(0,1fr);gap:0}
  .g-akcja.z-filmem .g-akcja-tekst{display:contents}
  .g-akcja.z-filmem .g-glowa{order:1;margin-bottom:28px}
  .g-akcja.z-filmem .g-akcja-film{order:2;margin-bottom:36px}
  .g-akcja.z-filmem .g-zdania{order:3}
  .g-akcja.z-filmem .g-dalej{order:4}
  .g-akcja-film .film{max-width:300px;margin:0 auto}
  .g-film-obok .film{grid-template-columns:minmax(0,1fr);gap:18px;
    max-width:300px;margin:0 auto}
  .g-film-obok .film-tytul{font-size:22px}
  .g-film-obok .film-opis{font-size:15.5px}
  .gp-z-filmem{grid-template-columns:minmax(0,1fr);gap:32px}
  .gp-film .film{max-width:300px;margin:0 auto}
  /* Makieta skrzynki pokazuje to samo co film 3; na telefonie zostaje film. */
  .gp-makieta-glownej{display:none}
  .g-wezwanie-obraz{max-width:340px}
  /* Pas narzędzi: jeden rząd przewijany palcem zamiast piętnastu pastylek
     w sześciu rzędach (580 px na 390). */
  .g-pas .g-marki{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:0 -16px;padding:4px 16px 10px;scroll-padding:0 16px;
    scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,var(--atrament) 88%,transparent);
    mask-image:linear-gradient(90deg,var(--atrament) 88%,transparent)}
  .g-pas .g-marki::-webkit-scrollbar{display:none}
  .g-pas .g-marka{flex:none}
  .g-pas-pod{font-size:14.5px}}
/* Bohater na telefonie: hasło, zdanie, przycisk i pętla mieszczą się na
   pierwszym ekranie (390 × 844), żeby film było widać bez przewijania. */
@media (max-width:480px){
  .g-bohater{padding-top:24px}
  .g-bohater h1{margin-top:16px;font-size:min(40px,9.4vw)}
  .g-zdanie{margin:18px 0 22px;font-size:16.5px;line-height:1.5}
  .g-bohater .przyciski{gap:10px}
  .g-bohater .btn.duzy{min-height:52px}
  .g-bohater .g-szept{margin-top:12px;font-size:14px}
  .g-bohater-scena.z-obrazem{padding-top:24px}
  .g-bohater-obraz{border-radius:20px}}
/* Możliwości na telefonie: kafle przewija się w bok, jak rodzaje firm.
   Jeden pod drugim to było prawie 6 000 px na 390. */
@media (max-width:640px){
  .z-kafle{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:min(86%,340px);gap:12px;align-items:start;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;
    scroll-padding:0 16px;scrollbar-width:none}
  .z-kafle::-webkit-scrollbar{display:none}
  .z-kafle>li{scroll-snap-align:start}
  .z-w8,.z-w6,.z-w4,.z-w3{grid-column:auto}}
/* Pętla w bohaterze (przełącznik w strona_www/filmy.py): ta sama rama co
   obraz, tylko 16:9. */
.g-bohater-obraz.g-bohater-petla{aspect-ratio:16/9;display:block;gap:0}
.g-bohater-petla .film-ekran{position:absolute;inset:0;background:var(--karta)}
/* ==========================================================================
   Podstrony (30.09): ten sam język co główna (`strona_www/podstrony.py`).
   Plakietka zamiast numeru i pisma maszynowego, tytuł z gradientem,
   treść na pełną szerokość kontenera zamiast kolumny 4–12, sekcje na
   zmianę jasne i ciepłe, głęboki pas wezwania na końcu.
   ========================================================================== */
main::before,main::after{display:none}
/* Etykiety w scenach i kartach: to samo pismo co treść, bez maszynowego. */
.etykieta{font:600 12px/1.4 var(--tresc);letter-spacing:.07em}
.naglowek-strony{position:relative;isolation:isolate}
.naglowek-strony::before{content:"";position:absolute;inset:-80px 0 0;z-index:-1;
  pointer-events:none;background-image:
  radial-gradient(40% 48% at 84% 30%,color-mix(in srgb,var(--koral) 16%,transparent),transparent 70%),
  radial-gradient(36% 46% at 64% 72%,color-mix(in srgb,var(--akcent-jasny) 22%,transparent),transparent 72%)}
.naglowek-strony h1{margin-top:20px}
.naglowek-strony .ns-tekst>.wstep.duzy{margin-top:22px}
.ns-akcje{margin-top:32px}
.ns-akcje .g-szept{margin:14px 0 0}
.sekcja{border-top:0}
main>section.sekcja:not(.bez-linii):nth-of-type(odd){background-color:var(--karta-2)}
.sekcja-glowa{display:block;max-width:860px;margin-bottom:clamp(36px,4.5vw,64px)}
.sekcja-glowa .sekcja-tytul h2{margin-top:18px}
.sekcja-glowa .wstep{margin-top:18px}
.w-kolumnie,.paragon,.faq,.czytanie-w,.warunki-w,
.sekcja .w-kolumnie,.sekcja pre.kod.w-kolumnie{margin-left:0}
.sekcja table.w-kolumnie{width:100%}
/* Paragon: źródło liczby jako cicha karteczka, nie linia z pisma maszynowego. */
.paragon{margin-top:32px;padding:10px 16px;border:1px solid var(--linia-slaba);
  border-radius:14px;background:var(--karta);font:500 13.5px/1.6 var(--tresc)}
@media (max-width:380px){.naglowek-strony h1{font-size:36px}}
.paragon a{font-weight:600}
/* Pas wezwania: głęboki, jak ostatnia sekcja głównej. */
.cta.gleboka .cta-w h2{color:var(--tekst-na-ciemnym);max-width:22ch}
.cta.gleboka .cta-w p{color:var(--na-atramencie);max-width:52ch}
/* Spis długiej podstrony: pastylki z kotwicami. */
.ns-spis{margin-top:28px}
.ns-spis ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ns-spis a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:var(--r-pastylka);background:var(--karta);border:1px solid var(--linia);
  color:var(--tekst-2);font:600 14.5px/1.2 var(--tresc);text-decoration:none;
  box-shadow:var(--cien)}
@media (hover:hover) and (pointer:fine){
  .ns-spis a:hover{color:var(--tekst);border-color:var(--linia-mocna)}}
@media (max-width:760px){
  .ns-akcje .przyciski{flex-direction:column;align-items:stretch}
  .cta-w .przyciski{width:100%;flex-direction:column;align-items:stretch}
  .ns-spis ul{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 10px;
    scrollbar-width:none}
  .ns-spis ul::-webkit-scrollbar{display:none}
  .ns-spis li{flex:none}}

/* ---------------------------------------------------------- „Robi to, na co nie masz czasu” (główna) */
/* Od 2.10 sekcja pod klienta (`strona_www/segmenty.py`): wybór rodzaju
   firmy jako radio (działa bez skryptu, strzałki z klawiatury), panel
   wybiera `:has`. W panelu po lewej trzy prace: ból słowami klienta, co
   robi Torin, kto z zespołu, co robi klient; po prawej rysunek pod tę
   firmę, gotowe automatyzacje z godzinami i koszt w złotych. */
.ds-wybory{border:0;margin:0 auto;padding:0;min-width:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:10px;max-width:1120px}
.ds-wybor{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 18px 0 6px;border-radius:var(--r-pastylka);cursor:pointer;
  background:var(--karta);border:1px solid var(--linia);box-shadow:var(--cien);
  color:var(--tekst-2);font:600 15.5px/1.25 var(--tresc);
  transition:background-color var(--ruch-krotki) var(--krzywa),color var(--ruch-krotki) var(--krzywa),border-color var(--ruch-krotki) var(--krzywa)}
.ds-wybor input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ds-wybor .ds-wybor-ik{width:38px;height:38px;border-radius:50%;box-shadow:none}
.ds-wybor:has(input:checked){background:var(--atrament);border-color:var(--atrament);
  color:var(--tekst-na-ciemnym);box-shadow:var(--cien-wystawa)}
.ds-wybor:has(input:focus-visible){outline:2px solid var(--akcent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .ds-wybor:hover{color:var(--tekst);border-color:var(--linia-mocna)}
  .ds-wybor:has(input:checked):hover{color:var(--tekst-na-ciemnym)}}
.ds-panele{max-width:1160px;margin:32px auto 0}
.ds-panel{display:none;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(20px,3vw,40px);align-items:start}
.ds:has(input[value=agencja]:checked) [data-ds=agencja],
.ds:has(input[value=sklep]:checked) [data-ds=sklep],
.ds:has(input[value=lokalna]:checked) [data-ds=lokalna],
.ds:has(input[value=gabinet]:checked) [data-ds=gabinet],
.ds:has(input[value=b2b]:checked) [data-ds=b2b]{display:grid}
@supports not selector(:has(a)){
  .ds-panel{display:grid;margin-bottom:48px}}
.ds-lewa{display:grid;gap:16px;min-width:0}
.ds-kto{margin:0 0 4px;font:600 clamp(19px,1.6vw,22px)/1.4 var(--wysw);
  letter-spacing:-.01em;color:var(--tekst);max-width:46ch}
.ds-prace{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ds-praca{padding:20px 22px 18px;border-radius:22px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.ds-bol{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;
  margin:0 0 14px;font:650 18.5px/1.35 var(--wysw);letter-spacing:-.01em;color:var(--tekst)}
.ds-bol .ds-glos{width:40px;height:40px;border-radius:50%;box-shadow:none}
.ds-kroki{margin:0;display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--linia-slaba)}
.ds-krok{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:baseline}
.ds-krok dt{font:600 13px/1.4 var(--tresc);letter-spacing:.02em;color:var(--tekst-3)}
.ds-krok dd{margin:0;font-size:16px;line-height:1.55;color:var(--tekst-2)}
.ds-krok-ty dd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  color:var(--tekst);font-weight:600}
.ds-cena{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;
  border-radius:var(--r-pastylka);background:var(--zielony-tlo);color:var(--zielony);
  font:600 13.5px/1 var(--tresc);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-zespol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ds-zespol li{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:3px 12px 3px 3px;border-radius:var(--r-pastylka);background:var(--tlo);
  border:1px solid var(--linia-slaba);font:600 14px/1.2 var(--tresc);color:var(--tekst)}
.ds-zespol .g-kafel.maly{width:26px;height:26px;border-radius:50%;box-shadow:none}
.ds-prawa{display:grid;gap:14px;min-width:0;position:sticky;top:96px}
.ds-rysunek{display:grid;gap:12px;padding:22px;border-radius:24px;
  border:1px solid var(--linia-slaba);background:var(--akcent-tlo)}
.ds-rysunek.k-meta{background:color-mix(in srgb,var(--kanal-meta) 11%,var(--karta))}
.ds-rysunek.k-mapy{background:color-mix(in srgb,var(--kanal-mapy) 12%,var(--karta))}
.ds-rysunek.k-koral{background:color-mix(in srgb,var(--koral) 11%,var(--karta))}
.ds-rysunek.k-ai{background:color-mix(in srgb,var(--kanal-ai) 11%,var(--karta))}
.ds-tydzien,.ds-koszt{padding:18px 20px;border-radius:20px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.ds-ramka-tytul{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font:600 14px/1.3 var(--tresc);color:var(--tekst-2)}
.ds-ramka-tytul svg{color:var(--akcent)}
.ds-tydzien ul,.ds-koszt ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ds-tydzien li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;
  font-size:14.5px;line-height:1.45}
.ds-tydzien li b{font-weight:600;color:var(--tekst);font-variant-numeric:tabular-nums}
.ds-tydzien li span{color:var(--tekst-2)}
.ds-koszt li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:14.5px;line-height:1.45;color:var(--tekst-2)}
.ds-koszt li b{flex:none;color:var(--tekst);font-weight:650;font-variant-numeric:tabular-nums}
.ds-pakiet{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--linia-slaba);
  font-size:13.5px;line-height:1.5;color:var(--tekst-3)}
/* Rysunki segmentów: poranny przegląd agencji i opinia ze szkicem. */
.ds-rys-glowa{display:flex;align-items:center;gap:8px;margin:0;
  font:600 13.5px/1.3 var(--tresc);color:var(--tekst)}
.ds-rys-glowa svg{color:var(--akcent)}
.ds-portfel,.ds-opinia{display:grid;gap:12px;padding:16px;border-radius:18px;
  background:var(--karta);box-shadow:var(--cien)}
.ds-portfel ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ds-portfel li{display:grid;grid-template-columns:10px minmax(0,auto) minmax(0,1fr);
  gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--tlo);
  font-size:13.5px;line-height:1.35}
.ds-portfel li b{font-weight:600;color:var(--tekst);white-space:nowrap}
.ds-portfel li span{color:var(--tekst-2);text-align:right}
.ds-kropka{width:10px;height:10px;border-radius:50%;background:var(--zielony)}
.ds-k-zle .ds-kropka{background:var(--czerwony)}
.ds-k-uwaga .ds-kropka{background:var(--zolty)}
.ds-k-zle{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--czerwony) 35%,transparent)}
.ds-k-zle span{color:var(--czerwony)}
.ds-rys-stopka{display:flex;align-items:center;gap:8px;margin:0;font-size:13.5px;
  color:var(--zielony);font-weight:600}
.ds-op-glowa{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--tekst-2)}
.ds-gwiazdki{display:inline-flex;gap:3px}
.ds-gw{width:14px;height:14px;background:var(--linia-mocna);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ds-gw.pelna{background:var(--zolty)}
.ds-op-tresc{margin:0;font-size:15px;line-height:1.5;color:var(--tekst)}
.ds-op-szkic{display:grid;gap:8px;padding:12px 14px;border-radius:14px;
  background:var(--akcent-tlo)}
.ds-op-szkic>p:not(.ds-rys-glowa){margin:0;font-size:14px;line-height:1.5;color:var(--tekst-2)}
.ds-dwie{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ds-dwie .z-zgoda{width:100%}
.zp-nota{margin:18px 0 0;text-align:center;font-size:13.5px}
.zp-dol{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:12px 28px;max-width:1080px;margin:32px auto 0;padding:18px 22px;
  border-radius:22px;background:var(--karta);border:1px solid var(--linia-slaba)}
.zp-obietnice{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 24px;justify-content:center}
.zp-obietnice li{display:inline-flex;align-items:center;gap:10px;font-size:15px;
  font-weight:600;color:var(--tekst)}
.zp-obietnica-ik{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--zielony-tlo);color:var(--zielony)}
.zp-dalej{margin:0}
.zp-dalej a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;
  color:var(--akcent-mocny);text-decoration:none}
.zp-dalej a::after{content:"→";transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){.zp-dalej a:hover::after{transform:translateX(3px)}}
@media (prefers-reduced-motion:no-preference){
  .ds-panel{animation:g-wejdz 260ms var(--krzywa) both}}
@media (max-width:1020px){
  .ds-panel{grid-template-columns:minmax(0,1fr)}
  .ds-prawa{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-rysunek{grid-column:1/-1}}
@media (max-width:760px){
  /* Rodzaje firm w jednym rzędzie przewijanym palcem; panel jedną
     kolumną: kim jesteś, rysunek, prace, automatyzacje, koszt. */
  .ds-wybory{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:0 -16px;padding:4px 16px 10px;scrollbar-width:none;scroll-padding:0 16px}
  .ds-wybory::-webkit-scrollbar{display:none}
  .ds-wybor{flex:none;min-height:48px;font-size:14.5px;padding-right:16px}
  .ds-wybor .ds-wybor-ik{width:34px;height:34px}
  .ds-panele{margin-top:16px}
  .ds-panel{gap:12px}
  .ds-lewa,.ds-prawa{display:contents}
  .ds-kto{order:1;font-size:18px}
  .ds-rysunek{order:2;padding:14px;border-radius:20px}
  /* Trzy prace przewija się w bok (jak kafle możliwości): jedna pod
     drugą to było 1300 px na 390. Automatyzacje z godzinami zostają na
     szerokim ekranie; na telefonie ich treść niesie „Dzień z Torinem”. */
  .ds-prace{order:3;grid-auto-flow:column;grid-auto-columns:min(86%,340px);gap:12px;
    align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -16px;padding:4px 16px 12px;scroll-padding:0 16px;scrollbar-width:none}
  .ds-prace::-webkit-scrollbar{display:none}
  .ds-praca{scroll-snap-align:start}
  .ds-tydzien{display:none}
  .ds-koszt{order:5}
  .ds-praca{padding:16px 16px 14px;border-radius:18px}
  .ds-bol{grid-template-columns:34px minmax(0,1fr);gap:12px;font-size:17px;margin-bottom:12px}
  .ds-bol .ds-glos{width:34px;height:34px}
  .ds-kroki{gap:10px;padding-top:12px}
  .ds-krok{grid-template-columns:minmax(0,1fr);gap:4px}
  .ds-krok dd{font-size:15.5px}
  .ds-portfel li{grid-template-columns:10px minmax(0,1fr);row-gap:2px}
  .ds-portfel li span{grid-column:2;text-align:left}
  .zp-dol{flex-direction:column;align-items:flex-start;padding:16px 18px}
  .zp-obietnice{flex-direction:column;align-items:flex-start;gap:10px}}

/* Kafle na /mozliwosci: zdanie po ludzku, ustawienia jako szczegół. */
.z-tekst>p.z-prosto{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--tekst)}
.z-tekst>p.z-szczegol{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--tekst-3)}

/* Robi / nie robi: dwie kolumny obok nagłówka bezpieczeństwa. */
.rn-karta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  border-radius:24px;background:var(--karta);border:1px solid var(--linia);
  box-shadow:var(--cien-karta);overflow:hidden}
.rn-kol{padding:22px 22px 24px}
.rn-kol+.rn-kol{border-left:1px solid var(--linia-slaba);background:var(--karta-2)}
.rn-tytul{margin:0 0 14px;font:700 17px/1.3 var(--wysw);color:var(--tekst)}
.rn-kol ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rn-kol li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;
  font-size:15px;line-height:1.5;color:var(--tekst-2)}
.rn-ikona{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;
  margin-top:1px}
.rn-tak .rn-ikona{background:var(--zielony-tlo);color:var(--zielony)}
.rn-nie .rn-ikona{background:var(--koral-tlo);color:var(--koral-mocny)}
.ns-obok .rn-karta{grid-template-columns:minmax(0,1fr)}
.ns-obok .rn-kol+.rn-kol{border-left:0;border-top:1px solid var(--linia-slaba)}
.ns-kontakt{margin:18px 0 0;font-size:15px;color:var(--tekst-2)}
/* Start w trzech krokach (cennik): pierwszy krok ma wyglądać na łatwy. */
.start-kroki{margin:26px 0 0;max-width:620px}
.start-tytul{margin:0 0 10px;font:600 15px/1.4 var(--tresc);color:var(--tekst)}
.start-kroki ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.start-kroki li{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border-radius:16px;background:var(--karta);border:1px solid var(--linia-slaba);
  font-size:14.5px;line-height:1.4;color:var(--tekst-2)}
.start-nr{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;
  background:var(--akcent);color:var(--na-barwie);font:700 13px/1 var(--wysw)}
@media (max-width:760px){.start-kroki ol{grid-template-columns:minmax(0,1fr)}}
/* 404: odnośniki jako karty. */
.n404{min-height:60vh}
.n404-lista{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:12px;max-width:960px}
.n404-lista a{display:flex;flex-direction:column;gap:4px;min-height:88px;padding:18px 20px;
  border-radius:18px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien);text-decoration:none;color:var(--tekst)}
.n404-lista b{font:700 17px/1.3 var(--wysw)}
.n404-lista span{font-size:14.5px;color:var(--tekst-2)}
@media (hover:hover) and (pointer:fine){
  .n404-lista a:hover{border-color:var(--linia-mocna);box-shadow:var(--cien-karta)}}
/* Przy formularzu startu: cztery rzeczy, które ktoś chce wiedzieć przed zapisem. */
.zaufanie{list-style:none;margin:28px 0 0;padding:18px 0 0;max-width:520px;
  border-top:1px solid var(--linia-slaba);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.zaufanie li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;
  align-items:start;font-size:14.5px;line-height:1.45;color:var(--tekst-2)}
.zaufanie .rn-ikona{background:var(--zielony-tlo);color:var(--zielony)}
.co-dalej li::before{font-family:var(--wysw);font-weight:700}
@media (max-width:480px){.zaufanie{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .rn-karta{grid-template-columns:minmax(0,1fr)}
  .rn-kol+.rn-kol{border-left:0;border-top:1px solid var(--linia-slaba)}}

/* ---------------------------------------------------------- zespół (/specjalisci) */
.zs-kroki{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:krok}
.zs-kroki li{position:relative;display:flex;flex-direction:column;gap:10px;
  padding:22px 20px 24px;border-radius:22px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.zs-kroki li:not(:last-child)::after{content:"";position:absolute;top:42px;right:-15px;
  width:16px;height:2px;border-radius:2px;background:var(--linia-mocna)}
.zs-krok-ikona{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:var(--akcent-tlo);color:var(--akcent-mocny)}
.zs-kroki li:last-child .zs-krok-ikona{background:var(--akcent);color:var(--na-barwie)}
.zs-krok-nr{position:absolute;top:22px;right:20px;font:700 14px/1 var(--wysw);
  color:var(--tekst-3);font-variant-numeric:tabular-nums}
.zs-kroki h3{margin:4px 0 0;font-size:18px;line-height:1.25}
.zs-kroki p{margin:0;font-size:15px;line-height:1.55;color:var(--tekst-2)}

.zs-siatka{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
.zs-karta{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px;
  border-radius:22px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien);scroll-margin-top:96px;
  transition:box-shadow var(--ruch) var(--krzywa),transform var(--ruch) var(--krzywa)}
.zs-karta:target{box-shadow:0 0 0 2px var(--akcent),var(--cien-karta)}
@media (hover:hover) and (pointer:fine){
  .zs-karta:hover{transform:translateY(-2px);box-shadow:var(--cien-karta)}}
.zs-glowa{display:flex;align-items:center;gap:12px}
.zs-glowa .g-kafel.maly{flex:none;width:44px;height:44px;border-radius:14px}
.zs-glowa h3{margin:0;font-size:19px}
.zs-co{margin:0;font-size:15.5px;line-height:1.55;color:var(--tekst-2)}
.zs-pytanie{margin:0;padding:10px 14px;border-radius:4px 16px 16px 16px;
  background:var(--akcent-tlo);color:var(--tekst);font-size:15px;line-height:1.45}
.zs-pytanie span{display:block;margin-bottom:2px;font-size:12.5px;font-weight:600;
  color:var(--akcent-mocny)}
.zs-sprawdza{margin:0;font-size:14px;line-height:1.5;color:var(--tekst-2)}
.zs-sprawdza b{color:var(--tekst);font-weight:600}
.zs-fakty{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.zs-fakty li{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 10px;
  border-radius:var(--r-pastylka);background:var(--tlo);border:1px solid var(--linia-slaba);
  font-size:13px;color:var(--tekst-2)}
.zs-fakty b{color:var(--tekst)}
.zs-data{margin:-4px 0 0;font-size:13px;color:var(--tekst-3)}
.zs-dalej{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-weight:600;font-size:14.5px;color:var(--akcent-mocny);text-decoration:none}
.zs-dalej::after{content:"→";transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){.zs-dalej:hover::after{transform:translateX(3px)}}

.zs-zasady{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.zs-zasady li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;
  align-items:start;padding:14px 16px;border-radius:16px;background:var(--karta);
  border:1px solid var(--linia-slaba);font-size:16px;line-height:1.5;color:var(--tekst)}
.zs-ptaszek{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:var(--zielony-tlo);color:var(--zielony)}
.zs-pelne{margin-top:20px}
.zs-pelne ol{margin-top:12px}

@media (max-width:1180px){
  .zs-kroki{grid-template-columns:repeat(3,minmax(0,1fr))}
  .zs-kroki li::after{display:none}}
@media (max-width:760px){
  .zs-kroki{grid-template-columns:minmax(0,1fr);gap:10px}
  .zs-kroki li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;
    row-gap:4px;padding:16px}
  .zs-krok-ikona{grid-row:1/3}
  .zs-kroki h3{margin:0;font-size:17px;padding-right:24px}
  .zs-kroki p{grid-column:2;font-size:15px}
  .zs-krok-nr{top:18px;right:16px}
  .zs-zasady{grid-template-columns:minmax(0,1fr)}}
/* Zespół na telefonie: karty przewija się w bok (16 kart jedna pod drugą to
   ponad 5 000 px). */
@media (max-width:640px){
  .zs-siatka{grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:min(86%,330px);gap:12px;align-items:stretch;overflow-x:auto;
    scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 14px;
    scroll-padding:0 16px;scrollbar-width:none}
  .zs-siatka::-webkit-scrollbar{display:none}
  .zs-karta{scroll-snap-align:start}}

/* Ruch wyłączony dla osób, którym szkodzi: sceny stoją w stanie końcowym,
   sekcje są od razu na miejscu. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------- twój dział marketingu (2.10) */
/* „Jak to działa” i „Kompetencje” w jednej sekcji (`glowna.dzial`): trzy
   kroki z gotowymi pytaniami obok filmu F1 albo przykładowej rozmowy,
   pod spodem szesnastu specjalistów w pięciu działach. */
.g-dzial-sekcja .g-glowa.srodek{margin-bottom:clamp(32px,4vw,48px)}
.g-jak-tytul{margin:0 0 16px;font:650 20px/1.3 var(--wysw);letter-spacing:-.01em}
.g-dzial-sekcja .g-podpowiedzi{margin-top:20px;width:100%}
/* Poczta na głównej od 2.10: film 3, dwa zdania i odnośnik (makieta na /poczta). */
.g-poczta-krotka .gp-zdanie{margin:0 0 12px}
.g-poczta-krotka .g-dalej{margin-top:20px}
.g-dalej-dwa{display:flex;flex-wrap:wrap;gap:6px 28px}
@media (max-width:760px){
  /* Telefon: nagłówek, film, potem dwa zdania i odnośnik (jak w akcji). */
  .g-akcja.z-filmem .gp-zdanie{order:3}
  .g-poczta-krotka .g-akcja.z-filmem .g-dalej{order:4}}

/* Film zespołu w „Twoim dziale marketingu” obok kroków (2.10). */
.g-jak-rozmowa .film{width:100%;max-width:300px}

/* Film główny w bohaterze (2.10): karta 16:9 jak obraz, pod nią cicha
   transkrypcja; rama obrazu bohatera nie przycina podpisu. */
.g-bohater-obraz.g-bohater-film{overflow:visible;aspect-ratio:auto;border-radius:0;
  box-shadow:none;background:none;display:grid;gap:10px;width:100%}
.g-bohater-film .film-ekran{border-radius:28px;
  box-shadow:0 0 0 1px var(--linia-mocna),var(--cien-wystawa)}
.g-bohater-scena.z-obrazem:has(.g-bohater-film) .g-status{display:none}
.g-bohater-film .film-uwaga{margin-inline:auto}
@media (max-width:480px){
  .g-bohater-film .film-ekran{border-radius:20px}}

/* /specjalisci po ludzku (03.10, uwaga właściciela): skład zadania i dobór
   jako ludzie z zespołu (znak działu, nazwa, zdanie), koszt w złotych;
   punkty, rdzenie i modele tylko w zwiniętej nocie technicznej. */
.skl-napis,.dk-napis{margin:0 0 10px;font-size:13.5px;font-weight:600;
  color:var(--tekst-2)}
.skl-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.skl-wiersz{display:flex;align-items:flex-start;gap:12px;padding:12px;
  border:1px solid var(--linia-slaba);border-radius:14px;background:var(--tlo)}
.skl-wiersz>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.skl-wiersz b{font:600 15px/1.3 var(--tresc);color:var(--tekst)}
.skl-wiersz span:not(.g-kafel){font-size:13.5px;line-height:1.45;
  color:var(--tekst-2)}
.skl-koszt{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linia-slaba);
  font-size:13.5px;color:var(--tekst-2)}
.skl-koszt b{font:700 17px/1 var(--wysw);color:var(--tekst);white-space:nowrap}
.g-kafel.mini{width:26px;height:26px;border-radius:8px;box-shadow:none}
.dobor-wynik .wiad-ja{margin-bottom:18px}
.dobor-karty{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dobor-karta{padding:18px;border:1px solid var(--linia);border-radius:16px;
  background:var(--tlo)}
.dk-glowa{display:flex;align-items:center;gap:14px}
.dk-glowa>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.dk-glowa b{font:700 19px/1.15 var(--wysw);letter-spacing:-.015em;
  color:var(--tekst)}
.dk-powod{font-size:14px;line-height:1.4;color:var(--akcent-mocny)}
.dk-co{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--tekst)}
.dk-sprawdza{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--linia-slaba);font-size:14px;
  line-height:1.5;color:var(--tekst-2)}
.dk-sprawdza svg{flex:none;margin-top:3px;color:var(--zielony)}
.dk-sprawdza b{font-weight:600;color:var(--tekst)}
.dobor-wynik .dk-stopka{margin-top:14px}
.spec-krotko{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--tekst-2);
  max-width:52ch}
.spec-wiedza li span{font-size:13px;color:var(--tekst-3)}
/* Trzy poziomy pracy w złotych zamiast nazw modeli. */
.poziomy-ludzkie{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pl-poziom{display:flex;flex-direction:column;padding:24px;
  border:1px solid var(--linia);border-radius:var(--r-karta);
  background:var(--karta);box-shadow:var(--cien-karta)}
.pl-glowa{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-direction:row-reverse}
.pl-glowa h3{margin:0;font-size:22px}
.pl-kwota{margin:14px 0 0;font-size:14.5px;color:var(--tekst-2)}
.pl-kwota b{font:700 clamp(30px,3vw,38px)/1 var(--wysw);letter-spacing:-.03em;
  color:var(--tekst);margin-right:6px}
.pl-opis{margin:12px 0 18px;font-size:15px;line-height:1.55;color:var(--tekst-2)}
.pl-poziom .etykieta{margin:0 0 8px}
.pl-kto{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pl-kto li{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;
  border:1px solid var(--linia-slaba);border-radius:var(--r-pastylka);
  background:var(--tlo);font-size:13px;color:var(--tekst)}
.pl-dopisek{margin:20px 0 0;max-width:64ch;font-size:15.5px;line-height:1.6;
  color:var(--tekst-2)}
.nota-tech{margin-top:28px;padding-top:20px;border-top:1px solid var(--linia)}
.nota-tech>summary{font-size:15.5px}
.nota-tresc{padding-top:8px}
.nota-tresc>h3{margin:32px 0 12px;font-size:19px}
.nota-poziomy{font-size:14.5px}
.nota-poziomy td.mono{font-size:13px;white-space:nowrap}
.przebieg-doboru h4{margin:0 0 10px;font:600 17px/1.3 var(--wysw);
  color:var(--tekst)}
.pd-koszt{list-style:none;margin:0;padding:0}
.pd-koszt li{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--linia-slaba);font-size:14.5px}
.pd-koszt .mono{font-size:12.5px;color:var(--tekst-3)}
@media (max-width:900px){
  .poziomy-ludzkie{grid-template-columns:minmax(0,1fr)}}

/* Twój dział marketingu (03.10, uwaga właściciela: rozwijane karty w wąskich
   łamach łamały tekst słowo po słowie). Pięć działów jako zakładki (radio
   i `:has()`, bez skryptu), pod nimi karty wybranego działu w pełnej
   szerokości: równe wysokości, całe zdania, bez pudełka w pudełku. */
.g-zespol{margin-top:clamp(48px,6vw,72px)}
.g-dz-zakladki{display:none;border:0;margin:0 0 28px;padding:0;
  flex-wrap:wrap;justify-content:center;gap:8px}
.g-dz{position:relative;display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:6px 14px 6px 7px;border-radius:var(--r-pastylka);
  border:1px solid var(--linia);background:var(--karta);cursor:pointer;
  font:600 15px/1.2 var(--tresc);color:var(--tekst-2);
  transition:color var(--ruch-krotki) var(--krzywa),
    border-color var(--ruch-krotki) var(--krzywa),
    background-color var(--ruch-krotki) var(--krzywa)}
.g-dz input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.g-dz .g-kafel.mini{width:34px;height:34px;border-radius:var(--r-pastylka)}
.g-dz-ile{display:inline-grid;place-items:center;min-width:24px;height:24px;
  padding:0 7px;border-radius:var(--r-pastylka);background:var(--karta-2);
  font-size:12.5px;color:var(--tekst-3)}
.g-dz:has(input:checked){border-color:var(--tekst);color:var(--tekst);
  box-shadow:0 0 0 1px var(--tekst),var(--cien-karta)}
.g-dz:has(input:checked) .g-dz-ile{background:var(--tekst);color:var(--tlo)}
.g-dz:has(input:focus-visible){outline:2px solid var(--akcent);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .g-dz:hover{color:var(--tekst);border-color:var(--linia-mocna)}}
.g-dzialy{list-style:none;margin:0;padding:0;display:grid;gap:48px}
.g-dzial-glowa{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.g-dzial-nazwa{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:0;font:700 clamp(22px,2.2vw,28px)/1.15 var(--wysw);letter-spacing:-.02em;
  color:var(--tekst)}
.g-dzial-ile{font:500 14px/1.3 var(--tresc);letter-spacing:0;color:var(--tekst-3)}
.g-dzial-opis{margin:4px 0 0;font-size:16px;line-height:1.5;color:var(--tekst-2);
  max-width:62ch}
.g-kompetencje{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.g-kompetencje.ile-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-kompetencje.ile-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-komp{display:flex;flex-direction:column;min-width:0;padding:24px;
  border-radius:22px;background:var(--karta);
  box-shadow:0 0 0 1px var(--linia-slaba),var(--cien-karta);
  transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .g-komp:hover{transform:translateY(-3px)}}
.g-komp-glowa{display:flex;align-items:center;gap:14px}
.g-komp-glowa .g-kafel.maly{width:44px;height:44px;border-radius:14px;flex:none}
.g-komp-glowa h3{margin:0;font:700 20px/1.2 var(--wysw);letter-spacing:-.015em}
.g-komp-obietnica{margin:16px 0 0;font-size:16px;line-height:1.55;
  color:var(--tekst)}
.g-komp-pytanie{margin:16px 0 0;padding-left:14px;
  border-left:2px solid var(--linia-mocna);font-size:15px;line-height:1.5;
  color:var(--tekst-2)}
.g-komp-pytanie span{display:block;margin-bottom:2px;font-size:12.5px;
  font-weight:600;letter-spacing:.02em;color:var(--tekst-3)}
.g-komp-stopka{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px 16px;margin-top:auto;padding-top:18px}
.g-komp-stopka span{font-size:13px;color:var(--tekst-3)}
.g-komp-stopka a{display:inline-flex;align-items:center;gap:6px;min-height:32px;
  font-weight:600;font-size:14.5px;color:var(--tekst);text-decoration:none}
.g-komp-stopka a::after{content:"→";transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .g-komp-stopka a:hover::after{transform:translateX(3px)}}
.k-google .g-komp-pytanie{border-left-color:var(--kanal-reklamy-google)}
.k-seo .g-komp-pytanie{border-left-color:var(--kanal-seo)}
.k-mapy .g-komp-pytanie{border-left-color:var(--kanal-mapy)}
.k-ai .g-komp-pytanie{border-left-color:var(--kanal-ai)}
.k-meta .g-komp-pytanie{border-left-color:var(--kanal-meta)}
.k-email .g-komp-pytanie{border-left-color:var(--kanal-email)}
.k-analityka .g-komp-pytanie{border-left-color:var(--kanal-analityka)}
.k-koral .g-komp-pytanie{border-left-color:var(--koral)}
.k-zielony .g-komp-pytanie{border-left-color:var(--zielony)}
.k-marka .g-komp-pytanie{border-left-color:var(--akcent)}
@supports selector(:has(a)){
  .g-dz-zakladki{display:flex}
  .g-dzialy{display:block}
  .g-dzial{display:none}
  .g-zespol:has(input[value="0"]:checked) [data-dzial="0"],
  .g-zespol:has(input[value="1"]:checked) [data-dzial="1"],
  .g-zespol:has(input[value="2"]:checked) [data-dzial="2"],
  .g-zespol:has(input[value="3"]:checked) [data-dzial="3"],
  .g-zespol:has(input[value="4"]:checked) [data-dzial="4"]{display:block}}
@media (prefers-reduced-motion:no-preference){
  .g-dzial .g-komp{animation:g-dz-wejdz .26s var(--krzywa) both}
  .g-dzial .g-komp:nth-child(2){animation-delay:40ms}
  .g-dzial .g-komp:nth-child(3){animation-delay:80ms}
  .g-dzial .g-komp:nth-child(4){animation-delay:120ms}}
@keyframes g-dz-wejdz{from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}
@media (max-width:1180px){
  .g-kompetencje.ile-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .g-kompetencje,.g-kompetencje.ile-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .g-dz-zakladki{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:0 -16px 24px;padding:4px 16px 8px;scrollbar-width:none;
    scroll-snap-type:x proximity}
  .g-dz-zakladki::-webkit-scrollbar{display:none}
  .g-dz{flex:none;scroll-snap-align:start}
  .g-kompetencje,.g-kompetencje.ile-4,.g-kompetencje.ile-2{
    grid-template-columns:minmax(0,1fr);gap:12px}
  .g-komp{padding:20px}
  .g-komp-obietnica{font-size:15.5px}}
.spec-wiecej{margin-top:10px}
.spec-wiecej>summary{font-size:14.5px}
.spec-wiecej .spec-narz{margin-top:4px}

/* ---------------------------------------------------------- dla agencji (3.10) */
/* `strona_www/agencje.py`: strona dla właściciela agencji w języku głównej.
   Bohater z porannym przeglądem portfela, trzy efekty, dzień agencji, portal
   (głęboka), granice stałej zgody, marka z raportem, role, pakiety bez opłaty
   za klienta, dlaczego Torin, polecenia, pytania. */
.agencje .naglowek-strony h1{max-width:13ch}
.ag-fakty{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:10px}
.ag-fakty li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;
  align-items:center;font-size:15.5px;line-height:1.45;color:var(--tekst-2)}
.ag-fakty b{color:var(--tekst);font-weight:650}
.ag-fakt-ik{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--akcent-tlo);color:var(--akcent-mocny)}
.ag-poranek{position:relative;display:grid;gap:14px;padding:clamp(16px,2vw,24px);
  border-radius:28px;background-color:var(--karta-2);background-image:var(--gradient-cieply);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien-karta)}
.ag-poranek-karta{display:grid;gap:8px;padding:16px 18px;border-radius:18px;
  background:var(--karta);box-shadow:var(--cien-unosi);
  border:1px solid var(--linia-slaba);margin:0 0 0 clamp(0px,6%,40px)}
.ag-poranek-karta p{margin:0;font-size:14.5px;line-height:1.45;color:var(--tekst)}
.ag-poranek-karta .ag-mala{font:600 12.5px/1.3 var(--tresc);color:var(--koral-mocny);
  letter-spacing:.01em}
.ag-poranek .g-pod{margin:0;font-size:13px;color:var(--tekst-3)}
.ag-spis .ns-spis{margin:0 0 8px}

/* Trzy efekty: karta z liczbą na dole. */
.ag-efekty{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ag-efekt{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,32px);
  border-radius:26px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien-karta)}
.ag-efekt h3{margin:4px 0 0;font-size:clamp(20px,1.7vw,23px);line-height:1.2}
.ag-efekt>p:not(.ag-liczba){margin:0;font-size:16px;line-height:1.55;color:var(--tekst-2);
  flex:1}
.ag-liczba{display:flex;align-items:baseline;gap:10px;margin:6px 0 0;padding-top:16px;
  border-top:1px solid var(--linia-slaba)}
.ag-liczba b{font:700 clamp(30px,2.8vw,40px)/1 var(--wysw);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;color:var(--tekst)}
.ag-liczba span{font-size:14.5px;line-height:1.35;color:var(--tekst-2)}

/* Dzień agencji: oś z sześcioma chwilami w trzech kolumnach. */
.ag-os{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
.ag-os .g-godz{font-size:19px;letter-spacing:-.01em}

/* Portal (głęboka) i marka: punkty obok makiety. */
.ag-portal .g-portal{max-width:520px;justify-self:end;width:100%}

/* Granice stałej zgody: cztery karty w rzędzie. */
.ag-granice{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ag-granice li{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:22px;
  background:var(--karta);border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.ag-granice h3{margin:0 0 6px;font-size:18px;line-height:1.25}
.ag-granice p{margin:0;font-size:15px;line-height:1.5;color:var(--tekst-2)}
.ag-granica-ik{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--zielony-tlo);color:var(--zielony)}
.ag-granice+.g-dalej{margin-top:28px}

/* Raport pod marką agencji. */
.ag-raport{display:grid;gap:16px;max-width:520px;justify-self:end;width:100%;
  padding:clamp(20px,2.4vw,28px);border-radius:26px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien-wystawa)}
.ag-raport-belka{display:flex;align-items:center;gap:12px;padding-bottom:14px;
  border-bottom:1px solid var(--linia-slaba)}
.ag-raport-belka>span:last-child{display:grid;gap:2px}
.ag-raport-belka b{font:700 16px/1.2 var(--wysw)}
.ag-raport-belka span span{font-size:13.5px;color:var(--tekst-3)}
.ag-raport-znak{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--koral);color:var(--na-barwie);font:700 15px/1 var(--wysw)}
.ag-raport h3{margin:0;font-size:clamp(19px,1.6vw,22px);line-height:1.25}
.ag-raport dl{margin:0;display:grid;gap:8px}
.ag-raport dl div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:12px;
  padding:10px 12px;border-radius:12px;background:var(--tlo);font-size:14.5px;line-height:1.4}
.ag-raport dt{color:var(--tekst-3)}
.ag-raport dd{margin:0;color:var(--tekst);font-weight:550}
.ag-raport-stopka{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;
  color:var(--tekst-2)}

/* Role w zespole. */
.ag-role{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ag-role li{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:22px;
  background:var(--karta);border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.ag-role h3{margin:6px 0 0;font-size:18px}
.ag-role p{margin:0;font-size:15px;line-height:1.5;color:var(--tekst-2)}
.ag-role+.g-pod{margin-top:20px}

/* Pakiety bez opłaty za klienta. */
.ag-pakiety{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ag-pakiet{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;
  border-radius:24px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien)}
.ag-pakiet.wyrozniony{border-color:var(--akcent);box-shadow:var(--cien-karta)}
.ag-pakiet h3{margin:0;font-size:19px}
.ag-plakietka{position:absolute;top:-12px;left:22px;padding:4px 12px;
  border-radius:var(--r-pastylka);background:var(--akcent);color:var(--na-barwie);
  font:600 12.5px/1.3 var(--tresc)}
.ag-kwota{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.ag-kwota b{font:700 clamp(28px,2.4vw,34px)/1.05 var(--wysw);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums}
.ag-kwota span{font-size:14px;color:var(--tekst-3)}
.ag-klienci{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:12px;
  border-top:1px solid var(--linia-slaba);font-size:15px;color:var(--tekst)}
.ag-klienci svg{color:var(--akcent)}
.ag-cena-fakty{margin-top:clamp(28px,3vw,40px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;padding-top:0}
.ag-cena-fakty li,.ag-cena-fakty li:first-child{border-top:1px solid var(--linia)}

/* Dlaczego Torin: pięć atutów w jednej karcie na głębokiej sekcji. */
.ag-atuty-ramka{border-radius:24px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien-karta);padding:8px clamp(16px,2.4vw,32px)}
.ag-atuty{list-style:none;margin:0;padding:0;display:grid}
.ag-atuty li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;
  padding:20px 0;border-bottom:1px solid var(--linia-slaba)}
.ag-atuty li:last-child{border-bottom:0}
.ag-atuty h3{margin:0 0 4px;font:600 17px/1.35 var(--tresc);color:var(--tekst)}
.ag-atuty p{margin:0;font-size:16px;line-height:1.5;color:var(--tekst-2)}
.ag-atut-ik{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--zielony-tlo);color:var(--zielony)}

/* Polecenia: jeden pas. */
.ag-polecenia{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  padding:clamp(28px,4vw,48px);border-radius:28px;background-color:var(--karta-2);
  background-image:var(--gradient-cieply);border:1px solid var(--linia-slaba)}
.ag-polecenia h2{margin:14px 0 0;font-size:clamp(28px,3vw,40px);line-height:1.1}
.ag-polecenia p:not(.g-znacznik){margin:14px 0 0;max-width:62ch;font-size:17px;
  line-height:1.55;color:var(--tekst-2)}
.ag-polecenia-ik{display:grid;place-items:center;width:88px;height:88px;border-radius:28px;
  background:var(--koral);color:var(--na-barwie);box-shadow:var(--cien-karta)}

@media (max-width:1180px){
  .ag-granice,.ag-role,.ag-pakiety{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-pakiety{row-gap:24px}}
@media (max-width:1020px){
  .ag-efekty{grid-template-columns:minmax(0,1fr)}
  .ag-os{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-portal .g-portal,.ag-raport{justify-self:start}
  .ag-cena-fakty{grid-template-columns:minmax(0,1fr)}
  .ag-cena-fakty li:first-child{border-top:0}}
@media (max-width:760px){
  .ag-os{display:flex}
  .ag-poranek-karta{margin-left:0}
  .ag-granice,.ag-role{grid-template-columns:minmax(0,1fr)}
  .ag-polecenia{grid-template-columns:minmax(0,1fr)}
  .ag-polecenia-ik{display:none}
  /* Granice i role na telefonie: ikona obok tekstu, nie nad nim. */
  .ag-granice li,.ag-role li{display:grid;grid-template-columns:40px minmax(0,1fr);
    gap:4px 14px;padding:18px}
  .ag-role li>.g-kafel{grid-row:span 2;width:40px;height:40px}
  .ag-role h3{margin:0;align-self:end}
  .ag-role p{grid-column:2}
  /* Poranny przegląd w bohaterze: trzy wiersze zamiast pięciu. */
  .ag-poranek .ds-portfel li:nth-child(n+4){display:none}}
@media (max-width:560px){
  .ag-pakiety{gap:20px 10px}
  .ag-pakiet{padding:18px 16px;gap:6px}
  .ag-pakiet h3{font-size:17px}
  .ag-kwota b{font-size:23px}
  .ag-kwota span{flex-basis:100%;font-size:13px}
  .ag-klienci{font-size:14px;gap:6px}
  .ag-plakietka{left:14px}}
@media (max-width:340px){
  .ag-pakiety{grid-template-columns:minmax(0,1fr)}}

/* ===== Jeden Torin zamiast stosu narzędzi (08.10, `strona_www/jeden_torin`)
   Mapa wszystkiego, co Torin robi, pogrupowana według pracy. Na telefonie
   karty idą w poziomym rzędzie z przyciąganiem zamiast dziewięciu ekranów
   w pionie. */
.jt{background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--akcent-tlo) 55%,transparent) 50%,transparent)}
.jt-siatka{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.jt-karta{display:flex;flex-direction:column;gap:16px;padding:22px 22px 20px;
  border-radius:22px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien-karta);
  transition:transform var(--ruch-krotki) var(--krzywa),border-color var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .jt-karta:hover{transform:translateY(-3px);border-color:var(--linia-mocna)}}
.jt-glowa{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.jt-glowa .g-kafel.maly{color:var(--na-barwie)}
.jt-glowa h3{margin:0;font:700 20px/1.2 var(--wysw);letter-spacing:-.01em;color:var(--tekst)}
.jt-glowa p{margin:4px 0 0;font-size:15px;line-height:1.45;color:var(--tekst-2)}
.jt-lista{list-style:none;margin:0;padding:14px 0 0;display:grid;gap:9px;
  border-top:1px solid var(--linia-slaba)}
.jt-lista li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;
  align-items:start;font-size:15px;line-height:1.45;color:var(--tekst-2)}
.jt-ptaszek{display:inline-grid;place-items:center;width:18px;height:18px;margin-top:2px;
  border-radius:50%;background:var(--akcent-tlo);color:var(--akcent)}
.jt-lista .jt-nowe{color:var(--tekst)}
.jt-lista .jt-plakietka,.jt-pod .jt-plakietka{height:20px;padding:0 0 0 12px;background:none;position:relative;
  color:var(--tekst-3);font-size:11px}
.jt-lista .jt-plakietka::before,.jt-pod .jt-plakietka::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--koral)}
/* F4-C (17.10): pozycja, która czeka na dostęp albo pierwszą próbę
   (`strona_www/proby.py`): zegar zamiast ptaszka, szara kropka. */
.jt-lista .jt-czeka{color:var(--tekst-3)}
.jt-czeka .jt-ptaszek{background:var(--linia-slaba);color:var(--tekst-3)}
.jt-lista .jt-wkrotce::before{background:none;border:1.5px solid var(--tekst-3)}
.jt-plakietka{display:inline-flex;align-items:center;height:22px;padding:0 9px;
  border-radius:var(--r-pastylka);background:color-mix(in srgb,var(--koral) 16%,var(--karta));
  color:var(--tekst);font:700 11.5px/1 var(--tresc);letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.jt-pod{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;
  max-width:760px;margin:28px auto 0;text-align:center;font-size:15px;color:var(--tekst-3)}
.jt-dalej{text-align:center}
@media (max-width:1020px){
  .jt-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .jt-siatka{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:0 -16px;padding:4px 16px 18px;scroll-padding:0 16px;scrollbar-width:thin}
  .jt-karta{flex:0 0 86%;scroll-snap-align:start;padding:18px}
  .jt-glowa h3{font-size:18px}
  .jt-lista li{font-size:14.5px}}

/* ===== Znasz się czy nie, Torin wytłumaczy (08.10): trzy poziomy tej
   samej odpowiedzi. Radio z `:has()` jak wybór rodzaju firmy; bez `:has()`
   widać wszystkie trzy poziomy. */
.jp-uklad{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px;
  align-items:start;max-width:1120px;margin:0 auto}
.jp-karta{padding:24px;border-radius:26px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien-wystawa)}
.jp-pytanie{display:flex;gap:12px;align-items:flex-start;justify-content:flex-end}
.jp-pytanie p{margin:0;max-width:44ch;padding:12px 16px;border-radius:18px 18px 4px 18px;
  background:var(--akcent);color:var(--na-barwie);font-size:16px;line-height:1.45}
.jp-ty{order:2;flex:none;display:inline-grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--akcent-tlo);color:var(--akcent);font:700 12px/1 var(--tresc)}
.jp-odp{margin-top:18px;padding:18px;border-radius:20px;background:var(--gradient-torina);
  border:1px solid var(--linia-slaba)}
.jp-glowa{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--tekst)}
.jp-awatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--akcent);color:var(--na-barwie)}
.jp-wybory{justify-content:flex-start;gap:8px;margin:0 0 16px}
.jp-wybor{min-height:44px;padding:0 16px;font-size:14.5px}
.jp-panel{display:none}
.jp-panel+.jp-panel{margin-top:0}
.jp:has(input[value=prosto]:checked) [data-jp=prosto],
.jp:has(input[value=ludzku]:checked) [data-jp=ludzku],
.jp:has(input[value=ekspert]:checked) [data-jp=ekspert]{display:block}
@supports not selector(:has(*)){
  .jp-panel{display:block;margin-top:16px}}
.jp-podpis{margin:0 0 12px;font-size:14px;color:var(--tekst-3)}
.jp-podpis b{color:var(--tekst)}
.jp-czesci{margin:0;display:grid;gap:10px}
.jp-czesci div{padding:12px 14px;border-radius:14px;background:var(--karta);
  border:1px solid var(--linia-slaba)}
.jp-czesci dt{font:700 13px/1.3 var(--tresc);letter-spacing:.02em;color:var(--akcent)}
.jp-czesci dd{margin:4px 0 0;font-size:15.5px;line-height:1.5;color:var(--tekst-2)}
.jp-nota{margin:14px 0 0;font-size:13px;color:var(--tekst-3)}
.jp-fakty{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.jp-fakty li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  padding:16px 18px;border-radius:20px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien)}
.jp-fakty .g-kafel.maly{background:var(--akcent-tlo);color:var(--akcent);box-shadow:none}
.jp-fakty b{display:block;font:700 16px/1.3 var(--wysw);color:var(--tekst)}
.jp-fakty span:not(.g-kafel){display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--tekst-2)}
@media (max-width:900px){
  .jp-uklad{grid-template-columns:minmax(0,1fr)}
  .jp-fakty{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .jp-karta{padding:16px;border-radius:22px}
  .jp-odp{padding:14px}
  .jp-wybory{flex-wrap:nowrap;overflow-x:auto}
  .jp-wybor{flex:none;padding:0 13px;font-size:14px}
  .jp-fakty{grid-template-columns:minmax(0,1fr)}}
/* Katalog w liczbach na /en/capabilities (08.10). */
.jt-liczby{list-style:none;margin:0 0 32px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.jt-liczby li{padding:18px 20px;border-radius:20px;background:var(--karta);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien)}
.jt-liczby b{display:block;font:800 clamp(34px,3.4vw,44px)/1 var(--wysw);letter-spacing:-.03em;color:var(--akcent)}
.jt-liczby span{display:block;margin-top:6px;font:700 16px/1.3 var(--wysw);color:var(--tekst)}
.jt-liczby p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--tekst-2)}
/* Prawdziwe ekrany z demo (08.10, `jeden_torin.ekrany`): jedna duża klatka
   w ramce okna, karty to radio z `:has()`; bez `:has()` widać pierwszą. */
.je-wybory{margin-bottom:28px}
.je-panel{display:none;margin:0 auto;max-width:1160px}
.je-panel:first-child{display:block}
.je:has(input:checked) .je-panel:first-child{display:none}
.je:has(input[value=centrum]:checked) [data-je=centrum],
.je:has(input[value=wyjasnienie]:checked) [data-je=wyjasnienie],
.je:has(input[value=jakosc]:checked) [data-je=jakosc],
.je:has(input[value=google]:checked) [data-je=google],
.je:has(input[value=konkurencja]:checked) [data-je=konkurencja],
.je:has(input[value=automatyzacje]:checked) [data-je=automatyzacje],
.je:has(input[value=social]:checked) [data-je=social],
.je:has(input[value=studio]:checked) [data-je=studio],
.je:has(input[value=zysk]:checked) [data-je=zysk],
.je:has(input[value=inbox]:checked) [data-je=inbox],
.je:has(input[value=doktor]:checked) [data-je=doktor]{display:block}
.je-ramka{overflow:hidden;border-radius:18px;background:var(--karta);
  border:1px solid var(--linia);box-shadow:var(--cien-wystawa)}
.je-pasek{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--linia-slaba);
  background:var(--tlo)}
.je-pasek i{width:10px;height:10px;border-radius:50%;background:var(--linia-mocna)}
.je-ramka img{display:block;width:100%;height:auto}
.je-panel figcaption{margin:14px auto 0;max-width:760px;text-align:center;font-size:14px;
  line-height:1.5;color:var(--tekst-3)}
.je-panel figcaption a{white-space:nowrap}
@media (max-width:600px){
  .je-wybory{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    margin:0 -16px 20px;padding:4px 16px}
  .je-wybory .jp-wybor{flex:none}
  .je-ramka{max-width:390px;margin:0 auto;border-radius:22px}}
/* Poziomy: wybrany w akcencie (na ciemnej karcie atrament ginął), na
   telefonie trzy równe kolumny zamiast przewijania. */
.jp-wybor:has(input:checked){background:var(--akcent);border-color:var(--akcent);
  color:var(--na-barwie)}
@media (hover:hover) and (pointer:fine){
  .jp-wybor:has(input:checked):hover{color:var(--na-barwie)}}
@media (max-width:560px){
  .jp-wybory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .jp-wybory .jp-wybor{justify-content:center;text-align:center;padding:4px 6px;
    font-size:13.5px;line-height:1.2}
  .jp-fakty li{padding:14px 16px}}

/* ---------------------------------------------------------- ilustracje sekcji
   9.10 (plan/GRAFIKI-STRONY-09-10.md). Obraz wchodzi do sekcji, gdy plik
   leży (`strona_www/ilustracje.py`): nagłówek i obraz obok siebie, kolejne
   obrazy na zmianę z prawej i z lewej; w kolumnie obraz pod nagłówkiem.
   Ramka: zaokrąglenie i cień z tokenów, na ciemnym motywie obraz lekko
   przygaszony, żeby papierowe tło renderu nie świeciło. */
.il-glowa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,80px);align-items:center;margin:0 0 clamp(40px,5vw,64px)}
.il-glowa.il-lewo{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.il-glowa.il-lewo>.il-sekcji{order:-1}
.il-glowa>header{margin:0;max-width:640px}
.il-glowa>.g-glowa.srodek{text-align:left;margin:0}
.il-glowa>.g-glowa.srodek .g-wstep{margin-left:0;margin-right:0}
.il-glowa>.sekcja-glowa{margin-bottom:0}
.il-sekcji{margin:0;border-radius:28px;overflow:hidden;background:var(--karta-2);
  border:1px solid var(--linia-slaba);box-shadow:var(--cien-karta)}
.il-sekcji img{display:block;width:100%;height:auto}
.il-szeroki{aspect-ratio:3/2}
.il-kwadrat{aspect-ratio:1/1}
.il-szeroki img,.il-kwadrat img{height:100%;object-fit:cover}
.il-pod{display:flex;flex-direction:column;gap:28px}
.il-pod>header{margin-bottom:0}
.il-pod>.il-sekcji{max-width:420px;width:100%}
.il-pod>.il-kwadrat{max-width:300px}
.gleboka .il-sekcji{border-color:var(--na-atramencie-3);box-shadow:var(--cien-wystawa)}
/* Pas wezwania podstron: tekst i przyciski z lewej, obraz z prawej. */
.cta-w.il-z-obrazem{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  grid-template-areas:"tekst obraz" "przyciski obraz";gap:24px clamp(32px,5vw,72px);
  align-items:center}
.cta-w.il-z-obrazem>div:first-child{grid-area:tekst}
.cta-w.il-z-obrazem>.przyciski{grid-area:przyciski;align-self:start}
.cta-w.il-z-obrazem>.il-cta{grid-area:obraz}
/* Nagłówek strony prawnej i 404: mały obraz po prawej. */
.ns-obok>.il-naglowek{max-width:420px;margin-left:auto}
/* /zacznij: obraz na górze karty „Co dalej”. */
.co-dalej>.il-start{margin:-28px -28px 22px;border-radius:var(--r-karta) var(--r-karta) 0 0;
  border:0;box-shadow:none}
/* Program poleceń: obraz w miejscu znaku. */
.ag-polecenia>.il-polecenia{width:160px;border-radius:24px}
/* Znak specjalisty: Torin w roli zamiast ikony. */
.il-rola{flex:none;display:block;width:56px;height:56px;border-radius:16px;
  overflow:hidden;background:var(--karta-2);border:1px solid var(--linia-slaba)}
.il-rola img{display:block;width:100%;height:100%;object-fit:cover}
.g-komp-glowa .il-rola{width:44px;height:44px;border-radius:14px}
@media (prefers-color-scheme:dark){
  .il-sekcji img,.il-rola img{filter:brightness(.9) saturate(.95)}}
@media (max-width:900px){
  .il-glowa,.il-glowa.il-lewo{grid-template-columns:minmax(0,1fr);gap:28px}
  .il-glowa.il-lewo>.il-sekcji{order:0}
  .il-glowa>.il-sekcji{max-width:560px}
  .cta-w.il-z-obrazem{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"obraz" "tekst" "przyciski"}
  .cta-w.il-z-obrazem>.il-cta{max-width:420px}
  .ag-polecenia>.il-polecenia{width:120px;order:-1}
  .ns-obok>.il-naglowek{margin-left:0;max-width:280px}}

/* ---------------------------------------------------------- schemat „Czym jest TORIN”
   Rysowany kodem, bo znaczenie ma być dokładne: cztery konta, codzienne
   sprawdzanie, trzy skutki (to samo zdanie co tekst obok). */
.sa{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 40px auto 40px minmax(0,1.4fr);
  align-items:center;gap:12px;padding:clamp(20px,2.4vw,32px);border-radius:28px;
  background:var(--karta);border:1px solid var(--linia-slaba);box-shadow:var(--cien-karta)}
.sa-podpis{margin:0 0 10px;font:600 12.5px/1.3 var(--tresc);letter-spacing:.02em;
  color:var(--tekst-3)}
.sa ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sa-zrodla li{padding:8px 12px;border-radius:12px;background:var(--karta-2);
  border:1px solid var(--linia-slaba);font-size:14px;line-height:1.3;color:var(--tekst)}
.sa-strzalka{width:40px;height:20px;color:var(--akcent)}
.sa-torin{display:grid;justify-items:center;gap:6px;text-align:center;max-width:132px}
.sa-znak{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;
  background:var(--akcent-tlo);border:1px solid var(--linia-slaba)}
.sa-torin b{font:700 15px/1 var(--wysw);letter-spacing:.04em;color:var(--tekst)}
.sa-torin span:last-child{font-size:13px;line-height:1.35;color:var(--tekst-2)}
.sa-wyniki li{display:flex;align-items:center;gap:10px;font-size:14.5px;line-height:1.35;
  color:var(--tekst)}
.sa-wyniki .g-kafel.maly{flex:none}
.il-glowa.il-schemat{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  align-items:center}
@media (max-width:1100px){
  .sa{grid-template-columns:minmax(0,1fr);justify-items:stretch}
  .sa-strzalka{transform:rotate(90deg);justify-self:center}
  .sa-torin{justify-self:center;max-width:none}
  .sa-zrodla ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .il-glowa.il-schemat{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------- mniej komunikatora
   9.10: elementy, które czytały się jak okno czatu, mówią teraz językiem
   produktu. Gotowe pytania to lista podpowiedzi ze strzałką, a nie dymki;
   „Zapytaj na przykład” to cytat z kreską, jak na głównej; karta poziomów
   ma belkę okna aplikacji; plakietka przy zdjęciu to stan pracy. */
.g-podpowiedzi ul{flex-direction:column;flex-wrap:nowrap;gap:6px}
.g-podp{display:flex;justify-content:space-between;gap:12px;width:100%;
  border-radius:12px;box-shadow:none;background:var(--karta);
  border:1px solid var(--linia-slaba)}
.g-podp::after{content:"→";flex:none;color:var(--akcent);font-weight:600}
.zs-pytanie{padding:0 0 0 14px;border-radius:0;background:transparent;
  border-left:2px solid var(--linia-mocna);color:var(--tekst-2)}
.zs-pytanie span{color:var(--tekst-3);letter-spacing:.02em}
.jp-belka{margin:0 0 20px;border-radius:12px;border:1px solid var(--linia-slaba)}
.lf-dymek{padding:8px 14px 8px 10px}
.lf-znak{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--zielony-tlo);color:var(--zielony)}

/* ---------------------------------------------------------- strona, która żyje
   9.10 (pomysł właściciela: strona ma „żyć i płynąć”). Wszystko natywnie,
   bez bibliotek: animacje sterowane przewijaniem (`animation-timeline`),
   a gdzie przeglądarka ich nie zna, obraz po prostu stoi (zostaje samo
   unoszenie). Rusza się wyłącznie transform, translate
   i opacity; nic przy ograniczonym ruchu i nic w pierwszym widoku przy
   pierwszym malowaniu (bohater stoi, rusza się dopiero za kursorem).
   - ilustracja sekcji wjeżdża z dołu i rośnie z 0,965, a obraz w niej
     płynie wolniej niż strona (paralaksa w ramce);
   - po wejściu ilustracja delikatnie unosi się w pętli 8–9,5 s
     (`translate`, osobna własność, więc nie kłóci się z wejściem);
   - strzałki schematu „Czym jest TORIN” rysują się od lewej;
   - cienka kreska postępu pod nagłówkiem strony;
   - plakietki na zdjęciach „Dla kogo” unoszą się każda w swoim tempie. */
.naglowek::after{content:"";position:absolute;left:0;right:0;bottom:-1px;
  height:2px;background:var(--akcent);transform-origin:0 50%;opacity:0;
  pointer-events:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .il-sekcji{animation:il-wejdz linear both,il-unos 8s ease-in-out infinite alternate;
      animation-timeline:view(),auto;animation-range:entry 0% cover 32%,normal}
    .il-glowa.il-lewo>.il-sekcji{animation-duration:auto,9.5s}
    .il-szeroki img,.il-kwadrat img{animation:il-dryf linear both;
      animation-timeline:view();animation-range:cover 0% cover 100%}
    .sa-strzalka{animation:sa-rysuj linear both;animation-timeline:view();
      animation-range:entry 20% cover 40%}
    .naglowek::after{opacity:1;animation:postep linear both;
      animation-timeline:scroll(root)}}}
@supports not (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .il-sekcji{animation:il-unos 8s ease-in-out infinite alternate}}}
@media (prefers-reduced-motion:no-preference){
  .lf-dymek{animation:il-unos 7s ease-in-out infinite alternate}
  .g-ludzie li:nth-child(2n) .lf-dymek{animation-duration:9s}
  .g-ludzie li:nth-child(3n) .lf-dymek{animation-duration:10s}
  /* Paralaksa za kursorem w bohaterze (strona.js ustawia --kx i --ky). */
  .g-bohater-scena{translate:calc(var(--kx,0) * 6px) calc(var(--ky,0) * 6px);
    transition:translate .3s var(--krzywa)}
  .g-bohater::before{translate:calc(var(--kx,0) * -14px) calc(var(--ky,0) * -10px);
    transition:translate .3s var(--krzywa)}
}
@keyframes il-wejdz{from{opacity:0;transform:translateY(56px) scale(.965)}
  to{opacity:1;transform:none}}
@keyframes il-dryf{from{transform:translateY(-4%) scale(1.09)}
  to{transform:translateY(4%) scale(1.09)}}
@keyframes il-unos{from{translate:0 0}to{translate:0 -7px}}
@keyframes sa-rysuj{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes postep{from{transform:scaleX(.001)}to{transform:none}}
@media (max-width:1100px){
  .sa-strzalka{animation:none}}

/* ---------------------------------------------------------- kino (09.10)
   Uwaga właściciela z 9.10: film główny ma stać na środku, a po
   kliknięciu rosnąć, gdy reszta strony gaśnie; inne filmy mają plakat,
   który zaprasza do kliknięcia, albo krótką pętlę.
   - bohater z filmem (`g-bohater-kino`): hasło i film na środku sekcji,
     film duży pod hasłem, z dużym przyciskiem pośrodku;
   - plakat: czysta klatka z postacią, na niej w HTML czas, tytuł
     w cieniu i przycisk; kursor nad kartą lekko przybliża obraz;
   - podgląd: cicha pętla wchodzi nad plakat dopiero, gdy gra;
   - kino: `<dialog>` na całe okno, tło gaśnie i rozmywa się, rama rośnie
     z miejsca filmu (strona.js, transform); przy ograniczonym ruchu samo
     przyciemnienie, na telefonie film na całą szerokość. */
.film[data-film="klik"] .film-ekran{cursor:pointer}
.film-plakat{transition:opacity var(--ruch) var(--krzywa),transform .3s var(--krzywa)}
@media (hover:hover){
  .film[data-film="klik"] .film-ekran:hover .film-plakat{transform:scale(1.03)}}
.film-podglad{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block;opacity:0;pointer-events:none;
  transition:opacity .3s var(--krzywa)}
.podglad-gra .film-podglad{opacity:1}
.film-ruszyl .film-podglad{display:none}
html:not(.js) .film-podglad{display:none}
.film-nazwa{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:72px 18px 80px;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--atrament) 82%,transparent),
    color-mix(in srgb,var(--atrament) 40%,transparent) 55%,transparent);
  color:var(--tekst-na-ciemnym);font:700 19px/1.2 var(--wysw);
  letter-spacing:-.01em;text-wrap:balance}
.film-ruszyl .film-nazwa{display:none}
.film-16x9 .film-nazwa{padding-right:120px;padding-bottom:22px}

/* Duży przycisk filmu głównego: koło na środku, obok napis z czasem. */
.film-duzy .film-graj{inset:0;margin:auto;width:max-content;height:max-content;
  max-width:none;min-height:0;padding:0;gap:16px;
  background:none;box-shadow:none;border-radius:0;
  color:var(--tekst-na-ciemnym);transform-origin:center}
.film-duzy .film-graj-ikona{position:relative;width:92px;height:92px;
  box-shadow:var(--cien-wystawa)}
.film-duzy .film-graj-ikona::before{content:"";position:absolute;inset:-12px;
  z-index:-1;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--akcent) 32%,transparent)}
.film-duzy .film-graj-ikona svg{width:38px;height:38px;margin-left:5px}
.film-duzy .film-graj-napis{display:block;padding:10px 18px;
  border-radius:var(--r-pastylka);font:600 16px/1 var(--tresc);
  background:color-mix(in srgb,var(--atrament) 66%,transparent);
  backdrop-filter:blur(8px)}
.film-duzy .film-graj-czas{font-variant-numeric:tabular-nums;
  color:var(--na-atramencie)}
.film-duzy .film-czas{display:none}
@media (prefers-reduced-motion:no-preference){
  .film-duzy .film-graj-ikona::before{animation:kino-puls 2.4s var(--krzywa) infinite}}
@keyframes kino-puls{from{transform:scale(.9);opacity:.9}to{transform:scale(1.3);opacity:0}}
@media (max-width:600px){
  .film-duzy .film-graj{gap:10px}
  .film-duzy .film-graj-ikona{width:68px;height:68px}
  .film-duzy .film-graj-ikona svg{width:28px;height:28px}
  .film-duzy .film-graj-napis{padding:8px 14px;font-size:14px}}

/* Bohater z filmem głównym: jedna kolumna na środku (od 1021 px). */
@media (min-width:1021px){
  .g-bohater-kino{padding-top:clamp(24px,2.6vw,40px)}
  .g-bohater-kino .g-bohater-siatka{grid-template-columns:minmax(0,1fr);
    gap:clamp(28px,2.8vw,40px);justify-items:center;text-align:center}
  .g-bohater-kino .g-bohater-tekst,.g-bohater-kino .g-bohater-scena{grid-column:1/-1}
  .g-bohater-kino .g-bohater-tekst{max-width:1120px}
  .g-bohater-kino h1{font-size:clamp(44px,3.9vw,58px);text-wrap:balance}
  .g-bohater-kino .g-zdanie{margin:18px auto 26px;max-width:74ch;text-wrap:balance}
  .g-bohater-kino .przyciski{justify-content:center}
  .g-bohater-kino .g-bohater-scena.z-obrazem{width:min(960px,100%);margin:0}}

/* Okno kina. */
.kino{position:fixed;inset:0;width:100%;height:100%;max-width:none;
  max-height:none;margin:0;padding:clamp(16px,4vh,48px) 24px;border:0;
  background:transparent;color:var(--tekst-na-ciemnym);overflow:hidden;
  overscroll-behavior:contain;place-content:center;justify-items:center;gap:14px}
.kino[open]{display:grid}
.kino::backdrop{background:color-mix(in srgb,var(--atrament) 86%,transparent);
  backdrop-filter:blur(14px)}
html:has(.kino[open]){overflow:hidden}
.kino-rama{position:relative;width:min(calc(100vw - 48px),calc((100dvh - 140px) * 16 / 9),1600px);
  aspect-ratio:16/9;border-radius:20px;overflow:hidden;transform-origin:0 0;
  background:var(--atrament);box-shadow:var(--cien-wystawa)}
.kino-pion .kino-rama{width:min(calc(100vw - 48px),calc((100dvh - 140px) * 9 / 16));
  aspect-ratio:9/16}
.kino-wideo{display:block;width:100%;height:100%;object-fit:contain;
  background:var(--atrament)}
.kino-tytul{margin:0;max-width:60ch;text-align:center;
  font:600 16px/1.35 var(--tresc);color:var(--na-atramencie)}
.kino-zamknij{position:fixed;top:16px;right:16px;width:48px;height:48px;
  border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--karta) 14%,transparent);
  color:var(--tekst-na-ciemnym);box-shadow:0 0 0 1px var(--na-atramencie-3);
  transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover){
  .kino-zamknij:hover{background:color-mix(in srgb,var(--karta) 26%,transparent)}}
.kino-zamknij:active{transform:scale(.97)}
.kino-zamknij:focus-visible{outline:3px solid var(--akcent-jasny);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .kino[open]::backdrop{animation:kino-tlo .3s var(--krzywa)}
  .kino[open] .kino-tytul,.kino[open] .kino-zamknij{animation:kino-tlo .3s var(--krzywa) .15s both}
  .kino.zamyka::backdrop,.kino.zamyka .kino-tytul,.kino.zamyka .kino-zamknij{
    opacity:0;transition:opacity .3s var(--krzywa)}}
@keyframes kino-tlo{from{opacity:0}to{opacity:1}}
/* Telefon: film na całą szerokość, bez zaokrągleń, jak natywny odtwarzacz. */
@media (max-width:700px){
  .kino{padding:56px 0 24px}
  .kino-rama,.kino-pion .kino-rama{border-radius:0}
  .kino-rama{width:min(100vw,calc((100dvh - 120px) * 16 / 9))}
  .kino-pion .kino-rama{width:min(100vw,calc((100dvh - 120px) * 9 / 16))}
  .kino-zamknij{top:8px;right:8px}}

/* Integracje „wkrótce” (F1-C, 15.10): przerywana ramka i cichszy tekst,
   żeby nie wyglądały jak te, które podłączysz dziś. */
.zetony-lista.kat-wkrotce li{border-style:dashed;background:transparent;
  color:var(--tekst-2)}
/* Centrum pomocy i stan usług (F5-B, strona_www/wsparcie.py) */
.pomoc-kontakt p{margin:0 0 12px}
.su-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linia)}
.su-wiersz{display:grid;grid-template-columns:1fr auto;gap:4px 16px;
  align-items:start;padding:14px 0;border-bottom:1px solid var(--linia)}
.su-nazwa{font-weight:600;min-width:0}
.su-nazwa small{display:block;font-weight:400;color:var(--tekst-2);
  font-size:14px;margin-top:2px}
.su-stan{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  font-size:15px;line-height:24px;white-space:nowrap}
.su-kropka{width:10px;height:10px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--tekst-3) 55%,var(--tlo))}
.su-dziala .su-kropka{background:var(--zielony)}
.su-utrudnienia .su-kropka{background:var(--czerwony)}
.su-dziala.su-stan{color:var(--zielony)}
.su-utrudnienia.su-stan{color:var(--czerwony)}
.su-nie_sprawdzono.su-stan{color:var(--tekst-2);font-weight:400}
.su-notka{margin:16px 0 0;color:var(--tekst-2);font-size:14px;max-width:62ch}
.su-teraz{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;
  color:var(--tekst-2);font-size:14px}
.su-noce{list-style:none;margin:0 0 12px;padding:0;display:grid;
  grid-template-columns:repeat(30,1fr);gap:3px}
.su-dzien{display:block;height:34px;border-radius:3px;
  background:color-mix(in srgb,var(--tekst-3) 55%,var(--tlo))}
.su-dzien.su-dziala{background:var(--zielony)}
.su-dzien.su-utrudnienia{background:var(--czerwony)}
.su-sr{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.su-legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px 20px;color:var(--tekst-2);font-size:13px}
.su-legenda li{display:inline-flex;align-items:center;gap:6px}
.su-legenda .su-dzien{width:12px;height:12px}
@media (max-width:640px){.su-noce{gap:2px}.su-dzien{height:26px}}
/* Przegląd wyglądu 16.10: pomoc i stan bez reklamowego bohatera.
   Niższy tytuł, poświata gaśnie ku dołowi zamiast urywać się linią. */
.ns-wsparcie{padding-bottom:clamp(40px,5vw,72px)}
.ns-wsparcie::before{-webkit-mask-image:linear-gradient(var(--tekst) 55%,transparent);
  mask-image:linear-gradient(var(--tekst) 55%,transparent)}
.ns-wsparcie h1{font-size:clamp(38px,4.6vw,60px);max-width:none}
.su-baner{display:flex;gap:16px;align-items:flex-start;margin-top:28px;
  max-width:720px;padding:20px 24px;border-radius:20px;background:var(--karta);
  border:1px solid var(--linia);box-shadow:var(--cien)}
.su-baner>.su-kropka{width:14px;height:14px;margin-top:7px}
.su-baner.su-dziala{background:var(--zielony-tlo);border-color:transparent}
.su-baner-tytul{margin:0;font:700 22px/1.3 var(--wysw);color:var(--tekst)}
.su-baner-opis{margin:6px 0 0;color:var(--tekst-2);max-width:60ch}
.su-baner .su-teraz{margin:10px 0 0}
.ns-wsparcie .ns-akcje{margin-top:24px}
.ws-sekcja{padding:clamp(48px,6vw,80px) 0}
.ws-sekcja h2{font-size:clamp(28px,3.2vw,42px)}
.ws-sekcja .sekcja-glowa{margin-bottom:clamp(24px,3vw,40px)}
.ws-sekcja .sekcja-glowa .g-znacznik{display:none}
.ws-sekcja .sekcja-glowa .sekcja-tytul h2{margin-top:0}
.ns-wsparcie+.ws-sekcja{padding-top:clamp(16px,2vw,32px)}
.pt-siatka{align-items:start}
.ns-wsparcie .ns-spis ul{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.su-pusto{margin:0 0 12px;color:var(--tekst-2);font-size:15px}
.su-os{display:flex;justify-content:space-between;margin:-4px 0 12px;
  color:var(--tekst-3);font-size:13px}
.pt-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pt-temat{min-width:0;padding:22px 26px 10px;border-radius:20px;
  background:var(--karta);border:1px solid var(--linia);scroll-margin-top:96px}
.pt-temat h3{margin:0 0 10px;font:700 21px/1.3 var(--wysw)}
.pt-temat .faq{border-top:1px solid var(--linia)}
.pt-temat .faq details{border-bottom-color:var(--linia)}
.pt-temat .faq details:last-child{border-bottom:0}
.pt-temat .faq summary{align-items:flex-start;padding:10px 0;line-height:1.45}
.pt-temat .faq summary::before{margin-top:3px;flex:none}
.pt-temat .faq details p{margin-left:24px}
@media (max-width:860px){.pt-siatka{grid-template-columns:1fr}
  .pt-temat{padding:18px 18px 6px}}
/* Stan usług, przegląd wyglądu 16.10 runda 3: werdykt na całą szerokość
   z licznikami, niesprawdzone w jednej ramce, puste noce jako kontur. */
.su-baner{max-width:none;align-items:center;padding:24px 28px;gap:20px}
.su-baner>.su-kropka{align-self:flex-start;margin-top:9px}
.su-baner-tresc{flex:1 1 auto;min-width:0}
.su-baner.su-czesc{background:color-mix(in srgb,var(--zielony-tlo) 70%,var(--karta));
  border:1px solid color-mix(in srgb,var(--zielony) 22%,transparent)}
.su-baner-pomoc{margin:12px 0 0;font-size:15px;color:var(--tekst-2)}
.su-baner-pomoc a{font-weight:600;white-space:nowrap}
.su-liczniki{display:flex;gap:12px;flex:none}
.su-liczniki p{margin:0;min-width:128px;padding:14px 18px;border-radius:16px;
  background:var(--karta);border:1px solid var(--linia);display:grid;gap:2px}
.su-liczniki b{font:700 30px/1.1 var(--wysw);font-variant-numeric:tabular-nums}
.su-liczniki span{font-size:13px;color:var(--tekst-2)}
.su-wiersz{align-items:center}
.su-czeka{margin-top:20px;padding:18px 22px;border-radius:16px;
  border:1px dashed color-mix(in srgb,var(--tekst-3) 60%,var(--tlo))}
.su-czeka-tytul{display:flex;align-items:center;gap:10px;margin:0;
  font-weight:600}
.su-czeka-tytul b{display:inline-grid;place-items:center;min-width:26px;
  height:26px;padding:0 8px;border-radius:13px;background:var(--linia-slaba);
  font-size:14px;font-variant-numeric:tabular-nums}
.su-czeka-opis{margin:6px 0 12px 20px;color:var(--tekst-2);font-size:15px}
.su-czeka-lista{list-style:none;margin:0 0 0 20px;padding:0;display:flex;
  flex-wrap:wrap;gap:8px}
.su-czeka-lista li{padding:6px 12px;border-radius:999px;font-size:14px;
  background:var(--karta);border:1px solid var(--linia);color:var(--tekst)}
.su-dzien{box-sizing:border-box;background:transparent;
  border:1px dashed color-mix(in srgb,var(--tekst-3) 70%,var(--tlo))}
.su-dzien.su-dziala{border:0}
.su-dzien.su-utrudnienia{border:0}
.su-kropka{background:var(--tekst-3)}
@media (max-width:760px){.su-baner{flex-wrap:wrap;padding:20px}
  .su-liczniki{width:100%}.su-liczniki p{flex:1 1 0;min-width:0}
  .su-czeka{padding:16px}.su-czeka-opis,.su-czeka-lista{margin-left:0}}
/* Centrum pomocy, przegląd wyglądu 16.10 runda 3: karty w kolumnach
   bez dziur, znak tematu, strzałka zamiast plusa i kreski. */
.pt-siatka{display:block;columns:2;column-gap:20px}
.pt-temat{break-inside:avoid;margin:0 0 20px;display:block}
.pt-temat h3{display:flex;align-items:center;gap:12px}
.pt-ikona{display:inline-grid;place-items:center;width:36px;height:36px;
  flex:none;border-radius:11px;background:var(--akcent-tlo);color:var(--akcent)}
.pt-temat .faq summary{justify-content:space-between}
.pt-temat .faq summary::before{display:none}
.pt-temat .faq summary::after{content:"";flex:none;width:8px;height:8px;
  margin:6px 4px 0 12px;border-right:2px solid var(--tekst-3);
  border-bottom:2px solid var(--tekst-3);transform:rotate(45deg);
  transition:transform .2s ease}
.pt-temat .faq details[open] summary::after{transform:rotate(-135deg);
  margin-top:10px}
.pt-temat .faq details p{margin-left:0}
@media (prefers-reduced-motion:reduce){.pt-temat .faq summary::after{transition:none}}
@media (max-width:860px){.pt-siatka{columns:1}}
/* Pomoc i stan, przegląd wyglądu 16.10 runda 4: spokojny błękit zamiast
   korala (koral na stronie stanu czyta się jak awaria), ramka werdyktu
   niebieska przy niepełnym sprawdzeniu, jedna ramka zamiast pustych nocy,
   szukanie w pomocy i słownik w proporcji 1:2. */
.ns-wsparcie .g-znacznik{background:var(--akcent-tlo);color:var(--akcent-mocny)}
.ns-wsparcie::before{background-image:
  radial-gradient(40% 48% at 84% 30%,color-mix(in srgb,var(--akcent-jasny) 18%,transparent),transparent 70%),
  radial-gradient(36% 46% at 64% 72%,color-mix(in srgb,var(--akcent-jasny) 16%,transparent),transparent 72%)}
.su-baner.su-czesc{background:color-mix(in srgb,var(--akcent-tlo) 70%,var(--karta));
  border:1px solid color-mix(in srgb,var(--akcent) 20%,transparent)}
.su-baner.su-czesc>.su-kropka{background:var(--zielony)}
.su-czeka{border-style:solid;border-color:var(--linia);background:color-mix(in srgb,var(--karta) 60%,transparent)}
@media (max-width:760px){.su-baner{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px}.su-baner>.su-kropka{margin-top:8px}.su-liczniki{grid-column:1/-1}}
.su-liczniki span{font-size:14px}
.su-noce-pusto{display:flex;gap:14px;align-items:flex-start;padding:20px 24px;
  border-radius:16px;background:var(--karta);border:1px solid var(--linia)}
.su-noce-pusto>.su-kropka{margin-top:7px}
.su-noce-pusto p{margin:0;color:var(--tekst-2)}
.su-noce-pusto b{display:block;margin-bottom:2px;color:var(--tekst);font-weight:600}
.pt-szukaj{margin:24px 0 8px;max-width:560px}
.pt-szukaj input{box-sizing:border-box;width:100%;min-height:52px;padding:0 18px;
  border-radius:14px;border:1px solid var(--linia);background:var(--karta);
  color:var(--tekst);font:400 17px/1.4 var(--tresc)}
.pt-szukaj input:focus-visible{outline:3px solid color-mix(in srgb,var(--akcent) 45%,transparent);
  outline-offset:2px;border-color:var(--akcent)}
.pt-szukaj-wynik{margin:8px 0 0;color:var(--tekst-2)}
.pt-szukaj-wynik:empty{display:none}
.pt-temat[hidden],.pt-temat details[hidden],.pt-slownik li[hidden]{display:none}
@media (min-width:761px){.pt-slownik li{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:4px 32px}}
.pt-slownik li>span:not(.mono){text-wrap:pretty}
.pt-szukaj{position:relative;margin:28px 0 4px;max-width:640px}
.pt-lupa{position:absolute;left:18px;top:16px;color:var(--tekst-3);pointer-events:none}
.pt-szukaj input{min-height:56px;padding-left:50px;font-size:18px;
  box-shadow:var(--cien)}
.pt-slownik li>span:not(.mono){font-size:16px;line-height:1.55}
.pt-slownik li>b{font-size:16px}
/* Stan usług, przegląd wyglądu runda 7: większa kropka werdyktu, „30/30”
   mieści się w kaflu na telefonie, data w środku paska, noce z problemem
   z jednym zdaniem, co nie przeszło. */
.su-baner>.su-kropka{width:18px;height:18px;margin-top:6px}
.su-os span:nth-child(2){text-align:center}
.su-problemy{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;
  color:var(--tekst-2);font-size:15px}
.su-problemy li{display:flex;gap:10px;align-items:baseline}
.su-problemy .su-dzien{flex:none;width:10px;height:10px;border-radius:3px}
@media (max-width:760px){.su-liczniki{gap:8px}
  .su-liczniki p{padding:12px 12px}.su-liczniki b{font-size:24px}}
.su-liczniki span{overflow-wrap:break-word;hyphens:auto}
/* Runda 8: w ciemnym motywie zielone paski nocy krzyczały głośniej niż
   werdykt; ciszej, ale dalej czytelnie odróżnione od czerwonej nocy. */
@media (prefers-color-scheme:dark){
  .su-noce .su-dzien.su-dziala{background:color-mix(in srgb,var(--zielony) 62%,var(--tlo))}}
/* Runda 9: na telefonie trzeci kafel (noce) w osobnym wierszu, żeby
   etykiety nie łamały się na trzy linie. */
@media (max-width:760px){.su-liczniki{flex-wrap:wrap}
  .su-liczniki p:nth-child(3){flex:1 1 100%}}

/* Kontakt (19.10, `strona_www/kontakt.py`): formularz na karcie po lewej,
   adresy, dane firmy i „Co dalej” po prawej. Pola jak przy rejestracji. */
.kt-naglowek{padding-bottom:12px}
.kt-sekcja{padding-top:8px}
.kt-uklad{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:40px;align-items:start}
.kt-lewa{min-width:0}
.kt-formularz,.kt-wyslane{background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);padding:32px;box-shadow:var(--cien-karta)}
.kt-dwa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.kt-pole{margin:0 0 20px}
.kt-pole>label:not(.pole-zgody){display:block;font-weight:600;font-size:15px;
  margin:0 0 6px}
.kt-opcja{font-weight:400;color:var(--tekst-3)}
.kt-formularz input:not([type=checkbox]),.kt-formularz select,
.kt-formularz textarea{width:100%;min-height:52px;padding:12px 14px;font:inherit;
  font-size:17px;border:1px solid var(--linia-mocna);border-radius:12px;
  background:var(--tlo);color:var(--tekst)}
.kt-formularz textarea{min-height:180px;resize:vertical;line-height:1.5}
.kt-formularz select{appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tekst-3) 50%),
    linear-gradient(135deg,var(--tekst-3) 50%,transparent 50%);
  background-position:calc(100% - 22px) 23px,calc(100% - 16px) 23px;
  background-size:6px 6px;background-repeat:no-repeat}
.kt-formularz input:focus,.kt-formularz select:focus,
.kt-formularz textarea:focus{outline:2px solid var(--akcent);outline-offset:1px;
  border-color:var(--akcent)}
.kt-pod{margin:6px 0 0;font-size:14px;color:var(--tekst-3)}
.kt-blad{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--czerwony)}
.kt-zly input,.kt-zly select,.kt-zly textarea{border-color:var(--czerwony)}
.kt-alert{margin:0 0 24px;padding:14px 16px;border-radius:12px;
  background:var(--czerwony-tlo);color:var(--tekst);border:1px solid
  color-mix(in srgb,var(--czerwony) 40%,transparent)}
.kt-alert p{margin:4px 0 0}
.kt-formularz .pole-zgody{display:flex;gap:12px;align-items:flex-start;
  font-size:15px;line-height:1.5;color:var(--tekst-2);cursor:pointer}
.kt-formularz .pole-zgody input{width:20px;height:20px;flex:none;margin:2px 0 0;
  accent-color:var(--akcent)}
.kt-formularz .pole-zgody a{color:var(--tekst)}
.kt-formularz button{margin-top:4px;cursor:pointer}
.kt-pulapka{position:absolute!important;left:-10000px;top:auto;width:1px;
  height:1px;overflow:hidden}
/* Pole-pułapka poza ekranem też 16 px: przegląd ekranów (pole16, 20.10). */
.kt-pulapka input{font-size:16px}
.kt-rodo{margin:18px 4px 0;color:var(--tekst-3);font-size:14px;line-height:1.55}
.kt-rodo summary{cursor:pointer;font-weight:600;color:var(--tekst-2);
  min-height:44px;display:flex;align-items:center}
.kt-rodo p{margin:4px 0 0}
.kt-rodo a{color:var(--tekst-2)}
.kt-wyslane{text-align:left}
.kt-wyslane h2{font-size:clamp(24px,3vw,32px);margin:16px 0 8px;letter-spacing:-.02em}
.kt-wyslane p{color:var(--tekst-2);margin:0 0 24px;max-width:52ch}
.kt-znak{display:inline-flex;width:48px;height:48px;border-radius:50%;
  align-items:center;justify-content:center;background:var(--zielony-tlo);
  color:var(--zielony)}
/* Lista oczekujących (decyzja 3 z 27.10): karta formularza kontaktu na
   stronie startu, przed dniem startu kont. */
.lista-oczekujacych,.lista-zapisano{margin:28px 0 0;scroll-margin-top:96px}
.lo-tytul{font-size:clamp(22px,2.4vw,26px);margin:0 0 6px;letter-spacing:-.01em}
.lo-opis{color:var(--tekst-2);margin:0 0 20px;max-width:52ch}
.lo-wypisz{margin-top:16px}
.lo-dalej{margin-top:20px}
@media (max-width:520px){.lista-oczekujacych,.lista-zapisano{padding:22px 18px}}
.kt-bok{display:flex;flex-direction:column;gap:24px;min-width:0}
.kt-karta{background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);padding:28px;box-shadow:var(--cien-karta)}
.kt-karta h2{font-size:22px;margin:0 0 14px;letter-spacing:-.01em}
.kt-karta h3{font:500 12px/1.4 var(--tresc);text-transform:uppercase;
  letter-spacing:.06em;color:var(--tekst-3);margin:24px 0 8px}
.kt-adresy{list-style:none;margin:0;padding:0}
.kt-adresy li{display:grid;gap:2px;padding:12px 0;border-top:1px solid
  var(--linia-slaba)}
.kt-adresy li:first-child{border-top:0;padding-top:0}
.kt-rodzaj{font-size:14px;color:var(--tekst-3)}
.kt-adresy a{font-weight:600;color:var(--tekst);overflow-wrap:anywhere}
.kt-centrum{margin:14px 0 0;padding:14px 16px;border-radius:12px;
  background:var(--karta-2);font-size:15px;color:var(--tekst-2)}
.kt-centrum a{font-weight:600;color:var(--tekst)}
.kt-firma{grid-template-columns:minmax(0,1fr);margin:0;padding:4px 16px;
  background:var(--karta-2)}
.kt-firma dd a{color:var(--tekst)}
.kt-dalej{margin-top:0}
@media (max-width:960px){.kt-uklad{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:600px){.kt-dwa{grid-template-columns:minmax(0,1fr)}
  .kt-formularz,.kt-wyslane,.kt-karta{padding:20px}
  .kt-formularz .btn{width:100%}}
/* 320 px: druga część tytułu („odpowie człowiek.”) idzie razem i przy 38 px
   wychodziła za ekran o kilka pikseli. */
@media (max-width:380px){.kt-naglowek h1{font-size:32px}}
/* Kontakt, runda 2 recenzji (19.10): „Co dalej” w nagłówku obok tytułu,
   klauzula RODO w karcie formularza ze strzałką, Centrum pomocy jako
   odnośnik z tytułem, dane firmy bez ramki w ramce. */
.kt-naglowek .ns-obok{align-self:end}
.kt-dalej-glowa{margin:0;max-width:440px;margin-left:auto}
.kt-dalej-bok{display:none}
.kt-dalej li{align-items:baseline}
.kt-dalej li::before{font-size:16px}
@media (max-width:960px){.kt-dalej-glowa,.kt-naglowek .ns-obok{display:none}
  .kt-dalej-bok{display:block}}
.kt-formularz .kt-rodo{margin:22px 0 0;padding-top:12px;
  border-top:1px solid var(--linia-slaba)}
.kt-rodo summary{list-style:none;gap:10px}
.kt-rodo summary::-webkit-details-marker{display:none}
.kt-strzalka{width:8px;height:8px;flex:none;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);
  transition:transform var(--ruch-krotki) var(--krzywa)}
.kt-rodo[open] .kt-strzalka{transform:rotate(45deg)}
a.kt-centrum{display:grid;gap:2px;text-decoration:none;color:var(--tekst-2)}
a.kt-centrum b{color:var(--tekst)}
@media (hover:hover) and (pointer:fine){a.kt-centrum:hover b{text-decoration:underline}}
.kt-firma{border:0;background:none;padding:0;border-radius:0}
.kt-firma div{border-top:1px solid var(--linia-slaba);padding:10px 0}
.kt-firma div:first-child{border-top:0;padding-top:0}
.kt-wyslane .kt-znak{background:color-mix(in srgb,var(--zielony) 22%,var(--karta))}
@media (max-width:600px){.kt-dalej{padding:20px}}
.kt-firma-brak{margin:0;color:var(--tekst-2);font-size:14px;line-height:1.5}
.kt-obszar{margin:12px 0 0;color:var(--tekst-2);font-size:14px;line-height:1.5}

/* ===== Na start: pięć prac od początku do końca (P0-START, 23.10,
   `strona_www/procesy`). Wygląd kart mapy „Jeden Torin”, własne klasy,
   bo test mapy liczy jej karty. Stan z prób na żywo (`strona_www/proby`). */
.ps{background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--akcent-tlo) 40%,transparent) 50%,transparent)}
/* F4-E7 (recenzja ze zrzutów): bez ~200 px pustki nad sekcją (górny odstęp
   sekcji dokładał się do dolnego odstępu pasa wyżej). */
.g-sekcja.ps{padding-top:clamp(24px,3vw,40px);scroll-margin-top:72px}
/* Sześć ścieżek siatki: trzy karty w rzędzie, dwie ostatnie wyśrodkowane,
   więc tytuł mieści się w dwóch wierszach, a nie w czterech. */
.ps-siatka{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.ps-karta{grid-column:span 2;display:flex;flex-direction:column;gap:16px;
  padding:0 0 20px;overflow:hidden;
  border-radius:22px;background:var(--karta);border:1px solid var(--linia-slaba);
  box-shadow:var(--cien-karta)}
.ps-karta:nth-child(4){grid-column:2 / span 2}
.ps-znaki{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:14px;padding:18px 22px;background:var(--akcent-tlo);
  border-bottom:1px solid var(--linia-slaba)}
.ps-czeka .ps-znaki{background:color-mix(in srgb,var(--linia-slaba) 55%,var(--karta))}
.ps-ikona{grid-column:1;grid-row:1;display:inline-grid;place-items:center;width:52px;height:52px;
  border-radius:16px;background:var(--karta);color:var(--akcent);
  box-shadow:var(--cien-karta)}
.ps-czeka .ps-ikona{color:var(--tekst-2)}
.ps-plakietka{grid-column:3;grid-row:1;display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--r-pastylka);background:var(--karta);color:var(--akcent);
  font:700 11.5px/1 var(--tresc);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.ps-wkrotce{color:var(--tekst-2)}
.ps-sciezka{grid-column:2;grid-row:1;position:relative;display:flex;
  justify-content:space-between;align-items:center;max-width:110px;height:12px}
.ps-sciezka::before{content:"";position:absolute;left:4px;right:4px;top:50%;
  height:2px;transform:translateY(-50%);background:var(--linia-mocna)}
.ps-sciezka i{position:relative;width:10px;height:10px;border-radius:50%;
  background:var(--akcent)}
.ps-czeka .ps-sciezka i{background:var(--tekst-3)}
.ps-glowa{padding:0 22px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* Tytuły bez wyrównywania wierszy i z jedną wysokością (dwa wiersze),
   więc kroki zaczynają się na jednej linii w rzędzie. */
.ps-glowa h3{margin:0;font:700 20px/1.25 var(--wysw);letter-spacing:-.01em;
  color:var(--tekst);text-wrap:pretty}
@media (min-width:641px){.ps-glowa h3{min-height:2.5em}}
.ps-kroki{margin:0 22px;padding:14px 0 0 20px;border-top:1px solid var(--linia-slaba);
  display:grid;gap:7px;font-size:15px;line-height:1.45;color:var(--tekst-2)}
.ps-kroki li{text-wrap:wrap}
.ps-powod{margin:0 22px;font-size:14px;line-height:1.45;color:var(--tekst-3)}
.ps-czeka h3{color:var(--tekst-2)}
.ps-pod{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;
  max-width:760px;margin:28px auto 0;text-align:center;font-size:15px;color:var(--tekst-3)}
@media (max-width:1020px){.ps-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ps-karta,.ps-karta:nth-child(4){grid-column:auto}
  .ps-karta:last-child:nth-child(odd){grid-column:1 / -1}}
@media (max-width:640px){.ps-siatka{grid-template-columns:minmax(0,1fr);gap:12px}
  .ps-karta:last-child:nth-child(odd){grid-column:auto}
  .ps-znaki{padding:14px 18px}.ps-glowa{padding:0 18px}
  .ps-kroki{margin:0 18px}.ps-powod{margin:0 18px}}
.ps-licznik{display:flex;align-items:center;justify-content:center;gap:14px;
  max-width:760px;margin:0 auto 32px;text-align:left}
.ps-licznik b{font:800 56px/1 var(--wysw);letter-spacing:-.03em;color:var(--akcent);
  font-variant-numeric:tabular-nums}
.ps-licznik span{font-size:16px;line-height:1.45;color:var(--tekst-2);max-width:46ch}
.ps-sciezka.urwana::before{background:none;border-top:2px dashed var(--linia-mocna);height:0}
.ps-sciezka.urwana i{background:var(--karta);border:2px solid var(--tekst-3)}
.ps-sciezka.urwana i:last-child{border-style:dashed}
@media (max-width:640px){.ps-licznik b{font-size:44px}.ps-licznik span{font-size:15px}}
/* F4-E7 runda 3: licznik „3 z 5” z paskiem pięciu prac; tytuły kart bez
   zapasu wysokości; ciemny pas karty w barwie palety, nie granatu. */
.ps-licznik{align-items:center;gap:22px;max-width:820px}
.ps-licznik-liczba{margin:0;display:flex;align-items:baseline;gap:8px;flex:0 0 auto}
.ps-licznik-liczba b{font:800 76px/1 var(--wysw);letter-spacing:-.04em;color:var(--akcent);font-variant-numeric:tabular-nums}
.ps-licznik-liczba span{font:700 28px/1 var(--wysw);color:var(--tekst-2);max-width:none}
.ps-licznik-prawo{display:grid;gap:10px;min-width:0}
.ps-licznik-prawo>span:last-child{font-size:16px;line-height:1.45;color:var(--tekst-2);max-width:46ch}
.ps-licznik-pasek{display:flex;gap:6px}
.ps-licznik-pasek i{display:block;width:44px;height:10px;border-radius:5px;background:var(--linia)}
.ps-licznik-pasek i.jest{background:var(--akcent)}
@media (min-width:641px){.ps-glowa h3{min-height:0}}
@media (max-width:640px){.ps-licznik{flex-direction:column;align-items:flex-start;gap:12px}
  .ps-licznik-liczba b{font-size:60px}.ps-licznik-pasek i{width:36px}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ps-znaki{background:color-mix(in srgb,var(--akcent) 14%,var(--karta))}
  :root:not([data-theme="light"]) .ps-ikona{background:color-mix(in srgb,var(--tekst) 10%,var(--karta))}}
:root[data-theme="dark"] .ps-znaki{background:color-mix(in srgb,var(--akcent) 14%,var(--karta))}
:root[data-theme="dark"] .ps-ikona{background:color-mix(in srgb,var(--tekst) 10%,var(--karta))}
/* Runda 3: „Wkrótce” krócej niż prace, które działają: tytuł i powód. */
.ps-czeka .ps-kroki{display:none}
.ps-czeka{box-shadow:none}
.ps-czeka .ps-glowa h3{font-size:18px}
/* F4-E8: miniatura pracy w pasie karty zamiast ścieżki kropek. */
.ps-mini{grid-column:2;grid-row:1;justify-self:start;display:grid;gap:5px;
  width:112px;padding:8px 10px;border-radius:12px;background:var(--karta);
  box-shadow:var(--cien-karta)}
.ps-mini i,.ps-mini b{display:block}
.ps-mini-alert i,.ps-mini-lista i{height:7px;border-radius:4px;background:var(--linia)}
.ps-mini-alert i:nth-child(2){width:80%}.ps-mini-alert i:nth-child(3){width:60%}
.ps-mini-alert i.uwaga{background:var(--koral);width:90%}
.ps-mini-raport .g{height:6px;width:55%;border-radius:3px;background:var(--tekst-3)}
.ps-mini-raport b{display:flex;align-items:flex-end;gap:5px;height:22px}
.ps-mini-raport b i{flex:1;border-radius:3px 3px 0 0;background:var(--akcent)}
.ps-mini-raport b i:nth-child(1){height:35%}.ps-mini-raport b i:nth-child(2){height:55%}
.ps-mini-raport b i:nth-child(3){height:48%}.ps-mini-raport b i:nth-child(4){height:85%}
.ps-mini-lista i{position:relative;margin-left:14px}
.ps-mini-lista i::before{content:"";position:absolute;left:-14px;top:-1px;width:9px;height:9px;
  border-radius:3px;border:1.5px solid var(--linia-mocna)}
.ps-mini-lista i.ok::before{background:var(--akcent);border-color:var(--akcent)}
.ps-mini-przedpo{grid-template-columns:1fr auto 1fr;align-items:center}
.ps-mini-przedpo i{height:22px;border-radius:5px;background:var(--linia)}
.ps-mini-przedpo i.po{background:var(--akcent-tlo);border:1.5px solid var(--akcent)}
.ps-mini-przedpo b{width:10px;height:2px;background:var(--tekst-3)}
.ps-mini-rozmowa i{height:10px;width:70%;border-radius:6px;background:var(--linia)}
.ps-mini-rozmowa i.ty{justify-self:end;width:55%;background:var(--akcent)}
.ps-mini.urwana{background:transparent;box-shadow:none;border:1.5px dashed var(--linia-mocna)}
.ps-mini.urwana i,.ps-mini.urwana b i,.ps-mini.urwana i.ty,.ps-mini.urwana i.uwaga,
.ps-mini.urwana i.po{background:var(--linia-slaba);border-color:var(--linia)}
.ps-mini.urwana i::before{border-color:var(--linia)}
/* F4-E8: przy 360 px i węższych miniatura pod znakami, żeby plakietka
   „Działa dziś” mieściła się w pasie karty (przegląd 320 px). */
@media (max-width:400px){.ps-znaki{grid-template-columns:auto 1fr}
  .ps-plakietka{grid-column:2;justify-self:end}
  .ps-mini{grid-column:1 / -1;grid-row:2;width:100%;max-width:180px}}

/* ================================================ F4-E9 (26.10): telefon
 * Kopia reguły z `produkt/www/wzornik.css` (aplikacja i portal). Kontrolki ≥ 44 × 44 px i pola ≥ 16 px na każdym ekranie (zasady
 * `dotyk44` i `pole16` w `testy.przeglad_ekranow`). Wysokość z
 * `!important`, bo kilkadziesiąt reguł ekranów zwęża przyciski do 32–36 px
 * na komputerze; na telefonie palec jest ten sam na każdym ekranie.
 * Odnośnik w treści zostaje odnośnikiem (reguła 24 px). */
@media (max-width: 640px) {
  .btn, summary, select, [role=tab], nav a, .dolny-pasek a,
  :is(input:not([type]), input[type=text], input[type=email],
      input[type=number], input[type=search], input[type=tel],
      input[type=url], input[type=password], input[type=date],
      input[type=time], input[type=datetime-local], input[type=month]) {
    min-height: 44px !important; }
  .btn:not(:has(> span, > b)):has(> svg), .btn.ikona-tylko,
  .obok > a.btn, .menu-eksportu > summary.btn { min-width: 44px !important;
    justify-content: center; }
  :where(summary:not(.btn)) { display: flex; align-items: center;
    gap: var(--o-2); }
  :is(input:not([type]), input[type=text], input[type=email],
      input[type=number], input[type=search], input[type=tel],
      input[type=url], input[type=password], input[type=date],
      input[type=time], input[type=datetime-local], input[type=month]),
  select, textarea { font-size: 16px !important; }
  :where(label:has(> input[type=checkbox], > input[type=radio])) {
    min-height: 44px; display: flex; align-items: center; gap: var(--o-2); }
}

/* F4-E9 (26.10, druga część): reszta kontrolek z pomiaru 390 px. Każdy
 * przycisk (także ikonowy ⋯, ↑, ↓, ←, →, próbki barw, filtry, pastylki),
 * rozwijany wiersz i pole ma co najmniej 44 × 44 px. Przycisk wyglądający
 * jak odnośnik w zdaniu (`.link`, `.link-btn`, `.link-przycisk`,
 * `.sc-link`) trzyma regułę odnośnika (24 px). */
@media (max-width: 640px) {
  button:not(.link, .link-btn, .link-przycisk, .sc-link), .btn, summary,
  th.sortowalny, .sm-miesiace a,
  input:not([type=checkbox], [type=radio], [type=hidden]) {
    min-height: 44px !important; }
  button:not(.link, .link-btn, .link-przycisk, .sc-link), .btn, summary,
  th.sortowalny, .sm-miesiace a { min-width: 44px !important; }
  :where(button:not(.link, .link-btn, .link-przycisk, .sc-link), .sm-miesiace a) {
    display: inline-flex; align-items: center; justify-content: center; }
  .ws-wybor-cel { min-width: 44px; min-height: 44px; }
}

/* F4-E9: w 320 px ostatnie słowo tytułu w gradiencie („wytłumaczy.”,
   „marketingu.”) wychodziło za margines o kilka pikseli; liczby
   dokumentacji też. */
@media (max-width:379px){
  h2:has(.g-akcent){font-size:min(34px,10vw)!important}
  h1:has(.g-akcent){font-size:min(38px,11vw)!important}
  dt.liczba{overflow-wrap:anywhere;font-size:min(1em,9vw)}
}

/* ================================================ F4-E12 (27.10)
 * Strony prawne (OCENA-CALOSCI P10 a): dane usługodawcy w bohaterze pod
 * tytułem, zamiast pustej lewej połowy obok ilustracji; ilustracja mniejsza,
 * na telefonie bez niej (stała przed treścią i nic nie mówiła). */
.prawna-dane{margin-top:28px;max-width:720px}
.prawna-dane .robocza-znak{margin-bottom:16px}
.prawna-dane .uslugodawca{margin:0;box-shadow:var(--cien-karta)}
.naglowek-strony:has(.prawna-dane) .ns-obok>.il-naglowek{max-width:340px}
.naglowek-strony:has(.prawna-dane) .ns-siatka{align-items:start}
@media (max-width:900px){
  .naglowek-strony:has(.prawna-dane) .ns-obok{display:none}}
/* Cichy przycisk (cennik: jeden główny w wierszu wyróżnionym, reszta jako
   odnośnik ze strzałką zamiast pięciu jednakowych ramek). */
.btn.drugi.cichy{background:transparent;border-color:transparent;
  box-shadow:none;color:var(--tekst);padding-inline:6px;
  text-decoration:none}
.btn.drugi.cichy::after{content:"\2192";margin-left:2px;
  display:inline-block;transition:transform var(--ruch-krotki) var(--krzywa)}
@media (hover:hover) and (pointer:fine){
  .btn.drugi.cichy:hover{background:transparent;border-color:transparent}
  .btn.drugi.cichy:hover::after{transform:translateX(3px)}}
/* Pas „Torin pracuje w” na telefonie (OCENA-CALOSCI, główna PL i EN:
   „ucięty rząd chipów”): zamiast jednego rzędu przewijanego w bok, ściana
   samych znaków w kilku równych rzędach; nazwa zostaje dla czytnika. */
/* r1: same znaki bez nazw były nieczytelne; dwie równe kolumny ze znakiem
   i nazwą. */
@media (max-width:760px){
  .g-pas .g-marki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;margin:0;padding:0;gap:8px;
    -webkit-mask-image:none;mask-image:none}
  .g-pas .g-marka{min-width:0;font-size:13.5px;padding-right:10px}
  .g-pas .g-marka>span:last-child{min-width:0;overflow-wrap:anywhere}}
/* Nota o znakach w stopce: jedno zdanie, lista właścicieli zwinięta
   (OCENA-CALOSCI P10: „ściana znaków towarowych”). */
details.znaki-nota{columns:auto}
details.znaki-nota>summary{cursor:pointer;list-style:none}
details.znaki-nota>summary::-webkit-details-marker{display:none}
.znaki-wiecej{text-decoration:underline;text-decoration-color:var(--linia-mocna);
  text-underline-offset:3px;white-space:nowrap}
.znaki-wiecej::after{content:"\00a0\25BE"}
details.znaki-nota[open] .znaki-wiecej::after{content:"\00a0\25B4"}
details.znaki-nota>p{margin:12px 0 0;columns:2 34ch;column-gap:48px}
/* Ciemny motyw (recenzja r1, wszystkie strony: „ilustracja w jasnym pudle”):
   obraz przygaszony, a jego jasne tło wygasa ku krawędziom do koloru karty,
   więc postać stoi w świetle zamiast w jasnym prostokącie. */
@media (prefers-color-scheme:dark){
  .il-sekcji:not(.il-rola){background:var(--karta);
    border-color:var(--linia-slaba)}
  .il-sekcji:not(.il-rola) img{filter:brightness(.7) saturate(.9);
    -webkit-mask-image:radial-gradient(ellipse 70% 68% at 50% 46%,
      var(--atrament) 52%,transparent 100%);
    mask-image:radial-gradient(ellipse 70% 68% at 50% 46%,
      var(--atrament) 52%,transparent 100%)}}
/* Telefon (recenzja r1): skróty pod bohaterem („Przy pracy”, „Granice
   zgód”) ucięte na prawej krawędzi; zawijają się w rzędy zamiast przewijać
   w bok. Spis paragrafów zostaje przewijany, ale z wygaszeniem przy krawędzi,
   żeby było widać, że ciągnie się dalej. Kod w dokumentacji zawija się. */
@media (max-width:760px){
  .ns-spis ul{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0 4px}
  .spis ol{-webkit-mask-image:linear-gradient(90deg,var(--atrament) 82%,transparent);
    mask-image:linear-gradient(90deg,var(--atrament) 82%,transparent);
    padding-right:48px}
  pre.kod{white-space:pre-wrap;overflow-wrap:anywhere}
  pre.kod>code{display:inline;padding-right:0}}
/* Cennik (r2): ramka „Większe zespoły?” na pełną szerokość tabeli, nie na
   2/3 z pustym pasem; na telefonie kwota i „netto” w jednej linii. */
.wieksze{max-width:none;display:flex;flex-wrap:wrap;gap:4px 24px;
  align-items:baseline;background:var(--karta)}
.wieksze h3{flex:none}
.wieksze p{flex:1 1 420px}
/* r3: „+ VAT where applicable” w jednej linii wychodziło za kartę na
   telefonie; kwota łamie się, a dopisek zawija w swojej kolumnie. */
@media (max-width:760px){
  table.cennik td.kwota{white-space:normal;min-width:0}
  table.cennik td.kwota>.szept{white-space:normal}}
/* F4-K6 (F4-E12 16.4 p. 1): ilustracja z wersją bez tła (`ilustracje.
   CIEMNE`) w ciemnym motywie stoi wprost na karcie, bez przygaszenia
   i bez wygaszania krawędzi; reszta zostaje przy dawnym wygaszeniu. */
.il-sekcji picture{display:contents}
@media (prefers-color-scheme:dark){
  .il-sekcji.il-alfa{background:var(--karta)}
  .il-sekcji.il-alfa img{filter:none;-webkit-mask-image:none;mask-image:none}}
/* F4-K6 (F4-E12 16.4 p. 4: „kolumna tekstu stron prawnych węższa od
   strony”, recenzja r0: „prawa strona pusta, blok danych dominuje”):
   tekst szerszy, do ok. 75 znaków, a dane usługodawcy w trzech kolumnach
   na szerokim ekranie, więc treść zaczyna się wyżej. */
.czytanie .tresc-prawna>p,.czytanie .tresc-prawna>ul,
.czytanie .tresc-prawna>h3,.czytanie .wstep-prawny,
.czytanie .tresc-prawna>.robocza{max-width:760px}
@media (min-width:1100px){
  .prawna-dane{max-width:820px}
  .prawna-dane .uslugodawca{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* F4-K6 (recenzja r0 /en/mail: karta wysyłki dotykała listy pytań pod
   nią): karta w sekcji ma odstęp od kolumn. */
.sekcja .gp-karta.en-karta+.dwie-kolumny,.sekcja .gp-karta+.dwie-kolumny{margin-top:40px}
/* F4-K6: bohater Możliwości (`sceny.scena_liczb`): cztery duże liczby
   z kodu w karcie zamiast pustej prawej połowy. */
.sl-liczby{list-style:none;margin:0;padding:4px 24px 20px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.sl-liczby li{padding:20px 0 14px;border-top:1px solid var(--linia-slaba);min-width:0}
.sl-liczby li:nth-child(-n+2){border-top:0}
.sl-liczby b{display:block;font:800 clamp(40px,4.2vw,58px)/1 var(--wysw);
  letter-spacing:-.03em;color:var(--akcent);font-variant-numeric:tabular-nums}
.sl-liczby span{display:block;margin-top:10px;font:700 16px/1.3 var(--wysw);color:var(--tekst)}
.sl-liczby small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--tekst-2)}
.naglowek-strony:has(.sl-karta) .ns-siatka{align-items:center}
@media (max-width:420px){.sl-liczby{padding:0 16px 14px;column-gap:16px}
  .sl-liczby span{font-size:15px}}
/* Centrum pomocy (F4-K6): karta najczęstszych pytań obok pola szukania. */
.pt-czeste{list-style:none;margin:0;padding:4px 20px}
.pt-czeste li+li{border-top:1px solid var(--linia-slaba)}
.pt-czeste a{display:flex;flex-direction:column;gap:2px;padding:14px 0;
  text-decoration:none;color:var(--tekst)}
.pt-czeste b{font-weight:600;font-size:16px}
.pt-czeste span{font-size:13.5px;color:var(--tekst-3)}
@media (hover:hover) and (pointer:fine){.pt-czeste a:hover b{color:var(--akcent-mocny)}}
.pt-karta-stopka{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  padding:16px 20px 20px;border-top:1px solid var(--linia);background:var(--karta-2)}
.pt-karta-stopka p{flex:1 1 100%;margin:0;font-weight:600;color:var(--tekst)}
.pt-stan{font-weight:600}
.naglowek-strony:has(.pt-karta) .ns-siatka{align-items:center}