/* Podstrona „Przykłady dokumentów" — Etap 2: finalne hero i nawigacja kotwicowa.
   Renderowane przez page-przyklady-dokumentow.php, ładowane wyłącznie przez
   odwolai_v2_is_document_examples_page(). Wszystkie selektory izolowane przez
   .oai-site .oai-doc-examples, zgodnie z konwencją stosowaną we wszystkich
   pozostałych sekcjach motywu — brak wycieku stylów na inne podstrony.

   Kierunek wizualny celowo unika układu trzech kart (jak na stronie głównej czy
   w sekcjach produktowych): notatka (aside) to otwarty blok z pojedynczą pionową
   linią cyjanową, bez ramki i cienia; indeks trzech dokumentów to redakcyjna lista
   rozdzielona cienkimi liniami, nie zestaw kart. Sekcje z przykładami dokumentów,
   porównaniem, anonimizacją i końcowym CTA zostaną dodane w kolejnych, osobnych
   etapach implementacji — ten plik zawiera wyłącznie hero i nawigację kotwicową. */

.oai-site .oai-doc-examples {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 64px 32px;
}

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

.oai-site .oai-doc-examples__hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.oai-site .oai-doc-examples__content {
	min-width: 0;
}

.oai-site .oai-doc-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-doc-examples__title {
	margin: 0 0 20px;
	max-width: 100%;
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-doc-examples__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-doc-examples__note {
	min-width: 0;
	border-left: 2px solid var(--oai-color-cyan);
	padding: 2px 0 2px 20px;
}

.oai-site .oai-doc-examples__note-text {
	margin: 0;
	max-width: 420px;
	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-doc-examples__index {
	margin-top: 48px;
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--oai-color-border);
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-doc-examples__index-link {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	grid-template-areas:
		"name arrow"
		"desc arrow";
	align-items: center;
	column-gap: 16px;
	row-gap: 4px;
	min-height: 44px;
	padding: 18px 4px;
	box-sizing: border-box;
	text-decoration: none;
	border-top: 1px solid var(--oai-color-border);
	transition: background var(--oai-transition-fast);
}

.oai-site .oai-doc-examples__index-link:first-child {
	border-top: none;
}

.oai-site .oai-doc-examples__index-link:hover {
	background: rgba(1, 2, 66, 0.03);
}

.oai-site .oai-doc-examples__index-link:hover .oai-doc-examples__index-arrow {
	transform: translateX(3px);
}

.oai-site .oai-doc-examples__index-name {
	grid-area: name;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-doc-examples__index-description {
	grid-area: desc;
	font-size: 0.9375rem;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-doc-examples__index-arrow {
	grid-area: arrow;
	color: var(--oai-color-cyan);
	font-size: 1.125rem;
	line-height: 1;
	transition: transform var(--oai-transition-fast);
}

/* Od 768px: indeks trzech dokumentów przechodzi z listy pionowej na jeden rząd
   trzech równych kolumn, rozdzielonych cienkimi pionowymi liniami zamiast
   poziomych. Szerokość dostępna w tym zakresie mieści nazwę i opis każdego
   dokumentu bez ścisku. */

@media (min-width: 768px) {
	.oai-site .oai-doc-examples__index {
		flex-direction: row;
	}

	.oai-site .oai-doc-examples__index-link {
		flex: 1 1 0;
		min-width: 0;
		border-top: none;
		border-left: 1px solid var(--oai-color-border);
		padding: 22px 24px;
	}

	.oai-site .oai-doc-examples__index-link:first-child {
		border-left: none;
	}
}

/* Od 1024px: hero-grid przechodzi na asymetryczny układ dwukolumnowy — treść
   zajmuje około 65% szerokości, notatka około 35%. Notatka wyrównana do dolnej
   krawędzi kolumny treści (align-items: end), nie do góry, żeby wizualnie
   kotwiczyć się przy leadzie, a nie przy eyebrow. */

@media (min-width: 1024px) {
	.oai-site .oai-doc-examples__hero-grid {
		grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
		gap: 64px;
		align-items: end;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-doc-examples {
		padding: 48px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px), lżejszy H1. */

@media (max-width: 480px) {
	.oai-site .oai-doc-examples {
		padding: 40px 18px;
	}

	.oai-site .oai-doc-examples__title {
		font-size: 1.625rem;
		line-height: 1.15;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-doc-examples {
		padding: 36px 16px;
	}
}

/* Sekcja Etap 3 — „Jak wygląda Analiza Decyzji?" (#oai-example-analysis), cel istniejącej
   kotwicy z indeksu hero. Rodzeństwo .oai-doc-examples, nie jego potomek — osobna
   przestrzeń nazw .oai-document-example__*, żeby jasno odróżnić się od stylów hero.
   Tło sekcji to lokalna, jasna chłodna wartość koloru użyta wyłącznie w tym selektorze
   (motyw nie ma gotowej zmiennej na tło alternatywne) — celowo nie tworzymy z tego
   nowej globalnej custom property. Lista streszczenia to otwarta redakcyjna lista
   (cienkie poziome separatory, krótki cyjanowy akcent pod nagłówkiem), nie zestaw
   kafelków. Podgląd dokumentu ma tylko cienką neutralną obwódkę i bardzo subtelny
   cień oddzielający biały dokument od tła sekcji — bez imitowania okna przeglądarki.
   scroll-margin-top dobrany do rzeczywistych zmiennych i breakpointu sticky headera
   z main.css (--oai-header-height-mobile do max-width:1200px, --oai-header-height-desktop
   od 1201px), więc kotwica nigdy nie chowa się pod headerem. */

.oai-site .oai-document-example {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 32px;
	background-color: #F5F8FC;
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

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

.oai-site .oai-document-example__header {
	max-width: 720px;
	margin: 0 0 40px;
}

.oai-site .oai-document-example__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-document-example__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.0625rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-document-example__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-document-example__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.oai-site .oai-document-example__summary {
	min-width: 0;
}

.oai-site .oai-document-example__summary-title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
}

.oai-site .oai-document-example__summary-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-document-example__summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
}

.oai-site .oai-document-example__summary-item {
	padding: 14px 0;
	border-top: 1px solid var(--oai-color-border);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-example__summary-item:first-child {
	border-top: none;
	padding-top: 0;
}

.oai-site .oai-document-example__figure {
	margin: 0;
	min-width: 0;
}

.oai-site .oai-document-example__preview {
	box-sizing: border-box;
	padding: 10px;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
}

.oai-site .oai-document-example__image {
	display: block;
	width: 100%;
	height: auto;
}

.oai-site .oai-document-example__caption {
	margin: 16px 0 0;
}

.oai-site .oai-document-example__caption-main {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-example__caption-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

/* Od 768px do 1023px (tablet): lista streszczenia może przejść na dwie kolumny, bo
   krótkie pozycje mieszczą się bez ścisku. */

@media (min-width: 768px) and (max-width: 1023px) {
	.oai-site .oai-document-example__summary-list {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	.oai-site .oai-document-example__summary-item:nth-child(2) {
		border-top: none;
		padding-top: 0;
	}
}

/* Od 1024px: layout przechodzi na asymetryczny grid — lista około 28%, podgląd
   dokumentu około 72%. Lista wraca do jednej kolumny, bo trafia do wąskiej kolumny
   bocznej. */

@media (min-width: 1024px) {
	.oai-site .oai-document-example__layout {
		grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);
		gap: 56px;
		align-items: start;
	}

	.oai-site .oai-document-example__summary-list {
		grid-template-columns: 1fr;
	}

	.oai-site .oai-document-example__summary-item:nth-child(2) {
		border-top: 1px solid var(--oai-color-border);
		padding-top: 14px;
	}
}

/* Od 1201px: sticky header ma pełną wysokość desktopową (--oai-header-height-desktop),
   dokładnie zgodnie z breakpointem @media (max-width: 1200px) w main.css. */

@media (min-width: 1201px) {
	.oai-site .oai-document-example {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-document-example {
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px). */

@media (max-width: 480px) {
	.oai-site .oai-document-example {
		padding: 36px 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-document-example {
		padding: 32px 16px;
	}
}

/* Sekcja Etap 4 — „Jak wygląda Gotowe Odwołanie od decyzji ubezpieczyciela?"
   (#oai-example-appeal), cel istniejącej kotwicy z indeksu hero. Rodzeństwo
   .oai-doc-examples i .oai-document-example, nie ich potomek — osobna przestrzeń
   nazw .oai-document-appeal__*. Celowo ciemne granatowe tło (var(--oai-color-navy)),
   żeby wyraźnie odróżnić się od jasnej sekcji Analizy Decyzji. Jasne, przygaszone
   kolory tekstu na tym tle to lokalne wartości rgba() użyte wyłącznie w tej sekcji
   (motyw nie ma gotowej zmiennej na tekst jasny na ciemnym tle) — celowo nie
   tworzymy z tego nowej globalnej custom property. Kolejność w DOM (figure przed
   aside) odpowiada wymaganej kolejności czytania na mobile/tablecie i jednocześnie
   naturalnie układa dokument po lewej, a panel objaśnień po prawej na desktopie,
   bez potrzeby order/grid-column. Sprawdzono brak overflow na jakimkolwiek
   przodku (.oai-site, .oai-doc-examples, .oai-document-example) — position: sticky
   na panelu objaśnień jest bezpieczne. scroll-margin-top dobrany do rzeczywistych
   zmiennych i breakpointu sticky headera z main.css, tak jak w sekcji Analizy
   Decyzji. */

.oai-site .oai-document-appeal {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 32px;
	background-color: var(--oai-color-navy);
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

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

.oai-site .oai-document-appeal__header {
	max-width: 720px;
	margin: 0 0 40px;
}

.oai-site .oai-document-appeal__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-document-appeal__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.0625rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-document-appeal__lead {
	margin: 0;
	max-width: 640px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-document-appeal__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.oai-site .oai-document-appeal__figure {
	margin: 0;
	min-width: 0;
}

.oai-site .oai-document-appeal__pages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.oai-site .oai-document-appeal__page {
	min-width: 0;
}

.oai-site .oai-document-appeal__page-label {
	max-width: 460px;
	margin: 0 auto 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-document-appeal__preview {
	box-sizing: border-box;
	max-width: 460px;
	margin: 0 auto;
	padding: 10px;
	background: var(--oai-color-white);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--oai-radius-m);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.oai-site .oai-document-appeal__image {
	display: block;
	width: 100%;
	height: auto;
}

.oai-site .oai-document-appeal__caption {
	max-width: 460px;
	margin: 16px auto 0;
}

.oai-site .oai-document-appeal__caption-main {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-appeal__caption-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-appeal__guide {
	min-width: 0;
}

.oai-site .oai-document-appeal__guide-title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-white);
}

.oai-site .oai-document-appeal__guide-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-document-appeal__details {
	margin: 0;
}

.oai-site .oai-document-appeal__detail {
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.oai-site .oai-document-appeal__detail:first-child {
	border-top: none;
	padding-top: 0;
}

.oai-site .oai-document-appeal__term {
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-appeal__description {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
}

/* Od 1024px: layout przechodzi na asymetryczny grid — dokument około 60%, panel
   objaśnień około 40%. Dokument jest pierwszy w DOM, więc trafia naturalnie do
   lewej kolumny, panel do prawej — bez order ani grid-column. Na węższej pełnej
   szerokości (mobile/tablet) strony i etykiety są wyśrodkowane (margin: 0 auto);
   od 1024px kolumna dokumentu jest już węższa niż pełna szerokość kontenera,
   więc wyrównujemy je do lewej krawędzi kolumny zamiast centrować. */

@media (min-width: 1024px) {
	.oai-site .oai-document-appeal__layout {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		gap: 56px;
		align-items: start;
	}

	.oai-site .oai-document-appeal__page-label,
	.oai-site .oai-document-appeal__preview,
	.oai-site .oai-document-appeal__caption {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Od 1201px: sticky header ma pełną wysokość desktopową, dokładnie zgodnie
   z breakpointem @media (max-width: 1200px) w main.css. Panel objaśnień
   dostaje position: sticky wyłącznie na tym szerokim desktopie — nie na
   tablecie ani mobile. Zweryfikowano brak overflow na przodkach (.oai-site,
   .oai-doc-examples, .oai-document-example), więc sticky działa bezpiecznie
   bez zmiany overflow żadnego rodzica. */

@media (min-width: 1201px) {
	.oai-site .oai-document-appeal {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}

	.oai-site .oai-document-appeal__guide {
		position: sticky;
		top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-document-appeal {
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px). */

@media (max-width: 480px) {
	.oai-site .oai-document-appeal {
		padding: 36px 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-document-appeal {
		padding: 32px 16px;
	}
}

/* Sekcja Etap 5B — „Jak wygląda Wezwanie do Zapłaty?" (#oai-example-demand), cel
   istniejącej kotwicy z indeksu hero. Rodzeństwo .oai-doc-examples,
   .oai-document-example i .oai-document-appeal — osobna przestrzeń nazw
   .oai-document-demand__*. Celowo jasne, neutralne (nie chłodne niebieskawe jak
   w Analizie Decyzji) tło sekcji, żeby uniknąć wizualnego zlania obu jasnych
   sekcji — lokalna wartość koloru użyta wyłącznie w tym selektorze, bez nowej
   globalnej custom property. Brak wspólnego wrappera „__layout": figure (obie
   strony dokumentu obok siebie na desktopie) i aside (pełnoszerokościowy
   granatowy pas objaśnień) są bezpośrednimi, pionowo ułożonymi dziećmi
   .__inner — inny układ niż w Analizie Decyzji (grid dwukolumnowy) i Gotowym
   Odwołaniu (grid z sticky panelem po prawej). Header sekcji wyśrodkowany
   wyłącznie od 1024px. scroll-margin-top dobrany do rzeczywistych zmiennych
   i breakpointu sticky headera z main.css, tak jak w poprzednich sekcjach. */

.oai-site .oai-document-demand {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 32px;
	background-color: #F6F5F2;
	scroll-margin-top: calc(var(--oai-header-height-mobile) + 24px);
}

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

.oai-site .oai-document-demand__header {
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-document-demand__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-document-demand__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.0625rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-document-demand__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-document-demand__figure {
	margin: 0 0 48px;
	min-width: 0;
}

.oai-site .oai-document-demand__pages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.oai-site .oai-document-demand__page {
	min-width: 0;
}

.oai-site .oai-document-demand__page-label {
	max-width: 460px;
	margin: 0 auto 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-document-demand__preview {
	box-sizing: border-box;
	max-width: 460px;
	margin: 0 auto;
	padding: 10px;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.08);
}

.oai-site .oai-document-demand__image {
	display: block;
	width: 100%;
	height: auto;
}

.oai-site .oai-document-demand__caption {
	max-width: 640px;
	margin: 24px auto 0;
}

.oai-site .oai-document-demand__caption-main {
	margin: 0 0 6px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-demand__caption-note {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-demand__guide {
	box-sizing: border-box;
	width: 100%;
	padding: 40px 32px;
	background: var(--oai-color-navy);
	border-radius: var(--oai-radius-l);
}

.oai-site .oai-document-demand__guide-title {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-white);
}

.oai-site .oai-document-demand__guide-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--oai-color-cyan);
}

.oai-site .oai-document-demand__details {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
}

.oai-site .oai-document-demand__detail {
	padding: 16px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.oai-site .oai-document-demand__detail:first-child {
	border-top: none;
	padding-top: 0;
}

.oai-site .oai-document-demand__term {
	margin: 0 0 6px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-demand__description {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	overflow-wrap: normal;
	word-break: normal;
}

/* Od 768px do 1023px (tablet): panel objaśnień może przejść na dwie kolumny, bo
   krótkie terminy i opisy mieszczą się bez ścisku. */

@media (min-width: 768px) and (max-width: 1023px) {
	.oai-site .oai-document-demand__details {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	.oai-site .oai-document-demand__detail:nth-child(2) {
		border-top: none;
		padding-top: 0;
	}
}

/* Od 1024px: obie strony dokumentu obok siebie w dwóch równych kolumnach; header
   sekcji wyśrodkowany; panel objaśnień przechodzi na cztery kolumny rozdzielone
   pionowymi liniami zamiast poziomych. */

@media (min-width: 1024px) {
	.oai-site .oai-document-demand__header {
		margin: 0 auto 48px;
		text-align: center;
	}

	.oai-site .oai-document-demand__pages {
		grid-template-columns: 1fr 1fr;
		gap: 48px;
	}

	.oai-site .oai-document-demand__page-label,
	.oai-site .oai-document-demand__preview {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.oai-site .oai-document-demand__caption {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.oai-site .oai-document-demand__details {
		grid-template-columns: repeat(4, 1fr);
		column-gap: 32px;
	}

	.oai-site .oai-document-demand__detail {
		border-top: none;
		padding: 0 0 0 24px;
		border-left: 1px solid rgba(255, 255, 255, 0.14);
	}

	.oai-site .oai-document-demand__detail:first-child {
		padding-left: 0;
		border-left: none;
	}
}

/* Od 1201px: sticky header ma pełną wysokość desktopową, dokładnie zgodnie
   z breakpointem @media (max-width: 1200px) w main.css. Panel objaśnień w tej
   sekcji celowo NIE jest sticky na żadnej szerokości. */

@media (min-width: 1201px) {
	.oai-site .oai-document-demand {
		scroll-margin-top: calc(var(--oai-header-height-desktop) + 24px);
	}
}

/* Mobile do 600px: mniejszy padding sekcji i panelu. */

@media (max-width: 600px) {
	.oai-site .oai-document-demand {
		padding: 40px 24px;
	}

	.oai-site .oai-document-demand__guide {
		padding: 32px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px). */

@media (max-width: 480px) {
	.oai-site .oai-document-demand {
		padding: 36px 18px;
	}

	.oai-site .oai-document-demand__guide {
		padding: 28px 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-document-demand {
		padding: 32px 16px;
	}

	.oai-site .oai-document-demand__guide {
		padding: 24px 16px;
	}
}

/* Sekcja Etap 6 — porównanie trzech dokumentów (#oai-document-comparison). Rodzeństwo
   hero, Analizy Decyzji, Gotowego Odwołania i Wezwania do Zapłaty — osobna przestrzeń
   nazw .oai-document-comparison__*. Celowo biała sekcja z górną linią oddzielającą ją
   od jasnego, ale neutralnego tła Wezwania do Zapłaty (żeby uniknąć zlania dwóch jasnych
   sekcji pod rząd). Jedna redakcyjna macierz porównawcza (tabela), nie trzy karty —
   inny mechanizm niż istniejący blok wyboru usługi „Analiza, Odwołanie czy Wezwanie?"
   (.oai-appeal-service-choice__*, osobny plik, osobna przestrzeń nazw, nietknięty).
   Responsywna tabela bez poziomego przewijania: na mobile/tablecie (<1024px) wiersze
   stają się blokowymi grupami z etykietą dokumentu pokazaną przez CSS content:
   attr(data-label), thead jest wizualnie ukryty tą samą techniką co .oai-sr-only
   (bez display:none), ale pozostaje dostępny semantycznie. Od 1024px tabela wraca
   do naturalnego układu table/thead/tbody. */

.oai-site .oai-document-comparison {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 32px;
	background-color: var(--oai-color-white);
	border-top: 1px solid var(--oai-color-border);
}

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

.oai-site .oai-document-comparison__header {
	max-width: 640px;
	margin: 0 0 40px;
}

.oai-site .oai-document-comparison__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-document-comparison__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.0625rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-document-comparison__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-document-comparison__table-wrap {
	width: 100%;
	min-width: 0;
}

.oai-site .oai-document-comparison__table {
	width: 100%;
	border-collapse: collapse;
}

.oai-site .oai-document-comparison__caption {
	text-align: left;
}

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

.oai-site .oai-document-comparison__table tbody,
.oai-site .oai-document-comparison__table tr,
.oai-site .oai-document-comparison__table th,
.oai-site .oai-document-comparison__table td {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.oai-site .oai-document-comparison__table tr {
	padding: 20px 0;
	border-top: 1px solid var(--oai-color-border);
}

.oai-site .oai-document-comparison__table tr:first-child {
	border-top: none;
	padding-top: 0;
}

.oai-site .oai-document-comparison__table th[scope="row"] {
	margin: 0 0 12px;
	padding: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--oai-color-navy);
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-comparison__table td {
	margin: 0 0 16px;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-comparison__table td:last-child {
	margin-bottom: 0;
}

.oai-site .oai-document-comparison__table td::before {
	content: attr(data-label);
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-document-comparison__note {
	margin: 40px 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;
}

/* Od 768px do 1023px (tablet): wiersz staje się siatką trzech kolumn dla wartości
   dokumentów, kryterium pozostaje pełnoszerokościowym nagłówkiem nad nimi — bez
   ściskania czterech kolumn tabeli i bez poziomego przewijania. */

@media (min-width: 768px) and (max-width: 1023px) {
	.oai-site .oai-document-comparison__table tr {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 24px;
		row-gap: 0;
	}

	.oai-site .oai-document-comparison__table th[scope="row"] {
		grid-column: 1 / -1;
	}

	.oai-site .oai-document-comparison__table td {
		margin-bottom: 0;
	}
}

/* Od 1024px: tabela wraca do naturalnego układu, thead staje się widoczny z granatowym
   tłem, pierwsza kolumna (kryteria) ma szerokość około 20%, pozostałe trzy kolumny
   dzielą resztę po równo. Delikatne pionowe separatory między kolumnami, bardzo
   subtelne naprzemienne tło wierszy. Etykiety data-label znikają, bo nagłówek tabeli
   jest już widoczny. */

@media (min-width: 1024px) {
	.oai-site .oai-document-comparison__table {
		display: table;
	}

	.oai-site .oai-document-comparison__table thead {
		position: static;
		display: table-header-group;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		border: 0;
	}

	.oai-site .oai-document-comparison__table tbody {
		display: table-row-group;
	}

	.oai-site .oai-document-comparison__table tr {
		display: table-row;
		padding: 0;
	}

	.oai-site .oai-document-comparison__table th,
	.oai-site .oai-document-comparison__table td {
		display: table-cell;
		width: auto;
	}

	.oai-site .oai-document-comparison__table thead th {
		background: var(--oai-color-navy);
		color: var(--oai-color-white);
		padding: 16px 20px;
		font-size: 0.8125rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-align: left;
	}

	.oai-site .oai-document-comparison__table tbody tr {
		border-top: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-document-comparison__table tbody tr:first-child {
		border-top: none;
	}

	.oai-site .oai-document-comparison__table tbody tr:nth-child(even) {
		background: rgba(1, 2, 66, 0.02);
	}

	.oai-site .oai-document-comparison__table th[scope="row"],
	.oai-site .oai-document-comparison__table tbody td {
		padding: 18px 20px;
		margin: 0;
		vertical-align: top;
	}

	.oai-site .oai-document-comparison__table th[scope="row"] {
		width: 20%;
		font-size: 0.9375rem;
		border-right: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-document-comparison__table tbody td {
		width: 26.66%;
	}

	.oai-site .oai-document-comparison__table tbody td + td {
		border-left: 1px solid var(--oai-color-border);
	}

	.oai-site .oai-document-comparison__table td::before {
		display: none;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-document-comparison {
		padding: 40px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px). */

@media (max-width: 480px) {
	.oai-site .oai-document-comparison {
		padding: 36px 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-document-comparison {
		padding: 32px 16px;
	}
}

/* Sekcja Etap 7 — wyjaśnienie anonimizacji (#oai-document-anonymization). Rodzeństwo
   hero, trzech sekcji dokumentów i porównania — osobna przestrzeń nazw
   .oai-document-anonymization__*. Jeden asymetryczny blok podzielony na dwie części
   (nie kolejny zestaw kart, nie tabela, nie granatowy panel identyczny z Gotowym
   Odwołaniem/Wezwaniem do Zapłaty): granatowy header jako lewa kolumna, biała treść
   jako prawa kolumna, każda kolumna to pełnowymiarowy blok koloru wynikający wprost
   z komórki CSS Grid — bez wymuszania identycznej wysokości sztywną wartością
   (naturalny grid stretch dopasowuje się do wyższej treści). Wewnątrz prawej kolumny
   .data i .client (aside) są otwartymi częściami rozdzielonymi cienką linią, nie
   osobnymi kartami. Informacja końcowa (.note) jest poza gridem, na pełną szerokość,
   z delikatnie zmienionym tłem — prosty pas informacyjny, nie CTA. */

.oai-site .oai-document-anonymization {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 56px 32px;
}

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

.oai-site .oai-document-anonymization__grid {
	display: grid;
	grid-template-columns: 1fr;
}

.oai-site .oai-document-anonymization__header {
	box-sizing: border-box;
	padding: 40px 32px;
	background: var(--oai-color-navy);
	border-radius: var(--oai-radius-l) var(--oai-radius-l) 0 0;
}

.oai-site .oai-document-anonymization__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-document-anonymization__title {
	margin: 0 0 16px;
	max-width: 100%;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.0625rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-white);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

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

.oai-site .oai-document-anonymization__content {
	box-sizing: border-box;
	padding: 40px 32px;
	background: var(--oai-color-white);
	border-radius: 0 0 var(--oai-radius-l) var(--oai-radius-l);
}

.oai-site .oai-document-anonymization__data {
	padding-bottom: 32px;
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-document-anonymization__client {
	padding-top: 32px;
}

.oai-site .oai-document-anonymization__subtitle {
	margin: 0 0 12px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--oai-color-navy);
}

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

.oai-site .oai-document-anonymization__list {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.oai-site .oai-document-anonymization__item {
	padding: 12px 0;
	border-top: 1px solid var(--oai-color-border);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

.oai-site .oai-document-anonymization__item:first-child {
	border-top: none;
	padding-top: 0;
}

.oai-site .oai-document-anonymization__note {
	margin: 32px 0 0;
	padding: 20px 24px;
	background: rgba(1, 2, 66, 0.04);
	border-radius: var(--oai-radius-m);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

/* Od 1024px: grid przechodzi na dwie asymetryczne kolumny — header (granat) około
   36%, content (białe) około 64%. Obie kolumny naturalnie dopasowują wysokość do
   dłuższej treści dzięki domyślnemu align-items: stretch grida. */

@media (min-width: 1024px) {
	.oai-site .oai-document-anonymization__grid {
		grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
	}

	.oai-site .oai-document-anonymization__header {
		padding: 56px 48px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: var(--oai-radius-l) 0 0 var(--oai-radius-l);
	}

	.oai-site .oai-document-anonymization__content {
		padding: 56px;
		border-radius: 0 var(--oai-radius-l) var(--oai-radius-l) 0;
	}

	.oai-site .oai-document-anonymization__lead {
		max-width: 360px;
	}

	.oai-site .oai-document-anonymization__text {
		max-width: 640px;
	}
}

/* Mobile do 600px: mniejszy padding sekcji i wewnętrznych bloków. */

@media (max-width: 600px) {
	.oai-site .oai-document-anonymization {
		padding: 40px 24px;
	}

	.oai-site .oai-document-anonymization__header,
	.oai-site .oai-document-anonymization__content {
		padding: 32px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px). */

@media (max-width: 480px) {
	.oai-site .oai-document-anonymization {
		padding: 36px 18px;
	}

	.oai-site .oai-document-anonymization__header,
	.oai-site .oai-document-anonymization__content {
		padding: 28px 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-document-anonymization {
		padding: 32px 16px;
	}

	.oai-site .oai-document-anonymization__header,
	.oai-site .oai-document-anonymization__content {
		padding: 24px 16px;
	}
}

/* Sekcja Etap 8 — końcowe CTA podstrony (#oai-document-examples-cta). Ostatnie
   rodzeństwo hero i wszystkich sześciu wcześniejszych sekcji — osobna przestrzeń
   nazw .oai-document-examples-cta__*. Prosty, pełnoszerokościowy pas (nie karta,
   nie ciemny granatowy blok znany z CTA produktowych i strony głównej) — bardzo
   jasne, neutralno-cyjanowe tło z cienkimi liniami u góry i u dołu, bez cienia,
   bez border-radius sugerującego zamknięty panel. Przycisk ponownie wykorzystuje
   istniejące, bezpieczne klasy .oai-cta i .oai-cta--primary z main.css (navy tło,
   biały tekst, min-height 48px, gotowy hover i focus-visible przez istniejący
   mechanizm html[data-oai-input="keyboard"]) — bez modyfikacji tych klas ani ich
   globalnych reguł. Link prowadzi przez home_url('/#oai-services-comparison') do
   potwierdzonej, rzeczywistej sekcji porównania usług na stronie głównej. */

.oai-site .oai-document-examples-cta {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 48px 32px;
	background-color: #EEFAFB;
	border-top: 1px solid var(--oai-color-border);
	border-bottom: 1px solid var(--oai-color-border);
}

.oai-site .oai-document-examples-cta__inner {
	width: 100%;
	max-width: var(--oai-container-width);
	min-width: 0;
	box-sizing: border-box;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.oai-site .oai-document-examples-cta__content {
	min-width: 0;
}

.oai-site .oai-document-examples-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-navy);
}

.oai-site .oai-document-examples-cta__title {
	margin: 0 0 12px;
	max-width: 100%;
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--oai-color-navy);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.oai-site .oai-document-examples-cta__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-document-examples-cta__action {
	min-width: 0;
}

.oai-site .oai-document-examples-cta__link {
	width: 100%;
}

.oai-site .oai-document-examples-cta__note {
	margin: 12px 0 0;
	max-width: 100%;
	font-size: 13px;
	line-height: 1.5;
	color: var(--oai-color-navy-muted);
	overflow-wrap: normal;
	word-break: normal;
}

/* Od 1024px: dwie kolumny — treść około 68%, akcja około 32%, wyrównana pionowo
   do środka. Przycisk przestaje zajmować pełną szerokość, bo nie jest to już
   potrzebne przy węższej kolumnie akcji obok tekstu. */

@media (min-width: 1024px) {
	.oai-site .oai-document-examples-cta__inner {
		grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
		gap: 48px;
		align-items: center;
	}

	.oai-site .oai-document-examples-cta__link {
		width: auto;
	}
}

/* Mobile do 600px: mniejszy padding sekcji. */

@media (max-width: 600px) {
	.oai-site .oai-document-examples-cta {
		padding: 36px 24px;
	}
}

/* Mobile do 480px: docelowy gutter 18px (pokrywa też 430/390px). */

@media (max-width: 480px) {
	.oai-site .oai-document-examples-cta {
		padding: 32px 18px;
	}
}

/* Mobile do 360px: minimalny gutter 16px (pokrywa też 320px). */

@media (max-width: 360px) {
	.oai-site .oai-document-examples-cta {
		padding: 28px 16px;
	}
}