/* Strona główna TacticLab: style sekcji. Czcionka, podstawa, kontener, przyciski, nawigacja i stopka są w css/rama.css.
   Kolory, czasy i miary tylko z css/02-tokeny.css. Ruch jest pod html.anim (skrypt dodaje klasę, gdy nie ma prefers-reduced-motion);
   bez JS wszystko stoi w stanie końcowym. Ruch tylko przez transform i opacity. */

/* ===== typografia i rytm sekcji: odstępy i skala zamiast pasów tła i kresek ===== */
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(36px,4.6vw,62px);font-weight:800;letter-spacing:-.035em}
h3{font-size:20px;font-weight:600}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--text-2);max-width:56ch;text-wrap:pretty}
section{padding:var(--sekcja) 0;position:relative}
section.oddech{padding:calc(var(--sekcja) * 1.45) 0}
.podpis{margin-top:10px;font-size:13px;color:var(--text-3)}
/* nagłówek jak w wydawnictwie: bardzo duży, ciasny; wariant dłuższy dla nagłówków w kilku zdaniach */
.kino-h2{font-size:clamp(32px,5.2vw,72px);font-weight:800;line-height:1;letter-spacing:-.045em;text-wrap:balance}
.kino-h2.dluzszy{font-size:clamp(30px,3.9vw,56px);line-height:1.04;letter-spacing:-.04em}
/* blok nagłówka sekcji: nagłówek, pod nim jedno zdanie, wszystko od lewej krawędzi siatki */
.sek-gl{margin-bottom:clamp(40px,6vw,88px)}
.sek-gl .kino-h2{max-width:20ch}
.sek-gl .kino-h2.dluzszy{max-width:26ch}
.sek-gl .lead{margin-top:clamp(18px,2vw,28px)}
/* pozycja z obrazem: obraz albo pętla, pod nim podpis, nagłówek i zdanie (bez ramek kart) */
.poz{min-width:0}
.poz h3{margin:clamp(16px,1.8vw,24px) 0 8px;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em}
.poz p:not(.podpis){max-width:52ch;color:var(--text-2);font-size:16px}
.plan-opis{margin-top:12px;font-size:13px;font-weight:600;color:var(--text-3)}

/* ===== ekran 1: nagranie meczu na cały ekran ===== */
.hero{position:relative;display:flex;align-items:flex-end;height:100svh;min-height:600px;padding:0;overflow:hidden;background:var(--bg)}
.kino-wideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg)}
.kino-zaslona{position:absolute;inset:0;background:var(--kino-zaslona);pointer-events:none}
.hero .kino-siatka{position:relative;width:100%;max-width:var(--kino-w);padding:calc(var(--nav-h) + 24px) var(--kino-gutter) calc(var(--kino-os-h) + 36px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.kino-tekst{grid-column:1 / span 9}
.hero h1{font-size:clamp(38px,min(7.2vw,12svh),104px);font-weight:800;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.hero h1 .ac{display:block;margin-top:.5em;color:var(--primary);font-size:.36em;font-weight:700;line-height:1.15;letter-spacing:-.025em}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,3svh,32px)}
.hero .btn-secondary{background:var(--kino-szklo);border-color:var(--kino-krawedz)}
.hero .btn-secondary:hover{background:var(--surface-2);border-color:var(--text)}
.hero .note{margin-top:16px;font-size:13px;color:var(--text)}
.hero .note b{font-weight:600}

/* oś meczu na dole: biegnący czas i znaczniki zdarzeń z kino-tagi.js, jak oś w Tagowaniu */
.kino-os{position:absolute;left:0;right:0;bottom:0;height:var(--kino-os-h);display:flex;align-items:flex-end}
.kino-os-in{position:relative;width:100%;max-width:var(--kino-w);margin:0 auto;padding:0 var(--kino-gutter) 28px}
.kino-os-gora{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;font-size:13px;color:var(--text)}
.kino-zegar{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;min-width:3.2ch}
.kino-tor{--u:0;position:relative;height:30px;border-top:1px solid var(--kino-os-linia);background-image:linear-gradient(90deg,var(--kino-os-tyk) 1px,transparent 1px);background-size:calc(100% / var(--kino-sek,6.7)) 9px;background-repeat:repeat-x}
.kino-bieg{position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--primary);transform-origin:0 50%;transform:scaleX(var(--u))}
.kino-glowica{position:absolute;left:0;top:-14px;width:2px;height:46px;background:var(--text);transform:translate3d(calc(var(--os-px,0px) * var(--u)),0,0)}
.kino-znacznik{position:absolute;left:calc(var(--u) * 100%);top:0;width:0;height:0;opacity:0;--kropka:var(--cat-shot)}
.kino-znacznik[data-kat=pass]{--kropka:var(--cat-pass)}
.kino-znacznik[data-kat=shot]{--kropka:var(--cat-shot)}
.kino-znacznik[data-kat=ours]{--kropka:var(--cat-ours)}
.kino-znacznik[data-kat=defense]{--kropka:var(--cat-defense)}
.kino-znacznik.jest,.kino-stoi .kino-znacznik{opacity:1}
.kz-pion{position:absolute;left:-1px;top:-1px;width:3px;height:26px;border-radius:2px;background:var(--kropka)}
.kz-karta{position:absolute;left:0;bottom:12px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:var(--r8);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-2);color:var(--text);font-size:14px;font-weight:600;white-space:nowrap;transform:translate(-50%,10px)}
.kino-znacznik.jest .kz-karta,.kino-stoi .kz-karta{transform:translateX(-50%)}
.kz-karta kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r6);background:var(--surface-3);border:1px solid var(--border-strong);font-size:12px;font-weight:700}
.kz-karta em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.kz-karta::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kropka);flex:none}
.anim .kino-znacznik,.anim .kz-karta{transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.kino-stoi .kino-glowica,.kino-stoi .kino-bieg{display:none}
@media(max-width:960px){.kino-tekst{grid-column:1 / -1}}
@media(max-width:600px){
  .hero{height:88svh;min-height:520px}
  .kino-zaslona{background:var(--kino-zaslona-waski)}
  .hero .kino-siatka{--kino-os-h:96px}
  .hero .ctas .btn{flex:1 1 100%}
  .kz-karta{gap:6px;font-size:12px;padding:6px 9px 6px 8px}
  .kz-karta kbd,.kino-os-gora span{display:none}
  .kino-os{--kino-os-h:96px}
}

/* okno filmu: kafel rośnie do odtwarzacza (FLIP w skrypcie), bez JS przycisk otwiera plik */
.film-okno{margin:auto;padding:0;border:1px solid var(--border-strong);border-radius:var(--r16);background:var(--czern);color:var(--text);width:min(1100px,calc(100% - 32px));box-shadow:var(--cien-okno);overflow:hidden}
.film-okno::backdrop{background:var(--zaslona);backdrop-filter:blur(6px)}
.film-okno video{width:100%;aspect-ratio:16/9;background:var(--czern)}
.film-okno .film-x{position:absolute;top:10px;right:10px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:var(--r8);background:var(--przyciemnienie);color:var(--text);cursor:pointer;z-index:2}
.film-okno .film-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.film-okno figcaption{padding:12px 16px;font-size:13px;color:var(--text-3);background:var(--surface)}

/* ===== ekran 2: nagranie wchodzi do okna programu (#jak) ===== */
/* domyślnie (telefon, ograniczony ruch, bez skryptu) okno stoi złożone; przypięcie tylko na szerokim ekranie z ruchem (html.anim) */
.jak{padding:var(--sekcja) 0;background:var(--bg)}
.jak-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;width:100%;max-width:var(--kino-w);margin:0 auto;padding:0 var(--kino-gutter)}
.jak-tekst{position:relative;z-index:2}
.jak-tekst .kino-h2{font-size:clamp(28px,2.7vw,40px);line-height:1.04}
.jak-kroki{list-style:none;position:relative;display:grid;gap:18px;margin-top:28px;padding-left:24px}
.jak-kroki::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--border)}
.jak-kroki::after{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--primary);transform-origin:50% 0;transform:scaleY(var(--jp,1))}
.jak-krok{font-size:clamp(18px,1.55vw,22px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text);transition:color var(--t-3) var(--ease-out)}
.jak-nr{display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.jak-okno{--pr:1;--pl:1;--pk:1;--pg:1;--pz:1;--po:1;--ps:1;--pc:1;position:relative;z-index:1;width:100%}
.jak-plansza{position:relative;aspect-ratio:16/9;container-type:inline-size;border-radius:var(--r12)}
.jak-rama{position:absolute;inset:0;border-radius:var(--r12);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-okno);opacity:var(--pr)}
/* warstwy prawdziwego zrzutu Tagowania: ten sam obraz, każda warstwa przycięta do jednego pola programu */
.jak-w{position:absolute;inset:0;background:url(../img/tagowanie.jpg) center / 100% 100% no-repeat;border-radius:var(--r12)}
.jak-w-pasek{clip-path:inset(0 96.5625% 11.1111% 0);opacity:var(--pg);transform:translate3d(calc((1 - var(--pg)) * -24px),0,0)}
.jak-w-gora{clip-path:inset(0 25% 88.3333% 3.4375%);opacity:var(--pg);transform:translate3d(0,calc((1 - var(--pg)) * -24px),0)}
.jak-w-lista{clip-path:inset(11.6667% 85.75% 11.1111% 3.4375%);opacity:var(--pl);transform:translate3d(calc((1 - var(--pl)) * -56px),0,0)}
.jak-w-pole{clip-path:inset(11.6667% 25% 37.2222% 14.25%);opacity:var(--pk)}
.jak-w-zdarz{clip-path:inset(62.7778% 25% 11.1111% 14.25%);opacity:var(--pz);transform:translate3d(0,calc((1 - var(--pz)) * 40px),0)}
.jak-w-kody{clip-path:inset(0 0 11.1111% 75%);opacity:var(--pk);transform:translate3d(calc((1 - var(--pk)) * 56px),0,0)}
.jak-w-os{clip-path:inset(88.8889% 0 0 0);opacity:var(--po);transform:translate3d(0,calc((1 - var(--po)) * 48px),0)}
/* pole wideo w oknie programu: skrypt skaluje je od całego ekranu do tego miejsca */
.jak-pole{position:absolute;left:19.1875%;top:11.6667%;width:50.875%;height:51.1111%;overflow:hidden;background:var(--czern);transform-origin:50% 50%}
.jak-pole::after{content:"";position:absolute;inset:0;background:var(--kino-zaslona);opacity:var(--zas,0);pointer-events:none}
.jak-wideo{display:block;width:100%;height:100%;object-fit:cover}
/* zdarzenia z tagów spadają na oś (te same dwa, które widać na osi nad nagraniem) */
.jak-spadki{position:absolute;inset:0;pointer-events:none}
.jak-spadek{--q:clamp(0,calc(var(--ps) * 2.4 - var(--i)),1);position:absolute;display:flex;align-items:center;gap:.6cqw;padding:.35cqw .8cqw .35cqw .5cqw;border-radius:.6cqw;background:var(--surface-3);border:1px solid var(--border-strong);box-shadow:var(--cien-2);font-size:1.02cqw;font-weight:700;color:var(--text);white-space:nowrap;opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * -16cqw),0)}
.jak-spadek kbd{display:inline-grid;place-items:center;min-width:1.7cqw;height:1.7cqw;border-radius:.4cqw;background:var(--surface);border:1px solid var(--border-strong);font-size:.95cqw}
.jak-spadek::before{content:"";width:.7cqw;height:.7cqw;border-radius:50%;background:var(--cat-shot);flex:none}
.jak-spadek em{font-style:normal;font-variant-numeric:tabular-nums}
/* licznik w polu wideo: liczby rosną z tagów */
.jak-licznik{position:absolute;left:20.6%;top:46.2%;display:flex;flex-direction:column;gap:.2cqw;padding:.9cqw 1.4cqw;border-radius:.9cqw;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--cien-2);opacity:var(--pc);transform:translate3d(0,calc((1 - var(--pc)) * 2cqw),0)}
.jak-licznik small{font-size:1.1cqw;color:var(--text-2)}
.jak-licznik b{font-size:3.6cqw;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.jak-licznik span{font-size:1.05cqw;color:var(--text-3)}
/* wciśnięty klawisz: obwódka na przycisku akcji w prawym panelu, obok numer i klawisz (skrypt błyska nią w chwili zdarzenia) */
.jak-wcisk{position:absolute;border-radius:.5cqw;box-shadow:0 0 0 .18cqw var(--primary),0 0 0 .7cqw var(--primary-soft);opacity:0;pointer-events:none}
.jak-wcisk span{position:absolute;right:calc(100% + .7cqw);top:50%;transform:translateY(-50%);display:flex;gap:.4cqw}
.jak-wcisk b,.jak-wcisk kbd{display:inline-grid;place-items:center;min-width:2.2cqw;height:2.2cqw;padding:0 .5cqw;border-radius:.45cqw;font-size:1.15cqw;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:var(--cien-2)}
.jak-wcisk b{background:var(--primary);color:var(--on-primary)}
.jak-wcisk kbd{background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text)}
/* okno strzału: prawdziwe zrzuty okna programu nad przyciemnionym Tagowaniem, w tym miejscu, w którym program je otwiera */
.jak-strzal{position:absolute;inset:0;border-radius:var(--r12);background:var(--zaslona);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-2) var(--ease-out),visibility 0s linear var(--t-2)}
.jak-strzal.otw{opacity:1;visibility:visible;transition:opacity var(--t-2) var(--ease-out)}
.jak-strzal-okno{position:absolute;left:7.5%;top:2.6667%;width:85%;height:94.6667%;border-radius:1cqw;overflow:hidden;background:var(--surface);box-shadow:var(--cien-3);transform:scale(.97);transition:transform var(--t-3) var(--ease-out)}
.jak-strzal.otw .jak-strzal-okno{transform:none}
.jak-strzal-okno img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--t-1) linear}
.jak-strzal-okno img.na{opacity:1}
.jak-klik{position:absolute;width:3.4cqw;height:3.4cqw;margin:-1.7cqw 0 0 -1.7cqw;border-radius:50%;border:.25cqw solid var(--primary);background:var(--primary-soft);opacity:0}
.jak-strzal-okno .jak-wcisk span{right:auto;left:50%;top:auto;bottom:calc(100% + .8cqw);transform:translateX(-50%)}
/* telefon: okno wjeżdża raz przy wejściu na ekran (skrypt dodaje .in) */
@media(max-width:899px){
  .anim .jak .jak-okno{opacity:0;transform:translate3d(0,36px,0) scale(.97);transition:opacity var(--t-4) var(--ease-out),transform var(--t-4) var(--ease-out)}
  .anim .jak .jak-okno.in{opacity:1;transform:none}
}
/* szeroki ekran z ruchem: tor ma 350 svh, okno stoi przypięte przez 250 svh przewijania (bez ruchu i na telefonie wszystko stoi złożone) */
@media(min-width:900px){
  .jak-wrap{grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:center}
  .anim .jak{padding:0}
  .anim .jak-tor{height:350svh}
  .anim .jak-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  .anim .jak-wrap{padding-top:var(--nav-h)}
  .anim .jak-okno{width:min(100%,calc((100svh - var(--nav-h) - 96px) * 1.7778))}
  .anim .jak-krok:not(.akt){color:var(--text-3)}
  .jak.aktywna .jak-pole,.jak.aktywna .jak-w{will-change:transform,opacity}
}
/* ===== ekran 3: liczby rosną z zapisanych zdarzeń (#liczby), obok mapa strzałów jak w programie ===== */
.liczby .liczby-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;align-items:center;max-width:var(--kino-w);padding:0 var(--kino-gutter)}
.liczby-kol{grid-column:1 / span 7}
.liczby-lista{list-style:none;margin-top:clamp(24px,4vw,48px)}
.liczba{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:clamp(12px,1.6vw,20px) 0;border-top:1px solid var(--border)}
.liczba b{min-width:2.3ch;font-size:clamp(64px,10.5vw,152px);font-weight:800;line-height:.88;letter-spacing:-.06em;color:var(--text);font-variant-numeric:tabular-nums}
.liczba-opis{display:flex;flex-direction:column;gap:4px;font-size:clamp(18px,1.9vw,26px);font-weight:700;letter-spacing:-.02em}
.liczba-opis small{font-size:clamp(14px,1.2vw,17px);font-weight:500;letter-spacing:0;color:var(--text-2)}
.liczby-podpis{margin-top:8px;padding-top:12px;border-top:1px solid var(--border);color:var(--text-2)}
.liczby-zdanie{margin-top:14px;max-width:46ch;color:var(--text-2);font-size:clamp(16px,1.3vw,18px)}
.link-strzalka{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:600;white-space:nowrap}
.link-strzalka .strzalka{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-1) var(--ease-out)}
.link-strzalka:hover .strzalka{transform:translateX(3px)}
.liczby-boisko{grid-column:8 / span 5}
/* mapa strzałów: te same klasy i kształty co karta „Miejsce strzałów” w programie (src/css/3zt-strzal-miejsce.css), barwy z tokenów strony */
.strz-mapa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(12px,1.6vw,20px);align-items:center}
.strz-svg{display:block;width:100%;height:auto;border-radius:var(--r8);user-select:none}
.strz-tlo{fill:var(--surface-2)}
.strz-linie,.strz-slupki,.strz-linia-br{fill:none;stroke:var(--border-strong);stroke-width:.3;stroke-linejoin:round;pointer-events:none}
.strz-kropka-linii{fill:var(--border-strong);stroke:none}
.strz-slupki{stroke:var(--text-2);stroke-width:.24}
.strz-siatka{fill:var(--text-3);fill-opacity:.14;stroke:none}
.strz-tor-mapa{stroke:var(--primary);stroke-width:.25;stroke-opacity:.55}
.strz-znak{fill:none;stroke:var(--primary);stroke-width:.4;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:50% 50%;transition:opacity var(--t-3) var(--ease-out) calc(var(--i,0) * 90ms),transform var(--t-4) var(--ease-out) calc(var(--i,0) * 90ms)}
.strz-znak.strz-gol{fill:var(--primary)}
.strz-znak.strz-obok,.strz-znak.strz-nad{stroke-width:.45}
.strz-bramka .strz-znak{stroke-width:.09}
.anim .liczby:not(.in) .strz-znak{opacity:0;transform:scale(.2)}
.anim .liczby:not(.in) .strz-tor-mapa{opacity:0}
.strz-tor-mapa{transition:opacity var(--t-3) var(--ease-out) calc(var(--i,0) * 90ms)}
.boisko-opis{display:flex;flex-direction:column;gap:10px;margin-top:14px;font-size:13px;color:var(--text-2)}
.strz-legenda{display:flex;flex-wrap:wrap;gap:6px 16px}
.strz-leg{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.strz-leg svg{width:16px;height:16px;flex:none}
.strz-leg.mut{white-space:normal;color:var(--text-3)}
.boisko-nota{color:var(--text-3)}
@media(max-width:960px){
  .liczby-kol,.liczby-boisko{grid-column:1 / -1}
  .liczby-boisko{max-width:520px}
}
@media(max-width:560px){.strz-mapa{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
/* ===== pętle (ramka, okładka, przycisk przy ograniczonym ruchu) ===== */
.petla-ramka{position:relative;border-radius:var(--r12);overflow:hidden;background:var(--surface-2);border:1px solid var(--border-strong)}
.petla-ramka video,.petla-ramka img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
/* okładka pętli: leniwy obraz nad filmem bez postera; znika, gdy film naprawdę gra (klasa .gra na ramce) */
.okladka{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity var(--t-3) var(--ease-out)}
.gra>.okladka{opacity:0;pointer-events:none}
.petla-play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;border:0;background:var(--primary);color:var(--on-primary);cursor:pointer;display:none;place-items:center;box-shadow:0 0 0 8px var(--primary-soft);z-index:2}
.petla-play::after{content:"";width:0;height:0;border-left:16px solid currentColor;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.petla-play.pauza::after{width:14px;height:18px;border:0;border-left:5px solid currentColor;border-right:5px solid currentColor;margin:0}
html.petle-przycisk .petla-play{display:grid}
.petla-play.pauza{opacity:0;transition:opacity var(--t-2)}
.petla-ramka:hover .petla-play.pauza,.petla-play.pauza:focus-visible{opacity:1}

/* ===== co dostajesz (#dostajesz): jedna duża pętla, trzy mniejsze, różne szerokości i przesunięcia ===== */
.dost{row-gap:clamp(56px,7vw,104px);align-items:start}
.poz-a{grid-column:1 / span 8}
.poz-a h3{font-size:clamp(24px,2.4vw,34px)}
.poz-b{grid-column:9 / -1;align-self:end}
.poz-c{grid-column:1 / span 5}
.poz-d{grid-column:7 / -1;margin-top:clamp(0px,6vw,88px)}
@media(max-width:900px){
  .poz-a,.poz-b,.poz-c,.poz-d{grid-column:1 / -1;margin-top:0}
}

/* ===== gdy meczów przybywa (#wiecej): dwie kolumny o różnej szerokości, prawa przesunięta w dół ===== */
.wiecej-uklad{align-items:start}
.wiecej-kol{display:flex;flex-direction:column;gap:clamp(48px,6vw,88px);min-width:0}
.wiecej-l{grid-column:1 / span 7}
.wiecej-p{grid-column:8 / -1;padding-top:clamp(0px,9vw,140px)}
@media(max-width:900px){
  .wiecej-l,.wiecej-p{grid-column:1 / -1;padding-top:0}
  .wiecej-uklad{row-gap:clamp(48px,6vw,88px)}
}

/* ===== dane u trenera (#dane): jedna podwójna rama z dwiema kolumnami: „Zostaje na komputerze” i „Wychodzi przez internet” ===== */
.dane .kontener{align-items:center;row-gap:clamp(32px,6vw,56px)}
.dane-tekst{grid-column:1 / span 5}
.dane-tekst .lead{margin-top:clamp(18px,2vw,28px)}
.dane-link{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(20px,2.4vw,32px);min-height:var(--tap);border-bottom:1px solid var(--border-strong);font-size:15px;font-weight:600;color:var(--text);text-decoration:none;transition:border-color var(--t-2) var(--ease-out),color var(--t-2) var(--ease-out)}
.dane-link:hover{border-color:var(--primary);color:var(--primary)}
.dane .ikona{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dane-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-3) var(--ease-out)}
.dane-link:hover svg{transform:translateX(3px)}
/* podwójna rama: obudowa i rdzeń o współśrodkowych promieniach */
.dane-karta{grid-column:6 / -1;min-width:0;padding:6px;border-radius:var(--r20);background:var(--surface);border:1px solid var(--border);box-shadow:var(--cien-3)}
.dane-rdzen{border-radius:calc(var(--r20) - 6px);background:var(--surface-2);box-shadow:inset 0 1px 0 var(--krawedz-swiatlo);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.dane-kol{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,30px)}
.dane-kol+.dane-kol{border-left:1px solid var(--border);background:var(--surface)}
.dane-nag{display:flex;align-items:center;gap:12px;margin-bottom:6px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.dane-znak{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r12);background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary)}
.dane-kol+.dane-kol .dane-znak{background:var(--surface-3);border-color:var(--border-strong);color:var(--text-2)}
.dane-nag h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.dane-nag p{font-size:13px;color:var(--text-3)}
.dane-lista{list-style:none;display:flex;flex-direction:column}
.dane-lista li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
.dane-lista li:last-child{border-bottom:0}
.dane-lista .ikona{margin-top:1px;color:var(--text-2)}
.dane-lista b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.dane-lista span{display:block;margin-top:3px;font-size:14px;line-height:1.45;color:var(--text-2)}
.dane-kol:first-child .dane-lista{flex:1}
.dane-kol:first-child .dane-lista li{flex:1;align-items:center}
.dane-kol:first-child .dane-lista .ikona{margin-top:0;color:var(--primary)}
.dane-stopka{margin-top:auto;padding-top:12px;font-size:13px;color:var(--text-3)}
@media(max-width:1100px){
  .dane-tekst,.dane-karta{grid-column:1 / -1}
}
@media(max-width:700px){
  .dane-rdzen{grid-template-columns:minmax(0,1fr)}
  .dane-kol+.dane-kol{border-left:0;border-top:1px solid var(--border)}
}
/* ===== wymagania (#wymagania): siedem kart (System szeroka, reszta równa siatka), notka o 4K jako osobny pas ===== */
.req-siatka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.req-blok{min-width:0;display:flex;flex-direction:column;gap:6px;padding:16px 20px;border:1px solid var(--border);border-radius:var(--r16);background:var(--surface)}
.req-sys{grid-column:span 2}
.req-et{font-size:14px;font-weight:600;color:var(--text-2)}
.req-wart{font-size:clamp(24px,2.3vw,32px);font-weight:800;line-height:1.05;letter-spacing:-.04em;font-variant-numeric:tabular-nums;text-wrap:balance}
.req-sys .req-wart{font-size:clamp(36px,4.4vw,60px);line-height:1}
.req-opis{max-width:40ch;font-size:15px;color:var(--text-2)}
.req-note{grid-column:1 / -1;display:flex;align-items:flex-start;gap:12px;padding:12px 20px;border:1px dashed var(--border-strong);border-radius:var(--r12);background:var(--surface-2);font-size:15px;color:var(--text-2)}
.req-note svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--primary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){
  .req-siatka{grid-template-columns:repeat(2,minmax(0,1fr))}
  .req-sys{grid-column:1 / -1}
}
@media(max-width:560px){
  .req-siatka{grid-template-columns:minmax(0,1fr);gap:10px}
  .req-blok{gap:4px;padding:14px 18px}
  .req-note{padding:12px 16px}
}

/* ===== cennik (#cennik): dwa plany obok siebie, Coach wyróżniony ramką ===== */
.toggle{position:relative;display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r8);padding:4px;margin:0;isolation:isolate}
.toggle .suwak{position:absolute;top:4px;bottom:4px;left:4px;width:var(--sw,0px);transform:translateX(var(--sx,0px));border-radius:var(--r6);background:var(--surface-3);transition:transform var(--t-3) var(--ease-in-out),width var(--t-3) var(--ease-in-out);z-index:-1}
.cennik-opcje{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:clamp(36px,4vw,56px)}
.toggle-note{font-size:15px;color:var(--text-2);margin:0}
.toggle-note b{color:var(--text);font-weight:600}
.toggle button{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:14px;font-weight:600;padding:0 16px;min-height:var(--tap);border-radius:var(--r6);cursor:pointer;transition:color var(--t-2)}
.toggle button.on{color:var(--text)}
.toggle button em{font-style:normal;background:var(--primary);color:var(--on-primary);margin-left:8px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:var(--r6);white-space:nowrap}
.toggle{max-width:100%}
@media(max-width:560px){
  .toggle button{padding:0 12px;white-space:nowrap}
  .toggle button em{margin-left:6px;padding:2px 6px;font-size:11px}
}
.plans{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:56px;align-items:start}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding-top:clamp(24px,3vw,44px)}
/* położenie kart w siatce nie zależy od wyróżnienia; .hot daje tylko wygląd (tło i ramka) */
.plan-coach,.plan-pro{padding:clamp(24px,3vw,44px);border:1px solid transparent;border-radius:var(--r16)}
.plan-coach{grid-column:1 / span 6;grid-row:1}
.plan-pro{grid-column:7 / -1;grid-row:1}
.plan.hot{background:var(--surface);border-color:var(--primary)}
.plan .tag{position:absolute;top:-13px;left:clamp(24px,3vw,44px);background:var(--primary);color:var(--on-primary);font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r6)}
.plan h3{font-size:22px}
.plan .who{font-size:14px;color:var(--text-2);max-width:44ch}
.price{display:flex;align-items:baseline;gap:6px;line-height:1.05}
.price b{white-space:nowrap;font-size:clamp(34px,3.2vw,44px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price span{color:var(--text-2);font-size:14px;transition:opacity var(--t-2)}
/* cena: duża liczba, pod nią linia roczna (w trybie miesięcznym ukryta, ale zajmuje miejsce, więc karty nie skaczą), pod nią cena z drugiego trybu */
.price-box{display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.price-rok{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:26px;margin:0;font-size:14px;color:var(--text-2);transition:opacity var(--t-2)}
.price-rok .save{font-style:normal;font-size:12px;font-weight:700;padding:3px 8px;border-radius:var(--r6);background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--primary);white-space:nowrap}
.plans.mies .price-rok{display:none}
.price-alt{margin:0;font-size:13px;color:var(--text-3);transition:opacity var(--t-2)}
.plans.swap .price-rok,.plans.swap .price-alt{opacity:0}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text-2)}
.plan li{position:relative;padding-left:20px}
.plan li::before{content:"";position:absolute;left:0;top:.78em;width:9px;height:2px;border-radius:2px;background:var(--primary)}
.plan li.no{color:var(--text-3)}
.plan li.no::before{background:var(--text-3)}
.plan .btn{width:100%}
@media(max-width:1180px){
  .plan-coach,.plan-pro{grid-column:1 / -1;grid-row:auto}
}
.pricing-foot{margin-top:clamp(36px,4vw,56px);max-width:72ch;font-size:13px;color:var(--text-3)}
/* gwarancja zwrotu pod kartami cennika */
.gwarancja{display:flex;align-items:flex-start;gap:12px;margin-top:clamp(24px,3vw,36px);max-width:72ch;padding:14px 20px;border:1px solid var(--primary-line);border-radius:var(--r12);background:var(--primary-soft);font-size:15px;color:var(--text-2)}
.gwarancja b{color:var(--text)}
.gwarancja svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--primary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ceny-robocze{margin-top:10px;max-width:72ch;font-size:12px;color:var(--text-3)}
/* ===== co daje plan Pro (#cennik): „dochodzi” obok „czego Pro nie robi” ===== */
.pro-blok{margin-top:clamp(40px,5vw,72px)}
.pro-h{font-size:clamp(24px,2.4vw,32px);font-weight:700;letter-spacing:-.025em}
.pro-lead{margin-top:10px;max-width:60ch;font-size:16px;color:var(--text-2)}
.pro-kol{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:clamp(20px,2.4vw,28px)}
.pro-kol section{padding:clamp(18px,2.2vw,28px);border-radius:var(--r16);border:1px solid var(--border-strong);background:var(--surface-2)}
.pro-kol h4{font-size:18px;font-weight:700;letter-spacing:-.01em}
.pro-kol ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:18px}
.pro-kol li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start}
.pro-kol li svg{width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pro-kol li p{margin:0;font-size:15px;color:var(--text-2)}
.pro-kol li b{display:block;font-size:16px;font-weight:600;color:var(--text)}
.pro-kol .pro-nie{background:var(--surface);border-color:var(--border)}
.pro-nie h4{color:var(--text-2)}
.pro-nie li svg{stroke:var(--text-3)}
.pro-nie li b{color:var(--text-2)}
/* narzędzia odprawy: pełna szerokość pod dwiema kolumnami, wygląd jak „dochodzi w Pro” */
.pro-kol .pro-narz{grid-column:1 / -1}
.pro-narz-lead{margin-top:6px;font-size:15px;color:var(--text-2)}
@media(min-width:1024px){
  .pro-kol{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
  .pro-narz ul{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px}
}

/* ===== tabela porównania planów: widoczna od razu, grupy wierszy, kolumna Pro z tłem, nagłówek przylega pod paskiem strony ===== */
.tab-blok{margin-top:clamp(40px,5vw,72px)}
.tab{width:100%;margin-top:clamp(16px,2vw,24px);border-collapse:collapse;table-layout:fixed;font-size:15px;color:var(--text-2)}
.tab .tab-k1{width:40%}
.tab col.tab-hot{background:var(--surface)}
.tab th,.tab td{height:var(--tap);padding:10px 12px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle;overflow-wrap:anywhere}
.tab th[scope=row]{padding-left:0;text-align:left;font-weight:500;color:var(--text)}
.tab thead th{position:sticky;top:var(--nav-h-mala);z-index:2;height:auto;padding:12px 12px 10px;vertical-align:bottom;background:var(--bg);border-bottom:1px solid var(--border-strong);font-weight:600;color:var(--text)}
.tab thead th.hot{background:var(--surface);box-shadow:inset 0 2px 0 var(--primary)}
.tab-nazwa{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.tab-polecany{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:var(--r6);background:var(--primary);color:var(--on-primary);font-style:normal;font-size:11px;font-weight:700}
.tab-cena{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums}
.tab-cena b{font-weight:600;color:var(--text)}
.tab-cena small{font-size:12px;color:var(--text-3)}
.tab .tab-grupa th{height:auto;padding:28px 0 8px;border-bottom:1px solid var(--border-strong);text-align:left;font-size:14px;font-weight:700;color:var(--text-2)}
.tab tbody tr:first-child.tab-grupa th{padding-top:20px}
.tab svg{display:inline-block;width:20px;height:20px;vertical-align:middle;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tab-tak{stroke:var(--primary)}
.tab-nie{stroke:var(--text-3)}
@media(max-width:560px){
  .tab{font-size:13px}
  .tab .tab-k1{width:34%}
  .tab th,.tab td{padding:8px 4px}
  .tab th[scope=row]{padding-right:6px}
  .tab thead th{padding:10px 2px 8px}
  .tab-nazwa{font-size:14px}
  .tab-cena{font-size:11px}
  .tab-cena small{display:block;font-size:10px}
  .tab-polecany{padding:1px 4px;font-size:9px}
  .tab svg{width:18px;height:18px}
}

/* ===== pytania (#faq): nagłówek po lewej, szeroka kolumna po prawej ===== */
.faq-uklad{align-items:start;row-gap:32px}
.faq-uklad .sek-gl{grid-column:1 / span 4;margin-bottom:0}
.faq{grid-column:5 / -1}
.faq details{border-bottom:1px solid var(--border);padding:clamp(18px,2vw,28px) 0}
.faq details:first-child{border-top:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;font-weight:600;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.02em;line-height:1.25;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;color:var(--text);transition:color var(--t-1)}
.faq summary:hover{color:var(--primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;width:22px;height:22px;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--text-3);border-radius:2px;transform:translate(-50%,-50%);transition:transform var(--t-2) var(--ease-in-out),background var(--t-2)}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq details[open] summary .plus::before,.faq details[open] summary .plus::after{background:var(--primary)}
.faq-tresc{overflow:hidden}
.faq p{color:var(--text-2);margin-top:14px;font-size:clamp(16px,1.25vw,18px);max-width:62ch}
.faq p a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.faq p a:hover{color:var(--primary)}
@media(max-width:1100px){
  .faq-uklad .sek-gl,.faq{grid-column:1 / -1}
}

/* ===== na dole: jedno zdanie i jeden przycisk, asymetrycznie ===== */
.final .siatka{align-items:end;row-gap:32px}
.final .kino-h2{grid-column:1 / span 8}
.final-akcja{grid-column:9 / -1;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.final-akcja .podpis{margin-top:0}
@media(max-width:900px){
  .final .kino-h2,.final-akcja{grid-column:1 / -1}
}

/* ===== sekcje na jednym ekranie (od 1100 px szerokości): mniejsze odstępy pionowe, treść obok grafiki ===== */
/* Cel: sekcja z odstępami mieści się w oknie pod paskiem menu (1440x900 i 1366x768). Wyjątki: pierwszy ekran i opowieść #jak (przypięta). Tekst nie jest zmniejszany ani ucinany. */
@media(min-width:1100px){
  #liczby,#dostajesz,#wiecej,#dane,#wymagania,#cennik,#faq,section.final{padding-top:calc(var(--sekcja) * .4);padding-bottom:calc(var(--sekcja) * .4)}
  /* nagłówek sekcji: tytuł po lewej, zdanie pod nim po prawej (zamiast jednego pod drugim) */
  #dostajesz .sek-gl,#wiecej .sek-gl,#wymagania .sek-gl{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:24px;align-items:end;margin-bottom:clamp(20px,2.4vw,32px)}
  #dostajesz .sek-gl .kino-h2,#wiecej .sek-gl .kino-h2,#wymagania .sek-gl .kino-h2{max-width:none}
  #dostajesz .sek-gl .lead,#wiecej .sek-gl .lead,#wymagania .sek-gl .lead{margin-top:0}
  /* liczby: trzy liczby w rzędzie, mapa strzałów obok */
  .liczby .liczby-siatka{row-gap:0}
  .liczby-kol{grid-column:1 / span 6}
  .liczby-boisko{grid-column:7 / -1;max-width:none}
  .liczby-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);margin-top:clamp(20px,2.4vw,32px)}
  .liczba{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 0 0}
  .liczba b{min-width:0}
  .strz-mapa{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
  /* co dostajesz i gdy meczów przybywa: cztery pozycje w rzędzie */
  #dostajesz .dost,.wiecej-uklad{row-gap:0;align-items:start}
  #dostajesz .poz-a,#dostajesz .poz-b,#dostajesz .poz-c,#dostajesz .poz-d,.wiecej-uklad .poz{grid-column:span 3;margin-top:0;align-self:start}
  #dostajesz .poz-a h3{font-size:clamp(20px,1.7vw,24px)}
  .wiecej-kol{display:contents}
  /* cennik: nagłówek w dwóch kolumnach, przełącznik z uwagą w jednym rzędzie, plany ciaśniej, tabela porównania zwinięta */
  #cennik .sek-gl{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;align-items:end;margin-bottom:clamp(16px,2vw,24px)}
  #cennik .sek-gl .kino-h2{max-width:none}
  #cennik .sek-gl .lead{margin-top:0}
  .cennik-opcje{flex-direction:row;align-items:center;gap:20px;margin-bottom:clamp(16px,2vw,24px)}
  /* dwie karty obok siebie: wspólne rzędy (tytuł, opis, cena, przycisk, lista), więc ceny i przyciski stoją w jednej linii */
  .plans{row-gap:0;grid-template-rows:repeat(5,auto)}
  .plan{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;align-content:start;gap:12px;padding-top:24px}
  .plan-coach{grid-column:1 / span 6;grid-row:1 / span 5;padding:24px 28px}
  .plan-pro{grid-column:7 / -1;grid-row:1 / span 5;padding:24px 28px}
  .gwarancja{margin-top:20px}
  .pricing-foot{margin-top:20px}  /* pytania: ciaśniejsze wiersze */
  #faq .faq details{padding:clamp(8px,1vw,14px) 0}
  #faq .faq p{margin-top:8px}
}/* ===== okno próby (dialog): krok 1 formularz, krok 2 pobranie; te same id co dotąd ===== */
html:has(dialog[open]){overflow:hidden}
dialog.proba{margin:auto;padding:0;border:1px solid var(--border-strong);border-radius:var(--r16);background:var(--surface);color:var(--text);width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;box-shadow:var(--cien-okno)}
dialog.proba::backdrop{background:var(--zaslona);backdrop-filter:blur(4px)}
dialog.proba[open]{animation:okno-wejscie var(--t-2) var(--ease-out)}
@keyframes okno-wejscie{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.proba-box{position:relative;padding:32px 28px 28px}
.proba-box [hidden]{display:none}
.proba-x{position:absolute;top:10px;right:10px;width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:var(--r8);background:transparent;color:var(--text-2);cursor:pointer}
.proba-x:hover{background:var(--surface-2);color:var(--text)}
.proba-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.proba-box h2{font-size:26px;letter-spacing:-.02em;padding-right:40px;margin-bottom:8px}
.proba-box h2:focus{outline:none}
.proba-lead{color:var(--text-2);font-size:15px;margin-bottom:22px;overflow-wrap:anywhere}
.proba-lead b{color:var(--text);font-weight:600}
.proba-box label.pole{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.proba-box input[type=email]{width:100%;height:48px;padding:0 14px;border-radius:var(--r8);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.proba-box input[type=email]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.proba-box input[aria-invalid=true],.proba-box input[aria-invalid=true]:focus-visible{border-color:var(--danger)}
.proba-box input[aria-invalid=true]:focus-visible{outline-color:var(--danger)}
#p2Adres{margin-bottom:4px}
.zgoda{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:14px;color:var(--text-2);cursor:pointer;min-height:var(--tap)}
.zgoda input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--primary);cursor:pointer}
.zgoda a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.zgoda a:hover{color:var(--primary)}
.blad{margin-top:6px;font-size:13px;color:var(--danger)}
.proba-ts{margin-top:16px;min-height:65px}
.proba-box .btn-duzy{width:100%;height:52px;font-size:16px;margin-top:18px}
.proba-box .btn[disabled]{opacity:.6;cursor:default}
.proba-note{margin-top:14px;font-size:13px;color:var(--text-3);text-align:center}
.proba-kroki{list-style:none;counter-reset:k;margin:22px 0 0;display:flex;flex-direction:column;gap:12px}
.proba-kroki li{counter-increment:k;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:15px;color:var(--text-2)}
.proba-kroki li::before{content:counter(k);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:13px}
.proba-kroki button,.proba-box .link-przycisk{background:none;border:0;padding:0;font:inherit;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.proba-kroki button:hover{color:var(--primary)}
.proba-notka{margin-top:20px;padding:14px 16px;border-left:3px solid var(--primary);background:var(--surface-2);border-radius:0 var(--r8) var(--r8) 0;font-size:13px;color:var(--text-2)}
.proba-notka p+p{margin-top:8px}
.proba-notka b{color:var(--text);font-weight:600}
.proba-podglad{margin-top:10px;font-size:12px;color:var(--warning);text-align:center}

/* ===== odsłanianie na przewijaniu: ukrycie tylko pod html.anim, każdy rodzaj elementu wchodzi inaczej ===== */
/* tekst: krótki wjazd; nagłówek (rv-n): dłuższy i wyższy; obraz (rv-o): od dołu z lekkim powiększeniem; lista (rv-l): pozycje jedna po drugiej */
.anim .rv{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.anim .rv-n{transform:translate3d(0,40px,0);transition-duration:var(--t-4)}
.anim .rv-o{transform:translate3d(0,32px,0) scale(.965);transform-origin:50% 100%;transition-duration:var(--t-4)}
.anim .rv.in{opacity:1;transform:none}
.anim .rv-l>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--t-3) var(--ease-out),transform var(--t-3) var(--ease-out)}
.anim .rv-l.in>*{opacity:1;transform:none}
.anim .rv-l.in>*:nth-child(2){transition-delay:90ms}
.anim .rv-l.in>*:nth-child(3){transition-delay:180ms}
.anim .rv-l.in>*:nth-child(4){transition-delay:270ms}
.rv.d1{transition-delay:80ms}.rv.d2{transition-delay:160ms}.rv.d3{transition-delay:240ms}

/* ===== przejścia między stronami (gdzie przeglądarka umie) ===== */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-2)}

/* ===== ograniczony ruch: bez animacji i przejść, treść od razu ===== */
@media(prefers-reduced-motion:reduce){
  dialog.proba[open]{animation:none}
  @view-transition{navigation:none}
}