/* Podstrona "Odszkodowanie za zerwany dach": Sekcja 1 (hero). Renderowane
   przez page-odszkodowanie-za-zerwany-dach.php, ladowane wylacznie przez
   odwolai_v2_is_roof_wind_damage_page(). Wszystkie selektory izolowane pod
   .oai-site .oai-roof-wind-damage-hero, oddzielna przestrzen klas od
   .oai-hail-damage-*, .oai-water-damage-*, .oai-fire-damage-* i pozostalych
   podstron problemowych, bez wycieku stylow.

   Breadcrumb (trzypoziomowy: strona glowna, Problemy i szkody jako statyczny
   srodkowy element bez linku, biezaca) oraz uklad tresc/modul wzorowane na
   sprawdzonym, rzeczywistym wzorcu .oai-hail-damage-hero (page-hail-damage.css):
   ten sam prog 768px dla wiekszej typografii, ten sam prog 1024px dla
   przejscia na dwie strefy, ta sama technika separatora "/" w breadcrumb.
   Podzial kolumn desktop celowo 54%/46% (a nie 56%/44% jak w Gradobiciu) -
   wlasna kompozycja tej strony w granicach tej samej rodziny design systemu,
   zgodnie z wprost wskazanym w zadaniu zakresem 52-55%/45-48%.

   Modul wizualny to prawdziwe zdjecie (zerwany-dach-hero.webp, rzeczywiste
   wymiary 1600x1280, proporcja 5/4), przedstawiajace dom jednorodzinny z
   wyraznie zerwanym fragmentem pokrycia dachowego (widoczne odsloniete laty
   i warstwa pod pokryciem), spokojna sytuacja po wichurze, bez ludzi.

   WAZNE: <img> ma atrybuty HTML width="1600" height="1280" (poprawne Core
   Web Vitals - rezerwacja miejsca przed zaladowaniem). Dlatego
   .oai-roof-wind-damage-hero__image MUSI jawnie ustawiac "height: auto"
   obok "aspect-ratio: 5 / 4" - bez tego height="1280" dziala jako
   definitywna, nieskalowana wartosc prezentacyjna, aspect-ratio jest wtedy
   ignorowane, a obraz renderuje sie jako pionowy baner niezaleznie od
   faktycznej szerokosci kolumny (dokladnie ten sam, juz raz napotkany i
   naprawiony blad z Sekcji 1 Gradobicia). Kontener utrzymuje te sama
   proporcje 5/4 co zrodlowy plik na kazdej szerokosci, wiec object-fit:
   cover praktycznie nic nie wycina - object-position: center wystarcza,
   uszkodzenie polaci (polozone mniej wiecej centralnie, lekko w prawo,
   w gornej-srodkowej czesci kadru) pozostaje czytelne na kazdej szerokosci
   bez potrzeby przesuwania kadru. */

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

/* Breadcrumb */

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

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

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

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

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

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

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

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

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

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

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

.oai-site .oai-roof-wind-damage-hero__microcopy {
	margin: 12px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Modul wizualny: prawdziwe zdjecie, spokojny radius, cienka ramka tym
   samym tokenem co pozostale hero klastra, bez ciezkiego cienia, bez
   ramki udajacej karte, bez nakladek tekstowych, bez badge, bez gradientu. */

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

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

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

/* Tablet od 768px: wieksza typografia, modul wciaz pod trescia (ten sam
   prog kontrolny co pozostale strony klastra) */

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

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

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

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

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

/* Desktop od 1024px: dwie strefy hero, tresc i modul obok siebie, wlasny
   podzial 54%/46% (patrz komentarz na poczatku pliku) */

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

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

	.oai-site .oai-roof-wind-damage-hero__visual {
		flex: 1 1 46%;
		max-width: 570px;
	}

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

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

/* Sekcja 2: "Co moze zostac uszkodzone, gdy wiatr poderwie lub zerwie
   dach?" ODRZUCONY WIZUALNIE pierwszy kierunek (CSS-owy granatowy
   trapez/schemat + connector lines) zostal calkowicie usuniety wraz z
   calym dotyczacym go CSS - zero martwych regul.

   Zaakceptowany kierunek uzywa DWOCH osobnych assetow tej samej pary
   wymiarow (1600x1067, proporcja 3/2), dobranych przez <picture>/<source>
   w PHP (nie duplikacja <img> w DOM, jeden semantyczny element obrazu):
   - zerwany-dach-sekcja-2-diagram.webp: pelna infografika z piecioma
     podpisami "wypalonymi" w grafice, widoczna od 1100px (desktop/szeroki
     tablet);
   - zerwany-dach-sekcja-2-roof.webp: czysty, bezteksowy render tego
     samego przekroju dachu, przygotowany specjalnie pod tablet/mobile
     (<source media="(max-width: 1099px)">), dzieki czemu ponizej 1100px
     NIE ma juz zadnego kropowania ani ryzykownego object-position
     wyliczanego wzgledem polozenia bocznych podpisow (poprzedni, odrzucony
     wariant robil to na tym samym, "zatloczonym" obrazie diagram.webp) -
     obraz mobile jest czysty, wiec renderuje sie w calosci, bez cropu,
     dokladnie jak desktop.

   Poniewaz oba warianty maja identyczna, naturalna proporcje 1600/1067,
   .__image ma JEDNA, wspolna regule (aspect-ratio: 1600/1067; object-fit:
   contain) obowiazujaca na kazdej szerokosci - obraz zawsze widoczny w
   calosci, bez ucinania.

   Piec HTML-owych opisow pozostaje w DOM na kazdej szerokosci (dostepnosc).
   Ponizej 1100px sa normalnie widoczne jako czytelna lista redakcyjna pod
   obrazem (bo mobilny obraz roof.webp nie zawiera juz tekstu). Od 1100px
   (dokladnie ten sam prog co <source media="(max-width: 1099px)"> w PHP,
   zeby uniknac luki/nakladania sie warunkow) sa ukrywane wylacznie
   wizualnie technika identyczna z globalnym .oai-sr-only z main.css,
   zastosowana tutaj lokalnie i warunkowo (globalna klasa jest
   bezwarunkowa, a tu potrzebne jest zachowanie zalezne od szerokosci) -
   bo ich tresc jest juz czytelna wprost w grafice diagram.webp. */

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

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

.oai-site .oai-roof-wind-damage-scope__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

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

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

.oai-site .oai-roof-wind-damage-scope__lead {
	margin: 0;
	max-width: 620px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Canvas graficzny: bialy panel, spokojny radius, cienka ramka - ten sam
   token co Hero image tej strony (var(--oai-radius-m) + var(--oai-color-border)),
   bez ciezkiego cienia, bez gradientu. Bez overflow: hidden - oba warianty
   obrazu (diagram/roof) sa czyste i renderowane w calosci na kazdej
   szerokosci, wiec kadrowanie nie jest juz potrzebne. */

.oai-site .oai-roof-wind-damage-scope__figure {
	margin: 24px 0 0;
	width: 100%;
	max-width: 100%;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
}

.oai-site .oai-roof-wind-damage-scope__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1600 / 1067;
	object-fit: contain;
	object-position: center;
}

/* Piec obszarow: ponizej 1100px normalnie widoczna, pionowa lista
   redakcyjna z cienkimi separatorami (bez kart, bez ikon, bez numeracji,
   bez connector lines - usuniete calkowicie wraz z odrzuconym schematem). */

.oai-site .oai-roof-wind-damage-scope__areas {
	margin: 24px 0 0;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-scope__area {
	position: relative;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 20px 0 20px 18px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-scope__area:first-child {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-scope__area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	width: 3px;
	height: 16px;
	background-color: var(--oai-color-cyan);
	border-radius: 2px;
}

.oai-site .oai-roof-wind-damage-scope__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-roof-wind-damage-scope__area-body {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

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

	.oai-site .oai-roof-wind-damage-scope__lead {
		font-size: 1rem;
	}
}

/* Od 1100px (dokladnie ten sam prog co <source media="(max-width: 1099px)">
   w PHP): pelna infografika z podpisami staje sie glownym elementem, piec
   HTML-owych opisow zostaje wizualnie ukryte (technika .oai-sr-only,
   zastosowana lokalnie i warunkowo - patrz komentarz na poczatku bloku),
   bo ich tresc jest juz czytelna wprost w grafice. */

@media (min-width: 1100px) {
	.oai-site .oai-roof-wind-damage-scope__figure {
		margin-top: 32px;
	}

	.oai-site .oai-roof-wind-damage-scope__areas {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

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

/* Sekcja 3: "Co zrobic bezposrednio po uszkodzeniu dachu?" Swiadomie inny
   model wizualny niz jasna, ilustracyjna Sekcja 2: pelna sekcja na
   glebokim granatowym tle (var(--oai-color-navy), ten sam token co panel
   Sekcji 3 Gradobicia), bez zdjecia, bez ikon, bez kart, bez numeracji
   01/02/03 - asymetryczny uklad editorial/service (nie dashboard): lewy
   blok "Najpierw bezpieczenstwo" jest wizualnie najwazniejszy (wiekszy
   H3, cienki cyjanowy akcent przy lewej krawedzi), prawa kolumna zawiera
   dwa pozostale elementy jeden pod drugim, rozdzielone wylacznie cienka
   linia (rgba(255,255,255,0.12) - ten sam token przezroczystosci co
   separator w Sekcji 3 Gradobicia), bez zamykania kazdego elementu w
   osobnej karcie. Ponizej 1024px .__layout wraca do jednej kolumny
   (mobile-first baza), zachowujac kolejnosc DOM 1-2-3. Informacja
   "Podstawa: art. 826 Kodeksu cywilnego." jest subtelnym, mniejszym
   tekstem na samym dole sekcji, oddzielona cienka linia. */

.oai-site .oai-roof-wind-damage-first-actions {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-navy);
}

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

.oai-site .oai-roof-wind-damage-first-actions__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-roof-wind-damage-first-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-roof-wind-damage-first-actions__heading {
	margin: 0;
	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-roof-wind-damage-first-actions__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-first-actions__label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-roof-wind-damage-first-actions__primary {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 18px;
	border-left: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-roof-wind-damage-first-actions__primary-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-first-actions__primary-body {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-first-actions__secondary {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-first-actions__item {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.oai-site .oai-roof-wind-damage-first-actions__item:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-roof-wind-damage-first-actions__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-roof-wind-damage-first-actions__item-body {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-first-actions__basis {
	margin: 40px 0 0;
	padding-top: 20px;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

	.oai-site .oai-roof-wind-damage-first-actions__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-roof-wind-damage-first-actions__primary-heading {
		font-size: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-roof-wind-damage-first-actions__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
	}

	.oai-site .oai-roof-wind-damage-first-actions__primary {
		flex: 0 1 40%;
	}

	.oai-site .oai-roof-wind-damage-first-actions__secondary {
		flex: 1 1 60%;
	}
}

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

/* Sekcja 4: "Co udokumentowac przed zabezpieczeniem lub naprawa dachu?"
   Brak lokalnego assetu pasujacego kontekstowo do tej sekcji (jedyne
   dostepne zasoby strony to zerwany-dach-hero.webp, juz uzyte w Hero, oraz
   dwa warianty zerwany-dach-sekcja-2-*.webp, juz uzyte w Sekcji 2 - zadne
   nie pasuje bez duplikowania poprzednich sekcji ani uzycia zdjecia poza
   kontekstem) - sekcja zbudowana w wersji w pelni tekstowej, bez pustego
   <img> i bez falszywego obrazu.

   Kierunek wizualny swiadomie inny niz Sekcja 2 (obraz + lista) i Sekcja 3
   (pelne granatowe tlo): jasne, biale tlo, duzo oddechu, editorial, nie
   dashboard. Asymetria dwoch stref (ok. 38/62 od 1024px) zbudowana z
   samej tresci, bez fikcyjnej strefy wizualnej: lewa kolumna to Obszar 1
   "Caly uszkodzony obszar" (koncepcyjnie najpierw - szerokie ujecie catego
   obszaru szkody), wizualnie wyrozniony wiekszym naglowkiem i cienkim
   granatowym akcentem przy lewej krawedzi (analogia do wyroznienia
   "Najpierw bezpieczenstwo" w Sekcji 3, ale na jasnym tle). Prawa kolumna
   to pozostale cztery obszary jako pionowa lista redakcyjna z cienkimi
   separatorami i krotkim cyjanowym akcentem przy kazdym naglowku - bez
   kart, bez numeracji, bez ikon. Ponizej 1024px .__layout wraca do jednej
   kolumny (mobile-first baza), zachowujac kolejnosc DOM: intro, Obszar 1,
   Obszary 2-5. */

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

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

.oai-site .oai-roof-wind-damage-documentation__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

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

.oai-site .oai-roof-wind-damage-documentation__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-documentation__primary {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: 18px;
	border-left: 2px solid var(--oai-color-navy);
}

.oai-site .oai-roof-wind-damage-documentation__primary-heading {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-roof-wind-damage-documentation__secondary {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-documentation__area {
	position: relative;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 20px 0 20px 18px;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-documentation__area:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-roof-wind-damage-documentation__area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 3px;
	height: 16px;
	background-color: var(--oai-color-cyan);
	border-radius: 2px;
}

.oai-site .oai-roof-wind-damage-documentation__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-roof-wind-damage-documentation__area-body {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Piaty obszar ("Stan przed i po zabezpieczeniu") jest wyodrebniony jako
   osobny element .__closing (rodzenstwo .__primary i .__secondary, ZA
   .__secondary w DOM - kolejnosc czytania 1-2-3-4-5 pozostaje bez zmian),
   wylacznie po to, zeby na desktopie mogl zostac jawnie umieszczony w
   lewej kolumnie pod Obszarem 1 przez CSS Grid (patrz @media 1024px), bez
   uzycia `order` i bez przestawiania tresci w PHP. Ponizej 1024px wyglada
   i zachowuje sie dokladnie jak kolejny element .__area (te same wartosci
   typograficzne, ten sam separator i cyjanowy akcent), wiec wizualnie
   domyka jednokolumnowa liste identycznie jak dotychczas. */

.oai-site .oai-roof-wind-damage-documentation__closing {
	position: relative;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 20px 0 20px 18px;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-documentation__closing::before {
	content: "";
	position: absolute;
	left: 0;
	top: 26px;
	width: 3px;
	height: 16px;
	background-color: var(--oai-color-cyan);
	border-radius: 2px;
}

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

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

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

	.oai-site .oai-roof-wind-damage-documentation__lead {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-roof-wind-damage-documentation__layout {
		display: grid;
		grid-template-columns: 44fr 56fr;
		column-gap: 56px;
		row-gap: 40px;
		align-items: start;
		grid-template-areas:
			"primary secondary"
			"closing secondary";
	}

	.oai-site .oai-roof-wind-damage-documentation__primary {
		grid-area: primary;
	}

	.oai-site .oai-roof-wind-damage-documentation__secondary {
		grid-area: secondary;
	}

	.oai-site .oai-roof-wind-damage-documentation__closing {
		grid-area: closing;
		padding: 0 0 0 18px;
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-roof-wind-damage-documentation__closing::before {
		display: none;
	}

	.oai-site .oai-roof-wind-damage-documentation__primary-heading {
		font-size: 1.375rem;
	}
}

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

/* Sekcja 5: "Co sprawdzic w OWU, gdy dach uszkodzil silny wiatr?"
   Swiadomie inny kierunek wizualny niz Sekcje 2-4: dojrzaly, redakcyjny
   modul kwalifikacji zapisow OWU, bez kart, bez ikon, bez numeracji, bez
   grafiki pogodowej. Tlo lekko chlodne (ten sam token rgba(1,2,66,0.02)
   co Sekcja 2, nieprzylegajaca, wiec bezpieczne ponowne uzycie), rozne od
   bialej Sekcji 4 tuz przed nia.

   Lewa strefa .__context (36% od 1024px) to otwarty modul typograficzny:
   trzy przykladowe okreslenia spotykane w OWU (Silny wiatr / Wichura /
   Huragan) jako prosta, otwarta lista bez tla, bez ramki, oddzielone
   wylacznie cienkimi liniami - celowo NIE trzy karty i NIE trzy rownowazne
   definicje, wylacznie przyklady nazewnictwa (dokladnie tak, jak wymaga
   tresc merytoryczna sekcji).

   Prawa strefa .__segments (64% od 1024px) to trzy poziome segmenty
   redakcyjne jeden pod drugim, rozdzielone cienkim separatorem, bez
   zamykania w kartach.

   .__note jest wizualnie mocniejsza (delikatny cyjanowy wash + lewy
   akcent), ale bez czerwieni/zoltego, bez ikony ostrzegawczej - elegancki
   akcent marki, nie systemowy alert.

   .__link to jedyny link sekcji (kontekstowy, do Gradobicia) - zgodnie z
   lekcja wyciagnieta z Sekcji 6/7/8 Gradobicia, font-size i line-height sa
   ustawione JAWNIE bezposrednio na <a> (identyczne z body copy), a nie
   pozostawione samemu dziedziczeniu, zeby nie powtorzyc historycznego
   bledu ogromnego linku inline. */

.oai-site .oai-roof-wind-damage-policy {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: rgba(1, 2, 66, 0.02);
}

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

.oai-site .oai-roof-wind-damage-policy__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

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

.oai-site .oai-roof-wind-damage-policy__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: 100%;
}

/* Lewa strefa: przykladowe nazewnictwo, otwarta lista bez karty */

.oai-site .oai-roof-wind-damage-policy__context {
	min-width: 0;
	max-width: 100%;
}

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

.oai-site .oai-roof-wind-damage-policy__context-terms {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-policy__context-term {
	padding: 14px 0;
	border-bottom: 1px solid var(--oai-color-border);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-roof-wind-damage-policy__context-term:first-child {
	padding-top: 0;
}

/* Prawa strefa: trzy segmenty redakcyjne */

.oai-site .oai-roof-wind-damage-policy__segments {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-policy__segment {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 24px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-policy__segment:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-roof-wind-damage-policy__segment-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

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

/* Nota: mocniejsza wizualnie, ale elegancka - nie systemowy alert */

.oai-site .oai-roof-wind-damage-policy__note {
	margin: 40px 0 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 24px;
	background-color: rgba(33, 225, 253, 0.06);
	border-left: 3px solid var(--oai-color-cyan);
	border-radius: var(--oai-radius-m);
}

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

/* Link kontekstowy: jawny font-size/line-height bezposrednio na <a>,
   identyczny z body copy - patrz komentarz na poczatku bloku. */

.oai-site .oai-roof-wind-damage-policy__link-wrap {
	margin: 24px 0 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-roof-wind-damage-policy__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-roof-wind-damage-policy__link:hover,
.oai-site .oai-roof-wind-damage-policy__link:focus-visible {
	color: var(--oai-color-cyan);
}

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

	.oai-site .oai-roof-wind-damage-policy__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-roof-wind-damage-policy__lead {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-roof-wind-damage-policy__layout {
		display: grid;
		grid-template-columns: 36fr 64fr;
		column-gap: 56px;
		align-items: start;
	}
}

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

/* Sekcja 6: "Szkoda po wichurze moze nie konczyc sie na pokryciu
   dachowym". Swiadomie inny kierunek niz Sekcje 2-5 tej strony i inny niz
   analogiczna tematycznie Sekcja 6 Gradobicia (tam: pelne granatowe tlo,
   pionowy uklad "Poziom 1/2/3"). Tutaj: bardzo jasne, lekko cyjanowe tlo
   (rgba(33, 225, 253, 0.05) - inny token niz rgba(1,2,66,0.02) uzywany w
   Sekcjach 2 i 5 tej strony), trzy otwarte poziomy redakcyjne bez kart,
   bez ikon, bez numeracji. Na desktopie (od 1024px) kolejne poziomy sa
   stopniowo przesuniete w prawo (margin-left rosnie), co samo sugeruje
   "schodzenie" skutkow w glab budynku (DACH -> POD POKRYCIEM -> WNETRZE)
   bez zadnego elementu graficznego, kropkowanego timeline'u ani strzalek -
   wylacznie geometria tekstu. Ponizej 1024px przesuniecia sa calkowicie
   usuwane (margin-left: 0), trzy poziomy wracaja do jednej wspolnej osi w
   naturalnej kolejnosci DOM.

   Jedyny link sekcji (kontekstowy, do Zalania) ma jawnie ustawiony
   font-size/line-height bezposrednio na <a>, identyczny z body copy -
   ta sama, juz utrwalona zasada co w linku Sekcji 5 tej strony, zapobiegajaca
   powtorzeniu historycznego bledu ogromnego linku inline z Gradobicia. */

.oai-site .oai-roof-wind-damage-secondary-effects {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: rgba(33, 225, 253, 0.05);
}

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

.oai-site .oai-roof-wind-damage-secondary-effects__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

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

.oai-site .oai-roof-wind-damage-secondary-effects__levels {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-secondary-effects__level {
	min-width: 0;
	max-width: 560px;
	box-sizing: border-box;
	padding: 24px 0 0;
	border-top: 1px solid rgba(1, 2, 66, 0.12);
}

.oai-site .oai-roof-wind-damage-secondary-effects__level:first-child {
	padding-top: 0;
	border-top: none;
}

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

.oai-site .oai-roof-wind-damage-secondary-effects__level-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-roof-wind-damage-secondary-effects__level-body {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-secondary-effects__link-wrap {
	margin: 40px 0 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-roof-wind-damage-secondary-effects__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-roof-wind-damage-secondary-effects__link:hover,
.oai-site .oai-roof-wind-damage-secondary-effects__link:focus-visible {
	color: var(--oai-color-cyan);
}

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

	.oai-site .oai-roof-wind-damage-secondary-effects__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-roof-wind-damage-secondary-effects__lead {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-roof-wind-damage-secondary-effects__level--2 {
		margin-left: 8%;
	}

	.oai-site .oai-roof-wind-damage-secondary-effects__level--3 {
		margin-left: 16%;
	}
}

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

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

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

.oai-site .oai-roof-wind-damage-estimate-review__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

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

.oai-site .oai-roof-wind-damage-estimate-review__sheet {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-estimate-review__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 28px;
	row-gap: 8px;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-estimate-review__row-label {
	flex: 0 1 140px;
	min-width: 110px;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-roof-wind-damage-estimate-review__row-question {
	flex: 1 1 240px;
	min-width: 200px;
	margin: 0;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-estimate-review__row-explanation {
	flex: 2 1 320px;
	min-width: 240px;
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-estimate-review__link-wrap {
	margin: 40px 0 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-roof-wind-damage-estimate-review__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-roof-wind-damage-estimate-review__link:hover,
.oai-site .oai-roof-wind-damage-estimate-review__link:focus-visible {
	color: var(--oai-color-cyan);
}

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

	.oai-site .oai-roof-wind-damage-estimate-review__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-roof-wind-damage-estimate-review__lead {
		font-size: 1rem;
	}

	.oai-site .oai-roof-wind-damage-estimate-review__row {
		padding: 28px 0;
	}
}

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

.oai-site .oai-roof-wind-damage-decision-next-step {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

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

.oai-site .oai-roof-wind-damage-decision-next-step__layout {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	min-width: 0;
}

.oai-site .oai-roof-wind-damage-decision-next-step__intro {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-roof-wind-damage-decision-next-step__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-roof-wind-damage-decision-next-step__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-roof-wind-damage-decision-next-step__lead {
	margin: 0;
	max-width: 560px;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-decision-next-step__panel {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	padding: 36px 28px;
	background-color: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-roof-wind-damage-decision-next-step__panel-label {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-roof-wind-damage-decision-next-step__panel-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-decision-next-step__panel-body {
	margin: 0 0 28px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-decision-next-step__cta--inverse {
	min-height: 48px;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-roof-wind-damage-decision-next-step__cta--inverse:hover,
html[data-oai-input="keyboard"] .oai-site .oai-roof-wind-damage-decision-next-step__cta--inverse:focus-visible {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-roof-wind-damage-decision-next-step__panel-microcopy {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-roof-wind-damage-decision-next-step__secondary {
	width: 100%;
	max-width: 640px;
	min-width: 0;
	box-sizing: border-box;
	margin: 32px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-roof-wind-damage-decision-next-step__secondary-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-roof-wind-damage-decision-next-step__secondary-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-roof-wind-damage-decision-next-step__link {
	display: inline;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	font-family: inherit;
	color: var(--oai-color-navy);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color var(--oai-transition-fast);
}

.oai-site .oai-roof-wind-damage-decision-next-step__link:hover,
.oai-site .oai-roof-wind-damage-decision-next-step__link:focus-visible {
	color: var(--oai-color-cyan);
}

@media (max-width: 480px) {
	.oai-site .oai-roof-wind-damage-decision-next-step__cta--inverse {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.oai-site .oai-roof-wind-damage-decision-next-step {
		padding: 72px 40px;
	}

	.oai-site .oai-roof-wind-damage-decision-next-step__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-roof-wind-damage-decision-next-step__lead {
		font-size: 1rem;
	}

	.oai-site .oai-roof-wind-damage-decision-next-step__panel {
		padding: 44px 40px;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-roof-wind-damage-decision-next-step__layout {
		flex-direction: row;
		align-items: stretch;
		gap: 48px;
	}

	.oai-site .oai-roof-wind-damage-decision-next-step__intro {
		flex: 0 1 38%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.oai-site .oai-roof-wind-damage-decision-next-step__panel {
		flex: 1 1 58%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-roof-wind-damage-decision-next-step {
		padding: 40px 16px;
	}

	.oai-site .oai-roof-wind-damage-decision-next-step__panel {
		padding: 28px 20px;
	}
}

/* Sekcja 9: FAQ. Odwzorowanie 1:1 zaakceptowanego, wielokrotnie reuzywanego
   mechanizmu FAQ (.oai-hail-damage-faq, page-hail-damage.css), ktory sam
   jest juz namespace'owana kopia pierwotnego mechanizmu uzywanego na
   /szkoda-calkowita/, /zanizone-odszkodowanie/, /odmowa-wyplaty-odszkodowania/
   i /kosztorys-ubezpieczyciela/. Zmieniono wylacznie namespace na
   .oai-roof-wind-damage-faq, poniewaz page-roof-wind-damage.css jest
   ladowany wylacznie na tej stronie - zrodlowy komponent pozostal nietkniety.
   Wszystkie wlasciwosci (typografia, odstepy, breakpointy 600/480/360px,
   mechanizm plus/minus, stan [open], focus-visible) sa identyczne ze
   zrodlem, celowo bez adaptacji do rem-based systemu pozostalych sekcji
   tej strony - spojnosc z innymi FAQ V2 ma tu pierwszenstwo.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Sekcja 10: koncowe CTA, ostatnia sekcja strony, prawdziwe domkniecie -
   nie kolejna wersja Sekcji 8. Pelnoszerokosciowe granatowe tlo, tresc
   wysrodkowana w pojedynczym bloku (bez kolumn, bez karty, bez drugiego
   granatowego boxa na granatowym tle), jeden bialy CTA z granatowym
   tekstem. Padding/breakpointy (56/20px, 72/40px @768px, 40/16px @360px)
   i on-navy skala przezroczystosci tekstu (0.85 body, 0.6 microcopy) sa
   celowo dopasowane do wlasnego rytmu tej strony (identyczne jak w kazdej
   z Sekcji 2-9), a nie mechanicznie skopiowane z zaakceptowanego final-cta
   Gradobicia (page-hail-damage.css), ktory uzywa wlasnego, niezaleznego
   rytmu 700/360px - sprawdzony tam zostal wylacznie wspolny token
   .oai-cta, jakosc buttona i koncepcja bialego przycisku na granatowym tle. */

.oai-site .oai-roof-wind-damage-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-navy);
}

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

.oai-site .oai-roof-wind-damage-final-cta__content {
	min-width: 0;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.oai-site .oai-roof-wind-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-roof-wind-damage-final-cta__title {
	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-roof-wind-damage-final-cta__lead {
	margin: 0 0 28px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-roof-wind-damage-final-cta__cta--inverse {
	min-height: 48px;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-roof-wind-damage-final-cta__cta--inverse:hover,
html[data-oai-input="keyboard"] .oai-site .oai-roof-wind-damage-final-cta__cta--inverse:focus-visible {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-roof-wind-damage-final-cta__note {
	margin: 16px 0 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 480px) {
	.oai-site .oai-roof-wind-damage-final-cta__cta--inverse {
		width: 100%;
	}
}

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

	.oai-site .oai-roof-wind-damage-final-cta__title {
		font-size: 1.75rem;
	}

	.oai-site .oai-roof-wind-damage-final-cta__lead {
		font-size: 1rem;
	}
}

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