/* smartcookie.io — własny arkusz tej jednej strony.
   Reszta wyglądu idzie ze wspólnego `landings/_shared/landing.css`; tutaj siedzi tylko to,
   czego nie ma żaden inny landing: pasek górny bez nawigacji i przełącznik języka.

   Po co osobny pasek: ta strona ma stać sama za siebie (jak ping.ngo) — wejście z kampanii
   ma jedną drogę dalej, a nie dziesięć zakładek do serwisu agencji. Wspólny `nav` zostaje
   nietknięty dla pozostałych landingów. */

/* Pasek PŁYWA nad ekranem powitalnym — dokładnie jak na ping.ngo (`header { background:none }`):
   bez białego tła, bez obramowania i bez przyklejania do góry. Tło hero idzie pod nim, więc
   logo i przełącznik czytają się jak element strony, a nie jak doklejony pasek. */
.sc-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 24px;
  background: none;
}
.sc-brand { display: flex; align-items: center; line-height: 0; }
.sc-brand img { height: 26px; width: auto; display: block; }

/* ── PRZEŁĄCZNIK JĘZYKA: lista rozwijana ──
   Ten sam układ i te same rozmiary co na ping.ngo (`ping-server/ping.ngo/webup.css`, blok
   „PRZELACZNIK JEZYKA"). Rozmiary podane w PIKSELACH, nie w `rem`: oba serwisy mają inną
   podstawę `rem` (pico na ping.ngo kontra nasz arkusz), więc ta sama wartość w `rem` dawała
   tam i tu inną wielkość liter — stąd wrażenie, że przełącznik „wygląda inaczej".
   Na `<details>`, więc działa bez JS-a. */
.lang-dd { position: relative; }
.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; }
/* Granat, nie jaśniejsza szarość — ten sam kolor co zakładki paska po najechaniu
   (Oskar 19.10.2026). Lustro reguły z `landings/_shared/landing.css`. */
.lang-dd > summary:hover { background: #27495B; }
.lang-dd > summary svg { transition: transform .15s; }
.lang-dd[open] > summary svg { transform: rotate(180deg); }

.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; }

/* Ekran powitalny ma 96 px odstępu u góry, więc pływający pasek mieści się nad treścią
   i nic nie trzeba przesuwać. Na telefonie hero jest niższe — stąd mniejszy pasek. */
@media (max-width: 560px) {
  .sc-top { padding: 10px 16px; }
  .sc-brand img { height: 22px; }
}

/* Podpis pod trzema kaflami sekcji „Co sprawdziliśmy" (Oskar 6.10.2026) — wniosek z liczb
   i zdanie o tym, co z niego wynika. Wyśrodkowany i węższy niż sekcja, bo stoi pod kaflami,
   które też są wyśrodkowane; bez ograniczenia szerokości rozjeżdżał się na całe 1 100 px
   i przestawał czytać się jak podpis. */
.sp-podpis {
  max-width: 660px; margin: 26px auto 0; text-align: center;
  font-size: .95rem; line-height: 1.6; color: var(--fg-secondary);
}
.sp-podpis + .sp-podpis { margin-top: 8px; }
.sp-podpis-mocny { font-weight: 600; color: var(--fg); }

/* Czerwona linia w karcie korzyści — co się dzieje, gdy tej rzeczy NIE MA. Ten sam rytm co
   treść karty, tylko w kolorze ostrzeżenia i odcięta cienką kreską, żeby było widać, że to
   druga myśl, a nie dalszy ciąg zdania.
   Od 6.10.2026 stoi TYLKO w karcie o Consent Mode v2: tam powód jest datowany (wymóg Google
   od marca 2024), a nie ogólną groźbą kary. */
/* ⚠️ `.benefit-card p.benefit-risk`, nie samo `.benefit-risk`: reguła `.benefit-card p`
   we wspólnym arkuszu ma specyficzność 0,1,1 i wygrywała z 0,1,0 niezależnie od kolejności
   wczytania plików — przez co zdanie pod kreską było SZARE, a nie czerwone. Zostawała sama
   kreska i wyglądała jak przypadkowa linia (wpadka z 6.10.2026, wyszła przy zrzucie sekcji). */
.benefit-card p.benefit-risk {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid rgba(220, 38, 38, .16);
  font-size: .92rem; line-height: 1.55; color: var(--fg-secondary);
}
/* CZERWONY jest TYLKO fragment w `<strong>` (Oskar 6.10.2026) — data wymagalności, jedyny twardy
   fakt w tym zdaniu. Cały akapit na czerwono krzyczał mocniej niż kreska nad nim.
   `font-weight:inherit`, bo prosiliśmy o kolor, nie o pogrubienie: czerwień sama wystarcza,
   a `<strong>` jest tu po to, żeby fragment miał się o co zaczepić. */
.benefit-card p.benefit-risk strong { color: #B91C1C; font-weight: inherit; }

/* Linia drobnym drukiem pod krokami — odbieranie dostępu, zdjęcie banera, polityka prywatności.
   ⚠️ Musi być WIDOCZNA BEZ KLIKANIA (warunek weryfikacji OAuth w Google): żadnego zwijania,
   `display:none` ani chowania za zakładką. Drobny druk tak, niewidoczna nie. */
.gtm-nota {
  margin: 18px 0 0;
  font-size: .82rem; line-height: 1.55; color: var(--fg-muted);
}
.gtm-nota a { color: var(--fg-secondary); text-decoration: underline; }
.gtm-nota a:hover { color: var(--accent-fg); }

/* RUCHOME TŁO OFERTY ZACZYNA SIĘ PRZY PRZEŁĄCZNIKU, nie dopiero przy kartach (Oskar 6.10.2026:
   „to miesięcznie/rocznie powinno zaczynać się tam, gdzie góra Akademii/VIP na /google-ad-grants").
   Wspólna reguła `section[data-tlo]` trzyma biel przez pierwsze 175 px i była policzona pod układ
   z lidem pod nagłówkiem — na /google-ad-grants wypada to co do piksela na górze kart (175 kontra
   176 px). W cenniku SmartCookie lid zniknął 6.10, a doszedł przełącznik, więc 175 px wypadało
   w odstępie MIĘDZY przełącznikiem a kartami i przełącznik zostawał na bieli.

   Zmierzone na żywej stronie, osiem szerokości okna: nagłówek kończy się na 121–133 px,
   przełącznik zaczyna na 133–145 px. 133 px trafia w tę szczelinę na każdej szerokości
   powyżej ~520 px. Poniżej nagłówek łamie się na dwa wiersze (jego dół schodzi na 150 px),
   więc wygaszanie startuje wtedy jeszcze pod tekstem — ale na samym starcie kolor jest DOKŁADNIE
   biały i dochodzi do `--bg` dopiero po 80 px, a `--bg` to ledwie widoczny błękit, więc pod
   drugim wierszem nagłówka nie ma czego zobaczyć. Dlatego jedna wartość, bez progu medialnego,
   który i tak zależałby od tego, gdzie akurat złamie się tekst nagłówka. */
#cennik { --tlo-start:133px; --tlo-fade:213px; }

/* TROCHĘ TŁA ZOSTAJE POD KARTAMI (Oskar 6.10.2026, po korekcie tego samego dnia: „trochę mniej
   tła pod ofertą, połowa tego co dodałeś"). Pierwsze podejście dawało 40 px pełnego koloru
   i 60 px wygaszania; teraz połowa — 20 px koloru i 47 px wygaszania.
   Zmierzone: karty kończą się 579 px od góry sekcji, więc pełny kolor sięga 599 px, a sekcja
   kończy się na 646 px — stąd `padding-bottom` 67 px zamiast 34 i `--tlo-koniec` 47 px od dołu
   zamiast domyślnych 150.
   `section#cennik`, nie samo `#cennik`: `padding-bottom` ustawia we wspólnym arkuszu reguła
   `section#cennik` i z samym `#cennik` (niższa specyficzność) nic by się nie zmieniło. */
section#cennik { padding-bottom:67px; --tlo-koniec:calc(100% - 47px); }

/* PLAMY PRZYGASZONE — tło ma być tak lekkie jak na /google-ad-grants (Oskar 6.10.2026:
   „to tło jest chyba trochę inne, ma jaśniejszy gradient u góry, daj to samo").
   Reguła jest ta sama na obu stronach, różni je WYSOKOŚĆ sekcji: 971 px tam, 613 px tutaj
   (zmierzone). Plamy są rozmieszczone proporcjonalnie do sekcji, więc w krótszej ich gęste
   środki wypadają dokładnie w oknie, które odsłania maska, i pomarańcz bije pełną mocą tuż
   przy przełączniku. Wysokości nie zrównam — mamy dwie karty i mniej treści — więc nadrabiam
   przezroczystością. 0,55 wybrane z porównania czterech prób (1 · 0,7 · 0,55 · 0,4) ze zrzutem
   Ad Grants: przy 0,7 pomarańcz dalej bił mocniej niż tam, przy 0,4 tła prawie nie widać. */
#cennik > .wu-bg { opacity:.55; }

/* „Nie tylko SmartCookie…" — nagłówek nad OBIEMA kartami cennika, gdy w nim stoi pakiet SMART.
   ⚠️ NIEUŻYWANE od 6.10.2026 — nagłówek i podpis zdjęte ze strony tego samego dnia, którego
   weszły. Reguły zostają na wypadek powrotu; sam tekst był wpisany w `index.php` po polsku
   na sztywno, więc nie ma go gdzie szukać w `lang.php`. */
.cen-blok-h {
  max-width: 760px; margin: 26px auto 0; text-align: center;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.3; letter-spacing: -.02em;
}
.cen-blok-sub {
  max-width: 660px; margin: 9px auto 0; text-align: center;
  font-size: .96rem; line-height: 1.6; color: var(--fg-secondary);
}

/* „Zero pracy po Twojej stronie…" — linia pod cennikiem.
   ⚠️ NIEUŻYWANE od 6.10.2026 — zdanie zdjęte ze strony tego samego dnia, którego weszło
   (sekcja „Jak to działa" zaraz pod cennikiem mówi to samo czterema krokami). Reguła zostaje,
   a treść czeka pod kluczem `jak.zero` w `landings/cookie/lang.php`. */
.jak-zero {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: .95rem; line-height: 1.6; color: var(--fg-secondary);
}

/* ── SPRAWDŹ SWOJĄ STRONĘ — formularz w sekcji „Co sprawdziliśmy" (7.10.2026) ──────────────
   Stoi pod trzema kaflami ze skanu, więc jest odpowiedzią na pytanie, które same te liczby
   zadają: „a jak u mnie?". Wchodzi TYLKO przy wejściu bez karty organizacji — kto przyszedł
   z maila, ma swój rachunek wyżej na stronie (warunek w `index.php`).
   Ramka jest wyraźnie oddzielona od kafli linią i odstępem, bo to jedyne miejsce w tej sekcji,
   gdzie czytający ma coś ZROBIĆ, a nie przeczytać. */
.spr {
  max-width: 640px; margin: 34px auto 0; padding-top: 28px;
  border-top: 1px solid var(--border-soft); text-align: center;
}
.spr h3 {
  margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.4rem);
  line-height: 1.3; letter-spacing: -.02em;
}
.spr-sub {
  margin: 8px auto 0; max-width: 520px;
  font-size: .95rem; line-height: 1.6; color: var(--fg-secondary);
}
/* Pole i przycisk w jednym wierszu; na telefonie jeden pod drugim, bo przy 320 px pole
   zwężone do połowy nie mieści nawet „fundacja.org.pl". */
.spr-form { display: flex; gap: 10px; margin: 18px 0 0; }
.spr-form input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px; font: inherit; font-size: 1rem;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
}
.spr-form input::placeholder { color: var(--fg-muted); }
.spr-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.spr-form .btn-primary { flex: 0 0 auto; }
.spr-form .btn-primary[disabled] { opacity: .6; cursor: default; }

/* Wynik: domyślnie spokojny. `uwaga` dostaje czerwony akcent i wchodzi WYŁĄCZNIE wtedy, gdy
   banera nie ma, a dane i tak lecą — czyli w jedynym przypadku, w którym sprawdzenie samego
   kodu strony daje pewność. `ok` = na stronie już stoi nasz baner. */
.spr-wynik { margin: 16px 0 0; text-align: left; }
.spr-wynik:empty { display: none; }
.spr-wynik p { margin: 0 0 7px; font-size: .95rem; line-height: 1.6; }
.spr-wynik p:last-child { margin-bottom: 0; }
.spr-wynik {
  padding: 14px 16px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid var(--border-soft);
}
.spr-wynik.uwaga { border-left: 3px solid #B91C1C; }
.spr-wynik.ok    { border-left: 3px solid var(--green, #157347); }
.spr-dalej { color: var(--fg-secondary); font-size: .9rem !important; }
.spr-zamow a { font-weight: 600; }

@media (max-width: 560px) {
  .spr-form { flex-direction: column; }
  .spr-form .btn-primary { width: 100%; }
}

/* Wynik dla domeny spoza naszej bazy składa się jak ramka organizacji z maila (`org-dwie`),
   więc własne tło i ramka `.spr-wynik` byłyby drugim pudełkiem wokół pudełka — zdejmujemy je
   i zostawiamy sam skład karty. Czerwony akcent przenosi się wtedy na kartę. */
.spr-wynik.karta { padding: 0; background: none; border: 0; }
.spr-wynik.karta .org-dwie { margin: 0; }
.spr-wynik.karta.uwaga .org-karta { border-left: 3px solid #B91C1C; }

/* Werdykt „skrypty ruszają przed zgodą" na czerwono — to jedyna rzecz w karcie, która jest
   zarzutem, i ma być widoczna od razu. Reszta wierszy zostaje w kolorze tekstu, bo to są fakty
   bez oceny (nazwa narzędzia, kwota). */
.okk-row b.okk-zle-w { color: #B91C1C; }

/* ── PROGRAM PARTNERSKI — `partnerzy.php` (8.10.2026) ──────────────────────────────────────
   Pasek pod FAQ na landingu ZDJĘTY tego samego dnia (Oskar: „to nie ma być na samym końcu,
   w pytaniach, tylko jako osobna zakładka podlinkowana tak jak regulamin czy polityka
   prywatności"), więc reguły `.par` / `.par-cta` poszły razem z nim. Cała strona programu stoi
   na wspólnych klasach z `landings/_shared/landing.css` (`wu-hero`, `steps`, `pp-rate`,
   `wu-cards`, `audit-form`) — tych samych, na których stoi webup.pl/program-partnerski.
   Tutaj zostaje tylko to, czego tamta strona nie potrzebowała. */

/* Kolumna z formularzem zapisu — węższa niż sekcja. Na pełnych 1 100 px pole „Nazwa" rozciągało
   się na pół ekranu i formularz przestawał wyglądać na krótki, czym faktycznie jest (cztery pola).
   Tę samą szerokość ma formularz na webup.pl/program-partnerski, tam wpisana w `style` elementu. */
.par-zapis { max-width: 760px; }