/* Strony o panelu Sellteo dla sprzedawców: sellteo-vs-base.html i Centrum pomocy (pomoc/integracje/,
   generuje tools/pomoc_integracje.py). Ta sama paleta co wersja pokazowa panelu (server/demo_strona)
   i „Co potrafi panel” (dokumentacja.html) — papier, grafit, zieleń marki. Bez frameworka i bez fontów z sieci. */
:root {
  --papier: #f6f4ef; --karta: #fff; --tekst: #1d1d1b; --szary: #5f5d58; --jasny: #85827b; --linia: #d9d4c9;
  --marka: #0f6f52; --marka-tlo: #e4f1ea; --marka-ciemna: #0b563f; --czerwony: #a3261b; --zolty-tlo: #faf0d9; --zolty: #855700;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--tekst);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
a { color: var(--marka); }
a:hover { color: var(--marka-ciemna); }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.strona { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.gorna { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 22px 0 18px; }
.gorna .marka { font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--tekst); text-decoration: none; }
.gorna .marka span { color: var(--marka); }
.gorna .co { color: var(--szary); font-size: 15px; }
.gorna nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.gorna nav a { color: var(--szary); text-decoration: none; font-weight: 600; }
.gorna nav a:hover, .gorna nav a[aria-current] { color: var(--tekst); }

.okruszki { font-size: 14px; color: var(--jasny); margin: 8px 0 0; }
.okruszki a { color: var(--szary); }

h1 { font-size: 42px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 14px; }
h3 { font-size: 18px; margin: 0 0 6px; }
.znacznik { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--marka); margin: 0 0 8px; }
.lead { font-size: 19px; color: var(--szary); max-width: 62ch; margin: 0 0 26px; }
.lead b { color: var(--tekst); }
.cicho { color: var(--szary); font-size: 15px; }
.drobne { color: var(--jasny); font-size: 13.5px; }

.sekcja { padding: 44px 0; border-top: 1px solid var(--linia); }
.sekcja:first-of-type { border-top: 0; }
.bohater { padding: 40px 0 48px; }

.przyciski { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 16.5px; font-weight: 650;
  padding: 13px 20px; border-radius: 8px; border: 1px solid transparent; text-decoration: none; cursor: pointer; }
.btn--glowny { background: var(--tekst); color: #fff; }
.btn--glowny:hover { background: #000; color: #fff; }
.btn--marka { background: var(--marka); color: #fff; }
.btn--marka:hover { background: var(--marka-ciemna); color: #fff; }
.btn--obrys { background: transparent; color: var(--tekst); border-color: #bdb8ad; }
.btn--obrys:hover { background: var(--karta); color: var(--tekst); }

.liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.liczby li { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 16px; }
.liczby b { display: block; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.liczby span { font-size: 14px; color: var(--szary); }

/* tabela porównania: na telefonie przewija się w swoim pudełku, strona zostaje w miejscu */
.tabela-box { overflow-x: auto; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; }
table.porownanie { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; }
.porownanie th, .porownanie td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--linia); }
.porownanie thead th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--szary); background: #fbfaf7; }
.porownanie tbody th { font-weight: 650; width: 24%; }
.porownanie td.sellteo { background: #f7fbf9; }
.porownanie tr:last-child th, .porownanie tr:last-child td { border-bottom: 0; }
.tak { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 1px 9px; border-radius: 99px;
  color: var(--marka); background: var(--marka-tlo); margin-right: 6px; }
.czesc { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 1px 9px; border-radius: 99px;
  color: var(--zolty); background: var(--zolty-tlo); margin-right: 6px; }

.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 18px; }
.karta p { margin: 0; color: var(--szary); font-size: 15.5px; }
.cena { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; }
.cena small { font-size: 15px; font-weight: 500; color: var(--szary); }

ol.kroki { counter-reset: krok; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
ol.kroki > li { counter-increment: krok; position: relative; background: var(--karta); border: 1px solid var(--linia);
  border-radius: 10px; padding: 16px 18px 16px 62px; }
ol.kroki > li::before { content: counter(krok); position: absolute; left: 18px; top: 15px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--marka-tlo); color: var(--marka); font-weight: 700; display: grid; place-items: center; font-size: 15px; }
ol.kroki ul { margin: 8px 0 0; padding-left: 20px; }
ol.kroki li li { margin: 3px 0; }

details.faq { background: var(--karta); border: 1px solid var(--linia); border-radius: 10px; padding: 0 18px; margin: 0 0 10px; }
details.faq summary { cursor: pointer; font-weight: 650; padding: 16px 0; list-style-position: outside; }
details.faq p { margin: 0 0 16px; color: var(--szary); }

.uwaga { background: var(--zolty-tlo); border-radius: 10px; padding: 14px 16px; font-size: 15.5px; color: #4d3a0a; }

/* Centrum pomocy */
.szukaj { display: grid; gap: 6px; max-width: 560px; margin: 0 0 18px; }
.szukaj span { font-size: 14px; font-weight: 700; color: var(--szary); }
.szukaj input { font: inherit; font-size: 17px; padding: 12px 14px; border: 1px solid #bdb8ad; border-radius: 8px; background: #fff; color: var(--tekst); width: 100%; }
.szukaj input:focus { outline: 2px solid var(--marka); outline-offset: 1px; border-color: var(--marka); }
.filtry { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.filtry button { font: inherit; font-size: 14.5px; font-weight: 600; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--linia);
  background: var(--karta); color: var(--szary); cursor: pointer; }
.filtry button[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.filtry em { font-style: normal; opacity: .7; margin-left: 4px; }
.grupa-integracji { margin: 0 0 34px; }
.grupa-integracji h2 { font-size: 22px; }
.lista-integracji { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.lista-integracji a { display: block; height: 100%; background: var(--karta); border: 1px solid var(--linia); border-radius: 10px;
  padding: 13px 15px; text-decoration: none; color: var(--tekst); }
.lista-integracji a:hover { border-color: var(--marka); }
.lista-integracji b { display: block; font-size: 16px; }
.lista-integracji span { display: block; font-size: 13.5px; color: var(--szary); margin-top: 2px; }
.pusto { color: var(--szary); }
.dwie { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 36px; align-items: start; }
.boczna { position: sticky; top: 16px; display: grid; gap: 14px; }
.etykiety { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 6px 0 0; list-style: none; }
.etykiety li { font-size: 13.5px; background: var(--papier); border: 1px solid var(--linia); border-radius: 99px; padding: 2px 10px; }
.pola { width: 100%; border-collapse: collapse; font-size: 15px; }
.pola th, .pola td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linia); vertical-align: top; }
.pola th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--szary); }

.stopka { margin-top: 40px; padding: 22px 0 40px; border-top: 1px solid var(--linia); font-size: 14px; color: var(--szary);
  display: flex; flex-wrap: wrap; gap: 8px 24px; }
.stopka a { color: var(--szary); }
.stopka p { flex-basis: 100%; margin: 6px 0 0; color: var(--jasny); font-size: 13px; }

@media (max-width: 860px) {
  h1 { font-size: 32px; }
  h2 { font-size: 23px; }
  .lead { font-size: 17.5px; }
  .liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dwie { grid-template-columns: 1fr; gap: 22px; }
  .boczna { position: static; }
  .gorna nav { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 420px) {
  .strona { padding: 0 16px; }
  .btn { width: 100%; }
  ol.kroki > li { padding-left: 54px; }
  ol.kroki > li::before { left: 14px; }
}