/* =====================================================================
   SZATA "TECZKA" (11.2026) - warstwa wizualna i ruch na CALYM serwisie.
   Uklad, tresc i kolejnosc sekcji bez zmian. Laduje sie po home.css /
   service-pages.css na kazdej stronie (blok #teczka w <head>, wstawia go
   _zrodlo/wstrzyknij.py; strony glowne maja link w _zrodlo/uklad.html).
   Kazda regula zaczyna sie od "html body", wiec wygrywa remisy z arkuszami
   strony niezaleznie od kolejnosci ladowania.
   Projekt: repo/odswiezenie-2026-11-estetyka/SPEC.md. Ruch: assets/js/teczka.js.
   ===================================================================== */

:root{
  --tz-ease:cubic-bezier(.22,1,.36,1);
  --tz-page:#F6F3EC;
  --tz-r:clamp(20px,2.6vw,34px);          /* ramka hero i pasow */
  --tz-m:clamp(8px,1.4vw,18px);           /* margines ramki */
  --tz-sheet-r:44px; --tz-sheet-o:44px;   /* kartki strony glownej */
  --tz-card-r:22px;
  --tz-shadow-card:0 4px 16px rgba(20,42,37,.06);
  --tz-shadow-lift:0 18px 40px -20px rgba(20,42,37,.28);
}
@media (max-width:760px){ :root{--tz-sheet-r:28px; --tz-sheet-o:28px; --tz-card-r:18px;} }

html body ::selection{background:rgba(184,145,47,.3);}
/* ziarno nad cala strona */
html body::after{content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------------- etykiety: jeden material ---------------- */
html body :is(.eyebrow, .qp-nad){display:inline-flex !important; align-items:center; gap:9px; width:fit-content; max-width:100%;
  padding:8px 15px 7px 12px !important; border-radius:999px; border:0 !important;
  background:rgba(20,42,37,.06) !important; color:var(--navy) !important;
  font:600 .72rem/1.3 var(--font-body) !important; letter-spacing:.18em !important; text-transform:uppercase;}
html body :is(.eyebrow, .qp-nad)::before{content:"" !important; display:block !important; position:static !important;
  width:6px !important; height:6px !important; border-radius:50%; background:var(--gold) !important; flex:none; margin:0 !important; border:0 !important; transform:none !important;}
html body :is(.eyebrow, .qp-nad)::after{display:none !important;}
html body :is(.contact, .service-hero, .article-cta, .why-section, .hub-hero, .light-heading) .eyebrow{background:rgba(255,255,255,.09) !important; color:var(--gold-light) !important;}

/* ---------------- przyciski: pigulki ---------------- */
html body :is(.btn, .button, .btn-navy, .hero.hero-wspolnicy .hs-cta){border-radius:999px !important; text-transform:none !important; letter-spacing:.005em !important;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .3s ease;}
html body :is(.btn, .button):active{transform:scale(.97);}
/* Przycisk hero (uwaga Pawla 10.11.2026: tekst i strzalka slabo widoczne, brak oddechu od zdania):
   tekst 17 px, wysokosc 60 px, strzalka rysowana gruba kreska (znak "→" w Source Sans byl cienki),
   wiekszy odstep od zdania, obok link "Przeczytaj wiecej" do poradnikow. */
html body .hero.hero-wspolnicy .hs-ctas{margin-top:calc(14px + clamp(6px, .7vw, 10px)); /* +10 px przy 1440, +6 px na tablecie i telefonie (uwaga Pawla 10.11.2026) */ grid-template-columns:auto auto; justify-content:start; align-items:center; column-gap:28px;}
html body .hero.hero-wspolnicy .hs-cta{padding:9px 9px 9px 28px !important; gap:18px !important; min-height:60px;
  font-size:1.06rem !important; font-weight:600 !important; letter-spacing:.01em !important; color:#FFFFFF !important;
  background:var(--navy-deep) !important; border-color:var(--navy-deep) !important; box-shadow:0 14px 30px -14px rgba(20,42,37,.55) !important;}
html body .hero.hero-wspolnicy .hs-cta > span[aria-hidden]{display:inline-block; width:42px; height:42px; border-radius:50%; font-size:0; color:transparent;
  background:var(--gold-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142A25' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
  transition:transform .3s var(--tz-ease);}
@media (hover:hover){ html body .hero.hero-wspolnicy .hs-cta:hover{background:var(--navy) !important; border-color:var(--navy) !important;} }
html body .hero.hero-wspolnicy .hs-wiecej{grid-area:1/2; display:inline-flex; align-items:center; gap:8px; font:600 .98rem/1.2 var(--font-body);
  color:var(--navy); text-decoration:none; padding:8px 0 6px; border-bottom:1.5px solid var(--gold); white-space:nowrap;}
html body .hero.hero-wspolnicy .hs-wiecej span{color:var(--gold-dark); transition:transform .3s var(--tz-ease);}
@media (hover:hover){ html body .hero.hero-wspolnicy .hs-wiecej:hover span{transform:translateX(4px);} html body .hero.hero-wspolnicy .hs-wiecej:hover{color:var(--gold-dark);} }
html body .hero.hero-wspolnicy .hs-wiecej:focus-visible{outline:3px solid var(--gold); outline-offset:4px;}
@media (max-width:560px){
  html body .hero.hero-wspolnicy .hs-ctas{grid-template-columns:auto; row-gap:16px;}
  html body .hero.hero-wspolnicy .hs-wiecej{grid-area:2/1; justify-self:start;}
}
@media (hover:hover){
  html body .hero.hero-wspolnicy .hs-cta:hover > span[aria-hidden]{transform:translateX(3px);}
  html body :is(.btn-navy, .button):hover{box-shadow:0 8px 22px -10px rgba(20,42,37,.55);}
}
html body .contact .btn-primary{background:var(--gold-light) !important; border-color:var(--gold-light) !important; color:var(--navy-deep) !important;}
html body .contact .btn-primary:disabled{opacity:.55;}
html body .guides-chip{border-radius:999px !important;}

/* ---------------- nawigacja: plywajaca pigulka (komputer) ---------------- */
@media (min-width:1121px){ /* prog = menu mobilne strony (max-width:1120px) */
  html body header{background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    padding-top:12px; pointer-events:none;}
  html body header::after{display:none !important;}
  html body header .nav{pointer-events:auto; max-width:1180px; margin:0 auto; padding:8px 8px 8px 42px !important; /* logo 20 px dalej od krawedzi pigulki (polecenie Pawla 10.11.2026) */
    background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
    border:1px solid rgba(20,42,37,.08); border-radius:999px; box-shadow:0 10px 30px -18px rgba(20,42,37,.35);}
  html body header .btn-navy{min-height:42px; padding:10px 20px !important;}
}
@media (max-width:1120px){
  html body header{border-bottom:0 !important; box-shadow:0 6px 24px -16px rgba(20,42,37,.4) !important;}
  html body header::after{display:none !important;}
}

/* =================== STRONA GLOWNA =================== */
/* Tlo od hero do konca strony jednolicie biale (polecenie Pawla 10.11.2026); kartki odcina
   cienka zlota linia krawedzi zamiast kremu. */
html:has(.hero-wspolnicy), html:has(.hero-wspolnicy) body{background:#FFFFFF;}

/* Zdania hero: Cormorant ma size-adjust 120%, wiec interlinia liczona od font-size jest
   o 1/6 ciasniejsza, niz wyglada w CSS. 1.12 z home.css dawalo realnie ok. 0.93 - ogonki
   (p, g, ę) wchodzily w litery wiersza nizej. 1.2 = realnie ok. 1.0, czyli srodek zakresu
   0.95-1.05 dla duzych naglowkow; 1.28 daje zapas na polskie ogonki i akcenty (ę, ś). hero-wspolnicy.js liczy dopasowanie od tej wartosci. */
html body .hero.hero-wspolnicy h1.hs-lines, html body .hero.hero-wspolnicy .hs-line{line-height:1.28;}
/* Kolumna tekstu szersza (1.22 : 0.9 zamiast 1 : 1.04): portret ma najwyzej 470 px, wiec prawa
   kolumna miala pusty zapas, a zdania lamaly sie w 520 px - polskie zdanie Mikolaja schodzilo
   wtedy do 5 wierszy i ciagnelo wspolny stopien wszystkich zdan w dol (hero-wspolnicy.js). */
@media (min-width:1100px){
  html body .hero.hero-wspolnicy .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr);}
}
html body .hero.hero-wspolnicy{margin:var(--tz-m); border-radius:var(--tz-r); overflow:hidden;}
@media (min-width:1121px){ html body .hero.hero-wspolnicy{margin-top:-68px; padding-top:150px;} }
html body .hero.hero-wspolnicy h1.hs-lines{letter-spacing:-.012em;}
/* oddech nad zdaniem: +5 px od etykiety przy 1440, +3 px na mniejszych ekranach (dolicza sie do gap 24 px z home.css) */
html body .hero.hero-wspolnicy .hero-eyebrow{margin-bottom:clamp(3px, .35vw, 5px) !important;}
html body .hero::before{animation:none !important;}
html body .hs-proof strong{font-weight:500; letter-spacing:-.02em; font-variant-numeric:lining-nums;}
html body .hs-arch{box-shadow:0 50px 90px -56px rgba(20,42,37,.8);}
/* Portrety uciete po bokach rowno z zielonym lukiem, u gory otwarte (glowa wychodzi nad luk).
   Odstepy --tz-cl / --tz-cr liczy teczka.js (przytnij). Zachowuje wejscie z home.css: ukryte
   zdjecie ma clip od gory 100 %, aktywne 0. Bez JavaScriptu zmienne = 0, czyli jak dotad. */
html body .hs-slide img{clip-path:inset(100% var(--tz-cr,0px) 0 var(--tz-cl,0px));}
html body .hs-slide.is-on img{clip-path:inset(0 var(--tz-cr,0px) 0 var(--tz-cl,0px));}
html body .zk-foto img{clip-path:inset(0 var(--tz-cr,0px) 0 var(--tz-cl,0px));}
/* Cien portretu krotszy (8 px zamiast 22 px rozmycia): szeroki cien urywal sie na liniach ciecia
   i rysowal nad lukiem blady prostokat. Teraz miesci sie w zielonym luku, a wokol glowy nie
   dochodzi do linii ciecia. */
html body :is(.zk-foto img, .hs-slide img){filter:drop-shadow(0 8px 8px rgba(0,0,0,.14)) !important;}
html body :is(.zespol-head h2, .uslugi-head h2, .faq-home .section-head h2, .qp-sekcja .qp-h2){letter-spacing:-.018em;}

/* kartki: kazda sekcja nachodzi na poprzednia zaokraglona krawedzia */
html body .hero-wspolnicy ~ .qp-sekcja{background:#FFFFFF; padding-bottom:calc(clamp(56px,8vw,112px) + var(--tz-sheet-o));}
html body :is(.zespol, .uslugi, .faq-home){position:relative; margin-top:calc(var(--tz-sheet-o) * -1);
  border-radius:var(--tz-sheet-r) var(--tz-sheet-r) 0 0; overflow:hidden; box-shadow:0 -18px 40px -30px rgba(20,42,37,.28);
  border:1px solid rgba(184,145,47,.4); border-bottom:0;}
html body .zespol{background:#FFFFFF; z-index:2; padding-bottom:calc(64px + var(--tz-sheet-o));}
html body .uslugi{background:#FFFFFF; z-index:3; overflow:visible; padding-top:calc(24px + var(--tz-sheet-o)); padding-bottom:calc(120px + var(--tz-sheet-o));}
/* 10.11.2026 (uwaga Pawla): panel pod kafelkiem ostatniego rzedu chowal sie pod kartka FAQ (z-index 4).
   Przy najechaniu kartka uslug idzie nad FAQ; jej tlo konczy sie przed pasem, ktorym FAQ na nia
   zachodzi, wiec zaokraglona gora FAQ nadal widac, a nad nia jest tylko otwarty panel. */
html body .hero-wspolnicy ~ .uslugi{background:linear-gradient(#FFFFFF,#FFFFFF) top / 100% calc(100% - var(--tz-sheet-o)) no-repeat !important;}
html body .hero-wspolnicy ~ .uslugi:has(.sv:hover, .sv:focus-within){z-index:6;}
html body .faq-home{background:#FFFFFF !important; z-index:4; padding-bottom:calc(100px + var(--tz-sheet-o));}
html body .hero-wspolnicy ~ .contact{position:relative; z-index:5; margin-top:calc(var(--tz-sheet-o) * -1);
  border-radius:var(--tz-sheet-r) var(--tz-sheet-r) 0 0; box-shadow:0 -18px 40px -30px rgba(20,42,37,.35);}
html body .contact::before{animation:none !important;}
html body footer{position:relative; z-index:5;}

/* kafelki uslug - spoczynek. Biala karta na bialej kartce trzyma sie na ramce i cieniu:
   ramka zielen 14 % (widoczna, ale nie kreskowka), cien dwuwarstwowy - bliski daje krawedz,
   daleki unosi karte. Kremowe wypelnienie (pierwsza wersja) zlewalo sie z tlem. */
html body .sv-card{border:1px solid rgba(184,145,47,.55) !important; border-radius:var(--tz-card-r); background:#FFFFFF;
  box-shadow:0 1px 2px rgba(20,42,37,.06), 0 12px 30px -16px rgba(20,42,37,.28);
  transition:transform .35s var(--tz-ease), box-shadow .35s var(--tz-ease), background-color .3s ease, border-color .3s ease, border-radius .2s ease;}
/* ikona: zielone kolo, zloty symbol, zlota obwodka (polecenie Pawla 10.11.2026) */
html body .sv-ico{border-radius:50% !important; width:48px; height:48px; display:inline-grid; place-items:center; background:var(--navy-deep) !important;
  border:1.5px solid var(--gold) !important; color:var(--gold-light) !important; box-shadow:0 0 0 4px rgba(184,145,47,.12);}
html body .sv-ico svg{color:var(--gold-light); stroke:currentColor;}
html body .sv-tag{color:var(--gold-dark);}
html body .sv-no{color:rgba(20,42,37,.42);}
@media (hover:hover){ html body .sv:not(:hover) .sv-card:hover{transform:translateY(-3px);} }
html body .sv-plus{border-radius:50% !important;}
html body .sv-more li::before{width:6px; height:6px; transform:none; border:0; border-radius:50%; background:var(--gold-light); top:.62em;}
html body .sv-k{border-top-color:rgba(227,200,120,.28);}
html body .sv-btns a{border-radius:999px; padding:10px 18px;}
/* kafelki uslug - najechanie: kafelek i panel tworza jedna zaokraglona karte */
@media (hover:hover) and (min-width:761px){
  html body .sv:hover .sv-card, html body .sv:focus-within .sv-card{border-radius:var(--tz-card-r) var(--tz-card-r) 0 0; box-shadow:none; border-color:var(--navy) !important;}
  html body .sv-more{left:-1px !important; right:-1px !important; margin-top:0 !important; border-radius:0 0 var(--tz-card-r) var(--tz-card-r);
    box-shadow:0 34px 60px -30px rgba(20,42,37,.6) !important;}
  html body .sv:hover .sv-ico, html body .sv:focus-within .sv-ico{background:var(--navy-deep) !important; border-color:var(--gold-light) !important; box-shadow:0 0 0 4px rgba(227,200,120,.14);}
}
@media (hover:none), (max-width:760px){
  html body .sv-card{overflow:hidden;}
  html body .sv.is-open .sv-ico{background:var(--navy-deep) !important; border-color:var(--gold-light) !important;}
  html body .sv.is-open .sv-card{border-color:var(--navy) !important;}
}

/* ---------- zespol: kazda osoba na wlasnej karcie (polecenie Pawla 10.11.2026: "nijako") ----------
   Biala karta ze zlotym obrysem, portret na jasnozielonym polu karty, wieksze imie,
   "Profil i kontakt" jako pigulka ze zlota strzalka. Film i kremowa nakladka zniknely - tlo biale. */
html body .zespol-film{display:none !important;}
html body .zespol::before{display:none !important;}
html body .zespol-head h2 .tz-zl{color:var(--gold-dark);}
html body .zespol-grid{gap:clamp(18px,2.4vw,32px);}
html body .zk{background:#FFFFFF; border:1px solid rgba(184,145,47,.5) !important; border-radius:28px !important; padding:14px 14px 26px; gap:22px;
  box-shadow:0 1px 2px rgba(20,42,37,.05), 0 18px 40px -26px rgba(20,42,37,.35); overflow:hidden;
  transition:transform .45s var(--tz-ease), box-shadow .45s var(--tz-ease), border-color .3s ease;}
html body .zk-foto{border-radius:20px; overflow:hidden; background:linear-gradient(180deg, #F3F6F4 0%, #E6EDE9 100%);}
/* portret nizej (88 % wysokosci pola, przyklejony do dolu), luk nizej - nad glowa zostaje
   powietrze, glowa dalej wychodzi nad luk, ale nie dotyka gornej krawedzi pola karty
   (uwaga Pawla 10.11.2026: glowy byly uciete gora przez kafelki) */
html body .zk-luk{left:12%; right:12%; top:26%;}
html body .zk-foto img{height:calc(88% + 10px) !important; top:auto !important; bottom:0 !important; /* +10 px: glowy wyzej (uwaga Pawla) */}
/* ciecie po ksztalcie luku (teczka.js) - zdjecie nie moze sie ruszac wzgledem luku, karta podnosi sie cala */
html body .zk:hover .zk-foto img{transform:translateX(-50%) !important;}
html body .zk-tx{padding:0 12px; gap:6px;}
html body .zk-n{font-size:clamp(1.6rem, 2vw, 1.9rem); letter-spacing:-.01em;}
html body .zk-r{color:var(--gold-dark); letter-spacing:.16em;}
html body .zk-s{color:var(--ink-muted, #4E6A62);}
html body .zk-more{margin-top:14px; border:1px solid rgba(184,145,47,.6); border-radius:999px; padding:7px 7px 7px 18px; gap:12px; color:var(--navy);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;}
/* ta sama gruba strzalka co w przycisku hero (znak "→" byl cienki i slabo widoczny) */
html body .zk-more i{display:inline-block; width:32px; height:32px; border-radius:50%; font-size:0; color:transparent !important;
  background:var(--gold-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142A25' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;}
html body .zespol-dalej span{animation:none !important;}
@media (hover:hover){
  html body .zk:hover{transform:translateY(-6px); border-color:var(--gold) !important; box-shadow:0 1px 2px rgba(20,42,37,.05), 0 30px 60px -30px rgba(20,42,37,.45);}
  html body .zk:hover .zk-more{background:var(--navy); border-color:var(--navy); color:#FFFFFF;}
}
html body .zk:focus-visible{outline:3px solid var(--gold); outline-offset:4px;}

/* quiz w jezyku teczki */
html body .qp-karta{border-radius:28px; border:0; box-shadow:0 1px 2px rgba(20,42,37,.05), 0 24px 60px -30px rgba(20,42,37,.35);}
html body .qp-opt{border-radius:16px; padding-left:20px;}
html body .qp-wyslij{min-height:56px;}
/* Kwalifikator 5 pytan (landing obywatelstwa, obywatelstwo dla cudzoziemcow): od 1100 px jak quiz
   strony glownej - tekst po lewej, karta po prawej, gory rowno (10.11.2026, uwaga Pawla: prawa
   strona sekcji stala pusta, tekst i karta nie byly do siebie wyrownane). */
@media (min-width:1100px){
  html body .quiz-section > .shell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,5vw,80px); align-items:start;}
  html body .quiz-section > .shell > .section-heading{margin:0 !important; max-width:none;}
  html body .quiz-section > .shell > .section-heading h2{font-size:clamp(2.3rem,3.2vw,2.9rem) !important; line-height:1.08;}
  html body .quiz-section > .shell > .quiz{max-width:none; margin:0;}
}
/* ponizej 1100 px jedna kolumna: karta na pelna szerokosc tresci, bez pustego pasa po prawej */
@media (max-width:1099px){ html body .quiz-section > .shell > .quiz{max-width:none;} }

/* pasek CTA na telefonie: plywajaca pigulka; teczka.js chowa go przy quizie i formularzu */
html body .sticky-cta{left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom, 0px)); padding:0; background:transparent; box-shadow:none;
  transition:transform .35s var(--tz-ease), opacity .35s ease;}
html body .sticky-cta .btn{border-radius:999px !important; min-height:50px; background:var(--gold-light) !important; border-color:var(--gold-light) !important;
  color:var(--navy-deep) !important; box-shadow:0 14px 34px -12px rgba(20,42,37,.55);}
html body .sticky-cta.tz-schowaj{transform:translateY(140%) !important; opacity:0; pointer-events:none;}

/* =================== PODSTRONY =================== */
/* hero uslugi (ciemne) w ramce, jak hero strony glownej */
html body .service-hero{margin:var(--tz-m); border-radius:var(--tz-r); overflow:hidden;}
html body :is(.service-hero, .article-hero) h1{letter-spacing:-.015em;}
html body .hero-aside :is(img, figure, .hero-image){border-radius:calc(var(--tz-card-r) - 4px);}

/* kolorowe pasy jako kartki w ramce (bez nachodzenia - poradnik nie ma dolnego odstepu) */
html body :is(.knowledge-section, .pricing-section, .faq-section, .why-section, .steps-section, .quiz-section){
  margin-inline:var(--tz-m); margin-block:var(--tz-m); border-radius:var(--tz-r); position:relative;}
/* jasne pasy: biale jak reszta strony, odciete cienka zlota linia (polecenie Pawla 10.11.2026) */
html body :is(.knowledge-section, .pricing-section, .faq-section, .steps-section, .quiz-section){
  background:#FFFFFF !important; border:1px solid rgba(184,145,47,.4);}

/* hero poradnikow, artykulow, kalkulatorow, slownika i polityki: zielona ramka jak hero uslugi
   (bylo biale z kreska u gory - wygladalo jak przed zmiana szaty) */
html body .article-hero{margin:var(--tz-m); border-radius:var(--tz-r); background:var(--navy-deep) !important; color:#FFFFFF !important;
  border-bottom:0 !important; padding-block:clamp(48px,6vw,84px) clamp(52px,6vw,80px);}
html body .article-hero::before{display:none !important;}
html body .article-hero::after{background-color:#FFFFFF !important; opacity:.06 !important;}
html body .article-hero h1{color:#FFFFFF !important;}
html body .article-hero .article-lede{color:rgba(255,255,255,.82) !important;}
html body .article-hero .back-link{color:rgba(255,255,255,.7) !important;}
@media (hover:hover){ html body .article-hero .back-link:hover{color:var(--gold-light) !important;} }
html body .article-hero .article-meta{border-top-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.7) !important;}
html body .article-hero .article-meta b{color:var(--gold-light) !important;}
html body .article-hero .article-byline{color:rgba(255,255,255,.7) !important;}
html body .article-hero .article-byline b{color:#FFFFFF !important;}
html body .article-hero a:not(.button):not(.back-link){color:var(--gold-light);}
html body .article-hero .eyebrow{background:rgba(255,255,255,.09) !important; color:var(--gold-light) !important;}
html body :is(.contact, .article-cta):not(.hero-wspolnicy ~ .contact){margin:var(--tz-m) var(--tz-m) 0; border-radius:var(--tz-r) var(--tz-r) 0 0;}
html body :is(.contact, .article-cta) + footer, html body :is(.contact, .article-cta) + * + footer{margin-top:0;}

/* karty */
html body :is(.article-card, .aside-card, .author-card, .pakiet, .price-cell, .guide-toc, .key-points, .consult-card, .quiz-card){border-radius:var(--tz-card-r) !important;}
html body :is(.guide-example, .article-note){border-radius:calc(var(--tz-card-r) - 6px) !important;}
/* karty poradnikow i cennika: zloty obrys jak kafelki uslug */
html body :is(.article-card, .pakiet, .price-cell){border:1px solid rgba(184,145,47,.5) !important;}
html body .guides-group-head{border-bottom-color:rgba(184,145,47,.4) !important;}
html body .article-card{box-shadow:var(--tz-shadow-card); transition:transform .35s var(--tz-ease), box-shadow .35s var(--tz-ease);}
/* bez wysuwanej kreski nad karta (service-pages.css, .article-card::before) - przy zaokraglonej
   karcie ze zlotym obrysem wygladala jak doklejona linia (uwaga Pawla 10.11.2026);
   po najechaniu caly obrys robi sie pelnym zlotem */
html body .article-card::before{display:none !important;}
@media (hover:hover){ html body .article-card:hover, html body .article-card:focus-within{transform:translateY(-4px); box-shadow:var(--tz-shadow-lift); border-color:var(--gold) !important;} }
html body .aside-card{box-shadow:var(--tz-shadow-card);}
html body .pakiet-wstega{border-radius:999px;}

/* formularze na zieleni */
/* FORMULARZ KONTAKTU (10.11.2026, uwaga Pawla: "wyglada slabo i jest niedopracowany").
   Jedna karta na zieleni: zlota cienka ramka, naglowek oddzielony linia, etykiety zwyklym
   zdaniem zamiast szarych wersalikow, pola wyzsze i jasniejsze, zloty fokus z poswiata,
   wlasne pole zgody, wylaczony przycisk wyglada na wylaczony (a nie na brudne zloto).
   Uwaga: tlo pol tylko background-color - skrot "background" zdejmowal strzalke z listy wyboru. */
html body .consult-card{background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.035) 100%) !important;
  border:1px solid rgba(227,200,120,.26) !important; padding:clamp(24px,3.2vw,40px) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px -30px rgba(0,0,0,.55) !important;}
html body .consult-card:focus-within{transform:none !important; border-color:rgba(227,200,120,.45) !important;}
html body .consult-card > h3{font-size:clamp(1.55rem,2vw,1.9rem) !important; line-height:1.15; margin:0 !important; color:#FFFFFF !important;}
html body .consult-card > .step-hint{margin:8px 0 26px !important; padding-bottom:22px; border-bottom:1px solid rgba(227,200,120,.22);
  font-size:.95rem !important; color:rgba(250,248,243,.7) !important;}
html body .consult-card .field-row{gap:16px !important;}
html body .consult-card .field{margin-bottom:18px !important;}
html body .consult-card .field > label:not(.consent-label){font-size:.9rem !important; font-weight:600; letter-spacing:.01em !important; text-transform:none !important;
  color:rgba(250,248,243,.86) !important; margin-bottom:8px !important;}
html body .consult-card :is(input:not([type=checkbox]), select, textarea){min-height:52px; padding:14px 16px !important; border-radius:14px !important;
  background-color:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.16) !important; color:#FFFFFF !important;
  font-size:1rem !important; transform:none !important; transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease !important;}
html body .consult-card :is(input:not([type=checkbox]), select){height:54px; min-height:54px; box-sizing:border-box;}
html body .consult-card select{background-color:#2A3F39 !important; padding-right:44px !important; background-position:right 16px center !important;}
html body .consult-card textarea{min-height:150px; resize:vertical; line-height:1.55;}
html body .consult-card :is(input, textarea)::placeholder{color:rgba(250,248,243,.42) !important;}
@media (hover:hover){ html body .consult-card :is(input:not([type=checkbox]), select, textarea):hover{border-color:rgba(227,200,120,.4) !important;} }
html body .consult-card :is(input:not([type=checkbox]), select, textarea):focus{outline:none !important; border-color:var(--gold-light) !important;
  background-color:rgba(255,255,255,.1) !important; box-shadow:0 0 0 4px rgba(227,200,120,.16) !important;}
html body .consult-card select:focus{background-color:#2F4640 !important;}
html body .consult-card input:-webkit-autofill{-webkit-text-fill-color:#FFFFFF; -webkit-box-shadow:0 0 0 40px #2A3F39 inset !important; caret-color:#FFFFFF;}
html body .consult-card .char-hint{margin-top:8px !important; font-size:.8rem !important; color:rgba(250,248,243,.5) !important; font-variant-numeric:tabular-nums;}
/* zgoda: wlasne pole, zlote po zaznaczeniu */
html body .consult-card .consent-label{gap:12px !important; font-size:.9rem !important; line-height:1.5 !important; color:rgba(250,248,243,.78) !important;}
html body .consult-card .consent-label input{appearance:none; -webkit-appearance:none; width:22px !important; height:22px !important; min-height:22px; margin:0 !important; flex:none;
  border:1.5px solid rgba(227,200,120,.7); border-radius:7px; background:rgba(255,255,255,.06) center/14px no-repeat; cursor:pointer; transition:background-color .2s ease, border-color .2s ease;}
html body .consult-card .consent-label input:checked{background-color:var(--gold-light); border-color:var(--gold-light);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142A25' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");}
html body .consult-card .consent-label input:focus-visible{outline:3px solid rgba(227,200,120,.5); outline-offset:2px;}
html body .consult-card .captcha-wrap{margin:6px 0 20px !important;}
/* przycisk wyslania: wylaczony = obrys i przygaszone kolo, nie brudne zloto */
/* 11.2026 (uwaga Pawla): napis byl za maly wzgledem szerokiego przycisku - wiekszy, grubszy,
   a napis ze strzalka stoja razem na srodku zamiast rozjechanych do krawedzi */
html body .consult-card #submitButton{min-height:64px; width:100%; justify-content:center !important; gap:18px !important;
  padding:10px 10px 10px 30px !important; font-size:clamp(1.08rem,1.25vw,1.2rem) !important; font-weight:700 !important; letter-spacing:.015em !important;}
html body .consult-card #submitButton::after{width:44px !important; height:44px !important; background-size:20px !important;}
html body .consult-card #submitButton:disabled{opacity:1 !important; background:rgba(227,200,120,.1) !important; color:rgba(243,228,184,.72) !important;
  border:1px solid rgba(227,200,120,.35) !important; box-shadow:none !important; cursor:not-allowed;}
html body .consult-card #submitButton:disabled::after{opacity:.45 !important; transform:none !important;}
html body .consult-card .form-note{margin-top:18px !important; padding-top:16px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.85rem !important; line-height:1.5; color:rgba(250,248,243,.66) !important;}
html body :is(.mobile-cta) :is(.button, .btn, a){border-radius:999px !important;}

/* =================== RUCH (klasy nadaje teczka.js) =================== */
html.tz-ruch body .tz-in{opacity:0; transform:translateY(24px); filter:blur(8px);}
html.tz-ruch body .tz-in.tz-on{opacity:1; transform:none; filter:none;
  transition:opacity .9s var(--tz-ease) var(--tz-d,0s), transform .9s var(--tz-ease) var(--tz-d,0s), filter .9s var(--tz-ease) var(--tz-d,0s);}
html.tz-ruch body .tz-kartka{transform:translateY(40px);}
html.tz-ruch body .tz-kartka.tz-on{transform:none; transition:transform .9s var(--tz-ease);}
@media (prefers-reduced-motion:reduce){
  html.tz-ruch body :is(.tz-in, .tz-kartka){opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;}
}

/* =====================================================================
   PRZYCISKI NA CALYM SERWISIE (polecenie Pawla 10.11.2026: "dopasuj do obecnego ukladu,
   bardziej widoczne") - wzor: przycisk hero. Pigulka, tekst 16 px / 600, zlote kolo z gruba
   strzalka. Na jasnym tle zielony, na zielonym tle zloty. Strzalki wpisane w tekst (→ ↓ ↗)
   usuwa teczka.js (przyciski()); "↓" zostaje strzalka w dol (data-tz-dol).
   ===================================================================== */
html body :is(.button, .btn-primary, .btn-navy, .qp-wyslij){display:inline-flex !important; align-items:center !important; justify-content:center;
  gap:14px !important; min-height:54px; padding:8px 8px 8px 26px !important; border-radius:999px !important; border:0 !important;
  background:var(--navy-deep) !important; color:#FFFFFF !important; font:600 1rem/1.2 var(--font-body) !important;
  letter-spacing:.01em !important; text-transform:none !important; text-decoration:none !important; white-space:normal; text-align:left;
  box-shadow:0 12px 26px -14px rgba(20,42,37,.55) !important; position:relative;
  transition:background-color .25s ease, color .25s ease, transform .2s ease, box-shadow .3s ease !important;}
html body :is(.button, .btn-primary, .btn-navy, .qp-wyslij)::after{content:"" !important; display:block !important; position:static !important; inset:auto !important;
  flex:none; width:38px; height:38px; border-radius:50% !important; border:0 !important; animation:none !important; opacity:1 !important; transform:none;
  background:var(--gold-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142A25' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/18px no-repeat !important;
  transition:transform .3s var(--tz-ease);}
html body :is(.button, .btn-primary, .btn-navy)[data-tz-dol]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23142A25' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") !important;}
@media (hover:hover){
  html body :is(.button, .btn-primary, .btn-navy, .qp-wyslij):hover{background:var(--navy) !important; color:#FFFFFF !important;}
  html body :is(.button, .btn-primary, .btn-navy, .qp-wyslij):hover::after{transform:translateX(3px);}
  html body :is(.button, .btn-primary, .btn-navy)[data-tz-dol]:hover::after{transform:translateY(3px);}
  /* strzalka biala po najechaniu (polecenie Pawla 10.11.2026). Na jasnozlotym kole biel ginie (1,6:1),
     wiec kolo ciemnieje do --gold (#B8912F, ok. 3:1). W ciemnym kontekscie kolo zostaje zielone. */
  html body :is(.button, .btn-primary, .btn-navy, .qp-wyslij):hover::after,
  html body .hero.hero-wspolnicy .hs-cta:hover > span[aria-hidden],
  html body .zk:hover .zk-more i{background-color:var(--gold) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;}
  html body :is(.button, .btn-primary, .btn-navy)[data-tz-dol]:hover::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") !important;}
}
html body :is(.button, .btn-primary, .btn-navy, .qp-wyslij):focus-visible{outline:3px solid var(--gold) !important; outline-offset:3px;}
html body :is(.button, .btn-primary, .qp-wyslij):disabled{opacity:.6; cursor:not-allowed;}
html body .btn-block{width:100%; justify-content:space-between !important; padding-left:28px !important;}
html body .mobile-cta{justify-content:space-between !important;}
/* przycisk w menu: mniejszy */
html body header .btn-navy{min-height:44px; padding:5px 5px 5px 20px !important; gap:12px !important; font-size:.95rem !important; box-shadow:none !important;}
html body header .btn-navy::after{width:32px; height:32px; background-size:15px !important;}
html body header .btn-navy{white-space:nowrap;}
/* ponizej 680 px przycisk z naglowka ustepuje paskowi CTA na dole (jak w home.css i service-pages.css) */
@media (max-width:680px){ html body .nav-cta > .btn{display:none !important;} }
/* waska karta boczna: przycisk na cala szerokosc, tekst nie lamie sie obok kola */
html body .aside-card :is(.button, .btn-primary){width:100%; justify-content:space-between !important; padding-left:22px !important; font-size:.95rem !important;}
/* na zielonym tle: zloty przycisk, zielone kolo ze zlota strzalka */
html body :is(.service-hero, .article-hero, .article-cta, .contact, .why-section, .consult-card, .hub-hero) :is(.button, .btn-primary),
html body:has(.article-hero) .aside-card :is(.button, .btn-primary){background:var(--gold-light) !important; color:var(--navy-deep) !important;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.55) !important;}
html body :is(.service-hero, .article-hero, .article-cta, .contact, .why-section, .consult-card, .hub-hero) :is(.button, .btn-primary)::after,
html body:has(.article-hero) .aside-card :is(.button, .btn-primary)::after{background-color:var(--navy-deep) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;}
html body :is(.service-hero, .article-hero, .article-cta, .contact, .why-section, .consult-card, .hub-hero) :is(.button, .btn-primary)[data-tz-dol]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") !important;}
@media (hover:hover){
  html body :is(.service-hero, .article-hero, .article-cta, .contact, .why-section, .consult-card, .hub-hero) :is(.button, .btn-primary):hover,
  html body:has(.article-hero) .aside-card :is(.button, .btn-primary):hover{background:var(--gold-pale, #F3E4B8) !important; color:var(--navy-deep) !important;}
  /* biala strzalka na zielonym kole */
  html body :is(.service-hero, .article-hero, .article-cta, .contact, .why-section, .consult-card, .hub-hero) :is(.button, .btn-primary):hover::after,
  html body:has(.article-hero) .aside-card :is(.button, .btn-primary):hover::after,
  html body .sticky-cta .btn:hover::after{background-color:var(--navy-deep) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;}
  html body :is(.service-hero, .article-hero, .article-cta, .contact, .why-section, .consult-card, .hub-hero) :is(.button, .btn-primary)[data-tz-dol]:hover::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") !important;}
}
/* pomocnicze (Wstecz, Przeczytaj poradnik) i przycisk zgody w polityce: obrys, bez kola */
html body .button.button-ghost, html body button.btn-navy{background:transparent !important; color:var(--navy) !important;
  border:1.5px solid rgba(184,145,47,.75) !important; box-shadow:none !important; padding:10px 24px !important; min-height:48px;}
html body .button.button-ghost::after, html body button.btn-navy::after{display:none !important;}
html body :is(.article-hero, .service-hero, .contact) button.btn-navy{color:#FFFFFF !important; border-color:var(--gold-light) !important;}
@media (hover:hover){ html body .button.button-ghost:hover, html body button.btn-navy:hover{background:rgba(184,145,47,.1) !important;} }
/* wyjatki z wlasnym wygladem: hero strony glownej (kolo w spanie), pasek CTA na telefonie */
html body .hero.hero-wspolnicy .hs-cta::after{display:none !important;}
html body .sticky-cta .btn{justify-content:space-between !important; padding-left:24px !important;}
html body .sticky-cta .btn::after{background-color:var(--navy-deep) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;}
/* przyciski w panelu kafelka uslug: wieksze, wyrazniejsze */
html body .sv-btns a{min-height:46px; font-size:.95rem; padding:10px 20px;}

/* =====================================================================
   CENNIK PAKIETOW OBYWATELSTWA (polecenie Pawla 10.11.2026: "niewidoczny") - uklad i dane
   bez zmian. Pakiet kompleksowy jako zielona karta, podstawowy jako biala ze zlotym obrysem,
   kwoty duze cyframi wyrownanymi (nautyczne cyfry Cormoranta czytaly sie jak "I 500").
   ===================================================================== */
html body .pricing-pakiety{padding-block:clamp(56px,7vw,96px) !important;}
html body .pakiety-naglowek{font-size:clamp(1.9rem,3.4vw,2.7rem) !important; line-height:1.1 !important; letter-spacing:-.015em; color:var(--navy-deep);
  margin:22px 0 clamp(28px,4vw,44px) !important; max-width:20ch;}
html body .pakiety{gap:clamp(18px,2.4vw,28px) !important; align-items:stretch !important;}
html body .pakiet{border:1px solid rgba(184,145,47,.55) !important; border-radius:28px !important; padding:clamp(28px,3vw,40px) !important;
  box-shadow:0 1px 2px rgba(20,42,37,.05), 0 22px 50px -30px rgba(20,42,37,.35) !important; background:#FFFFFF;}
html body .pakiet h4{font-size:clamp(1.5rem,2.2vw,1.85rem) !important; font-weight:600 !important; color:var(--navy-deep); letter-spacing:-.01em;}
html body .pakiet-cena{margin:18px 0 0 !important; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
html body .pakiet-cena b{font-family:var(--font-display); font-weight:600 !important; font-size:clamp(3rem,5.4vw,4.4rem) !important; line-height:1 !important;
  font-variant-numeric:lining-nums tabular-nums !important; font-feature-settings:"lnum" 1, "tnum" 1; letter-spacing:-.02em; color:var(--navy-deep);}
html body .pakiet-waluta{font:600 1rem/1 var(--font-body) !important; letter-spacing:.12em; color:var(--gold-dark) !important;}
html body .pakiet-od{font-size:.85rem !important;}
html body .pakiet-dla{font-size:1rem !important; line-height:1.6; margin-top:16px !important;}
html body .pakiet-zakres{margin-top:26px !important; padding-top:22px !important; border-top:1px solid rgba(184,145,47,.35);}
html body .pakiet-zakres li{font-size:1rem !important; margin-bottom:13px !important; padding-left:32px !important;}
html body .pakiet-zakres li::before{left:0 !important; top:.15em !important; width:20px !important; height:20px !important; border:0 !important; transform:none !important; border-radius:50%;
  background:rgba(184,145,47,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5D1C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat;}
html body .pakiet-poza{border-radius:16px !important; background:#F7F5EF !important; border:1px solid rgba(184,145,47,.35) !important; padding:18px 20px !important;}
/* pakiet kompleksowy: zielona karta */
html body .pakiet.pakiet-glowny{background:var(--navy-deep) !important; border-color:var(--gold) !important; color:rgba(255,255,255,.9);
  box-shadow:0 0 0 5px rgba(227,200,120,.18), 0 30px 70px -34px rgba(20,42,37,.7) !important;}
html body .pakiet-glowny h4, html body .pakiet-glowny .pakiet-cena b{color:#FFFFFF !important;}
html body .pakiet-glowny :is(.pakiet-waluta, .pakiet-od){color:var(--gold-light) !important;}
html body .pakiet-glowny .pakiet-dla{color:rgba(255,255,255,.8) !important;}
html body .pakiet-glowny .pakiet-zakres{border-top-color:rgba(227,200,120,.3);}
html body .pakiet-glowny .pakiet-zakres li{color:rgba(255,255,255,.92);}
html body .pakiet-glowny .pakiet-zakres li::before{background-color:rgba(227,200,120,.2) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C878' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") !important;}
html body .pakiet-glowny .pakiet-wliczone{border-radius:16px !important; background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(227,200,120,.35) !important; padding:18px 20px !important;}
html body .pakiet-glowny .pakiet-wliczone p{color:#FFFFFF;}
html body .pakiet-glowny .pakiet-nota{color:rgba(255,255,255,.66) !important;}
html body .pakiet-wstega{background:var(--gold-light) !important; color:var(--navy-deep) !important; border-radius:999px !important; padding:6px 14px !important;
  font-size:.7rem !important; top:-14px !important; box-shadow:0 6px 16px -6px rgba(0,0,0,.35);}
html body .pakiety-zastrzezenie{margin-top:26px !important; font-size:.88rem !important; color:var(--ink-muted, #4E6A62) !important; max-width:70ch;}

/* Naglowek sekcji kontaktu na podstronach ("Kontakt z kancelaria w Twojej sprawie") - bialy na zieleni (polecenie Pawla 10.11.2026) */
html body .contact .section-head h2{color:#FFFFFF !important;}

/* Okruszki: cel dotyku min. 24 px wysokosci (WCAG 2.2), bez zmiany wygladu */
html body .breadcrumbs a{display:inline-flex; align-items:center; min-height:24px; padding-block:3px;}

/* Stary pasek .mobile-cta (10.11.2026, polecenie Pawla: ukryty wszedzie). Regula .button wyzej ma
   display i position z !important, wiec pasek nie byl przyklejony, tylko lezal miedzy ostatnia
   sekcja a stopka i powtarzal przycisk z sekcji wyzej. Pasek #stickyCta strony glownej to inny element. */
html body .mobile-cta{display:none !important;}
@media(max-width:680px){html body:not(:has(#stickyCta)){padding-bottom:0 !important;}}

/* ===== Ramki tresci w stylu Teczki (10.11.2026, polecenie Pawla) =====
   Stare ramki z jednostronna kreska (border-left albo pasek ::before) i ostrymi rogami
   zostaly z poprzedniej szaty. Teraz: zaokraglone karty z delikatna obwodka dookola. */
html body .key-points::before{display:none !important;}
html body .hero-aside{border-left:0 !important;}
html body .price-fee{border-left:0 !important; padding-left:0 !important;}
html body :is(.term, .hero-remote, .pakiet-poza, .pakiet-wliczone, .kalk-wynik, .kalk-ost, .kalk-konsultacja, .pi-verdict, .pi-done, .article-sources, .fee-scroll, .kalk details){border-radius:16px !important;}
html body .term{border:1px solid rgba(184,145,47,.26) !important;}
html body .hero-remote{border:1px solid rgba(227,200,120,.22) !important;}
html body .pakiet-poza{border:1px solid rgba(184,145,47,.3) !important;}
html body .pakiet-wliczone{border:1px solid rgba(63,122,91,.26) !important;}
html body .kalk-wynik{border:1px solid rgba(63,122,91,.3) !important;}
html body .kalk-wynik.uw{border-color:rgba(184,145,47,.42) !important;}
html body .kalk-wynik.zle{border-color:rgba(156,43,58,.32) !important;}
html body .kalk-ost{border:1px solid rgba(184,145,47,.36) !important;}
html body .pi-verdict{border:1px solid rgba(184,145,47,.3) !important;}
html body .pi-done{border:1px solid rgba(227,200,120,.22) !important;}
html body .article-sources{border:1px solid var(--pr-linia, #E3E0D8) !important;}
html body .kalk{border-radius:var(--tz-card-r) !important; overflow:hidden;}
html body .qr-block .qr{border-radius:14px;}