/* Lab new2-scroll, S2 „Sygnał: Transformacja IT”. Strona new.proop.pl/transformacja-it bez zmian w treści, z warstwą
   z labu Sygnał (sygnal.css i sygnal.js = S1): linia od porównania 2008 | 2026 w hero do „Zadzwoń” w kontakcie,
   węzły przy nagłówkach sekcji, ramki okien na grafikach, kroki schodkami. Tu tylko dopasowanie do sekcji strony.
   Barwy wyłącznie w tokenach w :root. */
:root {
  --s2-bar-l: #f3f7fd;
  --s2-bar-line-l: #dbe6f7;
  --s2-dot-l: rgba(10, 31, 68, .22);
  --s2-dot-on-l: #2a6c8e;
  --s2-addr-l: rgba(10, 31, 68, .1);
  --s2-bar-d: rgba(255, 255, 255, .03);
}

/* sekcje strony oddają kolejność warstw głównemu kontekstowi (.sg-main), żeby węzły leżały nad linią sygnału */
.sg-main :is(.e100, .e011, .e012, .e013, .e014, .e031, .e032, .e061, .e081) { isolation: auto; }

/* szyna w nagłówkach sekcji strony: oś A niesie węzeł, treść zaczyna się na osi B */
.sg-main .sg-rail2 { position: relative; padding-left: var(--sg-rail); }
.sg-main .sg-rail2 > .sg-node { top: calc(8px - var(--sg-node) / 2); }
html:not(.js) .sg-main .sg-rail2::before { content: ""; position: absolute; left: calc(var(--sg-node) / 2 - .75px); top: var(--sg-node); bottom: -24px; width: 1.5px;
  background: linear-gradient(180deg, var(--sg-node-on-l), transparent); }

/* węzły na jasnych sekcjach strony (te same barwy co .sg-sec--l w sygnal.css) */
[data-sg-theme="l"] .sg-node { background: var(--sg-node-bg-l); border-color: var(--sg-node-ring-l); }
[data-sg-theme="l"] .sg-node::before { background: var(--sg-node-in-l); }
[data-sg-theme="l"] .sg-node::after { border-color: var(--sg-node-on-l); }
[data-sg-theme="l"] .sg-node.is-lit, html:not(.js) [data-sg-theme="l"] .sg-node { border-color: var(--sg-node-on-l); box-shadow: 0 0 0 4px var(--sg-node-halo-l); }
[data-sg-theme="l"] .sg-node.is-lit::before, html:not(.js) [data-sg-theme="l"] .sg-node::before { background: var(--sg-node-on-l); box-shadow: 0 0 8px 1px var(--sg-node-glow-l); }

/* początek linii: środek dolnej krawędzi porównania 2008 | 2026 (tam stoi linia podziału) */
.sg-port--cmp { display: block; position: relative; width: 2px; height: 2px; margin: 0 auto; }

/* grafiki pasów jako okna: belka z kropkami nad ilustracją strony */
.sg-main .g2-media.sg-frame .sg-win__bar { height: 36px; background: var(--s2-bar-l); border-bottom: 1px solid var(--s2-bar-line-l); }
.sg-main .g2-media.sg-frame .sg-dots i { border-color: var(--s2-dot-l); }
.sg-main .g2-media.sg-frame .sg-dots i:first-child { background: var(--s2-dot-on-l); }
.sg-main .g2-media.sg-frame .sg-addr { border-color: var(--s2-addr-l); }
.sg-main [data-sg-theme="d"] .g2-media.sg-frame .sg-win__bar { background: var(--s2-bar-d); border-bottom-color: var(--sg-win-line); }
.sg-main [data-sg-theme="d"] .g2-media.sg-frame .sg-dots i { border-color: var(--sg-win-dot); }
.sg-main [data-sg-theme="d"] .g2-media.sg-frame .sg-dots i:first-child { background: var(--sg-win-dot-on); }
.sg-main [data-sg-theme="d"] .g2-media.sg-frame .sg-addr { border-color: var(--sg-win-line); }

/* kroki: sekcja ciemna jak w S1, między jasnym zakresem a jasnym FAQ */
.sg-main .sg-steps-sec .sg-p { color: var(--sg-ink-d2); }

/* pas trzech etapów: treść odsunięta od osi, żeby linia sygnału nie przechodziła przez napisy */
.sg-main .e032 .e032__body { margin-left: var(--sg-rail); }
/* kontakt: treść na osi B, żeby linia biegła obok napisów i wchodziła w „Zadzwoń” od lewej */
.sg-main .e081 .e081-copy { padding-left: var(--sg-rail); }
.sg-main .e061 .e061__art { margin-left: var(--sg-rail); }
/* telefon i wąskie ekrany: wszystko w jednej kolumnie, więc grafiki, karta zakresu i lista FAQ też na osi B */
@media (max-width: 879px) {
  .sg-main .g2-media.sg-frame { margin-left: var(--sg-rail); width: calc(100% - var(--sg-rail)); }
}
@media (max-width: 959px) {
  .sg-main .e031 .e031__card, .sg-main .e061 .e061__list { margin-left: var(--sg-rail); }
}

/* sekcje bez podziału tekst | grafika: cała treść od osi B, linia biegnie lewym marginesem i niczego nie przecina */
.sg-main .sg-gutter { position: relative; padding-left: calc(var(--gut) + var(--sg-rail)); }
.sg-main .sg-gutter > .sg-node { left: var(--gut); top: calc(8px - var(--sg-node) / 2); }