/* =====================================================================
   Blog AdLume — arkusz wspólny dla wpisu i strony głównej bloga.

   ŹRÓDŁO 1, karty i kolory: front aplikacji, `../apka_nowa/style.css`.
   Zmierzone 2026-08-14 na żywym `dashboard.html`:
     karta   tło linear-gradient(#282828,#1d1d1d), obrys 1px rgba(82,82,82,.7),
             promień 16px, wypełnienie 24px,
             cień inset 0 1px 0 rgba(255,255,255,.04) oraz 0 20px 44px -24px rgba(0,0,0,.7)
     h2      20px/600, odstęp dolny 8px
     akapit  14px/500, interlinia 22.75px, kolor #d4d4d4
     strona  tło #151515, Outfit 14px/500

   ŹRÓDŁO 2, górny pasek: landing produktu, `../landing_kopia/index.html`.
   Zmierzony 2026-08-14 na uruchomionej kopii:
     pasek   wysokość 66px, promień 48px, obrys 1px rgba(216,216,216,.3),
             tło linear-gradient(rgba(25,25,26,.5), rgba(25,25,26,.8)),
             rozmycie 20px, cień 4px 4px 10px rgba(21,21,22,.15), wcięcie 32px
     Login   pigułka 999px, tło #252527, wypełnienie 8px 24px, wysokość 48px
     Get started  pigułka 999px, gradient 90deg #e4fe3c → #7bfe3c, tekst #151515

   ŚWIADOME ODSTĘPSTWA (żeby nikt ich nie „poprawił"):
   1. tekst do czytania 17px zamiast 14px z pulpitu, bo wpis czyta się linijka
      po linijce, a pulpit skanuje się wzrokiem;
   2. kolumna tekstu 72 znaki zamiast 46 z karty aplikacji;
   3. nagłówki wezwań większe niż 20px z aplikacji, bo mają sprzedawać;
   4. jasny wariant paska nie istnieje w landingu, wartości wzięte z motywu
      jasnego aplikacji;
   5. tło #151515 z aplikacji, nie #151516 z landingu (różnica niewidoczna).
   ===================================================================== */

@font-face{
  font-family:'Outfit';
  src:url(/fonts/Outfit-VariableFont_wght.ttf) format('truetype-variations');
  font-weight:100 900;
  font-display:swap;
}

/* ---------- motyw ciemny ---------- */
:root{
  --tlo:#151515;
  --tlo-paska:#1b1b1e;
  --obrys-paska:#525252;
  --tlo-karty:linear-gradient(#282828,#1d1d1d);
  --obrys-karty:rgba(82,82,82,.7);
  --cien-karty:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 44px -24px rgba(0,0,0,.7);
  --tlo-najazd:#2a2a2e;
  --tlo-pola:#151515;
  --tekst:#ffffff;
  --tekst-drugi:#d4d4d4;
  --tekst-slaby:#a3a3a3;
  --obrys:#525252;
  --obrys-pola:rgba(216,216,216,.3);
  --obrys-kafelka:#f5f5f5;
  --zielen:#86ff1d;
  --zielen-kafelka:#4a7c1a;
  --zielen-przycisk:#66b91e;
  --promien:8px;
  --promien-karty:16px;
  --promien-karty-form:12px;
  --promien-kafelka:10px;
  --promien-pole:24px;
  --kod-tlo:#101010;
  --tlo-paska-plyw:linear-gradient(rgba(25,25,26,.5),rgba(25,25,26,.8));
  --obrys-paska-plyw:rgba(216,216,216,.3);
  --tlo-login:#252527;
  --gradient-akcji:linear-gradient(90deg,#e4fe3c,#7bfe3c);
}

/* ---------- motyw jasny ---------- */
html.light{
  --tlo:#ffffff;
  --tlo-paska:#ffffff;
  --obrys-paska:#f5f5f5;
  --tlo-karty:linear-gradient(#ffffff 0%,#fcfcfd 100%);
  --obrys-karty:#e3e5ea;
  --cien-karty:0 1px 2px rgba(16,24,40,.04), 0 6px 20px -10px rgba(16,24,40,.1);
  --tlo-najazd:#f5f5f5;
  --tlo-pola:#ffffff;
  --tekst:#151515;
  --tekst-drugi:#525252;
  --tekst-slaby:#737373;
  --obrys:#e5e5e5;
  --obrys-pola:#d4d4d4;
  --obrys-kafelka:#f5f5f5;
  --zielen:#387400;
  --zielen-kafelka:#387400;
  --kod-tlo:#f6f6f4;
  --tlo-paska-plyw:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.85));
  --obrys-paska-plyw:#e5e5e5;
  --tlo-login:#f5f5f5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--tlo);
  color:var(--tekst);
  font-family:'Outfit',system-ui,sans-serif;
  font-weight:500;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
.wrap{width:min(100%,1180px);margin:0 auto;padding:0 clamp(16px,4vw,32px)}

/* ---------- górny pasek: pigułka z landingu ---------- */
.pasek-warstwa{position:sticky;top:0;z-index:50;padding:24px clamp(16px,4vw,32px) 0}
.pasek-gorny{
  width:min(100%,1158px);margin:0 auto;min-height:66px;
  display:flex;align-items:center;gap:24px;padding:0 8px 0 32px;
  border:1px solid var(--obrys-paska-plyw);border-radius:48px;
  background:var(--tlo-paska-plyw);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:4px 4px 10px rgba(21,21,22,.15);
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.logo img{height:19px;display:block}
html.light .logo img{filter:invert(1)}
.menu{display:flex;gap:28px;margin:0 auto}
.menu a{font-size:18px;font-weight:500;color:var(--tekst);text-decoration:none;position:relative;padding:2px 0}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--zielen);transition:right .25s ease}
.menu a:hover::after,.menu a.aktywna::after{right:0}
.pasek-prawo{display:flex;align-items:center;gap:10px;flex:none}
.motyw svg{width:17px;height:17px}
.motyw{background:none;border:1px solid var(--obrys-pola);color:var(--tekst-slaby);cursor:pointer;
  width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-family:inherit}
.przycisk{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font-family:inherit;font-weight:500;font-size:16px;
  min-height:48px;padding:8px 24px;border-radius:999px;
  background:var(--gradient-akcji);color:#151515;text-decoration:none;white-space:nowrap;
}
.przycisk.pusty{background:var(--tlo-login);border:1px solid var(--obrys-pola);color:var(--tekst)}
.przycisk.pelny{width:100%}

/* ---------- kafelek ---------- */
.kafelek{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border-radius:var(--promien-kafelka);border:1px solid var(--obrys-kafelka);
  background:transparent;font-size:13px;color:var(--tekst);font-family:inherit;
}
.kafelek.zielony{
  background:color-mix(in srgb, var(--zielen-kafelka) 8%, transparent);
  border-color:color-mix(in srgb, var(--zielen-kafelka) 38%, transparent);
}
.kafelek .kropka{width:7px;height:7px;border-radius:999px;background:var(--zielen);flex:none}

/* ---------- karta: jedyny pojemnik aplikacji ---------- */
.karta{
  background:var(--tlo-karty);
  border:1px solid var(--obrys-karty);
  border-radius:var(--promien-karty);
  box-shadow:var(--cien-karty);
  padding:24px;
}

/* ---------- nagłówek wpisu ---------- */
.hero{padding:clamp(36px,6vh,64px) 0 0;max-width:900px}
h1{font-size:clamp(32px,4.2vw,50px);font-weight:600;line-height:1.08;letter-spacing:-.02em;
   margin:18px 0 0;color:var(--tekst)}
.lede{margin:18px 0 0;font-size:19px;font-weight:400;line-height:1.6;color:var(--tekst-drugi);max-width:62ch}
.autor{display:flex;align-items:center;gap:12px;margin:26px 0 0;font-size:14px;color:var(--tekst-slaby)}
.awatar{width:34px;height:34px;border-radius:999px;flex:none;background:var(--zielen-przycisk);
  display:flex;align-items:center;justify-content:center;color:#151515;font-weight:600;font-size:14px}
.autor b{color:var(--tekst);font-weight:600}
.okladka{margin:32px 0 0;border:1px solid var(--obrys-karty);border-radius:var(--promien-karty);
  overflow:hidden;box-shadow:var(--cien-karty)}
.okladka img{display:block;width:100%;height:auto}

/* ---------- układ wpisu ---------- */
.uklad{display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;padding:48px 0 0;align-items:start}
.bok{position:sticky;top:114px;display:flex;flex-direction:column;gap:16px;
  max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;padding-right:4px}
.spis h4{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--tekst)}
.spis ol{margin:0;padding:0;list-style:none}
.spis li{font-size:13.5px;line-height:1.45;padding:8px 0 8px 12px;border-left:2px solid transparent;color:var(--tekst-slaby)}
.spis li.aktywna{color:var(--tekst);border-left-color:var(--zielen)}

/* ---------- treść ---------- */
.tresc{min-width:0;max-width:72ch}
.tresc h2{font-size:26px;font-weight:600;letter-spacing:-.01em;margin:44px 0 12px;color:var(--tekst)}
.tresc h2:first-child{margin-top:0}
.tresc p{margin:0 0 22px;font-size:17px;font-weight:400;line-height:1.75;color:var(--tekst-drugi)}
.tresc ul{margin:0 0 22px;padding-left:1.15em;font-size:17px;font-weight:400;line-height:1.75;color:var(--tekst-drugi)}
.tresc li{margin-bottom:9px}
.tresc li::marker{color:var(--zielen)}
.tresc b,.tresc strong{color:var(--tekst);font-weight:600}
.tresc a.odnosnik{color:var(--zielen);text-decoration:underline;text-underline-offset:3px}
.tresc em.zazn{font-style:normal;color:var(--tekst);
  box-shadow:inset 0 -8px 0 color-mix(in srgb, var(--zielen) 26%, transparent)}

/* ---------- blok do skopiowania ----------
   Ikona siedzi w prawym górnym rogu bloku. Pojawia się zawsze, nie tylko po
   najechaniu: na telefonie nie ma najeżdżania, a to jest właśnie ten sprzęt,
   na którym przepisywanie promptu ręcznie boli najbardziej. */
.kod{position:relative;margin:26px 0}
.kod-gora{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 16px;
  background:var(--kod-tlo);
  border:1px solid var(--obrys-karty);border-bottom:0;
  border-radius:var(--promien-karty-form) var(--promien-karty-form) 0 0;
}
.kod-nazwa{font-size:12px;font-weight:500;color:var(--tekst-slaby);letter-spacing:.02em}
.kopiuj{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:500;color:var(--tekst-slaby);
  background:transparent;border:1px solid var(--obrys-pola);
  border-radius:var(--promien);padding:5px 10px;
}
.kopiuj:hover{color:var(--tekst);border-color:var(--zielen)}
.kopiuj.zrobione{color:var(--zielen);border-color:var(--zielen)}
.kopiuj svg{width:13px;height:13px;flex:none}
.kod pre{
  margin:0;padding:18px 22px;background:var(--kod-tlo);
  border:1px solid var(--obrys-karty);
  border-radius:0 0 var(--promien-karty-form) var(--promien-karty-form);
  overflow-x:auto;color:var(--zielen);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.7;
}
/* wariant dla promptu: tekst czyta się jak tekst, nie jak kod */
.kod.prompt pre{color:var(--tekst-drugi);white-space:pre-wrap;font-size:14.5px;line-height:1.65}

.uwaga{display:flex;gap:14px;margin:28px 0;padding:18px 20px;
  border:1px solid color-mix(in srgb, var(--zielen-kafelka) 38%, transparent);
  border-left:3px solid var(--zielen);border-radius:var(--promien-karty-form);
  background:color-mix(in srgb, var(--zielen-kafelka) 8%, transparent)}
.uwaga .k{flex:none;font-size:13px;font-weight:600;color:var(--zielen);padding-top:2px}
.uwaga p{margin:0;font-size:16px;line-height:1.65;color:var(--tekst)}

.liczby{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}
.liczby .karta{padding:20px}
.liczby span{display:block;font-size:12px;font-weight:500;color:var(--tekst-slaby);margin-bottom:6px}
.liczby b{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--tekst)}

/* =====================================================================
   WEZWANIA DO DZIAŁANIA

   Jeden wzorzec karty, trzy wielkości. Wzorzec wybrał Marek 2026-08-14
   wskazując na kartę końcową: "ma fajną ramkę, jest opisane, klient musi
   wiedzieć co się stanie i musi czuć się bezpieczny i zaopiekowany".

   Stąd trzy rzeczy obowiązkowe w KAŻDYM wezwaniu:
   1. etykieta u góry, żeby było widać, czym to jest, zanim się przeczyta;
   2. zdanie mówiące, co konkretnie przyjdzie na podany adres;
   3. pole na adres. Sam przycisk bez pola przerzuca pracę na inną stronę.

   Zakaz: dwa wezwania obok siebie w jednym rzędzie. Rozdziela je treść.
   ===================================================================== */

.cta{margin:44px 0}
.cta .naglowek{margin:14px 0 0;font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--tekst)}
.cta .opis{margin:10px 0 20px;font-size:15px;font-weight:500;line-height:1.65;color:var(--tekst-drugi);max-width:54ch}
.cta .zgoda{margin:14px 0 0;font-size:12.5px;font-weight:500;line-height:1.55;color:var(--tekst-slaby)}
.cta .karta{border-color:color-mix(in srgb, var(--zielen-kafelka) 34%, var(--obrys-karty))}

/* wariant boczny: ta sama karta, ciaśniej, bo kolumna ma 300px */
.cta-bok .naglowek{font-size:19px;margin-top:12px}
.cta-bok .opis{font-size:14px;margin-bottom:16px}
.cta-bok ul{margin:0 0 18px;padding:0;list-style:none}
.cta-bok li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:500;
  line-height:1.5;color:var(--tekst-drugi);margin-bottom:9px}
.cta-bok li::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;border-radius:999px;background:var(--zielen)}

/* własny formularz, bez wklejanego kodu z MailerLite */
.formularz{display:flex;gap:10px;flex-wrap:wrap}
.pole{
  flex:1 1 220px;min-width:0;
  font:inherit;font-size:16px;font-weight:400;
  background:var(--tlo-pola);color:var(--tekst);
  border:1px solid var(--obrys-pola);border-radius:var(--promien-pole);
  padding:12px 24px;
  height:48px;                /* równa wysokość z przyciskiem obok */
}
.pole::placeholder{color:var(--tekst-slaby)}
/* Układ pionowy: bez tej linii pole rozciąga się na całą wysokość karty,
   bo `flex:1 1 220px` w kolumnie rośnie w pionie, nie w poziomie.
   Tak wyglądał błąd zgłoszony przez Marka 2026-08-14. */
.formularz.pion{flex-direction:column;flex-wrap:nowrap}
.formularz.pion .pole{flex:0 0 48px;width:100%}
.formularz.pion .przycisk{width:100%}
.formularz-komunikat{flex:1 0 100%;margin:2px 0 0;font-size:13px;font-weight:500;line-height:1.45;color:var(--tekst-drugi)}
.formularz-komunikat:empty{display:none}
.formularz-komunikat.ok{color:var(--zielen)}
.formularz-komunikat.blad{color:#ef6b73}
.formularz[aria-busy="true"] .przycisk{cursor:wait;opacity:.72}

/* ---------- dalsza lektura ---------- */
.dalej{padding:72px 0 0}
.dalej h4{margin:0 0 18px;font-size:13px;font-weight:600;color:var(--tekst)}
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.karty .karta:hover{border-color:color-mix(in srgb, var(--zielen) 45%, transparent)}
.karty h5{margin:12px 0 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--tekst)}
.karty small{display:block;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--tekst-slaby)}

.stopka{margin:76px 0 0;padding:24px 0 56px;border-top:1px solid var(--obrys-paska);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;font-weight:400;color:var(--tekst-slaby)}

/* =====================================================================
   STRONA GŁÓWNA BLOGA
   ===================================================================== */
.naglowek-listy{padding:clamp(40px,7vh,80px) 0 0;max-width:760px}
.naglowek-listy h1{font-size:clamp(38px,5vw,60px);margin:18px 0 0}
.naglowek-listy p{margin:18px 0 0;font-size:19px;font-weight:400;line-height:1.6;color:var(--tekst-drugi)}

.filtry{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 0}
.filtry .kafelek{cursor:pointer}
.filtry .kafelek.wybrany{background:var(--gradient-akcji);border-color:transparent;color:#151515;font-weight:600}

/* wyróżniony pierwszy wpis */
.polecany{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;
  margin:40px 0 0;overflow:hidden;padding:0}
.polecany .obraz{margin:0;min-height:100%}
.polecany .obraz img{display:block;width:100%;height:100%;object-fit:cover}
.polecany .opis{padding:32px}
.polecany h2{margin:14px 0 0;font-size:30px;font-weight:600;line-height:1.15;letter-spacing:-.02em;color:var(--tekst)}
.polecany p{margin:14px 0 0;font-size:16px;font-weight:400;line-height:1.6;color:var(--tekst-drugi)}
.polecany .meta{margin:20px 0 0;font-size:13px;font-weight:500;color:var(--tekst-slaby)}
.wiecej{display:inline-flex;align-items:center;gap:7px;margin:22px 0 0;
  font-size:15px;font-weight:600;color:var(--zielen);text-decoration:none}
.wiecej:hover{gap:11px}

.siatka{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0 0}
.wpis{display:flex;flex-direction:column;padding:0;overflow:hidden}
.karta[hidden]{display:none!important}
.wpis .obraz{margin:0;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--obrys-karty)}
.wpis .obraz img{display:block;width:100%;height:100%;object-fit:cover}
.wpis .opis{padding:22px;display:flex;flex-direction:column;flex:1}
.wpis h3{margin:12px 0 0;font-size:19px;font-weight:600;line-height:1.3;color:var(--tekst)}
.wpis p{margin:10px 0 0;font-size:14px;font-weight:500;line-height:1.6;color:var(--tekst-drugi)}
.wpis .meta{margin:16px 0 0;font-size:12.5px;font-weight:500;color:var(--tekst-slaby)}
.wpis .wiecej{margin-top:auto;padding-top:18px;font-size:14px}

/* pas zapisu wpleciony w listę */
.pas-zapisu{margin:36px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:32px;align-items:center}
.pas-zapisu h3{margin:12px 0 0;font-size:26px;font-weight:600;letter-spacing:-.015em;color:var(--tekst)}
.pas-zapisu p{margin:10px 0 0;font-size:15px;font-weight:500;line-height:1.6;color:var(--tekst-drugi);max-width:48ch}

@media(max-width:1000px){
  .siatka{grid-template-columns:repeat(2,1fr)}
  .polecany{grid-template-columns:1fr}
  .pas-zapisu{grid-template-columns:1fr}
}
@media(max-width:900px){
  .uklad{grid-template-columns:1fr;gap:28px}
  .bok{position:static;max-height:none;overflow:visible;padding-right:0}
  .karty,.siatka{grid-template-columns:1fr}
  .cta-panele{grid-template-columns:1fr}
  .menu{display:none}
}

/* Tytuły na listach są odnośnikami, ale mają wyglądać jak nagłówki.
   Podkreślenie zostawiamy tylko odnośnikom wewnątrz tekstu wpisu. */
.polecany h2 a,.wpis h3 a,.karty h5 a{text-decoration:none}
.polecany h2 a:hover,.wpis h3 a:hover,.karty h5 a:hover{color:var(--zielen)}

/* Ramka „Key takeaways" ze starych wpisów. */
.kluczowe{margin:32px 0;padding:24px;border-radius:var(--promien-karty);
  border:1px solid color-mix(in srgb, var(--zielen-kafelka) 38%, transparent);
  background:color-mix(in srgb, var(--zielen-kafelka) 8%, transparent)}
.kluczowe h2{margin:0 0 12px;font-size:18px;font-weight:600;color:var(--zielen)}
.kluczowe ul{margin:0;padding-left:1.1em;font-size:16px;line-height:1.7;color:var(--tekst-drugi)}
.kluczowe li{margin-bottom:8px}
.kluczowe p{margin:0 0 10px;font-size:16px;line-height:1.7;color:var(--tekst-drugi)}

/* Sekcja pytań i odpowiedzi przeniesiona ze starych wpisów. */
.faq{margin:56px 0 0}
.faq h2{font-size:26px;font-weight:600;margin:0 0 18px;color:var(--tekst)}
.faq h3{font-size:18px;font-weight:600;margin:24px 0 6px;color:var(--tekst)}
.faq p{margin:0;font-size:16px;line-height:1.7;color:var(--tekst-drugi)}


/* =====================================================================
   RESPONSYWNOŚĆ I NADMIAR SZEROKOŚCI
   Dopisane 2026-08-14 po zgłoszeniu, że wpis „Skills for Marketing
   Workflows" da się przewijać w bok. Przyczyny były dwie i obie dotyczyły
   wszystkich wpisów, nie tego jednego.
   ===================================================================== */

/* 1. Obrazy w treści wpisu. Pochodzą z oryginałów o szerokości 1600 pikseli
      i bez tej reguły wychodziły poza ekran na telefonie o 1256 pikseli. */
.tresc img{
  display:block;max-width:100%;height:auto;margin:28px 0;
  border-radius:var(--promien-karty-form);
  border:1px solid var(--obrys-karty);
}
.tresc figure{margin:28px 0}
.tresc figcaption{margin-top:10px;font-size:13.5px;color:var(--tekst-slaby)}

/* 2. Rzeczy, które z natury bywają szersze niż kolumna: tabele, długie linie
      kodu i długie adresy. Każda dostaje własne przewijanie w poziomie,
      zamiast rozpychać całą stronę. */
.tresc table{display:block;width:100%;max-width:100%;overflow-x:auto;
  border-collapse:collapse;margin:26px 0;font-size:15px}
.tresc th,.tresc td{border:1px solid var(--obrys-karty);padding:10px 12px;text-align:left;
  vertical-align:top}
.tresc th{color:var(--tekst);font-weight:600}
.kod pre{max-width:100%}
.tresc a{overflow-wrap:anywhere}
.tresc,.tresc p,.tresc li,.tresc h2,.tresc h3{overflow-wrap:break-word}

/* 3. Górny pasek na wąskim ekranie. Przy 375 pikselach logotyp, przycisk
      i wcięcie 32 pikseli nie mieściły się razem. */
@media(max-width:560px){
  .pasek-warstwa{padding:14px 12px 0}
  .pasek-gorny{padding:0 6px 0 16px;gap:10px;min-height:56px}
  .logo img{height:16px}
  .przycisk{font-size:14px;padding:8px 16px;min-height:42px}
  .motyw{width:36px;height:36px}
  .motyw svg{width:15px;height:15px}
  .wrap{padding:0 16px}
  .liczby{grid-template-columns:1fr}
  .hero{padding-top:28px}
  .tresc h2{font-size:22px}
  .tresc p,.tresc ul{font-size:16px}
  .cta .naglowek{font-size:21px}
  .polecany .opis,.wpis .opis{padding:20px}
  .stopka{flex-direction:column;gap:8px}
}

/* Filtry kategorii na liście wpisów. */
.filtry .kafelek{cursor:pointer;transition:.15s}
.filtry .kafelek:hover{border-color:var(--zielen)}
.filtry .kafelek .ile{opacity:.55;font-size:12px;margin-left:2px}
.filtry .kafelek.wybrany{background:var(--gradient-akcji);border-color:transparent;
  color:#151515;font-weight:600}
.filtry .kafelek.wybrany .ile{opacity:.7}
.pusto{margin:28px 0 0;font-size:16px;color:var(--tekst-slaby)}

/* Strony prawne: ta sama typografia co wpis, tylko bez kolumny bocznej,
   więc kolumna tekstu może być odrobinę szersza. */
.tresc-prawna{max-width:78ch;margin:0 auto;padding-top:8px}
.tresc-prawna h2{font-size:22px;margin:38px 0 10px}
.tresc-prawna h3{font-size:18px;font-weight:600;margin:26px 0 8px;color:var(--tekst)}
.tresc-prawna p,.tresc-prawna li{font-size:16px;line-height:1.75}

/* Nagłówek strony prawnej trzyma tę samą kolumnę co jej treść. */
.hero-prawny{max-width:78ch;margin:0 auto;padding-bottom:8px}
.tresc-prawna a{color:var(--zielen);text-decoration:underline;text-underline-offset:3px}