@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   ROZS.pl — skonsolidowany plik CSS
   ═══════════════════════════════════════════════════════════════════════

   Wersja:         2026.1e
   Data buildu:    2026-07-29
   Zbudowane z:    4 modułów źródłowych

   Zawartość (kolejność ładowania):
     1. rozs-master.css
     2. widget.css
     3. scenarios.css
     4. baza-wiedzy-article.css

   ─────────────────────────────────────────────────────────────────────

   Migracja z inline [style] na zewnętrzny [link]:

   1. W [head] każdej strony wytnij cały blok [style]...[/style]
   2. Wstaw w to miejsce:
      [link rel="stylesheet" href="/assets/css/rozs.css?v=2026.1e"]
   3. Umieść po linku do fontów (spójne z konwencją):
      [link rel="stylesheet" href="/assets/fonts/stylesheet.css"]
      [link rel="stylesheet" href="/assets/css/rozs.css?v=2026.1e"]

   Cache busting: po zmianie tego pliku podbij ?v= we WSZYSTKICH stronach.
   Przeglądarka trzyma cache do końca sesji — bez ?v= zmiana nie zejdzie.

   ═══════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════
   rdzeń serwisu — tokeny, reset, typografia, nawigacja, komponenty
   źródło: rozs-master.css
   ═══════════════════════════════════════════════════════════════════════ */


:root {
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --surface-2: #F6F4EE;
  --surface-3: #EFECE3;
  --ink: #141A16;
  --body: #3F4A43;
  --muted: #5F6963;
  --border: rgba(20,26,22,0.13);
  --border-2: rgba(20,26,22,0.07);
  --primary: #1F5F3F;
  --primary-hover: #184B31;
  --primary-soft: #E8F1EB;
  --primary-ink: #143A28;
  --amber: #C9871F;
  --amber-soft: #FBF1DC;
  --amber-ink: #6E4509;
  --danger: #B43F2E;
  --danger-soft: #FBEAE6;
  --info: #1E6FA4;
  --info-soft: #E6F1F8;
  --info-ink: #0F4470;
  --dark-nav: #2c4a35;
  --dark-ft: #0D1410;
  --green: #5cb85c;
  --green-dk: #1d5c1d;
  --green-accent: #6ee09a;
  --nav-acc: #7ED4A8;
  --hero-bg: #0F2E20;
  --hero-bg2: #143C2A;
  --footer-bg: #0D1410;
  --max-w: 1200px;
  --px: 24px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 14px;
  --shadow-xs: 0 1px 0 rgba(20,26,22,.04), 0 1px 2px rgba(20,26,22,.04);
  --shadow-sm: 0 1px 2px rgba(20,26,22,.04), 0 4px 12px rgba(20,26,22,.06);
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s8: 48px;
  --s10: 64px;
  --font: 'Poppins', system-ui, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--body);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}

/* --- Topbar --- */
.topbar {
  background: var(--dark-ft);
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.topbar-left {
  color: #cbd0ce;
}
.topbar-left a {
  color: #fff;
}
.topbar-right {
  color: #cbd0ce;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-right a {
  color: #fff;
}
.topbar-dot {
  color: rgba(255,255,255,.35);
}

/* --- Navbar --- */
.navbar {
  background: var(--dark-nav);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  z-index: 200;
}
.navbar-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  display: flex;
  align-items: stretch;
  min-height: 68px;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 4px;
  gap: 9px;
  text-decoration: none;
}
.logo-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-name {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
}
.logo-name em {
  font-style: normal;
  color: var(--green-accent);
  opacity: .9;
}
.navbar-nav {
  display: flex;
  list-style: none;
  align-items: stretch;
  flex: 0 1 680px;
  max-width: 680px;
  width: 100%;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  padding: 0;
}
.navbar-nav li {
  display: flex;
  align-items: stretch;
  flex: 1 1 0;
  min-width: 0;
}
.navbar-nav li+li {
  border-left: 1px solid rgba(255,255,255,.07);
}
.navbar-nav a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  text-align: center;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color .14s;
}
.navbar-nav a:hover {
  border-bottom-color: rgba(92,184,92,.5);
}
.navbar-nav a.act {
  border-bottom-color: var(--green);
}
.nm {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
  display: block;
}
.ns {
  font-size: 10.5px;
  color: rgba(255,255,255,.7);
  font-weight: 400;
  line-height: 1;
  display: block;
  margin-top: 4px;
}
.navbar.nav-compact .navbar-in {
  min-height: auto;
  height: 50px;
  align-items: center;
}
.navbar.nav-compact .navbar-nav {
  flex: 1;
  max-width: none;
  width: auto;
  justify-content: center;
  gap: 4px;
  margin: 0 12px;
}
.navbar.nav-compact .navbar-nav li {
  flex: 0 0 auto;
}
.navbar.nav-compact .navbar-nav a {
  flex-direction: row;
  padding: 8px 16px;
  border-bottom: none;
  border-radius: var(--r-sm);
}
.navbar.nav-compact .navbar-nav a:hover {
  background: rgba(255,255,255,.09);
}
.navbar.nav-compact .nm {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.navbar.nav-compact .ns {
  display: none;
}
.nav-spacer {
  display: none;
}
.navbar-cta {
  background: var(--green);
  color: var(--primary-ink);
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .14s;
  margin-left: 24px;
  align-self: center;
}
.navbar-cta:hover {
  background: var(--green-dk);
  color: #fff;
}

/* --- Page hero --- */
.page-hero {
  background: linear-gradient(135deg, var(--hero-bg) 0%, var(--hero-bg2) 100%);
  padding: 48px 0 40px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.page-hero-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 32vh); /* zamiast clamp(200px, 26vh, 300px) */
  gap: 0;
  align-items: end;
}
.hero-content-col {
  min-width: 0;
}
.hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--nav-acc);
  margin-bottom: var(--s2);
  display: block;
}
.page-hero h1 {
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1.15;
  margin-bottom: var(--s3);
}
.page-hero .hero-lead {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  max-width: 640px;
  line-height: 1.6;
}
.page-hero .hero-meta {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,.15);
}
.page-hero .hero-meta-item {
  font-size: 12px;
  color: rgba(255,255,255,.82);
  display: flex;
  align-items: center;
  gap: 5px;
}
.page-hero .hero-meta-item strong {
  color: var(--nav-acc);
  font-weight: 600;
}
.hero-watermark {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 16px;
  user-select: none;
  pointer-events: none;
  text-align: right;
}
.hw-big {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.03em;
  display: block;
  text-transform: uppercase;
  color: rgba(255,255,255,.03);
  -webkit-text-stroke: 2px rgba(255,255,255,.10);
}
.hw-meta {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.42);
  display: block;  
  white-space: nowrap;  
  margin-top: 15px;
}
@media (max-width:768px) {
  .page-hero {
    min-height: auto;
    padding: 40px 0 32px;
  }
  .page-hero-in {
    display: block;
  }
  .hero-watermark {
    display: none;
  }
}

/* --- Breadcrumb --- */
.breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--border-2);
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: var(--s2) var(--px);
  max-width: var(--max-w);
  margin-inline: auto;
  font-size: 12.5px;
  color: var(--muted);
  gap: 4px;
}
.breadcrumb-list li:not(:last-child)::after {
  content: "›";
  margin-inline: 4px;
  color: var(--muted);
}
.breadcrumb-list a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb-list li[aria-current="page"] {
  color: var(--muted);
  font-weight: 400;
}

/* --- Page grid --- */
.page-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s6);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px var(--px) var(--s10);
  align-items: start;
}
@media (max-width:900px) {
  .page-grid {
    grid-template-columns: 1fr;
    padding: var(--s5) var(--s4) var(--s8);
  }
  .sidebar {
    display: none;
  }
}

/* --- Sidebar --- */
.sidebar {
  position: sticky;
  top: 80px;
}
.sb-box {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--s4);
  margin-bottom: var(--s3);
  box-shadow: var(--shadow-xs);
}
.sb-box-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #5a6b63;
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border-2);
}

/* stary kod */
/* .sb-reg-list {
  list-style: none;
}
.sb-reg-list li {
  border-bottom: 1px solid var(--border-2);
}
.sb-reg-list li:last-child {
  border-bottom: none;
}
.sb-reg-list a {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0;
  transition: color .12s;
}
.sb-reg-list a:hover {
  color: var(--primary);
}
.sb-reg-list a.active {
  background-color: rgba(31,95,63,.045);
  border-left: 3px solid var(--primary);
  color: var(--primary-ink);
  font-weight: 600;
  padding-left: 12px;
} */

/* nowy kod sidebara województw */

.sb-reg-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sb-reg-list li {
  border-bottom: 1px solid var(--border-2);
}

.sb-reg-list li:last-child {
  border-bottom: none;
}

.sb-reg-list a {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
  
  /* POPRAWKA 1: Stały padding dla wszystkich – góra/dół 5px, lewo/prawo 12px */
  padding: 5px 12px; 
  
  /* POPRAWKA 2: Rezerwujemy 3px przestrzeni na lewy pasek w stanie ukrytym */
  border-left: 3px solid transparent; 
  
  /* POPRAWKA 3: Płynne przejście dla koloru, ramki i tła */
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

.sb-reg-list a:hover {
  color: var(--primary);
  /* BONUS UX: Subtelne podświetlenie tła po najechaniu myszką */
  background-color: rgba(31, 95, 63, .015); 
}

.sb-reg-list a.active {
  background-color: rgba(31, 95, 63, .045);
  
  /* POPRAWKA 4: Zmieniamy tylko kolor ramki, która już tam fizycznie jest */
  border-left-color: var(--primary); 
  
  color: var(--primary-ink);
  font-weight: 600;
  
  /* padding-left jest usuwany, bo bezpiecznie dziedziczy 12px z reguły wyżej */
}
/* - koniec nowego - */


.sb-links-list a {
  display: block;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-2);
  transition: color .12s;
}
.sb-links-list a:last-child {
  border-bottom: none;
}
.sb-links-list a:hover {
  color: var(--primary);
} 





/* --- Typography & common --- */
.t-h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 48px 0 16px;
}
.t-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  margin-bottom: 14px;
}
.t-link {
  color: var(--primary);
  border-bottom: 1px solid rgba(31,95,63,.3);
  text-decoration: none;
}
.t-link:hover {
  border-bottom-color: var(--primary);
}
.verify-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--primary);
  font-size: 12.5px;
  color: var(--body);
  margin-bottom: var(--s6);
}
.verify-bar .verify-icon {
  flex-shrink: 0;
  color: var(--primary);
  opacity: .7;
  margin-right: 4px;
}
.verify-bar > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.verify-bar a {
  color: var(--body);
  text-decoration: none;
  font-weight: 600;
}
.verify-bar a:hover {
  color: var(--primary);
  text-decoration: underline;
}
.verify-bar strong {
  color: var(--ink);
}
.verify-bar a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
}
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.contact-card.primary {
  border-top: 3px solid var(--primary);
}
.contact-card.secondary {
  border-top: 3px solid var(--info);
}
.cc-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.cc-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s3);
  line-height: 1.3;
}
.cc-row {
  display: flex;
  gap: var(--s2);
  font-size: 13.5px;
  color: var(--body);
  margin-bottom: 8px;
  line-height: 1.5;
}
.cc-label-field {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  min-width: 80px;
  margin-top: 1px;
  flex-shrink: 0;
}
.cc-val {
  color: var(--ink);
}
.cc-val a {
  color: var(--primary);
  font-weight: 600;
}
.cc-mono {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.powiat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s3);
}
.powiat-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  color: var(--body);
}
.powiat-tag-primary {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
}
.powiat-tag-info {
  background: var(--info-soft);
  color: var(--info);
  font-weight: 600;
}
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.badge-ok {
  background: var(--primary-soft);
  color: var(--primary-ink);
}
.badge-warn {
  background: var(--amber-soft);
  color: var(--amber-ink);
}

/* --- Konto card --- */
.konto-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
  margin: 16px 0;
}
.konto-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.konto-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
}
.konto-number {
  font-family: ui-monospace, monospace;
  font-size: clamp(15px, 2.5vw, 21px);
  font-weight: 700;
  color: var(--primary-ink);
  letter-spacing: .04em;
  margin-bottom: var(--s2);
}
.konto-bank {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.konto-title {
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  margin-bottom: var(--s3);
}
.konto-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2);
}
.konto-warn {
  font-size: 12px;
  color: var(--amber-ink);
  line-height: 1.5;
  flex: 1;
}
.konto-warn a {
  color: var(--primary);
  font-weight: 600;
}
.konto-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.konto-btn:hover {
  background: var(--primary-soft);
}
.konto-source {
  font-size: 11px;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-2);
}
.konto-source a {
  color: var(--primary);
  text-decoration: underline;
}

/* --- Submit list (sposoby) --- */
.submit-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 16px 0;
}
.submit-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--s4);
  box-shadow: var(--shadow-xs);
}
.submit-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.submit-icon.green {
  background: var(--primary-soft);
}
.submit-icon.blue {
  background: var(--info-soft);
}
.submit-icon.gray {
  background: var(--surface-2);
}
.submit-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.submit-desc {
  font-size: 13px;
  color: var(--body);
  line-height: 1.6;
}
.submit-mono {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--ink);
  display: inline-block;
  margin-top: 4px;
}

/* --- Boxes, callouts --- */
.box {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-left: 3px solid;
  box-shadow: var(--shadow-xs);
  margin: 14px 0;
}
.box-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin-top: 1px;
}
.box-title {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 4px;
}
.box-text {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.65;
}
.box-text a {
  color: var(--primary);
  font-weight: 600;
}
.box-warning {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}
.box-warning .box-icon {
  background: var(--amber);
}
.box-danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.box-danger .box-icon {
  background: var(--danger);
}
.callout-neutral {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--body);
  margin: 12px 0;
  line-height: 1.65;
}

/* --- Useful links --- */
.useful-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--s4) 0;
}
.useful-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .14s, background .14s;
}
.useful-link:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  text-decoration: none;
}
.useful-link-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.useful-link-icon.green {
  background: var(--primary-soft);
}
.useful-link-icon.blue {
  background: var(--info-soft);
}
.useful-link-icon.gray {
  background: var(--surface-2);
}
.useful-link-body {
  flex: 1;
  min-width: 0;
}
.useful-link-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.useful-link-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.useful-link-ext {
  color: var(--primary);
  font-size: 16px;
  flex-shrink: 0;
}

/* --- Accordion (FAQ + Inne sprawy) unified --- */
.accordion-sprawy details,
.faq details {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  margin-bottom: 8px;
}
.accordion-sprawy details:last-child,
.faq details:last-child {
  margin-bottom: 0;
}
.accordion-sprawy summary,
.faq summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  list-style: none;
  transition: background .15s, color .15s;
}
.accordion-sprawy summary::-webkit-details-marker,
.faq summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .accordion-sprawy summary:hover,
  .faq summary:hover {
    background: var(--surface-3);
    color: var(--primary);
  }
}
.accordion-sprawy summary:focus-visible,
.faq summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r);
}
.accordion-sprawy summary::after,
.faq summary::after {
  content: "+";
  color: var(--primary);
  font-size: 20px;
  flex-shrink: 0;
  transform-origin: center;
  transition: transform .18s ease;
}
.accordion-sprawy details[open] summary::after,
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.accordion-sprawy .acc-body,
.faq .faq-body {
  padding: 14px 20px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body);
}

/* --- Pill navigation, next-step, CTA --- */
.pill-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s5) 0;
}
.pill-nav-link {
  display: inline-block;
  padding: 7px 16px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  font-size: 13px;
  color: var(--body);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.pill-nav-link:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.next-step-box {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s5);
  margin: var(--s8) 0 var(--s5);
}
.next-step-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
  display: block;
  margin-bottom: var(--s2);
}
.next-step-box h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.next-step-desc {
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
  margin: 0 0 var(--s4);
}
.next-step-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid rgba(31,95,63,.3);
}
.cta-block {
  background: linear-gradient(135deg, #0F2E20 0%, #143C2A 100%);
  border-radius: 14px;
  padding: 40px 32px;
  margin-top: 48px;
  text-align: center;
}
.cta-eye {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #7ED4A8;
  display: block;
  margin-bottom: 8px;
}
.cta-title {
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 8px;
}
.cta-body {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  margin: 0 0 20px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
.cta-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
}
.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  text-decoration: none;
}

/* --- Qbar --- */
.qbar {
  background: #F2F4F2;
  border-top: 1px solid #dde3de;
  border-bottom: 1px solid #dde3de;
  font-size: 12px;
  padding: 10px 0;
}
.qbar-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.qbar-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #4a5550;
}
.qbar-date {
  font-weight: 700;
  color: var(--ink);
}
.qbar-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 12px;
}
.qbar-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
}
@media (max-width:768px) {
  .qbar {
    display: none;
  }
}

/* --- Footer --- */
.footer {
  background: var(--footer-bg);
  color: #d7e0db;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 64px var(--px) 48px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 40px;
}
@media (max-width:860px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
@media (max-width:480px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}
.ft-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #fff;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 700;
}
.ft-dot {
  color: var(--nav-acc);
}
.ft-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: #b8c5bf;
  margin-bottom: 16px;
}
.ft-col-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.78);
  margin-bottom: 20px;
}
.ft-links {
  list-style: none;
}
.ft-links li {
  margin-bottom: 10px;
}
.ft-links a {
  color: #d7e0db;
  text-decoration: none;
  font-size: 13px;
  transition: color .12s;
}
.ft-links a:hover {
  color: #fff;
}
.ft-nl-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: #b8c5bf;
  margin-bottom: 12px;
}
.ft-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ft-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.ft-input::placeholder {
  color: rgba(255,255,255,.3);
}
.ft-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ft-nl-note {
  font-size: 11px;
  color: #8fa89e;
  margin-top: 8px;
}
.ft-nl-note a {
  color: #fff;
  text-decoration: underline;
}
.ft-legal {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 16px var(--px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.ft-legal-title {
  font-weight: 700;
  color: #b0c0b8;
  font-size: 12px;
  margin-bottom: 8px;
}
.ft-legal-text {
  font-size: 11.5px;
  color: #7a9085;
  line-height: 1.65;
}
.ft-bottom {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 10px var(--px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.ft-bottom-in {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #7a9085;
  flex-wrap: wrap;
  gap: 8px;
}
.ft-bottom-in a {
  color: #7a9085;
  text-decoration: none;
}
.ft-bottom-in a:hover {
  color: #c8d5ce;
}
@media (min-width:901px) {
  .footer-inner {
    gap: 40px 48px;
  }
  .ft-links a {
    white-space: nowrap;
  }
}

/* --- Header sticky, skip-link, hamburger, back-to-top, a11y --- */
.site-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 200;
}
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: #fff;
  padding: 6px 12px;
  text-decoration: none;
  z-index: 999;
  font-size: 13px;
  border-radius: 0 0 var(--r-sm) 0;
  transition: top .15s;
}
.skip-link:focus {
  top: 0;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: auto 0 auto auto;
  position: relative;
  z-index: 301;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: transform .2s ease, opacity .15s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media (max-width:860px) {
  /* ---- Przycisk hamburger (zamknięty) ---- */
  .menu-toggle {
    display: flex;
    width: 48px;
    height: 48px;
    margin: auto 0 auto auto;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 310;
  }
  .menu-toggle span {
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
  }

  /* ---- Domyślnie menu ukryte ---- */
  .navbar-nav {
    display: none;
  }

  /* ---- Overlay (otwarte menu) ---- */
  .navbar-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-nav);
    padding: 24px 24px 40px 24px;
    z-index: 300;
    overflow-y: auto;
    justify-content: flex-start;
  }

  /* ---- Logo i opis w overlayu ---- */
  .navbar-nav.open .mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-bottom: none;
    margin-bottom: 40px;
    margin-top: 20px;
    padding: 0;
  }
  .navbar-nav.open .mobile-brand .logo {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
    /* v8.9: nadpisanie dziedziczenia z .navbar-nav.open li a + .navbar-nav a global */
    width: auto;
    padding: 0;
    gap: 0;
    justify-content: center;
    align-items: center;
  }
  .navbar-nav.open .mobile-brand .logo em {
    color: var(--green-accent);
  }
  .navbar-nav.open .mobile-desc {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin-top: 6px;
    text-align: center;
  }

  /* ---- Linki w overlayu ---- */
  .navbar-nav.open li {
    border-left: none;
    width: 100%;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .navbar-nav.open li:last-child {
    border-bottom: none;
  }
  .navbar-nav.open li a {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 12px;
    padding: 14px 0;
    border-bottom: none;
  }
  .navbar-nav.open .nm {
    min-width: 70px;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
  }
  .navbar-nav.open .ns {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.7);
    font-weight: 400;
    margin-top: 0;
  }

  /* ---- Przycisk X (gdy menu otwarte) ---- */
  /* Uwaga: .menu-toggle jest poza .navbar-nav, więc nie używamy zagnieżdżenia */
  .menu-toggle[aria-expanded="true"] {
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    position: fixed;
    top: 24px;
    right: 24px;
    margin: 0;
    z-index: 310;
  }
  .menu-toggle[aria-expanded="true"] span {
    background: #fff;
  }

  /* ---- Ukrywanie elementów na mobile ---- */
  .navbar-cta {
    display: none;
  }
  .topbar-right {
    display: none;
  }
}

/* back-to-top */
.btt {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  z-index: 199;
  transition: background .14s;
}
.btt:hover {
  background: var(--primary-hover);
}
.btt.visible {
  display: flex;
}
/* a11y */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Status table --- */
.status-gdziezlozyc {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  margin: var(--s5) 0 var(--s6);
}
.status-gdziezlozyc table {
  width: 100%;
  border-collapse: collapse;
}
.status-gdziezlozyc th {
  font-size: 12px;
  font-weight: 600;
  color: #49564F;
  padding: 9px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-2);
  text-align: left;
  width: 45%;
}
.status-gdziezlozyc td {
  font-size: 13px;
  color: var(--ink);
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-2);
  border-left: 1px solid var(--border-2);
}
.status-gdziezlozyc tr:last-child th,
.status-gdziezlozyc tr:last-child td {
  border-bottom: none;
}

/* --- Copy button --- */
.copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.copy-val {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--surface-2);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--ink);
}
.copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 3px 10px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
}
.copy-btn:hover {
  background: var(--primary-soft);
}
.copy-btn.copied {
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-color: var(--primary);
}

/* --- Semantic helper classes --- */
.card-gap {
  margin: 16px 0;
}
.cc-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.cc-section-label-strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.cc-subtitle {
  font-size: 14px;
  font-weight: 400;
}
.cc-powiaty-block {
  margin-top: var(--s3);
}
.kontakt-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  margin-top: var(--s4);
}
@media (max-width: 720px) {
  .kontakt-cards-row {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}
/* ═══ EKOPŁATNIK v9.0 — 3 KARTY STATUSU ═══ */
.eko-status-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s5) 0 var(--s3);
}
.eko-status-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.eko-status-card-link {
  cursor: pointer;
  will-change: transform;
}
.eko-status-card-link:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.eko-status-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.eko-status-card-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.eko-status-card-desc {
  font-size: 13px;
  color: var(--body);
  line-height: 1.5;
}
.eko-status-card-link .eko-status-card-arrow {
  margin-top: auto;
  font-size: 14px;
  color: var(--primary);
  font-weight: 700;
}
.eko-status-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.eko-status-icon-ok { color: var(--primary); }
.eko-status-icon-no { color: var(--danger); }
.eko-status-icon-warn { color: var(--amber); }
@media (max-width: 720px) {
  .eko-status-cards {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
}
/* ═══ EKOPŁATNIK v9.0 — LISTA "CO PRZYGOTOWAĆ" ═══ */
.eko-prep-list {
  list-style: none;
  padding: 0;
  margin: var(--s3) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2) var(--s4);
}
.eko-prep-list li {
  padding: var(--s2) 0;
  font-size: 14px;
  color: var(--body);
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
}
.eko-prep-list li::before {
  content: "✓";
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .eko-prep-list {
    grid-template-columns: 1fr;
  }
}
/* ═══ EKOPŁATNIK v9.0 — ADRESY URL (bez linkowania) ═══ */
.eko-adresy {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  margin: var(--s3) 0;
  font-size: 14px;
  line-height: 1.8;
}
.eko-adresy strong {
  color: var(--ink);
  display: inline-block;
  min-width: 130px;
}
.eko-adresy code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
  border: 1px solid var(--border-2);
}
.eko-version-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px dashed var(--border-2);
}
/* ═══ EKOPŁATNIK v9.0 — 5 KROKÓW "JAK DZIAŁA" ═══ */
.eko-steps {
  list-style: none;
  counter-reset: eko-step;
  padding: 0;
  margin: var(--s4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.eko-steps li {
  counter-increment: eko-step;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border-2);
}
.eko-steps li:last-child {
  border-bottom: none;
}
.eko-steps li::before {
  content: counter(eko-step);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.eko-steps strong {
  display: block;
  color: var(--ink);
  font-size: 14.5px;
  margin-bottom: 4px;
}
.eko-steps span {
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.6;
}
/* ═══ EKOPŁATNIK v9.0 — MATRYCA PROBLEMÓW ═══ */
.eko-problemy {
  margin: var(--s4) 0;
  border-top: 1px solid var(--border-2);
}
.eko-problemy-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 14px;
  line-height: 1.6;
}
.eko-problemy-q {
  font-weight: 600;
  color: var(--ink);
}
.eko-problemy-a {
  color: var(--body);
}
.eko-problemy-a a {
  color: var(--primary);
  font-weight: 600;
}
@media (max-width: 720px) {
  .eko-problemy-row {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }
  .eko-problemy-q {
    font-size: 13.5px;
  }
}
/* ═══ EKOPŁATNIK v9.0 — CYTAT KOMUNIKATU SYSTEMU ═══ */
.eko-cytat {
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  font-style: italic;
  color: var(--body);
  font-size: 13.5px;
  line-height: 1.6;
}
.eko-cytat-label {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
/* ═══ EKOPŁATNIK v9.0 — BOX "LOGIN ≠ E-MAIL" ═══ */
.eko-login-note {
  margin: var(--s4) 0;
}
.eko-warto-zapisac {
  list-style: none;
  padding: 0;
  margin: var(--s2) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eko-warto-zapisac li {
  padding-left: var(--s3);
  position: relative;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
}
.eko-warto-zapisac li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.pill-nav-top {
  border-top: 1px solid var(--border-2);
  margin-top: 16px;
}
body.menu-open {
  overflow: hidden;
}
.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── domknięcie inline styles ── */
.hp-field{display:none}
.ft-msg{display:none;font-size:13px;font-weight:500;margin-top:6px}
.ft-msg.show{display:block}
/* Newsletter message feedback */
.ft-nl-msg { display: none; font-size: 12px; font-weight: 600; margin-top: 8px; line-height: 1.4;}
/* .ft-nl-ok i .ft-nl-err celowo usunięte: JS nadpisuje kolor inline przez msg.style.color */
/* Faktyczne kolory: success = var(--green) #5cb85c (7.53:1 AAA), error = #f87171 (z JS) */


.mobile-brand {
  display: none;
}
.navbar-nav .navbar-nav .mobile-brand,
.navbar-nav li.mobile-brand {
  display: none;
}

/* ===== POPRAWKI DLA MOBILNEGO MENU ===== */
@media (max-width:860px) {
  /* Przycisk hamburger (zamknięty) – zawsze okrągły */
  .menu-toggle {
    display: flex;
    width: 48px;
    height: 48px;
    margin: auto 0 auto auto;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 310;
  }
  .menu-toggle span {
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
  }

  /* Overlay (otwarte menu) */
  .navbar-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-nav);
    padding: 24px 24px 40px 24px;
    z-index: 300;
    overflow-y: auto;
    justify-content: flex-start;
  }

  /* Linki w overlayu – poziomie, bez zawijania */
  .navbar-nav.open li a {
    display: flex;
    flex-direction: row;      /* ← kluczowe: poziomo */
    flex-wrap: nowrap;        /* ← kluczowe: nie zawija */
    justify-content: flex-start;  /* v8.8: pozycje po lewej (override global center) */
    align-items: baseline;
    gap: 12px;
    padding: 14px 0;
    border-bottom: none;
  }
  .navbar-nav.open .nm {
    min-width: 70px;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    white-space: nowrap;
  }
  .navbar-nav.open .ns {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,.7);
    font-weight: 400;
    margin-top: 0;
  }

  /* Przycisk X (gdy menu otwarte) – fixed, odręczne pozycjonowanie */
  .menu-toggle[aria-expanded="true"] {
    position: fixed;
    top: 20px;
    right: 20px;
    margin: 0;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
    z-index: 310;
  }
}


/* ═══════════════════════════════════════════════════════════════ */
/* SZABLON v8.2 — NOWE KLASY                                       */
/* ═══════════════════════════════════════════════════════════════ */

/* ───── TOC w sidebar ───── */
.sb-toc { background: var(--primary-soft); }
.sb-toc .sb-box-title { color: var(--primary-ink); }
.sb-toc-list {
  list-style: none;
  counter-reset: toc;
  padding: 0;
  margin: 0;
}
.sb-toc-list li {
  counter-increment: toc;
  border-bottom: 1px solid rgba(31,95,63,0.10);
}
.sb-toc-list li:last-child { border-bottom: none; }
.sb-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  color: var(--primary-ink);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color .15s;
}
.sb-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  opacity: .65;
  min-width: 20px;
}
.sb-toc-list a:hover { color: var(--primary); }
.sb-toc-list a.active {
  color: var(--primary);
  font-weight: 600;
}

/* ───── #kanaly-zlozenia: karty (zielony/niebieski/pomarańczowy border-top) ───── */
/* Globalny scroll offset dla wszystkich kotwic (sticky header ~98px + luz) */
section[id] { scroll-margin-top: 120px; }

/* TOC active state - aktywna sekcja wyróżniona border-left + bold + color */
.sb-toc-list a.active {
  font-weight: 700;
  color: var(--primary);
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin-left: -15px;
}

.kanaly-tagline {
  margin-bottom: var(--s5);
  font-size: 15px;
  line-height: 1.55;
}
.kanaly-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s4) 0;
}
@media (max-width: 980px) {
  .kanaly-cards { grid-template-columns: repeat(2, 1fr); }
  .kanaly-cards > .kanaly-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .kanaly-cards { grid-template-columns: 1fr; }
  .kanaly-cards > .kanaly-card:last-child { grid-column: auto; }
}
.kanaly-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-top: 4px solid var(--muted);
  border-radius: var(--r);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.kanaly-card-low  { border-top-color: var(--primary); }
.kanaly-card-mid  { border-top-color: var(--amber); }
.kanaly-card-high { border-top-color: var(--info); }

.kanaly-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.kanaly-card-low  .kanaly-card-icon { background: var(--primary-soft); }
.kanaly-card-mid  .kanaly-card-icon { background: var(--amber-soft); }
.kanaly-card-high .kanaly-card-icon { background: var(--info-soft); }

.kanaly-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.kanaly-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: -8px;
}
.kanaly-card-mono-box {
  background: var(--primary-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  margin-top: 2px;
}
.kanaly-card-mono-box-amber { background: var(--amber-soft); }
.kanaly-card-high .kanaly-card-mono-box {
  background: var(--info-soft);
}
.kanaly-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.kanaly-card-mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.4;
}
.kanaly-card-mono-addr {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  word-break: normal;
}
.kanaly-card-copy {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s, color .15s, border-color .15s;
}
.kanaly-card-copy:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--border);
}
.kanaly-card-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: auto;
}

/* ───── Pasek EkoPłatnika - POD kartami ───── */
.ekoplatnik-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  margin-top: var(--s4);
  font-size: 14px;
  color: var(--body);
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.ekoplatnik-strip:hover {
  background: var(--surface);
  border-color: var(--border);
}
.ekoplatnik-strip-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
}
.ekoplatnik-strip-text { line-height: 1.5; }
.ekoplatnik-strip:hover .ekoplatnik-strip-text { color: var(--ink); }

/* ───── #oplata: karty kont (warianty 1/2/3/4) ───── */
.oplata-cards {
  display: grid;
  gap: var(--s4);
  margin: var(--s4) 0;
}
.oplata-cards-1 { grid-template-columns: 1fr; }
.oplata-cards-2 { grid-template-columns: repeat(2, 1fr); }
.oplata-cards-3 { grid-template-columns: repeat(3, 1fr); }
.oplata-cards-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) {
  .oplata-cards-2, .oplata-cards-3, .oplata-cards-4 {
    grid-template-columns: 1fr;
  }
}
.oplata-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.oplata-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.oplata-card-number {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--primary-ink);
  word-break: break-all;
}
.oplata-card-bank {
  font-size: 14px;
  color: var(--body);
}
.oplata-card-powiaty {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 4px;
}
.oplata-card-copy {
  align-self: flex-start;
  margin-top: var(--s2);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s, color .15s;
}
.oplata-card-copy:hover {
  background: var(--primary);
  color: #fff;
}
.oplata-tytul {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  font-size: 14px;
  line-height: 1.55;
  margin: var(--s4) 0;
}

/* ───── #kontakt: karta kontaktowa ───── */
.kontakt-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--s5);
  margin: var(--s4) 0;
}
.kontakt-card-title {
  font-size: 15px;
  line-height: 1.55;
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border-2);
}
.kontakt-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s4);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 14px;
}
.kontakt-row:last-of-type { border-bottom: none; }
@media (max-width: 600px) {
  .kontakt-row { grid-template-columns: 1fr; gap: 4px; }
}
.kontakt-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.kontakt-val { color: var(--body); }
.kontakt-val a { color: var(--primary); text-decoration: none; }
.kontakt-val a:hover { text-decoration: underline; }
.kontakt-zrodla {
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
  padding-top: var(--s3);
  margin-top: var(--s3);
  border-top: 1px solid var(--border-2);
  font-size: 13px;
}
.kontakt-zrodla a {
  color: var(--muted);
  text-decoration: none;
}
.kontakt-zrodla a:hover { color: var(--primary); }

/* ───── #progi: 3 karty z border-top w 3 kolorach ───── */
.prog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s5) 0;
}
@media (max-width: 768px) {
  .prog-cards { grid-template-columns: 1fr; }
}
.prog-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-top: 4px solid var(--muted);
  border-radius: var(--r);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prog-card-low  { border-top-color: var(--primary); }
.prog-card-mid  { border-top-color: var(--amber); }
.prog-card-high { border-top-color: var(--info); }
.prog-card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.prog-card-amount {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin: 4px 0 var(--s3);
}
.prog-card-low  .prog-card-amount { color: var(--primary); }
.prog-card-mid  .prog-card-amount { color: var(--amber); }
.prog-card-high .prog-card-amount { color: var(--info); }
.prog-card-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  flex-grow: 1;
}
.prog-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border-2);
}

/* ───── #procedura: 3 kroki lejka wyjścia ───── */
.proc-steps {
  list-style: none;
  counter-reset: proc;
  padding: 0;
  margin: var(--s5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.proc-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: var(--s5);
}
@media (max-width: 600px) {
  .proc-step { grid-template-columns: 44px 1fr; gap: var(--s3); padding: var(--s4); }
}
.proc-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}
.proc-step-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.35;
}
.proc-step-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: var(--s3);
}
.proc-step-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}
.proc-step-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.proc-step-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════ */
/* v8.3a — SIDEBAR SPÓJNOŚĆ + TOP ALIGNMENT                        */
/* ═══════════════════════════════════════════════════════════════ */

/* TOP ALIGNMENT — H2 #1 wyrównane z górną krawędzią sidebara */
.page-grid { align-items: start; }
.page-main > section:first-child,
.page-main > section:first-child > h2.t-h2 { margin-top: 0; }

/* SIDEBAR — jednolity tytuł boxu (oba boxy: TOC + Województwa) */
.sb-box-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--border-2);
}
.sb-toc .sb-box-title { color: var(--primary-ink); }

/* SIDEBAR — wspólne style linków (TOC + Województwa) */
.sb-toc-list a,
.sb-reg-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--body);
  text-decoration: none;
  padding: 8px 12px 8px 13px;
  border-left: 3px solid transparent;
  margin-left: -16px;
  margin-right: -16px;
  transition: color .15s, border-color .15s, background .15s;
}

/* SIDEBAR — hover (delikatny color shift, bez tła) */
.sb-toc-list a:hover,
.sb-reg-list a:hover {
  color: var(--primary);
}

/* SIDEBAR — active state UJEDNOLICONY (jak TOC: belka na krawędzi, bold, primary) */
.sb-toc-list a.active,
.sb-reg-list a.active {
  font-weight: 700;
  color: var(--primary);
  border-left-color: var(--primary);
 /* background: transparent; */
}

/* TOC — numerki ciaśniej (28px → 24px) */
.sb-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  opacity: .65;
  min-width: 24px;
}
.sb-toc-list a.active::before {
  opacity: 1;
}

/* Województwa — subtelny separator między pozycjami (16 elementów, czytelność) */
.sb-reg-list li {
  border-bottom: 1px solid rgba(20,26,22,0.04);
}
.sb-reg-list li:last-child {
  border-bottom: none;
}

/* TOC — separator między pozycjami w spójnym kolorze */
.sb-toc-list li {
  border-bottom: 1px solid rgba(31,95,63,0.08);
}
.sb-toc-list li:last-child {
  border-bottom: none;
}

/* ─── WCAG AA fix v8.3c: kontrast eyebrow w kartach kanałów ─── */
/* var(--muted) na jasnych tłach mono-box = 4.09:1 (fail AA) */
/* Per-card ink color = 7.43-10.93:1 (pass AAA) */
.kanaly-card-low  .kanaly-card-eyebrow { color: var(--primary-ink); }
.kanaly-card-mid  .kanaly-card-eyebrow { color: var(--amber-ink); }
.kanaly-card-high .kanaly-card-eyebrow { color: var(--info-ink); }

/* ─── v8.4: Sidebar Powiązane - wizualne dopięcie hierarchii ─── */
.sb-related {
  background: var(--surface-2);
  border: 1px solid var(--border-2);
}
.sb-related .sb-links-list a {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--body);
  text-decoration: none;
  display: block;
  padding: 8px 12px;
  margin-left: -16px;
  margin-right: -16px;
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.sb-related .sb-links-list a:hover {
  color: var(--primary);
}
.sb-related .sb-links-list a strong {
  color: var(--primary-ink);
}



/* ═══════════════════════════════════════════════════════════════
   MODUŁ DODATKOWY — komponenty spoza rdzenia (tabele, listy kroków,
   grid kafli regionalnych, newsletter-box, formularz pytań, itp.)
   Dołączać w  gdy strona faktycznie z nich korzysta.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ HUB-ONLY COMPONENTS ═══ */
.box-info { border-left-color: var(--info); background: var(--info-soft); }
.box-info .box-icon { background: var(--info); }

.sb-cta { background: var(--primary-soft); border: 1px solid rgba(31,95,63,.2); border-radius: var(--r); padding: var(--s4); margin-bottom: var(--s3); text-align: center; box-shadow: var(--shadow-xs); }
.sb-cta-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.sb-cta-desc { font-size: 12px; color: var(--body); line-height: 1.5; margin-bottom: var(--s3); }

.list { padding: 0; margin: 12px 0; list-style: none; }
.list li { position: relative; padding-left: 24px; padding-block: 4px; font-size: 15px; color: var(--body); line-height: 1.65; }
.list-bullet li::before { content: ""; position: absolute; left: 8px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }

.step-list { list-style: none; display: flex; flex-direction: column; gap: var(--s4); margin: 12px 0; }
.step-item { display: flex; align-items: flex-start; gap: var(--s4); }
.step-num { width: 28px; height: 28px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }
.step-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.step-desc { font-size: 14px; color: var(--body); line-height: 1.6; }
.step-desc a { color: var(--primary); font-weight: 600; }

.table-wrap { background: var(--surface); border-radius: var(--r); border: 1px solid var(--border-2); overflow: hidden; box-shadow: var(--shadow-xs); margin: 20px 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table thead th { background: var(--surface-2); color: var(--primary-ink); text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; padding: 13px 20px; border-bottom: 1px solid var(--border-2); }
.data-table tbody td { padding: 14px 20px; border-bottom: 1px solid var(--border-2); color: var(--body); vertical-align: top; line-height: 1.55; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(246,244,238,.6); }
.data-table a { color: var(--primary); font-weight: 600; }
.col-ok { color: #1F7A4F; font-weight: 700; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: 16px 0; }
@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
.col-card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); padding: var(--s4); box-shadow: var(--shadow-xs); }
.col-card-head { font-weight: 700; font-size: 13px; color: var(--ink); margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--border-2); }

.callout { padding: 14px 18px; border-radius: 0 var(--r) var(--r) 0; border-left: 3px solid transparent; margin: 12px 0; font-size: 14px; line-height: 1.65; color: var(--body); }
.callout-warning { background: var(--amber-soft); border-color: var(--amber); }
.callout-success { background: var(--primary-soft); border-color: var(--primary); }

/* VOIV GRID */
.voiv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s3); margin: 20px 0; }
.voiv { display: flex; flex-direction: column; gap: 6px; padding: var(--s4); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r); text-decoration: none; transition: border-color .15s, box-shadow .15s; box-shadow: var(--shadow-xs); }
.voiv:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.voiv-name { font-weight: 700; color: var(--ink); font-size: 14.5px; }
.voiv-city { font-size: 12px; color: #5a6660; }
.voiv-diff { font-size: 12px; color: var(--muted); line-height: 1.4; margin: 2px 0 4px; }
.voiv-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 12px; align-self: flex-start; margin-top: auto; }
.voiv-badge-standard { background: var(--primary-soft); color: var(--primary-ink); }
.voiv-badge-wlasny { background: var(--amber-soft); color: var(--amber-ink); }
.voiv-badge-zewnetrzny { background: var(--info-soft); color: var(--info-ink); }
.voiv-badge-brak { background: var(--surface-3); color: var(--muted); }
.voiv-no-sys { background: var(--surface-2); border-style: dashed; border-color: var(--border); }
.voiv-no-sys:hover { border-color: var(--muted); border-style: dashed; }
.voiv-no-sys .voiv-name { color: var(--muted); font-weight: 600; }
.voiv-no-sys .voiv-city { color: var(--muted-2, var(--muted)); }

/* NEWSLETTER BOX */
.newsletter-box { background: var(--surface); border: 1px solid var(--border-2); border-top: 3px solid var(--primary); border-radius: var(--r-lg); padding: var(--s5) var(--s6); margin: var(--s6) 0; box-shadow: var(--shadow-sm); }
.newsletter-box h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 var(--s2); letter-spacing: -.015em; }
.nl-desc { font-size: 14px; color: var(--body); line-height: 1.65; margin: 0 0 var(--s4); }
.nl-form { display: flex; gap: var(--s2); flex-wrap: wrap; }
.nl-input { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font); font-size: 14px; color: var(--ink); background: var(--surface); transition: border-color .15s; }
.nl-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,95,63,.1); }
.nl-input::placeholder { color: var(--muted); }
.nl-note { font-size: 12px; color: var(--muted); margin-top: var(--s2); }

/* QUESTION BOX */
.bw-question-box { margin-top: 48px; padding: 24px 28px; background: var(--surface-2); border: 1px solid var(--border-2); border-top: 3px solid var(--primary); border-radius: var(--r); }
.bw-question-box h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.bwq-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.bwq-form textarea { width: 100%; min-height: 100px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font); font-size: 14px; line-height: 1.5; background: var(--surface); resize: vertical; transition: border-color .15s; color: var(--ink); }
.bwq-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,95,63,.1); }
.bwq-form textarea::placeholder { color: var(--muted); }
.bwq-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.bwq-note { font-size: 12px; color: var(--muted); font-style: italic; flex: 1; }
.bwq-hp { display: none !important; }

/* BUTTONS (hub uses .btn-* naming) */
.btn { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font); font-weight: 600; font-size: 14px; line-height: 1; padding: 11px 20px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { padding: 14px 28px; font-size: 16px; border-radius: var(--r-lg); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   MODUŁ PILLAR PAGES — komponenty wyłącznie dla 6 stron filarowych
   (KTO, KIEDY, JAK, GDZIE, ILE/stawki, CO TO).
   Specyfikacja użycia: rozs-pillar-template.md.
   Dołączać w  tylko na stronach filarowych.
   ═══════════════════════════════════════════════════════════════ */

/* ───── TL;DR / Szybka odpowiedź — zawsze pierwszy element .page-main ───── */
.tldr-box {
  background: var(--primary-soft);
  border: 1px solid rgba(31,95,63,.2);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s5);
  margin: 0 0 var(--s6);
}
.tldr-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
  margin-bottom: var(--s2);
}
.tldr-box p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--primary-ink);
  margin: 0;
}
.tldr-box p + p { margin-top: var(--s2); }
.tldr-box strong { color: var(--primary-ink); }

/* ───── Aside w treści (.aside-box) — uzupełnienie, nie ostrzeżenie ─────
   Bliźniak .tldr-box: ta sama powierzchnia, border i typografia; różni się
   rolą (TL;DR = streszczenie na wejściu artykułu, aside = uzupełnienie
   w treści) i wymiennym eyebrow („Poza zakresem narzędzia", „Pamiętaj",
   „Wyjątek", „W praktyce"...). Komponent neutralny — nie zmienia znaczenia
   kanonicznego .box-info (informacja systemowa na str. EkoPłatnika). */
.aside-box {
  background: var(--primary-soft);
  border: 1px solid rgba(31,95,63,.2);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s5);
  margin: var(--s5) 0;
}
.aside-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
  margin-bottom: var(--s2);
}
.aside-box p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}
.aside-box p + p { margin-top: var(--s2); }
.aside-box strong { color: var(--primary-ink); }

/* ───── Sidebar: Etapy rozliczenia (.sb-process) ─────
   Wariant procesowy boxa sidebara — zastępuje .sb-related na stronach
   filarowych. 5 pozycji proceduralnych, NIGDY CO TO. Bieżąca strona:
   <span class="sb-step-current" aria-current="page">, bez linku. */
.sb-process { background: var(--surface); border: 1px solid var(--border-2); }
.sb-process .sb-box-title { color: var(--primary-ink); }
.sb-process-list {
  list-style: none;
  counter-reset: stage;
  padding: 0;
  margin: 0;
}
.sb-process-list li {
  counter-increment: stage;
  border-bottom: 1px solid var(--border-2);
}
.sb-process-list li:last-child { border-bottom: none; }
.sb-process-list a,
.sb-process-list .sb-step-current {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
}
.sb-process-list a { color: var(--body); transition: color .15s; }
.sb-process-list a:hover { color: var(--primary); }
.sb-process-list a::before,
.sb-process-list .sb-step-current::before {
  content: counter(stage);
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  opacity: .65;
  min-width: 16px;
}
.sb-process-list .sb-step-current {
  color: var(--primary-ink);
  font-weight: 700;
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  padding-right: 8px;
  margin-left: -15px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.sb-process-list .sb-step-current::before { opacity: 1; }

/* ───── Siatka pozostałych etapów (.stage-grid) — sekcja końcowa ─────
   3 kafle na stronach proceduralnych (5 − bieżąca − etap z .next-step-box),
   4 kafle na stronie CO TO. Wyłącznie etapy proceduralne. */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3);
  margin: var(--s5) 0;
}
.stage-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.stage-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.stage-kicker {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--primary);
}
.stage-name { font-weight: 700; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.stage-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.stage-card .stage-go {
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
}

/* ───── Box pojęciowy (.concept-box) — link do CO TO ─────
   Na stronach proceduralnych, pod .stage-grid. Ramka przerywana =
   sygnał "tło/pojęcie, nie etap" (wzorzec spójny z .voiv-no-sys).
   Nie występuje na stronie CO TO. */
.concept-box {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: var(--s4) var(--s5);
  margin: var(--s4) 0 var(--s5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.concept-box-text { font-size: 13.5px; color: var(--body); line-height: 1.55; }
.concept-box-text strong { color: var(--ink); }
.concept-box a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(31,95,63,.3);
}
.concept-box a:hover { color: var(--primary-hover); }

/* ───── Warstwa narzędzia (.tool-section) — 0..1 na stronę ─────
   Pełnoszerokościowa sekcja interaktywnego narzędzia (checker, kalkulator,
   wyszukiwarka) WEWNĄTRZ <main>, między breadcrumbem a .page-grid.
   Bez H2 (etykieta = .tool-eyebrow + .tool-title), nie występuje w ToC.
   Kotwica: id = nazwa narzędzia (#checker, #kalkulator, #wyszukiwarka).
   Zasady użycia: rozs-pillar-template.md §4a. */
.tool-section {
  background: var(--surface-2);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding: 56px 0 64px;
  scroll-margin-top: 120px;
}
.tool-section + .page-grid { padding-top: 72px; }
.tool-section-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
}
.tool-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--primary);
  margin-bottom: var(--s2);
}
.tool-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 var(--s2);
}
.tool-lead {
  font-size: 15px;
  color: var(--body);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 var(--s5);
}
.tool-mount { max-width: 640px; }
.tool-mount--wide { max-width: 920px; }
.tool-section--center .tool-section-in { text-align: center; }
.tool-section--center .tool-lead { margin-left: auto; margin-right: auto; }
.tool-section--center .tool-mount { margin-left: auto; margin-right: auto; text-align: left; }


/* ═══════════════════════════════════════════════════════════════════════
   moduł kalkulator Mg (widget na /baza-wiedzy/przeliczanie-litrow-na-megagramy/)
   źródło: widget.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   MODUŁ KALKULATOR (widget przeliczania litrów/m³/kg na Mg)
   Dołącz razem z rdzeniem rozs-master.css.
   Zależy od tokenów --primary, --primary-soft, --primary-ink, --surface,
   --surface-2, --surface-3, --border, --border-2, --ink, --body, --muted,
   --danger, --danger-soft, --info, --info-soft, --info-ink, --amber,
   --shadow-xs, --shadow-sm, --r, --r-sm, --r-lg, --s2..--s6, --max-w, --px, --font.
   ═══════════════════════════════════════════════════════════════════ */

/* Sekcja narzędzia — pełna szerokość, kontrastowe tło */
.tool-section { background: var(--surface-2); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); padding: 56px 0 64px; scroll-margin-top: 120px; }
.tool-section-in { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.tool-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); margin-bottom: var(--s2); }
.tool-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0 0 var(--s2); }
.tool-lead { font-size: 15px; color: var(--body); line-height: 1.6; max-width: 720px; margin: 0 0 var(--s6); }

/* Karta narzędzia — stałowymiarowa */
.tool-calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; min-height: 520px; display: flex; flex-direction: column; }

/* Zakładki */
.tool-calc-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-3); }
.tool-calc-tab { flex: 1; padding: 14px var(--s5) 16px; background: transparent; border: none; cursor: pointer; text-align: left; border-bottom: 3px solid transparent; transition: background .15s, border-color .15s; font-family: var(--font); }
.tool-calc-tab:hover { background: rgba(20,26,22,0.03); }
.tool-calc-tab.is-active { background: var(--surface); border-bottom-color: var(--primary); box-shadow: var(--shadow-xs); }
.tool-calc-tab-kicker { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 2px; }
.tool-calc-tab.is-active .tool-calc-tab-kicker { color: var(--primary); }
.tool-calc-tab-label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tool-calc-tab.is-active .tool-calc-tab-label { font-weight: 700; }
.tool-calc-tab-meta { display: block; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .02em; margin-top: 3px; }

/* Body */
.tool-calc-body { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.tool-calc-col { padding: var(--s6); display: flex; flex-direction: column; min-width: 0; }
.tool-calc-col + .tool-calc-col { border-left: 1px solid var(--border-2); background: var(--surface-2); }

/* Formularz */
.tool-calc-form { display: flex; flex-direction: column; gap: var(--s5); }
.tool-calc-field { display: flex; flex-direction: column; gap: var(--s2); }
.tool-calc-field-label { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.tool-calc-select, .tool-calc-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.tool-calc-select:focus, .tool-calc-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.tool-calc-select:disabled, .tool-calc-input:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
.tool-calc-input.is-invalid { border-color: var(--danger); background: var(--danger-soft); }
.tool-calc-input.is-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(180,63,46,.15); }
.tool-calc-field-error { font-size: 12px; color: var(--danger); font-weight: 600; line-height: 1.4; display: flex; align-items: center; gap: 6px; }
.tool-calc-field-error svg { flex-shrink: 0; }
.tool-calc-input-wrap { position: relative; }
.tool-calc-input { padding-right: 100px; }
.tool-calc-input-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; background: var(--surface); padding-left: 8px; }
.tool-calc-input.is-invalid + .tool-calc-input-suffix { background: var(--danger-soft); }
.tool-calc-field-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.tool-calc-submit { align-self: flex-start; padding: 12px 24px; background: var(--primary); color: white; border: none; border-radius: var(--r-sm); font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; margin-top: var(--s3); }
.tool-calc-submit:hover:not(:disabled) { background: var(--primary-hover); }
.tool-calc-submit:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }

/* Kontekst */
.tool-calc-context-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: var(--s4); }
.tool-calc-context-item + .tool-calc-context-item { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-2); }
.tool-calc-context-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.tool-calc-context-value { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.2; font-variant-numeric: tabular-nums; }
.tool-calc-context-caption { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 4px; letter-spacing: .01em; }
.tool-calc-context-formula { font-family: var(--font); font-size: 14px; color: var(--primary-ink); background: var(--primary-soft); padding: 8px 12px; border-radius: var(--r-sm); display: inline-block; font-variant-numeric: tabular-nums; }
.tool-calc-context-source { font-size: 13px; color: var(--body); line-height: 1.5; white-space: pre-line; }
.tool-calc-context-empty { color: var(--muted); font-style: italic; font-size: 14px; margin-top: var(--s5); }

.tool-calc-source-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.tool-calc-source-link:hover { border-bottom-color: var(--primary); }
.tool-calc-source-link::after { content: " →"; }

/* Wynik */
.tool-calc-result-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: var(--s4); }
.tool-calc-result-breakdown { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s4); margin-bottom: var(--s5); border-left: 3px solid var(--border); }
.tool-calc-result-row { font-size: 15px; color: var(--body); line-height: 1.6; font-variant-numeric: tabular-nums; }
.tool-calc-result-row + .tool-calc-result-row { margin-top: 6px; }
.tool-calc-result-row.is-calc { color: var(--ink); }
.tool-calc-result-row.is-final { font-weight: 600; color: var(--primary-ink); }
.tool-calc-verdict { background: var(--primary-soft); border: 1px solid rgba(31,95,63,.2); border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.tool-calc-verdict-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); margin-bottom: 2px; }
.tool-calc-verdict-value { font-size: clamp(32px, 4.4vw, 40px); font-weight: 700; color: var(--primary-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tool-calc-verdict-note { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 6px; letter-spacing: .01em; }
.tool-calc-reset { align-self: flex-start; background: transparent; color: var(--body); border: 1px solid var(--border); padding: 10px 18px; border-radius: var(--r-sm); font-family: var(--font); font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.tool-calc-reset:hover { background: var(--surface-2); border-color: var(--muted); }

/* Następny krok */
.tool-calc-next-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); margin-bottom: var(--s2); }
.tool-calc-next-title { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: var(--s3); }
.tool-calc-next-body { font-size: 14px; color: var(--body); line-height: 1.6; margin-bottom: var(--s5); }
.tool-calc-next-cta { display: inline-flex; align-items: center; gap: var(--s2); padding: 12px 20px; background: var(--primary); color: white; text-decoration: none; border-radius: var(--r-sm); font-weight: 600; font-size: 15px; transition: background .15s; }
.tool-calc-next-cta:hover { background: var(--primary-hover); }
.tool-calc-next-secondary { display: inline-block; margin-top: var(--s4); color: var(--primary); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

.tool-calc-provenance { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--border-2); }
.tool-calc-provenance-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
.tool-calc-provenance-value { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.tool-calc-provenance-source { font-size: 12px; color: var(--body); line-height: 1.5; }

/* Info-box (gaz ziemny) */
.tool-calc-info { background: var(--info-soft); border-left: 3px solid var(--info); border-radius: var(--r-sm); padding: var(--s5); }
.tool-calc-info-title { font-size: 15px; font-weight: 700; color: var(--info-ink); margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2); }
.tool-calc-info-title svg { flex-shrink: 0; }
.tool-calc-info-body { font-size: 14px; color: var(--info-ink); line-height: 1.6; }
.tool-calc-info-body p + p { margin-top: var(--s3); }

/* Pasek statusu */
.tool-calc-status { background: var(--surface-3); padding: 12px var(--s5); border-top: 1px solid var(--border-2); display: flex; align-items: center; gap: var(--s3); font-size: 13px; color: var(--body); }
.tool-calc-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.tool-calc-status.is-ready .tool-calc-status-dot { background: var(--amber); }
.tool-calc-status.is-done .tool-calc-status-dot { background: var(--primary); }

/* Stopka narzędzia */
.tool-calc-footer { max-width: var(--max-w); margin: var(--s4) auto 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.tool-calc-footer-block + .tool-calc-footer-block { margin-top: var(--s3); }
.tool-calc-footer-heading { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--body); margin-bottom: 3px; }

/* Responsive */
@media (max-width: 720px) {
  .tool-section { padding: 40px 0 48px; }
  .tool-calc-tabs { flex-direction: column; }
  .tool-calc-tab { padding: 12px var(--s4); }
  .tool-calc-body { grid-template-columns: 1fr; }
  .tool-calc-col + .tool-calc-col { border-left: none; border-top: 1px solid var(--border-2); }
  .tool-calc-col { padding: var(--s5); }
  .tool-calc-verdict-value { font-size: 34px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   moduł scenariusze 4 kart (na /co-skladac/)
   źródło: scenarios.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   MODUŁ SCENARIUSZE (4 karty decyzyjne dla /co-skladac/)
   Dołącz razem z rdzeniem rozs-master.css.
   ═══════════════════════════════════════════════════════════════════ */

/* Sekcja wrapper — full-width tło surface-2, jak tool-section */
.scenarios-section { background: var(--surface-2); border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2); padding: 56px 0 64px; scroll-margin-top: 120px; }
.scenarios-in { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.scenarios-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--primary); margin-bottom: var(--s2); }
.scenarios-title { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0 0 var(--s2); }
.scenarios-lead { font-size: 15px; color: var(--body); line-height: 1.6; max-width: 720px; margin: 0 0 var(--s6); }

/* Grid 2×2 na desktop, stack na mobile */
.scenarios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-bottom: var(--s6); }
@media (max-width: 720px) {
  .scenarios-section { padding: 40px 0 48px; }
  .scenarios-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* Karta — wspólne */
.scn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s5) var(--s5) var(--s4); display: flex; flex-direction: column; min-height: 340px; position: relative; overflow: hidden; }
.scn-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--muted); }
.scn-card-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 4px; }
.scn-card-range { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.15; margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.scn-card-label { font-size: 14px; font-weight: 600; color: var(--body); margin-bottom: var(--s4); }
.scn-card-when { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.scn-card-when-text { font-size: 13px; color: var(--body); line-height: 1.5; margin-bottom: var(--s4); }
.scn-card-checklist { list-style: none; margin: 0 0 var(--s5); padding: 0; font-size: 13.5px; color: var(--body); line-height: 1.55; }
.scn-card-checklist li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.scn-card-checklist li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; opacity: .15; }
.scn-card-checklist li.chk::before { content: "✓"; opacity: 1; background: transparent; color: var(--primary); font-weight: 700; font-size: 14px; line-height: 1; top: 3px; left: 2px; }
.scn-card-checklist li.no::before { content: "—"; opacity: 1; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; line-height: 1; top: 2px; left: 0; }
.scn-card-cta { margin-top: auto; }
.scn-card-cta-primary { display: inline-flex; align-items: center; gap: var(--s2); padding: 11px 18px; background: var(--primary); color: white; text-decoration: none; border-radius: var(--r-sm); font-weight: 600; font-size: 14px; transition: background .15s; }
.scn-card-cta-primary:hover { background: var(--primary-hover); }
.scn-card-cta-note { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: .01em; }
.scn-card-cta-secondary { display: inline-block; margin-top: 8px; color: var(--primary); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Warianty kolorystyczne — subtelny lewy pasek + tło hero */
.scn-card.tone-gray::before   { background: var(--muted); }
.scn-card.tone-amber::before  { background: var(--amber); }
.scn-card.tone-bursztyn::before { background: #C9871F; }
.scn-card.tone-green::before  { background: var(--primary); }

.scn-card.tone-gray   .scn-card-kicker { color: var(--muted); }
.scn-card.tone-amber  .scn-card-kicker { color: var(--amber-ink); }
.scn-card.tone-bursztyn .scn-card-kicker { color: #6E4509; }
.scn-card.tone-green  .scn-card-kicker { color: var(--primary); }

.scn-card.tone-amber .scn-card-cta-primary { background: var(--amber); color: white; }
.scn-card.tone-amber .scn-card-cta-primary:hover { background: var(--amber-ink); }
.scn-card.tone-bursztyn .scn-card-cta-primary { background: #B4791B; color: white; }
.scn-card.tone-bursztyn .scn-card-cta-primary:hover { background: #8A5C15; }
.scn-card.tone-gray .scn-card-cta-primary { background: var(--body); color: white; }
.scn-card.tone-gray .scn-card-cta-primary:hover { background: var(--ink); }

/* Callout warn pod kartami */
.scn-warn-hl { max-width: var(--max-w); margin: var(--s5) auto 0; padding: 0 var(--px); }
.scn-warn-hl-inner { background: var(--amber-soft); border-left: 3px solid var(--amber); border-radius: var(--r-sm); padding: var(--s4) var(--s5); font-size: 14px; color: var(--amber-ink); line-height: 1.6; }
.scn-warn-hl-inner strong { color: var(--amber-ink); }
.scn-warn-hl-inner .warn-sub { display: block; margin-top: 6px; font-size: 13px; opacity: .85; }

/* Boxy produktowe PDF w sekcji #oswiadczenia */
.pdf-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s5) 0 var(--s6); }
@media (max-width: 720px) { .pdf-box-grid { grid-template-columns: 1fr; } }
.pdf-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: var(--s5); display: flex; flex-direction: column; box-shadow: var(--shadow-xs); }
.pdf-box-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); margin-bottom: var(--s3); }
.pdf-box-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; margin-bottom: var(--s2); }
.pdf-box-desc { font-size: 13.5px; color: var(--body); line-height: 1.55; margin: 0 0 var(--s4); flex: 1; }
.pdf-box-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--primary); color: white; text-decoration: none; border-radius: var(--r-sm); font-weight: 600; font-size: 13.5px; align-self: flex-start; transition: background .15s; }
.pdf-box-cta:hover { background: var(--primary-hover); color: white; }

/* Checklista pól do wypełnienia */
.fill-list { margin: var(--s3) 0 var(--s4); padding-left: 0; list-style: none; }
.fill-list li { padding: 4px 0 4px 22px; position: relative; font-size: 14px; color: var(--body); line-height: 1.55; }
.fill-list li::before { content: "✓"; position: absolute; left: 0; top: 4px; color: var(--primary); font-weight: 700; }

/* Wyróżniona zasada w sekcji #suma */
.rule-highlight { background: var(--primary-soft); border-left: 3px solid var(--primary); border-radius: var(--r-sm); padding: var(--s4) var(--s5); font-size: 14px; color: var(--ink); line-height: 1.6; margin: var(--s4) 0; }
.rule-highlight strong { color: var(--primary-ink); }


/* ═══════════════════════════════════════════════════════════════════════
   moduł artykuł bazy wiedzy (na /baza-wiedzy/* i częściowo /gdzie/*)
   źródło: baza-wiedzy-article.css
   ═══════════════════════════════════════════════════════════════════════ */

/* CSS wyekstraktowany ze strony /baza-wiedzy/zaswiadczenie-o-niezaleganiu/
   (inline  ze strony sprzed migracji)
   Do porównania z rozs.css i wyekstrahowania nowego modułu.
   
   USUNIĘTE bloki duplikujące rdzeń rozs-master.css:
   - V5b site-header sticky (jest w rdzeniu)
   - skip-link (jest w rdzeniu)
   - menu-toggle + spans + animacje (jest w rdzeniu z media query max-width:860px)
   - page-hero-in, hero-content-col, hero-watermark, hw-big, hw-meta (jest w rdzeniu z media 768px)
   - btt (back-to-top) (jest w rdzeniu)
   - :focus-visible (jest w rdzeniu)
   
   Duplikaty łamały mobile (bez @media nadpisywały prawidłowe reguły rdzenia). */

/* ═══ V3: status-table (gdzie-zlozyc) ══════════════════════════ */
.status-gdziezlozyc{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-xs);margin:var(--s5) 0 var(--s6)}
.status-gdziezlozyc table{width:100%;border-collapse:collapse}
.status-gdziezlozyc th{font-size:12px;font-weight:600;color:#49564F;padding:9px 14px;background:var(--surface-2);border-bottom:1px solid var(--border-2);text-align:left;width:52%}
.status-gdziezlozyc td{font-size:13px;color:var(--ink);padding:9px 14px;border-bottom:1px solid var(--border-2);border-left:1px solid var(--border-2)}
.status-gdziezlozyc tr:last-child th,.status-gdziezlozyc tr:last-child td{border-bottom:none}
.copy-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.copy-val{font-family:ui-monospace,monospace;font-size:12.5px;background:var(--surface-2);padding:3px 8px;border-radius:4px;color:var(--ink)}
.copy-btn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);padding:3px 10px;font-family:var(--font);font-size:11px;font-weight:600;color:var(--primary);cursor:pointer;transition:background .12s;white-space:nowrap}
.copy-btn:hover{background:var(--primary-soft)}
.copy-btn.copied{color:var(--primary-ink);background:var(--primary-soft);border-color:var(--primary)}
.konto-source{font-size:11px;color:var(--muted);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--border-2)}
.konto-source a{color:var(--primary)}

/* ═══ ACCORDION Pozostałe sprawy ═══ */
.accordion-sprawy{margin:var(--s4) 0}
.accordion-sprawy details{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);margin-bottom:8px}
.accordion-sprawy summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:14.5px;color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between}
.accordion-sprawy summary::-webkit-details-marker{display:none}
.accordion-sprawy summary::after{content:"+";font-weight:400;font-size:20px;color:var(--primary);flex-shrink:0}
.accordion-sprawy details[open] summary::after{content:"−"}
.accordion-sprawy details[open] summary{border-bottom:1px solid var(--border-2)}
.accordion-sprawy .acc-body{padding:14px 18px 18px;font-size:14px;color:var(--body);line-height:1.7}
.accordion-sprawy .acc-body a{color:var(--primary);font-weight:600}

/* ═══ USEFUL LINKS ═══ */
.useful-links{display:flex;flex-direction:column;gap:8px;margin:var(--s4) 0}
.useful-link{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);text-decoration:none;transition:border-color .14s,background .14s}
.useful-link:hover{border-color:var(--primary);background:var(--primary-soft);text-decoration:none}
.useful-link-icon{width:32px;height:32px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.useful-link-icon.green{background:var(--primary-soft)}
.useful-link-icon.blue{background:var(--info-soft)}
.useful-link-icon.gray{background:var(--surface-2)}
.useful-link-body{flex:1;min-width:0}
.useful-link-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.useful-link-title{font-size:14px;font-weight:600;color:var(--ink)}
.useful-link-ext{color:var(--primary);font-size:16px;flex-shrink:0}

/* ═══ BAZA WIEDZY: layout artykułu ═══════════════════════════ */
.hero-lead{max-width:640px!important}
.article-wrap{max-width:var(--max-w);margin:var(--s5) auto 0;padding:var(--s6) var(--px) var(--s9);display:grid;grid-template-columns:260px 1fr;gap:var(--s8);align-items:start}
.article-body{min-width:0}
.article-sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.intro-box{background:var(--primary-soft);border-left:4px solid var(--primary);border-radius:var(--r);padding:var(--s4) var(--s5);margin-bottom:var(--s6);font-size:14.5px;line-height:1.7;color:var(--ink)}
.content-ul{list-style:none;padding:0;margin:var(--s3) 0 var(--s4)}
.content-ul li{position:relative;padding-left:20px;margin-bottom:var(--s2);font-size:14.5px;line-height:1.65;color:var(--body)}
.content-ul li::before{content:"→";position:absolute;left:0;color:var(--primary);font-weight:700}
.content-table{width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:13.5px}
.content-table th{background:var(--surface-2);border-bottom:2px solid var(--border-1);text-align:left;padding:10px 14px;font-weight:600;color:var(--ink)}
.content-table td{padding:10px 14px;border-bottom:1px solid var(--border-2);color:var(--body);vertical-align:top}
.content-table tr:last-child td{border-bottom:none}

/* Article FAQ */
.article-faq{margin:var(--s5) 0}
.article-faq details{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);margin-bottom:8px}
.article-faq summary{cursor:pointer;padding:13px 18px;font-weight:600;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.article-faq summary::-webkit-details-marker{display:none}
.article-faq summary::after{content:"+";font-weight:400;font-size:20px;color:var(--primary)}
.article-faq details[open] summary::after{content:"−"}
.article-faq details[open] summary{border-bottom:1px solid var(--border-2)}
.article-faq .faq-ans{padding:12px 18px 16px;font-size:14px;line-height:1.7;color:var(--body)}
.article-faq .faq-ans a{color:var(--primary);font-weight:600}

/* Ask-box (Baza wiedzy wersja) */
.ask-box{background:var(--surface);border:1px solid var(--border-2);border-top:3px solid var(--primary);border-radius:var(--r);padding:var(--s5);margin:var(--s6) 0}
.bwq-desc{font-size:13.5px;color:var(--muted);margin:4px 0 var(--s4);line-height:1.55}
.bwq-form{display:flex;flex-direction:column;gap:var(--s3)}
.bwq-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.bwq-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-family:var(--font);font-size:14px;color:var(--ink);resize:vertical;min-height:100px}
.bwq-form textarea:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.bwq-bottom{display:flex;align-items:flex-start;gap:var(--s4);margin-top:var(--s3)}
.bwq-note{flex:1;font-size:12.5px;color:var(--muted);font-style:italic;line-height:1.5}
.bwq-btn{background:var(--primary);color:#fff;border:none;border-radius:var(--r-sm);padding:12px 28px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;min-width:180px;transition:background .14s}
.bwq-btn:hover{background:var(--primary-hover)}
.bwq-msg{padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-size:13.5px;margin-top:var(--s3)}
.bwq-success{background:var(--primary-soft);color:var(--primary)}
.bwq-error{background:#fee2e2;color:#b91c1c}

/* Sidebar TOC + CTA + Links */
.sidebar-toc{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:16px 18px}
.sidebar-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc-list{list-style:none;padding:0;margin:0}
.toc-list li{border-left:2px solid transparent;margin-bottom:2px;transition:border-color .15s}
.toc-list li.toc-active{border-left:3px solid var(--ink);background:rgba(0,0,0,.03);border-radius:0 var(--r-sm) var(--r-sm) 0}
.toc-link{display:block;padding:6px 10px;font-size:13px;color:var(--muted);text-decoration:none;line-height:1.4;transition:color .12s}
.toc-link:hover{color:var(--ink)}
.toc-list li.toc-active .toc-link{color:var(--ink);font-weight:700}
.sidebar-cta{background:var(--primary-soft,#edf7f0);border:1px solid rgba(28,62,45,.2);border-radius:var(--r);padding:16px 18px;text-align:center;box-shadow:0 1px 4px rgba(28,62,45,.08)}
.sidebar-cta-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.sidebar-cta-desc{font-size:12.5px;color:#555F5A;line-height:1.5;margin-bottom:12px}
.sidebar-cta-btn{display:block;background:var(--primary);color:#fff;border-radius:var(--r-sm);padding:10px 16px;font-size:13px;font-weight:700;text-decoration:none;transition:background .14s}
.sidebar-cta-btn:hover{background:#2d6040;text-decoration:none}
.sidebar-links{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:16px 18px}
.sidebar-links-list{list-style:none;padding:0;margin:8px 0 0}
.sidebar-links-list li{border-bottom:1px solid var(--border-2)}
.sidebar-links-list li:last-child{border-bottom:none}
.sidebar-links-list a{display:block;padding:7px 0;font-size:13px;color:var(--body);text-decoration:none;transition:color .12s}
.sidebar-links-list a:hover{color:var(--primary)}

/* Article body — scroll offset dla kotwic */
.article-body h2[id]{scroll-margin-top:88px}

/* Responsive dla artykułów */
@media(max-width:960px){
  .article-wrap{grid-template-columns:1fr}
  .article-sidebar{position:static;order:2}
  .sidebar-toc{display:none}
}

/* ═══ BOX-WARNING — pełna ramka (przekrywa dyskretną wersję z rdzenia) ═══
   Efekt: wszystkie strony używające .box-warning dostają wyraźną
   pomarańczową ramkę + jaśniejsze tło + większy padding. Do dublowania
   z rdzeniem — do posprzątania w etapie C. */
.box-warning{display:flex;gap:var(--s3);background:#fffbeb;border:1px solid #f59e0b;border-radius:var(--r);padding:var(--s4) var(--s5);margin:var(--s4) 0}
.box-warning .box-icon{font-size:20px;flex-shrink:0;line-height:1.5}
.box-warning .box-text{font-size:14px;line-height:1.7;color:var(--ink)}

/* ═══ DECISION BOXES — dwa scenariusze decyzyjne (Nie miałeś / Miałeś obowiązek) ═══
   Używane w sekcji "Co urząd sprawdzi" na stronie zaświadczenia. */
.decision-boxes-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s5) 0}
@media(max-width:720px){.decision-boxes-grid{grid-template-columns:1fr}}
.decision-box{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column}
.decision-box-neutral{border-left:4px solid var(--primary)}
.decision-box-warning{border-left:4px solid #f59e0b}
.decision-box-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.3}
.decision-box-desc{font-size:14px;color:var(--body);margin:0 0 var(--s3);line-height:1.55}
.decision-box-list{list-style:none;padding:0;margin:0 0 var(--s4);font-size:13.5px;color:var(--body);line-height:1.6}
.decision-box-list li{padding-left:20px;position:relative;margin-bottom:4px}
.decision-box-list li::before{content:"→";position:absolute;left:0;color:var(--muted);font-weight:700}
.decision-box-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:var(--s3);row-gap:8px}
.decision-box-link{color:var(--primary);font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(31,95,63,.3);padding-bottom:2px;transition:border-color .15s}
.decision-box-link:hover{border-bottom-color:var(--primary)}

/* ═══ LEGAL BASIS BOX — dyskretny box z podstawą prawną ═══
   Umieszczany na końcu strony przed FAQ lub CTA. */
.legal-basis-box{background:var(--surface-2);border-left:3px solid var(--muted);border-radius:var(--r-sm);padding:var(--s4) var(--s5);margin:var(--s5) 0}
.legal-basis-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.legal-basis-list{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--ink);line-height:1.85}
.legal-basis-list li{padding-left:16px;position:relative}
.legal-basis-list li::before{content:"•";position:absolute;left:0;color:var(--muted);font-weight:700}

/* ═══ CHECK-TABLE — tabela-checklista z checkboxami ═══
   Wariant .content-table z centrowaną kolumną checkboxów. */
.check-table td:nth-child(2),
.check-table th:nth-child(2){text-align:center;vertical-align:middle;font-size:16px;color:var(--muted)}
.check-table td:nth-child(3){font-size:13px;color:var(--muted);font-style:italic}