/* Podstrona "Szkoda majatkowa": Sekcja 1 (hero). Renderowane przez
   page-szkoda-majatkowa.php, ladowane wylacznie przez
   odwolai_v2_is_property_damage_page(). Wszystkie selektory izolowane pod
   .oai-site .oai-property-damage-hero, oddzielna przestrzen klas od
   .oai-cost-estimate-*, .oai-total-loss-*, .oai-denial-* i
   .oai-underpayment-*, bez wycieku stylow na inne podstrony.

   Modul wizualny: wczesniejsza dekoracyjna ilustracja domu i dokumentow
   zbudowana wylacznie w HTML i CSS zostala zastapiona rzeczywistym
   zdjeciem WebP (szkoda-majatkowa-hero-poprawiony.webp, model domu i
   dokumenty "DECYZJA UBEZPIECZYCIELA"/"KOSZTORYS NAPRAWY"), poniewaz
   zdjecie niesie realna tresc, wiec kontener .visual nie jest juz
   oznaczony aria-hidden - opis dostepny jest przez atrybut alt obrazu.

   Dwustrefowy uklad desktopowy (tresc ok. 54%, modul ok. 46%) wlacza sie od
   901px - ten sam, juz sprawdzony prog co uklad dwustrefowy hero
   /kosztorys-ubezpieczyciela/ (dominujaca konwencja motywu). Przy 1024px
   (punkt kontrolny tabletu z tego zadania) dostepnej szerokosci jest wiecej
   niz przy progu 901px, wiec czytelnosc obu stref jest zachowana z zapasem,
   nie tylko na granicy. Ponizej 901px (w tym 768px) uklad jest w pelni
   jednokolumnowy: tresc nad modulem, CTA przed grafika, zgodnie z wprost
   wymaganym zachowaniem tabletu. */

.oai-site .oai-property-damage-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-property-damage-hero__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

/* Breadcrumb */

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

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

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

.oai-site .oai-property-damage-hero__breadcrumb-item + .oai-property-damage-hero__breadcrumb-item::before {
	content: "/";
	margin: 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-property-damage-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-property-damage-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-property-damage-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

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

/* Uklad: tresc + modul wizualny */

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

.oai-site .oai-property-damage-hero__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-property-damage-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-property-damage-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.22;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-hero__lead {
	margin: 0;
	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-property-damage-hero__actions {
	margin: 32px 0 0;
	width: 100%;
}

.oai-site .oai-property-damage-hero__cta {
	width: 100%;
	justify-content: center;
	min-height: 48px;
}

.oai-site .oai-property-damage-hero__note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 14px;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

/* Modul wizualny: zdjecie WebP zastepujace wczesniejsza ilustracje HTML/CSS.
   Zdjecie ma naturalne proporcje 550x659 (portret), wiec przy pelnej
   wysokosci znaczaco zwiekszaloby wysokosc Hero i dominowalo nad H1.
   Kontener figure/img dostaje kontrolowany aspect-ratio (3/2 do 900px,
   4/3 od 901px - ten sam prog co przejscie do dwoch stref) z
   object-fit: cover, zeby wysokosc modulu pozostala proporcjonalna do
   bloku tekstowego na kazdej szerokosci. Najwazniejsze elementy zdjecia
   (model domu, naglowki "DECYZJA UBEZPIECZYCIELA" i "KOSZTORYS NAPRAWY",
   dlugopis) znajduja sie w srodkowym pasie kadru (ok. 15-80% wysokosci),
   dlatego object-position: center przy obu progach bezpiecznie zachowuje
   je w kadrze - przy 3/2 widoczne pozostaje ok. 22-78% oryginalnej
   wysokosci, przy 4/3 ok. 19-81%, a gorna czesc kadru z doniczka i sofa w
   tle jest tym, co jest przycinane w pierwszej kolejnosci. */

.oai-site .oai-property-damage-hero__visual {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-property-damage-hero__figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-property-damage-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: var(--oai-radius-l);
	border: 1px solid var(--oai-color-border);
}

/* Tablet od 768px: wieksza typografia, modul wciaz pod trescia */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-hero {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-hero__title {
		font-size: 1.875rem;
	}

	.oai-site .oai-property-damage-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-hero__cta {
		width: auto;
		min-width: 260px;
	}

	.oai-site .oai-property-damage-hero__actions {
		width: auto;
	}
}

/* Desktop od 901px: dwie strefy hero, tresc i modul obok siebie (patrz
   komentarz na poczatku bloku) */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-hero__layout {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	.oai-site .oai-property-damage-hero__content {
		flex: 0 1 54%;
	}

	.oai-site .oai-property-damage-hero__visual {
		flex: 1 1 46%;
	}

	.oai-site .oai-property-damage-hero__title {
		font-size: 2.125rem;
	}

	.oai-site .oai-property-damage-hero__image {
		aspect-ratio: 4 / 3;
	}
}

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

/* Sekcja 2: "Co moze obejmowac szkoda majatkowa w domu lub mieszkaniu?".
   Przebudowana po odrzuceniu pierwszej wersji (dekoracyjna ilustracja
   "przekroj nieruchomosci" zbudowana w HTML/CSS zostala usunieta
   calkowicie, bez pozostawienia martwego kodu). Nowy kierunek to czysty,
   typograficzny uklad bez grafiki: eyebrow/H2/lead nad lista, pod nimi
   trzy szerokie wiersze (Budynek lub lokal / Stale elementy / Ruchomosci
   i wyposazenie), kazdy z H3 i przypisanym akapitem, oddzielone cienkimi
   liniami - dokladnie ten sam, juz zaakceptowany wzorzec co
   .oai-cost-estimate-vehicle__sheet Sekcji 4 strony
   /kosztorys-ubezpieczyciela/ (H3 z cienkim cyjanowym akcentem po lewej
   przez border-left, opis po prawej od 1024px, H3 nad opisem ponizej tego
   progu). Ten sam border-left na H3 dziala bez zmian na kazdej szerokosci,
   wiec pelni jednoczesnie role wymaganego "krotkiego cyjanowego akcentu
   przy kazdym H3" na mobile - jeden mechanizm, bez dodatkowych,
   nakladajacych sie akcentow. Bardzo jasne, chlodne tlo
   (rgba(1,2,66,0.03), ten sam token co poprzednio), subtelnie rozne od
   bialego tla Hero.

   Prog 1024px dla ukladu dwoch kolumn w wierszu jest identyczny jak w
   Sekcji 4 /kosztorys-ubezpieczyciela/, przywolanej wprost jako wzorzec w
   tym zadaniu - ponizej tego progu (w tym przy 900px i 768px) wiersz
   pozostaje jednokolumnowy (H3 nad opisem), zgodnie z wprost wymaganym
   zachowaniem tabletu. */

.oai-site .oai-property-damage-scope {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-property-damage-scope__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-scope__intro {
	max-width: 720px;
	margin: 0 0 36px;
}

.oai-site .oai-property-damage-scope__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-property-damage-scope__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-scope__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;
}

/* Lista: trzy szerokie wiersze */

.oai-site .oai-property-damage-scope__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-property-damage-scope__row {
	padding: 20px 0;
}

.oai-site .oai-property-damage-scope__row + .oai-property-damage-scope__row {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-scope__row-heading {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-scope__row-body {
	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-property-damage-scope__note {
	margin: 32px 0 0;
	max-width: 720px;
	padding: 16px 20px;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, wiersze wciaz jednokolumnowe */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-scope {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-scope__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-scope__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-scope__row-body {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, wiersz pozostaje
   pionowy do 1023px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-scope__heading {
		font-size: 1.75rem;
	}
}

/* Od 1024px: dwuczesciowy wiersz, H3 po lewej (ok. 30%), opis po prawej
   (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-property-damage-scope__row {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 28px;
	}

	.oai-site .oai-property-damage-scope__row-heading {
		flex: 0 0 30%;
		max-width: 30%;
		margin: 0;
		padding-top: 1px;
	}

	.oai-site .oai-property-damage-scope__row-body {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 640px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-scope {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-scope__note {
		padding: 14px 16px;
	}
}

/* Sekcja 3: "Od zalania po uszkodzenie dachu. Szkoda moze miec rozne
   zrodla". Biale tlo, bo Sekcja 2 uzywa jasnego chlodnego odcienia
   (rgba(1,2,66,0.03)) - naprzemienne tlo miedzy sekcjami zachowane bez
   zmian.

   Kierunek wizualny: "mapa czterech zrodel szkody" jako jeden spojny
   modul, bez ikon i bez grafiki. Mobile i tablet do 1023px: cztery
   elementy jeden pod drugim (kolejnosc DOM: Woda, Ogien, Pogoda, Awarie i
   osoby trzecie), oddzielone cienka linia (border-top na sasiadujacych
   elementach), kazdy naglowek H3 z cienkim cyjanowym akcentem po lewej
   (border-left) - dokladnie ten sam mechanizm co __row-heading Sekcji 2,
   pelniacy jednoczesnie role wymaganego "krotkiego cyjanowego akcentu
   przy kazdym H3 na mobile" bez dodatkowego, nakladajacego sie elementu
   dekoracyjnego (pionowa "os laczaca" nie jest dodawana, zeby uniknac
   podwojnego akcentu).

   Od 1024px (ten sam, juz wielokrotnie sprawdzony na tej stronie prog co
   przejscie Sekcji 2 do dwoch kolumn, oraz jak plansza 2x2 Sekcji 6 mapy
   mechanizmow /kosztorys-ubezpieczyciela/, przywolanej jako wzorzec tej
   kompozycji): siatka 2x2, z cienka pozioma linia miedzy wierszami i
   cienka pionowa linia miedzy kolumnami (kolor var(--oai-color-border),
   nie cyjan - cyjan jest zarezerwowany wylacznie dla akcentu przy H3,
   zeby nie powstal podwojny akcent tego samego koloru). Miedzy 768px a
   1023px uklad pozostaje jednokolumnowy: przy dostepnej szerokosci
   kontenera na tym zakresie dwie kolumny obok siebie mialyby zbyt malo
   miejsca na naglowek i akapit bez sprawiania wrazenia stloczenia, wiec
   plansza 2x2 wlacza sie dopiero od sprawdzonego progu 1024px, zgodnie z
   zasada "nie wymuszamy 2x2 za wszelka cene".

   Reset border-top na sasiadujacych elementach w widoku siatki uzywa tego
   samego selektora sasiedztwa co wersja mobilna (rowna specyficznosc),
   zamiast resetu przez sam .event - ta sama poprawka, ktora byla
   wczesniej potrzebna w Sekcji 6 mapy mechanizmow
   /kosztorys-ubezpieczyciela/, gdzie reset o nizszej specyficznosci nie
   przebijal reguly z kombinatorem sasiedztwa. */

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

.oai-site .oai-property-damage-events__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-events__intro {
	max-width: 720px;
	margin: 0 0 36px;
}

.oai-site .oai-property-damage-events__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-property-damage-events__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-events__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;
}

/* Mapa: cztery zrodla szkody, jeden spojny modul */

.oai-site .oai-property-damage-events__map {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-property-damage-events__event {
	padding: 20px 0;
}

.oai-site .oai-property-damage-events__event + .oai-property-damage-events__event {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-events__event-heading {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-events__event-body {
	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-property-damage-events__note {
	margin: 32px 0 0;
	max-width: 720px;
	padding: 16px 20px;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, uklad wciaz jednokolumnowy (patrz
   komentarz na poczatku bloku) */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-events {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-events__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-events__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-events__event-body {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, uklad wciaz
   jednokolumnowy do 1023px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-events__heading {
		font-size: 1.75rem;
	}
}

/* Od 1024px: plansza 2x2 (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-property-damage-events__map {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 0;
	}

	.oai-site .oai-property-damage-events__event {
		padding: 32px 40px;
	}

	.oai-site .oai-property-damage-events__event + .oai-property-damage-events__event {
		border-top: none;
	}

	.oai-site .oai-property-damage-events__event:nth-child(-n+2) {
		border-bottom: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-property-damage-events__event:nth-child(odd) {
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-property-damage-events__event:first-child {
		padding-top: 0;
		padding-left: 0;
	}

	.oai-site .oai-property-damage-events__event:nth-child(2) {
		padding-top: 0;
		padding-right: 0;
	}

	.oai-site .oai-property-damage-events__event:nth-child(3) {
		padding-left: 0;
		padding-bottom: 0;
	}

	.oai-site .oai-property-damage-events__event:nth-child(4) {
		padding-right: 0;
		padding-bottom: 0;
	}

	/* Nota zamykajaca nie jest elementem gridu (jest rodzenstwem .__map w
	   .__inner), dlatego pelna szerokosc na desktopie wymaga zniesienia
	   max-width: 720px odziedziczonego z bazowej reguly .__note (ta sama
	   wartosc co .__intro), a nie grid-column: 1 / -1 */

	.oai-site .oai-property-damage-events__note {
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-events {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-events__note {
		padding: 14px 16px;
	}
}

/* Sekcja 4: "Z jakiego ubezpieczenia zglosic szkode majatkowa?". Bardzo
   jasne, chlodne tlo (rgba(1,2,66,0.03), ten sam token co Sekcja 2) - Sekcja
   3 ma tlo biale, wiec powrot do tego odcienia zachowuje naprzemienny
   rytm tla miedzy sekcjami bez dodatkowego separatora.

   Kierunek: "jedna droga rozdzielajaca sie na dwie sciezki". Dwie kolumny
   i pionowa linia miedzy nimi od 1024px sa jedynym desktopowym
   rozroznieniem sciezek.

   Mobile i tablet do 1023px: dwie sciezki jedna pod druga (kolejnosc DOM:
   wlasna polisa, OC sprawcy), oddzielone cienka linia (ten sam mechanizm
   sasiedztwa .path + .path co .__event Sekcji 3), kazdy naglowek H3 z
   cienkim cyjanowym akcentem po lewej (border-left) - dokladnie ten sam,
   juz trzykrotnie uzyty mechanizm co Sekcje 2 i 3, wiec pelni jednoczesnie
   role wymaganego "krotkiego cyjanowego akcentu przy kazdej sciezce" na
   mobile bez dodatkowej, nakladajacej sie linii pionowej.

   Od 1024px (ten sam, juz czterokrotnie sprawdzony prog na tej stronie):
   modul przechodzi w wiersz, dwie kolumny op zblizonej szerokosci.
   Uzasadnienie progu real liczbami: kontener ma max-width 1280px, padding
   sekcji na tym zakresie to 40px z kazdej strony, wiec przy viewport
   1024px dostepna szerokosc tresci to 1024 - 80 = 944px; przy gap 48px
   miedzy kolumnami kazda kolumna ma (944 - 48) / 2 = 448px - wystarczajaco
   duzo, zeby najdluzsze pytania ("Czy odszkodowanie jest ustalane wedlug
   wartosci rzeczywistej czy odtworzeniowej?", "Jakie dowody potwierdzaja
   odpowiedzialnosc sprawcy za szkode?") zawijaly sie naturalnie na dwie
   linie bez sprawiania wrazenia stloczenia. Przy pelnym kontenerze
   1280px kazda kolumna ma az 576px, wiec 1280/1440/1920px dzialaja z
   zapasem. Reset border-top na .path + .path w widoku wierszowym uzywa
   tego samego selektora sasiedztwa co wersja mobilna (rowna
   specyficznosc), ta sama poprawka co w Sekcji 3 i we wczesniejszej
   Sekcji 6 mapy mechanizmow /kosztorys-ubezpieczyciela/.

   Nota domykajaca (.__note) nie jest elementem gridu/flexa modulu - jest
   rodzenstwem .__module w .__inner - dlatego pelna szerokosc na
   desktopie od razu (bez czekania na osobna korekte, wniosek z poprawki
   Sekcji 3) uzyskana przez nadpisanie max-width na 100% wewnatrz media
   query od 1024px, a nie przez grid-column, ktory nie mialby tu
   zastosowania. */

.oai-site .oai-property-damage-basis {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-property-damage-basis__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-basis__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

.oai-site .oai-property-damage-basis__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-property-damage-basis__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-basis__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;
}

/* Modul: dwie sciezki */

.oai-site .oai-property-damage-basis__module {
	display: flex;
	flex-direction: column;
	margin: 32px 0 0;
}

.oai-site .oai-property-damage-basis__path {
	padding: 24px 0;
}

.oai-site .oai-property-damage-basis__path + .oai-property-damage-basis__path {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-basis__path-heading {
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	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-property-damage-basis__path-intro {
	margin: 0 0 14px;
	max-width: 100%;
	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-property-damage-basis__path-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-property-damage-basis__path-item {
	position: relative;
	margin: 0 0 10px;
	padding-left: 18px;
	max-width: 100%;
	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-property-damage-basis__path-item:last-child {
	margin-bottom: 0;
}

.oai-site .oai-property-damage-basis__path-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-basis__note {
	margin: 32px 0 0;
	max-width: 720px;
	padding: 16px 20px;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, uklad wciaz jednokolumnowy */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-basis {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-basis__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-basis__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-basis__path-heading {
		font-size: 1.125rem;
	}

	.oai-site .oai-property-damage-basis__path-intro,
	.oai-site .oai-property-damage-basis__path-item {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, uklad wciaz
   jednokolumnowy do 1023px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-basis__heading {
		font-size: 1.75rem;
	}
}

/* Od 1024px: dwie sciezki w wierszu (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-property-damage-basis__module {
		flex-direction: row;
		align-items: flex-start;
		margin-top: 40px;
	}

	.oai-site .oai-property-damage-basis__path {
		flex: 1 1 50%;
		min-width: 0;
		padding: 0 40px;
	}

	.oai-site .oai-property-damage-basis__path:first-child {
		padding-left: 0;
	}

	.oai-site .oai-property-damage-basis__path:last-child {
		padding-right: 0;
	}

	.oai-site .oai-property-damage-basis__path + .oai-property-damage-basis__path {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-property-damage-basis__note {
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-basis {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-basis__note {
		padding: 14px 16px;
	}
}

/* Sekcja 5: "Najpierw zabezpiecz mienie. Potem zadbaj o dowody". Biale tlo -
   Sekcja 4 ma jasny chlodny odcien, wiec powrot do bialego zachowuje
   naprzemienny rytm tla bez dodatkowego separatora.

   Kierunek: "jedna ciagla os pierwszych dzialan". To rzeczywisty proces
   (piec kolejnych krokow), wiec widoczna numeracja jest tu uzasadniona -
   jedyny wyjatek na tej stronie. Numery 01-05 sa generowane wylacznie w
   CSS przez counter-reset/counter-increment na .__axis/.__step i
   counter(..., decimal-leading-zero) w .__number::before (PHP nie zawiera
   zadnego zapisanego na sztywno numeru) - .__number sam w sobie jest
   pustym, aria-hidden spanem, bo kolejnosc przekazuje juz semantyczne
   <ol>. Kazdy numer ma stala ramke 24x24px z bialym tlem: linia osi
   (.__axis::before, jeden wspolny pseudo-element, nie osobne segmenty na
   krok) biegnie przez cala dlugosc/wysokosc modulu na wspolczynniku
   left:12px (pion) lub top:12px (poziom) - czyli dokladnie przez srodek
   kazdej 24px ramki numeru - a biale tlo numeru maskuje linie dokladnie
   pod cyfra, wiec wizualnie numery "siedza" na ciagej linii bez
   koniecznosci liczenia osobnych segmentow miedzy krokami.

   Mobile i tablet do 1279px: os pionowa. .__step to grid 24px + reszta
   (numer w pierwszej kolumnie, H3+opis w drugiej), kroki uloone w flex
   column z gap 32px - linia biegnie pionowo przez lewa kolumne.

   Od 1280px: os poziomo, piec krokow w jednym wierszu. Prog wybrany
   swiadomie na wartosci wlasnego max-width kontenera (var(--oai-container-width):
   1280px), a nie na sugerowanych 1200px, bo container i tak nie rosnie
   powyzej 1280px - przy 1200px kontener wciaz rosnie wraz z viewportem
   (dostepna szerokosc tresci = 1200 - 80 padding = 1120px), a przy
   1280px i kazdej szerokosci powyzej (1440px, 1920px) kontener jest juz
   zablokowany na 1280px, wiec kolumny maja zawsze te sama, najwieksza,
   stabilna szerokosc: (1280 - 80 padding - 4 gapy x 16px) / 5 = (1200 -
   64) / 5 = 1136 / 5 = 227px na krok. To wystarczajaco duzo dla
   najdluzszego opisu ("Podejmij bezpieczne dzialania, ktore moga
   zatrzymac dalsze powiekszanie szkody. Moze to oznaczac odciecie zrodla
   wycieku, zabezpieczenie uszkodzonego miejsca albo przeniesienie
   zagrozonych rzeczy.", ok. 195 znakow) - zawija sie naturalnie na kilka
   linii bez sprawiania wrazenia scisniecia, a wysokosc kroku nie jest
   sztywno ustawiona, wiec rozne dlugosci opisow nie kolliduja.

   Nota domykajaca (.__note) nie jest elementem gridu/flexa .__axis - jest
   rodzenstwem .__axis w .__inner - dlatego pelna szerokosc na desktopie
   uzyskana od razu przez nadpisanie max-width na 100% w media query od
   1280px (ten sam, juz sprawdzony wniosek z korekty Sekcji 3), a nie
   przez grid-column. Subtelny cyjanowy akcent noty to border-top w tym
   samym odcieniu co linia osi (rgba(33, 225, 253, 0.35)), zamiast
   neutralnego border-top uzytego w notach Sekcji 2-4, zeby wizualnie
   domykac te sama, cyjanowa os. */

.oai-site .oai-property-damage-first-steps {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-property-damage-first-steps__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-first-steps__intro {
	max-width: 720px;
	margin: 0 0 36px;
}

.oai-site .oai-property-damage-first-steps__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-property-damage-first-steps__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-first-steps__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;
}

/* Os: piec krokow, jedna ciagla linia (patrz komentarz na poczatku bloku) */

.oai-site .oai-property-damage-first-steps__axis {
	position: relative;
	counter-reset: oai-property-damage-step;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-property-damage-first-steps__axis::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	width: 1px;
	background-color: rgba(33, 225, 253, 0.35);
	z-index: 0;
}

.oai-site .oai-property-damage-first-steps__step {
	position: relative;
	counter-increment: oai-property-damage-step;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-property-damage-first-steps__number {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: var(--oai-color-white);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-first-steps__number::before {
	content: counter(oai-property-damage-step, decimal-leading-zero);
}

.oai-site .oai-property-damage-first-steps__step-content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-property-damage-first-steps__step-title {
	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-property-damage-first-steps__step-body {
	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-property-damage-first-steps__note {
	margin: 36px 0 0;
	max-width: 720px;
	padding: 16px 20px;
	border-top: 1px solid rgba(33, 225, 253, 0.35);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, os wciaz pionowa */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-first-steps {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-first-steps__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-first-steps__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-first-steps__step-title {
		font-size: 1.125rem;
	}

	.oai-site .oai-property-damage-first-steps__step-body {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, os wciaz pionowa
   do 1279px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-first-steps__heading {
		font-size: 1.75rem;
	}
}

/* Od 1280px: os pozioma, piec krokow w jednym wierszu (patrz komentarz na
   poczatku bloku) */

@media (min-width: 1280px) {
	.oai-site .oai-property-damage-first-steps__axis {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		margin-top: 44px;
	}

	.oai-site .oai-property-damage-first-steps__axis::before {
		top: 12px;
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 1px;
	}

	.oai-site .oai-property-damage-first-steps__step {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-property-damage-first-steps__step-content {
		margin-top: 16px;
	}

	.oai-site .oai-property-damage-first-steps__note {
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-first-steps {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-first-steps__note {
		padding: 14px 16px;
	}
}

/* Sekcja 6: "Od czego zalezy wysokosc odszkodowania za szkode majatkowa?".
   Bardzo jasne, chlodne tlo (rgba(1,2,66,0.03), ten sam token co Sekcje 2
   i 4) - Sekcja 5 ma tlo biale, wiec powrot do tego odcienia zachowuje
   naprzemienny rytm miedzy sekcjami. Intro (eyebrow/H2/lead) i nota
   koncowa siedza na tym jasnym tle sekcji, POZA granatowym panelem -
   tylko sam model pieciu warstw jest granatowy, zeby wyraznie odroznic
   go od reszty sekcji, zgodnie z wprost wymaganym ukladem tego zadania.

   Kolory i separatory granatowego panelu uzywaja dokladnie tych samych,
   juz rzeczywiscie zastosowanych tokenow "on-navy" co granatowe panele w
   tym projekcie (np. .oai-cost-estimate-patterns w page-cost-estimate.css
   i .oai-denial-next-action__option--secondary w page-denial.css):
   background-color: var(--oai-color-navy), biale naglowki, tekst
   rgba(255,255,255,0.75-0.78), cienkie separatory rgba(255,255,255,0.16)
   i zaokraglenie var(--oai-radius-l) calego panelu (ten sam promien co
   .oai-denial-next-action__option--secondary, jedyny w projekcie navy
   panel z pelnym zaokragleniem osadzony w jasnej sekcji, a nie panel na
   cala szerokosc viewportu). Cyjanowy akcent przy kazdym H3 to ten sam,
   czterokrotnie juz uzyty na tej stronie mechanizm border-left, ktory
   dziala bez zmian na kazdej szerokosci.

   Panel sam w sobie ma padding: 0 - to .__layer i .__result maja wlasny
   padding poziomy, dzieki czemu separator (border-top) i tlo pasa wyniku
   siegaja pelnej szerokosci panelu (wymaganie "separatory rozciagaja sie
   na pelna szerokosc panelu"), a tekst pozostaje wcięty.

   Mobile i tablet do 1023px: kazda warstwa to jedna kolumna, H3 nad
   opisem, oddzielone cienka biala linia (.layer + .layer, ten sam
   mechanizm sasiedztwa co __event/__row/__path wczesniejszych sekcji).

   Od 1024px (ten sam, wielokrotnie juz sprawdzony na tej stronie prog -
   przy viewport 1024px minus padding sekcji 40px i padding wewnetrzny
   panelu 32px z kazdej strony dostepna szerokosc tresci to 1024 - 80 -
   64 = 880px, wiecej niz wystarczajaco dla proporcji 30/70 bez
   scisniecia, wiec prog nie musi byc przesuwany wyzej): kazda warstwa
   przechodzi w wiersz, H3 ok. 30% po lewej, opis ok. 70% po prawej -
   identyczna proporcja co juz zaakceptowany uklad Sekcji 2 tej strony
   (.oai-property-damage-scope__row-heading/-body), swiadomie ponownie
   uzyta zamiast wymyslania nowego mechanizmu.

   Pas wyniku "Koncowa kwota odszkodowania" to zwykly <p>, nie naglowek,
   oddzielony od warstw cyjanowa linia (rgba(33,225,253,0.35), ten sam
   token co linia osi Sekcji 5 i dawny fork Sekcji 4), zeby byc wyrazniej
   wyodrebniony niz neutralne separatory miedzy warstwami. */

.oai-site .oai-property-damage-amount {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-property-damage-amount__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-amount__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

.oai-site .oai-property-damage-amount__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-property-damage-amount__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-amount__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;
}

/* Panel: model pieciu warstw (patrz komentarz na poczatku bloku) */

.oai-site .oai-property-damage-amount__panel {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0;
	border-radius: var(--oai-radius-l);
	background-color: var(--oai-color-navy);
	overflow: hidden;
}

.oai-site .oai-property-damage-amount__layers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-property-damage-amount__layer {
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-property-damage-amount__layer + .oai-property-damage-amount__layer {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.oai-site .oai-property-damage-amount__layer-heading {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-amount__layer-body {
	margin: 0;
	padding-left: 12px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-amount__result {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 20px;
	border-top: 1px solid rgba(33, 225, 253, 0.35);
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-white);
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-amount__note {
	margin: 32px 0 0;
	max-width: 720px;
	padding: 16px 20px;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, warstwy wciaz jednokolumnowe */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-amount {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-amount__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-amount__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-amount__layer {
		padding: 28px 32px;
	}

	.oai-site .oai-property-damage-amount__layer-body {
		font-size: 1rem;
	}

	.oai-site .oai-property-damage-amount__result {
		padding: 22px 32px;
		font-size: 1.0625rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, warstwy wciaz
   jednokolumnowe do 1023px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-amount__heading {
		font-size: 1.75rem;
	}
}

/* Od 1024px: kazda warstwa w wierszu, H3 ok. 30% po lewej, opis ok. 70%
   po prawej (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-property-damage-amount__layer {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 28px;
		padding: 28px 32px;
	}

	.oai-site .oai-property-damage-amount__layer-heading {
		flex: 0 0 30%;
		max-width: 30%;
		margin: 0;
		padding-top: 1px;
	}

	.oai-site .oai-property-damage-amount__layer-body {
		flex: 1 1 auto;
		min-width: 0;
		padding-left: 0;
	}

	.oai-site .oai-property-damage-amount__note {
		max-width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-amount {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-amount__layer {
		padding: 20px 16px;
	}

	.oai-site .oai-property-damage-amount__result {
		padding: 18px 16px;
	}

	.oai-site .oai-property-damage-amount__note {
		padding: 14px 16px;
	}
}

/* Sekcja 7: "Sprawdz nie tylko kwote, ale tez sposob jej wyliczenia".
   Biale tlo - Sekcja 6 uzywa jasnego chlodnego odcienia i granatowego
   panelu, wiec powrot do bieli zachowuje naprzemienny rytm.

   Kierunek: "jeden dokument, dwa obszary kontroli". Jeden wspolny modul
   (.__module) z pojedyncza zewnetrzna granica (border 1px solid
   var(--oai-color-border)) i jednym promieniem zaokraglenia
   (var(--oai-radius-l), ten sam token co granatowy panel Sekcji 6),
   overflow: hidden, zeby separatory nie wystawaly poza zaokraglone rogi.
   W srodku dwa obszary (decyzja, kosztorys) bez osobnych tel, cieni ani
   zaokraglen - wygladaja jak dwie strony jednej dokumentacji, nie dwie
   karty. Wspolne domkniecie i pas linkow siedza pod obiema czesciami
   wewnatrz tego samego modulu (patrz __closing nizej), zeby "domkniecie
   zajmuje pelna szerokosc modulu" bylo dosl ownie prawdziwe. Akapit z
   trzema linkami (.__links) celowo zostaje POZA modulem, jako spokojny
   tekst redakcyjny pod nim, a nie czesc "dokumentu".

   Punktory list to male cyjanowe kropki wykonane przez ::before -
   dokladnie ten sam mechanizm co .oai-property-damage-basis__path-item
   Sekcji 4, uzyty tu piaty raz z rzedu na tej stronie.

   Mobile i tablet do 1119px: obszary jeden pod drugim (kolejnosc DOM:
   decyzja, kosztorys), oddzielone cienka linia (.area + .area, ten sam
   mechanizm sasiedztwa co __path/__event/__row wczesniejszych sekcji).

   Od 1120px (prog dobrany swiadomie wyzej niz utarty na tej stronie
   1024px, zgodnie z wprost zalecanym zakresem 1120-1200px w tym
   zadaniu - lista szesciu i siedmiu dlugich pytan wymaga wiecej miejsca
   niz krotsze uklady Sekcji 2 i 4). Uzasadnienie liczbami: przy
   viewport 1120px, padding sekcji 40px z kazdej strony daje 1120 - 80 =
   1040px tresci; wewnetrzny padding modulu 32px z kazdej strony daje
   1040 - 64 = 976px; przy gap 40px miedzy obszarami kazdy obszar ma
   (976 - 40) / 2 = 468px - wygodna szerokosc dla najdluzszych pytan
   ("Czy uwzglednino osuszanie, zabezpieczenie, sprzatanie i
   utylizacje?"), wiec prog 1120px nie jest za ciasny i nie trzeba go
   przesuwac do 1200px. Reset border-top na .area + .area w widoku
   wierszowym uzywa tego samego selektora sasiedztwa co wersja mobilna
   (rowna specyficznosc), ta sama poprawka co w poprzednich sekcjach tej
   strony. */

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

.oai-site .oai-property-damage-review__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-review__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

.oai-site .oai-property-damage-review__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-property-damage-review__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-review__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;
}

/* Modul: jeden dokument, dwa obszary (patrz komentarz na poczatku bloku) */

.oai-site .oai-property-damage-review__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-property-damage-review__areas {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-property-damage-review__area {
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-property-damage-review__area + .oai-property-damage-review__area {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-review__area-heading {
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	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-property-damage-review__area-intro {
	margin: 0 0 14px;
	max-width: 100%;
	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-property-damage-review__area-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-property-damage-review__area-item {
	position: relative;
	margin: 0 0 10px;
	padding-left: 18px;
	max-width: 100%;
	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-property-damage-review__area-item:last-child {
	margin-bottom: 0;
}

.oai-site .oai-property-damage-review__area-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-review__area-note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-property-damage-review__closing {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 20px;
	border-top: 1px solid var(--oai-color-border);
	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-property-damage-review__links {
	margin: 28px 0 0;
	max-width: 720px;
	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-property-damage-review__link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	display: inline;
	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-property-damage-review__link:hover {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-property-damage-review__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Tablet od 768px: wieksza typografia, obszary wciaz jednokolumnowe */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-review {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-review__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-review__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-review__area {
		padding: 28px 32px;
	}

	.oai-site .oai-property-damage-review__area-intro,
	.oai-site .oai-property-damage-review__area-item {
		font-size: 1rem;
	}

	.oai-site .oai-property-damage-review__closing {
		padding: 24px 32px;
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, obszary wciaz
   jednokolumnowe do 1119px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-review__heading {
		font-size: 1.75rem;
	}
}

/* Od 1120px: dwa obszary w wierszu (patrz komentarz na poczatku bloku) */

@media (min-width: 1120px) {
	.oai-site .oai-property-damage-review__areas {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-property-damage-review__area {
		flex: 1 1 50%;
		min-width: 0;
	}

	.oai-site .oai-property-damage-review__area + .oai-property-damage-review__area {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-review {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-review__area {
		padding: 20px 16px;
	}

	.oai-site .oai-property-damage-review__closing {
		padding: 16px 16px;
	}
}

/* Sekcja 8: "Jakie dokumenty przygotowac do odwolania od decyzji?". Bardzo
   jasne, chlodne tlo (rgba(1,2,66,0.03), ten sam token co Sekcje 2, 4 i
   6) - Sekcja 7 ma tlo biale, wiec powrot do tego odcienia zachowuje
   naprzemienny rytm.

   Kierunek: "jedna teczka sprawy, trzy dzialy dokumentow". Modul uzywa
   dokladnie tego samego mechanizmu co wspolny modul Sekcji 7
   (.oai-property-damage-review__module): jedna zewnetrzna granica
   (border 1px solid var(--oai-color-border)), jeden promien zaokraglenia
   (var(--oai-radius-l)), overflow: hidden. Zrezygnowano z opcjonalnego
   dekoracyjnego detalu "zakladki teczki" przy gornej krawedzi modulu -
   ten sam border + zaokraglenie juz skutecznie przekazuje "jeden
   dokument" (potwierdzone wizualnie w Sekcji 7), a kazdy dodatkowy
   dekoracyjny element na tej stronie byl dotychczas ryzykowny (odrzucona
   ilustracja Sekcji 2, odrzucona kreska __fork Sekcji 4) - bezpieczniej
   jest ponownie uzyc juz zaakceptowanego mechanizmu niz wprowadzac nowy.

   .__departments to osobny wrapper wewnatrz .__module (nie sam .__module
   staje sie flex-row) - dokladnie ta sama poprawka architektury, ktora
   byla konieczna w Sekcji 7 po tym, jak .__closing omylkowo stalo sie
   trzecia kolumna gridu; tutaj zastosowana od razu.

   Naglowki dzialow maja cienki cyjanowy akcent border-left (szosty juz
   raz uzyty na tej stronie mechanizm, po Sekcjach 2, 3, 4, 6 i 7).
   Punktory list to male cyjanowe kropki ::before (ten sam mechanizm co
   Sekcje 4 i 7).

   Mobile i tablet do 1199px: trzy dzialy jeden pod drugim (kolejnosc DOM:
   "Od tego zacznij", "Pokaz, co zostalo uszkodzone", "Pokaz rzeczywiste
   koszty"), oddzielone cienka linia (.department + .department, ten sam
   mechanizm sasiedztwa co __area/__path/__event/__row wczesniejszych
   sekcji).

   Od 1200px: trzy dzialy w jednym wierszu. Prog wybrany wyzej niz
   dwukolumnowy prog Sekcji 7 (1120px), bo trzy waskie kolumny wymagaja
   wiecej miejsca niz dwie. Uzasadnienie liczbami: przy viewport 1200px
   kontener jeszcze rosnie (nie jest zablokowany na 1280px), wiec
   dostepna szerokosc tresci to 1200 - 80 (padding sekcji) = 1120px;
   podzielona na trzy dzialy daje kazdemu ok. 373px calkowitej szerokosci,
   z ktorych wewnetrzny padding dzialu (32px z kazdej strony = 64px)
   zostawia ok. 309px na tresc - wystarczajaco duzo, zeby najdluzsza
   pozycja listy ("Dokumenty potwierdzajace koszty osuszania, demontazu,
   sprzatania i wywozu pozostalosci") zawijala sie naturalnie na kilka
   linii bez sprawiania wrazenia scisniecia. Reset border-top na
   .department + .department w widoku wierszowym uzywa tego samego
   selektora sasiedztwa co wersja mobilna (rowna specyficznosc), ta sama
   poprawka co w poprzednich sekcjach tej strony.

   Nota domykajaca (.__closing) siedzi wewnatrz .__module, pod
   .__departments, pelnej szerokosci od razu (bez potrzeby korekty -
   wniosek z poprawki Sekcji 3, zastosowany konsekwentnie od Sekcji 5).

   Link do produktu 2366 (.__service-link) uzywa dokladnie tego samego
   zestawu wlasciwosci co poprawka linkow Sekcji 7 (font-size/line-height/
   font-family: inherit, display: inline, font-weight: 600) - zastosowana
   od razu, zeby nie powtorzyc bledu zbyt duzej typografii linkow. Akapit
   linkujacy siedzi POZA modulem, jako spokojny tekst redakcyjny, tak jak
   akapit z linkami Sekcji 7. */

.oai-site .oai-property-damage-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

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

.oai-site .oai-property-damage-documents__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

.oai-site .oai-property-damage-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-property-damage-documents__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-documents__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;
}

/* Modul: jedna teczka, trzy dzialy (patrz komentarz na poczatku bloku) */

.oai-site .oai-property-damage-documents__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-property-damage-documents__departments {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.oai-site .oai-property-damage-documents__department {
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-property-damage-documents__department + .oai-property-damage-documents__department {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-documents__department-heading {
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	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-property-damage-documents__department-intro {
	margin: 0 0 14px;
	max-width: 100%;
	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-property-damage-documents__department-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-property-damage-documents__department-item {
	position: relative;
	margin: 0 0 10px;
	padding-left: 18px;
	max-width: 100%;
	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-property-damage-documents__department-item:last-child {
	margin-bottom: 0;
}

.oai-site .oai-property-damage-documents__department-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-documents__closing {
	box-sizing: border-box;
	margin: 0;
	padding: 20px 20px;
	border-top: 1px solid var(--oai-color-border);
	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-property-damage-documents__links {
	margin: 28px 0 0;
	max-width: 720px;
	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-property-damage-documents__service-link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	display: inline;
	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-property-damage-documents__service-link:hover {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
}

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

/* Tablet od 768px: wieksza typografia, dzialy wciaz jednokolumnowe */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-documents {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-documents__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-documents__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-documents__department {
		padding: 28px 32px;
	}

	.oai-site .oai-property-damage-documents__department-intro,
	.oai-site .oai-property-damage-documents__department-item {
		font-size: 1rem;
	}

	.oai-site .oai-property-damage-documents__closing {
		padding: 24px 32px;
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, dzialy wciaz
   jednokolumnowe do 1199px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-documents__heading {
		font-size: 1.75rem;
	}
}

/* Od 1200px: trzy dzialy w jednym wierszu (patrz komentarz na poczatku
   bloku) */

@media (min-width: 1200px) {
	.oai-site .oai-property-damage-documents__departments {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-property-damage-documents__department {
		flex: 1 1 33.333%;
		min-width: 0;
	}

	.oai-site .oai-property-damage-documents__department + .oai-property-damage-documents__department {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

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

	.oai-site .oai-property-damage-documents__department {
		padding: 20px 16px;
	}

	.oai-site .oai-property-damage-documents__closing {
		padding: 16px 16px;
	}
}

/* Sekcja 9: "Kiedy warto odwolac sie od decyzji ubezpieczyciela?". Bardzo
   jasne, chlodne tlo (rgba(1,2,66,0.03), ten sam token co Sekcja 8) - w
   tym miejscu Sekcja 9 celowo NIE wraca do bieli, bo cala sekcja konczy
   sie granatowym modulem dzialania i biale tlo sekcji tworzyloby ostry,
   dwukrotny kontrast (bialy -> granat) tuz nad kolejnym elementem strony;
   jasny chlodny odcien lagodzi przejscie do granatu, a naprzemiennosc
   sitewide i tak jest zachowana wzgledem Sekcji 8 (obie jasne, ale to
   ostatnia sekcja strony przed stopka, wiec nie powstaje dlugi ciag
   powtarzajacego sie tla - Sekcja 8 i 9 to razem tylko dwie sekcje).

   Kierunek: "mapa rozbieznosci prowadzaca do dzialania". Cztery obszary
   NIE maja osobnych kart/tel/ramek - jedna otwarta kompozycja. Na
   desktopie nad H3 przebiega jedna wspolna, subtelna linia
   (.__areas::before, jeden pseudo-element, nie cztery segmenty), a kazdy
   obszar dostaje maly cyjanowy punkt (.__area::before) osadzony na tej
   linii - uproszczona wersja mechanizmu "linia + maskowane znaczniki" juz
   zastosowanego i zaakceptowanego w Sekcji 5 (tam maskowane cyfry, tutaj
   zwykle male kropki, bez potrzeby maskowania, bo kropka po prostu
   nakrywa fragment linii przez z-index). Ponizej progu wiersza (mobile i
   tablet) linia znika, a kazdy H3 dostaje zamiast tego cienki cyjanowy
   akcent border-left - dokladnie jak wczesniej Sekcje 2, 3, 4, 6 i 7 - bo
   bez wspolnej linii potrzebny jest inny, pojedynczy mechanizm akcentu;
   oba mechanizmy (linia+kropka na desktopie, border-left na mobile/
   tablecie) nigdy nie sa aktywne jednoczesnie, wiec nie powstaje podwojny
   akcent.

   Prog wiersza mapy to 1024px (ten sam, wielokrotnie juz sprawdzony na
   tej stronie prog) - uzasadnione tym, ze pozycje list sa krotkimi,
   jednowierszowymi stwierdzeniami (nie dlugimi pytaniami jak w Sekcji 7
   ani nazwami dokumentow jak w Sekcji 8), wiec nawet waska kolumna ok.
   188px (944px dostepnej tresci na 1024px minus wewnetrzny padding
   czterech obszarow, podzielone na 4) jest wystarczajaca.

   Nota domykajaca (.__closing) siedzi POD .__areas, wewnatrz .__map,
   pelnej szerokosci od razu (ten sam, konsekwentnie stosowany od Sekcji
   5 wniosek z poprawki Sekcji 3).

   Granatowy modul dzialania (.__action) uzywa dokladnie tego samego
   mechanizmu bialego przycisku na granatowym tle, co juz rzeczywiscie
   zastosowany i dzialajacy .oai-denial-next-action__cta--primary w
   page-denial.css (background: var(--oai-color-white); color:
   var(--oai-color-navy);, nadpisujace domyslny granatowy .oai-cta--
   primary) - bezpieczne, juz sprawdzone rozwiazanie zamiast wymyslania
   nowego wariantu przycisku. Link do Analizy Decyzji (.__analysis-link)
   dziedziczy typografie po akapicie dokladnie tak samo jak poprawione
   linki Sekcji 7 i 8 (font-size/line-height/font-family: inherit,
   display: inline, font-weight: 600), ale z wlasna, jasna kolorystyka
   dopasowana do granatowego tla (w odroznieniu od Sekcji 7 i 8, gdzie
   linki siedzialy na jasnym tle). */

.oai-site .oai-property-damage-appeal {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-property-damage-appeal__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-appeal__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

.oai-site .oai-property-damage-appeal__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-property-damage-appeal__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-appeal__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;
}

/* Mapa: cztery obszary rozbieznosci (patrz komentarz na poczatku bloku) */

.oai-site .oai-property-damage-appeal__map {
	margin: 36px 0 0;
}

.oai-site .oai-property-damage-appeal__areas {
	position: relative;
}

.oai-site .oai-property-damage-appeal__area {
	position: relative;
	padding: 20px 0;
}

.oai-site .oai-property-damage-appeal__area + .oai-property-damage-appeal__area {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-appeal__area-heading {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-appeal__area-intro {
	margin: 0 0 10px;
	padding-left: 12px;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-property-damage-appeal__area-list {
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
}

.oai-site .oai-property-damage-appeal__area-item {
	position: relative;
	margin: 0 0 8px;
	padding-left: 16px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-appeal__area-item:last-child {
	margin-bottom: 0;
}

.oai-site .oai-property-damage-appeal__area-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-appeal__closing {
	margin: 8px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--oai-color-border);
	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;
}

/* Modul dzialania: granatowy, jedyny mocny element konwersyjny sekcji
   (patrz komentarz na poczatku bloku) */

.oai-site .oai-property-damage-appeal__action {
	box-sizing: border-box;
	margin: 40px 0 0;
	padding: 32px 24px;
	border-radius: var(--oai-radius-l);
	background-color: var(--oai-color-navy);
}

.oai-site .oai-property-damage-appeal__action-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-appeal__action-description {
	margin: 0 0 24px;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-appeal__cta {
	width: 100%;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-property-damage-appeal__action-secondary {
	margin: 20px 0 0;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-appeal__analysis-link {
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	display: inline;
	color: var(--oai-color-white);
	font-weight: 600;
	text-decoration-line: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
	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-property-damage-appeal__analysis-link:hover {
	color: var(--oai-color-white);
	text-decoration-color: var(--oai-color-cyan);
}

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

/* Tablet od 768px: wieksza typografia, mapa wciaz jednokolumnowa */

@media (min-width: 768px) {
	.oai-site .oai-property-damage-appeal {
		padding: 72px 40px;
	}

	.oai-site .oai-property-damage-appeal__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-appeal__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-appeal__action {
		padding: 40px 40px;
	}

	.oai-site .oai-property-damage-appeal__action-heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-property-damage-appeal__cta {
		width: auto;
		min-width: 260px;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, mapa wciaz
   jednokolumnowa do 1023px */

@media (min-width: 901px) {
	.oai-site .oai-property-damage-appeal__heading {
		font-size: 1.75rem;
	}
}

/* Od 1200px: cztery obszary w jednym wierszu, jedna wspolna linia z
   punktami (patrz komentarz na poczatku bloku) */

@media (min-width: 1200px) {
	.oai-site .oai-property-damage-appeal__areas {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 28px;
		padding-top: 20px;
	}

	.oai-site .oai-property-damage-appeal__areas::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background-color: rgba(33, 225, 253, 0.35);
	}

	.oai-site .oai-property-damage-appeal__area {
		flex: 1 1 25%;
		min-width: 0;
		padding: 0;
	}

	.oai-site .oai-property-damage-appeal__area + .oai-property-damage-appeal__area {
		border-top: none;
	}

	.oai-site .oai-property-damage-appeal__area::before {
		content: "";
		position: absolute;
		top: -20px;
		left: 0;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: var(--oai-color-cyan);
		z-index: 1;
	}

	.oai-site .oai-property-damage-appeal__area-heading {
		padding-left: 0;
		border-left: none;
	}

	.oai-site .oai-property-damage-appeal__area-intro {
		padding-left: 0;
	}

	.oai-site .oai-property-damage-appeal__area-list {
		padding-left: 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-appeal {
		padding: 40px 16px;
	}

	.oai-site .oai-property-damage-appeal__action {
		padding: 28px 18px;
	}
}

/* Sekcja 10: najczestsze pytania. Nie jest to nowy komponent FAQ - to
   dokladny, zaakceptowany wzorzec pobrany jeden do jednego z
   .oai-cost-estimate-faq (assets/css/page-cost-estimate.css), ktory sam
   jest wiernym odwzorowaniem pierwotnego mechanizmu uzywanego na
   /szkoda-calkowita/ (.oai-total-loss-faq), /zanizone-odszkodowanie/
   (.oai-underpayment-faq) i /odmowa-wyplaty-odszkodowania/
   (.oai-denial-faq). Zmieniono wylacznie namespace na
   .oai-property-damage-faq, poniewaz page-property-damage.css jest
   ladowany wylacznie na tej stronie - zrodlowy komponent
   .oai-cost-estimate-faq pozostal nietkniety. Wszystkie wlasciwosci
   (typografia, odstepy, breakpointy 600/480/360px, mechanizm plus/minus,
   stan [open], focus-visible) sa identyczne z zrodlem.

   Natywne details/summary, plus/minus wylacznie CSS (dwa pseudo-elementy
   na summary tworzace poziomą i pionowa kreske = "+"; pionowa kreska
   znika przy [open], zostawiajac wylacznie poziomą = "-"), brak name
   (kilka odpowiedzi moze byc otwartych jednoczesnie), brak
   JavaScriptu, brak CTA - sekcja konczy sie lista pytan.

   Bardzo jasne tlo Sekcji 9 (rgba(1,2,66,0.03)) - Sekcja 10 wraca do
   bieli, zgodnie z naprzemiennym rytmem strony i zgodnie z bialym tlem
   juz uzytym w zrodlowym komponencie .oai-cost-estimate-faq. */

.oai-site .oai-property-damage-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background: var(--oai-color-white);
}

.oai-site .oai-property-damage-faq__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-faq__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-property-damage-faq__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-property-damage-faq__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-faq__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-faq__list {
	margin: 32px 0 0;
	max-width: 960px;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-property-damage-faq__item {
	border-bottom: 1px solid var(--oai-color-border);
	transition: background-color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-property-damage-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-faq__question {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 64px;
	max-width: 100%;
	padding: 18px 40px 18px 0;
	color: var(--oai-color-navy);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-property-damage-faq__question::-webkit-details-marker {
	display: none;
}

.oai-site .oai-property-damage-faq__question:focus-visible {
	outline: none;
}

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

.oai-site .oai-property-damage-faq__question::before,
.oai-site .oai-property-damage-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-property-damage-faq__question::before {
	width: 14px;
	height: 2px;
	margin-top: -1px;
}

.oai-site .oai-property-damage-faq__question::after {
	right: 8px;
	width: 2px;
	height: 14px;
	margin-top: -7px;
}

.oai-site .oai-property-damage-faq__item[open] .oai-property-damage-faq__question::after {
	opacity: 0;
}

.oai-site .oai-property-damage-faq__answer {
	margin: 0;
	max-width: 640px;
	padding: 0 40px 24px 0;
	color: var(--oai-color-navy-muted);
	font-size: 15px;
	line-height: 1.65;
	overflow-wrap: normal;
	word-break: normal;
}

@media (max-width: 600px) {
	.oai-site .oai-property-damage-faq {
		padding: 48px 24px;
	}

	.oai-site .oai-property-damage-faq__question {
		min-height: 52px;
		padding: 14px 32px 14px 0;
	}

	.oai-site .oai-property-damage-faq__answer {
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	.oai-site .oai-property-damage-faq {
		padding: 40px 18px;
	}

	.oai-site .oai-property-damage-faq__title {
		font-size: 1.75rem;
		line-height: 1.12;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-faq {
		padding: 36px 16px;
	}
}

/* Sekcja 11: koncowe CTA, ostatnia sekcja strony przed footerem. Zmiana
   wzgledem wczesniejszego kierunku planu (granatowe plaskie tlo bez
   grafiki, jak w Sekcji 11 planu) - uzytkownik zaakceptowal
   fotorealistyczna grafike w tle (dom po burzy, uszkodzony dach, mokry
   podjazd, polamane galezie), rzeczywiscie umieszczona w
   assets/images/page-property-damage/szkoda-majatkowa-cta-dom-po-burzy.webp
   (potwierdzone 1829x860px, format WebP lossy, przez bezposrednie
   odczytanie naglowka pliku i wizualna inspekcje). Zdjecie ma juz wbudowany
   ciemny lewy pas (ok. 30% szerokosci), dlatego jednolity, niegradientowy
   overlay w odcieniu granatu marki (rgba oparte na --oai-color-navy =
   #010242 = rgb(1,2,66)) tylko poglebia ten efekt, nie tworzac go od zera -
   dom po prawej pozostaje czytelny przy umiarkowanej nieprzezroczystosci.

   Grafika osadzona jako prawdziwy <img> (nie CSS background-image, zgodnie
   z wprost preferowanym w tym zadaniu mechanizmem, inaczej niz starszy
   wzorzec .oai-final-cta na stronie glownej) - .__media to bezwzglednie
   pozycjonowany kontener wypelniajacy cala sekcje, .__image ma object-fit:
   cover, .__overlay to osobny, jednolity element nad zdjeciem. Oba wewnatrz
   .__media z position:absolute; inset:0, .__inner i .__content siedza nad
   nimi dzieki wlasnemu z-index i position:relative na sekcji.

   Przycisk uzywa dokladnie tego samego mechanizmu bialego przycisku na
   ciemnym tle, co juz zaakceptowany .oai-property-damage-appeal__cta
   Sekcji 9 (nadpisanie background/color na bazowych klasach .oai-cta
   .oai-cta--primary) - ponownie uzyty, sprawdzony wariant zamiast nowego.

   Object-position: desktop "right center" (dom ma pozostac po prawej,
   wymog wprost z tego zadania, bezpieczniejszy niz "center center" przy
   bardzo szerokich, niskich kadrach banera). Mobile "70% center" (wprost
   zasugerowany w zadaniu punkt startowy), z mocniejszym overlayem niz na
   desktopie, zgodnie z wymogiem "overlay moze byc mocniejszy na mobile". */

.oai-site .oai-property-damage-final-cta {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 80px 32px;
	overflow: hidden;
	isolation: isolate;
}

.oai-site .oai-property-damage-final-cta__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
}

.oai-site .oai-property-damage-final-cta__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.oai-site .oai-property-damage-final-cta__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(1, 2, 66, 0.55);
	pointer-events: none;
}

.oai-site .oai-property-damage-final-cta__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-property-damage-final-cta__content {
	min-width: 0;
	max-width: 560px;
}

.oai-site .oai-property-damage-final-cta__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-property-damage-final-cta__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-property-damage-final-cta__lead {
	margin: 0 0 28px;
	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-property-damage-final-cta__button {
	width: 100%;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-property-damage-final-cta__note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
	.oai-site .oai-property-damage-final-cta {
		padding: 112px 40px;
	}

	.oai-site .oai-property-damage-final-cta__title {
		font-size: 2rem;
	}

	.oai-site .oai-property-damage-final-cta__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-property-damage-final-cta__button {
		width: auto;
		min-width: 260px;
	}

	.oai-site .oai-property-damage-final-cta__overlay {
		background-color: rgba(1, 2, 66, 0.5);
	}
}

@media (max-width: 600px) {
	.oai-site .oai-property-damage-final-cta__image {
		object-position: 70% center;
	}

	.oai-site .oai-property-damage-final-cta__overlay {
		background-color: rgba(1, 2, 66, 0.68);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-property-damage-final-cta {
		padding: 56px 16px;
	}
}