/* Nowy brand EMTRACK (Księga Identyfikacji Wizualnej 2026, projekt „emtrack.eu Redesign”).
   Ładowany po style.css i nadpisuje dawny ciemny motyw; kolory i typografia tylko z tokenów poniżej. */
:root {
	--emtrack-red: #D50633;
	--emtrack-black: #000000;
	--emtrack-white: #FFFFFF;
	--neutral-50: #F5F5F5;
	--neutral-200: #E5E5E5;
	--neutral-600: #666666;
	--neutral-800: #1A1A1A;

	--font-sans: 'Roboto', Arial, Helvetica, sans-serif;
	--font-condensed: 'Roboto Condensed', 'Roboto', 'Arial Narrow', Arial, sans-serif;

	--gutter: 72px;
	--header-h: 76px;
	--ease-standard: cubic-bezier(.2, 0, 0, 1);
}
@media screen and (max-width: 1270px) {
	:root { --gutter: 40px; }
}
@media screen and (max-width: 1001px) {
	:root { --header-h: 60px; }
}
@media screen and (max-width: 560px) {
	:root { --gutter: 20px; }
}

html { scroll-padding-top: var(--header-h); }
body { background: var(--emtrack-white); color: var(--emtrack-black); font-family: var(--font-sans); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: var(--emtrack-red); }
a:hover { color: var(--emtrack-black); }
::selection { background: var(--emtrack-red); color: var(--emtrack-white); }
*:focus-visible { outline: 2px solid var(--emtrack-red); outline-offset: 2px; }

body .wrapper:not(.no_margin) { margin: 0 var(--gutter); }

/* znacznik z księgi znaku: czerwona linia zakończona kołem z czarnym kwadratem (punkt z sygnetu) */
.marker-rule { display: flex; align-items: center; width: 160px; }
.marker-rule:before { content: ''; flex: 1; height: 1px; background: var(--emtrack-red); }
.marker-rule:after { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--emtrack-red) radial-gradient(var(--emtrack-black) 0 0) center / 8px 8px no-repeat; }

/* przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; padding: 0 20px; border: 2px solid transparent; font: 700 15px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 180ms var(--ease-standard), color 180ms var(--ease-standard), border-color 180ms var(--ease-standard); }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }
.btn-primary { background: var(--emtrack-red); border-color: var(--emtrack-red); color: var(--emtrack-white); }
.btn-primary:hover { background: var(--emtrack-black); border-color: var(--emtrack-black); color: var(--emtrack-white); }
.btn-secondary { background: transparent; border-color: var(--emtrack-black); color: var(--emtrack-black); }
.btn-secondary:hover { background: var(--emtrack-black); color: var(--emtrack-white); }
.btn-inverse { background: var(--emtrack-white); border-color: var(--emtrack-white); color: var(--emtrack-red); }
.btn-inverse:hover { background: var(--emtrack-black); border-color: var(--emtrack-black); color: var(--emtrack-white); }
.btn-outline-inverse { background: transparent; border-color: var(--emtrack-white); color: var(--emtrack-white); }
.btn-outline-inverse:hover { background: var(--emtrack-white); color: var(--emtrack-red); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }


/* ===== Preloader ===== */
#preload { background: var(--emtrack-white); }
#preload .preload-progress { color: var(--neutral-600); font-family: var(--font-sans); font-weight: 700; }
#preload .preload-progress-bar { width: 128px; height: 4px; background: var(--neutral-200); }
#preload .preload-progress-bar:before { height: 4px; background: var(--emtrack-red); }


/* ===== Nagłówek ===== */
header { height: var(--header-h); background: var(--emtrack-white); border-bottom: 1px solid var(--neutral-200); }
header > .wrapper { display: flex; align-items: center; height: 100%; gap: 32px; }
header nav, header ul, #logo { line-height: normal; }
header ul { border: 0; display: flex; align-items: center; }
header li { border: 0; }
header li.active { border: 0; margin: 0; }
header li a, body header li.active a { display: block; height: auto; margin: 0; padding: 4px 0; border: 0; border-bottom: 2px solid transparent; color: var(--emtrack-black); font: 500 15px/1.2 var(--font-sans); white-space: nowrap; }
header li a:hover { color: var(--emtrack-red); }
header li.active a, body header li.active a { border-bottom-color: var(--emtrack-red); }

#logo, header.short #logo { float: none; width: auto; flex: none; display: flex; align-items: center; overflow: visible; }
#logo a { display: flex; }
#logo .logo-full { display: block; width: 136px; height: 28px; }
#logo .logo-sygnet { display: none; }

.menu-area { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#menu ul { gap: 24px; }
#menu li.home svg { display: block; }
#menu li.home svg path { fill: var(--emtrack-black); }
#menu li.home a:hover svg path { fill: var(--emtrack-red); }

header nav.social { float: none; }
header nav.social ul { gap: 20px; }
header nav.social .icons { display: flex; gap: 10px; padding: 0; }
header nav.social .icons > a { padding: 0; border: 0; line-height: 0; }
header nav.social .icons i:before { filter: brightness(0); opacity: .75; }
header nav.social .icons a:hover i:before { opacity: 1; }
header li.login, header li.demo, header li.login:hover, header li.demo:hover { background: none; margin: 0; height: auto; width: auto; padding: 0; line-height: normal; }
header li.login a, header li.login a:hover { padding: 0; border: 0; color: var(--emtrack-black); font-size: 14px; font-weight: 700; }
header li.login a:hover { color: var(--emtrack-red); }
header li.demo a, header li.demo a:hover { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 0; background: var(--emtrack-red); color: var(--emtrack-white); font-size: 14px; font-weight: 700; transition: background-color 180ms var(--ease-standard); }
header li.demo a:hover { background: var(--emtrack-black); }

nav.social .lang { position: relative; }
nav.social .lang form { height: auto; padding: 0; }
.lang .lang-dropdown .select { display: none; }
.lang .lang-menu, .lang .lang-dropdown.active .lang-menu { position: static; display: flex; flex-direction: row; align-items: center; padding: 0; background: none; overflow: visible; }
.lang .lang-menu li { padding: 0; font-size: 13px; }
.lang .lang-menu li + li:before { content: '|'; margin: 0 6px; color: var(--emtrack-red); font-weight: 700; }
nav.social .lang button, nav.social .lang a.lang-link { display: inline; padding: 0; border: 0; color: var(--neutral-600); font: 700 13px/1 var(--font-sans); text-transform: uppercase; }
nav.social .lang button.active, nav.social .lang a.lang-link.active { color: var(--emtrack-black); text-decoration: none; }
nav.social .lang button:hover, nav.social .lang a.lang-link:hover { color: var(--emtrack-red); }

.menu-area-open { line-height: 0; }
.menu-area-open img { filter: brightness(0); }
.menu-area-close, .menu-area-close:hover { color: var(--emtrack-black); }
.menu-area-close img { filter: brightness(0); }

/* ikony serwisów nie mieszczą się obok pełnego menu; poniżej 1500px zostają w menu mobilnym */
@media screen and (max-width: 1500px) and (min-width: 1002px) {
	header nav.social .icons { display: none; }
}
@media screen and (max-width: 1270px) {
	header > .wrapper { gap: 24px; }
	#menu ul { gap: 18px; }
	header li a, body header li.active a { font-size: 14px; }
	header nav.social ul { gap: 14px; }
	header nav.social .icons { display: none; }
}
@media screen and (max-width: 1100px) {
	#menu li.home { display: none; }
	header li.login { display: none; }
}
@media screen and (max-width: 1001px) {
	header > .wrapper { justify-content: space-between; }
	.menu-area { display: block; background: var(--emtrack-white); }
	.menu-area.show { display: block; }
	.menu-area #menu { margin-top: 24px; }
	.menu-area ul, #menu ul, header nav.social ul { display: block; }
	.menu-area li, .menu-area li.login, header li.demo { display: block; width: auto; text-align: left; padding: 0 var(--gutter); line-height: normal; }
	.menu-area li a, body .menu-area li.active a { display: inline-block; padding: 14px 0; font-size: 20px; font-weight: 700; }
	.menu-area li.active { background: none; }
	.menu-area li.login { padding-top: 16px; border-top: 1px solid var(--neutral-200); margin-top: 16px; }
	header li.demo { padding-top: 16px; padding-bottom: 16px; }
	header li.demo a { height: 48px; padding: 0 28px; font-size: 16px; }
	header nav.social .icons { display: flex; padding: 8px var(--gutter); }
	.lang .lang-menu { justify-content: flex-start; }
	.menu-area-close { margin: 16px var(--gutter) 0 auto; }
	#logo .logo-full { width: 117px; height: 24px; }
}


/* ===== Stopka ===== */
footer { background: var(--emtrack-white); border-top: 1px solid var(--neutral-200); padding: 64px 0 32px; color: var(--emtrack-black); font: 400 15px/1.55 var(--font-sans); }
.cta + footer, section.cta ~ footer { border-top: 0; }
footer .column { display: grid; grid-template-columns: 220px 1fr 1fr 360px; gap: 48px; align-items: start; }
footer .column:after { display: none; }
footer .column .left, footer .column .middle { float: none; width: auto; height: auto; margin: 0; border: 0; }
footer .menu { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
footer .menu li { float: none; width: auto; margin: 0; list-style: none; }
footer .menu li a, footer .menu li.active a, footer .menu li:hover a { padding: 0; color: var(--emtrack-black); font-size: 14px; }
footer .menu li a:hover { color: var(--emtrack-red); }
footer .address { margin: 0; padding: 0; color: var(--emtrack-black); font-size: 16px; font-weight: 700; line-height: 1.7; }
footer .address span { display: block; width: auto; margin: 0; padding: 0; }
footer .address i, footer .address span i { display: none; }
footer .address a { color: inherit; }
footer .address a:hover { color: var(--emtrack-red); }
footer .desc p { margin: 0 0 1em; }
/* kolorowe ikonki pojazdów wklejone w opis stopki w CMS nie należą do palety marki */
footer .desc img { display: none; }
footer .desc p:last-child { margin-bottom: 0; }
footer .player { width: auto; }
footer .yt-facade { aspect-ratio: 16 / 9; }
footer .yt-facade:before { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--emtrack-red); opacity: 1; }
footer .yt-facade:hover:before, footer .yt-facade:focus:before { background: var(--emtrack-black); }
footer .autor { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 64px; padding: 24px 0 0; border-top: 1px solid var(--neutral-200); color: var(--neutral-600); font-size: 12px; line-height: 1.6; }
footer .autor p { margin: 0; }
footer .autor a { color: var(--emtrack-black); }
footer .autor a:hover { color: var(--emtrack-red); }
footer .footer-logo { flex: none; display: block; }
@media screen and (max-width: 1270px) {
	footer .column { grid-template-columns: 1fr 1fr; }
	footer .menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}
@media screen and (max-width: 640px) {
	footer { padding: 40px 0 24px; font-size: 14px; }
	footer .column { grid-template-columns: 1fr; gap: 24px; }
	footer .column .left { display: none; }
	footer .autor { margin-top: 32px; font-size: 11px; }
	footer .footer-logo { width: 117px; height: 24px; }
}


/* ===== Strona główna: hero ===== */
section#intro { display: grid; grid-template-columns: minmax(0, 1fr) 560px; min-height: 820px; flex-direction: initial; }
section#intro .board { display: block; background: var(--emtrack-white); z-index: auto; }
section#intro .board .wrapper, body section#intro .board .wrapper { display: block; margin: 0; padding: calc(var(--header-h) + 96px) 64px 80px var(--gutter); background: none; }
section#intro .board:after, section#intro .board .wrapper:before, #intro:after { display: none; }
#intro .marker-rule { margin-bottom: 36px; }
#intro .admission { margin: 0; overflow: visible; }
#intro .admission:after { display: none; }
#intro .admission .logo { display: none; }
#intro .admission div.slogan:before, #intro .admission p.accent:before { display: none; }
#intro .admission h1 { margin: 0; color: var(--emtrack-black); font: 800 72px/1 var(--font-sans); letter-spacing: -.02em; }
/* dwukolorowy nagłówek z księgi znaku; tytuł pochodzi z CMS bez znaczników, więc kolor marki dostaje pierwszy wiersz */
#intro .admission h1 { max-width: 9em; }
#intro .admission h1:first-line { color: var(--emtrack-red); }
#intro .admission div.slogan > p, #intro .admission p { width: auto; max-width: 640px; margin: 16px 0 0; color: var(--emtrack-black); font-size: 15px; font-weight: 400; line-height: 1.55; text-wrap: pretty; }
#intro .admission div.slogan > p { margin-top: 32px; font-size: 19px; line-height: 1.5; }
#intro .admission p.accent { padding: 0; color: var(--emtrack-black); font-weight: 400; }
#intro .actions { margin: 40px 0 0; }
#intro .photo { position: relative; background: var(--emtrack-black) url('../images/brand/tablet-map-truck.jpg') center / cover no-repeat; }
#intro .claim { position: absolute; left: 0; bottom: 0; margin: 0; padding: 20px 24px; background: var(--emtrack-red); color: var(--emtrack-white); font: 700 14px/1.3 var(--font-sans); }
@media screen and (max-width: 1270px) {
	section#intro { grid-template-columns: minmax(0, 1fr) 40%; min-height: 0; }
	#intro .admission h1 { font-size: 60px; }
}
@media screen and (max-width: 820px) {
	section#intro { display: block; }
	section#intro .board .wrapper, body section#intro .board .wrapper { padding: calc(var(--header-h) + 48px) var(--gutter) 0; }
	#intro .marker-rule { width: 100px; margin-bottom: 28px; }
	#intro .admission h1 { font-size: 46px; }
	#intro .admission div.slogan > p { margin-top: 20px; font-size: 15px; }
	#intro .actions { flex-direction: column; margin: 28px 0; }
	#intro .actions .btn { width: 100%; }
	#intro .photo { height: 240px; }
	#intro .claim { padding: 12px 16px; font-size: 12px; }
}


/* ===== Strona główna: mapa platformy ===== */
section#emtrack-map-view { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px 40px; height: auto; padding: 96px var(--gutter); box-sizing: border-box; background: var(--neutral-50); }
#emtrack-map-view .map-title { margin: 0; max-width: 13em; color: var(--emtrack-black); font: 800 44px/1.1 var(--font-sans); letter-spacing: -.01em; }
#emtrack-map-view .map-title:first-line { color: var(--emtrack-red); }
#emtrack-map-menu { position: static; width: auto; height: auto; margin: 0; padding: 0; background: none; }
#emtrack-map-menu ul { display: flex; text-align: left; line-height: normal; }
#emtrack-map-menu ul:after { display: none; }
#emtrack-map-menu li, #emtrack-map-menu li.active { width: auto; }
#emtrack-map-menu li a, #emtrack-map-menu li.active a { display: block; padding: 12px 20px; background: none; border-bottom: 2px solid var(--neutral-800); color: var(--emtrack-black); font: 700 18px/1.2 var(--font-condensed); line-height: 1.2; }
#emtrack-map-menu li.active a { border-bottom-color: var(--emtrack-red); color: var(--emtrack-red); }
#emtrack-map-menu li a:hover { color: var(--emtrack-red); }
#emtrack-map-menu li i { display: none; }
#emtrack-map-menu li .desc { display: none; }
body #emtrack-isomap { grid-column: 1 / -1; position: relative; top: auto; left: auto; width: 100%; height: 640px; border: 1px solid var(--neutral-200); background: var(--emtrack-white); }
.isomap-cover { position: absolute; }
.isomap-group { filter: none; opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease-standard), visibility 280ms; }
.isomap-group.display { opacity: 1; visibility: visible; }
.isomap-group li img { filter: grayscale(100%); transition: filter 1000ms var(--ease-standard); cursor: pointer; }
.isomap-group li.pointed img, .isomap-group li:hover img { filter: none; }
/* jak w makiecie: bez minimapy i krzyżaka; mapę nadal da się przeciągać */
.isomap-preview, .isomap-navigate { display: none; }
.isomap .next, .isomap .prev { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; background: var(--emtrack-white); border: 1px solid var(--emtrack-black); }
.isomap .next { right: 24px; }
.isomap .prev { left: 24px; }
.isomap .next img, .isomap .prev img { width: 32px; height: 32px; filter: brightness(0); }
.isomap .next:hover, .isomap .prev:hover { background: var(--emtrack-black); }
.isomap .next:hover img, .isomap .prev:hover img { filter: brightness(0) invert(1); }

.isomap .marker { display: flex; align-items: center; }
.isomap .marker .pin { width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--emtrack-red) radial-gradient(var(--emtrack-black) 0 0) center / 9px 9px no-repeat; }
.isomap .marker .pin i { display: none; }
.isomap .marker p, .isomap .popuping .marker p { height: auto; min-width: 0; margin-left: 24px; padding: 7px 11px; background: var(--emtrack-white); border: 1px solid var(--emtrack-red); border-radius: 0; color: var(--emtrack-black); font: 400 13px/1.2 var(--font-sans); box-shadow: none; }
.isomap .marker p { position: relative; }
.isomap .marker p:before { content: ''; position: absolute; left: -25px; top: 50%; width: 24px; height: 1px; background: var(--emtrack-red); }
.isomap .marker p:after, .isomap .popuping .marker p:after { display: none; }
.isomap .marker strong { color: var(--emtrack-black); font-weight: 800; }
.isomap .marker:after { display: none; }
.isomap .description { background: var(--emtrack-white); border: 0; border-radius: 0; }
.isomap .description, .isomap .popuping .description { display: none; }
.isomap-detail { position: absolute; left: 24px; bottom: 24px; z-index: 50; width: 440px; max-width: calc(100% - 48px); max-height: calc(100% - 48px); overflow: auto; box-sizing: border-box; padding: 20px 44px 20px 24px; background: var(--emtrack-white); border: 1px solid var(--emtrack-red); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 180ms var(--ease-standard), transform 180ms var(--ease-standard), visibility 180ms; }
.isomap-detail.show { opacity: 1; visibility: visible; transform: none; }
.isomap-detail h3 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--emtrack-red); color: var(--emtrack-black); font: 700 20px/1.2 var(--font-condensed); }
.isomap-detail h3 strong { font-weight: 700; }
.isomap-detail p { margin: 12px 0 0; color: var(--emtrack-black); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.isomap-detail .more { display: inline-block; margin-top: 12px; color: var(--emtrack-red); font-size: 14px; font-weight: 700; }
.isomap-detail .more:after { content: ' →'; }
.isomap-detail .close { position: absolute; top: 18px; right: 16px; width: 20px; height: 20px; }
.isomap-detail .close:before, .isomap-detail .close:after { content: ''; position: absolute; top: 9px; left: 2px; width: 16px; height: 2px; background: var(--emtrack-black); transform: rotate(45deg); }
.isomap-detail .close:after { transform: rotate(-45deg); }
.isomap-detail .close:hover:before, .isomap-detail .close:hover:after { background: var(--emtrack-red); }
.isomap .description p { color: var(--emtrack-black); font: 400 14px/1.5 var(--font-sans); }
.isomap .description .more { color: var(--emtrack-red); text-decoration: none; }
.isomap .description .close:before { filter: brightness(0); }
.isomap-message-content { background: var(--emtrack-white); border: 1px solid var(--emtrack-red); border-radius: 0; color: var(--emtrack-black); }
.isomap-message-content h2 { color: var(--emtrack-black); font: 700 28px/1.2 var(--font-condensed); padding-bottom: 12px; border-bottom: 1px solid var(--emtrack-red); }
.isomap-message-content .more { background: var(--emtrack-red); border-radius: 0; color: var(--emtrack-white); }
.isomap-message-content .more:hover { background: var(--emtrack-black); }
.isomap-message-content .more:after { display: none; }
@media screen and (max-width: 1001px) {
	section#emtrack-map-view { grid-template-columns: 1fr; padding: 48px var(--gutter); }
	#emtrack-map-view .map-title { font-size: 30px; }
	#emtrack-map-menu ul { flex-wrap: wrap; gap: 12px 20px; }
	#emtrack-map-menu li a, #emtrack-map-menu li.active a { padding: 0 0 8px; font-size: 15px; }
}


/* ===== Strona główna: korzyści ===== */
.offer { padding: 112px 0; background: var(--emtrack-white); }
.offer .wrapper { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 72px; }
.offer .wrapper:after { display: none; }
.offer .admission { display: block; width: auto; }
.offer .admission h2 { margin: 0; color: var(--emtrack-black); font: 800 44px/1.1 var(--font-sans); letter-spacing: -.01em; }
.offer .admission h2 strong { color: var(--emtrack-red); font-weight: 800; }
.offer .admission h2 br { display: none; }
.offer .admission p { margin: 28px 0 0; color: var(--emtrack-black); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.offer .admission ul { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.offer .admission ul a { color: var(--emtrack-black); font-size: 15px; font-weight: 700; }
.offer .admission ul a:after { content: ' →'; }
.offer .admission ul a:hover { color: var(--emtrack-red); }
/* kolory wpisane w edytorze CMS pochodzą ze starego brandu (np. żółte pozycje listy w EN) */
.offer .admission ul [style*="color"] { color: inherit !important; }
.offer .admission ul li > span { font-size: 15px; font-weight: 700; }
.offer .admission ul + p { margin-top: 20px; }
.offer .attribute { float: none; width: auto; color: var(--emtrack-black); font-size: inherit; }
.offer .attribute ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; align-content: start; }
.offer .attribute li, body .offer .attribute li { float: none; width: auto; min-height: 0; padding: 0; border: 0; display: flex; flex-direction: column; }
.offer .attribute li { position: relative; }
.offer .attribute li:before { content: ''; height: 22px; margin-right: 22px; background: linear-gradient(var(--emtrack-red) 0 0) left center / 100% 1px no-repeat; }
.offer .attribute li:after { content: ''; position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--emtrack-red) radial-gradient(var(--emtrack-black) 0 0) center / 8px 8px no-repeat; }
.offer .attribute .nr, body .offer .attribute .nr { display: block; float: none; width: auto; margin: 0; padding: 12px 0 0; border: 0; color: var(--emtrack-red); font: 700 12px/1.2 var(--font-sans); }
.offer .attribute i { display: none; }
.offer .attribute p { margin: 4px 0 0; color: var(--emtrack-black); font: 700 22px/1.2 var(--font-condensed); }
.offer .attribute strong { color: var(--emtrack-red); font-weight: 700; }
.offer .attribute strong:after { display: none; }
@media screen and (max-width: 1270px) {
	.offer .wrapper { grid-template-columns: 1fr; gap: 48px; }
	.offer .admission p { max-width: 720px; }
}
@media screen and (max-width: 820px) {
	.offer { padding: 48px 0; margin: 0; }
	.offer .admission h2 { font-size: 30px; }
	.offer .attribute ul { grid-template-columns: 1fr; gap: 20px; }
	.offer .attribute li { display: block; }
	.offer .attribute .nr, body .offer .attribute .nr { display: inline; padding: 0; font: 700 19px/1.2 var(--font-condensed); }
	.offer .attribute .nr:after { content: '\00a0 '; }
	.offer .attribute p { display: inline; font-size: 19px; }
	.offer .attribute li:before { display: block; margin-bottom: 10px; }
	.offer .attribute li:after { width: 20px; height: 20px; background-size: 7px 7px; }
}


/* ===== Strona główna: pytania ===== */
.home-faq { padding: 0 0 112px; background: var(--emtrack-white); font-family: var(--font-sans); }
.home-faq h2 { margin: 0 0 32px; color: var(--emtrack-black); font: 800 44px/1.1 var(--font-sans); letter-spacing: -.01em; }
.home-faq-list { gap: 0 72px; }
.home-faq-item { border-top: 1px solid var(--neutral-200); padding: 28px 0; }
.home-faq-item h3 { margin: 0 0 12px; padding: 0; color: var(--emtrack-black); font: 700 22px/1.25 var(--font-condensed); }
.home-faq-item h3:before { display: none; }
.home-faq-item p, .home-faq-item .faq-table { color: var(--emtrack-black); font-size: 15px; line-height: 1.6; }
.home-faq-item .faq-table th { color: var(--emtrack-black); }
.faq-table th, .faq-table td { border-bottom-color: var(--neutral-200); }
.home-faq-item a, .home-faq-more a { color: var(--emtrack-red); }
.home-faq-more { margin-top: 24px; font-size: 15px; font-weight: 700; }
.home-faq-more a { color: var(--emtrack-black); }
.home-faq-more a:after { content: ' →'; }
.home-faq-more a:hover { color: var(--emtrack-red); text-decoration: none; }
@media screen and (max-width: 820px) {
	.home-faq { padding-bottom: 48px; }
	.home-faq h2 { font-size: 30px; }
}


/* ===== Strona główna: wezwanie do działania ===== */
.cta { position: relative; overflow: hidden; background: var(--emtrack-red); color: var(--emtrack-white); }
.cta:before { content: ''; position: absolute; left: 0; bottom: 0; height: 85%; aspect-ratio: 1; background: url('../images/brand/halftone-corner-white.svg') left bottom / contain no-repeat; pointer-events: none; }
.cta .wrapper, body .cta .wrapper:not(.no_margin) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; min-height: 360px; margin: 0; padding: 72px var(--gutter) 72px 420px; box-sizing: border-box; }
.cta-title { margin: 0; font: 800 44px/1.05 var(--font-sans); }
.cta .actions { flex-direction: column; }
.cta .actions .btn { width: 220px; }
@media screen and (max-width: 1270px) {
	.cta .wrapper, body .cta .wrapper:not(.no_margin) { padding-left: 280px; }
	.cta-title { font-size: 36px; }
}
@media screen and (max-width: 820px) {
	.cta:before { left: auto; right: 0; height: 60%; opacity: .6; transform: scaleX(-1); }
	.cta .wrapper, body .cta .wrapper:not(.no_margin) { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 40px var(--gutter); }
	.cta-title { font-size: 26px; line-height: 1.1; }
	.cta .actions .btn { width: 100%; }
}


/* ===== Podstrony: wspólne ===== */
section.main { padding-top: var(--header-h); background: var(--emtrack-white); }
section.main h1, .wrapper.no_margin h1 { margin: 0; padding: 80px 0 48px; border-bottom: 1px solid var(--neutral-200); color: var(--emtrack-black); font: 800 64px/1.02 var(--font-sans); letter-spacing: -.02em; }
/* dwukolorowy tytuł jak w nagłówkach księgi znaku: pierwszy wiersz w kolorze marki, zawijanie wyrównane */
section.main h1 { text-wrap: balance; }
section.main h1:first-line { color: var(--emtrack-red); }
section.main .article > h1 { padding-right: calc(100% - 9em); }
section.main .faq-aside h1 { max-width: 9em; }
.wrapper.no_margin h1 { padding-left: var(--gutter); padding-right: var(--gutter); }
section.main .submenu { margin: 32px 0 0; border-bottom: 1px solid var(--neutral-200); }
section.main .submenu li a { color: var(--neutral-600); font: 700 18px/1.2 var(--font-condensed); padding: 10px 0; }
section.main .submenu li.active a { color: var(--emtrack-black); border-bottom: 2px solid var(--emtrack-red); margin-bottom: -1px; }
section.main .submenu li:hover a { color: var(--emtrack-red); }

article { margin: 48px 0 96px; color: var(--emtrack-black); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; }
article p, article li { text-wrap: pretty; }
article h1 { color: var(--emtrack-black); font: 800 36px/1.1 var(--font-sans); margin: 56px 0 20px; }
article h2, article h2:has(+ ol.to_toggle) { color: var(--emtrack-black); font: 800 32px/1.1 var(--font-sans); margin: 56px 0 20px; letter-spacing: -.01em; }
article h3 { color: var(--emtrack-black); font: 700 22px/1.2 var(--font-condensed); margin: 32px 0 10px; }
article h4 { color: var(--emtrack-black); font: 700 18px/1.25 var(--font-condensed); }
article h2 strong { font-weight: 800; color: var(--emtrack-red); }
article > :first-child, article .korzysci > :first-child { margin-top: 0; }
article ul:not(.list-tiles):not(.to_toggle) { padding-left: 0; list-style: none; }
article ul:not(.list-tiles):not(.to_toggle) > li { position: relative; padding-left: 16px; }
article ul:not(.list-tiles):not(.to_toggle) > li:before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--emtrack-red); }
article a { color: var(--emtrack-red); }
article a:hover { color: var(--emtrack-black); }
/* inline'owe kolory z edytora CMS (biały tekst z ciemnego motywu) */
article span[style*="color"], .blog__post span[style*="color"] { color: inherit !important; }
article .col-1 h3, article .col-2 h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--emtrack-red); }
article table td { border-color: var(--neutral-200); }

/* akordeony (FAQ, Korzyści) */
.to_toggle { counter-reset: sekcja; margin: 0; }
.to_toggle li, body .to_toggle li { padding: 0; background: none; border-bottom: 1px solid var(--neutral-200); color: var(--emtrack-black); font-size: 15px; }
.to_toggle li:nth-child(2n), .to_toggle li:nth-child(2n+1) { background: none; }
.to_toggle li:before, body .to_toggle li:before { position: absolute; left: 0; top: 18px; padding: 0; content: counter(sekcja, decimal-leading-zero); color: var(--emtrack-red); font: italic 800 18px/1.25 var(--font-sans); }
.to_toggle li:nth-child(n+10):before { content: counter(sekcja, decimal-leading-zero); }
.to_toggle li:after, .to_toggle li.toggled:after, body .to_toggle li:after { content: '+'; top: 16px; right: 0; width: auto; height: auto; border: 0; color: var(--emtrack-red); font: 400 24px/1 var(--font-sans); }
.to_toggle li.toggled:after { content: '\2212'; }
article .to_toggle .toggle-q { display: block; padding: 18px 48px 18px 64px; color: var(--emtrack-black); font: 700 19px/1.25 var(--font-condensed); }
.to_toggle li:hover .toggle-q, .to_toggle li.toggled .toggle-q { color: var(--emtrack-red); }
.to_toggle li.toggled { color: var(--emtrack-black); }
.to_toggle > li > p, .to_toggle > li > p:nth-of-type(1), .to_toggle > li > p:last-child { margin: 0; padding: 0 48px 12px 64px; color: var(--emtrack-black); font-size: 15px; line-height: 1.6; }
.to_toggle > li > p:last-child { padding-bottom: 24px; }
.to_toggle > li > .faq-table { margin-left: 64px; color: var(--emtrack-black); }
/* listy w odpowiedziach: zwijane razem z akapitami i bez stylu pozycji akordeonu (numer, plus, linia, licznik); :not(.list-tiles) przebija ogólną regułę article ul */
article .to_toggle > li > ul:not(.list-tiles) { display: none; margin: 0; padding: 0 48px 12px 64px; }
article .to_toggle > li.toggled > ul:not(.list-tiles) { display: block; }
article .to_toggle > li > ul:not(.list-tiles):last-child { padding-bottom: 24px; }
.to_toggle li li, body .to_toggle li li { position: relative; margin: 0; padding: 0 0 6px 16px; border: 0; background: none; color: var(--emtrack-black); font-size: 15px; line-height: 1.6; cursor: auto; }
.to_toggle li li:before, body .to_toggle li li:before { content: ''; top: .62em; width: 6px; height: 6px; background: var(--emtrack-red); counter-increment: none; }
.to_toggle li li:after, body .to_toggle li li:after { content: none; }
.to_toggle > li > .table-responsive { margin: 0 48px 24px 64px; color: var(--emtrack-black); }
.to_toggle > li > .table-responsive table { width: 100%; max-width: 640px; border-collapse: collapse; }
.to_toggle > li > .table-responsive table td { padding: 12px 0; border: 0; border-bottom: 1px solid var(--neutral-200); }
.to_toggle > li > .table-responsive tr:not([valign="top"]) td { background: none; border-bottom: 1px solid var(--emtrack-red); padding-top: 24px; }
.to_toggle > li > .table-responsive tr:not([valign="top"]) td p { font: 700 20px/1.2 var(--font-condensed); }
.to_toggle > li > .table-responsive tr[valign="top"] td:last-child p { font-weight: 700; text-align: right; }
/* nagłówki grup w tabelach kosztów mają w CMS wklejone obramowanie i tło */
.to_toggle > li > .table-responsive td[colspan] { border: 0 !important; border-bottom: 1px solid var(--emtrack-red) !important; padding: 24px 0 12px !important; text-align: left; }
@media screen and (max-width: 640px) {
	.to_toggle li:before, body .to_toggle li:before { top: 15px; font-size: 15px; }
	.to_toggle li:after, body .to_toggle li:after { top: 13px; font-size: 20px; }
	article .to_toggle .toggle-q { padding: 14px 32px 14px 42px; font-size: 16px; }
	.to_toggle > li > p, .to_toggle > li > p:nth-of-type(1), .to_toggle > li > p:last-child { padding: 0 0 12px 42px; margin: 0; font-size: 14px; }
	.to_toggle > li > .table-responsive { margin: 0 0 18px; }
	article .to_toggle > li > ul:not(.list-tiles) { padding: 0 0 12px 42px; }
	.to_toggle li li, body .to_toggle li li { font-size: 14px; }
}

/* FAQ: nagłówek przyklejony z lewej, lista pytań z prawej */
.article:has(> .faq-aside) { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0 72px; align-items: start; padding: 80px var(--gutter) 96px; }
.faq-aside { position: sticky; top: calc(var(--header-h) + 24px); }
.faq-aside h1, .wrapper.no_margin .faq-aside h1 { padding: 0; border: 0; font-size: 56px; }
.faq-aside .actions { margin-top: 32px; }
.article:has(> .faq-aside) article.full:not(.demo) { margin: 0; padding: 0; }
@media screen and (max-width: 1001px) {
	.article:has(> .faq-aside) { display: block; padding: 40px var(--gutter) 48px; }
	.faq-aside { position: static; margin-bottom: 24px; }
	.faq-aside h1, .wrapper.no_margin .faq-aside h1 { font-size: 38px; }
	.faq-aside .actions { margin-top: 20px; }
}

/* Korzyści: śródtytuły sekcji */
.korzysci h2:first-child { margin-top: 0; }

/* Oferta: kafle lokalizatorów */
.list-tiles, body .list-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: auto; margin: 0 0 48px; padding: 0; }
.list-tiles:after { display: none; }
.list-tiles li, body .list-tiles li, .list-tiles li:nth-child(n) { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; float: none; width: auto; height: auto; min-height: 120px; margin: 0; padding: 16px 18px; box-sizing: border-box; background: var(--emtrack-white); border: 1px solid var(--neutral-200); color: var(--emtrack-black); }
.list-tiles li:before { content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--emtrack-red) radial-gradient(var(--emtrack-black) 0 0) center / 8px 8px no-repeat; }
.list-tiles li a { display: contents; color: inherit; }
/* link rozciągnięty na cały kafel */
.list-tiles li a:after { content: ''; position: absolute; inset: 0; }
.list-tiles li:has(a):hover { border-color: var(--emtrack-red); color: var(--emtrack-red); }
.list-tiles li img { display: none; }
.list-tiles li span, body .list-tiles li span { position: static; margin: 0; padding: 0; color: inherit !important; font: 700 18px/1.2 var(--font-condensed); }
@media screen and (max-width: 1270px) {
	.list-tiles, body .list-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 640px) {
	.list-tiles, body .list-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* formularz kontaktowy obok oferty */
form.simple_form { background: var(--neutral-50); color: var(--emtrack-black); padding: 32px; box-sizing: border-box; font-family: var(--font-sans); }
form.simple_form h2 { margin: 0 0 20px; color: var(--emtrack-black); font: 800 28px/1.1 var(--font-sans); }
form.simple_form h2 strong { font-weight: 800; }
form.simple_form label { display: block; margin: 0 0 12px; color: var(--emtrack-black); }
form.simple_form label b, form.simple_form label p { display: block; margin: 0 0 6px; color: var(--emtrack-black); font-size: 13px; font-weight: 700; }
form.simple_form input[type=text], form.simple_form input[type=email], form.simple_form textarea, form.simple_form .select-wrapper { width: 100%; box-sizing: border-box; border: 2px solid var(--neutral-200); border-radius: 0; background: var(--emtrack-white); color: var(--emtrack-black); font: 400 15px/1.4 var(--font-sans); }
form.simple_form input[type=text], form.simple_form input[type=email] { height: 44px; padding: 0 12px; }
form.simple_form textarea { padding: 10px 12px; resize: vertical; }
form.simple_form input:focus, form.simple_form textarea:focus, form.simple_form .select-wrapper:focus-within { border-color: var(--emtrack-red); outline: 0; }
form.simple_form .select-wrapper { height: 44px; }
form.simple_form label:has(.select-wrapper) { margin-bottom: 20px; }
form.simple_form .select-wrapper .value { padding: 0 40px 0 12px; color: var(--emtrack-black); font: 400 15px/40px var(--font-sans); }
form.simple_form .select-wrapper select { margin: 0; }
form.simple_form input[type=submit] { height: 48px; margin-top: 8px; padding: 0 28px; border: 0; border-radius: 0; background: var(--emtrack-red); color: var(--emtrack-white); font: 700 16px/1 var(--font-sans); cursor: pointer; }
form.simple_form input[type=submit]:hover { background: var(--emtrack-black); }

/* wersja demo */
article.demo { background: var(--neutral-50); padding: 80px var(--gutter); }
.demo_form fieldset { background: none; padding: 0; }
.demo_form fieldset:before, .demo_form fieldset:after { display: none; }
.demo_form__field span { color: var(--emtrack-black); font-size: 13px; }
.demo_form input[type=text] { height: 48px; border: 2px solid var(--neutral-200); border-radius: 0; background: var(--emtrack-white); }
.demo_form input[type=text]:focus { border-color: var(--emtrack-red); outline: 0; }
.demo_form input[type=submit] { border: 0; border-radius: 0; background: var(--emtrack-red); }
.demo_form input[type=submit]:hover { background: var(--emtrack-black); }
.demo_form .form-text { color: var(--neutral-600); }

.demo-modal { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 0; background: var(--neutral-50); color: var(--emtrack-black); box-shadow: 0 24px 64px rgba(0, 0, 0, .25); }
/* style.css nadaje dialog display: block, przez co zamknięte okno było widoczne na dole strony */
.demo-modal:not([open]) { display: none; }
.demo-modal::backdrop { background: rgba(0, 0, 0, .6); }
html:has(.demo-modal[open]) { overflow: hidden; }
.demo-modal__body { padding: 56px 40px 40px; text-align: left; }
.demo-modal__body.is-loading { min-height: 320px; background: radial-gradient(circle closest-side, var(--emtrack-red) 99%, transparent) center / 20px 20px no-repeat; animation: demo-modal-pulse 900ms ease-in-out infinite alternate; }
@keyframes demo-modal-pulse { to { opacity: .35; } }
.demo-modal__body.is-loading > * { display: none; }
.demo-modal__body h2 { margin: 0 0 12px; padding: 0; border: 0; color: var(--emtrack-black); font: 800 32px/1.1 var(--font-sans); text-align: left !important; }
.demo-modal__body h2 span { color: var(--emtrack-red) !important; }
.demo-modal__body > p { margin: 0 0 24px; color: var(--neutral-600); font-size: 15px; line-height: 1.6; text-align: left !important; }
.demo-modal .demo_form { width: 100%; text-align: left; }
.demo-modal .demo_form fieldset { padding: 0; }
.demo-modal .demo_form__field { float: none; width: 100%; margin: 0 0 14px; }
.demo-modal .demo_form .form-text { padding: 0; }
.demo-modal .demo_form input[type=submit] { width: 100%; margin-top: 10px; cursor: pointer; }
.demo-modal .demo_form input[type=submit]:disabled { opacity: .6; cursor: wait; }
.demo-modal .cms_msg { margin: 0 0 20px; height: auto; padding: 12px 16px; line-height: 1.5; outline: 0; }
.demo-modal__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.demo-modal__close:before, .demo-modal__close:after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background: var(--emtrack-black); }
.demo-modal__close:before { transform: translate(-50%, -50%) rotate(45deg); }
.demo-modal__close:after { transform: translate(-50%, -50%) rotate(-45deg); }
.demo-modal__close:hover:before, .demo-modal__close:hover:after { background: var(--emtrack-red); }
@media screen and (max-width: 550px) {
	.demo-modal__body { padding: 52px 20px 24px; }
	.demo-modal__body h2 { font-size: 26px; }
}

/* Kontakt */
.contact .left, .contact .right { color: var(--emtrack-black); }
.contact .left:before, .contact .right:before { content: ''; display: block; width: 100px; height: 20px; margin-bottom: 12px; background: linear-gradient(var(--emtrack-red) 0 0) left center / 80px 1px no-repeat, radial-gradient(var(--emtrack-black) 0 0) right 6.5px center / 7px 7px no-repeat, radial-gradient(circle closest-side, var(--emtrack-red) 99%, transparent) right center / 20px 20px no-repeat; }
.contact span[style*="font-size"] { font-size: 15px !important; line-height: 1.7; }
.contact strong { font-weight: 700; }
/* mapa na całą szerokość okna: style.css odejmuje 95 px dawnego marginesu, a .wrapper ma teraz margines --gutter */
#pointsOfSale { margin: 0 calc(-1 * var(--gutter)); }
#pointsOfSale #board-general { background: var(--emtrack-red); }
#pointsOfSale #board-list { background: var(--emtrack-white); border-right: 1px solid var(--neutral-200); }
#pointsOfSale #board-list-insert li { border-bottom-color: var(--neutral-200); }
#pointsOfSale #board-list-insert li:hover { background: var(--neutral-50); }
#pointsOfSale #board-list-insert .title { font-size: 15px; }
#pointsOfSale #board-list-insert p { color: var(--neutral-600); }
#pointsOfSale #board-list-insert .icon-point { background-color: var(--emtrack-red); }
#pointsOfSale #board-general .geolocation { border-radius: 0; background: var(--emtrack-black); }
#pointsOfSale #board-general .geolocation:hover { background: var(--emtrack-white); color: var(--emtrack-red); }
#board-list .mCSB_scrollTools .mCSB_draggerRail { background: var(--neutral-200); }
#board-list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: var(--emtrack-red); }
#board-desc { color: var(--emtrack-black); }
#board-desc h2 { color: var(--emtrack-black); font: 800 28px/1.1 var(--font-sans); border-bottom: 1px solid var(--emtrack-red); }

/* Blog */
.blog__list, body .blog__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 72px; margin: 0; }
.blog__list .blog__post, .blog__list .blog__post:nth-child(n) { margin: 0; padding: 40px 0; background: none; border: 0; border-bottom: 1px solid var(--neutral-200); border-radius: 0; color: var(--emtrack-black); --tile-text: var(--emtrack-black); }
.blog__list .blog__post:before { content: ''; display: block; width: 82px; height: 22px; margin-bottom: 20px; background: linear-gradient(var(--emtrack-red) 0 0) left center / 60px 1px no-repeat, radial-gradient(var(--emtrack-black) 0 0) right 7px center / 8px 8px no-repeat, radial-gradient(circle closest-side, var(--emtrack-red) 99%, transparent) right center / 22px 22px no-repeat; }
.blog__list h2 { margin: 0; font: 800 26px/1.15 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }
.blog__list h2 a, .blog__list h2 a:hover { color: var(--emtrack-black); }
.blog__list h2 a:hover { color: var(--emtrack-red); }
.blog__list .blog__date { margin: 8px 0 0; color: var(--neutral-600); font-size: 13px; }
.blog__list .blog__intro, .blog__list .blog__intro p { color: var(--emtrack-black); font-size: 15px; line-height: 1.55; }
.blog__list .blog__intro { margin-top: 14px; }
.blog__list .blog__more { margin: 16px 0 0; }
.blog__list .blog__more a, .blog__list .blog__more a:hover { color: var(--emtrack-black); font-weight: 700; font-size: 14px; text-decoration: none; }
.blog__list .blog__more a:hover { color: var(--emtrack-red); }
.article .pagination { display: flex; gap: 4px; margin: 40px 0 96px; font-size: 0; text-align: left; }
.article .pagination a, .article .pagination strong, body .article .pagination strong { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; box-sizing: border-box; border: 1px solid var(--neutral-200); background: none; color: var(--emtrack-black); font: 700 15px/1 var(--font-sans); }
.article .pagination strong, body .article .pagination strong { background: var(--emtrack-red); border-color: var(--emtrack-red); color: var(--emtrack-white); }
.article .pagination a:hover { border-color: var(--emtrack-black); }
@media screen and (max-width: 820px) {
	.blog__list, body .blog__list { grid-template-columns: 1fr; }
	.blog__list .blog__post, .blog__list .blog__post:nth-child(n) { padding: 28px 0; }
	.blog__list h2 { font-size: 22px; }
}

/* wpis bloga */
.blog.blog__post { color: var(--emtrack-black); background: none; }
.blog.blog__post .blog__date { color: var(--neutral-600); }
.blog.blog__post .blog__intro { color: var(--emtrack-black); font-size: 19px; line-height: 1.5; }
.blog__post .blog__toc { background: var(--neutral-50); border: 0; border-left: 0; border-radius: 0; }
.blog__post .blog__toc h2 { color: var(--emtrack-black); font: 700 20px/1.2 var(--font-condensed); }
.blog__post .blog__toc ol a { color: var(--emtrack-black); }
.blog__post .blog__toc ol a:hover { color: var(--emtrack-red); }
.blog__post .blog__content { color: var(--emtrack-black); }
.blog__post .blog__content h2 { color: var(--emtrack-black); font: 800 30px/1.15 var(--font-sans); }
.blog__post .blog__content h3 { color: var(--emtrack-black); font: 700 22px/1.2 var(--font-condensed); }
.blog__post .blog__content h4 { color: var(--emtrack-black); font: 700 18px/1.25 var(--font-condensed); }
/* spis treści w prawej kolumnie, przyklejony pod nagłówkiem strony przez całą długość wpisu; position: fixed ze style.css nachodził na stopkę */
@media screen and (min-width: 1200px) {
	.blog.blog__post { display: grid; grid-template-columns: minmax(0, 900px) minmax(240px, 300px); column-gap: 64px; max-width: none; align-items: start; }
	.blog.blog__post > * { grid-column: 1; }
	.blog.blog__post .blog__spec { display: contents; }
	.blog.blog__post .blog__spec > .blog__image { grid-column: 1; }
	.blog__post .blog__toc { position: sticky; top: 101px; right: auto; grid-column: 2; grid-row: 1 / span 4; max-width: none; max-height: calc(100vh - 125px); margin: 0; overflow-y: auto; }
}

/* Funkcje aplikacji: kafle i panel ze szczegółami wybranego modułu */
.article > article:has(+ .modules) { margin-bottom: 0; }
.modules { clear: both; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; margin: 48px 0 96px; }
body .modules .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; opacity: 1; text-align: left; }
body .modules .grid:before { display: none; }
body .modules .grid .grid-item, body .modules .grid div.grid-item.active { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0; transform: none !important; }
body .modules .grid-item .tile, body .modules .grid div.grid-item.active .tile { display: flex; align-items: flex-end; width: auto; height: auto !important; min-height: 96px; margin: 0 !important; padding: 14px 16px !important; box-sizing: border-box; background: var(--emtrack-white) !important; border: 1px solid var(--neutral-200); color: var(--emtrack-black) !important; transition: background-color 180ms var(--ease-standard), border-color 180ms var(--ease-standard); }
body .modules .grid-item .tile:before, body .modules .grid-item .tile i { display: none; }
body .modules .grid-item .tile .bottom { position: static; padding: 0; }
body .modules .grid-item .tile h2 { margin: 0; font: 700 17px/1.2 var(--font-condensed); text-wrap: balance; }
body .modules .grid-item .tile h2 a { color: inherit; }
body .modules .grid-item .tile p, body .modules .grid-item .tile ul, body .modules .grid-item .tile ol { display: none; }
body .modules .grid-item:hover .tile { border-color: var(--emtrack-red); }
body .modules .grid-item.selected .tile { background: var(--emtrack-red) !important; border-color: var(--emtrack-red); color: var(--emtrack-white) !important; }
.module-panel:not(.ready) { display: none; }
.module-panel { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--emtrack-red); padding: 28px; }
.module-panel h2 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--emtrack-red); color: var(--emtrack-red); font: 800 28px/1.1 var(--font-sans); }
.module-panel .module-desc { margin-top: 16px; font-size: 15px; line-height: 1.6; }
.module-panel .module-desc p { margin: 0 0 12px; }
.module-panel .module-desc ul { margin: 0 0 12px; padding: 0; list-style: none; }
.module-panel .module-desc li { position: relative; padding: 0 0 4px 16px; }
.module-panel .module-desc li:before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--emtrack-red); }
.module-panel .actions { margin-top: 28px; }
@media screen and (max-width: 1270px) {
	.modules { grid-template-columns: minmax(0, 1fr) 360px; }
	body .modules .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 820px) {
	.modules { display: flex; flex-direction: column-reverse; gap: 24px; margin-top: 24px; }
	.module-panel { position: static; padding: 20px; }
	.module-panel h2 { font-size: 22px; }
	body .modules .grid { gap: 6px; }
	body .modules .grid-item .tile { min-height: 76px; padding: 12px !important; }
	body .modules .grid-item .tile h2 { font-size: 15px; }
}

/* Poznaj aplikację: lista slajdów z lewej, podgląd z prawej */
section.main.app { height: auto; padding-top: var(--header-h); }
body .app .wrapper, body .app .article { height: auto; }
.app .article { display: grid; grid-template-columns: 360px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 0 56px; align-items: start; padding: 80px var(--gutter) 96px; }
.app .article > h1 { grid-column: 1; padding: 0; border: 0; font-size: 52px; }
.app .article > .clearfix { display: none; }
.app-tour-lead { grid-column: 1; margin: 20px 0 32px; font-size: 16px; line-height: 1.5; }
.app-tour-list { grid-column: 1; margin: 0; padding: 0; list-style: none; }
.app-tour-list button { display: grid; grid-template-columns: 36px 1fr; gap: 12px; width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--neutral-200); background: none; color: var(--emtrack-black); font: 700 16px/1.2 var(--font-condensed); text-align: left; cursor: pointer; transition: background-color 180ms var(--ease-standard), color 180ms var(--ease-standard); }
.app-tour-list button:hover { color: var(--emtrack-red); }
.app-tour-list button.active { background: var(--emtrack-red); color: var(--emtrack-white); }
.app-tour-list .nr { font-family: var(--font-sans); font-style: italic; font-weight: 800; }
.app-tour-main { grid-column: 2; grid-row: 1 / -1; }
.app-tour-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.app-tour-title { margin: 0; color: var(--emtrack-black); font: 800 36px/1.1 var(--font-sans); letter-spacing: -.01em; }
.app-tour-title b { color: var(--emtrack-red); font-weight: 800; }
.app-tour-head .slider-nav { position: static; flex: none; display: flex; gap: 4px; }
.app-tour-head .slider-nav a.slick-arrow { position: static; display: block; width: 44px; height: 44px; border: 1px solid var(--emtrack-black); background: var(--emtrack-white); color: transparent; font-size: 0; text-indent: 0; overflow: hidden; cursor: pointer; }
.app-tour-head .slider-nav a.slick-arrow:before { content: ''; display: block; width: 10px; height: 10px; margin: 16px auto 0; border: solid var(--emtrack-black); border-width: 0 0 2px 2px; transform: translateX(2px) rotate(45deg); }
.app-tour-head .slider-nav a.slick-next:before { transform: translateX(-2px) rotate(-135deg); }
.app-tour-head .slider-nav a.slick-arrow:hover { background: var(--emtrack-black); }
.app-tour-head .slider-nav a.slick-arrow:hover:before { border-color: var(--emtrack-white); }
.app-tour-stage { position: relative; margin-top: 32px; aspect-ratio: 1440 / 900; overflow: hidden; border: 1px solid var(--neutral-200); background: var(--neutral-50); }
.app-tour-stage .slick, .app .app-tour-stage .slick { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; padding: 0; transform: scale(var(--stage-scale, .6)); transform-origin: 0 0; }
.app-tour-stage .slick-list, .app-tour-stage .slick-track, .app-tour-stage .slick-item { height: 900px; }
.app-tour-stage .caption { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-tour-count { margin: 16px 0 0; color: var(--neutral-600); font-size: 13px; text-align: right; }
.app-tour-count .sep { color: var(--emtrack-red); }
@media screen and (max-width: 1270px) {
	.app .article { grid-template-columns: 280px minmax(0, 1fr); gap: 0 40px; }
	.app-tour-title { font-size: 28px; }
}
@media screen and (max-width: 1001px) {
	.app .article { display: block; padding: 40px var(--gutter) 48px; }
	.app .article > h1 { font-size: 38px; }
	.app-tour-lead { margin: 16px 0 24px; }
	.app-tour-list { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 32px; }
	.app-tour-list button { font-size: 15px; }
	.app-tour-title { font-size: 22px; }
}

/* Funkcje aplikacji: wstęp obok tytułu, wspólna linia pod nagłówkiem */
.article:has(> .modules) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.article:has(> .modules) > h1 { grid-column: 1; }
.article:has(> .modules) > article { grid-column: 2; display: flex; align-items: flex-end; width: auto; margin: 0; padding: 80px 0 48px 72px; border-bottom: 1px solid var(--neutral-200); box-sizing: border-box; }
.article:has(> .modules) > article p { margin: 0; font-size: 18px; line-height: 1.5; }
.article:has(> .modules) > .modules, .article:has(> .modules) > .clearfix { grid-column: 1 / -1; }
@media screen and (max-width: 820px) {
	.article:has(> .modules) { display: block; }
	.article:has(> .modules) > article { display: block; padding: 0; margin: 24px 0 0; border: 0; }
	.article:has(> .modules) > article p { font-size: 15px; }
}

/* Oferta: nagłówek w dwóch kolumnach, pod nim tekst z lewej i formularz z prawej (od razu pod nagłówkiem, jak na starej stronie).
   Treść artykułu to jeden blok z CMS, więc jego elementy trafiają wprost do siatki (display: contents). */
@media screen and (min-width: 1002px) {
	.offer-page .article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; grid-auto-flow: row dense; align-items: start; padding-bottom: 96px; }
	.offer-page .article > h1 { grid-column: 1; grid-row: 1; border: 0; padding-bottom: 0; }
	.offer-page .article > article { display: contents; }
	/* clearfix artykułu (.cf:after) też stałby się elementem siatki i zajął pierwszą wolną komórkę */
	.offer-page .article > article:after { display: none; }
	.offer-page .article > article > * { grid-column: 1; }
	.offer-page .article > article > p:first-child { grid-column: 1; grid-row: 2; max-width: 520px; margin: 28px 0 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
	.offer-page .article > article > p:nth-child(2) { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
	.offer-page .article > article > ul:nth-child(3) { grid-column: 2; grid-row: 2; margin: 16px 0 0; }
	.offer-page .article > article > :nth-child(4) { margin-top: 96px; }
	.offer-page .article > article > .list-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 64px; }
	.offer-page .article > article > .col-1, .offer-page .article > article > .col-2 { float: none; width: auto; margin: 0 0 32px; padding: 0; }
	.offer-page .article > form.simple_form { grid-column: 2; grid-row: 3 / span 60; position: sticky; top: calc(var(--header-h) + 24px); float: none; width: auto; max-width: none; margin: 96px 0 0; }
	/* komunikat o wysłaniu lub błędach formularza nad formularzem */
	.offer-page .article > .cms_msg { grid-column: 2; grid-row: 3; margin: 96px 0 0; }
	.offer-page .article:has(> .cms_msg) > form.simple_form { grid-row: 4 / span 60; margin-top: 24px; }
	.offer-page .article > .clearfix { display: none; }
}

/* podstrony na telefonie */
@media screen and (max-width: 820px) {
	section.main h1, .wrapper.no_margin h1 { padding: 40px 0 24px; font-size: 38px; }
	.wrapper.no_margin h1 { padding-left: var(--gutter); padding-right: var(--gutter); }
	article { margin: 32px 0 48px; }
	article h1, article h2, article h2:has(+ ol.to_toggle) { font-size: 26px; margin-top: 40px; }
	form.simple_form { padding: 24px 20px; }
}


/* ===== Baner cookies ===== */
.cookie-alert { border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.cookie-alert > div { background: var(--emtrack-white) !important; color: var(--emtrack-black) !important; border: 1px solid var(--neutral-200); border-radius: 0; }
.cookie-alert a { color: var(--emtrack-red) !important; }
.cookie-alert a[onclick*="accept_cookie"] { border-radius: 0; background: var(--emtrack-red); color: var(--emtrack-white) !important; }
.cookie-alert a[onclick*="accept_cookie"]:hover { background: var(--emtrack-black); }