/* =========================================================================
   arenabooking.pl — jeden arkusz dla całej strony.
   Barwy marki z panelu (arena.css: --marka #4f46e5, gradient #e11d48 → #2563eb, barwy stanów wpłat z grafiku),
   kroje jak na arenapay.pl (Montserrat do nagłówków, Inter do tekstu) z własnego serwera.
   Tryb ciemny według ustawień systemu. Bez style="" w szablonach — CSP ma style-src 'self'.
   Tekst w ramkach (przyciski, pigułki, menu, komórki tabel): pionowy padding symetryczny — Inter i Montserrat same
   stawiają wersaliki na środku linii. Wyjątek: --mono (Liberation Mono, Consolas siedzą ok. 1px wyżej), tam zostaje
   nadwyżka u góry — sprawdzone pomiarem (.pasek-roboczy, .adres, .pulpit-karta li b, .grupa th).
   ========================================================================= */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-var.woff2") format("woff2");
  font-weight: 500 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --tlo: #f6f7fb; --papier: #ffffff; --papier-2: #f8fafc; --naglowek-tlo: rgb(246 247 251 / .88);
  --tekst: #0f172a; --tekst-2: #475569; --tekst-3: #64748b;
  --linia: #e2e8f0; --linia-mocna: #cbd5e1;
  --marka: #4f46e5; --marka-jasna: #eef2ff; --marka-tekst: #4338ca;
  --przycisk: #4f46e5; --przycisk-najazd: #4338ca; --przycisk-tekst: #ffffff;
  --drugi-tlo: #ffffff; --drugi-najazd: #eef2ff;
  --gradient: linear-gradient(135deg, #e11d48, #2563eb);
  --pas-tlo: #0f172a; --pas-tekst: #e2e8f0; --pas-cichy: #94a3b8; --pas-linia: #1e293b; --pas-akcent: #a5b4fc;
  --opl: #16a34a; --zad: #d97706; --wst: #64748b; --online: #4f46e5; --szkic: #6366f1;
  --opl-tlo: #dcfce7; --opl-tekst: #166534; --zad-tlo: #fef3c7; --zad-tekst: #92400e;
  --wst-tlo: #e2e8f0; --wst-tekst: #334155; --online-tlo: #e0e7ff; --online-tekst: #3730a3;
  --szkic-tlo: #ffffff; --szkic-tekst: #4338ca;
  --weekend: #f1f5f9; --dzis: #e11d48; --dzis-tlo: rgb(225 29 72 / .06);
  --uwaga-tlo: #fee2e2; --uwaga-tekst: #991b1b;
  --std-tlo: #eef2ff; --std-tekst: #4338ca;
  --szara-tlo: #e2e8f0; --szara-tekst: #334155;
  --roboczy-tlo: #fff7ed; --roboczy-tekst: #9a3412;
  --cien: 0 1px 2px rgb(15 23 42 / .05), 0 8px 24px rgb(15 23 42 / .07);
  --cien-duzy: 0 30px 70px -20px rgb(15 23 42 / .30), 0 2px 6px rgb(15 23 42 / .06);
  --fokus: 0 0 0 3px rgb(79 70 229 / .35);
  --mono: ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --naglowkowy: "Montserrat", "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --tlo: #0a0f1a; --papier: #111827; --papier-2: #0f1626; --naglowek-tlo: rgb(10 15 26 / .88);
    --tekst: #f1f5f9; --tekst-2: #cbd5e1; --tekst-3: #94a3b8;
    --linia: rgb(255 255 255 / .09); --linia-mocna: rgb(255 255 255 / .17);
    --marka: #818cf8; --marka-jasna: #1e1b4b; --marka-tekst: #a5b4fc;
    --przycisk: #6366f1; --przycisk-najazd: #5458e8; --przycisk-tekst: #ffffff;
    --drugi-tlo: #111827; --drugi-najazd: #1a2235;
    --pas-tlo: #060a13; --pas-linia: #1e293b;
    --opl: #34d399; --zad: #fbbf24; --wst: #94a3b8; --online: #818cf8; --szkic: #818cf8;
    --opl-tlo: rgb(52 211 153 / .16); --opl-tekst: #6ee7b7; --zad-tlo: rgb(251 191 36 / .16); --zad-tekst: #fcd34d;
    --wst-tlo: rgb(255 255 255 / .08); --wst-tekst: #cbd5e1; --online-tlo: rgb(129 140 248 / .22); --online-tekst: #c7d2fe;
    --szkic-tlo: transparent; --szkic-tekst: #c7d2fe;
    --weekend: rgb(255 255 255 / .035); --dzis: #fb7185; --dzis-tlo: rgb(251 113 133 / .07);
    --uwaga-tlo: rgb(248 113 113 / .16); --uwaga-tekst: #fca5a5;
    --std-tlo: rgb(129 140 248 / .16); --std-tekst: #c7d2fe;
    --szara-tlo: rgb(255 255 255 / .08); --szara-tekst: #cbd5e1;
    --roboczy-tlo: rgb(251 146 60 / .12); --roboczy-tekst: #fdba74;
    --cien: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .35);
    --cien-duzy: 0 30px 70px -20px rgb(0 0 0 / .7), 0 2px 6px rgb(0 0 0 / .4);
    --fokus: 0 0 0 3px rgb(129 140 248 / .45);
  }
}

/* --- podstawy ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 400 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--naglowkowy); margin: 0; text-wrap: balance; color: var(--tekst); }
h1 { font-weight: 800; font-size: clamp(2.2rem, 4.3vw, 3.5rem); line-height: 1.07; letter-spacing: -.028em; }
h2 { font-weight: 800; font-size: clamp(1.6rem, 2.7vw, 2.25rem); line-height: 1.15; letter-spacing: -.022em; }
h3 { font-weight: 700; font-size: 1.1rem; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--marka-tekst); text-underline-offset: 3px; }
code { font: 500 .88em var(--mono); }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 6px; }
[hidden] { display: none !important; }
.wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }
.mono { font-family: var(--mono); }

.przeskocz { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--papier); color: var(--tekst); padding: 9px 14px; border-radius: 8px; }
.przeskocz:focus { top: 12px; }
.pasek-roboczy { background: var(--roboczy-tlo); color: var(--roboczy-tekst); font: 500 12.5px/1.4 var(--mono); text-align: center; padding: 7px 16px 5px; }

/* --- przyciski i pigułki -------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1.2 "Inter", system-ui, sans-serif; text-decoration: none; cursor: pointer;
  background: var(--przycisk); color: var(--przycisk-tekst); border: 1px solid var(--przycisk); border-radius: 10px;
  padding: 12px 20px; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--przycisk-najazd); border-color: var(--przycisk-najazd); }
.btn-duzy { font-size: 17px; padding: 16px 28px; border-radius: 12px; }
.btn-maly { font-size: 15px; padding: 10px 16px; border-radius: 9px; }
.btn-drugi { background: var(--drugi-tlo); color: var(--tekst); border-color: var(--linia-mocna); }
.btn-drugi:hover { background: var(--drugi-najazd); border-color: var(--marka); }
.pigulka {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; white-space: nowrap; vertical-align: middle;
  font: 600 12px/1.2 "Inter", system-ui, sans-serif; padding: 3px 9px; letter-spacing: .01em;
}
.p-std { background: var(--std-tlo); color: var(--std-tekst); }
.p-free { background: var(--opl-tlo); color: var(--opl-tekst); }
.p-szara { background: var(--szara-tlo); color: var(--szara-tekst); }
.p-szkic { background: var(--roboczy-tlo); color: var(--roboczy-tekst); }
.klawisz { font: 600 .84em/1 "Inter", sans-serif; border: 1px solid var(--linia-mocna); background: var(--papier); border-radius: 6px; padding: 3px 7px; color: var(--tekst); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* --- nagłówek strony ------------------------------------------------------ */

.naglowek {
  position: sticky; top: 0; z-index: 30; background: var(--naglowek-tlo);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linia);
}
/* Trzy kolumny, boczne równe: menu wypada na środku strony, niezależnie od szerokości logo i przycisków. */
.naglowek-w { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 32px; min-height: 66px; }
.naglowek-w > .logo { justify-self: start; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tekst); }
.logo img { width: 30px; height: 30px; }
.logo span { font: 800 19px/1 var(--naglowkowy); letter-spacing: -.02em; }
.menu { display: flex; align-items: center; align-self: stretch; gap: 4px; }
/* Środek, gdy menu ma pełny rząd (wąski ekran); marginesy auto znikają przy przewijaniu, więc nic nie ucieka w lewo. */
.menu > :first-child, .menu > .mm:first-child > .mm-link { margin-left: auto; }
.menu > :last-child { margin-right: auto; }
.menu-link { display: inline-flex; align-items: center; gap: 4px; color: var(--tekst-2); text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; }
.menu-link:hover, .mm:hover > .mm-link { color: var(--tekst); background: var(--papier); }
.menu-link[aria-current="page"] { color: var(--marka-tekst); }
.mm-waski { display: none; }

/* Mega menu (inc/layout/menu.php): panel na całą szerokość pod nagłówkiem, po najechaniu albo z klawiatury. Bez skryptu. */
.mm { align-self: stretch; display: flex; align-items: center; }
.mm-strzalka { width: 14px; height: 14px; opacity: .55; transition: transform .15s; }
.mm:hover .mm-strzalka, .mm:has(:focus-visible) .mm-strzalka { transform: rotate(180deg); }
.mm-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier); border-bottom: 1px solid var(--linia); box-shadow: var(--cien-duzy);
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
/* Otwiera z małym opóźnieniem (przejazd myszą po menu nie mruga panelami), zamyka z opóźnieniem (droga myszy na panel). */
.mm:hover > .mm-panel, .mm:has(:focus-visible) > .mm-panel {
  visibility: visible; opacity: 1; transform: none; transition: opacity .15s .08s, transform .15s .08s, visibility 0s linear .08s;
}
.mm.mm-zamkniete > .mm-panel { visibility: hidden; opacity: 0; transition: none; }
.mm-w { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 44px; padding: 26px 0 30px; }
.mm-naglowek { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin: 0 0 12px; }
.mm-siatka { list-style: none; margin: 0 -12px; padding: 0; display: grid; gap: 2px 14px; }
.mm-siatka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-siatka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-poz { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--tekst); }
.mm-poz:hover, .mm-poz:focus-visible { background: var(--marka-jasna); }
.mm-ikona { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--marka); }
.mm-poz strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.mm-poz span span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--tekst-3); }
.mm-kolumny { display: flex; gap: 40px; }
.mm-kolumny > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.mm-siatka-2 .mm-poz span span { -webkit-line-clamp: 3; }
.mm-kolumny > div:has(.mm-siatka-2) { flex-grow: 2; }
.mm-kolumny .mm-siatka { align-self: stretch; }
.mm-bok { border-left: 1px solid var(--linia); padding-left: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.mm-bok .mm-naglowek { margin-bottom: 0; }
.mm-lista, .mm-wpisy { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.mm-bok .mm-lista { margin-bottom: 4px; }
.mm-wpisy { gap: 14px; }
.mm-lista a, .mm-wpisy a { color: var(--tekst); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.35; }
.mm-lista a:hover, .mm-wpisy a:hover { color: var(--marka-tekst); }
.mm-wpisy a { display: block; }
.mm-kategoria { display: block; font: 600 11.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 4px; }
.mm-ile { color: var(--tekst-3); font-size: 13.5px; margin-left: 4px; }
.mm-tekst { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
.mm-wszystkie { font-weight: 600; font-size: 14.5px; color: var(--marka-tekst); text-decoration: none; }
.mm-wszystkie:hover { text-decoration: underline; }
.naglowek-akcje { justify-self: end; display: flex; align-items: center; gap: 16px; }
.link-zaloguj { color: var(--tekst); font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
.link-zaloguj:hover { color: var(--marka-tekst); }

/* --- sekcje --------------------------------------------------------------- */

.sekcja { padding-block: 96px; }
.sekcja-bez-gory { padding-top: 0; }
.sek-naglowek { display: grid; gap: 14px; max-width: 720px; margin-bottom: 48px; }
.sek-naglowek-ciasny { margin-bottom: 0; }
.sek-naglowek > p:not(.etykieta) { color: var(--tekst-2); font-size: 18.5px; }
.etykieta { font: 600 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marka-tekst); }
.lista-ok { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-ok li { position: relative; padding-left: 28px; color: var(--tekst-2); }
.lista-ok li::before {
  content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 11px;
  border: solid var(--marka); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg);
}
.cta-rzad { display: flex; flex-wrap: wrap; gap: 12px; }
.blok { padding-bottom: 72px; }
.blok-ostatni { padding-bottom: 96px; }
.blok-tytul { margin-bottom: 24px; }
.pod-glowa { padding-block: 64px 40px; display: grid; gap: 16px; }
.pod-glowa .lead { font-size: 19.5px; color: var(--tekst-2); max-width: 40em; }

/* --- hero ----------------------------------------------------------------- */

.hero { padding-block: 72px 88px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto 40%; height: 900px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(99 102 241 / .13), transparent 70%);
}
.hero-w { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.hero-tekst { display: grid; gap: 22px; align-content: start; }
/* Etykieta z fraza "System rezerwacji..." siedzi w h1 (fraza w naglowku dla wyszukiwarki), wyglada jak etykieta nad nim. */
.hero h1 .etykieta { display: block; margin-bottom: 22px; text-wrap: wrap; }
.hero .lead { font-size: 19.5px; line-height: 1.55; color: var(--tekst-2); max-width: 36em; }
.h1-akcent { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fakty { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tekst-2); font-size: 15.5px; }
.fakty li { display: inline-flex; align-items: center; gap: 8px; }
.fakty li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--opl); }

.scena { position: relative; margin-bottom: 92px; }
.okno { background: var(--papier); border: 1px solid var(--linia); border-radius: 16px; box-shadow: var(--cien-duzy); overflow: hidden; }
.okno-pasek { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--linia); font-size: 14.5px; }
.okno-pasek strong { font: 700 15px/1 var(--naglowkowy); }
.okno-obiekt { color: var(--tekst-3); }
.okno-nav { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
.okno-nav span { border: 1px solid var(--linia); border-radius: 7px; padding: 3px 9px; font-size: 13px; color: var(--tekst-2); }
.okno-nav .okno-zakres { border: 0; font-family: var(--mono); font-size: 12.5px; color: var(--tekst-3); }
.legenda { list-style: none; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--linia); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--tekst-2); }
.legenda li { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 16px; height: 10px; border-radius: 3px; border-left: 3px solid; display: inline-block; }

.grafik-przewijanie { overflow-x: auto; }
.grafik { --w: 37px; --kol: 128px; min-width: calc(var(--kol) + 12 * var(--w)); font-size: 13px; }
.g-rzad { display: grid; grid-template-columns: var(--kol) max-content; border-bottom: 1px solid var(--linia); }
.g-rzad:last-child { border-bottom: 0; }
.g-pokoj {
  position: sticky; left: 0; z-index: 2; background: var(--papier); border-right: 1px solid var(--linia);
  padding: 0 12px; display: flex; align-items: center; gap: 6px; min-height: 42px; white-space: nowrap; overflow: hidden;
}
.g-pokoj b { font: 500 12px/1 var(--mono); color: var(--tekst-3); }
.g-rog { font: 500 11.5px/1 var(--mono); color: var(--tekst-3); text-transform: uppercase; letter-spacing: .06em; }
/* Tor dni: siatka pół-dni, żeby pasek zaczynał się i kończył w połowie dnia (przyjazd po południu, wyjazd rano). */
.g-tor { display: grid; grid-template-columns: repeat(24, calc(var(--w) / 2)); grid-template-rows: 1fr; }
.g-dzien, .g-kom { grid-row: 1; border-right: 1px solid var(--linia); }
.g-dzien.g-do-25, .g-kom.g-do-25 { border-right: 0; }
.g-dzien { display: grid; justify-items: center; align-content: center; gap: 1px; height: 46px; font-size: 11px; color: var(--tekst-3); }
.g-dzien b { font: 600 13.5px/1 var(--mono); color: var(--tekst); }
.weekend { background: var(--weekend); }
.g-dzien.dzis { color: var(--dzis); box-shadow: inset 0 -2px 0 var(--dzis); }
.g-dzien.dzis b { color: var(--dzis); }
.g-kom.dzis-kol { background: linear-gradient(90deg, transparent 50%, var(--dzis-tlo) 50%); }
.g-pobyt {
  grid-row: 1; z-index: 1; margin: 7px 1px; border-radius: 7px; padding: 0 8px; display: flex; align-items: center;
  font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid;
}
.g-pobyt.ciety-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.g-pobyt.ciety-p { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.s-opl { background: var(--opl-tlo); color: var(--opl-tekst); border-color: var(--opl); }
.s-zad { background: var(--zad-tlo); color: var(--zad-tekst); border-color: var(--zad); }
.s-wst { background: var(--wst-tlo); color: var(--wst-tekst); border-color: var(--wst); }
.s-online { background: var(--online-tlo); color: var(--online-tekst); border-color: var(--online); }
.s-szkic { background: var(--szkic-tlo); color: var(--szkic-tekst); border: 1.5px dashed var(--szkic); border-left: 3px solid var(--szkic); }

.pulpit-karta {
  position: absolute; left: -44px; bottom: -92px; z-index: 3; width: 250px;
  background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--cien-duzy); padding: 14px 16px;
  display: grid; gap: 10px; font-size: 14.5px;
}
.pk-tytul { font: 600 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); }
.pulpit-karta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pulpit-karta li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pulpit-karta li b { font: 600 13px/1 var(--mono); min-width: 26px; text-align: center; padding: 5px 7px 3px; border-radius: 999px; background: var(--szara-tlo); color: var(--szara-tekst); }
.pulpit-karta li.uwaga b { background: var(--uwaga-tlo); color: var(--uwaga-tekst); }
.pk-pogoda { font-size: 13px; color: var(--tekst-3); border-top: 1px solid var(--linia); padding-top: 9px; }

/* --- jeden dzień w obiekcie (ciemny pas w obu trybach) --------------------- */

.dzien { background: var(--pas-tlo); color: var(--pas-tekst); }
.dzien h2, .dzien h3 { color: #ffffff; }
.dzien .etykieta { color: var(--pas-akcent); }
.dzien-w { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.dzien-bok { position: sticky; top: 110px; display: grid; gap: 18px; }
.dzien-bok > p:not(.etykieta) { color: var(--pas-cichy); font-size: 18px; }
.os-czasu { list-style: none; margin: 0; padding: 0; display: grid; }
.os-czasu li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 22px; position: relative; padding-bottom: 34px; }
.os-czasu li:last-child { padding-bottom: 0; }
.os-czasu li::before { content: ""; position: absolute; left: 86px; top: 12px; bottom: -4px; width: 1px; background: var(--pas-linia); }
.os-czasu li:last-child::before { display: none; }
.os-czasu li::after { content: ""; position: absolute; left: 82px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--pas-tlo); border: 2px solid var(--pas-akcent); }
.os-czasu time { font: 500 15px/1.3 var(--mono); color: var(--pas-akcent); padding-top: 1px; }
.os-tresc { display: grid; gap: 8px; padding-left: 18px; }
.os-tresc p { color: var(--pas-cichy); }
.ekrany { display: flex; gap: 6px; flex-wrap: wrap; }
.ekran { font: 500 11.5px/1 var(--mono); color: var(--pas-tekst); border: 1px solid #334155; border-radius: 999px; padding: 4px 9px; }
.ekran-std { color: #c7d2fe; border-color: #4338ca; background: rgb(79 70 229 / .18); }

/* --- funkcje -------------------------------------------------------------- */

.funkcje-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.funkcja { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--linia-mocna); }
.funkcja svg { width: 26px; height: 26px; color: var(--marka); }
.funkcja p { color: var(--tekst-2); }
.funkcje-wiecej { margin-top: 44px; }

/* podstrony produktu: hero z tekstem i zrzutem obok (na waskim ekranie zrzut pod spodem), akapity, uwaga pod tabela */
.glowa-ze-zrzutem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
.glowa-ze-zrzutem > .etykieta, .glowa-ze-zrzutem > h1, .glowa-ze-zrzutem > p { grid-column: 1 / -1; }
.glowa-ze-zrzutem > h1 { max-width: 20em; }
.glowa-ze-zrzutem-tekst { display: grid; gap: 16px; }
.glowa-ze-zrzutem-obraz { position: static; }
.glowa-ze-zrzutem-obraz img { max-height: 520px; object-fit: cover; object-position: top; }
@media (max-width: 920px) { .glowa-ze-zrzutem { grid-template-columns: minmax(0, 1fr); } .glowa-ze-zrzutem-obraz { margin-top: 12px; } }
.akapity { display: grid; gap: 14px; max-width: 760px; color: var(--tekst-2); font-size: 17.5px; }
.akapity + .zasady { margin-top: 32px; }
.akapit-pod { margin-top: 18px; max-width: 760px; color: var(--tekst-2); }

/* /aplikacja-na-telefon: kroki (numery jak w pomocy), karty platform i telefony narysowane w CSS - ekran blokady z powiadomieniami
   i ekran glowny z menu skrotow po przytrzymaniu ikony (teksty jak w panelu, barwy stale - to obrazek, takze w trybie ciemnym) */
.funkcje-siatka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 32px; }
.kroki { list-style: none; margin: 4px 0 8px; padding: 0; counter-reset: krok; display: grid; gap: 16px; }
.platformy { display: grid; gap: 12px; margin-block: 4px 8px; }
.platforma { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--linia); border-radius: 12px; background: var(--papier); }
.platforma p { color: var(--tekst-2); font-size: 16px; }
.telefon { margin: 0; display: grid; gap: 14px; justify-items: center; align-content: start; }
.telefon figcaption { max-width: 34ch; font-size: 14px; color: var(--tekst-3); text-align: center; }
.tel-obudowa { width: 300px; max-width: 100%; aspect-ratio: 9 / 19; padding: 11px; border-radius: 46px; background: #0b1120; box-shadow: var(--cien-duzy), inset 0 0 0 2px #334155; }
.tel-ekran { position: relative; height: 100%; overflow: hidden; border-radius: 36px; padding: 56px 12px 16px; display: grid; align-content: start; gap: 8px;
  background: linear-gradient(165deg, #1e3a8a 0%, #4c1d95 55%, #9f1239 100%); color: #fff; }
.tel-ekran::before { content: ""; position: absolute; top: 12px; left: 50%; width: 86px; height: 24px; border-radius: 999px; background: #0b1120; transform: translateX(-50%); }
.tel-ekran::after { content: ""; position: absolute; bottom: 8px; left: 50%; width: 110px; height: 4px; border-radius: 999px; background: rgb(255 255 255 / .7); transform: translateX(-50%); }
/* ekran blokady: latarka i aparat w dolnych rogach; ekran glowny: dok z czterema aplikacjami */
.tel-dol { position: absolute; inset: auto 26px 30px; display: flex; justify-content: space-between; }
.tel-dol span, .tel-dok { background: rgb(255 255 255 / .16); }
.tel-dol span { width: 44px; height: 44px; border-radius: 50%; }
.tel-dok { position: absolute; inset: auto 12px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 12px 16px; border-radius: 26px; }
.tel-godzina { font: 600 62px/1 var(--naglowkowy); letter-spacing: -.02em; text-align: center; }
.tel-data { margin-bottom: 14px; font-size: 14px; color: rgb(255 255 255 / .85); text-align: center; }
.tel-powiadomienie { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 1px 10px; padding: 11px 12px; border-radius: 18px; background: rgb(255 255 255 / .93); color: #0f172a; }
.tel-powiadomienie img { grid-row: 1 / span 3; width: 36px; height: 36px; border-radius: 9px; }
.tel-apka { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #64748b; }
.tel-tytul { font-size: 14px; font-weight: 700; line-height: 1.3; }
.tel-opis { font-size: 12.5px; line-height: 1.35; color: #334155; }
.tel-ekran-glowny { padding-top: 70px; gap: 0; }
.tel-ikony { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 14px; align-items: start; padding-inline: 8px; }
.tel-apl { aspect-ratio: 1; border-radius: 14px; background: rgb(255 255 255 / .16); }
.tel-apl-ab { aspect-ratio: auto; display: grid; justify-items: center; gap: 6px; background: none; }
.tel-apl-ab img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 3px rgb(255 255 255 / .6); }
.tel-apl-ab small { font-size: 10.5px; line-height: 1; white-space: nowrap; }
.tel-skroty { list-style: none; width: 72%; margin: 12px 0 0 8px; padding: 6px 0; border-radius: 16px; background: rgb(255 255 255 / .95); color: #0f172a;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgb(0 0 0 / .3); }
.tel-skroty li { padding: 10px 16px; }
.tel-skroty li + li { border-top: 1px solid #e2e8f0; }

/* strona /funkcje: spis grup, grupy pod kotwicami (nagłówek jest przyklejony, 66px), link do instrukcji pod opisem */
.funkcje-spis { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 8px; }
.funkcje-spis a { font-size: 14.5px; padding: 7px 14px; border: 1px solid var(--linia-mocna); border-radius: 999px; color: var(--tekst-2); text-decoration: none; }
.funkcje-spis a:hover { border-color: var(--marka); color: var(--marka-tekst); }
/* grupa: tekst z lista funkcji obok zrzutu panelu (co druga odwrotnie, na jasniejszym tle); zrzut przyklejony przy przewijaniu */
.funkcje-grupa { padding-block: 72px; scroll-margin-top: 66px; }
.funkcje-grupa-odwr { background: var(--papier-2); border-block: 1px solid var(--linia); }
.funkcje-grupa-w { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.funkcje-grupa-odwr .funkcje-tekst { order: 2; }
.funkcje-tekst { display: grid; gap: 14px; align-content: start; }
.funkcje-ikona { width: 30px; height: 30px; color: var(--marka); }
.funkcje-wstep { color: var(--tekst-2); font-size: 18px; }
.funkcje-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.funkcja-wiersz { display: grid; gap: 6px; padding-block: 16px; border-top: 1px solid var(--linia); }
.funkcja-wiersz p { color: var(--tekst-2); }
.funkcja-wiersz h3 .pigulka { margin-left: 4px; }
.funkcja-wiersz .funkcja-pomoc { font-size: 15px; font-weight: 600; }
.funkcje-zrzut { margin: 0; display: grid; gap: 10px; position: sticky; top: 90px; }
.funkcje-zrzut img { width: 100%; height: auto; background: var(--papier); border: 1px solid var(--linia); border-radius: 12px; box-shadow: var(--cien); }
.funkcje-zrzut figcaption { font-size: 14px; color: var(--tekst-3); }
@media (max-width: 920px) {
  .funkcje-grupa { padding-block: 48px; }
  .funkcje-grupa-w { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .funkcje-tekst { display: contents; }
  .funkcje-zrzut { position: static; order: 1; margin-block: 14px 6px; }
  .funkcje-lista { order: 2; }
}
.funkcje-granice { display: grid; gap: 20px; padding-top: 48px; }
.funkcje-granice .sek-naglowek { margin-bottom: 0; }
.funkcje-granice ul { display: grid; gap: 12px; max-width: 760px; margin: 0; padding-left: 20px; }
.funkcje-granice li, .funkcje-granice > p { color: var(--tekst-2); max-width: 760px; }

/* --- strona oferty -------------------------------------------------------- */

.oferta-w { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.oferta-tekst { display: grid; gap: 18px; }
.oferta-tekst > p:not(.etykieta) { color: var(--tekst-2); font-size: 18px; }
.przegladarka { background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--cien-duzy); overflow: hidden; }
.pasek-adresu { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--linia); background: var(--papier-2); }
.kropki { display: flex; gap: 6px; }
.kropki i { width: 10px; height: 10px; border-radius: 50%; background: var(--linia-mocna); }
.adres { flex: 1; min-width: 0; font: 500 12.5px/1 var(--mono); color: var(--tekst-2); background: var(--papier); border: 1px solid var(--linia); border-radius: 7px; padding: 7px 10px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adres b { color: var(--tekst); font-weight: 600; }
.of-foto { position: relative; aspect-ratio: 16 / 6; max-width: 100%; background: linear-gradient(180deg, #a5c8e8 0%, #dbe8f3 60%, #eef3f7 100%); overflow: hidden; }
.of-foto svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.of-foto-tekst { position: absolute; left: 20px; bottom: 16px; color: #ffffff; text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.of-foto-tekst strong { display: block; font: 800 22px/1.1 var(--naglowkowy); letter-spacing: -.02em; }
.of-foto-tekst span { font-size: 14px; }
.of-szukaj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; padding: 14px; border-bottom: 1px solid var(--linia); }
.of-pole { border: 1px solid var(--linia-mocna); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; line-height: 1.2; }
.of-pole small { display: block; font-size: 11px; color: var(--tekst-3); line-height: 1.2; }
.of-pokoj { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--linia); }
.of-pokoj:last-child { border-bottom: 0; }
.of-miniatura { width: 56px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, #cbd5e1, #e2e8f0); }
.of-miniatura.m2 { background: linear-gradient(135deg, #d6c7b4, #efe5d8); }
.of-miniatura.m3 { background: linear-gradient(135deg, #9bb59a, #d3e0cf); }
.of-pokoj p { font-size: 13.5px; color: var(--tekst-3); }
.of-pokoj .of-nazwa { font: 700 14.5px/1.2 var(--naglowkowy); color: var(--tekst); }
.of-cena { text-align: right; display: grid; gap: 6px; justify-items: end; }
.of-cena b { font: 600 14px/1 var(--mono); }
.przegladarka .btn { font-size: 14px; padding: 8px 14px; border-radius: 8px; }
.of-stopka { padding: 10px 14px; font-size: 12.5px; color: var(--tekst-3); background: var(--papier-2); border-top: 1px solid var(--linia); }

/* --- plany i cennik ------------------------------------------------------- */

.plany { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.plan { background: var(--papier); border: 1px solid var(--linia); border-radius: 18px; padding: 30px; display: grid; gap: 20px; align-content: start; }
.plan.polecany { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka), var(--cien); }
.plan-glowa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-glowa h3 { font-size: 1.35rem; font-weight: 800; }
.cena { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cena strong { font: 800 2.7rem/1 var(--naglowkowy); letter-spacing: -.03em; }
.cena span { color: var(--tekst-3); font-size: 15px; }
.plan > p { color: var(--tekst-2); }
.plan > .btn { justify-self: start; }
.dopisek { font-size: 14px; color: var(--tekst-3); }
.plan > p.dopisek { color: var(--tekst-3); }

.tabela-przewijanie { overflow-x: auto; }
.tabela-ramka { border: 1px solid var(--linia); border-radius: 16px; background: var(--papier); }
.tabela { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15.5px; }
.tabela th, .tabela td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--linia); vertical-align: top; }
.tabela tbody th { font-weight: 400; }
.tabela tr:last-child td, .tabela tr:last-child th { border-bottom: 0; }
.tabela thead th { font: 700 14px/1.2 var(--naglowkowy); background: var(--papier-2); }
.tabela td { width: 22%; }
.tabela .grupa th { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); background: var(--papier-2); padding-block: 10px 8px; }
.tak { display: inline-block; width: 7px; height: 13px; border: solid var(--opl); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg); margin-left: 4px; }
.nie { color: var(--tekst-3); }
.drobne { font-size: 13.5px; color: var(--tekst-3); display: block; margin-top: 2px; }
.zasady { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.zasady-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zasady-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.przyklad-zrzut { display: block; margin-bottom: 18px; border: 1px solid var(--linia); border-radius: 12px; overflow: hidden; box-shadow: var(--cien); }
.przyklad-zrzut img { display: block; width: 100%; height: auto; }
.zasada { display: grid; gap: 8px; align-content: start; }
.zasada p { color: var(--tekst-2); font-size: 16px; }
.ramka-arenapay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 24px 28px; border-radius: 16px; background: var(--papier); border: 1px solid var(--linia); }
.ramka-arenapay p { color: var(--tekst-2); margin-top: 6px; }
.ramka-arenapay-tytul { font-size: 1.2rem; }
.znak-ap { width: 44px; height: 44px; border-radius: 12px; background: var(--gradient); display: grid; place-items: center; color: #ffffff; font: 800 18px/1 var(--naglowkowy); }

/* --- FAQ ------------------------------------------------------------------ */

.faq-w { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 56px; align-items: start; }
.faq-w .sek-naglowek { margin-bottom: 0; }
.faq details { border-bottom: 1px solid var(--linia-mocna); }
.faq details:first-child { border-top: 1px solid var(--linia-mocna); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 18px; font: 700 17px/1.35 var(--naglowkowy); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--mono); color: var(--marka); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--tekst-2); padding-bottom: 20px; max-width: 62ch; }
.faq details .faq-pomoc { margin-top: -8px; font-weight: 600; }

/* --- skrót poradnika, CTA, stopka ----------------------------------------- */

.skrot-glowa { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.skrot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.skrot a { display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; padding-top: 18px; border-top: 2px solid var(--tekst); }
.skrot a:hover h3 { color: var(--marka-tekst); }
.skrot .kat { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); }
/* karta z okladka wpisu: obrazek zamiast kreski nad kategoria */
.skrot a:has(> .skrot-okladka) { border-top: 0; padding-top: 0; }
.skrot-okladka { width: 100%; height: auto; aspect-ratio: 880 / 462; border-radius: 14px; margin-bottom: 6px; }
.skrot p { color: var(--tekst-2); font-size: 16px; }

.cta-pas { background: var(--papier); border-block: 1px solid var(--linia); }
.cta-w { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; padding-block: 64px; }
.cta-w p { color: var(--tekst-2); font-size: 18px; margin-top: 10px; max-width: 46em; }

.stopka { padding-block: 56px 40px; color: var(--tekst-2); font-size: 15px; }
.stopka-siatka { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.stopka-modul { font-weight: 700; color: var(--tekst-3); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.stopka-marka { display: grid; gap: 14px; align-content: start; }
.stopka-kontakt { font-size: 13.5px; }
.stopka-profile { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 600; }
.stopka-naglowek { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 12px; }
.stopka ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.stopka a { color: var(--tekst-2); text-decoration: none; }
.stopka a:hover { color: var(--marka-tekst); }
.stopka-dol { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--linia); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: var(--tekst-3); }

/* --- poradnik ------------------------------------------------------------- */

.filtry { display: flex; flex-wrap: wrap; gap: 8px; }
.filtry a {
  font: 600 14.5px/1.2 "Inter", system-ui, sans-serif; color: var(--tekst-2); background: var(--papier); text-decoration: none;
  border: 1px solid var(--linia-mocna); border-radius: 999px; padding: 7px 14px;
}
.filtry a:hover { border-color: var(--marka); color: var(--tekst); }
.filtry a[aria-current="page"] { background: var(--tekst); color: var(--tlo); border-color: var(--tekst); }
.poradnik { display: grid; gap: 40px; }
.wyrozniony { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 20px; overflow: hidden; background: var(--papier); border: 1px solid var(--linia); text-decoration: none; color: inherit; }
.wyrozniony:hover h2 { color: var(--marka-tekst); }
.wyr-grafika { position: relative; min-height: 260px; background: var(--pas-tlo); display: grid; align-content: end; padding: 28px; overflow: hidden; }
.wyr-grafika::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 420px; height: 420px; background: radial-gradient(closest-side, rgb(225 29 72 / .45), transparent 70%); }
.wyr-grafika::after { content: ""; position: absolute; inset: auto auto -30% -20%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgb(37 99 235 / .5), transparent 70%); }
.wyr-kategoria { position: relative; z-index: 1; font: 600 12.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e2e8f0; }
/* okladka wpisu ma wlasne poswiaty, wiec bez tych z CSS; kategoria na ciemnej pigulce, zeby nie ginela na rysunku */
.wyr-grafika:has(> .wyr-okladka)::before, .wyr-grafika:has(> .wyr-okladka)::after { content: none; }
.wyr-okladka { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wyr-grafika:has(> .wyr-okladka) .wyr-kategoria { justify-self: start; padding: 8px 12px 6px; border-radius: 999px; background: rgb(15 23 42 / .78); }
.wyr-tekst { padding: 40px; display: grid; gap: 16px; align-content: center; }
.wyr-tekst p { color: var(--tekst-2); font-size: 18px; }
.meta-wpisu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 13px/1.3 var(--mono); color: var(--tekst-3); }
.wpis { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 24px; padding-block: 26px; border-bottom: 1px solid var(--linia); text-decoration: none; color: inherit; align-items: baseline; }
.wpis:has(> .wpis-okladka) { grid-template-columns: 200px minmax(0, 1fr) 70px; align-items: start; }
.wpis-okladka { width: 100%; height: auto; aspect-ratio: 880 / 462; border-radius: 12px; }
.wpis:first-child { border-top: 1px solid var(--linia); }
.wpis:hover h2 { color: var(--marka-tekst); }
.wpis .kat { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--marka-tekst); }
.wpis .kat time { color: var(--tekst-3); letter-spacing: 0; text-transform: none; font-weight: 500; }
.wpis div { display: grid; gap: 6px; }
.wpis h2 { font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em; }
.wpis p { color: var(--tekst-2); }
.wpis .czas { font: 500 13px/1.3 var(--mono); color: var(--tekst-3); text-align: right; }
.wpis:has(> .wpis-okladka) .czas { padding-top: 2px; }

/* --- wpis i pomoc: treść z markdownu -------------------------------------- */

.okruszki-w { padding-top: 48px; }
.okruszki { font: 500 13px/1.3 var(--mono); color: var(--tekst-3); display: flex; gap: 8px; flex-wrap: wrap; }
.okruszki a { color: var(--tekst-3); }
.artykul-w { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 64px; align-items: start; padding-block: 24px 72px; }
.artykul { max-width: 680px; display: grid; gap: 22px; }
.lead-art { font-size: 21px; line-height: 1.55; color: var(--tekst-2); }
.tresc-md { display: grid; gap: 22px; font-size: 18px; line-height: 1.7; }
.tresc-md h2 { font-size: 1.5rem; margin-top: 18px; scroll-margin-top: 90px; }
.tresc-md h3 { font-size: 1.15rem; margin-top: 8px; scroll-margin-top: 90px; }
.tresc-md ul, .tresc-md ol { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.tresc-md li::marker { color: var(--tekst-3); }
.tresc-md figure { margin: 0; display: grid; gap: 10px; }
.tresc-md figure img { border: 1px solid var(--linia); border-radius: 12px; box-shadow: var(--cien); }
.tresc-md figure video { display: block; width: 100%; height: auto; background: var(--papier-2); border: 1px solid var(--linia); border-radius: 12px; box-shadow: var(--cien); }
.tresc-md figcaption { font-size: 14px; color: var(--tekst-3); }
.tresc-md em { color: var(--tekst-2); }
/* Strony "dla kogo" (inc/strony/dla.php) i karty na stronie glownej. */
.dla-siatka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dla-karta { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); color: var(--tekst); text-decoration: none; }
.dla-karta:hover { border-color: var(--marka); }
.dla-karta svg { width: 26px; height: 26px; color: var(--marka); }
.dla-karta-tytul { font: 700 17px/1.3 var(--naglowkowy); }
.dla-karta-opis { color: var(--tekst-2); font-size: 15px; line-height: 1.5; }
.dla-modul { margin: 28px 0 14px; font-size: 1.05rem; color: var(--tekst-2); }
.dzien-dla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.dzien-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.dzien-lista li { display: grid; gap: 4px; padding-left: 16px; border-left: 3px solid var(--marka-jasna); }
.dzien-lista strong { font: 700 15px/1.3 var(--naglowkowy); color: var(--marka-tekst); }
.dzien-lista span { color: var(--tekst-2); }
.dla-linki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.dla-linki ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
/* FAQ we wpisie (":::pytania"): ten sam rytm co reszta tresci, pytanie blizej swojej odpowiedzi niz poprzedniej. */
.tresc-md .pytania { display: grid; gap: 12px; }
.tresc-md .pytania h3 { margin-top: 14px; }
.tresc-md .pytania h3:first-child { margin-top: 0; }
.porownanie { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 16px; line-height: 1.45; }
.porownanie th, .porownanie td { padding: 11px 14px; border-bottom: 1px solid var(--linia); text-align: left; }
.porownanie thead th { font: 700 14px/1.2 var(--naglowkowy); border-bottom: 2px solid var(--tekst); }
.porownanie td:first-child { font-weight: 600; color: var(--tekst-2); }
.ramka-produkt { border-radius: 14px; background: var(--marka-jasna); padding: 20px 22px; display: grid; gap: 10px; font-size: 16.5px; line-height: 1.55; }
.ramka-produkt p { color: var(--tekst-2); }
.ramka-produkt .ramka-tytul { font: 700 15px/1.3 var(--naglowkowy); color: var(--marka-tekst); }
.ramka-std { border: 1px solid var(--linia); border-left: 3px solid var(--marka); background: var(--papier); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; font-size: 16px; line-height: 1.55; }
.ramka-std .pigulka { justify-self: start; }
.ramka-std p { color: var(--tekst-2); }
.spis { position: sticky; top: 100px; display: grid; gap: 14px; font-size: 15px; }
.spis-tytul { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.spis ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--linia-mocna); display: grid; gap: 10px; }
.spis a:not(.btn) { color: var(--tekst-2); text-decoration: none; }
.spis a:not(.btn):hover { color: var(--marka-tekst); }
.spis .btn { margin-top: 8px; justify-self: start; }

/* --- pomoc ---------------------------------------------------------------- */

.dzialy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.dzial { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--linia-mocna); }
.dzial h3 { font-size: 1.3rem; }
.dzial ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dzial a { font-weight: 600; }
.dzial p { color: var(--tekst-2); font-size: 15.5px; margin-top: 2px; }
.pomoc-w { display: grid; grid-template-columns: 250px minmax(0, 1fr) 200px; gap: 48px; align-items: start; padding-block: 40px 88px; }
.pomoc-bok { position: sticky; top: 86px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 6px; }
.drzewo { display: grid; gap: 16px; }
.drzewo-blok { display: grid; gap: 16px; }
.drzewo-blok + .drzewo-blok { padding-top: 16px; border-top: 1px solid var(--linia); }
.drzewo-modul { font: 700 15px/1.2 var(--naglowkowy); color: var(--tekst); padding: 0 10px; }
.drzewo-dzial { font: 600 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin-bottom: 6px; }
.drzewo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.drzewo a { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; color: var(--tekst-2); font-size: 15px; padding: 5px 10px; border-radius: 7px; }
.drzewo a:hover { background: var(--papier); color: var(--tekst); }
.drzewo a[aria-current="page"] { background: var(--marka-jasna); color: var(--marka-tekst); font-weight: 600; }
.drzewo .pigulka { font-size: 10.5px; padding: 2px 7px; }
.pomoc-tresc { display: grid; gap: 22px; max-width: 720px; }
.pomoc-tresc h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
.aktualizacja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 13px/1.3 var(--mono); color: var(--tekst-3); }
.lead-pomocy { font-size: 19px; color: var(--tekst-2); }
.pomoc-tresc .tresc-md { font-size: 17.5px; }
.pomoc-tresc .tresc-md ol { list-style: none; padding: 0; counter-reset: krok; gap: 18px; }
.pomoc-tresc .tresc-md ol > li, .kroki > li { counter-increment: krok; position: relative; padding-left: 46px; color: var(--tekst-2); }
.pomoc-tresc .tresc-md ol > li strong, .kroki > li strong { color: var(--tekst); }
.pomoc-tresc .tresc-md ol > li::before, .kroki > li::before {
  content: counter(krok); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; padding-top: 1px;
  font: 600 14px/1 var(--mono); background: var(--papier); border: 1px solid var(--linia-mocna); color: var(--tekst);
}
.pytanie { border-block: 1px solid var(--linia); padding-block: 18px; color: var(--tekst-2); font-size: 16px; }
.nast { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.nast a { border: 1px solid var(--linia); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--tekst); display: grid; gap: 2px; background: var(--papier); }
.nast a:hover { border-color: var(--marka); }
.nast small { font: 500 12px/1.3 var(--mono); color: var(--tekst-3); }
.nast .nast-dalej { text-align: right; grid-column: 2; }
.menu-pomocy-mobile { display: none; }

/* --- dokumenty ------------------------------------------------------------ */

.dokument { max-width: 720px; display: grid; gap: 16px; }
.dokument h2 { font-size: 1.3rem; margin-top: 16px; }
.dokument p { color: var(--tekst-2); }
.dokument ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; color: var(--tekst-2); }

/* Dokument umowy z markdownu (inc/strony/dokument.php): wersja, stały adres, spis paragrafów, lista wersji. */
.dokument-wersja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 14px/1.4 var(--mono); color: var(--tekst-3); }
.dokument-w { display: grid; gap: 32px; }
.dokument-w > * { max-width: 760px; }
.dokument-info { display: grid; gap: 6px; font-size: 15px; color: var(--tekst-2); background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; padding: 16px 20px; }
.dokument-info a { overflow-wrap: anywhere; }
.o-nas-skrot { gap: 12px; padding: 20px 24px; }
.o-nas-skrot h2 { font-size: 1.1rem; }
.o-nas-fakty { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
.o-nas-fakty dt { font-weight: 600; color: var(--tekst); }
.o-nas-fakty dd { margin: 0; }
.dokument-archiwum { color: var(--uwaga-tekst); font-weight: 600; }
.dokument-spis, .dokument-wersje { display: grid; gap: 12px; }
.dokument-spis ol, .dokument-wersje ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--linia-mocna); display: grid; gap: 6px; font-size: 15px; }
.dokument-spis a, .dokument-wersje a { color: var(--tekst-2); text-decoration: none; }
.dokument-spis a:hover, .dokument-wersje a:hover { color: var(--marka-tekst); }
.dokument-wersje a[aria-current="page"] { color: var(--marka-tekst); font-weight: 600; }
.dokument-tresc { font-size: 16.5px; line-height: 1.65; }
.dokument-tresc h2 { font-size: 1.25rem; }
.dokument-tresc h3 { font-size: 1.05rem; }
.dokument-tresc li > ul, .dokument-tresc li > ol, .dokument-tresc li > p { margin-top: 8px; }
.dokument-tresc li > ul { gap: 6px; }
/* `[DO ...]` w projekcie dokumentu - miejsce do rozstrzygnięcia przed publikacją. */
.uwaga-redakcyjna { background: var(--zad-tlo); color: var(--zad-tekst); font: 600 .82em/1.5 var(--mono); padding: 1px 5px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* --- baner cookies (tylko przy analityce albo pikselu Meta) --------------- */

.cookie-baner {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 100; max-width: 760px; margin-inline: auto;
  display: flex; gap: 18px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 18px 20px; background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--cien-duzy); font-size: 15px;
}
.cookie-baner.schowany { display: none; }
.cookie-tresc { flex: 1 1 380px; display: grid; gap: 6px; color: var(--tekst-2); }
.cookie-tytul { font-weight: 700; color: var(--tekst); }
.cookie-akcje { display: flex; gap: 10px; flex-wrap: wrap; }
/* wybor kategorii (przy pikselu Meta); display: grid przykrywa atrybut hidden, wiec osobna regula */
.cookie-opcje { display: grid; gap: 8px; margin-top: 6px; }
.cookie-opcje[hidden] { display: none; }
.cookie-opcje label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cookie-opcje input { margin-top: 4px; flex: none; }

/* --- tablet i telefon ----------------------------------------------------- */

@media (max-width: 1100px) {
  /* Nagłówek w dwóch rzędach już od 1100 px: logo, menu i przyciski nie mieszczą się w jednym. Mega menu tylko na szerokim
     ekranie: tu sam rząd linków, a Wiedzę zastępują Poradnik i Pomoc. */
  .naglowek-w { grid-template-columns: 1fr auto; padding-top: 10px; gap: 6px 16px; }
  .menu { grid-row: 2; grid-column: 1 / -1; overflow-x: auto; margin-inline: -8px; padding-bottom: 8px; scrollbar-width: none; }
  .mm { display: contents; }
  .mm-panel, .mm-strzalka, .mm.mm-szeroki { display: none; }
  .mm-waski { display: inline-flex; }
  .funkcje-siatka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pomoc-w { grid-template-columns: 230px minmax(0, 1fr); }
  .pomoc-w > .spis { display: none; }
  .artykul-w { grid-template-columns: minmax(0, 1fr); }
  .artykul-w > .spis { position: static; }
  .artykul-w > .spis ol { display: none; }
  .artykul-w > .spis .spis-tytul { display: none; }
}
@media (max-width: 920px) {
  .sekcja { padding-block: 64px; }
  .sekcja-bez-gory { padding-top: 0; }
  .hero { padding-block: 44px 56px; }
  .hero-w, .dzien-w, .oferta-w, .faq-w { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .scena { margin-bottom: 0; }
  .pulpit-karta { position: static; width: auto; margin-top: 14px; }
  .dzien-bok { position: static; }
  .funkcje-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dla-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dzien-dla, .dla-linki { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .skrot { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .zasady { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stopka-siatka { grid-template-columns: 1fr 1fr; }
  .stopka-marka { grid-column: 1 / -1; }
  .wyrozniony { grid-template-columns: minmax(0, 1fr); }
  .wyr-grafika { min-height: 160px; }
  .dzialy { grid-template-columns: minmax(0, 1fr); }
  .pomoc-w { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .pomoc-bok { display: none; }
  .menu-pomocy-mobile { display: block; border: 1px solid var(--linia); border-radius: 12px; background: var(--papier); }
  .menu-pomocy-mobile summary { cursor: pointer; padding: 11px 16px; font-weight: 600; }
  .menu-pomocy-mobile .drzewo { padding: 4px 12px 14px; }
}
@media (max-width: 720px) {
  body { font-size: 16.5px; }
  .link-zaloguj { display: none; }
  .cta-rzad .btn { flex: 1 1 auto; }
  .funkcje-siatka, .plany, .zasady { grid-template-columns: minmax(0, 1fr); }
  .dla-siatka { grid-template-columns: minmax(0, 1fr); }
  .cta-w { grid-template-columns: minmax(0, 1fr); }
  .os-czasu li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .os-czasu li::before { left: 64px; }
  .os-czasu li::after { left: 60px; }
  .os-tresc { padding-left: 14px; }
  .of-szukaj { grid-template-columns: 1fr 1fr; }
  .of-szukaj .btn { grid-column: 1 / -1; }
  .wpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* miniatura obok kategorii i tytulu, opis i czas pod nimi na cala szerokosc */
  .wpis:has(> .wpis-okladka) { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; }
  .wpis:has(> .wpis-okladka) > div { display: contents; }
  .wpis:has(> .wpis-okladka) .wpis-okladka { grid-row: 1 / span 2; border-radius: 10px; }
  .wpis:has(> .wpis-okladka) .kat, .wpis:has(> .wpis-okladka) h2 { grid-column: 2; }
  .wpis:has(> .wpis-okladka) p, .wpis:has(> .wpis-okladka) .czas { grid-column: 1 / -1; padding-top: 0; }
  .wpis .czas { text-align: left; }
  .wyr-tekst { padding: 26px; }
  .ramka-arenapay { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: 24px; }
  .nast { grid-template-columns: 1fr; }
  .nast .nast-dalej { text-align: left; grid-column: auto; }
  .stopka-siatka { grid-template-columns: minmax(0, 1fr); }
  .o-nas-fakty { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .o-nas-fakty dd + dt { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* --- grafik w hero: położenie komórek i pasków na siatce pół-dni -----------
   Klasy g-od-N / g-do-N zamiast style="" (inc/sekcje/start/hero.php). Linie 1-25 = 12 dni. */
.g-od-1{grid-column-start:1} .g-od-2{grid-column-start:2} .g-od-3{grid-column-start:3} .g-od-4{grid-column-start:4} .g-od-5{grid-column-start:5} .g-od-6{grid-column-start:6} .g-od-7{grid-column-start:7} .g-od-8{grid-column-start:8} .g-od-9{grid-column-start:9} .g-od-10{grid-column-start:10} .g-od-11{grid-column-start:11} .g-od-12{grid-column-start:12} .g-od-13{grid-column-start:13} .g-od-14{grid-column-start:14} .g-od-15{grid-column-start:15} .g-od-16{grid-column-start:16} .g-od-17{grid-column-start:17} .g-od-18{grid-column-start:18} .g-od-19{grid-column-start:19} .g-od-20{grid-column-start:20} .g-od-21{grid-column-start:21} .g-od-22{grid-column-start:22} .g-od-23{grid-column-start:23} .g-od-24{grid-column-start:24}
.g-do-2{grid-column-end:2} .g-do-3{grid-column-end:3} .g-do-4{grid-column-end:4} .g-do-5{grid-column-end:5} .g-do-6{grid-column-end:6} .g-do-7{grid-column-end:7} .g-do-8{grid-column-end:8} .g-do-9{grid-column-end:9} .g-do-10{grid-column-end:10} .g-do-11{grid-column-end:11} .g-do-12{grid-column-end:12} .g-do-13{grid-column-end:13} .g-do-14{grid-column-end:14} .g-do-15{grid-column-end:15} .g-do-16{grid-column-end:16} .g-do-17{grid-column-end:17} .g-do-18{grid-column-end:18} .g-do-19{grid-column-end:19} .g-do-20{grid-column-end:20} .g-do-21{grid-column-end:21} .g-do-22{grid-column-end:22} .g-do-23{grid-column-end:23} .g-do-24{grid-column-end:24} .g-do-25{grid-column-end:25}

/* --- wydruk (dokument „Drukuj → Zapisz jako PDF”) ----------------------------- */
@media print {
  .naglowek, .stopka, .pasek-roboczy, .cookie-baner, .przeskocz, .dokument-spis, .dokument-wersje { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { width: auto; }
  .pod-glowa, .blok { padding-block: 0 16px; }
  .dokument-info { border: 0; padding: 0; }
  a { color: inherit; }
}

/* CO NOWEGO (/nowosci, 1.605): filtr modulow, miesiace, dzien (data | jego nowosci: znaczniki, tytul, opis, "Jak to dziala"; 1.608). */
.nowosci-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.nowosci-filtry a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linia-mocna); color: var(--tekst); text-decoration: none; font-weight: 600;
  font-size: 15px; }
.nowosci-filtry a[aria-current] { background: var(--marka); border-color: var(--marka); color: #fff; }
.nowosci-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.nowosc-dzien { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--linia-mocna); }
.nowosc-dzien time { font: 600 14px/1.4 var(--mono); color: var(--tekst-3); padding-top: 4px; }
.nowosc-wpis + .nowosc-wpis { margin-top: 26px; }
.nowosc-wpis h3 { font-size: 1.3rem; margin: 6px 0; }
.nowosc-wpis p { color: var(--tekst-2); margin: 0; max-width: 46em; }
.nowosc-tagi { display: flex; flex-wrap: wrap; gap: 6px; }
.nowosc-tag { font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: var(--papier-2);
  color: var(--tekst-2); }
.nowosc-tag.pro { background: var(--std-tlo); color: var(--std-tekst); }
.nowosc-link { display: inline-block; margin-top: 10px; font-weight: 600; }
.nowosci-pusto { color: var(--tekst-2); }
@media (max-width: 700px) { .nowosc-dzien { grid-template-columns: minmax(0, 1fr); } }