/*
 * Landing „Migracje fakty narracje”. Wszystko pod .mfn: korzeń widgetu to .mfn.mfn-<sekcja>,
 * dzieci .mfn .mfn-<sekcja>__x. Specyficzność 0,2,0 wygrywa z globalnymi stylami Elementora
 * (.elementor-kit-N h2 = 0,1,1) bez !important.
 *
 * System „seria plakatów” (design-direction.md, 15 X 2026, posty Muzeum z materialy/social): moduły stykają się krawędziami,
 * niebieskie pola (hero, „Co zyskasz”, kroki, wynagrodzenie, zgłoszenie), znaki KV pomarańczem na niebieskim, kolorowe zdjęcia w modułach.
 * Pomarańcz tylko w znakach KV i detalach: romb list i etykiet, bieżąca sekcja w menu, pasek otwartego pytania, krok formularza.
 * Papier strony to czysta biel (KV), pola na bieli w jasnym niebieskim #EDF0FF (sekcja Prowadzący, kafle, otwarte pytania).
 * Kremu nie ma (Julia, 15 X 2026). Czysta #FFF także pod znakami FAMI (Księga FE s. 55). Niebieski tekst na jasnym zawsze #001997.
 * Bez obrysów: karty to płaskie pola (biel na niebieskim, biel na jasnym) albo wiersze nad linią 1 px.
 * Liczby akcentowe zawsze --mfn-liczba (ciemny niebieski, na niebieskim biel), format 01.
 *
 * Kontrast (WCAG 2.2 AA), sprawdzony dla par użytych niżej:
 *   biel na #5060FD 4,74 · #5060FD na bieli 4,74
 *   czarny na #FF6315 7,05 · #3D3D3D na białym 11,0 · biały na #001997 12,5
 *   na jasnym niebieskim #EDF0FF: czarny 18,5 · #3D3D3D 9,6 · #001997 11,7 · #6B6B6B 4,7
 * Nie używać: białego na pomarańczowym (2,98), pomarańczu na niebieskim (1,59),
 * #5060FD jako zwykłego tekstu na jasnym niebieskim (4,18) ani pomarańczu jako koloru tekstu (2,98 na bieli).
 */

/* Fonty: zamienniki dopuszczone przez księgę marki (Geist za ABC Favorit, Newsreader za Freight). */
@font-face { font-family: "MFN Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "MFN Geist"; src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "MFN Newsreader"; src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "MFN Newsreader"; src: url("fonts/newsreader-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokeny ---------- */

.mfn,
.mfn-formularz {
	/* Paleta: podstawowe z księgi marki (s. 34). Krem i ciepła biel od Moreways (15 X 2026). */
	--mfn-niebieski: #5060fd;
	--mfn-niebieski-ciemny: #001997;
	--mfn-pomarancz: #ff6315;
	--mfn-czern: #000;
	--mfn-biel: #fff; /* papier strony i pola na niebieskim: #5060FD na bieli 4,74 w obie strony */
	/* Jasny niebieski (odcień #5060FD) zamiast kremu (Julia, 15 X 2026): pola na bieli. Czarny 18,5 · #3D3D3D 9,6 · #001997 11,7.
	   #5060FD jako tekst na nim tylko duży (4,18). */
	--mfn-jasny: #edf0ff;
	--mfn-jasny-ciemny: #d9defc; /* zaślepki zdjęć */
	--mfn-linia-jasna: #c9d0f2; /* linie drugiego planu */

	/* Role */
	--mfn-tekst: var(--mfn-czern);
	--mfn-tekst-2: #3d3d3d;
	--mfn-tlo: var(--mfn-biel);
	--mfn-ramka-pola: #6b6b6b; /* 5,3:1 na białym, wymóg 3:1 dla granic pól */
	--mfn-blad: #b3001b; /* 7,1:1 na białym */
	--mfn-blad-tlo: #fdeff1; /* tło listy błędów: #B3001B na nim 6,4:1, czarny 18,8:1 */
	/* Liczby akcentowe (fakty, korzyści, kroki, program) jednym kolorem: 11,1 na kremie, 12,7 na ciepłej bieli */
	--mfn-liczba: var(--mfn-niebieski-ciemny);
	/* Romb sekcji i list: pomarańcz wszędzie, też na niebieskim jak znaki KV (1,59, ale to dekoracja, nie tekst ani stan) */
	--mfn-romb: var(--mfn-pomarancz);
	/* Fokus: jeden obrys, kolor zależy od tła */
	--mfn-fokus: var(--mfn-niebieski-ciemny);
	/* Hover drugiego przycisku: lekki odcień koloru tekstu; na niebieskich polach przyciemnienie, bo rozjaśnienie obniżałoby kontrast białego tekstu */
	--mfn-tint: color-mix(in srgb, currentColor 8%, transparent);
	/* Główny przycisk: niebieski z białym tekstem (4,74:1, APCA Lc 78), hover ciemny niebieski (13,2:1) */
	--mfn-btn-tlo: var(--mfn-niebieski);
	--mfn-btn-tekst: var(--mfn-biel);
	--mfn-btn-hover: var(--mfn-niebieski-ciemny);
	/* Jedno przyciemnienie pod menu i oknem */
	--mfn-przyciemnienie: rgb(0 25 151 / 0.7);

	/* Typografia */
	--mfn-font: "MFN Geist", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mfn-font-szeryf: "MFN Newsreader", "Newsreader", Georgia, "Times New Roman", serif;
	--mfn-t-xs: 0.875rem;
	--mfn-t-s: 1rem;
	--mfn-t-base: 1.125rem;
	--mfn-t-m: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	--mfn-t-l: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
	--mfn-t-xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	--mfn-t-xxl: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem); /* tylko tytuł hero: 72 px na komputerze */
	--mfn-lh: 1.55;
	/* Interlinia i światło per stopień: rola bierze całą trójkę (rozmiar, interlinia, światło), nie sam rozmiar */
	--mfn-lh-xl: 1.05; --mfn-ls-xl: -0.025em; /* h2, kwota, duże liczby */
	--mfn-lh-l: 1.15;  --mfn-ls-l: -0.02em;   /* nagłówek bloku: grupa, kafel, krok, FAQ, krok formularza */
	--mfn-lh-m: 1.25;  --mfn-ls-m: -0.01em;   /* tytuł karty, prowadzący, kwoty transz */
	--mfn-lh-szeryf-l: 1.2;  /* przekaz hero, kontakt */
	--mfn-lh-szeryf-m: 1.35; /* lead, pytanie w bramce */
	--mfn-lh-etykieta: 1.3; --mfn-ls-etykieta: 0.08em; /* wersaliki 14 px */
	--mfn-miara: 52ch; /* ≈75 znaków polskiego tekstu w Geist (1ch ≈ 1,45 znaku); 60ch dawało do 85 */

	/* Odstępy */
	--mfn-o1: 0.25rem;
	--mfn-o2: 0.5rem;
	--mfn-o3: 0.75rem;
	--mfn-o4: 1rem;
	--mfn-o5: 1.5rem;
	--mfn-o6: 2rem;
	--mfn-o7: 3rem;
	--mfn-o8: 4rem;
	--mfn-sekcja: clamp(4rem, 3rem + 5vw, 8rem);
	--mfn-kolumny: clamp(3rem, 2rem + 4vw, 6rem);
	--mfn-margines: clamp(1rem, 4vw, 2.5rem);
	--mfn-szerokosc: 78rem;
	--mfn-cel: 2.75rem; /* wysokość przycisków i pól, powyżej 24 px z WCAG 2.5.8 */
	--mfn-karta-p: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); /* jeden padding wszystkich pól: kafel, karta, korzyść, formularz, wynagrodzenie */

	/* Ruch: jeden czas i jedna krzywa (szybki start, miękkie lądowanie) */
	--mfn-czas: 200ms;
	--mfn-krzywa: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Ikony: dwie skale */
	--mfn-ikona-s: 1rem;
	--mfn-ikona-m: 1.25rem;
}

/* Fokus i romb na niebieskich polach; jasne pola w środku (karta hero, formularz) wracają do ciemnego niebieskiego */
.mfn.mfn-hero, .mfn.mfn-korzysci, .mfn.mfn-zgloszenie, .mfn.mfn-zgloszenie__naglowek, .mfn.mfn-stopka, .mfn .mfn-wynagrodzenie { --mfn-btn-tlo: var(--mfn-biel); --mfn-btn-tekst: var(--mfn-czern); --mfn-btn-hover: var(--mfn-jasny); --mfn-tint: color-mix(in srgb, var(--mfn-niebieski-ciemny) 30%, transparent); --mfn-fokus: var(--mfn-biel); --mfn-liczba: var(--mfn-biel); }
.mfn .mfn-korzysc, .mfn.mfn-formularz, .mfn .mfn-zgloszenie__po { --mfn-btn-tlo: var(--mfn-niebieski); --mfn-btn-tekst: var(--mfn-biel); --mfn-btn-hover: var(--mfn-niebieski-ciemny); --mfn-tint: color-mix(in srgb, currentColor 8%, transparent); --mfn-fokus: var(--mfn-niebieski-ciemny); --mfn-romb: var(--mfn-pomarancz); --mfn-liczba: var(--mfn-niebieski-ciemny); }

/* ---------- Podstawy ---------- */

.mfn {
	font-family: var(--mfn-font);
	font-size: var(--mfn-t-base);
	line-height: var(--mfn-lh);
	color: var(--mfn-tekst);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.mfn *,
.mfn *::before,
.mfn *::after { box-sizing: border-box; }

.mfn [hidden],
.mfn-formularz [hidden] { display: none !important; }

.mfn :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.mfn :where(p, li, dd) { max-width: var(--mfn-miara); text-wrap: pretty; }
.mfn :where(img, svg) { display: block; max-width: 100%; height: auto; }

/* OceanWP ustawia html { font-size: 62.5% }. Na landingu wracamy do ustawienia przeglądarki,
   żeby rem respektował wybrany przez użytkownika rozmiar tekstu (WCAG 1.4.4). */
html:has(> body.mfn-landing) { font-size: 100%; }
/* Krem także między widgetami Elementora i pod motywem (OceanWP ma białe tło strony). */
body.mfn-landing { background: #fff; }

html:has(.mfn) { scroll-behavior: smooth; scroll-padding-top: calc(var(--mfn-pasek-h, 0px) + 1.5rem); }
@media (prefers-reduced-motion: reduce) {
	html:has(.mfn) { scroll-behavior: auto; }
	.mfn *, .mfn *::before, .mfn *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.mfn .mfn-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.mfn .mfn-kontener {
	width: 100%;
	max-width: calc(var(--mfn-szerokosc) + 2 * var(--mfn-margines));
	margin-inline: auto;
	padding-inline: var(--mfn-margines);
	padding-inline: round(nearest, var(--mfn-margines), 8px);
	/* Telefon w poziomie z wcięciem ekranu: margines nie mniejszy niż bezpieczny obszar (działa przy viewport-fit=cover) */
	padding-inline: max(round(nearest, var(--mfn-margines), 8px), env(safe-area-inset-left)) max(round(nearest, var(--mfn-margines), 8px), env(safe-area-inset-right));
}

.mfn.mfn-sekcja { padding-block: var(--mfn-sekcja); padding-block: round(nearest, var(--mfn-sekcja), 8px); background: var(--mfn-tlo); }
.mfn .mfn-lista-bez { list-style: none; padding: 0; }

/* Typografia: hierarchia skalą pisma, światłem kroju i odstępami (księga s. 31). Jeden styl na poziom. */
.mfn .mfn-h2 {
	font-family: var(--mfn-font);
	font-size: var(--mfn-t-xl);
	font-weight: 400;
	line-height: var(--mfn-lh-xl);
	letter-spacing: var(--mfn-ls-xl);
	color: inherit;
	text-wrap: balance;
	max-width: 22ch;
}

.mfn .mfn-h3 {
	font-family: var(--mfn-font);
	font-size: var(--mfn-t-m);
	font-weight: 500;
	line-height: var(--mfn-lh-m);
	letter-spacing: var(--mfn-ls-m);
	color: inherit;
	text-wrap: balance;
}

/* Etykieta wersalikowa: jedna rola, jedna reguła (też liczba szkoleń, nota, licznik kroku). Linków wersalikami nie ma: wyglądały jak etykiety */
.mfn .mfn-etykieta,
.mfn .mfn-program__liczba,
.mfn .mfn-nota__tytul,
.mfn .mfn-krok-formularza__licznik {
	font-family: var(--mfn-font);
	font-size: var(--mfn-t-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--mfn-ls-etykieta);
	line-height: var(--mfn-lh-etykieta);
}
.mfn .mfn-etykieta--lista { margin-block-start: var(--mfn-o3); }
/* Pomarańcz w detalach (Julia, 15 X 2026): romb listy przed nadtytułem hero. Sekcje nie mają etykiet nad tytułem. */
.mfn .mfn-hero__nadtytul::before {
	content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline: 0.125rem 0.75rem; vertical-align: 0.1em;
	background: var(--mfn-pomarancz); transform: rotate(45deg);
}

.mfn .mfn-lead,
.mfn .mfn-lead p { font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-m); line-height: var(--mfn-lh-szeryf-m); max-width: 46ch; }
.mfn .mfn-lead p + p { margin-block-start: var(--mfn-o2); }

/* Nagłówek nad siatką na całą szerokość */
.mfn .mfn-naglowek-sekcji { display: grid; gap: var(--mfn-o4); margin-block-end: var(--mfn-o8); }

/* Dwie kolumny redakcyjne: lewa z nagłówkiem (przyklejona na komputerze), prawa z treścią */
.mfn .mfn-redakcja { display: grid; gap: var(--mfn-o7); }
.mfn .mfn-redakcja__naglowek { display: grid; gap: var(--mfn-o4); align-content: start; }
/* W wąskiej kolumnie tytuł schodzi o stopień (Hyper Island: duży tytuł nad siatką, średni w kolumnie) */
.mfn .mfn-redakcja__naglowek .mfn-h2 { font-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.625rem); margin-block-end: var(--mfn-o2); max-width: none; }
.mfn .mfn-redakcja__akcja { margin-block-start: var(--mfn-o3); }
@media (min-width: 64rem) {
	.mfn .mfn-redakcja { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--mfn-kolumny); column-gap: round(nearest, var(--mfn-kolumny), 8px); align-items: start; }
	.mfn .mfn-redakcja__naglowek { position: sticky; top: calc(var(--mfn-pasek-h, 0px) + var(--mfn-o6)); }
}

.mfn p + p { margin-block-start: var(--mfn-o4); }
.mfn-nbr { white-space: nowrap; }

/* Linki: jedno podkreślenie (1 px, odsunięte), na hover 2 px */
.mfn a,
.mfn .mfn-link { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-thickness var(--mfn-czas) var(--mfn-krzywa); }
.mfn .mfn-link { text-decoration: underline; }
@media (hover: hover) { .mfn .mfn-link:hover { text-decoration-thickness: 2px; } }

/* Fokus: jeden obrys, kolor z --mfn-fokus (ciemny niebieski na jasnym, ciepła biel na niebieskim) */
.mfn :focus-visible,
.mfn-formularz :focus-visible {
	outline: 3px solid var(--mfn-fokus);
	outline-offset: 2px;
	box-shadow: none;
}
.mfn [tabindex="-1"]:focus { outline: none; }

/*
 * Przyciski. Główny: pełne pole, na bieli niebieski z białym tekstem, na niebieskich polach biały z czarnym
 * (tokeny --mfn-btn-*). Drugi: obrys w kolorze tekstu. Pomarańcz zostaje w znakach KV.
 * Czarny na pomarańczu (7,05:1 WCAG) miał tylko APCA Lc 49 i czytał się gorzej niż drugi przycisk.
 */
.mfn .mfn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mfn-o2);
	min-height: var(--mfn-cel);
	padding: var(--mfn-o2) var(--mfn-o5);
	border: 2px solid currentColor;
	border-radius: 0;
	font-family: var(--mfn-font);
	font-size: var(--mfn-t-s);
	font-weight: 500;
	line-height: var(--mfn-lh-m);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mfn-czas) var(--mfn-krzywa), color var(--mfn-czas) var(--mfn-krzywa), border-color var(--mfn-czas) var(--mfn-krzywa), translate var(--mfn-czas) var(--mfn-krzywa);
}
.mfn .mfn-btn--glowny { background: var(--mfn-btn-tlo); border-color: var(--mfn-btn-tlo); color: var(--mfn-btn-tekst); }
.mfn .mfn-btn--drugi { background: transparent; color: inherit; }
@media (hover: hover) {
	/* Główny: pole o ton ciemniejsze (na niebieskim jaśniejsze), kontrast rośnie. Drugi: lekkie tło w kolorze tekstu */
	.mfn .mfn-btn--glowny:hover { background: var(--mfn-btn-hover); border-color: var(--mfn-btn-hover); }
	.mfn .mfn-btn--drugi:hover { background: var(--mfn-tint); }
}
.mfn .mfn-btn:active { translate: 0 1px; }
.mfn .mfn-btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; translate: none; }

/* Nabór: po dacie końca znika wszystko z .mfn-tylko-nabor, pojawia się .mfn-po-naborze */
.mfn-po-naborze { display: none; }
.mfn-nabor-zamkniety .mfn-tylko-nabor { display: none !important; }
.mfn-nabor-zamkniety .mfn-po-naborze { display: block; }

/* Sygnet: zawsze w kolorze tekstu (księga s. 19) */
.mfn .mfn-sygnet { width: 2.5rem; height: auto; flex: none; color: currentColor; }

/* Lista z pomarańczowym rombem (warunki, grupy szkoleń, co przygotować). Romb z KV; sygnet nie jako punktor. */
.mfn .mfn-warunki { list-style: none; padding: 0; display: grid; gap: var(--mfn-o4); } /* 16: pozycje dwuwierszowe muszą się odciąć od światła wiersza */
.mfn .mfn-warunki li { position: relative; padding-inline-start: 1.75rem; }
.mfn .mfn-warunki li::before {
	content: ""; position: absolute; inset-inline-start: 0.125rem; top: calc(0.775em - 0.3125rem);
	width: 0.625rem; height: 0.625rem; background: var(--mfn-romb); transform: rotate(45deg);
}

/* Kafel: płaskie pole bez obrysu. */
.mfn .mfn-kafle { display: grid; gap: var(--mfn-o4); }
@media (min-width: 48rem) { .mfn .mfn-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mfn .mfn-kafel {
	padding: var(--mfn-karta-p);
	padding: round(nearest, var(--mfn-karta-p), 8px);
	background: var(--mfn-jasny);
	display: grid; gap: var(--mfn-o3); align-content: start;
}
.mfn .mfn-kafel .mfn-h3 { font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); }
.mfn .mfn-kafel--szeroki { margin-block-start: var(--mfn-o4); }

/* ---------- Dla kogo: grupy jako lista między liniami (siatka 5/7 jak pas), pod nią bramka z warunkami ---------- */

.mfn .mfn-grupa {
	display: grid; gap: var(--mfn-o4); max-width: none;
	padding-block: var(--mfn-o5) var(--mfn-o6); border-block-start: 1px solid var(--mfn-czern);
}
.mfn .mfn-grupa__tytul {
	font-family: var(--mfn-font); font-size: var(--mfn-t-l); font-weight: 400;
	line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); color: inherit; text-wrap: balance; max-width: 16ch;
}
.mfn .mfn-grupa__opis p { color: var(--mfn-tekst-2); }
@media (min-width: 48rem) {
	.mfn .mfn-grupa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 0; align-items: baseline; }
	.mfn .mfn-grupa__opis { padding-inline-start: var(--mfn-o6); }
}

.mfn .mfn-grupy { border-block-end: 1px solid var(--mfn-czern); }

/* Warunki: jasnoniebieskie pole w siatce listy grup (5/7). Lewa: tytuł i dopisek o koncepcji. Prawa: warunki numerowane 01, 02
   (jak liczby w całej stronie) i przycisk. Telefon: tytuł, warunki, dopisek, przycisk. */
.mfn .mfn-bramka {
	display: grid; gap: var(--mfn-o4); margin-block-start: var(--mfn-o7);
	padding: var(--mfn-karta-p); padding: round(nearest, var(--mfn-karta-p), 8px); background: var(--mfn-jasny);
}
.mfn .mfn-bramka__tytul { font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); }
.mfn .mfn-bramka__warunki { display: grid; gap: var(--mfn-o2); }
.mfn .mfn-bramka__warunki li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline; max-width: none; font-size: var(--mfn-t-m); line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); }
.mfn .mfn-bramka__nr { color: var(--mfn-liczba); font-variant-numeric: tabular-nums; }
.mfn .mfn-bramka__dopisek p { font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); max-width: 36ch; }
.mfn .mfn-bramka__akcja { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mfn-o4) var(--mfn-o5); margin-block-start: var(--mfn-o2); } /* + gap 16 = 24 */
.mfn .mfn-bramka__pytanie { font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-m); line-height: var(--mfn-lh-szeryf-m); }
@media (min-width: 48rem) {
	.mfn .mfn-bramka { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "tytul warunki" "dopisek warunki" "dopisek akcja"; grid-template-rows: auto auto 1fr; gap: var(--mfn-o4) var(--mfn-o6); align-items: start; } /* dopisek 16 pod tytułem, nie pod wysokością listy warunków */
	.mfn .mfn-bramka__tytul { grid-area: tytul; }
	.mfn .mfn-bramka__warunki { grid-area: warunki; }
	.mfn .mfn-bramka__dopisek { grid-area: dopisek; }
	.mfn .mfn-bramka__akcja { grid-area: akcja; }
}
/* Telefon: kolejność jak desktop czytany kolumnami: lewa (tytuł, dopisek), potem prawa (warunki, przycisk). Dopisek przy
   tytule (8), warunki i przycisk razem, więc przycisk nie jest odcięty od warunków drobnym tekstem */
@media (max-width: 47.99rem) {
	.mfn .mfn-bramka { grid-template-areas: "tytul" "dopisek" "warunki" "akcja"; gap: 0; }
	.mfn .mfn-bramka__tytul { grid-area: tytul; }
	.mfn .mfn-bramka__dopisek { grid-area: dopisek; margin-block-start: var(--mfn-o2); }
	.mfn .mfn-bramka__warunki { grid-area: warunki; margin-block-start: var(--mfn-o5); }
	.mfn .mfn-bramka__akcja { grid-area: akcja; margin-block-start: var(--mfn-o5); }
}

/* ---------- Nagłówek sekcji: tytuł na tle sekcji (czarny na bieli, biały na niebieskim), obok niski pas modułów KV:
   kwadratowy znak (pomarańcz na niebieskim) i kolorowe zdjęcie 3:2, oba tej samej wysokości (--h ≈ 128–192 px), dół wyrównany
   z dołem tytułu. Zdjęcie wychodzi za prawą krawędź ekranu. Bez niebieskiego pudełka pod tytułem: pudełko jest dla pól z treścią
   (wynagrodzenie, kroki). Znak różni sekcje jak plakaty w serii. Telefon: tytuł, pod nim znak i zdjęcie do krawędzi. ---------- */

/* Udział i Pytania stoją po sobie na tej samej bieli: dół Udziału połową rytmu (inaczej podwójna pustka), na telefonie bez dołu (pole wynagrodzenia → tytuł Pytań 64); góra Pytań niesie oddech */
.mfn.mfn-udzial { padding-block-end: calc(var(--mfn-sekcja) * 0.5); padding-block-end: round(nearest, calc(var(--mfn-sekcja) * 0.5), 8px); }
@media (max-width: 47.99rem) {
	.mfn.mfn-udzial { padding-block-end: 0; }
}
.mfn.mfn-sekcja { overflow-x: clip; } /* moduły wychodzą do krawędzi ekranu (100vw liczy pasek przewijania) */
.mfn .mfn-pas {
	--spad: max(var(--mfn-margines), (100vw - var(--mfn-szerokosc)) / 2); /* od krawędzi kontenera do krawędzi ekranu */
	--h: 7rem;
	display: grid; grid-template-columns: var(--h) minmax(0, 1fr); align-items: end; row-gap: var(--mfn-o5);
	margin-block-end: var(--mfn-o7);
}
.mfn .mfn-pas__pole { grid-column: 1 / -1; display: grid; gap: var(--mfn-o3); align-content: end; }
.mfn .mfn-pas__tytul { max-width: 18ch; color: inherit; }
.mfn .mfn-pas__znak { width: var(--h); height: var(--h); }
.mfn .mfn-pas__znak .mfn-flaga { width: 100%; height: 100%; aspect-ratio: auto; }
.mfn .mfn-pas__foto { height: var(--h); overflow: hidden; background: var(--mfn-niebieski-ciemny); margin-inline-end: calc(-1 * var(--spad)); }
.mfn .mfn-pas__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
	.mfn .mfn-pas { --h: clamp(8rem, 3rem + 8vw, 12rem); grid-template-columns: minmax(0, 1fr) var(--h); column-gap: 0; }
	.mfn .mfn-pas, .mfn .mfn-pas--foto { grid-template-columns: minmax(0, 1fr) var(--h) calc(var(--h) * 1.5); }
	/* Bez zdjęcia: niebieski moduł 3:2 w miejscu zdjęcia, do krawędzi ekranu (pole koloru jak w postach) */
	.mfn .mfn-pas:not(.mfn-pas--foto)::after { content: ""; height: var(--h); margin-inline-end: calc(-1 * var(--spad)); background: var(--mfn-niebieski); }
	.mfn.mfn-korzysci .mfn-pas:not(.mfn-pas--foto)::after, .mfn.mfn-zgloszenie .mfn-pas:not(.mfn-pas--foto)::after { background: var(--mfn-niebieski-ciemny); }
	.mfn .mfn-pas__pole { grid-column: auto; padding-inline-end: var(--mfn-o7); }
}
/* Lead tuż pod nagłówkiem należy do tytułu: 32, treść dalej 48–64 */
.mfn .mfn-pas:has(+ .mfn-naglowek-sekcji),
.mfn .mfn-pas:has(+ .mfn-redakcja > .mfn-redakcja__naglowek > .mfn-lead:first-child) { margin-block-end: var(--mfn-o6); }
/* Telefon: tytuł→pas 24, pas→lead 24, nagłówek→treść 48 we wszystkich sekcjach (z leadem i bez) */
@media (max-width: 47.99rem) {
	.mfn .mfn-pas:has(+ .mfn-naglowek-sekcji),
	.mfn .mfn-pas:has(+ .mfn-redakcja > .mfn-redakcja__naglowek > .mfn-lead:first-child) { margin-block-end: var(--mfn-o5); }
	.mfn .mfn-naglowek-sekcji { margin-block-end: var(--mfn-o7); }
}

/* Czarny na pomarańczu 7,05:1. Pasek na wysokość linii (1.05), żeby nie zasłaniał ogonków wiersza wyżej; łamie się z tekstem. */
.mfn .mfn-wyroznienie {
	background: linear-gradient(var(--mfn-pomarancz), var(--mfn-pomarancz)) 0 62% / 100% 1.08em no-repeat; padding-inline: 0.12em; color: var(--mfn-czern);
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- Nagłówek ---------- */

.mfn.mfn-naglowek { background: var(--mfn-biel); position: relative; }

.mfn .mfn-pomin {
	position: absolute; inset-inline-start: var(--mfn-o4); inset-block-start: var(--mfn-o4); z-index: 100;
	padding: var(--mfn-o3) var(--mfn-o4); background: var(--mfn-czern); color: var(--mfn-biel);
	font-weight: 600; text-decoration: underline;
	transform: translateY(-200%);
}
.mfn .mfn-pomin:focus { transform: none; outline: 3px solid var(--mfn-pomarancz); outline-offset: 0; }

.mfn .mfn-fami { background: #fff; /* czysta biel: Księga FE s. 55, znaki w JPG na białym */ border-block-end: 1px solid var(--mfn-linia-jasna); }
/* 45rem ≈ 103 px wysokości: flaga UE (~51 px) nadal wyższa niż logo muzeum, wymóg FAMI */
.mfn .mfn-fami__img { width: 100%; max-width: 45rem; margin-inline: auto; }
.mfn .mfn-fami__znaki { display: none; }
/*
 * Poniżej 40rem pasek w jednym obrazie zmniejsza flagę UE poniżej logo muzeum (44 px, min. z księgi marki).
 * Znaki osobno, na 3,875rem: flaga ~45 px. Zawijają się same: 2+1 od ~390 px, pionowo przy 320 px.
 */
@media (max-width: 39.99rem) {
	.mfn .mfn-fami:has(.mfn-fami__znaki) .mfn-fami__img { display: none; }
	.mfn .mfn-fami__znaki {
		display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mfn-o3);
		padding: var(--mfn-o3) var(--mfn-margines);
	}
	.mfn .mfn-fami__znak { display: block; height: 3.875rem; width: auto; }
}

.mfn .mfn-naglowek__pasek {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--mfn-o3) var(--mfn-o5);
	padding-block: var(--mfn-o4);
	/* Pod paskiem admina WP (stały dopiero od 601 px) */
	--mfn-pasek-top: 0px;
}
@media (min-width: 601px) { .mfn .mfn-naglowek__pasek { --mfn-pasek-top: var(--wp-admin--admin-bar--height, 0px); } }

/* Przyklejony pasek (JS): wypada z układu, nagłówek trzyma po nim miejsce. */
.mfn .mfn-naglowek__znacznik { height: 1px; margin-block-end: -1px; }
.mfn.mfn-naglowek--przyklejony { padding-block-end: var(--mfn-pasek-h); z-index: 50; }
.mfn-js .mfn.mfn-naglowek--przyklejony .mfn-naglowek__pasek { position: fixed; inset-inline: 0; inset-block-start: var(--mfn-pasek-top); z-index: 50; }
/* Tło na całą szerokość ekranu, także gdy pasek jest węższy (max-width kontenera) */
.mfn.mfn-naglowek--przyklejony .mfn-naglowek__pasek::before {
	content: ""; position: absolute; inset-block: 0; inset-inline: calc(50% - 50vw); z-index: -1;
	background: var(--mfn-biel); border-block-end: 1px solid var(--mfn-linia-jasna);
	box-shadow: 0 12px 24px -20px rgb(0 0 0 / 0.35); /* krawędź paska nad treścią po przewinięciu */
}
html.mfn-menu-otwarte .mfn.mfn-naglowek--przyklejony .mfn-naglowek__pasek::before { border-block-end: 0; box-shadow: none; }
/* Otwarte menu blokuje przewijanie strony. */
html.mfn-menu-otwarte { overflow: hidden; }

/* Logo mono w kolorze tekstu (księga s. 19) */
.mfn .mfn-logo {
	display: inline-flex; align-items: center; gap: var(--mfn-o3);
	min-height: var(--mfn-cel); margin-inline-end: auto;
	color: var(--mfn-czern); text-decoration: none;
}
.mfn .mfn-logo__svg { height: 2.75rem; width: auto; display: block; } /* min. 40 px z księgi marki */
.mfn .mfn-logo--stopka { justify-self: start; color: var(--mfn-biel); margin: 0 0 var(--mfn-o2); } /* + gap 16 = 24 do adresu */

.mfn .mfn-nav__lista { display: flex; flex-wrap: wrap; gap: 0 var(--mfn-o4); list-style: none; padding: 0; }
.mfn .mfn-nav__lista a:not(.mfn-btn) {
	display: inline-flex; align-items: center; min-height: var(--mfn-cel);
	font-size: var(--mfn-t-s); font-weight: 500; color: var(--mfn-czern); text-decoration: none;
}
@media (hover: hover) { .mfn .mfn-nav__lista a:not(.mfn-btn):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } } /* 1 px; bieżąca sekcja ma 3 px pomarańczu i kolor */
/* Bieżąca sekcja (aria-current z mfn.js): ciemny niebieski i stałe podkreślenie */
/* Podkreślenie pomarańczowe 3 px: na bieli 2,98, więc stan niesie też kolor tekstu (#001997) */
.mfn .mfn-nav__lista a[aria-current] { color: var(--mfn-niebieski-ciemny); text-decoration: underline var(--mfn-pomarancz); text-decoration-thickness: 3px; text-underline-offset: 0.22em; }

.mfn .mfn-nav__przycisk {
	display: none; align-items: center; gap: var(--mfn-o2);
	min-height: var(--mfn-cel); padding: 0 var(--mfn-o4);
	border: 2px solid var(--mfn-czern); background: var(--mfn-biel); color: var(--mfn-czern);
	font: 500 var(--mfn-t-s) / 1 var(--mfn-font); cursor: pointer; border-radius: 0;
	transition: background-color var(--mfn-czas) var(--mfn-krzywa), color var(--mfn-czas) var(--mfn-krzywa);
}
@media (hover: hover) { .mfn .mfn-nav__przycisk:hover { background: var(--mfn-czern); color: var(--mfn-biel); } }
.mfn .mfn-nav__przycisk:active { translate: 0 1px; }
.mfn .mfn-nav__ikona,
.mfn .mfn-nav__ikona::before,
.mfn .mfn-nav__ikona::after { display: block; width: var(--mfn-ikona-m); height: 2px; background: currentColor; transition: transform var(--mfn-czas) var(--mfn-krzywa), top var(--mfn-czas) var(--mfn-krzywa), background-color var(--mfn-czas); }
.mfn .mfn-nav__ikona { position: relative; }
.mfn .mfn-nav__ikona::before,
.mfn .mfn-nav__ikona::after { content: ""; position: absolute; inset-inline-start: 0; }
.mfn .mfn-nav__ikona::before { top: -6px; }
.mfn .mfn-nav__ikona::after { top: 6px; }
.mfn .mfn-nav__przycisk[aria-expanded="true"] .mfn-nav__ikona { background: transparent; }
.mfn .mfn-nav__przycisk[aria-expanded="true"] .mfn-nav__ikona::before { top: 0; transform: rotate(45deg); }
.mfn .mfn-nav__przycisk[aria-expanded="true"] .mfn-nav__ikona::after { top: 0; transform: rotate(-45deg); }

/* Menu zwijane tylko z JS i tylko na wąskich ekranach. Bez JS lista zostaje widoczna. */
@media (max-width: 63.99rem) {
	.mfn-js .mfn .mfn-nav__przycisk { display: inline-flex; }
	.mfn-js .mfn .mfn-nav { order: 3; flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; }
	.mfn-js .mfn .mfn-nav__przycisk[aria-expanded="false"]:not([hidden]) + .mfn-nav__lista { display: none; }
	/* Panel nad treścią: nie przesuwa strony. Cień tylko w dół, przyciemnia stronę pod spodem. */
	.mfn-js .mfn.mfn-naglowek { z-index: 50; }
	.mfn-js .mfn .mfn-nav__lista {
		position: absolute; inset-inline: 0; inset-block-start: 100%;
		flex-direction: column; flex-wrap: nowrap; /* bez zawijania w kolumny przy niskim oknie (zoom 400%, telefon w poziomie) */
		padding: 0 var(--mfn-margines) var(--mfn-o5);
		padding-inline: round(nearest, var(--mfn-margines), 8px);
		padding-inline: max(round(nearest, var(--mfn-margines), 8px), env(safe-area-inset-left)) max(round(nearest, var(--mfn-margines), 8px), env(safe-area-inset-right));
		background: var(--mfn-biel);
		box-shadow: 0 0 0 100vmax var(--mfn-przyciemnienie);
		clip-path: inset(0 -100vmax -100vmax -100vmax);
		overflow-y: auto; overscroll-behavior: contain;
		transition: opacity var(--mfn-czas) var(--mfn-krzywa), translate var(--mfn-czas) var(--mfn-krzywa);
	}
	/* Panel wjeżdża spod paska (przy zamknięciu znika od razu, żeby fokus nie został pod przyciemnieniem) */
	@starting-style { .mfn-js .mfn .mfn-nav__lista { opacity: 0; translate: 0 calc(-1 * var(--mfn-o2)); } }
	.mfn-js .mfn .mfn-nav__lista li { max-width: none; }
	.mfn-js .mfn .mfn-nav__lista li:first-child { border-block-start: 1px solid var(--mfn-czern); }
	.mfn-js .mfn .mfn-nav__lista li:not(.mfn-nav__cta) { border-block-end: 1px solid var(--mfn-czern); }
	.mfn-js .mfn .mfn-nav__lista a:not(.mfn-btn) {
		display: flex; justify-content: space-between; gap: var(--mfn-o4);
		min-height: 3.5rem; padding-block: var(--mfn-o3);
		font-size: var(--mfn-t-m); font-weight: 400; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m);
	}
	.mfn-js .mfn .mfn-nav__lista a:not(.mfn-btn)::after {
		content: "→" / ""; font-size: 1em; transition: transform var(--mfn-czas) var(--mfn-krzywa);
	}
	@media (hover: hover) { .mfn-js .mfn .mfn-nav__lista a:not(.mfn-btn):hover { text-decoration: none; } }
	@media (hover: hover) { .mfn-js .mfn .mfn-nav__lista a:not(.mfn-btn):hover::after { transform: translateX(var(--mfn-o1)); } }
	.mfn-js .mfn .mfn-nav__lista a:not(.mfn-btn):active::after { transform: translateX(var(--mfn-o1)); }
	.mfn-js .mfn .mfn-naglowek__pasek { position: relative; }
	.mfn-js .mfn .mfn-nav__przycisk { position: absolute; inset-inline-end: var(--mfn-margines); inset-block-start: var(--mfn-o4); }
	.mfn-js .mfn .mfn-logo { padding-inline-end: 7.5rem; }
	.mfn-js .mfn .mfn-naglowek__cta { margin-inline-end: 7.5rem; }
}
/* Na telefonie przycisk z nagłówka dubluje przycisk z karty tuż pod nim; zostaje tylko na końcu menu.
   Pasek ten sam na górze i po przewinięciu: logo + „Menu”. */
.mfn .mfn-nav__cta { display: none; }
@media (max-width: 47.99rem) {
	.mfn .mfn-naglowek__cta { display: none; }
	.mfn .mfn-nav__cta { display: block; margin-block-start: var(--mfn-o5); }
	.mfn .mfn-nav__cta .mfn-btn { width: 100%; justify-content: center; }
}

/* ---------- Flaga sygnałowa: znak KV jako moduł (pomarańcz na niebieskim, zawsze dekoracja) ---------- */

.mfn .mfn-flaga { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.mfn .mfn-flaga__tlo { fill: var(--mfn-niebieski); }
.mfn .mfn-flaga__znak { fill: var(--mfn-pomarancz); }
.mfn .mfn-flaga--sygnet { aspect-ratio: 2 / 1; }

/* ---------- Pierwszy ekran jak plansza zaakceptowana przez ministerstwo (materialy/fami): niebieskie pole, po lewej nadtytuł, tytuł,
   przekaz szeryfem, przyciski i wiersz danych pod cienką linią; po prawej kolorowe zdjęcie w rombie od górnej do dolnej krawędzi
   sekcji, prawy róg ucięty krawędzią ekranu. Tytuł biały (na planszy jasny pomarańcz #FE9D50 ma 2,3:1, nie przechodzi).
   Telefon i tablet: mniejszy romb przy tytule, przy prawej krawędzi. ---------- */

.mfn.mfn-hero { background: var(--mfn-niebieski); color: var(--mfn-biel); overflow-x: clip; }
.mfn .mfn-hero__siatka {
	--spad: max(var(--mfn-margines), (100vw - var(--mfn-szerokosc)) / 2);
	display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "naglowek" "dane" "foto";
}
/* Grupy: tytuł z przekazem i przyciskami · 64 · dane · 48 · realizator */
.mfn .mfn-hero__naglowek { grid-area: naglowek; padding-block: var(--mfn-o7) var(--mfn-o8); }
.mfn .mfn-hero__dane { grid-area: dane; padding-block-end: var(--mfn-o7); display: grid; gap: var(--mfn-o7); align-content: start; container-type: inline-size; }
/* Wąska kolumna hero (1024: ~520 px) nie mieści 4 pozycji: zamiast 3 + 1 siatka 2×2 jak na telefonie */
@container (max-width: 40rem) {
	.mfn .mfn-hero__dane .mfn-dane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mfn-o5) var(--mfn-o4); }
	.mfn .mfn-hero__dane .mfn-dane dd { white-space: normal; text-wrap: wrap; }
}
.mfn .mfn-hero__foto {
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--mfn-niebieski-ciemny); aspect-ratio: 1;
}
/* Górny rząd zdjęcia to białe kartki: w górnym rogu rombu przy białym nagłówku wyglądały jak dziura. Powiększenie od dołu wypycha je za romb. */
.mfn .mfn-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.1); transform-origin: 50% 75%; }
/* Telefon i tablet: romb przy tytule, górny róg na wysokości nadtytułu, część za prawą krawędzią ekranu. Zdjęcie jest na pierwszym
   ekranie, nie na dole sekcji pod drobnym drukiem. Telefon: 40% za krawędzią, lewy róg (środek wysokości, przy 2. linii tytułu
   „o migracjach”, ~238 px) zawsze 16rem od lewej, więc romb rośnie z ekranem (360: 173 px, 390: 223 px). Tytuł najwyżej 14,5rem:
   zawsze 3 linie, nie wejdzie pod romb. Poniżej 360 px nie ma miejsca: bez zdjęcia (ozdobne, alt pusty). */
@media (max-width: 63.99rem) {
	.mfn.mfn-hero { position: relative; --romb: min(calc((100vw - 16rem) / 0.6), 15rem); --za-krawedzia: 0.4; }
	.mfn .mfn-hero__siatka { grid-template-areas: "naglowek" "dane"; }
	.mfn .mfn-hero__foto { position: absolute; inset-block-start: var(--mfn-o7); inset-inline-end: calc(-1 * var(--za-krawedzia) * var(--romb)); width: var(--romb); }
}
@media (max-width: 29.99rem) { .mfn .mfn-hero__tytul { max-width: 14.5rem; } }
@media (min-width: 26rem) and (max-width: 29.99rem) { .mfn.mfn-hero .mfn-hero__przekaz { max-width: 20rem; } } /* szerszy przekaz wszedłby pod dolną połowę rombu */
@media (max-width: 22.49rem) { .mfn .mfn-hero__foto { display: none; } }
/* Od 30rem tytuł mieści się w 1–2 liniach i wszedłby pod romb: romb 30% za krawędzią, kolumna tekstu kończy się 24 px przed lewym rogiem */
@media (min-width: 30rem) and (max-width: 63.99rem) {
	.mfn.mfn-hero { --romb: min(40vw, 20rem); --za-krawedzia: 0.3; }
	.mfn .mfn-hero__naglowek { padding-inline-end: calc((1 - var(--za-krawedzia)) * var(--romb) - var(--mfn-margines) + var(--mfn-o5)); }
}
@media (min-width: 64rem) {
	.mfn.mfn-hero { position: relative; }
	.mfn .mfn-hero__siatka { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "naglowek ." "dane ."; }
	.mfn .mfn-hero__naglowek, .mfn .mfn-hero__dane { padding-inline-end: var(--mfn-o6); }
	/* Powietrze nad i pod treścią proporcjonalne do tytułu (≈ 1,2 × wysokość linii tytułu) */
	.mfn .mfn-hero__naglowek { padding-block-start: clamp(3rem, 2rem + 4vw, 5.5rem); padding-block-start: round(nearest, clamp(3rem, 2rem + 4vw, 5.5rem), 8px); }
	.mfn .mfn-hero__dane { padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem); padding-block-end: round(nearest, clamp(3rem, 2rem + 4vw, 5.5rem), 8px); }
	/* Romb na pełną wysokość sekcji (kwadrat o boku = wysokość), lewy róg tuż za kolumną tekstu, prawy za krawędzią ekranu */
	.mfn .mfn-hero__foto {
		position: absolute; inset-block: 0; width: auto; height: 100%; margin: 0;
		inset-inline-start: calc(var(--spad) + (100% - 2 * var(--spad)) * 7 / 12 - var(--mfn-o6));
	}
}
/* Strategia Moreways: nazwa programu wersalikami nad tytułem, tytuł mówi, co to jest. */
.mfn .mfn-hero__nadtytul {
	font-size: var(--mfn-t-s); font-weight: 500; line-height: var(--mfn-lh-etykieta);
	letter-spacing: var(--mfn-ls-etykieta); text-transform: uppercase; margin-block-end: var(--mfn-o4); /* 16: należy do tytułu */
}
.mfn .mfn-hero__tytul {
	font-family: var(--mfn-font); font-size: var(--mfn-t-xxl); font-weight: 400;
	line-height: var(--mfn-lh-xl); letter-spacing: var(--mfn-ls-xl); color: var(--mfn-biel);
	text-wrap: balance; overflow-wrap: break-word;
}
.mfn .mfn-hero__przekaz { margin-block-start: var(--mfn-o5); font-family: var(--mfn-font-szeryf); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: var(--mfn-lh-szeryf-m); max-width: 40ch; text-wrap: balance; }
.mfn .mfn-hero__opis { margin-block-start: var(--mfn-o4); }
.mfn .mfn-hero__akcje { display: flex; flex-wrap: wrap; gap: var(--mfn-o4); margin-block-start: var(--mfn-o6); }
/* Telefon: przyciski na całą szerokość, jedna krawędź i łatwiej trafić kciukiem */
@media (max-width: 47.99rem) { .mfn .mfn-hero__akcje { flex-direction: column; } }
.mfn .mfn-hero__po { margin-block-start: var(--mfn-o6); font-weight: 500; }

/* Wiersz danych: linia 1 px, etykiety szeryfem (jak „Film / Spotkanie / Kiedy”), wartości Geist. 2 kolumny na telefonie, 4 od 40rem. */
/* Pozycje szerokie jak treść: „6 500 zł brutto” i data nie łamią się w wąskiej kolumnie */
.mfn .mfn-dane { display: flex; flex-wrap: wrap; gap: var(--mfn-o5) var(--mfn-o7); padding-block-start: var(--mfn-o4); border-block-start: 1px solid currentColor; margin: 0; }
.mfn .mfn-dane__poz { display: grid; gap: var(--mfn-o2); align-content: start; }
.mfn .mfn-dane dt { font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-s); line-height: var(--mfn-lh-szeryf-m); }
.mfn .mfn-dane dd { margin: 0; font-size: var(--mfn-t-m); font-weight: 400; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); white-space: nowrap; }
/* Telefon: równa siatka 2×2 zamiast 2 + 1 + 1; wartość może zejść do drugiej linii („do 16 listopada / 2026”), bez balance i pretty, które łamią datę po „do 16” */
@media (max-width: 39.99rem) {
	.mfn .mfn-dane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mfn-o5) var(--mfn-o4); }
	.mfn .mfn-dane dd { white-space: normal; text-wrap: wrap; }
	.mfn .mfn-dane__poz:only-child { grid-column: 1 / -1; } /* sam termin w zgłoszeniu: cały wiersz */
}
.mfn .mfn-hero__realizator { font-size: var(--mfn-t-xs); line-height: var(--mfn-lh-szeryf-m); max-width: 60ch; }
@media (max-width: 47.99rem) { .mfn .mfn-hero__realizator { font-size: var(--mfn-t-s); } }
/* Dopisek pod kwotą: ta sama pozycja danych, szeryf jak etykieta */
.mfn .mfn-dane dd.mfn-dane__dopisek { margin-block-start: 0; font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-s); line-height: var(--mfn-lh-szeryf-m); letter-spacing: 0; }
.mfn .mfn-hero__dofinansowanie { display: block; }

/* ---------- Co zyskasz: „Learning outcomes” z Hyper Island po muzealnemu. Niebieskie pole jak hero (biały na #5060FD 4,74),
   lewa: lead, grupy i przycisk drugi do programu, prawa: ciepłobiałe karty 2×2 bez obrysu jak karta w hero ---------- */

.mfn.mfn-korzysci { --mfn-tlo: var(--mfn-niebieski); color: var(--mfn-biel); }

.mfn .mfn-korzysci__ramka {
	display: grid; gap: var(--mfn-o2); margin-block-start: var(--mfn-o7);
}
/* Przycisk drugi: prowadzi do programu niżej, pomarańcz zostaje dla „Zgłoś się”. Pytanie i opis opcjonalne: 8 między nimi, 16 do przycisku. */
.mfn .mfn-korzysci__ramka p { font-size: var(--mfn-t-s); }
.mfn .mfn-korzysci__ramka p + p { margin-block-start: 0; }
.mfn .mfn-korzysci__ramka p:has(.mfn-btn):not(:first-child) { margin-block-start: var(--mfn-o2); }
.mfn .mfn-korzysci__ramka-tytul { font-weight: 500; }

/* Korzyści jak seria czterech postów: moduły stykają się krawędziami, biel i jasny niebieski na zmianę.
   Telefon jedna kolumna, od 48rem 2×2 (szachownica), od 64rem jeden rząd. */
.mfn .mfn-korzysci__lista { display: grid; gap: 0; }
.mfn .mfn-korzysc:nth-child(even) { background: var(--mfn-jasny); }
@media (min-width: 48rem) and (max-width: 63.99rem) {
	.mfn .mfn-korzysci__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mfn .mfn-korzysc:nth-child(even) { background: var(--mfn-biel); }
	.mfn .mfn-korzysc:nth-child(4n + 2), .mfn .mfn-korzysc:nth-child(4n + 3) { background: var(--mfn-jasny); }
}
@media (min-width: 64rem) {
	.mfn .mfn-korzysci__lista { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.mfn .mfn-korzysc {
	display: grid; gap: var(--mfn-o4); align-content: start; max-width: none;
	padding: var(--mfn-karta-p);
	padding: round(nearest, var(--mfn-karta-p), 8px);
	background: var(--mfn-biel); color: var(--mfn-czern);
}
.mfn .mfn-korzysc__nr { font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); color: var(--mfn-liczba); font-variant-numeric: tabular-nums; margin-block-end: calc(var(--mfn-o2) - var(--mfn-o4)); }
/* Rola h3 jak w reszcie strony: zwykła pisownia, waga 500. Numer→tytuł 8 (para), tytuł→opis 16. */
.mfn .mfn-korzysc__tytul { font-size: var(--mfn-t-m); font-weight: 500; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); text-wrap: balance; }
.mfn .mfn-korzysc p { font-size: var(--mfn-t-s); }


/* ---------- Program: spis treści po grupach (Discord, Sketch). Grupa w lewej kolumnie, wszystkie tematy od razu widoczne ---------- */

.mfn .mfn-program__grupy { display: grid; gap: var(--mfn-o8); }
.mfn .mfn-program__grupa { row-gap: var(--mfn-o5); } /* jedna kolumna: nazwa grupy→lista 24, między grupami 64 */
.mfn .mfn-program__grupa .mfn-redakcja__naglowek { gap: var(--mfn-o2); }
.mfn .mfn-program__nazwa { font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); }
.mfn .mfn-program__opis { margin-block-start: var(--mfn-o2); font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); max-width: 32ch; }
@media (min-width: 64rem) {
	/* Linia nad nagłówkiem grupy na wysokości górnej linii listy */
	.mfn .mfn-program__grupa .mfn-redakcja__naglowek { padding-block-start: var(--mfn-o4); border-block-start: 1px solid var(--mfn-czern); }
	.mfn .mfn-program__grupa { row-gap: 0; }
}

/* ---------- Akordeon (program, FAQ): linie 1 px jako szkielet ---------- */

.mfn .mfn-akordeon { border-block-start: 1px solid var(--mfn-czern); }
.mfn .mfn-akordeon > li { border-block-end: 1px solid var(--mfn-czern); max-width: none; }
.mfn .mfn-akordeon__poz summary {
	display: grid; grid-template-columns: auto 1fr auto; gap: var(--mfn-o2) var(--mfn-o4); align-items: baseline;
	padding-block: var(--mfn-o4); cursor: pointer; list-style: none;
}
.mfn .mfn-akordeon__poz summary::-webkit-details-marker { display: none; }
.mfn .mfn-akordeon__poz summary::after {
	content: ""; grid-column: 3; grid-row: 1; align-self: center;
	width: var(--mfn-ikona-s); height: var(--mfn-ikona-s);
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: rotate var(--mfn-czas) var(--mfn-krzywa), color var(--mfn-czas) var(--mfn-krzywa);
}
/* Plus obraca się w minus: zostaje jedna kreska, obrócona do poziomu */
.mfn .mfn-akordeon__poz[open] summary::after { rotate: 90deg; background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
/* Płynne rozwijanie (Chrome 131+, gdzie indziej skokowo, bez straty treści) */
.mfn { interpolate-size: allow-keywords; }
.mfn details::details-content {
	block-size: 0; overflow-y: clip;
	transition: block-size var(--mfn-czas) var(--mfn-krzywa), content-visibility var(--mfn-czas) allow-discrete;
}
.mfn details[open]::details-content { block-size: auto; }
/*
 * Jasny niebieski pod otwartą pozycją i pod wierszem wskazanym kursorem (FAQ, program, dokumenty).
 * Pole wychodzi o 12 px poza linie cieniem, więc tekst nie przesuwa się względem nagłówków.
 * Biel/jasny niebieski to ok. 1,1:1, więc stan niosą też plus/minus i kolor tytułu, nie samo tło.
 */
.mfn .mfn-akordeon__poz,
.mfn .mfn-dokument { --mfn-wylew: 0.75rem; transition: background-color var(--mfn-czas) var(--mfn-krzywa), box-shadow var(--mfn-czas) var(--mfn-krzywa); }
/* Otwarty: pomarańczowy pasek 4 px na lewej krawędzi pola (drugi cień pod pierwszym), dekoracja obok minusa i tła */
.mfn .mfn-akordeon__poz[open] {
	background: var(--mfn-jasny);
	box-shadow: calc(-1 * var(--mfn-wylew)) 0 0 var(--mfn-jasny), calc(-1 * var(--mfn-wylew) - 4px) 0 0 var(--mfn-pomarancz), var(--mfn-wylew) 0 0 var(--mfn-jasny);
}
@media (hover: hover) {
	.mfn .mfn-akordeon__poz:not([open]):has(> summary:hover),
	.mfn .mfn-dokument:hover {
		background: var(--mfn-jasny); box-shadow: calc(-1 * var(--mfn-wylew)) 0 0 var(--mfn-jasny), var(--mfn-wylew) 0 0 var(--mfn-jasny);
	}
}
/*
 * Jeden wiersz dla programu i pytań: ten sam stopień tytułu, odstępy, ikona i stany.
 * Hover: tło jasne, tytuł, numer i znak w ciemnym niebieskim (bez podkreślenia). Otwarty: to samo tło, minus, numer 500.
 * Program ma kolumnę numeru (2,5rem), więc treść jest wcięta pod tytuł; pytania bez numeru zaczynają się od lewej krawędzi.
 */
.mfn .mfn-akordeon__poz summary { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0; }
.mfn .mfn-akordeon__poz summary:has(.mfn-akordeon__nr) { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
.mfn .mfn-akordeon__nr { grid-column: 1; font-size: var(--mfn-t-s); font-variant-numeric: tabular-nums; color: var(--mfn-liczba); }
.mfn .mfn-akordeon__tytul { grid-column: 1; font-size: var(--mfn-t-base); font-weight: 500; line-height: var(--mfn-lh-m); padding-inline-end: var(--mfn-o5); transition: color var(--mfn-czas) var(--mfn-krzywa); }
.mfn .mfn-akordeon__meta { grid-column: 1; font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); padding-inline-end: var(--mfn-o5); }
.mfn .mfn-akordeon__poz summary:has(.mfn-akordeon__nr) :is(.mfn-akordeon__tytul, .mfn-akordeon__meta) { grid-column: 2; }
.mfn .mfn-akordeon__poz summary::after { grid-column: -2; }
@media (hover: hover) { .mfn .mfn-akordeon__poz summary:hover .mfn-akordeon__tytul { color: var(--mfn-niebieski-ciemny); } }
@media (hover: hover) { .mfn .mfn-akordeon__poz summary:hover::after { color: var(--mfn-liczba); } }
.mfn .mfn-akordeon__poz[open] summary::after { color: var(--mfn-liczba); }
.mfn .mfn-akordeon__poz[open] .mfn-akordeon__nr { font-weight: 500; }
.mfn .mfn-akordeon__tresc { padding-block: var(--mfn-o1) var(--mfn-o6); padding-inline-end: var(--mfn-o7); }
.mfn .mfn-akordeon__poz:has(.mfn-akordeon__nr) .mfn-akordeon__tresc { padding-inline-start: 2.5rem; }
.mfn .mfn-akordeon__tresc p { font-size: var(--mfn-t-s); line-height: var(--mfn-lh); max-width: var(--mfn-miara); } /* 62ch dawało do 89 znaków */
@media (max-width: 47.99rem) { .mfn .mfn-akordeon__tresc { padding-inline-end: 0; } }

/*
 * Link ze strzałką: samodzielna akcja poza tekstem („O prowadzącym”, „Biogram”). Jeden z trzech wzorców linku:
 * w tekście podkreślony (.mfn-link), wiersz między liniami (dokumenty, kontakt, aktualności), link ze strzałką.
 * Czarny, 500, strzałka po tekście; hover podkreśla tekst i przesuwa strzałkę.
 */
.mfn .mfn-program__osoba { margin-block-start: var(--mfn-o4); }
.mfn .mfn-program__osoba a, .mfn .mfn-okno__program a, .mfn .mfn-osoba__bio summary, .mfn .mfn-osoba__bio-przycisk {
	display: inline-flex; align-items: center; gap: var(--mfn-o2); min-height: var(--mfn-cel);
	font-size: var(--mfn-t-s); font-weight: 500; color: var(--mfn-czern); text-decoration: none;
	text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
.mfn :is(.mfn-program__osoba, .mfn-okno__program) a::after { content: "→"; }
.mfn :is(.mfn-program__osoba, .mfn-okno__program) a::after, .mfn .mfn-osoba__strzalka { font-size: var(--mfn-ikona-m); line-height: 1; transition: transform var(--mfn-czas) var(--mfn-krzywa); }
@media (hover: hover) { .mfn :is(.mfn-program__osoba, .mfn-okno__program) a:hover, .mfn .mfn-osoba__bio summary:hover { text-decoration-line: underline; } }
@media (hover: hover) { .mfn :is(.mfn-program__osoba, .mfn-okno__program) a:hover::after { transform: translateX(var(--mfn-o1)); } }

/* ---------- Prowadzący: karty jak program Leeds Lit Fest. Zdjęcie cz-b 4:5, pod nim pasek (czarny numer szkolenia + pomarańczowa grupa),
   tytuł: imię niebieskie i temat czarny jednym stopniem, pomarańczowy kwadrat ze strzałką rozwija biogram. Bez obrysów i podkreśleń.
   Wszystkie karty równe: brak hierarchii prowadzących, wyróżnieni stoją tylko pierwsi w kolejności.
   Telefon (<48rem): zdjęcie z lewej, pasek obok przy dolnej krawędzi zdjęcia, tytuł i biogram pod spodem na całą szerokość.
   Od 48rem: siatka 2/4 kolumn, karta to subgrid czterech wierszy (zdjęcie, pasek, tytuł, biogram), strzałki w rzędzie na jednej linii.
   Odstępy z drabiny: tytuł 16 pod paskiem, biogram 24 pod tytułem; między kartami 48/64. ---------- */

/* Sekcja na jasnym niebieskim: białe karty odcinają się od tła (strona jest biała) */
.mfn.mfn-prowadzacy { --mfn-tlo: var(--mfn-jasny); }
.mfn .mfn-osoby { display: grid; column-gap: var(--mfn-o5); margin-block-end: calc(-1 * var(--mfn-o5)); } /* zjada margines ostatniego rzędu kart: dół sekcji = sam rytm */
.mfn .mfn-osoba {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-content: start;
	max-width: none; margin-block-end: var(--mfn-o5); scroll-margin-block-start: calc(var(--mfn-pasek-h, 0px) + var(--mfn-o6));
}
.mfn .mfn-osoba__foto { grid-column: 1; grid-row: 1; }
.mfn .mfn-osoba__pasek { grid-column: 2; grid-row: 1; align-self: end; flex-direction: column; align-items: flex-start; }
.mfn .mfn-osoba__kto, .mfn .mfn-osoba__bio, .mfn .mfn-osoba__bio-przycisk { grid-column: 1 / -1; }
/* Karta w ciepłej bieli na kremie: zdjęcie i pasek do krawędzi, tekst z marginesem 16. */
.mfn .mfn-osoba { background: var(--mfn-biel); padding-block-end: var(--mfn-o5); }
.mfn .mfn-osoba > :not(.mfn-osoba__foto, .mfn-osoba__pasek) { margin-inline: var(--mfn-o4); }
@media (min-width: 48rem) {
	/* 3 kolumny: 15 kart = 5 pełnych rzędów; 2 kolumny dawały portrety ~340 px i sekcję ~5000 px na tablecie */
	.mfn .mfn-osoby { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mfn .mfn-osoba { grid-template-columns: none; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
	.mfn .mfn-osoba > * { grid-column: auto; grid-row: auto; }
	.mfn .mfn-osoba__pasek { align-self: start; flex-direction: row; }
}
/* Telefon: zwarta karta zamiast pełnej (15 kart po ~380 px to była ćwierć strony). Na górze pasek „Szkolenie 02 | grupa”
   przyklejony do lewego górnego rogu (jak do zdjęcia na desktopie; obok portretu dwa pola się nie mieszczą),
   pod nim portret 80 px, obok imię z afiliacją i „Biogram”. Cała karta dalej klikalna, karty co 8 px. */
@media (max-width: 47.99rem) {
	.mfn .mfn-osoby { row-gap: var(--mfn-o2); margin-block-end: 0; }
	.mfn .mfn-osoba {
		grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--mfn-o4);
		margin-block-end: 0; padding: var(--mfn-o3);
	}
	/* .mfn-osoby: w oknie biogramu jest kopia paska i zdjęcia, te reguły jej nie dotyczą */
	.mfn .mfn-osoby .mfn-osoba__pasek {
		grid-column: 1 / -1; grid-row: 1; justify-self: start; align-self: start; flex-direction: row;
		margin: calc(-1 * var(--mfn-o3)) 0 var(--mfn-o4) calc(-1 * var(--mfn-o3));
	}
	.mfn .mfn-osoby .mfn-osoba__foto { grid-row: 2 / -1; align-self: start; }
	.mfn .mfn-osoba > :is(.mfn-osoba__kto, .mfn-osoba__bio, .mfn-osoba__bio-przycisk) { grid-column: 2; margin-inline: 0; }
	.mfn .mfn-osoba__kto { grid-row: 2; }
	/* .mfn-osoby: reguły bazowe stoją niżej w pliku, ta sama specyficzność by przegrała */
	.mfn .mfn-osoby .mfn-osoba__tytul { margin-block-start: 0; font-size: 1.125rem; }
	.mfn .mfn-osoby .mfn-osoba__afiliacja { font-size: var(--mfn-t-xs); }
	/* Celem dotyku jest cała karta (::after przycisku), więc sam link nie musi mieć 44 px */
	.mfn .mfn-osoby :is(.mfn-osoba__bio, .mfn-osoba__bio-przycisk) { grid-row: 3; margin-block-start: var(--mfn-o2); min-height: 0; align-self: start; } /* zawsze 8 pod afiliacją */
	.mfn .mfn-osoby .mfn-osoba__inicjaly { font-size: var(--mfn-t-m); }
}
/* Odstęp między kartami 24 w obu osiach (było 24 w poziomie, 64 w pionie: rzędy czytały się jak osobne grupy). 4 kolumny od 80rem. */
@media (min-width: 80rem) { .mfn .mfn-osoby { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mfn .mfn-osoba__foto {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden;
	display: grid; place-items: center; background: #e4e4e4; color: var(--mfn-tekst-2); /* zaślepka w tonacji cz-b zdjęć; inicjały #3D3D3D 8,5:1 */
}
.mfn .mfn-osoba__foto img {
	/* -1 px z każdej strony: Safari przycina warstwę z filtrem do pełnych pikseli, przy wysokości 367,5 px spod zdjęcia wychodził pasek tła */
	position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; object-position: 50% 20%; filter: grayscale(1);
	transition: filter 400ms var(--mfn-krzywa), scale 400ms var(--mfn-krzywa);
}
/* Czyste cz-b portrety bez nakładki (KV: zdjęcie obok koloru, nie pod nim). Gradient i duotone sprawdzone i odrzucone. */
/* Zaślepka bez zdjęcia: inicjały osoby (karty się różnią, widać, że to człowiek, nie brak treści) w ciemnym szarym na jasnoszarym */
.mfn .mfn-osoba__inicjaly { font-size: var(--mfn-t-xl); font-weight: 400; line-height: 1; letter-spacing: var(--mfn-ls-xl); }
/* Pasek przyklejony do zdjęcia: biały na czarnym 21:1, biały na niebieskim 4,74. Bez pomarańczu: na stronie znaczy „Zgłoś się” */
.mfn .mfn-osoba__pasek { display: flex; flex-wrap: wrap; font-size: var(--mfn-t-xs); font-weight: 500; line-height: 1.3; }
.mfn .mfn-osoba__pasek:empty { display: none; }
.mfn .mfn-osoba__numer, .mfn .mfn-osoba__grupa { padding: var(--mfn-o2) var(--mfn-o3); }
.mfn .mfn-osoba__numer { background: var(--mfn-czern); color: var(--mfn-biel); }
.mfn .mfn-osoba__grupa { background: var(--mfn-niebieski); color: var(--mfn-biel); }
/* Imię czarne (niebieskie udawało link na kartach bez biogramu), pod nim afiliacja szarym: karta mówi „kto”, temat jest w programie */
.mfn .mfn-osoba__tytul {
	margin-block-start: var(--mfn-o4);
	font-size: var(--mfn-t-m); font-weight: 500; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); text-wrap: balance;
	overflow-wrap: break-word;
}
.mfn .mfn-osoba__imie { color: var(--mfn-czern); }
.mfn .mfn-osoba__afiliacja { margin-block-start: var(--mfn-o2); font-size: var(--mfn-t-s); line-height: var(--mfn-lh-szeryf-m); color: var(--mfn-tekst-2); text-wrap: pretty; }
/* Okno: imię większe, afiliacja pod nim */
.mfn .mfn-okno__tytul { font-size: var(--mfn-t-l); line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); }
.mfn .mfn-okno__afiliacja { margin-block-start: calc(var(--mfn-o2) - var(--mfn-o5)); }
/* Biogram: link ze strzałką (wzorzec wyżej); bez JS strzałka obraca się w dół po rozwinięciu. */
.mfn .mfn-osoba__bio, .mfn .mfn-osoba__bio-przycisk { margin-block-start: var(--mfn-o4); }
/* Z JS summary zastępuje przycisk otwierający okno (ten sam wygląd). */
.mfn .mfn-osoba__bio summary, .mfn .mfn-osoba__bio-przycisk { list-style: none; cursor: pointer; }
.mfn .mfn-osoba__bio-przycisk { justify-self: start; padding: 0; border: 0; background: none; font-family: inherit; line-height: inherit; text-align: start; }
.mfn .mfn-osoba__bio summary::-webkit-details-marker { display: none; }
/* Cała karta klikalna, gdy jest biogram: przycisk rozciągnięty na kartę. Hover: imię ciemniejsze, strzałka w prawo; fokus obrysowuje kartę */
.mfn .mfn-osoba { position: relative; }
.mfn .mfn-osoba__bio-przycisk::after { content: ""; position: absolute; inset: 0; }
.mfn .mfn-osoba:has(.mfn-osoba__bio-przycisk) { cursor: pointer; }
/*
 * Hover karty (tylko z biogramem), dwa sygnały: zdjęcie z cz-b w kolor (seria spokojna, wskazana osoba ożywa)
 * i „Biogram” jak link ze strzałką (podkreślenie, strzałka w prawo). 400 ms dla zdjęcia, reszta w rytmie przycisków.
 */
@media (hover: hover) {
	.mfn .mfn-osoba:has(.mfn-osoba__bio-przycisk):hover .mfn-osoba__foto img { filter: grayscale(0); }
	.mfn .mfn-osoba:has(.mfn-osoba__bio-przycisk):hover .mfn-osoba__strzalka { transform: translateX(var(--mfn-o1)); }
	.mfn .mfn-osoba:has(.mfn-osoba__bio-przycisk):hover .mfn-osoba__bio-przycisk { text-decoration-line: underline; }
}
/* Klawiatura dostaje ten sam stan co hover, plus obrys */
.mfn .mfn-osoba:has(.mfn-osoba__bio-przycisk:focus-visible) .mfn-osoba__foto img { filter: grayscale(0); }
.mfn .mfn-osoba__bio-przycisk:focus-visible { text-decoration-line: underline; }
.mfn .mfn-osoba:has(.mfn-osoba__bio-przycisk:focus-visible) { outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
.mfn .mfn-osoba__bio-przycisk:focus-visible { outline: none; }
.mfn .mfn-osoba__bio[open] .mfn-osoba__strzalka { transform: rotate(90deg); }
.mfn .mfn-osoba__bio-tresc { padding-block-start: var(--mfn-o4); }
.mfn .mfn-osoba__bio-tresc p { font-size: var(--mfn-t-s); line-height: var(--mfn-lh); color: var(--mfn-tekst-2); max-width: var(--mfn-miara); }

/* Okno biogramu. Belka u góry: pasek szkolenia z karty po lewej, „Zamknij” po prawej, przyklejona przy przewijaniu.
   Pod nią desktop: kolorowe zdjęcie po lewej (w oknie osoba „ożywa” jak na hoverze karty), tytuł, biogram i link po prawej.
   Telefon: pełny ekran, mniejsze zdjęcie nad tekstem. Okno przewija się samo, strona pod spodem stoi. */
html:has(.mfn-okno[open]) { overflow: hidden; }
.mfn .mfn-okno {
	width: min(100% - 2 * var(--mfn-margines), 56rem); max-height: calc(100dvh - 2 * var(--mfn-o6));
	margin: auto; padding: 0 var(--mfn-o6) var(--mfn-o6); border: 0; overflow-y: auto; overscroll-behavior: contain;
	background: var(--mfn-biel); color: var(--mfn-tekst);
	/* Wejście i wyjście tym samym ruchem (allow-discrete: zamknięcie też się animuje tam, gdzie przeglądarka umie) */
	opacity: 0; translate: 0 var(--mfn-o4);
	transition: opacity var(--mfn-czas) var(--mfn-krzywa), translate var(--mfn-czas) var(--mfn-krzywa), display var(--mfn-czas) allow-discrete, overlay var(--mfn-czas) allow-discrete;
}
/* Fokus na samym oknie po otwarciu: bez obrysu, ramką jest przyciemnienie */
.mfn .mfn-okno:focus { outline: none; }
.mfn .mfn-okno[open] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--mfn-o6); align-items: start; opacity: 1; translate: 0 0; }
@starting-style { .mfn .mfn-okno[open] { opacity: 0; translate: 0 var(--mfn-o4); } }
/* = --mfn-przyciemnienie; ::backdrop nie dziedziczy zmiennych w starszym Safari */
.mfn .mfn-okno::backdrop { background: rgb(0 25 151 / 0); transition: background-color var(--mfn-czas) var(--mfn-krzywa), display var(--mfn-czas) allow-discrete, overlay var(--mfn-czas) allow-discrete; }
.mfn .mfn-okno[open]::backdrop { background: rgb(0 25 151 / 0.7); }
@starting-style { .mfn .mfn-okno[open]::backdrop { background: rgb(0 25 151 / 0); } }
.mfn .mfn-okno__belka {
	grid-column: 1 / -1; position: sticky; top: 0; z-index: 1;
	display: flex; align-items: center; justify-content: space-between; gap: var(--mfn-o4);
	margin-inline: calc(-1 * var(--mfn-o6)); margin-block-end: var(--mfn-o6); padding: var(--mfn-o3) var(--mfn-o3) var(--mfn-o3) var(--mfn-o6);
	background: var(--mfn-biel); border-block-end: 1px solid var(--mfn-linia-jasna);
}
.mfn .mfn-okno__pasek .mfn-osoba__pasek { flex-direction: row; }
.mfn .mfn-okno__glowa .mfn-osoba__foto img { filter: none; }
.mfn .mfn-okno__tresc { display: grid; gap: var(--mfn-o5); }
.mfn .mfn-okno__tytul { margin: 0; }
.mfn .mfn-okno__bio p { font-size: var(--mfn-t-base); line-height: var(--mfn-lh); color: var(--mfn-tekst-2); max-width: var(--mfn-miara); }
.mfn .mfn-okno__bio p + p { margin-block-start: var(--mfn-o4); }
.mfn .mfn-okno__program { margin: 0; }
.mfn .mfn-okno__program[hidden] { display: none; }
.mfn .mfn-okno__zamknij {
	flex: none; display: inline-flex; align-items: center; gap: var(--mfn-o2); min-height: var(--mfn-cel); padding-inline: var(--mfn-o3);
	border: 0; background: transparent; color: var(--mfn-czern); font: inherit; font-size: var(--mfn-t-s); font-weight: 500; cursor: pointer;
}
@media (hover: hover) { .mfn .mfn-okno__zamknij:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } }
/* Krzyżyk z dwóch belek, grubość jak linie systemu */
.mfn .mfn-okno__x { position: relative; width: var(--mfn-ikona-s); height: var(--mfn-ikona-s); }
.mfn .mfn-okno__x::before, .mfn .mfn-okno__x::after {
	content: ""; position: absolute; inset-inline: 0; top: calc(50% - 1px); height: 2px; background: currentColor; transform: rotate(45deg);
}
.mfn .mfn-okno__x::after { transform: rotate(-45deg); }
/* Temat szkolenia w oknie: jasny niebieski blok jak sekcja prowadzących, etykieta szeryfem jak w wierszach danych */
.mfn .mfn-okno__szkolenie { display: grid; gap: var(--mfn-o1); padding: var(--mfn-o4); background: var(--mfn-jasny); }
.mfn .mfn-okno__szkolenie[hidden] { display: none; }
.mfn .mfn-okno__szkolenie-etykieta { font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-s); line-height: var(--mfn-lh-szeryf-m); color: var(--mfn-tekst-2); }
.mfn .mfn-okno__szkolenie-temat { font-size: var(--mfn-t-m); font-weight: 500; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); color: var(--mfn-czern); text-wrap: balance; }
.mfn .mfn-okno__szkolenie > p { margin: 0; } /* odstępy niesie gap, nie margines akapitu */
.mfn .mfn-okno__szkolenie .mfn-okno__program { margin-block-end: calc(-1 * var(--mfn-o2)); } /* link ma 44 px wysokości, dół bloku bez podwójnego światła */
/* Telefon: pełny ekran wjeżdżający od dołu. Belka 44 px przyklejona: pasek szkolenia od lewej krawędzi (jak na karcie),
   po prawej sam krzyżyk (nazwa dla czytnika). Pod nią portret 96 px obok imienia, jak na liście, tylko w kolorze;
   dalej temat szkolenia i biogram na całą szerokość. Float, bo imię ma opłynąć zdjęcie, a reszta wrócić pod nie. */
@media (max-width: 47.99rem) {
	.mfn .mfn-okno {
		width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; translate: 0 var(--mfn-o6);
		padding: 0 max(var(--mfn-margines), env(safe-area-inset-right)) calc(var(--mfn-o7) + env(safe-area-inset-bottom)) max(var(--mfn-margines), env(safe-area-inset-left));
	}
	@starting-style { .mfn .mfn-okno[open] { opacity: 0; translate: 0 var(--mfn-o6); } }
	.mfn .mfn-okno[open] { display: flow-root; }
	.mfn .mfn-okno__belka {
		/* Do krawędzi ekranu mimo paddingu okna; belka sama odsuwa się od wcięcia */
		margin-inline: calc(-1 * max(var(--mfn-margines), env(safe-area-inset-left))) calc(-1 * max(var(--mfn-margines), env(safe-area-inset-right)));
		margin-block-end: var(--mfn-o5);
		padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); min-height: var(--mfn-cel); align-items: stretch;
	}
	.mfn .mfn-okno__pasek { display: flex; }
	.mfn .mfn-okno__pasek .mfn-osoba__pasek { align-self: stretch; align-items: stretch; } /* bez align-self: end z karty */
	.mfn .mfn-okno__pasek :is(.mfn-osoba__numer, .mfn-osoba__grupa) { display: flex; align-items: center; padding-inline: var(--mfn-o3); }
	.mfn .mfn-okno__zamknij { width: var(--mfn-cel); padding: 0; justify-content: center; }
	.mfn .mfn-okno__zamknij-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.mfn .mfn-okno__x { width: var(--mfn-ikona-m); height: var(--mfn-ikona-m); }
	.mfn .mfn-okno__glowa { float: left; width: 6rem; margin: 0 var(--mfn-o4) var(--mfn-o4) 0; }
	.mfn .mfn-okno__tresc { display: block; }
	.mfn .mfn-okno__tytul { font-size: var(--mfn-t-m); line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); text-wrap: balance; }
	.mfn .mfn-okno__afiliacja { margin-block-start: var(--mfn-o2); font-size: var(--mfn-t-xs); }
	.mfn .mfn-okno__szkolenie { clear: both; margin-block-start: var(--mfn-o5); }
	.mfn .mfn-okno__bio { clear: both; margin-block-start: var(--mfn-o5); }
}

/* ---------- Jak wygląda udział: trzy kroki jak posty „Kolektywne czytanko”: kolorowe zdjęcie u góry, pod nim niebieskie pole
   z numerem i tytułem (biały 4,74:1) i opisem. Pod krokami wynagrodzenie jako szeroki post: pole z kwotą i transzami + klepsydra KV. ---------- */

.mfn .mfn-kroki { display: grid; gap: var(--mfn-o5); }
/* Od 48rem kroki dzielą wiersze (subgrid): tytuły 1- i 2-liniowe, a opisy i tak startują na jednej wysokości. */
@media (min-width: 48rem) {
	.mfn .mfn-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mfn .mfn-krok { grid-row: span 3; grid-template-rows: subgrid; }
}
.mfn .mfn-krok {
	display: grid; gap: 0; align-content: start; max-width: none;
	background: var(--mfn-jasny); color: var(--mfn-czern); /* jasne pola: wynagrodzenie pod nimi zostaje jedynym mocnym polem sekcji */
}
.mfn .mfn-krok__foto { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mfn-niebieski-ciemny); }
@media (max-width: 47.99rem) { .mfn .mfn-krok__foto { aspect-ratio: 16 / 9; } } /* telefon: trzy kroki jeden pod drugim, niższe zdjęcia skracają sekcję */
.mfn .mfn-krok__foto img { width: 100%; height: 100%; object-fit: cover; }
.mfn .mfn-krok .mfn-h3 {
	font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l);
	padding: var(--mfn-o5) var(--mfn-o5) var(--mfn-o4);
}
.mfn .mfn-krok__nr { display: block; margin-block-end: var(--mfn-o2); color: var(--mfn-liczba); font-variant-numeric: tabular-nums; }
.mfn .mfn-krok__opis { padding: 0 var(--mfn-o5) var(--mfn-o5); }
.mfn .mfn-krok__opis p { font-size: var(--mfn-t-s); }

.mfn .mfn-wynagrodzenie {
	display: grid; gap: var(--mfn-o5);
	margin-block-start: var(--mfn-o7); padding: var(--mfn-karta-p); padding: round(nearest, var(--mfn-karta-p), 8px);
	background: var(--mfn-niebieski); color: var(--mfn-biel); /* ciepła biel na #5060FD 4,56 */
}
/* Lewa: etykieta i kwota. Środek: dwie transze jak wiersz danych w hero (etykieta szeryfem nad kwotą). Prawa: klepsydra do krawędzi pola. */
@media (min-width: 48rem) {
	.mfn .mfn-wynagrodzenie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mfn-o6); align-items: start; }
}
.mfn .mfn-wynagrodzenie__glowa { display: grid; gap: var(--mfn-o2); align-content: start; }
.mfn .mfn-wynagrodzenie__kwota { font-size: var(--mfn-t-xl); font-weight: 400; line-height: var(--mfn-lh-xl); letter-spacing: var(--mfn-ls-xl); text-wrap: balance; }
.mfn .mfn-wynagrodzenie__opis { display: grid; gap: var(--mfn-o4); align-content: start; }
.mfn .mfn-wynagrodzenie__opis p { font-size: var(--mfn-t-s); }
.mfn .mfn-wynagrodzenie__opis p + p { margin-block-start: 0; }
.mfn .mfn-transze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mfn-o5); margin: 0; padding-block-start: var(--mfn-o4); border-block-start: 1px solid currentColor; }
/* Kwota, pod nią opis drobnym szeryfem (kolejność czytania: ile, potem kiedy) */
@media (max-width: 22.49rem) { .mfn .mfn-transze { grid-template-columns: minmax(0, 1fr); row-gap: var(--mfn-o4); } } /* 320: kolumny po 112 px łamały opis na 4 wiersze */
.mfn .mfn-transza { display: flex; flex-direction: column; gap: var(--mfn-o2); }
.mfn .mfn-transza__kwota { font-size: var(--mfn-t-m); font-weight: 400; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); white-space: nowrap; }
.mfn .mfn-transza__opis { margin: 0; font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-s); line-height: var(--mfn-lh-szeryf-m); }
.mfn .mfn-wynagrodzenie .mfn-link { font-weight: 500; }
/* „Zgłoś się” przy kwocie, regulamin obok jako link */
.mfn .mfn-wynagrodzenie__opis .mfn-wynagrodzenie__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mfn-o4) var(--mfn-o5); margin-block-start: var(--mfn-o2); } /* + gap 16 = 24 */
/* Klepsydra KV: moduł do prawej, górnej i dolnej krawędzi pola, tylko od 64rem */
.mfn .mfn-wynagrodzenie__znak { display: none; }
@media (min-width: 64rem) {
	.mfn .mfn-wynagrodzenie { --znak: clamp(12rem, 4rem + 12vw, 18rem); position: relative; padding-inline-end: calc(var(--znak) + var(--mfn-o7)); }
	.mfn .mfn-wynagrodzenie__znak { display: block; position: absolute; inset-block: 0; inset-inline-end: 0; width: var(--znak); height: 100%; aspect-ratio: auto; }
	.mfn .mfn-wynagrodzenie__znak .mfn-flaga__tlo { fill: var(--mfn-niebieski); }
}

/* ---------- Pytania i dokumenty. Desktop: lewa kolumna kontakt (pole w ciepłej bieli) i dokumenty, prawa akordeon.
   Telefon: najpierw pytania (kolejność DOM), potem kontakt i dokumenty. „O projekcie” jako nota pod siatką. ---------- */

/* Grupy pytań i „Dokumenty”: rola h3 strony (t-m, 500), stopień niżej niż h2, żeby nie konkurowały z tytułem sekcji */
.mfn .mfn-faq__grupa { margin-block: var(--mfn-o7) var(--mfn-o4); font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); } /* jak nazwa grupy w programie */
.mfn .mfn-faq__grupa:first-of-type { margin-block-start: 0; }
.mfn .mfn-faq__boczne { display: grid; gap: var(--mfn-o7); align-content: start; }
@media (min-width: 64rem) {
	.mfn .mfn-faq__boczne { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--mfn-pasek-h, 0px) + var(--mfn-o6)); }
	.mfn .mfn-faq__pytania { grid-column: 2; grid-row: 1; }
}

/* Kontakt: płaskie pole, pytanie szeryfem jak w bramce „Dla kogo”, e-mail jako główna akcja */
.mfn .mfn-kontakt { gap: var(--mfn-o4); }
.mfn .mfn-kafel .mfn-kontakt__tytul { font-family: var(--mfn-font-szeryf); font-size: var(--mfn-t-l); line-height: var(--mfn-lh-szeryf-l); letter-spacing: 0; }
.mfn .mfn-kontakt__email {
	/* Wiersz akcji jak dokumenty obok: adres między liniami, koperta po prawej (mailto otwiera pocztę, nie stronę), cały wiersz klikalny */
	display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--mfn-o4);
	min-height: var(--mfn-cel); padding-block: var(--mfn-o4); border-block: 1px solid var(--mfn-czern);
	font-size: var(--mfn-t-base); font-weight: 500; line-height: var(--mfn-lh-m); color: var(--mfn-czern); text-decoration: none;
}
.mfn .mfn-kontakt__adres { overflow-wrap: anywhere; }
.mfn .mfn-kontakt__ikona { display: block; width: var(--mfn-ikona-m); height: var(--mfn-ikona-m); }
.mfn .mfn-kontakt__email { --mfn-wylew: 0.75rem; transition: background-color var(--mfn-czas) var(--mfn-krzywa), box-shadow var(--mfn-czas) var(--mfn-krzywa); }
@media (hover: hover) { .mfn .mfn-kontakt__email:hover :is(.mfn-kontakt__adres, .mfn-kontakt__ikona) { color: var(--mfn-niebieski-ciemny); } }
/* Wiersz leży na jasnym kafelku, więc hover odwraca tło: biel (na bieli strony hover jest jasny) */
@media (hover: hover) {
	.mfn .mfn-kontakt__email:hover { background: var(--mfn-biel); box-shadow: calc(-1 * var(--mfn-wylew)) 0 0 var(--mfn-biel), var(--mfn-wylew) 0 0 var(--mfn-biel); }
}
.mfn .mfn-kontakt__opis { font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); }

/* Dokumenty: tytuł jak grupa pytań, wiersze między liniami 1 px, cały wiersz klikalny, strzałka po prawej */
.mfn .mfn-dokumenty__tytul { margin-block-end: var(--mfn-o4); }
.mfn .mfn-dokumenty { display: grid; border-block-end: 1px solid var(--mfn-czern); }
.mfn .mfn-dokumenty > li { max-width: none; } /* miara 52ch skracała wiersze względem dolnej linii (tablet) */
.mfn .mfn-dokument {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--mfn-o4); row-gap: var(--mfn-o2);
	padding-block: var(--mfn-o4); min-height: var(--mfn-cel);
	color: var(--mfn-czern); text-decoration: none; border-block-start: 1px solid var(--mfn-czern);
}
.mfn .mfn-dokument__nazwa { font-weight: 500; font-size: var(--mfn-t-s); }
.mfn .mfn-dokument__opis { grid-column: 1; font-size: var(--mfn-t-xs); color: var(--mfn-tekst-2); }
.mfn .mfn-dokument__strzalka { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--mfn-ikona-m); line-height: 1; transition: transform var(--mfn-czas) var(--mfn-krzywa); }
/* Hover jak wiersze pytań i aktualności: kolor zamiast podkreślenia */
.mfn .mfn-dokument__nazwa, .mfn .mfn-dokument__strzalka, .mfn .mfn-kontakt__adres, .mfn .mfn-kontakt__ikona { transition: color var(--mfn-czas) var(--mfn-krzywa), transform var(--mfn-czas) var(--mfn-krzywa); }
@media (hover: hover) { .mfn .mfn-dokument:hover :is(.mfn-dokument__nazwa, .mfn-dokument__strzalka) { color: var(--mfn-niebieski-ciemny); } }
@media (hover: hover) { .mfn .mfn-dokument:hover .mfn-dokument__strzalka { transform: translateX(var(--mfn-o1)); } }

/* O projekcie: nota FAMI pod siatką, mały tekst na pełnej szerokości, na desktopie w dwóch szpaltach */
.mfn .mfn-nota { display: grid; gap: var(--mfn-o4); margin-block-start: var(--mfn-o8); padding-block-start: var(--mfn-o5); border-block-start: 1px solid var(--mfn-czern); }
.mfn .mfn-nota__tresc p { font-size: var(--mfn-t-xs); color: var(--mfn-tekst-2); max-width: var(--mfn-miara); }
@media (min-width: 64rem) {
	.mfn .mfn-nota { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--mfn-kolumny); column-gap: round(nearest, var(--mfn-kolumny), 8px); }
	.mfn .mfn-nota__tresc { columns: 2; column-gap: var(--mfn-o6); }
	.mfn .mfn-nota__tresc p { break-inside: avoid; }
}

/* ---------- Zgłoszenie: niebieska klamra strony, biały sygnet jako kompozycja, formularz na białym ---------- */

.mfn.mfn-zgloszenie { background-color: var(--mfn-niebieski); color: var(--mfn-biel); }
.mfn .mfn-zgloszenie__siatka { display: grid; gap: var(--mfn-o7); } /* nagłówek→formularz 48 jak w innych sekcjach */
@media (min-width: 64rem) {
	.mfn .mfn-zgloszenie__siatka { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--mfn-kolumny); column-gap: round(nearest, var(--mfn-kolumny), 8px); align-items: start; }
	/* Bez przyklejenia: kolumna jest wyższa niż ekran, przyklejona chowałaby listę „Przygotuj” do końca formularza */
}
/* Korzeń widgetu nagłówka zgłoszeń jest sam .mfn, więc kolor tekstu trzeba nadać tu, nie przez dziedziczenie z sekcji. */
.mfn.mfn-zgloszenie__naglowek,
.mfn .mfn-zgloszenie__naglowek { display: grid; gap: var(--mfn-o4); align-content: start; color: var(--mfn-biel); }
.mfn .mfn-zgloszenie__naglowek .mfn-h2 { margin-block-end: var(--mfn-o2); }
.mfn .mfn-zgloszenie__naglowek .mfn-tylko-nabor { display: grid; gap: var(--mfn-o4); }
.mfn .mfn-zgloszenie__naglowek .mfn-h3 { margin-block-start: var(--mfn-o2); } /* 24 przed, 16 pod: tytuł listy należy do listy */
.mfn .mfn-zgloszenie__naglowek .mfn-dane { margin-block-start: var(--mfn-o2); }
/* „Przygotuj” zwijane (na telefonie zwinięte przez mfn.js): plus w minus jak w akordeonie, cały wiersz 44 px */
.mfn .mfn-przygotuj summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--mfn-o4);
	min-height: var(--mfn-cel); cursor: pointer; list-style: none;
}
.mfn .mfn-przygotuj summary::-webkit-details-marker { display: none; }
.mfn .mfn-przygotuj summary .mfn-h3 { margin: 0; }
.mfn .mfn-przygotuj summary::after {
	content: ""; flex: none; width: var(--mfn-ikona-s); height: var(--mfn-ikona-s);
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	transition: rotate var(--mfn-czas) var(--mfn-krzywa);
}
.mfn .mfn-przygotuj[open] summary::after { rotate: 90deg; background: linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.mfn .mfn-przygotuj .mfn-warunki { margin-block-start: var(--mfn-o4); }
@media (forced-colors: active) {
	.mfn .mfn-przygotuj summary::after { background: none; content: "+"; width: auto; height: auto; }
	.mfn .mfn-przygotuj[open] summary::after { content: "−"; rotate: none; }
}
.mfn .mfn-zgloszenie__zapis { font-size: var(--mfn-t-xs); line-height: var(--mfn-lh-szeryf-m); margin-block-end: var(--mfn-o3); }
.mfn .mfn-zgloszenie__po { padding: var(--mfn-o5); background: var(--mfn-biel); color: var(--mfn-czern); }
.mfn-nabor-zamkniety .mfn .mfn-zgloszenie__po { display: grid; gap: var(--mfn-o3); }

/* Formularz: makieta w podglądzie i widget Form z Elementora Pro (niżej) */
.mfn.mfn-formularz { background: var(--mfn-biel); color: var(--mfn-czern); padding: var(--mfn-karta-p); padding: round(nearest, var(--mfn-karta-p), 8px); display: grid; gap: var(--mfn-o5); }
.mfn.mfn-formularz > p + p { margin-block-start: 0; } /* odstęp niesie gap, bez dokładania marginesu akapitu */
.mfn .mfn-formularz__uwaga { font-size: var(--mfn-t-xs); color: var(--mfn-tekst-2); }
.mfn .mfn-krok-formularza { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--mfn-o6); } /* 32 między pytaniami, wewnątrz pytania najwyżej 8 */
:is(.mfn, .mfn-formularz) .mfn-krok-formularza__legenda { padding: 0; font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); margin-block-end: var(--mfn-o5); } /* tytuł kroku 24 nad pierwszą etykietą, etykieta→pole 12 */
/* Licznik „Krok 1 z 5” tylko dla czytnika: wzrokowo krok pokazuje pasek postępu z nazwami */
.mfn-js .mfn .mfn-krok-formularza__licznik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mfn .mfn-krok-formularza__licznik { display: block; color: var(--mfn-tekst-2); margin-block-end: var(--mfn-o1); }
/* Pasek postępu (mfn.js) w języku KV: jeden ciągły tor 2 px, na początku każdego kroku romb (ten sam znak co w listach).
   Zrobione: tor i romb w ciemnym niebieskim. Bieżący: tor ciemny, romb pomarańczowy, nazwa czarna 500. Następne: tor jasny,
   romb jasny. Kroki równej szerokości (romby w równych odstępach), tor kończy się na ostatnim rombie. Telefon: same romby i numery. */
.mfn .mfn-postep { list-style: none; padding: 0; padding-block-start: 0.375rem; margin-block-end: var(--mfn-o5); display: flex; } /* 24 + 24 przerwy formularza = 48 do tytułu kroku */
.mfn .mfn-postep li {
	position: relative; flex: 1 1 0; min-width: 0; max-width: none;
	padding-block-start: var(--mfn-o3); padding-inline-end: var(--mfn-o4);
	border-block-start: 2px solid var(--mfn-linia-jasna);
	font-size: var(--mfn-t-xs); line-height: var(--mfn-lh-etykieta); color: var(--mfn-tekst-2);
	transition: border-color var(--mfn-czas) var(--mfn-krzywa), color var(--mfn-czas) var(--mfn-krzywa);
}
.mfn .mfn-postep li:last-child { padding-inline-end: 0; border-block-start-color: transparent; } /* bez ogona za ostatnim rombem */
.mfn .mfn-postep li::before {
	/* Romb 10 px jak w listach, środkiem na torze 2 px */
	content: ""; position: absolute; inset-inline-start: 0; top: calc(-0.3125rem - 1px);
	width: 0.625rem; height: 0.625rem; transform: rotate(45deg);
	background: var(--mfn-linia-jasna);
	transition: background-color var(--mfn-czas) var(--mfn-krzywa), scale var(--mfn-czas) var(--mfn-krzywa);
}
.mfn .mfn-postep__krok { display: flex; flex-direction: column; gap: var(--mfn-o1); align-items: flex-start; text-align: start; }
/* Zrobiony krok to przycisk: wygląda jak etykieta, na hover podkreślona nazwa */
.mfn .mfn-postep button.mfn-postep__krok { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) { .mfn .mfn-postep button.mfn-postep__krok:hover .mfn-postep__nazwa { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } }
.mfn .mfn-postep__nr { font-variant-numeric: tabular-nums; }
.mfn .mfn-postep :is(.mfn-postep--zrobiony, .mfn-postep--biezacy) { border-block-start-color: var(--mfn-niebieski-ciemny); }
.mfn .mfn-postep .mfn-postep--zrobiony::before { background: var(--mfn-niebieski-ciemny); }
.mfn .mfn-postep .mfn-postep--biezacy::before { background: var(--mfn-pomarancz); scale: 1.2; }
.mfn .mfn-postep .mfn-postep--biezacy { color: var(--mfn-czern); font-weight: 500; }
.mfn .mfn-postep :is(.mfn-postep--zrobiony, .mfn-postep--biezacy) .mfn-postep__nr { color: var(--mfn-niebieski-ciemny); }
@media (max-width: 39.99rem) {
	/* Nazw kroków w pasku nie ma, więc tytuł kroku dostaje widoczny licznik „Krok 1 z 5” */
	.mfn-js .mfn .mfn-krok-formularza__legenda .mfn-krok-formularza__licznik { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
	.mfn .mfn-postep__nazwa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (forced-colors: active) { .mfn .mfn-postep li::before { forced-color-adjust: none; background: CanvasText; } .mfn .mfn-postep .mfn-postep--biezacy::before { background: Highlight; } }
/* Zasada o polach opcjonalnych: pod tytułem pierwszego kroku, tuż przed polami (8 pod tytułem). Notka podglądu na samym dole. */
.mfn .mfn-formularz__zasada { font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); margin-block-start: calc(var(--mfn-o2) - var(--mfn-o5)); }
.mfn .mfn-krok-formularza__wstep { font-size: var(--mfn-t-s); padding-inline-start: var(--mfn-o4); border-inline-start: 2px solid var(--mfn-niebieski-ciemny); }
.mfn .mfn-pola { display: grid; gap: var(--mfn-o6) var(--mfn-o5); } /* 32 jak między pytaniami kroku */
@media (min-width: 40rem) { .mfn .mfn-pola--2 { grid-template-columns: 1fr 1fr; } }
/* Pola obok siebie bez rozciągania do wysokości sąsiada (np. gdy przy jednym jest błąd) */
.mfn .mfn-pola--2 .mfn-pole { align-content: start; }
.mfn .mfn-pole { display: grid; gap: var(--mfn-o2); }
.mfn .mfn-pole label,
.mfn .mfn-wybor legend { font-weight: 500; font-size: var(--mfn-t-s); }
.mfn .mfn-pole__wym { font-weight: 400; color: var(--mfn-tekst-2); }
:is(.mfn, .mfn-formularz) .mfn-pole__opis { font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); max-width: none; } /* instrukcja do pola: 16 px, nie 14 */ /* do krawędzi pola, inaczej prawe brzegi skaczą */
/* Etykieta i podpowiedź to jedna para (4), pole pod nimi (8). */
.mfn .mfn-pole > label + .mfn-pole__opis,
.mfn .mfn-wybor > legend + .mfn-pole__opis { margin-block-start: calc(var(--mfn-o1) - var(--mfn-o2)); }
.mfn .mfn-pole input,
.mfn .mfn-pole textarea {
	width: 100%; min-height: var(--mfn-cel); padding: var(--mfn-o2) var(--mfn-o3);
	border: 2px solid var(--mfn-ramka-pola); border-radius: 0; background: var(--mfn-biel); color: var(--mfn-czern);
	font: 400 var(--mfn-t-base) / var(--mfn-lh-szeryf-m) var(--mfn-font);
	transition: border-color var(--mfn-czas) var(--mfn-krzywa);
}
/* Placeholder tylko z przykładem formatu, instrukcje są tekstem nad polem. #6b6b6b: 5,3:1 na białym */
.mfn .mfn-pole input::placeholder { color: var(--mfn-ramka-pola); opacity: 1; }
.mfn .mfn-pole textarea { resize: vertical; } /* wysokość z rows: 3 linie na linki, 5–8 na dłuższe odpowiedzi */
@media (hover: hover) { .mfn .mfn-pole :is(input, textarea):hover { border-color: var(--mfn-czern); } }
.mfn .mfn-pole input:focus-visible,
.mfn .mfn-pole textarea:focus-visible { border-color: var(--mfn-czern); outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
.mfn .mfn-pole input[type="file"] { padding: 0; border: 0; min-height: 0; font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); }
.mfn .mfn-pole input[type="file"]::file-selector-button {
	min-height: var(--mfn-cel); margin-inline-end: var(--mfn-o3); padding: var(--mfn-o2) var(--mfn-o5);
	border: 2px solid var(--mfn-czern); border-radius: 0; background: var(--mfn-biel); color: var(--mfn-czern);
	font: 500 var(--mfn-t-s) / var(--mfn-lh-m) var(--mfn-font); cursor: pointer;
	transition: background-color var(--mfn-czas) var(--mfn-krzywa), color var(--mfn-czas) var(--mfn-krzywa);
}
@media (hover: hover) { .mfn .mfn-pole input[type="file"]::file-selector-button:hover { background: var(--mfn-tint); } } /* jak drugi przycisk */
.mfn .mfn-pole input[type="file"]:focus-visible { outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
/* Pole odsłonięte wyborem (np. plan po „dopiero planuję”): wcięte z linią, blisko pytania, które je odsłoniło. */
.mfn .mfn-pole--zalezne,
.elementor-widget-form.mfn-formularz .mfn-pole--zalezne { margin-block-start: calc(var(--mfn-o3) - var(--mfn-o6)); padding-inline-start: var(--mfn-o4); border-inline-start: 2px solid var(--mfn-linia-jasna); }
.mfn .mfn-pole [aria-invalid="true"] { border-color: var(--mfn-blad); }
:is(.mfn, .mfn-formularz) .mfn-pole__blad { color: var(--mfn-blad); font-size: var(--mfn-t-s); font-weight: 500; }
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy {
	/* Panel jak pola na stronie: jasne tło i pasek koloru zamiast ramki; bez obrysu fokusu (nie jest interaktywny, czytnik i tak go czyta) */
	display: grid; gap: var(--mfn-o3); padding: var(--mfn-o4) var(--mfn-o5);
	background: var(--mfn-blad-tlo); border-inline-start: 4px solid var(--mfn-blad);
}
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy p { color: var(--mfn-blad); font-weight: 500; }
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mfn-o2); }
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy li { position: relative; padding-inline-start: var(--mfn-o5); font-size: var(--mfn-t-s); max-width: none; }
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy li::before {
	content: ""; position: absolute; inset-inline-start: 0.125rem; top: calc(0.775em - 0.25rem);
	width: 0.5rem; height: 0.5rem; background: var(--mfn-blad); transform: rotate(45deg); /* romb jak w listach strony */
}
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy a { color: var(--mfn-blad); font-weight: 400; text-decoration-thickness: 1px; }
@media (hover: hover) { :is(.mfn, .mfn-formularz) .mfn-formularz__bledy a:hover { text-decoration-thickness: 2px; } }
:is(.mfn, .mfn-formularz) .mfn-formularz__bledy:focus { outline: none; }
@media (forced-colors: active) { :is(.mfn, .mfn-formularz) .mfn-formularz__bledy { border: 2px solid CanvasText; } }
/* „Błąd:” tylko dla czytnika: wzrokowo błąd niesie kolor, ramka pola i lista nad krokiem */
:is(.mfn, .mfn-formularz) .mfn-pole__blad { position: relative; }
:is(.mfn, .mfn-formularz) .mfn-pole__blad::before { content: "Błąd: "; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mfn .mfn-pole__licznik { font-size: var(--mfn-t-xs); color: var(--mfn-tekst-2); margin-block-start: calc(var(--mfn-o1) - var(--mfn-o2)); font-variant-numeric: tabular-nums; } /* pod polem, od lewej jak reszta */
.mfn .mfn-wybor { border: 0; padding: 0; margin: 0; display: grid; gap: var(--mfn-o4); }
.mfn .mfn-wybor legend { padding: 0; margin-block-end: var(--mfn-o2); }
.mfn .mfn-zgoda { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--mfn-o3); align-items: start; }
/* Pola wyboru rysowane od zera: kwadrat dla zaznaczenia, koło dla jednej odpowiedzi (natywne w Safari są zaokrąglone i mylą się). */
.mfn .mfn-zgoda input {
	appearance: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; display: grid; place-content: center;
	border: 2px solid var(--mfn-ramka-pola); border-radius: 0; background: var(--mfn-biel); cursor: pointer;
	transition: border-color var(--mfn-czas) var(--mfn-krzywa), background-color var(--mfn-czas) var(--mfn-krzywa);
}
.mfn .mfn-zgoda input[type="radio"] { border-radius: 50%; }
@media (hover: hover) { .mfn .mfn-zgoda input:hover { border-color: var(--mfn-czern); } }
.mfn .mfn-zgoda input:checked { border-color: var(--mfn-niebieski-ciemny); }
.mfn .mfn-zgoda input[type="checkbox"]:checked { background: var(--mfn-niebieski-ciemny); }
.mfn .mfn-zgoda input[type="checkbox"]:checked::before {
	content: ""; width: 0.75rem; height: 0.4rem; margin-block-start: -0.15rem;
	border-inline-start: 2px solid var(--mfn-biel); border-block-end: 2px solid var(--mfn-biel); transform: rotate(-45deg);
}
.mfn .mfn-zgoda input[type="radio"]:checked::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--mfn-niebieski-ciemny); }
.mfn .mfn-zgoda input:focus-visible { outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
.mfn .mfn-zgoda input[aria-invalid="true"] { border-color: var(--mfn-blad); }
@media (forced-colors: active) { .mfn .mfn-zgoda input { appearance: auto; } .mfn .mfn-zgoda input::before { content: none; } }
.mfn .mfn-zgoda label { font-size: var(--mfn-t-s); cursor: pointer; }
.mfn .mfn-zgoda .mfn-pole__blad { grid-column: 2; }
.mfn .mfn-zgoda label .mfn-pole__opis { display: block; margin-block-start: var(--mfn-o1); }
.mfn .mfn-wybor + .mfn-wybor { margin-block-start: var(--mfn-o4); } /* 32 + 16 = 48: osobna grupa pytań */
/* Podsumowanie na początku ostatniego kroku: kroki jako zwinięte wiersze między liniami (jak akordeon), „Zmień” po prawej */
.mfn .mfn-podsumowanie { display: grid; border-block-end: 1px solid var(--mfn-czern); }
.mfn .mfn-podsumowanie__tytul { margin-block-end: var(--mfn-o3); font-size: var(--mfn-t-m); font-weight: 500; line-height: var(--mfn-lh-m); }
.mfn .mfn-podsumowanie__wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--mfn-o4); align-items: start; border-block-start: 1px solid var(--mfn-czern); }
.mfn .mfn-podsumowanie__krok summary {
	display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: baseline;
	padding-block: var(--mfn-o3); list-style: none; cursor: pointer; font-weight: 500; line-height: var(--mfn-lh-m);
}
.mfn .mfn-podsumowanie__krok summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .mfn .mfn-podsumowanie__krok summary:hover .mfn-podsumowanie__nazwa { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } }
.mfn .mfn-podsumowanie__nr { font-size: var(--mfn-t-s); font-weight: 400; color: var(--mfn-liczba); font-variant-numeric: tabular-nums; }
.mfn .mfn-podsumowanie__nazwa::after { content: "+" / ""; margin-inline-start: var(--mfn-o2); font-weight: 400; color: var(--mfn-tekst-2); }
.mfn .mfn-podsumowanie__krok[open] .mfn-podsumowanie__nazwa::after { content: "−" / ""; }
.mfn .mfn-podsumowanie__krok dl { display: grid; gap: var(--mfn-o1) var(--mfn-o4); margin: 0; padding: 0 0 var(--mfn-o4) 2.5rem; }
@media (max-width: 39.99rem) { .mfn .mfn-podsumowanie__krok dd + dt { margin-block-start: var(--mfn-o3); } } /* jedna kolumna: pytanie przy odpowiedzi (4), między parami 16 */
@media (min-width: 40rem) { .mfn .mfn-podsumowanie__krok dl { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.mfn .mfn-podsumowanie__krok dt { font-size: var(--mfn-t-xs); color: var(--mfn-tekst-2); }
.mfn .mfn-podsumowanie__krok dd { margin: 0 0 var(--mfn-o2); font-size: var(--mfn-t-s); overflow-wrap: anywhere; }
.mfn .mfn-podsumowanie__zmien {
	/* Ta sama wysokość linii i odstęp co wiersz kroku: „Zmień” stoi w linii z nazwą */
	padding: var(--mfn-o3) 0; border: 0; background: none; color: var(--mfn-niebieski-ciemny);
	font: 500 var(--mfn-t-s) / calc(var(--mfn-t-base) * 1.25) var(--mfn-font); cursor: pointer;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
@media (hover: hover) { .mfn .mfn-podsumowanie__zmien:hover { text-decoration-thickness: 2px; } }
.mfn .mfn-formularz__akcje { display: flex; flex-wrap: wrap; gap: var(--mfn-o3); justify-content: space-between; padding-block-start: var(--mfn-o5); border-block-start: 1px solid var(--mfn-linia-jasna); }
/* Telefon: przyciski na całą szerokość (kciuk), w kolejności z DOM: „Wstecz” nad „Dalej” */
@media (max-width: 39.99rem) {
	.mfn .mfn-formularz__akcje > .mfn-btn { flex: 1 1 100%; justify-content: center; }
	/* ⚠️ Klasy Elementora do sprawdzenia na 4.2.4 */
	.elementor-widget-form.mfn-formularz :is(.e-form__buttons, .elementor-field-type-submit) { flex-basis: 100%; flex-direction: column; }
	.elementor-widget-form.mfn-formularz :is(.e-form__buttons__wrapper, .e-form__buttons__wrapper__button, .elementor-field-type-submit .elementor-button) { width: 100%; justify-content: center; }
	/* Lista błędów zwięźle: linki do pól w jednym akapicie po przecinku zamiast słupka na cały ekran; wszystkie zostają */
	:is(.mfn, .mfn-formularz) .mfn-formularz__bledy ul { display: flex; flex-wrap: wrap; gap: var(--mfn-o1) 0; }
	:is(.mfn, .mfn-formularz) .mfn-formularz__bledy li { padding-inline-start: 0; }
	:is(.mfn, .mfn-formularz) .mfn-formularz__bledy li::before { content: none; }
	:is(.mfn, .mfn-formularz) .mfn-formularz__bledy li:not(:last-child)::after { content: ","; margin-inline-end: 0.35em; color: var(--mfn-blad); }
}
.mfn.mfn-formularz:has(> .mfn-sukces) { gap: var(--mfn-o6); }

/* Widok po wysłaniu: zamiast ramki w ramce — znak, duży tytuł, lista „Co dalej” na liniach, polecenie.
   Korzeń dostaje klasę .mfn w mfn.js, więc tokeny są dostępne bez wartości zapasowych. */
.mfn-sukces { display: grid; gap: var(--mfn-o6); color: var(--mfn-czern); font-family: var(--mfn-font); }
.mfn-sukces > * { max-width: none; }
.mfn-sukces__znak { display: flex; align-items: center; gap: var(--mfn-o3); font-size: var(--mfn-t-xs); font-weight: 600; letter-spacing: var(--mfn-ls-etykieta); line-height: var(--mfn-lh-etykieta); text-transform: uppercase; color: var(--mfn-niebieski-ciemny); }
.mfn-sukces__ikona { flex: none; width: 1.75rem; height: 1.75rem; display: grid; place-content: center; background: var(--mfn-niebieski-ciemny); }
.mfn-sukces__ikona::before { content: ""; width: 0.95rem; height: 0.5rem; margin-block-start: -0.2rem; border-inline-start: 2px solid var(--mfn-biel); border-block-end: 2px solid var(--mfn-biel); transform: rotate(-45deg); }
.mfn-sukces__glowa { display: grid; gap: var(--mfn-o3); }
.mfn-sukces__tytul { margin: 0; font-size: var(--mfn-t-l); font-weight: 400; line-height: var(--mfn-lh-l); letter-spacing: var(--mfn-ls-l); text-wrap: balance; }
.mfn-sukces__tytul:focus { outline: none; }
.mfn-sukces__uwaga { margin: 0; font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); max-width: var(--mfn-miara); }
.mfn-sukces__podtytul { margin: 0 0 var(--mfn-o3); font-size: var(--mfn-t-s); font-weight: 500; }
/* „Co dalej” jako oś czasu w języku paska postępu: pionowa linia 2 px, romby; bieżący etap (nabór trwa) pomarańczowy, następne jasne */
.mfn-sukces__kroki { list-style: none; margin: 0; padding: 0; display: grid; }
.mfn-sukces__kroki li {
	position: relative; max-width: none; padding: 0 0 var(--mfn-o5) var(--mfn-o6); font-size: var(--mfn-t-base); line-height: var(--mfn-lh-m);
}
.mfn-sukces__kroki li::after { content: ""; position: absolute; inset-inline-start: calc(0.3125rem - 1px); inset-block: 0.75em 0; width: 2px; background: var(--mfn-linia-jasna); }
.mfn-sukces__kroki li:last-child { padding-block-end: 0; }
.mfn-sukces__kroki li:last-child::after { content: none; }
.mfn-sukces__kroki li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: calc(0.625em - 0.3125rem); z-index: 1;
	width: 0.625rem; height: 0.625rem; background: var(--mfn-linia-jasna); transform: rotate(45deg);
}
.mfn-sukces__kroki li:first-child::before { background: var(--mfn-pomarancz); scale: 1.2; }
.mfn-sukces__polec { display: grid; gap: var(--mfn-o3); justify-items: start; padding: var(--mfn-o5); background: var(--mfn-jasny); }
.mfn-sukces__polec p { margin: 0; }
.mfn-sukces__status:empty { display: none; }
.mfn-sukces__status { font-size: var(--mfn-t-s); font-weight: 500; overflow-wrap: anywhere; }
.mfn-sukces__kontakt { margin: 0; font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); }
.elementor-widget-form.mfn-wyslano .elementor-message { display: none; }
@media (forced-colors: active) { .mfn-sukces__ikona { border: 2px solid CanvasText; } .mfn-sukces__ikona::before { border-color: CanvasText; } }

/*
 * Widget Form z Elementora Pro, klasy CSS na widgecie: „mfn-formularz mfn-tylko-nabor”.
 * Tokeny są zdefiniowane także na .mfn-formularz (początek pliku), więc wszystko idzie przez nie: zmiana palety obejmuje formularz.
 * ⚠️ Klasy markupu Elementora Pro do sprawdzenia na wersji 4.2.4, gdy będzie lokalna kopia Pro.
 */
.elementor-widget-form.mfn-formularz {
	background: var(--mfn-biel); padding: var(--mfn-karta-p); padding: round(nearest, var(--mfn-karta-p), 8px);
	font-family: var(--mfn-font); color: var(--mfn-czern);
}
.elementor-widget-form.mfn-formularz .elementor-field-group { margin-block-end: var(--mfn-o6); }
.elementor-widget-form.mfn-formularz .elementor-field-group > .elementor-field-label { font-weight: 500; font-size: var(--mfn-t-s); color: var(--mfn-czern); margin-block-end: var(--mfn-o2); }
.elementor-widget-form.mfn-formularz .elementor-field-group .elementor-field-textual {
	min-height: var(--mfn-cel); padding: var(--mfn-o2) var(--mfn-o3); border: 2px solid var(--mfn-ramka-pola); border-radius: 0;
	background: var(--mfn-biel); color: var(--mfn-czern); font-size: var(--mfn-t-base); line-height: var(--mfn-lh-szeryf-m);
	transition: border-color var(--mfn-czas) var(--mfn-krzywa);
}
.elementor-widget-form.mfn-formularz .elementor-field-textual::placeholder { color: var(--mfn-ramka-pola); opacity: 1; }
@media (hover: hover) { .elementor-widget-form.mfn-formularz .elementor-field-group .elementor-field-textual:hover { border-color: var(--mfn-czern); } }
.elementor-widget-form.mfn-formularz .elementor-field-group .elementor-field-textual:focus-visible { border-color: var(--mfn-czern); outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
.elementor-widget-form.mfn-formularz .elementor-field-group .elementor-field-option { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--mfn-o3); align-items: start; }
.elementor-widget-form.mfn-formularz .elementor-field-group .elementor-field-option input {
	appearance: none; width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; display: grid; place-content: center;
	border: 2px solid var(--mfn-ramka-pola); border-radius: 0; background: var(--mfn-biel);
	transition: border-color var(--mfn-czas) var(--mfn-krzywa), background-color var(--mfn-czas) var(--mfn-krzywa);
}
.elementor-widget-form.mfn-formularz .elementor-field-option input[type="radio"] { border-radius: 50%; }
@media (hover: hover) { .elementor-widget-form.mfn-formularz .elementor-field-option input:hover { border-color: var(--mfn-czern); } }
.elementor-widget-form.mfn-formularz .elementor-field-option input:checked { border-color: var(--mfn-niebieski-ciemny); }
.elementor-widget-form.mfn-formularz .elementor-field-option input[type="checkbox"]:checked { background: var(--mfn-niebieski-ciemny); }
.elementor-widget-form.mfn-formularz .elementor-field-option input[type="checkbox"]:checked::before {
	content: ""; width: 0.75rem; height: 0.4rem; margin-block-start: -0.15rem;
	border-inline-start: 2px solid var(--mfn-biel); border-block-end: 2px solid var(--mfn-biel); transform: rotate(-45deg);
}
.elementor-widget-form.mfn-formularz .elementor-field-option input[type="radio"]:checked::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--mfn-niebieski-ciemny); }
.elementor-widget-form.mfn-formularz .elementor-field-option input:focus-visible { outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
@media (forced-colors: active) {
	.elementor-widget-form.mfn-formularz .elementor-field-option input { appearance: auto; }
	.elementor-widget-form.mfn-formularz .elementor-field-option input::before { content: none; }
}
.elementor-widget-form.mfn-formularz .elementor-field-group.elementor-error .elementor-field-textual { border-color: var(--mfn-blad); }
.elementor-widget-form.mfn-formularz .elementor-message { font-size: var(--mfn-t-s); font-weight: 500; }
.elementor-widget-form.mfn-formularz .elementor-message-danger,
.elementor-widget-form.mfn-formularz .elementor-error .elementor-message { color: var(--mfn-blad); }
.elementor-widget-form.mfn-formularz .elementor-message-success { padding: var(--mfn-o5); border-block: 1px solid var(--mfn-czern); background: var(--mfn-jasny); color: var(--mfn-czern); }
/* Przyciski kroków i wysyłki jak .mfn-btn: wysyłka i „Dalej” główne (niebieskie), „Wstecz” obrysem */
.elementor-widget-form.mfn-formularz :is(.elementor-button, .e-form__buttons__wrapper__button) {
	min-height: var(--mfn-cel); padding: var(--mfn-o2) var(--mfn-o5); border: 2px solid var(--mfn-btn-tlo); border-radius: 0;
	background: var(--mfn-btn-tlo); color: var(--mfn-btn-tekst); font-family: var(--mfn-font); font-weight: 500; font-size: var(--mfn-t-s); line-height: var(--mfn-lh-m);
	transition: background-color var(--mfn-czas) var(--mfn-krzywa), border-color var(--mfn-czas) var(--mfn-krzywa), translate var(--mfn-czas) var(--mfn-krzywa);
}
.elementor-widget-form.mfn-formularz .e-form__buttons__wrapper__button-previous { background: transparent; border-color: var(--mfn-czern); color: var(--mfn-czern); }
@media (hover: hover) {
	.elementor-widget-form.mfn-formularz :is(.elementor-button, .e-form__buttons__wrapper__button-next):hover { background: var(--mfn-btn-hover); border-color: var(--mfn-btn-hover); }
	.elementor-widget-form.mfn-formularz .e-form__buttons__wrapper__button-previous:hover { background: var(--mfn-tint); }
}
.elementor-widget-form.mfn-formularz :is(.elementor-button, .e-form__buttons__wrapper__button):active { translate: 0 1px; }
.elementor-widget-form.mfn-formularz :is(.elementor-button, .e-form__buttons__wrapper__button):focus-visible { outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
.elementor-widget-form.mfn-formularz .elementor-button:disabled { opacity: 0.45; cursor: not-allowed; }
/* Wskaźnik kroków Elementora jak pasek postępu w makiecie: odcinki 4 px, bieżący i zrobione w ciemnym niebieskim */
.elementor-widget-form.mfn-formularz .e-form__indicators { margin-block-end: var(--mfn-o5); gap: var(--mfn-o1); }
.elementor-widget-form.mfn-formularz .e-form__indicators__indicator { font-size: var(--mfn-t-xs); color: var(--mfn-tekst-2); }
.elementor-widget-form.mfn-formularz :is(.e-form__indicators__indicator--state-active, .e-form__indicators__indicator--state-completed) { color: var(--mfn-niebieski-ciemny); }
.elementor-widget-form.mfn-formularz .e-form__indicators__indicator__progress { height: 4px; border-radius: 0; background: var(--mfn-linia-jasna); }
.elementor-widget-form.mfn-formularz .e-form__indicators__indicator__progress__meter { height: 4px; border-radius: 0; background: var(--mfn-niebieski-ciemny); color: transparent; }
/* Lista błędów, grupy zgód (mfn.js) i pola HTML z tytułem kroku lub podpowiedzią: pełny wiersz w siatce pól Elementora */
.elementor-widget-form.mfn-formularz :is(.mfn-formularz__bledy, .mfn-grupa-pol) { flex-basis: 100%; width: 100%; margin-block-end: var(--mfn-o6); }
.elementor-widget-form.mfn-formularz .mfn-grupa-pol > .elementor-field-group:last-child { margin-block-end: 0; }
.elementor-widget-form.mfn-formularz .mfn-grupa-pol__tytul { font-weight: 500; }
.elementor-widget-form.mfn-formularz .elementor-field-type-html:has([data-mfn-opis]) { margin-block-end: var(--mfn-o2); }

/* ---------- Aktualności: „MFN: Nagłówek sekcji” + widget Posts z Elementora Pro (Classic, 1 kolumna, bez obrazka, data, zajawka).
   Wpis jak wiersz dokumentu: data po lewej, tytuł i zajawka, strzałka po prawej, cały wiersz klikalny, jasne tło na hover.
   Bez wpisów sekcja się chowa (poza edytorem Elementora). ⚠️ Klasy Posts do sprawdzenia na Elementorze Pro 4.2.4. ---------- */

body:not(.elementor-editor-active) .mfn.mfn-aktualnosci:not(:has(.elementor-post)) { display: none; }
.mfn.mfn-aktualnosci .elementor-posts-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; --grid-column-gap: 0; --grid-row-gap: 0; border-block-end: 1px solid var(--mfn-czern); }
.mfn.mfn-aktualnosci .elementor-post__thumbnail__link, .mfn.mfn-aktualnosci .elementor-post__read-more { display: none; }
.mfn.mfn-aktualnosci .elementor-post {
	--mfn-wylew: 0.75rem; position: relative; border-block-start: 1px solid var(--mfn-czern);
	transition: background-color var(--mfn-czas) var(--mfn-krzywa), box-shadow var(--mfn-czas) var(--mfn-krzywa);
}
.mfn.mfn-aktualnosci .elementor-post__text {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "data strzalka" "tytul strzalka" "opis strzalka";
	column-gap: var(--mfn-o5); row-gap: var(--mfn-o2); padding-block: var(--mfn-o4); align-items: baseline;
}
@media (min-width: 48rem) {
	.mfn.mfn-aktualnosci .elementor-post__text { grid-template-columns: 11rem minmax(0, 1fr) auto; grid-template-areas: "data tytul strzalka" "data opis strzalka"; }
}
.mfn.mfn-aktualnosci .elementor-post__meta-data { grid-area: data; font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); font-variant-numeric: tabular-nums; }
.mfn.mfn-aktualnosci .elementor-post__title { grid-area: tytul; margin: 0; font-size: var(--mfn-t-m); font-weight: 500; line-height: var(--mfn-lh-m); letter-spacing: var(--mfn-ls-m); }
.mfn.mfn-aktualnosci .elementor-post__title a { color: var(--mfn-czern); text-decoration: none; transition: color var(--mfn-czas) var(--mfn-krzywa); }
@media (hover: hover) { .mfn.mfn-aktualnosci .elementor-post:hover .elementor-post__text::after { color: var(--mfn-niebieski-ciemny); } }
/* Cały wiersz klikalny: link tytułu rozciągnięty na wpis */
.mfn.mfn-aktualnosci .elementor-post__title a::after { content: ""; position: absolute; inset: 0; }
.mfn.mfn-aktualnosci .elementor-post__excerpt { grid-area: opis; }
.mfn.mfn-aktualnosci .elementor-post__excerpt p { margin: 0; font-size: var(--mfn-t-s); color: var(--mfn-tekst-2); max-width: var(--mfn-miara); }
.mfn.mfn-aktualnosci .elementor-post__text::after { content: "→" / ""; grid-area: strzalka; align-self: center; font-size: var(--mfn-ikona-m); line-height: 1; transition: transform var(--mfn-czas) var(--mfn-krzywa); }
@media (hover: hover) {
	.mfn.mfn-aktualnosci .elementor-post:hover { background: var(--mfn-jasny); box-shadow: calc(-1 * var(--mfn-wylew)) 0 0 var(--mfn-jasny), var(--mfn-wylew) 0 0 var(--mfn-jasny); }
	.mfn.mfn-aktualnosci .elementor-post:hover .elementor-post__title a { color: var(--mfn-niebieski-ciemny); } /* jak wiersz pytania: kolor zamiast podkreślenia */
	.mfn.mfn-aktualnosci .elementor-post:hover .elementor-post__text::after { transform: translateX(var(--mfn-o1)); }
}
.mfn.mfn-aktualnosci .elementor-post:has(a:focus-visible) { outline: 3px solid var(--mfn-fokus); outline-offset: 2px; }
.mfn.mfn-aktualnosci .elementor-post__title a:focus-visible { outline: none; }

/* ---------- Stopka ---------- */

/* Czarna (KV: czerń w palecie podstawowej; ciemny niebieski sprawdzony i odrzucony 15 X). Biel 21:1, #B6CDFF 13,2:1 */
.mfn.mfn-stopka { background: var(--mfn-czern); color: var(--mfn-biel); padding-block: var(--mfn-o8) var(--mfn-o6); font-size: var(--mfn-t-s); }
/* Trzy kolumny jak siatka redakcyjna (4/4/4): Muzeum, program z kontaktem, linki. Etykiety wersalikami nad kolumnami. */
.mfn .mfn-stopka__siatka { display: grid; gap: var(--mfn-o6); } /* telefon 32, od 48rem kolumny */
@media (min-width: 48rem) { .mfn .mfn-stopka__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--mfn-o6); align-items: start; } }
.mfn .mfn-stopka__muzeum, .mfn .mfn-stopka__program, .mfn .mfn-stopka__nav { display: grid; gap: var(--mfn-o4); align-content: start; }
/* Etykieta przy swoich linkach: 4 + wewnętrzny odstęp celu 44 px ≈ 12 do tekstu, między linkami 16 */
.mfn .mfn-stopka__program, .mfn .mfn-stopka__nav { gap: var(--mfn-o1); }
.mfn.mfn-stopka :is(.mfn-etykieta, .mfn-nota__tytul) { color: #b6cdff; } /* jasny niebieski z księgi (s. 34): 13,2:1 na czarnym */
.mfn.mfn-stopka p + p { margin-block-start: 0; }
/* Nota FAMI na czarnym: drobny druk w bieli, linia oddziela ją od kolumn */
.mfn.mfn-stopka .mfn-nota { margin-block-start: var(--mfn-o6); border-block-start-color: rgb(255 255 255 / 0.3); }
@media (min-width: 48rem) { .mfn.mfn-stopka .mfn-nota { margin-block-start: var(--mfn-o7); } }
.mfn .mfn-stopka__prawa { margin-block-start: var(--mfn-o6); padding-block-start: var(--mfn-o4); border-block-start: 1px solid rgb(255 255 255 / 0.3); font-size: var(--mfn-t-xs); color: #b6cdff; max-width: none; }
.mfn.mfn-stopka .mfn-nota__tresc p { color: var(--mfn-biel); }
.mfn.mfn-stopka .mfn-nota__tresc p + p { margin-block-start: var(--mfn-o4); }
@media (min-width: 48rem) {
	/* Ta sama siatka co kolumny stopki: tytuł w pierwszej, tekst w drugiej i trzeciej */
	.mfn.mfn-stopka .mfn-nota { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--mfn-o6); }
	.mfn.mfn-stopka .mfn-nota__tresc { grid-column: 2 / -1; columns: 2; column-gap: var(--mfn-o6); }
}
.mfn .mfn-stopka__linki { display: grid; }
/* Podkreślone zawsze (jak .mfn-link): ten sam kolor co adres obok, bez podkreślenia link nie różni się od tekstu (WCAG 1.4.1). Hover 1 → 2 px. */
.mfn .mfn-stopka__linki a {
	display: inline-flex; align-items: center; min-height: var(--mfn-cel); padding-block: var(--mfn-o2); color: var(--mfn-biel); /* padding: link w 2 wierszach (tablet) stoi tak samo daleko od etykiety jak w 1 */
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
}
@media (hover: hover) { .mfn .mfn-stopka__linki a:hover { text-decoration-thickness: 2px; } }

/* ---------- Regulamin (podgląd) ---------- */

.mfn .mfn-regulamin { display: grid; gap: var(--mfn-o3); }
.mfn .mfn-regulamin h2 { font-size: var(--mfn-t-m); font-weight: 500; line-height: var(--mfn-lh-m); margin-block-start: var(--mfn-o5); }
.mfn .mfn-regulamin .mfn-reg__tytul { font-size: var(--mfn-t-m); }

/* ---------- Tryb wysokiego kontrastu i druk ---------- */

@media (forced-colors: active) {
	.mfn .mfn-btn, .mfn .mfn-kafel, .mfn .mfn-korzysc, .mfn .mfn-wynagrodzenie, .mfn .mfn-osoba__foto, .mfn .mfn-zgloszenie__po { border: 2px solid CanvasText; }
	.mfn .mfn-warunki li::before { background: CanvasText; }
	.mfn .mfn-akordeon__poz summary::after { background: none; content: "+"; }
	.mfn .mfn-akordeon__poz[open] summary::after { content: "−"; }
}

@media print {
	.mfn.mfn-naglowek .mfn-nav, .mfn .mfn-btn, .mfn.mfn-formularz, .mfn .mfn-flaga, .mfn .mfn-hero__foto { display: none; }
	.mfn.mfn-hero, .mfn.mfn-zgloszenie, .mfn .mfn-pas, .mfn .mfn-wynagrodzenie, .mfn .mfn-krok { background: none; color: #000; }
	.mfn .mfn-hero__tytul { color: #000; }
	.mfn .mfn-redakcja__naglowek, .mfn .mfn-zgloszenie__naglowek { position: static; }
	.mfn details > *:not(summary) { display: block; }
}