/* Strona "Zuzycie techniczne" (/zuzycie-techniczne/) - Sekcja 1: Hero.
   Namespace .oai-technical-wear-*, oddzielna przestrzen klas od
   .oai-flood-damage-*, .oai-roof-wind-damage-*, .oai-hail-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-flood-damage-hero (page-flood-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 58%/42% (a nie 56%/44% jak w Gradobiciu, 54%/46% jak w Zerwanym
   dachu, ani 55%/45% jak w Powodzi) - wlasna kompozycja tej strony w
   granicach tej samej rodziny design systemu.

   Modul wizualny to prawdziwe zdjecie (zuzycie-techniczne-hero.webp,
   rzeczywiste wymiary 1536x1024, proporcja 3/2 - inna niz 5/4 uzywane
   przez pozostale strony klastra), starszy, zadbany dom z czescia
   elewacji w trakcie termomodernizacji (rusztowanie), spokojna sytuacja
   bez ludzi i bez katastrofy.

   WAZNE: <img> ma atrybuty HTML width="1536" height="1024" (poprawne Core
   Web Vitals - rezerwacja miejsca przed zaladowaniem). Dlatego
   .oai-technical-wear-hero__image MUSI jawnie ustawiac "height: auto"
   obok "aspect-ratio: 3 / 2" - bez tego height="1024" dziala jako
   definitywna, nieskalowana wartosc prezentacyjna, aspect-ratio jest
   wtedy ignorowane, a obraz renderuje sie jako pionowy baner niezaleznie
   od faktycznej szerokosci kolumny (ten sam, wielokrotnie juz naprawiany
   blad z Hero pozostalych stron klastra). Kontener utrzymuje te sama
   proporcje 3/2 co zrodlowy plik na kazdej szerokosci, wiec object-fit:
   cover praktycznie nic nie wycina. */

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

/* Breadcrumb. Odstep miedzy elementami przeniesiony na "gap" kontenera
   flex zamiast statycznego margin:0 8px 0 8px na separatorze "::before" -
   staly margin-left dzialal rowniez wtedy, gdy dany <li> (element flex)
   zawijal sie na poczatek nowego wiersza na narrow mobile, tworzac
   pustaka przed "/" i sprawiajac wrazenie oderwanego znaku. "gap" na
   flex-wrap: wrap nie dodaje wiodacego odstepu przed pierwszym elementem
   zawinietego wiersza, wiec separator zaczyna sie od razu przy lewej
   krawedzi razem z nastepujacym po nim elementem. */

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

.oai-site .oai-technical-wear-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

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

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

.oai-site .oai-technical-wear-hero__content {
	min-width: 0;
	max-width: 100%;
}

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

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

.oai-site .oai-technical-wear-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-technical-wear-hero__visual {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-technical-wear-hero__figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-technical-wear-hero__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	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-technical-wear-hero {
		padding: 72px 40px;
	}

	.oai-site .oai-technical-wear-hero__title {
		font-size: 1.875rem;
	}

	.oai-site .oai-technical-wear-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-technical-wear-hero__cta {
		width: auto;
		min-width: 260px;
	}

	.oai-site .oai-technical-wear-hero__actions {
		width: auto;
	}
}

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

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

	.oai-site .oai-technical-wear-hero__content {
		flex: 0 1 58%;
	}

	.oai-site .oai-technical-wear-hero__visual {
		flex: 1 1 42%;
		max-width: 540px;
	}

	.oai-site .oai-technical-wear-hero__title {
		font-size: 2.125rem;
	}
}

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

/* Sekcja 2: "Zuzycie techniczne nie jest tym samym co uszkodzenie po
   szkodzie". Nie trzy niezalezne karty - jeden wspolny diagram
   zaleznosci STAN PRZED SZKODA -> ZDARZENIE -> WYCENA. Kazdy etap ma
   wlasny "track" (wezel + odcinek linii LACZACY GO Z NASTEPNYM etapem),
   wiec linia biegnie w naturalnym przeplywie flexboksa (bez position:
   absolute, bez SVG, bez JS) - ostatni etap chowa swoj odcinek linii
   (nic po nim nie nastepuje). Mobile: track w kolumnie (wezel nad
   pionowym odcinkiem), stage w wierszu (track obok tresci) - to daje
   jedna wspolna pionowa os po lewej stronie. Od 860px (swiadomie inny
   prog niz 768/1024 uzywane w Hero klastra - trzy krotkie kolumny
   tekstu mieszcza sie wygodnie dopiero od tej szerokosci, wiec tablet
   portrait 768px nadal dostaje uklad pionowy): track obraca sie w
   wiersz (wezel + poziomy odcinek), stage w kolumne (track nad
   trescia) - odcinki kolejnych etapow stykaja sie ze soba, tworzac
   jedna ciagla pozioma linie przechodzaca przez wszystkie trzy wezly.
   Etap ZDARZENIE ma wypelniony cyjanowy wezel (pozostale dwa maja
   obrys) - to jedyne wizualne wyroznienie punktu przejscia, bez
   czerwieni, ikon ostrzegawczych ani dramatycznych efektow. Tlo sekcji
   to juz istniejacy w projekcie token chlodnego odcienia navy
   (rgba(1, 2, 66, 0.02), ten sam co Sekcja 2 Powodzi) - nie nowy,
   losowy kolor. */

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

.oai-site .oai-technical-wear-definition__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-definition__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-technical-wear-definition__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-technical-wear-definition__lead {
	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-technical-wear-definition__flow {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oai-site .oai-technical-wear-definition__stage {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.oai-site .oai-technical-wear-definition__stage-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 16px;
	width: 16px;
	align-self: stretch;
}

.oai-site .oai-technical-wear-definition__stage-node {
	flex-shrink: 0;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--oai-color-cyan);
	background-color: var(--oai-color-white);
}

.oai-site .oai-technical-wear-definition__stage--event .oai-technical-wear-definition__stage-node {
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-technical-wear-definition__stage-line {
	flex: 1 1 auto;
	width: 2px;
	min-height: 20px;
	margin-top: 4px;
	background-color: var(--oai-color-border);
}

.oai-site .oai-technical-wear-definition__stage:last-child .oai-technical-wear-definition__stage-line {
	display: none;
}

.oai-site .oai-technical-wear-definition__stage-content {
	min-width: 0;
	flex: 1 1 auto;
	padding-top: 1px;
	padding-bottom: 28px;
}

.oai-site .oai-technical-wear-definition__stage:last-child .oai-technical-wear-definition__stage-content {
	padding-bottom: 0;
}

.oai-site .oai-technical-wear-definition__stage-label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

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

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

@media (min-width: 768px) {
	.oai-site .oai-technical-wear-definition {
		padding: 72px 40px;
	}

	.oai-site .oai-technical-wear-definition__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-definition__lead {
		font-size: 1rem;
	}
}

@media (min-width: 860px) {
	.oai-site .oai-technical-wear-definition__flow {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-technical-wear-definition__stage {
		flex: 1 1 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
		min-width: 0;
	}

	.oai-site .oai-technical-wear-definition__stage-track {
		flex-direction: row;
		align-items: center;
		width: auto;
		flex: 0 0 auto;
		align-self: auto;
		margin: 0 0 20px;
	}

	.oai-site .oai-technical-wear-definition__stage-line {
		width: auto;
		height: 2px;
		min-height: 0;
		margin: 0 0 0 4px;
	}

	.oai-site .oai-technical-wear-definition__stage-content {
		padding-top: 0;
		padding-right: 24px;
		padding-bottom: 0;
	}

	.oai-site .oai-technical-wear-definition__stage:last-child .oai-technical-wear-definition__stage-content {
		padding-right: 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-technical-wear-definition {
		padding: 40px 16px;
	}
}

/* Sekcja 3: "Wartosc odtworzeniowa i rzeczywista oznaczaja inny punkt
   odniesienia dla wyceny". Celowo inny jezyk wizualny niz Sekcja 2 -
   to nie proces (brak osi, wezlow, strzalek, numeracji). Jeden wspolny
   "dokument" (.__module: biale tlo, cienka ramka, duzy radius) zawiera
   wewnatrz dwie czesci (.__part) rozdzielone SUBTELNYM separatorem
   (border, nie osobne karty z cieniami) oraz nota koncowa pod nimi -
   struktura jak jeden arkusz zasad, nie porownanie dwoch produktow.
   Mobile: czesci w kolumnie, separator to border-top na drugiej czesci.
   Od 900px (swiadomie inny prog niz 860px Sekcji 2, zeby oba przejscia
   ukladu nie byly identyczne, i inny niz 768/1024 Hero - dwie krotsze
   kolumny tekstu z H3 potrzebuja tej szerokosci, wiec tablet portrait
   768px nadal dostaje uklad pionowy): czesci obok siebie z celowo
   asymetrycznym podzialem 52/48 (nie sztywne 50/50 - prawa czesc ma
   nieco krotszy tekst), separator zmienia sie w pionowa linie (border-
   left) miedzy kolumnami. Nota zawsze pozostaje pelnej szerokosci pod
   obiema czesciami, oddzielona wlasnym border-top - spokojne domkniecie
   porownania, bez czerwieni, alertow ani ciezkiego disclaimera. */

.oai-site .oai-technical-wear-value-basis {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-technical-wear-value-basis__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-technical-wear-value-basis__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

.oai-site .oai-technical-wear-value-basis__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-technical-wear-value-basis__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-technical-wear-value-basis__lead {
	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-technical-wear-value-basis__module {
	min-width: 0;
	box-sizing: border-box;
	background-color: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	padding: 24px 20px;
}

.oai-site .oai-technical-wear-value-basis__parts {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oai-site .oai-technical-wear-value-basis__part {
	min-width: 0;
	padding: 20px 0;
}

.oai-site .oai-technical-wear-value-basis__part:first-child {
	padding-top: 0;
}

.oai-site .oai-technical-wear-value-basis__part--actual {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-technical-wear-value-basis__part-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-technical-wear-value-basis__part-heading {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-technical-wear-value-basis__note {
	margin: 20px 0 0;
	padding-top: 20px;
	max-width: 100%;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	border-top: 1px solid var(--oai-color-border);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-technical-wear-value-basis {
		padding: 72px 40px;
	}

	.oai-site .oai-technical-wear-value-basis__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-value-basis__lead {
		font-size: 1rem;
	}

	.oai-site .oai-technical-wear-value-basis__module {
		padding: 36px 40px;
	}
}

@media (min-width: 900px) {
	.oai-site .oai-technical-wear-value-basis__parts {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-technical-wear-value-basis__part {
		padding: 0;
	}

	.oai-site .oai-technical-wear-value-basis__part--reconstruction {
		flex: 0 1 52%;
		padding-right: 32px;
	}

	.oai-site .oai-technical-wear-value-basis__part--actual {
		flex: 1 1 48%;
		padding-left: 32px;
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
	}
}

@media (max-width: 360px) {
	.oai-site .oai-technical-wear-value-basis {
		padding: 40px 16px;
	}

	.oai-site .oai-technical-wear-value-basis__module {
		padding: 20px 16px;
	}
}

/* Sekcja 4: "Sam wiek budynku nie wyjasnia jeszcze stopnia zuzycia".
   Trzeci, znowu odmienny jezyk wizualny na tej stronie - nie diagram
   (Sekcja 2), nie dokument podzielony na dwie rownolegle czesci
   (Sekcja 3), tylko "archiwum dowodow": jeden wspolny, delikatnie
   podbarwiony modul (.__archive) zawierajacy trzy asymetryczne
   "rekordy" (.__entry) - waska "etykieta dowodu" w formie malego
   obramowanego znacznika (.__entry-tag-text, WLASNY, nowy w tej sekcji
   styl - nie plaski uppercase-label jak w Sekcji 2/3) plus szeroka
   trescia (H3 + akapit), oddzielone cienkimi poziomymi liniami. Zero
   numeracji, zero kart z cieniami, zero ikon - asymetria wynika wprost
   z proporcji znacznik/tresc, wiec nie trzeba wymuszac sztucznego
   ukladu 33/33/33. Tlo modulu to bardzo subtelny wlasny odcien navy
   (rgba(1, 2, 66, 0.015) - lzejszy niz token Sekcji 2, zeby "kartka
   archiwum" byla wyczuwalna, ale nie kopiowala dokladnie tego samego
   podbarwienia).

   Od 840px (swiadomie inny prog niz 860px Sekcji 2 i 900px Sekcji 3 -
   waska kolumna znacznika + szeroka kolumna tresci potrzebuje mniej
   przestrzeni niz niemal-rowny podzial Sekcji 3, wiec przejscie na
   uklad poziomy moze nastapic wczesniej): .__entry przechodzi z kolumny
   w wiersz, znacznik dostaje stala szerokosc po lewej, tresc wypelnia
   reszte.

   WYJATEK OD KONWENCJI ETYKIET: etykieta trzeciego rekordu "MATERIAŁ I
   UZYTKOWANIE" jest jedynym labelem na calej stronie, w ktorym
   zastosowano U+00A0 (miedzy "I" a "UZYTKOWANIE") - w odroznieniu od
   plaskich etykiet Sekcji 2/3, tutaj etykieta renderuje sie wewnatrz
   waskiego, obramowanego znacznika (.__entry-tag-text), wiec samotne
   "I" na koncu wiersza wewnatrz tak waskiego komponentu jest realnym,
   a nie tylko teoretycznym ryzykiem sieroty - stad swiadomy, celowy
   wyjatek od dotychczasowej zasady "bez NBSP w etykietach". */

.oai-site .oai-technical-wear-condition {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-technical-wear-condition__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-technical-wear-condition__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

.oai-site .oai-technical-wear-condition__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-technical-wear-condition__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-technical-wear-condition__lead {
	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-technical-wear-condition__archive {
	min-width: 0;
	box-sizing: border-box;
	background-color: rgba(1, 2, 66, 0.015);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-l);
	padding: 0 20px;
}

.oai-site .oai-technical-wear-condition__entry {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-technical-wear-condition__entry:first-child {
	border-top: none;
}

.oai-site .oai-technical-wear-condition__entry-tag {
	margin: 0 0 10px;
}

.oai-site .oai-technical-wear-condition__entry-tag-text {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 4px 10px;
	border: 1px solid var(--oai-color-border);
	border-radius: 4px;
	background-color: var(--oai-color-white);
	font-size: 11px;
	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-technical-wear-condition__entry-content {
	min-width: 0;
}

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

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

@media (min-width: 768px) {
	.oai-site .oai-technical-wear-condition {
		padding: 72px 40px;
	}

	.oai-site .oai-technical-wear-condition__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-condition__lead {
		font-size: 1rem;
	}

	.oai-site .oai-technical-wear-condition__archive {
		padding: 0 32px;
	}

	.oai-site .oai-technical-wear-condition__entry {
		padding: 24px 0;
	}
}

@media (min-width: 840px) {
	.oai-site .oai-technical-wear-condition__entry {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.oai-site .oai-technical-wear-condition__entry-tag {
		flex: 0 0 160px;
		width: 160px;
		min-width: 0;
		margin: 0;
		padding-top: 2px;
	}

	.oai-site .oai-technical-wear-condition__entry-content {
		flex: 1 1 auto;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-technical-wear-condition {
		padding: 40px 16px;
	}

	.oai-site .oai-technical-wear-condition__archive {
		padding: 0 16px;
	}

	.oai-site .oai-technical-wear-condition__entry {
		padding: 16px 0;
	}
}

/* Sekcja 5: "Jak liczy sie zuzycie w obowiazkowym ubezpieczeniu budynkow
   rolniczych?". Najmocniejsze wizualne przelamanie strony - jedyna
   dotychczas pelnoszerokosciowa granatowa sekcja (var(--oai-color-navy),
   ten sam token i ta sama progresja paddingu 56/20 -> 72/40 @768px ->
   40/16 @360px co kazdy inny pelnoszerokosciowy granatowy modul w
   projekcie), sygnalizujaca przejscie od zasad ogolnych (Sekcje 2-4) do
   szczegolnego rezimu obowiazkowego ubezpieczenia budynkow rolniczych.

   Proces 01 -> 02 -> 03: w odroznieniu od Sekcji 2 (gdzie numeracja byla
   zakazana), tutaj numeracja jest finalnie zaakceptowana i merytorycznie
   uzasadniona (trzy etapy tworza rzeczywisty ciag: polisa -> okres
   ochrony -> kosztorys i decyzja). Mechanizm laczenia wezlow tym samym,
   sprawdzonym sposobem co Sekcja 2 (track = wezel + odcinek linii W
   NATURALNYM PRZEPLYWIE FLEXBOKSA, bez position: absolute, bez SVG, bez
   JS) - ale wezel jest tu wiekszy i zawiera widoczna cyfre ("01"/"02"/
   "03") zamiast bycia pustym punktem, bo numeracja ma tu byc widoczna
   mocniej niz zwykly label. Odstep miedzy etapami (32px) zastosowany
   OD RAZU jako padding-bottom na .__stage-content (nie na .__stage) -
   ten sam fix, ktory w Sekcji 2 trzeba bylo wprowadzac osobno po
   kontroli wizualnej, tutaj zastosowany prewencyjnie, zeby track
   (align-self: stretch) rozciagal sie razem z tym odstepem i linia
   procesu byla od razu ciagla, bez przerwy przed kolejnym wezlem.

   Od 960px (swiadomie najszerszy prog sposrod Sekcji 2-5 tej strony -
   kazdy etap niesie tu wiecej tresci niz w Sekcji 2: label + H3 + pelny
   akapit + widoczny numer, wiec potrzebuje wiecej miejsca zanim
   przejdzie na uklad poziomy): proces przechodzi z kolumny w wiersz.

   Callout "TEN SAM PROCENT POJAWIL SIE DRUGI RAZ?" to jeden jasny modul
   (bialy, granatowy tekst, maly cyjanowy akcent przed naglowkiem) -
   celowo NIE naglowek H2/H3 (semantyka sekcji ma dokladnie 3 H3,
   wylacznie etapy procesu), tylko wyrozniony <p>, zeby "wyjsc" z
   granatowego tla bez zaburzania hierarchii naglowkow. "WAZNE
   ROZROZNIENIE" i nota prawna to spokojne bloki tekstowe oddzielone
   cienkimi separatorami rgba(255,255,255,0.16) - bez czerwieni, bez
   ikon ostrzegawczych, bez stylu warning. */

.oai-site .oai-technical-wear-farm-buildings {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-navy);
}

.oai-site .oai-technical-wear-farm-buildings__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-technical-wear-farm-buildings__intro {
	min-width: 0;
	max-width: 720px;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-farm-buildings__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-technical-wear-farm-buildings__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-technical-wear-farm-buildings__lead {
	margin: 0;
	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-technical-wear-farm-buildings__process {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-farm-buildings__stage {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.oai-site .oai-technical-wear-farm-buildings__stage-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 32px;
	width: 32px;
	align-self: stretch;
}

.oai-site .oai-technical-wear-farm-buildings__stage-node {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid var(--oai-color-cyan);
	background-color: var(--oai-color-navy);
	font-size: 12px;
	font-weight: 700;
	color: var(--oai-color-cyan);
}

.oai-site .oai-technical-wear-farm-buildings__stage-line {
	flex: 1 1 auto;
	width: 2px;
	min-height: 24px;
	margin-top: 6px;
	background-color: rgba(255, 255, 255, 0.16);
}

.oai-site .oai-technical-wear-farm-buildings__stage:last-child .oai-technical-wear-farm-buildings__stage-line {
	display: none;
}

.oai-site .oai-technical-wear-farm-buildings__stage-content {
	min-width: 0;
	flex: 1 1 auto;
	padding-bottom: 32px;
}

.oai-site .oai-technical-wear-farm-buildings__stage:last-child .oai-technical-wear-farm-buildings__stage-content {
	padding-bottom: 0;
}

.oai-site .oai-technical-wear-farm-buildings__stage-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-technical-wear-farm-buildings__stage-heading {
	margin: 0 0 8px;
	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-technical-wear-farm-buildings__stage-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-technical-wear-farm-buildings__callout {
	min-width: 0;
	box-sizing: border-box;
	margin: 0 0 32px;
	padding: 28px 24px;
	background-color: var(--oai-color-white);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-technical-wear-farm-buildings__callout-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-technical-wear-farm-buildings__callout-heading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 2px;
	margin: 0 8px 2px 0;
	background-color: var(--oai-color-cyan);
	vertical-align: middle;
}

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

.oai-site .oai-technical-wear-farm-buildings__note-block {
	min-width: 0;
	margin: 0 0 28px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.oai-site .oai-technical-wear-farm-buildings__note-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-technical-wear-farm-buildings__note-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-technical-wear-farm-buildings__legal {
	margin: 0;
	max-width: 100%;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (min-width: 768px) {
	.oai-site .oai-technical-wear-farm-buildings {
		padding: 72px 40px;
	}

	.oai-site .oai-technical-wear-farm-buildings__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-farm-buildings__lead {
		font-size: 1rem;
	}

	.oai-site .oai-technical-wear-farm-buildings__callout {
		padding: 36px 32px;
	}
}

@media (min-width: 960px) {
	.oai-site .oai-technical-wear-farm-buildings__process {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-technical-wear-farm-buildings__stage {
		flex: 1 1 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		min-width: 0;
	}

	.oai-site .oai-technical-wear-farm-buildings__stage-track {
		flex-direction: row;
		align-items: center;
		width: auto;
		flex: 0 0 auto;
		align-self: auto;
		margin: 0 0 20px;
	}

	.oai-site .oai-technical-wear-farm-buildings__stage-line {
		width: auto;
		height: 2px;
		min-height: 0;
		margin: 0 0 0 12px;
	}

	.oai-site .oai-technical-wear-farm-buildings__stage-content {
		padding-bottom: 0;
		padding-right: 28px;
	}

	.oai-site .oai-technical-wear-farm-buildings__stage:last-child .oai-technical-wear-farm-buildings__stage-content {
		padding-right: 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-technical-wear-farm-buildings {
		padding: 40px 16px;
	}

	.oai-site .oai-technical-wear-farm-buildings__callout {
		padding: 20px 16px;
	}
}

/* Sekcja 6: "Czy zuzycie techniczne moze miec znaczenie przy
   odszkodowaniu z OC?". Powrot do jasnego tla po pelnoszerokosciowej
   granatowej Sekcji 5 - wizualny oddech, bialy background, brak ciezkiej
   ramki. Celowo INNY jezyk niz Sekcja 3 (tam: jeden dokument w
   zewnetrznej ramie z border+radius, dwie czesci rozdzielone cienka
   linia) i INNY niz Sekcja 2/5 (tam: proces/os z wezlami i - w Sekcji 5
   - numeracja). Tutaj: otwarty, bezramkowy uklad "dwa stany, jedna
   granica zdarzenia" - .__states to trzy rownorzedne dzieci w jednym
   plaskim flexie (stan przed / .__divider / stan po), bez zadnego
   wspolnego kontenera z tlem czy obramowaniem laczacego oba stany.
   .__divider NIE jest wezlem procesu - to pojedynczy, statyczny
   separator (dwie linie + widoczny tekstowy label "ZDARZENIE"
   pomiedzy nimi, NIE aria-hidden, bo sam label niesie tresc; ukryte
   sa wylacznie dekoracyjne linie). Ten sam DOM (line, marker, line)
   dziala w obu orientacjach - .__divider jest flex-row (linie poziome)
   na mobile/tablet i flex-column (linie pionowe) od 880px, analogicznie
   do mechanizmu track/line uzywanego juz w Sekcji 2 i 5, ale bez
   wezlow i bez numeracji, zgodnie z wymogiem tej sekcji.

   Od 880px (swiadomie inny prog niz 840/860/900/960 uzywane w
   Sekcjach 2-5 tej strony - trzyczesciowy uklad stan/separator/stan
   z waskim centralnym markerem potrzebuje mniej miejsca niz niemal-
   rowny dwukolumnowy podzial Sekcji 3, ale wiecej niz prosty przeplyw
   Sekcji 2, bo musi pomiescic trzeci, srodkowy element): .__states
   przechodzi z kolumny w wiersz, dwie czesci celowo asymetryczne
   (46%/48%, nie sztywne 50/50).

   .__closing ("CO Z TEGO WYNIKA?") to spokojny, pelnoszerokosciowy
   blok pod obiema czesciami - bardzo subtelnie podbarwione tlo,
   cienki cyjanowy akcent jako border-left (nie ciezka ramka, nie
   mocny cien, nie bialy modul "wychodzacy" z tla jak jasny callout
   Sekcji 5 - to celowo spokojniejszy, drugorzedny wizualnie blok). */

.oai-site .oai-technical-wear-liability {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

.oai-site .oai-technical-wear-liability__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-technical-wear-liability__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-liability__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-technical-wear-liability__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-technical-wear-liability__lead {
	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-technical-wear-liability__states {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-liability__state {
	min-width: 0;
}

.oai-site .oai-technical-wear-liability__state-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-technical-wear-liability__state-heading {
	margin: 0 0 8px;
	max-width: 100%;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-technical-wear-liability__divider {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	min-width: 0;
	margin: 28px 0;
}

.oai-site .oai-technical-wear-liability__divider-line {
	flex: 1 1 auto;
	height: 1px;
	min-width: 16px;
	background-color: var(--oai-color-border);
}

.oai-site .oai-technical-wear-liability__divider-marker {
	flex: 0 0 auto;
	max-width: 100%;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-technical-wear-liability__closing {
	min-width: 0;
	box-sizing: border-box;
	padding: 20px 24px;
	background-color: rgba(1, 2, 66, 0.03);
	border-left: 3px solid var(--oai-color-cyan);
}

.oai-site .oai-technical-wear-liability__closing-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

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

@media (min-width: 768px) {
	.oai-site .oai-technical-wear-liability {
		padding: 72px 40px;
	}

	.oai-site .oai-technical-wear-liability__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-liability__lead {
		font-size: 1rem;
	}

	.oai-site .oai-technical-wear-liability__closing {
		padding: 28px 32px;
	}
}

@media (min-width: 880px) {
	.oai-site .oai-technical-wear-liability__states {
		flex-direction: row;
		align-items: stretch;
	}

	.oai-site .oai-technical-wear-liability__state--before {
		flex: 0 1 46%;
	}

	.oai-site .oai-technical-wear-liability__state--after {
		flex: 1 1 48%;
	}

	.oai-site .oai-technical-wear-liability__divider {
		flex: 0 0 96px;
		flex-direction: column;
		align-items: center;
		width: 96px;
		margin: 0;
	}

	.oai-site .oai-technical-wear-liability__divider-line {
		width: 1px;
		height: auto;
		min-width: 0;
		min-height: 24px;
	}

	.oai-site .oai-technical-wear-liability__divider-marker {
		margin: 16px 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-technical-wear-liability {
		padding: 40px 16px;
	}

	.oai-site .oai-technical-wear-liability__closing {
		padding: 16px 16px 16px 20px;
	}
}

/* Sekcja 7: "Sprawdz, skad wzielo sie zuzycie techniczne w wyliczeniu".
   "Slad dokumentow" - czwarty, znowu odmienny jezyk wizualny na tej
   stronie: NIE timeline z wezlami (Sekcja 2/5), NIE dokument w ramie
   (Sekcja 3), NIE otwarte dwa stany z centralnym markerem (Sekcja 6).
   Cztery segmenty (PODSTAWA/DOKUMENTY/KOSZTORYS/DECYZJA) to rownorzedne
   dzieci jednego plaskiego .__trail, bez kart, cieni, ikon ani
   numeracji - asymetryczne proporcje (26/21/29/24% na desktopie)
   wynikaja wprost z rzeczywistej dlugosci tresci, nie z sztywnej
   siatki 25/25/25/25.

   Wspolny "slad" to POJEDYNCZA, ciagla cyjanowa linia (nie osobne
   wezly per segment): na mobile/tablet portrait border-left na calym
   .__trail (pionowy "slad akt" z ktorego "odgaleziaja" sie kolejne
   segmenty wciecie padding-left), na desktopie border-top na calym
   .__trail (poziomy slad biegnacy nad wszystkimi czterema segmentami
   naraz). Segmenty na desktopie rozdziela dodatkowo cienka, neutralna
   pionowa krawedz (border-left, jak brzeg kolejnej kartki akt, nie
   ciezka ramka karty) - na mobile segmenty rozdziela cienka pozioma
   linia (border-top), niezalezna od cyjanowego sladu przy lewej
   krawedzi.

   Od 1040px (najszerszy prog sposrod Sekcji 2-7 tej strony - celowo:
   cztery kolumny o zroznicowanej dlugosci tresci, z ktorych KOSZTORYS
   niesie najwiecej tekstu, potrzebuja zdecydowanie wiecej miejsca niz
   dwu- czy trzyczesciowe uklady wczesniejszych sekcji, zanim przejda
   na uklad poziomy - ponizej tego progu sekcja swiadomie pozostaje w
   pelnym pionie zamiast tworzyc posredni, generyczny grid 2x2).

   Link kontekstowy do /kosztorys-ubezpieczyciela/ powiela juz
   sprawdzony, wielokrotnie uzywany w projekcie wzorzec inline linku
   (m.in. .oai-flood-damage-estimate-review__link): font-size/line-
   height jawnie ustawione na linku (nie samo dziedziczenie), zeby
   zapobiec historycznemu bugowi powiekszonych linkow inline. */

.oai-site .oai-technical-wear-deduction-source {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: var(--oai-color-white);
}

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

.oai-site .oai-technical-wear-deduction-source__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-deduction-source__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

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

.oai-site .oai-technical-wear-deduction-source__lead {
	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-technical-wear-deduction-source__trail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0 0 32px;
	border-left: 2px solid var(--oai-color-cyan);
	padding-left: 20px;
}

.oai-site .oai-technical-wear-deduction-source__segment {
	min-width: 0;
	padding: 20px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-technical-wear-deduction-source__segment:first-child {
	padding-top: 0;
	border-top: none;
}

.oai-site .oai-technical-wear-deduction-source__segment-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-technical-wear-deduction-source__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-technical-wear-deduction-source__segment-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-technical-wear-deduction-source__link-wrap {
	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-technical-wear-deduction-source__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-technical-wear-deduction-source__link:hover {
	color: var(--oai-color-cyan);
}

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

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

	.oai-site .oai-technical-wear-deduction-source__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-deduction-source__lead {
		font-size: 1rem;
	}
}

@media (min-width: 1040px) {
	.oai-site .oai-technical-wear-deduction-source__trail {
		flex-direction: row;
		align-items: stretch;
		border-left: none;
		padding-left: 0;
		border-top: 2px solid var(--oai-color-cyan);
	}

	.oai-site .oai-technical-wear-deduction-source__segment {
		padding: 24px 24px 0;
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
		min-width: 0;
	}

	.oai-site .oai-technical-wear-deduction-source__segment:first-child {
		padding-left: 0;
		border-left: none;
	}

	.oai-site .oai-technical-wear-deduction-source__segment--basis {
		flex: 0 1 26%;
	}

	.oai-site .oai-technical-wear-deduction-source__segment--documents {
		flex: 0 1 21%;
	}

	.oai-site .oai-technical-wear-deduction-source__segment--estimate {
		flex: 0 1 29%;
	}

	.oai-site .oai-technical-wear-deduction-source__segment--decision {
		flex: 1 1 24%;
		padding-right: 0;
	}
}

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

	.oai-site .oai-technical-wear-deduction-source__trail {
		padding-left: 16px;
	}
}

/* Sekcja 8: "Co sprawdzic, gdy zuzycie techniczne obnizylo
   odszkodowanie?". "Arkusz kontroli potracenia" - piaty, znowu
   odmienny jezyk wizualny na tej stronie. NIE cyjanowy slad Sekcji 7
   (brak pionowej/poziomej linii przechodzacej przez segmenty), NIE
   zewnetrzna rama dokumentu Sekcji 3 (.__sheet nie ma wlasnego tla ani
   border-radius - wylacznie subtelna gorna i dolna linia, "otwarta
   powierzchnia" a nie karta). Piec wierszy kontrolnych (.__row) to
   rownorzedne dzieci .__sheet, oddzielone WYLACZNIE cienkim border-top
   (brak miedzy pierwszym wierszem). Zero numeracji, zero checkboxow,
   zero ikon - bardziej techniczny, "arkuszowy" charakter niz
   pozostale sekcje.

   TRZY WARSTWY RESPONSYWNE (celowo inne niz standardowy dwuprogowy
   model reszty strony, bo plan wprost wymaga posredniego etapu
   "dwoch stref" na tablet portrait):
   - baza (mobile): .__row w kolumnie - label, potem .__row-content
     (H3 nad tekstem, rowniez w kolumnie) - jedna wspolna, w pelni
     pionowa strefa;
   - od 768px (DWIE STREFY): .__row przechodzi w wiersz - waska stala
     kolumna label (130px) + .__row-content (nadal w kolumnie: H3 nad
     tekstem) jako druga, szersza strefa;
   - od 1000px (TRZY STREFY, swiadomie inny prog niz 840/860/880/900/
     960/1040 uzywane w Sekcjach 2-7 tej strony - trzy strefy z
     wyraznie asymetrycznymi proporcjami potrzebuja wlasnej, srodkowej
     wartosci progu miedzy Sekcja 5 a Sekcja 7): .__row-content
     dodatkowo przechodzi w wiersz, dzielac sie na H3 (~36% calego
     wiersza) i opis (reszta) - label pozostaje tym samym stalym 130px,
     wiec finalnie trzy strefy to w przyblizeniu 13% / 36% / 51%
     szerokosci wiersza, zgodnie z orientacyjnym kierunkiem z briefu.

   Tlo sekcji reuzywa juz istniejacego w projekcie subtelnego chlodnego
   odcienia navy (rgba(1, 2, 66, 0.02), ten sam token co Sekcja 2) -
   nie nowy, losowy kolor - dajac "chlodniejszy" rytm po bialej Sekcji 7.

   Link kontekstowy do /zanizone-odszkodowanie/ powiela sprawdzony
   wzorzec inline linku uzyty juz w Sekcji 7 tej strony (jawny font-
   size/line-height na linku, nie samo dziedziczenie). Slowo "przy"
   bezposrednio poprzedzajace znacznik <a> dostalo dodatkowe U+00A0 w
   PHP (poza lista z briefu) - to rzeczywiste, strukturalne ryzyko
   sieroty na granicy zwyklego tekstu i linku, nie mechaniczne
   nadmiarowe wiazanie. */

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

.oai-site .oai-technical-wear-review__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 32px;
}

.oai-site .oai-technical-wear-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-technical-wear-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-technical-wear-review__lead {
	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-technical-wear-review__sheet {
	min-width: 0;
	border-top: 1px solid var(--oai-color-border);
	border-bottom: 1px solid var(--oai-color-border);
	margin: 0 0 28px;
}

.oai-site .oai-technical-wear-review__row {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 20px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-technical-wear-review__row:first-child {
	padding-top: 20px;
	border-top: none;
}

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

.oai-site .oai-technical-wear-review__row-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

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

.oai-site .oai-technical-wear-review__link-wrap {
	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-technical-wear-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-technical-wear-review__link:hover {
	color: var(--oai-color-cyan);
}

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

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

	.oai-site .oai-technical-wear-review__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-review__lead {
		font-size: 1rem;
	}

	.oai-site .oai-technical-wear-review__row {
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
		padding: 24px 0;
	}

	.oai-site .oai-technical-wear-review__row:first-child {
		padding-top: 24px;
	}

	.oai-site .oai-technical-wear-review__row-label {
		flex: 0 0 130px;
		width: 130px;
		min-width: 0;
		margin: 0;
		padding-top: 2px;
	}

	.oai-site .oai-technical-wear-review__row-content {
		flex: 1 1 auto;
	}
}

@media (min-width: 1000px) {
	.oai-site .oai-technical-wear-review__row-content {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.oai-site .oai-technical-wear-review__row-heading {
		flex: 0 0 42%;
		min-width: 0;
		margin-bottom: 0;
	}

	.oai-site .oai-technical-wear-review__row-text {
		flex: 1 1 auto;
		min-width: 0;
	}
}

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

/* Strona "Zuzycie techniczne" - Sekcja 9: "Co zrobic z decyzja?".
   Namespace .oai-technical-wear-decision, oddzielna przestrzen klas od
   pozostalych sekcji tej strony i od .oai-flood-damage-decision
   (page-flood-damage.css) - koncepcja "glowna decyzja + boczna sciezka"
   jest logicznie podobna (produkt 2365 jako dominujaca sciezka glowna,
   produkt 2366 jako spokojny link pomocniczy), ale kompozycja jest celowo
   inna: Powodz ukladala te dwa bloki pionowo, z pelnym granatowym tlem
   panelu 2365 (.oai-flood-damage-decision__panel, background-color:
   var(--oai-color-navy)). Tutaj panel glowny NIE ma pelnego granatowego
   tla - Sekcja 5 tej strony juz byla mocnym granatowym blokiem, a Sekcja
   11 bedzie koncowym granatowym CTA, wiec powtorzenie tego wzorca tutaj
   zatarloby hierarchie. Dominacje sciezki 2365 buduje tu: szerszy panel
   asymetrycznego ukladu wiersza (a nie pelna szerokosc), delikatny
   cyjanowy akcent w postaci lewego obramowania, bardzo jasne tlo (odcien
   granatu 3% krycia, nie bialy plaski i nie granat pelny) oraz pojedynczy
   wyrazny CTA. Sciezka 2366 pozostaje zwyklym tekstem z linkiem inline,
   oddzielonym cienka linia (border), bez wlasnego naglowka H3 (zgodnie z
   zaakceptowana trescia, ktora nie przewiduje dla niej H3) i bez zadnego
   drugiego przycisku.

   Uklad: mobile/tablet-portrait to naturalna kolumna DOM (intro -> glowna
   sciezka -> separator -> sciezka pomocnicza), bez CSS "order". Od 940px
   (wlasny prog tej sekcji, w orientacyjnym przedziale 900-960px podanym w
   zadaniu, inny niz sasiednie progi tej strony) uklad przechodzi w wiersz:
   .oai-technical-wear-decision__primary rosnie elastycznie (flex: 1 1 0%),
   .oai-technical-wear-decision__secondary ma stala szerokosc kolumny
   (280px), co przy szerokosci kontenera 1280px daje w przyblizeniu
   proporcje bliska 70/30 (nie jest to sztywna matematyczna reguła - to
   naturalny efekt elastycznej kolumny glownej i stalej waskiej kolumny
   pomocniczej), a pionowa linia dzielaca powstaje przez border-left na
   kolumnie pomocniczej zamiast oddzielnego elementu dekoracyjnego. */

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

.oai-site .oai-technical-wear-decision__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-technical-wear-decision__intro {
	min-width: 0;
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-technical-wear-decision__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-technical-wear-decision__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-technical-wear-decision__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-technical-wear-decision__layout {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
}

.oai-site .oai-technical-wear-decision__primary {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 32px 24px;
	background-color: rgba(1, 2, 66, 0.03);
	border-left: 3px solid var(--oai-color-cyan);
	border-radius: 0 var(--oai-radius-l) var(--oai-radius-l) 0;
}

.oai-site .oai-technical-wear-decision__primary-label {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-technical-wear-decision__primary-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-technical-wear-decision__primary-text {
	margin: 0 0 24px;
	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-technical-wear-decision__primary-cta {
	min-height: 48px;
}

.oai-site .oai-technical-wear-decision__primary-microcopy {
	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;
}

.oai-site .oai-technical-wear-decision__secondary {
	width: 100%;
	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-technical-wear-decision__secondary-label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-technical-wear-decision__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-technical-wear-decision__secondary-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-technical-wear-decision__secondary-link:hover {
	color: var(--oai-color-cyan);
}

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

@media (max-width: 480px) {
	.oai-site .oai-technical-wear-decision__primary-cta {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.oai-site .oai-technical-wear-decision {
		padding: 72px 40px 80px;
	}

	.oai-site .oai-technical-wear-decision__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-decision__lead {
		font-size: 1rem;
	}

	.oai-site .oai-technical-wear-decision__primary {
		padding: 40px 40px;
	}
}

@media (min-width: 940px) {
	.oai-site .oai-technical-wear-decision__layout {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
	}

	.oai-site .oai-technical-wear-decision__primary {
		flex: 1 1 0%;
		min-width: 0;
	}

	.oai-site .oai-technical-wear-decision__secondary {
		flex: 0 0 280px;
		width: 280px;
		min-width: 0;
		margin: 0 0 0 40px;
		padding: 8px 0 0 40px;
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
		align-self: center;
	}

	.oai-site .oai-technical-wear-decision__secondary-label {
		margin: 0 0 12px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-technical-wear-decision {
		padding: 40px 16px 48px;
	}

	.oai-site .oai-technical-wear-decision__primary {
		padding: 24px 16px;
	}
}

/* Strona "Zuzycie techniczne" - Sekcja 10: FAQ. Odwzorowanie 1:1
   zaakceptowanego, wielokrotnie reuzywanego mechanizmu FAQ V2
   (.oai-flood-damage-faq, page-flood-damage.css, samo bedace
   namespace'owana kopia .oai-roof-wind-damage-faq / .oai-hail-damage-faq
   i pierwotnego mechanizmu z /szkoda-calkowita/, /zanizone-odszkodowanie/,
   /odmowa-wyplaty-odszkodowania/ i /kosztorys-ubezpieczyciela/). Zmieniono
   wylacznie namespace na .oai-technical-wear-faq, poniewaz
   page-technical-wear.css jest ladowany wylacznie na tej stronie -
   zrodlowy komponent (page-flood-damage.css) 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 witryny 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-technical-wear-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background: var(--oai-color-white);
}

.oai-site .oai-technical-wear-faq__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-technical-wear-faq__intro {
	min-width: 0;
	max-width: 100%;
}

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

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

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

.oai-site .oai-technical-wear-faq__question:focus-visible {
	outline: none;
}

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

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

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

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

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

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

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

	.oai-site .oai-technical-wear-faq__answer {
		padding-right: 0;
	}
}

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

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

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

/* Strona "Zuzycie techniczne" - Sekcja 11: koncowe CTA do Gotowego
   Odwolania 2366. Odwzorowanie 1:1 zaakceptowanego finalnego CTA V2
   (.oai-flood-damage-final-cta, page-flood-damage.css), ktore samo jest
   juz zaakceptowanym, wielokrotnie reuzywanym wzorcem (Zerwany dach,
   Gradobicie). Zmieniono wylacznie namespace na .oai-technical-wear-*,
   poniewaz page-technical-wear.css jest ladowany wylacznie na tej
   stronie - zrodlowy komponent (page-flood-damage.css) pozostal
   nietkniety. Pelnoszerokosciowy granatowy pas w tym samym tokenie i tej
   samej progresji paddingu co pozostale pelnoszerokosciowe granatowe
   moduly tej strony (Sekcja 5: 56/20 -> 72/40 @768px -> 40/16 @360px).
   .__content ma max-width: 780px, margin: 0 auto i text-align: center -
   ta sama, zaakceptowana po kontroli wizualnej wartosc co u zrodla (por.
   korekta wyrownania Sekcji 10 Powodzi). CTA reuzywa systemowej klasy
   .oai-cta (inline-flex) z lokalnym modyfikatorem --inverse (bialy
   przycisk/granatowy tekst na granatowym tle) - centrowanie przycisku
   wynika z text-align: center na rodzicu, bez dodatkowego wrappera.
   Sekcja 9 (uklad "glowna decyzja + boczna sciezka") swiadomie nie jest
   tu powtarzana - to jednoznaczny, pojedynczy finalny CTA. */

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

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

.oai-site .oai-technical-wear-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-technical-wear-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-technical-wear-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-technical-wear-final-cta__cta--inverse {
	min-height: 48px;
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
}

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

.oai-site .oai-technical-wear-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-technical-wear-final-cta__cta--inverse {
		width: 100%;
	}
}

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

	.oai-site .oai-technical-wear-final-cta__title {
		font-size: 1.75rem;
	}

	.oai-site .oai-technical-wear-final-cta__lead {
		font-size: 1rem;
	}
}

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