/* Wspólny system wyglądu stron publicznych SkanerFirmy (paczka F1).
   Tokeny, reset, nagłówek, stopka, przyciski, komunikaty, pola, FAQ i układ zakupu — używane przez
   `/`, `/kup`, `/kontakt`, `/widocznosc` i (fala 2) resztę stron publicznych.
   `home.css` zostaje tylko dla sekcji właściwych stronie głównej. */
@import url('/fonts/fonts.css'); /* DM Sans i Manrope z naszego serwera, nie z Google */

:root{
  --ground:#FFFFFF;
  --tint:#F3F8F4;
  --tint-deep:#0F3629;
  --ink:#0D2A21;
  --muted:#5D7067;
  --line:#E2EBE4;
  --line-strong:#CBDBD0;
  --brand:#18A05A;      /* wyłącznie jako akcent: ikony, plakietki, obwódki */
  --brand-dark:#0F7A43; /* tło przycisków: kontrast białego tekstu ≥ 4,5:1 */
  --brand-soft:#E6F5EC;
  --lime:#D7ED9C;
  --info:#1D5C8C;
  --info-soft:#E6F1FB;
  --warn:#8C6A18;
  --warn-soft:#FBF3DE;
  --stop:#AB4340;
  --stop-soft:#FBEDEC;

  /* Kod miejsc — ten sam, którym legenda pod kafelkiem mapy tłumaczy dziewięć znaczników: zielony to
     miejsca 1–3, bursztyn 4–10, szary „nie ma w pierwszych 20”. Tokeny stoją tutaj, żeby dało się
     powtórzyć ten kod poza hero WYŁĄCZNIE tam, gdzie strona naprawdę mówi o miejscu w wynikach.
     W tym kodzie bursztyn znaczy „słabiej”, więc nie wolno nim malować rzeczy pozytywnych. */
  --miejsce-1-3:var(--brand-dark);
  --miejsce-4-10:#D9AE3E;
  --miejsce-poza:#B7C3BB;

  /* Jedno tempo ruchu dla całego serwisu: krótkie pod kursorem i palcem, dłuższe przy pojawianiu się
     treści. W tokenach, żeby strony nie rozjechały się rytmem. */
  --ruch:.2s cubic-bezier(.22,.61,.36,1);
  --ruch-wolny:.52s cubic-bezier(.22,.61,.36,1);
  --uniesienie:0 4px 10px rgba(13,42,33,.05), 0 24px 54px -22px rgba(13,42,33,.28);

  --radius-sm:8px;
  --radius:14px;
  --radius-pill:999px;
  --shadow:0 2px 6px rgba(13,42,33,.04), 0 14px 40px rgba(13,42,33,.07);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

img,svg{max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:Manrope,system-ui,sans-serif; margin:0; text-wrap:balance; color:var(--ink)}
p{margin:0}
:focus-visible{outline:3px solid var(--brand-dark); outline-offset:3px; border-radius:6px}

.wrap{width:min(1120px,100%); margin-inline:auto; padding-inline:16px}
@media(min-width:640px){.wrap{padding-inline:24px}}

/* ——— typografia wspólna ——— */
.eyebrow{font-size:13px; font-weight:700; letter-spacing:1.7px; text-transform:uppercase; color:var(--brand-dark)}
.h2{font-size:clamp(25px,4.2vw,38px); font-weight:800; line-height:1.14; letter-spacing:-1.2px}
.h3{font-size:18px; font-weight:700; letter-spacing:-.3px; line-height:1.35}
.h4{font-size:14px; font-weight:700; letter-spacing:-.2px}
.lead{font-size:clamp(15px,1.5vw,17.5px); color:var(--muted); line-height:1.6; max-width:56ch}
.small{font-size:13px; color:var(--muted); line-height:1.6}

/* Linki w treści (nie przyciski, nie nawigacja) mają wyglądać jak linki: podkreślenie i kolor marki,
   kontrast ≥ 4,5:1 na jasnym tle — np. „Napisz do nas”, „Pytanie przed zapłatą?” (audyt 18.09, Część B §3).
   W stopce (tło ciemne) wystarczy podkreślenie: odziedziczony jasny kolor już ma kontrast ≥ 4,5:1,
   tak jak istniejące linki nawigacji w .footer-legal. */
.small a,.faq details p a{color:var(--brand-dark); border-bottom:1px solid #A9D6BC; transition:border-color var(--ruch)}
/* Pod kursorem podkreślenie gęstnieje do koloru tekstu — nic się nie przesuwa, a link wyraźnie odpowiada. */
.small a:hover,.faq details p a:hover,.small a:focus-visible,.faq details p a:focus-visible{border-bottom-color:var(--brand-dark)}
.footer-fine a{border-bottom:1px solid rgba(215,237,156,.35)}

/* ——— nagłówek ——— */
/* Pasek jest przyklejony, więc po zjechaniu ze szczytu strony wisi nad treścią. Cienka kreska sama tego
   nie sprzedaje — dopiero miękki cień mówi oku, że to warstwa wyżej. Stan wpisuje home.js (`data-przewiniete`
   na <html>); bez JavaScriptu zostaje sama kreska i pasek nadal jest czytelny. */
.masthead{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow var(--ruch)}
html[data-przewiniete] .masthead{box-shadow:0 1px 0 rgba(13,42,33,.03), 0 14px 26px -22px rgba(13,42,33,.75)}
.masthead-inner{display:flex; align-items:center; gap:24px; height:60px}
.masthead .brand{min-height:44px}
.brand{display:inline-flex; align-items:center; gap:8px; font-family:Manrope,sans-serif; font-weight:800; font-size:18px; letter-spacing:-.6px}
.brand svg{width:20px; height:24px; color:var(--brand)}
.brand i{font-style:normal; font-weight:600; color:var(--muted)}
.masthead nav{display:none; gap:24px; margin-left:auto; font-size:14.5px; font-weight:500; color:var(--muted)}
/* Kreska pod pozycją nawigacji wyjeżdża od lewej — ten sam gest co w stopce. Rysuje ją ::after, a nie
   `border-bottom`, żeby wysokość paska nie drgała przy najechaniu. */
.masthead nav a{position:relative; display:inline-flex; align-items:center; transition:color var(--ruch)}
.masthead nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left center; transition:transform var(--ruch);
}
.masthead nav a:hover,.masthead nav a:focus-visible{color:var(--ink)}
.masthead nav a:hover::after,.masthead nav a:focus-visible::after{transform:scaleX(1)}
.masthead .btn{margin-left:auto}
.masthead nav + .btn{margin-left:0}
@media(min-width:900px){
  .masthead-inner{height:70px}
  .masthead nav{display:flex}
}
.text-back{margin-left:auto; font-size:14px; color:var(--muted); min-height:44px; display:inline-flex; align-items:center}
.text-back:hover{color:var(--ink)}

/* ——— przyciski ——— */
/* Bez gap: tekst przed .price-tag kończy się na &nbsp; (jeden zwykły odstęp przed myślnikiem ceny).
   Flex gap dokładałby drugi odstęp obok niego — zwykła spacja tu i tak nic by nie ważyła: przy display:flex
   biały znak tuż przed elementem potomnym renderuje się jako 0 px, dlatego stoi &nbsp; (audyt 18.09,
   Część B §4: był podwójny odstęp z gap:10px, bo zwykła spacja się nie liczyła). */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 24px; border-radius:var(--radius-sm); font-weight:700; font-size:15px; letter-spacing:-.1px;
  background:var(--brand-dark); color:#fff; border:1px solid var(--brand-dark); cursor:pointer;
  box-shadow:0 1px 2px rgba(15,122,67,.2), 0 6px 18px rgba(15,122,67,.18);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* Przycisk pod kursorem unosi się i dostaje mocniejszy, niżej osadzony cień — oko czyta to jako „da się
   w to kliknąć”, a nie jako zmianę koloru. Wciśnięcie wraca na miejsce i gasi cień, żeby kliknięcie miało
   odpowiedź także pod palcem, gdzie nie ma stanu :hover. */
.btn:hover{background:#0C6939; border-color:#0C6939; transform:translateY(-2px); box-shadow:0 2px 4px rgba(15,122,67,.22), 0 14px 26px -10px rgba(15,122,67,.45)}
.btn:active{transform:translateY(0); box-shadow:0 1px 2px rgba(15,122,67,.28)}
.btn svg{width:17px; height:17px; flex-shrink:0}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--line-strong); border-color:var(--line-strong); color:#7C8A83; cursor:not-allowed;
  box-shadow:none; transform:none; pointer-events:none;
}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line-strong); box-shadow:none}
.btn--ghost:hover{background:var(--tint); border-color:var(--brand-dark); color:var(--brand-dark); transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(13,42,33,.6)}
.btn--ghost:active{transform:translateY(0); box-shadow:none}
.btn--ghost:disabled,.btn--ghost[aria-disabled="true"]{background:#fff; color:#9AA79F; border-color:var(--line)}
.btn--sm{padding:10px 16px; font-size:13.5px; border-radius:var(--radius-sm); min-height:40px}
/* Na ekranie dotykowym 40 px to za mały cel; przy myszy zostaje smukły, bo tam trafia się precyzyjnie. */
@media(hover:none),(max-width:900px){.btn--sm{min-height:44px}}
.btn--block{width:100%}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}
.btn .price-tag{white-space:nowrap}

/* ——— komunikaty ——— */
.notice{border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.6; border:1px solid transparent}
.notice--info{background:var(--info-soft); color:var(--info); border-color:#C7DEF0}
.warn-note{background:var(--warn-soft); color:var(--warn); border-color:#E6D8AE}
.notice--warn{background:var(--warn-soft); color:var(--warn); border-color:#E6D8AE}
.notice--error,.error-note{background:var(--stop-soft); color:var(--stop); border-color:#EDC9C7}

/* ——— plakietka ——— */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft); color:var(--brand-dark); border:1px solid #CBE8D7; border-radius:var(--radius-pill); padding:7px 15px; font-size:13px; font-weight:700; letter-spacing:.1px}
.pill b{width:6px; height:6px; border-radius:50%; background:var(--brand); display:inline-block}
.pill--warn{background:var(--warn-soft); color:var(--warn); border-color:#E6D8AE}

/* ——— pola formularzy ——— */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:14px; font-weight:600; color:var(--ink)}
.field input,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-strong); border-radius:9px; background:#fff;
  font-size:16px; line-height:1.5; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:120px}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--brand-dark); outline-offset:1px; border-color:var(--brand-dark)}
.field-hint{font-size:13px; color:var(--muted); line-height:1.55; margin-top:2px}
.req{color:var(--stop)}
.opt{color:var(--muted); font-weight:500}
[aria-invalid="true"]{border-color:var(--stop) !important}

.consents{border:1px solid var(--line); border-radius:11px; padding:16px 18px; margin:0; display:flex; flex-direction:column; gap:12px; background:var(--tint)}
.consents legend{font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:0 6px}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.6; cursor:pointer}
.consent input{margin-top:4px; width:18px; height:18px; flex-shrink:0; accent-color:var(--brand-dark)}
.consent a{color:var(--brand-dark); border-bottom:1px solid #A9D6BC}
[hidden]{display:none !important}

/* ——— stan sprzedaży: sterowanie czystym CSS, bez JavaScriptu (kontrakt w docs/firma/audyt-2026-09-18.md §5) ——— */
html[data-sales="open"] .when-soon,html[data-sales="open"] .when-paused{display:none !important}
html[data-sales="soon"] .when-open,html[data-sales="soon"] .when-paused{display:none !important}
html[data-sales="paused"] .when-open,html[data-sales="paused"] .when-soon{display:none !important}
html:not([data-sales]) .when-soon,html:not([data-sales]) .when-paused{display:none !important}

/* ——— zakup wprost z karty pakietu (bez wcześniejszego pomiaru): sterowanie czystym CSS, bez JavaScriptu.
   Dziś serwer zawsze wysyła data-direct="off" (engine/site-pages.ts, pole stanu directPurchase) — następna
   paczka włączy je pakiet po pakiecie, kiedy /api/checkout zacznie przyjmować zamówienia bez pomiaru. ——— */
html[data-direct="on"] .when-not-direct{display:none !important}
html[data-direct="off"] .when-direct{display:none !important}
html:not([data-direct]) .when-direct{display:none !important}

/* ——— podgląd właściciela (?podglad=otwarta): pasek wstawia serwer, tylko z ważną sesją panelu ——— */
.owner-preview{background:var(--warn-soft); color:var(--warn); border-bottom:1px solid #E6D8AE; text-align:center; font-size:13px; font-weight:700; line-height:1.5; padding:10px 16px}

/* ——— FAQ ——— */
.faq{display:flex; flex-direction:column; max-width:820px; margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
/* Pytanie dostaje własny margines ujemny i zaokrąglenie: dzięki temu podświetlenie pod kursorem wychodzi
   poza kolumnę tekstu i czyta się jako pasek do kliknięcia, a sam napis nie przesuwa się ani o piksel. */
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; list-style:none;
  padding:20px 12px 20px 12px; margin-inline:-12px; border-radius:var(--radius-sm);
  font-family:Manrope,sans-serif; font-weight:700; font-size:16px; letter-spacing:-.2px; line-height:1.4;
  min-height:44px; transition:background var(--ruch), color var(--ruch);
}
.faq summary:hover{background:var(--tint); color:var(--brand-dark)}
.faq summary:focus-visible{background:var(--tint)}
.faq summary::-webkit-details-marker{display:none}
/* Znak „+” siedzi w kole, które wypełnia się dopiero przy otwartym pytaniu — po zamkniętej liście widać
   wtedy jednym rzutem oka, co się czyta. Obrót o 135° robi z plusa krzyżyk i trwa tyle, żeby dało się go
   zauważyć, ale nie tyle, żeby na niego czekać. */
.faq summary::after{
  content:'+'; font-family:Manrope,sans-serif; font-weight:700; font-size:19px; line-height:1; flex-shrink:0;
  width:30px; height:30px; border-radius:50%; display:grid; place-content:center;
  color:var(--brand-dark); background:transparent; border:1px solid transparent;
  transition:transform .28s cubic-bezier(.22,.61,.36,1), background var(--ruch), color var(--ruch), border-color var(--ruch);
}
.faq summary:hover::after,.faq summary:focus-visible::after{background:var(--brand-soft); border-color:#CBE8D7}
.faq details[open] summary::after{transform:rotate(135deg); background:var(--brand-dark); border-color:var(--brand-dark); color:#fff}
.faq details p{padding:0 46px 22px 0; font-size:14.5px; color:var(--muted); line-height:1.7}
.faq details p + p{padding-top:0; margin-top:-8px}

/* Rozwinięcie bez skoku. Dwie warstwy, bo mają różne warunki:
   1) sama odpowiedź wchodzi animacją CSS — działa także przy wyłączonym JavaScripcie, bo animacja rusza
      w chwili, gdy przeglądarka pokazuje treść elementu <details>;
   2) wysokość całego <details> przesuwa home.js (bez niego jest zwykły, natychmiastowy skok przeglądarki).
      Na czas ruchu skrypt wpisuje `data-rozwijanie`, żeby treść nie wystawała poza zmniejszaną ramkę. */
.faq details[data-rozwijanie]{overflow:hidden}
.faq details[open] > p{animation:faq-odpowiedz .34s cubic-bezier(.22,.61,.36,1) backwards}
@keyframes faq-odpowiedz{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}

/* ——— stopka ——— */
.footer{background:var(--tint-deep); color:#9FBAA8; padding-block:40px 30px; margin-top:clamp(48px,7vw,88px)}
/* Znak firmowy w stopce jest odnośnikiem do strony głównej, dokładnie tak jak ten w nagłówku — ma więc
   ten sam cel dotyku 44 px. Bez tego był jedynym klikalnym elementem stopki poniżej tej wysokości. */
.footer .brand{color:#fff; min-height:44px}
.footer .brand i{color:#9FBAA8}
.footer-top{display:flex; flex-wrap:wrap; gap:20px 36px; justify-content:space-between; align-items:flex-start}
.footer-links{display:flex; flex-wrap:wrap; gap:2px 24px; font-size:14px}
.footer-links a,.footer-legal a,.footer-packages a{min-height:44px; display:inline-flex; align-items:center; transition:color var(--ruch), border-color var(--ruch)}
.footer-links a:hover,.footer-packages a:hover{color:#fff}
/* Grupa „Pakiety” (decyzja właściciela z 30.09.2026): odnośniki do stron trzech pakietów, jak odnośniki nawigacji stopki;
   etykieta jasna i pogrubiona, na telefonie w osobnej linii. */
.footer-packages{display:flex; flex-wrap:wrap; align-items:center; gap:2px 24px; font-size:14px; margin-top:12px}
/* Kolor odnośników wprost (nie przez dziedziczenie z .footer): strona 404 ma własny zapasowy kolor stopki. */
.footer-packages a{color:#9FBAA8}
/* Grupa „Obserwuj” (Facebook, Instagram — decyzja właściciela z 7.10.2026) w wyglądzie grupy „Pakiety”. */
.footer-social{display:flex; flex-wrap:wrap; align-items:center; gap:2px 24px; font-size:14px; margin-top:12px}
.footer-social a{min-height:44px; display:inline-flex; align-items:center; color:#9FBAA8; transition:color var(--ruch), border-color var(--ruch)}
.footer-social a:hover{color:#fff}
.footer-label{color:#fff; font-weight:700}
@media(max-width:560px){.footer-label{flex-basis:100%; padding-top:6px}}
.footer-legal{display:flex; flex-wrap:wrap; gap:2px 20px; font-size:13px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1)}
.footer-legal a{border-bottom:1px solid rgba(215,237,156,.35)}
.footer-legal a:hover{color:#fff; border-bottom-color:rgba(215,237,156,.9)}
.footer-fine{font-size:13px; color:#7E9689; margin-top:16px; line-height:1.7; max-width:74ch}
/* Obwódka fokusu jest domyślnie w kolorze marki — na ciemnym tle stopki ledwo ją widać. Tu bierze limonkę,
   która odcina się od tła wyraźnie, więc wędrówka tabulatorem nie gubi się w ostatniej sekcji. */
.footer :focus-visible{outline-color:var(--lime)}

/* ——— układ zakupu (/kup, /kontakt) ——— */
.buy-layout{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,4vw,48px); align-items:start; padding-block:clamp(24px,5vw,52px) clamp(36px,6vw,64px)}
.buy-form-col{display:flex; flex-direction:column; gap:12px}
.buy-form-col .lead{margin-bottom:8px}
.buy-form{display:flex; flex-direction:column; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(18px,3vw,26px); box-shadow:none}
.buy-form .two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.buy-summary{position:sticky; top:80px}
.summary-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow)}
.summary-card .price{display:flex; align-items:baseline; gap:6px}
.summary-card .price b{font-family:Manrope,sans-serif; font-weight:800; font-size:30px; letter-spacing:-1px; line-height:1}
.summary-card .price small{font-size:13px; color:var(--muted); font-weight:600}
.summary-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.summary-card li{display:flex; gap:9px; font-size:14px; line-height:1.55; align-items:flex-start}
.summary-card li svg{width:16px; height:16px; color:var(--brand); flex-shrink:0; margin-top:3px}
.summary-steps{border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:9px}
.summary-steps ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.summary-steps li{font-size:13.5px; color:var(--muted); line-height:1.6; display:list-item}
.summary-fine{font-size:13px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line); padding-top:14px}
@media(max-width:900px){
  .buy-layout{grid-template-columns:1fr}
  .buy-summary{position:static; order:-1}
}
@media(max-width:520px){.buy-form .two{grid-template-columns:1fr}}

/* ——— kontakt: pole-pułapka i rozmowa (współdzielone z /wiadomosc) ——— */
.contact-trap{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.contact-sent{display:flex; flex-direction:column; gap:12px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:var(--radius); padding:clamp(18px,3vw,26px)}
.contact-sent p{font-size:14.5px; color:var(--muted); line-height:1.65}
.contact-sent #sent-reference{font-variant-numeric:tabular-nums; color:var(--brand-dark)}
.contact-rules{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.contact-rules li{display:flex; flex-direction:column; gap:2px; font-size:13.5px; line-height:1.55; padding-left:14px; border-left:2px solid var(--line-strong)}
.contact-rules b{font-family:Manrope,system-ui,sans-serif; font-size:14px}
.contact-rules span{color:var(--muted)}
.contact-rules a,.summary-fine a{color:var(--brand-dark); border-bottom:1px solid #A9D6BC}
@media(max-width:900px){.contact-layout .buy-summary{order:0}}

/* Kroki zamówienia na stronie odbioru: klient widzi, gdzie jest i że program pracuje (decyzja właściciela 20.09.2026). */
.postep{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:1rem 0 0;padding:0}
.postep li{display:flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.9rem;color:var(--muted);background:#fff}
.postep .postep-znak{width:.6rem;height:.6rem;border-radius:50%;background:var(--line-strong);flex:none}
.postep li.is-done{color:var(--brand-dark);border-color:var(--brand-soft);background:var(--brand-soft)}
.postep li.is-done .postep-znak{background:var(--brand)}
.postep li.is-now{color:var(--ink);border-color:var(--brand);font-weight:600}
.postep li.is-now .postep-znak{background:var(--brand);animation:postep-puls 1.4s ease-in-out infinite}
@keyframes postep-puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){.postep li.is-now .postep-znak{animation:none}}