:root{--fg:#152b43;--accent:#F03C0A;--muted:#5a6a7a;--line:#e2e6ea;--bg:#f6f8fa}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.55}
a{color:var(--accent)}
.wrap{max-width:820px;margin:0 auto;padding:24px 18px 60px}



.docs-title{text-align:center;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin:34px 0 14px}
.cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;min-width:200px;text-align:center;
      box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card a{font-weight:600;text-decoration:none;font-size:15px}
.card:hover{border-color:var(--accent)}
.foot{text-align:center;color:var(--muted);font-size:13px;margin-top:36px}
.foot a{color:inherit}

/* ── dokument prawny ── */
/* Pasek dokumentow. SZEROKOSC SRODKA JEST TA SAMA CO W .fc-nav-in (960 px) - oba paski
   stoja jeden pod drugim, wiec ich lewe krawedzie musza sie pokrywac. Do 2026-09-11 ten
   pasek byl dosuniety do lewej krawedzi okna i na szerokim ekranie wygladal jak pomylka. */
.doc-nav{background:#fff;border-bottom:1px solid var(--line);font-size:14px}
.doc-nav-in{max-width:960px;margin:0 auto;padding:12px 18px;
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.doc-nav a{text-decoration:none;color:var(--fg)}
.doc-nav a.on{font-weight:700;color:var(--accent)}
.doc-nav .doc-lang{margin-left:auto;white-space:nowrap}
.doc-nav .doc-lang a{margin:0 0 0 8px;font-size:13px;color:var(--muted)}
.doc-nav .doc-lang a.on{color:var(--accent);font-weight:700}
.doc{background:#fff;border:1px solid var(--line);border-radius:12px;max-width:820px;margin:22px auto;padding:26px 32px}
.doc h1{font-size:24px;margin:0 0 10px}
.doc h2{font-size:19px;margin:26px 0 8px}
.doc h3{font-size:16px;margin:18px 0 6px}
.doc p{margin:6px 0}
.doc p.i1{margin-left:22px}
.doc p.i2{margin-left:44px}
.doc hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.doc table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14px}
.doc th,.doc td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.doc thead th{background:var(--bg);font-weight:700;border-bottom:2px solid var(--line)}

@media(max-width:600px){.doc{padding:18px 16px;border-radius:0}.doc table{display:block;overflow-x:auto}}

/* wersje dokumentow prawnych (aktualna / nadchodzaca / archiwalne) */
.doc-versions{max-width:960px;margin:10px auto 0;padding:0 18px;font-size:13px;color:#5a6a7a;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.doc-versions a{color:#c8300a;text-decoration:none;border:1px solid #e2e6ea;border-radius:14px;padding:3px 11px}
.doc-versions a.on{background:#F03C0A;border-color:#F03C0A;color:#fff}
.doc-banner{max-width:860px;margin:12px auto 0;padding:10px 16px;border-radius:9px;font-size:14px;
  background:#fdf3e7;color:#8a5a1a;border:1px solid #f0d9b8}


/* Reguły paska nawigacyjnego przeniesione do nav.css — stoi on także na stronach
   logowania i rejestracji, które używają account/account.css, więc nie może mieszkać
   w arkuszu tylko jednej z tych dwóch grup stron. */
h2,h3{scroll-margin-top:64px}   /* przyklejony pasek nie zasłania nagłówka po kliknięciu w odnośnik */
}

/* ── STRONA GŁÓWNA JAKO ROZDROŻE (PLAN-album-b2c.md, Etap 11) ──────────────────
   Po Etapie 7 oba wejścia mają własne strony sprzedażowe, więc `/` niczego nie
   sprzedaje — tu się WYBIERA DROGĘ. Kontener i przycisk bierzemy z `lp.css`, tego
   samego arkusza co strony usług: strona główna nie może odstawać od stron, do
   których prowadzi, bo to ona pierwsza mówi, z jaką firmą gość ma do czynienia.

   Reguły `.hero`, `.sec`, `.langbar` i blok „dwa konta" zostały USUNIĘTE razem
   z przebudową — nic ich już nie używało. */
.hm-hero{text-align:center;padding:44px 0 6px}
.hm-hero h1{font-size:32px;line-height:1.22;margin:0 0 14px}
.hm-hero .lead{font-size:17px;line-height:1.7;color:#4a4f57;max-width:680px;margin:0 auto}


/* Dwie RÓWNE drogi: ta sama szerokość, ten sam przycisk, żaden nie wygląda na
   „ten właściwy". Serwis nie wie, kim jest odwiedzający, i nie ma prawa zgadywać. */
.hm-drogi{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:40px;scroll-margin-top:64px}   /* kotwica #konta nie może wpaść pod pasek */
.hm-droga{background:#fff;border:1px solid #e7e2d8;border-radius:14px;padding:26px 24px;
  display:flex;flex-direction:column}
.hm-droga b{font-size:21px;line-height:1.3;margin-bottom:9px}
/* flex:1 na akapicie wyrównuje przyciski w obu kartach, gdy opisy mają różną długość. */
.hm-droga p{margin:0 0 20px;color:#4a4f57;line-height:1.65;flex:1}
.hm-droga .lp-cta{align-self:flex-start;margin:0;font-size:16px;padding:13px 24px}
.hm-log{display:inline-block;align-self:flex-start;margin-top:12px;font-size:14px;color:#6b6f76}

/* O programie i o usłudze — niżej i mniej. Kto chce czytać o nas, doczyta tutaj. */
.hm-o{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:54px}
.hm-o>div{background:#FBF7EF;border:1px solid #e7e2d8;border-radius:12px;padding:18px 20px}
.hm-o b{display:block;margin-bottom:6px;font-size:16px}
.hm-o p{margin:0;color:#4a4f57;line-height:1.6;font-size:14.5px}

@media(max-width:600px){
  .hm-hero{padding-top:32px}
  .hm-hero h1{font-size:26px}
  .hm-droga b{font-size:19px}
}