/* landing.css v2 — design system landingów spójny z portalem klient.webup.pl
   (Inter, niebieskawy #F1F5FB i granat #1E3A5F jak na jowes.webup.pl, akcent pomarańczowy #F97316, promienie 6/10/14/18, miękkie cienie).
   Per-landing akcent pomocniczy: klasa theme-* na <body> ustawia --lp (kolor ikon/badge/mockupów);
   CTA zawsze pomarańczowe jak w portalu. */
:root {
  /* paleta zbliżona do jowes.webup.pl: chłodniejsze, bardziej niebieskie tło i granatowe nagłówki */
  --bg:            #F1F5FB;
  --surface:       #FFFFFF;
  --border:        #DCE4EF;
  --border-soft:   #E9EFF7;
  --border-strong: #C3D0E2;
  /* Kolory marki wprost z logo (webup-logo.svg): pomarańcz #FF6F00, granat #27495B.
     Wcześniej stały tu przybliżenia z Tailwinda (#F97316/#1E3A5F) i logo nie zgadzało się
     z resztą strony. --accent-fg to przyciemniony wariant do TEKSTU — czysty #FF6F00 na
     bieli ma kontrast ok. 2,9:1, czyli poniżej progu WCAG AA dla treści. */
  --navy:          #27495B;
  --fg:            #0F172A;
  --fg-secondary:  #475569;
  --fg-muted:      #94A3B8;
  --accent:        #FF6F00;
  --accent-hover:  #E56400;   /* CIEMNIEJSZY — tylko :active (wcisniecie). Hover ZAWSZE rozjasnia:
                                 --accent-light, tak jak przycisk „Umow rozmowe" w nawigacji (Oskar 1.10.2026). */
  --accent-light:  #FF8A00;   /* jasniejszy pomarancz — stan hover, patrz .btn-primary:hover */
  --accent-soft:   #FFF4EA;
  --accent-fg:     #FF6F00;
  --green:         #16A34A;
  --green-soft:    #F0FDF4;
  --red:           #DC2626;
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
  --lp: #FF6F00; --lp-soft: #FFF4EA;   /* akcent landingu (nadpisywany przez theme-*) */
}
body.theme-workspace { --lp:#1A73E8; --lp-soft:#EFF6FF; }
body.theme-cookie    { --lp:#D97706; --lp-soft:#FFFBEB; }
body.theme-hosting   { --lp:#059669; --lp-soft:#ECFDF5; }
body.theme-strona    { --lp:#7C3AED; --lp-soft:#F5F3FF; }
body.theme-adgrants  { --lp:#1A73E8; --lp-soft:#EFF6FF; }
body.theme-ping      { --lp:#DC2626; --lp-soft:#FEF2F2; }
body.theme-domeny    { --lp:#0891B2; --lp-soft:#ECFEFF; }

/* rachunek za odnowienie domeny (domeny) */
.mock-bill { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mbill-head { padding:13px 16px; background:var(--bg); border-bottom:1px solid var(--border); font-size:.85rem; font-weight:700; color:var(--fg); }
.mbill-head span { display:block; font-size:.72rem; font-weight:500; color:var(--fg-muted); }
.mbill-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border-soft); font-size:.86rem; color:var(--fg-secondary); }
.mbill-row .who { display:flex; align-items:center; gap:9px; }
.mbill-row .who i { width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:inline-block; }
.mbill-row del { color:var(--fg-muted); }
/* wiersz „tu płacicie dziś" — to on ma boleć, więc jest wyróżniony na czerwono */
.mbill-row.you { background:#FEF2F2; border-left:3px solid var(--red); padding-left:13px; }
.mbill-row.you .who { color:var(--fg); font-weight:600; }
.mbill-row.you .who i { background:var(--red); }
.mbill-row.you del { color:var(--red); font-size:1.05rem; font-weight:700; text-decoration-thickness:2px; }
.mbill-row.you .mbill-guess { color:var(--red); font-weight:600; font-size:.82rem; }
.you-tag { display:inline-block; margin-left:8px; background:var(--red); color:#fff; font-size:.66rem;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; vertical-align:middle; }
/* nasz wiersz — kontra do powyższego */
.mbill-row.we { background:color-mix(in srgb, var(--green) 8%, #fff); border-left:3px solid var(--green); padding-left:13px; }
.mbill-row.we .who { color:var(--fg); }
.mbill-row.we .who i { background:var(--green); }
.mbill-row.we b { color:var(--green); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
/* Podsumowanie: bohaterem jest OSZCZĘDNOŚĆ, nie nasza cena. */
.mbill-save { padding:20px 18px; background:var(--green-soft); text-align:center;
  border-top:1px solid color-mix(in srgb, var(--green) 25%, transparent); }
.mbill-save .sv-cap { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--green); }
.mbill-save .sv-big { font-size:2.4rem; font-weight:800; color:var(--green); letter-spacing:-.03em;
  line-height:1.05; margin:4px 0 6px; font-variant-numeric:tabular-nums; }
.mbill-save .sv-big small { display:block; font-size:.8rem; font-weight:600; color:var(--fg-secondary);
  letter-spacing:0; margin-top:2px; }
.mbill-save .sv-sub { font-size:.84rem; color:var(--fg-secondary); line-height:1.5; }
.mbill-save .sv-sub b { color:var(--green); font-weight:700; }
.mbill-save .sv-host { margin-top:12px; padding-top:11px; border-top:1px dashed color-mix(in srgb, var(--green) 30%, transparent);
  font-size:.82rem; color:var(--fg-secondary); line-height:1.5; }
.mbill-save .sv-host b { color:var(--fg); font-weight:700; }
.mbill-save .sv-host i { display:block; margin-top:4px; font-style:normal; font-size:.74rem; color:var(--fg-muted); }
/* domena klienta jako tytuł strony (personalizacja z linku ?d=) */
.hero h1 .h1-kicker { display:block; font-size:.86rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--green); margin-bottom:8px; }
/* stary wariant (pigułka) — zostaje dla makiety przed sprawdzeniem domeny */
.mbill-save > span { display:block; color:var(--fg-secondary); font-size:.9rem; line-height:1.5; }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--fg); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; }
a { color:var(--accent-fg); }

/* ── NAV ── */
/* Pasek przezroczysty: tło strony ma pod niego wchodzić. Po przewinięciu dokładamy
   lekkie rozmycie, żeby linki nie zlewały się z treścią. */
nav { position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:14px 32px; background:transparent;
  border-bottom:1px solid transparent; transition:background .2s, border-color .2s, backdrop-filter .2s; }
nav.stuck { background:rgba(255,255,255,.82); backdrop-filter:blur(10px);
  border-bottom-color:var(--border-soft); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { height:30px; display:block; }
/* Hamburger istnieje tylko na telefonie — reguły otwierania siedzą w media query na dole. */
.nav-toggle { display:none; }
.nav-burger { display:none; }
.nav-right { display:flex; align-items:center; gap:18px; }
.nav-link { color:var(--fg-secondary); text-decoration:none; font-size:.9rem; font-weight:500; }
.nav-link:hover { color:var(--fg); }
.nav-cta { display:inline-flex; align-items:center; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; padding:9px 18px; border-radius:var(--r); transition:.15s; white-space:nowrap; box-shadow:var(--shadow-sm); }
.nav-cta:hover { background:var(--accent-light); box-shadow:0 6px 18px rgba(255,111,0,.4); }
@media (max-width:560px){ .nav-link{display:none} }

/* ── HERO (jasne, 2 kolumny: copy + mockup) ── */
/* Hero landingu ma to samo ruchome tło co strona główna (warstwa .wu-bg wstrzykiwana
   przez wu_bg_html). Płaski gradient zostaje jako podkład pod plamami i jako wygląd
   awaryjny, gdy ktoś ma wyłączone animacje. `overflow:hidden` przycina plamy do sekcji. */
/* Hero landingu wchodzi POD pasek nawigacji — dokładnie tak jak .wu-hero na stronie
   głównej. Bez tego pasek stał na jasnym pasie tła strony i białe pozycje menu były
   na nim nieczytelne, mimo że hero niżej ma już ciemną plamę pod menu. */
.hero { position:relative; overflow:hidden; padding:96px 24px 88px; background:#fff; }
/* Ta sama biała powłoka co na stronie głównej — bez niej plamy biją w tekst. */
.hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.34); }
/* Treść hero musi być NAD warstwą tła — .wu-bg ma z-index 0. */
.hero > .hero-inner, .hero > .section-inner { position:relative; z-index:2; }
/* Plamy na pełnej mocy — dokładnie jak na stronie głównej. Przygaszenie do .55
   sprawiało, że górna część landingu wyglądała jak inny serwis. */
.hero > .wu-bg { opacity:1; }
/* Hero landingu ma sie otwierac tak jak strona glowna: z paskiem logotypow widocznym
   pod pierwszym ekranem. Zmierzone przy 1440x900 — glowna 676 px, landingi 885–963 px,
   wiec logotypy schodzily ponizej ekranu. Stad mniejsze marginesy, mniejszy tytul
   i ograniczona wysokosc makiety nizej. */
@media (min-width:761px){ .hero { margin-top:-73px; padding-top:calc(44px + 73px); padding-bottom:36px; } }
/* KAZDA strona ma konczyc pierwszy ekran w tym samym miejscu (Oskar 04.09). Same marginesy
   tego nie zalatwia, bo hero ma rozna ilosc tresci — zmierzone 511–710 px. Dlatego hero
   dostaje WSPOLNA wysokosc minimalna (najwyzsze z nich) i wysrodkowuje tresc w pionie:
   pasek logotypow zaczyna sie wtedy na tej samej wysokosci na kazdej stronie. */
@media (min-width:761px){
  .hero, .wu-hero { min-height:710px; display:flex; align-items:center; }
  .hero > .hero-inner, .hero > .section-inner, .wu-hero > .section-inner { width:100%; }
  /* „O nas" i blog moga byc nizsze (Oskar 04.09) — to strony tresciowe, nie sprzedazowe,
     wiec nie musza konczyc pierwszego ekranu w tym samym miejscu co landingi. */
  .wu-hero.wu-hero-auto { min-height:0; }
}
/* 100 px odstępu pod paskiem menu, nie 44 (Oskar 5.10.2026: „daj trochę więcej miejsca nad
   «Zgody cookies i RODO»… jeszcze trochę niżej"). Hero wchodzi pod przezroczyste menu
   (ujemny margines), więc ten padding mierzy się od GÓRY strony: przy 44 px nadkreślenie
   stało powyżej dolnej krawędzi menu, przy 72 miało 28 px luzu, teraz ma 56. */
@media (max-width:760px){ .hero { margin-top:-59px; padding-top:calc(100px + 59px); padding-bottom:46px; } }
@media (max-width:760px){
  /* Makieta produktu (zrzut wyszukiwarki, raport PING) na telefonie zajmowala pol ekranu
     i byla nieczytelna — na tej szerokosci liczy sie naglowek, zdanie i przycisk. */
  .hero-visual, .mock-note { display:none; }
  .hero { padding-bottom:40px; }
  .hero-stats { gap:14px; margin-top:18px; }
  .hero-stat .big { font-size:1.5rem; }
  .hero h1 { font-size:1.9rem; line-height:1.2; }
  .hero-sub { font-size:1rem; }
}
/* Plama kotwicząca pod menu musi być na landingu MOCNIEJSZA niż reszta tła — welon .55
   rozjaśnia wszystko, a ona jedyna odpowiada za czytelność białych napisów. */

.hero-inner { max-width:1080px; margin:0 auto; }
.hero-grid2 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center; }
.hero-grid2.rev > .hero-copy { order:2; } .hero-grid2.rev > .hero-visual { order:1; }
@media (max-width:900px){ .hero-grid2, .hero-grid2.rev { grid-template-columns:1fr; gap:36px; } .hero-grid2.rev > .hero-copy { order:1; } .hero-grid2.rev > .hero-visual { order:2; } }
/* SIATKA WPROST POD NAGŁÓWKIEM SEKCJI POTRZEBUJE ODDECHU (Oskar 23.10.2026: „w tym Social
   media, Dla OPP: 1,5% podatku i dostępność daj trochę więcej przerwy między nagłówkiem
   a opisem pod spodem i realizacją, teraz praktycznie się dotykają"). Zmierzone przed
   poprawką: odstęp nagłówka od siatki wynosił 0 px na każdej szerokości, a przy 620 px
   nawet −10 px. Tekst w lewej kolumnie stał raz 98 px, raz 6 px od nagłówka, bo przy
   `align-items:center` decydowała o tym wysokość makiety obok, a nie żaden odstęp.
   Reguła łapie wyłącznie siatkę będącą BEZPOŚREDNIM rodzeństwem po `h2`, więc nie dotyka
   żadnego hera (tam `h1`/`h2` siedzą w środku, w `.hero-copy`). */
h2 + .hero-grid2 { margin-top:34px; }
@media (max-width:900px){ h2 + .hero-grid2 { margin-top:26px; } }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--lp-soft); color:var(--lp); border:1px solid color-mix(in srgb, var(--lp) 25%, transparent); padding:5px 14px; border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.01em; margin-bottom:20px; }
/* Ta sama skala co .wu-hero h1 — 3rem kontra 3.4rem dawalo widoczna roznice. */
.hero h1 { font-size:clamp(1.95rem,3.4vw,2.7rem); font-weight:300; line-height:1.14; letter-spacing:-.025em; color:var(--navy); }
.hero h1 strong, .hero h1 b { font-weight:600; }
.hero h1 em { font-style:normal; font-weight:600; color:var(--accent); }
.hero-sub { margin-top:16px; font-size:clamp(1rem,1.8vw,1.13rem); color:var(--fg-secondary); max-width:600px; }
.hero-ctas { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:1rem; padding:13px 26px; border-radius:var(--r); border:none; cursor:pointer; transition:box-shadow .18s, transform .18s; box-shadow:0 4px 14px rgba(255,111,0,.26); }
/* Hover ROZJASNIA pomarancz zamiast go przyciemniac (decyzja Oskara 09.08).
   Sciemnianie czytalo sie jak stan wcisniecia, czyli odwrotnie do tego, co hover
   ma komunikowac; jasniejszy odcien plus 2 px w gore daje wrazenie podswietlenia.
   Kliknieciu zostawiamy ciemniejszy odcien — TAM przyciemnienie jest na miejscu. */
.btn-primary:hover { background:var(--accent-light); box-shadow:0 6px 20px rgba(255,111,0,.42); }
.btn-primary:active { background:var(--accent-hover); box-shadow:0 3px 10px rgba(255,111,0,.32); }
.btn-ghost { display:inline-flex; align-items:center; gap:7px; padding:13px 28px;
  border:1.5px solid var(--navy); border-radius:999px; background:transparent;
  color:var(--navy); font-weight:600; font-size:.95rem; text-decoration:none; transition:.16s; }
.btn-ghost:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
/* Trzy liczby ZAWSZE w jednym rzędzie na szerokim ekranie. Przy `flex-wrap` dłuższy
   podpis (domeny: „oszczędności rocznie na 1 domenie") zrzucał trzecią pozycję do
   drugiego wiersza i pasek wyglądał na złamany. */
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:16px; }
.hero-stats:has(> :nth-child(4)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* PUSTY pasek znika z układu. 17.10.2026 zdjęliśmy liczby z ekranów powitalnych wszystkich
   landingów (Oskar: „nie podobają mi się te statystyki, ich kolor i w ogóle umiejscowienie").
   Na `/domeny` kontener musiał zostać, bo wypełnia go personalizacja `?d=` — organizacja
   z linku widzi tam SWOJE kwoty — więc bez tej reguły wisiałby tam pusty margines. */
.hero-stats:empty { display:none; }
@media (max-width:760px){ .hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hero-stat .big { display:block; font-size:1.2rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; line-height:1.25; }
/* Podpis pod liczbą był w --fg-muted (#94A3B8) i ginął na jasnym tle ekranu powitalnego
   (Oskar 8.09: „muszą być na czarno, bo są trochę mało widoczne"). Hierarchię trzyma teraz
   rozmiar i grubość, nie kolor. */
.hero-stat .small { font-size:.78rem; line-height:1.35; color:var(--fg); font-weight:500; }

/* ── SEKCJE ── */
section { padding:60px 24px; }
/* Poniżej 1120 px kolumna dotykałaby krawędzi ekranu — na telefonie tekst zaczynał się
   dosłownie w pikselu 0. Powyżej tej szerokości margines robi się sam z max-width,
   więc desktopu to nie rusza. */
.section-inner { max-width:1080px; margin:0 auto; }
@media (max-width:1119px){ .section-inner { padding-inline:20px; } }
/* Nadtytuł sekcji wygląda tak samo na landingach i na stronie głównej: wersaliki z kreską
   pod spodem, bez pigułki (Oskar 9.09 — „wszystkie nagłówki zrób takie jak «Społeczność»").
   Zmiana siedzi w tej jednej regule, a nie w kilkudziesięciu miejscach w HTML-u, więc
   `.section-tag` i `.wu-kicker` nie mogą się już rozjechać. */
.section-tag { display:block; background:none; padding:0; border-radius:0; text-align:center;
  color:var(--accent); font-weight:600; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.18em; margin-bottom:14px; }
.section-tag::after { content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin:11px auto 0; }
h2 { font-size:clamp(1.45rem,3.2vw,2.05rem); font-weight:800; line-height:1.22; letter-spacing:-.02em; color:var(--navy); }
.section-sub { margin-top:10px; color:var(--fg-secondary); font-size:1.02rem; max-width:640px; }
/* ── Nagłówki sekcji wyśrodkowane, jak na stronie głównej (Oskar 7.09) ────────
   Landingi miały nadtytuł + h2 + lid wyrównane do lewej, a strona główna i „O nas"
   wyśrodkowane — przy przechodzeniu między nimi widać było dwa różne serwisy.
   Hero zostaje do lewej (tam obok stoi mockup) i tak samo bloki treściowe artykułu.
   Selektor idzie od `body`, bo szablony landingów nie mają wrappera <main>. */
body > section:not(.hero):not(.wu-hero):not(.art-hero) > .section-inner > h2,
body > section:not(.hero):not(.wu-hero):not(.art-hero) > .section-inner > .section-sub {
  text-align:center; margin-left:auto; margin-right:auto; }
body > section:not(.hero):not(.wu-hero):not(.art-hero) > .section-inner > .section-tag {
  display:block; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
/* ── TŁA SEKCJI ─────────────────────────────────────────────────────────────────────────
   ZASADA (Oskar 9.09): „jak robimy gradient, to kolejny element ma mieć takie tło — tylko
   wtedy ma to sens". Gradient jest PRZEJŚCIEM do koloru, który następna sekcja naprawdę ma,
   a nie ozdobą samą w sobie.
   Poprzednia wersja robiła dokładnie to, czego on nie chce: sekcja bielała w środku i wracała
   do niebieskiego na obu końcach, więc między dwiema białymi wychodził niebieski pasek
   prowadzący donikąd.
   Teraz sekcje są PŁASKIE — biała (`.alt`) albo w kolorze tła strony (zwykła) — a gradient
   pojawia się wyłącznie na styku dwóch RÓŻNYCH kolorów, w sekcji NIŻSZEJ, i dochodzi do jej
   własnego koloru, który wypełnia resztę wysokości. Sąsiedzi tego samego koloru stykają się
   bez niczego, bo nie ma czego wygaszać.
   Warianty z `+ script +`: między sekcjami stoją czasem bloki <script> (SmartCookie, hosting,
   ping, strona główna), a te ROZRYWAJĄ sąsiedztwo w CSS — bez tych wariantów przejście po
   prostu nie łapało i zostawała twarda krawędź.
   `:not(.wu-sec)` wyklucza sekcje strony głównej i pasek „Zaufali nam": one są białe z definicji,
   więc nie mają w co przechodzić. */
.alt { background:var(--surface); border-top:0; border-bottom:0; }
/* biała → tło strony */
.alt + section:not(.alt):not(.wu-sec):not([data-tlo]),
.alt + script + section:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
/* tło strony → biała.
   `:not(.hero)` — ekran powitalny jest BIAŁY, mimo że nie ma klasy `.alt`, więc sekcja tuż pod
   nim nie ma z czego wchodzić: gradient zaczynał się szarością i pod białym hero stawał szary
   pasek. Widać to tylko tam, gdzie między hero a pierwszą sekcją NIE MA taśmy „piszą o nas"
   (smartcookie.io po angielsku i holendersku, dokumenty prawne). Oskar 5.10.2026: „sekcja pod
   hero powinna być biała zawsze, nie tylko jak są tam logotypy". */
section:not(.alt):not(.wu-sec):not([data-tlo]):not(.hero) + .alt,
section:not(.alt):not(.wu-sec):not([data-tlo]):not(.hero) + script + .alt {
  background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 20%); }

/* Taśma „Piszą o nas" jest biała, więc pierwsza sekcja pod nią zachowuje się jak sekcja
   po białej: gdy sama jest w kolorze tła, wchodzi w niego gradientem od bieli. */
section[data-po-tasmie]:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
section[data-po-tasmie] { border-top:0; }

/* To samo, gdy taśmy NIE MA i sekcja styka się z ekranem powitalnym wprost. Hero jest białe,
   więc szara sekcja pod nim musi z tej bieli wyjść, a nie zaczynać się twardą krawędzią.
   Widać to na smartcookie.io po angielsku i holendersku: tam taśma „piszą o nas" jest zdjęta,
   więc ramka z kosztami stała płaską szarą płytą, a po polsku schodziła gradientem.
   Oskar 5.10.2026: „czy te koszty po angielsku mogą iść od gradientu tak jak na polskiej?" */
.hero + section:not(.alt):not(.wu-sec):not([data-tlo]),
.hero + script + section:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
.hero + section, .hero + script + section { border-top:0; }

/* karty korzyści */
.benefit-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:16px; margin-top:32px; }
.benefit-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px;
  box-shadow:var(--shadow-sm); transition:border-color .18s ease, box-shadow .18s ease; }
/* Znak w karcie korzyści — ten sam układ co kafle usług na stronie głównej (`.wu-ico`),
   żeby oba miejsca mówiły jednym językiem (Oskar 8.09). Kolor idzie przez `currentColor`,
   więc najechanie przefarbowuje sam rysunek, a nie tylko ramkę — z emoji było to niemożliwe. */
.benefit-card .icon { width:48px; height:48px; border-radius:14px; border:1px solid var(--border);
  background:var(--surface); color:var(--navy); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; box-shadow:var(--shadow-sm);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.benefit-card .icon svg { width:24px; height:24px; display:block; }
.benefit-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
.benefit-card:hover .icon { background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent-fg); transform:scale(1.06); box-shadow:none; }
@media (prefers-reduced-motion:reduce){ .benefit-card:hover .icon { transform:none; } }
.benefit-card h3 { font-size:1rem; font-weight:700; color:var(--fg); margin-bottom:5px; }
.benefit-card p { font-size:.92rem; color:var(--fg-secondary); }
/* Zdanie wiodące karty (Oskar 6.10.2026) — ZWYKŁY AKAPIT. Przeszło w jeden dzień przez
   pogrubienie i kursywę; obie wersje robiły z niego drugi nagłówek, a to po prostu pierwsze
   zdanie treści. Zostaje sam odstęp do akapitu niżej, reszta idzie z `.benefit-card p`.
   Klasa zostaje, bo znaczniki dalej odróżniają oba akapity i odstęp musi się o coś zaczepić. */
.benefit-card p.benefit-lead { margin-bottom:7px; }

/* kroki */
/* Kroki w stylu jowes.webup.pl: zespolone kafle (2px szczeliny) z dużym „duchem" numeru.
   Tło kafla jest przeciwne do tła sekcji, żeby działało i na jasnej, i na niebieskiej. */
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:2px; margin-top:38px; }
/* SZEŚĆ POZYCJI PO TRZY W RZĘDZIE (Oskar 22.10.2026 o zakresie opieki nad stroną: „daj po 3
   w rzędzie, żeby było sensownie"). `auto-fit` rozkłada sześć kroków po sześć albo po cztery
   — zależnie od szerokości — i rząd robi się nieczytelnym paskiem. Na telefonie wracamy
   do jednej kolumny, bo trzy kroki obok siebie przy 390 px to trzy słupki po jednym słowie. */
.steps-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:720px){ .steps-3 { grid-template-columns:1fr; } }
.step { background:var(--surface); border:none; border-radius:0; padding:32px 26px; box-shadow:none; }
.step:first-child { border-radius:var(--r-lg) 0 0 var(--r-lg); }
.step:last-child  { border-radius:0 var(--r-lg) var(--r-lg) 0; }
.alt .step { background:var(--bg); }
.step-no { display:block; width:auto; height:auto; background:none; border-radius:0; color:var(--border-strong);
  font-size:3.1rem; font-weight:800; line-height:1; letter-spacing:-.04em; margin-bottom:14px; font-variant-numeric:tabular-nums; }
.step-no::before { content:"0"; }   /* 1 → 01, jak na jowes (kroków nigdy nie ma 10+) */
.step h3 { font-size:1.02rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
@media (max-width:640px){
  .steps { grid-template-columns:1fr; }
  .step:first-child { border-radius:var(--r-lg) var(--r-lg) 0 0; }
  .step:last-child  { border-radius:0 0 var(--r-lg) var(--r-lg); }
}
.step p { font-size:.9rem; color:var(--fg-secondary); }
/* Partnerstwo w kroku — inna rola niż zdjęte „robimy my": nie mówi, kto pracuje, tylko przez
   kogo idzie weryfikacja. Logo Goodstack stoi W ZDANIU, w miejscu nazwy (Oskar 8.09):
   `vertical-align:-.28em` sadza je na linii pisma, bo znak ma pod spodem własny margines. */
.step-partner { display:block; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border-soft); font-size:.79rem; line-height:1.6; color:var(--fg-muted); }
/* Pierwszy wiersz jako FLEX z `align-items:center` — plik znaku ma 340×100 px, z czego
   samo pismo zajmuje środek, więc przy `vertical-align` logo zawsze wisiało nad linią
   tekstu i trzeba było zgadywać przesunięcie. Wyśrodkowanie w wierszu załatwia to bez
   zgadywania, niezależnie od marginesów wewnątrz pliku (Oskar 8.09). */
.step-partner .sp-l1 { display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.step-partner .sp-l2 { display:block; }
.step-partner img { flex:none; width:82px; height:auto; }

/* ── SPOŁECZNOŚĆ: liczby zamiast kafli ──────────────────────────────────────
   Pierwsza wersja tej sekcji była siatką czterech kafli — dokładnie taką samą jak trzy
   sekcje nad nią — i dlatego wypadła źle. Tu nie ma ramek ani teł: trzy liczby oddzielone
   pionową kreską, żeby czytało się to jak jedno zdanie, a nie jak kolejna siatka. */
/* auto-fit, bo liczb bywa trzy albo cztery — czwarta („ile kont przeanalizowaliśmy")
   pojawia się tylko tam, gdzie baza odpowiedziała. */
/* Środkowa kolumna trzyma DWIE liczby, więc dostaje więcej miejsca niż pozostałe — dzięki temu
   „706 kont · 40,6 mln $" mieści się w jednym wierszu tym samym stopniem pisma co „2500+"
   (Oskar 9.09). Poniżej 760 px kolumny idą jedna pod drugą (reguła w sekcji mobilnej niżej). */
.sp-liczby { display:grid; grid-template-columns:1fr 1.45fr 1fr; gap:26px 0; margin-top:34px; }
.sp-l { padding:0 18px; text-align:center; border-left:1px solid var(--border-soft); }
.sp-l:first-child { border-left:0; }
/* `flex` z `min-height`, żeby podpisy we wszystkich pozycjach zaczynały się na tej samej
   wysokości — także tam, gdzie wartość jest dwuczłonowa. */
/* Stopień pisma skaluje się z oknem, ale JEDNAKOWO dla wszystkich trzech liczb — dzięki temu
   wartość dwuczłonowa jest tej samej wielkości i na tej samej linii co pozostałe na każdej
   szerokości, zamiast kurczyć się tylko u siebie (Oskar 9.09). */
.sp-l b { display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:2.6rem; font-size:clamp(1.35rem, 2.4vw, 1.95rem); font-weight:800; color:var(--accent-fg);
  letter-spacing:-.03em; line-height:1.1; margin-bottom:8px; font-variant-numeric:tabular-nums; }
/* Liczba kont i budżet badania to JEDNA wartość złożona z dwóch liczb, w JEDNYM wierszu
   (Oskar 8.09: „zmieści się"). Żeby zmieściła się zawsze, stopień pisma skaluje się
   z szerokością okna, a `nowrap` gwarantuje, że nie złamie się w połowie. Kropka rozdzielająca
   idzie z CSS-u, bo skrypt doliczający podmienia `textContent` obu członów. */
/* `align-items:center`, NIE `baseline`: w rzędzie flex `align-items` steruje osią PIONOWĄ,
   a `justify-content:center` z reguły wyżej — poziomą. Przy `baseline` wspólna linia pisma
   lądowała na GÓRZE pudełka o wysokości 2.6rem, więc ta jedna wartość stała 4 px wyżej niż
   „0 zł" i „2500+" obok, które są kolumnami z `justify-content:center` (Oskar 20.09).
   Oba człony mają identyczną typografię (`.sp-l b span { font:inherit }`), więc `center`
   trzyma je w jednej linii pisma tak samo jak `baseline` — a przy okazji centruje w pionie. */
.sp-l b.sp-duo { flex-direction:row; align-items:center; justify-content:center; gap:0;
  white-space:nowrap; }
.sp-l b.sp-duo span + span::before { content:"·"; margin:0 .42em; color:var(--fg-muted); }
/* `> span`, nie `span`: człony wartości dwuczłonowej też są spanami i przejmowały styl
   podpisu — zamiast dużej pomarańczowej liczby wychodził mały granatowy tekst (8.09). */
.sp-l > span { display:block; font-size:.86rem; line-height:1.5; color:var(--fg-secondary); }
.sp-l b span { font:inherit; color:inherit; letter-spacing:inherit; }
.sp-l a { font-weight:600; }
/* Wariant na CZTERY pozycje (/o-nas, „Doświadczenie, które da się policzyć"). Kolumny równe,
   bo żadna nie trzyma wartości dwuczłonowej, i o stopień mniejsze pismo — inaczej „Google
   Partner" nie mieści się w jednym wierszu i podpisy pod liczbami przestają stać w linii. */
.sp-liczby.sp-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.sp-liczby.sp-4 .sp-l b { font-size:clamp(1.15rem, 1.85vw, 1.6rem); white-space:nowrap; }
/* „10,5 mln $" ma się łamać w całości albo wcale — sam symbol waluty schodził do drugiej
   linii i wyglądał jak literówka (Oskar 8.09). */
.nw { white-space:nowrap; }

/* Nagłówek bloku WEWNĄTRZ sekcji — pozwala złożyć dwie krótkie sekcje w jedną, zamiast
   zostawiać dwa osobne pasy z własnym nagłówkiem i pustką między nimi (Oskar 8.09). */
.pod-sekcja { text-align:center; margin:38px 0 16px; font-size:.78rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); }
.pod-sekcja:first-of-type { margin-top:30px; }
@media (max-width:760px){
  .sp-liczby { grid-template-columns:1fr; gap:20px; }
  /* MUSI mieć tę samą specyficzność co reguła `.sp-liczby.sp-4` wyżej — inaczej wariant
     czterokolumnowy wygrywa ją specyficznością (0,2,0 kontra 0,1,0) mimo kolejności
     i na telefonie zostają cztery kolumny po 73 px, z których „Google Partner" wystaje. */
  .sp-liczby.sp-4 { grid-template-columns:1fr; }
  .sp-liczby.sp-4 .sp-l b { white-space:normal; }
  .sp-l { padding:0; border-left:0; }
  .sp-l + .sp-l { padding-top:20px; border-top:1px solid var(--border-soft); }
  /* clamp, nie stała: na wąskim telefonie „706 kont · 40,6 mln $" musi zejść na tyle,
     żeby zmieścić się w jednym wierszu — a pozostałe liczby schodzą razem z nim. */
  .sp-l b { font-size:clamp(1.25rem, 5.8vw, 1.8rem); }
}

/* ── CENNIK ── */
.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:20px; margin-top:38px; align-items:stretch; }
.price-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 26px; display:flex; flex-direction:column; position:relative; box-shadow:var(--shadow); }
.price-card.featured { border:2px solid var(--accent); box-shadow:0 12px 34px rgba(249,115,22,.13); }
.price-flag { position:absolute; top:-13px; left:24px; background:var(--accent); color:#fff; font-size:.76rem; font-weight:700; padding:4px 13px; border-radius:999px; box-shadow:var(--shadow-sm); }
.price-name { font-size:1.12rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.price-for { color:var(--fg-muted); font-size:.88rem; margin-top:2px; }
.price-line { margin-top:16px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.price-num { font-size:2.2rem; font-weight:800; color:var(--fg); letter-spacing:-.03em; }
.price-per { color:var(--fg-muted); font-size:.92rem; }
/* Cena publiczna przekreślona TUŻ PRZY kwocie osobistej (Oskar 5.10.2026). Mniejsza i szara,
   żeby czytało się „29 zł zamiast 49 zł", a nie jako druga cena do wyboru. */
.price-stare { color:var(--fg-muted); font-size:1.15rem; font-weight:600; letter-spacing:-.01em; }
/* „oszczędzasz X wobec płatności co miesiąc" — widoczne tylko w trybie rocznym. Przełącznik
   wstawia pusty tekst w trybie miesięcznym, a `:empty` chowa wtedy całą linię, żeby karta
   nie podskakiwała o wysokość pustego wiersza. Zielone, bo to jedyna liczba na karcie,
   która mówi o zysku (Oskar 5.10.2026). */
/* „cena dla: <organizacja>" w osobnej linii pod kwotą — zawsze w tym samym miejscu,
   niezależnie od tego, czy kwota jest miesięczna czy roczna (Oskar 5.10.2026). */
.price-dla { margin-top:4px; color:var(--accent-fg); font-size:.82rem; font-weight:700; line-height:1.3; }
.price-setup { margin-top:2px; color:var(--fg-secondary); font-size:.88rem; }
.price-setup strong { color:var(--fg); }
/* Budżet reklamowy pod ceną — WARUNEK usługi, ale nie druga cena (Oskar 22.10.2026: „daj małą
   czcionką, jak »za każdą platformę«, może nawet delikatniej, jak »gdy profile prowadzicie sami«").
   Bez żadnej reguły ta linia szła w rozmiarze treści i czytała się jak kolejna kwota do zapłaty. */
.price-budzet { margin-top:4px; color:var(--fg-muted); font-size:.8rem; line-height:1.4; }
.price-budzet b { font-weight:600; color:inherit; }
.price-feats { list-style:none; margin:18px 0 24px; flex:1; }
.price-feats li { padding:6px 0 6px 28px; position:relative; font-size:.93rem; color:var(--fg-secondary); }
.price-feats li strong { color:var(--fg); }
.price-feats li::before { content:"✓"; position:absolute; left:2px; color:var(--green); font-weight:800; }
.price-feats li.dim::before { content:"＋"; color:var(--accent); }
/* `line-height` JAWNY, bo przycisk bywa raz `<button>`, raz `<a>` (na /google-ad-grants
   „Kupuję Akademię" to button, „Umów konsultację" to odnośnik do terminarza). Przeglądarka
   daje przyciskowi `normal`, a odnośnikowi dziedziczoną z `body` — przez to ten sam
   `.price-cta` miał 40 px w jednej karcie i 47 px w drugiej, a razem z nim przesuwała się
   ramka dodatków nad nim (Oskar 19.10.2026: „wielkości przycisków zrób takie same"). */
.price-cta { display:flex; align-items:center; justify-content:center; text-align:center; background:var(--fg); color:#fff; text-decoration:none; font-weight:600; line-height:1.35; padding:13px; border-radius:var(--r); border:none; width:100%; cursor:pointer; font-size:.98rem; transition:.15s; }
.price-cta:hover { background:#1E293B; }
.price-card.featured .price-cta { background:var(--accent); box-shadow:0 4px 14px rgba(249,115,22,.28); }
.price-card.featured .price-cta:hover { background:var(--accent-light); box-shadow:0 6px 20px rgba(255,111,0,.42); }
.price-card.featured .price-cta:active { background:var(--accent-hover); }
.price-note { text-align:center; margin-top:10px; font-size:.82rem; color:var(--fg-muted); }
/* cennik wąski (2 warianty) — wyśrodkowany, nie przyklejony do lewej */
.pricing.narrow { max-width:920px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
/* Jedna karta na środku — bez tego rozciągała się na całą szerokość siatki i pusta
   przestrzeń po bokach czytała się jak brakująca druga oferta. */
.pricing.one { grid-template-columns:minmax(0,560px); justify-content:center; }
/* TRZY WARIANTY — sztywne trzy kolumny, nie `auto-fit` (cennik EN kursu Ad Grants od 24.10.2026).
   `.narrow` tu nie wystarcza: przy limicie 920 px trzy karty po 340 px się nie mieszczą, więc
   `auto-fit` zawija trzecią do drugiego rzędu i zostaje sierota na całą szerokość. Sztywne
   `repeat(3,…)` i szerszy limit trzymają je w jednym rzędzie, a poniżej 1000 px cała siatka
   schodzi do jednej kolumny — dwie karty obok trzeciej pod spodem wyglądałyby jak awaria. */
.pricing.trzy { max-width:1140px; margin-left:auto; margin-right:auto; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px) { .pricing.trzy { grid-template-columns:minmax(0,1fr); max-width:560px; } }

/* Zagęszczenie cennika — cała sekcja (nagłówek + przełącznik + karty + rozbicie ceny)
   ma się mieścić na jednym ekranie laptopa. Ruszamy wyłącznie odstępami i wielkością
   drobnego tekstu; ceny i CTA zostają w oryginalnym rozmiarze. */
.price-card { padding:18px 22px; }
.price-line { margin-top:8px; }
.price-setup { font-size:.85rem; }
.price-feats { margin:11px 0 13px; }
.price-feats li { padding:2px 0 2px 26px; font-size:.88rem; line-height:1.45; }
.price-cta { padding:11px; }
.price-note { margin-top:7px; font-size:.78rem; line-height:1.4; }
.pricing { margin-top:20px; }
section#cennik { padding-top:34px; padding-bottom:34px; }
/* Sekcja z ofertą — ten sam wyraźny blok co „Cześć!" na stronie głównej (Oskar 8.09).
   Odcięta, nie wtopiona: to jedyne dwa miejsca poza ekranem powitalnym, w których wzrok
   ma się zatrzymać, więc krawędź jest tu celowa. Warstwę `.wu-bg` wstrzykuje landing_footer(). */
/* Blok wtapia się w sąsiadów tak jak pasek CTA na dole strony, zamiast odcinać się kreską
   (Oskar 9.09). Do którego koloru wygaszać, decydują ZMIENNE ustawiane niżej: jeśli sąsiad
   jest biały — wygaszamy do bieli, jeśli jest w kolorze tła — nie ma czego wygaszać i koniec
   bloku zostaje płaski. Dzięki temu ta sama reguła działa na landingach, gdzie cennik ma
   białych sąsiadów, i tam, gdzie sąsiedzi są w kolorze tła. */
/* Kolor ZACZYNA SIĘ dopiero na górze oferty, nie pod nagłówkiem (Oskar 9.09). Biel jest
   TRZYMANA na początku sekcji — tyle zajmuje cały blok nagłówkowy: nadtytuł (34 px),
   nagłówek (do 123 px) i lid — a karty startują 177 px od góry sekcji, więc kolor wchodzi już
   wewnątrz kart, nie pod tekstem.
   ⚠️ ZJAZD MA KRZYWĄ, NIE PROSTĄ (Oskar 22.10.2026: „nad cennikiem był fade, a nie taka granica
   bezpośrednia… cennik miał wszędzie wyglądać tak samo i zaczynać się fade'em"). Wcześniej kolor
   wchodził prostą po 80 px (175 → 255 px) i oko widziało w miejscu załamania KRESKĘ przez całą
   szerokość — najmocniej tam, gdzie sąsiad u góry jest biały, czyli na /pakiet-smart. Lekarstwem
   nie jest inny kolor, tylko DŁUŻSZY zjazd z punktami pośrednimi: 110 → 440 px, a w środku 8%,
   28% i 62% zamiast równego narastania. Punkty liczą się z `--tlo-start` i `--tlo-fade`, więc
   wystarczy ruszyć te dwie zmienne, żeby przesunąć cały zjazd. */
/* `--tlo-koniec` = gdzie KOŃCZY SIĘ pełny kolor i zaczyna wygaszanie w dół. Wyciągnięte do zmiennej
   6.10.2026 (Oskar chciał zostawić trochę tła pod kartami cennika SmartCookie); domyślna wartość
   jest ta sama co wcześniej na sztywno, więc żadna inna sekcja nie zmienia wyglądu. */
section[data-tlo] { position:relative; overflow:hidden;
  --tlo-gora:var(--bg); --tlo-dol:var(--bg); --tlo-start:110px; --tlo-fade-chce:440px;
  /* ⚠️ ZJAZD W DÓŁ MUSI SIĘ ZMIEŚCIĆ W SEKCJI (23.10.2026). Wejście w kolor trwało 440 px
     NIEZALEŻNIE od wysokości sekcji. Gdy sekcja była niższa niż ok. 590 px — a wysokość zmienia
     się od treści, bo ten sam cennik bywa krótszy albo dłuższy zależnie od wariantu strony —
     punkt końca zjazdu wypadał ZA dolną krawędzią, przeglądarka przycinała ostatnie punkty
     i wygaszenie do koloru sąsiada po prostu nie mieściło się na ekranie: zostawała kreska.
     `min()` skraca wejście tak, żeby na wyjście zawsze zostało 170 px. */
  --tlo-fade:min(var(--tlo-fade-chce), calc(100% - 170px));
  /* `max()` pilnuje, żeby koniec pełnego koloru nie wypadł PRZED końcem zjazdu — przy odwróconej
     kolejności przeglądarka przycina punkt i zjazd ucina się kreską. */
  --tlo-koniec:max(calc(100% - 150px), var(--tlo-fade));
  --tlo-k1:calc(var(--tlo-start) + (var(--tlo-fade) - var(--tlo-start)) * .24);
  --tlo-k2:calc(var(--tlo-start) + (var(--tlo-fade) - var(--tlo-start)) * .5);
  --tlo-k3:calc(var(--tlo-start) + (var(--tlo-fade) - var(--tlo-start)) * .76);
  background:linear-gradient(180deg, var(--tlo-gora) 0%, var(--tlo-gora) var(--tlo-start),
                                     var(--bg) var(--tlo-fade),
                                     var(--bg) var(--tlo-koniec), var(--tlo-dol) 100%); }
.alt + section[data-tlo], .alt + script + section[data-tlo] { --tlo-gora:var(--surface); }
section[data-tlo]:has(+ .alt), section[data-tlo]:has(+ script + .alt) { --tlo-dol:var(--surface); }
/* Plamy i welon wygaszane dokładnie tak jak tło — inaczej to one rysują kreskę na styku. */
section[data-tlo] > .wu-bg {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent var(--tlo-start), rgba(0,0,0,.08) var(--tlo-k1), rgba(0,0,0,.28) var(--tlo-k2), rgba(0,0,0,.62) var(--tlo-k3), #000 var(--tlo-fade), #000 var(--tlo-koniec), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, transparent var(--tlo-start), rgba(0,0,0,.08) var(--tlo-k1), rgba(0,0,0,.28) var(--tlo-k2), rgba(0,0,0,.62) var(--tlo-k3), #000 var(--tlo-fade), #000 var(--tlo-koniec), transparent 100%); }
section[data-tlo]::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(241,245,251,0) 0%, rgba(241,245,251,0) var(--tlo-start),
                                     rgba(241,245,251,.04) var(--tlo-k1),
                                     rgba(241,245,251,.14) var(--tlo-k2),
                                     rgba(241,245,251,.31) var(--tlo-k3),
                                     rgba(241,245,251,.5) var(--tlo-fade),
                                     rgba(241,245,251,.5) var(--tlo-koniec), rgba(241,245,251,0) 100%); }
section[data-tlo] > .wu-bg::after { display:none; }   /* granatowy welon jest tylko pod menu */
section[data-tlo] > *:not(.wu-bg) { position:relative; z-index:2; }
/* Blok z ofertą jest ODCIĘTY celowo — jak „Cześć!" na stronie głównej. Nie wygasza się
   w sąsiadów, bo nie jest przejściem, tylko osobnym kafelkiem; jego sąsiedzi są po prostu
   białe (`.alt`), więc krawędź jest wyraźna z obu stron. */
section#cennik .section-sub { margin-top:7px; }
/* TŁO CENNIKA NIEZALEŻNE OD SĄSIADÓW (Oskar 20.10.2026: „tło każdej oferty ma być takie jak
   na polskim google-ad-grants"). Reguły wyżej biorą kolor krawędzi od tego, co stoi obok
   (`.alt + section[data-tlo]`), więc TEN SAM cennik wyglądał inaczej na stronie usługi
   — gdzie sąsiadami są sekcje `.alt`, czyli białe — niż na stronie kursu, gdzie sąsiedzi są
   zwykli i krawędzie wychodziły w kolorze tła. Klasa ustawia obie na biel raz. */
section[data-tlo].tlo-biel { --tlo-gora:var(--surface); --tlo-dol:var(--surface); }

/* dodatki do zamówienia — klikalne kafle z żywą ceną; bez ramki, tylko delikatna kreska
   oddzielająca je od listy cech (ramka wokół bloku wyglądała jak wtrącona reklama) */
.price-addons { border:none; background:none; border-top:1px solid var(--border); border-radius:0; padding:13px 0 0; margin:2px 0 14px; }
.price-addons .pa-head { font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); margin-bottom:6px; }
.pa-opt { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:6px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.pa-opt:last-of-type { margin-bottom:0; }
.pa-opt:hover { border-color:var(--accent); }
.pa-opt input { position:absolute; opacity:0; width:0; height:0; }
.pa-box { width:20px; height:20px; flex-shrink:0; margin-top:1px; border:2px solid var(--border-strong); border-radius:6px; display:flex; align-items:center; justify-content:center; transition:.15s; }
.pa-box::after { content:"✓"; color:#fff; font-size:.76rem; font-weight:800; opacity:0; transition:.15s; }
.pa-opt input:checked ~ .pa-box { background:var(--accent); border-color:var(--accent); }
.pa-opt input:checked ~ .pa-box::after { opacity:1; }
.pa-opt:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.pa-opt input:focus-visible ~ .pa-box { box-shadow:0 0 0 3px rgba(249,115,22,.35); }
.pa-txt { flex:1; font-size:.83rem; line-height:1.38; }
.pa-txt b { display:block; color:var(--fg); font-size:.87rem; }
.pa-txt span { display:block; color:var(--fg-secondary); }
/* GWARANCJA WŁASNYM WIERSZEM, NA POMARAŃCZOWO (Oskar 21.10.2026: „i poniżej na pomarańczowo
   »100% gwarancji sukcesu lub zwrot środków«"). Reguła stoi TUTAJ, a nie w arkuszu
   `/landings/adgrants/style.css`, bo pigułki dodatków wołają też trzy strony kursów —
   tamte nie wczytują arkusza Ad Grants i gwarancja byłaby u nich zwykłym szarym tekstem.
   Musi mieć `.pa-txt` przed sobą: samo `.gwarancja` przegrywa swoistością z `.pa-txt span`. */
.pa-txt .gwarancja { color:var(--accent-fg); font-weight:700; }
.pa-price { font-weight:800; color:var(--accent-fg); white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.9rem; }
/* DODATKI BEZ POLA WYBORU — ten sam wygląd co przy Akademii, ale na karcie, która prowadzi
   do zapytania, a nie do koszyka (/social-media, Oskar 22.10.2026). Bez `:hover` i bez ramki
   reagującej na kliknięcie: nic się tu nie klika, więc nic nie ma udawać, że się da. */
.pa-poz { display:flex; align-items:flex-start; gap:10px; padding:9px 11px; margin-bottom:6px;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r); }
.pa-poz:last-of-type { margin-bottom:0; }
.pa-foot { margin-top:9px; padding-top:8px; border-top:1px dashed color-mix(in srgb, var(--accent) 34%, transparent); display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:.85rem; color:var(--fg-secondary); }
.pa-foot .pa-total { font-weight:800; font-size:1.15rem; color:var(--fg); font-variant-numeric:tabular-nums; }
/* wariant „w cenie" (VIP) */
.price-addons.incl .pa-head { color:var(--green); }
.price-addons.incl .pa-opt { cursor:default; border-color:color-mix(in srgb, var(--green) 26%, transparent); background:color-mix(in srgb, var(--green) 6%, #fff); }
.price-addons.incl .pa-opt:hover { border-color:color-mix(in srgb, var(--green) 26%, transparent); }
.price-addons.incl .pa-box { background:var(--green); border-color:var(--green); }
.price-addons.incl .pa-box::after { opacity:1; }
.price-addons.incl .pa-price { color:var(--green); }
.price-addons.incl .pa-foot { border-top-color:color-mix(in srgb, var(--green) 30%, transparent); }

/* ── tabelka porównań ── */
.compare { margin-top:32px; overflow-x:auto; }
.compare table { width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); min-width:540px; }
.compare th, .compare td { padding:12px 16px; text-align:left; font-size:.92rem; border-bottom:1px solid var(--border-soft); }
.compare thead th { background:var(--bg); color:var(--fg-secondary); font-weight:600; font-size:.85rem; border-bottom:1px solid var(--border); }
/* ⚠️ KOLUMNA „WEBUP!" BEZ POMARAŃCZOWEGO TŁA (Oskar 23.10.2026: „w porównaniu Webupa usuń to
   tło na Webupie, niech będzie tylko na zielono, to jest ok"). Kolumnę i tak znaczy pomarańczowy
   nagłówek i zielone ptaszki w wierszach — tło dokładało trzeci sygnał tego samego. */
.compare thead th:last-child { color:var(--accent-fg); }
.compare tbody tr:last-child td { border-bottom:none; }
.compare .ok { color:var(--green); font-weight:700; }
.compare .no { color:var(--red); font-weight:600; }

/* ── PROWADZENIE STRONY I WSPARCIE 24/7 (`.op-*`, `.opt-*`) ──────────────────
   Przeniesione tu 19.10.2026 z `landings/smart/style.css` i `landings/hosting/style.css`,
   gdzie stały w DWÓCH identycznych kopiach z notatką „zmieniasz jedno — zmień drugie".
   Używają ich dziś trzy strony: /pakiet-smart (sam zakres opieki), /hosting i /strona-www
   (zgłaszanie zmian, trzy filary 24/7, tabela czasów reakcji, makieta zgłoszenia).
   `/strona-www` nie ma własnego arkusza, więc to JEST jedyne miejsce na te reguły.
   Kolor akcentu bierze się z `--lp` motywu landingu, więc każda strona ma go we własnym. */

/* zakres opieki */
.op-zakres {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  gap:14px; margin-top:30px; text-align:left;
}
/* Zakres stojacy ZARAZ POD krokami to ich ciag dalszy, nie nowy blok (Oskar 22.10.2026) —
   stad ciasniejszy odstep niz po naglowku sekcji. */
.steps + .op-zakres { margin-top:16px; }
.op-item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.op-item:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
/* IKONY W KOLORZE PORTALU, NIE W KOLORZE MOTYWU LANDINGU (Oskar 22.10.2026: „ikony zrób
   bardziej spójne z portalem i nie taki kolor"). Brały `--lp`, czyli akcent strony — a na
   /strona-www jest to fiolet `#7C3AED`, który nie występuje nigdzie indziej w serwisie.
   Granat plus szare tło to ta sama para, co w pasku i w kartach panelu. */
.op-ico {
  width:38px; height:38px; border-radius:11px; border:1px solid var(--border);
  background:var(--bg); color:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:11px;
}
.op-ico svg { width:21px; height:21px; display:block; }
.op-item b { display:block; font-size:.98rem; color:var(--navy); margin-bottom:4px; }
/* ⚠️ `:not(.op-ico)` JEST KONIECZNE, nie kosmetyczne (Oskar 22.10.2026: „darowizny popraw
   ikony, bo są rozjechane"). Pudełko ikony to też `<span>`, więc reguła `.op-item span`
   (specyficzność 0,1,1) wygrywała z `.op-ico` (0,1,0) i nadpisywała mu `display:flex`
   na `display:block` — rysunek siadał w lewym górnym rogu kwadratu zamiast na środku,
   a przy okazji brał rozmiar i kolor tekstu opisu. Widać to było wszędzie, gdzie stoi
   `.op-zakres`; wyłapane przy sekcji darowizn na `/strona-www`. */
.op-item > span:not(.op-ico) { display:block; font-size:.88rem; color:var(--fg-secondary); line-height:1.55; }
/* ⚠️ POMARAŃCZ WYŁĄCZNIE PO NAJECHANIU — WEJŚCIE TO SAM RUCH (Oskar 23.10.2026, korekta
   do „zanimuj te ikony na wejście, pomarańczowa ramka": „te ikony nie mają być od razu
   pomarańczowe, tylko miały być zanimowane po najechaniu, na pozostałych landingach tak
   właśnie jest"). Wejście daje ikonie krótkie wybicie ze skali i przejaśnienia — i na tym
   koniec; kolor zostaje granatowo-szary jak w portalu. Akcent dokłada dopiero `:hover`
   niżej, tak samo jak na reszcie serwisu. */
.wu-anim .op-item .op-ico { transform:scale(.85); opacity:.55;
  transition:transform .4s cubic-bezier(.2,.8,.3,1.2), opacity .4s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.wu-anim .op-item.wu-in .op-ico { transform:none; opacity:1; }
.op-item:hover .op-ico { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-fg); }
@media (prefers-reduced-motion:reduce){
  .wu-anim .op-item .op-ico { transform:none; opacity:1; }
}

/* ── KOPIE ZAPASOWE NA /hosting (`.kopie`) ───────────────────────────────────
   Oskar 23.10.2026: „te kopie zapasowe na hostingu też rób jakoś nowocześniej, niech też
   będzie zanimowane po wejściu, niech to rośnie od 0 do tej liczby. I jakoś ładniej pokaż".
   Było: cztery kroki `.step` z numerami 1–4 — czyli ten sam wzór co „od zamówienia do
   publikacji", choć to nie jest żadna kolejność, tylko cztery równoległe rytmy kopii.
   Jest: kostki z JEDNĄ dużą liczbą każda (48 godzin, 7 dni, 12 kopii, 3 minuty). Liczba
   dolicza się od zera przez `wu_liczby_js()` (klasa `.wu-licz`), a kostka wchodzi
   przez `wu_reveal_js()`. */
/* ⚠️ CZTERY W JEDNYM RZĘDZIE, W TYM SAMYM MIEJSCU CO WCZEŚNIEJ (Oskar 23.10.2026: „nie, nie ma
   być tak na hostingu, to za dużo miejsca. To się musi zmieścić w tym samym miejscu, tylko
   nowocześniej, bardziej kompaktowo"). Wersja 2×2 brała dwa razy więcej wysokości niż cztery
   kroki, które tu stały. Opisy skrócone do jednego zdania, żeby kostka była niska. */
.kopie { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; text-align:left; }
@media (max-width:760px){ .kopie { grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .kopie { grid-template-columns:1fr; } }
.kop { position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:13px 15px 12px; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease; }
.kop:hover { border-color:var(--border-strong); box-shadow:var(--shadow); }
/* Pasek u góry kostki „rysuje się" razem z wejściem — stąd wrażenie, że liczba narasta. */
.kop::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .7s cubic-bezier(.2,.8,.3,1); }
.wu-anim .kop.wu-in::before, body:not(.wu-anim) .kop::before { transform:scaleX(1); }
.kop-monit::before { background:var(--green); }
.kop-kiedy { display:block; font-size:.68rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--fg-muted); }
.kop-duza { display:flex; align-items:baseline; gap:6px; margin:3px 0 5px; }
.kop-duza b { font-size:1.7rem; font-weight:800; line-height:1.05; letter-spacing:-.03em;
  color:var(--navy); font-variant-numeric:tabular-nums; }
.kop-monit .kop-duza b { color:var(--green); }
.kop-duza i { font-style:normal; font-size:.8rem; font-weight:600; color:var(--fg-secondary); }
.kop-opis { display:block; font-size:.8rem; line-height:1.45; color:var(--fg-secondary); }
@media (prefers-reduced-motion:reduce){ .kop::before { transform:scaleX(1); transition:none; } }

/* Opis sekcji przeniesiony do lewej kolumny, nad punkty (Oskar 23.10.2026) — tam ma być
   do lewej i ciaśniej niż wyśrodkowany lid pod nagłówkiem. */
.hero-copy > .kol-sub { margin:0 0 16px; text-align:left; max-width:none; }
/* Pastylki WCAG / deklaracji — spod grafiki pod punkty (Oskar 23.10.2026). */
/* TRZY W JEDNYM RZĘDZIE (Oskar 23.10.2026: „tak, aby zmieściły się wszystkie 3 w rzędzie").
   `flex` z `wrap` łamał je w wąskiej kolumnie na dwa rzędy — przy trzech równych kolumnach
   siatki to się nie zdarzy, a `minmax(0,1fr)` pozwala im się zwęzić zamiast wyjść poza kolumnę. */
/* ⚠️ PASTYLKI SZEROKIE NA TREŚĆ, NIE NA RÓWNE TRZECIE. Trzy równe kolumny wyglądały
   równo tylko na pulpicie: „Deklaracja dostępności" ma przy `white-space:nowrap`
   130 px, a na telefonie kolumna daje 93 px — napis wychodził poza swoją pastylkę
   i wchodził na sąsiednią (zmierzone 23.10.2026 przy 390 px). Flex z zawijaniem
   trzyma je w jednym rzędzie tam, gdzie się mieszczą, i łamie na dwa, gdy nie. */
.wcag-pastylki { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.wcag-pastylki span { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:7px 10px;
  font-size:.74rem; font-weight:600; box-shadow:var(--shadow-sm); white-space:nowrap; }
.wcag-pastylki b { color:var(--green); }
.wcag-pastylki .pas-znak { height:16px; width:auto; display:block; }

/* ⚠️ BLOKI `.op-247`, `.op-sla`, `.op-uczciwie`, `.op-ticket` i `.opt-*` SKASOWANE 22.10.2026.
   Trzymały „Co u nas znaczy 24/7", tabelę czasów reakcji, akapit o uczciwym rozumieniu 24/7
   i makietę zgłoszenia. Oskar zdjął je tego dnia z `/hosting` („»Co u nas znaczy 24/7«
   i wszystko aż do cennika usuwasz") i z `/strona-www` („usuń wszystko od OPIEKA NAD STRONĄ
   do cennika") — po tych dwóch cięciach nie miały już ani jednego użytkownika.
   Treść nie przepadła: uczciwe rozbicie 24/7 stoi w FAQ obu stron.
   Zostaje `.op-zakres` / `.op-item` / `.op-ico` wyżej — bierze je scalona sekcja „Jak to działa"
   na `/strona-www`. */

/* ── telefon ───────────────────────────────────────────────────────────────── */
@media (max-width:700px) {
}

/* ── FAQ ── */
.faq { max-width:760px; margin:32px auto 0; }
.faq details { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.faq summary { cursor:pointer; padding:16px 20px; font-weight:600; font-size:.97rem; color:var(--fg); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.25rem; color:var(--accent); font-weight:700; flex-shrink:0; }
.faq details[open] summary::after { content:"–"; }
.faq .faq-a { padding:0 20px 16px; color:var(--fg-secondary); font-size:.93rem; }

/* ── CTA STRIP — to samo ruchome tło co hero i „Cześć!" (Oskar 7.09) ──────────
   Wcześniej była to płaska granatowa płyta: strona zaczynała się kolorem, a kończyła
   ciemnym prostokątem. Teraz klamra domyka się tym samym tłem, co ekran powitalny.
   Warstwę `.wu-bg` wstrzykuje landing_footer(), więc nie trzeba jej dopisywać w każdym
   szablonie; welon nad nią (::before) trzyma kontrast tekstu. */
/* Góra paska schodzi z BIELI, żeby domknąć się z sekcją „Zaufali nam" nad nim (Oskar 7.09) —
   twarda krawędź między białą sekcją a jasnoniebieskim tłem cięła stronę w poprzek. Razem
   z tłem wygaszamy u góry same plamy, inaczej przebijałyby przez gradient. */
.cta-strip { position:relative; overflow:hidden; color:var(--fg-secondary);
  /* Wraca do bieli na samym dole, bo stopka jest biała — inaczej ostatni styk na stronie
     był twardą krawędzią (Oskar 8.09). */
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 46%, var(--bg) 84%, var(--surface) 100%);
  text-align:center; padding:74px 24px; }
.cta-strip .wu-bg {
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 42%);
          mask-image:linear-gradient(180deg, transparent 0, #000 42%); }
/* Biała płyta NA tle, dokładnie jak karta w sekcji „Cześć!" (Oskar 7.09) — samo tło pod
   tekstem było za ciemne i pomarańcz przycisku gryzł się z granatem smugi. Robi ją
   pseudoelement, więc nie trzeba owijać treści dodatkowym divem w dziesięciu szablonach. */
.cta-strip::after { content:""; position:absolute; left:50%; top:50%; z-index:1;
  transform:translate(-50%,-50%); width:min(900px, calc(100% - 40px)); height:calc(100% - 52px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); }
/* Treść musi trzymać się szerokości płyty. Płyta to pseudoelement o stałej szerokości
   (min(900px, 100% - 40px)), a akapit rozciągał się na CAŁY pasek — na szerokim ekranie
   zdanie wychodziło poza białe tło (Oskar 7.09). */
.cta-strip > *:not(.wu-bg) { position:relative; z-index:2;
  max-width:min(800px, calc(100% - 96px)); margin-left:auto; margin-right:auto; }
/* Granatowa plama z tła hero istnieje po to, żeby białe napisy paska nawigacji miały
   kontrast. W stopce paska nawigacji nie ma, a plama robiła tu tylko ciemno. */
.cta-strip .wu-bg::after { display:none; }
.cta-strip h2 { color:var(--navy); }
.cta-strip p { color:var(--fg-secondary); margin-top:10px; }
.cta-strip .btn-primary { margin-top:24px; }
.cta-strip a { color:var(--accent-fg); }
.cta-strip .btn-primary { color:#fff; }
/* Przycisk z obrysem zostaje granatowy także w pasku CTA: `.cta-strip a` wyżej (0,1,1)
   wygrywa z `.wu-btn-outline` (0,1,0) i malował napis na pomarańczowo, przez co przycisk
   miał granatową obwódkę i pomarańczowy środek — dwa kolory w jednym elemencie. */
.cta-strip .wu-btn-outline { color:var(--navy); }
.cta-strip .wu-btn-outline:hover { color:#fff; }
/* mail/telefon pod przyciskiem — wcześniej biel wpisana w atrybut style, pod granatowe tło */
.cta-kontakt { font-weight:700; }
/* Podtytul wewnatrz sekcji laczacej dwa dowody (posty + projekty) — mniejszy od h2 sekcji,
   ale wyrazniejszy od zwyklego akapitu, zeby bylo widac, ze zaczyna sie druga czesc. */
.ss-sub { text-align:center; font-size:1.06rem; font-weight:700; color:var(--navy);
  letter-spacing:-.01em; margin:38px 0 18px; }

/* ── PASEK ODNOŚNIKÓW ────────────────────────────────────────────────────────
   Jedna linia zamiast rzędu kafli. Powstał tam, gdzie cztery kafle „społeczność
   i materiały" stały pod czterema identycznymi kaflami „dlaczego my" i strona
   robiła się jednostajna (Oskar 7.09). */
.wu-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 22px; margin-top:34px; padding:16px 22px; background:var(--bg);
  border:1px solid var(--border-soft); border-radius:var(--r-xl); font-size:.92rem; }
.wu-bar b { color:var(--navy); }
.wu-bar a { color:var(--fg-secondary); text-decoration:none; font-weight:600;
  border-bottom:1.5px solid transparent; transition:color .15s, border-color .15s; }
.wu-bar a:hover { color:var(--accent-fg); border-bottom-color:var(--accent); }
@media (max-width:700px){ .wu-bar { flex-direction:column; gap:12px; text-align:center; } }

/* Kafel case study, który prowadzi do artykułu — zachowuje wygląd karty, ale klika się cały. */
.cs-card-link { display:block; text-decoration:none; transition:border-color .15s; }
.cs-card-link:hover { border-color:var(--accent); }
.cs-card-link .cs-foot { color:var(--accent-fg); font-weight:600; }

/* Wyróżnione zdanie o badaniu w sekcji polityki — ma się odciąć od akapitu wyżej. */
.ag-badanie { max-width:760px; margin:16px auto 0; text-align:center; font-size:.94rem;
  line-height:1.6; color:var(--fg-secondary); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius:var(--r-lg); padding:13px 18px; }
.ag-badanie b { color:var(--navy); }
.ag-badanie a { color:var(--accent-fg); font-weight:600; }

/* ── ZNIŻKI DLA NGO — ten sam widok co w panelu klienta ──────────────────────
   Tabela zamiast kolejnego rzędu kafli: na landingu Ad Grants były już cztery siatki
   kart pod rząd i wszystko zlewało się w jedno (Oskar 8.09). Tabela ma inny rytm,
   a przy okazji pokazuje produkt takim, jaki klient zobaczy po zalogowaniu. */
.fr-table { max-width:860px; margin:26px auto 0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); }
.fr-table table { width:100%; border-collapse:collapse; }
.fr-table tr + tr { border-top:1px solid var(--border-soft); }
.fr-table th, .fr-table td { padding:13px 18px; text-align:left; vertical-align:top; font-size:.9rem; }
.fr-table th { width:280px; font-weight:700; color:var(--navy); white-space:nowrap; }
/* ⚠️ ZNAK PRZY SAMEJ KRAWĘDZI, NAZWA TUŻ ZA NIM — BEZ WSPÓLNEGO PUDEŁKA (Oskar 24.10.2026:
   „nazwy przy ikonach mają być w pakiecie fundraisera nie wyśrodkowane, słabo to wygląda").
   Stało tu pudełko stałej szerokości 96 px z treścią dosuniętą do PRAWEJ. Pomysł był taki,
   żeby wszystkie nazwy zaczynały się w jednej linii mimo że pięć znaków to kwadratowe kafelki
   aplikacji, a szósty (Google Workspace) jest logotypem cztery razy szerszym. Kosztem było to,
   co Oskar zobaczył: kwadratowe znaki miały przed sobą 55–74 px pustego pola, więc para
   znak + nazwa wisiała w środku białej komórki zamiast przy jej lewej krawędzi.
   Zmierzone na żywym renderze (`scratchpad/fr-warianty.js`, 1320 px) — trzy układy:
     • pudełko do prawej (stan sprzed poprawki): pusto PRZED znakiem do 74 px,
     • pudełko do lewej: pusto MIĘDZY znakiem a nazwą do 87 px — jeszcze gorzej,
     • bez pudełka (ten): pusto 0 px przed znakiem i 10 px za nim, tabela o 39 px niższa,
       bo opis dostaje więcej szerokości i mieści się w mniejszej liczbie linii.
   CENA, KTÓRĄ ŚWIADOMIE PŁACIMY: nazwy zaczynają się w pięciu różnych miejscach zamiast
   w jednym. Przy znakach wysokości 22 px to niewidoczne — oko czyta nazwę jako podpis TEGO
   znaku, nie jako kolumnę. Nie przywracaj stałej szerokości „dla równej kolumny": dokładnie
   to zostało odrzucone.
   Pusty `span` (pozycja bez pliku znaku) musi zniknąć, inaczej jego margines odsuwałby
   samotną nazwę o 10 px od krawędzi. `object-fit:contain` wpisuje znak w pole, nie rozciągając
   go; zaokrąglenie 5 px dotyczy znaków pełnoobrazkowych (Canva ma gradient do samej krawędzi),
   przy SVG z przezroczystym tłem jest niewidoczne, więc stoi na wszystkich. */
/* ⚠️ SZEROKOŚĆ TEGO PUDEŁKA USTAWIA LEWĄ KRAWĘDŹ WSZYSTKICH NAZW. Znak szerszy niż pudełko
   rozpycha je i nazwa w TYM wierszu startuje dalej w prawo niż w sąsiednich — dokładnie ten
   rozjazd, który Oskar wytknął dwa razy przy tej tabeli. Dlatego dwie liczby muszą chodzić
   w parze: `min-width` pudełka i `max-width` znaku. Najszerszy dziś znak to „Google" (46 px
   przy wysokości 15 px), wcześniej FaniMani (41 px) — stąd 48 px.
   Dokładasz nowy znak → sprawdź jego szerokość przy docelowej wysokości i jeśli przekracza
   48 px, podnieś OBIE wartości, nie jedną. */
.fr-table .fr-znak-box { display:inline-block; min-width:48px; vertical-align:middle;
  margin-right:10px; line-height:0; }
.fr-table .fr-znak-box:empty { display:none; }
.fr-table .fr-znak { height:22px; width:auto; max-width:48px; object-fit:contain;
  border-radius:5px; }
/* ⚠️ LOGOTYP Z NAPISEM JEST WIELKOŚCI PISMA, NIE KAFELKA (Oskar 24.10.2026: „w pakiecie
   fundraisera ten na tej samej wysokości co reszta nazw"). 22 px to miara KAFELKA APLIKACJI
   (Canva, YouTube, OpenAI) — znaku, który stoi obok nazwy. „Google" nazwą JEST, więc musi
   mieć wysokość pisma, a nie kafelka: przy 22 px był o połowę większy od „Canva" czy
   „Autenti" w sąsiednich wierszach i wyglądał, jakby krzyczał.
   15 px to wysokość całego oczka pisma nazw (0.9 rem ≈ 14.4 px, z wydłużeniem dolnym „g").
   Pionowo nic nie trzeba było ruszać — środki nazw i znaków siedzą na 26–27 px od góry
   wiersza w każdym wierszu, zmierzone. */
.fr-table .fr-znak[src*="/google.svg"] { height:15px; }
.fr-table .fr-nazwa { vertical-align:middle; }
.fr-table .fr-save { width:190px; color:var(--green); font-weight:700; font-size:.82rem; white-space:nowrap; }
.fr-table td:last-child { color:var(--fg-secondary); font-size:.86rem; line-height:1.55; }
.fr-more { padding:12px 18px; border-top:1px solid var(--border-soft); background:var(--bg);
  text-align:center; font-size:.84rem; color:var(--fg-muted); }
.fr-more b { color:var(--navy); }

/* OPINIE O AKADEMII — BLOK ZDJĘTY 21.10.2026 (Oskar: „te poprzednie opinie usuń, bo się
   powiela. Dodaj je do tych"). Był tu pasek dwóch kolumn pod case studies na /google-ad-grants
   i pod „Co zawiera Akademia" na stronach kursów; cztery wypowiedzi, które niósł, przeniosły
   się do JEDNEGO bloku opinii w sekcji „Zaufali nam" (`.go-*` niżej w tym pliku). Razem
   z blokiem zeszły jego klasy: `.opinie`, `.op`, `.op-txt`, `.op-ocena`, `.op-cytat`,
   `.op-logo`, `.op-link`, `.op-czego`. Nie myl ich z `.op-chipy` — to zakres opieki nad
   stroną na /pakiet-smart, zupełnie inna rzecz. */

/* Doprecyzowanie pod pozycją cennika — mniejsze i NIE pogrubione, nawet gdy cała pozycja
   jest w `<strong>` (Oskar 21.10.2026: „poniżej »do 3 domen — rejestracja i odnowienie«,
   nie pogrubione"). Używa tego zakres pakietu SMART, czyli każda karta cennika w serwisie. */
.price-feats .li-pod { display:block; margin-top:2px; font-weight:400;
  font-size:.86em; color:var(--fg-muted); }
/* Pozycja cennika bywa odnośnikiem do zakładki, która ją opisuje (np. „Budowa strony
   organizacji" → /strona-www). Ma wyglądać jak reszta listy, a nie jak obcy link — stąd
   kolor dziedziczony i podkreślenie w kolorze obwódki, które dopiero po najechaniu robi
   się pomarańczowe. */
.price-feats a { color:inherit; text-decoration:underline;
  text-decoration-color:var(--border-strong); text-underline-offset:3px; }
.price-feats a:hover { color:var(--accent-fg); text-decoration-color:var(--accent); }

/* ── OPINIE — JEDNA WYPOWIEDŹ NAD ŚCIANĄ LOGOTYPÓW ────────────────────────────────────
   Markup składa `wu_opinie()` w `includes/landing-lib.php`; tam też stoi historia trzech
   podejść. W skrócie: karty POD taśmą były „dziwnie wciśnięte", karty NA taśmie (logotypy
   jako wyblakłe tło) — „fatalnie, za dużo na tle tych logotypów, i fajnie jakby klikanie
   w logotypy dalej było możliwe". Więc:

   · ŚCIANA LOGOTYPÓW ZOSTAJE NIETKNIĘTA — pełny kolor, klikalna, bez przykrywki. Nie ma
     tu ani jednej reguły, która by ją zmieniała.
   · OPINIA NIE JEST KARTĄ. Żadnej ramki, tła ani cienia — gwiazdki, zdanie złożone większym
     stopniem i podpis z logotypem organizacji. Pudełko obok ściany znaków zawsze przegrywa
     z nią o uwagę; sam tekst nie konkuruje, tylko mówi.
   · JEDNA NARAZ. Sekcja ma jeden głos, a nie siatkę głosów — przełącza się strzałkami albo
     kropkami, co osiem sekund sama (skrypt `wu_opinie_js()`).
   · Cudzysłowy dokłada arkusz (`::before`/`::after`), więc w danych siedzi czysty tekst
     wypowiedzi — bez znaków, które trzeba by pamiętać przy każdej nowej opinii. */
/* ⚠️ CAŁY BLOK JEST CELOWO NISKI (Oskar 21.10.2026: „za dużo miejsca zajmuje cały segment
   opinii + logotypy"). Przed poprawką sam blok opinii brał 218 px plus 80 px marginesów przy
   sekcji wysokiej na 687 px — czyli opinia zajmowała więcej niż nagłówek i ściana logotypów
   razem. Ścianę zostawiamy w spokoju: trzy wiersze są decyzją Oskara z 9.08. Ścięte zostało
   to, co nic nie wnosiło: osobny wiersz gwiazdek, stopień pisma cytatu i zapas wysokości. */
.go-opinie { margin:22px 0 26px; }
.go-ramka { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:18px; max-width:980px; margin:0 auto; }
/* `mandatory`, nie `proximity`: przy `proximity` przeglądarka dociąga slajd TYLKO wtedy, gdy
   przewinięcie skończy się odpowiednio blisko — a gładzik na Macu potrafi przesunąć okno
   o kilkadziesiąt pikseli w poziomie przy zwykłym przewijaniu strony w dół. Wtedy cytat
   zostaje przycięty z lewej, a z prawej wystaje następny (zrzut Oskara, 21.10.2026). */
.go-okno { overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; }
.go-okno::-webkit-scrollbar { display:none; }
/* ⚠️ WSZYSTKIE WYPOWIEDZI MAJĄ JEDNĄ WYSOKOŚĆ, CYTAT ZACZYNA SIĘ ZAWSZE W TYM SAMYM MIEJSCU
   (Oskar 21.10.2026: „zrób jedną wysokość wszystkich, bo jak przechodzę do innych na mobile,
   to jest taki dziwny przeskok"). Samo okno MIAŁO stałą wysokość — wszystkie wypowiedzi stoją
   w jednym rzędzie, więc rząd jest tak wysoki jak najdłuższa z nich i strona nie skakała.
   Skakał TEKST: przy `align-items:center` każda wypowiedź była wysoka na tyle, ile sama
   zajmuje, i wisiała na środku okna — więc dwuwierszowy cytat zaczynał się niżej niż
   trzywierszowy, a podpis stał za każdym razem gdzie indziej. Przy przewijaniu palcem
   wygląda to dokładnie jak skok wysokości, choć wysokość się nie zmienia.
   Teraz: `stretch` daje KAŻDEJ wypowiedzi pełną wysokość rzędu, a podpis dociska
   `margin-top:auto` do dołu, więc nazwisko stoi zawsze w tym samym miejscu.
   SAM CYTAT JEST WYŚRODKOWANY W PIONIE w tym, co zostaje nad podpisem (Oskar 21.10.2026:
   „a tekst opinii wyśrodkowuj na wysokość"). Pierwsze podejście stawiało go równo u góry
   — wtedy dwuwierszowa wypowiedź zostawiała pod sobą dziurę na wysokość wiersza i wyglądała
   jak urwana. Przy środkowaniu krótszy cytat ma tyle samo powietrza nad i pod, a ponieważ
   podpis się nie rusza, nic nie skacze. 120 px = najdłuższa wypowiedź (trzy wiersze) plus
   wiersz podpisu — zmierzone. */
.go-rzad { display:flex; align-items:stretch; min-height:120px; }
.go-op { flex:0 0 100%; scroll-snap-align:start; margin:0; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:9px; padding:4px 8px; text-align:center; }
.go-gw { color:var(--accent); letter-spacing:.1em; line-height:1; font-size:.86rem; }
.go-op > .go-gw { flex:0 0 auto; }
.go-op > .go-logo { flex:0 0 auto; }
/* `flex:1` zabiera całą wolną wysokość nad podpisem, `justify-content:center` środkuje w niej
   cytat — bez tej pary wypowiedź wisiałaby u góry okna. */
.go-tresc { flex:1; justify-content:center; max-width:780px;
  display:flex; flex-direction:column; gap:6px; }
.go-op blockquote { margin:0; font-size:1.02rem; line-height:1.5; color:var(--navy);
  font-weight:500; letter-spacing:-.005em; }
.go-op blockquote::before { content:"„"; }
.go-op blockquote::after  { content:"”"; }
.go-czego { font-size:.76rem; font-weight:700; color:var(--fg-muted); }
/* PODPIS NA SAMYM DOLE: imię i nazwisko, a pod spodem nazwa organizacji na szaro
   (Oskar 21.10.2026: „na samym dole imię i nazwisko + nazwa organizacji pod spodem na szaro.
   Lub tylko imię i nazwisko / tylko nazwa").
   ⚠️ TO MA BYĆ KOLUMNA, NIE WIERSZ. Wersja, w której gwiazdki, logotyp i nazwisko stały obok
   siebie w jednej linii, została odrzucona — wyglądała jak pasek metryczki. Nie wracaj do niej.
   `margin-top:auto` dociska podpis do dołu okna, a `min-height` trzyma go na dwa wiersze także
   wtedy, gdy wypowiedź ma tylko nazwisko albo tylko nazwę — dzięki temu nazwisko stoi na tej
   samej wysokości przy każdej opinii, choć cytaty mają różną długość. */
.go-op figcaption { margin-top:auto; min-height:40px; text-align:center; line-height:1.35;
  font-size:.84rem; color:var(--fg-muted); }
.go-op figcaption b { display:block; color:var(--navy); font-weight:700; font-size:.9rem; }
.go-op figcaption > a, .go-op figcaption > span { display:block; }
.go-op figcaption a { color:inherit; text-decoration:none; }
.go-op figcaption a:hover { color:var(--accent-fg); text-decoration:underline; }
/* Logotyp organizacji stoi NAD CYTATEM. Wysokość stała, szerokość do treści znaku.
   `.go-logo-kw` = znak kwadratowy albo pionowy (sygnet, nie wordmark) — dostaje więcej
   wysokości, bo przy wspólnych 30 px zajmowałby czwartą część pola co wordmark obok
   i czytał się jak miniaturka. Klasę dokłada `wu_opinie()` na podstawie PROPORCJI PLIKU. */
.go-logo { width:auto; max-width:120px; height:30px; object-fit:contain; object-position:center; }
.go-logo-kw { height:42px; }
.go-mono { display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:color-mix(in srgb, var(--navy) 9%, #fff); color:var(--navy);
  font-size:.8rem; font-weight:800; letter-spacing:.02em; }

.go-strz { display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--navy);
  font-size:1.2rem; line-height:1; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:border-color .15s, color .15s; }
.go-strz[hidden] { display:none; }
.go-strz:hover { border-color:var(--accent); color:var(--accent-fg); }
/* STRZAŁKI PRZY PASIE REALIZACJI (/strona-www). Stoją NAD pasem, przy jego krawędziach —
   przycisk w toku dokumentu przesuwałby treść zamiast nad nią stać. `.showcase-pas` musi być
   `relative`, stąd osobna reguła. Od 23.10.2026 są JEDYNĄ drogą ruchu na myszce. */
.showcase-pas { position:relative; }
/* ⚠️ STRZAŁKI PO BOKACH PASA, WEWNĄTRZ JEGO KRAWĘDZI (Oskar 24.10.2026: „te strzałki na
   realizacjach daj po bokach, to dziwnie wygląda"). Historia tego miejsca w trzech krokach,
   żeby nikt nie wrócił do wariantu, który już upadł:
     1. absolutnie na ZEWNĘTRZNYCH krawędziach (`left:-16px` / `right:-16px`) — niesymetryczne,
        bo po prawej pas dobiega do krawędzi ekranu, a po lewej kolumna treści kończy się
        twardo i przycisk wchodził na pierwszy kafel (Oskar 23.10.2026),
     2. osobny wiersz NAD pasem, dosunięty do prawej — symetryczny, ale oderwany od pasa,
     3. (dziś) wewnątrz pasa, po 10 px od jego obu krawędzi, wyśrodkowane w pionie.
   `display:contents` zdejmuje wrapper z układu, żeby `position:absolute` liczyło się względem
   `.showcase-pas`, a nie względem samego wrappera. Reguła ukrywająca niżej dalej działa:
   `display:none` na `.sc-ster` wygrywa, bo ma `:has()` i wyższą wagę. */
.sc-ster { display:contents; }
.sc-ster:has(.go-strz[hidden]:only-child), .sc-ster:not(:has(.go-strz:not([hidden]))) { display:none; }
.sc-strz { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  box-shadow:var(--shadow); }
.sc-strz[data-sc="-1"] { left:10px; }
.sc-strz[data-sc="1"]  { right:10px; }
.go-ster { display:flex; justify-content:center; margin-top:9px; }
.go-ster[hidden] { display:none; }
.go-kropki { display:flex; align-items:center; gap:6px; }
.go-kropki button { width:6px; height:6px; padding:0; border:0; border-radius:999px;
  background:var(--border-strong); cursor:pointer; transition:width .2s, background .2s; }
.go-kropki button[aria-current="true"] { width:20px; background:var(--accent); }
/* `.go-cta` (przycisk „Zobacz wszystkie opinie") USUNIĘTY 22.10.2026 — Oskar: „nie dajemy
   linka do Google". Blok opinii kończy się kropkami i nigdzie nie wyprowadza. */

/* ── ZARZUTY WOBEC BANERA W KARCIE „ZGODY COOKIES" ───────────────────────────────────
   Lista składana przez `org_punkty_banera()` z zapisanego pomiaru. Stała w arkuszu
   smartcookie.io, ale od 22.10.2026 rysuje ją także `/pakiet-smart`, więc reguły muszą
   leżeć tam, gdzie widzą je oba landingi. Wygląd: szary tekst, pogrubiony tylko nagłówek
   punktu — ma czytać się jak nota pod rachunkiem, nie jak alarm. */
.sc-why { margin:10px 0 0; padding:0 0 0 18px; list-style:disc; }
.sc-why li { font-size:.8rem; line-height:1.45; color:var(--fg-muted); padding:2px 0; }
.sc-why li b { font-weight:700; }

@media (max-width:860px){
  .go-opinie { margin:18px 0 22px; }
  .go-ramka { gap:6px; }
  .go-strz { width:30px; height:30px; font-size:1.05rem; }
  /* Na telefonie ta sama wypowiedź zajmuje siedem wierszy zamiast trzech, więc okno i tak
     wychodzi wyższe niż na desktopie — tym bardziej podpis nie może tam stać kolumną.
     Kolumna (logotyp / nazwisko / gwiazdki) brała sto pikseli na podpis; w zawijanym wierszu
     mieści się w dwóch liniach. Liczby zmierzone, nie przyjęte na oko. */
  .go-rzad { min-height:150px; }
  .go-op { gap:7px; }
  .go-op blockquote { font-size:.94rem; line-height:1.45; }
  /* Na telefonie podpis jest tą samą kolumną co na desktopie, tylko ciaśniejszą — nic się tu
     nie zawija i nie przestawia, więc nazwisko stoi w tym samym miejscu na każdym slajdzie. */
  .go-op figcaption { min-height:38px; font-size:.78rem; }
  .go-op figcaption b { font-size:.82rem; line-height:1.25; }
  .go-op > .go-gw { font-size:.8rem; letter-spacing:.08em; }
  .go-op > .go-logo { height:24px; max-width:104px; }
  .go-op > .go-logo-kw { height:34px; }
}

/* Zwarty rząd faktów — argumenty bez pudełek. Powstał tam, gdzie cztery kafle
   powtarzały to, co strona mówi już gdzie indziej, a kolejna siatka kart robiła
   z landingu jeden długi rytm (Oskar 8.09). */
.wu-fakty { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2px; margin-top:30px; background:var(--border-soft);
  border:1px solid var(--border-soft); border-radius:var(--r-lg); overflow:hidden; }
.wu-fakty > div { background:var(--surface); padding:16px 18px; }
.wu-fakty b { display:block; font-size:.92rem; color:var(--navy); margin-bottom:3px; }
.wu-fakty span { display:block; font-size:.83rem; line-height:1.5; color:var(--fg-secondary); }

/* ── KATEGORIE ZNIŻEK — tak jak na stronie /znizki w panelu ──────────────────
   To liczniki przy kategoriach pokazują skalę katalogu, nie same nazwy narzędzi. */
.zn-kat { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.zn-kat span { display:inline-flex; align-items:center; gap:7px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:6px 14px;
  font-size:.83rem; color:var(--fg-secondary); }
.zn-kat b { color:var(--navy); font-weight:700; }
.zn-kat .wiecej { border-style:dashed; color:var(--fg-muted); }
.zn-kat + .fr-table { margin-top:18px; }

/* ── KURSY AKADEMII — wiersze ze znakiem kursu z panelu, nie siatka kafli ────
   Ikony są kopią tych z `klient/kursy.php`, żeby landing pokazywał produkt taki,
   jaki klient zobaczy po zalogowaniu (Oskar 8.09). */
.kurs-lista { max-width:760px; margin:28px auto 0; display:flex; flex-direction:column; gap:10px; }
.kurs { display:flex; align-items:center; gap:16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 18px; }
/* KAFELEK RYSUJE OTOCZENIE, NIE ZNAK (ta sama zasada co przy `.wu-ico`, 16.10.2026:
   „nie róbmy osłony wewnątrz osłony"). Do 18.10.2026 te trzy znaki były wpisane w stronę
   recznie, każdy z własnym białym prostokątem — i przez to NIE BYŁY tymi samymi znakami,
   co na stronie głównej i na stronach kursów (Ad Grants miał tu goły daszek zamiast
   plakietki). Teraz idą z `wu_ico_kurs()`, a biały kafelek z obwódką daje ta reguła. */
/* Światło 8 px, nie 5: `viewBox` jest przycięty do bboxa SAMEGO rysunku, a obwódka przedniej
   płyty wystaje poza niego o pół kreski — przy 5 px znak dotykał ramki kafelka. */
.kurs-ico { flex:0 0 auto; width:52px; height:52px; display:block; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:8px; }
.kurs-ico svg { width:100%; height:100%; display:block; overflow:visible; }
.kurs b { display:block; font-size:.98rem; color:var(--navy); margin-bottom:2px; }
/* NAZWA KURSU JAKO ODNOŚNIK (Oskar 23.10.2026) — kolor dziedziczy po `.kurs b`, żeby nie
   zrobić z wiersza pomarańczowego napisu; na najechaniu dopiero widać, że to link. */
.kurs b a { color:inherit; text-decoration:none; }
.kurs b a:hover { color:var(--accent-fg); text-decoration:underline; }
.kurs span { display:block; font-size:.87rem; line-height:1.55; color:var(--fg-secondary); }

/* ── ZASADY PROGRAMU — lista wymagań zamiast trzech kafli ────────────────────*/
.zasady { max-width:760px; margin:26px auto 0; list-style:none; padding:0; }
.zasady li { position:relative; padding:12px 0 12px 34px; font-size:.95rem; line-height:1.65;
  color:var(--fg-secondary); border-bottom:1px solid var(--border-soft); text-align:left; }
.zasady li:last-child { border-bottom:0; }
.zasady li::before { content:"✓"; position:absolute; left:0; top:13px; width:20px; height:20px;
  border-radius:50%; background:var(--accent); color:#fff; font-size:.72rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; }
.zasady b { color:var(--navy); }
@media (max-width:700px){
  /* Na telefonie trzy kolumny się nie mieszczą — każdy wiersz staje się blokiem. */
  .fr-table table, .fr-table tbody, .fr-table th, .fr-table td { display:block; width:auto; }
  /* ⚠️ KWOTA ZNIŻKI STOI OBOK ZNAKU, NIE POD NIM (Oskar 24.10.2026: „przy pakiecie fundraisers
     wysokość zniżki daj obok ikony, nie pod (na mobile)"). Wiersz był blokiem, więc znak, kwota
     i opis szły jeden pod drugim — sześć pozycji zajmowało pół ekranu, a najważniejsza liczba
     wisiała w trzeciej linii.
     `min-width` zamiast sztywnej szerokości pierwszej kolumny: znaki wyrównują się w pionie
     (każdy zajmuje co najmniej 116 px), a wiersz BEZ znaku — czyli taki, gdzie `th` niesie samą
     nazwę — bierze tyle, ile potrzebuje, zamiast łamać nazwę na cztery linie w wąskim słupku.
     Opis idzie pod spód (`flex:1 0 100%`), bo obok kwoty zostałoby na niego 40 px. */
  .fr-table tr { display:flex; flex-wrap:wrap; align-items:center; column-gap:12px; padding:11px 16px; }
  .fr-table th { padding:0; flex:0 0 auto; min-width:116px; }
  /* ⚠️ NA TELEFONIE ZOSTAJE SAM ZNAK, BEZ NAZWY (Oskar 23.10.2026: „na mobilnie same
     ikony"). Wiersz jest tu blokiem, więc nazwa i tak szła w osobnej linii nad kwotą —
     a znak mówi to samo w jednej trzeciej wysokości. Nazwa znika TYLKO przy `ma-znak`,
     czyli tam, gdzie jest czym ją zastąpić.
     Znak idzie o 4 px wyżej niż na pulpicie, bo stoi sam i nie musi równać się z tekstem.
     Margines za znakiem schodzi do zera — odstęp do kwoty robi `column-gap` wiersza. */
  .fr-table .fr-znak-box { margin-right:0; }
  .fr-table .fr-znak { height:24px; max-width:116px; }
  .fr-table th.ma-znak .fr-nazwa { display:none; }
  /* ⚠️ `width:auto` JEST TU KONIECZNE. Reguła pulpitowa `.fr-table .fr-save { width:190px }`
     ma wyższą wagę niż zbiorcze `.fr-table td { width:auto }` wyżej, więc kwota wchodziła
     w wiersz z szerokością 190 px: 116 (znak) + 12 (przerwa) + 190 = 318 px przy 308 px
     miejsca w wierszu — brakowało dziesięciu pikseli i `flex-wrap` zrzucał kwotę pod znak,
     czyli dokładnie tam, skąd miała zniknąć. */
  /* `white-space:normal` z tego samego powodu: najdłuższa kwota („średnio 2,5% zakupów")
     przy 390 px nie mieści się obok znaku w jednej linii i `nowrap` zrzucał CAŁĄ kwotę pod
     spód. Niech lepiej złamie się na dwie linijki obok znaku — o to w tej poprawce chodzi. */
  /* ⚠️ PODSTAWA `0`, NIE `auto`. O tym, czy element zjedzie do nowej linii, flexbox decyduje
     po jego szerokości PRZY JEDNEJ LINII TEKSTU — więc przy `auto` najdłuższa kwota („średnio
     2,5% zakupów", ok. 150 px) nie mieściła się przy 390 px obok znaku i lądowała pod nim,
     a tam miała już całą szerokość i nigdy się nie łamała. Z podstawą `0` kwota zostaje
     w wierszu zawsze, rozpycha się na to, co zostało po znaku, i dopiero TAM łamie tekst. */
  .fr-table .fr-save { padding:0; width:auto; flex:1 1 0; min-width:0; white-space:normal; }
  .fr-table td:last-child { flex:1 0 100%; padding:5px 0 0; }
}

/* ── MOCKUPY PRODUKTÓW (hero-visual) ── */
.hero-visual { position:relative; min-width:0; }
.mock-note { display:table; margin:0 0 8px auto; background:var(--fg); color:#fff; font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:999px; box-shadow:var(--shadow); }

/* okno przeglądarki */
.mock-browser { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mb-top { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
.mb-dots { display:flex; gap:5px; }
.mb-dots span { width:10px; height:10px; border-radius:50%; background:var(--border-strong); }
.mb-dots span:first-child { background:#FCA5A5; } .mb-dots span:nth-child(2) { background:#FCD34D; } .mb-dots span:nth-child(3) { background:#86EFAC; }
.mb-url { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:var(--fg-muted); padding:4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-url b { color:var(--fg-secondary); font-weight:600; }
.mb-body { position:relative; padding:16px; min-height:230px; }

/* szkielet strony w oknie */
.sk { border-radius:6px; background:var(--border-soft); }
.sk-line { height:9px; margin-bottom:7px; }
.sk-hero { height:64px; border-radius:var(--r); background:linear-gradient(120deg, var(--lp-soft), var(--border-soft)); margin-bottom:12px; }
.sk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sk-card { height:46px; border-radius:8px; background:var(--border-soft); }

/* baner SmartCookie w mockupie — replika 1:1 realnego banera (sc.php/sc.css.php web150):
   biała karta radius 12, Open Sans 300, przyciski pill 20px, primary #ff7b00, powered-by. */
.scd-modal { position:relative; margin:14px 0 0; background:#fff; border:1px solid #e0e0e0; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,.12); text-align:left; font-family:'Open Sans','Inter',sans-serif; }
.scd-body { padding:10px 12px 4px; font-size:12.5px; font-weight:300; line-height:1.4; color:#000; }
.scd-body strong { font-weight:700; }
.scd-body a { color:#4f4f4f; text-decoration:underline; }
.scd-cats { display:none; padding:2px 12px 0; }
.scd-cat { border-top:1px solid #f0f0f0; }
.scd-cat-head { display:flex; align-items:center; gap:8px; padding:7px 2px; font-size:12px; color:#000; font-weight:400; cursor:pointer; user-select:none; }
.scd-arrow { color:#999; font-size:14px; line-height:1; display:inline-block; transition:transform .15s; }
.scd-cat.open .scd-arrow { transform:rotate(90deg); }
.scd-cat-body { display:none; padding:0 2px 9px 22px; font-size:11px; font-weight:300; color:#777; line-height:1.5; }
.scd-cat.open .scd-cat-body { display:block; }
.scd-cat-head .name { flex:1; }
.scd-always { font-size:10.5px; color:#999; font-style:italic; }
.scd-switch { position:relative; width:30px; height:16px; flex-shrink:0; cursor:pointer; }
.scd-switch input { opacity:0; width:0; height:0; }
.scd-slider { position:absolute; inset:0; background:#eee; border-radius:999px; transition:.15s; }
.scd-slider::before { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:#fff; top:2px; left:2px; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:.15s; }
.scd-switch input:checked + .scd-slider { background:#ff7b00; }
.scd-switch input:checked + .scd-slider::before { transform:translateX(14px); }
.scd-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; padding:10px 12px; }
.scd-btn { box-sizing:border-box; display:inline-block; padding:6px 14px; font-size:10.5px; font-weight:400; font-family:'Open Sans',Arial,sans-serif; line-height:1.4; border-radius:20px; cursor:pointer; border:1px solid transparent; text-transform:uppercase; white-space:nowrap; background:transparent; transition:.15s; }
.scd-btn-sec { color:#ff7b00; border-color:#ff7b00; }
.scd-btn-sec:hover { color:#fff; background:#ff7b00; }
.scd-btn-pri { color:#fff; background:#ff7b00; box-shadow:0 2px 6px rgba(255,123,0,.2); }
.scd-btn-pri:hover { filter:brightness(1.1); }
.scd-powered { width:100%; text-align:right; font-size:10px; font-style:italic; color:#aaa; display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:2px; }
.scd-powered img { height:11px; opacity:.75; }
/* pływający cookie-dot — 1:1 jak w realnym banerze: czarne kółko 40px, biała pigułka 28×16
   i czarna kropka 10px po lewej (sc.css.php: #cookie-dot + .sc-slider2 + :before = secondary #000) */
/* ── DEMO SMARTCOOKIE: STALA WYSOKOSC MAKIETY ──
   Baner rosnie przy „Preferencjach" i rozwijaniu kategorii (zmierzone: 341 → 479 → 538 px,
   a po akceptacji spada do 230). Makieta zmieniala przez to rozmiar i cala strona skakala.
   Teraz okno ma staly rozmiar, baner jest przyklejony do dolu jak w prawdziwej witrynie,
   a lista kategorii przewija sie w srodku, zamiast rozpychac okno. */
.demo-cookie .mb-body { height:448px; }
.demo-cookie .scd-modal { position:absolute; left:16px; right:16px; bottom:16px; margin:0;
  display:flex; flex-direction:column; max-height:calc(100% - 32px); }
.demo-cookie .scd-cats { overflow-y:auto; }
.demo-cookie .scd-footer { flex-shrink:0; }
@media (max-width:1119px){ .demo-cookie .mb-body { height:480px; } }

.scd-dot { position:absolute; left:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:#000; display:none; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.scd-dot .mini { width:28px; height:16px; background:#fff; border-radius:24px; display:flex; align-items:center; padding:2px; }
.scd-dot .mini::before { content:""; width:10px; height:10px; border-radius:50%; background:#000; }

/* pasek sprawdzania domeny (checker ?d=) */
.intel-bar { display:flex; gap:8px; margin-bottom:12px; }
.intel-bar input { flex:1; min-width:0; padding:11px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit; color:var(--fg); background:var(--surface); }
.intel-bar input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.intel-btn { display:inline-flex; align-items:center; gap:7px; background:var(--fg); color:#fff; border:none; font-family:inherit; font-weight:600; font-size:.92rem; padding:11px 18px; border-radius:var(--r); cursor:pointer; transition:.15s; white-space:nowrap; }
.intel-btn:hover { background:#1E293B; }
.intel-btn[disabled] { opacity:.6; cursor:wait; }
.intel-status { margin:-4px 0 10px; font-size:.83rem; color:var(--fg-secondary); min-height:1.2em; }
.intel-status .ok { color:var(--green); font-weight:600; }
.intel-status .warn { color:var(--red); font-weight:600; }
.intel-result { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:14px 16px; margin-bottom:12px; display:none; }
.intel-result h4 { font-size:.92rem; font-weight:700; color:var(--fg); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.intel-result p { font-size:.87rem; color:var(--fg-secondary); }
.intel-result .tag { display:inline-block; font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--lp-soft); color:var(--lp); }
.intel-result .tag.bad { background:#FEF2F2; color:var(--red); }
.intel-result .tag.good { background:var(--green-soft); color:var(--green); }

/* skrzynka Gmail (workspace) */
.mock-inbox { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mi-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--bg); }
.mi-head .dot { width:26px; height:26px; border-radius:50%; background:var(--lp); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mi-head b { font-size:.85rem; color:var(--fg); }
.mi-head span { font-size:.75rem; color:var(--fg-muted); }
.mi-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border-soft); }
.mi-row:last-child { border-bottom:none; }
.mi-av { width:30px; height:30px; border-radius:50%; flex-shrink:0; color:#fff; font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.mi-txt { min-width:0; }
.mi-txt b { display:block; font-size:.8rem; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-txt span { display:block; font-size:.72rem; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mi-apps { display:flex; gap:8px; padding:12px 16px; background:var(--bg); border-top:1px solid var(--border); flex-wrap:wrap; }
.mi-app { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--fg-secondary); background:var(--surface); border:1px solid var(--border); padding:5px 10px; border-radius:999px; }
.mi-app i { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* ── EKRAN POWITALNY /hosting: SSL, EDYCJE W CENIE I HARMONOGRAM KOPII (`.ho-*`) ──
   Oskar 22.10.2026: „usuń to »tak czuwamy nad Twoją stroną« i dodaj tam jakąś grafikę
   przedstawiającą: certyfikat SSL, edycję www w cenie (obsługę 24/7) i ten harmonogram
   kopii zapasowych — to jakoś wizualnie może być".

   ⚠️ MAKIETA MONITORINGU (`.mock-monitor`, `.mm-head`, `.mm-row`, `.mm-ok`, `.mm-bars`)
   SKASOWANA razem z tą zmianą — używał jej wyłącznie `/hosting`. Przy okazji znika kolizja:
   `.mm-row` było w tym pliku zdefiniowane DRUGI raz dla makiety Workspace (adres przed/po),
   niżej, więc tamta definicja wygrywała i wiersze monitoringu nie wyglądały tak, jak mówił
   ich własny arkusz. Nowe klasy mają przedrostek `.ho-`, który jest w tym pliku jedyny.
   `@keyframes pulse` zostaje — bierze go kropka „monitoring co 3 minuty" w stopce grafiki. */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.ho-wiz { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); overflow:hidden; }
.ho-poz { display:flex; align-items:flex-start; gap:13px; padding:15px 17px;
  border-bottom:1px solid var(--border-soft); }
.ho-poz-kopie { border-bottom:none; padding-bottom:9px; }
.ho-ico { flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid;
  place-items:center; background:var(--lp-soft); color:var(--lp); }
.ho-ico svg { width:19px; height:19px; display:block; }
.ho-txt b { display:block; font-size:.93rem; line-height:1.35; color:var(--navy); font-weight:700; }
.ho-txt > span { display:block; margin-top:3px; font-size:.8rem; line-height:1.5; color:var(--fg-secondary); }
/* KOPIE W TRZECH KOSTKACH — układ z panelu klienta, ale wyśrodkowany i na zielono
   (Oskar 22.10.2026: „te kopie zapasowe daj jakoś ładniej, wyśrodkowane liczby na tym
   hostingu, może też na zielono czy coś, zrób nowocześniej").
   Zielony to w tym serwisie kolor rzeczy, która DZIAŁA i jest po naszej stronie (ta sama
   rodzina, co „0 zł licencji" na Workspace i kropka „online" wyżej w tej karcie) — przy
   kopiach zapasowych niesie dokładnie to: nic nie przepadnie. Liczba stoi na środku kafla
   i jest bohaterem; etykieta nad nią i opis pod nią są jej podpisem. */
/* ⚠️ CAŁY BLOK ZMNIEJSZONY 23.10.2026 (Oskar: „ten element »kopie zapasowe« spróbuj trochę
   zmniejszyć"). Razem z nim zeszło słowo „kopii" spod liczby — zostaje sama liczba i zasięg
   wstecz, więc opis jest jednolinijkowy i kafel nie potrzebuje tyle wysokości. */
.ho-kopie { padding:11px 15px 14px; border-top:1px solid var(--border); background:var(--bg); }
.ho-kopie-h { display:block; font-size:.66rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--fg-muted); margin-bottom:8px; text-align:center; }
.ho-kostki { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ho-kostka { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:9px 7px 9px; text-align:center; box-shadow:var(--shadow-sm); }
.ho-k-et { display:block; font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--fg-muted); }
.ho-kostka b { display:block; margin:2px 0 1px; font-size:1.5rem; font-weight:800; line-height:1;
  letter-spacing:-.04em; color:var(--green); font-variant-numeric:tabular-nums; }
.ho-k-op { display:block; font-size:.65rem; line-height:1.3; color:var(--fg-secondary); }
.ho-k-op b { display:inline; margin:0; font-size:inherit; font-weight:700; letter-spacing:0;
  color:var(--fg); }
/* PASEK „JAK DALEKO WSTECZ" pod liczbą — jedyna rzecz, która w tych trzech kostkach rośnie
   inaczej niż liczba, więc od razu widać, że to osobna skala. Wypełnia się po wejściu kostki
   w kadr, razem z doliczaniem liczby od zera. Szerokości liczone z pierwiastka z liczby dni
   (2 / 7 / 90), bo liniowo pierwszy pasek byłby niewidoczny.
   ⚠️ Rośnie przez `scaleX`, a NIE przez `width`. Docelowa szerokość stoi w atrybucie `style`
   przy każdym pasku, a reguła z `width` musiałaby ją przebić `!important` i podać tę samą
   liczbę drugi raz — czyli trzymać ją w dwóch miejscach. `scaleX(0 → 1)` animuje to, co już
   jest, i przy okazji idzie po karcie graficznej. */
.ho-k-pas { display:block; height:3px; margin-top:7px; border-radius:999px;
  background:color-mix(in srgb, var(--green) 16%, transparent); overflow:hidden; }
.ho-k-pas i { display:block; height:100%; border-radius:999px; background:var(--green);
  transform-origin:left center; }
.wu-anim .ho-kostka .ho-k-pas i { transform:scaleX(0); }
.wu-anim .ho-kostka.wu-in .ho-k-pas i { transform:scaleX(1);
  transition:transform .9s cubic-bezier(.2,.75,.3,1) .15s; }
/* Kropka „online" stoi W NAGŁÓWKU pozycji monitoringu, nie w stopce karty — stąd odstęp
   z lewej i wyrównanie do linii tekstu. */
.ho-txt .ho-puls { margin-left:8px; vertical-align:middle; }
.ho-puls { display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--green); }
.ho-puls i { width:7px; height:7px; border-radius:50%; background:var(--green);
  display:inline-block; animation:pulse 1.6s infinite; }
@media (prefers-reduced-motion:reduce){ .ho-puls i { animation:none; } }
@media (max-width:620px){
  .ho-poz { padding:13px 14px; gap:11px; }
  .ho-ico { width:30px; height:30px; }
  .ho-kopie { padding:11px 14px 13px; }
  .ho-kostki { gap:6px; }
  .ho-kostka b { font-size:1.6rem; }
}

/* SERP Google (adgrants) */
.mock-serp { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:16px; }
.ms-bar { display:flex; align-items:center; gap:10px; border:1px solid var(--border-strong); border-radius:999px; padding:9px 16px; font-size:.85rem; color:var(--fg); margin-bottom:14px; }
.ms-bar svg { flex-shrink:0; }
.ms-ad { border:1px solid var(--border); border-radius:var(--r-lg); padding:13px 15px; background:#fff; }
.ms-tag { display:inline-block; font-size:.68rem; font-weight:700; color:var(--fg); border:1px solid var(--border-strong); padding:1px 7px; border-radius:4px; margin-bottom:6px; }
.ms-url { font-size:.74rem; color:#0C6329; }
.ms-title { font-size:.98rem; color:#1A0DAB; font-weight:500; margin:2px 0 3px; }
.ms-desc { font-size:.78rem; color:var(--fg-secondary); }
.ms-org { padding:12px 15px 4px; opacity:.55; }
/* Przełącznik branży przy przykładowej reklamie (strona główna, sekcja Ad Grants).
   Pastylki to ten sam komponent (.kw-preset) co w planerze słów na adgrants.webup.pl. */
.gag-branze { justify-content:flex-start; margin-bottom:12px; }
/* Wszystkie warianty reklamy w JEDNEJ komórce siatki. Nieaktywne chowamy przez
   `visibility`, a nie `display` — dzięki temu nadal zajmują miejsce i wysokość bloku
   jest stała, równa najdłuższej reklamie. Inaczej przełączenie branży przesuwało
   całą stronę pod kursorem. */
.ms-stack { display:grid; }
.ms-stack > .ms-ad { grid-area:1 / 1; visibility:hidden; }
.ms-stack > .ms-ad.on { visibility:visible; }
.wu-gag-cta p a { color:var(--accent-fg); font-weight:600; }

.ms-badge { display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:var(--green-soft); color:var(--green); font-size:.76rem; font-weight:700; padding:6px 12px; border-radius:999px; }

/* raport PING */
.mock-report { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.mr-head { display:flex; justify-content:space-between; align-items:center; padding:13px 16px; background:var(--bg); border-bottom:1px solid var(--border); }
.mr-head b { font-size:.85rem; color:var(--fg); }
.mr-head span { font-size:.72rem; color:var(--fg-muted); }
.mr-score { display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid var(--border-soft); }
.mr-ring { width:64px; height:64px; border-radius:50%; background:conic-gradient(var(--red) 0 62%, var(--border-soft) 62% 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mr-ring i { width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.95rem; color:var(--fg); }
.mr-score p { font-size:.8rem; color:var(--fg-secondary); }
.mr-score b { color:var(--fg); }
.mr-item { display:flex; gap:10px; align-items:flex-start; padding:10px 16px; border-bottom:1px solid var(--border-soft); font-size:.8rem; color:var(--fg-secondary); }
.mr-item:last-child { border-bottom:none; }
.mr-item b { color:var(--fg); font-weight:600; }
.mr-dot { width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; }

/* ── MODAL ZAMÓWIENIA ── */
.modal-back { position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:18px; }
.modal-back.open { display:flex; }
.modal { background:var(--surface); border-radius:var(--r-xl); max-width:440px; width:100%; padding:28px; position:relative; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg); }
.modal h3 { color:var(--fg); font-size:1.15rem; font-weight:800; margin-bottom:4px; }
.modal .modal-sub { color:var(--fg-muted); font-size:.88rem; margin-bottom:16px; }
.modal-close { position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.5rem; color:var(--fg-muted); cursor:pointer; line-height:1; }
.modal label { display:block; font-size:.83rem; font-weight:600; color:var(--fg); margin:13px 0 5px; }
/* kafle dodatków w modalu są <label> — muszą zostać flexem, inaczej cena spada pod opis */
.modal .pa-opt { display:flex; margin:0 0 8px; font-weight:400; }
.modal .pa-opt:last-of-type { margin-bottom:0; }
.modal input[type=text], .modal input[type=email] { width:100%; padding:10px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit; color:var(--fg); background:var(--surface); }
.modal input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.modal .consent { display:flex; gap:9px; align-items:flex-start; margin-top:15px; font-size:.8rem; color:var(--fg-muted); }
/* Ptaszek BIAŁY na pomarańczowym — ta sama zasada co przy `.qc-chip` wyżej i ten sam powód:
   `accent-color` maluje tło, ale ptaszka rysuje przeglądarka i wychodzi ciemny na pomarańczu
   (Oskar 7.09, powtórzone 5.10.2026). Własny kwadracik, własny ptaszek, zawsze biały.
   Zasada obowiązuje KAŻDY checkbox na landingach — nie tylko ten w modalu. */
.modal .consent input { position:absolute; opacity:0; width:0; height:0; }
.modal .consent::before { content:"✓"; flex:0 0 auto; margin-top:2px; width:18px; height:18px;
  border-radius:5px; border:1.5px solid var(--border-strong); background:var(--surface);
  color:transparent; font-size:.72rem; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s; cursor:pointer; }
.modal .consent:has(input:checked)::before { background:var(--accent); border-color:var(--accent); color:#fff; }
.modal .consent:has(input:focus-visible)::before { box-shadow:0 0 0 3px rgba(255,111,0,.3); }
.modal .btn-primary { width:100%; justify-content:center; margin-top:18px; }
.modal .err { display:none; background:#FEF2F2; color:var(--red); border:1px solid #FECACA; border-radius:var(--r); padding:10px 14px; font-size:.86rem; margin-top:13px; }
.modal .hp { position:absolute; left:-5000px; opacity:0; }

/* dziękujemy */
.thanks-wrap { max-width:680px; margin:0 auto; }
.thanks-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:34px; margin-top:24px; box-shadow:var(--shadow); }
.thanks-ok { width:60px; height:60px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:1.8rem; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }

/* karta budżetu grantu (hero Ad Grants) */
.grant-card { background:linear-gradient(155deg,#0F172A,#1E293B); color:#fff; border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-lg); }
.grant-card .gc-top { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.82rem; color:#B6C2D2; }
.grant-card .gc-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(34,197,94,.16); color:#4ADE80; font-weight:700; font-size:.75rem; padding:4px 11px; border-radius:999px; }
.grant-card .gc-amt { font-size:2.9rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:14px 0 2px; }
.grant-card .gc-sub { font-size:.9rem; color:#CBD5E1; }
.grant-card .gc-bar { height:9px; border-radius:999px; background:rgba(255,255,255,.14); margin:18px 0 8px; overflow:hidden; }
.grant-card .gc-bar i { display:block; height:100%; width:64%; border-radius:999px; background:linear-gradient(90deg,#FF6F00,#FF9A47); }
.grant-card .gc-legend { display:flex; justify-content:space-between; font-size:.78rem; color:#8FA3B8; }
.grant-card .gc-rows { margin-top:20px; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; }
.grant-card .gc-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 0; font-size:.86rem; color:#CBD5E1; }
.grant-card .gc-row b { color:#fff; }
.grant-card .gc-row .ok { color:#4ADE80; font-weight:700; }

/* ── MAKIETA WYNIKÓW GOOGLE (Ad Grants) — wygląd 1:1 z wyszukiwarką, więc celowo
   własne kolory/typografia Google zamiast tokenów landingu ── */
.g-wrap { max-width:760px; margin:34px auto 0; background:#f1f3f4; border-radius:var(--r-xl); overflow:hidden; box-shadow:0 14px 44px rgba(15,23,42,.16), 0 3px 10px rgba(15,23,42,.06); }
.g-bar { background:#dee1e6; padding:9px 14px; display:flex; align-items:center; gap:8px; }
.g-bar i { width:11px; height:11px; border-radius:50%; display:block; }
.g-url { flex:1; background:#fff; border-radius:20px; padding:5px 14px; font-size:.76rem; color:#5f6368; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:Arial,Helvetica,sans-serif; }
.g-inner { background:#fff; }
.g-search { padding:15px 20px 8px; display:flex; align-items:center; gap:14px; }
.g-input { flex:1; border:1px solid #dfe1e5; border-radius:24px; padding:9px 16px; font-size:.9rem; color:#202124; display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:Arial,Helvetica,sans-serif; box-shadow:0 1px 4px rgba(32,33,36,.08); }
.g-tabs { padding:6px 20px 0; display:flex; gap:4px; border-bottom:1px solid #ebedef; }
.g-tab { padding:8px 12px; font-size:.79rem; color:#5f6368; border-bottom:3px solid transparent; margin-bottom:-1px; font-family:Arial,Helvetica,sans-serif; }
.g-tab.on { color:#1a73e8; border-bottom-color:#1a73e8; font-weight:600; }
.g-res { padding:18px 18px 20px; font-family:Arial,Helvetica,sans-serif; background:#f8fafc; }
/* W HERO makieta ma byc niska, zeby pasek logotypow zmiescil sie w pierwszym ekranie:
   zakladki Google (Wszystko/Grafika/Mapy) nic nie wnosza, a kosztuja ~45 px. */
.hero .g-tabs { display:none; }
.hero .g-res { padding:12px 14px 14px; }
.hero .g-search { padding:12px 16px 6px; }
/* każda reklama = osobna biała karta z niebieskim akcentem (czytelniejsze niż płaska lista) */
.g-ad { background:#fff; border:1px solid #e8edf3; border-radius:12px; box-shadow:0 1px 3px rgba(15,23,42,.06); padding:14px 16px 14px 0; margin-bottom:12px; }
.g-ad > div, .g-ad > span { margin-left:16px; }
.g-ad { border-left:4px solid #4285f4; }
.g-tag { display:inline-block; font-size:.7rem; font-weight:700; color:#856404; background:#fff8e1; border:1px solid #ffe082; border-radius:4px; padding:1px 7px; margin-bottom:6px; }
.g-line { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.g-fav { width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.62rem; font-weight:800; flex-shrink:0; }
.g-dom { font-size:.8rem; color:#202124; line-height:1.25; }
.g-dom span { display:block; font-size:.73rem; color:#1e7e34; }
.g-t { font-size:1.02rem; color:#1a0dab; line-height:1.35; margin:4px 0 4px; cursor:pointer; font-weight:500; }
.g-t:hover { text-decoration:underline; }
.g-d { font-size:.845rem; color:#4d5156; line-height:1.55; }
.g-sl { display:flex; flex-wrap:wrap; margin-top:8px; }
.g-sl a { font-size:.8rem; color:#1a0dab; text-decoration:none; padding:2px 0; }

/* Makieta wyszukiwarki W HERO landingu Ad Grants: staly rozmiar niezaleznie od wybranej
   frazy. Bez tego kazde zapytanie dawalo inna wysokosc (zmierzone 811 / 833 / 854 px)
   i cala strona skakala przy przelaczaniu — ten sam problem, co przy reklamie na
   stronie glownej. Opis reklamy tniemy do dwoch linii, a odnosniki dodatkowe
   do jednego rzedu. */
.hero .g-ad .g-d { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em; }
.hero .g-sl { flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.hero .g-t { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.g-sl a:hover { text-decoration:underline; }
.g-sl a + a::before { content:'·'; color:#9aa0a6; margin:0 7px; }
.g-split { display:flex; align-items:center; gap:10px; margin:16px 0 12px; font-size:.72rem; color:#9aa0a6; text-transform:uppercase; letter-spacing:.07em; font-family:'Inter',sans-serif; font-weight:700; }
.g-split::before, .g-split::after { content:""; flex:1; height:1px; background:#e3e8ef; }
.g-org { margin-bottom:14px; opacity:.55; padding:0 4px; }
.g-org .g-oline { display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.g-org .g-otile { width:18px; height:18px; border-radius:4px; background:#eceff3; display:flex; align-items:center; justify-content:center; font-size:.62rem; flex-shrink:0; }
.g-note { display:flex; align-items:center; justify-content:center; gap:9px; background:var(--green-soft); color:var(--green); font-family:'Inter',sans-serif; font-size:.86rem; font-weight:700; padding:11px 16px; text-align:center; }
.g-queries { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:26px; }
.g-q { font-family:'Inter',sans-serif; font-size:.85rem; font-weight:600; padding:7px 15px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-secondary); cursor:pointer; transition:.15s; }
.g-q:hover { border-color:var(--accent); color:var(--accent-fg); }
.g-q.on { background:var(--fg); border-color:var(--fg); color:#fff; }

/* ── PLANER SŁÓW KLUCZOWYCH (Ad Grants) ── */
.kw-intro { display:flex; gap:12px; align-items:flex-start; background:var(--lp-soft); border:1px solid color-mix(in srgb, var(--lp) 22%, transparent); border-radius:var(--r-lg); padding:16px 20px; margin-top:26px; font-size:.93rem; color:var(--fg-secondary); line-height:1.6; }
.kw-intro b { color:var(--fg); }
.kw-intro .ico { font-size:1.2rem; line-height:1.2; }
/* Lewa kolumna zwęzona (Oskar 8.09): po schowaniu pola na frazy zostają w niej same kafelki
   tematów, więc pół szerokości sekcji stało puste. Wynik dostaje resztę. */
/* `stretch`, nie `start`: obie kolumny mają być tej samej wysokości (Oskar 8.09).
   Pole na frazy rozciąga się do wysokości wyników, zamiast zostawiać dziurę pod spodem. */
.kw-wrap { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:22px; margin-top:32px; align-items:stretch; }
.kw-panel { display:flex; flex-direction:column; }
.kw-panel .kw-ta { flex:1 1 auto; }
/* minmax(0,…) + min-width:0 są konieczne: bez nich kolumna nie kurczy się poniżej
   szerokości treści (poziomy pas presetów) i cały panel wychodził poza ekran telefonu */
@media (max-width:880px){ .kw-wrap { grid-template-columns:minmax(0,1fr); } }
.kw-panel, .kw-res { min-width:0; }
.kw-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow); }
.kw-presets { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
/* `inline-flex` + rozmiar znaku: bez tego SVG rozpycha kafelek i etykieta ląduje pod nim,
   a z kafelków robią się koła (8.09). */
.kw-preset { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:.82rem; font-weight:600; padding:6px 13px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-secondary); cursor:pointer; transition:.15s; }
.kw-preset svg { flex:none; width:15px; height:15px; }
.kw-preset:hover { border-color:var(--accent); color:var(--accent-fg); }
.kw-preset.active { background:var(--fg); border-color:var(--fg); color:#fff; }
.kw-label { display:block; font-size:.82rem; font-weight:600; color:var(--fg); margin-bottom:6px; }
/* WYBÓR RYNKU (tylko wersja angielska planera, 20.10.2026) — własne klasy, bo na telefonie
   `.kw-panel:not(.open) .kw-label` chowa etykiety pola z frazami, a rynek ma być widoczny
   zawsze: to on decyduje, z jakiego kraju są liczby pod spodem. 16 px w polu wyboru, żeby
   iOS nie przybliżał ekranu przy dotknięciu. */
.kw-rynek-lab { display:block; font-size:.82rem; font-weight:600; color:var(--fg); margin-bottom:6px; }
.kw-rynek { width:100%; margin-bottom:14px; padding:10px 12px; border:1px solid var(--border-strong);
  border-radius:var(--r); font-family:inherit; font-size:16px; color:var(--fg); background:var(--surface); }
.kw-rynek:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.kw-ta { width:100%; min-height:150px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:var(--r); font-family:inherit; font-size:.9rem; line-height:1.7; color:var(--fg); background:var(--surface); resize:vertical; }
.kw-ta:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.kw-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
.kw-cnt { font-size:.8rem; color:var(--fg-muted); }
.kw-err { display:none; background:#FEF2F2; color:var(--red); border:1px solid #FECACA; border-radius:var(--r); padding:9px 13px; font-size:.85rem; margin-top:10px; }
.kw-res { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow); }
.kw-total { background:linear-gradient(150deg,#0F172A,#1E293B); color:#fff; border-radius:var(--r-lg); padding:18px 20px; text-align:center; }
.kw-total .cap { display:block; font-size:.8rem; color:#B6C2D2; margin-bottom:2px; }
.kw-total .big { font-size:2.3rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; display:block; }
.kw-total .unit { font-size:.85rem; color:#CBD5E1; }
.kw-mine { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; background:var(--lp-soft); border:1px solid color-mix(in srgb, var(--lp) 25%, transparent); border-radius:var(--r); padding:11px 14px; margin-top:12px; }
.kw-mine b { font-size:1.3rem; font-weight:800; color:var(--lp); }
.kw-mine span { font-size:.82rem; color:var(--fg-secondary); }
.kw-head { font-size:.75rem; font-weight:700; color:var(--fg-muted); letter-spacing:.07em; text-transform:uppercase; margin:16px 0 8px; }
.kw-list { max-height:330px; overflow-y:auto; }
.kw-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 2px; border-bottom:1px solid var(--border-soft); font-size:.9rem; }
.kw-row:last-child { border-bottom:none; }
.kw-row .kw { color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kw-row .vol { color:var(--fg-secondary); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kw-note { font-size:.78rem; color:var(--fg-muted); margin-top:12px; text-align:center; }
.kw-reszta { font-size:.82rem; color:var(--fg-secondary); margin-top:10px; }
.kw-skel { height:14px; border-radius:6px; background:var(--border-soft); margin-bottom:10px; animation:kwp 1.2s ease-in-out infinite; }
@keyframes kwp { 0%,100%{opacity:1} 50%{opacity:.45} }
.kw-cta { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  background:var(--accent); color:#fff !important; text-decoration:none; font-weight:600; font-size:.95rem;
  padding:12px 18px; border-radius:var(--r); box-shadow:0 4px 14px rgba(249,115,22,.28); }
.kw-cta:hover { background:var(--accent-light); }
.kw-cta:active { background:var(--accent-hover); }
/* Chowanie pola pod przyciskiem zostaje TYLKO na telefonie — na dużym ekranie widoczne pole
   z frazami czytało się lepiej (Oskar 8.09, po zobaczeniu wersji schowanej). */
.kw-toggle { display:none; }
@media (max-width:640px){
  .kw-intro { display:none; }
  .kw-toggle { display:block; width:100%; margin-top:2px; padding:11px 14px; font-family:inherit;
    font-size:.9rem; font-weight:600; color:var(--fg-secondary); background:var(--bg);
    border:1px dashed var(--border-strong); border-radius:var(--r); cursor:pointer; }
  .kw-toggle:hover { border-color:var(--accent); color:var(--accent-fg); }
  .kw-panel:not(.open) .kw-label,
  .kw-panel:not(.open) .kw-ta,
  .kw-panel:not(.open) .kw-bar { display:none; }
  .kw-panel.open .kw-toggle { margin-bottom:12px; }
  .kw-presets { flex-wrap:nowrap; overflow-x:auto; margin:0 -20px 14px; padding:0 20px 4px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .kw-presets::-webkit-scrollbar { display:none; }
  .kw-preset { flex:0 0 auto; }
  /* height, nie min-height — pole ma rows="16", więc wysokość wewnętrzna wygrywa z min-height */
  .kw-ta { height:150px; min-height:0; font-size:16px; line-height:1.55; }  /* 16px = iOS nie zoomuje pola */
  .kw-bar { flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .kw-bar .btn-primary { width:100%; justify-content:center; }
  .kw-cnt { text-align:center; }
  .kw-total .big { font-size:2rem; }
  .kw-list { max-height:360px; }
  .kw-panel, .kw-res { padding:16px; }
}

/* ── formularz darmowego audytu (PING Free) ── */
.audit-form { margin-top:30px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:26px 28px; box-shadow:var(--shadow); }
.audit-form .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* Wariant wąski — formularz stojący POD szerokim cennikiem (odbiór darmowego mini-kursu na
   webup.us). Bez limitu rozciągał się na całe 1140 px siatki cennika i cztery krótkie pola
   wyglądały jak formularz rejestracyjny. `.audit-ok` dostaje ten sam limit, bo staje w jego
   miejscu po wysyłce. */
.audit-form.waska, .audit-form.waska + .audit-ok { max-width:720px; margin-left:auto; margin-right:auto; }
.aud-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.audit-form label { display:block; font-size:.83rem; font-weight:600; color:var(--fg); }
.audit-form label span { font-weight:400; color:var(--fg-muted); }
.audit-form input[type=text], .audit-form input[type=email],
.audit-form select, .audit-form textarea { width:100%; margin-top:5px; padding:11px 14px;
  border:1px solid var(--border-strong); border-radius:var(--r); font-size:.95rem; font-family:inherit;
  color:var(--fg); background:var(--surface); }
.audit-form input:focus, .audit-form select:focus, .audit-form textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(249,115,22,.15); }
.audit-form .btn-primary { width:100%; justify-content:center; margin-top:20px; }
.aud-err { display:none; background:#FEF2F2; color:var(--red); border:1px solid #FECACA; border-radius:var(--r);
  padding:10px 14px; font-size:.86rem; margin-top:14px; }
.aud-note { margin-top:12px; font-size:.82rem; color:var(--fg-muted); text-align:center; }
.audit-ok { display:none; margin-top:30px; background:var(--green-soft);
  border:1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius:var(--r-xl);
  padding:26px 28px; text-align:center; }
.audit-ok b { display:block; font-size:1.15rem; color:var(--green); margin-bottom:6px; }
.audit-ok span { font-size:.93rem; color:var(--fg-secondary); line-height:1.6; }
@media (max-width:640px){ .aud-grid { grid-template-columns:1fr; gap:14px; } .audit-form { padding:20px; } }

/* ── rozbicie ceny pakietu SMART ── */
.smart-math { max-width:780px; margin:20px auto 0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:13px 20px; box-shadow:var(--shadow); text-align:left; }
.smart-math > summary { list-style:none; cursor:pointer; display:flex; align-items:center; flex-wrap:wrap;
  gap:8px 16px; font-size:.95rem; color:var(--fg-secondary); }
.smart-math > summary::-webkit-details-marker { display:none; }
.sm-lead b { font-size:1.12rem; font-weight:800; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap; }
.sm-lead b.pk { color:var(--accent-fg); }
.sm-lead i { font-style:normal; color:var(--fg-muted); margin:0 8px; }
.sm-badge { background:var(--green-soft); border:1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-radius:999px; padding:4px 12px; font-size:.86rem; }
.sm-badge b { color:var(--green); font-weight:800; font-variant-numeric:tabular-nums; }
.sm-more { margin-left:auto; font-size:.83rem; font-weight:600; color:var(--accent-fg); white-space:nowrap; }
.sm-more::after { content:" ▾"; font-size:.75em; }
.smart-math[open] .sm-more::after { content:" ▴"; }
.sm-body { margin-top:10px; padding-top:4px; border-top:1px solid var(--border-soft); }
.sm-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:6px 0;
  border-bottom:1px solid var(--border-soft); font-size:.9rem; color:var(--fg-secondary); }
.sm-row a { color:var(--fg-secondary); text-decoration:none; border-bottom:1px dotted var(--border-strong); }
.sm-row a:hover { color:var(--accent-fg); border-bottom-color:var(--accent); }
.sm-row b { font-variant-numeric:tabular-nums; color:var(--fg); font-weight:600; white-space:nowrap; text-align:right; }
.sm-row.sum { border-bottom:2px solid var(--border); font-weight:600; color:var(--fg); }
.sm-row.sum b { font-size:1.02rem; }
.sm-row.pkg { border-bottom:none; color:var(--navy); font-weight:700; padding:8px 0 2px; }
.sm-row.pkg b { font-size:1.18rem; font-weight:800; color:var(--accent-fg); letter-spacing:-.02em; }
.sm-row i { display:block; font-style:normal; font-size:.75rem; font-weight:500; color:var(--fg-muted); line-height:1.35; }
.sm-note { margin-top:9px; font-size:.75rem; color:var(--fg-muted); line-height:1.45; }
@media (max-width:640px){
  .smart-math > summary { gap:7px 10px; font-size:.88rem; }
  .sm-lead { width:100%; }
  .sm-lead i { margin:0 5px; }
  .sm-more { margin-left:0; }
}

/* ── Assistant: przed/po + dziennik zmian ── */
.asst-ba { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:32px; }
.ba-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.ba-cap { display:block; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted); }
.ba-vals { display:flex; align-items:baseline; gap:10px; margin:8px 0 6px; }
.ba-vals b { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ba-vals i { font-style:normal; color:var(--fg-muted); font-size:1.1rem; }
.was { color:var(--fg-muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.now { color:var(--green); }
.ba-note { font-size:.8rem; color:var(--fg-secondary); line-height:1.45; }

.asst-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:24px; margin-top:24px; align-items:start; }
.asst-copy h3 { font-size:1.1rem; font-weight:800; color:var(--navy); margin-bottom:8px; }
.asst-copy p { font-size:.95rem; color:var(--fg-secondary); line-height:1.6; }
.asst-list { list-style:none; margin:18px 0 0; }
.asst-list li { padding:10px 0 10px 26px; position:relative; border-bottom:1px solid var(--border-soft); }
.asst-list li:last-child { border-bottom:none; }
.asst-list li::before { content:"✓"; position:absolute; left:3px; top:11px; color:var(--green); font-weight:800; }
.asst-list b { display:block; font-size:.94rem; color:var(--fg); }
.asst-list span { font-size:.85rem; color:var(--fg-secondary); }
.asst-foot { margin-top:16px; font-size:.85rem; color:var(--fg-muted); }

.asst-feed { background:#0F172A; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.af-top { display:flex; align-items:center; gap:9px; padding:14px 18px; background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.09); color:#CBD5E1; font-size:.84rem; font-weight:600; }
.af-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(22,163,74,.22); flex-shrink:0; animation:afPulse 2s ease-in-out infinite; }
@keyframes afPulse { 0%,100%{box-shadow:0 0 0 4px rgba(22,163,74,.22)} 50%{box-shadow:0 0 0 7px rgba(22,163,74,.05)} }
.af-rows { padding:6px 0; min-height:290px; }
.af-row { display:flex; gap:13px; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0; transform:translateY(-8px); transition:opacity .4s ease, transform .4s ease; }
.af-row.in { opacity:1; transform:none; }
.af-row:last-child { border-bottom:none; }
.af-time { flex:0 0 78px; font-size:.72rem; color:#7C8CA5; padding-top:2px; }
.af-what > b { display:block; font-size:.88rem; color:#F1F5F9; font-weight:600; margin-bottom:2px; }
.af-what > span { font-size:.8rem; color:#94A3B8; line-height:1.5; }
.af-what .was { color:#7C8CA5; }
.af-what .now { color:#4ADE80; }
.af-row::before { content:""; position:relative; top:5px; flex:0 0 7px; height:7px; border-radius:50%; background:#64748B; }
.af-row.up::before  { background:#4ADE80; }
.af-row.off::before { background:#FB923C; }
.af-row.fix::before { background:#60A5FA; }
.af-note { padding:12px 18px; border-top:1px solid rgba(255,255,255,.09); font-size:.76rem; color:#7C8CA5; text-align:center; }
@media (max-width:900px){ .asst-grid { grid-template-columns:1fr; } .af-rows { min-height:0; } }
@media (prefers-reduced-motion:reduce){ .af-row { transition:none; opacity:1; transform:none; } .af-dot { animation:none; } }

/* ── ryzyka (czym grozi brak usługi) ── */
.risk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:32px; }
.risk-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--red);
  border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.risk-card .rk-ico { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:#FEF2F2; font-size:1.05rem; margin-bottom:12px; }
.risk-card b { display:block; font-size:1rem; color:var(--navy); margin-bottom:5px; }
.risk-card span { font-size:.88rem; color:var(--fg-secondary); line-height:1.55; }
.risk-card strong { color:var(--fg); }

/* ── PAKIET FUNDRAISERA ── */
.fr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-top:30px; }
.fr-item { display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-sm); }
.fr-item .ico { width:38px; height:38px; border-radius:10px; background:var(--lp-soft); color:var(--lp); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.fr-item b { display:block; font-size:.92rem; color:var(--fg); margin-bottom:2px; }
.fr-item span { font-size:.84rem; color:var(--fg-secondary); }
.fr-item .save { color:var(--green); font-weight:700; }

/* ── REALIZACJE (prawdziwe zrzuty stron) ── */
/* Dwie kolumny zamiast trzech — zrzuty stron potrzebują szerokości, żeby dało się
   cokolwiek na nich zobaczyć. Przy trzech kolumnach nagłówek klienta był nieczytelny. */
.showcase-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:36px; }
.showcase-grid > .showcase-item { flex:1 1 430px; max-width:560px; }
.showcase-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); transition:.15s; display:block; text-decoration:none; }
a.showcase-item:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.showcase-top { display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--bg); border-bottom:1px solid var(--border); }
.showcase-top .mb-dots span { width:9px; height:9px; }
.showcase-top .mb-url { font-size:.74rem; }
/* Kadr 4:3 i zrzuty robione w 1440×1080 — dokładnie ta sama proporcja, więc `cover`
   nie ma czego przycinać i widać znacznie większy kawałek strony niż przy 16:10. */
.showcase-shot { display:block; width:100%; aspect-ratio:4/3; height:auto;
  object-fit:cover; object-position:top center; }
.showcase-cap { padding:13px 16px; }
.showcase-cap b { display:block; font-size:.92rem; color:var(--fg); }
.showcase-cap span { font-size:.82rem; color:var(--fg-muted); }
.showcase-tag { float:right; font-size:.7rem; font-weight:700; background:var(--lp-soft); color:var(--lp); padding:2px 9px; border-radius:999px; margin-top:2px; }

/* ── STOPKA v3 ── */
/* Bez kreski nad stopką: pasek CTA schodzi teraz do bieli, więc obwódka byłaby jedyną
   twardą linią na całej stronie (Oskar 8.09). */
footer { background:var(--surface); border-top:0; padding:0 24px 30px; position:relative; }
.footer-inner { max-width:1080px; margin:0 auto; padding-top:52px; }
.footer-grid { display:grid; grid-template-columns:1.35fr .9fr .9fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .footer-grid { grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:560px){ .footer-grid { grid-template-columns:1fr; } }
@media (max-width:560px){ .footer-grid { grid-template-columns:1fr; } }
.footer-brand img { height:26px; margin-bottom:14px; }
.footer-brand p { font-size:.88rem; color:var(--fg-secondary); max-width:270px; line-height:1.55; }
.footer-social { display:flex; gap:8px; margin-top:16px; }
.footer-social a { width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--fg-secondary); transition:.15s; }
.footer-social a:hover { color:#fff; background:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.footer-contact { margin-top:16px; display:flex; flex-direction:column; gap:7px; }
.footer-contact a { display:inline-flex; align-items:center; gap:9px; color:var(--fg); text-decoration:none; font-size:.9rem; font-weight:500; width:fit-content; }
.footer-contact a svg { color:var(--fg-muted); flex-shrink:0; transition:.15s; }
.footer-contact a:hover { color:var(--accent-fg); }
.footer-contact a:hover svg { color:var(--accent); }
.footer-col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:14px; }
.footer-col a { position:relative; display:block; color:var(--fg-secondary); text-decoration:none; font-size:.9rem; padding:4.5px 0 4.5px 0; transition:color .15s, padding .15s; }
.footer-col a:hover { color:var(--accent-fg); }
.footer-col a[aria-current="page"] { color:var(--accent-fg); font-weight:600; }
/* karta Panelu klienta — mini-produkt, nie link */
.footer-panel { background:linear-gradient(150deg,#0F172A,#1E293B); border-radius:var(--r-xl); padding:24px; color:#E2E8F0; box-shadow:var(--shadow-lg); }
.footer-panel .fp-head { display:flex; align-items:center; gap:10px; font-weight:700; color:#fff; font-size:1rem; margin-bottom:8px; }
.footer-panel .fp-head .fp-ico { width:34px; height:34px; border-radius:10px; background:rgba(249,115,22,.18); color:var(--accent-l,#FB923C); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.footer-panel p { font-size:.85rem; color:#B6C2D2; line-height:1.5; }
.footer-panel .fp-btn { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; background:var(--accent); color:#fff; text-decoration:none; font-weight:600; font-size:.92rem; padding:11px 16px; border-radius:var(--r); transition:.15s; box-shadow:0 4px 14px rgba(249,115,22,.3); }
.footer-panel .fp-btn:hover { background:var(--accent-light); transform:translateY(-1px); }
.footer-panel .fp-btn:active { background:var(--accent-hover); transform:none; }
.footer-panel small { display:block; margin-top:10px; font-size:.76rem; color:#8FA3B8; text-align:center; }
/* Pasek prawny — układ jak na stronach klientów (test.webup.pl): linki z kreskami po
   lewej, dane spółki po prawej, wszystko wyśrodkowane na wąskim ekranie. */
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; margin-top:44px; padding-top:22px; border-top:1px solid var(--border-soft);
  font-size:.83rem; color:var(--fg-muted); }
.fb-legal { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.fb-legal a { color:var(--fg-secondary); text-decoration:none; font-weight:500; }
.fb-legal a:hover { color:var(--accent-fg); text-decoration:underline; }
.fb-sep { color:var(--border-strong); user-select:none; }
.fb-co { color:var(--fg-muted); }
@media (max-width:760px){
  .footer-bottom { flex-direction:column; text-align:center; gap:12px; }
  .fb-legal { justify-content:center; }
}
/* Ikona zgód SmartCookie jest fixed w lewym dolnym rogu okna (40px + 10px margines).
   Poniżej ~1180px stopka nie ma już bocznego marginesu i ikona zasłaniałaby linki prawne.
   Do 18.10.2026 robiliśmy jej miejsce 86-pikselowym zapasem NA DOLE CAŁEJ STOPKI — ikona
   faktycznie lądowała na pustym, ale pod paskiem prawnym zostawał pas pustki wysoki na dwa
   wiersze tekstu i strona wyglądała, jakby się nie skończyła (Oskar: „czemu ta stopka jest
   taka wydłużona na końcu?"). Teraz ikona dostaje WŁASNY PAS Z BOKU: pasek prawny odsuwa się
   od lewej o jej szerokość z marginesem, a dół stopki wraca do normalnych 30px.
   Poniżej 760px pasek prawny jest wyśrodkowany w kolumnie, więc odsunięcie z lewej nic nie
   daje — tam zostaje zapas na dole, ale mniejszy: 56px to dokładnie ikona plus oddech. */
@media (max-width:1180px){
  footer { padding-bottom:30px; }
  .footer-bottom { padding-left:58px; }
}
@media (max-width:760px){
  footer { padding-bottom:56px; }
  .footer-bottom { padding-left:0; }
}

/* ── pasek CTA przyklejony do dołu (telefon) ──
   padding-left robi miejsce ikonie zgód SmartCookie, która siedzi w tym samym rogu */
.sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px 10px 62px; background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--border); box-shadow:0 -4px 18px rgba(15,23,42,.10);
  transform:translateY(115%); transition:transform .22s ease; }
.sticky-cta.show { transform:translateY(0); }
.sticky-cta .sk-info { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
/* Dwa wiersze i ani jednego więcej: kwota NIGDY się nie łamie, a dopisek pod nią urywa się
   wielokropkiem. Bez tego przy wąskim ekranie pasek rósł do czterech wierszy i ostatni
   wychodził poza dolną krawędź (5.10.2026). */
.sticky-cta .sk-info b { font-size:1rem; color:var(--fg); font-weight:800; white-space:nowrap; }
.sticky-cta .sk-info span { font-size:.74rem; color:var(--fg-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .sk-go { flex-shrink:0; white-space:nowrap; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; font-size:.94rem;
  padding:11px 20px; border-radius:var(--r); box-shadow:0 4px 14px rgba(249,115,22,.3); }
@media (max-width:400px){ .sticky-cta { padding-left:56px; } .sticky-cta .sk-go { padding:11px 16px; font-size:.9rem; } }
@media (max-width:760px){ .sticky-cta { display:flex; } }

/* ── case studies ── */
.cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; margin-top:34px; align-items:stretch; }
.cs-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--lp); border-radius:var(--r-xl); padding:22px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.cs-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--fg-muted); }
.cs-org { font-size:1.1rem; font-weight:800; color:var(--navy); margin-top:5px; letter-spacing:-.01em; }
.cs-nums { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 4px; }
.cs-nums b { display:block; font-size:1.55rem; font-weight:800; color:var(--lp); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cs-nums span { display:block; font-size:.75rem; color:var(--fg-muted); line-height:1.35; margin-top:2px; }
.cs-what { margin-top:12px; font-size:.87rem; color:var(--fg-secondary); line-height:1.55; flex:1; }
.cs-foot { margin-top:14px; padding-top:11px; border-top:1px solid var(--border-soft); font-size:.76rem; color:var(--fg-muted); }

/* cytat klienta */
.cs-quote { margin:26px 0 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:28px 32px; box-shadow:var(--shadow); position:relative; }
.cs-quote::before { content:"”"; position:absolute; top:2px; left:22px; font-size:4.2rem; line-height:1; color:var(--accent); opacity:.22; font-family:Georgia,serif; }
.cs-quote blockquote { font-size:1.02rem; line-height:1.65; color:var(--fg); margin:0 0 16px; position:relative; }
.cs-quote figcaption { display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--border-soft); padding-top:14px; }
.cs-quote figcaption b { font-size:.93rem; color:var(--fg); }
.cs-quote figcaption span { font-size:.82rem; color:var(--fg-muted); }

/* Taśma logotypów klientów — dwa pasy jadące w przeciwne strony, żeby w kadrze cały
   czas pojawiały się kolejne organizacje. Loga mają własne białe tło, więc kafle są białe. */
.logo-wall { margin-top:34px; }
.lw-head { text-align:center; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--fg-muted); margin-bottom:18px; }
.lw-marquee { overflow:hidden; padding:5px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
/* ⚠️ `animation-duration` NADPISUJE SKRYPT w `wu_logo_wall()` — liczy go z szerokości pasa,
   żeby wszystkie trzy jechały z tą samą prędkością (26 px/s) na każdej stronie i przy każdej
   szerokości ekranu. Wartości niżej są tylko punktem wyjścia, gdyby skrypt nie wystartował;
   NIE ustawiaj tu różnych czasów dla pasów, bo to właśnie dawało „czasem są wolne". */
.lw-track { display:flex; gap:12px; width:max-content; animation:lwScroll 78s linear infinite; }
.lw-track.rev { animation-direction:reverse; }
.lw-marquee:hover .lw-track { animation-play-state:paused; }
@keyframes lwScroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.lw-tile { flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:158px; height:68px; padding:8px 12px; background:#fff; border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .15s; }
/* Obwódka ZAWSZE pomarańczowa, nigdy z akcentu landingu (--lp): „Zaufali nam" to ten sam
   blok na każdej stronie, a na Ad Grants wychodził niebieski, na hostingu zielony (Oskar 7.09). */
.lw-tile:hover { border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px); }
.lw-tile img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.lw-note { text-align:center; margin-top:20px; font-size:.82rem; color:var(--fg-muted); }
.lw-note a { color:var(--accent-fg); }
@media (prefers-reduced-motion:reduce){ .lw-track { animation:none; } .lw-marquee { overflow-x:auto; } }

/* kursy Akademii */
.course-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:32px; }
.course { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.course .cg-ico { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--lp-soft); font-size:1.05rem; margin-bottom:11px; }
.course b { display:block; font-size:.95rem; color:var(--navy); margin-bottom:3px; }
.course span { font-size:.84rem; color:var(--fg-secondary); line-height:1.5; }

/* podtytuł w bloku dodatków */
.price-addons .pa-sub { font-size:.8rem; color:var(--fg-secondary); line-height:1.45; margin:-2px 0 9px; }

/* ── pasek zaufania (pod hero) — granatowy pas jak sekcje na jowes.webup.pl ── */
.trust-bar { background:linear-gradient(120deg,#1B3453 0%,var(--navy) 45%,#2C4A6E 100%); position:relative; }
.trust-bar::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(34rem 14rem at 88% 0%, rgba(249,115,22,.16), transparent 65%); }
.trust-inner { position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:30px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tb-item { position:relative; display:flex; flex-direction:column; gap:4px; text-align:center; }
.tb-item + .tb-item::before { content:""; position:absolute; left:-12px; top:4px; bottom:4px; width:1px;
  background:linear-gradient(#fff0, rgba(255,255,255,.22), #fff0); }
.tb-item b { font-size:1.45rem; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1.1; }
.tb-item span { font-size:.79rem; color:#A9BCD4; line-height:1.4; }
@media (max-width:760px){
  .trust-inner { grid-template-columns:1fr 1fr; gap:20px 14px; padding:24px 18px; }
  .tb-item:nth-child(odd) + .tb-item::before { left:-7px; }
  .tb-item:nth-child(3)::before { display:none; }
  .tb-item b { font-size:1.2rem; }
}

/* ── przełącznik miesięcznie / rocznie ── */
/* .bill-switch = wariant nad cennikiem: steruje obiema kartami i rozbiciem ceny naraz.
   KOLUMNA, nie rząd (Oskar 1.10.2026): przełącznik stał w jednej linii z dopiskiem
   „2 miesiące gratis", który był od niego dłuższy — przez to sam przełącznik uciekał
   w bok i ginął. Teraz przełącznik jest wyśrodkowany i duży, a dopisek stoi POD nim. */
.bill-switch { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px; }
.bill-switch .bill-toggle { margin-top:0; }
.bill-switch .bill-note { font-size:.86rem; color:var(--fg-secondary); text-align:center; max-width:40ch; }
.bill-switch + .pricing { margin-top:26px; }
/* BIAŁY PASEK NA TLE SEKCJI, nie szary placek (Oskar 6.10.2026: „niech to będzie na tym tle
   pod ofertą i białe z pomarańczowym, nie takie szarawe"). Wypełnienie `var(--bg)` było o ton
   ciemniejsze od białej sekcji cennika i czytało się jak osobny element doklejony nad kartami.
   Teraz pasek jest w kolorze karty, więc siedzi na tle sekcji, a jedynym kolorem jest
   pomarańcz: wybrany wariant wypełniony, niewybrany opisany. */
.bill-toggle { display:inline-flex; gap:3px; margin-top:12px; padding:4px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:999px; box-shadow:var(--shadow-sm); }
/* Niewybrany wariant POMARAŃCZOWYM PISMEM, nie szarym — szary wyglądał jak opcja wyłączona,
   a to jest druga połowa wyboru i ma zapraszać do kliknięcia. */
.bill-toggle .bt-opt { font-family:inherit; font-size:.92rem; font-weight:700; color:var(--accent-fg);
  background:none; border:none; padding:8px 24px; border-radius:999px; cursor:pointer; transition:.15s; }
.bill-toggle .bt-opt:hover { background:var(--accent-soft); }
/* Zaznaczony wariant na pomarańczowo, nie na bieli — przy białym tle sekcji cennika
   wypełnienie kolorem tła nie odróżniało się od reszty paska. */
.bill-toggle .bt-opt.on { background:var(--accent); color:#fff; box-shadow:var(--shadow); }
.bill-toggle .bt-opt.on:hover { background:var(--accent); color:#fff; }
/* Dopisku „2 miesiące gratis" przy przełączniku NIE MA (Oskar 1.10.2026 — najpierw miał być
   w przycisku, potem zdjęty w ogóle). Przełącznik ma mówić tylko, co wybierasz; o tym, ile
   zyskujesz na roku, mówią kwoty obok siebie. Reguła zostaje dla ewentualnego dopisku,
   ale żadne wywołanie `landing_bill_toggle()` go dziś nie podaje. */
.bill-toggle .bt-opt i { display:block; font-style:normal; font-size:.72rem; font-weight:600;
  letter-spacing:.01em; opacity:.85; margin-top:1px; }
@media (max-width:560px){
  .bill-toggle .bt-opt { font-size:.92rem; padding:10px 20px; }
}
/* ISKRA ASYSTENTA PRZY NAZWIE KARTY — ten sam znak, co `pg-ico-asst` na ping.ngo (Oskar
   24.10.2026: „przy ping + assistant daj gwiazdkę"). Wartości przepisane z `ping-land.css`,
   żeby znak siedział w wierszu tak samo w obu serwisach: `vertical-align:-2px` wsadza go
   w linię pisma, a nie na nią, odstęp 6 px, kolor akcentu. */
.price-name .price-asst { flex:0 0 auto; vertical-align:-2px; margin-right:6px; color:var(--accent); }
/* PRZEŁĄCZNIKA OKRESU W ŚRODKU KARTY JUŻ NIE MA (Oskar 24.10.2026: „monthly yearly dany jednak
   nad wszystkim"). Stał tu wariant zmniejszony — `.price-card .bill-switch`, `.price-card
   .bill-toggle`, `.bt-opt` o stopień mniejszy — dla jedynego cennika, w którym okres wybierało
   się w JEDNEJ kolumnie (webup.us/google-ad-grants, bo kurs obok ma cenę jednorazową; Oskar
   19.10.2026: „przełącznikiem monthly/yearly tylko na tej kolumnie", potem 20.10 „na górze
   całości albo na górze ping+assistant"). Dziś ten cennik ma przełącznik nad siatką, czyli
   wszystkie wywołania w serwisie wyglądają tak samo — a reguła bez wywołania opisywałaby
   układ, który został odrzucony. Wraca razem z przełącznikiem, jeśli kiedyś wróci do karty. */
/* KARTA PAKIETU W POPUPIE ZAMÓWIENIA — ten sam język co karta w cenniku (Oskar 18.10.2026:
   „fatalnie wygląda ten formularz zamówienia (…) może zrób tak jak w cenniku bardziej").
   Nad formularzem stała do tej pory szara linijka „PING — 500 zł/ rok": dokładnie to, co
   klient przed chwilą kliknął w cenniku, tyle że drobnym drukiem i bez żadnej hierarchii.
   Teraz jest karta — nazwa, duża kwota, pod nią przełącznik okresu.
   Kwota JEST podglądem zmiany: przy przełączeniu miesięcznie/rocznie zmienia się właśnie
   ona, więc przy samych opcjach nie ma już powtórzonych kwot drobnym drukiem. */
.lm-karta { margin:2px 0 18px; padding:16px 18px; text-align:center;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--r-xl); }
.lm-nazwa { font-size:1.02rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; }
.lm-cena { margin-top:6px; display:flex; align-items:baseline; justify-content:center; gap:6px; flex-wrap:wrap; }
.lm-cena b { font-size:1.95rem; font-weight:800; color:var(--fg); letter-spacing:-.03em; line-height:1.1; }
.lm-cena span { font-size:.9rem; color:var(--fg-muted); }
.lm-nota { margin-top:4px; font-size:.85rem; color:var(--fg-secondary); }
/* PRZEŁĄCZNIK OKRESU W POPUPIE ZAMÓWIENIA (`#lmOkres`, od 18.10.2026). Ten sam pasek co nad
   cennikiem, tylko mniejszy i wyśrodkowany pod kwotą — w popupie nie ma kart obok siebie,
   więc nie ma też czego wyrównywać do lewej. Pokazuje się wyłącznie wtedy, gdy klient
   nie wybrał okresu wcześniej; `hidden` zdejmuje go z układu bez dodatkowej reguły. */
.lm-okres { display:flex; justify-content:center; margin:12px 0 0; }
/* ⚠️ BEZ TEJ LINII ATRYBUT `hidden` NIE DZIAŁA. `display:none` z arkusza przeglądarki
   przegrywa z KAŻDĄ regułą autora, więc `display:flex` wyżej pokazywało przełącznik także
   tam, gdzie JS go chował — czyli w popupie otwartym z karty cennika, gdzie okres jest już
   wybrany. Wpadka z 18.10.2026: test sprawdzał ATRYBUT (`el.hidden`), a nie to, czy element
   widać, więc przeszedł. Mierz `display`, nie atrybut. */
.lm-okres[hidden] { display:none; }
.lm-okres .bill-toggle { margin-top:0; }
.lm-okres .bt-opt { font-size:.86rem; padding:7px 20px; }

/* ── kalkulator oszczędności ── */
.save-calc { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-sm); }
.save-calc .sv-q { font-weight:700; color:var(--fg); font-size:.95rem; margin-bottom:14px; }

.save-calc .sv-now { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px; font-size:.82rem; color:var(--fg-muted); }
.save-calc .sv-now b { font-size:1rem; color:var(--fg); font-variant-numeric:tabular-nums; }
.save-calc .sv-res { margin-top:14px; padding-top:13px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column; gap:3px; }
.save-calc .sv-win { font-size:1.05rem; font-weight:700; color:var(--green); }
.save-calc .sv-win b { font-size:1.2rem; }
.save-calc .sv-sub { font-size:.85rem; color:var(--fg-secondary); }
.save-calc .sv-neutral { font-size:.9rem; color:var(--fg-secondary); }
.save-calc .sv-neutral b { color:var(--fg); }
.save-calc .sv-note { margin-top:11px; font-size:.78rem; color:var(--fg-muted); line-height:1.5; }
.save-calc .sv-second { margin-top:18px; padding-top:16px; border-top:1px solid var(--border-soft); }

/* ── social.webup.pl: profile, które prowadzimy (żywe liczby z Graph API) ── */
.sp-sum { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:26px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:18px 22px; box-shadow:var(--shadow-sm); }
.sp-stat { text-align:center; }
.sp-stat b { display:block; font-size:1.7rem; font-weight:800; color:var(--navy); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.sp-stat span { font-size:.82rem; color:var(--fg-muted); }
.sp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:16px; }
.sp-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:16px 18px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:.15s; }
.sp-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-2px); }
.sp-head { display:flex; align-items:center; gap:11px; padding-bottom:11px; margin-bottom:9px; border-bottom:1px solid var(--border-soft); }
.sp-head img { border-radius:50%; flex-shrink:0; }
.sp-head b { display:block; font-size:.98rem; font-weight:700; color:var(--navy); line-height:1.25; }
.sp-head span { font-size:.8rem; color:var(--fg-muted); }
.sp-row { display:flex; align-items:baseline; gap:8px; padding:3px 0; font-size:.9rem; }
.sp-row b { font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; }
.sp-row i { font-style:normal; color:var(--fg-muted); font-size:.83rem; }
.sp-ic { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:5px;
  font-size:.68rem; font-weight:800; color:#fff; flex-shrink:0; }
.sp-ic.fb { background:#1877F2; }
.sp-ic.ig { background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); font-size:.58rem; }
.sp-foot { margin-top:9px; padding-top:9px; border-top:1px solid var(--border-soft); font-size:.83rem; color:var(--fg-secondary); }
.sp-foot b { color:var(--fg); font-weight:700; }
.sp-when { display:block; margin-top:2px; font-size:.78rem; color:var(--green); font-weight:600; }
.sp-note { margin-top:14px; font-size:.78rem; color:var(--fg-muted); }

/* ── social.webup.pl: makieta planu publikacji (ekran powitalny) ── */
.mock-cal { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:16px 18px; box-shadow:var(--shadow); }
.mc-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding-bottom:11px; border-bottom:1px solid var(--border-soft); }
.mc-head b { font-size:.95rem; color:var(--navy); }
.mc-legend { font-size:.72rem; color:var(--fg-muted); display:flex; align-items:center; gap:4px; }
.mc-legend i { width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:6px; }
.mc-legend i.fb, .mc-d em.fb { background:#1877F2; }
.mc-legend i.ig, .mc-d em.ig { background:#EE2A7B; }
.mc-legend i.li, .mc-d em.li { background:#0A66C2; }
.mc-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:11px; }
.mc-dow { text-align:center; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); padding-bottom:2px; }
.mc-d { aspect-ratio:1; border:1px solid var(--border-soft); border-radius:7px; padding:3px 0 0; display:flex;
  flex-direction:column; align-items:center; justify-content:flex-start; gap:3px; background:var(--surface); }
.mc-d.off { background:var(--bg); }
.mc-d i { font-style:normal; font-size:.68rem; color:var(--fg-muted); font-variant-numeric:tabular-nums; }
.mc-d em { width:6px; height:6px; border-radius:50%; display:block; }
.mc-foot { margin-top:12px; }
.mc-post { display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--r); padding:9px 11px; }
.mc-av { width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-size:.7rem; font-weight:800;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mc-post b { display:block; font-size:.83rem; color:var(--fg); }
.mc-post span { font-size:.76rem; color:var(--fg-muted); }
.mc-ok { margin-left:auto; font-size:.72rem; font-weight:700; color:var(--green); white-space:nowrap; }

/* pole na całą szerokość w formularzu zapytania (opis celu) */
.audit-form .aud-full { display:block; margin-top:14px; }
.audit-form .aud-full textarea { width:100%; font-family:inherit; font-size:.95rem; resize:vertical; }

/* ── social: galeria realnych postów z prowadzonych profili ── */
.pf-bar { margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:11px 22px; font-size:.9rem; color:var(--fg-secondary); text-align:center; box-shadow:var(--shadow-sm); }
.pf-bar b { color:var(--navy); font-weight:800; font-variant-numeric:tabular-nums; }
.pf { margin-top:22px; }
.pf-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.pf-head h3 { font-size:1.15rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:2px 0 0; }
.pf-role { font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); }
.pf-head .pf-role { display:block; }
.pf-head > div:first-child > span:last-child { display:block; font-size:.85rem; color:var(--fg-muted); }
.pf-link { font-size:.85rem; font-weight:600; color:var(--accent-fg); text-decoration:none; white-space:nowrap; }
.pf-link:hover { text-decoration:underline; }
.pf-meta { margin-top:6px; font-size:.83rem; color:var(--fg-muted); }
.pf-meta b { color:var(--fg-secondary); font-weight:700; font-variant-numeric:tabular-nums; }
/* Układ kolumnowy (masonry), a NIE siatka o równych wierszach: posty pokazujemy
   w proporcjach, w jakich wyszły — kwadrat, pion 4:5, rolka 9:16 — więc kafle mają
   różne wysokości i muszą się upakować, zamiast zostawiać dziury pod krótszymi. */
.pt-grid { columns:5; column-gap:13px; margin-top:12px; }
.pt-grid > .pt { break-inside:avoid; margin-bottom:13px; }
@media (max-width:1100px){ .pt-grid { columns:3; } .pt-grid > .pt:nth-child(n+4) { display:none; } }
@media (max-width:640px){ .pt-grid { columns:2; } .pt-grid > .pt:nth-child(n+3) { display:none; } }
.pt { display:block; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; position:relative;
  box-shadow:var(--shadow-sm); transition:.15s; }
.pt:hover { border-color:var(--border-strong); box-shadow:var(--shadow); transform:translateY(-2px); }
.pt-img { display:block; background:var(--bg); overflow:hidden; }   /* aspect-ratio ustawiane per post */
.pt-img img { width:100%; height:100%; object-fit:cover; display:block; }
.pt-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:baseline; }
.pt-dot.fb { background:#1877F2; }
.pt-dot.ig { background:#EE2A7B; }
.pt-dot.reel { background:var(--navy); }
.pt-body { display:flex; flex-direction:column; gap:5px; padding:10px 12px 11px; }
.pt-txt { font-size:.82rem; line-height:1.4; color:var(--fg-secondary); }
.pt-when { font-size:.74rem; color:var(--fg-muted); }

/* ── social: rozpisane realizacje ── */
/* KOMPAKTOWO (Oskar 22.10.2026: „zrób te projekty jakoś bardziej może kompaktowo").
   Siedem kart jedna pod drugą to był ekran przewijania — ciaśniejsze odstępy, mniejszy nagłówek
   i węższe wnętrze skracają sekcję o mniej więcej trzecią, bez ruszania treści. */
.pj { margin-top:12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:14px 18px; box-shadow:var(--shadow-sm); }
/* Znak organizacji w nagłówku projektu — obok nazwy, nie zamiast niej. Stała wysokość
   i `width:auto`, żeby znaki o różnych proporcjach stały w jednej linii bazowej. */
.pj-logo { height:28px; width:auto; max-width:140px; object-fit:contain; display:block;
  margin-top:5px; mix-blend-mode:multiply; }
/* ZNAK KWADRATOWY DOSTAJE WIĘCEJ WYSOKOŚCI NIŻ WORDMARK. Przy jednej wysokości kwadrat
   (Warmia i Mazury) wygląda obok znaku poziomego (Fundacja Gdańska) na dwa razy mniejszy,
   bo oko porównuje POLE, nie wysokość. Ta sama poprawka, co w kartach opinii. */
.pj-logo.pj-znak { height:38px; }
/* Dwa znaki w jednym rzędzie — gdy karta opisuje instytucję i jej program (Fundacja Gdańska
   i Studium Obywatelskie). `.pj-logo` jest blokiem, więc bez tego stanęłyby jeden pod drugim. */
.pj-logos { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin-top:5px; }
.pj-logos .pj-logo { margin-top:0; }
/* PRZYKŁADOWE PUBLIKACJE — rozwijane `<details>` pod listą projektów (Oskar 22.10.2026).
   Strzałka z `::before`, bo domyślny trójkąt przeglądarki wygląda inaczej w każdej z nich. */
.pj-publikacje { margin-top:13px; border-top:1px solid var(--border); padding-top:11px; }
.pj-publikacje > summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center;
  gap:8px; font-size:.88rem; font-weight:700; color:var(--accent-fg); }
.pj-publikacje > summary::-webkit-details-marker { display:none; }
/* ⚠️ STRZAŁKA JEST RYSUNKIEM, NIE ZNAKIEM „›" (Oskar 23.10.2026: „strzałkę wyśrodkuj
   na wysokość tekstu"). Powód jest konkretny: atrament glifu `›` leży w swoim polu WYŻEJ
   niż środek, a o ile wyżej — zależy od kroju. Przy `font-size:1.25rem` obok napisu 0.88rem
   dawało to widoczne przesunięcie w górę, którego `align-items:center` nie naprawia, bo ono
   wyśrodkowuje POLE, a nie literę. Korekta `translateY` dobrana pod Intera byłaby przy tym
   pułapką: gdy Inter się nie wczyta (a wczytuje się z Google Fonts), krój zastępczy ma inne
   metryki i strzałka ucieka w drugą stronę.
   Rysunek w masce nie ma tego problemu — chevron jest wyśrodkowany w `viewBox` z definicji
   (pionowo 5.5–18.5, poziomo 9–15, środek 12/12), a `currentColor` zostawia kolor akcentu
   i obrót po rozwinięciu. Nie zamieniaj tego z powrotem na `content:"›"`. */
.pj-publikacje > summary::before { content:""; flex:0 0 auto; width:12px; height:12px;
  background:currentColor; transition:transform .18s ease;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5L15 12l-6 6.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5L15 12l-6 6.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:12px 12px; mask-size:12px 12px; }
.pj-publikacje[open] > summary::before { transform:rotate(90deg); }
/* Podkreślenie TYLKO na napisie — `summary:hover` brało ze sobą `::before`, czyli strzałkę. */
.pj-publikacje > summary:hover > span { text-decoration:underline; }
.pj-pub-body { margin-top:6px; }
@media (prefers-reduced-motion:reduce){ .pj-publikacje > summary::before { transition:none; } }

/* NAGŁÓWEK KARTY: ZNAK → NAZWA → OPIS (Oskar 23.10.2026: „Dajmy Logo, pod spodem nazwa
   i pod spodem opis"). Pigułki `.pj-chips` zdjęte razem z regułami — „za dużo tu się dzieje".
   `.pj-role` (rola w prawym górnym rogu) też zdjęta, tego samego dnia, drugim poleceniem:
   „usuń to w prawym górnym rogu, typu: prowadzenie profili i kampanie zasięgowe" — mówi
   to samo, co punkty pod spodem, a zabierała górną krawędź karty. */
.pj-head { padding-bottom:10px; border-bottom:1px solid var(--border-soft); }
.pj-ident { min-width:0; }
/* Znak stoi NAD nazwą, więc odstęp idzie pod niego, nie nad niego. */
.pj-ident > .pj-logo, .pj-ident > .pj-logos { margin-top:0; margin-bottom:7px; }
.pj-head h3 { font-size:1.06rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; margin:0 0 2px; }
.pj-when { display:block; font-size:.81rem; color:var(--fg-muted); }
/* OPINIA PRZEZ CAŁĄ WYSOKOŚĆ KARTY (Oskar 23.10.2026: „zrób opinię od samej góry do samego
   dołu po prawej. Żeby całość była trochę bardziej kompaktowa"). Cytat nie jest już trzecim
   elementem w `pj-body`, tylko DRUGĄ KOLUMNĄ CAŁEJ KARTY — dzięki temu nagłówek, punkty
   i rozwijane publikacje mieszczą się w lewej kolumnie, a karta jest o tyle niższa. */
.pj-opinia { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px; align-items:stretch; }
.pj-opinia > .pj-glowna { min-width:0; display:flex; flex-direction:column; gap:10px; }
@media (max-width:760px){
  .pj-opinia { grid-template-columns:1fr; gap:14px; }
}
/* Jedna kolumna — zostaje dla kart BEZ podpisanej referencji (Fundacja Gdańska, Targi).
   Karty z cytatem używają `pj-opinia` i mają go jako drugą kolumnę całej karty, więc wariant
   `with-quote` zniknął razem z 23.10.2026. */
.pj-body { display:grid; grid-template-columns:1fr; gap:16px; margin-top:10px; align-items:start; }
.pj-list { list-style:none; display:flex; flex-direction:column; gap:4px; }
.pj-list li { position:relative; padding-left:21px; font-size:.88rem; line-height:1.45; color:var(--fg-secondary); }
.pj-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.pj-list strong { color:var(--fg); }
/* ── OPINIA W KARCIE PROJEKTU — CICHY SZARY PANEL (Oskar 23.10.2026, cztery podejścia) ──
   1. Szare pudełko z GRUBYM pomarańczowym paskiem po lewej i tekstem kursywą — „zrób inny
      design tej opinii".
   2. Karta w ciepłym odcieniu marki — „to tło mi się nie podoba jak jest".
   3. Biała karta w pomarańczowej ramce (jak wyróżniona kostka cennika) — „te ramki usuń,
      zrób jakieś delikatniejsze, może szare".
   4. Jest: panel w kolorze tła strony z ledwo widocznym obrysem. Żadnego akcentu — cytat ma
      stać obok treści, a nie krzyczeć. UKŁAD (opinia jako druga kolumna, przez całą wysokość
      karty) zostaje: „układ moim zdaniem zdecydowanie lepszy niż wcześniej".
   Tekst prosty, bo kursywa przy dłuższym cytacie czyta się wolniej. Podpis odcięty linią
   i rozbity na dwie linie: nazwisko granatem, funkcja i data szaro.
   `justify-content:center` trzyma krótki cytat (EuroSkills — dwa zdania) na środku wysokiej
   kolumny, zamiast zostawiać pod nim pół panelu pustki. */
.pj-quote { display:flex; flex-direction:column; justify-content:center;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--r-lg);
  padding:16px 18px; font-size:.88rem; line-height:1.55; color:var(--fg); font-style:normal; }
.pj-quote cite { display:block; margin-top:12px; padding-top:10px; border-top:1px solid var(--border);
  font-style:normal; font-size:.76rem; color:var(--fg-muted); line-height:1.4; }
.pj-quote cite b { display:block; font-size:.82rem; font-weight:800; color:var(--navy); margin-bottom:1px; }
/* Rozwijane publikacje idą pod OBIE kolumny — przy `with-quote` byłyby trzecim polem siatki
   i wpadłyby pod samą listę, obok cytatu. */
.pj-body > .pj-publikacje { grid-column:1 / -1; }
/* To samo na karcie z opinią: `<details>` jest TRZECIM polem siatki `.pj-opinia`, pod lewą
   kolumną i pod cytatem (Oskar 23.10.2026). Gdyby siedział w `.pj-glowna`, rozwinięcie
   publikacji podnosiłoby panel opinii, bo kolumny są rozciągane na wysokość karty. */
.pj-opinia > .pj-publikacje { grid-column:1 / -1; }
.pj-clients { margin-top:22px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:16px 22px; font-size:.88rem; line-height:1.7; color:var(--fg-secondary); box-shadow:var(--shadow-sm); }
.pj-clients b { display:block; color:var(--navy); font-size:.76rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:4px; }
@media (max-width:760px){ .pj-body, .pj-body.with-quote { grid-template-columns:1fr; gap:14px; } .pj { padding:16px 18px; } }

/* ── social: kalkulator wyceny zapytania ── */
.qc { margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:22px 24px; box-shadow:var(--shadow); }
.qc-q { padding:13px 0; border-bottom:1px solid var(--border-soft); }
.qc-q:first-child { padding-top:0; }
.qc-q:last-of-type { border-bottom:none; }
.qc-q > b { display:block; font-size:.95rem; color:var(--navy); font-weight:700; margin-bottom:9px; }
.qc-q > i { display:block; margin-top:7px; font-style:normal; font-size:.79rem; color:var(--fg-muted); line-height:1.45; }
.qc-opts { display:flex; flex-wrap:wrap; gap:8px; }
.qc-chip { display:inline-flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--border-strong);
  border-radius:999px; padding:7px 14px; font-size:.88rem; color:var(--fg-secondary); cursor:pointer; transition:.15s; }
.qc-chip.wide { border-radius:var(--r); width:100%; }
.qc-chip:hover { border-color:var(--accent); }
/* Własny kwadracik zamiast systemowego: `accent-color` maluje tło, ale ptaszka rysuje
   przeglądarka i wychodził ciemny na pomarańczowym — nie dało się na to patrzeć
   (Oskar 7.09). Teraz ptaszek jest nasz i zawsze biały. */
.qc-chip input { position:absolute; opacity:0; width:0; height:0; }
.qc-chip::before { content:"✓"; flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  border:1.5px solid var(--border-strong); background:var(--surface); color:transparent;
  font-size:.72rem; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.qc-chip:has(input:checked)::before { background:var(--accent); border-color:var(--accent); color:#fff; }
.qc-chip:has(input:focus-visible)::before { box-shadow:0 0 0 3px rgba(255,111,0,.3); }
.qc-chip:has(input:checked) { background:var(--surface); border-color:var(--accent); color:var(--fg); font-weight:600; }
.qc-chip i { font-style:normal; color:var(--fg-muted); font-weight:400; }
.qc-slide { display:flex; align-items:center; gap:14px; }
.qc-slide input[type=range] { flex:1; }
/* ── OŚ SUWAKA Z BIAŁYMI KROPKAMI NA POZYCJACH (Oskar 22.10.2026: „ile wysyłek miesięcznie
   newsletter — zrób jakoś sensowniej ten suwak, niech będzie zaznaczone, i kampanie reklamowe
   też; niech będą zaznaczone te 1/2/3/4 może takimi białymi kropkami na tej osi") ───────────
   Sam suwak nie mówił, ILE ma pozycji — przy pięciu krokach wyglądał jak płynna skala
   i nie było wiadomo, że da się wybrać dokładnie 1, 2, 3 albo 4.
   Budowa: belkę rysuje `::before` osi, kropki leżą nad nią, a wejście zakresu jedzie na wierzchu
   z PRZEZROCZYSTYM torem — inaczej jego własne tło zasłoniłoby kropki. Boczny odstęp 8 px to
   połowa uchwytu, dzięki temu skrajne kropki stoją dokładnie pod jego środkiem. */
.qc-os { position:relative; flex:1; display:flex; align-items:center; min-height:18px; }
.qc-os::before { content:""; position:absolute; left:0; right:0; height:6px; border-radius:9999px;
  background:var(--border); }
.qc-kropki { position:absolute; left:8px; right:8px; display:flex; align-items:center;
  justify-content:space-between; pointer-events:none; }
.qc-kropki i { width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.12); }
.qc-os input[type=range] { position:relative; z-index:1; background:transparent; }
.qc-slide output { min-width:110px; text-align:right; font-weight:700; color:var(--navy);
  font-variant-numeric:tabular-nums; font-size:.92rem; }
.qc-out { margin-top:16px; background:var(--surface); box-shadow:var(--shadow-sm); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; }
.qc-pick { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); }
.qc-lines { margin-top:9px; }
.qc-line { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0;
  font-size:.89rem; color:var(--fg-secondary); }
.qc-line b { color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* RAZEM: NETTO SZARO, BRUTTO NA POMARAŃCZOWO (Oskar 22.10.2026). Netto zostaje, bo w netto
   stoi cały cennik, ale uwagę ma brać kwota, którą organizacja realnie zapłaci. */
.qc-total { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:9px;
  padding-top:11px; border-top:2px solid var(--border); }
.qc-total span { font-weight:700; color:var(--navy); margin-right:auto; }
.qc-total b { font-size:1.12rem; font-weight:700; color:var(--fg-muted);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.qc-total u { text-decoration:none; font-size:1.5rem; font-weight:800; color:var(--accent-fg);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.qc-total i { font-style:normal; font-size:.78rem; color:var(--fg-muted); }
/* ⚠️ STOPKA PODSUMOWANIA (budżet + podpowiedź) ODCIĘTA OD KWOTY (Oskar 22.10.2026:
   „daj to razem, podsumowanie itd. jakoś sensowniej na dole"). Wcześniej wszystko leciało
   jednym ciągiem pod sumą i nie było widać, gdzie kończy się NASZA faktura, a zaczyna koszt
   płacony platformom. Teraz kwota zamyka białą kartę, a to, co płacicie komu innemu, siedzi
   w szarym pasie pod nią. */
.qc-stopka { margin:14px -18px -18px; padding:12px 18px; background:var(--bg);
  border-top:1px solid var(--border); border-radius:0 0 var(--r-lg) var(--r-lg); }
.qc-stopka > div + div { margin-top:8px; }
.qc-budget { font-size:.83rem; color:var(--fg-muted); }
.qc-budget b { color:var(--fg-secondary); }
/* `.qc-hint` zdjęte 22.10.2026 razem z czterema podpowiedziami, które doradzały zmianę zakresu
   („w Rozszerzonym 2 rolki są w cenie…"). Pod kwotą zostaje wyłącznie budżet reklamowy. */
.audit-form input[readonly] { background:var(--bg); color:var(--fg-secondary); cursor:default; }
/* Przycisk odsłaniający formularz zapytania pod kalkulatorem (Oskar 23.10.2026: „żeby było
   bardziej kompaktowo"). Jedna linia zamiast pięciu pól; pola wchodzą po kliknięciu. */
.qc-otworz { margin-top:20px; text-align:center; }
.qc-otworz i { display:block; margin-top:10px; font-style:normal; font-size:.82rem; color:var(--fg-muted); }
@media (max-width:640px){
  .qc { padding:18px; }
  .qc-otworz .btn-primary { width:100%; justify-content:center; }
  .qc-slide { flex-direction:column; align-items:stretch; gap:6px; }
  .qc-slide output { text-align:left; }
  .qc-total b { font-size:1.3rem; }
}

/* ── suwaki: ten sam wygląd co w panelu (.zad-range na zakładce Zadania) ──
   Domyślny suwak przeglądarki wygląda inaczej w każdej z nich; tu mamy jeden
   kształt na wszystkich landingach i zgodny z tym, co zespół widzi w panelu. */
.landing-range,
.save-calc input[type=range],
.qc-slide input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:9999px;
  background:var(--border); outline:none; cursor:pointer; accent-color:auto;
}
.landing-range:focus, .save-calc input[type=range]:focus, .qc-slide input[type=range]:focus { outline:none; }
.landing-range:focus-visible, .save-calc input[type=range]:focus-visible, .qc-slide input[type=range]:focus-visible {
  box-shadow:0 0 0 3px rgba(249,115,22,.25);
}
.landing-range::-webkit-slider-thumb,
.save-calc input[type=range]::-webkit-slider-thumb,
.qc-slide input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
}
.landing-range::-moz-range-thumb,
.save-calc input[type=range]::-moz-range-thumb,
.qc-slide input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer;
}
.landing-range::-moz-range-track,
.save-calc input[type=range]::-moz-range-track,
.qc-slide input[type=range]::-moz-range-track { height:6px; border-radius:9999px; background:transparent; }

/* ── social: ekran powitalny z prawdziwymi postami (dwie kolumny w przeciwnych kierunkach) ── */
.hero-posts { display:grid; grid-template-columns:1fr 1fr; gap:12px; height:460px; overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.hp-col { display:flex; flex-direction:column; gap:12px; will-change:transform; }
.hp-col.up   { animation:hpUp 42s linear infinite; }
.hp-col.down { animation:hpUp 38s linear infinite reverse; }
.hero-posts:hover .hp-col { animation-play-state:paused; }
@keyframes hpUp { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.hp-i { display:block; border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm); flex:none; }
.hp-i img { width:100%; height:100%; object-fit:cover; display:block; }
@media (prefers-reduced-motion:reduce){ .hp-col { animation:none; } }
@media (max-width:900px){ .hero-posts { height:340px; } }

/* ── ptaszki na listach: białe na pomarańczowym kółku ──
   Zielony/ciemny znaczek na jasnym tle ginął. Jedna reguła na wszystkie listy
   (cennik, realizacje), żeby nie rozjeżdżały się między landingami. */
.price-feats li::before,
.pj-list li::before {
  content:"✓"; position:absolute; left:0; top:.28em;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:.62rem; font-weight:800; line-height:16px; text-align:center;
}
/* `.dim` = pozycja dalszego planu, NIE dodatkowo płatna. Stało tu kółko z plusem, ale po
   przejściu na cennik v3 wszystko na tych kartach jest w cenie (budowa strony, hosting,
   domeny, Workspace), więc plus mówił klientowi coś nieprawdziwego — i, jak zauważył Oskar
   1.10.2026, po prostu brzydko wyglądał. Teraz ten sam ptaszek, tylko jaśniejszy. */
.price-feats li.dim::before { opacity:.5; }
.price-feats li, .pj-list li { padding-left:25px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG (webup.pl/blog) — lista, kategorie, wpis.
   Świadomie na tych samych zmiennych co landingi: blog ma być częścią serwisu,
   a nie osobną wyspą wizualną (po to wychodzimy z Wixa).
   ═══════════════════════════════════════════════════════════════════════════ */
.bl-hero { padding:46px 0 10px; text-align:center; }
.bl-hero h1 { font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.15; letter-spacing:-.02em;
  color:var(--navy); margin:6px 0 12px; }
.bl-cats { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; }
.bl-chip { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); font-size:.83rem; font-weight:600;
  color:var(--fg-secondary); text-decoration:none; transition:.15s; }
.bl-chip:hover { border-color:var(--border-strong); color:var(--fg); }
.bl-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }

/* Nagłówek listy bloga = ekran powitalny serwisu (smugi, nadtytuł, duży h1). Minimalistyczny
   pasek z samym słowem „Blog" żył tu dwa dni i wypadł 18.10.2026 (Oskar: „z blogiem wróćmy
   jednak do poprzedniego wyglądu, głównie chodzi mi o hero"). Hero rysuje `.wu-hero`
   z `wu-hero-auto` — własnych reguł nie potrzebuje żadnych.
   Sama lista startuje wyżej niż zwykła sekcja: domyślne 72 px zostawiało pod lidem pas
   pustki, przez który pierwszy artykuł spadał poniżej ekranu. */
.wu-sec.bl-lista { padding-top:34px; }

/* ── LISTA BLOGA — wiersze zamiast kafli ─────────────────────────────────────────
   Wiersze zamiast kafli. Przy 42 wpisach BEZ ANI JEDNEGO ZDJĘCIA siatka równych
   prostokątów nie ma czym budować hierarchii — wszystko waży tyle samo, a zajawki
   urwane w połowie słowa robią z dołu kafla strzępy. Wiersz daje jedną kolumnę
   tytułów do przebiegnięcia wzrokiem, datę i temat w jednej linijce nad tytułem,
   a zajawkę docina `line-clamp`, nie wielokropek z migracji. */
.bl-layout { display:grid; grid-template-columns:minmax(0,1fr) 258px; gap:40px;
  align-items:start; margin-top:30px; text-align:left; }

/* Artykuł prowadzący: ten sam materiał co w wierszu, tylko głośniej. */
.bl-feat { display:block; padding:26px 28px 22px; border:1px solid var(--border);
  border-radius:var(--r-xl); background:var(--surface); text-decoration:none;
  box-shadow:var(--shadow-sm); transition:border-color .16s, box-shadow .16s; }
.bl-feat:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); }
.bll-cat { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-fg); margin-bottom:10px; }
.bl-feat h2 { font-size:clamp(1.25rem,2.2vw,1.72rem); line-height:1.22; letter-spacing:-.015em;
  color:var(--navy); margin:0 0 10px; }
.bl-feat p { font-size:1rem; line-height:1.65; color:var(--fg-secondary); margin:0 0 18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bll-meta { display:flex; align-items:center; gap:10px; }
.bll-au { display:flex; flex-direction:column; line-height:1.3; }
.bll-au b { font-size:.86rem; color:var(--navy); }
.bll-au span { font-size:.79rem; color:var(--fg-muted); }
.bll-go { margin-left:auto; font-size:.88rem; font-weight:700; color:var(--accent-fg); }

/* Wiersze. Kreska rozdziela, zamiast zamykać każdy wpis w osobnej ramce. */
.bl-rows { margin-top:8px; }
.bl-row { display:block; padding:20px 2px 18px; border-bottom:1px solid var(--border-soft);
  text-decoration:none; transition:.14s; }
.bl-row:first-child { border-top:1px solid var(--border-soft); }
.bl-row:hover h3 { color:var(--accent-fg); }
.blr-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.76rem;
  color:var(--fg-muted); font-variant-numeric:tabular-nums; }
/* Temat SZEPTEM, nie krzykiem (Oskar 16.10.2026: „kategorie za bardzo dominują w tym
   spisie artykułów"). Wersaliki w pomarańczowym przy każdym z czterdziestu wierszy
   przykrywały tytuły — a to tytuł ma być tym, po czym się wybiera. Zostaje szara
   linijka: data · temat · czas czytania. */
.blr-cat { font-weight:500; letter-spacing:0; text-transform:none; color:var(--fg-muted); }
.blr-cat::before, .blr-min::before { content:"·"; margin-right:10px; color:var(--border-strong); }

/* ── ZNAK WPISU JAKO KAFEL PO LEWEJ (Oskar 23.10.2026) ───────────────────────────────
   „Daj większą, żeby jakoś to fajnie oddzielić… po lewej przed tytułem i opisem, z ramką
   jak na stronie głównej. A przy samej dacie może być kategoria tylko tekstem."
   Pierwsze podejście tego samego dnia wkładało mały znak (16 px) do szarej linijki
   z datą — i to było ZA MAŁO, żeby rozdzielić czterdzieści wierszy od siebie.
   Ramkę daje klasa `wu-ico` wzięta wprost z kafli na stronie głównej; tutaj dochodzi
   tylko zachowanie w siatce wiersza. Kategoria w linijce z datą zostaje samym tekstem. */
.blr-znak { flex:0 0 auto; }
/* Najechanie = pomarańczowa obwódka, ten sam jeden język co na kaflach usług. Bez zmiany
   tła i koloru znaku: te rysunki są pełnokolorowe, a nie na obrysie, więc `color` i tak
   by na nie nie zadziałał, a przefarbowanie tła odebrałoby im kontrast (Oskar 18.10.2026). */
.bl-row:hover .blr-znak, .bl-feat:hover .blr-znak { border-color:var(--accent); }
/* DWA PIĘTRA, nie dwie kolumny przez całą wysokość (Oskar 23.10.2026: „daj nad tym datę,
   kategorię i czas, potem niżej: ikona, a po prawej tytuł i opis"). Linijka z datą biegnie
   przez CAŁĄ szerokość, więc `.bl-row` i `.bl-feat` zostają blokami, a flexem jest dopiero
   dolne piętro. Wcześniejszy wariant stawiał znak obok całości, razem z datą — przez to data
   była wcięta tak samo jak tytuł i nie oddzielała wpisów od siebie. */
/* ZNAK WYŚRODKOWANY NA WYSOKOŚĆ TYTUŁU Z ZAJAWKĄ (Oskar 23.10.2026), nie przyklejony do
   górnej krawędzi. `center`, a nie `flex-start`: na telefonie zajawka zawija się na dwie
   albo trzy linie, więc znak przy górze raz stałby obok tytułu, a raz obok pustki.
   Na pulpicie zajawka wchodzi w jedną linię, więc blok tytuł+zajawka ma 52 px — dokładnie
   tyle, ile kafel znaku („idealnie byłoby, żeby opis i tytuł był na wysokość ikony"). */
.blr-dol { display:flex; align-items:center; gap:16px; margin-top:7px; }
.blr-tresc { min-width:0; flex:1 1 auto; }
/* Marginesy tytułu i zajawki ścięte do zera: przy wyśrodkowaniu każdy zbędny piksel nad
   tytułem i pod zajawką powiększa blok, od którego liczy się środek — a kafla powiększać
   nie wolno (Oskar: „ale bez jej zwiększania"). Oddech nad tytułem daje `margin-top` na
   `.blr-dol`, nie margines samego tytułu.
   ⚠️ SELEKTOR MUSI BYĆ TRZYCZŁONOWY (`.bl-row .blr-tresc h3`). `.bl-row h3` niżej w tym
   pliku ma `margin:6px 0 5px` i TAKĄ SAMĄ specyficzność co `.blr-tresc h3` (klasa + typ),
   więc przy równej wadze wygrywało to, co stoi dalej — czyli te 6 px zostawało. Pomiar
   w przeglądarce pokazał blok treści 58 px przy kaflu 52 px, dokładnie o tyle wyższy.
   Druga taka pułapka w tym pliku po `.blr-znak` kontra `.wu-ico` — przy każdej regule
   dla wiersza bloga sprawdź, czy nie przegrywa z ogólniejszą regułą stojącą NIŻEJ. */
.bl-row .blr-tresc h3 { margin-top:0; }
.blr-tresc p:last-child { margin-bottom:0; }
/* NA TELEFONIE ZNAKU NIE MA WCALE (Oskar 23.10.2026: „na mobile akurat usuń te ikony").
   Kafel zabierał ok. 56 px z 290 px kolumny tekstu, przez co tytuły łamały się na cztery
   linie. Bez niego tytuł i zajawka mają całą szerokość ekranu.
   ⚠️ SELEKTOR MUSI BYĆ DWUKLASOWY (`.blr-znak.wu-ico`): `.wu-ico` ustawia `display:grid`
   i stoi DALEJ w tym pliku, więc przy równej specyficzności to ONO wygrywa — sam
   `.blr-znak { display:none }` nie schowałby niczego. Ta sama pułapka co przy rozmiarze
   kafla, gdzie pierwsza wersja reguły nie działała wcale (sprawdzone pomiarem). */
@media (max-width:560px){
  .blr-znak.wu-ico { display:none; }
  .blr-dol { gap:0; }
}
.bl-row h3 { font-size:1.08rem; font-weight:700; line-height:1.35; letter-spacing:-.01em;
  color:var(--navy); margin:6px 0 5px; transition:color .14s; }
/* ZAJAWKA WIERSZA NIE JEST UCINANA — i to jest cel tej reguły, nie liczba w `line-clamp`.
   Droga do tego stanu: 18.10.2026 Oskar odrzucił jedną linię („skróty artykułów są ucięte"),
   więc wiersz dostał dwie — ale wtedy blok tekstu był wyższy od kafla znaku i wiersz przestał
   wyglądać jak wiersz. Rozwiązaniem nie było dalsze kręcenie `line-clamp`, tylko KRÓTSZY TEKST:
   wpisy mają własne pole `skrot` (patrz `blog_row_lead()` w `landings/blog/lib.php`), pisane
   do ~90 znaków przy zmierzonym budżecie 101 znaków na linię.
   Dlatego `3`, a nie `2`: na pulpicie skrót zajmuje JEDNĄ linię, a na telefonie (41 znaków
   na linię) najdłuższy z nich rozwija się na trzy. Przy `2` telefon urywałby je w połowie
   myśli — dokładnie to, co Oskar odrzucił. Trójka jest bezpiecznikiem na wpis bez `skrot`,
   nie docelowym wyglądem. */
.bl-row p { font-size:.93rem; line-height:1.6; color:var(--fg-secondary); margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Kolumna obok: tematy i jedno zaproszenie. Bez „polecanych" i „popularnych" —
   nie mierzymy odsłon, więc nie udajemy, że wiemy, co jest popularne. */
.bl-aside { position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }
.bl-box { border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface);
  padding:16px 18px; }
.bl-box > b { display:block; font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-muted); margin-bottom:10px; }
.bl-blink { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 0; font-size:.9rem; color:var(--fg-secondary); text-decoration:none; transition:.14s; }
.bl-blink + .bl-blink { border-top:1px solid var(--border-soft); }
.bl-blink:hover { color:var(--accent-fg); }
.bl-blink i { font-style:normal; font-size:.76rem; color:var(--fg-muted);
  font-variant-numeric:tabular-nums; }
.bl-blink.on { color:var(--accent-fg); font-weight:700; }
.bl-box-cta { background:var(--lp-soft); border-color:transparent; }
.bl-box-cta p { font-size:.86rem; line-height:1.6; color:var(--fg-secondary); margin:0 0 10px; }
.bl-box-cta > a { display:block; font-size:.88rem; font-weight:700; color:var(--accent-fg);
  text-decoration:none; }
.bl-box-cta > a + a { margin-top:8px; padding-top:8px; border-top:1px solid rgba(0,0,0,.06); }
.bl-box-cta > a:hover { text-decoration:underline; }

@media (max-width:900px){
  /* Na telefonie tematy schodzą POD listę: na górze ma być treść, nie spis kategorii. */
  .bl-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .bl-aside { position:static; }
  .bl-feat { padding:20px 18px 18px; }
  .bll-go { margin-left:0; width:100%; margin-top:10px; }
  .bll-meta { flex-wrap:wrap; }
}

.bl-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.bl-featured { margin-bottom:22px; }
.bl-card { display:flex; flex-direction:column; gap:9px; padding:22px; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); transition:.16s; }
.bl-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.bl-cat { font-size:.76rem; font-weight:700; color:var(--accent-fg); text-transform:none; }
.bl-card h3 { font-size:1.08rem; line-height:1.32; color:var(--navy); letter-spacing:-.01em; margin:0; }
.bl-card p { font-size:.9rem; line-height:1.6; color:var(--fg-secondary); margin:0; flex:1; }
.bl-meta { font-size:.78rem; color:var(--fg-muted); font-weight:500; }
.bl-big { background:linear-gradient(135deg,var(--surface) 0%,var(--accent-soft) 100%);
  border-color:var(--border-strong); padding:30px; }
.bl-big h3 { font-size:clamp(1.3rem,2.6vw,1.75rem); }
.bl-big p { font-size:1rem; }

/* ── WPIS ──
   Artykuł ma się CZYTAĆ, a nie wyglądać jak landing. Dlatego trzy rzeczy inaczej
   niż na stronach sprzedażowych:
   1) nagłówek do lewej — wyśrodkowany lid łamał się w wąski, poszarpany blok;
   2) biała powierzchnia pod tekstem — domyślne tło strony (#F1F5FB) na dłuższym
      tekście męczy i wygląda jak sekcja landingu, nie jak artykuł;
   3) ciemniejszy i nieco większy tekst, węższa miara (~68 znaków). */
.bl-article { background:var(--surface); }
.bl-head { padding:40px 0 4px; text-align:left; }
.bl-back { display:inline-block; font-size:.78rem; font-weight:700; color:var(--accent-fg);
  text-decoration:none; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.bl-back:hover { text-decoration:underline; }
.bl-head h1 { font-size:clamp(1.8rem,3.6vw,2.5rem); line-height:1.2; letter-spacing:-.022em;
  color:var(--navy); margin:0 0 16px; text-wrap:balance; }
.bl-lead { font-size:1.14rem; line-height:1.6; color:var(--fg-secondary); margin:0 0 24px; max-width:660px; }
.bl-byline { display:flex; align-items:center; justify-content:flex-start; gap:11px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid var(--border); }
.bl-av { width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:1rem; flex:0 0 auto; overflow:hidden; }
/* Zdjęcie autora — te same pliki, co w sekcji zespołu na /o-nas. Pomarańczowe tło zostaje
   tylko pod inicjałem; przy zdjęciu przebijałoby przez zaokrąglenie. */
.bl-av.has-img { background:var(--border-soft); }
.bl-av img { width:100%; height:100%; object-fit:cover; display:block; }
/* Znak firmowy zamiast twarzy (autor „Zespół Webup!"): nie kadrujemy go jak zdjęcia,
   tylko mieścimy w całości na białym kółku. */
.bl-av.is-mark { background:#fff; border:1px solid var(--border); }
.bl-av.is-mark img { object-fit:contain; padding:5px; }
.bl-av-s.is-mark img { padding:3px; }
.bl-av-s { width:24px; height:24px; font-size:.72rem; font-weight:700; }
.bl-who { display:flex; flex-direction:column; text-align:left; line-height:1.3; }
.bl-who b { font-size:.88rem; color:var(--fg); }
.bl-who span { font-size:.78rem; color:var(--fg-muted); }
.bl-when { font-size:.8rem; color:var(--fg-muted); border-left:1px solid var(--border); padding-left:11px; }

.bl-tldr { margin:28px 0 6px; padding:20px 24px; background:var(--accent-soft);
  border:1px solid #FED7AA; border-left:4px solid var(--accent); border-radius:var(--r-lg); }
.bl-tldr b { display:block; font-size:.8rem; font-weight:800; color:var(--accent-fg);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px; }
.bl-tldr ul { margin:0; padding-left:20px; }
.bl-tldr li { font-size:.93rem; line-height:1.6; color:var(--fg); margin-bottom:6px; }

.bl-body { font-size:1.06rem; line-height:1.78; color:#334155; max-width:68ch; padding-bottom:8px; }
.bl-body h2 { font-size:1.5rem; line-height:1.3; color:var(--navy); letter-spacing:-.015em;
  margin:38px 0 14px; }
.bl-body h3 { font-size:1.13rem; font-weight:700; line-height:1.4; color:var(--fg); margin:30px 0 9px; }
.bl-body p { margin:0 0 16px; }
.bl-body ul, .bl-body ol { margin:0 0 18px; padding-left:22px; }
.bl-body li { margin-bottom:8px; }
.bl-body strong { color:var(--fg); font-weight:700; }
.bl-body code { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:1px 6px; font-size:.9em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.bl-body a { color:var(--accent-fg); font-weight:600; }
.bl-body blockquote { margin:26px 0; padding:18px 24px; background:var(--surface);
  border:1px solid var(--border); border-left:4px solid var(--navy); border-radius:var(--r-lg);
  font-size:1.05rem; line-height:1.6; color:var(--navy); font-weight:500; }
.bl-body table { width:100%; border-collapse:collapse; margin:0 0 20px; font-size:.92rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.bl-body th { background:var(--bg); text-align:left; font-weight:700; color:var(--fg); }
.bl-body th, .bl-body td { padding:10px 14px; border-bottom:1px solid var(--border-soft); }
.bl-body tr:last-child td { border-bottom:0; }

/* CTA w środku tekstu — wstawiane tam, gdzie akapit opisuje problem, nie na końcu wpisu */
.cta-inline { margin:28px 0; padding:22px 24px; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-xl); box-shadow:var(--shadow); }
.cta-inline b { display:block; font-size:1.02rem; color:var(--navy); margin-bottom:6px; }
.cta-inline span { display:block; font-size:.93rem; line-height:1.6; color:var(--fg-secondary); margin-bottom:14px; }
.cta-inline a { display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  font-size:.9rem; padding:10px 20px; border-radius:var(--r); text-decoration:none; }
.cta-inline a:hover { background:var(--accent-light); }
.cta-inline a:active { background:var(--accent-hover); }

.bl-service { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:34px 0 8px;
  padding:22px 24px; background:var(--navy); border-radius:var(--r-xl); color:#fff; }
/* Znak usługi w bloku „Powiązana usługa": `wu_ico_marka()` nie niesie własnych wymiarów
   (ma tylko `viewBox`), więc rozmiar musi dać CSS — bez tego SVG rozciąga się na 100%. */
.bls-ico { font-size:2rem; }
.bls-ico svg { width:34px; height:34px; display:block; }
.bls-txt { flex:1; min-width:220px; display:flex; flex-direction:column; gap:3px; }
.bls-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.65; }
.bls-txt b { font-size:1.12rem; }
.bls-txt span:last-child { font-size:.89rem; line-height:1.55; opacity:.82; }
.bls-cta { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.bls-price { font-size:.86rem; font-weight:700; opacity:.85; }

.bl-share { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px;
  padding-top:20px; border-top:1px solid var(--border); font-size:.87rem; color:var(--fg-muted); }
.bl-share a { color:var(--accent-fg); font-weight:600; text-decoration:none; }
.bl-share a:hover { text-decoration:underline; }

@media (max-width:640px){
  .bl-byline { justify-content:flex-start; }
  .bl-when { border-left:0; padding-left:0; width:100%; }
  .bl-service { flex-direction:column; align-items:flex-start; }
  .bls-cta { align-items:flex-start; width:100%; }
}

/* ── strona główna: grupy usług, ścieżka startowa, cennik zbiorczy ────────────
   Nazwa .ptab-*, a nie .pt-* — .pt/.pt-grid to kafle postów social mediów. */
.svc-group { margin-bottom:34px; }
.svc-group:last-child { margin-bottom:0; }
.svc-gt { display:inline-block; font-size:.88rem; font-weight:700; color:var(--navy);
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:7px 16px; margin-bottom:16px; box-shadow:var(--shadow-sm); }

.start-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.start-card { position:relative; display:flex; flex-direction:column; gap:8px; padding:26px 24px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); text-decoration:none; transition:.16s; }
.start-card:hover { border-color:var(--accent); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.start-no { position:absolute; top:-13px; left:24px; width:28px; height:28px; border-radius:50%;
  background:var(--navy); color:#fff; font-size:.85rem; font-weight:800; display:grid; place-items:center; }
.start-card b { font-size:1.08rem; color:var(--navy); margin-top:4px; }
.start-what { font-size:.92rem; line-height:1.6; color:var(--fg-secondary); flex:1; }
.start-go { font-size:.88rem; font-weight:700; color:var(--accent-fg); }

.ptab-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-xl);
  background:var(--surface); box-shadow:var(--shadow); }
.ptab { width:100%; min-width:640px; border-collapse:collapse; font-size:.93rem; }
.ptab th { background:var(--bg); text-align:left; padding:12px 18px; font-size:.78rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted);
  border-bottom:1px solid var(--border); }
.ptab td { padding:14px 18px; border-bottom:1px solid var(--border-soft); vertical-align:top;
  color:var(--fg-secondary); line-height:1.55; }
.ptab td:first-child { color:var(--fg); font-weight:600; white-space:nowrap; }
.ptab td:nth-child(2) { white-space:nowrap; color:var(--fg); font-weight:600; }
.ptab td:nth-child(2) span { display:block; font-size:.8rem; font-weight:500; color:var(--fg-muted); }
.ptab td:last-child { text-align:right; white-space:nowrap; }
.ptab td:last-child a { color:var(--accent-fg); font-weight:700; text-decoration:none; }
.ptab td:last-child a:hover { text-decoration:underline; }
.ptab tr:last-child td { border-bottom:0; }
.ptab-pkg td { background:var(--accent-soft); }
.ptab-sep td { background:var(--navy); color:#fff; font-size:.76rem; font-weight:700; text-align:left;
  text-transform:uppercase; letter-spacing:.06em; padding:8px 18px; }
.ptab-note { margin-top:14px; font-size:.88rem; color:var(--fg-muted); text-align:center; }
.ptab-note a { color:var(--accent-fg); font-weight:600; }

/* ── PING: kroki self-serve audytu (zastąpiły formularz zgłoszeniowy) ── */
.aud-steps { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:24px; }
.aud-step { position:relative; display:flex; flex-direction:column; gap:5px; padding:22px 20px 18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
.aud-n { position:absolute; top:-12px; left:20px; width:26px; height:26px; border-radius:50%;
  background:var(--lp); color:#fff; font-size:.8rem; font-weight:800; display:grid; place-items:center; }
.aud-step b { font-size:.98rem; color:var(--navy); margin-top:3px; }
.aud-step span:last-child { font-size:.87rem; line-height:1.55; color:var(--fg-secondary); }

/* ── odniesienie ceny do wartości, jaką klient dostaje (nad cennikiem) ── */
.price-anchor { max-width:720px; margin:0 auto 26px; padding:14px 22px; text-align:center;
  background:var(--accent-soft); border:1px solid #FED7AA; border-radius:var(--r-lg);
  font-size:.95rem; line-height:1.6; color:var(--fg-secondary); }
.price-anchor b { color:var(--accent-fg); font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════════════
   STYL MARKI ZE STAREJ webup.pl — używany na stronie głównej i blogu.
   Landingi produktowe zostają na gęstszym układzie „sprzedażowym"; strona główna
   i blog mają wyglądać jak dotychczasowa witryna: płynne smugi pomarańcz+turkus,
   lekka i duża typografia, nadtytuł wersalikami, dużo powietrza.
   ═══════════════════════════════════════════════════════════════════════════ */
.wu { --wu-teal:#0D9488; }

/* nadtytuł sekcji: pomarańczowe wersaliki + kreska pod spodem */
.wu-kicker { display:block; text-align:center; font-size:.82rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.wu-kicker::after { content:""; display:block; width:26px; height:3px; border-radius:2px;
  background:var(--accent); margin:11px auto 0; }

/* nagłówek: duży, LEKKI, wyśrodkowany — jak na starej stronie */
.wu-h2 { text-align:center; font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:300;
  line-height:1.25; letter-spacing:-.015em; color:var(--navy); margin:0 auto 16px; max-width:820px; }
.wu-h2 b, .wu-h2 strong { font-weight:600; }
.wu-sub { text-align:center; font-size:1.03rem; line-height:1.7; color:var(--fg-secondary);
  max-width:660px; margin:0 auto 40px; font-weight:400; }
/* Sekcje są BIAŁE domyślnie. Wcześniej nie miały żadnego tła, więc przebijało przez nie
   niebieskawe tło `body` i cała strona była jednolicie niebieska — a przeplot biały/niebieski
   był zamierzony (dwie sekcje mają wprost `background:var(--bg)`). Tylko one zostają niebieskie. */
.wu-sec { padding:80px 0; background:var(--surface); }
.wu-sec.tight { padding:56px 0; }
/* Ta sama zasada co `.alt` na landingach: sekcja w kolorze tła strony wchodzi w ten kolor
   gradientem od bieli sąsiada NAD nią, a sekcja biała pod nią wychodzi z niebieskiego —
   każde wygaszenie dochodzi do koloru, który druga sekcja naprawdę ma (Oskar 9.09). */
.wu-sec.tlo { background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 20%); }
/* `.wu-pas` w tej liście, bo sekcja z tłem może siedzieć WEWNĄTRZ pasa (strona główna:
   „Cześć!" + blog) — wtedy sąsiadem sekcji białej jest pas, nie ona sama, i bez tego
   wpisu wyjście z błękitu do bieli urywa się kreską. */
.wu-sec.tlo + .wu-sec,
.wu-sec.tlo + script + .wu-sec,
.wu-pas + .wu-sec,
.wu-pas + script + .wu-sec { background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 20%); }
/* Po „Cześć!" blog zaczyna się BIELĄ i schodzi do koloru tła (Oskar 9.09) — „Cześć!" kończy
   się teraz bielą, więc przejście prowadzi z jednego realnego koloru do drugiego. Wcześniej
   stała tu reguła spłaszczająca blog do koloru tła; nie jest już potrzebna. */

/* hero ze smugami */
/* Hero wchodzi POD pasek nawigacji (pasek jest przezroczysty, więc ma przez niego iść
   to samo tło co niżej). Bez tego nad hero zostawał jasny pas w kolorze tła strony
   i „transparentny” pasek wyglądał jak osobna belka. Wysokość paska jest stała na
   desktopie (73 px); na telefonie pasek zawija się w dwa rzędy, więc tam nie podciągamy. */
.wu-hero { position:relative; overflow:hidden; background:#fff; padding:96px 0 68px; }
@media (min-width:761px){
  .wu-hero { margin-top:-73px; padding-top:calc(96px + 73px); }
}
@media (max-width:760px){
  /* Na telefonie pasek to jeden rząd o stałej wysokości (logo + hamburger) = 59 px.
     Rozwinięte menu jest wyższe, ale ma własne tło, więc podciągnięcie zostaje bez zmian
     i układ nie skacze przy otwieraniu. */
  .wu-hero { margin-top:-59px; padding-top:calc(44px + 59px); }
}
/* ── ŻYWE TŁO MARKI ─────────────────────────────────────────────────────────
   Buduje je CSS, a nie animowany SVG. Poprzednia wersja trzymała animacje SMIL
   w <img> — Chrome je odtwarza, ale Safari (i każda przeglądarka z blokadą SMIL)
   pokazuje pierwszą klatkę i tło stoi. Na kolorowych plamach z `radial-gradient`
   animowanych przez `transform`/`opacity` działa wszędzie tak samo i idzie na GPU.

   Kolory wyłącznie z logo: #FF6F00 i #27495B (+ ich jaśniejsze warianty).
   Cztery plamy, każda z własnym czasem (16/21/26/33 s) i własną trasą — okresy są
   względnie pierwsze, więc układ nie wraca do tej samej klatki i nie widać pętli. */
/* Rozmycie 40 px, nie 64 — przy mocniejszym plamy tak się uśredniają, że ruch przestaje
   być widoczny gołym okiem (zmierzone: max różnica 25/255 między klatkami). */
.wu-bg { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  filter:blur(40px); opacity:1; --mx:0; --my:0; --px:50%; --py:50%; }

.wu-blob { position:absolute; border-radius:50%; will-change:transform, opacity; }
/* Piąta plama, ZAKOTWICZONA w prawym górnym rogu — pod pozycjami menu. Cztery pozostałe
   odpływają i w części cyklu pas pod menu robił się prawie biały, przez co białe napisy
   znikały. Ta oddycha w miejscu, więc kolor spod menu nigdy nie ucieka.
   GRANATOWA, nie pomarańczowa: pomarańcz ma z bielą najwyżej ~2,5:1 przy wymaganych 4,5:1,
   granat daje ~7:1. Wcześniejsza próba z pomarańczową plamą dlatego nic nie dała.
   Jest CZĘŚCIĄ TŁA (siedzi w .wu-bg, pod welonem), a nie nakładką na pasek. */
.wu-bg::after { content:""; position:absolute; top:-34%; right:-14%; width:78vw; height:34vw;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at 60% 64%, #27495B 0%, #33586D 45%, rgba(39,73,91,0) 76%);
  animation:wuAnchor 20s ease-in-out infinite; }
@keyframes wuAnchor {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  50%     { transform:translate3d(-5%, 3%, 0) scale(1.1); }
}
/* Warstwa paralaksy siedzi na RODZICU plamy, żeby nie kolidować z animacją `transform`
   samej plamy — dwie animacje tej samej właściwości wykluczyłyby się nawzajem. */
.wu-par { position:absolute; inset:0; transition:transform 1.4s cubic-bezier(.16,.8,.3,1); }
.wu-par.p1 { transform:translate3d(calc(var(--mx) * 130px), calc(var(--my) * 95px), 0); }
.wu-par.p2 { transform:translate3d(calc(var(--mx) * -105px), calc(var(--my) * 80px), 0); }
.wu-par.p3 { transform:translate3d(calc(var(--mx) * 88px), calc(var(--my) * -100px), 0); }
.wu-par.p4 { transform:translate3d(calc(var(--mx) * -160px), calc(var(--my) * -120px), 0); }
@media (prefers-reduced-motion:reduce){ .wu-par { transform:none !important; } }
.wu-blob.b1 { width:56vw; height:46vw; top:-16%; right:-10%;
  background:radial-gradient(circle at 40% 40%, #FF9A3D 0%, #FF6F00 45%, rgba(255,111,0,0) 72%);
  animation:wuFloat1 12s ease-in-out infinite; }
.wu-blob.b2 { width:46vw; height:40vw; bottom:-18%; left:-8%;
  background:radial-gradient(circle at 50% 50%, #E56400 0%, rgba(229,100,0,0) 70%);
  animation:wuFloat2 16s ease-in-out infinite; }
.wu-blob.b3 { width:44vw; height:36vw; top:-8%; right:24%;
  background:radial-gradient(circle at 50% 50%, #27495B 0%, #3A6B85 38%, rgba(58,107,133,0) 72%);
  animation:wuFloat3 20s ease-in-out infinite; opacity:1; }
.wu-blob.b4 { width:40vw; height:32vw; top:6%; left:8%;
  background:radial-gradient(circle at 50% 50%, #FFC48A 0%, rgba(255,196,138,0) 70%);
  animation:wuFloat4 25s ease-in-out infinite; }

/* Trasy są nieregularne (cztery przystanki, nie tam-i-z-powrotem) i łączą przesunięcie
   ze skalą oraz obrotem — dzięki temu plama zmienia też KSZTAŁT, a nie tylko pozycję. */
@keyframes wuFloat1 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  25%  { transform:translate3d(-30%, 20%, 0)     scale(1.45) rotate(14deg); }
  50%  { transform:translate3d(14%, 38%, 0)      scale(.72)  rotate(-12deg); }
  75%  { transform:translate3d(-18%, -14%, 0)    scale(1.28) rotate(8deg); }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
}
@keyframes wuFloat2 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); opacity:.9; }
  33%  { transform:translate3d(-40%, -30%, 0)    scale(1.5)  rotate(-18deg); opacity:.35; }
  66%  { transform:translate3d(18%, 14%, 0)      scale(.7)   rotate(12deg); opacity:1; }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);  opacity:.9; }
}
@keyframes wuFloat3 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
  40%  { transform:translate3d(48%, -26%, 0)     scale(1.4)  rotate(14deg); }
  70%  { transform:translate3d(-14%, 24%, 0)     scale(.72)  rotate(-10deg); }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg); }
}
@keyframes wuFloat4 {
  0%   { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);   opacity:.85; }
  30%  { transform:translate3d(55%, -34%, 0)     scale(1.6)  rotate(22deg);  opacity:.3; }
  60%  { transform:translate3d(-40%, 30%, 0)     scale(.65)  rotate(-18deg); opacity:1; }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);   opacity:.85; }
}
/* Hero i sekcja z wizytówką: tło wychodzi z krawędzi, więc pod treścią kładziemy
   jasny welon — inaczej tekst czytałoby się na pełnym pomarańczu. */
.wu-hero::before { content:""; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.34); }
.wu-hero .section-inner { position:relative; z-index:2; }

.wu-hero-copy { max-width:600px; }
/* ── KAFEL PROPOZYCJI W EKRANIE POWITALNYM STRONY GŁÓWNEJ (Oskar 23.10.2026) ──
   „Jak jest UTM, to na stronie głównej w hero też daj jakiś odnośnik do tej propozycji.
   Tam po prawej stronie jest sporo niewykorzystanej przestrzeni." Kafel wchodzi TYLKO wtedy,
   gdy znamy organizację z linku — bez tego hero zostaje jednokolumnowe jak dotąd.
   Pomarańczowa ramka ta sama co przy wyróżnionej kostce cennika: na całym serwisie znaczy
   „tu patrz". */
.wu-hero-dwie { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,370px); gap:44px; align-items:center; }
.wu-hero-dwie .wu-hero-copy { max-width:none; }
/* `.hero-prop` jest OPAKOWANIEM karty, a kartę składa `potencjal_karta_hero_html()` — ta sama
   funkcja, co na propozycji. Odnośnikiem bywa tylko w jednym wypadku: gdy nie ma ani potencjału,
   ani oszczędności i zostaje samo zdanie zachęty. Stąd `a.hero-prop` przy podniesieniu po
   najechaniu — na zwykłym `<div>` unosiłoby się coś, w co nie da się kliknąć. */
.hero-prop { display:block; text-decoration:none; color:inherit;
  transition:transform .18s, box-shadow .18s; }
a.hero-prop:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,111,0,.22); }
.hero-prop > b { display:block; font-size:1.06rem; font-weight:800; color:var(--navy);
  line-height:1.32; margin-bottom:2px; }
/* ── KARTA PROPOZYCJI: JEDNA DEFINICJA DLA /propozycja I DLA EKRANU POWITALNEGO ──
   Przeniesione 23.10.2026 z `landings/propozycja/style.css` (Oskar: „ta propozycja na hero
   gorzej wygląda niż na propozycji, zrób tak samo!"). Kafel na stronie głównej nie udaje już
   tamtej karty własnymi klasami — używa dokładnie tych samych, więc nie ma jak wyglądać inaczej.
   Na propozycji zostały tylko rzeczy używane WYŁĄCZNIE tam (wiersze kampanii, paski, stopka). */
.pp-hcard { position:relative; z-index:2; background:#fff; border:1px solid var(--border, #DCE4EF);
  border-radius:var(--r-lg, 14px); box-shadow:var(--shadow-lg, 0 8px 24px rgba(15,23,42,.08)); padding:20px 20px 16px; }
.pp-hcard-t { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#94A3B8; margin-bottom:10px; }
/* Domena organizacji w nagłówku karty — jedyne słowo w tym kaflu, które należy do NICH,
   więc w kolorze marki, a nie w szarości etykiety (Oskar 23.10.2026). */
.pp-hcard-t b { color:var(--accent-fg); font-weight:800; }
.pp-suma { display:flex; flex-direction:column; padding:4px 0 12px; border-bottom:1px solid #E9EFF7; margin-bottom:4px; }
.pp-suma b { font-size:2.1rem; font-weight:800; color:var(--navy); letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.pp-suma span { font-size:.82rem; color:var(--fg-secondary); }
/* Wiersze kampanii z paskami — TO JEST „potencjał grantu" w tej karcie. Przeniesione z arkusza
   propozycji 23.10.2026: zostały tam dzień dłużej niż reszta karty jako rzekomo „używane tylko
   na propozycji", a strona główna tymczasem zaczęła składać tę samą kartę — i pokazywała gołe
   etykiety z liczbami pod spodem, bez pasków i bez wyrównania do prawej, bo tamtego arkusza
   na niej nie ma. Przenosząc wspólny element, przenoś KOMPLET jego reguł. */
.pp-hrow { display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; padding:9px 0;
  border-bottom:1px solid #E9EFF7; }
.pp-hrow:last-of-type { border-bottom:none; }
.pp-hlab { font-size:.9rem; line-height:1.3; color:var(--fg); }
.pp-hval { font-size:1.2rem; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.pp-hbar { grid-column:1 / -1; height:8px; background:var(--bg); border-radius:999px; overflow:hidden; }
.pp-hbar span { display:block; height:100%; border-radius:999px; background:var(--accent); min-width:4px; }
.pp-hosz { margin-top:12px; padding-top:12px; border-top:1px dashed #DCE4EF; }
/* Karta hero bez oceny Ad Grants — sama oszczędność, bez kreski nad nią. */
.pp-hcard-osz .pp-hosz { margin-top:0; padding-top:0; border-top:0; }
/* Karta BEZ WIERSZY KAMPANII (ekran powitalny strony głównej — Oskar 23.10.2026: „nie pokazuj
   tych kampanii, bo za dużo tego jest"). Kreska pod sumą miała oddzielać ją od wierszy; bez
   nich stawała tuż nad kreską oszczędności i wyglądała jak pomyłka. */
.pp-hcard-krotka .pp-suma { border-bottom:0; padding-bottom:6px; margin-bottom:0; }
.pp-hosz-t { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#94A3B8; margin-bottom:6px; }
.pp-hosz-k { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:.9rem; color:var(--fg); padding:3px 0; }
.pp-hosz-k b { font-weight:700; color:var(--navy); white-space:nowrap; }
.pp-hosz-z { text-decoration:none; margin-top:6px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pp-hosz-z b { font-size:1.5rem; font-weight:800; color:#15803D; letter-spacing:-.02em; white-space:nowrap; }
.pp-hosz-z span { font-size:.85rem; color:var(--fg-secondary); }
.wu-hero .hero-prop p { font-size:.88rem; line-height:1.6; color:var(--fg-secondary);
  margin:8px 0 0; max-width:none; }
.wu-hero .hero-prop p i { font-style:normal; font-weight:600; color:var(--navy); }
/* PRZYCISK JAK W PASKU NAWIGACJI (Oskar 23.10.2026: „przycisk propozycji niech będzie taki
   oddychający jak w nawigacji") — pełna pigułka i oddech 13/28, czyli dokładnie to, co ma
   `.btn-primary` w regule „jeden kształt przycisku w całym serwisie". Wcześniej miał promień
   10 px i ciaśniejsze marginesy, więc obok pastylki z paska wyglądał jak z innego projektu. */
.hp-cta { display:flex; align-items:center; justify-content:center; margin-top:16px;
  background:var(--accent); color:#fff; text-decoration:none;
  font-weight:600; font-size:1rem; padding:13px 28px; border-radius:999px;
  box-shadow:0 4px 14px rgba(255,111,0,.26); transition:background .18s, box-shadow .18s; }
a.hero-prop:hover .hp-cta, .hp-cta:hover { background:var(--accent-light); box-shadow:0 6px 20px rgba(255,111,0,.42); }
@media (max-width:980px){
  .wu-hero-dwie { grid-template-columns:1fr; gap:30px; }
}
.wu-hero h1 { font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:300; line-height:1.14;
  letter-spacing:-.025em; color:var(--navy); margin:0 0 20px; }
.wu-hero h1 b { font-weight:600; color:var(--accent); }
.wu-hero p { font-size:1.1rem; line-height:1.7; color:var(--fg-secondary); margin:0 0 30px; max-width:520px; }
.wu-hero-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
@media (max-width:900px){
  .wu-hero { padding:64px 0 60px; }
  .wu-hero::before { opacity:.55; }
}

/* ── STAWKA W PROGRAMIE PARTNERSKIM ──
   Liczba ma być pierwszą rzeczą, którą widać — po nią ludzie wchodzą na tę stronę. */
.pp-rate { padding:34px 0; }
.pp-rate-box { display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:center;
  max-width:860px; margin:0 auto; padding:30px 34px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); }
.pp-rate-num { display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-right:34px; border-right:1px solid var(--border-soft); }
.pp-rate-num b { font-size:4rem; font-weight:800; line-height:1; color:var(--accent);
  letter-spacing:-.03em; }
.pp-rate-num span { font-size:.84rem; color:var(--fg-muted); margin-top:8px; max-width:170px; }
.pp-rate-list { margin:0; padding:0; list-style:none; flex:1 1 320px; }
.pp-rate-list li { position:relative; padding-left:22px; font-size:.95rem; line-height:1.6;
  color:var(--fg-secondary); margin-bottom:10px; }
.pp-rate-list li:last-child { margin-bottom:0; }
.pp-rate-list li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px;
  border-radius:50%; background:var(--accent); }
.pp-rate-list b { color:var(--fg); font-weight:700; }
@media (max-width:760px){
  .pp-rate-box { gap:20px; padding:24px 20px; }
  .pp-rate-num { padding:0 0 18px; border-right:0; border-bottom:1px solid var(--border-soft);
    width:100%; }
  .pp-rate-num b { font-size:3rem; }
}

/* ── STRONY DOKUMENTÓW (polityka prywatności, regulamin) ──
   Wąska kolumna i numeracja z <ol>; dokument prawny ma się dobrze CZYTAĆ,
   a nie wyglądać jak landing. Numery pochodzą z listy, nie z treści. */
.doc-page .section-inner { max-width:820px; }
.doc-page h1 { text-align:left; }
.doc-meta { font-size:.86rem; color:var(--fg-muted); margin:6px 0 34px; }
.doc-page h2 { font-size:1.05rem; font-weight:700; letter-spacing:.01em; color:var(--navy);
  margin:34px 0 12px; padding-top:18px; border-top:1px solid var(--border-soft); }
.doc-list { margin:0 0 4px; padding-left:22px; }
.doc-list li { font-size:.95rem; line-height:1.75; color:var(--fg-secondary); margin-bottom:9px; }
.doc-list li::marker { color:var(--accent-fg); font-weight:600; }
/* Akapit, tabela i wyróżnienie w dokumencie — dołożone 5.10.2026 razem z regulaminem
   i polityką prywatności smartcookie.io. Polityka ma dwie tabele (zakres logu zgód
   i uprawnienia Google), bez których Google nie zweryfikuje aplikacji, a `doc-list`
   sam tego nie udźwignie. */
.doc-p { font-size:.95rem; line-height:1.75; color:var(--fg-secondary); margin:0 0 12px; }
.doc-p code, .doc-tab code { font-size:.86em; background:var(--bg); border:1px solid var(--border-soft);
  border-radius:5px; padding:1px 5px; white-space:nowrap; }
.doc-tab { width:100%; border-collapse:collapse; margin:4px 0 16px; }
.doc-tab th, .doc-tab td { text-align:left; vertical-align:top; padding:9px 12px;
  border-bottom:1px solid var(--border-soft); font-size:.9rem; line-height:1.65;
  color:var(--fg-secondary); }
.doc-tab th { font-weight:700; color:var(--fg); background:var(--bg);
  border-bottom:1px solid var(--border); }
.doc-tab td:first-child { width:38%; color:var(--fg); }
.doc-ramka { margin:4px 0 16px; padding:14px 16px; border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:var(--r-md, 10px); background:var(--surface); }
.doc-ramka p { margin:0; font-size:.92rem; line-height:1.7; color:var(--fg-secondary); }
@media (max-width:620px) {
  .doc-tab, .doc-tab tbody, .doc-tab tr, .doc-tab th, .doc-tab td { display:block; width:auto; }
  .doc-tab tr { padding:10px 0; border-bottom:1px solid var(--border-soft); }
  .doc-tab th, .doc-tab td { padding:2px 0; border:0; }
  .doc-tab td:first-child { width:auto; font-weight:600; }
}

/* ── KAFLE ARTYKUŁÓW (strona główna, lista /blog, „powiązane" pod wpisem) ──
   Jeden wygląd we wszystkich trzech miejscach. Wcześniej blog miał własny kafel
   z pomarańczową płytką i po redesignie strony głównej widoki się rozjechały.
   Język ten sam co kafle usług: ta sama obwódka, uniesienie i kolor tytułu po najechaniu. */
.wu-posts.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  max-width:1080px; margin:0 auto; }
.wu-post-card { position:relative; display:flex; flex-direction:column; flex:0 1 calc(33.333% - 10px);
  min-width:250px; padding:22px 22px 18px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); text-decoration:none; box-shadow:var(--shadow-sm);
  transition:border-color .16s, box-shadow .16s, transform .16s; }
.wu-post-card:hover { border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(39,73,91,.12); }
.wpc-cat { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-fg); margin-bottom:10px; }
.wu-post-card h3 { font-size:1.04rem; font-weight:600; line-height:1.4; color:var(--navy);
  margin:0 0 8px; text-wrap:balance; }
.wu-post-card:hover h3 { color:var(--accent-fg); }
.wu-post-card p { font-size:.89rem; line-height:1.6; color:var(--fg-secondary); margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* Data i czas czytania zawsze przy dolnej krawędzi, żeby karty w rzędzie kończyły się równo. */
.wpc-meta { display:flex; align-items:center; gap:8px; margin-top:auto; font-size:.78rem;
  color:var(--fg-muted); }
.wpc-au { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.wpc-au b { font-weight:600; color:var(--fg-secondary); }

/* Wpis wyróżniony — pierwszy na liście /blog. Pełna szerokość i większy tytuł;
   bez tego dwanaście identycznych prostokątów nie mówi, od czego zacząć. */
.wu-post-card.feat { flex:0 0 100%; padding:30px 30px 24px;
  background:linear-gradient(180deg,#fff 0%,var(--surface-alt,#F7F8FA) 100%); }
.wu-post-card.feat h3 { font-size:1.5rem; line-height:1.3; letter-spacing:-.015em; margin-bottom:10px; }
.wu-post-card.feat p { font-size:.98rem; max-width:70ch; -webkit-line-clamp:2; margin-bottom:14px; }
/* Duzy kafel to zwykle najnowszy wpis — ale nie wtedy, gdy na gorze siedzi PRZYPIETY
   (jego etykieta zaczyna sie od pinezki). Wpis z 1.09 podpisany „najnowszy" nad wpisami
   z wrzesnia wygladalby na blad. */
.wu-post-card.feat .wpc-cat:not(.pin)::after { content:" · najnowszy"; color:var(--fg-muted); font-weight:600; }

@media (max-width:980px){ .wu-post-card { flex:0 1 calc(50% - 7px); } }
@media (max-width:760px){
  .wu-posts.cards { gap:10px; }
  .wu-post-card, .wu-post-card.feat { flex:0 1 100%; min-width:0; padding:18px 16px 14px; }
  .wu-post-card p { -webkit-line-clamp:2; }
  .wu-post-card.feat h3 { font-size:1.2rem; }
}

/* pasek partnerów pod hero — szare logotypy, dużo światła */
/* Wszystkie osiem w JEDNEJ linii (decyzja Oskara 09.08 — dwa rzędy wyglądały źle) i na tym
   samym tle co reszta strony, bez własnego szarego pasa i kreski. Ramka zjeżdża ze 170 do 122 px,
   żeby 8×122 + 7×14 = 1074 zmieściło się w kolumnie 1080. */
/* Odstępy poluzowane 16.10.2026 (Oskar: „jest trochę za blisko tych logotypów"). Było
   14/10 px na pasie i 6 px między logotypami a podpisem — przy podpisie w tym samym szarym
   co znaki wyglądał jak jedenasty logotyp, a nie jak podpis pod nimi. */
.wu-partners-wrap { background:var(--surface); padding:18px 0 20px; }
.wu-partners { display:flex; align-items:center; justify-content:center; gap:16px 10px;
  flex-wrap:wrap; padding:0 max(16px, calc((100% - 1080px) / 2)); }
/* Tor istnieje dla taśmy na telefonie; na szerokim ekranie znika z układu, więc
   odnośniki są znów bezpośrednimi elementami siatki. */
.wp-track { display:contents; }
.wp-dup { display:none; }
/* Dziesiąty znak (JOWES, 9.09) nie mieścił się w rzędzie i zostawał sam w drugiej linii.
   Węższe gniazdo i mniejsza przerwa: 10×96 + 9×10 = 1050 px, czyli poniżej 1080 px szerokości
   pasa. Szerokie znaki skalują się w dół przez globalne `img{max-width:100%}`. */
.wu-partners a { flex:0 0 96px; max-width:96px; }
/* Na tablecie dziesięć w linii się nie mieści — zwężamy pas tak, żeby wyszło równe 5+5
   (5×96 + 4×10 = 520), a nie dziewięć i jeden sierota w drugim rzędzie. */
@media (max-width:1119px) and (min-width:761px){
  .wu-partners { padding-inline:max(16px, calc((100% - 520px) / 2)); }
  /* Angielska szóstka ma inne gniazda (150 px), więc pas 520 px łamałby ją na 2+2+2.
     Przy 3+3 wychodzi 3×150 + 2×30 = 510 i są dwa równe rzędy. */
  .wu-partners.wp-en { padding-inline:max(16px, calc((100% - 510px) / 2)); }
}
/* Podpis pod spodem: najpierw logotypy, dopiero potem wyjasnienie. */
/* Podpis ma być ledwo obecny — to przypis do logotypów, nie nagłówek sekcji. */
.wu-partners-head { display:block; width:100%; text-align:center; font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); opacity:.62; margin-top:16px; }
/* Wyrównanie wielkości siedzi w SAMYCH PLIKACH, nie tutaj: każdy znak jest wpasowany
   w to samo płótno 170×50 (2× = 340×100), a jego rozmiar w środku wyliczony z proporcji
   tak, żeby wszystkie miały podobne POLE — równa wysokość robiła ze znaku kwadratowego
   (Sektor 3.0) znaczek przy szerokim napisie (Radio Gdańsk). Skrypt: normalize_partners.py.
   Dlatego w CSS wystarczy jedna wysokość i wszystkie ramki wychodzą identyczne.
   Pliki mają zachowany kanał alfa — przy usuniętej przezroczystości zostawał biały prostokąt. */
/* Znaki są zredukowane do jednego koloru marki (duotone granat→biel, wypalony w plikach),
   więc osiem logotypów z ośmiu różnych stron czyta się jak jeden zestaw, a nie jak zlepek. */
.wu-partners a { display:grid; place-items:center; }
/* Wersja angielska: sześć znaków zamiast dziesięciu, więc każdy dostaje szerszą ramkę
   i większy odstęp (Oskar 18.10.2026: „daj więcej miejsca między logotypami"). Przy
   dziesiątce te same wartości rozpychały taśmę na dwa wiersze. */
.wu-partners.wp-en { gap:18px 30px; }
.wu-partners.wp-en a { flex-basis:150px; max-width:150px; }
/* Plakietki Google Partner i Meta są SPIĘTRZONE (znak nad napisem), więc przy wysokości
   32 px wychodziły wielkości paznokcia obok szerokich napisów — płótno 340×100 wyrównuje
   POLE tuszu, a kwadrat przy niskim wierszu nie ma jak urosnąć wszerz. Angielska taśma ma
   sześć znaków zamiast dziesięciu, więc stać ją na wyższy wiersz; polska zostaje na 32.
   RAMKA MUSI ROSNĄĆ RAZEM Z WYSOKOŚCIĄ: płótno ma proporcję 3,4:1, a `img { max-width:100% }`
   z arkusza bazowego przycina szerokość do ramki — przy 124 px i wysokości 42 px znaki
   wychodziły ściśnięte w poziomie o 13%. 150 × 44 trzyma proporcję (150/44 ≈ 3,41), a sześć
   takich ramek z odstępem 30 px mieści się w jednym wierszu (6×150 + 5×30 = 1050 < 1080). */
.wu-partners.wp-en img { height:44px; }
.wu-partners img { height:32px; width:auto; opacity:.85; transition:.2s; }
.wu-partners a:hover img { opacity:1; }
.wu-partners a:hover img { transform:translateY(-1px); }

/* usługi: duża okrągła ikona w ramce, tytuł, jedno zdanie — bez ścian tekstu */
/* Kompaktowo: ikona obok tekstu zamiast nad nim. Dziewięć kafli z ikoną 96 px
   i akapitem pod spodem zajmowało dwa ekrany; teraz mieszczą się w jednym. */
/* OPISY ZACZYNAJĄ SIĘ RÓWNO W CAŁYM RZĘDZIE (Oskar 18.10.2026: „czy tekst w usługach nie
   powinien zaczynać się równo pod nagłówkiem? teraz jest jakoś rozjechane").
   Kafle to teraz SIATKA, a każdy kafel dziedziczy wiersze rodzica przez `subgrid` — więc
   wysokość wiersza tytułu jest wspólna dla całego rzędu i bierze się z najdłuższego tytułu.
   Przy `flex` każdy kafel mierzył się sam: „Google Workspace for Nonprofits" łamał się
   na dwie linie i jego opis startował niżej niż w sąsiadach.
   Przeglądarka bez `subgrid` ignoruje tę deklarację i wraca do `minmax(22px,auto)` z reguły
   niżej — czyli do zachowania sprzed zmiany, bez nachodzenia tekstu. */
/* RÓWNO W CAŁEJ SEKCJI, NIE TYLKO W JEDNYM RZĘDZIE (Oskar 19.10.2026: „na angielskiej
   wersji te usługi też nie zaczynają się w równym odstępie od nagłówka — czemu to nie jest
   spójne?"). Sam `subgrid` wyrównywał opisy WEWNĄTRZ rzędu, bo wysokość wiersza tytułu brała
   się z najdłuższego tytułu w TYM rzędzie. Przy 1100 px „Google Workspace for Nonprofits"
   łamie się na dwie linie, więc w Infrastrukturze opisy startowały 21 px niżej niż
   w Marketingu — zmierzone, nie na oko. `grid-auto-rows` daje KAŻDEMU rzędowi ten sam
   pas tytułu (2,7 rem = dwie linie przy 1 rem/1,35), więc odstęp jest jeden na całej
   stronie i w każdym języku. Pas ustępuje dopiero tytułowi na trzy linie. */
.wu-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
/* BEZ rezerwowania dwóch linii na tytuł (próba z 19.10.2026 — Oskar: „miało być równo
   zaraz pod nagłówkiem, nie z taką przerwą! wcześniej na PL było dobrze"). Stały pas
   wyrównywał wszystko, ale pod jednoliniową nazwą zostawiał 21 px dziury. Opis ma stać
   tuż pod nazwą, a równo wychodzi dlatego, że ŻADNA nazwa się nie łamie: rząd pilnuje
   `subgrid`, a najdłuższa angielska nazwa jest skrócona w słowniku tak, żeby mieściła
   się w linii (`wu_en_slownik()`, klucz z `<h3>`). */
.wu-cards > .wu-card { grid-row:span 2; grid-template-rows:subgrid; }
/* Samotny kafel w ostatnim rzędzie (np. czwarty na /program-partnerski) idzie na środek —
   przy `flex` robiło to `justify-content:center`, w siatce trzeba go wskazać wprost. */
.wu-cards > .wu-card:last-child:nth-child(3n+1) { grid-column:2; }
/* DWA KAFLE W RZĘDZIE NA TRZY — para idzie na środek, zamiast zostawiać dziurę po prawej
   (Oskar 19.10.2026: „wyśrodkuj te dwa, czyli workspace i smartcookie"). Kafle zachowują
   szerokość kolumny z rzędu trzech: `max-width` to dokładnie dwie takie kolumny plus
   przerwa między nimi, więc para nie rozlewa się na pół ekranu. Używa tego wersja angielska
   strony głównej, w której Infrastruktura ma dwie pozycje zamiast sześciu. */
/* ⚠️ DWA KAFLE INFRASTRUKTURY (wersja angielska) STOJĄ NA ŚRODKU RZĘDU.
   To miejsce zmieniało zdanie dwa razy i oba polecenia są Oskara, więc zapisuję oba:
     · 23.10.2026 — „w usługach Marketing Google Ad Grants… nie po lewej": para zjechała
       do lewej krawędzi, żeby Workspace zaczynał się tam, gdzie Google Ad Grants w rzędzie
       wyżej (przy 1440 px środkowanie odsuwało go o 277 px w prawo),
     · 24.10.2026 — „to było wyśrodkowane wcześniej na desktopie, czemu nie jest?":
       wracamy na środek. To jest wersja obowiązująca.
   Kolumny zostają szerokości jednej trzeciej rzędu, żeby kafel nie urósł do jego połowy;
   zmienia się wyłącznie to, po której stronie zostaje wolna trzecia kolumna. */
.wu-cards.wu-para { grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:calc((100% - 24px) / 3 * 2 + 12px); margin-inline:auto; }
/* Ikona zajmuje oba wiersze pierwszej kolumny, tytuł i opis idą w drugiej. Bez
   `grid-row` akapit lądował w kolumnie szerokiej na 52 px i łamał się po jednym słowie. */
/* Wiersz tytulu ma 22 px, ale ROSNIE, gdy tytul sie lamie (`minmax`). Sztywne 22 px
   wystarczalo, dopoki wszystkie nazwy byly polskie i jednowierszowe — po angielsku
   „Google Workspace for Nonprofits" lamie sie na dwie linie i druga wchodzila WPROST
   na opis pod spodem (Oskar 18.10.2026, zrzut: „co tu sie stalo?").
   Po co w ogole 22 px: przy samym `auto` opisy w sasiednich kaflach startowaly na roznych
   wysokosciach. `minmax` trzyma je rowno wszedzie tam, gdzie tytul miesci sie w linii,
   a ustepuje tylko temu kaflowi, ktory naprawde potrzebuje dwoch. */
/* `align-content:start` — DRUGA POŁOWA równego odstępu. Kafle w rzędzie mają wspólną wysokość
   (siatka je rozciąga), a domyślny `stretch` rozdzielał tę nadwyżkę PO RÓWNO między wiersz
   tytułu i wiersz opisu: kafel z krótszym zdaniem dostawał +11 px pod tytuł i jego opis
   startował niżej niż u sąsiada z tego samego rzędu. Zmierzone na „Google Ad Grants" obok
   „PING.NGO". Teraz nadwyżka zbiera się na dole kafla, gdzie jej nie widać. */
.wu-card { display:grid; grid-template-columns:52px 1fr; grid-template-rows:minmax(22px,auto) auto;
  align-items:start; align-content:start; gap:2px 14px; text-align:left; text-decoration:none;
  padding:14px 16px; border-radius:var(--r-lg);
  transition:background .18s, box-shadow .18s, color .18s; }
.wu-card > .wu-ico { grid-column:1; grid-row:1 / span 2; align-self:start; }
.wu-card > h3 { grid-column:2; grid-row:1; align-self:start; line-height:1.35; }
.wu-card > p  { grid-column:2; grid-row:2; margin-top:6px; }
/* Najechanie na usługę — JEDNA reakcja w całym serwisie i WYŁĄCZNIE kolorem: pomarańczowa
   obwódka, nazwa i ikona. Bez podnoszenia kafla i bez poświaty (Oskar 7.09) — wcześniej
   kafle zalewały się granatem, a pozycje rozwijanego menu dostawały pomarańczowe tło,
   czyli dwa różne języki na tę samą czynność. */
.wu-card:hover { background:var(--surface); border-color:var(--accent); }
.wu-card:hover h3 { color:var(--accent-fg); }
.wu-ico { width:52px; height:52px; border-radius:15px; border:1px solid var(--border);
  background:var(--surface); display:grid; place-items:center; color:var(--navy);
  box-shadow:var(--shadow-sm); transition:.2s; }
.wu-ico svg, .wu-ico img { width:26px; height:26px; }
/* Kafle trzech kursów noszą plakietkę z `wu_ico_kurs()` — pełnokolorową, nie konturową
   (ta sama co na /kurs-google-ad-grants i w panelu klienta). Ramka, tło i pomarańczowy
   :hover zostają TAKIE SAME jak przy pozostałych kaflach (Oskar 16.10.2026); plakietka
   nie ma już własnego prostokąta, więc nic się nie dubluje. Jedyna różnica to rozmiar —
   przy 26 px rysunek gubił szczegóły. Kafle kursów stoją w swoim własnym rzędzie, więc
   większy znak niczemu tam nie przeszkadza.

   ZNAK PING.NGO ZOSTAJE PRZY 26 px, czyli tyle co sąsiedzi (Oskar 16.10.2026: „trzeba
   przywrócić logo PING.NGO albo zmienić inne, żeby bardziej do niego pasowały"). Powód
   jest inny niż przy kursach: PING siedzi w JEDNYM rzędzie z konturowymi ikonami Ad Grants
   i social mediów, a znak na 34 px był tam jedynym wielkim elementem i rozbijał rytm.
   Sam `viewBox` zostaje przycięty, więc logo wypełnia pole tak samo jak ikony obok. */
.wu-ico.wu-ico-kurs svg { width:34px; height:34px; }

/* ── ZNAK OŻYWA PO NAJECHANIU NA KAFEL (Oskar 17.10.2026: „może każdą jakoś lekko
   zanimujesz po najechaniu?") ──────────────────────────────────────────────────────
   Dwie warstwy ruchu, obie krótkie i obie BEZ przesuwania czegokolwiek obok:
   1) cały znak dostaje delikatne powiększenie — jedna reguła dla wszystkich kafli,
   2) jeden element w środku robi coś swojego: kropka odjeżdża wzdłuż ramienia, glob się
      obraca, klapka koperty podnosi się, kafelek pakietu dosuwa się do reszty.
   Elementy do ruszania noszą klasy `an-*` wprost w SVG (`wu_ico_marka()`), bo to jedyny
   sposób, żeby trafić w POJEDYNCZY kształt wewnątrz wklejonego znaku.
   `transform-box:fill-box` jest obowiązkowe: bez niego `transform-origin:center` liczy
   się od początku układu SVG, nie od środka kształtu, i zamiast obrotu w miejscu
   dostajemy odlot w bok. */
.wu-ico svg, .wu-ico svg [class^="an-"] { transition:transform .25s cubic-bezier(.4,.6,.3,1); }
.wu-ico svg [class^="an-"] { transform-box:fill-box; transform-origin:center; }
.wu-card:hover .wu-ico svg { transform:scale(1.06); }
/* Kropka PING-a i Ad Grants PULSUJE W MIEJSCU, a nie odjeżdża (Oskar 17.10.2026: „w ping
   po animacji kulka musi być na końcu"). Przesunięcie odrywało ją od zakończenia ramienia
   — ramię stoi w miejscu, więc kropka zostawała w powietrzu obok. */
.wu-card:hover .an-kropka,
.wu-card:hover .an-kropka-ag { transform:scale(1.32); }
.wu-card:hover .an-kursor    { transform:scale(1.28); }               /* kropka w pasku adresu */
.wu-card:hover .an-adres     { transform:scaleX(1.12); }              /* wpisany adres */
.wu-card:hover .an-kropki    { transform:translateX(3px); }           /* pasek przeglądarki */
.wu-card:hover .an-dioda     { transform:translateX(4px); }           /* diody serwerów */
.wu-card:hover .an-dioda2    { transform:translateX(-4px); }
.wu-card:hover .an-klapka    { transform:translateY(-3px) scaleY(.82); } /* koperta się otwiera */
.wu-card:hover .an-okruchy   { transform:rotate(-14deg); }            /* okruchy w ciastku */
.wu-card:hover .an-kafelek   { transform:translate(-3px,-3px); }      /* kafelek pakietu */
.wu-card:hover .an-wezel     { transform:translateY(-4px); }          /* węzeł social */
.wu-card:hover .an-daszek    { transform:translateY(-2.5px); }        /* daszek na ekranie kursu */
/* Znak bez `an-*` i tak dostaje powiększenie z reguły wyżej — nic nie trzeba dopisywać. */
@media (prefers-reduced-motion:reduce){
  .wu-ico svg, .wu-ico svg [class^="an-"] { transition:none; }
  .wu-card:hover .wu-ico svg, .wu-card:hover .wu-ico svg [class^="an-"] { transform:none; }
}
/* Po najechaniu kafelek znaku dostaje POMARAŃCZOWĄ OBWÓDKĘ I ZNAK — bez wypełnienia
   (Oskar 18.10.2026: „nie podoba mi się, że ikony są wypełniane tym pomarańczowym tłem,
   może ładniej będzie bez tego efektu? tylko animacja + obwódka pomarańczowa").
   Jasnopomarańczowa plama pod rysunkiem zabierała mu kontrast, a ruch znaku — czyli to,
   co ma przyciągać wzrok — ginął w kolorze. Zostaje obwódka, kolor znaku i animacja. */
.wu-card:hover .wu-ico { background:var(--surface); border-color:var(--accent);
  color:var(--accent-fg); box-shadow:none; }
/* Znak PING jest dwukolorowy i wypełniony (nie na obrysie jak reszta ikon), więc żeby
   po najechaniu też robił się pomarańczowy, przefarbowujemy mu wprost `fill`. */
.ping-mark path, .ping-mark circle { transition:fill .16s; }
.wu-card:hover .ping-mark path, .wu-card:hover .ping-mark circle { fill:var(--accent); }
.wu-card h3 { font-size:1rem; font-weight:600; color:var(--navy); margin:0 0 3px;
  letter-spacing:-.01em; transition:color .18s; }
.wu-card .wu-price { font-size:.82rem; font-weight:600; color:var(--accent-fg); }
.wu-card p { font-size:.87rem; line-height:1.55; color:var(--fg-secondary); margin:0;
  transition:color .18s; }

/* „Cześć!" — wizytówka Oskara na tle smug, jak na starej stronie */
/* Wyraźny, odcięty blok — NIE gradient (Oskar 8.09: „Cześć miało lepsze tło wcześniej,
   niech będzie tak jak było, z tymi konkretnymi podziałami"). Wygaszanie krawędzi zostaje
   dla zwykłych sekcji; ta i sekcja z ofertą mają się właśnie wyróżniać. */
/* „Cześć!" wtapia się w białych sąsiadów tak jak pasek CTA na dole, zamiast odcinać się
   kreską (Oskar 9.09). Sekcja pod spodem (blog) startuje bielą i sama schodzi do koloru tła,
   więc przejście prowadzi do koloru, który ona naprawdę ma. */
.wu-hi { position:relative; overflow:hidden; padding:78px 0;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 150px,
                                     var(--bg) calc(100% - 150px), var(--surface) 100%); }
/* Welon nad plamami MUSI wygasać tak samo jak tło. Wcześniej leżał płasko na całej sekcji,
   więc na samej górze — gdzie tło jest jeszcze białe — dokładał półprzezroczysty błękit
   i to ON rysował kreskę na styku, nie gradient (Oskar 9.09: „Cześć zaczyna się linią"). */
.wu-hi::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(241,245,251,0) 0%, rgba(241,245,251,.5) 150px,
                                     rgba(241,245,251,.5) var(--tlo-koniec), rgba(241,245,251,0) 100%); }
.wu-hi .section-inner { position:relative; z-index:2; }
/* Plamy wygaszane razem z tłem — bez tego same ucinałyby się na krawędzi sekcji. */
.wu-hi .wu-bg { transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 var(--tlo-koniec), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 var(--tlo-koniec), transparent 100%); }
/* ── Pas „Cześć!" + blog: JEDNO tło i JEDEN komplet plam na dwie sekcje ────────
   Dwa podejścia, oba z 22.09. Najpierw był BIAŁY PAS między sekcjami: „Cześć!"
   wygaszało się na dole do bieli, a blog startował bielą i dopiero na 20% wysokości
   dochodził do błękitu („widać białe pomiędzy"). Sam błękit ciągiem to jednak za mało
   — dalej było widać miejsce, w którym kończy się dekoracja jednej sekcji, a zaczyna
   płaski błękit drugiej („nie podoba mi się to łączące").
   Dlatego obie sekcje wchodzą do WSPÓLNEGO PASA: tło, welon i plamy maluje wyłącznie
   on, a sekcje w środku są przezroczyste i wnoszą samą treść. Plamy gasną dopiero przy
   końcu pasa, więc kolor przechodzi przez styk bez zatrzymania.
   Wyjście z błękitu do bieli robi dalej `.wu-sec.tlo + .wu-sec` („Zaufali nam"). */
.wu-pas { position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 150px, var(--bg) 100%); }
.wu-pas::before { content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(241,245,251,0) 0%, rgba(241,245,251,.5) 150px,
                                     rgba(241,245,251,.5) 100%); }
.wu-pas > .wu-bg { transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 62%, transparent 97%);
          mask-image:linear-gradient(180deg, transparent 0, #000 150px, #000 62%, transparent 97%); }
/* Sekcje w środku pasa: bez własnego tła, welonu i przycinania — to wszystko robi pas. */
.wu-pas .wu-hi { position:relative; z-index:2; background:none; overflow:visible; padding-bottom:40px; }
.wu-pas .wu-hi::before { content:none; }
.wu-pas .wu-sec.tlo { position:relative; z-index:2; background:none; padding-top:52px; }
.wu-hi-grid { position:relative; display:grid; gap:0; grid-template-columns:290px 1fr;
  align-items:center; max-width:880px; margin:0 auto; }
.wu-vcard { background:var(--navy); border-radius:var(--r-xl); padding:30px 24px; text-align:center;
  color:#fff; box-shadow:var(--shadow-lg); position:relative; z-index:2; }
.wu-vcard img { width:150px; height:150px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 16px; }
.wu-vcard b { display:block; font-size:1.15rem; font-weight:600; line-height:1.3; letter-spacing:.02em; }
.wu-vcard span { display:block; margin-top:8px; padding-top:12px; border-top:1px solid rgba(255,255,255,.18);
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.wu-hi-body { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:34px 34px 34px 60px; margin-left:-36px; }
.wu-hi-body h2 { font-size:1.9rem; font-weight:600; color:var(--navy); margin:0 0 4px; letter-spacing:-.02em; }
.wu-hi-body .wu-hi-lead { font-size:.98rem; color:var(--fg-secondary); margin:0 0 18px; }
.wu-hi-body ul { margin:0 0 20px; padding-left:20px; }
.wu-hi-body li { font-size:.94rem; line-height:1.65; color:var(--fg-secondary); margin-bottom:6px; }
@media (max-width:820px){
  /* JEDNA karta zamiast granatowego kwadratu nad białą (Oskar 7.09) — na telefonie
     dwa kafle jeden na drugim zajmowały cały ekran, a zdjęcie było większe niż tekst.
     Teraz zdjęcie i nazwisko są nagłówkiem tej samej karty. */
  .wu-hi-grid { grid-template-columns:1fr; gap:0; max-width:460px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
    box-shadow:var(--shadow-lg); overflow:hidden; }
  /* SIATKA, nie flex: zdjęcie w pierwszej kolumnie przez oba wiersze, a nazwisko
     i funkcja JEDNO POD DRUGIM w drugiej. Przy flexie „Oskar Sznajder" i
     „Współzałożyciel" stawały obok siebie i rozjeżdżały kartę (Oskar 7.09). */
  .wu-vcard { max-width:none; margin:0; background:none; box-shadow:none; color:var(--navy);
    display:grid; grid-template-columns:62px 1fr; column-gap:14px; align-content:center;
    text-align:left; padding:20px 22px 0; border-radius:0; }
  .wu-vcard img { width:62px; height:62px; margin:0; grid-row:1 / span 2; align-self:center; }
  /* `<br>` ZOSTAJE — po jego ukryciu „OSKAR" i „SZNAJDER" sklejały się w jedno słowo. */
  .wu-vcard b { grid-column:2; align-self:end; font-size:1rem; letter-spacing:0; line-height:1.25; }
  .wu-vcard span { grid-column:2; align-self:start; margin:3px 0 0; padding:0; border:0; opacity:.7; }
  .wu-hi-body { margin:0; padding:14px 22px 26px; background:none; border:0;
    border-radius:0; box-shadow:none; }
}

/* zaufali nam — spokojna siatka logotypów zamiast przewijanego paska */
.wu-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:34px 44px; max-width:1000px; margin:0 auto; }
/* mix-blend-mode zamiast samej przezroczystości: część logotypów ma wtopione białe
   albo szare tło i przy niskiej opacity wychodziły z tego szare plamy. */
/* Kolorowe, tak jak na starej webup.pl — w skali szarości połowa znaków traciła
   rozpoznawalność (Erasmus+, Radio Gdańsk, FRSE żyją kolorem). */
.wu-logos img { max-width:130px; max-height:62px; width:auto; height:auto;
  mix-blend-mode:multiply; transition:transform .18s; }
.wu-logos img:hover { transform:scale(1.06); }

/* Kafle wpisów żyją wyżej w bloku „KAFLE ARTYKUŁÓW" — tu był wariant
   z gradientową płytką, wycofany 10.08 na rzecz jednego wyglądu. */

/* przycisk „obrysowany" — na starej stronie sąsiadował z pełnym pomarańczowym */
/* Obwodka i tekst w JEDNYM kolorze — wczesniej ramka byla #FF6F00, a napis ciemniejszy
   #B34D00 i przycisk wygladal na niedokonczony. */
.wu-btn-outline { display:inline-flex; align-items:center; gap:7px; padding:12px 26px;
  border:1.5px solid var(--navy); border-radius:999px; color:var(--navy);
  font-weight:600; font-size:.95rem; text-decoration:none; background:transparent; transition:.16s; }
.wu-btn-outline:hover { background:var(--navy); border-color:var(--navy); color:#fff; }

/* Nagłówek wpisu na tle smug. UWAGA na specyficzność: `.wu-hero h1` i `.wu-hero p`
   są (0,1,1) i stoją w pliku NIŻEJ niż `.bl-head h1` / `.bl-lead`, więc wygrywały —
   tytuł szedł w rozmiarze hero landingu (58 px), a lid dostawał max-width:520px
   i łamał się węziej niż sam tekst artykułu. Stąd te selektory z dwiema klasami.
   Waga 300 (jak w nagłówkach sekcji) dawała tytuł cienki i wyblakły — tekst
   potrzebuje zdecydowanego tytułu, więc 700. */
.bl-head.wu-hero h1 { font-weight:700; font-size:clamp(1.8rem,3.4vw,2.4rem); }
.bl-head .bl-lead { max-width:660px; font-size:1.14rem; }
.bl-head.wu-hero h1 b, .bl-head.wu-hero h1 strong { font-weight:600; }
/* MOCNIEJSZY WELON NIŻ W EKRANIE POWITALNYM LANDINGU (.34 → .52). Nagłówek wpisu jest
   niski, więc plamy przechodzą dokładnie przez wiersz z autorem i datą — a to tekst
   wyszeptany (12,8 px, `--fg-muted`), który na pełnym pomarańczu przestaje być czytelny.
   Reguła stała tu wcześniej jako `opacity:.5`, czyli welon SŁABSZY (17% zamiast 34%) —
   miało to sens, dopóki nagłówek nie miał plam w ogóle. */
.bl-head.wu-hero::before { opacity:1; background:rgba(255,255,255,.52); }
.bl-head .bl-byline { border-bottom:0; }
/* Treść wpisu nie może zaczynać się tuż pod krawędzią nagłówka — bez tego pierwszy akapit
   dokleja się do bylinu i wygląda jak jego dalszy ciąg. */
.bl-article > .section-inner { padding-top:30px; }
/* WYŚCIÓŁKA NAGŁÓWKA WPISU. `.wu-hero` podciąga się pod pasek (`margin-top:-73px`,
   na telefonie -59), więc własny `padding-top` MUSI tę wysokość oddać — inaczej tytuł
   wchodzi pod menu. Mniej niż w ekranie powitalnym landingu (96 px): nad artykułem
   ma być nagłówek, a nie pół ekranu powietrza. */
.bl-head.wu-hero { padding:calc(54px + 73px) 0 26px; }
@media (max-width:760px){ .bl-head.wu-hero { padding:calc(28px + 59px) 0 20px; } }


/* Wyłączenie ruchu dla osób, które o to proszą w ustawieniach systemu. */
@media (prefers-reduced-motion:reduce){ .wu-blob { animation:none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   NOWOCZESNE PODSTAWY (2026) — rzeczy, które dziś są standardem, a nie ozdobą.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Formularze i kontrolki dziedziczą jasny motyw zamiast systemowego ciemnego. */
:root { color-scheme: light; }

/* Łamanie tekstu: `balance` wyrównuje długość wierszy w nagłówkach (koniec z jednym
   sierotą w drugiej linii), `pretty` pilnuje, żeby akapit nie kończył się sierotą. */
h1, h2, h3, .wu-h2, .bl-card h3, .wu-card h3 { text-wrap: balance; }
p, .wu-sub, .bl-lead { text-wrap: pretty; }

/* Widoczny fokus TYLKO dla klawiatury — mysz go nie wywołuje, więc nic nie „miga",
   a osoba nawigująca tabem zawsze wie, gdzie jest. Bez tego strona jest nieobsługiwalna
   z klawiatury, mimo że wygląda dobrze. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Płynne przewijanie do kotwic — wyłączone dla osób wrażliwych na ruch. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Nagłówek jest przyklejony, więc kotwica musi zatrzymać się NIŻEJ, inaczej tytuł
   sekcji chowa się pod nawigacją. */
[id] { scroll-margin-top: 88px; }

/* Świadomie BEZ `content-visibility: auto` na sekcjach. Kusi (przeglądarka pomija
   malowanie tego, co poza ekranem), ale przy sekcjach o różnej wysokości zastępcza
   `contain-intrinsic-size` rozjeżdża pasek przewijania i psuje wydruk oraz Ctrl+F.
   Ta strona ma kilkanaście sekcji, więc zysk byłby żaden, a ryzyko realne. */

/* Obrazy nigdy nie wychodzą poza swój kontener i nie generują przesunięć układu. */
img { max-width: 100%; height: auto; }

/* Cel dotknięcia min. 44 px w nawigacji i stopce — wymóg dostępności na telefonie. */
.nav-link, .footer-col a, .fb-legal a { min-height: 44px; display: flex; align-items: center; }
.footer-col a { display: block; min-height: 0; padding: 9px 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ── nawigacja z podmenu ────────────────────────────────────────────────────
   Bez <details>: przeglądarka ukrywa jego zawartość na poziomie renderowania, więc
   `display:block` przy :hover nic nie dawało — zmieniała się tylko strzałka.
   :hover obsługuje mysz, :focus-within klawiaturę. Zero JS. */
.nav-menu { position:relative; display:flex; align-items:center; }
/* Trigger podmenu to <button>, więc trzeba mu zdjąć wygląd przycisku przeglądarki,
   ale NIE tło — pastylkę dostaje z .nav-link tak samo jak zwykłe odnośniki. */
.nav-menu > .nav-link { font:inherit; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; }
/* Obwódka fokusu zostaje dla klawiatury, znika po dotknięciu/kliknięciu — inaczej po
   rozwinięciu sekcji na telefonie wiersz zostaje w granatowej ramce. */
.nav-menu > .nav-link:focus:not(:focus-visible) { outline:none; }
.nav-menu > .nav-link::after { content:""; width:5px; height:5px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .18s; }
.nav-menu:hover > .nav-link::after, .nav-menu:focus-within > .nav-link::after {
  transform:rotate(225deg) translateY(-2px); }
.nav-drop { position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  /* Szerokość liczy się z treści, nie z liczby wpisanej na sztywno (Oskar 16.10.2026:
     „niech będzie tak szeroki jak najdłuższy opis"). `max-content` dopasowuje każde
     podmenu OSOBNO do jego własnego najdłuższego wiersza, więc Infrastruktura wychodzi
     węższa od Marketingu i żaden opis się nie łamie. Sufit na wypadek długiego tekstu
     w przyszłości; dwa `@media` niżej wracają do `width:auto`, bo tam lista jest
     rozciągnięta na całą szerokość ekranu. */
  width:max-content; max-width:min(92vw, 460px);
  min-width:240px; padding:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg); z-index:60;
  opacity:0; visibility:hidden; transition:opacity .16s, transform .16s, visibility .16s; }
.nav-menu:hover > .nav-drop, .nav-menu:focus-within > .nav-drop, .nav-menu.open > .nav-drop {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
/* Niewidoczny pas łączy przycisk z listą — bez niego kursor „gubi” menu w przerwie. */
.nav-drop::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-drop a { display:block; padding:9px 12px; border-radius:var(--r); text-decoration:none; transition:.14s; }
/* Ta sama reakcja co na kafelkach usług: delikatne tło + pomarańczowa nazwa. */
.nav-drop a:hover { background:var(--border-soft); }
.nav-drop a:hover b { color:var(--accent-fg); }
.nav-drop b { display:block; font-size:.92rem; font-weight:600; color:var(--navy); }
.nav-drop span { display:block; font-size:.8rem; line-height:1.45; color:var(--fg-muted); margin-top:1px; }

/* ── prawa strona paska ──
   Pasek jest przezroczysty i leży na ruchomym tle, więc sam kolor tekstu za mało się odcinał.
   Każda pozycja dostaje własną jasną pastylkę, a po najechaniu wypełnia się granatem.
   Pomarańczowy hover wypadł: na pomarańczowej plamie tła był praktycznie niewidoczny.
   Pionowa kreska rozdzielająca też — przy pastylkach nie ma czego rozdzielać. */
.nav-right { gap:8px; }
/* Bez pastylek w stanie spoczynku: kontrast załatwia poświata na górze hero (.wu-hero::after),
   więc wystarczy czarny tekst o wyraźnej grubości. Pastylki były łataniem tła kolorem
   i robiły z paska rząd klocków. Granatowe wypełnienie zostaje na najechaniu. */
.nav-link { font-size:.95rem; font-weight:600; letter-spacing:-.005em; color:#0f1419;
  padding:9px 14px; border-radius:999px; background:transparent; border:1px solid transparent;
  transition:background .16s, color .16s, border-color .16s; }
/* NAJECHANIE = GRANATOWA PASTYLKA NA KAŻDEJ POZYCJI PASKA, tak samo na „O nas" i „Blogu",
   jak na „Infrastrukturze" i „Marketingu" (Oskar 18.10.2026: „może po najechaniu na
   infrastrukturę/marketing w menu też powinny mieć taką granatową obwódkę jak o-nas i blog?").
   Przez pół wieczoru kategorie miały sam pomarańczowy napis — wyglądało to tak, jakby
   połowa paska reagowała inaczej niż druga.

   OTWARTA KATEGORIA to CO INNEGO niż najechanie i zostaje przy samym pomarańczowym napisie:
   pod nią stoi biały panel podmenu, więc granatowa pastylka robiła tam tło na tle (to była
   pierwsza uwaga z tego samego wieczoru: „bez takiego tła w tle"). Na komputerze `.open`
   nadaje JS po kliknięciu, na telefonie po dotknięciu.

   W burgerze pastylki nie ma w ogóle — blok `max-width:430px` gasi tła we wszystkich
   stanach, bo na dotyku `:hover` zostaje na dotkniętej pozycji. */
.nav-link:hover, .nav-menu:hover > .nav-link, .nav-menu:focus-within > .nav-link {
  background:var(--navy); border-color:var(--navy); color:#fff; }
.nav-menu.open > .nav-link, .nav-menu.open:hover > .nav-link {
  background:transparent; border-color:transparent; color:var(--accent); }
.nav-sep { display:none; }
/* Panel klienta: czarny obrys i czarny napis, granatowe wypełnienie dopiero po najechaniu.
   Oba przyciski w pasku mają WYMUSZONĄ tę samą wysokość — obrys 1,5 px po jednej stronie
   i jego brak po drugiej dawały różnicę 3 px, którą widać, gdy stoją obok siebie. */
.nav-btn-ghost, .nav-cta { height:42px; box-sizing:border-box; display:inline-flex;
  align-items:center; justify-content:center; }
.nav-btn-ghost { padding:0 18px; border-radius:999px;
  border:1.5px solid #0f1419; background:transparent; color:#0f1419; font-size:.9rem;
  font-weight:600; text-decoration:none; transition:.15s; white-space:nowrap; }
.nav-btn-ghost:hover { background:var(--navy); border-color:var(--navy); color:#fff; }
.nav-cta { padding:0 18px; }

/* ── WYBÓR JĘZYKA W PASKU (`.lang-dd`) ───────────────────────────────────────────
   JEDNA definicja dla całego serwisu i dla obu domen produktowych (Oskar 18.10.2026:
   „miałeś scentralizować też na stronie głównej wybór języka" i „ujednolicić, zaraz
   będzie rozjazd"). smartcookie.io ma te same reguły w swoim arkuszu, bo tam powstały;
   ping.ngo bierze TEN plik jako kopię. Zmieniasz tutaj.
   Rozmiary w PIKSELACH, nie w `rem`: ping.ngo ma inną podstawę `rem` i ta sama wartość
   w `rem` dawała tam inną wielkość liter — stąd wrażenie, że przełącznik „wygląda inaczej".
   Pigułka stoi na KOŃCU paska, za przyciskami: język nie jest pozycją menu, tylko
   ustawieniem. Na telefonie przestawia go nad przyciski `order` w bloku 430 px. */
.lang-dd { position:relative; display:flex; align-items:center; }
.lang-dd > summary { display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px 5px 13px; border-radius:999px; font-size:13px; line-height:1.3;
  font-weight:600; letter-spacing:.02em; color:#fff; background:#1F2937; cursor:pointer;
  user-select:none; list-style:none; transition:background-color .15s; }
.lang-dd > summary::-webkit-details-marker { display:none; }
/* Po najechaniu pigułka języka robi się GRANATOWA — dokładnie tym samym kolorem co
   zakładki paska („Infrastruktura", „Marketing", „O nas", „Blog"), polecenie Oskara
   19.10.2026. Wcześniej jaśniała do szarości `#374151` i w jednym pasku były dwie różne
   reakcje na to samo najechanie. */
.lang-dd > summary:hover { background:var(--navy); }
.lang-dd > summary svg { transition:transform .15s; }
.lang-dd[open] > summary svg { transform:rotate(180deg); }
.lang-dd .lang-nazwa { display:none; }     /* pełna nazwa języka czeka na burgera */
.lang-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:70;
  min-width:148px; padding:5px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 10px 30px rgba(15,23,42,.14); }
.lang-menu a { display:block; padding:7px 11px; border-radius:8px; font-size:13px;
  line-height:1.3; font-weight:500; color:var(--fg-secondary); text-decoration:none; white-space:nowrap; }
.lang-menu a:hover { background:var(--bg); color:var(--navy); }
.lang-menu a.is-active { color:var(--navy); font-weight:700; }

/* ── BIAŁE POZYCJE NA PASKU LEŻĄCYM NA HERO (`.nav-over` = wu_nav) ──
   Tylko tam, gdzie pod paskiem jest ruchome tło. Landingi mają pasek na płaskim
   jasnym pasie i biel byłaby na nim nieczytelna przez cały czas.
   Cień jest OBOWIĄZKOWY, nie ozdobny: w części cyklu animacji jasna smuga wchodzi
   pod menu i tło dochodzi do czystej bieli — bez cienia napisy wtedy znikają
   (zmierzone: kontrast spadał do 1,0:1 przy wymaganych 4,5:1).
   Trzy stany MUSZĄ wrócić do ciemnego, bo mają pod sobą biel:
   pasek po przewinięciu (.stuck), rozwinięte menu na telefonie i hover. */
/* Biały tekst BEZ cienia — decyzja Oskara po obejrzeniu wariantu z poświatą.
   Zmierzone: przez część cyklu animacji pas pod menu dochodzi do 249/255, czyli
   kontrast 1,0:1 (wymagane 4,5:1) i napisy wtedy bledną. Zostawiam tak na jego
   wyraźne polecenie; wycofanie to zmiana koloru w tych czterech regułach niżej. */
.nav-over .nav-link, .nav-over .nav-btn-ghost { color:#fff; }
.nav-over .nav-btn-ghost { border-color:#fff; }
.nav-over.stuck .nav-link, .nav-over.stuck .nav-btn-ghost { color:#0f1419; }
.nav-over.stuck .nav-btn-ghost { border-color:#0f1419; }
/* Nad hero tak samo jak niżej: po najechaniu biały napis na granatowej pastylce (biel jest
   tam czytelna, bo leży na granacie), a otwarta kategoria — sam pomarańczowy napis; bez
   pastylki biel na białej smudze by znikała. */
.nav-over .nav-link:hover, .nav-over .nav-menu:hover > .nav-link,
.nav-over .nav-menu:focus-within > .nav-link { color:#fff; }
.nav-over .nav-menu.open > .nav-link, .nav-over .nav-menu.open:hover > .nav-link { color:var(--accent); }
/* Przycisk „Panel klienta" zostaje przyciskiem — wypełnia się granatem i ma biały napis. */
.nav-over .nav-btn-ghost:hover { color:#fff; }
/* Po najechaniu przycisk ma być JEDNOLICIE granatowy — biała obwódka z `.nav-over`
   zostawała na granacie jako obrys i przycisk wyglądał na niedokończony. */
.nav-over .nav-btn-ghost:hover { background:var(--navy); border-color:var(--navy); }

/* Pozycja, na której właśnie jesteśmy — POMARAŃCZOWA (Oskar 7.09.2026; wcześniej, od 10.08,
   był tu granat). DOKŁADNIE ten sam pomarańcz co w całym serwisie: jaśniejszy wariant na
   pasku nad hero czytał się jako inny, słabszy kolor. Czytelność na granatowej smudze
   podbijamy grubością, nie odcieniem. */
.nav-link.on, .nav-over.stuck .nav-link.on { color:var(--accent); font-weight:700; }
/* Nad hero pomarańcz siedzi na granatowo-niebieskiej smudze i wygląda źle (Oskar 7.09),
   więc tam bieżąca pozycja dostaje BIAŁĄ obwódkę — ten sam język co „Panel klienta"
   obok. Po przewinięciu pasek robi się jasny i wraca pomarańczowy napis. */
.nav-over:not(.stuck) .nav-link.on { background:#fff; border-color:#fff;
  color:var(--accent); font-weight:700; }
/* Sama obwódka robiła z pozycji przycisk — pastylka jest PEŁNA, biała, z pomarańczowym
   napisem. Po najechaniu NIC SIĘ NIE ZMIENIA: od 18.10.2026 żadna pozycja paska nie
   wypełnia się granatem, więc bieżąca też nie — zostaje biała pastylka z pomarańczowym
   napisem, a reszta pozycji dostaje po najechaniu sam pomarańczowy napis. */

@media (max-width:1000px){
  .nav-menu { position:static; }
  .nav-drop { left:0; right:0; transform:none; min-width:0; width:auto; max-width:none; }
  .nav-menu:hover > .nav-drop, .nav-menu:focus-within > .nav-drop, .nav-menu.open > .nav-drop { transform:none; }
  /* Wąski laptop (ok. 860–920 px): kolumna w `.wu-split` schodzi do ~408 px, a dwa przyciski
     w desktopowych paddingach mają 428 px razem i drugi spada pod pierwszy. Niżej, od 820 px,
     sekcja i tak jest jednokolumnowa i problem znika — więc ścieśniamy tylko tutaj. */
  .wu-split .hero-ctas .btn-primary, .wu-split .hero-ctas .wu-btn-outline { padding-inline:20px; }
}

/* ── sekcja dwukolumnowa na stronie głównej (SMART, Ad Grants) ──
   Same nagłówki z przyciskami czytały się jak przerywnik, nie jak oferta. */
.wu-split { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  max-width:980px; margin:6px auto 0; text-align:left; }
/* Dzieci gridu mają domyślnie `min-width:auto` i nie kurczą się poniżej swojej treści —
   makieta wyszukiwarki rozpychała kolumnę i cała sekcja wychodziła poza kontener. */
.wu-split > * { min-width:0; }
.wu-split.rev > *:first-child { order:2; }
.wu-split .price-feats { margin-bottom:24px; }
/* Kolumna obok stosu pakietu SMART mówi teraz akapitem, nie listą (Oskar 16.10.2026): punkty
   powtarzały zawartość stosu po lewej, więc czytelnik dostawał to samo dwa razy. */
.wu-split-copy > p { font-size:1.02rem; line-height:1.75; color:var(--fg-secondary); margin:0 0 16px; }
.wu-split-copy > p.smart-oszcz { color:var(--fg); margin-bottom:24px; }
.wu-split-copy > p.smart-oszcz b { color:var(--accent-fg); font-weight:700; }
.wu-split .hero-ctas { justify-content:flex-start; }
@media (max-width:860px){
  .wu-split { grid-template-columns:1fr; gap:30px; }
  .wu-split.rev > *:first-child { order:0; }
}


/* ── jeden kształt przycisku w całym serwisie ──
   btn-primary miał promień 10 px, a przyciski obok — pełną pigułkę; zestawione w parę
   wyglądały jak z dwóch różnych projektów. Wszystkie akcje mają teraz ten sam kształt. */
.btn-primary, .btn-ghost, .wu-btn-outline, .price-cta, .nav-cta, .fp-btn, .cta-inline a,
.bl-chip, .kw-preset { border-radius:999px; }
.btn-primary, .btn-ghost, .wu-btn-outline { padding:13px 28px; }

/* ── grupy usług na stronie głównej ── */
.wu-group { margin-bottom:34px; }
.wu-group:last-child { margin-bottom:0; }
.wu-group-t { display:block; text-align:center; font-size:.82rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  padding-bottom:16px; margin-bottom:30px; border-bottom:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════════════════
   TELEFON — przejrzane na 390 px. Układ desktopowy jest tu nieczytelny:
   nawigacja nie mieści się w jednej linii, wielkie nagłówki łamią się na sześć
   wierszy, a tło zasłania tekst.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  /* ── Przyciski akcji: smuklejsze, bez samotnej strzałki w drugiej linii (Oskar 11.09) ──
     Etykieta „Umów bezpłatną konsultację →" łamała się na dwa wiersze, przez co przycisk
     puchł z ~48 do 77 px i strzałka wisiała pod tekstem. Złożyły się na to dwie rzeczy:

     1. `.cta-strip > *:not(.wu-bg)` ścinał KAŻDE dziecko do miary akapitu
        (`min(800px, 100% - 96px)`), czyli 246 px na ekranie 390 px. Przycisk nie jest
        akapitem — inset liczony pod długość wiersza tekstu nie ma się do niego stosować.
     2. Przy 16 px i wyściółce 28 px po bokach etykieta i tak nie mieściła się w linii.

     Trzeci element leży poza CSS-em: spacja przed strzałką jest w źródłach TWARDA (U+00A0),
     więc nawet gdy etykieta się złamie, strzałka idzie razem z ostatnim słowem, a nie sama. */
  .cta-strip > .btn-primary, .cta-strip > .btn-ghost,
  .cta-strip > .wu-btn-outline, .cta-strip > .price-cta { max-width:none; }
  .btn-primary, .btn-ghost, .wu-btn-outline { padding:11px 20px; font-size:.95rem; gap:7px; }
  .price-cta { padding:11px 16px; }
}
/* Wąski telefon (iPhone SE/mini, 360–430 px). Przycisk w karcie cennika ma szerokość karty,
   a nie ekranu — przy .95 rem najdłuższe etykiety („Umów bezpłatną konsultację",
   „Zobacz wszystkie dokumenty i wzory") nadal nie mieściły się w linii. */
@media (max-width:430px){
  .btn-primary, .btn-ghost, .wu-btn-outline { font-size:.92rem; padding:11px 16px; }
  .price-cta { font-size:.9rem; padding:11px 13px; }

  /* Pasek zwinięty do jednego rzędu: logo + hamburger. Rozwijanie menu na płasko
     (każda pozycja w osobnym wierszu) dawało nawigację wysoką na 240–450 px,
     która spychała hero poniżej ekranu. */
  nav { flex-wrap:wrap; gap:8px 0; padding:10px 16px; }
  .nav-burger { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:38px; padding:9px 9px; border-radius:12px; cursor:pointer;
    border:1px solid var(--border); background:rgba(255,255,255,.75); }
  .nav-burger span { display:block; height:2px; background:var(--navy); border-radius:2px;
    transition:transform .2s, opacity .15s; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  /* Rozwinięte menu przykrywa tło, więc cały pasek dostaje własne — bez tego górna część
     paska zostawała przezroczysta (widać przez nią tło strony) i menu wyglądało dwukolorowo. */
  .nav-right { display:none; }
  nav:has(.nav-toggle:checked) { background:rgba(255,255,255,.97); backdrop-filter:blur(10px);
    border-bottom-color:var(--border-soft); }
  .nav-toggle:checked ~ .nav-right { width:100%; display:flex; flex-direction:column;
    align-items:stretch; gap:2px; padding:12px 0 6px; margin-top:8px;
    border-top:1px solid var(--border-soft); }
  /* Rozwinięte menu ma białe tło, więc białe napisy z `.nav-over` muszą tu zgasnąć. */
  /* Zwykłe pozycje („O nas", „Blog") też tracą promień pigułki — inaczej włoskowa
     kreska rozdzielająca wiersze wychodziła zaokrąglona i wyglądała jak obwódka. */
  .nav-link { font-size:.95rem; padding:7px 2px; border-radius:0; }
  .nav-over .nav-toggle:checked ~ .nav-right .nav-link,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-btn-ghost { color:#0f1419; }
  .nav-over .nav-toggle:checked ~ .nav-right .nav-btn-ghost { border-color:#0f1419; }
  .nav-sep { display:none; }
  .nav-btn-ghost, .nav-cta { width:100%; justify-content:center; text-align:center; margin-top:6px; }
  .nav-cta { font-size:.9rem; padding:11px 16px; }
  /* ── JĘZYK W BURGERZE: WIERSZ MENU NAD PRZYCISKAMI (Oskar 18.10.2026: „daj język nad
     przyciski"). W potoku stoi ostatni, bo na komputerze ma być na końcu paska — tutaj
     przestawia go `order`, więc jedno ustawienie nie psuje drugiego. Kolejność: wiersze
     menu (0), język (1), przyciski (2). Pod przyciskami pigułka wyglądała jak guzik
     doklejony za CTA, a w wierszu menu dwuliterowy skrót czyta się jak kod — stąd pełna
     nazwa języka i ta sama strzałka co przy „Infrastrukturze". */
  .nav-right .lang-dd { order:1; display:block; width:100%; position:static;
    border-bottom:1px solid var(--border-soft); }
  .nav-right .nav-btn-ghost, .nav-right .nav-cta { order:2; }
  .nav-right .lang-dd > summary { display:flex; width:100%; justify-content:space-between;
    align-items:center; padding:11px 2px; border-radius:0; background:none; box-shadow:none;
    font-size:.95rem; font-weight:600; letter-spacing:-.005em; color:#0f1419; }
  .nav-right .lang-dd .lang-kod { display:none; }
  .nav-right .lang-dd .lang-nazwa { display:inline; }
  .nav-right .lang-dd > summary svg { display:none; }
  .nav-right .lang-dd > summary::after { content:""; width:5px; height:5px; margin-right:6px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-1px); transition:transform .18s; }
  .nav-right .lang-dd[open] > summary::after { transform:rotate(225deg) translateY(-2px); }
  /* Ciemna pigułka języka należy do PASKA, nie do burgera. W rozwiniętym menu wiersz ma być
     płaski w każdym stanie — razem z `:hover`, który na dotyku zostaje (stąd granatowy pas
     pod „Polski" na ping.ngo). Selektory są dłuższe od tych ze `sc-style.css`, więc wygrywają
     niezależnie od kolejności wczytania arkuszy. */
  .nav-right .lang-dd[open] > summary { color:var(--accent); }
  .nav-right .lang-dd > summary:hover,
  .nav-right .lang-dd > summary:active,
  .nav-right .lang-dd[open] > summary:hover { background:none; box-shadow:none; }
  .nav-right .lang-dd .lang-menu a:hover,
  .nav-right .lang-dd .lang-menu a:active { background:none; }
  /* Lista języków wygląda DOKŁADNIE jak rozwinięta kategoria (`.nav-drop` wyżej). */
  .nav-right .lang-dd .lang-menu { position:static; min-width:0; box-shadow:none; border:0;
    border-left:2px solid var(--border-soft); border-radius:0;
    margin:0 0 6px 4px; padding:2px 0 2px 14px; }
  .nav-right .lang-dd .lang-menu a { padding:9px 6px; min-height:40px; display:flex;
    align-items:center; font-weight:500; color:var(--fg-secondary); }
  /* ── PODMENU NA TELEFONIE — jak na stronach klientów (Oskar 7.09) ───────────
     Wcześniej `.nav-menu` zostawało flexem z widoku na komputerze, więc lista usług
     wjeżdżała OBOK przycisku, a przycisk siedział w granatowej pastylce w połowie
     wysokości — wyglądało to na zepsute. Teraz jest to zwykła lista wierszy:
     nazwa sekcji po lewej, strzałka po prawej, dotknięcie rozwija wcięty spis.

     Zwinięte MUSI być `display:none`, a nie `visibility:hidden` — ukryty element
     w normalnym przepływie dalej rezerwuje wysokość i pasek rósł o ~450 px pustki. */
  .nav-menu { display:block; width:100%; position:static; }
  .nav-menu > .nav-link { display:flex; width:100%; justify-content:space-between;
    background:none !important; padding:11px 2px; border-radius:0; }
  /* KWADRATOWA RAMKA PO WYBORZE (Oskar 8.09) — to nie była obwódka fokusu, tylko
     `border-color` ze stanu :hover. Pozycja ma w spoczynku przezroczystą obwódkę 1 px
     i pełną pigułkę; w panelu na telefonie promień jest zerowy, a tło wyłączone przez
     `!important`, więc z granatowej pastylki zostawał sam prostokątny obrys. Na dotyku
     :hover DO TEGO nie schodzi po tapnięciu i ramka zostawała na stałe.
     Zdejmujemy ją we wszystkich stanach razem z podświetleniem tapnięcia. */
  .nav-link, .nav-drop a, .nav-menu > .nav-link { -webkit-tap-highlight-color:transparent; }
  .nav-toggle:checked ~ .nav-right .nav-link:hover,
  .nav-toggle:checked ~ .nav-right .nav-link:active,
  .nav-toggle:checked ~ .nav-right .nav-menu:hover > .nav-link,
  .nav-toggle:checked ~ .nav-right .nav-menu:focus-within > .nav-link,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-link:hover,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-menu:hover > .nav-link {
    background:none !important; border-color:transparent !important; }
  /* Strzałka po prawej krawędzi wiersza, obrót przy rozwinięciu. */
  .nav-menu > .nav-link::after { margin-right:6px; transform:rotate(45deg); transition:transform .18s; }
  .nav-menu:hover > .nav-link::after, .nav-menu:focus-within > .nav-link::after { transform:rotate(45deg); }
  .nav-menu.open > .nav-link::after { transform:rotate(225deg) translateY(-2px); }
  .nav-menu.open > .nav-link { color:var(--accent-fg) !important; }
  /* Rozwinięta kategoria = wcięty spis z włoskową kreską z boku. Szara kieszeń z promieniem
     była tu przez chwilę 18.10.2026 i wypadła tego samego wieczoru (Oskar: „ten widok
     rozsuniętego menu wyglądał wcześniej lepiej") — ciężka plama na białym panelu przykrywała
     rytm wierszy. Kreska wystarcza, żeby było widać, że to zawartość dotkniętego wiersza. */
  .nav-drop { display:none; position:static; transform:none; min-width:0; width:auto; max-width:none; box-shadow:none;
    border:0; border-left:2px solid var(--border-soft); border-radius:0;
    margin:0 0 6px 4px; padding:2px 0 2px 14px; animation:none;
    opacity:1; visibility:visible; }
  /* `.open` nadaje JS przy dotknieciu — `:focus-within` nie wystarcza, bo dotkniecie
     przycisku nie nadaje mu fokusu w Safari na iOS. Samego `:hover` na telefonie nie ma. */
  .nav-menu.open > .nav-drop { display:block; transform:none; }
  .nav-drop span { display:none; }          /* same nazwy usług, bez opisów */
  .nav-drop a { padding:9px 6px; min-height:40px; display:flex; align-items:center; }
  .nav-drop b { font-weight:500; color:var(--fg-secondary); }
  /* ⚠️ NA DOTYKU `:hover` ZOSTAJE na dotkniętym elemencie, dopóki nie dotkniesz czegoś
     innego — i to on malował bladoniebieską pastylkę pod pozycją podmenu (Oskar 18.10.2026:
     „dalej jest niebieskie tło przy wyborze, nie chcę ani tu, ani tu"). Na komputerze
     podświetlenie jest w porządku, bo znika razem z kursorem; w burgerze wygląda jak
     zaznaczenie, którego nikt nie zaznaczał. W menu na telefonie gasimy je we wszystkich
     stanach — wybraną pozycję i tak widać po kolorze napisu. */
  .nav-drop a:hover, .nav-drop a:active, .nav-drop a:focus { background:none; }
  /* Wiersze oddzielone włoskową kreską — bez niej spis usług zlewa się w jeden blok. */
  .nav-toggle:checked ~ .nav-right > .nav-menu,
  .nav-toggle:checked ~ .nav-right > .nav-link { border-bottom:1px solid var(--border-soft); }
  /* Panel nie może być dłuższy niż ekran — przy ośmiu usługach lista uciekała pod hero. */
  .nav-toggle:checked ~ .nav-right { max-height:calc(100vh - 64px); overflow-y:auto;
    -webkit-overflow-scrolling:touch; }
  /* Obwódka fokusu (3 px pomarańczu z odsunięciem) rysowała wokół rozwiniętego wiersza
     wielki prostokąt. Zostaje — jest potrzebna przy klawiaturze — ale w kształcie wiersza
     i do środka; do tego JS zdejmuje fokus zaraz po dotknięciu. */
  .nav-menu > .nav-link:focus-visible { outline-width:2px; outline-offset:-2px; border-radius:10px; }
  /* BIEŻĄCA POZYCJA: SAM POMARAŃCZOWY NAPIS, bez wypełnienia (Oskar 18.10.2026: „jak jestem
     na blogu, to jest tło pomarańczowe + czcionka; chcę tylko czcionkę"). Od 8.09 stała tu
     pełna jasnopomarańczowa pastylka — razem z przesunięciem wiersza o 12 px i zgaszoną
     kreską pod nim, więc jeden wiersz wypadał z rytmu całego spisu. Teraz różni go
     wyłącznie kolor i grubość napisu (700 bierze z `.nav-link.on` wyżej), dokładnie tak
     samo jak rozwiniętą sekcję. */
  .nav-toggle:checked ~ .nav-right .nav-link.on,
  .nav-over .nav-toggle:checked ~ .nav-right .nav-link.on,
  .nav-over:not(.stuck) .nav-toggle:checked ~ .nav-right .nav-link.on {
    background:none !important; border-color:transparent !important;
    color:var(--accent) !important; }

  /* Skrot `padding` MUSI uwzgledniac podciagniecie hero pod pasek (-59 px),
     inaczej nadtytul wchodzi pod logo. To bylo widac jako "hero mega wysoko". */
  .wu-hero { padding:calc(44px + 59px) 0 46px; }
  .wu-hero h1 { font-size:1.9rem; }
  .wu-hero p { font-size:1rem; }
  /* Tło pod tekstem musi zejść na drugi plan — na wąskim ekranie kolumna tekstu
     zajmuje całą szerokość i leżała wprost na pomarańczowej plamie. */
  .wu-hero::before { background:linear-gradient(180deg, rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 55%, rgba(255,255,255,.35) 100%); }
  .wu-bg { filter:blur(52px); opacity:.75; }

  .hero-ctas { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost, .hero-ctas .wu-btn-outline {
    width:100%; justify-content:center; text-align:center; }

  .wu-sec { padding:52px 0; }
  .wu-sec.tight { padding:38px 0; }
  .wu-h2 { font-size:1.6rem; }
  .wu-sub { font-size:.96rem; margin-bottom:28px; }
  .wu-cards { gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Na telefonie kafel ma TRZY wiersze (ikona, tytuł, opis), więc i `subgrid` obejmuje trzy —
     dzięki temu opisy w parze startują równo tak samo jak na komputerze. */
  .wu-cards > .wu-card { grid-row:span 3; }
  .wu-cards > .wu-card:last-child:nth-child(3n+1) { grid-column:auto; }
  /* ⚠️ SAMOTNY KAFEL W OSTATNIM RZĘDZIE IDZIE NA ŚRODEK (Oskar 23.10.2026, zrzut z telefonu
     z webup.us: „tę ikonę wyśrodkuj w drugim rzędzie"). Na pulpicie robi to reguła wyżej
     — na telefonie została wyłączona, bo tam siatka ma dwie kolumny, a nie trzy, i trzeba
     ją napisać od nowa z `nth-child(odd)`.
     Dotyczy grup o NIEPARZYSTEJ liczbie kafli; dziś jedyna taka to Marketing na angielskiej
     stronie głównej (Ad Grants, PING.NGO, kurs), bo polska ma w obu grupach po sześć.
     `:not(:first-child)` wyłącza grupę jednokafelkową — tam kafel ma zostać na pełnej
     szerokości, a nie skurczyć się do połowy. Szerokość liczona z `gap` tej siatki (10 px),
     żeby wyśrodkowany kafel był dokładnie tak szeroki jak sąsiedzi w rzędzie wyżej. */
  .wu-cards > .wu-card:last-child:nth-child(odd):not(:first-child) {
    grid-column:1 / -1; width:calc((100% - 10px) / 2); justify-self:center; }
  /* Na telefonie siatka i tak ma dwie kolumny, więc ograniczenie szerokości pary znika. */
  .wu-cards.wu-para { max-width:none; }
  /* Ikona nad tekstem, nie obok — przy szerokości ~170 px na tekst zostawało ~110 px
     i zdania łamały się po jednym słowie. */
  .wu-card { grid-template-columns:1fr; grid-template-rows:40px auto auto; gap:6px; padding:16px 14px; }
  .wu-card > .wu-ico { grid-column:1; grid-row:1; width:40px; height:40px; align-self:start; margin:0; }
  .wu-card > .wu-ico svg, .wu-card > .wu-ico img, .wu-card > .wu-ico .ping-mark { width:24px; height:24px; }
  .wu-card > h3 { grid-column:1; grid-row:2; font-size:.98rem; }
  .wu-card > p  { grid-column:1; grid-row:3; font-size:.85rem; line-height:1.5; margin-top:2px; }
  .wu-group { margin-bottom:34px; }

  /* pasek partnerów: dwa logotypy w rzędzie zamiast jednego pod drugim */
  /* Dwa logotypy w rzędzie: sztywna ramka 170 px z desktopu nie zmieściła dwóch obok siebie. */
  /* Trzy w rzędzie: przy dziewięciu znakach dwa w rzędzie dawały cztery rzędy
     i samotny dziewiąty na końcu. */
  /* JEDEN rząd, który jedzie SAM — jak taśma „Zaufali nam" (Oskar 7.09). Dziewięć
     logotypów łamało się na trzy wiersze i zjadało pół ekranu, a ręczne przewijanie
     w bok nikt nie odkrywa. Zestaw jest wypisany dwa razy, więc powrót na początek
     jest niewidoczny; ruch zatrzymuje się po dotknięciu. */
  .wu-partners-wrap { padding:16px 0 20px; overflow:hidden; }
  /* 42 s → 26 s (Oskar 23.10.2026: „czy na mobile te logotypy partnerów i mediów mogą trochę
     szybciej się ruszać?"). Przy 42 s jeden przejazd dziewięciu znaków trwał dłużej niż
     przeciętne spojrzenie na ten pas, więc taśma wyglądała na nieruchomą. */
  .wu-partners { flex-wrap:nowrap; justify-content:flex-start; width:max-content;
    gap:0; padding:0; animation:lwScroll 26s linear infinite; }
  .wu-partners:active { animation-play-state:paused; }
  .wp-track { display:flex; align-items:center; gap:26px; padding-right:26px; }
  .wp-dup { display:flex; }
  .wu-partners a { flex:0 0 auto; max-width:none; }
  .wu-partners img { height:28px; }
  /* Angielskie reguły z desktopu (gniazdo 150 px, wysokość 44 px) mają wyższą swoistość
     niż te wyżej, więc na telefonie trzeba je zdjąć wprost — inaczej taśma jedzie
     z logotypami wielkości desktopowych i przyciętymi do 150 px. Plakietki Google
     Partner i Meta są spiętrzone, więc dostają odrobinę więcej niż polskie 28 px. */
  .wu-partners.wp-en a { flex:0 0 auto; max-width:none; }
  .wu-partners.wp-en img { height:34px; }
  .wu-partners-head { margin-top:14px; }
  @media (prefers-reduced-motion:reduce){
    .wu-partners { animation:none; width:auto; overflow-x:auto; }
    .wp-dup { display:none; }
  }

  .wu-hi { padding:46px 0; }
  .wu-hi-body { padding:44px 20px 26px; }
  .wu-hi-body h2 { font-size:1.55rem; }

  .showcase-grid { grid-template-columns:1fr; }
  .wu-logos { gap:22px 16px; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }
  .wu-logos img { max-width:96px; max-height:40px; }
  .cta-strip h2 { font-size:1.5rem; }
  .ptab-wrap { border-radius:var(--r-lg); }
}
@media (max-width:420px){
  .wu-hero h1 { font-size:1.68rem; }
  .wu-h2 { font-size:1.42rem; }
  .wu-cards { grid-template-columns:minmax(0,1fr); }
  /* ⚠️ PONIŻEJ 420 px SIATKA MA JEDNĄ KOLUMNĘ, więc środkowanie samotnego kafla traci sens
     i wręcz szkodzi: zwężało go do połowy szerokości, gdy wszystkie inne stały na pełnej
     (zmierzone przy 390 px — dwa kafle po 350 px i trzeci po 170 px). Reguła ze środkowaniem
     zostaje więc tylko w paśmie 421–760 px, czyli tam, gdzie kolumny są dwie i samotny kafel
     naprawdę zostawia dziurę po prawej. */
  .wu-cards > .wu-card:last-child:nth-child(odd):not(:first-child) {
    grid-column:auto; width:auto; }
}

/* zakładka 1,5% — jeden szeroki zrzut zamiast kafla w siatce realizacji */
/* Ta sama szerokość co kafel realizacji — wcześniej zrzut zakładki 1,5% miał 560 px
   i stał pod realizacjami jako wyraźnie szerszy klocek. Kafle realizacji są elastyczne
   (3 w rzędzie, odstęp 22 px), więc przy szerokim ekranie liczymy dokładnie tę samą
   szerokość, a niżej wracamy do zwykłego ograniczenia. */
.opp-shot { max-width:360px; margin:8px auto 0; border:1px solid var(--border);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface); }
.opp-shot img { display:block; width:100%; height:auto; }
@media (min-width:1000px){ .opp-shot { max-width:calc((100% - 44px) / 3); } }
/* ── REALIZACJE JAKO PAS PRZESUWANY W POZIOMIE (Oskar 22.10.2026: „przykładowe realizacje
   daj 3 w rzędzie i niech przesuwa się w prawo, bardziej kompaktowo") ────────────────────
   Sześć kafli w zwijanej siatce brało dwa rzędy i prawie ekran wysokości. Kolumna jest
   odrobinę węższa niż jedna trzecia, więc czwarty kafel wystaje zza krawędzi — bez tego
   nic nie mówi czytelnikowi, że jest co przesuwać (ta sama sztuczka, co w karuzeli opinii,
   tylko bez strzałek: tu wystarczy palec albo kółko myszy).
   `scroll-snap` zatrzymuje pas na krawędzi kafla, żeby nie zostawał w pół obrazka. */

/* realizacje: mniejsze kafle, więcej w rzędzie (proporcja bez zmian) */
.showcase-grid > .showcase-item { flex:1 1 300px; max-width:360px; }
/* ── PAS REALIZACJI: TRZY KAFLE W KADRZE, RUSZANY STRZAŁKAMI ──
   ⚠️ SZEROKOŚĆ KOLUMNY MUSI BYĆ SZTYWNA, NIE `minmax(0, …)` (złapane 22.10.2026): `minmax`
   z minimum zero pozwala ścisnąć tor, więc przeglądarka upychała wszystkie kafle w szerokość
   sekcji i nie było czego przesuwać.
   ⚠️ `overflow-x:hidden` NA MYSZCE (Oskar 23.10.2026: „ten element można wewnątrz skrollować,
   a tego nie powinno być" + „mają być skrollowane w bok strzałkami"). `scrollBy()` ze skryptu
   działa mimo `hidden`, więc pasem rusza wyłącznie strzałka. Na ekranie dotykowym wraca `auto`,
   bo tam palec jest naturalną drogą, a strzałki trudne do trafienia. */
/* ⚠️ `overflow-y:hidden` JEST OBOWIĄZKOWE OBOK `overflow-x:hidden`, NIE JEST OZDOBĄ
   (Oskar 23.10.2026, trzecia uwaga o tym pasie: „realizacje są ok, ale są scrollowane
   w pionie! a tak nie może być", ze zrzutem z paskiem po prawej stronie kafli).
   Powód jest w samej specyfikacji CSS: gdy JEDNA oś dostaje `hidden`, druga nie może
   zostać `visible` — przeglądarka liczy ją jako `auto`. Pas zyskał więc pionowy pasek
   przewijania, a kilka pikseli zaokrągleń i cienia wystarczyło, żeby się pokazał
   i ucinał podpisy kafli (zmierzone: +5 px przy 1280, +10 px przy 900 i 620). */
/* ⚠️ `justify-content:start` JEST TU KONIECZNE, nie kosmetyczne. `.showcase-grid` wyżej to
   `display:flex` z `justify-content:center`, a pas nadpisuje tylko `display` — wyśrodkowanie
   zostawało. Na taśmie SZERSZEJ NIŻ OKNO centrowanie wypycha pierwsze karty na UJEMNE pozycje,
   a tam przewijanie nie sięga: `scrollLeft` zaczyna się od zera. Zmierzone 23.10.2026 przy
   1080 px okna: pierwsza karta miała `offsetLeft = −342`, czyli Fundacja Diuna nie była
   widoczna NIGDY, przy żadnej pozycji pasa — i to jest odpowiedź na pytanie Oskara z 23.10
   („tam chyba ich było więcej niż 4 wcześniej?"). Pięć kart było w kodzie, cztery na ekranie. */
.showcase-przesuw { display:grid; grid-auto-flow:column; grid-auto-columns:31.5%;
  justify-content:start; gap:16px; margin-top:28px; overflow-x:hidden; overflow-y:hidden;
  overscroll-behavior-x:contain; scroll-snap-type:x mandatory; }
/* ⚠️ PRZEWIJANIE PALCEM NIE MOŻE ZALEŻEĆ OD `@media (hover:none)` (Oskar 23.10.2026:
   „skrolowanie w bok stron www na mobile nie działa").
   Zapytanie o `hover` to HEURYSTYKA przeglądarki, nie fakt o urządzeniu: część Androidów
   i urządzeń hybrydowych raportuje `hover:hover`, a wtedy zostawało `overflow-x:hidden`
   i pas stał nieruchomo — strzałki działały, palec nie. Dlatego decyduje teraz klasa
   `wu-dotyk`, którą skrypt pasa nadaje po `ontouchstart`/`maxTouchPoints`, czyli po tym,
   czy urządzenie MA dotyk. Zapytanie medialne zostaje jako druga droga, gdyby skrypt
   nie wystartował. */
@media (hover:none){
  .showcase-przesuw { overflow-x:auto; overflow-y:hidden; padding-bottom:8px; }
}
.wu-dotyk .showcase-przesuw { overflow-x:auto; overflow-y:hidden; padding-bottom:8px;
  touch-action:pan-x pan-y; }
.showcase-przesuw > .showcase-item { flex:none; max-width:none; scroll-snap-align:start; }
/* Podpis ciaśniejszy — „bardziej kompaktowo" z 22.10 dalej obowiązuje. */
.showcase-przesuw .showcase-cap { padding:10px 13px 12px; }
.showcase-przesuw .showcase-cap b { font-size:.88rem; }
.showcase-przesuw .showcase-cap span { font-size:.78rem; line-height:1.45; }
@media (max-width:860px){ .showcase-przesuw { grid-auto-columns:46%; } }
@media (max-width:620px){ .showcase-przesuw { grid-auto-columns:84%; } }

/* Logo ma w pliku biały prostokąt — mnożenie usuwa go na dowolnym tle. */
.nav-logo img { mix-blend-mode:multiply; }

/* pasek dowodów doklejany przed stopką (wszystkie landingi) */
.proof-strip { padding:44px 0 10px; background:var(--surface); border-top:0; }
/* Pasek „Zaufali nam" jest biały. Gdy sekcja nad nim jest w kolorze tła, to PASEK wchodzi
   w biel gradientem — zgodnie z zasadą, że wygasza się ten, do którego się dochodzi. */
section:not(.alt):not(.wu-sec):not([data-tlo]) + .proof-strip,
section:not(.alt):not(.wu-sec):not([data-tlo]) + script + .proof-strip {
  background:linear-gradient(180deg, var(--bg) 0%, var(--surface) 160px); }
/* BIAŁA SEKCJA `.wu-sec` → SEKCJA W KOLORZE TŁA (Oskar 23.10.2026: „wszędzie gdzie jest takie
   »odcięcie« a nie fade dodaj"). Reguły wyżej wykluczają `.wu-sec` z obu stron, więc styk
   „Zaufali nam" (biały pas) z blokiem CTA pod nim był jedynym miejscem na landingach, gdzie
   biel przechodziła w tło kreską. `.tlo` wypada z reguły, bo taka sekcja KOŃCZY się już
   kolorem tła — nie ma czego wygaszać. */
.wu-sec:not(.tlo) + section:not(.alt):not(.wu-sec):not([data-tlo]),
.wu-sec:not(.tlo) + script + section:not(.alt):not(.wu-sec):not([data-tlo]) {
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 160px); }



/* ══ EKRANY POWITALNE — trzy nowe wizualizacje (Oskar 7.09: „obrazki w hero do zmiany") ══ */

/* ── STRONA WWW: DUŻE kafle — prawdziwe strony i prawdziwe funkcje ────────────
   Ten sam język, co ekran powitalny landingu social (`.hero-posts`): dwie kolumny
   sunące w przeciwne strony, bez ramki przeglądarki i bez welonu — treść jest
   bohaterem (Oskar 10.09: „większe, tak jak posty social media").
   Wcześniejsze podejścia upadły na tym, że pokazywały jedną stronę zmieniającą
   kolor i krój pisma — czyli rzeczy najmniej charakterystyczne (własne czcionki ma
   jeden tenant na 52). Tu widać naraz RÓŻNE organizacje i FUNKCJE, których nie ma
   żaden kreator: zapisy na zajęcia, umawianie wizyt z płatnością, formularz
   z dopasowaniem, 1,5%, blog z Facebooka, projekty. */
.wu-kafle { display:grid; grid-template-columns:1fr 1fr; gap:14px; height:540px; overflow:hidden;
  mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent); }
.kf-kol { display:flex; flex-direction:column; gap:14px; will-change:transform; }
.kf-kol.gora { animation:kfSun 46s linear infinite; }
.kf-kol.dol  { animation:kfSun 52s linear infinite reverse; }
.wu-kafle:hover .kf-kol { animation-play-state:paused; }
@keyframes kfSun { from { transform:translateY(0); } to { transform:translateY(-50%); } }
.kf { position:relative; display:block; flex:none; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.kf img { width:100%; height:auto; display:block; }
/* Kafel z funkcją dostaje podpis — bez niego „kalendarz zajęć" wygląda jak kolejna
   ładna strona, a chodzi o to, żeby było wiadomo, CO to robi i U KOGO działa. */
.kf-f { box-shadow:var(--shadow); }
.kf-opis { position:absolute; left:0; right:0; bottom:0; padding:16px 12px 9px;
  background:linear-gradient(to top, rgba(15,43,70,.92), rgba(15,43,70,.72) 55%, transparent);
  color:#fff; display:flex; flex-direction:column; gap:1px; }
.kf-opis b { font-size:.82rem; font-weight:700; line-height:1.25; }
.kf-opis i { font-style:normal; font-size:.7rem; opacity:.75; }
@media (prefers-reduced-motion:reduce){ .kf-kol { animation:none; } }
@media (max-width:1100px){ .wu-kafle { height:440px; } }

/* Makieta „@gmail.com → adres w domenie" STOI W SEKCJI, nie w ekranie powitalnym
   (Oskar 22.10.2026). W hero zostaje sam zestaw aplikacji, a ta zmiana jest wizualizacją
   nad listą „co zawiera Workspace". Szerokość i środek ustawiamy tutaj, bo w sekcji
   makieta nie ma już kolumny hero, która ją ograniczała. */

/* ── WORKSPACE: KARTA Z ZESTAWEM APLIKACJI W EKRANIE POWITALNYM ───────────────
   ⚠️ MAKIETA „adres PRZED i PO" (`.mock-mig`, `.mm-row`, `.mm-av`, `.mm-txt`, `.mm-arrow`,
   `.mm-price`) SKASOWANA 22.10.2026 — Oskar zdjął ją najpierw z ekranu powitalnego („niech
   zostaje tylko to, co zawiera Workspace"), a potem i z sekcji niżej („usuń tę wizualizację").
   Nie miała innego użytkownika. Przy okazji znika druga definicja `.mm-row`, która kolidowała
   z makietą monitoringu na `/hosting` (ta zeszła tego samego dnia).
   Zostaje sama karta — to samo pudełko, w którym stała makieta — bo trzyma zestaw aplikacji
   i plakietkę „do 2000 kont". */
.ws-karta { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); padding:24px 22px; }
/* Jedyna liczba w ekranie powitalnym: nie nasza cena, tylko to, ile organizacja dostaje
   od Google za darmo. Stąd zielona kwota i spokojny podpis pod nią. */
.ws-plakietka { margin-top:16px; padding-top:15px; border-top:1px dashed var(--border);
  display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; }
.ws-plakietka b { font-size:1.45rem; font-weight:800; color:var(--green); letter-spacing:-.02em; }
.ws-plakietka span { font-size:.83rem; color:var(--fg-secondary); }
/* ⚠️ RZĄD PASTYLEK `.mm-apps` ZDJĘTY 22.10.2026 — w jego miejsce wchodzą KAFLE aplikacji
   (Oskar: „miałeś dać jakąś fajną grafikę z tymi elementami do hero"). Pastylka z 18-pikselowym
   znakiem czytała się jak lista tagów: znak był za mały, by rozpoznać produkt, a nazwa stała
   z nim w jednej linii. Używał ich wyłącznie landing Workspace, więc reguły schodzą razem
   ze znacznikiem. Nie przywracaj — tę samą rolę gra teraz `.ws-kafle`. */
.ws-kafle { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.ws-kafle span { display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:11px 8px 10px; border-radius:var(--r); background:var(--bg);
  border:1px solid var(--border-soft); }
.ws-kafle img { width:30px; height:30px; object-fit:contain; display:block; }
.ws-kafle b { font-size:.8rem; font-weight:700; color:var(--navy); line-height:1.2; }
.ws-kafle em { font-style:normal; font-size:.7rem; line-height:1.3; color:var(--fg-muted); }
@media (max-width:620px){
  .ws-kafle { gap:6px; margin-top:13px; }
  .ws-kafle span { padding:9px 6px 8px; }
  .ws-kafle img { width:26px; height:26px; }
  .ws-kafle em { display:none; }
}

/* ── PING: raport tak, jak PRZYCHODZI — wiadomością na skrzynkę ───────────────
   Sam „fragment raportu" nie mówił, w jakiej formie klient to dostaje. */
.mock-mail { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); overflow:hidden; }
.mk-head { padding:13px 16px; border-bottom:1px solid var(--border-soft); background:var(--bg); }
.mk-from { display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--fg-muted); }
.mk-from i { width:24px; height:24px; border-radius:7px; background:var(--lp); color:#fff;
  display:grid; place-items:center; font-size:.68rem; font-weight:800; font-style:normal; }
.mk-subj { margin-top:7px; font-size:.95rem; font-weight:700; color:var(--navy); letter-spacing:-.01em; }
.mk-body { padding:16px; }
.mock-mail .mock-report { border:0; border-radius:0; box-shadow:none; background:transparent; }
.mock-mail .mr-score { padding-top:0; }

/* ── WEJŚCIE SEKCJI PRZY PRZEWIJANIU ─────────────────────────────────────────
   Klasę `wu-anim` nadaje <body> skrypt wu_reveal_js(). Ukrywamy WYŁĄCZNIE wewnątrz
   niej — bez JS-a treść jest widoczna od pierwszej klatki. Ruch jest celowo mały
   (10 px): ma dać rytm przewijaniu, a nie zwracać na siebie uwagę. */
/* Ukrywamy WYŁĄCZNIE to, co skrypt sam oznaczył `.wu-rv` — i co w związku z tym na pewno
   obserwuje. Poprzednia wersja wypisywała tu listę selektorów niezależnie od tej w JS
   i listy się rozjechały: CSS ukrywał KAŻDE `h2`, a obserwator dostawał tylko nagłówki
   sekcji, więc nagłówek paska CTA (`<div>`, nie `<section>`) zostawał biały na białym. */
body.wu-anim .wu-rv {
  opacity:0; transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.16,.8,.3,1), transform .5s cubic-bezier(.16,.8,.3,1);
}
body.wu-anim .wu-rv.wu-in { opacity:1; transform:none; }
/* ⚠️ W PASIE REALIZACJI WEJŚCIE JEST SAMYM PRZEJAŚNIENIEM, BEZ PRZESUNIĘCIA W PIONIE.
   Pas ma od 23.10.2026 `overflow-y:hidden` (żeby nie dało się go przewinąć w pionie —
   uwaga Oskara ze zrzutem), a kafel czekający na odsłonięcie stoi 10 px niżej przez
   `translateY(10px)` wyżej. Te 10 px wychodziło poza pas i było ucinane w trakcie
   wjazdu — zmierzone: dwa z pięciu kafli, dokładnie te poza oknem przewijania.
   Pas i tak ma własny ruch (strzałki), więc pionowy drobiazg niczego tu nie wnosił. */
body.wu-anim .showcase-przesuw .wu-rv { transform:none; }
@media (prefers-reduced-motion:reduce){
  body.wu-anim * { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Stos zawartości pakietu SMART (`.pk-*`) ───────────────────────────────────
   Używają go DWIE strony: hero na `/pakiet-smart` (z kwotą w `.pk-foot`) i sekcja
   SMART na stronie głównej (bez kwoty — Oskar 22.09: „zrób tak samo jak na zakładce
   /pakiet-smart, ale bez ceny"). Dlatego blok mieszka tutaj, a nie w `smart/style.css`.
   Kolor wiersza „nowość" bierze się z `--lp`: na `/pakiet-smart` indygo (theme-smart),
   na stronie głównej domyślna pomarańcz. */
.pk-stack {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:8px 8px 10px; box-shadow:var(--shadow-lg); text-align:left;
}
/* ⚠️ BEZ KRESKI POD POZYCJĄ (Oskar 22.10.2026: „w hero pakietu SMART każdy element ma taką
   ramkę wewnątrz, od spodu, np. pod Google Workspace dla Nonprofit — to usuń. Już to
   usuwaliśmy wcześniej"). To samo, co przy pomarańczowym tle wiersza 16.10: stos ma się czytać
   jako jedna lista, a nie jako pięć zamkniętych pudełek. Pozycje rozdziela sam odstęp. */
.pk-row {
  display:flex; align-items:flex-start; gap:11px;
  padding:11px 12px; border-radius:var(--r);
}
.pk-row > div { flex:1; min-width:0; }
.pk-row b { display:block; font-size:.92rem; font-weight:700; color:var(--navy); line-height:1.35; }
.pk-row span:not(.pk-ok) { display:block; font-size:.8rem; color:var(--fg-secondary); line-height:1.45; margin-top:2px; }
.pk-row i {
  flex-shrink:0; font-style:normal; font-size:.72rem; font-weight:700; color:var(--fg-muted);
  background:var(--bg); border-radius:999px; padding:3px 9px; white-space:nowrap; margin-top:1px;
}
.pk-ok {
  flex-shrink:0; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--green); color:#fff; font-size:.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
/* Nowość w pakiecie — zaznaczona SAMĄ PLAKIETKĄ „nowość", bez podświetlania wiersza.
   Pomarańczowe tło całego wiersza zdjęte 16.10.2026 (Oskar: „nie podoba mi się to tło
   pomarańczowe, może samo «nowość» wystarczy") — przy pięciu równorzędnych pozycjach jeden
   wiersz na kolorowym tle wyglądał jak wyróżniona oferta, a nie jak informacja „to jest nowe". */
.pk-row.pk-new i { background:var(--lp); color:#fff; }
.pk-foot {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:6px; padding:13px 12px 6px; border-top:1px solid var(--border);
}
.pk-foot span { font-size:.83rem; color:var(--fg-secondary); }
.pk-foot b { font-size:1.22rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; }

/* Na stronie głównej stos jest TREŚCIĄ sekcji, nie makietą w hero — dlatego własny
   wrapper zamiast `.hero-visual`, który na telefonie jest ukrywany razem z `.mock-note`.
   Etykieta „to dostajecie w pakiecie SMART" (`.smart-stos-et`) ZDJĘTA 16.10.2026 (Oskar):
   stała nad stosem, który i tak siedzi w sekcji zatytułowanej „Pakiet SMART", więc mówiła
   to samo drugi raz. Reguła usunięta razem ze znacznikiem — nic jej już nie używa. */
@media (max-width:760px){
  .pk-row i { display:none; }              /* etykiety „w cenie" nie mieszczą się obok treści */
  .pk-row.pk-new i { display:inline-block; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RAMKA „Wasza organizacja dziś" — personalizacja z `?d=<domena>` (includes/org-profile.php).
   Jedna sekcja na wszystkich landingach i na `/sprawdz`, dlatego styl siedzi tu, a nie
   w arkuszu pojedynczego landingu.

   Zasada wizualna: to NIE jest kolejna karta cenowa. Ma wyglądać jak notatka, którą ktoś
   zrobił o tej organizacji — jaśniejsze tło, bez obwódek krzyczących akcentem. Kwota, którą
   płacą dziś, stoi spokojnie; nasza odpowiedź jest wyróżniona kolorem marki.
   ───────────────────────────────────────────────────────────────────────────── */
.org-ramka { background:var(--bg); }
.org-ramka .org-pod { text-align:center; color:var(--fg-secondary); font-size:.95rem; margin:-4px 0 26px; }
.org-ramka .org-pod b { color:var(--fg); }

.org-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:14px; }
.org-poz {
  display:flex; flex-direction:column; gap:3px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--shadow-sm);
}
.org-tytul { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); }
.org-dzis { font-size:.97rem; color:var(--fg); font-weight:500; }
.org-kwota { font-size:1.34rem; font-weight:800; color:var(--fg); letter-spacing:-.02em; margin-top:4px; }
/* Podpis pod kwotą jest wymogiem, nie ozdobą: mówi, że to szacunek z cennika, a nie faktura. */
.org-zrodlo { font-size:.78rem; color:var(--fg-muted); line-height:1.35; }
.org-nasze { margin-top:9px; padding-top:9px; border-top:1px solid var(--border-soft);
  font-size:.88rem; color:var(--fg-secondary); line-height:1.45; }
.org-nasze i { font-style:normal; font-weight:700; color:var(--accent-fg); }
/* Zdanie „co znaczy ≈" pod siatką pozycji. Wchodzi tylko wtedy, gdy któraś kwota jest
   doszacowana z kwartyla, a nie odczytana z cennika dostawcy (`org_ramka_html()`). Na rynkach
   euro to KAŻDA kwota, więc bez tego zdania ramka obiecywała precyzję, której tam nie ma. */
.org-szac-nota { margin:12px auto 0; max-width:700px; font-size:.8rem; line-height:1.5;
  color:var(--fg-muted); }

.org-suma { margin-top:20px; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); padding:20px 22px; text-align:center; }
.org-suma-l { font-size:1.02rem; color:var(--fg-secondary); }
.org-suma-l b { color:var(--fg); }
.org-suma-p { margin-top:8px; font-size:1.02rem; color:var(--fg-secondary); }
.org-suma-p b { color:var(--fg); }
.org-wiecej { margin-top:12px; font-weight:600; }
/* Cena osobista (5.10.2026): blok z ofertą dostaje pomarańczową ramkę jak karta „featured",
   nagłówek „Cena dla …" i wyraźnie mniejszą linię o cenie publicznej — kotwica ma być
   widoczna, ale nie konkurować z kwotą dla organizacji. */
.org-oferta { border:2px solid var(--accent); box-shadow:0 12px 34px rgba(249,115,22,.13); }
.org-cena-h { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-fg); margin-bottom:8px; }
.org-cena-pub { font-size:.86rem; color:var(--fg-muted); }
.org-smart { margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft); }

/* ── DWIE KARTY PORÓWNAWCZE W RAMCE (landing SmartCookie, Oskar 5.10.2026) ──
   Po lewej sam baner zgód, po prawej cały rachunek kontra SMART. Układ celowo powtarza karty
   cennika niżej: ta sama para produktów, tylko na liczbach tej organizacji. Każda karta ma
   dwa piętra — szare „dziś" i białe „u nas" z pomarańczową ramką, bo to ono ma przyciągać oko.
   Sama lewa karta (firma, zagranica) nie rozciąga się na całą szerokość — `org-dwie-sama`. */
.org-dwie { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; text-align:left; }
.org-dwie-sama { grid-template-columns:minmax(0,520px); justify-content:center; }
/* Trzy rzędy: etykieta · „dziś" · „u nas". Środkowy bierze całą resztę wysokości, więc blok
   „u nas" siada przy dolnej krawędzi karty. */
.org-karta { display:grid; grid-template-rows:auto 1fr auto; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
/* …a `subgrid` dokłada resztę: obie karty dzielą te same trzy rzędy, więc POMARAŃCZOWE BLOKI
   SĄ RÓWNEJ WYSOKOŚCI i zaczynają się w tej samej linii (Oskar 5.10.2026), choć po prawej
   stoi nad nimi cała lista pozycji, a po lewej jedna kwota. Bez `subgrid` (stare przeglądarki)
   zostaje układ wyżej: bloki wyrównane do dołu, co też jest poprawne. */
@supports (grid-template-rows: subgrid) {
  .org-dwie { grid-template-rows:auto 1fr auto; }
  .org-karta { grid-row:span 3; grid-template-rows:subgrid; }
}
/* Nagłówek karty: ZDANIE, nie etykieta (Oskar 5.10.2026: „to nie jest u mnie czytelne").
   Stał tu styl kickera — 11,8 px, wersaliki, rozstrzelone litery i jasna szarość. Dla dwóch
   słów to działa, ale od chwili, gdy nagłówek niesie całe „Zgody cookies, tyle obecnie
   płacicie:", wersaliki w tym stopniu pisma czyta się litera po literze.
   Teraz: normalna wielkość liter, 0,95 rem i kolor kwoty pod spodem. */
.okk-tag { padding:14px 18px 0; font-size:.95rem; font-weight:700;
  text-transform:none; letter-spacing:0; line-height:1.35; color:var(--fg); }
/* Druga połowa nagłówka — „tyle obecnie płacicie:" — na czerwono (Oskar 5.10.2026).
   Ten sam czerwony co plakietka werdyktu, żeby na stronie był jeden kolor alarmu. */
.okk-tag b { color:#B91C1C; font-weight:800; }
.okk-dzis { padding:10px 18px 16px; }
/* Blok „u nas" wygląda jak wyróżniona karta z cennika na dole strony: pomarańczowa ramka,
   pigułka z etykietą zachodząca na krawędź i poświata. Na wierzchu stoi OSZCZĘDNOŚĆ, pod nią
   cena — bo to ona jest powodem, dla którego ktoś czyta tę ramkę (Oskar 5.10.2026). */
/* ⚠️ RAMKA SIADA PRZY DOLNEJ KRAWĘDZI KARTY, a nie rozciąga się na cały rząd (prośba czatu
   SmartCookie 22.10.2026, uwaga Oskara: „ramka «Ze SmartCookie zapłacicie» stoi za wysoko,
   pod przyciskiem zostaje dużo pustego miejsca"). Przy `subgrid` trzeci rząd ma wysokość
   wyższej z dwóch kart, a domyślne rozciąganie kazało krótszej ramce wypełnić go pustką
   WEWNĄTRZ pomarańczowego obrysu — czyli dokładnie pod przyciskiem. Teraz ramka ma wysokość
   swojej treści, a wolne miejsce zostaje NAD nią, poza obrysem. */
.org-karta > .okk-unas { align-self:end; }
.okk-unas { position:relative; margin:4px 12px 12px; padding:22px 18px 16px;
  background:var(--surface); border:2px solid var(--accent); border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(249,115,22,.14); }
.okk-flaga { position:absolute; top:-11px; left:16px; padding:3px 11px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
/* `.okk-eti` (osobny wiersz „Tyle obecnie płacicie" nad kwotą) zdjęte 5.10.2026 — ten podpis
   siedzi teraz w nagłówku karty, razem z jej tytułem. */
/* Werdykt wdrożenia nad nazwą narzędzia — mała czerwona plakietka z wykrzyknikiem, żeby „źle
   wdrożony" było widać od razu, a nie dopiero na końcu zdania pod spodem (Oskar 5.10.2026). */
.okk-zle { display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 6px; border-radius:999px;
  background:#FEE2E2; color:#B91C1C; font-size:.74rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; }
.okk-zle i { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:#DC2626; color:#fff;
  font-style:normal; font-size:.78rem; font-weight:900; line-height:1; }

/* Ostrzeżenie w ekranie powitalnym: miękka czerwona plakietka bez obramowania i bez belki
   z lewej. Próbowałem 5.10.2026 wariantu „karta alarmu" (belka, ramka, cień) — Oskar wybrał
   ten wcześniejszy, więc tamten jest cofnięty i nie wraca bez jego słowa.
   Odstęp NAD plakietką to 16 px, czyli tyle samo, ile dzieli nagłówek od opisu (`.hero-sub`):
   przyklejona do akapitu wyglądała jak jego dalszy ciąg, a to osobny komunikat. */
.hero-alert { display:inline-flex; align-items:flex-start; gap:8px; max-width:100%;
  margin:16px 0 22px; padding:10px 16px 10px 10px; border-radius:14px;
  background:#FEE2E2; color:#B91C1C; text-align:left; }
.ha-ico { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-top:2px; border-radius:50%;
  background:#DC2626; color:#fff; font-size:.78rem; font-weight:900; line-height:1; }
.ha-txt { font-size:.88rem; font-weight:600; line-height:1.4; }
.ha-txt b { font-weight:800; }
/* Nazwy skryptów siedzą W ŚRODKU zdania („Skrypty, m.in. Meta Pixel, uruchamiają się…",
   Oskar 6.10.2026), więc mają TĘ SAMĄ wagę co reszta. Wcześniej stały na końcu, po dwukropku,
   i lżejsza waga oddzielała wyliczenie od werdyktu; w środku zdania wyglądała jak usterka
   składu — zdanie rwało się w połowie i wracało. */
.ha-txt i { font-style:normal; }
.hero-alert b { font-weight:800; }
/* Nazwa narzędzia i znacznik werdyktu w JEDNYM wierszu (Oskar 5.10.2026) — na wąskim ekranie
   znacznik schodzi pod nazwę, bo zawijanie jest lepsze niż ścięta plakietka. */
.okk-nazwa { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  font-size:1.02rem; color:var(--fg); }
.okk-kwota { margin-top:2px; font-size:1.45rem; font-weight:800; letter-spacing:-.02em; color:var(--fg); }
/* `.okk-zrodlo` (podpis „według cennika X i kursu NBP z …") zdjęte 5.10.2026 razem z regułą,
   która je wypisywała — tylda przy kwocie mówi to samo krócej. Pełne źródła zostały na
   `/sprawdz`, gdzie noszą klasę `.org-zrodlo`. */
.okk-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:3px 0; font-size:.92rem; color:var(--fg-secondary); }
.okk-row b { color:var(--fg); font-weight:600; white-space:nowrap; }
/* Dostawca W NAWIASIE OBOK nazwy pozycji — „Zgody cookies (Cookiebot)" (Oskar 6.10.2026).
   Najpierw stał w osobnej linii pod nazwą; w nawiasie czyta się jak jedna pozycja rachunku,
   a nie jak dwa wiersze. Nazwa z nawiasem zawija się w obrębie swojej kolumny, więc nawet
   „Wtyczka cookies w WordPressie" nie rozpycha wiersza na kwotę. */
.okk-row > span i { font-style:normal; color:var(--fg-muted); }
.okk-suma { margin-top:6px; padding-top:7px; border-top:1px solid var(--border);
  font-weight:600; color:var(--fg); }
/* „nieznana" W MIEJSCU KWOTY — pozycja, którą organizacja ma, ale której ceny nie znamy
   (Oskar 6.10.2026). Lżejsza i mniejsza od kwot obok, bo to nie liczba: ma być widać, że wiersz
   należy do rachunku, a jednocześnie że nie wchodzi do sumy pod spodem. Kursywy NIE MA —
   w tych wierszach kursywa znaczy już „dostawca w nawiasie". */
.okk-row b.okk-nieznana, .sm2-row b.okk-nieznana {
  font-size:.86rem; font-weight:500; color:var(--fg-muted);
}
/* Nota pod sumą, obowiązkowa gdy jakaś pozycja jest „nieznana" — bez niej kolumna pokazuje
   więcej wierszy, niż obejmuje suma. Patrz `sm2_nieznana_nota` w `includes/org-profile.php`. */
.okk-nota, .sm2-nota { margin:8px 0 0; font-size:.8rem; line-height:1.45; color:var(--fg-muted); }
/* „Nie wiemy, ile płacicie dziś" — to nie jest przypis pod liczbami, tylko CAŁA treść karty,
   gdy rachunku organizacji nie znamy (zgłoszenie czatu SmartCookie 21.10.2026). Dlatego czyta
   się jak zdanie, a nie jak drobny druk: większy stopień, ciemniejszy kolor, bez marginesu
   od góry, bo nie ma nad czym stać. */
.okk-nieznany { margin:0; font-size:.88rem; line-height:1.6; color:var(--fg-secondary); }
/* Cena roczna i oszczędność OBOK SIEBIE, obie kwoty w jednym wierszu NA TEJ SAMEJ WYSOKOŚCI,
   a podpis „Zostaje Wam" pod kwotą (Oskar 5.10.2026). Kreska między kolumnami robi za znak „=",
   bez wypisywania działania. */
.okk-para { display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.okk-zysk { padding-left:14px; border-left:1px solid var(--border); }
.okk-zysk b { display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.03em;
  color:#15803D; line-height:1.2; }
.okk-zysk span { display:block; margin-top:1px; font-size:.84rem; line-height:1.35; color:var(--fg-secondary); }
.okk-cena { font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:var(--fg); line-height:1.2; }
/* „/rok" przy oszczędności wygląda dokładnie tak samo jak przy cenie obok — ta sama jednostka
   zapisana tak samo, żeby dwie liczby dało się porównać jednym spojrzeniem. */
.okk-cena i, .okk-zysk b i { margin-left:2px; font-size:.78rem; font-weight:500; font-style:normal; color:var(--fg-muted); }
/* Na telefonie obie kwoty i tak mają stać OBOK SIEBIE, więc zamiast przenosić oszczędność pod
   cenę — zmniejszamy jedno i drugie ORAZ oddajemy parze margines bloku. Zmierzone przy 390 px:
   przed zmianą para miała 236 px, a cena + przerwa + oszczędność zajmowały 242 — brakowało
   sześciu pikseli, czyli dokładnie tyle, ile zjadało wewnętrzne wcięcie pomarańczowej karty. */
@media (max-width:480px) {
  .okk-unas { margin-left:6px; margin-right:6px; padding-left:12px; padding-right:12px; }
  .okk-para { gap:10px; }
  .okk-cena, .okk-zysk b { font-size:1.3rem; }
  .okk-zysk { padding-left:10px; }
  .okk-zysk span { font-size:.78rem; }
}
/* Najwęższe telefony w użyciu (360 px): jeszcze jeden krok w dół, żeby para dalej stała w wierszu. */
@media (max-width:400px) {
  .okk-unas { margin-left:4px; margin-right:4px; padding-left:10px; padding-right:10px; }
  .okk-para { gap:8px; }
  .okk-cena, .okk-zysk b { font-size:1.18rem; }
  .okk-zysk { padding-left:8px; }
  .okk-zysk span { font-size:.74rem; }
}
/* Poniżej 340 px nie ma już czego ścisnąć — oszczędność schodzi pod cenę i traci kreskę. */
@media (max-width:340px) { .okk-zysk { padding-left:0; border-left:0; } }
.okk-co { margin-top:9px; font-size:.84rem; line-height:1.5; color:var(--fg-muted); }
.okk-cta { display:block; margin-top:13px; padding:11px 18px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; text-align:center;
  text-decoration:none; transition:background-color .15s; }
.okk-cta:hover { background:var(--accent-light, #FF8A00); color:#fff; }
@media (max-width:760px) { .org-dwie { grid-template-columns:1fr; } }

/* ── SMART W DWÓCH KOLUMNACH (Oskar 5.10.2026) ──
   Po lewej rachunek pozycja po pozycji, po prawej jedna kwota u nas. Zastępuje jedno długie
   zdanie z czterema liczbami w środku, którego nikt nie czytał do końca. Na telefonie kolumny
   idą jedna pod drugą — wtedy to po prostu dwie listy. */
.org-smart2 { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:16px;
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; text-align:left; }
.sm2-kol { padding:16px 18px; }
.sm2-dzis { background:var(--bg); }
.sm2-unas { background:var(--surface); border-left:1px solid var(--border); }
.sm2-naglowek { display:block; margin-bottom:10px; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); }
.sm2-unas .sm2-naglowek a { color:var(--accent-fg); text-decoration:none; }
.sm2-unas .sm2-naglowek a:hover { text-decoration:underline; }
.sm2-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:4px 0; font-size:.93rem; color:var(--fg-secondary); }
.sm2-row b { color:var(--fg); font-weight:600; white-space:nowrap; }
/* Dostawca w nawiasie obok nazwy pozycji — „Zgody cookies (Cookiebot)" (Oskar 6.10.2026). */
.sm2-row > span i { font-style:normal; color:var(--fg-muted); }
.sm2-suma { margin-top:6px; padding-top:8px; border-top:1px solid var(--border);
  font-weight:600; color:var(--fg); }
.sm2-cena { font-size:1.75rem; font-weight:800; letter-spacing:-.03em; color:var(--fg); line-height:1.15; }
.sm2-cena i { margin-left:4px; font-size:.86rem; font-weight:500; font-style:normal; color:var(--fg-muted); }
.sm2-rabat { margin-top:2px; font-size:.84rem; color:var(--accent-fg); font-weight:700; }
/* Dopłata to nie rabat: ta sama linia, ale bez koloru akcentu, bo pomarańczowa liczba przy
   dopłacie czyta się jak promocja (zlecenie CRO 19.10.2026 o pokazywaniu dopłaty zamiast
   chowania kolumny). To samo niżej przy kwocie w karcie „u nas". */
.sm2-rabat.sm2-doplata { color:var(--fg-secondary); font-weight:600; }
.okk-zysk.okk-doplata b { color:var(--navy); }
/* `.sm2-co` (wyliczanka „co jest w pakiecie") zdjęte 5.10.2026 razem z regułą, która ją
   wypisywała — pełny spis stoi przy cenniku na dole strony. */
@media (max-width:620px) {
  .org-smart2 { grid-template-columns:1fr; }
  .sm2-unas { border-left:0; border-top:1px solid var(--border); }
}
/* Karta cennika z ceną osobistą: przekreślona kotwica nad kwotą + podpis „cena dla …". */
/* „Zostaje Wam X rocznie" — kwota, która zostaje w kieszeni po przejściu. Wyróżniona na
   zielono, bo to jedyne zdanie w ramce, które mówi o zysku, a nie o koszcie. */
.org-oszczednosc { color:var(--fg-secondary); }
.org-oszczednosc b { color:#15803D; }
.price-osobista { font-size:.82rem; color:var(--fg-muted); margin:-2px 0 8px; }
.price-osobista s { color:var(--fg-muted); }
.price-osobista b { color:var(--accent-fg); }
.org-skad { margin-top:16px; text-align:center; font-size:.8rem; line-height:1.5; color:var(--fg-muted); }
.org-skad b { color:var(--fg-secondary); }

@media (max-width:620px){
  .org-grid { grid-template-columns:1fr; }
  .org-kwota { font-size:1.2rem; }
}

/* Sekcja „Co sprawdziliśmy" (/smartcookie) — dowód z własnego skanu. Dwa akapity pod liczbami:
   wynik próby w przeglądarce i ZASTRZEŻENIE o pomyłkach skanu. Drugi jest celowo mniejszy,
   ale czytelny: ma być widoczny, bo bez niego liczby brzmią jak urzędowa statystyka. */
.cs-proba { max-width:720px; margin:22px auto 0; text-align:center; font-size:1rem; color:var(--fg-secondary); }
.cs-proba strong { color:var(--fg); }
.cs-uczciwie { max-width:720px; margin:12px auto 0; text-align:center; font-size:.86rem;
  line-height:1.55; color:var(--fg-muted); }

/* Logotyp organizacji w karcie case study (`wu_logo_klienta()`). Stała wysokość i `width:auto`,
   żeby loga o różnych proporcjach — od kwadratowych po bardzo szerokie — stały w jednej linii
   bazowej i nie rozpychały karty. Logotypy mają własne białe tło, więc karta ich nie przycina. */
.cs-logo { height:38px; margin-bottom:15px; display:flex; align-items:center; }
.cs-logo img { height:38px; width:auto; max-width:210px; object-fit:contain; display:block; }
@media (max-width:620px){ .cs-logo, .cs-logo img { height:30px; } }

/* ── ZAKŁADKI ZAWARTOŚCI USŁUGI (`.sm-zak*`) ───────────────────────────────────
   Przeniesione tu z `landings/smart/style.css` 22.10.2026, bo bierze je teraz także
   `/hosting` (Oskar: „całą zakładkę trzeba uprościć do tego, co jest na pakiecie SMART…
   możesz dodać jako dwie pozycje — hosting i SSL, i prowadzenie strony, tak jak na smarcie
   z takim selektorem u góry"). Landing `/hosting` własnego arkusza nie ma i mieć nie powinien
   — to ta sama droga, którą wcześniej przeszły bloki `.op-*`.

   WYSOKOŚĆ PANELU: `min-height` trzyma krótkie zakładki na jednej wysokości, więc
   przeskakiwanie między nimi nie podrzuca strony. Dłuższe rosną ponad to — tego się nie da
   wyrównać bez dopisywania treści, której nikt nie podyktował. */
.sm-zak { margin-top:4px; }
.sm-zak-pas { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:18px; }
.sm-zak-btn { display:inline-flex; align-items:center; gap:9px; padding:9px 15px 9px 11px;
  border:1.5px solid var(--border); border-radius:999px; background:var(--surface);
  color:var(--fg-secondary); font-size:.88rem; font-weight:600; line-height:1; cursor:pointer;
  transition:border-color .15s, color .15s, box-shadow .15s; }
.sm-zak-btn:hover { border-color:var(--border-strong); color:var(--fg); }
.sm-zak-btn.is-on { border-color:var(--accent); color:var(--navy);
  box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.sm-zak-ico { display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; }
.sm-zak-ico svg { width:26px; height:26px; display:block; }
.sm-zak-panel { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:22px; min-height:148px; }
.sm-zak-panel[hidden] { display:none; }
.sm-zak-panel > h3 { font-size:1.06rem; font-weight:700; color:var(--fg); margin-bottom:6px; }
.sm-zak-panel > p { font-size:.94rem; line-height:1.7; color:var(--fg-secondary); }
/* Kroki i listy stoją WEWNĄTRZ panelu, więc górny odstęp bierze panel. */
.sm-zak-panel .steps { margin-top:16px; }
/* Panel leżący na sekcji `.alt` — kafle kroków muszą odciąć się od BIAŁEGO tła panelu,
   nie od szarego tła sekcji. Bez tego reguła `.alt .step` daje kafel w kolorze panelu
   i sześć kroków zlewa się w jedną płachtę. */
.alt .sm-zak-panel .step { background:var(--bg); }
/* Dodatek obok opisu usługi — zamknięty w ramce, bo to OFERTA, a nie dalszy ciąg akapitu. */
.sm-zak-dodatek { margin:18px 0 0; padding:13px 16px; border-radius:var(--r);
  background:var(--accent-soft); font-size:.88rem; line-height:1.6; color:var(--fg-secondary); }
.sm-zak-dodatek b { color:var(--navy); font-weight:700; }
.sm-zak-dodatek a { color:var(--accent-fg); font-weight:700; text-decoration:none; white-space:nowrap; }
.sm-zak-dodatek a:hover { text-decoration:underline; }
/* Akapit wiodący panelu i lista aplikacji Google. Znak stoi w PIERWSZEJ kolumnie przez oba
   wiersze pozycji — nazwa i zdanie pod nią są wyrównane do jednej lewej krawędzi, więc sześć
   pozycji czyta się jak tabela, a nie jak sześć akapitów z obrazkiem.
   `align-content:start` jest konieczne, nie kosmetyczne: pozycje w rzędzie są wyrównane do
   najwyższej, więc bez tego wolne miejsce rozkłada się MIĘDZY nazwę a zdanie pod nią
   i krótsza pozycja ma w środku dziurę, której sąsiadka nie ma. */
.ws-lead { margin:8px 0 0; font-size:.94rem; line-height:1.7; color:var(--fg-secondary); }
.ws-lead b { color:var(--navy); font-weight:700; }
.ws-lista { list-style:none; margin:20px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px 28px; }
/* `align-content:start` jest tu konieczne, nie kosmetyczne: pozycje w rzędzie są wyrównane
   do najwyższej, więc bez tego wolne miejsce rozkłada się MIĘDZY nazwę a zdanie pod nią
   i krótsza pozycja ma w środku dziurę, której sąsiadka nie ma. */
.ws-lista li { display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-content:start; }
.ws-lista img { grid-row:1 / 3; align-self:start; margin-top:1px; width:26px; height:26px; }
.ws-lista b { font-size:.92rem; line-height:1.35; color:var(--navy); font-weight:700; }
.ws-lista span { margin-top:2px; font-size:.84rem; line-height:1.5; color:var(--fg-secondary); }
/* Lista i nota WPROST W SEKCJI, nie w panelu zakładki — tak stoją na landingu Workspace
   (`/google-workspace-dla-nonprofit`), gdzie od 22.10.2026 zastąpiły cztery kafle korzyści.
   Sekcja ma wyśrodkowane nagłówki i akapity, więc lista dostaje własną szerokość i środek;
   same pozycje zostają wyrównane do lewej, bo to ich układ czyta się jak tabela. */
.section-inner > .ws-lista { max-width:880px; margin-inline:auto; margin-top:26px; text-align:left; }
/* Wstęp NAD harmonogramem kopii — mówi, po co ten harmonogram w ogóle jest (Oskar 23.10.2026).
   ⚠️ DO LEWEJ, nie wyśrodkowany: w zakładce „Hosting i SSL" stoi pod nagłówkiem `h3`, który
   zaczyna się przy lewej krawędzi panelu. Wyśrodkowany przez `margin:auto` odjeżdżał od niego
   o kilkadziesiąt pikseli i wyglądał jak wcięcie z innej sekcji (widoczne na zrzucie).
   Centrowanie włącza się tylko tam, gdzie akapit jest dzieckiem `.section-inner` — tak samo
   jak przy `.ws-nota` niżej. */
.ws-wstep { margin:0 0 20px; font-size:.95rem; line-height:1.65; color:var(--fg-secondary); }
.section-inner > .ws-wstep, .section-inner > .ws-nota { max-width:880px; margin-inline:auto; }
/* Nota pod treścią panelu (migracja w cenie, DNS-y, 2000 licencji). */
.ws-nota { margin:22px 0 0; padding:13px 16px; border-radius:var(--r); background:var(--bg);
  font-size:.86rem; line-height:1.6; color:var(--fg-secondary); }
.ws-nota b { color:var(--navy); font-weight:700; }
.ws-nota a { color:var(--accent-fg); font-weight:700; text-decoration:none; white-space:nowrap; }
.ws-nota a:hover { text-decoration:underline; }
/* Na `.alt` nota brałaby tło sekcji i znikała — na szarym tle musi być biała. */
.alt .sm-zak-panel .ws-nota { background:var(--surface); border:1px solid var(--border); }
/* Zdanie otwierające zakładkę prowadzenia strony. Do LEWEJ, nie na środek: stoi pod
   nagłówkiem panelu, a ten jest wyrównany do lewej. Szerokość i wyśrodkowanie ustawiamy
   tutaj, bo reguła `.section-inner > p` liczy poziomy zagnieżdżenia i o jedno pudełko
   głębiej już nie działa. */
.sm-opieka-lead { margin:0; font-size:.96rem; line-height:1.7; color:var(--fg-secondary); }
.sm-opieka-lead b { color:var(--navy); font-weight:700; }
@media (max-width:620px){
  /* Pasek zakładek na telefonie: przyciski ciaśniejsze, bo pozycje i tak schodzą
     na kilka wierszy — chodzi o to, żeby nie zajęły pół ekranu nad treścią. */
  .sm-zak-pas { gap:6px; margin-bottom:14px; }
  .sm-zak-btn { gap:7px; padding:7px 12px 7px 9px; font-size:.82rem; }
  .sm-zak-ico, .sm-zak-ico svg { width:22px; height:22px; }
  .sm-zak-panel { padding:16px 14px; min-height:0; }
  .sm-zak-panel > h3 { font-size:1rem; }
  .sm-zak-panel > p { font-size:.9rem; line-height:1.55; }
  .sm-zak-dodatek { margin-top:14px; padding:11px 13px; font-size:.84rem; line-height:1.5; }
  .ws-nota { margin-top:16px; padding:11px 13px; font-size:.82rem; line-height:1.5; }
  .ws-lead { font-size:.9rem; line-height:1.55; }
  .ws-lista { margin-top:14px; gap:12px 20px; }
  .ws-lista b { font-size:.88rem; }
  .ws-lista span { font-size:.8rem; line-height:1.45; }
  .sm-opieka-lead { font-size:.9rem; line-height:1.55; }
}