/* Podstrona „Kosztorys ubezpieczyciela": techniczny szkielet i Sekcja 1
   (hero). Renderowane przez page-kosztorys-ubezpieczyciela.php, ladowane
   wylacznie przez odwolai_v2_is_cost_estimate_page(). Wszystkie selektory
   izolowane pod .oai-site .oai-cost-estimate-hero i
   .oai-site .oai-cost-estimate-ledger, oddzielna przestrzen klas od
   .oai-total-loss-*, .oai-denial-* i .oai-underpayment-*, bez wycieku
   stylow na inne podstrony.

   Kierunek wizualny modulu "Arkusz kosztorysu": jasny, chlodny panel
   (rgba(1,2,66,0.03), ta sama baza koloru co juz uzyta w innych sekcjach
   projektu), nie granatowa karta jak "Bilans szkody" strony
   /szkoda-calkowita/ - celowo odmienny jezyk wizualny hero. Dwie
   rownorzedne grupy ("Kosztorys pojazdu", "Kosztorys mienia") oddzielone
   pojedyncza cienka linia (pionowa na szerszych ekranach, pozioma na
   mobile), bez dwoch osobnych kart z cieniem. Wspolne domkniecie
   "Pozycje, ceny i zalozenia" pod obiema grupami podkresla, ze to jeden
   wspolny system wyliczenia, nie dwa produkty.

   Wewnetrzny prog dwukolumnowy modulu (600px) jest celowo nizszy niz prog
   przejscia calego hero do ukladu poziomego (901px), zgodnie z
   wymaganiem, aby obie grupy mogly stac obok siebie na tablecie, zanim
   cale hero przejdzie do dwoch stref. Prog 901px jest zgodny z
   dominujaca konwencja pozostalych stron problemowych motywu (nie z
   wlasnym, jednorazowym progiem 1201px strony /szkoda-calkowita/).

   Kolejne sekcje (2-10) zostana dodane w osobnych, kolejno akceptowanych
   etapach implementacji, zgodnie z PLAN_KOSZTORYS_UBEZPIECZYCIELA_v1.0.md.
   Ten plik zawiera wylacznie hero. */

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

/* Breadcrumb */

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

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

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

.oai-site .oai-cost-estimate-hero__breadcrumb-item + .oai-cost-estimate-hero__breadcrumb-item::before {
	content: "/";
	margin: 0 8px;
	font-size: 14px;
	color: var(--oai-color-navy-muted);
}

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

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

/* Uklad: tresc + modul "Arkusz kosztorysu" */

.oai-site .oai-cost-estimate-hero__layout {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-cost-estimate-hero__content {
	min-width: 0;
	max-width: 100%;
}

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

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

/* Modul "Arkusz kosztorysu" */

.oai-site .oai-cost-estimate-hero__visual {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-cost-estimate-ledger {
	width: 100%;
	box-sizing: border-box;
	padding: 28px 24px;
	border-radius: var(--oai-radius-l);
	border: 1px solid var(--oai-color-border);
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-cost-estimate-ledger__group {
	min-width: 0;
}

.oai-site .oai-cost-estimate-ledger__group-label {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oai-color-navy);
}

.oai-site .oai-cost-estimate-ledger__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-ledger__item {
	padding: 8px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-cost-estimate-ledger__item + .oai-cost-estimate-ledger__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-cost-estimate-ledger__divider {
	margin: 20px 0;
	height: 1px;
	background-color: var(--oai-color-cyan);
	opacity: 0.35;
}

.oai-site .oai-cost-estimate-ledger__closing {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--oai-color-navy-muted);
}

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

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

	.oai-site .oai-cost-estimate-hero__title {
		font-size: 1.875rem;
	}

	.oai-site .oai-cost-estimate-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-cost-estimate-hero__cta {
		width: auto;
		min-width: 260px;
	}
}

/* Od 600px: dwie grupy modulu obok siebie, niezaleznie od ukladu calego
   hero, zgodnie z wymaganiem tabletu */

@media (min-width: 600px) {
	.oai-site .oai-cost-estimate-ledger {
		display: grid;
		grid-template-columns: 1fr 1px 1fr;
		align-items: start;
		column-gap: 28px;
	}

	.oai-site .oai-cost-estimate-ledger__divider {
		margin: 0;
		width: 1px;
		height: 100%;
	}

	.oai-site .oai-cost-estimate-ledger__closing {
		grid-column: 1 / -1;
	}
}

/* Desktop od 901px: dwie strefy hero, tresc i modul obok siebie (prog
   zgodny z dominujaca konwencja motywu) */

@media (min-width: 901px) {
	.oai-site .oai-cost-estimate-hero__layout {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	.oai-site .oai-cost-estimate-hero__content {
		flex: 0 1 55%;
	}

	.oai-site .oai-cost-estimate-hero__visual {
		flex: 1 1 45%;
	}

	.oai-site .oai-cost-estimate-hero__title {
		font-size: 2.125rem;
	}
}

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

	.oai-site .oai-cost-estimate-ledger {
		padding: 22px 18px;
	}
}

/* Sekcja 2: "Co pokazuje kosztorys, a czego nie widac w koncowej kwocie".
   Spokojny, pelnoszerokosciowy pas tekstu, wizualny oddech po hero - bez
   eyebrow, bez modulu, bez podzialu na pojazd i mienie (obie sciezki
   omowione wspolnie w jednym akapicie). Tlo to bardzo jasny, chlodny
   odcien zbudowany z istniejacej zmiennej --oai-color-navy przy niskiej
   przezroczystosci (ten sam token co uzyty juz w innych sekcjach klastra
   "Problemy i szkody"), nie nowy, niepowiazany kolor, i nie karta - brak
   obramowania, cienia i gradientu. Poziome paddingi sa celowo identyczne
   jak w hero (.oai-cost-estimate-hero), zeby blok tekstowy pozostal w tej
   samej osi co tresc hero na kazdej szerokosci ekranu.

   H2 jest swiadomie mniejsze od H1 hero na kazdym breakpoincie (1.375rem /
   1.5rem / 1.75rem wobec 1.625rem / 1.875rem / 2.125rem H1) - zachowuje to
   hierarchie "wyrazne, ale mniejsze od H1" z wymagania tej sekcji nawet na
   mobile, gdzie sugerowany w zadaniu zakres 28-30px byłby w rzeczywistosci
   wiekszy niz mobilne H1 hero (26px); zastosowano mniejsza wartosc zgodnie
   z zastrzezeniem "o ile odpowiada aktualnej skali typografii".

   Kolejne sekcje (3-10) zostana dodane w osobnych, kolejno akceptowanych
   etapach implementacji, zgodnie z PLAN_KOSZTORYS_UBEZPIECZYCIELA_v1.0.md. */

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

.oai-site .oai-cost-estimate-overview__content {
	min-width: 0;
	max-width: 860px;
	text-align: left;
}

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

.oai-site .oai-cost-estimate-overview__body {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-cost-estimate-overview__body:last-child {
	margin-bottom: 0;
}

/* Tablet od 768px */

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

	.oai-site .oai-cost-estimate-overview__heading {
		font-size: 1.5rem;
	}
}

/* Desktop od 901px, ten sam prog co hero */

@media (min-width: 901px) {
	.oai-site .oai-cost-estimate-overview {
		padding: 92px 40px;
	}

	.oai-site .oai-cost-estimate-overview__heading {
		font-size: 1.75rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-overview {
		padding: 52px 16px;
	}
}

/* Sekcja 3: "Jak powstaje wyliczenie w kosztorysie ubezpieczyciela".
   Wraca do bialego tla hero, aby zmienic rytm strony po jasnym, chlodnym
   pasie Sekcji 2. Wlasny kierunek wizualny "Lancuch wyliczenia": szesc
   wezlow polaczonych subtelnymi cyjanowymi kropkami, nie kartami - swiadomie
   inny jezyk niz drzewo galezi Sekcji 2 strony /szkoda-calkowita/ i inny niz
   modul "Arkusz kosztorysu" wlasnego hero tej strony.

   Kazdy wezel ma wlasna kropke (::before), nie ma osobnych ramek ani cieni.
   Na mobile kropki laczy jedna ciagla pionowa linia (.chain::before).
   Na duzym desktopie (od 1280px, szesc wezlow w jednym rzedzie) kropki
   laczy jedna pozioma linia. Na tablecie i wezszym desktopie (768-1279px,
   uklad 3+3) linia laczaca miedzy rzedami zostala swiadomie pominieta -
   pozostaja same kropki - zgodnie z dopuszczeniem "jezeli lacznik
   komplikuje uklad, pomin go"; kolejnosc DOM 1-6 pozostaje niezmieniona
   niezaleznie od ukladu wizualnego. Wszystkie linie i kropki sa czystymi
   pseudo-elementami CSS, wiec nie istnieja w DOM i nie wymagaja
   aria-hidden. Ostatni wezel ("Wynik koncowy") ma delikatne granatowe
   tlo i granatowa kropke zamiast cyjanowej, odrozniajac go jako wynik
   lancucha, bez uzycia osobnej karty. */

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

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

.oai-site .oai-cost-estimate-calculation__intro {
	max-width: 780px;
	margin: 0 0 40px;
}

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

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

/* Lancuch szesciu wezlow */

.oai-site .oai-cost-estimate-calculation__chain {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-calculation__chain::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background-color: var(--oai-color-cyan);
	opacity: 0.3;
}

.oai-site .oai-cost-estimate-calculation__item {
	position: relative;
	min-width: 0;
	padding: 0 0 0 26px;
}

.oai-site .oai-cost-estimate-calculation__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-cost-estimate-calculation__item-name {
	display: block;
	margin: 0 0 4px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
}

.oai-site .oai-cost-estimate-calculation__item-desc {
	display: block;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-cost-estimate-calculation__item--result {
	padding: 10px 14px 12px 30px;
	border-radius: 8px;
	background-color: rgba(1, 2, 66, 0.05);
}

.oai-site .oai-cost-estimate-calculation__item--result::before {
	left: 14px;
	top: 15px;
	background-color: var(--oai-color-navy);
}

.oai-site .oai-cost-estimate-calculation__caption {
	margin: 0;
	max-width: 640px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

/* Tablet i wezszy desktop: 768-1279px, uklad 3+3, bez linii laczacej
   miedzy rzedami (patrz komentarz na poczatku bloku) */

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

	.oai-site .oai-cost-estimate-calculation__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-calculation__chain {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 24px;
		row-gap: 36px;
	}

	.oai-site .oai-cost-estimate-calculation__chain::before {
		content: none;
	}

	.oai-site .oai-cost-estimate-calculation__item {
		padding: 22px 0 0;
	}

	.oai-site .oai-cost-estimate-calculation__item::before {
		left: 2px;
		top: 0;
	}

	.oai-site .oai-cost-estimate-calculation__item--result {
		padding: 22px 14px 14px 16px;
	}

	.oai-site .oai-cost-estimate-calculation__item--result::before {
		left: 16px;
		top: 10px;
	}
}

/* Desktop od 901px: wieksza typografia naglowka, uklad wciaz 3+3 do 1279px */

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

/* Duzy desktop od 1280px: szesc wezlow w jednym rzedzie, polaczonych
   jedna pozioma linia */

@media (min-width: 1280px) {
	.oai-site .oai-cost-estimate-calculation__chain {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 16px;
	}

	.oai-site .oai-cost-estimate-calculation__item {
		flex: 1 1 0;
	}

	.oai-site .oai-cost-estimate-calculation__item--result {
		flex: 1.15 1 0;
	}

	.oai-site .oai-cost-estimate-calculation__chain::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 5px;
		height: 2px;
		width: auto;
		bottom: auto;
		background-color: var(--oai-color-cyan);
		opacity: 0.3;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-calculation {
		padding: 44px 16px;
	}
}

/* Sekcja 4: "Kosztorys naprawy samochodu: na co zwrocic uwage". Wraca do
   bardzo jasnego, chlodnego tla (rgba(1,2,66,0.025)), odrozniajacego ja od
   bialej Sekcji 3. Wlasny kierunek wizualny "Arkusz operacji naprawy":
   piec grup jako wiersze jednego otwartego arkusza (jedna semantyczna
   lista, bez zewnetrznej ramki i cienia), oddzielone wylacznie subtelnymi
   poziomymi liniami miedzy wierszami - swiadomie inny jezyk niz lancuch
   kropek i linii Sekcji 3. Kazdy naglowek H3 ma wlasny, krotki cyjanowy
   detal (cienka lewa linia), nie ma wspolnej bocznej osi laczacej grupy.
   Ostatnia grupa ("Korekty i porownanie z wycena warsztatu") ma delikatnie
   inne, jasne granatowe tlo i zaokraglenie, pozostajac elementem tej samej
   listy, nie osobna karta.

   Uklad dwuczesciowy wiersza (H3 po lewej, opis po prawej) wlacza sie
   dopiero od 1024px: przy wezszych szerokosciach tabletowych (768-1023px)
   dlugi tytul piatej grupy przy proporcji 30/70 mogl ulegac nadmiernemu
   scisnieciu, dlatego zgodnie z dopuszczeniem "jezeli H3 lub akapity sa
   zbyt sciesnione, ustaw H3 nad akapitem" caly zakres ponizej 1024px
   pozostaje ukladem pionowym (H3 nad opisem) - bezpieczniejsze niz
   niepewna proporcja przy nieznanej rzeczywistej szerokosci tekstu.

   Blok linkowy do /szkoda-calkowita/ znajduje sie pod lista, poza nia,
   stylizowany jako spokojny tekst z linkiem, nie jako CTA ani karta. */

.oai-site .oai-cost-estimate-vehicle {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 20px;
	background-color: rgba(1, 2, 66, 0.025);
}

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

.oai-site .oai-cost-estimate-vehicle__intro {
	max-width: 780px;
	margin: 0 0 36px;
}

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

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

/* Arkusz: piec wierszy w jednej liscie */

.oai-site .oai-cost-estimate-vehicle__sheet {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-vehicle__item {
	padding: 20px 0;
}

.oai-site .oai-cost-estimate-vehicle__item + .oai-cost-estimate-vehicle__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-cost-estimate-vehicle__item-heading {
	margin: 0 0 8px;
	padding-left: 12px;
	border-left: 3px solid var(--oai-color-cyan);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
}

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

.oai-site .oai-cost-estimate-vehicle__item--last {
	margin-top: 4px;
	padding: 20px 20px 22px;
	border-radius: 8px;
	background-color: rgba(1, 2, 66, 0.04);
}

.oai-site .oai-cost-estimate-vehicle__item--last.oai-cost-estimate-vehicle__item {
	border-top: none;
}

/* Blok linkowy do /szkoda-calkowita/ */

.oai-site .oai-cost-estimate-vehicle__link-block {
	margin: 24px 0 0;
	padding-top: 16px;
	max-width: 780px;
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.875rem;
	line-height: 1.45;
}

.oai-site .oai-cost-estimate-vehicle__link-lead {
	display: inline;
	max-width: 100%;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
}

.oai-site .oai-cost-estimate-vehicle__link {
	display: inline;
	margin-left: 4px;
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--oai-color-navy);
	text-decoration: underline;
	text-decoration-color: var(--oai-color-border);
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
	transition: text-decoration-color var(--oai-transition-fast), color var(--oai-transition-fast);
}

.oai-site .oai-cost-estimate-vehicle__link:hover {
	color: var(--oai-color-navy);
	text-decoration-color: var(--oai-color-cyan);
}

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

/* Tablet od 768px: wieksza typografia, uklad wciaz pionowy w kazdym
   wierszu (patrz komentarz na poczatku bloku) */

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

	.oai-site .oai-cost-estimate-vehicle__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-vehicle__item-body {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, uklad wiersza
   pozostaje pionowy do 1023px */

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

/* Od 1024px: dwuczesciowy wiersz, H3 po lewej (ok. 30%), opis po prawej */

@media (min-width: 1024px) {
	.oai-site .oai-cost-estimate-vehicle__item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 28px;
	}

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

	.oai-site .oai-cost-estimate-vehicle__item-body {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 640px;
	}

	.oai-site .oai-cost-estimate-vehicle__item--last {
		align-items: flex-start;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-vehicle {
		padding: 44px 16px;
	}

	.oai-site .oai-cost-estimate-vehicle__item--last {
		padding: 18px 16px 20px;
	}
}

/* Sekcja 5: "Kosztorys szkody w domu lub mieszkaniu: na co zwrocic uwage".
   Wraca do bialego tla (jak Sekcja 3), po bardzo jasnym, chlodnym tle
   Sekcji 4. Wlasny kierunek wizualny "Warstwy odtworzenia mienia":
   naglowek sekcji (eyebrow/H2/lead) w lewej strefie, szesc warstw w
   prawej strefie - dwustrefowy uklad calej sekcji, ale swiadomie inny niz
   Sekcja 4 (ktora ma naglowek NAD arkuszem, nie obok niego). Wewnatrz
   kazdej warstwy H3 znajduje sie NAD opisem (nie po lewej/po prawej jak w
   Sekcji 4) - brak proporcji 30/70 wewnatrz warstwy. Kazdy naglowek H3 ma
   wlasny cyjanowy detal w postaci krotkiej gornej linii (border-top),
   swiadomie inny niz lewa linia H3 Sekcji 4 i inny niz kropki+lancuch
   Sekcji 3. Warstwy oddziela wylacznie subtelna dolna linia, bez kart,
   cieni i ikon. Ostatnia warstwa ma bardzo delikatne, jasne tlo,
   pozostajac elementem tej samej listy.

   Dwustrefowy uklad wlacza sie od 1024px (ten sam prog co przejscie
   Sekcji 4 na uklad dwuczesciowy, dla spojnosci strony). Ponizej 1024px
   naglowek sekcji przechodzi nad warstwy, ktore pozostaja w jednej
   kolumnie - zgodnie z wprost dopuszczonym zachowaniem "jezeli dwie
   strefy powoduja sciskanie". Brak sticky naglowka: dlugosc sekcji i
   liczba warstw nie uzasadniaja dodatkowej zlozonosci technicznej. */

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

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

.oai-site .oai-cost-estimate-property__intro {
	max-width: 780px;
	margin: 0 0 32px;
}

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

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

/* Szesc warstw */

.oai-site .oai-cost-estimate-property__layers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-property__layer {
	padding: 20px 0;
}

.oai-site .oai-cost-estimate-property__layer + .oai-cost-estimate-property__layer {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-cost-estimate-property__layer-heading {
	margin: 0 0 8px;
	padding-top: 10px;
	border-top: 2px solid var(--oai-color-cyan);
	max-width: 100%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-cost-estimate-property__layer-body {
	margin: 0;
	max-width: 640px;
	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-cost-estimate-property__layer:last-child {
	margin-top: 4px;
	padding: 20px 20px 22px;
	border-radius: 8px;
	background-color: rgba(1, 2, 66, 0.04);
}

.oai-site .oai-cost-estimate-property__layer:last-child.oai-cost-estimate-property__layer {
	border-top: none;
}

.oai-site .oai-cost-estimate-property__layer:last-child .oai-cost-estimate-property__layer-body {
	max-width: 100%;
}

/* Tablet od 768px */

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

	.oai-site .oai-cost-estimate-property__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-property__lead {
		max-width: 700px;
	}

	.oai-site .oai-cost-estimate-property__layer-body {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, uklad wciaz
   jednokolumnowy do 1023px */

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

/* Od 1024px: naglowek nad warstwami rowniez na desktopie (poprzedni
   dwustrefowy uklad 34/66 zostal odrzucony - lewa strefa konczyla sie po
   leadzie, zostawiajac duza pusta przestrzen pod nim, a cala tresc byla
   skupiona po prawej).

   Wspolna geometria z Sekcja 4: usunieto oddzielny, wezszy kontener intro
   i listy warstw (max-width 1040px, margin-inline: auto), ktory od okolo
   1120px szerokosci ekranu zwezal i przesuwal Sekcje 5 wzgledem Sekcji 4 -
   obie sekcje dziela ten sam .oai-cost-estimate-*__inner (max-width
   var(--oai-container-width), wysrodkowany), ale Sekcja 5 miala dodatkowy,
   wewnetrzny kontener 1040px, ktorego Sekcja 4 nigdy nie miala. Intro
   (max-width 780px bez centrowania, patrz regula bazowa wyzej) i lista
   warstw (bez wlasnego max-width, wypelnia cala szerokosc .inner)
   odpowiadaja teraz dokladnie regulom .oai-cost-estimate-vehicle__intro i
   .oai-cost-estimate-vehicle__sheet Sekcji 4, wiec lewa i prawa krawedz
   obu sekcji sa identyczne na kazdej szerokosci ekranu bez potrzeby
   dodatkowego breakpointu tutaj. */

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-property {
		padding: 44px 16px;
	}

	.oai-site .oai-cost-estimate-property__layer:last-child {
		padding: 18px 16px 20px;
	}
}

/* Sekcja 6: "Ten sam mechanizm bledu, inne pozycje kosztorysu". Wlasny
   kierunek wizualny "Mapa rozbieznosci": pelnoszerokosciowa ciemna sekcja
   (granatowe tlo marki), swiadome przelamanie rytmu strony po jasnych
   Sekcjach 4 i 5. Cztery mechanizmy jako jedna wspolna plansza (jedna
   semantyczna lista), nie cztery osobne karty - bez wlasnych tel, ramek,
   zaokraglen i cieni na poszczegolnych pozycjach, podzial wylacznie
   cienkimi liniami. Kazdy mechanizm ma zawsze pionowy uklad wewnetrzny
   (H3, potem przyklad pojazdu, potem przyklad domu lub mienia) - nigdy
   dwie kolumny wewnatrz jednego mechanizmu, rowniez na tablecie, zgodnie z
   wprost wymaganym zakazem ukladania przykladow obok siebie w waskim
   mechanizmie.

   Kontener .inner uzywa dokladnie tych samych regul co
   .oai-cost-estimate-vehicle__inner i .oai-cost-estimate-property__inner
   (max-width: var(--oai-container-width), margin: 0 auto), dzieki czemu
   intro i mapa dziela wspolna lewa i prawa os z Sekcjami 4 i 5.

   Centralny napis "ROZNICA W KOSZTORYSIE": zamiast ryzykownego elementu
   pozycjonowanego na przecieciu siatki 2x2 (ktorego rzeczywiste zachowanie
   przy realnych szerokosciach ekranu nie moglo zostac zweryfikowane
   wizualnie w tym srodowisku), zastosowano bezpieczniejszy wariant wprost
   dopuszczony w wymaganiach: maly podpis nad mapa, obecny konsekwentnie na
   kazdej szerokosci ekranu, a nie tylko jako awaryjny fallback tabletowy.
   Podpis jest dekoracyjnym powtorzeniem sensu leadu, dlatego ma
   aria-hidden="true".

   Uklad dwoch kolumn i dwoch rzedow (cztery mechanizmy jako plansza)
   wlacza sie od 1024px - ten sam prog, co przejscie Sekcji 4 i Sekcji 5 na
   ich wlasne uklady desktopowe, wybrany na podstawie rzeczywistych regul
   tych dwoch sekcji, a nie przez zgadywanie. Ponizej 1024px (mobile i
   tablet) mechanizmy tworza jedna kolumne, oddzielone cienka cyjanowa
   linia, zgodnie z wprost wymaganym zachowaniem mobilnym. */

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

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

.oai-site .oai-cost-estimate-patterns__intro {
	max-width: 780px;
	margin: 0 0 24px;
}

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

.oai-site .oai-cost-estimate-patterns__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Podpis "Roznica w kosztorysie" nad mapa (patrz komentarz na poczatku bloku) */

.oai-site .oai-cost-estimate-patterns__caption {
	display: inline-block;
	margin: 0 0 24px;
	padding: 6px 16px;
	border: 1px solid rgba(33, 225, 253, 0.5);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	color: var(--oai-color-cyan);
}

/* Plansza: cztery mechanizmy w jednej liscie */

.oai-site .oai-cost-estimate-patterns__map {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-patterns__mechanism {
	padding: 24px 0;
}

.oai-site .oai-cost-estimate-patterns__mechanism + .oai-cost-estimate-patterns__mechanism {
	border-top: 1px solid rgba(33, 225, 253, 0.35);
}

.oai-site .oai-cost-estimate-patterns__mechanism-heading {
	margin: 0 0 14px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-cost-estimate-patterns__example {
	min-width: 0;
}

.oai-site .oai-cost-estimate-patterns__example + .oai-cost-estimate-patterns__example {
	margin-top: 14px;
}

.oai-site .oai-cost-estimate-patterns__example-label {
	display: block;
	margin: 0 0 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

.oai-site .oai-cost-estimate-patterns__example--vehicle .oai-cost-estimate-patterns__example-label {
	color: var(--oai-color-cyan);
}

.oai-site .oai-cost-estimate-patterns__example-text {
	margin: 0;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

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

	.oai-site .oai-cost-estimate-patterns__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism-heading {
		font-size: 1.125rem;
	}

	.oai-site .oai-cost-estimate-patterns__example-text {
		font-size: 1rem;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, uklad wciaz
   jednokolumnowy do 1023px */

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

/* Od 1024px: plansza 2x2 (ten sam prog, co uklad desktopowy Sekcji 4 i 5) */

@media (min-width: 1024px) {
	.oai-site .oai-cost-estimate-patterns__map {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 0;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism {
		padding: 32px 40px;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism + .oai-cost-estimate-patterns__mechanism {
		border-top: none;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	}

	.oai-site .oai-cost-estimate-patterns__mechanism:nth-child(odd) {
		border-right: 1px solid rgba(255, 255, 255, 0.16);
	}

	.oai-site .oai-cost-estimate-patterns__mechanism:first-child {
		padding-top: 0;
		padding-left: 0;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism:nth-child(2) {
		padding-top: 0;
		padding-right: 0;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism:nth-child(3) {
		padding-left: 0;
		padding-bottom: 0;
	}

	.oai-site .oai-cost-estimate-patterns__mechanism:nth-child(4) {
		padding-right: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-patterns {
		padding: 44px 16px;
	}

	.oai-site .oai-cost-estimate-patterns__caption {
		padding: 6px 14px;
	}
}

/* Sekcja 7: "Dwa przyklady roznic w kosztorysach". Wlasny kierunek
   wizualny: jasna, redakcyjna prezentacja dwoch duzych przykladow
   graficznych, swiadomie inna niz linie i tekstowe pasy Sekcji 4 i 5 oraz
   niz ciemna mapa mechanizmow Sekcji 6. Bardzo jasne, chlodne tlo
   (rgba(1,2,66,0.03), ten sam token co juz uzyty w Sekcji 2), zeby
   przejscie z granatowej Sekcji 6 nie tworzylo ostrego blysku (nie czysta
   biel).

   Kazdy przyklad to pelnoszerokosciowy blok: krotki tekst (etykieta + H3 +
   opis), pod nim zawsze grafika na pelnej szerokosci wspolnego kontenera -
   nigdy dwie grafiki obok siebie, rowniez na najszerszym desktopie,
   zgodnie z wprost wymaganym zakazem (grafiki zawieraja duzo drobnych
   danych, przy polowie szerokosci bylyby nieczytelne). Grafika nigdy nie
   jest kadrowana (object-fit: contain, aspect-ratio: 3 / 2, brak sztywnej
   wysokosci) - zachowuje pelne proporcje 1536x1024 na kazdej szerokosci.
   Cienka neutralna ramka i delikatne zaokraglenie naroznikow wylacznie na
   samej grafice, bez cienia i bez dodatkowej dekoracyjnej ramki wokol
   calego przykladu, zgodnie z wprost wymaganym ograniczeniem.

   Od 1024px (ten sam prog co uklad desktopowy Sekcji 4, 5 i 6) blok
   tekstowy kazdego przykladu przechodzi na dwie kolumny (etykieta i H3 po
   lewej, opis po prawej) - dozwolony wariant wprost wskazany w wymaganiach
   tej sekcji. Sama grafika zawsze pozostaje pod tekstem na pelnej
   szerokosci, niezaleznie od breakpointu. */

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

.oai-site .oai-cost-estimate-examples__intro {
	max-width: 780px;
	margin: 0 0 40px;
}

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

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

/* Kazdy przyklad: tekst, potem grafika na pelnej szerokosci */

.oai-site .oai-cost-estimate-examples__example {
	display: block;
	width: 100%;
	min-width: 0;
}

.oai-site .oai-cost-estimate-examples__example + .oai-cost-estimate-examples__example {
	margin-top: 56px;
}

.oai-site .oai-cost-estimate-examples__example-text {
	min-width: 0;
}

.oai-site .oai-cost-estimate-examples__example-heading-group {
	min-width: 0;
}

.oai-site .oai-cost-estimate-examples__example-label {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-cost-estimate-examples__example-heading {
	margin: 0;
	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-cost-estimate-examples__example-desc {
	margin: 12px 0 0;
	max-width: 640px;
	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-cost-estimate-examples__figure {
	margin: 20px 0 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-cost-estimate-examples__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	border: 1px solid rgba(1, 2, 66, 0.1);
}

.oai-site .oai-cost-estimate-examples__note {
	margin: 40px 0 0;
	max-width: 780px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, blok tekstowy wciaz jednokolumnowy */

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

	.oai-site .oai-cost-estimate-examples__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-examples__example-heading {
		font-size: 1.25rem;
	}

	.oai-site .oai-cost-estimate-examples__example-desc {
		font-size: 1rem;
	}

	.oai-site .oai-cost-estimate-examples__example + .oai-cost-estimate-examples__example {
		margin-top: 72px;
	}
}

/* Desktop od 901px: wieksza typografia naglowka sekcji, blok tekstowy
   wciaz jednokolumnowy do 1023px */

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

/* Od 1024px: blok tekstowy kazdego przykladu na dwie kolumny (patrz
   komentarz na poczatku bloku); grafika pozostaje pod tekstem na pelnej
   szerokosci */

@media (min-width: 1024px) {
	.oai-site .oai-cost-estimate-examples__example-text {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 32px;
	}

	.oai-site .oai-cost-estimate-examples__example-heading-group {
		flex: 0 0 34%;
		max-width: 320px;
	}

	.oai-site .oai-cost-estimate-examples__example-desc {
		flex: 1 1 auto;
		margin-top: 0;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-examples {
		padding: 44px 16px;
	}

	.oai-site .oai-cost-estimate-examples__example + .oai-cost-estimate-examples__example {
		margin-top: 44px;
	}
}

/* Sekcja 8: "Co otrzymujesz, wybierajac Analize Decyzji?". Przebudowana
   po odrzuceniu pierwszej wersji (uklad 40/60 zostawial pusta przestrzen
   pod intro, prawa czesc wygladala jak surowa lista, pionowa linia nie
   budowala kompozycji, tablet rozpadal sie do listy szesciu pogrubionych
   zdan). Nowy kierunek wizualny "Trzy czesci opracowania": pelnoszeroko-
   sciowe intro NAD jednym wspolnym modulem (bez podzialu lewa/prawa
   kolumna, bez ukladu 40/60), a wewnatrz modulu trzy rownorzedne grupy
   jako jedna kompozycja (nie trzy osobne karty - jedno wspolne, jasne,
   chlodne tlo modulu, jedno delikatne zaokraglenie, jedna cienka
   neutralna ramka, bez cieni i bez gradientu).

   Kazda grupa ma mala liniowa ikone (inline SVG, currentColor, kolor
   cyjanowy) nad H3, a pod H3 wewnetrzna liste dwoch krotkich elementow
   zakresu z bardzo subtelna cyjanowa kropka dekoracyjna przed kazdym
   elementem (potrzebna, bo lista nie ma zadnego innego markera). Krotki
   cyjanowy akcent (2px, 48px szerokosci) w lewym gornym rogu modulu przez
   ::before - bez osobnego tytulu "W opracowaniu znajdziesz", ktory
   tworzylby zbedna czwarta warstwe hierarchii.

   Uklad grup: mobile (ponizej 768px) - jedna kolumna, grupy oddzielone
   subtelna neutralna linia wewnetrzna. Od 768px do 1023px - dwie kolumny
   (grupa 1 i 2 obok siebie, jedna pionowa linia miedzy nimi), grupa 3 na
   pelnej szerokosci modulu pod nimi z poziomym separatorem nad nia -
   dokladnie rekomendowany uklad dla zakresu 768-900px, ktory naturalnie
   pozostaje czytelny takze przy 1024px zanim wlaczy sie pelny uklad
   trzykolumnowy. Od 1024px (rzeczywisty prog dobrany dla tej sekcji: przy
   tej szerokosci modul ma odpowiednio duzo miejsca, zeby trzy krotkie H3 -
   "Dokumenty i kluczowe pozycje", "Pominiecia i zalozenia", "Decyzja i
   dalszy kierunek" - i po dwa krotkie elementy zakresu miescily sie
   czytelnie w trzech rownych kolumnach, bez sciskania) - trzy rowne
   kolumny z dwiema cienkimi pionowymi liniami miedzy nimi, wynikajace z
   naturalnego, rownego rozciagania wierszy CSS Grid (bez sztywnej
   height). */

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

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

.oai-site .oai-cost-estimate-analysis-scope__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

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

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

/* Jeden wspolny modul */

.oai-site .oai-cost-estimate-analysis-scope__module {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	padding: 32px 24px;
	border-radius: 16px;
	border: 1px solid rgba(1, 2, 66, 0.08);
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-cost-estimate-analysis-scope__module::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: 0 0 24px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-cost-estimate-analysis-scope__groups {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-analysis-scope__group {
	min-width: 0;
	padding: 20px 0;
}

.oai-site .oai-cost-estimate-analysis-scope__group:first-child {
	padding-top: 0;
}

.oai-site .oai-cost-estimate-analysis-scope__group:last-child {
	padding-bottom: 0;
}

.oai-site .oai-cost-estimate-analysis-scope__group + .oai-cost-estimate-analysis-scope__group {
	border-top: 1px solid rgba(1, 2, 66, 0.1);
}

.oai-site .oai-cost-estimate-analysis-scope__icon {
	display: inline-flex;
	margin: 0 0 12px;
	color: var(--oai-color-cyan);
}

.oai-site .oai-cost-estimate-analysis-scope__group-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.32;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-cost-estimate-analysis-scope__group-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.oai-site .oai-cost-estimate-analysis-scope__group-item {
	position: relative;
	margin: 0 0 8px;
	padding-left: 14px;
	max-width: 100%;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-cost-estimate-analysis-scope__group-item:last-child {
	margin-bottom: 0;
}

.oai-site .oai-cost-estimate-analysis-scope__group-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

/* Tablet od 768px: wieksza typografia, wieksze paddingi sekcji i modulu,
   dwie kolumny (grupa 1 i 2), grupa 3 na pelnej szerokosci pod nimi
   (patrz komentarz na poczatku bloku) */

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

	.oai-site .oai-cost-estimate-analysis-scope__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-analysis-scope__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-cost-estimate-analysis-scope__module {
		padding: 40px;
	}

	.oai-site .oai-cost-estimate-analysis-scope__groups {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 48px;
	}

	.oai-site .oai-cost-estimate-analysis-scope__group {
		padding: 0;
		border-top: none;
	}

	.oai-site .oai-cost-estimate-analysis-scope__group:nth-child(1) {
		padding-right: 24px;
		border-right: 1px solid rgba(1, 2, 66, 0.1);
	}

	.oai-site .oai-cost-estimate-analysis-scope__group:nth-child(3) {
		grid-column: 1 / -1;
		padding-top: 24px;
		margin-top: 24px;
		border-top: 1px solid rgba(1, 2, 66, 0.1);
	}
}

/* Od 901px: wieksza typografia naglowka sekcji (ten sam prog co pozostale
   sekcje tej strony), uklad grup bez zmian do 1023px */

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

/* Od 1024px: pelny uklad trzech rownych kolumn z dwiema cienkimi
   pionowymi liniami (patrz komentarz na poczatku bloku) */

@media (min-width: 1024px) {
	.oai-site .oai-cost-estimate-analysis-scope__module {
		padding: 40px 48px;
	}

	.oai-site .oai-cost-estimate-analysis-scope__groups {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 56px;
	}

	.oai-site .oai-cost-estimate-analysis-scope__group:nth-child(1) {
		padding-right: 28px;
	}

	.oai-site .oai-cost-estimate-analysis-scope__group:nth-child(2) {
		padding-right: 28px;
		border-right: 1px solid rgba(1, 2, 66, 0.1);
	}

	.oai-site .oai-cost-estimate-analysis-scope__group:nth-child(3) {
		grid-column: auto;
		padding-top: 0;
		margin-top: 0;
		border-top: none;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-analysis-scope {
		padding: 44px 16px;
	}

	.oai-site .oai-cost-estimate-analysis-scope__module {
		padding: 24px 20px;
	}
}

/* Sekcja 9: najczestsze pytania. Nie jest to nowy komponent FAQ - to
   dokladny, zaakceptowany wzorzec uzywany na stronach /szkoda-calkowita/
   (.oai-total-loss-faq*), /zanizone-odszkodowanie/ (.oai-underpayment-faq*)
   i /odmowa-wyplaty-odszkodowania/ (.oai-denial-faq*), ktory sam odwzorowuje
   pierwotny mechanizm .oai-service-faq / .oai-faq. Wartosci przeniesione
   jeden do jednego do nowej, izolowanej przestrzeni klas
   .oai-cost-estimate-faq, poniewaz page-cost-estimate.css jest ladowany
   wylacznie na tej stronie. Zrodlowe komponenty (total-loss, underpayment,
   denial) pozostaly nietkniete. Natywne details/summary, plus/minus
   wylacznie CSS (dwa pseudo-elementy tworzace "+", pionowa kreska znika
   przy [open] zostawiajac "-"), brak name (kilka odpowiedzi moze byc
   otwartych jednoczesnie), brak JavaScriptu, brak CTA, brak aside - sekcja
   konczy sie lista pytan. */

.oai-site .oai-cost-estimate-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background: var(--oai-color-white);
}

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

.oai-site .oai-cost-estimate-faq__intro {
	min-width: 0;
	max-width: 100%;
}

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

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

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

.oai-site .oai-cost-estimate-faq__question:focus-visible {
	outline: none;
}

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

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

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

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

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

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

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

	.oai-site .oai-cost-estimate-faq__answer {
		padding-right: 0;
	}
}

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

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

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

/* Sekcja 10: koncowe CTA strony, prowadzi wylacznie do produktu Analiza
   Decyzji (ID 2365). Ten sam jezyk wizualny co zaakceptowane koncowe CTA
   stron /odmowa-wyplaty-odszkodowania/ (.oai-denial-final-cta) i
   /szkoda-calkowita/ (.oai-total-loss-final-cta): plaskie, pelnoszeroko-
   sciowe granatowe tlo, jeden wysrodkowany blok bez karty, bez podzialu na
   kolumny (swiadomie bez asymetrycznego 65/35 uzytego na
   /zanizone-odszkodowanie/ - wprost wymagany dla tej sekcji uklad to pelne
   wysrodkowanie na kazdej szerokosci). Bialy przycisk, granatowy tekst,
   subtelny cyjanowy pierscien na hover i focus-visible - identycznie jak w
   obu sprawdzonych wzorcach.

   Przeszukano wszystkie istniejace koncowe CTA w motywie (denial,
   total-loss, underpayment, homepage, produkt 2365) pod katem mechanizmu
   strzalki w przycisku - w zadnym z nich nie istnieje dekoracyjna strzalka
   wewnatrz przycisku CTA (znalezione ::before/::after w innych plikach
   dotycza wylacznie teł/paneli w tle sekcji, nie samego przycisku). Zgodnie
   z zasada "zastosuj ten sam mechanizm co w zaakceptowanym wzorcu" -
   przycisk pozostaje zwyklym tekstowym CTA bez strzalki, wiernie
   odwzorowujac rzeczywisty, juz zaakceptowany stan projektu, zamiast
   wprowadzac nowy, niepotwierdzony element.

   Skala typografii H2 (1.375 / 1.5 / 1.75rem) celowo dopasowana do
   wlasnego rytmu tej strony (identyczna jak w kazdej z Sekcji 1-9), nie do
   wiekszej skali final-cta strony o zanizonym odszkodowaniu, zeby nie
   zaburzyc spojnosci wewnatrz tej samej strony - ta sama zasada, ktora
   zastosowano juz wczesniej na stronie /odmowa-wyplaty-odszkodowania/.
   Focus-visible przez wspolny mechanizm html[data-oai-input="keyboard"],
   uzywany konsekwentnie w kazdej wczesniejszej sekcji tej strony. */

.oai-site .oai-cost-estimate-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background-color: var(--oai-color-navy);
}

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

.oai-site .oai-cost-estimate-final-cta__content {
	min-width: 0;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

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

.oai-site .oai-cost-estimate-final-cta__lead {
	margin: 0 0 24px;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	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-cost-estimate-final-cta__cta {
	background-color: var(--oai-color-white);
	color: var(--oai-color-navy);
}

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

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

.oai-site .oai-cost-estimate-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: 768px) {
	.oai-site .oai-cost-estimate-final-cta {
		padding: 80px 32px;
	}

	.oai-site .oai-cost-estimate-final-cta__heading {
		font-size: 1.5rem;
	}

	.oai-site .oai-cost-estimate-final-cta__lead {
		font-size: 1.0625rem;
	}
}

@media (min-width: 901px) {
	.oai-site .oai-cost-estimate-final-cta__heading {
		font-size: 1.75rem;
	}
}

@media (max-width: 600px) {
	.oai-site .oai-cost-estimate-final-cta {
		padding: 48px 24px;
	}

	.oai-site .oai-cost-estimate-final-cta__cta {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.oai-site .oai-cost-estimate-final-cta {
		padding: 40px 18px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-cost-estimate-final-cta {
		padding: 36px 16px;
	}
}