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

   Zdjecie WebP (odszkodowanie-za-zalanie-hero.webp) ma rzeczywiste wymiary
   1536x1024 (proporcje 3/2, pejzaz) i przedstawia zawilgocony narozny
   fragment sciany i sufitu z widocznymi zaciekami i plesnia, glownie w
   prawej i gornej czesci kadru (naroznik ok. 60% szerokosci, 30-45%
   wysokosci, dalsze zabrudzenia w prawej jednej trzeciej kadru). Ten hero
   swiadomie rozni sie kompozycja od hero /szkoda-komunikacyjna/ i
   /szkoda-majatkowa/: proporcja tresc/modul to 56%/44% (nie 52/48),
   odstep miedzy strefami na desktopie to 56px (nie 64px), obraz dostaje
   od 768px docelowy kadr 4/3 zamiast naturalnych 3/2 (celowe, ciasniejsze
   przyciecie eksponujace sam zawilgocony naroznik, spojne z dokumentacyjnym,
   spokojnym charakterem zdjecia), promien zaokraglenia to
   var(--oai-radius-m) (nie --oai-radius-l), a object-position (62% 38%)
   jest dobrany pod ten konkretny kadr, nie przeniesiony z innej strony.

   Uklad dwustrefowy wlacza sie od 1024px, zgodnie z dominujacym w
   projekcie progiem kontrolnym tabletu. Ponizej 1024px (w tym 768px) uklad
   jest w pelni jednokolumnowy: tresc, CTA i microcopy nad modulem
   wizualnym, zgodnie z kolejnoscia DOM ponizej. */

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

/* Breadcrumb (trzy poziomy: strona glowna, Problemy i szkody, biezaca) */

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

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

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

/* Separator "/" generowany wewnatrz spana etykiety (nie na li), polaczony
   rzeczywista spacja nierozdzielajaca U+00A0 z pierwszym slowem etykiety
   (\00A0 w skladni CSS content). Dzieki temu "/" i pierwsze slowo sa jednym
   ciaglym wezlem tekstowym w kontekscie inline i przegladarka nigdy nie
   zlamie wiersza miedzy nimi, niezaleznie od zawijania na poziomie listy -
   w odroznieniu od poprzedniej wersji, gdzie "/" byl osobnym elementem flex
   wewnatrz li (li ma display:flex), co przy zawijaniu dlugiej etykiety
   "Odszkodowanie za zalanie" na najwezszych ekranach moglo pozostawic
   separator oddzielony od tekstu. */

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

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

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

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

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

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

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

.oai-site .oai-water-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 zrodlowo, kadrowane do 4/3
   od 768px). Ponizej 768px kontener dostaje wysokosc z clamp() w
   przedziale 260-340px zamiast aspect-ratio, wiec obraz jest kadrowany
   przez object-fit: cover na waskich szerokosciach - patrz komentarz na
   poczatku bloku. */

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

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

.oai-site .oai-water-damage-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: clamp(260px, 78vw, 340px);
	object-fit: cover;
	object-position: 62% 38%;
	border-radius: var(--oai-radius-m);
	border: 1px solid var(--oai-color-border);
}

/* Tablet od 768px: wieksza typografia, modul wciaz pod trescia, obraz
   dostaje docelowy kadr 4/3 */

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

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

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

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

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

	.oai-site .oai-water-damage-hero__image {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* Desktop od 1024px: dwie strefy hero, tresc i modul obok siebie, proporcja
   56%/44% (swiadomie inna niz 52/48 uzyte w hero /szkoda-komunikacyjna/) */

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

	.oai-site .oai-water-damage-hero__content {
		flex: 0 1 56%;
	}

	.oai-site .oai-water-damage-hero__visual {
		flex: 1 1 44%;
	}

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

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

/* Sekcja 2: "Co moze obejmowac szkoda po zalaniu?". Tlo tint (rgba(1,2,66,
   0.03)), ten sam token co istniejace sekcje "zakres" na innych podstronach
   problemowych, wizualnie odrozniajacy sekcje od bialego hero.

   Grafika (odszkodowanie-za-zalanie-sekcja-2-zakres-szkody.webp, rzeczywiste
   wymiary 1537x1023) ma juz wbudowane wlasne etykiety i linie prowadzace
   ("Budynek lub lokal", "Stale elementy", "Wyposazenie i ruchomosci") -
   dlatego modul wizualny wyswietla ja w calosci przez object-fit: contain,
   bez kadrowania i bez zadnych dodatkowych nakladek, a trzy grupy tekstowe
   po prawej sa niezalezna, w pelni dostepna wersja tej samej tresci w HTML
   (nie duplikuja wizualnie etykiet z obrazu, nie sa na nim renderowane
   ponownie).

   Uklad dwukolumnowy (grafika ok. 58%, grupy tekstowe ok. 40%) wlacza sie
   od 1024px, zgodnie z dominujacym w projekcie progiem kontrolnym
   desktopu/szerszego tabletu. Ponizej 1024px (w tym 768px) modul jest w
   pelni jednokolumnowy: grafika nad trzema grupami tekstowymi, zgodnie z
   kolejnoscia DOM ponizej. */

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

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

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

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

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

/* Modul: grafika + trzy grupy tekstowe */

.oai-site .oai-water-damage-scope__module {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-water-damage-scope__media {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-water-damage-scope__figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-water-damage-scope__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1537 / 1023;
	object-fit: contain;
	object-position: center;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
}

.oai-site .oai-water-damage-scope__groups {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.oai-site .oai-water-damage-scope__group {
	padding: 16px 0;
}

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

.oai-site .oai-water-damage-scope__group-heading {
	margin: 0 0 8px;
	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-water-damage-scope__group-body {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

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

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

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

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

	.oai-site .oai-water-damage-scope__group-body {
		font-size: 1rem;
	}
}

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

/* Desktop od 1024px: dwie kolumny, grafika ok. 58%, grupy tekstowe ok. 40%
   (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-water-damage-scope__module {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}

	.oai-site .oai-water-damage-scope__media {
		flex: 0 1 58%;
	}

	.oai-site .oai-water-damage-scope__groups {
		flex: 1 1 40%;
		padding-top: 4px;
	}
}

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

/* Sekcja 3: "Skad doszlo do zalania i dlaczego ma to znaczenie?". Biale tlo
   sekcji (w odroznieniu od pelnoszerokosciowych granatowych sekcji uzytych
   na innych podstronach, np. .oai-vehicle-damage-estimate-consistency) -
   tutaj granat jest ograniczony wylacznie do wewnetrznego panelu z czterema
   wierszami, nie do calej sekcji. Panel jest jedna lista pionowa (cztery
   poziome wiersze), nie siatka 2x2 jak w analogicznym panelu strony
   /szkoda-komunikacyjna/ - to swiadomie inny uklad wizualny.

   Kolory na granatowym panelu (tekst rgba(255,255,255,0.8), separatory
   rgba(255,255,255,0.16)) sa tym samym, juz ugruntowanym tokenem "tekst na
   granacie" uzywanym konsekwentnie w kilku innych panelach projektu (m.in.
   .oai-vehicle-damage-estimate-consistency), nie nowym, przypadkowym
   kolorem. Cyjanowy akcent przed H3 to lewy border 3px, ten sam wzorzec co
   .oai-property-damage-scope__row-heading.

   Uklad dwukolumnowy naglowka (eyebrow+H2 ok. 43%, lead ok. 57%) oraz
   dwukolumnowy uklad wierszy panelu (H3 ok. 36%, opis ok. 64%) wlaczaja sie
   od 1024px, zgodnie z dominujacym w projekcie progiem kontrolnym
   desktopu/szerszego tabletu. Ponizej 1024px oba uklady sa jednokolumnowe:
   eyebrow, H2, lead, panel (wiersze z H3 nad opisem), nota - w tej
   kolejnosci DOM. */

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

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

.oai-site .oai-water-damage-source__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 0 40px;
}

.oai-site .oai-water-damage-source__intro-head {
	min-width: 0;
	max-width: 100%;
}

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

.oai-site .oai-water-damage-source__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 panel: cztery poziome wiersze */

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

.oai-site .oai-water-damage-source__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-water-damage-source__row {
	padding: 20px 0;
}

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

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

.oai-site .oai-water-damage-source__row-body {
	margin: 0;
	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;
}

/* Nota pod panelem: spokojne domkniecie na bialym tle sekcji, cyjanowy
   akcent przy lewej krawedzi (nie alert, brak czerwieni, brak ramki) */

.oai-site .oai-water-damage-source__note {
	margin: 32px 0 0;
	max-width: 720px;
	padding-left: 16px;
	border-left: 2px solid var(--oai-color-cyan);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, oba uklady wciaz jednokolumnowe
   (patrz komentarz na poczatku bloku) */

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

	.oai-site .oai-water-damage-source__heading {
		font-size: 1.5rem;
	}

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

	.oai-site .oai-water-damage-source__row {
		padding: 24px 0;
	}

	.oai-site .oai-water-damage-source__row-body {
		font-size: 1rem;
	}

	.oai-site .oai-water-damage-source__panel {
		padding: 8px 32px;
	}
}

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

/* Desktop od 1024px: naglowek w dwoch nierownych kolumnach (ok. 43%/57%),
   kazdy wiersz panelu w dwoch kolumnach (H3 ok. 36%, opis ok. 64%) - patrz
   komentarz na poczatku bloku */

@media (min-width: 1024px) {
	.oai-site .oai-water-damage-source__intro {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}

	.oai-site .oai-water-damage-source__intro-head {
		flex: 0 1 43%;
	}

	.oai-site .oai-water-damage-source__lead {
		flex: 1 1 57%;
		padding-top: 4px;
	}

	.oai-site .oai-water-damage-source__row {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 28px;
	}

	.oai-site .oai-water-damage-source__row-heading {
		flex: 0 0 36%;
		max-width: 36%;
		margin: 0;
		padding-top: 1px;
	}

	.oai-site .oai-water-damage-source__row-body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.oai-site .oai-water-damage-source__panel {
		padding: 8px 40px;
	}
}

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

	.oai-site .oai-water-damage-source__panel {
		padding: 4px 16px;
	}
}

/* Sekcja 4: "Co zrobic od razu po zalaniu?". Bardzo jasne, chlodne tlo
   (rgba(1,2,66,0.03)), ten sam token co Sekcja 2 - przywraca naprzemienny
   rytm po bialej Sekcji 3. Intro jest pionowe (eyebrow, H2, lead), bez
   dwoch kolumn Sekcji 3, ograniczone do ok. 720px i wyrownane do lewej.

   Jeden proces w czterech krokach: <ol> z ciagla cyjanowa osia laczaca
   wszystkie kroki, nie cztery osobne karty - bez ramek wokol krokow,
   cieni, gradientow ani accordionu. Numery 01-04 sa statycznym tekstem
   w PHP, nie licznikiem CSS, zgodnie z zaakceptowana struktura sekcji.

   Os jest zbudowana z odcinkow (pseudo-element .__step:not(:last-child)::after),
   nie z jednej linii rozciagnietej na caly kontener .__steps. Kazdy krok
   oprocz ostatniego generuje wlasny odcinek od srodka wlasnego numeru
   (top/left: 12px, srodek pola 24x24) do srodka numeru kolejnego kroku.
   Dlugosc odcinka jest liczona przez przeciwstawne wciecia (top+bottom
   w pionie, left+right w poziomie) w pikselach, nie przez height/width
   w procentach - dzieki temu dziala poprawnie mimo ze wysokosc/szerokosc
   .__step jest auto (zalezna od tresci), bez polegania na procentowej
   wysokosci wzgledem przodka o niezdefiniowanej wysokosci. Numer (.__number)
   ma z-index:1 i tlo identyczne z tlem sekcji, wiec maskuje koncowki
   odcinkow dokladnie na wysokosci/szerokosci wlasnego pola - efekt to
   ciagi odcinkow miedzy srodkami kolejnych numerow, bez wystawania przed
   01 i bez wystawania za 04 (ostatni krok, :last-child, nie generuje
   dalszego odcinka).

   Os jest pionowa na mobile i tablecie i przechodzi w pozioma dopiero od
   1280px ("szeroki desktop"), ten sam prog uzyty juz dla analogicznej
   piecioetapowej osi Sekcji 5 "Pierwsze dzialania" strony
   /szkoda-majatkowa/ (nie 1024px, uzywany gdzie indziej na tej stronie
   dla ukladow dwukolumnowych). W pionie odcinek rozciaga sie o wysokosc
   wlasnego kroku plus gap 32px (bottom: -44px = -(32px gap + 12px do
   srodka kolejnego numeru)). W poziomie (od 1280px) odcinek rozciaga sie
   o szerokosc wlasnego kroku plus gap 16px (right: -28px = -(16px gap +
   12px do srodka kolejnego numeru)). */

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

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

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

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

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

/* Os: cztery kroki, polaczone odcinkami miedzy kolejnymi numerami */

.oai-site .oai-water-damage-actions__steps {
	position: relative;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

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

/* Odcinek osi: laczy srodek numeru biezacego kroku ze srodkiem numeru
   kolejnego kroku. Ostatni krok (:last-child) nie generuje odcinka. */

.oai-site .oai-water-damage-actions__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: -44px;
	width: 1px;
	height: auto;
	background-color: rgba(33, 225, 253, 0.35);
	z-index: 0;
}

.oai-site .oai-water-damage-actions__number {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: rgba(1, 2, 66, 0.03);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oai-color-cyan);
}

.oai-site .oai-water-damage-actions__content {
	min-width: 0;
	max-width: 100%;
}

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

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

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

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

	.oai-site .oai-water-damage-actions__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-water-damage-actions__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-water-damage-actions__step-title {
		font-size: 1.125rem;
	}

	.oai-site .oai-water-damage-actions__step-body {
		font-size: 1rem;
	}
}

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

/* Od 1280px: os pozioma, cztery kroki w jednym wierszu */

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

	.oai-site .oai-water-damage-actions__step:not(:last-child)::after {
		top: 12px;
		left: 12px;
		right: -28px;
		bottom: auto;
		width: auto;
		height: 1px;
	}

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

	.oai-site .oai-water-damage-actions__content {
		margin-top: 16px;
	}
}

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

/* Sekcja 5: "Jak udokumentowac zalanie mieszkania lub domu?". Biale tlo
   sekcji (rozne od tintu Sekcji 4 nad nia i od granatowego panelu Sekcji
   3), koncepcja "jedna teczka dokumentacji": jeden wspolny modul (jedna
   zewnetrzna granica, jeden promien, jedno bazowe tlo w tinie rgba(1,2,66,
   0.03), ten sam token co Sekcje 2 i 4) z trzema dzialami w srodku i
   domknieciem na pelnej szerokosci pod nimi, wewnatrz tego samego modulu
   (nie jako osobny akapit poza nim). Domkniecie ma wlasne, jasniejsze
   cyjanowe tlo (rgba(33,225,253,0.08)) i gorny separator, odrozniajace je
   od dzialow bez wygladu karty, alertu ani CTA. Modul ma overflow:hidden,
   dzieki czemu tlo domkniecia jest automatycznie przycinane do promienia
   modulu bez ujemnych marginesow.

   Znacznik listy to ta sama, juz zaakceptowana technika co
   .oai-vehicle-damage-appeal-documents__department-item::before (krotka
   pozioma cyjanowa kreska 6x2px), nie checkbox ani numer.

   Ponizej szerokiego breakpointu 1200px dzialy sa w jednej kolumnie,
   rozdzielone pozioma linia (bez posredniego ukladu 2+1 na tablecie -
   swiadomie inaczej niz analogiczny modul strony /szkoda-komunikacyjna/,
   ktory uzywa dodatkowego ukladu 2+1 miedzy 900 a 1023px). Od 1200px
   dzialy przechodza wprost do trzech kolumn w jednym rzedzie z pionowymi
   separatorami, w proporcji 35/34/31 (grid-template-columns: 35fr 34fr
   31fr), dobranej pod rzeczywiste dlugosci tekstow trzeciego dzialu. */

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

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

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

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

.oai-site .oai-water-damage-documentation__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: trzy dzialy plus domkniecie na pelnej szerokosci */

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

.oai-site .oai-water-damage-documentation__departments {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 4px 20px;
}

.oai-site .oai-water-damage-documentation__department {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 20px 0;
}

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

.oai-site .oai-water-damage-documentation__department-heading {
	margin: 0 0 10px;
	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-water-damage-documentation__department-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.oai-site .oai-water-damage-documentation__department-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

/* Domkniecie: pelna szerokosc modulu, wlasne jasniejsze cyjanowe tlo,
   gorny separator, bez wygladu karty, alertu ani CTA */

.oai-site .oai-water-damage-documentation__closing {
	margin: 0;
	max-width: 100%;
	padding: 18px 20px;
	background-color: rgba(33, 225, 253, 0.08);
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy);
}

/* Tablet od 768px: wieksza typografia i odstepy, dzialy wciaz w jednej
   kolumnie ponizej 1200px */

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

	.oai-site .oai-water-damage-documentation__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-water-damage-documentation__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-water-damage-documentation__departments {
		padding: 8px 32px;
	}

	.oai-site .oai-water-damage-documentation__department {
		padding: 24px 0;
	}

	.oai-site .oai-water-damage-documentation__department-heading {
		font-size: 1.125rem;
	}

	.oai-site .oai-water-damage-documentation__department-item {
		font-size: 1rem;
	}

	.oai-site .oai-water-damage-documentation__closing {
		padding: 22px 32px;
	}
}

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

/* Szeroki desktop od 1200px: trzy kolumny w proporcji 35/34/31 w jednym
   rzedzie, dwie pionowe linie miedzy nimi, bez posredniego ukladu 2+1
   (patrz komentarz na poczatku bloku) */

@media (min-width: 1200px) {
	.oai-site .oai-water-damage-documentation__departments {
		display: grid;
		grid-template-columns: 35fr 34fr 31fr;
		column-gap: 32px;
		padding: 28px 32px;
	}

	.oai-site .oai-water-damage-documentation__department {
		padding: 0 24px;
	}

	.oai-site .oai-water-damage-documentation__department:first-child {
		padding-left: 0;
	}

	.oai-site .oai-water-damage-documentation__department:last-child {
		padding-right: 0;
	}

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

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

	.oai-site .oai-water-damage-documentation__departments {
		padding: 4px 16px;
	}

	.oai-site .oai-water-damage-documentation__closing {
		padding: 16px;
	}
}

/* Sekcja 6: "Dlaczego samo wyschniecie sciany nie konczy szkody?".
   Pelnoszerokosciowy granatowy przerywnik techniczny (var(--oai-color-navy),
   ten sam token co panel Sekcji 3 i tlo modulu Sekcji 4), wyraznie
   kontrastujacy z biala Sekcja 5 przed nim. Koncepcja "Pod powierzchnia":
   bez ilustracji, ikon, numeracji, wykresow ani wartosci procentowych -
   wylacznie typografia, siatka i cienkie separatory.

   Dwa niezalezne breakpointy na tym samym DOM (intro, potem siatka
   czterech obszarow w kolejnosci 1-2-3-4, ta sama kolejnosc odczytu
   wszedzie):

   - Glowny uklad (intro + siatka) przechodzi z jednej kolumny na dwie
     kolumny dopiero od 1024px, zgodnie z dominujacym w tej stronie progiem
     kontrolnym dla ukladow dwukolumnowych (ten sam co Sekcja 2 i Sekcja 3).
     Intro dostaje wtedy ok. 38% szerokosci, siatka ok. 62%.

   - Siatka czterech obszarow ma wlasny, mniejszy breakpoint 900px,
     niezalezny od breakpointu glownego ukladu - dzieki temu na szerokim
     tablecie (900-1023px) siatka moze juz pokazywac uklad 2x2, mimo ze
     intro nadal siedzi nad nia, a nie obok niej (wprost okreslony wymog
     tego zadania).

   Linie dzielace pola siatki 2x2 sa realizowane realnymi border-right/
   border-bottom na wlasciwych polach (przez modyfikatory __area--1/2/3/4),
   ten sam mechanizm co juz zaakceptowany
   ".oai-vehicle-damage-estimate-consistency__area" strony
   /szkoda-komunikacyjna/ (uzyty tu jako sama technika budowania linii
   siatki, nie kopia CSS ani tresci - tutaj dwa pola na obszar zamiast
   trzech, wlasny breakpoint 900px zamiast 1024px, wlasny uklad dwoch
   glownych kolumn zamiast intro nad panelem). Ponizej 900px pola sa w
   jednej kolumnie, oddzielone wylacznie pozioma linia, ostatnie pole bez
   dolnej linii.

   Cyjanowy akcent przy H3 to lewy border 3px, ten sam wzorzec co
   .oai-water-damage-source__row-heading.

   Domkniecie siedzi pod calym ukladem dwoch glownych kolumn (poza
   .__layout), na pelnej szerokosci kontenera sekcji, z wlasnym, delikatnie
   jasniejszym tlem (biel o niskiej przezroczystosci na granacie) i
   cyjanowym akcentem przy lewej krawedzi - nie jest alertem, ostrzezeniem
   ani CTA. */

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

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

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

.oai-site .oai-water-damage-moisture__intro {
	min-width: 0;
	max-width: 100%;
}

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

.oai-site .oai-water-damage-moisture__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;
}

/* Siatka czterech obszarow: jedno otwarte pole techniczne, nie cztery
   osobne karty */

.oai-site .oai-water-damage-moisture__grid {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

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

.oai-site .oai-water-damage-moisture__area--4 {
	border-bottom: none;
}

.oai-site .oai-water-damage-moisture__area-heading {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	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-water-damage-moisture__area-body {
	margin: 0;
	padding-left: 12px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Domkniecie: pelna szerokosc kontenera sekcji, wlasne jasniejsze tlo,
   cyjanowy akcent przy lewej krawedzi */

.oai-site .oai-water-damage-moisture__closing {
	margin: 40px 0 0;
	max-width: 100%;
	padding: 18px 20px;
	background-color: rgba(255, 255, 255, 0.06);
	border-left: 2px solid var(--oai-color-cyan);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

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

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

	.oai-site .oai-water-damage-moisture__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-water-damage-moisture__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-water-damage-moisture__area {
		padding: 24px 0;
	}

	.oai-site .oai-water-damage-moisture__area-body {
		font-size: 1rem;
	}

	.oai-site .oai-water-damage-moisture__closing {
		padding: 22px 28px;
	}
}

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

/* Siatka od 900px: uklad 2x2, realne border-right/border-bottom na
   wlasciwych polach, niezalezne od breakpointu glownych dwoch kolumn
   1024px (patrz komentarz na poczatku bloku) */

@media (min-width: 900px) {
	.oai-site .oai-water-damage-moisture__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.oai-site .oai-water-damage-moisture__area {
		padding: 24px 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
		border-right: none;
	}

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

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

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

	.oai-site .oai-water-damage-moisture__area--4 {
		border-bottom: none;
	}
}

/* Dwie glowne kolumny od 1024px: intro ok. 38%, siatka ok. 62% (patrz
   komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-water-damage-moisture__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}

	.oai-site .oai-water-damage-moisture__intro {
		flex: 0 1 38%;
		max-width: 38%;
	}

	.oai-site .oai-water-damage-moisture__grid {
		flex: 1 1 62%;
	}
}

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

	.oai-site .oai-water-damage-moisture__closing {
		padding: 16px;
	}
}

/* Sekcja 7: "Co powinien uwzgledniac kosztorys naprawy po zalaniu?".
   Biale tlo sekcji, wyraznie odrozniajace sie od granatowej Sekcji 6.
   Koncepcja "Warstwy zakresu kosztorysu": jeden wspolny modul (jedna
   zewnetrzna granica, jeden promien var(--oai-radius-l), jedno bardzo
   jasne chlodne tlo rgba(1,2,66,0.03), ten sam token co moduly Sekcji 2,
   4 i 5), overflow:hidden dla zachowania wspolnego promienia. Piec
   poziomych warstw wewnatrz, oddzielonych wylacznie cienkim gornym
   separatorem (pierwsza warstwa bez separatora), nie piec osobnych kart.

   Kazda warstwa: H3 z cyjanowym akcentem (lewy border 3px, ten sam wzorzec
   co .oai-water-damage-source__row-heading i
   .oai-water-damage-moisture__area-heading) oraz lista `<ul>`. Znacznik
   listy to ta sama, juz zaakceptowana technika co
   .oai-vehicle-damage-appeal-documents__department-item::before (krotka
   pozioma cyjanowa kreska 6x2px).

   Listy pozycji uzywaja display:flex + flex-wrap (nie flex-column jak w
   Sekcji 5) - krotkie pozycje moga ukladac sie obok siebie w jednym
   wierszu, dlugie pozycje (np. "Energia zuzyta przez osuszacze...")
   naturalnie zawijaja sie do wlasnego, wielowierszowego bloku dzieki
   flex: 1 1 220px i braku wymuszonego nowrap - to swiadomie inny
   mechanizm listy niz w pozostalych sekcjach tej strony, zgodnie z wprost
   okreslonym wymogiem tego zadania. Zawijanie do ukladu jednej pozycji na
   wiersz (flex-direction:column) obowiazuje ponizej 600px, ponizej ktorego
   uklad "plynacych" pozycji obok siebie przestaje miec sens przy waskiej
   szerokosci.

   Kazda warstwa jest ukladem dwukolumnowym (H3 ok. 30% po lewej, lista
   ok. 70% po prawej) dopiero od 1040px - wlasny, niezalezny breakpoint tej
   sekcji (nie 1024px uzywany gdzie indziej na tej stronie), dobrany pod
   najdluzsza pojedyncza pozycje listy ("Energia zuzyta przez osuszacze,
   jezeli koszt zostal udokumentowany i miesci sie w zakresie ochrony"),
   ktora przy szerszej prawej kolumnie zawija sie do dwoch wierszy zamiast
   piec. Ponizej 1040px kazda warstwa jest w pelni pionowa: H3 nad lista.

   Domkniecie siedzi poza modulem, na bialym tle sekcji, z cyjanowym
   akcentem przy lewej krawedzi - ten sam, juz zaakceptowany wzorzec co
   .oai-water-damage-source__note. */

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

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

.oai-site .oai-water-damage-estimate-scope__intro {
	max-width: 760px;
	margin: 0 0 36px;
}

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

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

/* Wspolny modul: piec poziomych warstw */

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

.oai-site .oai-water-damage-estimate-scope__layer {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 20px;
}

.oai-site .oai-water-damage-estimate-scope__layer + .oai-water-damage-estimate-scope__layer {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-water-damage-estimate-scope__layer-heading {
	margin: 0 0 12px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	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;
}

/* Lista "plynaca": flex-wrap, krotkie pozycje obok siebie, dlugie pozycje
   zawijaja sie we wlasnym bloku (patrz komentarz na poczatku bloku).
   Ponizej 600px kazda pozycja zajmuje osobny wiersz. */

.oai-site .oai-water-damage-estimate-scope__layer-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-water-damage-estimate-scope__layer-item {
	position: relative;
	max-width: 100%;
	padding-left: 16px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-water-damage-estimate-scope__layer-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

/* Domkniecie: poza modulem, cyjanowy akcent przy lewej krawedzi */

.oai-site .oai-water-damage-estimate-scope__closing {
	margin: 32px 0 0;
	max-width: 760px;
	padding-left: 16px;
	border-left: 2px solid var(--oai-color-cyan);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
}

/* Listy przechodza w plynacy uklad flex-wrap od 600px - ponizej tej
   szerokosci "plynace" pozycje obok siebie przestaja miec sens (patrz
   komentarz na poczatku bloku) */

@media (min-width: 600px) {
	.oai-site .oai-water-damage-estimate-scope__layer-list {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 24px;
		row-gap: 10px;
	}

	.oai-site .oai-water-damage-estimate-scope__layer-item {
		flex: 1 1 220px;
		min-width: 0;
	}
}

/* Tablet od 768px: wieksza typografia, kazda warstwa wciaz pionowa
   ponizej 1040px */

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

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

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

	.oai-site .oai-water-damage-estimate-scope__layer {
		padding: 28px 32px;
	}

	.oai-site .oai-water-damage-estimate-scope__layer-item {
		font-size: 1rem;
	}
}

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

/* Od 1040px: kazda warstwa w dwoch kolumnach, H3 ok. 30% po lewej, lista
   ok. 70% po prawej - wlasny breakpoint tej sekcji (patrz komentarz na
   poczatku bloku) */

@media (min-width: 1040px) {
	.oai-site .oai-water-damage-estimate-scope__layer {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 28px;
	}

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

	.oai-site .oai-water-damage-estimate-scope__layer-list {
		flex: 1 1 70%;
		min-width: 0;
	}
}

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

	.oai-site .oai-water-damage-estimate-scope__layer {
		padding: 20px 16px;
	}

	.oai-site .oai-water-damage-estimate-scope__closing {
		padding-left: 14px;
	}
}

/* Sekcja 8: "Co sprawdzic w decyzji i kosztorysie po zalaniu?". Bardzo
   jasne, chlodne tlo (rgba(1,2,66,0.03), ten sam token co Sekcje 2, 4 i
   modul Sekcji 5), wyraznie odrozniajace sie od bialej Sekcji 7 nad nia.
   Koncepcja "Jeden dokument, dwa sposoby czytania": jeden bialy modul
   dokumentu (jedna zewnetrzna granica, jeden promien var(--oai-radius-l),
   jeden subtelny cien, gorny cyjanowy akcent 3px), overflow:hidden.

   Efekt "dokumentu" powstaje wylacznie przez kompozycje, nie przez
   grafike: dwie czesci (decyzja, kosztorys) w jednym wewnetrznym
   kontenerze .__parts, oddzielone jednym separatorem (pozioma linia
   ponizej breakpointu, pionowa linia od 940px), a domkniecie jest
   rodzenstwem .__parts (nie jego dzieckiem) wewnatrz .__document - dzieki
   temu separator miedzy czesciami fizycznie nie moze przejsc przez
   domkniecie, zgodnie z wprost okreslonym wymogiem tego zadania.

   Struktura opisowa wykorzystuje `<dl>`/`<dt>`/`<dd>` (nie liste
   punktowana): cyjanowy akcent to lewy border 2px na `<dt>`, ten sam
   wzorzec akcentu co gdzie indziej na tej stronie, a `<dd>` ma jawnie
   wyzerowany domyslny wciety margines przegladarki.

   Blok linkow wewnetrznych ("Sprawdz rowniez") wykorzystuje te sama, juz
   zaakceptowana technike co
   .oai-vehicle-damage-decision-review__links-list (linki tekstowe z
   ciaglym cyjanowym podkresleniem, pionowe separatory ::before miedzy
   linkami od 768px, kolumna na wezszych szerokosciach) - uzyta tu jako
   sama technika w nowej przestrzeni klas, nie kopia CSS ani tresci.

   Dwa niezalezne breakpointy: czesci dokumentu przechodza z pionowego na
   poziomy (42/58) uklad od 940px (wlasny breakpoint tej sekcji, w
   srodku wskazanego zakresu 900-960px, dobrany pod komfortowe zawijanie
   "Zuzycie techniczne i kwota koncowa" w węższej lewej kolumnie), a blok
   linkow przechodzi z kolumny na plynacy wiersz od 768px, zgodnie z
   ogolna konwencja typografii tej strony. */

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

.oai-site .oai-water-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-water-damage-decision-review__intro {
	max-width: 760px;
	margin: 0 0 36px;
}

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

.oai-site .oai-water-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;
}

/* Jeden wspolny dokument */

.oai-site .oai-water-damage-decision-review__document {
	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-top: 3px solid var(--oai-color-cyan);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 12px 32px rgba(1, 2, 66, 0.08);
	overflow: hidden;
}

.oai-site .oai-water-damage-decision-review__parts {
	display: flex;
	flex-direction: column;
}

.oai-site .oai-water-damage-decision-review__part {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 28px 24px;
}

.oai-site .oai-water-damage-decision-review__part--decision {
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-water-damage-decision-review__part-heading {
	margin: 0 0 18px;
	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-water-damage-decision-review__list {
	margin: 0;
	padding: 0;
}

.oai-site .oai-water-damage-decision-review__term {
	margin: 0 0 6px;
	padding-left: 12px;
	border-left: 2px solid var(--oai-color-cyan);
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-water-damage-decision-review__desc {
	margin: 0 0 20px;
	max-width: 100%;
	padding-left: 12px;
	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-water-damage-decision-review__desc:last-of-type {
	margin-bottom: 0;
}

/* Domkniecie: rodzenstwo .__parts, nie jego dziecko - separator miedzy
   czesciami nie moze przez nie przejsc (patrz komentarz na poczatku
   bloku) */

.oai-site .oai-water-damage-decision-review__closing {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 22px 24px;
	border-top: 1px solid var(--oai-color-border);
	background-color: rgba(1, 2, 66, 0.02);
}

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

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

/* Blok "Sprawdz rowniez" */

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

.oai-site .oai-water-damage-decision-review__links-label {
	margin: 0 0 14px;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-water-damage-decision-review__link,
.oai-site .oai-water-damage-decision-review__link:visited {
	display: inline;
	width: fit-content;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	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-water-damage-decision-review__link:hover,
.oai-site .oai-water-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-water-damage-decision-review__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Tablet od 768px: wieksza typografia, blok linkow przechodzi w plynacy
   wiersz z pionowymi separatorami; czesci dokumentu wciaz pionowe
   ponizej 940px (patrz komentarz na poczatku bloku) */

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

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

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

	.oai-site .oai-water-damage-decision-review__part {
		padding: 32px;
	}

	.oai-site .oai-water-damage-decision-review__closing {
		padding: 26px 32px;
	}

	.oai-site .oai-water-damage-decision-review__links-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 28px;
	}

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

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

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

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

/* Od 940px: dwie nierowne czesci dokumentu obok siebie (42/58), pionowy
   separator zamiast poziomego, wylacznie miedzy czesciami (patrz
   komentarz na poczatku bloku) */

@media (min-width: 940px) {
	.oai-site .oai-water-damage-decision-review__parts {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-water-damage-decision-review__part--decision {
		flex: 0 0 42%;
		max-width: 42%;
		border-bottom: none;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-water-damage-decision-review__part--estimate {
		flex: 0 0 58%;
		max-width: 58%;
	}
}

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

	.oai-site .oai-water-damage-decision-review__part {
		padding: 22px 16px;
	}

	.oai-site .oai-water-damage-decision-review__closing {
		padding: 18px 16px;
	}
}

/* Sekcja 9: "Jakie dokumenty przygotowac przed napisaniem odwolania?".
   PRZEBUDOWA: poprzednia koncepcja z pelnowysokosciowym bocznym
   granatowym pasem, wielkim wyblakłym napisem dekoracyjnym w tle oraz
   12-kolumnowa asymetryczna siatka grup zostala odrzucona wizualnie i
   calkowicie usunieta razem z jej regulami. Nowa, zaakceptowana
   koncepcja to "Redakcyjny poradnik w
   czterech etapach": krotki pelnoszerokosciowy granatowy blok intro na
   gorze (wysokosc wylacznie z tresci, nie rozciaga sie na wysokosc
   etapow), a pod nim semantyczne `<ol>` z czterema pelnoszerokosciowymi
   pasami-etapami (nie karty), na przemian bialymi i bardzo jasno
   zabarwionymi (rgba(1,2,66,0.03), ten sam token co Sekcje 2, 4, 5),
   zgodnie z wprost okreslonym rytmem tego zadania. Numeracja etapow jest
   tu semantycznie uzasadniona (rzeczywisty proces przygotowania
   odwolania), stad `<ol>` zamiast `<div>`.

   Kazdy etap ma wlasny wewnetrzny kontener ograniczony do standardowego
   kontenera strony (.__stage-inner), wewnatrz ktorego dopiero wystepuje
   uklad dwoch czesci: lewa (numer, etykieta, H3) i prawa (lista,
   wyjasnienie). Ponizej breakpointu 920px obie czesci sa w pelni pionowe
   (numer, etykieta, H3, lista, wyjasnienie - ta sama kolejnosc DOM co na
   desktopie, wylacznie zmiana display). Od 920px lewa czesc dostaje ok.
   28% szerokosci, prawa ok. 72%. Widoczny numer (01-04) ma
   `aria-hidden="true"`, poniewaz kolejnosc przekazuje juz `<ol>`.

   Listy dokumentow uzywaja stalej liczby kolumn na etap (nie
   auto-fit): etap 1 (piec pozycji) i etap 3 (szesc pozycji) po trzy
   kolumny, etap 2 (cztery pozycje) i etap 4 (trzy pozycje) po dwie
   kolumny - trzecia, dluga pozycja etapu 4 dostaje `grid-column: 1 / -1`
   i zajmuje pelna szerokosc siatki. Znacznik listy to ta sama, juz
   zaakceptowana technika co
   .oai-vehicle-damage-appeal-documents__department-item::before (krotka
   pozioma kreska). Domkniecie sekcji siedzi w osobnym, w pelni bialym
   pelnoszerokosciowym pasie pod `<ol>`, ograniczonym do standardowego
   kontenera, z gornym cyjanowym akcentem - nie jest CTA ani alertem. */

.oai-site .oai-water-damage-appeal-preparation {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Krotkie granatowe otwarcie: pelna szerokosc sekcji, wysokosc wylacznie
   z tresci i paddingu, nie boczna kolumna */

.oai-site .oai-water-damage-appeal-preparation__intro {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-navy);
}

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

.oai-site .oai-water-damage-appeal-preparation__eyebrow {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-water-damage-appeal-preparation__heading {
	margin: 0 0 16px;
	max-width: 760px;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-water-damage-appeal-preparation__lead {
	margin: 0;
	max-width: 760px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Cztery etapy: semantyczne <ol>, pelnoszerokosciowe pasy, nie karty */

.oai-site .oai-water-damage-appeal-preparation__stages {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-water-damage-appeal-preparation__stage {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background-color: var(--oai-color-white);
}

.oai-site .oai-water-damage-appeal-preparation__stage--2,
.oai-site .oai-water-damage-appeal-preparation__stage--4 {
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-water-damage-appeal-preparation__stage-inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 44px 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.oai-site .oai-water-damage-appeal-preparation__stage-left {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-water-damage-appeal-preparation__number {
	display: block;
	margin: 0 0 8px;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	color: rgba(1, 2, 66, 0.28);
}

.oai-site .oai-water-damage-appeal-preparation__label {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-water-damage-appeal-preparation__stage-heading {
	margin: 0;
	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-water-damage-appeal-preparation__stage-right {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-water-damage-appeal-preparation__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.oai-site .oai-water-damage-appeal-preparation__item {
	position: relative;
	max-width: 100%;
	padding-left: 16px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-water-damage-appeal-preparation__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

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

/* Domkniecie: osobny, w pelni bialy pelnoszerokosciowy pas pod <ol> */

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

.oai-site .oai-water-damage-appeal-preparation__closing {
	margin: 0 auto;
	max-width: 780px;
	padding-top: 20px;
	border-top: 2px solid var(--oai-color-cyan);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Tablet od 768px: wieksza typografia i odstepy, kazdy etap wciaz w
   pelni pionowy ponizej 920px */

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

	.oai-site .oai-water-damage-appeal-preparation__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-water-damage-appeal-preparation__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage-inner {
		padding: 56px 40px;
		gap: 28px;
	}

	.oai-site .oai-water-damage-appeal-preparation__number {
		font-size: 2.5rem;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage-heading {
		font-size: 1.125rem;
	}

	.oai-site .oai-water-damage-appeal-preparation__item {
		font-size: 1rem;
	}

	.oai-site .oai-water-damage-appeal-preparation__closing-wrap {
		padding: 64px 40px;
	}
}

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

/* Od 920px: kazdy etap w dwoch czesciach (lewa ok. 28%, prawa ok. 72%),
   listy dostaja stala liczbe kolumn na etap (patrz komentarz na
   poczatku bloku) */

@media (min-width: 920px) {
	.oai-site .oai-water-damage-appeal-preparation__stage-inner {
		flex-direction: row;
		align-items: flex-start;
		padding: 72px 40px;
		gap: 40px;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage-left {
		flex: 0 0 28%;
		max-width: 28%;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage-right {
		flex: 1 1 72%;
	}

	.oai-site .oai-water-damage-appeal-preparation__number {
		font-size: 2.75rem;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage--1 .oai-water-damage-appeal-preparation__list,
	.oai-site .oai-water-damage-appeal-preparation__stage--3 .oai-water-damage-appeal-preparation__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 14px;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage--2 .oai-water-damage-appeal-preparation__list,
	.oai-site .oai-water-damage-appeal-preparation__stage--4 .oai-water-damage-appeal-preparation__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 14px;
	}

	.oai-site .oai-water-damage-appeal-preparation__stage--4 .oai-water-damage-appeal-preparation__item:nth-child(3) {
		grid-column: 1 / -1;
	}
}

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

	.oai-site .oai-water-damage-appeal-preparation__stage-inner {
		padding: 36px 16px;
	}

	.oai-site .oai-water-damage-appeal-preparation__closing-wrap {
		padding: 40px 16px;
	}
}

/* Sekcja 10: "Co powinno znalezc sie w odwolaniu po zalaniu?". Koncepcja
   "Anatomia odwolania": biale, spokojne tlo sekcji, wyraznie inne niz
   granatowe intro Sekcji 9 tuz przed nia. Wycentrowane intro (eyebrow,
   H2, lead), pod nim jedna otwarta kompozycja trzech skladnikow (co
   kwestionujesz + dlaczego decyzja wymaga zmiany + czego oczekujesz) -
   bez zewnetrznej ramki, wspolnego tla, tabeli, kart, numeracji ani
   `<ol>`. Relacja miedzy skladnikami jest pokazana wylacznie ukladem i
   dwoma dekoracyjnymi znakami "+" (`aria-hidden="true"`, nie sa czescia
   tresci merytorycznej).

   Domkniecie zamyka czesc poradnikowa (max-width, gorny cyjanowy akcent,
   bez karty i ikony). Pod nim kompaktowy granatowy modul dzialania,
   ograniczony do standardowego kontenera (nie pelnoszerokosciowy jak
   granatowe intro Sekcji 9) - ten sam, juz zaakceptowany mechanizm co
   .oai-vehicle-damage-appeal-signals__action (dwukolumnowy uklad
   tekst+przycisk na szerokim desktopie, przycisk na bazie globalnego
   systemu .oai-cta .oai-cta--primary z main.css, z nadpisaniem tla i
   koloru na biel/granat), uzyty tu jako sama technika w nowej przestrzeni
   klas, nie kopia CSS ani tresci.

   Dwa niezalezne breakpointy: kompozycja trzech skladnikow przechodzi z
   pionowego na poziomy uklad od 960px (wlasny breakpoint tej sekcji, w
   srodku wskazanego zakresu 900-980px), modul dzialania przechodzi z
   pionowego na poziomy uklad od 1024px (ten sam prog co analogiczny
   modul .oai-vehicle-damage-appeal-signals__action), niezaleznie od
   breakpointu kompozycji. */

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

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

.oai-site .oai-water-damage-appeal-content__intro {
	max-width: 800px;
	margin: 0 auto 40px;
	text-align: left;
}

.oai-site .oai-water-damage-appeal-content__eyebrow {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-water-damage-appeal-content__heading {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.28;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

/* Kompozycja trzech skladnikow, otwarta, bez wspolnej ramki ani tla */

.oai-site .oai-water-damage-appeal-content__composition {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0 0 40px;
}

.oai-site .oai-water-damage-appeal-content__component {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.oai-site .oai-water-damage-appeal-content__component-heading {
	margin: 0 0 10px;
	padding-left: 12px;
	border-left: 2px solid var(--oai-color-cyan);
	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-water-damage-appeal-content__component-body {
	margin: 0;
	max-width: 100%;
	padding-left: 12px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Separator dekoracyjny "+": maly, wysrodkowany, ponizej breakpointu
   kompozycji */

.oai-site .oai-water-damage-appeal-content__separator {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--oai-color-cyan);
}

/* Domkniecie czesci merytorycznej */

.oai-site .oai-water-damage-appeal-content__closing {
	margin: 0 auto 40px;
	max-width: 800px;
	padding-top: 20px;
	border-top: 2px solid var(--oai-color-cyan);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Kompaktowy granatowy modul dzialania, ograniczony do standardowego
   kontenera (nie pelnoszerokosciowy) */

.oai-site .oai-water-damage-appeal-content__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-water-damage-appeal-content__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-water-damage-appeal-content__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-water-damage-appeal-content__action-body {
	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-water-damage-appeal-content__action-cta-wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

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

/* Tablet od 768px: wieksza typografia i odstepy, kompozycja wciaz
   pionowa ponizej 960px, modul dzialania wciaz pionowy ponizej 1024px */

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

	.oai-site .oai-water-damage-appeal-content__intro {
		text-align: center;
	}

	.oai-site .oai-water-damage-appeal-content__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-water-damage-appeal-content__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-water-damage-appeal-content__component-body {
		font-size: 1rem;
	}

	.oai-site .oai-water-damage-appeal-content__action {
		padding: 40px;
	}

	.oai-site .oai-water-damage-appeal-content__action-heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-water-damage-appeal-content__action-cta-wrap {
		width: auto;
	}

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

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

/* Od 960px: kompozycja trzech skladnikow w jednym rzedzie, dwa waskie
   separatory (patrz komentarz na poczatku bloku) */

@media (min-width: 960px) {
	.oai-site .oai-water-damage-appeal-content__composition {
		flex-direction: row;
		align-items: flex-start;
		gap: 0;
	}

	.oai-site .oai-water-damage-appeal-content__component {
		flex: 1 1 0;
		min-width: 0;
	}

	.oai-site .oai-water-damage-appeal-content__separator {
		flex: 0 0 auto;
		width: auto;
		align-self: center;
		padding: 0 24px;
	}
}

/* Od 1024px: modul dzialania w ukladzie dwukolumnowym, tekst ok. 65%,
   przycisk ok. 35% (ten sam prog co analogiczny modul strony
   /szkoda-komunikacyjna/, niezaleznie od breakpointu kompozycji) */

@media (min-width: 1024px) {
	.oai-site .oai-water-damage-appeal-content__action {
		display: flex;
		align-items: center;
		gap: 40px;
	}

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

	.oai-site .oai-water-damage-appeal-content__action-body {
		margin-bottom: 0;
	}

	.oai-site .oai-water-damage-appeal-content__action-cta-wrap {
		flex: 0 0 auto;
		min-width: 0;
	}
}

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

	.oai-site .oai-water-damage-appeal-content__action {
		padding: 24px 16px;
	}
}

/* Sekcja 11: najczestsze pytania. Nie jest to nowy komponent FAQ - to
   dokladny, zaakceptowany wzorzec pobrany jeden do jednego z
   .oai-vehicle-damage-faq i .oai-property-damage-faq (ktore same sa
   wiernym odwzorowaniem pierwotnego mechanizmu uzywanego na
   /szkoda-calkowita/, /zanizone-odszkodowanie/,
   /odmowa-wyplaty-odszkodowania/ i /kosztorys-ubezpieczyciela/).
   Zmieniono wylacznie namespace na .oai-water-damage-faq, poniewaz
   page-water-damage.css jest ladowany wylacznie na tej stronie -
   zrodlowe komponenty pozostaly nietkniete. 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. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Sekcja 12: koncowe CTA, ostatnia sekcja strony przed footerem. Struktura,
   klasy, mechanizm osadzenia grafiki (prawdziwy <img>, nie CSS
   background-image), .__media/.__image/.__overlay jako bezwzglednie
   pozycjonowane warstwy oraz przycisk .oai-cta .oai-cta--primary z
   nadpisaniem background/color na bialy/granat sa odwzorowane jeden do
   jednego z zaakceptowanego wzorca .oai-property-damage-final-cta
   (assets/css/page-property-damage.css), ktory jako jedyny z istniejacych
   koncowych CTA linkuje juz do produktu 2366 Gotowe Odwolanie. Zmieniono
   namespace na .oai-water-damage-final-cta oraz zastapiono jednolity
   overlay poziomym gradientem granatu (najmocniejszy po lewej, slabszy po
   prawej), zgodnie z wprost wskazanym w tym zadaniu kierunkiem nakladki -
   zrodlowe zdjecie tej strony nie ma wbudowanego ciemnego pasa jak w
   zrodlowym wzorcu, wiec przyciemnienie budowane jest w calosci przez CSS.

   Grafika assets/images/page-water-damage/odszkodowanie-za-zalanie-cta.webp
   (potwierdzone 1536x1024px, format WebP, przez bezposrednie odczytanie
   naglowka pliku i wizualna inspekcje) przedstawia jasny salon z widocznymi
   subtelnymi zaciekami przy suficie i scianie po prawej, czarnym osuszaczem
   i szarym wiadrem - kontekst zalania ma pozostac po prawej, sofa po lewej
   moze znajdowac sie pod najmocniejsza czescia nakladki. Object-position:
   "right center" na szerokim ekranie, "70% center" ponizej 600px, zeby
   waskie okno mobilne nadal pokazywalo zarowno fragment sofy, jak i
   osuszacz/wiadro, bez calkowitego ukrycia zadnego z tych elementow.
   Breakpointy 768/600/360px, spojne z pozostalymi sekcjami tej strony. */

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

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

.oai-site .oai-water-damage-final-cta__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(1, 2, 66, 0.72) 0%, rgba(1, 2, 66, 0.46) 50%, rgba(1, 2, 66, 0.22) 100%);
	pointer-events: none;
}

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

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

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

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

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

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

	.oai-site .oai-water-damage-final-cta__overlay {
		background: linear-gradient(90deg, rgba(1, 2, 66, 0.68) 0%, rgba(1, 2, 66, 0.4) 50%, rgba(1, 2, 66, 0.18) 100%);
	}
}

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

	.oai-site .oai-water-damage-final-cta__overlay {
		background: linear-gradient(90deg, rgba(1, 2, 66, 0.82) 0%, rgba(1, 2, 66, 0.64) 55%, rgba(1, 2, 66, 0.44) 100%);
	}
}

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