/* ============================================================
   WYGLĄD STRON WIOLETTY
   Wspólny dla wszystkich podstron tego klienta.
   Podstrony ładują go jako /style.css
   Wyciągnięty ze strony /konsultacja 2026-08-07.
   ============================================================ */

		.vsl-page {
			--color-1: 154, 168, 143;
			/* #9AA88F - szałwia */
			--color-2: 246, 242, 233;
			/* #F6F2E9 - kremowe tło */
			--color-3: 106, 122, 92;
			/* #6A7A5C - oliwka - przyciski */
			--color-4: 31, 44, 34;
			/* #1F2C22 - ciemna zieleń - tło sekcji */
			--color-5: 168, 122, 62;
			/* #A87A3E - bursztyn - ciepły akcent */
			--color-6: 28, 32, 27;
			/* #1C201B - tekst */
			--color-accent: 201, 162, 74;
			/* #C9A24A - złoto - wyróżnienia, gwiazdki */
			--color-card: 255, 255, 255;

			--font-heading: "Montserrat", Helvetica, Arial, sans-serif;
			--font-body: "Montserrat", Helvetica, Arial, sans-serif;
			--font-script: "Parisienne", cursive;

			/* skala odstępów */
			--space-xs: 8px;
			--space-sm: 16px;
			--space-md: 28px;
			--space-lg: 48px;
			--space-xl: 80px;
			--radius: 18px;

			font-family: var(--font-body);
			color: rgba(var(--color-6), 1);
			background-color: rgba(var(--color-2), 1);
			line-height: 1.75;
			font-weight: 300;
			letter-spacing: 0.1px;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			width: 100vw;
			max-width: 100vw;
			margin-top: 0;
			margin-bottom: 0;
			margin-left: calc(50% - 50vw);
			margin-right: calc(50% - 50vw);
			overflow-x: hidden;
		}

		body {
			margin: 0;
		}

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

		.vsl-page h1,
		.vsl-page h2,
		.vsl-page h3 {
			font-family: var(--font-heading);
			font-weight: 600;
			margin: 0 0 var(--space-md) 0;
			line-height: 1.28;
			letter-spacing: -0.3px;
		}

		/* uwaga: tylko marginesy pionowe, żeby nie nadpisywać "margin: 0 auto"
		   w regułach o niższej specyficzności (centrowane akapity) */
		.vsl-page p {
			margin-top: 0;
			margin-bottom: var(--space-sm);
		}

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

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

		.vsl-container {
			max-width: 940px;
			margin: 0 auto;
			padding: 0 28px;
		}

		.vsl-container-narrow {
			max-width: 780px;
			margin: 0 auto;
			padding: 0 28px;
		}

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

		.vsl-page section {
			padding: var(--space-xl) 0;
		}

		/* ---------- Placeholdery ---------- */
		.vsl-placeholder {
			border: 2px dashed rgba(var(--color-1), 0.85);
			background-color: rgba(var(--color-1), 0.1);
			border-radius: var(--radius);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: rgba(var(--color-3), 1);
			font-size: 14px;
			line-height: 1.6;
			gap: 10px;
			padding: 32px;
		}

		.vsl-placeholder svg {
			opacity: 0.5;
		}

		.vsl-placeholder-label {
			text-transform: uppercase;
			font-size: 11px;
			letter-spacing: 1.8px;
			font-weight: 600;
			color: rgba(var(--color-3), 0.95);
		}

		/* ---------- Hero ---------- */
		.vsl-hero {
			background-color: rgba(var(--color-4), 1);
			background-image:
				radial-gradient(ellipse 62% 58% at 50% 0%, rgba(var(--color-5), 0.2), transparent 72%);
			color: rgba(var(--color-2), 1);
			text-align: center;
			padding: 88px 0 72px 0;
		}

		.vsl-hero .vsl-eyebrow {
			display: inline-block;
			font-size: 11.5px;
			letter-spacing: 3.2px;
			text-transform: uppercase;
			color: rgba(var(--color-1), 1);
			margin-bottom: var(--space-md);
			font-weight: 500;
		}

		.vsl-hero h1 {
			font-size: 42px;
			font-weight: 600;
			line-height: 1.24;
			color: rgba(var(--color-2), 1);
			max-width: 860px;
			margin: 0 auto;
			letter-spacing: -0.6px;
		}

		.vsl-hero h1 .vsl-accent {
			color: rgba(var(--color-accent), 1);
		}

		.vsl-hero .vsl-subtitle {
			max-width: 640px;
			margin: var(--space-md) auto 0 auto;
			font-size: 17px;
			font-weight: 300;
			line-height: 1.7;
			color: rgba(246, 242, 233, 0.84);
		}

		.vsl-hero .vsl-divider {
			width: 60px;
			height: 2px;
			background-color: rgba(var(--color-accent), 0.85);
			margin: 36px auto 0 auto;
		}

		/* ---------- Wideo ---------- */
		.vsl-video-wrapper {
			position: relative;
			aspect-ratio: 16/9;
			width: 100%;
		}

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

		.vsl-video-frame {
			box-shadow: 0 24px 60px rgba(31, 44, 34, 0.16);
			border-radius: var(--radius);
			overflow: hidden;
		}

		/* ---------- Przyciski ---------- */
		.vsl-btn {
			display: inline-block;
			background-color: rgba(var(--color-3), 1);
			color: rgba(var(--color-2), 1) !important;
			font-family: var(--font-body);
			font-weight: 600;
			letter-spacing: 1.4px;
			text-transform: uppercase;
			font-size: 13.5px;
			line-height: 1.4;
			padding: 21px 48px;
			/* wspólna szerokość wszystkich głównych CTA, niezależnie od długości napisu */
			min-width: 340px;
			max-width: 100%;
			text-align: center;
			border: 2px solid rgba(var(--color-3), 1);
			border-radius: 999px;
			box-shadow: 0 10px 26px rgba(31, 44, 34, 0.14);
			transition: background-color .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
		}

		.vsl-btn:hover {
			background-color: rgba(var(--color-4), 1);
			border-color: rgba(var(--color-4), 1);
			transform: translateY(-2px);
			box-shadow: 0 16px 34px rgba(31, 44, 34, 0.2);
		}

		.vsl-btn-light {
			background-color: rgba(var(--color-accent), 1);
			border-color: rgba(var(--color-accent), 1);
			color: rgba(var(--color-4), 1) !important;
		}

		.vsl-btn-light:hover {
			background-color: rgba(var(--color-2), 1);
			border-color: rgba(var(--color-2), 1);
			color: rgba(var(--color-4), 1) !important;
		}

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

		.vsl-section-cta {
			text-align: center;
			margin-top: var(--space-lg);
		}

		.vsl-page .vsl-btn-note {
			margin: var(--space-md) auto 0 auto;
			max-width: 520px;
			font-size: 14.5px;
			line-height: 1.7;
			color: rgba(var(--color-3), 1);
		}

		.vsl-btn-note-light {
			color: rgba(246, 242, 233, 0.7);
		}

		/* ---------- Nagłówki sekcji ---------- */
		.vsl-section-title {
			text-align: center;
			font-size: 32px;
			font-weight: 600;
			color: rgba(var(--color-4), 1);
			margin-bottom: var(--space-sm);
		}

		.vsl-page .vsl-section-subtitle {
			text-align: center;
			max-width: 620px;
			margin: 0 auto var(--space-lg) auto;
			color: rgba(var(--color-6), 1);
			font-size: 16.5px;
			line-height: 1.75;
		}

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

		.vsl-page section.vsl-section-dark {
			background-color: rgba(var(--color-4), 1);
			color: rgba(246, 242, 233, 0.86);
		}

		.vsl-section-dark .vsl-section-title {
			color: rgba(var(--color-2), 1);
		}

		.vsl-page .vsl-section-dark .vsl-section-subtitle {
			color: rgba(var(--color-2), 1);
		}

		.vsl-eyebrow-center {
			display: block;
			text-align: center;
			font-size: 11.5px;
			letter-spacing: 3.2px;
			text-transform: uppercase;
			color: rgba(var(--color-5), 1);
			margin-bottom: var(--space-sm);
			font-weight: 600;
		}

		.vsl-section-dark .vsl-eyebrow-center {
			color: rgba(var(--color-accent), 1);
		}

		/* ---------- Lista bólu ---------- */
		.vsl-page .vsl-pain-intro {
			text-align: center;
			max-width: 620px;
			margin: 0 auto;
			padding: var(--space-sm) 0 var(--space-lg) 0;
			font-size: 16.5px;
			line-height: 1.75;
			color: rgba(var(--color-6), 1);
		}

		.vsl-pain-list {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 18px 40px;
		}

		.vsl-pain-list li {
			position: relative;
			padding-left: 34px;
			font-size: 16px;
			line-height: 1.65;
		}

		.vsl-pain-list li::before {
			content: "";
			position: absolute;
			left: 4px;
			top: 10px;
			width: 11px;
			height: 11px;
			border: 1.5px solid rgba(var(--color-5), 0.85);
			transform: rotate(45deg);
		}

		.vsl-page .vsl-verdict {
			font-size: 21px;
			font-weight: 500;
			line-height: 1.5;
			color: rgba(var(--color-4), 1);
			border-left: 3px solid rgba(var(--color-5), 1);
			padding: 10px 0 10px 30px;
			margin: var(--space-xl) 0 0 0;
			letter-spacing: -0.2px;
		}

		/* jedno zdanie = jedna linia */
		.vsl-verdict-line {
			display: block;
			text-wrap: balance;
		}

		.vsl-verdict-line + .vsl-verdict-line {
			margin-top: 6px;
		}

		.vsl-verdict strong {
			font-weight: 600;
			color: rgba(var(--color-5), 1);
		}

		/* ---------- Mechanizm - etapy ---------- */
		.vsl-steps {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
		}

		.vsl-step {
			background-color: rgba(var(--color-card), 1);
			border: 1px solid rgba(var(--color-1), 0.4);
			border-radius: var(--radius);
			padding: 34px 30px;
			box-shadow: 0 8px 24px rgba(31, 44, 34, 0.05);
		}

		.vsl-step-num {
			font-size: 11px;
			letter-spacing: 2.2px;
			color: rgba(var(--color-5), 1);
			font-weight: 600;
			text-transform: uppercase;
			display: block;
			margin-bottom: 14px;
		}

		.vsl-step h3 {
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 14px;
			color: rgba(var(--color-4), 1);
		}

		.vsl-step p {
			font-size: 15px;
			line-height: 1.72;
			margin: 0;
			color: rgba(var(--color-6), 0.82);
		}

		/* ---------- Liczby ---------- */
		.vsl-stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
		}

		.vsl-stat {
			text-align: center;
			padding: 38px 22px;
			border: 1px solid rgba(246, 242, 233, 0.16);
			border-radius: var(--radius);
		}

		.vsl-stat-num {
			font-size: 42px;
			font-weight: 600;
			line-height: 1.1;
			letter-spacing: -1px;
			color: rgba(var(--color-accent), 1);
			display: block;
			margin-bottom: 12px;
		}

		.vsl-stat-label {
			font-size: 14.5px;
			color: rgba(246, 242, 233, 0.72);
			line-height: 1.6;
		}

		/* ---------- Case study ---------- */
		.vsl-case-study-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 28px;
			max-width: 900px;
			margin: 0 auto;
		}

		.vsl-case-study-grid .vsl-video-wrapper {
			aspect-ratio: 9/16;
		}

		.vsl-page .vsl-case-caption {
			text-align: center;
			font-size: 14px;
			color: rgba(var(--color-3), 1);
			margin: var(--space-sm) 0 0 0;
		}

		/* ---------- Opinie - kafelki ---------- */
		.vsl-testimonial-grid {
			column-count: 3;
			column-gap: 26px;
		}

		.vsl-testimonial {
			break-inside: avoid;
			margin-bottom: 26px;
			background-color: rgba(var(--color-card), 1);
			border: 1px solid rgba(var(--color-1), 0.32);
			border-radius: var(--radius);
			padding: 34px 32px;
			box-shadow: 0 10px 28px rgba(31, 44, 34, 0.06);
		}

		.vsl-testimonial-head {
			display: flex;
			align-items: center;
			gap: 16px;
			margin-bottom: 18px;
		}

		.vsl-testimonial-avatar {
			width: 54px;
			height: 54px;
			flex: 0 0 54px;
			border-radius: 50%;
			background-color: rgba(var(--color-3), 1);
			color: rgba(var(--color-2), 1);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-weight: 600;
			letter-spacing: 0.5px;
		}

		.vsl-testimonial-name {
			font-size: 16.5px;
			font-weight: 600;
			color: rgba(var(--color-4), 1);
			line-height: 1.4;
		}

		.vsl-testimonial-stars {
			display: flex;
			gap: 3px;
			color: rgba(var(--color-accent), 1);
			margin-bottom: 18px;
		}

		.vsl-testimonial p {
			font-size: 16px;
			line-height: 1.8;
			margin: 0;
			color: rgba(var(--color-6), 0.85);
		}

		.vsl-placeholder-tag {
			display: inline-block;
			font-size: 10px;
			letter-spacing: 1.6px;
			text-transform: uppercase;
			font-weight: 600;
			color: rgba(var(--color-3), 0.85);
			background-color: rgba(var(--color-1), 0.18);
			border: 1px dashed rgba(var(--color-1), 0.9);
			border-radius: 999px;
			padding: 4px 12px;
			margin-bottom: 20px;
		}

		/* ---------- Obiekcje ---------- */
		.vsl-objection {
			border-bottom: 1px solid rgba(var(--color-1), 0.45);
			padding: var(--space-md) 0;
		}

		.vsl-objection:first-of-type {
			border-top: 1px solid rgba(var(--color-1), 0.45);
		}

		.vsl-objection h3 {
			font-size: 18.5px;
			font-weight: 600;
			margin: 0 0 12px 0;
			color: rgba(var(--color-4), 1);
		}

		.vsl-objection p {
			margin: 0;
			font-size: 16px;
			line-height: 1.78;
			color: rgba(var(--color-6), 0.82);
		}

		/* ---------- Calendly ---------- */
		.vsl-calendly-placeholder {
			min-height: 560px;
		}

		/* ---------- Bio ---------- */
		.vsl-bio-container {
			max-width: 1060px;
			margin: 0 auto;
			padding: 0 28px;
		}

		.vsl-bio-grid {
			display: grid;
			grid-template-columns: 1.12fr 0.88fr;
			grid-template-areas:
				"header photo"
				"body photo";
			column-gap: 64px;
			row-gap: var(--space-md);
			align-items: start;
		}

		.vsl-bio-header {
			grid-area: header;
		}

		.vsl-bio-body {
			grid-area: body;
		}

		.vsl-bio-header h2 {
			font-size: 26px;
			font-weight: 600;
			color: rgba(var(--color-4), 1);
			margin: 0;
		}

		.vsl-page .vsl-bio-name {
			font-family: var(--font-script);
			color: rgba(var(--color-5), 1);
			font-size: 62px;
			font-weight: 400;
			line-height: 1.05;
			margin: 0 0 var(--space-xs) 0;
		}

		.vsl-bio-body p {
			font-size: 16px;
			line-height: 1.85;
			color: rgba(var(--color-6), 0.85);
			margin-bottom: var(--space-sm);
		}

		.vsl-bio-photo {
			grid-area: photo;
			position: sticky;
			top: 40px;
			align-self: start;
		}

		.vsl-bio-photo img {
			width: 100%;
			aspect-ratio: 3/4;
			object-fit: cover;
			border-radius: var(--radius);
			display: block;
			box-shadow: 0 18px 44px rgba(31, 44, 34, 0.14);
		}

		/* ---------- Sticky CTA ---------- */
		.vsl-sticky-cta {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 900;
			background-color: rgba(var(--color-4), 0.97);
			backdrop-filter: blur(8px);
			border-top: 1px solid rgba(var(--color-accent), 0.35);
			box-shadow: 0 -8px 30px rgba(31, 44, 34, 0.22);
			transform: translateY(110%);
			transition: transform .35s cubic-bezier(.2, .7, .3, 1);
			padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)) 0;
		}

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

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

		.vsl-page .vsl-sticky-text {
			margin: 0;
			font-size: 15.5px;
			line-height: 1.5;
			color: rgba(var(--color-2), 1);
			font-weight: 400;
		}

		.vsl-page .vsl-sticky-text strong {
			font-weight: 600;
			color: rgba(var(--color-accent), 1);
		}

		.vsl-sticky-cta .vsl-btn {
			padding: 15px 34px;
			font-size: 12.5px;
			white-space: nowrap;
			box-shadow: none;
			flex: 0 0 auto;
			min-width: 0;
		}

		/* ---------- Stopka ---------- */
		.vsl-page footer {
			background-color: rgba(var(--color-4), 1);
			color: rgba(246, 242, 233, 0.55);
			text-align: center;
			padding: 40px 0;
			font-size: 13px;
			line-height: 1.7;
		}

		.vsl-page footer p {
			margin: 0 0 6px 0;
		}

		/* ---------- Responsywność ---------- */
		@media (max-width: 980px) {
			.vsl-testimonial-grid {
				column-count: 2;
			}

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

			.vsl-hero h1 {
				font-size: 36px;
			}
		}

		@media (max-width: 760px) {
			.vsl-page {
				--space-xl: 56px;
				--space-lg: 34px;
				line-height: 1.7;
			}

			.vsl-hero {
				padding: 58px 0 48px 0;
			}

			.vsl-hero h1 {
				font-size: 28px;
				letter-spacing: -0.3px;
			}

			.vsl-hero .vsl-subtitle {
				font-size: 16px;
			}

			.vsl-section-title {
				font-size: 25px;
			}

			.vsl-page .vsl-section-subtitle {
				font-size: 16px;
			}

			.vsl-pain-list {
				grid-template-columns: 1fr;
				gap: 16px;
			}

			.vsl-page .vsl-verdict {
				font-size: 18px;
				padding: 6px 0 6px 20px;
				margin-top: var(--space-lg);
			}

			.vsl-verdict-line + .vsl-verdict-line {
				margin-top: 10px;
			}

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

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

			.vsl-case-study-grid {
				grid-template-columns: 1fr;
				max-width: 320px;
			}

			.vsl-testimonial-grid {
				column-count: 1;
			}

			.vsl-testimonial {
				padding: 28px 24px;
			}

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

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

			.vsl-page .vsl-bio-name {
				font-size: 50px;
			}

			.vsl-sticky-cta {
				padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)) 0;
			}

			.vsl-sticky-inner {
				flex-direction: column;
				align-items: stretch;
				gap: 10px;
				padding: 0 18px;
			}

			.vsl-page .vsl-sticky-text {
				font-size: 13.5px;
				text-align: center;
			}

			.vsl-sticky-cta .vsl-btn {
				display: block;
				width: 100%;
				text-align: center;
				padding: 17px 20px;
			}
		}

		@media (max-width: 400px) {
			.vsl-btn {
				padding: 18px 24px;
				font-size: 12.5px;
				letter-spacing: 1px;
				min-width: 0;
				width: 100%;
			}

			.vsl-hero h1 {
				font-size: 25px;
			}
		}

		/* ================================================================
		   DODANE W AUDYCIE — nowe komponenty
		   ================================================================ */

		/* ---------- Logo w hero (spójność reklama -> strona) ---------- */
		.vsl-logo {
			display: block;
			margin: 0 auto var(--space-md) auto;
			max-width: 150px;
		}

		.vsl-logo .vsl-placeholder {
			padding: 12px;
			font-size: 10px;
			border-color: rgba(var(--color-1), 0.55);
			color: rgba(var(--color-1), 1);
			background-color: transparent;
		}

		/* ---------- Okładka wideo (BEZ autoplay) ---------- */
		/* ---------- Okładka wideo ----------
		   Robiona w kodzie strony, nie w bibliotece bunny.net: zmiana okładki to
		   zmiana tekstu w index.html, bez wgrywania pliku do odtwarzacza.
		   Układ jak u Pawła Sowy (.video-makieta): pełne zdjęcie, przyciemnienie
		   od lewej, przycisk odtwarzania nad tekstem, tekst w dolnej części kadru.

		   Zdjęcie jest prawie kwadratowe, a kadr ma 16:9, więc "cover" skaluje je
		   szerokością. object-position trzyma twarz w prawej części kadru,
		   a lewą zostawia na tekst. */
		.vsl-video-cover {
			position: absolute;
			inset: 0;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-end;
			text-align: left;
			padding: 28px 7% 8%;
			border: 0;
			font-family: var(--font-body);
			color: rgba(var(--color-2), 1);
			cursor: pointer;
			background-color: rgba(var(--color-4), 1);
			background-image: url("https://media-static.b-cdn.net/wiola/wioletta-zdjecie.jpeg");
			background-size: 122% auto;
			background-position: left 22%;
			background-repeat: no-repeat;
		}

		/* przyciemnienie od lewej - pod treścią, nad zdjęciem */
		.vsl-video-cover::before {
			content: "";
			position: absolute;
			inset: 0;
			background-image: linear-gradient(100deg,
					rgba(20, 29, 22, 0.94) 0%,
					rgba(20, 29, 22, 0.80) 34%,
					rgba(20, 29, 22, 0.42) 60%,
					rgba(20, 29, 22, 0.22) 80%,
					rgba(20, 29, 22, 0.30) 100%);
		}

		.vsl-video-cover > * {
			position: relative;
			z-index: 1;
		}

		.vsl-video-cover:hover .vsl-play-btn {
			transform: scale(1.06);
		}

		.vsl-play-btn {
			width: 84px;
			height: 84px;
			border-radius: 50%;
			background-color: rgba(var(--color-accent), 1);
			color: rgba(var(--color-4), 1);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 0 0 10px rgba(var(--color-accent), 0.18), 0 12px 34px rgba(0, 0, 0, 0.45);
			flex: 0 0 auto;
			margin-bottom: 26px;
			transition: transform .18s ease;
		}

		.vsl-page .vsl-video-cover-title {
			display: block;
			margin: 0;
			font-family: var(--font-heading);
			font-size: clamp(22px, 3.4vw, 46px);
			font-weight: 700;
			line-height: 1.16;
			letter-spacing: -0.8px;
			max-width: 17ch;
			color: rgba(var(--color-2), 1);
			text-shadow: 0 3px 22px rgba(0, 0, 0, 0.55);
		}

		.vsl-page .vsl-video-cover-label {
			margin: 0;
			font-size: 11.5px;
			letter-spacing: 2.6px;
			text-transform: uppercase;
			font-weight: 600;
			color: rgba(var(--color-accent), 1);
		}

		/* ---------- Fascynacje: co odkryjesz w wideo ---------- */
		.vsl-fascinations {
			list-style: none;
			padding: 0;
			margin: 0 auto;
			max-width: 780px;
			display: grid;
			gap: 20px;
		}

		.vsl-fascinations li {
			position: relative;
			padding-left: 42px;
			font-size: 16.5px;
			line-height: 1.72;
		}

		.vsl-fascinations li::before {
			content: "";
			position: absolute;
			left: 0;
			top: 6px;
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background-color: rgba(var(--color-5), 0.16);
			border: 1.5px solid rgba(var(--color-5), 0.85);
		}

		.vsl-fascinations li::after {
			content: "";
			position: absolute;
			left: 7px;
			top: 13px;
			width: 7px;
			height: 4px;
			border-left: 2px solid rgba(var(--color-5), 1);
			border-bottom: 2px solid rgba(var(--color-5), 1);
			transform: rotate(-45deg);
		}

		/* ---------- Agenda rozmowy (stos wartości book-a-call) ---------- */
		.vsl-agenda {
			display: grid;
			gap: 18px;
			max-width: 820px;
			margin: 0 auto;
		}

		.vsl-agenda-item {
			background-color: rgba(var(--color-card), 1);
			border: 1px solid rgba(var(--color-1), 0.4);
			border-left: 4px solid rgba(var(--color-5), 1);
			border-radius: var(--radius);
			padding: 26px 30px;
			box-shadow: 0 8px 24px rgba(31, 44, 34, 0.05);
		}

		.vsl-agenda-item h3 {
			font-size: 18px;
			font-weight: 600;
			margin: 0 0 10px 0;
			color: rgba(var(--color-4), 1);
		}

		.vsl-agenda-time {
			font-size: 11px;
			letter-spacing: 2px;
			text-transform: uppercase;
			font-weight: 600;
			color: rgba(var(--color-5), 1);
			display: block;
			margin-bottom: 8px;
		}

		.vsl-agenda-item p {
			margin: 0;
			font-size: 15.5px;
			line-height: 1.74;
			color: rgba(var(--color-6), 0.82);
		}

		/* ---------- Dla kogo / nie dla kogo ---------- */
		.vsl-forwho {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 24px;
			max-width: 900px;
			margin: var(--space-lg) auto 0 auto;
		}

		.vsl-forwho-col {
			border-radius: var(--radius);
			padding: 30px 32px;
			border: 1px solid rgba(var(--color-1), 0.45);
			background-color: rgba(var(--color-card), 1);
		}

		.vsl-forwho-col h3 {
			font-size: 17px;
			font-weight: 600;
			margin: 0 0 18px 0;
			color: rgba(var(--color-4), 1);
		}

		.vsl-forwho-col ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			gap: 12px;
		}

		.vsl-forwho-col li {
			position: relative;
			padding-left: 26px;
			font-size: 15.5px;
			line-height: 1.66;
			color: rgba(var(--color-6), 0.84);
		}

		.vsl-forwho-yes li::before {
			content: "";
			position: absolute;
			left: 3px;
			top: 8px;
			width: 9px;
			height: 5px;
			border-left: 2px solid rgba(var(--color-3), 1);
			border-bottom: 2px solid rgba(var(--color-3), 1);
			transform: rotate(-45deg);
		}

		.vsl-forwho-no li::before {
			content: "";
			position: absolute;
			left: 4px;
			top: 11px;
			width: 11px;
			height: 1.5px;
			background-color: rgba(var(--color-5), 0.9);
		}

		/* ---------- Dziennik 7 dni ---------- */
		.vsl-diary {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20px;
			max-width: 1000px;
			margin: 0 auto;
		}

		.vsl-diary-card {
			background-color: rgba(var(--color-card), 1);
			border: 1px solid rgba(var(--color-1), 0.4);
			border-top: 4px solid rgba(var(--color-5), 1);
			border-radius: var(--radius);
			padding: 26px 24px;
			box-shadow: 0 8px 24px rgba(31, 44, 34, 0.05);
		}

		.vsl-diary-day {
			display: block;
			font-size: 11px;
			letter-spacing: 2px;
			text-transform: uppercase;
			font-weight: 600;
			color: rgba(var(--color-5), 1);
			margin-bottom: 10px;
		}

		.vsl-page .vsl-diary-card p {
			margin: 0;
			font-size: 15.5px;
			line-height: 1.74;
			color: rgba(var(--color-6), 0.82);
		}

		/* ---------- Odwrócenie ryzyka ---------- */
		.vsl-guarantee {
			max-width: 780px;
			margin: 0 auto;
			border: 1px solid rgba(var(--color-accent), 0.55);
			border-radius: var(--radius);
			background-color: rgba(var(--color-card), 1);
			padding: 46px 48px;
			text-align: center;
			box-shadow: 0 12px 34px rgba(31, 44, 34, 0.07);
		}

		.vsl-guarantee h3 {
			font-size: 24px;
			font-weight: 600;
			color: rgba(var(--color-4), 1);
			margin: 0 0 var(--space-sm) 0;
		}

		.vsl-page .vsl-guarantee p {
			font-size: 16.5px;
			line-height: 1.8;
			color: rgba(var(--color-6), 0.86);
			margin-bottom: var(--space-sm);
		}

		.vsl-guarantee-seal {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 58px;
			height: 58px;
			border-radius: 50%;
			background-color: rgba(var(--color-accent), 0.16);
			color: rgba(var(--color-5), 1);
			margin-bottom: var(--space-sm);
		}

		/* ---------- Disclaimery ---------- */
		.vsl-page .vsl-disclaimer {
			max-width: 780px;
			margin: var(--space-lg) auto 0 auto;
			font-size: 13px;
			line-height: 1.7;
			color: rgba(var(--color-6), 0.6);
			text-align: center;
		}

		.vsl-page .vsl-disclaimer-inline {
			max-width: 780px;
			margin: var(--space-md) auto 0 auto;
			font-size: 13px;
			line-height: 1.7;
			color: rgba(var(--color-6), 0.6);
			text-align: center;
			font-style: italic;
		}

		/* ---------- Stopka compliance ---------- */
		.vsl-footer-links {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 10px 26px;
			margin: 0 0 var(--space-md) 0;
			padding: 0;
			list-style: none;
		}

		.vsl-footer-links a {
			color: rgba(246, 242, 233, 0.82) !important;
			font-size: 13px;
			border-bottom: 1px solid rgba(246, 242, 233, 0.25);
			padding-bottom: 2px;
		}

		.vsl-footer-links a:hover {
			color: rgba(var(--color-accent), 1) !important;
			border-bottom-color: rgba(var(--color-accent), 0.8);
		}

		.vsl-page footer .vsl-footer-legal {
			max-width: 860px;
			margin: 0 auto var(--space-sm) auto;
			font-size: 12px;
			line-height: 1.7;
			color: rgba(246, 242, 233, 0.45);
		}

		.vsl-page footer .vsl-footer-company {
			color: rgba(246, 242, 233, 0.6);
			margin-bottom: var(--space-sm);
		}

		.vsl-footer-divider {
			width: 60px;
			height: 1px;
			background-color: rgba(246, 242, 233, 0.2);
			margin: var(--space-md) auto;
		}

		/* ---------- Responsywność nowych komponentów ---------- */
		@media (max-width: 980px) {
			.vsl-diary {
				grid-template-columns: 1fr 1fr;
			}
		}

		@media (max-width: 760px) {
			.vsl-forwho {
				grid-template-columns: 1fr;
			}

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

			.vsl-guarantee {
				padding: 32px 24px;
			}

			.vsl-page .vsl-video-cover-title {
				font-size: 16.5px;
			}

			.vsl-play-btn {
				width: 60px;
				height: 60px;
			}

			.vsl-fascinations li {
				font-size: 16px;
				padding-left: 36px;
			}

			.vsl-agenda-item {
				padding: 24px 22px;
			}
		}

		/* ============================================================
		   BANER COOKIE
		   Pasek informacyjny, NIE bramka zgody: nie blokuje piksela Meta
		   ani zadnego innego skryptu. Decyzja wlasciciela systemu z 2026-08-07,
		   szczegoly w skillu /strona-vsl-kod, references/standard-techniczny.md, sekcja 6.

		   Paleta Wioletty: ciemna zielen (--color-4) jako tlo paska, oliwka (--color-3)
		   na przycisku, przycisk w konwencji jej .vsl-btn (wersaliki, spacja 1.4px,
		   promien 999px). z-index 910, czyli NAD jej sticky barem, ktory siedzi na 900.

		   Kolejnosc pionowa: sticky bar zawsze przy krawedzi okna (bottom: 0),
		   baner siada nad nim (bottom: var(--sticky-h)). Odwrotnie byloby krucho:
		   blokada tresci ukrywa pasek cookie po nazwie klasy i sticky bar zawisalby
		   nad pusta przerwa. Poprawka przeniesiona z commita 7d02839 (Kamil Kozlowski).

		   --baner-h i --sticky-h ustawiaja skrypty na <html>; tutaj czytane z zapasem
		   var(--x, 0px). Zapasu nie zastapi deklaracja w .vsl-page - jej wlasna
		   deklaracja wygralaby z wartoscia dziedziczona z <html> i zawsze dawala zero.
		   ============================================================ */
		.cookie-bar {
			position: fixed;
			left: 0;
			right: 0;
			/* baner siada NAD sticky barem. --sticky-h ustawia skrypt sticky baru:
			   jego wysokosc, gdy pasek jest widoczny, zero w pozostalych przypadkach. */
			bottom: var(--sticky-h, 0px);
			transition: bottom 0.3s ease;
			z-index: 910;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 18px;
			padding: 16px 24px;
			padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
			background-color: rgba(var(--color-4), 0.98);
			border-top: 1px solid rgba(var(--color-accent), 0.35);
			box-shadow: 0 -6px 24px rgba(31, 44, 34, 0.28);
		}

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

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

		.cookie-bar .cookie-ok {
			flex: 0 0 auto;
			font-family: var(--font-body);
			font-weight: 600;
			font-size: 13px;
			letter-spacing: 1.4px;
			text-transform: uppercase;
			line-height: 1.2;
			color: rgba(var(--color-2), 1);
			background-color: rgba(var(--color-3), 1);
			border: 0;
			border-radius: 999px;
			padding: 13px 26px;
			min-height: 44px;
			cursor: pointer;
			transition: background-color .18s ease;
		}

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

		.cookie-bar .cookie-x {
			flex: 0 0 auto;
			width: 34px;
			height: 34px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(var(--color-2), 0.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(--color-2), 1);
			background-color: rgba(var(--color-2), 0.1);
		}

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

			.vsl-page .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;
			}

			/* zapas na sticky bar i baner, zeby nie zaslanialy stopki.
			   Wczesniej stopka nie miala zadnego zapasu - sticky bar potrafil ja przykryc. */
			.vsl-page footer {
				padding-bottom: calc(40px + 90px + var(--baner-h, 0px));
			}
		}

		/* ============================================================
		   STRONA PODZIEKOWANIA (/konsultacja/dziekujemy)
		   Dwie klasy, ktorych nie bylo na stronie sprzedazowej, bo nie mial ich
		   kto uzyc: znaczek potwierdzenia w hero i wers z adresem kontaktowym.
		   Siedza tutaj, a nie w pliku strony - kolejna podstrona ma je za darmo.
		   ============================================================ */
		.vsl-hero-seal {
			/* wlasny wiersz, nie obok nadtytulu - stad flex + auto marginesy */
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
			margin-right: auto;
			width: 72px;
			height: 72px;
			border-radius: 50%;
			background-color: rgba(var(--color-accent), 0.14);
			border: 1px solid rgba(var(--color-accent), 0.45);
			color: rgba(var(--color-accent), 1);
			margin-bottom: var(--space-md);
		}

		.vsl-page .vsl-hero-kontakt {
			margin: var(--space-md) auto 0 auto;
			max-width: 640px;
			font-size: 15px;
			font-weight: 300;
			color: rgba(246, 242, 233, 0.72);
		}

		.vsl-page .vsl-hero-kontakt a {
			color: rgba(var(--color-accent), 1);
			text-decoration: underline;
			text-underline-offset: 3px;
		}