/* article.css v20260928b: jeden system artykulow obronakierowcow.pl */
/* Ladowany po Google Fonts, przed inline <style> strony. Tresc klientki nie jest tu dotykana: tylko uklad i typografia. */
:root{
  --ok-navy:#182744; --ok-navy-2:#0e1a30; --ok-red:#d61f26; --ok-cream:#f6f1e7; --ok-paper:#fbf8f1;
  --ok-ink:#1f2937; --ok-ink-2:#4b5563; --ok-line:rgba(24,39,68,0.14); --ok-line-2:rgba(24,39,68,0.08);
  --ok-sticky-top:7.1rem; --ok-serif:'Instrument Serif',Georgia,serif; --ok-sans:"Inter",system-ui,sans-serif;
  /* tekst artykulu: 17 px na desktopie, nigdy mniej niz 16 px (miedzy 1025 a 1440 px root strony skaluje sie z vw) */
  --ok-fs:max(1.0625rem,15px); --ok-lh:1.55;
  /* miara: 60 do 72 znakow w wierszu przy 16 do 17 px */
  --ok-measure:max(38rem,572px);
  /* rytm pionowy (em = stopien tekstu) */
  --ok-gap-p:0.8em; --ok-gap-li:0.25em; --ok-gap-after-list:1.05em;
  /* naglowki z progiem w px: miedzy 1025 a 1399 px root strony to 1,111 vw (12 do 15 px), bez progu h3 spadal ponizej pogrubionego tekstu */
  /* 2026-10-04 (uwagi p. Barbary 03.10): po naglowku jeden wyrazny odstep przed tekstem (h2 0.65 rem -> 0.9 em, h3 0.35 rem -> 0.7 em; em = stopien naglowka) */
  --ok-h2-fs:max(1.875rem,24px); --ok-h2-mt:2.25rem; --ok-h2-pt:1.25rem; --ok-h2-mb:0.9em;
  --ok-h3-fs:max(1.5rem,20px); --ok-h3-mt:1.6rem; --ok-h3-mb:1.15em;
}

/* siatka: spis (toc), artykul (art), karta boczna (side) */
.ok-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"toc" "art" "side";row-gap:2rem;align-items:start;justify-content:start}
.ok-grid > *{min-width:0}
.ok-toc{grid-area:toc}.ok-art{grid-area:art}.ok-side{grid-area:side}
@media (max-width:1023px){
  /* jedna kolumna: spis i karta w tej samej mierze co tekst (na tablecie nie szersze niz artykul) */
  .ok-toc,.ok-side{max-width:var(--ok-measure)}
  /* karta boczna z wstepem klientki przed artykulem (SDE: "Potrzebujesz pomocy..." poprzedza tekst w jej docx) */
  .ok-grid.ok-side-first{grid-template-areas:"side" "toc" "art"}
}
/* desktop (prosba klientki 30.09): kolumna tekstu na srodku miedzy lewa strona a karta boczna;
   kolumny 1fr po obu stronach tekstu to rowne odstepy, karta boczna przy prawej krawedzi sekcji */
@media (min-width:1024px){
  /* 1024 do 1179: spis (zwiniety) nad tekstem, tekst na srodku miedzy lewym marginesem sekcji a karta;
     przy braku miejsca odstepy maleja do 0 i 2,25 rem (dotychczasowy uklad) */
  .ok-grid{grid-template-columns:minmax(0,1fr) minmax(0,var(--ok-measure)) minmax(2.25rem,1fr) 17rem;grid-template-areas:". toc . side" ". art . side";column-gap:0;row-gap:1.5rem;justify-content:stretch}
  .ok-side{position:sticky;top:var(--ok-sticky-top)}
}
/* od 1180 px (ten sam prog co article.js): szyna spisu przy lewej krawedzi sekcji, tekst na srodku
   miedzy szyna a karta boczna (rowna pusta przestrzen po obu stronach tekstu) */
@media (min-width:1180px){
  .ok-grid{grid-template-columns:14rem minmax(1.5rem,1fr) minmax(0,var(--ok-measure)) minmax(1.5rem,1fr) 17rem;grid-template-areas:"toc . art . side";column-gap:0}
  .ok-toc{position:sticky;top:var(--ok-sticky-top);max-height:calc(100vh - 8rem);overflow:auto;scrollbar-width:thin;justify-self:start;width:100%;max-width:14rem;margin:0;padding-right:0.5rem;box-sizing:border-box}
  /* strona bez spisu (mniej niz 3 naglowki): tekst na srodku miedzy lewym marginesem sekcji a karta */
  .ok-grid.ok-no-toc{grid-template-columns:minmax(1.5rem,1fr) minmax(0,var(--ok-measure)) minmax(1.5rem,1fr) 17rem;grid-template-areas:". art . side"}
}
@media (min-width:1400px){
  .ok-grid{grid-template-columns:14rem minmax(1.5rem,1fr) minmax(0,var(--ok-measure)) minmax(1.5rem,1fr) 19rem}
  .ok-grid.ok-no-toc{grid-template-columns:minmax(1.5rem,1fr) minmax(0,var(--ok-measure)) minmax(1.5rem,1fr) 19rem}
}

/* tekst: jeden kroj, stopien i interlinia dla akapitu, punktu listy i ramki (prosba klientki 27.09) */
.ok-art{max-width:var(--ok-measure);color:var(--ok-ink);font-family:var(--ok-sans);font-size:var(--ok-fs);line-height:var(--ok-lh)}
.ok-art > *{margin:0}
.ok-art p,.ok-art ul,.ok-art ol,.ok-art .ok-note,.ok-art .ok-tbl{margin:0 0 var(--ok-gap-p)}
.ok-art p,.ok-art li{font:inherit;color:inherit}
.ok-art .ok-title{margin:0 0 1.25rem;padding-top:0;border-top:0;font-family:var(--ok-serif);font-weight:400;font-size:max(2.5rem,36px);line-height:1.1;letter-spacing:-0.012em;color:var(--ok-navy);text-wrap:balance}
.ok-art .lead{margin:0 0 1.5rem;font-size:max(1.25rem,18px);line-height:1.55;color:var(--ok-navy)}
/* h2 = rozdzial: cienka linia nad naglowkiem, bez numerow od nas */
.ok-art h2{margin:var(--ok-h2-mt) 0 var(--ok-h2-mb);padding:var(--ok-h2-pt) 0 0;border:0;border-top:1px solid var(--ok-line);font-family:var(--ok-serif);font-weight:400;font-size:var(--ok-h2-fs);line-height:1.15;letter-spacing:-0.01em;color:var(--ok-navy);scroll-margin-top:var(--ok-sticky-top);text-wrap:balance}
.ok-art > h2:first-child,.ok-art .ok-title + h2,.ok-art .lead + h2{margin-top:0;padding-top:0;border-top:0}
/* h3 = podrozdzial: ten sam serif, mniejszy, bez belki */
.ok-art h3{margin:var(--ok-h3-mt) 0 var(--ok-h3-mb);padding:0;border:0;background:none;font-family:var(--ok-serif);font-weight:400;font-size:var(--ok-h3-fs);line-height:1.2;letter-spacing:0;color:var(--ok-navy);scroll-margin-top:var(--ok-sticky-top);text-wrap:balance}
.ok-art h3::before,.ok-art h3::after{content:none}
.ok-art h2 + h3{margin-top:1rem}
.ok-art > h3:first-child{margin-top:0}
/* artykul bez h2 (wpisy bloga): h3 jest poziomem rozdzialu, wiec wyglada jak h2 (klase dodaje article.js) */
.ok-art.ok-h3-main h3{margin:var(--ok-h2-mt) 0 var(--ok-h2-mb);padding-top:var(--ok-h2-pt);border-top:1px solid var(--ok-line);font-size:var(--ok-h2-fs);line-height:1.15;letter-spacing:-0.01em}
.ok-art.ok-h3-main > h3:first-child{margin-top:0;padding-top:0;border-top:0}
html[data-h3-bar] .ok-art h3{padding-left:0.85rem;border-left:3px solid var(--ok-navy)}
.ok-art strong,.ok-art b{font-weight:600;color:var(--ok-navy)}
.ok-art .nw{white-space:nowrap}
.ok-art a{color:var(--ok-navy);text-decoration:underline;text-decoration-color:rgba(24,39,68,0.4);text-underline-offset:0.18em;text-decoration-thickness:1px}
.ok-art a:hover{color:var(--ok-red);text-decoration-color:currentColor}

/* listy: jeden znacznik (granatowa kropka) i jeden styl numeracji (granatowy serif w wiszacym marginesie) */
.ok-art ul.ok-pts,.ok-art ol.ok-num,.ok-art .ok-note ul{list-style:none;padding:0}
.ok-art ul.ok-pts li,.ok-art ol.ok-num li,.ok-art .ok-note ul li{position:relative;margin:var(--ok-gap-li) 0 0}
.ok-art li:first-child{margin-top:0}
.ok-art ul.ok-pts li,.ok-art .ok-note ul li{padding-left:1.35rem}
.ok-art ul.ok-pts li::before,.ok-art .ok-note ul li::before{content:"";position:absolute;left:0.15rem;top:calc(var(--ok-lh) * 0.5em - 0.2rem);width:0.4rem;height:0.4rem;border:0;border-radius:50%;background:var(--ok-navy);opacity:0.55;transform:none}
.ok-art ol.ok-num{counter-reset:okn}
.ok-art ol.ok-num li{counter-increment:okn;padding-left:2.1rem}
.ok-art ol.ok-num li::before{content:counter(okn) ".";position:absolute;left:0;top:0;width:auto;height:auto;border:0;border-radius:0;background:none;font-family:var(--ok-serif);font-size:1.2em;line-height:calc(var(--ok-lh) / 1.2);color:var(--ok-navy)}
.ok-art ul + p,.ok-art ol + p,.ok-art ul + .ok-note,.ok-art ol + .ok-note{margin-top:var(--ok-gap-after-list)}
.ok-art li > ul,.ok-art li > ol{margin:var(--ok-gap-li) 0 0}

/* ramki: jeden styl (krem, cienka linia, bez czerwieni); tekst w ramce jak tekst artykulu */
.ok-art .ok-note{padding:1rem 1.25rem;border-radius:0.75rem;background:var(--ok-cream);border:1px solid var(--ok-line-2);font-size:inherit;line-height:inherit;box-shadow:none}
.ok-art .ok-note p{margin:0 0 0.6em;font-size:inherit;line-height:inherit}
.ok-art .ok-note > :last-child{margin-bottom:0}
.ok-art .ok-note .tip-h{display:flex;align-items:center;gap:0.5rem;margin:0 0 0.5rem;font-size:max(0.78rem,11.5px);font-weight:600;line-height:1.3;letter-spacing:0.1em;text-transform:uppercase;color:var(--ok-navy)}
.ok-art .ok-note .tip-h span{font-size:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
/* ikona etykiety: inline style svg (1,25 rem) wygrywalby z klasa */
.ok-art .ok-note .tip-h svg{width:1rem !important;height:1rem !important;flex-shrink:0;color:var(--ok-navy)}

/* tabele */
.ok-art .ok-tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0.75rem;border:1px solid var(--ok-line);background:#fff}
/* bez hyphens:auto: na iOS/Chrome dzielilby wyrazy z lacznikiem, a zrzuty (headless bez slownika PL) tego nie pokazuja;
   tabela na telefonie miesci sie dzieki overflow-wrap:anywhere w komorkach danych (blok @media nizej) */
.ok-art table{width:100%;border-collapse:collapse;font-size:0.9375em;line-height:1.5;min-width:34rem}
.ok-art caption{caption-side:top;text-align:left;padding:0.85rem 1rem 0.35rem;font-size:max(0.78rem,11.5px);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--ok-navy)}
.ok-art thead th{background:var(--ok-navy);color:#fff;text-align:left;padding:0.7rem 1rem;font-weight:600;font-size:0.92em}
.ok-art tbody th{text-align:left;padding:0.7rem 1rem;font-weight:600;color:var(--ok-navy);background:var(--ok-cream);width:11rem;vertical-align:top}
.ok-art tbody td{padding:0.7rem 1rem;vertical-align:top;border-top:1px solid var(--ok-line-2)}
.ok-art tbody tr:nth-child(even) td{background:var(--ok-paper)}
/* tabela szersza niz ekran: wygaszenie prawej krawedzi = sygnal "przesun" (klase ustawia article.js, znika na koncu) */
.ok-art .ok-tbl.ok-tbl-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),rgba(0,0,0,0.15));mask-image:linear-gradient(to right,#000 calc(100% - 3rem),rgba(0,0,0,0.15))}
.ok-art .cta{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;margin:1.75rem 0 0}
.ok-art .cta:not(:last-child){margin-bottom:1.75rem}
.ok-art .cta p{flex:1 1 100%;margin:0}
.ok-art .cta a{text-decoration:none}

/* spis tresci (markup buduje article.js) */
.ok-toc{font-family:var(--ok-sans)}
.ok-toc[hidden]{display:none}
.ok-toc-d{border:1px solid var(--ok-line);border-radius:0.75rem;background:#fff}
.ok-toc-d > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0.9rem 1.1rem;font-size:max(0.95rem,14px);font-weight:600;color:var(--ok-navy)}
.ok-toc-d > summary::-webkit-details-marker{display:none}
.ok-toc-d > summary::marker{content:""}
.ok-toc-d > summary::after{content:"";flex-shrink:0;width:0.55rem;height:0.55rem;border-right:2px solid var(--ok-navy);border-bottom:2px solid var(--ok-navy);transform:rotate(45deg);transition:transform 160ms;margin-right:0.2rem}
.ok-toc-d[open] > summary::after{transform:rotate(225deg)}
.ok-toc ol{list-style:none;margin:0;padding:0 1.1rem 0.9rem}
.ok-toc ol ol{padding:0 0 0 1rem}
.ok-toc li{margin:0}
.ok-toc a{display:block;padding:0.55rem 0;border-top:1px solid var(--ok-line-2);font-size:max(0.95rem,14px);line-height:1.35;color:var(--ok-ink-2);text-decoration:none}
.ok-toc li:first-child > a{border-top:0}
.ok-toc ol ol a{font-size:max(0.9rem,13.5px)}
.ok-toc a:hover{color:var(--ok-navy)}
.ok-toc a.is-active{color:var(--ok-navy);font-weight:500}
.ok-toc a:focus-visible{outline-offset:-2px}
@media (min-width:1180px){
  .ok-toc-d{border:0;border-radius:0;background:transparent}
  .ok-toc-d > summary{cursor:default;pointer-events:none;padding:0 0 0.75rem;font-size:max(0.72rem,11px);letter-spacing:0.14em;text-transform:uppercase}
  .ok-toc-d > summary::after{display:none}
  .ok-toc ol{padding:0}
  /* jedna os: pozycje h3 na tej samej linii co h2, tylko wciecie tekstu */
  .ok-toc ol ol{padding:0}
  .ok-toc a{padding:0.35rem 0 0.35rem 0.85rem;border-top:0;border-left:2px solid var(--ok-line-2);font-size:max(0.875rem,13px);line-height:1.35}
  .ok-toc ol ol a{padding:0.25rem 0 0.25rem 1.6rem;font-size:max(0.8125rem,12.5px)}
  .ok-toc a.is-active{border-left-color:var(--ok-red)}
  /* dlugi spis: wygaszenie krawedzi, za ktora sa kolejne pozycje (klasy ustawia article.js) */
  .ok-toc.ok-toc-up,.ok-toc.ok-toc-down{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ok-fade-t,0px),#000 calc(100% - var(--ok-fade-b,0px)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ok-fade-t,0px),#000 calc(100% - var(--ok-fade-b,0px)),transparent 100%)}
  .ok-toc.ok-toc-up{--ok-fade-t:2rem}
  .ok-toc.ok-toc-down{--ok-fade-b:2.5rem}
}

/* karta boczna */
.ok-side{display:flex;flex-direction:column;gap:1rem}
.ok-side figure{margin:0;border-radius:1.25rem;overflow:hidden;border:1px solid rgba(24,39,68,0.12);aspect-ratio:1/1;background:var(--ok-navy)} /* blokada-alkoholowa: zdjecie nad karta */
.ok-side figure img{width:100%;height:100%;object-fit:cover;display:block}
.ok-side .card{border-radius:1.25rem;background:var(--ok-navy);color:#fff;padding:1.5rem;display:flex;flex-direction:column;align-items:stretch;gap:0.9rem}
.ok-side .card h3{margin:0;font-family:var(--ok-serif);font-weight:400;font-size:max(1.5rem,21px);line-height:1.15}
.ok-side .card p{margin:0;font-size:max(0.95rem,13px);line-height:1.55;color:rgba(255,255,255,0.82)}
.ok-side .card > div{display:flex;flex-direction:column;gap:0.6rem}
.ok-side .card a[href^="tel:"],.ok-side .card a[href$="/kontakt"]{width:100%;justify-content:center;text-align:center;white-space:nowrap}
.ok-side .mail{display:inline-flex;align-items:center;gap:0.5rem;color:#fff;font-size:max(0.95rem,13px);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media (min-width:1024px){
  /* waska kolumna (17 do 19 rem): przyciski zawsze w jednej linii */
  .ok-side .card a[href^="tel:"],.ok-side .card a[href$="/kontakt"]{padding:0.85rem 0.75rem !important;letter-spacing:0.01em !important;gap:0.5rem !important}
}
@media (min-width:1024px) and (max-width:1399px){
  .ok-side .card{padding:1.25rem}
  .ok-side .card a[href^="tel:"],.ok-side .card a[href$="/kontakt"]{font-size:max(0.95rem,14px) !important}
}
@media (max-width:1023px){.ok-side{position:static;margin-top:0.5rem}.ok-grid.ok-side-first .ok-side{margin-top:0}}

/* FAQ: pytania i odpowiedzi widoczne od razu (details open w HTML), linie zamiast bialych pigulek */
.ok-faq .ok-faq-h{margin:0;font-family:var(--ok-serif);font-weight:400;font-size:max(2.25rem,30px);line-height:1.1;color:var(--ok-navy);scroll-margin-top:var(--ok-sticky-top);text-wrap:balance}
.ok-faq .ok-faq-list{display:block;margin-top:1.75rem;max-width:46rem}
.ok-faq details{margin:0;padding:0;border:0;border-top:1px solid var(--ok-line);border-radius:0;background:transparent;box-shadow:none}
.ok-faq details:last-child{border-bottom:1px solid var(--ok-line)}
.ok-faq summary{list-style:none;cursor:pointer;position:relative;padding:1.1rem 2.5rem 1.1rem 0;font-size:max(1.05rem,15px);font-weight:500;line-height:1.4;color:var(--ok-navy)}
.ok-faq summary::-webkit-details-marker{display:none}
.ok-faq summary::marker{content:""}
.ok-faq summary::after{content:"";position:absolute;right:0.6rem;top:1.35rem;width:0.55rem;height:0.55rem;border-right:2px solid var(--ok-navy);border-bottom:2px solid var(--ok-navy);transform:rotate(45deg);transition:transform 160ms}
.ok-faq summary:focus-visible{outline-offset:2px}
/* 2026-10-04 (uwagi p. Barbary 03.10): jeden odstep miedzy otwartym pytaniem a odpowiedzia (bylo 0.5 rem) */
.ok-faq details[open] > summary{padding-bottom:0.8em}
.ok-faq details[open] > summary::after{transform:rotate(225deg)}
.ok-faq details p{margin:0 0 1.1rem;max-width:40rem;font-size:max(1rem,15px);line-height:1.6;color:var(--ok-ink)}
.ok-faq details p strong{font-weight:600;color:var(--ok-navy)}
.ok-faq details p a{color:var(--ok-navy);text-decoration:underline;text-underline-offset:0.18em}
/* desktop: te same osie co siatka artykulu (tytul w lewej szynie, pytania w kolumnie tekstu), bez pustej prawej polowy */
/* 1025 do 1179: tytul nad lista, oba w kolumnie tekstu (1024 bez zmian: tam tekst i tak zaczyna sie przy lewej krawedzi) */
@media (min-width:1025px){
  .ok-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--ok-measure)) minmax(2.25rem,1fr) 17rem;column-gap:0;align-items:start;justify-content:stretch;padding-left:3.5rem !important;padding-right:3.5rem !important}
  .ok-faq > *{grid-column:2;min-width:0}
  .ok-faq .ok-faq-list{max-width:none}
}
@media (min-width:1180px){
  .ok-faq{grid-template-columns:14rem minmax(1.5rem,1fr) minmax(0,var(--ok-measure)) minmax(1.5rem,1fr) 17rem}
  .ok-faq > *{grid-column:3}
  /* tytul w lewej szynie, na tej samej osi co spis tresci */
  .ok-faq > .ok-faq-h{grid-column:1;grid-row:1 / span 3;position:sticky;top:var(--ok-sticky-top);font-size:max(1.75rem,24px);justify-self:start;width:100%;max-width:14rem;margin:0;box-sizing:border-box}
  .ok-faq .ok-faq-list{margin-top:0}
}
@media (min-width:1400px){
  .ok-faq{grid-template-columns:14rem minmax(1.5rem,1fr) minmax(0,var(--ok-measure)) minmax(1.5rem,1fr) 19rem}
  .ok-faq > .ok-faq-h{font-size:2rem}
}

/* hero */
main section[data-screen-label^="Hero"] h1[style],main section[data-screen-label^="Hero"] .ok-hero-h[style]{font-size:clamp(1.9rem,1rem + 2.2vw,3.6rem) !important;line-height:1.02 !important}
/* wpisy bloga ("Blog hero"): na desktopie ten sam stopien h1 co strony uslug (telefon i tablet bez zmian);
   indeks bloga (/blog, siatka kart) zostaje z naglowkiem zaakceptowanym 27.09 */
@media (min-width:1024px){body:not(:has(.ok-blog-grid)) main section[data-screen-label$="hero"] h1[style],body:not(:has(.ok-blog-grid)) main section[data-screen-label$="hero"] .ok-hero-h[style]{font-size:clamp(1.9rem,1rem + 2.2vw,3.6rem) !important;line-height:1.02 !important}}
/* kicker: jedna os dla kropki na wszystkich stronach (czesc stron ma inline align-items:center), rowne wiersze przy zawinieciu */
.ok-kicker{white-space:normal;line-height:1.4;font-size:max(0.95rem,13px);letter-spacing:0.1em;align-items:flex-start !important;text-wrap:balance}
.ok-kicker > span:first-child:empty{flex-shrink:0 !important;margin-top:calc(0.7em - 0.275rem) !important}
/* fokus klawiatury na granatowym tle: kremowa obwodka zamiast czerwonej (czerwien na granacie ma kontrast 2,9:1) */
main section[data-screen-label^="Hero"] :focus-visible,main section[data-screen-label$="hero"] :focus-visible,.ok-side .card :focus-visible{outline-color:#f6f1e7}

/* blog */
.ok-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:1.5rem}
@media (min-width:1400px){.ok-blog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ok-card{display:flex;flex-direction:column;border-radius:1.25rem;background:#fff;border:1px solid var(--ok-line-2);overflow:hidden;color:var(--ok-navy);text-decoration:none;box-shadow:0 0.75rem 2rem rgba(24,39,68,0.06);transition:transform 220ms cubic-bezier(0.22,1,0.36,1),box-shadow 220ms}
.ok-card:hover{transform:translateY(-4px);box-shadow:0 1.25rem 2.5rem rgba(24,39,68,0.12);color:var(--ok-navy)}
/* fokus klawiatury: regula strony a:focus-visible (radius 0,5 rem) nie moze sciac rogow karty */
.ok-card:focus-visible{border-radius:1.25rem;outline-offset:3px}
.ok-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ok-navy)}
.ok-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.ok-card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:0.6rem;padding:1.25rem 1.35rem 1.4rem}
.ok-card-t{font-family:var(--ok-serif);font-weight:400;font-size:max(1.45rem,20px);line-height:1.15;text-wrap:balance}
.ok-card-x{font-size:max(0.95rem,14px);line-height:1.55;color:var(--ok-ink-2)}
.ok-card-more{margin-top:auto;padding-top:0.5rem;font-size:max(0.8rem,11.5px);font-weight:500;letter-spacing:0.1em;text-transform:uppercase}
@media (max-width:1100px){.ok-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ok-blog-grid{grid-template-columns:1fr;grid-auto-rows:auto}}

/* tabela kar (wypadki-i-kolizje): jedna kolumna ponizej 900 px */
@media (max-width:900px){.ok-kary{grid-template-columns:1fr !important}}

/* telefon (root 15 px z bloku "Mobile 2026-09-13") */
@media (max-width:760px){
  :root{
    --ok-fs:1.125rem; --ok-lh:1.5;
    --ok-gap-p:0.75em; --ok-gap-li:0.2em; --ok-gap-after-list:0.95em;
    /* 2026-10-04 (uwagi p. Barbary 03.10): odstep po naglowku jak na desktopie (h2 0.55 rem -> 0.9 em, h3 0.3 rem -> 0.7 em) */
    --ok-h2-fs:1.7rem; --ok-h2-mt:1.9rem; --ok-h2-pt:1.1rem; --ok-h2-mb:0.9em;
    --ok-h3-fs:1.4rem; --ok-h3-mt:1.35rem; --ok-h3-mb:1.15em;
  }
  /* !important: scroll-fx (GSAP) zostawia na naglowkach atrybut style, a blok strony ma main h2[style]{font-size:1.9rem !important} */
  .ok-art .ok-title{font-size:2rem !important;line-height:1.1 !important;margin-bottom:1rem}
  .ok-art .lead{font-size:1.15rem}
  .ok-art h2:not(.ok-title){font-size:var(--ok-h2-fs) !important;line-height:1.15 !important}
  .ok-art.ok-h3-main h3{font-size:var(--ok-h2-fs) !important;line-height:1.15 !important}
  .ok-art ul.ok-pts li,.ok-art .ok-note ul li{padding-left:1.2rem}
  .ok-art ul.ok-pts li::before,.ok-art .ok-note ul li::before{left:0.05rem}
  .ok-art ol.ok-num li{padding-left:1.9rem}
  .ok-art .ok-note{padding:0.9rem 1rem}
  .ok-art table{min-width:0;font-size:0.8125em;line-height:1.45}
  .ok-art thead th,.ok-art tbody th,.ok-art tbody td{padding:0.6rem 0.45rem}
  .ok-art thead th:first-child,.ok-art tbody th{padding-left:0.6rem}
  /* 3 kolumny w 340 px (jazda-po-alkoholu): pierwsza kolumna tak szeroka jak jej najdluzszy wyraz (etykiety wierszy bez lamania),
     w kolumnach danych bardzo dlugi wyraz moze sie zlamac, zamiast wystawac poza ekran */
  .ok-art tbody th{width:auto}
  .ok-art td,.ok-art thead th + th{overflow-wrap:anywhere}
  /* dwie kolumny danych rownej szerokosci (bez tego kolumna z najdluzszymi wyrazami byla najwezsza) */
  .ok-art table:has(thead th:nth-child(3)) td{width:38%}
  .ok-faq .ok-faq-h{font-size:1.8rem !important;line-height:1.1 !important}
  /* 2026-10-04 (uwagi p. Barbary 03.10): pytania FAQ na telefonie wieksze (bylo 1 rem = 14 px), strzalka dalej na wysokosci pierwszego wiersza */
  .ok-faq summary{font-size:max(1.2rem,17px)}
  .ok-faq summary::after{top:calc(1.1rem + 0.7em - 0.45rem)}
  .ok-kicker{font-size:0.78rem;letter-spacing:0.06em}
  /* zdjecie hero na pierwszym ekranie telefonu, nad naglowkiem (figure jest bezposrednim dzieckiem sekcji-gridu);
     16/10 zamiast 4/3: na iPhonie 13 ostatnia linia h1 SDE konczy sie nad przyciskiem SOS (przy 4/3 SOS ja zaslanial) */
  /* 2026-10-04 (uwagi p. Barbary 03.10): naglowek hero na telefonie mniejszy tylko o jeden stopien (bylo clamp z minimum 1.9 rem = ok. 27 px),
     lead hero co najmniej 17 px (blok strony daje 1.1 rem !important, stad wyzsza szczegolowosc; podpis autora we wpisach bloga bez zmian) */
  main section[data-screen-label^="Hero"] h1[style],main section[data-screen-label^="Hero"] .ok-hero-h[style]{font-size:clamp(2.25rem,1.2rem + 3vw,2.6rem) !important}
  html body main section[data-screen-label^="Hero"] p[style],html body:has(.ok-blog-grid) main section[data-screen-label$="hero"] p[style]{font-size:max(1.2rem,17px) !important}
  main section[data-screen-label^="Hero"] > figure{order:-1;width:100% !important;max-width:100% !important;aspect-ratio:16/10 !important;justify-self:stretch !important;margin:0 0 0.25rem !important}
}

/* mniej ruchu: bez przejsc i bez unoszenia kart */
@media (prefers-reduced-motion:reduce){
  .ok-card,.ok-toc-d > summary::after,.ok-faq summary::after{transition:none}
  .ok-card:hover{transform:none}
}

/* druk */
@media print{
  html,body{background:#fff !important}
  ok-nav,ok-footer,.ok-toc,.ok-side,[data-sos],body > div[style*="scaleX"]{display:none !important}
  /* animacje wejscia (scroll-fx) moga zostawic elementy z opacity 0 albo przesuniete */
  main h1,main h2,main h3,main p,main li,main figure,main img,main table,main details,main article,.ok-card{opacity:1 !important;visibility:visible !important;transform:none !important}
  main section[data-screen-label^="Hero"] *,main section[data-screen-label$="hero"] *{color:#000 !important;background-color:transparent !important;box-shadow:none !important}
  main section[data-screen-label^="Hero"] a[href],main section[data-screen-label$="hero"] a[href]{border:1px solid #000 !important}
  main,main section{background:#fff !important;color:#000 !important;border-radius:0 !important;padding:0 !important;margin:0 !important}
  .ok-grid{display:block}
  .ok-art{max-width:100%;color:#000;font-size:11pt;line-height:1.45}
  .ok-art h2,.ok-art h3{break-after:avoid;color:#000}
  .ok-art .ok-tbl{-webkit-mask-image:none;mask-image:none}
  .ok-art a[href^="http"]::after{content:" (" attr(href) ")";font-size:0.85em}
  .ok-faq summary::after{display:none}
}
/* SOS (2026-09-28b): pigulka schowana na poczatku strony, przy hero i tam, gdzie nachodzilaby na link, przycisk, formularz, karte boczna, menu albo stopke (klase ok-sos-off na html ustawia sos.js) */
a[data-sos]{transition:filter 200ms,opacity 180ms ease,visibility 0s linear 0s !important}
html.ok-sos-off a[data-sos]{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transition:filter 200ms,opacity 180ms ease,visibility 0s linear 180ms !important}
@media (max-width:760px){a[data-sos]{right:1rem !important;bottom:1rem !important}}
@media (prefers-reduced-motion:reduce){a[data-sos],html.ok-sos-off a[data-sos]{transition:none !important}}
/* 2026-10-04 (weryfikacja): pytania FAQ wieksze takze na tablecie (761-1024px), nie tylko na telefonie */
@media (min-width:761px) and (max-width:1024px){.ok-faq summary{font-size:max(1.12rem,16.5px)}}
/* 2026-10-05 (decyzja klienta): blok "Czym się zajmuję" na koncu artykulu 5 stron uslug (generuje _blok_uslug.py z menu USLUGI).
   Wyglad jak lista uslug "Czym się zajmuję" na stronie glownej: granat, numer w kremie, linia, okragla strzalka. */
.ok-art .ok-uslugi{margin:2.5rem 0 0;padding:2rem 2rem 1rem;border-radius:1.25rem;background:var(--ok-navy);color:#fff}
.ok-art .ok-uslugi-k{display:flex;align-items:center;gap:0.5rem;margin:0 0 1.1rem;font-size:max(0.85rem,12px);font-weight:500;text-transform:uppercase;letter-spacing:0.22em;color:rgba(255,255,255,0.55)}
.ok-art .ok-uslugi-k::before{content:"";width:0.375rem;height:0.375rem;border-radius:62.5rem;background:var(--ok-red);flex-shrink:0}
.ok-art .ok-uslugi ul{list-style:none;margin:0;padding:0}
.ok-art .ok-uslugi li{margin:0;padding:0;border-top:1px solid rgba(255,255,255,0.16)}
.ok-art .ok-uslugi a{display:flex;align-items:center;gap:1.25rem;padding:0.95rem 0.5rem 0.95rem 0;color:#fff;text-decoration:none;border-radius:0.5rem;transition:background 160ms}
.ok-art .ok-uslugi a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.ok-art .ok-uslugi .n{width:2.25rem;flex-shrink:0;font-size:max(0.875rem,12px);font-weight:500;color:#e9dfc8}
.ok-art .ok-uslugi .t{flex:1;min-width:0;font-size:max(1.25rem,16px);font-weight:500;letter-spacing:-0.01em;line-height:1.3}
.ok-art .ok-uslugi .a{width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:62.5rem;border:1px solid rgba(255,255,255,0.16);display:grid;place-items:center;opacity:0.55;transition:transform 200ms cubic-bezier(0.23,1,0.32,1),opacity 200ms ease-out}
.ok-art .ok-uslugi .a svg{width:1.1rem;height:1.1rem}
.ok-art .ok-uslugi a:hover .a{transform:translateX(8px);opacity:1}
.ok-art .ok-uslugi :focus-visible{outline-color:#f6f1e7}
@media (max-width:760px){.ok-art .ok-uslugi{padding:1.5rem 1.15rem 0.5rem}.ok-art .ok-uslugi a{gap:0.9rem}.ok-art .ok-uslugi .n{width:1.75rem}.ok-art .ok-uslugi .a{width:2.25rem;height:2.25rem}}
@media (prefers-reduced-motion:reduce){.ok-art .ok-uslugi a,.ok-art .ok-uslugi .a{transition:none}}