/* =============== ZORNA: PODSTRONY (css/podstrony.css) ===============
   Wspolne komponenty podstron, na bazie css/baza.css. Kolejnosc w <head>:
   baza.css, podstrony.css, ewentualny arkusz samej strony. Skrypt: js/baza.js.
   Wzorzec: o-zornie/index.html. Paleta i tokeny jak w bazie, zero nowych kolorow.
   Zero ruchu poza: wejscie i unoszenie karty naglowka (.ph-card) oraz .rv z bazy.
   Przy prefers-reduced-motion baza wylacza animacje, wszystko zostaje widoczne.

   UKLAD: a.skip | header.site-header | div#menu | main#top | footer.site-footer
   main = header.ph, potem sekcje .sec, na koncu sekcja z .cta-czat (raz na strone).
   Sekcje przeplataj tonalnie: .sec (papier) i .sec--tint; .sec--s = nizsza sekcja.
   Wewnatrz .sec wybierz kolumne: .proza (720 px, tekst) albo .sec-in z bazy (880 px,
   komponenty szerokie). Kazda sekcja ma jedna kolumne, naglowek h2 ma byc w niej.
   .rv dawaj tylko na krotkich blokach (karta, CTA, naglowek); NIGDY na dlugim .proza.

   NAGLOWEK STRONY   <header class="ph"><div class="ph-in"> .ph-text + .ph-card </div></header>
   .ph            pasmo z kropkowanym tlem, siega pod naglowek strony (jak .desk na glownej)
   .ph--solo      modyfikator na .ph: bez karty (strony prawne, 404), tekst na cala szerokosc
   .ph-text       p.eyebrow, h1 (dwie czesci: <span>A</span> <span class="mu">B</span>, druga
                  szara), p.ph-lead, p.meta, div.ph-btns (a.btn-dark + a.btn-line)
   .meta          mono linia pod h1: <p class="meta"><span>Jas Bielec</span><span>21.08.2026</span></p>
   .ph-card       wrapper karty (wejscie + unoszenie, pochylenie 1,8 st.); .ph-card--l = w lewo.
                  Pod 1024 px spada pod tekst, bez pochylenia. Tylko jedna na strone.
                  Karta z dluzszym tekstem (artykuly, .sk w artykul.css) stoi prosto i nie unosi sie.
                  <div class="ph-card"><div class="card"><h2 class="card-bar">Pytanie klienta?</h2>
                  <div class="card-body"> .big/.big--sm, .card-text, .card-note, a.card-tel,
                  a.card-mail, .card-small, hr.card-sep, a.card-link, a.btn-light </div></div></div>

   TEKST   .proza  kolumna 720 px, 17/1.7 (telefon 16,5). Dzieci bezposrednie dostaja rytm
   pionowy. h2 ma skale z bazy (.sec h2: 42 px pulpit, 30 telefon; wyjatek: dokumenty prawne
   34/26), naglowki maja text-wrap:balance. Pod 1024 px kolumna stoi przy lewej krawedzi
   kontenera (jak naglowek strony), od 1024 px jest wysrodkowana. Stylowane: h2, h3, p,
   a (podkreslone), strong, ul/ol bez klasy (male markery, ol z numerami mono), blockquote, code,
   pre (dodaj tabindex="0"), hr, .faq-list. Listy z klasa (.kroki, .lista-linkow) i listy
   wewnatrz .spis nie dostaja markerow prozy.

   OBIEKTY (ciemne, wszystkie dzialaja w .proza i w .sec-in)
   .tabela-karta  <div class="tabela-karta" role="region" aria-label="..." tabindex="0"><table>
                  [caption = mono pasek tytulowy] thead th, tbody th (naglowek wiersza), td;
                  td.num/th.num = liczby po prawej. Pierwsza kolumna przyklejona przy przewijaniu.
                  .tabela-karta--waska = tabela 2 do 3 kolumn bez minimalnej szerokosci.
                  .tabela-karta--lista (razem z --waska, z rolami ARIA w HTML) = na telefonie wiersze
                  jak male bloki: nazwa i cena w linii, opis pod spodem (bez przewijania w bok).
   .ramka-ciemna  <div class="ramka-ciemna"><p class="card-bar">Najkrocej</p><div class="card-body">
                  p, ul, .big, .card-text, a ... </div></div>  (pasek moze byc tez h2.card-bar;
                  .ramka-ciemna--s albo pasek h2 = wezsza karta, 380 px jak karta naglowka)
   .spis          <nav class="spis" aria-labelledby="x"><p class="spis-t" id="x">Spis tresci</p>
                  <ol><li><a href="#id">Tytul</a></li>...</ol></nav>  (jasna ramka, numery mono;
                  w .sec--tint ma tlo papieru)
   .kroki         <ol class="kroki" role="list"><li class="krok"><h3>Tytul</h3><p>Opis</p></li>...</ol>
                  numery 01, 02... dodaje CSS (pasek jak .card-bar, z kropka); ciemne karty w rzedzie
                  (telefon: kolumna). Bezposrednio w .proza od 900 px wychodza z kolumny tekstu na
                  cala szerokosc kontenera (1160 px, krawedzie naglowka i stopki), tak samo .case-list;
                  --4 = 4 / 2 / 1 kolumna (nigdy 3 + 1), --6 i --7 w css/oferta.css.
   .lista-linkow  <ul class="lista-linkow" role="list"><li><a href="/x/"><span class="ll-t">Tytul</span>
                  <span class="ll-d">Opis</span><span class="ll-a" aria-hidden="true">&rarr;</span></a></li>
   .cta-czat      <div class="cta-czat rv" role="group" aria-label="Zapytaj asystenta">
                  <p class="cta-bar">asystent AI &middot; odpowiada od razu</p><div class="cta-body">
                  <div class="cta-msg"><img src="/assets/logo-96.webp" alt="" width="28" height="28">
                  <p>Jedno zdanie.</p></div><div class="cta-btns"><a class="btn-light" href="/">
                  Zapytaj asystenta&nbsp;&rarr;</a><a class="btn-line" href="/wycena/">Policz cene&nbsp;&rarr;
                  </a></div></div></div>  w <section class="sec sec--tint sec--s">, max 720 px
                  (jak kolumna .proza), zawsze ostatni blok nad stopka

   POMOCNICZE  .mt-s .mt-m .mt-l (margines gorny 16/32/56 px), .nw, .mu, .sr-only (z bazy) */

/* ---------- NAGLOWEK STRONY ---------- */
.ph{position:relative;display:flow-root;margin-top:calc(var(--hh) * -1);padding:calc(var(--hh) + clamp(20px,3vw,40px)) 0 clamp(56px,7vw,96px);overflow-x:hidden;overflow-x:clip;background-color:var(--bg);background-image:radial-gradient(rgba(5,6,7,.2) 1px,transparent 1.3px);background-size:28px 28px}
.ph-in{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32vw,380px);align-items:center;gap:40px clamp(40px,6vw,80px);max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.ph--solo .ph-in{grid-template-columns:minmax(0,1fr)}
.ph-text{min-width:0;max-width:760px}
.ph h1{font:300 clamp(42px,5vw,64px)/1.04 var(--font);letter-spacing:-.03em;text-wrap:balance}
.ph h1 span{display:block}
.ph h1 .mu{color:var(--mut-l)}
.ph-lead{max-width:560px;margin-top:20px;font:300 18px/1.65 var(--font);color:var(--mut-l)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-top:18px;font:400 12px/1.8 var(--mono);letter-spacing:.06em;color:var(--mut-l)}
/* bez kropek miedzy pozycjami: przy zawinieciu wiersza kropka zostawalaby na poczatku nowej linii */
.meta>*{white-space:nowrap}
/* autor w linii meta jest samodzielnym linkiem: pole dotyku 44 px bez zmiany wysokosci wiersza */
.meta a{display:inline-block;padding-block:14px;margin-block:-14px;color:var(--ink);text-underline-offset:3px}
.ph-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ph-lead+.meta{margin-top:20px}
/* karta naglowka: wejscie (wypelnienie "backwards", po zakonczeniu zwykly styl) i powolne unoszenie;
   pochylenie jest w keyframes, wiec nie koliduje z ruchem */
@keyframes phRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes phFloat{from{transform:rotate(var(--r)) translateY(-4px)}to{transform:rotate(var(--r)) translateY(5px)}}
.ph-card{--r:1.8deg;min-width:0;animation:phRise .8s var(--ease) .25s backwards}
.ph-card--l{--r:-1.6deg}
.ph-card .card{transform:rotate(var(--r));animation:phFloat 7.5s ease-in-out infinite alternate}
.ph-card .card-bar{padding-inline:18px}
.ph-card .card-body{padding:20px 22px 24px}
.card .card-tel,.card .card-mail{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--lt)}
.card .card-tel{margin-top:2px;font:200 30px/1.2 var(--font);letter-spacing:-.02em}
.card .card-mail{font-size:15px}
.card .card-tel:hover,.card .card-mail:hover{text-decoration:underline;text-underline-offset:4px}
.ph-card .big{text-wrap:balance}
.ph-card .card-text{text-wrap:pretty}
.card-small{margin-top:4px;font-size:12.5px;color:var(--mut)}
/* Widget asystenta (staly przycisk w prawym dolnym rogu, z-index 2147483000) lezy nad menu mobilnym
   i zakrywa koniec przycisku "Zapytaj asystenta": na czas otwartego menu chowamy go w calosci
   (stan rozmowy zostaje w shadow DOM, po zamknieciu menu widget wraca). Wspolne dla wszystkich podstron. */
html.menu-open [data-zorna-asystent-host]{display:none}
.card-sep{width:100%;height:0;margin:18px 0 8px;border:0;border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:1023px){
  .ph-in{grid-template-columns:minmax(0,1fr)}
  .ph-card{max-width:560px}
  .ph-card .card{transform:none;animation:none;box-shadow:0 30px 60px -36px rgba(5,6,7,.6)}
}
@media (max-width:767px){
  .ph{padding-top:calc(var(--hh) + 16px);padding-bottom:56px}
  .ph-in{gap:32px}
  .ph h1{font-size:clamp(32px,9vw,42px)}
  .ph-lead{font-size:16.5px}
  .meta{gap:4px 18px}
  .ph-btns{flex-direction:column}
  .ph-btns>*{width:100%}
  .ph-card{max-width:none}
}
/* 320 px: najdluzsze slowo naglowka ("stomatologicznego") musi sie zmiescic w kolumnie 280 px,
   a etykiety przyciskow w jednej linii, wysrodkowane */
@media (max-width:359px){
  .ph h1{font-size:28px}
  .ph-btns>*{padding:0 14px;letter-spacing:.08em;text-align:center}
}
.ph+.sec{padding-top:clamp(56px,6vw,80px)}
.sec--s{padding-top:clamp(56px,6vw,72px);padding-bottom:clamp(56px,6vw,72px)}

/* ---------- TEKST (.proza) ----------
   Elementy w :where(), czyli wagi zero: komponenty w srodku (tabela, ramka, spis) zawsze je przebija */
.proza{max-width:720px;margin:0 auto;font:300 17px/1.7 var(--font);overflow-wrap:break-word}
.proza>*+*{margin-top:1.1em}
.proza>:first-child{margin-top:0}
/* h2 w skali bazy (.sec h2), ten sam rozmiar na wszystkich podstronach */
.proza h2{margin-top:clamp(56px,5.6vw,80px);font:300 clamp(28px,4vw,42px)/1.15 var(--font);letter-spacing:-.02em}
.proza h3{margin-top:2em;font:400 clamp(19px,1.7vw,21px)/1.35 var(--font);letter-spacing:-.01em}
.proza h2+*{margin-top:.6em}
.proza h3+*{margin-top:.8em}
.proza :is(h2,h3)[id]{scroll-margin-top:24px}
.proza>hr{margin-block:2.4em}
/* naglowki bez wdow: w jednym miejscu dla wszystkich podstron (baza.css zostaje bez zmian) */
.sec h2,.proza :is(h2,h3),.krok h3,.ll-t,.faq-title,.uslugi h3,.case-name,.makieta-name{text-wrap:balance}
:where(.proza,.ramka-ciemna) a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
:where(.proza,.ramka-ciemna) a:hover{text-decoration-thickness:2px}
:where(.proza,.ramka-ciemna) strong{font-weight:500}
:where(.proza) hr{height:0;border:0;border-top:1px solid var(--line)}
:where(.proza) blockquote{margin:0;padding:2px 0 2px 22px;border-left:2px solid var(--ink);color:var(--mut-l)}
:where(.proza,.ramka-ciemna) code{padding:.14em .4em;border-radius:6px;background:rgba(5,6,7,.06);font:400 .86em var(--mono)}
.ramka-ciemna code{background:rgba(255,255,255,.1)}
:where(.proza) pre{margin:0;padding:16px 18px;overflow-x:auto;border-radius:14px;background:var(--ink);color:var(--lt);font:400 13.5px/1.65 var(--mono)}
:where(.proza) pre code{padding:0;background:none;font-size:inherit}
/* listy bez klasy: male markery w kolorze tekstu (ciemne w prozie, jasne w ramce) */
:where(.proza,.ramka-ciemna) :is(ul,ol):not([class],.spis *){padding:0;list-style:none}
:where(.proza,.ramka-ciemna) :is(ul,ol):not([class],.spis *)>li{position:relative;padding-left:26px}
:where(.proza,.ramka-ciemna) :is(ul,ol):not([class],.spis *)>li+li{margin-top:.55em}
:where(.proza,.ramka-ciemna) :is(ul,ol):not([class],.spis *)>li>:is(ul,ol){margin-top:.55em}
:where(.proza,.ramka-ciemna) ul:not([class],.spis *)>li::before{content:'';position:absolute;left:5px;top:calc(.86em - 2.5px);width:5px;height:5px;border-radius:50%;background:currentColor}
:where(.proza,.ramka-ciemna) ol:not([class],.spis *){counter-reset:o}
:where(.proza,.ramka-ciemna) ol:not([class],.spis *)>li{padding-left:36px;counter-increment:o}
:where(.proza,.ramka-ciemna) ol:not([class],.spis *)>li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.36em;font:400 11px/1.6 var(--mono);letter-spacing:.1em}
.proza .faq-list{margin-top:28px}
@media (max-width:767px){
  .proza{font-size:16.5px}
  .proza h2{margin-top:56px;font-size:30px;line-height:1.1}
}
/* dokumenty prawne (regulamin, polityka prywatnosci: kolumna z .spis--dok): dlugi tekst z numerowanymi
   paragrafami zostaje na cichszej skali 34/26 px. To swiadomy wyjatek od skali bazy, ustalony z arkuszem
   css/dokument.css (jego naglowek mowi, ze proza dokumentow zostaje 34/26). */
.proza:has(>.spis--dok) h2{font-size:clamp(26px,3vw,34px);line-height:1.18}
@media (max-width:767px){.proza:has(>.spis--dok) h2{font-size:26px;line-height:1.2}}
/* 320 px: dlugie slowa naglowkow ("stomatologicznego?") musza sie zmiescic w kolumnie 280 px */
@media (max-width:359px){.proza h2,.sec h2{font-size:28px}}
/* tablet: kolumna tekstu stoi przy lewej krawedzi kontenera, tak jak naglowek strony i okno czatu
   (zadnego "prawie" wyrownania o kilkanascie pikseli) */
@media (max-width:1023px){.proza{margin-inline:0}}

/* ---------- OBIEKTY CIEMNE: wspolne ---------- */
.tabela-karta,.ramka-ciemna,.krok,.cta-czat{background:var(--ink);color:var(--lt);box-shadow:0 40px 80px -40px rgba(5,6,7,.6)}
.tabela-karta :focus-visible,.ramka-ciemna :focus-visible,.krok :focus-visible,.cta-czat :focus-visible{outline-color:var(--lt)}
.proza :is(.tabela-karta,.ramka-ciemna,.spis,.kroki,.lista-linkow){margin-block:28px}
/* tabela jest szersza od tekstu o 60 px z kazdej strony, na tej samej osi (od 1024 px; nizej kolumna jest przy lewej krawedzi) */
@media (min-width:1024px){.proza>.tabela-karta{margin-inline:-60px}}

/* ---------- TABELA W KARCIE ---------- */
.tabela-karta{overflow-x:auto;border-radius:18px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.tabela-karta table{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;font:300 15px/1.55 var(--font)}
.tabela-karta--waska table{min-width:0}
.tabela-karta caption{padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.1);font:400 10.5px/1.4 var(--mono);text-align:left;color:var(--mut)}
.tabela-karta caption::before{content:'';display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:rgba(255,255,255,.3);vertical-align:middle}
.tabela-karta th,.tabela-karta td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;vertical-align:top}
.tabela-karta thead th{font:400 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:var(--mut)}
.tabela-karta tbody th{font-weight:400}
.tabela-karta thead th:first-child,.tabela-karta tbody th,.tabela-karta tbody td:first-child{position:sticky;left:0;z-index:1;background:var(--ink)}
.tabela-karta tbody:last-child tr:last-child>*,.tabela-karta tfoot tr:last-child>*{border-bottom:0}
.tabela-karta .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabela-karta a{text-underline-offset:3px}
@media (max-width:767px){
  .tabela-karta th,.tabela-karta td{padding:12px 14px}
  .tabela-karta:not(.tabela-karta--waska) :is(thead th:first-child,tbody th,tbody td:first-child){box-shadow:1px 0 0 rgba(255,255,255,.14)}
}

/* ---------- TABELA CENNIKOWA NA TELEFONIE ----------
   .tabela-karta--lista (razem z --waska): na desktopie zwykla tabela, ponizej 768 px kazdy wiersz
   to maly blok: nazwa i cena w jednej linii, opis pod spodem. Cena jest od razu widoczna,
   bez przewijania w bok, nawet przy 320 px. Naglowek kolumn zostaje dla czytnikow ekranu
   (jawne role ARIA w HTML: table, rowgroup, row, columnheader, rowheader, cell). */
@media (max-width:767px){
  .tabela-karta--lista{position:relative}
  .tabela-karta--lista table,.tabela-karta--lista thead,.tabela-karta--lista tbody,.tabela-karta--lista caption{display:block}
  .tabela-karta--lista thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .tabela-karta--lista tbody tr{display:grid;grid-template-columns:minmax(0,1fr) fit-content(55%);align-items:baseline;gap:4px 16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
  .tabela-karta--lista tbody tr:last-child{border-bottom:0}
  .tabela-karta.tabela-karta--lista tbody tr>*{position:static;padding:0;border:0;background:none;box-shadow:none}
  .tabela-karta--lista tbody th{grid-column:1;grid-row:1;font:400 15px/1.4 var(--font)}
  .tabela-karta--lista tbody td{grid-column:1 / -1;grid-row:2;font-size:14px;line-height:1.5;color:var(--mut)}
  .tabela-karta--lista tbody td.num{grid-column:2;grid-row:1;text-align:right;font-size:15px;color:var(--lt)}
  .tabela-karta--lista tbody td.zawin{white-space:normal}
}

/* ---------- RAMKA CIEMNA ---------- */
.ramka-ciemna{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;font:300 16px/1.7 var(--font)}
.ramka-ciemna .card-bar{display:flex;align-items:center;gap:9px;min-height:38px;margin:0;padding:7px 18px;border-bottom:1px solid rgba(255,255,255,.1);font:400 10.5px/1.4 var(--mono);letter-spacing:0;color:var(--mut)}
.ramka-ciemna .card-bar::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:rgba(255,255,255,.3)}
.ramka-ciemna .card-body{gap:12px;align-items:stretch;margin:0;padding:20px 24px 24px}
/* krotka ramka z kilkoma wierszami ("Dane firmy") ma szerokosc karty naglowka, a nie calej kolumny */
.ramka-ciemna--s,.ramka-ciemna:has(>h2.card-bar){max-width:380px}
@media (max-width:767px){.ramka-ciemna .card-body{padding:18px 18px 22px}}

/* ---------- SPIS TRESCI (jasna ramka, kontrastuje z tlem sekcji) ---------- */
.spis{padding:20px 22px 12px;border:1px solid var(--line);border-radius:16px;background:rgba(5,6,7,.035)}
.sec--tint .spis{background:var(--bg)}
.spis-t{margin-bottom:6px;font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-l)}
.spis ol{margin:0;padding:0;list-style:none;counter-reset:s}
.spis li{counter-increment:s;border-top:1px solid var(--line)}
.spis li:first-child{border-top:0}
.spis a{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;min-height:44px;padding:6px 0;font:300 15.5px/1.4 var(--font);text-decoration:none}
.spis a::before{content:counter(s,decimal-leading-zero);padding-right:14px;font:400 11px var(--mono);letter-spacing:.1em;text-align:right;color:var(--mut-l)}
.spis a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- KROKI: ponumerowane ciemne karty w rzedzie ---------- */
.kroki{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:k}
.krok{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;counter-increment:k}
/* pasek z numerem: ta sama ramka co .card-bar (38 px, mono 10,5 px, kropka 7 px). Kropka jest tlem
   ustawionym wzgledem pola tresci, a numer odsuwa text-indent, wiec dziala przy kazdym paddingu
   paska (arkusze stron moga go zmieniac) */
.krok::before{content:counter(k,decimal-leading-zero);display:block;min-height:38px;padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.1);font:400 10.5px/1.4 var(--mono);letter-spacing:0;text-indent:16px;color:var(--mut);background:radial-gradient(circle at 3.5px 50%,rgba(255,255,255,.3) 3.5px,transparent 4px) no-repeat content-box}
.krok h3{margin:0;padding:20px 18px 0;font:400 19px/1.3 var(--font);letter-spacing:-.01em}
.krok p{margin:0;padding:10px 18px 22px;font:300 15px/1.65 var(--font);color:var(--mut)}
/* cztery karty: 4 / 2 / 1 w rzedzie, nigdy 3 + 1 */
.kroki--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.kroki--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:559px){.kroki--4{grid-template-columns:minmax(0,1fr)}}
/* trzy karty nigdy nie rozkladaja sie 2 + 1: ponizej 720 px jedna kolumna */
@media (max-width:719px){.kroki:has(>.krok:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}}
/* karty w prozie wychodza z kolumny tekstu na cala szerokosc kontenera (1160 px = krawedzie naglowka
   i stopki), ta sama os co kolumna tekstu. 100cqw to szerokosc pola tresci sekcji, bez paska
   przewijania; sekcja z takim rzedem dostaje kontener rozmiaru (tylko wtedy). Rzad kart nigdy nie
   jest mala kepka posrodku pustego pasma. */
@supports selector(:has(*)){
  @media (min-width:900px){
    .sec:has(>.proza>:is(.kroki,.case-list)){container-type:inline-size}
    .proza>:is(.kroki,.case-list){--bw:min(1160px,100cqw);width:var(--bw);max-width:none;gap:20px}
    .proza>.kroki:not(.kroki--4,.kroki--7){grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  /* od 1024 px kolumna tekstu jest wysrodkowana, wiec rzad kart tez (ta sama os); nizej obie stoja przy lewej krawedzi */
  @media (min-width:1024px){
    .proza>:is(.kroki,.case-list){margin-inline:calc((100% - var(--bw)) / 2)}
  }
}
/* jak karty na stronie glownej: delikatne uniesienie przy najechaniu (nie przy reduced-motion) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .krok,.plan,.makieta-card,.case-card{transition:transform .35s var(--ease)}
  .krok:hover,.plan:hover,.makieta-card:hover,.case-card:hover,.js-reveal .makieta-card.rv.is-in:hover,.js-reveal .case-card.rv.is-in:hover{transform:translateY(-4px)}
}

/* ---------- LISTA LINKOW: wiersze z tytulem, opisem i strzalka ---------- */
.lista-linkow{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.lista-linkow li{margin:0;border-top:1px solid var(--line)}
.lista-linkow a{display:grid;grid-template-columns:minmax(0,1fr) 28px;column-gap:16px;align-items:center;min-height:64px;padding:18px 0;text-decoration:none}
.ll-t{grid-column:1;font:300 clamp(18px,2vw,21px)/1.35 var(--font);letter-spacing:-.01em}
.ll-d{grid-column:1;max-width:640px;margin-top:4px;font:300 15px/1.6 var(--font);color:var(--mut-l)}
.ll-a{grid-column:2;grid-row:1/span 2;font:200 24px/1 var(--font);transition:transform .3s var(--ease)}
.lista-linkow a:hover .ll-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover){.lista-linkow a:hover .ll-a{transform:translateX(4px)}}

/* ---------- CTA: OKNO CZATU ---------- */
.cta-czat{display:flex;flex-direction:column;max-width:720px;margin:0 auto;overflow:hidden;border-radius:22px}
.cta-bar{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);font:400 11px var(--mono);letter-spacing:.06em;color:var(--mut)}
.cta-bar::before{content:'';width:8px;height:8px;flex:none;border-radius:50%;background:var(--rec)}
.cta-body{display:flex;flex-direction:column;gap:20px;padding:24px 22px 26px}
.cta-msg{display:flex;align-items:flex-start;gap:12px}
.cta-msg img{width:28px;height:28px;flex:none;object-fit:contain;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.cta-msg p{min-width:0;padding:13px 17px;border-radius:6px 18px 18px 18px;background:rgba(255,255,255,.08);font:300 15.5px/1.5 var(--font)}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px;padding-left:40px}
.cta-czat .btn-light{min-height:48px;margin-top:0}
.cta-czat .btn-line{min-height:48px;border-color:rgba(238,240,242,.5);color:var(--lt)}
.cta-czat .btn-line:hover{background:var(--lt);color:var(--ink)}
@media (max-width:1023px){.cta-czat{margin-inline:0}}
@media (max-width:767px){
  .cta-body{padding:20px 16px 22px}
  .cta-btns{flex-direction:column;padding-left:0}
  .cta-btns>*{width:100%}
}

/* ---------- POMOCNICZE ---------- */
.mt-s{margin-top:16px}
.mt-m{margin-top:32px}
.mt-l{margin-top:56px}