/* =====================================================================
   SEKCJE STRONY SPRZEDAZOWEJ

   Zasady (specyfikacja 2):
   - kolory wylacznie ze zmiennych (--bp-... z „Dostosuj", --im-... ze
     `style.css`), zadnego koloru wpisanego wprost,
   - rozmiary, odstepy i szerokosci w rem; piksele tylko dla wlosa
     ramki, cienia i grubosci kreski,
   - naglowki H1-H3 bez wlasnego rozmiaru - rozmiar z „Rozmiarow pisma",
   - kazda sekcja uzywa kontenera `.bp-tresc` wprost,
   - progi ekranow te same co u rodzica: 30em, 40em, 60em, 64em, 90em.
   ===================================================================== */

/* --- wspolne ----------------------------------------------------------- */

.im-tresc {
	display: block;
	overflow-x: clip;
}

.im-sekcja {
	position: relative;
	padding-block: 9rem;
}

.im-sekcja--bez-gory { padding-top: 0; }
.im-sekcja--jasna { background: var(--bp-tlo-jasne); }
.im-sekcja--biala { background: var(--im-bialy); }
.im-sekcja--wcieta { padding-block: 0; }

@media (min-width: 60em) {
	.im-sekcja { padding-block: 14rem; }
	.im-sekcja--bez-gory { padding-top: 0; }
	.im-sekcja--wcieta { padding-block: 0; }
}

.im-dwie {
	display: grid;
	gap: 4rem;
	grid-template-columns: minmax(0, 1fr);
}

.im-dwie--start { align-items: start; }
.im-dwie--srodek { align-items: center; }

@media (min-width: 60em) {
	.im-dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5.6rem; }
	.im-dwie--szerzej { gap: 6.4rem; }
	.im-przyklejone { position: sticky; top: 12rem; }
}

.im-tekst {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	color: var(--bp-tekst-2);
	line-height: 1.75;
}

.im-tekst > * { margin: 0; }

.im-tekst h2,
.im-naglowek-sekcji h2,
.im-cena h2 {
	color: var(--bp-czern);
}

.im-etykieta {
	margin: 0;
	color: var(--im-etykieta);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.im-etykieta--zlota { color: var(--im-zloto); }

.im-mala-etykieta {
	margin: 0;
	font-family: var(--bp-pismo);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.im-lead {
	color: var(--bp-tekst);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.5;
}

.im-lead--mniejszy { font-size: 1.8rem; }

.im-lead--naglowkowy {
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.2rem;
	font-weight: 700;
}

.im-poboczny { color: var(--bp-tekst-2); }
.im-jasny-poboczny { color: var(--im-krem-poboczny); }
.im-zloty { color: var(--im-zloto); }
.im-morski { color: var(--bp-akcent); }
.im-wysrodkowany { text-align: center; }

.im-cytat-kreska {
	padding-left: 2rem;
	border-left: 3px solid var(--im-zloto);
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.45;
}

.im-mocny-akapit {
	color: var(--bp-tekst);
	font-weight: 600;
}

.im-uwaga {
	padding: 1.8rem 2rem;
	border-radius: 1.6rem;
	background: var(--bp-tlo-jasne);
	color: var(--bp-tekst-2);
	font-size: 1.6rem;
	line-height: 1.65;
}

.im-naglowek-sekcji {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.im-naglowek-sekcji--waski { max-width: 92rem; }

.im-naglowek-sekcji--srodek {
	max-width: 86rem;
	margin-inline: auto;
	align-items: center;
	text-align: center;
}

.im-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	align-items: center;
}

.im-przyciski--srodek { justify-content: center; }

.im-kup--pelny { width: 100%; text-align: center; }

/* Zdjecia w ramkach - zawsze zaokraglone, nigdy wychodzace z krawedzi. */
.im-ramka {
	position: relative;
	overflow: hidden;
	border-radius: 2.8rem;
	background: var(--im-ramka-tlo);
}

.im-ramka--4x3 { aspect-ratio: 4 / 3; }
.im-ramka--5x4 { aspect-ratio: 5 / 4; }
.im-ramka--4x5 { aspect-ratio: 4 / 5; border-radius: 3.2rem; }
.im-ramka--16x10 { aspect-ratio: 16 / 10; }
.im-ramka--2x1 { aspect-ratio: 2 / 1; border-radius: 2.4rem; }
.im-ramka--1x1 { aspect-ratio: 1; border-radius: 2.2rem; }
.im-ramka--cien { box-shadow: 0 40px 80px -50px var(--im-cien); }

.im-ramka--na-ciemnym {
	border: 1px solid var(--im-krem-slaby);
	background: var(--im-krem-slaby);
}

.im-ramka__obraz,
.im-ramka > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.im-ramka__obraz--twarz { object-position: 50% 20%; }

.im-ramka .im-uzupelnij {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Kafle z numerami */
.im-kafle {
	display: grid;
	gap: 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-kafel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.8rem;
	border-radius: 1.8rem;
	line-height: 1.45;
}

.im-numer {
	color: var(--im-etykieta);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.6rem;
	font-weight: 700;
}

.im-kafel__tekst {
	color: var(--bp-tekst);
	font-size: 1.7rem;
	font-weight: 600;
}

.im-kafle--karta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.im-kafle--karta .im-kafel { background: var(--im-karta-jasna); }

.im-kafle--obrys { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }

.im-kafle--obrys .im-kafel {
	gap: .6rem;
	padding: 1.6rem;
	border: 1.5px solid var(--im-morska-linia);
	border-radius: 1.6rem;
	background: var(--im-bialy);
}

.im-kafle--obrys .im-kafel__tekst { line-height: 1.35; }

.im-kafle--ciemne { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

.im-kafle--ciemne .im-kafel {
	gap: 1.2rem;
	padding: 2.2rem;
	border: 1px solid var(--im-krem-slaby);
	border-radius: 2rem;
	background: var(--im-krem-slaby);
}

.im-kafle--ciemne .im-numer { color: var(--im-zloto-jasne); }

.im-kafle--ciemne .im-kafel__tekst {
	color: var(--im-krem-tekst);
	font-weight: 400;
}

.im-kafle--ciemne .im-kafel--zloty {
	justify-content: center;
	border-color: var(--im-zloto);
	background: var(--im-zloto);
}

.im-kafle--ciemne .im-kafel--zloty .im-kafel__tekst {
	color: var(--im-grafit);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.35;
}

/* Chipy */
.im-chipy {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-chipy li {
	padding: .8rem 1.3rem;
	border-radius: 99rem;
	background: var(--im-krem-slaby);
	color: var(--im-krem-tekst);
	font-size: 1.6rem;
	font-weight: 600;
}

.im-chipy--duze { justify-content: center; gap: 1rem; max-width: 76rem; }

.im-chipy--duze li {
	padding: 1.1rem 1.8rem;
	border: 1px solid var(--im-krem-linia);
	font-size: 1.7rem;
}

/* Lista z ptaszkami */
.im-ptaszki {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
	gap: 1.2rem;
	margin: 1.8rem 0 0;
	padding: 0;
	list-style: none;
}

.im-ptaszki li {
	display: flex;
	gap: 1.4rem;
	padding: 2rem 2.2rem;
	border: 1px solid var(--im-morska-linia);
	border-radius: 1.8rem;
	background: var(--im-bialy);
	color: var(--bp-tekst);
	font-size: 1.7rem;
	line-height: 1.5;
}

.im-ptaszek {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--bp-akcent);
	color: var(--im-bialy);
	font-size: 1.4rem;
	line-height: 1;
}

.im-ptaszki--proste { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 0; }

.im-ptaszki--proste li {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bp-tekst-2);
	line-height: 1.6;
}

.im-ptaszki--proste p { margin: 0; }
.im-ptaszki--proste strong { color: var(--bp-tekst); }

/* Okragle zdjecie autora */
.im-avatar {
	display: inline-block;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--im-bialy);
}

/* Portret autora jest pionowy, a twarz stoi na nim lekko w lewo od
   srodka - w kolku zdjecie jest powiekszone i przesuniete tak, zeby
   twarz wypadla na srodku. */
.im-avatar__obraz {
	display: block;
	width: 120%;
	max-width: none;
	height: auto;
	margin: -12% 0 0 -1%;
}

.im-avatar--notka { width: 5.8rem; height: 5.8rem; }

.im-avatar--duzy {
	width: 18rem;
	height: 18rem;
	box-shadow: 0 0 0 8px var(--im-krem-slaby), 0 0 0 10px var(--im-zloto);
}

/* Okragly przycisk odtwarzania - kolory przycisku glownego. */
.im-odtworz {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	padding-left: .4rem;
	border-radius: 50%;
	background: var(--bp-btn-tlo);
	color: var(--bp-btn-napis);
	font-size: 2rem;
	line-height: 1;
}

.im-odtworz--duzy {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9rem;
	height: 9rem;
	font-size: 2.8rem;
	transform: translate(-50%, -50%);
}

/* Poswiaty w tle */
.im-poswiata {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
}

.im-poswiata--zlota {
	right: -22rem;
	top: -18rem;
	width: 82rem;
	height: 82rem;
	background: radial-gradient(circle, var(--im-poswiata-zlota), var(--im-przezroczysty) 66%);
}

.im-poswiata--morska {
	left: -26rem;
	bottom: -32rem;
	width: 64rem;
	height: 64rem;
	background: radial-gradient(circle, var(--im-morska-mgla), var(--im-przezroczysty) 66%);
}

.im-poswiata--blok,
.im-poswiata--cytat {
	left: -12rem;
	top: -12rem;
	width: 42rem;
	height: 42rem;
	background: radial-gradient(circle, var(--im-poswiata-zlota-slaba), var(--im-przezroczysty) 70%);
}

/* --- pierwszy ekran ---------------------------------------------------- */

.im-hero {
	position: relative;
	overflow: hidden;
}

.im-hero__siatka {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 5.6rem;
	align-items: center;
	padding-block: 5rem;
}

@media (min-width: 60em) {
	.im-hero__siatka { padding-block: 6.4rem; }
}

.im-hero__tekst {
	display: flex;
	flex: 1 1 56rem;
	flex-direction: column;
	gap: 2.8rem;
	min-width: 0;
}

.im-pigulka {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 1.2rem;
	margin: 0;
	padding: .7rem 1.8rem .7rem .7rem;
	border: 1px solid var(--im-morska-linia);
	border-radius: 99rem;
	background: var(--im-bialy);
	box-shadow: 0 10px 24px -18px var(--im-cien);
	color: var(--bp-czern);
	font-size: 1.6rem;
	font-weight: 600;
}

.im-pigulka strong { font-weight: 800; }

/* Kropka rysowana jako tlo kolka (gradient), a nie osobny element -
   osobny element o rozmiarze 1rem przy powiekszeniu ekranu 125% wypada
   miedzy pikselami i wyglada na lekko splaszczony. */
.im-pigulka__kropka {
	display: inline-block;
	flex: none;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	background:
		radial-gradient(circle closest-side, var(--bp-btn-tlo) calc(100% - 1px), var(--im-przezroczysty) 100%) center / 1rem 1rem no-repeat,
		var(--im-morska-mgla);
}

.im-hero__tytul {
	color: var(--bp-akcent);
	line-height: 1.02;
	letter-spacing: -.025em;
}

.im-hero__wiersz {
	display: block;
	white-space: nowrap;
}

.im-hero__wiersz--kolor { color: var(--im-bursztyn); }

.im-hero__zdanie {
	max-width: 54rem;
	margin: 0;
	color: var(--bp-tekst-2);
	font-size: 2rem;
	line-height: 1.55;
}

/* Pierwszy ekran: tekst po lewej, karta z gora lodowa po prawej -
   dwie rowne kolumny, karta (najwyzej 48rem) stoi na srodku prawej
   kolumny, a nie przy prawej krawedzi. */
.im-hero__gora { flex: 1 1 34rem; min-width: 0; }

.im-wideo-link__ikona { font-size: .85em; }

/* Pierwszy ekran zajmuje co najmniej cale okno przegladarki (komputer
   i tablet poziomo): wysokosc = okno minus naglowek (--im-nad-hero
   liczy assets/js/strona.js, zapas 13rem). Nastepna sekcja zaczyna
   sie dopiero ponizej. Karta ma wlasna wysokosc (z szerokosci). */
@media (min-width: 60em) {
	.im-hero {
		--im-hero-dostep: calc(100svh - var(--im-nad-hero, 13rem));
		--im-hero-gora: clamp(2.4rem, 5svh, 6.4rem);
		--im-hero-dol: clamp(2.4rem, 5svh, 6.4rem);
	}

	.im-hero__siatka {
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 8rem;
		align-items: center;
		min-height: var(--im-hero-dostep);
		padding-block: var(--im-hero-gora) var(--im-hero-dol);
	}

	.im-hero__tekst { gap: clamp(1.2rem, 2.6svh, 2.8rem); }

	/* Kolumna tekstu jest kontenerem: tytul (wiersz sie nie lamie)
	   maleje ponizej rozmiaru H1 z „Rozmiarow pisma" tylko wtedy, gdy
	   inaczej nie zmiescilby sie w kolumnie i wszedlby pod karte. */
	.im-hero__tekst { container-type: inline-size; }

	.im-hero__tytul { font-size: min(var(--bp-h1, 7.2rem), 9svh, 11.5cqi); }

	.im-hero__zdanie { font-size: clamp(1.6rem, 2.7svh, 2rem); }
}

/* --- karta pod pierwszym ekranem --------------------------------------- */

.im-karta-sekcja {
	position: relative;
	z-index: 2;
}

.im-karta {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: 3.2rem;
	background: var(--im-bialy);
	box-shadow: 0 50px 100px -60px var(--im-cien);
}

.im-karta__lewa,
.im-karta__prawa {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	min-width: 0;
	padding: 2.6rem;
}

.im-karta__lewa { flex: 1 1 44rem; }

.im-karta__lewa .im-mala-etykieta { color: var(--bp-tekst-2); }

.im-karta__prawa {
	flex: 1 1 40rem;
	background: var(--bp-tlo-jasne);
	line-height: 1.7;
}

.im-karta__prawa p { margin: 0; }
.im-karta__prawa strong { color: var(--bp-tekst); }

@media (min-width: 60em) {
	.im-karta__lewa,
	.im-karta__prawa { padding: 4.8rem; }
}

.im-mocne {
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.35;
}

.im-notka {
	display: flex;
	gap: 1.4rem;
	align-items: flex-start;
	padding-top: 1.6rem;
	border-top: 1px solid var(--im-morska-linia);
}

.im-notka__tekst {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	color: var(--bp-tekst-2);
	font-size: 1.6rem;
	line-height: 1.45;
}

.im-notka__nazwa {
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.7rem;
	font-weight: 700;
}

/* --- 01 problem -------------------------------------------------------- */

.im-problem .im-przyklejone { display: flex; flex-direction: column; gap: 2.4rem; }

.im-mity {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-mity li {
	padding: 1rem 1.4rem;
	border: 1px solid var(--im-morska-linia);
	border-radius: 1.2rem;
	background: var(--im-bialy);
	color: var(--bp-tekst);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.4;
}

.im-mity s {
	text-decoration-color: var(--bp-btn-tlo);
	text-decoration-thickness: 2px;
}

/* --- 02 cel kursu ------------------------------------------------------ */

.im-blok-ciemny {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5.6rem;
	overflow: hidden;
	padding: 4rem 2.4rem;
	border-radius: 4rem;
	background: var(--im-ciemny);
	color: var(--im-krem-tekst);
}

@media (min-width: 60em) {
	.im-blok-ciemny { padding: 8rem 7.2rem; }
}

.im-blok-ciemny > *:not(.im-poswiata) { position: relative; }

.im-cel h2 { color: var(--im-krem-tekst); }
.im-cel .im-lead { color: var(--im-krem-tekst); }
.im-cel__lista { display: flex; flex-direction: column; gap: 1.8rem; }
.im-cel__naglowek { margin: 0; font-size: 1.7rem; font-weight: 600; }

/* --- 03 test ----------------------------------------------------------- */

.im-miniatura {
	display: flex;
	gap: 1.4rem;
	align-items: center;
	max-width: 42rem;
	margin: 0;
	padding: 1rem;
	border-radius: 2rem;
	background: var(--im-bialy);
	box-shadow: 0 20px 40px -30px var(--im-cien);
	color: var(--bp-tekst-2);
	font-size: 1.6rem;
	line-height: 1.5;
}

.im-miniatura__obraz {
	flex: none;
	overflow: hidden;
	width: 11rem;
	aspect-ratio: 4 / 3;
	border-radius: 1.4rem;
}

.im-miniatura__obraz img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 40%;
}

.im-kadr-filmu {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	border-radius: 2.8rem;
	background: var(--im-ramka-tlo);
	box-shadow: 0 40px 80px -50px var(--im-cien);
	text-decoration: none;
}

.im-kadr-filmu--16x9 { aspect-ratio: 16 / 9; }
.im-kadr-filmu--2x1 { aspect-ratio: 16 / 9; }

@media (min-width: 60em) {
	.im-kadr-filmu--2x1 { aspect-ratio: 2 / 1; }
}

.im-kadr-filmu__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.im-kadr-filmu:hover .im-kadr-filmu__obraz { transform: scale(1.03); }

.im-kadr-filmu__napis {
	position: absolute;
	left: 2rem;
	bottom: 2rem;
	padding: .9rem 1.6rem;
	border-radius: 99rem;
	background: var(--im-krem);
	color: var(--bp-czern);
	font-size: 1.6rem;
	font-weight: 700;
}

/* --- 04 historia ------------------------------------------------------- */

.im-historia__siatka { margin-top: 4.8rem; }

.im-karta-objawu {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 3.2rem;
	background: var(--im-bialy);
	box-shadow: 0 40px 80px -50px var(--im-cien-mocny);
}

.im-karta-objawu__foto {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.im-karta-objawu__obraz {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 35%;
}

.im-ruch .im-karta-objawu__obraz { animation: im-zblizenie 14s ease-in-out infinite alternate; }

@keyframes im-zblizenie {
	to { transform: scale(1.08); }
}

.im-plakietka-mala {
	position: absolute;
	left: 1.8rem;
	top: 1.8rem;
	padding: .8rem 1.4rem;
	border-radius: 99rem;
	background: var(--im-bialy);
	color: var(--im-grafit);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.im-karta-objawu__objaw {
	display: flex;
	gap: 1.2rem;
	align-items: center;
	margin: 0;
	padding: 1.8rem 2.6rem;
	border-bottom: 3px dashed var(--im-morska-linia);
	color: var(--im-grafit);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.9rem;
	font-weight: 700;
}

.im-romb {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	background: var(--bp-btn-tlo);
	transform: rotate(45deg);
}

.im-karta-objawu__pod {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	padding: 2.4rem 2.6rem 3rem;
	background: linear-gradient(180deg, var(--im-ciemny), var(--im-najciemniejszy));
	color: var(--im-krem-tekst);
}

/* --- karta z gora lodowa (pierwszy ekran i historia) ---------------- */

/* Karta skaluje sie proporcjonalnie do szerokosci (najwyzej 48rem):
   niebo ma proporcje 2:1, wierzcholek i bryla stale proporcje, odstepy
   w procentach szerokosci. Pod woda karta ma co najmniej proporcje
   48:37,4 (element __miara), a gdy hasla sie nie mieszcza - wydluza sie.
   Wierzcholek (51% szerokosci) i gorna krawedz bryly (59,8% z 86%)
   maja te sama szerokosc - to jeden rysunek przeciety linia wody. */
.im-gl {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 3.2rem;
	box-shadow: 0 50px 90px -50px var(--im-cien-mocny);
}

.im-gl__niebo {
	position: relative;
	aspect-ratio: 2 / 1;
	padding-top: 5.4%;
	background: linear-gradient(180deg, var(--im-bialy) 0%, var(--im-woda-jasna) 100%);
	text-align: center;
}

.im-gl__widac {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0;
	padding: 1rem 2.4rem;
	border-radius: 99rem;
	background: var(--im-bialy);
	box-shadow: 0 14px 30px -18px var(--im-cien);
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.3;
}

.im-gl__widac-poczatek { color: var(--im-bursztyn); }

.im-gl__szczyt {
	position: absolute;
	left: 50%;
	bottom: 0;
	display: block;
	width: 51%;
	height: auto;
	aspect-ratio: 100 / 60;
	transform: translateX(-50%);
}

.im-gl__sciana-1 { fill: var(--im-bialy); }
.im-gl__sciana-2 { fill: var(--im-woda-jasna); }
.im-gl__sciana-3 { fill: var(--im-lod); }

.im-gl__woda {
	position: relative;
	display: grid;
	background: linear-gradient(180deg, var(--im-ciemny) 0%, var(--im-najciemniejszy) 62%, var(--im-glebia) 100%);
}

.im-gl__woda::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--im-bialy) 0 1.4rem, var(--im-przezroczysty) 1.4rem 2.2rem);
}

.im-gl__bryla {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	width: 86%;
	height: auto;
	aspect-ratio: 100 / 85;
	transform: translateX(-50%);
}

.im-gl__bryla-gora { stop-color: var(--im-gl-bryla-gora); }
.im-gl__bryla-dol { stop-color: var(--im-gl-bryla-dol); }
.im-gl__bryla-ksztalt { stroke: var(--im-gl-obrys); stroke-width: .3; }

.im-gl__miara,
.im-gl__tresc { grid-area: 1 / 1; }

.im-gl__miara { aspect-ratio: 480 / 374; }

.im-gl__tresc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
	padding: 8.5% 2.4rem 2.8rem;
	text-align: center;
}

.im-gl__etykieta {
	margin: 0;
	color: var(--im-krem-tekst);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.im-gl__chipy {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-gl__chipy li {
	padding: .7rem 1.5rem;
	border: 1px solid var(--im-krem-linia);
	border-radius: 99rem;
	background: var(--im-gl-chip);
	color: var(--im-krem-tekst);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Historia: karta obok zakonczenia historii. */
.im-gora__karta { width: 100%; }

/* --- 05 zajrzyj do srodka ---------------------------------------------- */

.im-srodek__uklad {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4rem;
}

.im-kadry {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1.4rem;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-kadry .im-ramka { border-radius: 2rem; }

/* --- 06 dla kogo ------------------------------------------------------- */

.im-dla__naglowek {
	margin: 4.4rem 0 0;
	color: var(--bp-tekst);
	font-size: 1.8rem;
	font-weight: 700;
}

.im-karty-trzy {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
	gap: 1.2rem;
	margin-top: 2rem;
}

.im-karta-mala {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2.8rem;
	border-radius: 2.2rem;
	line-height: 1.6;
}

.im-karta-mala p { margin: 0; font-size: 1.7rem; }

.im-karta-mala--1 { background: var(--im-morska-mgla); color: var(--bp-tekst); }
.im-karta-mala--1 h3 { color: var(--bp-czern); }
.im-karta-mala--2 { background: var(--im-grafit); color: var(--im-krem-tekst); }
.im-karta-mala--2 h3 { color: var(--im-zloto); }
.im-karta-mala--3 { border: 1px solid var(--im-morska-linia); background: var(--im-bialy); color: var(--bp-tekst); }
.im-karta-mala--3 h3 { color: var(--im-etykieta); }

/* --- cytat ------------------------------------------------------------- */

.im-cytat {
	overflow: hidden;
	background: var(--im-ciemny);
	color: var(--im-krem-tekst);
}

.im-cytat__uklad {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 4rem;
	align-items: center;
	max-width: 106rem;
	margin: 0 auto;
}

.im-cytat__tresc {
	display: flex;
	flex: 1 1 48rem;
	flex-direction: column;
	gap: 2.4rem;
	min-width: 0;
}

.im-cytat__tekst { margin: 0; }

.im-cytat__tekst p {
	margin: 0;
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

@media (min-width: 60em) {
	.im-cytat__tekst p { font-size: 3.4rem; }
}

/* --- 07 o autorze ------------------------------------------------------ */

.im-autor__zdjecia { display: flex; flex-direction: column; gap: 1.6rem; }

.im-autor__male {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.6rem;
}

.im-podpis-foto {
	position: absolute;
	left: 1.8rem;
	bottom: 1.8rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: 0;
	padding: 1.2rem 1.6rem;
	border-radius: 1.6rem;
	background: var(--im-bialy);
	color: var(--bp-tekst-2);
	font-size: 1.5rem;
}

.im-podpis-foto__nazwa,
.im-podpis__nazwa {
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.7rem;
	font-weight: 700;
}

.im-oceny {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 2rem 2.2rem;
	border-radius: 2rem;
	background: var(--im-karta-jasna);
}

.im-oceny__naglowek { margin: 0; color: var(--bp-czern); font-size: 1.6rem; font-weight: 700; }

.im-oceny__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 3.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-oceny__lista li { display: flex; flex-direction: column; }

.im-oceny__ocena {
	color: var(--bp-akcent);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.8rem;
	font-weight: 700;
}

/* Gwiazdka w kolorze bursztynowym - zlota (--bp-gwiazdki) na jasnej
   karcie nie ma kontrastu 3:1 (M21). */
.im-gwiazdka { color: var(--im-bursztyn); }

.im-oceny__zrodlo { color: var(--bp-tekst-2); font-size: 1.5rem; }

.im-filary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.im-filar {
	padding-top: 1.2rem;
	border-top: 3px solid var(--bp-akcent);
	color: var(--bp-tekst);
	font-size: 1.7rem;
	font-weight: 600;
	line-height: 1.4;
}

.im-filar--2 { border-top-color: var(--im-zloto); }
.im-filar--3 { border-top-color: var(--bp-btn-tlo); }

.im-autor__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--im-morska-linia);
}

.im-podpis { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.im-podpis .im-podpis__nazwa { font-size: 2rem; }

/* --- 08 program -------------------------------------------------------- */

.im-podtytul {
	color: var(--bp-akcent);
	font-size: 1.8rem;
	font-weight: 700;
}

.im-liczby {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 3.2rem;
	margin: 0;
	padding: .6rem 0 0;
	list-style: none;
}

.im-liczby li { display: flex; flex-direction: column; }

.im-liczby__liczba {
	color: var(--bp-akcent);
	font-family: var(--im-pismo-wyroznien);
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.2;
}

.im-liczby__opis { color: var(--bp-tekst-2); font-size: 1.5rem; }

.im-program__naglowek {
	margin: 3.6rem 0 0;
	color: var(--bp-tekst);
	font-size: 1.7rem;
	font-weight: 700;
}

.im-bloki {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin-top: 2rem;
}

.im-blok {
	overflow: hidden;
	border-radius: 2.6rem;
	background: var(--im-bialy);
	box-shadow: 0 20px 40px -34px var(--im-cien);
}

.im-blok__glowka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 2.2rem;
	padding: 2.4rem 2.8rem;
	cursor: pointer;
	list-style: none;
}

.im-blok__glowka::-webkit-details-marker { display: none; }

.im-blok__nr {
	flex: none;
	padding: .8rem 1.2rem;
	border-radius: 1.2rem;
	background: var(--bp-akcent);
	color: var(--im-krem-tekst);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.7rem;
	font-weight: 700;
}

.im-blok__tytul {
	flex: 1;
	min-width: 22rem;
	color: var(--bp-tekst);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
}

@media (min-width: 60em) {
	.im-blok__tytul { font-size: 2.3rem; }
}

.im-blok__ile { color: var(--bp-tekst-2); font-size: 1.6rem; font-weight: 500; }

.im-blok__znak {
	position: relative;
	flex: none;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: var(--im-karta-jasna);
}

.im-blok__znak::before,
.im-blok__znak::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.4rem;
	height: 2px;
	background: var(--bp-akcent);
	transform: translate(-50%, -50%);
}

.im-blok__znak::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s ease; }
.im-blok[open] .im-blok__znak::after { transform: translate(-50%, -50%) rotate(0deg); }

.im-lekcje {
	margin: 0;
	padding: 0 2.8rem 2rem;
	list-style: none;
}

.im-lekcja {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem 1.8rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--im-morska-linia);
}

.im-lekcja__nr {
	flex: none;
	width: 9rem;
	color: var(--im-etykieta);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.6rem;
	font-weight: 700;
}

.im-lekcja__tytul {
	flex: 1;
	min-width: 22rem;
	color: var(--bp-tekst);
	font-size: 1.7rem;
	line-height: 1.5;
}

.im-lekcja__czas { color: var(--bp-tekst-2); font-size: 1.5rem; white-space: nowrap; }

@media (max-width: 39.99em) {
	.im-lekcje { padding-inline: 2rem; }
	.im-blok__glowka { padding: 2rem; }
	.im-lekcja { gap: .4rem 1.2rem; }
	.im-lekcja__nr { width: auto; }
	.im-lekcja__tytul { flex-basis: 100%; min-width: 0; order: 3; }
	.im-blok__tytul { min-width: 0; flex-basis: calc(100% - 9rem); }
}

/* --- cena -------------------------------------------------------------- */

.im-cena .bp-tresc { display: flex; flex-direction: column; gap: 4.4rem; }

.im-cena__uklad {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	border-radius: 3.6rem;
	box-shadow: 0 60px 100px -60px var(--im-cien);
}

.im-cena__lewa,
.im-cena__prawa {
	display: flex;
	flex-direction: column;
	gap: 2.2rem;
	min-width: 0;
	padding: 2.8rem;
}

@media (min-width: 60em) {
	.im-cena__lewa,
	.im-cena__prawa { padding: 5.2rem; }
}

.im-cena__lewa {
	position: relative;
	flex: 1 1 42rem;
	justify-content: center;
	overflow: hidden;
	background: var(--im-ciemny);
	color: var(--im-krem-tekst);
}

.im-etykieta-pigulka {
	align-self: flex-start;
	margin: 0;
	padding: .7rem 1.4rem;
	border-radius: 99rem;
	background: var(--bp-btn-tlo);
	color: var(--bp-btn-napis);
	font-size: 1.5rem;
	font-weight: 700;
}

.im-cena__lewa { align-items: center; text-align: center; }
.im-cena__ceny { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: 0; }

.im-cena__kwota {
	color: var(--im-zloto);
	font-family: var(--im-pismo-wyroznien);
	font-size: 6.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
}

@media (min-width: 60em) {
	.im-cena__kwota { font-size: 9.6rem; }
}

.im-cena__jednorazowo {
	padding-top: .6rem;
	font-family: var(--im-pismo-wyroznien);
	font-size: 2rem;
	font-weight: 700;
}

.im-cena__prawa {
	flex: 1 1 44rem;
	background: var(--im-bialy);
}

.im-cena__naglowek { margin: 0; color: var(--bp-czern); font-size: 1.7rem; font-weight: 700; }

/* --- 09 koszt ---------------------------------------------------------- */

.im-karty-kosztow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
	gap: 1.4rem;
	margin: 4rem 0 0;
	padding: 0;
	list-style: none;
}

.im-karta-kosztu {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 2.8rem;
	border-radius: 2.4rem;
	background: var(--im-bialy);
}

.im-karta-kosztu__liczba {
	color: var(--bp-akcent);
	font-family: var(--im-pismo-wyroznien);
	font-size: 3.2rem;
	font-weight: 700;
	line-height: 1;
}

.im-strona .im-karta-kosztu__tytul {
	color: var(--bp-tekst);
	font-family: var(--bp-pismo);
	letter-spacing: 0;
	line-height: 1.3;
}

.im-karta-kosztu p {
	margin: 0;
	color: var(--bp-tekst-2);
	font-size: 1.6rem;
	line-height: 1.65;
}

.im-koszt__dol { margin-top: 5.6rem; }

.im-puenta {
	margin: 0;
	color: var(--bp-tekst);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.35;
}

@media (min-width: 60em) {
	.im-puenta { font-size: 3rem; }
}

/* --- okno wideo -------------------------------------------------------- */

.im-okno {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.4rem;
	background: var(--im-zaslona);
	backdrop-filter: blur(6px);
}

.im-okno[hidden] { display: none; }

.im-okno__ekran {
	position: relative;
	overflow: hidden;
	width: min(110rem, 100%);
	aspect-ratio: 16 / 9;
	border-radius: 2.4rem;
	background: var(--im-najciemniejszy);
	box-shadow: 0 40px 100px -20px var(--im-cien-czarny-mocny);
}

.im-okno__ekran iframe,
.im-okno__ekran video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.im-okno__brak {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	padding: 3.2rem;
	color: var(--im-krem-tekst);
	text-align: center;
}

.im-okno__brak[hidden] { display: none; }
.im-okno__brak p { margin: 0; font-size: 1.7rem; }

.im-okno__tytul {
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.4rem;
	font-weight: 700;
}

/* Krzyzyk zamykajacy okno zostaje okragly (M4 - nie jest przyciskiem). */
.im-okno__zamknij {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 4.8rem;
	height: 4.8rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--im-krem);
	color: var(--im-grafit);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.im-okno-otwarte,
.im-okno-otwarte body { overflow: hidden; }

/* --- ruch --------------------------------------------------------------- */

.im-ruch .im-ukryte {
	opacity: 0;
	translate: 0 3.2rem;
	transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1);
}

.im-ruch .im-ukryte.im-widoczne {
	opacity: 1;
	translate: 0 0;
}

.im-ruch [data-im-unos] { animation: im-unos 4.2s ease-in-out infinite; }

@keyframes im-unos {
	50% { translate: 0 -1.2rem; }
}

.im-ruch [data-im-puls] { animation: im-puls 1.9s ease-out infinite; }

@keyframes im-puls {
	from { box-shadow: 0 0 0 0 var(--im-puls); }
	to { box-shadow: 0 0 0 26px var(--im-przezroczysty); }
}

/* --- uklad wedlug pliku tresci (1.1) ---------------------------------- */

.im-hero__haslo {
	max-width: 54rem;
	margin: 0;
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.3;
}

@media (min-width: 60em) {
	.im-hero__haslo { font-size: clamp(2rem, 3.2svh, 2.8rem); }
}

/* Ostrzezenie pod filmem z testem - ramka w kolorze przycisku, zeby
   nie zginelo, ale bez wygladu przycisku. */
.im-ostrzezenie,
.im-ramka-tekstu {
	max-width: 84rem;
	margin: 4rem auto 0;
	padding: 1.8rem 2.2rem;
	border: 2px solid var(--bp-btn-tlo);
	border-radius: 1.6rem;
	background: var(--im-bialy);
	color: var(--bp-tekst);
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}

.im-ostrzezenie strong { font-weight: 700; }

/* Akapit zamykajacy sekcji kosztow - w takiej samej ramce. */
.im-ramka-tekstu { margin: 0; font-weight: 600; }
.im-ramka-tekstu p { margin: 0; }
.im-ramka-tekstu p + p { margin-top: 1.2rem; }

/* Plansza filmu, dopoki nie ma klatki z prawdziwego nagrania. */
.im-kadr-filmu--plansza {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(150deg, var(--im-ciemny) 0%, var(--im-najciemniejszy) 100%);
}

.im-kadr-filmu--plansza .im-odtworz {
	position: static;
	transform: none;
}

.im-kadr-filmu__tytul {
	position: absolute;
	left: 2.4rem;
	right: 2.4rem;
	bottom: 2.2rem;
	color: var(--im-krem-tekst);
	font-family: var(--im-pismo-wyroznien);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.3;
}

.im-historia__kolumna {
	display: flex;
	flex-direction: column;
	gap: 3.2rem;
	max-width: 80rem;
	margin-inline: auto;
}

.im-historia__kolumna h2 { margin: 0; color: var(--bp-czern); }


.im-dla__po {
	max-width: 84rem;
	margin: 4.8rem auto 0;
}

.im-po-kursie {
	margin-top: 5.6rem;
	padding: 3.2rem;
	border-radius: 2.8rem;
	background: var(--im-bialy);
}

.im-strona .im-po-kursie__tytul { margin: 0; color: var(--bp-czern); }

.im-po-kursie__naglowek {
	margin: 1.6rem 0 2rem;
	color: var(--bp-tekst);
	font-weight: 700;
}

.im-koszt__dol {
	max-width: 84rem;
	margin: 5.6rem auto 0;
}

.im-koszt__dol .im-mocny-akapit { text-align: center; }

.im-program__wstep { max-width: 76rem; }

/* Stopka bez klockow (wszystkie w „Nieuzywane") - pusty wiersz gorny
   nie zostawia ciemnego pasa nad linia praw autorskich. */
.bp-stopka__gora:empty,
.bp-stopka__gora:not(:has(*)) { display: none; }


/* =====================================================================
   DRUGA WERSJA STRONY SPRZEDAZOWEJ (poprawki z 7 i 9 pazdziernika):
   sekcje z klasami --2, .im-witaj, .im-ksiazka, .im-gl--2, blok zakupu
   z cena, historia z gora lodowa w dwoch kolumnach.
   ===================================================================== */

/* --- pierwszy ekran: pelna nazwa kursu i przycisk zakupu z cena ------- */

/* Dopisek pod nazwa kursu: krojem tekstu, w kolorze drugiego wiersza
   tytulu (bursztyn ma na jasnym tle kontrast 3:1 dla duzego tekstu -
   zloty by go nie mial, M21). Moze sie zlamac na waskim ekranie. */
.im-hero--2 .im-hero__dopisek {
	display: block;
	margin-top: .22em;
	color: var(--im-bursztyn);
	font-family: var(--bp-pismo);
	font-size: .58em;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.16;
}

.im-hero--2 .im-hero__dopisek-wiersz { display: block; }

/* Blok zakupu: przycisk i pod nim cena z dopiskiem - ten sam na
   pierwszym ekranie i przy kazdym przycisku zakupu nizej. */
.im-zakup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.im-tekst > .im-zakup { margin-top: .8rem; }

.im-zakup--srodek {
	align-items: center;
	text-align: center;
}

.im-zakup__cena {
	margin: 0;
	color: var(--bp-tekst-2);
	font-size: 1.6rem;
	line-height: 1.4;
}

.im-cytat .im-zakup__cena,
.im-blok-ciemny .im-zakup__cena { color: var(--im-krem-tekst); }

/* Telefon: przycisk i cena we wspolnej bialej ramce, przycisk na cala
   szerokosc ramki, cena wysrodkowana pod nim. */
@media (max-width: 39.99em) {
	.im-zakup {
		align-self: stretch;
		align-items: stretch;
		padding: 1.6rem;
		border: 1px solid var(--im-morska-linia);
		border-radius: 2rem;
		background: var(--im-bialy);
		text-align: center;
	}

	.im-zakup .im-kup {
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	.im-cytat .im-zakup__cena,
	.im-blok-ciemny .im-zakup__cena { color: var(--bp-tekst-2); }
}

/* --- karta z gora lodowa (nowa wersja) -------------------------------- */

.im-gl--2 { container-type: inline-size; }

.im-gl--2 .im-gl__rysunek {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Objaw na szczycie: wiekszy i w kolorze. Najmniejszy rozmiar 1,9rem
   pogrubiony = duzy tekst (kontrast bursztynu na bialym 3:1, M21). */
.im-gl--2 .im-gl__widac {
	padding: .9rem 2.2rem;
	color: var(--im-bursztyn);
	font-size: clamp(1.9rem, 5.2cqi, 2.6rem);
}

/* Podpis nad linia wody - po lewej, obok wierzcholka, nie wchodzi na
   niego (wierzcholek zaczyna sie w 24,5% szerokosci karty). */
.im-gl__nad {
	position: absolute;
	z-index: 1;
	left: 4.5%;
	bottom: 6%;
	max-width: 21%;
	margin: 0;
	color: var(--bp-tekst-2);
	font-size: clamp(1rem, 2.6cqi, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
}

.im-gl--2 .im-gl__tresc {
	gap: 1.2rem;
	padding: 5.5% 2.4rem 3.2rem;
}

/* Podpis pod linia wody - po lewej, tak jak podpis nad nia. */
.im-gl--2 .im-gl__etykieta {
	align-self: flex-start;
	font-size: clamp(1.2rem, 3cqi, 1.5rem);
	text-align: left;
}

/* Problemy pod woda: jeden pod drugim, zielone napisy na jasnych
   plakietkach, troche wieksze niz w pierwszej wersji. */
.im-gl--2 .im-gl__chipy {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	gap: .8rem;
	width: 100%;
}

/* Najdluzsza plakietka na telefonie lamie sie w dwa wiersze zamiast
   wychodzic poza karte. */
.im-gl--2 .im-gl__chipy li {
	max-width: 100%;
	padding: .7rem 1.6rem;
	border-color: var(--im-przezroczysty);
	background: var(--im-krem);
	color: var(--bp-akcent);
	font-size: clamp(1.4rem, 3.6cqi, 1.8rem);
	font-weight: 700;
	line-height: 1.35;
}

.im-gl__podpis {
	margin: 0;
	padding: 1.8rem 2.4rem 2.2rem;
	border-top: 1px solid var(--im-krem-slaby);
	background: var(--im-glebia);
	color: var(--im-krem-tekst);
	font-size: clamp(1.5rem, 3.4cqi, 1.7rem);
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
}

/* --- witaj: autor i ksiazka ------------------------------------------- */

/* Poswiaty pierwszego ekranu nie sa obcinane na jego dolnej krawedzi
   (w poziomie i tak tnie je .im-tresc) - przechodza miekko w odstep nad
   karta „Witaj", zamiast konczyc sie ostra linia tuz nad nia. */
.im-hero--2 { overflow: visible; }

.im-witaj { padding-top: 4.8rem; }

@media (min-width: 60em) {
	.im-witaj { padding-top: 8rem; }
}

.im-witaj__karta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: 3.2rem;
	background: var(--im-bialy);
	box-shadow: 0 50px 100px -60px var(--im-cien);
}

.im-witaj__foto { padding: 2.6rem 2.6rem 0; }

.im-witaj__portret {
	max-width: 44rem;
	margin-inline: auto;
}

.im-witaj__tekst {
	gap: 1.6rem;
	padding: 2.6rem;
}

@media (min-width: 60em) {
	.im-witaj__karta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.im-witaj__foto { padding: 4.8rem 0 4.8rem 4.8rem; }
	.im-witaj__portret { max-width: none; }
	.im-witaj__tekst { align-self: center; padding: 4.8rem; }
	.im-ksiazka { grid-column: 1 / -1; }
}

/* Zwarty blok o ksiazce: okladka, oceny, przykladowa opinia. */
.im-ksiazka {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.4rem;
	align-items: center;
	padding: 2.6rem;
	background: var(--bp-tlo-jasne);
}

.im-ksiazka__okladka { width: 20rem; max-width: 100%; }

.im-ksiazka__obraz {
	display: block;
	width: 100%;
	height: auto;
	border-radius: .6rem;
	box-shadow: 0 20px 40px -24px var(--im-cien-mocny);
}

/* Bez pliku okladki redaktor widzi miejsce na nia (odwiedzajacy - nic). */
.im-ksiazka__okladka:not(:has(img)) {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 3;
	border-radius: .6rem;
	background: var(--im-ramka-tlo);
	text-align: center;
}

.im-ksiazka__oceny {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

/* Liczba sprzedanych egzemplarzy - nad ocenami, krojem wyroznien. */
.im-ksiazka__sprzedanych {
	margin: 0 0 .4rem;
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.35;
}

.im-ksiazka__opinia {
	margin: 0;
	padding-left: 2rem;
	border-left: 3px solid var(--im-zloto);
}

.im-ksiazka__opinia blockquote { margin: 0; }

.im-ksiazka__opinia p {
	margin: 0;
	color: var(--bp-tekst);
	font-size: 1.7rem;
	font-style: italic;
	line-height: 1.6;
}

.im-ksiazka__opinia p::before { content: "„"; }
.im-ksiazka__opinia p::after { content: "”"; }

.im-ksiazka__opinia figcaption {
	margin-top: .8rem;
	color: var(--bp-tekst-2);
	font-size: 1.5rem;
}

@media (min-width: 40em) {
	.im-ksiazka { grid-template-columns: 20rem minmax(0, 1fr); }
	.im-ksiazka__opinia { grid-column: 1 / -1; }
	.im-ksiazka--bez-okladki { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 60em) {
	.im-ksiazka {
		grid-template-columns: 20rem minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 4rem;
		padding: 3.6rem 4.8rem;
	}

	.im-ksiazka__opinia { grid-column: auto; }
	.im-ksiazka--bez-okladki { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* --- problem: mniej rodzajow pisma ------------------------------------ */

/* Pierwsze zdanie i zdanie zamykajace wygladaja jak wyroznione pytanie
   (kreska i kroj wyroznien) - w sekcji zostaja dwa rodzaje pisma. */
.im-glowna .im-problem .im-lead,
.im-glowna .im-problem .im-mocny-akapit {
	padding-left: 2rem;
	border-left: 3px solid var(--im-zloto);
	color: var(--bp-czern);
	font-family: var(--im-pismo-wyroznien);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.45;
}

/* --- cel kursu: piec punktow w trzech kolumnach ------------------------ */

.im-glowna .im-cel .im-kafle--ciemne {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
}

/* --- darmowa lekcja --------------------------------------------------- */

.im-test__zastrzezenie {
	color: var(--bp-tekst-2);
	font-size: 1.5rem;
	line-height: 1.6;
}

.im-test__dalej {
	color: var(--bp-tekst-2);
	font-size: 1.6rem;
	line-height: 1.6;
}

.im-test__dalej a {
	color: var(--bp-akcent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* --- filmy: oba kadry tej samej wielkosci ----------------------------- */

/* Kadr filmu w sekcji „Co znajdziesz w kursie" ma szerokosc kolumny
   sekcji z testem (polowa tresci minus odstep kolumn), tak samo 16:9. */
@media (min-width: 60em) {
	.im-srodek .im-kadr-filmu--rowny { width: calc((100% - 5.6rem) / 2); }
}

/* --- historia z gora lodowa: tytul, pod nim dwie kolumny ------------- */

.im-historia__tytul {
	max-width: 92rem;
	margin: 0 0 4.8rem;
	color: var(--bp-czern);
}

.im-historia__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4rem;
}

.im-historia__gora { order: 2; }

.im-historia__wniosek {
	color: var(--bp-akcent);
	font-weight: 700;
}

@media (min-width: 60em) {
	.im-historia__uklad {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5.6rem;
		align-items: start;
	}

	.im-historia__gora {
		order: 0;
		position: sticky;
		top: 12rem;
	}
}

/* --- o autorze: zdjecie tej samej wielkosci co w karcie „Witaj" ------- */

@media (min-width: 60em) {
	.im-autor--2 .im-dwie { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --- czy to duzo: tytuly kart w kolorze, wyroznienia na zielono ------- */

/* Bursztyn zamiast pomaranczu przycisku: pomarancz na bialym ma kontrast
   ponizej 3:1 (M21), bursztyn - powyzej przy duzym pogrubionym pismie. */
.im-glowna .im-karta-kosztu .im-karta-kosztu__tytul {
	color: var(--im-bursztyn);
	font-family: var(--im-pismo-wyroznien);
	font-weight: 700;
}

.im-karta-kosztu strong {
	color: var(--bp-akcent);
	font-weight: 700;
}

.im-koszt__dol {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.2rem;
}

/* Wazne informacje na koncu strony - szara ramka, mniejsze pismo. */
.im-wazne {
	align-self: stretch;
	margin-top: 1.6rem;
	padding: 2rem 2.4rem;
	border: 1px solid var(--bp-tlo-jasne);
	border-radius: 1.2rem;
	background: var(--im-bialy);
	color: var(--bp-tekst-2);
	font-size: 1.5rem;
	line-height: 1.65;
	text-align: left;
}

.im-wazne p { margin: 0; }
.im-wazne p + p { margin-top: 1rem; }

.im-wazne .im-wazne__tytul {
	display: flex;
	gap: .8rem;
	align-items: center;
	margin-bottom: 1rem;
	color: var(--bp-tekst);
	font-weight: 700;
}

.im-wazne__ikona {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
}

/* --- stopka: odnosniki do dokumentow ------------------------------------ */

.im-stopka__dokumenty {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
}

.im-stopka__dokumenty a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* --- regulamin i polityka z uslugi zewnetrznej ------------------------- */

/* Dokument pisany ciagiem stoi w waskiej kolumnie tekstu (M10), jak
   kazdy regulamin i polityka; dlugie adresy w nim lamia sie zamiast
   rozpychac strone na telefonie (M11). Kontener strony bez zmian. */
[id^="bbiz-wrapper"] {
	max-width: var(--bp-tresc-waska);
	margin-inline: auto;
	overflow-wrap: anywhere;
}

/* Szare i jasnozielone podpisy dokumentu maja na bialym tle kontrast
   ponizej 4,5:1 (M21) - ciemniejsze odcienie. Arkusz uslugi ma te kolory
   z !important, stad !important i selektor o jeden stopien mocniejszy. */
[id^="bbiz-wrapper"] .bbiz-doc-content .bbiz-doc-content-header .for,
[id^="bbiz-wrapper"] .bbiz-doc-content .bbiz-certificate-footer .label { color: var(--bp-tekst-slabszy) !important; }

[id^="bbiz-wrapper"] .bbiz-doc-content .bbiz-doc-content-header .url,
[id^="bbiz-wrapper"] .bbiz-doc-content .cert-number { color: var(--bp-akcent) !important; }