/* ═══════════════════════════════════════════════════════════════════════════
   Pakiet SMART — arkusz WŁASNY landingu (/pakiet-smart).

   Ładowany PO wspólnym `_shared/landing.css`, więc nadpisuje go bez `!important`.
   Wszystko, co jest tu niżej, dotyczy WYŁĄCZNIE tego landingu — wspólnego arkusza
   nie ruszamy, bo landingi powstają równolegle i każdy dopisek tam to konflikt.

   Bloki `.op-*` i `.opt-*` zjechały 19.10.2026 do `_shared/landing.css` — używa ich
   teraz także `/strona-www`, która własnego arkusza nie ma. Zmieniasz je TAM.
   ═══════════════════════════════════════════════════════════════════════════ */

/* AKCENT TAKI SAM JAK NA STRONIE GŁÓWNEJ, czyli pomarańcz marki (Oskar 21.10.2026:
   „»Nowość« zrób na pomarańczowo — tak jak na stronie głównej. To musi wyglądać 1 do 1
   jak na stronie głównej").

   Stało tu `body.theme-smart { --lp:#4F46E5 }`, czyli indygo „żeby odróżnić pakiet od
   hostingu i stron WWW". Efekt był odwrotny od zamierzonego: TEN SAM stos zawartości
   pakietu — ta sama lista, ten sam markup — miał na stronie głównej pomarańczową plakietkę
   „nowość", a na własnej zakładce indygową, bo plakietka bierze kolor z `--lp`. Pakiet SMART
   nie jest osobną marką, tylko naszą ofertą, więc nosi kolor serwisu.

   Zdejmujemy sam akcent, nie cały motyw: `theme-smart` zostaje w `<body>` i dalej służy do
   celowania w tę stronę regułami niżej. */

/* HERO: stos zawartości pakietu (`.pk-*`) — klasy przeniesione do `_shared/landing.css`,
   bo używa ich też sekcja SMART na stronie głównej (Oskar 22.09). Zmieniasz je TAM. */

/* Zdanie o oszczędności pod opisem w ekranie powitalnym — to samo co na stronie głównej,
   gdzie składa je `.wu-split-copy > p.smart-oszcz`. Tutaj tekst stoi w kolumnie hero,
   więc reguła stamtąd nie trafia. */
.hero-copy > p.smart-oszcz { margin-top:14px; font-size:1.02rem; color:var(--fg); }
.hero-copy > p.smart-oszcz b { color:var(--accent-fg); font-weight:700; }

/* ── „Co zawiera Pakiet SMART" — PASEK ZAKŁADEK, nie siatka kart ──────────────────────
   Oskar 21.10.2026: „te sekcje »co zawiera produkt« trzeba zrobić jakoś bardziej kompaktowo,
   może jakieś skróty u góry, a poniżej opis dla każdego po wyborze? I default niech pokazuje
   się konkret o Workspace".

   ⚠️ ŻADNEGO PODKŁADU POD ZNAKIEM (Oskar, ta sama wiadomość: „czemu te ikony tam są też na
   pomarańczowym tle?"). Stała tu reguła `#zawartosc .benefit-card .icon { background:
   var(--lp-soft) }`. Pomarańcz wziął się stąd, że ten landing CELOWO nie nadpisuje `--lp`
   (nosi kolor serwisu, nie własny), więc `--lp-soft` schodzi do domyślnego `#FFF4EA`.
   Pod pełnokolorową plakietką Workspace czy SmartCookie taki podkład tylko brudzi kolory.
   Znak stoi teraz w przycisku zakładki, na jego własnym tle.

   WYSOKOŚĆ PANELU: `min-height` trzyma trzy krótkie zakładki (SmartCookie, domeny, hosting)
   na jednej wysokości, więc przeskakiwanie między nimi nie podrzuca strony. Workspace
   i prowadzenie strony są dłuższe i rosną ponad to — tego się nie da wyrównać bez dopisywania
   treści, której nikt nie podyktował. */
/* ⚠️ REGUŁY `.sm-zak*` (pasek zakładek i panel) PRZENIESIONE 22.10.2026 do
   `_shared/landing.css` — bierze je też `/hosting`, a ten landing własnego arkusza
   nie ma. Nie wracaj z nimi tutaj: dwie kopie rozjadą się przy pierwszej poprawce. */
/* Lista ptaszków `.bc-lista` ZDJĘTA 21.10.2026 — kartę przejęła `.ws-*` niżej, ze znakami
   produktów Google zamiast ptaszków. Nie wracaj z dwiema listami w jednej karcie. */

/* ── FUNDAMENT PAKIETU: migracja do Google Workspace ──────────────────────────────────
   Oskar 21.10.2026: „to na górze o Google Workspace przerób tak, że fundamentem jest
   migracja do Google Workspace, gdzie organizacja ma te wszystkie elementy i profesjonalną
   infrastrukturę od Google". Stąd akapit nad listą (sprzedaje przeniesienie, nie zestaw
   aplikacji), znaki produktów Google przy pozycjach („chyba lepiej Google") i nota
   o cenach pakietów pod spodem.

   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ść osobnych akapitów z obrazkiem. */
/* `.ws-lead` i `.ws-lista` (akapit wiodący i lista aplikacji Google) siedzą od
   22.10.2026 w `_shared/landing.css` — bierze je też landing Workspace. */
/* `.ws-nota` (ramka noty pod treścią panelu) siedzi od 22.10.2026 w `_shared/landing.css`. */

/* CZYM GROZI BRAK ZGODY — trzy punkty w zakładce SmartCookie (Oskar 22.10.2026).
   Ten sam ton co lista zarzutów na smartcookie.io: szary tekst, pogrubiony tylko adresat
   kary. Punktor jest kropką, nie wykrzyknikiem — sekcja ma informować, nie straszyć. */
.sm-kary-h { margin:20px 0 8px; font-size:.9rem; font-weight:700; color:var(--navy); }
/* ⚠️ KWOTY NA CZERWONO I KAŻDA KARA W OSOBNYM WIERSZU (Oskar 22.10.2026: „jako że SmartCookie
   na pakiecie SMART jest dość wysokie, rozbuduj trochę to… daj na czerwono te kwoty kar itd.,
   żeby bardziej rzucały się w oczy"). Lewa kolumna była o połowę niższa od repliki banera
   (ta ma 448 px), więc zakładka kończyła się dziurą — teraz kolumny stoją równo, a sama kwota
   jest pierwszą rzeczą, którą widać.
   Punktory zeszły: wiersz zaczyna się nazwą adresata kary, a nie kropką.
   ⚠️ TON INFORMACYJNY zostaje — to są USTAWOWE MAKSIMA („do"), nie typowa kara dla małej
   organizacji. Czerwień dotyczy kwoty, nie całego bloku: sekcja ma informować, nie straszyć. */
.sm-kary { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.sm-kary li { display:grid; gap:2px; padding:11px 13px; border-radius:var(--r);
  background:#FEF2F2; border:1px solid #FECACA; border-left:3px solid var(--red); }
.kara-kto { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--fg-secondary); }
.kara-kto em { font-style:normal; font-weight:600; text-transform:none; letter-spacing:0;
  color:var(--fg-muted); }
.kara-kwota { font-size:1.18rem; font-weight:800; line-height:1.15; letter-spacing:-.02em;
  color:var(--red); }
.kara-txt { font-size:.84rem; line-height:1.55; color:var(--fg-secondary); }
.kara-txt b { color:var(--red); font-weight:700; }
.sm-kary-pod { margin:11px 0 0; font-size:.82rem; line-height:1.55; color:var(--fg-muted); }


/* ZAKŁADKA SMARTCOOKIE NA DWIE KOLUMNY: opis i kary po lewej, replika banera po prawej
   (Oskar 22.10.2026). Makieta ma stałą szerokość kolumny, żeby baner w środku nie robił się
   szerszy niż na smartcookie.io — tam stoi w kolumnie ekranu powitalnego, nie przez całą
   szerokość sekcji. Poniżej 900 px kolumny wchodzą jedna pod drugą, a makieta ląduje DRUGA:
   na telefonie najpierw czyta się, co to jest, a dopiero potem jak wygląda. */
.sm-cookie-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:26px;
  align-items:start; }
.sm-cookie-wiz .mock-browser { margin:0; max-width:420px; }
@media (max-width:900px){
  .sm-cookie-grid { grid-template-columns:1fr; gap:18px; }
  .sm-cookie-wiz .mock-browser { max-width:none; }
}

/* ⚠️ NA TELEFONIE TA SEKCJA BYŁA NA 4 122 px (zmierzone przy 390 px). Nagłówek łamał się na
   trzy wiersze, akapit nad listą schodził na dwanaście, a karta ciągnęła się przez trzy
   ekrany — to ta sama rzecz, o którą Oskar miał pretensje przy kursach: „nie wygląda dobrze
   na mobile". Tekst schodzi o pół stopnia, interlinia z 1,7 na 1,55, a odstępy w karcie
   i w liście się ściągają. Treści nie ruszam — to jest dyktando. */
@media (max-width:620px){
}

/* ── „Prowadzimy Twoją stronę" — JAKO PIĄTA ZAKŁADKA, nie jako osobny blok ─────────────
   Oskar 21.10.2026, dwa kroki. Najpierw: „to, co robimy, i »Prowadzimy Twoją stronę« trzeba
   połączyć na samą górę z tym »Dla organizacji, które chcą oszczędzić na narzędziach IT«" —
   wtedy powstał blok `.sm-opieka` oddzielony kreską. Potem: „wtedy to prowadzenie strony też
   może być przeniesione do góry" — i blok wszedł do paska zakładek. Reguła `.sm-opieka`
   (kreska i odstęp nad blokiem) jest już niepotrzebna i została skasowana; zostaje sam
   `.sm-opieka-lead`, bo to zdanie dalej otwiera tę zakładkę.
   Wyśrodkowanie i szerokość ustawiamy tutaj, bo reguła z `landing.css` liczy poziomy
   zagnieżdżenia (`section > .section-inner > …`) i o jedno pudełko głębiej już nie działa. */
/* Do LEWEJ, nie na środek: zdanie stoi pod nagłówkiem panelu, a ten jest wyrównany do lewej —
   wyśrodkowany akapit pod nagłówkiem z lewej wygląda jak wklejony z innej sekcji (bo stamtąd
   pochodzi: w `.sm-opieka` był środkowany razem z całym blokiem). */
/* `.sm-opieka-lead` siedzi od 22.10.2026 w `_shared/landing.css`. */

/* ⚠️ ZAKRES OPIEKI NAD STRONĄ MA UKŁAD KROKÓW (`.steps` z `landing.css`) i nie ma już
   własnych reguł. Trzy podejścia zostały odrzucone i żadne nie wraca: sześć wierszy z ikoną
   i akapitem (do 21.10.2026 — „na pewno nie w wierszach"), rząd pastylek `.op-chipy`
   (21.10 → 22.10 — „daj to w kostkach") i kostki `.op-kostki` (22.10 — „zastąp je tymi
   co poniżej, ale w takim layoucie jak te 1-4"). Nie dopisuj czwartego wariantu. */