/*
 * Nowy front MathByPanFran.
 *
 * Wartości oznaczone [Figma] pochodzą wprost z makiety (panel Inspect).
 * Reszta to decyzje projektowe po naszej stronie — makieta ma wyłącznie
 * szerokość desktopową 1702 px, więc zachowanie na tablecie i telefonie
 * projektujemy sami.
 */

/* ---------------------------------------------------------------- tokeny */

.mbpf {
	/* [Figma] paleta */
	--mbpf-green: #3b5d56;
	--mbpf-mint: #7bbfb0;
	--mbpf-muted: #5a7a74;
	--mbpf-ink: #1a1a1a;
	--mbpf-gold: #fbbc05;
	--mbpf-white: #fff;

	/* [Figma] jasna mięta z kafelków sekcji „Dlaczego warto” */
	--mbpf-mint-soft: #c0e4d0;
	/* [Figma] akcent koralowy z kafelków klas */
	--mbpf-coral: #ffb4a6;
	/* Ciepły akcent dostępu na 30 dni — koral jest za jasny na tekst (kontrast 1.9:1). */
	--mbpf-warm: #cf4d20;
	--mbpf-warm-soft: rgba(207, 77, 32, .1);
	--mbpf-card-line: rgba(192, 228, 208, .5);
	--mbpf-section-bg: #f9fdfb;
	/* Prawie białe tło sekcji otwierającej z makiety z 24 sierpnia. */
	--mbpf-hero-bg: #fbfaf9;

	--mbpf-green-10: rgba(59, 93, 86, .1);
	--mbpf-green-06: rgba(59, 93, 86, .06);
	--mbpf-line: rgba(59, 93, 86, .14);

	/* [Figma] kontener 1152 px, padding 40/32 — świadomie poszerzony,
	   bo doszła trzecia kolumna hero i całość ma być większa niż w makiecie. */
	--mbpf-container: 1320px;
	--mbpf-gutter: 32px;
	--mbpf-section-y: 56px;

	/* [Figma] pasek miał 69 px; powiększony na życzenie. */
	--mbpf-header-h: 88px;

	/*
	 * Wysokość paska administratora w jednym miejscu. Zależą od niej pozycja
	 * przyklejonego paska i wysokość szuflady menu, a wartość zmienia się z szerokością
	 * ekranu (32 → 46 px) i po premierze zniknie razem z paskiem.
	 */
	--mbpf-adminbar: 0px;

	--mbpf-radius: 12px;
	--mbpf-radius-lg: 20px;
	--mbpf-shadow: 0 12px 32px rgba(26, 26, 26, .08);

	margin: 0;
	background: var(--mbpf-white);
	color: var(--mbpf-ink);
	font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

.mbpf img {
	max-width: 100%;
	height: auto;
}

/* Własny `display` na elemencie listy przebija domyślne działanie atrybutu `hidden`,
   a filtry katalogu opierają się właśnie na nim. */
.mbpf [hidden] {
	display: none !important;
}

/* Zabezpieczenie na znaczniki WooCommerce, które chowają opisy tą klasą —
   bez arkusza sklepu stałyby się widocznym tekstem. */
.mbpf .screen-reader-text,
.mbpf-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mbpf-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .75rem 1rem;
	background: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-skip:focus {
	left: 0;
}

/* Odnośniki z kotwicą muszą zatrzymać się pod przyklejonym paskiem, nie za nim. */
.mbpf [id] {
	scroll-margin-top: calc(var(--mbpf-header-h) + var(--mbpf-adminbar) + 1rem);
}

.mbpf-container {
	width: 100%;
	max-width: var(--mbpf-container);
	margin-inline: auto;
	padding-inline: var(--mbpf-gutter);
}

/* --------------------------------------------------------------- przyciski */

.mbpf a.mbpf-btn,
.mbpf button.mbpf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9375rem 1.75rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

/*
 * Motyw nadaje globalne tło elementom <button>, więc reset musi być zawężony
 * do naszych klas — szeroki reset psuł już przycisk Tutora „Oznacz jako ukończone”.
 * Wyjątek na `.mbpf-btn` jest konieczny: bez niego reset zdejmowałby tło także
 * przyciskom w formularzach, bo ma tę samą wagę co reguły wariantów.
 *
 * Całość siedzi w `:where()`, więc reset waży tyle co samo `.mbpf` (0,1,0).
 * Bez tego selektor miał wagę (0,3,1) i bił reguły komponentów pisane klasą —
 * po cichu zdejmował tło pigułkom quizu, filtrom katalogu i przyciskowi
 * odtwarzania. Teraz reset kasuje tylko tło od motywu, a każdy komponent
 * ze swoim tłem wygrywa naturalnie.
 */
.mbpf :where(button[class*="mbpf-"]:not(.mbpf-btn)) {
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

.mbpf button.mbpf-btn {
	-webkit-appearance: none;
	appearance: none;
}

.mbpf a.mbpf-btn--primary,
.mbpf button.mbpf-btn--primary {
	background: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf a.mbpf-btn--primary:hover,
.mbpf a.mbpf-btn--primary:focus-visible,
.mbpf button.mbpf-btn--primary:hover,
.mbpf button.mbpf-btn--primary:focus-visible {
	background: #2f4a45;
	color: var(--mbpf-white);
}

/*
 * Wariant ciepły — wyłącznie dla dostępu na 30 dni. Kolor niesie tu znaczenie:
 * zielony to „zostaje u Ciebie na zawsze”, ciepły to „na chwilę”. Oba znaczniki
 * (<a> i <button>) muszą być wymienione, bo reset tła przycisków ma tę samą wagę.
 */
.mbpf a.mbpf-btn--warm,
.mbpf button.mbpf-btn--warm {
	background: var(--mbpf-warm);
	color: var(--mbpf-white);
}

.mbpf a.mbpf-btn--warm:hover,
.mbpf a.mbpf-btn--warm:focus-visible,
.mbpf button.mbpf-btn--warm:hover,
.mbpf button.mbpf-btn--warm:focus-visible {
	background: #b03f18;
	color: var(--mbpf-white);
}

/*
 * „Panel kursanta” to też wezwanie do działania, ale prowadzi do konta, a nie do zakupu,
 * więc różni się od „Kup dostęp” wypełnieniem: obrys zamiast pełnej zieleni.
 */
.mbpf a.mbpf-btn--outline,
.mbpf button.mbpf-btn--outline {
	background: transparent;
	color: var(--mbpf-green);
	border-color: var(--mbpf-green);
	border-width: 1.5px;
}

.mbpf a.mbpf-btn--outline:hover,
.mbpf a.mbpf-btn--outline:focus-visible,
.mbpf button.mbpf-btn--outline:hover,
.mbpf button.mbpf-btn--outline:focus-visible {
	background: var(--mbpf-green-06);
	color: var(--mbpf-green);
}

.mbpf-btn__icon {
	flex: none;
	margin-right: -.125rem;
}

/* Koralowy przycisk z końcowego wezwania — jedyne miejsce, gdzie akcent
   przejmuje rolę głównego działania. */
.mbpf a.mbpf-btn--accent,
.mbpf button.mbpf-btn--accent {
	background: var(--mbpf-coral);
	color: var(--mbpf-green);
	border-color: transparent;
}

.mbpf a.mbpf-btn--accent:hover,
.mbpf a.mbpf-btn--accent:focus-visible,
.mbpf button.mbpf-btn--accent:hover,
.mbpf button.mbpf-btn--accent:focus-visible {
	background: #ffc7bc;
	color: var(--mbpf-green);
}

/* Trzeci poziom ważności na ciemnym tle: bez wypełnienia i bez obrysu. */
.mbpf a.mbpf-btn--quiet,
.mbpf button.mbpf-btn--quiet {
	background: transparent;
	border-color: transparent;
	color: rgba(255, 255, 255, .85);
}

.mbpf a.mbpf-btn--quiet:hover,
.mbpf a.mbpf-btn--quiet:focus-visible,
.mbpf button.mbpf-btn--quiet:hover,
.mbpf button.mbpf-btn--quiet:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: var(--mbpf-white);
}

/* Przycisk na ciemnym tle sekcji — obrys i napis w bieli. */
.mbpf a.mbpf-btn--onlight,
.mbpf button.mbpf-btn--onlight {
	background: transparent;
	color: var(--mbpf-white);
	border-color: rgba(255, 255, 255, .45);
}

.mbpf a.mbpf-btn--onlight:hover,
.mbpf a.mbpf-btn--onlight:focus-visible,
.mbpf button.mbpf-btn--onlight:hover,
.mbpf button.mbpf-btn--onlight:focus-visible {
	background: var(--mbpf-white);
	color: var(--mbpf-green);
	border-color: var(--mbpf-white);
}

.mbpf a.mbpf-btn--ghost,
.mbpf button.mbpf-btn--ghost {
	background: var(--mbpf-white);
	color: var(--mbpf-ink);
	border-color: var(--mbpf-line);
}

.mbpf a.mbpf-btn--ghost:hover,
.mbpf a.mbpf-btn--ghost:focus-visible,
.mbpf button.mbpf-btn--ghost:hover,
.mbpf button.mbpf-btn--ghost:focus-visible {
	background: var(--mbpf-green-06);
	color: var(--mbpf-green);
	border-color: var(--mbpf-green);
}

.mbpf-btn--sm {
	padding: .6875rem 1.375rem;
	font-size: .9375rem;
}

.mbpf-btn__arrow {
	transition: transform .18s ease;
}

.mbpf a.mbpf-btn:hover .mbpf-btn__arrow {
	transform: translateX(3px);
}

.mbpf-btn__play {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	position: relative;
	flex: none;
}

.mbpf-btn__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .25rem 0 .25rem .375rem;
	border-color: transparent transparent transparent currentColor;
}

/* ----------------------------------------------------------------- header */

.mbpf-header {
	position: fixed;
	top: var(--mbpf-adminbar);
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--mbpf-header-h);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.mbpf-header.is-stuck {
	border-bottom-color: var(--mbpf-line);
	box-shadow: 0 6px 24px rgba(26, 26, 26, .06);
}

.mbpf-header__spacer {
	height: var(--mbpf-header-h);
}

.mbpf-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
	max-width: 1560px;
}

.mbpf a.mbpf-brand {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	text-decoration: none;
	color: var(--mbpf-ink);
	line-height: 1;
}

.mbpf-brand__mark {
	width: 2.875rem;
	height: 2.875rem;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.mbpf-brand__mark--empty {
	background: var(--mbpf-green);
}

.mbpf-brand__name {
	font-weight: 700;
	font-size: 1.1875rem;
	letter-spacing: -.01em;
}

.mbpf-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: 1.5rem;
}

.mbpf-nav__list {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Elementor nadpisuje kolor każdego linku przy najechaniu regułą
   `.elementor-kit-7 a:hover` o wadze (0,2,1). Na tej stronie arkusz kitu jest
   wyrejestrowany, ale zapis `.mbpf a.klasa:hover` (0,3,1) zostaje jako zabezpieczenie
   na wypadek, gdyby ktoś kiedyś przywrócił style Elementora. */
.mbpf a.mbpf-nav__link {
	color: var(--mbpf-ink);
	text-decoration: none;
	font-size: 1.0625rem;
	font-weight: 500;
	white-space: nowrap;
}

.mbpf a.mbpf-nav__link:hover,
.mbpf a.mbpf-nav__link:focus-visible {
	color: var(--mbpf-green);
}

.mbpf-nav__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: none;
}

/*
 * Koszyk stoi w samym pasku, a nie w szufladzie menu — na telefonie w szufladzie
 * byłby schowany pod burgerem, czyli dokładnie tam, gdzie nikt go nie szuka.
 * Kolejność ustawiamy jawnie, bo znacznik ma go przed przyciskiem menu.
 */
.mbpf-brand {
	order: 1;
}

.mbpf-nav {
	order: 2;
}

/* Otoczka pigułki: to ona jest układem odniesienia dla rozwijanego podglądu. */
.mbpf-cart-wrap {
	order: 3;
	position: relative;
}

.mbpf a.mbpf-cart {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .5rem .75rem;
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
	color: var(--mbpf-green);
	text-decoration: none;
	line-height: 1;
	transition: border-color .18s ease, background-color .18s ease;
}

.mbpf a.mbpf-cart:hover,
.mbpf a.mbpf-cart:focus-visible {
	border-color: var(--mbpf-green);
	background: var(--mbpf-green-06);
}

.mbpf-cart__ico {
	display: flex;
	line-height: 0;
}

.mbpf-cart__count {
	font-size: .9375rem;
	font-weight: 800;
}

/*
 * Podgląd koszyka. Rozwija się po najechaniu i po dojściu klawiaturą (`focus-within`),
 * bo samo `:hover` zostawiłoby go poza zasięgiem osób bez myszy. Domyślnie jest
 * niewidoczny, ale nie `display: none` — dzięki temu przejście jest płynne.
 */
.mbpf-cart__panel {
	position: absolute;
	top: calc(100% + .625rem);
	right: 0;
	z-index: 20;
	width: 20rem;
	max-width: calc(100vw - 2 * var(--mbpf-gutter));
	padding: 1rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
	box-shadow: 0 18px 40px rgba(26, 26, 26, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.375rem);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.mbpf-cart-wrap:hover .mbpf-cart__panel,
.mbpf-cart-wrap:focus-within .mbpf-cart__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Niewidzialny mostek między pigułką a panelem — inaczej podgląd znika w przerwie. */
.mbpf-cart__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -.625rem;
	height: .625rem;
}

.mbpf-cart__title {
	margin: 0 0 .625rem;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf .mbpf-cart__list {
	display: grid;
	gap: .625rem;
	margin: 0 0 .875rem;
	padding: 0;
	list-style: none;
	max-height: 17rem;
	overflow-y: auto;
}

.mbpf .mbpf-cart__list li {
	margin: 0;
	list-style: none;
}

.mbpf .mbpf-cart__list a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .625rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.mbpf-cart__thumb {
	display: block;
	width: 2.75rem;
	border-radius: 8px;
	overflow: hidden;
	background: var(--mbpf-green-06);
	line-height: 0;
}

.mbpf .mbpf-cart__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.mbpf-cart__body {
	display: grid;
	gap: .125rem;
}

.mbpf-cart__name {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-cart__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-cart__plan {
	padding: .0625rem .375rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7a3524;
}

.mbpf .mbpf-cart__go {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.mbpf-burger {
	order: 4;
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-radius);
	padding: 0;
	align-items: center;
	justify-content: center;
	color: var(--mbpf-ink);
}

.mbpf-burger__bars,
.mbpf-burger__bars::before,
.mbpf-burger__bars::after {
	display: block;
	width: 1.125rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}

.mbpf-burger__bars::before,
.mbpf-burger__bars::after {
	content: "";
	position: relative;
}

.mbpf-burger__bars::before {
	top: -6px;
}

.mbpf-burger__bars::after {
	top: 4px;
}

.mbpf-burger[aria-expanded="true"] .mbpf-burger__bars {
	background: transparent;
}

.mbpf-burger[aria-expanded="true"] .mbpf-burger__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.mbpf-burger[aria-expanded="true"] .mbpf-burger__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Pasek administratora przesuwa przyklejony header — nowy front i tak widzi tylko admin. */
.mbpf.admin-bar {
	--mbpf-adminbar: 32px;
}

/* ------------------------------------------------------------------- hero */

/* Dolnego paddingu nie ma celowo — zdjęcie Franka ma stykać się z krawędzią sekcji. */
.mbpf-hero {
	padding-block: 3.5rem 0;
	background: var(--mbpf-hero-bg);
	overflow: hidden;
}

.mbpf-hero__inner {
	display: grid;
	/* Kolumna tekstu musi utrzymać „Matematyka w końcu” w jednym wierszu przy H1
	   dochodzącym do 50 px — stąd 580 px, a nie połowa kontenera. */
	grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
	align-items: stretch;
	gap: 3rem;
	min-height: 560px;
}

.mbpf-hero__body {
	align-self: center;
	padding-bottom: 3.5rem;
}

.mbpf-badge {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	margin: 0 0 1.5rem;
	padding: .375rem .875rem .375rem .5rem;
	border-radius: 999px;
	background: var(--mbpf-green-06);
	font-size: .875rem;
	color: var(--mbpf-muted);
	line-height: 1;
}

.mbpf-badge__avatars {
	display: inline-flex;
}

.mbpf-badge__avatar {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 2px solid var(--mbpf-white);
	margin-left: -.625rem;
	flex: none;
	object-fit: cover;
	background: var(--mbpf-green-10);
}

.mbpf-badge__avatar:first-child {
	margin-left: 0;
}

/* Wariant zastępczy — inicjały, gdy nie ma ani jednego zdjęcia z opinii Google. */
.mbpf-badge__avatar--letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .6875rem;
	font-weight: 700;
	color: var(--mbpf-white);
	line-height: 1;
}

.mbpf-badge__avatar--a { background: #e88b7d; }
.mbpf-badge__avatar--b { background: #7bbfb0; }
.mbpf-badge__avatar--c { background: #f0b95f; }
.mbpf-badge__avatar--d { background: #8fa9d6; }

/* Cyfry o równej szerokości — bez tego liczba drga w trakcie odliczania. */
.mbpf-count {
	font-variant-numeric: tabular-nums;
}

/*
 * W plakietce po liczbie idzie jeszcze tekst, więc rosnąca liczba przesuwałaby
 * słowo „uczniów”. Stała szerokość dotyczy tylko tego miejsca; w statystykach
 * podpis jest pod spodem i rezerwowanie miejsca zostawiałoby dziurę.
 */
.mbpf-badge .mbpf-count {
	display: inline-block;
	min-width: 3ch;
	text-align: right;
}

.mbpf-badge__text strong {
	color: var(--mbpf-ink);
	font-weight: 700;
}

.mbpf-hero__title {
	margin: 0 0 1.25rem;
	/*
	 * W makiecie przy oknie 1320 px nagłówek ma 48 px, ale na życzenie idzie wyżej —
	 * do 56 px na szerokim ekranie. Dolna granica zostaje na 32 px: przy 34 px
	 * „Matematyka w końcu” nie mieści się już w kolumnie telefonu i łamie się na dwa wiersze.
	 */
	font-size: clamp(2rem, 1.05rem + 2.7vw, 3.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
	color: var(--mbpf-ink);
}

.mbpf-hero__line {
	display: block;
}

.mbpf-hero__accent {
	color: var(--mbpf-green);
}

.mbpf-hero__lead {
	margin: 0 0 2rem;
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.55;
	color: rgba(26, 26, 26, .74);
}

/* Dwa zdania z makiety stoją w osobnych wierszach, ale na wąskim ekranie mają się
   zawijać same — dlatego bloki, a nie <br>. */
.mbpf-hero__lead-line {
	display: block;
}

.mbpf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 2.5rem;
}

/*
 * Przyciski hero mają w makiecie łagodny prostokąt, a nie pigułkę jak w reszcie
 * serwisu. Waga selektora (0,3,1) jest konieczna: reguła bazowa `.mbpf a.mbpf-btn`
 * ma (0,2,1) i przy samej klasie wygrałaby zaokrągleniem 999 px.
 */
.mbpf .mbpf-hero__actions a.mbpf-btn {
	padding: 1rem 1.625rem;
	border-radius: var(--mbpf-radius);
	font-size: 1rem;
	font-weight: 700;
}

.mbpf .mbpf-hero__actions a.mbpf-btn--ghost {
	border-color: rgba(26, 26, 26, .12);
}

/* Cztery liczby mają zmieścić się w jednym wierszu tak jak w makiecie, dlatego
   odstęp i podpisy są ciasne — przy 2.25rem i 14 px czwarta spadała do drugiego rzędu. */
.mbpf-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.75rem;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(26, 26, 26, .09);
}

.mbpf-hero__stat-value {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mbpf-ink);
}

/* line-height: 0 na otoczce ikony — inaczej jej pole wiersza podnosi całą liczbę. */
.mbpf-hero__stat-icon {
	display: flex;
	line-height: 0;
	color: rgba(26, 26, 26, .5);
}

.mbpf-hero__star {
	margin-left: -.125rem;
	font-size: .8125rem;
	color: var(--mbpf-green);
}

.mbpf-hero__stat-label {
	margin: .125rem 0 0;
	font-size: .8125rem;
	color: rgba(26, 26, 26, .58);
}

.mbpf-hero__figure {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

/*
 * Zdjęcie jest wycięte razem z miętową plamą i odręcznymi wzorami, więc nie ma pod
 * nim żadnej podkładki ani cienia — dochodzi wprost do krawędzi sekcji.
 * Waga (0,2,0) jest konieczna, bo globalne `.mbpf img { max-width: 100% }` ma (0,1,1)
 * i samo `.mbpf-hero__photo` nie ustawiłoby górnego ograniczenia szerokości.
 */
.mbpf .mbpf-hero__photo {
	display: block;
	width: 100%;
	max-width: 660px;
	height: auto;
}

/* -------------------------------------------- sekcja „Dlaczego warto” */

/* [Figma] tło #F9FDFB, padding 96px w pionie */
.mbpf-why {
	padding-block: 96px;
	background: var(--mbpf-section-bg);
}

/* [Figma] 14px / 600 / 20px / letter-spacing 1.4px / wersaliki */
.mbpf-eyebrow {
	margin: 0 0 .75rem;
	text-align: center;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4286;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

/* [Figma] 48px / 800 / 100%, gradient 135deg przycięty do tekstu */
.mbpf-section-title {
	margin: 0 0 .75rem;
	text-align: center;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	background: linear-gradient(135deg, var(--mbpf-green), var(--mbpf-mint), var(--mbpf-green));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mbpf-section-lead {
	max-width: 60ch;
	margin: 0 auto 2.5rem;
	text-align: center;
	color: var(--mbpf-muted);
}

/* W FAQ tytuł jest płaską zielenią, bez gradientu. */
.mbpf-section-title--plain {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--mbpf-green);
}

/* Sekcja „Co zyskujesz?” ma nagłówek w kolumnie obok zdjęcia, więc do lewej. */
.mbpf-eyebrow--start,
.mbpf-section-title--start,
.mbpf-section-lead--start {
	text-align: left;
}

.mbpf-section-lead--start {
	margin-inline: 0;
	margin-bottom: 1.75rem;
}

/* [Figma] kafelek 260 px, przerwa 16 — cztery kafelki wypełniają 1088 px treści */
.mbpf-figures,
.mbpf-features {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-figures {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 1rem;
}

.mbpf-features {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mbpf-figure,
.mbpf-feature {
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 16px;
	background: var(--mbpf-white);
}

.mbpf-figure {
	text-align: center;
}

.mbpf-figure--accent {
	background: var(--mbpf-green);
	border-color: transparent;
}

/* [Figma] 36px / 800 / 100% */
.mbpf-figure__value {
	display: block;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--mbpf-green);
}

.mbpf-figure--accent .mbpf-figure__value {
	color: var(--mbpf-mint-soft);
}

/* [Figma] 14px / 600 / 20px */
.mbpf-figure__label {
	display: block;
	margin-top: .5rem;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4286;
	color: var(--mbpf-muted);
}

.mbpf-figure--accent .mbpf-figure__label {
	color: rgba(192, 228, 208, .7);
}

/* Ikona wyśrodkowana w pionie względem kafelka, a nie przyklejona do jego góry. */
.mbpf-feature {
	display: flex;
	align-items: center;
	gap: .875rem;
}

.mbpf-feature__icon {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(192, 228, 208, .35);
	color: var(--mbpf-green);
}

.mbpf-feature__body {
	display: grid;
	gap: .125rem;
	min-width: 0;
}

/* [Figma] 16px / 700 / 24px */
.mbpf-feature__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--mbpf-green);
}

/* [Figma] 14px / 400 / 22.75px */
.mbpf-feature__text {
	font-size: .875rem;
	line-height: 1.625;
	color: var(--mbpf-muted);
}

.mbpf-why__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: 2.5rem 0 0;
}

/* ------------------------------------------ sekcja „Wybierz swoją klasę” */

/* [Figma] tło #3B5D56, padding 96 px w pionie */
.mbpf-classes-section {
	padding-block: 96px;
	background: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-classes-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 2rem;
}

.mbpf-eyebrow--light {
	text-align: left;
	color: rgba(192, 228, 208, .75);
}

.mbpf-section-title--light {
	text-align: left;
	margin-bottom: 0;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--mbpf-white);
}

.mbpf-classes-section__note {
	margin: 0;
	max-width: 34ch;
	text-align: right;
	font-size: .9375rem;
	color: rgba(192, 228, 208, .75);
}

.mbpf-classlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Powierzchnia kafelka to rozjaśnienie tła sekcji, a nie osobny kolor —
 * dzięki temu trzyma się zieleni niezależnie od tego, jak ją kiedyś przestroimy.
 */
/*
 * Kafelek to kontener z dwoma odnośnikami, bo odnośników nie wolno zagnieżdżać.
 * Cały kafelek pozostaje jednym wielkim celem dzięki rozciągniętemu pseudoelementowi
 * linku głównego; drugi link („pojedyncze działy”) leży nad nim i przechwytuje kliknięcie.
 */
.mbpf-classcard {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	height: 100%;
	padding: 1.25rem;
	border: 1px solid rgba(192, 228, 208, .18);
	border-radius: 16px;
	background: rgba(255, 255, 255, .06);
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.mbpf-classcard:hover,
.mbpf-classcard:focus-within {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(192, 228, 208, .4);
	transform: translateY(-2px);
}

.mbpf-classcard--featured {
	border-color: rgba(192, 228, 208, .55);
	background: rgba(255, 255, 255, .1);
}

/* Bez cyfry to miniatura jest punktem rozpoznania kafelka — stąd większy kadr. */
.mbpf-classcard__thumb {
	flex: none;
	width: 10.5rem;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}

.mbpf-classcard__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mbpf-classcard__body {
	display: grid;
	gap: .125rem;
	min-width: 0;
}

.mbpf-classcard__kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(192, 228, 208, .7);
}

.mbpf-classcard__badge {
	padding: .1875rem .5rem;
	border-radius: 999px;
	background: var(--mbpf-mint-soft);
	color: var(--mbpf-green);
	letter-spacing: .04em;
	font-size: .6875rem;
}

.mbpf-classcard__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Rozciągnięty cel — dzięki niemu klikalny jest cały kafelek, nie sam tytuł. */
.mbpf a.mbpf-classcard__main {
	color: var(--mbpf-white);
	text-decoration: none;
}

.mbpf a.mbpf-classcard__main::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mbpf a.mbpf-classcard__main:hover,
.mbpf a.mbpf-classcard__main:focus-visible {
	color: var(--mbpf-white);
	text-decoration: underline;
}

.mbpf-classcard__meta {
	font-size: .875rem;
	color: rgba(192, 228, 208, .75);
}

.mbpf-classcard__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .375rem;
	margin-top: .375rem;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mbpf-white);
}

/* WooCommerce wstawia przekreśloną cenę sprzed promocji — przygaszamy ją. */
.mbpf-classcard__price del {
	font-weight: 500;
	font-size: 1rem;
	opacity: .55;
}

.mbpf-classcard__price ins {
	text-decoration: none;
}

.mbpf-classcard__price-note {
	flex-basis: 100%;
	font-size: .8125rem;
	font-weight: 500;
	color: rgba(192, 228, 208, .7);
}

.mbpf-classcard__side {
	flex: none;
	margin-left: auto;
	display: grid;
	justify-items: end;
	gap: .375rem;
	text-align: right;
}

/* Etykieta z czasownikiem zamiast samej strzałki — ludzie skanują stronę
   w poszukiwaniu czynności, nie symboli. */
.mbpf-classcard__go {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .625rem 1rem;
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--mbpf-green);
	transition: transform .18s ease;
}

.mbpf-classcard--mint .mbpf-classcard__go {
	background: var(--mbpf-mint-soft);
}

.mbpf-classcard--coral .mbpf-classcard__go {
	background: var(--mbpf-coral);
}

.mbpf-classcard:hover .mbpf-classcard__go .mbpf-btn__arrow {
	transform: translateX(3px);
}

.mbpf a.mbpf-classcard__alt {
	position: relative;
	z-index: 1;
	font-size: .8125rem;
	color: rgba(192, 228, 208, .75);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mbpf a.mbpf-classcard__alt:hover,
.mbpf a.mbpf-classcard__alt:focus-visible {
	color: var(--mbpf-white);
}

.mbpf-classes-section__actions {
	display: flex;
	justify-content: center;
	margin: 2rem 0 0;
}

/* --------------------------------------- sekcja „Przekonaj się sam” */

/* [Figma] tło #F9FDFB, padding 96 px w pionie */
.mbpf-demo {
	padding-block: 96px;
	background: var(--mbpf-section-bg);
}

/*
 * Na karcie produktu sekcja stoi między banerem a programem — sekcje tej karty
 * mają rytm 3.5rem, więc pełne 96 px robiłoby dziurę na tle w tym samym kolorze.
 */
.mbpf-demo--product {
	padding-block: 3.5rem;
}

/*
 * Pasek klas nad kartą. Chipy to odnośniki (bez skryptu przeładowują stronę
 * z `?klasa=`), a komponent `.mbpf-chip` był dotąd opisany tylko dla `<button>` —
 * stąd bliźniacze reguły dla `<a>` zamiast poszerzania tamtych o drugi selektor.
 */
/*
 * Siatka lekcji pokazowych: sześć kafelków, po jednym na klasę, wszystkie widoczne
 * naraz. Trzy w rzędzie, nie sześć — przy sześciu na kartę zostaje ~200 px i plakat
 * przestaje cokolwiek pokazywać (to samo ustalenie co przy kaflach kreatora, 4750).
 */
.mbpf-demo__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.mbpf-demo__item {
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 16px;
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

.mbpf-demo__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(26, 26, 26, .1);
}

/* Nadtytuł kafelka: klasa i dział wersalikami, nad nazwą lekcji. */
.mbpf-demo__eyebrow {
	margin: 0;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-demo__body {
	display: grid;
	align-content: start;
	gap: .5rem;
	padding: 1rem 1.125rem 1.25rem;
}

.mbpf-demo__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-demo__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem .875rem;
	margin: 0;
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-demo__meta > span {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
}

.mbpf-demo__meta svg {
	display: block;
	color: var(--mbpf-mint);
}

.mbpf .mbpf-demo__cta {
	justify-self: start;
	margin-top: .375rem;
}

.mbpf a.mbpf-chip {
	/* Motyw podkreśla odnośniki w treści — pigułka ma wyglądać jak przycisk, nie jak link. */
	text-decoration: none;
	padding: .5rem 1rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	background: var(--mbpf-white);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mbpf-muted);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbpf a.mbpf-chip:hover,
.mbpf a.mbpf-chip:focus-visible {
	border-color: var(--mbpf-green);
	color: var(--mbpf-green);
}

.mbpf a.mbpf-chip.is-on,
.mbpf a.mbpf-chip.is-on:hover {
	background: var(--mbpf-green);
	border-color: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-demo__card {
	max-width: 1020px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 20px;
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
}

.mbpf-demo__player {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, rgba(192, 228, 208, .45), rgba(255, 180, 166, .3));
	overflow: hidden;
}

.mbpf-demo__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ramka wchodzi dopiero po kliknięciu i przykrywa plakat wraz z przyciskiem. */
.mbpf-demo__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 2;
}

.mbpf-demo__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(26, 26, 26, .12);
	transition: background-color .18s ease;
}

.mbpf-demo__player.is-playing .mbpf-demo__play,
.mbpf-demo__player.is-playing .mbpf-demo__poster {
	display: none;
}

.mbpf-demo__play:hover,
.mbpf-demo__play:focus-visible {
	background: rgba(26, 26, 26, .2);
}

.mbpf-demo__play-icon {
	position: relative;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: var(--mbpf-white);
	box-shadow: 0 10px 30px rgba(26, 26, 26, .25);
	transition: transform .18s ease;
}

.mbpf-demo__play:hover .mbpf-demo__play-icon,
.mbpf-demo__play:focus-visible .mbpf-demo__play-icon {
	transform: scale(1.06);
}

/* Trójkąt przesunięty o 8% w prawo — wyśrodkowany geometrycznie wygląda na przesunięty w lewo. */
.mbpf-demo__play-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .75rem 0 .75rem 1.25rem;
	border-color: transparent transparent transparent var(--mbpf-green);
}

/*
 * W kafelku własnego koła „play” nie rysujemy: każdy plakat lekcji ma je już wtopione
 * w grafikę (białe kółko przy dolnej krawędzi), a dwa przyciski odtwarzania na jednej
 * miniaturce wyglądają jak usterka. Sam przycisk zostaje — niewidoczny, na całym kadrze,
 * z podpisem dla czytnika i przyciemnieniem na najechanie.
 */
.mbpf-demo__item .mbpf-demo__play-icon {
	display: none;
}

/*
 * Pas „wejdź za darmo do panelu kursanta” pod siatką — ostatnie zdanie tej sekcji:
 * fragment obejrzany, całą platformę widać po odebraniu lekcji pokazowej za 0 zł.
 */
.mbpf-demopanel {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem 2rem;
	margin-top: 2rem;
	padding: 1.75rem 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: rgba(192, 228, 208, .22);
	text-align: left;
}

.mbpf-demopanel__ico {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--mbpf-white);
	color: var(--mbpf-green);
}

.mbpf-demopanel__kicker {
	margin: 0 0 .25rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--mbpf-muted);
}

.mbpf-demopanel__title {
	margin: 0 0 .625rem;
	font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--mbpf-ink);
}

.mbpf-demopanel__lead {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--mbpf-muted);
	max-width: 46ch;
}

.mbpf-demopanel__act {
	display: grid;
	justify-items: center;
	gap: .75rem;
}

.mbpf .mbpf-demopanel__cta {
	padding: 1rem 1.75rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.mbpf-demopanel__ticks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-demopanel__ticks li {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
}

.mbpf-demopanel__ticks svg {
	display: block;
	color: var(--mbpf-green);
}

.mbpf-demo__footer {
	display: grid;
	justify-items: center;
	gap: .25rem;
	padding: 2rem 1.5rem 2.25rem;
	text-align: center;
}

.mbpf-demo__question {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-demo__note {
	margin: 0 0 1rem;
	color: var(--mbpf-muted);
}

/* ---------------------------------------- sekcja „Co zyskujesz?” */

/* [Figma] białe tło, padding 80 px — ciaśniej niż sąsiednie sekcje (96 px) */
.mbpf-benefits {
	padding-block: 80px;
	background: var(--mbpf-white);
}

.mbpf-benefits__inner {
	display: grid;
	/* 4,5:7,5 zamiast 5:7 — przy 5:7 kolumna tekstu miała 700 px, a trzy przyciski
	   potrzebują 718 i trzeci spadał do osobnego wiersza. */
	grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
	align-items: center;
	gap: 3.5rem;
}

.mbpf-benefits__figure {
	line-height: 0;
}

/* Zdjęcie ma wtopiony łuk w tle, więc wystarczy zaokrąglić narożniki. */
.mbpf-benefits__photo {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.mbpf-benefits__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Trzy poziomy ważności: wypełniony „Zacznij teraz”, obrys przy darmowym dostępie
 * i najlżejszy wariant przy poznaniu Franka. Zawijanie jest konieczne — trzy przyciski
 * nie mieszczą się w kolumnie tekstu poniżej ok. 1100 px.
 */
.mbpf-benefits__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 2rem 0 0;
}

/* ------------------------------------- sekcja „Co mówią uczniowie?” */

/* [Figma] gradient 155deg przez cztery przystanki: mięta → biel → róż */
.mbpf-reviews {
	padding-block: 96px;
	background: linear-gradient(155deg, #c0e4d0 0%, #eaf7f1 38%, #fff5f2 68%, #ffccc4 100%);
}

.mbpf-reviews__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

/* Plakietka z oceną — biała pigułka na gradiencie. */
.mbpf .mbpf-rating {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	padding: .75rem 1.25rem;
	border-radius: 999px;
	background: var(--mbpf-white);
	box-shadow: 0 8px 24px rgba(26, 26, 26, .08);
	color: var(--mbpf-ink);
	text-decoration: none;
}

.mbpf a.mbpf-rating:hover,
.mbpf a.mbpf-rating:focus-visible {
	color: var(--mbpf-ink);
	box-shadow: 0 10px 28px rgba(26, 26, 26, .14);
}

.mbpf-rating__body {
	display: grid;
	gap: .125rem;
}

.mbpf-rating__top {
	display: flex;
	align-items: center;
	gap: .5rem;
	line-height: 1;
}

.mbpf-rating__score {
	font-size: 1.25rem;
	font-weight: 800;
}

.mbpf-rating__count {
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-stars {
	color: var(--mbpf-gold);
	letter-spacing: .08em;
	line-height: 1;
}

.mbpf-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-review {
	display: grid;
	align-content: start;
	gap: .625rem;
	padding: 1.25rem;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 16px;
	background: var(--mbpf-white);
	box-shadow: 0 6px 20px rgba(26, 26, 26, .05);
}

.mbpf-review__head {
	display: flex;
	align-items: center;
	gap: .625rem;
}

.mbpf-review__avatar {
	flex: none;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--mbpf-green-10);
}

.mbpf-review__avatar--letter {
	display: grid;
	place-items: center;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-review__who {
	display: grid;
	min-width: 0;
}

.mbpf-review__name {
	font-weight: 700;
	font-size: .9375rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mbpf-review__date {
	font-size: .75rem;
	color: var(--mbpf-muted);
}

.mbpf-review__source {
	margin-left: auto;
	line-height: 0;
}

.mbpf-review__stars {
	margin: 0;
	font-size: .9375rem;
}

.mbpf-review__text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--mbpf-muted);
}

.mbpf-reviews__actions {
	display: flex;
	justify-content: center;
	margin: 2rem 0 0;
}

/* ---------------------------------------------------- sekcja FAQ */

/* [Figma] białe tło, padding 96 px u góry i 80 px u dołu */
.mbpf-faq {
	padding-block: 96px 80px;
	background: var(--mbpf-white);
}

.mbpf-faq__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 1rem;
	margin-top: 2rem;
}

/* [Figma] kafelek #F0F7F4 z obramowaniem #C0E4D0 na 40% */
.mbpf-faq__item {
	border: 1px solid rgba(192, 228, 208, .4);
	border-radius: 14px;
	background: #f0f7f4;
	transition: border-color .18s ease, background-color .18s ease;
}

.mbpf-faq__item[open] {
	border-color: rgba(192, 228, 208, .9);
	background: var(--mbpf-white);
}

.mbpf-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 600;
	color: var(--mbpf-green);
	list-style: none;
}

/* Domyślny trójkącik przeglądarki zastępujemy własnym daszkiem. */
.mbpf-faq__question::-webkit-details-marker {
	display: none;
}

.mbpf-faq__question:hover {
	color: var(--mbpf-ink);
}

.mbpf-faq__chevron {
	flex: none;
	line-height: 0;
	color: var(--mbpf-green);
	transition: transform .2s ease;
}

.mbpf-faq__item[open] .mbpf-faq__chevron {
	transform: rotate(180deg);
}

.mbpf-faq__answer {
	padding: 0 1.25rem 1.125rem;
	color: var(--mbpf-muted);
	font-size: .9375rem;
	line-height: 1.65;
}

.mbpf-faq__answer p {
	margin: 0;
}

.mbpf-faq__answer p + p {
	margin-top: .625rem;
}

/* ------------------------------------------- sekcja newslettera */

/* [Figma] tło #F0F7F4, padding 64 px */
.mbpf-news {
	padding-block: 64px;
	background: #f0f7f4;
}

.mbpf-news__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

/* Zdjęcia po bokach są dekoracją — bez nich karta zostaje wyśrodkowana. */
.mbpf-news__aside {
	flex: 0 1 220px;
	line-height: 0;
}

.mbpf-news__photo {
	width: 100%;
	height: auto;
	border-radius: 16px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.mbpf-news__card {
	flex: 0 1 520px;
	display: grid;
	justify-items: center;
	gap: .375rem;
	padding: 2rem 1.75rem;
	border: 1px solid rgba(192, 228, 208, .6);
	border-radius: 20px;
	background: var(--mbpf-white);
	box-shadow: 0 10px 30px rgba(26, 26, 26, .06);
	text-align: center;
}

.mbpf-news__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: .25rem;
	border-radius: 12px;
	background: rgba(192, 228, 208, .35);
	color: var(--mbpf-green);
}

.mbpf-news__title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--mbpf-green);
}

.mbpf-news__lead {
	margin: 0 0 1rem;
	color: var(--mbpf-muted);
	font-size: .9375rem;
}

.mbpf-news__form {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	width: 100%;
}

.mbpf-news__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .875rem 1.125rem;
	border: 1px solid var(--mbpf-line);
	border-radius: 999px;
	background: var(--mbpf-white);
	font: inherit;
	font-size: 1rem;
	color: var(--mbpf-ink);
}

.mbpf-news__input:focus-visible {
	outline: 2px solid var(--mbpf-green);
	outline-offset: 1px;
	border-color: var(--mbpf-green);
}

.mbpf .mbpf-news__submit {
	flex: none;
}

.mbpf-news__status {
	margin: .625rem 0 0;
	min-height: 1.25rem;
	font-size: .875rem;
	font-weight: 600;
}

.mbpf-news__status.is-ok {
	color: var(--mbpf-green);
}

.mbpf-news__status.is-error {
	color: #b4453a;
}

.mbpf-news__fine {
	margin: .25rem 0 0;
	font-size: .75rem;
	color: var(--mbpf-muted);
}

/* --------------------------------------------------- sekcja bloga */

/* [Figma] białe tło, padding 96 px */
.mbpf-blog {
	padding-block: 96px;
	background: var(--mbpf-white);
}

.mbpf-blog__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.mbpf-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-post {
	display: flex;
}

/* Cały kafelek jest jednym odnośnikiem — nie ma tu drugiej akcji do pomieszczenia. */
.mbpf a.mbpf-post__link {
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 16px;
	background: var(--mbpf-white);
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mbpf a.mbpf-post__link:hover,
.mbpf a.mbpf-post__link:focus-visible {
	border-color: var(--mbpf-green);
	box-shadow: var(--mbpf-shadow);
	transform: translateY(-2px);
	color: inherit;
}

.mbpf-post__thumb {
	display: block;
	line-height: 0;
	background: var(--mbpf-green-06);
}

.mbpf-post__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mbpf-post__body {
	display: grid;
	align-content: start;
	gap: .5rem;
	padding: 1.125rem 1.25rem 1.25rem;
}

/* Tytuł przycięty do dwóch wierszy — inaczej kafelki w rzędzie mają różną wysokość
   nagłówka i cała siatka wygląda na rozjechaną. */
.mbpf-post__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mbpf-green);
}

.mbpf-post__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--mbpf-muted);
}

.mbpf-post__meta {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin-top: .25rem;
	padding-top: .75rem;
	border-top: 1px solid var(--mbpf-line);
	font-size: .75rem;
	color: var(--mbpf-muted);
}

.mbpf-post__go {
	margin-left: auto;
	color: var(--mbpf-green);
	font-size: .9375rem;
	transition: transform .18s ease;
}

.mbpf a.mbpf-post__link:hover .mbpf-post__go {
	transform: translateX(3px);
}

/* ------------------------------------ końcowe wezwanie do działania */

.mbpf-cta {
	padding-block: 96px;
	background: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-cta__inner {
	display: grid;
	justify-items: center;
	gap: 1rem;
	text-align: center;
}

.mbpf-cta__figure {
	max-width: 520px;
	line-height: 0;
	margin-bottom: .5rem;
}

.mbpf-cta__photo {
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.mbpf-cta__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: 0;
}

.mbpf-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: .8125rem;
	color: rgba(255, 255, 255, .8);
	line-height: 1.2;
}

.mbpf-cta__badge strong {
	color: var(--mbpf-white);
	font-weight: 700;
}

.mbpf-cta__badge-icon {
	display: grid;
	place-items: center;
	color: var(--mbpf-mint-soft);
	line-height: 0;
}

.mbpf-cta__title {
	max-width: 18ch;
	margin: .5rem 0 0;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--mbpf-white);
}

.mbpf-cta__lead {
	max-width: 52ch;
	margin: 0;
	color: rgba(192, 228, 208, .85);
}

.mbpf-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: 1rem 0 0;
}

/* ------------------------------------------------- katalog kursów */

/*
 * [Figma] pasek nagłówka ma własne tło #F9FDFB i 468 px wysokości — to nie jest
 * biel z plamami, tylko osobny jasnomiętowy pas. Siatka zaczyna się pod nim, na bieli.
 * Padding górny celowo mały, żeby pas zaczynał się tuż pod nawigacją.
 */
/*
 * [Figma] pasek nagłówka ma tło #F9FDFB i 468 px wysokości.
 *
 * Makieta osiąga poświatę dwoma rozmytymi kołami 320×320. Przy szerokości ekranu
 * powyżej 1200 px wyglądają jak dwie wyspy, więc zamiast nich są tu dwa gradienty
 * radialne rozciągnięte na całą szerokość — ten sam efekt wizualny, tylko gładszy,
 * bez kosztu filtra rozmycia i bez sztuczek z kontekstem nakładania.
 */
.mbpf-catalog-hero {
	position: relative;
	overflow: hidden;
	padding-block: 40px 48px;
	background:
		radial-gradient(70% 130% at 8% -10%, rgba(192, 228, 208, .85), rgba(192, 228, 208, 0) 62%),
		radial-gradient(65% 125% at 92% 0%, rgba(255, 180, 166, .7), rgba(255, 180, 166, 0) 60%),
		radial-gradient(90% 90% at 50% 120%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
		var(--mbpf-section-bg);
}

.mbpf-catalog {
	padding-block: 40px 64px;
	background: var(--mbpf-white);
}

.mbpf-catalog__intro {
	position: relative;
	z-index: 1;
	text-align: center;
}

/*
 * [Figma] tło to nie gradient, tylko dwie rozmyte plamy: koło 320×320
 * z filtrem blur(64px). Stąd osobne elementy zamiast `background-image`.
 */
/* [Figma] 60px / 800 / 110% / -1.5px, kolor #1A1A1A */
.mbpf-catalog__title {
	margin: 0 0 .75rem;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--mbpf-ink);
}

/* Gradient obejmuje wyłącznie ostatnie słowo, nie cały nagłówek. */
.mbpf-catalog__title-accent {
	background: linear-gradient(135deg, var(--mbpf-green), var(--mbpf-mint), var(--mbpf-green));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mbpf-catalog__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem;
	margin: 1.5rem 0 0;
}

.mbpf-catalog__stat {
	text-align: center;
}

.mbpf-catalog__title-line {
	display: block;
}

.mbpf-catalog__stat-value {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--mbpf-green);
}

/* line-height: 0 — bez tego pole wiersza ikony podnosi całą liczbę. */
.mbpf-catalog__stat-icon {
	display: flex;
	line-height: 0;
	color: rgba(59, 93, 86, .55);
}

.mbpf-catalog__stat-label {
	margin: .25rem 0 0;
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

/* --- układ: siatka po lewej, filtry w pasku po prawej --- */

.mbpf-catalog__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	align-items: start;
	gap: 2rem;
}

.mbpf-catalog__main {
	min-width: 0;
	order: 2;
}

/*
 * Górny margines równa pasek z pierwszym rzędem kart: w kolumnie obok stoi jeszcze
 * wiersz „Pokazuję X z Y", więc bez tego pasek zaczynałby się wyżej niż siatka.
 */
.mbpf-catalog__aside {
	position: sticky;
	top: calc(var(--mbpf-header-h) + var(--mbpf-adminbar) + 1rem);
	/* 3,5rem to dokładnie wysokość wiersza „Pokazuję X z Y" wraz z jego marginesami. */
	margin-top: 3.5rem;
	order: 1;
}

/* --- filtry --- */

.mbpf-filters {
	display: grid;
	gap: 1.25rem;
	padding: 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 16px;
	background: #f9fdfb;
}

.mbpf-filters__row {
	display: grid;
	gap: .625rem;
}

.mbpf-filters__label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.mbpf button.mbpf-chip {
	padding: .5rem 1rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	background: var(--mbpf-white);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mbpf-muted);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbpf button.mbpf-chip:hover {
	border-color: var(--mbpf-green);
	color: var(--mbpf-green);
}

.mbpf button.mbpf-chip.is-on {
	background: var(--mbpf-green);
	border-color: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-catalog__count {
	margin: 1rem 0 1.25rem;
	font-size: .875rem;
	color: var(--mbpf-muted);
}

.mbpf-catalog__empty {
	margin: 2rem 0 0;
	padding: 2rem;
	border: 1px dashed var(--mbpf-card-line);
	border-radius: 16px;
	text-align: center;
	color: var(--mbpf-muted);
}

/* --- karta kursu --- */

.mbpf-catalog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-course {
	display: flex;
}

.mbpf a.mbpf-course__link {
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 16px;
	background: var(--mbpf-white);
	color: inherit;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mbpf a.mbpf-course__link:hover,
.mbpf a.mbpf-course__link:focus-visible {
	border-color: var(--mbpf-green);
	box-shadow: var(--mbpf-shadow);
	transform: translateY(-2px);
	color: inherit;
}

.mbpf-course__thumb {
	position: relative;
	display: block;
	line-height: 0;
	background: var(--mbpf-green-06);
}

.mbpf-course__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.mbpf-course__badges {
	position: absolute;
	inset: .75rem .75rem auto;
	display: flex;
	flex-wrap: wrap;
	gap: .4375rem;
	line-height: 1;
}

.mbpf-course__badge {
	padding: .4375rem .75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 8px rgba(26, 26, 26, .1);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-course__badge--bundle {
	background: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-course__badge--free {
	background: var(--mbpf-mint-soft);
	color: var(--mbpf-green);
}

/* Promocja jako jedyna wychodzi poza paletę marki — ma się rzucać w oczy. */
.mbpf-course__badge--sale {
	margin-left: auto;
	padding-inline: .8125rem;
	background: #d64545;
	color: var(--mbpf-white);
	font-size: .875rem;
	letter-spacing: .01em;
}

.mbpf-course__body {
	display: grid;
	align-content: start;
	gap: .5rem;
	padding: 1.125rem 1.25rem 1.25rem;
}

.mbpf-course__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mbpf-green);
}

.mbpf-course__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--mbpf-muted);
}

.mbpf-course__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-course__soon {
	padding: .125rem .5rem;
	border-radius: 999px;
	background: var(--mbpf-green-06);
	color: var(--mbpf-green);
	font-weight: 600;
}

.mbpf-course__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .25rem;
	padding-top: .75rem;
	border-top: 1px solid var(--mbpf-line);
}

.mbpf-course__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .4375rem;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--mbpf-ink);
}

.mbpf-course__price del {
	font-size: 1rem;
	font-weight: 500;
	opacity: .5;
}

.mbpf-course__price ins {
	text-decoration: none;
}

.mbpf-course__go {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	flex: none;
	font-size: .875rem;
	font-weight: 600;
	color: var(--mbpf-green);
}

.mbpf a.mbpf-course__link:hover .mbpf-course__go .mbpf-btn__arrow {
	transform: translateX(3px);
}

/* ------------------------------------ „Nie wiesz, który kurs wybrać?” */

.mbpf-help {
	padding-block: 64px;
	background: var(--mbpf-section-bg);
}

.mbpf-help__inner {
	display: grid;
	justify-items: center;
	text-align: center;
}

.mbpf-help__pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .375rem .875rem;
	border-radius: 999px;
	background: rgba(192, 228, 208, .35);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--mbpf-green);
	line-height: 1;
}

/* Podtytuł ma domyślnie 2,5 rem odstępu na dole; tutaj nad filmem to za dużo,
   bo do tego dochodzi jeszcze margines samego odtwarzacza. */
.mbpf-help .mbpf-section-lead {
	margin-bottom: .75rem;
}

/* Film w sekcji pomocniczej — węższy niż na stronie głównej, bo stoi w kolumnie
   wyśrodkowanej razem z nagłówkiem i przyciskami. */
.mbpf-help__video {
	width: 100%;
	max-width: 720px;
	margin: .5rem auto .25rem;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid var(--mbpf-card-line);
	box-shadow: var(--mbpf-shadow);
}

.mbpf-help__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: .5rem 0 1.5rem;
}

.mbpf-help__points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-help__points li {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	line-height: 1;
}

/* ------------------------------------------------ podstrona „O mnie” */

/* [Figma] sekcja 1905x830, treść 1152, wyściółka 80/376.5, przerwa kolumn 80.
   Tło to jeden łagodny gradient przez całą szerokość: mięta z lewej, brzoskwinia
   z prawej — nie dwie plamy jak wcześniej. */
.mbpf-about-hero {
	padding-block: 56px 64px;
	background:
		linear-gradient(104deg,
			#e4f4ee 0%,
			#eef7f2 26%,
			#f7f4ef 52%,
			#fde9e2 78%,
			#fdeee8 100%);
}

/* Dwie równe połowy: kolumna tekstu zaczyna się dokładnie na środku kontenera.
   Wcześniej zdjęcie miało stałe 470 px, przez co tekst startował na 42% i całość
   sprawiała wrażenie zsuniętej w lewo. Odstęp bierzemy z połówek, nie z siatki. */
.mbpf-about-hero__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 50%));
	gap: 0;
	align-items: center;
}

.mbpf-about-hero__figure {
	margin-right: 2.5rem;
}

.mbpf-about-hero__body {
	padding-left: 2.5rem;
}

/* Plakietki siedzą na zdjęciu, więc kontener musi być układem odniesienia. */
/* Bez karty pod spodem: wycinka stoi wprost na tle sekcji, a dolną krawędzią
   styka się z jej końcem. Ujemny margines znosi dolną wyściółkę sekcji, więc
   miejsce przycięcia zdjęcia pokrywa się z granicą tła i cięcia nie widać. */
.mbpf-about-hero__figure {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-self: end;
	margin-bottom: -64px;
}

.mbpf-about-hero__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 600px;
	object-fit: cover;
	object-position: top center;
}

.mbpf-about-hero__chip {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	padding: .5rem .875rem;
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(26, 26, 26, .12);
}

.mbpf-about-hero__chip--top {
	top: 1.25rem;
	left: -1.25rem;
	background: #fff;
	color: var(--mbpf-ink);
}

.mbpf-about-hero__chip--bottom {
	bottom: 3rem;
	right: -1.25rem;
	background: var(--mbpf-green);
	color: #fff;
}

.mbpf-about-hero__chip-icon {
	display: inline-flex;
	color: var(--mbpf-muted);
}

.mbpf-about-hero__chip--bottom .mbpf-stars {
	color: var(--mbpf-gold);
}

/* [Figma] 60/75 px, waga 700, światło -1.5 px, kolor #1A1A1A. */
.mbpf-about-hero__title {
	margin: 0 0 .625rem;
	font-size: clamp(2.25rem, 1.35rem + 2.6vw, 3.75rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.025em;
	color: var(--mbpf-ink);
}

.mbpf-about-hero__accent {
	color: var(--mbpf-green);
}

.mbpf-about-hero__claim {
	margin: 0 0 1.125rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mbpf-green);
}

/* [Figma] 18/29.25 px, kolor #5A7A74, kolumna 448 px. */
.mbpf-about-hero__lead {
	margin: 0 0 1.75rem;
	max-width: 448px;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--mbpf-muted);
}

.mbpf-about-hero__actions,
.mbpf-start__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
}

/* Kropka przed nadtytułem — w makiecie plakietka „Math by Pan.Fran”. */
.mbpf-eyebrow__dot {
	display: inline-block;
	width: .4375rem;
	height: .4375rem;
	margin-right: .4375rem;
	border-radius: 50%;
	background: var(--mbpf-green);
	vertical-align: middle;
}

/* Ikona zamiast kropki — plakietka „Nauczyciel z pasją” na stronie O mnie. */
.mbpf-eyebrow__ico {
	display: inline-flex;
	align-items: center;
	margin-right: .375rem;
	vertical-align: -.15em;
}

.mbpf-eyebrow--rose {
	display: inline-block;
	padding: .375rem .875rem;
	border-radius: 999px;
	background: rgba(255, 180, 166, .35);
	color: #b4573f;
	letter-spacing: .06em;
}

/* Biały przycisk z makiety — używany obok zielonego jako druga opcja. */
.mbpf a.mbpf-btn--white,
.mbpf button.mbpf-btn--white {
	background: #fff;
	color: var(--mbpf-green);
	border: 1px solid rgba(59, 93, 86, .16);
	box-shadow: 0 8px 20px rgba(26, 26, 26, .06);
}

.mbpf a.mbpf-btn--white:hover,
.mbpf a.mbpf-btn--white:focus-visible,
.mbpf button.mbpf-btn--white:hover,
.mbpf button.mbpf-btn--white:focus-visible {
	background: #f4faf7;
	border-color: rgba(59, 93, 86, .3);
}

/* ---------------------------------------------------- „Skąd się wziął Pan Fran?” */

.mbpf-about-story {
	padding-block: 5.5rem;
	background: #fff;
}

.mbpf-about-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 4.5rem;
	align-items: center;
}

.mbpf-about-story__title {
	margin: .75rem 0 1.5rem;
	font-size: clamp(1.875rem, 1.3rem + 1.7vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-about-story__accent {
	color: var(--mbpf-green);
}

.mbpf-about-story__text {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--mbpf-muted);
}

.mbpf-about-story__sign {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 1.75rem 0 0;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-about-story__rule {
	display: block;
	width: 2.5rem;
	height: 2px;
	border-radius: 2px;
	background: var(--mbpf-green);
}

.mbpf-about-story__figure {
	margin: 0;
}

.mbpf-about-story__photo {
	display: block;
	width: 100%;
	height: auto;
	max-height: 420px;
	object-fit: cover;
	border-radius: 24px;
	box-shadow: 0 24px 48px rgba(26, 26, 26, .12);
}

/* ------------------------------------------------------------- pasek liczb */

.mbpf-about-facts {
	padding-block: 4rem;
	background: var(--mbpf-green);
	color: #fff;
}

.mbpf-about-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	text-align: center;
}

.mbpf-about-facts__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .375rem;
}

/* Krążek 72 px przy znaku 32 px — glif wypełnia go w ~45%, więc ikona ma
   masę, a nie konkuruje z liczbą pod spodem. Pierścień odcina ją od zieleni. */
.mbpf-about-facts__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: rgba(192, 228, 208, .16);
	box-shadow: inset 0 0 0 1px rgba(192, 228, 208, .34);
	color: #dff3e8;
}

.mbpf-about-facts__value {
	font-size: 2.375rem;
	font-weight: 700;
	line-height: 1.1;
}

.mbpf-about-facts__label {
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .78);
}

/* ------------------------------------------------------------ „W co wierzę” */

.mbpf-values {
	padding-block: 5.5rem;
	background: var(--mbpf-section-bg);
	text-align: center;
}

.mbpf-values .mbpf-eyebrow--rose {
	margin-bottom: 1rem;
}

/* Pięć wartości z makiety mieści się w rzędzie dopiero od 1200 px — niżej 3, 2 i 1. */
.mbpf-values__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* Numer stoi z lewej, treść z prawej — dwie kolumny, numer przez oba wiersze. */
.mbpf-values__card {
	display: grid;
	align-content: start;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 20px;
	background: #fff;
}

.mbpf-values__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.mbpf-values__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	background: linear-gradient(140deg, rgba(192, 228, 208, .95), rgba(123, 191, 176, .55));
	color: var(--mbpf-green);
	box-shadow: inset 0 0 0 1px rgba(59, 93, 86, .08);
}

/* Numer prowadzi wzrok po kartach, więc musi być czytelny z odległości —
   36 px było ledwie widoczne obok tytułu o tej samej wadze. */
.mbpf-values__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 999px;
	background: var(--mbpf-green-06);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--mbpf-muted);
}

.mbpf-values__title {
	margin: 1rem 0 .5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-values__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mbpf-muted);
}

/*
 * Miękkie pojawianie się bloków przy przewijaniu. Klasę `mbpf-js` wpisuje skrypt
 * na `<html>`, więc bez JavaScriptu nic się nie chowa. Samo odsłonięcie robi
 * `is-widoczny` z obserwatora — a przy „ogranicz animacje” skrypt w ogóle nie startuje
 * i reguła niżej jest wyłączona.
 */
.mbpf-js [data-mbpf-reveal] {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity .5s ease, transform .5s ease;
}

.mbpf-js [data-mbpf-reveal].is-widoczny {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------------- „Poza tablicą” */

/*
 * Makieta z 24 sierpnia: nagłówek na środku, pod nim kolumna tekstu i trzy karty
 * ze zdjęciami. Wcześniej stał tu kolaż trzech poobracanych kadrów ze starszej Figmy —
 * jego reguły poszły razem z nim, bo nic innego ich nie używało.
 */
.mbpf-beyond {
	padding-block: 5.5rem;
	background: #fff;
	text-align: center;
}

.mbpf-beyond__title {
	margin: .75rem 0 2.5rem;
	font-size: clamp(1.875rem, 1.3rem + 1.7vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-beyond__accent {
	color: var(--mbpf-green);
	position: relative;
}

.mbpf-beyond__inner {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
	gap: 2.5rem;
	align-items: center;
	text-align: left;
}

.mbpf-beyond__text {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mbpf-muted);
}

.mbpf-beyond__text:last-child {
	margin-bottom: 0;
}

.mbpf-beyond__text strong {
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf .mbpf-beyond__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf .mbpf-beyond__card {
	display: grid;
	grid-template-rows: auto 1fr;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
	overflow: hidden;
	box-shadow: 0 14px 32px rgba(26, 26, 26, .07);
}

/*
 * Zdjęcia są pionowe (kadry z telefonu), a karta pozioma — stąd kadrowanie
 * `object-fit: cover` i `object-position` ustawiane przy każdej karcie osobno,
 * żeby przycięcie nie ucinało twarzy.
 */
.mbpf-beyond__figure {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--mbpf-green-06);
	line-height: 0;
}

.mbpf .mbpf-beyond__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mbpf-beyond__label {
	display: grid;
	gap: .375rem;
	padding: .875rem 1rem 1.125rem;
}

.mbpf-beyond__name {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mbpf-ink);
}

.mbpf-beyond__note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--mbpf-muted);
}

.mbpf-beyond__ico {
	line-height: 0;
	color: var(--mbpf-mint);
}


/* ------------------------------------------------------------ „Obserwuj mnie” */

.mbpf-social {
	padding-block: 5rem;
	background: var(--mbpf-green);
	color: #fff;
	text-align: center;
}

.mbpf-social__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.mbpf-social__lead {
	margin: 0 auto 2.5rem;
	max-width: 46ch;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, .75);
}

/* Trzy profile w rzędzie — karty są węższe niż przy dwóch, więc kafelek ikony
   i odstępy schodzą o oczko, żeby pseudonim nie łamał się w dwie linie. */
.mbpf-social__grid > li {
	display: flex;
}

.mbpf-social__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.mbpf a.mbpf-social__card {
	display: flex;
	width: 100%;
	align-items: center;
	gap: .9375rem;
	padding: 1.375rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 20px;
	background: rgba(255, 255, 255, .07);
	color: #fff;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.mbpf a.mbpf-social__card:hover,
.mbpf a.mbpf-social__card:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
	transform: translateY(-2px);
}

.mbpf-social__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 18px;
	color: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}

.mbpf-social__card--instagram .mbpf-social__icon {
	background: linear-gradient(135deg, #f9a03f, #e1306c 55%, #833ab4);
}

.mbpf-social__card--tiktok .mbpf-social__icon {
	background: #010101;
}

.mbpf-social__card--facebook .mbpf-social__icon {
	background: #1877f2;
}

.mbpf-social__body {
	display: flex;
	flex-direction: column;
	gap: .1875rem;
	min-width: 0;
}

.mbpf-social__name {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-mint-soft);
}

.mbpf-social__count {
	display: flex;
	align-items: baseline;
	gap: .4375rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.mbpf-social__unit {
	font-size: .875rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .7);
}

.mbpf-social__handle {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-mint);
}

.mbpf-social__go {
	margin-left: auto;
	align-self: center;
	flex: 0 0 auto;
	font-size: 1.25rem;
	color: rgba(255, 255, 255, .6);
	transition: transform .18s ease, color .18s ease;
}

.mbpf a.mbpf-social__card:hover .mbpf-social__go {
	transform: translateX(3px);
	color: #fff;
}

/* --------------------------------------------------- „Zacznij naukę ze mną” */

.mbpf-start {
	padding-block: 6rem 4rem;
	background: var(--mbpf-section-bg);
}

/* [Figma] biała karta 1777x468, wyściółka 96/64, treść na środku. */
.mbpf-start__card {
	padding: 4rem 3.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(26, 26, 26, .07);
	text-align: center;
}

.mbpf-start__title {
	margin: .5rem 0 1rem;
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-start__accent {
	color: var(--mbpf-green);
}

.mbpf-start__lead {
	margin: 0 auto 1.75rem;
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--mbpf-muted);
}

/* Podpis nad filmem — mówi, co widać po kliknięciu. */
.mbpf-start__caption {
	margin: 1.5rem 0 -.5rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-green);
}

/* Film stoi między opisem a przyciskami — tak samo jak w sekcji „Nie wiesz,
   który kurs wybrać?”, żeby oba miejsca zachowywały się jednakowo. */
.mbpf-start__video {
	width: 100%;
	max-width: 720px;
	margin: 1.75rem auto;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid var(--mbpf-card-line);
	box-shadow: var(--mbpf-shadow);
}

.mbpf-start__actions {
	justify-content: center;
}

/* Zamiast trzech osobnych deklaracji jedna ocena prosto z profilu Google —
   sprawdzalna, z odnośnikiem do opinii. */
.mbpf-start__rating {
	margin: 2rem 0 0;
}

.mbpf a.mbpf-start__rating-link {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	padding: .625rem 1.125rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	background: var(--mbpf-section-bg);
	color: var(--mbpf-muted);
	font-size: .9375rem;
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}

.mbpf a.mbpf-start__rating-link:hover,
.mbpf a.mbpf-start__rating-link:focus-visible {
	border-color: rgba(59, 93, 86, .28);
	background: #fff;
}

.mbpf-start__rating-mark {
	display: inline-flex;
}

.mbpf-start__rating-score {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-start__rating .mbpf-stars {
	color: var(--mbpf-gold);
	letter-spacing: .0625em;
}

/* ------------------------------------------------ podstrona „Dla kogo?” */

/* [Figma] treść wyśrodkowana na gradiencie mięta → brzoskwinia, bez zdjęcia. */
.mbpf-fw-hero {
	padding-block: 5rem 5.5rem;
	background:
		linear-gradient(104deg,
			#e4f4ee 0%,
			#eef7f2 26%,
			#f7f4ef 52%,
			#fde9e2 78%,
			#fdeee8 100%);
}

/*
 * Makieta z 26 sierpnia: tekst po lewej, wycięte zdjęcie po prawej. Wcześniej cała
 * sekcja była wyśrodkowana i bez obrazu — poprawnie, ale płasko.
 */
.mbpf-fw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
	gap: 2.5rem;
	align-items: center;
}

.mbpf-fw-hero__body {
	text-align: left;
}

/* Zdjęcie z bazgrołami dookoła — plama jest wypalona w samym pliku. */
.mbpf-fw-hero__figure {
	position: relative;
	display: flex;
	justify-content: center;
}

.mbpf .mbpf-fw-hero__photo {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
}

/* Miętowa pigułka nad nagłówkiem — ten sam element wraca w kilku sekcjach. */
.mbpf-eyebrow--pill {
	display: inline-block;
	margin-bottom: 1.25rem;
	padding: .4375rem 1rem;
	border-radius: 999px;
	background: rgba(192, 228, 208, .7);
	color: var(--mbpf-green);
	letter-spacing: .06em;
}

.mbpf-fw-hero__title {
	margin: 0 0 1.125rem;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.025em;
	color: var(--mbpf-ink);
}

.mbpf-fw-hero__accent {
	color: var(--mbpf-green);
}

.mbpf-fw-hero__lead {
	margin: 0 0 2rem;
	max-width: 46ch;
	font-size: 1.125rem;
	line-height: 1.625;
	color: var(--mbpf-muted);
}

.mbpf-fw-hero__actions {
	margin: 0;
}

/* Strzałka w dół przy przycisku kotwicy — obrót zamiast osobnej ikony. */
.mbpf-btn__down {
	display: inline-flex;
	margin-left: .375rem;
}

/* ------------------------------------------------- „Czy to brzmi znajomo?” */

.mbpf-quiz {
	padding-block: 5rem;
	background: #fff;
}

.mbpf-quiz__list {
	display: grid;
	gap: .75rem;
	margin: 2.5rem auto 0;
	padding: 0;
	max-width: 820px;
	list-style: none;
}

.mbpf-quiz__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .875rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 14px;
	background: var(--mbpf-section-bg);
	transition: border-color .18s ease, background .18s ease;
}

.mbpf-quiz__row[data-mbpf-answered="yes"] {
	border-color: rgba(123, 191, 176, .75);
	background: rgba(192, 228, 208, .22);
}

.mbpf-quiz__row[data-mbpf-answered="no"] {
	background: #fff;
}

/* Ikona pytania — dekoracja z makiety, więc kurczy się jako pierwsza. */
.mbpf-quiz__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 12px;
	background: rgba(192, 228, 208, .5);
	color: var(--mbpf-green);
}

.mbpf-quiz__text {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--mbpf-ink);
}

.mbpf-quiz__answers {
	display: inline-flex;
	flex: 0 0 auto;
	gap: .375rem;
}

.mbpf button.mbpf-quiz__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.75rem;
	padding: .4375rem .875rem;
	font: inherit;
	line-height: 1;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	background: #fff;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--mbpf-muted);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.mbpf button.mbpf-quiz__btn:hover {
	border-color: var(--mbpf-mint);
	color: var(--mbpf-green);
}

.mbpf button.mbpf-quiz__btn[aria-pressed="true"] {
	background: var(--mbpf-green);
	border-color: var(--mbpf-green);
	color: #fff;
}

/* Podsumowanie odsłania się dopiero po odpowiedzi na wszystkie pytania. */
.mbpf-quiz__results {
	max-width: 820px;
	margin: 1.5rem auto 0;
}

.mbpf-quiz__result {
	padding: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 20px;
	background: var(--mbpf-section-bg);
	text-align: center;
}

.mbpf-quiz__result--high {
	background: rgba(192, 228, 208, .35);
	border-color: rgba(123, 191, 176, .6);
}

.mbpf-quiz__score {
	margin: 0 0 .5rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mbpf-mint);
}

.mbpf-quiz__result-title {
	margin: 0 0 .625rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-quiz__result-text {
	margin: 0 auto 1.5rem;
	max-width: 52ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--mbpf-muted);
}

.mbpf-quiz__result-actions {
	margin: 0;
}

/* ------------------------------------------------------ „Znajdź swoją ścieżkę” */

.mbpf-paths {
	padding-block: 5rem;
	background: var(--mbpf-section-bg);
}

.mbpf-paths__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 2.5rem auto 0;
	padding: 0;
	list-style: none;
}

.mbpf-paths__grid > li {
	display: flex;
}

/*
 * Karta ścieżki: ikona z tytułem, zdanie w pierwszej osobie i pas z bazgrołami u dołu.
 * Barwę niesie modyfikator `--mint/--green/--rose/--sand`, przez zmienną `--ton`,
 * więc nowa ścieżka to jedna reguła, a nie kopia całej karty.
 */
.mbpf a.mbpf-paths__card {
	--ton: rgba(192, 228, 208, .55);
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: .75rem;
	width: 100%;
	padding: 1.25rem 1.25rem 0;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 18px;
	background: #fff;
	color: var(--mbpf-ink);
	text-decoration: none;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mbpf a.mbpf-paths__card--mint  { --ton: rgba(192, 228, 208, .55); }
.mbpf a.mbpf-paths__card--green { --ton: rgba(123, 191, 176, .45); }
.mbpf a.mbpf-paths__card--rose  { --ton: rgba(255, 180, 166, .4); }
.mbpf a.mbpf-paths__card--sand  { --ton: rgba(251, 188, 5, .22); }

.mbpf a.mbpf-paths__card:hover,
.mbpf a.mbpf-paths__card:focus-visible {
	border-color: var(--mbpf-mint);
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(26, 26, 26, .1);
}

.mbpf-paths__head {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.mbpf-paths__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 12px;
	background: var(--ton);
	color: var(--mbpf-green);
}

.mbpf-paths__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.mbpf-paths__note {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--mbpf-muted);
}

/* Pas rysunków u dołu karty — to on zastępuje zdjęcia z makiety. */
.mbpf-paths__marks {
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	gap: .5rem;
	margin: .25rem -1.25rem 0;
	padding: 1rem .75rem;
	min-height: 5.5rem;
	background: var(--ton);
	color: var(--mbpf-green);
}

.mbpf-paths__marks svg:first-child {
	transform: rotate(-6deg);
}

.mbpf-paths__marks svg:last-child {
	transform: rotate(7deg);
}

/* ------------------------------------------------------- problem → rozwiązanie */

.mbpf-problems {
	padding-block: 5rem;
	background: #fff;
}

.mbpf-problems__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3.5rem;
	align-items: center;
	scroll-margin-top: calc(var(--mbpf-header-h) + 2rem);
}

.mbpf-problems__row + .mbpf-problems__row {
	margin-top: 3.5rem;
}

/* Co drugi wiersz ma zdjęcie po prawej — kolejność zmieniamy porządkiem siatki,
   nie duplikatem znaczników. */
.mbpf-problems__row--flip .mbpf-problems__figure {
	order: 2;
}

.mbpf-problems__figure {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

.mbpf-problems__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 340px;
	object-fit: contain;
}

/* Bez zdjęcia zostaje kafel z podpisem — widać, czego brakuje, a układ się trzyma. */
/*
 * Blok bez zdjęcia dostaje rysunki na barwnej plamie. Wcześniej była tu zaślepka
 * z podpisem — potrzebna, dopóki czekaliśmy na zdjęcia; teraz to pełnoprawna ilustracja.
 */
.mbpf-problems__figure--marks {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	box-shadow: inset 0 0 0 1px rgba(59, 93, 86, .08);
}

.mbpf-problems__figure--mint {
	background: linear-gradient(150deg, rgba(192, 228, 208, .8), rgba(123, 191, 176, .35));
}

.mbpf-problems__figure--rose {
	background: linear-gradient(150deg, rgba(255, 180, 166, .45), rgba(253, 233, 226, .9));
}

.mbpf-problems__marks {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	padding: 2rem 1.5rem;
	color: var(--mbpf-green);
}

.mbpf-problems__marks svg:nth-child(odd) {
	transform: rotate(-7deg);
}

.mbpf-problems__marks svg:nth-child(even) {
	transform: rotate(6deg) translateY(-.5rem);
}

.mbpf-problems__slot {
	padding: 1rem;
	font-size: .9375rem;
	font-weight: 600;
	text-align: center;
	color: var(--mbpf-green);
}

.mbpf-problems__title {
	margin: .75rem 0 .75rem;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-problems__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--mbpf-muted);
}

/* Podświetlenie po skoku z karty ścieżki. */
.mbpf-problems__row.is-target,
.mbpf-routes__card.is-target {
	animation: mbpf-flash 1.6s ease;
}

@keyframes mbpf-flash {
	0%, 100% { box-shadow: 0 0 0 0 rgba(123, 191, 176, 0); }
	25%      { box-shadow: 0 0 0 6px rgba(123, 191, 176, .45); }
}

/* --------------------------------------------------------------- zielony pas */

.mbpf-fw-strip {
	padding-block: 3.5rem;
	background: var(--mbpf-green);
	color: #fff;
}

.mbpf-fw-strip__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .625rem;
	text-align: center;
}

.mbpf-fw-strip__icon {
	display: inline-flex;
	color: var(--mbpf-mint-soft);
}

.mbpf-fw-strip__text {
	margin: 0;
	max-width: 60ch;
	font-size: 1.125rem;
	line-height: 1.5;
}

.mbpf-fw-strip__text span {
	color: var(--mbpf-mint-soft);
}

/* --------------------------------------------------------------- porównanie */

.mbpf-compare {
	padding-block: 5rem;
	background: var(--mbpf-section-bg);
}

.mbpf-compare__title {
	margin: 0 0 2.5rem;
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--mbpf-ink);
}

.mbpf-compare__vs {
	color: var(--mbpf-mint);
}

.mbpf-compare__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 900px;
	margin-inline: auto;
}

/* Odręczna strzałka z makiety — siedzi w przerwie między kolumnami. */
.mbpf-compare__arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 0;
	color: var(--mbpf-green);
	opacity: .75;
	pointer-events: none;
}

.mbpf-compare__card {
	padding: 1.75rem;
	border-radius: 18px;
}

.mbpf-compare__card--bad {
	background: rgba(255, 180, 166, .18);
	box-shadow: inset 0 0 0 1px rgba(255, 180, 166, .55);
}

.mbpf-compare__card--good {
	background: rgba(192, 228, 208, .3);
	box-shadow: inset 0 0 0 1px rgba(123, 191, 176, .5);
}

.mbpf-compare__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.125rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.mbpf-compare__card--bad .mbpf-compare__head {
	color: #c0553a;
}

.mbpf-compare__card--good .mbpf-compare__head {
	color: var(--mbpf-green);
}

.mbpf-compare__list {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-compare__list li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--mbpf-muted);
}

.mbpf-compare__card--bad .mbpf-compare__list svg {
	color: #d4715a;
}

.mbpf-compare__card--good .mbpf-compare__list svg {
	color: var(--mbpf-mint);
}

/* --------------------------------------------------- „Wybierz swoją ścieżkę” */

.mbpf-routes {
	padding-block: 5rem;
	background: #fff;
}

.mbpf-routes__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 2.5rem auto 0;
	padding: 0;
	list-style: none;
}

.mbpf-routes__grid > li {
	display: flex;
}

.mbpf a.mbpf-routes__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: 2rem 1.25rem 1.5rem;
	border-radius: 18px;
	text-decoration: none;
	text-align: center;
	scroll-margin-top: calc(var(--mbpf-header-h) + 2rem);
	transition: transform .18s ease, box-shadow .18s ease;
}

.mbpf a.mbpf-routes__card:hover,
.mbpf a.mbpf-routes__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(26, 26, 26, .12);
}

.mbpf a.mbpf-routes__card--coral {
	background: rgba(255, 180, 166, .55);
	color: var(--mbpf-ink);
}

.mbpf a.mbpf-routes__card--mint {
	background: rgba(192, 228, 208, .7);
	color: var(--mbpf-ink);
}

.mbpf a.mbpf-routes__card--green {
	background: var(--mbpf-green);
	color: #fff;
}

/* Czwarta droga — klasy 4–8. Piaskowa, żeby nie powtarzać żadnej z trzech obok. */
.mbpf a.mbpf-routes__card--sand {
	background: rgba(251, 188, 5, .18);
	color: var(--mbpf-ink);
}

.mbpf-routes__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, .6);
	color: var(--mbpf-green);
}

.mbpf-routes__card--green .mbpf-routes__icon {
	background: rgba(255, 255, 255, .14);
	color: var(--mbpf-mint-soft);
}

.mbpf-routes__title {
	font-size: 1.125rem;
	font-weight: 700;
}

.mbpf-routes__go {
	display: inline-flex;
	align-items: center;
	gap: .3125rem;
	font-size: .9375rem;
	font-weight: 600;
	opacity: .85;
}

/* --------------------------------------------------------- strona „Kontakt” */

.mbpf-contact {
	padding-block: 4.5rem 5rem;
	background:
		linear-gradient(104deg,
			#e4f4ee 0%,
			#eef7f2 22%,
			#f9f7f3 50%,
			#fdeee8 100%);
}

.mbpf-contact__head {
	max-width: 640px;
	margin: 0 auto 3rem;
	text-align: center;
}

.mbpf-contact__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-contact__lead {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--mbpf-muted);
}

/* Obietnica czasu odpowiedzi — pigułka, nie zwykły akapit, żeby się wyróżniała. */
.mbpf-contact__pledge {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	margin: 0;
	padding: .4375rem 1rem;
	border-radius: 999px;
	background: rgba(192, 228, 208, .6);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-green);
}

.mbpf-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

/* ------------------------------------------------------------- formularz */

.mbpf-contact__form {
	padding: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 20px 44px rgba(26, 26, 26, .06);
}

.mbpf-contact__form-title {
	margin: 0 0 1.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-field {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	margin: 0 0 1rem;
}

.mbpf-field label {
	font-size: .875rem;
	font-weight: 600;
	color: var(--mbpf-ink);
}

.mbpf-field label span {
	font-weight: 400;
	color: var(--mbpf-muted);
}

.mbpf .mbpf-field input,
.mbpf .mbpf-field select,
.mbpf .mbpf-field textarea {
	width: 100%;
	padding: .75rem .875rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 12px;
	background: var(--mbpf-section-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--mbpf-ink);
	transition: border-color .16s ease, background .16s ease;
}

.mbpf .mbpf-field textarea {
	resize: vertical;
	min-height: 7.5rem;
}

.mbpf .mbpf-field input:focus,
.mbpf .mbpf-field select:focus,
.mbpf .mbpf-field textarea:focus {
	outline: none;
	border-color: var(--mbpf-mint);
	background: #fff;
}

.mbpf .mbpf-field input::placeholder,
.mbpf .mbpf-field textarea::placeholder {
	color: rgba(90, 122, 116, .55);
}

/* Zgoda: pole wyboru obok etykiety, nie nad nią. */
.mbpf-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: .625rem;
	margin-bottom: 1.25rem;
}

.mbpf .mbpf-field--check input {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: .125rem;
	flex: 0 0 auto;
	accent-color: var(--mbpf-green);
}

.mbpf-field--check label {
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--mbpf-muted);
}

/* Pole-pułapka na roboty: znika z układu, ale zostaje w drzewie formularza. */
.mbpf-contact__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mbpf-contact__submit {
	margin: 0;
}

.mbpf-contact__submit .mbpf-btn {
	width: 100%;
	justify-content: center;
}

.mbpf-contact__note {
	margin: .875rem 0 0;
	font-size: .9375rem;
	line-height: 1.5;
	text-align: center;
}

.mbpf-contact__note.is-ok {
	color: var(--mbpf-green);
}

.mbpf-contact__note.is-error {
	color: #c0553a;
}

.mbpf-contact__note:empty {
	margin: 0;
}

.mbpf-contact__fallback {
	margin: 1rem 0 0;
	font-size: .875rem;
	text-align: center;
	color: var(--mbpf-muted);
}

/* --------------------------------------------------------- kolumna z danymi */

.mbpf-contact__aside {
	display: grid;
	gap: .875rem;
}

.mbpf-contact__card {
	padding: 1.375rem 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 18px;
	background: #fff;
}

.mbpf-contact__card--dark {
	border-color: transparent;
	background: var(--mbpf-green);
	color: #fff;
}

.mbpf-contact__card-title {
	margin: 0 0 1.125rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.mbpf-contact__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-contact__list li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.mbpf-contact__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, .14);
	color: var(--mbpf-mint-soft);
}

/* Domyślnie etykieta leży na jasnym tle — bielą nadpisujemy ją dopiero w ciemnej
   karcie. Odwrotna kolejność (biel jako domyślna) skończyła się białym napisem na
   białym kaflu, gdy ta sama etykieta trafiła do kafli social. */
.mbpf-contact__label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-mint);
}

.mbpf-contact__card--dark .mbpf-contact__label {
	color: rgba(255, 255, 255, .6);
}

.mbpf .mbpf-contact__list a {
	color: #fff;
	text-decoration: none;
}

.mbpf .mbpf-contact__list a:hover {
	text-decoration: underline;
}

/* Adres to taka sama dana kontaktowa jak e-mail i telefon w karcie wyżej, więc
   dostaje ten sam stopień pisma — 17 px. NIP schodzi o poziom niżej, bo jest
   informacją drugorzędną i wcześniej niepotrzebnie z nim konkurował. */
.mbpf-contact__address {
	margin: .5rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--mbpf-ink);
}

.mbpf-contact__nip {
	margin: .375rem 0 0;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--mbpf-muted);
}

/* Kafle social: trzy obok siebie zamiast trzech powtarzalnych wierszy jeden pod
   drugim. Znak marki na górze, pod nim liczba obserwujących i pseudonim — kolumna
   skraca się o połowę, a zestaw czyta się jak jedna całość. */
.mbpf-contact__socials {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
}

.mbpf a.mbpf-contact__social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	padding: 1.125rem 1rem 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 18px;
	background: #fff;
	color: var(--mbpf-ink);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mbpf a.mbpf-contact__social:hover,
.mbpf a.mbpf-contact__social:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(26, 26, 26, .1);
}

/* Obramowanie na hover bierze barwę marki — stąd wiadomo, w co się klika. */
.mbpf a.mbpf-contact__social--instagram:hover,
.mbpf a.mbpf-contact__social--instagram:focus-visible {
	border-color: #e1306c;
}

.mbpf a.mbpf-contact__social--tiktok:hover,
.mbpf a.mbpf-contact__social--tiktok:focus-visible {
	border-color: #010101;
}

.mbpf a.mbpf-contact__social--facebook:hover,
.mbpf a.mbpf-contact__social--facebook:focus-visible {
	border-color: #1877f2;
}

/* [Figma] znak wypełnia kafel mniej więcej w połowie — przy 20 px w kaflu 40 px
   marki były nieczytelne. */
.mbpf-contact__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	margin-bottom: .625rem;
	border-radius: 14px;
	color: #fff;
	box-shadow: 0 8px 18px rgba(26, 26, 26, .16);
}

.mbpf-contact__social--instagram .mbpf-contact__brand {
	background: linear-gradient(135deg, #f9a03f, #e1306c 55%, #833ab4);
}

.mbpf-contact__social--tiktok .mbpf-contact__brand {
	background: #010101;
}

.mbpf-contact__social--facebook .mbpf-contact__brand {
	background: #1877f2;
}

.mbpf-contact__count {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mbpf-ink);
}

.mbpf-contact__handle {
	display: block;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--mbpf-muted);
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- oferta */

.mbpf-offer {
	padding-block: 4.5rem;
	background: var(--mbpf-green);
	color: #fff;
	text-align: center;
}

.mbpf-eyebrow--coral {
	display: inline-block;
	padding: .375rem .875rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	color: #7a3524;
	letter-spacing: .08em;
}

.mbpf-offer__title {
	margin: 1rem 0 .75rem;
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
}

.mbpf-offer__lead {
	margin: 0 auto 2.5rem;
	max-width: 54ch;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

/* Dwa kafle kursów egzaminacyjnych wg wzoru: kolorowa karta, okrągła ikona,
   nadtytuł nad dużą nazwą, lista z haczykami i okładka kursu z prawej. */
.mbpf-exams {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.mbpf-exam {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 1.5rem;
	align-items: stretch;
	padding: 2rem 1.625rem;
	border-radius: 24px;
}

.mbpf-exam--eight {
	background: #e6f3ec;
}

.mbpf-exam--matura {
	background: #fdeaea;
}

/* Krążek rośnie do 72 px, ale sam kapelusz rośnie mocniej — z 30 na 42 px, czyli
   z 47 na 58% średnicy. Wcześniej w środku zostawał szeroki pusty pierścień i ikona
   wyglądała na mniejszą, niż była. Odstęp schodzi o 2 px, żeby nazwa kursu nadal
   mieściła się w jednej linii. */
.mbpf-exam__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.mbpf-exam__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 8px 18px rgba(26, 26, 26, .16);
}

.mbpf-exam--eight .mbpf-exam__icon {
	background: var(--mbpf-green);
}

.mbpf-exam--matura .mbpf-exam__icon {
	background: #e8938a;
}

.mbpf-exam__titles {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-width: 0;
}

.mbpf-exam__kicker {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

/* Nazwa jest bohaterem kafla — stąd wersaliki i duży stopień, jak we wzorze. */
/* Górna granica zbita z 30 na 26 px: przy 72-pikselowym krążku napis „Ósmoklasisty”
   miał 227 px w gnieździe na 206 i wychodził poza kolumnę wprost pod okładkę.
   Nie zawijał się, bo element elastyczny może się przelać — dlatego samo liczenie
   linii tego nie wychwyciło. */
.mbpf-exam__name {
	font-size: clamp(1.25rem, 1rem + .95vw, 1.625rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--mbpf-ink);
}

.mbpf-exam__list {
	display: grid;
	gap: .875rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

/* Waga 500 zamiast zwykłej: na miętowym i różowym tle zwykła grubość gubiła się,
   a sam większy stopień tego nie naprawiał. */
.mbpf-exam__list li {
	display: flex;
	align-items: flex-start;
	gap: .5625rem;
	min-height: 1.375rem;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

/* Otoczka ikony nie może tworzyć własnego wiersza tekstowego — inaczej linia bazowa
   wstawionego <svg> rozpycha pozycję listy z 22 na 40 px i rytm się rozjeżdża. */
.mbpf-exam__list li > span {
	display: flex;
	flex: 0 0 auto;
	line-height: 0;
}

/* Ptaszek jako wypełniony krążek z białym znakiem. Ta sama ikona co wszędzie,
   tylko odwrócona stylem: przy 15 px obrys kółka i obrys ptaszka miały po niecałym
   pikselu i zlewały się w szarą obwódkę. */
.mbpf-exam__list svg {
	flex: 0 0 auto;
	margin-top: .125rem;
}

.mbpf-exam__list svg circle {
	fill: currentColor;
	stroke: none;
}

.mbpf-exam__list svg path {
	stroke: #fff;
	stroke-width: 2.6;
}

.mbpf-exam--eight .mbpf-exam__list svg {
	color: var(--mbpf-green);
}

.mbpf-exam--matura .mbpf-exam__list svg {
	color: #d4715a;
}

/* Treść w kolumnie, lista rozpycha się do pełnej wysokości — dzięki temu stopka
   z ceną i przyciskiem siedzi w obu kartach na tej samej wysokości, niezależnie od
   tego, ile linii zajmą punkty. */
.mbpf-exam__body {
	display: flex;
	flex-direction: column;
}

.mbpf-exam__list {
	flex: 1 1 auto;
}

/* Biała stopka grupuje cenę z przyciskiem i domyka kartę — ten sam motyw co
   biała ramka okładki obok. */
.mbpf-exam__foot {
	margin-top: auto;
	padding: 1.125rem 1.25rem 1.25rem;
	border-radius: 18px;
	background: rgba(255, 255, 255, .78);
}

.mbpf-exam__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .5rem .625rem;
	margin: 0;
}

/* Najpierw kwota do zapłaty, dopiero za nią odniesienie i wielkość obniżki. */
.mbpf-exam__now {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--mbpf-ink);
}

.mbpf-exam__was {
	font-size: .9375rem;
	color: var(--mbpf-muted);
	text-decoration: line-through;
}

/* Plakietka z obniżką ma przyciągać wzrok, więc idzie w górę o kilka stopni
   i dostaje cień, żeby odkleiła się od białej stopki. */
.mbpf-exam__off {
	align-self: center;
	padding: .3125rem .6875rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
	box-shadow: 0 4px 10px rgba(26, 26, 26, .18);
}

.mbpf-exam--eight .mbpf-exam__off {
	background: var(--mbpf-green);
}

.mbpf-exam--matura .mbpf-exam__off {
	background: #d4715a;
}

/* Kwota oszczędności to drugi najmocniejszy argument po samej cenie, więc stoi
   między nią a przekreśloną ceną odniesienia: większa i cięższa niż one. */
.mbpf-exam__save {
	margin: .5rem 0 1.125rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.mbpf-exam--eight .mbpf-exam__save {
	color: var(--mbpf-green);
}

.mbpf-exam--matura .mbpf-exam__save {
	color: #c0553a;
}

.mbpf-exam__actions {
	margin: 0;
}

/* Przycisk musi zmieścić się w jednej linii w obu kartach — inaczej dłuższy napis
   („Zobacz kurs ósmoklasisty”) zawija się, stopka rośnie o wiersz i ceny w obu
   kartach przestają stać na jednej wysokości. */
.mbpf-exam__actions .mbpf-btn {
	width: 100%;
	justify-content: center;
	padding-inline: 1rem;
	font-size: .9375rem;
	white-space: nowrap;
}

.mbpf a.mbpf-exam__btn {
	color: #fff;
	border-color: transparent;
}

.mbpf-exam--eight a.mbpf-exam__btn {
	background: var(--mbpf-green);
}

.mbpf-exam--matura a.mbpf-exam__btn {
	background: #e8938a;
}

.mbpf a.mbpf-exam__btn:hover,
.mbpf a.mbpf-exam__btn:focus-visible {
	filter: brightness(.94);
}

/* Okładka kursu rysowana kodem — pionowa „książka” z tytułem i podpisem, jak we
   wzorze. Grzbiet to gradient przy lewej krawędzi, głębi dodaje przechył i cień. */
.mbpf-exam__book {
	position: relative;
	align-self: end;
	justify-self: center;
	display: flex;
	flex-direction: column;
	gap: .875rem;
	width: 100%;
	max-width: 230px;
	/* [wzór] książka jest smuklejsza niż 3:4 — na zdjęciu ma 155 × 225 px. */
	aspect-ratio: 7 / 10;
	padding: 1.875rem 1.5rem 1.625rem;
	border-radius: 5px 16px 16px 5px;
	box-shadow:
		0 22px 40px rgba(26, 26, 26, .3),
		inset -1px -1px 0 rgba(255, 255, 255, .5);
}

.mbpf-exam--eight .mbpf-exam__book {
	background: linear-gradient(155deg, #dff0e5, #f1f9f4);
}

.mbpf-exam--matura .mbpf-exam__book {
	background: linear-gradient(155deg, #fbd8d8, #fdeced);
}

/* Grzbiet książki. */
.mbpf-exam__book::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 11px;
	border-radius: 5px 0 0 5px;
	background: linear-gradient(90deg, rgba(26, 26, 26, .18), rgba(26, 26, 26, .02));
}

.mbpf-exam__book-title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.mbpf-exam--eight .mbpf-exam__book-title {
	color: var(--mbpf-green);
}

.mbpf-exam--matura .mbpf-exam__book-title {
	color: #b4573f;
}

.mbpf-exam__book-rule {
	display: block;
	width: 2.25rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: .35;
}

.mbpf-exam--eight .mbpf-exam__book-rule {
	color: var(--mbpf-green);
}

.mbpf-exam--matura .mbpf-exam__book-rule {
	color: #b4573f;
}

/* Podpis odręcznym pismem — tak samo jak na prawdziwych miniaturach kursów. */
.mbpf-exam__book-sign {
	margin-top: auto;
	font-family: Caveat, "Segoe Script", cursive;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mbpf-muted);
}


/* ------------------------------------------------------- pytania o kontakt */

.mbpf-cfaq {
	padding-block: 4.5rem;
	background: #fff;
	text-align: center;
}

.mbpf-cfaq__list {
	display: grid;
	gap: .75rem;
	max-width: 760px;
	margin: 2rem auto 0;
	text-align: left;
}

.mbpf-cfaq__item {
	border: 1px solid var(--mbpf-card-line);
	border-radius: 14px;
	background: var(--mbpf-section-bg);
}

.mbpf-cfaq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mbpf-ink);
	cursor: pointer;
	list-style: none;
}

.mbpf-cfaq__item summary::-webkit-details-marker {
	display: none;
}

.mbpf-cfaq__mark {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--mbpf-mint);
	transition: transform .18s ease;
}

.mbpf-cfaq__item[open] .mbpf-cfaq__mark {
	transform: rotate(180deg);
}

.mbpf-cfaq__item p {
	margin: 0;
	padding: 0 1.25rem 1.25rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mbpf-muted);
}

/* ------------------------------------------- kreator „Rozpocznij naukę” */

/* Cała ścieżka wyboru stoi na białym tle — tak jak na makiecie klienta. */
.mbpf-wizard {
	padding-block: 5.5rem;
	background: var(--mbpf-white);
	color: var(--mbpf-ink);
	text-align: center;
}

/* Wielki nagłówek — to on otwiera całą ścieżkę zakupu. */
.mbpf-wizard__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--mbpf-ink);
}

.mbpf-wizard__title:focus-visible {
	outline: 2px solid var(--mbpf-green);
	outline-offset: 6px;
	border-radius: 6px;
}

.mbpf-wizard__lead {
	margin: 0 auto 2.75rem;
	max-width: 52ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: rgba(26, 26, 26, .68);
}

.mbpf-wizard__title-line {
	display: block;
}

/* ------------------------------------------------------- krok 1: klasy */

/* Trzy karty w rzędzie zamiast sześciu: przy sześciu wychodziło po 206 px, czyli
   za mało na pierwszy krok ścieżki zakupu. Siatka ma własną, węższą szerokość, żeby
   karty nie rozlały się na całe 1320 px. */
.mbpf-wizard__classes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 1040px;
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.mbpf-wizard__classes > li {
	display: flex;
}

.mbpf a.mbpf-wizard__class {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	/* Zero wyściółki: miniatura ma dochodzić do krawędzi, a zaokrąglenie karty
	   przycina jej górne rogi. Odstępami zarządza otoczka treści niżej. */
	padding: 0;
	overflow: hidden;
	/* Obwódka jako cień wewnętrzny, nie `border` — obramowanie zabierało miniaturze
	   dwa piksele szerokości, a cień rysuje się na treści i nie zwęża jej. */
	border-radius: 22px;
	box-shadow: inset 0 0 0 1px var(--mbpf-card-line);
	background: var(--mbpf-white);
	color: var(--mbpf-ink);
	text-align: center;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mbpf a.mbpf-wizard__class:hover,
.mbpf a.mbpf-wizard__class:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px var(--mbpf-mint),
		0 20px 38px rgba(26, 26, 26, .14);
}

.mbpf-wizard__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--mbpf-green-06);
}

.mbpf-wizard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Klasa bez grafiki kategorii dostaje samą cyfrę — lepsze niż pusty prostokąt. */
.mbpf-wizard__number {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-wizard__class-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3125rem;
	padding: 1.25rem;
}

.mbpf-wizard__class-name {
	/* Węższa karta w karuzeli dostaje mniejszy stopień, żeby „Klasa maturalna”
	   nie łamała się bez potrzeby. */
	font-size: clamp(1.375rem, 1.2rem + .5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
}

/*
 * Plakietka na miniaturze i zdanie pod liczbą działów: w kroku pierwszym uczeń ma
 * wiedzieć, że przy klasie 8 i maturze czeka na niego nie tylko pakiet, ale i kurs
 * pod egzamin — inaczej dowiadywał się o tym dopiero po kliknięciu.
 */
.mbpf-wizard__class-flag {
	position: absolute;
	left: .625rem;
	bottom: .625rem;
	padding: .3125rem .625rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	color: #7a3524;
	box-shadow: 0 6px 14px rgba(26, 26, 26, .18);
}

.mbpf-wizard__class-what {
	margin-top: .125rem;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--mbpf-green);
}

.mbpf-wizard__class-meta {
	font-size: 1.0625rem;
	color: var(--mbpf-muted);
}

/* Prawdziwy przycisk, nie sama podpowiedź. Własna klasa zamiast wariantu
   `.mbpf-btn--white`, bo tamten jest opisany selektorem `a.mbpf-btn--white`,
   a tutaj CTA jest <span>-em wewnątrz <a> i reguła by nie zadziałała. */
.mbpf-wizard__class-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4375rem;
	width: 100%;
	margin-top: .625rem;
	padding: .8125rem 1.25rem;
	border-radius: 999px;
	background: var(--mbpf-green);
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
	transition: background .18s ease;
}

.mbpf a.mbpf-wizard__class:hover .mbpf-wizard__class-cta,
.mbpf a.mbpf-wizard__class:focus-visible .mbpf-wizard__class-cta {
	background: #2f4b45;
}

.mbpf a.mbpf-wizard__class:hover .mbpf-btn__arrow,
.mbpf a.mbpf-wizard__class:focus-visible .mbpf-btn__arrow {
	transform: translateX(3px);
}

/* --------------------------------------------- okruszki i powrót o krok */

/*
 * Pasek z wybraną klasą klei się pod headerem przez cały krok drugi — jest jego
 * dzieckiem, więc odjeżdża sam, gdy krok się kończy. Szerokość liczona z `100vw`
 * minus pasek przewijania (zmienną ustawia skrypt), inaczej dokładałby poziome
 * przewijanie. `position: sticky` działa, bo żaden przodek nie ma `overflow: hidden`.
 */
.mbpf-wizard__bar {
	position: sticky;
	top: calc(var(--mbpf-header-h) + var(--mbpf-adminbar));
	z-index: 90;
	width: calc(100vw - var(--mbpf-scrollbar, 0px));
	margin-inline: calc(50% - 50vw + var(--mbpf-scrollbar, 0px) / 2);
	margin-bottom: 1.5rem;
	padding-block: .625rem;
	transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
	border-bottom: 1px solid transparent;
}

/* Tło i cień dopiero po przyklejeniu — w spoczynku pasek ma wyglądać jak zwykły wiersz. */
.mbpf-wizard__bar.is-stuck {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	border-bottom-color: var(--mbpf-line);
	box-shadow: 0 6px 20px rgba(26, 26, 26, .06);
}

.mbpf-wizard__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .75rem 1rem;
}

.mbpf-wizard__bar-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .625rem;
}

/* Jedyna akcja prowadząca dalej w ofertę — dlatego jako pełny przycisk. */
.mbpf .mbpf-wizard__bar-cta {
	padding: .625rem 1.25rem;
	background: var(--mbpf-green);
	border-color: var(--mbpf-green);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.mbpf .mbpf-wizard__bar-cta:hover,
.mbpf .mbpf-wizard__bar-cta:focus-visible {
	background: #2f4b45;
	border-color: #2f4b45;
}

/* Cel skoków z paska nie może chować się pod headerem i pod samym paskiem. */
.mbpf-pack,
.mbpf-singles {
	scroll-margin-top: calc(var(--mbpf-header-h) + var(--mbpf-adminbar) + 5rem);
}

/* Powrót o krok i plakietka wyboru są dla kogoś, kto pomylił klasę — mają być
   widoczne od pierwszego spojrzenia, stąd rozmiar bliższy przyciskom niż podpisom. */
.mbpf .mbpf-wizard__back {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	/* O 2 px niższa wyściółka niż w plakietce obok: przycisk ma obramowanie
	   i strzałkę, więc przy tej samej wartości był o 4 px wyższy. */
	padding: .625rem 1.375rem;
	border: 1px solid var(--mbpf-line);
	border-radius: 999px;
	background: transparent;
	font-size: 1.0625rem;
	font-weight: 600;
	/* Ta sama interlinia co w plakietce obok — inaczej pigułki różnią się o 5 px. */
	line-height: 1.25;
	color: var(--mbpf-green);
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}

/* Strzałka wielkości tekstu — przy 20 px pigułka rosła o 2 px ponad plakietkę obok. */
.mbpf .mbpf-wizard__back span[aria-hidden] {
	font-size: 1.125rem;
	line-height: 1.25;
}

.mbpf .mbpf-wizard__back:hover,
.mbpf .mbpf-wizard__back:focus-visible {
	background: var(--mbpf-green-06);
	border-color: var(--mbpf-mint);
	color: var(--mbpf-green);
}

.mbpf-wizard__chip {
	display: inline-flex;
	align-items: baseline;
	gap: .4375rem;
	padding: .75rem 1.375rem;
	border-radius: 999px;
	background: var(--mbpf-mint-soft);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--mbpf-green);
}

/* Podpis lżejszy od samej nazwy klasy — to nazwa ma być tym, co widać. */
.mbpf-wizard__chip-label {
	font-weight: 600;
	color: rgba(59, 93, 86, .72);
}

.mbpf-wizard__chip strong {
	font-weight: 800;
}

/* ------------------------------- krok 2: pakiet całoroczny i pojedyncze działy */

/*
 * Układ z makiety klienta: jasny panel z powitaniem i kartą pakietu, po prawej
 * wycięte zdjęcie Franka wskazującego na kartę, a pod panelem osobna, biała
 * sekcja z wszystkimi działami. Sekcja kreatora ma ciemnozielone tło, więc oba
 * panele są jasne i wybijają się z niego.
 */
.mbpf-pick {
	text-align: left;
}

/*
 * Kafel oferty siedzi w kontenerze — jasna mięta z cienką obwódką na białym tle
 * sekcji. Karta pakietu zajmuje całą jego szerokość; zdjęcia Franka tu nie ma,
 * bo zabierało jej trzecią część miejsca.
 */
.mbpf-pick__panel {
	position: relative;
	padding: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 28px;
	background: linear-gradient(180deg, #f7fcf9, #eef7f1);
	overflow: hidden;
}

/*
 * Powitanie stoi na środku kolumny z treścią, czyli dokładnie nad kartą pakietu.
 * Wyśrodkowanie względem całego panelu odsunęłoby je w prawo, pod zdjęcie Franka —
 * zdjęcie zajmuje drugą kolumnę na całą wysokość.
 */
.mbpf-pick__intro {
	margin-bottom: 1.5rem;
	text-align: center;
}

/* Powitanie jest wewnątrz jasnego panelu, więc wraca do ciemnego atramentu. */
.mbpf-pick__title {
	margin: 0 0 .375rem;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
	color: var(--mbpf-ink);
}

.mbpf-pick__wave {
	display: inline-block;
	margin-left: .25rem;
}

.mbpf-pick__lead {
	margin: 0;
	font-size: 1.0625rem;
	color: rgba(26, 26, 26, .68);
}

/* ---------------------------------------- karta pakietu całorocznego */

.mbpf-pack {
	position: relative;
	grid-column: 1;
	display: grid;
	/* Szersze pudełko i szersza kolumna z ceną — przy 220/320 między punktami
	   a ceną zostawało dwieście pikseli pustego miejsca. */
	grid-template-columns: 280px minmax(0, 1fr) minmax(0, 360px);
	gap: 2rem;
	align-items: center;
	padding: 1.75rem;
	border-radius: 22px;
	border: 1px solid var(--mbpf-card-line);
	background: var(--mbpf-white);
	box-shadow: 0 14px 34px rgba(26, 26, 26, .07);
}

/* Druga karta w kroku 2 (kurs pod egzamin) — ma być równorzędna, nie doklejona. */
.mbpf-pack--exam {
	margin-top: 2rem;
}

/* Ta sama wstążka, inny kolor: to nie „najlepszy wybór”, tylko inna droga. */
.mbpf-pack__ribbon--exam {
	background: var(--mbpf-mint-soft);
	color: var(--mbpf-green);
}

/* Wstążka wychodzi za krawędź karty, tak jak w makiecie. */
.mbpf-pack__ribbon {
	position: absolute;
	top: -.75rem;
	left: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	padding: .375rem .875rem;
	border-radius: 999px;
	background: var(--mbpf-green);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.mbpf-pack__ribbon span {
	color: var(--mbpf-gold);
}

.mbpf-pack__cover {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mbpf .mbpf-pack__box {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	/* Pudełko jest wycięte, więc cień musi iść za jego kształtem, nie za prostokątem. */
	filter: drop-shadow(0 14px 22px rgba(26, 26, 26, .18));
}

.mbpf-pack__name {
	margin: 0 0 .375rem;
	font-size: clamp(1.625rem, 1.3rem + .9vw, 2rem);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--mbpf-ink);
}

.mbpf-pack__note {
	margin: 0 0 1.125rem;
	font-size: 1.0625rem;
	color: rgba(26, 26, 26, .62);
}

.mbpf-pack__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .625rem;
}

.mbpf-pack__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .625rem;
	align-items: center;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--mbpf-ink);
}

/* line-height: 0 — bez tego pole wiersza ikony rozpycha punkty listy. */
.mbpf-pack__list li > span {
	display: flex;
	line-height: 0;
}

.mbpf-pack__list svg circle {
	fill: var(--mbpf-green);
	stroke: var(--mbpf-green);
}

.mbpf-pack__list svg path {
	stroke: #fff;
	stroke-width: 2.4;
}

.mbpf .mbpf-pack__actions a.mbpf-btn {
	padding: .9375rem 1.25rem;
	border-radius: var(--mbpf-radius);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Cena stoi w osobnym, różowawym kafelku — to on ma przyciągać wzrok. */
.mbpf-pack__price {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25rem;
	padding: 1.125rem 1rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 180, 166, .55);
	background: #fff7f5;
	text-align: center;
}

.mbpf-pack__flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3125rem;
	margin: 0 0 .375rem;
	font-size: .875rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #b4553f;
}

.mbpf-pack__now {
	margin: 0;
	font-size: clamp(2.25rem, 1.6rem + 1.4vw, 2.875rem);
	font-weight: 800;
	line-height: 1;
	color: var(--mbpf-green);
}

.mbpf-pack__per {
	margin: 0 0 .375rem;
	font-size: .8125rem;
	color: rgba(26, 26, 26, .6);
}

/* Blok korzyści: porównanie z zakupem osobno, cena jednego działu i próg,
   po którym kupowanie pojedynczo przestaje się opłacać. */
/* Przeliczenie na miesiąc nauki — druga kotwica ceny, ale wyraźnie lżejsza od kwoty. */
.mbpf-pack__month {
	margin: .25rem 0 0;
	font-size: 1rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

.mbpf-pack__gain {
	display: grid;
	justify-items: center;
	gap: .375rem;
	width: 100%;
	margin-top: .5rem;
	padding-top: .75rem;
	border-top: 1px solid rgba(255, 180, 166, .5);
}

.mbpf-pack__compare {
	margin: 0;
	font-size: .9375rem;
	color: rgba(26, 26, 26, .55);
}

.mbpf-pack__compare s {
	color: rgba(26, 26, 26, .45);
}

/* Oszczędność to główny argument tej kolumny — ma być pierwszą rzeczą, którą widać
   po samej cenie, stąd stopień pisma bliższy nagłówkowi niż podpisowi. */
.mbpf-pack__save {
	margin: .125rem 0;
	padding: .4375rem 1.125rem;
	border-radius: 999px;
	background: rgba(59, 93, 86, .12);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--mbpf-green);
}

.mbpf-pack__unit {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

/* Najmocniejszy argument w kafelku — dlatego jako jedyny w kolorze koralowym. */
.mbpf-pack__break {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: #b4553f;
}

.mbpf-pack__actions {
	width: 100%;
	margin: 1rem 0 0;
}

.mbpf .mbpf-pack__actions a.mbpf-btn {
	width: 100%;
}

/* Prawdziwe pudełko kursu w kafelku egzaminacyjnym na Kontakcie. */
.mbpf-exam__box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mbpf .mbpf-exam__box-img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	filter: drop-shadow(0 16px 26px rgba(26, 26, 26, .2));
}

/* ------------------------------------------- pojedyncze działy pod pakietem */

.mbpf-singles {
	margin-top: 1.25rem;
	padding: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 28px;
	/* Lekko miętowe tło, żeby białe karty działów miały się od czego odciąć. */
	background: var(--mbpf-section-bg);
	text-align: center;
}

/* Różowa pigułka jak nadtytuły na Kontakcie — kolor i tło daje `.mbpf-eyebrow--coral`. */
.mbpf-singles__eyebrow {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mbpf-singles__title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--mbpf-ink);
}

/* Cztery karty w rzędzie na komputerze, jedna na telefonie — punkty „czego się
   nauczysz” potrzebują szerokości, przy dwóch kolumnach na 390 px byłyby nieczytelne. */
.mbpf-singles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.mbpf-singles__grid > li {
	display: flex;
}

/* Wyściółkę przejmuje otoczka treści, dzięki czemu okładka dochodzi do krawędzi
   karty — ten sam zabieg co w kafelkach klas w kroku 1. */
.mbpf a.mbpf-single {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 20px;
	background: var(--mbpf-white);
	color: var(--mbpf-ink);
	text-decoration: none;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.mbpf a.mbpf-single:hover,
.mbpf a.mbpf-single:focus-visible {
	border-color: var(--mbpf-mint);
	box-shadow: 0 14px 30px rgba(26, 26, 26, .12);
	transform: translateY(-2px);
}

.mbpf-single__cover {
	position: relative;
	display: block;
	width: 100%;
}

/* Plakietka obniżki w rogu okładki — ten sam sygnał co w katalogu kursów. */
.mbpf-single__sale {
	position: absolute;
	top: .75rem;
	right: .75rem;
	z-index: 1;
	padding: .4375rem .9375rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.01em;
	color: #7a3524;
	box-shadow: 0 8px 18px rgba(26, 26, 26, .22);
}

/*
 * Okładka zachowuje własne proporcje. Miniaturki klas 5–8 i matury są w formacie
 * 16:9 z nazwą działu wpisaną w grafikę — przycięcie ich do kwadratu ucinało napis.
 * Grafiki klasy 4 są kwadratowe, więc w obrębie jednej klasy wszystkie karty i tak
 * mają okładki tej samej wysokości.
 */
.mbpf-single__cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* Zapas, gdy dział nie ma jeszcze żadnej okładki — numer na miętowym tle. */
.mbpf-single__num {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--mbpf-green-06);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

.mbpf-single__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem 1rem 1.125rem;
}

/* Numer działu nad tytułem — tylko tam, gdzie nie ma go wydrukowanego na okładce. */
.mbpf-single__kicker {
	text-align: center;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

/*
 * Nazwa działu przy własnej okładce: na komputerze tytuł jest wydrukowany na grafice,
 * więc zostaje tylko dla czytników ekranu. Na telefonie miniatura ma 120 px i napisu
 * nie da się przeczytać — blok telefonowy niżej przywraca nazwę do układu.
 */
.mbpf-single__name--cover {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.mbpf-single__name {
	text-align: center;
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--mbpf-ink);
}

/*
 * „Czego się nauczysz” dostaje własny, miętowy kafelek wewnątrz karty — to jest
 * powód, dla którego ktoś kupuje akurat ten dział, więc nie może wyglądać jak
 * drobny podpis pod tytułem.
 */
.mbpf-single__learn {
	display: grid;
	gap: .5rem;
	margin-top: .125rem;
	padding: .75rem .875rem;
	border-radius: 14px;
	background: var(--mbpf-green-06);
}

.mbpf-single__label {
	text-align: center;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-single__points {
	display: grid;
	gap: .4375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-single__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(26, 26, 26, .88);
	/* Dwa wiersze na punkt — dłuższe zdania z opisu nie mogą rozpychać karty. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* line-height: 0 na otoczce ikony — inaczej jej pole wiersza rozsuwa punkty. */
.mbpf-single__points li > span {
	display: inline-flex;
	line-height: 0;
	margin-right: .25rem;
	transform: translateY(.1875rem);
}

.mbpf-single__points svg circle {
	fill: var(--mbpf-green);
	stroke: var(--mbpf-green);
}

.mbpf-single__points svg path {
	stroke: #fff;
	stroke-width: 2.6;
}

/* Wariant dla opisów bez listy — akapit zamiast samotnego ptaszka. */
.mbpf-single__summary {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.45;
	color: rgba(26, 26, 26, .88);
}

/* margin-top: auto — działy mają różną liczbę punktów, a cena i przycisk mają
   stać w jednej linii we wszystkich kartach rzędu. */
.mbpf-single__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-top: auto;
	padding-top: .625rem;
	border-top: 1px solid var(--mbpf-card-line);
}

.mbpf-single__meta {
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-single__price {
	display: inline-flex;
	align-items: baseline;
	gap: .375rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

/* Cena sprzed obniżki większa razem z plakietką — to część tej samej informacji. */
.mbpf-single__price del {
	font-size: .9375rem;
	font-weight: 600;
	color: rgba(26, 26, 26, .45);
}

.mbpf-single__price ins {
	text-decoration: none;
	color: inherit;
}

.mbpf-single__free {
	color: var(--mbpf-green);
}

.mbpf-single__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .375rem;
	padding: .625rem 1rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--mbpf-green);
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

/* Przycisk rozwijający listę — pokazuje go dopiero skrypt na telefonie. */
.mbpf button.mbpf-singles__more {
	width: 100%;
	max-width: 320px;
	margin: 1.25rem auto 0;
	padding: .875rem 1.25rem;
	border-color: var(--mbpf-green);
	background: transparent;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-wizard__bar-short {
	display: none;
}

.mbpf a.mbpf-single:hover .mbpf-single__cta,
.mbpf a.mbpf-single:focus-visible .mbpf-single__cta {
	background: var(--mbpf-green);
	border-color: var(--mbpf-green);
	color: #fff;
}

/* --------------------------------------------- dodatkowo w ofercie (sklep) */

.mbpf-extras {
	padding-block: 3.5rem;
	background: var(--mbpf-section-bg);
	text-align: center;
}

.mbpf-extras__eyebrow {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mbpf-extras__title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
	font-weight: 800;
	color: var(--mbpf-ink);
}

/* Przy jednej czy dwóch pozycjach siatka nie ma się rozciągać na całą szerokość. */
.mbpf-extras__grid {
	max-width: 900px;
	margin-inline: auto;
}

/* ------------------------------------------------------- karta produktu */

.mbpf-buy {
	padding-block: 2.5rem 4rem;
	background: var(--mbpf-white);
}

.mbpf-buy__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4375rem;
	margin-bottom: 1.75rem;
	font-size: .875rem;
	color: var(--mbpf-muted);
}

.mbpf-buy__crumbs a {
	color: var(--mbpf-green);
	text-decoration: none;
}

.mbpf-buy__crumbs a:hover {
	text-decoration: underline;
}

.mbpf-buy__grid {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	align-items: start;
	gap: 3rem;
}

.mbpf-buy__figure {
	position: relative;
	padding: 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 24px;
	background: var(--mbpf-section-bg);
}

.mbpf .mbpf-buy__cover {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* Plakietka obniżki w rogu okładki — ten sam sygnał co w kartach działów. */
.mbpf-buy__sale {
	position: absolute;
	top: 1.75rem;
	right: 1.75rem;
	padding: .4375rem .9375rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1;
	color: #7a3524;
	box-shadow: 0 8px 18px rgba(26, 26, 26, .22);
}

.mbpf-buy__kicker {
	margin: 0 0 .375rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-buy__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-buy__lead {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba(26, 26, 26, .72);
}

/* Pasek faktów pod tytułem — cztery konkrety zamiast akapitu obietnic. */
.mbpf-buy__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.mbpf-buy__facts li {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	padding: .5rem .875rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	background: var(--mbpf-section-bg);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-ink);
}

.mbpf-buy__facts li > span {
	display: flex;
	line-height: 0;
	color: var(--mbpf-green);
}

/* Dwie ścieżki zakupu obok siebie: „kupujesz raz” i abonament. */
.mbpf-buy__box {
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-section-bg);
	box-shadow: var(--mbpf-shadow);
}

/* Pytanie nad kartami — bez niego dwie ceny obok siebie czytało się jak jedna oferta. */
.mbpf-buy__choose {
	margin: 0;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-buy__opts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 1rem;
}

/* Bez planu miesięcznego zostaje jedna kolumna — nie rozciągamy jej na siłę. */
.mbpf-buy__opts:not(:has(.mbpf-buy__opt--sub)) {
	grid-template-columns: minmax(0, 1fr);
}

.mbpf-buy__opt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem 1.25rem 1.25rem;
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
}

/* Wyróżniona ścieżka dostaje mocniejszą obwódkę — jedna na stronie, nigdy obie. */
.mbpf-buy__opt.is-best {
	border-color: var(--mbpf-green);
	box-shadow: 0 0 0 1px var(--mbpf-green);
}

.mbpf-buy__opt--sub.is-best {
	border-color: var(--mbpf-warm);
	box-shadow: 0 0 0 1px var(--mbpf-warm);
}

.mbpf-buy__ribbon {
	position: absolute;
	top: -.75rem;
	left: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	padding: .25rem .75rem;
	border-radius: 999px;
	background: var(--mbpf-green);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--mbpf-white);
}

.mbpf-buy__ribbon > span {
	display: flex;
	line-height: 0;
	color: var(--mbpf-gold);
}

.mbpf-buy__ribbon--sub {
	background: var(--mbpf-warm);
}

.mbpf-buy__opt-head {
	display: flex;
	align-items: center;
	gap: .875rem;
}

.mbpf-buy__opt-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-green-06);
	line-height: 0;
	color: var(--mbpf-green);
}

.mbpf-buy__opt--sub .mbpf-buy__opt-icon {
	background: var(--mbpf-warm-soft);
	color: var(--mbpf-warm);
}

/* Nazwa planu jest tym, czego brakowało: cena bez niej nie mówiła, na jak długo. */
.mbpf-buy__plan {
	margin: .25rem 0 0;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-buy__opt--sub .mbpf-buy__plan,
.mbpf-buy__opt--sub .mbpf-buy__amount {
	color: var(--mbpf-warm);
}

/* Obie listy mają tyle samo punktów i tę samą pierwszą pozycję — czyta się je wierszami. */
.mbpf-buy__perks {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-buy__perks li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(26, 26, 26, .82);
}

.mbpf-buy__perks li > span {
	display: flex;
	line-height: 0;
	margin-top: .125rem;
	color: var(--mbpf-green);
}

.mbpf-buy__opt--sub .mbpf-buy__perks li > span {
	color: var(--mbpf-warm);
}

.mbpf-buy__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	margin: 0;
	font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--mbpf-green);
}

.mbpf-buy__amount s {
	font-size: 1.0625rem;
	font-weight: 600;
	color: rgba(26, 26, 26, .42);
}

.mbpf-buy__period {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--mbpf-muted);
}

/* Informacja o promocji i wymagana prawem najniższa cena z 30 dni. */
.mbpf-buy__promo {
	align-self: start;
	margin: 0;
	padding: .25rem .625rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7a3524;
}

.mbpf-buy__omnibus {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--mbpf-muted);
}

/* Jedna linijka na opis — dwie ścieżki zakupu mają się porównywać jednym rzutem oka. */
.mbpf-buy__note {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(26, 26, 26, .68);
	text-wrap: balance;
}

/* Przycisk zawsze przy dolnej krawędzi karty, żeby obie ścieżki kończyły się równo. */
.mbpf .mbpf-buy__cta {
	width: 100%;
	margin-top: auto;
	padding-inline: 1.25rem;
	text-align: center;
}

/* Trzecia ścieżka dla niezdecydowanych — pod obiema kartami, na całą szerokość. */
.mbpf .mbpf-buy__free {
	grid-column: 1 / -1;
	justify-content: center;
	width: 100%;
	text-align: center;
}

/* Kółko „lub” siedzi w szczelinie między kartami i mówi wprost: wybierasz jedno z dwóch. */
.mbpf-buy__or {
	align-self: center;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--mbpf-line);
	border-radius: 999px;
	background: var(--mbpf-white);
	font-size: .8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--mbpf-muted);
}

/*
 * Formularz jest oryginalny, WooCommerce'owy — ze skryptem chowa go `hidden`,
 * bez skryptu zostaje jedyną drogą zakupu. Świadomie NIE dotykamy układu
 * abonamentów (`.wcsatt-*`) ani pakietów (`.woosb-*`): wtyczki mają własne arkusze,
 * a nasze `display: grid/flex` na ich listach ściskało etykiety do 34 px szerokości.
 */
.mbpf-buy__form {
	margin-top: 1.5rem;
}

.mbpf-buy__form .quantity {
	display: none;
}

.mbpf-buy__form .wcsatt-options-wrapper {
	margin-bottom: 1.25rem;
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--mbpf-ink);
}

.mbpf-buy__form .wcsatt-options-wrapper .wcsatt-options-prompt-label,
.mbpf-buy__form .wcsatt-options-wrapper label {
	font-weight: 600;
}

.mbpf-buy__form .woosb-products {
	margin-bottom: 1.25rem;
	font-size: .9375rem;
}

/* Główny przycisk zakupu — ten sam kształt co CTA na stronie głównej. */
.mbpf .mbpf-buy__form button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	max-width: 420px;
	padding: 1.0625rem 2rem;
	border: 0;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-green);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.mbpf .mbpf-buy__form button.single_add_to_cart_button:hover,
.mbpf .mbpf-buy__form button.single_add_to_cart_button:focus-visible {
	background: #2f4b45;
	transform: translateY(-1px);
}

.mbpf-buy__trust {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem 1.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.mbpf-buy__trust li {
	display: inline-flex;
	gap: .5rem;
	align-items: center;
	font-size: .9375rem;
	font-weight: 600;
	color: rgba(26, 26, 26, .78);
}

/*
 * Znak w miętowym kółku, a nie samotna kreska obok tekstu: wcześniej cienki obrys
 * przy plakietce bramki wyglądał jak dwa różne języki na jednej linijce.
 */
.mbpf-buy__trust li > span {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	border-radius: 50%;
	background: var(--mbpf-mint-soft);
	color: var(--mbpf-green);
	line-height: 0;
}

.mbpf-buy__trust svg {
	stroke-width: 1.8;
}

/*
 * Logotyp Przelewy24 jako plakietka płatności: własne białe tło z obwódką, bo plik
 * jest przezroczysty i na miętowym tle karty gubił kontrast. Wyświetlany mniejszy,
 * niż jest w źródle (110×37), więc zostaje ostry na gęstych ekranach.
 */
.mbpf img.mbpf-p24 {
	display: block;
	height: 18px;
	width: auto;
	padding: .25rem .4375rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 6px;
	background: var(--mbpf-white);
	box-sizing: content-box;
}

.mbpf-buy__owned {
	display: grid;
	gap: .875rem;
	justify-items: start;
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-section-bg);
}

.mbpf-buy__owned-note {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

/* Pasek z ceną pokazuje się dopiero na telefonie — reguły niżej, w medium. */
.mbpf-buy__bar {
	display: none;
}

/* --- czego się nauczysz, co dostajesz, program --- */

.mbpf-plearn {
	padding-block: 3.5rem;
	background: var(--mbpf-section-bg);
}

/*
 * „Czego się nauczysz” i „Program działu” stoją obok siebie, a karta „co dostajesz”
 * trzyma prawą szynę.
 *
 * Wcześniej były to dwa osobne rzędy jeden pod drugim. Program zostawał wtedy sam
 * w rzędzie (kafelek lekcji pokazowej znika, gdy strona ma prawdziwy odtwarzacz),
 * rozciągał się na całe 1256 px i dziewięć pozycji ciągnęło się przez pustą stronę.
 * W jednej siatce sekcja jest o kilkaset pikseli krótsza, a obie listy czyta się obok
 * siebie. Liczbę kolumn treści podaje szablon klasą `--c0/--c1/--c2`.
 */
/*
 * Dwie kolumny treści: „Czego się nauczysz” i „Program działu”. Prawa szyna z kartą
 * korzyści odeszła do hero, więc siatka ma już tylko to, co czyta się wierszami.
 */
.mbpf-plearn__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 2.5rem 2rem;
}

/*
 * Jedna kolumna treści (działy matury nie mają jeszcze opisów). Bez ograniczenia
 * program rozciągnąłby się na 1256 px i dziewięć krótkich wierszy ciągnęłoby się
 * przez pustą stronę — dokładnie to, co poprawialiśmy rano.
 */
.mbpf-plearn__grid--c1 {
	grid-template-columns: minmax(0, 820px);
	justify-content: center;
}

/* Kafelek lekcji pokazowej należy do prawej szyny, pod kartę „co dostajesz”. */
.mbpf-plearn__grid .mbpf-pdemo {
	grid-column: -2;
}

.mbpf-plearn__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-plearn__program + .mbpf-plearn__title {
	margin-top: 2.5rem;
}

.mbpf-plearn__points {
	display: grid;
	gap: .875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-plearn__points li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	align-items: start;
	padding: 1rem 1.125rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--mbpf-ink);
}

.mbpf-plearn__points li > span {
	display: flex;
	line-height: 0;
	color: var(--mbpf-green);
}

.mbpf-plearn__points svg circle {
	fill: var(--mbpf-mint-soft);
	stroke: none;
}

.mbpf-plearn__points svg path {
	stroke: var(--mbpf-green);
}

.mbpf-plearn__program {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mbpf-plearn__program li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .875rem;
	align-items: center;
	padding: .875rem 0;
	border-bottom: 1px solid var(--mbpf-line);
	font-size: 1.0625rem;
	line-height: 1.45;
	color: var(--mbpf-ink);
}

.mbpf-plearn__program li:has(.mbpf-plearn__osobno) {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

.mbpf-plearn__topic a {
	color: inherit;
	text-decoration: none;
}

.mbpf-plearn__topic a:hover {
	color: var(--mbpf-green);
	text-decoration: underline;
}

.mbpf-plearn__osobno {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-muted);
	white-space: nowrap;
}

.mbpf-plearn__num {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--mbpf-mint-soft);
	font-size: .875rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

.mbpf button.mbpf-plearn__more {
	margin-top: 1.25rem;
	padding: .75rem 1.5rem;
	border: 1px solid var(--mbpf-green);
	border-radius: var(--mbpf-radius);
	background: transparent;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mbpf-green);
	cursor: pointer;
}

/* Prawa kolumna trzyma się ekranu, kiedy lewa jest długa. */
/*
 * Karta „co dostajesz”. Mieszkała w prawej szynie sekcji „Czego się nauczysz”, dziś stoi
 * w hero, pod okładką — stąd nazwa bez przedrostka sekcji i brak `position: sticky`
 * (w komórce siatki nie ma po czym się kleić).
 */
.mbpf-facts {
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-facts__list {
	display: grid;
	gap: .875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-facts__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .75rem;
	align-items: center;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--mbpf-ink);
}

.mbpf-facts__ico {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--mbpf-green-06);
	color: var(--mbpf-green);
	line-height: 0;
}

.mbpf-facts__sales {
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mbpf-card-line);
	font-size: .9375rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

/* --- lekcja pokazowa --- */

.mbpf-pdemo {
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-pdemo__title {
	margin: 0 0 .5rem;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-pdemo__lead {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(26, 26, 26, .68);
}

.mbpf-pdemo__frame {
	position: relative;
	display: block;
	margin-bottom: 1.25rem;
	border-radius: var(--mbpf-radius);
	overflow: hidden;
	background: var(--mbpf-green-06);
}

.mbpf .mbpf-pdemo__poster {
	display: block;
	width: 100%;
	height: auto;
}

/* Trójkąt odtwarzania rysowany obramowaniem — bez dodatkowego pliku. */
.mbpf-pdemo__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 10px 24px rgba(26, 26, 26, .24);
}

.mbpf-pdemo__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	transform: translateX(.15rem);
	border-top: .625rem solid transparent;
	border-bottom: .625rem solid transparent;
	border-left: 1rem solid var(--mbpf-green);
}

.mbpf .mbpf-pdemo__cta {
	width: 100%;
	text-align: center;
}

/* --- pasek „ile zyskujesz z całą klasą” --- */

/*
 * Makieta z 25 sierpnia: jedna szeroka karta ze wstążką, nagłówkiem na całą szerokość
 * i trzema kolumnami — łańcuch cen, lista i oszczędność z przyciskiem. Wszystkie liczby
 * przychodzą z `Catalog::pack_deal()`, tu jest wyłącznie ich wygląd.
 */
.mbpf-pdeal {
	padding-block: 3.5rem;
	background: var(--mbpf-section-bg);
}

.mbpf-pdeal__card {
	position: relative;
	padding: 2.5rem 2rem 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
	box-shadow: 0 18px 44px rgba(26, 26, 26, .07);
}

/* Chorągiewka wychodzi poza lewą krawędź karty i ma wycięcie u dołu, jak w makiecie. */
.mbpf-pdeal__ribbon {
	position: absolute;
	top: -.5rem;
	left: 1.5rem;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: .125rem;
	margin: 0;
	padding: .625rem .875rem 1.125rem;
	background: var(--mbpf-green);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .5rem), 0 100%);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	max-width: 6.5rem;
}

.mbpf-pdeal__ribbon span {
	color: var(--mbpf-gold);
	font-size: .875rem;
}

.mbpf-pdeal__title {
	margin: 0 0 1.75rem;
	padding-left: 7.5rem;
	font-size: clamp(1.25rem, .95rem + 1.1vw, 1.75rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--mbpf-ink);
}

.mbpf-pdeal__title span {
	color: var(--mbpf-green);
}

.mbpf-pdeal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, .85fr) minmax(12rem, .8fr);
	gap: 1.5rem 1.5rem;
	align-items: center;
}

/* Łańcuch: ten dział → cała klasa → ile to wychodzi na miesiąc. */
.mbpf-pdeal__chain {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .875rem;
	padding: 1.25rem 1rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
}

/*
 * Ceny nie łamiemy, więc ogniwo nie może się kurczyć poniżej jej szerokości — inaczej
 * kwota wylewa się poza swoją komórkę i wchodzi pod strzałkę (widać to było przy
 * maturze, gdzie podpis ma trzy linijki). Zwijanie przejmuje `flex-wrap` wyżej.
 */
.mbpf-pdeal__step {
	display: grid;
	justify-items: center;
	gap: .25rem;
	flex: 0 0 auto;
	/* Wąskie ogniwo zmusza długi podpis do złamania się, zamiast rozpychać cały łańcuch. */
	max-width: 8.75rem;
	text-align: center;
}

.mbpf-pdeal__label {
	margin: 0;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-pdeal__sum {
	margin: 0;
	white-space: nowrap;
	font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--mbpf-ink);
}

.mbpf-pdeal__icon {
	display: block;
	line-height: 0;
	color: var(--mbpf-mint);
}

.mbpf-pdeal__arrow {
	flex: none;
	line-height: 0;
	color: var(--mbpf-mint);
}

/* Strzałki w makiecie są grubsze niż reszta ikon — to one prowadzą wzrok przez łańcuch. */
.mbpf-pdeal__arrow svg {
	stroke-width: 2.4;
}

/* Trzecie ogniwo — miętowy kafel z ceną w przeliczeniu na miesiąc. */
.mbpf-pdeal__month {
	display: grid;
	justify-items: center;
	gap: .125rem;
	min-width: 8rem;
	padding: 1rem .875rem;
	border-radius: var(--mbpf-radius-lg);
	background: rgba(192, 228, 208, .38);
	text-align: center;
}

/*
 * `Content::price()` oddaje cenę owiniętą w `<span>` WooCommerce, więc reguła dla podpisu
 * musi celować w klasę, a nie w dowolny `span` w środku — inaczej zjada rozmiar kwoty.
 */
.mbpf-pdeal__big {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.625rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--mbpf-green);
	white-space: nowrap;
}

.mbpf .mbpf-pdeal__big .mbpf-pdeal__per {
	display: block;
	font-size: .875rem;
	font-weight: 700;
}

.mbpf-pdeal__foot {
	margin: .25rem 0 0;
	font-size: .75rem;
	color: var(--mbpf-muted);
}

.mbpf .mbpf-pdeal__list {
	display: grid;
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf .mbpf-pdeal__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mbpf-ink);
}

.mbpf-pdeal__tick {
	line-height: 0;
	color: var(--mbpf-green);
}

/* Motyw robi z `b` blok, przez co kwota spadała do drugiej linijki punktu. */
.mbpf .mbpf-pdeal__list li b {
	display: inline;
	font-weight: 800;
	white-space: nowrap;
	color: var(--mbpf-green);
}

/* Kolumna oszczędności — najmocniejsza liczba na całej karcie. */
/* Bez własnego tła — w makiecie ta kolumna leży wprost na białej karcie. */
.mbpf-pdeal__gain {
	display: grid;
	justify-items: center;
	gap: .375rem;
	padding: .25rem .5rem;
	text-align: center;
}

.mbpf-pdeal__apart {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #c0392b;
}

.mbpf-pdeal__badge {
	margin: .25rem 0 0;
	padding: .3125rem 1rem;
	border-radius: 999px;
	background: var(--mbpf-gold);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #4a3600;
}

.mbpf-pdeal__save {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--mbpf-green);
}

.mbpf .mbpf-pdeal__cta {
	margin-top: .5rem;
	width: 100%;
	justify-content: center;
	text-align: center;
}

@media (max-width: 1200px) {
	.mbpf-pdeal__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-pdeal__title {
		padding-left: 7.5rem;
		min-height: 3.5rem;
	}
}

@media (max-width: 640px) {
	.mbpf-pdeal__card {
		padding: 2.25rem 1.25rem 1.5rem;
	}

	.mbpf-pdeal__title {
		padding-left: 0;
		padding-top: 3rem;
		min-height: 0;
	}

	/* Łańcuch staje pionowo, więc strzałki muszą pokazywać w dół. */
	.mbpf-pdeal__chain {
		flex-direction: column;
	}

	.mbpf-pdeal__arrow {
		transform: rotate(90deg);
	}
}

/* --- inne działy tej klasy --- */

.mbpf-ptiles {
	padding-block: 3.5rem;
	background: var(--mbpf-white);
	text-align: center;
}

.mbpf-ptiles__eyebrow {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mbpf-ptiles__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	color: var(--mbpf-ink);
}

/* Na karcie produktu kafle stoją same, bez kroku kreatora nad nimi. */
.mbpf-singles--product {
	margin-top: 0;
}

.mbpf-ptiles__more {
	margin: 1.75rem 0 0;
	text-align: center;
}


/* -------------------------------------- opinie w kolumnie karty produktu */

/*
 * Kolumna z okładką ma ~280 px, a cennik obok — przy dwóch ścieżkach zakupu — ponad 700.
 * Pod obrazkiem zostawało kilkaset pikseli pustki dokładnie tam, gdzie kupujący patrzy na
 * cenę. Siatka dostaje więc drugi wiersz w lewej kolumnie, a prawa rozciąga się na oba.
 *
 * Reguła działa tylko wtedy, gdy blok opinii naprawdę jest w środku (`:has`) — bez tego
 * produkty bez opinii dostałyby pusty wiersz i odstęp pod okładką.
 */
.mbpf-buy__grid:has(.mbpf-buy__side) {
	grid-template-areas:
		"fig  body"
		"side body";
	grid-template-rows: auto 1fr;
	row-gap: 1.25rem;
}

.mbpf-buy__grid:has(.mbpf-buy__side) .mbpf-buy__figure {
	grid-area: fig;
}

.mbpf-buy__grid:has(.mbpf-buy__side) .mbpf-buy__body {
	grid-area: body;
}

.mbpf-buy__side {
	grid-area: side;
	display: grid;
	align-content: start;
	gap: .75rem;
}



/*
 * Trzy kolumny mieszczą się dopiero od ~1100 px: niżej wiersz programu („1.6. Działania
 * pisemne – dodawanie i odejmowanie”) łamie się na trzy linie i lista przestaje być listą.
 * Poniżej tego progu wszystko idzie jedno pod drugim, a karta przestaje się kleić.
 */
@media (max-width: 1100px) {
	.mbpf-plearn__grid,
	.mbpf-plearn__grid--c1 {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		gap: 2rem;
	}

	.mbpf-plearn__grid .mbpf-pdemo {
		grid-column: auto;
	}


}


/* ------------------------------------------------- karta lekcji pokazowej */

/*
 * Lekcja pokazowa za 0 zł nie sprzedaje działu, tylko wejście do panelu kursanta.
 * Nagłówek mówi więc, co uczeń naprawdę dostaje, a miejsce cennika zajmuje jeden
 * przycisk. Okładka przechodzi na prawą stronę — pierwsze, co ma przeczytać, to
 * obietnica, a nie obrazek.
 */
.mbpf-buy--demo .mbpf-buy__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
}

.mbpf-buy--demo .mbpf-buy__body {
	order: 1;
}

.mbpf-buy--demo .mbpf-buy__figure {
	order: 2;
}

.mbpf-buy__badge {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	margin: 0 0 1rem;
	padding: .4375rem .875rem;
	border-radius: 999px;
	background: var(--mbpf-green);
	color: var(--mbpf-white);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.mbpf-buy__title--demo {
	margin-bottom: 1rem;
	font-size: clamp(2rem, 1.25rem + 2.4vw, 3.25rem);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

/*
 * Podkreślenie odręczne pod ostatnim słowem. Rysunek leży w warstwie pod tekstem,
 * więc nie zmienia wysokości wiersza i nie rozpycha nagłówka; `inline-block` na
 * słowie jest po to, żeby kreska miała do czego się przyczepić szerokością.
 */
.mbpf-buy__accent {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

.mbpf-buy__swoosh {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -.2em;
	height: .24em;
	color: var(--mbpf-coral);
	pointer-events: none;
}

.mbpf-buy__swoosh svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Dwa zdania wstępu stoją w osobnych wierszach, ale zawijają się same. */
.mbpf-buy__lead-line {
	display: block;
}

.mbpf-buy__demo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	margin-top: 1.75rem;
}

.mbpf .mbpf-buy__demo-cta {
	padding: 1.125rem 2rem;
	font-size: 1.0625rem;
}

/* Strzałka prowadzi napis, tak jak w makiecie — stąd zamiana kolejności. */
.mbpf-btn__arrow--lead {
	order: -1;
}

.mbpf .mbpf-buy__demo-cta:hover .mbpf-btn__arrow--lead {
	transform: translateX(3px);
}

.mbpf-buy__promise {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: .9375rem;
	color: var(--mbpf-muted);
}

.mbpf-buy__promise svg {
	display: block;
	color: var(--mbpf-mint);
}

/* Plakietka przyklejona do dolnej krawędzi okładki. */
.mbpf-buy__chip {
	position: absolute;
	right: -.75rem;
	bottom: -1.25rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: 82%;
	margin: 0;
	padding: .75rem 1.125rem;
	border-radius: 999px;
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
	font-size: .8125rem;
	line-height: 1.3;
	color: var(--mbpf-muted);
}

.mbpf-buy__chip b {
	display: block;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-buy__chip-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--mbpf-coral);
	color: var(--mbpf-ink);
}

/*
 * Pasek „wejdź do panelu kursanta”: cztery konkrety, żeby „za 0 zł” miało pokrycie
 * jeszcze zanim uczeń dojedzie do filmu.
 */
.mbpf-dstrip {
	padding-block: 0 3.5rem;
	background: var(--mbpf-white);
}

.mbpf-dstrip__card {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem 3rem;
	padding: 1.75rem 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	/* Mięta odróżnia pasek od białej sekcji nad nim — to już mowa o panelu, nie o produkcie. */
	background: rgba(192, 228, 208, .22);
}

.mbpf-dstrip__title {
	margin: 0;
	font-size: clamp(1.125rem, .95rem + .6vw, 1.4375rem);
	font-weight: 800;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-dstrip__line {
	display: block;
}

.mbpf-dstrip__line--sub {
	font-weight: 600;
	color: var(--mbpf-muted);
}

.mbpf-dstrip__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-dstrip__list li {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .8125rem;
	line-height: 1.3;
	color: var(--mbpf-muted);
}

.mbpf-dstrip__list b {
	display: block;
	font-size: .875rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-dstrip__ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
	border: 1px solid var(--mbpf-card-line);
	background: var(--mbpf-white);
	color: var(--mbpf-green);
}

@media (max-width: 1100px) {
	.mbpf-dstrip__card {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 991px) {
	/* Trzy kafelki obok siebie schodzą poniżej 300 px — na tablecie zostają dwa. */
	.mbpf-demo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-demopanel {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		text-align: left;
	}

	.mbpf-demopanel__act {
		justify-items: start;
		width: 100%;
	}

	.mbpf-demopanel__ticks {
		justify-content: flex-start;
	}

	/*
	 * Jedna kolumna: okładka, cennik, a opinie na końcu. Szablon obszarów z dwiema
	 * kolumnami musi tu zniknąć, inaczej przebiłby `grid-template-columns` z układu
	 * telefonu i zrobiłby drugą, pustą kolumnę.
	 */
	.mbpf-buy__grid:has(.mbpf-buy__side) {
		grid-template-areas:
			"fig"
			"body"
			"side";
		grid-template-rows: auto;
	}

	/* Na wąskim ekranie okładka wraca nad tekst — tak jak przy pozostałych produktach. */
	.mbpf-buy--demo .mbpf-buy__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-buy--demo .mbpf-buy__figure {
		order: 0;
	}

	.mbpf-buy--demo .mbpf-buy__body {
		order: 0;
	}

	.mbpf-dstrip__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.mbpf-buy__chip {
		right: 0;
		left: 0;
		max-width: none;
		justify-content: center;
	}

	.mbpf .mbpf-buy__demo-cta {
		width: 100%;
	}
}


/* ------------------------------------- podstrona kursu egzaminacyjnego */

/*
 * Prefiks `mbpf-kurs`, bo `mbpf-exam` należy do dwóch kafli na stronie głównej,
 * a `mbpf-course` do starego katalogu — kolizja nazw zdążyła już raz zepsuć
 * sekcję Kontaktu i nie wchodzimy w nią po raz trzeci.
 */

.mbpf-kurs__title {
	margin: 0 0 2rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--mbpf-ink);
	text-align: center;
}

/* --- sekcja otwierająca --- */

.mbpf-kurs-hero {
	padding-block: 2rem 2.5rem;
	background: var(--mbpf-hero-bg);
}

/*
 * Proporcje z makiety: kolumna z tekstem jest szersza od zdjęcia, bo dopiero wtedy
 * tytuł mieści się w trzech wierszach, tak jak został zaprojektowany.
 */
.mbpf-kurs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr) minmax(0, 300px);
	align-items: center;
	gap: 1.5rem;
}

.mbpf-kurs-hero__kicker {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: .4375rem 1rem;
	border-radius: 999px;
	background: var(--mbpf-green-10);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-kurs-hero__title {
	margin: 0 0 1.25rem;
	/* Górny pułap 2.5rem, bo przy 3rem „na poziomie podstawowym?” łamie się na dwa wiersze. */
	font-size: clamp(1.875rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--mbpf-ink);
}

.mbpf-kurs-hero__title span {
	display: block;
}

.mbpf-kurs-hero__accent {
	color: var(--mbpf-green);
}

.mbpf-kurs-hero__lead {
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(26, 26, 26, .72);
}

/*
 * Haczyki układają się w wiersz i zawijają same — przy pięciu pozycjach daje to
 * układ z makiety (trzy plus dwa), a na węższym ekranie schodzi po jednej,
 * bez sztywnej liczby kolumn, która przy dłuższej etykiecie rozjeżdżałaby wiersz.
 */
.mbpf-kurs-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-kurs-hero__facts li {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-kurs-hero__facts li > span {
	display: grid;
	place-items: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: .625rem;
	background: var(--mbpf-white);
	line-height: 0;
	color: var(--mbpf-green);
}

/*
 * Miętowa plama i wzory są wtopione w sam plik, więc arkusz nie dorysowuje drugiej —
 * dokładana wcześniej otoczka robiła z grafiki mniejszy obrazek w większej plamie.
 *
 * Grafika ma proporcje 1155×1023, więc „wyższy Franek” znaczy „szerszy Franek”:
 * pozwalamy jej wejść w przerwy siatki po obu stronach (tam nic nie stoi) oraz
 * w wyściółkę sekcji u góry i u dołu. Dzięki temu sięga krawędzi sekcji, zamiast
 * odbierać szerokość kolumnie z tytułem.
 */
.mbpf-kurs-hero__figure {
	position: relative;
	align-self: stretch;
	display: grid;
	place-items: center;
	margin-block: -2rem -2.5rem;
}

.mbpf .mbpf-kurs-hero__photo {
	display: block;
	width: calc(100% + 3rem);
	max-width: none;
	margin-inline: -1.5rem;
	height: auto;
}

/* --- karta zakupu (hero i domknięcie) --- */

.mbpf-kurs-buy {
	position: relative;
	display: grid;
	gap: .75rem;
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
}

.mbpf-kurs-buy__flag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-self: start;
	gap: .4375rem;
	margin: -.25rem 0 .25rem;
	padding: .5rem .875rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1;
	color: #7a3524;
}

.mbpf-kurs-buy__flag strong {
	font-size: 1.25rem;
	font-weight: 800;
}

/* Oszczędność jest liczbą, nie hasłem — dostaje własny, czytelny wiersz. */
.mbpf-kurs-buy__save {
	justify-self: start;
	margin: 0;
	padding: .375rem .875rem;
	border-radius: 999px;
	background: var(--mbpf-mint-soft);
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

.mbpf-kurs-buy__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mbpf-muted);
}

.mbpf-kurs-buy__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .625rem;
	margin: 0;
}

.mbpf-kurs-buy__name {
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .875rem;
}

.mbpf-kurs-buy__now {
	font-size: clamp(2.5rem, 1.9rem + 1.8vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	color: var(--mbpf-green);
}

.mbpf-kurs-buy__was {
	font-size: 1.375rem;
	font-weight: 600;
	color: rgba(26, 26, 26, .45);
	text-decoration-thickness: 2px;
}

.mbpf-kurs-buy__list {
	display: grid;
	gap: .625rem;
	margin: .25rem 0 .5rem;
	padding: 0;
	list-style: none;
}

.mbpf-kurs-buy__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .625rem;
	align-items: center;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--mbpf-ink);
}

.mbpf-kurs-buy__list li > span {
	display: flex;
	line-height: 0;
	color: var(--mbpf-green);
}

.mbpf-kurs-buy__list svg circle {
	fill: var(--mbpf-mint-soft);
	stroke: none;
}

.mbpf-kurs-buy__list svg path {
	stroke: var(--mbpf-green);
	stroke-width: 2.2;
}

.mbpf .mbpf-kurs-buy__cta {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* Formularz siedzi w karcie, więc nie potrzebuje odstępu jak na karcie produktu. */
.mbpf-kurs-buy .mbpf-buy__form {
	margin-top: 0;
}

.mbpf-kurs-buy__owned {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

.mbpf-kurs-buy__trust {
	margin-top: .25rem;
	flex-direction: column;
	gap: .5rem;
}

/* --- „wszystko w jednym miejscu” --- */

.mbpf-kurs-features {
	padding-block: 3.5rem;
	background: var(--mbpf-white);
}

.mbpf-kurs-features__grid {
	display: grid;
	/*
	 * Szerokość liczona zdaniem, nie kaflem — jedna korzyść to jeden wiersz. Próg 28rem
	 * trzyma dwie kolumny nawet na szerokim monitorze: przy trzech kolumna schodziła do
	 * ~400 px i najdłuższy tytuł („15 zestawów zadań z egzaminów”) zawijał się mimo tego,
	 * że na węższym tablecie mieścił się bez problemu.
	 */
	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
	gap: .75rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-kurs-feature {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .875rem;
	justify-items: start;
	text-align: left;
	padding: .875rem 1.125rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-section-bg);
}

.mbpf-kurs-feature svg {
	stroke-width: 1.9;
}

.mbpf-kurs-feature__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	background: var(--mbpf-white);
	color: var(--mbpf-green);
	line-height: 0;
}

.mbpf-kurs-feature__line { margin: 0; font-size: .875rem; line-height: 1.35; }
.mbpf-kurs-feature__name { font-weight: 800; color: var(--mbpf-ink); }
.mbpf-kurs-feature__text { color: rgba(26, 26, 26, .68); }

/* --- ścieżka nauki --- */

.mbpf-kurs-steps {
	padding-block: 3.5rem;
	background: var(--mbpf-section-bg);
}

.mbpf-kurs-steps__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-kurs-step {
	position: relative;
	display: grid;
	gap: .5rem;
	align-content: start;
	justify-items: center;
	padding: 0 .75rem;
	text-align: center;
}

/* Strzałka między krokami — rysowana znakiem, nie obrazkiem. */
.mbpf-kurs-step + .mbpf-kurs-step::before {
	content: "→";
	position: absolute;
	top: 1rem;
	left: -.75rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--mbpf-mint);
}

.mbpf-kurs-step__icon {
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--mbpf-white);
	border: 1px solid var(--mbpf-card-line);
	color: var(--mbpf-green);
	line-height: 0;
}

.mbpf-kurs-step__head {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.mbpf-kurs-step__num {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--mbpf-green);
	font-size: .9375rem;
	font-weight: 800;
	color: var(--mbpf-white);
}

.mbpf-kurs-step__name {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--mbpf-ink);
}

.mbpf-kurs-step__text {
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(26, 26, 26, .72);
}

/* --- program kursu i karta nauczyciela --- */

.mbpf-kurs-program {
	padding-block: 3.5rem;
	background: var(--mbpf-white);
}

.mbpf-kurs-program__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	align-items: start;
	gap: 3rem;
}

.mbpf-kurs-program__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-kurs-program__lead {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	color: var(--mbpf-muted);
}

.mbpf-kurs-program__list {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * „Zobacz wszystkie działy” — pod listą, na środku, jak w makiecie. Selektor z nazwą
 * elementu, bo `.mbpf button.mbpf-btn` też ją ma i inaczej wygrywa specyficznością.
 */
.mbpf button.mbpf-kurs-program__more {
	display: flex;
	width: fit-content;
	margin: 1.25rem auto 0;
}

.mbpf-kurs-item {
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-section-bg);
}

.mbpf-kurs-item__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: .75rem;
	align-items: center;
	padding: .875rem 1rem;
	cursor: pointer;
	list-style: none;
}

.mbpf-kurs-item__head::-webkit-details-marker {
	display: none;
}

.mbpf-kurs-item__num {
	display: grid;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: 50%;
	background: var(--mbpf-mint-soft);
	font-size: .8125rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

.mbpf-kurs-item__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mbpf-ink);
}

.mbpf-kurs-item__count {
	font-size: .875rem;
	color: var(--mbpf-muted);
	white-space: nowrap;
}

.mbpf-kurs-item__chevron {
	display: flex;
	line-height: 0;
	color: var(--mbpf-green);
	transition: transform .18s ease;
}

.mbpf-kurs-item[open] .mbpf-kurs-item__chevron {
	transform: rotate(180deg);
}

.mbpf-kurs-item__body {
	padding: 0 1rem 1rem 3.625rem;
}

.mbpf-kurs-item__label {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf-kurs-item__children {
	display: grid;
	gap: .375rem;
	margin: 0;
	padding-left: 1.25rem;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(26, 26, 26, .78);
}

.mbpf-kurs-item__more {
	margin: .875rem 0 0;
	font-size: .9375rem;
	font-weight: 700;
}

.mbpf-kurs-item__more a {
	color: var(--mbpf-green);
	text-decoration: none;
}

.mbpf-kurs-item__more a:hover {
	text-decoration: underline;
}

.mbpf-kurs-teacher {
	position: sticky;
	top: calc(var(--mbpf-header-h) + var(--mbpf-adminbar) + 1.5rem);
	padding: 1.75rem;
	border-radius: 24px;
	background: linear-gradient(180deg, #f2fbf6 0%, #e9f7f0 100%);
	text-align: center;
}

.mbpf-kurs-teacher__figure {
	margin-bottom: 1rem;
}

.mbpf .mbpf-kurs-teacher__photo {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	margin-inline: auto;
}

.mbpf-kurs-teacher__kicker {
	margin: 0 0 .25rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf-kurs-teacher__title {
	margin: 0 0 .75rem;
	font-size: 1.625rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-kurs-teacher__text {
	margin: 0 0 1rem;
	font-size: 1rem;
	line-height: 1.55;
	color: rgba(26, 26, 26, .72);
}

.mbpf-kurs-teacher__quote {
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem;
	border-radius: var(--mbpf-radius);
	background: rgba(255, 180, 166, .32);
	font-size: .9375rem;
	line-height: 1.5;
	font-style: italic;
	color: var(--mbpf-ink);
}

/*
 * Cztery liczby w dwóch rzędach zamiast czterech ciasnych kolumn: przy 12-pikselowym
 * podpisie „uczniów na tym kursie” łamało się na trzy wiersze i wyglądało jak drobny druk.
 */
.mbpf-kurs-teacher__numbers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-kurs-teacher__numbers li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .625rem;
	align-items: center;
	padding: .75rem;
	border-radius: 14px;
	background: var(--mbpf-white);
	text-align: left;
}

.mbpf-kurs-teacher__ico {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--mbpf-mint-soft);
	color: var(--mbpf-green);
	line-height: 0;
}

/* Złota gwiazdka czyta się jak ocena, a nie jak kolejny zielony obrys. */
.mbpf-kurs-teacher__ico .mbpf-icon--star {
	fill: var(--mbpf-gold);
	stroke: var(--mbpf-gold);
	stroke-linejoin: round;
}

.mbpf-kurs-teacher__pair {
	display: grid;
	gap: .0625rem;
}

.mbpf-kurs-teacher__value {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--mbpf-green);
}

.mbpf-kurs-teacher__label {
	font-size: .8125rem;
	line-height: 1.3;
	color: var(--mbpf-muted);
}

/* --- domknięcie: rodzic, pytania, zakup --- */

.mbpf-kurs-close {
	padding-block: 3.5rem 4rem;
	background: var(--mbpf-section-bg);
}

.mbpf-kurs-close__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 340px);
	align-items: start;
	gap: 1.5rem;
}

.mbpf-kurs-parent {
	padding: 1.75rem;
	border-radius: var(--mbpf-radius-lg);
	background: #eef7f1;
}

.mbpf-kurs-parent__kicker {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf-kurs-parent__title {
	margin: 0 0 1rem;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--mbpf-ink);
}

.mbpf-kurs-parent__text {
	margin: 0 0 .875rem;
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(26, 26, 26, .72);
}

.mbpf-kurs-parent__link {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
}

.mbpf-kurs-parent__link a {
	color: var(--mbpf-green);
	text-decoration: none;
}

.mbpf-kurs-parent__link a:hover {
	text-decoration: underline;
}

.mbpf-kurs-faq {
	padding: 1.75rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-kurs-faq__title {
	margin: 0 0 1rem;
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-kurs-faq__list {
	display: grid;
	gap: .5rem;
}

.mbpf-kurs-close__title {
	margin: 0 0 1rem;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--mbpf-ink);
}


/* ------------------------------------------------ kasa i potwierdzenie */

/*
 * Arkusze WooCommerce zostają w kolejce — na nich stoją wtyczki płatności, więc
 * zamiast pisać kasę od zera, ubieramy jej markup w nasze tokeny. Stąd w tym bloku
 * selektory `#customer_details`, `#order_review` i spółka: to nie cudzy kod przeciekł
 * do arkusza, tylko jedyne uchwyty, jakie klasyczny checkout daje.
 */

.mbpf-kasa {
	padding-block: 2rem 4rem;
	background: var(--mbpf-section-bg);
}

/* --- pasek kroków --- */

.mbpf-kasa__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.mbpf-kasa__step {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-muted);
}

.mbpf-kasa__step-num {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--mbpf-white);
	border: 1px solid var(--mbpf-card-line);
	font-size: .875rem;
	font-weight: 800;
}

.mbpf-kasa__step--now {
	color: var(--mbpf-green);
}

.mbpf-kasa__step--now .mbpf-kasa__step-num {
	background: var(--mbpf-green);
	border-color: var(--mbpf-green);
	color: var(--mbpf-white);
}

.mbpf-kasa__title {
	margin: 0 0 1.75rem;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 800;
	color: var(--mbpf-ink);
	text-align: center;
}

/* --- pusty koszyk --- */

.mbpf-kasa__empty {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	max-width: 640px;
	padding: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-kasa__empty-note {
	margin: 0;
	font-size: 1.0625rem;
	color: rgba(26, 26, 26, .72);
}

/* --- dwie kolumny: dane po lewej, zamówienie po prawej --- */

.mbpf-kasa .woocommerce {
	display: block;
}

/*
 * Dwa pola siatki, nie cztery: obie strony formularza są zamknięte w kontenery
 * dokładane hakami (patrz klasa Checkout). Bez tego wiersze kolumn wyrównują się
 * do siebie i karta zamówienia zjeżdża pod formularz zamiast stanąć obok niego.
 */
/*
 * Elastyczny rząd, nie siatka: w formularz wchodzą wtyczki (Stripe wrzuca na górę
 * Apple Pay i Google Pay razem z separatorem), a każde takie pole psuło automatyczne
 * rozmieszczenie siatki i wypychało kolumny w losowe komórki. Tutaj wszystko nieznane
 * idzie na całą szerokość, a nasze dwie kolumny zawsze stają obok siebie.
 */
.mbpf-kasa form.checkout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2rem;
}

.mbpf-kasa form.checkout > * {
	flex: 1 0 100%;
	min-width: 0;
}

/* Ukryte pola pochodzenia zamówienia wysyłają się także spod `display: none`. */
.mbpf-kasa form.checkout > wc-order-attribution-inputs {
	display: none;
}

/* Selektor musi być cięższy od `form.checkout > *` wyżej, inaczej kolumny też dostają 100%. */
.mbpf-kasa form.checkout > .mbpf-kasa__col--data {
	display: grid;
	gap: 1.25rem;
	flex: 1 1 30rem;
	min-width: 0;
}

/* Podsumowanie trzyma się ekranu — lewa kolumna bywa od niego dłuższa. */
.mbpf-kasa form.checkout > .mbpf-kasa__col--order {
	position: sticky;
	top: calc(var(--mbpf-header-h) + var(--mbpf-adminbar) + 1rem);
	align-self: flex-start;
	flex: 0 1 26rem;
	min-width: 0;
}

/*
 * Obie kolumny zaczynają się nagłówkiem nad kartą, więc startują na tej samej wysokości.
 * WooCommerce trzyma „Dane rozliczeniowe” w środku `#customer_details`, dlatego kartą
 * jest dopiero otoczka pól, a nie cały blok.
 */
.mbpf .mbpf-kasa #customer_details {
	width: auto;
	float: none;
	padding: 0;
	border: 0;
	background: none;
}

.mbpf .mbpf-kasa .woocommerce-billing-fields > h3,
.mbpf-kasa__pay-title,
.mbpf-kasa #order_review_heading {
	margin: 0 0 .75rem;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--mbpf-ink);
}

.mbpf .mbpf-kasa .woocommerce-billing-fields__field-wrapper,
.mbpf .mbpf-kasa #payment.woocommerce-checkout-payment {
	width: auto;
	float: none;
	padding: 1.75rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-kasa #customer_details .col-1,
.mbpf-kasa #customer_details .col-2 {
	width: auto;
	float: none;
}

.mbpf-kasa #order_review,
.mbpf-kasa #order_review_heading {
	width: auto;
	float: none;
}

.mbpf-kasa #order_review {
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
}

/* Nagłówek płatności stoi nad kartą, tak samo jak pozostałe. */
.mbpf-kasa__pay-title {
	margin-top: .25rem;
}

.mbpf-kasa h3 {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

/* --- pola formularza --- */

.mbpf-kasa .form-row {
	margin: 0 0 1rem;
	padding: 0;
}

.mbpf-kasa .form-row label {
	display: block;
	margin-bottom: .375rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--mbpf-ink);
}

.mbpf-kasa .form-row .required {
	color: var(--mbpf-green);
	text-decoration: none;
}

.mbpf-kasa .input-text,
.mbpf-kasa select,
.mbpf-kasa .select2-container .select2-selection--single {
	width: 100%;
	min-height: 3rem;
	padding: .75rem 1rem;
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
	font: inherit;
	font-size: 1rem;
	color: var(--mbpf-ink);
}

.mbpf-kasa .input-text:focus,
.mbpf-kasa select:focus {
	outline: none;
	border-color: var(--mbpf-green);
	box-shadow: 0 0 0 3px var(--mbpf-green-10);
}

/* Kraj zostaje w formularzu dla bramek płatniczych, ale nie zajmuje miejsca. */
.mbpf-kasa .mbpf-kasa__hidden {
	display: none !important;
}

/* Dwa pola w rzędzie tam, gdzie WooCommerce sam o to prosi. */
@media (min-width: 480px) {

	/* Trzy klasy, bo `.woocommerce form .form-row-first` z arkusza WooCommerce waży więcej. */
	.mbpf .mbpf-kasa .form-row-first,
	.mbpf .mbpf-kasa .form-row-last,
	.mbpf .mbpf-kasa .form-row-wide {
		float: none;
		width: 100%;
	}

	.mbpf-kasa #customer_details .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1rem;
	}

	.mbpf-kasa #customer_details .woocommerce-billing-fields__field-wrapper .form-row-wide {
		grid-column: 1 / -1;
	}
}

/* --- pozycje zamówienia --- */

/* `table.shop_table` z arkusza WooCommerce ma własną ramkę — w karcie dawała drugą obwódkę. */
.mbpf .mbpf-kasa table.shop_table {
	width: 100%;
	margin: 0 0 1rem;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: 1rem;
}

.mbpf-kasa .woocommerce-checkout-review-order-table thead {
	display: none;
}

/*
 * WooCommerce daje każdej komórce `border-top`, przez co pierwsza pozycja miała kreskę
 * tuż pod krawędzią karty. Zdejmujemy je i rysujemy własne rozdzielacze: wyłącznie
 * pomiędzy pozycjami i nad podsumowaniem.
 */
.mbpf .mbpf-kasa table.shop_table td,
.mbpf .mbpf-kasa table.shop_table th {
	border-top: 0;
	border-bottom: 0;
}

.mbpf .mbpf-kasa table.shop_table tbody tr + tr td,
.mbpf .mbpf-kasa table.shop_table tfoot tr:first-child th,
.mbpf .mbpf-kasa table.shop_table tfoot tr:first-child td {
	border-top: 1px solid var(--mbpf-line);
}

/* Nazwa bierze całą wolną szerokość, cena tylko tyle, ile naprawdę potrzebuje. */
.mbpf .mbpf-kasa table.shop_table td.product-name {
	width: 100%;
}

.mbpf-kasa .woocommerce-checkout-review-order-table th,
.mbpf-kasa .woocommerce-checkout-review-order-table td {
	padding: .875rem 0;
	border: 0;
	border-bottom: 1px solid var(--mbpf-line);
	vertical-align: middle;
	text-align: left;
}

.mbpf-kasa .woocommerce-checkout-review-order-table td.product-total {
	vertical-align: top;
}

.mbpf-kasa .woocommerce-checkout-review-order-table td.product-total,
.mbpf-kasa .woocommerce-checkout-review-order-table th.product-total {
	text-align: right;
	white-space: nowrap;
	padding-left: .75rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-kasa .woocommerce-checkout-review-order-table tfoot th {
	font-weight: 600;
	color: var(--mbpf-muted);
}

.mbpf-kasa .woocommerce-checkout-review-order-table tfoot .order-total th,
.mbpf-kasa .woocommerce-checkout-review-order-table tfoot .order-total td {
	padding-top: 1rem;
	border-bottom: 0;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

/* Miniatura, nazwa i „usuń” — dokładane filtrem w klasie Checkout. */
.mbpf-kasa__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .5rem .75rem;
	align-items: start;
}

.mbpf-kasa__item-learn {
	grid-column: 1 / -1;
	display: grid;
	gap: .25rem;
	padding: .625rem .75rem;
	border-radius: 10px;
	background: var(--mbpf-section-bg);
}

.mbpf-kasa__item-thumb {
	display: block;
	width: 3.25rem;
	border-radius: 10px;
	overflow: hidden;
	background: var(--mbpf-green-06);
	line-height: 0;
}

.mbpf .mbpf-kasa__item-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.mbpf-kasa__item-body {
	display: grid;
	gap: .1875rem;
}

.mbpf-kasa__item-name {
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mbpf-ink);
}

/* Plakietka przy pozycji kupowanej czasowo — inaczej 99 zł wygląda jak przecena. */
.mbpf-kasa__item-plan {
	justify-self: start;
	white-space: nowrap;
	padding: .125rem .5rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #7a3524;
}

.mbpf-kasa__item-meta {
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

/* „Czego się nauczysz” przy pozycji — ostatnie przypomnienie, co się kupuje. */
.mbpf-kasa__item-label {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf .mbpf-kasa__item-points {
	display: grid;
	gap: .1875rem;
	margin: 0;
	padding-left: .875rem;
	list-style: disc;
	font-size: .8125rem;
	line-height: 1.45;
	color: rgba(26, 26, 26, .74);
}

.mbpf .mbpf-kasa__item-points li::marker {
	color: var(--mbpf-mint);
}

.mbpf .mbpf-kasa__item-points li {
	margin: 0;
}

.mbpf-kasa__item-remove {
	justify-self: start;
	font-size: .8125rem;
	color: var(--mbpf-muted);
	text-decoration: underline;
}

.mbpf-kasa__item-remove:hover {
	color: #b03a2e;
}

/* --- kupon --- */

.mbpf-kasa .woocommerce-form-coupon-toggle {
	margin-bottom: 1rem;
}

/* Kod rabatowy: pole i przycisk w jednym rzędzie, bez pustego elementu czyszczącego. */
.mbpf-kasa .checkout_coupon {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: .75rem;
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: 1px dashed var(--mbpf-card-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
}

.mbpf-kasa .checkout_coupon > p:not(.form-row) {
	grid-column: 1 / -1;
	margin: 0;
}

.mbpf-kasa .checkout_coupon .form-row {
	margin: 0;
	width: 100%;
	float: none;
	padding: 0;
}

.mbpf-kasa .checkout_coupon .clear {
	display: none;
}

/* --- kod rabatowy w karcie zamówienia --- */

.mbpf .mbpf-kasa .mbpf-kasa__coupon-row td {
	padding-top: 1rem;
	border-bottom: 0;
}

/*
 * Bez JavaScriptu nasze pole nic nie zrobi (kod wysyła skrypt), więc pokazujemy je
 * dopiero, gdy skrypt się wykonał — do tego czasu działa oryginalny formularz nad kasą.
 * Widoczność sterowana klasą, a nie atrybutem `hidden`, bo tabelę podsumowania
 * WooCommerce wymienia w całości przy każdym przeliczeniu.
 */
.mbpf-kasa__coupon {
	display: none;
	gap: .5rem;
}

.mbpf-js .mbpf-kasa__coupon {
	display: grid;
}

.mbpf-kasa__coupon label {
	font-size: .875rem;
	font-weight: 700;
	color: var(--mbpf-ink);
}

.mbpf-kasa__coupon-row-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .5rem;
}

.mbpf .mbpf-kasa__coupon-row-fields input {
	width: 100%;
	min-height: 2.75rem;
	padding: .625rem .875rem;
	border: 1px solid var(--mbpf-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
	font: inherit;
	font-size: .9375rem;
}

.mbpf .mbpf-kasa__coupon-row-fields .mbpf-btn {
	padding: .625rem 1.125rem;
	font-size: .9375rem;
}

.mbpf-kasa__coupon-info:empty {
	display: none;
}

.mbpf-kasa__coupon-info {
	font-size: .8125rem;
	line-height: 1.45;
}

.mbpf-kasa__coupon-info.is-ok {
	color: var(--mbpf-green);
	font-weight: 700;
}

.mbpf-kasa__coupon-info.is-error {
	color: #b03a2e;
	font-weight: 700;
}

.mbpf-kasa__coupon-info .woocommerce-error,
.mbpf-kasa__coupon-info .woocommerce-message {
	margin: 0;
	padding: .625rem .75rem;
	font-size: .8125rem;
}

/* --- metody płatności --- */

.mbpf .mbpf-kasa #payment ul.payment_methods {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	border: 0;
	border-bottom: 0;
}

.mbpf-kasa .wc_payment_method {
	margin-bottom: .5rem;
	padding: .875rem 1rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-section-bg);
}

.mbpf-kasa .wc_payment_method > label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--mbpf-ink);
	cursor: pointer;
}

.mbpf-kasa .wc_payment_method img {
	max-height: 24px;
	width: auto;
	margin-left: .375rem;
}

.mbpf .mbpf-kasa #payment div.payment_box {
	margin: .75rem 0 0;
	padding: .875rem 1rem;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-section-bg);
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(26, 26, 26, .72);
}

/* Trójkącik nad ramką opisu metody płatności — u nas ramka jest inna, więc go nie ma. */
.mbpf .mbpf-kasa #payment div.payment_box::before,
.mbpf .mbpf-kasa #payment div.payment_box::after {
	display: none;
}

.mbpf .mbpf-kasa #payment .place-order {
	margin: 0;
	padding: 0;
}

/* --- zgody i przycisk --- */

.mbpf-kasa .woocommerce-terms-and-conditions-wrapper,
.mbpf-kasa .mbpf-kasa__consent {
	margin-bottom: .875rem;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(26, 26, 26, .78);
}

.mbpf-kasa .woocommerce-form__label-for-checkbox {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .625rem;
	align-items: start;
	font-weight: 500;
}

.mbpf-kasa .woocommerce-form__input-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: .1875rem;
	accent-color: var(--mbpf-green);
}

.mbpf-kasa #place_order {
	display: block;
	width: 100%;
	margin-top: .5rem;
	padding: 1.0625rem 2rem;
	border: 0;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-green);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--mbpf-white);
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.mbpf-kasa #place_order:hover,
.mbpf-kasa #place_order:focus-visible {
	background: #2f4b45;
	transform: translateY(-1px);
}

.mbpf-kasa__trust {
	margin-top: 1.5rem;
}

/* --- komunikaty WooCommerce --- */

.mbpf-kasa .woocommerce-error,
.mbpf-kasa .woocommerce-info,
.mbpf-kasa .woocommerce-message,
.mbpf-kasa .woocommerce-NoticeGroup {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-left: 4px solid var(--mbpf-green);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
	list-style: none;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--mbpf-ink);
}

.mbpf-kasa .woocommerce-error {
	border-left-color: #b03a2e;
	background: #fff6f4;
}

.mbpf-kasa .woocommerce-error::before,
.mbpf-kasa .woocommerce-info::before,
.mbpf-kasa .woocommerce-message::before {
	display: none;
}

/* --- potwierdzenie zamówienia --- */

.mbpf-kasa--thanks {
	background: var(--mbpf-hero-bg);
}

.mbpf-thanks {
	display: grid;
	justify-items: center;
	gap: 1rem;
	max-width: 720px;
	margin: 0 auto 2.5rem;
	padding: 2.5rem 2rem;
	border-radius: 24px;
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
	text-align: center;
}

.mbpf-thanks__mark {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: var(--mbpf-mint-soft);
	color: var(--mbpf-green);
	line-height: 0;
}

.mbpf-thanks__mark svg circle {
	fill: none;
	stroke: none;
}

.mbpf-thanks__mark svg path {
	stroke: var(--mbpf-green);
	stroke-width: 2.4;
}

.mbpf-thanks__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--mbpf-ink);
}

.mbpf-thanks__lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba(26, 26, 26, .72);
}

.mbpf-thanks__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem 2rem;
	margin: .5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--mbpf-line);
	list-style: none;
	width: 100%;
}

.mbpf-thanks__meta li {
	display: grid;
	gap: .125rem;
}

.mbpf-thanks__meta span {
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

.mbpf-thanks__meta strong {
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--mbpf-ink);
}

.mbpf-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin: .5rem 0 0;
}

/* Tabela zamówienia na potwierdzeniu ma być czytelna, ale nie krzyczeć. */
.mbpf-kasa__form--thanks {
	max-width: 720px;
	margin: 0 auto;
	padding: 1.75rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-kasa__form--thanks .woocommerce-order-overview,
.mbpf-kasa__form--thanks .woocommerce-thankyou-order-received {
	font-size: 1rem;
}

.mbpf-kasa__form--thanks table {
	width: 100%;
	border-collapse: collapse;
}

.mbpf-kasa__form--thanks th,
.mbpf-kasa__form--thanks td {
	padding: .75rem 0;
	border-bottom: 1px solid var(--mbpf-line);
	text-align: left;
	font-size: .9375rem;
}


/* ----------------------------------------------------------------- stopka */

.mbpf-footer {
	padding-block: 4.5rem 2rem;
	background: #111614;
	color: rgba(255, 255, 255, .72);
	font-size: 1.0625rem;
}

.mbpf-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mbpf-footer__mark {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 1.25rem;
}

.mbpf-footer__claim {
	margin: 0 0 1.25rem;
	max-width: 32ch;
	font-size: 1.125rem;
}

.mbpf-footer__claim strong {
	display: block;
	color: var(--mbpf-white);
	font-weight: 700;
}

.mbpf-footer__legal {
	margin: 0;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .5);
}

.mbpf-footer__head {
	margin: 0 0 1.25rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-white);
}

.mbpf-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .75rem;
}

.mbpf a.mbpf-footer__link {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
}

.mbpf a.mbpf-footer__link:hover,
.mbpf a.mbpf-footer__link:focus-visible {
	color: var(--mbpf-white);
}

.mbpf-footer__copy {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: .8125rem;
	color: rgba(255, 255, 255, .45);
}

/* ---------------------------------------------------------- responsywność */

@media (max-width: 1279px) {

	/* Pięć wartości w rzędzie mieści się tylko na szerokim ekranie. */
	.mbpf-values__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}


	/* Podstrona kursu: zdjęcie ustępuje miejsca treści i karcie ceny. */
	.mbpf-kurs-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	}

	.mbpf-kurs-hero__figure {
		display: none;
	}

	.mbpf-kurs-features__grid {
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
	}

	.mbpf-kurs-close__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	}

	/* Karta zakupu obok pytań, a słowo do rodzica na całą szerokość nad nimi. */
	.mbpf-kurs-parent {
		grid-column: 1 / -1;
	}

	/* Poniżej tej szerokości dwie karty obok siebie zostawiają na tekst około 200 px,
	   więc każdy punkt zawijałby się mimo skrócenia. Karty idą wtedy jedna pod drugą
	   i lista dostaje całą szerokość kontenera. */
	.mbpf-exams {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-wizard__classes {
		max-width: none;
	}

	.mbpf-nav__list {
		gap: 1.125rem;
	}

	.mbpf a.mbpf-nav__link {
		font-size: .9375rem;
	}

	.mbpf-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
		gap: 2.5rem;
	}

	/* Poniżej 1280 px kolumna tekstu ma około 500 px i cztery liczby w jednym wierszu
	   musiałyby się ścieśnić do nieczytelnych podpisów — lepiej dwa rzędy po dwie. */
	.mbpf-hero__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.125rem 1.5rem;
		max-width: 440px;
	}
}

@media (max-width: 991px) {

	/* Podstrona kursu na tablecie: wszystko w jednej kolumnie, zdjęcie wraca. */
	.mbpf-kurs-hero__grid,
	.mbpf-kurs-program__grid,
	.mbpf-kurs-close__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	.mbpf-kurs-hero__figure {
		display: grid;
		order: 3;
		align-self: center;
		margin-top: 0;
	}

	/* Bez tego wyjście w przerwy siatki robiłoby poziome przewijanie. */
	.mbpf .mbpf-kurs-hero__photo {
		width: 100%;
		max-width: 540px;
		margin-inline: auto;
	}

	.mbpf-kurs-hero__aside {
		order: 2;
	}

	.mbpf-kurs-teacher {
		position: static;
	}

	/* Kroki jadą w kolumnie, więc strzałka musi wskazywać w dół. */
	.mbpf-kurs-steps__list {
		grid-auto-flow: row;
		gap: 1.75rem;
	}

	.mbpf-kurs-step + .mbpf-kurs-step::before {
		top: -1.25rem;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}

	/* Karta produktu: okładka nad treścią. */
	.mbpf-buy__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.mbpf {
		--mbpf-gutter: 24px;
	}

	/* Na telefonie nie ma czym najechać — pigułka po prostu prowadzi do kasy. */
	.mbpf-cart__panel {
		display: none;
	}

	.mbpf-burger {
		display: inline-flex;
		order: 5;
	}

	/*
	 * Szuflada jest pozycjonowana WZGLĘDEM PASKA, nie okna. Przy `position: fixed`
	 * blokiem odniesienia i tak stawał się sam pasek — ma `backdrop-filter`, a filtr
	 * tworzy blok zawierający dla potomków fixed. Skutek: kompensacja na pasek
	 * administratora doliczała się drugi raz i zostawała 46 px szpary.
	 * `top: 100%` przykleja szufladę do dolnej krawędzi paska bez żadnej arytmetyki.
	 */
	.mbpf-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		/* Górny odstęp prawie zerowy — szuflada ma wyglądać jak przedłużenie paska.
		   Pierwsza pozycja i tak wnosi własne .875rem paddingu. */
		padding: .25rem var(--mbpf-gutter) 1.5rem;
		background: var(--mbpf-white);
		border-bottom: 1px solid var(--mbpf-line);
		box-shadow: var(--mbpf-shadow);
		/* Cała wysokość ekranu poniżej paska. */
		height: calc(100dvh - var(--mbpf-header-h) - var(--mbpf-adminbar));
		overflow-y: auto;
	}

	.mbpf-nav.is-open {
		display: flex;
	}

	.mbpf-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
	}

	.mbpf-nav__item + .mbpf-nav__item {
		border-top: 1px solid var(--mbpf-line);
	}

	.mbpf a.mbpf-nav__link {
		display: block;
		padding: .875rem 0;
		font-size: 1rem;
	}

	.mbpf-nav__actions {
		/* Przyciski lądują na dole szuflady — przy pełnej wysokości są wtedy
		   w zasięgu kciuka, a nie doklejone pod ostatnią pozycją menu. */
		margin-top: auto;
		padding-top: 1.5rem;
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
	}

	.mbpf-nav__actions .mbpf-btn {
		width: 100%;
		padding-block: .875rem;
	}

	.mbpf-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		min-height: 0;
	}

	.mbpf-hero__body {
		max-width: 690px;
		padding-bottom: 0;
	}

	/*
	 * Poniżej 992 px zdjęcie schodzi pod tekst i jest wyraźnie niższe: nagłówek
	 * z przyciskami ma zostać nad zgięciem, a Franek pokazać się zaraz pod nimi.
	 * Dalej dotyka dolnej krawędzi sekcji, bo hero nie ma dolnej wyściółki.
	 */
	.mbpf-hero__figure {
		align-self: center;
	}

	.mbpf .mbpf-hero__photo {
		width: auto;
		max-width: 100%;
		max-height: 360px;
	}

	.mbpf-why {
		padding-block: 4rem;
	}

	.mbpf-figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-classes-section,
	.mbpf-demo,
	.mbpf-benefits,
	.mbpf-reviews,
	.mbpf-faq,
	.mbpf-blog,
	.mbpf-cta,
	.mbpf-help {
		padding-block: 4rem;
	}

	.mbpf-catalog {
		padding-block: 2rem 4rem;
	}

	.mbpf-about-hero,
	.mbpf-about-story,
	.mbpf-values,
	.mbpf-beyond,
	.mbpf-social {
		padding-block: 3rem;
	}

	.mbpf-start {
		padding-block: 3rem 2rem;
	}

	.mbpf-about-hero__inner,
	.mbpf-about-story__inner,
	.mbpf-beyond__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.mbpf-beyond__text {
		max-width: none;
	}

	/* Historia czyta się lepiej nad zdjęciem niż pod nim. */
	.mbpf-about-story__figure {
		order: -1;
	}

	.mbpf-about-hero__figure,
	.mbpf-about-story__figure {
		max-width: 420px;
		margin-inline: auto;
	}

	.mbpf-about-hero__figure {
		margin-right: auto;
		margin-bottom: -48px;
	}

	.mbpf-about-hero__body {
		padding-left: 0;
	}

	/* Plakietki nie mają już marginesu, w który mogłyby wystawać. */
	.mbpf-about-hero__chip--top {
		left: .75rem;
	}

	.mbpf-about-hero__chip--bottom {
		right: .75rem;
	}

	.mbpf-about-facts__grid,
	.mbpf-social__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-wizard {
		padding-block: 3rem;
	}

	/* Na telefonie trzy rzędy kart odsuwały kolejny krok daleko w dół, więc klasy
	   jadą poziomo z przyciąganiem — widać, że lista się przewija, bo kolejna karta
	   wystaje zza krawędzi. */
	.mbpf-wizard__classes {
		display: flex;
		gap: .875rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Ujemne marginesy wypuszczają karuzelę poza kontener, żeby pierwsza karta
		   zaczynała się równo z tekstem, a ostatnia mogła dojechać do krawędzi. */
		margin-inline: calc(var(--mbpf-gutter, 1.25rem) * -1);
		padding-inline: var(--mbpf-gutter, 1.25rem);
		padding-bottom: .5rem;
		scrollbar-width: thin;
	}

	.mbpf-wizard__classes > li {
		flex: 0 0 66%;
		scroll-snap-align: start;
	}

	/* Cena schodzi pod opis i zajmuje całą szerokość karty. */
	.mbpf-pack {
		grid-template-columns: 170px minmax(0, 1fr);
		gap: 1.25rem;
	}

	.mbpf-pack__price {
		grid-column: 1 / -1;
	}

	.mbpf-about-facts__icon {
		width: 4rem;
		height: 4rem;
	}

	.mbpf-about-facts__icon svg {
		width: 29px;
		height: 29px;
	}

	.mbpf-about-facts__value {
		font-size: 2.125rem;
	}

	/* Trzecia karta zostaje sama w rzędzie — niech zajmie całą szerokość. */
	.mbpf-social__grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Na tablecie karty schodzą pod tekst, ale wciąż trzy obok siebie. */
	.mbpf .mbpf-beyond__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mbpf-start__card {
		padding: 2.5rem 1.75rem;
	}

	/* --- „Dla kogo?” na tablecie --- */

	/* Zdjęcie schodzi pod tekst, a bazgroły przestają wchodzić na treść. */
	.mbpf-fw-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.mbpf-fw-hero__body {
		text-align: center;
	}

	.mbpf-fw-hero__lead {
		margin-inline: auto;
	}

	.mbpf-paths__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-fw-hero,
	.mbpf-quiz,
	.mbpf-paths,
	.mbpf-problems,
	.mbpf-compare,
	.mbpf-routes {
		padding-block: 3rem;
	}

	/* Zdjęcie zawsze nad tekstem, także w wierszach odwróconych — inaczej co drugi
	   blok zaczynałby się od opisu problemu bez ilustracji. */
	.mbpf-problems__row,
	.mbpf-problems__row--flip {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}

	.mbpf-problems__row--flip .mbpf-problems__figure {
		order: 0;
	}

	.mbpf-problems__row + .mbpf-problems__row {
		margin-top: 2.5rem;
	}

	.mbpf-compare__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Strzałka prowadzi wzrok w bok — w układzie pionowym nie ma czego prowadzić. */
	.mbpf-compare__arrow {
		display: none;
	}

	.mbpf-routes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-routes__grid > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* --- „Kontakt” na tablecie --- */

	.mbpf-contact,
	.mbpf-offer,
	.mbpf-cfaq {
		padding-block: 3rem;
	}

	/* Dane kontaktowe wracają pod formularz — obok robią się zbyt wąskie. */
	.mbpf-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Dwa kafle egzaminacyjne jeden pod drugim — obok robią się zbyt ciasne
	   na listę punktów i okładkę naraz. */
	.mbpf-exams {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Poniżej tej szerokości pasek boczny zabiera zbyt wiele miejsca siatce —
	   filtry wracają nad listę i układają się w rzędy. */
	.mbpf-catalog__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-catalog__aside {
		position: static;
		margin-top: 0;
		order: 0;
	}

	.mbpf-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-catalog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-catalog__stats {
		gap: 1.5rem;
	}

	.mbpf-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Zdjęcia po bokach znikają pierwsze — karta jest tu treścią, one dekoracją. */
	.mbpf-news__aside {
		display: none;
	}

	.mbpf-reviews__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Zdjęcie schodzi pod treść i przestaje konkurować z kafelkami o szerokość. */
	.mbpf-benefits__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.mbpf-benefits__figure {
		order: 1;
		max-width: 420px;
		margin-inline: auto;
	}

	.mbpf-demo__play-icon {
		width: 4rem;
		height: 4rem;
	}

	.mbpf-demo__play-icon::after {
		border-width: .625rem 0 .625rem 1rem;
	}

	.mbpf-classes-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: .75rem;
	}

	.mbpf-classes-section__note {
		text-align: left;
		max-width: none;
	}

	.mbpf-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mbpf-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.mbpf-footer__about {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.mbpf-demo__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-demopanel {
		padding: 1.5rem 1.25rem;
	}

	.mbpf .mbpf-demopanel__cta {
		width: 100%;
	}



	/*
	 * Podstrona kursu na telefonie — wiersz na całą szerokość. Tytuły kursu są dłuższe
	 * niż na karcie pakietu („14 quizów sprawdzających”), więc na tej szerokości dopisek
	 * po myślniku chowamy: zostaje sam konkret, zawsze w jednej linii. Od tabletu w górę
	 * wraca w całości.
	 */
	.mbpf-kurs-features__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: .5rem;
	}

	.mbpf-kurs-feature {
		gap: .75rem;
		padding: .75rem .875rem;
	}

	.mbpf-kurs-feature__icon { width: 2.25rem; height: 2.25rem; border-radius: 12px; }
	.mbpf-kurs-feature__line { font-size: .8125rem; }
	.mbpf-kurs-feature__text { display: none; }

	/* Na telefonie każdy haczyk w osobnym wierszu — dwa obok siebie ledwo się mieszczą. */
	.mbpf-kurs-hero__facts {
		flex-direction: column;
		align-items: flex-start;
		gap: .625rem;
	}

	.mbpf-kurs-item__head {
		grid-template-columns: auto minmax(0, 1fr) auto;
		row-gap: .25rem;
	}

	/* Liczba lekcji przenosi się pod tytuł, żeby nazwa działu nie łamała się na sylaby. */
	.mbpf-kurs-item__count {
		grid-column: 2;
		grid-row: 2;
	}

	.mbpf-kurs-item__body {
		padding-left: 1rem;
	}

	.mbpf-kurs-teacher__numbers {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-kurs-steps__list {
		gap: 2rem;
	}

	/* Poniżej tej szerokości karty i liczby idą jedna pod drugą. */
	.mbpf-social__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Wartości są krótkie, więc na telefonie stoją jeszcze po dwie. */
	.mbpf-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.mbpf-about-facts__grid {
		gap: 2rem 1rem;
	}

	.mbpf-about-hero__chip {
		font-size: .75rem;
	}

	/* Na telefonie karty idą jedna pod drugą, a kadr może być wyższy. */
	.mbpf .mbpf-beyond__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-beyond__figure {
		aspect-ratio: 3 / 2;
	}


	.mbpf-values__card {
		padding: 1.25rem;
	}

	/* --- „Dla kogo?” na telefonie --- */

	/* Przyciski TAK/NIE schodzą pod treść pytania i biorą pełną szerokość,
	   żeby dało się w nie trafić kciukiem. */
	.mbpf-quiz__row {
		flex-direction: column;
		align-items: stretch;
		gap: .875rem;
	}

	.mbpf-quiz__answers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Waga jak w regule bazowej (0,2,1), inaczej desktopowa wyściółka wygrywa.
	   min-height pilnuje 44 px, bo sama wyściółka dawała 39. */
	.mbpf button.mbpf-quiz__btn {
		min-height: 44px;
		padding: .75rem 1rem;
	}

	.mbpf-quiz__result {
		padding: 1.5rem 1.25rem;
	}

	.mbpf-paths__grid,
	.mbpf-routes__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Pudełko kursu nad opisem — obok zostaje z niego pasek kilku centymetrów. */
	.mbpf-pack {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.25rem 1rem;
	}

	.mbpf-pack__cover {
		margin-top: .5rem;
	}

	/* W wąskiej kolumnie 20 px łamie pigułkę na dwa wiersze — 18 px mieści się w jednym. */
	.mbpf-pack__save {
		padding-inline: .875rem;
		font-size: 1.125rem;
	}

	.mbpf .mbpf-pack__box {
		max-width: 130px;
	}

	/* Mniej powietrza w kolumnie z ceną — na telefonie miała 389 px wysokości. */
	.mbpf-pack__price {
		padding: .875rem .75rem;
	}

	.mbpf-pack__gain {
		gap: .25rem;
		margin-top: .25rem;
		padding-top: .5rem;
	}

	.mbpf-pack__actions {
		margin-top: .75rem;
	}

	.mbpf-pick__panel {
		padding: 1.5rem 1rem 0;
	}

	/*
	 * Pasek na telefonie musi zostać niski — bez tego zabierał 236 px, czyli ćwierć
	 * ekranu. Znika podpis „Wybrana klasa:” i napis przy strzałce powrotu, a same
	 * przyciski schodzą o stopień pisma.
	 */
	/* Pasek w dwóch ciasnych rzędach: trzy akcje i plakietka nie zmieszczą się
	   w jednym wierszu przy „Klasa maturalna”, ale mogą być niższe. */
	.mbpf-wizard__bar {
		padding-block: .375rem;
	}

	.mbpf-wizard__bar-inner {
		justify-content: center;
		gap: .3125rem;
	}

	/*
	 * `display: contents` rozpuszcza otoczkę akcji, więc przyciski zawijają się
	 * razem z plakietką. Bez tego cała trójka szła w osobny wiersz i pasek zajmował
	 * trzy rzędy zamiast dwóch.
	 */
	.mbpf-wizard__bar-actions {
		display: contents;
	}

	.mbpf-wizard__chip-label,
	.mbpf-wizard__bar-text {
		display: none;
	}

	.mbpf-wizard__bar-short {
		display: inline;
	}

	.mbpf .mbpf-wizard__chip {
		padding: .4375rem .75rem;
		font-size: .875rem;
	}

	/* min-height, bo sama wyściółka dawała 37 px — cel dotykowy ma mieć 40. */
	.mbpf .mbpf-wizard__back,
	.mbpf .mbpf-wizard__bar-cta {
		min-height: 40px;
		padding: .375rem .625rem;
		font-size: .8125rem;
		line-height: 1.2;
	}

	.mbpf .mbpf-wizard__chip {
		line-height: 1.2;
	}

	/* Kasa na telefonie: jedna kolumna, podsumowanie pod danymi. */
	.mbpf-kasa form.checkout {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	.mbpf-kasa__col--order {
		position: static;
	}

	.mbpf-kasa #customer_details,
	.mbpf-kasa .woocommerce-checkout-payment,
	.mbpf-kasa #order_review {
		padding: 1.125rem;
	}

	.mbpf-thanks {
		padding: 1.75rem 1.25rem;
	}

	/* Karta produktu na telefonie: wszystko w jednej kolumnie, dołem pasek z ceną. */
	.mbpf-buy__box {
		padding: 1.125rem;
	}

	.mbpf-buy__opts,
	.mbpf-buy__opts:not(:has(.mbpf-buy__opt--sub)) {
		grid-template-columns: minmax(0, 1fr);
	}

	/* „lub” między ścieżkami zakupu przestaje być kolumną, a staje się przerwą. */
	.mbpf-buy__or {
		justify-self: center;
		width: 2.5rem;
		height: 2.5rem;
	}

	.mbpf-buy__facts li {
		font-size: .875rem;
	}

	.mbpf-buy__bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .75rem;
		padding: .625rem var(--mbpf-gutter);
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(10px);
		border-top: 1px solid var(--mbpf-line);
		box-shadow: 0 -6px 20px rgba(26, 26, 26, .08);
	}

	.mbpf-buy__bar-price {
		font-size: 1.25rem;
		font-weight: 800;
		color: var(--mbpf-green);
	}

	.mbpf .mbpf-buy__bar-cta {
		padding: .75rem 1.5rem;
		border-radius: var(--mbpf-radius);
		font-size: 1rem;
	}

	/* Miejsce na pasek, żeby stopka nie chowała się pod nim. */
	.mbpf-page:has(.mbpf-buy__bar) .mbpf-footer {
		padding-bottom: 5rem;
	}

	/*
	 * Cele dotykowe: odnośniki w stopce (21 px), w zgodzie pod formularzem (18 px)
	 * oraz adres e-mail i telefon w kafelkach kontaktu (21 px) dostają wyściółkę,
	 * żeby dało się w nie trafić kciukiem.
	 */
	.mbpf a.mbpf-footer__link,
	.mbpf-field--check a,
	.mbpf-contact__fallback a,
	.mbpf-contact__list a {
		display: inline-block;
		padding-block: .6875rem;
	}

	/* Drobny tekst w górę o piksel — 12 px na telefonie czyta się źle. */
	.mbpf-hero__stat-label,
	.mbpf-about-hero__chip,
	.mbpf-contact__label,
	.mbpf-review__date,
	.mbpf-post__meta {
		font-size: .8125rem;
	}

	.mbpf-singles {
		padding: 1.5rem 1rem;
	}

	/* Przy 15 px różowa pigułka łamie się na telefonie na dwa wiersze. */
	.mbpf-singles__eyebrow {
		font-size: .8125rem;
		letter-spacing: .04em;
	}

	/*
	 * Karta działu kładzie się poziomo: miniatura 120 px z lewej, treść z prawej.
	 * Pionowa okładka na pełną szerokość zabierała 291 px, przez co lista klasy 4
	 * miała 5 200 px, a matura ponad 10 000.
	 */
	.mbpf a.mbpf-single {
		display: grid;
		/* 100 px na miniaturę: przy 120 kolumna z tekstem miała 171 px i punkty
		   łamały się po dwa razy, a przycisk wchodził w drugi wiersz. */
		grid-template-columns: 100px minmax(0, 1fr);
		align-items: start;
	}

	.mbpf-single__cover {
		aspect-ratio: 1;
	}

	.mbpf-single__cover img {
		height: 100%;
		object-fit: cover;
	}

	.mbpf-single__body {
		padding: .75rem .875rem .875rem .75rem;
	}

	/* Przy tak małej miniaturze napis na okładce jest nieczytelny — nazwa wraca. */
	.mbpf-single__name--cover {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.mbpf-single__kicker,
	.mbpf-single__name,
	.mbpf-single__label {
		text-align: left;
	}

	.mbpf-single__cta {
		margin-top: .5rem;
	}

	.mbpf-singles__grid {
		gap: .75rem;
	}

	.mbpf-problems__figure img,
	.mbpf-problems__figure--empty {
		height: 220px;
		min-height: 220px;
	}

	.mbpf-contact__form {
		padding: 1.5rem 1.25rem;
	}

	/* Okładka schodzi pod treść — przy szerokości telefonu obok zostawałby
	   z niej pasek szerokości kilku centymetrów. */
	.mbpf-exam {
		grid-template-columns: minmax(0, 1fr);
		padding: 1.5rem 1.25rem;
	}

	.mbpf-exam__book {
		align-self: center;
		max-width: 190px;
	}

	/* Na wąskim ekranie pseudonim nie mieści się w kafelku o szerokości ⅓ ekranu,
	   więc kafle wracają do układu poziomego: znak z lewej, treść z prawej. */
	.mbpf-contact__socials {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf a.mbpf-contact__social {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: .875rem;
		align-items: center;
		padding: 1rem 1.125rem;
	}

	.mbpf-contact__brand {
		grid-row: 1 / 4;
		margin-bottom: 0;
	}

	/* Cztery liczby w dwóch rzędach po dwie — w jednym wierszu podpisy robiły się
	   nieczytelne, a przy zawijaniu flexem rzędy miały różne wysokości. */
	.mbpf-hero__stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.125rem 1rem;
		max-width: none;
	}

	.mbpf-hero__stat-value {
		font-size: 1.375rem;
	}

	.mbpf-hero__stat-label {
		font-size: .8125rem;
		line-height: 1.3;
	}

	/* Waga jak w regule bazowej, inaczej przycisk nie rozciągnie się na wiersz. */
	.mbpf .mbpf-hero__actions a.mbpf-btn {
		flex: 1 1 100%;
	}

	.mbpf-features,
	.mbpf-classlist,
	.mbpf-benefits__grid,
	.mbpf-reviews__grid,
	.mbpf-faq__grid,
	.mbpf-blog__grid,
	.mbpf-catalog__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-filters {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Na wąskim ekranie kafelek układa się w dwa wiersze: treść, potem akcja. */
	.mbpf-classcard {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.mbpf-classcard__thumb {
		width: 7rem;
	}

	.mbpf-classcard__body {
		flex: 1 1 8rem;
	}

	.mbpf-classcard__side {
		flex: 1 1 100%;
		margin-left: 0;
		justify-items: stretch;
		text-align: center;
	}

	.mbpf-classcard__go {
		justify-content: center;
	}

	.mbpf-why__actions .mbpf-btn,
	.mbpf-benefits__actions .mbpf-btn,
	.mbpf-cta__actions .mbpf-btn {
		flex: 1 1 100%;
	}

	.mbpf-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 479px) {

	.mbpf-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mbpf-hero__stat-value {
		font-size: 1.25rem;
	}

	/* Podpis liczby zostaje na 13 px — przy 12 px robił się nieczytelny. */
	.mbpf-hero__stat-label {
		font-size: .8125rem;
	}
}

/* Pasek administratora na wąskich ekranach ma 46 px i nie jest przyklejony. */
@media (max-width: 782px) {
	.mbpf.admin-bar {
		--mbpf-adminbar: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbpf *,
	.mbpf *::before,
	.mbpf *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	/* Bezpiecznik: gdyby skrypt nie zdążył odsłonić bloków, i tak mają być widoczne. */
	.mbpf-js [data-mbpf-reveal] {
		opacity: 1;
		transform: none;
	}
}


/* ============================================================================
 * Podstrona pakietu klasy — „KLASA X WSZYSTKIE DZIAŁY”
 * Układ z makiety: okładka, opis i karta ceny w jednym rzędzie, pod nimi pasek
 * liczb, zakres materiału, lista działów z kolumną dowodów, pytania i domknięcie.
 * ========================================================================== */

.mbpf-packpage {
	padding-block: 1.5rem 2.5rem;
	background: var(--mbpf-hero-bg);
}

/*
 * Hero pakietu. Cennik po prawej jest o kilkaset pikseli wyższy od okładki, więc pod
 * okładką i tytułem zostawała pustka — wchodzi w nią pasek korzyści, dotąd renderowany
 * jako osobna sekcja pod hero. Cennik rozciąga się na oba wiersze.
 */
.mbpf-packpage__grid {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 340px);
	grid-template-areas:
		"fig  body aside"
		"gain gain aside";
	grid-template-rows: auto 1fr;
	align-items: start;
	gap: 1.75rem;
	margin-top: 1.25rem;
}

.mbpf-packpage__figure { grid-area: fig; }
.mbpf-packpage__body   { grid-area: body; }
.mbpf-packpage__aside  { grid-area: aside; }
.mbpf-packpage__gain   { grid-area: gain; }

.mbpf-packpage__figure {
	position: relative;
	border-radius: var(--mbpf-radius-lg);
	overflow: hidden;
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
}

.mbpf .mbpf-packpage__cover { display: block; width: 100%; height: auto; }

.mbpf-packpage__sale {
	position: absolute;
	top: .75rem;
	right: .75rem;
	padding: .3125rem .75rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .9375rem;
	font-weight: 800;
	color: #7a3524;
}

.mbpf-packpage__kicker {
	margin: 0 0 .5rem;
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mbpf-green);
}

.mbpf-packpage__title {
	margin: 0 0 .75rem;
	font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: var(--mbpf-ink);
}

.mbpf-packpage__lead {
	margin: 0 0 1.25rem;
	max-width: 32rem;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: rgba(26, 26, 26, .72);
}

.mbpf-packpage__badges {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-packpage__badges li {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .4375rem .875rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: 999px;
	background: var(--mbpf-white);
	font-size: .875rem;
	font-weight: 600;
	color: var(--mbpf-ink);
}

.mbpf-packpage__badges li > span { display: flex; line-height: 0; color: var(--mbpf-green); }

/* Karta ceny: jedna liczba prowadzi, reszta ją tłumaczy. */
.mbpf-packpage__card {
	position: sticky;
	top: calc(var(--mbpf-header-h) + 1rem);
	display: grid;
	gap: .625rem;
	padding: 1.5rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
	box-shadow: var(--mbpf-shadow);
}

.mbpf-packpage__flag {
	justify-self: start;
	margin: 0;
	padding: .3125rem .75rem;
	border-radius: 999px;
	background: var(--mbpf-coral);
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .04em;
	color: #7a3524;
}

.mbpf-packpage__price { margin: 0; }

.mbpf-packpage__now {
	font-size: clamp(2.25rem, 1.7rem + 1.6vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--mbpf-green);
}

.mbpf-packpage__was {
	margin: 0;
	font-size: 1rem;
	color: rgba(26, 26, 26, .6);
}

.mbpf-packpage__was s { color: #b3392a; }

.mbpf-packpage__chip {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	padding: .375rem .875rem;
	border-radius: 999px;
	background: var(--mbpf-mint-soft);
	font-size: .9375rem;
	font-weight: 800;
	color: #1f4a3d;
}

.mbpf-packpage__chip > span { display: flex; line-height: 0; }

.mbpf-packpage__note {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(26, 26, 26, .7);
}

.mbpf-packpage__owned {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--mbpf-green);
}

/* Kto ma część działów kupioną osobno, ma o tym wiedzieć przed zapłatą za komplet. */
.mbpf-packpage__owned-part {
	margin: 0;
	padding: .5rem .75rem;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-green-06);
	font-size: .875rem;
	color: var(--mbpf-green);
}

.mbpf .mbpf-packpage__cta { width: 100%; justify-content: center; text-align: center; }

.mbpf-packpage__omnibus {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--mbpf-muted);
}

.mbpf-packpage__pay {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding-top: .75rem;
	border-top: 1px solid var(--mbpf-card-line);
	font-size: .875rem;
	color: rgba(26, 26, 26, .7);
}

.mbpf-packpage__pay > span:first-child { display: flex; line-height: 0; color: var(--mbpf-green); }

/* --- pasek liczb --- */

.mbpf-packstats__grid {
	display: grid;
	/*
	 * Jedna pozycja to jeden wiersz, więc siatka liczy się szerokością zdania, a nie
	 * kafla: przy 18rem w komórce hero (~860 px w środku) wychodzą dwie kolumny po trzy
	 * wiersze zamiast sześciu wąskich słupków ciągnących się przez pół ekranu telefonu.
	 */
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: .625rem 1.5rem;
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	list-style: none;
}

.mbpf-packstat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .625rem;
	justify-items: start;
	text-align: left;
}

.mbpf-packstat__ico { display: flex; line-height: 0; color: var(--mbpf-green); }
.mbpf-packstat__line { margin: 0; font-size: .9375rem; line-height: 1.35; }
.mbpf-packstat__name { font-weight: 800; color: var(--mbpf-ink); }
.mbpf-packstat__text { color: rgba(26, 26, 26, .62); }

/*
 * Na telefonie zostaje jedna kolumna i najdłuższy wiersz („Zadania i ćwiczenia - od
 * prostych po trudne") ledwo się mieści. Świadomie bez `white-space: nowrap`: gdyby
 * prowadzący wpisał kiedyś dłuższy dopisek, lepiej żeby wiersz się zawinął, niż wyszedł
 * poza ramkę.
 */
/* Na tablecie kolumny są węższe niż na monitorze, a wiersz ma zostać wierszem. */
@media (max-width: 900px) {
	.mbpf-packstat__line { font-size: .875rem; }
}

@media (max-width: 480px) {
	.mbpf-packstats__grid { padding: 1rem; gap: .5rem; }
	.mbpf-packstat__line { font-size: .8125rem; }
}

/* Na najwęższych telefonach najdłuższy wiersz mieści się dopiero przy 12 px. */
@media (max-width: 380px) {
	.mbpf-packstat__line { font-size: .75rem; }
}

/* --- zakres materiału --- */

.mbpf-packscope { padding-block: 2rem; background: var(--mbpf-section-bg); }

.mbpf-packscope__card {
	padding: 2rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-white);
}

.mbpf-packscope__lead {
	margin: 0 0 1.25rem;
	max-width: 48rem;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(26, 26, 26, .72);
}

.mbpf-packscope__note {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-green-06);
}

.mbpf-packscope__note-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .25rem;
	font-weight: 800;
	color: var(--mbpf-green);
}

.mbpf-packscope__note-title > span { display: flex; line-height: 0; }
.mbpf-packscope__note-text { margin: 0; font-size: .9375rem; line-height: 1.5; color: rgba(26, 26, 26, .72); }

.mbpf-packscope__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbpf-packperk {
	display: grid;
	gap: .375rem;
	padding: 1.125rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-section-bg);
}

.mbpf-packperk__ico {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
	line-height: 0;
	color: var(--mbpf-green);
}

.mbpf-packperk__name { margin: .25rem 0 0; font-weight: 800; color: var(--mbpf-ink); }
.mbpf-packperk__text { margin: 0; font-size: .875rem; line-height: 1.5; color: rgba(26, 26, 26, .68); }

/* --- lista działów --- */

.mbpf-packlist { padding-block: 2rem; background: var(--mbpf-white); }

.mbpf-packlist__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
	align-items: start;
	gap: 1.5rem;
}

.mbpf-packlist__main {
	padding: 1.75rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
}

.mbpf-packlist__items {
	display: grid;
	gap: .25rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mbpf-packitem {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: .75rem;
	padding: .625rem .5rem;
	border-radius: var(--mbpf-radius);
}

.mbpf-packitem:hover { background: var(--mbpf-section-bg); }

.mbpf-packitem__no {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: var(--mbpf-mint-soft);
	font-size: .8125rem;
	font-weight: 800;
	color: #1f4a3d;
}

.mbpf .mbpf-packitem__name { font-weight: 700; color: var(--mbpf-ink); text-decoration: none; }
.mbpf .mbpf-packitem__name:hover { color: var(--mbpf-green); }
.mbpf-packitem__meta { font-size: .8125rem; color: var(--mbpf-muted); white-space: nowrap; }
.mbpf-packitem__price { font-size: .8125rem; color: rgba(26, 26, 26, .5); white-space: nowrap; }

.mbpf-packlist__sum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-section-bg);
}

.mbpf-packlist__apart { margin: 0; font-size: .9375rem; color: rgba(26, 26, 26, .7); }
.mbpf-packlist__apart s { color: #b3392a; }

.mbpf-packlist__save {
	display: flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: var(--mbpf-mint-soft);
	font-weight: 800;
	color: #1f4a3d;
}

.mbpf-packlist__save > span { display: flex; line-height: 0; }

.mbpf-packlist__missing {
	margin: .75rem 0 0;
	font-size: .8125rem;
	color: var(--mbpf-muted);
}

/* --- kolumna dowodów --- */

.mbpf-packlist__side { display: grid; gap: 1rem; }

.mbpf-packside {
	padding: 1.25rem;
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius-lg);
	background: var(--mbpf-section-bg);
}

.mbpf-packside__kicker {
	margin: 0 0 .25rem;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mbpf-muted);
}

.mbpf-packside__count { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; color: var(--mbpf-ink); }
.mbpf-packside__title { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 800; color: var(--mbpf-ink); }

.mbpf-packside__avatars {
	display: flex;
	margin: .875rem 0 0;
	padding: 0;
	list-style: none;
}

.mbpf-packside__avatars li {
	width: 2.5rem;
	height: 2.5rem;
	margin-left: -.625rem;
	border-radius: 999px;
	border: 2px solid var(--mbpf-white);
	overflow: hidden;
	background: var(--mbpf-mint-soft);
}

.mbpf-packside__avatars li:first-child { margin-left: 0; }
.mbpf .mbpf-packside__avatars img { width: 100%; height: 100%; object-fit: cover; }

.mbpf-packside__initial {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-weight: 800;
	color: #1f4a3d;
}

.mbpf-packside__player { border-radius: var(--mbpf-radius); }

.mbpf-packside__note {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: .875rem 0 0;
	font-size: .875rem;
	line-height: 1.45;
	color: rgba(26, 26, 26, .7);
}

.mbpf-packside__note > span { display: flex; line-height: 0; flex: none; margin-top: .125rem; color: var(--mbpf-green); }

/* --- pytania i domknięcie --- */

.mbpf-packfaq { padding-block: 2rem; background: var(--mbpf-section-bg); }
.mbpf-packfaq__list { display: grid; gap: .625rem; margin-top: 1.25rem; }

.mbpf-packfaq__item {
	border: 1px solid var(--mbpf-card-line);
	border-radius: var(--mbpf-radius);
	background: var(--mbpf-white);
}

.mbpf-packfaq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-weight: 700;
	color: var(--mbpf-ink);
	list-style: none;
}

.mbpf-packfaq__q::-webkit-details-marker { display: none; }
.mbpf-packfaq__q::marker { content: ""; }
.mbpf-packfaq__q:hover { color: var(--mbpf-green); }
.mbpf-packfaq__chev { display: flex; line-height: 0; transition: transform .15s ease; }
.mbpf-packfaq__item[open] .mbpf-packfaq__chev { transform: rotate(180deg); }

.mbpf-packfaq__a {
	margin: 0;
	padding: 0 1.25rem 1.125rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(26, 26, 26, .72);
}

.mbpf-packtrust { padding-block: 1.5rem 2.5rem; background: var(--mbpf-white); }

.mbpf-packtrust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2.5rem;
	margin: 0;
	padding: 1.25rem;
	border-top: 1px solid var(--mbpf-card-line);
	list-style: none;
}

.mbpf-packtrust__list li {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	font-weight: 600;
	color: rgba(26, 26, 26, .72);
}

.mbpf-packtrust__list li > span:first-child { display: flex; line-height: 0; color: var(--mbpf-green); }

@media (max-width: 1199px) {
	/* Karta ceny schodzi pod opis, okładka zostaje obok — trzy kolumny się nie mieszczą. */
	.mbpf-packpage__grid {
		grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
		grid-template-areas:
			"fig   body"
			"gain  gain"
			"aside aside";
		grid-template-rows: auto;
	}
	.mbpf-packpage__card { position: static; }
	.mbpf-packlist__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.mbpf-packpage__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "fig" "body" "gain" "aside";
	}
	.mbpf-packscope__card { padding: 1.25rem; }
	.mbpf-packlist__main { padding: 1.125rem; }

	/* Cena i liczba lekcji schodzą pod nazwę działu — w jednym wierszu się nie mieszczą. */
	.mbpf-packitem {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: .25rem;
	}

	.mbpf-packitem__meta,
	.mbpf-packitem__price { grid-column: 2; }
}


/*
 * Kreator i „Dlaczego warto” stały ze sobą przez 184 px pustki (88 + 96) i między
 * kaflami klas a następną sekcją robiła się dziura. Tniemy po równo z obu stron.
 * Reguły sąsiedztwa, żeby nie ruszać tych sekcji tam, gdzie stoją osobno —
 * kreator jest też na stronie „Wybierz klasę”.
 */
.mbpf-wizard:has(+ .mbpf-why) { padding-bottom: 2.5rem; }
.mbpf-wizard + .mbpf-why { padding-top: 3rem; }