/* ==========================================================================
   daplo.agency — system wizualny v2 (OPIS-DESIGNU-v2.md §3–§8)
   Mobile first: baza = telefon (< 768 px), potem 768 px i 1 024 px.
   W komponentach wyłącznie tokeny. Wariant koloru: html[data-wariant="b"].
   ========================================================================== */

/* ---------- 1. Tokeny ---------- */
:root {
  color-scheme: only light;

  /* tła */
  --tlo: #FFFFFF;
  --tlo-2: #F4F5F7;
  --papier: #FFFDF8;
  --panel: #F4F5F7;

  /* tekst i ciemne powierzchnie */
  --czern: #0B0D10;
  --grafit: #1B1F24;
  --stal: #454B54;
  --mgla: #B8BEC6;

  /* linie */
  --linia: #E2E5E9;
  --szkielet: #C3CAD3;
  --obrys-ui: #767D87;
  --obrys-ciemne: #343A42;

  /* znacznik pola i sygnał */
  --pole: #FDE68A;
  --pole-krawedz: #B45309;
  --pole-tint: #FEF3C7;
  --sygnal: #F59E0B;

  /* stany */
  --ok: #1D7A4E; --ok-tlo: #E8F5EE;
  --err: #B42318; --err-tlo: #FDECEA;
  --wyl-tlo: #ECEEF1; --wyl-tekst: #5F6670;

  /* role wariantu A */
  --akcja: #0B0D10;
  --akcja-hov: #2A2F36;
  --akcja-akt: #1B1F24;
  --link: #0B0D10;
  --fokus: #0B0D10;
  --fokus-ciemne: #F59E0B;
  --przeplyw: #0B0D10;
  --akcent-grafika: #F59E0B;
  --akcent-ciemne: #F59E0B;

  /* cień, promienie, ruch */
  --cien: 0 12px 32px rgba(11, 13, 16, .14);
  --r-s: 8px;
  --r-m: 16px;
  --ruch-szybki: 150ms;
  --ruch-stan: 250ms;
  --ruch-wejscie: 350ms;
  --ruch-rys: 700ms;
  --krzywa: cubic-bezier(.25, .46, .45, .94);

  /* siatka (telefon) */
  --m: 8px;
  --p: 12px;
  --sekcja: 64px;
  --sekcja-duza: 88px;
  --kafel-py: 40px;
  --ns-odstep: 32px;
  --karty-odstep: 16px;
  --hdr: 56px;

  /* typografia (clamp liniowo 768 → 1 024, §3.2) */
  --t-h1: clamp(2.25rem, 7.8125vw - 1.5rem, 3.5rem);
  --t-h1-sub: clamp(2rem, 6.25vw - 1rem, 3rem);
  --t-h1-wpis: clamp(2rem, 4.6875vw - .25rem, 2.75rem);
  --t-h2: clamp(1.75rem, 4.6875vw - .5rem, 2.5rem);
  --t-h3: clamp(1.25rem, .78125vw + .875rem, 1.375rem);
  --t-lead: clamp(1.125rem, .78125vw + .75rem, 1.25rem);
  --t-liczba: clamp(2.75rem, 7.8125vw - 1rem, 4rem);

  /* warstwy */
  --z-sticky: 20; --z-mega: 30; --z-arkusz: 40; --z-cookies: 50; --z-modal: 100;

  /* szerokość treści: 1 200 px do 1 440 px okna, szerzej na dużych ekranach (Wiktor, 26.09) */
  --max-tresc: 1680px;

  --font: "IBM Plex Sans", "Plex Rezerwa", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-wariant="b"] {
  --panel: #E6F4F4;
  --akcja: #095459;
  --akcja-hov: #07464A;
  --akcja-akt: #053A3D;
  --link: #095459;
  --fokus: #095459;
  --fokus-ciemne: #17ABAF;
  --przeplyw: #118E92;
  --akcent-grafika: #17ABAF;
  --akcent-ciemne: #17ABAF;
}

@media (min-width: 768px) {
  :root {
    --m: clamp(20px, 3.33vw, 48px);
    --p: clamp(12px, 5vw, 72px);
    --kafel-py: 64px;
    --sekcja: 96px;
    --sekcja-duza: 128px;
    --ns-odstep: 56px;
    --karty-odstep: 24px;
  }
}
@media (min-width: 1024px) { :root { --hdr: 72px; } }

@font-face {
  font-family: "Plex Rezerwa";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 101%;
  descent-override: 27%;
  line-gap-override: 0%;
}

/* ---------- 2. Baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { html { scroll-padding-top: 88px; } }
@media (min-width: 1024px) { html { scroll-padding-bottom: 0; } }
/* Płynne przewijanie dopiero po załadowaniu, żeby wejście z kotwicą (/oferta#wdrozenie) nie przewijało całej strony (26.09) */
@media (prefers-reduced-motion: no-preference) { html.gladko { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--czern);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}
body.bez-przewijania { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.na-czerni :focus-visible, .kafel--czern :focus-visible, .belka :focus-visible { outline-color: var(--fokus-ciemne); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tnum { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

.skok {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  background: var(--czern); color: #fff; border-radius: 999px; font-weight: 600; font-size: 1rem;
  text-decoration: none; transform: translateY(-160%);
}
.skok:focus-visible { transform: none; outline-color: var(--sygnal); }

/* ikony */
.ik { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ik--32 { width: 32px; height: 32px; }
.ik--16 { width: 16px; height: 16px; }
.il { width: 96px; height: 96px; flex: none; color: var(--czern); --il-fill: #FFFFFF; --il-fill-2: var(--tlo-2); --il-accent: var(--akcent-grafika); --il-ok: var(--ok); }
.il--144 { width: 144px; height: 144px; }
.il--192 { width: 144px; height: 144px; }
@media (min-width: 1024px) { .il--192 { width: 192px; height: 192px; } }
.il--ciemna { color: #fff; --il-fill: var(--grafit); --il-fill-2: var(--czern); }

/* ---------- 3. Typografia ---------- */
.h1 { font-size: var(--t-h1); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.h1--sub { font-size: var(--t-h1-sub); }
.h1--wpis { font-size: var(--t-h1-wpis); }
.h2 { font-size: var(--t-h2); line-height: 1.2; font-weight: 600; text-wrap: balance; }
@media (min-width: 1024px) { .h2 { letter-spacing: -.01em; } }
.h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--stal); text-wrap: pretty; }
.tresc { font-size: 1.125rem; line-height: 1.6; }
.fakt { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; }
.podpis { font-size: .9375rem; line-height: 1.45; font-weight: 500; color: var(--stal); }
.data { font-size: .875rem; line-height: 1.45; color: var(--stal); font-variant-numeric: tabular-nums; }
.stal { color: var(--stal); }
p + p { margin-top: 1em; }

.etykieta {
  display: flex; align-items: center; gap: 10px;
  font-size: .9375rem; line-height: 1.4; font-weight: 600; color: var(--stal);
}
.etykieta::before { content: ""; width: 8px; height: 8px; background: var(--akcja); flex: none; }
.na-czerni .etykieta, .kafel--czern .etykieta { color: var(--mgla); }
.na-czerni .etykieta::before, .kafel--czern .etykieta::before { background: var(--sygnal); }
html[data-wariant="b"] .kafel--czern .etykieta::before { background: #17ABAF; }

/* ---------- 4. Siatka i sekcje (§3.3) ---------- */
.wrap { width: min(var(--max-tresc), 100% - 2 * (var(--m) + var(--p))); margin-inline: auto; }
.kafel .wrap { width: min(var(--max-tresc), 100%); }
.sekcja { padding-top: var(--sekcja); }
.sekcja--duza { padding-top: var(--sekcja-duza); }
.sekcja:last-of-type { padding-bottom: var(--sekcja); }
.kafel {
  margin-inline: var(--m);
  padding: var(--kafel-py) var(--p);
  border-radius: var(--r-m);
  background: var(--panel);
  position: relative;
}
.kafel--panel { background: var(--panel); }
.kafel--szary { background: var(--tlo-2); }
.kafel--czern { background: var(--czern); color: #fff; }
.kafel--czern .lead, .kafel--czern .stal, .kafel--czern .podpis { color: var(--mgla); }

.g12 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; }
  .s-6 { grid-column: span 6; } .s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; }
  .s-12 { grid-column: span 12; }
}

/* widoczność zależna od progu: ukrywamy tylko poza zakresem, własny display elementu zostaje */
@media (max-width: 1023px) { .tylko-desk { display: none !important; } }
@media (min-width: 1024px) { .tylko-tel { display: none !important; } }
@media (max-width: 767px) { .od-768 { display: none !important; } }
@media (min-width: 768px) { .tylko-tel-768 { display: none !important; } }

/* ---------- 5. Nagłówek sekcji NS (§8.2) ---------- */
.ns { display: grid; gap: 0; margin-bottom: var(--ns-odstep); }
.ns .etykieta { margin-bottom: 12px; }
.ns .lead { margin-top: 16px; max-width: 62ch; }
.ns__akcja { margin-top: 20px; }
@media (min-width: 1024px) {
  .ns--dziel { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .ns--dziel .ns__gl { grid-column: 1 / span 7; }
  .ns--dziel .ns__bok { grid-column: 8 / span 5; padding-top: var(--ns-bok-top, 36px); }
  .ns--dziel .ns__bok .lead { margin-top: 0; }
  .ns--dziel .ns__akcja { margin-top: 20px; }
  .ns--srodek { max-width: 760px; margin-inline: auto; text-align: center; }
  .ns--srodek .etykieta { justify-content: center; }
  .ns--srodek .lead { margin-inline: auto; }
}

/* ---------- 6. Przyciski i linki (§3.5, §3.7) ---------- */
.btn {
  --btn-tlo: var(--akcja); --btn-tekst: #fff; --btn-obrys: var(--akcja);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; min-width: 220px; padding: 0 20px 0 24px;
  background: var(--btn-tlo); color: var(--btn-tekst);
  border: 2px solid var(--btn-obrys); border-radius: var(--r-s);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  transition: background-color var(--ruch-szybki) var(--krzywa), border-color var(--ruch-szybki) var(--krzywa), transform var(--ruch-szybki) var(--krzywa);
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}
@media (min-width: 768px) { .btn { width: auto; } }
.btn .ik { transition: transform var(--ruch-szybki) var(--krzywa); }
.btn:active { --btn-tlo: var(--akcja-akt); --btn-obrys: var(--akcja-akt); transform: translateY(1px); }
.btn--2 { --btn-tlo: #fff; --btn-tekst: var(--czern); --btn-obrys: var(--czern); }
.btn--2:active { --btn-tlo: var(--linia); --btn-obrys: var(--czern); }
.btn--jasny { --btn-tlo: #fff; --btn-tekst: var(--czern); --btn-obrys: #fff; }
.btn--jasny:active { --btn-tlo: var(--linia); --btn-obrys: var(--linia); }
.btn--kompakt { min-height: 48px; min-width: 0; padding: 0 16px; }
.btn--pelny { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { --btn-tlo: var(--wyl-tlo); --btn-obrys: var(--wyl-tlo); --btn-tekst: var(--wyl-tekst); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-tlo: var(--akcja-hov); --btn-obrys: var(--akcja-hov); }
  .btn:hover .ik-strz { transform: translateX(4px); }
  .btn--2:hover { --btn-tlo: var(--tlo-2); --btn-obrys: var(--czern); }
  .btn--jasny:hover { --btn-tlo: var(--tlo-2); --btn-obrys: var(--tlo-2); }
  html[data-wariant="b"] .btn--jasny:hover { --btn-tlo: var(--panel); --btn-obrys: var(--panel); }
}
.btn-rzad { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 768px) { .btn-rzad { gap: 16px; } }

.link {
  color: var(--link); font-weight: 600; font-size: 1.0625rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em;
}
.link--strz { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.link--strz .ik { transition: transform var(--ruch-szybki) var(--krzywa); }
.link--maly { font-size: .9375rem; min-height: 44px; }
.tresc a, p a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
.kafel--czern .link, .na-czerni .link { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .link:hover, .tresc a:hover, p a:hover { text-decoration-thickness: 2.5px; }
  .link--strz:hover .ik { transform: translateX(4px); }
}

/* pigułka */
.pig {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 3px 16px; border: 1.5px solid var(--obrys-ui); border-radius: 999px;
  font-size: .9375rem; line-height: 1.2; font-weight: 600; color: var(--czern); background: #fff; white-space: normal;
}
.pig .ik { margin-left: -4px; }
.pig--ok { background: var(--ok-tlo); border-color: var(--ok-tlo); }
.pig--ok .ik { color: var(--ok); }
.pig--zbud { border-color: var(--stal); }
.pig--ciemna { background: var(--grafit); border-color: var(--obrys-ciemne); color: #fff; }
.pig-rzad { display: flex; flex-wrap: wrap; gap: 8px; }

/* segment */
.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  min-height: 48px; padding: 2px; gap: 2px;
  border: 1px solid var(--obrys-ui); border-radius: var(--r-s); background: #fff;
}
.seg button {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 6px; background: transparent;
  font-size: 1rem; font-weight: 500; color: var(--czern);
  transition: background-color var(--ruch-stan) var(--krzywa), color var(--ruch-stan) var(--krzywa);
}
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--czern); color: #fff; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .seg button:not([aria-pressed="true"]):not([aria-checked="true"]):hover { background: var(--tlo-2); } }
.seg--pion { grid-auto-flow: row; width: 100%; }

/* pojemnik ikony */
.poj {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-s); background: var(--panel); color: var(--czern);
}
.poj .ik { width: 32px; height: 32px; }
.poj--20 .ik { width: 20px; height: 20px; }
@media (min-width: 768px) { .poj { width: 56px; height: 56px; } }
html[data-wariant="b"] .poj { color: var(--link); }
.kafel--panel .poj, .kafel--szary .poj { background: #fff; }
.kafel--czern .poj, .na-czerni .poj { background: var(--grafit); color: var(--sygnal); }
html[data-wariant="b"] .kafel--czern .poj { color: #17ABAF; }

/* ---------- 7. Karty (§3.5, §8) ---------- */
.karta {
  position: relative; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m);
  transition: border-color var(--ruch-szybki) var(--krzywa);
}
.karta--plaska { border-color: transparent; }
.karta__link { text-decoration: none; color: inherit; }
.karta__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.karta__link:focus-visible { outline: none; }
.karta:has(.karta__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.karta .strz-ik { transition: transform var(--ruch-szybki) var(--krzywa); }
@media (hover: hover) and (pointer: fine) {
  .karta--klik:hover { border-color: var(--stal); }
  .karta--klik:hover .strz-ik { transform: translateX(4px); }
}
.karta__stopka-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 1.0625rem; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }

/* ramka „Co dostajesz” */
.dostajesz { background: var(--tlo-2); border-radius: var(--r-s); padding: 16px; }
.dostajesz__t { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.dostajesz ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dostajesz li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.45; }
.dostajesz li .ik { color: var(--ok); margin-top: 2px; }

/* ---------- 8. Nagłówek strony (§5.3, §5.4) ---------- */
.hdr {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--hdr); background: #fff;
  transition: transform var(--ruch-stan) var(--krzywa), box-shadow var(--ruch-szybki);
}
.hdr.hdr--linia { box-shadow: inset 0 -1px 0 var(--linia); }
.hdr.hdr--ukryty { transform: translateY(-100%); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 8px; }
.hdr__logo { display: inline-flex; align-items: center; height: 44px; margin-right: auto; flex: none; }
.hdr__logo img { height: 26px; width: auto; }
.hdr__nav { display: none; }
.hdr__tel { display: none; }
.hdr__cta { display: none; }
.hdr__menu {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-s);
  margin-right: -10px;
}
.hdr__menu .ik { width: 24px; height: 24px; }
.hdr__zadzwon { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-weight: 600; font-size: 1rem; text-decoration: none; }
@media (min-width: 1024px) {
  .hdr__logo { margin-right: 48px; }
  .hdr__logo img { height: 28px; }
  .hdr__nav { display: flex; align-items: center; gap: 8px; margin-right: auto; }
  .hdr__menu, .hdr__zadzwon { display: none; }
  .hdr__cta { display: inline-flex; min-width: 0; width: auto; flex: none; }
  .hdr__tel:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 16px; font-size: .9375rem; font-weight: 600; text-decoration: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hdr__tel .hdr__tel-nr { display: none; }
  .hdr__logo { margin-right: 24px; }
  .hdr__nav { gap: 0; }
  .nav-poz { padding: 0 10px; font-size: 1rem; }
  .hdr__cta { padding: 0 16px 0 18px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hdr__logo { margin-right: 16px; }
  .nav-poz { padding: 0 8px; }
  .nav-poz[aria-current]::after, .nav-poz.jest-biezaca::after { left: 8px; right: 8px; }
  .hdr__cta { padding: 0 16px; }
  .hdr__cta .ik-strz { display: none; }
}
.nav-poz, .hdr__cta { white-space: nowrap; }
.nav-poz {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px;
  border: 0; background: transparent; border-radius: var(--r-s);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.2; color: var(--czern); text-decoration: none; position: relative;
  transition: background-color var(--ruch-szybki);
}
.nav-poz .ik { transition: transform var(--ruch-stan) var(--krzywa); }
.nav-poz[aria-expanded="true"] { background: var(--tlo-2); }
.nav-poz[aria-expanded="true"] .ik { transform: rotate(180deg); }
.nav-poz[aria-current], .nav-poz.jest-biezaca { font-weight: 600; }
.nav-poz[aria-current]::after, .nav-poz.jest-biezaca::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--czern); }
@media (hover: hover) and (pointer: fine) { .nav-poz:hover { background: var(--tlo-2); } }

/* panel „Dla kogo” */
.hdr__mega { position: relative; }
.mega-tlo { position: fixed; inset: var(--hdr) 0 0 0; background: rgba(11, 13, 16, .2); z-index: calc(var(--z-sticky) - 1); opacity: 0; pointer-events: none; transition: opacity 200ms var(--krzywa); }
.mega-tlo.jest { opacity: 1; pointer-events: auto; }
.mega {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-mega);
  width: 720px; background: #fff; border-radius: var(--r-m); box-shadow: var(--cien); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 200ms var(--krzywa), transform 200ms var(--krzywa), visibility 0s linear 200ms;
}
.mega.jest { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--krzywa), transform 200ms var(--krzywa); }
.mega__kol { display: grid; grid-template-columns: 336px 336px; gap: 16px; padding: 16px; }
.mega__wej {
  display: grid; grid-template-columns: 20px 1fr; gap: 4px 12px; align-items: start;
  min-height: 64px; padding: 12px; border-radius: var(--r-s); text-decoration: none; color: var(--czern);
}
.mega__wej .ik { margin-top: 2px; }
.mega__wej-t { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.mega__wej-o { grid-column: 2; font-size: .9375rem; line-height: 1.4; color: var(--stal); }
@media (hover: hover) and (pointer: fine) { .mega__wej:hover { background: var(--tlo-2); } }
.mega__case { background: var(--panel); border-radius: var(--r-s); padding: 16px; display: grid; gap: 10px; align-content: start; position: relative; }
.mega__case-t { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.mega__pasek { display: flex; align-items: stretch; min-height: 56px; background: var(--tlo-2); }
.mega__pasek > * { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--czern); border: 0; background: transparent; }
.mega__pasek > * + * { box-shadow: inset 1px 0 0 var(--szkielet); }
@media (hover: hover) and (pointer: fine) { .mega__pasek > *:hover { text-decoration: underline; text-underline-offset: .25em; } }

/* arkusz menu (telefon) */
.arkusz {
  position: fixed; inset: var(--hdr) 0 0 0; z-index: var(--z-arkusz);
  height: calc(100dvh - var(--hdr)); background: #fff; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 200ms var(--krzywa), visibility 0s linear 200ms;
}
.arkusz.jest { opacity: 1; visibility: visible; transition: opacity 200ms var(--krzywa); }
.arkusz__srodek { flex: 1; overflow-y: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.arkusz__wiersz {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; width: 100%;
  border: 0; border-bottom: 1px solid var(--linia); background: transparent; padding: 0;
  font-size: 1.25rem; font-weight: 600; text-decoration: none; color: var(--czern); position: relative; text-align: left;
}
.arkusz__wiersz[aria-current]::before { content: ""; position: absolute; left: -20px; top: 12px; bottom: 12px; width: 3px; background: var(--akcja); }
.arkusz__wiersz .ik { transition: transform var(--ruch-stan) var(--krzywa); }
.arkusz__wiersz[aria-expanded="true"] .ik-chev { transform: rotate(180deg); }
.arkusz__wej { display: flex; gap: 12px; align-items: center; padding: 8px 0; min-height: 64px; text-decoration: none; color: var(--czern); }
.arkusz__wej b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.arkusz__wej span { font-size: .9375rem; line-height: 1.4; color: var(--stal); }
.arkusz__drobne { display: grid; margin-top: 16px; }
.arkusz__drobne a { display: flex; align-items: center; min-height: 44px; font-size: .9375rem; font-weight: 500; color: var(--czern); }
.arkusz__dol { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--linia); display: grid; gap: 4px; }
.arkusz__dol .mail { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: .9375rem; color: var(--stal); }

/* pasek dolny (telefon) */
.pasek-dolny {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); background: #fff; box-shadow: var(--cien);
  display: flex; gap: 8px; transform: translateY(110%); transition: transform 150ms var(--krzywa);
}
.pasek-dolny.jest { transform: none; transition-duration: var(--ruch-stan); }
.pasek-dolny .btn { min-width: 0; min-height: 48px; padding: 0 16px; }
.pasek-dolny .btn--main { flex: 1; }
.pasek-dolny .btn--2 { flex: none; width: auto; }
@media (max-width: 379px) { .pasek-dolny .btn--2 .tekst { display: none; } .pasek-dolny .btn--2 { width: 48px; padding: 0; } }
@media (min-width: 1024px) { .pasek-dolny { display: none; } }

/* ---------- 9. Stopka (§5.6) ---------- */
.stopka { background: var(--tlo-2); margin-top: var(--sekcja); padding: 64px 0 32px; }
.stopka__w { padding-block: 24px; border-top: 1px dashed var(--szkielet); }
.stopka__w:first-child { border-top: 0; padding-top: 0; }
.stopka__kontakt { display: grid; gap: 16px; }
.stopka__kontakt img { height: 28px; width: auto; }
.stopka__kanaly { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.stopka__tel { font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.stopka__mail { font-size: 1rem; color: var(--czern); min-height: 44px; display: inline-flex; align-items: center; }
.stopka__wdr { display: grid; gap: 12px; }
/* link wdrożenia: podkreślony jest tylko tekst (span), pigułka statusu zostaje bez podkreślenia */
.stopka__wdr a { display: inline-flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 1rem; font-weight: 600; color: var(--czern); min-height: 44px; text-decoration: none; }
.stopka__wdr-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) { .stopka__wdr a:hover .stopka__wdr-t { text-decoration-thickness: 2.5px; } }
.stopka__kol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.stopka__kol h2 { font-size: .9375rem; font-weight: 600; color: var(--stal); margin-bottom: 4px; }
.stopka__kol ul { list-style: none; padding: 0; margin: 0; }
.stopka__kol a { display: flex; align-items: center; min-height: 44px; padding-block: 10px; font-size: 1rem; line-height: 1.35; color: var(--czern); text-decoration: none; }
.stopka__kol a:hover { text-decoration: underline; text-underline-offset: .25em; }
.stopka__dane { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; font-size: .9375rem; color: var(--stal); }
.stopka__dane a { color: var(--czern); }
.stopka__li { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--czern); }
.stopka__prawne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: .875rem; color: var(--stal); }
.foot-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot-nav a, .foot-nav button { font-size: .875rem; color: var(--stal); min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 768px) {
  .stopka__kontakt { grid-template-columns: auto 1fr; align-items: center; }
  .stopka__kanaly { justify-content: flex-end; }
  .stopka__wdr { grid-auto-flow: column; justify-content: start; gap: 32px; }
  .stopka__kol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .stopka__w { padding-block: 32px; }
}
/* pięć kolumn dopiero, gdy najdłuższa etykieta („Firmy delegujące pracowników”) mieści się w jednej linii */
@media (min-width: 1200px) { .stopka__kol { grid-template-columns: minmax(max-content, 1.3fr) repeat(4, minmax(0, 1fr)); } }

/* ---------- 10. Makiety MK (§4.1) ---------- */
.plotno { position: relative; aspect-ratio: 7 / 5; width: 100%; overflow-x: clip; }
.plotno--luz { overflow: visible; }
.mk {
  position: relative; background: #fff; border: 2px solid var(--szkielet); border-radius: var(--r-m);
  overflow: hidden; contain: layout paint; font-size: 14px; line-height: 1.35; color: var(--czern);
  display: flex; flex-direction: column; height: 100%;
}
.mk__bar { flex: none; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--linia); }
.mk__kropki { display: flex; gap: 6px; }
.mk__kropki i { width: 8px; height: 8px; border-radius: 50%; background: var(--szkielet); }
/* safe center: gdy adres się nie mieści, obcina się tylko z prawej (kłódka i początek adresu zostają) */
.mk__adres { flex: 1; min-width: 0; max-width: 300px; margin-inline: auto; padding: 0 8px; height: 24px; display: flex; align-items: center; justify-content: center; justify-content: safe center; gap: 6px; background: var(--tlo-2); border-radius: var(--r-s); font-size: 13px; color: var(--stal); white-space: nowrap; overflow: hidden; }
.mk__adres .ik { width: 12px; height: 12px; }
.mk__app { flex: 1; display: grid; grid-template-columns: 52px 1fr; min-height: 0; }
.mk__app--bez-boku { grid-template-columns: 1fr; }
.mk__bok { border-right: 1px solid var(--linia); background: var(--tlo-2); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; }
.mk__mono { width: 28px; height: 28px; border-radius: 7px; background: var(--czern); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.mk__bok i { width: 20px; height: 20px; border-radius: 5px; background: var(--szkielet); opacity: .7; }
.mk__bok i.jest { background: var(--czern); opacity: 1; }
.mk__ekran { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.mk__gora { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk__modul { font-size: 15px; font-weight: 600; }
.mk__okr { font-size: 13px; color: var(--stal); }
.mk__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--czern); color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mk__btn .ik { width: 14px; height: 14px; }
.mk__btn--2 { background: #fff; color: var(--czern); box-shadow: inset 0 0 0 1px var(--linia); }
.mk__osoba { display: flex; align-items: center; gap: 12px; }
.mk__av { width: 44px; height: 44px; border-radius: 50%; background: var(--tlo-2); border: 1px solid var(--linia); display: grid; place-items: center; font-weight: 600; font-size: 15px; flex: none; }
.mk__av--m { width: 30px; height: 30px; font-size: 13px; }
.mk__nazw { font-size: 18px; font-weight: 600; line-height: 1.2; }
.mk__pola { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.mk__pole { display: grid; gap: 3px; min-width: 0; }
.mk__pole > span:first-child { font-size: 13px; color: var(--stal); }
.mk__pole > b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.mk__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--linia); border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; }
.mk__status { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ok-tlo); font-size: 13px; font-weight: 600; width: max-content; }
.mk__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.mk__status--szary { background: var(--tlo-2); }
.mk__status--szary::before { background: var(--stal); }
.mk__szk { height: 8px; border-radius: 4px; background: var(--szkielet); opacity: .55; }
.mk__szk--k { width: 40%; } .mk__szk--s { width: 62%; } .mk__szk--d { width: 86%; }
.mk__karta { border: 1px solid var(--linia); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; }
.mk__tab { display: grid; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; }
.mk__tr { display: grid; align-items: center; gap: 10px; padding: 0 12px; min-height: 38px; border-top: 1px solid var(--linia); font-size: 13px; }
.mk__tr:first-child { border-top: 0; }
.mk__tr--g { background: var(--tlo-2); font-weight: 600; color: var(--stal); min-height: 32px; }
.mk__tr b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__szukaj { height: 32px; border: 1px solid var(--linia); border-radius: 6px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--stal); font-size: 13px; flex: 1; }
.mk__szukaj .ik { width: 14px; height: 14px; }
.mk__lista-sp { display: grid; gap: 6px; }
.mk__sp { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border: 1px solid var(--linia); border-radius: 8px; font-size: 14px; font-weight: 500; }
.mk__sp i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--szkielet); flex: none; }
.mk__sp.jest { border-color: var(--czern); box-shadow: inset 0 0 0 1px var(--czern); font-weight: 600; }
.mk__sp.jest i { border-color: var(--czern); background: radial-gradient(circle, var(--czern) 0 3px, #fff 3.5px); }
.mk__zakl { display: flex; gap: 4px; border-bottom: 1px solid var(--linia); }
.mk__zakl span { padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--stal); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mk__zakl span.jest { color: var(--czern); border-color: var(--czern); }
.mk__skany { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk__skan { aspect-ratio: 1 / 1.414; border: 1px solid var(--linia); border-radius: 3px; background: var(--papier); padding: 6px 5px; display: grid; align-content: start; gap: 4px; }
.mk__skan i { height: 3px; border-radius: 2px; background: var(--szkielet); }
.mk__skan i:nth-child(2) { width: 70%; } .mk__skan i:nth-child(4) { width: 55%; }
.mk__dok { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 13px; }
.mk__dok .ik { width: 16px; height: 16px; color: var(--stal); }
.mk__dok b { font-weight: 500; font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk__dok .ok { color: var(--ok); }
.mk-podpis { margin-top: 12px; font-size: .9375rem; color: var(--stal); font-weight: 500; }

/* widok telefonu 9:16 */
.mk--tel { position: absolute; right: 0; bottom: 0; width: 25%; min-width: 120px; aspect-ratio: 9 / 16; height: auto; border-radius: 14px; box-shadow: var(--cien); }
.mk--tel .mk__bar { height: 22px; justify-content: center; }
.mk--tel .mk__bar::before { content: ""; width: 34%; height: 6px; border-radius: 3px; background: var(--szkielet); }

/* karty pływające i chip */
.plyw {
  position: absolute; z-index: 3; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-s);
  box-shadow: var(--cien); padding: 10px 12px; font-size: 14px; line-height: 1.35;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 60%;
  padding: 8px 12px; background: #fff; border-radius: var(--r-s); box-shadow: var(--cien);
  font-size: .9375rem; font-weight: 500; line-height: 1.3;
}
.chip .ik { color: var(--ok); }
.chip--abs { position: absolute; z-index: 3; }
.kropka-ok { width: 20px; height: 20px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; }
.kropka-ok .ik { width: 12px; height: 12px; color: #fff; }

/* znacznik pola (§2) */
.zn {
  --zn-t: 0; background: linear-gradient(var(--pole), var(--pole)) no-repeat 0 0 / calc(var(--zn-t) * 100%) 100%;
  border-bottom: 2px solid color-mix(in srgb, var(--pole-krawedz) calc(var(--zn-t) * 100%), transparent);
  border-radius: 2px; padding: 2px 4px; margin: 0 -4px; transition: --zn-t 0s;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.zn.on, html:not(.js) .zn, .bez-ruchu .zn { --zn-t: 1; }
@property --zn-t { syntax: "<number>"; inherits: false; initial-value: 0; }
.zn { transition: --zn-t 240ms var(--krzywa); }
.zn-plamka { display: block; height: 4px; border-radius: 1px; background: var(--pole); box-shadow: inset 0 -1px 0 var(--pole-krawedz); }

/* kartka A4 (§4.1a) */
.kartka {
  position: absolute; aspect-ratio: 1 / 1.414; background: var(--papier); border: 1px solid var(--linia);
  border-radius: 2px; box-shadow: var(--cien); padding: 14px 12px; display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; line-height: 1.3; color: var(--czern); overflow: hidden;
}
.kartka__sp { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kartka__sp i { height: 5px; border-radius: 2px; background: var(--szkielet); }
.kartka__sp i:first-child { width: 46%; background: var(--stal); opacity: .55; }
.kartka__sp i:last-child { width: 22%; }
.kartka__t { font-size: 14px; font-weight: 700; margin: 4px 0 1px; line-height: 1.2; }
.kartka__szk { height: 4px; border-radius: 2px; background: var(--szkielet); opacity: .75; flex: none; }
.kartka__szk--k { width: 58%; } .kartka__szk--s { width: 80%; }
.kartka__tab { border: 1px solid var(--linia); border-radius: 2px; display: grid; background: #fff; }
.kartka__tab > div { display: grid; gap: 1px; padding: 5px 7px; border-top: 1px solid var(--linia); }
.kartka__tab > div:first-child { border-top: 0; }
.kartka__tab span { color: var(--stal); font-size: 13px; line-height: 1.2; }
.kartka__tab b { font-weight: 600; font-size: 13px; line-height: 1.25; white-space: nowrap; }
.kartka__podp { margin-top: auto; display: flex; justify-content: space-between; gap: 14%; }
.kartka__podp i { flex: 1; border-top: 1px solid var(--stal); height: 8px; }
.kartka .zn { padding: 0 2px; margin: 0 -2px; }

/* ---------- 11. Nici i schematy (§2, §4.0, §4.2) ---------- */
.nici { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.nici path { fill: none; stroke: var(--przeplyw); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nici path.kresk { stroke: var(--stal); stroke-dasharray: 6 6; }
.nici path.przer { stroke: var(--szkielet); stroke-width: 1; stroke-dasharray: 4 4; }
.nici circle { fill: #fff; stroke: var(--przeplyw); stroke-width: 2; }
.nici circle.kresk { stroke: var(--stal); }
.nici circle.err { stroke: var(--err); }
.nici .grot { fill: none; stroke: var(--przeplyw); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sch { position: relative; }
.sch figcaption { margin-top: 20px; font-size: .9375rem; color: var(--stal); font-weight: 500; max-width: 72ch; }
.wezel {
  position: relative; z-index: 2; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-s);
  padding: 12px 16px; display: grid; gap: 4px; align-content: start;
}
.wezel__g { display: flex; align-items: center; gap: 10px; }
.wezel__t { font-size: .875rem; font-weight: 600; line-height: 1.3; }
.wezel__p { font-size: .875rem; line-height: 1.4; color: var(--stal); }
.wezel--kresk { border: 1.5px dashed var(--stal); background: transparent; }
.wezel--err { border-color: var(--err); }
.etap { width: 24px; height: 24px; border-radius: 50%; background: var(--czern); color: #fff; display: grid; place-items: center; font-size: .875rem; font-weight: 600; flex: none; position: relative; z-index: 2; font-variant-numeric: tabular-nums; }
.etap--jasny { background: #fff; color: var(--czern); border: 2px solid var(--czern); }
.kafel--czern .etap { background: var(--czern); color: #fff; box-shadow: 0 0 0 2px #fff; }

/* ---------- 12. Ruch wejścia (§3.6) ---------- */
html.js .wej { opacity: 0; transform: translateY(12px); }
html.js .wej.jest { opacity: 1; transform: none; transition: opacity var(--ruch-wejscie) var(--krzywa), transform var(--ruch-wejscie) var(--krzywa); transition-delay: var(--d, 0ms); }
html.js .wej-fade { opacity: 0; }
html.js .wej-fade.jest { opacity: 1; transition: opacity 200ms var(--krzywa); transition-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
  html.js .wej, html.js .wej-fade { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
  .zn { border-bottom-color: CanvasText; }
  .nici path, .nici circle { stroke: CanvasText; }
}

/* ---------- 13. Komponenty stron ---------- */

/* K-ROZ (§8.3) */
.kroz { background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 24px; display: grid; gap: 16px; color: var(--czern); }
.kafel--czern .kroz { border-color: transparent; }
.kroz__osoba { display: flex; align-items: center; gap: 16px; }
.kroz__foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tlo-2); }
.kroz__imie { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.kroz__rola { font-size: .9375rem; color: var(--stal); line-height: 1.4; }
.kroz__tel { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.kroz__godz { font-size: .9375rem; color: var(--stal); margin-top: -8px; }
.kroz__mail { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 1rem; color: var(--czern); }
.kroz__mail .ik { color: var(--stal); }
.kroz__firma { padding-top: 14px; border-top: 1px dashed var(--szkielet); font-size: .9375rem; color: var(--stal); }
.kroz--kompakt { padding: 16px; gap: 12px; }
.kroz--kompakt .kroz__foto { width: 48px; height: 48px; }

/* karta głosu (§8.5) */
.glos { border-radius: var(--r-m); padding: 24px; background: #fff; border: 1px solid var(--linia); display: grid; gap: 16px; }
@media (min-width: 768px) { .glos { padding: 32px; } }
.kafel--czern .glos { background: var(--grafit); border-color: var(--obrys-ciemne); color: #fff; }
.glos__cyt { font-size: 1.25rem; line-height: 1.5; font-weight: 400; text-wrap: pretty; }
.glos__cyt::before { content: "„"; }
.glos__cyt::after { content: "”"; }
.glos__pod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .9375rem; color: var(--mgla); }
.glos__gw { display: inline-flex; gap: 2px; color: var(--sygnal); }
.glos__gw .ik { width: 16px; height: 16px; }

/* pas wyników (§8.6) */
.wyniki { display: grid; grid-template-columns: 1fr; }
.wyniki__k { padding: 20px 0; border-top: 1px dashed var(--mgla); }
.wyniki__k:first-child { border-top: 0; padding-top: 0; }
.wyniki__l { font-size: var(--t-liczba); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff; display: flex; align-items: baseline; gap: .12em; }
.wyniki__l small { font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--mgla); }
.wyniki__t { margin-top: 12px; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.wyniki__z { margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--mgla); }
@media (min-width: 768px) {
  .wyniki { grid-template-columns: repeat(3, 1fr); }
  .wyniki__k { border-top: 0; border-left: 1px dashed var(--mgla); padding: 0 32px; }
  .wyniki__k:first-child { border-left: 0; padding-left: 0; }
}
/* cztery liczby: na tablecie dwie na dwie (bez sierot w drugim rzędzie), od 1 024 px w jednym rzędzie */
@media (min-width: 768px) and (max-width: 1023px) {
  .wyniki--4 { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .wyniki--4 .wyniki__k:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) { .wyniki--4 { grid-template-columns: repeat(4, 1fr); } }

/* oś procesu (§8.13) */
.os { position: relative; display: grid; gap: 16px; }
.os__krok { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 16px; }
.os__krok .etap { margin-top: 24px; }
.os__karta { background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 24px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 1024px) {
  .os { grid-template-columns: repeat(var(--kroki, 3), minmax(0, 1fr)); gap: 24px; padding-top: 0; }
  .os__krok { grid-template-columns: 1fr; gap: 20px; }
  .os__krok .etap { margin-top: 0; }
}

/* lista warunków (§8.12) */
.warunki { display: grid; gap: 16px; }
.warunki__k { background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 24px; }
.warunki__k h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; }
.warunki__k ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.warunki__k li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.125rem; line-height: 1.45; }
.warunki__k li .ik { margin-top: 3px; }
.ik-tak { color: var(--ok); } .ik-nie { color: var(--stal); }
@media (min-width: 768px) { .warunki { grid-template-columns: 1fr 1fr; gap: 24px; } .warunki__k { padding: 32px; } .warunki__k h3 { font-size: 1.375rem; } }

/* tabela porównawcza (§8.11) */
.tpor { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.tpor th, .tpor td { text-align: left; vertical-align: top; padding: 16px; border-bottom: 1px solid var(--obrys-ui); }
.tpor thead th { font-size: 1rem; font-weight: 600; border-bottom-width: 2px; }
.tpor tbody th { font-weight: 600; width: 25%; }
.tpor .my { background: var(--panel); }
.tpor thead .my { box-shadow: inset 0 3px 0 var(--czern); border-radius: 8px 8px 0 0; }
.tpor .wart { display: flex; gap: 8px; align-items: flex-start; }
.tpor .wart .ik { margin-top: 2px; }
.tpor-karty { display: grid; gap: 16px; }
.tpor-karta { border: 1px solid var(--linia); border-radius: var(--r-m); overflow: hidden; }
.tpor-karta h3 { font-size: 1rem; font-weight: 600; padding: 16px 16px 8px; }
.tpor-karta dl { margin: 0; display: grid; }
.tpor-karta dl > div { padding: 12px 16px; border-top: 1px solid var(--linia); display: grid; gap: 4px; }
.tpor-karta dl > div.my { background: var(--panel); }
.tpor-karta dt { font-size: .9375rem; color: var(--stal); font-weight: 500; }
.tpor-karta dd { display: flex; gap: 8px; align-items: flex-start; font-size: 1rem; }

/* belka CTA (§8.14) */
.belka { background: var(--czern); color: #fff; border-radius: var(--r-m); padding: 24px; display: grid; gap: 16px; align-items: center; }
.belka p { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
@media (min-width: 768px) { .belka { min-height: 88px; padding: 16px 16px 16px 32px; grid-template-columns: 1fr auto; } }

/* FAQ (§3.5) */
.faq { display: grid; gap: 8px; }
.faq__k { background: #fff; border-radius: var(--r-m); border: 1px solid transparent; position: relative; overflow: hidden; transition: border-color var(--ruch-szybki); }
.faq__k::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--akcja); opacity: 0; transition: opacity var(--ruch-stan); }
.faq__k.otwarta::before, html:not(.js) .faq__k::before { opacity: 1; }
.faq__q { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 0; background: transparent; text-align: left; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.faq__q .ik { transition: transform var(--ruch-stan) var(--krzywa); }
.faq__q[aria-expanded="true"] .ik { transform: rotate(180deg); }
.faq__a { padding: 0 20px 20px; font-size: 1.125rem; line-height: 1.6; max-width: 72ch; }
html.js .faq__a[data-zwin] { display: none; }
@media (min-width: 768px) { .faq__q { padding: 16px 24px; } .faq__a { padding: 0 24px 24px; } }
@media (hover: hover) and (pointer: fine) { .faq__k:hover { border-color: var(--obrys-ui); } }

/* komunikat stanu (§8.10) */
.kom { display: grid; gap: 12px; padding: 16px 20px; border-radius: var(--r-s); background: var(--tlo-2); position: relative; }
.kom--blad { background: var(--err-tlo); box-shadow: inset 3px 0 0 var(--err); }
.kom--ostrz { background: #fff; box-shadow: inset 3px 0 0 var(--stal), inset 0 0 0 1px var(--linia); }
.kom__t { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
@media (min-width: 768px) { .kom { grid-template-columns: auto 1fr; align-items: start; column-gap: 16px; } }

/* formularze (§8.9) */
.pole { display: grid; gap: 8px; }
.pole label, .pole .pole__et { font-size: 1rem; font-weight: 600; }
.pole label small, .pole__et small { font-weight: 400; font-size: .9375rem; color: var(--stal); }
.pole input, .pole textarea, .pole select {
  width: 100%; min-height: 52px; padding: 12px 14px; font-size: 1.125rem; line-height: 1.4;
  border: 1px solid var(--obrys-ui); border-radius: var(--r-s); background: #fff; color: var(--czern);
  transition: border-color var(--ruch-szybki);
}
.pole textarea { min-height: 132px; resize: vertical; }
.pole input:hover, .pole textarea:hover { border-color: var(--czern); }
.pole input:focus-visible, .pole textarea:focus-visible { border-color: var(--czern); }
.pole__pod { font-size: .9375rem; color: var(--stal); }
.pole--blad input, .pole--blad textarea { border: 2px solid var(--err); }
.pole__blad { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; font-weight: 500; color: var(--err); }
.wybory { display: grid; gap: 12px; }
@media (min-width: 768px) { .wybory { grid-template-columns: repeat(3, 1fr); } }
.wybor { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; border: 2px solid var(--obrys-ui); border-radius: var(--r-s); background: #fff; text-align: left; font-size: 1rem; font-weight: 600; line-height: 1.3; position: relative; }
.wybor .poj { width: 40px; height: 40px; } .wybor .poj .ik { width: 20px; height: 20px; }
.wybor[aria-checked="true"] { border-color: var(--czern); }
.wybor .ik-check { margin-left: auto; opacity: 0; }
.wybor[aria-checked="true"] .ik-check { opacity: 1; }
@media (min-width: 768px) { .wybor { min-height: 72px; } }
@media (hover: hover) and (pointer: fine) { .wybor:hover { border-color: var(--czern); } }
.zgoda { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; font-size: 1rem; line-height: 1.5; cursor: pointer; }
.zgoda input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--czern); }

/* modal i warstwy */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(11, 13, 16, .5); opacity: 0; visibility: hidden; transition: opacity 200ms var(--krzywa), visibility 0s linear 200ms; }
.modal.jest { opacity: 1; visibility: visible; transition: opacity 200ms var(--krzywa); }
.modal__okno { width: 100%; height: 100dvh; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.modal__bar { flex: none; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; border-bottom: 1px solid var(--linia); font-weight: 600; }
.modal__x { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r-s); }
.modal__tresc { flex: 1; overflow-y: auto; padding: 20px; }
@media (min-width: 768px) {
  .modal__okno { width: min(880px, calc(100vw - 48px)); height: auto; min-height: 600px; max-height: calc(100dvh - 48px); border-radius: var(--r-m); }
  .modal__tresc { padding: 32px; }
}
.warstwa-wideo { background: rgba(11, 13, 16, .9); }
.warstwa-wideo .modal__okno { background: transparent; height: auto; min-height: 0; width: min(1200px, calc(100vw - 32px)); border-radius: var(--r-m); overflow: visible; }
.warstwa-wideo video { width: 100%; border-radius: var(--r-m); background: #000; }
.warstwa-wideo .modal__x { position: absolute; top: 12px; right: 12px; background: #fff; }

/* rezerwacja (§8.8) */
/* Układ zależy od szerokości samego widżetu (kontener), bo ten sam widżet stoi w modalu, w S14 (kolumna 7/12) i na /kontakt.
   Karta osadzona ma wysokość treści: bez rezerwy pod krok z kalendarzem, więc w kroku „Z kim” nie zostaje pusta biel. */
.rez { display: grid; gap: 20px; align-content: start; container-type: inline-size; }
.rez--osadz { background: #fff; border-radius: var(--r-m); padding: 20px; color: var(--czern); }
@media (min-width: 768px) { .rez--osadz { padding: 32px; } }
.kafel--czern .rez--osadz :focus-visible { outline-color: var(--fokus); }
.rez [data-fokus-start]:focus { outline: none; }
.rez__kroki { display: flex; gap: 20px; font-size: .9375rem; color: var(--stal); border-bottom: 1px solid var(--linia); }
.rez__kroki span { padding-bottom: 10px; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.rez__kroki span.jest { color: var(--czern); font-weight: 600; border-color: var(--akcja); }
.rez__osoby { display: grid; gap: 12px; }
@container (min-width: 560px) { .rez__osoby { grid-template-columns: 1fr 1fr; } }
.rez__osoba { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; padding: 14px; border: 1px solid var(--obrys-ui); border-radius: var(--r-s); background: #fff; text-align: left; position: relative; }
.rez__osoba picture { grid-row: span 2; }
.rez__osoba img { width: 56px; height: 56px; border-radius: 50%; background: var(--tlo-2); }
.rez__osoba b { font-size: 1.0625rem; font-weight: 600; }
.rez__osoba span { font-size: .9375rem; color: var(--stal); line-height: 1.35; }
.rez__osoba .pig { position: absolute; top: -12px; right: 12px; min-height: 26px; padding: 2px 10px; font-size: .8125rem; background: var(--czern); color: #fff; border-color: var(--czern); }
.rez__osoba[aria-checked="true"] { border: 2px solid var(--czern); padding: 13px; }
@media (hover: hover) and (pointer: fine) { .rez__osoba:hover { border-color: var(--czern); } }
.kal { display: grid; gap: 16px; }
@container (min-width: 600px) { .kal { grid-template-columns: 7fr 5fr; gap: 24px; } }
@container (min-width: 400px) and (max-width: 599px) { .kal__godz { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { @container (max-width: 479px) { .rez .btn-rzad { flex-wrap: nowrap; } .rez .btn-rzad .btn { flex: 1 1 0; min-width: 0; padding-inline: 16px; } } }
.kal__mies { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.kal__mies button { width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--r-s); display: grid; place-items: center; }
.kal__dni { display: grid; grid-template-columns: repeat(7, 44px); gap: 4px; justify-content: space-between; }
.kal__dn { font-size: .8125rem; color: var(--stal); text-align: center; font-weight: 600; }
.kal__d { width: 44px; height: 44px; border: 1px solid var(--obrys-ui); border-radius: var(--r-s); background: #fff; font-size: 1rem; font-variant-numeric: tabular-nums; position: relative; }
.kal__d::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--czern); }
.kal__d[aria-disabled="true"] { border-color: transparent; background: var(--tlo-2); color: var(--wyl-tekst); }
.kal__d[aria-disabled="true"]::after { display: none; }
.kal__d[aria-pressed="true"] { background: var(--akcja); border-color: var(--akcja); color: #fff; font-weight: 600; }
.kal__d[aria-pressed="true"]::after { background: #fff; }
.kal__godz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.kal__g { min-height: 48px; border: 1px solid var(--obrys-ui); border-radius: var(--r-s); background: #fff; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kal__g[aria-pressed="true"] { background: var(--akcja); border-color: var(--akcja); color: #fff; }
@media (hover: hover) and (pointer: fine) { .kal__d:not([aria-disabled="true"]):hover, .kal__g:hover { border-color: var(--czern); } }
@media (max-width: 379px) { .kal__dni { grid-template-columns: repeat(7, 1fr); gap: 2px; } .kal__d { width: 100%; } }
.rez__podsum { background: var(--panel); border-radius: var(--r-s); padding: 16px; display: grid; gap: 6px; font-size: 1rem; }
.rez__ok { display: grid; justify-items: start; gap: 16px; }
.rez__ok-kolo { width: 56px; height: 56px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; color: #fff; }
.rez__ok-kolo .ik { width: 32px; height: 32px; }

/* baner cookies (§7.15) */
.cookies { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: var(--z-cookies); background: #fff; border-radius: var(--r-m); box-shadow: var(--cien); padding: 20px; display: grid; gap: 16px; max-width: 560px; }
.cookies p { font-size: 1rem; line-height: 1.5; }
.cookies .btn-rzad .btn { flex: 1; min-width: 0; }
@media (min-width: 768px) { .cookies { left: 24px; bottom: 24px; right: auto; padding: 24px; } }

/* przełącznik wariantu A/B (tylko localhost) */
.wariant-pr { position: fixed; left: 12px; bottom: 12px; z-index: 150; display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--czern); border-radius: 999px; box-shadow: var(--cien); font-size: .8125rem; color: var(--mgla); }
.wariant-pr span { padding: 0 6px 0 8px; font-weight: 600; }
.wariant-pr button { min-width: 36px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: #fff; font-weight: 600; }
.wariant-pr button[aria-pressed="true"] { background: #fff; color: var(--czern); }
@media (max-width: 1023px) { .wariant-pr { left: auto; right: 8px; bottom: auto; top: 64px; transform: scale(.86); transform-origin: top right; opacity: .92; } body.bez-przewijania .wariant-pr { display: none; } }

/* zdjęcia */
.foto { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--tlo-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-podpis { margin-top: 8px; font-size: .9375rem; color: var(--stal); }

/* nagranie (§8.7) */
.nagr { position: relative; border-radius: var(--r-m); overflow: hidden; border: 2px solid var(--szkielet); background: var(--tlo-2); aspect-ratio: 16 / 9; }
.kafel--czern .nagr { border: 1px solid var(--obrys-ciemne); background: var(--grafit); }
.nagr img, .nagr video { width: 100%; height: 100%; object-fit: cover; }
.nagr__play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; box-shadow: var(--cien); transition: transform var(--ruch-szybki) var(--krzywa); }
.nagr__play .ik { width: 24px; height: 24px; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { .nagr__play:hover { transform: scale(1.06); } }

/* widoczność zależna od progu (uzupełnienie) */
@media (max-width: 767px) { .od-768-flex { display: none !important; } }
@media (max-width: 1023px) { .od-1024-flex, .od-1024-inline, .tylko-desk-inline { display: none !important; } }
.od-768-flex, .od-1024-flex { display: flex; }
.od-1024-inline { display: inline-flex; }

/* makiety systemu dla zarządcy: UI-05 odczyt licznika, UI-06 zgłoszenia, UI-07 faktury (wspólne dla strony głównej i podstron) */
.ui05 { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
.ui05__foto { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--grafit); display: grid; place-items: center; overflow: hidden; }
.ui05__foto::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .12), transparent 60%); }
.ui05__licz { position: relative; width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--stal), 0 0 0 6px var(--mgla); display: grid; place-items: center; }
.ui05__cyfry { margin-top: -12px; padding: 1px 4px; border-radius: 2px; background: var(--czern); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ui05__licz i { position: absolute; bottom: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--stal); }
.ui05__zd { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; color: var(--stal); line-height: 1.25; }
.ui05__zd .ik { width: 14px; height: 14px; flex: none; }
.ui05__pola { display: grid; gap: 8px; }
.ui05__pola b { font-size: 14px; }
.ui05__pola .ui05__w { font-size: 18px; }
.ui05__lewa { min-width: 0; }

/* UI-06 zgłoszenia */
.ui06__zakl span { display: inline-flex; gap: 6px; align-items: center; padding: 6px 8px; }
.ui06__zakl b { font-weight: 600; color: var(--stal); }
.ui06__zakl span.jest b { color: var(--czern); }
.ui06__w { grid-template-columns: minmax(0, 1fr) auto; min-height: 46px; padding: 6px 12px; }
.ui06__k { display: grid; gap: 1px; min-width: 0; }
.ui06__k b { font-size: 14px; }
.ui06__k span { font-size: 13px; color: var(--stal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui06__st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ui06__st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.ui06__st--n { box-shadow: inset 0 0 0 1px var(--obrys-ui); }
.ui06__st--n::before { background: var(--czern); }
.ui06__st--r { background: var(--tlo-2); }
.ui06__st--r::before { border: 2px solid var(--czern); width: 5px; height: 5px; }
.ui06__st--z { background: var(--ok-tlo); }
.ui06__st--z::before { background: var(--ok); }

/* UI-07 faktury */
.ui07__w { grid-template-columns: minmax(0, 1fr) auto auto; }
.ui07__w > span.tnum { font-size: 13px; font-weight: 600; }
.ui07__przyp { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--tlo-2); font-size: 13px; line-height: 1.35; }
.ui07__przyp .ik { width: 16px; height: 16px; margin-top: 1px; flex: none; }
@container (max-width: 330px) { .ui07__w .mk__status { display: none; } }

/* Nagłówek w wersji czarnej (Wiktor, 26.09) */
.hdr { background: var(--czern); color: #fff; }
.hdr.hdr--linia { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
.hdr :focus-visible { outline-color: var(--fokus-ciemne); }
.hdr .nav-poz, .hdr .hdr__tel, .hdr .hdr__zadzwon, .hdr .hdr__menu { color: #fff; }
.hdr .nav-poz[aria-expanded="true"] { background: var(--grafit); }
.hdr .nav-poz[aria-current="page"]::after, .hdr .nav-poz.jest-biezaca::after { background: #fff; }
.hdr .hdr__cta { --btn-tlo: #fff; --btn-tekst: var(--czern); --btn-obrys: #fff; }
.hdr .hdr__cta:active { --btn-tlo: var(--linia); --btn-obrys: var(--linia); }
@media (hover: hover) and (pointer: fine) {
  .hdr .nav-poz:hover { background: var(--grafit); }
  .hdr .hdr__cta:hover { --btn-tlo: var(--tlo-2); --btn-obrys: var(--tlo-2); }
}
/* panel „Dla kogo” w wersji czarnej */
.hdr .mega { background: var(--czern); color: #fff; border: 1px solid var(--obrys-ciemne); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.hdr .mega__wej { color: #fff; }
.hdr .mega__wej-o { color: var(--mgla); }
.hdr .mega__case { background: var(--grafit); border: 1px solid var(--obrys-ciemne); }
.hdr .mega__case-t { color: #fff; }
.hdr .mega__case .link { color: #fff; }
.hdr .mega__pasek { background: var(--grafit); box-shadow: inset 0 1px 0 var(--obrys-ciemne); }
.hdr .mega__pasek > * { color: #fff; }
.hdr .mega__pasek > * + * { box-shadow: inset 1px 0 0 var(--obrys-ciemne); }
@media (hover: hover) and (pointer: fine) { .hdr .mega__wej:hover { background: var(--grafit); } }

/* karta rozmowy zostaje w szerokości 1 200 px, jak hero (Wiktor, 26.09) */
.sekcja.rozmowa > .wrap { width: min(1200px, 100% - 2 * (var(--m) + var(--p))); }

/* treść nagłówka w szerokości 1 200 px, wyśrodkowana (Wiktor, 26.09) */
.hdr > .wrap { width: min(1200px, 100% - 2 * (var(--m) + var(--p))); }

/* belka CTA w szerokości 1 200 px, wyśrodkowana (Wiktor, 26.09) */
.belka { max-width: 1200px; margin-inline: auto; }

/* sekcja pytań: treść w 1 200 px, wyśrodkowana (Wiktor, 26.09) */
.kafel > .wrap.faqs { width: min(1200px, 100%); }

/* ostatnia sekcja przed stopką bez dolnego odstępu, odstęp daje sama stopka */
main > .sekcja:last-child { padding-bottom: 0; }


/* Karta "Twój system" (strona główna, /bezpieczenstwo), 26.09 */
.ts { width: 100%; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 24px; }
.ts__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 16px; font-size: 1.0625rem; }
.ts__glowa span { font-size: .875rem; color: var(--stal); font-variant-numeric: tabular-nums; }
.ts__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ts__w { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--linia); border-radius: var(--r-s, 10px); }
.ts__w--serwis { border-style: dashed; background: var(--panel); }
.ts__ik { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--panel); }
.ts__w--serwis .ts__ik { background: #fff; }
.ts__t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ts__t b { font-weight: 600; }
.ts__t span { font-size: .9375rem; color: var(--stal); }
.ts__w .pig { flex: none; }
@media (max-width: 767px) { .ts { padding: 16px; } .ts__w { gap: 12px; padding: 12px; } .ts__ik { width: 44px; height: 44px; } }
.ts__t b { line-height: 1.3; }
.ts__t span { line-height: 1.4; }
@media (max-width: 767px) { .ts__t { flex: 1 1 calc(100% - 56px); } }
@media (max-width: 767px) {
  .ts__w { flex-wrap: wrap; row-gap: 8px; }
  .ts__ik { width: 40px; height: 40px; }
  .ts__ik .ik { width: 24px; height: 24px; }
  .ts__w .pig { margin-left: 52px; font-size: .75rem; padding: 2px 8px; }
  .ts__w .pig .ik { width: 14px; height: 14px; }
}

/* Przełącznik zakładek (strona główna S3, /bezpieczenstwo) */
.zk { display: flex; justify-content: center; margin: -8px 0 32px; }
.zk__lista { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--linia); border-radius: 14px; box-shadow: 0 1px 2px rgba(11, 13, 16, .04); }
.zk__znacznik { position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--zk-w, 0); transform: translateX(var(--zk-x, 0)); background: var(--czern); border-radius: 10px; transition: transform 300ms var(--krzywa), width 300ms var(--krzywa); z-index: 0; }
html:not(.js) .zk__znacznik { display: none; }
.zk__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 10px; background: transparent; color: var(--stal); font-size: 1.0625rem; font-weight: 600; white-space: nowrap; transition: color 200ms var(--krzywa), background-color 150ms; }
.zk__tab .ik { width: 20px; height: 20px; }
.zk__tab[aria-selected="true"] { color: #fff; }
html:not(.js) .zk__tab[aria-selected="true"] { background: var(--czern); }
.zk__tab:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .zk__tab[aria-selected="false"]:hover { color: var(--czern); background: var(--tlo-2); } }
.zk__krotka { display: none; }
@media (max-width: 767px) {
  .zk { margin: -4px 0 24px; }
  .zk__lista { display: grid; width: 100%; gap: 2px; padding: 4px; }
  .zk__tab { flex-direction: column; gap: 4px; min-height: 64px; padding: 6px 4px; font-size: .875rem; }
  .zk__pelna { display: none; }
  .zk__krotka { display: inline; }
}

/* Mega „Dla kogo”: podgląd branży po najechaniu (27.09) */
.mega__case[data-podglad] { display: grid; }
.mega__pod { grid-area: 1 / 1; display: grid; gap: 10px; align-content: start; transition: opacity 180ms var(--krzywa), visibility 0s; }
.mega__pod[data-ukryty] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms var(--krzywa), visibility 0s linear 120ms; }
.mega__pod .pig { width: max-content; }
.mp-etapy { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--stal); }
.mp-etapy span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--linia); border-radius: 999px; background: #fff; }
.mp-etapy span.on { background: var(--czern); border-color: var(--czern); color: #fff; }
.mp-etapy .ik { width: 12px; height: 12px; }
.mp-splyw { display: flex; justify-content: center; color: var(--stal); margin: -2px 0; }
.mp-splyw .ik { width: 16px; height: 16px; }
.mega__mk .mk__chip .ik { width: 13px; height: 13px; margin-right: 5px; }
.hdr .mega__wej.jest { background: var(--grafit); }
.mega__pod .mega__mk { height: 208px; overflow: hidden; }

/* Mega: animacja przełączania podglądu (27.09) */
.mega__pod { transition: none; }
.mega__pod[data-ukryty] { transition: none; }
.mega__pod.wychodzi { visibility: visible; animation: mpWyj 160ms var(--krzywa) both; }
.mega__pod.wchodzi > * { animation: mpWej 420ms cubic-bezier(.2, .8, .2, 1) both; }
.mega__pod.wchodzi > :nth-child(2) { animation-delay: 50ms; }
.mega__pod.wchodzi > :nth-child(3) { animation-delay: 90ms; }
.mega__pod.wchodzi > :nth-child(4) { animation-delay: 130ms; }
.mega__pod.wchodzi .mk__ekran > * { animation: mpWej 380ms cubic-bezier(.2, .8, .2, 1) both; }
.mega__pod.wchodzi .mk__ekran > :nth-child(2) { animation-delay: 70ms; }
.mega__pod.wchodzi .mk__ekran > :nth-child(3) { animation-delay: 120ms; }
.mega__pod.wchodzi .mk__ekran > :nth-child(n+4) { animation-delay: 160ms; }
@keyframes mpWej { from { opacity: 0; transform: translateY(calc(var(--kier, 1) * 14px)); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mpWyj { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--kier, 1) * -10px)); } }
/* przesuwany znacznik aktywnej branży po lewej */
.mega__kol > div:first-child { position: relative; }
.mega__znacznik { position: absolute; left: 0; right: 0; top: 0; height: var(--mz-h, 0); transform: translateY(var(--mz-y, 0)); border-radius: var(--r-s); background: var(--grafit); transition: transform 280ms cubic-bezier(.2, .8, .2, 1), height 280ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.mega__wej[data-pod] { position: relative; z-index: 1; }
.hdr .mega__wej[data-pod].jest, .hdr .mega__wej[data-pod]:hover { background: transparent; }
.mega__wej[data-pod] .ik { transition: transform 280ms cubic-bezier(.2, .8, .2, 1), color 200ms; }
.hdr .mega__wej[data-pod].jest .ik { color: var(--sygnal); transform: scale(1.1); }
html[data-wariant="b"] .hdr .mega__wej[data-pod].jest .ik { color: #17ABAF; }
@media (prefers-reduced-motion: reduce) { .mega__pod.wchodzi > *, .mega__pod.wchodzi .mk__ekran > *, .mega__pod.wychodzi { animation: none; } .mega__pod.wychodzi { visibility: hidden; } }
/* dopracowanie: ramka okienka stoi, wyjście krótkie, wejście treści po nim */
.mega__pod.wychodzi { animation: mpZnika 110ms linear both; }
.mega__pod.wychodzi > :not(.mega__mk) { animation: mpWyj 110ms var(--krzywa) both; }
.mega__pod.wchodzi > .mega__mk { animation: mpPojaw 160ms linear both; }
.mega__pod.wchodzi > :nth-child(2) { animation-delay: 90ms; }
.mega__pod.wchodzi > :nth-child(3) { animation-delay: 130ms; }
.mega__pod.wchodzi > :nth-child(4) { animation-delay: 170ms; }
.mega__pod.wchodzi .mk__ekran > :nth-child(1) { animation-delay: 60ms; }
.mega__pod.wchodzi .mk__ekran > :nth-child(2) { animation-delay: 110ms; }
.mega__pod.wchodzi .mk__ekran > :nth-child(3) { animation-delay: 150ms; }
.mega__pod.wchodzi .mk__ekran > :nth-child(n+4) { animation-delay: 190ms; }
@keyframes mpZnika { from { opacity: 1; } to { opacity: 0; } }
@keyframes mpPojaw { from { opacity: .6; } to { opacity: 1; } }

/* Hero stron branżowych: tekst na środku i szeroki ekran systemu (27.09) */
.hc { padding-top: 72px; overflow: hidden; }
.hc__tekst { width: min(880px, 100%); text-align: center; display: grid; justify-items: center; gap: 20px; }
.hc__tekst .h1 { margin: 0; text-wrap: balance; }
.hc__tekst .lead { margin: 0; max-width: 60ch; }
.hc__cta { justify-content: center; margin-top: 8px; }
.hc__obraz { width: min(1200px, 100%); margin-top: 56px; }
.hc__plotno { position: relative; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); max-height: 520px; }
.hc__mk { box-shadow: 0 24px 60px rgba(11, 13, 16, .12); }
.hc__mk .mk__app { min-height: 480px; }
.hc__ekran { gap: 16px; padding: 20px 24px; }
.hc__mk .mk__modul { font-size: 18px; }
.hc__kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hc__kafle > div { border: 1px solid var(--linia); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.hc__kafle span { font-size: 13px; color: var(--stal); }
.hc__kafle b { font-size: 20px; font-weight: 600; white-space: nowrap; }
.hc__pasek { display: block; height: 6px; border-radius: 3px; background: var(--tlo-2); overflow: hidden; }
.hc__pasek i { display: block; width: 92%; height: 100%; border-radius: 3px; background: var(--czern); }
.hc__w { grid-template-columns: minmax(0, 1.3fr) .6fr minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); min-height: 46px; font-size: 14px; }
.hc__ok { display: inline-flex; align-items: center; gap: 5px; }
.hc__ok .ik { width: 15px; height: 15px; color: var(--ok); }
.hc__uw { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-weight: 600; font-size: 13px; }
.hc__chip { top: 132px; right: -12px; }
@media (min-width: 1280px) { .hc__chip { right: -40px; } }
@media (max-width: 767px) {
  .hc { padding-top: 40px; }
  .hc__obraz { margin-top: 36px; }
  .hc__plotno { max-height: 420px; }
  .hc__mk .mk__app { grid-template-columns: minmax(0, 1fr); min-height: 380px; }
  .hc__mk .mk__bok { display: none; }
  .hc__ekran { padding: 14px; gap: 12px; }
  .hc__kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hc__kafle b { font-size: 16px; }
  .hc__w { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr); font-size: 12.5px; }
  .hc__w > :nth-child(2), .hc__w > :nth-child(5) { display: none; }
  .hc__chip { top: auto; bottom: 110px; right: 8px; left: 8px; justify-content: center; }
}
.hc__tekst { width: min(880px, 100% - 2 * (var(--m) + var(--p))); }
.hc__obraz { width: min(1200px, 100% - 2 * (var(--m) + var(--p))); }
.hc__plotno { max-height: 560px; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
@media (max-width: 767px) { .hc__plotno { max-height: 470px; } }
@media (max-width: 767px) { .hc__uw { white-space: nowrap; font-size: 11.5px; padding: 2px 6px; } }
.hc__w--rk { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.hc__w--dk { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) .5fr minmax(0, .8fr); }
.hc__os { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.hc__os b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc__tr--jest { background: var(--ok-tlo); }
.hc__stan { justify-items: center; margin: 4px 0 0; }
.hc__mk .mk__chip--jest { background: var(--czern); color: #fff; border-color: var(--czern); }
.hc__plotno--mapa .hc__mk { height: auto; }
@media (max-width: 767px) {
  .hc__w--rk { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .hc__w--rk > :nth-child(2), .hc__w--rk > :nth-child(3) { display: none; }
  .hc__w--dk { grid-template-columns: minmax(0, 1fr) auto; }
  .hc__w--dk > :nth-child(2), .hc__w--dk > :nth-child(3) { display: none; }
  .hc__mk .mk__chipy .mk__chip:nth-child(n+3) { display: none; }
  .hc__stan li { flex-wrap: wrap; justify-content: center; text-align: center; }
}
.hc__obraz .ui09m { padding-bottom: 32px; }

/* Karty etapów „Jak pracujemy” (strona główna i strony branżowe) */
.et-lista { display: grid; gap: var(--karty-odstep); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .et-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.et { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linia); border-radius: var(--r-m); padding: 32px; }
.et__gora { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.et__nr { font-size: clamp(2.5rem, 3.4vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.et__czas { padding: 6px 12px; border-radius: 999px; background: var(--panel); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.et .h3 { margin: 28px 0 0; }
.et__opis { margin: 10px 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--stal); }
.et__dost { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.et__dost li { display: flex; gap: 8px; align-items: flex-start; }
.et__dost .ik { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
.et__kto { display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 24px; font-size: .9375rem; color: var(--stal); }
.et__kto b { color: var(--czern); font-weight: 600; }
.et__dost + .et__kto { margin-top: auto; }
.et__dost { margin-bottom: 28px; }
.et__kto { border-top: 1px solid var(--linia); }
.et__av { display: flex; }
.et__av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; display: block; }
.et__av picture + picture img { margin-left: -12px; }
.et__strz { display: none; }
@media (min-width: 1024px) {
  .et__strz { display: grid; place-items: center; position: absolute; top: 50%; right: calc(var(--karty-odstep) / -2 - 18px); width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: #fff; border: 1px solid var(--linia); z-index: 1; }
  .et__strz .ik { width: 18px; height: 18px; }
}
@media (max-width: 767px) { .et { padding: 24px 20px; } }
.et__av picture { display: block; }
.et__av picture + picture img { margin-left: 0; }
.et__av picture + picture { margin-left: -12px; }
.et__dost { margin-bottom: 0; }
.et__wiecej { margin-top: auto; align-self: flex-start; width: auto; }
.et__dost { margin-bottom: 28px; }

.hc__w--kt { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) .6fr minmax(0, .8fr); }
.hk__t { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--tlo-2); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.hk__t--uw { background: #FEF3C7; color: #92400E; }
.hk__t--err { background: #FEE2E2; color: #991B1B; }
@media (max-width: 767px) {
  .hc__w--kt { grid-template-columns: minmax(0, 1.4fr) auto; }
  .hc__w--kt > :nth-child(2), .hc__w--kt > :nth-child(3) { display: none; }
}
.proces__cta { display: flex; justify-content: center; margin-top: 40px; }

/* Rezerwacja jak na daplo.agency, w stylu nowej strony (27.09) */
@media (min-width: 768px) { #warstwa-rezerwacja .modal__okno { width: min(1080px, calc(100vw - 48px)); min-height: 0; } }
.rez { gap: 20px; }
.bk-glowa { display: grid; justify-items: center; text-align: center; gap: 10px; padding-top: 8px; }
.bk-glowa .h3 { margin: 4px 0 0; font-size: 1.5rem; }
.bk-glowa p { margin: 0; color: var(--stal); }
.bk-ikona { width: 56px; height: 56px; border-radius: 14px; background: var(--czern); color: #fff; display: grid; place-items: center; }
.bk-ikona .ik { width: 26px; height: 26px; }
.bk-osoby { display: grid; gap: 16px; margin-top: 8px; }
@container (min-width: 520px) { .bk-osoby { grid-template-columns: 1fr 1fr; } }
.bk-osoba { position: relative; display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--linia); border-radius: var(--r-m); background: #fff; text-align: left; transition: border-color 150ms, box-shadow 150ms; }
.bk-osoba__foto img { width: 88px; height: 88px; border-radius: 12px; object-fit: cover; object-position: 50% 15%; display: block; background: var(--czern); }
.bk-osoba__t { display: grid; gap: 2px; }
.bk-osoba__t b { font-size: 1.125rem; font-weight: 600; }
.bk-osoba__rola { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stal); }
.bk-osoba__t > span:last-child { font-size: .9375rem; color: var(--stal); line-height: 1.35; margin-top: 4px; }
.bk-osoba__strz .ik { width: 20px; height: 20px; transition: transform 150ms; }
.bk-osoba__pig { position: absolute; top: -12px; right: 14px; min-height: 26px; padding: 2px 10px; font-size: .8125rem; background: var(--czern); color: #fff; border-color: var(--czern); }
@media (hover: hover) and (pointer: fine) { .bk-osoba:hover { border-color: var(--czern); box-shadow: var(--cien); } .bk-osoba:hover .bk-osoba__strz .ik { transform: translateX(4px); } }
.bk-wroc { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 0; border: 0; background: none; color: var(--stal); font-weight: 600; font-size: .9375rem; }
.bk-wroc .ik { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .bk-wroc:hover { color: var(--czern); } }
/* krok termin: bok | kalendarz | godziny */
.bk-termin { display: grid; gap: 24px; }
@container (min-width: 900px) { .bk-termin { grid-template-columns: 200px minmax(0, 1fr) 200px; gap: 0; } .bk-termin > * + * { border-left: 1px solid var(--linia); padding-left: 28px; } .bk-termin > :not(:last-child) { padding-right: 28px; } }
@container (min-width: 600px) and (max-width: 899px) { .bk-termin { grid-template-columns: minmax(0, 1fr) 190px; } .bk-termin > .bk-bok { grid-column: 1 / -1; } }
.bk-bok { display: grid; gap: 14px; align-content: start; }
.bk-bok > div { display: grid; gap: 2px; }
.bk-av img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; object-position: 50% 15%; display: block; background: var(--czern); }
.bk-bok__imie { font-size: 1.0625rem; font-weight: 600; }
.bk-bok__co { color: var(--stal); font-size: .9375rem; }
.bk-meta { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: .9375rem; }
.bk-meta li, .bk-kiedy { display: flex; align-items: flex-start; gap: 10px; }
.bk-meta .ik, .bk-kiedy .ik { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--stal); }
.bk-kiedy { margin: 0; font-size: .9375rem; line-height: 1.45; }
@container (min-width: 600px) and (max-width: 899px) { .bk-termin > .bk-bok { grid-template-columns: auto auto 1fr; align-items: center; } .bk-termin > .bk-bok .bk-meta { grid-auto-flow: column; justify-content: end; gap: 20px; } }
@container (max-width: 599px) { .bk-termin > .bk-bok { grid-template-columns: auto 1fr; align-items: center; } .bk-termin > .bk-bok .bk-meta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 16px; font-size: .875rem; } }
.bk-kal__g { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bk-kal__g .h3 { margin: 0; font-size: 1.25rem; }
.bk-kal__g .h3 span { color: var(--stal); font-weight: 500; }
.bk-kal__nav { display: flex; gap: 6px; }
.bk-kal__nav button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--linia); border-radius: 10px; background: #fff; }
.bk-kal__nav button:disabled { opacity: .35; }
.bk-kal__nav .ik { width: 16px; height: 16px; }
.bk-kal__siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-kal__dn { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stal); padding-bottom: 4px; }
.bk-kal__d { aspect-ratio: 1; min-height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--tlo-2); font-weight: 600; font-variant-numeric: tabular-nums; position: relative; }
.bk-kal__d:disabled { background: transparent; color: var(--szkielet); font-weight: 400; }
.bk-kal__d--dzis::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--sygnal); }
.bk-kal__d[aria-pressed="true"] { background: var(--czern); color: #fff; }
@media (hover: hover) and (pointer: fine) { .bk-kal__d:not(:disabled):not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--czern); } }
.bk-kal__siatka--laduje .bk-kal__d { opacity: .5; }
.bk-godz__dz { margin: 0 0 14px; min-height: 38px; display: flex; align-items: center; gap: 6px; color: var(--stal); font-size: .9375rem; }
.bk-godz__dz b { color: var(--czern); font-size: 1.25rem; }
.bk-sloty { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
@container (max-width: 599px) { .bk-sloty { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; } }
.bk-slot { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--linia); border-radius: 10px; background: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-slot:disabled { background: var(--tlo-2); color: var(--stal); font-weight: 500; }
.bk-slot small { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) { .bk-slot:not(:disabled):hover { background: var(--czern); color: #fff; border-color: var(--czern); } }
.bk-pusto { margin: 0; color: var(--stal); font-size: .9375rem; line-height: 1.5; }
/* krok dane */
.bk-dane { display: grid; gap: 24px; }
@container (min-width: 680px) { .bk-dane { grid-template-columns: 260px minmax(0, 1fr); gap: 0; } .bk-dane > .bk-bok { padding-right: 32px; } .bk-dane > .bk-form { border-left: 1px solid var(--linia); padding-left: 32px; } }
.bk-form { display: grid; gap: 16px; }
.bk-form .h3 { margin: 0; }
.bk-form textarea { width: 100%; min-height: 96px; resize: vertical; }
.bk-blad:empty { display: none; }
.bk-blad { margin: 0; color: var(--err); font-weight: 600; font-size: .9375rem; }
.bk-podsum { margin: 0; padding: 12px 16px; border-radius: 10px; background: var(--tlo-2); font-weight: 600; }
.bk-kal__d { aspect-ratio: auto; height: 46px; min-height: 0; }
.bk-kal__d:disabled { height: 46px; }
.bk-kal__siatka { row-gap: 6px; }
.rez__ok { justify-items: center; text-align: center; padding: 16px 0 8px; }
@container (max-width: 599px) { .bk-kal__d { height: 40px; } .bk-osoba { grid-template-columns: 72px 1fr auto; } .bk-osoba__foto img { width: 72px; height: 72px; } }
.bk-meta li { white-space: nowrap; }
@container (max-width: 599px) { .bk-termin > .bk-bok .bk-meta { gap: 12px; flex-wrap: wrap; } .bk-slot small { display: none; } }

/* Stopka: marka + kolumny, pod spodem jeden pasek prawny (27.09) */
.stopka { padding: 72px 0 28px; }
.stopka__g { display: grid; gap: 48px; padding-bottom: 48px; }
@media (min-width: 1024px) { .stopka__g { grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr); gap: 64px; } }
.stopka__marka { display: grid; gap: 16px; align-content: start; justify-items: start; }
.stopka__marka img { height: 28px; width: auto; }
.stopka__opis { margin: 0; max-width: 34ch; color: var(--stal); font-size: .9375rem; line-height: 1.5; }
.stopka__kanaly { display: grid; gap: 2px; justify-items: start; }
.stopka__mail { font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.stopka__spol { display: flex; align-items: center; gap: 12px; margin-left: -10px; }
.stopka__tp { color: var(--czern); font-size: .9375rem; }
.stopka .stopka__kol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; align-items: start; padding: 0; border: 0; }
@media (min-width: 768px) { .stopka .stopka__kol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .stopka .stopka__kol { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stopka .stopka__kol h2 { margin: 0 0 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stal); }
.stopka .stopka__kol a { min-height: 40px; padding-block: 8px; }
.stopka .stopka__prawne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 24px 0 0; border-top: 1px solid var(--linia); font-size: .875rem; color: var(--stal); }

/* Przejścia między podstronami (27.09): nagłówek stoi, treść krótko gaśnie i wchodzi o kilka pikseli od dołu.
   View Transitions API: Chrome, Edge, Safari 18+. Inne przeglądarki przechodzą bez animacji. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: naglowek; }
::view-transition-group(naglowek) { animation: none; }
::view-transition-old(root) { animation: vtWyj 140ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtWej 300ms cubic-bezier(.2, .8, .2, 1) 140ms both; }
@keyframes vtWyj { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtWej { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Audyt mobilny 27.09 (produkcja) */
/* elementy siatek nie rozpychają ekranu przy 360 px */
.os__krok > *, .os__karta, .os__karta > *, .nagr-uk, .nagr-uk > *, .nagr-bok, .nagr-kroki li > * { min-width: 0; }
.os__karta { overflow-wrap: anywhere; }
@media (max-width: 767px) {
  /* cele dotyku min. 44 px */
  .link, .stopka__tp { display: inline-flex; align-items: center; min-height: 44px; }
  .stopka__spol { gap: 4px; }
}
.kn > *, .kn__t { min-width: 0; }
.kn__t { overflow-wrap: anywhere; }
@media (max-width: 767px) { .bk-dalej .link, .strona__dalej .link { min-height: 44px; } }
.stopka__spol { margin-left: 0; gap: 20px; }
.stopka__li { display: inline-flex; align-items: center; width: auto; min-height: 44px; gap: 8px; font-size: .9375rem; color: var(--czern); text-decoration: underline; text-underline-offset: .25em; }