/* Podstrona „Szkoda całkowita": techniczny szkielet i Sekcja 1 (hero).
   Renderowane przez page-szkoda-calkowita.php, ładowane wyłącznie przez
   odwolai_v2_is_total_loss_page(). Wszystkie selektory izolowane pod
   .oai-site .oai-total-loss-hero i .oai-site .oai-total-loss-balance,
   oddzielna przestrzeń klas od .oai-denial-* i .oai-underpayment-*, bez
   wycieku stylów na inne podstrony.

   Kierunek wizualny „Bilans szkody": jasne tło hero, ciemnogranatowy modul
   bilansu z jedną wspólną, ciągłą cyjanową osią laczaca trzy pozycje
   (wartosc pojazdu, koszt naprawy, wartosc pozostalosci). Celowo nie trzy
   oddzielne karty, tylko jeden komponent z separatorami wewnetrznymi.
   Zroznicowana szerokosc dekoracyjnych paskow sugeruje porownywanie
   wartosci, bez zadnych fikcyjnych kwot ani procentow.

   Wlasny prog dwukolumnowy tej strony to 1201px, zgodnie z zaakceptowanym
   planem (inne strony problemowe motywu uzywaja 901px, to swiadoma,
   niezalezna decyzja tej strony, nie niespojnosc). Ponizej 1201px uklad
   jednokolumnowy, modul wysrodkowany pod trescia.

   Hero nie zawiera drugiego CTA, inaczej niz hero stron
   /zanizone-odszkodowanie/ i /odmowa-wyplaty-odszkodowania/, zgodnie
   z wprost okreslonym wymaganiem tej sekcji.

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

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

/* Breadcrumb */

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

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

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

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

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

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

/* Uklad: tresc + modul Bilans szkody */

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

.oai-site .oai-total-loss-hero__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-total-loss-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-total-loss-hero__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

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

.oai-site .oai-total-loss-hero__note {
	margin: 16px 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

/* Modul "Bilans szkody" */

.oai-site .oai-total-loss-hero__visual {
	min-width: 0;
	max-width: 100%;
	display: flex;
	justify-content: center;
}

.oai-site .oai-total-loss-balance {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	padding: 28px 24px;
	border-radius: var(--oai-radius-l);
	background-color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-balance__label {
	margin: 0 0 24px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-balance__items {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: none;
	border-left: 2px solid rgba(33, 225, 253, 0.35);
}

.oai-site .oai-total-loss-balance__item {
	position: relative;
	padding: 0 0 26px;
}

.oai-site .oai-total-loss-balance__item:last-child {
	padding-bottom: 0;
}

.oai-site .oai-total-loss-balance__marker {
	position: absolute;
	top: 6px;
	left: -25px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-balance__item-label {
	display: block;
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--oai-color-white);
}

.oai-site .oai-total-loss-balance__bar {
	display: block;
	height: 4px;
	border-radius: 2px;
	background-color: rgba(33, 225, 253, 0.45);
}

.oai-site .oai-total-loss-balance__item--vehicle .oai-total-loss-balance__bar {
	width: 88%;
}

.oai-site .oai-total-loss-balance__item--repair .oai-total-loss-balance__bar {
	width: 56%;
}

.oai-site .oai-total-loss-balance__item--remainder .oai-total-loss-balance__bar {
	width: 34%;
}

/* Tablet od 768px: jedna kolumna, wieksza typografia, modul nadal
   wysrodkowany pod trescia */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-hero {
		padding: 80px 40px;
	}

	.oai-site .oai-total-loss-hero__title {
		font-size: 2rem;
	}

	.oai-site .oai-total-loss-hero__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-total-loss-hero__cta {
		width: auto;
		min-width: 280px;
	}

	.oai-site .oai-total-loss-balance {
		max-width: 460px;
	}
}

/* Desktop od 1201px: dwie strefy, tresc okolo 54%, modul okolo 46% */

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

	.oai-site .oai-total-loss-hero__content {
		flex: 0 1 54%;
	}

	.oai-site .oai-total-loss-hero__visual {
		flex: 1 1 46%;
	}

	.oai-site .oai-total-loss-hero__title {
		font-size: 2.25rem;
	}

	.oai-site .oai-total-loss-balance {
		max-width: 400px;
	}
}

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

	.oai-site .oai-total-loss-balance {
		padding: 22px 18px;
	}
}

/* Sekcja 2: "Co oznacza szkoda calkowita", kierunek wizualny "Rodzaj
   ubezpieczenia -> dwie rozne zasady". Wszystkie selektory izolowane pod
   .oai-site .oai-total-loss-definition i .oai-site .oai-total-loss-threshold,
   oddzielna przestrzen klas od Sekcji 1 (.oai-total-loss-hero,
   .oai-total-loss-balance).

   Wczesniejsza wersja modulu (pozioma os z dwoma punktami na 30% i 70%)
   zostala odrzucona przez uzytkownika jako nieczytelna i mogaca sugerowac
   konkretne progi procentowe dla OC i AC. Nowy modul "Prog decyzji" to
   prosty diagram drzewa: wspolny punkt "Rodzaj ubezpieczenia", pionowy
   lacznik, rozgalezienie na dwie rownorzedne, otwarte galezie OC i AC, kazda
   z krotkim opisem zasady. Brak wartosci procentowych i brak sugestii
   wspolnej skali. Otwarta konstrukcja bez tla i bez ramki, celowo rozna od
   granatowej karty modulu "Bilans szkody" z Sekcji 1. Tlo calej sekcji to
   bardzo jasny, chlodny odcien zbudowany z istniejacej zmiennej
   --oai-color-navy przy niskiej przezroczystosci, nie nowy, niepowiazany
   kolor.

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

.oai-site .oai-total-loss-definition {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-total-loss-definition__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-total-loss-definition__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-total-loss-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-total-loss-definition__heading {
	margin: 0 0 20px;
	max-width: 640px;
	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-total-loss-definition__body {
	margin: 0 0 16px;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-definition__body:last-child {
	margin-bottom: 0;
}

/* Modul "Rodzaj ubezpieczenia -> dwie rozne zasady" (nazwa klas
   .oai-total-loss-threshold zachowana z pierwszej wersji, izolacja bez
   zmian) */

.oai-site .oai-total-loss-definition__visual {
	min-width: 0;
	max-width: 100%;
	display: flex;
	justify-content: center;
}

.oai-site .oai-total-loss-threshold {
	width: 100%;
	max-width: 320px;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.oai-site .oai-total-loss-threshold__question {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-total-loss-threshold__root {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-threshold__stem {
	display: block;
	width: 2px;
	height: 24px;
	margin: 12px 0 0;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-threshold__branches {
	width: 100%;
	margin: 24px 0 0;
	padding: 0 0 0 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	border-left: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-total-loss-threshold__branch {
	position: relative;
	min-width: 0;
	text-align: left;
}

.oai-site .oai-total-loss-threshold__connector {
	position: absolute;
	top: 12px;
	left: -20px;
	width: 14px;
	height: 2px;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-threshold__branch-label {
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-threshold__branch-copy {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
}

/* Tablet od 768px: wieksza typografia, modul pozostaje wysrodkowany */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-definition {
		padding: 64px 40px;
	}

	.oai-site .oai-total-loss-definition__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-definition__body {
		font-size: 1.0625rem;
	}

	.oai-site .oai-total-loss-threshold {
		max-width: 400px;
	}

	.oai-site .oai-total-loss-threshold__branches {
		flex-direction: row;
		border-left: none;
		border-top: 2px solid var(--oai-color-cyan);
		padding: 20px 0 0;
		margin-top: 24px;
	}

	.oai-site .oai-total-loss-threshold__branch {
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
	}

	.oai-site .oai-total-loss-threshold__connector {
		top: -20px;
		left: 50%;
		width: 2px;
		height: 20px;
		transform: translateX(-50%);
	}
}

/* Desktop od 1201px: dwie strefy, tresc po lewej, modul po prawej */

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-definition__inner {
		flex-direction: row;
		align-items: center;
		gap: 64px;
	}

	.oai-site .oai-total-loss-definition__content {
		flex: 0 1 58%;
	}

	.oai-site .oai-total-loss-definition__visual {
		flex: 1 1 42%;
	}

	.oai-site .oai-total-loss-definition__heading {
		font-size: 2rem;
	}
}

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

	.oai-site .oai-total-loss-threshold {
		max-width: 280px;
	}
}

/* Sekcja 3: "Jak powstaje kwota", kierunek wizualny "Jedno wyliczenie, dwie
   wartosci". Wszystkie selektory izolowane pod .oai-site
   .oai-total-loss-calculation, .oai-site .oai-total-loss-equation
   i .oai-site .oai-total-loss-example, oddzielna przestrzen klas od Sekcji 1
   i 2.

   Jedno wspolne, otwarte pole wyliczenia (bez trzech kart) na bialym tle,
   wyraznie oddzielonym od chlodnego tla Sekcji 2. Rownanie i operatory sa
   zgrupowane (operator + kolejny term/wynik w jednym elemencie __group), co
   pozwala elementom zawijac sie razem na wezszych szerokosciach bez
   pozostawiania samotnego znaku minus lub rownosci przy krawedzi. Na mobile
   __group przechodzi w kolumne, wiec rownanie rozklada sie na piec osobnych
   linii (wartosc, minus, wartosc, rownosc, wynik), zgodnie z zaakceptowanym
   ukladem. Cale rownanie ma dostepny wspolny aria-label (role="img"),
   a jego wewnetrzne fragmenty sa aria-hidden, zeby czytnik ekranu nie
   odczytal tresci podwojnie.

   Przyklad liczbowy jest wizualnie mniejszy od glownego rownania. Na mobile
   znak rownosci jest ukryty, a wynik oddziela pozioma linia CSS (border-top)
   zamiast tekstowego znaku - zgodnie z zaakceptowanym wymaganiem.

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

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

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

.oai-site .oai-total-loss-calculation__intro {
	max-width: 720px;
	margin: 0 0 40px;
}

.oai-site .oai-total-loss-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-total-loss-calculation__heading {
	margin: 0 0 20px;
	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-total-loss-calculation__lead {
	margin: 0;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Glowne rownanie pojeciowe */

.oai-site .oai-total-loss-equation {
	width: 100%;
	max-width: 760px;
	margin: 0 auto 48px;
	padding: 0 0 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	border-bottom: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-total-loss-equation__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.oai-site .oai-total-loss-equation__term {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--oai-color-navy);
	text-align: center;
}

.oai-site .oai-total-loss-equation__operator {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-equation__result {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--oai-color-navy);
	border-bottom: 2px solid var(--oai-color-navy);
	padding-bottom: 2px;
}

/* Przyklad liczbowy. Mobile-first: siatka dwoch kolumn (waska kolumna
   operatora + kolumna kwot), kazdy element jawnie umieszczony w konkretnej
   komorce, zeby uniknac niejednoznacznego auto-flow przy mieszaniu jawnego
   i domyslnego rozmieszczenia. .example__row (minus + 14 000 zl) korzysta
   z display: contents, dzieki czemu jego dzieci staja sie bezposrednimi
   elementami siatki .example i trafiaja do wlasciwych kolumn/wierszy. Od
   768px caly modul wraca do jednego poziomego wiersza (flex). */

.oai-site .oai-total-loss-example {
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: min-content max-content;
	column-gap: 10px;
	row-gap: 4px;
	justify-items: end;
}

.oai-site .oai-total-loss-example__row {
	display: contents;
}

.oai-site .oai-total-loss-example__value {
	grid-column: 2;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--oai-color-navy-muted);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.oai-site .oai-total-loss-example__value:first-child {
	grid-row: 1;
}

.oai-site .oai-total-loss-example__row .oai-total-loss-example__value {
	grid-row: 2;
}

.oai-site .oai-total-loss-example__operator {
	grid-column: 1;
	grid-row: 2;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--oai-color-navy-muted);
}

.oai-site .oai-total-loss-example__equals {
	display: none;
}

.oai-site .oai-total-loss-example__result {
	grid-column: 2;
	grid-row: 3;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--oai-color-navy);
	border-top: 2px solid var(--oai-color-cyan);
	padding-top: 8px;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.oai-site .oai-total-loss-example__note {
	width: 100%;
	max-width: 400px;
	margin: 16px auto 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	text-align: left;
}

/* Tablet od 768px: rownanie i przyklad przechodza do ukladu poziomego,
   jezeli miesci sie w szerokosci; flex-wrap zapobiega osamotnieniu
   operatora przy krawedzi */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-calculation {
		padding: 64px 40px;
	}

	.oai-site .oai-total-loss-calculation__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-calculation__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-total-loss-equation {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.oai-site .oai-total-loss-equation__group {
		flex-direction: row;
		gap: 20px;
	}

	.oai-site .oai-total-loss-example {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		max-width: 100%;
		justify-content: center;
		align-items: center;
		gap: 12px;
	}

	.oai-site .oai-total-loss-example__row {
		display: inline-flex;
		align-items: center;
		gap: 12px;
	}

	.oai-site .oai-total-loss-example__equals {
		display: inline;
	}

	.oai-site .oai-total-loss-example__result {
		border-top: none;
		padding-top: 0;
		margin-top: 0;
	}

	.oai-site .oai-total-loss-example__note {
		max-width: 100%;
		text-align: center;
	}
}

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-calculation__heading {
		font-size: 2rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-total-loss-calculation {
		padding: 40px 16px;
	}
}

/* Sekcja 4: "Dwie wyceny", kierunek wizualny "Bilans wartosci". Wszystkie
   selektory izolowane pod .oai-site .oai-total-loss-valuations, oddzielna
   przestrzen klas od Sekcji 1-3.

   Jeden otwarty "arkusz kontroli" (.sheet) z cienka cyjanowa linia u gory
   (nie pelna rama) i dekoracyjnym punktem zlaczenia na srodku tej linii.
   Do 1200px dwie rownorzedne czesci uklada sie pionowo wzdluz wspolnej
   cyjanowej osi po lewej stronie (peer-to-peer, bez wspolnego "korzenia"
   jak w drzewie Sekcji 2 - to swiadomie inny uklad znaczeniowy, mimo
   podobnego jezyka wizualnego linii i kropek). Od 1201px dwie kolumny
   obok siebie z cienkim pionowym separatorem (pseudo-element, bez pelnej
   ramki) dokladnie posrodku. Tlo sekcji to ten sam bardzo jasny, chlodny
   odcien navy co w Sekcji 2, celowo odrozniony od bialego tla Sekcji 3.

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

.oai-site .oai-total-loss-valuations {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-total-loss-valuations__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-total-loss-valuations__intro {
	max-width: 720px;
	margin: 0 0 32px;
}

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

/* Arkusz: cienka gorna linia, punkt zlaczenia na srodku */

.oai-site .oai-total-loss-valuations__sheet {
	position: relative;
	padding-top: 28px;
	border-top: 2px solid var(--oai-color-cyan);
}

.oai-site .oai-total-loss-valuations__joint {
	position: absolute;
	top: 0;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
	transform: translate(-50%, -50%);
}

/* Dwie rownorzedne czesci: mobile-first, uklad pionowy wzdluz wspolnej osi */

.oai-site .oai-total-loss-valuations__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 0;
	border-left: 2px solid var(--oai-color-cyan);
	padding-left: 24px;
}

.oai-site .oai-total-loss-valuations__item {
	position: relative;
	min-width: 0;
	padding: 24px 0;
}

.oai-site .oai-total-loss-valuations__item + .oai-total-loss-valuations__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-total-loss-valuations__marker {
	position: absolute;
	top: 30px;
	left: -30px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-valuations__item-heading {
	margin: 0 0 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-valuations__item-copy {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-valuations__closing {
	margin: 24px 0 0;
	padding-top: 20px;
	max-width: 100%;
	border-top: 1px solid var(--oai-color-border);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--oai-color-navy);
}

/* Tablet od 768px: wieksza typografia, sekcja pozostaje jednokolumnowa
   (dwukolumnowy uklad zaczyna sie dopiero od 1201px) */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-valuations {
		padding: 64px 40px;
	}

	.oai-site .oai-total-loss-valuations__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-valuations__item-heading {
		font-size: 1.125rem;
	}

	.oai-site .oai-total-loss-valuations__item-copy {
		font-size: 1.0625rem;
	}
}

/* Desktop od 1201px: dwie kolumny obok siebie, cienki pionowy separator
   posrodku zamiast lewej osi */

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-valuations__heading {
		font-size: 2rem;
	}

	.oai-site .oai-total-loss-valuations__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 56px;
		border-left: none;
		padding-left: 0;
	}

	.oai-site .oai-total-loss-valuations__grid::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background-color: var(--oai-color-border);
		transform: translateX(-50%);
	}

	.oai-site .oai-total-loss-valuations__item {
		padding: 0;
	}

	.oai-site .oai-total-loss-valuations__item + .oai-total-loss-valuations__item {
		border-top: none;
	}

	.oai-site .oai-total-loss-valuations__marker {
		display: none;
	}

	.oai-site .oai-total-loss-valuations__closing {
		text-align: center;
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-total-loss-valuations {
		padding: 40px 16px;
	}

	.oai-site .oai-total-loss-valuations__grid {
		padding-left: 20px;
	}

	.oai-site .oai-total-loss-valuations__marker {
		left: -26px;
	}
}

/* Sekcja 5: "Ta sama miara", finalny kierunek wizualny "Jeden standard
   wyceny". Wszystkie selektory izolowane pod
   .oai-site .oai-total-loss-consistency, oddzielna przestrzen klas od
   Sekcji 1-4.

   Wczesniejsza koncepcja (dwa rownolegle tory jako diagram HTML/CSS) zostala
   odrzucona przez uzytkownika - kolejny techniczny diagram z liniami
   powodowalby monotonie po Sekcjach 1, 2 i 4. Finalna sekcja wykorzystuje
   gotowy, recznie umieszczony obraz WebP (assets/images/page-total-loss/
   szkoda-calkowita-jeden-standard-wyceny.webp, 1536x1024, proporcja 3:2)
   przedstawiajacy jeden samochod w dwoch wariantach szkody przechodzacy
   przez wspolna brame kontrolna. Brak wlasnego diagramu HTML w tej sekcji -
   cale znaczenie "jednego standardu wyceny" niesie obraz.

   Bialy tlo sekcji, wyraznie odrozniony od chlodnego tla Sekcji 4. Obraz
   nigdy nie jest kadrowany (object-fit: contain, brak wymuszonego
   aspect-ratio, brak sztywnej wysokosci) - zachowuje pelne proporcje 3:2 na
   kazdej szerokosci, zeby wszystkie napisy zaszyte w grafice pozostaly
   czytelne. Desktop od 1201px: uklad dwustrefowy (tresc + obraz). Ponizej -
   jedna kolumna, obraz pod tekstem.

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

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

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

.oai-site .oai-total-loss-consistency__content {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-total-loss-consistency__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-total-loss-consistency__heading {
	margin: 0 0 20px;
	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-total-loss-consistency__copy {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.oai-site .oai-total-loss-consistency__body {
	margin: 0;
	max-width: 640px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-consistency__visual {
	min-width: 0;
	max-width: 100%;
}

.oai-site .oai-total-loss-consistency__figure {
	margin: 0;
	width: 100%;
	max-width: 100%;
}

.oai-site .oai-total-loss-consistency__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 14px;
	border: 1px solid rgba(1, 2, 66, 0.08);
	box-shadow: 0 8px 24px rgba(1, 2, 66, 0.08);
}

/* Tablet od 768px: wieksza typografia, sekcja pozostaje jednokolumnowa
   (dwustrefowy uklad zaczyna sie dopiero od 1201px) */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-consistency {
		padding: 64px 40px;
	}

	.oai-site .oai-total-loss-consistency__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-consistency__body {
		font-size: 1.0625rem;
	}

	.oai-site .oai-total-loss-consistency__image {
		border-radius: 18px;
	}
}

/* Desktop od 1201px: uklad dwustrefowy, tresc po lewej (~42%), obraz po
   prawej (~58%) */

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-consistency__heading {
		font-size: 2rem;
	}

	.oai-site .oai-total-loss-consistency__inner {
		flex-direction: row;
		align-items: center;
		column-gap: clamp(40px, 5vw, 80px);
	}

	.oai-site .oai-total-loss-consistency__content {
		flex: 0 1 42%;
	}

	.oai-site .oai-total-loss-consistency__visual {
		flex: 1 1 58%;
	}

	.oai-site .oai-total-loss-consistency__image {
		border-radius: 22px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-total-loss-consistency {
		padding: 40px 16px;
	}

	.oai-site .oai-total-loss-consistency__image {
		border-radius: 12px;
	}
}

/* Sekcja 6: "OC czy AC", finalny kierunek wizualny "Dwa zrodla zasad".
   Wszystkie selektory izolowane pod
   .oai-site .oai-total-loss-coverage-rules, oddzielna przestrzen klas od
   Sekcji 1-5.

   Wczesniejsza koncepcja (drzewo/rozgalezienie z jednego pytania) zostala
   odrzucona - to dokladnie ten sam mechanizm co diagram "Rodzaj
   ubezpieczenia -> dwie rozne zasady" juz uzyty w Sekcji 2, wiec powtorzenie
   powodowaloby monotonie. Finalna sekcja jest przede wszystkim
   typograficzna: pelne granatowe tlo (var(--oai-color-navy), ta sama
   zmienna co finalne CTA strony /odmowa-wyplaty-odszkodowania/), duze
   oznaczenia OC i AC jako glowny element wizualny, bez wlasnej ilustracji
   czy diagramu z liniami. Kolor jasnego tekstu na granatowym tle
   (rgba(255,255,255,x)) powielony z tego samego, juz zaakceptowanego
   wzorca finalnego CTA strony o odmowie.

   Do 1200px obie czesci ukladaja sie pionowo, oddzielone cienka pozioma
   cyjanowa linia. Od 1201px czesci staja obok siebie w lekko asymetrycznych
   kolumnach, oddzielone cienkim pionowym cyjanowym separatorem (border, nie
   pelna rama).

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

.oai-site .oai-total-loss-coverage-rules {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-coverage-rules__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-total-loss-coverage-rules__intro {
	max-width: 720px;
	margin: 0 0 40px;
}

.oai-site .oai-total-loss-coverage-rules__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-total-loss-coverage-rules__heading {
	margin: 0;
	max-width: 100%;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-coverage-rules__comparison {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-total-loss-coverage-rules__item {
	min-width: 0;
}

.oai-site .oai-total-loss-coverage-rules__item + .oai-total-loss-coverage-rules__item {
	padding-top: 40px;
	border-top: 1px solid rgba(33, 225, 253, 0.25);
}

.oai-site .oai-total-loss-coverage-rules__item-heading {
	margin: 0 0 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
}

.oai-site .oai-total-loss-coverage-rules__item-acronym {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oai-color-white);
}

.oai-site .oai-total-loss-coverage-rules__item-qualifier {
	font-size: 1.0625rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

.oai-site .oai-total-loss-coverage-rules__item-copy {
	margin: 0 0 16px;
	max-width: 480px;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-coverage-rules__item-check {
	margin: 0;
	max-width: 480px;
	padding-top: 12px;
	border-top: 1px solid rgba(33, 225, 253, 0.3);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-coverage-rules__closing {
	margin: 40px 0 0;
	padding-top: 8px;
	max-width: 720px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--oai-color-white);
}

/* Tablet od 768px: wieksza typografia, sekcja pozostaje jednokolumnowa
   (dwustrefowy uklad zaczyna sie dopiero od 1201px) */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-coverage-rules {
		padding: 64px 40px;
	}

	.oai-site .oai-total-loss-coverage-rules__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-coverage-rules__item-copy {
		font-size: 1.0625rem;
	}
}

/* Desktop od 1201px: dwie lekko asymetryczne kolumny, cienki pionowy
   separator na drugiej czesci zamiast poziomej linii */

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-coverage-rules__heading {
		font-size: 2rem;
	}

	.oai-site .oai-total-loss-coverage-rules__comparison {
		flex-direction: row;
		align-items: flex-start;
		column-gap: 56px;
	}

	.oai-site .oai-total-loss-coverage-rules__item {
		flex: 1 1 0;
	}

	.oai-site .oai-total-loss-coverage-rules__item--oc {
		flex-grow: 1.04;
	}

	.oai-site .oai-total-loss-coverage-rules__item--ac {
		flex-grow: 0.96;
	}

	.oai-site .oai-total-loss-coverage-rules__item + .oai-total-loss-coverage-rules__item {
		padding-top: 0;
		padding-left: 56px;
		border-top: none;
		border-left: 1px solid rgba(33, 225, 253, 0.25);
	}

	.oai-site .oai-total-loss-coverage-rules__item-acronym {
		font-size: 2.75rem;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-total-loss-coverage-rules {
		padding: 40px 16px;
	}

	.oai-site .oai-total-loss-coverage-rules__item-acronym {
		font-size: 1.75rem;
	}
}

/* Sekcja 7: "Co sprawdzic", finalny kierunek wizualny "Rejestr kontroli".
   Wszystkie selektory izolowane pod .oai-site .oai-total-loss-checklist,
   oddzielna przestrzen klas od Sekcji 1-6.

   Wczesniejsza koncepcja (jedna pionowa os / timeline) zostala odrzucona -
   finalna sekcja jest redakcyjnym rejestrem siedmiu krokow (ol), bez linii
   laczacej numery. Do 900px kazdy krok to dwie kolumny (numer + tytul nad
   opisem). Od 901px krok przechodzi do jednego poziomego wiersza (numer,
   tytul, opis) - ten sam uklad obowiazuje na tablecie 901-1200px i na
   desktopie od 1201px. Jasne, biale tlo - celowa zmiana rytmu po
   granatowej Sekcji 6.

   Poprawka desktopowa (etap 1): wczesniejszy uklad dwustrefowy (intro po
   lewej na calej wysokosci, rejestr po prawej) zostal odrzucony - krotkie
   intro obok siedmiu krokow tworzylo duza pusta przestrzen pod leadem.
   .registry wraca do bycia pelnoszerokim blokiem POD naglowkiem, nie
   kolumna obok niego. Kroki na desktopie dostaja szersza kolumne tytulu i
   kontrolowana max-width opisu, zeby wykorzystac odzyskana szerokosc bez
   nieczytelnie dlugich linii.

   Poprawka desktopowa (etap 2): posrednia wersja intro jako gornego
   naglowka z eyebrow+H2 po lewej i leadem w osobnej prawej kolumnie
   zostala odrzucona - lead wygladal jak oderwane zdanie bez zwiazku z H2.
   Finalnie .intro to jeden spojny, wyrownany do lewej blok (eyebrow, H2,
   lead bezposrednio pod soba), z kontrolowana szerokoscia (max-width) i
   wiekszym odstepem przed rejestrem.

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

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

.oai-site .oai-total-loss-checklist__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-total-loss-checklist__intro {
	max-width: 640px;
	margin: 0 0 40px;
}

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

.oai-site .oai-total-loss-checklist__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-total-loss-checklist__item {
	display: grid;
	grid-template-columns: minmax(40px, 52px) minmax(0, 1fr);
	column-gap: 16px;
	padding: 20px 0;
}

.oai-site .oai-total-loss-checklist__item:first-child {
	padding-top: 0;
}

.oai-site .oai-total-loss-checklist__item + .oai-total-loss-checklist__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-total-loss-checklist__number {
	grid-column: 1;
	grid-row: 1 / span 2;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-checklist__item-heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-checklist__item-copy {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	max-width: 560px;
	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-total-loss-checklist__closing {
	margin: 32px 0 0;
	padding: 0 0 0 16px;
	max-width: 640px;
	border-left: 3px solid var(--oai-color-cyan);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--oai-color-navy);
}

/* Od 901px: krok przechodzi do jednego poziomego wiersza (numer, tytul,
   opis). Ten sam uklad obowiazuje na tablecie 901-1200px i na desktopie
   od 1201px. */

@media (min-width: 901px) {
	.oai-site .oai-total-loss-checklist__item {
		grid-template-columns: minmax(48px, 64px) minmax(150px, 0.7fr) minmax(0, 1.4fr);
		column-gap: 24px;
		align-items: start;
	}

	.oai-site .oai-total-loss-checklist__number {
		grid-row: 1;
	}

	.oai-site .oai-total-loss-checklist__item-heading {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.oai-site .oai-total-loss-checklist__item-copy {
		grid-column: 3;
		grid-row: 1;
		max-width: 100%;
	}

	.oai-site .oai-total-loss-checklist__closing {
		margin-left: 88px;
	}
}

/* Od 1201px: .intro pozostaje jednym spojnym blokiem (eyebrow, H2, lead
   wyrownane do lewej, bez osobnej kolumny), wylacznie z kontrolowana
   szerokoscia i wiekszym odstepem przed rejestrem. .registry pozostaje
   pelnoszerokim blokiem POD naglowkiem. Kroki dostaja szersza kolumne
   tytulu i kontrolowana max-width opisu. */

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-checklist__intro {
		max-width: 680px;
		margin: 0 0 clamp(40px, 4vw, 56px);
	}

	.oai-site .oai-total-loss-checklist__item {
		grid-template-columns: minmax(48px, 64px) minmax(220px, 280px) minmax(0, 1fr);
	}

	.oai-site .oai-total-loss-checklist__item-copy {
		max-width: 640px;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-total-loss-checklist {
		padding: 40px 16px;
	}

	.oai-site .oai-total-loss-checklist__item {
		grid-template-columns: minmax(36px, 44px) minmax(0, 1fr);
		column-gap: 12px;
	}
}

/* Sekcja 8: "Dokumenty do analizy", finalny kierunek wizualny "Warstwy
   sprawy". Wszystkie selektory izolowane pod
   .oai-site .oai-total-loss-documents, oddzielna przestrzen klas od
   Sekcji 1-7.

   Wczesniejsza koncepcja "Stol kontroli dokumentow" (jeden uporzadkowany
   pas materialow) zostala zastapiona trzema funkcjonalnymi, otwartymi
   grupami (4+3+2 dokumenty) bez kart, ikon i miniaturek - swiadomie inny
   jezyk wizualny niz teczka strony /odmowa-wyplaty-odszkodowania/. Grupy
   rozroznia wylacznie typografia, odstepy i cienka cyjanowa linia nad
   naglowkiem kazdej grupy, bez wlasnych tel i ramek. Tlo calej sekcji
   ponownie wykorzystuje ten sam subtelny, jasny odcien navy co Sekcja 2
   (rgba(1,2,66,0.03)), celowo rozny od bieli Sekcji 7.

   Do 1200px trzy grupy ukladaja sie pionowo w jednej kolumnie. Od 1201px
   "Podstawa wyliczenia" i "Dane samochodu" znajduja sie obok siebie w
   pierwszym rzedzie (dwie kolumny o zblizonej szerokosci), a "Materialy
   uzupelniajace" znajduja sie w drugim rzedzie, wysrodkowane, o szerokosci
   zblizonej do jednej gornej grupy - czterokolumnowa siatka pomocnicza
   przez grid-column.

   Blok uslugi "Analiza Decyzji" ma wlasne, izolowane style CTA (odwrocone
   kolory - biale tlo/granatowy tekst na granatowym pasie), analogicznie do
   zaakceptowanego wzorca finalnego CTA strony /odmowa-wyplaty-odszkodowania/
   (Sekcja 10, punkt 342 PROJECT_STATUS.md), ale bez powielania calego
   bloku - to blok informacyjny w srodku strony, nie finalne CTA.

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

.oai-site .oai-total-loss-documents {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 20px;
	background-color: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-total-loss-documents__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
}

.oai-site .oai-total-loss-documents__intro {
	max-width: 680px;
	margin: 0 0 40px;
}

.oai-site .oai-total-loss-documents__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-total-loss-documents__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-total-loss-documents__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;
}

/* Trzy grupy dokumentow */

.oai-site .oai-total-loss-documents__layers {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin: 0 0 40px;
}

.oai-site .oai-total-loss-documents__group {
	min-width: 0;
}

.oai-site .oai-total-loss-documents__group-heading {
	margin: 0 0 12px;
	padding-top: 16px;
	border-top: 2px solid var(--oai-color-cyan);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-documents__group-copy {
	margin: 0 0 16px;
	max-width: 560px;
	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-total-loss-documents__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.oai-site .oai-total-loss-documents__item {
	padding: 12px 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-documents__item + .oai-total-loss-documents__item {
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-total-loss-documents__note {
	margin: 0 0 40px;
	padding: 0 0 0 16px;
	max-width: 640px;
	border-left: 3px solid var(--oai-color-cyan);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
}

/* Blok uslugi "Analiza Decyzji" */

.oai-site .oai-total-loss-documents__service {
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	padding: 32px 24px;
	border-radius: var(--oai-radius-l);
	background-color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-documents__service-eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-total-loss-documents__service-heading {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-documents__service-copy {
	margin: 0;
	max-width: 480px;
	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-total-loss-documents__service-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.oai-site .oai-total-loss-documents__service-cta {
	width: 100%;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 14px 28px;
	border-radius: 8px;
	background-color: var(--oai-color-white);
	color: var(--oai-color-navy);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: box-shadow var(--oai-transition-fast);
}

.oai-site .oai-total-loss-documents__service-cta:hover {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

html[data-oai-input="keyboard"] .oai-site .oai-total-loss-documents__service-cta:focus-visible {
	box-shadow: 0 0 0 2px var(--oai-color-cyan);
}

.oai-site .oai-total-loss-documents__service-secondary {
	max-width: 100%;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-documents__service-secondary:hover {
	text-decoration-color: var(--oai-color-cyan);
}

/* Tablet od 768px: wieksza typografia, uklad wciaz jednokolumnowy
   (asymetryczna siatka i poziomy blok uslugi zaczynaja sie od 1201px) */

@media (min-width: 768px) {
	.oai-site .oai-total-loss-documents {
		padding: 64px 40px;
	}

	.oai-site .oai-total-loss-documents__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-documents__lead {
		font-size: 1.0625rem;
	}

	.oai-site .oai-total-loss-documents__group-copy {
		font-size: 1rem;
	}

	.oai-site .oai-total-loss-documents__item {
		font-size: 1rem;
	}

	.oai-site .oai-total-loss-documents__service {
		padding: 40px;
	}

	.oai-site .oai-total-loss-documents__service-cta {
		width: auto;
		min-width: 260px;
	}
}

/* Od 1201px: dwie gorne grupy obok siebie, trzecia wysrodkowana w drugim
   rzedzie, poziomy blok uslugi */

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-documents__heading {
		font-size: 2rem;
	}

	.oai-site .oai-total-loss-documents__layers {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: clamp(48px, 6vw, 96px);
		row-gap: clamp(48px, 5vw, 72px);
	}

	.oai-site .oai-total-loss-documents__group--foundation {
		grid-column: 1 / 3;
	}

	.oai-site .oai-total-loss-documents__group--vehicle {
		grid-column: 3 / 5;
	}

	.oai-site .oai-total-loss-documents__group--supporting {
		grid-column: 2 / 4;
	}

	.oai-site .oai-total-loss-documents__service {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		padding: 40px 48px;
	}

	.oai-site .oai-total-loss-documents__service-content {
		flex: 1 1 auto;
		min-width: 0;
	}

	.oai-site .oai-total-loss-documents__service-actions {
		flex: 0 0 auto;
	}
}

@media (max-width: 360px) {
	.oai-site .oai-total-loss-documents {
		padding: 40px 16px;
	}

	.oai-site .oai-total-loss-documents__service {
		padding: 24px 20px;
	}
}

/* Sekcja 9: najczestsze pytania. Nie jest to nowy komponent FAQ - to
   dokladny, zaakceptowany wzorzec uzywany na stronach /odmowa-wyplaty-odszkodowania/
   (.oai-denial-faq*) i /zanizone-odszkodowanie/ (.oai-underpayment-faq*),
   ktory sam odwzorowuje pierwotny mechanizm .oai-service-faq / .oai-faq.
   Wartosci przeniesione jeden do jednego do nowej, izolowanej przestrzeni
   klas .oai-total-loss-faq, poniewaz page-denial.css i page-underpayment.css
   sa ladowane wylacznie na tamtych stronach. Zrodlowe komponenty 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-total-loss-faq {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background: var(--oai-color-white);
}

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

.oai-site .oai-total-loss-faq__intro {
	min-width: 0;
	max-width: 100%;
}

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

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

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

.oai-site .oai-total-loss-faq__question:focus-visible {
	outline: none;
}

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

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

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

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

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

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

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

	.oai-site .oai-total-loss-faq__answer {
		padding-right: 0;
	}
}

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

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

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

/* Sekcja 10: koncowe CTA, finalny kierunek "Pelnoszerokosciowe granatowe
   domkniecie" - ten sam ogolny jezyk co zaakceptowane koncowe CTA strony
   /odmowa-wyplaty-odszkodowania/ (.oai-denial-final-cta, punkt 342
   PROJECT_STATUS.md): plaskie, pelnoszerokosciowe granatowe tlo, jeden
   wysrodkowany blok bez karty, bez podzialu na kolumny, ten sam rytm
   paddingu 64/80px i skala H2 (1.5/1.75/2rem) dopasowana do wlasnego rytmu
   tej strony. Sekcja 8 ("Analiza Decyzji") uzywa bialego CTA na granatowym
   tle, dlatego to CTA celowo uzywa odwrotnego zestawienia - cyjanowe tlo,
   granatowy tekst - zeby obie sekcje wyraznie sie od siebie roznily mimo
   wspolnego granatowego jezyka strony. Tlo Sekcji 10 i stopki to ten sam
   odcien granatu (var(--oai-color-navy)), dlatego dodano pojedyncza,
   subtelna cyjanowa linie na dole sekcji jako spokojny separator zamiast
   duzej dekoracji. Focus-visible dziedziczony z globalnej reguly
   `a:focus-visible` w main.css. */

.oai-site .oai-total-loss-final-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
	background-color: var(--oai-color-navy);
	border-bottom: 1px solid rgba(33, 225, 253, 0.25);
}

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

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

.oai-site .oai-total-loss-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-total-loss-final-cta__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-total-loss-final-cta__lead {
	margin: 0 0 24px;
	max-width: 100%;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-total-loss-final-cta__button {
	background-color: var(--oai-color-cyan);
	color: var(--oai-color-navy);
}

.oai-site .oai-total-loss-final-cta__button:hover {
	box-shadow: 0 0 0 2px var(--oai-color-white);
}

.oai-site .oai-total-loss-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-total-loss-final-cta {
		padding: 80px 32px;
	}

	.oai-site .oai-total-loss-final-cta__heading {
		font-size: 1.75rem;
	}

	.oai-site .oai-total-loss-final-cta__lead {
		font-size: 1.0625rem;
	}
}

@media (min-width: 1201px) {
	.oai-site .oai-total-loss-final-cta__heading {
		font-size: 2rem;
	}
}

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

	.oai-site .oai-total-loss-final-cta__button {
		width: 100%;
	}
}

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

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