/* wsparcie badawcze · arkusz strony
 *
 * Swiat: czarny tusz na chlodnym papierze z delikatna siatka kreslarska.
 * Jedyny kolor: zolty zakreslacz, wylacznie na faktach i na hasle w hero.
 * Polityka CSP jest zamknieta na wlasne zrodlo, wiec wszystkie style zyja
 * w tym pliku: zero <style> i atrybutow style= w HTML, takze w SVG.
 */

/* ---------- kroje ---------- */

@font-face {
	font-family: "Hyperlegible";
	src: url("fonts/hyperlegible-next-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Hyperlegible";
	src: url("fonts/hyperlegible-next-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Hyperlegible Mono";
	src: url("fonts/hyperlegible-mono-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Hyperlegible Mono";
	src: url("fonts/hyperlegible-mono-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokeny ---------- */

:root {
	/* kolor: szesc rol, jeden akcent */
	--papier: #f4f5f2;
	--papier-gleb: #e9ebe5;
	--tusz: #16181a;
	--tusz-miekki: #464b4e;
	--linia: rgba(22, 24, 26, 0.16);
	--zakreslacz: #f0e442;

	/* siatka kreslarska: drobna co 24px, glowna co 120px */
	--siatka-drobna: rgba(22, 24, 26, 0.035);
	--siatka-glowna: rgba(22, 24, 26, 0.06);

	/* kroje */
	--kroj: "Hyperlegible", ui-sans-serif, system-ui, sans-serif;
	--kroj-mono: "Hyperlegible Mono", ui-monospace, monospace;

	/* skala typografii, plynna */
	--t-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
	--t-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
	--t-h3: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
	--t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--t-body: 1.0625rem;
	--t-maly: 0.9375rem;
	--t-etykieta: 0.8125rem;

	/* skala odstepow, baza 4px */
	--o-1: 0.25rem;
	--o-2: 0.5rem;
	--o-3: 0.75rem;
	--o-4: 1rem;
	--o-5: 1.5rem;
	--o-6: 2rem;
	--o-7: 3rem;
	--o-8: 4rem;
	--o-9: 6rem;
	--sekcja: clamp(3rem, 2rem + 4.5vw, 6.5rem); /* 27.09.2026 o ok. 1/3 mniej: Milosz, za duze odstepy miedzy sekcjami */
	--rynna: clamp(1rem, 0.5rem + 3vw, 3rem);
	--szerokosc: 74rem;
	--miara: 62ch;

	--rog: 2px;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	color-scheme: light;
	accent-color: var(--tusz);
	caret-color: var(--tusz);
}

/* ---------- podstawa ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Tez u dolu: przy Tab przegladarka dosuwa element na styk z krawedzia
	   okna, a obrys fokusu (3 px odstepu i 2 px grubosci) wypadal za ekran. */
	scroll-padding-block: var(--o-5);
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--papier);
	background-image:
		linear-gradient(var(--siatka-glowna) 1px, transparent 1px),
		linear-gradient(90deg, var(--siatka-glowna) 1px, transparent 1px),
		linear-gradient(var(--siatka-drobna) 1px, transparent 1px),
		linear-gradient(90deg, var(--siatka-drobna) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: -1px -1px;
	color: var(--tusz);
	font-family: var(--kroj);
	font-size: var(--t-body);
	line-height: 1.6;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}

main {
	flex: 1 0 auto;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h2 {
	font-size: var(--t-h2);
}

h3 {
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

p,
ul,
ol {
	margin: 0;
	text-wrap: pretty;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: text-decoration-thickness 140ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration-thickness: 2px;
	}
}

:focus-visible {
	outline: 2px solid var(--tusz);
	outline-offset: 3px;
	border-radius: var(--rog);
}

::selection {
	background: var(--zakreslacz);
	color: var(--tusz);
}

html {
	scrollbar-color: var(--tusz-miekki) var(--papier-gleb);
}

/* ---------- pomocnicze ---------- */

.pomin {
	position: absolute;
	left: var(--o-4);
	top: var(--o-4);
	z-index: 10;
	padding: var(--o-2) var(--o-4);
	background: var(--tusz);
	color: var(--papier);
	transform: translateY(-200%);
}

.pomin:focus-visible {
	transform: none;
	outline-color: var(--zakreslacz);
}

.tylko-czytnik {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rama {
	width: 100%;
	max-width: var(--szerokosc);
	margin-inline: auto;
	padding-inline: var(--rynna);
}

/* Dane, ktorych jeszcze nie ma. Widac je od razu, a grep na
   znaczniki danych zastepczych pilnuje, zeby nie trafily na produkcje. */
.brak {
	font-family: var(--kroj-mono);
	font-size: 0.875em;
	background: var(--papier-gleb);
	outline: 1px dashed var(--tusz-miekki);
	padding-inline: 0.25em;
	/* Obrys rysuje sie poza ramka: bez odstepu wchodzi pod kropke za znacznikiem
	   (regulamin 18.5) i psuje jej czytelnosc oraz pomiar kontrastu. */
	margin-right: 2px;
}

/* ---------- przyciski ---------- */

.przycisk {
	display: inline-flex;
	align-items: center;
	gap: var(--o-2);
	min-height: 2.75rem;
	padding: var(--o-2) var(--o-5);
	border: 1.5px solid var(--tusz);
	border-radius: var(--rog);
	background: var(--tusz);
	color: var(--papier);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 120ms var(--ease-out), background-color 140ms var(--ease-out), color 140ms var(--ease-out);
}

.przycisk--cichy {
	background: transparent;
	color: var(--tusz);
}

.przycisk:active {
	transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
	.przycisk:hover {
		background: var(--papier);
		color: var(--tusz);
	}

	.przycisk--cichy:hover {
		background: var(--tusz);
		color: var(--papier);
	}
}

/* ---------- naglowek ---------- */

.naglowek {
	position: relative;
	border-bottom: 1px solid var(--linia);
	background: var(--papier);
}

.naglowek .rama {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--o-5);
	min-height: 4.5rem;
}

.logo {
	display: block;
	flex: none;
	border-radius: var(--rog);
}

.logo img {
	width: auto;
	height: 1.75rem;
}

.nawigacja ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: clamp(var(--o-4), 2vw, var(--o-6));
	padding: 0;
	list-style: none;
}

.nawigacja a {
	display: inline-block;
	padding-block: var(--o-2);
	font-weight: 700;
	text-decoration: none;
}

.nawigacja a[aria-current="page"],
.nawigacja a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.nawigacja .zaloguj {
	color: var(--tusz-miekki);
	font-weight: 400;
}

/* Menu na telefonie: <details> dziala bez JavaScriptu. */
.menu {
	display: none;
}

.menu summary {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: var(--o-3);
	border: 1.5px solid var(--tusz);
	border-radius: var(--rog);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.menu summary::-webkit-details-marker {
	display: none;
}

.menu[open] summary {
	background: var(--tusz);
	color: var(--papier);
}

.menu ul {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 5;
	display: grid;
	padding: var(--o-2) var(--rynna) var(--o-5);
	border-bottom: 1px solid var(--linia);
	background: var(--papier);
	list-style: none;
}

.menu li + li {
	border-top: 1px solid var(--linia);
}

.menu a {
	display: block;
	padding-block: var(--o-3);
	font-size: var(--t-lead);
	font-weight: 700;
	text-decoration: none;
}

.menu .zaloguj {
	color: var(--tusz-miekki);
	font-weight: 400;
}

@media (max-width: 52rem) {
	.nawigacja {
		display: none;
	}

	.menu {
		display: block;
	}

	.logo img {
		height: 1.5rem;
	}
}

/* ---------- akty strony glownej ---------- */

.akt {
	padding-block: var(--sekcja);
}

/* Kratka tylko na pierwszym ekranie (hero, otwarcie podstrony, strona 404).
   Pod tekstem do czytania pelny papier: linie co 24 px przecinaly wiersze
   i meczyly przy dluzszym czytaniu (Milosz, 28.09.2026). */
.akt:not(.hero),
.dokument {
	background-color: var(--papier);
}

.akt + .akt {
	border-top: 1px solid var(--linia);
}

.akt h2 {
	max-width: 22ch;
	margin-bottom: var(--o-5);
}

.akt p {
	max-width: var(--miara);
}

.akt p + p {
	margin-top: var(--o-4);
}

/* Wiecej miejsca nad naglowkiem niz pod nim: odstep nalezy do granicy. */
.akt p + h3 {
	margin-top: var(--o-7);
}

.akt h3 + p {
	margin-top: var(--o-2);
}

.hero {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
}

.hero__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(var(--o-6), 5vw, var(--o-9));
}

.hero h1 {
	max-width: 15ch;
	font-size: var(--t-hero);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

/* Zakreslacz: pas koloru pod dolna czescia liter, jak pisakiem po wydruku.
   Stan statyczny (bez JS, ogranicz ruch) to stan koncowy: zakreslone. */
.zakreslenie {
	background-image: linear-gradient(var(--zakreslacz), var(--zakreslacz));
	background-repeat: no-repeat;
	background-size: 100% 0.42em;
	background-position: 0 88%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.04em;
}

.hero .linia-rzeczowa {
	margin-top: var(--o-5);
	font-size: var(--t-lead);
	color: var(--tusz-miekki);
}

.hero__obraz {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--linia);
	background: var(--papier);
}

.hero__kadr {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Etykieta gotowego pliku na kadrze: co klient dostaje. Tekst w HTML, nie w obrazie. */
.fragment {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 7%;
	display: grid;
	gap: var(--o-2);
	padding: var(--o-4) var(--o-5);
	border: 1px solid var(--tusz);
	background: var(--papier);
	max-height: 84%;
	overflow: auto;
	font-family: var(--kroj-mono);
	font-size: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
	line-height: 1.5;
}

.fragment__plik {
	display: block;
	font-weight: 700;
}

.fragment__cechy {
	display: block;
	color: var(--tusz-miekki);
}

@media (max-width: 52rem) {
	.hero__uklad {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero h1 {
		max-width: 14ch;
	}

	/* Jedna kolumna: kadr nie wyzszy niz 60% ekranu, zeby etykieta pliku
	   nie wypadal pod zgiecie na niskich telefonach. Szerokosc z proporcji 4:5. */
	.hero__obraz {
		width: min(100%, 32rem, 48vh);
		width: min(100%, 32rem, 48svh);
	}
}

.akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-3);
	margin-top: var(--o-6);
}

.do-maila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-2) var(--o-4);
	padding: 0;
	font-weight: 700;
	list-style: none;
}

.do-maila li + li::before {
	content: "·";
	margin-right: var(--o-4);
	color: var(--tusz-miekki);
}

/* ---------- akt 2: uslugi ---------- */

.uslugi__wstep h2 {
	margin-bottom: var(--o-4);
}

.uslugi__lead {
	font-size: var(--t-lead);
}

.uslugi__warianty {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--o-7);
	border-top: 1px solid var(--linia);
}

.wariant {
	display: flex;
	flex-direction: column;
	gap: var(--o-3);
	padding: var(--o-6) var(--o-6) var(--o-6) 0;
}

.wariant + .wariant {
	padding-inline: var(--o-6) 0;
	border-left: 1px solid var(--linia);
}

.wariant h3 {
	margin-top: var(--o-3);
}

.wariant p {
	max-width: 44ch;
}

/* Odstepy w wariancie niesie gap; przycisk i uwaga trzymaja sie dolu,
   zeby oba warianty konczyly sie na tej samej linii. */
.wariant p + p,
.uslugi__stopka p + p {
	margin-top: 0;
}

.wariant p.wariant__akcja {
	margin-top: auto;
	padding-top: var(--o-3);
}

.wariant p.wariant__uwaga {
	font-weight: 700;
}

.wariant__drobne {
	font-size: var(--t-maly);
	color: var(--tusz-miekki);
}

.uslugi__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--o-3) var(--o-6);
	padding-block: var(--o-5);
	border-block: 1px solid var(--linia);
}

.uslugi__linki {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o-2) var(--o-5);
	font-weight: 700;
}

.uslugi__desk {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
	gap: var(--o-6) var(--o-8);
	margin-top: var(--o-9);
}

.uslugi__desk h2 {
	margin-bottom: var(--o-4);
	font-size: var(--t-h3);
	letter-spacing: -0.01em;
}

.uslugi__desk p + p {
	margin-top: var(--o-4);
}

.rys {
	width: 100%;
	max-width: 13rem;
	height: auto;
	overflow: visible; /* viewBox przyciety do kreski; pola tabeli wlatuja spoza niego */
}

@media (max-width: 52rem) {
	.uslugi__warianty,
	.uslugi__desk {
		grid-template-columns: minmax(0, 1fr);
	}

	.wariant,
	.wariant + .wariant {
		padding-inline: 0;
		border-left: 0;
	}

	.wariant + .wariant {
		border-top: 1px solid var(--linia);
	}

	.uslugi__desk {
		margin-top: var(--o-8);
	}
}

@media screen {
	/* Rysowanie kreska: stan startowy tylko pod klasa .rysuj (rysunki.js).
	   Bez niej, czyli bez JS i przy ograniczeniu ruchu, rysunki stoja gotowe. */
	.rysuj .rys__kreska,
	.rysuj .rys__nawias,
	.rysuj .rys__korekta,
	.rysuj .rys__linia {
		stroke-dasharray: 1 2; /* przerwa dluzsza niz kreska: przy offset 1 nie zostaje kropka */
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 320ms var(--ease-out);
	}

	.rysuj.narysowane .rys__kreska,
	.rysuj.narysowane .rys__nawias,
	.rysuj.narysowane .rys__korekta,
	.rysuj.narysowane .rys__linia {
		stroke-dashoffset: 0;
	}

	/* Automat: szybko, wiersz po wierszu. */
	.rysuj .rys__kreska:nth-child(2) { transition-delay: 70ms; }
	.rysuj .rys__kreska:nth-child(3) { transition-delay: 140ms; }
	.rysuj .rys__kreska:nth-child(4) { transition-delay: 210ms; }
	.rysuj .rys__kreska:nth-child(5) { transition-delay: 280ms; }

	/* Czlowiek: nawiasy wokol slowa i kreska korekty, wolniej, po wierszach. */
	.rysuj .rys__nawias {
		transition-duration: 260ms;
		transition-delay: 520ms;
	}

	.rysuj .rys__nawias:nth-child(2) {
		transition-delay: 640ms;
	}

	.rysuj .rys__korekta {
		transition-duration: 900ms;
		transition-delay: 820ms;
	}

	/* Tabela: najpierw siatka, potem pola wpadaja na swoje miejsca. */
	.rysuj .rys__linia {
		transition-duration: 500ms;
	}

	.rysuj .rys__linia:nth-child(2) { transition-delay: 120ms; }
	.rysuj .rys__linia:nth-child(3) { transition-delay: 200ms; }
	.rysuj .rys__linia:nth-child(4) { transition-delay: 280ms; }

	.rys__pole {
		transform-box: fill-box;
		transform-origin: center;
	}

	.rysuj .rys__pole {
		opacity: 0;
		transition: transform 600ms var(--ease-out), opacity 300ms var(--ease-out);
		transition-delay: 450ms;
	}

	.rysuj .rys__pole:nth-child(1) { transform: translate(40px, 70px) rotate(-14deg); }
	.rysuj .rys__pole:nth-child(2) { transform: translate(-30px, 60px) rotate(10deg); }
	.rysuj .rys__pole:nth-child(3) { transform: translate(-60px, 40px) rotate(-8deg); }
	.rysuj .rys__pole:nth-child(4) { transform: translate(70px, -20px) rotate(12deg); }
	.rysuj .rys__pole:nth-child(5) { transform: translate(-20px, -40px) rotate(-16deg); }
	.rysuj .rys__pole:nth-child(6) { transform: translate(-80px, 20px) rotate(9deg); }
	.rysuj .rys__pole:nth-child(7) { transform: translate(60px, -50px) rotate(-11deg); }
	.rysuj .rys__pole:nth-child(8) { transform: translate(20px, -60px) rotate(14deg); }
	.rysuj .rys__pole:nth-child(9) { transform: translate(-40px, -30px) rotate(-6deg); }

	.rysuj .rys__pole:nth-child(2n) { transition-delay: 520ms; }
	.rysuj .rys__pole:nth-child(3n) { transition-delay: 590ms; }

	.rysuj.narysowane .rys__pole {
		opacity: 1;
		transform: none;
	}
}

/* ---------- akt 3: jak pracujemy ----------
 * Jedna kreska przez trzy kroki, kazdy odcinek grubszy: porzadek narasta,
 * tak jak w hero. Fakty w krokach zakresla ten sam zakreslacz co haslo.
 */

.kroki {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--o-6);
	margin-top: var(--o-7);
	padding: 0;
	list-style: none;
	counter-reset: krok;
}

.krok {
	--grubosc: 2px;
	position: relative;
	padding-top: var(--o-7);
	counter-increment: krok;
}

.krok:nth-child(2) {
	--grubosc: 4px;
}

.krok:nth-child(3) {
	--grubosc: 6px;
}

/* Odcinek kreski nad krokiem; siega przez odstep do nastepnego kroku. */
.krok::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: calc(var(--o-6) * -1);
	height: var(--grubosc);
	border-radius: var(--grubosc);
	background: var(--tusz);
	transform-origin: left center;
}

.krok:last-child::after {
	right: 0;
}

/* Przystanek: numer kroku na poczatku odcinka. W ::before, zeby czytnik
   ekranu czytal numer przed trescia kroku, a nie po niej. */
.krok::before {
	z-index: 1;
	content: counter(krok);
	position: absolute;
	top: calc(var(--grubosc) / 2);
	left: 0;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1.5px solid var(--tusz);
	border-radius: 50%;
	background: var(--papier);
	font-family: var(--kroj-mono);
	font-size: var(--t-etykieta);
	font-weight: 700;
	transform: translateY(-50%);
}

.krok h3 {
	margin-bottom: var(--o-3);
}

.krok p {
	max-width: 36ch;
}

.kroki__dalej {
	margin-top: var(--o-7);
}

.kroki__dalej a {
	font-weight: 700;
}

.fakt {
	color: inherit;
	background-color: transparent;
	background-image: linear-gradient(var(--zakreslacz), var(--zakreslacz));
	background-repeat: no-repeat;
	background-size: 100% 0.55em;
	background-position: 0 90%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-inline: 0.08em;
}

@media (max-width: 52rem) {
	/* Telefon: kreska pionowa, z gory na dol. */
	.kroki {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.krok {
		padding: 0 0 var(--o-7) var(--o-7);
	}

	.krok:last-child {
		padding-bottom: 0;
	}

	.krok::after {
		top: 0;
		bottom: 0;
		left: calc(0.875rem - var(--grubosc) / 2);
		right: auto;
		width: var(--grubosc);
		height: auto;
		transform-origin: center top;
	}

	.krok::before {
		top: 0;
		transform: none;
	}
}

@media screen {
	.krok.rysuj::after {
		transform: scaleX(0);
		transition: transform 700ms linear;
	}

	.krok.rysuj::before {
		opacity: 0;
		transition: opacity 200ms var(--ease-out);
	}

	.krok.rysuj .fakt {
		background-size: 0% 0.55em;
		transition: background-size 600ms var(--ease-out);
		transition-delay: 500ms;
	}

	/* Komputer: trzy kroki wjezdzaja naraz, kolejnosc daja opoznienia. */
	.krok.rysuj:nth-child(2)::after,
	.krok.rysuj:nth-child(2)::before {
		transition-delay: 700ms;
	}

	.krok.rysuj:nth-child(3)::after,
	.krok.rysuj:nth-child(3)::before {
		transition-delay: 1400ms;
	}

	.krok.rysuj:nth-child(2) .fakt {
		transition-delay: 1200ms;
	}

	.krok.rysuj:nth-child(3) .fakt {
		transition-delay: 1900ms;
	}

	.krok.rysuj.narysowane::after {
		transform: none;
	}

	.krok.rysuj.narysowane::before {
		opacity: 1;
	}

	.krok.rysuj.narysowane .fakt {
		background-size: 100% 0.55em;
	}
}

/* Telefon: kazdy krok rysuje sie, gdy do niego dojdziesz, bez opoznien. */
@media screen and (max-width: 52rem) {
	.krok.rysuj::after {
		transform: scaleY(0);
	}

	.krok.rysuj:nth-child(n)::after,
	.krok.rysuj:nth-child(n)::before {
		transition-delay: 0ms;
	}

	.krok.rysuj:nth-child(n) .fakt {
		transition-delay: 500ms;
	}
}

/* ---------- akt 4: kontakt ----------
 * Kreska, ktora w hero zaczela sie jako fala, domyka sie pod adresem:
 * ta sama grubosc co ostatni odcinek w akcie 3, zakonczona kropka.
 */

/* Naglowek i adres na wspolnej linii bazowej: przy align-items: start
   naglowek stal wyzej niz mail obok. */
.kontakt__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: baseline;
	gap: var(--o-7) var(--o-8);
}

.kontakt h2 {
	margin-bottom: var(--o-5);
}

.kontakt__wstep {
	margin-bottom: var(--o-3);
}

.kontakt .do-maila {
	margin-bottom: var(--o-5);
}

.kontakt__kanaly {
	display: grid;
	gap: var(--o-5);
}

.kontakt__kanaly p + p {
	margin-top: 0;
}

.kontakt__mail {
	position: relative;
	padding-bottom: var(--o-4);
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.kontakt__mail a {
	text-decoration: none;
}

/* Koniec kreski: pasek 6 px pod adresem i kropka na koncu. */
.kontakt__mail::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	border-radius: 6px;
	background: var(--tusz);
	transform-origin: left center;
}

.kontakt__mail::before {
	content: "";
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tusz);
}

.kontakt__telefon {
	font-size: var(--t-h3);
	font-weight: 700;
}

.kontakt__dostep {
	padding-top: var(--o-5);
	border-top: 1px solid var(--linia);
}

.kontakt__dostep h3 {
	margin-bottom: var(--o-2);
	font-size: var(--t-body);
}

.kontakt__dostep p {
	font-size: var(--t-maly);
}

@media (max-width: 52rem) {
	.kontakt__uklad {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Waski ekran: pozycje jedna pod druga, bez kropek, ktore spadalyby
	   na poczatek linii po zawinieciu. */
	.do-maila {
		flex-direction: column;
	}

	.do-maila li + li::before {
		content: none;
	}
}

@media screen {
	.kontakt__mail.rysuj::after {
		transform: scaleX(0);
		transition: transform 900ms linear;
	}

	.kontakt__mail.rysuj::before {
		opacity: 0;
		transform: scale(0.4);
		transition: opacity 200ms var(--ease-out) 900ms, transform 300ms var(--ease-out) 900ms;
	}

	.kontakt__mail.rysuj.narysowane::after {
		transform: none;
	}

	.kontakt__mail.rysuj.narysowane::before {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.kontakt__mail::after,
	.kontakt__mail::before {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* Na czas nakladania stanu startowego (rysunki.js): bez przejsc. */
.bez-przejsc,
.bez-przejsc *,
.bez-przejsc::before,
.bez-przejsc::after,
.bez-przejsc *::before,
.bez-przejsc *::after {
	transition: none !important;
}

/* ---------- hero w ruchu ----------
 * Cztery stany, zaden nie miga:
 * - bez klas: statyczny hero (bez JS, ogranicz ruch, awaria skryptu);
 * - .ruch-mozliwy (ruch.js w <head>): zakreslacz i fragment w stanie
 *   startowym, kadr statyczny schowany (inaczej przy wolnym skrypcie widac
 *   najpierw gotowy dokument, a potem fale, czyli historie od konca);
 * - .ruch (hero-kod.js po pierwszym rysunku): canvas nad kadrem, fala gra;
 * - .hero--koniec (koniec przemiany): zakreslacz sie przeciaga, fragment wchodzi.
 * Przemiana odtwarza sie sama, raz, bez sterowania przewijaniem (28.09.2026:
 * przewijanie klatek klipu szlo skokami).
 */

.hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.ruch .hero__canvas {
	opacity: 1;
}

.ruch-mozliwy:not(.ruch) .hero__kadr {
	visibility: hidden;
}

.ruch-mozliwy .zakreslenie {
	background-size: 0% 0.42em;
	transition: background-size 900ms var(--ease-out);
}

.ruch-mozliwy .hero--koniec .zakreslenie {
	background-size: 100% 0.42em;
}

.ruch-mozliwy .fragment {
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.ruch-mozliwy .hero--koniec .fragment {
	opacity: 1;
	transform: none;
}

/* Wydruk: hero w stanie koncowym (kadr statyczny zamiast canvasu), takze gdy
   drukowany w trakcie animacji. Kreska krokow i zakreslenia to tla, ktore
   przegladarki domyslnie pomijaja. */
@media print {
	.zakreslenie,
	.fakt,
	.krok::after {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.ruch-mozliwy .zakreslenie {
		background-size: 100% 0.42em;
	}

	.ruch .hero__canvas {
		opacity: 0;
	}

	.ruch-mozliwy .hero__kadr {
		visibility: visible;
	}

	.ruch-mozliwy .fragment {
		opacity: 1;
		transform: none;
	}
}

/* ---------- stopka ---------- */

.stopka {
	padding-block: var(--o-8) var(--o-6);
	border-top: 1px solid var(--tusz);
	background: var(--papier);
	font-size: var(--t-maly);
}

.stopka .rama {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--o-6) var(--o-7);
}

.stopka h2 {
	margin-bottom: var(--o-3);
	font-family: var(--kroj-mono);
	font-size: var(--t-etykieta);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tusz-miekki);
}

.stopka ul {
	display: grid;
	gap: var(--o-2);
	padding: 0;
	list-style: none;
}

.stopka address {
	font-style: normal;
	line-height: 1.7;
}

.stopka .znak img {
	width: 235px;
	max-width: 100%;
	height: auto;
	margin-bottom: var(--o-4);
}

.stopka .uwaga {
	grid-column: 1 / -1;
	padding-top: var(--o-5);
	border-top: 1px solid var(--linia);
	color: var(--tusz-miekki);
}

/* ---------- podstrony ofertowe ----------
 * Ciche: ten sam swiat co glowna, bez ruchu. Otwarcie zamiast hero,
 * dalej zwykle akty.
 */

.otwarcie {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
	border-bottom: 1px solid var(--linia);
}

.otwarcie h1 {
	max-width: 20ch;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
}

.otwarcie__lead {
	max-width: 52ch;
	margin-top: var(--o-5);
	font-size: var(--t-lead);
}

/* Pierwszy akt pod otwarciem: bez pelnego odstepu sekcji, bo otwarcie ma juz
   wlasny dolny margines i linie. */
.otwarcie + .akt {
	padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

/* Lista pozycji do maila i zdanie pod nia (strona kontaktu). */
.do-maila + p {
	margin-top: var(--o-4);
}

/* Strona kontaktu: adres z kreska pod spodem jak w akcie 4, szeroki tylko na tekst. */
.otwarcie .kontakt__mail {
	width: fit-content;
	margin-top: var(--o-6);
}

.otwarcie .kontakt__telefon {
	margin-top: var(--o-5);
}

.akt p.akt__lead {
	font-size: var(--t-lead);
}

code {
	font-family: var(--kroj-mono);
	font-size: 0.9em;
}

/* Dwie kolumny obok siebie (cennik, kontakt), na telefonie jedna pod druga. */
.porownanie {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: var(--o-6);
	border-top: 1px solid var(--linia);
}

.porownanie__wariant {
	display: flex;
	flex-direction: column;
	gap: var(--o-4);
	padding: var(--o-6) var(--o-6) var(--o-6) 0;
}

.porownanie__wariant + .porownanie__wariant {
	padding-inline: var(--o-6) 0;
	border-left: 1px solid var(--linia);
}

.akt .porownanie__wariant p + p {
	margin-top: 0;
}

.porownanie ul {
	display: grid;
	gap: var(--o-2);
	max-width: var(--miara);
	padding-left: 1.25em;
}

.porownanie li::marker {
	color: var(--tusz-miekki);
}

/* Cennik: dwie kolumny w ramce z obrysem tuszem, ktory odcina cennik od reszty
   strony. Tlo ramki to ten sam papier co sekcji (kratki pod aktami nie ma
   od 28.09.2026). */
.porownanie--cennik {
	margin-top: 0;
	border-top: 0;
}

.cennik__panel {
	padding: var(--o-6);
	border: 1.5px solid var(--tusz);
	border-radius: var(--rog);
	background: var(--papier);
}

.porownanie--cennik .porownanie__wariant {
	padding-top: 0;
	padding-bottom: 0;
}

.porownanie--cennik h2 {
	margin-bottom: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.akt .porownanie--cennik h3 {
	margin-top: var(--o-3);
	font-size: var(--t-body);
}

.porownanie__wariant .tabela,
.porownanie__wariant .lista {
	margin-top: 0;
}

.akt .porownanie__wariant p.cennik__uwaga {
	margin-top: 0;
}

/* Cennik: obie kolumny na wspolnej siatce wierszy (rysunek, naglowek, opis,
   reszta z tabela na poczatku), zeby tabele zaczynaly sie na tej samej
   wysokosci niezaleznie od dlugosci opisu. Tabela nie jest osobnym wierszem,
   bo krotsza rozciagalaby sie do wysokosci dluzszej. Przyciski na dole reszty. */
.porownanie--cennik .porownanie__wariant {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: var(--o-4);
}

.porownanie__reszta {
	display: flex;
	flex-direction: column;
	gap: var(--o-4);
}

.porownanie__reszta > .akcje:last-child {
	margin-top: auto;
	padding-top: var(--o-3);
}

/* Kontakt: wycena i dostep do panelu obok siebie, przyciski na dole kolumn.
   Lista "w mailu podaj" zostaje w jednej linii mimo ogolnej reguly
   .porownanie ul. */
.porownanie--kontakt .porownanie__wariant > .akcje:last-child {
	margin-top: auto;
	padding-top: var(--o-3);
}

.akt .porownanie--kontakt h2 {
	margin-bottom: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

/* Druga wycena w tej samej kolumnie (desk research): oddzielona kreska,
   zeby nie kleila sie do przycisku pierwszej. */
.akt .porownanie--kontakt .kontakt__druga {
	margin-top: var(--o-5);
	padding-top: var(--o-6);
	border-top: 1px solid var(--linia);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

/* W waskiej kolumnie pozycje jedna pod druga: w linii kropka-separator
   potrafila zaczynac zlamany wiersz. */
.porownanie--kontakt .do-maila {
	display: flex;
	flex-direction: column;
	gap: var(--o-1);
	padding-left: 0;
}

.porownanie--kontakt .do-maila li + li::before {
	content: none;
}

.porownanie--kontakt .kontakt__wstep,
.porownanie--kontakt .do-maila + p {
	margin-block: 0;
}

/* Test gratis w ramce, w cenniku i w akcie 2 strony glownej. */
.cennik__test,
.wariant__test {
	align-self: flex-start;
	padding: var(--o-2) var(--o-3);
	border: 1.5px solid var(--tusz);
	border-radius: var(--rog);
	font-weight: 700;
}

.cennik__zastrzezenie {
	font-size: var(--t-maly);
	color: var(--tusz-miekki);
}

/* Adres w przycisku: na waskim ekranie zawija sie zamiast wypychac strone w bok. */
.przycisk--adres {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Desk research: zlecenie w trzech krokach (zadanie, co zrobilismy, efekt),
   obok siebie jak warianty w cenniku, na telefonie jeden pod drugim.
   Rysunki kreska jak w akcie 2, tu statyczne. */
.przypadek {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--o-5);
	border-top: 1px solid var(--linia);
}

.przypadek__krok {
	display: flex;
	flex-direction: column;
	gap: var(--o-3);
	padding: var(--o-6) var(--o-5);
}

.przypadek__krok:first-child {
	padding-left: 0;
}

.przypadek__krok:last-child {
	padding-right: 0;
}

.przypadek__krok + .przypadek__krok {
	border-left: 1px solid var(--linia);
}

.przypadek .rys {
	margin-bottom: var(--o-3);
}

/* Etykieta kroku jak naglowki stopki: mono, wersaliki, miekki tusz. */
.akt .przypadek__etykieta {
	margin: 0;
	font-family: var(--kroj-mono);
	font-size: var(--t-etykieta);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tusz-miekki);
}

/* Odstepy w kroku daje gap; zerowane marginesy z ogolnych regul .akt. */
.akt .przypadek__krok p + p,
.akt .przypadek__krok .lista,
.akt .przypadek__krok h3 + p {
	margin-top: 0;
}

/* Nazwa, ktora nie moze peknac na dywizie (ISCED-F 2013). */
.cale {
	white-space: nowrap;
}

.lista {
	display: grid;
	gap: var(--o-2);
	max-width: var(--miara);
	margin-top: var(--o-3);
	padding-left: 1.25em;
}

.lista li::marker {
	color: var(--tusz-miekki);
}

/* Tabele (cennik, ochrona danych). Trzy kolumny najwyzej, opis pod nazwa w tej
   samej komorce, wiec tabela miesci sie na 375 px bez przerabiania na karty. */
.tabela {
	width: 100%;
	max-width: 48rem;
	margin-top: var(--o-6);
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.tabela th,
.tabela td {
	padding: var(--o-4) var(--o-4) var(--o-4) 0;
	border-bottom: 1px solid var(--linia);
	text-align: left;
	vertical-align: baseline;
}

.tabela thead th {
	padding-block: var(--o-2);
	border-bottom-color: var(--tusz);
	font-family: var(--kroj-mono);
	font-size: var(--t-etykieta);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tusz-miekki);
}

.tabela tbody th {
	font-weight: 700;
}

.tabela th:last-child,
.tabela td:last-child {
	padding-right: 0;
}

.tabela .tabela__kwota {
	text-align: right;
}

/* Kwota w calosci w jednej linii; opis i znaczniki pod nia moga sie zawinac. */
.tabela__kwota strong {
	font-size: var(--t-h3);
	white-space: nowrap;
}

.tabela__opis {
	display: block;
	margin-top: var(--o-1);
	font-size: var(--t-maly);
	font-weight: 400;
	color: var(--tusz-miekki);
}

/* Adres techniczny w tabeli (np. endpoint) lamie sie zamiast wypychac strone w bok. */
.tabela code {
	overflow-wrap: anywhere;
}

.akt p.cennik__uwaga {
	margin-top: var(--o-5);
	font-weight: 700;
}

.pytania {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--o-6) var(--o-8);
	max-width: 60rem;
	margin-top: var(--o-6);
}

.pytanie h3 {
	font-size: var(--t-body);
}

/* Rysunek kreska nad pytaniem (/transkrypcja: plik i panel, bezpieczenstwo danych). */
.pytanie .rys {
	display: block;
	margin-bottom: var(--o-4);
}

.akt p.pytanie__drobne {
	margin-top: var(--o-4);
	font-size: var(--t-maly);
	color: var(--tusz-miekki);
}

@media (max-width: 52rem) {
	.porownanie,
	.przypadek,
	.pytania {
		grid-template-columns: minmax(0, 1fr);
	}

	.porownanie__wariant,
	.porownanie__wariant + .porownanie__wariant,
	.przypadek__krok {
		padding-inline: 0;
	}

	.porownanie__wariant + .porownanie__wariant,
	.przypadek__krok + .przypadek__krok {
		border-left: 0;
		border-top: 1px solid var(--linia);
	}

	/* Cennik: druga kolumna pod pierwsza, z linia i odstepem nad naglowkiem. */
	.porownanie--cennik .porownanie__wariant + .porownanie__wariant {
		margin-top: var(--o-6);
		padding-top: var(--o-6);
	}

	.cennik__panel {
		padding: var(--o-5) var(--o-4);
	}
}

/* ---------- dokumenty: regulamin, polityka prywatnosci ----------
 * Czyta je czasem IOD albo prawnik, ktory szuka jednego zdania. Stad waska
 * kolumna, numery punktow w osobnej kolumnie i kotwica przy kazdej sekcji.
 */

.dokument {
	padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--sekcja);
}

.dokument__kolumna {
	max-width: 46rem;
}

.dokument h1 {
	margin-bottom: var(--o-4);
	font-size: var(--t-h2);
}

.dokument__lead {
	margin-top: var(--o-5);
	font-size: var(--t-lead);
}

.dokument__metryka {
	font-family: var(--kroj-mono);
	font-size: var(--t-maly);
	line-height: 1.7;
	color: var(--tusz-miekki);
}

.dokument section {
	margin-top: var(--o-7);
	padding-top: var(--o-5);
	border-top: 1px solid var(--linia);
}

.dokument h2 {
	margin-bottom: var(--o-4);
	font-size: var(--t-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.dokument p,
.dokument ul {
	max-width: var(--miara);
}

.dokument p + p,
.dokument p + ul,
.dokument ul + p {
	margin-top: var(--o-3);
}

.dokument ul {
	padding-left: 1.25em;
}

.dokument li + li {
	margin-top: var(--o-2);
}

.dokument li::marker {
	color: var(--tusz-miekki);
}

/* Punkt regulaminu: numer w kolumnie, tekst obok. */
.punkt {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--o-3);
}

.punkt__nr {
	padding-top: 0.15em;
	font-family: var(--kroj-mono);
	font-size: var(--t-maly);
	color: var(--tusz-miekki);
}

.dokument .punkt + .punkt {
	margin-top: var(--o-3);
}

/* Wyliczenie a), b), c): litera stoi w tekscie, wiec bez kropki listy. */
.dokument .litery {
	margin-top: var(--o-2);
	padding-left: 0;
	list-style: none;
}

/* Definicje: termin w kolumnie, objasnienie obok; na telefonie jedno pod drugim. */
.definicje {
	max-width: var(--miara);
	margin-top: var(--o-3);
}

.definicje > div {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--o-3);
}

.definicje > div + div {
	margin-top: var(--o-2);
}

.definicje dt {
	font-weight: 700;
}

.definicje dd {
	margin: 0;
}

@media (max-width: 40rem) {
	.definicje > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
}

.dokument__pobierz {
	margin-top: var(--o-4);
}

/* PDF do pobrania drukuje sama strone (scripts/dokumenty-pdf.mjs): bez
 * nawigacji, stopki i odnosnika do pobrania, punkty nierozcinane miedzy
 * stronami. */
@media print {
	.naglowek,
	.stopka,
	.pomin,
	.dokument__pobierz {
		display: none;
	}

	.dokument {
		padding-block: 0;
	}

	.dokument section {
		margin-top: var(--o-5);
	}

	/* Tylko krotkie elementy: caly punkt z lista albo definicjami przeskoczylby
	 * na nastepna strone i zostawil pol pustej. */
	p.punkt,
	.litery li,
	.definicje > div {
		break-inside: avoid;
	}

	.dokument h2 {
		break-after: avoid;
	}
}

/* ---------- strona 404 ---------- */

.blad {
	padding-block: var(--sekcja);
}

.blad .kod {
	font-family: var(--kroj-mono);
	font-size: var(--t-etykieta);
	color: var(--tusz-miekki);
}

.blad h1 {
	max-width: 18ch;
	margin-block: var(--o-4) var(--o-5);
	font-size: var(--t-h2);
}

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}