/* Wersja robocza (new2.proop.pl): sekcja „Kanały” na podstronie Reklam (sandbox_kanaly.py), wariant 27 z labu
   new2-kanaly-2 (trash/lab-new2/kanaly-2/k2-lab.css i k3-lab.css oraz kn-lab.css z labu new2-kanaly – tu tylko to, czego
   używa wariant 27, z jedną klasą zamiast trzech). Dołączany tylko na /uslugi/reklamy/ i /en/services/advertising/.
   Sekcja jasna (rytm strony: ciemne hero, jasny zakres), ciemna jest karta z obrazkiem. Z lewej ścieżka: źródła → strona
   → telefon → CRM, pod spodem Dane zasilające CRM; z prawej opis na osi (kropka, pierścień, logo), z CRM do osi płynie
   jeden łuk (svg.kn-bridge, liczy sandbox-kanaly.js). Kolory wyłącznie var(--…): tokeny strony z :root site.css,
   odcienie sekcji jako tokeny w :root niżej (mieszanki tokenów strony) i barwy znaków TikToka i YouTube'a (znaki
   rysowane w pigułce Social media, do czasu zgody Adriana na oficjalne pliki).
   Ruch tylko po wyborze i tylko w widoku, jednorazowy (klasy is-fire, is-picked, is-live ze skryptu); przejścia do 200 ms;
   przy ograniczonym ruchu żadnego. Bez skryptu (@media (scripting: none)) opisy stoją jako lista, obrazek jest ozdobą. */

:root {
  --kn-text: var(--mx-muted-82-navy);
  /* ciemna karta z obrazkiem */
  --kn-card-dot: color-mix(in srgb, var(--on-dark) 7%, transparent);
  --kn-card-hi: color-mix(in srgb, var(--cyan) 13%, transparent);
  --kn-card-warm: color-mix(in srgb, var(--orange) 8%, transparent);
  --kn-card-shadow: var(--mx-navy-42-t);
  /* elementy na granacie */
  --kn-node-bg: color-mix(in srgb, var(--cyan) 8%, var(--navy-900));
  --kn-node-hover: color-mix(in srgb, var(--cyan) 18%, var(--navy-900));
  --kn-wire: color-mix(in srgb, var(--on-dark) 22%, transparent);
  --kn-sel-ring: color-mix(in srgb, var(--orange-2) 16%, transparent);
  --kn-sel-glow: color-mix(in srgb, var(--orange) 45%, transparent);
  --kn-src-sel: color-mix(in srgb, var(--orange-2) 12%, transparent);
  --kn-tick: color-mix(in srgb, var(--on-dark) 20%, transparent);
  --kn-wave: color-mix(in srgb, var(--orange-2) 70%, transparent);
  /* pigułki źródeł na telefonie: „szkło” jak --glass i --glass-hover, ale nieprzezroczyste, żeby linia pod pigułką nie
     prześwitywała przez napis */
  --kn-glass-solid: color-mix(in srgb, var(--white) 7%, var(--navy));
  --kn-glass-solid-hover: color-mix(in srgb, var(--white) 14%, var(--navy));
  --kn-src-sel-solid: color-mix(in srgb, var(--orange-2) 12%, var(--navy));
  /* opis na jasnym tle */
  --kn-tint: var(--mx-blue-9-white);
  --kn-axis-soft: color-mix(in srgb, var(--orange) 22%, var(--line-light));
  --kn-dot-halo: color-mix(in srgb, var(--orange) 16%, transparent);
  /* znaki w pigułce Social media: barwy TikToka i YouTube'a (znaki rysowane) i obwódka kółek w stosie */
  --kn-yt: #ff0000;
  --kn-tt: #000000;
  --kn-tt-cyan: #25f4ee;
  --kn-tt-red: #fe2c55;
  --kn-sm-ring: var(--navy);
  --kn-sm-ring-light: var(--paper);
}

/* ---------- Sekcja: telefon i tablet – nagłówek, obrazek, opis; komputer – obrazek z lewej, nagłówek i opis z prawej ---------- */
.kn { padding: clamp(52px, 7vw, 104px) 0; background: radial-gradient(620px 380px at 96% 4%, var(--mx-orange-6-t), transparent 70%), var(--paper);
  overflow: hidden; }
.kn-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
.kn-head, .kn-media, .kn-side { min-width: 0; width: 100%; max-width: 640px; justify-self: center; }
@media (min-width: 900px) {
  .kn-grid { grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "media ." "media head" "media side" "media ."; column-gap: clamp(36px, 4.4vw, 72px); row-gap: 0; }
  .kn-media { grid-area: media; align-self: center; max-width: none; }
  .kn-head, .kn-side { max-width: 36rem; justify-self: start; }
  .kn-head { grid-area: head; margin-bottom: 22px; }
  .kn-side { grid-area: side; }
}
.kn-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.kn-kicker::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 2px; background: var(--grad-accent); }
.kn-claim { margin: 0 0 12px; font: 700 clamp(26px, 2.5vw, 38px)/1.14 var(--display); letter-spacing: -.022em; color: var(--navy); text-wrap: balance; overflow-wrap: break-word; }
.kn-lead { margin: 0; max-width: 54ch; font-size: 16.5px; line-height: 1.6; color: var(--kn-text); overflow-wrap: break-word; }

/* ---------- Karta z obrazkiem (ciemna, jak w hero) ---------- */
.kn-card { position: relative; padding: clamp(14px, 2vw, 26px); border-radius: clamp(18px, 2vw, 26px); color: var(--on-dark);
  background: radial-gradient(circle at 1px 1px, var(--kn-card-dot) 1px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(520px 340px at 10% 0%, var(--kn-card-hi), transparent 70%),
    radial-gradient(420px 300px at 100% 100%, var(--kn-card-warm), transparent 70%), var(--card-dark);
  box-shadow: 0 44px 80px -50px var(--kn-card-shadow); }
.kn-tab { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kn :is(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.kn-card :is(a, button):focus-visible { outline-color: var(--cyan); }
.kn-i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kn-art { position: relative; }
.kn-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kn-ln { fill: none; stroke: var(--kn-wire); stroke-width: 1.5; }
.kn-ln.is-on { stroke: var(--orange-2); stroke-width: 2.5; }
/* impuls: kopia linii, krótka kreska przesuwana po jej długości */
.kn-spark { fill: none; stroke: var(--white); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .05 3; stroke-dashoffset: .05; opacity: 0; }
.kn-w--p { display: none; }  /* linie tylko dla telefonu (jedna pionowa linia przez ikony) */

/* kolumna źródeł i ścieżka (strona i telefon w rzędzie, pod nimi Dane, na prawym końcu linii Danych CRM) */
.kn-tabs { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) clamp(30px, 9%, 56px) minmax(0, 1.9fr); }
.kn-srcs { grid-column: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kn-flow { grid-column: 3; position: relative; display: grid; min-width: 0;
  grid-template-columns: minmax(0, 1fr) clamp(16px, 5%, 24px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "page . call" "dane dane dane"; row-gap: 40px; }
.kn-src--google { grid-area: google; } .kn-src--social { grid-area: social; }
.kn-src--chatgpt { grid-area: chatgpt; } .kn-src--seo { grid-area: seo; } .kn-src--wizytowka { grid-area: wizytowka; }

/* pigułki źródeł: logotyp na białym krążku albo ikona liniowa */
.kn-src { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 46px; padding: 5px 14px 5px 5px;
  border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); color: var(--on-dark); font: 600 14px/1.2 var(--text); }
.kn-src__t { min-width: 0; overflow-wrap: break-word; }
.kn-src__mk { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 999px; background: var(--white); }
.kn-src__mk img { display: block; width: auto; height: 18px; }
.kn-src__mk--ico { width: 34px; padding: 0; border: 1px solid var(--cyan-line); background: var(--kn-node-bg); color: var(--cyan); }
.kn-src__mk--ico .kn-i { width: 19px; height: 19px; }
.kn-src:hover, .kn-src:focus-visible { border-color: var(--cyan); background: var(--glass-hover); }
.kn-src.is-sel { border-color: var(--orange-2); background: var(--kn-src-sel); color: var(--white);
  box-shadow: 0 0 0 4px var(--kn-sel-ring), 0 12px 30px -12px var(--kn-sel-glow); }
.kn-src.is-sel .kn-src__mk { box-shadow: 0 0 0 2px var(--orange-2); }
.kn-src.is-sel .kn-src__mk--ico { border-color: transparent; background: var(--grad-accent); color: var(--navy-900); box-shadow: none; }

/* Social media: cztery znaki w pigułce (Meta, Instagram, TikTok, YouTube) ciasno nachodzącymi na siebie kółkami (20 px,
   krok 15 px, pierwsze na wierzchu) – zajmują tyle co białe pole z dwoma logotypami, więc nazwa mieści się jak przy
   innych pigułkach i żaden znak nie znika. Przy opisie (co) ten sam stos mniejszy (16 px), w kolumnie osi. */
.kn-src__mk.kn-sms, .kn-plate.kn-sms { gap: 0; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; }
.kn-sms { display: inline-flex; align-items: center; }
.kn-sm { position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); box-shadow: 0 0 0 1.5px var(--kn-sm-ring); }
.kn-sm + .kn-sm { margin-left: -5px; }
.kn-sm:nth-child(1) { z-index: 4; } .kn-sm:nth-child(2) { z-index: 3; } .kn-sm:nth-child(3) { z-index: 2; } .kn-sm:nth-child(4) { z-index: 1; }
.kn-sms .kn-sm img { display: block; width: auto; height: 12px; }
.kn-sms .kn-sm--meta img { height: 9px; }
.kn-tt { display: block; width: 17px; height: 17px; }
.kn-tt path { fill: none; stroke-width: 2.7; stroke-linejoin: round; }
.kn-tt .kn-tt__k { stroke: var(--kn-tt); }
.kn-tt .kn-tt__c { stroke: var(--kn-tt-cyan); }
.kn-tt .kn-tt__r { stroke: var(--kn-tt-red); }
.kn-yt { display: block; width: 14px; height: 10px; }
.kn-yt__bg { fill: var(--kn-yt); }
.kn-yt__play { fill: var(--white); }
.kn-src.is-sel .kn-src__mk.kn-sms { box-shadow: none; }
.kn-src.is-sel .kn-sm { box-shadow: 0 0 0 1.5px var(--orange-2); }

/* strona i telefon: stale na ścieżce każdego kontaktu */
.kn-node { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px; border: 1px solid var(--orange-2); border-radius: 16px; background: var(--kn-node-bg); color: var(--on-dark);
  font: 600 13px/1.3 var(--text); text-align: center; box-shadow: 0 0 26px -8px var(--kn-sel-glow); }
.kn-node .kn-i { width: 26px; height: 26px; color: var(--orange-2); }
.kn-node--page { grid-area: page; } .kn-node--call { grid-area: call; }
.kn-pic { display: grid; place-items: center; }
.kn-call { position: relative; display: grid; place-items: center; }
.kn-call::after { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--kn-wave);
  border-radius: 50%; opacity: 0; }

/* Dane: włoskowa linia wymiarowa z licznikiem z drobnych kresek (bez liczb), ikona, słowo, narzędzia zwykłym tekstem */
.kn-meter { position: relative; z-index: 1; grid-area: dane; align-self: stretch; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ic t" "tools tools"; align-content: start; align-items: center; column-gap: 9px; row-gap: 7px; min-width: 0; min-height: 44px;
  margin: 4px 70px 0 0; padding: 15px 4px 2px; color: var(--on-dark-2); font: 600 13.5px/1.2 var(--text); text-align: left; }
.kn-meter__ic { grid-area: ic; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--cyan-line); border-radius: 50%;
  background: var(--kn-node-bg); color: var(--cyan); }
.kn-meter__ic .kn-i { width: 14px; height: 14px; }
.kn-meter__t { grid-area: t; min-width: 0; }
.kn-meter__rule { position: absolute; left: 0; right: 0; top: 0; height: 7px; border-left: 1px solid var(--line-dark-2); border-right: 1px solid var(--line-dark-2); }
.kn-meter__rule::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--line-dark-2); }
.kn-meter__ticks { position: absolute; left: 12%; right: 12%; top: 0; height: 7px; display: flex; justify-content: space-between; pointer-events: none; }
.kn-meter__ticks i { width: 1.5px; height: 4px; margin-top: 1.5px; background: var(--kn-tick); }
.kn-meter__ticks i.is-hit { height: 7px; margin-top: 0; background: var(--orange-2); }
/* narzędzia: separator na początku każdego wiersza chowa się za lewą krawędzią; przy wąskich Danych dwa na dwa,
   przy bardzo wąskich jedno pod drugim */
.kn-tools { grid-area: tools; display: block; min-width: 0; margin-right: -4px; overflow: hidden; container-type: inline-size; }
.kn-tools__in { display: flex; flex-wrap: wrap; row-gap: 3px; margin-left: -7px; }
.kn-tools__in > span { padding: 0 6px; border-left: 1px solid var(--line-dark-2); color: var(--on-dark-2); font: 500 12px/1.35 var(--text); letter-spacing: 0; white-space: nowrap; }
@container (max-width: 266px) { .kn-tools__in { display: grid; grid-template-columns: repeat(2, max-content); } }
@container (max-width: 175px) { .kn-tools__in { grid-template-columns: max-content; } }
.kn-meter:hover, .kn-meter:focus-visible { color: var(--on-dark); }
.kn-meter:hover .kn-meter__rule, .kn-meter:focus-visible .kn-meter__rule { border-color: var(--cyan); }
.kn-meter:hover .kn-meter__rule::before, .kn-meter:focus-visible .kn-meter__rule::before { background: var(--cyan); }
.kn-meter.is-sel { color: var(--white); }
.kn-meter.is-sel .kn-meter__rule { border-color: var(--orange-2); }
.kn-meter.is-sel .kn-meter__rule::before { background: var(--orange-2); }
.kn-meter.is-sel .kn-meter__ic { border-color: transparent; background: var(--grad-accent); color: var(--navy-900); }
.kn-meter.is-sel .kn-tools__in > span { color: var(--on-dark); }

/* CRM: okrągły węzeł ze skrzynką zapytań na prawym końcu linii Danych, nazwa pod ikoną */
.kn-crm { position: relative; z-index: 1; grid-area: dane; justify-self: end; align-self: start; display: flex; flex-direction: column; align-items: center;
  gap: 5px; width: 56px; min-width: 0; min-height: 44px; margin-top: -10px; color: var(--on-dark); font: 600 13px/1.2 var(--text); }
.kn-crm__ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--cyan-line); border-radius: 50%;
  background: var(--kn-node-bg); color: var(--cyan); }
.kn-crm__ic .kn-i { width: 18px; height: 18px; }
.kn-crm__t { white-space: nowrap; }
.kn-crm:hover .kn-crm__ic, .kn-crm:focus-visible .kn-crm__ic { border-color: var(--cyan); background: var(--kn-node-hover); }
.kn-crm.is-sel { color: var(--white); }
.kn-crm.is-sel .kn-crm__ic { border-color: transparent; background: var(--grad-accent); color: var(--navy-900);
  box-shadow: 0 0 0 4px var(--kn-sel-ring), 0 10px 26px -10px var(--kn-sel-glow); }

/* linia z obrazka do opisu: jedna krzywa nad siatką sekcji */
.kn-bridge { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kn-br { fill: none; stroke: var(--orange-2); stroke-width: 2; stroke-linecap: round; }
.kn-br-spark { fill: none; stroke: var(--orange); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .05 3; stroke-dashoffset: .05; opacity: 0; }

/* ---------- Opis z prawej bez karty: oś z trzema węzłami (kropka – dlaczego, pierścień – jak, logo albo ikona – co) ---------- */
.kn-side { --kn-why-fs: clamp(21px, 1.2rem + .5vw, 26px); --kn-why-lh: 1.2; --kn-gw: 34px; --kn-cg: 14px; position: relative; }
.kn-panel { min-width: 0; }
.kn-stack { position: relative; }
.kn-r { display: grid; grid-template-columns: var(--kn-gw) minmax(0, 1fr); column-gap: var(--kn-cg); align-items: start; min-width: 0; }
.kn-r + .kn-r { margin-top: 10px; }
.kn-r--what { align-items: center; }
.kn-t { min-width: 0; }
.kn-why { margin: 0; font: 700 var(--kn-why-fs)/var(--kn-why-lh) var(--display); letter-spacing: -.015em; color: var(--navy); text-wrap: balance; overflow-wrap: break-word; }
.kn-how { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--kn-text); overflow-wrap: break-word; }
.kn-what { display: flex; align-items: center; gap: 10px; min-height: 34px; margin: 0; font: 700 14.5px/1.3 var(--text); color: var(--navy); overflow-wrap: anywhere; }
.kn-sym { position: relative; display: flex; align-items: center; justify-content: center; }
.kn-sym > * { position: relative; z-index: 1; }
.kn-r--why > .kn-sym { height: calc(var(--kn-why-fs) * var(--kn-why-lh)); }
.kn-r--how > .kn-sym { height: calc(16.5px * 1.6); }
.kn-r--what > .kn-sym { height: 34px; }
.kn-stack::before, .kn-stack::after { content: ""; position: absolute; left: calc(var(--kn-gw) / 2 - 1px); top: calc(var(--kn-why-fs) * var(--kn-why-lh) / 2);
  bottom: 17px; width: 2px; }
.kn-stack::before { background: linear-gradient(var(--orange), var(--orange-2) 55%, var(--kn-axis-soft)); }
.kn-stack::after { background: var(--orange-2); box-shadow: 0 0 10px var(--kn-wave); transform: scaleY(0); transform-origin: top; opacity: 0; }
.kn-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px var(--kn-dot-halo); }
.kn-ring { width: 14px; height: 14px; border: 2.5px solid var(--orange); border-radius: 50%; background: var(--paper); }
.kn-plate { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 30px; height: 30px; padding: 0 5px;
  border: 1px solid var(--line-light); border-radius: 999px; background: var(--white); color: var(--blue); }
.kn-plate img { display: block; width: auto; height: 14px; }
.kn-plate--ico { width: 30px; border-color: transparent; background: var(--kn-tint); }
.kn-plate--ico .kn-i { width: 16px; height: 16px; }
.kn-plate.kn-sms .kn-sm { width: 16px; height: 16px; border: 1px solid var(--line-light); box-shadow: 0 0 0 1.5px var(--kn-sm-ring-light); }
.kn-plate.kn-sms .kn-sm + .kn-sm { margin-left: -4px; }
.kn-plate.kn-sms .kn-sm img { height: 9px; }
.kn-plate.kn-sms .kn-sm--meta img { height: 7px; }
.kn-plate.kn-sms .kn-tt { width: 13px; height: 13px; }
.kn-plate.kn-sms .kn-yt { width: 11px; height: 8px; }
.kn-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 22px; }
.kn-l1, .kn-l2 { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; font: 600 15.5px/1.3 var(--text); text-decoration: none; overflow-wrap: break-word; }
.kn-l1 { min-height: 46px; padding: 10px 18px; border-radius: 999px; background: var(--blue); color: var(--white); }
.kn-l1:hover { background: var(--navy); }
.kn-l2 { min-height: 44px; color: var(--blue); text-decoration: underline 1.5px transparent; text-underline-offset: 5px; }
.kn-l2:hover { text-decoration-color: currentColor; }
.kn-arr { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* opisy w jednej komórce siatki (stała wysokość, bez skakania); widoczny tylko wybrany */
.kn-panels { display: grid; }
.kn-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.kn-panel.is-on { visibility: visible; opacity: 1; }
/* linki ukrytych opisów bez wymiarów (układ bez zmian): nie leżą pod linkami wybranego opisu */
.kn-panel:not(.is-on) .kn-links { transform: scale(0); }

/* komputer, węższa karta (900–1099 px): „Wizytówka Google” łamie się między słowami */
@media (min-width: 900px) and (max-width: 1099px) {
  .kn-src { gap: 8px; padding-right: 10px; font-size: 13.5px; }
  .kn-node { padding: 12px 6px; font-size: 12.5px; }
}

/* ---------- Telefon: Google Ads na środku, pod nim źródła po dwa, niżej strona, telefon i CRM w osi opisu, obok CRM Dane;
   jedna prosta linia od strony przez telefon i CRM do dlaczego, jak i co ---------- */
@media (max-width: 639px) {
  .kn-tabs { display: block; }
  .kn-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "google google" "social chatgpt" "seo wizytowka";
    column-gap: 14px; row-gap: 8px; }
  .kn-src--google { justify-self: center; width: calc(50% - 7px); }
  .kn-src { gap: 8px; padding: 5px 10px 5px 5px; font-size: 13px; }
  .kn-src__mk { padding: 0 7px; }
  .kn-src__mk--ico { padding: 0; }
  /* pigułki nieprzezroczyste: linia z górnego rzędu chowa się pod pigułką zamiast przecinać napis */
  .kn-src:not(.is-sel) { background: var(--kn-glass-solid); }
  .kn-src:not(.is-sel):is(:hover, :focus-visible) { background: var(--kn-glass-solid-hover); }
  .kn-src.is-sel { background: var(--kn-src-sel-solid); }
  .kn-flow { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "page page" "call call" "crm dane";
    column-gap: 14px; row-gap: 22px; margin-top: 30px; }
  .kn-node { flex-direction: row; justify-content: flex-start; align-self: center; gap: 10px; padding: 10px 12px 10px 11px; }
  .kn-node .kn-i { width: 22px; height: 22px; }
  .kn-node--call { margin-bottom: 20px; }
  .kn-meter { margin: 0; padding: 15px 2px 2px; }
  .kn-crm { grid-area: crm; justify-self: start; flex-direction: row; gap: 8px; width: auto; margin: -19px 0 0; padding: 5px 12px 5px 5px;
    border: 1px solid var(--line-dark-2); border-radius: 999px; background: var(--kn-node-bg); }
  .kn-crm.is-sel { border-color: var(--orange-2); }
  .kn-side { padding-left: 20px; }
  .kn-w--p { display: inline; }
  .kn-w--d { display: none; }
  .kn-l1 { width: 100%; justify-content: space-between; }
}

/* ---------- Bez skryptu: opisy jako lista, obrazek jest ozdobą ---------- */
@media (scripting: none) {
  .kn-panels { display: block; }
  .kn-panel { visibility: visible; opacity: 1; }
  .kn-panel:not(.is-on) .kn-links { transform: none; }
  .kn-panel + .kn-panel { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-light); }
  .kn-tab { cursor: default; }
}

/* ---------- Ruch: tylko po wyborze, tylko w widoku, jednorazowo ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kn-panel { transform: translateY(6px); transition: opacity .12s linear, transform .12s linear, visibility 0s linear .12s; }
  .kn-panel.is-on { transform: none; transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s; }
  .kn-links { transition: transform 0s linear .12s; }  /* linki znikają razem z końcem wygaszania opisu */
  .kn-panel.is-on .kn-links { transition: none; }
  .kn-ln { transition: stroke .2s linear, stroke-width .2s linear, opacity .2s linear; }
  .kn-l1 { transition: background-color .15s linear, border-color .15s linear; }
  .kn-src, .kn-meter { transition: background-color .15s linear, border-color .15s linear, box-shadow .2s linear, color .15s linear; }
  .kn-src__mk, .kn-meter__ic { transition: background-color .15s linear, box-shadow .2s linear, border-color .15s linear; }
  .kn-meter__rule, .kn-meter__rule::before { transition: border-color .15s linear, background-color .15s linear; }
  .kn-meter__ticks i { transition: background-color .15s linear, height .15s linear, margin-top .15s linear; }
  .kn-tools__in > span { transition: color .15s linear; }
  .kn-crm { transition: color .15s linear; }
  .kn-crm__ic { transition: background-color .15s linear, border-color .15s linear, box-shadow .15s linear, color .15s linear; }

  /* chwile impulsu: źródło → strona → telefon → CRM → łuk do opisu → oś; przy Danych i CRM od miejsca wyboru */
  .kn { --a-src: 0s; --a-pc: .32s; --a-cc: .62s; --a-ring: .62s; --a-crm: .9s; --a-br: .9s; --a-ax: 1.2s; }
  .kn[data-k="dane"] { --a-crm: .28s; --a-br: .3s; --a-ax: .62s; }
  .kn[data-k="crm"] { --a-cc: 0s; --a-crm: .28s; --a-br: .3s; --a-ax: .62s; }
  .kn.is-live.is-fire .kn-spark--src.is-on { animation: kn-run .36s cubic-bezier(.4, 0, .6, 1) var(--a-src) both; }
  .kn.is-live.is-fire .kn-spark--pc { animation: kn-run .32s cubic-bezier(.4, 0, .6, 1) var(--a-pc) both; }
  .kn.is-live.is-fire .kn-spark--cc { animation: kn-run .28s cubic-bezier(.4, 0, .6, 1) var(--a-cc) both; }
  .kn.is-live.is-fire[data-k="dane"] .kn-spark--dc { animation: kn-run .28s cubic-bezier(.4, 0, .6, 1) both; }
  .kn.is-live.is-fire:is([data-k="dane"], [data-k="crm"]) .kn-spark--pc, .kn.is-live.is-fire[data-k="dane"] .kn-spark--cc { animation: none; }
  /* telefon dzwoni, gdy impuls do niego dojdzie; przy wyborze Danych i CRM nie dzwoni */
  .kn.is-live.is-fire .kn-call .kn-i { animation: kn-ring .5s ease-in-out var(--a-ring) both; }
  .kn.is-live.is-fire .kn-call::after { animation: kn-wave .6s ease-out var(--a-ring) both; }
  .kn.is-live.is-fire:is([data-k="dane"], [data-k="crm"]) .kn-call .kn-i,
  .kn.is-live.is-fire:is([data-k="dane"], [data-k="crm"]) .kn-call::after { animation: none; }
  /* CRM mruga, gdy impuls do niego dojdzie; potem łuk do opisu i oś od góry */
  .kn.is-live.is-fire .kn-crm__ic { animation: kn-pop .42s var(--ease) var(--a-crm) both; }
  .kn.is-live.is-fire .kn-br-spark { animation: kn-run .36s cubic-bezier(.4, 0, .6, 1) var(--a-br) both; }
  .kn.is-live.is-fire .kn-panel.is-on .kn-stack::after { animation: kn-flash-y .6s var(--ease) var(--a-ax) both; }

  @keyframes kn-run { 0% { opacity: 0; stroke-dashoffset: .05; } 8%, 88% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
  @keyframes kn-ring { 0%, 100% { transform: none; } 12% { transform: rotate(-16deg); } 28% { transform: rotate(14deg); } 44% { transform: rotate(-11deg); }
    60% { transform: rotate(8deg); } 76% { transform: rotate(-4deg); } }
  @keyframes kn-wave { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
  @keyframes kn-flash-y { 0% { opacity: 1; transform: scaleY(0); } 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
  @keyframes kn-pop { 0%, 100% { transform: none; } 40% { transform: scale(1.18); } }
}
@media (prefers-reduced-motion: no-preference) and (scripting: none) {
  .kn-panel, .kn-links { transform: none; transition: none; }
}