/* Warstwa zmian z listy klienta (2026-09).
   Osobny plik, żeby cały pakiet dało się wyłączyć jednym enqueue, a nie
   wyławiać z gka.css. Ładowany po nowoczesnosc.css, więc wygrywa remisy
   specyficzności bez !important. */

/* --- hero: cena wywoławcza pod leadem ------------------------------------ */
.hero__price {
	margin: 0.75rem 0 0;
	font-family: var(--font-ui);
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	font-variation-settings: "wght" 600;
	font-variant-numeric: tabular-nums lining-nums;
	color: #fff;
}

/* --- cztery wyróżniki ---------------------------------------------------- */
.usp {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
	border-bottom: 1px solid var(--border);
}
.usp__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.usp__item {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	padding-left: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
	border-left: 1px solid var(--border);
}
.usp__item:first-child {
	padding-left: 0;
	border-left: 0;
}
.usp__k {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	line-height: 1.1;
	font-variation-settings: "wght" 600;
	color: var(--ink);
	text-wrap: balance;
}
.usp__k.num {
	font-variant-numeric: tabular-nums lining-nums;
}
.usp__v {
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--muted);
	text-wrap: pretty;
}

@media (max-width: 899px) {
	.usp__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.5rem; }
	/* Przy dwóch kolumnach kreskę traci nie tylko pierwszy kafelek,
	   ale każdy zaczynający wiersz. */
	.usp__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 479px) {
	.usp__grid { grid-template-columns: 1fr; row-gap: 1.125rem; }
	.usp__item { padding-left: 0; border-left: 0; padding-top: 1.125rem; border-top: 1px solid var(--border); }
	.usp__item:first-child { padding-top: 0; border-top: 0; }
	.usp__k { font-size: 1.375rem; }
}

/* --- kryteria wyboru / usługi zarządzania -------------------------------- */
/* Wcześniej były to komórki obwiedzione kreską — przy sześciu i dziewięciu
   pozycjach układ zostawiał sierotę w ostatnim rzędzie, a całość czytała się
   jak arkusz kalkulacyjny. Kratownica znika; zostaje kreska nad pozycją,
   większa ikona i etykieta w stopniu tekstu ciągłego. Nierówny ostatni rząd
   przestaje być usterką, bo nie ma już pustych ramek. */
.kryteria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 3rem);
	margin: clamp(1.75rem, 1.25rem + 2vw, 3.25rem) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	.kryteria { grid-template-columns: repeat(3, 1fr); }
	/* Dokładnie cztery pozycje układają się 2×2, a nie 3 + sierota. */
	.kryteria:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}

.kryteria__item {
	display: block;
	padding-top: 1.125rem;
	border-top: 1px solid var(--border);
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--ink);
	text-wrap: pretty;
}
.kryteria__item::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2rem;
	margin-bottom: 1rem;
	background: var(--accent-dark);
	-webkit-mask: var(--ikona) left center / contain no-repeat;
	mask: var(--ikona) left center / contain no-repeat;
}
/* Maski zamiast <img>: ikona dziedziczy kolor z tokenu, więc jedna zmiana
   akcentu przemalowuje komplet, a plik nie rośnie o kilkanaście osobnych SVG. */
.kryteria__item[data-ikona="lokalizacja"]  { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.6"/></svg>'); }
.kryteria__item[data-ikona="deweloper"]    { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M3 21h18M5 21V6l7-3 7 3v15"/><path d="M10 21v-5h4v5"/><path d="M9 10h.01M15 10h.01"/></svg>'); }
.kryteria__item[data-ikona="dokumentacja"] { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5M9 13h6M9 17h4"/></svg>'); }
.kryteria__item[data-ikona="najem"]        { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M4 19V9l8-5 8 5v10"/><path d="M4 19h16"/><path d="M9 19v-6h6v6"/></svg>'); }
.kryteria__item[data-ikona="cena"]         { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M4 18 10 12l3.5 3.5L20 8"/><path d="M15 8h5v5"/></svg>'); }
.kryteria__item[data-ikona="standard"]     { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="m12 3 2.6 5.6 6.1.8-4.5 4.2 1.2 6.1L12 16.8 6.6 19.7l1.2-6.1L3.3 9.4l6.1-.8Z"/></svg>'); }
.kryteria__item[data-ikona="klucz"]        { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><circle cx="7.5" cy="14.5" r="4"/><path d="m10.4 11.6 8-8M16.5 5.5l2.5 2.5M14.5 7.5l2.5 2.5"/></svg>'); }
.kryteria__item[data-ikona="wnetrze"]      { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M3 13v-2a2 2 0 0 1 2-2h1V7a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h1a2 2 0 0 1 2 2v2"/><path d="M3 13h18v5H3z"/><path d="M6 18v2M18 18v2"/></svg>'); }
.kryteria__item[data-ikona="aparat"]       { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M3 8h3.5L8 5.5h8L17.5 8H21v11H3Z"/><circle cx="12" cy="13" r="3.4"/></svg>'); }
.kryteria__item[data-ikona="ogloszenie"]   { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M3 15V9h4l7-4v14l-7-4Z"/><path d="M17.5 9.5a3.5 3.5 0 0 1 0 5"/><path d="M6 15v4h3v-4"/></svg>'); }
.kryteria__item[data-ikona="kalendarz"]    { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><rect x="3" y="5" width="18" height="16" rx="1.5"/><path d="M3 10h18M8 3v4M16 3v4"/><path d="M7.5 14h3v3h-3z"/></svg>'); }
.kryteria__item[data-ikona="rozmowa"]      { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M3 6.5A1.5 1.5 0 0 1 4.5 5h9A1.5 1.5 0 0 1 15 6.5v5A1.5 1.5 0 0 1 13.5 13H8l-5 3.5Z"/><path d="M18 9h1.5A1.5 1.5 0 0 1 21 10.5v5A1.5 1.5 0 0 1 19.5 17H18l-3 2.5V17"/></svg>'); }
.kryteria__item[data-ikona="sprzatanie"]   { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M9 3h5v5H9z"/><path d="M11.5 8v3"/><path d="M7 11h10l1 10H6Z"/><path d="M7.5 15.5h9"/></svg>'); }
.kryteria__item[data-ikona="serwis"]       { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M15.5 3.5a5 5 0 0 0-4.6 6.9L3.5 17.8 6.2 20.5l7.4-7.4a5 5 0 0 0 6.9-4.6 5 5 0 0 0-.4-2l-3.2 3.2-2.6-.5-.5-2.6 3.2-3.2a5 5 0 0 0-1.5-.9Z"/></svg>'); }
.kryteria__item[data-ikona="raport"]       { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5"/><path d="M9 17v-3M12 17v-5M15 17v-2"/></svg>'); }
.kryteria__item[data-ikona="opieka"]       { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M12 21s-7.5-4.4-7.5-10A4.5 4.5 0 0 1 12 7.5 4.5 4.5 0 0 1 19.5 11c0 5.6-7.5 10-7.5 10Z"/></svg>'); }

.kryteria__item[data-ikona="earb"]         { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><path d="M12 3l7 3v5.5c0 4.4-3 8.2-7 9.5-4-1.3-7-5.1-7-9.5V6Z"/><path d="m9 12 2 2 4-4"/></svg>'); }
.kryteria__item[data-ikona="weryfikacja"]  { --ikona: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.6"><circle cx="10.5" cy="10.5" r="6.5"/><path d="m15.5 15.5 4.5 4.5"/><path d="m8 10.5 2 2 3.5-3.5"/></svg>'); }


/* --- proces zakupu: stopka pod krokami --------------------------------- */
.proces__stopka {
	margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	font-size: var(--fs-sm);
	color: var(--muted);
	text-wrap: pretty;
}

/* --- opis dzielnicy na kafelku ------------------------------------------- */
.district__desc {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--fs-sm);
	line-height: 1.45;
	color: var(--muted);
	text-wrap: pretty;
}

/* --- akapity w blokach prozy -------------------------------------------- */
/* Reset kasuje marginesy akapitów, żeby siatka kart się nie rozjeżdżała.
   W ciągłym tekście prawnym brak odstępu skleja argumenty w jedną ścianę,
   więc rytm wraca tutaj — tylko między akapitami, nie przed pierwszym. */
.prose p + p,
.prose ul + p,
.prose p + ul {
	margin-top: 1.15em;
}

/* --- zdanie wyróżnione w historii firmy (G2) ----------------------------- */
/* Kreska z góry i większy stopień zamiast cudzysłowu-grafiki: cytat jest
   własnym zdaniem firmy, a nie przytoczeniem, więc nie udaje wypowiedzi. */
.pullquote {
	max-width: 24ch;
	margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0;
	padding-top: 1.25rem;
	border-top: 2px solid var(--accent);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	line-height: 1.15;
	font-variation-settings: "wght" 600;
	color: var(--ink);
	text-wrap: balance;
}

/* --- śródtytuły w bloku prozy -------------------------------------------- */
.prose h3 {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-variation-settings: "wght" 600;
	color: var(--muted);
}
.prose > h3:first-child {
	margin-top: 0;
}

/* --- opinie (sekcja przygotowana, nieaktywna) ---------------------------- */
.opinie {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}
.opinia {
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}
.opinia__tresc {
	margin: 0;
	font-family: var(--font-doc);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
}
.opinia__kto {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 1rem 0 0;
	font-size: var(--fs-sm);
}
.opinia__imie { font-variation-settings: "wght" 600; }
.opinia__meta { color: var(--muted); }

/* --- Centrum wiedzy: sześć obszarów -------------------------------------- */
.wiedza {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wiedza__kat {
	padding-top: 1.25rem;
	border-top: 2px solid var(--ink);
}
/* Kategoria z ostrzeżeniem dostaje inną kreskę, nie inny kolor tekstu —
   status niesie kształt, nie sama barwa. */
.wiedza__kat--flag { border-top-color: var(--warn-text); }

.wiedza__tytul {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	line-height: 1.15;
}
.wiedza__tytul a { color: var(--ink); text-decoration: none; }
.wiedza__tytul a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.wiedza__opis {
	margin: 0.625rem 0 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--muted);
	text-wrap: pretty;
}
.wiedza__lista {
	margin: 1.125rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}
.wiedza__lista a {
	/* Blok, nie wiersz tekstu: cały pas jest celem dotykowym, a odstęp
	   między pozycjami robi wyściółka, nie margines. Daje to 44 px
	   wysokości bez powiększania kroju. */
	display: block;
	padding: 0.6875rem 0;
	border-bottom: 1px solid var(--border);
	color: var(--accent-dark);
	text-decoration: none;
}
.wiedza__lista li:first-child a { border-top: 1px solid var(--border); }
.wiedza__lista a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- kalkulator: wybór stawki, podpowiedź, wynik miesięczny -------------- */
.calc__info {
	/* Kółko ma 20 px, ale przycisk musi mieć 44 — cel dotykowy WCAG 2.2.
	   Ujemny margines cofa nadmiar, żeby etykieta nie urosła o 24 px.
	   Wcześniejsza próba z pseudoelementem nie działała: audyt mierzy
	   prostokąt samego przycisku, a nie jego dekoracji. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: -0.75rem -0.75rem -0.75rem 0.125rem;
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
	cursor: pointer;
}
.calc__info > span[aria-hidden] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-variation-settings: "wght" 700;
	line-height: 1;
	color: var(--muted);
}
.calc__info:hover > span[aria-hidden] { border-color: var(--ink); color: var(--ink); }
.calc__info[aria-expanded="true"] > span[aria-hidden] {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--bg);
}

.calc__help {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0.875rem 1rem;
	border-left: 2px solid var(--accent);
	background: var(--bg-alt);
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--ink);
	text-wrap: pretty;
}

.calc__row--month dt { color: var(--muted); }
.calc__row--month dd { font-variation-settings: "wght" 600; }

/* --- logotyp klienta ------------------------------------------------------ */
/* Materiał źródłowy to JPEG: złota grafika na czarnym tle, bez kanału alfa
   i bez wersji wektorowej. Czerń odjęto rozmatowaniem addytywnym
   (alfa = max(R,G,B), kolor = piksel / alfa), co odzyskuje oryginalny
   odcień i zeruje tło. Tak odzyskany metalik czyta się na ciemnym podłożu,
   ale na białym blaknie — dlatego nagłówek dostaje wersję jednobarwną,
   a stopka oryginał. */

.logo__lockup {
	display: none;   /* włącza je dopiero @supports poniżej */
	width: calc(var(--logo-h) * 7.91);
	height: var(--logo-h);
	background: currentColor;
	-webkit-mask: var(--logo-maska) left center / contain no-repeat;
	mask: var(--logo-maska) left center / contain no-repeat;
}

@supports ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
	.logo__lockup { display: block; }
	/* Nazwa tekstowa zostaje dla czytników i wyszukiwarek, znika tylko
	   wizualnie — inaczej nagłówek powtarzałby markę dwa razy.
	   Zawężone do wnętrza `.logo`: tej samej klasy używa nagłówek szuflady
	   mobilnej, gdzie nazwa jest jedyną identyfikacją i musi zostać widoczna. */
	.logo .logo__name {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.logo {
	--logo-h: 30px;
	--logo-maska: url("img/logo-maska.webp");
}
.masthead.is-scrolled .logo { --logo-h: 26px; }

@media (max-width: 767px) {
	.logo { --logo-h: 24px; }
	/* Przy 24 px lockup ma 190 px; podpis pod nim zabierałby resztę
	   miejsca na przycisk menu. */
	.logo__sub { display: none; }
}

/* Stopka: logo w kolumnie o szerokości ok. 34ch, więc trzymamy je
   znacznie węższe, żeby nie konkurowało z opisem firmy. */
.footer__logo {
	display: block;
	width: auto;
	max-width: 190px;
	height: auto;
	margin-bottom: var(--s-3);
}

/* Nad zdjęciem w hero nagłówek jest przezroczysty i przechodzi na biel.
   Reguła w naglowek.css wymienia z nazwy `.logo__name` i `.logo__sub`,
   więc lockup zostawał grafitowy na ciemnym tle. Kolor bierze z tła
   elementu, bo maska rysuje właśnie tłem. */
.has-hero .masthead:not(.is-scrolled) .logo__lockup {
	background: oklch(1 0 0 / .92);
}

/* Podpis stykał się z podkreśleniem pod „AFRICA”. */
.logo__lockup { margin-bottom: 0.25rem; }

/* --- przełącznik waluty i języka ----------------------------------------- */
/* Zajmował wcześniej pełnej szerokości pasek nad logotypem. Teraz siedzi
   w pasku nawigacji, gdzie użytkownik szuka takich przełączników,
   i nie kosztuje 34 px wysokości na każdym ekranie. */
.switch {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}
.switch__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44×44 px w obu wymiarach: WCAG 2.2 (2.5.8) liczy cały prostokąt,
	   a nie tylko wysokość. Przy 40 px audyt zgłaszał cztery cele naraz. */
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: none;
	font: inherit;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 140ms var(--ease-out-quart, ease);
}
.switch__opt:hover { opacity: 0.85; }
/* Stan wybrany niesie krycie i kreska, nie sam kolor. */
.switch__opt[aria-pressed="true"],
.switch__opt[aria-current] {
	opacity: 1;
	font-variation-settings: "wght" 700;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 1.5px;
}
.switch__sep {
	width: 1px;
	height: 0.875rem;
	margin-inline: 0.375rem;
	background: currentColor;
	opacity: 0.28;
}

/* Poniżej 1100 px pasek musi pomieścić logo, telefon, przycisk i menu —
   przełączniki wracają wtedy w szufladzie, z pełnymi etykietami. */
@media (max-width: 1099px) {
	.header__tools .switch { display: none; }
}
.switch--drawer {
	justify-content: center;
	gap: 0.25rem;
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--border);
	font-size: 0.9375rem;
}
.switch--drawer .switch__opt { min-width: 3rem; }

.footer__bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-6);
	margin-top: var(--s-4);
	/* Oba bloki po lewej, nie na przeciwległych końcach: prawy dolny róg
	   należy do pływającego WhatsAppa i przycisku powrotu na górę, które
	   zasłaniały przełącznik waluty. */
	justify-content: flex-start;
	padding-right: 14rem;
}
@media (max-width: 767px) {
	/* Na telefonie pływające przyciski stoją nad paskiem, nie nad stopką. */
	.footer__bottom { padding-right: 0; }
}
.footer__bottom p { margin: 0; }
.switch--stopka .switch__opt { min-height: 2.75rem; }

/* Logo w nagłówku zjada 237 px. Przy 1280 px pasek nie mieści już
   logotypu, menu, telefonu i przycisku naraz, więc znak schodzi
   o stopień i traci podpis. */
@media (max-width: 1399px) {
	.logo { --logo-h: 22px; }
	.logo__sub { display: none; }
}
/* Po podniesieniu stopnia pisma (pkt 34) menu i przycisk urosły na tyle,
   że przy 1280 px pasek znów wychodził poza okno. Telefon schodzi wcześniej —
   jest w szufladzie, w stopce i w sekcji kontaktu, więc nic nie ginie. */
@media (max-width: 1399px) {
	.header__tel { display: none; }
}

/* Nagłówek nad zdjęciem: kreska dolna jest już przezroczysta, ale nadal
   zajmuje 1 px wysokości. Hero podciąga się o `--header-h` (72 px), więc
   ten jeden piksel zostawał białym paskiem na samej górze przy wczytaniu.
   Zerujemy szerokość, a nie kolor — liczy się wysokość, nie widoczność. */
.has-hero .masthead:not(.is-scrolled) { border-bottom-width: 0; }

/* Odstęp nad stopką pochodził z czasu, gdy stopka była osobną płytą na
   kolorowym podłożu i margines odsłaniał to podłoże. Stopka jest teraz
   pełnowymiarowym blokiem grafitowym, więc margines odsłaniał biel `body` —
   64 px białego pasa między treścią a stopką na każdej stronie.
   Sekcje mają własną wyściółkę dolną, więc styk nie jest ciasny. */
.footer { margin-top: 0; }

/* --- sekcje bez podpisu po prawej (pkt 37) ------------------------------- */
/* Nagłówek sekcji to siatka „tytuł | podpis”. Po usunięciu podpisu tytuł
   zostawał w wąskiej pierwszej kolumnie, a prawa połowa ekranu świeciła
   pustką. Bez podpisu siatka schodzi do jednej kolumny. */
/* FAQ na pełną szerokość sekcji; sam tekst odpowiedzi zostaje w mierze
   czytelnej, bo wiersz na 1400 px męczy oko bardziej niż pomaga. */
.faq { max-width: none; }
.faq__body > * { max-width: 74ch; }

/* --- teksty pomocnicze (pkt 34, 36) -------------------------------------- */
/* Podpis sekcji i opis wiersza miały wpisane 0.9375rem, więc nie brały udziału
   w podniesieniu tokenu `--fs-sm`. To są najczęściej czytane teksty opisowe
   na stronie, nie przypisy — idą na wspólny stopień z resztą. */
.row__body {
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* --- tekst z wyimkiem obok (pkt 26, 29) ---------------------------------- */
/* Sekcje bez podpisu po prawej zostawiały pustą połowę ekranu: miara tekstu
   ma ok. 66 znaków i nie wolno jej rozciągać, bo dłuższy wiersz męczy oko.
   Zamiast rozciągać, zagospodarowujemy prawą kolumnę wyimkiem — a gdy klient
   przyśle własne zdjęcie z Kenii, wchodzi ono w to samo miejsce. */
.rozklad {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}
.rozklad .prose { max-width: 66ch; }
.rozklad__bok { margin: 0; }
.rozklad__bok img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1000px) {
	.rozklad { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: start; }
	/* Wyimek trzyma się góry kolumny — ma być komentarzem do początku
	   wywodu, nie podpisem pod całością. */
	.rozklad__bok { position: sticky; top: calc(var(--header-h) + 2rem); }
	.rozklad__bok .pullquote { margin-top: 0; max-width: none; }
}

/* Dopowiedzenie przy wierszu podatku w kalkulatorze zostało na `--fs-label`
   (12 px) z czasu, gdy było etykietą. To zdanie opisowe, nie chip — idzie
   na wspólny stopień tekstów pomocniczych (pkt 34, 36). */
.calc__hint { font-size: var(--fs-sm); opacity: 1; color: var(--muted); }

/* --- podpis sekcji pod nagłówkiem (uwagi recenzenta 2 i 3) --------------- */
/* Podpis stał w osobnej kolumnie po prawej, oddalony od nagłówka o pół
   ekranu. Czytelnik nie wiązał go z pytaniem, do którego się odnosi —
   osoba sprawdzająca zgłosiła to przy trzech różnych podstronach.
   Podpis wraca pod nagłówek, w mierze tekstu, i dostaje stopień lead-u. */
.clause__head {
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
@media (min-width: 900px) {
	.clause__head { grid-template-columns: 1fr; }
	.clause__head:has(.clause__no) { grid-template-columns: 84px 1fr; }
}
.clause__note {
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.55;
	color: var(--muted);
	padding-top: 0;
}

/* --- przycisk powrotu w pasku mobilnym (uwaga recenzenta 5) -------------- */
/* W pasku przycisk jest jednym z trzech elementów, a nie pływającym kołem:
   okrąg z obwódką przy zaokrąglonym rogu paska wyglądał, jakby przez niego
   przebijał. Kształt i wysokość jak u sąsiadów. */
@media (max-width: 767px) {
	.stickybar .totop--bar {
		width: 52px;
		height: 52px;
		border-radius: var(--r-sm, 8px);
		box-shadow: none;
		border-color: var(--border);
	}
	.stickybar .totop--bar .totop__ring { display: none; }
	.stickybar { padding-inline: 10px; gap: 0.5rem; }
}

.clause__title { max-width: 26ch; }

/* Nazwa spółki pod tabelą kontaktową. Bez etykiety „Spółka”: wiersz
   z etykietą niósł numery z polskich rejestrów, których kenijska spółka
   nie ma, więc stały tam zera. */
.kontakt__firma {
	margin: 0 0 var(--s-6);
	font-family: var(--font-ui);
	font-size: 1.0625rem;
	font-variation-settings: "wght" 600;
	color: var(--ink);
}

/* --- Odsyłacz wyprowadzający na drugi język ----------------------- */
/* Angielska wersja jest jednostronicowa, a część treści istnieje tylko
   po polsku. Zamiast chować takie odsyłacze albo prowadzić nimi donikąd,
   mówimy wprost, że kliknięcie zmienia język. Znacznik jest mały, bo to
   przypis do odsyłacza, a nie druga etykieta. */
.lang-note {
  margin-inline-start: .45em;
  padding: 1px 5px;
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  /* Dolna granica 12 px: poniżej tej wartości kontrola czytelności
     w scripts/shots.py zgłasza tekst jako nieczytelny, i słusznie —
     w stopce podstawa jest już zmniejszona, więc sam mnożnik nie
     wystarcza. */
  font-size: max(.68em, 0.75rem);
  line-height: 1;
  letter-spacing: .08em;
  vertical-align: 1px;
  opacity: .6;
}