/* Strona zatwierdzona: pas Transformacji IT na stronie głównej, wariant n1 ze strony przewijanej labu new2-pas-jeden
   (Adrian 2026-10-14 na new2, 2026-10-27 na new). Kopia new2/src/assets/sandbox-pas.css, który generuje
   trash/lab-new2/build_pas_jeden.py (export_site) z pj-lab.css (karta), pk-lab.css, pkn-lab.css i pks-lab.css. */
:root {
  --pj-card-dot: color-mix(in srgb, var(--on-dark) 7%, transparent);
}
.pj-card { position: relative; padding: clamp(12px, 2vw, 26px); border-radius: clamp(18px, 2vw, 26px); color: var(--on-dark);
  background: radial-gradient(var(--pj-card-dot) 1px, transparent 1px) 0 0 / 24px 24px, var(--navy-900); }
@media (prefers-reduced-motion: no-preference) { @keyframes pj-out { to { opacity: 0; } } }

/* Lab „Pas Transformacji IT: jeden element z prawej” (trash/lab-new2/build_pas_jeden.py), warianty 22–25: kierunek
   01 + 15 (Adrian 29.09, ok. 16:00). Nie trafia na stronę. Rama sekcji (tytuł nad całością, ciemna karta, lista opisów
   bez skryptu) z pj-lab.css, prawa strona jak 15 z pn-lab.css (oś z kropką, pierścieniem i kwadratem z ikoną).
   Z lewej schemat 01 bez zmian wyglądu: te same reguły co w pd-lab.css (kolory 06, podpisy JetBrains Mono, stopnie
   podpisów), tylko wybór pojedynczego elementu: wybrany świeci błękitem jak Backup w 01, reszta przygasa jak w 01.
   Kolory wyłącznie tokenami; nowe odcienie jako tokeny w :root, z tokenów strony. */

:root {
  /* schemat: jak 01 (pd-lab.css) */
  --pk-wire: color-mix(in srgb, var(--cyan) 55%, transparent);
  --pk-idle: color-mix(in srgb, var(--on-dark) 40%, transparent);
  --pk-node-fill: color-mix(in srgb, var(--cyan) 6%, var(--navy-900));
  --pk-lit-fill: color-mix(in srgb, var(--cyan) 17%, var(--navy-900));
  --pk-glow: color-mix(in srgb, var(--cyan) 55%, transparent);
  --pk-hover-fill: color-mix(in srgb, var(--cyan) 9%, transparent);
  --pk-c-c: var(--cyan);
  --pk-c-b: var(--mx-cyan-70-blue);
  --pk-c-o: var(--orange);
  /* pigułki usług (25): barwy usług jak w 01 */
  --pk-s-poczta: var(--orange-2);
  --pk-s-vpn: var(--on-dark);
  --pk-s-backup: var(--cyan);
  --pk-s-mfa: var(--orange);
  --pk-s-biuro: var(--mx-blue-50-white);
  --pk-sd-ring: var(--mx-navy-26-t);
  /* oś w kolorze świecenia (23–25) */
  --pk-axis-lit: var(--mx-cyan-70-blue);
  --pk-dot-halo: color-mix(in srgb, var(--cyan) 24%, transparent);
  --pk-plate-line: color-mix(in srgb, var(--cyan) 55%, var(--navy-900));
  --pk-plate-glow: color-mix(in srgb, var(--cyan) 42%, transparent);
}

/* ---------- Schemat 01 (netmap.json, viewBox 720 × 548) ---------- */
.pk-card { padding: clamp(14px, 2vw, 26px); }
.pk-art { position: relative; }
.pk-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pk-w { fill: none; stroke: var(--pk-wire); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pk[data-sel] .pk-w { stroke: var(--pk-idle); }
.pk[data-sel] .pk-w.is-lit { stroke: var(--cyan); stroke-width: 3.5; }
.pk-node { --pk-acc: var(--pk-c-c); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.pk-node--b { --pk-acc: var(--pk-c-b); }
.pk-node--o { --pk-acc: var(--pk-c-o); }
.pk-body :is(rect, circle, path) { fill: var(--pk-node-fill); stroke: var(--pk-acc); stroke-opacity: .7; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pk-body path[fill="none"] { fill: none; }
.pk-body circle[r="2"] { fill: var(--pk-acc); stroke: none; }
.pk-body text { fill: var(--on-dark); stroke: none; font: 500 17px/1 var(--mono); letter-spacing: .02em; }
/* stopnie jak w 01: w jednostkach viewBox dobrane do szerokości schematu, co najmniej ok. 11,5 px na ekranie */
@media (min-width: 900px) and (max-width: 1279px) { .pk-body text { font-size: 21px; } }
@media (min-width: 900px) and (max-width: 1099px) { .pk-body text { font-size: 23px; } }
@media (max-width: 899px) { .pk-body text { font-size: 19px; } }
@media (max-width: 639px) { .pk-body text { font-size: calc(38px - 2.8vw); } }
/* 24, 25: podpisy o stopień większe (Adrian wcześniej: napisy na schemacie „troszeczkę bardziej czytelne”) */
@media (min-width: 1280px) { .pk--tuned .pk-body text { font-size: 18.5px; } }
@media (min-width: 900px) and (max-width: 1279px) { .pk--tuned .pk-body text { font-size: 22px; } }
@media (min-width: 900px) and (max-width: 1099px) { .pk--tuned .pk-body text { font-size: 24px; } }
@media (min-width: 640px) and (max-width: 899px) { .pk--tuned .pk-body text { font-size: 20px; } }

/* najechanie i fokus: błękitna obwódka jak w 01 (prostokąt dopasowany w pk-lab.js) */
.pk-foc { fill: none; stroke: none; pointer-events: all; }
.pk-node:is(:hover, :focus-visible) .pk-foc { fill: var(--pk-hover-fill); stroke: var(--cyan); stroke-width: 2; }
.pk-node.is-sel:is(:hover, :focus-visible) .pk-foc { fill: none; }
.pk-node.is-peek .pk-foc { stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 6 5; }
/* wybrany świeci błękitem (jak Backup w 01), pozostałe przygasają jak w 01: obrys biel 40 %, podpis --on-dark-2 */
.pk-node.is-sel { --pk-acc: var(--cyan); }
.pk-node.is-sel .pk-body :is(rect, circle, path) { stroke-opacity: 1; }
.pk-node.is-sel .pk-body :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }
.pk-node.is-sel .pk-body { filter: drop-shadow(0 0 7px var(--pk-glow)); }
.pk[data-sel] .pk-node:not(.is-sel) { --pk-acc: var(--pk-idle); }
.pk[data-sel] .pk-node:not(.is-sel) .pk-body :is(rect, circle, path) { stroke-opacity: 1; }
.pk[data-sel] .pk-node:not(.is-sel) text { fill: var(--on-dark-2); }

/* impuls: kropka nad schematem, tylko transform i opacity (Web Animations w pk-lab.js) */
.pk-dots { position: absolute; inset: 0; pointer-events: none; }
.pk-dot { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--pk-glow); opacity: 0; }

/* ---------- 25: pigułki grup usług pod schematem, jak w 01 (bez wyboru; wypełniona grupa wybranego elementu) ---------- */
.pk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-dark-2);
  border-radius: 999px; box-sizing: border-box; color: var(--on-dark-2); font: 600 13.5px/1.2 var(--text); cursor: default; }
.pk-chip:hover { border-color: var(--on-dark-2); color: var(--on-dark); }
.pk-chip.is-with { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy-900); }
.pk-sd { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pk-sc); box-shadow: 0 0 0 1px var(--pk-sd-ring); }
.pk-sd--poczta { --pk-sc: var(--pk-s-poczta); }
.pk-sd--vpn { --pk-sc: var(--pk-s-vpn); }
.pk-sd--backup { --pk-sc: var(--pk-s-backup); }
.pk-sd--mfa { --pk-sc: var(--pk-s-mfa); }
.pk-sd--biuro { --pk-sc: var(--pk-s-biuro); }

/* ---------- 23–25: oś w kolorze świecenia wybranego węzła ---------- */
.pk--link .pj-dot0 { background: var(--cyan); box-shadow: 0 0 0 1.5px var(--pk-axis-lit), 0 0 0 6px var(--pk-dot-halo); }
.pk--link .pj-ring0 { border-color: var(--pk-axis-lit); }
.pk--link.pn--s-axis .pn-panel::before { background: linear-gradient(var(--pk-axis-lit), var(--pn-line)); }
.pk--link .pj-plate { color: var(--cyan); box-shadow: 0 0 0 1px var(--pk-plate-line), 0 0 14px var(--pk-plate-glow); }
.pk--link .pj-plate .pj-pi :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }

/* ---------- 24, 25: proporcje, rytm, opis od góry schematu, telefon ---------- */
.pk--tuned .pn-side { --pn-why-fs: clamp(26px, 1.1rem + 1.7vw, 44px); --pn-gw: 36px; }
.pk--tuned .pn-why { line-height: 1.08; letter-spacing: -.026em; }
.pk--tuned .pn-r--why > .pn-sym { height: max(36px, var(--pn-why-fs) * 1.08); }
.pk--tuned.pn--s-axis .pn-panel::before { top: calc(max(36px, var(--pn-why-fs) * 1.08) / 2); }
.pk--tuned .pj-r + .pj-r { margin-top: 12px; }
.pk--tuned .pj-r.pn-r--co { margin-top: 30px; }
@media (min-width: 900px) {
  .pk--tuned .pj-side { align-self: start; padding-top: clamp(14px, 2vw, 26px); }
}
@media (max-width: 899px) {
  .pk--tuned .pj-grid { row-gap: 18px; }
  .pk--tuned .pk-card { padding: 12px 10px; }
  .pk--tuned .pn-side { --pn-why-fs: clamp(24px, 4px + 5.6vw, 30px); --pn-gw: 28px; }
  .pk--tuned .pn-r { column-gap: 12px; }
  .pk--tuned .pj-r.pn-r--co { margin-top: 22px; }
}

/* ---------- Ruch: tylko bez prośby o ograniczenie ruchu. Zmiana opisu 0,15 s (przenikanie z lekkim uniesieniem),
   podświetlenie od razu, bez przejść kolorów; impuls raz po wyborze (pk-lab.js). ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pk[data-swap="lift"] .pj-panel.is-in { animation: pk-lift .15s var(--ease); }
  .pk[data-swap="lift"] .pj-panel.is-out { animation: pj-out .09s linear forwards; }
  @keyframes pk-lift { from { opacity: 0; transform: translateY(6px); } }
}

/* Lab „Pas Transformacji IT”, wariant 26: schemat 01 z grupami (jak 25) i opis w układzie sekcji Kanały z new2
   (sandbox-kanaly.css: kn-head, kn-side, kn-stack, kn-links, kn-bridge). Tu tylko nagłówek, ikona w plakietce i łuk.
   Barwy przez var() z tokenów strony (site.css) i Kanałów. */
.pkn { position: relative; }
.pkn-grid { position: relative; }
.pkn .kn-media { max-width: 680px; }
.pkn-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); }
.pkn-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--orange); }
.pkn-claim { margin: 0; font: 700 clamp(28px, 1rem + 2.2vw, 44px)/1.1 var(--display); letter-spacing: -.025em; color: var(--navy); text-wrap: balance; }
.pkn-lead { margin: 14px 0 0; max-width: 36em; font-size: 17px; line-height: 1.6; color: var(--muted); }
.pkn .kn-head { margin-bottom: 26px; }
.pkn-i { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2.4; }
.pkn-i * { vector-effect: non-scaling-stroke; }
.pkn .kn-plate--ico { width: 34px; height: 34px; }
/* łuk od karty do kropki: tylko na komputerze (obok siebie); na telefonie opis stoi pod kartą */
.pkn-bridge { display: none; }
@media (min-width: 900px) { .pkn-bridge { display: block; } }
.pkn-bridge .kn-br { transition: d .2s ease; }
@media (prefers-reduced-motion: reduce) { .pkn-bridge .kn-br { transition: none; } }

/* ---------- 27–34: kolory grup z 01 (Adrian 12.10: „boksy kolorowe… color-coded… z prawej delikatnie zaadresowane”) ----------
   --gc barwa grupy na granacie (jak w 01), --gl ten sam kolor na jasnym tle (ciemniejszy; Router i VPN: granat zamiast
   bieli), --gb i --gb2 wypełnienie ramki, --gg poświata. Grupa: data-grp sekcji (schemat, łuk), data-g elementów karty
   (32–34), klasa pkn-g--… opisu (z prawej). */
:root {
  --pkn-poczta-l: color-mix(in srgb, var(--orange-2) 62%, var(--orange));
  --pkn-backup-l: var(--mx-cyan-70-blue);
  --pkn-biuro-l: var(--blue);
  --pkn-poczta-b: color-mix(in srgb, var(--orange-2) 9%, transparent);
  --pkn-vpn-b: color-mix(in srgb, var(--on-dark) 7%, transparent);
  --pkn-backup-b: color-mix(in srgb, var(--cyan) 9%, transparent);
  --pkn-mfa-b: color-mix(in srgb, var(--orange) 10%, transparent);
  --pkn-biuro-b: color-mix(in srgb, var(--mx-blue-50-white) 10%, transparent);
  --pkn-poczta-b2: color-mix(in srgb, var(--orange-2) 18%, transparent);
  --pkn-vpn-b2: color-mix(in srgb, var(--on-dark) 15%, transparent);
  --pkn-backup-b2: color-mix(in srgb, var(--cyan) 18%, transparent);
  --pkn-mfa-b2: color-mix(in srgb, var(--orange) 20%, transparent);
  --pkn-biuro-b2: color-mix(in srgb, var(--mx-blue-50-white) 18%, transparent);
  --pkn-poczta-g: color-mix(in srgb, var(--orange-2) 50%, transparent);
  --pkn-vpn-g: color-mix(in srgb, var(--on-dark) 38%, transparent);
  --pkn-backup-g: color-mix(in srgb, var(--cyan) 55%, transparent);
  --pkn-mfa-g: color-mix(in srgb, var(--orange) 50%, transparent);
  --pkn-biuro-g: color-mix(in srgb, var(--mx-blue-50-white) 45%, transparent);
  --pkn-poczta-h: color-mix(in srgb, var(--orange-2) 22%, transparent);
  --pkn-vpn-h: color-mix(in srgb, var(--navy) 14%, transparent);
  --pkn-backup-h: color-mix(in srgb, var(--cyan) 22%, transparent);
  --pkn-mfa-h: color-mix(in srgb, var(--orange) 18%, transparent);
  --pkn-biuro-h: color-mix(in srgb, var(--blue) 18%, transparent);
}
:is([data-grp="poczta"], [data-g="poczta"], .pkn-g--poczta) { --gc: var(--pk-s-poczta); --gl: var(--pkn-poczta-l); --gb: var(--pkn-poczta-b); --gb2: var(--pkn-poczta-b2); --gg: var(--pkn-poczta-g); --gh: var(--pkn-poczta-h); }
:is([data-grp="vpn"], [data-g="vpn"], .pkn-g--vpn) { --gc: var(--pk-s-vpn); --gl: var(--navy); --gb: var(--pkn-vpn-b); --gb2: var(--pkn-vpn-b2); --gg: var(--pkn-vpn-g); --gh: var(--pkn-vpn-h); }
:is([data-grp="backup"], [data-g="backup"], .pkn-g--backup) { --gc: var(--pk-s-backup); --gl: var(--pkn-backup-l); --gb: var(--pkn-backup-b); --gb2: var(--pkn-backup-b2); --gg: var(--pkn-backup-g); --gh: var(--pkn-backup-h); }
:is([data-grp="mfa"], [data-g="mfa"], .pkn-g--mfa) { --gc: var(--pk-s-mfa); --gl: var(--orange); --gb: var(--pkn-mfa-b); --gb2: var(--pkn-mfa-b2); --gg: var(--pkn-mfa-g); --gh: var(--pkn-mfa-h); }
:is([data-grp="biuro"], [data-g="biuro"], .pkn-g--biuro) { --gc: var(--pk-s-biuro); --gl: var(--pkn-biuro-l); --gb: var(--pkn-biuro-b); --gb2: var(--pkn-biuro-b2); --gg: var(--pkn-biuro-g); --gh: var(--pkn-biuro-h); }

/* schemat dokładnie jak w 01 (pd-lab.css, widok usług): elementy grupy świecą jak w 01 – obrys w kolorze grupy,
   wypełnienie i poświata błękitne (--pk-lit-fill, --pk-glow = --pd-lit-fill, --pd-glow), podpis biały; przewody grupy
   w jej kolorze (3,5), pozostałe węzły i przewody w spoczynku jak w 01. Wybrany element dodatkowo cienka ramka
   w kolorze grupy (zamiast pomarańczowej z 01). */
.pkn--grp[data-grp] .pk-w.is-lit { stroke: var(--pk-idle); stroke-width: 2; }
.pkn--grp[data-grp] .pk-w.is-grp { stroke: var(--gc); stroke-width: 3.5; }
.pkn--grp[data-grp] .pk-node.is-grp { --pk-acc: var(--gc); }
.pkn--grp[data-grp] .pk-node.is-grp .pk-body :is(rect, circle, path) { stroke-opacity: 1; }
.pkn--grp[data-grp] .pk-node.is-grp .pk-body :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }
.pkn--grp[data-grp] .pk-node.is-grp .pk-body { filter: drop-shadow(0 0 7px var(--pk-glow)); }
.pkn--grp[data-grp] .pk-node.is-grp text { fill: var(--on-dark); }
.pkn--grp[data-grp] .pk-node.is-sel .pk-foc { fill: none; stroke: var(--gc); stroke-width: 2; }
.pkn--box-dash[data-grp] .pk-node.is-sel .pk-foc { stroke-dasharray: 6 5; }
.pkn--grp .pk-dot { background: var(--gc); }

/* pigułki: wypełniona tylko grupa wybranego elementu; kliknięcie wybiera jej pierwszy element */
.pkn--grp .pk-chip { cursor: pointer; }
.pkn--grp .pk-chip.is-with:not(.is-grp) { background: none; border-color: var(--line-dark-2); color: var(--on-dark-2); }
.pkn--grp .pk-chip.is-grp { background: var(--on-dark); border-color: var(--on-dark); color: var(--navy-900); }

/* z prawej: plakietka elementu (co) granatowa jak karta, ikona jak świecący węzeł z 01 (obrys w kolorze grupy) */
.pkn--e-plate .pkn-plate { width: 38px; height: 38px; background: var(--navy-900); }
.pkn--e-plate .pkn-i { filter: drop-shadow(0 0 4px var(--pk-glow)); }
.pkn--e-plate .kn-r--what > .kn-sym { height: 38px; }
.pkn--e-plate .pkn-i { width: 22px; height: 22px; stroke: var(--gc); stroke-width: 2.2; }
.pkn--e-plate .pkn-i :is(rect, circle:not([r="2"])) { fill: var(--pk-lit-fill); }
.pkn--e-plate .pkn-i circle[r="2"] { fill: var(--gc); stroke: none; }
/* pigułka grupy przy nazwie elementu */
.pkn-gchip { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 11px 0 9px; border-radius: 999px;
  background: var(--navy-900); color: var(--on-dark); font: 600 12.5px/1.2 var(--text); white-space: nowrap; }
.pkn-gchip .pk-sd { width: 8px; height: 8px; }
.pkn .kn-what { flex-wrap: wrap; row-gap: 6px; }
/* oś i łuk w kolorze grupy (jasny odcień) */
.pkn--e-axis .kn-dot { background: var(--gl); box-shadow: 0 0 0 5px var(--gh); }
.pkn--e-axis .kn-ring { border-color: var(--gl); }
.pkn--e-axis .kn-stack::before { background: linear-gradient(var(--gl), var(--line-light)); }
.pkn--e-bridge .kn-br { stroke: var(--gl); }
/* przyciski jak na stronie: pomarańczowy przycisk akcji (site.css), etap linkiem; albo same linki */
.pkn .kn-links .pkn-btn { min-height: 46px; padding: 0 20px; font-size: 15.5px; }
.pkn .pkn-l1 { font-weight: 700; color: var(--navy); }
.pkn .kn-links:has(.pkn-l1) { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 639px) { .pkn .kn-links .pkn-btn { width: 100%; justify-content: space-between; } }
/* 2026-10-28: na telefonie (320–375 px) dłuższe etykiety („Przegląd komputerów w Transformacji IT”) nie mieściły się
   w jednym wierszu przycisku (.btn ma nowrap) – zawijamy tekst zamiast wychodzić poza przycisk. */
@media (max-width: 479px) { .pkn .kn-links .pkn-btn { white-space: normal; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; text-align: left; } }

/* Lab „Pas Transformacji IT” – strona przewijana (przewijany/): pas jak 27 i 28 (pkn-lab.css), nagłówek sekcji nad
   całością, potem karta ze schematem i opis przyklejone do ekranu na czas dziewięciu kroków przewijania. Wybór
   elementu za przewijaniem (pks-lab.js, AGENTS.md zasada 17). Pod opisem licznik i kropki kroków w kolorach grup.
   Kolory wyłącznie tokenami (pkn-lab.css: --gc, --gl). */
.pks { --pks-steps: 9; --pks-stepv: 18svh; --pks-top: 0px; padding-bottom: 0; overflow: visible; }
/* na stronie (new2) nagłówek jest przyklejony (site.css, 76 px): karta i opis zatrzymują się pod nim */
body:has(.site-header) .pks { --pks-top: 76px; }
.pks-top { padding-bottom: clamp(20px, 3vw, 40px); }
.pks-head { max-width: 46rem; }
.pks-track { position: relative; height: calc(var(--pks-steps) * var(--pks-stepv) + 100svh); }
/* s6: krótszy krok */
.pks--fast { --pks-stepv: 12svh; }
/* s4: łagodne przyciąganie do środka każdego kroku (punkty w torze na wysokości kroków) */
/* site.css daje scroll-padding 88 px (kotwice pod nagłówkiem); punkt przyciągania wyrównany do --pks-top */
/* przyciąganie tylko między pierwszym a ostatnim krokiem; poza nimi pks-lab.js zdejmuje je klasą pks-free (inaczej
   po ostatnim kroku każde małe przewinięcie wracało do niego i strona stawała – Adrian 2026-10-27) */
/* 2026-10-28: przyciąganie wyłączone – przy kursorze na schemacie małe przewinięcia przy granicy kroku wracały do
   punktu i strona stawała (zgłoszenie Adriana); kroki dalej wybiera samo przewijanie. Punkty .pks-snap zostają w HTML. */
.pks-snap { scroll-margin-top: calc(var(--pks-top) - 88px); }
.pks-snaps { position: absolute; inset: 0; pointer-events: none; }
.pks-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; }
.pks-snap:nth-child(1) { top: calc(.5 * var(--pks-stepv)); } .pks-snap:nth-child(2) { top: calc(1.5 * var(--pks-stepv)); }
.pks-snap:nth-child(3) { top: calc(2.5 * var(--pks-stepv)); } .pks-snap:nth-child(4) { top: calc(3.5 * var(--pks-stepv)); }
.pks-snap:nth-child(5) { top: calc(4.5 * var(--pks-stepv)); } .pks-snap:nth-child(6) { top: calc(5.5 * var(--pks-stepv)); }
.pks-snap:nth-child(7) { top: calc(6.5 * var(--pks-stepv)); } .pks-snap:nth-child(8) { top: calc(7.5 * var(--pks-stepv)); }
.pks-snap:nth-child(9) { top: calc(8.5 * var(--pks-stepv)); }
/* s3: pasek z dziewięciu odcinków w kolorach grup zamiast kropek */
.pks--bar .pks-steps { flex: 1; max-width: 260px; gap: 3px; }
.pks--bar .pks-step { flex: 1; width: auto; height: 6px; border-radius: 2px; }
.pks--bar .pks-step.is-past { opacity: 1; }
.pks--bar .pks-step.is-on { width: auto; border-radius: 2px; box-shadow: 0 0 0 2px var(--gh); }.pks-stick { position: sticky; top: var(--pks-top); display: flex; align-items: center; height: calc(100svh - var(--pks-top));
  overflow: hidden; }
.pks-stick > .wrap { width: 100%; }
@media (min-width: 900px) {
  .pks-grid { grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); grid-template-rows: 1fr auto 1fr;
    grid-template-areas: "media ." "media side" "media ."; }
  .pks .kn-media { max-width: min(680px, (100svh - 120px) * 1.25); }
}
/* licznik i kropki kroków */
.pks-meter { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.pks-count { font: 600 13px/1 var(--mono); letter-spacing: .04em; color: var(--muted); }
.pks-count b { color: var(--navy); font-weight: 700; }
.pks-steps { display: flex; align-items: center; gap: 7px; }
.pks-step { width: 8px; height: 8px; border-radius: 50%; background: var(--line-light); }
.pks-step.is-past { background: var(--gl); opacity: .45; }
.pks-step.is-on { width: 22px; border-radius: 999px; background: var(--gl); opacity: 1; }
.pks-after { padding: 80px 20px 120px; text-align: center; color: var(--muted); background: var(--white); }
/* telefon: nagłówek przewija się normalnie, przyklejone karta i opis; pigułki grup schowane, mniejszy tytuł-efekt */
@media (max-width: 899px) {
  .pks .pk-chips { display: none; }
  .pks-stick { align-items: flex-start; padding-top: 12px; box-sizing: border-box; }
  .pks-grid { row-gap: 14px; }
  .pks .kn-media { max-width: min(100%, (100svh - 380px) * 1.3); }
  .pks .kn-side { --kn-why-fs: 21px; }
  .pks .kn-how { font-size: 15px; line-height: 1.5; }
  .pks .kn-links { margin-top: 14px; }
  .pks-meter { margin-top: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pks-step { transition: width .2s var(--ease); }
  .pks--bar .pks-step { transition: none; }
  /* s6: nowy opis wjeżdża wyraźniej od dołu */
  .pks--rise[data-swap="lift"] .pj-panel.is-in { animation: pks-rise .2s var(--ease); }
  @keyframes pks-rise { from { opacity: 0; transform: translateY(18px); } }
}