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

   Breadcrumb (trzypoziomowy: strona glowna, Problemy i szkody, biezaca)
   oraz uklad tresc/modul wzorowane na sprawdzonym, rzeczywistym wzorcu
   .oai-water-damage-hero (page-water-damage.css): ten sam prog 1024px dla
   przejscia na dwie strefy, ta sama technika separatora "/" w breadcrumb.

   Modul wizualny to prawdziwe zdjecie (gradobicie-hero.webp, rzeczywiste
   wymiary 1600x1280, proporcja 5/4), zastepujace pierwotny autorski
   CSS-owy modul "dom jako system powierzchni narazonych na grad" -
   odrzucony wizualnie przez uzytkownika po pierwszym tescie desktopu i
   usuniety w calosci wraz z etykietami DACH / ELEWACJA / PRZESZKLENIA.
   Zdjecie przedstawia rzeczywisty, uszkodzony przez grad dach (widoczne
   otwory w pokryciu), komin i fragment elewacji z oknem.

   WAZNE: <img> ma atrybuty HTML width="1600" height="1280" (poprawne
   Core Web Vitals - rezerwacja miejsca przed zaladowaniem). Dlatego
   .oai-hail-damage-hero__image MUSI jawnie ustawiac "height: auto" obok
   "aspect-ratio: 5 / 4" - bez tego height="1280" dziala jako definitywna,
   nieskalowana wartosc prezentacyjna (1280px), aspect-ratio jest wtedy
   ignorowane (dziala wylacznie, gdy ktorys wymiar pozostaje auto), a
   obraz renderuje sie jako pionowy baner o wysokosci 1280px niezaleznie
   od faktycznej szerokosci kolumny. Ten sam, jawny wzorzec
   "height: auto" + "aspect-ratio" stosuje juz .oai-water-damage-hero__image
   (page-water-damage.css) z tego samego powodu. 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, bez potrzeby przesuwania kadru. */

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

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

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

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

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

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

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

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

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

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

/* Modul wizualny: prawdziwe zdjecie zamiast poprzedniego CSS-owego domu.
   Proporcja 5/4 utrzymana na kazdej szerokosci (zgodna ze zrodlowym
   plikiem), spokojny radius var(--oai-radius-m), 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-hail-damage-hero__visual {
	min-width: 0;
	max-width: 100%;
}

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

.oai-site .oai-hail-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 (nie
   wymuszamy dwoch kolumn na 768px - ten sam prog kontrolny co pozostale
   strony klastra, patrz komentarz na poczatku pliku) */

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

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

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

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

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

/* Desktop od 1024px: dwie strefy hero, tresc i modul obok siebie, ta sama
   proporcja 56%/44% co najblizsza siostra architektoniczna
   (.oai-water-damage-hero) */

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

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

	.oai-site .oai-hail-damage-hero__visual {
		flex: 1 1 44%;
		max-width: 570px;
	}

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

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

/* Sekcja 2: "Co moze zostac uszkodzone podczas gradobicia?". Celowo
   odrebna od fotograficznego Hero: jasne, chlodne tlo (ten sam token
   rgba(1,2,66,0.02) co inne subtelne tinty w motywie), asymetryczny
   uklad intro/atlas (ok. 40/60 od 1024px, ten sam prog kontrolny co
   Hero tej strony). Szesc obszarow nie jest siatka identycznych kafelkow
   ani przeklejona ikona+tytul+opis - to jedna wspolna lista ("atlas")
   polaczona cienka pionowa linia (border-left na <ul>) z drobnymi
   markerami zamiast numeracji. "Dach i pokrycie dachowe" (pierwszy
   element, modifier --primary) ma wiekszy marker, ale ten sam H3 co
   pozostale piec obszarow - jedyna roznica wizualna zostaje w markerze,
   nie w typografii naglowka. Bez ikony ani karty, bez zdjecia, bez JS,
   bez accordionu - cala tresc dostepna od razu w DOM. */

.oai-site .oai-hail-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-hail-damage-scope__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: 40px;
}

.oai-site .oai-hail-damage-scope__intro {
	min-width: 0;
	max-width: 100%;
}

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

.oai-site .oai-hail-damage-scope__atlas {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	border-left: 2px solid var(--oai-color-border);
}

.oai-site .oai-hail-damage-scope__area {
	position: relative;
	padding: 20px 0 20px 24px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-hail-damage-scope__area:first-child {
	padding-top: 0;
}

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

.oai-site .oai-hail-damage-scope__marker {
	position: absolute;
	top: 24px;
	left: -5px;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--oai-color-cyan);
	border: 2px solid var(--oai-color-white);
}

.oai-site .oai-hail-damage-scope__area:first-child .oai-hail-damage-scope__marker {
	top: 4px;
}

.oai-site .oai-hail-damage-scope__area--primary .oai-hail-damage-scope__marker {
	width: 10px;
	height: 10px;
	left: -6px;
}

.oai-site .oai-hail-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-hail-damage-scope__area-body {
	margin: 0;
	max-width: 480px;
	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-hail-damage-scope {
		padding: 72px 40px;
	}

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

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

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

	.oai-site .oai-hail-damage-scope__intro {
		flex: 0 0 38%;
		max-width: 400px;
	}

	.oai-site .oai-hail-damage-scope__atlas {
		flex: 1 1 auto;
		max-width: 640px;
	}
}

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

	.oai-site .oai-hail-damage-scope__area {
		padding-left: 20px;
	}

	.oai-site .oai-hail-damage-scope__marker {
		left: -5px;
	}
}

/* Sekcja 3: "Dlaczego niektore skutki gradobicia nie sa widoczne od razu?".
   Celowo odrebna od jasnej Sekcji 2: pelne granatowe tlo (var(--oai-color-navy)),
   biale naglowki, jasny (rgba(255,255,255,x)) tekst body - dokladnie ten sam
   token system co juz zaakceptowane granatowe moduly na innych stronach
   klastra (np. .oai-fire-damage-protection-cleanup w page-fire-damage.css:
   cyjanowa etykieta z krotka kreska ::before, rgba(255,255,255,0.12) jako
   separator/ramka na granacie, rgba(255,255,255,0.8-0.85) jako tekst body).
   Nie jest to nowy system kolorow - to ponowne uzycie istniejacego,
   zaakceptowanego wzorca "ciemny modul" z innej strony klastra.

   Uklad: intro na pelnej szerokosci na gorze (nie asymetryczny podzial jak
   w Sekcji 2 - swiadoma roznica), pod nim jeden wspolny modul z dwoma
   stanami NA POWIERZCHNI / PO CZASIE (jedna kolumna do 1024px, rzad 50/50
   od 1024px), na koncu krotka, wizualnie stonowana dolna nota. Laczacy
   motyw miedzy dwoma stanami (kropka-linia-kropka) jest czysto dekoracyjny
   (aria-hidden), widoczny wylacznie od 1024px, generowany w calosci przez
   CSS (::before = linia, ::after + box-shadow = dwie kropki) - bez SVG,
   bez dodatkowego markupu, bez sugerowania kolejnosci/procesu. Ponizej
   1024px modul chowa ten motyw i polega na juz istniejacym separatorze
   (border-bottom) miedzy dwoma stanami w ukladzie jednokolumnowym. */

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

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

.oai-site .oai-hail-damage-hidden__intro {
	min-width: 0;
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-hail-damage-hidden__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-hail-damage-hidden__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-hail-damage-hidden__lead {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-hail-damage-hidden__module {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--oai-radius-l);
	overflow: hidden;
}

.oai-site .oai-hail-damage-hidden__state {
	min-width: 0;
	box-sizing: border-box;
	padding: 28px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.oai-site .oai-hail-damage-hidden__state--later {
	border-bottom: none;
}

.oai-site .oai-hail-damage-hidden__connector {
	display: none;
}

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

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

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

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

.oai-site .oai-hail-damage-hidden__link {
	display: inline-block;
	margin-top: 16px;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--oai-color-white);
	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-hail-damage-hidden__link:hover,
.oai-site .oai-hail-damage-hidden__link:active {
	color: var(--oai-color-white);
	text-decoration-color: var(--oai-color-cyan);
	text-decoration-thickness: 2.5px;
}

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

.oai-site .oai-hail-damage-hidden__note {
	min-width: 0;
	max-width: 640px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.oai-site .oai-hail-damage-hidden__note-label {
	display: block;
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

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

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

	.oai-site .oai-hail-damage-hidden__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-hail-damage-hidden__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-hail-damage-hidden__state {
		padding: 32px;
	}
}

@media (min-width: 1024px) {
	.oai-site .oai-hail-damage-hidden__module {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-hail-damage-hidden__state {
		flex: 1 1 0;
		min-width: 0;
		border-bottom: none;
	}

	.oai-site .oai-hail-damage-hidden__connector {
		display: block;
		position: relative;
		flex: 0 0 48px;
		align-self: stretch;
	}

	.oai-site .oai-hail-damage-hidden__connector::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 4px;
		right: 4px;
		height: 1px;
		background: rgba(255, 255, 255, 0.25);
		transform: translateY(-50%);
	}

	.oai-site .oai-hail-damage-hidden__connector::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: var(--oai-color-cyan);
		transform: translateY(-50%);
		box-shadow: 44px 0 0 var(--oai-color-cyan);
	}
}

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

	.oai-site .oai-hail-damage-hidden__state {
		padding: 24px 18px;
	}
}

/* Sekcja 4: "Co zrobic bezposrednio po gradobiciu?". Powrot do jasnego tla
   po granatowej Sekcji 3 - wyrazne, celowe przejscie. W odroznieniu od
   Sekcji 2 (atlas szesciu rownorzednych obszarow, bez numeracji) i Sekcji 3
   (dwa kontrastujace stany na granacie), Sekcja 4 to rzeczywisty,
   chronologiczny proces trzech krokow - numeracja 01-03 jest tu
   uzasadniona semantycznie (<ol>) i wizualnie. Struktura number+content
   w grid wzorowana na sprawdzonym wzorcu .oai-water-damage-actions
   (page-water-damage.css), ale bez jego osi laczacej numery - tutaj,
   zgodnie z zaakceptowanym kierunkiem, kroki oddziela cienki poziomy
   separator (ten sam token co Sekcja 2 i 3), a caly proces pozostaje
   jedna pionowa lista na kazdej szerokosci, bez przejscia na uklad
   poziomy na szerokim desktopie. Zdanie o zakazie wchodzenia na dach ma
   lekkie wyroznienie typograficzne (pogrubienie + delikatne cyjanowe
   podswietlenie tla) - swiadomie bez ikony ostrzegawczej i bez czerwieni.
   Nota "PODSTAWA" pod krokiem 03 jest mala i podporzadkowana, bez
   wlasnego obramowania. */

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

.oai-site .oai-hail-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-hail-damage-first-actions__intro {
	min-width: 0;
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-hail-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-hail-damage-first-actions__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-hail-damage-first-actions__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-hail-damage-first-actions__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-hail-damage-first-actions__step {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 20px;
	align-items: start;
	min-width: 0;
	box-sizing: border-box;
	padding: 28px 0;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-hail-damage-first-actions__step:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.oai-site .oai-hail-damage-first-actions__number {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--oai-color-cyan);
}

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

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

.oai-site .oai-hail-damage-first-actions__step-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-hail-damage-first-actions__caution {
	font-weight: 800;
	color: var(--oai-color-navy);
	background-color: rgba(33, 225, 253, 0.12);
	padding: 0 3px;
	border-radius: 2px;
}

.oai-site .oai-hail-damage-first-actions__basis {
	margin: 16px 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;
}

.oai-site .oai-hail-damage-first-actions__basis-label {
	margin-right: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

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

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

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

	.oai-site .oai-hail-damage-first-actions__step {
		grid-template-columns: 52px minmax(0, 1fr);
		column-gap: 24px;
		padding: 32px 0;
	}

	.oai-site .oai-hail-damage-first-actions__number {
		font-size: 1.5rem;
	}

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

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

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

	.oai-site .oai-hail-damage-first-actions__step {
		grid-template-columns: 32px minmax(0, 1fr);
		column-gap: 14px;
	}

	.oai-site .oai-hail-damage-first-actions__number {
		font-size: 1.125rem;
	}
}

/* Sekcja 5: "Jak udokumentowac szkode po gradobiciu?". Koncepcja: jedna
   typograficzna "teczka szkody" - ramka z zaokraglonym rogiem (biale tlo,
   var(--oai-radius-m), ten sam token co karty w motywie) na tle sekcji
   subtelnie odróznionym tonalnie od bialej Sekcji 4 (rgba(1,2,66,0.03),
   ten sam token co juz zaakceptowana .oai-water-damage-actions - nie nowy
   kolor). Wyraznie inna konstrukcja niz Sekcja 2 (atlas z linia i
   markerem na krawedzi, bez osobnej kolumny etykiety) i Sekcja 4 (granatowy
   modul / numerowany proces): tutaj kazdy z czterech obszarow to wiersz
   podzielony na waska kolumne etykiety (ok. 18%, wylacznie etykieta -
   SZERSZY KADR / ZBLIZENIA / LISTA USZKODZEN / DOKUMENTY SPRAWY, bez
   dodatkowego, redundantnego indeksu typu KADR/DETAL) i szeroka kolumne
   tresci (H3 + opis), oddzielone cienkim separatorem. Bez numeracji - to
   nie jest proces wymagajacy kolejnosci. Uklad dwukolumnowy wlacza sie od
   700px, ten sam prog co Sekcja 2 tej strony (iframe Live Preview oddaje
   mniej niz nominalna szerokosc "tablet"), ponizej etykieta siedzi nad H3
   w jednej kolumnie. */

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

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

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

.oai-site .oai-hail-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-hail-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-hail-damage-documentation__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-hail-damage-documentation__dossier {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	overflow: hidden;
}

.oai-site .oai-hail-damage-documentation__area {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	box-sizing: border-box;
	padding: 24px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-hail-damage-documentation__area:last-child {
	border-bottom: none;
}

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

.oai-site .oai-hail-damage-documentation__content {
	min-width: 0;
	max-width: 100%;
}

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

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

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

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

	.oai-site .oai-hail-damage-documentation__area {
		display: grid;
		grid-template-columns: minmax(140px, 18%) minmax(0, 1fr);
		column-gap: 32px;
		align-items: start;
		gap: 0;
		padding: 28px 32px;
	}

	.oai-site .oai-hail-damage-documentation__label {
		padding-top: 3px;
	}
}

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

	.oai-site .oai-hail-damage-documentation__area {
		padding: 20px 18px;
	}
}

/* Sekcja 6: "Co sprawdzic w kosztorysie i decyzji po gradobiciu?" */

.oai-site .oai-hail-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-hail-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-hail-damage-estimate-review__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

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

.oai-site .oai-hail-damage-estimate-review__row {
	min-width: 0;
	max-width: 640px;
	box-sizing: border-box;
	padding: 24px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-hail-damage-estimate-review__row:first-child {
	border-top: none;
	padding-top: 0;
}

.oai-site .oai-hail-damage-estimate-review__label {
	display: flex;
	align-items: center;
	gap: 10px;
	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-hail-damage-estimate-review__label::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-hail-damage-estimate-review__row-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-hail-damage-estimate-review__row-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-hail-damage-estimate-review__link-wrap {
	margin: 32px 0 0;
	max-width: 640px;
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-hail-damage-estimate-review__link {
	display: inline-block;
	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-hail-damage-estimate-review__link:hover,
.oai-site .oai-hail-damage-estimate-review__link:focus-visible {
	color: var(--oai-color-cyan);
}

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

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

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

	.oai-site .oai-hail-damage-estimate-review__row-heading {
		font-size: 1.125rem;
	}
}

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

	.oai-site .oai-hail-damage-estimate-review__row {
		padding: 20px 0;
	}
}

/* Sekcja 7: "Grad a inne przyczyny szkody" */

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

.oai-site .oai-hail-damage-boundary__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

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

.oai-site .oai-hail-damage-boundary__topic {
	min-width: 0;
	max-width: 620px;
	box-sizing: border-box;
}

.oai-site .oai-hail-damage-boundary__topic + .oai-hail-damage-boundary__topic {
	margin-top: 32px;
}

.oai-site .oai-hail-damage-boundary__topic-label {
	margin: 0 0 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-hail-damage-boundary__topic-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-hail-damage-boundary__topic-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-hail-damage-boundary__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-hail-damage-boundary__link:hover,
.oai-site .oai-hail-damage-boundary__link:focus-visible {
	color: var(--oai-color-cyan);
}

@media (min-width: 700px) {
	.oai-site .oai-hail-damage-boundary {
		padding: 72px 40px;
	}

	.oai-site .oai-hail-damage-boundary__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-hail-damage-boundary__topic-heading {
		font-size: 1.125rem;
	}

	.oai-site .oai-hail-damage-boundary__topic + .oai-hail-damage-boundary__topic {
		margin-top: 40px;
	}
}

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

	.oai-site .oai-hail-damage-boundary__topic + .oai-hail-damage-boundary__topic {
		margin-top: 28px;
	}
}

/* Sekcja 8: "Kiedy warto dokladniej sprawdzic decyzje?" */

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

.oai-site .oai-hail-damage-next-step__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

.oai-site .oai-hail-damage-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-hail-damage-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-hail-damage-next-step__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-hail-damage-next-step__primary {
	min-width: 0;
	max-width: 620px;
	box-sizing: border-box;
	padding: 28px 24px;
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	background-color: rgba(1, 2, 66, 0.02);
}

.oai-site .oai-hail-damage-next-step__primary-label {
	margin: 0 0 10px;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-hail-damage-next-step__primary-body {
	margin: 0 0 20px;
	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-hail-damage-next-step__cta {
	width: auto;
	max-width: 100%;
}

.oai-site .oai-hail-damage-next-step__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;
}

.oai-site .oai-hail-damage-next-step__secondary {
	min-width: 0;
	max-width: 620px;
	margin-top: 28px;
}

.oai-site .oai-hail-damage-next-step__secondary-label {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-hail-damage-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;
	hyphens: none;
}

.oai-site .oai-hail-damage-next-step__secondary-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-hail-damage-next-step__secondary-link:hover,
.oai-site .oai-hail-damage-next-step__secondary-link:focus-visible {
	color: var(--oai-color-cyan);
}

@media (min-width: 700px) {
	.oai-site .oai-hail-damage-next-step {
		padding: 72px 40px;
	}

	.oai-site .oai-hail-damage-next-step__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-hail-damage-next-step__primary {
		padding: 36px 40px;
	}

	.oai-site .oai-hail-damage-next-step__primary-heading {
		font-size: 1.375rem;
	}

	.oai-site .oai-hail-damage-next-step__secondary {
		margin-top: 32px;
	}
}

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

	.oai-site .oai-hail-damage-next-step__primary {
		padding: 22px 18px;
	}
}

/* Sekcja 9: FAQ. Odwzorowanie 1:1 zaakceptowanego, wielokrotnie reuzywanego
   mechanizmu FAQ (.oai-water-damage-faq, page-water-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-hail-damage-faq, poniewaz page-hail-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-hail-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-hail-damage-faq__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Sekcja 10: koncowe CTA, ostatnia sekcja strony, bez zdjecia. Koncepcja
   (pelnoszerokosciowe granatowe CTA, wysrodkowana tresc, przycisk .oai-cta
   z nadpisaniem kolorow na bialy/granat, note jako podrzedny tekst) jest
   odwzorowana ze sprawdzonego, zaakceptowanego wzorca .oai-denial-final-cta
   (assets/css/page-denial.css), ktory jako jedyny istniejacy final-cta
   nie uzywa zdjecia i linkuje juz do produktu 2366. Padding i breakpointy
   (56/20px, 72/40px @700px, 40/16px @360px) sa jednak celowo dopasowane do
   wlasnego rytmu tej strony (identyczne jak w kazdej z Sekcji 2-9 Gradobicia),
   nie do breakpointow 768/600/480/360px uzywanych w zrodlowym wzorcu, zeby
   nie zaburzyc spojnosci wewnatrz tej samej strony - dokladnie ta sama
   zasada, ktora zrodlowy komponent stosuje wobec wlasnej strony. Wlasna,
   izolowana klasa CTA - focus-visible dziedziczony z globalnej reguly
   `a:focus-visible` w main.css, bez potrzeby wlasnej reguly. */

.oai-site .oai-hail-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-hail-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-hail-damage-final-cta__content {
	min-width: 0;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.oai-site .oai-hail-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-hail-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-hail-damage-final-cta__lead {
	margin: 0 0 24px;
	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;
}

.oai-site .oai-hail-damage-final-cta__cta {
	background-color: var(--oai-color-white);
	color: var(--oai-color-navy);
}

.oai-site .oai-hail-damage-final-cta__cta:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

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

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

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

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

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

	.oai-site .oai-hail-damage-final-cta__cta {
		width: 100%;
	}
}