/* kancelaria365.pl - style strony (jedyny własny plik CSS motywu, ładowany ostatni w header.php).
   Od 26.10.2026 cała skórka jest tutaj: wcześniej buduj.php wklejał ją do panelu (Ustawienia > Dodatkowe metatagi).
   Demo PayZO, które było w tym pliku, usunięte (kopia: .work/kancelaria365.pl/porzadek-css/kopia/). */

/* kancelaria365.pl - .k-obraz (etap 6, 26.10.2026): opisane miejsce na grafikę w treści k-* (kierunek A "Rejestr").
   Proporcja w style="aspect-ratio: ..." z generatora, opis grafiki w data-opis (niewidoczny). Pusty element się nie wyświetla.
   Układ hero z grafiką jest niżej w skórce, tło --k-tlo-2 to token skórki. */
.k-obraz {position:relative;display:block;width:100%;margin:0;overflow:hidden;box-sizing:border-box;background:var(--k-tlo-2);}
.k-obraz:empty {display:none;}
.k-obraz img, .k-obraz picture, .k-obraz svg {display:block;width:100%;height:100%;object-fit:contain;}

/* kancelaria365.pl - skórka, kierunek A "Rejestr" (26.10.2026).
   Marka bez zmian: granat #1d2a44, niebieski #277abd, nagłówki Sora, tekst Instrument Sans, tło treści białe,
   tło sekcji #eef4f9, bez pomarańczu. Charakter: cienkie linie i porządek rejestru, granat w liniach i nagłówkach,
   niebieski tylko w działaniach (linki, przyciski). Odświeżenie 26.10: osobne karty z małym zaokrągleniem
   i prostym hoverem (granatowa ramka), akcent nad nagłówkami sekcji, numerowane karty, oś terminów jako linia czasu.
   Wstrzykiwana do <head> przez config.meta (wgrywa buduj.php). Czcionki z własnego serwera: wp-content/fonty-lokalne/.
   Układ nagłówka, stopki i menu na selektorach motywu Neve - jak dotąd (te same co na ogloszenia-firm.pl i skupp.pl).
   Spis: 0 tokeny i kontekst tła, 1 typografia, 1b wspólne wzorce, 2 rama motywu, 3 pudełko szerokości, 4 moduły k-*,
   5 strony spoza szablonów, 6 dostępność (16 px, kontrast), 7 progi szerokości. */

/* === 0. TOKENY ============================================================================================== */
:root {
  /* kolory marki i odcienie */
  --k-granat: #1d2a44;
  --k-granat-2: #26365a;
  --k-granat-3: #15203a;
  --k-granat-4: #32466f;             /* podświetlona pozycja podmenu */
  --k-niebieski: #277abd;            /* biały na nim 4,56:1 - nie rozjaśniać */
  --k-niebieski-ciemny: #1f6399;     /* linki i jasne przyciski na #eef4f9: 5,74:1 */
  --k-niebieski-jasny: #9cc6ea;      /* akcent i linki na granacie: 8,0:1 */
  --k-tlo: #eef4f9;                  /* jasne tło sekcji i ramek */
  --k-tlo-2: #f7fafd;                /* tło miejsca na obrazek (nie pod tekstem: #277abd ma na nim 4,35:1) */
  --k-tekst: #24304a;
  --k-tekst-2: #4a5872;              /* 7,2:1 na bieli, 6,5:1 na #eef4f9 */
  --k-tekst-na-granacie: #dbe4f0;
  --k-tekst-pasek: #d6deea;          /* górny pasek nagłówka */
  --k-tekst-stopka: #c9d3e2;
  --k-tekst-stopka-2: #9aa8bf;       /* pasek praw autorskich */
  --k-linia: #d9e3ee;                /* linie wewnątrz komponentów */
  --k-linia-mocna: #a9bbcf;          /* obrys kart, ramek, siatek */
  --k-linia-na-granacie: rgba(255, 255, 255, .3);

  /* szerokości */
  --k-szer: 1200px;
  --k-szer-pad: calc(var(--k-szer) + 40px);
  --k-szer-tekst: 860px;
  --k-spis-szer: 260px;

  /* typografia */
  --k-tekst-min: 1rem;               /* wytyczne: tekst min. 16 px */
  --k-r-h1: clamp(32px, 4.2vw, 48px);
  --k-r-h1-hero: clamp(34px, 4.4vw, 52px);
  --k-r-h2: clamp(28px, 3.2vw, 38px);
  --k-r-h3: clamp(19px, 1.6vw, 21px);
  --k-r-h4: 22px;                    /* mniejszy h2: stan prawny, dokumenty */
  --k-r-tytul: 20px;                 /* tytuły kart i ramek, daty osi */
  --k-r-lead: 19px;
  --k-r-zdanie: 20px;
  --k-r-duzy: 18px;                  /* wyróżniony tekst, pytania FAQ, kwoty */
  --k-r-tekst: 17px;
  --k-r-etykieta: 16px;
  --k-etykieta-odstep: .06em;        /* etykiety wersalikami */

  /* odstępy w komponentach: skala 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px */
  --k-odstep: 1.25rem;               /* 20 px: domyślny odstęp wewnątrz i między modułami */
  --k-odstep-karty: 24px;            /* padding karty i ramki */

  /* odstępy sekcji buildera (padding góra/dół w style sekcji) */
  --k-sekcja-duza: clamp(3.5rem, 9vw, 5rem);    /* 56-80 px: główna, sekcje z kartami */
  --k-sekcja: clamp(3rem, 7vw, 4rem);           /* 48-64 px: zwykła sekcja */
  --k-sekcja-mala: clamp(2rem, 5vw, 2.5rem);    /* 32-40 px: pas nad stopką, sekcja doklejona */

  /* kształty */
  --k-promien: 4px;                  /* przyciski, pola formularza, znaczniki */
  --k-promien-karta: 6px;            /* karty, ramki, panele */
  --k-cien: none;                    /* bez cieni; hover karty to granatowa ramka */
  --k-fokus: 3px solid var(--k-granat);
  --k-link-na-tle: var(--k-niebieski-ciemny);
  --k-przycisk: 52px;                /* wysokość .k-btn i przycisków w treści */
  --k-przycisk-motyw: 48px;          /* przyciski motywu: formularz kontaktu, wyszukiwarka bloga */

  /* tokeny motywu Neve - podmiana przestawia przyciski, ikony i linki w całym CMS, więc zostają w tej postaci */
  --mark: #277abd;
  --mark-light: #9cc6ea;
  --mark-dark: #1f6399;
  --mark2: #277abd;
  --mark2-light: #9cc6ea;
  --mark2-dark: #1f6399;
  --font-family-header: 'Sora', 'Segoe UI', Arial, sans-serif;
  --font-family-header-regular: 600;
  --font-family-header-medium: 600;
  --font-family-header-bold: 700;
  --font-family-text: 'Instrument Sans', 'Segoe UI', Arial, sans-serif;
  --font-family-text-regular: 400;
  --font-family-text-medium: 500;
  --font-family-text-bold: 600;
}
/* kontekst tła granatowego (hero, pas, sekcja z tłem granatowym): kolory ustawione raz, komponenty biorą je ze zmiennych
   --k-c-*, a na jasnym tle z wartości zapasowej. Tło sekcji szukamy bez rozróżniania wielkości liter (#1D2A44 z panelu). */
.k-hero, .k-pas, section[style*="#1d2a44" i] {
  --k-c-naglowek: #fff; --k-c-tekst: var(--k-tekst-na-granacie); --k-c-link: var(--k-niebieski-jasny);
  --k-c-akcent: var(--k-niebieski-jasny); --k-c-linia: var(--k-linia-na-granacie); --k-c-fokus: #fff;
}
/* zdanie i pasek zaufania mają na granacie kolor nagłówka; białe karty wracają do kolorów jasnego tła */
.k-zdanie, .k-zaufanie { --k-c-tekst: var(--k-c-naglowek); }
.k-karta { --k-c-tekst: var(--k-tekst); }
.k-karta .k-karta-opis { --k-c-tekst: var(--k-tekst-2); }

/* === 1. TYPOGRAFIA ========================================================================================== */
body { color: var(--k-tekst); background: #fff; font-family: var(--font-family-text); }
h1, h2, h3, h4, h5, .h1, .h2, .h3 { color: var(--k-granat); font-family: var(--font-family-header); letter-spacing: -0.01em; text-wrap: balance; }
h1, .h1 { font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h2, .h2 { font-weight: 600; line-height: 1.15; font-size: var(--k-r-h2); letter-spacing: -0.015em; margin: 2.5rem 0 1.1rem; }
h3, .h3 { font-weight: 600; line-height: 1.3; font-size: var(--k-r-h3); margin: 1.75rem 0 .6rem; }
a { color: var(--k-niebieski); text-underline-offset: 3px; }
a:hover { color: var(--k-niebieski-ciemny); }
/* motyw: .body1 daje 500 i sztywne 24 px interlinii (gotcha opiekawdomu 0B) */
.body1 { font-weight: 400; font-size: var(--k-r-tekst); letter-spacing: 0; line-height: 1.65; }
.text_container p, .text_container li { line-height: 1.65; }
.text_container ul li::marker { color: var(--k-granat); }
strong { color: inherit; }

/* === 1b. WSPÓLNE WZORCE: zapisane raz, w regułach komponentów zostają tylko różnice ============================ */
/* rama karty: biel, cienka ramka, małe zaokrąglenie */
.k-karta, .k-dla-kogo li, .k-3 > div, .k-os p, .k-cena, .k-ramka, body .articles_wrapper article.article_container.h a, .k-linki li {
  background: #fff; border: 1px solid var(--k-linia-mocna); border-radius: var(--k-promien-karta);
}
/* hover karty: granatowa ramka, bez cieni i uniesień */
.k-karta, .k-dla-kogo li, body .articles_wrapper article.article_container.h a { transition: border-color .15s; }
.k-karta:hover, .k-dla-kogo li:hover, body .articles_wrapper article.article_container.h a:hover { border-color: var(--k-granat); }
/* etykieta wersalikami (na telefonie też etykiety komórek tabeli, punkt 7) */
.k-spis-tytul, .k-cena-kwota small, .k-skrot .k-ramka-tytul, table.k-tabela thead th, main aside.menu .aside_box .head {
  font-family: var(--font-family-text); font-size: var(--k-r-etykieta); font-weight: 600; letter-spacing: var(--k-etykieta-odstep);
  text-transform: uppercase; color: var(--k-tekst-2);
}
/* linia granatowa 2 px nad blokiem */
.k-zdanie, .k-spis, .k-faq, table.k-tabela, main aside.menu .aside_box, main .articles_pages, .k-dokument table { border-top: 2px solid var(--k-granat); }
/* numer z licznika CSS */
.k-dla-kogo li::before, .k-3 > div::before, .k-spis li::before, .k-kroki li::before { font-family: var(--font-family-header); font-weight: 600; font-size: var(--k-tekst-min); }
/* miejsce na obrazek 16:9 (karta, karta wpisu); pusty slot karty ukryty */
.k-karta-obraz, body .articles_wrapper article.article_container.h .article_photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--k-tlo-2); border-bottom: 1px solid var(--k-linia); }
.k-karta-obraz img, body .articles_wrapper article.article_container.h .article_photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* kształt przycisku: .k-btn, przyciski motywu, "Więcej w Blog", submit formularza */
.k-btn, input[type=submit], .button a, a.button, button.button, body main .more_articles a {
  min-height: var(--k-przycisk); padding: 13px 22px; border-radius: var(--k-promien); font-family: var(--font-family-text);
  font-weight: 600; font-size: var(--k-tekst-min); cursor: pointer;
}
/* fokus z klawiatury: jedna reguła na odstęp obrysu */
.k-btn:focus-visible, input[type=submit]:focus-visible, .button a:focus-visible, a.button:focus-visible, body main .more_articles a:focus-visible { outline: var(--k-fokus); outline-offset: 3px; }
.k-karta:focus-within, .k-faq summary:focus-visible, body .articles_wrapper article.article_container.h a:focus-visible { outline: var(--k-fokus); outline-offset: 2px; }
.k-formularz input:focus-visible, .k-formularz textarea:focus-visible { outline: var(--k-fokus); outline-offset: 0; }
.k-test-opcja:focus-visible { outline: var(--k-fokus); outline-offset: -3px; }
/* listy bez punktorów; listy linków z linią pod wierszem */
.k-zaufanie, .k-dla-kogo, .k-os, .k-karta-lista, .k-spis ol, .k-kroki, .k-linki, .k-test-masz, main aside.menu .aside_box .box ul { list-style: none; padding: 0; }
.k-karta-lista li, .k-spis li, .k-test-masz li, main aside.menu .aside_box .box li { border-bottom: 1px solid var(--k-linia); }
/* link bez podkreślenia, podkreślony po najechaniu */
.breadcrumbs .center a, .k-karta-lista a, .k-dla-kogo a, .k-os p a, .k-spis a, table.k-tabela a, main aside.menu .aside_box .box li a, .k-linki a { text-decoration: none; }
.breadcrumbs .center a:hover, .k-karta-lista a:hover, .k-dla-kogo a:hover, .k-os p a:hover, .k-spis a:hover, table.k-tabela a:hover, main aside.menu .aside_box .box li a:hover, .k-linki a:hover { text-decoration: underline; }

/* === 2. RAMA MOTYWU (nagłówek, menu, stopka, przyciski motywu) - bez zmian względem 23.10, tylko tokeny ======== */
header.header_main { border-bottom: 3px solid var(--k-niebieski) !important; }
header.header_main section { background: var(--k-granat) !important; }
header.header_main section .center a,
header.header_main section .center span { color: #fff !important; }
header.header_main section .center a:hover { color: var(--k-niebieski-jasny) !important; }
header.header_main section .logo a img { max-height: 40px !important; width: auto; }
header.header_main .header_wrapper { background: var(--k-granat-3) !important; color: var(--k-tekst-pasek) !important; }
header.header_main .header_wrapper .header_container a,
header.header_main .header_wrapper .header_container span { color: var(--k-tekst-pasek) !important; }
header.header_main .header_wrapper .header_container a:hover { color: #fff !important; }
.header_menu_responsive { background: var(--k-granat) !important; }
.header_menu_responsive a, .header_menu_responsive span { color: #fff !important; }
/* przycisk menu (telefon, tablet): obrysowy jak .k-btn-bialy na granacie, 44 px (cel dotykowy), ikona 26 px (26.10) */
header.header_main section .center .header_menu_open { width: 44px; height: 44px; padding: 0 !important; box-sizing: border-box; background: transparent !important; border: 1px solid var(--k-linia-na-granacie); border-radius: var(--k-promien); transition: background-color .15s, border-color .15s; }
header.header_main section .center .header_menu_open:hover { background: rgba(255, 255, 255, .1) !important; border-color: #fff; }
header.header_main section .center .header_menu_open span { color: #fff !important; }
header.header_main section .center .header_menu_open span.material-symbols-outlined { font-size: 26px !important; line-height: 1; }
nav.header_menu > ul > li > a { font-family: var(--font-family-header); font-weight: 600; font-size: 15px; }
/* podmenu hubów: motyw daje białe linki na białym tle - jedzie na granatowo jak pasek */
header.header_main section .center li ul {
  background: var(--k-granat-2) !important; border-top: 2px solid var(--k-niebieski) !important;
  box-shadow: 0 12px 28px rgba(10, 20, 40, .35) !important;
}
header.header_main section .center li ul li { background: transparent !important; }
header.header_main section .center li ul a { color: #fff !important; background: transparent !important; font-weight: 500; }
header.header_main section .center li ul li:hover,
header.header_main section .center li ul li:hover > a,
header.header_main section .center li ul a:hover { background: var(--k-granat-4) !important; color: #fff !important; }

/* stopka na granatowo (klasa motywu bg-grey-lighter ma !important) */
footer.footer_wrapper .footer_content,
footer.footer_wrapper .footer_content.bg-grey-lighter { background-color: var(--k-granat) !important; }
footer.footer_wrapper, footer.footer_wrapper p, footer.footer_wrapper li { color: var(--k-tekst-stopka) !important; }
footer.footer_wrapper strong { color: #fff !important; }
footer.footer_wrapper a { color: var(--k-tekst-stopka) !important; text-decoration: none; }
footer.footer_wrapper a:hover { color: #fff !important; text-decoration: underline; }
footer.footer_wrapper ul { list-style: none; padding: 0; margin: 0; }
footer.footer_wrapper li { padding: .22rem 0; }
footer.footer_wrapper .k-stopka-haslo { color: #fff !important; font-weight: 600; }
.footer_credits { background: var(--k-granat-3) !important; }
.footer_credits .center > div { color: var(--k-tekst-stopka-2) !important; padding: .8rem 0; }
.footer_credits a { color: var(--k-tekst-stopka-2) !important; }

/* przyciski motywu (formularz kontaktu, wyszukiwarka bloga): kształt z punktu 1b, niższe, kolory motywu nadpisane */
input[type=submit], .button a, a.button, button.button {
  min-height: var(--k-przycisk-motyw); padding: 12px 22px; border: 0; border-radius: var(--k-promien) !important;
  background: var(--k-niebieski) !important; color: #fff !important;
}
input[type=submit]:hover, .button a:hover, a.button:hover { background: var(--k-niebieski-ciemny) !important; }

/* okruszki motywu: 16 px, w pudełku treści (ta sama lewa krawędź co H1), separatory w kolorze linii */
.breadcrumbs .center { max-width: var(--k-szer-pad) !important; padding: .9rem 20px .2rem !important; box-sizing: border-box; color: var(--k-tekst-2); line-height: 1.5; font-size: var(--k-tekst-min); }
/* ikony okruszków: Material Symbols (26.10, zamiast Font Awesome) */
.breadcrumbs .center .material-symbols-outlined { font-size: 1.25em; line-height: 1; vertical-align: -.25em; }
.breadcrumbs .center a + .material-symbols-outlined, .breadcrumbs .center > .material-symbols-outlined { color: var(--k-linia-mocna); margin: 0 .2rem; }

/* === 3. JEDNO PUDEŁKO SZEROKOŚCI (jak ogloszenia-firm: motyw trzyma 1400 px, sekcje 1200) ====================== */
.center, main.article_container, main.p3.full .pages_contact {
  max-width: var(--k-szer) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
}
/* jedna lewa krawędź: H1 motywu i treść buildera (.k-sec) w tym samym pudełku 1240 px z odstępem 20 px.
   Builder dawał .section-content padding 32 px, a wrapper H1 miał 1200 px - stąd 10-32 px rozjazdu (pomiar 15.10). */
main section.section_container.full > .text_container.body1 > div:first-child {
  max-width: var(--k-szer-pad) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
}
main .text_container section.container > .section-content { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
/* wpis: to samo pudełko 1240 px z odstępem 20 px (motyw dawał 1200 px + padding 32 px, treść wpisu 32 px dalej niż na innych stronach) */
main.article_container { max-width: var(--k-szer-pad) !important; padding-left: 20px !important; padding-right: 20px !important; }
/* strona błędu (themes/Neve/404.php: main bez klasy i bez .text_container, body.404): to samo pudełko, blok buildera
   nie rozpycha się na telefonie (min-width: 0), H1 z treści jak na innych stronach (26.10) */
body[class~="404"] main { display: block; max-width: var(--k-szer-pad) !important; margin: 0 auto !important; padding: 0 !important; }
body[class~="404"] main section.container { padding-left: 0 !important; padding-right: 0 !important; }
body[class~="404"] main section.container > .section-content { padding: 0 !important; max-width: none !important; }
body[class~="404"] main section.container > .section-content > div { min-width: 0; flex: 1 1 auto; }
body[class~="404"] main h1 { font-size: var(--k-r-h1); line-height: 1.1; margin: 1.75rem 0 1rem; }
/* na telefonie motyw daje jeszcze 16 px samej sekcji buildera */
main .text_container > section.container { padding-left: 0 !important; padding-right: 0 !important; }
/* blok sekcji jest elementem flex motywu (.section-content: flex row wrap) i bez min-width: 0 rozpychała go najszersza
   treść (lista linków, przyciski, tabela): na telefonie tekst starych podstron i dokumentów wychodził poza ekran */
main .text_container section.container > .section-content > div { min-width: 0; }
main:not(.full) { max-width: var(--k-szer); margin-left: auto; margin-right: auto; }
/* H1 podstrony (drukuje motyw): ta sama lewa krawędź co treść */
main section.section_container.full > .text_container > div:first-child > h1 {
  max-width: var(--k-szer-pad); margin: 0 auto; padding: 1.75rem 20px 1.25rem; box-sizing: border-box;
  font-size: var(--k-r-h1);
}
main.p3.full > section.section_container.full > h1 {
  max-width: var(--k-szer-pad); margin: 0 auto; padding: 1.75rem 20px 1.25rem; box-sizing: border-box;
}
@media (max-width: 1240px) { main.p3.full .pages_contact { padding-left: 20px; padding-right: 20px; } }

/* === 4. MODUŁY k-* (treść budowana przez buduj.php, wgraj-strony.php, k365-moduly.php) ======================== */

/* 4.1 kontenery i tekst */
.k-sec { max-width: var(--k-szer-pad); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.k-sec *, .k-hero * { box-sizing: border-box; }
.k-sec > h2:first-child { margin-top: 0; }
/* akcent nad nagłówkiem sekcji (CSS, bez tekstu) */
.k-sec > h2::before { content: ""; display: block; width: 40px; height: 3px; margin: 0 0 14px; border-radius: 2px; background: var(--k-c-akcent, var(--k-niebieski)); }
.k-sec > :last-child { margin-bottom: 0; }
/* wąska kolumna tekstu przy lewej krawędzi pudełka - ta sama krawędź co H1 drukowany przez motyw */
.k-waska > * { max-width: var(--k-szer-tekst); }
.k-waska > .k-linki, .k-waska > .k-cta-rzad { max-width: 1000px; }
.k-lead { font-size: var(--k-r-lead); line-height: 1.6; color: var(--k-tekst-2); max-width: 820px; }
.k-lead p { margin: 0 0 1rem; }
.k-lead p:last-child { margin-bottom: 0; }
.k-sec > .k-lead:not(:last-child) { margin-bottom: 2rem; }
.k-tel { font-weight: 600; color: var(--k-niebieski-ciemny) !important; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.k-tel:hover { text-decoration-thickness: 2px; }

/* 4.2 zdanie z presupozycją: linia nad (granat, punkt 1b) i pod (cienka), bez tła i bez ramki z boku; na granacie białe */
.k-zdanie { margin: 2rem 0; padding: 1.1rem 0; border-top-color: var(--k-c-naglowek, var(--k-granat)); border-bottom: 1px solid var(--k-c-linia, var(--k-linia-mocna)); }
.k-zdanie p { margin: 0; font-family: var(--font-family-header); font-weight: 600; color: var(--k-c-naglowek, var(--k-granat)); font-size: var(--k-r-zdanie); line-height: 1.45; max-width: 820px; }
.k-zdanie a { color: var(--k-niebieski-ciemny); }
.k-hero .k-zdanie { margin: 0 0 2rem; max-width: 680px; }
/* w ramce: bez własnej oprawy */
.k-ramka .k-zdanie { border: 0; padding: 0; margin: 0 0 var(--k-odstep); }

/* 4.3 przyciski (kształt w punkcie 1b) */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box;
  border: 2px solid var(--k-niebieski); background: var(--k-niebieski); color: #fff !important;
  line-height: 1.25; text-align: center; text-decoration: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
}
.k-btn:hover { background: var(--k-niebieski-ciemny); border-color: var(--k-niebieski-ciemny); }
.k-btn:focus-visible { outline-color: var(--k-c-fokus, var(--k-granat)); }
.k-btn-jasny { background: transparent; color: var(--k-niebieski) !important; }
.k-btn-jasny:hover { background: var(--k-niebieski); border-color: var(--k-niebieski); color: #fff !important; }
.k-btn-bialy { background: transparent; border-color: #fff; }
.k-btn-bialy:hover { background: #fff; border-color: #fff; color: var(--k-granat) !important; }
.k-cta-rzad { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 1.5rem; }

/* 4.4 hero głównej (sekcja buildera z granatowym gradientem; kolory z kontekstu tła) */
.k-hero { width: 100%; color: var(--k-c-naglowek); }
.k-hero-in { max-width: var(--k-szer-pad); margin: 0 auto; padding: 4.5rem 20px 4rem; }
.k-hero h1 { color: var(--k-c-naglowek); font-size: var(--k-r-h1-hero); line-height: 1.08; margin: 0 0 1.5rem; max-width: 860px; }
.k-hero h1 span { color: var(--k-niebieski-jasny); }
.k-hero p { font-size: var(--k-r-lead); line-height: 1.6; color: var(--k-c-tekst); max-width: 680px; margin: 0 0 1.75rem; }
.k-hero .k-cta-rzad { margin-top: 0; }
/* hero z grafiką (.k-obraz, część B): grafika w prawej kolumnie obok H1, wstępu, zdania i przycisków (bez ramki, przezroczyste tło
   pod gradient), pas zaufania pod obiema kolumnami; na tablecie i telefonie grafika ukryta; pusty .k-obraz nie dzieli hero (26.10) */
.k-hero-in:has(> .k-obraz:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 38vw, 540px); column-gap: clamp(32px, 4vw, 56px); align-content: start; }
.k-hero-in:has(> .k-obraz:not(:empty)) > * { grid-column: 1; min-width: 0; }
.k-hero-in:has(> .k-obraz:not(:empty)) > .k-obraz { grid-column: 2; grid-row: 1 / span 4; align-self: center; background: transparent; border: 0; border-radius: 0; }
.k-hero-in:has(> .k-obraz:not(:empty)) > .k-zaufanie { grid-column: 1 / -1; }
/* pasek zaufania: cztery pozycje w rzędzie, rozdzielone liniami */
.k-zaufanie { margin: 2.25rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--k-linia-na-granacie); }
.k-zaufanie li { display: flex; gap: 10px; align-items: flex-start; color: var(--k-c-tekst, #fff); padding: 1rem 1rem 0 0; font-size: var(--k-tekst-min); line-height: 1.45; }
.k-zaufanie li::before { content: ""; flex: none; width: 6px; height: 11px; margin: 3px 4px 0 2px; border-right: 2px solid var(--k-niebieski-jasny); border-bottom: 2px solid var(--k-niebieski-jasny); transform: rotate(45deg); }

/* 4.5 karty: jedna baza (rama, hover i obrazek w punkcie 1b), warianty k-kafel i k-karta-cena; linie wewnątrz karty */
.k-karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; margin: 1.5rem 0 0; }
.k-kafle.k-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.k-karta { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--k-odstep-karty); overflow: hidden; }
.k-karta > * { margin-top: 0; margin-bottom: 0; }
.k-karta-obraz { margin: calc(var(--k-odstep-karty) * -1) calc(var(--k-odstep-karty) * -1) 8px; }
.k-karta-obraz:empty { display: none; }
.k-karta-tytul { font-size: var(--k-r-tytul); line-height: 1.3; margin: 0; }
.k-karty .k-karta h3.k-karta-tytul a { color: var(--k-granat); text-decoration: none; }
.k-karty .k-karta:hover h3.k-karta-tytul a { text-decoration: underline; text-underline-offset: 4px; }
/* cała karta klikalna przez link tytułu; linki z listy leżą nad nim */
.k-karta-tytul a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.k-karta-opis { color: var(--k-tekst-2); line-height: 1.6; }
.k-karta-kwota { padding-top: 12px; border-top: 1px solid var(--k-linia); font-family: var(--font-family-header); font-weight: 600; font-size: var(--k-r-duzy); color: var(--k-granat); }
.k-karta-lista { border-top: 1px solid var(--k-linia); }
.k-karta-lista a { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--k-niebieski) !important; }
.k-karta-cta { margin-top: auto !important; display: flex; align-items: center; gap: 10px; padding-top: 8px; font-weight: 600; color: var(--k-granat); }
/* groty: linki listy kart, CTA karty, "czytaj więcej", linki dla-kogo i osi terminów (CSS, bez tekstu) */
.k-karta-lista a::after, .k-karta-cta::after, body .articles_wrapper article.article_container.h .article_more::after, .k-dla-kogo a::after, .k-linki a::after, .k-os p a::after {
  content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
}
section[style*="#1d2a44" i] .k-karta { border-color: var(--k-granat-2); }

/* 4.6 dla kogo: numerowane karty sytuacji (numer z licznika CSS, ukryty przed czytnikami) */
.k-dla-kogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 1.5rem 0 0; counter-reset: dk; }
.k-dla-kogo li { counter-increment: dk; display: flex; flex-direction: column; gap: 12px; padding: var(--k-odstep-karty); }
.k-dla-kogo li::before { content: counter(dk, decimal-leading-zero); content: counter(dk, decimal-leading-zero) / ""; letter-spacing: .04em; color: var(--k-niebieski-ciemny); }
.k-dla-kogo p { margin: 0; font-size: var(--k-r-duzy); line-height: 1.5; color: var(--k-tekst); }
.k-dla-kogo a { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; padding-top: 4px; font-weight: 600; }

/* 4.7 trzy kolumny cech: białe karty z numerem w kwadracie (numer z licznika CSS, ukryty przed czytnikami) */
.k-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 1.5rem 0 0; counter-reset: k3; }
.k-3 > div { counter-increment: k3; padding: var(--k-odstep-karty); border-color: var(--k-linia); }
.k-3 > div::before { content: counter(k3, decimal-leading-zero); content: counter(k3, decimal-leading-zero) / ""; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 0 16px; border-radius: var(--k-promien-karta); background: var(--k-granat); color: #fff; }
.k-3 h3 { margin: 0 0 .5rem; font-size: var(--k-r-tytul); }
.k-3 p { margin: 0; line-height: 1.6; color: var(--k-tekst-2); }

/* 4.8 oś terminów z przepisów: linia czasu. Desktop: pionowa linia na środku, wpisy naprzemiennie (data po jednej
   stronie, karta z opisem po drugiej). Do 760 px linia po lewej, data nad kartą. */
.k-os { position: relative; margin: 2rem 0 0; }
.k-os::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; margin-left: -1px; background: var(--k-linia-mocna); }
.k-os li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; margin: 0 0 24px; }
.k-os li:last-child { margin-bottom: 0; }
.k-os li::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 20px; width: 18px; height: 18px; margin-left: -9px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 4px solid var(--k-niebieski); }
.k-os-data { grid-column: 1; grid-row: 1; justify-self: end; display: block; padding-top: 12px; text-align: right; font-family: var(--font-family-header); font-weight: 700; font-size: var(--k-r-tytul); line-height: 1.3; letter-spacing: -.01em; color: var(--k-granat); font-variant-numeric: tabular-nums; }
.k-os p { grid-column: 2; grid-row: 1; position: relative; margin: 0; padding: 16px 20px; line-height: 1.55; }
.k-os p::before { content: ""; position: absolute; top: 22px; left: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--k-linia-mocna); border-bottom: 1px solid var(--k-linia-mocna); transform: rotate(45deg); }
.k-os li:nth-child(even) .k-os-data { grid-column: 2; justify-self: start; text-align: left; }
.k-os li:nth-child(even) p { grid-column: 1; }
.k-os li:nth-child(even) p::before { left: auto; right: -7px; transform: rotate(-135deg); }
.k-os p a { display: flex; align-items: center; gap: 8px; width: fit-content; margin-top: 8px; font-weight: 600; }

/* 4.9 formularz kontaktu CMS (markup bez zmian) */
.k-formularz { margin-top: 1.5rem; }
.k-formularz form { margin: 0; }
.k-formularz .columns.c2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-formularz .line, body .k-formularz .columns.c2 > div.line { display: block; width: 100%; max-width: none; justify-self: stretch; margin: 0 0 12px; }
.k-formularz input[type=email], .k-formularz input[type=text], .k-formularz textarea {
  width: 100%; box-sizing: border-box; margin: 0; padding: 13px 14px; font: inherit; font-size: var(--k-r-tekst); color: var(--k-tekst);
  background: #fff; border: 1px solid var(--k-linia-mocna); border-radius: var(--k-promien);
}
.k-formularz textarea { min-height: 150px; resize: vertical; }
.k-formularz input::placeholder, .k-formularz textarea::placeholder { color: var(--k-tekst-2); opacity: 1; }
.k-formularz input:focus-visible, .k-formularz textarea:focus-visible { border-color: var(--k-granat); }
.k-formularz input[type=submit] { display: block; min-height: var(--k-przycisk); margin: 4px 0 0; padding: 13px 28px; }
.k-formularz + .k-cta-rzad { margin-top: 1rem; }
/* CTA z formularzem (główna): opis i telefon po lewej, formularz w jasnym panelu po prawej (od 1001 px) */
@media (min-width: 1001px) {
  .k-cta-koniec:has(> .k-formularz) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .k-waska.k-cta-koniec:has(> .k-formularz) > * { max-width: none; }
  .k-cta-koniec:has(> .k-formularz) > :not(.k-formularz) { grid-column: 1; }
  .k-cta-koniec:has(> .k-formularz) > .k-formularz { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}
.k-cta-koniec > .k-formularz { padding: 28px; background: var(--k-tlo); border-radius: var(--k-promien-karta); }

/* 4.10 spis treści (składa go przy wyświetlaniu load-theme_k365-spis.php ze wszystkich H2): zakładki w kolumnie
   bocznej (punkt 4.10b), wpis u góry treści */
.k-tresc { min-width: 0; max-width: var(--k-szer-tekst); }
h2[id] { scroll-margin-top: 1rem; }
/* spis: linia granatowa nad (punkt 1b), numerowane wiersze rozdzielone cienką linią */
.k-spis { margin: 0 0 2rem; padding: 14px 0 0; background: none; border-radius: 0; }
.k-spis-tytul { margin: 0 0 8px; }
.k-spis ol { counter-reset: spis; margin: 0; }
.k-spis li { counter-increment: spis; display: grid; grid-template-columns: 2rem minmax(0, 1fr); }
.k-spis li::before { content: counter(spis, decimal-leading-zero); padding: 8px 0; color: var(--k-tekst-2); font-variant-numeric: tabular-nums; }
.k-spis a { display: block; padding: 8px 0; line-height: 1.4; color: var(--k-niebieski) !important; }
.k-spis-przyklejony { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
/* spis we wpisie (nad treścią, bez siatki): zwarta lista w jednej kolumnie, 16 px (minimum z briefu),
   numery w kolorze tekstu pomocniczego, bez linii między wierszami */
.text_container > .k-spis { margin: 1.75rem 0 2.25rem; padding: 12px 0 10px; border-bottom: 1px solid var(--k-linia-mocna); max-width: 640px; }
.text_container > .k-spis .k-spis-tytul { margin: 0 0 6px; }
.text_container > .k-spis li { grid-template-columns: 1.75rem minmax(0, 1fr); border-bottom: 0; }
.text_container > .k-spis li::before { padding: 3px 0; font-family: var(--font-family-text); font-weight: 500; line-height: 1.4; }
.text_container > .k-spis a { padding: 3px 0; font-size: var(--k-tekst-min); line-height: 1.4; }
.text_container > .k-spis a:hover { color: var(--k-niebieski-ciemny) !important; }
/* cennik: tabele na całą szerokość kolumny treści */
.k-cennik-wrap .k-tresc { max-width: none; }

/* 4.10b hub, usługa i cennik: spis w kolumnie bocznej motywu (aside.menu z "Treści dodatkowej", lewe_menu=1), po lewej,
   przyklejony na całej długości treści. main staje się siatką, a opakowania motywu (section_container, text_container)
   dostają display: contents, więc okruszki, H1, sekcje buildera i aside są elementami jednej siatki: okruszki, H1
   i wstęp na całą szerokość, aside (order 1) od rozdziałów do końca treści, reszta (order 2) za nim. Od 1001 px dwie
   kolumny (spis 260 px, treść do 860 px), do 1000 px jedna: wstęp, spis, rozdziały i reszta, tła sekcji na całą
   szerokość jak na stronach bez spisu. Bez :has() zostaje układ motywu 25/75. */
main:has(> aside.menu .k-spis) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; max-width: var(--k-szer-pad); margin: 0 auto; padding: 0; }
main:has(> aside.menu .k-spis) > section.section_container, main:has(> aside.menu .k-spis) > section.section_container > .text_container { display: contents; }
main:has(> aside.menu .k-spis) > .breadcrumbs, main:has(> aside.menu .k-spis) .text_container > div:first-child, main:has(> aside.menu .k-spis) .text_container > section:first-of-type { grid-column: 1 / -1; }
/* H1 od lewej krawędzi treści (26.10): _style.css daje .text_container > div margin: 0 auto, a w siatce blok z krótkim H1 zwężał się i stawał na środku */
main:has(> aside.menu .k-spis) .text_container > div:first-child { margin-left: 0; margin-right: 0; }
main:has(> aside.menu .k-spis) .text_container > section:not(:first-of-type) { order: 2; min-width: 0; }
main:has(> aside.menu .k-spis) > aside.menu { display: block; order: 1; width: auto; margin: 0; padding: 0 20px; font-size: var(--k-r-tekst); line-height: 1.65; }   /* jak .body1 treści */
main:has(> aside.menu .k-spis) > aside.menu .k-spis { margin: 0 0 var(--k-sekcja-mala); }
/* 4.10c cennik do 1000 px: spis jako przyklejony pasek obszarów (.k-spis-pasek, wariant B, 26.10). Krótkie etykiety z
   data-krotko na H2 (load-theme_k365-spis.php), przewijanie w bok, aktywny obszar (aria-current) ustawia
   modules/js/footer/65-kanc365-spis-pasek.php. Przykleja się cały aside: jego rodzic (main) obejmuje całą treść. */
.k-spis-krotko { display: none; }
@media (max-width: 1000px) {
  main:has(> aside.menu .k-spis-pasek) > aside.menu { position: sticky; top: 0; z-index: 40; padding: 0; margin: 0 0 var(--k-sekcja-mala); background: #fff; border-bottom: 1px solid var(--k-linia); box-shadow: 0 2px 8px rgba(21, 32, 58, .08); }
  main:has(> aside.menu .k-spis-pasek) > aside.menu .k-spis-pasek { position: relative; top: 0; max-height: none; overflow: visible; margin: 0; padding: 0; border-top: 0; }
  .k-spis-pasek .k-spis-tytul { display: none; }
  .k-spis-pasek ol { display: flex; gap: 8px; margin: 0; padding: 8px 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; }
  /* krawędzie: gradient z tła do przezroczystości tam, gdzie jest jeszcze coś do przewinięcia (data-lewo / data-prawo z JS) */
  .k-spis-pasek::before, .k-spis-pasek::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 40px; pointer-events: none; opacity: 0; transition: opacity .2s; }
  .k-spis-pasek::before { left: 0; background: linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0)); }
  .k-spis-pasek::after { right: 0; background: linear-gradient(to left, #fff 20%, rgba(255, 255, 255, 0)); }
  .k-spis-pasek[data-lewo]::before, .k-spis-pasek[data-prawo]::after { opacity: 1; }
  .k-spis-pasek ol::-webkit-scrollbar { display: none; }
  .k-spis-pasek li { display: block; flex: 0 0 auto; border: 0; scroll-snap-align: start; }
  .k-spis-pasek li::before { content: none; }
  .k-spis-pasek a { padding: 10px 14px; border: 1px solid var(--k-linia-mocna); border-radius: var(--k-promien); background: #fff; color: var(--k-granat) !important; font-family: var(--font-family-header); font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
  .k-spis-pasek a:hover { text-decoration: none; border-color: var(--k-granat); }
  .k-spis-pasek a:focus-visible { outline: var(--k-fokus); outline-offset: 2px; }
  .k-spis-pasek a[aria-current="true"] { background: var(--k-granat); border-color: var(--k-granat); color: #fff !important; }
  .k-spis-pasek a:has(.k-spis-krotko) .k-spis-pelny { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .k-spis-pasek .k-spis-krotko { display: inline; }
  main:has(> aside.menu .k-spis-pasek) h2[id] { scroll-margin-top: 76px; }
}
/* H1 jak na stronach bez kolumny bocznej (.full), nie h1 motywu */
main:has(> aside.menu .k-spis) .text_container > div:first-child > h1 { max-width: none; margin: 0; padding: 1.75rem 20px 1.25rem; box-sizing: border-box; font-size: var(--k-r-h1); }
@media (min-width: 1001px) {
  main:has(> aside.menu .k-spis) { grid-template-columns: var(--k-spis-szer) minmax(0, 1fr); column-gap: 48px; padding: 0 20px; box-sizing: border-box; }
  main:has(> aside.menu .k-spis) .text_container > section:not(:first-of-type) { grid-column: 2; max-width: var(--k-szer-tekst); }
  /* contain: size - aside rozciąga się na rzędy treści, ale nie dokłada wysokości pustym rzędom z span 40 (bez tego +2 px na rząd) */
  main:has(> aside.menu .k-spis) > aside.menu { grid-column: 1; grid-row: span 40; align-self: stretch; padding: 0; contain: size; }
  main:has(> aside.menu .k-spis) > aside.menu .k-spis { margin: 0; }
  /* okruszki, H1 i treść przy krawędzi siatki: odstęp boczny daje main */
  main:has(> aside.menu .k-spis) .breadcrumbs .center { padding-left: 0 !important; padding-right: 0 !important; }
  main:has(> aside.menu .k-spis) .text_container > div:first-child > h1 { padding-left: 0; padding-right: 0; }
  main:has(> aside.menu .k-spis) .k-sec { max-width: none; padding-left: 0; padding-right: 0; }
  /* sekcja z jasnym tłem w kolumnie treści: tło jako panel z wewnętrznym odstępem (wygrywa z padding sekcji z buildera) */
  main:has(> aside.menu .k-spis) .text_container > section.container[style*="#eef4f9" i] { padding-left: 32px !important; padding-right: 32px !important; }
}

/* 4.11 rozdziały i kroki */
.k-rozdzial + .k-rozdzial { margin-top: 2.75rem; padding-top: 2.5rem; border-top: 1px solid var(--k-linia); }
.k-rozdzial > h2:first-child { margin-top: 0; }
.k-rozdzial > :last-child { margin-bottom: 0; }
.k-kroki { counter-reset: krok; margin: 1.25rem 0; border-top: 1px solid var(--k-linia-mocna); }
.k-kroki li { counter-increment: krok; position: relative; padding: 16px 0 16px 56px; border-bottom: 1px solid var(--k-linia-mocna); line-height: 1.55; }
.k-kroki li::before {
  content: counter(krok); position: absolute; left: 0; top: 13px; width: 36px; height: 36px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--k-granat); border-radius: var(--k-promien);
  color: #fff; background: var(--k-granat);
}
.k-kroki strong { color: var(--k-granat); }

/* 4.12 blok ceny (hub, usługa; rama w punkcie 1b) */
.k-cena { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; margin: 1.5rem 0; padding: var(--k-odstep-karty); }
.k-cena-kwota { font-family: var(--font-family-header); font-weight: 700; color: var(--k-granat); font-size: 28px; line-height: 1.15; white-space: nowrap; }
.k-cena-kwota small { display: block; margin: 0 0 6px; }
.k-cena p { margin: 0 0 .5rem; line-height: 1.55; }
.k-cena p:last-child { margin-bottom: 0; font-weight: 600; }

/* 4.13 ramki: jedna baza (W skrócie, wyróżniona odpowiedź, ramka usługi, stan prawny; rama w punkcie 1b) */
.k-ramka { margin: 1.5rem 0; padding: 20px var(--k-odstep-karty) var(--k-odstep-karty); }
.k-ramka > :first-child { margin-top: 0; }
.k-ramka > :last-child { margin-bottom: 0; }
.k-ramka .k-btn, .k-ramka .k-cta-rzad { box-sizing: border-box; max-width: 100%; }
.k-ramka-tytul { margin: 0 0 14px; font-family: var(--font-family-header); font-weight: 600; font-size: var(--k-r-tytul); line-height: 1.35; color: var(--k-granat); }
/* W skrócie: etykieta wersalikami (punkt 1b), cztery kolumny rozdzielone liniami */
.k-skrot dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-skrot dl > div { padding: 0 16px; border-left: 1px solid var(--k-linia); }
.k-skrot dl > div:first-child { padding-left: 0; border-left: 0; }
.k-skrot dt { margin: 0 0 6px; font-family: var(--font-family-header); font-weight: 600; color: var(--k-granat); }
.k-skrot dd { margin: 0; font-size: var(--k-tekst-min); line-height: 1.5; }
/* wyróżniona odpowiedź na początku wpisu: jasne tło */
.k-odpowiedz { background: var(--k-tlo); border-color: var(--k-tlo); }
.k-odpowiedz p { font-size: var(--k-r-duzy); line-height: 1.6; color: var(--k-tekst); }
/* ramka usługi w treści wpisu */
.k-ramka-usluga { border-color: var(--k-niebieski); }
.k-ramka-cena { margin: 0 0 1rem; font-family: var(--font-family-header); font-weight: 600; font-size: var(--k-r-duzy); color: var(--k-granat); }
.k-ramka-usluga p:last-child .k-btn { margin: 0; }
.k-ramka-usluga.k-cta-koniec { margin-top: 2.5rem; border-color: var(--k-granat); }
.k-ramka-usluga.k-cta-koniec .k-zdanie { padding: 1rem 0; margin: 0 0 .5rem; border-top: 1px solid var(--k-linia); border-bottom: 1px solid var(--k-linia); }
/* stan prawny i źródła: zwykła ramka, mniejszy nagłówek */
.k-stan-prawny h2 { font-size: var(--k-r-h4); margin: 0 0 6px; }
.k-stan-data { margin: 0 0 10px; color: var(--k-tekst-2); }
.k-stan-prawny ul { margin: 0; padding-left: 1.2rem; }
.k-stan-prawny li { margin: 0 0 4px; }

/* 4.14 tabele: linie poziome (granatowa nad, punkt 1b), nagłówki kolumn wersalikami; na telefonie wiersz = karta (punkt 7) */
table.k-tabela { border-collapse: collapse; width: 100%; margin: 1.75rem 0; }
table.k-tabela th, table.k-tabela td { text-align: left; vertical-align: top; border: 0; }
table.k-tabela thead th { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--k-granat); background: none; }
table.k-tabela tbody th, table.k-tabela td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--k-linia-mocna); line-height: 1.55; }
table.k-tabela tbody th, table.k-tabela tbody td:first-child { font-family: var(--font-family-header); font-weight: 600; color: var(--k-granat); }
table.k-tabela td[data-etykieta="Cena"] { font-weight: 600; color: var(--k-granat); white-space: nowrap; }
@media (min-width: 761px) { table.k-tabela tbody th { white-space: nowrap; } }
/* mini-cennik głównej: cena do prawej */
table.k-mini-cennik td { text-align: right; white-space: nowrap; padding-right: 0; }
table.k-mini-cennik thead th:last-child { text-align: right; padding-right: 0; }
table.k-mini-cennik tbody th { font-family: var(--font-family-text); font-weight: 600; }
/* cennik: pierwsza kolumna to link (td), cena w strong + small */
table.k-cennik { margin: .75rem 0 .5rem; }
table.k-cennik tbody td:first-child { width: 38%; font-family: var(--font-family-text); }
table.k-cennik td:first-child a { font-weight: 600; text-decoration: none; }
table.k-cennik td.k-cennik-cena { width: 22%; white-space: nowrap; color: var(--k-granat); }
table.k-cennik td.k-cennik-cena strong { font-family: var(--font-family-header); font-weight: 600; font-size: var(--k-r-tekst); }
table.k-cennik td.k-cennik-cena small { color: var(--k-tekst-2); font-weight: 400; }
.k-cennik-wrap h2 { margin-top: 3rem; }
.k-cennik-wrap .k-tresc > h2:first-child { margin-top: 0; }

/* 4.15 FAQ (natywne details, bez JS): lista z liniami (granatowa nad, punkt 1b), plus z dwóch kresek */
.k-faq { margin: 1.25rem 0 0; }
.k-faq details { margin: 0; border: 0; border-bottom: 1px solid var(--k-linia-mocna); border-radius: 0; background: none; }
.k-faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 48px 20px 0; font-family: var(--font-family-header); font-weight: 600; font-size: var(--k-r-duzy); line-height: 1.4; color: var(--k-granat); }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::before, .k-faq summary::after { content: ""; position: absolute; right: 8px; top: 31px; width: 16px; height: 2px; background: var(--k-granat); transition: transform .15s; }
.k-faq summary::after { transform: rotate(90deg); }
.k-faq details[open] summary::after { transform: rotate(0); }
.k-faq summary:hover { color: var(--k-niebieski-ciemny); }
.k-faq details > div { padding: 0 48px 22px 0; line-height: 1.65; color: var(--k-tekst); }
.k-faq details > div p { margin: 0 0 .6rem; }
.k-faq details > div p:last-child { margin: 0; }

/* 4.16 sekcje z kartami, CTA na końcu, pas nad stopką (kolory pasa z kontekstu tła) */
.k-cta-koniec h2, .k-powiazane h2, .k-blog h2 { margin-top: 0; }
.k-sec.k-cta-koniec > p { color: var(--k-tekst-2); font-size: var(--k-r-duzy); }
.k-pas { color: var(--k-c-naglowek); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; row-gap: 20px; }
.k-pas h2 { grid-row: 1 / span 2; color: var(--k-c-naglowek); margin: 0; }
.k-pas p { color: var(--k-c-tekst); max-width: 640px; margin: 0; line-height: 1.6; }
.k-pas .k-cta-rzad { margin: 0; }

/* 4.17 karta wpisu (box_artykul.php motywu, wariant h, markup rdzenia): addon BLOG-BY-ID w sekcjach "Z bloga",
   lista /blog/, "Inne z kategorii" pod wpisem - wszędzie ta sama siatka co .k-karta (rama, hover i obrazek w punkcie 1b).
   W tym pliku nie piszemy tokenów CMS w nawiasach kwadratowych - skórka idzie do <head> każdej strony. */
body .articles_wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; padding: 0; }
.k-blog .articles_wrapper, .articles_pages .articles_wrapper { width: 100%; max-width: none; margin: 1.5rem 0 0; padding: 0; }
/* lista /blog/ (main.full, siatka poza .k-sec): ta sama kolumna co treść (1200 px + 20 px marginesu) i odstęp zwykłej sekcji przed pasem */
main.full > .section_container.full > .articles_wrapper { box-sizing: border-box; width: 100%; max-width: var(--k-szer-pad); margin: 0 auto; padding: 0 20px var(--k-sekcja); }
body .articles_wrapper article.article_container.h { margin: 0; padding: 0; min-width: 0; width: auto; }
body .articles_wrapper article.article_container.h a { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: var(--k-odstep-karty); overflow: hidden; color: var(--k-tekst); text-decoration: none; }
body .articles_wrapper article.article_container.h a:hover .article_title { text-decoration: underline; text-underline-offset: 4px; }
body .articles_wrapper article.article_container.h .article_photo { display: block; width: auto; margin: calc(var(--k-odstep-karty) * -1) calc(var(--k-odstep-karty) * -1) 20px; }
body .articles_wrapper article.article_container.h .article_photo img { margin: 0; }
body .articles_wrapper article.article_container.h .article_description { display: flex; flex-direction: column; gap: 12px; flex: 1; height: auto; padding: 0; text-align: left; }
body .articles_wrapper article.article_container.h .article_title { margin: 0; font-family: var(--font-family-header); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--k-granat); }
body .articles_wrapper article.article_container.h .article_description .articles_text { margin: 0; font-size: var(--k-tekst-min); line-height: 1.55; color: var(--k-tekst-2); }
body .articles_wrapper article.article_container.h .articles_text p { margin: 0; }
body .articles_wrapper article.article_container.h .article_more { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--k-niebieski); text-decoration: none; }

/* 4.18 układ wpisu (markup motywu): data i licznik, kolumna boczna, "Inne z kategorii" */
main.article_container .breadcrumbs .center { padding-left: 0 !important; padding-right: 0 !important; }
main.article_container h1.h1 { font-size: var(--k-r-h1); line-height: 1.1; margin: 1.75rem 0 1rem; }
body main.article_container .article_info.caption, main .article_info { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 1.75rem; padding: 10px 0; background: none; border-top: 1px solid var(--k-linia-mocna); border-bottom: 1px solid var(--k-linia-mocna); color: var(--k-tekst-2); }
main .article_info > div { padding: 0 16px; border-left: 1px solid var(--k-linia); line-height: 1.5; }
main .article_info > div:first-child { padding-left: 0; border-left: 0; }
main .article_info .date_update { color: var(--k-granat); font-weight: 600; }
main aside.menu .aside_box { margin: 0 0 2rem; padding-top: 12px; }
main aside.menu .aside_box .head { margin: 0 0 10px; }
main aside.menu .aside_box .box ul { margin: 0; }
main aside.menu .aside_box .box li { margin: 0; padding: 0; }
main aside.menu .aside_box .box li::before { content: none !important; }
main aside.menu .aside_box .box li a { display: block; padding: 9px 0; line-height: 1.45; color: var(--k-niebieski); }
main aside.menu .aside_box .box li.active a { color: var(--k-granat); font-weight: 600; }
main aside.menu .aside_box input.search_aside { min-height: var(--k-przycisk-motyw); padding: 10px 12px; font: inherit; font-size: var(--k-tekst-min); border: 1px solid var(--k-linia-mocna); border-radius: var(--k-promien); background: #fff; color: var(--k-tekst); }
main aside.menu .aside_box input.search_aside::placeholder { color: var(--k-tekst-2); opacity: 1; }
main .articles_pages { margin-top: 3rem; padding-top: 2rem; }
main .articles_pages > .h3 { margin: 0; font-size: var(--k-r-h2); }
main .more_articles, body main .articles_pages .more_articles { margin: 1.5rem 0 0; text-align: left; }
/* "Więcej w Blog": przycisk motywu w kształcie .k-btn (punkt 1b) */
body main .more_articles a { display: inline-flex; align-items: center; box-sizing: border-box; text-decoration: none; }

/* 4.19 stara lista "Zobacz też" (k-linki, pozostałe huby i usługi do etapu 3): ta sama siatka co karty */
.k-linki { margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.k-linki li { margin: 0; overflow: hidden; }
.k-linki a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; box-sizing: border-box; padding: 16px 20px; font-weight: 600; }
.k-linki a:hover { background: var(--k-tlo-2); color: var(--k-niebieski-ciemny); }

/* === 5. STRONY SPOZA 5 SZABLONÓW (te same tokeny) ============================================================ */
/* zaślepka strony bez treści (buduj.php, klasa k365-zaslepka) */
.k-zaslepka { background: var(--k-tlo); border-radius: var(--k-promien-karta); padding: 1.4rem 1.6rem; margin: 1rem 0 2rem; }
.k-zaslepka p { margin: 0 0 .6rem; }

/* dokumenty prawne: wąska kolumna; numery w <h2>, listy bez atrybutu start (motyw liczy CSS-em) */
.k-dokument { max-width: var(--k-szer-tekst); }
.k-dokument h2 { font-size: var(--k-r-h4); margin: 2.25rem 0 .8rem; padding-top: 1.25rem; border-top: 1px solid var(--k-linia); }
.k-dokument h3 { font-size: var(--k-r-duzy); margin: 1.4rem 0 .5rem; }
.k-dokument ol li, .k-dokument ul li { margin-bottom: .5rem; line-height: 1.6; }
.k-dokument table { border-collapse: collapse; width: 100%; margin: .8rem 0 1.2rem; }
.k-dokument th, .k-dokument td { border: 0; border-bottom: 1px solid var(--k-linia-mocna); padding: .7rem .8rem .7rem 0; text-align: left; vertical-align: top; }
.k-dokument th { background: none; font-weight: 600; color: var(--k-granat); }
.k-dokument-meta { color: var(--k-tekst-2); font-size: var(--k-tekst-min); }

/* pole-pułapka formularza (honeypot) - poza ekranem, nie display:none */
.k-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; }
.k-form-info { font-size: var(--k-tekst-min); color: var(--k-tekst-2); line-height: 1.5; margin: .4rem 0 1rem; }

/* test "czego brakuje Twojej firmie" (/sprawdz/, rysowany przez JS strony) */
.k-test { max-width: var(--k-szer-tekst); }
.k-test-pasek { display: flex; align-items: center; gap: 12px; margin: 0 0 1.2rem; }
.k-test-tor { flex: 1; height: 6px; background: var(--k-linia); border-radius: 0; overflow: hidden; }
.k-test-tor > div { height: 100%; width: 0; background: var(--k-niebieski); transition: width .25s; }
.k-test-pasek span { font-size: var(--k-tekst-min); color: var(--k-tekst-2); white-space: nowrap; }
.k-test-pyt { font-family: var(--font-family-header); font-weight: 600; color: var(--k-granat); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.3; margin: 0 0 .4rem; }
.k-test-pod { color: var(--k-tekst-2); margin: 0 0 1.1rem; line-height: 1.55; }
.k-test-opcje { display: flex; gap: 0; flex-wrap: wrap; padding: 0 1px 1px 0; }
.k-test-opcja {
  flex: 1 1 200px; font: inherit; font-weight: 600; font-size: var(--k-r-duzy); cursor: pointer; padding: 1.1rem 1.25rem; text-align: left; min-height: 56px;
  background: #fff; border: 1px solid var(--k-linia-mocna); margin: 0 -1px -1px 0; border-radius: 0;
  color: var(--k-granat); transition: background-color .15s;
}
.k-test-opcja:hover { background: var(--k-tlo-2); }
.k-test-opcja.wybrana { background: var(--k-tlo); box-shadow: inset 0 -3px 0 var(--k-niebieski); }
.k-test-naw { display: flex; gap: 10px; align-items: center; margin-top: 1.2rem; flex-wrap: wrap; }
.k-test-naw button { font: inherit; cursor: pointer; background: none; border: 0; color: var(--k-tekst-2); text-decoration: underline; padding: .4rem 0; }
.k-test-naw button:hover { color: var(--k-niebieski-ciemny); }
.k-test-wynik-naglowek { background: #fff; border: 1px solid var(--k-linia-mocna); border-top: 3px solid var(--k-granat); border-radius: 0; padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; }
.k-test-wynik-naglowek h2 { margin: 0 0 .5rem; }
.k-test-wynik-naglowek p { margin: 0; }
.k-test-karty { display: grid; gap: 0; border-top: 1px solid var(--k-linia-mocna); }
/* kolory statusu testu (czerwony, bursztyn, zielony) zostają z poprzedniej skórki: to znaczenie, nie akcent marki;
   bez klasy statusu karta jest "pilne" */
.k-test-karta { border: 0; border-bottom: 1px solid var(--k-linia-mocna); border-top: 0; border-radius: 0; padding: 1rem 0 1rem 1rem; background: #fff; box-shadow: inset 4px 0 0 #c0392b; }
.k-test-karta.warto { box-shadow: inset 4px 0 0 #a35f00; }
.k-test-karta h3 { margin: 0 0 .35rem; font-size: 19px; }
.k-test-karta p { margin: 0 0 .5rem; line-height: 1.55; }
.k-test-karta p:last-child { margin: 0; }
.k-test-karta .k-test-ety { display: inline-block; font-size: var(--k-tekst-min); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--k-promien); color: #fff; background: #c0392b; margin-left: .5rem; vertical-align: middle; }
.k-test-karta.warto .k-test-ety { background: #a35f00; }   /* #d68910 dawał 2,82:1 z białym - pomiar 20.10 */
.k-test-masz { margin: 1.4rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--k-linia); }
.k-test-masz li { background: none; padding: .6rem 0; color: var(--k-tekst-2); font-size: var(--k-tekst-min); }
.k-test-masz li::before { content: "\2713\00a0"; color: #2e7d54; font-weight: 700; }
.k-test-drobne { font-size: var(--k-tekst-min); color: var(--k-tekst-2); margin-top: 1rem; line-height: 1.5; }

/* === 6. DOSTĘPNOŚĆ =========================================================================================== */
/* 6.1 minimum 16 px: elementy motywu mniejsze niż tekst treści (przegląd 23.10, uzupełnione 26.10; okruszki w punkcie 2,
   etykiety w punkcie 1b; pytanie captcha formularzy, które motyw do 1000 px zmniejsza do 14 px) */
div.line_desc div.desc, .breadcrumbs .center a, main .article_info, main .article_info *, main div.box li a,
.k-form-info, table.k-cennik, table.k-cennik td.k-cennik-cena small,
.k-formularz *:not(input):not(textarea), body .articles_wrapper .articles_text, body .articles_wrapper .articles_text p,
body .articles_wrapper .article_more, .footer_credits .center > div { font-size: var(--k-tekst-min); }
/* 6.2 kontrast 4,5:1: linki i jasne przyciski na tle #eef4f9 (sekcje buildera z tym tłem, wyróżniona odpowiedź, zaślepka,
   panel formularza na głównej), okruszki motywu (3,54:1), zajawki listy bloga z motywu (#888, 3,54:1) */
section[style*="#eef4f9" i] a:not(.k-btn), .k-odpowiedz a, .k-zaslepka a, .k-cta-koniec > .k-formularz a, .breadcrumbs a,
.k-cena a, .k-zdanie a, .k-kroki a, .k-test-masz a, .k-dokument th a { color: var(--k-link-na-tle); }
section[style*="#eef4f9" i] .k-btn-jasny { color: var(--k-link-na-tle) !important; border-color: var(--k-link-na-tle); }
section[style*="#eef4f9" i] .k-btn-jasny:hover { background: var(--k-link-na-tle); color: #fff !important; }
.articles_wrapper .articles_text, .articles_wrapper .article_description .body2 { color: var(--k-tekst-2) !important; }
/* 6.3 na granacie: nagłówki, tekst i linki z kontekstu tła (punkt 0); hero i pas przypięte do komponentu */
section[style*="#1d2a44" i] :is(h2, h3) { color: var(--k-c-naglowek); }
section[style*="#1d2a44" i] :is(p, li) { color: var(--k-c-tekst); }
section[style*="#1d2a44" i] a:not(.k-btn), .k-hero a:not(.k-btn), .k-pas a:not(.k-btn) { color: var(--k-c-link); }
.k-hero .k-zaufanie li { color: var(--k-c-tekst); }

/* === 7. PROGI SZEROKOŚCI: 1000 px (spis nad treścią, bez przyklejania), 760 px (tabele w karty),
   640 px (kafle w jednej kolumnie) ============================================================================== */
@media (max-width: 1000px) {
  .k-kafle.k-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .k-hero-in:has(> .k-obraz:not(:empty)) { grid-template-columns: minmax(0, 1fr); }
  .k-hero-in > .k-obraz { display: none; }
  .k-zaufanie { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .k-skrot dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .k-skrot dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .k-pas { grid-template-columns: minmax(0, 1fr); }
  .k-pas h2 { grid-row: auto; }
  .k-spis-przyklejony { position: static; max-height: none; overflow: visible; }
  /* motyw daje tu body{overflow-x:hidden} (_style.css:959): body staje się kontenerem przewijania i sticky nie działa.
     clip przycina tak samo, ale nie tworzy kontenera; przeglądarka bez clip zostaje przy hidden motywu */
  html body { overflow-x: clip; }
  main aside.menu { margin-top: 2rem; }
}
@media (max-width: 760px) {
  table.k-tabela thead { display: none; }
  table.k-tabela, table.k-tabela tbody, table.k-tabela tr, table.k-tabela th, table.k-tabela td { display: block; width: auto !important; }
  table.k-tabela tr { padding: 14px 0; border-bottom: 1px solid var(--k-linia-mocna); }
  table.k-tabela tbody th, table.k-tabela td { padding: 5px 0; border: 0; white-space: normal !important; text-align: left !important; }
  table.k-tabela tbody th, table.k-tabela tbody td:first-child { font-size: 19px; margin: 0 0 4px; }
  /* etykieta komórki: ten sam wzór co etykiety wersalikami z punktu 1b (tylko tu ma treść) */
  table.k-tabela td[data-etykieta]::before { content: attr(data-etykieta); display: block; margin: 0 0 2px; font-family: var(--font-family-text); font-size: var(--k-r-etykieta); font-weight: 600; letter-spacing: var(--k-etykieta-odstep); text-transform: uppercase; color: var(--k-tekst-2); }
  table.k-tabela tr > td:first-child[data-etykieta]::before { display: none; }
  table.k-mini-cennik tr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
  table.k-mini-cennik td[data-etykieta]::before { display: none; }
  table.k-mini-cennik tbody th { font-size: var(--k-r-tekst); }
  .k-os::before { left: 8px; margin-left: 0; }
  .k-os li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-left: 36px; margin-bottom: 20px; }
  .k-os li::before { left: 0; margin-left: 0; top: 3px; }
  .k-os-data, .k-os li:nth-child(even) .k-os-data { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; padding-top: 0; font-size: var(--k-r-duzy); }
  .k-os p, .k-os li:nth-child(even) p { grid-column: 1; grid-row: 2; }
  .k-os p::before { display: none; }
  .k-cena { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .k-formularz .columns.c2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  main .article_info > div { padding: 0 12px 0 0; border-left: 0; }
  /* tabele dokumentów prawnych (3-4 kolumny) przewijane w poziomie wewnątrz treści */
  .k-dokument table { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .k-kafle.k-karty { grid-template-columns: minmax(0, 1fr); }
  .k-hero-in { padding: 3rem 20px 2.75rem; }
  .k-skrot dl { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .k-skrot dl > div, .k-skrot dl > div:nth-child(3) { padding: 12px 0; border-left: 0; border-top: 1px solid var(--k-linia); }
  .k-skrot dl > div:first-child { padding-top: 0; border-top: 0; }
  .k-skrot dl > div:last-child { padding-bottom: 0; }
  .k-cta-rzad .k-btn, .k-ramka .k-btn { width: 100%; }
  .k-faq summary { font-size: var(--k-r-tekst); }
}