/* Nakazowe.pl — strona informacyjna
   Tokeny: tokeny-designu.json (27.10.2026). Bez zewnętrznych zasobów (CSP: tylko własna domena).
   Inter: jeśli zostanie osadzony z własnej domeny, odkomentuj @font-face poniżej. */

/*
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-roman.var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
*/

:root {
  --glowny: #0284c7;
  --glowny-hover: #0369a1;
  --odnosnik: #0369a1;
  --granat: #0f172a;
  --granat-hover: #1e293b;
  --logo-granat: #1f2a44;
  --czerwien: #dc2626;
  --tlo: #f8fafc;
  --karta: #ffffff;
  --obramowanie: #e2e8f0;
  --obramowanie-pola: #cbd5e1;
  --tekst: #1e293b;
  --naglowek: #0f172a;
  --pomocniczy: #64748b;
  --drugorzedny: #94a3b8;
  --zaznaczenie: #f0f9ff;
  --sukces: #047857; --sukces-tlo: #ecfdf5; --sukces-ram: #6ee7b7;
  --ostrz: #92400e; --ostrz-tlo: #fffbeb; --ostrz-ram: #fde68a;
  --blad: #b91c1c; --blad-tlo: #fef2f2; --blad-ram: #fecaca;
  --r-duze: 12px;
  --r-male: 8px;
  --cien: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --cien-lekki: 0 1px 2px rgb(15 23 42 / 0.04), 0 4px 12px rgb(15 23 42 / 0.05);
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--tlo);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--odnosnik); text-underline-offset: 2px; }
a:hover { color: var(--glowny); }
h1, h2, h3, h4 { color: var(--naglowek); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 18px; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: .35em; }
code { font-size: .92em; }
:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; border-radius: 4px; }

.pomin { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: var(--r-male); }
.pomin:focus { left: 8px; }

/* ---------- Pasek wersji roboczej (usunąć przed publikacją) ---------- */
.wersja-robocza {
  background: var(--ostrz-tlo); color: var(--ostrz); border-bottom: 1px solid var(--ostrz-ram);
  font-size: 12.5px; text-align: center; padding: 6px var(--gutter);
}
.do-potwierdzenia {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--ostrz);
  background: var(--ostrz-tlo); border: 1px solid var(--ostrz-ram); border-radius: 9999px;
  padding: 1px 8px; vertical-align: middle; letter-spacing: 0;
}

/* ---------- Kontenery ---------- */
.kontener { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.kontener-tekst { width: 100%; max-width: 768px; margin: 0 auto; padding: 0 var(--gutter); }
.sekcja { padding: 64px 0; }
.sekcja-biala { background: #fff; border-top: 1px solid var(--obramowanie); border-bottom: 1px solid var(--obramowanie); }
.sekcja-ciemna { background: var(--granat); color: #cbd5e1; }
.sekcja-ciemna h2, .sekcja-ciemna h3 { color: #fff; }
.sekcja-ciemna a { color: #7dd3fc; }
@media (min-width: 1024px) { .sekcja { padding: 88px 0; } }

.naglowek-sekcji { max-width: 768px; margin-bottom: 36px; }
.naglowek-sekcji.srodek { margin-left: auto; margin-right: auto; text-align: center; }
.naglowek-sekcji p { color: var(--pomocniczy); font-size: 17px; }
.sekcja-ciemna .naglowek-sekcji p { color: #94a3b8; }
.etykieta {
  display: inline-block; font-size: 12.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--glowny-hover); margin-bottom: 10px;
}
.sekcja-ciemna .etykieta { color: #7dd3fc; }

/* ---------- Przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none;
  padding: 11px 20px; border-radius: var(--r-duze); border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn-glowny { background: var(--glowny); border-color: var(--glowny); color: #fff; }
.btn-glowny:hover { background: var(--glowny-hover); border-color: var(--glowny-hover); color: #fff; }
.btn-drugi { background: #fff; border: 1px solid var(--obramowanie-pola); color: var(--tekst); font-weight: 500; padding: 12px 20px; }
.btn-drugi:hover { background: var(--tlo); color: var(--naglowek); }
.btn-zaloguj { background: #fff; border-color: var(--glowny); color: var(--glowny-hover); }
.btn-zaloguj:hover { background: var(--zaznaczenie); color: var(--glowny-hover); }
.btn-ciemny { background: var(--granat); border-color: var(--granat); color: #fff; }
.btn-ciemny:hover { background: var(--granat-hover); color: #fff; }
.btn-duzy { font-size: 16px; padding: 14px 24px; }
.btn-maly { font-size: 13.5px; padding: 7px 12px; border-radius: var(--r-male); }
.przyciski { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Nagłówek (wspólny z aplikacją) ---------- */
.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--obramowanie);
}
.naglowek-wnetrze {
  max-width: 2200px; margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 24px; min-height: 62px;
}
.logo { flex: none; display: block; line-height: 0; }
.logo img { height: 38px; width: auto; }
.menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.menu li + li { margin: 0; }
.menu a {
  display: block; padding: 8px 10px; border-radius: var(--r-male);
  color: var(--tekst); text-decoration: none; font-size: 14.5px; font-weight: 500; white-space: nowrap;
}
.menu a:hover { background: var(--tlo); color: var(--naglowek); }
.menu a[aria-current="page"] { color: var(--glowny-hover); background: var(--zaznaczenie); }
/* Prawy górny róg należy do aplikacji — po zalogowaniu aplikacja podmienia zawartość #konto-naglowek */
.naglowek-konto { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.naglowek-konto .btn { font-size: 13.5px; padding: 7px 12px; border-radius: var(--r-male); }
@media (min-width: 640px) {
  .naglowek-konto .btn { font-size: 14px; padding: 8px 16px; border-radius: var(--r-duze); }
}
@media (max-width: 639px) {
  .naglowek-wnetrze { gap: 8px; }
  .logo img { height: 30px; }
  .naglowek-konto { gap: 6px; }
  .naglowek-konto .btn { padding: 6px 9px; font-size: 13px; border-width: 1.5px; }
  .menu-mobilne > summary { width: 36px; height: 36px; font-size: 18px; }
}
@media (max-width: 439px) {
  .naglowek-wnetrze { gap: 6px; }
  .logo img { height: 26px; }
  .naglowek-konto .btn { padding: 6px 8px; font-size: 12.5px; }
  .menu-mobilne > summary { width: 34px; height: 34px; }
}
@media (max-width: 359px) {
  .logo img { height: 22px; }
  .naglowek-konto .btn { padding: 5px 6px; font-size: 12px; }
}
@media (min-width: 1280px) { .menu { display: block; } }

/* Menu na telefon — <details>, bez JavaScriptu */
.menu-mobilne { position: relative; }
.menu-mobilne > summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: var(--r-male);
  border: 1px solid var(--obramowanie-pola); display: grid; place-items: center; background: #fff;
  font-size: 20px; line-height: 1; color: var(--naglowek);
}
.menu-mobilne > summary::-webkit-details-marker { display: none; }
.menu-mobilne[open] > summary { background: var(--tlo); }
.menu-mobilne-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 2 * var(--gutter)));
  background: #fff; border: 1px solid var(--obramowanie); border-radius: var(--r-duze);
  box-shadow: var(--cien); padding: 8px;
}
.menu-mobilne-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-mobilne-panel li + li { margin: 0; }
.menu-mobilne-panel a {
  display: block; padding: 10px 12px; border-radius: var(--r-male); text-decoration: none;
  color: var(--tekst); font-weight: 500;
}
.menu-mobilne-panel a:hover, .menu-mobilne-panel a[aria-current="page"] { background: var(--zaznaczenie); color: var(--glowny-hover); }
@media (min-width: 1280px) { .menu-mobilne { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 48px 0 56px; background: linear-gradient(180deg, #fff 0%, var(--tlo) 100%); border-bottom: 1px solid var(--obramowanie); }
.hero-siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .hero { padding: 80px 0 88px; }
  .hero-siatka { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 56px; }
}
.hero .lead { font-size: 18px; color: #334155; max-width: 620px; }
@media (min-width: 1024px) { .hero .lead { font-size: 19px; } }
.hero .przyciski { margin-top: 28px; }
.hero-uwaga { margin-top: 16px; font-size: 13.5px; color: var(--pomocniczy); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--glowny-hover); background: var(--zaznaczenie); border: 1px solid #bae6fd;
  border-radius: 9999px; padding: 4px 12px; margin-bottom: 20px; max-width: 100%;
}
.chip::before { flex: none; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--czerwien); }

/* Makieta oceny w hero (HTML, nie zrzut) */
.makieta {
  background: #fff; border: 1px solid var(--obramowanie); border-radius: 16px;
  box-shadow: var(--cien); padding: 18px; position: relative;
}
.makieta-gora { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 4px 14px; border-bottom: 1px solid var(--obramowanie); margin-bottom: 14px; }
.makieta-gora small { display: block; font-size: 11.5px; color: var(--drugorzedny); }
.makieta-gora strong { font-size: 14px; color: var(--naglowek); font-weight: 600; }
.makieta-zakladki { display: flex; gap: 14px; font-size: 12.5px; color: var(--pomocniczy); overflow: hidden; }
.makieta-zakladki span:nth-child(3) { color: var(--glowny-hover); font-weight: 600; }
.makieta-status { border-radius: var(--r-duze); padding: 12px 14px; margin-bottom: 12px; background: var(--ostrz-tlo); border: 1px solid var(--ostrz-ram); }
.makieta-status strong { display: block; color: var(--ostrz); font-size: 15px; }
.makieta-status span { color: var(--ostrz); font-size: 12.5px; }
.punkt {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  border: 1px solid var(--obramowanie); border-radius: var(--r-duze); padding: 10px 12px; margin-top: 8px;
}
.punkt b { display: block; font-size: 13.5px; font-weight: 600; color: var(--tekst); line-height: 1.35; }
.punkt span { display: block; font-size: 12px; color: var(--pomocniczy); line-height: 1.45; margin-top: 2px; }
.ikona { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; }
.ikona-ok { background: var(--sukces-tlo); color: var(--sukces); border: 1px solid var(--sukces-ram); }
.ikona-uwaga { background: var(--ostrz-tlo); color: var(--ostrz); border: 1px solid var(--ostrz-ram); }
.ikona-brak { background: var(--blad-tlo); color: var(--blad); border: 1px solid var(--blad-ram); }
.makieta-dol { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 12px; }
.makieta-dol span { border-radius: 9999px; padding: 2px 10px; border: 1px solid; }
.licz-ok { color: var(--sukces); background: var(--sukces-tlo); border-color: var(--sukces-ram); }
.licz-uwaga { color: var(--ostrz); background: var(--ostrz-tlo); border-color: var(--ostrz-ram); }
.licz-brak { color: var(--pomocniczy); background: var(--tlo); border-color: var(--obramowanie); }
.makieta-podpis { font-size: 12px; color: var(--drugorzedny); text-align: center; margin: 10px 0 0; }
@media (max-width: 479px) { .punkt-ukryj-tel, .makieta-zakladki { display: none; } }

/* ---------- Pasek faktów ---------- */
.fakty { display: grid; gap: 1px; background: var(--obramowanie); border: 1px solid var(--obramowanie); border-radius: var(--r-duze); overflow: hidden; }
.fakt { background: #fff; padding: 18px 20px; }
.fakt strong { display: block; color: var(--naglowek); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.fakt span { font-size: 13.5px; color: var(--pomocniczy); line-height: 1.5; display: block; }
@media (min-width: 640px) { .fakty { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fakty { grid-template-columns: repeat(4, 1fr); } }
.fakty-wrap { margin-top: -28px; position: relative; }
@media (min-width: 1024px) { .fakty-wrap { margin-top: -36px; } }

/* ---------- Karty i siatki ---------- */
.siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .siatka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .siatka-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .siatka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karta { background: #fff; border: 1px solid var(--obramowanie); border-radius: var(--r-duze); padding: 24px; }
.karta > :last-child { margin-bottom: 0; }
.karta h3 { margin-bottom: 8px; }
.karta p { color: #475569; font-size: 15px; }
.karta-ikona {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--zaznaczenie); color: var(--glowny-hover); font-weight: 700; font-size: 15px;
}
.karta-ikona svg { width: 22px; height: 22px; }
.karta-wyrozniona { border-color: #7dd3fc; box-shadow: var(--cien-lekki); }
.sekcja-ciemna .karta { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.sekcja-ciemna .karta p { color: #cbd5e1; }
.sekcja-ciemna .karta-ikona { background: rgba(125, 211, 252, .12); color: #7dd3fc; }

/* Przesłanki */
.przeslanka { position: relative; }
.przeslanka .numer { position: absolute; top: 20px; right: 22px; font-size: 40px; font-weight: 700; color: #e0f2fe; line-height: 1; }

/* ---------- Kroki ---------- */
.kroki { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: krok; }
@media (min-width: 768px) { .kroki-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .kroki-5 { grid-template-columns: repeat(5, 1fr); } }
.kroki > li { margin: 0; counter-increment: krok; background: #fff; border: 1px solid var(--obramowanie); border-radius: var(--r-duze); padding: 22px 20px; position: relative; }
.kroki > li::before {
  content: counter(krok); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--glowny); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 14px;
}
.kroki h3 { font-size: 16px; margin-bottom: 6px; }
.kroki p { font-size: 14px; color: #475569; margin: 0; }

/* Kroki szczegółowe (oś) */
.os { list-style: none; padding: 0; margin: 0; counter-reset: krok; }
.os > li { counter-increment: krok; position: relative; padding: 0 0 36px 56px; margin: 0; }
.os > li::before {
  content: counter(krok); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  background: var(--glowny); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px;
}
.os > li::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; background: var(--obramowanie); }
.os > li:last-child::after { display: none; }
.os > li:last-child { padding-bottom: 0; }
.os h3 { font-size: 19px; margin: 5px 0 8px; }
.os p, .os li { color: #334155; }
.os ul { margin-top: 8px; }

/* ---------- Listy z ikonami ---------- */
.lista-ok, .lista-nie { list-style: none; padding: 0; margin: 0; }
.lista-ok li, .lista-nie li { position: relative; padding-left: 30px; margin: 0 0 10px; }
.lista-ok li::before, .lista-nie li::before {
  position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1;
}
.lista-ok li::before { content: "✓"; color: var(--sukces); background: var(--sukces-tlo); border: 1px solid var(--sukces-ram); }
.lista-nie li::before { content: "✕"; color: var(--blad); background: var(--blad-tlo); border: 1px solid var(--blad-ram); }
.sekcja-ciemna .lista-ok li::before { background: rgba(16,185,129,.15); border-color: rgba(110,231,183,.4); color: #6ee7b7; }

/* ---------- Ścieżki (firmy / kancelarie) ---------- */
.sciezka { display: flex; flex-direction: column; padding: 28px; }
.sciezka .lista-ok { margin: 8px 0 24px; }
.sciezka .lista-ok li { font-size: 15px; color: #334155; }
.sciezka .przyciski { margin-top: auto; }
.sciezka-dla { font-size: 13px; font-weight: 600; color: var(--pomocniczy); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }

/* ---------- Ramki informacyjne ---------- */
.ramka { border-radius: var(--r-duze); padding: 16px 18px; border: 1px solid; font-size: 15px; margin: 0 0 24px; }
.ramka > :last-child { margin-bottom: 0; }
.ramka-info { background: var(--zaznaczenie); border-color: #bae6fd; color: #075985; }
.ramka-uwaga { background: var(--ostrz-tlo); border-color: var(--ostrz-ram); color: var(--ostrz); }
.ramka-blad { background: var(--blad-tlo); border-color: var(--blad-ram); color: var(--blad); }
.ramka-ok { background: var(--sukces-tlo); border-color: var(--sukces-ram); color: var(--sukces); }
.ramka strong { color: inherit; }

/* ---------- Podstrony ---------- */
.podstrona-hero { background: #fff; border-bottom: 1px solid var(--obramowanie); padding: 48px 0 40px; }
@media (min-width: 1024px) { .podstrona-hero { padding: 72px 0 56px; } }
.podstrona-hero h1 { font-size: clamp(28px, 4vw, 42px); }
.podstrona-hero .lead { font-size: 18px; color: #334155; max-width: 720px; margin-bottom: 0; }
.okruszki { font-size: 13px; color: var(--pomocniczy); margin-bottom: 14px; }
.okruszki a { color: var(--pomocniczy); }

.tresc { font-size: 16.5px; }
.tresc h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 48px; scroll-margin-top: 90px; }
.tresc h2:first-child { margin-top: 0; }
.tresc h3 { margin-top: 28px; }
.tresc p, .tresc li { color: #334155; }

.uklad-z-boku { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .uklad-z-boku { grid-template-columns: 240px minmax(0, 768px); gap: 64px; justify-content: center; } }
.spis { font-size: 14px; }
.spis strong { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--pomocniczy); margin-bottom: 10px; }
.spis ol { padding-left: 1.1em; margin: 0; }
.spis li + li { margin-top: 6px; }
.spis a { color: var(--tekst); text-decoration: none; }
.spis a:hover { color: var(--glowny-hover); text-decoration: underline; }
@media (min-width: 1024px) { .spis-wnetrze { position: sticky; top: 96px; } }

/* Tabela porównawcza */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--obramowanie); border-radius: var(--r-duze); background: #fff; margin: 0 0 24px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--obramowanie); }
th { background: var(--tlo); color: var(--naglowek); font-weight: 600; font-size: 13.5px; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; color: var(--naglowek); white-space: nowrap; }
.tabela-wyrozniona { background: var(--zaznaczenie); }
@media (max-width: 639px) { table { font-size: 13.5px; min-width: 560px; } }

/* ---------- FAQ (<details>) ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--obramowanie); border-radius: var(--r-duze); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-weight: 600; color: var(--naglowek);
  position: relative; font-size: 16px; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--glowny-hover);
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--obramowanie); }
.faq .odp { padding: 14px 20px 18px; color: #334155; font-size: 15.5px; }
.faq .odp > :last-child { margin-bottom: 0; }
.faq-grupa { margin: 40px 0 14px; font-size: 20px; }
.faq-grupa:first-child { margin-top: 0; }

/* ---------- Cennik ---------- */
.cena { font-size: 40px; font-weight: 700; color: var(--naglowek); letter-spacing: -0.02em; line-height: 1.1; }
.cena small { font-size: 15px; font-weight: 500; color: var(--pomocniczy); letter-spacing: 0; }
.karta-ceny { display: flex; flex-direction: column; }
.karta-ceny .lista-ok { margin: 18px 0 0; }
.karta-ceny .lista-ok li { font-size: 15px; }

/* ---------- Zakres ---------- */
.zakres-kol h3 { display: flex; align-items: center; gap: 10px; }

/* ---------- CTA ---------- */
.cta {
  background: var(--granat); color: #cbd5e1; border-radius: 20px; padding: 40px 28px;
  display: grid; gap: 24px; align-items: center;
}
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { margin: 0; color: #94a3b8; }
@media (min-width: 900px) { .cta { grid-template-columns: 1fr auto; padding: 48px 56px; } }

/* Pasek eWeksel */
.grupa {
  display: grid; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--obramowanie);
  border-radius: var(--r-duze); padding: 22px 24px;
}
.grupa p { margin: 0; color: #475569; font-size: 15px; }
.grupa strong { color: var(--naglowek); }
@media (min-width: 900px) { .grupa { grid-template-columns: 1fr auto; } }

/* ---------- Stopka ---------- */
.stopka { background: #fff; border-top: 1px solid var(--obramowanie); padding: 48px 0 28px; margin-top: 0; font-size: 14px; }
.stopka-siatka { display: grid; gap: 32px; }
@media (min-width: 768px) { .stopka-siatka { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.stopka img { height: 34px; width: auto; margin-bottom: 14px; }
.stopka p { color: var(--pomocniczy); }
.stopka h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--pomocniczy); margin-bottom: 12px; font-weight: 600; }
.stopka ul { list-style: none; padding: 0; margin: 0; }
.stopka li + li { margin-top: 8px; }
.stopka a { color: var(--tekst); text-decoration: none; }
.stopka a:hover { color: var(--glowny-hover); text-decoration: underline; }
.stopka-dol {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--obramowanie);
  display: grid; gap: 8px; font-size: 12.5px; color: var(--drugorzedny);
}
.stopka-dol p { margin: 0; color: var(--drugorzedny); }
.stopka-zrodlo { color: var(--pomocniczy) !important; }

/* ---------- Drobne ---------- */
.srodek { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.wiecej { font-weight: 600; text-decoration: none; }
.wiecej::after { content: " →"; }
.pomocniczy { color: var(--pomocniczy); }
.maly { font-size: 13.5px; }
.punkt .ikona { display: grid; margin-top: 0; font-size: 12px; color: inherit; line-height: 1; }
.punkt .ikona-ok { color: var(--sukces); }
.punkt .ikona-uwaga { color: var(--ostrz); }
.punkt .ikona-brak { color: var(--blad); }

/* --- wersja 2: copy z przewagami nakazu --- */
.makieta-status-ok { background: var(--sukces-tlo); border-color: var(--sukces-ram); }
.makieta-status-ok strong, .makieta-status-ok span { color: var(--sukces); }
th.tabela-wyrozniona { background: #e0f2fe; color: var(--glowny-hover); }
td.tabela-wyrozniona { background: var(--zaznaczenie); }
.tabela-wrap td:first-child { white-space: normal; min-width: 150px; }
.przekazanie { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: krok; }
@media (min-width: 768px) { .przekazanie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .przekazanie { grid-template-columns: repeat(4, 1fr); } }
.przekazanie > li { margin: 0; counter-increment: krok; background: #fff; border: 1px solid var(--obramowanie); border-radius: var(--r-duze); padding: 22px 20px; }
.przekazanie > li::before {
  content: counter(krok); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--granat); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 14px;
}
.przekazanie .kto { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--glowny-hover); margin-bottom: 4px; }
.przekazanie h3 { font-size: 16px; margin-bottom: 6px; }
.przekazanie p { font-size: 14px; color: #475569; margin: 0; }
.przyklady td:first-child { font-weight: 500; }

/* Baner eWeksel (27.10.2026) — jasny, pod ciemnym wezwaniem do założenia konta */
.baner-eweksel {
  position: relative; overflow: hidden; display: grid; gap: 20px; align-items: center;
  padding: 28px 24px; border-radius: var(--r-duze);
  background: linear-gradient(120deg, #fff 0%, var(--zaznaczenie) 100%);
  border: 1px solid var(--obramowanie); border-left: 6px solid var(--logo-granat);
  box-shadow: var(--cien-lekki);
}
.baner-eweksel::after {
  content: "§"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 180px; font-weight: 700; line-height: 1; color: var(--logo-granat); opacity: .06; pointer-events: none;
}
.baner-eweksel-tresc { position: relative; z-index: 1; }
.baner-eweksel-etykieta {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--czerwien); background: var(--blad-tlo); border: 1px solid var(--blad-ram); padding: 3px 10px; border-radius: 9999px;
}
.baner-eweksel h3 { margin: 12px 0 6px; color: var(--naglowek); font-size: 22px; line-height: 1.25; }
.baner-eweksel p { margin: 0; color: #475569; font-size: 15.5px; max-width: 640px; }
.baner-eweksel-przycisk { position: relative; z-index: 1; justify-self: start; white-space: nowrap; }
@media (min-width: 900px) {
  .baner-eweksel { grid-template-columns: 1fr auto; padding: 36px 40px 36px 36px; }
  .baner-eweksel h3 { font-size: 26px; }
  .baner-eweksel::after { right: 260px; }
}

/* Formularz kontaktowy (29.10.2026, na wzór Claromontany) — bez JavaScriptu */
.kontakt-uklad { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .kontakt-uklad { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.kontakt-boczne { display: grid; gap: 16px; }
.formularz {
  display: grid; gap: 16px; background: var(--karta); border: 1px solid var(--obramowanie);
  border-radius: var(--r-duze); padding: 24px; box-shadow: var(--cien-lekki);
}
@media (min-width: 640px) { .formularz { grid-template-columns: 1fr 1fr; } .formularz .cala { grid-column: 1 / -1; } }
.formularz label { display: block; font-size: 13.5px; font-weight: 500; color: var(--naglowek); margin-bottom: 4px; }
.formularz label small { font-weight: 400; color: var(--pomocniczy); }
.formularz input:not([type=checkbox]), .formularz select, .formularz textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--tekst);
  border: 1px solid var(--obramowanie-pola); border-radius: var(--r-male); padding: 10px 12px; background: #fff;
}
.formularz textarea { resize: vertical; min-height: 140px; }
.formularz input:focus, .formularz select:focus, .formularz textarea:focus { outline: 2px solid var(--glowny); outline-offset: 1px; border-color: var(--glowny); }
.formularz .zgoda { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13px; color: #475569; line-height: 1.5; }
.formularz .zgoda input { margin-top: 3px; flex: none; }
.formularz .pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

/* Zapis na listę powiadomień (29.10.2026) */
.formularz-kod { max-width: 360px; margin-top: 18px; }
.formularz-kod input { letter-spacing: 0.3em; text-align: center; font-size: 18px; }
.formularz-ponow { margin-top: 10px; }
.przycisk-link { background: none; border: 0; padding: 0; color: var(--glowny-hover); text-decoration: underline; cursor: pointer; font: inherit; }
/* Klauzula informacyjna pod formularzem — zwykły tekst, nie pole wyboru (.zgoda jest flex). */
.formularz .klauzula { margin: 0; font-size: 13px; color: #475569; line-height: 1.5; }

/* Dokumenty prawne (30.10.2026): regulamin i polityka prywatności z docs/dla-prawnika/publikacja */
.dokument-prawny h2 { margin-top: 2em; scroll-margin-top: 80px; }
.dokument-prawny h3 { margin-top: 1.5em; scroll-margin-top: 80px; }
.dokument-prawny ol ol { list-style: decimal; }
.dokument-prawny li > p { margin-top: .5em; }
.dokument-prawny li { margin-bottom: .35em; }
.dokument-prawny hr { border: 0; border-top: 1px solid var(--obramowanie); margin: 2.5em 0; }
.dokument-prawny .spis { margin-bottom: 2em; }
.dokument-prawny .spis-tytul { font-weight: 600; margin-bottom: .4em; }
.dokument-prawny .spis-3 { margin-left: 1.2em; font-size: .95em; }
.tabela-przewijana { overflow-x: auto; margin: 1em 0 1.5em; -webkit-overflow-scrolling: touch; }
.tabela-przewijana table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: 14px; }
.tabela-przewijana th, .tabela-przewijana td { border: 1px solid var(--obramowanie); padding: 8px 10px; text-align: left; vertical-align: top; }
.tabela-przewijana th { background: #f8fafc; }
/* Tabele z 4 kolumnami (polityka: cele i okresy; umowa powierzenia: dalsze podmioty) — szersze niż kolumna
   tekstu: na komputerze wychodzą poza nią (do 1100 px), pierwsza kolumna wąska z zawijaniem, pozostałe szersze. */
.dokument-prawny .tabela-przewijana.kolumny-4 { width: min(1100px, calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%); }
.tabela-przewijana.kolumny-4 table { min-width: 900px; table-layout: fixed; }
.tabela-przewijana.kolumny-4 th:first-child, .tabela-przewijana.kolumny-4 td:first-child { width: 17%; }
.tabela-przewijana.kolumny-4 th:not(:first-child), .tabela-przewijana.kolumny-4 td:not(:first-child) { width: 27.66%; }
.tabela-przewijana td, .tabela-przewijana th { overflow-wrap: break-word; }
/* Globalne td:first-child { white-space: nowrap } (tabele porównań) — w dokumentach prawnych pierwsza kolumna się zawija. */
.tabela-przewijana td:first-child { white-space: normal; }

/* typografia (build.py): słowa, których nie dzielimy na łączniku, np. e-mail */
.nw { white-space: nowrap; }