/* ============================================================
   OLA CHOJNOWSKA — WSPÓLNY WYGLĄD STRON
   Podpinany przez /style.css na każdej podstronie tej klientki.
   Zbudowany 2026-08-18 na wzorcu templates/style-bazowy.css
   ze skilla /strona-vsl-kod.

   Branding klientki jeszcze nie istnieje — kolory i fonty to propozycja
   pod temat strony. Po dostarczeniu brandingu podmieniamy WYŁĄCZNIE
   blok :root. Reszta pliku jest wspólna dla wszystkich jej stron.

   Klasy zgodne ze skillem /strona-podziekowania.
   ============================================================ */

:root {
	/* ---- KOLORY ----
	   Źródło: propozycja @cto pod temat strony (warsztat dla specjalistek
	   branży pomocowej), zaakceptowana przez właściciela systemu 2026-08-18.
	   Ola Chojnowska nie ma jeszcze brandingu — po jego dostarczeniu
	   podmieniamy WYŁĄCZNIE ten blok, reszta pliku zostaje bez zmian.
	   Kontrasty policzone, wszystkie ≥ 4,5:1. */
	--brand: 74, 99, 87;
	/* kolor wiodący — szałwiowa zieleń: ramki, wyróżnienia, tła (6,5:1 na bieli) */
	--brand-deep: 46, 59, 52;
	/* ciemna zieleń: hero, finałowe CTA, stopka (biały tekst 11,7:1) */
	--cta: 169, 72, 42;
	/* akcent CTA — terakota, WYŁĄCZNIE przyciski (biały tekst 5,8:1) */
	--cta-hover: 138, 57, 32;
	/* ciemniejsza terakota na najechanie */
	--cta-light: 232, 160, 132;
	/* jaśniejsza terakota — wyłącznie na ciemnym tle */
	--ink: 43, 46, 41;
	/* tekst główny — ciepła czerń (13,8:1 na bieli) */
	--muted: 92, 98, 91;
	/* tekst pomocniczy (6,3:1 na bieli, 5,6:1 na tle alternatywnym) */
	--white: 255, 255, 255;
	--bg-alt: 245, 242, 234;
	/* tło sekcji alternatywnej — ciepły krem */
	--tint: 231, 237, 232;
	/* jasna zieleń — ramki wyróżnione */
	--line: 222, 217, 205;
	/* obramowania */

	/* ---- RYTM PIONOWY ----
	   Jedna zmienna trzyma odstęp NAD nagłówkiem sekcji i POD nim. */
	--sekcja: 96px;

	/* Realna wysokość baneru cookie, ustawiana skryptem po jego wyrenderowaniu. */
	--baner-h: 0px;

	/* ---- PROMIENIE I CIENIE ---- */
	--r-sm: 12px;
	--r-md: 18px;
	--r-lg: 24px;
	--cien-karta: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 24px rgba(17, 17, 17, .05);
	--cien-karta-hover: 0 2px 4px rgba(17, 17, 17, .06), 0 18px 40px rgba(17, 17, 17, .09);
	--cien-cta: 0 10px 26px rgba(var(--cta), .28);

	/* ---- TYPOGRAFIA ----
	   Oba kroje mają podzbiór latin-ext (polskie znaki, małe i wielkie),
	   sprawdzone pangramem. Zapas systemowy w tej samej deklaracji. */
	--font-heading: "Lora", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Podstawa ---------- */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 18px;
	color: rgba(var(--ink), 1);
	background-color: rgba(var(--white), 1);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
	font-weight: 700;
	margin: 0 0 20px 0;
	/* interlinia nie schodzi poniżej 1,15 — inaczej ucina ogonki
	   polskich wielkich liter (Ą, Ę, Ż, Ź) */
	line-height: 1.18;
	letter-spacing: -0.6px;
	text-wrap: balance;
}

/* typografia płynna: jeden zapis obsługuje telefon i szeroki ekran */
h1 {
	font-size: clamp(32px, 4.4vw, 56px);
	font-weight: 800;
	letter-spacing: -1.4px;
}

h2 {
	font-size: clamp(26px, 2.8vw, 38px);
}

h3 {
	font-size: 20px;
	letter-spacing: -0.3px;
}

p {
	margin: 0 0 18px 0;
	text-wrap: pretty;
}

a {
	text-decoration: none;
	color: rgba(var(--cta), 1);
}

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

:focus-visible {
	outline: 3px solid rgba(var(--cta), 1);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	* {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Układ ---------- */
.container {
	max-width: 900px;
	/* 60–75 znaków w wierszu */
	margin: 0 auto;
	padding: 0 24px;
}

.container-wide {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

section {
	padding: var(--sekcja) 0;
}

.section-alt {
	background-color: rgba(var(--bg-alt), 1);
}

/* Odstęp pod nagłówkiem sekcji równy odstępowi nad nim. */
.section-title {
	font-size: clamp(26px, 2.8vw, 38px);
	text-align: center;
	margin-bottom: var(--sekcja);
}

/* Nagłówek, pod którym stoi podtytuł: podtytuł należy do nagłówka,
   więc pełny odstęp sekcji idzie dopiero pod podtytułem. */
.section-title.ma-podtytul {
	margin-bottom: 18px;
}

.section-subtitle {
	text-align: center;
	color: rgba(var(--muted), 1);
	max-width: 680px;
	margin: 0 auto var(--sekcja) auto;
}

.accent {
	color: rgba(var(--cta), 1);
}

.lead p {
	font-size: 19px;
}

/* ---------- 1. Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background-color: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	padding: 76px 0 58px 0;
	text-align: center;
}

/* delikatna poświata za nagłówkiem — jedyny efekt na stronie */
.hero::before {
	content: "";
	position: absolute;
	top: -30%;
	left: 50%;
	width: min(1100px, 130%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(var(--cta), .20) 0%, rgba(var(--cta), 0) 62%);
	pointer-events: none;
}

.hero>.container {
	position: relative;
}

.hero .eyebrow {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	/* nadtytuł bywa pisany wersalikami — interlinia z zapasem na ogonki */
	line-height: 1.45;
	color: rgba(var(--white), .92);
	background: rgba(var(--white), .06);
	border: 1px solid rgba(var(--white), .16);
	border-radius: 999px;
	padding: 9px 20px;
	margin-bottom: 28px;
}

.hero .eyebrow::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(var(--cta-light), 1);
	margin-right: 10px;
	vertical-align: middle;
}

.hero h1 {
	color: rgba(var(--white), 1);
	max-width: 900px;
	margin: 0 auto 24px auto;
}

.hero .subtitle {
	font-size: clamp(17px, 1.4vw, 20px);
	color: rgba(var(--white), .78);
	max-width: 720px;
	margin: 0 auto;
}

/* dwa akapity pod nagłówkiem hero (używa strona podziękowania) */
.hero .subtitle+.subtitle {
	margin-top: 16px;
}

/* odnośnik na ciemnym tle — kolor CTA bywa tu za ciemny */
.hero .subtitle a {
	color: rgba(var(--white), 1);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hero .divider {
	width: 56px;
	height: 4px;
	background: rgba(var(--cta), 1);
	margin: 36px auto 0 auto;
	border-radius: 2px;
}

/* znaczek potwierdzenia — strona podziękowania */
.check-badge {
	display: block;
	margin: 0 auto 28px auto;
	line-height: 0;
}

/* ---------- 2. Wideo ---------- */
.video-wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: rgba(var(--brand-deep), 1);
	box-shadow: 0 24px 70px rgba(17, 17, 17, .18);
}

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

.video-caption {
	text-align: center;
	font-size: 15px;
	color: rgba(var(--muted), 1);
	margin-top: 20px;
}

/* Makieta okładki na czas montażu wideo (SKILL.md, KROK 1).
   Wymienna na iframe bez zmian w pozostałym CSS.
   Tło: prawdziwe zdjęcie prowadzącego, adres z bunny.net. */
.video-makieta {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	/* Docelowo: linear-gradient(...) + url("[adres okładki z bunny.net]").
	   Do czasu dostarczenia okładki — samo tło w kolorze wiodącym. */
	background-image:
		linear-gradient(160deg, rgba(var(--brand-deep), 1), rgba(var(--brand), 1));
	background-size: cover;
	background-position: center 20%;
}

.video-makieta .play {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(var(--cta), 1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 26px;
	box-shadow: 0 0 0 10px rgba(var(--cta), .18), 0 12px 34px rgba(0, 0, 0, .5);
}

.video-makieta .play svg {
	margin-left: 5px;
}

.video-makieta .poster-text {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: clamp(19px, 2.6vw, 34px);
	line-height: 1.25;
	letter-spacing: -0.6px;
	color: rgba(var(--white), 1);
	max-width: 720px;
	margin: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}

/* ---------- Przyciski ---------- */
.btn {
	display: inline-block;
	background: rgba(var(--cta), 1);
	color: rgba(var(--white), 1);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	padding: 19px 38px;
	border-radius: 14px;
	min-height: 44px;
	box-shadow: var(--cien-cta);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.btn:hover {
	background: rgba(var(--cta-hover), 1);
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

.inline-cta {
	text-align: center;
	margin-top: 52px;
}

.btn-section {
	text-align: center;
}

.btn-note,
.click-trigger {
	font-size: 15px;
	color: rgba(var(--muted), 1);
	margin-top: 16px;
}

.click-trigger {
	text-align: center;
}

/* ---------- 3. Kalendarz ---------- */
/* Kotwica siedzi na SAMYM WIDGECIE, nie na sekcji — inaczej przyciski
   przewijają nad nagłówek, a kalendarz ląduje poza ekranem.
   Uzasadnienie: standard-techniczny.md, sekcja 5. */
#kalendarz {
	scroll-margin-top: 28px;
}

.promise-title {
	text-align: center;
	font-size: clamp(26px, 2.8vw, 38px);
	margin-bottom: 16px;
}

.calendly-inline-widget {
	width: 100%;
}

.urgency {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 15px;
	color: rgba(var(--muted), 1);
	margin-top: 18px;
}

/* ---------- Sticky CTA (tylko telefon) ---------- */
.sticky-cta {
	display: none;
}

@media (max-width: 767px) {
	.sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		background: rgba(var(--brand-deep), .97);
		border-top: 1px solid rgba(var(--white), .12);
		box-shadow: 0 -6px 24px rgba(0, 0, 0, .38);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		transform: translateY(120%);
		transition: transform .22s ease;
	}

	.sticky-cta.is-visible {
		transform: translateY(0);
	}

	/* sticky bar siada NAD banerem cookie, dopóki baner jest na ekranie */
	.sticky-cta {
		bottom: var(--baner-h);
	}

	.sticky-cta .sticky-note {
		display: block;
		font-size: 12px;
		line-height: 1.4;
		text-align: center;
		color: rgba(var(--white), .78);
		margin: 0 0 6px 0;
	}

	.sticky-cta .btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 15px 18px;
		font-size: 17px;
		box-shadow: none;
	}
}

/* ---------- Baner cookie ----------
   Pasek informacyjny, NIE bramka zgody: nie blokuje piksela ani żadnego
   innego skryptu (decyzja z 2026-08-07, szczegóły w standard-techniczny.md,
   sekcja 6). Treść prawna pochodzi od klienta — skill jej nie pisze. */
.cookie-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	/* wyżej niż sticky bar (50), żeby nie chował się pod nim */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
	background: rgba(var(--brand-deep), .98);
	border-top: 1px solid rgba(var(--white), .12);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
}

.cookie-bar p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(var(--white), .82);
	max-width: 820px;
}

@media (max-width: 767px) {
	.cookie-bar {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
		text-align: center;
	}

	.cookie-bar p {
		flex: 1 1 100%;
		order: 1;
		font-size: 13px;
	}

	.cookie-bar .cookie-ok {
		order: 2;
		flex: 1 1 auto;
	}

	.cookie-bar .cookie-x {
		order: 3;
	}
}

.cookie-bar a {
	color: rgba(var(--white), 1);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* przycisk zgody: mniejszy od CTA strony, żeby nie konkurował z rezerwacją */
.cookie-bar .cookie-ok {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	color: rgba(var(--white), 1);
	background: rgba(var(--cta), 1);
	border: 0;
	border-radius: 10px;
	padding: 11px 26px;
	min-height: 44px;
	cursor: pointer;
	transition: background-color .18s ease;
}

.cookie-bar .cookie-ok:hover {
	background: rgba(var(--cta-hover), 1);
}

.cookie-bar .cookie-x {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--white), .7);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease;
}

.cookie-bar .cookie-x:hover {
	color: rgba(var(--white), 1);
	background: rgba(var(--white), .10);
}

/* ---------- 4. Fascynacje + transparentność ---------- */
.fascinations {
	list-style: none;
	padding: 0;
	margin: 0 0 44px 0;
}

.fascinations li {
	position: relative;
	padding-left: 44px;
	margin-bottom: 22px;
}

/* kolor ptaszka w SVG podmienić razem z paletą (%23 to zakodowany #) */
.fascinations li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(var(--cta), .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005AA0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
}

.offer-transparency {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-left: 4px solid rgba(var(--cta), 1);
	border-radius: var(--r-md);
	padding: 28px 30px;
	font-size: 16px;
	box-shadow: var(--cien-karta);
}

.offer-transparency p:last-child {
	margin-bottom: 0;
}

/* ---------- 5. Mechanizm ---------- */
.mechanism-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 1.45;
	color: rgba(var(--cta), 1);
	background: rgba(var(--cta), .10);
	border-radius: 999px;
	padding: 8px 18px;
	margin-bottom: 20px;
}

.pullquote {
	font-family: var(--font-heading);
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 700;
	line-height: 1.35;
	margin: 36px 0;
}

/* ---------- 6. Korzyści ---------- */
.benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.benefit {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	padding: 32px 28px;
	box-shadow: var(--cien-karta);
	transition: box-shadow .2s ease, transform .2s ease;
}

.benefit:hover {
	box-shadow: var(--cien-karta-hover);
	transform: translateY(-3px);
}

.benefit-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--cta), 1);
	background: rgba(var(--cta), .10);
	margin-bottom: 16px;
}

.benefit p {
	font-size: 16px;
	color: rgba(var(--muted), 1);
	margin: 0;
}

/* ---------- 7. Liczby / pasek faktów ---------- */
.facts-bar,
.cost-numbers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.facts-bar {
	margin-top: 56px;
	background: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	border-radius: var(--r-lg);
	padding: 38px 30px;
	text-align: center;
}

.facts-bar>div+div {
	border-left: 1px solid rgba(var(--white), .12);
}

.facts-bar .num,
.cost-item .num {
	display: block;
	font-family: var(--font-heading);
	font-size: 34px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -1px;
	color: rgba(var(--cta-light), 1);
}

.facts-bar .lbl,
.cost-item .lbl {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(var(--white), .8);
	margin-top: 8px;
}

.cost-box {
	background: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	border-radius: var(--r-lg);
	padding: 44px 38px;
	text-align: center;
}

.cost-box h2 {
	color: rgba(var(--white), 1);
}

.cost-numbers {
	margin: 28px 0;
}

/* ---------- 8. Bio ---------- */
.bio-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 24px;
}

.bio-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	/* pierwszy wiersz przylega do nagłówka, reszta wysokości idzie do treści —
	   inaczej wysoka kolumna ze zdjęciem rozpycha lukę pod nagłówkiem */
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"photo header"
		"photo body";
	gap: 18px 48px;
	align-items: start;
}

.bio-header {
	grid-area: header;
	align-self: start;
}

.bio-photo {
	grid-area: photo;
}

.bio-body {
	grid-area: body;
	align-self: start;
}

.bio-photo img {
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
}

/* etykieta nad nagłówkiem: to ONA startuje var(--sekcja) od krawędzi sekcji */
.bio-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.4px;
	line-height: 1.45;
	text-transform: uppercase;
	color: rgba(var(--cta), 1);
	margin: 0 0 10px 0;
}

/* ---------- 9. Dowody ---------- */
.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	max-width: 780px;
	margin: 0 auto;
}

/* Kafelek o stałych proporcjach 9:16.
   Nagrania mają różne formaty źródła, więc obraz wpisujemy w kafelek,
   a nie kafelek w obraz — inaczej siatka skacze.
   Klasyfikacja formatów: standard-techniczny.md, sekcja 4. */
.tcard-video {
	position: relative;
	aspect-ratio: 9 / 16;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	background: #000;
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--cien-karta);
	transition: box-shadow .2s ease, transform .2s ease;
}

.tcard-video:hover {
	box-shadow: var(--cien-karta-hover);
	transform: translateY(-2px);
}

/* pionowe i pionowe w czarnej ramce: cover przycina boki razem z pasami */
.tcard-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* materiał realnie poziomy: wewnętrzna ramka o proporcjach samej treści,
   wyśrodkowana w kafelku. Proporcję ustawić pod konkretne nagranie. */
.tcard-video.is-wide video {
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tcard {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	padding: 26px;
	box-shadow: var(--cien-karta);
}

.tcard-name {
	font-weight: 700;
	font-size: 16px;
}

.tcard-text {
	font-size: 16px;
	margin: 0;
}

.honest-box {
	background: rgba(var(--tint), 1);
	border-radius: var(--r-md);
	padding: 32px 30px;
}

.honest-box p:last-child {
	margin-bottom: 0;
}

/* obraz w szerokości dwóch kafelków — zmierzyć, nie liczyć w głowie
   (podglad-i-pomiary.md, sekcja 4) */
.books-image {
	max-width: 763px;
	margin: 0 auto;
}

.books-image img {
	width: 100%;
	display: block;
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
}

/* ---------- 10. Agenda + dla kogo ---------- */
.agenda-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.agenda-item {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	padding: 34px 30px;
	box-shadow: var(--cien-karta);
	transition: box-shadow .2s ease, transform .2s ease;
}

.agenda-item:hover {
	box-shadow: var(--cien-karta-hover);
	transform: translateY(-3px);
}

.agenda-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 18px;
	color: rgba(var(--white), 1);
	background: rgba(var(--cta), 1);
	margin-bottom: 18px;
}

.agenda-item p {
	font-size: 16px;
	color: rgba(var(--muted), 1);
	margin: 0;
}

/* zamknięcie sekcji — wyróżnione, z zapasem powietrza z obu stron */
.agenda-close {
	position: relative;
	max-width: 860px;
	margin: 72px auto;
	padding: 40px 44px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.9vw, 25px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.4px;
	color: rgba(var(--ink), 1);
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-lg);
	box-shadow: var(--cien-karta);
	text-wrap: balance;
}

.agenda-close::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 72px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: rgba(var(--cta), 1);
}

.fit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
}

.fit-box {
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	padding: 30px 32px;
	background: rgba(var(--white), 1);
	box-shadow: var(--cien-karta);
}

/* metodologia wymaga checkmarków i krzyżyków, nie samych ramek */
.fit-box h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.fit-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: rgba(var(--cta), 1);
	background: rgba(var(--cta), .12);
}

.fit-box.is-no .fit-icon {
	color: rgba(var(--muted), 1);
	background: rgba(var(--muted), .12);
}

.fit-box ul {
	margin: 0;
	padding-left: 20px;
}

.fit-box li {
	margin-bottom: 10px;
}

.fit-box p {
	margin: 0;
	font-size: 17px;
	color: rgba(var(--muted), 1);
}

/* ---------- 11. Odwrócenie ryzyka ---------- */
.guarantee-box {
	position: relative;
	overflow: hidden;
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-lg);
	/* nagłówek w karcie oddycha tak samo od górnej krawędzi karty, jak do treści */
	padding: 48px 48px 56px 48px;
	text-align: center;
	box-shadow: var(--cien-karta);
}

.guarantee-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: rgba(var(--cta), 1);
}

.guarantee-box h2 {
	margin-bottom: 48px;
}

.guarantee-box p:last-child {
	margin-bottom: 0;
}

.guarantee-badge {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.8px;
	line-height: 1.45;
	color: rgba(var(--white), 1);
	background: rgba(var(--cta), 1);
	border-radius: 999px;
	padding: 8px 18px;
	margin-bottom: 18px;
}

/* ---------- 12. FAQ ---------- */
.faq-list {
	max-width: 800px;
	margin: 0 auto;
}

.faq-item {
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	margin-bottom: 14px;
	background: rgba(var(--white), 1);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.faq-item[open],
.faq-item:hover {
	border-color: rgba(var(--ink), .18);
	box-shadow: var(--cien-karta);
}

.faq-item summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: -0.3px;
	padding: 24px 62px 24px 28px;
	position: relative;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 24px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(var(--cta), .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005AA0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/13px no-repeat;
	transition: transform .2s ease;
}

.faq-item[open] summary::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005AA0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	transform: rotate(180deg);
}

.faq-answer {
	padding: 0 28px 24px 28px;
	color: rgba(var(--muted), 1);
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

/* ---------- 13. Finałowe CTA ---------- */
.final-cta {
	position: relative;
	overflow: hidden;
	background: rgba(var(--brand-deep), 1);
	color: rgba(var(--white), 1);
	text-align: center;
}

.final-cta::before {
	content: "";
	position: absolute;
	bottom: -40%;
	left: 50%;
	width: min(1100px, 130%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(var(--cta), .18) 0%, rgba(var(--cta), 0) 62%);
	pointer-events: none;
}

.final-cta>.container {
	position: relative;
}

.final-cta h2 {
	color: rgba(var(--white), 1);
	font-size: clamp(24px, 2.6vw, 36px);
	max-width: 900px;
	margin: 0 auto 24px auto;
}

.final-cta .subtitle {
	max-width: 760px;
	margin: 0 auto 14px auto;
	color: rgba(var(--white), .82);
}

.final-cta .click-trigger {
	color: rgba(var(--white), .78);
}

/* ---------- Disclaimer i stopka ---------- */
.disclaimer {
	font-size: 14px;
	line-height: 1.6;
	/* drobny druk ma być czytelny, nie ukryty — kontrast ≥ 4,5:1 */
	color: rgba(var(--muted), 1);
	max-width: 720px;
	margin: 30px auto 0 auto;
	text-align: center;
}

footer {
	background: rgba(var(--brand-deep), 1);
	border-top: 1px solid rgba(var(--white), .10);
	padding: 48px 0 40px 0;
	text-align: center;
}

footer .footer-nav {
	margin-bottom: 22px;
}

footer .footer-nav a {
	color: rgba(var(--white), 1);
	font-size: 15px;
	margin: 0 12px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

footer .footer-legal p {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(var(--white), .7);
	max-width: 820px;
	margin: 0 auto 12px auto;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 1023px) {
	:root {
		--sekcja: 76px;
	}

	.benefit-grid,
	.agenda-grid,
	.fit-grid {
		grid-template-columns: 1fr;
	}

	.bio-grid {
		grid-template-columns: 260px 1fr;
		gap: 12px 32px;
	}
}

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 767px) {

	:root {
		--sekcja: 60px;
	}

	body {
		font-size: 17px;
	}

	.container,
	.container-wide,
	.bio-container {
		padding: 0 20px;
	}

	.hero {
		padding: 44px 0 40px 0;
	}

	.hero .eyebrow {
		font-size: 13px;
		margin-bottom: 22px;
	}

	.hero .subtitle,
	.lead p {
		font-size: 17px;
	}

	.hero .divider {
		margin-top: 30px;
	}

	.video-makieta .play {
		width: 58px;
		height: 58px;
		margin-bottom: 16px;
		box-shadow: 0 0 0 7px rgba(var(--cta), .18), 0 8px 22px rgba(0, 0, 0, .5);
	}

	.video-makieta .play svg {
		width: 22px;
		height: 22px;
	}

	.testimonial-grid,
	.facts-bar,
	.cost-numbers {
		grid-template-columns: 1fr;
	}

	.facts-bar {
		padding: 30px 24px;
		gap: 26px;
	}

	.facts-bar>div+div {
		border-left: 0;
		border-top: 1px solid rgba(var(--white), .12);
		padding-top: 26px;
	}

	.bio-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"photo"
			"body";
		gap: 24px;
	}

	.books-image {
		max-width: 100%;
	}

	.agenda-close {
		margin: 48px auto;
		padding: 30px 24px;
		text-align: left;
	}

	.agenda-close::before {
		left: 24px;
		transform: none;
		width: 56px;
	}

	.guarantee-box,
	.cost-box {
		padding: 38px 24px;
	}

	.guarantee-box h2 {
		margin-bottom: 28px;
	}

	.offer-transparency {
		padding: 24px 22px;
	}

	.faq-item summary {
		padding: 20px 58px 20px 22px;
	}

	.faq-answer {
		padding: 0 22px 20px 22px;
	}

	.inline-cta {
		margin-top: 40px;
	}

	/* widget kalendarza potrzebuje na telefonie ok. 900 px wysokości,
	   inaczej przewija się wewnętrznie i użytkownik gubi przyciski */
	.calendly-inline-widget {
		height: 900px !important;
	}

	/* przycisk na telefonie zawsze pełnej szerokości */
	.btn {
		display: block;
		width: 100%;
		text-align: center;
		padding: 17px 20px;
		font-size: 17px;
	}

	/* zapas na sticky bar i baner cookie, żeby nie zasłaniały stopki */
	footer {
		padding-bottom: calc(116px + var(--baner-h));
	}
}

/* ============================================================
   DODATKI DLA LEJKA „warsztat" (Ola Chojnowska)
   Komponenty, których nie ma w wyglądzie bazowym, bo ten powstał
   pod lejek na rozmowę. Tu sprzedajemy płatny warsztat, więc
   doszły: bloki DO UZUPEŁNIENIA, ścieżka etapów, tabela etapów,
   zestawienie „co otrzymujesz", blok ceny i bloki P.S.
   ============================================================ */

/* ---------- Bloki DO UZUPEŁNIENIA ----------
   Widoczne celowo: zamawiający ma na pierwszy rzut oka widzieć,
   czego jeszcze brakuje. Każdy taki blok MUSI zniknąć przed publikacją. */
.placeholder {
	border: 2px dashed rgba(var(--brand), .55);
	border-radius: var(--r-md);
	background: rgba(var(--tint), .55);
	padding: 28px 24px;
	margin: 34px auto;
	max-width: 760px;
	text-align: center;
}

.placeholder-label {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(var(--white), 1);
	background: rgba(var(--brand), 1);
	border-radius: 999px;
	padding: 7px 16px;
	margin-bottom: 16px;
}

.placeholder p {
	font-size: 16px;
	color: rgba(var(--ink), 1);
	margin: 0 auto;
	max-width: 620px;
}

.placeholder p+p {
	margin-top: 10px;
}

.placeholder.is-inline {
	margin: 22px auto;
	padding: 20px;
}

/* Przycisk-makieta: wygląda jak przycisk, ale NIE udaje działającego.
   Wchodzi tam, gdzie docelowo będzie odnośnik do koszyka. */
.btn.is-makieta {
	background: rgba(var(--muted), .5);
	box-shadow: none;
	cursor: not-allowed;
	border: 2px dashed rgba(var(--white), .75);
}

.btn.is-makieta:hover {
	background: rgba(var(--muted), .5);
	transform: none;
}

/* ---------- Kotwica sekcji zapisów ----------
   Odpowiednik kotwicy #kalendarz z lejka na rozmowę: wszystkie przyciski
   prowadzą tutaj. Kotwica siedzi na SAMYM BLOKU CENY, nie na sekcji. */
#zapisy {
	scroll-margin-top: 28px;
}

/* ---------- Meta hero: data, format, czas trwania ---------- */
.hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 18px;
	margin: 26px 0 34px 0;
	font-family: var(--font-body);
	font-size: 15px;
	color: rgba(var(--white), .85);
}

.hero-meta span {
	border: 1px dashed rgba(var(--white), .5);
	border-radius: 999px;
	padding: 7px 16px;
	line-height: 1.4;
}

/* ---------- Ścieżka etapów: Nie zna mnie → … → Kupuje ---------- */
.stage-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 auto var(--sekcja) auto;
	max-width: 900px;
}

.stage-flow li {
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	color: rgba(var(--brand-deep), 1);
	background: rgba(var(--tint), 1);
	border: 1px solid rgba(var(--brand), .28);
	border-radius: 999px;
	padding: 11px 18px;
}

.stage-flow li:last-child {
	background: rgba(var(--cta), 1);
	border-color: rgba(var(--cta), 1);
	color: rgba(var(--white), 1);
}

.stage-flow .arrow {
	color: rgba(var(--brand), 1);
	font-size: 18px;
	line-height: 1;
}

.stage-flow.is-plain {
	margin-bottom: 0;
}

/* ---------- Tabela etapów ---------- */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--r-md);
	border: 1px solid rgba(var(--line), 1);
}

.stage-table {
	width: 100%;
	border-collapse: collapse;
	background: rgba(var(--white), 1);
	font-size: 16px;
}

.stage-table th,
.stage-table td {
	text-align: left;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(var(--line), 1);
	vertical-align: top;
	line-height: 1.55;
}

.stage-table thead th {
	font-family: var(--font-heading);
	font-size: 15px;
	color: rgba(var(--white), 1);
	background: rgba(var(--brand), 1);
	white-space: nowrap;
}

.stage-table tbody th {
	font-family: var(--font-heading);
	font-weight: 700;
	color: rgba(var(--brand-deep), 1);
	white-space: nowrap;
}

.stage-table tbody tr:last-child th,
.stage-table tbody tr:last-child td {
	border-bottom: 0;
}

.stage-table tbody tr:nth-child(even) {
	background: rgba(var(--bg-alt), .6);
}

/* ---------- Definicja mechanizmu (Mapa Treści Decyzyjnych) ---------- */
.definition-box {
	border-left: 5px solid rgba(var(--cta), 1);
	background: rgba(var(--tint), 1);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: 28px 30px;
	margin: 0 0 34px 0;
}

.definition-box p {
	font-family: var(--font-heading);
	font-size: 20px;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Program warsztatu: części 1–8 ---------- */
.part {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
	padding: 32px 30px;
	margin-bottom: 22px;
}

.part-num {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(var(--white), 1);
	background: rgba(var(--brand), 1);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 16px;
}

.part h3 {
	font-size: 23px;
	margin-bottom: 16px;
}

.part ul {
	margin: 0 0 18px 0;
	padding-left: 22px;
}

.part li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.part-result {
	border-top: 1px solid rgba(var(--line), 1);
	padding-top: 18px;
	margin: 0;
	font-size: 16px;
	color: rgba(var(--ink), 1);
}

/* ---------- Co otrzymujesz + wartości ---------- */
.offer-item {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 6px 20px;
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
	padding: 28px 30px;
	margin-bottom: 20px;
}

.offer-item .offer-num {
	grid-row: 1 / span 3;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(var(--brand), 1);
	color: rgba(var(--white), 1);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.offer-item h3 {
	margin: 0 0 12px 0;
}

.offer-item p:last-of-type {
	margin-bottom: 0;
}

.offer-value {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	color: rgba(var(--brand-deep), 1);
	background: rgba(var(--tint), 1);
	border-radius: 999px;
	padding: 8px 16px;
	margin-top: 16px;
}

.offer-item.is-bonus {
	border: 2px dashed rgba(var(--brand), .45);
	box-shadow: none;
	background: rgba(var(--bg-alt), .7);
}

.offer-item.is-bonus .offer-num {
	background: rgba(var(--cta), 1);
	font-size: 15px;
	letter-spacing: .5px;
}

/* ---------- Blok ceny ---------- */
.price-box {
	background: rgba(var(--white), 1);
	border: 2px solid rgba(var(--cta), 1);
	border-radius: var(--r-lg);
	box-shadow: var(--cien-karta);
	padding: 44px 34px;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

.price-box h2 {
	margin-bottom: 12px;
}

.price-anchor {
	font-size: 17px;
	color: rgba(var(--muted), 1);
	margin-bottom: 6px;
}

.price-anchor s {
	text-decoration-thickness: 2px;
}

/* ---------- Bloki P.S. ---------- */
.ps-block {
	border-top: 1px solid rgba(var(--line), 1);
	padding-top: 30px;
	margin-top: 30px;
}

.ps-block h3 {
	font-size: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(var(--brand), 1);
	margin-bottom: 14px;
}

/* ---------- Sekcja pilności (termin zapisów) ---------- */
.deadline {
	text-align: center;
	font-size: 16px;
	color: rgba(var(--white), .88);
	margin: 26px auto 0 auto;
	max-width: 620px;
}

/* ---------- Wyliczenia w narracji ---------- */
.dash-list {
	margin: 0 0 18px 0;
	padding-left: 22px;
}

.dash-list li {
	margin-bottom: 8px;
	line-height: 1.6;
}

/* ---------- Marki, z którymi pracowała ---------- */
.brand-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 24px 0 0 0;
	padding: 0;
}

.brand-list li {
	list-style: none;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 16px;
	color: rgba(var(--brand-deep), 1);
	background: rgba(var(--tint), 1);
	border-radius: 8px;
	padding: 9px 16px;
}

/* ---------- Opinie (miejsca na cytaty) ---------- */
.quote-card {
	background: rgba(var(--white), 1);
	border: 1px solid rgba(var(--line), 1);
	border-left: 5px solid rgba(var(--brand), 1);
	border-radius: var(--r-md);
	box-shadow: var(--cien-karta);
	padding: 28px 30px;
	margin-bottom: 20px;
}

.quote-card p {
	font-size: 18px;
	line-height: 1.65;
}

.quote-card .quote-author {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	color: rgba(var(--brand-deep), 1);
	margin: 0;
}

/* ---------- Telefon ---------- */
@media (max-width: 767px) {

	.offer-item {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 26px 22px;
	}

	.offer-item .offer-num {
		grid-row: auto;
		margin-bottom: 16px;
	}

	.part,
	.quote-card,
	.price-box {
		padding: 26px 22px;
	}

	.definition-box {
		padding: 22px 20px;
	}

	.definition-box p {
		font-size: 18px;
	}

	.stage-flow li {
		font-size: 15px;
		padding: 9px 14px;
	}

	.stage-table {
		font-size: 15px;
		min-width: 640px;
	}

	.placeholder {
		padding: 22px 18px;
	}
}

/* Znacznik braku wewnątrz zdania — żeby nie przepisywać treści z dokumentu,
   gdy brakuje w niej jednej danej (adres e-mail, kwota, data). */
.ph-inline {
	background: rgba(var(--tint), 1);
	border: 1px dashed rgba(var(--brand), .6);
	border-radius: 6px;
	padding: 1px 8px;
	font-size: .92em;
	white-space: nowrap;
}

/* Kontener tekstowy zagnieżdżony w .container-wide — bez podwójnego paddingu. */
.container.is-nested {
	padding: 0;
}

/* Blok DO UZUPEŁNIENIA na ciemnym tle (finałowe CTA, stopka). */
.placeholder.on-dark {
	background: rgba(var(--white), .10);
	border-color: rgba(var(--white), .6);
}

.placeholder.on-dark p {
	color: rgba(var(--white), 1);
}

/* Blok DO UZUPEŁNIENIA jako pierwszy element w karcie — bez górnego marginesu. */
.placeholder.is-first {
	margin-top: 0;
}