/* ══════════════════════════════════════════════════════════════════════════
   SKALA — jedno miejsce na rozmiary tekstu i rytm pionowy
   ──────────────────────────────────────────────────────────────────────────
   Ten plik ładuje się OSTATNI (patrz inc/assets.php), już po `strony/*.css`.
   To jest jego cała sztuczka: wcześniej warstwa typografii siedziała
   w `motyw.css`, czyli PRZED arkuszami podstron, i musiała wygrywać samym
   `!important`. Część reguł i tak przegrywała, bo komponent bywa bardziej
   szczegółowy (`.in-services-list .in-card-b h3`). Teraz kolejność jest po
   naszej stronie, a `!important` zostaje tylko tam, gdzie komponent ma
   większą szczegółowość.

   ⚠️ NIE DOKŁADAJ rozmiarów tekstu w innych plikach. Jak coś jest nie tej
   wielkości — dopisz selektor do właściwej grupy TUTAJ. To był cały problem:
   ta sama skala żyła w trzech miejscach (koniec `szkielet.css`, dwa bloki
   w `motyw.css`) i każde miejsce mówiło co innego.

   Skala jest opisana w notatki/skala-typografii.md.
   21.08.2026, po zgłoszeniu Bartka i klientki
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── stopnie pisma ───────────────────────────────────────────────────────
       Skala ustalona przez Bartka 22.08.2026, krok ~1,25. Wcześniej podstawą
       było 20 px; zeszliśmy do 16 i całą drabinkę policzyliśmy od nowa.

       Druga korekta tego samego dnia: pierwsze podejście dawało 44/36/28,
       czyli nagłówek sekcji 2,25 raza większy od tekstu. Przy podstawie 20 px
       ta sama h2 była 1,8 raza większa i dlatego wcześniej nie kłuła — obniżyliśmy
       podstawę o jedną piątą, a nagłówki zostały. Teraz h2 jest 1,75 raza
       większe od tekstu, czyli mniej więcej tyle, ile daje domyślna typografia
       treści w Tailwindzie albo dokumentacja GitHuba. */
    --t-body: 16px;
    --t-body-lh: 1.6;

    --t-h1: 36px;   --t-h1-lh: 1.15;
    --t-h2: 28px;   --t-h2-lh: 1.2;
    --t-h3: 22px;   --t-h3-lh: 1.25;
    --t-h4: 19px;   --t-h4-lh: 1.35;
    --t-h5: 17px;   --t-h5-lh: 1.4;
    --t-h6: 16px;   --t-h6-lh: 1.4;

    /* Stopnie poniżej tekstu. Skala Bartka ich nie wymienia, bo dotyczy
       nagłówków i prozy — ale serwis ma jeszcze podpisy i plakietki, więc
       drabinka schodzi dalej tym samym krokiem: 16 → 14 → 12. Dokładnie tak
       było w `tokeny.css` prototypu, zanim rozjechało się to na trzy wersje. */
    --t-small: 14px;   /* drobny druk: notki, podpisy, zgody                 */
    --t-micro: 12px;   /* wersaliki: plakietki, etykiety pól, metadane       */
    /* Zdanie wprowadzające sekcję ma DOKŁADNIE stopień tekstu ciągłego.
       Wcześniej stało o poziom wyżej i wychodziło z tego drugie „prawie body",
       o którym trzeba było pamiętać przy każdej zmianie skali. Bartek,
       22.08.2026: lead nie może mieć innego rozmiaru niż body. Odróżnia go
       teraz kolor i odstęp, nie wielkość. */
    --t-lead: var(--t-body);
    --t-lead-lh: var(--t-body-lh);

    /* Nazwy z prototypu. Nikt się do nich nie odwoływał, bo komponenty miały
       rozmiary wpisane na sztywno — trzymamy je zgodne ze skalą, żeby nie
       były drugą, nieaktualną wersją prawdy. */
    --font-size-body: var(--t-body);
    --font-size-small: var(--t-small);
    --font-size-micro: var(--t-micro);

    /* Hero zostaje poza skalą: tam stopień jest elementem kompozycji, a nie
       tekstem do czytania. Jedna wartość dla WSZYSTKICH wariantów hero —
       przed ujednoliceniem ten sam nagłówek strony chodził w siedmiu skalach
       (clamp do 112, 94, 88, 76, 62, 60 i 54 px), zależnie wyłącznie od tego,
       z którego ekranu prototypu przyjechał komponent. */
    /* ⚠️ HERO JEST W SKALI, nie obok niej — decyzja Bartka z 24.08.2026:
       „i co z tym h1? powinno mieć 36px".

       Historia tego tokena warta zapamiętania: prototyp dawał ten sam nagłówek
       strony w SIEDMIU różnych skalach (clamp do 112, 94, 88, 76, 62, 60 i 54
       px), zależnie wyłącznie od tego, z którego ekranu przyjechał komponent.
       Najpierw ujednoliciliśmy to do jednej wartości płynnej (36→64 px), a dziś
       token po prostu wskazuje na `--t-h1`. Zostaje osobną nazwą, bo w hero
       nadal odwołuje się do niego kilka reguł — ale wartość jest już jedna. */
    --t-h1-hero: var(--t-h1);

    /* Waga nagłówków. Chcesz lżejsze hero? To jest jedno miejsce do zmiany. */
    --t-waga-naglowka: 500;
    /* h2 osobno: przy 36 px na kroju szeryfowym siódemka robiła z nagłówka
       sekcji plamę cięższą od hero. Bartek, 22.08.2026. */
    /* ⚠️ WAGA SPADA RAZEM Z HIERARCHIĄ: h1 700, h2 600, reszta 500.
       Decyzja Bartka 24.08.2026, w dwóch krokach: najpierw „waga 700 na h3 to
       nie do końca odpowiednia, wszędzie powinno być 500", potem „na h2 możemy
       dać 600 a h3 500". Dzięki temu nagłówek sekcji jest cięższy od tytułu
       kafelka nie tylko stopniem, ale i grubością — oko układa je w kolejności
       bez czytania.

       Wcześniej h1 i h3–h6 stały wspólnie na 700, a tylko h2 na 500 — czyli
       nagłówek sekcji był LŻEJSZY od tytułu kafelka pod nim. Stąd wrażenie,
       że tytuły kafelków krzyczą.

       `--t-waga-naglowka` obsługuje h3–h6 ORAZ wszystkie grupy wyjątków niżej
       (stopka, panel w hero, okna modalne, fakty przy portrecie). */
    /* ⚠️ Przyciski mają WŁASNĄ wagę, niezależną od nagłówków. Do 24.08.2026
       brały `--t-waga-naglowka` i przez to zeszły z 700 na 500 razem z h3 —
       zauważone przez Bartka tego samego dnia („usunąłeś z przycisków
       weight?"). Etykieta przycisku nie jest nagłówkiem i nie ma powodu, żeby
       chodziła za skalą treści. 600 to wartość z prototypu: wyraźnie ponad
       tekstem ciągłym (400), a bez ciężaru dawnej siódemki. */
    --t-waga-przycisku: 600;
    --t-waga-h1: 700;
    --t-waga-h2: 600;
    --t-btn: 15px;     /* etykieta przycisku                                */
    --t-input: 16px;   /* pole formularza — poniżej 16 px iOS przybliża     */

    /* ── rytm pionowy ───────────────────────────────────────────────────── */
    --in-rytm: 72px;        /* wyściółka sekcji: góra i dół                 */
    --in-rytm-duzy: 96px;   /* sekcje, którym zostawiamy więcej powietrza   */
}

/* ══════════════════════════════════════════════════════════════════════════
   TELEFON I TABLET — próg 768 px
   ──────────────────────────────────────────────────────────────────────────
   Stopień tekstu zostaje 16 px: to skala serwisu, nie tryb telefonu. Schodzą
   tylko nagłówki, bo 44 px w kolumnie szerokiej na 350 px zjada trzy wiersze.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ Hero między tabletem a małym laptopem. Szpalta na nagłówek jest tam
   znacznie węższa niż na desktopie (na /konsultacja/ ma 323 px przy 900 px
   okna, bo obok stoi panel z liczbami), a `--t-h1-hero` liczone z 4,6vw dawało
   41 px. „Konsultacja numeroterapeutyczna." to jedno niepodzielne słowo —
   przy tym stopniu potrzebowało 400 px i wyjeżdżało poza kadr. 24.08.2026 */
/* ⚠️ Był tu osobny próg na 1100 px, ściągający hero do 28–40 px, bo przy
   4,6vw nagłówek nie mieścił się w wąskiej szpalcie obok panelu z liczbami.
   Odkąd hero jest w skali treści (36 px, na telefonie 30), nie ma czego
   ściągać — próg zniknął. 24.08.2026 */

/* Przenoszenie wyrazów w nagłówku hero — na KAŻDEJ szerokości, nie tylko na
   telefonie. „Konsultacja numeroterapeutyczna." to jedno niepodzielne słowo
   i wychodzi poza szpaltę w dwóch różnych miejscach: przy 768–900 px kolumna
   ma 219 px, a wyraz potrzebuje 270 px nawet przy stopniu 28 px — ale też
   dokładnie przy 1440 px, gdzie stopień dobija do maksimum 64 px i wyraz chce
   618 px przy kolumnie szerokiej na 612. Sześć pikseli, ale ucięte.
   Przeglądarka dzieli po polsku (strona ma `lang="pl-PL"`), a `break-word`
   jest zapasem na wypadek braku słownika. 24.08.2026 */
html body :is(
    .in-hero h1,
    .in-hero-sub h1,
    .in-hero-purple h1,
    .in-hero-purple-kpis h1,
    .in-contact-hero h1,
    .in-xh-h
) {
    hyphens: auto;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    :root {
        --t-h1: 30px;
        --t-h2: 24px;
        --t-h3: 20px;
        --t-h4: 18px;
        --t-h5: 16px;
        --t-h6: 16px;
        --t-btn: 16px;
        --t-input: 16px;
    }
}

/* Rytm pionowy ma własne progi — przerwa między sekcjami zależy od wysokości
   ekranu, nie od stopnia pisma, więc te dwie rzeczy nie muszą łamać się razem. */
@media (max-width: 1080px) {
    :root { --in-rytm: 60px; --in-rytm-duzy: 76px; }
}
@media (max-width: 600px) {
    :root { --in-rytm: 36px; --in-rytm-duzy: 48px; --t-body-lh: 1.55; }
}

/* Podstawa dokumentu. `szkielet.css` ustawia tu 16 px, a na telefonie 14 px —
   ta reguła jest w tym samym stopniu szczegółowa, więc wygrywa kolejnością
   (skala ładuje się jako ostatnia). Wszystko, co nie ma własnego rozmiaru,
   dziedziczy właśnie stąd. */
html body {
    font-size: var(--t-body);
}

/* ── 1. Tekst ciągły ───────────────────────────────────────────────────────
   Wypisane komponent po komponencie, a NIE jako globalne `p { font-size }` —
   globalna reguła złapałaby podpisy, etykiety cen i metadane, które mają być
   mniejsze. Lista jest długa z tego samego powodu, dla którego w ogóle
   istnieje: każdy komponent przyjechał z prototypu z własną wartością wpisaną
   na sztywno i żaden nie sięgał po token. */
html body :is(
    .in-p,
    .in-card-b p,
    .in-card p,
    .in-media p,
    .in-list li,
    .in-step-b p,
    .in-pn-it p:not(.in-pn-n),
    .in-zd-it p:not(.in-zd-n),
    .in-st-it p,
    .in-fd-facts li,
    .in-fd-facts p,
    .in-fd-body .in-p,
    .in-fd-role,
    .in-check li,
    .in-bullets li,
    .in-showcase-steps li,
    .in-showcase-p,
    .in-fq-a,
    .in-fq-body p,
    .in-faq-b .in-p,
    .in-art-body p,
    .in-art-body li,
    .in-article .in-p,
    .in-two .in-p,
    .in-split-tresc .in-p,
    .in-note .in-p,
    .in-person-b .in-p,
    .in-sec > .in-wrap > .in-p,
    .in-pr-d,
    .in-prod-b p,
    .in-contact-card p,
    .in-ct-item-v,
    .in-ebook-opis p,
    .in-ebook-korzysc p,
    .in-webinar-opis p,
    .in-rez-osoba-opis,
    /* Opis ścieżki gry siedzi w elemencie, który gdzie indziej trzyma samo
       „cena obejmuje:" — tutaj to pełne zdanie, więc należy do tekstu ciągłego. */
    .in-game-paths-grid .in-price-n,
    /* Testy bez punktacji (27.08.2026): wybór testu, sam test i strona
       z pełną analizą. Wpisane TUTAJ, a nie w motyw.css — rozmiary tekstu
       mają jedno miejsce. */
    .in-tst-lead,
    .in-tst-tresc,
    .in-tst-tresc p,
    .in-an-wstep,
    .in-an-wybor,
    /* ⚠️ TYLKO akapity bez klasy. Etykieta i nazwa wzorca też są `p` wewnątrz
       `.in-an-wzorzec`, a ta grupa ma `!important` — bez `:not([class])`
       zjadała im stopień i obie wychodziły na 16 px zamiast 12 i 19.
       Złapane pomiarem 27.08.2026. */
    .in-an-wzorzec p:not([class]),
    .in-an-tresc p,
    .in-an-tresc li
) {
    font-size: var(--t-body) !important;
    line-height: var(--t-body-lh) !important;
}


/* ── 2. Lead ───────────────────────────────────────────────────────────────
   Jeden stopień niezależnie od tego, czy stoi nad sekcją, w pasku CTA, czy
   nad listą pytań. Zanim to powstało, te trzy miejsca miały 20, 17 i 18 px. */
/* ⚠️ `.in-sec > .in-wrap > .in-lead` NIE jest tu dla ozdoby. `:is()` bierze
   szczegółowość od SWOJEGO NAJBARDZIEJ SZCZEGÓŁOWEGO argumentu — a lista na
   końcu `szkielet.css`, która wbija leadowi 14 px na telefonie, ma w środku
   `.in-media p` (klasa + element). Bez tego wiersza cała nasza grupa była
   o jeden element mniej szczegółowa i lead JAKO JEDYNY zostawał przy 14 px,
   mniejszy od akapitu pod sobą. Sprawdzone pomiarem 21.08.2026. */
html body :is(
    .in-lead,
    .in-sec > .in-wrap > .in-lead,
    .in-cb-p,
    .in-fq-sub,
    .in-qz-lead
) {
    font-size: var(--t-lead) !important;
    line-height: var(--t-lead-lh) !important;
}

/* ── 3. Nagłówki ───────────────────────────────────────────────────────────
   Od 22.08.2026 wystarczą zwykłe selektory znacznikowe. Wcześniej ta sekcja
   była listą kilkudziesięciu selektorów z `!important`, bo każdy komponent
   przyjechał z prototypu z własnym rozmiarem — ta sama `h2` miała 78 px
   w jednym module i 28 px w drugim. Teraz `tools/wytnij-skale.py` zdejmuje
   te rozmiary z arkuszy generowanych (84 deklaracje), więc jedyne, co mówi
   o wielkości nagłówka, stoi tutaj.

   `font-weight` nadal z `!important`: `szkielet.css` ma regułę
   `html body :is(h1, h2) { font-weight: 400 !important }` i bez tego
   nagłówki wracałyby do wagi 400.
   ────────────────────────────────────────────────────────────────────────── */
html body h1 { font-size: var(--t-h1); line-height: var(--t-h1-lh); font-weight: var(--t-waga-h1) !important; }
html body h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); font-weight: var(--t-waga-h2) !important; }
html body h3 { font-size: var(--t-h3); line-height: var(--t-h3-lh); font-weight: var(--t-waga-naglowka) !important; }
html body h4 { font-size: var(--t-h4); line-height: var(--t-h4-lh); font-weight: var(--t-waga-naglowka) !important; }
html body h5 { font-size: var(--t-h5); line-height: var(--t-h5-lh); font-weight: var(--t-waga-naglowka) !important; }
html body h6 { font-size: var(--t-h6); line-height: var(--t-h6-lh); font-weight: var(--t-waga-naglowka) !important; }

/* Elementy, które GRAJĄ rolę nagłówka, ale nie są znacznikiem h*. Prototyp
   używa ich zamiennie z h2/h3, więc muszą siedzieć na tych samych stopniach —
   inaczej „Co znajdziesz w książce?" byłoby innej wielkości niż sąsiedni
   nagłówek sekcji tylko dlatego, że w kodzie jest `div`, a nie `h2`. */
html body :is(.in-media-h, .in-fd-title, .in-faq-h, .in-ct-h, .in-cb-h, .in-fq-h) {
    font-size: var(--t-h2);
    line-height: var(--t-h2-lh);
    font-weight: var(--t-waga-h2) !important;
}
/* Tytuł kafla z testem gra rolę h3, choć w kodzie jest `h2` — na stronie
   wyboru testów nagłówkiem sekcji jest „Bezpłatne testy", a kafle są pod nim.
   27.08.2026 */
html body :is(.in-h3, .in-pk-h3, .in-tw-kafel h2) {
    font-size: var(--t-h3);
    line-height: var(--t-h3-lh);
    font-weight: var(--t-waga-naglowka) !important;
}
/* Pytanie w FAQ jest klikalnym podsumowaniem, nie nagłówkiem sekcji. */
html body :is(.in-faq-i summary, .in-fq-it > summary) {
    font-size: var(--t-h4);
    line-height: var(--t-h4-lh);
}
/* Nazwa dominującego wzorca w analizie — akapit w roli nagłówka czwartego
   stopnia. 27.08.2026 */
html body :is(.in-an-wzorzec-n, .in-an-druk-t) {
    font-size: var(--t-h4);
    line-height: var(--t-h4-lh);
}

/* HERO — jeden stopień dla KAŻDEGO wariantu, poza skalą treści.
   `!important`, bo rozmiary hero zostają w komponentach (są na liście
   wyjątków `wytnij-skale.py`) i mają większą szczegółowość. */
html body :is(
    .in-hero h1,
    .in-hero-sub h1,
    .in-hero-purple h1,
    .in-hero-purple-kpis h1,
    .in-hero-purple--light h1,
    .in-hero-purple--foto h1,
    .in-contact-hero h1,
    .in-qz-copy h1,
    .in-ebook-h1,
    .in-webinar-head h1,
    .in-xh-h
) {
    font-size: var(--t-h1-hero) !important;
    /* Hero to nagłówek strony, więc bierze wagę h1, a nie wagę „reszty". */
    font-weight: var(--t-waga-h1) !important;
    /* Interlinia też ze skali. Przy 64 px hero potrzebowało ciasnego 1,06;
       przy 36 px ta sama wartość skleja wiersze. */
    line-height: var(--t-h1-lh) !important;
    /* Odstęp liter też jeden. Ten sam nagłówek strony miał -.02em na
       /konsultacja/, -.058em na /o-nas/ i -.02em na kontakcie — przy 64 px
       to ponad dwa piksele na literę, widoczne przy przechodzeniu między
       stronami. */
    /* Odstęp liter zostaje jeden dla wszystkich wariantów hero — przedtem ten
       sam nagłówek miał -.02em na /konsultacja/, -.058em na /o-nas/ i -.02em
       na kontakcie. Przy 36 px trzymamy go lekko, bo ciasny trekking widać
       dopiero przy dużych stopniach. */
    letter-spacing: -.01em !important;
}

/* Nagłówek panelu w hero („Jak pracujemy") to podtytuł KARTY, nie nagłówek
   sekcji — w skali sekcji zjadał na telefonie pół ekranu. */
html body .in-hero-panel h2 {
    font-size: var(--t-h5) !important;
    line-height: var(--t-h5-lh) !important;
    /* panel w hero to podtytuł karty — zostaje przy pełnej wadze */
    font-weight: var(--t-waga-naglowka) !important;
}

/* ── Nagłówki interfejsu ───────────────────────────────────────────────────
   Szuflada koszyka, okna modalne, panel rezerwacji, pudełka zamówienia
   i konta. To podtytuły kart, nie nagłówki sekcji — w skali sekcji rozpychały
   szufladę i okna na pół ekranu. */
html body :is(
    .in-cart-h,
    .in-md-box,
    .in-ofgrup-okno,
    .in-rez-panel-h,
    .in-404-naglowek,
    .in-zam-box,
    .in-acc-col,
    .in-qz-done
) h2 {
    font-size: var(--t-h5);
    line-height: var(--t-h5-lh);
}

/* ── PODŁOGA NAGŁÓWKÓW ─────────────────────────────────────────────────────
   „Jak h3 może mieć mniejszy font od body?" — Bartek, 21.08.2026. Nie może
   i to jest tu regułą. Ciasne konteksty (kolumna stopki, pasek boczny przy
   artykule, wiersz panelu w hero) nie dostają pełnego stopnia h3, tylko
   dokładnie tyle co tekst — ale nigdy mniej.

   ⚠️ Stopka razem ze stopniem traci wersaliki i rozstrzelenie: „NUMEROTERAPIA"
   w tej wielkości z odstępem .16em nie mieści się w kolumnie. */
html body :is(
    .in-art-rail .in-card-b h3,
    .in-art-rail .in-h3,
    .in-rail-cta h3,
    .in-rail-cta h2,
    .in-fd-facts h3,
    .in-hero-panel-item h3
) {
    font-family: var(--font-heading, 'Baloo 2', sans-serif) !important;
    font-size: var(--t-h6) !important;
    line-height: var(--t-h6-lh) !important;
    font-weight: var(--t-waga-naglowka) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* ⚠️ Nagłówki kolumn stopki („Oferta", „Numeroterapia", „Instytut", „Prawne")
   NIE mają już narzuconego stopnia — decyzja Bartka 24.08.2026: „reszta bez
   nadpisywania font-size". Biorą to, co daje im skala i komponent.

   Zostaje sam reset wersalików i rozstrzelenia, bo to nie jest stopień pisma:
   „NUMEROTERAPIA" kapitalikami z odstępem .16em nie mieści się w kolumnie
   stopki przy ŻADNEJ wielkości. */
html body :is( .in-ftr h3, .in-ftr .in-ftr-kol-h ) {
    letter-spacing: normal;
    text-transform: none;
}

/* ── 4. Drobny druk ────────────────────────────────────────────────────────
   Notki, podpisy, zgody. Ma być mniejszy od tekstu ciągłego, ale nadal do
   przeczytania — na telefonie 13 px na lawendowym tle było nie do przejścia. */
/* Panel w hero to karta pomocnicza obok nagłówka strony, a nie kolumna do
   czytania — w pełnym stopniu tekstu ciągłego rozpychał się na cały ekran
   telefonu i zjadał hero. Decyzja Bartka 21.08.2026. */
html body .in-hero-panel-item p {
    font-size: var(--t-small) !important;
    line-height: 1.55 !important;
}

/* ⚠️ `.in-hero-note` w wariancie hero na fiolecie NIE jest drobnym drukiem.
   Od 24.08.2026 renderuje tam DRUGI AKAPIT wprowadzenia (wytyczne mentoringu
   dają w hero dwa), więc musi wyglądać jak pierwszy. W pozostałych wariantach
   to nadal notka pod leadem i zostaje drobnym drukiem — dlatego wyjątek jest
   zawężony klasą wariantu, a nie wpisany do grupy niżej. */
html body .in-hero-purple .in-hero-note {
    font-size: var(--t-body) !important;
    line-height: var(--t-body-lh) !important;
}

html body :is(
    .in-form-note,
    .in-hero-note,
    .in-cal-note,
    .in-ts-note,
    .in-qz-note,
    .in-qz-small,
    .in-zam-note,
    .in-koszyk-note,
    .in-rez-info,
    .in-404-data,
    .in-showcase-media figcaption,
    .in-gal figcaption,
    .in-fp-it figcaption span,
    .in-contact-socials a,
    .in-methods,
    .in-ig-chip,
    .in-tm-r,
    .in-acc-lead,
    .in-acc-chk,
    .in-ts-chk,
    .in-zam-chk,
    .in-dd-d,
    /* Zdanie w kafelku CTA w szynie artykulu. Rozmiar siedzial dotad wprost
       w `komponenty.css` i jako jedyny w tym module wymykal sie skali —
       zgloszone przez Bartka 27.08.2026. */
    .in-rail-cta p,
    /* Testy bez punktacji (27.08.2026): wybór testu, sam test i strona
       z pełną analizą. Wpisane TUTAJ, a nie w motyw.css — rozmiary tekstu
       mają jedno miejsce. */
    .in-tst-pasek-h,
    .in-tst-h,
    .in-tst-limit,
    .in-tst-pole span,
    .in-tst-zgoda,
    .in-tst-pole-blad,
    .in-tst-blad,
    .in-tst-drobne,
    .in-tw-opis,
    .in-tw-notatka,
    .in-an-meta,
    .in-an-pomost,
    .in-an-stopka
) {
    font-size: var(--t-small) !important;
    line-height: 1.5 !important;
}

/* ── 5. Wersaliki: plakietki, etykiety, metadane ───────────────────────────
   Wszystko, co jest ETYKIETĄ, a nie tekstem: `text-transform: uppercase`
   plus rozstrzelenie. Rozmiaru nie ruszamy w dół — tu chodzi tylko o to,
   żeby cała grupa miała jeden stopień zamiast czterech (11, 12, 13 i 14 px
   z różnych ekranów prototypu). */
html body :is(
    .in-eyebrow,
    .in-ig-eyebrow,
    .in-showcase-eyebrow,
    .in-services-eyebrow,
    .in-axis-eyebrow,
    .in-game-paths-eyebrow,
    .in-pr-eyebrow,
    .in-qz-eyebrow,
    .in-quote-k,
    .in-price-l,
    .in-note-t,
    .in-ba-label,
    .in-ct-item-l,
    .in-ct-side-h,
    .in-cal-th,
    .in-cal-dow span,
    .in-person-rola,
    .in-prod-tag,
    .in-war-tag,
    .in-cta-tag,
    .in-cb-tag,
    .in-fd-chip,
    .in-tags li,
    .in-ig-cyt-a,
    /* Podpis pod cytatem w hero strony głównej — miał wpisane z palca 11 px,
       czyli jedyną wartość spoza tej grupy przy tej samej roli. Zauważone
       przez Bartka 24.08.2026. */
    .in-xh-cyt span,
    /* Metadane stopki: prawa autorskie, dane spółki, podpis wykonawcy.
       Prototyp dawał im 13 px — to etykiety, nie proza, więc idą na `micro`. */
    .in-ftr-copy,
    .in-ftr-legal,
    .in-ftr-autor,
    .in-art-rail-t,
    .in-ts-kicker,
    .in-ts-step,
    .in-f label,
    .in-f-w label,
    /* Testy bez punktacji (27.08.2026): wybór testu, sam test i strona
       z pełną analizą. Wpisane TUTAJ, a nie w motyw.css — rozmiary tekstu
       mają jedno miejsce. */
    .in-tst-k,
    .in-tw-czas,
    .in-an-etykieta,
    .in-an-wzorzec-l,
    .in-an-nr,
    .in-an-ile,
    .in-an-druk-m,
    .in-an-wybor span
) {
    font-size: var(--t-micro) !important;
    line-height: 1.4 !important;
}

/* ── 6. Przyciski i pola ───────────────────────────────────────────────────
   Etykiety przycisków chodziły od 13 do 16 px. Na telefonie przyciski i tak
   idą jeden pod drugim na pełną szerokość, więc nie ma powodu, żeby napis
   był mniejszy od tekstu obok. */
html body :is(
    .in-btn,
    .in-btn-ghost,
    .in-form button,
    .in-cb-btn,
    .in-tm-cta,
    .in-prod-btn,
    .in-card-l,
    .in-nav-cta
) {
    font-size: var(--t-btn) !important;
    font-weight: var(--t-waga-przycisku) !important;
}

/* Przyciski WooCommerce (koszyk, zamówienie, karta produktu) — sama waga,
   bez ruszania stopnia, bo ich rozmiary ustawia `woo.css`. Chodzi o to, żeby
   „Przejdź do kasy" nie było lżejsze od „Rezerwuję ten termin" obok. */
html body :is(
    .button,
    .wp-element-button,
    .woocommerce button.button,
    .woocommerce a.button,
    .woocommerce input.button,
    .woocommerce-Button
) {
    font-weight: var(--t-waga-przycisku) !important;
}
html body :is(
    .in-form input,
    .in-form select,
    .in-form textarea
) {
    font-size: var(--t-input) !important;
}

/* ── 6b. Karty z cytatem ───────────────────────────────────────────────────
   Dwie karteczki z cytatem Olgi — ta przy portrecie w hero strony głównej
   (`.in-xh-cyt`) i ta w sekcji manifestu (`.in-ig-cyt-q`) — miały własne
   stopnie z prototypu: 17 px (na telefonie 15) i 19 px. Bartek 24.08.2026:
   „ten cytat też ma swój font size, a powinno mieć body".

   To jest tekst do przeczytania, nie element kompozycji, więc siada na
   `--t-body` jak reszta prozy. Kursywa, krój i kolor zostają — różnicę robi
   krój i cudzysłów, nie wielkość.

   ⚠️ Podpis autorki (`.in-ig-cyt-a`, `.in-xh-cyt span`) NIE wchodzi do tej
   grupy — to wersalikowa etykieta i ma swój stopień w grupie 5. */
html body :is(
    .in-xh-cyt p,
    .in-ig-cyt-q
) {
    font-size: var(--t-body) !important;
    line-height: var(--t-body-lh) !important;
}

/* ── 6c. Proza z prototypowymi stopniami ───────────────────────────────────
   Przegląd wszystkich stopni w serwisie (24.08.2026, osiem podstron, 959
   elementów tekstowych) pokazał, że poza skalą chodziło jeszcze kilka miejsc
   z prawdziwym tekstem do czytania. Bartek: „te opinie też mają nadpisany
   font-size... miałeś to wszędzie ogarnąć".

   Wszystkie siadają na `--t-body`:
   • `.in-tm-q`      — cytat w karcie opinii (było 20 px),
   • `.in-fd-lead`   — zdanie domykające przy portrecie (było 26 px),
   • `.in-ct-sec li` — pozycje listy na kontakcie (było 15,5 px).

   ⚠️ POZA tą grupą świadomie zostają WŁASNE tokeny interfejsu, bo to nie jest
   proza: przyciski (`--t-btn`, 15 px), pozycje nawigacji i drobny druk prawny
   w stopce (13 px). One mają swoje miejsce w skali, tylko inne niż tekst.

   ⚠️ Zostają też DWA bloki, gdzie duży stopień jest elementem kompozycji,
   a nie pomyłką — `.in-ig-text` w sekcji manifestu (27 px, słowa zapalają się
   falą przy przewijaniu) i `.in-motto blockquote` (30 px). Do decyzji Bartka,
   czy też mają zejść do tekstu ciągłego. */
html body :is(
    .in-tm-q,
    .in-fd-lead,
    .in-ct-sec li
) {
    font-size: var(--t-body) !important;
    line-height: var(--t-body-lh) !important;
}

/* ── 6d. Miary nagłówków sekcji ────────────────────────────────────────────
   ⚠️ Komponenty ograniczają nagłówki sekcji miarą w `ch` — 13ch, 16ch, 18ch
   i 22ch. Te wartości były liczone dla prototypu, gdzie h2 miało 44–62 px:
   13ch dawało wtedy ~375 px, czyli sensowny nagłówek na dwa wiersze.

   Po zejściu skali do 28 px ta sama miara to już tylko ~216 px, więc nagłówki
   łamią się na siłę, choć w kolumnie jest miejsce. Zgłoszone przez Bartka
   24.08.2026 na sekcji opinii: „czemu ten header jest złamany, a nie pełna
   szerokość jak inne?" — „Opinie osób, które poznały numeroterapię" potrzebuje
   521 px, a miało 299.

   Przeliczamy proporcjonalnie (44/28 ≈ 1,57), żeby zachować zamysł prototypu:
   13ch → 20ch, 16ch → 25ch, 18ch → 28ch, 22ch → 34ch. `min(100%, …)` pilnuje
   wąskich okien.

   ⚠️ To ten sam błąd, co przy `max-width: 20ch` i `16.5ch` w hero podstron
   i przy `text-wrap: nowrap` na stronie głównej: MIARA POLICZONA DLA INNEGO
   STOPNIA PISMA. Przy każdej zmianie skali trzeba przejrzeć miary w `ch`. */
html body :is(
    .in-services-head h2,
    .in-cert-head > h2,
    .in-game-paths-head h2,
    .in-cta--karty h2,
    .in-sec.in-cta h2
) {
    max-width: min(100%, 20ch);
}
html body :is(
    .in-sec.in-stack .in-stack-head > h2,
    .in-showcase-copy > h2
) {
    max-width: min(100%, 25ch);
}
/* Opinie stoją nad paskiem na CAŁĄ szerokość sekcji, więc nagłówek nie ma
   powodu siedzieć w wąskiej szpalcie — 28ch (466 px) wciąż łamało „Opinie
   osób, które poznały numeroterapię", które potrzebuje 521 px. Zdejmujemy
   ograniczenie: ta sekcja ma się zachowywać jak inne pełnowymiarowe. */
html body .in-sec.in-testimonials h2 {
    max-width: none;
}
html body :is(
    .in-sec.in-rozsyp.in-rozsyp--4 > .in-wrap > h2,
    .in-sec.in-rozsyp.in-rozsyp--5 > .in-wrap > h2
) {
    max-width: min(100%, 34ch);
}
html body .in-sec.in-rozsyp > .in-wrap > h2 {
    max-width: min(25ch, 40vw);
}

/* ── 7. Stopka ─────────────────────────────────────────────────────────────
   ⚠️ Zdjęcie narzuconych 18 px nie wystarczyło: pod spodem został jeszcze
   PROTOTYP. `szkielet.css` daje `.in-ftr .in-ftr-claim` 15 px, a
   `.in-ftr .in-ftr-sub` 16 px — zauważone przez Bartka 24.08.2026
   („w stopce jakaś klasa dalej nadpisuje"). Tamtego pliku nie poprawiamy
   ręcznie, bo jest generowany, więc prostujemy to tutaj.

   Stopka to proza i odnośniki, więc siada na `--t-body` — jednym stopniu,
   nie trzech przypadkowych (15, 16 i 18 px z trzech różnych ekranów prototypu),
   a jedynym miejscem, gdzie stopień jest tu ustawiany, jest pseudonagłówek
   niżej.

   Poza tę regułę wychodzą tylko dwie rzeczy: pseudonagłówek (niżej) oraz
   drobny druk pod kolumnami, który ma własną grupę.

   Zostaje natomiast sam pseudonagłówek — hasło nad kolumnami. Prototyp dawał
   mu `clamp(32px, 3.4vw, 54px)` i osobne 34–46 px na telefonie, czyli stopień
   większy od nagłówka strony (36 px). Bartek: „pseudo header trzeba zmienić na
   28px". Bierzemy `--t-h2`, bo to dokładnie 28 px i jedno źródło prawdy —
   na telefonie zejdzie razem ze skalą do 24.

   ⚠️ Interlinia i odstęp liter też muszą zejść: 1,04 i -.035em były liczone
   pod 54 px i przy 28 px sklejają wiersze oraz litery. */
html body :is(
    .in-ftr li a,
    .in-ftr .in-ftr-sub,
    .in-ftr .in-ftr-claim,
    .in-ftr .in-ftr-nota
) {
    font-size: var(--t-body) !important;
    line-height: var(--t-body-lh) !important;
}

html body .in-ftr-statement {
    font-size: var(--t-h2) !important;
    line-height: var(--t-h2-lh) !important;
    letter-spacing: -.01em !important;
}


/* ── 8. Hero ───────────────────────────────────────────────────────────────
   Hero co do zasady zostaje poza skalą: tam stopień pisma jest elementem
   kompozycji (nagłówek na pół ekranu), a nie tekstem do czytania. Ale
   wprowadzenie pod kreską i plakietka nad nagłówkiem to już zwykły tekst —
   i akurat one witały na telefonie stopniem 14 i 11 px, czyli tym, na co
   klientka narzeka. Podnosimy TYLKO te dwa miejsca, `clamp` nagłówków
   zostaje nietknięty. */
html body .in-xh-intro p {
    /* Było sztywne 18 px — jedyna wartość w tym pliku wpisana z palca. Od
       24.08.2026 bierze token, żeby wprowadzenie w hero czytało się tak samo
       jak każdy inny akapit w serwisie. */
    font-size: var(--t-body);
    line-height: var(--t-body-lh);
}
html body .in-xh-eyebrow {
    font-size: var(--t-micro);
}
@media (max-width: 600px) {
    /* Zdanie z modułu wideo to wypowiedź, nie akapit — przy podstawie 20 px
       przestawało się od niej odróżniać. */
    html body .in-ig-text {
        font-size: 24px;
        line-height: 1.35;
    }
}

/* ── 9. Zdanie z modułu wideo — na telefonie PEŁNYM kolorem ────────────────
   Na desktopie to zdanie jest wypełnione gradientem przyciętym do liter
   (`background-clip: text` + `color: transparent`), a skrypt przesuwa gradient
   przy przewijaniu. Na telefonie ten efekt jest niewidoczny (nie ma czego
   śledzić okiem przy jednym ekranie tekstu), a bywa wręcz szkodliwy: na
   iPhonie Bartka zdanie było praktycznie niewidoczne — jasny koniec rampy
   (#67B6C0) wypadał na literach, na lawendowym tle sekcji.

   Dlatego poniżej 900 px zdejmujemy gradient i wracamy do pełnego fioletu
   marki. `-webkit-text-fill-color` MUSI być cofnięty osobno — samo `color`
   nie wystarczy, bo to on wygrywa na WebKicie i to on trzymał przezroczystość.
   Zgłoszone przez Bartka 21.08.2026
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    html body .in-ig-text {
        background: none !important;
        color: var(--brand-primary, #643B81) !important;
        -webkit-text-fill-color: var(--brand-primary, #643B81) !important;
    }
}

/* ── Szerokość nagłówka w kolumnie przyklejonej ────────────────────────────
   Nagłówek sekcji `split` (a także FAQ i formularza kontaktu) siedzi w wąskiej
   lewej kolumnie, przyklejony przy scrollu, z miarą 14 znaków. Przy tej mierze
   „Sprawdzone metody pracy z podświadomością" łamało się na pięć wierszy po
   dwa słowa. Bartek: dajmy 20. Kolumna ma 5/12 szerokości, więc 20 znaków
   nadal się w niej mieści. 21.08.2026 */
html body :is(
    .in-sec.in-split > .in-wrap > h2,
    .in-faq-h,
    .in-ct-h
) {
    max-width: 20ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   RYTM PIONOWY SEKCJI
   ──────────────────────────────────────────────────────────────────────────
   Zgłoszenie Bartka: „za duże są przerwy między sekcjami". Pomiar na
   telefonie: `.in-sec` ma 56 px góra i dół, czyli 112 px między treścią
   dwóch sekcji — a niektóre komponenty dokładały swoje (`.in-testimonials`
   nie miało żadnej korekty na telefon i zostawało przy 104+104 px, czyli
   208 px pustego miejsca między opiniami a tym, co pod nimi).

   Wyściółka idzie teraz z JEDNEJ zmiennej. Wyjątki są wypisane niżej, każdy
   z powodem — i każdy wygrywa WIĘKSZĄ szczegółowością, nie kolejnością.
   ══════════════════════════════════════════════════════════════════════════ */
html body .in-sec {
    padding-block: var(--in-rytm) !important;
}

/* Sekcje, którym zostawiamy więcej powietrza: są długie albo mają własne tło
   i bez zapasu ich treść kleiłaby się do krawędzi koloru. */
html body .in-sec:is(
    .in-services-stack,
    .in-cert-pricing,
    .in-testimonials,
    .in-faq-sec
) {
    padding-block: var(--in-rytm-duzy) !important;
}

/* — wyjątki ————————————————————————————————————————————————————————— */

/* Pasek „porozmawiajmy" sam jest kolorową bryłą — wyściółkę ma w środku
   (`.in-cb-inner`), nie na sekcji. */
html body .in-sec.in-cb {
    padding-block: 0 !important;
}

/* Nagłówek stron tekstowych (regulamin, polityka) siada NA treści pod nim. */
html body .in-sec.in-art-head {
    padding-bottom: 0 !important;
}

/* Kopuła nasuwa się na sekcję łukiem — górna wyściółka to miejsce na ten łuk,
   a nie odstęp między sekcjami. Bez tego pierwsze zdanie chowa się pod łukiem. */
html body .in-dome > .in-sec.in-ig {
    padding-top: clamp(64px, 16vw, 240px) !important;
}

/* Rozsypane kafelki: sekcja jest sceną na 220vh z `sticky` w środku. Każda
   wyściółka przesuwa scenę względem okna i psuje wyliczenia. Tylko od 1400 px,
   bo niżej efekt się nie włącza i jest to zwykła sekcja. */
@media (min-width: 1400px) {
    html body .in-sec.in-rozsyp {
        padding-block: 0 !important;
    }
}

/* Sekcje, które stoją PIERWSZE na stronie, bez hero nad sobą: górna wyściółka
   musi wyminąć pływający nagłówek, więc nie schodzi razem z rytmem. */
html body #test.in-sec {
    padding-top: clamp(104px, 16vw, 128px) !important;
}
/* Karty logowania celowo wjeżdżają NA hero ujemnym marginesem (moje-konto.css) —
   tu wyściółka od góry byłaby dziurą w środku fioletu. */
html body #konto.in-sec {
    padding-top: 0 !important;
}

/* ── Odstęp między akapitami ───────────────────────────────────────────────
   `szkielet.css` daje `.in-p { margin: 0 0 20px }`. Przy interlinii 1.7 robiło
   to przerwę wyższą niż wiersz tekstu i akapity rozjeżdżały się na osobne
   wysepki. Bartek: 10 px. 22.08.2026

   Reguła stoi tutaj, bo `szkielet.css` generuje build z prototypu — poprawka
   wpisana tam zniknęłaby przy najbliższym uruchomieniu `wytnij-css.py`.

   Komponenty, które mają własny odstęp, zostają przy swoim: moduł o autorce
   (18 px), pas boczny artykułu (12 px), karta osoby (10 px), showcase (11 px).
   Tam odstęp jest częścią kompozycji kolumny, nie rytmu prozy. */
html body .in-p {
    margin-bottom: 10px;
}

/* ── Nagłówki z wagą wpisaną na sztywno w arkuszach GENEROWANYCH ───────────
   Reguła `html body h3 { font-weight: … !important }` wyżej ma szczegółowość
   (0,0,3) i przegrywa z `html body .in-pr-it h3` (0,1,3) z prototypu — a ta
   siedzi w `strony/index.css`, czyli w pliku generowanym, którego nie
   poprawiamy ręcznie (nadpisze go `wytnij-css.py`). Zresztą `index.css`
   ładuje się PO `motyw.css`, więc poprawka tam też by nie pomogła.

   Dlatego wyjątek stoi tutaj, w arkuszu ładowanym jako ostatni.
   ⚠️ `wytnij-skale.py` zdejmuje z generowanych arkuszy `font-size`, ale NIE
   rusza `font-weight` — jeśli znajdzie się kolejny taki nagłówek, dopisz go
   do tej grupy, a nie do komponentu.

   Karuzela produktów na stronie głównej miała wagę 400 przy wszystkich innych
   kafelkach na 700 — została z przenoszenia prototypu, nie była decyzją.
   Zgłoszone przez Bartka 24.08.2026. */
html body .in-pr-it h3,
html body .in-pr .in-pr-body h3 {
    font-weight: var(--t-waga-naglowka) !important;
}