/* ── skopiowane 1:1 z landings/_shared/landing.css (nowa.webup.pl) ──
   TYLKO tokeny marki i zywe tlo. Calego arkusza NIE ladujemy: ma reguly na gole
   znaczniki (m.in. nav { position:sticky; top:0 }), ktore na tutejszym HTML
   uczynily sticky takze <nav> w stopce i w lewej kolumnie - stad znikajace linki
   i dziwny prostokat. Aktualizacja: pobrac landing.css i wyciac te same bloki. */
: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;
  --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-*) */
}

:root { color-scheme: light; }

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

.wu-blob { position:absolute; border-radius:50%; will-change:transform, opacity; }

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

/* 2026-08-09: plamy b3 i b4 maja ZAMIENIONE kolory wzgledem landing.css.
   Granatowa siedziala przy prawej krawedzi (right:24%), czyli dokladnie pod
   granatowym naglowkiem - ciemny tekst na ciemnej plamie sie nie czytal.
   Teraz granat jest po lewej (b4, left:8%, pusta kolumna), a pod trescia zostaje
   ciepla morela. Przy okazji wuFloat4 nie ucieka juz w prawo o pol szerokosci,
   zeby granat nie wracal pod tekst w trakcie animacji. */
.wu-blob.b3 { width:44vw; height:36vw; top:-8%; right:24%;
  background:radial-gradient(circle at 50% 50%, #FFC48A 0%, rgba(255,196,138,0) 70%);
  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%, #27495B 0%, #3A6B85 38%, rgba(58,107,133,0) 72%);
  animation:wuFloat4 25s ease-in-out infinite; }

@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(-18%, -34%, 0)    scale(1.6)  rotate(22deg);  opacity:.3; }
  60%  { transform:translate3d(-34%, 30%, 0)     scale(.65)  rotate(-18deg); opacity:1; }
  100% { transform:translate3d(0,0,0)            scale(1)    rotate(0deg);   opacity:.85; }
}

@media (prefers-reduced-motion:reduce){ .wu-par { transform:none !important; } }


/* ────────────────────────────────────────────────────────────────────────────
   ping.ngo — nakladka spojnosci z nowa.webup.pl (2026-08-09).
   Tlo marki idzie na CALA strone (znaczniki .wu-bg siedza w _header.php zaraz
   za <body>). Ukladu NIE przestawiamy - siatka .grid/.left/.right zostaje
   z main.css, zmieniamy tylko wyglad: tlo, typografia, przyciski, stopka.
   ──────────────────────────────────────────────────────────────────────────── */

body#body.ping-ngo video, body#body.ping-ngo #vid-xl { display: none !important; }

/* ── TLO NA CALOSC ── */
body#body.ping-ngo { position: relative; background: #fff; }
body.ping-ngo > .wu-bg { position: fixed; inset: 0; z-index: 0; filter: blur(48px); }
/* welon jak .wu-hero::before na landingu - bez niego tekst nie czyta sie na plamach.
   .45 to kompromis: kolory zostaja nasycone jak w hero nowa.webup.pl, a granatowy
   tekst dalej ma kontrast powyzej progu AA. */
body#body.ping-ngo::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(255,255,255,.55);
}
body.ping-ngo header, body.ping-ngo main, body.ping-ngo footer { position: relative; z-index: 2; }

/* ── NAGLOWEK: logo przy samej lewej krawedzi, pasek niski jak na landingu ── */
body.ping-ngo header nav.container { max-width: none; margin: 0; padding: 8px 24px; }
body.ping-ngo header nav.container > ul > li { padding-top: 0; padding-bottom: 0; }
/* znak mniej wiecej na wysokosc napisu PING.NGO obok - wczesniej byl dwa razy
   wiekszy i to on prowadzil naglowek zamiast nazwy */
/* Znak i napis musza sie zgadzac co do srodka. Domyslnie <img> jest inline i siedzi
   na LINII BAZOWEJ tekstu (vertical-align dziala wzgledem niej), przez co znak
   wychodzil nizej niz napis obok. Wyrzucamy baseline z gry: oba <li> i oba <a> to
   flexy wyrownane do srodka, a obrazek jest blokiem. */
body.ping-ngo header nav.container ul:first-child { align-items: center; }
body.ping-ngo header nav.container ul:first-child > li { display: flex; align-items: center; }
body.ping-ngo header nav.container ul:first-child > li > a { display: flex; align-items: center; line-height: 1; }
/* 2026-08-09: nazwa marki zostaje GRANATOWA i w grubosci 400 z reguly wyzej.
   Pomaranczem wyrozniamy tylko "Google Ad Grants" w naglowku. Przy okazji zdjete
   font-weight:500, ktore zostalo po wersji kolorowej - napis wygladal przez nie
   na wiekszy, niz byl. */
body.ping-ngo header nav.container img[alt="home"] { display: block; width: 30px; height: 30px; }
body.ping-ngo header nav a { color: var(--navy) !important; font-weight: 500; letter-spacing: .01em; text-decoration: none; }
body.ping-ngo header nav a:hover { color: var(--accent) !important; }
/* Bez poswiaty pod naglowkiem - Oskar: "wokol ping.ngo nie dodawaj tego kwadrata".
   Logo zostaje oryginalne (/img/logo-light.svg, z biala plytka) - wersja bez plytki
   (logo-mark.svg) zostala odrzucona. */
body.ping-ngo header { background: none; }
body.ping-ngo header nav.container ul:first-child a { font-size: 1.35rem; font-weight: 400; letter-spacing: .04em; }


/* ── PRZELACZNIK JEZYKA ──
   1:1 jak na klient.webup.pl/login: dwie male pigulki, bez obudowy i bez ramki.
   Aktywna wypelniona na ciemno (Tailwind gray-800 = #1F2937), druga szary tekst
   (gray-400) rozjasniajacy sie na hover. Odpowiednik klas z logowania:
   px-3 py-1 text-xs rounded-full font-medium + gap-1. */
body.ping-ngo .lang-switch { display: inline-flex; align-items: center; gap: 4px; }
body.ping-ngo .lang-switch > a {
  padding: 4px 12px; border-radius: 999px;
  font-size: .75rem; line-height: 1.34; font-weight: 500; letter-spacing: 0;
  text-decoration: none; color: #9CA3AF !important; background: transparent;
  transition: color .15s, background-color .15s;
}
body.ping-ngo .lang-switch > a:hover { color: #4B5563 !important; }
body.ping-ngo .lang-switch > a.is-active { background: #1F2937; color: #fff !important; }
/* Prawa lista w naglowku dostawala flex:0 1 auto i KURCZYLA sie ponizej swojej
   tresci - pigulki wychodzily poza nia i poza krawedz okna. Blokujemy kurczenie. */
body.ping-ngo header nav.container ul.right-top-menu { flex: 0 0 auto; }
/* 10px domyka odstep do 24px, czyli tyle samo, ile ma logo po lewej */
body.ping-ngo header nav.container ul.right-top-menu > li { flex: 0 0 auto; padding-right: 10px; }
body.ping-ngo .lang-switch { flex: 0 0 auto; }
/* Pico daje linkom w <nav> UJEMNE marginesy (kompensuje wlasny padding li) - przez
   to pigulki wychodzily poza swoj kontener i poza krawedz okna. Zerujemy je. */
body.ping-ngo .lang-switch > a { flex: 0 0 auto; white-space: nowrap; margin: 0 !important; }

/* ── SIATKA ──
   main.css ma "body.home > main > .grid { height: 100vh }". Przy naszym ukladzie
   (header w flow, body jako flex column) siatka byla WYZSZA niz <main>, wiec main
   z overflow:hidden UCINAL dol prawej kolumny - tekst kroku 2 konczyl sie w polowie
   linii. Wysokosc musi wynikac z tresci. */
body.ping-ngo main > .grid { height: auto !important; min-height: 0; align-content: center; }
body.ping-ngo main > .grid > .left { min-height: 0; }
/* prawa kolumna bez bialego panelu - tlo ma byc widoczne pod cala trescia */
body.ping-ngo main > .grid > .right { background: transparent !important; }

/* ZADNYCH plyt ani poswiat pod trescia - Oskar: "bez tego bialego kwadratu".
   Czytelnosc tekstu robi jednolity welon na calej stronie (body::before),
   bo welon bez krawedzi nie da sie zobaczyc jako prostokat. */


/* ── LEWA KOLUMNA: KARTA "CO SPRAWDZAMY" ──
   Zwykla lista z zielonymi ptaszkami wygladala jak byle jaki spis funkcji i wisiala
   w powietrzu posrodku gradientu. Teraz jest szklana karta (blur tla + cienka ramka),
   a w srodku strumien zasad plynacy w gore w nieskonczonosc. Lista jest w znaczniku
   dwa razy, wiec animacja do -50% wysokosci sciezki wraca do punktu wyjscia i petla
   jest niewidoczna - zero JS. Krawedzie sciete maska, zeby tekst sie wylanial i
   znikal zamiast ucinac o ramke. */
body.ping-ngo .wu-scan {
  max-width: 25rem; width: 100%; margin: 0 0 0 auto;
  padding: 22px 24px 20px 24px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.04);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
body.ping-ngo .wu-scan-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
body.ping-ngo .wu-scan-head .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(255,111,0,.45); animation: wuPulse 2.2s ease-out infinite;
}
@keyframes wuPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,111,0,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(255,111,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,111,0,0); }
}
body.ping-ngo .wu-scan-head .kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
body.ping-ngo .wu-scan-title {
  margin: 0 0 16px; font-size: 1.16rem; font-weight: 400; line-height: 1.3;
  letter-spacing: -.015em; color: var(--navy) !important;
}
body.ping-ngo .wu-scan-viewport {
  position: relative; height: 15.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 84%, transparent 100%);
}
body.ping-ngo .wu-scan-track { animation: wuScan 34s linear infinite; }
body.ping-ngo .wu-scan:hover .wu-scan-track { animation-play-state: paused; }
@keyframes wuScan { from { transform: translateY(0); } to { transform: translateY(-50%); } }
body.ping-ngo .wu-scan-track ul { list-style: none; margin: 0; padding: 0; }
body.ping-ngo .wu-scan-track li {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 8px 0;
  font-size: .875rem; line-height: 1.38; color: var(--fg-secondary);
}
body.ping-ngo .wu-scan-track .tick {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; margin-top: 2px; border-radius: 50%;
  background: rgba(255,111,0,.12); color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  body.ping-ngo .wu-scan-track { animation: none; }
  body.ping-ngo .wu-scan-viewport { height: auto; max-height: 15.5rem; }
  body.ping-ngo .wu-scan-head .dot { animation: none; }
}
@media (max-width: 860px) {
  body.ping-ngo .wu-scan { max-width: none; margin: 4px 0 0; padding: 18px 18px 16px 18px; }
  /* na waskim ekranie numer i status ida pod nazwe */
  /* na waskim ekranie slupki nie maja gdzie sie zmiescic - numer i status ida
     pod nazwe, a naglowki kolumn chowamy, bo nie ma juz czego opisywac */
  body.ping-ngo .linked-list li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
  body.ping-ngo .linked-list li.head { display: none; }
  body.ping-ngo .linked-list .id { grid-column: 1; }
  body.ping-ngo .linked-list .st { grid-column: 2; grid-row: 2; justify-self: end; }
  body.ping-ngo .wu-scan-viewport { height: 13rem; }
}

/* ── TRESC ── */
body.ping-ngo .grid > .right {
  align-self: center !important; padding-top: 8px !important; padding-bottom: 8px !important;
  /* zapas przy prawej krawedzi - angielski tytul jest dluzszy i dochodzil do samego konca */
  padding-right: 52px !important;
}
body.ping-ngo .grid > .right h1 {
  font-size: clamp(1.7rem, 3.1vw, 2.45rem); font-weight: 300; line-height: 1.14;
  letter-spacing: -.025em; color: var(--navy); margin: 0 0 12px;
}
body.ping-ngo .grid > .right h1 b { font-weight: 600; color: var(--accent); }
body.ping-ngo .grid > .right > p:not(.wu-verified) {
  font-size: 1.02rem; line-height: 1.6; color: var(--fg-secondary); margin: 0 0 20px; max-width: 520px;
}
body.ping-ngo .grid.content-grid { gap: 16px; }
body.ping-ngo .grid.content-grid h3 { color: var(--navy) !important; }
body.ping-ngo .grid.content-grid p { font-size: .86rem; line-height: 1.5; color: var(--fg-secondary) !important; }

/* ── PRZYCISKI ── */
body.ping-ngo .google-button a,
body.ping-ngo input[type="submit"], body.ping-ngo button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent) !important; color: #fff !important; border: none !important;
  border-radius: 999px !important; padding: 13px 28px !important;
  font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; box-shadow: 0 4px 14px rgba(255,111,0,.28); transition: .15s;
}
body.ping-ngo .google-button a:hover,
body.ping-ngo input[type="submit"]:hover, body.ping-ngo button[type="submit"]:hover {
  background: var(--accent-hover) !important; transform: translateY(-1px);
}

/* Znak zaufania pod przyciskiem. Nasycona zielona pigulka krzyczala bardziej niz
   sam przycisk - teraz jasna, "szklana" plakietka: granatowy tekst marki, zielony
   tylko znacznik. Czytelna, ale nie odciaga wzroku od CTA. */
body.ping-ngo .wu-verified {
  display: inline-flex !important; align-items: center; gap: 9px; margin: 18px 0 24px !important;
  font-size: .82rem !important; line-height: 1.2; font-weight: 600; letter-spacing: .01em;
  color: var(--navy) !important;
  background: rgba(255,255,255,.72); border: 1px solid rgba(39,73,91,.14);
  padding: 8px 15px 8px 12px; border-radius: 999px; max-width: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
body.ping-ngo .wu-verified svg { color: var(--green); flex: 0 0 auto; width: 17px; height: 17px; }


/* ── FORMULARZ I EKRANY WYNIKU ──
   Pico daje polom formularza bardzo duzy skok pionowy i wysokosc (zmienne
   --pico-form-element-spacing-* i --pico-spacing). Przy szerokosci 600 px calosc
   wygladala jak formularz rejestracyjny, a to sa cztery pola. Zmienne nadpisujemy
   TYLKO w obrebie tej karty, zeby nie ruszyc reszty strony. */
/* UWAGA: Pico skaluje font-size korzenia wraz z szerokoscia okna (od 1280 px
   1rem = 20 px, nie 16). Wymiary tej karty podajemy wiec w PIKSELACH - w rem-ach
   wychodzila o cwierc za duza wlasnie z tego powodu. */
body.ping-ngo form.self-center,
body.ping-ngo .linked-box {
  max-width: 500px; width: 100%; margin-left: auto; margin-right: auto;
}
body.ping-ngo form.self-center {
  --pico-spacing: .55rem;
  --pico-form-element-spacing-vertical: .46rem;
  --pico-form-element-spacing-horizontal: .8rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 20px 18px; box-shadow: var(--shadow-lg); text-align: left;
}
body.ping-ngo form.self-center fieldset { margin-bottom: .55rem; }
body.ping-ngo form.self-center fieldset:last-of-type { margin-bottom: .9rem; }
body.ping-ngo .form-title {
  margin: 0 0 14px; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--navy) !important;
}
body.ping-ngo form input[type="text"], body.ping-ngo form input[type="email"],
body.ping-ngo form input[type="tel"], body.ping-ngo form select {
  height: auto; font-size: 15px; line-height: 1.35;
  border: 1px solid var(--border-strong) !important; border-radius: 10px !important;
  background: var(--surface) !important; color: var(--fg) !important;
  margin-bottom: .5rem !important;
}
body.ping-ngo form fieldset > *:last-child { margin-bottom: 0 !important; }
body.ping-ngo form input::placeholder { font-size: 15px; color: var(--fg-muted); }
body.ping-ngo form input:focus, body.ping-ngo form select:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255,111,0,.15) !important;
}
body.ping-ngo form.self-center input[type="submit"] {
  width: 100%; padding: 11px 22px !important; font-size: 15px; margin: 0;
}
body.ping-ngo .box-success {
  background: var(--green-soft); border-radius: var(--r-xl); padding: 28px 24px;
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  max-width: 520px; margin: 0 auto;
}
body.ping-ngo .box-success h1 { color: var(--green); font-size: 1.5rem; }
body.ping-ngo .text-red { color: var(--red); }

/* ── PRZEGLAD POLACZONYCH KONT ── */
body.ping-ngo .linked-box {
  margin: 0 auto 14px; padding: 16px 18px; text-align: left;
  background: rgba(255,255,255,.72); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.ping-ngo .linked-box h5 {
  margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; color: var(--navy);
}
body.ping-ngo .linked-list { list-style: none; margin: 0; padding: 0; }
/* trzy kolumny zamiast zawijanego flexa: nazwa moze byc dowolnie dluga i lamie sie
   w SWOJEJ kolumnie, a numer i status zostaja obok siebie po prawej */
/* KAZDY wiersz to osobny grid, wiec kolumny "auto" ustawialy sie per wiersz i
   naglowki nie stały nad swoimi wartosciami. Slupki musza miec STALA szerokosc,
   zeby wszystkie wiersze - lacznie z naglowkowym - dzielily te sama siatke. */
body.ping-ngo .linked-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) 88px 112px;
  align-items: center; gap: 3px 10px;
  padding: 7px 0; border-top: 1px solid var(--border-soft);
}
body.ping-ngo .linked-list li:first-child { border-top: 0; }
/* wiersz naglowkow kolumn */
/* naglowki kolumn maja tylko orientowac - najlzejszy element w kafelku, w zadnym
   razie nie mocniejszy od jego tytulu */
body.ping-ngo .linked-list li.head {
  padding: 0 0 5px; border-top: 0;
  font-size: 9.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-muted); opacity: .75;
}
body.ping-ngo .linked-list li.head + li { border-top: 1px solid var(--border-soft); }
body.ping-ngo .linked-list li.head > span { justify-self: start; }
body.ping-ngo .linked-list .nm { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--navy); }
body.ping-ngo .linked-list .id { font-size: 12px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
/* status jako kropka + tekst. Pigulki przy kazdym wierszu krzyczaly mocniej niz
   nazwa konta, a to nazwa jest tu trescia - kolor niesie sama kropka. */
body.ping-ngo .linked-list .st {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap; color: var(--fg-secondary);
}
body.ping-ngo .linked-list .st .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
body.ping-ngo .linked-list .st.ok   .dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent); }
body.ping-ngo .linked-list .st.wait .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(255,111,0,.16); }
body.ping-ngo .linked-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--fg-secondary); }

/* ── "ZACZNIJ OD NOWA" na ekranie zuzytego linku ── */
body.ping-ngo .container.text-center > h5 {
  max-width: 620px; margin: 8px auto 0; font-size: 16px; font-weight: 400;
  line-height: 1.5; color: var(--navy) !important;
}
body.ping-ngo .restart-wrap { margin-top: 18px; }
body.ping-ngo .restart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent) !important; color: #fff !important;
  border-radius: 999px; padding: 11px 24px; font-weight: 600; font-size: 15px;
  text-decoration: none; box-shadow: 0 4px 14px rgba(255,111,0,.28);
}
body.ping-ngo .restart-btn:hover { background: var(--accent-hover) !important; }


/* ── EKRANY POZA STRONA GLOWNA: ZMIESCIC SIE BEZ PRZEWIJANIA ──
   Pico daje <main class="container"> duzy zapas w pionie (30 px gory, 60 px dolu),
   a stopka ma po 20 px paddingu. Przy karcie kont plus formularzu to wystarczalo,
   zeby linki stopki wypadly pod krawedz okna i trzeba bylo scrollowac po nic.
   Uwaga: przy DUZEJ liczbie polaczonych kont strona i tak bedzie dluzsza - wtedy
   przewijanie jest uzasadnione i dlatego nie ma tu overflow:hidden. */
body.ping-ngo:not(.home) main { padding-top: 10px !important; padding-bottom: 8px !important; }
body.ping-ngo:not(.home) main > .container { padding-bottom: 8px !important; }
/* main.css trzyma stopke jako position:fixed z BIALYM tlem - poza strona glowna
   zaslaniala tresc i odcinala sie bialym pasem od reszty. Ma plynac z trescia
   i byc przezroczysta, tak jak na stronie glownej. */
body.ping-ngo footer { position: static !important; background: transparent !important; }
body.ping-ngo:not(.home) footer { padding-top: 2px !important; padding-bottom: 6px !important; }
body.ping-ngo:not(.home) footer .container { padding-top: 2px; padding-bottom: 8px; }
/* Lista kont przewija sie W SOBIE. Dzieki temu wysokosc strony nie zalezy od tego,
   ile kont ma dana organizacja - przy dziesieciu tez zmiesci sie bez scrollowania
   calej strony po linki stopki. */
body.ping-ngo .linked-list { max-height: 148px; overflow-y: auto; scrollbar-width: thin; }
body.ping-ngo .linked-list::-webkit-scrollbar { width: 6px; }
body.ping-ngo .linked-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
body.ping-ngo:not(.home) .linked-box { margin-bottom: 9px; padding: 13px 18px 12px; }
body.ping-ngo:not(.home) .linked-list li { padding: 6px 0; }

body.ping-ngo:not(.home) form.self-center { padding: 14px 18px 13px; }
body.ping-ngo:not(.home) form.self-center input[type="text"],
body.ping-ngo:not(.home) form.self-center input[type="email"],
body.ping-ngo:not(.home) form.self-center input[type="tel"],
body.ping-ngo:not(.home) form.self-center select { margin-bottom: .38rem !important; }
body.ping-ngo:not(.home) .form-title { margin-bottom: 9px; }

/* ── STOPKA: linki po lewej, klauzula Google po PRAWEJ, w jednej linii ── */
body.ping-ngo footer .container {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  max-width: none; padding: 6px 24px 18px;
}
body.ping-ngo footer nav { flex: 0 0 auto; }
body.ping-ngo footer nav > ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
/* Odstep po OBU stronach kreski musi byc taki sam. Wczesniej doliczal sie jeszcze
   flexowy gap, wiec przed kreska bylo 8+18 px, a za nia 8 px - tekst "kleil sie"
   do kreski po swojej lewej. Teraz caly odstep robi symetryczny padding li. */
body.ping-ngo footer nav > ul > li { padding: 0 18px; }
body.ping-ngo footer nav > ul > li:first-of-type { padding-left: 0; }
body.ping-ngo footer nav > ul > li:last-of-type { padding-right: 0; }
body.ping-ngo footer, body.ping-ngo footer li { color: var(--navy) !important; font-weight: 500; }
/* main.css: "body.home > footer li { color:white; border-color:white }" - kreski
   rozdzielajace byly biale i ginely na jasnym tle */
body.ping-ngo footer nav > ul > li { border-color: rgba(39,73,91,.3) !important; }
body.ping-ngo footer a { color: var(--navy) !important; font-weight: 600; text-decoration: none; }
body.ping-ngo footer a:hover { color: var(--accent) !important; text-decoration: underline; }
/* klauzula Google - w JEDNEJ LINII z linkami stopki, przy prawej krawedzi */
body.ping-ngo .footer-legal {
  width: 110%; margin-left: -10%; padding: 0 30px 0 10%;
  text-align: center;
  font-size: .66rem; line-height: 1.35; font-weight: 400; color: var(--fg-secondary) !important;
}
body.ping-ngo .footer-legal a { color: var(--fg-secondary) !important; font-weight: 400 !important; text-decoration: underline; }

/* ── JEDEN EKRAN, BEZ PRZEWIJANIA ── */
/* 2026-08-09: regula "jeden ekran bez przewijania" obowiazuje TYLKO strone glowna
   (body.home). Na ekranie wyboru konta tresc bywa dluzsza niz okno - formularz plus
   lista kont juz polaczonych - i overflow:hidden po prostu ja UCINAL. Tam strona ma
   sie normalnie przewijac. */
@media (min-height: 640px) and (min-width: 861px) {
  body#body.ping-ngo.home { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.ping-ngo.home header, body.ping-ngo.home footer { flex: 0 0 auto; }
  body.ping-ngo.home main { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; }
  body.ping-ngo.home main > .grid { flex: 1 1 auto; min-height: 0; width: 100%; }
  body.ping-ngo.home footer { margin-top: auto; }
}
/* poza strona glowna stopka i tak ma siedziec na dole, gdy tresci jest malo */
body.ping-ngo:not(.home) { display: flex; flex-direction: column; min-height: 100vh; }
body.ping-ngo:not(.home) main { flex: 1 0 auto; }
body.ping-ngo:not(.home) footer { flex: 0 0 auto; margin-top: auto; }
body.ping-ngo:not(.home) main > .container { padding-bottom: 26px; }
@media (max-width: 860px) {
  body.ping-ngo footer .container { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  body.ping-ngo .footer-legal { width: auto; margin-left: 0; padding: 0; text-align: left; }
}
/* ── TELEFON ──
   main.css robi tu trzy rzeczy, ktore na waskim ekranie rozwalaja strone:
   1) .left zostaje pomalowana na #407490 (ciemny pas w poprzek),
   2) .right ma width:110% + margin-left:-10% (strona przewija sie w BOK),
   3) .content-grid dostaje display:none - znikaja kroki 1/2/3, czyli cala tresc,
      ktora tlumaczy, co sie stanie po kliknieciu "Polacz".
   Do tego regula "jeden ekran bez przewijania" musi obowiazywac TYLKO na szerokich
   ekranach - telefon ma wiecej niz 640 px wysokosci, wiec lapal overflow:hidden
   i ucinal tresc. */
@media (max-width: 860px) {
  body#body.ping-ngo { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
  body.ping-ngo main { display: block; overflow: visible; }
  /* kolejnosc na telefonie: najpierw CTA, dopiero pod nim lista zasad. Dlatego
     siatka jest tu flexem w pionie - w display:block wlasciwosc order nie dziala. */
  body.ping-ngo main > .grid { display: flex; flex-direction: column; height: auto !important; }
  body.ping-ngo main > .grid > .right { order: 1; }
  body.ping-ngo main > .grid > .left  { order: 2; min-height: 0; height: auto; }
  body.ping-ngo main > .grid > .left,
  body.ping-ngo main > .grid > .right {
    width: auto !important; margin-left: 0 !important;
    background: transparent !important;
    padding-left: 20px !important; padding-right: 20px !important;
  }
  /* logo pokazujemy w naglowku (main.css chowa je klasa grid-only-big), a duplikat
     z lewej kolumny znika - inaczej wedrowalby razem z lista pod przycisk */
  body.ping-ngo header nav.container .grid-only-big { display: inline-flex !important; }
  body.ping-ngo .left nav.only-small { display: none !important; }
  body.ping-ngo .grid > .right { padding-top: 4px !important; padding-bottom: 18px !important; }
  body.ping-ngo .google-button a { width: 100% !important; }
  body.ping-ngo .wu-verified { white-space: normal; }
  /* kroki wracaja - jedna kolumna */
  body.ping-ngo .grid.content-grid { display: grid !important; grid-template-columns: 1fr; gap: 14px; }
  body.ping-ngo footer { position: static !important; }
  /* przy zawijaniu kreska trafiala na POCZATEK drugiego wiersza - na waskim
     ekranie rozdzielamy linki odstepem, bez kresek */
  body.ping-ngo footer nav > ul { flex-wrap: wrap; row-gap: 6px; column-gap: 18px; }
  body.ping-ngo footer nav > ul > li { padding: 0 !important; border-left: 0 !important; }
}

/* ── TELEFON: DOMKNIECIE ──
   Te reguly musza stac na KONCU pliku. Wczesniej siedzialy w bloku mobilnym wyzej
   i nie dzialaly: przy tej samej specyficznosci wygrywa regula pozniejsza w pliku,
   a ograniczenie wysokosci listy (.linked-list max-height) jest definiowane nizej.
   Na telefonie strona i tak sie przewija, wiec kafel nie chowa wierszy w sobie. */
@media (max-width: 860px) {
  body.ping-ngo .linked-list { max-height: none; overflow: visible; }
  /* Na waskim ekranie siatka trzech slupkow nie ma sensu - nazwa dostaje cala
     szerokosc, a pod nia numer po lewej i status dosuniety do prawej krawedzi. */
  body.ping-ngo .linked-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 8px 0; }
  body.ping-ngo .linked-list .nm { flex: 1 1 100%; }
  body.ping-ngo .linked-list .id { flex: 0 0 auto; }
  body.ping-ngo .linked-list .st { flex: 0 0 auto; margin-left: auto; }
}

/* ── WASKI TELEFON (do 430 px) ──
   Na 390 px - czyli tym, co ma wiekszosc telefonow - kilka elementow ledwo sie
   miescilo: znak weryfikacji dotykal prawej krawedzi, status w kafelku kont sie
   do niej kleil, a piaty link stopki spadal sam do drugiego wiersza. */
@media (max-width: 430px) {
  body.ping-ngo .wu-verified {
    max-width: 100%; font-size: .8rem !important; padding: 7px 12px;
    margin: 14px 0 18px !important;
  }
  body.ping-ngo .linked-list .st { font-size: 10.5px; }
  body.ping-ngo .linked-list .nm { font-size: 13px; }
  body.ping-ngo .linked-list .id { font-size: 11.5px; }
  body.ping-ngo .linked-box { padding-left: 15px; padding-right: 15px; }
  body.ping-ngo footer nav > ul { column-gap: 14px; row-gap: 4px; font-size: .92em; }
  body.ping-ngo .grid > .right h1 { font-size: 1.62rem; }
  body.ping-ngo:not(.home) main > .container { padding-left: 12px; padding-right: 12px; }
}