/* Strona "Jak to działa": Sekcja 1 (hero). Renderowana przez
   page-jak-to-dziala.php, ladowana wylacznie przez
   odwolai_v2_is_how_it_works_page(). Wszystkie selektory izolowane pod
   .oai-site .oai-how-page-hero, osobna przestrzen klas i osobny plik CSS
   od istniejacego komponentu strony glownej "Jak dziala OdwolAI?"
   (.oai-process, assets/css/how-it-works.css) - ten plik go nie importuje
   i nie wplywa na niego. Sekcje 2-7 tej strony nie zostaly jeszcze
   wdrozone - ten plik zawiera wylacznie CSS Sekcji 1 (Hero), zgodnie z
   zakresem biezacego zadania.

   Modul przeplywu (5 etapow: Usluga, Platnosc, Formularz, Dokumenty,
   Material) jest celowo zawsze pionowy (kropka + laczacca linia + etykieta
   w kolumnie), na kazdej szerokosci - w odroznieniu od .oai-process, ktory
   na szerokim desktopie przechodzi na os pozioma. Modul jest statyczny,
   bez JavaScriptu i bez animacji (w przeciwienstwie do .oai-process,
   ktory ma jednorazowa animacje sterowana IntersectionObserver). Dekoracyjne
   kropki i laczniki sa oznaczone aria-hidden - lista pieciu etykiet
   pozostaje czytelna jako zwykla lista <ol> nawet bez CSS.

   Uklad dwukolumnowy (tresc ~52%, modul przeplywu ~48%, przez CSS grid)
   wlacza sie od 1024px - ten sam prog dwukolumnowy co hero pozostalych
   podstron klastra. Ponizej tego progu (caly tablet i mobile) hero jest
   w pelni jednokolumnowe: tresc nad modulem przeplywu, zgodnie z bezpieczna
   zasada stosowana konsekwentnie w calym projekcie (brak dostepu do
   rzeczywistego renderu). Breadcrumb ma tu dwa poziomy (Strona glowna,
   biezaca "Jak to dziala"), ta sama konstrukcja co breadcrumb hero strony
   /problemy-i-szkody/, ale we wlasnej przestrzeni klas .oai-how-page-hero__breadcrumb*.

   Kotwice #proces i #wybor-uslugi w tym pliku nie maja jeszcze celow (Sekcje
   2 i 3 nie istnieja) - scroll-margin-top dla tych kotwic zostanie dodany
   dopiero przy wdrazaniu elementow docelowych (naglowkow Sekcji 2 i 3),
   nie w tym pliku. */

.oai-site .oai-how-page-hero {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-how-page-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

/* Breadcrumb (dwa poziomy: strona glowna, biezaca) */

.oai-site .oai-how-page-hero__breadcrumb {
	width: 100%;
	margin: 0 0 32px;
}

.oai-site .oai-how-page-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-how-page-hero__breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
}

.oai-site .oai-how-page-hero__breadcrumb-item + .oai-how-page-hero__breadcrumb-item > .oai-how-page-hero__breadcrumb-current::before {
	content: "/\00A0";
	margin: 0 8px 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-how-page-hero__breadcrumb-current {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-how-page-hero__breadcrumb-link {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	text-decoration: none;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-how-page-hero__breadcrumb-link:hover {
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-how-page-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Uklad: tresc + modul przeplywu (jednokolumnowo do 1024px) */

.oai-site .oai-how-page-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-how-page-hero__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-how-page-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-hero__lead {
	margin: 0 0 28px;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-hero__ctas {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.oai-site .oai-how-page-hero__cta {
	width: 100%;
}

/* Modul przeplywu: pionowa sciezka kropka + lacznik + etykieta */

.oai-site .oai-how-page-hero__flow {
	--oai-how-flow-point: 14px;
	--oai-how-flow-gap: 28px;
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	background-color: rgba(1, 2, 66, 0.03);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	padding: 32px 28px;
}

.oai-site .oai-how-page-hero__flow-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--oai-how-flow-gap);
}

.oai-site .oai-how-page-hero__flow-item {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 16px;
}

.oai-site .oai-how-page-hero__flow-rail {
	position: relative;
	flex-shrink: 0;
	width: var(--oai-how-flow-point);
	display: flex;
	align-items: center;
	justify-content: center;
}

.oai-site .oai-how-page-hero__flow-point {
	position: relative;
	z-index: 1;
	width: var(--oai-how-flow-point);
	height: var(--oai-how-flow-point);
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-hero__flow-connector {
	position: absolute;
	top: calc(var(--oai-how-flow-point) / 2);
	left: calc(var(--oai-how-flow-point) / 2 - 1px);
	width: 2px;
	height: calc(100% + var(--oai-how-flow-gap));
	background-color: var(--oai-color-border);
	z-index: 0;
}

.oai-site .oai-how-page-hero__flow-label {
	align-self: center;
	min-width: 0;
	max-width: 100%;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Tablet od 768px: wieksza typografia, CTA w jednym rzedzie */

@media (min-width: 768px) {
	.oai-site .oai-how-page-hero {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-hero__title {
		font-size: 2rem;
	}

	.oai-site .oai-how-page-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-how-page-hero__ctas {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.oai-site .oai-how-page-hero__cta {
		width: auto;
	}
}

/* Desktop od 1024px: dwie kolumny, tresc ok. 52%, modul przeplywu ok. 48%
   (ten sam prog dwukolumnowy co hero pozostalych podstron klastra) */

@media (min-width: 1024px) {
	.oai-site .oai-how-page-hero__layout {
		display: grid;
		grid-template-columns: 52fr 48fr;
		align-items: start;
		gap: 56px;
	}

	.oai-site .oai-how-page-hero__content {
		max-width: 100%;
	}

	.oai-site .oai-how-page-hero__lead {
		max-width: 100%;
	}
}

@media (min-width: 1280px) {
	.oai-site .oai-how-page-hero {
		padding: 80px 40px;
	}

	.oai-site .oai-how-page-hero__title {
		font-size: 2.25rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-hero {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-hero__title {
		font-size: 1.5rem;
	}

	.oai-site .oai-how-page-hero__flow {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   Sekcja 2: Wybor uslugi
   Otwarty selektor trzech uslug, kotwiczony pod #wybor-uslugi (cel drugiego
   CTA Hero). Konstrukcja laczy dwa juz zaakceptowane wzorce motywu, nie
   kopiuje zadnego z nich osobno:
   1) mechanike pelnego klikalnego wiersza z otwartego indeksu strony
      /problemy-i-szkody/ (.oai-problems-damages-decision__link - <ul> z
      border-top, kazdy <li><a> pelnym wierszem, dekoracyjny znak kierunkowy
      przez border-trick, hover = tlo + kolor separatora/znaku -> cyan);
   2) trojke tresci "sytuacja uzytkownika / nazwa uslugi / opis" ze
      zaakceptowanych template-partow stron produktowych
      (template-parts/product-analiza-decyzji/section-product-choice.php),
      gdzie sytuacja jest <p>, nazwa <h3>, opis <p>.
   Roznica wzgledem Sekcji 2 strony /problemy-i-szkody/: tu kazdy wiersz ma
   trzy elementy tresci (nie dwa) i od 1024px uklada je w jednym wspolnym
   trzykolumnowym rzedzie (sytuacja/nazwa/opis obok siebie), zamiast ukladu
   intro-obok-listy uzytego tam. Roznica wzgledem kart uslug/porownania na
   stronie glownej: brak osobnych kart z cieniami, brak cen, jeden wspolny
   otwarty selektor. Linki do produktow wylacznie przez get_permalink() z
   tym samym bezpiecznym fallbackiem co w header.php
   ($url = home_url('/') gdy get_permalink() zwroci pusto), zabezpieczone
   esc_url(). Link pomocniczy do /problemy-i-szkody/ przez home_url()+esc_url(). */

.oai-site .oai-how-page-service-choice {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

.oai-site .oai-how-page-service-choice__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-how-page-service-choice__intro {
	min-width: 0;
	max-width: 640px;
	margin: 0 0 32px;
}

.oai-site .oai-how-page-service-choice__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-service-choice__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-how-page-service-choice__link {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 22px 44px 22px 4px;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-how-page-service-choice__link:hover {
	background-color: rgba(1, 2, 66, 0.03);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-service-choice__situation {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__name {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__desc {
	margin: 0;
	max-width: 560px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__mark {
	position: absolute;
	top: 26px;
	right: 4px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--oai-color-navy-muted);
	border-top: 2px solid var(--oai-color-navy-muted);
	transform: rotate(45deg);
	transition: border-color var(--oai-transition-fast), transform var(--oai-transition-fast);
}

.oai-site .oai-how-page-service-choice__link:hover .oai-how-page-service-choice__mark {
	border-color: var(--oai-color-cyan);
	transform: translateX(3px) rotate(45deg);
}

html[data-oai-input="keyboard"] .oai-site .oai-how-page-service-choice__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: -2px;
}

.oai-site .oai-how-page-service-choice__helper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
	max-width: 100%;
}

.oai-site .oai-how-page-service-choice__helper-question {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__helper-link {
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--oai-color-navy);
	text-decoration-line: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-skip-ink: auto;
	transition: text-decoration-thickness var(--oai-transition-fast);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-service-choice__helper-link:hover {
	text-decoration-thickness: 3px;
}

html[data-oai-input="keyboard"] .oai-site .oai-how-page-service-choice__helper-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (min-width: 768px) {
	.oai-site .oai-how-page-service-choice {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-service-choice__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-how-page-service-choice__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-how-page-service-choice__link {
		padding: 26px 48px 26px 8px;
	}

	.oai-site .oai-how-page-service-choice__mark {
		top: 30px;
		right: 8px;
	}

	.oai-site .oai-how-page-service-choice__helper-link {
		font-size: 1.0625rem;
	}
}

/* Desktop od 1024px: kazdy wiersz dzieli sie na trzy wewnetrzne kolumny
   (sytuacja / nazwa / opis) w jednym wspolnym rzedzie - rzeczywista roznica
   konstrukcyjna wzgledem Sekcji 2 strony /problemy-i-szkody/, gdzie nazwa
   zawsze siedzi nad opisem. Ten sam prog co uklad dwukolumnowy Hero tej
   strony. */

@media (min-width: 1024px) {
	.oai-site .oai-how-page-service-choice__link {
		display: grid;
		grid-template-columns: 26% 22% 1fr;
		align-items: center;
		gap: 24px;
		padding: 26px 48px 26px 8px;
	}

	.oai-site .oai-how-page-service-choice__situation,
	.oai-site .oai-how-page-service-choice__name,
	.oai-site .oai-how-page-service-choice__desc {
		margin: 0;
	}

	.oai-site .oai-how-page-service-choice__desc {
		max-width: 100%;
	}

	.oai-site .oai-how-page-service-choice__mark {
		top: 50%;
		margin-top: -5px;
		right: 8px;
	}

	.oai-site .oai-how-page-service-choice__helper-link {
		font-size: 1.125rem;
	}
}

@media (min-width: 1201px) {
	.oai-site .oai-how-page-service-choice {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-service-choice {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-service-choice__link {
		padding: 18px 36px 18px 0;
	}

	.oai-site .oai-how-page-service-choice__mark {
		top: 22px;
		right: 0;
	}
}

/* ==========================================================================
   Sekcja 3: Glowny proces
   Chronologiczna, nieklikalna os pieciu etapow (01-05), kotwiczona pod
   #proces (cel glownego CTA Hero). Pelne granatowe tlo - pierwsze na tej
   stronie - jasna typografia i cyjanowe akcenty, dokladnie ten sam zestaw
   tokenow "jasny tekst na granacie", ktory motyw juz stosuje konsekwentnie
   na innych granatowych sekcjach (np. Sekcja 3 strony /problemy-i-szkody/,
   assets/css/page-problems-damages.css): naglowki w bieli, lead w
   rgba(255,255,255,0.85), opisy w rgba(255,255,255,0.7), separatory/linia
   w rgba(255,255,255,0.16).

   Technika laczacej linii: pojedynczy dekoracyjny pseudo-element ::before
   na kazdym .step poza ostatnim, wypelniajacy dokladnie odstep (gap) do
   kolejnego kroku - ta sama sprawdzona, statyczna technika co juz
   zaakceptowany .oai-service-process na stronie produktu Analiza Decyzji
   (assets/css/single-service-product.css), przepisana na wlasne klasy i
   wartosci. To NIE jest komponent .oai-process ze strony glownej: inny
   namespace, inna liczba krokow (5, nie 4), zero JavaScriptu i zero
   animacji (brak IntersectionObserver, brak transition-delay, brak klasy
   is-animated) - sekcja jest w pelni czytelna statycznie, tak jak wymaga
   zadanie. Numer kazdego kroku jest elementem dekoracyjnym (aria-hidden) -
   kolejnosc przekazuje wylacznie semantyczna lista <ol>.

   Os jest domyslnie pionowa (numer w stalej kolumnie 40px, tresc obok,
   linia laczaca pionowa) az do 1280px. Pozioma os na 1280px+ zostala
   wybrana celowo szerzej niz istniejacy prog 1201px uzywany dla
   scroll-margin-top w tym pliku: Etap 02 i Etap 04 maja zauwazalnie
   dluzszy opis niz elementy w innych juz zaakceptowanych listach/osiach
   tej strony, a pieciu waskich kolumn tuz po przejsciu z trybu hamburgera
   (1201px) zawiniiloby te opisy na wiele linii bez mozliwosci
   zweryfikowania czytelnosci na zywo w tym srodowisku - bezpieczniejszy,
   szerszy prog 1280px (pelna szerokosc kontenera strony) daje kazdej z
   pieciu kolumn realnie wiecej miejsca. */

.oai-site .oai-how-page-process {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-navy);
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

.oai-site .oai-how-page-process__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-how-page-process__intro {
	min-width: 0;
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-how-page-process__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-process__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-process__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-process__axis {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-how-page-process__step {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-how-page-process__step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 20px;
	transform: translateX(-50%);
	width: 1px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.16);
}

.oai-site .oai-how-page-process__number {
	display: block;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-process__step-content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-how-page-process__step-title {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-process__step-desc {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-how-page-process {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-process__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-how-page-process__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-how-page-process__step-title {
		font-size: 1.125rem;
	}
}

@media (min-width: 1201px) {
	.oai-site .oai-how-page-process {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

/* Pozioma os od 1280px - patrz uzasadnienie progu w komentarzu na poczatku
   bloku Sekcji 3. */

@media (min-width: 1280px) {
	.oai-site .oai-how-page-process {
		padding: 80px 40px;
	}

	.oai-site .oai-how-page-process__intro {
		max-width: 720px;
	}

	.oai-site .oai-how-page-process__axis {
		flex-direction: row;
		align-items: flex-start;
		gap: 32px;
	}

	.oai-site .oai-how-page-process__step {
		display: block;
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-how-page-process__step:not(:last-child)::before {
		top: 14px;
		left: 100%;
		transform: none;
		width: 32px;
		height: 1px;
	}

	.oai-site .oai-how-page-process__number {
		margin: 0 0 20px;
	}

	.oai-site .oai-how-page-process__step-content {
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-process {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-process__heading {
		font-size: 1.375rem;
	}

	.oai-site .oai-how-page-process__axis {
		gap: 32px;
	}

	.oai-site .oai-how-page-process__step:not(:last-child)::before {
		height: 32px;
	}
}

/* ==========================================================================
   Sekcja 4: Formularz i dokumenty
   Jasna, nieklikalna sekcja tlumacaca moment przekazania danych i
   dokumentow po zakupie - bez pokazywania chronionego formularza
   posprzedazowego. Jeden wspolny modul ("uporzadkowany dokument") laczy
   dwa obszary tresci (Opisujesz sprawe / Dolaczasz dokumenty) oraz dolny
   pas z nota dokumentowa; pod modulem osobny, spokojny akapit z jedynym
   linkiem sekcji - do Polityki prywatnosci.

   Technika ramy i separatora: pojedyncza zewnetrzna ramka modulu
   (border + radius-l + overflow:hidden) opakowujaca oba obszary, z
   separatorem realizowanym przez ten sam mechanizm co juz zaakceptowany
   .oai-property-damage-review__module (assets/css/page-property-damage.css)
   - selektor sasiedztwa zmieniajacy orientacje separatora z border-top
   (uklad pionowy) na border-left (uklad poziomy od breakpointu). To
   wylacznie ogolna, generyczna technika CSS przepisana na wlasne klasy i
   wartosci - nie kopiuje pelnego ukladu ani list tamtego komponentu (tu
   kazdy obszar ma tylko H3 + jeden akapit, bez listy).

   Prog przejscia dwoch obszarow do jednego wiersza to 1024px - ten sam,
   juz ugruntowany na tej stronie prog dwukolumnowy (Hero, Sekcja 2), a nie
   szerszy 1120px uzyty w zaakceptowanym wzorcu referencyjnym - tam
   uzasadniony dlugimi listami wypunktowan, ktorych ta sekcja nie ma
   (kazdy obszar to jedno krotkie zdanie), wiec bezpieczne jest zachowanie
   spojnego jezyka breakpointow calej strony zamiast wprowadzania nowej
   wartosci.

   Link do Polityki prywatnosci: home_url('/polityka-prywatnosci/') +
   esc_url() - potwierdzony slug (patrz get_page_by_path('polityka-prywatnosci')
   i fallback home_url('/polityka-prywatnosci/') w juz dzialajacym
   template-parts/footer/site-footer.php). Podkreslenie i hover/focus
   powtarzaja juz zaakceptowany, czytelny wzorzec .oai-property-damage-review__link
   (rgba(1,2,66,0.35) w spoczynku -> cyan na hover/focus) - nie ten sam,
   zbyt subtelny --oai-color-border uzyty pierwotnie (i poprawiony) przy
   linku pomocniczym Sekcji 2. */

.oai-site .oai-how-page-form-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-how-page-form-documents__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-how-page-form-documents__intro {
	min-width: 0;
	max-width: 640px;
	margin: 0 0 32px;
}

.oai-site .oai-how-page-form-documents__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-form-documents__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-form-documents__text {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-form-documents__module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 32px 0 0;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	border-top: 3px solid var(--oai-color-cyan);
	overflow: hidden;
}

.oai-site .oai-how-page-form-documents__areas {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-how-page-form-documents__area {
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-how-page-form-documents__area + .oai-how-page-form-documents__area {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-how-page-form-documents__area-heading {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-form-documents__area-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-form-documents__note {
	box-sizing: border-box;
	margin: 0;
	padding: 18px 20px;
	border-top: 1px solid var(--oai-color-border);
	background-color: rgba(1, 2, 66, 0.02);
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-form-documents__privacy {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-form-documents__privacy-link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: rgba(1, 2, 66, 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color var(--oai-transition-fast), text-decoration-color var(--oai-transition-fast);
}

.oai-site .oai-how-page-form-documents__privacy-link:hover {
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-how-page-form-documents__privacy-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (min-width: 768px) {
	.oai-site .oai-how-page-form-documents {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-form-documents__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-how-page-form-documents__text {
		font-size: 1.0625rem;
	}

	.oai-site .oai-how-page-form-documents__area {
		padding: 28px 32px;
	}

	.oai-site .oai-how-page-form-documents__area-text {
		font-size: 1rem;
	}

	.oai-site .oai-how-page-form-documents__note {
		padding: 20px 32px;
		font-size: 0.9375rem;
	}

	.oai-site .oai-how-page-form-documents__privacy {
		font-size: 1rem;
	}
}

/* Od 1024px: dwa obszary w jednym wierszu - ten sam, juz ugruntowany na
   tej stronie prog dwukolumnowy (patrz uzasadnienie na poczatku bloku). */

@media (min-width: 1024px) {
	.oai-site .oai-how-page-form-documents__areas {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-how-page-form-documents__area {
		flex: 1 1 50%;
		min-width: 0;
	}

	.oai-site .oai-how-page-form-documents__area + .oai-how-page-form-documents__area {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-form-documents {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-form-documents__area {
		padding: 20px 16px;
	}

	.oai-site .oai-how-page-form-documents__note {
		padding: 16px 16px;
	}
}

/* ==========================================================================
   Sekcja 5: Specjalisci wspierani przez system
   Sekcja typograficzna, w calosci nieklikalna, rozdzielajaca role
   specjalistow (przygotowuja tresc Gotowego Odwolania i Wezwania do
   Zaplaty) od roli systemu OdwolAI (porzadkuje dokumenty i informacje).
   Otwarty, wspolny system trzech rownorzednych zasad - NIE trzy karty:
   brak zewnetrznej pelnej ramy, brak zaokraglonego kontenera (w
   odroznieniu od modulu Sekcji 4), brak osobnych ramek/cieni na kazdej
   zasadzie. Jedynymi elementami rozdzielajacymi sa: jedna wspolna cienka
   linia cyjanowa nad calym systemem (border-top na <ul>) oraz subtelne
   separatory miedzy pozycjami - ten sam generyczny mechanizm zmiany
   orientacji separatora (border-top w ukladzie pionowym -> border-left w
   poziomym) co juz uzyty w Sekcji 4, ale bez zewnetrznej ramki modulu.

   Tlo sekcji: brak w motywie osobnego tokenu neutralnego/jasnoszarego tla
   (potwierdzone odczytem assets/css/main.css) - zgodnie z zadaniem
   zastosowano wylacznie istniejacy token granatu przy bardzo niskiej
   przezroczystosci (rgba(1,2,66,0.02)), dokladnie ta sama wartosc, ktora
   juz sluzy jako tlo noty dokumentowej w Sekcji 4 - subtelne odroznienie
   od czysto bialej Sekcji 4 bez wprowadzania nowego, przypadkowego koloru.

   Nie jest to komponent .oai-trust ze strony glownej (brak zdjecia, brak
   statystyki "lat doswiadczenia", brak <aside> z nota) - Sekcja 5 to
   wylacznie typograficzny system trzech zasad w <ul>.

   Prog przejscia do trzech kolumn to 1024px - ten sam, juz ugruntowany
   prog dwu/trzykolumnowy na tej stronie (Hero, Sekcja 2, Sekcja 4), a nie
   szerszy 1280px uzyty w Sekcji 3: teksty trzech zasad sa wyraznie
   krotsze niz Etap 02 i Etap 04 Sekcji 3, ktore wymagaly szerszego progu. */

.oai-site .oai-how-page-specialists {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.02);
}

.oai-site .oai-how-page-specialists__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-how-page-specialists__intro {
	min-width: 0;
	max-width: 720px;
	margin: 0 0 32px;
}

.oai-site .oai-how-page-specialists__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-specialists__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-specialists__text {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-specialists__list {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
	border-top: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-how-page-specialists__item {
	box-sizing: border-box;
	padding: 24px 0;
}

.oai-site .oai-how-page-specialists__item + .oai-how-page-specialists__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-how-page-specialists__item-heading {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-specialists__item-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-how-page-specialists {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-specialists__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-how-page-specialists__text {
		font-size: 1.0625rem;
	}

	.oai-site .oai-how-page-specialists__item {
		padding: 28px 0;
	}

	.oai-site .oai-how-page-specialists__item-text {
		font-size: 1rem;
	}
}

/* Od 1024px: trzy rownorzedne kolumny w jednym wspolnym rzedzie - ten sam,
   juz ugruntowany na tej stronie prog dwu/trzykolumnowy (patrz uzasadnienie
   na poczatku bloku). */

@media (min-width: 1024px) {
	.oai-site .oai-how-page-specialists__list {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-how-page-specialists__item {
		flex: 1 1 33.333%;
		min-width: 0;
		padding: 32px 28px;
	}

	.oai-site .oai-how-page-specialists__item:first-child {
		padding-left: 0;
	}

	.oai-site .oai-how-page-specialists__item:last-child {
		padding-right: 0;
	}

	.oai-site .oai-how-page-specialists__item + .oai-how-page-specialists__item {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-specialists {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-specialists__item {
		padding: 20px 0;
	}
}

/* ==========================================================================
   Sekcja 6: Co otrzymujesz
   Jasna, nieklikalna sekcja jednoznacznie rozdzielajaca trzy rozne
   rezultaty koncowe - to ostatnia sekcja obecnego, tymczasowego stanu
   strony (Sekcje 7 jeszcze nie ma), wiec przechodzi bezposrednio do
   footera. Jeden wspolny, zamkniety modul (rama: border + radius-l +
   overflow:hidden) laczy trzy rownorzedne komorki rezultatow oraz
   zintegrowany dolny pas z nota koncowa - ta sama ogolna technika ramy i
   separatora (border-top w ukladzie pionowym -> border-left w poziomym)
   co juz uzyta w Sekcji 4, ale BEZ cyjanowego akcentu u gory modulu Sekcji
   4 i z celowo mocniejsza nota: w odroznieniu od lekkiej, jasnej noty
   dokumentowej Sekcji 4 (assets/css/page-how-it-works.css,
   .oai-how-page-form-documents__note), nota Sekcji 6 to pelnoszerokosciowy
   granatowy pas z jasnym tekstem - zadanie wprost wymaga, zeby miala
   "mocniejszy charakter" niz nota Sekcji 4, wiec to realna roznica
   konstrukcyjna, nie kopia piksel w piksel.

   Nie jest to komponent .oai-services ze strony glownej
   (template-parts/services-comparison/section-services-comparison.php):
   brak dekoracyjnej numeracji 01-03, brak ceny, brak wewnetrznego
   naglowka "Co otrzymujesz?" (to juz tytul calej tej sekcji), brak listy
   korzysci <ul> wewnatrz wiersza, brak przycisku CTA, brak <aside> z nota
   prawna. Etykieta uslugi (<p>) + H3 + opis (<p>) w kazdej komorce -
   dokladnie tyle, ile wymaga zadanie, bez dodatkowych elementow.

   Prog przejscia do trzech kolumn to 1024px - ten sam, juz ugruntowany na
   tej stronie prog dwu/trzykolumnowy (Hero, Sekcja 2, Sekcja 4, Sekcja 5). */

.oai-site .oai-how-page-results {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-how-page-results__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-how-page-results__intro {
	min-width: 0;
	max-width: 640px;
	margin: 0 0 32px;
}

.oai-site .oai-how-page-results__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-results__heading {
	margin: 0;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-results__module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-how-page-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.oai-site .oai-how-page-results__item {
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-how-page-results__item + .oai-how-page-results__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-how-page-results__label {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-results__name {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-results__desc {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-results__note {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 20px;
	background-color: var(--oai-color-navy);
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-how-page-results {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-results__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-how-page-results__item {
		padding: 28px 32px;
	}

	.oai-site .oai-how-page-results__desc {
		font-size: 1rem;
	}

	.oai-site .oai-how-page-results__note {
		padding: 24px 32px;
		font-size: 1rem;
	}
}

/* Od 1024px: trzy rezultaty w jednym wierszu - ten sam, juz ugruntowany na
   tej stronie prog dwu/trzykolumnowy (patrz uzasadnienie na poczatku bloku). */

@media (min-width: 1024px) {
	.oai-site .oai-how-page-results__list {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-how-page-results__item {
		flex: 1 1 33.333%;
		min-width: 0;
	}

	.oai-site .oai-how-page-results__item + .oai-how-page-results__item {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-results {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-results__item {
		padding: 20px 16px;
	}

	.oai-site .oai-how-page-results__note {
		padding: 16px 16px;
	}
}

/* ==========================================================================
   Sekcja 7: Koncowe CTA
   Ostatnia sekcja strony, zamykajaca ja bez wymuszania konkretnego produktu.
   W odroznieniu od Sekcji 3 (pelne, pelnoszerokosciowe granatowe tlo calej
   sekcji) granat wystepuje tu wylacznie jako zwarty, zaokraglony modul
   (border-radius-l) osadzony na jasnym tle strony wewnatrz standardowego
   kontenera - sekcja jako calosc pozostaje biala, tak samo jak istniejacy
   footer motywu ma wlasne, osobne tlo granatowe (site-footer.css). Ten
   podzial (jasna sekcja + zwarty granatowy modul w srodku, zamiast pelnego
   granatowego tla sekcji) jest celowym rozroznieniem: standardowy pionowy
   padding sekcji (48px/64px/80px zgodnie z reszta strony) daje naturalny,
   jasny odstep zarowno nad modulem, jak i pod nim przed footerem - granatowy
   modul i granatowy footer nigdy sie nie stykaja i nie zlewaja w jeden blok.

   Dwie kolumny (tresc ~60%, akcje ~40%) wlaczaja sie od 1024px - ten sam,
   juz ugruntowany na tej stronie prog dwukolumnowy (Hero, Sekcja 2, Sekcja
   4, Sekcja 5). Ponizej tego progu modul jest jednokolumnowy: tresc nad
   akcjami, oba CTA na pelnej szerokosci modulu.

   Kolumna akcji uklada oba CTA pionowo (gap, nie jeden wiersz) na kazdej
   szerokosci - dluzszy tekst drugiego CTA ("Zobacz problemy i rodzaje
   szkod") nie musi wtedy kurczyc typografii, zeby zmiescic sie w jednym
   rzedzie obok pierwszego CTA.

   Globalne klasy .oai-cta--primary/--secondary (assets/css/main.css) sa
   zaprojektowane pod jasne tla (granatowy tekst/tlo) i daja nieczytelny
   kontrast na granatowym module, wiec Sekcja 7 uzywa wylacznie wlasnych,
   lokalnych klas CTA pod namespace .oai-how-page-final-cta - main.css i
   globalny system CTA nie sa modyfikowane. Para kolorow "jasny tekst na
   granacie" (biel/rgba(255,255,255,0.85)/rgba(255,255,255,0.16)) to ten sam
   juz zaakceptowany zestaw tokenow, ktory Sekcja 3 tej strony stosuje na
   swoim pelnym granatowym tle. */

.oai-site .oai-how-page-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-how-page-final-cta__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 32px 24px;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-how-page-final-cta__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-how-page-final-cta__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-how-page-final-cta__heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-final-cta__text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-how-page-final-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.oai-site .oai-how-page-final-cta__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	transition: box-shadow var(--oai-transition-fast), border-color var(--oai-transition-fast), background-color var(--oai-transition-fast), color var(--oai-transition-fast);
}

.oai-site .oai-how-page-final-cta__cta--primary {
	background-color: var(--oai-color-cyan);
	color: var(--oai-color-navy);
}

.oai-site .oai-how-page-final-cta__cta--primary:hover {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

html[data-oai-input="keyboard"] .oai-site .oai-how-page-final-cta__cta--primary:focus-visible {
	outline: 2px solid var(--oai-color-white);
	outline-offset: 2px;
}

.oai-site .oai-how-page-final-cta__cta--secondary {
	background-color: transparent;
	color: var(--oai-color-white);
	border-color: rgba(255, 255, 255, 0.4);
}

.oai-site .oai-how-page-final-cta__cta--secondary:hover {
	border-color: var(--oai-color-cyan);
	color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-how-page-final-cta__cta--secondary:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.oai-site .oai-how-page-final-cta {
		padding: 64px 40px;
	}

	.oai-site .oai-how-page-final-cta__inner {
		padding: 40px 40px;
	}

	.oai-site .oai-how-page-final-cta__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-how-page-final-cta__text {
		font-size: 1rem;
	}
}

/* Od 1024px: dwie kolumny (tresc ~60%, akcje ~40%) w jednym wspolnym
   wierszu - ten sam, juz ugruntowany na tej stronie prog dwukolumnowy
   (patrz uzasadnienie na poczatku bloku). Oba CTA pozostaja ulozone
   pionowo w kolumnie akcji, na pelnej szerokosci tej kolumny. */

@media (min-width: 1024px) {
	.oai-site .oai-how-page-final-cta__inner {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	.oai-site .oai-how-page-final-cta__content {
		flex: 0 1 60%;
	}

	.oai-site .oai-how-page-final-cta__actions {
		flex: 0 0 40%;
		max-width: 40%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-how-page-final-cta {
		padding: 40px 16px;
	}

	.oai-site .oai-how-page-final-cta__inner {
		padding: 24px 20px;
	}

	.oai-site .oai-how-page-final-cta__heading {
		font-size: 1.25rem;
	}
}