/* 05b ETAPY (TOR C, ROZBIÓRKA mkvision.studio S5 "Van idee tot beheer", 18.10).
   Pomiar referencji 1440x900 (tools/gen_cards/qa/rz/ref.json): sekcja ok. 3600 px, ciemna, poświata u dołu po prawej;
   nagłówek 52 px (druga linia w kolorze akcentu), akapit 21 px szer. 626; 4 etapy: lewa kolumna przyklejona (top 140 px,
   4 kolumny): etykieta 31 px z gradientem i kursywą + tytuł 52 px; prawa kolumna od ok. 46.6% szerokości, tekst 29.5 px
   odsłaniany słowami przy scrollu (etapy.js); pasek postępu 8x200 przy prawej krawędzi (sticky, środek ekranu);
   "Przewijaj dalej" z kółkiem przy dolnej krawędzi ekranu. Kolory: czerń #0E0E0E, czerwień, papier. */
.et{position:relative;padding:112px 0 120px;background:var(--ink);color:var(--paper)}
.et-glow{position:absolute;left:0;right:0;bottom:0;height:min(110vh,1100px);height:min(110svh,1100px);pointer-events:none;
  background:radial-gradient(62% 100% at 75% 100%,rgba(200,23,29,.16),rgba(200,23,29,.06) 46%,rgba(200,23,29,0) 76%)}
.et-in{position:relative;z-index:1}
.et-head{max-width:calc(var(--col) * 7 + var(--gap) * 6)}
.et-h{margin:0;font:700 clamp(34px,3.6vw,56px)/1.14 var(--f-text);letter-spacing:-.02em}
.et-h-acc{display:block;color:var(--red)}
.et-lead{max-width:626px;margin:40px 0 0;font:700 clamp(17px,1.45vw,21px)/1.5 var(--f-text);color:rgba(243,243,239,.62)}

.et-steps{margin:128px 0 0;padding:0;list-style:none}
.et-step{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-bottom:192px}
.et-step:last-child{padding-bottom:72px}
.et-side{grid-column:1/span 5;align-self:start;position:sticky;top:140px}
.et-sub{margin:0 0 16px;font:700 clamp(22px,2.14vw,31px)/1.3 var(--f-text);letter-spacing:-.01em;
  background:linear-gradient(45deg,var(--red),var(--red-hover));-webkit-background-clip:text;background-clip:text;color:transparent}
.et-sub em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
.et-title{margin:0;font:700 clamp(34px,3.6vw,56px)/1.18 var(--f-text);letter-spacing:-.02em;color:var(--paper)}
.et-body{grid-column:6/-1;padding:222px 0 0 calc(var(--col) * .5)}
.et-p{margin:0;max-width:620px;font:700 clamp(19px,2.05vw,30px)/1.5 var(--f-text);letter-spacing:-.005em;color:var(--paper)}
.et-p+.et-p{margin-top:1.3em}

/* pasek postępu (prawa krawędź, środek ekranu) */
/* odstęp od zakładki Wycena (fixed, prawa krawędź, 46 px) jak u mkvision (28 px); koniec nad zaokrąglonym rogiem następnego panelu (flow --fl-r 40 px) */
.et-rail{position:absolute;top:0;bottom:160px;right:calc(var(--m) + 26px);width:8px;z-index:2;pointer-events:none}
.et-rail-bar{position:sticky;top:calc(50vh - 100px);display:block;width:8px;height:200px;margin-top:260px;border-radius:16px;background:rgba(243,243,239,.12);overflow:hidden}
.et-rail-fill{display:block;width:100%;height:100%;border-radius:16px;background:var(--red);transform:scaleY(0);transform-origin:50% 0}

/* R24-A (23.10): animacje przywrócone ze stanu sprzed R22; kółko „Przewijaj dalej” (.et-load) pozostaje usunięte (R22). */

/* bez JS wskaźniki postępu nie mają sensu (zostaje sama treść) */
html:not(.js) .et-rail{display:none}

/* mobile (mkvision 390: jedna kolumna, etap przyklejony pod paskiem, tekst przewija się pod nim, bez paska postępu) */
@media (max-width:1023px){
  .et{padding:80px 0 72px}
  .et-head{max-width:none}
  .et-h{font-size:clamp(30px,8vw,40px);line-height:1.18}
  .et-lead{margin-top:20px;font-size:17px}
  .et-steps{margin-top:64px}
  .et-step{display:block;padding-bottom:64px}
  .et-step:last-child{padding-bottom:40px}
  .et-side{position:sticky;top:72px;z-index:1;margin:0 calc(var(--m) * -1);padding:12px var(--m) 22px;
    background:linear-gradient(180deg,var(--ink) 76%,rgba(14,14,14,0))}
  .et-sub{margin-bottom:6px;font-size:24px}
  .et-title{font-size:30px}
  .et-body{padding:6px 0 0}
  .et-p{font-size:17px;line-height:1.65}
  .et-rail{display:none}
}

/* KOREKTA 7: mobile. Przyklejony etap (etykieta + tytuł) miał gradient tylko od 76%, więc tekst przewijający się pod nim prześwitywał i nachodził na tytuł.
   Pełne tło i cień u dołu, wyższy z-index, mniejszy odstęp. */
@media (max-width:1023px){
  .et-side{background:var(--ink);box-shadow:0 18px 22px -6px var(--ink);padding-bottom:16px;z-index:3}
  .et-body{position:relative;z-index:1}
  .et-step{padding-bottom:48px}
}