/* Komponenty automatyzujemy.to. Wspólne dla motywu WordPress i makiet.
   Kolory tylko z tokenów poniżej. Zero zaokrągleń, cieni i gradientów. */
:root {
	--azt-czern: #0B0B0A;
	--azt-papier: #F2F0EA;
	--azt-zolc: #FFE82E;
	--azt-szary-na-ciemnym: #A9A69E;
	--azt-szary-na-jasnym: #5A574F;
	--azt-kreska-ciemna: #2E2D2A;
	--azt-kreska-jasna: #D6D3CA;
	--azt-tlo: var(--azt-czern);
	--azt-tekst: var(--azt-papier);
	--azt-tekst-2: var(--azt-szary-na-ciemnym);
	--azt-kreska: var(--azt-kreska-ciemna);
	--azt-fokus: var(--azt-zolc);
	--azt-pole-ramka: var(--azt-szary-na-ciemnym);
	--azt-akcent-tekstu: var(--azt-zolc);
	color-scheme: dark;
	scrollbar-color: var(--azt-szary-na-ciemnym) var(--azt-czern);
}
.is-style-sekcja-jasna {
	--azt-tlo: var(--azt-papier);
	--azt-tekst: var(--azt-czern);
	--azt-tekst-2: var(--azt-szary-na-jasnym);
	--azt-kreska: var(--azt-kreska-jasna);
	--azt-fokus: var(--azt-czern);
	--azt-pole-ramka: var(--azt-szary-na-jasnym);
	--azt-akcent-tekstu: var(--azt-czern);
	color-scheme: light;
	background: var(--azt-papier);
	color: var(--azt-czern);
}
.is-style-sekcja-ciemna {
	background: var(--azt-czern);
	color: var(--azt-papier);
}
/* Jasny motyw (przełącznik w nagłówku albo ustawienie systemu, motyw-start.js): cała strona na papierze,
   sekcje oddziela kreska zamiast zmiany tła. Żółty tylko jako pole z czarnym tekstem; żółty pas bez zmian. */
:root[data-motyw="jasny"] {
	--azt-tlo: var(--azt-papier);
	--azt-tekst: var(--azt-czern);
	--azt-tekst-2: var(--azt-szary-na-jasnym);
	--azt-kreska: var(--azt-kreska-jasna);
	--azt-fokus: var(--azt-czern);
	--azt-pole-ramka: var(--azt-szary-na-jasnym);
	--azt-akcent-tekstu: var(--azt-czern);
	color-scheme: light;
	scrollbar-color: var(--azt-szary-na-jasnym) var(--azt-papier);
}
:root[data-motyw="jasny"] body,
:root[data-motyw="jasny"] .is-style-sekcja-ciemna { background: var(--azt-papier); color: var(--azt-czern); }
:root[data-motyw="jasny"] :is(.is-style-sekcja-ciemna, .is-style-sekcja-jasna) + :is(.is-style-sekcja-ciemna, .is-style-sekcja-jasna) { border-top: 2px solid var(--azt-kreska-jasna); }
/* Żółty pas: tabliczka w skali sekcji. Jeden na stronę, tylko dla zasady. */
.is-style-sekcja-zolta {
	--azt-tlo: var(--azt-zolc);
	--azt-tekst: var(--azt-czern);
	--azt-tekst-2: var(--azt-czern);
	--azt-kreska: var(--azt-czern);
	--azt-fokus: var(--azt-czern);
	--azt-akcent-tekstu: var(--azt-czern);
	color-scheme: light;
	background: var(--azt-zolc);
	color: var(--azt-czern);
}
.azt-zasada__tytul { font-size: clamp(2.5rem, 1.2rem + 5.5vw, 5.75rem); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.azt-zasada__tekst { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; max-width: 52ch; margin-top: 1.5rem; }

/* Elementy przeglądarki też należą do marki. */
::selection { background: var(--azt-zolc); color: var(--azt-czern); }
:where(input, textarea) { caret-color: var(--azt-akcent-tekstu); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--azt-fokus); outline-offset: 3px; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 2px; }

/* Długie polskie słowa muszą się łamać zamiast rozpychać ekran na 375 px i przy 200 % tekstu. */
h1, h2, h3, p, li, summary, label, legend { overflow-wrap: break-word; }
p, li { hyphens: auto; }
h1, h2, h3 { text-wrap: balance; }
/* Jak w makiecie: pod H2 zostaje 1.25rem, także gdy układ flow zeruje dolny margines (:root podnosi specyficzność). */
:root h2 { margin-block-end: 1.25rem; }
p { text-wrap: pretty; }
:where(.azt-puenta, .azt-kafle, .azt-kroki, .azt-obszar, .azt-formularz, .azt-kontakt, .azt-karty, .azt-realizacja, .azt-spis) * { min-width: 0; }

.azt-etykieta {
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--azt-tekst-2);
}
.azt-drugi { color: var(--azt-tekst-2); }
.azt-lead { font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; max-width: 26ch; }

/* Tabliczka: czarne znaki na żółtym polu. Jedyny sposób użycia żółci na jasnym tle. */
.azt-tabliczka {
	display: inline-block; background: var(--azt-zolc); color: var(--azt-czern);
	padding: 0 0.09em; margin-left: 0.1em; line-height: 1.02;
}
.azt-podklad { background: var(--azt-zolc); color: var(--azt-czern); padding: 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Tekst tylko dla czytników ekranu. */
.azt-ukryty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Skip link: widoczny dopiero przy fokusie. */
.azt-skip, .skip-link.screen-reader-text {
	position: absolute; left: 1rem; top: -10rem; z-index: 100;
	background: var(--azt-zolc); color: var(--azt-czern); padding: 0.75rem 1rem; font-weight: 800; text-decoration: none;
}
.azt-skip:focus, .skip-link.screen-reader-text:focus { top: 1rem; clip: auto; clip-path: none; width: auto; height: auto; background: var(--azt-zolc); color: var(--azt-czern); box-shadow: none; }

/* Przyciski: prostokąty. Główny żółty, drugi z obrysem. Wciśnięcie przesuwa o piksel. */
.wp-block-buttons { margin-block-start: 2rem; gap: 0.75rem; }
.wp-element-button { display: inline-block; transition: background-color 120ms, color 120ms; cursor: pointer; }
.wp-element-button:hover { background: var(--azt-tekst); border-color: var(--azt-tekst); color: var(--azt-tlo); }
.wp-element-button:active { transform: translateY(1px); }
/* Obrys także dla przycisku z PHP (formularz), który nie dostaje klasy wariantu is-style-outline--N. */
.is-style-outline .wp-element-button { background: transparent; color: currentColor; border-color: currentColor; padding: 0.8rem 1.25rem; }
.is-style-outline .wp-element-button:hover { background: var(--azt-tekst); color: var(--azt-tlo); border-color: var(--azt-tekst); }

/* Pasy i szerokość treści (nagłówek i stopka są blokami HTML, więc same trzymają marginesy). */
.azt-pas { padding-inline: clamp(1rem, 4vw, 2.5rem); }
.azt-szer { max-width: 76rem; margin-inline: auto; }
/* Nagłówek, sekcje i stopka stykają się: bez odstępu blockGap między nimi (sekcje mają własny padding). */
:is(.wp-site-blocks, #tresc, #tresc > .wp-block-post-content) > * { margin-block-start: 0; }
.azt-tytul-strony { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); margin-bottom: 1.5rem; }

/* Nagłówek strony. */
/* Siatka: znak, linki, przycisk. Na telefonie znak i przycisk w pierwszym rzędzie, cztery linki w jednym rzędzie pod nimi
   (rozłożone na całą szerokość; od 360 px mieszczą się w 13 px, węższy ekran albo duży tekst zawija je do drugiego rzędu). */
.azt-naglowek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem 1.75rem; border-bottom: 2px solid var(--azt-kreska); }
.azt-naglowek > .azt-nav { justify-self: end; }
.azt-naglowek .azt-naglowek__cta { margin: 0; }
@media (max-width: 47.99rem) {
	.azt-naglowek { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; }
	.azt-naglowek > .azt-nav { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; justify-content: space-between; gap: 0.25rem 0.375rem; }
	.azt-naglowek .azt-nav a { font-size: 0.8125rem; }
	.azt-naglowek .azt-naglowek__cta .wp-element-button { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
	.azt-naglowek .azt-znak { justify-self: stretch; max-width: 11rem; }
	.azt-naglowek .azt-znak svg { width: 100%; }
}
/* Bardzo wąski ekran albo duży tekst: wszystko jedno pod drugim zamiast wystawać. */
@media (max-width: 21rem) { .azt-naglowek { grid-template-columns: minmax(0, 1fr); } .azt-naglowek .azt-naglowek__cta { grid-row: 3; } }
.azt-znak { display: inline-flex; color: inherit; line-height: 0; max-width: 100%; min-width: 0; }
/* Szerokość, nie wysokość: przy powiększonym tekście znak ma się zmniejszyć do ekranu, nie wystawać. */
.azt-znak svg { width: clamp(11rem, 9.5rem + 5vw, 15.5rem); max-width: 100%; height: auto; }
/* Przełącznik motywu: prostokątny, jak w schematach. Włączony = jasny motyw, żółty tor z czarnym suwakiem.
   Bez JS ukryty (atrybut hidden zdejmuje motyw.js). Poniżej 64rem sam tor, napis zostaje dla czytników ekranu. */
.azt-motyw { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.375rem 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.azt-motyw[hidden] { display: none; }
/* Suwak przeskakuje w trzech krokach; tor zapala się na żółto dopiero, gdy suwak dojedzie (jak automat w schemacie). */
.azt-motyw__tor { position: relative; flex: none; width: 2.5rem; height: 1.375rem; border: 2px solid currentColor; transition: background-color 0s; }
.azt-motyw__tor::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 3px); background: currentColor; transition: transform 180ms steps(3, end); }
.azt-motyw[aria-checked="true"] .azt-motyw__tor { background: var(--azt-zolc); border-color: var(--azt-czern); transition: background-color 0s linear 180ms; }
.azt-motyw[aria-checked="true"] .azt-motyw__tor::after { transform: translateX(calc(100% + 2px)); background: var(--azt-czern); }
/* Zmiana motywu (motyw.js, View Transitions): stara strona stoi, nowa odsłania się jak roleta w siedmiu skokach,
   na froncie żółta krawędź. Na jasny z góry w dół, na ciemny z dołu do góry. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: azt-roleta-w-dol 560ms steps(7, end) both; }
:root[data-roleta="w-gore"]::view-transition-new(root) { animation-name: azt-roleta-w-gore; }
.azt-roleta { position: fixed; top: 0; left: 0; right: 0; height: 12px; background: var(--azt-zolc); pointer-events: none; view-transition-name: azt-roleta; }
::view-transition-group(azt-roleta) { animation: none; }
::view-transition-new(azt-roleta) { animation: azt-krawedz-w-dol 560ms steps(7, end) both; }
:root[data-roleta="w-gore"]::view-transition-new(azt-roleta) { animation-name: azt-krawedz-w-gore; }
@keyframes azt-roleta-w-dol { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes azt-roleta-w-gore { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes azt-krawedz-w-dol { from { transform: translateY(-100%); } to { transform: translateY(calc(100vh - 100%)); } }
@keyframes azt-krawedz-w-gore { from { transform: translateY(100vh); } to { transform: translateY(0); } }
.azt-motyw:hover .azt-motyw__napis { text-decoration: underline; text-decoration-color: var(--azt-akcent-tekstu); }
@media (max-width: 63.99rem) { .azt-motyw__napis { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.azt-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.azt-nav a, .azt-naglowek .wp-block-navigation-item__content { color: inherit; font-weight: 600; font-size: 0.9375rem; text-decoration: none; padding-block: 0.25rem; }
.azt-nav a:hover, .azt-naglowek .wp-block-navigation-item__content:hover { text-decoration: underline; text-decoration-color: var(--azt-akcent-tekstu); }
.azt-nav a[aria-current="page"], .azt-naglowek .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-decoration-color: var(--azt-akcent-tekstu); }

/* Hero: pierwsze zdanie jest treścią H1; pozostałe podmienia view.js. */
.azt-puenta__h1 { margin: 0; }
/* Pierwszy ekran: zdanie zajmuje około połowy wysokości okna, więc na laptopie główny przycisk mieści się nad banerem zgody. */
.azt-puenta__h1 { font-size: min(clamp(2.375rem, 1.2rem + 5.2vw, 5.75rem), 9svh); }
section:has(.azt-puenta) { padding-top: clamp(2rem, min(7vw, 6svh), 7rem); }
.azt-puenta { position: relative; }
.azt-puenta__okno { display: block; max-width: 17ch; }
.azt-puenta__zdanie + .azt-puenta__zdanie { display: none; }
.azt-puenta.jest-js .azt-puenta__okno { display: grid; overflow: hidden; }
/* Zdania leżą w jednej komórce; wyrównane do dołu, żeby krótsze zdanie zawsze dotykało nazwy (luka idzie nad nie). */
.azt-puenta.jest-js .azt-puenta__zdanie { display: block; grid-area: 1 / 1; align-self: end; visibility: hidden; }
.azt-puenta.jest-js .azt-puenta__zdanie.jest-aktywne { visibility: visible; animation: azt-zapadka 180ms steps(3, end); }
/* Nazwa musi zmieścić się w jednej linii na każdym ekranie: rozmiar ograniczony szerokością okna. */
.azt-puenta__nazwa { display: block; margin-top: 0.15em; font-size: min(1em, 9vw); white-space: nowrap; color: var(--azt-akcent-tekstu); }
.azt-puenta__pauza {
	margin-top: 1.25rem; background: none; border: 0; padding: 0.25rem 0; cursor: pointer;
	font: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--azt-tekst-2); text-decoration: underline; text-underline-offset: 4px;
}
.azt-puenta__pauza:hover { color: var(--azt-tekst); }
/* Na szerokim ekranie pauza stoi obok zdania, w pustym prawym górnym rogu, a nie nad przyciskami. */
@media (min-width: 64rem) { .azt-puenta__pauza { position: absolute; top: 0; right: 0; margin-top: 0; } }
@keyframes azt-zapadka { from { transform: translateY(45%); } to { transform: none; } }
.azt-hero__pod { max-width: 46ch; color: var(--azt-tekst-2); }

/* „Brzmi znajomo?”: nagłówek nad czterema kaflami z piktogramem (decyzja Daniela 30.09, zamiast zdań z tabliczką .to).
   Ciemny motyw: czarne kafle na papierze, żółty piktogram. Jasny motyw: obrys i czarny piktogram (żółty nigdy na jasnym). */
.azt-brzmi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.azt-brzmi__wstep > :first-child { margin-top: 0; }
.azt-brzmi__wstep > :last-child { margin-bottom: 0; }
.azt-kafle { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
/* Cztery kafle: dwa na dwa na tablecie, jeden rząd dopiero tam, gdzie zdanie mieści się w trzech liniach. */
@media (min-width: 48rem) { .azt-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .azt-kafle { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.azt-kafel {
	display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem;
	background: var(--azt-czern); color: var(--azt-papier); border: 2px solid var(--azt-czern);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; line-height: 1.25;
}
.azt-kafel__ikona { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--azt-zolc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-motyw="jasny"] .azt-kafel { background: transparent; color: var(--azt-czern); }
:root[data-motyw="jasny"] .azt-kafel__ikona { stroke: var(--azt-czern); }
/* Na telefonie piktogram obok zdania: cztery kafle jeden pod drugim nie zajmują całego ekranu. */
@media (max-width: 47.99rem) {
	.azt-kafel { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
	.azt-kafel__ikona { flex: none; width: 2rem; height: 2rem; }
}

/* Obszary: wiersz tekst plus schemat. */
.azt-obszary { display: grid; gap: 0; border-top: 2px solid var(--azt-tekst); }
/* Na Start tylko nazwa i jedno zdanie (schematy są na podstronie Co automatyzujemy). */
.azt-obszar-skrot { display: grid; gap: 0.5rem 3rem; padding-block: 1.75rem; border-bottom: 2px solid var(--azt-kreska); }
.azt-obszar-skrot h3 { margin: 0; }
.azt-obszar-skrot p { margin: 0; max-width: 44ch; color: var(--azt-tekst-2); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
@media (min-width: 60rem) { .azt-obszar-skrot { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; } }

/* Schemat: HTML zamiast SVG, żeby na telefonie tekst nie malał.
   Układ zależy od szerokości pojemnika, nie okna: w wąskiej kolumnie schodzi w pion. */
.azt-schemat-pojemnik { container-type: inline-size; }
.azt-schemat { margin: 0; }
.azt-schemat__tor { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.azt-schemat__wezel { position: relative; border: 2px solid var(--azt-tekst); padding: 0.75rem 1rem; font-weight: 600; line-height: 1.3; }
.azt-schemat__wezel:not(:first-child)::before {
	content: ""; position: absolute; left: 1.5rem; top: calc(-1.5rem - 2px); height: 1.5rem; width: 2px; background: var(--azt-tekst);
}
.azt-schemat__wezel--automat { background: var(--azt-zolc); border-color: var(--azt-zolc); color: var(--azt-czern); }
.azt-schemat__wezel--automat strong { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
@container (min-width: 38rem) {
	.azt-schemat__tor { grid-template-columns: 1fr 1.25fr 1fr; column-gap: 2.5rem; row-gap: 0; align-items: stretch; }
	.azt-schemat__wezel { display: flex; flex-direction: column; justify-content: center; }
	.azt-schemat__wezel:not(:first-child)::before { left: calc(-2.5rem - 2px); top: 50%; width: 2.5rem; height: 2px; }
}

/* Realizacje na Starcie: karta = obszar i jedno zdanie, cała karta prowadzi do opisu.
   Obrys w kolorze tekstu, po najechaniu odwrócone kolory jak przycisk z obrysem. */
.azt-karty { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) { .azt-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.azt-karta {
	display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 1.5rem;
	border: 2px solid var(--azt-tekst); color: inherit; text-decoration: none; transition: background-color 120ms, color 120ms;
}
.azt-karta__zdanie { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; line-height: 1.25; }
.azt-karta:hover { background: var(--azt-tekst); color: var(--azt-tlo); }
.azt-karta:hover .azt-etykieta { color: inherit; }

/* Strona Realizacje: spis pod wstępem, potem jedna sekcja na realizację. */
.azt-spis { list-style: none; margin: 2.5rem 0 0; padding: 0; max-width: 60rem; border-top: 2px solid var(--azt-kreska); }
.azt-spis a { display: grid; gap: 0.25rem 2rem; padding-block: 1rem; border-bottom: 2px solid var(--azt-kreska); color: inherit; text-decoration: none; }
.azt-spis__tytul { font-weight: 700; }
.azt-spis a:hover .azt-spis__tytul { text-decoration: underline; text-decoration-color: var(--azt-akcent-tekstu); }
@media (min-width: 60rem) { .azt-spis a { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; } }
.azt-realizacja__tytul { margin: 0.75rem 0 0; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; }
.azt-realizacja__etykieta { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azt-tekst-2); }
.azt-realizacja__uklad, .azt-realizacja__wynik { display: grid; gap: 1.5rem 3rem; }
.azt-realizacja__uklad { margin-top: 2rem; }
.azt-realizacja__uklad p, .azt-realizacja__wynik p { margin: 0; max-width: 60ch; }
.azt-realizacja__schemat { margin-top: 2.5rem; }
.azt-realizacja__wynik { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--azt-tekst); }
.azt-realizacja__efekt p { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 700; line-height: 1.3; }
.azt-realizacja__uczciwie p { color: var(--azt-tekst-2); }
@media (min-width: 60rem) { .azt-realizacja__uklad, .azt-realizacja__wynik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Kroki: numer ma znaczenie (kolejność), więc zostaje duży. */
.azt-kroki { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--azt-tekst); }
.azt-kroki > li { padding: 1.5rem 0; border-bottom: 2px solid var(--azt-kreska); }
.azt-kroki :is(h2, h3) { margin: 0.75rem 0 0.5rem; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.azt-kroki p { margin: 0; max-width: 60ch; }
.azt-kroki__nr { display: block; font-size: clamp(2.75rem, 1.8rem + 3.5vw, 4.5rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--azt-akcent-tekstu); }
@media (min-width: 60rem) {
	.azt-kroki--poziom { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto 1fr; border-bottom: 2px solid var(--azt-kreska); }
	.azt-kroki--poziom > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
	/* Tytuł przy swoim akapicie: wolne miejsce dwuliniowego sąsiada idzie między numer a tytuł, nie pod tytuł. */
	.azt-kroki--poziom > li > :is(h2, h3) { align-self: end; }
	.azt-kroki--poziom > li { padding: 1.75rem 1.5rem 1.75rem 0; border-bottom: 0; }
	.azt-kroki--poziom > li + li { padding-left: 1.5rem; border-left: 2px solid var(--azt-kreska); }
	.azt-kroki--pion > li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 2rem; align-items: start; padding-block: 2.25rem; }
	.azt-kroki--pion :is(h2, h3) { margin-top: 0; }
}

/* Obszar na podstronie: dwie kolumny pod schematem. */
.azt-obszar__dwa { display: grid; gap: 2rem 3rem; margin-top: 2.5rem; }
.azt-obszar__dwa h3 { font-size: 1.1875rem; margin: 0 0 0.75rem; }
.azt-obszar__dwa ul { margin: 0; padding: 0; list-style: none; }
.azt-obszar__dwa li { padding: 0.5rem 0; border-bottom: 2px solid var(--azt-kreska); }
@media (min-width: 60rem) { .azt-obszar__dwa { grid-template-columns: 1fr 1fr; } }

/* Kontakt. */
.azt-kontakt__uklad { display: grid; gap: 2.5rem; }
/* Kolumny kontaktu zaczynają się na jednej wysokości: bez marginesu flow WordPressa i bez marginesu ostatniego akapitu. */
.azt-kontakt__uklad > * { margin-block: 0; }
.azt-kontakt__bezposrednio > :last-child { margin-bottom: 0; }
@media (min-width: 64rem) { .azt-kontakt__uklad { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
.azt-kontakt__bezposrednio { margin-top: 2rem; padding-top: 1.25rem; border-top: 2px solid var(--azt-kreska); }
.azt-kontakt__bezposrednio a { color: inherit; font-weight: 800; }

/* Formularz. */
.azt-formularz { display: grid; gap: 1.25rem; }
.azt-formularz label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.azt-formularz input[type="text"], .azt-formularz input[type="email"], .azt-formularz input[type="tel"], .azt-formularz textarea {
	width: 100%; font: inherit; color: var(--azt-tekst); background: transparent;
	border: 2px solid var(--azt-pole-ramka); border-radius: 0; padding: 0.7rem 0.8rem;
}
.azt-formularz textarea { resize: vertical; min-height: 7.5rem; }
.azt-formularz input:focus-visible, .azt-formularz textarea:focus-visible { border-color: var(--azt-tekst); outline-offset: 2px; }
/* Na telefonie jedna kolumna wprost: Safari na iOS przy siatce auto-fit z min(100%, ...) i container-type
   zwężał kolumnę do zera i etykiety pól wyboru łamały się po jednej literze. */
.azt-formularz__lista { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); width: 100%; padding: 1.25rem 0; border-block: 2px solid var(--azt-kreska); }
@media (min-width: 48rem) { .azt-formularz__lista { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.azt-formularz fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; width: 100%; }
.azt-formularz legend { font-weight: 800; margin-bottom: 0.6rem; padding: 0; line-height: 1.3; }
/* Gdy lista ma kilka kolumn, legendy mają wspólną wysokość dwóch linii, więc pola wyboru startują z jednej linii. */
@media (min-width: 48rem) { .azt-formularz__lista legend { min-height: 2.6em; } }
.azt-formularz .azt-formularz__czynnosc { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin-bottom: 0.45rem; line-height: 1.35; cursor: pointer; }
.azt-formularz__czynnosc > span { flex: 1 1 auto; min-width: 0; }
.azt-formularz input[type="checkbox"] {
	appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin: 0.05rem 0 0;
	border: 2px solid var(--azt-pole-ramka); border-radius: 0; background: transparent; display: grid; place-content: center; cursor: pointer;
}
.azt-formularz input[type="checkbox"]:checked { background: var(--azt-tekst); border-color: var(--azt-tekst); }
.azt-formularz input[type="checkbox"]:checked::after { content: ""; width: 0.55rem; height: 0.55rem; background: var(--azt-akcent-tekstu); }
.azt-formularz__blad { color: var(--azt-tekst); font-weight: 600; margin: 0.35rem 0 0; }
.azt-formularz__blad::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; background: var(--azt-zolc); outline: 2px solid var(--azt-tekst); margin-right: 0.5em; vertical-align: 0.05em; }
.azt-formularz [aria-invalid="true"] { border-color: var(--azt-tekst); border-width: 3px; }
.azt-formularz__pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.azt-formularz__komunikat { background: var(--azt-zolc); color: var(--azt-czern); padding: 1rem 1.25rem; font-weight: 800; margin: 0 0 1.25rem; }
.azt-formularz__klauzula { font-size: 0.875rem; color: var(--azt-tekst-2); margin: 0; }
.azt-formularz__klauzula a { color: inherit; }
.azt-formularz__podp { font-size: 0.875rem; color: var(--azt-tekst-2); margin: 0.35rem 0 0; }

/* Baner zgody: ten sam wygląd obu przycisków (odmowa tak samo łatwa jak zgoda). */
.azt-zgoda {
	--azt-fokus: var(--azt-czern);
	position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 36rem;
	background: var(--azt-papier); color: var(--azt-czern); border: 2px solid var(--azt-czern); padding: 1.25rem;
}
.azt-zgoda[hidden] { display: none; }
.azt-zgoda p { margin: 0; }
.azt-zgoda a { color: inherit; }
.azt-zgoda__przyciski { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 0.75rem; }
.azt-zgoda__przycisk {
	font: inherit; font-weight: 800; cursor: pointer; padding: 0.65rem 1.25rem; border-radius: 0;
	background: var(--azt-czern); color: var(--azt-papier); border: 2px solid var(--azt-czern);
}
.azt-zgoda__przycisk:hover { background: var(--azt-papier); color: var(--azt-czern); }
/* Zwarty baner: na telefonie przyciski w jednym rzędzie, na komputerze w pustym prawym dolnym rogu hero. */
.azt-zgoda { font-size: 0.875rem; padding: 1rem; }
.azt-zgoda__przyciski > * { flex: 1 1 auto; }
.azt-zgoda__przycisk { padding: 0.55rem 1rem; }
@media (min-width: 64rem) { .azt-zgoda { left: auto; max-width: 24rem; padding: 1rem 1.25rem; } }
.azt-link-przycisk { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* FAQ na rdzeniowym bloku Details. Plus i minus rysowane, nie ze znaków. */
.azt-faq { border-top: 2px solid var(--azt-tekst); }
.azt-faq details { border-bottom: 2px solid var(--azt-kreska); }
.azt-faq summary {
	position: relative; cursor: pointer; list-style: none; display: block;
	padding: 1.25rem 3rem 1.25rem 0; font-weight: 800; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); letter-spacing: -0.01em;
}
.azt-faq summary::-webkit-details-marker { display: none; }
.azt-faq summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.azt-faq summary::before, .azt-faq summary::after {
	content: ""; position: absolute; right: 0.25rem; top: 50%; width: 1.1rem; height: 3px; margin-top: -1.5px; background: var(--azt-tekst);
}
.azt-faq summary::before { transform: rotate(90deg); transition: transform 150ms steps(2, end); }
.azt-faq details[open] summary::before { transform: rotate(0deg); }
.azt-faq details > :not(summary) { margin: 0 0 1.5rem; max-width: 68ch; }

/* Tekst długi (polityka). */
.azt-dlugi { max-width: 70ch; }
.azt-dlugi h2 { font-size: 1.375rem; margin: 2.5rem 0 0.75rem; letter-spacing: -0.01em; }
.azt-dlugi h2 + * { margin-block-start: 0.75rem; }

/* Stopka. */
.azt-stopka { border-top: 2px solid var(--azt-kreska); color: var(--azt-tekst-2); }
.azt-stopka a, .azt-stopka .azt-link-przycisk { color: var(--azt-tekst); }
.azt-stopka .azt-znak { color: var(--azt-tekst); }
.azt-stopka__uklad { display: grid; gap: 1.5rem 3rem; padding-block: 3rem; }
.azt-stopka__uklad p { margin: 0; }
.azt-stopka__o { color: var(--azt-tekst); max-width: 36ch; }
@media (min-width: 60rem) { .azt-stopka__uklad { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.azt-stopka__linki { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* Ruch jak zapadka (assets/js/ruch.js): stan „czeka” dostają tylko elementy poniżej ekranu, gdy działa JS i ruch jest dozwolony. */
/* Brzmi znajomo: tabliczki .to drukowane po kolei, jak z drukarki etykiet. */
@keyframes azt-druk { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Kroki: numery przeskakują po kolei, bo kolejność niesie informację. */
.azt-czeka.azt-kroki .azt-kroki__nr { clip-path: inset(100% 0 0 0); }
.azt-czeka.jest-widoczne.azt-kroki .azt-kroki__nr { animation: azt-licznik 240ms steps(3, end) both; }
.azt-czeka.jest-widoczne.azt-kroki > li:nth-child(2) .azt-kroki__nr { animation-delay: 150ms; }
.azt-czeka.jest-widoczne.azt-kroki > li:nth-child(3) .azt-kroki__nr { animation-delay: 300ms; }
.azt-czeka.jest-widoczne.azt-kroki > li:nth-child(4) .azt-kroki__nr { animation-delay: 450ms; }
@keyframes azt-licznik { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Schemat (główny moment): przewód do automatu, automat się włącza jak lampka, przewód do celu. */
.azt-czeka.azt-schemat .azt-schemat__wezel:not(:first-child)::before { clip-path: inset(0 0 100% 0); }
.azt-czeka.azt-schemat .azt-schemat__wezel--automat { background: transparent; color: var(--azt-tekst); }
.azt-czeka.jest-widoczne.azt-schemat .azt-schemat__wezel:not(:first-child)::before { animation: azt-przewod-pion 180ms steps(3, end) both; }
.azt-czeka.jest-widoczne.azt-schemat .azt-schemat__wezel:last-child::before { animation-delay: 560ms; }
.azt-czeka.jest-widoczne.azt-schemat .azt-schemat__wezel--automat { animation: azt-wlacz 1ms steps(1, end) 280ms both; }
@keyframes azt-przewod-pion { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes azt-przewod-poziom { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes azt-wlacz { from { background: transparent; color: var(--azt-tekst); } to { background: var(--azt-zolc); color: var(--azt-czern); } }
@container (min-width: 38rem) {
	.azt-czeka.azt-schemat .azt-schemat__wezel:not(:first-child)::before { clip-path: inset(0 100% 0 0); }
	.azt-czeka.jest-widoczne.azt-schemat .azt-schemat__wezel:not(:first-child)::before { animation-name: azt-przewod-poziom; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Odpowiedniki stylów wpisanych w makietach (w WordPressie jako klasy). */
.azt-hero__pod { margin-top: 2rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.azt-h1-strony { max-width: 18ch; }
.azt-wstep { margin-top: 1.5rem; max-width: 56ch; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); color: var(--azt-tekst-2); }
.azt-wstep-krotki { max-width: 52ch; }
.azt-akapit { max-width: 62ch; margin-top: 1.25rem; }
.azt-obszar__schemat { margin-top: 2.5rem; }
.azt-dalej { margin-top: 2rem; }
.azt-waski { max-width: 52rem; margin-inline: auto; }
.azt-kontakt { border-top: 2px solid var(--azt-kreska); }
.azt-formularz__wstep { margin: 0; }
.azt-formularz .azt-formularz__wyslij { margin-top: 0; }