/* ═══════════════════════════════════════════════════════════════════════
   Pomocnik Medyczny — podgląd nowej strony głównej
   ─────────────────────────────────────────────────────────────────────
   Kolor pinuje brand. Dołożone są dwa tony: papier i mgła — oba odcienie
   zieleni odsunięte do bieli, nie neutralne szarości. Kremowego tła
   świadomie NIE ma.

   Trzy kroje, każdy z pełnym pokryciem polskich znaków:
     Newsreader     — nagłówki. Portal, który publikuje.
     IBM Plex Sans  — treść i interfejs.
     IBM Plex Mono  — terminy, daty, liczby. To POMIARY i mają tak wyglądać.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#111111;
  --green:#0D7A5F;
  --mint:#20A886;
  --white:#FFFFFF;
  --paper:#F6F8F7;
  --haze:#E4EDE9;

  /* Grafit ma domieszkę zieleni — czysta czerń wypadała z rodziny
     kolorystycznej i czytała się jak dziura w stronie. Ciemny ton
     występuje wyłącznie jako KLAMRA (pasek źródła + stopka),
     nigdy jako pasmo w środku treści. */
  --graphite:#121D1A;
  /* Trzeci kolor kategorii i „wygaszony" koniec osi. Nie czerń —
     na stronie bez czerni czarna kreska wyskakuje z rodziny. */
  --deep:#0B3A2F;

  --ink-60:rgba(17,17,17,.62);
  --ink-40:rgba(17,17,17,.40);

  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wrap:1220px;
  --gut:clamp(20px,4vw,48px);
}

*,*::before,*::after{box-sizing:border-box}
/* `[hidden]` z arkusza przeglądarki przegrywa z każdą regułą autora, która
   ustawia `display` — np. `.authform__f{display:flex}`. Bez tego pole NIP
   zostawało widoczne przy wybranym koncie pacjenta. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-feature-settings:"tnum" 1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.meta{font-size:12.5px;color:var(--ink-40)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:0}

/* ═══ OZDOBNIKI ═══════════════════════════════════════════════════════
   Trzy motywy, wszystkie wywiedzione z tego, czym portal jest —
   nie z generatora kształtów:
     1. sygnet marki jako znak wodny,
     2. podziałka (te same kreski, co na osi czekania),
     3. miękka zielona poświata pod hero.
   ══════════════════════════════════════════════════════════════════ */

/* Wejście sekcji w kadr. Delikatne — ruch niesie znaczenie tylko na
   osi czekania, tutaj ma jedynie porządkować czytanie z góry na dół. */
.rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.28,1)}
.rise.is-in{opacity:1;transform:none}

/* `isolation:isolate` zamyka stacking context, dzięki czemu z-index:-1
   ląduje NAD tłem sekcji, a pod całą jej treścią — bez dokładania
   position/z-index każdemu dziecku z osobna. */
.ticks,.wm{position:relative;overflow:hidden;isolation:isolate}

/* Podziałka: pionowe włoski co 96 px, wygaszone na krawędziach. */
.ticks::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--tick,rgba(17,17,17,.05)) 0 1px,transparent 1px 96px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
}

/* Znak wodny: własny sygnet marki. Ozdobnik pochodzi z brandu. */
.wm::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:var(--wm-r,-90px);top:var(--wm-t,-70px);
  width:var(--wm-s,460px);height:var(--wm-s,460px);
  background:url("/images/brand/sygnet-pomocnik-medyczny.png") no-repeat center/contain;
  opacity:var(--wm-o,.055);transform:rotate(-8deg);
}
.wm--light::before{filter:brightness(0) invert(1)}

/* ─── Pasek źródła ──────────────────────────────────────────────────── */
.topbar{background:var(--graphite);color:rgba(255,255,255,.72);font-size:12.5px}
.topbar__in{display:flex;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap}
.topbar__src{display:flex;align-items:center;gap:8px}
.topbar__src .mono{color:var(--mint)}
/* Puls przy dacie „stan na". Jedyne miejsce, gdzie bicie ma sens:
   świeżość danych to obietnica całego produktu. */
.live{position:relative;width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);animation:live 2.4s ease-out infinite}
@keyframes live{
  0%{transform:scale(1);opacity:.55}
  70%,100%{transform:scale(3.2);opacity:0}
}
.topbar__acc a{text-decoration:none;opacity:.8}
.topbar__acc a:hover{opacity:1;text-decoration:underline}

/* ─── Nagłówek ──────────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:20;background:rgba(246,248,247,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--haze)}
.head__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand__txt{font:500 19px/1 var(--sans);letter-spacing:-.02em}
.brand__txt b{font-weight:600}
.brand__txt i{font-style:normal;color:var(--green)}
.nav{display:flex;gap:clamp(14px,2.2vw,30px);margin-inline-start:auto}
.nav a{text-decoration:none;font-size:15px;color:var(--ink-60);padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--mint)}
.head__cta{flex:none}

/* ─── Przyciski ─────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font:500 15px/1 var(--sans);text-decoration:none;padding:13px 20px;border-radius:999px;border:1px solid transparent;transition:background .18s ease,color .18s ease}
.btn--solid{background:var(--green);color:#fff}
.btn--solid:hover{background:#0a6650}
.btn--light{background:var(--white);color:var(--green)}
.btn--light:hover{background:var(--haze)}

/* ─── HERO ──────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-block:clamp(36px,5vw,60px) clamp(20px,3vw,32px)}
/* Poświata: dwa miękkie źródła w zieleniach marki. Nie jest tłem —
   jest światłem, które podnosi papier zanim wejdzie pierwszy solid. */
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:
    radial-gradient(46% 44% at 76% 18%,rgba(32,168,134,.20),transparent 68%),
    radial-gradient(40% 40% at 12% 6%,rgba(13,122,95,.14),transparent 70%);
}
.hero > .wrap{position:relative;z-index:1}

.eyebrow{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);flex:none}

.masthead{font-family:var(--serif);font-size:clamp(36px,5.2vw,60px);line-height:1.12;letter-spacing:-.022em;font-weight:500}
/* Podkreślenie sedna produktu — swash rysowany po wejściu strony.
   Jeden akcent na całą stronę; drugiego celowo nie ma. */
.mark{position:relative;font-style:normal;white-space:nowrap}
.mark::after{
  /* `bottom:0` to spód pola inline, czyli POD descenderem — swash trzeba
     podnieść o jego głębokość, żeby przeciął literę, a nie leżał obok. */
  content:"";position:absolute;left:-.06em;right:-.06em;bottom:.14em;height:.28em;z-index:-1;
  background:linear-gradient(101deg,rgba(32,168,134,.42),rgba(32,168,134,.62));
  border-radius:.24em .3em .2em .34em;
  transform:scaleX(0);transform-origin:left center;
  animation:swash .85s .35s cubic-bezier(.22,.9,.28,1) forwards;
}
@keyframes swash{to{transform:scaleX(1)}}

.hero__grid{margin-top:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:1fr 2fr;gap:clamp(16px,2vw,26px);align-items:stretch}

/* 1/3 — wyróżniony blok wyszukiwarki. Pełna zieleń marki: to jedyny
   element na papierze, który dostaje solid, więc oko trafia tam pierwsze. */
.finder{
  position:relative;overflow:hidden;isolation:isolate;
  color:#fff;border-radius:20px;padding:clamp(22px,2.2vw,30px);
  display:flex;flex-direction:column;
  background:linear-gradient(163deg,#0F8768 0%,#0D7A5F 34%,#0A6650 72%,#085946 100%);
  box-shadow:0 26px 50px -30px rgba(8,76,61,.6);
}
/* Znak wodny idzie w dolny róg: na górze wchodził pod nagłówek i czytał
   się jak przypadkowa plama, a nie jak znak firmowy. */
.finder::before{top:auto;bottom:-64px;right:-52px;width:236px;height:236px;opacity:.07}
/* Wypukłość — światło z góry po lewej, tam gdzie pada w poświacie hero. */
.finder::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(78% 52% at 14% 0%,rgba(255,255,255,.16),transparent 62%);
}
.finder__eyebrow{font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.finder__h{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.3vw,30px);line-height:1.14;margin-top:12px}
.finder__f{display:flex;flex-direction:column;gap:5px;margin-top:20px}
.finder__f label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.finder__f input{font:400 16px var(--sans);color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.3);background:transparent;padding:8px 2px;width:100%}
.finder__f input::placeholder{color:rgba(255,255,255,.5)}
.finder__f input:focus{outline:none;border-bottom-color:#fff}
.finder__go{margin-top:24px;width:100%;padding-block:15px}
.finder__chips{margin-top:auto;padding-top:22px;display:flex;gap:8px;flex-wrap:wrap}
.finder__chips a{font-size:13px;text-decoration:none;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:7px 14px}
.finder__chips a:hover{background:rgba(255,255,255,.14)}

/* ─── Slider w hero ─────────────────────────────────────────────────── */
/* Ten sam komponent, co „Najczęściej czytane" (.pops) — różni się tylko
   tym, że stoi obok bloku wyszukiwarki i to on wyznacza wysokość
   wiersza hero. */
.pops--hero{display:flex;flex-direction:column;min-width:0}
.pops--hero .pops__view{flex:1}
.pops--hero .pops__link{height:100%}
/* Minimum dobrane pod blok wyszukiwarki obok: przy 380 px w zielonej
   kolumnie robiła się stukilkudziesięciopikselowa dziura między
   przyciskiem a skrótami na dole. */
.pops--hero .pops__link img{height:100%;min-height:346px;aspect-ratio:auto}

.slider__ui{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid var(--haze)}
.slider__label{font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40)}
.slider__nav{display:flex;align-items:center;gap:14px}
.slider__dots{display:flex;gap:7px}
.slider__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--haze);transition:background .2s ease}
.slider__dots button[aria-selected="true"]{background:var(--green)}
.slider__arw{width:36px;height:36px;border-radius:50%;border:1px solid var(--haze);background:var(--white);color:var(--ink);line-height:1}
.slider__arw:hover{border-color:var(--green);color:var(--green)}
.slider__view{overflow:hidden}
.slider__track{display:flex;height:100%;transition:transform .55s cubic-bezier(.3,.9,.3,1)}

/* ─── Etykiety kategorii ────────────────────────────────────────────── */
.cat{display:inline-block;font:600 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;padding-bottom:5px;border-bottom:2px solid var(--green);align-self:flex-start}
.cat--life{border-bottom-color:var(--mint)}
.cat--ill{border-bottom-color:var(--green)}
.cat--guide{border-bottom-color:var(--deep)}

/* ─── Najczęściej czytane + lista redakcyjna ────────────────────────── */
/* Mgła: hero wyżej jest na papierze, skala niżej na bieli — ta sekcja
   musi się odciąć od obu, a mgła jest jedynym tonem, który nie powtarza
   sąsiada. Odwrócona oś (2/3 po lewej) dokłada drugi sygnał podziału. */
.popular{background:var(--haze);padding-block:clamp(36px,4.5vw,58px)}
.popular__grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
.popular .sechead{margin-bottom:22px}

/* Jeden wpis na slajd, treść NA zdjęciu, cały slajd klikalny. */
.pops{background:var(--white);border:1px solid rgba(13,122,95,.14);border-radius:18px;overflow:hidden}
.pops__view{overflow:hidden}
.pops__slide{flex:0 0 100%;min-width:0}
.pops__link{position:relative;display:block;text-decoration:none;color:#fff;isolation:isolate}
.pops__link img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.pops__link:hover img{transform:scale(1.03)}
/* Kurtyna pod tekstem. Bez niej biały tytuł ginie na jasnym zdjęciu —
   a okładki są dobierane pod temat, nie pod czytelność napisu. */
.pops__link::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,42,34,.92) 0%,rgba(6,42,34,.66) 26%,rgba(6,42,34,.12) 58%,transparent 78%);
}
.pops__body{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.6vw,32px)}
.pops__h{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.4vw,32px);line-height:1.14;letter-spacing:-.015em;max-width:22ch;text-wrap:balance}
.pops__link:hover .pops__h{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pops__m{font-size:12.5px;color:rgba(255,255,255,.68)}
/* Etykieta kategorii na zdjęciu: biały tekst, kolor niesie kreska. */
.cat--on{color:#fff}
.pops__ui{background:var(--white)}

/* Kolumna 1/3 — biała karta na mgle, żeby lista czytała się jak jeden
   obiekt, a nie jak pięć luźnych wierszy. */
.pick{background:var(--white);border:1px solid rgba(13,122,95,.14);border-radius:16px;padding:20px 20px 8px}
.pick__h{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.01em;padding-bottom:12px;border-bottom:3px solid var(--green)}
.pick__list li + li{border-top:1px solid var(--haze)}
.pick__list a{display:grid;grid-template-columns:66px 1fr;gap:13px;align-items:center;padding:13px 0;text-decoration:none}
.pick__list img{width:66px;height:52px;object-fit:cover;border-radius:8px;background:var(--haze)}
.pick__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.pick__c{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--green)}
.pick__n{font-size:14.5px;line-height:1.34}
.pick__m{font-style:normal;font-size:11.5px;color:var(--ink-40)}
.pick__list a:hover .pick__n{color:var(--green)}

/* ─── Skala czekania ────────────────────────────────────────────────── */
/* Biel wycina pasmo z papieru bez sięgania po ciemny slab. Rytm sekcji
   na całej stronie: papier → biel → papier → zieleń → biel … */
.scaleband{position:relative;overflow:hidden;background:var(--white);border-block:1px solid var(--haze);padding-block:clamp(34px,4.2vw,56px) clamp(24px,3vw,40px)}
.scaleband__head{margin-bottom:6px}

/* Lista rozwijana miast. Natywny <select> — zachowuje się poprawnie na
   każdym systemie i czyta się czytnikiem ekranu; własna jest tylko
   obudowa, żeby nie wyglądał jak formularz z 2009 roku. */
.citysel{display:flex;align-items:center;gap:12px}
.citysel__l{font:500 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.citysel__w{position:relative;display:inline-flex;align-items:center}
.citysel__w::after{
  content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:translateY(-70%) rotate(45deg);
}
.citysel__s{
  appearance:none;-webkit-appearance:none;
  font:500 15.5px/1 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--haze);border-radius:999px;
  padding:11px 40px 11px 18px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.citysel__s:hover{border-color:var(--mint);background:var(--white)}
.citysel__s:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.scale__track{position:relative;padding-block:76px 124px}
.scale__rail{position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,var(--mint) 0%,var(--green) 34%,rgba(17,17,17,.55) 100%);transform-origin:left center;transform:scaleX(0);transition:transform 1.05s cubic-bezier(.22,.9,.28,1)}
.scale.is-on .scale__rail{transform:scaleX(1)}
.scale__pins{position:absolute;inset:0}
.pin{position:absolute;left:var(--at);top:50%;transform:translate(-50%,-50%)}
.pin a{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;white-space:nowrap;padding:6px 10px;border-radius:10px;opacity:0;transition:opacity .5s ease,transform .5s ease}
.scale.is-on .pin a{opacity:1}
.pin a:hover{background:var(--white);box-shadow:0 2px 14px -6px rgba(17,17,17,.25)}
.pin::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--white);border:3px solid var(--green);transform:scale(0);transition:transform .38s cubic-bezier(.3,1.4,.5,1)}
.scale.is-on .pin::after{transform:scale(1)}
.pin--up a{bottom:20px;transform:translateX(-50%) translateY(8px)}
.pin--down a{top:46px;transform:translateX(-50%) translateY(-8px)}
.scale.is-on .pin--up a,.scale.is-on .pin--down a{transform:translateX(-50%) translateY(0)}
.pin__spec{font-size:14.5px;font-weight:500}
.pin__wait{font-size:12.5px;color:var(--ink-60)}
/* Im dłuższe czekanie, tym mniej życia w znaczniku. Drugiego,
   ostrzegawczego odcienia celowo NIE ma — zasady marki wykluczają
   czerwień, a dystans na osi mówi już wszystko. */
.pin[data-d="1"]::after{border-color:var(--mint);background:var(--white)}
.pin[data-d="2"]::after{border-color:var(--green);background:var(--white)}
.pin[data-d="3"]::after{border-color:var(--green);background:var(--haze)}
.pin[data-d="4"]::after{border-color:#38564f;background:#cdd8d4}
.pin[data-d="5"]::after{border-color:var(--deep);background:var(--deep)}
.scale.is-on .pin[data-d="1"] a,.scale.is-on .pin[data-d="1"]::after{transition-delay:.12s}
.scale.is-on .pin[data-d="2"] a,.scale.is-on .pin[data-d="2"]::after{transition-delay:.26s}
.scale.is-on .pin[data-d="3"] a,.scale.is-on .pin[data-d="3"]::after{transition-delay:.40s}
.scale.is-on .pin[data-d="4"] a,.scale.is-on .pin[data-d="4"]::after{transition-delay:.54s}
.scale.is-on .pin[data-d="5"] a,.scale.is-on .pin[data-d="5"]::after{transition-delay:.68s}
.scale__ticks{position:absolute;left:0;right:0;top:calc(50% + 7px);display:flex;justify-content:space-between;font-size:11px;color:var(--ink-40)}
.scale__ticks span{position:relative;padding-top:11px}
.scale__ticks span::before{content:"";position:absolute;left:0;top:0;width:1px;height:6px;background:var(--haze)}
.scale__ticks span:last-child::before{left:auto;right:0}
.scale__cap{font-size:13.5px;color:var(--ink-60)}
.scale__cap .mono{color:var(--ink)}
.scale__cap a{color:var(--green);text-underline-offset:3px}

/* ─── Nagłówki sekcji ───────────────────────────────────────────────── */
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.sechead__h{position:relative;font-family:var(--serif);font-weight:500;font-size:clamp(27px,3.2vw,38px);letter-spacing:-.02em;padding-top:18px}
/* Krótka kreska nad nagłówkiem — ten sam gest, co podziałka na osi. */
.sechead__h::before{content:"";position:absolute;left:0;top:0;width:40px;height:3px;background:var(--green);border-radius:2px}
.sechead__more{font-size:14.5px;color:var(--green);text-underline-offset:3px;text-decoration:none;border-bottom:1px solid rgba(13,122,95,.35);padding-bottom:2px}
.sechead__more::after{content:" →";display:inline-block;transition:transform .2s ease}
.sechead__more:hover::after{transform:translateX(4px)}
.sechead--onDark .sechead__h{color:var(--white)}
.sechead--onDark .sechead__h::before{background:var(--mint)}
.sechead--onDark .sechead__more{color:var(--mint);border-bottom-color:rgba(32,168,134,.45)}

/* ─── Działy: lead z dużym zdjęciem + lista z miniaturkami ──────────── */
.dzialy{padding-block:clamp(40px,5vw,64px)}
.dzialy__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px)}

/* Nazwa działu jest MASZTEM kolumny, nie drobnym kickerem — czytelnik
   ma od razu wiedzieć, w którym dziale patrzy. */
.dept__h{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.015em;padding-bottom:12px;border-bottom:4px solid var(--green)}
.dept__h a{text-decoration:none}
.dept__h a:hover{color:var(--green)}
.dept__h--life{border-bottom-color:var(--mint)}
.dept__h--ill{border-bottom-color:var(--green)}
.dept__h--guide{border-bottom-color:var(--deep)}
/* Drugi blok czytelni używa tej samej rodziny trzech kolorów — nie ma
   powodu mnożyć palety tylko dlatego, że sekcja jest inna. */
.dept__h--mint{border-bottom-color:var(--mint)}
.dept__h--green{border-bottom-color:var(--green)}
.dept__h--deep{border-bottom-color:var(--deep)}

.dept__lead{padding-top:20px}
.dept__media{display:block;overflow:hidden;border-radius:14px;background:var(--haze)}
.dept__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.dept__media:hover img{transform:scale(1.04)}
.dept__lh{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.24;margin-top:14px}
.dept__lh a{text-decoration:none}
.dept__lh a:hover{text-decoration:underline;text-underline-offset:3px}
.dept__lead .meta{margin-top:8px}

.dept__list{margin-top:20px;border-top:1px solid var(--haze)}
.dept__list li{border-bottom:1px solid var(--haze)}
.dept__list a{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;padding:13px 0;text-decoration:none}
.dept__list img{width:76px;height:56px;object-fit:cover;border-radius:8px;background:var(--haze)}
.dept__list span{font-size:15px;line-height:1.36}
.dept__list a:hover span{color:var(--green)}

/* ─── Katalog placówek ──────────────────────────────────────────────── */
/* Głęboka zieleń marki zamiast czerni — czarne pasmo na papierowym tle
   czytało się jak dziura w stronie. Zieleń trzyma sekcję w rodzinie
   kolorystycznej i pozwala użyć sygnetu jako znaku wodnego. */
.dir{
  position:relative;overflow:hidden;color:var(--white);
  padding-block:clamp(48px,6vw,78px);
  background:linear-gradient(158deg,#0F8768 0%,#0B6450 52%,#084C3D 100%);
  --tick:rgba(255,255,255,.06);
  --wm-o:.06;
}
.dir > .wrap{position:relative;z-index:1}
.dir__lede{color:rgba(255,255,255,.74);max-width:60ch;margin-top:-12px;margin-bottom:34px}
/* Slider wizytówek: 3 na slajd. */
.dirs{margin-top:6px}
.dirs__view{overflow:hidden}
.dirs__slide{flex:0 0 100%;min-width:0}
.dir__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}

/* Wizytówka: białą kartą na zielonym paśmie, żeby wyglądała jak coś,
   co się bierze do ręki, a nie jak wiersz tabeli. */
.fac{display:flex}
.fac__link{
  display:flex;flex-direction:column;width:100%;
  background:var(--white);color:var(--ink);border-radius:16px;overflow:hidden;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.fac__link:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px rgba(3,32,25,.8)}

/* Okładka. Placówki z RPWDL/NFZ nie mają zdjęć — dostają kafel
   z gradientem marki i inicjałami. Trzy tony, żeby rząd kart nie
   wyglądał jak jeden blok. */
.fac__cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--deep)}
.fac__cover--t1{background:linear-gradient(142deg,#0F8768,#0A6650)}
.fac__cover--t2{background:linear-gradient(142deg,#129774,#0B6450)}
.fac__cover--t3{background:linear-gradient(142deg,#0B6450,#083F33)}
.fac__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.fac__link:hover .fac__cover img{transform:scale(1.05)}
.fac__init{
  position:absolute;left:20px;bottom:10px;
  font:600 54px/1 var(--serif);letter-spacing:-.03em;color:rgba(255,255,255,.28);
}
/* Przy fotografii inicjały schodzą do roli sygnatury, żeby nie
   zasłaniały zdjęcia. */
.fac__cover img ~ .fac__init{color:rgba(255,255,255,.9);font-size:26px;bottom:12px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.fac__badge{
  position:absolute;right:12px;top:12px;
  font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  background:var(--white);color:var(--green);padding:6px 10px;border-radius:999px;
}
.fac__badge--nfz{background:rgba(255,255,255,.18);color:#fff}

.fac__b{display:flex;flex-direction:column;flex:1;padding:16px 18px 16px}
.fac__spec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
/* Rezerwa na dwie linie: bez niej dłuższa nazwa zsuwała pasek terminu
   w dół i trzy karty w rzędzie przestawały się zgadzać. */
.fac__n{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.2;margin-top:8px;min-height:2.4em}
.fac__link:hover .fac__n{text-decoration:underline;text-underline-offset:3px}
/* Miasto przed ulicą i mocniej — katalog jest ogólnopolski, więc
   pierwsze pytanie brzmi „gdzie to jest", nie „przy której ulicy". */
.fac__loc{font-size:13.5px;color:var(--ink-60);margin-top:7px}
.fac__loc b{font-weight:600;color:var(--ink)}
.fac__adr{font-size:12.5px;color:var(--ink-40);margin-top:2px}
/* Udogodnienia tekstem, nie emoji: kolorowe piktogramy systemowe
   wstrzykiwały niebieski i pomarańczowy w paletę, w której nie ma
   ani jednego, ani drugiego. */
.fac__ud{font-size:11.5px;color:var(--ink-40);letter-spacing:.01em}

/* Termin to powód kliknięcia — dostaje własny pasek, nie linijkę tekstu. */
.fac__t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px;padding:10px 12px;background:var(--haze);border-radius:10px}
.fac__tl{font-size:12px;color:var(--ink-60)}
.fac__td{font-size:17px;font-weight:500;color:var(--green)}
.fac__q{font-size:12.5px;color:var(--ink-60);margin-top:8px}
.fac__q b{font-weight:500;color:var(--ink)}
.fac__q--none{color:var(--ink-40)}

.fac__f{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--haze);margin-top:14px}
.fac__kid{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--green);background:var(--haze);border-radius:999px;padding:4px 9px}
/* „Zobacz profil" zawsze w osobnym wierszu — przy czterech
   udogodnieniach wpadał w drugą linię tylko w niektórych kartach. */
.fac__go{width:100%;text-align:right;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--green)}
.fac__go::after{content:" →";display:inline-block;transition:transform .2s ease}
.fac__link:hover .fac__go::after{transform:translateX(4px)}

/* Sterowanie slidera leży na zieleni — musi być jasne. */
.dirs__ui{margin-top:18px;padding:0;border-top:0;background:none}
.dirs__ui .slider__label{color:rgba(255,255,255,.62)}
.dirs__ui .slider__dots button{background:rgba(255,255,255,.28)}
.dirs__ui .slider__dots button[aria-selected="true"]{background:var(--mint)}
.dirs__ui .slider__arw{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.dirs__ui .slider__arw:hover{border-color:var(--mint);color:var(--mint);background:rgba(255,255,255,.08)}

/* ─── Miasta ────────────────────────────────────────────────────────── */
.cities{position:relative;overflow:hidden;background:var(--paper);padding-block:clamp(40px,5vw,66px);--wm-o:.035;--wm-s:340px;--wm-t:-110px;--wm-r:-70px}
/* To jest blok SEO, nie ozdobnik: 12 miast × (1 + 8) = 108 linków po
   słowach kluczowych, dokładnie jak na produkcji. Anchor text zostaje
   w całości („Kardiolog Warszawa"), bo to on niesie wartość — nazwa
   miasta jest tylko wyciszona kolorem, żeby kolumna nie hałasowała. */
.cities__lede{color:var(--ink-60);font-size:15.5px;max-width:60ch;margin-top:-14px;margin-bottom:26px}
/* 16 miast = 4 × 4 bez sieroty w ostatnim rzędzie. Przy czterech
   kolumnach specjaliści idą jeden pod drugim; węziej wracają do dwóch
   kolumn, bo inaczej karta rosłaby w wieżę. */
.cities__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cities__grid .city__spec{grid-template-columns:1fr}
/* Przy jednej kolumnie specjalistów lista jest wysoka — tym bardziej
   ma sens, żeby startowała zwinięta. */

.city{background:var(--white);border:1px solid var(--haze);border-radius:14px;padding:18px 20px 16px;transition:border-color .18s ease,box-shadow .18s ease}
.city:hover{border-color:rgba(32,168,134,.5);box-shadow:0 16px 30px -26px rgba(8,76,61,.5)}
.city__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--haze)}
.city__n{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.01em}
.city__all{font-size:12.5px;font-weight:500;color:var(--green);text-decoration:none;white-space:nowrap}
.city__all::after{content:" →";display:inline-block;transition:transform .2s ease}
.city:hover .city__all::after{transform:translateX(3px)}

/* Przełącznik listy specjalistów. Rozwijanie idzie całymi wierszami
   siatki (patrz skrypt), więc wysokość wiersza zawsze zostaje równa. */
.city__t{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  margin-top:12px;padding:8px 0;background:none;border:0;
  font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--green);text-align:left;
}
.city__t::after{
  content:"";width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .28s ease;
}
.city.is-open .city__t::after{transform:translateY(1px) rotate(-135deg)}
.city__t:hover{color:var(--mint)}

/* `grid-template-rows: 0fr → 1fr` zwija bez znajomości wysokości i bez
   `display:none` — linki zostają w drzewie, tylko przycięte. */
.city__wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.3,.9,.3,1)}
.city.is-open .city__wrap{grid-template-rows:1fr}
.city__wrap > .city__spec{overflow:hidden;min-height:0}

.city__spec{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.city__spec a{display:block;font-size:13.5px;line-height:1.45;padding-block:5px;text-decoration:none;color:var(--ink-60)}
/* Miasto powtarza się osiem razy w kolumnie — zostaje dla robota,
   wycisza się dla oka. */
.city__spec span{color:var(--ink-40)}
.city__spec a:hover{color:var(--green)}
.city__spec a:hover span{color:var(--mint)}

/* ─── Czytelnia: pozostałe działy ───────────────────────────────────── */
/* Świadomie BEZ zdjęć. Blok działów wyżej ma duże okładki; gdyby ten
   wyglądał tak samo, strona zaczęłaby się powtarzać. To indeks, nie
   witryna — lżejszy, a daje tyle samo linków wewnętrznych. */
.more{background:var(--white);padding-block:clamp(40px,5vw,64px)}
.more__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,44px)}

/* ─── Narzędzia ─────────────────────────────────────────────────────── */
.tools{background:var(--white);border-top:1px solid var(--haze);padding-block:clamp(40px,5vw,64px)}
.tools__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tools__grid a{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;background:var(--white);border:1px solid var(--haze);border-radius:14px;padding:22px 20px 46px;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
/* Strzałka mieszka w rogu i dojeżdża na hover. Zawsze widoczna, żeby
   było wiadomo, że kafel jest linkiem — ruch tylko ją potwierdza. */
.tools__grid a::after{content:"→";position:absolute;left:20px;bottom:16px;font-size:17px;color:var(--green);opacity:.45;transition:transform .22s ease,opacity .22s ease}
.tools__grid a:hover{border-color:var(--mint);transform:translateY(-2px);box-shadow:0 18px 30px -24px rgba(8,76,61,.55)}
.tools__grid a:hover::after{transform:translateX(5px);opacity:1}
.tools__n{font-weight:500;font-size:16.5px}
.tools__d{font-size:13.5px;color:var(--ink-60)}

/* ─── FAQ ───────────────────────────────────────────────────────────── */
.faq{background:var(--paper);padding-block:clamp(40px,5vw,66px)}
.faq__grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.faq__h{margin-bottom:22px}
.faq__list details{border-bottom:1px solid var(--haze)}
.faq__list summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-size:17px;font-weight:500;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:400 22px/1 var(--sans);color:var(--green);
}
.faq__list details[open] summary::after{content:"–"}
.faq__list details p{padding:0 40px 20px 0;color:var(--ink-60);font-size:15.5px}
.trust{background:var(--haze);border-radius:16px;padding:26px 24px}
.trust__h{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:12px}
.trust p{font-size:14.5px;color:var(--ink-60)}
.trust p + p{margin-top:12px}
.trust .mono{color:var(--ink);font-weight:500}

/* ─── Baner placówek ────────────────────────────────────────────────── */
/* Jasna mięta zamiast czerni. Katalog wyżej ma już pełną zieleń — drugi
   ciężki blok na jednym ekranie tylko by z nim konkurował. Ten ma być
   zaproszeniem, nie ścianą. */
.promo{background:var(--white);padding-block:clamp(36px,4.5vw,60px)}
.promo__in{
  position:relative;overflow:hidden;
  background:linear-gradient(148deg,#EAF5F1 0%,#DCEDE7 55%,#CFE6DD 100%);
  color:#0B3A2F;border:1px solid rgba(13,122,95,.16);border-radius:22px;
  padding:clamp(30px,3.6vw,52px);
  display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(26px,3vw,48px);align-items:center;
  --wm-o:.05;--wm-s:330px;--wm-t:-78px;--wm-r:-66px;--tick:rgba(13,122,95,.045);
}
.promo__in > *{position:relative;z-index:1}
.promo__kicker{font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.promo__h{font-family:var(--serif);font-weight:500;font-size:clamp(25px,2.8vw,36px);line-height:1.16;letter-spacing:-.02em;margin-top:14px;max-width:22ch}
.promo__p{margin-top:14px;color:rgba(11,58,47,.72);max-width:52ch}
.promo__cta{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.promo__sec{font-size:14.5px;color:var(--green);text-underline-offset:3px}
.promo__pts li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid rgba(13,122,95,.18);font-size:15px}
.promo__pts li:last-child{border-bottom:0}
/* Ptaszek zamiast kropki — to lista tego, co placówka DOSTAJE. */
.promo__pts li::before{
  content:"";position:absolute;left:2px;top:19px;width:11px;height:6px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}

/* ─── Newsletter ────────────────────────────────────────────────────── */
/* Mgła przed grafitem — papier ciemnieje stopniowo, zamiast urywać się
   na krawędzi stopki. */
.news{background:var(--haze);padding-block:clamp(40px,5vw,64px)}
.news__in{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.news__h{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.news__p{color:var(--ink-60);margin-top:8px;max-width:46ch}
.news__f{display:flex;gap:10px;flex-wrap:wrap}
.news__f input{font:400 16px var(--sans);padding:13px 16px;min-width:260px;border:1px solid var(--haze);border-radius:999px;background:var(--white);color:var(--ink)}
.news__f input:focus{outline:none;border-color:var(--green)}

/* ─── Stopka ────────────────────────────────────────────────────────── */
/* Ciemna — razem z paskiem źródła zamyka stronę w klamrę. To jedyne
   dwa ciemne pasy i oba są na krawędziach, więc żaden nie tnie treści. */
.foot{
  position:relative;overflow:hidden;
  background:var(--graphite);color:rgba(255,255,255,.72);
  padding-block:56px 30px;
  --wm-o:.045;--wm-s:420px;--wm-t:-130px;--wm-r:-100px;--tick:rgba(255,255,255,.045);
}
/* Cienka zielona nitka na styku z treścią — przejście, nie krawędź. */
.foot::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),var(--mint) 44%,transparent);z-index:2}
.foot > .wrap{position:relative;z-index:1}
.foot__in{display:grid;grid-template-columns:1.1fr 2fr;gap:44px}
/* Logo jest zielono-czarne — na graficie trzeba je wybielić. */
.foot__brand img{filter:brightness(0) invert(1);opacity:.94}
.foot__brand p{margin-top:16px;color:rgba(255,255,255,.5);font-size:14.5px;max-width:38ch}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot__cols h3{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.foot__cols a{display:block;width:fit-content;font-size:14.5px;padding-block:6px;text-decoration:none;color:rgba(255,255,255,.68);border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.foot__cols a:hover{color:#fff;border-bottom-color:var(--mint)}
.foot__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.42)}

/* ─── Responsywność ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .hero__grid{grid-template-columns:1fr}
  .popular__grid{grid-template-columns:1fr}
  .finder__chips{padding-top:20px}
  /* 2 kolumny → 8 rzędów, też bez sieroty. */
  .cities__grid{grid-template-columns:repeat(2,1fr)}
  .cities__grid .city__spec{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .dzialy__grid{grid-template-columns:1fr}
  .more__grid{grid-template-columns:1fr}
  .dir__row{grid-template-columns:repeat(2,1fr)}
  /* Nic nie chowamy — trzecia wizytówka schodzi do drugiego rzędu
     wewnątrz slajdu. Slider, który gubi treść przy zwężeniu, to błąd,
     nie responsywność. */
  .tools__grid{grid-template-columns:repeat(2,1fr)}
  .faq__grid{grid-template-columns:1fr}
  .promo__in{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
}
@media (max-width:720px){
  /* Na wąskim ekranie kadr 16:9 robi się za niski na tytuł nałożony
     na zdjęcie — slajd idzie w 4:3, żeby kurtyna miała gdzie usiąść. */
  .pops__link img{aspect-ratio:4/3}
  /* Sygnet + wordmark + CTA nie mieszczą się w 390 px i rozpychały
     dokument w poziomie. Skracamy jedno i drugie zamiast chować
     przycisk — na telefonie „Sprawdź termin" w nagłówku jest
     najkrótszą drogą do sedna produktu. */
  .head__in{gap:12px}
  /* Reguła z czasów sygnetu — kwadrat 30×30. Logo długie ma proporcję 4,25,
     więc wymuszona szerokość ściskała je do kwadratu. Wyłączona dla `.brand__logo`,
     bo w panelu wciąż można podmienić znak na kwadratowy. */
  .brand img:not(.brand__logo){width:30px;height:30px}
  .brand__txt{font-size:16px}
  .head__cta{padding:11px 14px;font-size:14px}

  /* Hero nie stoi już obok wyszukiwarki, więc slider wraca do kadru
     4:3 — jak w „Najczęściej czytane". */
  .pops--hero .pops__link img{min-height:0;height:auto;aspect-ratio:4/3}
  /* „NAJNOWSZE · 1 Z 5" łamało się na dwie linie obok strzałek. */
  .slider__label{font-size:10.5px;letter-spacing:.06em}
  .slider__ui{padding-inline:16px}
  /* Na wąskim ekranie oś przestaje być czytelna w poziomie —
     zamienia się w listę, gdzie dystans niesie już liczba, nie pozycja. */
  .scale__track{padding:0}
  .scale__rail,.scale__ticks{display:none}
  .scale__pins{position:static}
  .pin{position:static;transform:none;border-bottom:1px solid var(--haze)}
  .pin::after{display:none}
  .pin a{position:static;transform:none;opacity:1;flex-direction:row;justify-content:space-between;align-items:baseline;padding:14px 2px}
  .scale.is-on .pin--up a,.scale.is-on .pin--down a{transform:none}
  .scale__cap{margin-top:16px}
  /* Karta miasta zostaje jednokolumnowa, ale ośmiu specjalistów nadal
     mieści się w dwóch kolumnach — jedna dawałaby wieżę na 8 wierszy. */
  .cities__grid{grid-template-columns:1fr}
  .citysel{width:100%;justify-content:space-between}
  .dir__row{grid-template-columns:1fr}
  .tools__grid{grid-template-columns:1fr}
  .news__f input{min-width:0;flex:1 1 200px}
}

/* Najwęższe telefony (iPhone SE, 360 px) — nagłówek nadal wystawał o 3 px. */
@media (max-width:400px){
  .brand__txt{font-size:15px}
  .head__cta{padding:11px 12px;font-size:13.5px}
  /* Na 360 px etykieta slidera nadal łamała się przy strzałkach. */
  .slider__label{font-size:10px}
  .slider__arw{width:30px;height:30px}
  .slider__nav{gap:10px}
}
/* Poniżej 340 px (złożony Fold) wordmark nie ma prawa się zmieścić —
   zostaje sam sygnet. Nazwa i tak stoi w stopce. */
@media (max-width:340px){
  .brand__txt{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .scale__rail{transform:scaleX(1)}
  .pin a{opacity:1}
  .pin::after{transform:scale(1)}
}

/* ═══════════════════════════════════════════════════════════════════════
   PODSTRONY — komponenty wspólne
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Okruszki + nagłówek widoku ────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-40)}
.crumbs a{text-decoration:none;color:var(--ink-60);border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--green);border-bottom-color:var(--mint)}
.crumbs [aria-current]{color:var(--ink)}

.pagehead{position:relative;overflow:hidden;padding-block:clamp(20px,2.6vw,30px) clamp(26px,3.4vw,40px)}
/* Ta sama poświata co w hero — podstrona ma się otwierać tym samym
   światłem, nie płaskim papierem. */
.pagehead::before{
  content:"";position:absolute;inset:-60% -10% auto -10%;height:180%;pointer-events:none;
  background:radial-gradient(40% 46% at 72% 10%,rgba(32,168,134,.16),transparent 70%);
}
.pagehead > .wrap{position:relative;z-index:1}
.pagehead__h{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-.022em;margin-top:18px}
.pagehead__lede{margin-top:14px;max-width:62ch;color:var(--ink-60);font-size:16.5px}
.pagehead__count{margin-top:14px;font-size:12.5px;color:var(--ink-40)}

/* ─── Pasek działów ─────────────────────────────────────────────────── */
/* Przewijalny w poziomie zamiast łamany na cztery rzędy — dwanaście
   działów w kolumnie zjadłoby cały pierwszy ekran. */
.catnav{background:var(--white);border-block:1px solid var(--haze);position:sticky;top:65px;z-index:15}
.catnav__in{display:flex;gap:8px;overflow-x:auto;padding-block:12px;scrollbar-width:none}
.catnav__in::-webkit-scrollbar{display:none}
.catnav a{flex:none;font-size:14px;text-decoration:none;color:var(--ink-60);padding:8px 15px;border:1px solid var(--haze);border-radius:999px;transition:border-color .18s ease,color .18s ease,background .18s ease}
.catnav a:hover{border-color:var(--mint);color:var(--green)}
.catnav a.is-on{background:var(--green);border-color:var(--green);color:#fff}
/* Wariant w treści strony, nie pod nagłówkiem: nie przykleja się przy
   przewijaniu i bierze ton `paper`, żeby nie zlał się z białą sekcją
   „Przeczytaj też" nad nim ani z `haze` newslettera pod nim. */
.catnav--inline{position:static;background:var(--paper)}
.catnav--inline .catnav__in{padding-block:18px}

/* ─── Listing artykułów ─────────────────────────────────────────────── */
.listing{background:var(--paper);padding-block:clamp(30px,4vw,52px) clamp(40px,5vw,64px)}
.listing__grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(28px,3.4vw,54px);align-items:start}

/* Wyróżniony: jeden na stronę, żeby listing miał punkt wejścia. */
.feat{background:var(--white);border:1px solid var(--haze);border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr}
.feat__media{display:block;overflow:hidden;background:var(--haze)}
.feat__media img{width:100%;height:100%;object-fit:cover;min-height:280px;transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.feat:hover .feat__media img{transform:scale(1.035)}
.feat__b{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;justify-content:center}
.feat__h{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.3vw,30px);line-height:1.16;letter-spacing:-.015em;margin-top:14px}
.feat__h a{text-decoration:none}
.feat__h a:hover{text-decoration:underline;text-underline-offset:4px}
.feat__p{margin-top:12px;color:var(--ink-60);font-size:15.5px}
.feat__b .meta{margin-top:16px}

.alist{margin-top:clamp(18px,2vw,26px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.acard{display:flex}
.acard{background:var(--white);border:1px solid var(--haze);border-radius:16px;overflow:hidden;flex-direction:column;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.acard:hover{border-color:rgba(32,168,134,.5);transform:translateY(-2px);box-shadow:0 18px 32px -26px rgba(8,76,61,.55)}
.acard__media{display:block;overflow:hidden;background:var(--haze)}
.acard__media img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.acard:hover .acard__media img{transform:scale(1.04)}
.acard__b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.acard__h{font-family:var(--serif);font-weight:500;font-size:18.5px;line-height:1.24;margin-top:12px}
.acard__h a{text-decoration:none}
.acard__h a:hover{color:var(--green)}
.acard__p{margin-top:9px;font-size:14px;color:var(--ink-60)}
.acard__b .meta{margin-top:auto;padding-top:14px}

/* ─── Paginacja ─────────────────────────────────────────────────────── */
.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(26px,3vw,40px);padding-top:22px;border-top:1px solid var(--haze)}
.pager a{text-decoration:none;font-size:14px;color:var(--green)}
.pager__n{display:flex;align-items:center;gap:4px}
.pager__n a,.pager__n span{display:grid;place-items:center;min-width:36px;height:36px;padding-inline:8px;border-radius:10px;font-variant-numeric:tabular-nums}
.pager__n a:hover{background:var(--haze)}
.pager__n a.is-on{background:var(--green);color:#fff}
.pager__n span{color:var(--ink-40)}
.pager__prev,.pager__next{font-weight:500}
.pager .is-off{color:var(--ink-40);font-size:14px}

/* ─── Kolumna boczna ────────────────────────────────────────────────── */
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:126px}
.side__h{font-family:var(--serif);font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:14px}

.sidecta{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-radius:16px;padding:24px 22px;
  background:linear-gradient(158deg,#0F8768,#0A6650 60%,#085946);
  --wm-s:210px;--wm-r:-56px;--wm-t:auto;--wm-o:.09}
.sidecta::before{top:auto;bottom:-58px}
.sidecta__k{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.sidecta__h{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.18;margin-top:10px}
.sidecta__p{font-size:14px;color:rgba(255,255,255,.78);margin-top:10px;margin-bottom:18px}

.tags{background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:20px}
.tags__list{display:flex;flex-wrap:wrap;gap:7px}
.tags__list a{display:inline-block;font-size:13px;text-decoration:none;color:var(--ink-60);background:var(--paper);border:1px solid var(--haze);border-radius:999px;padding:6px 12px}
.tags__list a::before{content:"#";color:var(--mint);margin-inline-end:2px}
.tags__list a:hover{border-color:var(--mint);color:var(--green)}

@media (max-width:1100px){
  .listing__grid{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:860px){
  .feat{grid-template-columns:1fr}
  .feat__media img{min-height:0;aspect-ratio:16/9}
}
@media (max-width:640px){
  .alist{grid-template-columns:1fr}
  .catnav{position:static}
  .pager{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   ARTYKUŁ
   ═══════════════════════════════════════════════════════════════════ */

.arthead{position:relative;overflow:hidden;padding-top:clamp(20px,2.6vw,30px)}
.arthead::before{
  content:"";position:absolute;inset:-70% -10% auto -10%;height:190%;pointer-events:none;
  background:radial-gradient(38% 44% at 68% 8%,rgba(32,168,134,.16),transparent 70%);
}
.arthead > .wrap{position:relative;z-index:1}
/* Tytuł i lead trzymają miarę treści, ale zaczynają się w tej samej
   pionowej linii co okładka i kolumna tekstu. Wyśrodkowany blok nad
   lewo-wyrównaną okładką czytał się jak przesunięcie, nie jak decyzja. */
.arthead .cat{margin-top:22px}
.arthead__h{max-width:20ch;font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.022em;margin-top:16px;text-wrap:balance}
.arthead__lede{max-width:58ch;margin-top:18px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-60)}

.artmeta{max-width:760px;display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:26px;padding-block:16px;border-block:1px solid var(--haze)}
.artmeta__i{display:flex;flex-direction:column;gap:4px;font-size:14px}
.artmeta__l{font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}

.artcover{margin:clamp(24px,3vw,36px) 0 0;border-radius:18px;overflow:hidden;background:var(--haze)}
.artcover img{width:100%;aspect-ratio:16/9;object-fit:cover}

.art__grid{display:grid;grid-template-columns:minmax(0,760px) 320px;gap:clamp(28px,4vw,68px);align-items:start;padding-block:clamp(32px,4vw,52px) clamp(40px,5vw,64px)}

/* ─── Typografia treści ─────────────────────────────────────────────── */
/* Miara ~68 znaków, interlinia 1.72. Polski ma długie wyrazy i dużo
   diakrytyków — przy ciaśniejszej interlinii akcenty nad wersalikami
   wchodzą w ogonki wiersza wyżej. */
/* `overflow-wrap:anywhere` bo treść idzie z CMS-a i my nie kontrolujemy,
   co redaktor wklei. Polityka cookies ma link do wsparcia Mozilli długi
   na 89 znaków — bez tego jeden URL rozpychał kolumnę do 508 px w oknie
   360 px i cała strona jechała w bok. */
.prose{font-size:18px;line-height:1.72;max-width:68ch;overflow-wrap:anywhere}
.prose > p{margin-top:1.15em}
.prose > p:first-child{font-size:19.5px;color:var(--ink-60)}
.prose strong,.prose b{font-weight:600;color:var(--ink)}
.prose a:not(.btn){color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(13,122,95,.4)}
.prose a:not(.btn):hover{text-decoration-color:var(--green)}

.prose h2{
  position:relative;font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2.5vw,31px);line-height:1.18;letter-spacing:-.018em;
  margin-top:2em;padding-top:20px;scroll-margin-top:96px;
}
/* Ta sama kreska, co nad nagłówkami sekcji na stronie głównej —
   czytelnik ma widzieć jeden system, nie dwa. */
.prose h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:3px;border-radius:2px;background:var(--green)}
.prose h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.26;margin-top:1.7em;scroll-margin-top:96px}

.prose ul,.prose ol{margin-top:1.1em;display:flex;flex-direction:column;gap:.5em}
.prose li{position:relative;padding-left:26px}
.prose ul > li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;border-radius:2px;background:var(--mint)}
.prose ol{counter-reset:pl}
.prose ol > li{counter-increment:pl}
.prose ol > li::before{content:counter(pl) ".";position:absolute;left:0;top:0;font-family:var(--mono);font-size:14px;color:var(--green)}

/* ─── Wyróżnienie w treści ──────────────────────────────────────────── */
.callout{margin-top:2.4em;background:var(--haze);border-radius:16px;padding:24px 26px;border-left:4px solid var(--green)}
.callout__h{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;margin-bottom:10px}
.callout__h::before{content:none}
.callout p{font-size:15.5px;line-height:1.62;color:var(--ink-60)}
.callout p + p{margin-top:10px}
.callout b{color:var(--ink)}

.disclaimer{margin-top:26px;padding-top:18px;border-top:1px solid var(--haze);font-size:13.5px;color:var(--ink-40);line-height:1.55}

.arttags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.arttags a{display:inline-block;font-size:13px;text-decoration:none;color:var(--ink-60);background:var(--white);border:1px solid var(--haze);border-radius:999px;padding:6px 12px}
.arttags a::before{content:"#";color:var(--mint);margin-inline-end:2px}
.arttags a:hover{border-color:var(--mint);color:var(--green)}

/* ─── Spis treści ───────────────────────────────────────────────────── */
.side--art{top:96px}
.toc{background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:20px}
.toc__list{counter-reset:toc;display:flex;flex-direction:column}
.toc__list li{counter-increment:toc;border-top:1px solid var(--haze)}
.toc__list li:first-child{border-top:0}
.toc__list a{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;padding:9px 0;font-size:14px;line-height:1.35;text-decoration:none;color:var(--ink-60)}
.toc__list a::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;color:var(--ink-40)}
.toc__list a:hover{color:var(--green)}
.toc__list a:hover::before{color:var(--mint)}

/* ─── Powiązane ─────────────────────────────────────────────────────── */
.related{background:var(--white);border-top:1px solid var(--haze);padding-block:clamp(36px,4.5vw,58px)}
.alist--3{grid-template-columns:repeat(3,1fr);margin-top:0}

@media (max-width:1100px){
  /* `minmax(0,1fr)`, nie `1fr` — samo `1fr` ma podłogę na `min-content`,
     więc jeden długi token w treści rozpychał ścieżkę ponad kontener. */
  .art__grid{grid-template-columns:minmax(0,1fr)}
  .side--art{position:static}
  .toc__list{columns:2;column-gap:26px}
  .toc__list li{break-inside:avoid}
}
@media (max-width:860px){
  .alist--3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .prose{font-size:17px}
  .toc__list{columns:1}
  .artmeta{gap:10px 22px}
}

/* ═══════════════════════════════════════════════════════════════════════
   WYNIKI WYSZUKIWANIA TERMINÓW
   ═══════════════════════════════════════════════════════════════════ */

.finderbar{position:sticky;top:65px;z-index:15;background:var(--white);border-bottom:1px solid var(--haze);padding-block:14px 16px}
.finderbar .crumbs{margin-bottom:12px}
.fbar{display:grid;grid-template-columns:1.4fr 1fr 1fr auto auto;gap:12px;align-items:end}
.fbar__f{display:flex;flex-direction:column;gap:5px;min-width:0}
.fbar__f label{font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.fbar__f input{font:400 15.5px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--haze);border-radius:10px;padding:11px 14px;width:100%}
.fbar__f input:focus{outline:none;border-color:var(--green);background:var(--white)}
.fbar__f--sel .citysel__s{border-radius:10px;padding:11px 38px 11px 14px;font-size:15.5px}
.fbar__opt{display:flex;flex-direction:column;gap:6px}
.tick{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-60);cursor:pointer;white-space:nowrap}
.tick input{accent-color:var(--green);width:16px;height:16px}
.fbar__go{padding-block:13px}

.results{background:var(--paper);padding-block:clamp(24px,3vw,36px) clamp(32px,4vw,48px)}
.reshead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.reshead__h{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em}
.reshead__c{margin-top:8px;font-size:14.5px;color:var(--ink-60)}
.reshead__c b{color:var(--ink);font-weight:500}
.sortsel{display:flex;align-items:center;gap:10px}

.res{display:flex;flex-direction:column;gap:12px}
/* Wiersz wyniku: treść po lewej, POMIAR po prawej. Kolumna pomiarowa ma
   stałą szerokość, żeby liczby układały się w pion przez całą listę —
   wtedy da się je porównać wzrokiem, bez czytania. */
.res__i{display:grid;grid-template-columns:1fr 250px;gap:clamp(16px,2vw,28px);
  background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:20px 22px;
  transition:border-color .18s ease,box-shadow .18s ease}
.res__i:hover{border-color:rgba(32,168,134,.55);box-shadow:0 16px 30px -26px rgba(8,76,61,.5)}
.res__spec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.res__n{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.22;margin-top:8px}
.res__n a{text-decoration:none}
.res__n a:hover{text-decoration:underline;text-underline-offset:3px}
.res__adr{margin-top:6px;font-size:13.5px;color:var(--ink-60)}
.res__adr b{font-weight:500;color:var(--ink)}
.res__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px}
.res__q{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-60)}
.res__q--none{color:var(--ink-40)}
.res__ud{font-size:11.5px;color:var(--ink-40)}

.res__side{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-left:clamp(16px,2vw,26px);border-left:1px solid var(--haze)}
.res__m{width:100%}
.res__big{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--green);display:flex;align-items:baseline;gap:7px}
.res__big b{font-weight:500}
.res__big span{font-family:var(--sans);font-size:15px;color:var(--ink-60)}
/* Brak danych to informacja, a nie puste miejsce — NFZ często nie podaje
   czasu oczekiwania i czytelnik musi wiedzieć, że to nie nasz błąd. */
.res__big--none{font-size:22px;color:var(--ink-40)}
.res__lbl{margin-top:6px;font-size:11.5px;color:var(--ink-40);line-height:1.35}
.res__date{margin-top:12px;font-size:13px;color:var(--ink-60)}
.res__date b{font-size:15px;color:var(--ink);font-weight:500}
.res__stan{font-size:11px;color:var(--ink-40)}
.res__tel{margin-top:auto;font:500 13.5px var(--sans);color:var(--green);background:var(--haze);border:0;border-radius:999px;padding:9px 16px}
.res__tel:hover{background:var(--green);color:#fff}

/* ─── Stan „nic nie znaleziono" ─────────────────────────────────────── */
.nores{background:var(--white);border-top:1px solid var(--haze);padding-block:clamp(34px,4vw,52px)}
.nores__in{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.nores__h{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em}
.nores__p{margin-top:12px;color:var(--ink-60);font-size:15.5px;max-width:58ch}
.nores__cta{margin-top:20px}

@media (max-width:1100px){
  .fbar{grid-template-columns:1fr 1fr;align-items:start}
  .fbar__opt{grid-column:1/-1;flex-direction:row;gap:18px}
  .fbar__go{grid-column:1/-1;width:100%}
}
@media (max-width:860px){
  .res__i{grid-template-columns:1fr}
  .res__side{padding-left:0;padding-top:16px;border-left:0;border-top:1px solid var(--haze);
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 22px}
  .res__m{width:auto}
  .res__date,.res__stan{margin-top:0}
  .res__tel{margin-top:0;margin-left:auto}
  .nores__in{grid-template-columns:1fr}
}
@media (max-width:640px){
  .finderbar{position:static}
  .fbar{grid-template-columns:1fr}
  .reshead{align-items:flex-start}
}

/* Kropka statusu — była w usuniętym bloku kart placówek, a używa jej
   zarówno karta na stronie głównej, jak i wiersz wyników. */
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:none}

/* ═══════════════════════════════════════════════════════════════════════
   KATALOG — listing z filtrami
   ═══════════════════════════════════════════════════════════════════ */

.pagehead--tight{padding-bottom:clamp(18px,2.2vw,26px)}
/* UWAGA: `.cat` jest już zajęte przez etykietę kategorii artykułu
   (uppercase + kreska), więc sekcja katalogu nazywa się `.catalog`.
   Kolizja dawała WERSALIKI na całym listingu placówek. */
.catalog{background:var(--paper);padding-block:clamp(24px,3vw,36px) clamp(36px,4.5vw,56px);border-top:1px solid var(--haze)}
.catalog__grid{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,3vw,44px);align-items:start}

.filters{position:sticky;top:96px;background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:20px}
.filters__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.filters__head .side__h{margin-bottom:0}
.filters__clear{background:none;border:0;padding:0;font:500 13px var(--sans);color:var(--green)}
.filters__clear:hover{text-decoration:underline;text-underline-offset:3px}
.filters__g{padding-top:16px;margin-top:16px;border-top:1px solid var(--haze)}
.filters__g:first-of-type{padding-top:0;margin-top:0;border-top:0}
.filters__l{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);margin-bottom:9px}
.filters__in{width:100%;font:400 14.5px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--haze);border-radius:10px;padding:10px 13px}
.filters__in:focus{outline:none;border-color:var(--green);background:var(--white)}
/* Lista przewijalna z maską u dołu — bez niej nie widać, że dalej coś
   jest, i użytkownik uznaje pierwsze dziesięć pozycji za całość. */
.filters__list{margin-top:10px;max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);
  mask-image:linear-gradient(180deg,#000 88%,transparent);
  scrollbar-width:thin}
.filters__list--short{max-height:none;-webkit-mask-image:none;mask-image:none}
/* `.tick` domyślnie nie łamie wiersza, bo to przełącznik na dwa–trzy słowa
   („Wszystkie", „Tylko NFZ"). Na liście filtrów są jednak pełne nazwy
   specjalizacji NFZ — „Endokrynologia ginekologiczna i rozrodczość" ma 301 px
   i przy zakazie zawijania wypychała cały panel poza ekran telefonu oraz poza
   290-pikselową kolumnę na desktopie. Tutaj etykiety zawijają się, a kwadrat
   checkboxa trzyma pozycję przy pierwszym wierszu. */
.filters__list .tick{padding:6px 0;font-size:14px;white-space:normal;align-items:flex-start}
.filters__list .tick input{flex:0 0 auto;margin-top:3px}
.filters__go{width:100%;margin-top:18px}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chips button{display:inline-flex;align-items:center;gap:8px;font:500 12.5px var(--sans);color:var(--green);
  background:var(--haze);border:1px solid transparent;border-radius:999px;padding:6px 12px}
.chips button span{color:var(--ink-40);font-size:15px;line-height:1}
.chips button:hover{border-color:var(--mint);background:var(--white)}
.chips button:hover span{color:var(--green)}

.clist{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.cfac__link{display:grid;grid-template-columns:76px 1fr 28px;gap:16px;align-items:center;
  background:var(--white);border:1px solid var(--haze);border-radius:14px;padding:14px 16px;text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease}
.cfac__link:hover{border-color:rgba(32,168,134,.55);box-shadow:0 16px 28px -24px rgba(8,76,61,.5)}
/* Ta sama okładka generowana, co na stronie głównej — tylko kwadratowa,
   bo w wierszu listy nie ma miejsca na kadr 16:9. */
.cfac__cover{position:relative;display:block;width:76px;height:76px;border-radius:11px;overflow:hidden}
.cfac__cover .fac__init{left:12px;bottom:4px;font-size:34px}
.cfac__b{min-width:0}
.cfac__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cfac__n{font-family:var(--serif);font-weight:500;font-size:17.5px;line-height:1.2}
.cfac__link:hover .cfac__n{color:var(--green)}
.cfac__nfz{font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--green);background:var(--haze);border-radius:999px;padding:5px 9px}
.cfac__adr{display:block;margin-top:6px;font-size:13px;color:var(--ink-60)}
.cfac__adr b{font-weight:500;color:var(--ink)}
.clist__specs{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.clist__specs li{font-size:11.5px;color:var(--ink-60);background:var(--paper);border:1px solid var(--haze);border-radius:999px;padding:4px 9px}
.clist__more{color:var(--green)!important;border-color:rgba(13,122,95,.3)!important}
.cfac__go{font-size:18px;color:var(--ink-40);transition:transform .2s ease,color .2s ease}
.cfac__link:hover .cfac__go{color:var(--green);transform:translateX(4px)}

@media (max-width:980px){
  .catalog__grid{grid-template-columns:1fr}
  .filters{position:static}
  .filters__list{max-height:200px}
}
@media (max-width:560px){
  .cfac__link{grid-template-columns:56px 1fr;gap:12px}
  .cfac__cover{width:56px;height:56px}
  .cfac__cover .fac__init{font-size:24px;left:9px}
  .cfac__go{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   WIZYTÓWKA PLACÓWKI
   ═══════════════════════════════════════════════════════════════════ */

.claim{background:linear-gradient(148deg,#EAF5F1,#DCEDE7);border-bottom:1px solid rgba(13,122,95,.16)}
.claim__in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:14px}
.claim__t{font-size:14.5px;color:rgba(11,58,47,.78);max-width:70ch}
.claim__t b{color:#0B3A2F;font-weight:600}
.claim__go{flex:none;padding:11px 18px;font-size:14px}

.profhead{position:relative;overflow:hidden;background:var(--paper);padding-block:clamp(20px,2.6vw,28px) clamp(26px,3.4vw,40px);
  --wm-s:400px;--wm-r:-90px;--wm-t:-120px;--wm-o:.04}
.profhead__in{display:grid;grid-template-columns:120px 1fr;gap:clamp(18px,2.4vw,30px);align-items:start;margin-top:20px}
.profhead__cover{position:relative;display:block;width:120px;height:120px;border-radius:18px;overflow:hidden}
.profhead__cover .fac__init{left:18px;bottom:8px;font-size:52px}
.profhead__badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profhead__typ{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);background:var(--white);border:1px solid var(--haze);border-radius:999px;padding:5px 10px}
.profhead__h{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;margin-top:14px;max-width:24ch}
.profhead__adr{margin-top:10px;font-size:15px;color:var(--ink-60)}
.profhead__adr b{font-weight:500;color:var(--ink)}
.profhead__act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.profsave{font:500 14px var(--sans);color:var(--green);background:none;border:1px solid var(--haze);border-radius:999px;padding:12px 18px}
.profsave::before{content:"♡";margin-inline-end:7px}
.profsave:hover{border-color:var(--mint);background:var(--white)}

.prof__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3.4vw,52px);align-items:start;padding-block:clamp(28px,3.4vw,44px) clamp(36px,4.5vw,56px)}
.prof__main{display:flex;flex-direction:column;gap:16px}

.pblock{background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:24px}
.pblock__h{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:14px}
.pblock__note{margin-top:14px;font-size:13.5px;color:var(--ink-40);line-height:1.55;max-width:62ch}
.pblock__more{display:inline-block;margin-top:16px;font-size:14px;font-weight:500;color:var(--green);text-decoration:none;border-bottom:1px solid rgba(13,122,95,.35);padding-bottom:2px}
.pblock__more::after{content:" →";display:inline-block;transition:transform .2s ease}
.pblock__more:hover::after{transform:translateX(4px)}
.pspecs li{font-size:13px;padding:7px 13px}

.pqueue__in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--haze);border-radius:12px;padding:18px 20px}
.pqueue__l{font-size:14px;color:var(--ink-60)}
.pqueue__s{margin-top:4px;font-size:11.5px;color:var(--ink-40)}

/* Stan pusty jako zaproszenie, nie komunikat błędu. */
.empty{background:var(--paper);border:1px dashed rgba(13,122,95,.28);border-radius:14px;padding:26px 24px;text-align:center}
.empty__h{font-family:var(--serif);font-weight:500;font-size:19px}
.empty__p{margin-top:9px;font-size:14.5px;color:var(--ink-60);max-width:52ch;margin-inline:auto;line-height:1.6}
.empty__cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.empty__note{font-size:12.5px;color:var(--ink-40)}

.side--prof{top:96px}
.pcard{background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:20px}
.pdl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px}
.pdl dt{font:500 10.5px/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-40);padding-top:3px}
.pdl dd{margin:0;color:var(--ink-60);line-height:1.5}
.pdl__yes{color:var(--green);font-weight:500}

@media (max-width:1100px){
  .prof__grid{grid-template-columns:1fr}
  .side--prof{position:static}
}
@media (max-width:560px){
  .profhead__in{grid-template-columns:1fr}
  .profhead__cover{width:88px;height:88px}
  .profhead__cover .fac__init{font-size:38px;left:13px}
  .pdl{grid-template-columns:1fr;gap:3px 0}
  .pdl dd{margin-bottom:9px}
}

/* Katalog: nagłówek widoku i sekcja z filtrami stykały się dwoma
   papierami. Nagłówek idzie na biel — poświata marki czyta się na niej
   nawet lepiej niż na papierze. */
.pagehead--onWhite{background:var(--white)}

/* ═══════════════════════════════════════════════════════════════════════
   STRONA TREŚCIOWA + KONTO
   ═══════════════════════════════════════════════════════════════════ */

/* Dokument nie ma okładki, więc nagłówek dostaje dolną krechę zamiast
   zdjęcia — inaczej tytuł wisiałby nad treścią bez żadnego zamknięcia. */
.art--doc .arthead{padding-bottom:0;border-bottom:1px solid var(--haze)}
.art--doc .arthead .eyebrow{margin-top:20px;margin-bottom:0}
.art--doc .artmeta{border-bottom:0;margin-bottom:0}
.pcard__p{font-size:14px;color:var(--ink-60);line-height:1.55;margin-bottom:12px}

.doclist{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.doclist a{display:grid;grid-template-columns:1fr 20px;gap:12px;align-items:center;height:100%;
  background:var(--paper);border:1px solid var(--haze);border-radius:14px;padding:18px 20px;text-decoration:none;
  transition:border-color .18s ease,transform .18s ease}
.doclist a:hover{border-color:var(--mint);transform:translateY(-2px)}
.doclist__n{font-family:var(--serif);font-weight:500;font-size:17px;display:block}
.doclist__d{display:block;grid-column:1;font-size:13px;color:var(--ink-60);margin-top:5px;line-height:1.45}
.doclist a:hover .doclist__n{color:var(--green)}

/* ─── Konto ─────────────────────────────────────────────────────────── */
.auth{padding-block:clamp(26px,3.4vw,44px) clamp(40px,5vw,64px)}
.auth__grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(26px,3.4vw,56px);align-items:stretch}
.auth__box{background:var(--white);border:1px solid var(--haze);border-radius:20px;padding:clamp(24px,3vw,40px);max-width:560px;width:100%;justify-self:end}
.auth__box .eyebrow{margin-top:22px}
.auth__h{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.02em}
.auth__lede{margin-top:12px;color:var(--ink-60);font-size:15.5px}
.auth__alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--haze);font-size:14.5px;color:var(--ink-60)}
.auth__alt a{color:var(--green);font-weight:500;text-underline-offset:3px}

.authform{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.authform__f{display:flex;flex-direction:column;gap:6px}
.authform__f label{font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);display:flex;align-items:center;gap:8px}
.authform__opt{letter-spacing:.02em;text-transform:none;font-weight:400;font-size:11px;color:var(--ink-40)}
/* `width:100%;min-width:0` nie zmienia wyglądu (pole i tak rozciąga się na całą
   kolumnę), ale odcina wewnętrzną szerokość `input`a od atrybutu `size`, który
   domyślnie wynosi 20 znaków. Bez tego pole kodu 2FA — mono 26px z
   `letter-spacing:.5em` — wnosiło ~570px szerokości min-content i rozpychało
   całą kartę logowania poza ekran telefonu. */
.authform__f input{font:400 16px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--haze);border-radius:11px;padding:13px 15px;width:100%;min-width:0}
.authform__f input:focus{outline:none;border-color:var(--green);background:var(--white)}
.authform__hint{font-size:12.5px;color:var(--ink-40)}
.authform__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.authform__forgot{font-size:13.5px;color:var(--green);text-underline-offset:3px}
.authform__legal{font-size:12.5px;color:var(--ink-40);line-height:1.55}
.authform__legal a{color:var(--green)}
.authform__go{margin-top:4px;padding-block:15px}

/* Prawa kolumna odpowiada na pytanie „po co mi konto". Formularz sam
   w sobie tego nie robi, a konto zakłada się tu z jednego powodu:
   żeby przejąć profil placówki. */
.auth__why{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-radius:20px;
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;
  background:linear-gradient(158deg,#0F8768,#0A6650 58%,#085946);
  --wm-s:300px;--wm-r:-70px;--wm-t:auto;--wm-o:.08}
.auth__why::before{top:auto;bottom:-80px}
.auth__why-k{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.auth__why-h{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2vw,28px);line-height:1.16;margin-top:12px}
.auth__why-l{display:flex;flex-direction:column;gap:11px;margin-top:22px}
.auth__why-l li{position:relative;padding-left:26px;font-size:14.5px;color:rgba(255,255,255,.9);line-height:1.5}
.auth__why-l li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;
  border-left:2px solid rgba(255,255,255,.85);border-bottom:2px solid rgba(255,255,255,.85);transform:rotate(-45deg)}
.auth__why-p{margin-top:auto;padding-top:24px;font-size:13.5px;color:rgba(255,255,255,.7);line-height:1.55}
.auth__why-p b{color:#fff;font-weight:500}
.auth__why .btn{margin-top:18px;align-self:flex-start}

@media (max-width:980px){
  .auth__grid{grid-template-columns:1fr}
  .auth__box{justify-self:stretch;max-width:none}
  .doclist{grid-template-columns:1fr}
}

/* ─── Konto: rozszerzenia auth/ (przeniesione z auth/partials/styles.blade.php,
   sprzątanie po fazie 3) — banery walidacji, wariant „solo" bez kolumny
   „po co mi to" i komponenty 2FA. Podglądowe szablony logowania/rejestracji
   nie musiały ich pokazywać, więc rozszerzały .auth__box/.auth__grid/.authform
   powyżej z siedmiu widoków auth/. Marka nie ma czerwieni: dotkliwość błędu
   niesie tu --deep (wygaszona zieleń), nie kolor ostrzegawczy. ───────── */

/* Banery walidacji / potwierdzenia nad formularzem */
.authform__alert{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;
    padding:14px 16px;background:var(--paper);border:1px solid var(--haze);
    border-left:3px solid var(--deep);border-radius:12px}
.authform__alert--ok{border-left-color:var(--green)}
.authform__alert p{margin:0;font-size:14px;line-height:1.55;color:var(--ink)}
.authform__alert ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:var(--ink-60)}
.authform__alert ul li + li{margin-top:2px}

/* Błąd pojedynczego pola (dyrektywa @error) */
.authform__ferr{font-size:12.5px;color:var(--deep)}
.authform__f input.has-err{border-color:var(--deep)}

/* Wariant bez kolumny „po co mi to" — wąski box wyśrodkowany
   (zapomniane hasło, nowe hasło, weryfikacja e-mail, 2FA). */
.auth__grid--solo{grid-template-columns:1fr;justify-items:center}
.auth__grid--solo .auth__box{justify-self:center;max-width:480px}

/* 2FA: krok, kod QR, klucz ręczny, kody zapasowe */
.twofa__step{font:500 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);margin-bottom:8px}
.twofa__qr{display:flex;justify-content:center;padding:22px;background:var(--paper);border:1px solid var(--haze);border-radius:14px;margin-top:26px}
.twofa__qr svg{width:180px;height:180px}
.twofa__key{display:block;margin-top:14px;padding:12px 14px;background:var(--paper);border:1px solid var(--haze);
    border-radius:10px;font:500 15px/1.4 var(--mono);letter-spacing:.1em;text-align:center;color:var(--ink);
    -webkit-user-select:all;user-select:all}
.twofa__codes{margin-top:14px;padding:16px;background:var(--paper);border:1px solid var(--haze);border-radius:12px}
.twofa__codes-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:10px}
.twofa__codes-grid span{font:500 14.5px/1.4 var(--mono);color:var(--ink);letter-spacing:.04em}
.authform__f--otp input{text-align:center;font-family:var(--mono);font-size:26px;letter-spacing:.5em;padding-inline:10px}
.authform__f--otp input::placeholder{letter-spacing:.5em}

@media (max-width:480px){
  .twofa__codes-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   CENNIK
   ═══════════════════════════════════════════════════════════════════ */

.plans{background:var(--paper);padding-block:clamp(28px,3.4vw,44px) clamp(24px,3vw,36px)}
.plans__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--haze);border-radius:18px;padding:26px 22px 24px}
/* Plan polecany dostaje pełną zieleń — jeden solid na cztery karty mówi,
   gdzie patrzeć, tak samo jak wyszukiwarka w hero. */
.plan--hot{color:#fff;border-color:transparent;
  background:linear-gradient(158deg,#0F8768,#0A6650 60%,#085946);
  box-shadow:0 26px 50px -32px rgba(8,76,61,.7)}
.plan__flag{position:absolute;top:-11px;left:22px;font:600 10px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;background:var(--mint);color:#04241C;border-radius:999px;padding:6px 12px}
.plan__n{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
/* Mięta marki na ciemnej zieleni ma za niski kontrast — etykieta planu
   dostaje rozjaśniony wariant, żeby dało się ją przeczytać. */
.plan--hot .plan__n{color:#8FDCC5}
.plan__who{font-size:13px;color:var(--ink-40);margin-top:7px}
.plan--hot .plan__who{color:rgba(255,255,255,.6)}
.plan__price{display:flex;align-items:baseline;gap:8px;margin-top:16px}
.plan__price b{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.03em}
.plan__price span{font-size:13px;color:var(--ink-40)}
.plan--hot .plan__price span{color:rgba(255,255,255,.62)}
.plan__d{margin-top:14px;font-size:14px;line-height:1.5;color:var(--ink-60)}
.plan--hot .plan__d{color:rgba(255,255,255,.8)}
.plan__stats{display:flex;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--haze)}
.plan--hot .plan__stats{border-top-color:rgba(255,255,255,.2)}
.plan__stats li{font-size:12.5px;color:var(--ink-40)}
.plan--hot .plan__stats li{color:rgba(255,255,255,.62)}
.plan__stats b{display:block;font-size:19px;color:var(--ink);font-weight:500}
.plan--hot .plan__stats b{color:#fff}
.plan__go{margin-top:auto;padding-top:14px;margin-top:22px;width:100%}
.plans__note{margin-top:20px;font-size:13px;color:var(--ink-40);max-width:70ch}

/* ─── Tabela porównawcza ────────────────────────────────────────────── */
.compare{background:var(--white);border-top:1px solid var(--haze);padding-block:clamp(32px,4vw,52px)}
.compare__scroll{overflow-x:auto;scrollbar-width:thin}
.ctab{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.ctab th,.ctab td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--haze)}
/* Pierwsza kolumna przykleja się przy przewijaniu w poziomie — bez tego
   przy czwartym planie nie wiadomo, o którą cechę chodzi. */
.ctab th[scope="row"]{position:sticky;left:0;background:var(--white);text-align:left;
  font-weight:400;color:var(--ink-60);min-width:200px}
.ctab thead th{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);padding-block:10px 14px;border-bottom:2px solid var(--haze)}
.ctab thead th[scope="row"]{color:var(--ink-40)}
.ctab__hot{background:rgba(32,168,134,.07)}
.ctab thead .ctab__hot{color:var(--green)}
.ctab__yes{color:var(--green);font-weight:500}
.ctab__no{color:var(--ink-40)}
.ctab tbody tr:last-child th,.ctab tbody tr:last-child td{border-bottom:0}

@media (max-width:1100px){ .plans__grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (max-width:600px){ .plans__grid{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════
   DLA PLACÓWEK + 404
   ═══════════════════════════════════════════════════════════════════ */

.dphero__lede{margin-top:18px;max-width:56ch;font-size:17px;color:var(--ink-60)}
.dphero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(26px,3.4vw,42px);align-items:stretch}
.dphero__box{position:relative;overflow:hidden;isolation:isolate;color:#fff;border-radius:20px;
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;
  background:linear-gradient(158deg,#0F8768,#0A6650 58%,#085946);
  box-shadow:0 26px 50px -32px rgba(8,76,61,.65);
  --wm-s:280px;--wm-r:-66px;--wm-t:auto;--wm-o:.08}
.dphero__box::before{top:auto;bottom:-70px}
.dphero__k{font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8FDCC5}
.dphero__h{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.14;margin-top:12px}
.dphero__p{margin-top:14px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82)}
.dphero__cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:26px}
.dphero__sec{font-size:14.5px;color:#8FDCC5;text-underline-offset:3px}

.dpargs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--haze);
  border:1px solid var(--haze);border-radius:20px;overflow:hidden}
.dpargs li{background:var(--white);padding:22px 20px}
.dpargs__h{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.24}
.dpargs__p{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--ink-60)}

/* Numeracja kroków jest tu uzasadniona: to sekwencja, nie lista cech. */
.steps{background:var(--white);border-block:1px solid var(--haze);padding-block:clamp(34px,4.2vw,52px)}
.steps__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);counter-reset:st}
.steps__list li{position:relative;padding-top:20px;border-top:3px solid var(--green)}
.steps__n{font-size:12px;color:var(--ink-40);letter-spacing:.08em}
.steps__h{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.22;margin-top:8px}
.steps__p{margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--ink-60)}

/* ─── 404 ───────────────────────────────────────────────────────────── */
.err{position:relative;overflow:hidden;padding-block:clamp(46px,6vw,86px)}
.err::before{content:"";position:absolute;inset:-60% -10% auto -10%;height:190%;pointer-events:none;
  background:radial-gradient(40% 46% at 62% 12%,rgba(32,168,134,.18),transparent 70%)}
.err__in{position:relative;z-index:1;max-width:62ch}
.err__code{font-size:13px;letter-spacing:.24em;color:var(--green)}
.err__h{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,56px);line-height:1.06;letter-spacing:-.022em;margin-top:14px}
.err__p{margin-top:16px;font-size:17px;color:var(--ink-60)}
.err__f{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.err__f input{flex:1 1 260px;font:400 16px var(--sans);color:var(--ink);background:var(--white);
  border:1px solid var(--haze);border-radius:999px;padding:13px 20px}
.err__f input:focus{outline:none;border-color:var(--green)}
.err__links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:34px}
.err__links a{display:block;background:var(--white);border:1px solid var(--haze);border-radius:14px;
  padding:16px 18px;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.err__links a:hover{border-color:var(--mint);transform:translateY(-2px)}
.err__links b{display:block;font-family:var(--serif);font-weight:500;font-size:17px}
.err__links span{display:block;margin-top:4px;font-size:13px;color:var(--ink-60)}
.err__links a:hover b{color:var(--green)}

@media (max-width:980px){
  .dphero{grid-template-columns:1fr}
  .steps__list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .dpargs{grid-template-columns:1fr}
  .err__links{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   KALKULATORY + POMOC
   ═══════════════════════════════════════════════════════════════════ */

.tools--hub{background:var(--paper);border-top:0;padding-block:clamp(28px,3.4vw,44px) clamp(36px,4.5vw,56px)}
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hub a{display:grid;grid-template-columns:1fr 20px;gap:10px;align-items:start;height:100%;
  background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:22px 20px;text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.hub a:hover{border-color:rgba(32,168,134,.55);transform:translateY(-2px);box-shadow:0 18px 32px -26px rgba(8,76,61,.5)}
.hub__n{font-family:var(--serif);font-weight:500;font-size:19px;line-height:1.2}
.hub a:hover .hub__n{color:var(--green)}
.hub__s{grid-column:1;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-top:6px}
.hub__d{grid-column:1;font-size:13.5px;line-height:1.5;color:var(--ink-60);margin-top:10px}
.callout--wide{margin-top:20px;max-width:none}
.callout--wide p{font-size:15px}
.callout--wide a:not(.btn){color:var(--green);text-underline-offset:3px}

/* ─── Pojedynczy kalkulator ─────────────────────────────────────────── */
.calc{background:var(--paper);padding-block:clamp(24px,3vw,38px) clamp(36px,4.5vw,56px)}
.calc__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,48px);align-items:start}
.calc__box{background:var(--white);border:1px solid var(--haze);border-radius:20px;padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:18px}
.calc__f{display:flex;flex-direction:column;gap:7px}
.calc__f label{font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.calc__inw{position:relative;display:block}
.calc__inw input{width:100%;font:400 20px var(--mono);color:var(--ink);background:var(--paper);
  border:1px solid var(--haze);border-radius:12px;padding:14px 56px 14px 16px}
.calc__inw input:focus{outline:none;border-color:var(--green);background:var(--white)}
.calc__u{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--ink-40)}

.calc__out{display:block;margin-top:6px;padding-top:22px;border-top:1px solid var(--haze)}
.calc__lbl{font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.calc__big{margin-top:12px}
.calc__big b{font-family:var(--serif);font-weight:500;font-size:clamp(48px,6vw,72px);line-height:1;letter-spacing:-.03em;color:var(--green)}
.calc__cat{margin-top:6px;font-size:17px;font-weight:500}
.calc__cat[data-state="ok"]{color:var(--green)}
.calc__cat[data-state="low"],.calc__cat[data-state="warn"]{color:var(--ink)}
.calc__cat[data-state="high"]{color:var(--deep)}

/* Skala: ten sam gest, co oś czekania na stronie głównej — pozycja mówi
   więcej niż liczba. Zieleń marki oznacza normę; drugiego, ostrzegawczego
   koloru celowo nie ma, bo zasady marki wykluczają czerwień. */
.calc__scale{position:relative;margin-top:28px}
.calc__rail{display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden}
.calc__seg{width:var(--w);background:var(--haze)}
.calc__seg--ok{background:var(--mint)}
.calc__pin{position:absolute;top:-7px;width:4px;height:24px;border-radius:3px;background:var(--ink);
  transform:translateX(-50%);transition:left .28s cubic-bezier(.3,.9,.3,1),opacity .2s ease;opacity:0}
.calc__ticks{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--ink-40)}

.side--calc{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px}
.side--calc .callout{margin-top:0}

/* ─── Centrum pomocy ────────────────────────────────────────────────── */
.helppage{background:var(--paper);padding-block:clamp(26px,3.2vw,40px) clamp(36px,4.5vw,56px)}
.help__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(26px,3.4vw,56px);align-items:start}
.help__main{display:flex;flex-direction:column;gap:20px}
.helpg{background:var(--white);border:1px solid var(--haze);border-radius:16px;padding:24px;scroll-margin-top:96px}
.helpg__h{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;
  padding-bottom:14px;border-bottom:3px solid var(--green);margin-bottom:6px}

@media (max-width:1100px){
  .calc__grid,.help__grid{grid-template-columns:1fr}
  .side--calc{position:static}
}
@media (max-width:860px){ .hub{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .hub{grid-template-columns:1fr} }

/* ─── Wybór roli przy rejestracji ───────────────────────────────────── */
/* Dwa pola, nie lista rozwijana: role są dwie i obie mają być widoczne
   od razu. Wybór roli zmienia formularz, więc nie może być schowany. */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.roles__b{display:flex;flex-direction:column;gap:4px;text-align:left;
  background:var(--paper);border:1px solid var(--haze);border-radius:14px;padding:14px 16px;
  transition:border-color .18s ease,background .18s ease}
.roles__b:hover{border-color:var(--mint)}
.roles__b.is-on{background:var(--white);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.roles__n{font:500 15.5px/1.2 var(--sans);color:var(--ink)}
.roles__b.is-on .roles__n{color:var(--green)}
.roles__d{font-size:12.5px;color:var(--ink-40)}
/* Wariant trzykolumnowy (pasek zakładek w ustawieniach konta). `minmax(0,1fr)`,
   bo samo `1fr` ma podłogę min-content — najdłuższa etykieta rozpycha wtedy
   kolumnę ponad przydział i cały pasek wychodzi poza ekran. */
.roles--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.auth__roles{margin-top:22px;display:flex;flex-direction:column;gap:16px}
.auth__roles dt{font:600 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#8FDCC5}
.auth__roles dd{margin:7px 0 0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.86)}

@media (max-width:480px){ .roles{grid-template-columns:1fr} }
/* Trzy zakładki potrzebują więcej miejsca niż dwie karty ról, więc łamią się
   wcześniej — przy 480 px etykieta „Powiadomienia / Co do Ciebie piszemy"
   byłaby już przycięta. */
@media (max-width:620px){ .roles--3{grid-template-columns:1fr} }

/* ═══════════════════════════════════════════════════════════════════════
   BANER ZGÓD NA COOKIES — Google Consent Mode v2
   ─────────────────────────────────────────────────────────────────────
   Panel, nie alarm: papier, cienka linia u góry, miękki cień w górę.
   Kolor marki niesie akcent (eyebrow, przycisk główny), nie całą
   powierzchnię — stąd brak pełnej zielonej ramki, jaką miała stara
   wersja. Znak wodny to ten sam sygnet co w stopce, przez `.wm`. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:900;
  background:var(--paper);border-top:1px solid var(--haze);
  box-shadow:0 -22px 44px -32px rgba(8,76,61,.45);
  animation:cookiebarUp .32s ease}
@keyframes cookiebarUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.cookiebar.wm{--wm-r:-40px;--wm-t:-60px;--wm-s:220px;--wm-o:.05}

.cookiebar__in{max-width:760px;padding-block:22px 20px}
.cookiebar .eyebrow{margin-bottom:8px}
.cookiebar__h{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.cookiebar__desc{font-size:14.5px;line-height:1.6;color:var(--ink-60);margin:0;max-width:64ch}
.cookiebar__lnk{color:var(--green);text-underline-offset:3px}

.cookiebar__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.cookiebar__btn{padding:11px 22px;font-size:14px}
.cookiebar__btn--outline{background:var(--white);color:var(--ink);border-color:var(--haze)}
.cookiebar__btn--outline:hover{border-color:var(--mint);color:var(--green)}
.cookiebar__more{background:none;border:0;padding:11px 6px;font:600 14px/1 var(--sans);
  color:var(--green);cursor:pointer;margin-inline-start:auto}
.cookiebar__more:hover{text-decoration:underline}

.cookiebar__panel{border-top:1px solid var(--haze);margin-top:18px;padding-top:16px}
.cookiebar__list{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}
.cookiebar__row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;cursor:pointer}
.cookiebar__ri{flex:1;display:flex;flex-direction:column;gap:3px}
.cookiebar__rn{font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.cookiebar__rd{font-size:13px;line-height:1.5;color:var(--ink-40)}

/* Przełącznik: input jest wizualnie ukryty (nie `display:none`, żeby
   zostawić go w drzewie fokusu), `.cookiebar__track` niesie wygląd. */
.cookiebar__switch{position:relative;flex:none;display:inline-flex;align-items:center;margin-top:2px}
.cookiebar__input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.cookiebar__track{position:relative;width:42px;height:24px;border-radius:12px;background:var(--haze);transition:background .18s ease}
.cookiebar__track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(8,76,61,.35);transition:transform .18s ease}
.cookiebar__input:checked + .cookiebar__track{background:var(--green)}
.cookiebar__input:checked + .cookiebar__track::after{transform:translateX(18px)}
.cookiebar__input:disabled + .cookiebar__track{background:var(--green);opacity:.5;cursor:not-allowed}
.cookiebar__input:focus-visible + .cookiebar__track{outline:2px solid var(--green);outline-offset:3px}

.cookiebar__foot{display:flex;justify-content:flex-end}

/* ─── Przycisk „Ustawienia cookies" (po decyzji) ─────────────────────── */
.cookiebar-reopen{position:fixed;left:20px;bottom:20px;z-index:899;
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--haze);color:var(--green);
  box-shadow:0 14px 30px -20px rgba(8,76,61,.55);
  transition:transform .16s ease,border-color .16s ease}
.cookiebar-reopen:hover{transform:translateY(-2px);border-color:var(--mint)}

@media (max-width:600px){
  .cookiebar__actions{flex-direction:column;align-items:stretch}
  .cookiebar__more{margin-inline-start:0;align-self:flex-start}
}

/* ═══════════════════════════════════════════════════════════════════════
   POWŁOKA STRONY — pasek źródła, nagłówek, stopka (rozszerzenia z bazy)
   ─────────────────────────────────────────────────────────────────────
   Przeniesione z inline <style> w layouts/app.blade.php (sprzątanie po
   fazie 3). Reguły, których nie było w podglądowym pm.css powyżej, bo
   podglądowe szablony nie miały ani nawigacji z bazy, ani menu mobilnego,
   ani stanu zalogowania: rozwijane menu konta, nawigacja z bazy z
   podmenu, hamburger/panel mobilny i piąta kolumna stopki.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Pasek źródła: prawa strona (konto) ─────────────────────────── */
.topbar__acc{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar__acc a{display:inline-flex;align-items:center;gap:6px}
.topbar__sep{width:1px;height:12px;background:rgba(255,255,255,.2);flex:none}
.topbar__reg{color:var(--mint);text-decoration:none;opacity:1}
.topbar__reg:hover{text-decoration:underline}
.topbar__u{display:inline-flex;align-items:center;gap:8px;padding:0;background:none;border:0;color:rgba(255,255,255,.72);font:400 12.5px var(--sans)}
.topbar__u:hover{color:#fff}
.topbar__ava{flex:none;width:20px;height:20px;border-radius:50%;background:var(--mint);color:var(--graphite);font:600 10.5px/20px var(--sans);text-align:center}
.topbar__u svg{transition:transform .2s ease}
.topbar__u.show svg{transform:rotate(180deg)}

/* ── Menu rozwijane (konto w pasku, podmenu w nawigacji) ─────────
   Klasa .dropdown-menu jest wymagana przez obsługę w pm.js; wygląd
   nadaje .dd / .nav__dd, które stoją w źródle później niż Bootstrap. */
.dropdown{position:relative}
.dd{position:absolute;right:0;top:calc(100% + 10px);z-index:40;display:none;min-width:238px;
    padding:8px;background:var(--white);color:var(--ink);border:1px solid var(--haze);
    border-radius:14px;box-shadow:0 22px 46px -28px rgba(11,58,47,.55);text-align:start}
.dd.show{display:block}
.dd__hd{display:block;padding:6px 12px 10px;font:500 13.5px/1.3 var(--sans);color:var(--ink);
        border-bottom:1px solid var(--haze);margin-bottom:6px}
.dd a,.dd button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;
        font:400 14px var(--sans);color:var(--ink-60);text-decoration:none;text-align:start;
        background:none;border:0;border-radius:9px}
.dd a:hover,.dd button:hover{background:var(--paper);color:var(--green)}
.dd a svg,.dd button svg{flex:none;color:var(--ink-40)}
.dd a:hover svg,.dd button:hover svg{color:var(--green)}
.dd__sep{height:1px;margin:6px 0;background:var(--haze)}
/* Brand nie ma czerwieni — wylogowanie znaczy wygaszoną zielenią. */
.dd__out{color:var(--deep)}
.dd form{margin:0}

/* ── Nawigacja z bazy ───────────────────────────────────────────── */
.nav{margin-inline-start:auto}
.nav__list{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav__item{position:relative;display:flex;align-items:center;gap:4px}
.nav .nav__lnk{display:inline-block;font-size:15px;color:var(--ink-60);text-decoration:none;
               padding-block:6px;border-bottom:2px solid transparent}
.nav .nav__lnk:hover{color:var(--ink);border-bottom-color:var(--mint)}
.nav .nav__lnk.is-on{color:var(--ink);border-bottom-color:var(--green)}
.nav__dt{display:inline-flex;align-items:center;justify-content:center;flex:none;
         width:22px;height:22px;padding:0;background:none;border:0;border-radius:50%;color:var(--ink-40)}
.nav__dt:hover{color:var(--green)}
.nav__dt svg{transition:transform .2s ease}
.nav__dt.show svg{transform:rotate(180deg)}
/* `.nav .nav__dd` zamiast samego `.nav__dd`: warstwa zgodności definiuje
   `.dropdown-menu{position:absolute;…}` NIŻEJ w pliku, a submenu nosi obie
   klasy. Przy równej swoistości wygrywała późniejsza — przez co panel mobilny
   renderował się jako pływająca chmurka zamiast wiersza listy. */
.nav .nav__dd{position:absolute;left:-12px;top:calc(100% + 7px);z-index:30;display:none;min-width:240px;
         padding:8px;background:var(--white);border:1px solid var(--haze);border-radius:14px;
         box-shadow:0 22px 46px -28px rgba(11,58,47,.5)}
.nav .nav__dd.show{display:block}

/* Rozwijanie najechaniem na desktopie — na cały element, czyli tytuł RAZEM
   ze strzałką, nie na samą strzałkę. Tytuł zostaje osobnym linkiem do
   podstrony, więc najechanie pokazuje dzieci, a kliknięcie prowadzi do
   rodzica; oba zachowania są potrzebne i żadne nie wyklucza drugiego.

   `:focus-within` obsługuje klawiaturę: Tab wchodzi w link rodzica i panel
   otwiera się tak samo. Nie zastępuje to przycisku ze strzałką — on musi
   zostać dla dotyku, gdzie najechania nie ma. */
@media (hover:hover) and (min-width:981px){
  .nav__item:hover > .nav .nav__dd,
  .nav__item:hover .nav__dd,
  .nav__item:focus-within .nav__dd{display:block}
  .nav__item:hover .nav__dt svg{transform:rotate(180deg)}

  /* MOSTEK NAD PRZERWĄ. Panel wisi kilka pikseli pod pozycją menu, a ten
     odstęp nie należał do obszaru najechania — mysz przechodząc go traciła
     `:hover` i panel zamykał się w połowie drogi. Tym bardziej, im wolniej
     ktoś prowadził kursor.

     Niewidoczny pasek domyka przerwę, dzięki czemu obszar najechania jest
     ciągły od pozycji aż do panelu. To rozwiązanie czysto układowe — bez
     opóźnień w JS, które trzeba by dobierać na wyczucie i które i tak
     zawodzą przy szybkim ruchu. */
  .nav__item:has(.nav__dd)::after{content:"";position:absolute;left:0;right:0;top:100%;height:9px}
}
.nav .nav__dd a{display:block;padding:9px 12px;border-radius:9px;border-bottom:0;
                font-size:14.5px;color:var(--ink-60);text-decoration:none}
.nav .nav__dd a:hover{background:var(--paper);color:var(--green)}
.nav__sub{margin:2px 0 6px 12px;padding-left:10px;border-left:1px solid var(--haze)}
.nav .nav__sub a{font-size:13.5px;color:var(--ink-40)}
.nav__mob{display:none}

/* ── Hamburger ──────────────────────────────────────────────────── */
.burger{position:relative;display:none;flex:none;width:40px;height:40px;
        background:var(--white);border:1px solid var(--haze);border-radius:12px;color:var(--ink)}
.burger i{position:absolute;left:11px;right:11px;height:1.6px;border-radius:2px;background:currentColor;
          transition:transform .22s ease,opacity .16s ease}
.burger i:nth-child(1){top:13px}
.burger i:nth-child(2){top:19px}
.burger i:nth-child(3){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Na desktopie nawigacja jest zawsze widoczna — klasa `.collapse`
   (potrzebna obsłudze zwijania) nie może jej wtedy chować.

   PODWÓJNA KLASA NIE JEST OZDOBNIKIEM. Warstwa zgodności Bootstrapa definiuje
   `.collapse:not(.show){display:none}` NIŻEJ w tym pliku. Obie reguły miały
   swoistość 0,2,0, więc wygrywała ta późniejsza — i całe menu znikało
   z desktopu, zostawiając sam znak marki i przycisk. `.nav.nav` podnosi
   swoistość do 0,3,0 bez sięgania po `!important`, które psułoby nadpisywanie
   w media query poniżej. */
.nav.nav.collapse{display:flex}

@media (max-width:980px){
  .burger{display:block;margin-inline-start:auto}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;background:var(--white);
       border-bottom:1px solid var(--haze);box-shadow:0 26px 48px -34px rgba(11,58,47,.6);
       max-height:calc(100vh - 100%);overflow-y:auto}
  .nav.nav.collapse{display:none}
  .nav.nav.collapse.show{display:block}
  .nav.collapsing{display:block;height:0;overflow:hidden;transition:height .35s ease}
  .nav__list{display:block;padding:4px var(--gut) 16px}
  .nav__item{display:block;border-top:1px solid var(--haze)}
  .nav__item:first-child{border-top:0}
  .nav .nav__lnk{display:block;padding:14px 0;font-size:16px;color:var(--ink);border-bottom:0}
  .nav .nav__lnk.is-on{color:var(--green)}
  .nav__dt{position:absolute;right:0;top:12px;width:32px;height:32px}
  .nav__item{position:relative}
  .nav .nav__dd{position:static;display:none;min-width:0;margin:0 0 10px;padding:4px 0 4px 12px;
           background:none;border:0;border-left:1px solid var(--haze);border-radius:0;box-shadow:none}
  .nav .nav__dd.show{display:block}
  .nav__mob{display:block}
}
/* Hamburger zabiera w nagłówku ~50 px, których podglądowy szablon nie
   musiał mieścić. Sygnet + wordmark + burger + CTA przestają się mieścić
   już przy ~520 px, więc wordmark schodzi wcześniej niż w podglądzie
   (tam przy 340 px) — decyzja ta sama, tylko próg przesunięty. Nazwa
   marki zostaje w stopce, a „Sprawdź termin" nie ucieka poza ekran. */
@media (max-width:720px){
  .head__in{gap:10px}
  .burger{width:38px;height:38px}
  .burger i:nth-child(1){top:12px}
  .burger i:nth-child(2){top:18px}
  .burger i:nth-child(3){top:24px}
}
@media (max-width:520px){
  .brand__txt{display:none}
}
@media (prefers-reduced-motion:reduce){
  .burger i,.nav__dt svg,.topbar__u svg{transition:none}
  .nav.collapsing{transition:none}
}

/* ── Stopka: pięć kolumn z bazy zamiast czterech z podglądu ─────── */
.foot__in{grid-template-columns:1fr 2.8fr}
.foot__cols{grid-template-columns:repeat(5,1fr);gap:22px}
.foot__social{display:flex;gap:9px;margin-top:20px}
.foot__social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
                border:1px solid rgba(255,255,255,.16);border-radius:50%;color:rgba(255,255,255,.6);
                text-decoration:none;transition:color .18s ease,background .18s ease,border-color .18s ease}
.foot__social a:hover{color:var(--graphite);background:var(--mint);border-color:var(--mint)}
.foot__note{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
            font-size:13px;color:rgba(255,255,255,.45)}
.foot__legal{margin-top:16px;padding-top:0;border-top:0;align-items:center}
.foot__legal nav{display:flex;gap:16px;flex-wrap:wrap}
.foot__legal a{color:rgba(255,255,255,.5);text-decoration:none;border-bottom:1px solid transparent}
.foot__legal a:hover{color:#fff;border-bottom-color:var(--mint)}
.foot__src{display:inline-flex;align-items:center;gap:7px}
@media (max-width:1100px){
  .foot__in{grid-template-columns:1fr 2.4fr}
  .foot__cols{grid-template-columns:repeat(3,1fr);row-gap:30px}
}
@media (max-width:980px){
  .foot__in{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:repeat(2,1fr);row-gap:28px}
}
/* ═══ KONIEC POWŁOKI STRONY ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   KOMPONENTY: collapse / dropdown (odtworzone z bootstrap.min.css)
   ─────────────────────────────────────────────────────────────────────
   pm.js (patrz „Zamienniki komponentów Bootstrap JS" w pm.js) steruje
   akordeonami i menu poza nagłówkiem wyłącznie klasami .collapse/
   .collapsing/.show i .dropdown-menu/.show — dokładnie tymi samymi, na
   których operował bootstrap.bundle.js. Nagłówek ma już własną, w pełni
   ostylowaną parę .nav.collapse/.nav.collapsing i .dd/.nav__dd wyżej w
   „POWŁOCE STRONY" (.dropdown-menu tam jest tylko kontraktem z pm.js,
   wygląd nadaje .dd/.nav__dd). Ta sekcja odtwarza to samo zachowanie pod
   GOŁYMI nazwami Bootstrapa dla wszystkiego, co takiej drugiej klasy nie
   ma — dziś to akordeon FAQ lekarza/placówki
   (resources/views/katalog/doctor/show.blade.php,
   resources/views/katalog/facility/show.blade.php), jutro cokolwiek
   innego napisanego w tej samej konwencji. Bez tego usunięcie
   bootstrap.min.css (P4-T01) zdejmuje `display:none` z zza `.collapse`
   i każdy taki panel zostaje trwale otwarty, widoczny nawet gdy
   zwinięty.

   Zachowanie 1:1 z bootstrap.min.css: `.collapse:not(.show){display:
   none}`, `.collapsing{height:0;overflow:hidden;transition:height .35s
   ease}`, `.dropdown-menu{display:none}` → `.show{display:block}`.
   Wygląd — kolory, promienie, cienie — przejęty z tokenów projektu
   (patrz .dd wyżej), nie z szarości Bootstrapa. 350 ms w .collapsing
   MUSI się zgadzać z `ANIM_MS` w pm.js. */

/* ── Collapse (akordeony poza nagłówkiem) ─────────────────────────── */
.collapse:not(.show){display:none}
.collapse.show{display:block}
.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}
@media (prefers-reduced-motion:reduce){
  .collapsing{transition:none}
}

/* ── Dropdown (kontrakt z pm.js poza nagłówkiem) ──────────────────── */
.dropdown-menu{position:absolute;z-index:1000;top:calc(100% + 6px);left:0;display:none;
  min-width:10rem;margin:0;padding:8px;list-style:none;text-align:start;
  font-size:14px;color:var(--ink);background:var(--white);background-clip:padding-box;
  border:1px solid var(--haze);border-radius:14px;box-shadow:0 22px 46px -28px rgba(11,58,47,.5)}
.dropdown-menu.show{display:block}
.dropdown-item{display:block;width:100%;padding:9px 12px;clear:both;border:0;border-radius:9px;
  background:none;font:400 14px var(--sans);color:var(--ink-60);text-align:inherit;
  text-decoration:none;white-space:nowrap}
.dropdown-item:hover,.dropdown-item:focus{background:var(--paper);color:var(--green)}
.dropdown-item.active,.dropdown-item:active{background:var(--green);color:#fff}
.dropdown-item.disabled,.dropdown-item:disabled{color:var(--ink-40);pointer-events:none;background:none}
/* ═══ KONIEC: collapse / dropdown ═════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   BOOTSTRAP COMPATIBILITY LAYER — migration aid, NOT part of the design
   system.
   ─────────────────────────────────────────────────────────────────────
   Blade views were written against Bootstrap 5's grid and utility class
   names before this redesign. Rather than touch 1833 class usages across
   every view in one risky pass, this section reimplements — under their
   ORIGINAL Bootstrap names — exactly the grid and utility classes the
   templates currently use, with CSS Grid/flexbox underneath instead of
   Bootstrap's stylesheet. The contract is the class name and the
   resulting layout, not Bootstrap's internal implementation.

   Column model, gutter behaviour, breakpoints (sm 576 / md 768 / lg 992 /
   xl 1200) and spacing scale (0=0, 1=.25rem, 2=.5rem, 3=1rem, 4=1.5rem,
   5=3rem) all match Bootstrap 5 so existing markup renders unchanged.
   The one deliberate exception is colour: text-muted/primary/danger/
   success are remapped onto the new brand palette (below).

   DO NOT add classes here that Blade doesn't already use, and DO NOT
   reach for these names in new views — new markup uses the semantic
   classes above this section. This layer exists to be deleted once every
   view has been migrated off Bootstrap class names.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Grid ──────────────────────────────────────────────────────────── */
.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
.row{--bsc-gx:1.5rem;--bsc-gy:0;display:flex;flex-wrap:wrap;margin-right:calc(var(--bsc-gx)*-.5);margin-left:calc(var(--bsc-gx)*-.5);row-gap:var(--bsc-gy)}
.g-2{--bsc-gx:.5rem;--bsc-gy:.5rem}.g-3{--bsc-gx:1rem;--bsc-gy:1rem}.g-4{--bsc-gx:1.5rem;--bsc-gy:1.5rem}.g-5{--bsc-gx:3rem;--bsc-gy:3rem}.gy-0{--bsc-gy:0}
.col-4,.col-5,.col-6,.col-7,.col-8,.col-12{position:relative;flex:0 0 auto;padding-right:calc(var(--bsc-gx,1.5rem)*.5);padding-left:calc(var(--bsc-gx,1.5rem)*.5)}
.col-4{width:33.3333%}.col-5{width:41.6667%}.col-6{width:50%}.col-7{width:58.3333%}.col-8{width:66.6667%}.col-12{width:100%}
.col-sm-4,.col-sm-6,.col-sm-10,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-8,.col-lg,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-xl-3{position:relative;width:100%;padding-right:calc(var(--bsc-gx,1.5rem)*.5);padding-left:calc(var(--bsc-gx,1.5rem)*.5)}
@media(min-width:576px){
.container{max-width:540px}
.col-sm-4{flex:0 0 auto;width:33.3333%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-10{flex:0 0 auto;width:83.3333%}
}
@media(min-width:768px){
.container{max-width:720px}
.col-md-2{flex:0 0 auto;width:16.6667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-8{flex:0 0 auto;width:66.6667%}
.d-md-block{display:block}
.text-md-end{text-align:right}.text-md-start{text-align:left}
}
@media(min-width:992px){
.container{max-width:960px}
.col-lg{flex:1 0 0%;width:auto}
.col-lg-2{flex:0 0 auto;width:16.6667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-5{flex:0 0 auto;width:41.6667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333%}.col-lg-8{flex:0 0 auto;width:66.6667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333%}
.align-items-lg-center{align-items:center}
.d-lg-none{display:none}
}
@media(min-width:1200px){
.container{max-width:1140px}
.col-xl-3{flex:0 0 auto;width:25%}
.d-xl-inline{display:inline}
}

/* ─── Utilities ─────────────────────────────────────────────────────── */
.d-block{display:block}.d-flex{display:flex}.d-inline-block{display:inline-block}.d-none{display:none}
.flex-column{flex-direction:column}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-wrap{flex-wrap:wrap}
.align-items-center{align-items:center}.align-items-end{align-items:flex-end}.align-items-start{align-items:flex-start}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}
.fw-bold{font-weight:700}.fw-medium{font-weight:500}.fw-normal{font-weight:400}.fw-semibold{font-weight:600}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:1rem}.mb-4{margin-bottom:1.5rem}.mb-5{margin-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mt-5{margin-top:3rem}
.me-2{margin-right:.5rem}.ms-1{margin-left:.25rem}.ms-2{margin-left:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}
.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-3{margin-top:1rem;margin-bottom:1rem}.my-4{margin-top:1.5rem;margin-bottom:1.5rem}
.p-2{padding:.5rem}.p-3{padding:1rem}.p-4{padding:1.5rem}.p-5{padding:3rem}
.px-0{padding-left:0;padding-right:0}.px-3{padding-left:1rem;padding-right:1rem}.px-4{padding-left:1.5rem;padding-right:1.5rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:1rem;padding-bottom:1rem}.py-4{padding-top:1.5rem;padding-bottom:1.5rem}.py-5{padding-top:3rem;padding-bottom:3rem}
.ps-0{padding-left:0}.ps-3{padding-left:1rem}.pt-4{padding-top:1.5rem}
.border{border:1px solid var(--haze)}.border-0{border:0}.border-2{border-width:2px}.border-bottom{border-bottom:1px solid var(--haze)}.border-end-0{border-right:0}.border-start-0{border-left:0}
.rounded{border-radius:.375rem}.rounded-pill{border-radius:50rem}
.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}
.h-100{height:100%}.w-100{width:100%}.overflow-hidden{overflow:hidden}
.position-absolute{position:absolute}.position-relative{position:relative}
.small{font-size:.875em}.text-center{text-align:center}.text-start{text-align:left}
.text-decoration-none{text-decoration:none}.text-decoration-underline{text-decoration:underline}
/* Colour: remapped onto the brand palette — the one intentional visual
   change in this layer. Brand excludes red, so text-danger uses --deep. */
.text-muted{color:var(--ink-60)}.text-primary{color:var(--green)}.text-danger{color:var(--deep)}.text-success{color:var(--green)}.text-white{color:var(--white)}
/* ═══ END BOOTSTRAP COMPATIBILITY LAYER ═══════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PORTED FROM design-system.css (P4-T02, deleted 2026-08-10)
   ─────────────────────────────────────────────────────────────────────
   design-system.css defined .btn-cta-primary / .btn-cta-secondary as
   unqualified base rules and a shared focus-visible outline for
   .form-control / .form-select. Two still-live, non-orphaned views used
   those class names as bare classes (no special ancestor wrapper, so the
   descendant-qualified rules elsewhere in the old file never applied to
   them): resources/views/katalog/partials/review-form.blade.php (login/
   register/submit buttons) and the .form-control focus state used across
   resources/views/knowledge/*.blade.php. Recoloured onto this file's own
   tokens (green/mint) instead of design-system.css's blue --color-brand-*
   variables, which no longer exist once that file is gone.
   ═══════════════════════════════════════════════════════════════════ */
.btn-cta-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.75rem 1.6rem;font:600 .98rem/1.2 var(--sans);letter-spacing:.01em;text-align:center;text-decoration:none;color:#fff;background:var(--green);border:1px solid var(--green);border-radius:.75rem;cursor:pointer;box-shadow:0 12px 24px rgba(13,122,95,.18);transition:background .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn-cta-primary:visited{color:#fff}
.btn-cta-primary:hover,button[type=submit].btn-cta-primary:hover{background:#0a6650;border-color:#0a6650;color:#fff;text-decoration:none}
.btn-cta-primary:focus-visible{outline:2px solid var(--mint);outline-offset:2px;box-shadow:0 0 0 .2rem rgba(13,122,95,.25)}
.btn-cta-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.5rem;font:500 .95rem/1.2 var(--sans);text-align:center;text-decoration:none;color:var(--green);background:transparent;border:1px solid var(--haze);border-radius:.75rem;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-cta-secondary:hover{background:var(--haze);color:var(--green);text-decoration:none;border-color:var(--haze)}
.btn-cta-secondary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.form-control:focus-visible,.form-select:focus-visible{outline:2px solid var(--green);outline-offset:2px;box-shadow:0 0 0 .2rem rgba(13,122,95,.25)}
/* ═══ END PORTED FROM design-system.css ═══════════════════════════════ */

/* Zastrzeżenie nad listą wyników NFZ — spokojny panel, nie alarm.
   Mówi, że dane są inne, niż sugeruje fraza, a nie że coś się zepsuło. */
.nfz-notice{margin:0 0 18px;max-width:none}
.nfz-notice p{font-size:14.5px;line-height:1.6;color:var(--ink-60)}

/* Akapit odpowiedzi nad listą wyników NFZ. Ma się czytać jak zdanie
   z artykułu, nie jak kolejny panel — to odpowiedź na pytanie użytkownika,
   a nie komunikat systemu. */
.nfz-lead{margin:0 0 20px;max-width:70ch;font-size:15.5px;line-height:1.65;color:var(--ink-60)}
.nfz-lead b{color:var(--ink)}

/* Lead pod nagłówkiem strony głównej. Wcześniej hero szedł od razu w widżet
   wyszukiwarki — najcenniejsze zdanie na stronie po prostu nie istniało. */
.masthead__lede{margin:18px 0 0;max-width:90ch;font-size:clamp(16px,1.5vw,18.5px);line-height:1.6;color:var(--ink-60)}
.masthead__lede + .hero__grid{margin-top:clamp(28px,3.4vw,44px)}

/* Nadkreślenie newslettera — ta sama rola co `.eyebrow` w hero: mówi, czym
   jest blok, zanim nagłówek powie, co z niego wynika. */
.news__kicker{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin:0 0 10px}
.news__p{max-width:56ch}

/* Sekcja „Zanim tu poszukasz" niesie teraz trzy akapity zamiast dwóch zdań,
   więc potrzebuje rytmu, a wyróżnienia — wagi, nie koloru. */
.trust p + p{margin-top:14px}
.trust b{color:var(--ink);font-weight:600}

/* Stopka niesie teraz trzy akapity zamiast jednego zdania — potrzebny rytm
   i wyraźnie słabszy ton dla zastrzeżenia, żeby nie konkurowało z opisem. */
.foot__brand p + p{margin-top:12px}
.foot__note{font-size:13px;opacity:.72}

/* ═══════════════════════════════════════════════════════════════════════
   KOLORY DZIAŁÓW
   Tokeny z panelu (`article_categories.color`) mapowane na odcienie systemu
   projektowego. Kolor jest sygnałem nawigacyjnym — mówi, w którym dziale
   jesteś — więc siedzi na linii pod tytułem i na ikonie, a nie na tekście:
   dwanaście kolorowych napisów na jednej stronie to jarmark, dwanaście
   kolorowych kresek to system.

   Czerwieni tu nie ma świadomie. Na portalu zdrowotnym znaczy stan nagły
   (112, SOR) i nie może opisywać działu z artykułami. */
.cat-blue   { --cat: #2B6CB0 }  /* instytucje, NFZ */
.cat-teal   { --cat: #21808D }  /* badania, diagnostyka */
.cat-green  { --cat: #0D7A5F }  /* styl życia — kolor marki */
.cat-mint   { --cat: #2A9D8F }  /* farmacja */
.cat-lime   { --cat: #5C8A2B }  /* sport, ruch */
.cat-amber  { --cat: #B07A1E }  /* poradniki */
.cat-orange { --cat: #C2661F }  /* dzieci */
.cat-rose   { --cat: #A4485C }  /* choroby, objawy */
.cat-pink   { --cat: #B85C86 }  /* ciąża */
.cat-purple { --cat: #6B54A3 }  /* zdrowie psychiczne */
.cat-gold   { --cat: #9A7B1F }  /* uroda */
.cat-gray   { --cat: #6B7280 }  /* pozostałe */

/* ═══════════════════════════════════════════════════════════════════════
   PASEK DZIAŁÓW CZYTELNI
   Osiem kafli na slajd; kafel pionowy — ikona nad nazwą, wszystko
   wyśrodkowane. Karuzela korzysta z mechanizmu `.js-carousel`.

   Pasek i siatka działów pod nim dzielą JEDNO tło: to jedna myśl —
   „oto czytelnia" — więc krecha między nimi rozbijała ją na dwie. */
.cstrip{background:var(--paper);padding-block:clamp(30px,3.6vw,44px) 0}
.cstrip__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.cstrip__h{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2vw,24px);letter-spacing:-.015em;margin:0}
.cstrip__nav{display:flex;gap:8px;flex:none}
.cstrip__view{overflow:hidden}
.cstrip__slide{flex:0 0 100%;min-width:0}
.cstrip__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.cstrip__grid > li{margin:0}

.cstrip__box{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;
  height:100%;padding:18px 10px;text-align:center;text-decoration:none;
  background:var(--white);border:1px solid var(--haze);border-radius:16px;
  transition:border-color .18s ease,transform .18s ease}
.cstrip__box:hover{border-color:var(--cat,var(--mint));transform:translateY(-2px)}
/* Ikona bez tła i bez kafelka — sam rysunek, w kolorze działu. */
.cstrip__i{display:block;width:32px;height:32px;color:var(--cat,var(--green));stroke-width:1.5}
.cstrip__n{font:500 15px/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.cstrip__c{font-size:12.5px;color:var(--ink-40)}
.cstrip__dots{margin-top:18px;justify-content:center}

@media (max-width:1200px){ .cstrip__grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:900px){ .cstrip__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .cstrip__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Lead nad siatką działów — trzy siatki pod sobą potrzebują zdania, które
   mówi, czym dana grupa się różni od pozostałych. */
.dzialy__lede{margin:-4px 0 24px;max-width:76ch;color:var(--ink-60);font-size:15.5px;line-height:1.65}

/* Siatka tuż po pasku dzieli z nim tło i traci górny odstęp — razem tworzą
   jeden blok „czytelnia", a nie dwie sąsiadujące sekcje. */
.cstrip + .dzialy{background:var(--paper);padding-top:clamp(26px,3vw,38px)}

/* Tony siatek działów — nadawane z widoku, żeby rytm naprzemienny liczył się
   na poziomie strony, a nie komponentu. Druga siatka stoi między ciemnym
   katalogiem a miastami (paper), trzecia między kalkulatorami (white)
   a FAQ (paper). */
.dzialy{padding-block:clamp(34px,4vw,54px)}
.dzialy--white{background:var(--white)}
.dzialy--haze{background:var(--haze)}

/* Linia między tytułem działu a artykułami — w kolorze działu z panelu.
   Wcześniej kolor zależał od pozycji w rzędzie (`--life`/`--ill`/`--guide`),
   więc ta sama kategoria miała inny kolor w różnych sekcjach: sygnał, który
   miał pomagać w orientacji, mylił. Swoistość 0,2,0 bije stare warianty
   `.dept__h--*` (0,1,0), więc nie trzeba ich usuwać — przestają obowiązywać
   tam, gdzie jest token koloru. */
.dept__h.cat-blue,.dept__h.cat-teal,.dept__h.cat-green,.dept__h.cat-mint,
.dept__h.cat-lime,.dept__h.cat-amber,.dept__h.cat-orange,.dept__h.cat-rose,
.dept__h.cat-pink,.dept__h.cat-purple,.dept__h.cat-gold,.dept__h.cat-gray{
  border-bottom-color:var(--cat)}


/* Logo w nagłówku — wysokość steruje skalą, szerokość liczy się z proporcji
   zapisanych w atrybutach `width`/`height`, dzięki czemu przeglądarka rezerwuje
   miejsce przed wczytaniem obrazu i układ nie przeskakuje.

   Wersja krótka (829×195, proporcja 4,25), nie długa: przy 34 px wysokości
   długi wariant zajmował 224 px szerokości i spychał nawigację. */
.brand__logo{display:block;height:36px;width:auto}
@media (max-width:520px){ .brand__logo{height:30px} }

/* ═══════════════════════════════════════════════════════════════════════
   TREŚĆ POD KALKULATOREM
   Dwie kolumny na desktopie: wyjaśnienie i pytania obok siebie. Sekcja stoi
   pod narzędziem, bo najpierw jest to, po co ktoś przyszedł. */
.calcinfo{background:var(--paper);padding-block:clamp(34px,4vw,56px);border-top:1px solid var(--haze)}
.calcinfo__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.calcinfo__h{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.1vw,26px);letter-spacing:-.015em;margin:0 0 14px}
.calcinfo__h3{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.7vw,20px);margin:26px 0 10px}
.calcinfo__body p{margin:0 0 12px}
.calcinfo__faq{background:var(--white);border:1px solid var(--haze);border-radius:18px;padding:clamp(18px,2vw,26px)}
.calcinfo__faq .faq__list{margin-top:4px}
@media (max-width:900px){ .calcinfo__in{grid-template-columns:minmax(0,1fr)} }

/* Tekst pod listą kalkulatorów — pod, nie nad: najpierw narzędzia. */
.calchub__txt{max-width:76ch;margin:clamp(30px,3.4vw,44px) 0 clamp(24px,3vw,36px)}
.calchub__txt h2{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2vw,24px);letter-spacing:-.015em;margin:28px 0 10px}
.calchub__txt h2:first-child{margin-top:0}

/* Filtry w wyszukiwarce na stronie głównej — te same kontrolki `.tick`, co na
   stronie wyników, tylko na ciemnym tle bloku wyszukiwarki. */
.finder__opt{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 18px}
.finder__opt .tick{color:rgba(255,255,255,.86);font-size:13.5px;white-space:normal}
.finder__opt .tick input{accent-color:#fff}
.finder__opt .tick:hover{color:#fff}