/* ══════════════════════════════════════════════════════════════════════════
   WSPÓLNA BELKA I STOPKA CAŁEGO SERWISU RoasLens (poza panelem klienta).
   ZASADA STAŁA (decyzja właściciela 26.08.2026): KAŻDA strona i podstrona —
   regulaminy, umowy, landing, cennik, rejestracja, logowanie, case studies —
   ma TĘ SAMĄ belkę i TĘ SAMĄ stopkę. Żadnych własnych wariantów per strona.
   Dołącz na stronie: <link rel="stylesheet" href="/site-chrome.css">
                      <script src="/site-chrome.js" defer></script>
   Komponent jest SAMOWYSTARCZALNY: ma własne tokeny (--rlc-*), więc wygląda
   identycznie niezależnie od tego, jakie zmienne ma strona-gospodarz.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --rlc-paper:#101210; --rlc-band:#171A16; --rlc-sheet:#1C201B;
  --rlc-rule:#2B302A; --rlc-rule2:#4A5147;
  --rlc-ink:#E9ECE4; --rlc-ink2:#B6BDB0; --rlc-mut:#889181;
  /* JEDNA SZEROKOSC DLA CALEGO SERWISU (26/27.08 — wlasciciel: „nie ma jednej szerokosci,
     co chwile inaczej"). Bylo 5 roznych wartosci na stronach publicznych (820/860/940/960/1060),
     przez co tresc „skakala" pod nieruchoma belka. Teraz kazdy kontener bierze --rlc-w. */
  --rlc-w:1060px;
  /* Dlugosc linii tekstu ograniczamy OSOBNO (nie zwezaniem kontenera): przy 1060px linia mialaby
     ~130 znakow i regulamin bylby nieczytelny. Kontener zostaje jednolity, tekst jest weższy. */
  --rlc-measure:74ch;
  --rlc-sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rlc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="light"]{
  --rlc-paper:#F4F2EA; --rlc-band:#EAE7DD; --rlc-sheet:#FCFBF6;
  --rlc-rule:#DEDBCF; --rlc-rule2:#B4B1A2;
  --rlc-ink:#1A1C16; --rlc-ink2:#454A3E; --rlc-mut:#616555;
}
:root[data-theme="dark"]{
  --rlc-paper:#101210; --rlc-band:#171A16; --rlc-sheet:#1C201B;
  --rlc-rule:#2B302A; --rlc-rule2:#4A5147;
  --rlc-ink:#E9ECE4; --rlc-ink2:#B6BDB0; --rlc-mut:#889181;
}

/* ZABEZPIECZENIE PRZED PRZESUWANIEM STRONY W BOK (bug zgłoszony 26.08: „całą
   stronę można pociągnąć w bok prawie do połowy"). Przyczyna: element szerszy
   niż ekran rozciągał dokument, a elementy `position:fixed` liczące szerokość
   w % (baner zgód, modal, czat) brały ją z ROZCIĄGNIĘTEGO dokumentu i rosły
   dalej — sprzężenie zwrotne. `clip` ucina to u źródła i — w odróżnieniu od
   `hidden` — NIE tworzy kontekstu przewijania, więc `position:sticky` działa. */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip}
/* WLASCIWA NAPRAWA (26.08, po zgloszeniu „dalej da sie przesuwac"): sam `overflow-x:clip`
   NIE wystarczyl — poziomy kontener przewijany (tabela porownania, podglad panelu, pasek
   sekcji) mimo wlasnego `overflow-x:auto` NADAL rozciagal `documentElement.scrollWidth`
   (zmierzone: 605px przy ekranie 375px). `contain:paint` izoluje malowanie elementu, wiec
   jego zawartosc przestaje wplywac na szerokosc dokumentu — zmierzone po zmianie: 375px.
   Dziala tez w Safari (15.4+), gdzie `overflow-x:clip` na <html> bywa ignorowany. */
.tablewrap,.preview-frame,.nav-sub,.rlbar__sub,[data-xscroll]{contain:paint;max-width:100%}

/* ── BELKA ───────────────────────────────────────────────────────────────── */
.rlbar{position:sticky;top:0;z-index:2147483000;background:var(--rlc-paper);border-bottom:1px solid var(--rlc-rule);
  font-family:var(--rlc-sans);width:100%}
.rlbar__in{max-width:var(--rlc-w);margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.rlbar__logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--rlc-ink);
  font-weight:600;font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.rlbar__logo svg{flex:none}
.rlbar__nav{display:flex;align-items:center;gap:20px}
.rlbar__nav a{color:var(--rlc-ink2);text-decoration:none;font-size:14.5px;white-space:nowrap}
.rlbar__nav a:hover{color:var(--rlc-ink)}
.rlbar__nav a.rlbar__login{border:1px solid var(--rlc-rule2);border-radius:2px;padding:8px 15px;color:var(--rlc-ink);font-weight:600}
.rlbar__login:hover{background:var(--rlc-band)}
.rlbar__nav a.rlbar__cta{background:var(--rlc-ink);color:var(--rlc-paper);border:1px solid var(--rlc-ink);border-radius:2px;padding:9px 16px;font-weight:600}
.rlbar__cta:hover{opacity:.9}
.rlbar__theme{background:transparent;border:1px solid var(--rlc-rule2);color:var(--rlc-ink);border-radius:2px;
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;flex:none}
.rlbar__theme:hover{background:var(--rlc-band)}
/* Pasek sekcji pod belką — na mobile, gdzie linki z belki się chowają. */
.rlbar__sub{display:none;overflow-x:auto;white-space:nowrap;gap:20px;padding:10px 22px;
  background:var(--rlc-paper);border-bottom:1px solid var(--rlc-rule);scrollbar-width:none}
.rlbar__sub::-webkit-scrollbar{display:none}
.rlbar__sub a{color:var(--rlc-ink2);text-decoration:none;font-size:14px;flex:none}
/* WIDOCZNY NA STAŁE suwak pod paskiem sekcji — natywny na iOS jest nakładkowy i znika,
   więc klient nie wie, że pasek przewija się w bok. */
.rlxbar{display:none;height:8px;margin:0 22px 8px;background:var(--rlc-rule);border-radius:99px;position:relative;cursor:pointer;touch-action:none}
.rlxbar.on{display:block}
.rlxbar.idle{opacity:.45;cursor:default}
.rlxbar.idle .rlxthumb{width:100%!important;left:0!important}
.rlxthumb{position:absolute;top:0;left:0;height:100%;min-width:40px;background:var(--rlc-ink2);border-radius:99px}
@media(min-width:861px){.rlxbar{display:none!important}}
@media(max-width:860px){
  .rlbar__in{height:58px;gap:10px}
  .rlbar__nav{gap:9px}
  .rlbar__nav a.rlbar__plain{display:none}
  .rlbar__login{padding:7px 11px;font-size:13.5px}
  .rlbar__cta{padding:8px 12px;font-size:13.5px}
  .rlbar__logo{font-size:18px}
  .rlbar__sub{display:flex}
}
/* Bardzo waskie ekrany: zostaje logo + motyw + „Zaloz konto" (logowanie jest w stopce
   i pod adresem /login.html) — inaczej belka wystawala poza ekran. */
/* Ponizej 600px zostaja OBA przyciski (logowanie i zalozenie konta) — wczesniej „Zaloguj sie"
   znikalo i na telefonie nie bylo jak wejsc na konto. Zwezamy je zamiast chowac. */
@media(max-width:600px){
  .rlbar__logo{font-size:17px} .rlbar__in{padding:0 12px;gap:8px} .rlbar__nav{gap:7px}
  .rlbar__nav a.rlbar__login{padding:7px 9px;font-size:12.5px}
  .rlbar__nav a.rlbar__cta{padding:7px 10px;font-size:12.5px}
  .rlbar__theme{width:32px;height:32px;font-size:13px}
  /* CEL DOTYKOWY 44 px (19.09.2026, pomiar na produkcji 360x640): „Zaloguj się" i „Załóż konto" miały 37 px wysokości —
     to jedyne stałe CTA na stronach treści. Belka ma 59 px, więc 44 px mieści się bez zmiany jej wysokości. */
  .rlbar__nav a.rlbar__login,.rlbar__nav a.rlbar__cta{min-height:44px;display:inline-flex;align-items:center;box-sizing:border-box}
}
@media(max-width:400px){ .rlbar__theme{display:none} .rlbar__logo span{display:none} }

/* ── STOPKA ──────────────────────────────────────────────────────────────── */
.rlfoot{background:var(--rlc-band);border-top:1px solid var(--rlc-rule);color:var(--rlc-mut);
  font-family:var(--rlc-sans);font-size:14px;margin-top:64px;width:100%}
.rlfoot__in{max-width:var(--rlc-w);margin:0 auto;padding:46px 22px 0}
/* Piata kolumna (Poradniki) doszla 27.08. Przy piaciu kolumnach staly podzial robi sie ciasny,
   wiec kolumny linkow dostaja wspolna szerokosc minimalna, a blok marki zostaje szerszy. */
.rlfoot__grid{display:grid;grid-template-columns:1.6fr repeat(4, minmax(150px, 1fr));gap:28px}
@media(max-width:1000px){.rlfoot__grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.rlfoot__grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:440px){.rlfoot__grid{grid-template-columns:1fr}}
.rlfoot__logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--rlc-ink);font-weight:600;font-size:19px;letter-spacing:-.02em}
.rlfoot p{margin:8px 0 0;line-height:1.6;text-align:left}
.rlfoot__who{color:var(--rlc-ink2);font-size:12.5px;margin-top:12px;line-height:1.55}
.rlfoot__who b{color:var(--rlc-ink)}
.rlfoot .rlfoot__col h3,.rlfoot h4{font-family:var(--rlc-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rlc-ink2);margin:0 0 11px;font-weight:600}
.rlfoot__col a,.rlfoot__col button{display:block;margin-bottom:8px;color:var(--rlc-mut);text-decoration:none;
  background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer}
.rlfoot__col a:hover,.rlfoot__col button:hover{color:var(--rlc-ink);text-decoration:underline}
.rlfoot__base{max-width:var(--rlc-w);margin:34px auto 0;padding:18px 22px 40px;border-top:1px solid var(--rlc-rule);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.rlfoot__base a{color:var(--rlc-ink2);text-decoration:none}
.rlfoot__base a:hover{color:var(--rlc-ink);text-decoration:underline}

/* Elementy pływające innych komponentów (czat gościa, baner zgód, przycisk cookies) muszą
   trzymać się VIEWPORTU. Wcześniej liczyły pozycję w % od rozciągniętego dokumentu i lądowały
   poza ekranem — po włączeniu `overflow-x:clip` byłyby po prostu niewidoczne. */
/* Czat gościa: pozycja liczona od LEWEJ w jednostkach viewportu — `right` odnosiło się do
   rozciągniętego dokumentu i przycisk lądował poza ekranem (po `overflow-x:clip` = niewidoczny). */
.rlgz-bak{right:auto!important;left:calc(100vw - 62px)!important}
.rlgz-panel,.rlgz-box{max-width:calc(100vw - 24px)!important}
#rl-cmp .rlc-bar{left:50vw!important}
#rl-cmp .rlc-fab{left:18px!important}

/* Kolumny stopki i nawigacja w belce to elementy <nav> — strony-gospodarze maja globalna regule
   `nav{position:sticky;background:...;border-bottom:...}`, ktora zlewala sie na nie i robila z
   kolumn jasne, przyklejone prostokaty („stopka wyglada dziwnie", zgloszone 26.08 — DRUGI raz,
   bo ten sam blad byl wczesniej przy `.footcol`). Twardy reset, zeby zaden gospodarz nie wygral. */
.rlfoot nav,.rlbar nav{position:static!important;top:auto!important;z-index:auto!important;
  background:none!important;border:0!important;box-shadow:none!important;padding:0!important;
  margin:0!important;height:auto!important;width:auto!important;display:block!important;backdrop-filter:none!important}
.rlbar nav.rlbar__nav{display:flex!important}
.rlfoot,.rlbar{box-sizing:border-box}
.rlfoot *,.rlbar *{box-sizing:border-box}

/* ── JEDNOLITA SZEROKOSC TRESCI ─────────────────────────────────────────────────────────────
   Nadpisujemy lokalne `max-width` kontenerow stron (bylo: 820/860/940/960/1060 na publicznych).
   `!important`, bo strony maja te wartosci wpisane na twardo w swoich <style>. */
.wrap,.footgrid,.footbase,footer .row,.shell{max-width:var(--rlc-w)!important}
/* Czytelnosc: dlugie akapity i listy dostaja wlasny limit dlugosci linii, zamiast zwezac
   caly kontener. Tabele, siatki, karty i podglady zostaja na pelnej szerokosci. */
.wrap > p,.wrap > ul,.wrap > ol,.wrap > blockquote,
.prose p,.prose li,.legal p,.legal li,
main > p,main > ul,main > ol,
article p,article li,section > .wrap > p,section > .wrap > ul,section > .wrap > ol{max-width:var(--rlc-measure)}
/* STRONY TRESCI (regulaminy, umowy, polityki) — oznaczone `data-rl-tresc` na <body>.
   Powod (27.08): po ujednoliceniu kontenera do 1060px akapity ograniczyla regula wyzej, ale
   LISTY zagniezdzone w blokach (np. <ol> w <div class="key"> w regulaminie) juz nie — nie sa
   bezposrednim dzieckiem `.wrap`. Efekt byl gorszy niz przed zmiana: linie po ~150 znakow.
   Tu ograniczamy tekst NIEZALEZNIE od zagniezdzenia; tabele, karty i siatki zostaja szerokie,
   bo tam pelna szerokosc jest do czegos potrzebna. */
[data-rl-tresc] p,[data-rl-tresc] li,[data-rl-tresc] dd{max-width:var(--rlc-measure)}
[data-rl-tresc] td p,[data-rl-tresc] th p,[data-rl-tresc] td li,
[data-rl-tresc] .card p,[data-rl-tresc] .card li,
[data-rl-tresc] .rlfoot p,[data-rl-tresc] .rlbar p{max-width:none}
/* Formularze (logowanie, rejestracja) zostaja waskie — to nie jest tresc do czytania.
   OSKOPOWANE 27.08: regula bez `:has()` lapala KAZDY `.card`, wiec karty TRESCI na 13 stronach
   publicznych (pomoc, dla-partnerow, integracje, bezpieczenstwo, zaufanie...) renderowaly sie
   na 392px — na desktopie wygladalo to „jak na komorce". Zwezamy tylko karty z formularzem. */
.card:has(input),.card:has(form){max-width:392px!important}

/* Cytat i kod w tresci — renderer bloga wypuszcza <blockquote> i <code>, a zaden arkusz
   ich nie stylowal: cytat wygladal jak zwykly akapit, kod roznil sie tylko krojem. Reguly sa
   zawezone do [data-rl-tresc], zeby nie ruszyc stron, ktore maja juz wlasne. */
[data-rl-tresc] blockquote{
  margin:18px 0;padding:2px 0 2px 16px;
  border-left:3px solid var(--rlc-ink,currentColor);
  opacity:.9;font-style:italic
}
[data-rl-tresc] blockquote p{margin:0}
[data-rl-tresc] code{
  font-size:.92em;padding:1px 5px;border-radius:4px;
  background:color-mix(in srgb, currentColor 10%, transparent);
  /* Zapas dla przegladarek bez color-mix — bez tego kod nie mialby tla wcale. */
  background:rgba(127,127,127,.16)
}
[data-rl-tresc] pre code{background:none;padding:0}

/* ── ARTYKUL (blog) ─────────────────────────────────────────────────────────
   Regula `[data-rl-tresc] p{max-width:74ch}` zwezajaca SAM AKAPIT jest dobra na regulaminie,
   bo tam prawie nie ma naglowkow — cala strona to jeden slup tekstu. Na wpisie blogowym daje
   efekt odwrotny do zamierzonego: <h1> i <h2> siegaja krawedzi kontenera (1060px), akapit konczy
   sie na ~740px i prawa jedna trzecia strony zieje pustka. Wyglada to na niedokonczone, nie na
   zaprojektowane — i wlasnie tak zostalo zglosozne 28.08.
   Na artykule zwezamy WHOLE KOLUMNE, a limit z akapitu zdejmujemy: wtedy tytul, tekst, cytat
   i obrazek maja JEDNA krawedz. Miara czytelnosci zostaje ta sama, tylko trzyma ja kontener.
   `!important` jest konieczne, bo wspolna regula `.wrap{max-width:var(--rlc-w)!important}`
   inaczej wygrywa mimo wiekszej szczegolowosci selektora. */
[data-rl-artykul] main.wrap{max-width:760px!important}
[data-rl-artykul] p,[data-rl-artykul] li,[data-rl-artykul] dd{max-width:none}
[data-rl-artykul] main.wrap > p,[data-rl-artykul] main.wrap > ul,[data-rl-artykul] main.wrap > ol{
  font-size:17.5px;line-height:1.75
}
[data-rl-artykul] h2{margin-top:2.1em;font-size:26px;line-height:1.25}
[data-rl-artykul] h3{margin-top:1.7em;font-size:20px}
[data-rl-artykul] .lead{font-size:19.5px;line-height:1.6;opacity:.92}

/* Obrazek naglowkowy wpisu i miniatury na liscie. Do 28.08 blog nie mial ANI JEDNEGO obrazka:
   karty `/marka/social/blog/*.png` powstaly, ale zylly wylacznie w `og:image`, czyli widzial je
   kto inny (Facebook) niz czytelnik. */
[data-rl-artykul] .rlhero{margin:22px 0 26px;border-radius:12px;overflow:hidden;border:1px solid var(--rlc-rule)}
[data-rl-artykul] .rlhero img{display:block;width:100%;height:auto}

.rllista{display:grid;gap:26px;margin:26px 0 0;padding:0;list-style:none}
.rllista__el{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.rllista__mini{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--rlc-rule)}
.rllista__mini img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}
.rllista__el h2{margin:0 0 6px;font-size:21px;line-height:1.3}
.rllista__el p{margin:0 0 6px;max-width:none}
@media(max-width:640px){.rllista__el{grid-template-columns:1fr}}

/* RACHUNEK — wyliczenie jako wyliczenie, a nie jako kolejna lista punktowana.
   Te wpisy sa o liczbach; dopoki liczby siedza w zdaniu, czytelnik ich nie widzi. */
.rlrach{margin:24px 0;padding:16px 18px;border:1px solid var(--rlc-rule);border-radius:12px;
  background:color-mix(in srgb, currentColor 4%, transparent);background:rgba(127,127,127,.06)}
.rlrach figcaption{font-weight:700;font-size:14px;margin-bottom:10px;opacity:.85}
.rlrach__w{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-bottom:1px solid rgba(127,127,127,.18);font-size:16px}
.rlrach__w:last-child{border-bottom:none}
.rlrach__w b{font-variant-numeric:tabular-nums;white-space:nowrap}
.rlrach__sum{margin-top:4px;padding-top:11px;border-top:2px solid currentColor;border-bottom:none;font-weight:700;font-size:18px}
/* Statyczna stopka prawna dla robotów i przeglądarek bez JS (src/stopka-statyczna.js). site-chrome.js
   zdejmuje ją po starcie (usuwa każdy <footer> poza .rlfoot), więc z JS nie ma dwóch stopek. */
.rl-prawne{max-width:var(--rlc-w,1060px);margin:32px auto 24px;padding:0 16px;font:14px/1.6 system-ui,-apple-system,sans-serif;opacity:.85;text-align:justify}
.rl-prawne a{color:inherit;text-decoration:underline;text-underline-offset:3px}