@media all {

}
@media (max-width: 1200px) {

}
@media (max-width: 1000px) {
	
}
@media (max-width: 700px) {

}

/* === [BLOCK: header-logo-size] START === */
/* Logo w headerze — 54px na PC, 42px na mobile.
   Wysokosc ZMNIEJSZONA 27.08.2026 z 70/55. Powod: z pliku logo zniknal dolny pas
   z ikonami (zaufanie/wyniki/nowoczesnosc), na prosbe klientki. Plik schudl ze 160
   do 100 px wysokosci, wiec przy niezmienionej regule `height: 70px` sama nazwa
   "FINANSE 5.0" uroslabym o 70% — logo mialo 378 px szerokosci zamiast wczesniejszych 236.
   Regula steruje WYSOKOSCIA CALEGO PLIKU, a nie wielkoscia liter, wiec kazde przyciecie
   grafiki trzeba tu skompensowac. */
header.header_main section .logo a img,
header.header_main .logo a img {
	height: 54px;
	width: auto;
	max-width: none;
}
@media (max-width: 600px) {
	header.header_main section .logo a img,
	header.header_main .logo a img {
		height: 42px;
	}
}
/* === [BLOCK: header-logo-size] END === */
/* === [BLOCK: landing-e-maestro] START === */
/* ===== e-maestro.pl — landing-only CSS, palette niebieska e-PIT vibe ===== */

/* Override --mark per-klient (body scope, nie :root, zgodne z regułą #1):
   --mark zmienia kolor wszystkich klocków używających tej zmiennej:
   pricing-card.featured border, step-number background, pricing-cta.primary itd. */
body.em-landing {
	--mark: #2563EB;
	--mark-dark: #1D4ED8;
	--mark-light: rgba(37,99,235,.12);
}

/* ===== Hero — używamy klocka hero-light (bg-ok-sky), tu tylko micro-tweaki ===== */

/* Mockup w hero - lekkie rotate na desktop, brak na mobile */
.bg-ok-sky .em-hero-mockup {
	background: #fff;
	border: 1px solid rgba(37,99,235,.12);
	border-radius: 16px;
	box-shadow: 0 32px 80px -32px rgba(37,99,235,.25);
	overflow: hidden;
	transform: rotate(-1deg);
	transition: transform .4s;
	max-width: 480px;
	margin-left: auto;
	margin-right: 0;
	box-sizing: border-box;
}
.bg-ok-sky .em-hero-mockup:hover {
	transform: rotate(0);
}
@media (max-width: 768px) {
	.bg-ok-sky .em-hero-mockup {
		transform: none;
	}
}

/* ===== Sekcja "Co e-Maestro zrobi za Ciebie" (feature-cards override) ===== */

.em-section h2 {
	text-align: center;
	font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
	font-weight: 700 !important;
	color: #0F172A;
	margin: 0 0 .75rem !important;
}
.em-section .em-section-subtitle {
	text-align: center;
	color: #64748B;
	font-size: 1.05rem;
	max-width: 55ch;
	margin: 0 auto 3rem !important;
}

/* Feature-cards z paletą e-maestro */
.em-section .feature-card .feat-ico {
	background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(16,185,129,.12));
}

/* ===== Sekcja "Jak zacząć" (steps-list już renderuje się z --mark, czyli niebieskie) ===== */

/* ===== Trust-bar pod hero (mała linijka z logo systemów) ===== */
.em-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	align-items: center;
	padding: 2rem 1rem;
	border-top: 1px solid #E5E9F2;
	border-bottom: 1px solid #E5E9F2;
	background: #F8FAFC;
}
.em-trust-bar span {
	font-size: .85rem;
	color: #64748B;
	font-weight: 500;
}
.em-trust-bar strong {
	color: #0F172A;
}

/* ===== Final CTA strip (przed footer) ===== */
.em-cta-final {
	background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
	color: #fff;
	padding: 4rem 2rem !important;
	border-radius: 20px;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	box-shadow: 0 32px 80px -32px rgba(37,99,235,.5);
}
.em-cta-final h2 {
	color: #fff !important;
	font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
	margin: 0 0 1rem !important;
}
.em-cta-final p {
	color: rgba(255,255,255,.85);
	font-size: 1.1rem;
	max-width: 50ch;
	margin: 0 auto 2rem !important;
}
.em-cta-final .btn-cta-white {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #fff;
	color: #2563EB !important;
	padding: 1rem 2rem;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none !important;
	transition: transform .15s, box-shadow .2s;
	box-shadow: 0 12px 32px -12px rgba(0,0,0,.3);
}
.em-cta-final .btn-cta-white:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px -12px rgba(0,0,0,.4);
}
.em-cta-final .em-cta-meta {
	margin-top: 1rem;
	font-size: .85rem;
	color: rgba(255,255,255,.7);
}

@media (max-width: 768px) {
	.em-cta-final {
		padding: 3rem 1.5rem !important;
		margin: 0 1rem;
	}
}

/* === [BLOCK: landing-e-maestro] END === */
/* === [BLOCK: landing-pozycjosprawdzator] START === */
/* ===== POZYCJOSPRAWDZATOR — landing-only CSS ===== */
/* HERO — bez bg, tło jest na <section class="ps-bg-hero"> (Reguła #11) */
.ps-hero{padding:3rem 0 4rem;overflow:hidden}
section.ps-bg-hero{background:linear-gradient(135deg,rgba(124,58,237,.08) 0%,#fff 50%,rgba(16,185,129,.08) 100%)}
.ps-hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:900px){.ps-hero-grid{grid-template-columns:1fr 1fr;gap:3rem}}
.ps-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;padding:.4rem .85rem;border-radius:9999px;margin-bottom:1.2rem}
.ps-eyebrow-lab{background:rgba(16,185,129,.12);color:#047857}
.ps-pulse{width:.5rem;height:.5rem;border-radius:9999px;background:#10b981;animation:pspulse 2s infinite}
@keyframes pspulse{0%,100%{opacity:1}50%{opacity:.4}}
.ps-h1{font-family:var(--font-family-header);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0 0 1.2rem}
.ps-text-mark{color:#7c3aed}
.ps-text-lab{color:#047857}
.ps-text-warn{color:#b45309}
.ps-text-rose{color:#be123c}
.ps-text-muted{color:#94a3b8}
.ps-lead{font-size:clamp(1rem,1.5vw,1.2rem);color:#475569;line-height:1.6;max-width:550px;margin:0 0 1.8rem}
.ps-cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.ps-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:.95rem;text-decoration:none;transition:all .2s}
.ps-btn-mark{background:#6d28d9;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ps-btn-mark:hover{background:#5b21b6;box-shadow:0 4px 12px rgba(124,58,237,.3)}
.ps-btn-ghost{background:#fff;color:#1e293b;border:1px solid #e2e8f0}
.ps-btn-ghost:hover{background:#f8fafc}
.ps-btn-ghost-dark{background:rgba(15,23,42,.4);color:#fff;border:1px solid rgba(255,255,255,.3)}
.ps-btn-ghost-dark:hover{background:rgba(15,23,42,.6)}
.ps-btn-light{background:#fff;color:#0f172a}
.ps-btn-big{font-size:1rem;padding:1rem 2rem}
.ps-checks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.88rem;color:#64748b}
.ps-checks div{display:flex;align-items:center;gap:.4rem}
.ps-check{color:#10b981;font-weight:700}

.ps-mockup-wrap{position:relative}
.ps-mockup{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 25px 50px -12px rgba(124,58,237,.15);overflow:hidden;transform:rotate(1deg);transition:transform .5s;max-width:100%;box-sizing:border-box}
@media(max-width:768px){.ps-mockup{transform:none}}
.ps-mockup:hover{transform:rotate(0)}
.ps-browser-bar{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.6rem 1rem;display:flex;align-items:center;gap:.4rem}
.ps-dot{width:.7rem;height:.7rem;border-radius:9999px}
.ps-dot-r{background:#fb7185}.ps-dot-y{background:#fbbf24}.ps-dot-g{background:#34d399}
.ps-url{margin-left:.7rem;font-family:'SF Mono',monospace;font-size:.7rem;color:#94a3b8}
.ps-mockup-body{padding:1.2rem}
.ps-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.2rem}
.ps-kpi{border:1px solid #e2e8f0;border-radius:.65rem;padding:.7rem}
.ps-kpi-label{display:flex;align-items:center;gap:.4rem;font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ps-kpi-icon{width:1.6rem;height:1.6rem;border-radius:9999px;display:grid;place-items:center;font-size:.75rem}
.ps-bg-lab{background:rgba(16,185,129,.15)}
.ps-bg-mark{background:rgba(124,58,237,.15)}
.ps-bg-warn{background:rgba(245,158,11,.15)}
.ps-bg-rose{background:rgba(244,63,94,.15)}
.ps-bg-mark-soft{background:rgba(124,58,237,.1)}
.ps-bg-lab-soft{background:rgba(16,185,129,.1)}
.ps-bg-warn-soft{background:rgba(245,158,11,.1)}
.ps-kpi-num{font-family:var(--font-family-header);font-size:1.5rem;font-weight:700;margin-top:.2rem}
.ps-table-mini{display:flex;flex-direction:column;gap:.3rem}
.ps-tm-head{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;margin-bottom:.4rem}
.ps-meta{color:#94a3b8;font-size:.78rem}
.ps-mono{font-family:'SF Mono',monospace;color:#64748b;font-size:.7rem}
.ps-tm-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem .5rem;border-radius:.4rem;font-size:.85rem}
.ps-tm-row:hover{background:#f8fafc}
.ps-pos{font-family:'SF Mono',monospace;font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:9999px}
.ps-pos-good{background:rgba(16,185,129,.15);color:#047857}
.ps-pos-mid{background:rgba(245,158,11,.15);color:#b45309}
.ps-trend{font-size:.7rem;margin-left:.4rem}
.ps-up{color:#059669}
.ps-down{color:#e11d48}

.ps-trust{padding:1.5rem 0;background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.ps-trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:center;max-width:1200px;margin:0 auto;padding:0 1rem}
@media(min-width:768px){.ps-trust-grid{grid-template-columns:repeat(4,1fr)}}
.ps-trust-num{font-family:var(--font-family-header);font-size:clamp(1.8rem,4vw,2.5rem);font-weight:700}
.ps-trust-lbl{font-size:.85rem;color:#64748b;margin-top:.3rem;line-height:1.4}

.ps-section-roomy{max-width:1200px;margin:0 auto;padding:4rem 1rem;box-sizing:border-box;width:100%;min-width:0;overflow-x:hidden}
@media(max-width:768px){.ps-section-roomy{padding:3rem .75rem}}
.ps-section-head{text-align:center;max-width:780px;margin:0 auto 3rem}
.ps-section-head-tight{margin-bottom:1.5rem}
.ps-eyebrow-mark-text,.ps-eyebrow-lab-text,.ps-eyebrow-light{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.8rem}
.ps-eyebrow-mark-text{color:#6d28d9}
.ps-eyebrow-lab-text{color:#047857}
.ps-eyebrow-light{color:#a78bfa}
.ps-h2{font-family:var(--font-family-header);font-size:clamp(1.5rem,3.5vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0 0 1rem;word-break:break-word;hyphens:auto}
.ps-h2-light{font-family:var(--font-family-header);font-size:clamp(1.5rem,3.5vw,3rem);font-weight:700;line-height:1.15;color:#fff;margin:0 0 1rem;word-break:break-word;hyphens:auto}
.ps-h3{font-family:var(--font-family-header);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;margin:0 0 .8rem}
.ps-section-lead{font-size:clamp(1rem,1.3vw,1.1rem);color:#475569;line-height:1.6;margin:.5rem auto;max-width:680px}
.ps-section-lead-light{font-size:clamp(1rem,1.3vw,1.1rem);color:#cbd5e1;line-height:1.6;margin:.5rem auto;max-width:680px}
.ps-section-foot{text-align:center;font-size:.78rem;color:#94a3b8;max-width:600px;margin:1.5rem auto 0;line-height:1.5}
.ps-code-light{background:rgba(255,255,255,.1);padding:.15rem .4rem;border-radius:.3rem;font-family:'SF Mono',monospace;font-size:.85em;color:#c4b5fd}

.ps-features-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:2.5rem;grid-auto-rows:1fr}
@media(min-width:768px){.ps-features-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.ps-features-grid{grid-template-columns:repeat(3,1fr)}}
.ps-feat-card{display:flex;flex-direction:column;height:100%}
.ps-feat-card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;transition:all .2s}
.ps-feat-card:hover{box-shadow:0 10px 25px -5px rgba(0,0,0,.1);transform:translateY(-3px)}
.ps-feat-icon{width:3rem;height:3rem;border-radius:.75rem;display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem}
.ps-feat-card h3{font-family:var(--font-family-header);font-size:1.1rem;font-weight:600;margin:0 0 .5rem}
.ps-feat-card p{font-size:.88rem;color:#475569;line-height:1.6;margin:0}

.ps-gamechanger{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 50%,#4c1d95 100%);color:#fff;border-radius:1.5rem;padding:2.5rem 2rem;box-shadow:0 25px 50px -12px rgba(76,29,149,.4);position:relative;overflow:hidden}
.ps-gc-emoji{font-size:5rem;float:left;margin-right:1.5rem;line-height:1}
@media(min-width:768px){.ps-gamechanger{padding:3rem}}
.ps-gc-badge{display:inline-block;background:#f59e0b;color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.3rem .8rem;border-radius:9999px;margin-bottom:.8rem}
.ps-gc-h3{font-family:var(--font-family-header);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;line-height:1.2;margin:0 0 1rem}
.ps-gc-lead{color:#ddd6fe;font-size:1.05rem;line-height:1.6;margin:0 0 .8rem}
.ps-gc-lead strong{color:#fff}
.ps-gc-sub{color:#c4b5fd;font-size:.88rem;margin:0}

.ps-steps-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:768px){.ps-steps-grid{grid-template-columns:repeat(4,1fr)}}
.ps-step{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;height:100%}
.ps-step-num{width:2.5rem;height:2.5rem;border-radius:9999px;background:#6d28d9;color:#fff;font-family:var(--font-family-header);font-weight:700;font-size:1.1rem;display:grid;place-items:center;margin-bottom:1rem}
.ps-step-num-final{background:#047857}
.ps-step h3{font-family:var(--font-family-header);font-size:1.1rem;font-weight:600;margin:0 0 .5rem}
.ps-step p{font-size:.88rem;color:#475569;line-height:1.6;margin:0}

/* PODGLAD ciemny — bg jest na <section class="ps-bg-app"> (Reguła #11) */
.ps-preview-wrap{color:#fff;padding:4rem 1rem;box-sizing:border-box;overflow-x:hidden}
@media(max-width:768px){.ps-preview-wrap{padding:3rem .75rem}}
section.ps-bg-app{background:#0f172a;background-image:radial-gradient(circle at 20% 50%,rgba(124,58,237,.2) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(16,185,129,.15) 0%,transparent 50%),linear-gradient(180deg,#0f172a 0%,#1e293b 100%);color:#fff;overflow-x:hidden}
section.ps-bg-app .ps-app-mockup,section.ps-bg-app .ps-app-body{max-width:100%;min-width:0;box-sizing:border-box}
section.ps-bg-app h1,section.ps-bg-app h2,section.ps-bg-app h3{color:#fff}
.ps-preview-wrap > .ps-section-head{margin:0 auto 2.5rem}
.ps-app-mockup{max-width:100%;width:100%;margin:0 auto;background:#fff;color:#0f172a;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px rgba(0,0,0,.5);box-sizing:border-box;min-width:0}
@media(min-width:1100px){.ps-app-mockup{max-width:1100px}}
.ps-app-body{padding:.75rem;box-sizing:border-box;min-width:0}
@media(min-width:768px){.ps-app-body{padding:2rem}}
.ps-browser-bar .ps-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.ps-app-head{margin-bottom:1.5rem}
.ps-breadcrumb{font-size:.75rem;color:#94a3b8;margin-bottom:.3rem}
.ps-app-title-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.5rem}
.ps-app-title{font-family:var(--font-family-header);font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700;margin:0}
.ps-app-sub{font-family:'SF Mono',monospace;font-size:.78rem;color:#64748b;margin:.2rem 0 0}
.ps-app-actions{display:flex;gap:.4rem;font-size:.75rem}
.ps-app-btn{background:#f1f5f9;padding:.4rem .7rem;border-radius:.5rem}
.ps-app-btn-mark{background:#6d28d9;color:#fff}
.ps-kpi-grid-6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-bottom:1.5rem;width:100%}
@media(min-width:768px){.ps-kpi-grid-6{grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}}
.ps-kpi-grid-6 .ps-kpi{padding:.55rem;min-width:0}
.ps-kpi-grid-6 .ps-kpi-label{font-size:.6rem;gap:.3rem}
.ps-kpi-grid-6 .ps-kpi-icon{width:1.3rem;height:1.3rem;font-size:.65rem}
.ps-table-cap{font-size:.72rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:.5rem}
.ps-table-app{border:1px solid #e2e8f0;border-radius:.75rem;overflow:hidden}
.ps-tap-head,.ps-tap-row{display:grid;grid-template-columns:2fr 1.5fr .8fr .8fr .8fr .8fr;gap:.5rem;padding:.6rem .8rem;align-items:center;font-size:.82rem;min-width:0}
.ps-tap-head{background:#f8fafc;font-size:.65rem;text-transform:uppercase;color:#64748b;letter-spacing:.05em;font-weight:600}
.ps-tap-row{border-top:1px solid #f1f5f9}
.ps-tap-row:hover{background:#fafbfc}
.ps-tap-row > *,.ps-tap-head > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:768px){.ps-tap-head{display:none}.ps-tap-row{grid-template-columns:1fr auto;font-size:.8rem;padding:.6rem;min-width:0}.ps-tap-row > :nth-child(n+2):not(:last-child){display:none}.ps-tap-row > :first-child{white-space:normal;min-width:0;overflow:hidden;text-overflow:ellipsis}}
.ps-table-foot{text-align:center;font-size:.78rem;color:#94a3b8;margin-top:.8rem}
.ps-mockup-footnote{text-align:center;font-size:.78rem;color:#94a3b8;max-width:600px;margin:1.5rem auto 0}

.ps-audience-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:768px){.ps-audience-grid{grid-template-columns:repeat(3,1fr)}}
.ps-aud-card{border-radius:1rem;padding:1.5rem 2rem;color:#fff}
.ps-aud-mark{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 100%)}
.ps-aud-lab{background:linear-gradient(135deg,#059669 0%,#047857 100%)}
.ps-aud-dark{background:linear-gradient(135deg,#334155 0%,#1e293b 100%)}
.ps-aud-emoji{font-size:2.5rem;margin-bottom:.8rem}
.ps-aud-card h3{font-family:var(--font-family-header);font-size:1.4rem;font-weight:700;margin:0 0 .5rem;color:#fff}
.ps-aud-card p{font-size:.92rem;line-height:1.6;margin:0;color:rgba(255,255,255,.9)}

.ps-testimonials-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:768px){.ps-testimonials-grid{grid-template-columns:repeat(3,1fr)}}
.ps-testimonial{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;margin:0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ps-stars{color:#f59e0b;font-size:1.1rem;letter-spacing:.1em;margin-bottom:.8rem}
.ps-testimonial blockquote{flex:1;color:#334155;font-size:.92rem;line-height:1.6;margin:0;font-style:normal;quotes:none}
.ps-testimonial figcaption{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;padding-top:1rem;border-top:1px solid #f1f5f9;font-size:.85rem}
.ps-avatar{width:3rem;height:3rem;border-radius:9999px;display:grid;place-items:center;color:#fff;font-family:var(--font-family-header);font-weight:700;font-size:1rem}
.ps-avatar-mark{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.ps-avatar-lab{background:linear-gradient(135deg,#10b981,#047857)}
.ps-avatar-warn{background:linear-gradient(135deg,#f59e0b,#e11d48)}

.ps-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:1rem;border:1px solid #e2e8f0;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);max-width:100%;width:100%;margin:0 auto;box-sizing:border-box}
@media(min-width:1024px){.ps-cmp-wrap{max-width:1000px}}
.ps-cmp{width:100%;min-width:520px;border-collapse:collapse;font-size:.9rem}
@media(max-width:768px){.ps-cmp{font-size:.7rem;min-width:0}.ps-cmp th,.ps-cmp td{padding:.4rem .25rem !important;word-break:break-word}.ps-cmp th{font-size:.65rem}}
.ps-cmp thead tr{background:#f8fafc;border-bottom:2px solid #e2e8f0}
.ps-cmp th{padding:1rem;font-weight:600;color:#475569;text-align:center}
.ps-cmp th:first-child{text-align:left}
.ps-cmp td{padding:.75rem 1rem;border-top:1px solid #f1f5f9;text-align:center}
.ps-cmp td:first-child{text-align:left;font-weight:500}
.ps-yes{color:#059669;font-size:1.2rem;font-weight:700}
.ps-no{color:#e11d48;font-size:1.2rem;font-weight:700}
.ps-warn-text{color:#b45309;font-size:.78rem}

.ps-credits-row{display:grid;grid-template-columns:1fr;gap:.8rem;max-width:900px;margin:0 auto 2rem}
@media(min-width:768px){.ps-credits-row{grid-template-columns:repeat(3,1fr)}}
.ps-credit-card{background:#fff;border:2px solid;border-radius:1rem;padding:1.2rem;text-align:center}
.ps-credit-mark{border-color:#c4b5fd}
.ps-credit-lab{border-color:#a7f3d0}
.ps-credit-warn{border-color:#fde68a}
.ps-credit-emoji{font-size:1.8rem;margin-bottom:.4rem}
.ps-credit-name{font-family:var(--font-family-header);font-weight:600;font-size:1.05rem}
.ps-credit-cost{font-family:var(--font-family-header);font-size:1.6rem;font-weight:700;margin-top:.5rem}
.ps-credit-desc{font-size:.78rem;color:#64748b;margin-top:.5rem;line-height:1.4}

.ps-pricing-card{background:#fff;border:1px solid #e2e8f0;border-radius:1.5rem;box-shadow:0 25px 50px -12px rgba(124,58,237,.08);max-width:1000px;margin:0 auto 2rem;padding:2rem}
@media(min-width:768px){.ps-pricing-card{padding:3rem}}
.ps-pakiety{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:600px){.ps-pakiety{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.ps-pakiety{grid-template-columns:repeat(4,1fr)}}
.ps-pakiet{background:#fff;border:1px solid #e2e8f0;border-radius:.85rem;padding:1.2rem;text-align:center;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:all .2s;position:relative}
.ps-pakiet:hover{border-color:#c4b5fd;box-shadow:0 10px 25px -5px rgba(0,0,0,.1)}
.ps-pakiet-popular{border:2px solid #c4b5fd;background:rgba(124,58,237,.03)}
.ps-pakiet-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:#f59e0b;color:#fff;font-size:.65rem;font-weight:700;padding:.2rem .6rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.05em}
.ps-pakiet-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.ps-pakiet-credits{font-family:var(--font-family-header);font-size:1.3rem;font-weight:700;margin-top:.3rem}
.ps-pakiet-price{font-family:var(--font-family-header);font-size:1.8rem;font-weight:700;margin-top:.7rem}
.ps-pakiet-disc{font-size:.78rem;font-weight:600;margin-top:.2rem}
.ps-pakiet-hint{font-size:.7rem;color:#94a3b8;margin-top:.4rem}
.ps-pakiet-cta{margin-top:.8rem;font-size:.78rem;font-weight:600;color:#6d28d9}
.ps-pricing-info{display:grid;grid-template-columns:1fr;gap:.8rem;margin-top:1.5rem;font-size:.88rem}
@media(min-width:768px){.ps-pricing-info{grid-template-columns:repeat(2,1fr)}}
.ps-info-card{border-radius:.75rem;padding:1rem 1.2rem;border:1px solid}
.ps-info-lab{background:rgba(16,185,129,.05);border-color:rgba(16,185,129,.2)}
.ps-info-mark{background:rgba(124,58,237,.05);border-color:rgba(124,58,237,.2)}
.ps-info-h{font-weight:600;margin-bottom:.3rem}
.ps-info-lab .ps-info-h{color:#047857}
.ps-info-mark .ps-info-h{color:#6d28d9}
.ps-info-card p{font-size:.78rem;color:#475569;line-height:1.6;margin:0}
.ps-pricing-bottom{text-align:center;margin-top:2rem}
.ps-pricing-bottom .ps-meta{margin-top:.8rem;display:block;font-size:.75rem}

.ps-abonament{max-width:1000px;margin:0 auto 1.5rem}
.ps-abonament > div{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 50%,#4c1d95 100%);color:#fff;border-radius:1.5rem;padding:2rem;box-shadow:0 25px 50px -12px rgba(76,29,149,.4)}
@media(min-width:768px){.ps-abonament > div{padding:3rem}}
.ps-abon-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media(min-width:768px){.ps-abon-grid{grid-template-columns:1fr auto}}
.ps-abon-badge{display:inline-block;background:#f59e0b;color:#fff;font-size:.65rem;font-weight:700;padding:.25rem .7rem;border-radius:9999px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.7rem}
.ps-abon-h3{font-family:var(--font-family-header);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;line-height:1.2;margin:0 0 1rem;color:#fff}
.ps-abon-yellow{color:#fcd34d}
.ps-abon-h3 u{text-decoration-color:#f59e0b;text-decoration-thickness:3px;text-underline-offset:.25em}
.ps-abon-lead{color:#ddd6fe;font-size:1rem;line-height:1.6;margin:0 0 1rem;max-width:600px}
.ps-abon-checks{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.85rem;color:#ddd6fe}
.ps-abon-checks div{display:flex;align-items:center;gap:.4rem}
.ps-abon-cta{display:flex;flex-direction:column;gap:.7rem}
.ps-abon-call{background:#f59e0b;color:#fff;padding:1rem 1.5rem;border-radius:.75rem;text-decoration:none;font-weight:700;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.1rem;box-shadow:0 4px 12px rgba(245,158,11,.3)}
.ps-abon-call-lbl{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.ps-abon-call-num{font-size:1.2rem}
.ps-abon-mail{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);padding:.7rem 1.2rem;border-radius:.75rem;text-decoration:none;font-weight:600;font-size:.85rem;text-align:center}

.ps-whitelabel{max-width:1000px;margin:0 auto 1rem}
.ps-whitelabel > div{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);color:#fff;border-radius:1.5rem;padding:1.5rem 2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.3)}
.ps-wl-grid{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
@media(min-width:768px){.ps-wl-grid{grid-template-columns:auto 1fr auto}}
.ps-wl-emoji{font-size:3rem}
.ps-wl-eyebrow{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fcd34d;margin-bottom:.3rem}
.ps-wl-h3{font-family:var(--font-family-header);font-size:1.3rem;font-weight:700;margin:0 0 .5rem;color:#fff}
.ps-whitelabel p{font-size:.88rem;color:#cbd5e1;line-height:1.6;margin:0}

.ps-faq-wrap{max-width:850px}
.ps-faq-wrap .faq{display:flex;flex-direction:column;gap:.7rem}
.ps-faq-wrap .faq .f{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1.2rem 1.4rem}
.ps-faq-wrap .faq .f h3{font-family:var(--font-family-text);font-size:1rem;font-weight:600;color:#1e293b;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin:0;line-height:1.5}
.ps-faq-wrap .faq .f h3 .faq_arrow{color:#6d28d9;font-size:1.2rem;font-weight:400;flex-shrink:0;transition:transform .2s}
.ps-faq-wrap .faq .f h3 .faq_arrow[data-status="1"]{transform:rotate(45deg)}
.ps-faq-wrap .faq .f .t{display:none;font-size:.92rem;color:#475569;line-height:1.65;margin-top:.8rem}
.ps-faq-wrap .faq .f .t.open{display:block}

/* CTA final — bg na <section class="ps-bg-cta"> (Reguła #11) */
.ps-cta-final{color:#fff;padding:4rem 1rem;position:relative;overflow:hidden}
@media(max-width:768px){.ps-cta-final{padding:3rem 1rem}}
section.ps-bg-cta{background:linear-gradient(135deg,#6d28d9 0%,#5b21b6 50%,#4c1d95 100%);color:#fff;position:relative;overflow:hidden}
section.ps-bg-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(16,185,129,.4) 0%,transparent 40%);opacity:.2;pointer-events:none}
.ps-cta-final::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(16,185,129,.4) 0%,transparent 40%);opacity:.2}
.ps-cta-inner{max-width:850px;margin:0 auto;text-align:center;position:relative}
.ps-cta-lead{color:#ddd6fe;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.6;margin:1.2rem auto 2rem;max-width:600px}
.ps-cta-form{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);color:#0f172a;border-radius:1rem;padding:1.5rem 2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.3);max-width:650px;margin:0 auto;text-align:left}
.ps-cta-form input,.ps-cta-form textarea,.ps-cta-form select{background:#fff !important;border:1px solid #cbd5e1 !important;color:#0f172a !important}
.ps-cta-form button[type="submit"]{background:#6d28d9 !important;color:#fff !important;border:none}
.ps-cta-buttons{margin-top:2rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.ps-cta-foot{margin-top:1.5rem;color:#c4b5fd;font-size:.88rem;padding:0 .5rem;line-height:1.7}
.ps-cta-foot a{color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap}
/* === [BLOCK: landing-pozycjosprawdzator] END === */
/* === [BLOCK: landing-workpatrol] START === */
/* ===== workpatrol.pl — landing-only CSS, palette granat + czerwony sztos B2B ===== */

/* Override --mark per-klient (body scope, NIE :root - Reguła #1):
   --mark zmienia kolor klocków używających tej zmiennej:
   pricing-card.featured border, step-number background, feature-card hover etc. */
body.wp-landing {
	--mark: #DC2626;
	--mark-dark: #B91C1C;
	--mark-light: rgba(220,38,38,.1);
}

/* ===== Hero (ciemne tło granat + radial glows + czerwone akcenty) ===== */
.wp-hero-bg-dark {
	background:
		radial-gradient(900px 500px at 12% 10%, rgba(220,38,38,.08), transparent 60%),
		radial-gradient(700px 400px at 90% 0%, rgba(220,38,38,.12), transparent 65%),
		linear-gradient(180deg, #0A0F1F 0%, #0F172A 100%) !important;
	color: #F1F5F9 !important;
}
.wp-hero-bg-dark h1,
.wp-hero-bg-dark h2,
.wp-hero-bg-dark h3,
.wp-hero-bg-dark h4 { color: #F1F5F9; }
.wp-hero-bg-dark p,
.wp-hero-bg-dark li { color: #CBD5E1; }
.wp-hero-bg-dark em { color: #DC2626; font-style: normal; font-weight: 700; }
.wp-hero-bg-dark strong { color: #fff; }

.wp-hero-bg-dark .eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #FCA5A5;
	margin-bottom: 1.5rem;
	padding: .4rem .9rem;
	background: rgba(220,38,38,.15);
	border: 1px solid rgba(220,38,38,.4);
	border-radius: 999px;
}

.wp-hero-bg-dark h1 {
	font-size: clamp(2rem, 4.8vw, 3.8rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -.02em;
	margin: 0 0 1.5rem !important;
}

.wp-hero-bg-dark .hero-subtitle {
	font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
	line-height: 1.6 !important;
	color: #94A3B8 !important;
	max-width: 62ch;
	margin: 0 0 2rem !important;
}

/* CTA workpatrol — primary (czerwony) + outline (ghost) */
.wp-cta-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.wp-btn-primary,
a.wp-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #DC2626;
	color: #fff !important;
	border: 0;
	padding: 1rem 1.8rem;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none !important;
	transition: background .2s, transform .15s, box-shadow .2s;
	box-shadow: 0 8px 28px -8px rgba(220,38,38,.6);
}
.wp-btn-primary:hover {
	background: #B91C1C;
	transform: translateY(-1px);
	box-shadow: 0 12px 36px -8px rgba(220,38,38,.7);
}
.wp-btn-ghost,
a.wp-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: transparent;
	color: #F1F5F9 !important;
	border: 1px solid rgba(255,255,255,.25);
	padding: 1rem 1.8rem;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
	transition: background .2s, border-color .2s, transform .15s;
}
.wp-btn-ghost:hover {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.4);
	transform: translateY(-1px);
}
.wp-btn-tertiary,
a.wp-btn-tertiary {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: #FCA5A5 !important;
	text-decoration: none !important;
	font-size: .92rem;
	font-weight: 500;
	border-bottom: 1px dashed rgba(252,165,165,.4);
	padding-bottom: 2px;
	transition: color .2s, border-color .2s;
}
.wp-btn-tertiary:hover {
	color: #fff !important;
	border-bottom-color: #fff;
}

.wp-gratis-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding: .65rem 1rem;
	background: rgba(16,185,129,.12);
	border: 1px solid rgba(16,185,129,.3);
	border-radius: 8px;
	color: #6EE7B7;
	font-size: .88rem;
	font-weight: 500;
}
.wp-gratis-badge .material-symbols-outlined {
	color: #10B981;
	font-size: 18px;
}

.wp-hero-social {
	font-size: .85rem;
	color: #64748B !important;
	margin-top: 2rem !important;
}

/* ===== Bridge line (między dwiema sub-sekcjami features) ===== */
.wp-bridge {
	text-align: center;
	max-width: 800px;
	margin: 3rem auto 0;
	padding: 1.75rem 2.5rem;
	background: rgba(220,38,38,.06);
	border-top: 3px solid #DC2626;
	border-bottom: 3px solid #DC2626;
	border-radius: 4px;
	font-size: 1.1rem !important;
	line-height: 1.55;
	color: #334155 !important;
	font-weight: 500;
}
.wp-bridge strong { color: #0F172A; }

/* ===== Sub-sekcje "Co dostajesz" - eyebrow grup zielony/czerwony ===== */
.wp-features-eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: .35rem .8rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.wp-features-eyebrow.green {
	background: rgba(16,185,129,.12);
	color: #047857;
}
.wp-features-eyebrow.red {
	background: rgba(220,38,38,.1);
	color: #B91C1C;
}
.wp-features-eyebrow .material-symbols-outlined {
	font-size: 14px;
	vertical-align: middle;
	margin-right: .25rem;
}

/* ===== Sytuacje "Brzmi znajomo?" (sekcja problem) ===== */
.wp-situations {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.wp-situation-item {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid #E5E9F2;
	border-radius: 12px;
	border-left: 4px solid #DC2626;
	font-size: 1.05rem !important;
	color: #1E293B !important;
	line-height: 1.55 !important;
	font-style: italic;
}
.wp-situation-item .material-symbols-outlined {
	font-size: 24px;
	color: #DC2626;
	flex-shrink: 0;
	margin-top: .15rem;
}

.wp-hook-line {
	text-align: center;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	color: #0F172A !important;
	margin: 2rem auto 0 !important;
	max-width: 700px;
}
.wp-hook-line strong { color: #DC2626; }

/* ===== Deep features (4 z screenami, grid 2x2) ===== */
.wp-deep-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
}
.wp-deep-card {
	background: #fff;
	border: 1px solid #E5E9F2;
	border-radius: 16px;
	padding: 2rem !important;
	transition: transform .2s, box-shadow .2s;
}
.wp-deep-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 60px -20px rgba(15,23,42,.18);
}
.wp-deep-card .wp-deep-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(220,38,38,.1);
	color: #DC2626;
	margin-bottom: 1.25rem;
}
.wp-deep-card .wp-deep-icon .material-symbols-outlined {
	font-size: 30px;
}
.wp-deep-card h3 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0F172A;
	margin: 0 0 .75rem !important;
	line-height: 1.3;
}
.wp-deep-card p {
	font-size: .95rem !important;
	color: #475569 !important;
	line-height: 1.6 !important;
	margin: 0 0 1.25rem !important;
}
.wp-deep-card .wp-deep-screen {
	display: block;
	width: 100%;
	height: auto;
	max-height: 360px;
	object-fit: cover;
	object-position: top center;
	border-radius: 8px;
	border: 1px solid #E5E9F2;
	cursor: pointer;
	transition: transform .2s;
}
.wp-deep-card .wp-deep-screen:hover {
	transform: scale(1.02);
}

/* ===== Sekcja Legalność (krótka, uspokajająca) ===== */
.wp-legal-grid {
	max-width: 850px;
	margin: 0 auto;
	display: grid;
	gap: 1rem;
}
.wp-legal-item {
	display: flex;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: #fff;
	border-radius: 8px;
	border-left: 3px solid #10B981;
}
.wp-legal-item .material-symbols-outlined {
	color: #10B981;
	font-size: 24px;
	flex-shrink: 0;
}
.wp-legal-item strong {
	color: #0F172A;
	font-weight: 700;
}
.wp-legal-item p {
	margin: 0 !important;
	font-size: .95rem !important;
	color: #334155 !important;
	line-height: 1.5 !important;
}

/* ===== Demo teaser ===== */
.wp-demo-teaser-img {
	display: block;
	width: 100%;
	max-width: 1100px;
	height: auto;
	margin: 0 auto;
	border-radius: 16px;
	box-shadow: 0 32px 80px -24px rgba(15,23,42,.25);
	border: 1px solid #E5E9F2;
	cursor: pointer;
	transition: transform .25s;
}
.wp-demo-teaser-img:hover {
	transform: translateY(-4px);
}

/* ===== Final CTA strip ===== */
.wp-cta-final {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #fff;
	padding: 4rem 2rem !important;
	border-radius: 20px;
	text-align: center;
	max-width: 1000px;
	margin: 0 auto;
	box-shadow: 0 32px 80px -32px rgba(15,23,42,.5);
	position: relative;
	overflow: hidden;
}
.wp-cta-final::before {
	content: "";
	position: absolute;
	top: -50%;
	right: -10%;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(220,38,38,.2) 0%, transparent 70%);
	pointer-events: none;
}
.wp-cta-final .eyebrow {
	color: #FCA5A5 !important;
	margin-bottom: 1rem;
	position: relative;
}
.wp-cta-final h2 {
	color: #fff !important;
	font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
	margin: 0 0 1.5rem !important;
	position: relative;
}
.wp-cta-final .wp-cta-row {
	justify-content: center;
	margin-bottom: 1.5rem;
	position: relative;
}
.wp-cta-final .wp-cta-meta {
	color: rgba(255,255,255,.6) !important;
	font-size: .9rem !important;
	margin: 0 !important;
	position: relative;
}

@media (max-width: 768px) {
	.wp-deep-features { grid-template-columns: 1fr; }
	.wp-cta-row .wp-btn-primary,
	.wp-cta-row .wp-btn-ghost { width: 100%; justify-content: center; }
	.wp-cta-final { padding: 3rem 1.5rem !important; margin: 0 1rem; }
}

/* === [BLOCK: landing-workpatrol] END === */
/* === [BLOCK: section-margins-reset-bridge] START === */
/* Lejdis-bhp - reset duzych marginow theme/AOS, spojny rytm 2rem/3rem */
/* !important bo Bridge daje marginy inline w style="margin:..." (np. AOS dorzuca 6rem) */
html body section.container.aos-init { margin-top: 0 !important; margin-bottom: 0 !important; }
html body section.container.mw900px { margin-top: 0 !important; margin-bottom: 0 !important; }
html body section.container.layout-2:has(.testimonials),
html body section.container:has(> .section-content .testimonials) {
  margin-top: 2rem !important; margin-bottom: 2rem !important;
}
/* === [BLOCK: section-margins-reset-bridge] END === */
/* === [BLOCK: section-paddings-bridge] START === */
/* Lejdis-bhp - spojne paddingi sekcji (Bridge nie daje paddingu pionowego) */
html body section.container { padding-top: 2rem; padding-bottom: 2rem; }
html body section.container.bg-grey-lighter,
html body section.container.bg-mark-light {
  padding-top: 3rem; padding-bottom: 3rem;
}
/* Reset marginow pierwszego/ostatniego elementu w section-content */
section.container > .section-content > div > *:first-child { margin-top: 0; }
section.container > .section-content > div > *:last-child { margin-bottom: 0; }
section.container > .section-content > *:first-child { margin-top: 0; }
section.container > .section-content > *:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  html body section.container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  html body section.container.bg-grey-lighter,
  html body section.container.bg-mark-light {
    padding-top: 2rem; padding-bottom: 2rem;
  }
}
/* === [BLOCK: section-paddings-bridge] END === */
/* === [BLOCK: steps-v1-bridge] START === */
/* Lejdis-bhp - kroki/etapy procesu (uzywane np. w "Jak wyglada wspolpraca") */
section.container.steps-v1 > .section-content { position: relative; align-items: flex-start; }
section.container.steps-v1 > .section-content > div {
  position: relative; text-align: center; padding: 0 0.5rem;
}
/* Kolko z numerem - biale na niebieskim tle bg-mark-light */
section.container.steps-v1 > .section-content > div > div:first-child {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem auto;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--black) 12%, transparent);
  position: relative; z-index: 2;
}
section.container.steps-v1 > .section-content > div > div:first-child span {
  font-size: 1.5rem !important; color: var(--mark); font-weight: 700; line-height: 1;
}
/* Linia laczaca kroki - pozioma na desktop */
section.container.steps-v1 > .section-content > div::before {
  content: ""; position: absolute; top: 30px;
  left: -50%; right: 50%; height: 3px;
  background: color-mix(in srgb, var(--white) 50%, transparent); z-index: 1;
}
section.container.steps-v1 > .section-content > div:first-of-type::before { display: none; }
section.container.steps-v1 > .section-content > div p { color: var(--white); margin: 0.25rem 0; line-height: 1.5; }
section.container.steps-v1 > .section-content > div p strong {
  display: block; font-size: 1rem; margin-bottom: 0.5rem; color: var(--white);
}
/* Mobile: pionowy uklad */
@media (max-width: 768px) {
  section.container.steps-v1 > .section-content > div { margin-bottom: 1.5rem; }
  section.container.steps-v1 > .section-content > div::before {
    top: -1.25rem; left: 50%; right: auto;
    width: 3px; height: 1.25rem; transform: translateX(-50%);
  }
}
/* === [BLOCK: steps-v1-bridge] END === */



/* === [BLOCK: marka-finanse5] START === */
/* Paleta odczytana z logo klientki (output/finanse5.pl/materialy/logo.jpg).
   Granat #0C172D to kolor liter znaku, zloto #B07C39 to kolor "5.0" i sygnetu.

   Dlaczego --mark NIE jest granatem ze znaku, tylko jasniejszym #16273F:
   #0C172D jest praktycznie czarny. Na literach logo wyglada elegancko, ale wypelniona
   nim cala sekcja (pasek cenowy, kroki wspolpracy) robi sie ciezka. Roznica jest ledwo
   widoczna obok siebie, a na pol ekranu zmienia odbior. Oryginal zostaje na hover i tekst.

   --mark2 jest OSOBNY od --mark, bo `a.button` uzywa wlasnie tej zmiennej
   (`_style.css`: `a.button {background:var(--mark2)}`), a `.bg-mark` uzywa --mark.
   Domyslnie `--mark2: var(--mark)`, czyli przyciski dziedzicza kolor tla sekcji.
   Rozdzielamy je, zeby zlote przyciski odcinaly sie od granatowych sekcji. */
:root {
	--mark: #16273F;
	--mark2: #B07C39;
	--mark-dark: #0C172D;
	--mark-light: #1E3450;
}

/* .bg-mark-light ma w theme tekst na bialo (`_style-default.css`), wiec ta zmienna
   MUSI byc ciemna. Jasny odcien dalby bialy tekst na jasnym tle. */

/* Hover przyciskow: `a.button:hover` w theme idzie na --grey-dark (szary), co przy
   zlotym przycisku wyglada jak awaria. Nadpisujemy na ciemniejsze zloto. */
a.button:hover,
.button:hover {
	background: #8F6229;
	color: var(--white);
}

/* Linki w tresci: granat zamiast domyslnego koloru theme, zeby nie konkurowaly
   ze zlotymi przyciskami. */
.section-content a:not(.button):not([class*="addon"]) {
	color: #16273F;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.section-content a:not(.button):not([class*="addon"]):hover {
	color: #B07C39;
}
/* === [BLOCK: marka-finanse5] END === */


/* === [BLOCK: marka-finanse5-uklad] START === */

/* --- 1. Cien kart -------------------------------------------------------- */
/* Theme daje `box-shadow: 0 0 15px var(--grey-lighter)` — rownomierna poswiata dookola,
   bez kierunku swiatla. Karta wyglada, jakby unosila sie w mgle, a krawedzie sie rozmywaja.
   Zamiana na dwuwarstwowy cien z gory: waska linia styku + szersze, delikatne rozmycie w dol. */
.shadow {
	box-shadow: 0 1px 2px rgba(12, 23, 45, .05), 0 6px 20px -6px rgba(12, 23, 45, .12) !important;
	border: 1px solid rgba(12, 23, 45, .06);
}
.shadow:hover {
	box-shadow: 0 2px 4px rgba(12, 23, 45, .06), 0 14px 32px -10px rgba(12, 23, 45, .18) !important;
	transform: translateY(-2px);
}

/* --- 2. Karty rownej wysokosci, takze te z magazynu ----------------------- */
/* Karta cennika przyjezdza z magazynu jako ZAGNIEZDZONA `<section class="container">`
   wewnatrz kolumny rzedu. Bez rozciagniecia calego lancucha (kolumna → sekcja →
   section-content → karta) karta ma wysokosc wlasnej tresci, wiec trzy karty w rzedzie
   koncza sie na trzech roznych wysokosciach, a przycisk laduje w polowie sasiadki. */
section.container.layout-2 > .section-content,
section.container.layout-3 > .section-content,
section.container.layout-4 > .section-content {
	align-items: stretch;
}
section.container.center-y > .section-content {
	align-items: center;
}
section.container.layout-2 > .section-content > div,
section.container.layout-3 > .section-content > div,
section.container.layout-4 > .section-content > div {
	display: flex;
	flex-direction: column;
}
/* Zagniezdzona sekcja z magazynu ma wypelnic kolumne, a jej `mw800px` nie moze
   zwezac karty ponizej szerokosci kolumny. */
section.container > .section-content > div > div > section.container {
	flex: 1;
	display: flex;
	flex-direction: column;
	max-width: 100% !important;
	padding: 0 !important;
}
section.container > .section-content > div > div > section.container > .section-content {
	flex: 1;
	display: flex;
	align-items: stretch;
}
section.container > .section-content > div > div {
	display: flex;
	flex-direction: column;
	flex: 1;
}
/* Sama karta: kolumna, przycisk dociagniety do dolu. */
.section-content > div.bg-white,
.section-content > div.bg-grey-lighter {
	display: flex;
	flex-direction: column;
	flex: 1;
}
/* 🛑 TYLKO akapit z przyciskiem. Pierwsza wersja tej reguly celowala w KAZDY ostatni
   akapit karty, wiec w kartach bez przycisku (np. „5 ksiegowych", „Od 2021 roku") opis
   odjezdzal na sam dol i zostawial nad soba dziure. `:has()` zawezą regule do kart,
   w ktorych jest co dociagac. Przegladarka bez obslugi `:has()` po prostu jej nie
   zastosuje — karty beda mialy tekst tuz pod naglowkiem, czyli poprawnie. */
.section-content > div.bg-white > p:last-child:has(> a.button),
.section-content > div.bg-grey-lighter > p:last-child:has(> a.button) {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 1.25rem;
}

/* --- 2b. Blok ceny w karcie ------------------------------------------------ */
/* Stala wysokosc bloku, zeby opisy we wszystkich kartach rzedu zaczynaly sie na tym
   samym poziomie. Bez tego karta z dwuwierszowa cena („wycena indywidualna") spycha
   swoj opis nizej niz sasiadka z jednowierszowa („od 250 zl"). */
.f5-cena {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* 🛑 `flex: 0 0 auto` jest KONIECZNE. Karta jest kontenerem flex w kolumnie, wiec bez
	   tego blok ceny rozciaga sie i pochlania wolne miejsce, ktore zostaje po krotszym
	   opisie. Efekt: w kazdej karcie rzedu cena zaczyna sie na innej wysokosci (zmierzone:
	   136, 210 i 301 px), mimo ze karty maja identyczna wysokosc. */
	/* `!important`, bo theme ustawia dzieciom bloku `flex: 1 1 0%` regula o wyzszej
	   specyficznosci — sprawdzone w computed style: `flex-grow: 1`, `flex-basis: 0%`
	   mimo naszego `flex: 0 0 auto`. */
	flex: 0 0 auto !important;
	height: 8.5rem !important;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid rgba(12, 23, 45, .08);
}
.f5-cena-etykieta {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mark2);
	font-weight: 600;
	margin-bottom: .5rem;
}
.f5-cena-kwota {
	font-size: 2.1rem;
	line-height: 1.1;
	font-weight: 700;
	color: var(--mark);
}
.f5-cena-jednostka {
	font-size: .85rem;
	color: rgba(12, 23, 45, .6);
	margin-top: .2rem;
}
@media (max-width: 1000px) {
	.f5-cena { min-height: 0; }
}

/* --- 2c. Szerokosc kolumny tekstu ----------------------------------------- */
/* [f5-szerokosci] JEDNA os pionowa dla calej strony: 1240 px.
   Wczesniej sekcje z klasa `mw800px` zwezaly sie do 864 px i byly CENTROWANE, wiec ich
   lewa krawedz przeskakiwala o ~190 px wzgledem sasiednich rzedow kart. Na stronach uslug
   i w „Od czego zalezy cena" wygladalo to, jakby tresc uciekla na srodek pustego pasa.

   Teraz `mw800px` NIE zweza sekcji. Ogranicza dlugosc linii tekstu (72 znaki), ale kolumna
   startuje w tej samej osi co karty, wiec naglowki wszystkich sekcji stoja w jednym pionie.
   Wyjatek: tresc wysrodkowana (`ta-center`) zostaje na srodku — tam wyrownanie do lewej
   wygladaloby na pomylke. */
section.container > .section-content {
	max-width: 1240px !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}
section.container.mw800px > .section-content,
section.container.mw700px > .section-content,
section.container.mw600px > .section-content,
section.container.mw1000px > .section-content {
	max-width: 1240px !important;
}
/* Ograniczenie dotyczy TEKSTU CIAGLEGO, nie naglowkow. Naglowek jest krotki, a przyciety
   do 72 znakow lamal sie na dwie linie tam, gdzie miejsca bylo pod dostatkiem. */
section.container.mw800px > .section-content > div > p,
section.container.mw700px > .section-content > div > p,
section.container.mw600px > .section-content > div > p,
/* 🛑 `:not()` na komponentach siatkowych. Bez tego `> ul` lapie takze `.f5-dla-kogo`
   (karty „ta usluga jest dla Ciebie") i `.f5-lista-2kol`, wiec siatka kart zwezala sie
   do dlugosci linii tekstu i konczyla w polowie szerokosci sekcji obok. */
section.container.mw800px > .section-content > div > ul:not(.f5-dla-kogo):not(.f5-lista-2kol),
section.container.mw800px > .section-content > div > ol {
	max-width: 72ch;
}
/* 🛑 Akapit z `ta-center` MUSI dostac `margin: auto`. Sam `max-width: 72ch` wyrownuje go
   do lewej, wiec tekst byl wysrodkowany WEWNATRZ lewej polowy strony — czytalo sie to jak
   przypadek (dopisek pod cennikiem konczyl sie w polowie szerokosci sekcji). */
section.container > .section-content > div > p.ta-center {
	margin-left: auto;
	margin-right: auto;
}
/* Wysrodkowana tresc zostaje wysrodkowana takze po poszerzeniu sekcji. */
section.container.mw800px > .section-content > div:has(.ta-center),
section.container.mw700px > .section-content > div:has(.ta-center),
section.container.mw600px > .section-content > div:has(.ta-center) {
	margin-left: auto;
	margin-right: auto;
}
/* Komponenty siatkowe maja wlasna szerokosc — 72ch by je scisnelo do jednej kolumny. */
section.container > .section-content > div > .f5-dla-kogo,
section.container > .section-content > div > ul.f5-lista-2kol {
	max-width: none;
	width: 100%;
}
/* 🛑 DWIE KOLUMNY NA SZTYWNO, nie `auto-fit`. Po poszerzeniu sekcji do 1240 px
   `repeat(auto-fit, minmax(300px, 1fr))` zaczelo miescic TRZY karty w rzedzie, wiec
   czwarta zostawala sama w drugim rzedzie. Dokladnie ten sam objaw opisuje komentarz
   przy `.f5-dla-kogo` nizej — tylko wtedy powodem byla szerokosc 800 px, a teraz 1240. */
/* Pelna szerokosc kolumny — siatka ma konczyc sie w tej samej osi co listy i akapity
   w sekcjach obok. Przy 940 px prawa krawedz kart wypadala ~100 px na lewo od reszty. */
section.container > .section-content > div > .f5-dla-kogo { max-width: none; }
@media (min-width: 701px) {
	.f5-dla-kogo { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Sekcja z magazynu renderuje sie ZAGNIEZDZONA i ma wypelnic kolumne, a nie wprowadzac
   wlasna szerokosc. */
section.container > .section-content > div > div > section.container > .section-content {
	max-width: 100% !important;
	padding-left: 0;
	padding-right: 0;
}
@media (max-width: 700px) {
	section.container > .section-content { padding-left: 1.25rem; padding-right: 1.25rem; }
	section.container.mw800px > .section-content > div,
	section.container.mw700px > .section-content > div,
	section.container.mw600px > .section-content > div { max-width: none; }
}

/* --- 3. Wypunktowania ----------------------------------------------------- */
/* Domyslne kropki sa szare i gubia sie w tekscie. Zlota kreska w kolorze marki
   porzadkuje liste i wiaze ja z reszta strony. */
.section-content ul:not(.steps-v1):not(.steps-list) {
	list-style: none;
	padding-left: 0;
	margin: 1rem 0;
}
.section-content ul:not(.steps-v1):not(.steps-list) > li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .55rem;
	line-height: 1.55;
}
.section-content ul:not(.steps-v1):not(.steps-list) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .7rem;
	height: 2px;
	background: var(--mark2);
	border-radius: 2px;
}
/* Stopka i menu maja wlasne listy — ich nie ruszamy. */
.footer_wrapper ul > li::before,
nav ul > li::before { content: none !important; }

/* --- 3b. Listy wielokolumnowe --------------------------------------------- */
/* Osiem miast albo siedem punktow zakresu jedno pod drugim tworzy dluga, monotonna
   kolumne, ktora czyta sie jak spis tresci. W dwoch kolumnach ta sama tresc miesci sie
   w polu widzenia i wyglada jak zestawienie, a nie jak wyliczanka. */
ul.f5-lista-2kol {
	column-count: 2;
	column-gap: 2.5rem;
}
ul.f5-lista-2kol > li {
	break-inside: avoid;
}
@media (max-width: 700px) {
	ul.f5-lista-2kol { column-count: 1; }
}

/* Karta „dla kogo" — wyroznik zamiast kolejnej listy wypunktowanej. */
.f5-dla-kogo {
	display: grid;
	/* minmax dobrany tak, by w kolumnie 800 px wyszly DWIE karty, nie trzy.
	   Przy trzech czwarta karta zostawala sama w drugim rzedzie i uklad wygladal
	   na przypadkowy. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
.f5-dla-kogo > li {
	background: #fff;
	border: 1px solid rgba(12, 23, 45, .08);
	border-left: 3px solid var(--mark2);
	border-radius: 10px;
	padding: 1rem 1.15rem;
	line-height: 1.5;
	margin: 0 !important;
}
.f5-dla-kogo > li::before { content: none !important; }
.f5-dla-kogo > li { padding-left: 1.15rem !important; }

/* --- 4. Naglowki ---------------------------------------------------------- */
/* Karty mialy raz `<h3>`, raz `<strong class="fs-24">` — ta sama rola, dwa rozne
   wygladzenia. Ujednolicenie po stronie CSS lapie takze te miejsca, ktorych
   nie przepiszemy recznie. */
.section-content h2 { line-height: 1.25; }
.section-content h3 { line-height: 1.3; margin-bottom: .5rem; }
.section-content > div > h3:first-child,
.section-content > div > h2:first-child { margin-top: 0; }

/* --- 5. Oddech w sekcjach z tlem ------------------------------------------ */
/* Rzad kart wchodzil w kolorowe tlo bez zapasu, wiec karty dotykaly krawedzi pasa. */
section.container[class*="bg-"] > .section-content { padding-top: .5rem; padding-bottom: .5rem; }

/* --- 6. Animacje wejscia --- USUNIETE 2026-08-27 -------------------------- */
/* Byly tu animacje wjazdu sekcji na `animation-timeline: view()`. Usuniete na prosbe
   Przemka (decyzja estetyczna, nie techniczna). Zostawiam slad, bo historia tego miejsca
   jest pouczajaca: wczesniej ten sam efekt robila biblioteka AOS i NIE odslaniala czesci
   sekcji nawet po przewinieciu strony do konca — gotowa tresc zostawala niewidoczna, bez
   bledu w konsoli. Gdyby animacje kiedys wrocily, to nie przez AOS. */

/* --- 7. Skala typograficzna ------------------------------------------------ */
/* 🛑 `fs-NN` TO DZIESIATE CZESCI REM, NIE PIKSELE. `_style-default.css` definiuje
   `.fs-20 {font-size: 2rem}` — czyli 32 px, a nie 20 px. Tresc tej strony pisana byla
   tak, jakby to byly piksele, wiec:
     .fs-14 (opis kroku wspolpracy) = 22.4 px — stad piec waskich kominow tekstu,
     .fs-20 (tytul karty)           = 32   px — wiekszy niz naglowek sekcji,
     .fs-28 (pasek cenowy, CTA)     = 44.8 px — najwiekszy tekst na calej stronie.
   Na telefonie bylo najgorzej: `h2` schodzi do 22 px (clamp w `_style.css`), a `.fs-20`
   zostaje 32 px — tytul karty krzyczal glosniej niz naglowek sekcji, ktora go zawiera.

   Zamiast przepisywac klasy w tresci (kilkadziesiat miejsc, latwo przeoczyc jedno),
   nadajemy im skale responsywna TUTAJ. Hierarchia po zmianie, od najwiekszego:
     telefon  h1 24 > fs-28 24 > h2 22 > fs-24 21 > fs-20 19 > fs-18 17 > tekst 16 > fs-14 15
     desktop  h1 48 > h2 38 > fs-28 34 > fs-24 29 > fs-20 23 > fs-18 21 > tekst 16

   `!important` jest konieczne — theme deklaruje te klasy bez niego, ale z ta sama
   specyficznoscia, a nasz arkusz laduje sie pozniej tylko dla czesci regul. */
.section-content .fs-12 { font-size: clamp(1rem,   .95rem + .40vw, 1.20rem) !important; }
.section-content .fs-14 { font-size: clamp(.92rem, .88rem + .30vw, 1.05rem) !important; }
.section-content .fs-16 { font-size: clamp(1.05rem, 1rem + .50vw, 1.25rem) !important; }
.section-content .fs-18 { font-size: clamp(1.05rem, .95rem + .55vw, 1.30rem) !important; }
.section-content .fs-20 { font-size: clamp(1.15rem, 1rem + .75vw,  1.45rem) !important; }
.section-content .fs-24 { font-size: clamp(1.25rem, 1.05rem + 1.10vw, 1.80rem) !important; }
.section-content .fs-28 { font-size: clamp(1.35rem, 1.10rem + 1.60vw, 2.10rem) !important; }

/* Naglowek sekcji i tytul karty maja rozne role, wiec i rozny oddech pod spodem. */
.section-content h2 { margin-bottom: 1rem; }
.section-content h3 { margin-bottom: .5rem; }

/* --- 8. Kroki wspolpracy ---------------------------------------------------- */
/* Piec kolumn w rzedzie 1240 px daje nieco ponad 200 px na kolumne. Przy 22 px tekstu
   (patrz punkt 7) wychodzily z tego trzy slowa w linii. Rozmiar naprawia skala wyzej,
   tu zostaje tylko interlinia i zapas miedzy kolkiem a tytulem. */
section.container.steps-v1 > .section-content > div p { line-height: 1.5; }
section.container.steps-v1 > .section-content > div h3 { margin-bottom: .4rem; }

/* --- 9. Listing bloga ------------------------------------------------------- */
/* Kafle byly „gole": wysrodkowany tytul, pod nim zajawka w kolorze zlotym, bez tla
   i bez ramki. Reszta strony sklada sie z bialych kart z cieniem, wiec blog wygladal
   jak inna witryna. Tu dostaje ten sam ksztalt karty co wszedzie indziej.

   🛑 SELEKTORY MUSZA BYC PELNE (`.articles_wrapper article.article_container.h …`).
   Theme deklaruje te elementy dokladnie tak i wygrywa specyficznoscia z krotsza wersja
   — przy pierwszym podejsciu tytul zostal wysrodkowany, a „czytaj wiecej" niewidoczne,
   bo theme ma na nim `display: none`. */
.articles_wrapper article.article_container.h > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--white);
	border: 1px solid rgba(12, 23, 45, .08);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(12, 23, 45, .05), 0 6px 20px -6px rgba(12, 23, 45, .12);
	text-decoration: none;
	transition: box-shadow .2s, transform .2s;
}
.articles_wrapper article.article_container.h > a:hover {
	box-shadow: 0 2px 4px rgba(12, 23, 45, .06), 0 14px 32px -10px rgba(12, 23, 45, .18);
	transform: translateY(-2px);
}
.articles_wrapper article.article_container.h .article_photo img { display: block; width: 100%; height: auto; }
/* Theme szarzy zdjecie na hover (`filter: grayscale(100%)`). Przy granatowych miniaturach
   z logo wygladalo to jak blad ladowania, nie jak efekt. */
.articles_wrapper article.article_container.h:hover .article_photo img { filter: none; }
/* 🛑 `box-sizing: border-box` KONIECZNE. Theme daje `.article_description {width: 100%}`,
   wiec 100% + nasz padding przekraczalo szerokosc karty, a `overflow: hidden` (potrzebne
   dla zaokraglonych rogow) obcinalo tekst po prawej w polowie slowa. */
.articles_wrapper article.article_container.h .article_description {
	display: flex;
	flex-direction: column;
	flex: 1;
	box-sizing: border-box;
	padding: 1.25rem 1.35rem 1.35rem;
	text-align: left;
}
.articles_wrapper article.article_container.h .article_title {
	font-family: var(--font-family-header);
	font-size: 1.15rem;
	line-height: 1.35;
	color: var(--mark-dark);
	margin: 0 0 .5rem 0;
}
.articles_wrapper article.article_container.h .article_description .articles_text {
	margin: 0;
	color: rgba(12, 23, 45, .72);
	font-size: .95rem;
	line-height: 1.55;
}
.articles_wrapper article.article_container.h .article_more {
	display: block;
	margin-top: auto;
	padding-top: 1rem;
	color: var(--mark2);
	font-weight: 600;
	font-size: .9rem;
}
/* Naglowek listingu stoi w innym kontenerze niz sekcje tresci (`text_container`,
   nie `section.container`), wiec bez tego zaczynal sie 60 px na lewo od reszty strony. */
main .text_container > .h1_home,
main .articles_wrapper {
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}
@media (max-width: 700px) {
	main .text_container > .h1_home,
	main .articles_wrapper { padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* Theme schodzi z czterech kolumn do DWOCH i na tym poprzestaje (`_style.css`: `.x4`).
   Na ekranie 390 px daje to karty szerokie na ~170 px — tytul lamal sie po dwa slowa
   i zajmowal siedem wierszy. Ponizej 620 px jedna kolumna. */
@media (max-width: 620px) {
	.articles_wrapper.x4,
	.articles_wrapper.x3,
	.articles_wrapper.x2 { grid-template-columns: 1fr !important; }
}

/* --- 10. Stopka ------------------------------------------------------------- */
/* Theme daje stopce `bg-grey-dark` (szary). Przy granatowej palecie strony wygladalo to
   jak element z innego projektu doklejony na koncu. Granat `--mark-dark` domyka strone
   tym samym kolorem, ktorym sie zaczyna (logo, pasek cenowy, kroki wspolpracy). */
/* 🛑 `!important` KONIECZNE. `_style-default.css` deklaruje
   `.bg-grey-dark {background-color: var(--grey-dark) !important}` — bez tego samego
   znacznika nasza regula przegrywa niezaleznie od specyficznosci. Sprawdzone: stopka
   zostawala #424242. */
.footer_wrapper .footer_content.bg-grey-dark { background-color: var(--mark-dark) !important; }
/* Linki w stopce mialy kropki wypunktowania — to menu, nie lista wyliczeniowa. */
.footer_wrapper .footer_box ul { list-style: none; padding-left: 0; margin: 0; }
.footer_wrapper .footer_box ul > li { padding-left: 0; margin-bottom: .35rem; }

/* --- 11. Formularz kontaktowy ---------------------------------------------- */
/* Przycisk „Wyslij" to `input[type=submit]` bez klasy, wiec omijal styl `a.button`
   i renderowal sie jako domyslny przycisk przegladarki. */
.section-content form input[type="submit"] {
	background: var(--mark2);
	color: var(--white);
	border: 0;
	border-radius: .5rem;
	padding: .75rem 1.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s;
}
.section-content form input[type="submit"]:hover { background: #8F6229; }
/* 🛑 `_style.css` daje `input[type=submit] {margin: auto}`, a przycisk ma `display: block`
   — wychodzilo z tego 210 px marginesu z kazdej strony, czyli przycisk wysrodkowany pod
   polami wyrownanymi do lewej. `text-align` tego NIE cofa, bo to margines, nie wyrownanie
   tekstu. */
.section-content form input[type="submit"] { margin-left: 0 !important; margin-right: auto !important; }
/* Zgoda RODO i pola captchy byly wysrodkowane, podczas gdy pola formularza sa wyrownane
   do lewej — kazdy element zaczynal sie w innym miejscu. */
.section-content form > div { text-align: left; }
.section-content form .rodo_agree { line-height: 1.45; }
/* Pytanie kontrolne („Ile to 15 - 3?") wstrzykuje JavaScript tuz przed przyciskiem, wiec
   nie ma go w zrodle strony. Pole na odpowiedz rozciagalo sie na cala szerokosc formularza,
   choc wpisuje sie w nie jedna liczbe. */
.section-content form .line_desc_phone_number {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: .75rem 0;
}
.section-content form .line_desc_phone_number .desc { white-space: nowrap; }
.section-content form .line_desc_phone_number input[type="text"] { max-width: 110px; }

/* --- 12. Tytuly kart w jednym rzedzie -------------------------------------- */
/* Tytul jednowierszowy („Spolki") obok dwuwierszowego („Indywidualne podejscie") sprawial,
   ze opisy w rzedzie zaczynaly sie na roznej wysokosci — rzad kart czytal sie jak zbior
   przypadkowych kafelkow. Rezerwujemy miejsce na dwa wiersze, wiec wszystkie opisy
   startuja rowno. Kosztem jest niewielki zapas w rzedach, gdzie zaden tytul sie nie lamie;
   jest jednakowy we wszystkich kartach, wiec czyta sie jak oddech, a nie jak dziura.

   Tylko od 1000 px w gore. Nizej karty ida jedna pod druga i nie ma czego wyrownywac,
   a pusty zapas bylby wtedy strata miejsca na ekranie telefonu. */
@media (min-width: 1000px) {
	section.container.layout-3 > .section-content > div > h3,
	section.container.layout-4 > .section-content > div > h3 {
		min-height: 2.3em;
	}
}

/* --- 13. Przyciski obok siebie --------------------------------------------- */
/* Dwa przyciski w jednym akapicie (hero strony glownej) na telefonie ustawialy sie
   schodkowo i mialy rozna szerokosc, bo sa inline i lamia sie jak tekst. */
@media (max-width: 700px) {
	.section-content p > a.button {
		display: block;
		text-align: center;
		margin-bottom: .6rem;
	}
	.section-content p > a.button:last-child { margin-bottom: 0; }
}

/* === [BLOCK: marka-finanse5-uklad] END === */


/* === [BLOCK: marka-finanse5-ikony] START === */
/* Ikony w kartach sekcji "Twoja firma. Nasza ksiegowosc." (strona glowna).
   Dodane 27.08.2026 na prosbe klientki: rzad wyzej ma dwie duze zlote liczby (5 i 2021),
   a cztery karty pod nim byly samym tekstem — rzedy nie wygladaly na jedna sekcje.

   Zestaw ikon: Material Symbols Outlined. Theme laduje ten font sam (`header.php`),
   wiec nie dokladamy zadnego zewnetrznego zasobu. Styl kreskowy jest ten sam co ikony,
   ktore klientka miala w logo (tarcza, wykres, chmura) — znak je stracil, ale jezyk
   graficzny marki zostaje na stronie.

   `--mark2` to zloto z logo (#B07C39). Przy 40 px to duzy element graficzny, wiec
   kontrast 3,63:1 miesci sie w normie dla duzego tekstu (prog 3:1). */
.section-content .f5-ikona {
	font-family: 'Material Symbols Outlined';
	font-size: 2.5rem;
	line-height: 1;
	color: var(--mark2);
	display: block;
	/* ZERO, nie .75rem. Nagłówek <h3> pod spodem ma własny `margin-top: 32px`, więc każdy
	   dodatkowy odstęp tutaj się z nim SUMUJE (marginesy sąsiadów nie zlewają się, bo
	   ikona to element inline zmieniony na block wewnątrz tej samej kolumny). Przy .75rem
	   luka pod ikoną wynosiła 44 px, a pod złotą liczbą w rzędzie wyżej 32 px — dwa rzędy
	   kart zaczynały się na innej wysokości i nie czytały się jak jedna sekcja. */
	margin-bottom: 0;
	/* Osie zmiennego fontu: waga 300 daje kreske zblizona do znaku klientki
	   (domyslne 400 jest wyrazniej grubsze), FILL 0 = kontur zamiast wypelnienia. */
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40;
	font-weight: normal;
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
@media (max-width: 700px) {
	.section-content .f5-ikona { font-size: 2.1rem; }
}
/* === [BLOCK: marka-finanse5-ikony] END === */