/* ============================================================
   WOW.CSS — wzorzec „wow" (P0-WZORZEC-WOW, 16.09.2026 → P2, 17.09)
   Ładowany PO brand-2026.css — ostatnia warstwa kaskady. Spec:
   materialy/brandbook_system10h_v2_SZKIC-2026-09-15.md §10/§11.
   ⛔ Poprawka 17.09 (P2): nagłówek „dotyka wyłącznie index.html" był
   już nieaktualny w chwili pisania tej linii — plik ładuje się na
   45/53 stronach (sekcje 1-7 to selektory specyficzne dla hero `/`,
   więc na innych stronach są no-op, ale sam LINK jest szerszy, niż
   poprzedni nagłówek twierdził). Sekcja 8 (P2, niżej) jest ŚWIADOMIE
   ogólnodostępna — `.field/.details/.switch` i wyrównanie starych
   klas CTA mają działać wszędzie, gdzie ten plik już i tak wisi.
   ⛔ Zero nowych claimów/tekstu (B-036) — same reguły wykonania.
   ============================================================ */

/* ------------------------------------------------------------
   1. RUCH — jedna orkiestrowana chwila (wiersze wydruku), reszta
      strony bez scroll-reveal (§10.1, §9.12). Kinetic H1 też
      zostaje statyczny — patrz sekcja 2 (typografia H1 na sztywno).
   ------------------------------------------------------------ */
[data-reveal], .kinetic {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes wow-wydruk-wiersz {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Wyłącznie wiersze wydruku W HERO — jedyna nieprowokowana animacja na stronie.
   4 wiersze × 60ms odstępu, 220ms trwania każdego = ≤400ms całości. Raz — CSS
   animation nie zapętla się i nie odpala ponownie przy scrollu. */
.hero-split-aside .wydruk-lista > li {
  animation: wow-wydruk-wiersz 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
.hero-split-aside .wydruk-lista > li:nth-child(1) { animation-delay: 0ms; }
.hero-split-aside .wydruk-lista > li:nth-child(2) { animation-delay: 60ms; }
.hero-split-aside .wydruk-lista > li:nth-child(3) { animation-delay: 120ms; }
.hero-split-aside .wydruk-lista > li:nth-child(4) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-split-aside .wydruk-lista > li {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------
   2. TYPOGRAFIA H1 JAKO ELEMENT (§10.2) — na sztywno, nie przez
      .kinetic (który dojeżdża od lżejszej osi). Specificity wyżej
      niż .kinetic.display-h2.is-in (3 klasy) — stąd !important.
   ------------------------------------------------------------ */
.hero-headline h1.display-h2 {
  font-size: clamp(2.75rem, 5.6vw, 5rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'wght' 500 !important;
}

/* Kolumna tekstu (§9.8/§10 typografia): 68ch, hero i tabele mają własną szerokość
   (inline style / klasa), więc nie są nadpisywane — specyficzność klasy wygrywa. */
main p { max-width: 68ch; }

/* Cyfry tabelaryczne w cenach i wydruku (§9.10). */
.hero-price,
.pricing-price,
.wydruk-lista,
.wydruk-czas,
.wydruk-zakres,
.wa0-table {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   2b. PIERWSZY KADR — hero 70-85vh (§9.1), dowód w zasięgu ≤2 ekranów
       (§9.3). Same przycięcie rytmu/marginesów, ZERO treści ruszonej.
       Pomiar 16.09 PRZED tym blokiem: hero 107,5% vh na 1440×900,
       dowód na 1911px (cel ≤1800). Po: patrz meldunek.
   ------------------------------------------------------------ */
@media (min-width: 900px) {
  .hero { padding-top: clamp(16px, 2vw, 28px) !important; padding-bottom: var(--space-8, 32px) !important; }
  .hero-split { margin-bottom: var(--space-4, 16px) !important; }
  .hero-headline .display-h2 { margin-bottom: var(--space-6, 24px); }
  .hero-price { margin-top: var(--space-4, 16px) !important; }
  .cta-row { margin-top: var(--space-6, 24px) !important; }

  /* P0.1 PO OKU @coo (16.09): H1 miał CZTERY wiersze („firmę." samotnie w 4.),
     bo kolumna nagłówka (668,9px) była 38,9px węższa niż potrzebuje italik
     „który zna Twoją firmę." na jednym wierszu (707,8px, zmierzone Range.getClientRects
     na żywym DOM). Lekarstwo NIE jest ratio 58/42 z brandbooku — policzone empirycznie:
     kolumna nagłówka 718px (dokłada bufor 10px) + kolumna wydruku ≥440px (§10.3 P0.1
     pkt 3) razem potrzebują więcej miejsca niż daje .hero z paddingiem 32px z obu stron
     w kontenerze 1200px. Lewy margines ZOSTAJE wyrównany blisko paska (16px zamiast 32,
     wciąż w prawo od loga „System 10h+"); prawy schodzi do 0, bo tam kolumna wydruku
     i tak kończy się na tej samej krawędzi co przycisk „Umów rozmowę" w pasku (1320px) —
     to NOWA, celowa krawędź wyrównania, nie przypadek. Gap 24px (--space-6) zamiast
     clamp(24,3.4vw,56) ≈ 49px — też źródło brakującego miejsca. */
  .hero { padding-left: 16px !important; padding-right: 0 !important; }
  .hero-split {
    grid-template-columns: minmax(0, 718px) minmax(400px, 1fr) !important;
    gap: var(--space-6, 24px) !important;
  }
  /* Skutek asymetrii 16/0 wyżej (22.09, BACKLOG STRONA-OPUS55-OGONY (d)): `.hero-split` leży
     8 px na prawo od środka okna, a jego tło `::before` (brand-2026.css §14: 100vw, left:50%
     − 50%) razem z nim — 8 px poziomego przewijania + czarny pasek przy lewej krawędzi zdjęcia.
     Zmierzone Playwrightem 1440×900 i 1280×800: /, /handlowcy, /producenci, /solo_ua 8 → 0.
     Wcześniej ta sama korekta stała inline tylko na / (blok OPUS55 §4a). */
  .hero > .hero-split::before { left: calc(50% - 8px); }
  /* Kolumna wydruku była 418px, karta zawijała wiersze na 5 linii (za wąska).
     Przy nowej kolumnie 442px + mono 13px (z 14) + line-height 1.55 (z 1.75)
     pozycje 01-04 wychodzą na 3-4 linie. Tylko desktop — telefon miał już
     działający wydruk (2 z 4 pozycji za przyciskiem) i brief zakazuje go ruszać. */
  .hero-split-aside .wydruk-lista { font-size: 13px; line-height: 1.55; }
}
.hero-przeglad-dnia { margin-top: var(--space-8, 32px) !important; }
.hero-split-aside .wydruk-lista { gap: var(--space-4, 16px); }

/* Telefon: ten sam cel, mniej miejsca do cięcia — kolumny stoją jedna pod
   drugą, więc oszczędność jest wyłącznie z marginesów/paddingu, nie z treści.
   Zmierzone 16.09: nawet przy zerowym chromie H1 (658px na 390 px) + wydruk
   skrócony do 2 wierszy (573px) SUMUJĄ SIĘ do więcej niż 844px — kolumny
   nie mogą zmieścić się w 100% vh bez skrócenia treści, którego brief
   zakazuje (B-036). Ten blok tnie, co się da: 172,5% → patrz meldunek. */
@media (max-width: 760px) {
  .hero { padding-top: var(--space-6, 24px) !important; padding-bottom: var(--space-6, 24px) !important; }
  .hero-split { margin-bottom: var(--space-6, 24px) !important; gap: var(--space-6, 24px) !important; }
  .hero-headline .display-h2 { margin-bottom: var(--space-4, 16px); }
}

/* ------------------------------------------------------------
   3. WYDRUK W KADRZE HERO — kolumna dostaje własną szerokość
      i telefon pokazuje 2 z 4 pozycji za przyciskiem (§10.1, §9.16).
   ------------------------------------------------------------ */
.hero-split-aside .wydruk-toggle {
  display: none;
  margin-top: var(--space-4, 16px);
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-accent-text, var(--color-accent));
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hero-split-aside .wydruk-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  /* Skrócone do 2 wierszy — pozycje 3 i 4 chowają się za przyciskiem. */
  .hero-split-aside .wydruk-lista > li:nth-child(n + 3) { display: none; }
  .hero-split-aside .wydruk-lista.is-rozwinieta > li:nth-child(n + 3) { display: list-item; }
  .hero-split-aside .wydruk-toggle { display: inline-block; }
}

/* ------------------------------------------------------------
   4. SEKCJA „KTO TO WDRAŻA" — karta founder przeniesiona z hero.
      Bez nowego nagłówka (B-036) — sam layout wokół istniejącej karty.
   ------------------------------------------------------------ */
.sekcja-architekt {
  padding: var(--section-y, clamp(64px, 9vw, 128px)) var(--space-6, 24px);
}
.sekcja-architekt .hero-founder-card {
  max-width: var(--container-med, 760px);
  margin: 0 auto;
  padding: var(--space-6, 24px);
}
@media (min-width: 720px) {
  .sekcja-architekt .hero-founder-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-7, 28px);
    align-items: start;
    padding: var(--space-7, 28px);
  }
  .sekcja-architekt .hero-founder-card picture {
    grid-column: 1;
  }
  .sekcja-architekt .hero-founder-card picture img {
    max-height: 220px !important;
    border-radius: var(--radius-card, 12px) !important;
  }
  .sekcja-architekt .hero-founder-card figcaption {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------
   5. PRZEŁĄCZNIK NOC/DZIEŃ — koniec „tellu" AI (§10.2 pkt 1): brand-2026.css
      rysował go wersalikami z trackingiem 0,10em, 11px, jak reszta paska
      napisów mono. To dane etykiety przełącznika, nie dane tabelaryczne —
      zdaniowe „Noc"/„Dzień" stoją w znaczniku od dawna (index.html), winny
      był wyłącznie CSS. Rozmiar zrównany z linkami menu (.nav-links = 0,9rem)
      i podniesiony do 44px celu dotykowego (WCAG 2.5.5). Selektor `.navbar`
      zostawia wariant w menu mobilnym (`.mm-swiatlo .przelacznik-swiatla`)
      bez zmiany rozmiaru — ten ma już własny, celowo inny (12px/16px padding) —
      ALE `text-transform`/`letter-spacing` mobile wcale nie dostał wtedy
      (P0.1, 16.09): `.przelacznik-swiatla button` bazowy w brand-2026.css:553
      niesie `text-transform: uppercase; letter-spacing: .10em`, a wariant
      `.mm-swiatlo .przelacznik-swiatla button` (brand-2026.css:601) tego nie
      nadpisywał — telle wracał na telefonie, którego desktop już nie miał.
   ------------------------------------------------------------ */
.navbar .przelacznik-swiatla button {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 10px 14px;
}
.mm-swiatlo .przelacznik-swiatla button {
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   6. PAS MIĘDZY „MASZ GDZIE PRÓBOWAĆ" A „JAK TO DZIAŁA" — 168px zamiast
      skali --section-y (64/96/128). Przyczyna zmierzona na żywym DOM:
      `.section-lead` (akapit) niesie własny margin-bottom: 40px (--space-10),
      a `#masz-gdzie-probowac` jako `.section-body` DODAJE do tego swój
      padding-bottom: 128px (--section-y) — dwa źródła odstępu naliczają się
      zamiast jednego. `#jak-to-dziala` ma padding-top: 0 (już wcześniej
      wyzerowany, żeby nie dublować się z sąsiadem), więc winny jest wyłącznie
      margines akapitu, bo ten akapit jest OSTATNIM dzieckiem sekcji — margines
      "na coś pod nim" nie ma czego rozdzielać. Po zmianie: 128px, w skali.
      Scoped do tej jednej sekcji — inne `.section-lead` w pliku poprzedzają
      dalszą treść (grid dowodów), tam margines robi robotę i zostaje. */
#masz-gdzie-probowac .section-lead { margin-bottom: 0; }

/* ------------------------------------------------------------
   7. ETYKIETY WERSALIKOWE — koniec drugiego „tellu" AI z §10.2 pkt 1
      (16.09, P1 strona-szkielet.mjs). Census ZAMIAST edycji markupu w 34
      plikach: `grep -rhoE 'class="[^"]*(eyebrow|kicker|label-mono|section-
      label|overline)[^"]*"' system10h/DEPLOY_EXT --include='*.html'`:
        article-eyebrow          19×   eyebrow seclabel   9×   eyebrow        8×
        section-label kinetic-marker 12×   sd-eyebrow     3×   kicker         3×
        section-eyebrow          2×   hero-eyebrow 1×  hub-eyebrow 1×  przeglad-eyebrow 1×
      Wszystkie zdefiniowane wersalikowo (`text-transform: uppercase;
      letter-spacing: .08-.1em`) w LOKALNYCH <style> per plik (assets/
      editorial.css + inline w blog/*, o-mateuszu, mechano, panel-rozumowania,
      pracownia-10h, po-szkoleniu-a2f047, tryb-poufny/karta-techniczna — ten
      ostatni ZERO ZALEŻNOŚCI, nietknięty, ale wow.css i tak go nie ładuje).
      `.section-head .section-eyebrow` dopisany osobno: specyficzność złożona
      (2 klasy) nie przegrywa z płaskim selektorem niższej specyficzności
      nawet gdy wow.css ładuje się później — bez tego duplikatu reguła by
      przegrała cicho na blogu (zmierzone 16.09, zrzut blog/index.html).
      ⚠️ Census ręczny, nie wyczerpujący: strona, która wymyśli piątą nazwę
      klasy etykiety, nie trafi tu automatycznie — brak strażnika w kodzie. */
.eyebrow, .seclabel, .kicker, .label-mono, .article-eyebrow, .sd-eyebrow,
.hero-eyebrow, .section-eyebrow, .section-head .section-eyebrow,
.przeglad-eyebrow, .hub-eyebrow, .section-label, .kinetic-marker,
.featured-flag {
  text-transform: none;
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   8. KOMPONENTY 2026 — jeden wzorzec .btn/.field/.details/.switch
      (R2 16.09, `materialy/system10h/2026-09-16_R2_przyciski-i-
      komponenty_audyt.md` §4, egzekucja P2 17.09).
      `.btn/.btn-primary/.btn-secondary` kanoniczne stoją już w
      `brand-2026.css` (radius 8px, min-height 44px, focus-visible,
      zero unoszenia/cienia/gradientu — R2 census to potwierdził).
      Ten blok robi DWIE rzeczy, których tam nie ma:
      (a) aliasuje 5 rodzin przycisków spoza wspólnego systemu
          (inline `<style>` per plik — R2 §1/§5) do TEGO SAMEGO
          wykonania wizualnego, bez ruszania markupu 20 plików —
          brief P2 wprost dopuszcza alias w CSS zamiast migracji
          każdego `<a class="...">`; (b) dokłada `:focus-visible`
          tam, gdzie R2 §1 znalazł zero reguł fokusu (pola formularzy,
          `<details><summary>`, przyciski poza systemem).
      Nowy `.field`/`.details`/`.switch` to słownik kanonu na przyszłe
      użycie w markupie — dziś stron z tymi klasami w HTML nie ma,
      więc definicja jest czysto addytywna (zero efektu, dopóki ktoś
      ich nie użyje).
   ------------------------------------------------------------ */

/* 8.1 Migracja rodzin przycisków — R2 §5 „Rozbieżności dziś → wzorzec".
   Cel: radius 8px (`--radius-ctl`), zero pigułki/6px/0px, transition
   TYLKO na tle/obramowaniu (nigdy `all` — R1.7/R1.8), focus-visible
   2px bursztyn offset 3px, bez unoszenia na hover (`transform` zeruje
   ewentualny dziedziczony lift z lokalnych regexów). */
.cn-cta-btn,
.sd-cta-btn,
.sd-architect-cta,
.nav-cta,
.agents-custom-bridge .bridge-cta {
  border-radius: var(--radius-ctl, 8px) !important;
  transition: background-color var(--duration-fast, 150ms) var(--ease-std, cubic-bezier(0.4,0,0.2,1)),
              border-color var(--duration-fast, 150ms) var(--ease-std, cubic-bezier(0.4,0,0.2,1)),
              color var(--duration-fast, 150ms) var(--ease-std, cubic-bezier(0.4,0,0.2,1)),
              opacity var(--duration-fast, 150ms) var(--ease-std, cubic-bezier(0.4,0,0.2,1));
}
.cn-cta-btn:hover,
.sd-cta-btn:hover,
.nav-cta:hover,
.agents-custom-bridge .bridge-cta:hover {
  transform: none;
  box-shadow: none;
}
.cn-cta-btn:focus-visible,
.sd-cta-btn:focus-visible,
.sd-architect-cta:focus-visible,
.nav-cta:focus-visible,
.agents-custom-bridge .bridge-cta:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
/* `--radius-btn` (blog/stalton `.nav-cta`) i pigułka 9999px uznane za
   martwe w brandbooku §2 — `!important` wyżej jest świadomy: te dwie
   strony niosą lokalny `.nav-cta { border-radius: var(--radius-btn) }`
   PO tym arkuszu w kaskadzie tylko jeśli ktoś doda kolejny `<link>`
   niżej; dziś wow.css jest ostatnią warstwą (nagłówek pliku), więc
   `!important` jest pasem bezpieczeństwa na przyszłość, nie obejściem
   dzisiejszego konfliktu. */

/* 8.2 Pola formularzy — R2 §1 „zero :focus-visible w całym korpusie
   CSS" dla `input/textarea/select`. Canvas nie ma dziś strony bez
   przynajmniej jednego pola, które by tego nie potrzebowało. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.field:focus-visible,
.sd-form-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-ctl, 8px);
}
.field {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-surface-2, var(--color-bg-secondary));
  color: var(--color-text-primary);
  border: 1px solid var(--color-line, var(--color-border));
  border-radius: var(--radius-ctl, 8px);
  font-family: var(--font-body);
  font-size: var(--text-base, 1rem);
}
.field:hover { border-color: var(--color-line-amber-hi, var(--color-accent)); }
.field[aria-invalid="true"] { border-color: #E2452F; }

/* 8.3 `<details>`/`summary` — R2 §1 „brak :hover/:focus-visible na
   summary nigdzie". Selektor płaski działa na WSZYSTKIE `<details>`
   istniejące już w markupie (FAQ na `/`, `/handlowcy`, `/cennik`,
   `/o-mateuszu`…), nie tylko na przyszłą klasę `.details`. */
summary:focus-visible,
.details summary:focus-visible,
.details-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-ctl, 8px);
}
summary:hover { background: var(--color-accent-wash, rgba(212,165,116,.06)); }
.details {
  border: 1px solid var(--color-line, var(--color-border));
  border-radius: var(--radius-card, 12px);
  overflow: hidden;
}
.details summary {
  min-height: 44px;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
}
.details summary::-webkit-details-marker { display: none; }

/* 8.4 `.switch` — słownik kanonu (R2 §4), dziś bez odbiorcy w markupie.
   Przełącznik światła (`.przelacznik-swiatla`) ma własny, wcześniejszy
   wzorzec w sekcji 5 tego pliku + `brand-2026.css:575` (focus-visible
   już jest) — nie dubluję go pod tą klasą, żeby nie licytować się o
   specyficzność z czymś, co już działa. */
.switch {
  display: inline-flex;
  border: 1px solid var(--color-line, var(--color-border));
  border-radius: var(--radius-ctl, 8px);
  overflow: hidden;
}
.switch button {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  background: transparent;
  color: var(--color-text-secondary);
  border: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.switch button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.switch button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ------------------------------------------------------------
   9. KINO — port pełnej powłoki z materialy/system10h/wizualy/
      2026-09-15_kino/makieta-kino-home.html na `/` (PORT-KINO-PELNY-
      DO-INDEX, 17.09). Spec: brandbook §12 (12.1–12.6). Zero nowych
      tokenów: kolory/promienie/fonty biorą z brand-2026.css §0 i
      design_tokens.css. Motyw jasny/ciemny to JEDEN mechanizm już na
      stronie — `html[data-theme="light"]` + `data-swiatlo` na
      przyciskach (motyw.js) — makieta miała własny `:root[data-swiatlo]`
      wyłącznie w izolacji jako demo, tu się go NIE powtarza.
   ------------------------------------------------------------ */

/* 9.1 SZYNA ROZDZIAŁÓW — numery od 1580px, tytuły od 1660px (§12.2).
   `.chapter-marker` istnieje w index.html od dawna (etykieta numeru
   rozdziału); tu dokładam wyłącznie pozycjonowanie paska — nowy
   komponent, nie duplikat. Treść linków to krótkie tytuły z tabeli
   MAPA ROZDZIAŁÓW, oznaczone SIGNOFF-PENDING w markupie. */
.szyna {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1580px) { .szyna { display: flex; } }
@media (min-width: 1580px) and (max-width: 1659px) { .szyna .szyna-tytul { display: none; } }
.szyna a {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
  transition: color 0.3s, font-weight 0.3s;
}
.szyna i { display: block; width: 16px; height: 1px; background: currentColor; transition: width 0.3s; }
.szyna a[aria-current="true"] { color: var(--color-accent-text); font-weight: 600; }
.szyna a[aria-current="true"] i { width: 28px; height: 2px; }
.szyna a:hover { color: var(--color-text-secondary); }

/* 9.2 NUMER ROZDZIAŁU — odstęp pod numerem, żeby siedział nad h2 sekcji.
   `.chapter-marker` sam (kolor/font) już zdefiniowany w index.html:194-203 —
   ⛔ komentarz „sekcja 7 wyżej już zdjęła wersaliki" był NIEPRAWDZIWY (werdykt
   przeglądu Fable 17.09, defekt 5): census w sekcji 7 NIE zawierał
   `chapter-marker`, więc `text-transform:uppercase` z bazowej reguły stał
   nietknięty na WSZYSTKICH dziewięciu „Rozdział NN" — brandbook §10 zakazuje
   eyebrow w kapitalikach. Zdejmowane TU, na modyfikatorze, żeby nie ruszać
   bazowej `.chapter-marker` (może mieć inne, nieportowane odbiorcy). */
.chapter-marker-rozdzial {
  display: block;
  margin: 0 0 var(--space-4, 16px);
  text-transform: none;
  letter-spacing: 0;
}

/* 9.3 KLISZA DUO — trzeci stopień korekty barwnej z makiety (rozdział
   02), którego brand-2026.css §17 nie miał (tam są tylko lekki/średni).
   Duotone bursztyn na czerni — odbiorca: scena-hala.webp w #jak-to-dziala.
   ⛔ Poprawka defekt 1 (17.09): `background: var(--color-accent)` na SAMYM
   `<img>` nie robi nic — obraz webp jest nieprzezroczysty, więc jego własne
   tło nigdy się nie maluje, a `mix-blend-mode:multiply` blenduje względem
   backdropu ZA obrazem w izolowanym kontekście `.kadr-filmowy` (isolation:
   isolate, brand-2026.css §17), czyli względem `background:#000` figury.
   Multiply × czerń = czerń niezależnie od treści obrazu — stąd „niemal czarny
   prostokąt" z przeglądu. Bursztyn musi więc siedzieć na FIGURZE (ancestor),
   nie na `<img>` — to samo miejsce, co `.karta--scena.klisza-duo{background:
   #D4A574}` w makiecie. Reguła na `<img>` zostaje (nieszkodliwa, przyszły
   fallback gdyby ktoś dodał przezroczyste PNG), ale przestaje być jedynym
   źródłem koloru. */
.kadr-filmowy.klisza-duo { background: var(--color-accent); }
.klisza-duo { position: relative; }
.klisza-duo img,
.klisza-duo > picture > img {
  filter: grayscale(1) contrast(1.0) brightness(1.35);
  mix-blend-mode: multiply;
  background: var(--color-accent);
}
html[data-theme="light"] .klisza-duo img,
html[data-theme="light"] .klisza-duo > picture > img {
  filter: grayscale(1) contrast(1.0) brightness(1.20);
}
.klisza-duo .kino-maska { position: absolute; inset: 0; z-index: 1; background: #2A1E12; mix-blend-mode: lighten; pointer-events: none; }

/* 9.4 RAMA PORTRETU 4:5 — rozdział 04 (v13, poprawka portret 17.09 makiety):
   NIE pełny kadr filmowy, rama ≤360px obok tekstu architekta. Nakładka na
   istniejący `.hero-founder-card` (już karta/powierzchnia z §4 brand-2026.css),
   nie nowy komponent karty — kolumna z portretem zostaje PO LEWEJ (wzorzec
   nienaruszony, `.hero-founder-card picture{grid-column:1}` sekcja 4), zmienia
   się WYŁĄCZNIE szerokość kolumny (200px → do 240px, w ramach limitu ≤360px)
   i proporcja obrazu w niej (4:5 zamiast przycięcia na sztywno 220px).
   Specificity: `.sekcja-architekt .hero-founder-card .architekt-rama-portretu img`
   (2 klasy + 1 typ) musi wygrać z `.sekcja-architekt .hero-founder-card picture img`
   sekcji 4 (2 klasy + 2 typy) — dopisany `picture` w selektorze wyrównuje
   specyficzność, a ta reguła stoi PO sekcji 4 w tym samym pliku, więc przy
   remisie wygrywa. */
/* ⛔ Poprawka defekt 2 (17.09, przegląd Fable): figura niesie inline
   `style="margin: 0;"` (index.html, hero-founder-card-2026-06-30) — ten
   inline zawsze bije `margin: 0 auto` z §4 brand-2026.css (inline > każda
   specyficzność selektora), więc karta stała przyklejona do lewej krawędzi
   sekcji (x≈24px) zamiast wyśrodkowana w kolumnie `--container-med` (960px)
   — „karta wychodzi poza kolumnę treści" z werdyktu. Jedyne, co bije inline
   normalny, to reguła `!important` z arkusza — stąd tu, nie w markupie. */
.sekcja-architekt .hero-founder-card { margin: 0 auto !important; }
.architekt-rama-portretu { max-width: 240px; margin: 0 auto var(--space-4, 16px); }
.architekt-rama-portretu picture,
.architekt-rama-portretu img { display: block; width: 100%; }
.sekcja-architekt .hero-founder-card .architekt-rama-portretu picture img {
  aspect-ratio: 4 / 5;
  height: auto !important;
  max-height: none !important;
  object-fit: cover;
  border-radius: var(--radius-card, 12px);
}
@media (min-width: 720px) {
  .sekcja-architekt .hero-founder-card { grid-template-columns: 240px 1fr; }
  .architekt-rama-portretu { margin: 0; max-width: none; }
}

/* 9.5 WYDRUK --zaczerniony — demonstracja Trybu Poufnego w #twoje-dane
   (rozdział 05, §12.2/§12.6). Pasek redakcji ciemny w OBU motywach —
   tak wygląda zaczernienie, niezależnie od jasności strony. `.wydruk`
   bazowy już jest karta/powierzchnia (brand-2026.css §4) — modyfikator
   dotyka wyłącznie `.wydruk-zakres`. */
.wydruk--zaczerniony { max-width: 480px; }
.wydruk--zaczerniony .wydruk-zakres { background: #0B0B0C; color: transparent; border-radius: 3px; user-select: none; }
html[data-theme="light"] .wydruk--zaczerniony .wydruk-zakres { background: #1A1714; }
.wydruk-podpis { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--color-text-tertiary); text-align: center; margin-top: var(--space-4, 16px); }

/* 9.6 WYDRUK --miniatura — 96px, na karcie Standardu w drabinie
   (rozdział 06, §12.2/§12.3 poprawka 3). Ta sama karta/powierzchnia,
   sam wydruk pomniejszony do etykiety + jedno zdanie. */
.wydruk--miniatura { min-height: 96px; height: auto; padding: 14px 18px; max-width: none; }
.wydruk--miniatura .wydruk-header { border: 0; padding: 0; margin: 0 0 6px; }
.wydruk--miniatura .wydruk-label { font-size: 0.92rem; }
.wydruk--miniatura .wydruk-lista { display: none; }
.wydruk--miniatura .wydruk-mini-tekst { font-size: 0.86rem; line-height: 1.4; color: var(--color-text-secondary); margin: 0; }
.wydruk-granica { margin-top: 10px; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-tertiary); }

/* 9.6b WYDRUK = JEDYNY JASNY PROSTOKĄT, w OBU motywach strony (defekt 4,
   przegląd Fable 17.09). `.wydruk` dziedziczył kartę ciemną, teren-podążającą
   za motywem (`--color-surface` z brand-2026.css §4 ORAZ `--color-bg-raised`
   z brand-2026.css:654-659, druga reguła nadpisuje pierwszą) — w nocy
   `oklch(0.155 0.008 70)` ≈ prawie czarny, czyli dokładnie odwrotność
   „papieru". Makieta niesie WŁASNE tokeny `--papier-*`, niezależne od
   `--color-*` strony (materialy/.../makieta-kino-home.html:274-286) — ten sam
   wzorzec tutaj. Odbiorcy: wydruk w hero, --zaczerniony (rozdz. 05),
   --miniatura (rozdz. 06) — wszystkie dziedziczą z `.wydruk`, więc jeden
   punkt definicji starcza. `.wydruk-podpis` (9.5, POD kartą, nie na niej)
   ZOSTAJE na kolorze strony — to nie jest część papieru. */
.wydruk {
  --papier: #FAF8F4;
  --papier-tekst: #1A1714;
  --papier-cichy: rgba(26, 23, 20, 0.72);
  --papier-ledwo: rgba(26, 23, 20, 0.56);
  --papier-linia: rgba(26, 23, 20, 0.14);
  --papier-akcent: #8F6537;
  background: var(--papier);
  border-color: var(--papier-linia);
  color: var(--papier-tekst);
}
html[data-theme="light"] .wydruk { --papier: #FFFFFF; --papier-linia: rgba(26, 23, 20, 0.16); }
.wydruk-header { border-bottom-color: var(--papier-linia); }
.wydruk-label { color: var(--papier-tekst); }
.wydruk-czas { color: var(--papier-akcent); }
.wydruk-zakres { color: var(--papier-ledwo); border-color: var(--papier-linia); }
.wydruk-lista { color: var(--papier-cichy); }
.wydruk-lista strong { color: var(--papier-tekst); }
.wydruk-stopka { color: var(--papier-ledwo); border-top-color: var(--papier-linia); }
.wydruk--miniatura .wydruk-mini-tekst { color: var(--papier-ledwo); }

/* 9.7 KARTY MALEJĄCE — rozdziały 07-10: 1 / .9 / .85 / .75 (§12.2).
   Skala dotyka WYŁĄCZNIE numeru rozdziału (`.chapter-marker`) i H2 tej
   sekcji, nie treści pod nim — treść ma już swoją typografię z
   §9.7/§9.8 brand-2026.css i nie jest częścią „karty rozdziału".
   ⛔ Poprawka defekt 6 (17.09): `1em` w kontekście `font-size` to rozmiar
   ODZIEDZICZONY z rodzica (typowo ~16px body), NIE własny rozmiar h2 przed
   tą regułą — więc `.section-headline` w #polka/#darmowy-agent/#faq
   zapadał się do 16/14.4/13.6px zamiast malejącej skali WOKÓŁ bazy h2.
   ⚠️ Baza NIE jest `.display-h2` z lokalnego <style> index.html:184
   (clamp(2rem,5vw,4.5rem)) — ten blok ładuje się PRZED linkiem do
   brand-2026.css (index.html:1879), więc brand-2026.css:99
   `.display-h2{font-size:clamp(1.9rem,3.6vw,3rem)}` (ta sama specyficzność,
   PÓŹNIEJ w kaskadzie) WYGRYWA i to ona faktycznie renderuje się na stronie
   — zmierzone: „normalny” h2 poza data-skala = 48px na 1440px (=3rem, górny
   pułap tego clampu), NIE 72px, jaki dawałby clamp z index.html. Podstawiona
   WŁAŚCIWA, wygrywająca funkcja klamrowa, przemnożona przez `--sk`. */
[data-skala] .section-headline { font-size: calc(clamp(1.9rem, 3.6vw, 3rem) * var(--sk, 1)); }

/* 9.8 PARALLAX 4% — wyłącznie `no-preference`, progresywne wzbogacenie.
   Odbiorca: kadry sceniczne 01/02/05 (`.kadr-parallax` na <img>). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .kadr-parallax { animation: kino-kadr-drift linear both; animation-timeline: view(); animation-range: entry 0% cover 100%; }
    @keyframes kino-kadr-drift { from { object-position: 50% 50%; } to { object-position: 54% 50%; } }
  }
}

/* 9.9 WYDRUK KRAWĘDŹ — cyfry tabelaryczne już pilnowane w §2 tego pliku
   (.wydruk-lista/.wydruk-czas/.wydruk-zakres); tu tylko `.wydruk-granica`
   (9.6) i `.wydruk-podpis` (9.5) — brak nowych tokenów kolorów, jak
   wymaga brief (bez duplikowania tokenów z design_tokens.css). */

/* ------------------------------------------------------------
   9.10 KADR NA PEŁNĄ SZEROKOŚĆ + KARTA TYTUŁOWA NA KADRZE (defekt 7,
   przegląd Fable 17.09). Zrzut wzorcowy potwierdza: numer+h2 leżą
   WYŚRODKOWANE na kadrze (nie w dolnej trzeciej — poprawka względem opisu
   werdyktu, obraz wygrywa z prozą), kadr na pełną szerokość viewportu.
   Odbiorcy: rozdziały 01/02/05, jedyne z kadrem scenicznym w tym porcie
   (§12 MAPA ROZDZIAŁÓW). Numer/h2 to ISTNIEJĄCE węzły przeniesione do
   wnętrza figury w index.html — h2 pełni rolę „zdania karty" makiety
   (`.karta-lead`), zero nowego tekstu (ANTI-L-074).
   Breakout: ten sam idiom co `.hero-split::before` (brand-2026.css §14),
   tu na WIDOCZNYM elemencie w przepływie (nie na ::before), więc margin
   ujemny + width:100vw, nie left/transform (który nie zmienia szerokości
   layoutu). Aspect-ratio 2.39:1 / 2:1 już stoi w bazowej `.kadr-filmowy`
   (brand-2026.css §17) — nie duplikowane.
   ⛔ `!important` konieczny: figura w index.html niesie inline
   `style="margin: 0 0 var(--space-8, 32px);"` (odstęp pod kadrem) — skrót
   3-wartościowy ustawia TEŻ margin-left/right:0, a inline zawsze bije
   zwykłą regułę arkusza niezależnie od specyficzności selektora. Zmierzone
   bez !important: `width:100vw` działał, marginesy nie — kadr rozjeżdżał
   się o szerokość viewportu w prawo zamiast wycentrować się na całą
   szerokość (breakout połowiczny, gorszy niż brak breakoutu). */
.kadr-filmowy.karta--scena {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.kadr-filmowy .karta-tresc {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(20px, 4vw, 40px);
}
/* Dogrywka kontroli P6 (17.09, po zrzucie dziennym rozdziału 01): sam numer rozdziału
   nie niósł text-shadow, w odróżnieniu od h2 dwie linie niżej — na busy fragmencie
   zdjęcia (np. jasny klocek drewna dokładnie za cyfrą) bursztyn na bursztynie/drewnie
   traci kontrast, tekst w DOM jest kompletny (zmierzone: scrollWidth==clientWidth,
   zero clipa), to czysto wizualny problem koloru, nie ucięcia. Dotyczy WSZYSTKICH
   rozdziałów z kartą tytułową na zdjęciu (01/02/05...), nie tylko Dźwigni — stąd
   poprawka na bazowej regule, nie na modyfikatorze jednego rozdziału. */
.karta-tresc .chapter-marker { color: #D4A574; text-shadow: 0 1px 12px rgba(8, 6, 4, 0.8), 0 1px 2px rgba(8, 6, 4, 0.6); }
.karta-tresc .display-h2 {
  color: #F6F1E8;
  margin: 0;
  max-width: 22ch;
  text-shadow: 0 2px 30px rgba(8, 6, 4, 0.65), 0 1px 3px rgba(8, 6, 4, 0.45);
}
/* ⛔ Dogrywka defekt 1 (17.09, po pierwszym pomiarze PO): winieta bazowa
   `.kadr-filmowy::before` (brand-2026.css §17, radial-gradient 118%/96% do
   rgba(8,6,4,.74) na krawędziach) dominowała nad KAŻDĄ próbą podbicia jasności
   filtra obrazu — zmierzone: brightness(1.15)→(1.65) na klisza-sredni dał
   IDENTYCZNE 31,5/255 w zrzucie, bo scrim komponuje się NAD obrazem i przy
   ~55% średniej krycia czarnym każda jasność źródła ląduje w tej samej
   okolicy. Dla `.karta--scena` (kadr na pełną szerokość z kartą tytułową)
   winieta łagodzona: obraz ma być widoczny, nie ledwo prześwitywać. */
.kadr-filmowy.karta--scena::before {
  background: radial-gradient(130% 100% at 50% 50%, transparent 45%, rgba(8, 6, 4, 0.38) 100%);
}

/* 9.11 JASNOŚĆ KLISZY W KADRZE SCENICZNYM (defekt 1, rozdział 05).
   scena-noc.webp ma średnią jasność 27,9/255 (celowo ciemna nocna scena) —
   `brightness(.85)` klisza-sredni + winieta `.kadr-filmowy::before` (do
   rgba(8,6,4,.74) na krawędziach) razem schodziły poniżej progu czytelności
   (kontrola przeglądu: >40/255 w nocy). Podbite WYŁĄCZNIE w kontekście kadru
   scenicznego — `.klisza-sredni` global (brand-2026.css §17) może stać przy
   innym, jaśniejszym zdjęciu gdzie indziej i nie ma tego problemu. */
.kadr-filmowy .klisza-sredni {
  filter: saturate(0.60) contrast(1.0) brightness(1.65) sepia(0.30) hue-rotate(-6deg);
}
html[data-theme="light"] .kadr-filmowy .klisza-sredni {
  filter: saturate(0.60) contrast(0.98) brightness(1.75) sepia(0.30) hue-rotate(-6deg);
}

/* ------------------------------------------------------------
   9.12 TŁO HERO NA CAŁĄ SEKCJĘ (defekt 3, przegląd Fable 17.09).
   `.hero-split::before` (brand-2026.css §14) kończy się `bottom: calc(-1 *
   var(--space-10, 64px))` względem `.hero-split` — ten box liczono, gdy
   wydruk „Przegląd dnia" stał NIŻEJ, w osobnej sekcji pod hero (komentarz
   tamtejszy: „gaśnie, zanim zacznie się wydruk"). Od P0-WZORZEC-WOW (16.09)
   wydruk PRZENIÓSŁ SIĘ do `.hero-split-aside`, czyli DO ŚRODKA hero — box
   nie sięga już do faktycznego dołu `.hero` (który ma własny padding-bottom
   `--section-y`, do 128px, PLUS margin-bottom hero-split), więc poniżej
   krawędzi obrazu zostaje płaska, bezteksturowa czerń aż do końca sekcji —
   „twarda krawędź ~680px" z werdyktu. Naprawa: box sięga wyraźnie niżej niż
   jakikolwiek realny `.hero` (nadmiar bezpiecznie znika pod kolejną sekcją,
   bo pseudo-element ma z-index:-1 w izolowanym kontekście hero-split —
   nie wycieka na sąsiadów). Gradient (noc) spłaszczony do stałego ~35%
   przyciemnienia zamiast dochodzenia do pełnego krycia `var(--color-bg)`
   — obraz ma być widoczny na CAŁEJ wysokości, nie gasnąć do koloru tła. */
.hero-split::before {
  bottom: -220px;
  background:
    /* 9.12c: lewa kolumna tekstu (H1, lead, cena, drobny druk) leży na
       najjaśniejszym fragmencie kadru (laptop) — pomiar live3: drobny druk
       nieczytelny. Boczna klisza wyłącznie pod kolumną tekstu, do 58 % szer. */
    linear-gradient(90deg,
      rgba(10, 9, 8, 0.58) 0%,
      rgba(10, 9, 8, 0.42) 36%,
      rgba(10, 9, 8, 0) 58%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg,
      rgba(10, 9, 8, 0.42) 0%,
      rgba(10, 9, 8, 0.35) 30%,
      rgba(10, 9, 8, 0.35) 100%) 0 0 / 100% 100% no-repeat,
    image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
      center 54% / cover no-repeat;
}
/* Dzień: „dziś OK — nie zepsuj" (brief) — zostawione BEZ ZMIANY intensywności
   gradientu, tylko ten sam dłuższy box (`bottom` wyżej jest współdzielony,
   niescoped do motywu), żeby zdjęcie nie urywało się przed końcem sekcji
   też w dniu. */

/* 9.12 DOGRYWKA PO PRZEGLĄDZIE ZRZUTÓW live3 (17.09, @coo):
   (a) rozdział 04 dostał klasę `.section-body` (ten sam kontener co 03/05),
       więc padding boczny sekcji nie dubluje się z kontenerem;
   (b) link Trybu Poufnego pod wydrukiem zaczernionym stoi w osi podpisu;
   (c) drobny druk pod ceną w hero na jasnym fragmencie zdjęcia był poniżej
       progu czytelności — w nocy tekst dostaje jaśniejszy token, bez plamy. */
.sekcja-architekt.section-body { padding-left: var(--space-8); padding-right: var(--space-8); }
.wydruk-link-poufny { margin: var(--space-3, 12px) 0 0; text-align: center; max-width: 480px; }
html:not([data-theme="light"]) .hero-split .cta-note { color: var(--color-text-secondary); }

/* 9.12d KADR HERO NA TELEFONIE (uwaga właściciela 18.09 po odbiorze LIVE:
   „zdjęcie główne się rozjeżdża, tekst OK, rozdział 01 i dalej OK").
   Zmierzone na 390 px: `.hero-split` ma ~1 800 px wysokości (kolumny jedna
   pod drugą), a zdjęcie proporcję 1,87:1 — `cover` na polu 390×1800 skaluje
   je do ~3 400 px szerokości i pokazuje pionowy pasek ze ŚRODKA (klawiatura,
   telefon z cyframi pod H1), a przez `bottom:-220px` z §9.12 kadr ciągnie się
   pod „Rano nie muszę pamiętać" i urywa twardą krawędzią przed warstwą
   tłumaczącą. Ten sam mechanizm, który brand-2026.css §14 opisuje dla .hero
   na desktopie („nieczytelna maź") — tylko na telefonie sprawcą jest wysokość
   ułożonych kolumn. Naprawa wyłącznie ≤760 px, desktop bez zmiany:
   (1) pole zdjęcia = pierwszy ekran (H1 + cena + przyciski), nie cała sekcja;
   (2) punkt skupienia na dłoniach i laptopie (lewa część kadru — spokojna
       powierzchnia pod tekstem; monitor z kodem po prawej jest za gęsty);
   (3) wygaszenie do koloru tła w dolnych 28 % pola — karta wydruku stoi już
       na czystej powierzchni, jak zakładał brandbook §14. */
@media (max-width: 760px) {
  .hero-split::before {
    bottom: auto;
    height: min(96svh, 780px);
    background:
      linear-gradient(180deg,
        rgba(10, 9, 8, 0.36) 0%,
        rgba(10, 9, 8, 0.34) 40%,
        rgba(10, 9, 8, 0.60) 68%,
        rgba(10, 9, 8, 0.94) 86%,
        var(--color-bg) 100%) 0 0 / 100% 100% no-repeat,
      image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
        30% 62% / cover no-repeat;
  }
  html[data-theme="light"] .hero-split::before {
    background:
      linear-gradient(180deg,
        rgba(250, 248, 244, 0.54) 0%,
        rgba(250, 248, 244, 0.60) 40%,
        rgba(250, 248, 244, 0.80) 68%,
        rgba(250, 248, 244, 0.96) 86%,
        var(--color-bg) 100%) 0 0 / 100% 100% no-repeat,
      image-set(var(--kadr-1x) 1x, var(--kadr-2x) 2x)
        30% 62% / cover no-repeat;
  }
}

/* 9.13 DŹWIGNIA — rozdział 01 (port makiety 17.09, materialy/system10h/wizualy/
   2026-09-17_pracownik/makieta-dzwignia.html, sign-off właściciela 19:38).
   Diagram SVG dźwigni (belka na punkcie podparcia, stos kartek vs. jedna kartka
   „Twoje zdanie") + blok trzy-kolumnowy Mózg/Dźwignia/Punkt podparcia. Własne
   tokeny --papier-* na `.dzw-opak`, TEN SAM wzorzec co `.wydruk` (§9.6b) — papier
   jest jasny w OBU motywach strony niezależnie od --color-bg. Zero nowych
   tokenów kolorów poza tym, co niesie już design_tokens.css/brand-2026.css. */
.dzw-opak {
  --papier: #FAF8F4;
  --papier-tekst: #1A1714;
  --papier-cichy: rgba(26, 23, 20, 0.72);
  --papier-linia: rgba(26, 23, 20, 0.14);
  position: relative;
  margin-top: clamp(28px, 3.4vw, 44px);
}
html[data-theme="light"] .dzw-opak { --papier: #FFFFFF; --papier-linia: rgba(26, 23, 20, 0.16); }
/* 17.09 ~22:25 (odbiór P6, porównanie ze zrzutem makiety 1440): .section-body ma
   --container-med (960 px), a makieta prowadzi diagram i kafle na 1200 px — po porcie
   etykiety SVG skurczyły się o 1/3 i diagram wyglądał „mniej”. Wyłamanie do
   --container-wide marginesem ujemnym (nie transformem: `.os` obraca się transformem
   i nie chcę drugiego kontekstu). Na wąskich ekranach min() zwraca 100vw − 2×padding
   sekcji, czyli dokładnie szerokość treści — zero przewijania poziomego. */
/* 18.09 (port na rodzinę B — ai-dla-*): reguła `.section-body { max-width/margin/padding }`
   żyje w INLINE <style> index.html (i jego generowanych lustrach), nie w arkuszu wspólnym,
   więc na stronach rodziny B sekcja rozlewała się na całą szerokość okna, a tekst
   siedział przy krawędzi (zmierzone: max-width none, padding 0, lead left=0).
   Wartości = te same tokeny, co w index.html; na index reguła jest identyczna, więc
   nic tam nie zmienia. */
#dzwignia.section-body {
  max-width: var(--container-med, 960px);
  margin-inline: auto;
  padding: 0 var(--space-8, 32px) var(--space-24, 96px);
}
.dzw-opak,
#dzwignia .trzy {
  --dzw-szer: min(var(--container-wide, 1200px), calc(100vw - 2 * var(--space-8, 32px)));
  width: var(--dzw-szer);
  margin-inline: calc(50% - var(--dzw-szer) / 2);
}
.dzw {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card, 12px);
  background: var(--color-bg-raised);
  overflow: hidden;
  aspect-ratio: 1200 / 430;
}
html[data-theme="light"] .dzw { background: #EFEAE0; border-color: rgba(26, 23, 20, 0.14); }
.dzw svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dzw .blat { stroke: var(--color-border-subtle); stroke-width: 1.5; }
.dzw .podpora { fill: var(--color-surface, var(--color-bg-raised)); stroke: var(--color-border-subtle); stroke-width: 1.2; }
html[data-theme="light"] .dzw .podpora { fill: #E3DCCF; }
.dzw .belka { fill: rgba(212, 165, 116, 0.22); stroke: var(--color-accent); stroke-width: 1.8; }
html[data-theme="light"] .dzw .belka { fill: #D9D1C2; }
.dzw .os {
  transform: rotate(var(--kat, 11deg));
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .dzw .os { transition: none; } }
.dzw .poziom {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: rotate(calc(-1 * var(--kat, 11deg)));
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .dzw .poziom { transition: none; } }
.dzw .kartka { fill: var(--papier); stroke: var(--papier-linia); stroke-width: 1; }
.dzw .kartka-t { font-family: var(--font-mono); font-size: 11px; fill: var(--papier-cichy); }
.dzw .kartka-t.b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; fill: var(--papier-tekst); }
.dzw .amber { fill: var(--color-accent); }
.dzw .amber-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: var(--color-on-accent); }
.dzw .amber-s { font-family: var(--font-mono); font-size: 10.5px; fill: rgba(23, 18, 12, 0.7); }
.dzw .etykieta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; fill: var(--color-text-tertiary); }
.dzw .etykieta.b { fill: var(--color-accent); }
.dzw .reka {
  fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.6s 0.3s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transform: translateY(-10px);
}
.dzw.wcisnieta .reka { opacity: 0.95; transform: translateY(0); }
.dzw .cien-stosu { fill: rgba(0, 0, 0, 0.35); transition: opacity 0.9s; opacity: 0; }
.dzw.wcisnieta .cien-stosu { opacity: 1; }
.dzw-pod {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px);
  margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-tertiary);
}
.dzw-pod b { color: var(--color-text-primary); font-weight: 500; }
.dzw-pod .p { text-align: right; }
@media (max-width: 640px) {
  .dzw { aspect-ratio: 1200 / 600; }
  .dzw-pod { grid-template-columns: 1fr; }
  .dzw-pod .p { text-align: left; }
}
.trzy {
  margin-top: clamp(32px, 4.5vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px);
}
@media (max-width: 860px) { .trzy { grid-template-columns: 1fr; } }
.trzy h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--color-text-primary); }
.trzy p { margin: 0; color: var(--color-text-secondary); line-height: 1.62; font-size: 0.97rem; }
.trzy .n { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); letter-spacing: 0.06em; display: block; margin-bottom: 10px; }