/* ==========================================================================
   case.css — strona pojedynczej realizacji (/case-study/<nazwa>/)
   Prefiks `cs2__` — świadomie inny niż `cs__` starej wersji w content.css,
   żeby obie mogły stać obok siebie w czasie przeglądu, nie nadpisując się.

   ZASADA: tu stoi TYLKO to, czego wspólny system nie ma. Nagłówki, przyciski,
   makieta okna, makieta wyników Google, karty wyników, dwie kolumny i wjazdy
   przy przewijaniu bierzemy z public/css/svc.css.

   Wszystko scopowane pod `.svc--case` — zero wycieków do reszty serwisu.
   ========================================================================== */

.svc--case {
  --tlo-wyciecia: #101015;   /* kolor tła karty — rysunki zasłaniają nim to, co pod nimi */
  --karta: linear-gradient(180deg, var(--surface-raised), var(--surface-sunken));
}

/* ===== 1. OTWARCIE ======================================================== */

.cs2__herogrid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .cs2__herogrid { grid-template-columns: 1.02fr .98fr; }
}

/* ⚠️ Pasek okruszków („Strona główna / Realizacje”) i nadtytuł z czerwoną kropką
   zostały usunięte z otwarcia 16.08.2026 na polecenie Karola — czyste otwarcie,
   bez elementów, które zajmują miejsce i nic nie wnoszą. Ścieżka dla Google
   (`breadcrumbSchema` w szablonie podstrony) została nietknięta, więc Google dalej
   ma z czego złożyć ścieżkę pod adresem w wynikach wyszukiwania. */

/* Tytuł realizacji bywa długi („Sklep z armaturą łazienkową w topie wyników
   Google”), więc idzie stopień niżej niż H1 na podstronach usługowych. */
.cs2__h1 { margin-top: 14px; font-size: clamp(32px, 3.7vw, 54px); }

/* Metryczka: klient, branża, usługa, okres — jeden wiersz danych o projekcie. */
.cs2__meta {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.cs2__meta > div {
  padding: 11px 16px;
  border: 1px solid var(--border-card);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
/* 🔴 17.08.2026, RUNDA 4 — nagłówki metryczki szły 11 px w kolorze przygaszonym
   (biel 56%). To jeden z małych szarych napisów, o których Karol pisze trzeci raz:
   „uczulałem 100 razy, żebyś tak nie pisał, bo to jest słabo widoczne”. Idą 13 px
   w kolorze treści (biel 80%). */
.cs2__meta dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-body);
}
.cs2__meta dd {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Dopisek pod przyciskiem („Bez zobowiązań…”) usunięty w rundzie 4 razem ze stylem
   `.cs2__ctanote` — patrz komentarz w [slug].astro. */

/* ----- Makieta w otwarciu ----- */
.cs2__win { width: 100%; }

/* 🔴 RUNDA 4, przegląd małych szarych napisów. Podpis paska okna („Wyniki
   wyszukiwania Google”, „Wyniki lokalne w Google”) szedł 13 px w kolorze
   przygaszonym — to ten sam rodzaj napisu, na który Karol uczula od trzech rund.
   Podnosimy go tutaj, pod `.svc--case`, a nie w svc.css: tamten arkusz jest wspólny
   z podstronami usługowymi i ma niezapisane zmiany drugiej sesji. */
.svc--case .svc-win__label { font-size: 14px; color: var(--text-body); }
/* ⚠️ NIE ruszamy szarości adresu strony w wynikach (`.serp__u`) ani numerów cudzych
   pozycji: tam szarość nie jest naszym stylem, tylko wyglądem samego Google. */
.cs2__serprows { margin-top: 10px; display: grid; gap: 4px; }

/* Wiersz wyniku: treść po lewej, miejsce w rankingu po prawej. */
.serp__row { position: relative; padding-right: 46px; }
.cs2__serptxt { min-width: 0; flex: 1; }

/* Zastępcze wiersze opisu w wynikach, których NIE mamy w danych. To celowo
   paski, a nie zmyślony tekst — makieta pokazuje układ wyników, a jedyne
   prawdziwe napisy w niej (fraza, nazwa klienta, domena, pozycja) pochodzą
   z realizacji. */
.cs2__serpline {
  display: block;
  width: var(--w, 70%);
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .09);
}
.serp__row--you .cs2__serpline { background: rgba(255, 255, 255, .16); }
/* Pierwszy pasek w cudzym wyniku stoi w miejscu tytułu — jaśniejszy i wyższy,
   tak jak niebieski odsyłacz w prawdziwych wynikach Google. */
.cs2__serpline--tyt { height: 9px; margin-top: 2px; background: rgba(138, 180, 248, .3); }

.cs2__poz {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--serp-mut);
  border: 1px solid var(--serp-line);
  font-variant-numeric: tabular-nums;
}
.serp__row--you .cs2__poz {
  color: #fff;
  border-color: transparent;
  background: var(--accent-default);
  box-shadow: 0 0 12px 2px rgba(255, 44, 44, .45);
}

/* ----- Kadr ze scenką klienta — otwarcie realizacji reklamowych --------------
   🔴 17.08.2026, RUNDA 4. Stała tu makieta reklamy: pasek okna z napisem „Reklama
   w kanale odbiorcy”, nazwa klienta, „Sponsorowane”, paski w miejscu tekstu reklamy,
   kadr z rysunkiem i przycisk „Kup teraz”. Karol: „realnie wartość niesie tylko
   grafika tego produktu i ta szczotka obok, całość jest zamknięta w dużej sekcji,
   która zajmuje dużo miejsca a mało mówi”. Rozbiór jest w [slug].astro; w skrócie:
   reklama w kanale to w większości TEKST, którego w danych realizacji nie ma,
   a wymyślać go nie wolno. Po odjęciu wszystkiego, czego nie mamy, zostaje rysunek.
   Kadr jest tym samym elementem co tło scenek kroków (`.cs2__krokviz`): ta sama
   poświata, ta sama ramka, ten sam promień — otwarcie i sekcja „Co zrobiliśmy”
   mówią jednym językiem. Style makiety wracają z `.claude/tmp/kopia-runda3/`. */
.cs2__scenka {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 24px;
  background: radial-gradient(120% 130% at 50% 0%, rgba(255, 44, 44, .12) 0%, transparent 62%), #0e0e12;
  border: 1px solid var(--border-card);
  color: #fff;
}
.cs2__scenka svg { width: 100%; height: 100%; display: block; }
@media (max-width: 899px) {
  .cs2__scenka { padding: 26px; aspect-ratio: 5 / 4; }
}

/* ===== 1b. LOGOTYP KLIENTA =============================================
   🔴 17.08.2026, RUNDA 5. Karol: „pierwotnie zawierały one logotypy klientów (…)
   chcę aby one wróciły w którejś z wysokich sekcji, może pod hero”.

   To jest PASEK, nie sekcja — celowo. Otwarcie i „Co z tego wyszło” zajmują po
   pełnej wysokości ekranu (`svc-sec--full`); logotyp między nimi ma być przejściem
   od „kto to jest” do „co z tego wyszło”, a nie trzecim ekranem z jednym obrazkiem
   na środku. Dwie włoskowate linie zamykają go od góry i od dołu, więc znak ma
   swoje miejsce zamiast wisieć w pustce.

   ⚠️ MONOCHROM JAK NA STRONIE GŁÓWNEJ. Pliki logotypów są w oryginalnych kolorach,
   a część jest ciemna — Artsento ma brąz #39280f, który na czarnym tle po prostu
   znika. `brightness(0) invert(1)` zamienia każdy z nich w biały znak: dokładnie ten
   sam zabieg, co przy planszy „Zaufali nam” (decyzja Karola 10.07: „wszystkie loga
   w IDENTYCZNYM monochromie”). Pełne krycie, nie 0,75 jak na planszy — tam logotyp
   jest jednym z dziewiętnastu w tle, tutaj jest znakiem bohatera tej podstrony. */
.cs2__sec--logo { position: relative; }
/* ⚠️ STAŁA WYSOKOŚĆ PASKA. Logotypy mają różne proporcje, więc przy samym marginesie
   pasek wychodził od 153 px (Vobmat, szeroki napis) do 271 px (SaliMali, kwadrat) —
   czyli siedem realizacji miało w tym miejscu siedem różnych rytmów. Wysokość jest
   wspólna, a znak stoi w jej środku. */
.cs2__logo {
  margin: 0;
  min-height: 270px;
  padding: clamp(26px, 3.2vw, 42px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.cs2__logo img {
  height: var(--logo-wys, 60px);
  width: auto;
  max-width: 100%;
  /* Zabezpieczenie na wypadek, gdyby `max-width` przyciął szerokość: bez tego
     przeglądarka trzymałaby sztywną wysokość i spłaszczyła znak. */
  object-fit: contain;
  filter: brightness(0) invert(1);
}
/* Na węższych ekranach logotyp schodzi proporcjonalnie — przy 1440 px Artsento ma
   471 px szerokości, a w oknie 390 px na treść zostaje ok. 350 px. Dwa progi zamiast
   jednego, bo między komputerem a telefonem jest jeszcze tablet. */
/* Współczynniki policzone od najszerszego znaku, nie dobrane na oko: Vobmat ma
   proporcję 7 : 1, więc to on pierwszy dobija do krawędzi treści. Przy 390 px okna
   na treść zostaje ok. 350 px, czyli Vobmat mieści się do wysokości 48 px — stąd 0,7
   (47 px, szerokość 330 px). Przy tym współczynniku wszystkie pozostałe też się
   mieszczą, a znak jest tak duży, jak się da. */
@media (max-width: 899px) {
  .cs2__logo { min-height: 220px; padding: clamp(24px, 3vw, 34px) 0; }
  .cs2__logo img { height: calc(var(--logo-wys, 60px) * .82); }
}
@media (max-width: 640px) {
  .cs2__logo { min-height: 190px; }
  .cs2__logo img { height: calc(var(--logo-wys, 60px) * .7); }
}

/* ===== 2. WYNIK NA WIERZCHU ============================================== */

/* 🔴 RUNDA 4 — „za duży spacing” w tej sekcji. Odstęp nagłówek → karty zszedł
   z 44 na 30 px, a wnętrze karty z 28 na 24 px. */
.cs2__res { margin-top: 30px; gap: 18px; }
.svc--case .cs2__kafel { padding: 24px; }

/* 🔴 Wspólna skala pisma z svc.css (`.svc p, .svc li`) ma wyższą wagę niż
   `.res-card__num` i ścinała wielką liczbę wyniku do rozmiaru zwykłego akapitu.
   Ten sam mechanizm opisano przy kartach realizacji na /o-nas/. Przywracamy
   wielkości z systemu, celując przez `.svc--case`, żeby waga była wyższa. */
.svc--case .res-card__num { font-size: clamp(38px, 3.3vw, 52px); line-height: 1; }
.svc--case .res-card__what { font-size: 16px; line-height: 1.4; }
/* Zapis „było → jest” zamiast pary pasków (spadek jako sukces, brak wartości
   wyjściowej) idzie na dół karty, żeby karty w rzędzie kończyły się równo. */
.svc--case .res-card__ba { font-size: 15px; margin-top: auto; padding-top: 16px; }
.svc--case .res-card__tag { font-size: 12px; }
.cs2__res--4 { grid-template-columns: repeat(4, 1fr); }
.cs2__res--2 { grid-template-columns: repeat(2, 1fr); max-width: 840px; margin-inline: auto; }
.cs2__res--1 { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
@media (min-width: 900px) and (max-width: 1200px) {
  /* Cztery karty w rzędzie schodzą poniżej 250 px i wielka liczba przestaje się
     mieścić w jednym wierszu — na tej szerokości idą dwa razy po dwie. */
  .cs2__res--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Para pasków „było → jest” w karcie wyniku ----------------------------
   🔴 17.08.2026, RUNDA 4 — pionowe słupki zamienione na poziome. Uwaga Karola do
   poprzedniej wersji, cztery zarzuty w jednym zdaniu: „w sekcji źle dostrojone,
   nie ma sensu ten układ, za duży spacing, złe proporcje — z prawej więcej miejsca
   w każdej sekcji niż z lewej. jeden słupek podpisany, ponad drugi nie, tylko jest
   wynik w lewym górnym rogu. strzałka wzrostu w lewym dolnym też wrzucona dziwnie”.
   Zmierzone przed poprawką: karta 330 px, po odjęciu wewnętrznego marginesu 274 px,
   rysunek sztywne 220 px przy lewej krawędzi → 54 px pustki po prawej w KAŻDEJ karcie.
   Poziomy pasek nie ma stałej szerokości, więc pustka znika z definicji.
   Karta czyta się teraz z góry na dół jako jedno zdanie: nazwa metryki → ile było
   (podpis nad krótszym paskiem) → ile jest (wielka liczba nad pełnym paskiem) →
   o ile więcej. Wielka liczba JEST podpisem swojego paska — dokładnie to, o co Karol
   prosił: „albo połącz wielką liczbę ze słupkiem wizualnie”.
   Kolory: oba paski białe, punkt wyjścia przygaszony, wynik pełny. Czerwień w tym
   serwisie znaczy problem, nie wzrost (decyzja Karola 16.08.2026). */
.svc--case .res-card { display: flex; flex-direction: column; }

/* Nazwa metryki stoi teraz NAD liczbą, więc nie ma marginesu z góry (svc.css daje
   jej 7 px w układzie, w którym szła pod liczbą).
   🔴 17.08.2026, RUNDA 5b — POWIĘKSZONA Z 16 NA 21 PX. Karol: „w co z tego wyszło
   napisy nad cyframi w każdym case do powiększenia, są nieproporcjonalnie małe do
   cyfr”. Zmierzone: etykieta 16 px przy liczbie 47,5 px, czyli jedna trzecia jej
   wielkości — a to ona mówi, CZEGO ta liczba dotyczy, więc nie jest podpisem do niej,
   tylko pierwszym zdaniem karty. Przy 21 px stosunek to jedna druga. */
.svc--case .cs2__kafellab {
  margin-top: 0;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.35;
  font-weight: 600;
}

.cs2__para { margin-top: 16px; }

/* ----- Jeden pasek zamiast dwóch --------------------------------------------
   🔴 17.08.2026, RUNDA 5. Karol o Vobmacie: „strasznie małe było 6 i szare, ledwo
   widoczne. te sekcje dalej średnio wyglądają u każdego klienta i wymagają szlifów
   na pewno”, a o dolnej granicy 8% długości paska — że to obejście, nie rozwiązanie.

   Do rundy 4 stały tu DWA paski: krótki „było” i pełny „jest”. Przy Vobmacie (13 → 243
   i 6 → 94) punkt wyjścia to 5–6% wyniku, więc pierwszy pasek wychodził na 24 px przy
   wysokości 16 — kropka. Zdjęcie granicy tego nie ratuje, bo osobny pasek dla wartości
   dwudziestokrotnie mniejszej zawsze będzie wyglądał na usterkę składu.

   Jest JEDEN pasek na całą szerokość karty — to wynik. Jego początkowy odcinek,
   przygaszony i odcięty krawędzią w kolorze tła, to punkt wyjścia. Pasek jest zawsze
   wypełniony do końca, więc nic się nie urywa, a proporcja jest prawdziwa co do procenta
   — bez dolnej granicy i bez naciągania.
   Cofnięcie: para pasków `.cs2__pasek--po` leży w `.claude/tmp/kopia-runda4/`. */
.cs2__parator {
  display: block;
  margin-top: 14px;
  height: 18px;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
}
.cs2__pasek {
  display: block;
  width: var(--w, 50%);
  height: 100%;
  /* ⚠️ KOLOR KRYJĄCY, NIE PRZEZROCZYSTY. Pierwsze podejście miało tu biel z kryciem
     26% — a że odcinek leży NA BIAŁYM pasku, biel na bieli dała biel i punktu wyjścia
     w ogóle nie było widać (sprawdzone na Keratynowni, gdzie odcinek zajmuje 44%
     paska). Ta wartość to biel 26% policzona na tle karty, tylko wpisana wprost. */
  background: #4d4d55;
  /* Krawędź w kolorze tła karty — odcinek początkowy ma być widoczny jako osobna
     wartość, a nie jako przygaszony początek tego samego paska. */
  border-right: 2px solid var(--tlo-wyciecia);
}
/* 🔴 RUNDA 5 — PODPIS PUNKTU WYJŚCIA WIĘKSZY I JAŚNIEJSZY. Karol: „strasznie małe
   było 6 i szare, ledwo widoczne”. Szedł 16 px w kolorze treści (biel 80%) obok liczby
   wyniku mającej 52 px. Idzie 18 px pełną bielą i stoi POD paskiem, przy jego lewym
   końcu — czyli dokładnie tam, gdzie na pasku siedzi odcinek, który opisuje. */
.cs2__paraprzed {
  display: block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Wielka liczba siedzi tuż nad swoim paskiem — to ona jest jego podpisem. */
.svc--case .cs2__paraliczba { margin-top: 16px; }

/* Pasek narasta, gdy karta wjedzie w kadr — ten sam ruch, co przy liczbie wyszukań. */
html.js .svc--case [data-rv] .cs2__parator {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2, .8, .25, 1) .2s;
}
html.js .svc--case [data-rv].is-in .cs2__parator { transform: none; }

/* Wspólna wysokość bloku z liczbą — tylko w rzędzie, w którym CHOĆ JEDNA karta ma
   parę pasków. Pizzeria ma jedną taką kartę i dwie bez; bez tego karty kończyłyby
   się na trzech różnych wysokościach. Gdzie par nie ma wcale (Artsento, SaliMali),
   nic nie jest rozpychane na siłę. */
.cs2__res--pary .cs2__kafelliczba { margin-top: auto; padding-top: 24px; }
/* Skoro liczba zjechała na dół karty, zapis „było → jest” idzie tuż pod nią,
   a nie odpychany drugim `margin-top: auto` na sam spód. */
.cs2__res--pary .res-card__ba { margin-top: 14px; padding-top: 14px; }
/* Wolne miejsce rozkłada się nad blokiem z liczbą i pod nim, więc w karcie bez pary
   pasków liczba stoi w środku karty, a nie przyklejona do dolnej krawędzi. */
.cs2__res--pary .cs2__kafel > :last-child { margin-bottom: auto; }

/* 🔴 RUNDA 5 — RZĄD, W KTÓRYM ŻADNA KARTA NIE MA PARY PASKÓW (Artsento, SaliMali).
   Karol: „karty bez pary pasków mają dużo pustego miejsca”. Zmierzone u SaliMali:
   pierwsza karta ma plakietkę zmiany („+2 200 w ostatnim miesiącu”), dwie pozostałe
   nie mają nic poza nazwą i liczbą — a że karty w rzędzie mają wspólną wysokość,
   pod tymi dwiema zostawało ok. 50 px pustki przyklejonej do dołu. Treść krótszych
   kart staje na środku, więc puste miejsce rozkłada się nad nią i pod nią. */
.cs2__res:not(.cs2__res--pary) .cs2__kafel { justify-content: center; }

/* Liczby z panelu kampanii — pasek pod kartami wyniku. Wchodzi tylko to, czego
   w kartach NIE MA, więc jest uzupełnieniem, a nie powtórzeniem. */
.cs2__panel2 {
  list-style: none;
  margin: 22px 0 0;
  /* Szerokość na miarę treści. Przy jednym wierszu (Keratynownia, SaliMali) pasek
     rozciągnięty na całe 1360 px to była wielka pusta belka z jednym napisem
     przy lewej krawędzi — czyli dokładnie „dużo miejsca, mało treści”. */
  width: fit-content;
  max-width: 100%;
  padding: 18px 26px;
  /* Elementy w rzędzie przy lewej krawędzi, nie rozciągane na równe kolumny —
     przy dwóch liczbach siatka rozrzucała je na przeciwne końce paska. */
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
  background: var(--karta);
  border: 1px solid var(--border-card);
  border-radius: 20px;
}
.cs2__panel2 li { display: flex; align-items: baseline; gap: 12px; }
.cs2__panel2 strong {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.cs2__panel2 span { font-size: 15px; color: var(--text-body); }

/* Procent zmiany. 🔴 RUNDA 4 — Karol: „strzałka wzrostu w lewym dolnym rogu też
   wrzucona dziwnie”. Stała tam luzem, bez ramki i bez związku z resztą karty, więc
   czytała się jak element, który się obsunął. Teraz jest zamkniętą plakietką na dole
   karty — końcem ciągu „było → jest → o ile”. */
.cs2__zmiana {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Strzałka w wierszu „było → jest” też idzie bielą. Nadpisujemy tylko na podstronie
   realizacji, żeby nie ruszać wspólnego arkusza `svc.css`, z którego korzystają
   podstrony usługowe. */
.svc--case .res-card__ba svg { color: var(--text-primary); opacity: .55; }

/* Strzałka przy procencie zmiany — BIAŁA, w obie strony.
   ⚠️ Na kartach wyników każda zmiana jest sukcesem: strzałka w dół stoi przy koszcie
   zakupu i przy numerze pozycji w Google, gdzie mniej znaczy lepiej. Czerwona strzałka
   mówiła więc kolorem „problem", a treścią „sukces". */
.cs2__zmiana i { display: inline-flex; width: 19px; color: var(--text-primary); }
.cs2__zmiana i svg { width: 19px; height: 19px; }

/* ----- Duży wykres w osobnej sekcji — style usunięte 17.08.2026 -------------
   Sekcja zniknęła ze strony (patrz komentarz w `src/pages/case-study/[slug].astro`),
   więc znikają też jej style: `.cs2__wykres*`, `.cs2__legenda`, `.cs2__leg`
   i cały zestaw `.cwyk*`. Wracają razem z sekcją z zapisu f6c7fb6. */

.cs2__wyroznienie {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 30px auto 0;
  max-width: 780px;
  padding: 18px 24px;
  border: 1px solid rgba(255, 44, 44, .3);
  border-radius: 18px;
  background: rgba(255, 44, 44, .06);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
}
.cs2__wyroznienie i { display: inline-flex; width: 22px; flex: none; margin-top: 1px; color: var(--accent-default); }
.cs2__wyroznienie i svg { width: 22px; height: 22px; }

/* ===== 3. PUNKT WYJŚCIA ================================================== */

/* 🔴 17.08.2026: kolumny miały wysokość własnej treści (`align-items: start`),
   więc obok długiego opisu klienta stała krótka lista problemów i pod nią pusty
   ekran. Karol: „dwie sekcje nieproporcjonalnie rozmieszczone”. Teraz mają wspólną
   wysokość, a szerokości są bliższe równym. */
.cs2__fit { align-items: stretch; }
@media (min-width: 900px) {
  .cs2__fit { grid-template-columns: 1.04fr .96fr; }
}

/* ----- Scenka branżowa: wyprowadzona z tej sekcji 17.08.2026 ----------------
   Karol: „nie rozumiem, dlaczego jest akurat tutaj”. Rysunek produktu klienta stoi
   teraz w otwarciu — przy SEO jako znaczek strony w wynikach Google, przy reklamach
   jako kadr reklamy (`.cs2__adkadr`). Style `.cs2__branza*` i `.cs2__kolstart`
   wracają razem z nią z zapisu f6c7fb6.

   ⚠️ Kolumny mają teraz WSPÓLNĄ WYSOKOŚĆ (`align-items: stretch` zamiast `start`),
   a punkty w krótszej kolumnie rozkładają się na całą jej wysokość. Karol:
   „dwie sekcje nieproporcjonalnie rozmieszczone: »co nie zadziałało« bardzo krótkie,
   obok duża sekcja rozciągnięta”. */
.cs2__kolproblem { display: flex; flex-direction: column; }
.cs2__kolproblem .fit__list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 18px; }

/* ⚠️ 17.08.2026, audyt treści — WYJĄTEK PRZY DWÓCH PUNKTACH.
   Rozłożenie na całą wysokość działa, dopóki punktów jest trzy. SuperMed ma po
   audycie dwa (z pięciu wierszy źródła trzy były etykietami „Główne potrzeby
   klienta:” i „Problemy:” oraz powtórzeniem celu) i wtedy `space-evenly` robi
   z kolumny dwie dziury po ok. 90 px zamiast równego rytmu — czyli dokładnie to,
   co Karol wytknął przy tej sekcji. Lista idzie wtedy od góry ze stałym odstępem. */
.cs2__kolproblem--malo .fit__list { justify-content: flex-start; gap: 26px; }

/* Znaczek branżowy w kółku wyniku Google — zamiast pierwszej litery nazwy. */
.serp__fav svg { width: 62%; height: 62%; display: block; }

.cs2__intro { margin-top: 20px; }
.cs2__intro p { font-size: 17px; line-height: 1.68; color: var(--text-body); }
.cs2__intro p + p { margin-top: 14px; }

/* Podnagłówek wewnątrz opisu sytuacji na starcie („Problem?” u Keratynowni).
   🔴 17.08.2026, RUNDA 4. Karol: „okej, tylko bym bardziej wyeksponował nagłówek
   problem”. Linia jest w treści realizacji i szła dotąd jako zwykły akapit, więc
   niczym się nie różniła od zdania obok. Teraz ma wielkość i wagę nagłówka oraz
   czerwony znacznik z lewej — ten sam sposób wyróżnienia, co nadtytuły w serwisie. */
.cs2__introh {
  position: relative;
  margin: 26px 0 0;
  padding-left: 16px;
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
.cs2__introh::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-default);
}
.cs2__introh + p { margin-top: 12px; }
/* Znaczniki problemów: minus, nie ptaszek — to lista rzeczy, które nie działały. */
.cs2__ico--minus { background: rgba(255, 44, 44, .14); color: #FF6B6B; }

/* ===== 4. CELE =========================================================== */

/* 🔴 17.08.2026 — układ karty celu z pionowego na poziomy. Karol: „sekcja dla mnie
   niezrozumiała (…) nie wygląda dobrze i nic nie mówi”. Karta miała wielki znak
   u góry, numer w przeciwnym rogu i jedno zdanie nisko pod spodem — dwie trzecie
   powierzchni stało puste, a numer w rogu nie mówił, czym w ogóle jest. Teraz znak
   stoi przy treści, nad treścią jest podpis „Cel 1”, a karta jest tak wysoka,
   jak wysoka jest jej zawartość. */
/* 🔴 17.08.2026, RUNDA 4 — trzy poprawki naraz. Karol: „o wiele lepiej, ale też
   stylowanie sekcji do poprawy, powiększyłbym ikony, może nawet na całą wysokość
   sekcji, cel 1 i pozostałe szare i mało widoczne, treść do dostylowania, żeby
   wyglądała dobrze”. Zmierzone przed poprawką: znak siedział w kwadracie 52 × 52 px,
   a sam rysunek w środku miał 27 × 27 px — czyli zajmował jedną czwartą powierzchni
   kafelka i jedną dwudziestą powierzchni karty. Podpis „Cel 1” szedł 12 px w kolorze
   przygaszonym (biel 56%), czyli był dokładnie tym małym szarym napisem, na który
   Karol uczula od trzech rund.
     · znak stoi w pasie na CAŁĄ WYSOKOŚĆ karty (jak prosił Karol), a rysunek w nim
       urósł z 27 do 42 px,
     · „Cel 1” idzie 15 px czerwienią marki — tak samo jak „Krok 1” w sekcji niżej,
       więc oba podpisy porządkowe wyglądają na stronie jednakowo,
     · treść celu urosła i dostała luźniejszy interlinię. */
.cs2__cele {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cs2__cel {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--karta);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  transition: transform .25s ease, border-color .25s ease;
}
.cs2__cel:hover { transform: translateY(-4px); border-color: var(--border-accent); }
.cs2__celznak {
  display: grid;
  place-items: center;
  width: 96px;
  flex: none;
  background: rgba(255, 44, 44, .09);
  border-right: 1px solid rgba(255, 44, 44, .24);
  color: var(--accent-default);
}
.cs2__celznak svg { width: 46px; height: 46px; }
.cs2__celtresc { min-width: 0; padding: 26px 28px; }
.cs2__celnr {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent-default);
  font-variant-numeric: tabular-nums;
}
.svc--case .cs2__cel p {
  margin: 10px 0 0;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.5;
  font-weight: 600;
  color: var(--text-primary);
}
@media (max-width: 640px) {
  .cs2__celznak { width: 76px; }
  .cs2__celznak svg { width: 34px; height: 34px; }
  .cs2__celtresc { padding: 22px 22px; }
}

/* ===== 5. CO ZROBILIŚMY — cztery kroki z rysunkami ======================= */

.cs2__kroki {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width: 1025px) {
  /* Dwie kolumny, nie cztery: przy czterech kartach w rzędzie lista podpunktów
     (po trzy wiersze w każdym kroku) schodziła do 11 px i przestawała być czytelna. */
  .cs2__kroki { grid-template-columns: repeat(2, 1fr); }
}
.cs2__krok {
  display: flex;
  flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.cs2__krok:hover { transform: translateY(-4px); border-color: var(--border-accent); }

/* Scenka na górze karty — pełna szerokość, żeby rysunek był bohaterem, a nie
   znaczkiem przy tytule. Wysokość stała, więc karty stoją równo. */
.cs2__krokviz {
  display: grid;
  place-items: center;
  height: 200px;
  padding: 24px;
  background: radial-gradient(120% 130% at 50% 0%, rgba(255, 44, 44, .09) 0%, transparent 62%), #0e0e12;
  border-bottom: 1px solid var(--border-card);
  color: #fff;
}
.cs2__krokviz svg { width: 100%; max-width: 300px; height: 100%; display: block; }

.cs2__krokbody { position: relative; padding: 26px 28px 30px; }
/* 🔴 RUNDA 4 — Karol: „nad nagłówkami jak »dopasowanie przekazu« krok 3 mały”.
   Szło 13 px; idzie 15 px, czyli tyle samo, co podpis „Cel 1” w sekcji wyżej. */
.cs2__kroknr {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent-default);
  font-variant-numeric: tabular-nums;
}
.cs2__krokh {
  margin: 8px 0 0;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
/* 🔴 RUNDA 4 — Karol: „kropki mają za mały font”. Tekst przy punktorach szedł 15 px
   przy kropce 7 px; idzie 16,5 px przy kropce 8 px i pełnym kryciu czerwieni. */
.cs2__kroklist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cs2__kroklist li {
  position: relative;
  padding-left: 24px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-body);
}
.cs2__kroklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-default);
}

/* ===== 6. FRAZY W GOOGLE ================================================= */

.cs2__frazy {
  margin-top: 42px;
  background: var(--karta);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  padding: clamp(20px, 2.4vw, 30px);
}
/* Szerokość na miarę treści — 🔴 RUNDA 5. Tabela stała zawsze na pełnych 1360 px,
   niezależnie od tego, czy ma dziewiętnaście wierszy z trzema kolumnami (SuperMed),
   czy dwa wiersze z dwiema (SaliMali). Karol o tej tabeli: „wyglądają na niedokończone”
   — a puste pole między frazą a liczbą jest częścią tego wrażenia.
   To samo rozwiązanie, co przy karcie wniosku bez cytatu (`.cs2__domkniecie--sam`)
   i przy wyróżnieniu pod kartami wyniku.
     · `--proste` — bez kolumny wyszukań (HydroSan, Vobmat, pizzeria): w wierszu stoi
       fraza i plakietka miejsca, więc wystarcza 720 px,
     · `--krotka` — z kolumną wyszukań, ale do czterech wierszy (SaliMali): 940 px,
       bo pasek wyszukań potrzebuje swojego toru.
   SuperMed zostaje na pełnej szerokości: dziewiętnaście wierszy naprawdę ją wypełnia. */
.cs2__frazy--proste { max-width: 720px; margin-inline: auto; }
.cs2__frazy--krotka { max-width: 940px; margin-inline: auto; }
.cs2__frazyhead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-default);
}
.cs2__frazyzn { display: inline-flex; width: 22px; flex: none; }
.cs2__frazyzn svg { width: 22px; height: 22px; }
/* 🔴 RUNDA 5 — nazwa domeny odpycha kolumny na prawo. Wcześniej robił to margines
   `auto` na pierwszej kolumnie, a że w odmianie bez wyszukań pierwszej kolumny już
   nie ma, nagłówek „pozycja” zostawał przyklejony do domeny. */
.cs2__frazydom { margin-right: auto; font-size: 15px; font-weight: 700; color: var(--text-primary); }
/* 🔴 RUNDA 4 — nagłówki kolumn szły 12 px kolorem przygaszonym. Idą 13 px kolorem
   treści; przegląd małych szarych napisów objął całą podstronę, nie tylko podpis
   pod cytatem, który Karol wskazał palcem. */
.cs2__frazykol {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-body);
}
.cs2__frazykol--poz { width: 74px; text-align: right; }

.cs2__frazylist { list-style: none; margin: 0; padding: 0; }
.cs2__frazylist li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cs2__frazylist li:last-child { border-bottom: 0; }
.cs2__frazylist--zwin .cs2__frazadalej { display: none; }
.cs2__fraza { flex: 1; min-width: 0; font-size: 16px; color: var(--text-primary); }

/* Pasek miesięcznej liczby wyszukań — skala względem najwyższej frazy na liście. */
/* ⚠️ Pasek potrzebuje WŁASNEGO TORU (`.cs2__woltor`), a nie miejsca w rzędzie.
   Dwa podejścia, które nie zadziałały, i dlaczego — żeby nikt nie wracał do nich
   przy następnej poprawce:
   · `display: flex` na całości — pasek łapał `flex: 1` i rozciągał się na całe wolne
     miejsce, więc fraza z 6600 wyszukań miała pasek tej samej długości, co fraza z 1600;
   · `display: grid` z dwiema kolumnami — odstępy między znacznikami w kodzie robiły
     w siatce dodatkowy rząd i wiersz frazy rósł z 57 do 94 px, a pasek z liczbą
     odjeżdżały nad tekst frazy.
   Tor ma stałą szerokość, pasek w środku zajmuje w nim tyle procent, ile wynosi
   udział tej frazy w najczęściej wyszukiwanej. */
.cs2__wolumen {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(46%, 300px);
  flex: none;
}
/* 🔴 17.08.2026, RUNDA 5 — TOR JEST TERAZ WIDOCZNY. Karol o tej tabeli: „mają dziwne
   odcięcia kolorów, wyglądają na niedokończone”. Pasek szedł po niewidocznym torze, więc
   przy frazie z 720 wyszukań (11% najmocniejszej) urywał się w połowie pustego miejsca
   i wyglądał jak pasek, któremu zabrakło rysunku. Na widocznym torze ten sam pasek mówi
   „jedenaście procent najczęściej wyszukiwanej frazy” — pustka po prawej jest wtedy
   informacją, a nie usterką. */
.cs2__woltor {
  flex: 1;
  min-width: 0;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
}
/* Biel, nie czerwień: długość paska mówi, ile razy w miesiącu ludzie wpisują tę frazę.
   To wielkość, a nie ostrzeżenie.
   🔴 RUNDA 5 — JEDNOLITA BIEL ZAMIAST PRZEJŚCIA. Pasek szedł z przejściem od bieli 30%
   po lewej do 85% po prawej, więc każdy kończył się jaśniej, niż zaczynał, i czytał się
   jak niedomalowany. Karol: „dziwne odcięcia kolorów”. Jeden kolor na całej długości. */
.cs2__wolpasek {
  display: block;
  width: var(--w, 50%);
  height: 100%;
  border-radius: 4px;
  background: rgba(255, 255, 255, .85);
}
/* Paski narastają, gdy karta wjeżdża w kadr — ten sam ruch, co słupki wykresu. */
html.js .svc--case [data-rv] .cs2__wolpasek { width: 0; transition: width .8s cubic-bezier(.2, .8, .25, 1) .2s; }
html.js .svc--case [data-rv].is-in .cs2__wolpasek { width: var(--w, 50%); }
.cs2__wolumen em {
  font-style: normal;
  flex: none;
  width: 62px;
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}

/* ----- Miejsce w wynikach ---------------------------------------------------
   🔴 17.08.2026, RUNDA 5 — DRABINA POZYCJI WYCIĘTA, MIEJSCE ZROBIŁO SIĘ PLAKIETKĄ.
   Stało tu dziesięć jednakowych prostokątów (pierwsza dziesiątka wyników Google)
   z jednym zapalonym na biało — pole 280 × 34 px, szczebel 22 px, niezapalone 44%
   wysokości. Karol: „totalnie nie rozumiem tej ikonografiki z miejscem, nie jest ona
   intuicyjna w odbiorze i kiepsko obrazuje miejsce (…) tabelka do redesignu”.
   Dlaczego nie dało się tego poprawić, tylko trzeba było wyciąć: rysunek nie mówił,
   czym jest ta dziesiątka ani że liczy się od lewej, a bez podpisu (małych szarych
   napisów na tej podstronie nie ma) nie było jak tego dopowiedzieć.
   Sama liczba pozycji Karolowi pasowała — „pozycja spoko” — więc to ona przejmuje
   robotę: podium (1–3) to pełna biała plakietka, dalsze miejsca sam obrys. Ta sama
   plakietka stoi w obu odmianach tabeli, więc wersja z paskiem wyszukań i wersja bez
   niego czytają się jak jedna rodzina.
   Cofnięcie: style `.cs2__drabina` leżą w zapisie f6c7fb6 i w `.claude/tmp/kopia-runda3/`. */
.cs2__medal {
  flex: none;
  width: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
/* Punkt wyjścia przy frazie („z 17” u pizzerii) — jedyna realizacja, która go podaje. */
.cs2__medal em {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-body);
  font-variant-numeric: tabular-nums;
}
.cs2__miejsce {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  border: 1px solid var(--border-default);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* ⚠️ Podium na biało, nie na czerwono. To wynik pracy, a czerwień w tym serwisie
   znaczy spadek i problem (decyzja Karola 16.08.2026). */
.cs2__miejsce--podium {
  background: #fff;
  border-color: #fff;
  color: #101015;
}
/* 🔴 RUNDA 5 — PODŚWIETLENIE WIERSZA Z PIERWSZĄ POZYCJĄ USUNIĘTE. Szło jako przejście
   od bieli 7% przy lewej krawędzi do przezroczystości w 60% szerokości, czyli gasło
   w połowie wiersza i wyglądało jak niedomalowane tło. Karol: „mają dziwne odcięcia
   kolorów, wyglądają na niedokończone”. U SaliMali podświetlone były oba wiersze,
   u SuperMedu cztery z ośmiu widocznych w nieregularnych odstępach — czytało się to
   jak przypadkowe pasy. Wyróżnienie niesie teraz sama plakietka miejsca i nie potrzebuje
   drugiego znaku na tym samym wierszu. */

.cs2__wiecej {
  display: block;
  margin: 20px auto 0;
  padding: 11px 24px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.cs2__wiecej:hover { border-color: var(--border-accent); background: rgba(255, 44, 44, .08); }

/* ===== 7. DZIAŁANIA KLIENTÓW (wizytówka Google) ========================== */

.cs2__dzial {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cs2__dzial li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 🔴 RUNDA 5 — 30/28 px. Karta miała 300 px wysokości przy trzech wierszach treści;
     po przeniesieniu plakietki przyrostu do liczby nie ma już czego rozpychać. */
  padding: 28px 26px 30px;
  background: var(--karta);
  border: 1px solid var(--border-card);
  border-radius: 22px;
  transition: transform .25s ease, border-color .25s ease;
}
.cs2__dzial li:hover { transform: translateY(-4px); border-color: var(--border-accent); }
/* 🔴 RUNDA 5 — kafelek 46 → 64 px, rysunek 24 → 36 px. Karol: „duże sekcje małe ikony
   (…) ikonografiki do powiększenia na pewno”. To ta sama poprawka, co przy celach
   w rundzie 4 — tam znak stoi w pasie na całą wysokość karty i ma 46 px. */
.cs2__dzialzn {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.cs2__dzialzn svg { width: 36px; height: 36px; }
/* Liczba i jej przyrost w jednym wierszu, wyrównane do linii pisma.
   🔴 RUNDA 5 — przyrost stał dotąd osobno na dole karty, przez co między nazwą
   działania a nim zostawało ok. 60 px pustki, a sam przyrost nie mówił, czego dotyczy. */
.cs2__dziallicz { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.cs2__dzial strong {
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
/* 🔴 RUNDA 5b — 16 → 18,5 px. Karol wskazał tę nieproporcjonalność w sekcji „Co z tego
   wyszło”, ale mówi ona o zjawisku ogólnym („uwagi mają charakter ogólny, dobry design
   przenoś na pozostałe”), a tu jest dokładnie to samo: nazwa działania szła 16 px przy
   liczbie mającej 44 px. Podnosimy mniej niż tam, bo tu podpis stoi POD liczbą i nie
   otwiera karty, tylko ją domyka. */
.cs2__dzialco { margin-top: 10px; font-size: 18.5px; font-weight: 600; color: var(--text-primary); }
/* ⚠️ PRZYROST IDZIE BIELĄ. To był ostatni punkt na tej podstronie, w którym czerwień
   z brandingu pokazywała WZROST („+132”, „+54”, „+45”) — a znaczy w tym serwisie
   spadek i problem. Zasada zapisana 16.08.2026, tu złamana do rundy 5.
   Rozmiar 13 → 17 px: przy liczbie głównej mającej 44 px plakietka czytała się jak
   przypis, a nie jak druga wartość w karcie. */
.cs2__dzialpl {
  padding: 6px 14px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* ===== 8. DOMKNIĘCIE ===================================================== */

/* 🔴 17.08.2026 — układ przebudowany. Karol: „to samo, sekcja totalnie źle
   zaprojektowana i niedostrojona do brandingu”. Było: wniosek w lewej kolumnie,
   a w prawej sam zwinięty pasek „Pełne zestawienie wyników” i pod nim pół ekranu
   pustki — bo opinię klienta ma jedna realizacja z siedmiu. Jest: wniosek na pełną
   szerokość, a pod nim rząd dopasowany do tego, co realizacja naprawdę ma. */
/* 🔴 17.08.2026, RUNDA 4 — Karol: „lewa strona duża sekcja z treścią mało czytelna,
   trzeba ją dostylować albo rozdzielić, ściana tekstu nie wygląda dobrze”.
   Co ją robiło ścianą, zmierzone: CAŁY pierwszy akapit szedł wagą 600 w rozmiarze
   22 px — u Keratynowni to siedem wierszy pogrubionego tekstu jeden pod drugim,
   bez jednego miejsca, na którym oko może przystanąć. Do tego bez cytatu (pięć
   realizacji z siedmiu) wniosek dostawał całą szerokość kontenera, czyli wiersze
   po ponad 130 znaków — dwa razy więcej, niż wynosi wygodna miara tekstu.
   Poprawka: pogrubienie schodzi na wagę 500, rozmiar do 20 px, wiersz ograniczony
   do 68 znaków, a odstęp między akapitami urósł z 16 do 20 px. */
.cs2__wniosek {
  padding: clamp(26px, 3vw, 40px);
  background: var(--karta);
  border: 1px solid var(--border-card);
  border-radius: 24px;
}
.cs2__domkniecie {
  margin-top: 36px;
  display: grid;
  gap: 22px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .cs2__domkniecie { grid-template-columns: 1.02fr .98fr; }
  /* Bez cytatu (pięć realizacji z siedmiu) wniosek zostaje sam. Karta idzie wtedy
     na miarę tekstu i staje na środku, a nie na całe 1360 px z tekstem przy lewej
     krawędzi i pustką po prawej — to ta sama dziura, którą naprawialiśmy w rundzie 3,
     tyle że przeniesiona do środka karty. Miara wiersza wychodzi ok. 78 znaków. */
  .cs2__domkniecie--sam { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
}
.cs2__wniosek p { font-size: 17px; line-height: 1.72; color: var(--text-body); max-width: 68ch; }
.cs2__wniosek p:first-child {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--text-primary);
}
.cs2__wniosek p + p { margin-top: 20px; }
/* W karcie stojącej samotnie o mierze wiersza decyduje szerokość karty, więc akapit
   ma ją wypełnić — inaczej tekst kończyłby się przed prawą krawędzią karty. */
.cs2__domkniecie--sam .cs2__wniosek p { max-width: none; }

/* ----- Opinia klienta -------------------------------------------------------
   🔴 17.08.2026, RUNDA 4, dwie uwagi Karola naraz: „sekcja z opinią musi być
   bardziej uwydatniona, brakuje tytułu »opinia klienta« albo coś wyraźniejszego,
   jest cudzysłów, ale on nie jest tak wyraźny” oraz „podpis »wypowiedź klienta
   o współpracy« bardzo mały i szary, uczulałem też 100 razy, żebyś tak nie pisał”.
   Karta ma teraz tytuł u góry przy powiększonym znaku, czerwoną poświatę w tle
   i mocniejszy obrys, a informacja o źródle cytatu przeniosła się z drobnego druku
   pod spodem do tego właśnie tytułu. Pod cytatem został sam autor. */
.cs2__opinia {
  position: relative;
  margin: 0;
  padding: clamp(26px, 3vw, 34px);
  background: radial-gradient(120% 100% at 0% 0%, rgba(255, 44, 44, .1) 0%, transparent 58%), var(--karta);
  border: 1px solid rgba(255, 44, 44, .42);
  border-radius: 24px;
  /* Karta ma wspólną wysokość z wnioskiem obok, a cytat bywa od niego krótszy.
     Autor idzie na sam dół, więc pusta przestrzeń nie zbiera się pod spodem
     w jedną dziurę, tylko rozkłada się między cytatem a podpisem. */
  display: flex;
  flex-direction: column;
}
.cs2__opgora {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.cs2__opzn { display: inline-flex; width: 34px; flex: none; color: var(--accent-default); }
.cs2__opzn svg { width: 34px; height: 34px; }
.cs2__oph {
  margin: 0;
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}
.cs2__opinia blockquote {
  margin: 20px 0 0;
  font-size: 17.5px;
  line-height: 1.66;
  color: var(--text-primary);
}
.cs2__opinia blockquote::before { content: "„"; }
.cs2__opinia blockquote::after { content: "”"; }
.cs2__opinia figcaption {
  margin-top: auto;
  padding-top: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ===== 9. TELEFON ======================================================== */

@media (max-width: 899px) {
  .cs2__meta > div { padding: 9px 13px; }
  .cs2__meta dd { font-size: 15px; }
  .cs2__res, .cs2__res--2 { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* Na telefonie karty stoją jedna pod drugą, więc wspólna wysokość bloku z liczbą
     nie ma czego wyrównywać — a rozpychałaby krótkie karty pustym miejscem. */
  .cs2__res--pary .cs2__kafelliczba { margin-top: 0; padding-top: 16px; }
}
@media (max-width: 640px) {
  /* Wolumen zabierał ponad połowę wiersza i fraza łamała się na trzy linie.
     Na telefonie zostaje sama liczba wyszukań, bez paska. */
  .cs2__wolumen { width: auto; }
  .cs2__woltor { display: none; }
  .cs2__frazylist li { gap: 12px; }
  /* 🔴 RUNDA 5 — kolumna miejsca szła sztywne 54 px. Plakietka ma 36 px, a u pizzerii
     stoi przy niej jeszcze punkt wyjścia („z 17”), więc na telefonie kolumna idzie
     na miarę treści zamiast ścinać jej zawartość. */
  .cs2__medal { width: auto; gap: 8px; }
  .cs2__frazykol--poz { width: auto; }
  .cs2__krokviz { height: 140px; }
  .cs2__krokviz svg { max-width: 190px; }
}

/* Ograniczony ruch w ustawieniach systemu — wszystko od razu w stanie końcowym. */
@media (prefers-reduced-motion: reduce) {
  html.js .svc--case [data-rv] .cs2__parator {
    transition: none;
    transform: none;
  }
  html.js .svc--case [data-rv] .cs2__wolpasek { transition: none; width: var(--w, 50%); }
}