/* =========================================================================
   CERTOP - main.css

   ★ PALETA (decyzja Piotra 2026-08-03, pełne uzasadnienie w CERTOP.md):
     ACHROMAT + ZIELONE CTA. Strona jest czarno-biała (a właściwie grafitowo-
     papierowa), a kolor niosą WYŁĄCZNIE dwie rzeczy: skala A-G i przyciski akcji.
     - grafit #333 wzięty z logo (pomiar pikseli napisu „ertop" dał #404040),
     - zieleń CTA #00a651 to DOKŁADNIE segment klasy A ze skali - przycisk mówi
       „prowadzimy cię do klasy A". Zmieniając odcień CTA, zmień też --kl-a.
     Pomarańcz #F99335 odrzucony: to segment klasy E (wynik przeciętny), a w logo
     żaden segment nie dominuje - wybór tego koloru na kolor marki był arbitralny.

   ★ ZNAK MARKI: skala A-G na trzech poziomach - pełny pasek (sygnatura),
     skrót trzech segmentów przy nadtytułach (rytm), kolory kroków procesu G→A
     (znaczenie: klient przechodzi po łuku do gotowego dokumentu).
   ========================================================================= */

:root {
	/* --- marka --- */
	--ink:      #333333;   /* tekst i tła ciemnych sekcji - grafit z logo */
	--ink-2:    #5a5a5a;   /* tekst drugorzędny */
	--ink-3:    #767676;   /* najjaśniejszy szary spełniający AA na papierze */
	--paper:    #f7f7f6;
	--white:    #ffffff;
	--line:     #e4e4e4;
	--deep:     #333333;   /* tło sekcji ciemnych */
	--deep-2:   #3d3d3d;   /* stopka */

	/* --- akcent: zieleń wywiedziona z klasy A --- */
	/* ★ Przycisk ma BIAŁY napis (decyzja Piotra 2026-08-03), a biel na czystej
	   klasie A (#00a651) daje tylko 3,19:1 - poniżej progu 4,5:1, bo tekst
	   przycisku ma 14-17 px, czyli nie jest „dużym tekstem". Dlatego tło jest
	   przyciemnione do #00803e (5,05:1). Sama skala A-G zostaje nietknięta:
	   `--kl-a` to nadal standardowe #00a651. */
	--accent:   #00803e;   /* tło przycisków akcji - biały napis 5,05:1 */
	--accent-d: #00693a;   /* hover - ciemniejszy */
	--accent-t: #00693a;   /* akcent jako kolor tekstu na jasnym (6,5:1) */
	--btn-fg:   #ffffff;   /* napis na zielonym przycisku */
	--acc-dark: #4ed188;   /* akcent na ciemnym tle */
	--acc-dark-fg:#08281a;

	/* --- skala efektywności A-G --- */
	--kl-a:#00a651; --kl-b:#50b848; --kl-c:#bfd730;
	--kl-d:#ffd200; --kl-e:#f99335; --kl-f:#f37021; --kl-g:#ed1c24;

	--font: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
	--mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

	--step--1: clamp(.8rem, .77rem + .15vw, .875rem);
	--step-0:  clamp(1rem, .96rem + .2vw, 1.075rem);
	--step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
	--step-2:  clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
	--step-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
	--step-4:  clamp(2.1rem, 1.6rem + 2.5vw, 3.6rem);

	--container: 1180px;
	--r: 10px;
	--shadow: 0 18px 44px -28px rgba(20,20,20,.5);
	--shadow-sm: 0 3px 12px rgba(0,0,0,.06);
}

/* ------------------------------- baza -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0; font-family: var(--font); font-size: var(--step-0); line-height: 1.65;
	color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

/* ★ :where() zeruje wagę selektora. Bez tego `a` (0,0,1) bije klasy komponentów
   przy równej specyficzności i przyciski-linki dostają kolor dziedziczony -
   dokładnie ta pułapka zjadła CTA w ciemnej sekcji podczas prac nad makietą. */
:where(a) { color: var(--accent-t); text-decoration: none; }
:where(a):hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 800; line-height: 1.14; letter-spacing: -.025em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.35rem; }
li { margin-bottom: .4rem; }
:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 2px; border-radius: 4px; }

.certop-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.certop-skip { position: absolute; left: -9999px; }
.certop-skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 6px; }
.certop-ico { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -.2em; }

/* nadtytuł + ★ znak marki poziom 2: skrót łuku A-G */
.certop-eyebrow {
	font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent-t); font-weight: 600; display: inline-flex; align-items: center; gap: .6rem;
	margin: 0 0 .5rem;
}
.certop-eyebrow::before {
	content: ""; flex: none; width: 28px; height: 6px; border-radius: 2px;
	background: linear-gradient(90deg, var(--kl-a) 0 33.34%, var(--kl-c) 33.34% 66.67%, var(--kl-f) 66.67% 100%);
}
.certop-sec--dark .certop-eyebrow { color: var(--acc-dark); }

/* ------------------------------ przyciski ----------------------------- */
.certop-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font: inherit; font-weight: 700; text-decoration: none !important; cursor: pointer;
	padding: .85rem 1.5rem; border-radius: var(--r); border: 2px solid transparent;
	transition: background .15s ease, color .15s ease, transform .15s ease;
	white-space: nowrap; /* bez tego „Zamów online" łamie się na dwie linie i przycisk puchnie do 88 px */
}
.certop-btn--main { background: var(--accent); color: var(--btn-fg); }
.certop-btn--main:hover { background: var(--accent-d); color: #fff; transform: translateY(-1px); }
/* pigułka miasta „Olsztyn" ma to samo tło co przycisk, więc też biały napis */
.certop-btn--ghost { border-color: var(--ink); color: var(--ink); background: none; }
.certop-btn--ghost:hover { background: var(--ink); color: #fff; }
.certop-btn--light { background: var(--acc-dark); color: var(--acc-dark-fg); }
.certop-btn--light:hover { background: #fff; color: var(--ink); }
.certop-btn--lg { font-size: 1.1rem; padding: 1rem 1.9rem; }

/* --------- ★ znak marki poziom 1: pełny pasek skali (sygnatura) -------- */
.certop-scale { display: flex; height: 5px; }
.certop-scale__seg { flex: 1; background: var(--seg); font-size: 0; }
.certop-scale--lg .certop-scale__seg {
	height: 22px; font-size: .72rem; font-weight: 700; color: rgba(0,0,0,.6);
	display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; margin-right: 3px;
}
.certop-scale__seg.is-active { box-shadow: 0 0 0 2px var(--ink); }

/* -------------------------------- header ------------------------------ */
.certop-topbar { background: var(--deep); color: #d9d0c7; font-size: var(--step--1); }
.certop-topbar__in { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; padding-block: .5rem; }
.certop-topbar strong { color: #fff; font-weight: 600; }
.certop-topbar__sp { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.certop-topbar :where(a) { color: inherit; }
.certop-topbar :where(a):hover { color: var(--acc-dark); text-decoration: none; }

/* ★★ NAGŁÓWEK NIE JEST PRZYKLEJONY (Piotr 2026-08-05, zmiana wcześniejszej decyzji).
   Do 2026-08-05 stał tu `position: sticky` - miał trzymać przycisk zamówienia w zasięgu
   na stronie o wysokości 11 600 px. Kosztem było 88 px, czyli ~10 % ekranu, zabrane
   treści przez cały czas czytania. Zostaje `static`; do zamawiania prowadzą CTA
   rozstawione w sekcjach i finałowe CTA na dole.
   ⚠ Reguła `body.certop-zamowienie .certop-header { position: static }` (blok formularza)
   jest teraz nadmiarowa, ale nieszkodliwa - zostawiona, bo dokumentuje własną decyzję
   o stronie zamówienia i nie zaszkodzi, gdyby lepki nagłówek kiedyś wrócił. */
.certop-header { position: static; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }

/* ★ Oddech nad kotwicą. Wartość była liczona jako wysokość PRZYKLEJONEGO nagłówka
   (88 px) + zapas; po zdjęciu `sticky` (2026-08-05) nic już nie zasłania celu, więc
   zostaje sam oddech - bez niego nagłówek sekcji przykleja się do górnej krawędzi okna.
   Reguła celuje w atrybut, więc każda nowa kotwica dostaje go automatycznie. */
[id] { scroll-margin-top: 2rem; }
.certop-header__inner { display: flex; align-items: center; gap: 1.25rem; padding-block: .8rem; }
.certop-header__brand img, .custom-logo { max-height: 64px; width: auto; }
.certop-header__title { font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.certop-header__cta { margin-left: auto; }
/* Przycisk w nagłówku mniejszy niż w treści - ma być wejściem, nie dominantą. */
.certop-header__cta .certop-btn { padding: .6rem 1.1rem; font-size: .9rem; }

/* menu: dwa poziomy, długie tytuły zawijane */
.certop-nav { margin-left: auto; }
.certop-nav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.certop-nav__list li { position: relative; margin: 0; }
/* ★ Pozycje pierwszego poziomu w JEDNEJ linii (decyzja Piotra 2026-08-03).
   Wariant z łamaniem na dwie linie był próbowany i odrzucony - mieszanka pozycji
   jedno- i dwuwierszowych czytała się jak rozbity układ.
   `nowrap` jest konieczny: flex ściska elementy do szerokości, przy której tekst
   musiałby się zawinąć, nawet gdy w kontenerze jest jeszcze wolne miejsce.
   Podmenu zawija się normalnie - tam pozycje bywają długie i mają własną kolumnę. */
.certop-nav__list > li > a { white-space: nowrap; }
.certop-nav__list a {
	display: block; padding: .5rem .55rem; color: var(--ink); font-weight: 600; font-size: .88rem;
	border-bottom: 2px solid transparent; line-height: 1.3;
}
.certop-nav__list a:hover { text-decoration: none; color: var(--accent-t); border-bottom-color: var(--accent); }
.certop-nav__list .current-menu-item > a, .certop-nav__list .current-menu-parent > a { color: var(--accent-t); }
.certop-nav__list .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 290px; background: #fff;
	border: 1px solid var(--line); box-shadow: var(--shadow); list-style: none; margin: 0; padding: .35rem;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s; z-index: 10; border-radius: 0 0 var(--r) var(--r);
}
.certop-nav__list .menu-item-has-children:hover > .sub-menu,
.certop-nav__list .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.certop-nav__list .sub-menu a { padding: .55rem .8rem; border-bottom: 0; border-radius: 6px; white-space: normal; }
.certop-nav__list .sub-menu a:hover { background: var(--paper); }
.certop-nav__list .menu-item-has-children > a::after {
	content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: .55;
}
.certop-navtoggle {
	display: none; margin-left: auto; width: 46px; height: 42px; background: none; border: 1px solid var(--line);
	border-radius: 6px; cursor: pointer; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
}
.certop-navtoggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* --------------------------------- hero ------------------------------- */
.certop-hero { background: var(--paper); border-bottom: 1px solid var(--line); }
.certop-hero__in {
	display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
	gap: clamp(2rem,5vw,4rem); align-items: center; padding-block: clamp(2.5rem,5vw,4.25rem);
}
.certop-hero h1 { margin-block: .6rem .9rem; }
.certop-hero h1 em { font-style: normal; color: var(--accent-t); }
.certop-hero__lead { font-size: var(--step-1); color: var(--ink-2); max-width: 36ch; }
.certop-hero__cta { margin-top: 1.6rem; }
.certop-hero__proof {
	display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.75rem 0 0; padding-top: 1.4rem;
	border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-2); list-style: none;
}
.certop-hero__proof li { margin: 0; }
.certop-hero__proof b { color: var(--ink); font-weight: 700; }

/* podgląd prawdziwego dokumentu - pokazuje wprost to, co klient kupuje */
.certop-doc {
	position: relative; margin: 0; background: var(--white); border: 1px solid var(--line);
	border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow);
}
.certop-doc__tag {
	position: absolute; z-index: 2; top: .9rem; left: .9rem; background: var(--ink); color: #fff;
	font-family: var(--mono); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
	padding: .25rem .6rem; border-radius: 99px;
}
.certop-doc__img { position: relative; display: block; height: clamp(330px, 46vh, 470px); overflow: hidden; }
.certop-doc__img img { width: 100%; }
/* nakładka zamiast maski: działa wszędzie, brak wsparcia nie psuje układu */
.certop-doc__img::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 110px;
	background: linear-gradient(rgba(255,255,255,0), var(--white));
}
.certop-doc figcaption {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem;
	padding: .85rem 1.1rem; border-top: 1px solid var(--line);
	font-family: var(--mono); font-size: .74rem; color: var(--ink-2);
}
.certop-doc figcaption b { color: var(--ink); }

/* rozgałęźnik: przechwytuje klienta audytu tuż pod hero */
.certop-branch { background: var(--deep); color: #e9e2da; }
.certop-branch__in { display: flex; align-items: center; gap: .6rem 1.5rem; flex-wrap: wrap; padding-block: .95rem; font-size: .95rem; }
.certop-branch__ico { color: var(--acc-dark); width: 1.4rem; height: 1.4rem; }
.certop-branch p { margin: 0; }
.certop-branch b { color: #fff; }
.certop-branch :where(a) { margin-left: auto; font-weight: 700; color: var(--acc-dark); white-space: nowrap; }

/* ------------------------------- sekcje ------------------------------- */
.certop-sec { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.certop-sec--paper { background: var(--paper); }
.certop-sec--dark { background: var(--deep); color: #e9e2da; }
.certop-sec--dark h2, .certop-sec--dark h3 { color: #fff; }
.certop-sec__head { max-width: 62ch; margin-bottom: 2rem; }
.certop-sec__head h2 { margin-top: .4rem; }
.certop-sec__head p { color: var(--ink-2); margin-top: .7rem; font-size: var(--step-1); }
.certop-sec--dark .certop-sec__head p { color: #b8aca1; }
.certop-sec__head--center { margin-inline: auto; text-align: center; }
.certop-sec__head--center .certop-eyebrow { justify-content: center; }

/* ---------------------- karty typów nieruchomości --------------------- */
.certop-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.certop-type {
	display: flex; flex-direction: column; gap: .6rem; background: var(--white);
	border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.25rem 1.1rem;
	position: relative; color: var(--ink) !important; text-decoration: none !important;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.certop-type:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(20,20,20,.55); }
.certop-type__ico { width: 1.9rem; height: 1.9rem; color: var(--accent-t); }
.certop-type__n { font-weight: 700; font-size: var(--step-1); letter-spacing: -.02em; }
.certop-type__d { font-size: var(--step--1); color: var(--ink-2); }
.certop-type__p { margin-top: auto; padding-top: .7rem; display: flex; align-items: baseline; gap: .5rem; }
.certop-type__now { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.certop-type__old { font-size: .9rem; color: var(--ink-3); text-decoration: line-through; }
.certop-type__go { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--accent-t); }
.certop-type__tag {
	position: absolute; top: -9px; right: 12px; background: var(--ink); color: #fff;
	font-family: var(--mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
	padding: .15rem .5rem; border-radius: 99px;
}

/* opcje dodatkowe */
.certop-extras { margin-top: 1.75rem; border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.4rem; background: var(--paper); }
.certop-extras__t { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .85rem; }
.certop-extras ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .6rem 2rem; }
.certop-extras li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 0; }
.certop-extras li span { font-weight: 800; white-space: nowrap; }
.certop-extras li em { font-style: normal; color: var(--ink-2); font-size: .9rem; }
.certop-extras__n { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2); }
.certop-extras__n :where(a) { font-weight: 700; white-space: nowrap; }

/* ------------------- audyt + projektowana charakterystyka -------------- */
.certop-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.certop-svc {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: .85rem;
}
.certop-svc--lead { border-color: var(--ink); }
.certop-svc__ico { width: 2.1rem; height: 2.1rem; color: var(--accent-t); }
.certop-svc h3 { font-size: var(--step-2); margin: 0; }
.certop-svc__lead { color: var(--ink-2); margin: 0; }
.certop-svc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .95rem; }
.certop-svc li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; }
.certop-svc li::before { content: "\2713"; color: var(--accent-t); font-weight: 700; flex: none; }
.certop-svc__foot { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .9rem 1.25rem; flex-wrap: wrap; }
.certop-svc__t { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
/* zastrzeżenie zakresu usługi - ma być widoczne, nie schowane drobnym drukiem */
.certop-svc__note { margin: 0; padding: .7rem .9rem; background: var(--paper); border-left: 3px solid var(--ink-3); border-radius: 0 6px 6px 0; font-size: .88rem; color: var(--ink-2); }
.certop-svc__cta { margin-left: auto; }

/* ceny z Woo */
.certop-price { display: inline-flex; align-items: baseline; gap: .45rem; }
.certop-price__now { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.certop-price__old { font-size: .9rem; color: var(--ink-3); text-decoration: line-through; }
.certop-price--light .certop-price__now { color: #fff; }
.certop-price bdi { white-space: nowrap; }

/* -------------------- proces: ★ znak marki poziom 3 ------------------- */
.certop-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.certop-step { position: relative; padding-top: 2.5rem; margin: 0; }
.certop-step::before {
	counter-increment: s; content: counter(s, decimal-leading-zero);
	position: absolute; top: 0; left: 0; width: 100%;
	font-family: var(--mono); font-size: .85rem; font-weight: 700; color: var(--ink-2);
	border-top: 4px solid var(--line); padding-top: .5rem;
}
/* cztery kroki = cztery kolejne segmenty skali: klient idzie po łuku G → A */
.certop-step:nth-child(1)::before { border-top-color: var(--kl-g); }
.certop-step:nth-child(2)::before { border-top-color: var(--kl-e); }
.certop-step:nth-child(3)::before { border-top-color: var(--kl-c); }
.certop-step:nth-child(4)::before { border-top-color: var(--kl-a); }
.certop-step h3 { margin-bottom: .5rem; }
.certop-step p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.certop-step p + p { margin-top: .6rem; }
.certop-step__x { border-left: 2px solid var(--accent); padding-left: .7rem; font-size: .88rem !important; }
.certop-terms { margin: 2rem 0 0; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); font-size: .95rem; color: var(--ink-2); }
.certop-terms b { color: var(--ink); }

/* ---------------------------- dlaczego Certop ------------------------- */
.certop-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.75rem 2rem; }
/* Plakietka NAD nagłówkiem, nie obok. Przy układzie inline była wyśrodkowana
   w pionie wobec dwuwierszowego tytułu i wyglądała na przypadkowo wciśniętą. */
.certop-why h3 { font-size: var(--step-1); margin-bottom: .45rem; text-wrap: balance; }
.certop-why p { color: #b8aca1; font-size: .95rem; margin: 0; text-wrap: pretty; }
.certop-why__k {
	display: block; width: fit-content; margin-bottom: .5rem;
	font-family: var(--mono); font-size: .7rem; font-weight: 700; color: var(--acc-dark-fg);
	background: var(--acc-dark); border-radius: 4px; padding: .15rem .45rem; letter-spacing: .04em;
}

/* ------------------------- kiedy jest potrzebne ----------------------- */
.certop-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.certop-case {
	background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--accent);
	border-radius: 0 var(--r) var(--r) 0; padding: 1.2rem 1.3rem;
}
.certop-case h3 { margin-bottom: .4rem; }
/* `pretty` unika sierot na końcu akapitu; niełamliwe spacje w liczbach
   („5 000 zł", „2 dni") siedzą w treści front-page.php - CSS ich nie załatwi. */
.certop-case p { color: var(--ink-2); font-size: .95rem; text-wrap: pretty; }
.certop-case :where(a) { font-weight: 700; font-size: .9rem; display: inline-block; }

/* --------------------------------- o nas ------------------------------ */
/* Jedna kolumna - portrety przeniesione do kart osób, więc nie ma czego stawiać obok. */
.certop-about { max-width: 62rem; }
.certop-about h2 { font-size: var(--step-3); }
.certop-about p { color: var(--ink-2); }
.certop-about__q { margin: 1.25rem 0; padding-left: 1.1rem; border-left: 3px solid var(--accent); font-style: italic; }
.certop-about__q p { color: var(--ink); margin-bottom: .6rem; }
.certop-about__q footer { font-style: normal; font-weight: 700; font-size: .9rem; color: var(--ink-2); }
/* Osoby: twarz + nazwisko + weryfikowalny numer uprawnień. Bez listy kwalifikacji -
   pełne referencje idą na stronę Kontakt, tutaj wystarczy dowód, że dokument
   wystawi ktoś z wpisem do rejestru. */
.certop-people { list-style: none; padding: 0; margin: 1.5rem 0 .75rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.certop-people > li {
	margin: 0; padding: 1rem 1.15rem; background: var(--paper);
	border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0;
	display: flex; align-items: center; gap: 1rem;
}
.certop-people img {
	width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: top center;
	background: #fff; flex: none; border: 2px solid var(--white); box-shadow: var(--shadow-sm);
}
.certop-people > li > div > b { display: block; line-height: 1.3; margin-bottom: .2rem; }
.certop-people span { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.certop-people span b { color: var(--ink); }
.certop-people__note { font-size: .85rem; color: var(--ink-2); }

.certop-about__facts { list-style: none; padding: 0; margin: 1.75rem 0; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.certop-about__facts li { display: flex; flex-direction: column; margin: 0; }
.certop-about__facts b { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.certop-about__facts span { font-size: .85rem; color: var(--ink-2); margin-top: .25rem; }
/* Zdjęcie właściciela: portret jako uzupełnienie treści, nie jej bohater.
   Ograniczone szerokością, żeby nie dominowało nad tym, co jest obok. */
.certop-about__ph { margin: 0; max-width: 240px; justify-self: center; }
.certop-about__ph img { width: 100%; border-radius: var(--r); border: 1px solid var(--line); }
.certop-about__ph figcaption { margin-top: .7rem; font-family: var(--mono); font-size: .78rem; color: var(--ink-2); text-align: center; }

/* ------------------------- opinie i referencje ------------------------ */
.certop-slot { border: 2px dashed var(--line); border-radius: var(--r); background: var(--white); padding: 1.5rem; text-align: center; color: var(--ink-2); }

/* Widget opinii Google (Trustindex) - rozkładamy karty na kolumny.
   ⚠ To klasy WTYCZKI, nie nasze: przy jej aktualizacji sprawdzić, czy nadal działa.
   Reguły są zachowawcze - ustawiają tylko siatkę, nie ruszają wyglądu kart. */
.certop-reviews .ti-widget .ti-reviews-container-wrapper,
.certop-reviews .ti-reviews-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; float: none !important; width: 100% !important; }
.certop-reviews .ti-review-item { width: auto !important; margin: 0 !important; float: none !important; }
.certop-reviews .ti-widget { margin: 0 !important; }

.certop-refs__lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: 2rem 0 .85rem; }
.certop-refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.certop-refs a { position: relative; display: block; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-sm); }
.certop-refs img { border: 1px solid var(--line); border-radius: 4px; width: 100%; background: #fff; transition: transform .18s ease; }
.certop-refs a:hover img, .certop-refs a:focus-visible img { transform: scale(1.03); }
/* etykieta „powiększ" pojawia się na najechanie; na dotyku jest zawsze widoczna,
   bo tam nie ma stanu hover, a użytkownik musi wiedzieć, że można kliknąć */
.certop-refs__zoom {
	position: absolute; inset: auto 0 0 0; background: rgba(51,51,51,.9); color: #fff;
	font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
	padding: .4rem; display: flex; align-items: center; justify-content: center; gap: .35rem;
	opacity: 0; transition: opacity .18s ease;
}
.certop-refs a:hover .certop-refs__zoom, .certop-refs a:focus-visible .certop-refs__zoom { opacity: 1; }
@media (hover: none) { .certop-refs__zoom { opacity: 1; } }

/* nakładka z podglądem referencji */
.certop-lightbox {
	position: fixed; inset: 0; z-index: 200; background: rgba(20,20,20,.88);
	display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
	overflow: auto;
}
.certop-lightbox[hidden] { display: none; }
.certop-lightbox figure { margin: 0; max-width: min(760px, 100%); text-align: center; }
.certop-lightbox img { width: 100%; height: auto; border-radius: var(--r); background: #fff; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.certop-lightbox figcaption { margin-top: .9rem; color: #e9e2da; font-family: var(--mono); font-size: .8rem; }
.certop-lightbox__close {
	position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3);
	font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.certop-lightbox__close:hover { background: rgba(255,255,255,.22); }

/* ---------------------------------- FAQ ------------------------------- */
.certop-faq { max-width: 80ch; margin-inline: auto; border-top: 1px solid var(--line); }
.certop-faq details { border-bottom: 1px solid var(--line); }
.certop-faq summary {
	cursor: pointer; list-style: none; padding: 1.05rem .5rem 1.05rem 0;
	font-weight: 700; font-size: var(--step-1); display: flex; gap: 1rem; align-items: flex-start;
}
.certop-faq summary::-webkit-details-marker { display: none; }
.certop-faq summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 700; color: var(--accent-t); font-size: 1.3rem; line-height: 1; flex: none; }
.certop-faq details[open] summary::after { content: "\2212"; }
.certop-faq summary:hover { color: var(--accent-t); }
.certop-faq__a { padding: 0 2.5rem 1.15rem 0; color: var(--ink-2); }
.certop-faq__a p:last-child, .certop-faq__a ul:last-child { margin-bottom: 0; }

/* --------------------------------- zasięg ----------------------------- */
.certop-geo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.certop-geo h2 { font-size: var(--step-3); }
.certop-geo p { color: var(--ink-2); }
.certop-cities { display: flex; flex-wrap: wrap; gap: .5rem; }
.certop-cities a { font-size: .9rem; font-weight: 600; border: 1px solid var(--line); background: var(--white); border-radius: 99px; padding: .4rem .9rem; color: var(--ink) !important; text-decoration: none !important; }
.certop-cities a:hover { border-color: var(--accent); color: var(--accent-t) !important; }
.certop-cities a.is-live { border-color: var(--accent); background: var(--accent); color: var(--btn-fg) !important; }

/* -------------------------------- w skrócie --------------------------- */
.certop-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem 2rem; }
.certop-fact { border-top: 3px solid var(--line); padding-top: .9rem; }
.certop-fact b { display: block; font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; margin-bottom: .35rem; }
.certop-fact p { color: var(--ink-2); font-size: .93rem; margin: 0; }
.certop-fact :where(a) { font-weight: 700; white-space: nowrap; }
.certop-facts .certop-fact:nth-child(1) { border-top-color: var(--kl-a); }
.certop-facts .certop-fact:nth-child(2) { border-top-color: var(--kl-b); }
.certop-facts .certop-fact:nth-child(3) { border-top-color: var(--kl-c); }
.certop-facts .certop-fact:nth-child(4) { border-top-color: var(--kl-d); }
.certop-facts .certop-fact:nth-child(5) { border-top-color: var(--kl-e); }
.certop-facts .certop-fact:nth-child(6) { border-top-color: var(--kl-f); }

/* -------------------------------- poradniki --------------------------- */
.certop-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; }
.certop-post {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem;
	display: flex; flex-direction: column; gap: .5rem; color: var(--ink) !important;
	text-decoration: none !important; transition: border-color .15s ease;
}
.certop-post:hover { border-color: var(--accent); }
.certop-post h3 { margin: 0; }
.certop-post p { font-size: .92rem; color: var(--ink-2); margin: 0; }
.certop-post span { font-family: var(--mono); font-size: .72rem; color: var(--accent-t); font-weight: 700; margin-top: auto; }

/* ------------------------------- CTA końcowe -------------------------- */
.certop-final { text-align: center; }
.certop-final p { color: #b8aca1; max-width: 56ch; margin-inline: auto; font-size: var(--step-1); }
.certop-final__b { margin-top: 1.9rem; }
.certop-final__n { margin-top: 1.25rem; font-family: var(--mono); font-size: .72rem; color: #b5aaa0; }
.certop-final__n :where(a) { color: #d8cec5; border-bottom: 1px solid rgba(216,206,197,.35); }
.certop-final__n :where(a):hover { color: #fff; text-decoration: none; }

/* --------------------------------- stopka ----------------------------- */
.certop-footer { background: var(--deep-2); color: #b8aca1; padding-top: 2.75rem; font-size: .92rem; }
/* Pierwsza kolumna (opis firmy) szersza, trzy kolumny linków równe.
   `align-items: start` - bez tego krótsze kolumny rozciągałyby się na wysokość
   najdłuższej i odstępy między pozycjami robiłyby się przypadkowe. */
.certop-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem 2.5rem; padding-bottom: 2rem; align-items: start; }
.certop-footer h3 { color: #fff; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; font-weight: 700; }
.certop-footer ul { list-style: none; padding: 0; margin: 0; }
.certop-footer li { margin-bottom: .45rem; }
/* ★ `:not(.certop-btn)` jest konieczne: reguła stopki i klasa przycisku mają równą
   specyficzność (0,1,0), a stopka jest niżej w pliku - więc wygrywała i przycisk
   „Zamów online" dostawał kolor tekstu stopki zamiast białego (kontrast 2,27:1). */
.certop-footer :where(a:not(.certop-btn)) { color: inherit; }
.certop-footer :where(a:not(.certop-btn)):hover { color: var(--acc-dark); text-decoration: none; }
/* Nazwa zamiast logo - plik ma jasne tło i na ciemnej stopce wyglądał jak łatka. */
.certop-footer__brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: .6rem; }
.certop-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .82rem; color: #b5aaa0; }
.certop-footer__legal { margin-left: auto; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.certop-footer__cta { margin: 1.25rem 0 0; }
.certop-footer__cta .certop-btn { padding: .6rem 1.1rem; font-size: .88rem; }

@media (max-width: 900px) {
	.certop-footer__grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	.certop-footer__legal { margin-left: 0; }
}

/* ------------------------------ treść stron --------------------------- */
.certop-entry { max-width: 48rem; margin-inline: auto; }
.certop-entry img { border-radius: 6px; }
.certop-pagehead { padding-block: 2.5rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.certop-figure { text-align: center; margin: 0 0 1rem; }
.certop-figure img { display: inline-block; border-radius: 6px; box-shadow: var(--shadow-sm); }
.certop-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.certop-list { list-style: none; padding: 0; }
.certop-list li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; }
.certop-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent-t); font-weight: 700; }

/* ------------------------------ responsywność ------------------------- */
@media (max-width: 1024px) {
	.certop-cols2 { grid-template-columns: 1fr; }
}
/* ★ Menu przechodzi w hamburger WCZEŚNIEJ niż reszta układu (1100 px, nie 900 px).
   Powód: przy `nowrap` sześć pozycji + logo + przycisk zostawia w kontenerze 1180 px
   zaledwie 64 px zapasu. Poniżej ~1116 px zapas znika i menu zaczyna wypychać
   przycisk poza kontener - lepiej zwinąć je do przycisku, niż pozwolić na rozjazd. */
@media (max-width: 1100px) {
	.certop-navtoggle { display: flex; }
	.certop-nav {
		position: fixed; inset: 68px 0 auto 0; background: #fff; border-bottom: 1px solid var(--line);
		transform: translateY(-130%); transition: transform .25s ease; max-height: calc(100vh - 68px); overflow: auto; margin: 0;
	}
	.certop-nav.is-open { transform: translateY(0); box-shadow: var(--shadow); }
	.certop-nav__list { flex-direction: column; align-items: stretch; padding: .5rem; }
	.certop-nav__list a { border-bottom: 0; }
	.certop-nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		border: 0; border-left: 2px solid var(--line); margin: .2rem 0 .4rem .8rem; min-width: 0;
	}
	.certop-nav__list .menu-item-has-children > a::after { float: right; margin-top: .35em; }
	/* w menu zwiniętym pozycje mają całą szerokość - zawijanie jest tu naturalne */
	.certop-nav__list > li > a { white-space: normal; }
	/* hamburger po prawej, przycisk akcji tuż przed nim */
	.certop-header__cta { margin-left: auto; order: 2; }
	.certop-navtoggle { order: 3; margin-left: .75rem; }
}

@media (max-width: 900px) {
	.certop-hero__in, .certop-geo, .certop-about { grid-template-columns: 1fr; }
	.certop-hero__lead { max-width: none; }
	.certop-about__ph { max-width: 240px; }
	.certop-svc__cta { margin-left: 0; }
	.certop-branch :where(a) { margin-left: 0; }
}
@media (max-width: 620px) {
	/* ★ Górny pasek znika na telefonie (decyzja Piotra 2026-08-03).
	   Zabierał wysokość ponad pierwszym ekranem, a niósł informacje, które
	   i tak są w sekcji „Dlaczego Certop" i w stopce. Telefon zostaje dostępny
	   w menu i w stopce. */
	.certop-topbar { display: none; }
	/* przy najwęższych ekranach przycisk zabiera miejsce logu - zostaje hamburger */
	.certop-header__cta { display: none; }
	.certop-header__brand img, .custom-logo { max-height: 48px; }
	.certop-header__inner { padding-block: .6rem; }
	/* hamburger dosunięty do prawej krawędzi */
	.certop-navtoggle { margin-left: auto; }
	.certop-nav { inset-block-start: 62px; }
}
@media (max-width: 560px) {
	.certop-refs { grid-template-columns: repeat(2, 1fr); }
}

/* ★ Globalna reguła ruchu. `scroll-behavior` NIE jest animacją ani transition,
   więc trzeba je wyłączyć osobno - inaczej płynne przewijanie zostaje włączone
   u osób, które prosiły o jego brak (ryzyko zawrotów głowy). */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
}

/* =========================================================================
   LANDINGI OFERTOWE + STRONA ZAMÓWIENIA          (dodane 2026-08-04)
   Plan i uzasadnienie: OneDrive\CLAUDE\CERTOP-FORMULARZE.md
   ========================================================================= */

/* ------------------------- warianty realizacji ------------------------- */
/* Dwie karty zamiast czterech opcji radio: klient wybiera KTO zbiera dane,
   a nie w jakim formacie je przekaże (to pytanie schodzi do formularza). */
.certop-vars {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.25rem; margin-bottom: 2rem;
}
.certop-var {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .7rem;
	border-top: 3px solid var(--kl-a);
}
/* Wariant z dopłatą dostaje segment C - nadal w rodzinie skali, ale odróżnialny.
   ★ Bez kolorów spoza palety: różnicujemy wyłącznie odcieniem ze skali A-G. */
.certop-var--plus { border-top-color: var(--kl-c); }
.certop-var__n { margin: 0; font-size: var(--step-1); letter-spacing: -.02em; }
.certop-var__price { margin: 0; font-family: var(--mono); }
.certop-var__price b { font-size: var(--step-3); font-weight: 700; letter-spacing: -.03em; }
.certop-var__d { margin: 0; color: var(--ink-2); font-size: .95rem; }
.certop-var .certop-list { margin: 0; }
/* Przycisk dosunięty do dołu, żeby obie karty kończyły się na tej samej wysokości
   niezależnie od długości opisu. */
.certop-var__cta { margin-top: auto; align-self: flex-start; }

/* --------------------------- co przygotować ---------------------------- */
.certop-needs {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem 2rem;
}
.certop-need h3 { margin: .6rem 0 .3rem; font-size: 1.02rem; }
.certop-need p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.certop-need__ico { width: 26px; height: 26px; color: var(--accent-t); }
.certop-needs__note {
	margin: 1.8rem 0 0; padding: .9rem 1.1rem; background: var(--white);
	border: 1px solid var(--line); border-left: 3px solid var(--kl-a);
	border-radius: var(--r); font-size: .95rem; color: var(--ink-2);
}
.certop-needs__note b { color: var(--ink); }

/* --------------------------- strona zamówienia ------------------------- */
.certop-order__back { margin-bottom: 1.2rem; font-size: .92rem; }
.certop-order__var {
	max-width: 46rem; margin: 0 auto 1.6rem; padding: .8rem 1rem; text-align: center;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	font-size: .93rem; color: var(--ink-2);
}
.certop-order__var b { color: var(--ink); }
.certop-order__form { max-width: 46rem; margin: 0 auto; }
.certop-order__help {
	max-width: 46rem; margin: 2rem auto 0; text-align: center;
	font-size: .9rem; color: var(--ink-2);
}
.certop-order__missing {
	padding: 1.2rem; background: var(--paper); border: 1px dashed var(--line);
	border-radius: var(--r); text-align: center;
}

@media (max-width: 640px) {
	.certop-var { padding: 1.2rem 1.1rem; }
	.certop-var__cta { align-self: stretch; text-align: center; }
}

/* --------------------- hero landingu (odróżnienie od home) --------------------
   ★ Uwaga Piotra 2026-08-04: pierwsza wersja kopiowała hero strony głównej razem
   z figurą wzoru dokumentu, więc po kliknięciu „Mieszkanie" użytkownik widział
   niemal ten sam ekran. Odróżniają: okruszek + karta zamówienia po prawej.
   Nagłówek serwisu zostaje identyczny - to spójność marki, nie pomyłka. */
.certop-hero--offer .certop-hero__in { padding-block: clamp(1.5rem,3.5vw,2.75rem); align-items: start; }
.certop-hero--offer h1 { margin-block: .5rem .7rem; }

.certop-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
	padding-top: 1.4rem; font-size: .82rem; color: var(--ink-3);
}
.certop-crumbs a { color: var(--ink-2); text-decoration: none; }
.certop-crumbs a:hover { color: var(--accent-t); text-decoration: underline; }
.certop-crumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* Karta zamówienia - komponent, którego strona główna NIE MA. */
.certop-obox {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1.4rem 1.35rem; box-shadow: 0 1px 3px rgba(0,0,0,.05);
	border-top: 3px solid var(--kl-a);
}
.certop-obox__t { margin: 0 0 .2rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-family: var(--mono); }
.certop-obox__p { margin: 0; display: flex; align-items: baseline; gap: .6rem; font-family: var(--mono); }
.certop-obox__p b { font-size: var(--step-4); font-weight: 700; letter-spacing: -.03em; }
.certop-obox__p s { color: var(--ink-3); font-size: var(--step-1); }
.certop-obox__s { margin: .15rem 0 1rem; font-size: .85rem; color: var(--ink-2); }
.certop-obox__l { margin: 0 0 1.2rem; }
.certop-obox__l li { font-size: .92rem; }
.certop-obox__cta { width: 100%; text-align: center; }
.certop-obox__n { margin: .7rem 0 0; text-align: center; font-size: .85rem; }

@media (max-width: 860px) {
	/* Na telefonie karta idzie pod tekst, ale przed resztą strony - cena i przycisk
	   mają zostać blisko pierwszego ekranu. */
	.certop-hero--offer .certop-hero__in { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ★ HERO LANDINGU NA CIEMNYM (decyzja Piotra 2026-08-04) - najmocniejszy sygnał
   „to inna strona niż główna", bo home ma hero na papierze. Biała karta zamówienia
   wybija się na graficie jeszcze wyraźniej niż na jasnym tle. */
.certop-hero--offer { background: var(--deep); border-bottom: 0; color: #e9e2da; }
.certop-hero--offer h1 { color: #fff; }
.certop-hero--offer h1 em { color: var(--acc-dark); }
.certop-hero--offer .certop-hero__lead { color: #cfc6bd; }
.certop-hero--offer .certop-eyebrow { color: #b8aca1; }
/* Skrót skali A-G przy nadtytule ma na graficie własne kolory - zostaje bez zmian. */
.certop-hero--offer .certop-hero__proof { border-top-color: rgba(255,255,255,.18); color: #cfc6bd; }
.certop-hero--offer .certop-hero__proof b { color: #fff; }
.certop-hero--offer .certop-crumbs { color: #a89c90; }
.certop-hero--offer .certop-crumbs a { color: #cfc6bd; }
.certop-hero--offer .certop-crumbs a:hover { color: var(--acc-dark); }
.certop-hero--offer .certop-crumbs [aria-current] { color: #fff; }
/* Karta zostaje jasna i „papierowa" - to ona ma przyciągać wzrok. */
.certop-hero--offer .certop-obox { box-shadow: 0 6px 24px rgba(0,0,0,.22); }
/* ★★ PUŁAPKA: `color` z ciemnego hero DZIEDZICZY do jasnej karty w środku.
   Zmierzone przed poprawką: cena i lista w karcie miały kontrast 1,28:1 (jasny
   tekst #e9e2da na białym tle) - czyli były praktycznie niewidoczne, mimo że
   sama karta ma poprawne tło. Każdy jasny komponent wewnątrz ciemnej sekcji
   musi jawnie odzyskać kolor tekstu. */
.certop-hero--offer .certop-obox { color: var(--ink); }
.certop-hero--offer .certop-obox__t { color: var(--ink-3); }
.certop-hero--offer .certop-obox__s { color: var(--ink-2); }
.certop-hero--offer .certop-obox__p s { color: var(--ink-3); }

/* ★ CENA: PRZEKREŚLONA REGULARNA WIĘKSZA OD AKTUALNEJ (decyzja Piotra 2026-08-04).
   Efekt zgodności wielkości - gdy niższa cena jest zapisana mniejszą czcionką,
   różnica jest postrzegana jako większa. Ta sama zasada działa w PoczujExcel.
   Aktualną cenę utrzymuje w roli głównej kolor (grafit vs szary) i pogrubienie,
   nie rozmiar. Proporcja ~1,25×. */
.certop-obox__p { flex-wrap: wrap; align-items: baseline; gap: .55rem; }
.certop-obox__p s { order: -1; font-size: var(--step-4); color: var(--ink-3); font-weight: 400; text-decoration-thickness: 2px; }
.certop-obox__p b { font-size: var(--step-3); color: var(--ink); }
/* „teraz" tłumaczy, dlaczego jedna liczba jest przekreślona - bez tego czyta się
   jak dwie ceny obok siebie. */
.certop-obox__p b::before { content: "teraz "; font-size: .6em; font-weight: 400; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; }
/* ★ Obie ceny w JEDNEJ linii (decyzja Piotra 2026-08-04). Wymaga zejścia o stopień
   w skali - przy step-4 „329 zł" i „teraz 199 zł" nie mieszczą się obok siebie
   w karcie i flex łamał je na dwa wiersze. Proporcja stara:nowa zostaje ~1,25×. */
.certop-obox__p { flex-wrap: nowrap; white-space: nowrap; gap: .5rem; }
.certop-obox__p s { font-size: var(--step-3); }
.certop-obox__p b { font-size: var(--step-2); }
.certop-obox__p b::before { content: "teraz "; display: block; font-size: .55em; line-height: 1.1; }
/* Poprawka: „teraz" wraca do linii - `display:block` rozbijało blok ceny na dwa
   wiersze, mimo że obie liczby mieściły się obok siebie (222 z 331 px). */
.certop-obox__p { align-items: center; }
.certop-obox__p b::before { display: inline; font-size: .5em; vertical-align: .12em; margin-right: .2em; }

/* --------- sekcje wyłącznie landingowe (skąd dane, przypadki) ---------- */
.certop-srcbox {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1.3rem 1.25rem; border-top: 3px solid var(--kl-c);
}
.certop-srcbox:first-child { border-top-color: var(--kl-a); }
.certop-srcbox h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.certop-srcbox p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.certop-srcbox b { color: var(--ink); }
/* Lista w dwóch kolumnach - sześć krótkich pozycji w jednej kolumnie robi
   niepotrzebnie długą kolumnę tekstu. */
.certop-list--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .35rem 2rem; }

/* ★ Poprawka układu cen (Piotr 2026-08-04: „rozstrzelenie, duże odstępy").
   Trzy przyczyny naraz: dopisek „teraz" rozbijał liczby w środku, różnica
   rozmiarów była za duża (1,38×), a font monospace ma własny tracking.
   Zasada zostaje: przekreślona regularna WIĘKSZA od aktualnej - ale o 1,15×,
   nie o połowę. Pierwszeństwo aktualnej ceny niesie kolor i grubość. */
.certop-obox__p { gap: .4rem; letter-spacing: -.03em; }
.certop-obox__p s {
	font-size: var(--step-2); font-weight: 400; color: var(--ink-3);
	text-decoration-thickness: 1px; opacity: .85;
}
.certop-obox__p b { font-size: 1.9rem; font-weight: 700; color: var(--ink); }
.certop-obox__p b::before { content: none; }
/* Rozmiary wprost, nie ze skali: `--step-2` jest zależny od viewportu i przy
   szerokim ekranie wychodził MNIEJSZY od ceny aktualnej, odwracając zasadę. */
.certop-obox__p s { font-size: 2.2rem; }
.certop-obox__p b { font-size: 1.9rem; }

/* ------------------------------- film --------------------------------- */
.certop-video {
	margin: 0 0 2.25rem; max-width: 46rem; border-radius: var(--r); overflow: hidden;
	border: 1px solid var(--line); background: var(--deep);
}
.certop-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* ★ Odstępy w bloku ceny (Piotr 2026-08-04): „zł" bliżej liczby, obie ceny
   dalej od siebie. WooCommerce wstawia przed „zł" twardą spację, którą font
   monospace dodatkowo rozciąga - stąd `word-spacing` ujemny. Odstęp między
   cenami rośnie z 6 do ~18 px, żeby czytały się jako dwie osobne wartości. */
.certop-obox__p { gap: 1.1rem; word-spacing: -.18em; }
/* -.18em okazało się za słabe: font monospace ma bardzo szeroką spację, więc
   po pierwszej korekcie „zł" stało nadal 14-17 px od liczby. Zmierzone docelowo ~5 px. */
.certop-obox__p { word-spacing: -.36em; }
/* ★ PUŁAPKA: `word-spacing` w `em` liczy się od font-size ELEMENTU, na którym stoi.
   Ustawiony na wrapperze (17 px) dawał korektę ~6 px, a odstęp trzeba było zbić
   przy liczbach o rozmiarze 30-35 px. Stąd reguła na samych cenach. */
.certop-obox__p { word-spacing: normal; }
.certop-obox__p s, .certop-obox__p b { word-spacing: -.34em; }
/* ★ Karta wyśrodkowana w pionie względem kolumny tekstu (Piotr 2026-08-04).
   Przy `align-items: start` była wyraźnie krótsza od lewej kolumny i „wisiała"
   przy górnej krawędzi. Na wąskim ekranie wraca układ jednokolumnowy. */
.certop-hero--offer .certop-hero__in { align-items: center; }

/* ★ Film wyśrodkowany i wyeksponowany (Piotr 2026-08-04). Wcześniej stał przy
   lewej krawędzi jak zwykła ilustracja - a to materiał, na który klient ma
   zwrócić uwagę, więc dostaje własne miejsce w osi sekcji. */
.certop-video { margin: .5rem auto 2.5rem; max-width: 44rem; box-shadow: 0 4px 18px rgba(0,0,0,.10); }
.certop-video figcaption {
	padding: .7rem .9rem; background: var(--white); border-top: 1px solid var(--line);
	font-size: .85rem; color: var(--ink-2); text-align: center;
}

/* =========================================================================
   FORMULARZ ZAMÓWIENIA - skórka na FluentForm            (2026-08-04)

   ★ TYMCZASOWE. FluentForm jest rusztowaniem do czasu własnego formularza
   (Etap D, CERTOP-FORMULARZE.md). Wtyczka wnosi własny wygląd: pola 13,3 px
   w foncie systemowym, szare przyciski Arial - na tle motywu wyglądało to
   jak wklejony obcy element. Skórka scope'owana pod `.certop-order__form`,
   więc nie rusza formularzy na innych stronach (kontakt, audyt).
   ========================================================================= */
.certop-order__form .fluentform { font-family: inherit; }
.certop-order__form .ff-el-group { margin-bottom: 1.15rem; }

/* etykiety */
.certop-order__form .ff-el-input--label label {
	font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem;
}
.certop-order__form .ff-el-input--label .ff-el-is-required::after { color: #c0392b; }

/* pola */
.certop-order__form .ff-el-form-control,
.certop-order__form input[type=text], .certop-order__form input[type=email],
.certop-order__form input[type=number], .certop-order__form input[type=tel],
.certop-order__form select, .certop-order__form textarea {
	font-family: inherit; font-size: 1rem; color: var(--ink);
	padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--r);
	background: var(--white); box-shadow: none; transition: border-color .15s ease;
}
.certop-order__form .ff-el-form-control:focus,
.certop-order__form select:focus, .certop-order__form textarea:focus {
	border-color: var(--accent); outline: 2px solid rgba(0,128,62,.18); outline-offset: 1px;
}

/* nagłówki sekcji - rytm marki: skrót skali A-G przed tytułem */
.certop-order__form .ff-el-section-title {
	font-size: var(--step-1); font-weight: 700; letter-spacing: -.02em; color: var(--ink);
	margin: 2rem 0 .4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.certop-order__form .ff-el-group:first-child .ff-el-section-title { margin-top: 0; padding-top: 0; border-top: 0; }

/* przyciski - zielone CTA motywu zamiast szarych Arialowych */
.certop-order__form .ff-btn,
.certop-order__form .ff-btn-submit, .certop-order__form .ff-btn-next {
	font-family: inherit; font-size: 1rem; font-weight: 700;
	background: var(--accent); color: var(--btn-fg); border: 0;
	padding: .7rem 1.4rem; border-radius: var(--r); cursor: pointer;
	transition: background .15s ease;
}
.certop-order__form .ff-btn:hover, .certop-order__form .ff-btn-submit:hover,
.certop-order__form .ff-btn-next:hover { background: var(--accent-d); }
/* „Wróć" jest krokiem wstecz - nie ma konkurować z akcją główną */
.certop-order__form .ff-btn-prev {
	background: transparent; color: var(--ink-2); border: 1px solid var(--line);
}
.certop-order__form .ff-btn-prev:hover { background: var(--paper); color: var(--ink); }

/* wybory jedno- i wielokrotne - większy obszar kliknięcia */
.certop-order__form .ff-el-form-check-label {
	display: flex; gap: .55rem; align-items: flex-start;
	padding: .5rem .7rem; margin-bottom: .35rem; border: 1px solid var(--line);
	border-radius: var(--r); cursor: pointer; font-size: .97rem;
	transition: border-color .15s ease, background .15s ease;
}
.certop-order__form .ff-el-form-check-label:hover { border-color: var(--accent); background: var(--paper); }
.certop-order__form .ff-el-form-check-label input { margin-top: .2rem; accent-color: var(--accent); }

/* pasek postępu */
.certop-order__form .ff-el-progress { background: var(--line); border-radius: 99px; height: 6px; }
.certop-order__form .ff-el-progress-bar { background: var(--accent); border-radius: 99px; }
.certop-order__form .ff-el-progress-status { font-size: .85rem; color: var(--ink-2); }

/* upload i podpowiedzi */
.certop-order__form .ff_file_upload_holder {
	border: 1px dashed var(--line); border-radius: var(--r); padding: 1rem; background: var(--paper);
}
.certop-order__form .ff-el-help-message { font-size: .85rem; color: var(--ink-2); }
.certop-order__form .error, .certop-order__form .text-danger { color: #c0392b; font-size: .88rem; }

/* ★ NUMEROWANE SEKCJE FORMULARZA (Piotr 2026-08-04): „dane", „okna",
   „podsumowanie i płatność" mają być rozpoznawalne z daleka. Przy 171 polach
   w jednym kroku sam pogrubiony tytuł ginie w strumieniu pól - numer w pastylce
   daje punkty zaczepienia i mówi, ile jeszcze przed nami.
   ★ Licznik CSS, nie ręczne numery: sekcje pokazują się warunkowo, więc każdy
   wpisany na sztywno numer rozjechałby się przy innej ścieżce. */
.certop-order__form .fluentform { counter-reset: certop-sek; }
.certop-order__form .ff-el-section-title {
	counter-increment: certop-sek;
	display: flex; align-items: center; gap: .6rem;
	margin: 2.4rem 0 .8rem; padding: 1.5rem 0 0;
}
.certop-order__form .ff-el-section-title::before {
	content: counter(certop-sek);
	flex: 0 0 auto; width: 1.85rem; height: 1.85rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--accent); color: var(--btn-fg);
	font-family: var(--mono); font-size: .9rem; font-weight: 700; letter-spacing: 0;
}
/* Pusty tytuł sekcji (FluentForm wstawia takie jako separatory) nie ma numeru
   ani kreski - inaczej licznik skakałby o pozycje, których nikt nie widzi. */
.certop-order__form .ff-el-section-title:empty { display: none; }

/* ============ FORMULARZ: szerokość, klamry sekcji, wybór jako kafelki =====
   Uwagi Piotra 2026-08-04. Nadal skórka na FluentForm (rusztowanie). */

/* Szerokość jak na pozostałych stronach - 46 rem robiło wąską kolumnę
   pośrodku, przez co formularz wyglądał na wciśnięty w stronę. */
.certop-order__form, .certop-order__var, .certop-order__help { max-width: none; }
.certop-order .certop-sec__head { max-width: 62ch; margin-inline: auto; }

/* KLAMRA SEKCJI - każda sekcja w białej karcie z kreską ze skali A-G,
   tak jak bloki treści na stronie. Wrapper dokłada JS (order-form.js),
   bo FluentForm renderuje pola jako płaską listę bez grupowania. */
.certop-fsec {
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	border-top: 3px solid var(--kl-a); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.certop-fsec .ff-el-section-title { margin-top: 0; padding-top: 0; border-top: 0; }
/* Sekcja, której wszystkie pola schowała logika warunkowa, znika razem z ramką -
   inaczej zostawałaby pusta biała karta z samym numerem. */
.certop-fsec:not(:has(.ff-el-group:not([style*="display: none"]))) { display: none; }

/* PIERWSZY WYBÓR JAKO KAFELKI - to nie jest zwykłe pole, tylko rozwidlenie
   całej dalszej ścieżki (57 z 98 reguł warunkowych wisi na tej odpowiedzi),
   więc ma wyglądać jak wybór oferty, nie jak lista radiobuttonów. */
.certop-fsec--wybor .ff-el-form-check {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem;
}
.certop-fsec--wybor .ff-el-form-check-label {
	flex-direction: column; gap: .4rem; align-items: flex-start;
	padding: 1.05rem 1.15rem; border: 2px solid var(--line); border-radius: var(--r);
	font-size: 1rem; line-height: 1.45; height: 100%;
}
.certop-fsec--wybor .ff-el-form-check-label:hover { border-color: var(--accent); background: var(--white); }
/* Zaznaczony kafelek: zielona ramka i papierowe tło - stan „wybrane" ma być
   widoczny bez szukania kropki w radiobuttonie. */
.certop-fsec--wybor .ff-el-form-check-label:has(input:checked) {
	border-color: var(--accent); background: var(--paper); box-shadow: inset 0 0 0 1px var(--accent);
}
.certop-fsec--wybor .ff-el-form-check-label input { position: absolute; opacity: 0; pointer-events: none; }

/* Przycisk „Dalej" bywał szary mimo skórki - FluentForm daje mu własną klasę
   `ff-btn-secondary`, więc reguła musi ją jawnie przebić. */
.certop-order__form .ff-btn.ff-btn-secondary,
.certop-order__form .ff-btn-next.ff-btn-secondary {
	background: var(--accent); color: var(--btn-fg);
}
.certop-order__form .ff-btn-prev.ff-btn-secondary {
	background: transparent; color: var(--ink-2); border: 1px solid var(--line);
}
/* Poprawka: FluentForm ukrywa warunkowo także KONTENERY KOLUMN (`.ff-t-container`),
   nie tylko pojedyncze `.ff-el-group`. Reguła patrząca wyłącznie na grupy uznałaby
   sekcję z ukrytym kontenerem za widoczną i zostawiła pustą białą kartę.
   Teraz liczą się bezpośrednie dzieci poza samym nagłówkiem sekcji. */
.certop-fsec:not(:has(> *:not(.ff-el-section-break):not([style*="display: none"]))) { display: none; }
/* ★ Kafelek musi pokazywać FOKUS klawiatury. Ukrycie radio (opacity 0) zabiera
   naturalną obwódkę fokusu, więc bez tej reguły osoba nawigująca Tabem nie
   widziałaby, na której opcji stoi. Radio zostaje w drzewie dostępności -
   `display:none` wyjęłoby je z nawigacji zupełnie. */
.certop-fsec--wybor .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ★ Kafelki wyboru OBOK SIEBIE, bez przycisku „Dalej" (Piotr 2026-08-04).
   Cztery opcje w rzędzie na desktopie, po dwie na tablecie, jedna pod drugą
   na telefonie. Kliknięcie kafelka przechodzi dalej samo (order-form.js). */
.certop-fsec--wybor .ff-el-form-check { grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.certop-fsec--wybor .ff-el-form-check-label { padding: 1rem; font-size: .93rem; line-height: 1.4; }

/* Nawigacja pierwszego kroku ukryta wizualnie, ale NIE usunięta: wraca przy
   fokusie, więc osoba nawigująca klawiaturą ma czym przejść dalej. */
.certop-step--wybor .step-nav { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.certop-step--wybor .step-nav:focus-within {
	position: static; width: auto; height: auto; overflow: visible; clip-path: none;
	margin-top: 1rem;
}

@media (max-width: 1024px) { .certop-fsec--wybor .ff-el-form-check { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .certop-fsec--wybor .ff-el-form-check { grid-template-columns: 1fr; } }

/* ★★ POPRAWKA SIATKI KAFELKÓW: FluentForm opakowuje KAŻDY wybór w osobny
   `.ff-el-form-check`, a wspólnym rodzicem jest `.ff-el-input--content`.
   Siatka postawiona na `.ff-el-form-check` obejmowała więc jeden kafelek
   i nie robiła nic. ⚠ Wcześniejsza weryfikacja tego nie wyłapała, bo strona
   testowa miała strukturę zmyśloną, a nie wyciętą z prawdziwego formularza. */
.certop-fsec--wybor .ff-el-input--content {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; align-items: stretch;
}
.certop-fsec--wybor .ff-el-form-check { margin: 0; display: flex; }
.certop-fsec--wybor .ff-el-form-check-label { width: 100%; margin: 0; }
@media (max-width: 1024px) { .certop-fsec--wybor .ff-el-input--content { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .certop-fsec--wybor .ff-el-input--content { grid-template-columns: 1fr; } }

/* ★ Kafelek wyboru: krótki tytuł u góry, CENA NA DOLE (Piotr 2026-08-04).
   Cena w stałym miejscu pozwala porównać cztery opcje jednym spojrzeniem -
   wtopiona w zdanie („…- 199 zł brutto") wymagała czytania każdej etykiety. */
.certop-kafel { display: flex; flex-direction: column; gap: .35rem; height: 100%; width: 100%; }
.certop-kafel__t { font-weight: 600; color: var(--ink); line-height: 1.35; }
.certop-kafel__a { font-size: .85rem; }
.certop-kafel__a a { color: var(--accent-t); }
.certop-kafel__c {
	margin-top: auto; padding-top: .7rem; font-family: var(--mono);
	font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
	word-spacing: -.28em;
}
/* Wariant droższy - cena w kolorze drugorzędnym byłaby myląca, więc różnicuje
   ją tylko dopisek przy kafelku, nie kolor. */
.certop-fsec--wybor .ff-el-form-check-label:has(input:checked) .certop-kafel__c { color: var(--accent-t); }

/* ★ Pasek z procedurą wybranej ścieżki (Piotr 2026-08-04) - stoi na górze dalszej
   części formularza, nie pod kafelkami: kliknięcie przenosi od razu do kolejnego
   kroku, więc tekst przy kafelkach zniknąłby, zanim ktoś zdążyłby go przeczytać. */
.certop-proc {
	display: flex; flex-direction: column; gap: .25rem;
	background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--kl-a);
	border-radius: var(--r); padding: .9rem 1.1rem; margin-bottom: 1.25rem;
}
.certop-proc b { font-size: .95rem; color: var(--ink); }
.certop-proc span { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }

/* ★ WIDOK SKUPIONY - landing ofertowy i strona zamówienia (Piotr 2026-08-04).
   Samo logo na środku i jednowierszowa stopka: to strony decyzji, więc każde
   wyjście (menu, 20 linków, lista miast) odciąga od zamówienia. */
.certop-header--focus .certop-header__inner { justify-content: center; padding-block: .9rem; }
.certop-header--focus .certop-header__brand { margin: 0; }

.certop-footer--focus { padding-block: 0; }
.certop-footer__line {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: .5rem 1.5rem; padding-block: 1.1rem; font-size: .85rem;
}
/* Stopka jest ciemna, więc tekst drugorzędny musi mieć własny, jaśniejszy odcień -
   `--ink-2` daje tu poniżej progu AA. */
.certop-footer--focus .certop-footer__line { color: #b5aaa0; }
.certop-footer--focus .certop-footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.certop-footer--focus a { color: #e0d8d0; text-decoration: none; }
.certop-footer--focus a:hover { color: var(--acc-dark); text-decoration: underline; }
@media (max-width: 640px) { .certop-footer__line { justify-content: center; text-align: center; } }

/* ★ Sekcja wyboru wyniesiona ponad kroki (Piotr 2026-08-04) - zostaje widoczna,
   a formularz rozwija się pod nią. Zaznaczony kafelek trzyma kolor, więc przez
   całe wypełnianie widać, którą ścieżką się idzie. */
.certop-order__form > form > .certop-fsec--wybor { margin-bottom: 1rem; }
.certop-kafel__d { font-size: .85rem; color: var(--ink-2); line-height: 1.35; }
/* Wybrany kafelek: wyraźniejsze wypełnienie niż sam kolor ramki - to jedyny
   ślad decyzji, który zostaje na ekranie. */
.certop-fsec--wybor .ff-el-form-check-label:has(input:checked) {
	background: #eef7f1; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
.certop-fsec--wybor .ff-el-form-check-label:has(input:checked) .certop-kafel__d { color: var(--ink-2); }

/* ★ Zabezpieczenie: po wyborze kafelka dalsza część formularza jest widoczna
   niezależnie od tego, czy FluentForm przestawił swój wewnętrzny krok.
   Powód: przy zmianie struktury DOM albo starszym skrypcie z cache klik
   w „Dalej" nie przechodził i klient widział wyłącznie kafelki - bez treści
   i bez komunikatu, czyli wyglądało to na zepsuty formularz. */
.certop-form--rozwiniety .fluentform-step { display: block !important; }
.certop-form--rozwiniety .certop-step--wybor { display: none !important; }

/* ★★ Po wyborze kafelka NIE UKRYWAMY ŻADNEJ SEKCJI.
   Reguła `:not(:has(...))` chowająca sekcje bez widocznych pól okazała się zbyt
   agresywna: zależy od tego, czy FluentForm ukrywa kontenery stylem inline, a to
   różni się w czasie i między przeglądarkami. Skutek był najgorszy z możliwych -
   klient po kliknięciu widział pustą stronę zamiast formularza.
   Pusta karta z numerem jest mniejszym złem niż brak treści. */
.certop-form--rozwiniety .certop-fsec { display: block !important; }
.certop-form--rozwiniety .certop-fsec .ff-t-container,
.certop-form--rozwiniety .certop-fsec .ff-el-group { visibility: visible; }

/* =========================================================================
   WŁASNY FORMULARZ ZAMÓWIENIA (certop-form)
   Docelowy - nie ma nic wspólnego z FluentFormem i zostaje po jego usunięciu.
   ★ Cały formularz jest na JEDNEJ stronie; sześć działów służy do przeskakiwania,
     nie do chowania treści (decyzja Piotra 2026-08-04).
   Opis całości: CERTOP-FORMULARZ-WLASNY.md
   ========================================================================= */

/* szerzej niż zwykła kolumna tekstu - pola stoją po 2-3 w rzędzie */
.certop-order__form { max-width: 68rem; margin-inline: auto; }
.certop-form { max-width: 68rem; margin-inline: auto; }

/* ---------- kafelki wyboru sposobu ---------- */
.certop-sposob { border: 0; padding: 0; margin: 0 0 1.6rem; }
.certop-sposob__tytul { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .7rem; }
.certop-sposob__siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.certop-kafel {
	display: flex; flex-direction: column; gap: .3rem; position: relative;
	padding: 1rem; border: 1px solid var(--line); border-radius: 10px;
	background: var(--white); cursor: pointer; font-size: .93rem; line-height: 1.4;
}
.certop-kafel:hover { border-color: var(--accent); }
.certop-kafel input { position: absolute; opacity: 0; pointer-events: none; }
.certop-kafel.jest-wybrany {
	border-color: var(--accent); border-width: 2px;
	background: rgba(0,128,62,.06); padding: calc(1rem - 1px);
}
.certop-kafel:has(input:focus-visible) { outline: 3px solid var(--accent-d); outline-offset: 2px; }
.certop-kafel__t { font-weight: 700; }
.certop-kafel__d { color: var(--ink-2); }
.certop-kafel__plik { font-size: .88rem; text-decoration: underline; }
.certop-kafel__c { margin-top: auto; padding-top: .5rem; font-size: 1.35rem; font-weight: 700; }
.certop-kafel.jest-wybrany .certop-kafel__c { color: var(--accent-t); }

.certop-proc {
	margin-top: .8rem; padding: .8rem 1rem; border-radius: 8px;
	background: var(--paper); border: 1px solid var(--line); font-size: .93rem;
}
.certop-proc b { display: block; margin-bottom: .15rem; }
.certop-proc span { color: var(--ink-2); }
.certop-proc:empty { display: none; }

/* ---------- nawigacja po działach ---------- */
.certop-dzialy {
	position: sticky; top: 0; z-index: 5; margin: 0 0 1.4rem;
	padding: .5rem 0; background: var(--white); border-bottom: 1px solid var(--line);
}
.certop-dzialy__lista { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.certop-dzialy__poz a {
	display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem;
	border: 1px solid var(--line); border-radius: 999px;
	color: var(--ink-2); background: var(--white); font-size: .85rem; text-decoration: none;
}
.certop-dzialy__poz a:hover { border-color: var(--dzial, var(--accent)); color: var(--ink); }
.certop-dzialy__kropka {
	width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto;
	background: var(--dzial, var(--accent));
}
.certop-dzialy__poz.jest-aktywny a {
	border-color: var(--dzial, var(--accent)); color: var(--ink);
	font-weight: 600; background: var(--paper);
}
.certop-dzialy__licznik { color: var(--ink-3); font-size: .8rem; }
.certop-dzialy__poz.jest-gotowy .certop-dzialy__licznik { color: var(--accent-t); font-weight: 700; }

/* ★ Kolory działów: odcienie zieleni marki - wiążą pozycję w pasku z nagłówkiem
   w treści, żeby po przeskoku było widać, gdzie się wylądowało.
   Wszystkie są tłem BIAŁEGO tekstu w kółku, więc muszą trzymać kontrast 4,5:1. */
.certop-dzial--1, .certop-dzialy__poz.certop-dzial--1 { --dzial: #00803e; }
.certop-dzial--2, .certop-dzialy__poz.certop-dzial--2 { --dzial: #00693a; }
.certop-dzial--3, .certop-dzialy__poz.certop-dzial--3 { --dzial: #0b5c46; }
.certop-dzial--4, .certop-dzialy__poz.certop-dzial--4 { --dzial: #2f6b3a; }
.certop-dzial--5, .certop-dzialy__poz.certop-dzial--5 { --dzial: #4a6b57; }
.certop-dzial--6, .certop-dzialy__poz.certop-dzial--6 { --dzial: #3f5d52; }

/* ---------- dział ---------- */
.certop-dzial { scroll-margin-top: 4.5rem; margin-bottom: 2rem; counter-reset: certop-sek; }
.certop-dzial__tytul {
	display: flex; align-items: center; gap: .6rem;
	font-size: 1.35rem; margin: 0 0 .9rem;
	padding-left: .7rem; border-left: 4px solid var(--dzial, var(--accent));
}

/* ---------- sekcja ---------- */
.certop-fsec {
	background: var(--white); border: 1px solid var(--line); border-radius: 10px;
	padding: 1.2rem 1.3rem; margin-bottom: 1rem;
}
.certop-fsec__tytul { counter-increment: certop-sek; margin: 0 0 .9rem; font-size: 1.05rem; }
.certop-fsec__tytul::before { content: counter(certop-sek) ". "; color: var(--dzial, var(--accent-t)); font-weight: 700; }
.certop-fsec__opis { margin: -.5rem 0 .9rem; color: var(--ink-2); font-size: .92rem; }

/* ---------- pola ---------- */
/* rzędy odtwarzają układ kolumn z FluentForma (2 albo 3 pola obok siebie) */
.certop-rzad { display: grid; gap: 0 1rem; }
.certop-rzad--2 { grid-template-columns: repeat(2, 1fr); }
.certop-rzad--3 { grid-template-columns: repeat(3, 1fr); }

.certop-pole { margin-bottom: 1rem; }
.certop-pole__label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .95rem; }
.certop-pole__gw { color: var(--accent-t); }
.certop-pole__pomoc { margin: 0 0 .35rem; color: var(--ink-2); font-size: .87rem; }
.certop-pole__blad { margin: .35rem 0 0; color: #b3261e; font-size: .87rem; font-weight: 600; }

.certop-input {
	width: 100%; padding: .6rem .7rem; font: inherit; color: var(--ink);
	background: var(--white); border: 1px solid var(--line); border-radius: 8px;
}
.certop-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0,128,62,.15); }
.certop-pole--blad .certop-input { border-color: #b3261e; }
.certop-input-wrap { position: relative; display: flex; align-items: center; gap: .5rem; }
.certop-input__sufiks { color: var(--ink-2); font-size: .9rem; white-space: nowrap; }

.certop-wybor { display: grid; gap: .4rem; }
.certop-wybor__poz {
	display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .7rem;
	border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.certop-wybor__poz:hover { border-color: var(--accent); background: var(--paper); }
.certop-wybor__poz:has(input:checked) { border-color: var(--accent); background: rgba(0,128,62,.06); }
.certop-wybor__poz input { margin-top: .18rem; accent-color: var(--accent); }
.certop-zgoda { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
/* ★ Gwiazdka w JEDNEJ LINII z początkiem oświadczenia. Doklejona za treścią wypadała pod
   ostatnim zdaniem, w osobnym wierszu (`<p>` to element blokowy, więc cokolwiek za nim
   ląduje niżej) - wyglądała jak zgubiony znak, nie jak oznaczenie pola. */
.certop-zgoda__gw { flex: 0 0 auto; line-height: 1.5; }

.certop-nawig { display: flex; gap: .6rem; margin-top: 1.4rem; }

@media (max-width: 1024px) {
	.certop-sposob__siatka { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	/* na wąskim ekranie kolumny FluentForma i tak nie mieszczą się obok siebie */
	.certop-rzad--2, .certop-rzad--3 { grid-template-columns: 1fr; }
	.certop-sposob__siatka { grid-template-columns: 1fr; }
	.certop-fsec { padding: 1rem; }
	.certop-dzialy { position: static; }
	.certop-nawig .certop-btn { width: 100%; }
}

/* ★★ Odzyskanie sekcji przed regułami skórki FluentForma.
   `.certop-fsec:not(:has(.ff-el-group…))` (bloki wyżej) ukrywa każdą kartę sekcji,
   w której nie ma markupu wtyczki - a nasz formularz go nie ma, więc wszystkie karty
   dostawały `display: none` i strona zamówienia wyglądała na pustą.
   ⚠ Każdy `:not()`/`:has()` wlicza wagę swojego argumentu, więc tamte reguły mają (0,2,0);
   tu trzeba (0,3,0), żeby wygrać niezależnie od kolejności w pliku.
   Cały ten blok znika razem z FluentFormem. */
.certop-form .certop-dzial .certop-fsec { display: block; }
.certop-form .certop-dzial .certop-fsec[hidden] { display: none; }
.certop-form .certop-rzad .certop-pole[hidden] { display: none; }

/* ★ Na stronie zamówienia nagłówek NIE jest przyklejony (Piotr 2026-08-04).
   Globalnie `.certop-header` ma `position: sticky`, więc logo zabierało pas na górze
   przez cały czas wypełniania długiego formularza. Tutaj lepki ma być pasek działów -
   dwa przyklejone paski jeden pod drugim zjadałyby ekran, a logo w trakcie wypełniania
   nie jest do niczego potrzebne (do oferty prowadzi link „Wróć do opisu usługi"). */
body.certop-zamowienie .certop-header { position: static; }

/* ★ Dział z kompletem wypełnionych pól wymaganych jest podświetlony w górnym pasku
   (Piotr 2026-08-04). Przy formularzu na jednej stronie to jedyny sygnał, czego
   jeszcze brakuje - bez niego trzeba przewijać całość i szukać pustych pól.
   Sygnał niesie ptaszek i kolor, nie sam kolor - żeby działał też przy daltonizmie. */
.certop-dzialy__poz.jest-gotowy a {
	border-color: var(--accent);
	background: rgba(0,128,62,.08);
	color: var(--ink);
}
.certop-dzialy__poz.jest-gotowy .certop-dzialy__kropka {
	width: 1.05rem; height: 1.05rem; background: var(--accent);
	display: grid; place-items: center;
}
.certop-dzialy__poz.jest-gotowy .certop-dzialy__kropka::before {
	content: "✓"; color: #fff; font-size: .72rem; font-weight: 700; line-height: 1;
}

/* ---------- wybór paczkomatu (InPost) ---------- */
.certop-paczkomat { margin-bottom: .6rem; }
.certop-paczkomat__wybrany:empty { display: none; }
.certop-paczkomat__wybrany {
	margin: .5rem 0 0; padding: .5rem .7rem; border-radius: 8px;
	background: rgba(0,128,62,.08); border: 1px solid var(--accent);
	font-size: .9rem; font-weight: 600;
}
.certop-paczkomat__mapa { margin-top: .7rem; height: 500px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.certop-paczkomat__mapa[hidden] { display: none; }
@media (max-width: 700px) { .certop-paczkomat__mapa { height: 380px; } }
.certop-paczkomat__wybrany--blad { background: #fdecea; border-color: #b3261e; color: #b3261e; }

/* ★ Kolumny rzędu są PIONOWYMI listami, tak jak w FluentFormie - dzięki temu sąsiedztwo
   pól nie zmienia się, gdy warunek ukryje którekolwiek z nich. */
.certop-kol { min-width: 0; }
.certop-kol > .certop-pole:last-child { margin-bottom: 0; }

/* ★ Pola dodatkowe (pojawiające się warunkowo) stoją POD stałymi, w osobnym bloku.
   Wtrącone między pytania stałe przestawiały układ sekcji za każdym razem, gdy klient
   zaznaczył np. klimatyzację - a to wygląda, jakby formularz sam się przebudowywał. */
.certop-dodatkowe {
	margin-top: .2rem; padding-top: .9rem; border-top: 1px dashed var(--line);
}
.certop-dodatkowe:empty, .certop-dodatkowe[hidden] { display: none; }
/* ★ Kreska ODDZIELA pola dodatkowe od stałych - przy sekcji, w której nie ma czego oddzielać
   (zgoda na regulamin stoi w swojej karcie sama), zostawała sama przerywana linia nad polem
   i wyglądała jak ramka nieaktywnego pola (Piotr 2026-08-05). */
.certop-dodatkowe:has(> .certop-pole:only-child) { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- wybory poziome (termin, moment płatności) ---------- */
.certop-wybor--poziomo { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 560px) { .certop-wybor--poziomo { grid-auto-flow: row; } }

/* ---------- podsumowanie cenowe ---------- */
.certop-koniec { display: flex; justify-content: flex-end; margin-top: 1.6rem; }
/* ★ Podsumowanie zajmuje POŁOWĘ szerokości formularza (Piotr 2026-08-05). Przy 24 rem
   na 68-rem formularzu karta z ceną, rozbiciem dopłat i przyciskiem była wąskim słupkiem
   w rogu - a to ostatni element przed zapłatą i ma być widoczny jak nagłówek, nie jak
   przypis. Procent, nie sztywna wartość: przy zmianie szerokości formularza proporcja zostaje. */
.certop-suma {
	/* ★ 75 % (Piotr 2026-08-05): przy 50 % wiersz „Termin realizacji (2 dni robocze)" wraz
	   z datą nie mieścił się w linii i przeskakiwał do następnej, przez co karta rosła
	   w dół zamiast wszerz. */
	width: 100%; max-width: 75%;
	background: var(--white); border: 2px solid var(--accent); border-radius: 12px;
	padding: 1.2rem 1.3rem;
}
.certop-suma__tytul { margin: 0 0 .8rem; font-size: 1.1rem; }
.certop-suma__wiersz { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .95rem; }
.certop-suma__wiersz--dodatek { color: var(--ink-2); }
.certop-suma__wiersz--dodatek[hidden] { display: none; }
.certop-suma__wiersz--razem {
	margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--line);
	font-size: 1.15rem;
}
.certop-suma__wiersz--razem b { font-size: 1.5rem; color: var(--accent-t); }
.certop-suma__btn { width: 100%; margin-top: 1rem; justify-content: center; }
.certop-suma__nota { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-2); text-align: center; }
@media (max-width: 700px) { .certop-koniec { justify-content: stretch; } .certop-suma { max-width: none; } }

/* ---------- objaśnienie pod ikoną „i" (załączniki) ---------- */
.certop-info {
	display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem;
	/* ★ Ikona objaśnienia jest przypisem, nie akcją - w rzędzie trzech załączników trzy zielone
	   kropki ciągnęły wzrok mocniej niż same pola (Piotr 2026-08-05). Zieleń wraca na fokusie. */
	border-radius: 50%; background: var(--ink-2); color: #fff;
	font-size: .75rem; font-weight: 700; font-style: normal; cursor: help;
	position: relative; vertical-align: middle;
}
/* ★★ Dymek kotwiczy się do POLA, nie do ikony. Wyśrodkowany nad ikoną wystawał poza prawą
   krawędź strony, gdy pole stało w ostatniej kolumnie - i robił POZIOMY PASEK PRZEWIJANIA
   na całej stronie zamówienia. ⚠ Ukryty `visibility: hidden` nadal zajmuje miejsce w układzie,
   więc pasek był tam, zanim ktokolwiek najechał myszą na ikonę. Zmierzone: 1298 px przy
   viewporcie 1265. Kotwica na `.certop-pole` (i `width: min(20rem, 100%)`) trzyma dymek
   w granicach pola, więc nie wyjdzie poza stronę w żadnej kolumnie. */
.certop-pole { position: relative; }
.certop-info { position: static; }
.certop-info__tresc {
	position: absolute; bottom: calc(100% + .5rem); left: 0; transform: none;
	width: min(20rem, 100%); padding: .7rem .8rem; z-index: 20;
	background: var(--ink); color: #fff; border-radius: 8px;
	font-size: .85rem; font-weight: 400; line-height: 1.45; text-align: left;
	opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
	box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.certop-info__tresc p { margin: 0 0 .4rem; }
.certop-info__tresc p:last-child { margin-bottom: 0; }
.certop-info:hover, .certop-info:focus, .certop-info:focus-visible { background: var(--accent); }
.certop-info:hover .certop-info__tresc,
.certop-info:focus .certop-info__tresc,
.certop-info:focus-visible .certop-info__tresc { opacity: 1; visibility: visible; }
@media (max-width: 700px) {
	.certop-info__tresc { width: min(20rem, 90vw); }
}

/* ---------- podgląd wybranego zdjęcia ---------- */
.certop-podglad { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.certop-podglad:empty { display: none; }
.certop-podglad img {
	width: 7rem; height: 7rem; object-fit: cover;
	border: 1px solid var(--line); border-radius: 8px;
}

/* ★ Pojedynczy checkbox bez etykiety pola to pytanie tak/nie, nie lista wyborów -
   ramka na całą szerokość karty wyglądała, jakby nachodził na sąsiednie pola. */
.certop-wybor--prosty .certop-wybor__poz {
	border: 0; padding: .15rem 0; background: none;
}
.certop-wybor--prosty .certop-wybor__poz:hover { background: none; }
.certop-wybor--prosty .certop-wybor__poz:has(input:checked) { background: none; font-weight: 600; }

/* ---------- pola z plikami ---------- */
.certop-plik { position: relative; }
/* ★ input ukryty wizualnie, ale NIE `display:none` - inaczej znika z kolejności fokusu
   i pola nie da się wypełnić z klawiatury */
.certop-plik__input {
	position: absolute; width: 1px; height: 1px; opacity: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.certop-plik__strefa {
	display: flex; flex-direction: column; align-items: center; gap: .15rem;
	padding: 1rem .8rem; text-align: center; cursor: pointer;
	background: var(--paper); border: 1px dashed var(--line); border-radius: 10px;
	transition: border-color .15s, background .15s;
}
.certop-plik__strefa:hover { border-color: var(--accent); background: rgba(0,128,62,.04); }
.certop-plik__input:focus-visible + .certop-plik__strefa {
	outline: 3px solid var(--accent-d); outline-offset: 2px;
}
.certop-plik.jest-nad .certop-plik__strefa { border-color: var(--accent); background: rgba(0,128,62,.09); }
/* ★★ STREFY WGRYWANIA STONOWANE (Piotr 2026-08-05). Zielone kółko + zielony napis w każdej
   z trzech stref obok siebie, do tego zielone ikony „i", dawały ścianę akcentu w sekcji,
   która niczego nie rozstrzyga - klient wybiera pliki, nie kupuje. Zieleń zostaje jako
   REAKCJA (najechanie, fokus, przeciąganie pliku), zgodnie z zasadą „zieleń = działanie".
   ⚠ Napis „Wybierz plik" na grafitowo ma na papierze 10,9:1, czyli lepiej niż wcześniej. */
.certop-plik__ikona {
	display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-bottom: .15rem;
	border-radius: 50%; background: var(--line); color: var(--ink); font-size: 1.15rem; font-weight: 700;
	transition: background .15s, color .15s;
}
.certop-plik__cta { font-weight: 600; color: var(--ink); transition: color .15s; }
.certop-plik__strefa:hover .certop-plik__ikona,
.certop-plik.jest-nad .certop-plik__ikona,
.certop-plik__input:focus-visible + .certop-plik__strefa .certop-plik__ikona {
	background: var(--accent); color: #fff;
}
.certop-plik__strefa:hover .certop-plik__cta,
.certop-plik.jest-nad .certop-plik__cta,
.certop-plik__input:focus-visible + .certop-plik__strefa .certop-plik__cta { color: var(--accent-t); }
.certop-plik__meta { font-size: .82rem; color: var(--ink-2); }
.certop-pole--blad .certop-plik__strefa { border-color: #b3261e; }

/* lista wybranych plików */
.certop-plik__lista { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.certop-plik__lista:empty { display: none; }
.certop-plik__poz {
	display: flex; align-items: center; gap: .5rem;
	padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--white);
	font-size: .88rem;
}
.certop-plik__poz img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.certop-plik__nazwa { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.certop-plik__waga { color: var(--ink-2); font-weight: 400; white-space: nowrap; }
/* po wybraniu plików strefa schodzi na drugi plan - treścią jest teraz lista */
.certop-plik.ma-pliki .certop-plik__strefa { padding: .6rem; }
.certop-plik.ma-pliki .certop-plik__ikona { display: none; }
.certop-plik.ma-pliki .certop-plik__meta { display: none; }

/* ★ Wybory poziome (termin, moment płatności): równa wysokość kafli, treść wyśrodkowana
   w pionie i oddech wokół tekstu - przy dwóch opcjach o różnej długości opisu jedna
   łamała się na trzy wiersze i kafle wyglądały na przekrzywione. */
.certop-wybor--poziomo { gap: .6rem; }
.certop-wybor--poziomo .certop-wybor__poz {
	align-items: center; justify-content: flex-start;
	padding: .8rem .9rem; line-height: 1.35;
}
.certop-wybor--poziomo .certop-wybor__poz:has(input:checked) { border-width: 2px; padding: calc(.8rem - 1px) calc(.9rem - 1px); }
.certop-wybor--poziomo .certop-wybor__poz input { margin-top: 0; flex: 0 0 auto; }

/* ★ Siatka załączników: przy trzech kolumnach strefy są węższe, więc opis pod przyciskiem
   musi się łamać czytelnie, a nie rozpychać kolumny. */
.certop-rzad--3 .certop-plik__meta { font-size: .78rem; }
@media (max-width: 1000px) { .certop-rzad--3 { grid-template-columns: repeat(2, 1fr); } }

/* uwagi do załączników - pole na całą szerokość, wyższe niż zwykły textarea */
.certop-pole--tekst_dlugi textarea { min-height: 5.5rem; }

/* -------------------------------------------------------------------------
 * WALIDACJA I ZAŁĄCZNIKI PRZYJĘTE PRZEZ SERWER (2026-08-05)
 * ---------------------------------------------------------------------- */

/* ★ Podsumowanie błędów. Formularz jest na jednej stronie i ma kilkaset pikseli wysokości,
   więc czerwony napis przy polu dwa ekrany niżej jest niewidoczny - klient widzi tylko to,
   że kliknięcie „nic nie zrobiło". Lista stoi na górze i każdy punkt prowadzi do pola. */
.certop-bledy {
	margin: 0 0 1.4rem; padding: 1rem 1.1rem;
	border: 1px solid #b3261e; border-left-width: 4px; border-radius: 10px;
	background: #fdf3f2; color: #5c1712;
}
.certop-bledy:focus { outline: 3px solid #b3261e; outline-offset: 2px; }
.certop-bledy__tytul { margin: 0 0 .4rem; font-weight: 700; }
.certop-bledy__tytul:last-child { margin-bottom: 0; }
.certop-bledy__lista { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
/* kontrast 7,3:1 na tle #fdf3f2 - podkreślenie niesie informację razem z kolorem */
.certop-bledy__lista a { color: #8c1d16; font-weight: 600; }

/* ★ Pliki JUŻ PRZYJĘTE - odróżnione od listy „właśnie wybranych" (tamtą rysuje JS
   z obiektów File, ta przychodzi z serwera i przeżywa odrzucone wysłanie). */
.certop-plik__poz--wgrany { border-color: var(--accent); background: rgba(0,128,62,.05); }
.certop-plik__ok { color: var(--accent-t); font-weight: 700; flex: 0 0 auto; }
.certop-plik__usun {
	flex: 0 0 auto; width: 1.6rem; height: 1.6rem; padding: 0; cursor: pointer;
	display: grid; place-items: center; line-height: 1;
	border: 1px solid var(--line); border-radius: 6px; background: var(--white);
	color: var(--ink-2); font-size: 1rem;
}
.certop-plik__usun:hover { border-color: #b3261e; color: #b3261e; }
.certop-plik__usun:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 2px; }

/* Nota o terminie w podsumowaniu zamówienia (Piotr 2026-08-05).
   ★ Mniejsza i wyszarzona świadomie: to doprecyzowanie warunków, a nie treść do czytania
   przed decyzją. Konkretną datę niesie wiersz „Termin realizacji" nad nią, więc nota nie
   może z nim konkurować wielkością. `--ink-2` daje na papierowym tle 7,4:1, czyli powyżej AA. */
.certop-suma__termin-nota {
	margin: .35rem 0 .9rem;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--ink-2);
}
.certop-suma__termin-nota b { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------------
 * WYBÓR METODY PŁATNOŚCI W PODSUMOWANIU (2026-08-05)
 * ★ Kafelki, nie lista radio: to ostatnia decyzja przed zapłatą i ma być klikalna kciukiem.
 *   Powód, dla którego pól bramki (kod BLIK) tu NIE MA: `inc/platnosci.php`.
 * ---------------------------------------------------------------------- */
.certop-metody { margin: 1.1rem 0 .2rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.certop-metody[hidden] { display: none; }
.certop-metody__tytul { margin: 0 0 .6rem; font-size: .95rem; font-weight: 700; }
.certop-metody__lista { display: grid; gap: .5rem; }
.certop-metoda {
	display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; align-items: center;
	padding: .7rem .8rem; cursor: pointer;
	background: var(--white); border: 1px solid var(--line); border-radius: 10px;
	transition: border-color .15s, background .15s;
}
.certop-metoda:hover { border-color: var(--accent); }
.certop-metoda input { grid-row: 1 / span 2; margin: 0; }
.certop-metoda__t { font-weight: 600; }
.certop-metoda__d { grid-column: 2; font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
/* ★ Zaznaczona metoda niesie ramkę I tło - sam kolor ramki ginie przy trzech kafelkach obok siebie */
.certop-metoda:has(input:checked) {
	border-color: var(--accent); border-width: 2px; background: rgba(0,128,62,.05);
	padding: calc(.7rem - 1px) calc(.8rem - 1px);
}
.certop-metoda:has(input:focus-visible) { outline: 3px solid var(--accent-d); outline-offset: 2px; }

/* Pola bramki (kod BLIK) pod wybranym kafelkiem metody */
.certop-metoda__pola { padding: .7rem .8rem .2rem; }
.certop-metoda__pola[hidden] { display: none; }
.certop-metoda__pola input[type="text"], .certop-metoda__pola input:not([type="checkbox"]):not([type="radio"]) {
	width: 100%; max-width: 12rem; padding: .55rem .7rem; font-size: 1.05rem; letter-spacing: .12em;
	border: 1px solid var(--line); border-radius: 8px; background: var(--white);
}
.certop-metoda__pola label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .3rem; }
/* ★ Klauzula mBanku z wtyczki bywa długa - to przypis, nie treść do czytania przed zapłatą */
.certop-metoda__pola p, .certop-metoda__pola small { font-size: .78rem; color: var(--ink-2); line-height: 1.4; }
.certop-metody__nota { margin: .6rem 0 0; font-size: .84rem; color: var(--ink-2); }
.certop-metody__nota[hidden] { display: none; }

/* -------------------------------------------------------------------------
 * POLE KODU BLIK - skórka na markup wtyczki Paynow (2026-08-05)
 *
 * ★★ Wtyczka renderuje pole w klasach BOOTSTRAPA (`.row`, `.col-md-4`), których nasz motyw
 *    nie ma - bez tych stylów etykieta i input układały się jedno na drugim bez odstępów,
 *    a pole wyglądało jak zwykły input formularza. Klas nie zmieniamy (to markup wtyczki,
 *    zmieni się przy aktualizacji), tylko ubieramy je u siebie.
 * ★ Pole ma wyglądać jak miejsce na SZEŚĆ CYFR: duża czcionka, odstęp między znakami,
 *   wyśrodkowanie. Klient przepisuje kod z aplikacji banku i musi widzieć, ile już wpisał.
 * ---------------------------------------------------------------------- */
.paynow-blik-white-label { display: grid; gap: .5rem; }
.paynow-blik-white-label .row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.paynow-blik-white-label .col-md-4 { flex: 0 0 auto; }
.paynow-blik-white-label label,
.paynow-blik-white-label .form-control-label {
	margin: 0; font-size: .92rem; font-weight: 600; color: var(--ink);
}
.paynow-blik-white-label input#paynow_blik_code,
.certop-metoda__pola input[name="authorizationCode"] {
	width: 8.5rem; max-width: 100%; padding: .6rem .7rem;
	font-size: 1.35rem; font-weight: 700; letter-spacing: .35em; text-align: center;
	font-variant-numeric: tabular-nums;
	border: 2px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink);
}
.paynow-blik-white-label input#paynow_blik_code::placeholder {
	font-weight: 400; letter-spacing: .25em; color: var(--ink-3);
}
.paynow-blik-white-label input#paynow_blik_code:focus {
	border-color: var(--accent); outline: 3px solid rgba(0,128,62,.25); outline-offset: 1px;
}

/* ★ Klauzula o przetwarzaniu danych to PRZYPIS, nie treść do czytania przed zapłatą.
   Wtyczka rozwija ją własnym skryptem (`data-toggle="collapse"`, Bootstrap), którego u nas
   nie ma - więc pełny tekst po prostu zwijamy na stałe, a zostawiamy sam tytuł z odnośnikiem
   „Czytaj więcej", który rozwija go przez `:target`-owy fallback niżej. */
.paynow-data-processing-info { font-size: .76rem; color: var(--ink-3); line-height: 1.45; }
.paynow-data-processing-info-more.collapse { display: none; }
.paynow-data-processing-info-more.collapse.show,
.paynow-data-processing-info-more.collapse.in { display: block; }
.paynow-data-processing-info .expand {
	cursor: pointer; color: var(--accent-t); text-decoration: underline; white-space: nowrap;
}
.paynow-data-processing-info-more p { margin: .4rem 0 0; }

/* Objaśnienie POD grupą wyboru (np. termin wysyłki wersji papierowej).
   ★ Odstęp odwrócony względem wariantu górnego: tam oddzielał od pola niżej, tu ma się
   trzymać opcji, do których się odnosi. */
.certop-pole__pomoc--pod { margin: .45rem 0 0; }

/* ★★ PRZYCISK WYSYŁKI ZAMÓWIENIA - wariant „duży" (Piotr 2026-08-05).
   Klasa `--duzy` była używana w markupie, ale NIE ISTNIAŁA w arkuszu; razem z brakiem
   `--main` dawało to przycisk bez tła i bez ramki, czyli praktycznie niewidoczny w miejscu,
   w którym klient ma kliknąć „zamawiam". Poza rozmiarem dokładamy cień i wyraźniejszy stan
   najechania - to ostatni element ścieżki, ma się różnić od pól formularza. */
.certop-btn--duzy {
	padding: 1.05rem 1.8rem;
	font-size: 1.08rem;
	letter-spacing: .01em;
	box-shadow: 0 4px 14px rgba(0, 128, 62, .28);
}
.certop-btn--duzy:hover { box-shadow: 0 6px 18px rgba(0, 128, 62, .36); }

/* ★ Przycisk NIE na całą szerokość karty (Piotr 2026-08-05). Rozciągnięty na 75-procentowej
   karcie robił się pasem szerszym niż cała treść nad nim i przestawał wyglądać jak przycisk.
   Szerokość z zawartości + minimum, żeby nie skurczył się przy krótszej etykiecie. */
.certop-suma__btn {
	width: auto;
	min-width: 15rem;
	margin-left: auto; /* karta jest blokiem, więc przycisk sam idzie do prawej krawędzi */
}
.certop-suma__stopka { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 1.1rem; }
.certop-suma__stopka .certop-suma__nota { margin: 0; text-align: left; flex: 1 1 auto; }
.certop-suma__stopka .certop-suma__btn { margin: 0; flex: 0 0 auto; }

@media (max-width: 700px) {
	/* na telefonie odwrotnie: kciuk trafia w szeroki cel, a miejsca na dwie kolumny nie ma */
	.certop-suma__stopka { flex-direction: column; align-items: stretch; }
	.certop-suma__stopka .certop-suma__btn { width: 100%; }
	.certop-suma__stopka .certop-suma__nota { text-align: center; }
}
/* ⚠ Cień znika przy `prefers-reduced-motion`? Nie - to nie ruch. Znika przy druku. */
@media print { .certop-btn--duzy { box-shadow: none; } }

/* Wiersz terminu bywa najdłuższy w karcie (etykieta z liczbą dni + data słownie).
   ★ Etykieta może się zawijać, wartość NIE - data przełamana na dwie linijki czyta się
   jak dwie różne daty. */
.certop-suma__wiersz--termin b { white-space: nowrap; text-align: right; }

/* ★ KARTA PODSUMOWANIA - dopracowanie (Piotr 2026-08-05).
   Karta jest ostatnim, co klient czyta przed zapłatą, więc ma czytać się jak rachunek:
   nagłówek oddzielony kreską, pozycje w równych rzędach, suma wyraźnie największa. */
.certop-suma { padding: 1.5rem 1.6rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.certop-suma__tytul {
	margin: 0 0 1rem; padding-bottom: .7rem;
	border-bottom: 1px solid var(--line);
	font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2);
}
/* pozycje: etykieta po lewej, kwota po prawej, obie w jednej linii bazowej */
.certop-suma__wiersz { align-items: baseline; padding: .45rem 0; }
.certop-suma__wiersz b { font-variant-numeric: tabular-nums; }
/* dopłaty odsunięte w prawo - widać, że doliczają się do pozycji wyżej */
.certop-suma__wiersz--dodatek { padding-left: 1rem; font-size: .9rem; }
.certop-suma__wiersz--dodatek::before {
	content: "+"; position: absolute; margin-left: -1rem; color: var(--ink-3);
}
.certop-suma__wiersz--dodatek { position: relative; }
.certop-suma__wiersz--razem { margin-top: .8rem; padding-top: .9rem; }
/* termin nie jest kwotą - lekko wyszarzony, żeby nie konkurował z sumą */
.certop-suma__wiersz--termin { margin-top: .3rem; }
.certop-suma__wiersz--termin span { color: var(--ink-2); }

/* -------------------------------------------------------------------------
 * STRONA PŁATNOŚCI I PODZIĘKOWANIA (2026-08-05)
 *
 * ★★ To są szablony WooCommerce, nie nasze - Woo wnosi własne kolory (przycisk w fiolecie
 *    #7f54b3), zerowe marginesy i szerokość na całą stronę. Nie nadpisujemy plików wtyczki,
 *    tylko ubieramy jej klasy: aktualizacja Woo nic tu nie zepsuje.
 * ★ Scope pod `body.woocommerce-checkout` i `.woocommerce-order-received`, więc reguły nie
 *   wyciekają na resztę serwisu.
 * ---------------------------------------------------------------------- */
.woocommerce-checkout .certop-main,
.woocommerce-order-received .certop-main {
	max-width: 44rem; margin-inline: auto; padding: 2.5rem 1.25rem 4rem;
}
@media (max-width: 600px) {
	.woocommerce-checkout .certop-main,
	.woocommerce-order-received .certop-main { padding: 1.5rem 1rem 3rem; }
}
/* ★ Nagłówek strony w ogóle nie pokazuje się na płatności - tytuł zostaje w zakładce
   przeglądarki („Płatność"), ale na ekranie byłby powtórzeniem tego, co klient przed chwilą
   kliknął. Bez tego zostawał pas z napisem „Checkout" nad formularzem płatności. */
.woocommerce-checkout .certop-pagehead,
.woocommerce-order-received .certop-pagehead { display: none; }

/* ★ PRZYCISK: domyślny fiolet Woo na zieleń marki. Pełna szerokość, bo to jedyna akcja
   na tym ekranie - nie ma z czym konkurować o uwagę. */
.woocommerce-checkout #place_order,
.woocommerce-checkout .button.alt,
.woocommerce-order-received .button {
	width: 100%; padding: .95rem 1.2rem;
	background: var(--accent); color: #fff;
	border: 0; border-radius: 10px;
	font-size: 1.05rem; font-weight: 700; line-height: 1.2; cursor: pointer;
	transition: background .15s;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .button.alt:hover { background: var(--accent-d); color: #fff; }
.woocommerce-checkout #place_order:focus-visible { outline: 3px solid var(--accent-d); outline-offset: 3px; }

/* lista metod płatności - kafelki zamiast surowej listy Woo */
.woocommerce-checkout ul.wc_payment_methods { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.woocommerce-checkout ul.wc_payment_methods li {
	margin: 0; padding: .85rem 1rem;
	background: var(--white); border: 1px solid var(--line); border-radius: 10px;
	transition: border-color .15s, background .15s;
}
.woocommerce-checkout ul.wc_payment_methods li:hover { border-color: var(--accent); }
.woocommerce-checkout ul.wc_payment_methods li:has(input:checked) {
	border-color: var(--accent); border-width: 2px; background: rgba(0,128,62,.05);
	padding: calc(.85rem - 1px) calc(1rem - 1px);
}
.woocommerce-checkout ul.wc_payment_methods label { font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.woocommerce-checkout .payment_box {
	margin: .6rem 0 0; padding: .7rem .8rem; font-size: .88rem; line-height: 1.5;
	background: var(--paper); border-radius: 8px; color: var(--ink-2);
}
.woocommerce-checkout .payment_box::before { display: none; } /* trójkącik Woo w obcym kolorze */

/* tabela podsumowania zamówienia */
.woocommerce-checkout .shop_table, .woocommerce-order-received .shop_table {
	width: 100%; margin-bottom: 1.4rem; border-collapse: collapse; font-size: .95rem;
}
.woocommerce-checkout .shop_table th, .woocommerce-checkout .shop_table td,
.woocommerce-order-received .shop_table th, .woocommerce-order-received .shop_table td {
	padding: .55rem .2rem; text-align: left; border-bottom: 1px solid var(--line);
}
.woocommerce-checkout .shop_table tfoot .order-total td, .woocommerce-order-received .shop_table tfoot .order-total td {
	font-size: 1.15rem; font-weight: 700; color: var(--accent-t);
}

/* ★ Nota o terminie na stronie płatności - stoi nad przyciskiem, bo dotyczy decyzji,
   którą klient właśnie podejmuje. Ramka po lewej zamiast tła: ma być czytana, nie omijana
   wzrokiem jak kolejny szary blok pomocy. */
.certop-platnosc-nota {
	margin: 0 0 1rem; padding: .7rem .9rem;
	border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
	background: var(--paper); color: var(--ink);
	font-size: .9rem; line-height: 1.5;
}

/* ★ Blok „czyje to zamówienie" na stronie płatności - zastąpił ostrzeżenie Woo o zamówieniu
   gościa. Numer, adres i e-mail to trzy rzeczy, po których klient pozna swoje zlecenie. */
.certop-zlecenie {
	margin: 0 0 1.5rem; padding: 1rem 1.1rem;
	background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
}
.certop-zlecenie__tytul { margin: 0 0 .6rem; font-size: 1.05rem; }
.certop-zlecenie__lista { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; }
.certop-zlecenie__lista dt { font-size: .85rem; color: var(--ink-2); }
.certop-zlecenie__lista dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.certop-zlecenie__uwaga { margin: .8rem 0 0; font-size: .82rem; color: var(--ink-2); }

/* -------------------------------------------------------------------------
 * PODZIĘKOWANIE „Zamówienie przyjęte" (2026-08-05)
 *
 * ★ Ten sam wąski, spokojny układ co strona płatności - klient nie zmienia kontekstu między
 *   ekranem, na którym płacił, a tym, który potwierdza. Blok „Zlecenie nr …" jest dosłownie
 *   ten sam komponent (`.certop-zlecenie`), więc wygląda identycznie po obu stronach płatności.
 * ★ Używają go DWA widoki: `woocommerce/checkout/thankyou.php` (po zapłacie) i strona
 *   zamówienia przy płatności odroczonej - stąd szerokość ustawiona tutaj, a nie w regule
 *   `.woocommerce-order-received .certop-main` (ta druga nie obejmuje strony zamówienia).
 * ---------------------------------------------------------------------- */
.certop-dziekujemy { max-width: 44rem; margin-inline: auto; }
.certop-dziekujemy__tytul { margin: 0 0 .6rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); }
.certop-dziekujemy__lead { margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink); }
.certop-dziekujemy__termin { margin: 1.2rem 0 0; line-height: 1.6; }
.certop-dziekujemy__nota { display: block; margin-top: .2rem; font-size: .88rem; color: var(--ink-2); }
.certop-dziekujemy__help {
	margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
	font-size: .9rem; color: var(--ink-2);
}
/* ★ Dane do przelewu z bramki BACS (`woocommerce_thankyou_bacs`) - Woo wypisuje je jako
   nagłówek + surową listę na całą szerokość. Ubieramy w tę samą kartę co reszta ekranu.
   ⚠ Numer konta łamiemy `overflow-wrap`, nie mniejszą czcionką: to jedyna rzecz na tej
     stronie, którą klient PRZEPISUJE, więc ma być największa, nie najmniejsza. */
.certop-dziekujemy .woocommerce-bacs-bank-details {
	margin: 1.4rem 0 0; padding: 1rem 1.1rem;
	background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
}
.certop-dziekujemy .wc-bacs-bank-details-heading { margin: 0 0 .6rem; font-size: 1.05rem; }
.certop-dziekujemy .wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; }
.certop-dziekujemy .wc-bacs-bank-details li { margin: 0 0 .3rem; overflow-wrap: anywhere; }
.certop-dziekujemy .wc-bacs-bank-details li strong { font-weight: 700; }
@media (max-width: 480px) {
	.certop-zlecenie__lista { grid-template-columns: 1fr; gap: .1rem; }
	.certop-zlecenie__lista dd { margin-bottom: .5rem; }
}

/* ---------------------------------------------------------------------------
   LANDING BUDYNKU - cena wyjściowa („od 799 zł")
   ★ Budynek jest jedynym typem wycenianym indywidualnie, więc karta oferty nie może
   obiecywać ceny stałej. Podmieniamy sam prefiks przed kwotą - „teraz" znaczyłoby,
   że to cena promocyjna, a to cena OD KTÓREJ zaczynamy.
   ⚠ Reguła musi stać PO bloku z `content: "teraz "`, bo przy równej specyficzności
   wygrywa deklaracja niższa w pliku (patrz spis treści na górze main.css).
--------------------------------------------------------------------------- */
.certop-obox__p--od b::before { content: "od "; }

/* ---------------------------------------------------------------------------
   BONUSY W SEKCJI CENOWEJ (audyt) - 2026-08-06

   ★ To NIE jest wariant `.certop-extras`. Tamten blok mówi o dopłatach i jest
   celowo cichy; bonusy mają się rzucać w oczy, bo poprawiają bilans zakupu.
   Stąd akcentowana ramka i tło, a nie neutralne `--paper`.
   ⚠ Klasa `.certop-container--narrow` NIE ISTNIEJE - nie używać jej odruchowo
   przy nowych blokach (sprawdzone przy tej zmianie).
--------------------------------------------------------------------------- */
.certop-bonusy {
	margin-top: 1.75rem; padding: 1.4rem 1.5rem;
	border: 2px solid var(--accent); border-radius: var(--r);
	background: linear-gradient(180deg, rgba(0,128,62,.06), rgba(0,128,62,.02));
}
.certop-bonusy__t { font-weight: 800; font-size: 1.12rem; margin: 0; }
.certop-bonusy__lead { margin: .3rem 0 0; color: var(--ink-2); font-size: .95rem; }
.certop-bonusy__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem; margin-top: 1.1rem;
}
.certop-bonus {
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	padding: 1.1rem 1.2rem;
}
.certop-bonus__ico { width: 1.8rem; height: 1.8rem; color: var(--accent-t); }
.certop-bonus__tag {
	margin: .5rem 0 .15rem; font-family: var(--mono); font-size: .72rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--accent-t);
}
.certop-bonus__n { margin: 0 0 .35rem; font-size: 1rem; }
.certop-bonus__d { margin: 0; color: var(--ink-2); font-size: .93rem; }
.certop-bonusy__n {
	margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
	font-size: .93rem; color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   FORMULARZ ZAPYTANIA (audyt, PCHE) - 2026-08-06
--------------------------------------------------------------------------- */
/* ★★ TEN SAM JĘZYK CO FORMULARZ ZAMÓWIENIA (poprawki 2026-08-07). Klient trafia na oba
   w jednej sesji („ile kosztuje PCHE" → „zamawiam świadectwo"), a wyglądały jak z dwóch
   różnych stron: tam pola w kartach, z pierścieniem przy focusie i opcjami jako klikalne
   kafelki, tu goły blok z kreskami. Wzorce (`.certop-input`, `.certop-wybor__poz`) są
   odtworzone, a nie współdzielone przez klasę - ten formularz nie ma działów ani sekcji,
   więc podpięcie go pod `.certop-form` wciągnęłoby reguły, których tu nie ma czym wypełnić. */
/* ★ Pełna szerokość treści (Piotr 2026-08-07). Kolumna 46 rem była pisana pod czytanie
   tekstu, ale to formularz - pola stoją po dwa w rzędzie i przy wąskiej kolumnie robiły
   się nienaturalnie krótkie, a cała sekcja wyglądała jak wstawka, nie jak cel strony. */
.certop-ask { margin-inline: auto; }
.certop-ask__t { margin: 0 0 .5rem; }
.certop-ask__lead { margin: 0 0 .5rem; color: var(--ink-2); }
.certop-ask__meta { margin: 0 0 1.5rem; }
.certop-ask__kontakt { margin: 1.25rem 0 0; font-family: var(--mono); font-size: .72rem; }
.certop-ask__ok, .certop-ask__err {
	padding: 1.1rem 1.25rem; border-radius: var(--r); margin: 0 0 1rem; font-weight: 600;
}
.certop-ask__ok  { border: 2px solid var(--accent); background: rgba(0,128,62,.07); }
.certop-ask__err { border: 2px solid #b3261e; background: rgba(179,38,30,.06); color: #8c1d18; }

/* ★ Karta wydziela formularz z białej sekcji landingu. Tło `--paper`, nie białe:
   sekcja wokół jest biała, więc biała karta rysowałaby się samą ramką i ginęła. */
.certop-ask__form {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1.4rem 1.5rem;
	/* ★★ KOLOR TEKSTU USTAWIONY NA KARCIE, nie dziedziczony. Na ciemnej sekcji
	   `.certop-sec--dark` ustawia `color: #e9e2da`, więc etykiety w białej karcie
	   dziedziczyły jasny beż i były praktycznie NIEWIDOCZNE (kontrast 1,3:1).
	   ⚠ Karta na ciemnym tle zawsze musi przywrócić kolor tekstu - dziedziczenie
	     przenosi go przez granicę tła, o której CSS nic nie wie. */
	color: var(--ink);
}
/* ★ Nagłówek grupy pól. Dziewięć pól bez podziału czyta się jak ciąg bez początku
   i końca, a to dwie różne rozmowy: „o co pytasz" i „gdzie odpisać". */
.certop-ask__grupa {
	grid-column: 1 / -1; margin: .4rem 0 -.3rem; font-size: 1rem; color: var(--ink);
	padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.certop-ask__grupa:first-child { margin-top: 0; }
/* ★★ NAJWYŻEJ TRZY KOLUMNY. `auto-fit` przy pełnej szerokości robił CZTERY, a wtedy
   etykiety w rodzaju „Do czego potrzebujesz świadectwa?" łamały się na dwie linie
   i rzędy przestawały się wyrównywać. Kolumny ustawiamy więc jawnie, progami. */
/* ★★ DWIE KOLUMNY, NIE TRZY (Piotr 2026-08-10). Przy szerokim ekranie formularz
   rozkładał się na trzy kolumny: pola robiły się wąskie, etykiety łamały się na dwie
   linijki, a wzrok skakał na boki zamiast iść w dół. Dwie kolumny czyta się jednym
   ruchem oka i zostaje miejsce na etykietę w jednej linii.
   ⚠ Reguła jest wspólna dla WSZYSTKICH formularzy zapytania (audyt, budynek, PCHE) -
   nie ma klasy per typ. Zmiana dotyczy więc wszystkich trzech. */
.certop-ask__grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem 1.25rem; }
@media (min-width: 620px) { .certop-ask__grid { grid-template-columns: repeat(2, 1fr); } }
/* ★ Wariant trzykolumnowy - dziś tylko formularz audytu (`inc/zapytanie.php`).
   Trzecia kolumna wchodzi dopiero od 960 px, bo poniżej pola robią się węższe niż
   ich etykiety i te łamią się na dwie linijki. */
@media (min-width: 960px) { .certop-ask__grid--3 { grid-template-columns: repeat(3, 1fr); } }
/* ★ Gwiazdka i ikona trzymają się razem i nie zawijają same, bez słowa przed sobą. */
.certop-ask__meta-lbl { white-space: nowrap; }
/* ★★ ALE DYMEK MUSI ZAWIJAĆ. Siedzi wewnątrz `.certop-ask__meta-lbl`, więc dziedziczył
   `nowrap` i rozjeżdżał się w jedną linię, uciętą na krawędzi chmurki - objaw wyglądał
   na za wąski dymek, a przyczyna była o poziom wyżej, w regule dla gwiazdki.
   ⚠ Każdy `white-space: nowrap` na rodzicu trzeba cofnąć na treści, którą się w nim chowa. */
.certop-ask__meta-lbl .certop-info__tresc { white-space: normal; }
/* ★★ KOTWICA DYMKA OBJAŚNIENIA. `.certop-info__tresc` jest `position: absolute`, a
   `.certop-info` celowo `static` - w formularzu zamówienia dymek kotwiczy się do
   `.certop-pole` (main.css:1333). Bez tego samego `relative` tutaj szukałby najbliższego
   pozycjonowanego przodka, czyli wylądowałby przy krawędzi strony - i wystając poza nią
   zrobiłby POZIOMY PASEK PRZEWIJANIA, dokładnie jak opisano przy tamtej regule. */
.certop-ask__f, .certop-ask__set { position: relative; }
.certop-ask__f--wide { grid-column: 1 / -1; }
/* ★ 600, nie 700 - tyle waży etykieta w formularzu zamówienia (`.certop-pole__label`). */
.certop-ask__f > label, .certop-ask__set legend {
	display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; padding: 0;
}
/* ★ Gwiazdka zielona jak w zamówieniu (`.certop-pole__gw`), nie czerwona. Czerwień w tym
   motywie znaczy BŁĄD - a pole wymagane nie jest błędem, dopóki ktoś go nie pominie. */
.certop-ask__req { color: var(--accent-t); }
/* ★★ PODPOWIEDŹ NAD POLEM, nie pod nim (zmiana też w markupie, `inc/zapytanie.php`).
   Pod polem czyta się ją dopiero po wpisaniu odpowiedzi, czyli za późno - a to często
   właśnie ona mówi, czego oczekujemy („na przykład: kocioł na węgiel, pompa ciepła"). */
.certop-ask__hint { margin: 0 0 .35rem; font-size: .87rem; color: var(--ink-2); }
.certop-ask__f :where(input, select, textarea) {
	width: 100%; padding: .6rem .7rem; font: inherit; color: var(--ink);
	border: 1px solid var(--line); border-radius: 8px; background: var(--white);
}
/* ★ Pierścień przy focusie jak w `.certop-input` - sama zmiana koloru ramki o 1 px jest
   ledwo widoczna, a to jedyny sygnał „tu jesteś" przy przechodzeniu tabulatorem. */
.certop-ask__f :where(input, select, textarea):focus {
	border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(0,128,62,.15);
}
.certop-ask__f textarea { min-height: 6.5rem; resize: vertical; }
/* ★ Pole pliku nie dostaje ramki i paddingu jak input tekstowy - przeglądarka rysuje
   w nim własny przycisk, który w naszej ramce wygląda jak kontrolka w kontrolce. */
.certop-ask__f input[type="file"] { border: 0; padding: .35rem 0; background: none; }
.certop-ask__limit { display: block; margin-top: .25rem; font-size: .85rem; color: var(--ink-2); }

/* ★★ POLE „INNE" - widoczne dopiero po zaznaczeniu tej opcji, bez JS.
   ⚠ REGUŁA UKRYWA, a nie pokazuje - i to jest jej sens. Przeglądarka bez `:has()` odrzuca
     cały selektor, więc pole zostaje widoczne; przy zapisie „pokaż, gdy zaznaczone" byłoby
     tam nieosiągalne. Ta sama zasada co przy animacjach upsella i przełączniku faktury:
     awaria ma odsłaniać treść, nie chować. */
.certop-ask__inne { margin-top: .7rem; }
.certop-ask__inne label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .95rem; }
.certop-ask__set:not(:has(.certop-ask__opt input:checked[value="Inne"])) .certop-ask__inne { display: none; }
.certop-ask__set { border: 0; padding: 0; margin: 0; }
/* ★ TRZY KOLUMNY (Piotr 2026-08-10). `auto-fit` przy szerokim ekranie robił cztery,
   więc sześć opcji układało się 4 + 2 - drugi rząd wyglądał na urwany. Trzy kolumny dają
   równe 3 × 2. Poniżej 900 px schodzimy na dwie, a na telefonie na jedną. */
.certop-ask__opts { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .5rem; }
@media (min-width: 560px) { .certop-ask__opts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .certop-ask__opts { grid-template-columns: repeat(3, 1fr); } }
/* ★ Opcje jako kafelki - klikalne jest całe pole, nie sam kwadracik 13×13 px. */
.certop-ask__opt {
	display: flex; align-items: flex-start; gap: .55rem; margin: 0;
	padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px;
	background: var(--white); cursor: pointer; font-weight: 400; font-size: .95rem;
}
.certop-ask__opt:hover { border-color: var(--accent); }
.certop-ask__opt:has(input:checked) { border-color: var(--accent); background: rgba(0,128,62,.06); }
.certop-ask__opt input { width: auto; margin-top: .18rem; accent-color: var(--accent); }
.certop-ask__form button { margin-top: 1.5rem; }
.certop-ask__rodo { margin: .9rem 0 0; font-size: .87rem; color: var(--ink-2); }

@media (max-width: 700px) {
	.certop-ask__form { padding: 1.1rem; }
	/* ★ Przycisk na całą szerokość - tak samo kończy się formularz zamówienia
	   (`.certop-nawig .certop-btn`), a kciukiem trafia się w cel, nie w tekst. */
	.certop-ask__form button { width: 100%; }
}

/* ---------------------------------------------------------------------------
   FORMULARZ ZAPYTANIA NA CIEMNYM TLE - 2026-08-07
   ★★ Decyzja Piotra: na landingach audytu, budynku i PCHE to formularz jest celem
      strony, więc dostaje ciemne pole zamiast neutralnej białej sekcji, a treść
      dawnego finalnego CTA (pasek ceny, kontakt) wchodzi do niego. Patrz komentarz
      w `page-templates/template-oferta.php`.
   ⚠ POLA ZOSTAJĄ JASNE. Ciemne pola formularza czyta się gorzej przy wpisywaniu,
     a i tak musiałyby mieć jasny tekst - biała karta na ciemnym tle daje kontrast
     bez zmiany zachowania pól, które klient zna ze strony zamówienia.
--------------------------------------------------------------------------- */
.certop-ask-sec .certop-ask__t { color: #fff; }
.certop-ask-sec .certop-ask__lead { color: #d8cec5; }
.certop-ask-sec .certop-ask__meta { color: #b8aca1; font-size: var(--step-1); }
.certop-ask-sec .certop-ask__meta b { color: #fff; }
/* ★ Karta biała, nie `--paper`: na ciemnym tle papier i biel są nieodróżnialne, a biel
   wydziela formularz mocniej - to on ma tu przyciągać wzrok. */
.certop-ask-sec .certop-ask__form { background: var(--white); border-color: rgba(255,255,255,.16); }
/* ★ Wszystko wewnątrz karty wraca do ciemnego tekstu - patrz `color` przy `.certop-ask__form`. */
.certop-ask-sec .certop-ask__form :where(label, legend, h3) { color: var(--ink); }
.certop-ask-sec .certop-ask__kontakt { color: #b5aaa0; }
.certop-ask-sec .certop-ask__kontakt :where(a) { color: #d8cec5; border-bottom: 1px solid rgba(216,206,197,.35); }
.certop-ask-sec .certop-ask__kontakt :where(a):hover { color: #fff; text-decoration: none; }
/* ★ Potwierdzenie po wysłaniu jest wtedy jedyną treścią na ciemnym tle - bez tego
   zielona ramka otacza czarny tekst na ciemnym polu (kontrast poniżej 2:1). */
.certop-ask-sec .certop-ask__ok { background: rgba(78,209,136,.12); border-color: var(--acc-dark); color: #fff; }
.certop-ask-sec .certop-ask__err { background: rgba(255,255,255,.06); border-color: #ff8a80; color: #ffd9d6; }

/* ★ Pułapka na roboty - musi być NIEWIDOCZNA dla człowieka, ale obecna w DOM
   (`type="hidden"` bot pominie, więc pułapka przestałaby cokolwiek łapać). */
.certop-ask__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
   PODSTRONY: CENNIK, PORADNIKI, KONTAKT, O NAS - 2026-08-06

   ★ Bloki dopisywane na KONIEC pliku (plik jest chronologiczny). Przy konflikcie
     wygrywa reguła niższa, dlatego nowe komponenty mają własne nazwy klas,
     a nie nadpisania istniejących.
--------------------------------------------------------------------------- */

/* --- hero podstrony: lżejszy niż hero landingu (brak karty zamówienia) --- */
.certop-hero--simple { background: var(--paper); border-bottom: 1px solid var(--line); }
.certop-hero__simple { max-width: 54rem; padding-block: clamp(1.25rem, 3vw, 2.25rem); }
.certop-hero__simple h1 { margin-block: .5rem .8rem; }
/* ★ Lead w prostym hero idzie na całą szerokość bloku (54rem), a nie na 36ch
   z reguły ogólnej (`.certop-hero__lead`, ~206). Tamto ograniczenie ma sens na
   stronie głównej i landingach, gdzie obok leadu stoi zdjęcie albo karta i wąska
   kolumna jest zamierzona. Tutaj nic obok nie stoi, więc tekst zawijał się po
   kilku słowach pod szerokim nagłówkiem i wyglądał na uszkodzony. */
.certop-hero__simple .certop-hero__lead { max-width: none; color: var(--ink-2); font-size: var(--step-1); text-wrap: pretty; }
.certop-hero__simple .certop-hero__proof { margin-top: 1.25rem; }

/* --- tabela cennika ------------------------------------------------------
   ★ `overflow-x` na OPAKOWANIU, nie na tabeli: na telefonie cztery kolumny się
     nie mieszczą, a bez tego poziomy pasek przewijania dostawałaby cała strona. */
.certop-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.certop-table { width: 100%; border-collapse: collapse; min-width: 40rem; background: var(--white); }
.certop-table__cap { text-align: left; padding-bottom: .75rem; color: var(--ink-2); font-size: .93rem; }
.certop-table th, .certop-table td { padding: 1rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.certop-table thead th { font-size: .78rem; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); border-bottom-width: 2px; }
.certop-table tbody th { font-weight: 400; display: flex; gap: .8rem; align-items: flex-start; border-bottom: 0; }
.certop-table tbody tr { border-bottom: 1px solid var(--line); }
.certop-table tbody th b { display: block; font-size: 1.05rem; }
.certop-table tbody th small { display: block; color: var(--ink-2); font-size: .88rem; }
.certop-table__ico { width: 1.6rem; height: 1.6rem; color: var(--accent-t); margin-top: .15rem; }
.certop-table__tag { font-style: normal; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-t); }
.certop-table__price b { font-size: 1.25rem; font-weight: 800; white-space: nowrap; display: block; }
.certop-table__price s { color: var(--ink-3); font-size: .9rem; }
.certop-table__go { text-align: right; white-space: nowrap; }

/* --- notka z ikoną ------------------------------------------------------- */
/* ★★ NIE `display:flex` - notka niesie zdanie z <strong> i <a> w środku, a we flexie
   KAŻDY element inline staje się osobnym elementem flex i dostaje `gap` z obu stron.
   Zdanie rozpadało się na kawałki: „wystawiamy ␣ zaświadczenie ␣ , nie świadectwo",
   z przecinkiem odciętym od słowa i łamaniem w losowych miejscach. Dotyczyło wszystkich
   5 notek w motywie (cennik, kontakt, o nas ×2, współpraca).
   Ikonę pozycjonujemy bezwzględnie, a tekst zostaje normalnym akapitem - wtedy `<strong>`
   i linki płyną w wierszu tak, jak w każdym innym zdaniu na stronie. */
.certop-note {
	display: block; position: relative;
	margin-top: 1.5rem; padding: 1rem 1.2rem 1rem 3.3rem;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	color: var(--ink-2); font-size: .95rem; line-height: 1.6;
}
.certop-sec--paper .certop-note { background: var(--white); }
.certop-note .certop-ico {
	position: absolute; left: 1.2rem; top: 1.15rem;
	color: var(--accent-t); width: 1.4rem; height: 1.4rem;
}
.certop-note strong { color: var(--ink); }

/* --- dwie kolumny treści --------------------------------------------------
   ★★ DWIE KOLUMNY DOSŁOWNIE (2026-08-10). Było `auto-fit, minmax(320px, 1fr)`, czyli
   przy szerokim ekranie TRZY kolumny - wbrew nazwie klasy. Przy dwóch elementach nikt
   tego nie zauważył (puste tory się zwijają), ale czterokafelkowa sekcja „Kiedy audyt
   jest potrzebny" ułożyła się 3 + 1, z osieroconym kaflem w drugim rzędzie.
   ⚠ TA KLASA MA DRUGĄ DEFINICJĘ WYŻEJ (~530: `1fr 1fr`), którą ta reguła przesłania.
   Poprawiając szerokości, sprawdzić OBA miejsca - inaczej poprawka trafia w regułę,
   która i tak przegrywa kolejnością. */
.certop-cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.certop-cols2 h2 { font-size: var(--step-2); margin-top: 0; }
@media (max-width: 760px) { .certop-cols2 { grid-template-columns: 1fr; } }

/* --- lista dopłat --------------------------------------------------------- */
.certop-fees { list-style: none; padding: 0; margin: 0; }
.certop-fees li { display: flex; gap: 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.certop-fees li:last-child { border-bottom: 0; }
.certop-fees li > span { font-weight: 800; white-space: nowrap; min-width: 4.5rem; color: var(--ink); }
.certop-fees b { display: block; }
.certop-fees em { font-style: normal; color: var(--ink-2); font-size: .9rem; }
.certop-fees__n { margin-top: .9rem; color: var(--ink-2); font-size: .92rem; }

/* --- pasek z jednym wezwaniem -------------------------------------------- */
.certop-bar {
	display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
	margin-top: 2rem; padding: 1.25rem 1.5rem;
	border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
}
.certop-sec--paper .certop-bar { background: var(--paper); }
.certop-bar p { margin: 0; flex: 1 1 22rem; color: var(--ink-2); }
.certop-bar b { color: var(--ink); }
.certop-bar--wide { margin-top: 2.5rem; }

/* --- kanały kontaktu ------------------------------------------------------ */
.certop-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.certop-contact__card {
	display: block; padding: 1.4rem 1.5rem; background: var(--white);
	border: 1px solid var(--line); border-radius: var(--r);
	text-decoration: none !important; color: var(--ink) !important;
	transition: border-color .15s ease, transform .15s ease;
}
.certop-contact__card:hover, .certop-contact__card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.certop-contact__card--plain { cursor: default; }
.certop-contact__card--plain:hover { border-color: var(--line); transform: none; }
.certop-contact__ico { width: 1.8rem; height: 1.8rem; color: var(--accent-t); }
.certop-contact__card b { display: block; margin-top: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.certop-contact__card span { display: block; font-size: 1.2rem; font-weight: 800; margin: .15rem 0 .3rem; }
.certop-contact__card em { font-style: normal; color: var(--ink-2); font-size: .9rem; }

/* --- skróty przed formularzem --------------------------------------------- */
.certop-routes { margin-top: 1.75rem; }
.certop-routes__t { font-weight: 700; margin-bottom: .6rem; }
.certop-routes ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem 1.5rem; }
.certop-routes li { margin: 0; padding: .45rem 0; border-top: 1px solid var(--line); }
.certop-routes li a { font-weight: 700; }
.certop-routes em { display: block; font-style: normal; color: var(--ink-2); font-size: .88rem; }

/* --- zespół z pełnymi kwalifikacjami -------------------------------------- */
.certop-crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.certop-crew__p { display: flex; gap: 1.1rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem 1.4rem; }
.certop-crew__p img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: var(--paper); }
.certop-crew__p > div > b { display: block; font-size: 1.08rem; line-height: 1.3; }
.certop-crew__rola { display: block; color: var(--ink-2); font-size: .9rem; margin-bottom: .6rem; }
.certop-crew__p ul { list-style: none; padding: 0; margin: 0 0 .7rem; }
.certop-crew__p li { position: relative; padding-left: 1.3rem; margin-bottom: .3rem; font-size: .92rem; color: var(--ink-2); }
.certop-crew__p li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent-t); font-weight: 700; }
.certop-crew__nr { margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--ink-2); }
.certop-crew__nr b { color: var(--ink); }

/* --- dane firmy ----------------------------------------------------------- */
.certop-addr { font-style: normal; line-height: 1.8; }
.certop-addr b { font-size: 1.05rem; }
.certop-addr__b { margin-top: 1rem; }

/* --- historia (O nas) ----------------------------------------------------- */
.certop-story h2 { font-size: var(--step-3); margin-top: .3rem; }
.certop-story p { color: var(--ink-2); }
.certop-story strong { color: var(--ink); }

/* --- lista wszystkich poradników ------------------------------------------ */
.certop-posts--all { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
/* ★ Karta niesie `h3`, nie `h2`: nad nią stoi teraz nagłówek grupy tematycznej,
   więc `h2` w karcie łamałoby hierarchię (dwa równorzędne poziomy, z których jeden
   jest podrzędny treściowo). Selektor obejmuje oba, bo stare `h2` może jeszcze
   siedzieć w innych listach. */
.certop-posts--all .certop-post :where(h2, h3) { font-size: var(--step-1); margin: 0; }

/* --- Grupy tematyczne na liście poradników ------------------------------ */
.certop-guides__group + .certop-guides__group { margin-top: 3rem; }
.certop-guides__title {
	font-size: var(--step-2); line-height: 1.25; margin: 0 0 .35rem;
	padding-bottom: .5rem; border-bottom: 2px solid var(--line);
}
.certop-guides__lead { color: var(--ink-2); margin: 0 0 1.4rem; max-width: 62ch; }
/* Pasek z ofertą stoi między grupami, więc potrzebuje oddechu z obu stron -
   inaczej sklejałby się z kaflami grupy nad nim. */
.certop-guides__group + .certop-bar--wide { margin-top: 3rem; }
.certop-bar--wide + .certop-guides__group { margin-top: 3rem; }
.certop-post__img { display: block; margin: -1.4rem -1.4rem .9rem; }
.certop-post__img img { width: 100%; height: 170px; object-fit: cover; display: block; border-radius: var(--r) var(--r) 0 0; }

@media (max-width: 680px) {
	.certop-crew__p { flex-direction: column; }
	.certop-crew__p img { width: 76px; height: 76px; }
	.certop-bar { flex-direction: column; align-items: flex-start; }
}

/* =======================================================================
   WSPÓŁPRACA (`/wspolpraca-z-certop/`) - 2026-08-07

   ★ Własny komponent `.certop-way`, bo `.certop-branch` jest ZAJĘTA przez ciemny
     pasek ze strony głównej. Nazwa sprawdzona `grep`-em przed użyciem.
   ★ Karta jasna z ramką, nie ciemna - stoi w białej sekcji obok drugiej takiej samej,
     a dwie ciemne płachty obok siebie przykryłyby całą sekcję i zabrały jej rolę
     „tło jasne" w naprzemiennym układzie sekcji.
   ======================================================================= */
.certop-way {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: clamp(1.25rem, 2.5vw, 1.9rem);
}
/* ⚠ `--accent-t`, NIE `--acc`: tokenu o tej nazwie w motywie nie ma, a nieistniejąca
   zmienna nie daje błędu - ikona po prostu odziedziczyłaby kolor tekstu i nikt by nie
   zauważył, że akcent zniknął. */
.certop-way__ico { display: inline-flex; color: var(--accent-t); }
.certop-way__ico svg { width: 1.9rem; height: 1.9rem; }
.certop-way h3 { margin: .7rem 0 .4rem; font-size: 1.15rem; }
.certop-way__lead { margin: 0 0 .9rem; color: var(--ink-2); font-size: .95rem; }
.certop-way .certop-list { margin: 0; }

/* ★ Na papierowej sekcji karta i tak zostaje biała - różnica tła jest wtedy jedynym
   sygnałem, że to osobny blok, a nie dalszy ciąg tekstu sekcji. */
.certop-sec--paper .certop-way { border-color: #e2e0dc; }

/* =======================================================================
   DOKUMENTY PRAWNE (regulamin, polityka prywatności) - 2026-08-07

   ★ Miara czytelna dla długiego tekstu: kolumna ograniczona do ~72 znaków.
     Pełna szerokość kontenera daje wiersze po 120 znaków, w których oko gubi
     początek następnej linijki - a to są dokumenty czytane punkt po punkcie.
   ★ Spis treści stoi NAD treścią, nie z boku: na telefonie kolumna boczna
     i tak spada pod tekst, czyli trafia tam, gdzie jest już niepotrzebna.
   ======================================================================= */
.certop-legal { max-width: 46rem; }
.certop-legal__data { margin: .8rem 0 0; font-size: .92rem; color: var(--ink-2); }

.certop-legal__toc {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 2.5rem;
}
.certop-legal__toc h2 { margin: 0 0 .6rem; font-size: 1.02rem; }
.certop-legal__toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.certop-legal__toc li { margin: .25rem 0; font-size: .93rem; break-inside: avoid; }

.certop-legal__sec { margin-bottom: 2.5rem; scroll-margin-top: 1.5rem; }
.certop-legal__sec h2 { font-size: 1.15rem; margin: 0 0 .8rem; }
/* ★ Numer paragrafu w akcencie - przy dwudziestu nagłówkach to jedyny sposób,
   żeby dało się do nich skakać wzrokiem. */
.certop-legal__nr { color: var(--accent-t); font-weight: 700; }
.certop-legal__lead { margin: 0 0 .9rem; color: var(--ink-2); }
.certop-legal__pkt { margin: 0; padding-left: 1.4rem; }
.certop-legal__pkt li { margin: 0 0 .65rem; line-height: 1.65; }
.certop-legal__pkt li:last-child { margin-bottom: 0; }

.certop-legal__stopka {
	margin-top: 3rem; padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: .93rem; color: var(--ink-2);
}

@media (max-width: 640px) {
	/* Dwie kolumny spisu treści przy pozycjach po 40 znaków dają jedno słowo w wierszu. */
	.certop-legal__toc ol { columns: 1; }
}

/* =========================================================================
   WPIS PORADNIKA (Etap A z CERTOP-ARTYKULY-PLAN.md)

   ★ Poradniki dają ~90 % ruchu witryny, więc ten blok obsługuje najczęściej
     oglądany widok w całym serwisie. Wszystko scope'owane pod `.certop-wpis`
     (klasa <body> z `inc/artykuly.php`), żeby nie ruszyć pozostałych stron.
   ★ Miara tekstu zostaje z `.certop-entry` (48 rem) - te artykuły czyta się
     akapit po akapicie, a pełna szerokość kontenera daje wiersze po 120 znaków.
   ========================================================================= */

/* --- nagłówek wpisu: tytuł + kto i kiedy -------------------------------
   ★★ OKRUSZKI MUSZĄ MIEĆ TĘ SAMĄ KOLUMNĘ CO TYTUŁ (Piotr 2026-08-10).
   Tytuł i treść wpisu (`.certop-entry`) siedzą w kolumnie 48rem wyśrodkowanej
   w kontenerze, a okruszki były bezpośrednim dzieckiem kontenera - czyli zaczynały
   się 174 px w lewo od tytułu. Wyglądało to, jakby tytuł był wyśrodkowany, a ścieżka
   dosunięta do krawędzi; naprawdę odstawała ścieżka.
   ⚠ Wartość 48rem powtarza się tu i w `.certop-entry` (~525) - zmieniając szerokość
   kolumny wpisu, poprawić OBA miejsca, inaczej rozjazd wróci. */
.certop-wpis__headin,
.certop-wpis__head .certop-crumbs { max-width: 48rem; margin-inline: auto; }
.certop-wpis__head h1 { font-size: var(--step-3); margin-bottom: .7rem; }
/* Pasek meta: autor, daty, czas czytania. Kropka rozdzielająca robiona
   pseudoelementem, żeby przy zawijaniu na telefonie nie zostawała sierotą. */
.certop-wpis__meta {
	display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
	margin: 0; font-size: .88rem; color: var(--ink-2);
}
.certop-wpis__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.certop-wpis__meta span + span::before {
	content: ""; width: 4px; height: 4px; border-radius: 50%;
	background: var(--ink-3); flex: none; margin-left: -.55rem;
}

.certop-wpis__body { padding-top: 2.25rem; }
.certop-wpis__foto { width: 100%; border-radius: var(--r); margin-bottom: 1.75rem; }

/* --- spis treści -------------------------------------------------------- */
/* ★ Nad treścią, nie w kolumnie bocznej: na telefonie kolumna boczna i tak
   spada pod tekst, czyli ląduje tam, gdzie jest już niepotrzebna. Ta sama
   decyzja co przy dokumentach prawnych. */
.certop-toc {
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
	padding: 1.15rem 1.4rem; margin: 0 0 2rem;
}
.certop-toc h2 { font-size: 1rem; margin: 0 0 .55rem; }
.certop-toc ol { margin: 0; padding-left: 1.25rem; }
.certop-toc li { margin: .3rem 0; font-size: .93rem; }
.certop-toc :where(a) { color: var(--ink); }
.certop-toc :where(a):hover { color: var(--accent-t); }

/* Oddech nad kotwicą - nagłówek nie jest przyklejony, więc chodzi o oddech,
   nie o zasłanianie (patrz komentarz przy --pe-anchor w sekcji nagłówka). */
.certop-wpis .certop-entry h2 { scroll-margin-top: 1.5rem; margin-top: 2.4rem; }
.certop-wpis .certop-entry h3 { margin-top: 1.8rem; }

/* ★ NAGŁÓWKI W TREŚCI WPISU SĄ MNIEJSZE NIŻ W SEKCJACH STRON.
   Globalne `h2` to `--step-3` (do 2,6 rem) i na landingu jest w porządku: tam
   nagłówek otwiera całą sekcję i ma wokół siebie dużo powietrza. W artykule stoi
   co kilka akapitów nad tekstem 1,075 rem, więc różnica robiła się dwuipółkrotna
   i nagłówki przykrywały to, co jest tu najważniejsze - czytany tekst.
   ⚠ Scope wyłącznie `.certop-wpis .certop-entry`, żeby nie ruszyć sekcji na
   stronach ofertowych ani spisu treści (`.certop-toc h2` ma własny rozmiar). */
.certop-wpis .certop-entry h2 { font-size: var(--step-2); line-height: 1.25; }
.certop-wpis .certop-entry h3 { font-size: var(--step-1); line-height: 1.3; }
.certop-wpis .certop-entry h4 { font-size: var(--step-0); line-height: 1.35; }

/* --- CTA pod artykułem -------------------------------------------------- */
/* ★ Zieleń tylko na przycisku. Cała karta na akcencie krzyczałaby w tekście
   poradnika i czytała się jak baner reklamowy - a czytelnik przyszedł po wiedzę. */
.certop-wpis__cta {
	margin: 2.75rem 0 0; padding: 1.6rem 1.75rem;
	background: var(--paper); border: 1px solid var(--line);
	border-left: 4px solid var(--accent); border-radius: var(--r);
}
.certop-wpis__cta h2 { font-size: var(--step-1); margin: 0 0 .55rem; }
.certop-wpis__ctad { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: baseline; margin: 0 0 1.1rem; color: var(--ink-2); font-size: .95rem; }
.certop-wpis__ctad b { font-size: var(--step-2); color: var(--ink); font-weight: 800; }
.certop-wpis__ctad--txt { display: block; text-wrap: pretty; }
.certop-wpis__ctab { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin: 0; }
.certop-wpis__ctal { font-weight: 700; font-size: .92rem; }

/* --- ramka autora ------------------------------------------------------- */
.certop-wpis__autor {
	margin-top: 2.25rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
	display: flex; gap: 1.15rem; align-items: flex-start;
}
.certop-wpis__autorfoto { width: 96px; height: 96px; border-radius: 50%; flex: none; object-fit: cover; }
.certop-wpis__autorimie { margin: 0 0 .25rem; font-weight: 800; }
/* Rola w drugiej linii - dopisana w tym samym wierszu rozpychała nazwisko
   i przy dłuższym tytule zawodowym łamała się w przypadkowym miejscu. */
.certop-wpis__autorimie span { display: block; font-weight: 400; font-size: .88rem; color: var(--ink-2); }
.certop-wpis__autornr { margin: 0 0 .3rem; font-size: .92rem; }
.certop-wpis__autorkwal { margin: 0 0 .5rem; font-size: .86rem; color: var(--ink-2); }
.certop-wpis__autorlink { margin: 0; font-size: .9rem; font-weight: 700; }

@media (max-width: 640px) {
	.certop-wpis__autor { flex-direction: column; }
	.certop-wpis__autorfoto { width: 72px; height: 72px; }
	.certop-wpis__cta { padding: 1.25rem 1.2rem; }
}

/* --- CENNIK: hero dwukolumnowy z kartą cen (2026-08-10) ------------------
   Prawa kolumna hero na stronie cennika stała pusta, bo `.certop-hero__simple`
   ma `max-width: 54rem` i zajmuje tylko lewą część kontenera. Zamiast poszerzać
   tekst (dłuższy wiersz = gorsze czytanie) dokładamy kartę z cenami.
   ⚠ Karta jest DRUGA W ŹRÓDLE, więc na telefonie ląduje pod tekstem sama z siebie -
     nie potrzeba `order` ani zmiany kolejności DOM. */
.certop-hero__split {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
}
.certop-hero--split .certop-hero__simple { max-width: none; }
.certop-hero__box { align-self: center; }

.certop-hero__prices { list-style: none; margin: .6rem 0 0; padding: 0; }
.certop-hero__prices li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.certop-hero__prices li:last-child { border-bottom: 0; }
.certop-hero__prices span { color: var(--ink-2); font-size: .95rem; }
.certop-hero__prices b { font-family: var(--mono); font-size: 1.15rem; white-space: nowrap; }

@media (max-width: 860px) {
	.certop-hero__split { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- QUIZ „czy potrzebuję świadectwa" (2026-08-10) -----------------------
   Zastępuje formularze FluentForm 78 (mieszkanie) i 79 (dom) w artykułach.
   ZERO JS - logika stoi na `:has()` i `:checked`.

   ★★ KOLEJNOŚĆ REGUŁ JEST CELOWA: domyślnie widać WSZYSTKO (pytania, wszystkie
      odpowiedzi i podpisy „Jeśli tak:"), a chowanie wchodzi dopiero wewnątrz
      `@supports selector(:has(*))`. Odwrotny zapis - schować domyślnie i odsłaniać
      przez `:has()` - dałby na starszej przeglądarce PUSTĄ RAMKĘ, bez śladu, że coś
      tam miało być.

   ★ Klasy niosą ROLĘ, nie treść: `--dalej` / `--koniec` zamiast „tak" / „nie".
     W gałęzi „dom w budowie" quiz kończy się na odpowiedzi „tak", a w mieszkaniu
     na „nie" - jedna reguła obsługuje oba, bo patrzy na rolę.
   ------------------------------------------------------------------------ */
.certop-quiz {
	border: 1px solid var(--line); border-radius: var(--r);
	padding: clamp(1.1rem, 3vw, 1.75rem); margin: 2rem 0; background: var(--white);
}
.certop-quiz__t { margin: 0 0 .35rem; font-size: var(--step-1); }
.certop-quiz__lead { margin: 0 0 1.25rem; color: var(--ink-2); font-size: var(--step--1); }

.certop-quiz__wybor,
.certop-quiz__krok { padding-top: 1rem; border-top: 1px solid var(--line); margin-top: 1rem; }
.certop-quiz__wybor:first-of-type,
.certop-quiz__krok:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.certop-quiz__galaz > .certop-quiz__krok:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.certop-quiz__q { display: flex; gap: .6rem; align-items: baseline; margin: 0 0 .7rem; font-weight: 600; }
.certop-quiz__nr {
	flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	background: var(--paper); color: var(--ink-2); font-size: .85rem;
	display: inline-grid; place-items: center; font-weight: 700;
}

.certop-quiz__odp { display: flex; gap: .6rem; flex-wrap: wrap; }
.certop-quiz__odp--kolumna { flex-direction: column; align-items: flex-start; }
/* Radio schowany DOSTĘPNIE - nie `display:none`, bo to wycina go z nawigacji klawiaturą. */
.certop-quiz__r { position: absolute; opacity: 0; width: 1px; height: 1px; }
.certop-quiz__odp label {
	display: inline-block; padding: .5rem 1.5rem; border: 1px solid var(--line);
	border-radius: 999px; cursor: pointer; font-weight: 600; background: var(--white);
}
.certop-quiz__odp label:hover { border-color: var(--accent); }
.certop-quiz__r:checked + label { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); }
.certop-quiz__r:focus-visible + label { outline: 2px solid var(--accent-t); outline-offset: 2px; }

.certop-quiz__wynik {
	margin: .9rem 0 0; padding: .9rem 1.1rem; border-radius: var(--r);
	background: var(--paper); border-left: 3px solid var(--ink-3);
}
.certop-quiz__wynik--tak { border-left-color: var(--accent); }
.certop-quiz__wt { margin: 0; }
.certop-quiz__wynik--tak .certop-quiz__wt { margin-bottom: 1rem; font-weight: 600; }
/* Podpis warunku - potrzebny TYLKO w wersji bez `:has()`, gdzie wszystko stoi naraz. */
.certop-quiz__gdy { font-weight: 700; color: var(--ink-2); display: block; margin: 0 0 .3rem; }

@supports selector(:has(*)) {
	.certop-quiz__gdy,
	.certop-quiz__wynik,
	.certop-quiz__galaz,
	.certop-quiz__krok--2,
	.certop-quiz__krok--3,
	.certop-quiz__krok--4,
	.certop-quiz__krok--5,
	.certop-quiz__krok--6 { display: none; }

	/* Wynik odpowiedzi, która kończy quiz. `--o1` / `--o2` to POZYCJA odpowiedzi -
	   ostatni krok gałęzi „dom w budowie" kończy się wynikiem przy OBU odpowiedziach,
	   więc nie wystarczy jedna reguła „pokaż wynik". */
	.certop-quiz__krok:has(.certop-quiz__r--o1:checked) .certop-quiz__wynik--o1,
	.certop-quiz__krok:has(.certop-quiz__r--o2:checked) .certop-quiz__wynik--o2 { display: block; }

	/* Gałąź pasująca do wybranej opcji - wiązanie po POZYCJI (patrz komentarz w quiz.php). */
	.certop-quiz__wybor:has(.certop-quiz__rw--w1:checked) ~ .certop-quiz__galaz--g1,
	.certop-quiz__wybor:has(.certop-quiz__rw--w2:checked) ~ .certop-quiz__galaz--g2,
	.certop-quiz__wybor:has(.certop-quiz__rw--w3:checked) ~ .certop-quiz__galaz--g3 { display: block; }

	/* ★★ PEŁNY ŁAŃCUCH RODZEŃSTWA, a nie „krok N zależy od kroku N-1". Gdyby każdy krok
	   patrzył tylko na poprzednika, zmiana odpowiedzi na pytanie 1 zostawiłaby widoczne
	   kroki niżej z poprzednimi zaznaczeniami - quiz pokazywałby wynik ścieżki, której
	   czytelnik już nie wybrał. Sprawdzone klikaniem, nie samym czytaniem CSS. */
	.certop-quiz__krok--1:has(.certop-quiz__r--dalej:checked) ~ .certop-quiz__krok--2 { display: block; }

	.certop-quiz__krok--1:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--2:has(.certop-quiz__r--dalej:checked) ~ .certop-quiz__krok--3 { display: block; }

	.certop-quiz__krok--1:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--2:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--3:has(.certop-quiz__r--dalej:checked) ~ .certop-quiz__krok--4 { display: block; }

	.certop-quiz__krok--1:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--2:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--3:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--4:has(.certop-quiz__r--dalej:checked) ~ .certop-quiz__krok--5 { display: block; }

	.certop-quiz__krok--1:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--2:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--3:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--4:has(.certop-quiz__r--dalej:checked)
		~ .certop-quiz__krok--5:has(.certop-quiz__r--dalej:checked) ~ .certop-quiz__krok--6 { display: block; }
}