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

   Zdjecie WebP (szkoda-komunikacyjna-hero.webp) ma rzeczywiste wymiary
   1536x1024 (proporcje 3/2, pejzaz), w odroznieniu od portretowego zdjecia
   Hero /szkoda-majatkowa/ (550x659). Kontener .visual dostaje aspect-ratio
   3/2 od 768px, co odpowiada dokladnym proporcjom zrodlowego pliku - obraz
   jest w pelni widoczny bez kadrowania na tych szerokosciach. Ponizej 768px
   kontener dostaje zamiast tego wysokosc z clamp() w przedziale 300-380px
   (zgodnie z wprost okreslonym zakresem tego zadania), wiec przy waskich
   szerokosciach obraz jest kadrowany przez object-fit: cover, a nie
   pomniejszany razem z szerokoscia ekranu. Auto po lewej stronie kadru ma
   uszkodzony przedni naroznik i reflektor w prawej-srodkowej czesci
   zdjecia (mniej wiecej 55-95% szerokosci, 25-70% wysokosci), dlatego
   object-position: 75% 42% zachowuje te czesc w kadrze przy kazdym
   kadrowaniu.

   Uklad dwustrefowy (tresc 52%, modul 48%, max-width tresci ok. 620px)
   wlacza sie od 1024px - swiadomie inny prog niz 901px uzyty w Hero
   /szkoda-majatkowa/ (ta strona nie jest pikselowa kopia), za to zgodny z
   dominujacym w projekcie progiem kontrolnym tabletu 1024px. Ponizej
   1024px (w tym 768px) uklad jest w pelni jednokolumnowy: tresc nad
   modulem, CTA przed grafika w DOM, zgodnie z wprost wymaganym
   zachowaniem tabletu tego zadania. */

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

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

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

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

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

.oai-site .oai-vehicle-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-vehicle-damage-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

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

.oai-site .oai-vehicle-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-vehicle-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-vehicle-damage-hero__lead {
	margin: 0;
	max-width: 620px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

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

.oai-site .oai-vehicle-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 1536x1024 (3/2, pejzaz). Ponizej 768px
   kontener dostaje wysokosc z clamp() w przedziale 300-380px zamiast
   aspect-ratio, wiec obraz jest kadrowany przez object-fit: cover na
   waskich szerokosciach - patrz komentarz na poczatku bloku. */

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

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

.oai-site .oai-vehicle-damage-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: clamp(300px, 82vw, 380px);
	object-fit: cover;
	object-position: 75% 42%;
	border-radius: var(--oai-radius-l);
	border: 1px solid var(--oai-color-border);
}

/* Tablet od 768px: wieksza typografia, modul wciaz pod trescia, obraz
   przechodzi na naturalne proporcje 3/2 (bez kadrowania) */

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

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

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

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

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

	.oai-site .oai-vehicle-damage-hero__image {
		height: auto;
		aspect-ratio: 3 / 2;
		object-position: center;
	}
}

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

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

	.oai-site .oai-vehicle-damage-hero__content {
		flex: 0 1 52%;
	}

	.oai-site .oai-vehicle-damage-hero__visual {
		flex: 1 1 48%;
	}

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

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

/* Sekcja 2: "Co moze obejmowac szkoda komunikacyjna?". Jedna otwarta mapa
   zakresu szkody (nie cztery osobne karty, nie siatka ikon, nie numeracja).
   Centralny element ".oai-vehicle-damage-scope__hub" to zwykly tekstowy
   blok (nie H2/H3), otoczony czterema obszarami w
   ".oai-vehicle-damage-scope__areas". Polaczenia miedzy hubem a obszarami
   sa budowane wylacznie pseudo-elementami CSS (::before), bez dodatkowego
   markupu i bez wplywu na kolejnosc odczytu czytnika ekranu.

   Trzy uklady, przelaczane wylacznie przez CSS (ten sam DOM na kazdej
   szerokosci - eyebrow/H2/lead, potem hub, potem cztery obszary w
   kolejnosci 1-2-3-4, potem domkniecie):

   - Mobile (ponizej 768px): hub jako samodzielny blok nad lista, lista
     obszarow w jednej kolumnie z ciagla cyjanowa linia po lewej
     (border-left na ul) i krotkim poziomym "odcinkiem" (::before na kazdym
     li), ktory laczy tresc z ta linia.

   - Tablet od 768px do 1023px (przejscie z "zbyt ciasnego" ukladu
     dwustronnego): hub pozostaje nad obszarami, obszary przechodza w
     siatke 2x2, a wspolna oz to pozioma cyjanowa linia pod hubem
     (::after na hubie) laczaca sie z pionowym znacznikiem nad kazdym
     obszarem (::before na li) - jedna wspolna, czytelna oz zamiast
     dwoch osobnych stref.

   - Desktop od 1024px: ".areas" (prawdziwy ul, bez display:contents - lista
     zachowuje pelna semantyke dla czytnikow ekranu) staje sie siatka
     minmax(0,1fr) minmax(0,1fr) x 2 wiersze z szerokim column-gap
     (260px), przez co obszar 1 i 3 laduja w lewej kolumnie, a 2 i 4 w
     prawej - bez grid-template-areas i bez zmiany kolejnosci DOM
     (1-2-3-4). Hub jest osobnym elementem pozycjonowanym przez
     position: absolute wzgledem ".map" (position: relative), przesunietym
     lokalna zmienna CSS (--oai-vehicle-damage-map-center-offset, -40px)
     w lewo wzgledem matematycznego srodka, poniewaz przy tak szerokim
     column-gap srodek 50% wypadal optycznie za blisko prawej kolumny (dwie
     kolejne korekty po przegladzie screenow: -14px, potem dodatkowe
     -26px). Po ostatniej korekcie hub jest samodzielnym granatowym
     prostokatem bez zadnych lacznikow ani osi przy jego krawedziach -
     wczesniejsza pionowa os huba (::before/::after) oraz poziome laczniki
     obszarow skierowane w strone huba (::before na .area--1/2/3/4) zostaly
     usuniete wylacznie w tym wariancie (".area::before { display: none; }"
     na 1024px+, tablet i mobile zachowuja swoje wersje bez zmian). */

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

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

.oai-site .oai-vehicle-damage-scope__intro {
	max-width: 720px;
}

.oai-site .oai-vehicle-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-vehicle-damage-scope__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-vehicle-damage-scope__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Mapa: hub + obszary */

.oai-site .oai-vehicle-damage-scope__map {
	margin: 48px 0 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-vehicle-damage-scope__hub {
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	margin: 0 auto 32px;
	padding: 14px 24px;
	box-sizing: border-box;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-vehicle-damage-scope__hub-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--oai-color-white);
}

.oai-site .oai-vehicle-damage-scope__areas {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
	padding: 0 0 0 24px;
	list-style: none;
	border-left: 2px solid rgba(33, 225, 253, 0.4);
}

.oai-site .oai-vehicle-damage-scope__area {
	position: relative;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-vehicle-damage-scope__area::before {
	content: "";
	position: absolute;
	top: 10px;
	left: -26px;
	width: 12px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-scope__area-heading {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-scope__area-body {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-scope__note {
	margin: 40px 0 0;
	max-width: 720px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: hub nad siatka 2x2, wspolna pozioma oz pod hubem */

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

	.oai-site .oai-vehicle-damage-scope__heading {
		font-size: 1.75rem;
	}

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

	.oai-site .oai-vehicle-damage-scope__map {
		margin-top: 56px;
	}

	.oai-site .oai-vehicle-damage-scope__hub {
		position: relative;
		margin-bottom: 40px;
	}

	.oai-site .oai-vehicle-damage-scope__hub::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		width: 2px;
		height: 24px;
		background-color: rgba(33, 225, 253, 0.4);
		transform: translateX(-50%);
	}

	.oai-site .oai-vehicle-damage-scope__areas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px 40px;
		padding: 0;
		border-left: none;
	}

	.oai-site .oai-vehicle-damage-scope__area::before {
		top: -16px;
		left: 0;
		width: 2px;
		height: 14px;
		background-color: rgba(33, 225, 253, 0.4);
	}
}

/* Desktop od 1024px: siatka 3-kolumnowa, hub w srodku rozciagniety na dwa
   wiersze, dwa obszary po lewej i dwa po prawej (patrz komentarz na
   poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-scope__map {
		position: relative;
		/* Matematyczny srodek (50%) mapy wypada optycznie za blisko prawej
		   kolumny (szeroki column-gap 260px jest odczuwany asymetrycznie
		   wzgledem samego prostokata huba). Lokalna zmienna przesuwa hub w
		   lewo, wylacznie w wariancie desktopowym. Nie dotyczy tabletu ani
		   mobile - tam hub nie jest pozycjonowany przez ta zmienna. Wartosc
		   -14px z poprzedniej korekty okazala sie wciaz za mala, dolozono
		   kolejne -26px (razem -40px). */
		--oai-vehicle-damage-map-center-offset: -40px;
	}

	.oai-site .oai-vehicle-damage-scope__hub {
		position: absolute;
		top: 50%;
		left: calc(50% + var(--oai-vehicle-damage-map-center-offset));
		transform: translate(-50%, -50%);
		z-index: 1;
		margin: 0;
	}

	/* ".hub::after" z bloku tabletowego (768px) uzywa min-width, wiec bez
	   jawnego wylaczenia nadal obowiazywalby rowniez na desktopie (min-width
	   nie jest zakresem 768-1023px, tylko "od 768px w gore") - to on byl
	   zrodlem pozostalego pionowego paska pod hubem po poprzedniej korekcie. */
	.oai-site .oai-vehicle-damage-scope__hub::after {
		display: none;
	}

	.oai-site .oai-vehicle-damage-scope__areas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 260px;
		row-gap: 40px;
	}

	/* Hub jest teraz samodzielnym punktem mapy, bez krzyza i bez lacznikow
	   dotykajacych jego krawedzi. Pionowa os huba (wczesniejsze
	   ::before/::after) oraz poziome laczniki obszarow wskazujace w strone
	   huba (wczesniejsze ::before na .area--1/2/3/4) zostaly usuniete -
	   dla obszarow oznacza to jawne wylaczenie pseudo-elementu w tym
	   wariancie, zeby nie odziedziczyl pozycji z bazowych/tabletowych
	   regul (tam ::before pozostaje bez zmian). */
	.oai-site .oai-vehicle-damage-scope__area::before {
		display: none;
	}

	.oai-site .oai-vehicle-damage-scope__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 3: "Szkoda z OC sprawcy czy z wlasnego AC?". Inny rytm niz Sekcja
   2 (bez granatowego huba i siatki 2x2): jeden maly punkt startowy
   "ZRODLO OCHRONY", pionowa linia w dol do wspolnego modulu, ktory sam w
   sobie dzieli sie na dwie sciezki (OC sprawcy / wlasne AC). Podzial jest
   realizowany wewnatrz jednego wspolnego kontenera (border/tlo), nie przez
   dwie osobne karty.

   Tlo sekcji jest biale (na przemian z jasnym odcieniem Sekcji 2, zgodnie
   z konwencja naprzemiennych tel juz stosowana na tej i siostrzanych
   stronach).

   WAZNE (wniosek z poprawki Sekcji 2): reguly na progu @media
   (min-width: 768px) obowiazuja rowniez na desktopie, poniewaz min-width
   nie jest zakresem - kazda wlasciwosc wprowadzona na 768px, ktora nie
   powinna dzialac od 1024px w gore, musi zostac jawnie zresetowana w
   bloku @media (min-width: 1024px), a nie tylko pominieta.

   Trzy uklady na tym samym DOM (zrodlo, sciezka OC, "LUB", sciezka AC,
   domkniecie):

   - Mobile (ponizej 768px): ".or" ("LUB") widoczne, obie sciezki uloha sie
     pionowo w jednym module, oddzielone cienka pozioma linia (border-top
     na ".path--ac").

   - Tablet od 768px: wieksza typografia, ".or" ukryte (display:none),
     uklad pozostaje pionowy - dwie sciezki obok siebie wymagalyby zbyt
     waskich kolumn ponizej 1024px, wiec nie sa wymuszane "za wszelka
     cene", zgodnie z wprost okreslonym wymaganiem tego zadania.

   - Desktop od 1024px: ".module" przechodzi na uklad dwukolumnowy
     (grid-template-columns: minmax(0,1fr) minmax(0,1fr)) z cienka
     pionowa granica miedzy sciezkami (border-left na ".path--ac", nie
     border-top) oraz subtelnie innym tlem prawej sciezki. Pozioma linia
     dzielaca z ukladu ponizej 1024px jest jawnie wylaczana
     (border-top: none), zeby nie "przeciekla" razem z pionowa. */

.oai-site .oai-vehicle-damage-insurance-source {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 20px;
	background-color: var(--oai-color-white);
}

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

.oai-site .oai-vehicle-damage-insurance-source__intro {
	max-width: 720px;
}

.oai-site .oai-vehicle-damage-insurance-source__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-vehicle-damage-insurance-source__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-vehicle-damage-insurance-source__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Diagram: punkt startowy + wspolny modul z dwiema sciezkami */

.oai-site .oai-vehicle-damage-insurance-source__diagram {
	margin: 48px 0 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-vehicle-damage-insurance-source__source {
	position: relative;
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	margin: 0 auto 40px;
	padding: 10px 20px;
	box-sizing: border-box;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--oai-color-navy);
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: 999px;
}

.oai-site .oai-vehicle-damage-insurance-source__source::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: 24px;
	background-color: rgba(33, 225, 253, 0.4);
	transform: translateX(-50%);
}

.oai-site .oai-vehicle-damage-insurance-source__module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px;
	background-color: rgba(1, 2, 66, 0.02);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-vehicle-damage-insurance-source__path {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-vehicle-damage-insurance-source__path--ac {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-damage-insurance-source__path-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

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

.oai-site .oai-vehicle-damage-insurance-source__path-body {
	margin: 0 0 16px;
	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-vehicle-damage-insurance-source__path-check {
	margin: 0;
	max-width: 100%;
	padding-left: 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	border-left: 2px solid var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-insurance-source__or {
	margin: 0;
	padding: 12px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-vehicle-damage-insurance-source__note {
	margin: 40px 0 0;
	max-width: 720px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, uklad pozostaje pionowy (patrz
   komentarz na poczatku bloku), "LUB" ukryte */

@media (min-width: 768px) {
	.oai-site .oai-vehicle-damage-insurance-source {
		padding: 88px 40px;
	}

	.oai-site .oai-vehicle-damage-insurance-source__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-vehicle-damage-insurance-source__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-vehicle-damage-insurance-source__diagram {
		margin-top: 56px;
	}

	.oai-site .oai-vehicle-damage-insurance-source__path {
		padding: 32px 40px;
	}

	.oai-site .oai-vehicle-damage-insurance-source__or {
		display: none;
	}
}

/* Desktop od 1024px: modul przechodzi na dwie kolumny obok siebie, pionowa
   granica zamiast poziomej (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-insurance-source__module {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-vehicle-damage-insurance-source__path--ac {
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
		background-color: rgba(33, 225, 253, 0.03);
	}

	/* Lewa linia kontrolna zostaje bez zmian - nastepuje naturalnie
	   bezposrednio po swoim (dluzszym, trzywierszowym) opisie, dzieki
	   marginesowi ".path-body { margin: 0 0 16px; }".

	   Prawa linia kontrolna ma zaczynac sie o jeden wiersz nizej (na
	   wysokosci drugiego wiersza lewej linii). Poprzednia proba
	   ("margin-top: 1.5em" na samej linii kontrolnej, bez ruszania opisu)
	   nie dawala pelnego efektu, poniewaz margines dolny opisu (16px) i
	   margines gorny linii kontrolnej to sasiadujace marginesy pionowe
	   dwoch blokow w normalnym przeplywie - w CSS takie marginesy sie
	   zlewaja (collapse) do wiekszej z dwoch wartosci, a nie sumuja, wiec
	   realny odstep rosl tylko z 16px do 21px (1.5em przy font-size 14px),
	   a nie o pelny dodatkowy wiersz. Zamiast polegac na zlewaniu sie
	   marginesow, dolny margines opisu jest zerowany wylacznie w prawej
	   sciezce, a caly zamierzony odstep (dotychczasowe 16px + wysokosc
	   jednego wiersza 1.45em) jest ustawiany jawnie, w calosci, jako
	   margines gorny linii kontrolnej - bez ryzyka zlewania marginesow.
	   Selektory celuja wylacznie w prawa sciezke przez istniejacy
	   modyfikator ".path--ac", bez nowej klasy w PHP i bez dotykania
	   lewej sciezki. */
	.oai-site .oai-vehicle-damage-insurance-source__path--ac .oai-vehicle-damage-insurance-source__path-body {
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-insurance-source__path--ac .oai-vehicle-damage-insurance-source__path-check {
		margin-top: calc(16px + 1.45em);
	}

	.oai-site .oai-vehicle-damage-insurance-source__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 4: "Szkoda czesciowa czy szkoda calkowita?". Pionowa plansza
   kwalifikacji, inny rytm niz Sekcja 2 (mapa) i Sekcja 3 (dwudzielny
   modul OC/AC): jeden wspolny modul z trzema czesciami skladowymi -
   polem porownania dwoch wartosci na gorze, potem dwoma szerokimi
   wierszami wynikow (szkoda czesciowa / szkoda calkowita).

   WAZNE (wniosek z poprawek Sekcji 2 i 3): @media (min-width: ...) nie
   jest zakresem - kazda wlasciwosc, ktora nie powinna dzialac od
   wyzszego progu, musi zostac tam jawnie zresetowana, a marginesy
   sasiadujacych blokow w normalnym przeplywie CSS potrafia sie zlewac
   (collapse) do wiekszej z dwoch wartosci zamiast sumowac - stad w tym
   pliku gap w kontenerach flex/grid zamiast osobnych marginesow tam,
   gdzie to mozliwe.

   Tlo sekcji jest jasnym, chlodnym odcieniem (na przemian z bialym tlem
   Sekcji 3, zgodnie z konwencja naprzemiennych tel), a sam wspolny modul
   ma biale tlo i jedno wspolne obramowanie/border-radius, wiec wyroznia
   sie z tla sekcji.

   Trzy uklady na tym samym DOM (compare, outcome--partial,
   outcome--total, note):

   - Mobile (ponizej 768px) i Tablet (od 768px): pole porownania i oba
     wiersze wynikow uloha sie w pelni pionowo w jednym wspolnym module,
     oddzielone cienkimi poziomymi liniami. Sciezki nie sa wymuszane obok
     siebie ponizej 1024px, zgodnie z wprost okreslonym wymaganiem tego
     zadania - tablet dostaje wylacznie wieksza typografie i odstepy.

   - Desktop od 1024px: pole porownania przechodzi w wiersz (wartosc / A /
     wartosc), a kazdy wiersz wyniku staje sie siatka 3 stref
     (oznaczenie+H3 / opis / pytanie kontrolne, z linkiem redakcyjnym pod
     pytaniem w drugim wierszu) przez jawne przypisanie grid-column i
     grid-row do istniejacych klas dzieci - bez dodatkowego markupu
     opakowujacego. */

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

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

.oai-site .oai-vehicle-damage-loss-qualification__intro {
	max-width: 720px;
}

.oai-site .oai-vehicle-damage-loss-qualification__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-vehicle-damage-loss-qualification__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-vehicle-damage-loss-qualification__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Wspolny modul */

.oai-site .oai-vehicle-damage-loss-qualification__module {
	margin: 48px 0 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

/* Pole porownania */

.oai-site .oai-vehicle-damage-loss-qualification__compare {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-damage-loss-qualification__compare-label {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-loss-qualification__compare-values {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-loss-qualification__compare-value {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-loss-qualification__compare-link {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

/* Wiersze wynikow */

.oai-site .oai-vehicle-damage-loss-qualification__outcome {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-vehicle-damage-loss-qualification__outcome--total {
	background-color: rgba(1, 2, 66, 0.02);
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-damage-loss-qualification__outcome-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-loss-qualification__outcome-heading {
	margin: 0 0 12px;
	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-vehicle-damage-loss-qualification__outcome-body {
	margin: 0 0 16px;
	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-vehicle-damage-loss-qualification__outcome-question {
	margin: 0;
	max-width: 100%;
	padding-left: 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	border-left: 2px solid var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-loss-qualification__outcome-link-wrap {
	margin: 0 0 20px;
	max-width: 100%;
}

.oai-site .oai-vehicle-damage-loss-qualification__outcome-link,
.oai-site .oai-vehicle-damage-loss-qualification__outcome-link:visited {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	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: color var(--oai-transition-fast), text-decoration-thickness var(--oai-transition-fast);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-loss-qualification__outcome-link:hover,
.oai-site .oai-vehicle-damage-loss-qualification__outcome-link:active {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2.5px;
}

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

.oai-site .oai-vehicle-damage-loss-qualification__note {
	margin: 40px 0 0;
	max-width: 720px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia i odstepy, uklad pozostaje w pelni
   pionowy (patrz komentarz na poczatku bloku) */

@media (min-width: 768px) {
	.oai-site .oai-vehicle-damage-loss-qualification {
		padding: 88px 40px;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__module {
		margin-top: 56px;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__compare {
		padding: 32px 40px;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome {
		padding: 32px 40px;
	}
}

/* Desktop od 1024px: pole porownania w jednym wierszu, kazdy wiersz
   wyniku jako siatka 3 stref (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-loss-qualification__compare-values {
		flex-direction: row;
		justify-content: center;
		gap: 20px;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.2fr);
		column-gap: 40px;
		row-gap: 12px;
		align-items: start;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome-label {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome-heading {
		grid-column: 1;
		grid-row: 2;
		margin-bottom: 0;
	}

	/* Lewa strefa wiersza "Szkoda calkowita" ma trzy elementy (oznaczenie,
	   H3, link), nie dwa jak wiersz "Szkoda czesciowa" - stad osobne
	   przypisanie wysokosci opisu (kolumna 2) dla kazdego wariantu, zeby
	   opis rozciagal sie dokladnie na tyle wierszy, ile faktycznie
	   zajmuje lewa strefa danego wiersza. */
	.oai-site .oai-vehicle-damage-loss-qualification__outcome--partial .oai-vehicle-damage-loss-qualification__outcome-body {
		grid-column: 2;
		grid-row: 1 / 3;
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome--total .oai-vehicle-damage-loss-qualification__outcome-body {
		grid-column: 2;
		grid-row: 1 / 4;
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome-question {
		grid-column: 3;
		grid-row: 1;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__outcome-link-wrap {
		grid-column: 1;
		grid-row: 3;
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-loss-qualification__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 5: "Co znajduje sie w kosztorysie naprawy pojazdu?". Przekroj
   jednego stylizowanego dokumentu (nie otwarta mapa Sekcji 2, nie modul
   dwoch sciezek Sekcji 3, nie plansza kwalifikacji Sekcji 4, nie siatka
   piecu kart). DOM w kolejnosci ".intro" -> ".document" -> ".outro"
   odpowiada wprost wymaganej kolejnosci mobilnej (eyebrow, H2, lead,
   dokument, domkniecie, link) i jest jednoczesnie kolejnoscia odczytu na
   kazdej szerokosci. Na desktopie ".layout" staje sie siatka
   grid-template-areas "intro document" / "outro document", wiec ".intro"
   i ".outro" laduja wizualnie w tej samej lewej kolumnie (bez zmiany DOM,
   bez flex order), a ".document" zajmuje prawa kolumne na obu wierszach.

   Tlo sekcji jest biale (na przemian z jasnym odcieniem Sekcji 4, zgodnie
   z konwencja naprzemiennych tel), a sam dokument ma wlasne, jasne tlo z
   jednym wspolnym obramowaniem i border-radius, wiec wyroznia sie z tla
   sekcji na kazdej szerokosci.

   Trzy uklady na tym samym DOM:

   - Mobile (ponizej 768px) i Tablet (od 768px do 1023px): ".layout"
     pozostaje zwyklym pionowym przeplywem (intro, potem dokument, potem
     outro), a wewnatrz dokumentu kazda strefa ma H3 nad opisem. Strefy nie
     sa wymuszane obok siebie ponizej 1024px, zgodnie z wprost okreslonym
     wymaganiem tego zadania - tablet dostaje wylacznie wieksza typografie
     i odstepy.

   - Desktop od 1024px: ".layout" przechodzi w siatke 2 kolumny (~40/60)
     przez grid-template-areas, a kazda strefa dokumentu staje sie wlasna
     mala siatka 2 kolumny (H3 waska lewa, opis szersza prawa). */

.oai-site .oai-vehicle-damage-estimate-structure {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 20px;
	background-color: var(--oai-color-white);
}

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

.oai-site .oai-vehicle-damage-estimate-structure__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-estimate-structure__intro {
	max-width: 640px;
}

/* Glowny eyebrow sekcji i oznaczenie ".explainer-label" dziela dokladnie
   ta sama typografie (font-size, font-weight, letter-spacing,
   text-transform, kolor) przez jedna wspolna regule - jedno zrodlo
   prawdy zamiast dwoch osobnych wartosci "na oko". Marginesy i pozycja
   pozostaja osobne dla kazdej klasy ponizej. */
.oai-site .oai-vehicle-damage-estimate-structure__eyebrow,
.oai-site .oai-vehicle-damage-estimate-structure__explainer-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-estimate-structure__eyebrow {
	margin: 0 0 16px;
}

.oai-site .oai-vehicle-damage-estimate-structure__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-vehicle-damage-estimate-structure__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;
}

/* Stylizowany dokument */

.oai-site .oai-vehicle-damage-estimate-structure__document {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
	background-color: rgba(1, 2, 66, 0.02);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-vehicle-damage-estimate-structure__document-label {
	margin: 0 0 20px;
	padding-bottom: 16px;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy);
	border-bottom: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-estimate-structure__zones {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-estimate-structure__zone {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 16px 0 16px 16px;
	border-left: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-estimate-structure__zone + .oai-vehicle-damage-estimate-structure__zone {
	margin-top: 16px;
	border-top: 1px solid var(--oai-color-border);
	padding-top: 24px;
}

.oai-site .oai-vehicle-damage-estimate-structure__zone-heading {
	margin: 0 0 6px;
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-estimate-structure__zone-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;
}

/* Nowy blok wyjasniajacy "JAK POWSTAJE WYCENA". Oznaczenie dzieli
   dokladnie ta sama typografie co glowny eyebrow sekcji (wspolna regula
   przy definicji ".eyebrow" powyzej) - wlasny, osobny margines ponizej
   pozostaje jedyna roznica wzgledem glownego eyebrow. */

.oai-site .oai-vehicle-damage-estimate-structure__explainer {
	max-width: 640px;
}

.oai-site .oai-vehicle-damage-estimate-structure__explainer-label {
	margin: 0 0 12px;
}

.oai-site .oai-vehicle-damage-estimate-structure__explainer-body {
	margin: 0 0 12px;
	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-vehicle-damage-estimate-structure__explainer-body:last-child {
	margin-bottom: 0;
}

/* Domkniecie i link */

.oai-site .oai-vehicle-damage-estimate-structure__note {
	margin: 0 0 20px;
	max-width: 640px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-vehicle-damage-estimate-structure__link-wrap {
	margin: 0;
	max-width: 100%;
}

.oai-site .oai-vehicle-damage-estimate-structure__link,
.oai-site .oai-vehicle-damage-estimate-structure__link:visited {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	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: none;
	transition: color var(--oai-transition-fast), text-decoration-thickness var(--oai-transition-fast);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-estimate-structure__link:hover,
.oai-site .oai-vehicle-damage-estimate-structure__link:active {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2.5px;
}

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

/* Tablet od 768px: wieksza typografia i odstepy, uklad pozostaje w pelni
   pionowy (patrz komentarz na poczatku bloku) */

@media (min-width: 768px) {
	.oai-site .oai-vehicle-damage-estimate-structure {
		padding: 88px 40px;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__document {
		padding: 32px 40px;
	}
}

/* Desktop od 1024px: uklad dwukolumnowy przez grid-template-areas, kazda
   strefa dokumentu jako mala siatka H3/opis (patrz komentarz na poczatku
   bloku) */

@media (min-width: 1024px) {
	/* ".document" rozciaga sie na wszystkie wiersze siatki (grid-row
	   spanning). Wiersze "intro" i "explainer" uzywaja
	   "minmax(0, max-content)", wiec sa ograniczone do wlasnej, naturalnej
	   zawartosci i nie sa sztucznie powiekszane przez rozpiety dokument
	   (lekcja z wczesniejszej poprawki: implicitne wiersze "auto" rosna,
	   zeby pomiescic element rozpiety na kilka torow, co tworzylo puste
	   miejsce nad ".outro"). Trzeci wiersz "outro" jest celowo elastyczny
	   ("minmax(0, 1fr)") - to on, nie marginesy elementu ".outro", pochlania
	   nadmiarowa wysokosc, gdy ".document" jest wyzszy niz "intro" +
	   "explainer" razem wziete. ".outro" dostaje "align-self: end", wiec w
	   obrebie tego (czasem wysokiego) wiersza jego tresc siada przy samym
	   dole - czyli mniej wiecej na wysokosci dolu dokumentu - bez
	   pozycjonowania absolutnego, ujemnych marginesow ani
	   "margin-top: auto" na elemencie flex. "align-content: start" pilnuje,
	   zeby ewentualny nadmiar wysokosci calego kontenera siatki (gdy
	   document jest krotszy niz suma wierszy) nie byl rozkladany miedzy
	   wiersze w nieprzewidywalny sposob. */
	.oai-site .oai-vehicle-damage-estimate-structure__layout {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		grid-template-rows: minmax(0, max-content) minmax(0, max-content) minmax(0, 1fr);
		grid-template-areas:
			"intro document"
			"explainer document"
			"outro document";
		column-gap: 56px;
		row-gap: 32px;
		align-items: start;
		align-content: start;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__intro {
		grid-area: intro;
		max-width: 100%;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__document {
		grid-area: document;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__explainer {
		grid-area: explainer;
		max-width: 100%;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__outro {
		grid-area: outro;
		align-self: end;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__note {
		max-width: 100%;
	}

	/* Kompaktowanie dokumentu wylacznie na desktopie (tablet i mobile
	   zachowuja bazowe, niezmienione odstepy powyzej w tym pliku):
	   naglowek dokumentu ok. -19% (16px->13px padding, 20px->16px margin),
	   strefy ok. -25% (16px->12px, 16px->12px, 24px->18px). */
	.oai-site .oai-vehicle-damage-estimate-structure__document-label {
		margin-bottom: 16px;
		padding-bottom: 13px;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__zone {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: 24px;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__zone + .oai-vehicle-damage-estimate-structure__zone {
		margin-top: 12px;
		padding-top: 18px;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__zone-heading {
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-estimate-structure__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 6: "Czy kosztorys naprawy tworzy spojna calosc?". Pelnoszerokosciowa
   granatowa sekcja, wyraznie kontrastujaca z jasna Sekcja 5 - inny rytm niz
   otwarta mapa Sekcji 2, dwie sciezki Sekcji 3, plansza kwalifikacji
   Sekcji 4 i stylizowany dokument Sekcji 5. Jeden wspolny panel (jedno
   obramowanie, jeden border-radius) z czterema relacjami, bez czterech
   osobnych kart - kolory i wzorzec ciemnego panelu wzorowane na juz
   zaakceptowanym ".oai-denial-framework__list" strony
   /odmowa-wyplaty-odszkodowania/ (border rgba(255,255,255,0.16), tekst
   rgba(255,255,255,0.8) i rgba(255,255,255,0.75), naglowki biale, akcent
   cyjanowy).

   Linie dzielace pola siatki 2x2 sa realizowane realnymi
   border-right/border-bottom na wlasciwych polach (przez modyfikatory
   __area--1/2/3/4), nie pseudo-elementami wychodzacymi poza kontener -
   zgodnie z wprost wskazanym w tym zadaniu preferowanym mechanizmem.

   Dwa uklady na tym samym DOM (cztery pola w kolejnosci 1-2-3-4, ta sama
   kolejnosc odczytu wszedzie):

   - Mobile i Tablet (ponizej 1024px): panel w jednej kolumnie, pola
     oddzielone wylacznie pozioma linia (border-bottom), ostatnie pole bez
     dolnej linii. Zgodnie z wprost okreslonym wymaganiem uklad 2x2 nie
     jest wymuszany ponizej 1024px.

   - Desktop od 1024px: panel jako siatka 2 kolumny x 2 wiersze
     (minmax(0, 1fr) minmax(0, 1fr)), pole 1 (lewy-gorny) dostaje
     border-right i border-bottom, pole 2 (prawy-gorny) tylko
     border-bottom, pole 3 (lewy-dolny) tylko border-right, pole 4
     (prawy-dolny) bez dodatkowych linii. */

.oai-site .oai-vehicle-damage-estimate-consistency {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 20px;
	background-color: var(--oai-color-navy);
}

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

.oai-site .oai-vehicle-damage-estimate-consistency__intro {
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-vehicle-damage-estimate-consistency__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-vehicle-damage-estimate-consistency__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-vehicle-damage-estimate-consistency__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Wspolny panel z czterema relacjami */

.oai-site .oai-vehicle-damage-estimate-consistency__panel {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--oai-radius-m);
}

.oai-site .oai-vehicle-damage-estimate-consistency__area {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.oai-site .oai-vehicle-damage-estimate-consistency__area--4 {
	border-bottom: none;
}

.oai-site .oai-vehicle-damage-estimate-consistency__area-heading {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-vehicle-damage-estimate-consistency__area-question {
	margin: 0;
	max-width: 100%;
	padding-left: 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	border-left: 2px solid var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-estimate-consistency__note {
	margin: 40px 0 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

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

@media (min-width: 768px) {
	.oai-site .oai-vehicle-damage-estimate-consistency {
		padding: 88px 40px;
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__area {
		padding: 28px 32px;
	}
}

/* Desktop od 1024px: panel jako siatka 2x2, realne border-right/
   border-bottom zamiast pseudo-elementow (patrz komentarz na poczatku
   bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-estimate-consistency__panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__area {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
		border-right: none;
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__area--1 {
		border-right: 1px solid rgba(255, 255, 255, 0.16);
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__area--2 {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__area--3 {
		border-right: 1px solid rgba(255, 255, 255, 0.16);
		border-bottom: none;
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__area--4 {
		border-bottom: none;
	}

	.oai-site .oai-vehicle-damage-estimate-consistency__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 7: "Co sprawdzic w decyzji ubezpieczyciela?". Powrot do jasnego
   tla, wyrazny kontrast z granatowa Sekcja 6. Jeden wspolny modul (jedno
   obramowanie, jeden border-radius, jasne tlo jak dokument Sekcji 5) z
   trzema poziomymi obszarami rozdzielonymi wylacznie dwiema poziomymi
   liniami - bez trzech osobnych kart, ikon i numeracji.

   Trzy uklady na tym samym DOM (obszary w kolejnosci 1-2-3, ta sama
   kolejnosc odczytu wszedzie):

   - Mobile i Tablet (ponizej 1024px): kazdy obszar w jednej kolumnie
     (H3, wprowadzenie, potem dwa pytania), oddzielone pozioma linia,
     ostatni obszar bez dolnej linii. Blok "SPRAWDZ TAKZE" ma linki w
     jednej kolumnie, bez pionowych separatorow (usuwane na tej
     szerokosci zgodnie z wprost okreslonym wymaganiem).

   - Desktop od 1024px: kazdy obszar staje sie siatka 2 kolumny
     (minmax(0,1fr) minmax(0,2fr) - lewa waska strefa z H3 i
     wprowadzeniem, prawa szersza strefa z dwoma pytaniami uloha pionowo,
     oddzielonymi cienka pozioma linia miedzy nimi). Blok linkow
     przechodzi w jeden wiersz z pionowymi separatorami miedzy linkami. */

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

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

.oai-site .oai-vehicle-damage-decision-review__intro {
	max-width: 640px;
	margin: 0 0 40px;
}

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

/* Wspolny modul z trzema obszarami */

.oai-site .oai-vehicle-damage-decision-review__module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background-color: rgba(1, 2, 66, 0.02);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-vehicle-damage-decision-review__area {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-damage-decision-review__area--3 {
	border-bottom: none;
}

.oai-site .oai-vehicle-damage-decision-review__area-left {
	max-width: 100%;
	margin: 0 0 16px;
}

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

.oai-site .oai-vehicle-damage-decision-review__area-lead {
	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-vehicle-damage-decision-review__area-right {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-decision-review__question {
	margin: 0;
	max-width: 100%;
	padding: 12px 0 12px 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	border-left: 2px solid var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-decision-review__question + .oai-vehicle-damage-decision-review__question {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-damage-decision-review__note {
	margin: 40px 0 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

/* Blok "SPRAWDZ TAKZE" */

.oai-site .oai-vehicle-damage-decision-review__links {
	margin: 40px 0 0;
	max-width: 100%;
}

.oai-site .oai-vehicle-damage-decision-review__links-label {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-decision-review__links-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-decision-review__link,
.oai-site .oai-vehicle-damage-decision-review__link:visited {
	display: inline;
	max-width: 100%;
	width: fit-content;
	font-size: 0.9375rem;
	font-weight: 600;
	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: none;
	transition: color var(--oai-transition-fast), text-decoration-thickness var(--oai-transition-fast);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-decision-review__link:hover,
.oai-site .oai-vehicle-damage-decision-review__link:active {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2.5px;
}

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

/* Tablet od 768px: wieksza typografia i odstepy, uklad obszarow pozostaje
   jednokolumnowy (patrz komentarz na poczatku bloku) */

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

	.oai-site .oai-vehicle-damage-decision-review__heading {
		font-size: 1.75rem;
	}

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

	.oai-site .oai-vehicle-damage-decision-review__area {
		padding: 32px;
	}
}

/* Desktop od 1024px: kazdy obszar jako siatka 2 kolumny, blok linkow w
   jednym wierszu z pionowymi separatorami (patrz komentarz na poczatku
   bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-decision-review__area {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: 40px;
		align-items: start;
	}

	.oai-site .oai-vehicle-damage-decision-review__area-left {
		margin: 0;
	}

	.oai-site .oai-vehicle-damage-decision-review__links-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 32px;
	}

	.oai-site .oai-vehicle-damage-decision-review__link {
		position: relative;
	}

	.oai-site .oai-vehicle-damage-decision-review__link::before {
		content: "";
		position: absolute;
		top: 2px;
		bottom: 2px;
		left: -16px;
		width: 1px;
		background-color: var(--oai-color-border);
	}

	.oai-site .oai-vehicle-damage-decision-review__link:first-child::before {
		display: none;
	}

	.oai-site .oai-vehicle-damage-decision-review__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 8: "Czy naprawiony pojazd moze stracic na wartosci?". Krotszy
   przerywnik po rozbudowanej Sekcji 7 - jasne, chlodne tlo (ten sam odcien
   rgba(1, 2, 66, 0.03) co Sekcje 2 i 4, zgodnie z konwencja naprzemiennych
   tel: biala Sekcja 7 -> tinted Sekcja 8), pod intro jeden pelnoszerokosciowy
   granatowy pas z trzyczesciowym komunikatem, pod pasem jeden jasny modul
   czynnikow jako semantyczna lista ul/li.

   Trzy uklady na tym samym DOM (intro, potem pas z trzema czesciami w
   kolejnosci 1-2-3, potem modul czynnikow z czterema li w kolejnosci
   1-2-3-4, potem domkniecie, potem nota OC/AC - ta sama kolejnosc odczytu
   wszedzie):

   - Mobile (ponizej 768px): pas jest jedna powierzchnia, trzy czesci
     komunikatu uloha sie pionowo z naturalnymi odstepami, bez osobnych tel
     i ramek. Modul czynnikow w jednej kolumnie, elementy rozdzielone
     wylacznie pozioma linia (border-bottom), ostatni element bez dolnej
     linii.

   - Tablet od 768px: wieksza typografia i odstepy, pas pozostaje pionowym
     stosem trzech czesci (nie wymuszamy jednego wiersza ponizej 1024px,
     zgodnie z wprost okreslonym wymaganiem tego zadania). Modul czynnikow
     przechodzi w siatke 2 kolumny x 2 wiersze: pionowa linia miedzy
     kolumnami na elementach 1 i 3 (border-right), poziomsa linia miedzy
     wierszami na elementach 1 i 2 (border-bottom), element 4 bez linii po
     prawej i na dole.

   - Desktop od 1024px: pas przechodzi w jeden poziomy wiersz przez CSS
     Grid (minmax(0, 1fr) na kazdej kolumnie, proporcje kolumn w przyblizeniu
     38% / 20% / 42% przez wartosci fr, nie wymuszane sztywno kosztem
     czytelnosci). Modul czynnikow przechodzi w jeden wiersz czterech rownych
     kolumn z pionowymi liniami miedzy nimi (border-right na wszystkich poza
     ostatnim elementem). */

.oai-site .oai-vehicle-damage-market-value-loss {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

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

.oai-site .oai-vehicle-damage-market-value-loss__intro {
	max-width: 640px;
	margin: 0 0 32px;
}

.oai-site .oai-vehicle-damage-market-value-loss__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-vehicle-damage-market-value-loss__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-vehicle-damage-market-value-loss__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;
}

/* Granatowy pas z trzyczesciowym komunikatem */

.oai-site .oai-vehicle-damage-market-value-loss__banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 0 32px;
	padding: 32px 24px;
	text-align: center;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-vehicle-damage-market-value-loss__banner-part {
	margin: 0;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-market-value-loss__banner-connector {
	margin: 0;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Modul czynnikow */

.oai-site .oai-vehicle-damage-market-value-loss__factors {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 0 32px;
	padding: 24px 20px;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-vehicle-damage-market-value-loss__factors-label {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-market-value-loss__factors-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-vehicle-damage-market-value-loss__factors-item {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 14px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--oai-color-navy);
	border-bottom: 1px solid var(--oai-color-border);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-market-value-loss__factors-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.oai-site .oai-vehicle-damage-market-value-loss__factors-item:first-child {
	padding-top: 0;
}

/* Domkniecie i nota OC/AC */

.oai-site .oai-vehicle-damage-market-value-loss__note {
	margin: 0 0 20px;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy);
}

.oai-site .oai-vehicle-damage-market-value-loss__disclaimer {
	margin: 0;
	max-width: 640px;
	padding-left: 12px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	border-left: 2px solid var(--oai-color-cyan);
}

/* Tablet od 768px: wieksza typografia i odstepy, pas pozostaje pionowym
   stosem, modul czynnikow przechodzi w siatke 2x2 (patrz komentarz na
   poczatku bloku) */

@media (min-width: 768px) {
	.oai-site .oai-vehicle-damage-market-value-loss {
		padding: 80px 40px;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__banner {
		margin-bottom: 40px;
		padding: 40px 48px;
		gap: 20px;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__banner-part {
		font-size: 1.3125rem;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__banner-connector {
		font-size: 0.875rem;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors {
		margin-bottom: 40px;
		padding: 8px 32px;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-list {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item {
		padding: 20px 24px;
		border-bottom: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item:nth-child(odd) {
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item:nth-last-child(-n+2) {
		border-bottom: none;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item:first-child,
	.oai-site .oai-vehicle-damage-market-value-loss__factors-item:nth-child(2) {
		padding-top: 0;
	}
}

/* Desktop od 1024px: pas w jednym poziomym wierszu przez CSS Grid, modul
   czynnikow w jednym wierszu czterech kolumn (patrz komentarz na poczatku
   bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-market-value-loss__banner {
		flex-direction: row;
		display: grid;
		grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 2fr);
		align-items: center;
		gap: 24px;
		text-align: left;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__banner-connector {
		text-align: center;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__banner-part--second {
		text-align: right;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item {
		border-bottom: none;
		border-right: 1px solid var(--oai-color-border);
		padding: 8px 24px;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item:first-child {
		padding-left: 0;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__factors-item:last-child {
		border-right: none;
		padding-right: 0;
	}

	.oai-site .oai-vehicle-damage-market-value-loss__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 9: "Jakie dokumenty przygotowac do odwolania po szkodzie
   komunikacyjnej?". Jasne, biale tlo (powrot do bieli po tintowanej
   Sekcji 8, zgodnie z konwencja naprzemiennych tel). Jeden wspolny modul
   "teczki sprawy" z oznaczeniem "DOKUMENTACJA SPRAWY" na gorze i trzema
   dzialami pod nim - nie trzy osobne karty. Dzial 1 dostaje bardzo
   subtelnie inne tlo w obrebie tej samej wspolnej powierzchni (module ma
   overflow: hidden, wiec tlo dzialu 1 jest automatycznie przycinane do
   wspolnego border-radius na krawedziach, ktore akurat zajmuje).

   Wlasna typografia i wlasny CSS tej sekcji, nie kopia CSS Sekcji 8 strony
   /szkoda-majatkowa/ - zachowany jest wylacznie ten sam poradnikowy
   charakter i logika uzytkownika, zgodnie z wprost okreslonym wymaganiem
   tego zadania.

   Cztery uklady na tym samym DOM (label, potem trzy dzialy w kolejnosci
   1-2-3, kazdy z H3, wprowadzeniem i lista - ta sama kolejnosc odczytu
   wszedzie):

   - Mobile i wezszy tablet (ponizej 900px): dzialy w jednej kolumnie,
     oddzielone wylacznie pozioma linia (border-top na kolejnym dziale),
     pierwszy dzial bez gornej linii. Dwie kolumny na tym zakresie
     pogarszalyby czytelnosc, wiec nie sa wymuszane.

   - Szerszy tablet od 900px do 1023px: Dzial 1 na pelna szerokosc u gory,
     Dzial 2 i Dzial 3 obok siebie ponizej przez grid-template-areas (bez
     zmiany kolejnosci DOM), z poziomia linia pod Dzialem 1 i pionowa linia
     miedzy Dzialem 2 i Dzialem 3.

   - Desktop od 1024px: trzy rowne kolumny w jednym wierszu
     (minmax(0, 1fr) x 3), z dwiema subtelnymi pionowymi liniami miedzy
     kolumnami.

   Link do Gotowego Odwolania (".service-link") jawnie dziedziczy
   font-family, font-size i line-height z otaczajacego akapitu (wzorzec z
   ".oai-property-damage-documents__service-link" strony
   /szkoda-majatkowa/, zastosowany tu jako sama zasada, nie kopia CSS), a
   jego wyglad podkreslenia jest wspolny z juz zaakceptowanym wzorcem
   ciaglego cyjanowego podkreslenia z Sekcji 4, 5 i 7 tej strony
   (text-decoration-color: var(--oai-color-cyan),
   text-decoration-skip-ink: none). */

.oai-site .oai-vehicle-damage-appeal-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 20px;
	background-color: var(--oai-color-white);
}

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

.oai-site .oai-vehicle-damage-appeal-documents__intro {
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-vehicle-damage-appeal-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-vehicle-damage-appeal-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-vehicle-damage-appeal-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;
}

/* Wspolny modul "teczki sprawy" */

.oai-site .oai-vehicle-damage-appeal-documents__module {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
	background-color: rgba(1, 2, 66, 0.02);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-vehicle-damage-appeal-documents__module-label {
	margin: 0 0 20px;
	padding-bottom: 16px;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy);
	border-bottom: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-appeal-documents__departments {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-appeal-documents__department {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 20px 16px;
}

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

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

.oai-site .oai-vehicle-damage-appeal-documents__department-intro {
	margin: 0 0 14px;
	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-vehicle-damage-appeal-documents__department-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-vehicle-damage-appeal-documents__department-item {
	position: relative;
	max-width: 100%;
	padding-left: 16px;
	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-vehicle-damage-appeal-documents__department-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

/* Domkniecie i przejscie do uslugi */

.oai-site .oai-vehicle-damage-appeal-documents__closing {
	margin: 32px 0 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy);
}

.oai-site .oai-vehicle-damage-appeal-documents__service {
	margin: 16px 0 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-vehicle-damage-appeal-documents__service-link,
.oai-site .oai-vehicle-damage-appeal-documents__service-link:visited {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	font-weight: 600;
	display: inline;
	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: none;
	transition: color var(--oai-transition-fast), text-decoration-thickness var(--oai-transition-fast);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-appeal-documents__service-link:hover,
.oai-site .oai-vehicle-damage-appeal-documents__service-link:active {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2.5px;
}

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

/* Tablet od 768px: wieksza typografia i odstepy, dzialy wciaz w jednej
   kolumnie ponizej 900px (patrz komentarz na poczatku bloku) */

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

	.oai-site .oai-vehicle-damage-appeal-documents__heading {
		font-size: 1.75rem;
	}

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

	.oai-site .oai-vehicle-damage-appeal-documents__module {
		margin-top: 56px;
		padding: 32px;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department {
		padding: 24px 0;
	}
}

/* Szerszy tablet od 900px do 1023px: Dzial 1 na pelna szerokosc, Dzial 2 i
   Dzial 3 obok siebie ponizej (patrz komentarz na poczatku bloku) */

@media (min-width: 900px) and (max-width: 1023.98px) {
	.oai-site .oai-vehicle-damage-appeal-documents__departments {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"d1 d1"
			"d2 d3";
		column-gap: 40px;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department--1 {
		grid-area: d1;
		padding-bottom: 24px;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department--2 {
		grid-area: d2;
		padding-right: 24px;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department--3 {
		grid-area: d3;
		border-left: 1px solid var(--oai-color-border);
		padding-left: 24px;
	}
}

/* Desktop od 1024px: trzy rowne kolumny w jednym wierszu, dwie pionowe
   linie miedzy nimi (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-appeal-documents__departments {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 40px;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department {
		grid-area: auto;
		padding: 0 24px;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department:first-child {
		padding-left: 0;
	}

	.oai-site .oai-vehicle-damage-appeal-documents__department:last-child {
		padding-right: 0;
	}

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

	.oai-site .oai-vehicle-damage-appeal-documents__heading {
		font-size: 1.875rem;
	}
}

/* Sekcja 10: "Kiedy warto rozwazyc odwolanie po szkodzie komunikacyjnej?".
   Jasny, chlodny odcien tla (rgba(1, 2, 66, 0.03), ten sam co Sekcje 2, 4
   i 8), swiadomie inny niz biala Sekcja 9 tuz przed nia, zgodnie z wprost
   okreslonym wymogiem wyraznego oddzielenia. Jedna wspolna mapa siedmiu
   sygnalow (nie siedem kart), domkniecie jako zwykly akapit, a na koncu
   jeden ograniczony granatowy panel dzialania (nie pelnoszerokosciowy pas
   jak Sekcja 6) z przyciskiem prowadzacym do Gotowego Odwolania.

   Przycisk dziedziczy ksztalt, padding, min-height i logike focus-visible
   z bazowych klas .oai-cta .oai-cta--primary (uzytych juz w Hero tej
   strony), ale nadpisuje kolor tla i tekstu na biel/granat - dokladnie ten
   sam, juz zaakceptowany wzorzec co ".oai-property-damage-appeal__cta"
   strony /szkoda-majatkowa/ (nadpisanie tylko background/color na
   ciemnym tle modulu dzialania), ponownie uzyty zamiast tworzenia nowego
   wariantu przycisku.

   Trzy uklady na tym samym DOM (map-label, siedem sygnalow w kolejnosci
   1-7, domkniecie, action-eyebrow, H3, action-content, przycisk,
   microcopy - ta sama kolejnosc odczytu wszedzie):

   - Mobile i tablet (ponizej 1024px): lista sygnalow w jednej kolumnie,
     rozdzielone wylacznie pozioma linia (border-top na kolejnym
     elemencie), pierwszy sygnal bez gornej linii. Modul dzialania uklada
     sie pionowo, przycisk na mobile na pelna szerokosc (patrz blok
     ponizej 768px), na tablecie przechodzi na szerokosc dopasowana do
     tresci (patrz blok od 768px, ten sam wzorzec co
     ".oai-vehicle-damage-hero__cta").

   - Desktop od 1024px: szesc pierwszych sygnalow tworzy siatke 2 kolumny
     x 3 wiersze (pionowa linia miedzy kolumnami przez border-right na
     elementach 1, 3, 5, pozioma linia miedzy wierszami przez
     border-bottom na elementach 1-6), siodmy sygnal rozciaga sie na pelna
     szerokosc przez grid-column: 1 / -1, bez wlasnych linii. Modul
     dzialania przechodzi na uklad poziomy (tresc po lewej, przycisk i
     microcopy po prawej) przez minmax(0, 1fr) i min-width: 0. */

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

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

.oai-site .oai-vehicle-damage-appeal-signals__intro {
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-vehicle-damage-appeal-signals__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-vehicle-damage-appeal-signals__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-vehicle-damage-appeal-signals__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;
}

/* Wspolna mapa siedmiu sygnalow */

.oai-site .oai-vehicle-damage-appeal-signals__map {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 0 32px;
	padding: 24px 20px;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-vehicle-damage-appeal-signals__map-label {
	margin: 0 0 20px;
	padding-bottom: 16px;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy);
	border-bottom: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-appeal-signals__signals {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-vehicle-damage-appeal-signals__signal {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 18px 0;
	position: relative;
}

.oai-site .oai-vehicle-damage-appeal-signals__signal + .oai-vehicle-damage-appeal-signals__signal {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-damage-appeal-signals__signal-title {
	display: block;
	margin: 0 0 6px;
	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-vehicle-damage-appeal-signals__signal-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;
}

/* Domkniecie */

.oai-site .oai-vehicle-damage-appeal-signals__closing {
	margin: 0 0 32px;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--oai-color-navy);
}

/* Granatowy panel dzialania (ograniczony, nie pelnoszerokosciowy) */

.oai-site .oai-vehicle-damage-appeal-signals__action {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 28px 20px;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-vehicle-damage-appeal-signals__action-eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-damage-appeal-signals__action-heading {
	margin: 0 0 10px;
	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-vehicle-damage-appeal-signals__action-content {
	margin: 0 0 24px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-vehicle-damage-appeal-signals__action-cta-wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-vehicle-damage-appeal-signals__action-cta {
	width: 100%;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-vehicle-damage-appeal-signals__action-microcopy {
	margin: 12px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

/* Tablet od 768px: wieksza typografia i odstepy, lista sygnalow wciaz
   jednokolumnowa, przycisk dostaje szerokosc dopasowana do tresci (ten
   sam wzorzec co ".oai-vehicle-damage-hero__cta") */

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

	.oai-site .oai-vehicle-damage-appeal-signals__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__map {
		margin-bottom: 40px;
		padding: 32px;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__signal {
		padding: 22px 0;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action {
		padding: 40px;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-cta-wrap {
		width: auto;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-cta {
		width: auto;
		min-width: 260px;
	}
}

/* Desktop od 1024px: szesc pierwszych sygnalow jako siatka 2x3 z liniami,
   siodmy na pelna szerokosc, modul dzialania w ukladzie poziomym (patrz
   komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-vehicle-damage-appeal-signals__signals {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-vehicle-damage-appeal-signals__signal {
		padding: 24px;
	}

	/* Regula bazowa ".signal + .signal { border-top }" laczy trzy klasy
	   (.oai-site, .signal, .signal), wiec ma specyficznosc (0,3,0) -
	   wyzsza niz prosty selektor ".signal { border-top: none }" (0,2,0)
	   uzyty tu wczesniej, ktory przez to nigdy realnie nie wygrywal
	   kaskady i pozostawial linie nad kazdym drugim sygnalem, w tym nad
	   sygnalem 2. Reset musi dopasowac ten sam ksztalt selektora
	   (kombinator sasiedztwa), zeby miec rowna specyficznosc i wygrac
	   przez kolejnosc w pliku. */
	.oai-site .oai-vehicle-damage-appeal-signals__signal + .oai-vehicle-damage-appeal-signals__signal {
		border-top: none;
	}

	/* Rzad 1 (elementy 1-2) bez gornej linii, rzedy 2-4 (elementy 3-7)
	   z gorna linia - element 7 zajmuje pelny wiersz (grid-column: 1/-1),
	   wiec jego wlasny border-top rozciaga sie naturalnie na cala
	   szerokosc bez dodatkowego markupu. */
	.oai-site .oai-vehicle-damage-appeal-signals__signal:nth-child(n+3) {
		border-top: 1px solid var(--oai-color-border);
	}

	/* Pionowy separator wylacznie na prawej kolumnie (elementy 2, 4, 6) -
	   element 7 jest nieparzysty, wiec nie jest dopasowany i nie
	   otrzymuje pionowej linii. */
	.oai-site .oai-vehicle-damage-appeal-signals__signal:nth-child(2n) {
		border-left: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-vehicle-damage-appeal-signals__signal:nth-child(7) {
		grid-column: 1 / -1;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action {
		display: flex;
		align-items: center;
		gap: 40px;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-content {
		margin-bottom: 0;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-cta-wrap {
		flex: 0 0 auto;
		min-width: 0;
		text-align: right;
	}

	.oai-site .oai-vehicle-damage-appeal-signals__action-microcopy {
		text-align: right;
	}
}

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

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

   Biale tlo, zgodnie z bialym tlem juz uzytym w zrodlowym komponencie
   .oai-property-damage-faq i naprzemiennym rytmem tej strony (Sekcja 10
   miala jasny tinowany odcien tla). */

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

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

.oai-site .oai-vehicle-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-vehicle-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-vehicle-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-vehicle-damage-faq__list {
	margin: 32px 0 0;
	max-width: 960px;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-vehicle-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-vehicle-damage-faq__item[open] {
	background: rgba(33, 225, 253, 0.05);
	border-bottom-color: var(--oai-color-cyan);
}

.oai-site .oai-vehicle-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-vehicle-damage-faq__question::-webkit-details-marker {
	display: none;
}

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

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

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

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

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

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

.oai-site .oai-vehicle-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-vehicle-damage-faq {
		padding: 48px 24px;
	}

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

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

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

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

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

/* Sekcja 12: koncowe CTA, ostatnia sekcja strony przed footerem. Nie jest
   to nowy rodzaj CTA - to dokladny, zaakceptowany wzorzec pobrany jeden do
   jednego z .oai-property-damage-final-cta
   (assets/css/page-property-damage.css), zmieniony wylacznie w zakresie
   namespace (.oai-vehicle-damage-final-cta, poniewaz
   page-vehicle-damage.css jest ladowany wylacznie na tej stronie) oraz
   rzeczywistych wymiarow obrazu (1774x887px, potwierdzone przez
   bezposredni odczyt naglowka pliku
   assets/images/page-vehicle-damage/szkoda-komunikacyjna-cta-auto.webp -
   inne wymiary niz zrodlowe zdjecie 1829x860px strony
   /szkoda-majatkowa/, dlatego width/height w PHP i proporcje w tym pliku
   sa dopasowane do rzeczywistego pliku tej strony, nie skopiowane
   bezmyslnie). Zrodlowy komponent .oai-property-damage-final-cta pozostal
   nietkniety.

   Fotografia osadzona jako prawdziwy <img> (nie CSS background-image,
   zgodnie z tym samym mechanizmem co zrodlo) - .__media to bezwzglednie
   pozycjonowany kontener wypelniajacy cala sekcje, .__image ma
   object-fit: cover, .__overlay to osobny, jednolity granatowy 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-vehicle-damage-appeal-signals__action-cta
   Sekcji 10 tej strony (nadpisanie background/color na bazowych klasach
   .oai-cta .oai-cta--primary) - ponownie uzyty, sprawdzony wariant zamiast
   nowego.

   Object-position: desktop "right center" (samochod ma pozostac po
   prawej, zgodnie z wprost okreslonym wymogiem tego zadania). Mobile
   "70% center", z mocniejszym overlayem niz na desktopie - identyczny
   mechanizm jak w zrodle. */

.oai-site .oai-vehicle-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-vehicle-damage-final-cta__media {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	overflow: hidden;
}

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

.oai-site .oai-vehicle-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-vehicle-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-vehicle-damage-final-cta__content {
	min-width: 0;
	max-width: 560px;
}

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

.oai-site .oai-vehicle-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-vehicle-damage-final-cta {
		padding: 112px 40px;
	}

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

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

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

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

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

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

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