/* Podstrona "Odszkodowanie za pożar": Sekcja 1 (hero). Renderowane przez
   page-odszkodowanie-za-pozar.php, ladowane wylacznie przez
   odwolai_v2_is_fire_damage_page(). Wszystkie selektory izolowane pod
   .oai-site .oai-fire-damage-hero, oddzielna przestrzen klas od
   .oai-water-damage-*, .oai-property-damage-*, .oai-vehicle-damage-*,
   .oai-cost-estimate-*, .oai-total-loss-*, .oai-denial-* i
   .oai-underpayment-*, bez wycieku stylow na inne podstrony. Sekcje 2-12
   tej strony nie zostaly jeszcze wdrozone - ten plik zawiera wylacznie
   CSS Sekcji 1.

   Zdjecie WebP (odszkodowanie-za-pozar-hero.webp) ma rzeczywiste wymiary
   1122x1402 (proporcje ok. 4/5, portret) i przedstawia nowoczesna kuchnie
   po opanowanym pozarze: okopcony sufit, gorne szafki i okap w prawej
   czesci kadru, biala zabudowa dolna i piekarnik bez wiekszych uszkodzen,
   jadalnia w lewej czesci kadru.

   Poprawka wysokosci: pierwsza wersja ustawiala aspect-ratio kontenera na
   proporcje zrodlowe zdjecia (1122/1402, portret), co przy portretowym
   zdjeciu tworzylo bardzo wysoki modul wizualny (wysokosc ok. 1,25x
   szerokosci) i psulo rownowage Hero wzgledem hero
   /odszkodowanie-za-zalanie/ - pusta przestrzen pod trescia na desktopie,
   zbyt dluga sekcja na mobile i tablecie. Modul wizualny dostaje teraz
   pejzazowy aspect-ratio 5/4 (analogicznie do 4/3 uzytego w hero
   /odszkodowanie-za-zalanie/ od 768px), a portretowe zdjecie jest
   kadrowane przez object-fit: cover. object-position: 68% 28% eksponuje
   prawa, gorna czesc kadru (okopcony sufit, gorne szafki i okap), ogranicza
   ilosc pustej podlogi w dolnej czesci kadru i nie pozwala, by jadalnia po
   lewej zdominowala widoczny fragment zdjecia.

   Uklad dwustrefowy wlacza sie od 1024px, ten sam prog co
   /odszkodowanie-za-zalanie/. 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-fire-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-fire-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-fire-damage-hero__breadcrumb {
	width: 100%;
	margin: 0 0 32px;
}

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

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

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

/* white-space: nowrap wylacznie na etykietach ze wzgledu na separator "/"
   wygenerowany jako ich ::before (nie na calym breadcrumbie, co
   spowodowaloby poziomy overflow na 320px) - kazda etykieta razem ze
   swoim separatorem zawija sie teraz jako jedna atomowa jednostka do
   nowego wiersza (dzieki flex-wrap na .breadcrumb-list), ale "/" nigdy nie
   moze rozpoczac nowego wiersza samotnie, oddzielony od nastepujacej po
   nim etykiety. */

.oai-site .oai-fire-damage-hero__breadcrumb-static,
.oai-site .oai-fire-damage-hero__breadcrumb-current {
	white-space: nowrap;
}

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

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

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

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

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

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

.oai-site .oai-fire-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 1122x1402 (portret, ok. 4/5), kadrowane do
   pejzazowego aspect-ratio 5/4 przez object-fit: cover - patrz komentarz
   na poczatku bloku. */

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

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

.oai-site .oai-fire-damage-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: 68% 28%;
	border-radius: var(--oai-radius-m);
	border: 1px solid var(--oai-color-border);
}

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

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

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

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

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

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

	.oai-site .oai-fire-damage-hero__visual {
		max-width: 420px;
		margin: 0 auto;
	}
}

/* Desktop od 1024px: dwie strefy hero, tresc i modul obok siebie, proporcja
   56%/44%, ten sam prog i proporcja co hero /odszkodowanie-za-zalanie/ */

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

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

	.oai-site .oai-fire-damage-hero__visual {
		flex: 1 1 44%;
		max-width: 100%;
		margin: 0;
	}

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

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

/* Sekcja 2: "Skutki zdarzenia". Jedna spojna infografika (rzut mieszkania
   + pionowa legenda pieciu skutkow), nie zestaw pieciu rownych kart.
   Struktura nawiazuje do modulu obraz+lista Sekcji 2 strony
   /odszkodowanie-za-zalanie/ (.oai-water-damage-scope__module), ale bez
   kopiowania jej wygladu jeden do jednego - tutaj modul otrzymuje wlasne,
   bardzo jasne tlo i subtelna ramke, obraz jest uzupelniony inline SVG z
   pieciomo kolorowymi punktami zamiast cyfr, a legenda ma format pionowej
   listy z kropkami, nie siatki kart.

   Grafika WebP (odszkodowanie-za-pozar-sekcja-2.webp, potwierdzone
   1536x1024px, proporcja 3/2) to izometryczny rzut mieszkania z gory,
   pokazujacy spalona kuchnie (gorne szafki, okap, sciana i sufit),
   rozchodzaca sie sadze w czesci dziennej przy stole jadalnym, sciezke
   sladow wody/pianu w korytarzu przy lazience oraz osmalone drzwi w
   prawym gornym rogu kadru. Obraz wyswietlany w calosci (width:100%,
   height:auto, natywna proporcja 3/2 zachowana bez kadrowania), bo cala
   kompozycja niesie tresc.

   Piec znacznikow SVG (position:absolute nad <img>, wspolny <figure>
   position:relative) to wylacznie kolko + krotki, subtelny odcinek
   "leader" w kierunku krawedzi obrazu - bez cyfr, liter i tekstu w SVG,
   aria-hidden i focusable="false", pointer-events:none. Wspolrzedne w
   ukladzie viewBox 0 0 1536 1024 dobrane bezposrednio pod ten plik:
   ogien/kuchnia ok. (480,150), sadza/czesc dzienna ok. (470,430),
   wysoka temperatura przy granicy spalonej kuchni ok. (650,180, poprawione
   z pierwotnego (705,290), ktore bylo zbyt malo jednoznaczne), woda/piana
   ok. (1000,360, poprawione z pierwotnego (945,260), ktore sugerowalo
   awarie instalacji w lazience - nowa pozycja lezy wyraznie w korytarzu,
   na widocznym niebieskoszarym sladzie, poza lazienka), uszkodzone drzwi
   ok. (1128,105). Kazdy znacznik ma wlasny, spokojny kolor (granat,
   stalowy niebieski, przygaszony turkus, cyjan marki, neutralny grafit -
   bez czerwieni, pomaranczu ani neonu) powtorzony jako maly `.__dot` przy
   odpowiadajacym opisie w legendzie, wiec przypisanie punktu do opisu jest
   czytelne bez liczb.

   Uklad dwukolumnowy modulu (mapa ok. 60%, legenda ok. 40%) wlacza sie od
   1024px, ten sam prog co reszta strony. Ponizej 1024px (w tym 768px i
   920px) modul jest jednokolumnowy: mapa nad legenda, w kolejnosci DOM
   ponizej. */

.oai-site .oai-fire-damage-effects {
	--oai-fire-effects-fire: var(--oai-color-navy);
	--oai-fire-effects-soot: #3B6EA5;
	--oai-fire-effects-heat: #4E9C9F;
	--oai-fire-effects-water: var(--oai-color-cyan);
	--oai-fire-effects-door: #6B7280;

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

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

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

.oai-site .oai-fire-damage-effects__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-fire-damage-effects__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-fire-damage-effects__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: mapa + legenda, wspolny bardzo jasny kontener */

.oai-site .oai-fire-damage-effects__module {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin: 0 0 32px;
	padding: 20px;
	background-color: rgba(1, 2, 66, 0.03);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-fire-damage-effects__media {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-fire-damage-effects__figure {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 100%;
	line-height: 0;
}

.oai-site .oai-fire-damage-effects__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--oai-radius-m);
}

.oai-site .oai-fire-damage-effects__markers {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.oai-site .oai-fire-damage-effects__marker line {
	stroke-width: 3;
	stroke-linecap: round;
	opacity: 0.75;
}

.oai-site .oai-fire-damage-effects__marker circle {
	stroke: var(--oai-color-white);
	stroke-width: 3;
}

.oai-site .oai-fire-damage-effects__marker--fire line,
.oai-site .oai-fire-damage-effects__marker--fire circle {
	stroke: var(--oai-fire-effects-fire);
}

.oai-site .oai-fire-damage-effects__marker--fire circle {
	fill: var(--oai-fire-effects-fire);
	stroke: var(--oai-color-white);
}

.oai-site .oai-fire-damage-effects__marker--soot line {
	stroke: var(--oai-fire-effects-soot);
}

.oai-site .oai-fire-damage-effects__marker--soot circle {
	fill: var(--oai-fire-effects-soot);
}

.oai-site .oai-fire-damage-effects__marker--heat line {
	stroke: var(--oai-fire-effects-heat);
}

.oai-site .oai-fire-damage-effects__marker--heat circle {
	fill: var(--oai-fire-effects-heat);
}

.oai-site .oai-fire-damage-effects__marker--water line {
	stroke: var(--oai-fire-effects-water);
}

.oai-site .oai-fire-damage-effects__marker--water circle {
	fill: var(--oai-fire-effects-water);
}

.oai-site .oai-fire-damage-effects__marker--door line {
	stroke: var(--oai-fire-effects-door);
}

.oai-site .oai-fire-damage-effects__marker--door circle {
	fill: var(--oai-fire-effects-door);
}

/* Legenda: pionowa lista, bez kart, z cienkim separatorem miedzy pozycjami */

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

.oai-site .oai-fire-damage-effects__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-effects__item:first-child {
	padding-top: 0;
}

.oai-site .oai-fire-damage-effects__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.oai-site .oai-fire-damage-effects__dot {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	margin-top: 6px;
	border-radius: 50%;
}

.oai-site .oai-fire-damage-effects__dot--fire {
	background-color: var(--oai-fire-effects-fire);
}

.oai-site .oai-fire-damage-effects__dot--soot {
	background-color: var(--oai-fire-effects-soot);
}

.oai-site .oai-fire-damage-effects__dot--heat {
	background-color: var(--oai-fire-effects-heat);
}

.oai-site .oai-fire-damage-effects__dot--water {
	background-color: var(--oai-fire-effects-water);
}

.oai-site .oai-fire-damage-effects__dot--door {
	background-color: var(--oai-fire-effects-door);
}

.oai-site .oai-fire-damage-effects__item-body {
	min-width: 0;
	max-width: 100%;
}

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

/* Domkniecie: pelna szerokosc modulu, bardzo jasne cyjanowe tlo, cienka
   ramka, bez CTA i linku */

.oai-site .oai-fire-damage-effects__closing {
	margin: 0;
	max-width: 100%;
	padding: 20px;
	background-color: rgba(33, 225, 253, 0.06);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

	.oai-site .oai-fire-damage-effects__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-fire-damage-effects__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-fire-damage-effects__module {
		padding: 28px;
	}
}

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

	.oai-site .oai-fire-damage-effects__media {
		flex: 0 1 60%;
	}

	.oai-site .oai-fire-damage-effects__list {
		flex: 1 1 40%;
	}
}

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

	/* Wewnetrzny padding modulu zmniejszony z 16px do 8px wylacznie na tym
	   progu, zeby mapa mogla wykorzystac wiecej dostepnej szerokosci -
	   odleglosc miedzy krawedzia grafiki a krawedzia jasnego kontenera
	   modulu pozostaje w przedziale 6-10px, obraz nadal nie dotyka
	   bezposrednio krawedzi. Zewnetrzny padding calej sekcji (powyzej)
	   pozostaje nietkniety. */

	.oai-site .oai-fire-damage-effects__module {
		padding: 8px;
	}

	/* Piec kolek markerow powiekszone o ok. 36% (14px -> 19px promienia,
	   w granicach preferowanych 25-40%) wraz z nieco grubsza biala
	   obwodka, wylacznie na tym progu - linie prowadzace pozostaja bez
	   zmian, zgodnie z wymogiem nieproporcjonalnego powiekszania. */

	.oai-site .oai-fire-damage-effects__marker circle {
		r: 19px;
		stroke-width: 4px;
	}
}

/* Sekcja 3: "Pierwsze dzialania" / dziennik po akcji gasniczej. Celowo inny
   kierunek niz numerowany proces Sekcji 4 strony /odszkodowanie-za-zalanie/
   (.oai-water-damage-actions, biale tlo, duze widoczne cyfry 01-04) i inny
   niz proces "Jak dziala OdwolAI?" strony glownej (.oai-process, segmentowy
   lacznik miedzy kazda para krokow, numery w kolkach) - obie odczytane
   wylacznie jako wzorzec jakosci/dostepnosci, nie skopiowane.

   Tutaj: ciemnogranatowe tlo calej sekcji, intro po lewej (desktop), jeden
   wspolny jasny panel "dziennika" po prawej z czterema wpisami. Kolejnosc
   komunikowana wylacznie etykietami czasu (bez widocznych cyfr), semantyka
   kolejnosci zachowana przez prawdziwe <ol>. Jedna ciagla cyjanowa linia
   (.list::before, position:absolute) przechodzi przez wszystkie cztery
   wpisy, z malym punktem (.point) na kazdym wpisie renderowanym nad linia.

   Uklad wiersza kazdego wpisu zbudowany przez CSS Grid, bez uzycia
   column-gap - odstepy sa paddingiem wewnatrz komorek `time`/`title`/`desc`,
   dzieki czemu pozycja pozioma linii (`.list::before { left }`) zalezy
   wylacznie od szerokosci kolumn grida, nie od gapu:
   - mobile (domyslnie): grid-template-columns: 24px 1fr; obszary
     "rail time" / "rail title" / "rail desc" - etykieta czasu nad H3,
     H3 nad opisem, szyna z linia i punktem przy lewej krawedzi panelu;
   - desktop od 1024px: grid-template-columns: 28% 24px 1fr; obszary
     "time rail title" / "time rail desc" - etykieta czasu w lewej kolumnie
     (28%), szyna z punktem miedzy kolumnami, H3 i opis w prawej kolumnie
     (pozostala szerokosc, ok. 70-72%). */

.oai-site .oai-fire-damage-actions {
	--oai-fire-actions-panel-bg: #F5F7FA;
	--oai-fire-actions-time-color: #3B6EA5;

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

.oai-site .oai-fire-damage-actions__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.oai-site .oai-fire-damage-actions__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-fire-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-fire-damage-actions__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-fire-damage-actions__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;
}

/* Nota: cienka cyjanowa linia po lewej, delikatnie jasniejsze tlo niz
   granatowa sekcja, bez ikony i bez czerwieni/zoltego tla */

.oai-site .oai-fire-damage-actions__note {
	margin: 24px 0 0;
	max-width: 100%;
	padding: 16px 20px;
	background-color: rgba(255, 255, 255, 0.06);
	border-left: 2px solid var(--oai-color-cyan);
	border-radius: 0 var(--oai-radius-m) var(--oai-radius-m) 0;
}

.oai-site .oai-fire-damage-actions__note-text {
	margin: 0;
	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;
}

/* Panel dziennika: jasny, spojny kontener, bez ciezkiego cienia */

.oai-site .oai-fire-damage-actions__panel {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 24px 20px;
	background-color: var(--oai-fire-actions-panel-bg);
	border: 1px solid rgba(1, 2, 66, 0.08);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-fire-damage-actions__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Jedna ciagla pionowa linia przechodzaca przez wszystkie wpisy - pozycja
   pozioma zalezy od szerokosci kolumny szyny (24px), patrz komentarz na
   poczatku bloku */

.oai-site .oai-fire-damage-actions__list::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 11px;
	width: 2px;
	background-color: var(--oai-color-cyan);
	opacity: 0.5;
}

.oai-site .oai-fire-damage-actions__item {
	display: grid;
	grid-template-columns: 24px 1fr;
	grid-template-areas:
		"rail time"
		"rail title"
		"rail desc";
	row-gap: 4px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(1, 2, 66, 0.08);
}

.oai-site .oai-fire-damage-actions__item:first-child {
	padding-top: 0;
}

.oai-site .oai-fire-damage-actions__item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.oai-site .oai-fire-damage-actions__rail {
	grid-area: rail;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 4px;
}

.oai-site .oai-fire-damage-actions__point {
	position: relative;
	z-index: 1;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
	box-shadow: 0 0 0 3px var(--oai-fire-actions-panel-bg);
}

.oai-site .oai-fire-damage-actions__time {
	grid-area: time;
	margin: 0;
	max-width: 100%;
	padding-left: 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-fire-actions-time-color);
}

.oai-site .oai-fire-damage-actions__title {
	grid-area: title;
	margin: 4px 0 0;
	max-width: 100%;
	padding-left: 16px;
	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-fire-damage-actions__desc {
	grid-area: desc;
	margin: 6px 0 0;
	max-width: 100%;
	padding-left: 16px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

	.oai-site .oai-fire-damage-actions__heading {
		font-size: 1.75rem;
	}

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

	.oai-site .oai-fire-damage-actions__panel {
		padding: 32px;
	}
}

/* Desktop od 1024px: intro po lewej (ok. 36%), panel po prawej (ok. 64%),
   wyrownanie do gory. Kazdy wpis panelu przechodzi na 3-kolumnowy grid:
   etykieta czasu (28%) / szyna (24px) / tresc (pozostala szerokosc) -
   patrz komentarz na poczatku bloku dla wyliczenia pozycji linii. */

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

	.oai-site .oai-fire-damage-actions__intro {
		flex: 0 1 36%;
	}

	.oai-site .oai-fire-damage-actions__panel {
		flex: 1 1 64%;
	}

	.oai-site .oai-fire-damage-actions__item {
		grid-template-columns: 28% 24px 1fr;
		grid-template-areas:
			"time rail title"
			"time rail desc";
	}

	.oai-site .oai-fire-damage-actions__list::before {
		left: calc(28% + 11px);
	}

	.oai-site .oai-fire-damage-actions__time {
		padding-left: 0;
		padding-right: 20px;
	}

	.oai-site .oai-fire-damage-actions__title,
	.oai-site .oai-fire-damage-actions__desc {
		padding-left: 20px;
	}

	.oai-site .oai-fire-damage-actions__title {
		margin-top: 0;
	}
}

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

	.oai-site .oai-fire-damage-actions__panel {
		padding: 16px;
	}
}

/* Sekcja 4: "Zakres mienia" / warstwowy rejestr czterech grup mienia.
   Celowo inny kierunek niz numerowany proces Sekcji 3 tej samej strony
   (.oai-fire-damage-actions, ciemne tlo, <ol>, linia+punkty) i inny niz
   siatka kart Sekcji 2 strony /odszkodowanie-za-zalanie/
   (.oai-water-damage-scope) - odczytane wylacznie jako wzorzec
   jakosci/dostepnosci, nie skopiowane.

   Jasne tlo sekcji zapewnia poprawne przejscie z ciemnogranatowej Sekcji 3
   do jasnej Sekcji 4. Intro (eyebrow/H2/lead) nad panelem, wyrownane do
   lewej, bez centrowania. Jeden wspolny panel zawiera cztery poziome
   warstwy oddzielone cienkimi separatorami (nie cztery osobne karty) oraz
   zintegrowane domkniecie jako pelnoszerokie pasmo u dolu tego samego
   panelu, z wlasnym bardzo jasnym cyjanowym tlem i cienka cyjanowa linia
   gorna - bez ikony, naglowka i CTA.

   Kazda warstwa ma cienki kolorowy znacznik (pionowy pasek, bez ikony,
   liczby i tekstu w znaczniku) oraz naglowek H3 i opis. Uklad kazdej
   warstwy zbudowany przez CSS Grid: mobile - 2 kolumny (znacznik + tresc),
   H3 nad opisem; desktop od 1024px - 3 kolumny (znacznik, H3 ok. 32%, opis
   pozostala szerokosc), bez ich sciskania. Subtelne schodkowe przesuniecie
   warstw rozwazono i celowo pominieto - przy tej liczbie warstw i tej
   dlugosci opisow wygladalo jak sztuczny proces/schody, czego ta sekcja ma
   unikac, wiec uklad pozostaje plaski na kazdym progu. */

.oai-site .oai-fire-damage-property-scope {
	--oai-fire-scope-building: var(--oai-color-navy);
	--oai-fire-scope-systems: #3B6EA5;
	--oai-fire-scope-contents: #4E9C9F;
	--oai-fire-scope-costs: var(--oai-color-cyan);

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

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

.oai-site .oai-fire-damage-property-scope__intro {
	max-width: 740px;
	margin: 0 0 32px;
}

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

/* Panel: jeden wspolny kontener, overflow:hidden pozwala domknieciu na
   dole wykorzystac zaokraglone rogi panelu bez wlasnego border-radius */

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

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

.oai-site .oai-fire-damage-property-scope__item {
	display: grid;
	grid-template-columns: 6px 1fr;
	grid-template-areas:
		"marker heading"
		"marker desc";
	column-gap: 16px;
	row-gap: 4px;
	padding: 16px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-property-scope__item:first-child {
	padding-top: 16px;
}

.oai-site .oai-fire-damage-property-scope__item:last-child {
	padding-bottom: 16px;
	border-bottom: none;
}

.oai-site .oai-fire-damage-property-scope__marker {
	grid-area: marker;
	width: 6px;
	min-height: 100%;
	border-radius: 999px;
	background-color: var(--oai-color-border);
}

.oai-site .oai-fire-damage-property-scope__item--building .oai-fire-damage-property-scope__marker {
	background-color: var(--oai-fire-scope-building);
}

.oai-site .oai-fire-damage-property-scope__item--systems .oai-fire-damage-property-scope__marker {
	background-color: var(--oai-fire-scope-systems);
}

.oai-site .oai-fire-damage-property-scope__item--contents .oai-fire-damage-property-scope__marker {
	background-color: var(--oai-fire-scope-contents);
}

.oai-site .oai-fire-damage-property-scope__item--costs .oai-fire-damage-property-scope__marker {
	background-color: var(--oai-fire-scope-costs);
}

.oai-site .oai-fire-damage-property-scope__item-heading {
	grid-area: 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-fire-damage-property-scope__item-desc {
	grid-area: 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: zintegrowane pelnoszerokie pasmo u dolu tego samego panelu,
   bardzo jasne cyjanowe tlo, cienka cyjanowa linia gorna, bez ikony,
   naglowka i CTA */

.oai-site .oai-fire-damage-property-scope__closing {
	margin: 0;
	max-width: 100%;
	padding: 20px;
	background-color: rgba(33, 225, 253, 0.06);
	border-top: 2px solid var(--oai-color-cyan);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

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

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

	.oai-site .oai-fire-damage-property-scope__list {
		padding: 8px 32px;
	}

	.oai-site .oai-fire-damage-property-scope__closing {
		padding: 24px 32px;
	}
}

/* Desktop od 1024px: kazda warstwa przechodzi na 3-kolumnowy grid -
   znacznik / H3 (ok. 32%) / opis (pozostala szerokosc) */

@media (min-width: 1024px) {
	.oai-site .oai-fire-damage-property-scope__item {
		grid-template-columns: 6px 32% 1fr;
		grid-template-areas: "marker heading desc";
		column-gap: 24px;
		align-items: start;
	}

	.oai-site .oai-fire-damage-property-scope__item-heading {
		padding-right: 16px;
	}
}

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

	.oai-site .oai-fire-damage-property-scope__list {
		padding: 8px 12px;
	}

	.oai-site .oai-fire-damage-property-scope__closing {
		padding: 16px 12px;
	}
}

/* Sekcja 5: "Dokumentacja szkody" / uporzadkowane archiwum czterech
   obszarow materialow. Celowo inny kierunek niz warstwowy rejestr Sekcji 4
   tej samej strony (.oai-fire-damage-property-scope, kolorowe pionowe
   znaczniki, jedna kolumna wierszy) i inny niz siatka kart - odczytane
   wylacznie jako wzorzec jakosci/dostepnosci, nie skopiowane.

   Tlo sekcji to bardzo jasny chlodny niebieskoszary (--oai-fire-doc-bg),
   wyraznie inny od czystej bieli Sekcji 4, bez gradientu - zapewnia
   czytelne, ale spokojne przejscie miedzy dwiema jasnymi sekcjami. Panel
   pozostaje niemal bialy z cienka chlodna ramka.

   Cztery obszary sa plaskimi <li> wewnatrz jednego <ul>, bez wrapperow
   grupujacych wiersze - asymetryczny uklad 2x2 na szerokim desktopie jest
   osiagniety jednym plaskim gridem o 100 rownych kolumnach proceniowych
   (grid-template-columns: repeat(100, 1fr)), gdzie kazdy z czterech <li>
   dostaje jawny grid-column odpowiadajacy % szerokosci. Naturalny algorytm
   auto-placement CSS Grid sam ustawia item 3 i 4 w drugim wierszu, bo ich
   zadeklarowane kolumny nachodzilyby na item 1 w pierwszym wierszu - dzieki
   temu wiersz 1 moze miec proporcje 58/42, a wiersz 2 odwrocone 42/58, bez
   uzycia subgrid i bez dodatkowych elementow HTML.

   Pojedyncza mocna asymetria (58/42) jest zastrzezona wylacznie dla bardzo
   szerokiego desktopu od 1200px. W przedziale 840-1199px (obejmujacym
   zarowno tablet ok. 920px, jak i wezszy desktop 1024px) zastosowano rowne
   kolumny 50/50 zgodnie z dopuszczona w zadaniu furtka: przy 1024px pelna
   asymetria zbyt mocno scieskala tekst w wezszej kolumnie 42%, wiec prog
   przelaczenia na 58/42 podniesiono do 1200px. Ponizej 840px (w tym 768px)
   uklad jest pojedyncza kolumna - <li> jako elementy blokowe ukladaja sie
   pionowo bez dodatkowego CSS.

   Etykiety i cienki akcent liniowy naprzemiennie wykorzystuja cyjan marki
   i stalowy blekit (nie cztery rozne mocne kolory jak w Sekcji 2 i 4),
   zgodnie z wymogiem jednolitej, spokojnej palety tej sekcji. */

.oai-site .oai-fire-damage-documentation {
	--oai-fire-doc-bg: #F2F6F8;
	--oai-fire-doc-accent: var(--oai-color-cyan);
	--oai-fire-doc-accent-alt: #3B6EA5;

	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-fire-doc-bg);
}

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

.oai-site .oai-fire-damage-documentation__intro {
	max-width: 800px;
	margin: 0 0 32px;
}

.oai-site .oai-fire-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-fire-damage-documentation__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-fire-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;
}

/* Panel: jeden wspolny niemal bialy kontener, overflow:hidden pozwala
   nocie na dole wykorzystac zaokraglone rogi panelu bez wlasnego
   border-radius */

.oai-site .oai-fire-damage-documentation__panel {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-fire-damage-documentation__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-fire-damage-documentation__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px 20px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-documentation__item:last-child {
	border-bottom: none;
}

.oai-site .oai-fire-damage-documentation__label {
	position: relative;
	margin: 0 0 10px;
	padding-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-fire-doc-accent);
}

.oai-site .oai-fire-damage-documentation__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: var(--oai-fire-doc-accent);
}

.oai-site .oai-fire-damage-documentation__item:nth-child(even) .oai-fire-damage-documentation__label {
	color: var(--oai-fire-doc-accent-alt);
}

.oai-site .oai-fire-damage-documentation__item:nth-child(even) .oai-fire-damage-documentation__label::before {
	background-color: var(--oai-fire-doc-accent-alt);
}

.oai-site .oai-fire-damage-documentation__item-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-fire-damage-documentation__item-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;
}

/* Nota: zintegrowany dolny pas panelu, ciemnogranatowe tlo, cienki
   cyjanowy akcent gorny, bez ikony i bez osobnego naglowka */

.oai-site .oai-fire-damage-documentation__note {
	margin: 0;
	max-width: 100%;
	padding: 20px;
	background-color: var(--oai-color-navy);
	border-top: 2px solid var(--oai-color-cyan);
}

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

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

	.oai-site .oai-fire-damage-documentation__heading {
		font-size: 1.75rem;
	}

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

	.oai-site .oai-fire-damage-documentation__item {
		padding: 28px 32px;
	}

	.oai-site .oai-fire-damage-documentation__note {
		padding: 24px 32px;
	}
}

/* Od 840px (obejmuje tablet ok. 920px oraz wezszy desktop 1024px): dwie
   rowne kolumny 50/50, dwa wiersze po dwa obszary, bez asymetrii - patrz
   komentarz na poczatku bloku dla wyjasnienia techniki 100-kolumnowego
   gridu i wyboru progu 840px. */

@media (min-width: 840px) {
	.oai-site .oai-fire-damage-documentation__list {
		display: grid;
		grid-template-columns: repeat(100, 1fr);
	}

	.oai-site .oai-fire-damage-documentation__item {
		border-bottom: none;
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(1) {
		grid-column: 1 / 51;
		border-right: 1px solid var(--oai-color-border);
		border-bottom: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(2) {
		grid-column: 51 / 101;
		border-bottom: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(3) {
		grid-column: 1 / 51;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(4) {
		grid-column: 51 / 101;
	}
}

/* Od 1200px: mocna asymetria 58/42 w pierwszym wierszu i odwrocona 42/58
   w drugim, ten sam plaski grid, wylacznie zmiana wartosci grid-column. */

@media (min-width: 1200px) {
	.oai-site .oai-fire-damage-documentation__item:nth-child(1) {
		grid-column: 1 / 59;
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(2) {
		grid-column: 59 / 101;
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(3) {
		grid-column: 1 / 43;
	}

	.oai-site .oai-fire-damage-documentation__item:nth-child(4) {
		grid-column: 43 / 101;
	}
}

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

	.oai-site .oai-fire-damage-documentation__item {
		padding: 20px 16px;
	}

	.oai-site .oai-fire-damage-documentation__note {
		padding: 16px;
	}
}

/* Sekcja 6: "Koszty przed remontem" (Zabezpieczenie i uprzatnięcie). Celowo
   inny kierunek niz jasny panel Sekcji 5 tej samej strony
   (.oai-fire-damage-documentation, biale tlo modulu, pojedyncza plaska
   lista) i inny niz warstwowy rejestr Sekcji 4
   (.oai-fire-damage-property-scope) - odczytane wylacznie jako wzorzec
   jakosci/dostepnosci, nie skopiowane.

   Tlo sekcji wraca do bieli, wyraznie inne od chlodnego niebieskoszarego
   tla Sekcji 5, zapewniajac czytelne przejscie miedzy sekcjami. Intro jest
   dwukolumnowe od 1024px (eyebrow+H2 ok. 45%, lead ok. 55%), ponizej tego
   progu przechodzi do jednej kolumny.

   Cztery obszary sa plaskimi <li> wewnatrz jednego <ul>, w kolejnosci DOM
   Zabezpieczenie/Bezpieczenstwo/Uprzatniecie/Mienie i zaplecze - ta sama
   kolejnosc obowiazuje na mobile i tablecie 768px (pojedyncza kolumna).
   Od 900px lista przechodzi na grid 2 kolumny x 3 wiersze przez
   grid-template-areas, gdzie czwarty obszar (Mienie i zaplecze) dostaje
   jedno pole rozciagniete na wszystkie trzy wiersze prawej kolumny -
   dzieki temu jeden ciagly pionowy separator (border-left czwartego
   obszaru) obejmuje pelna wysokosc lewej strefy bez dodatkowych
   elementow HTML. Proporcje kolumn to 62/38 w przedziale 900-1023px
   (tablet ok. 920px) i 67/33 od 1024px (szeroki desktop) - proporcje
   podniesiono w dwoch krokach zgodnie z zadaniem, zamiast jednej stalej
   wartosci, zeby prawa strefa z pojedynczym krotkim obszarem nigdy nie
   byla ciasna. Prog 900px jest dodatkowym, celowym breakpointem tej
   sekcji (podobnie jak prog 840px w Sekcji 5), niezaleznym od
   standardowych 768/1024/360 uzywanych w reszcie pliku.

   Modul ma ciemnogranatowe tlo, polprzezroczyste separatory (rgba bieli)
   i jasne teksty - konwencja koloru zapozyczona z ciemnego panelu
   Sekcji 3 (.oai-fire-damage-actions), nie z uktladu tamtej sekcji.
   Nota kosztowa ma odwrocona relacje kolorow (bardzo jasne cyjanowe tlo,
   granatowy tekst) i wlasna widoczna etykiete "POTWIERDZENIE KOSZTOW",
   w odroznieniu od domkniec Sekcji 4 i 5, ktore etykiety nie mialy.

   KOREKTA UKLADU DESKTOPOWEGO: pierwsza wersja uzywala grid-template-areas
   "trzy wiersze w lewej kolumnie + jedno pole czwartego obszaru rozciagniete
   na wszystkie trzy wiersze prawej kolumny". Poniewaz czwarty obszar
   (Mienie i zaplecze) ma najkrotsza tresc, a lewa kolumna ma najdluzsza
   laczna wysokosc (trzy opisy), pod krotka trescia czwartego obszaru
   powstawala duza, nieuzasadniona pusta przestrzen - obszar byl rozciagany
   przez grid do wysokosci trzech sasiednich wierszy. Uklad zastapiono
   dwiema kolumnami po dwa obszary (2x2, nie 3+1): lewa kolumna
   Zabezpieczenie/Bezpieczenstwo (ok. 44%), prawa kolumna
   Uprzatniecie/Mienie i zaplecze (ok. 56%, szersza ze wzgledu na
   najdluzszy opis "Uprzatniecie i utylizacja"). Kolejnosc DOM pozostaje
   niezmieniona (1-2-3-4), wylacznie grid-area kazdego elementu przypisuje
   go do wlasciwej komorki 2x2 - semantyka <ul> i kolejnosc dla czytnikow
   ekranu sa identyczne jak wczesniej.

   KOREKTA KONTRASTU NOTY: tlo noty bylo polprzezroczyste
   (rgba(33, 225, 253, 0.08)), nakladane na ciemnogranatowe tlo modulu
   rodzica - efektywny, wyrenderowany kolor pozostawal niemal granatowy,
   przez co granatowy tekst noty byl na granatowym tle niemal niewidoczny.
   Naprawiono przez zdefiniowanie lokalnej, w pelni nieprzezroczystej
   zmiennej --oai-fire-cleanup-note-bg (#EAF9FC, bardzo jasny chlodny
   cyjan) i zastosowanie jej zamiast rgba - kolor tla jest teraz staly
   niezaleznie od tego, co znajduje sie pod spodem, wiec granatowy tekst
   zachowuje pelny kontrast. */

.oai-site .oai-fire-damage-protection-cleanup {
	--oai-fire-cleanup-note-bg: #EAF9FC;

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

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

.oai-site .oai-fire-damage-protection-cleanup__intro {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 0 32px;
}

.oai-site .oai-fire-damage-protection-cleanup__intro-left,
.oai-site .oai-fire-damage-protection-cleanup__intro-right {
	min-width: 0;
	max-width: 100%;
}

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

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

/* Modul: jeden wspolny ciemnogranatowy kontener, overflow:hidden pozwala
   nocie na dole wykorzystac zaokraglone rogi modulu bez wlasnego
   border-radius */

.oai-site .oai-fire-damage-protection-cleanup__module {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-fire-damage-protection-cleanup__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-fire-damage-protection-cleanup__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.oai-site .oai-fire-damage-protection-cleanup__item:last-child {
	border-bottom: none;
}

.oai-site .oai-fire-damage-protection-cleanup__label {
	position: relative;
	margin: 0 0 10px;
	padding-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-protection-cleanup__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-protection-cleanup__item-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-fire-damage-protection-cleanup__item-desc {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Nota: zintegrowany dolny pas modulu, odwrocona relacja kolorow wzgledem
   ciemnego modulu - bardzo jasne cyjanowe tlo, granatowy tekst, cienki
   cyjanowy akcent gorny, widoczna etykieta, bez ikony i bez CTA */

.oai-site .oai-fire-damage-protection-cleanup__note {
	margin: 0;
	max-width: 100%;
	padding: 20px;
	background-color: var(--oai-fire-cleanup-note-bg);
	border-top: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-protection-cleanup__note-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-navy);
}

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

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

	.oai-site .oai-fire-damage-protection-cleanup__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-fire-damage-protection-cleanup__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-fire-damage-protection-cleanup__item {
		padding: 28px 32px;
	}

	.oai-site .oai-fire-damage-protection-cleanup__note {
		padding: 24px 32px;
	}
}

/* Od 900px (obejmuje tablet ok. 920px): modul przechodzi na grid 2
   kolumny x 2 wiersze (nie 3+1) - lewa kolumna Zabezpieczenie/
   Bezpieczenstwo, prawa kolumna Uprzatniecie/Mienie i zaplecze, proporcja
   44/56. Patrz komentarz na poczatku bloku dla wyjasnienia korekty. */

@media (min-width: 900px) {
	.oai-site .oai-fire-damage-protection-cleanup__list {
		display: grid;
		grid-template-columns: 44% 56%;
		grid-template-rows: auto auto;
		grid-template-areas:
			"area-1 area-3"
			"area-2 area-4";
	}

	.oai-site .oai-fire-damage-protection-cleanup__item:nth-child(1) {
		grid-area: area-1;
	}

	.oai-site .oai-fire-damage-protection-cleanup__item:nth-child(2) {
		grid-area: area-2;
		border-bottom: none;
	}

	.oai-site .oai-fire-damage-protection-cleanup__item:nth-child(3) {
		grid-area: area-3;
		padding-left: 32px;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	.oai-site .oai-fire-damage-protection-cleanup__item:nth-child(4) {
		grid-area: area-4;
		padding-left: 32px;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* Od 1024px: dwukolumnowe intro (45/55). Proporcja modulu (44/56)
   pozostaje taka sama jak od 900px - w przeciwienstwie do poprzedniego
   ukladu 3+1 nie jest juz potrzebne drugie podniesienie proporcji na
   szerokim desktopie, bo obie kolumny maja teraz po dwa porownywalne
   obszary. */

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

	.oai-site .oai-fire-damage-protection-cleanup__intro-left {
		flex: 0 1 45%;
	}

	.oai-site .oai-fire-damage-protection-cleanup__intro-right {
		flex: 1 1 55%;
	}
}

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

	.oai-site .oai-fire-damage-protection-cleanup__item {
		padding: 20px 16px;
	}

	.oai-site .oai-fire-damage-protection-cleanup__note {
		padding: 16px;
	}
}

/* Sekcja 7: "Kosztorys remontu lub odbudowy" (Wycena prac). Celowo inny
   kierunek niz ciemny modul Sekcji 6 tej samej strony
   (.oai-fire-damage-protection-cleanup, dwie kolumny, brak listy) i inny
   niz dziennik dzialan Sekcji 3 (.oai-fire-damage-actions, ciagla linia
   Z PUNKTAMI sugerujaca obowiazkowa kolejnosc czasowa) - odczytane
   wylacznie jako wzorzec jakosci/dostepnosci, nie skopiowane. Konstrukcja
   linku kontekstowego (kolor, podkreslenie, hover, focus-visible) oraz
   wzorzec zmiennej home_url('/kosztorys-ubezpieczyciela/') zapozyczono z
   juz zaakceptowanej sekcji .oai-vehicle-damage-estimate-structure na
   stronie /odszkodowanie-za-uszkodzenie-pojazdu/, odczytanej wylacznie
   jako wzorzec techniczny.

   Sekcja 6 miala jasne tlo i ciemny modul - Sekcja 7 odwraca te relacje:
   pelne ciemnogranatowe tlo calej sekcji, jeden wspolny jasny arkusz
   kosztorysowy w srodku.

   Piec warstw to prawdziwe <li> wewnatrz jednego semantycznego <ol> (kolejnosc
   etapow ma znaczenie, w odroznieniu od rownorzednych <ul> w Sekcjach 4-6),
   z domyslna numeracja ukryta wylacznie wizualnie przez list-style:none
   (semantyka listy uporzadkowanej pozostaje nienaruszona dla technologii
   asystujacych). Kazda warstwa ma wlasny krotki cyjanowy akcent nad
   etykieta (ta sama technika co Sekcje 5-6, ::before na etykiecie).
   Osobno, wzdluz calej listy biegnie jeden ciagly pionowy pasek
   (.__list::before, position:absolute, bez punktow i cyfr) - wylacznie
   funkcja konstrukcyjna spinajaca piec wierszy w jeden dokument, celowo
   bez okragłych punktow na kazdym wpisie (w odroznieniu od
   .oai-fire-damage-actions__list w Sekcji 3), zeby nie wygladac jak oś
   czasu sugerujaca wykonywanie prac w sztywnej kolejnosci. Pasek konczy
   sie naturalnie na koncu <ol>, przed domknieciem (ktore jest odrebnym
   elementem siostrzanym poza lista).

   Uklad wiersza warstwy: mobile - pojedyncza kolumna (etykieta nad H3 nad
   opisem), pasek i pomocniczy naglowek arkusza ukryte. Od 840px (dodatkowy,
   celowy prog tej sekcji, konsekwentnie z prog. 840 w Sekcji 5 i 900 w
   Sekcji 6) - uklad dwuczesciowy: etykieta ok. 26% po lewej, H3 i opis
   razem ok. 74% po prawej (oba dzielą to samo pole grida, ukladaja sie
   jedno pod drugim naturalnie jako kolejne elementy blokowe), pasek i
   pomocniczy naglowek arkusza widoczne z dopasowana proporcja 26/74.
   Prog 1024px zarezerwowano wylacznie dla pelnego ukladu trzech kolumn
   (etykieta ok. 17%, H3 ok. 30%, opis ok. 53%, zgodnie z zadaniem) -
   szerokosc kolumny opisu przy tym podziale pozostaje komfortowa
   (ok. 450px na scenariuszu 1024px), wiec nie byla potrzebna dodatkowa
   furtka podnoszenia progu, w odroznieniu od Sekcji 5. */

.oai-site .oai-fire-damage-repair-estimate {
	--oai-fire-repair-closing-bg: #EAF9FC;

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

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

.oai-site .oai-fire-damage-repair-estimate__intro {
	max-width: 800px;
	margin: 0 0 32px;
}

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

/* Arkusz: jeden wspolny jasny kontener, overflow:hidden pozwala
   domknieciu na dole wykorzystac zaokraglone rogi arkusza bez wlasnego
   border-radius */

.oai-site .oai-fire-damage-repair-estimate__sheet {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
}

/* Pomocniczy naglowek arkusza: ukryty na mobile, widoczny od 840px */

.oai-site .oai-fire-damage-repair-estimate__sheet-header {
	display: none;
}

.oai-site .oai-fire-damage-repair-estimate__sheet-header-col {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-fire-damage-repair-estimate__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-fire-damage-repair-estimate__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 24px 20px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-repair-estimate__item:last-child {
	border-bottom: none;
}

.oai-site .oai-fire-damage-repair-estimate__label {
	position: relative;
	margin: 0 0 10px;
	padding-top: 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-repair-estimate__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-repair-estimate__item-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-fire-damage-repair-estimate__item-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: zintegrowany dolny pas arkusza, nieprzezroczyste bardzo
   jasne cyjanowe tlo, granatowy tekst, cienka cyjanowa linia gorna, bez
   osobnego H3 i bez przycisku */

.oai-site .oai-fire-damage-repair-estimate__closing {
	margin: 0;
	max-width: 100%;
	padding: 20px;
	background-color: var(--oai-fire-repair-closing-bg);
	border-top: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-repair-estimate__closing-text {
	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-fire-damage-repair-estimate__closing-link-wrap {
	margin: 0;
	max-width: 100%;
}

.oai-site .oai-fire-damage-repair-estimate__closing-link,
.oai-site .oai-fire-damage-repair-estimate__closing-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-fire-damage-repair-estimate__closing-link:hover,
.oai-site .oai-fire-damage-repair-estimate__closing-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-fire-damage-repair-estimate__closing-link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

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

	.oai-site .oai-fire-damage-repair-estimate__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-fire-damage-repair-estimate__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-fire-damage-repair-estimate__item {
		padding: 28px 32px;
	}

	.oai-site .oai-fire-damage-repair-estimate__closing {
		padding: 24px 32px;
	}
}

/* Od 840px: uklad dwuczesciowy (etykieta ok. 26% / H3+opis razem ok. 74%),
   pasek pionowy i pomocniczy naglowek arkusza staja sie widoczne - patrz
   komentarz na poczatku bloku. */

@media (min-width: 840px) {
	.oai-site .oai-fire-damage-repair-estimate__sheet-header {
		display: grid;
		grid-template-columns: 26% 1fr;
		padding: 16px 32px;
		padding-left: 60px;
		border-bottom: 1px solid var(--oai-color-border);
		background-color: rgba(1, 2, 66, 0.03);
	}

	.oai-site .oai-fire-damage-repair-estimate__list::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 32px;
		width: 2px;
		background-color: var(--oai-color-cyan);
		opacity: 0.4;
	}

	.oai-site .oai-fire-damage-repair-estimate__item {
		display: grid;
		grid-template-columns: 26% 1fr;
		column-gap: 24px;
		padding-left: 60px;
	}

	.oai-site .oai-fire-damage-repair-estimate__label {
		grid-column: 1;
	}

	.oai-site .oai-fire-damage-repair-estimate__item-heading,
	.oai-site .oai-fire-damage-repair-estimate__item-desc {
		grid-column: 2;
	}
}

/* Od 1024px: pelny uklad trzech kolumn (etykieta ok. 17%, H3 ok. 30%,
   opis ok. 53%) oraz dwukolumnowe domkniecie (tekst ok. 70%, link ok.
   30%, link wyrownany do prawej). */

@media (min-width: 1024px) {
	.oai-site .oai-fire-damage-repair-estimate__sheet-header {
		grid-template-columns: 17% 1fr;
	}

	.oai-site .oai-fire-damage-repair-estimate__item {
		grid-template-columns: 17% 30% 1fr;
		grid-template-areas: "label heading desc";
	}

	.oai-site .oai-fire-damage-repair-estimate__label {
		grid-area: label;
	}

	.oai-site .oai-fire-damage-repair-estimate__item-heading {
		grid-area: heading;
		padding-right: 16px;
	}

	.oai-site .oai-fire-damage-repair-estimate__item-desc {
		grid-area: desc;
	}

	.oai-site .oai-fire-damage-repair-estimate__closing {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 24px;
	}

	.oai-site .oai-fire-damage-repair-estimate__closing-text {
		margin: 0;
		flex: 1 1 70%;
	}

	.oai-site .oai-fire-damage-repair-estimate__closing-link-wrap {
		flex: 0 1 30%;
		text-align: right;
	}
}

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

	.oai-site .oai-fire-damage-repair-estimate__item {
		padding: 20px 16px;
	}

	.oai-site .oai-fire-damage-repair-estimate__closing {
		padding: 16px;
	}
}

/* Sekcja 8: "Sposob wyliczenia odszkodowania" (Skad wziela sie kwota).
   Celowo inny kierunek niz ciemnogranatowy arkusz kosztorysowy Sekcji 7
   tej samej strony (.oai-fire-damage-repair-estimate, jeden duzy jasny
   panel z wierszami i dolnym niebieskim pasem) - odczytane wylacznie jako
   wzorzec jakosci/dostepnosci, nie skopiowane. Ta sekcja nie ma zadnego
   duzego zewnetrznego panelu obejmujacego cala tresc - jest "otwarta mapa"
   dwoch duzych punktow odniesienia (POLISA, WARTOSC MIENIA) z lacznikiem
   (Niedoubezpieczenie) miedzy nimi.

   Struktura DOM (eyebrow, H2, lead, etykieta POLISA, trzy pozycje POLISY,
   Niedoubezpieczenie, etykieta WARTOSC MIENIA, dwie pozycje WARTOSCI
   MIENIA, domkniecie, link) jest scisle liniowa i pokrywa sie z kolejnoscia
   wizualna na kazdej szerokosci - to celowy wybor, zeby "kolejnosc DOM
   zgodna z kolejnoscia czytania" nigdy nie wymagala grid-reorderingu.
   Asymetria i redakcyjny charakter ukladu na szerokim desktopie osiagnieto
   wylacznie przez wyrownanie i szerokosc blokow (lewy blok POLISY, blok
   Niedoubezpieczenia wyosrodkowany i wyraznie wezszy, prawy blok WARTOSCI
   MIENIA wyrownany do prawej przez margin-left:auto), a nie przez
   CSS Grid z jawnym przypisywaniem kolumn/wierszy.

   Uzyto trzech oddzielnych semantycznych list (<ul>): trzy pozycje POLISY,
   jedna pozycja Niedoubezpieczenia (lista jednoelementowa, w pelni
   poprawna semantycznie) i dwie pozycje WARTOSCI MIENIA - lacznie sesc
   <li> i szesc H3 w calej sekcji, zamiast jednego sztucznie sklejonego
   <ul>, ktory wymagalby przerwania listy widocznymi etykietami grup
   pomiedzy elementami <li> (niepoprawne w HTML). Etykiety POLISA i
   WARTOSC MIENIA sa prawdziwymi widocznymi akapitami tekstu, nie
   dekoracja CSS.

   KOREKTA FINALNA: dwie poprzednie proby (blokowe przesuniecia z
   margin-left:auto, potem trzykolumnowy grid z wyosrodkowanym lacznikiem
   w kolumnie srodkowej) zostaly calkowicie usuniete. Nie ma juz zadnej
   trzeciej/centralnej kolumny, zadnego oddzielnego <ul> dla
   Niedoubezpieczenia i zadnego pionowego wyosrodkowania miedzy grupami.

   Struktura DOM jest teraz dwiema rownorzednymi kolumnami
   (.__column), kazda z etykieta grupy i jedna lista <ul>: lewa kolumna
   POLISA (3 <li>), prawa kolumna WARTOSC MIENIA (3 <li>, gdzie
   Niedoubezpieczenie jest trzecim, ostatnim elementem tej samej listy,
   oznaczonym modyfikatorem __item--featured). Lacznie dokladnie dwa <ul>,
   szesc <li> i szesc H3 - Niedoubezpieczenie znajduje sie bezposrednio
   pod "Zuzyciem technicznym" w naturalnym przeplywie DOM, nie jako
   osobny, zawieszony blok.

   Na mobile i tablecie (ponizej progu desktopowego) obie kolumny ukladaja
   sie jedna pod druga w naturalnej kolejnosci DOM (POLISA, trzy obszary,
   WARTOSC MIENIA, dwa zwykle obszary, Niedoubezpieczenie jako ostatni
   element) - dokladnie kolejnosc wymagana w zadaniu, bez potrzeby
   jakiegokolwiek CSS reorderingu.

   Od 1100px .__map staje sie prostym gridem dwoch rownych kolumn
   (grid-template-columns: repeat(2, minmax(0, 1fr))) z odstepem
   clamp(56px, 7vw, 112px) - dwa bezposrednie dzieci .__map (.__column)
   trafiaja naturalnie po jednym do kazdej kolumny w kolejnosci DOM, bez
   jawnego przypisywania grid-column/grid-row, bez position:absolute i bez
   sztywnych wysokosci. Prog 1100px (nie 1024px) wybrano, zeby obie kolumny
   mialy wygodna dlugosc wiersza tekstu przy rzeczywistej szerokosci
   kontenera strony (max-width 1280px minus padding sekcji).

   Niedoubezpieczenie (.__item--featured) pozostaje jedynym wyroznionym
   elementem w calej sekcji - bardzo jasne neutralne tlo, cienki cyjanowy
   akcent gorny na pelnej szerokosci (zamiast krotkiego znacznika ::before
   uzywanego przez pozostale pozycje), umiarkowane zaokraglenie, bez
   ciezkiego cienia i bez wygladu osobnej duzej karty - wizualnie spojne z
   reszta sekcji, jako naturalne domkniecie prawej kolumny. */

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

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

.oai-site .oai-fire-damage-payout-factors__intro {
	max-width: 800px;
	margin: 0 0 40px;
}

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

/* Mapa: brak wlasnego tla, ramki i cienia - wylacznie kontener ukladu.
   Na mobile i tablecie obie kolumny (.__column) ukladaja sie jedna pod
   druga w naturalnej kolejnosci DOM - grid wlacza sie dopiero od 1100px,
   patrz komentarz na poczatku bloku. */

.oai-site .oai-fire-damage-payout-factors__map {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 32px;
}

.oai-site .oai-fire-damage-payout-factors__column {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-fire-damage-payout-factors__column + .oai-fire-damage-payout-factors__column {
	margin-top: 40px;
}

.oai-site .oai-fire-damage-payout-factors__group-label {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-fire-damage-payout-factors__group-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 620px;
}

.oai-site .oai-fire-damage-payout-factors__item {
	margin: 0 0 24px;
	padding-top: 10px;
	position: relative;
}

.oai-site .oai-fire-damage-payout-factors__item:last-child {
	margin-bottom: 0;
}

.oai-site .oai-fire-damage-payout-factors__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-payout-factors__item-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-fire-damage-payout-factors__item-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;
}

/* Niedoubezpieczenie (.__item--featured): jedyny wyrozniony element w calej
   sekcji, ostatni <li> prawej kolumny, bezposrednio pod "Zuzyciem
   technicznym". Zamiast krotkiego znacznika ::before uzywanego przez
   pozostale pozycje dostaje pelnoszeroki cienki akcent gorny, bardzo jasne
   neutralne tlo i umiarkowane zaokraglenie - bez ciezkiego cienia i bez
   wygladu osobnej duzej karty. */

.oai-site .oai-fire-damage-payout-factors__item--featured {
	margin-top: 32px;
	padding: 22px 24px;
	background-color: rgba(1, 2, 66, 0.03);
	border-top: 1px solid var(--oai-color-cyan);
	border-radius: var(--oai-radius-m);
	box-sizing: border-box;
}

.oai-site .oai-fire-damage-payout-factors__item--featured::before {
	content: none;
}

.oai-site .oai-fire-damage-payout-factors__closing {
	margin: 0 0 20px;
	max-width: 680px;
	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-fire-damage-payout-factors__link-wrap {
	margin: 0;
	max-width: 100%;
}

.oai-site .oai-fire-damage-payout-factors__link,
.oai-site .oai-fire-damage-payout-factors__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-fire-damage-payout-factors__link:hover,
.oai-site .oai-fire-damage-payout-factors__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-fire-damage-payout-factors__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

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

	.oai-site .oai-fire-damage-payout-factors__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-fire-damage-payout-factors__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-fire-damage-payout-factors__group-label {
		font-size: 1.25rem;
	}
}

/* Od 1100px: prosty grid dwoch rownych kolumn - POLISA po lewej, WARTOSC
   MIENIA po prawej, bez trzeciej/centralnej kolumny. Dwa bezposrednie
   dzieci .__map (.__column) trafiaja naturalnie po jednym do kazdej
   kolumny w kolejnosci DOM. Patrz komentarz na poczatku bloku dla
   pelnego wyjasnienia korekty. */

@media (min-width: 1100px) {
	.oai-site .oai-fire-damage-payout-factors__map {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(56px, 7vw, 112px);
		align-items: start;
	}

	.oai-site .oai-fire-damage-payout-factors__column + .oai-fire-damage-payout-factors__column {
		margin-top: 0;
	}

	.oai-site .oai-fire-damage-payout-factors__group-list {
		max-width: 100%;
	}
}

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

	.oai-site .oai-fire-damage-payout-factors__item--featured {
		padding: 16px;
	}
}

/* Sekcja 9: "Uzasadnienie decyzji" (Decyzja z uwagami na marginesie).
   Celowo inny kierunek niz dwie rownorzedne kolumny tematyczne Sekcji 8
   tej samej strony (.oai-fire-damage-payout-factors) i inny niz arkusz
   kosztorysowy Sekcji 7 (.oai-fire-damage-repair-estimate) - odczytane
   wylacznie jako wzorzec jakosci/dostepnosci, nie skopiowane. Konstrukcja
   linku kontekstowego zapozyczona z tej samej techniki co Sekcje 7-8
   (kolor, podkreslenie, hover, focus-visible), nie z ukladu.

   Jeden dominujacy jasny dokument (<article>) po lewej i lzejszy,
   podporzadkowany blok pytan kontrolnych (<aside>) po prawej - nie dwie
   rownorzedne kolumny jak w Sekcji 8. Tlo sekcji to osobny, jasny chlodny
   odcien (--oai-fire-decision-bg), wyraznie inny od pelnej bieli Sekcji 8.

   Struktura DOM (intro, <article> z etykieta i czterema obszarami,
   <aside> z etykieta i pieciomo pytaniami, domkniecie, link) jest scisle
   liniowa i pokrywa sie z kolejnoscia wizualna na kazdej szerokosci -
   dokument zawsze pierwszy, pytania zawsze drugie, bez CSS reorderingu.
   Od 1150px .__grid staje sie gridem dwoch kolumn (minmax(0, 1.8fr) /
   minmax(280px, 0.9fr)) - dwa bezposrednie dzieci (<article>, <aside>)
   trafiaja naturalnie po jednym do kazdej kolumny w kolejnosci DOM, bez
   position:absolute i bez sztywnych wysokosci. Ponizej tego progu (w tym
   szerszy tablet) pytania kontrolne celowo pozostaja w jednej kolumnie -
   opcjonalny dwukolumnowy uklad pytan na szerszym tablecie zostal
   pominiety, bo bez dostepu do rzeczywistego renderu nie da sie
   bezpiecznie potwierdzic, ze zaden wiersz pytania nie tworzy zbyt
   waskiej kolumny (zadanie samo dopuszcza to zabezpieczenie: "jezeli
   istnieje ryzyko ciasnego ukladu, pozostaw pytania w jednej kolumnie").

   Dokument ma waski granatowy akcent po lewej krawedzi (border-left),
   subtelna ramke, bardzo lekki cien przypominajacy papier (ta sama skala
   cienia co .oai-nav__panel w main.css) i cztery obszary oddzielone
   cienkimi liniami (nie cztery osobne karty). Pytania kontrolne nie maja
   wlasnego tla ani ramki - kazde pozostaje otwarta notatka tekstowa z
   krotszym, subtelniejszym cyjanowym akcentem niz w dokumencie, co
   wizualnie odzwierciedla ich lzejsza range. */

.oai-site .oai-fire-damage-decision-review {
	--oai-fire-decision-bg: #F4F7FA;

	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-fire-decision-bg);
}

.oai-site .oai-fire-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-fire-damage-decision-review__intro {
	max-width: 800px;
	margin: 0 0 40px;
}

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

.oai-site .oai-fire-damage-decision-review__grid {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 32px;
}

/* Dokument: jedyny element z wlasnym tlem, ramka i cieniem w calej
   sekcji - dominujaca ranga wizualna wzgledem lzejszych pytan */

.oai-site .oai-fire-damage-decision-review__document {
	box-sizing: border-box;
	margin: 0 0 32px;
	padding: 28px;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-left: 4px solid var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
}

.oai-site .oai-fire-damage-decision-review__document-label {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-decision-review__areas {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-fire-damage-decision-review__area {
	margin: 0 0 24px;
	padding: 10px 0 24px;
	position: relative;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-decision-review__area:first-child {
	padding-top: 10px;
}

.oai-site .oai-fire-damage-decision-review__area:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.oai-site .oai-fire-damage-decision-review__area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-fire-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-fire-damage-decision-review__area-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;
}

/* Pytania kontrolne: bez wlasnego tla i ramki, subtelniejszy krotszy
   akcent niz w dokumencie - celowo lzejsza ranga wizualna */

.oai-site .oai-fire-damage-decision-review__questions {
	box-sizing: border-box;
	max-width: 100%;
}

.oai-site .oai-fire-damage-decision-review__questions-label {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-decision-review__questions-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-fire-damage-decision-review__question {
	margin: 0 0 16px;
	padding: 8px 0 16px;
	max-width: 100%;
	position: relative;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	border-bottom: 1px solid var(--oai-color-border);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-fire-damage-decision-review__question:first-child {
	padding-top: 8px;
}

.oai-site .oai-fire-damage-decision-review__question:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.oai-site .oai-fire-damage-decision-review__question::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 16px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-decision-review__closing {
	margin: 0 0 20px;
	max-width: 680px;
	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-fire-damage-decision-review__link-wrap {
	margin: 0;
	max-width: 100%;
}

.oai-site .oai-fire-damage-decision-review__link,
.oai-site .oai-fire-damage-decision-review__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-fire-damage-decision-review__link:hover,
.oai-site .oai-fire-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-fire-damage-decision-review__link:focus-visible {
	outline: 2px solid var(--oai-color-cyan);
	outline-offset: 2px;
	border-radius: 2px;
}

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

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

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

	.oai-site .oai-fire-damage-decision-review__document {
		padding: 32px 36px;
	}
}

/* Od 1150px: dokument po lewej (ok. 1.8fr), pytania kontrolne po prawej
   (ok. 0.9fr) - jeden wspolny grid, obie czesci zaczynaja sie na tej
   samej wysokosci. Patrz komentarz na poczatku bloku dla wyjasnienia
   wyboru progu i pominietego dwukolumnowego ukladu pytan na tablecie. */

@media (min-width: 1150px) {
	.oai-site .oai-fire-damage-decision-review__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr);
		column-gap: 64px;
		align-items: start;
	}

	.oai-site .oai-fire-damage-decision-review__document {
		margin-bottom: 0;
	}

	.oai-site .oai-fire-damage-decision-review__questions {
		padding-top: 8px;
	}
}

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

	.oai-site .oai-fire-damage-decision-review__document {
		padding: 20px;
	}
}

/* Sekcja 10: "Analiza Decyzji" - jeden krotki poziomy modul przejscia od
   wiedzy zdobytej w Sekcjach 7-9 do uslugi Analiza Decyzji (produkt 2365).
   Celowo znacznie krotsza niz Sekcje 7-9: brak dokumentu, arkusza, mapy,
   trzech osobnych kart i wlasnego tla per rezultat.

   Tlo sekcji to osobny, bardzo jasny cieply neutralny odcien
   (--oai-fire-decision-analysis-bg: #F7F6F3), celowo inny od chlodnego
   tla Sekcji 9 (#F4F7FA) i od pelnej bieli Sekcji 8, zeby przejscie
   miedzy Sekcja 9 a Sekcja 10 bylo czytelne bez uzycia gradientu.

   Struktura DOM jest scisle liniowa i pokrywa sie z kolejnoscia wizualna
   na kazdej szerokosci: eyebrow, H2, lead, CTA, microcopy (.__content),
   nastepnie lista trzech rezultatow (.__results) - dokladnie w tej
   kolejnosci wymaganej na mobile. Od 1100px .__layout staje sie gridem
   dwoch kolumn (minmax(0, 0.95fr) / minmax(0, 1.05fr)) - dwa bezposrednie
   dzieci trafiaja naturalnie po jednym do kazdej kolumny w kolejnosci DOM,
   bez position:absolute i bez sztywnych wysokosci. Prog 1100px przyjeto
   kierunkowo, spojnie z ostatecznym progiem Sekcji 8 tej samej strony -
   przy szerszym kontenerze obie czesci maja wystarczajaco miejsca, zeby
   lead i opisy rezultatow nie tworzyly zbyt waskich wierszy. Ponizej tego
   progu (w tym caly tablet) sekcja pozostaje w jednej kolumnie, zgodnie
   z bezpiecznym wariantem dopuszczonym w zadaniu, bo bez dostepu do
   rzeczywistego renderu nie da sie potwierdzic braku sciskania tekstu
   w dwoch kolumnach na typowym tablecie.

   Lista trzech rezultatow to jeden wspolny uklad, nie trzy karty: wspolna
   pionowa os to border-left na .__list, kazdy element ma tylko maly
   cyjanowy punkt dekoracyjny (position:absolute, ta sama technika co
   krotkie akcenty Sekcji 7-9) i subtelny separator poziomy, bez wlasnego
   tla, ramki i cienia. CTA korzysta wylacznie z istniejacych, globalnych
   klas .oai-cta / .oai-cta--primary (main.css) - brak nowego stylu
   przycisku, hover i focus-visible dziedziczone z systemu globalnego. */

.oai-site .oai-fire-damage-decision-analysis {
	--oai-fire-decision-analysis-bg: #F7F6F3;

	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 40px 20px;
	background-color: var(--oai-fire-decision-analysis-bg);
}

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

.oai-site .oai-fire-damage-decision-analysis__layout {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.oai-site .oai-fire-damage-decision-analysis__content {
	max-width: 640px;
	min-width: 0;
}

.oai-site .oai-fire-damage-decision-analysis__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

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

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

.oai-site .oai-fire-damage-decision-analysis__cta {
	margin: 0 0 16px;
}

.oai-site .oai-fire-damage-decision-analysis__microcopy {
	margin: 0;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-fire-damage-decision-analysis__results {
	margin-top: 32px;
	min-width: 0;
}

.oai-site .oai-fire-damage-decision-analysis__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
	border-left: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-decision-analysis__item {
	position: relative;
	margin: 0 0 20px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-fire-damage-decision-analysis__item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.oai-site .oai-fire-damage-decision-analysis__item::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -25px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-fire-damage-decision-analysis__item-heading {
	margin: 0 0 6px;
	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-fire-damage-decision-analysis__item-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;
}

@media (min-width: 768px) {
	.oai-site .oai-fire-damage-decision-analysis {
		padding: 56px 40px;
	}

	.oai-site .oai-fire-damage-decision-analysis__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-fire-damage-decision-analysis__lead {
		font-size: 1.0625rem;
	}
}

/* Od 1100px: dwie czesci w jednym wspolnym gridzie, obie zaczynaja sie
   na tej samej wysokosci (align-items: start). Patrz komentarz na
   poczatku bloku dla wyjasnienia wyboru progu. */

@media (min-width: 1100px) {
	.oai-site .oai-fire-damage-decision-analysis__layout {
		display: grid;
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		column-gap: 56px;
		align-items: start;
	}

	.oai-site .oai-fire-damage-decision-analysis__content {
		max-width: 100%;
	}

	.oai-site .oai-fire-damage-decision-analysis__results {
		margin-top: 0;
	}
}

@media (max-width: 600px) {
	.oai-site .oai-fire-damage-decision-analysis__cta {
		width: 100%;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-fire-damage-decision-analysis {
		padding: 32px 16px;
	}

	.oai-site .oai-fire-damage-decision-analysis__list {
		padding-left: 16px;
	}

	.oai-site .oai-fire-damage-decision-analysis__item::before {
		left: -21px;
	}
}

/* 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 tego samego mechanizmu uzywanego na
   /odszkodowanie-za-zalanie/ (.oai-water-damage-faq),
   /odmowa-wyplaty-odszkodowania/ (.oai-denial-faq) i innych podstronach
   OdwolAI. Zmieniono wylacznie namespace na .oai-fire-damage-faq,
   poniewaz page-fire-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 i brak linkow - sekcja konczy sie lista pytan, jako ostatnia
   sekcja tresci strony przed footerem. */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 360px) {
	.oai-site .oai-fire-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, poziomy gradientowy overlay i przycisk .oai-cta
   .oai-cta--primary z nadpisaniem background/color na bialy/granat sa
   odwzorowane jeden do jednego z zaakceptowanego wzorca
   .oai-water-damage-final-cta (assets/css/page-water-damage.css) - jawnie
   wskazanego jako zrodlo w tym zadaniu. Zmieniono wylacznie namespace na
   .oai-fire-damage-final-cta, sciezke i wymiary grafiki oraz tresc
   (eyebrow, H2, opis, CTA, microcopy, link do produktu 2366) - typografia,
   odstepy, padding, proporcje gradientu i breakpointy 768/600/360px
   pozostaly identyczne ze zrodlem.

   Grafika assets/images/page-fire-damage/odszkodowanie-za-pozar-cta.webp
   (potwierdzone 1774x887px, format WebP lossy VP8, przez bezposrednie
   odczytanie naglowka pliku) przedstawia uszkodzony przez pozar budynek,
   z celowo przygotowana ciemna, spokojna przestrzenia po lewej stronie
   pod tekst i budynkiem widocznym glownie po prawej. Object-position:
   "right center" na szerokim ekranie, zeby budynek pozostal widoczny po
   prawej, tak samo jak w zrodlowym wzorcu strony zalania. Ponizej 600px
   zastosowano "70% center", identycznie ze zrodlem, zeby waskie okno
   mobilne nadal pokazywalo rozpoznawalny fragment budynku, bez
   przesuwania calego kadru w najciemniejsza, lewa czesc zdjecia. */

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

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

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

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

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

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

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

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

	.oai-site .oai-fire-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-fire-damage-final-cta__image {
		object-position: 70% center;
	}

	.oai-site .oai-fire-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-fire-damage-final-cta {
		padding: 56px 16px;
	}
}