/* ============================================================
   KAMIL KOZŁOWSKI — wspólny wygląd stron
   Podpinany przez /style.css na każdej podstronie tego klienta.

   Paleta: czerń, złoto (--gold: #c9a84c), jasny piaskowy tekst.
   Wyciągnięte 1:1 ze strony lejka konsultacja — bez zmian w regułach.
   ============================================================ */

html {
	scroll-behavior: smooth;

	/* Realna wysokość baneru cookie, ustawiana skryptem po jego wyrenderowaniu.
	   Daje zapas pod stopką, żeby baner nie zasłaniał copyrightu.
	   Zero, gdy baneru nie ma, został zaakceptowany albo ukryła go blokada treści. */
	--baner-h: 0px;

	/* Wysokość sticky baru, gdy jest widoczny. Podnosi baner cookie ponad niego. */
	--sticky-h: 0px;
}

/* Domyślny margines przeglądarki (8px z każdej strony) — zdjęty,
   żeby ciemne tło sekcji dochodziło do samej krawędzi okna. */
body {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.vsl-page {
	--gold: #c9a84c;
	--gold-light: #e8c96a;
	--dark: #0a0a0a;
	--dark-2: #0d0d0d;
	--panel: #141414;
	--panel-2: #1a1a1a;
	--line: #2a2a2a;
	--line-2: #3a3835;
	--white: #f0ede8;
	--muted-2: #8a8781;

	--font-display: "Bebas Neue", Impact, sans-serif;
	--font-serif: "DM Serif Display", Georgia, serif;
	--font-body: "DM Sans", Helvetica, Arial, sans-serif;

	font-family: var(--font-body);
	font-weight: 300;
	background: var(--dark);
	color: var(--white);
	line-height: 1.7;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

.vsl-page h1,
.vsl-page h2,
.vsl-page h3,
.vsl-page h4 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 0.98;
	margin: 0 0 22px 0;
	text-wrap: balance;
}

/* pretty tylko w szerokiej mierze; w wąskich kolumnach psuje łamanie */
.vsl-container p,
.vsl-container li,
.vsl-bio-body p,
.vsl-objection p {
	text-wrap: pretty;
}

/* :where() zeruje specyficzność, dzięki czemu każda reguła
   komponentu poniżej normalnie nadpisuje ten margines */
:where(.vsl-page) p {
	margin: 0 0 20px 0;
}

:where(.vsl-page) p:last-child {
	margin-bottom: 0;
}

.vsl-page a {
	text-decoration: none;
	color: inherit;
}

.vsl-page a:focus-visible {
	outline: 2px solid var(--gold-light);
	outline-offset: 3px;
}

.vsl-page em {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--gold);
	letter-spacing: 0;
}

.vsl-page strong {
	font-weight: 500;
	color: var(--white);
}

/* trzyma całe zdanie w jednej linii: jeśli się nie mieści,
   przechodzi w całości niżej zamiast łamać się w środku */
.vsl-line {
	display: inline-block;
}

.vsl-container {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 24px;
}

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

.vsl-page section {
	padding: 96px 0;
}

.vsl-page section.is-tight {
	padding: 56px 0;
}

.vsl-panel {
	background: var(--dark-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* ---------- Etykiety i tytuły sekcji ---------- */
.vsl-label {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 18px;
	display: block;
}

.vsl-section-title {
	font-size: clamp(38px, 6.2vw, 64px);
	color: var(--white);
	margin-bottom: 26px;
}

.vsl-section-title.is-center,
.vsl-label.is-center {
	text-align: center;
}

.vsl-section-lead {
	color: var(--white);
	font-size: 18px;
	max-width: 640px;
}

.vsl-section-lead.is-center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.vsl-rule {
	width: 56px;
	height: 2px;
	background: var(--gold);
	margin: 0 0 26px 0;
}

.vsl-rule.is-center {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Placeholdery ---------- */
.vsl-placeholder {
	border: 1px dashed rgba(201, 168, 76, 0.45);
	background:
		repeating-linear-gradient(135deg, rgba(201, 168, 76, 0.035) 0 12px, transparent 12px 24px),
		var(--panel);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 12px;
	padding: 28px;
	color: var(--muted-2);
}

.vsl-placeholder-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 1px solid rgba(201, 168, 76, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	flex: none;
}

.vsl-placeholder-label {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 2px;
	color: var(--white);
}

.vsl-placeholder-note {
	font-size: 13px;
	letter-spacing: 0.3px;
	max-width: 380px;
	line-height: 1.5;
}

/* ---------- Hero ---------- */
.vsl-hero {
	position: relative;
	padding: 60px 0 40px 0;
	text-align: center;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(201, 168, 76, 0.10) 0%, rgba(10, 10, 10, 0) 62%),
		var(--dark);
	border-bottom: 1px solid var(--line);
}

.vsl-hero h1 {
	font-size: clamp(38px, 6.4vw, 72px);
	line-height: 0.94;
	margin-bottom: 20px;
}

.vsl-hero h1 em {
	display: block;
	font-size: 0.92em;
	line-height: 1.05;
}

.vsl-hero .vsl-subtitle {
	max-width: 620px;
	margin: 0 auto;
	color: var(--white);
	font-size: 17px;
}

/* przeniesione pod wideo, żeby nie spychać odtwarzacza pod fold */
.vsl-hero-meta {
	margin-top: 26px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted-2);
	font-weight: 500;
}

.vsl-hero-meta span::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	background: var(--gold);
	margin-right: 10px;
	vertical-align: middle;
}

/* ---------- Wideo ---------- */
.vsl-video-wrapper {
	position: relative;
	aspect-ratio: 16/9;
	width: 100%;
	border: 1px solid var(--line-2);
	background: #000;
}

.vsl-video-wrapper .vsl-placeholder {
	width: 100%;
	height: 100%;
	border: none;
}

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

.vsl-video-caption {
	margin-top: 18px;
	text-align: center;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted-2);
}

/* ---------- Przyciski ---------- */
.vsl-cta-block {
	text-align: center;
	margin-top: 44px;
}

.vsl-btn {
	display: inline-block;
	background: var(--gold);
	color: #0a0a0a;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 20px 46px;
	border: 1px solid var(--gold);
	border-radius: 2px;
	transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.vsl-btn:hover {
	background: var(--gold-light);
	border-color: var(--gold-light);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(201, 168, 76, 0.18);
}

.vsl-btn-note {
	margin-top: 18px;
	font-size: 14px;
	color: var(--muted-2);
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Lista (stary model) ---------- */
.vsl-list-card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-left: 2px solid var(--gold);
	padding: 34px 36px;
	margin: 0 0 34px 0;
}

.vsl-list-card ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 30px;
}

.vsl-list-card li {
	font-family: var(--font-display);
	font-size: 24px;
	letter-spacing: 1px;
	color: var(--white);
	position: relative;
	padding-left: 24px;
}

.vsl-list-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 12px;
	height: 1px;
	background: var(--gold);
}

.vsl-verdict {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.35;
	color: var(--gold);
	margin: 0;
	letter-spacing: 0;
}

/* ---------- Trzy filary ---------- */
.vsl-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 54px;
}

.vsl-pillar {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 38px 30px;
	transition: border-color .25s ease, transform .25s ease;
	display: flex;
	flex-direction: column;
}

.vsl-pillar:hover {
	border-color: rgba(201, 168, 76, 0.45);
	transform: translateY(-3px);
}

.vsl-pillar-num {
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: 3px;
	color: var(--gold);
	margin-bottom: 22px;
}

.vsl-pillar h3 {
	font-size: 34px;
	margin-bottom: 14px;
}

.vsl-pillar p {
	color: var(--white);
	font-size: 16px;
	line-height: 1.65;
	text-wrap: initial;
}

/* margin-top:auto trzyma pytania w jednej osi we wszystkich kartach */
.vsl-pillar-question {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 15px;
	color: var(--gold);
	font-style: italic;
	font-family: var(--font-serif);
}

.vsl-order-note {
	margin-top: 34px;
	text-align: center;
	font-size: 15px;
	color: var(--muted-2);
	letter-spacing: 0.5px;
}

/* ---------- Obraz przyszłości ---------- */
.vsl-future {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	margin-top: 46px;
}

.vsl-future-item {
	background: var(--dark-2);
	padding: 34px 28px;
}

.vsl-future-item h3 {
	font-size: 20px;
	color: var(--gold);
	margin-bottom: 12px;
	letter-spacing: 2px;
}

.vsl-future-item p {
	font-size: 16px;
	color: var(--white);
	line-height: 1.6;
	text-wrap: initial;
}

/* ---------- Opinie: kafelki ---------- */
/* grid zamiast column-count: kolejność czytania 01,02,03
   od lewej do prawej i równe górne krawędzie kafelków */
.vsl-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 48px;
}

.vsl-tile {
	background: var(--panel);
	border: 1px dashed rgba(201, 168, 76, 0.4);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vsl-tile-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.vsl-tile-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px dashed rgba(201, 168, 76, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: 1px;
	color: var(--gold);
	flex: none;
}

.vsl-tile-name {
	font-family: var(--font-display);
	font-size: 20px;
	letter-spacing: 1.5px;
	color: var(--white);
	line-height: 1.1;
}

.vsl-tile-role {
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--muted-2);
}

.vsl-tile-lines {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.vsl-tile-lines span {
	display: block;
	height: 9px;
	background: linear-gradient(90deg, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.05));
	border-radius: 2px;
}

.vsl-tile-foot {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted-2);
	border-top: 1px solid var(--line);
	padding-top: 14px;
	margin-top: auto;
}

/* ---------- Bio ---------- */
.vsl-bio-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: start;
}

.vsl-bio-photo {
	position: sticky;
	top: 40px;
}

.vsl-bio-photo .vsl-placeholder {
	aspect-ratio: 3/4;
}

.vsl-bio-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center;
	border: 1px solid var(--line-2);
}

.vsl-bio-name {
	font-family: var(--font-display);
	font-size: clamp(40px, 6vw, 62px);
	color: var(--gold);
	line-height: 0.95;
	letter-spacing: 2px;
	margin: 0 0 6px 0;
}

.vsl-bio-role {
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: 28px;
}

.vsl-bio-body p {
	color: var(--white);
	font-size: 16.5px;
}

.vsl-credentials {
	list-style: none;
	margin: 30px 0 0 0;
	padding: 26px 0 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: 12px;
}

.vsl-credentials li {
	font-size: 15px;
	color: var(--white);
	padding-left: 26px;
	position: relative;
}

.vsl-credentials li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 12px;
	height: 1px;
	background: var(--gold);
}

/* ---------- Obiekcje ---------- */
.vsl-objections {
	margin-top: 48px;
	border-top: 1px solid var(--line);
}

.vsl-objection {
	border-bottom: 1px solid var(--line);
	padding: 30px 0;
}

.vsl-objection h3 {
	font-size: 25px;
	margin-bottom: 14px;
	color: var(--white);
	display: flex;
	gap: 16px;
	align-items: baseline;
}

.vsl-objection h3 span {
	color: var(--gold);
	font-size: 16px;
	letter-spacing: 2px;
	flex: none;
}

.vsl-objection p {
	color: var(--white);
	font-size: 16.5px;
	padding-left: 38px;
}

/* ---------- Koszt inercji ---------- */
.vsl-cost {
	background:
		radial-gradient(100% 80% at 50% 100%, rgba(201, 168, 76, 0.09) 0%, rgba(10, 10, 10, 0) 60%),
		var(--dark);
}

.vsl-cost-quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(22px, 3.6vw, 30px);
	line-height: 1.45;
	color: var(--white);
	text-align: center;
	max-width: 720px;
	margin: 0 auto 30px auto;
	letter-spacing: 0;
}

/* ---------- Rozmowa: co się stanie ---------- */
.vsl-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 48px;
}

.vsl-step {
	text-align: center;
	padding: 34px 24px;
	border: 1px solid var(--line);
	background: var(--panel);
}

.vsl-step-num {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(201, 168, 76, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 21px;
	color: var(--gold);
	margin: 0 auto 20px auto;
}

.vsl-step h3 {
	font-size: 21px;
	margin-bottom: 10px;
}

.vsl-step p {
	font-size: 15.5px;
	color: var(--white);
	line-height: 1.6;
}

.vsl-honest {
	margin-top: 44px;
	border: 1px solid var(--line);
	border-left: 2px solid var(--gold);
	background: var(--panel);
	padding: 32px 34px;
}

.vsl-honest h3 {
	font-size: 22px;
	color: var(--gold);
	margin-bottom: 14px;
}

.vsl-honest p {
	color: var(--white);
	font-size: 16.5px;
}

/* ---------- Kalendarz ---------- */
.vsl-calendar-slot {
	margin-top: 44px;
	min-height: 620px;
	display: flex;
	/* oddech nad kalendarzem po skoku z przycisku */
	scroll-margin-top: 28px;
}

.vsl-calendar-slot .vsl-placeholder {
	width: 100%;
}

.vsl-calendar-slot .calendly-inline-widget {
	width: 100%;
	flex: 1 1 auto;
	/* Wysokość trzymana tutaj, nie w atrybucie style widgetu, bo zależy
	   od układu, który Calendly wybiera sam po szerokości ramki.
	   Poniżej 1000 px: jedna kolumna, opis nad kalendarzem — przy 700 px
	   siatka dni urywa się w połowie miesiąca, stąd 1100 px. */
	height: 1100px;
}

/* Od 1100 px szerokości okna ramka ma ponad 1000 px i Calendly przechodzi
   na układ dwukolumnowy: opis po lewej, kalendarz po prawej. Karta jest
   wtedy szersza niż wyższa i mieści się w 700 px. Po wybraniu dnia dokłada
   trzecią kolumnę z godzinami — rośnie w bok, nie w dół. */
@media (min-width: 1100px) {
	.vsl-calendar-slot .calendly-inline-widget {
		height: 700px;
	}
}

/* Na telefonie slot wychodzi poza margines kolumny tekstu na pełną
   szerokość ekranu. Widget sam wykrywa telefon (dokłada sobie klasę
   calendly-mobile) i układa się w tej szerokości — te 48 px to czysty
   zysk na siatce dni. */
@media (max-width: 640px) {
	.vsl-calendar-slot {
		/* -20 px, bo tyle wynosi padding kontenera w tym samym progu.
		   Przy -24 px slot wystawał 4 px poza ekran z każdej strony. */
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* ---------- Sticky CTA bar ---------- */
.vsl-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	/* zawsze przy krawędzi okna — nie zależy od baneru cookie.
	   Gdy blokada treści ukryje baner, sticky bar i tak nie odskoczy. */
	bottom: 0;
	z-index: 60;
	background: rgba(13, 13, 13, 0.96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid rgba(201, 168, 76, 0.35);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
	transform: translateY(110%);
	transition: transform .3s ease;
	padding: 14px 0;
}

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

.vsl-sticky-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.vsl-sticky-text {
	font-family: var(--font-display);
	font-size: 22px;
	letter-spacing: 1px;
	color: var(--white);
	line-height: 1.1;
}

.vsl-sticky-text small {
	display: block;
	font-family: var(--font-body);
	font-size: 12.5px;
	letter-spacing: 0.3px;
	text-transform: none;
	color: var(--muted-2);
	font-weight: 400;
	margin-top: 3px;
}

.vsl-sticky-cta .vsl-btn {
	padding: 15px 34px;
	font-size: 13px;
	flex: none;
}

@media (max-width: 760px) {
	.vsl-sticky-cta {
		padding: 10px 0;
	}

	.vsl-sticky-inner {
		padding: 0 16px;
		gap: 0;
	}

	/* na mobile sam przycisk na pełną szerokość, tekst zbędny */
	.vsl-sticky-text {
		display: none;
	}

	.vsl-sticky-cta .vsl-btn {
		display: block;
		width: 100%;
		padding: 16px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vsl-sticky-cta {
		transition: none;
	}
}

/* ---------- Strona podziękowania ---------- */
.vsl-check {
	/* kolor znaczka idzie przez currentColor: var() nie działa
	   w atrybutach prezentacyjnych SVG */
	color: var(--gold);
	margin: 0 0 30px 0;
	line-height: 0;
}

.vsl-mail {
	color: var(--gold);
	border-bottom: 1px solid rgba(201, 168, 76, 0.4);
	transition: border-color 0.2s;
}

.vsl-mail:hover {
	border-bottom-color: var(--gold);
}

/* ---------- Stopka ---------- */
.vsl-page footer {
	background: var(--dark-2);
	border-top: 1px solid var(--line);
	text-align: center;
	/* zapas na baner cookie, żeby nie zasłaniał copyrightu */
	padding: 40px 0 calc(40px + var(--baner-h)) 0;
	font-size: 13px;
	color: var(--muted-2);
	letter-spacing: 0.5px;
}

/* ---------- Baner cookie ---------- */
/* Pasek INFORMACYJNY, nie bramka zgody — nie blokuje piksela.
   Standard: .claude/skills/strona-vsl-kod/references/standard-techniczny.md, sekcja 6. */
.cookie-bar {
	position: fixed;
	left: 0;
	right: 0;
	/* baner siada NAD sticky barem. --sticky-h ustawia skrypt sticky baru:
	   jego wysokość, gdy pasek jest widoczny, zero w pozostałych przypadkach. */
	bottom: var(--sticky-h, 0px);
	transition: bottom 0.3s ease;
	/* wyżej niż sticky bar (60), żeby się pod nim nie chował */
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
	background: rgba(13, 13, 13, 0.98);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid rgba(201, 168, 76, 0.35);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}

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

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

/* przycisk zgody celowo mniejszy od CTA strony, żeby nie konkurował z rezerwacją */
.cookie-bar .cookie-ok {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #0a0a0a;
	background: var(--gold);
	border: 0;
	padding: 11px 26px;
	min-height: 44px;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.cookie-bar .cookie-ok:hover {
	background: var(--gold-light);
}

.cookie-bar .cookie-x {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--line-2);
	color: var(--muted-2);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.cookie-bar .cookie-x:hover {
	color: var(--white);
	border-color: var(--gold);
}

@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;
	}
}

/* ---------- Responsywność ---------- */
@media (max-width: 900px) {

	.vsl-pillars,
	.vsl-steps,
	.vsl-future {
		grid-template-columns: 1fr;
	}

	.vsl-future {
		gap: 1px;
	}

	.vsl-tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.vsl-bio-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.vsl-bio-photo {
		position: static;
		max-width: 340px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.vsl-page {
		font-size: 16px;
	}

	.vsl-page section {
		padding: 64px 0;
	}

	.vsl-page section.is-tight {
		padding: 40px 0;
	}

	.vsl-hero {
		padding: 72px 0 60px 0;
	}

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

	.vsl-list-card {
		padding: 26px 22px;
	}

	.vsl-list-card ul {
		grid-template-columns: 1fr;
	}

	.vsl-tiles {
		grid-template-columns: 1fr;
	}

	.vsl-objection p {
		padding-left: 0;
	}

	.vsl-objection h3 {
		display: block;
	}

	.vsl-objection h3 span {
		display: block;
		margin-bottom: 6px;
	}

	.vsl-btn {
		display: block;
		padding: 19px 24px;
		font-size: 13px;
		letter-spacing: 1.5px;
	}

	.vsl-honest {
		padding: 26px 22px;
	}

	.vsl-calendar-slot {
		min-height: 460px;
	}
}