/* ==========================================================================
   sections.css — chrome and cross-page section shells, ported 1:1
   Sources: sections/{header,footer,mobile-cta,page-head,cta}.css — each one
   renders on more than one page/template (header+footer+mobile-cta: all 7;
   page-head: 5 pages; cta: 6 of 7, see DEC-055 g for the Contact exception),
   so none of them can be a single block's style.css (PLAN §3).
   Only the custom-property names were mechanically renamed to theme.json
   tokens; selectors, values, media queries and rule order are untouched.
   ========================================================================== */

/* ---- from sections/header.css ------------------------------------------------ */

/* ==========================================================================
   SEKCJA — nagłówek serwisu
   Bez telefonu w pasku: numer obsługiwany po angielsku nie jest
   potwierdzony (USTALENIA, pytania otwarte). Nawigacja bez News/About,
   dopóki nie ma do nich treści.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wp--preset--color--page);
  border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--space-5);
  min-height: var(--wp--custom--layout--header-height); /* 4.5rem, named 22.09: the creator's sticky spec sheet offsets by it */
}

/* --- znak słowny -------------------------------------------------------
   ⚠️ ZAŚLEPKA, nie logo (DEC-020 f). Marka EUROFILTER już istnieje na
   filtrydlaprzemyslu.pl — czekamy na wektor, zanim cokolwiek wycenimy.
   Pisownia „Euro Filter" ze spacją wg maila klienta 16.06; stara strona
   pisze łącznie. Rozjazd nierozstrzygnięty.                              */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .18em;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--fs-lead);
  letter-spacing: -.02em;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--wp--preset--color--text); }
.wordmark__mark { color: var(--wp--preset--color--accent); }

/* --- nawigacja --------------------------------------------------------- */

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--hit--min);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 500;
  font-size: var(--wp--preset--font-size--fs-small);
  color: var(--wp--preset--color--text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease),
              border-color var(--wp--custom--motion--hover) var(--wp--custom--motion--ease);
}
.site-nav__link:hover {
  color: var(--wp--preset--color--accent);
  border-bottom-color: var(--wp--preset--color--accent);
}

/* Strona bieżąca — dwa sygnały naraz, nie sam kolor (WCAG 1.4.1).

   Selektor łapie też `aria-current="true"`, którym oznaczamy pozycję
   NADRZĘDNĄ: na stronie typu bieżącą stroną nie jest „Cartridge Filters",
   ale to w tej gałęzi użytkownik się znajduje. Bez tego siedem stron typu
   nie zaznaczałoby w menu niczego, czyli człowiek traciłby jedyny
   wskaźnik, gdzie jest.                                                  */
.site-nav__link[aria-current] {
  color: var(--wp--preset--color--accent);
  border-bottom-color: var(--wp--preset--color--accent);
}

.site-header__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--space-4); }

/* --- zachowanie na wąskim ekranie --------------------------------------
   Nadal bez hamburgera: każdy schowany odnośnik to odnośnik, którego nikt
   nie kliknie. Zmieniło się co innego — pozycji było cztery, a po dodaniu
   News i About jest sześć, więc poprzedni układ (jeden pas przewijany
   poziomo) po prostu WYCINAŁ „Contact" poza kadr. Zmierzone na 390 px.

   Teraz pozycje ZAWIJAJĄ się w dwa rzędy: wszystkie sześć jest widocznych,
   nic nie wymaga przewijania w bok.

   Sticky zdjęte poniżej 60rem, i to jest właściwa zmiana. Pasek miał tam
   150 px wysokości, czyli 18% ekranu 844 px, zajęte przez cały czas
   czytania. Stały dostęp do akcji przejmuje pasek dolny (mobile-cta.css):
   jeden przycisk, przy kciuku, bez menu i znaku, które przy przewijaniu
   nie są do niczego potrzebne.                                            */

@media (max-width: 59.999rem) {
  .site-header { position: static; }
  .site-header__inner { flex-wrap: wrap; min-height: 0; padding-block: var(--wp--preset--spacing--space-3); }
  .site-nav {
    order: 3;
    width: 100%;
    border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  }
  .site-nav__list {
    flex-wrap: wrap;
    gap: 0 var(--wp--preset--spacing--space-5);
    padding-block: var(--wp--preset--spacing--space-1);
  }
  .site-nav__link { min-height: 2.75rem; white-space: nowrap; }
}

/* ---- from sections/footer.css ------------------------------------------------ */

/* ==========================================================================
   SEKCJA — stopka
   ⚠️ Dane rejestrowe są tu ZAŚLEPKĄ. W obiegu są dwa różne adresy
   (ul. Jana Kroczki 3 vs Fabryczna 6B), brak NIP/KRS i brak potwierdzenia,
   na jaką skrzynkę idą zapytania po angielsku — patrz pytania otwarte
   w USTALENIA.md. Nie przepisywać stąd na produkcję.
   ========================================================================== */

.site-footer {
  background: var(--wp--preset--color--surface);
  border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  padding-block: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-6);
}

.site-footer__grid {
  display: grid;
  gap: var(--wp--preset--spacing--space-7);
}

@media (min-width: 40rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--wp--preset--spacing--space-8); } }

.site-footer__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--fs-small);
  letter-spacing: var(--wp--custom--tracking--micro);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  margin-bottom: var(--wp--preset--spacing--space-4);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-3);
  font-size: var(--wp--preset--font-size--fs-small);
}

.site-footer__list a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}
.site-footer__list a:hover {
  color: var(--wp--preset--color--accent);
  text-decoration: underline;
}

.site-footer__blurb { max-width: 34ch; }

.site-footer address {
  font-style: normal;
  font-size: var(--wp--preset--font-size--fs-small);
  line-height: var(--wp--custom--line-height--body);
  color: var(--wp--preset--color--text-muted);
}

.site-footer__bottom {
  margin-top: var(--wp--preset--spacing--space-7);
  padding-top: var(--wp--preset--spacing--space-5);
  border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--space-4);
  justify-content: space-between;
  font-size: var(--wp--preset--font-size--fs-small);
  color: var(--wp--preset--color--text-muted);
}

/* ---- from sections/mobile-cta.css ---------------------------------------------- */

/* ==========================================================================
   SEKCJA — pasek akcji na dole ekranu (tylko wąski ekran)

   Powstał jako zamiana za sticky nagłówek, nie jako dodatek do niego.
   Nagłówek trzymał na telefonie 150 px pionu przez całe przewijanie i
   wiózł ze sobą znak i sześć odnośników, z których przy czytaniu treści
   nie potrzeba żadnego. Tu jest jedna rzecz: akcja, którą ta strona
   sprzedaje, w miejscu, gdzie leży kciuk.

   Bez JavaScriptu i bez chowania po przewinięciu. Pasek, który pojawia
   się i znika, wymaga progu przewinięcia, a każdy taki próg to zgadywanie
   — a przy jednym przycisku nie ma czego oszczędzać.

   ⚠️ Rezerwuje miejsce pod stopką przez padding na `body`, żeby nie
   zakrywał ostatniego wiersza. To jedyne miejsce w projekcie, gdzie
   sekcja dopisuje coś elementowi globalnemu, i wynika z `position: fixed`
   — element wyjęty z układu nie odepchnie treści sam z siebie.
   ========================================================================== */

.mobile-cta { display: none; }

/* `screen`, bo kartka papieru ma szerokość telefonu: bez tego pasek
   i jego rezerwa pod stopką drukowały się na ostatniej stronie (22.09). */
@media screen and (max-width: 59.999rem) {

  .mobile-cta {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-5);

    /* Pasek gestów iPhone'a zjada dolne ~34 px. Bez tego przycisk siedzi
       dokładnie pod nim i połowa dotknięć trafia w system, nie w stronę. */
    padding-bottom: calc(var(--wp--preset--spacing--space-3) + env(safe-area-inset-bottom, 0px));

    background: var(--wp--preset--color--page);
    border-top: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  }

  .mobile-cta .btn { width: 100%; }

  body { padding-bottom: 6rem; }

  /* Klasę `js` dopisuje sticky-cta.js. Bez skryptu pasek zostaje widoczny
     przez cały czas: gorzej, ale działa — i to jest właściwa kolejność,
     bo ukrywanie sterowane skryptem nie może zabrać akcji komuś, u kogo
     skrypt się nie wykonał.                                              */
  .js .mobile-cta {
    transform: translateY(110%);
    transition: transform var(--wp--custom--motion--expand) var(--wp--custom--motion--ease);
  }
  .js .mobile-cta.is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .mobile-cta { transition-duration: 1ms; }
}

/* ---- from sections/page-head.css ---------------------------------------------- */

/* ==========================================================================
   SEKCJA — nagłówek podstrony (subhero)                            DEC-036

   Wzorzec wspólny dla WSZYSTKICH podstron: zdjęcie jako TŁO całego pasa,
   tekst na nim, po lewej.

   ⚠️ To zmiana wobec pierwszej wersji z 14.08, w której tekst stał OBOK
   obrazu. Decyzja Tymka 15.08. Historia i powód zmiany → README.

   --- Jak rozwiązano zarzut, przez który wariant odpadał za pierwszym razem

   Zarzut brzmiał: tekst na zdjęciu wymaga ciemnej płachty, czyli po cichu
   wprowadza CIEMNE hero na każdej podstronie, wbrew DEC-013 (motyw jasny,
   wybrany po benchmarku 8 na 8), i odbiera nam policzony kontrast, bo ten
   zaczyna zależeć od tego, co akurat jest pod literami.

   Odpowiedź: płachta jest JASNA, nie ciemna, i pod samym tekstem prawie
   nieprzezroczysta. Trzy konsekwencje:

     · motyw zostaje jasny — pas czyta się jak reszta strony,
       a nie jak wstawka z innego serwisu,
     · kontrast wraca do policzonego: pod literami leży praktycznie
       `--color-page`, więc obowiązują wartości zmierzone w design-system,
       a nie „to, co akurat wyszło na zdjęciu",
     · te kadry są jasnymi zdjęciami studyjnymi na kremowym tle —
       ciemna płachta by je po prostu zabiła.

   🔴 CO ZOSTAJE RYZYKIEM: kadr musi mieć spokojne pole po lewej stronie.
   Nasze obrazy są generowane na zamówienie, więc mają. Zdjęcia od Rafała
   Depy powstaną w hali, prawdopodobnie telefonem, i tego nie zagwarantują.
   Dlatego płachta jest tak mocna, jak jest: ma utrzymać czytelność również
   na kadrze, którego nie wybieraliśmy. Do prośby o zdjęcia dopisano
   „poziome, z zapasem po bokach" (img-ai/README.md).
   ========================================================================== */

.page-hero {
  position: relative;
  border-bottom: var(--wp--custom--border--hair) solid var(--wp--preset--color--border);
  background-color: var(--wp--preset--color--surface);
  background-repeat: no-repeat;
  background-size: cover;
  /* Punkt kadrowania po prawej: to tam stoi wyrób, a lewa strona ma
     zostać pusta pod tekst. Nadpisywane per strona, gdy kadr tego wymaga. */
  background-position: right center;
  isolation: isolate;
}

/* Kadr per strona. Obraz jest treścią, nie dekoracją, więc każda podstrona
   dostaje własny — a nie jeden wspólny „pasek nagłówkowy".

   ⚠️ Grafiki generowane AI (DEC-022), wyłącznie makieta.

   Uwaga o `bg-range`: to lustrzane odbicie oryginału. W oryginale wkłady
   maleją w prawo i zajmują całą lewą połowę kadru, czyli dokładnie to pole,
   w którym stoi tekst. Odbicie przenosi puste miejsce na lewo. Wolno je
   odbić, bo w kadrze nie ma żadnego napisu ani asymetrycznego detalu.     */

/* ⚠️ Fixed path depth (2026-09): the prototype nests this file two levels
   deep (css/sections/page-head.css), so "../../img/…" reaches its root
   img/. This theme's sections.css is only one level under assets/, so the
   mechanically-copied "../../" pointed at the theme ROOT's (non-existent)
   img/ and 404'd. Correct depth from assets/css/ is "../img/page-hero/…". */
.page-hero--shipping { background-image: url("../img/page-hero/bg-shipping.jpg"); }
.page-hero--range    { background-image: url("../img/page-hero/bg-range.jpg"); }
.page-hero--flange   { background-image: url("../img/page-hero/bg-flange.jpg"); }
.page-hero--pleats   { background-image: url("../img/page-hero/bg-pleats.jpg"); }

/* About. ⚠️ JEDYNY kadr w serwisie, który nie jest ujęciem studyjnym na
   kremowym tle — to wnętrze odpylni, więc jest ciemniejszy i chłodniejszy
   od pozostałych czterech. Wybór świadomy: About odpowiada na pytanie
   „czy to realny dostawca", a nie „jak wygląda produkt", i tego jedno
   zdjęcie studyjne nie powie.

   Na kontrast to nie wpływa. Płachta pod tekstem trzyma 95–97% gęstości,
   więc pod literami leży praktycznie `--color-page` niezależnie od tego,
   co jest na zdjęciu — po to jest tak mocna. Zmierzone niżej.            */
.page-hero--tubesheet { background-image: url("../img/page-hero/bg-tubesheet.jpg"); }

/* Pas jest szerszy niż proporcja zdjęcia, więc `cover` przycina je w pionie
   i trzeba wybrać, co ucinamy. Wybór jest zawsze ten sam: zostaje GÓRNY
   KOŁNIERZ, bo to jedyna rzecz odróżniająca grupy wkładów od siebie.      */
.page-hero--range { background-position: right 32%; }

/* Kołnierz stoi w środku kadru, więc kadrowanie „do prawej" wypchnęłoby go
   poza ekran. Ten jeden przesuwamy mniej. Pion wysoko, bo przy 42% górny
   kołnierz wychodził ponad krawędź pasa — a on jest całą treścią kadru
   na stronie typu.                                                        */
.page-hero--flange { background-position: 78% 6%; }

/* Płachta. Kierunek poziomy na szerokim ekranie: gęsta po lewej, znika
   przed prawą krawędzią, więc zdjęcie zostaje widoczne tam, gdzie nie ma
   liter. `-webkit-` niepotrzebne, gradienty są wspierane od dawna.        */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Kolor płachty NIE jest wpisany literałem — to `--color-page` rozcieńczone
     przezroczystością przez `color-mix`. Dzięki temu zmiana tła strony
     w tokenach przechodzi też tutaj i pas nie zaczyna świecić inną bielą. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--wp--preset--color--page) 97%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--page) 93%, transparent) 55%,
    color-mix(in srgb, var(--wp--preset--color--page) 80%, transparent) 100%
  );
}

/* Przystanki NIE są dobrane na oko. Kolumna tekstu kończy się na ok. 48%
   szerokości pasa (kontener 75rem wyśrodkowany, blok tekstu 34rem), więc
   płachta trzyma pełną gęstość dokładnie do tego miejsca i dopiero potem
   otwiera się na zdjęcie.

   Zmierzone przez próbkowanie pikseli tła pod literami i złożenie ich
   z gradientem (6 886 próbek, okno 1440 px):
     · przystanki 0 / .34 / .58 / .82 → najgorszy przypadek 4,77:1,
       czyli AA przechodzi, ale bez zapasu,
     · przystanki poniżej → 5,97:1 na karcie produktu, 6,03:1 na Contact,
       5,72:1 na stronie typu, 5,92:1 na telefonie.
   Dla odniesienia na czystym tle strony: tekst 17,1:1, pomocniczy 6,33:1. */
@media (min-width: 60rem) {
  .page-hero::before {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--wp--preset--color--page) 97%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--page) 95%, transparent) 48%,
      color-mix(in srgb, var(--wp--preset--color--page) 55%, transparent) 70%,
      color-mix(in srgb, var(--wp--preset--color--page) 10%, transparent) 88%,
      transparent 100%
    );
  }
}

/* Wysokość z treści, nie ustalona z góry — nagłówek Contact ma trzy wiersze,
   a strony typu jeden. `min-height` pilnuje tylko, żeby pas nie zapadł się
   do wysokości samego tekstu i zdjęcie zostało zdjęciem, a nie paskiem.

   Wartości na wąskim ekranie są CIAŚNIEJSZE niż rytm sekcji i to jest
   świadome odstępstwo, poparte pomiarem (14.08, okno 500×844): przy pełnym
   rytmie pierwsza karta kanału na Contact lądowała poza pierwszym ekranem,
   a numer telefonu 1,3 ekranu w dół. Na stronie, na którą połowa ludzi
   wchodzi z telefonu właśnie po to, żeby zadzwonić, to za głęboko.        */

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-4);
  min-height: 17rem;
  justify-content: center;
  padding-block: var(--wp--preset--spacing--space-7);
}

@media (min-width: 60rem) {
  .page-hero__inner {
    min-height: 24rem;
    padding-block: var(--wp--preset--spacing--space-8);
    /* Tekst zajmuje lewą część pasa, żeby nie wchodził w obszar, w którym
       płachta już przepuszcza zdjęcie.                                    */
    max-width: 34rem;
  }
}

/* Przyciski w pasie (dziś tylko 404). Dodatkowy odstęp nad nimi, bo akcja
   to inna warstwa niż tekst, a `gap` pasa jest liczony pod tekst.        */
.page-hero__actions { padding-top: var(--wp--preset--spacing--space-3); }

/* 404 to sam pas, więc pas przejmuje całą wysokość, którą `main` dostaje
   od stopki dociśniętej do dołu (base.css, `body`). Bez tego nadmiar
   zostawał gołym tłem między pasem a stopką.                              */
.error404 main { display: flex; flex-direction: column; }
.error404 .page-hero { flex: 1 0 auto; display: flex; align-items: center; }

/* ⚠️ `--fs-page` (48 px), nie `--fs-1` (35 px) — od 17.08, DEC-044.
   Po powiększeniu Home do 64 px podstrony na 35 px robiły z serwisu dwie
   klasy stron. Kolumna tekstu ma tu `max-width: 34rem`, a płachta pod nią
   trzyma gęstość do 48% szerokości pasa, więc powiększenie nie wypycha
   liter poza obszar, w którym kontrast był mierzony (DEC-036).           */
.page-hero__title {
  font-size: var(--wp--preset--font-size--fs-page);
  line-height: 1.06;
  letter-spacing: -.016em;
  text-wrap: balance;
}

/* Wiodąca linijka na tle zdjęcia: ten sam stopień co `.lead`, ale kolor
   tekstu głównego zamiast pomocniczego. Szary na zdjęciu traci to, co miał
   dawać — odróżnienie od nagłówka — a zyskuje wrażenie wyblakłego.       */
.page-hero__lead {
  font-size: var(--wp--preset--font-size--fs-lead);
  line-height: var(--wp--custom--line-height--lead);
  color: var(--wp--preset--color--text);
  max-width: 42ch;
}

/* ---- from sections/cta.css ------------------------------------------------------ */

/* ==========================================================================
   SEKCJA — CTA zamykające                                         H8 mapy
   Jeden przycisk główny w rozmiarze lg. Telefon jako przycisk cichy —
   i tylko dlatego, że w prototypie; na produkcji numer zostaje wyłącznie
   po potwierdzeniu, że jest obsługiwany po angielsku.
   ========================================================================== */

/* PEŁNY AKCENT od 17.08. Było: `--color-accent-soft`, czyli bardzo blady
   błękit.

   Powód nie jest „chciałem mocniej". Zmierzone na Home przed zmianą: akcent
   występował na CZTERECH elementach i wszystkie cztery były przyciskiem albo
   odnośnikiem. Strona była więc faktycznie achromatyczna — beż, biel, szarość
   — a jedyny pas z kolorem był tak blady, że w skali całej strony nie czytał
   się jako zdarzenie. Przy palecie dobranej z takim namysłem (DEC-014: petrol
   leży 30,7° od najbliższego akcentu konkurencji) kolor nieużywany jest
   argumentem wyrzuconym do kosza.

   Ten pas jest teraz JEDYNĄ cezurą kolorystyczną w serwisie i stoi na końcu
   strony, w miejscu jedynej funkcji zarobkowej (DEC-021).

   ⛔ Nie łamie DEC-013. Motyw jasny to nie zakaz mocnego pasa — to decyzja
   o tym, że TREŚĆ TECHNICZNA stoi na jasnym tle, bo tabele parametrów czyta
   się na jasnym. W tym pasie nie ma ani jednej liczby.

   Kontrasty zmierzone w przeglądarce po zmianie, nie przepisane z tokenów:
   tytuł 5,98:1 · nota 5,98:1 · biel przycisku wobec pasa 5,98:1 · petrolowy
   tekst wewnątrz przycisku 5,98:1 · telefon 5,98:1. Próg AA 4,5:1.

   Wszystkie pięć wartości są identyczne i to nie jest błąd pomiaru: na tym
   pasie występują dokładnie DWA kolory, biel i petrol, więc każda para
   tekst-tło jest tą samą parą. Jednorodność jest tu skutkiem palety
   dwukolorowej, nie zaokrągleniem.                                        */
.cta {
  background: var(--wp--preset--color--accent);
  border-block: var(--wp--custom--border--hair) solid var(--wp--preset--color--accent);
  color: var(--wp--preset--color--text-on-accent);
}

.cta__title,
.cta__note { color: var(--wp--preset--color--text-on-accent); }

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--space-5);
}

@media (min-width: 60rem) {
  .cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--space-7);
  }
}

/* Tytuł i zdanie o kopii specyfikacji są jedną kolumną, nie dwoma
   dziećmi pasa — inaczej od 60rem rozjeżdżają się na trzy kolumny
   i notka ląduje między nagłówkiem a przyciskiem.                       */
.cta__body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-3);
}

.cta__title {
  font-size: var(--wp--preset--font-size--fs-2);
  line-height: var(--wp--custom--line-height--2);
  max-width: 30ch;
}

/* ⚠️ Bez `--color-text-muted`. Na pełnym akcencie „przygaszony szary" daje
   2,1:1 i jest nieczytelny — na jasnym tle ten sam token daje 6,33:1.
   Rozróżnienie ważności niesie tu STOPIEŃ PISMA, nie kolor.               */
.cta__note {
  font-size: var(--wp--preset--font-size--fs-small);
}

.cta__actions { flex: none; }