/* Dół strony (runda „Krzyż”): księgowanie, usługi, miesiąc, ceny, pytania, historia, zmiana biura, formularz, stopka.
   Te same materiały co pierwszy ekran: cyfry, druki, kratki, papier, pieczątki, liczenie. Granat to noc, papier to porządek.
   Zasada ruchu: każdy stan pośredni jest czytelny (przesunięcia, wycinanie, liczniki), nigdzie nie ma półprzezroczystych przenikań. */
:root {
  --tx-3: #8da0b2;          /* drugi plan na granacie, 6,3:1 */
  --sekcja-g: clamp(72px, 10vh, 128px);
  --cien-papieru: 0 1px 0 rgba(255, 255, 255, .05), 0 22px 48px -18px rgba(0, 0, 0, .55), 0 8px 16px -8px rgba(0, 0, 0, .4);
}
section.ksg, section.usl, section.mies, section.cen, section.pyt, section.hist, section.zmb { padding: var(--sekcja-g) var(--m) 0; }

/* ---------------------------------------------------------------- 2. księgowanie: kwota dokumentu dzieli się na zapisy */
.ksg-ramka { position: relative; min-height: min(660px, calc(100svh - var(--gora) - 64px)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: stretch; }
.ksg-scena { grid-column: 1 / span 4; display: flex; flex-direction: column; min-width: 0; }
.ksg-scena h2 { font-size: clamp(46px, 4.9vw, 84px); line-height: .92; margin-bottom: 22px; }
.ksg-lead { font-size: 18px; line-height: 1.5; color: var(--tx-2); max-width: 31ch; }
.ksg-slip { display: none; }
.ksg-papier { grid-column: 5 / -1; min-width: 0; position: relative; background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru);
  padding: clamp(18px, 2vw, 30px) clamp(18px, 2.2vw, 34px); container-type: inline-size; }
.ksiega { width: 100%; border-collapse: collapse; font: 500 clamp(13px, 1.62cqw, 17px)/1.25 var(--sans); }
.ksiega th, .ksiega td { padding: .82em .7em .82em 0; border-top: 1px solid var(--papier-2); text-align: left; vertical-align: middle; }
.ksiega thead th { border-top: 0; border-bottom: 1.5px solid var(--druk-l); padding-top: 0; color: var(--tusz-2); font-weight: 500; vertical-align: bottom; line-height: 1.15; }
.ksiega .r { text-align: right; }
.ksiega th:last-child, .ksiega td:last-child { padding-right: 0; }
.ksiega tbody th { font-weight: 600; padding-right: 1.4em; }
.dok-wiersz { display: flex; justify-content: space-between; align-items: baseline; gap: 1.2em; }
.ksiega tbody tr:first-child > * { border-top: 0; }
.dok-kwota { font-weight: 500; color: var(--tusz-2); white-space: nowrap; }
.ksiega .kw { display: inline-block; font: 500 1.04em/1 var(--mono); white-space: pre; font-variant-numeric: tabular-nums; }
.ksiega .kw-dok { color: var(--tusz-2); }
.kw-akta { font: 500 .92em/1 var(--sans); color: var(--tusz-2); }
.ksiega tbody tr { transition: background-color .25s var(--ease); }
.ksiega tbody tr.biezacy { background: rgba(181, 50, 31, .08); }
.ksiega tfoot th, .ksiega tfoot td { border-top: 1.5px solid var(--tusz); font-weight: 700; padding-top: .85em; }
.ksg-wyniki { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-top: 1.1em; padding-top: 1em; border-top: 1.5px solid var(--druk-l); }
.ksg-wynik { display: grid; gap: .35em; font: 600 clamp(14px, 1.6cqw, 17px)/1.25 var(--sans); }
.ksg-wz small { display: block; font-weight: 400; font-size: .84em; color: var(--tusz-2); }
.ksg-wynik .kw { font: 500 clamp(26px, 4cqw, 46px)/1 var(--mono); letter-spacing: -.02em; white-space: pre; }
.ksg-wynik .kw-wynik { color: var(--druk); }
.ksg-przyp { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--tx-3); max-width: 78ch; }

/* scena po lewej (tylko gdy skrypt przypina sekcję): kwota dokumentu jest biała na granacie i leci do kolumn, gdzie robi się atramentem */
.ksg-ruch .ksg-slip { display: block; position: relative; margin-top: auto; height: clamp(240px, 36vh, 320px); overflow: hidden; overflow: clip; border-top: 1px solid var(--linia); container-type: inline-size; }   /* clip: taśma dokumentów nie jest kontenerem przewijania, więc scrollIntoView, wyszukiwanie na stronie ani kotwice nie przesuwają jej zawartości */
.ksg-dok { position: absolute; inset: 0; padding-top: clamp(10px, 2vh, 22px); display: flex; flex-direction: column; gap: 4px; }
.ksg-dok-nazwa { font: 600 clamp(16px, 1.3vw, 19px)/1.2 var(--sans); color: var(--tx-2); margin-bottom: clamp(4px, 1vh, 10px); }
.ksg-czesci { display: grid; gap: clamp(2px, .6vh, 6px); padding-bottom: clamp(8px, 1.6vh, 16px); margin-bottom: clamp(8px, 1.4vh, 14px); border-bottom: 2px solid var(--tx); }
.ksg-czesc { display: flex; align-items: baseline; gap: 12px; color: #fff; }
.ksg-znak { width: .9em; font: 500 clamp(22px, 2.3vw, 34px)/1 var(--mono); color: var(--druk-noc); text-align: center; }
.ksg-czesc-kw { font: 500 clamp(26px, 2.7vw, 40px)/1.12 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ksg-czesc small { font: 500 clamp(14px, 1.1vw, 16px)/1.2 var(--sans); color: var(--tx-2); }
.ksg-dok-kwota { padding-left: calc(.9em + 12px); font: 500 clamp(32px, calc((100cqw - 12px) / 6.1), 78px)/1.02 var(--mono); letter-spacing: -.04em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* najdłuższa suma (9 znaków) mieści się w kolumnie: 5,94 em + 12 px < 100cqw */
.ksg-dok-kwota.ksg-bez { padding-left: 0; font: 600 clamp(26px, 2.4vw, 38px)/1.1 var(--sans); letter-spacing: 0; color: var(--tx-2); }
.ksg-dok .ksg-czesci:empty { display: none; }
.ksg-ruch .ksiega tbody td[data-kol] { background-color: rgba(181, 50, 31, calc(var(--hl, 0) * .13)); }   /* MIKS-9: komórka docelowa zaznacza się na ok. 0,3 s w chwili lądowania zapisu (ksiegowanie.js tweenuje --hl) */

/* wariant do porównania `?ksiegowanie=krotkie` (komputer, przypięta scena; klasę nadaje ksiegowanie.js): dwa dokumenty, pozostałe sześć i wyniki pod przyciskiem „Pozostałe przykłady” */
.ksg-krotkie .ksiega.ksg-zwiniete tbody tr.ksg-dalej, .ksg-krotkie .ksiega.ksg-zwiniete ~ .ksg-wyniki { display: none; }
/* MIKS-10, poprawka 4: stan krótki (komputer, tablet, telefon) to dwa dokumenty: sumy dwóch (ksiegowanie.js), bez pustych kolumn „Wynagrodzenia” i „Bank” (ani ich sum), wyniki ośmiu dokumentów
   i zdanie o wyciągu bankowym dopiero po rozwinięciu. `.ksg-kol5` ma rozwijany papier od kliknięcia „Mniej przykładów” do końca zwijania (kolumny znikają od razu, wiersze jadą w górę). */
.ksiega.ksg-zwiniete :is(thead, tbody, tfoot) > tr > :nth-child(n+6), .ksiega.ksg-kol5 :is(thead, tbody, tfoot) > tr > :nth-child(n+6) { display: none; }
.ksiega.ksg-zwiniete ~ .ksg-wyniki { display: none; }
.ksg:has(.ksiega.ksg-zwiniete) .ksg-przyp-bank { display: none; }
.ksg:not(.ksg-ruch) .ksg-ramka:has(.ksiega.ksg-zwiniete) { min-height: 0; }   /* bez przypięcia (tablet 761–1180 px, niskie okna) ramka nie trzyma wysokości 660 px dla ukrytych wyników: puste miejsce pod papierem było 97 → 207 px (pusty pas 1024×768 20,4% → 27,6%) */
.ksg-krotkie .ksiega tbody tr.ksg-wiecej-wiersz { display: table-row; }
.ksg-krotkie .ksiega tbody tr.ksg-wiecej-wiersz > td { padding: .9em 0 .2em; }
.ksg-krotkie .ksg-wiecej { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--tusz); border-radius: 2px; color: var(--tusz);
  font: 650 16px/1.2 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .16s var(--ease), background-color .18s var(--ease); }
.ksg-krotkie .ksg-wiecej::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.ksg-krotkie .ksg-wiecej[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.ksg-krotkie .ksg-wiecej:active { transform: scale(.98); background-color: var(--papier-2); }
.ksg-krotkie .ksg-wiecej:focus-visible { outline: 2px solid var(--tusz); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ksg-krotkie .ksg-wiecej:hover { background-color: var(--papier-2); } }
@media (prefers-reduced-motion: reduce) { .ksg-krotkie .ksg-wiecej, .ksg-krotkie .ksg-wiecej::after { transition: none; } }

/* telefon i niskie okna: bez przypinania; każdy dokument jest kartą, a jego zapisy wysuwają się spod kwoty */
@media (max-width: 1180px), (max-height: 759px) {
  .ksg-ramka { display: block; }
  .ksg-scena h2 { font-size: clamp(40px, 11vw, 64px); }
  .ksg-lead { max-width: 40ch; }
  .ksg-papier { margin-top: 32px; }
}
@media (max-width: 760px) {
  .ksg-papier { padding: 6px 16px 18px; margin-inline: calc(var(--m) * -1 + 8px); }
  .ksiega thead { display: none; }
  .ksiega, .ksiega tbody, .ksiega tr, .ksiega th, .ksiega td, .ksiega tfoot { display: block; }
  .ksiega { font-size: 15px; }
  .ksiega tbody tr { padding: 13px 0 11px; border-top: 1px solid var(--papier-2); }
  .ksiega tbody tr:first-child { border-top: 0; }
  .ksiega th, .ksiega td { border: 0; padding: 0; }
  .ksiega tbody th { padding: 0; font-size: 17px; }
  .ksiega tbody th .kw, .ksiega .dok-kwota .kw { font-size: 17px; }
  .ksiega tbody td[data-kol] { display: none; align-items: baseline; justify-content: space-between; padding: 6px 0 0 14px; font-size: 14.5px; }
  .ksiega tbody td[data-kol]:has(.kw) { display: flex; }
  .ksiega tbody td[data-kol]::before { content: "→ " attr(data-nazwa); color: var(--tusz-2); font-weight: 500; }
  .ksiega tbody td[data-kol] .kw { font-size: 17px; }
  .ksiega tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding-top: 14px; border-top: 1.5px solid var(--tusz); }
  .ksiega tfoot th { grid-column: 1 / -1; padding: 0; border: 0; font-size: 17px; }
  .ksiega tfoot td[data-kol] { border: 0; padding: 0; display: grid; gap: 2px; justify-items: start; font-size: 14px; }
  .ksiega tfoot td[data-kol]::before { content: attr(data-nazwa); color: var(--tusz-2); font-weight: 500; }
  .ksiega tfoot td[data-kol] .kw { font-size: 17px; }
  .ksg-wyniki { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; padding-top: 14px; }   /* dwa wyniki obok siebie: kwota 28 px (zakres 28–36 px), podpis 14 px */
  .ksg-wynik { gap: 4px; align-content: start; font-size: 14.5px; }
  .ksg-wynik .kw { font-size: 28px; letter-spacing: -.03em; }
  .ksg-wz small { font-size: 14px; line-height: 1.3; }
}

/* ---------------------------------------------------------------- 3. usługi: cztery druki układają się w stos */
.usl { --hd: 520px; --krok: max(76vh, calc(var(--hd) + 90px)); --skok: 46px; }
.usl-uklad { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.usl-teksty { grid-column: 1 / span 5; }
.usl-stos { grid-column: 6 / -1; min-width: 0; }
.usl-slot { height: var(--krok); }
.usl-blok { position: sticky; top: calc(var(--gora) + 34px); display: grid; gap: 22px; justify-items: start; }
.usl-blok h3 { font-weight: 800; font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; word-spacing: .07em; font-size: clamp(50px, 5.6vw, 96px); line-height: .9; color: #fff; text-wrap: balance; max-width: 9em; }
.usl-blok p { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.45; color: var(--tx-2); max-width: 28ch; }
/* dwa działania przy usłudze: opis kończy się przed nimi, pod nim jedna grupa: „Więcej o …” (spokojny odnośnik do podstrony) i „Zapytaj o …” (działanie kontaktowe, wybiera temat formularza); położenie takie samo we wszystkich czterech usługach */
.usl-linki { display: flex; flex-direction: column; align-items: flex-start; row-gap: 8px; }   /* pismo 17–18 px; pary nazw mieszczą się obok siebie we wszystkich czterech usługach dopiero od ok. 1700 px szerokości okna (przy 1440 px dwie z czterech nie: najdłuższa 605 px w kolumnie 537 px), więc poniżej: dwa wiersze z odstępem 8 px we wszystkich czterech usługach */
@media (min-width: 1700px) { .usl-linki { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: calc(24 * var(--p, 1px)); } }   /* od 1700 px (zmierzone: 1680 – najdłuższa para 609 px w kolumnie 629 px; 2000×1420 – 625 px w 759 px) jeden wiersz z odstępem 24 px × skala, jak w r7 */
.usl-wiecej { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: 17px; color: var(--tx-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--linia); transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.usl-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; font-size: 17px; color: #fff; text-decoration: none; border: 1px solid var(--tx-3); border-radius: 2px; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .16s var(--ease); }
.usl-link:active { transform: scale(.97); }
.usl-druk { position: sticky; top: calc(var(--gora) + 34px + var(--i) * var(--skok)); height: var(--hd); margin: 0 0 calc(var(--krok) - var(--hd)); transform-origin: 50% 0; }
.usl-druk .kartka { max-width: 780px; margin-left: auto; min-height: 440px; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .5), var(--cien-papieru); }
.usl-blok .usl-przyp { font-size: 14px; color: var(--tx-3); max-width: 34ch; }
.usl-druk .k-lista { display: none; }
@media (hover: hover) and (pointer: fine) { .usl-link:hover { background: var(--noc-2); border-color: var(--tx-2); } .usl-wiecej:hover { color: #fff; text-decoration-color: var(--tx-2); } }
.usl-druk .dra-nazwa { display: none; }

/* bez stosu (telefon, tablet, niskie okna, ograniczony ruch): tekst i druk każdej usługi jedno pod drugim */
@media (max-width: 1000px), (max-height: 639px), (prefers-reduced-motion: reduce) {
  .usl { --krok: auto; }
  .usl-uklad { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .usl-teksty, .usl-stos { display: contents; }
  .usl-slot { height: auto; margin-top: clamp(56px, 9vh, 88px); }
  .usl-slot:first-child { margin-top: 0; }
  .usl-blok { position: static; }
  .usl-druk { position: static; height: auto; margin: 22px 0 0; }
  .usl-druk .kartka { max-width: 780px; margin-left: 0; box-shadow: var(--cien-papieru); }
  .usl-druk .kartka { min-height: 0; }
  .usl-blok h3 { font-size: clamp(42px, 11.4vw, 72px); }
  .usl-slot:nth-child(1) { order: 1; } .usl-druk:nth-child(1) { order: 2; }
  .usl-slot:nth-child(2) { order: 3; } .usl-druk:nth-child(2) { order: 4; }
  .usl-slot:nth-child(3) { order: 5; } .usl-druk:nth-child(3) { order: 6; }
  .usl-slot:nth-child(4) { order: 7; } .usl-druk:nth-child(4) { order: 8; }
}

/* ---------------------------------------------------------------- 4. miesiąc: dokumenty wjeżdżają, księga liczy, wychodzą JPK i ZUS DRA */
section.mies { padding: var(--sekcja-g) var(--m) var(--sekcja-g); }
.mies-scena { display: flex; flex-direction: column; }
.mies-gora { order: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.mies-gora h2 { font-size: clamp(40px, 4.7vw, 80px); line-height: .93; max-width: 17em; }
/* czerwień na słowach o kwotach dla klienta: jasna czerwień druku na granacie (6,5:1), bez tła i bez pulsowania */
.czerw { color: var(--druk-noc); white-space: nowrap; }
.mies-okres { flex: none; text-align: right; }
.mies-cyfry { display: block; font: 500 clamp(34px, 4.2vw, 72px)/1 var(--mono); letter-spacing: -.04em; color: #fff; white-space: nowrap; }
.mies-cyfry i { font-style: normal; color: var(--druk-noc); padding: 0 .12em; }
.mies-okres small { display: block; margin-top: 10px; font-size: 14px; color: var(--tx-3); }
.mies-nota { order: 8; margin-top: 18px; font-size: 14px; color: var(--tx-3); }
.mies-nota a { color: var(--tx-2); text-decoration: underline; text-decoration-color: var(--druk-noc); text-underline-offset: 3px; }   /* linki do poradników: w notce pod sceną, która stoi w kadrze przez cały czas */
@media (hover: hover) and (pointer: fine) { .mies-nota a:hover { color: #fff; } }
.mies-kroki { display: none; }
.mies-karta { background: var(--papier); color: var(--tusz); border-radius: 2px; box-shadow: var(--cien-papieru); padding: 22px 26px 24px; }
.mies-kod { font: 800 clamp(32px, 3vw, 46px)/.95 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 84; letter-spacing: .012em; }
.mies-wyj .mies-kod { color: var(--druk); }
.mies-opis { margin: 6px 0 14px; font-size: 14.5px; line-height: 1.3; color: var(--tusz-2); }
.mies-wiersze { border-top: 1px solid var(--papier-2); }
.mies-wiersze li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--papier-2); font-size: 14.5px; }
.mies-wiersze b, .mies-suma b { font: 500 15.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; }
.mies-suma { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-top: 12px; font-weight: 600; }
.mies-suma b { font-size: clamp(22px, 2.2vw, 30px); color: var(--druk); }
.mies-suma > span { font-size: max(15px, calc(14.5 * var(--q, 1px))); line-height: 1.25; }
.mies-suma small { display: block; margin-top: 4px; font-weight: 400; font-size: max(14px, calc(12 * var(--q, 1px))); line-height: 1.3; color: var(--tusz-2); }
.mies-wynik b { font-size: clamp(28px, 3vw, 42px); }
.mies-kwota-opis { padding-top: 12px; border-top: 1px solid var(--papier-2); font-size: 13.5px; color: var(--tusz-2); }
.mies-kwota { display: block; margin: 4px 0 18px; font: 500 clamp(40px, 4.4vw, 64px)/1.05 var(--mono); letter-spacing: -.04em; white-space: pre; font-variant-numeric: tabular-nums; }
.mies-odb { margin: 0 -26px -24px; padding: 12px 26px; background: var(--noc); color: var(--papier); font-weight: 600; }
.mies-mail-do { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 22px; border: 1.5px solid var(--druk-noc); background: var(--noc); color: var(--druk-noc); font-size: 15px; }
.mies-mail-do span { font-weight: 700; }
.mies-mail-do strong { font-weight: 500; color: var(--tx); }
.mies-podpis { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; max-width: 60ch; color: var(--tx); }

/* bez przypinania (telefon, niskie okna, ograniczony ruch): trzy akty jeden pod drugim, każdy z własnym podpisem */
.mies-plansza, .mies-dol, .mies-podpisy { display: contents; }
.mies-siatka { display: none; }
.mies-akt { display: grid; gap: 18px; justify-items: start; margin-top: clamp(36px, 6vh, 56px); }
.mies-akt-1 { order: 2; } .mies-akt-2 { order: 4; } .mies-akt-3 { order: 6; }
.mies-podpis:nth-child(1) { order: 3; } .mies-podpis:nth-child(2) { order: 5; } .mies-podpis:nth-child(3) { order: 7; }
.mies-podpis { margin-top: 22px; }
.mies-karta { width: min(100%, 460px); }
.mies-mail-do { width: min(100%, 460px); }
@media (max-width: 760px) {
  .mies-gora { flex-direction: column; gap: 22px; }
  .mies-okres { text-align: left; }
  .mies-gora h2 { font-size: clamp(38px, 10.8vw, 56px); max-width: none; }
  .mies-karta { padding: 20px 20px 22px; width: 100%; }
  .mies-odb { margin: 0 -20px -22px; padding: 12px 20px; }
}

/* przypięta scena (komputer): przelot od dokumentów do wysłanych druków */
.mies-ruch .mies-scena { height: calc(100svh - var(--gora) - 24px); }
.mies-ruch .mies-plansza { display: block; position: relative; flex: 1; min-height: 0; margin: 18px calc(var(--m) * -1); overflow: hidden; border-block: 1px solid var(--linia); order: 2; }
.mies-ruch .mies-siatka { display: block; position: absolute; inset: 0 -120px; background-image: linear-gradient(90deg, rgba(38, 64, 90, .5) 1px, transparent 1px), linear-gradient(rgba(38, 64, 90, .5) 1px, transparent 1px); background-size: 56px 56px; }
.mies-ruch .mies-akt { position: absolute; inset: 0; display: block; margin: 0; }
/* kolejność warstw: księga (akt 2) nad wysłanymi drukami (akt 3), a te nad dokumentami (akt 1): druki rosną spod księgi, zanim ta zjedzie w dół */
.mies-ruch .mies-akt-1 { z-index: 1; } .mies-ruch .mies-akt-3 { z-index: 2; } .mies-ruch .mies-akt-2 { z-index: 3; }
/* will-change: karty sceny mają stałą, własną warstwę kompozycji. Bez tego księga, leżąca na kartach z GSAP-owym translate3d w środku ruchu, była promowana tylko przez nakładanie,
   a tekst w jej warstwie raz renderował się z innym ułamkiem piksela niż drugi (test cofania przewijania: 2146 px przy 45% w ok. 40% przebiegów) */
.mies-ruch .mies-karta { position: absolute; left: 50%; top: 50%; width: var(--w); will-change: transform; }
.mies-ruch .mies-ksef, .mies-ruch .mies-mail { --w: clamp(290px, 26vw, 400px); }
.mies-ruch .mies-ksiega { --w: clamp(360px, 35vw, 520px); }
.mies-ruch .mies-wyj { --w: clamp(310px, 28vw, 410px); }
.mies-ruch .mies-mail-do { position: absolute; left: 50%; bottom: 16px; width: min(560px, 80%); }
.mies-ruch .mies-dol { display: grid; order: 3; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; }
.mies-ruch .mies-podpisy { display: grid; overflow: hidden; }
.mies-ruch .mies-podpis { grid-area: 1 / 1; margin: 0; order: 0; }
.mies-ruch .mies-kroki { display: flex; gap: 22px; }
.mies-ruch .mies-kroki li { padding: 8px 0 10px; font-size: 15px; color: var(--tx-3); border-bottom: 3px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease); }
.mies-ruch .mies-kroki li.on { color: #fff; font-weight: 700; border-color: var(--druk-noc); }
.mies-ruch .mies-nota { order: 4; margin-top: 12px; }

/* faktura FS 73/2026 prowadzona przez scenę: wiersz zaznaczony na dokumencie (odwrócone barwy: papier na granacie), kwota leci jako kopia do księgi i na druk.
   Bez JS i przy ograniczonym ruchu wiersz stoi zaznaczony od razu; w przypiętej scenie zaznacza się klasą .on (z czasu osi). */
.mies-wiersze li.mies-fs { margin-inline: -8px; padding-inline: 8px; background: var(--noc); color: var(--papier); border-bottom-color: var(--noc); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.mies-ruch .mies-wiersze li.mies-fs:not(.on) { background: transparent; color: inherit; border-bottom-color: var(--papier-2); }
.mies-lot { --lot-pv: .24em; --lot-ph: .55em; position: absolute; left: 0; top: 0; z-index: 6; visibility: hidden; isolation: isolate; pointer-events: none; padding: var(--lot-pv) var(--lot-ph); font: 500 15.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: pre; color: var(--tusz); transform-origin: 50% 50%; }
/* Krzyż po MIKS-10: kartka zawsze nieprzezroczysta; --tlo (miesiac-lot.js) to wcięcie (0 = kartka na samym polu cyfr, 1 = pełny margines) i siła cienia: kartka wyrasta i znika wielkością, nie kryciem
   (przy kryciu 0 → 1 cyfry odrywały się szare na półprzezroczystym tle, kontrast 1,05:1) */
.mies-lot::before { content: ""; position: absolute; inset: calc((1 - var(--tlo, 1)) * var(--lot-pv)) calc((1 - var(--tlo, 1)) * var(--lot-ph)); z-index: -1; border-radius: 2px; background: var(--papier); box-shadow: 0 6px 18px rgba(0, 0, 0, calc(.38 * var(--tlo, 1))); }
.mies-lot.mies-lot-wklad { --lot-pv: .05em; --lot-ph: .5em; }   /* 8 089,65 na komputerze (MIKS-10): węższy papierek w pionie, żeby przy lądowaniu w wierszu wkładu zostawał ≥ 12 px od cyfr wiersza niżej (sumy sprzedaży) */
.mies-lot.mies-lot-tel { --lot-pv: .05em; --lot-ph: .4em; }   /* 8 089,65 na telefonie (MIKS-11): kartka tuż przy cyfrach, żeby w pasie 40 px nad pierwszą pozycją zostawało ≥ 12 px od linii tekstu nad i pod */
.mies-lot.mies-lot-wynik { --lot-pv: .16em; --lot-ph: .18em; }   /* 9 913 na komputerze (MIKS-8): ciaśniejsza kartka, żeby korytarz pod księgą i droga obok napisu „Urząd skarbowy” zmieściły kopię z odstępem ≥ 12–16 px */
/* wkład FS 73/2026 w sumie miesiąca (karta „Księga”): wąski wiersz tuż nad sumą sprzedaży; kopia kwoty ląduje w nim, a po ok. 250 ms oba wiersze (wkład i suma) zaznaczają się razem,
   tak jak wiersz na dokumencie (papier na granacie). Bez JS i przy ograniczonym ruchu stoją zaznaczone od razu; z ruchem (klasa .mies-lot-on na sekcji) zaznacza je klasa .on. */
.mies-karta .mies-wiersze li.mies-lacz { margin-inline: -8px; padding-inline: 8px; background: var(--noc); color: var(--papier); border-bottom-color: var(--noc); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.mies-lot-on .mies-karta .mies-wiersze li.mies-lacz:not(.on) { background: transparent; color: inherit; border-bottom-color: var(--papier-2); }
.mies-karta .mies-wiersze li.mies-wklad { padding-block: calc(3.5 * var(--qv, 1px)); }
.mies-karta .mies-wiersze li.mies-wklad.mies-lacz { border-bottom-color: color-mix(in srgb, var(--papier) 42%, var(--noc)); }   /* cienka kreska sumy między składnikiem a sumą */
.mies-lot-on .mies-karta .mies-wiersze li.mies-wklad.mies-lacz:not(.on) { border-bottom-color: var(--papier-2); }
/* telefon i tablet (plansze jedna pod drugą, MIKS-7): przy lewej krawędzi zostaje pas dla lecącej kwoty; karty i podpisy są o szerokość pasa węższe, a podpis stoi w kolumnie pisma kart (padding 16 px),
   więc kopia leci ≥ 12 px od linii tekstu. Pismo kart bez zmian; stała szerokość pasa 40 px (pomiar `pas-test`: 390 +51 px, 360 +95, 320 +85 długości strony; szerzej karty zaczynają łamać etykiety). */
@media (max-width: 1000px) {
  .mies-lot-on:not(.mies-ruch) { --pas: 40px; }
  .mies-lot-on:not(.mies-ruch) .mies-karta, .mies-lot-on:not(.mies-ruch) .mies-mail-do { margin-left: var(--pas); width: min(calc(100% - var(--pas)), 460px); }
  .mies-lot-on:not(.mies-ruch) .mies-podpis { margin-left: calc(var(--pas) + 16px); }
  /* MIKS-11 (poprawka 1 Sola): pas między opisem karty a pierwszą pozycją w kartach KSeF i Księga ma 40 px (było 18–20): kwota 8 089,65 wychodzi z komórki w górę do tego pasa i wchodzi do komórki z góry
     (miesiac.js), więc nie przechodzi przez etykietę „FS 73/2026”. Wiersz wkładu w Księdze dostaje zwykły odstęp 5 px (było 3,5), żeby kwota w komórce stała ≥ 12 px od kwoty „Sprzedaż netto” pod nią. */
  .mies-lot-on:not(.mies-ruch) :is(.mies-ksef, .mies-ksiega) .mies-opis { margin-bottom: 30px; }
  .mies-lot-on:not(.mies-ruch) .mies-karta .mies-wiersze li.mies-wklad { padding-block: 5px; }
  /* Krzyż po MIKS-11: 9 913 wchodzi do pola „Podatek do wpłaty” na wysokości pola, od lewej (miesiac.js), więc etykieta stoi nad kopią: odstęp etykiety od pola 12 px (było 4), pod polem 10 px (było 18),
     wysokość kart druków bez zmian; kopia ma interlinię pola (1,05), żeby jej kartka nie była wyższa niż pole. */
  .mies-lot-on:not(.mies-ruch) .mies-wyj .mies-kwota { margin: 12px 0 10px; }
  .mies-lot.mies-lot-tel2 { line-height: 1.05; }
}
/* ---------------------------------------------------------------- 5. ceny: cyfry w kratkach druku, bębny licznika zatrzymują się na cenie */
section.cen { background: var(--papier); color: var(--tusz); padding: clamp(80px, 11vh, 140px) var(--m) clamp(72px, 10vh, 120px); }
.cen-gora { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(28px, 5vh, 56px); }
.cen-gora h2 { color: var(--tusz); font-size: clamp(44px, 5.6vw, 96px); line-height: .92; max-width: 12em; }
.cen-gora p { font-size: clamp(16px, 1.3vw, 20px); color: var(--tusz-2); padding-bottom: .4em; white-space: nowrap; }
.cen-lista { border-top: 2px solid var(--tusz); }
.cen-wiersz { position: relative; display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 32px); padding: clamp(18px, 3.2vh, 34px) 0; border-bottom: 1px solid #aab4b2; }
.cen-wiersz dt { flex: 1; display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 32px); min-width: 0; font: 700 clamp(26px, 2.8vw, 46px)/1.05 var(--sans); font-stretch: 85%; letter-spacing: .005em; padding-bottom: .22em; }
.cen-wiersz dt::after { content: ""; flex: 1; min-width: 40px; margin-bottom: .28em; border-bottom: 3px dotted rgba(74, 88, 102, .55); }
.cen-wiersz dt small { display: block; margin-top: 6px; font: 500 clamp(15px, 1.2vw, 19px)/1.3 var(--sans); color: var(--tusz-2); }
.cen-wiersz dd { display: flex; align-items: flex-end; gap: clamp(8px, 1.2vw, 18px); }
.cen-od { font: 500 clamp(20px, 2vw, 30px)/1 var(--sans); color: var(--tusz-2); padding-bottom: .5em; }
.cen-zl { font: 700 clamp(34px, 4.4vw, 70px)/1 var(--sans); font-stretch: 75%; color: var(--druk); padding-bottom: .12em; }
.cen-pole { --k: clamp(104px, 16vw, 244px); display: inline-flex; font: 800 var(--k)/1 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums; color: var(--druk); }
.cen-pole i { position: relative; display: block; width: .6em; height: 1.1em; margin-left: -1.5px; border: 1.5px solid var(--druk-l); font-style: normal; text-align: center; line-height: 1.1; overflow: hidden; letter-spacing: 0; }
.cen-pole i:first-child { margin-left: 0; }
.cen-pole i::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .06em; background: linear-gradient(90deg, var(--druk-l) 1.5px, transparent 1.5px) 0 0 / 25% 100%; opacity: .6; pointer-events: none; z-index: 1; }
.cen-cyfra { display: block; }                                              /* cyfra w kratce (ceny.js): osobny znak, który dociska się o 3 px; kratka stoi w miejscu */
.cen-nota { margin-top: clamp(28px, 5vh, 52px); font: 600 clamp(20px, 2.1vw, 32px)/1.3 var(--sans); font-stretch: 90%; max-width: 30em; color: var(--tusz); }
@media (max-width: 760px) {
  .cen-gora { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cen-wiersz { flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 0 22px; }
  .cen-wiersz dt { flex: none; font-size: 26px; padding-bottom: 0; }
  .cen-wiersz dt::after { content: none; }
  .cen-pole { --k: min(30vw, 128px); }
  .cen-od { padding-bottom: .35em; }
  .cen-zl { font-size: 44px; }
  .cen-nota { font-size: 21px; }
}

/* ---------------------------------------------------------------- 6. pytania: odpowiedź drukuje się na paragonie */
section.pyt { padding: var(--sekcja-g) var(--m) var(--sekcja-g); }
.pyt h2 { font-size: clamp(48px, 6vw, 100px); margin-bottom: clamp(28px, 5vh, 56px); }
.pyt-uklad { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
.pyt-lista { grid-column: 1 / span 7; border-top: 1px solid var(--linia); }
.pyt-lista li { border-bottom: 1px solid var(--linia); }
.pyt-pytanie { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 18px; width: 100%; min-height: 44px; padding: clamp(18px, 3vh, 30px) 0; cursor: pointer;
  font: 700 clamp(24px, 2.7vw, 44px)/1.1 var(--sans); font-stretch: 85%; letter-spacing: .005em; color: var(--tx-2); transition: color .18s var(--ease); }
.pyt-pytanie::after { content: ""; flex: none; width: 13px; height: 13px; margin-right: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease), color .2s var(--ease); }
.pyt-pytanie[aria-expanded="true"] { color: #fff; }
.pyt-pytanie[aria-expanded="true"]::after { color: var(--druk-noc); transform: rotate(45deg) translate(4px, -4px); }
.pyt-pytanie:focus-visible { outline: 2px solid var(--papier); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pyt-pytanie:hover { color: #fff; } }
.pyt-drukarka { grid-column: 9 / -1; position: relative; }
.pyt-szczelina { position: relative; z-index: 2; height: 16px; border-radius: 8px; background: #050b12; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .08); }
.pyt-szczelina::after { content: ""; position: absolute; right: 16px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--druk-noc); }
.pyt-okno { position: relative; margin: 0 10px; overflow: hidden; padding-bottom: 6px; display: grid; }
.pyt-paragon { grid-area: 1 / 1; align-self: start; position: relative; background: var(--papier); color: var(--tusz); padding: 22px 22px 40px; font: 500 15px/1.65 var(--mono);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%; }
.pyt-paragon[hidden] { display: none; }
.pyt-paragon p { margin: 0; }
.pyt-q { font: 800 22px/1.1 var(--sans); font-stretch: 80%; letter-spacing: .01em; padding-bottom: 14px; margin-bottom: 14px !important; border-bottom: 2px dashed var(--tusz-2); }
@media (max-width: 1000px) {
  .pyt-lista { grid-column: 1 / -1; }
  .pyt-drukarka { grid-column: 1 / -1; margin-top: 28px; max-width: 520px; }
  /* jedna kolumna: pytania.js przenosi drukarkę pod wybrane pytanie (odstęp 14 px od pytania); pytanie już stoi nad paragonem, więc jego powtórka w paragonie znika */
  .pyt-lista li > .pyt-drukarka { margin: 14px 0 24px; }
  .pyt-lista li > .pyt-drukarka .pyt-q { display: none; }
}

/* ---------------------------------------------------------------- 7. historia: jeden ciągły druk od maja 1992 do dziś */
@font-face { font-family: "Doto"; font-weight: 900; font-style: normal; font-display: swap; src: url(fonts/Doto-cyfry.woff2) format("woff2"); }
section.hist { background: var(--noc-2); padding: var(--sekcja-g) var(--m); }
.hist-gora { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.hist-gora h2 { font-size: clamp(44px, 5.4vw, 92px); line-height: .93; max-width: 13em; }
.hist-klienci { max-width: 24ch; padding-bottom: .5em; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.4; color: var(--tx-2); }
/* druk ciągły: taśma z otworami transportowymi po bokach, perforacją i czerwoną linią, która nie przerywa się od 1992 r. */
.hist-tasma { position: relative; margin-top: clamp(28px, 5vh, 56px); background: var(--papier); color: var(--tusz); box-shadow: var(--cien-papieru); display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; }
.hist-otwory { background: radial-gradient(circle at 50% 22px, var(--noc-2) 0 6.5px, transparent 7.5px) 0 0 / 100% 44px repeat-y; border-inline: 1px dashed rgba(12, 24, 37, .32); }
.hist-druk { position: relative; padding: 34px 0 40px 28px; }
.hist-linia { position: absolute; left: 0; top: 34px; bottom: 40px; width: 4px; background: var(--druk); transform-origin: top; }
.hist-os { display: grid; gap: 0; }
.hist-wpis { padding: 26px 0 30px; }
.hist-rok { display: flex; align-items: baseline; gap: 14px; line-height: .86; }
.hist-rok small { font: 500 22px/1 var(--mono); color: var(--druk); }
.hist-rok span { font-size: clamp(88px, 24vw, 190px); color: var(--tusz); white-space: nowrap; }
.hist-wpis-1 .hist-rok span { font: 900 clamp(88px, 24vw, 190px)/.86 "Doto", var(--mono); letter-spacing: -.02em; }
.hist-wpis-2 .hist-rok span { font: 500 clamp(80px, 22vw, 176px)/.86 var(--mono); letter-spacing: -.05em; }
.hist-wpis-3 .hist-rok span { font: 800 clamp(96px, 27vw, 210px)/.86 var(--sans); font-stretch: 75%; font-variation-settings: "opsz" 96; letter-spacing: .005em; }
.hist-tekst { margin-top: 14px; max-width: 26ch; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.4; color: var(--tusz); }
.hist-tekst strong { font-weight: 700; }
.hist-znak { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; font-size: 16px; color: var(--tusz-2); border-top: 1px solid var(--papier-2); }
.hist-znak .hist-rok-m { font: 500 15px/1 var(--mono); color: var(--druk); }
.hist-znak .hist-nazwa { font-weight: 600; color: var(--tusz); }

/* przypięty przelot (komputer): kamera ma trzy przystanki przy wpisach (maj 1992, 2012, 2026) i krótkie przejazdy między nimi (historia.js); wpisy stoją co 80 vw,
   oś czasu jest liniowa w dwóch odcinkach (1992–2012 i 2012–2026), --T to szerokość taśmy w vw */
.hist-ruch .hist-scena { height: calc(100svh - var(--gora) - 24px); display: flex; flex-direction: column; }
.hist-ruch .hist-kadr { position: relative; flex: 1; min-height: 0; margin: 0 calc(var(--m) * -1); overflow: hidden; display: flex; align-items: center; }
.hist-ruch .hist-tasma { --hd: clamp(340px, 54vh, 480px); --T: 264; margin: 0; flex: none; width: calc(var(--T) * 1vw); display: block; height: calc(var(--hd) + 88px); will-change: transform; }
.hist-ruch .hist-otwory { position: absolute; left: 0; right: 0; height: 44px; border: 0; background: radial-gradient(circle at 22px 50%, var(--noc-2) 0 6.5px, transparent 7.5px) 0 0 / 44px 100% repeat-x; }
.hist-ruch .hist-otwory-g { top: 0; border-bottom: 1px dashed rgba(12, 24, 37, .32); }
.hist-ruch .hist-otwory-d { bottom: 0; border-top: 1px dashed rgba(12, 24, 37, .32); }
.hist-ruch .hist-druk { position: absolute; left: 0; right: 0; top: 44px; height: var(--hd); padding: 0; }
.hist-ruch .hist-linia { left: 0; right: 0; top: calc(var(--hd) * .78); bottom: auto; width: auto; height: 4px; transform-origin: left; }
.hist-ruch .hist-os { display: block; position: absolute; inset: 0; }
.hist-ruch .hist-wpis { position: absolute; left: calc(var(--x) * 1vw); top: 0; width: 40vw; padding: calc(var(--hd) * .04) 0 0; }
.hist-ruch .hist-rok span { font-size: calc(var(--hd) * .44); }
.hist-ruch .hist-tekst { max-width: min(34ch, calc((var(--T) - var(--x) - 5) * 1vw)); font-size: clamp(18px, 1.5vw, 23px); }   /* ostatni wpis stoi blisko końca taśmy (--T vw): tekst nie wychodzi za nią na wąskich oknach */
.hist-ruch .hist-znak { position: absolute; left: calc(var(--x) * 1vw); top: calc(var(--hd) * .78); display: block; padding: 0; border: 0; }
.hist-ruch .hist-znak::before { content: ""; position: absolute; left: 0; top: -12px; width: 2px; height: 28px; background: var(--druk); }
.hist-ruch .hist-znak .hist-rok-m { display: block; margin-top: 22px; padding-left: 8px; }
.hist-ruch .hist-znak .hist-nazwa { display: block; padding-left: 8px; margin-top: 4px; white-space: nowrap; font-size: 16px; }

@media (max-width: 760px) {
  /* telefon: taśma ciaśniej (runda „miks2”: wjazd i wyjazd sekcji bez wpisu 0,43 / 0,34 → mniej okna, sekcja ok. 1091 → ok. 880 px); lata, tekst (18 px) i znaczniki bez zmian */
  section.hist { padding-bottom: 30px; }
  .hist-gora { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hist-klienci { max-width: none; padding-bottom: 0; }
  .hist-tasma { grid-template-columns: 22px minmax(0, 1fr) 22px; margin-top: 10px; }
  .hist-druk { padding: 4px 9px 10px 13px; }            /* 13 + 9 = dawne 22 px: szerokość tekstu i łamanie wierszy bez zmian, ale opisy kończą się ≥ 9 px przed perforacją (na 360 i 320 dochodziły do niej na 0,3–1,7 px) */
  .hist-linia { top: 24px; bottom: 22px; }
  .hist-wpis { padding: 4px 0 8px; }
  .hist-tekst { margin-top: 4px; max-width: none; }
  .hist-znak { padding: 2px 0; line-height: 1.3; }
  .hist-wpis-1 .hist-rok span { font-size: clamp(66px, 20.5vw, 112px); }
  .hist-wpis-2 .hist-rok span { font-size: clamp(76px, 25vw, 112px); }
  .hist-wpis-3 .hist-rok span { font-size: clamp(90px, 29vw, 134px); }
  .hist-rok { gap: 10px; }
}

/* linijka lat nad czerwoną linią: kreska co rok, dłuższa co pięć lat. Skala czasu jest liniowa w dwóch odcinkach (1992–2012 i 2012–2026, inna w każdym), więc linijka to dwa odcinki;
   ich początek (--x0, vw), krok (--rok, vw na rok), liczbę lat (--lat) i położenie pierwszej długiej kreski (--faza, vw) liczy historia.js z położeń wpisów */
.hist-linijka { position: absolute; left: calc(var(--x0) * 1vw); width: calc(var(--lat) * var(--rok) * 1vw); top: calc(var(--hd) * .78 - 10px); height: 10px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(74, 88, 102, .7) 0 1.5px, transparent 1.5px calc(var(--rok) * 1vw)) 0 100% / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(var(--faza) * 1vw), rgba(74, 88, 102, .9) calc(var(--faza) * 1vw) calc(var(--faza) * 1vw + 2px), transparent calc(var(--faza) * 1vw + 2px) calc(var(--rok) * 5vw)) 0 100% / 100% 12px no-repeat; }
.hist-skala { position: absolute; top: calc(var(--hd) * .78 - 30px); font: 500 12.5px/1 var(--mono); color: var(--tusz-2); transform: translateX(-50%); pointer-events: none; }

/* ---------------------------------------------------------------- 8. zmiana biura: trzy druki do podpisu, znak X rysowany długopisem */
section.zmb { padding: var(--sekcja-g) var(--m); overflow-x: clip; }
.zmb-gora { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 22px; margin-bottom: clamp(36px, 6vh, 64px); }
.zmb-gora h2 { grid-column: 1 / span 8; font-size: clamp(44px, 5.4vw, 92px); line-height: .93; }
.zmb-gora p { grid-column: 1 / span 7; max-width: 52ch; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; color: var(--tx-2); }
.zmb-dol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; margin-top: clamp(48px, 7vh, 80px); }
.zmb-dol p { grid-column: 1 / span 7; max-width: 60ch; font-size: 18px; line-height: 1.55; color: var(--tx-2); }
.zmb-dol .przycisk-duzy { grid-column: 9 / -1; justify-self: end; height: 56px; padding: 0 30px; font-size: 17px; }
@media (max-width: 1000px) {
  .zmb-gora h2, .zmb-gora p { grid-column: 1 / -1; }
  .zmb-dol { row-gap: 24px; }
  .zmb-dol p, .zmb-dol .przycisk-duzy { grid-column: 1 / -1; justify-self: start; }
}

/* ---------------------------------------------------------------- 9. formularz */
section.kontakt { border-top: 1px solid var(--linia); padding: var(--sekcja-g) var(--m) var(--sekcja-g) !important; }
.kontakt-tekst h2 { font-size: clamp(48px, 5.7vw, 94px); line-height: .93; }
.form-register { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 18px; font: 500 15px var(--mono); }
.form-register span { flex: 1; padding: 8px 0; color: var(--tx-3); border-bottom: 2px solid var(--linia); transition: color .2s var(--ease), border-color .2s var(--ease); }
.form-register span.filled { color: var(--druk-noc); border-color: var(--druk-noc); }
.f-demo { font-size: 14px; color: var(--tusz-2); }
.f-opcje label { min-height: 44px; }
.f-pole input[type="email"] { letter-spacing: 0; }
.pieczatka { padding: 16px 26px 14px; }
.piecz-t { font-size: 44px; }
.piecz-data { font-size: 28px; overflow: clip; }   /* cyfry daty spadają z krawędzi pola daty, nie przez napis pieczątki */
.piecz-f { font-size: 13px; }
.wpl-t { font-size: 32px; }

/* ---------------------------------------------------------------- 10. stopka: data założenia drukuje się punktami, jak rok 1992 w historii */
.stopka { overflow-x: clip; }   /* przycinanie tylko w poziomie (data w stopce nie wychodzi poza kolumnę); w pionie nic nie jest obcinane */
.footer-date { display: flex; align-items: baseline; position: relative; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--linia); font: 900 clamp(104px, 17vw, 300px)/.84 "Doto", var(--mono); color: var(--tx); }
.footer-date i { font: 500 .52em/1 var(--mono); font-style: normal; color: var(--druk-noc); margin: 0 .12em; }
.footer-date small { margin-left: auto; max-width: 13ch; font: 400 15px/1.4 var(--sans); color: var(--tx-2); }
@media (max-width: 760px) {
  .footer-date { font-size: clamp(60px, calc((100vw - 40px) / 4.2), 120px); padding-bottom: 54px; margin-bottom: 28px; }   /* data ma 4,04 em szerokości: zawsze mieści się w kolumnie 100vw − 40px */
  .footer-date small { position: absolute; bottom: 0; left: 0; margin: 0; max-width: none; padding-bottom: 14px; font-size: 14px; }
  .stopka { padding-top: 32px; }
  .stopka-menu a, .stopka-kotwice a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.25; }
  .stopka-kotwice { display: grid; grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--linia); }   /* telefon: górny pasek nie ma menu, więc stopka daje kotwice sekcji */
  .kontakt-tekst > p { font-size: 17px; }
  .f-demo { font-size: 14px; }
}

/* statyczny miesiąc na szerokim ekranie: trzy akty obok siebie, podpis pod każdym */
@media (min-width: 1001px) {
  .mies:not(.mies-ruch) .mies-scena { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .mies:not(.mies-ruch) .mies-gora { grid-column: 1 / -1; grid-row: 1; }
  .mies:not(.mies-ruch) .mies-akt-1 { grid-column: 1; grid-row: 2; }
  .mies:not(.mies-ruch) .mies-akt-2 { grid-column: 2; grid-row: 2; }
  .mies:not(.mies-ruch) .mies-akt-3 { grid-column: 3; grid-row: 2; }
  .mies:not(.mies-ruch) .mies-podpis:nth-child(1) { grid-column: 1; grid-row: 3; }
  .mies:not(.mies-ruch) .mies-podpis:nth-child(2) { grid-column: 2; grid-row: 3; }
  .mies:not(.mies-ruch) .mies-podpis:nth-child(3) { grid-column: 3; grid-row: 3; }
  .mies:not(.mies-ruch) .mies-nota { grid-column: 1 / -1; grid-row: 4; }
  .mies:not(.mies-ruch) .mies-karta, .mies:not(.mies-ruch) .mies-mail-do { width: 100%; }
}
/* statyczna historia na szerokim ekranie: wąska taśma pośrodku, jak kartka druku ciągłego */
@media (min-width: 761px) {
  .hist:not(.hist-ruch) .hist-tasma { max-width: 760px; margin-inline: auto; }
}

/* ---------------------------------------------------------------- telefon: krótsza droga (runda „po Solu”)
   Mniej pustych odstępów w usługach, miesiącu, zmianie biura, formularzu i stopce; druki, cyfry cen i nagłówki zachowują rozmiar. */
@media (max-width: 760px) {
  .usl-slot { margin-top: 44px; }
  .usl-slot:first-child { margin-top: 0; }
  .usl-blok { gap: 12px; }
  .usl-linki { align-items: stretch; width: 100%; row-gap: 0; }   /* telefon: dwa wiersze, każde pole ≥ 44 px */
  .usl-wiecej, .usl-link { min-height: 44px; font-size: 16px; }
  .usl-link { justify-content: center; }
  .usl-druk { margin-top: 14px; }
  .mies-akt { margin-top: 28px; gap: 14px; }
  .mies-podpis { margin-top: 12px; }
  .mies-karta { padding: 16px 16px 18px; }
  .mies-odb { margin: 0 -16px -18px; padding: 10px 16px; }
  .mies-wiersze li { padding: 5px 0; }
  .zmb-gora { row-gap: 14px; margin-bottom: 28px; }
  .zmb-dol { margin-top: 32px; row-gap: 18px; }
  .zmb-dol p { font-size: 16.5px; }
  .formularz { gap: 16px; }
  .f-pole textarea { min-height: 112px; }
  .f-opcje { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .stopka-menu, .stopka-kotwice { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .cen-wiersz { padding: 16px 0 18px; }
  .cen-pole { --k: min(27vw, 112px); }
  .cen-gora { gap: 8px; margin-bottom: 20px; }
  .cen-gora p { display: none; }   /* „netto / mies.” stoi przy każdej cenie */
  .cen-nota { margin-top: 22px; }
  .mies-gora { gap: 14px; }
  .mies-kod { font-size: 30px; }
  .mies-opis { margin: 4px 0 10px; }
  .kontakt-tekst { gap: 16px; }
  .adres { margin-top: 4px; padding-top: 16px; }
  .formularz, .wplynelo { padding: 18px; }
  .stopka { padding-bottom: 28px; }
  .footer-date { margin-bottom: 20px; padding-bottom: 46px; }
}