/*
 * Kroczki: style strony sprzedażowej kroczki.pl (strona główna, /dla-zlobkow/, /dla-przedszkoli/, podstrony prawne).
 * Kolory i krój z theme.json (zmienne --wp--preset--*); tu tylko aliasy, układ i komponenty. Tekst w rem.
 * Kierunek: biel, grafit i jeden kobalt; przyciski z promieniem 6 px; bez kremu, kursywy, pigułek i nadtytułów.
 */

:root {
	--bg: var(--wp--preset--color--base, #FFFFFF);
	--surface: var(--wp--preset--color--surface, #F1F2F4);
	--ink: var(--wp--preset--color--contrast, #15171C);
	--ink-2: var(--wp--preset--color--muted, #464A53);
	--ink-3: var(--wp--preset--color--subtle, #62666F);
	--line: var(--wp--preset--color--line, #DEE0E4);
	--line-2: var(--wp--preset--color--line-strong, #C5C8CE);
	--cobalt: var(--wp--preset--color--cobalt, #2445C6);
	--cobalt-dark: var(--wp--preset--color--cobalt-dark, #1B3599);
	--cobalt-tint: var(--wp--preset--color--cobalt-tint, #E9EDFB);
	--cobalt-light: var(--wp--preset--color--cobalt-light, #A9B9F7);
	--dark-text: #C3C7CE;
	--dark-line: #2E323B;
	--err: #B42318;
	--max: 75rem;
	--pad: 2rem;
	--r: 6px;
	--r-card: 10px;
	--head-h: 4.5rem;
}
html { font-synthesis: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); }
body { -webkit-font-smoothing: antialiased; background: var(--bg); }
.wp-site-blocks > * + * { margin-block-start: 0; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.dark :focus-visible, .foot :focus-visible { outline-color: #FFFFFF; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 0.75rem; top: -10rem; z-index: 90; padding: 0.75rem 1rem; border-radius: var(--r); background: var(--ink); color: #FFFFFF; font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.75rem; color: #FFFFFF; }

.o-home, .foot, .nav, .sheet { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.o-home *, .o-home *::before, .o-home *::after, .nav *, .foot *, .sheet * { box-sizing: border-box; }
.o-home h1, .o-home h2, .o-home h3 { margin: 0; color: inherit; font-weight: 700; text-wrap: balance; }
.o-home h2 { font-size: clamp(1.875rem, 1.25rem + 1.9vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; }
.o-home h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; }
:where(.o-home) :where(p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.o-home) :where(ul, ol) { padding: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sec { padding: 7rem 0; }
.sec.soft { background: var(--surface); }
.head { max-width: 46rem; margin-bottom: 3rem; }
.head p { margin-top: 1rem; font-size: 1.1875rem; color: var(--ink-2); }
.head a { color: var(--cobalt); text-underline-offset: 3px; }
.lead { font-size: 1.1875rem; color: var(--ink-2); }

/* Przyciski: promień 6 px, wysokość min. 44 px */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.25rem; padding: 0.75rem 1.5rem; border: 1.5px solid transparent; border-radius: var(--r); font: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.1s ease-out; }
.btn svg { flex: none; width: 1rem; height: 1rem; }
.btn-primary, .btn-primary:visited { background: var(--cobalt); border-color: var(--cobalt); color: #FFFFFF; }
@media (hover: hover) { .btn-primary:hover { background: var(--cobalt-dark); border-color: var(--cobalt-dark); color: #FFFFFF; } }
.btn-line, .btn-line:visited { background: #FFFFFF; border-color: var(--line-2); color: var(--ink); }
@media (hover: hover) { .btn-line:hover { border-color: var(--ink); color: var(--ink); } }
.btn-sm { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 1rem; }
.btn:active, .menu-btn:active, .close-btn:active { transform: scale(0.97); }

/* Nagłówek */
.o-header-wrap { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; }
.nav { background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { height: var(--head-h); display: flex; align-items: center; gap: 2.5rem; }
.brand, .brand:visited { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; color: var(--ink); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; white-space: nowrap; }
@media (hover: hover) { .brand:hover { color: var(--ink); } }
.brand svg { flex: none; width: 1.75rem; height: 1.75rem; color: var(--cobalt); }
.nav nav { margin-left: auto; }
.nav-links { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.nav-links a, .nav-links a:visited { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
@media (hover: hover) { .nav-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--cobalt); } }
.menu-btn, .close-btn { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: #FFFFFF; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: transform 0.1s ease-out; }
.menu-btn { display: none; align-items: center; gap: 0.5rem; margin-left: auto; }
.menu-btn svg { width: 1.125rem; height: 1.125rem; }
.sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 0.625rem 1.25rem 1.75rem; background: #FFFFFF; overflow-y: auto; opacity: 1; translate: 0; transition: opacity 0.2s ease-out, translate 0.2s ease-out, display 0.2s; transition-behavior: allow-discrete; }
@starting-style { .sheet { opacity: 0; translate: 0 -8px; } }
.sheet[hidden] { display: none; opacity: 0; translate: 0 -8px; }
.sheet-top { min-height: 3.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sheet ul { margin: 1rem 0 2rem; padding: 0; list-style: none; }
.sheet li a, .sheet li a:visited { display: flex; align-items: center; min-height: 3.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.25rem; font-weight: 600; text-decoration: none; }
.sheet .btn { width: 100%; margin-top: auto; }

/* Pierwszy ekran */
.hero { padding: 4.5rem 0 5.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: center; }
.crumb { margin-bottom: 1.25rem; font-size: 1rem; color: var(--ink-3); }
.crumb a { color: var(--ink-2); text-underline-offset: 3px; }
.o-home .hero h1 { font-size: clamp(2.25rem, 1.35rem + 3.1vw, 4rem); line-height: 1.03; letter-spacing: -0.04em; }
.o-sciezka .hero h1 { font-size: clamp(2.125rem, 1.35rem + 2.5vw, 3.375rem); line-height: 1.06; }
.hero .lead { margin-top: 1.5rem; max-width: 34em; font-size: 1.25rem; line-height: 1.55; }
.ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-note { margin-top: 1.25rem; font-size: 1rem; color: var(--ink-3); }

/* Zrzuty dem: przeglądarka i telefon */
.vis-stage { position: relative; padding-bottom: 2.25rem; }
.browser { margin-left: 15%; border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; background: #FFFFFF; box-shadow: 0 2rem 4rem -2rem rgba(21, 23, 28, 0.35); }
.b-bar { display: flex; align-items: center; gap: 0.35rem; height: 1.75rem; padding: 0 0.75rem; background: #F7F8F9; border-bottom: 1px solid var(--line); }
.b-bar i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #CDD0D5; }
.b-bar span { margin: 0 auto; transform: translateX(-0.75rem); display: flex; align-items: center; height: 1.15rem; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF; font-size: 0.75rem; line-height: 1; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.b-scr { aspect-ratio: 1440 / 900; overflow: hidden; }
.phone { position: absolute; left: 0; bottom: 0; width: 25%; padding: 0.4rem; border-radius: 1.4rem; background: var(--ink); box-shadow: 0 1.5rem 3rem -1rem rgba(21, 23, 28, 0.45); }
.p-scr { aspect-ratio: 390 / 844; overflow: hidden; border-radius: 1.05rem; background: #FFFFFF; }
.b-scr img, .p-scr img, .demo-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vis figcaption { margin-top: 0.75rem; padding-left: 15%; font-size: 0.9375rem; color: var(--ink-3); }

/* Plansza w kolorach wersji (zanim będą zrzuty dem) */
.plate { container-type: inline-size; width: 100%; aspect-ratio: 1440 / 900; display: flex; flex-direction: column; background: var(--pb); overflow: hidden; }
.plate-m { aspect-ratio: 390 / 844; }
.plate :where(i, span) { display: block; }
.pl-top { display: flex; align-items: center; gap: 2.2cqw; padding: 2.2cqw 4.5cqw; background: #FFFFFF; }
.pl-logo { width: 3.2cqw; height: 3.2cqw; border-radius: 0.6cqw; background: var(--pm); }
.pl-l { width: 7cqw; height: 1.1cqw; border-radius: 0.6cqw; background: #D3D6DB; }
.pl-l:nth-child(2) { margin-left: auto; }
.pl-btn { width: 9cqw; height: 3.2cqw; border-radius: 0.6cqw; background: var(--pm); }
.pl-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; flex: 1; padding: 5cqw 4.5cqw 3.5cqw; }
.pl-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; }
.pl-h { width: 92%; height: 3cqw; border-radius: 0.5cqw; background: var(--pa); }
.pl-h.pl-s { width: 62%; }
.pl-t { width: 86%; height: 1.2cqw; margin-top: 0.4cqw; border-radius: 0.5cqw; background: rgba(21, 23, 28, 0.16); }
.pl-t.pl-s { width: 70%; margin-top: 0; }
.pl-cta { width: 14cqw; height: 3.6cqw; margin-top: 1.4cqw; border-radius: 0.6cqw; background: var(--pm); }
.pl-img { position: relative; overflow: hidden; border-radius: 0.8cqw; background: var(--pa); }
.pl-img::after { content: ""; position: absolute; right: -12%; bottom: -24%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--pc); }
.pl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; padding: 0 4.5cqw 4cqw; }
.pl-cards i { height: 9cqw; border-radius: 0.8cqw; background: #FFFFFF; }
.plate-m .pl-top { gap: 3cqw; padding: 5cqw 6cqw; }
.plate-m .pl-logo { width: 9cqw; height: 9cqw; border-radius: 1.6cqw; }
.plate-m .pl-l { display: none; }
.plate-m .pl-btn { width: 16cqw; height: 9cqw; margin-left: auto; border-radius: 1.6cqw; background: transparent; box-shadow: inset 0 0 0 0.5cqw #C5C8CE; }
.plate-m .pl-hero { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 6cqw; padding: 9cqw 6cqw 6cqw; }
.plate-m .pl-copy { gap: 3.5cqw; }
.plate-m .pl-h { height: 7.5cqw; border-radius: 1.4cqw; }
.plate-m .pl-t { height: 3cqw; border-radius: 1cqw; }
.plate-m .pl-cta { width: 100%; height: 11cqw; margin-top: 3cqw; border-radius: 1.6cqw; }
.plate-m .pl-img { min-height: 30cqw; border-radius: 2cqw; }
.plate-m .pl-cards { grid-template-columns: 1fr 1fr; gap: 4cqw; padding: 0 6cqw 8cqw; }
.plate-m .pl-cards i { height: 22cqw; border-radius: 2cqw; }
.plate-m .pl-cards i:nth-child(3) { display: none; }

/* Wybór ścieżki */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.path, .path:visited { display: flex; flex-direction: column; gap: 1rem; padding: 2.25rem; border: 1px solid var(--line-2); border-radius: var(--r-card); background: #FFFFFF; color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
@media (hover: hover) { .path:hover { color: var(--ink); border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); } }
.o-home .path h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.path p { color: var(--ink-2); }
.path ul { list-style: none; }
.path li { display: flex; gap: 0.625rem; padding: 0.3rem 0; font-weight: 500; }
.path li svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; color: var(--cobalt); }
.path-more { display: block; margin-top: auto; padding-top: 0.5rem; color: var(--cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.path-more svg { display: inline-block; width: 1.25rem; height: 1.25rem; margin-left: 0.4rem; vertical-align: -0.2rem; transition: translate 0.15s ease-out; }
@media (hover: hover) { .path:hover .path-more svg { translate: 3px 0; } }

/* Dema */
.login-box { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 52rem; margin-bottom: 2.5rem; padding: 1rem 1.25rem; border-radius: var(--r); background: var(--cobalt-tint); color: var(--ink); font-size: 1.0625rem; }
.login-box svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; color: var(--cobalt); }
.soft .login-box { background: #FFFFFF; border: 1px solid var(--line-2); }
.demos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.demo { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card); background: #FFFFFF; }
.demo-shot { border-bottom: 1px solid var(--line); background: var(--surface); }
.demo-shot img { aspect-ratio: 1440 / 900; height: auto; }
.demo-body { flex: 1; display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem 1.75rem 2rem; }
.o-home .demo h3 { font-size: 1.625rem; letter-spacing: -0.03em; }
.demo-meta { margin-top: -0.5rem; font-size: 1rem; color: var(--ink-3); }
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; list-style: none; }
.swatches li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9375rem; color: var(--ink-2); }
.swatches i { flex: none; width: 1.125rem; height: 1.125rem; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(21, 23, 28, 0.14); }
.fit { font-size: 1.0625rem; }
.demo-desc { font-size: 1rem; color: var(--ink-2); }
.demo .btn { align-self: flex-start; margin-top: auto; }

/* Co jest w środku */
.mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; list-style: none; }
.mod { padding: 1.75rem 0 2.25rem; border-top: 1px solid var(--line-2); }
.ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r); background: var(--cobalt-tint); color: var(--cobalt); }
.ic svg { width: 1.5rem; height: 1.5rem; }
.soft .mod .ic { background: #FFFFFF; }
.mod .ic { margin-bottom: 1.25rem; }
.o-home .mod h3 { font-size: 1.1875rem; }
.mod p { margin-top: 0.5rem; font-size: 1rem; color: var(--ink-2); }
.tag { display: inline-block; margin-top: 0.875rem; padding: 0.15rem 0.5rem; border: 1px solid var(--line-2); border-radius: 4px; background: #FFFFFF; font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }

/* Układ dwukolumnowy */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
.split-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); align-items: start; }
.split .lead { margin-top: 1.25rem; max-width: 30em; }
.checks { margin-top: 2rem; list-style: none; }
.checks li { display: flex; gap: 0.875rem; padding: 1rem 0; border-top: 1px solid var(--line-2); font-size: 1.0625rem; color: var(--ink-2); }
.checks li:last-child { border-bottom: 1px solid var(--line-2); }
.checks b { color: var(--ink); }
.checks svg { flex: none; width: 1.375rem; height: 1.375rem; margin-top: 0.15rem; color: var(--cobalt); }
.aside { margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--cobalt); font-size: 1.0625rem; color: var(--ink-2); }

/* Panel klienta (ilustracja) */
.pnl { overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-card); background: #FFFFFF; box-shadow: 0 2rem 4rem -2.25rem rgba(21, 23, 28, 0.4); font-size: 0.9375rem; line-height: 1.4; }
.pnl-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.875rem 1.25rem; background: var(--ink); color: #FFFFFF; }
.pnl-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; white-space: nowrap; }
.pnl-brand svg { width: 1.25rem; height: 1.25rem; color: var(--cobalt-light); }
.pnl-who { color: var(--dark-text); white-space: nowrap; }
.pnl-tabs { display: flex; gap: 1.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; }
.pnl-tabs span { padding: 0.8rem 0; color: var(--ink-3); }
.pnl-tabs .on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--cobalt); }
.pnl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 0.6rem; }
.pnl-head b { font-size: 1.125rem; }
.pnl-new { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.25rem; padding: 0 0.8rem; border-radius: var(--r); background: var(--cobalt); color: #FFFFFF; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.pnl-new svg { width: 1rem; height: 1rem; }
.pnl-list { list-style: none; }
.pnl-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; border-top: 1px solid var(--line); }
.pnl-list li div { min-width: 0; }
.pnl-list b { display: block; font-weight: 600; }
.pnl-list li div span { font-size: 0.875rem; color: var(--ink-3); }
.st { flex: none; padding: 0.2rem 0.55rem; border: 1px solid var(--line-2); border-radius: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.st-ok { border-color: transparent; background: var(--cobalt-tint); color: var(--cobalt-dark); }
.st-teraz { border-color: var(--cobalt); background: var(--cobalt); color: #FFFFFF; }

/* Fakty: przepisy cytowane dosłownie */
.fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3.5rem; padding: 2.5rem 0; border-top: 1px solid var(--line-2); }
.o-home .fact-meta h3 { font-size: 1.375rem; }
.fact-meta dl { margin-top: 1.25rem; }
.fact-meta dl div { padding: 0.75rem 0; border-top: 1px solid var(--line-2); }
.fact-meta dt { font-size: 0.9375rem; font-weight: 600; }
.fact-meta dd { font-size: 1rem; color: var(--ink-2); }
.fact blockquote { padding-left: 1.5rem; border-left: 3px solid var(--cobalt); }
.fact blockquote p { font-size: 1.3125rem; font-weight: 500; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
.fact blockquote.small p { font-size: 1.0625rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.fact blockquote .pt { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); margin-top: 0.4rem; }
.fact-sub { margin-top: 1.75rem; margin-bottom: 0.5rem; font-weight: 600; }
.fact-more { margin-top: 1.5rem; border: 1px solid var(--line-2); border-radius: var(--r); background: #FFFFFF; }
.fact-more summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.fact-more summary::-webkit-details-marker { display: none; }
.fact-more summary svg { flex: none; width: 1.25rem; height: 1.25rem; transition: transform 0.2s ease-out; }
.fact-more[open] summary svg { transform: rotate(45deg); }
.fact-more blockquote { margin: 0 1rem 1rem; }
.src { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-3); }
.law, .law:visited { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; margin-top: 0.25rem; color: var(--cobalt); font-weight: 600; text-underline-offset: 3px; }
@media (hover: hover) { .law:hover { color: var(--cobalt-dark); } }
.law svg { flex: none; width: 1.125rem; height: 1.125rem; }
.checked { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line-2); font-size: 0.9375rem; color: var(--ink-3); }

/* Jak chronimy zdjęcia (ciemna sekcja) */
.sec.dark { background: var(--ink); color: #FFFFFF; }
.dark .head p { color: var(--dark-text); }
.guards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2.5rem; list-style: none; }
.guards li { display: flex; gap: 1rem; }
.guards .ic { flex: none; background: rgba(169, 185, 247, 0.12); color: var(--cobalt-light); }
.o-home .guards h3 { font-size: 1.1875rem; color: #FFFFFF; }
.guards p { margin-top: 0.4rem; font-size: 1rem; color: var(--dark-text); }
.guards .honest { padding: 1.25rem 1.5rem; border: 1px solid #444852; border-radius: var(--r-card); }

/* Cennik */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.plan { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line-2); border-radius: var(--r-card); background: #FFFFFF; }
.plan.pick { padding: calc(2rem - 1px); border: 2px solid var(--cobalt); }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.o-home .plan h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.badge { padding: 0.2rem 0.55rem; border-radius: 4px; background: var(--cobalt); color: #FFFFFF; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; }
.for { margin-top: 0.625rem; min-height: 4.8em; font-size: 1rem; color: var(--ink-2); }
.price { margin-top: 1.5rem; }
.net { font-size: 1rem; color: var(--ink-2); }
.net b { margin-right: 0.25rem; font-size: 2.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: var(--ink); white-space: nowrap; }
.gross { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-3); }
.care { min-height: 6em; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 1rem; color: var(--ink-2); }
.care b { color: var(--ink); }
.plan .btn { width: 100%; margin-top: 1.25rem; }
.plan ul { margin-top: 1.5rem; list-style: none; }
.plan li { display: flex; gap: 0.625rem; padding: 0.35rem 0; font-size: 1rem; line-height: 1.45; }
.plan li svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--cobalt); }
.plan li.plus { font-weight: 600; }
.plan-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-3); }
.below { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; margin-top: 2.5rem; }
.below p { font-size: 1rem; color: var(--ink-2); }
.below b { color: var(--ink); }

/* Wdrożenie: zwykła lista kroków */
.split-top .head { margin-bottom: 0; }
.steps { list-style: none; counter-reset: krok; border-bottom: 1px solid var(--line-2); }
.steps li { counter-increment: krok; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; padding: 1.25rem 0; border-top: 1px solid var(--line-2); }
.steps li::before { content: counter(krok) "."; grid-row: span 2; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; color: var(--ink-3); }
.o-home .steps h3 { font-size: 1.1875rem; }
.steps p { margin-top: 0.25rem; font-size: 1.0625rem; color: var(--ink-2); }

/* Pytania */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; padding: 1rem 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 1.375rem; height: 1.375rem; color: var(--ink-2); transition: transform 0.25s ease-out; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details, .fact-more { interpolate-size: allow-keywords; }
.faq details::details-content, .fact-more::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.25s ease-out, opacity 0.25s ease-out, content-visibility 0.25s; transition-behavior: allow-discrete; }
.faq details[open]::details-content, .fact-more[open]::details-content { block-size: auto; opacity: 1; }
.faq details p { padding: 0 3rem 1.5rem 0; font-size: 1.0625rem; color: var(--ink-2); }
.faq a { color: var(--cobalt); text-underline-offset: 3px; }

/* Kontakt */
.cinfo { margin-top: 2.5rem; }
.cinfo div { padding: 0.875rem 0; border-top: 1px solid var(--line-2); }
.cinfo dt { font-size: 0.9375rem; color: var(--ink-3); }
.cinfo dd { font-size: 1.125rem; font-weight: 500; }
.cinfo a { color: var(--ink); text-underline-offset: 3px; }
.cinfo-os { font-size: 0.9375rem; font-weight: 400; color: var(--ink-3); }
.form { padding: 2rem; border: 1px solid var(--line-2); border-radius: var(--r-card); background: #FFFFFF; color: var(--ink); }
.o-home .form h3 { font-size: 1.5rem; }
.form-ok p { margin-top: 0.75rem; color: var(--ink-2); }
.form-ok a, .consent a { color: var(--cobalt); text-underline-offset: 3px; }
.form-err { margin-bottom: 1.25rem; padding: 0.875rem 1rem; border-radius: var(--r); background: #FDECEA; color: #8A1C12; font-size: 1rem; }
.field { margin-bottom: 1.125rem; }
.field label { display: block; margin-bottom: 0.4rem; font-size: 1rem; font-weight: 600; }
.field label small { font-size: 0.9375rem; font-weight: 400; color: var(--ink-3); }
.field input, .field textarea, .field select { width: 100%; min-height: 3.25rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: var(--r); background: #FFFFFF; font: inherit; font-size: 1.0625rem; color: var(--ink); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2315171C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem; cursor: pointer; }
.field textarea { height: 7.5rem; padding: 0.875rem 1rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--cobalt); outline-offset: 0; border-color: var(--cobalt); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.consent { display: flex; gap: 0.75rem; margin: 0.25rem 0 1.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.consent input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--cobalt); }
.form .btn { width: 100%; }
.field .err { display: none; margin: 0.4rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--err); }
.field input:user-invalid, .field input[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.field input:user-invalid + .err, .field input[aria-invalid="true"] + .err { display: block; }
.consent-err { display: none; margin: -0.75rem 0 1rem; font-size: 0.9375rem; font-weight: 500; color: var(--err); }
.consent:has(input:user-invalid) + .consent-err, .consent:has(input[aria-invalid="true"]) + .consent-err { display: block; }
.consent:has(input:user-invalid), .consent:has(input[aria-invalid="true"]) { color: var(--err); }
.form .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.form .after { margin-top: 0.875rem; text-align: center; font-size: 0.9375rem; color: var(--ink-3); }
.hp { position: absolute; left: -9999px; }

/* Stopka */
.foot { padding: 4.5rem 0 2.5rem; background: var(--ink); color: var(--dark-text); font-size: 1rem; }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
.foot .brand, .foot .brand:visited { color: #FFFFFF; }
@media (hover: hover) { .foot .brand:hover { color: #FFFFFF; } }
.foot .brand svg { color: var(--cobalt-light); }
.foot-brand p { max-width: 24em; margin: 0.5rem 0 0; }
.foot nav { display: flex; flex-direction: column; align-items: flex-start; }
.foot nav a, .foot nav a:visited, .foot .legal a, .foot .legal a:visited { display: inline-flex; align-items: center; min-height: 2.75rem; color: #E1E3E7; text-decoration: none; }
@media (hover: hover) { .foot nav a:hover, .foot .legal a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; } }
.foot .legal { grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--dark-line); font-size: 0.9375rem; }
.foot .legal a { min-height: 0; }

/* Podstrony prawne i 404 */
.o-main--page { padding-top: 4.5rem; padding-bottom: 7rem; }
.o-main--page h1 { margin: 0 0 2rem; font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; }
.o-main--page h2 { margin-top: 2.2em; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; }
.o-main--page p, .o-main--page li { color: var(--ink-2); overflow-wrap: anywhere; }
.o-main--page a { color: var(--cobalt); text-underline-offset: 3px; }
/* Krój ma domyślnie cyfry tabelaryczne: w numeracji list „1.” wyglądało jak „1 .”. */
.o-main--page li::marker, .steps li::before, .net b { font-variant-numeric: proportional-nums; }
.o-main--page .reg-robocza { margin-bottom: 2.5rem; padding: 1rem 1.25rem; border: 2px solid var(--cobalt); border-radius: var(--r); background: var(--cobalt-tint); }
.o-main--page .reg-robocza p { margin: 0; color: var(--ink); }
.o-main--page .reg-wersja > p:first-child { font-weight: 600; color: var(--ink); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.nav-links { gap: 1.25rem; }
	.mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.guards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.plans { grid-template-columns: minmax(0, 1fr); max-width: 38rem; }
	.for, .care { min-height: 0; }
	.hero-grid { gap: 3rem; }
}
@media (max-width: 960px) {
	.nav nav, .nav-cta { display: none; }
	.menu-btn { display: inline-flex; }
	.hero-grid, .split, .split-top, .fact { grid-template-columns: minmax(0, 1fr); }
	.hero-grid { gap: 3.5rem; }
	.vis { max-width: 44rem; }
	.split { gap: 3.5rem; }
	.split-top .head { margin-bottom: 0.5rem; }
	.fact { gap: 1.75rem; }
	.foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.foot-brand { grid-column: 1 / -1; }
}

/* ---------- Telefon ---------- */
@media (max-width: 760px) {
	:root { --pad: 1.25rem; --head-h: 3.875rem; }
	.o-home, .foot, .nav, .sheet { font-size: 1.0625rem; }
	.sec { padding: 4.5rem 0; }
	.head { margin-bottom: 2rem; }
	.head p, .lead { font-size: 1.0938rem; }
	.o-home h3 { font-size: 1.1875rem; }
	.nav .wrap { gap: 0.75rem; }
	.brand { font-size: 1.25rem; }
	.brand svg { width: 1.5rem; height: 1.5rem; }
	.hero { padding: 2.5rem 0 3.5rem; }
	.hero .lead { margin-top: 1.25rem; font-size: 1.125rem; }
	.ctas { flex-direction: column; margin-top: 1.75rem; }
	.ctas .btn { width: 100%; }
	.browser { margin-left: 13%; }
	.phone { width: 27%; padding: 0.25rem; border-radius: 0.9rem; }
	.p-scr { border-radius: 0.7rem; }
	.vis figcaption { padding-left: 0; }
	.paths, .demos, .mods, .guards, .below, .two { grid-template-columns: minmax(0, 1fr); }
	.path { padding: 1.5rem; }
	.o-home .path h3 { font-size: 1.3125rem; }
	.demos { gap: 1.5rem; }
	.demo-body { padding: 1.5rem 1.25rem 1.5rem; }
	.mod { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 0 1.5rem; }
	.mod .ic { grid-row: span 3; margin: 0; }
	.mod .tag { justify-self: start; }
	.guards { gap: 2rem; }
	.pnl-tabs span:nth-child(4) { display: none; }
	.pnl-list li { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
	.fact { padding: 2rem 0; }
	.fact blockquote { padding-left: 1rem; }
	.fact blockquote p { font-size: 1.1875rem; }
	.plan, .plan.pick { padding: 1.5rem 1.25rem; }
	.plan.pick { padding: calc(1.5rem - 1px) calc(1.25rem - 1px); }
	.net b { font-size: 2.375rem; }
	.faq summary { font-size: 1.0625rem; }
	.faq details p { padding-right: 0; font-size: 1rem; }
	.form { padding: 1.5rem 1.25rem; }
	.foot { padding: 3.5rem 0 2rem; }
	.foot .wrap { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.o-main--page { padding-top: 2.5rem; padding-bottom: 4.5rem; }
}
/* Telefon z większą czcionką w przeglądarce: długie napisy się zawijają, zamiast poszerzać stronę. */
@media (max-width: 760px) {
	.btn { white-space: normal; }
	.brand { min-width: 0; }
	.o-home h1, .o-home h2, .o-home h3, .cinfo dd { overflow-wrap: break-word; }
	.net b { white-space: normal; }
}
@media (max-width: 399px) {
	:root { --pad: 1rem; }
	.menu-btn { padding: 0 0.75rem; }
	.path, .plan, .plan.pick, .form { padding-left: 1rem; padding-right: 1rem; }
	.plan.pick { padding-left: calc(1rem - 1px); padding-right: calc(1rem - 1px); }
	.login-box { padding: 0.875rem 1rem; }
	.pnl-top, .pnl-head, .pnl-list li { padding-left: 1rem; padding-right: 1rem; }
	.pnl-tabs { padding: 0 1rem; gap: 1rem; }
	.pnl-tabs span:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Bez przesunięć, obrotów i zmian wysokości: zostają krótkie przenikania i zmiany koloru. */
	*, *::before, *::after, .faq details::details-content, .fact-more::details-content { transition-property: opacity, color, background-color, border-color, display, content-visibility !important; transition-duration: 0.15s !important; }
	.sheet, .sheet[hidden] { translate: none; }
	@starting-style { .sheet { translate: none; } }
	html { scroll-behavior: auto; }
}
@media (prefers-reduced-transparency: reduce) {
	.nav { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
	:root { --line: #8A9099; --line-2: #6B7079; --ink-2: #252A31; --ink-3: #3F4550; --dark-text: #E6E8EB; }
	.nav { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--line); }
}

/* ==========================================================================
   Kolorowe akcenty (decyzja usera 6.10.2026): strona dla żłobków i przedszkoli ma być
   pogodna jak dema, ale czytelna dla dyrektorów. Kobalt zostaje kolorem marki,
   dochodzą słońce, koral, mięta i lawenda; fale między sekcjami jak w demach.
   ========================================================================== */
:root { --sun: #FFC83D; --coral: #FF7A59; --mint: #2EC4A6; --lilac: #9B6BFF; --sun-t: #FFF4CC; --coral-t: #FFE7E0; --mint-t: #DDF6F0; --lilac-t: #EFE7FF; --wave: url("../img/fala.svg"); --r: 10px; --r-card: 18px; }
.sec, .hero { position: relative; }
.sec.soft { background: var(--mint-t); }
#dema.soft, #cennik.soft { background: var(--sun-t); }
#panel.soft, #pytania.soft { background: var(--lilac-t); }
#fakty.soft, #kontakt.soft { background: var(--coral-t); }
.sec.soft::before, .sec.dark::before { content: ""; position: absolute; left: 0; right: 0; top: -33px; height: 34px; background: inherit; -webkit-mask: var(--wave) center bottom / 100% 100% no-repeat; mask: var(--wave) center bottom / 100% 100% no-repeat; pointer-events: none; }
.btn { border-radius: var(--r); font-weight: 700; }
.btn-primary { box-shadow: 0 4px 0 #142f8f; }
@media (hover: hover) { .btn-primary:hover { transform: translateY(-1px); } }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #142f8f; }

/* Hero: słońce, chmurka i kolorowa plama za zrzutami dem */
.hero { overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 7rem; height: 7rem; right: 4%; top: 1.5rem; background: var(--sun); -webkit-mask: url("../img/slonce.svg") no-repeat center / contain; mask: url("../img/slonce.svg") no-repeat center / contain; pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 2.75rem; height: 2.75rem; left: 46%; bottom: 3rem; background: var(--coral); -webkit-mask: url("../img/gwiazdka.svg") no-repeat center / contain; mask: url("../img/gwiazdka.svg") no-repeat center / contain; pointer-events: none; }
.vis-stage { position: relative; }
.vis-stage::before { content: ""; position: absolute; inset: 2% -4% 20% 12%; background: var(--sun-t); border-radius: 58% 42% 55% 45% / 46% 52% 48% 54%; z-index: 0; }
.vis-stage > * { position: relative; z-index: 1; }
@media (max-width: 760px) { .hero::before { width: 4rem; height: 4rem; } .hero::after { display: none; } }

/* Ikony modułów w kolorach */
.mods .mod:nth-child(5n+1) .ic { background: var(--sun-t); color: #8a5a00; }
.mods .mod:nth-child(5n+2) .ic { background: var(--mint-t); color: #11806b; }
.mods .mod:nth-child(5n+3) .ic { background: var(--coral-t); color: #c2410c; }
.mods .mod:nth-child(5n+4) .ic { background: var(--lilac-t); color: #6d35d9; }
.mods .mod:nth-child(5n+5) .ic { background: var(--cobalt-tint); color: var(--cobalt); }
.ic { border-radius: 50%; }
.soft .mod .ic { box-shadow: 0 0 0 4px #fff; }

/* ==========================================================================
   Poprawki z audytu Apple Design (docs/audyt-apple-design-2026-10-06.md)
   ========================================================================== */

/* Zwijane listy: na komputerze zawsze otwarte i bez przycisku; na telefonie oferta.js zamyka je na start. */
.mods-more > summary, .plan-more > summary { display: none; }
.mods-more > summary::-webkit-details-marker, .plan-more > summary::-webkit-details-marker { display: none; }
.mods--rest .mod:nth-child(1) .ic { background: var(--cobalt-tint); color: var(--cobalt); }
.mods--rest .mod:nth-child(2) .ic { background: var(--sun-t); color: #8a5a00; }
.mods--rest .mod:nth-child(3) .ic { background: var(--mint-t); color: #11806b; }
.mods--rest .mod:nth-child(4) .ic { background: var(--coral-t); color: #c2410c; }
.swipe-hint { display: none; }
.when-open { display: none; }
details[open] > summary .when-open { display: inline; }
details[open] > summary .when-closed { display: none; }

/* Reakcja przy naciśnięciu także na kartach, w menu i w pytaniach. */
.path, .nav-links a, .sheet li a, .faq summary, .fact-more summary, .law, .mods-more > summary, .plan-more > summary { -webkit-tap-highlight-color: transparent; }
.path { transition: transform 0.1s ease-out, border-color 0.15s, box-shadow 0.15s; }
.path:active { transform: scale(0.98); }
.sheet li a:active, .nav-links a:active { color: var(--cobalt); }
.faq summary:active, .fact-more summary:active, .plan-more > summary:active, .law:active { opacity: 0.7; }

/* Telefon: krótsza strona. Dema w poziomym pasku przewijanym palcem (scroll-snap: natywny pęd i dobicie
   do karty), reszta modułów i listy w pakietach zwinięte, mniejsze odstępy między sekcjami. */
@media (max-width: 760px) {
	.sec { padding: 3.5rem 0; }
	.swipe-hint { display: block; margin: -0.5rem 0 1rem; font-size: 0.9375rem; color: var(--ink-3); }
	/* position: relative, bo ukryte teksty .sr (position: absolute) w kartach inaczej wychodzą poza pasek i poszerzają stronę. */
	.demos { position: relative; display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin-inline: calc(var(--pad) * -1); padding: 0.25rem var(--pad) 0.75rem; scrollbar-width: none; }
	.demos::-webkit-scrollbar { display: none; }
	.demo { flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always; }
	.mods-more > summary, .plan-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; cursor: pointer; list-style: none; font-weight: 600; }
	.mods-more > summary { margin-top: 0.5rem; padding: 0 1.25rem; border: 1.5px solid var(--line-2); border-radius: var(--r); background: #FFFFFF; }
	.mods-more[open] > summary { margin-bottom: 0.5rem; }
	.plan-more { margin-top: 1rem; border-top: 1px solid var(--line); }
	.plan-more > summary { padding: 0.5rem 0; }
	.plan-more ul { margin-top: 0.25rem; }
	.mods-more > summary svg, .plan-more > summary svg { flex: none; width: 1.25rem; height: 1.25rem; transition: transform 0.2s ease-out; }
	.mods-more[open] > summary svg, .plan-more[open] > summary svg { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
	.path:active { transform: none; }
}
.mods-more, .plan-more { interpolate-size: allow-keywords; }
.mods-more::details-content, .plan-more::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 0.25s ease-out, opacity 0.25s ease-out, content-visibility 0.25s; transition-behavior: allow-discrete; }
.mods-more[open]::details-content, .plan-more[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.mods-more::details-content, .plan-more::details-content { transition-property: opacity, content-visibility; transition-duration: 0.15s; }
}