/* lp.css — landing Fachmat v3 (tor fabryki: STANDARD-KODU-LANDINGU.md)
   ════════════════════════════════════════════════════════════════════════════════════════
   Język wizualny = język APLIKACJI (base.css) — §8 rozstrzygnięty przed foldem:
   papier techniczny #F1EDE6 · grafit #26292B · pomarańcz ostrzegawcza #E05C18 ·
   Oswald 700 wersaliki / Inter / IBM Plex Mono. Detale serii z makiet: pomarańczowa
   kropka zamyka nagłówek; liczby i wartości techniczne w mono, czasem w obrysowanych
   chipach W ŚRODKU linii tekstu; kreski hairline dzielą regiony; akcent oznacza punkt,
   w którym coś się ZACZYNA albo POTWIERDZA — i nic poza tym.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── FONTY — te same pliki co aplikacja (self-host, pełny zakres znaków) ─────────────── */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/oswald-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;   /* font zmienny — jeden plik niesie 400/600/700 */
  font-display: swap;
  src: url("/fonts/inter-400-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-mono-600.woff2") format("woff2");
}

/* ── K1 · TOKENY ─────────────────────────────────────────────────────────────────────── */
:root {
  --papier: #F1EDE6;
  --powierzchnia: #FDFCF8;
  --grafit: #26292B;
  --czern: #1B1D1F;          /* grunt sekcji ciemnych — głębszy niż grafit tekstu */
  --biel-ciepla: #F5F1EA;
  --akcent: #E05C18;
  --akcent-cien: #C64A0A;    /* pismo akcentowe na jasnym (4,8:1 — tabela base.css) */
  --akcent-jasny: #EF803F;   /* pismo akcentowe na ciemnym */

  --f-glowa: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --f-tekst: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Rangi nagłówków (§4b-①): LICZBY Z POMIARU par dopasowania 13.08 (makiety @1440:
     fold/02/03/07 ≈ 135–150 px, 05-kulminacja ≈ 200 px, 04/06/08 ≈ 90 px) — nie z wyczucia. */
  --t-r1: clamp(3.2rem, 9vw, 8.4rem);
  --t-r2: clamp(2.8rem, 8vw, 7.2rem);
  --t-r3: clamp(2.2rem, 5.6vw, 5.2rem);
  --t-kulminacja: clamp(3.6rem, 11.4vw, 11.4rem);

  --luk: 12px;
  --luk-maly: 7px;

  /* MOTION-DNA (STANDARD-ANIMACJI): tokeny RAZ, zero magic numbers w regułach. */
  --mo-dur-1: .5s;
  --mo-dur-2: .75s;
  --mo-ease: cubic-bezier(.22, .9, .3, 1);
  --mo-dist: 22px;
  --mo-stagger: 90ms;
}

/* Tokeny KONTEKSTOWE (§4d): tło ustawia sekcja, komponent go NIE zna. */
.sek--ciemna, .stopka {
  --tlo: var(--czern);
  --tekst: var(--biel-ciepla);
  --cichy: #B7B1A7;
  --kreska: #3B3E41;
  --pole: #24272A;          /* karta/panel na czerni */
  --akcent-tekst: var(--akcent-jasny);
}
.sek--jasna {
  --tlo: var(--papier);
  --tekst: var(--grafit);
  --cichy: #63666A;
  --kreska: #DCD6CC;
  --pole: var(--powierzchnia);
  --akcent-tekst: var(--akcent-cien);
}

/* ── RESET / BAZA ────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding: pasek jest FIXED (K2b) — bez tego kotwice #jak/#cena chowają H2 pod paskiem.
   overflow-x CLIP: stany startowe wejść (translateX) nie mogą wystawać poza viewport
   (⛔ nie `hidden` — scroll container łamie sticky folda). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-tekst);
  font-size: 16px;
  line-height: 1.55;
  color: var(--grafit);
  background: var(--czern);   /* podłoga = czerń; sekcje malują własny grunt */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
p, li, dt, dd, blockquote { text-wrap: pretty; }

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

/* Skip-link chowany W PIONIE (wzorzec OperatorGO): poziome -999px wystaje z viewportu
   i słusznie łapie go bramka M2. */
.pomin {
  position: absolute; left: 16px; top: -100vh; z-index: 100;
  background: var(--akcent-cien); color: #fff; padding: 12px 18px; border-radius: var(--luk-maly);
  font-weight: 600;
}
.pomin:focus-visible { top: 16px; }
.sprite { position: absolute; }

/* Szerokość siatki Z MAKIET (~1280 px treści @1440): węższy kontener łamał nagłówki
   o linię za wcześnie i podnosił każdą sekcję (blok −23…−41% w parach, zmierzone 13.08). */
.kontener { max-width: 1368px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 44px); }

.sek { background: var(--tlo); color: var(--tekst); overflow: hidden; position: relative; }

/* ── TYPOGRAFIA WSPÓLNA ──────────────────────────────────────────────────────────────── */
/* Zapis ZDANIOWY — dominanta serii makiet (7/9 sekcji); 03 i 08 mają wersaliki NA OBU
   makietach (desktop+mobile) i dostają uppercase per sekcja, nie w bazie. */
/* ⛔ BEZ text-wrap:balance na nagłówkach — balance WYRÓWNUJE linie, a makiety łamią
   asymetrycznie (02: „…robisz / wieczorem. Albo wcale."); balance dawał trzecią linię
   i +500 px wysokości sekcji (zmierzone parą 13.08). Łamania niosą <br> z makiet. */
.tytul {
  font-family: var(--f-glowa);
  font-weight: 700;
  letter-spacing: .004em;
  line-height: 1.02;
}
.tytul--r1 { font-size: var(--t-r1); }
.tytul--r2 { font-size: var(--t-r2); }
.tytul--r3 { font-size: var(--t-r3); }
.tytul--kulminacja { font-size: var(--t-kulminacja); }
.jak .tytul, .pytania .tytul { text-transform: uppercase; letter-spacing: .012em; }
.kropka { color: var(--akcent); }   /* pomarańczowa kropka zamyka zdanie — element serii */

/* Kreska z kropką — akcent znaczy PUNKT POCZĄTKU (element serii pod tytułami 04/05) */
.kreska-akcent { display: block; position: relative; height: 1px; background: var(--kreska); margin-block: 26px; }
.kreska-akcent::before {
  content: ""; position: absolute; left: 0; top: -4.5px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--akcent);
}

.lead { font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.55; max-width: 30em; }
.dopisek { font-size: 1rem; color: var(--cichy); }
.mono { font-family: var(--f-mono); font-weight: 600; font-variant-numeric: tabular-nums; font-style: normal; }

.ikona { width: 24px; height: 24px; flex: 0 0 auto; }
.ikona--inline {
  display: inline-block; width: 1.05em; height: 1.05em;
  vertical-align: -.16em; margin-right: .18em; color: var(--akcent-tekst);
}

/* Obiekty w linii tekstu (seria: „numbers held in small outlined chips INSIDE the line") */
.chip-obiekt, .chip-mono, .chip-ikona {
  display: inline-flex; align-items: center; gap: .3em;
  border: 1px solid var(--kreska); border-radius: var(--luk-maly);
  padding: .08em .5em; white-space: nowrap;
  font-family: var(--f-mono); font-weight: 600; font-size: .82em;
  vertical-align: .04em;
}
.chip-obiekt .ikona { width: .95em; height: .95em; color: var(--akcent-tekst); }
.chip-mono { color: var(--akcent-tekst); border-color: currentColor; border-style: dashed; }
.chip-ikona { padding: .14em; vertical-align: -.14em; }
.chip-ikona .ikona { width: 1em; height: 1em; color: var(--tekst); }

.link-akcent {
  display: inline-flex; align-items: center; gap: .5em;
  padding-block: 9px;                     /* cel dotykowy ≥40 px (M3) */
  color: var(--akcent-tekst); font-weight: 600; font-size: 1.1rem;
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.link-akcent:hover, .link-akcent:focus-visible { text-decoration-thickness: 2px; }
.link-akcent .ikona--inline { margin: 0; color: var(--akcent-tekst); }
.link-akcent--jasny { color: var(--tekst); }

/* Przycisk = OBIEKT sekcji (§4b-⑤): na makiecie ~64 px i pismo większe od tekstu strony. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-tekst); font-weight: 600; font-size: 1rem;
  padding: 12px 22px; border-radius: var(--luk); border: 1px solid transparent;
  cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms;
  white-space: nowrap;
}
/* Biel na #E05C18 = 3,7:1 — wystarcza WYŁĄCZNIE dla dużego/grubego pisma (tabela base.css),
   dlatego przycisk akcentowy jest zawsze bold 700 (WCAG „large text" ≥ 18,66 px bold). */
.btn--akcent { background: var(--akcent); color: #fff; font-weight: 700; }
.btn--akcent:hover { background: var(--akcent-cien); }
.btn--obrys { border-color: var(--kreska); color: var(--tekst); }
.btn--obrys:hover { border-color: var(--tekst); }
.btn--duzy {
  min-height: 64px; padding: 16px 34px;
  font-size: 1.18rem; text-wrap: balance; white-space: normal;
}

/* ── 00 · PASEK — PRZYPIĘTY (K2b, uwaga Tomka 13.08: „header nie jest przypięty") ───── */
/* fixed (nie sticky): pasek jest OVERLAY na hero-tle — transparentny na starcie (scena
   prześwituje), po scrollu JS dokłada .pasek--tlo z czernią (czytelność nad jasnymi
   sekcjami). fixed nie zajmuje flow, więc hero dalej liczy 100dvh od góry okna. */
.pasek {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  --tlo: transparent; --tekst: var(--biel-ciepla); --kreska: #4A4D50; --cichy: #B7B1A7;
  color: var(--tekst);
  transition: background-color .25s ease;
}
.pasek--tlo { background: var(--czern); }
.pasek__srodek {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-block: 20px;
  border-bottom: 1px solid rgba(245, 241, 234, .14);   /* hairline paska z makiety */
}
.znak {
  display: inline-flex; align-items: center; min-height: 44px;   /* cel dotykowy (M3) */
  color: var(--tekst);
}
/* PEŁNE logo marki (sygnet + wordmark) z `app_settings.brand_logo_url` — K2-LOGO.
   Wysokość steruje rozmiarem, szerokość leci z proporcji pliku; atrybuty width/height
   w HTML trzymają miejsce przed dekodowaniem obrazu (CLS = 0). */
.znak__logo { height: 34px; width: auto; }
.pasek__nav { display: flex; gap: clamp(14px, 2.5vw, 32px); margin-left: auto; }
.pasek__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: 1.05rem; opacity: .92; transition: opacity 150ms;
}
.pasek__nav a:hover { opacity: 1; }
.pasek__akcje { display: flex; align-items: center; gap: 14px; }
.pasek__login { min-height: 48px; border-color: var(--akcent); }
.pasek__login:hover { border-color: var(--akcent-jasny); color: var(--akcent-jasny); }

.pasek__menu {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 48px; height: 48px; padding: 12px; flex: 0 0 auto;  /* ⛔ flex-shrink zgniata cel dotykowy */
  background: none; border: 1px solid var(--kreska); border-radius: var(--luk-maly);
  cursor: pointer;
}
.pasek__menu span { display: block; height: 2px; background: var(--tekst); border-radius: 1px; }
.menu-mobilne {
  display: none; flex-direction: column;
  background: var(--czern); border-top: 1px solid #3B3E41;
  border-bottom: 1px solid #3B3E41;   /* nad ciemną sekcją panel zlewał się z treścią (QA) */
  padding: 10px clamp(20px, 4vw, 44px) 18px;
}
.menu-mobilne a { padding: 13px 4px; font-weight: 600; color: var(--biel-ciepla); border-bottom: 1px solid #2E3134; }
.menu-mobilne a:last-child { border-bottom: 0; }
.menu-mobilne:not([hidden]) { display: flex; }

/* ── 01 · FOLD — HERO-TŁO + STICKY KURTYNA (K5c) ─────────────────────────────────────── */
/* Uwagi Tomka 13.08: (1) „największy efekt będzie jak to video będzie tłem i będzie tak
   fajnie się wtapiać w hero i zostawiać miejsce na treść" — poziomy klip 3:2 rozlewa się
   na CAŁĄ sekcję (scena komponowana z pustą lewą strefą), a TREŚĆ trzyma siatkę kontenera
   jak pozostałe sekcje; (2) „hero musi być zawsze sticky na mobile i desktop" — sekcja
   klei się do góry, kolejne sekcje (.sek jest position:relative i późniejsze w DOM)
   nasuwają się na nią jak kurtyna. Ujemny top: hero WYŻSZE niż okno najpierw doscrollowuje
   swoją treść (CTA!), dopiero potem się przykleja. */
.fold {
  position: sticky;
  /* ⛔ `top: calc(100dvh - 100%)` NIE DZIAŁA: procent w top liczy się od bloku
     ZAWIERAJĄCEGO (main), nie od własnej wysokości — QA 13.08 zmierzyło top=0 na mobile
     i CTA folda nigdy nie wchodziło w kadr. Ujemny top (hero wyższe niż okno najpierw
     doscrollowuje treść, potem się przykleja) wyznacza JS (lp.js, blok sticky-kurtyny);
     top:0 to fallback bez JS — hero niższe niż okno klei się poprawnie. */
  top: 0;
  /* 92vh zostawiało ~200px pusty pas pod herem na 1080p (QA) — hero domyka pierwszy ekran. */
  min-height: min(100vh, 1440px);
  min-height: min(100dvh, 1440px);   /* cap pokrywa 1440p; 1040/1200 zostawiały krem pod herem (QA r2/r3) */
}
.fold__tlo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;   /* bohater sceny w prawych 2/3 kadru */
}
.fold__tlo--m, .final__tlo--m { display: none; }   /* pionowe tła żyją TYLKO na mobile */
/* Scrim zamiast masek: czytelność bieli na jasnej scenie po lewej + wtopienie w czerń
   sekcji przy górze/dole — scena „wtapia się", nigdzie nie kończy się krawędzią. */
.fold__scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* Wartości z pomiaru kontrastu QA 13.08: pion domyka AA dopisku (4,5:1) i topi dół
     sceny w czerni przed krawędzią kurtyny (bez tego jasny blat ciął się „nożem" o 02);
     poziom .38@56% podnosi najsłabszy punkt H1 z 2,95:1 do ~3,5:1. */
  background:
    linear-gradient(90deg, rgba(27,29,31,.90) 0, rgba(27,29,31,.72) 30%, rgba(27,29,31,.38) 56%, rgba(27,29,31,.32) 100%),
    linear-gradient(180deg, rgba(27,29,31,.62) 0, rgba(27,29,31,.10) 24%, transparent 52%, rgba(27,29,31,.34) 74%, rgba(27,29,31,.88) 100%);
}
.fold__pas {
  position: relative;   /* treść nad tłem i scrimem */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%);
  align-items: center;
  min-height: min(100vh, 1440px);
  min-height: min(100dvh, 1440px);   /* cap pokrywa 1440p; 1040/1200 zostawiały krem pod herem (QA r2/r3) */
  padding-block: 120px 72px;
}
.fold__slowo { grid-column: 1; }
/* ⛔ bez max-width na kolumnie słowa — 34em (544 px) łamało h1 do trzeciej linii;
   szerokość ogranicza kolumna grida, wąski zostaje sam lead. */
.fold__slowo .lead { margin-top: 26px; font-size: clamp(1.25rem, 2vw, 1.7rem); max-width: 34em; }
.fold__slowo .dopisek { font-size: 1.25rem; }
.fold__slowo .btn { margin-top: 38px; }
.fold__slowo .dopisek { margin-top: 14px; }

.fold__scena { grid-column: 2; position: relative; min-height: 480px; }
.fold__foto { display: none; }   /* pionowy klip sceny żyje TYLKO na mobile (blok sekwencji) */

/* Żywa karta-przepływ (rejestr §6, sygnatura ruchu): stan startowy nadaje JS (.ruch),
   bez JS karta po prostu stoi z pełną treścią. */
.fold__karta {
  position: absolute; z-index: 2; left: clamp(8px, 3vw, 40px); bottom: clamp(20px, 5vh, 56px);
  width: min(392px, 86%);
  background: rgba(27, 29, 31, .88);
  border: 1px solid #3B3E41; border-radius: var(--luk);
  padding: 18px 20px; backdrop-filter: blur(4px);
}
.fold__karta-tytul {
  font-family: var(--f-mono); font-size: .95rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: #B7B1A7; margin-bottom: 10px;
}
.fold__karta-wiersze li {
  display: flex; justify-content: space-between; gap: 14px;
  padding-block: 10px; border-bottom: 1px solid #2E3134;
  font-size: 1.08rem; color: var(--biel-ciepla);
}
.fold__karta-wiersze li span { white-space: nowrap; }
.fold__karta .mono { white-space: nowrap; }
.fold__karta-wiersze .mono { color: var(--biel-ciepla); }
.fold__karta-suma {
  display: flex; justify-content: space-between; gap: 14px;
  padding-top: 13px; font-size: 1.05rem; font-weight: 600; color: var(--biel-ciepla);
}
.fold__karta-suma .mono { color: var(--akcent-jasny); font-size: 1.2rem; min-width: 6ch; text-align: right; }
.fold__karta-pdf {
  display: flex; align-items: center; gap: 8px;
  margin-top: 13px; padding: 11px 15px;
  border: 1px solid var(--akcent); border-radius: var(--luk-maly);
  color: var(--akcent-jasny); font-family: var(--f-mono); font-weight: 600; font-size: 1.02rem;
}
.fold__karta-pdf .ikona { width: 18px; height: 18px; }

/* Choreografia karty: wiersze meldują się po kolei po .fold-go (JS), suma rośnie. */
.ruch .fold__karta-wiersze li, .ruch .fold__karta-pdf { opacity: 0; transform: translateY(10px); }
.ruch .fold__karta-wiersze li { transition: opacity var(--mo-dur-1) var(--mo-ease), transform var(--mo-dur-1) var(--mo-ease); }
.ruch .fold__karta-pdf { transition: opacity var(--mo-dur-2) var(--mo-ease), transform var(--mo-dur-2) var(--mo-ease); }
.fold-go .fold__karta-wiersze li:nth-child(1) { transition-delay: calc(var(--mo-stagger) * 2); }
.fold-go .fold__karta-wiersze li:nth-child(2) { transition-delay: calc(var(--mo-stagger) * 6); }
.fold-go .fold__karta-wiersze li:nth-child(3) { transition-delay: calc(var(--mo-stagger) * 10); }
.fold-go .fold__karta-pdf { transition-delay: calc(var(--mo-stagger) * 15); }
.fold-go .fold__karta-wiersze li, .fold-go .fold__karta-pdf { opacity: 1; transform: none; }

/* ── 02 · DZISIAJ ────────────────────────────────────────────────────────────────────── */
/* Cień KURTYNY (K5c, QA r2): fade musi jechać z krawędzią nasuwającej się sekcji, nie
   siedzieć w scrimie folda — cięcie wędruje po scenie przy scrollu (zmierzone: luminancja
   0,88 tuż nad krawędzią). box-shadow nie podlega overflow:hidden i maluje się nad tłem
   sticky-hero — jasna scena topi się w cień tuż przed krawędzią niezależnie od scrolla. */
.dzisiaj { box-shadow: 0 -60px 90px rgba(27, 29, 31, .7); }
.dzisiaj .kontener { padding-block: clamp(72px, 10vw, 128px); }
/* Karty dróg na PRZERYWANEJ osi (makieta desktop: obrysowane karty, ikona | kreska | tekst) */
.drogi {
  margin-top: clamp(36px, 5vw, 64px);
  border-left: 2px dashed var(--kreska);
  padding-left: clamp(20px, 3vw, 40px);
  display: grid; gap: 18px;
  max-width: 62rem;
}
.droga {
  position: relative;
  display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto;
  column-gap: 26px; align-items: center;
  border: 1.5px solid var(--tekst); border-radius: var(--luk);
  padding: 24px 30px; background: var(--pole);
}
.droga::before {
  /* kropka na osi — akcent znaczy punkt, w którym coś się zaczyna */
  content: ""; position: absolute; left: calc(-1 * clamp(20px, 3vw, 40px) - 8px); top: 50%;
  width: 13px; height: 13px; border-radius: 50%; background: var(--akcent);
  transform: translateY(-50%);
}
.droga::after {
  /* pionowa kreska między ikoną a tekstem (makieta) */
  content: ""; grid-column: 2; grid-row: 1 / 3; width: 1px; height: 100%;
  background: var(--kreska); justify-self: center;
}
.droga__ikona {
  grid-row: 1 / 3; grid-column: 1; width: 64px; height: 64px; margin-inline: 6px;
  color: var(--tekst);
}
.droga__nazwa {
  grid-column: 3; font-family: var(--f-glowa); font-weight: 700; font-size: 2rem;
  line-height: 1.15;
}
.droga__koszt { grid-column: 3; margin-top: 6px; font-family: var(--f-mono); font-weight: 500; color: var(--cichy); font-size: 1.3rem; }
.dzisiaj__puenta {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 30px; border-top: 2px solid var(--tekst);   /* kreska nad puentą z makiety */
  max-width: 62rem;
  font-family: var(--f-glowa); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.1;
}

/* ── 03 · JAK (ekran #1: kreator) ────────────────────────────────────────────────────── */
.jak__pas {
  padding-block: clamp(72px, 10vw, 128px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: clamp(36px, 6vw, 88px); align-items: center;
}
/* Stopień z pomiaru pary: r2 łamał „KLIKASZ, JEDZIESZ" do czwartej linii — makieta ma trzy. */
.jak .tytul { font-size: clamp(2.4rem, 6.4vw, 5.8rem); }
/* Numerację kroków niesie FORMA osi: kółko z kropką akcentu, przerywany pion między nimi. */
.kroki { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: 0; }
.krok {
  position: relative;
  padding: 26px 0 26px 96px; border-bottom: 1px solid var(--kreska);
  font-size: 1.4rem; line-height: 1.5; max-width: 24em;
}
.krok:last-child { border-bottom: 0; }
.krok::before {
  content: ""; position: absolute; left: 0; top: 24px;
  width: 46px; height: 46px;
  border: 1.5px solid var(--kreska); border-radius: 50%;
  background: radial-gradient(circle, var(--akcent) 0 8px, transparent 8.5px);
}
.krok + .krok::after {
  content: ""; position: absolute; left: 23px; top: -14px; height: 28px;
  border-left: 2px dashed var(--kreska);
}
.jak .link-akcent { margin-top: 30px; }

/* Pełna rama telefonu: obudowa, głośnik, pasek domowy — DOM-mock, nie zrzut. */
.telefon {
  border: 3px solid #43464A; border-radius: 44px;
  background: #101214; padding: 16px 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.telefon::before {
  content: ""; display: block; width: 84px; height: 5px; border-radius: 3px;
  background: #43464A; margin: 2px auto 14px;   /* głośnik */
}
.telefon::after {
  content: ""; display: block; width: 130px; height: 5px; border-radius: 3px;
  background: #43464A; margin: 14px auto 2px;   /* pasek domowy */
}
.telefon__ekran {
  background: var(--czern); border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
}
.telefon__wiersze { padding: 18px 20px 12px; }
.telefon__wiersze li {
  display: flex; align-items: center; gap: 12px;
  padding-block: 20px; border-bottom: 1px solid #2E3134;
  font-size: 1.2rem; color: var(--biel-ciepla);
}
.telefon__wiersze li span { flex: 1; }
.telefon__wiersze li:last-child { border-bottom: 0; }
.telefon__nowy {
  color: var(--akcent-jasny);
  margin: 8px -8px; padding-inline: 10px;
  border: 1.5px solid var(--akcent); border-radius: var(--luk);
}
.telefon__nowy .ikona {
  width: 26px; height: 26px; padding: 5px; border-radius: 50%;
  background: var(--akcent); color: #fff;   /* check w wypełnionym kółku (makieta) */
}
.telefon__nowy .mono { color: var(--akcent-jasny); }
.telefon__suma {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 22px 20px; background: #24272A; border-top: 1px solid #3B3E41;
  font-weight: 600; font-size: 1.2rem; color: var(--biel-ciepla);
}
.telefon__suma .mono { font-size: 1.5rem; }

/* ── 04 · CENNIK STARTOWY ────────────────────────────────────────────────────────────── */
.cennik__pas {
  padding-block: clamp(72px, 10vw, 128px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 88px); align-items: center;
}
.liczba {
  font-family: var(--f-glowa); font-weight: 700;
  font-size: clamp(9rem, 21vw, 19rem); line-height: .88; letter-spacing: -.01em;
}
.cennik .tytul { margin-top: 14px; font-size: clamp(2rem, 5.1vw, 4.6rem); }
.cennik .kreska-akcent { max-width: 30rem; }
.cennik .lead { margin-top: 0; }
/* Karty działów: nazwa · raster kropek (pozycje!) · liczba w akcencie (makieta) */
.dzialy {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding-bottom: 30px; border-bottom: 1px solid var(--kreska); margin-bottom: 30px;
}
.dzialy li {
  background: var(--pole); border: 1px solid var(--kreska); border-radius: var(--luk-maly);
  padding: 26px 10px 24px; text-align: center; display: grid; gap: 18px; justify-items: center;
}
.dzialy__nazwa { font-size: 1.2rem; font-weight: 600; color: var(--tekst); }
.dzialy__raster {
  width: 60px; height: 46px;
  background-image: radial-gradient(circle, var(--kreska) 2px, transparent 2.4px);
  background-size: 12px 12px; background-position: center;
}
.dzialy__ile {
  font-family: var(--f-glowa); font-weight: 700;
  font-size: 3.1rem; line-height: 1; color: var(--akcent-tekst);
}
.probka { border: 1.5px solid var(--tekst); border-radius: var(--luk); background: var(--pole); overflow: hidden; }
.probka li {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 30px; border-bottom: 1px solid var(--kreska); font-size: 1.35rem;
}
.probka li:last-child { border-bottom: 0; }
.probka li span { flex: 1; }
.probka li i { color: var(--cichy); font-weight: 500; font-size: 1.2rem; }
.probka li i::before, .probka li b::before {
  content: "·"; color: var(--cichy); margin-right: 16px; font-family: var(--f-tekst);
}
.probka li b { font-size: 1.3rem; }
.probka__edycja {
  outline: 2px solid var(--akcent); outline-offset: -2px;
  background: rgba(224, 92, 24, .07);
}
.probka__edycja .ikona { width: 20px; height: 20px; color: var(--akcent-tekst); }
.probka__edycja .chip-mono { font-size: .95rem; padding-block: .16em; border-style: solid; }
.probka__edycja .chip-mono::after { content: "|"; color: var(--cichy); font-weight: 400; }

/* ── 05 · PDF — KULMINACJA ───────────────────────────────────────────────────────────── */
.pdf__pas {
  padding-block: clamp(88px, 12vw, 152px);
  display: grid; grid-template-columns: minmax(340px, 580px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 100px); align-items: center;
}
.pdf__slowo .lead { max-width: 21em; }
.dokument {
  background: var(--powierzchnia); color: var(--grafit);
  border-radius: 4px; padding: clamp(28px, 3.8vw, 52px);
  /* kartka świeci na graficie — najsilniejszy kontrast strony (kulminacja);
     poświata STATYCZNA (⛔ nie animowana — zakaz box-shadow w pętli) */
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 90px rgba(245, 241, 234, .16);
}
.dokument__glowa {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 22px; border-bottom: 1px solid #C8C2B8;
}
.dokument__logo { width: 74px; height: 74px; color: var(--grafit); }
.dokument__logo .ikona { width: 100%; height: 100%; }
.dokument__dane { font-size: .92rem; font-weight: 500; color: #63666A; text-align: left; line-height: 1.8; }
.dokument__numer {
  margin-top: 26px; font-family: var(--f-glowa); font-weight: 700; font-size: 2rem;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.dokument__numer .mono { font-size: 1.4rem; font-weight: 600; }
.dokument__zakres { margin-top: 20px; font-weight: 500; }
.dokument__zakres li {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 15px; border-bottom: 1px solid #DCD6CC; font-size: 1.02rem;
}
.dokument__zakres b { font-weight: 600; }
.dokument__suma {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 18px; border-bottom: 1px solid #DCD6CC;
  font-weight: 700; font-size: 1.25rem;
}
.dokument__suma .mono { font-size: 1.55rem; }
.dokument__waznosc { margin-top: 16px; font-size: .88rem; font-weight: 500; color: #63666A; }
.pdf .kreska-akcent { max-width: 32rem; }
.pdf__slowo .lead { margin-top: 0; }
.pdf__slowo .link-akcent { margin-top: 30px; }

/* ── 06 · PORZĄDEK (ekran #3: lista ofert) ───────────────────────────────────────────── */
.porzadek .kontener { padding-block: clamp(72px, 10vw, 128px); }
.porzadek .tytul { padding-bottom: 32px; border-bottom: 1px solid var(--kreska); }
.porzadek__pas {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(320px, 7fr);
  gap: clamp(36px, 6vw, 80px); align-items: center;
}
.mechanizmy { display: grid; gap: 0; }
.mechanizmy li {
  display: flex; align-items: center; gap: 20px;
  padding-block: 22px; border-bottom: 1px solid var(--kreska);
  font-size: 1.35rem; line-height: 1.45; max-width: 26em;
}
.mechanizmy li:last-child { border-bottom: 0; }
.mechanizmy li::after {
  /* kropka akcentu między ikoną a zdaniem (makieta) — akcent znaczy punkt */
  content: ""; order: 1; width: 11px; height: 11px; border-radius: 50%;
  background: var(--akcent); flex: 0 0 auto;
}
.mechanizmy .ikona { order: 0; }
.mechanizmy span { order: 2; }
.mechanizmy .ikona {
  width: 64px; height: 64px; padding: 15px;
  border: 1.5px solid var(--tekst); border-radius: 50%;
  color: var(--tekst); background: var(--pole);
}
.rejestr {
  border: 1.5px solid var(--tekst); border-radius: var(--luk-maly);
  background: var(--pole);
}
.rejestr__wiersze { font-family: var(--f-mono); }
.rejestr__wiersze li { padding: 28px 32px; font-size: 1.3rem; }
.rejestr__oferta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid var(--kreska); font-weight: 500;
}
.rejestr__oferta:last-child { border-bottom: 0; }
.rejestr__oferta span { flex: 1; }
.blaszka {
  font-style: normal; font-family: var(--f-mono); font-weight: 600; font-size: 1.2rem;
  color: var(--akcent-cien);
}
.rejestr__wersja {
  display: flex; align-items: center; gap: 12px;
  color: var(--cichy); font-size: 1.15rem;
  padding-left: 56px; border-bottom: 1px solid var(--kreska);
  background: rgba(38, 41, 43, .045);   /* pas wersji lekko cofnięty (makieta) */
}
.rejestr__wersja i { font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: 1rem; }
.rejestr__galaz {
  width: 20px; height: 16px; flex: 0 0 auto;
  border-left: 2px solid var(--cichy); border-bottom: 2px solid var(--cichy);
  border-bottom-left-radius: 6px; margin-top: -14px;
}

/* ── 07 · CENA ───────────────────────────────────────────────────────────────────────── */
/* Cała sekcja LEWOSTRONNA (makieta), karty i CTA na pełną szerokość kontenera. */
.cena .kontener { padding-block: clamp(80px, 11vw, 140px); }
#cena-mc { display: inline-block; min-width: 2ch; }   /* pole hydratacji „—"→„99" (CLS) */
/* Stopień z pomiaru pary: r2 łamał „roboczogodzina" do trzeciej linii — makieta ma dwie. */
.cena .tytul { font-size: clamp(2.4rem, 6.6vw, 5.9rem); }
.plany {
  margin-top: clamp(40px, 6vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.plan {
  border: 1.5px solid var(--biel-ciepla); border-radius: var(--luk);
  background: transparent; padding: 34px 38px 38px;
}
.plan__nazwa {
  font-weight: 700; font-size: 1.7rem;
  padding-bottom: 18px; border-bottom: 1px solid var(--kreska);
}
.plan__kwota { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* min-width rezerwuje pole hydratacji „—"→„949" (CLS=0, J1) */
.plan__kwota > b { font-family: var(--f-mono); font-weight: 600; font-size: clamp(3.2rem, 5.8vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch; }
.plan__kwota > b::after { content: " zł"; }
.plan__jedn { font-family: var(--f-mono); font-weight: 500; font-size: 1.5rem; color: var(--cichy); }
.plan__nota {
  margin-top: 18px; display: inline-block;
  border: 1px solid var(--biel-ciepla); border-radius: var(--luk-maly);
  padding: 8px 16px; font-size: 1.3rem; color: var(--tekst);
}
.cena__trial {
  margin-top: 30px; display: flex; align-items: center; gap: 22px;
  border: 2px dashed var(--kreska); border-radius: var(--luk-maly); padding: 24px 30px;
  font-weight: 500; font-size: 1.4rem;
}
.cena__trial-kropka {
  width: 18px; height: 18px; border-radius: 50%; background: var(--akcent); flex: 0 0 auto;
}
/* Baner polecenia (?ref) — ten sam rytm co listwa trialu, akcent zamiast kreski.
   Domyslnie [hidden]; wchodzi tylko dla ruchu z polecenia. */
.cena__ref {
  margin-top: 18px; padding: 18px 30px;
  border: 2px solid var(--akcent); border-radius: var(--luk-maly);
  font-weight: 500; font-size: 1.3rem;
}
.cena__ref b { font-weight: 700; color: var(--akcent); }
.cena__ref[hidden] { display: none; }

.cena__cta {
  margin-top: 30px; width: 100%;
  min-height: 104px; font-size: 2.4rem; font-weight: 700;
}

/* ── 08 · PYTANIA (FAQ-rejestr) ──────────────────────────────────────────────────────── */
.pytania .kontener { padding-block: clamp(72px, 10vw, 128px); }
.faq {
  margin-top: clamp(32px, 4.5vw, 56px);
  border-left: 2px solid var(--kreska);
  padding-left: clamp(20px, 3vw, 36px);
}
.faq__para {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 10px 32px; align-items: start;
  padding-block: 18px; border-bottom: 1px solid var(--kreska);
}
.faq__para:last-child { border-bottom: 0; }
.faq__para::before {
  content: ""; position: absolute; left: calc(-1 * clamp(20px, 3vw, 36px) - 5px); top: 30px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--akcent);
}
.faq__para dt {
  display: flex; align-items: center; gap: 22px;
  font-weight: 700; font-size: 1.6rem;
}
.faq__para dt .ikona {
  width: 62px; height: 62px; padding: 15px;
  border: 1.5px solid var(--tekst); border-radius: 50%; color: var(--tekst); background: var(--pole);
}
.faq__para dd {
  color: var(--tekst); font-size: 1.35rem; line-height: 1.55; align-self: center;
  border-left: 1px solid var(--kreska); padding-left: 34px;   /* pionowa kreska pary (makieta) */
}
.faq__para--kto {
  margin-top: 10px; border: 1px solid var(--akcent); border-radius: var(--luk);
  padding: 20px 22px; background: var(--pole);
}
.faq__para--kto::before { top: 32px; }
.faq__para--kto dt .ikona { color: var(--akcent-tekst); border-color: var(--akcent); }

/* ── 09 · FINAL ──────────────────────────────────────────────────────────────────────── */
/* HERO-TŁO (K5c) — lustrzana klamra folda, bez sticky (kurtynę ma fold). */
.final { position: relative; min-height: min(78vh, 720px); }
.final__tlo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% center;   /* van i instalator w prawej połowie */
}
.final__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(27,29,31,.86) 0, rgba(27,29,31,.6) 32%, rgba(27,29,31,.2) 58%, rgba(27,29,31,.3) 100%),
    linear-gradient(180deg, rgba(27,29,31,.55) 0, rgba(27,29,31,.08) 26%, transparent 58%, rgba(27,29,31,.6) 100%);
}
.final__pas {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
  align-items: center; min-height: min(78vh, 720px);
  padding-block: clamp(80px, 11vw, 140px);
}
.final__slowo { grid-column: 1; }
.final .tytul { font-size: clamp(3rem, 8.2vw, 7.4rem); }
.final__slowo .btn { margin-top: 38px; }
.final__slowo .dopisek { margin-top: 14px; }
.final__scena { grid-column: 2; position: relative; min-height: 420px; }
.final__foto { display: none; }   /* pionowy klip — TYLKO mobile */

/* ── STOPKA — podłoga; 09 wtapia się w nią jednym gruntem (kreska oddziela) ──────────── */
.stopka { background: var(--czern); color: var(--biel-ciepla); border-top: 1px solid #2E3134; }
.stopka__siatka {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); padding-block: clamp(44px, 6vw, 72px) 28px;
}
.znak--stopka .znak__logo { height: 30px; }
.stopka__blurb { margin-top: 12px; color: #B7B1A7; font-size: .92rem; max-width: 22em; }
.stopka__grupa { display: grid; gap: 9px; align-content: start; }
.stopka__grupa h3 {
  font-family: var(--f-mono); font-weight: 600; font-size: .8rem;   /* ≥12 px (M4) */
  text-transform: uppercase; letter-spacing: .14em; color: #8E887E; margin-bottom: 6px;
}
.stopka__grupa a {
  display: inline-flex; align-items: center; min-height: 42px;
  color: #D9D3C9; font-size: .97rem; transition: color 150ms;
}
.stopka__grupa a:hover { color: var(--biel-ciepla); }
.stopka__grupa { gap: 2px; }
.stopka__copy {
  padding-block: 20px 30px; border-top: 1px solid #2E3134;
  color: #8E887E; font-size: .9rem;
}
.stopka__copy a {
  display: inline-block; padding-block: 9px;
  color: #B7B1A7; text-decoration: underline; text-underline-offset: 2px;
}

/* ── RUCH — wejścia w kadr (L1); stan startowy nadaje JS, nie HTML ───────────────────── */
.we { opacity: 0; transform: translateY(var(--mo-dist)); }
.we.w-kadrze {
  opacity: 1; transform: none;
  transition: opacity var(--mo-dur-2) var(--mo-ease), transform var(--mo-dur-2) var(--mo-ease);
}
/* CHOREOGRAFIA KASKAD: dzieci list meldują się po kolei (delay per nth-child). */
.drogi .we.w-kadrze:nth-child(2), .kroki .we.w-kadrze:nth-child(2),
.mechanizmy .we.w-kadrze:nth-child(2), .faq .we.w-kadrze:nth-child(2) { transition-delay: var(--mo-stagger); }
.drogi .we.w-kadrze:nth-child(3), .kroki .we.w-kadrze:nth-child(3),
.mechanizmy .we.w-kadrze:nth-child(3), .faq .we.w-kadrze:nth-child(3) { transition-delay: calc(var(--mo-stagger) * 2); }
.mechanizmy .we.w-kadrze:nth-child(4), .faq .we.w-kadrze:nth-child(4) { transition-delay: calc(var(--mo-stagger) * 3); }
.mechanizmy .we.w-kadrze:nth-child(5), .faq .we.w-kadrze:nth-child(5) { transition-delay: calc(var(--mo-stagger) * 4); }
.faq .we.w-kadrze:nth-child(6) { transition-delay: calc(var(--mo-stagger) * 5); }
.faq .we.w-kadrze:nth-child(7) { transition-delay: calc(var(--mo-stagger) * 6); }
/* L3 #2 — dokument (kulminacja): wjeżdża głębiej i odzyskuje skalę; poświata gotowa w cieniu. */
.gest { opacity: 0; transform: translateY(34px) scale(.965); }
.gest.w-kadrze {
  opacity: 1; transform: none;
  transition: opacity .9s var(--mo-ease), transform .9s var(--mo-ease);
}

/* ── MOBILE (K4 — REDESIGN wg makiet mobile, nie zwężenie) ───────────────────────────── */
@media (max-width: 64rem) {
  .pasek__nav, .pasek__akcje { display: none; }
  .pasek__menu { display: flex; margin-left: auto; }
  /* mobile: pasek stale na czerni (fixed z bazy; menu rozwija się pod nim) */
  .pasek { background: var(--czern); }

  /* 01 · makieta mobile: nagłówek → lead → SCENA → CTA → dopisek (scena w środku
     sekwencji czytania). `display: contents` spłaszcza kolumny, `order` układa treścią
     (MOBILE-PAS pkt 3). Karta-przepływ znika: na 360 px zasłaniałaby całą scenę —
     sygnaturę niesie desktop (wpis w KONCEPT-GRAFIK). Poziome TŁO hero znika — scenę
     niesie pionowy klip bloku; sticky-kurtyna (K5c) działa też tutaj (baza .fold). */
  /* padding-top 108: pasek jest teraz FIXED (nie zajmuje flow) i ma ~89px — przy 84px
     H1 wchodziło pod pasek (QA r1 mierzyło zerowy odstęp jeszcze przy pasku w flow). */
  /* MODEL TŁA także na mobile (17.08, druga runda uwagi Tomka: „wideo ma być TŁEM, nie
     osobnym kafelkiem — cały ekran to było wideo, a przycisk spadł pod zgięcie"). Scena
     pionowa 2:3 rozlana na CAŁĄ sekcję; treść z CTA stoi NA scrimie, w górnej — spokojnej
     z kompozycji — strefie kadru. Sticky-kurtyna zostaje (top nadaje JS jak na desktopie). */
  .fold { min-height: 100dvh; padding-block: 108px 44px; }
  .fold__tlo { display: none; }
  .fold__tlo--m {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center bottom;   /* krótki ekran tnie spokojną górę, nie bohatera */
  }
  /* Scrim pionowy: góra niesie H1+lead+CTA (kontrast), środek odsłania scenę, dół topi
     jasny kadr w czerni przed krawędzią kurtyny (jak desktop, oś obrócona). */
  .fold__scrim {
    /* Granice górnej (tekstowej) strefy w PIKSELACH: treść folda ma stałą wysokość
       (~530 px z paddingiem), a procenty przesuwały ciemną strefę względem dopiska
       między 844 a 667 — na krótkim ekranie dopisek lądował na czystej scenie.
       Dół w calc() od krawędzi: scena topi się w czerni przed kurtyną jak desktop. */
    background:
      linear-gradient(180deg, rgba(27,29,31,.94) 0, rgba(27,29,31,.86) 320px, rgba(27,29,31,.60) 500px, rgba(27,29,31,.28) 570px, rgba(27,29,31,.08) 630px, transparent 680px, transparent calc(100% - 140px), rgba(27,29,31,.5) calc(100% - 50px), rgba(27,29,31,.92) 100%);
  }
  .fold__pas { display: block; min-height: 0; padding-block: 0; }
  .fold__slowo { display: block; max-width: none; }
  .fold .lead { margin-top: 20px; }
  .fold .btn--duzy { margin-top: 26px; }
  .fold__scena, .fold__karta { display: none; }
  /* KRÓTKIE ekrany (SE/667, 360×740): CTA MUSI domknąć pierwszy ekran */
  @media (max-height: 760px) {
    .fold { padding-block: 92px 36px; }
    .fold .lead { margin-top: 14px; }
    .fold .btn--duzy { margin-top: 18px; }
  }

  /* 02 · karty dróg ciaśniej (mobile makieta) */
  .droga { padding: 16px 18px; column-gap: 16px; }
  .droga__ikona { width: 52px; height: 52px; padding: 10px; }
  .droga__nazwa { font-size: 1.3rem; }
  .droga__koszt { font-size: .95rem; }

  /* 03 · oś kroków ciaśniej; kwoty ekranu NIGDY nie łamią się od „zł" */
  .krok { padding: 22px 0 22px 62px; font-size: 1.08rem; }
  .krok::before { width: 40px; height: 40px; background: radial-gradient(circle, var(--akcent) 0 7px, transparent 7.5px); }
  .krok + .krok::after { left: 20px; }
  .telefon__wiersze li { font-size: 1.02rem; padding-block: 16px; }
  .telefon__suma { font-size: 1.02rem; padding: 16px; }
  .telefon__suma .mono { font-size: 1.2rem; }
  .telefon .mono, .dokument__zakres b, .dokument__suma .mono, .rejestr .mono { white-space: nowrap; }

  /* 05 · dokument ciaśniej */
  .dokument { padding: 24px 20px; }
  .dokument__zakres li { font-size: .95rem; }
  .dokument__suma { font-size: 1.05rem; }
  .dokument__suma .mono { font-size: 1.25rem; }

  /* 06 · rejestr ciaśniej — 1.3rem mono łamało „Dom pod lasem" w pion */
  .rejestr__wiersze li { font-size: .98rem; padding: 15px 16px; }
  .rejestr__oferta { gap: 10px; }
  .blaszka { font-size: .95rem; }
  .rejestr__wersja { font-size: .95rem; padding-left: 38px; }

  .jak__pas, .cennik__pas, .pdf__pas, .porzadek__pas { grid-template-columns: 1fr; }
  .telefon { max-width: 420px; width: 100%; justify-self: center; }
  .rejestr { max-width: 480px; }
  .dokument { max-width: 460px; justify-self: center; width: 100%; }

  /* 04 · działy jako pionowa lista wierszy nazwa · liczba (makieta mobile) */
  .dzialy { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--kreska); border-radius: var(--luk); background: var(--pole); overflow: hidden; }
  .dzialy li {
    display: flex; align-items: center; justify-content: space-between;
    text-align: left; padding: 12px 18px; gap: 12px;
    border: 0; border-bottom: 1px solid var(--kreska); border-radius: 0; background: none;
  }
  .dzialy li:last-child { border-bottom: 0; }
  .dzialy__nazwa { font-size: .95rem; color: var(--tekst); }
  .dzialy__ile { font-size: 1.2rem; color: var(--akcent-tekst); }

  .plany { grid-template-columns: 1fr; }

  /* 04 · próbka cennika: stopnie desktopowe rozpychały grid poza 360 px (M2 — zmierzone
     369 px: min-content wiersza „nazwa · jm · cena" przy 1.35rem + padding 60 px). */
  .probka li { font-size: 1.05rem; padding: 16px 14px; gap: 8px; }
  .probka li i { font-size: .95rem; }
  .probka li b { font-size: 1rem; }
  .probka li i::before, .probka li b::before { margin-right: 8px; }
  .liczba { font-size: clamp(7rem, 34vw, 11rem); }
  /* Przyciski w spłaszczonych kolumnach fold/final: szerokość z marginesów (flex stretch),
     ⛔ nie width:100% — ta z marginesem wystawała poza viewport (M2, zmierzone 380>360). */
  .fold .btn--duzy, .final .btn--duzy { width: auto; }

  /* 08 · pary FAQ jako karty (makieta mobile) */
  .faq__para { grid-template-columns: 1fr; gap: 8px; border: 1px solid var(--kreska); border-radius: var(--luk); background: var(--pole); padding: 16px 18px; margin-block: 10px; }
  .faq__para dd { padding-left: 0; border-left: 0; font-size: 1.05rem; }
  .faq__para dt { font-size: 1.2rem; gap: 14px; }
  .faq__para dt .ikona { width: 44px; height: 44px; padding: 10px; }
  .faq__para--kto { border-color: var(--akcent); }

  /* 09 · MODEL TŁA jak fold (17.08): scena pionowa tłem sekcji, H2 u góry na scrimie,
     CTA na dole — środek odsłania van i bohatera. */
  .final { min-height: min(92dvh, 820px); padding-block: 64px 44px; }
  .final__tlo { display: none; }
  .final__tlo--m {
    display: block; position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center bottom;
  }
  .final__scrim {
    display: block;
    background:
      linear-gradient(180deg, rgba(27,29,31,.92) 0, rgba(27,29,31,.72) 22%, rgba(27,29,31,.24) 40%, transparent 54%, rgba(27,29,31,.30) 74%, rgba(27,29,31,.88) 100%);
  }
  .final__pas { display: flex; flex-direction: column; grid-template-columns: none; min-height: inherit; }
  .final__slowo { display: flex; flex-direction: column; flex: 1; max-width: none; }
  .final .btn--duzy { margin-top: auto; padding-top: 0; }
  .final .dopisek { margin-top: 12px; }
  .final__scena { display: none; }

  .stopka__siatka { grid-template-columns: 1fr; gap: 28px; }
  .btn--duzy { width: 100%; }
}