/* ==========================================================================
   ewardega UI v3 "Meridian": landing kursu (ui/kurs.php)
   Wzorzec: docs/redesign/makiety/v3/final/kurs.html + style.css sekcja 14.
   Wspólne (okruszki, pasek zakupu, sheet, picks, podsumowanie, opinie, FAQ, płyty) są w ui.css.
   Mapa tonów: D hero · L program · D film (płyta) · L dla kogo · L/papier w cenie · L opinie ·
   L/papier terminy · D prowadząca (płyta) · L FAQ · D finał (footer-ui.php).
   ========================================================================== */

/* 1. Hero kursu (ciemne): kadr kursu z maską, tekst z lewej, karta zakupu z prawej ---------- */
.ui-kh { position: relative; isolation: isolate; color: var(--ui-snow); background: var(--ui-noir); overflow: clip; padding: calc(var(--ui-hd) + var(--ui-hero-pt)) 0 clamp(56px, 7vw, 96px); }
.ui-kh::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("img/grain.webp") repeat 0 0 / 96px; opacity: .04; mix-blend-mode: screen; }
.ui-kh__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; view-transition-name: kurs-media; }
.ui-kh__bg picture { display: contents; }
.ui-kh__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kh-pos, 60% 40%); opacity: .9; }
.ui-kh__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ui-noir) 6%, rgba(11, 9, 7, .78) 40%, rgba(11, 9, 7, .1) 75%), linear-gradient(180deg, rgba(11, 9, 7, .6), transparent 30%, transparent 60%, var(--ui-noir)); }
@media (max-width: 899px) {
	.ui-kh__bg { inset: 0 0 auto 0; height: 440px; }
	.ui-kh__bg img { object-position: var(--kh-pos-m, 50% 30%); }
	.ui-kh__bg::after { background: linear-gradient(180deg, rgba(11, 9, 7, .55), rgba(11, 9, 7, .15) 38%, var(--ui-noir) 96%); }
	/* Kadr z ogniskiem nisko (deep tissue: łokieć na plecach): obraz w górę o --kh-lift, maska zaczyna się niżej */
	.ui-kh__bg--lift img { height: calc(100% + var(--kh-lift, 0px)); margin-top: calc(-1 * var(--kh-lift, 0px)); }
	.ui-kh__bg--lift::after { background: linear-gradient(180deg, rgba(11, 9, 7, .55), rgba(11, 9, 7, .05) 30%, rgba(11, 9, 7, .1) 66%, var(--ui-noir) 98%); }
}
/* Odbiór kursu 2026-10-12: kadr z twarzą wysoko (Master, 1:1) opuszczony o --kh-drop, żeby twarz wypadła między okruszkami
   a eyebrow (pas ok. 140 do 260 px), a nie pod tekstem okruszków. Górna krawędź kadru wtapia się w czerń maską. */
@media (max-width: 599px) {
	.ui-kh__bg--drop img { margin-top: var(--kh-drop, 0px); height: calc(100% - var(--kh-drop, 0px)); -webkit-mask-image: linear-gradient(transparent, #000 88px); mask-image: linear-gradient(transparent, #000 88px); }
}
/* Wejście krótkie (elewacja.md §2.3): kadr, eyebrow, lead i linie stoją od pierwszej klatki; ruszają tylko wiersze
   nazwy kursu (data-split, ui.js 22a) i karta zakupu (.ui-enter: desktop z prawej, telefon z dołu, rama stoi). */
@media (min-width: 1024px) { .ui-buy.ui-enter { --enter-x: 24px; --enter-y: 0; } }
/* Kropka-akcent jedzie z ostatnim wierszem nazwy, gdy nazwa jest podzielona na wiersze */
.ui-kh__n.ui-lines::after { content: none; }
.ui-kh__n.ui-lines .ui-ln:last-child .ui-ln__i::after { content: "." / ""; color: var(--ui-orange); font-weight: 400; }
.ui-kh__in { display: grid; gap: 32px; align-items: end; margin-top: 24px; }
@media (min-width: 1024px) { .ui-kh__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; margin-top: 56px; } }
@media (max-width: 1023px) { .ui-kh__copy { padding-top: 188px; } }
.ui-kh__copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.ui-kh h1 { max-width: 12em; } /* stopień: --ui-h1-page (ui.css 21) */
/* Kropka-akcent nazwy kursu: pseudo-element z pustym tekstem alternatywnym, więc nie trafia do textContent H1 */
.ui-kh__n::after { content: "." / ""; color: var(--ui-orange); font-weight: 400; }
.ui-kh__n--ciag::after { content: none; }
/* Desktop: kadr kursu stoi w jasnym pasie między kolumną tekstu a kartą (ok. 45 do 60% okna). --kh-x (ewardega_ui_kurs_frames)
   przesuwa obiekt kursu w ten pas. Maska: mocno pod tekstem po lewej, prawie nic w pasie obiektu, lekko pod kartą
   (karta ma własne szkło). Bez filtra CSS na obrazie LCP (elewacja.md §7): pas obiektu ma lżejszą maskę. */
@media (min-width: 1024px) {
	.ui-kh__bg img { translate: var(--kh-x, 0) var(--kh-y, 0); opacity: 1; }
	/* Kadr opuszczony o --kh-y (1:1: głowa Ewy pod menu z zapasem), górna krawędź wtopiona w czerń */
	.ui-kh__bg--drop img { -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--kh-y, 0px) + 96px)); mask-image: linear-gradient(transparent, #000 calc(var(--kh-y, 0px) + 96px)); }
	/* v5: kadr przesunięty w lewo (--kh-x ujemne): prawa krawędź obrazu wtapia się w czerń od --kh-fade, pod kartą bez twardej krawędzi */
	.ui-kh__bg--fade img { -webkit-mask-image: linear-gradient(90deg, #000 var(--kh-fade, 82%), transparent); mask-image: linear-gradient(90deg, #000 var(--kh-fade, 82%), transparent); }
	.ui-kh__bg--drop.ui-kh__bg--fade img { -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--kh-y, 0px) + 96px)), linear-gradient(90deg, #000 var(--kh-fade, 82%), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 calc(var(--kh-y, 0px) + 96px)), linear-gradient(90deg, #000 var(--kh-fade, 82%), transparent); mask-composite: intersect; }
	/* v5 r2 (krytyka: "40% kadru to brązowe błoto"): zasłona tylko pod kolumną tekstu i lekko pod menu, bez przyciemniania
	   prawej strony (karta ma własne szkło) i bez winiety; dół wtapia się w czerń dopiero w ostatnich 14%, pod arkuszem. */
	.ui-kh__bg::after { background:
		linear-gradient(90deg, rgba(11, 9, 7, .86) 0%, rgba(11, 9, 7, .74) 18%, rgba(11, 9, 7, .5) 32%, rgba(11, 9, 7, .16) 44%, transparent 54%),
		linear-gradient(180deg, rgba(11, 9, 7, .42), transparent 16%, transparent 86%, rgba(11, 9, 7, .6)); }
	/* Karta zakupu: lżejsze szkło, kadr prześwituje spod karty */
	.ui-buy { background: rgba(21, 17, 13, .66); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
}
.ui-kh h1 small { display: block; font-size: .44em; letter-spacing: -.02em; color: var(--ui-snow-2); margin-top: .35em; line-height: 1.2; }
/* Zlecenie 2026-10 (nazwy kursów): nazwa autorska kursu pod H1 ("Orient Body Flow® Adept"), złotem jak eyebrow, bez wersalików */
.ui-kh__brand { margin: -10px 0 0; font-size: var(--ui-fs-s); font-weight: 600; letter-spacing: .02em; line-height: 1.4; color: var(--ui-gold); }
/* Znak ® (sup.r): jedna reguła w ui.css (sekcja 2), lokalnych korekt wysokości i odstępów nie ma */
.ui-kh .ui-eyebrow { line-height: 1.5; }
/* Etykiety z segmentami "A · B": segment nie łamie się w środku (twarde spacje z PHP), wiersze wyrównane */
.ui-k .ui-eyebrow, .ui-k .ui-chap, .ui-k .ui-picks > legend { text-wrap: balance; }
/* Segmenty etykiety (ewardega_ui_kurs_segs): segment nie łamie się w środku, a kropka segmentu, który zaczyna
   nowy wiersz, wychodzi poza lewą krawędź i jest przycięta (overflow-x: clip), więc nie wisi na brzegu wiersza */
.ui-ksegs { display: block; min-width: 0; overflow-x: clip; }
.ui-ksegs__i { display: flex; flex-wrap: wrap; row-gap: .15em; margin-left: -1.4em; }
.ui-ksegs__i > span { white-space: nowrap; }
.ui-ksegs__i > span:first-child { padding-left: 1.4em; }
.ui-ksegs__d { display: inline-block; width: 1.4em; text-align: center; letter-spacing: 0; white-space: pre; }
/* Cena i najbliższy termin w pierwszym ekranie telefonu (karta zakupu stoi niżej) */
.ui-kh__quick { display: none; }
@media (max-width: 1023px) {
	.ui-kh__quick { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: -6px; padding: 8px 16px; border-radius: 99px; font-size: var(--ui-fs-s); color: var(--ui-snow-2); background: rgba(246, 242, 236, .06); border: 1px solid var(--ui-hair); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color var(--ui-t2), background-color var(--ui-t2); }
	.ui-kh__quick > span { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
	.ui-kh__quick b { color: var(--ui-snow); font-weight: 700; }
	.ui-kh__quick .ui-sep::before { margin-inline: .45em; }
	.ui-kh__quick .ui-ic { flex: none; color: var(--ui-gold); transition: transform var(--ui-t2) var(--ui-ease); }
	.ui-kh__quick:hover { border-color: var(--ui-hair-2); background: rgba(246, 242, 236, .1); }
	.ui-kh__quick:hover .ui-ic { transform: translateX(3px); }
	.ui-kh__quick:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
}
/* Telefon (do 599 px): pomarańczowy "Wybierz termin" w pierwszym ekranie zamiast pigułki z ceną; cena, zadatek
   i termin jednym wierszem pod przyciskiem. Od 600 px zostaje pigułka (karta zakupu stoi blisko). */
.ui-kh__go { display: none; }
@media (max-width: 599px) {
	.ui-kh__go { display: grid; gap: 8px; width: 100%; margin-top: -4px; }
	.ui-kh__go .ui-xs { color: var(--ui-snow-2); text-align: center; }
	.ui-kh__quick--t { display: none; }
	/* Kadr nad tekstem krótszy o 48 px: przycisk wchodzi w ekran 390x844 */
	.ui-kh__copy { padding-top: 128px; }
}
/* Kadr miękki od 1280 px (ewardega_ui_kurs_frames 'soft': Master, Classic, Deep Tissue): tło to poświata (rozmycie
   wpalone w plik, bez filtra CSS), ostry kadr kursu w oknie 4:5 między kolumną tekstu a kartą. Runda 3: okno jest
   bohaterem pierwszego ekranu (ok. 330 do 368 px, wcześniej 264 px), góra okna na wysokości eyebrow i H1. */
.ui-kh__win { display: none; }
@media (min-width: 1280px) {
	.ui-kh--soft .ui-kh__in { grid-template-columns: minmax(0, 1fr) clamp(300px, 25.6vw, 368px) minmax(352px, .72fr); column-gap: clamp(28px, 3vw, 44px); }
	.ui-kh--soft h1 { font-size: min(var(--ui-h1-page), 4.4vw); }
	.ui-kh--soft .ui-trust--3 > * { padding-inline: 14px; }
	.ui-kh--soft .ui-trust--3 > :first-child { padding-left: 0; }
	.ui-kh--soft .ui-trust--3 > * > span { white-space: nowrap; }
	.ui-kh--soft .ui-kh__bg img { translate: none; opacity: .95; }
	.ui-kh--soft .ui-kh__bg::after { background: linear-gradient(90deg, rgba(11, 9, 7, .82), rgba(11, 9, 7, .35) 55%, rgba(11, 9, 7, .55)), linear-gradient(180deg, rgba(11, 9, 7, .5), transparent 30%, transparent 70%, var(--ui-noir)); }
	.ui-kh--soft .ui-kh__win { display: block; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--ui-r-l); box-shadow: 0 0 0 1px var(--ui-hair), 0 40px 80px -40px rgba(0, 0, 0, .75); }
	.ui-kh--soft .ui-kh__win img { position: absolute; inset: 0; }
}
/* Okruszki: cel 44 px z pseudo-elementu (8 px w każdą stronę), a nie z min-width, który odsuwał kropkę od krótkiego
   "Start" dwa razy dalej niż od "Szkolenia" (recenzja r2). Propozycja do ui.css: to samo dla wszystkich stron. */
.ui-kh .ui-crumbs a { position: relative; min-width: 0; }
.ui-kh .ui-crumbs a::after { content: ""; position: absolute; inset: 0 -8px; }
/* Bez JS ton headera nie przełącza się nad jasnymi sekcjami (białe logo na kości słoniowej): stałe ciemne tło.
   Propozycja do ui.css (fundament) dla wszystkich stron z ciemnym hero. */
html:not(.ui-js) .ui-hd { background: var(--ui-noir); }
/* Odbiór kursu 2026-10-12: bez JS nagłówek (ui.css: position absolute) brał top: 0 z reguły sticky i wchodził pod pasek
   promo. top: auto zostawia go w miejscu statycznym, pod paskiem. Propozycja do ui.css: to samo dla wszystkich stron. */
html:not(.ui-js) .ui-hd--over { top: auto; }
/* Okruszki w jednym wierszu: długa nazwa kursu skraca się wielokropkiem zamiast spadać do nowej linii */
.ui-kh .ui-crumbs { flex-wrap: nowrap; min-width: 0; }
.ui-kh .ui-crumbs > * { flex: none; }
.ui-kh .ui-crumbs > span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-kh .ui-trust { width: 100%; }
.ui-usp { display: grid; gap: 10px; margin-top: 4px; }
.ui-usp li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--ui-fs-s); line-height: 1.5; color: var(--ui-snow-2); }
.ui-usp .ui-ic { color: var(--ui-gold); margin-top: 1px; }

/* Karta zakupu #ui-buy (szkło na kadrze, backdrop-filter dozwolony: karta hero) */
.ui-buy { position: relative; display: grid; gap: 16px; padding: 22px; border-radius: var(--ui-r-l); color: var(--ui-snow); background: rgba(21, 17, 13, .8); border: 1px solid var(--ui-hair); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--ui-sh-d); min-width: 0; }
.ui-buy::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(160deg, rgba(201, 164, 106, .55), transparent 38%, transparent 70%, rgba(201, 164, 106, .25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ui-buy__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; }
.ui-buy__top .ui-chip { flex: none; }
@media (max-width: 599px) { .ui-buy__x { display: none; } .ui-buy__top .ui-label { letter-spacing: .1em; } }
/* Odbiór kursu 2026-10-12: wąska karta (kadr miękki od 1280 px: Master, Deep Tissue, Classic) łamała etykietę na
   "LEVEL MASTER ·" / "REZERWACJA Z ZADATKIEM", z kropką na końcu wiersza. Karta węższa niż 520 px: sam poziom kursu. */
.ui-buy { container-type: inline-size; }
@container (max-width: 519px) { .ui-buy__x { display: none; } }
.ui-buy .ui-price-box__top b { font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); }
.ui-buy .ui-price-box__row { grid-template-columns: auto auto; justify-content: space-between; }
.ui-buy .ui-price-box__row b { white-space: nowrap; }
.ui-buy__next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: center; font-size: var(--ui-fs-s); color: var(--ui-snow-2); }
.ui-buy__next > span:first-child { display: inline-flex; align-items: center; flex-wrap: wrap; }
.ui-buy__next .ui-ic { color: var(--ui-gold); margin-right: 8px; }
.ui-buy__next b { margin-left: .3em; }
.ui-buy__next b { color: var(--ui-snow); font-weight: 700; }
.ui-buy__next .ui-sep::before { margin-inline: .35em; }
.ui-buy__acts { display: grid; gap: 8px; }
.ui-buy__acts .ui-btn--ghost .ui-ic { width: 18px; height: 18px; }
/* Stan bez terminów: dzwonek, tytuł, powiadomienie (ilustracja techniki stoi raz, w nagłówku programu) */
.ui-buy__soon { display: grid; gap: 10px; padding: 18px; border-radius: var(--ui-r); background: rgba(246, 242, 236, .05); border: 1px solid var(--ui-hair); }
.ui-buy__il { display: block; color: var(--ui-gold); margin-bottom: 4px; }
.ui-buy__il > .ui-ic { width: 40px; height: 40px; stroke-width: 1.1; }
.ui-buy__soon .ui-d3 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.ui-btn--snow { --b-bg: var(--ui-snow); --b-fg: var(--ui-noir); --b-bd: var(--ui-snow); }
.ui-btn--snow:hover { --b-bg: #fff; --b-bd: #fff; }

/* Nagłówek sekcji przy kolumnie bocznej (program, prowadząca, FAQ) */
.ui-head.ui-head--flush { margin-bottom: 24px; }
/* 2. 01 Program: sygnatura "Okno 90%" (elewacja.md §3.2) ----------------------------------------
   Od 1024 px scena lepka 5/12 (łuk z kadrem i 90%) obok modułów 7/12; trzy pierwsze moduły to kroki
   sceny (60vh). Telefon i tablet: scena nad modułami. Łuk żyje tylko tu (jedyny łuk w serwisie). */
.ui-story { display: grid; gap: clamp(32px, 4vw, 56px); }
.ui-scene { display: grid; gap: 22px; align-content: start; min-width: 0; }
.ui-scene__fig { display: grid; gap: 12px; margin: 0; min-width: 0; min-height: 0; }
.ui-arch-w { position: relative; width: 100%; max-width: 480px; aspect-ratio: 4 / 5; }
.ui-arch { position: absolute; inset: 0; overflow: clip; border-radius: 999px 999px var(--ui-r-l) var(--ui-r-l); background: var(--ui-plate); clip-path: inset(0 round 999px 999px 0 0); }
.ui-arch picture { display: contents; }
.ui-arch img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Znacznik chowania paska zakupu (ui/kurs.php): tylko desktop, w lepkiej scenie */
.ui-kbbx { display: none; }
@media (min-width: 1024px) { .ui-kbbx { display: block; position: absolute; inset: 0; pointer-events: none; } }
.ui-k9 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; margin: 0; }
.ui-k9 .ui-num { font-size: clamp(4.5rem, 3.6rem + 2.4vw, 6rem); }
.ui-k9 .ui-num small { font-size: .4em; font-weight: 300; vertical-align: 1.05em; margin-left: .04em; }
.ui-k9__t { flex: 1 1 150px; display: grid; gap: 4px; padding-bottom: .55em; min-width: 0; }
.ui-k9__t b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; }
.ui-k9__t span { max-width: 30ch; font-size: var(--ui-fs-xs); line-height: 1.45; color: var(--ui-ink-3); }
.ui-step { position: relative; }
/* Znaczniki kroków (.ui-sm, puste): IO z ui.js dodaje .in, gdy znacznik wejdzie w okno (krok ok. 72% wysokości okna) */
.ui-sm { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.ui-step .ui-sm { top: 22vh; }
.ui-arch-w .ui-sm { top: 30%; }
@media (min-width: 1024px) {
	.ui-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
	.ui-story--bare { grid-template-columns: minmax(0, 1fr); }
	.ui-scene { position: sticky; top: calc(var(--ui-hd) + 6vh); height: 80vh; min-height: 540px; max-height: 780px; grid-template-rows: minmax(0, 1fr) auto; }
	.ui-scene__fig { grid-template-rows: minmax(0, 1fr) auto; }
	/* min-width: 0: bez tego aspect-ratio przenosi minimalną szerokość z wysokości i kadr wychodzi pod moduły (1024 px) */
	.ui-arch-w { width: auto; height: 100%; min-width: 0; max-width: 100%; }
}
/* Ruch sceny: łuk otwiera się z wąskiego portalu (kurtyna 1,2 s), 90% wchodzi z maski.
   Telefon: jeden znacznik w scenie, kroki po kolei czasem. Desktop: krok k = znacznik w module k. */
@media (prefers-reduced-motion: no-preference) {
	.ui-arch { transition: clip-path 1.2s var(--ui-ease-curtain); }
	.ui-arch img { transition: scale 1.6s var(--ui-ease-out-expo); }
	.ui-k9 > [aria-hidden] { transition: opacity .7s var(--ui-ease) var(--num-d, 0s), translate .9s var(--ui-ease-out-expo) var(--num-d, 0s); }
	.js .ui-story { --num-d: .7s; }
	/* Stan początkowy: żaden znacznik jeszcze nie wszedł. Krok osiągnięty, gdy wszedł jego znacznik albo dalszy
	   (szybkie przewinięcie albo skok kotwicą nie zostawia sceny w połowie). */
	.js .ui-story:not(:has(.ui-sm.in)) .ui-arch { clip-path: inset(14% 20% 0 20% round 999px 999px 0 0); }
	.js .ui-story:not(:has(.ui-sm.in)) .ui-arch img { scale: 1.06; }
	.js .ui-story:not(:has(.ui-sm.in)) .ui-k9 > [aria-hidden] { opacity: 0; translate: 0 32px; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	.js .ui-story { --num-d: 0s; }
	/* Krok 31vh z kartą w środku: przy 1280x720 i 1440x900 w oknie zawsze stoi pełna karta, a pusta przerwa między
	   kartami nie przekracza ok. 200 px. Ciągła oś znika; przy kartach kroków zostają krótkie odcinki osi. */
	/* Odbiór kursu 2026-10-12: kroki 31vh dawały karty co ok. 290 px, a dwie ostatnie (bez kroku) sklejone co 10 px, więc
	   przy wolnym przewijaniu prawa kolumna wyglądała na w połowie wczytaną. Teraz jeden rytm dla całej listy: odstęp 80 px
	   i krótkie odcinki osi przy każdej karcie. Znaczniki kroków zostają w kartach 1 do 3, scena przechodzi kroki szybciej. */
	.js .ui-mods:has(.ui-step--s) { gap: 80px; }
	.js .ui-step--s .ui-sm { top: 50%; }
	.js .ui-mods:has(.ui-step--s)::before { content: none; }
	.js .ui-mods:has(.ui-step--s) .ui-mod::before, .js .ui-mods:has(.ui-step--s) .ui-mod::after { content: ""; position: absolute; left: 40px; width: 1px; height: 40px; pointer-events: none; }
	.js .ui-mods:has(.ui-step--s) .ui-mod::before { bottom: 100%; background: linear-gradient(transparent, var(--ui-gold)); }
	.js .ui-mods:has(.ui-step--s) .ui-mod::after { top: 100%; background: linear-gradient(var(--ui-gold), transparent); }
	.js .ui-story:not(:has(:is(.ui-sm--1, .ui-sm--2, .ui-sm--3).in)) .ui-arch { clip-path: inset(14% 20% 0 20% round 999px 999px 0 0); }
	.js .ui-story:not(:has(:is(.ui-sm--1, .ui-sm--2, .ui-sm--3).in)) .ui-arch img { scale: 1.06; }
	.js .ui-story:not(:has(.ui-sm--3.in)) .ui-k9 > [aria-hidden] { opacity: 0; translate: 0 32px; }
}
.ui-mods { position: relative; display: grid; gap: 10px; align-content: start; }
/* Oś: środek kolumny znaków (ramka 1 + padding 12 + połowa kolumny 56 = 41 px), jedna średnica kółek 48 px */
.ui-mods::before { content: ""; position: absolute; left: 40.5px; top: 40px; bottom: 40px; width: 1px; background: linear-gradient(var(--ui-gold), var(--ui-gold-a)); }
.ui-mod { position: relative; border-radius: var(--ui-r); background: var(--ui-card); border: 1px solid var(--ui-line); transition: box-shadow var(--ui-t2), border-color var(--ui-t2); }
.ui-mod[open] { box-shadow: var(--ui-sh-1); border-color: var(--ui-line-2); }
.ui-mod summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; align-items: center; gap: 12px; min-height: 80px; padding: 12px 16px 12px 12px; cursor: pointer; list-style: none; border-radius: inherit; }
.ui-mod summary::-webkit-details-marker { display: none; }
.ui-mod summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-mod summary:hover .ui-faq__i { border-color: var(--ui-ink); }
.ui-mod__n { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ui-card); border: 1px solid var(--ui-gold); color: var(--ui-gold-ink); }
.ui-mod__n .ui-ic { width: 22px; height: 22px; stroke-width: 1.1; }
/* Ilustracja techniki w tym samym kole 48 px co ikona, z oddechem od obwodu (narożniki rysunku nie dotykają krawędzi) */
.ui-mod__n--il .il { width: 30px; height: 23px; color: var(--ui-gold-ink); }
.ui-mod summary b { display: block; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.ui-mod summary small { font-size: var(--ui-fs-xs); color: var(--ui-gold-ink); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ui-mod__b { padding: 0 20px 20px 80px; color: var(--ui-ink-2); display: grid; gap: 10px; }
.ui-mod__b ul { display: grid; gap: 8px; }
.ui-mod__b li { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 12px; }
.ui-mod__b li::before { content: ""; width: 5px; height: 5px; margin-top: .65em; border-radius: 50%; background: var(--ui-gold); }
.ui-mod .ui-faq__i { justify-self: end; }
.ui-mod[open] .ui-faq__i { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-mod[open] .ui-faq__i::after { rotate: 0deg; }
/* Od 960 px z JS moduły są zawsze otwarte (data-open-wide): przełącznik znika i wraca tylko na hover i fokus
   (pięć identycznych minusów obok siebie to szum). Bez JS zostaje widoczny, bo moduł może być zwinięty. */
@media (min-width: 960px) {
	.ui-js .ui-mod .ui-faq__i, .ui-js .ui-incl__g .ui-faq__i { opacity: 0; transition: opacity var(--ui-t2), background-color var(--ui-t2), border-color var(--ui-t2); }
	.ui-js .ui-mod summary:hover .ui-faq__i, .ui-js .ui-mod summary:focus-visible .ui-faq__i,
	.ui-js .ui-incl__g summary:hover .ui-faq__i, .ui-js .ui-incl__g summary:focus-visible .ui-faq__i { opacity: 1; }
}
@media (max-width: 599px) { .ui-mod__b { padding-left: 80px; } }
@supports (interpolate-size: allow-keywords) {
	.ui-mods { interpolate-size: allow-keywords; }
	.ui-mod::details-content { height: 0; overflow: clip; transition: height var(--ui-t3) var(--ui-ease), content-visibility var(--ui-t3) allow-discrete; }
	.ui-mod[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-mod::details-content { transition: none; } }
/* Korzyści (3 karty) */
.ui-bens { display: grid; gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.ui-bens:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
/* Telefon (budżet długości 390, elewacja.md §6): bez powtórzeń. Chipy karty zakupu powtarzają wyróżniki i wiersz pod
   przyciskiem hero, notki karty terminu powtarzają pasek nad nagłówkiem i chipy, chipy Prowadzącej powtarzają lead. */
@media (max-width: 599px) {
	.ui-buy .ui-chips, .ui-kt__sum .ui-notes, .ui-kewa .ui-chips { display: none; }
	.ui-kewa__more { margin-top: 20px; }
}
/* Odbiór kursu 2026-10-12: telefon (ruch z reklam Meta) widzi korzyści jako poziomy pasek trzech kart ze snapem
   (wcześniej ukryte), karta ok. 80% szerokości, więc brzeg następnej podpowiada przewijanie. Wysokość jednej karty. */
@media (max-width: 599px) {
	.ui-bens { grid-auto-flow: column; grid-auto-columns: min(80%, 300px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ui-g); margin-inline: calc(-1 * var(--ui-g)); padding: 4px var(--ui-g) 8px; scrollbar-width: none; }
	.ui-bens::-webkit-scrollbar { display: none; }
	.ui-bens > .ui-ben { scroll-snap-align: start; padding: 18px; gap: 10px; }
}
@media (min-width: 900px) { .ui-bens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-ben { padding: 22px; display: grid; gap: 14px; align-content: start; }
.ui-ben h3 { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 600; }
.ui-ben h3 .ui-ic { color: var(--ui-gold-ink); }
.ui-ben ul { display: grid; gap: 8px; font-size: var(--ui-fs-s); color: var(--ui-ink-2); }
.ui-ben li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.ui-ben li .ui-ic { width: 16px; height: 16px; color: var(--ui-gold-ink); margin-top: 3px; stroke-width: 2; }

/* 3. Pas filmu + kadry ze szkolenia (jedna ciemna płyta) -------------------------------------- */
.ui-filmgal.ui-sec { padding-block: 0 clamp(28px, 4vw, 56px); }
.ui-film { position: relative; display: grid; place-items: center; min-height: clamp(380px, 52vw, 640px); overflow: hidden; }
.ui-js .ui-film[data-view] { cursor: pointer; }
.ui-film picture { display: contents; }
/* Kadr pasa jasny (runda 2: kadry dzienne kk-film-*, ok. 30% luminancji): zamiast ciemnej winiety na całym kadrze
   przyciemnienie tylko pod tekstem w środku i miękkie zejście w płytę u dołu */
.ui-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(180deg, #000 74%, transparent); mask: linear-gradient(180deg, #000 74%, transparent); }
.ui-film::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 46% at 50% 56%, rgba(11, 9, 7, .58), rgba(11, 9, 7, .2)), linear-gradient(180deg, rgba(11, 9, 7, .2), transparent 26%, transparent 64%, rgba(11, 9, 7, .45)); }
/* v5 r2: kurs bez posteru (Classic, Wellness): film na samej ciemnej płycie, niższy pas, bez maski i zasłony obrazu */
.ui-film.ui-film--bez { min-height: clamp(260px, 30vw, 400px); }
.ui-film.ui-film--bez::after { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(246, 242, 236, .05), transparent 70%); }
.ui-film__in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; text-align: center; padding: 48px var(--ui-g); }
.ui-film__in > .ui-label { margin-bottom: 16px; }
/* Postery v4 są jasne: etykieta w ciemnej pigułce (złoto hi na 72% czerni daje ok. 4,6:1 nawet na białej ścianie) */
.ui-film .ui-film__in > .ui-label { padding: 6px 12px 6px 14px; border-radius: 999px; color: var(--ui-gold-hi); background: rgba(11, 9, 7, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Telefon, poster z twarzą Ewy u góry (Adept, Classic): etykieta pod tytułem, twarz stoi obok przycisku play */
@media (max-width: 599px) { .ui-film--lab-dol .ui-film__in > .ui-label { order: 3; margin-bottom: 0; } }
.ui-film__in .ui-small { color: var(--ui-snow-2); }
.ui-film__btn { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; color: var(--ui-noir); background: var(--ui-snow); transition: transform var(--ui-t2) var(--ui-spring), translate .5s var(--ui-ease); }
.ui-film__btn:hover { transform: scale(1.05); }
.ui-film__btn:active { transform: scale(.97); }
.ui-film__btn .ui-ic { width: 28px; height: 28px; fill: currentColor; margin-left: 4px; }
.ui-film__btn::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1px solid var(--ui-gold-a); }
.ui-filmgal__gal { position: relative; z-index: 1; margin-top: clamp(-40px, -3vw, -16px); }
.ui-filmgal__gal .ui-rail__hd { margin-bottom: 16px; }
.ui-filmgal__gal .ui-xs { color: var(--ui-snow-2); }
/* Podpis galerii: "Stuknij" na ekranach dotykowych, "Kliknij" przy myszy */
.ui-gal__c { display: none; }
@media (pointer: fine) { .ui-gal__t { display: none; } .ui-gal__c { display: inline; } }
/* Telefon: galeria jednym rzędem bez nagłówka (nagłówek zostaje dla czytników jako nazwa regionu), kafle 4:3 (9a) */
@media (max-width: 599px) {
	.ui-filmgal__gal .ui-rail__hd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
}
.ui-gal { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--ui-g)); padding: 0 var(--ui-g) 4px; scroll-padding-inline: var(--ui-g); overscroll-behavior-x: contain; }
.ui-gal::-webkit-scrollbar { display: none; }
.ui-gal:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
.ui-gal > * { aspect-ratio: 4 / 5; scroll-snap-align: start; }
.ui-gal picture { display: contents; }
.ui-gal > a { display: block; min-height: 180px; cursor: zoom-in; }
.ui-gal > a:hover img { transform: scale(1.04); }
.ui-gal > a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
@media (min-width: 600px) and (max-width: 899px) { .ui-gal { grid-auto-columns: 40%; } }
@media (min-width: 900px) {
	.ui-gal { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: repeat(2, 220px); }
	.ui-gal > * { aspect-ratio: auto; }
	.ui-gal > :first-child { grid-row: span 2; }
	.ui-gal > :nth-child(n+6) { display: none; }
	/* 3 kafle "Z zajęć z Ewą" (v6, zdjęcia z campu, ewardega_ui_kurs_gallery), jeden rząd */
	.ui-gal--3 { grid-template-columns: 1.55fr 1.1fr .85fr; grid-template-rows: clamp(340px, 30vw, 440px); }
	.ui-gal--3 > :first-child { grid-row: auto; }
	/* Kolumny wg kształtu kadrów (ewardega_ui_kurs_gallery): lpp = zdjęcie grupowe (poziome, szerokie) i dwa
	   piony z Ewą przy stole albo salą; llp = dwa poziome (grupa, Ewa z salą) i pion */
	.ui-gal--llp { grid-template-columns: 1.2fr 1.2fr .78fr; }
	.ui-gal--lpp { grid-template-columns: 1.5fr .92fr .92fr; }
	.ui-gal--2 { grid-template-columns: 1.4fr 1fr; grid-template-rows: clamp(340px, 30vw, 440px); }
	.ui-gal--2 > :first-child { grid-row: auto; }
	/* 2 kafle: poziomy i pion (lp) albo dwa piony 4:5 (pp, 1:1: Ewa przy stole). v6: rząd pp wyższy (ok. 1,17:1 przy
	   1440 px zamiast 1,56:1), żeby z pionów zostało ok. 70% wysokości z twarzami, nie sam pas */
	.ui-gal--lp { grid-template-columns: 1.6fr 1fr; }
	.ui-gal--pp { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(400px, 40vw, 560px); }
	.ui-gal--pp img { object-position: 50% 32%; }
}
@media (min-width: 1200px) { .ui-gal:not(.ui-gal--3):not(.ui-gal--2):not(.ui-gal--1) { grid-template-rows: repeat(2, 248px); } }
/* v5: jeden szeroki kafel (Adept, sala) na całą szerokość treści, bez przewijania na telefonie */
@media (max-width: 899px) { .ui-gal--1 { grid-auto-columns: 100%; overflow: visible; } }
@media (min-width: 600px) and (max-width: 899px) { .ui-gal--1 > * { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) {
	.ui-gal--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.ui-gal--1 > :first-child { grid-row: auto; aspect-ratio: 2 / 1; }
}

/* 4. 02 Dla kogo i co w cenie (jedna sekcja, elewacja.md §4.2) ---------------------------------
   Lewa kolumna: dwie listy, prawa: karta "W cenie" (#w-cenie) z kropkami prowadzącymi jak w karcie menu i kwotami
   z sesji na dole. Kwoty stoją (bez sprężyny i ram rysowanych). Pod spodem karta przygotowania. */
.ui-kfit { display: grid; gap: clamp(28px, 4vw, 40px); }
@media (min-width: 1024px) {
	.ui-kfit { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
	.ui-kfit--one { grid-template-columns: minmax(0, 1fr); }
}
/* Kurs bez list "dla kogo" (Wellness): karta na pełną szerokość, pozycje w dwóch kolumnach, kwoty jednym wierszem
   na dole (recenzja r2: samotna karta w lewej połowie i pusta prawa) */
@media (min-width: 900px) {
	.ui-kfit--one .ui-kmenu { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 72px); padding: clamp(28px, 3.4vw, 44px); }
	.ui-kfit--one .ui-kmenu__h { grid-column: 1 / -1; }
	.ui-kfit--one .ui-kmenu__l { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: inherit; }
	.ui-kfit--one .ui-kmenu__l li { border-top: 1px solid var(--ui-line); }
	.ui-kfit--one .ui-kmenu__sum { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: inherit; align-items: end; }
	.ui-kfit--one .ui-kmenu__sum > div { display: grid; gap: 4px; }
	.ui-kfit--one .ui-kmenu__sum .ui-kmenu__dots { display: none; }
}
.ui-kfit__who { display: grid; gap: clamp(28px, 3vw, 40px); align-content: start; }
@media (min-width: 600px) and (max-width: 1023px) { .ui-kfit__who { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.ui-kfit__g { display: grid; gap: 8px; align-content: start; }
.ui-kfit__g ul { display: grid; }
.ui-kfit__g li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--ui-line); line-height: 1.5; }
.ui-kfit__g .ui-ic { color: var(--ui-free); stroke-width: 2; margin-top: 2px; }
.ui-kfit__g--no li { color: var(--ui-ink-2); border-top-style: dashed; border-top-color: var(--ui-line-2); }
.ui-kfit__g--no .ui-ic { color: var(--ui-ink-3); }
/* "Raczej nie dla" (<details>): nagłówek jak przy grupach przygotowania, przełącznik znika od 960 px z JS */
.ui-kfit__g--no summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; border-radius: 12px; }
.ui-kfit__g--no summary::-webkit-details-marker { display: none; }
.ui-kfit__g--no summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-kfit__g--no .ui-faq__i { flex: none; }
.ui-kfit__g--no[open] .ui-faq__i { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-kfit__g--no[open] .ui-faq__i::after { rotate: 0deg; }
@media (min-width: 960px) { .ui-js .ui-kfit__g--no .ui-faq__i { display: none; } .ui-js .ui-kfit__g--no summary { cursor: default; pointer-events: none; } }
.ui-kmenu { display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); }
.ui-kmenu__h { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.ui-kmenu__l { display: grid; }
.ui-kmenu__l li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.ui-kmenu__n { flex: 0 1 auto; min-width: 0; }
.ui-kmenu__n b { font-weight: 600; line-height: 1.4; }
.ui-kmenu__n small { display: block; margin-top: 2px; font-size: var(--ui-fs-xs); line-height: 1.45; color: var(--ui-ink-3); }
.ui-kmenu__dots { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted var(--ui-line-2); translate: 0 -.3em; }
.ui-kmenu__ok { flex: none; width: 18px; height: 18px; color: var(--ui-gold-ink); stroke-width: 2; translate: 0 3px; }
.ui-kmenu__sum { display: grid; gap: 10px; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--ui-line); }
.ui-kmenu__sum > div { display: flex; align-items: baseline; gap: 10px; }
.ui-kmenu__sum dt { flex: none; font-size: var(--ui-fs-s); color: var(--ui-ink-2); }
.ui-kmenu__sum dd { flex: none; margin: 0; font-weight: 600; white-space: nowrap; }
.ui-kmenu__sum .is-main dt { font-size: 1rem; font-weight: 600; color: var(--ui-ink); }
.ui-kmenu__sum .is-main dd { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 300; letter-spacing: -.03em; }
.ui-kfit + .ui-incl__prep { margin-top: 14px; }
/* v4: zdjęcie absolwentów z certyfikatami w karcie "W cenie" (ewardega_ui_figure, odsłona .ui-unveil). Kadr 3:2,
   w karcie bez listy "Dla kogo" (Wellness, karta na pełną szerokość od 900 px) pas 2:1 (do 520 px wysokości) nad pozycjami */
.ui-kmenu__fig { margin-bottom: 4px; }
.ui-kmenu__fig .ui-unveil { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
	.ui-kfit--one .ui-kmenu__fig { grid-column: 1 / -1; }
	.ui-kfit--one .ui-kmenu__fig .ui-unveil { aspect-ratio: 2 / 1; max-height: 520px; }
}
/* Telefon: bez kropek prowadzących (zabierały szerokość nazwom), znacznik przy prawej krawędzi, gęstsze wiersze */
@media (max-width: 599px) {
	.ui-kmenu__l .ui-kmenu__dots { flex-basis: 0; min-width: 0; border-bottom: 0; }
	.ui-kmenu__l li { padding: 7px 0; }
	.ui-kfit__g li { padding: 9px 0; }
}
/* Przygotowanie: grupy w jednej karcie, od 900 px w kolumnach rozdzielonych linią przerywaną */
.ui-incl__prep { padding: 8px clamp(22px, 3vw, 32px); display: grid; }
.ui-incl__g + .ui-incl__g { border-top: 1px dashed var(--ui-line-2); }
.ui-incl__g summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; cursor: pointer; list-style: none; border-radius: 12px; }
.ui-incl__g summary::-webkit-details-marker { display: none; }
.ui-incl__g summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-incl__g summary:hover .ui-faq__i { border-color: var(--ui-ink); }
.ui-incl__g .ui-faq__i { flex: none; }
.ui-incl__g[open] .ui-faq__i { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-incl__g[open] .ui-faq__i::after { rotate: 0deg; }
.ui-incl__g ul { display: grid; gap: 10px; padding-bottom: 20px; font-size: var(--ui-fs-s); color: var(--ui-ink-2); }
.ui-incl__g li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.ui-incl__g li .ui-ic { width: 16px; height: 16px; margin-top: 3px; color: var(--ui-gold-ink); }
@media (min-width: 900px) {
	.ui-incl__prep { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); padding: clamp(22px, 3vw, 32px); }
	.ui-incl__g + .ui-incl__g { border-top: 0; border-left: 1px dashed var(--ui-line-2); padding-left: clamp(28px, 3vw, 44px); margin-left: clamp(28px, 3vw, 44px); }
	.ui-incl__g summary { min-height: 44px; margin-bottom: 8px; }
	.ui-incl__g ul { padding-bottom: 0; }
	/* Od 960 px z JS grupy są zawsze otwarte: nagłówek nie wygląda jak przycisk */
	.ui-js .ui-incl__g[open] .ui-faq__i { background: transparent; border-color: var(--ui-line-2); color: var(--ui-ink); }
}
@supports (interpolate-size: allow-keywords) {
	.ui-incl__prep { interpolate-size: allow-keywords; }
	.ui-incl__g::details-content { height: 0; overflow: clip; transition: height var(--ui-t3) var(--ui-ease), content-visibility var(--ui-t3) allow-discrete; }
	.ui-incl__g[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .ui-incl__g::details-content { transition: none; } }

/* 6. 04 Opinie: wynik z gwiazdkami i linkiem do Google ----------------------------------------- */
.ui-kscore { display: grid; gap: 4px; justify-items: start; }
.ui-kscore .ui-stars { color: var(--ui-gold-ink); }
.ui-kscore .ui-link { font-size: var(--ui-fs-s); }
.ui-kscore .ui-link .ui-ic { width: 14px; height: 14px; }
@media (min-width: 900px) { #opinie .ui-score { justify-self: end; } }
.ui-k #opinie .ui-rev > .ui-stars { display: none; }

/* 7. 05 Terminy (papier): picks inline + podsumowanie ------------------------------------------ */
.ui-kt { display: grid; gap: 20px; }
@media (min-width: 1024px) {
	.ui-kt { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 32px; }
	.ui-kt__sum { position: sticky; top: calc(var(--ui-hd) + 24px); }
}
.ui-kt__picks { min-width: 0; }
.ui-kt .ui-pick { background: var(--ui-card); }
.ui-kt .ui-pick:hover { border-color: var(--ui-line-2); }
.ui-kt .ui-pick:has(input:checked) { background: var(--ui-ivory); }
/* Telefon: status w osobnym wierszu, żeby data ("23-25 października") nie łamała się obok ceny */
@media (max-width: 479px) {
	.ui-kt .ui-pick { grid-template-areas: "r d p" "r s s" "r st st"; }
	.ui-kt .ui-pick .ui-st { justify-self: start; margin-top: 4px; }
}
.ui-kt__sum { padding: 22px; display: grid; gap: 16px; align-content: start; }
.ui-kt__sum .ui-sum { background: var(--ui-paper); border: 1px solid var(--ui-line); }
.ui-kt__sum .ui-sum__big dd { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; }
.ui-kt__safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -6px; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); }
.ui-kt__safe .ui-ic { color: var(--ui-gold-ink); }
/* Termin pełny (ui-kurs.js): bez zadatku i bez "Dalej: koszyk", jedyną akcją jest lista rezerwowa */
.ui-kt__full { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: var(--ui-fs-s); line-height: 1.5; color: var(--ui-ink-2); background: var(--ui-paper); border: 1px solid var(--ui-line); }
.ui-kt__full[hidden] { display: none; }
.ui-kt__full .ui-ic { margin-top: 3px; color: var(--ui-gold-ink); }
.ui-kt.is-full .ui-sum__dep, .ui-kt.is-full .ui-sum__dep + div, .ui-kt.is-full .ui-split, .ui-kt.is-full .ui-kt__safe,
#ui-sheet.is-full .ui-sum__dep, #ui-sheet.is-full .ui-sum__dep + div, #ui-sheet.is-full .ui-split, #ui-sheet.is-full .ui-sheet__ft > p.ui-xs { display: none; }
.ui-notes { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--ui-line); font-size: var(--ui-fs-s); color: var(--ui-ink-2); }
.ui-notes li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; line-height: 1.5; }
.ui-notes .ui-ic { width: 18px; height: 18px; color: var(--ui-gold-ink); margin-top: 1px; }
/* Telefon w notce: cel 44 px bez rozpychania wiersza */
.ui-notes a { display: inline-block; padding-block: 12px; margin-block: -12px; font-weight: 700; color: var(--ui-ink); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--ui-line-2); text-underline-offset: 3px; }
.ui-notes a:hover { text-decoration-color: currentColor; }
.ui-kt__ns-h { margin-top: 20px; }
.ui-kt__ns { display: grid; gap: 8px; margin-top: 8px; }
/* Bez terminów: formularz "Powiadom mnie o terminie" + karta kontaktu */
/* Odbiór kursu 2026-10-12 (popołudnie): kotwica #powiadom zostawia nad formularzem etykietę rozdziału i nagłówek sekcji (odstęp 127 do 159 px na 390 do 1440), nic nie chowa się pod headerem. */
.ui-kt__form { scroll-margin-top: calc(var(--ui-hd) + 176px); min-width: 0; }
.ui-kt__form .ui-nl__form { padding: clamp(22px, 3vw, 32px); }
.ui-kt__ticket { position: relative; border-radius: var(--ui-r-l); background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: var(--ui-sh-1); }
/* Odbiór kursu 2026-10-12 (wieczór): bez wewnętrznej złotej ramki (karta w karcie); kod 100 zł jako dopisek pod przyciskiem. */
.ui-kt__code { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px); color: var(--ui-ink-2); }
.ui-kt__code .ui-ic { flex: none; margin-top: 2px; color: var(--ui-gold-ink); }
.ui-kt__th { display: grid; gap: 8px; padding: clamp(26px, 3vw, 36px) clamp(26px, 3vw, 36px) 0; }
.ui-kt__th .ui-label { color: var(--ui-gold-ink); }
.ui-kt__ticket .ui-nl__form { padding-top: 18px; }
.ui-kt__alt { justify-items: start; }
.ui-kt__alt .ui-btn--block { justify-self: stretch; }
/* Szkolenia 1:1: lista kursów z ceną */
.ui-kprod { display: grid; gap: 10px; align-content: start; }
.ui-kprod a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 40px; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; border-radius: var(--ui-r); background: var(--ui-card); border: 1px solid var(--ui-line); transition: box-shadow var(--ui-t2), border-color var(--ui-t2); }
.ui-kprod a:hover { box-shadow: var(--ui-sh-1); border-color: var(--ui-line-2); }
.ui-kprod a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-kprod__img { display: block; width: 72px; height: 90px; border-radius: 12px; overflow: hidden; background: var(--ui-noir); }
.ui-kprod__img img { width: 100%; height: 100%; object-fit: cover; }
/* v6 r3: rysunek techniki złotą kreską na noir zamiast zdjęcia (jak .ui-other__img--il w harmonogramie), statyczny:
   bez rysowania przy wejściu, kreska i punkt widoczne od razu */
.ui-kprod__img--il { display: grid; place-items: center; color: var(--ui-gold); background: radial-gradient(120% 90% at 50% 100%, rgba(201, 164, 106, .16), transparent 70%), var(--ui-noir); }
.ui-kprod__img--il .il { width: 88%; height: auto; }
.ui-kprod .ui-kprod__img--il .il .il__d { stroke-width: 1.3; stroke-dashoffset: 0; stroke-dasharray: none; transition: none; animation: none; }
.ui-kprod .ui-kprod__img--il .il :is(.il__pt, .il__halo) { opacity: 1; transition: none; animation: none; }
.ui-kprod__t { display: grid; gap: 4px; min-width: 0; }
.ui-kprod__t small { font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-gold-ink); }
.ui-kprod__t b { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.ui-kprod__p { display: grid; justify-items: end; font-size: 1.25rem; font-weight: 300; letter-spacing: -.02em; white-space: nowrap; }
.ui-kprod__p small { font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; color: var(--ui-ink-3); }
.ui-kprod__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ui-line-2); transition: background-color var(--ui-t2), color var(--ui-t2), border-color var(--ui-t2); }
.ui-kprod a:hover .ui-kprod__go { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-snow); }
.ui-kprod__go .ui-ic { width: 18px; height: 18px; }
@media (max-width: 599px) {
	/* Telefon: trzy kolumny (kadr, nazwa, cena), wiersz jednej wysokości. Cały wiersz jest linkiem, więc strzałka
	   w kółku znika (karta z kadrem i ceną czyta się jako link). Cena w jednej linii, etykieta "Cena" nad nią. */
	.ui-kprod a { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px 10px 10px; min-height: 92px; }
	.ui-kprod__img { width: 56px; height: 70px; }
	.ui-kprod__go { display: none; }
	.ui-kprod__t b { font-size: 1rem; }
	.ui-kprod__p { font-size: 1.0625rem; align-self: center; }
}
.ui-ksteps { display: grid; counter-reset: s; border-top: 1px solid var(--ui-line); }
.ui-ksteps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--ui-line); font-size: var(--ui-fs-s); color: var(--ui-ink-2); line-height: 1.5; }
.ui-ksteps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); grid-row: span 2; font-size: var(--ui-fs-xs); font-weight: 700; color: var(--ui-gold-ink); padding-top: 3px; font-variant-numeric: tabular-nums; }
.ui-ksteps b { color: var(--ui-ink); font-weight: 600; }

/* 8. 06 Prowadząca (ciemna płyta) + znane twarze ---------------------------------------------- */
.ui-kewa .ui-ewa__fig { max-width: 460px; width: 100%; }
@media (min-width: 900px) { .ui-kewa .ui-ewa__fig { justify-self: center; } }
.ui-kewa .ui-ewa__win img { position: absolute; inset: 0; }
.ui-kewa .ui-ewa__win picture { display: contents; }
.ui-kewa__more { margin-top: 28px; }
.ui-kewa .ui-ewa__win img { object-position: 50% 20%; }
@media (max-width: 599px) { .ui-kewa .ui-ewa__win img { object-position: 50% 12%; } }

/* 9. 07 FAQ + Co dalej -------------------------------------------------------------------------- */
/* Do 1023 px: pod nagłówkiem "Zanim zapytasz" od razu pytania, karty "Co dalej po tym kursie" pod nimi (bez zmian w HTML) */
@media (max-width: 1023px) {
	.ui-k .ui-faqs { display: flex; flex-direction: column; gap: 0; }
	.ui-k .ui-faqs__side { display: contents; }
	.ui-k .ui-faqs .ui-knext__h { order: 2; margin-top: 40px; }
	.ui-k .ui-faqs .ui-knext { order: 3; }
}
.ui-knext__h { margin-bottom: 12px; }
.ui-next2 { display: grid; gap: 10px; }
.ui-next2 a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 84px; padding: 10px 16px 10px 10px; border-radius: var(--ui-r); background: var(--ui-card); border: 1px solid var(--ui-line); transition: box-shadow var(--ui-t2), border-color var(--ui-t2); }
.ui-next2 a:hover { box-shadow: var(--ui-sh-1); border-color: var(--ui-line-2); }
.ui-next2 a:hover .ui-ic--arr { transform: translateX(4px); }
.ui-next2 a:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-next2 img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--ui-noir); }
.ui-next2 b { display: block; font-weight: 600; line-height: 1.3; }
.ui-next2 small { display: block; font-size: var(--ui-fs-xs); color: var(--ui-ink-3); margin-top: 2px; }
.ui-next2 .ui-ic { transition: transform var(--ui-t2) var(--ui-ease); }
@media (min-width: 600px) and (max-width: 1023px) { .ui-next2 { grid-template-columns: 1fr 1fr; } }

/* 6a. Opinie od 1024 px: cztery opinie obok ciemnego cytatu jako siatka 2x2 (bento), a nie karuzela z dwiema kartami.
   Karuzela rozciągała karty do wysokości cytatu (dziura nad autorem) albo zostawiała puste pole pod kartami; siatka
   ma wysokość zbliżoną do cytatu, wiersze wyrównane, autor przy dole karty. Kropki i strzałki są zbędne (wszystko widać).
   Przy innej liczbie opinii zostaje karuzela. */
@media (min-width: 1024px) {
	.ui-k #opinie .ui-car:has(.ui-car__track > :nth-child(4):last-child) .ui-car__track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
	.ui-k #opinie .ui-car:has(.ui-car__track > :nth-child(4):last-child) .ui-car__ft { display: none; }
	.ui-k #opinie .ui-car:has(.ui-car__track > :nth-child(4):last-child) .ui-rev { min-height: 0; }
	/* Ciemny cytat na całą wysokość siatki (opakowanie .ui-rise jako siatka, karta cytatu się rozciąga) */
	.ui-k #opinie .ui-reviews > .ui-rise { display: grid; }
}

/* 9a. FAQ: cztery pytania + "Więcej pytań" (<details data-open-wide>: od 960 px z JS otwarte, przełącznik znika) */
.ui-kmore > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; cursor: pointer; list-style: none; font-weight: 600; border-bottom: 1px solid var(--ui-line-2); }
.ui-kmore > summary::-webkit-details-marker { display: none; }
.ui-kmore > summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ui-kmore > summary:hover .ui-faq__i { border-color: var(--ui-ink); }
.ui-kmore[open] > summary { display: none; }
.ui-kmore > .ui-faq { border-top: 0; }
/* Telefon: budżet długości 390 (elewacja.md §6, maks. 10 500 px) */
@media (max-width: 599px) {
	.ui-k { --ui-sec: 52px; }
	.ui-k .ui-head { margin-bottom: 24px; }
	/* Trzeci wyróżnik hero (certyfikat, nocleg w Solcu) powtarza pasek nad headerem i chip karty zakupu */
	.ui-kh .ui-usp li:nth-child(n+3) { display: none; }
	.ui-k .ui-knext a:nth-child(n+2) { display: none; }
	.ui-film { min-height: 340px; }
	.ui-kewa .ui-ewa__win { aspect-ratio: 16 / 11; }
	.ui-filmgal .ui-gal { grid-auto-columns: 80%; }
	.ui-filmgal .ui-gal--1 { grid-auto-columns: 100%; }
	.ui-filmgal .ui-gal > * { aspect-ratio: 4 / 3; }
}

/* 10. Pasek zakupu: pełna nazwa od 600 px, krótka na telefonie --------------------------------- */
.ui-kbb__m { display: none; }
@media (max-width: 599px) { .ui-kbb__d { display: none; } .ui-kbb__m { display: inline; } }
.ui-buybar .ui-sep::before { margin-inline: .3em; }
/* Przegląd 15.10: dłuższe nazwy kursów wypychały cenę poza pasek (desktop). Wielokropek dostaje nazwa, cena zostaje. */
.ui-buybar:not(.ui-tm-bar) b { display: flex; align-items: baseline; min-width: 0; }
.ui-buybar:not(.ui-tm-bar) b > * { flex: none; }
.ui-buybar:not(.ui-tm-bar) b > .ui-kbb__d, .ui-buybar:not(.ui-tm-bar) b > .ui-kbb__m, .ui-kbb--soon b > span:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Desktop: prawa krawędź pływającego paska na linii siatki treści (.ui-wrap), nie 24 px od okna */
@media (min-width: 860px) { .ui-buybar { right: max(var(--ui-g), calc((100% - var(--ui-max)) / 2)); } }
/* Finał na telefonie: dwa przyciski pod sobą tej samej szerokości */
@media (max-width: 599px) {
	.ui-final__cta { display: grid; justify-items: stretch; width: 100%; max-width: 340px; margin-inline: auto; }
	.ui-final__cta .ui-btn { width: 100%; }
}
/* Pasek bez terminów i 1:1: "Nowy termin wkrótce" + Powiadom mnie / Wybierz szkolenie */
.ui-kbb--soon small .ui-ic { flex: none; color: var(--ui-gold); }

/* 11. Ograniczony ruch: bez zbliżeń i pulsów ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ui-kh__bg img, .ui-film__btn, .ui-gal button img { animation: none; transition: none; }
}

/* Omnibus (audyt Magdy): dopisek pod nagłówkiem opinii, jak .ui-cp-op__note na campach. */
.ui-op-note { grid-column: 1 / -1; margin: 0; font-size: var(--ui-fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--ui-ink-2); }

/* 12. Audyt 14.10.2026 (gotowe treści klientki) ------------------------------------------------- */
/* Akapit wprowadzający: pierwszy blok jasnego arkusza, lead bez nagłówka; dół bez odstępu, bo program ma własny */
.ui-kintro { padding-bottom: 0; }
/* Zlecenie 2026-10 (punkt E): "To jeden kurs" pod akapitem, z linkiem do drugiej strony tego samego kursu */
.ui-kintro__one { margin-top: 18px; max-width: 44em; padding-left: 14px; border-left: 2px solid var(--ui-gold); color: var(--ui-ink-2); }
.ui-kintro__one a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
/* Zdanie pod listą części programu (Wellness: przeciwwskazania) i pod całym programem (Classic: a Deep Tissue) */
.ui-mod__note { font-size: var(--ui-fs-s); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ui-line-2); color: var(--ui-ink-2); }
.ui-kprog__note { margin-top: clamp(28px, 3vw, 40px); max-width: 44em; }
/* Krótkie sekcje z mapy ('sections'): karty jak korzyści, z akapitem zamiast listy */
.ui-kx .ui-bens { margin-top: 0; }
/* Sekcja z samym długim leadem (Classic: I i II stopień): nagłówek u góry, nie przy dole 10-wierszowego leadu */
.ui-kx .ui-head--split { align-items: start; }
.ui-ben p { font-size: var(--ui-fs-s); line-height: 1.55; color: var(--ui-ink-2); }
/* Zdanie o opiniach pod karuzelą: zwykły tekst (trzy zdania), nie etykieta */
.ui-op-note--pod { margin-top: 20px; max-width: 60em; font-weight: 400; letter-spacing: 0; line-height: 1.5; }