/*
 * ZAJMIJ.TO – styles of the theme. Direction "Grafik obiektu" (redesign 20.10.2026, chosen by the
 * PO; DESIGN.md): the site reads like the day schedule of a municipality. Hour rules as the
 * structure, facilities in columns, bookings as blocks. Colours of the brand (PO 20.10.2026: as the
 * app and the former zajmij.to): white and #f5f5f7 grounds, the platform blue for bookings and
 * links, the blue-to-violet gradient of the brand on the main buttons, the closing band and the
 * word mark, activities in violet and events in orange as the categories of the app, the line "now"
 * in red as a calendar. One self-hosted face, ZT Sans (a renamed subset of Mona Sans, OFL), wide in
 * headings, condensed in the labels of the schedule.
 *
 * §01 Tokens             §09 Audiences            §17 Pages and posts
 * §02 Reset and base     §10 Pricing, compare     §18 Table of contents, author
 * §03 Typography         §11 Discovery, gallery   §19 Lists of posts
 * §04 Layout             §12 Security, figures    §20 Blocks in content
 * §05 Buttons and links  §13 FAQ, CTA             §21 Footer
 * §06 Header, navigation §14 Contact, forms       §22 Responsive
 * §07 Hero, schedule     §15 Enquiry page         §23 Motion
 * §08 Features, steps    §16 CTA band             §24 Print
 *
 * html.dark flips the tokens (same localStorage key "zajmijto-theme" and the three states light,
 * dark and system as the app, inc/enqueue.php and the switch in the header). Ink and accent can
 * be changed in Customize (inline on <body>, light mode only).
 */

/* §01 Tokens --------------------------------------------------------------- */

:root {
	/* Grounds of the app and the former site: white, the grouped grey of the bands. */
	--zt-paper: #fff;
	--zt-sheet: #fff;
	--zt-tint: #f5f5f7;
	--zt-raised: #e8e8ed;
	/* Text (ink 16.8:1 on white, soft 11.0:1, muted 6.65:1 on white and 6.10:1 on the tint). */
	--zt-ink: #1d1d1f;
	--zt-ink-soft: #3a3a3f;
	--zt-muted: #5c5c61;
	/* Accent as text: --color-accent-strong of the app (5.80:1 on white, 5.36:1 on the tint). */
	--zt-accent: #0062cc;
	--zt-accent-strong: #004a99;
	/* Gradient of the brand, one step deeper than #007aff → #af52de of the former site, so white
	   text holds on both ends (6.40:1 and 6.54:1): --hero-grad-from / --hero-grad-via of the app. */
	--zt-grad-from: #005cbf;
	--zt-grad-to: #833ea7;
	--zt-cta: linear-gradient(135deg, var(--zt-grad-from), var(--zt-grad-to));
	--zt-cta-hover: linear-gradient(135deg, #004a99, #6c2f8c);
	--zt-accent-wash: #e8f2ff;
	--zt-accent-line: #a8cbff;
	--zt-accent-wash-text: #0050a8;
	/* Blocks of the schedule: bookings in the platform blue, activities in violet, events in
	   orange (the colours of the categories in the app), white text on blue and violet, ink on
	   orange (5.06:1). The line "now" in calendar red, its label white on the deep red (5.6:1). */
	--zt-booking: #005cbf;
	--zt-class: #833ea7;
	--zt-event: #ea580c;
	--zt-event-text: #1d1d1f;
	--zt-now: #ff3b30;
	--zt-now-strong: #d70015;
	/* States of the blocks of the hero schedule, the colours of ScheduleCalendar in the panel:
	   confirmed green, unconfirmed yellow, waiting reservation orange, block red, activity blue.
	   They colour only the left edge and a faint ground; the text stays ink. */
	--zt-res-confirmed: #34c759;
	--zt-res-pending: #ffcc00;
	--zt-res-waiting: #d97706;
	--zt-res-block: #ff3b30;
	--zt-res-session: #007aff;
	--zt-slot-mix: 13%;
	/* The brand gradient of the word mark, as the logo of the former site. */
	--zt-logo: linear-gradient(135deg, #007aff, #af52de);
	/* Rules of the schedule (the separators of the app), the 3:1 border of form fields. */
	--zt-grid: #f0f0f3;
	--zt-line: #e5e5ea;
	--zt-line-strong: #d1d1d6;
	--zt-field-line: #8e8e93;
	/* Night: footer, the slate of the app footer (text 9.85:1, links 8.11:1). */
	--zt-night: #0f172a;
	--zt-night-2: #1e293b;
	--zt-night-line: #334155;
	--zt-night-text: #cbd5e1;
	--zt-night-link: #93c5fd;
	--zt-error: #d60b00;
	--zt-error-wash: #fdecea;
	--zt-success: #207936;
	--zt-success-wash: #e7f5ec;
	--zt-white: #fff;
	/* Depth: offset and a soft blur. */
	--zt-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%), 0 2px 6px rgb(0 0 0 / 5%);
	--zt-shadow-md: 0 2px 4px rgb(0 0 0 / 5%), 0 10px 24px -6px rgb(0 0 0 / 12%);
	--zt-shadow-lg: 0 2px 4px rgb(0 0 0 / 4%), 0 24px 48px -16px rgb(0 0 0 / 20%);
	/* Check mark of the lists, drawn like the Lucide icons; coloured by background-color. */
	--zt-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--zt-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--zt-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--zt-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
	--zt-company: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M9 7h.01M15 7h.01M9 11h.01M15 11h.01M9 15h.01M15 15h.01M10 21v-3h4v3'/%3E%3C/svg%3E");
	--zt-font: "ZT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	--zt-font-heading: var(--zt-font);
	/* Widths of the variable face: headings wide, labels of the schedule condensed. */
	--zt-wide: 112%;
	--zt-narrow: 88%;
	--zt-radius: 8px;
	--zt-radius-lg: 14px;
	--zt-radius-sm: 6px;
	--zt-space: 112px;
	--zt-shell: 1240px;
	--zt-gutter: 48px;
	--zt-header: 72px;
}

/* Dark mode of the app (html.dark): composed for the dark grounds, not inverted. On <body> too,
   so it wins over the Customize colours printed inline on <body>. */
html.dark,
html.dark body {
	--zt-paper: #1e1e22;
	--zt-sheet: #26262b;
	--zt-tint: #28282e;
	--zt-raised: #35353d;
	--zt-ink: #f5f5f7;
	--zt-ink-soft: #e0e0e5;
	--zt-muted: #a5a5aa;
	--zt-accent: #409eff;
	--zt-accent-strong: #64b1ff;
	--zt-cta: linear-gradient(135deg, var(--zt-grad-from), var(--zt-grad-to));
	--zt-cta-hover: linear-gradient(135deg, #0062cc, #8f45b6);
	--zt-accent-wash: #1d2b3d;
	--zt-accent-line: #2c5f9c;
	--zt-accent-wash-text: #9ccbff;
	--zt-booking: #005cbf;
	--zt-class: #833ea7;
	--zt-event: #f0803c;
	--zt-event-text: #1d1d1f;
	--zt-now: #ff453a;
	--zt-now-strong: #d70015;
	--zt-res-confirmed: #30d158;
	--zt-res-pending: #ffd60a;
	--zt-res-waiting: #f59e0b;
	--zt-res-block: #ff453a;
	--zt-res-session: #0a84ff;
	--zt-slot-mix: 22%;
	--zt-grid: #2c2c32;
	--zt-line: #38383e;
	--zt-line-strong: #45454d;
	--zt-field-line: #8e8e93;
	--zt-night: #111114;
	--zt-night-2: #1e1e22;
	--zt-night-line: #38383e;
	--zt-error: #ff5e54;
	--zt-error-wash: #3a1f1e;
	--zt-success: #2ad544;
	--zt-success-wash: #1b3122;
	--zt-shadow-sm: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 6px rgb(0 0 0 / 25%);
	--zt-shadow-md: 0 2px 4px rgb(0 0 0 / 30%), 0 10px 24px -6px rgb(0 0 0 / 45%);
	--zt-shadow-lg: 0 2px 4px rgb(0 0 0 / 30%), 0 24px 48px -16px rgb(0 0 0 / 60%);
	--wp--preset--color--paper: #1e1e22;
	--wp--preset--color--tint: #28282e;
	--wp--preset--color--ink: #f5f5f7;
	--wp--preset--color--muted: #a5a5aa;
	--wp--preset--color--accent: #409eff;
	--wp--preset--color--line: #38383e;
}

html.dark {
	color-scheme: dark;
}

/* §02 Reset and base ------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--zt-header) + 1.5rem);
	scrollbar-color: var(--zt-line-strong) var(--zt-paper);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--zt-paper);
	color: var(--zt-ink);
	font-family: var(--zt-font);
	font-size: 1.0625rem;
	font-stretch: 100%;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
}

::selection {
	background: var(--zt-accent-wash);
	color: var(--zt-accent-wash-text);
}

input,
textarea {
	caret-color: var(--zt-accent);
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
}

button,
a,
input,
textarea,
select,
summary {
	touch-action: manipulation;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 3px solid var(--zt-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

.site-footer :focus-visible {
	outline-color: var(--zt-night-link);
}

.cta-section :focus-visible {
	outline-color: var(--zt-white);
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: var(--zt-sheet);
	color: var(--zt-ink);
	border-radius: var(--zt-radius);
	box-shadow: var(--zt-shadow-md);
}

.zt-icon {
	flex-shrink: 0;
}

.price-value {
	font-variant-numeric: tabular-nums;
}

/* §03 Typography ----------------------------------------------------------- */

h1,
h2,
h3,
p,
figure,
dl,
dd {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--zt-font-heading);
	color: var(--zt-ink);
}

h1,
h2 {
	font-stretch: var(--zt-wide);
	font-weight: 720;
	letter-spacing: -0.025em;
	line-height: 1.06;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.4rem, 4.6vw, 3.9rem);
}

h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

h3 {
	font-size: 1.1875rem;
	font-stretch: 104%;
	font-weight: 680;
	line-height: 1.3;
	letter-spacing: -0.012em;
	text-wrap: balance;
}

p {
	max-width: 70ch;
	text-wrap: pretty;
}

p + p {
	margin-top: 1rem;
}

.lead {
	color: var(--zt-ink-soft);
	font-size: clamp(1.125rem, 1.6vw, 1.3rem);
	line-height: 1.55;
}

.small {
	font-size: 0.875rem;
}

.tag {
	display: inline-block;
	margin-bottom: 0.75rem;
	padding: 0.1rem 0.55rem;
	border-radius: var(--zt-radius-sm);
	background: var(--zt-accent-wash);
	color: var(--zt-accent-wash-text);
	font-size: 0.78rem;
	font-stretch: var(--zt-narrow);
	font-weight: 650;
}

/* §04 Layout --------------------------------------------------------------- */

.shell {
	width: min(var(--zt-shell), calc(100% - var(--zt-gutter)));
	margin-inline: auto;
}

.section {
	padding-block: var(--zt-space);
}

.section-tight {
	padding-block: 1rem var(--zt-space);
}

.tint {
	background: var(--zt-tint);
}

/* Sections on the paper are divided by an hour rule of the width of the shell, as the rows of
   the schedule (a section that is the shell itself draws it across its own width). */
.front-main > .section:not(.tint, .pricing, .gallery, .cta-section) + .section:not(.tint, .pricing, .gallery, .cta-section) {
	background-image: linear-gradient(var(--zt-line), var(--zt-line));
	background-position: center top;
	background-repeat: no-repeat;
	background-size: min(var(--zt-shell), calc(100% - var(--zt-gutter))) 1px;
}

.front-main > .section.shell:not(.tint, .pricing, .gallery, .cta-section) + .section.shell {
	background-size: 100% 1px;
}

/* Heading of a section: H2 on the left, its lead on the right, both on one baseline. */
.section-heading {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 1.25rem 4rem;
	align-items: end;
	margin-bottom: 3.5rem;
}

.section-heading h2 {
	max-width: 20ch;
}

.section-heading > p {
	max-width: 46ch;
	color: var(--zt-muted);
}

.section-heading > .text-link {
	grid-column: 2;
	justify-self: start;
}

.section-heading:not(:has(> p, > .text-link)) {
	grid-template-columns: 1fr;
}

.section-more {
	display: flex;
	max-width: none;
	margin-top: 2.5rem;
}

/* §05 Buttons and links ---------------------------------------------------- */

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

.button,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 46px;
	padding: 0.7rem 1.2rem;
	border: 1px solid transparent;
	border-radius: var(--zt-radius);
	background: var(--zt-cta);
	color: var(--zt-white);
	font-size: 0.97rem;
	font-weight: 650;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 1px 2px rgb(0 0 0 / 18%);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--zt-cta-hover);
	color: var(--zt-white);
}

.button:active {
	transform: translateY(1px);
}

.button-small {
	min-height: 40px;
	padding: 0.5rem 0.95rem;
	font-size: 0.9rem;
}

.button-large {
	min-height: 52px;
	padding-inline: 1.5rem;
	font-size: 1rem;
}

/* Secondary button: a sheet with a 3:1 border (WCAG 1.4.11), ink on hover. */
.button-outline {
	border-color: var(--zt-field-line);
	background: var(--zt-sheet);
	color: var(--zt-ink);
	box-shadow: none;
}

.button-outline:hover {
	border-color: var(--zt-ink);
	background: var(--zt-sheet);
	color: var(--zt-ink);
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--zt-accent);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
}

.text-link:hover {
	text-decoration-color: currentcolor;
}

.zt-arrow {
	width: 1.05em;
	height: 1.05em;
}

.button .zt-arrow {
	margin-right: -0.2rem;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

/* §06 Header, navigation --------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--zt-paper);
	border-bottom: 1px solid var(--zt-line);
}

.admin-bar .site-header {
	top: 32px;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--zt-header);
}

/* Word mark of the brand, as the logo of the former site: the name of the site, extra bold, in the
   blue-to-violet gradient of the brand (large text: 3.9:1 at the blue end on white). */
.brand-link,
.footer-brand {
	display: inline-flex;
	align-items: center;
	color: var(--zt-accent);
	text-decoration: none;
}

.brand-name {
	background: var(--zt-logo);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

@media (forced-colors: active) {
	.brand-name {
		background: none;
		color: LinkText;
	}
}

.custom-logo {
	width: auto;
	max-width: 210px;
	max-height: 48px;
}

.primary-navigation {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.menu {
	display: flex;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: var(--zt-radius-sm);
	color: var(--zt-ink-soft);
	font-size: 0.93rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.menu a:hover {
	background: var(--zt-tint);
	color: var(--zt-ink);
}

.menu .current-menu-item > a {
	background: var(--zt-accent-wash);
	color: var(--zt-accent-wash-text);
}

.menu-item-has-children {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.submenu-toggle {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--zt-radius-sm);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.submenu-toggle:hover {
	background: var(--zt-tint);
}

.submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: none;
	min-width: 260px;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--zt-sheet);
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	box-shadow: var(--zt-shadow-lg);
}

/* Without JavaScript the submenu opens on hover and focus. */
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
	display: block;
}

[data-zt-enhanced] .menu-item-has-children:not(.is-open):hover > .sub-menu {
	display: block;
}

[data-zt-enhanced] .menu-item-has-children:not(.is-open):focus-within > .sub-menu {
	display: none;
}

.menu-toggle {
	display: none;
	align-items: center;
	gap: 0.6rem;
	min-height: 40px;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	color: var(--zt-ink);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.menu-toggle:hover {
	background: var(--zt-tint);
}

/* Colour theme switch, three states as the app (RZ-192): light, dark, automatic. The pressed
   option is a raised sheet with an inner ring, also aria-pressed (not colour alone). */
.theme-switch {
	display: none;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius);
	background: var(--zt-tint);
}

.theme-switch:not([hidden]) {
	display: inline-flex;
}

.theme-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 32px;
	min-height: 32px;
	padding: 0.25rem 0.4rem;
	border: 0;
	border-radius: var(--zt-radius-sm);
	background: transparent;
	color: var(--zt-muted);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.theme-option:hover {
	color: var(--zt-ink);
}

.theme-option[aria-pressed="true"] {
	background: var(--zt-sheet);
	box-shadow: inset 0 0 0 1px var(--zt-line-strong), var(--zt-shadow-sm);
	color: var(--zt-ink);
}

.theme-option-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.breadcrumbs {
	margin-bottom: 1.5rem;
	color: var(--zt-muted);
	font-size: 0.875rem;
}

.breadcrumbs p {
	max-width: none;
}

/* §07 Hero, schedule ------------------------------------------------------- */

.hero {
	padding-block: 72px 0;
	border-bottom: 1px solid var(--zt-line);
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr);
	gap: 3.5rem;
	align-items: center;
}

.hero h1 {
	max-width: 15ch;
	font-size: clamp(2.4rem, 3.9vw, 3.4rem);
	font-weight: 750;
	line-height: 1.02;
	letter-spacing: -0.032em;
}

.hero .lead {
	max-width: 36ch;
	margin: 1.5rem 0 2rem;
}

.hero-price {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--zt-line-strong);
}

.hero-note {
	color: var(--zt-ink);
	font-size: 1.02rem;
	font-weight: 650;
	line-height: 1.45;
}

.price-history {
	max-width: 60ch;
	margin-top: 0.4rem;
	color: var(--zt-muted);
	font-size: 0.84rem;
	line-height: 1.55;
}

/* The schedule: the day view of ScheduleCalendar in the panel (redrawn 05.11.2026) – a toolbar,
   facilities in columns with a header tinted in their colour, half-hour rows and pale blocks with
   a coloured left edge. */
.planner {
	--row: 38px;
	--head: 48px;
	--times: 54px;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-lg);
}

/* Toolbar: the date between the arrows, the switch day / week / month and "Today". */
.planner-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding: 0.65rem 0.8rem;
	background: var(--zt-tint);
}

.planner-date {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-right: auto;
}

.planner-arrow {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--zt-line);
	border-radius: 7px;
	background: var(--zt-sheet);
}

.planner-arrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border: solid var(--zt-ink-soft);
	border-width: 0 0 2px 2px;
	translate: 1px 0;
	rotate: 45deg;
}

.planner-arrow.is-next::before {
	translate: -1px 0;
	rotate: -135deg;
}

.planner-title {
	font-size: 0.9rem;
	font-weight: 680;
}

.planner-title time {
	display: inline-block;
}

.planner-title time::first-letter {
	text-transform: uppercase;
}

.planner-views {
	display: inline-flex;
	overflow: hidden;
	border: 1px solid var(--zt-line);
	border-radius: 7px;
	background: var(--zt-sheet);
	font-size: 0.76rem;
	font-weight: 600;
}

.planner-views span {
	padding: 0.3rem 0.6rem;
	color: var(--zt-ink-soft);
}

.planner-views span + span {
	border-left: 1px solid var(--zt-line);
}

/* The active view and "Today" in the blue of the platform (white text 6.4:1). */
.planner-views .is-active,
.planner-today {
	background: var(--zt-booking);
	color: var(--zt-white);
}

.planner-today {
	padding: 0.3rem 0.7rem;
	border-radius: 7px;
	font-size: 0.76rem;
	font-weight: 650;
}

/* Second row: the interval and the opening hours, as badges of the panel. */
.planner-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 0.75rem;
	padding: 0.45rem 0.8rem;
	border-block: 1px solid var(--zt-line);
	background: var(--zt-tint);
	color: var(--zt-ink-soft);
	font-size: 0.72rem;
	font-weight: 600;
}

.planner-chip,
.planner-hours {
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--zt-line);
	border-radius: 999px;
	background: var(--zt-sheet);
}

.planner-chip::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.3rem;
	vertical-align: -0.12em;
	background-color: currentcolor;
	-webkit-mask: var(--zt-clock) center / contain no-repeat;
	mask: var(--zt-clock) center / contain no-repeat;
}

.planner-hours {
	color: var(--zt-muted);
}

.planner-scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-left: var(--times);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.planner-scroll:focus-visible {
	outline-offset: -3px;
}

.planner-grid {
	position: relative;
	display: grid;
	grid-template-columns: var(--times) repeat(3, minmax(172px, 1fr));
	min-width: calc(var(--times) + 3 * 172px);
}

.planner-times {
	position: sticky;
	left: 0;
	z-index: 2;
	height: calc(var(--head) + var(--rows) * var(--row) + 18px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border-right: 1px solid var(--zt-line);
	background: var(--zt-sheet);
	/* Labels of hours outside the window stay above the head of the sheet and are cut off; the
	   head "Time" is the ::before of the list and sits above the cut. */
	clip-path: inset(0);
}

.planner-times::before {
	content: attr(data-label);
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	display: grid;
	place-items: center;
	height: var(--head);
	border-bottom: 1px solid var(--zt-line);
	background: var(--zt-tint);
	color: var(--zt-muted);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.planner-times li {
	position: absolute;
	top: calc(var(--head) + (var(--at) - var(--offset, 0)) * var(--row) + 6px);
	left: 0;
	width: 100%;
	color: var(--zt-muted);
	font-size: 0.72rem;
	font-stretch: var(--zt-narrow);
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

.planner-col {
	min-width: 0;
	scroll-snap-align: start;
}

.planner-col + .planner-col {
	border-left: 1px solid var(--zt-line);
}

/* The header of a facility tinted in its colour (the panel: the colour with 20 % alpha). */
.planner-place {
	display: grid;
	place-items: center;
	height: var(--head);
	padding: 0 0.6rem;
	border-bottom: 1px solid var(--zt-line);
	background: color-mix(in srgb, var(--item, var(--zt-tint)) 14%, var(--zt-sheet));
	font-size: 0.8rem;
	font-weight: 650;
	line-height: 1.25;
	text-align: center;
}

/* Half-hour rules faint, full hours one step stronger. */
.planner-slots {
	position: relative;
	height: calc(var(--rows) * var(--row) + 18px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	background-image:
		repeating-linear-gradient(to bottom, transparent 0 calc(2 * var(--row) - 1px), var(--zt-line) calc(2 * var(--row) - 1px) calc(2 * var(--row))),
		repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px), var(--zt-grid) calc(var(--row) - 1px) var(--row));
}

/* A block shows the part of it inside the window of the sheet (--offset, --rows), so its time and
   client stay readable when it began earlier; a block entirely outside the window is scaled to 0.
   Its state colours the left edge and, faintly, the ground (--kind). */
.slot {
	--kind: var(--zt-res-confirmed);
	--start: max(var(--from), var(--offset, 0));
	--end: min(var(--from) + var(--len), var(--offset, 0) + var(--rows));
	position: absolute;
	top: calc((var(--start) - var(--offset, 0)) * var(--row) + 2px);
	right: 4px;
	left: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	z-index: 2;
	height: calc(max(var(--end) - var(--start), 0) * var(--row) - 4px);
	scale: clamp(0, (var(--end) - var(--start)) * 100, 1);
	overflow: hidden;
	padding: 0.35rem 0.5rem;
	border-left: 4px solid var(--kind);
	border-radius: 6px;
	background: color-mix(in srgb, var(--kind) var(--zt-slot-mix), var(--zt-sheet));
	box-shadow: var(--zt-shadow-sm);
	color: var(--zt-ink);
	font-size: 0.76rem;
	line-height: 1.3;
	transition: opacity 0.2s ease;
}

.slot.is-pending {
	--kind: var(--zt-res-pending);
}

.slot.is-waiting {
	--kind: var(--zt-res-waiting);
}

.slot.is-block {
	--kind: var(--zt-res-block);
}

.slot.is-session {
	--kind: var(--zt-res-session);
}

.slot-time,
.slot-title,
.slot-meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.slot-time {
	font-size: 0.72rem;
	font-stretch: var(--zt-narrow);
	font-weight: 650;
}

.slot-title {
	font-weight: 600;
}

.slot-meta {
	color: var(--zt-ink-soft);
	font-size: 0.72rem;
}

/* The icons of the panel: a clock at the time, a person at the client, a building at the company;
   the label of a block, an activity or a waiting reservation has none. */
.slot-time::before,
.slot:is(.is-confirmed, .is-pending, .is-waiting) .slot-title::before,
.slot:is(.is-confirmed, .is-pending) .slot-meta::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-right: 0.3rem;
	vertical-align: -0.1em;
	background-color: currentcolor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.slot-time::before {
	--icon: var(--zt-clock);
}

.slot .slot-title::before {
	--icon: var(--zt-person);
}

.slot .slot-meta::before {
	--icon: var(--zt-company);
}

.slot.is-block .slot-title,
.slot.is-session .slot-title {
	font-weight: 650;
}

.slot.is-short .slot-meta {
	display: none;
}

/* Pointing at a block brings it forward by dimming the others; the blocks are not links. */
@media (hover: hover) {
	.planner-grid:has(.slot:hover) .slot:not(:hover) {
		opacity: 0.55;
	}
}

/* The line of the current time, as in the panel: main.js places it while the window shows that
   hour and writes the time into its label. The line runs under the blocks, so it never strikes
   through their text; the dot on the edge of the hour column and the label stand above everything,
   ringed with the sheet. */
.planner-now {
	position: absolute;
	top: calc(var(--head) + var(--now, 0) * var(--row));
	right: 0;
	left: 0;
	height: 2px;
	pointer-events: none;
}

.planner-now::after {
	content: "";
	position: absolute;
	inset: 0 0 0 var(--times);
	z-index: 1;
	background: var(--zt-now);
}

.planner-now::before {
	content: "";
	position: absolute;
	top: -4px;
	left: calc(var(--times) - 5px);
	z-index: 3;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--zt-now);
	box-shadow: 0 0 0 2px var(--zt-sheet);
}

.planner-now span {
	position: absolute;
	top: -10px;
	right: 6px;
	z-index: 3;
	padding: 1px 6px;
	border-radius: 4px;
	background: var(--zt-now-strong);
	box-shadow: 0 0 0 2px var(--zt-sheet);
	color: var(--zt-white);
	font-size: 0.68rem;
	font-stretch: var(--zt-narrow);
	font-weight: 700;
	line-height: 1.5;
}

.planner-now span:empty {
	display: none;
}

/* Legend of the states under the grid: the swatch is a small block with its left edge. */
.planner-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	margin: 0;
	padding: 0.6rem 1.1rem 0;
	border-top: 1px solid var(--zt-line);
	list-style: none;
	color: var(--zt-muted);
	font-size: 0.76rem;
	font-stretch: var(--zt-narrow);
	font-weight: 600;
}

.planner-legend li {
	--kind: var(--zt-res-confirmed);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.planner-legend li::before {
	content: "";
	width: 12px;
	height: 12px;
	border-left: 3px solid var(--kind);
	border-radius: 3px;
	background: color-mix(in srgb, var(--kind) 22%, var(--zt-sheet));
}

.planner-legend .is-pending {
	--kind: var(--zt-res-pending);
}

.planner-legend .is-waiting {
	--kind: var(--zt-res-waiting);
}

.planner-legend .is-block {
	--kind: var(--zt-res-block);
}

.planner-legend .is-session {
	--kind: var(--zt-res-session);
}

.planner figcaption {
	padding: 0.5rem 1.1rem 0.7rem;
	color: var(--zt-muted);
	font-size: 0.82rem;
	line-height: 1.5;
}

.planner figcaption a {
	color: var(--zt-accent);
	font-weight: 600;
}

/* Three checkable facts close the first screen as a ruled row. */
.hero-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 4.5rem;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--zt-line);
}

.hero-facts li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1.35rem 1.5rem 1.35rem 0;
	color: var(--zt-ink-soft);
	font-size: 0.95rem;
	font-weight: 550;
}

.hero-facts li + li {
	padding-left: 1.5rem;
	border-left: 1px solid var(--zt-line);
}

.hero-facts svg {
	color: var(--zt-accent);
}

/* Screens of the application: a sheet with a hairline and a soft offset shadow. */
.app-shot {
	margin: 0;
}

.app-shot img {
	width: 100%;
	height: auto;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-lg);
}

.app-shot a {
	display: block;
	border-radius: var(--zt-radius-lg);
}

.app-shot figcaption {
	max-width: 70ch;
	margin-top: 0.9rem;
	color: var(--zt-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

.app-shot a[data-zt-lightbox] {
	cursor: zoom-in;
}

/* Full-size screen of the application (main.js lightbox): a modal dialog over a dimmed page. */
.lightbox {
	width: fit-content;
	max-width: 96vw;
	max-height: 94vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.lightbox::backdrop {
	background: rgb(0 0 0 / 80%);
}

.lightbox-image {
	display: block;
	width: auto;
	max-width: 96vw;
	height: auto;
	max-height: 94vh;
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-lg);
}

.lightbox-close {
	position: absolute;
	top: -0.9rem;
	right: -0.9rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: 50%;
	background: var(--zt-sheet);
	color: var(--zt-ink);
	box-shadow: var(--zt-shadow-lg);
	cursor: pointer;
}

.lightbox-close:hover {
	background: var(--zt-tint);
}

.lightbox-close:focus-visible {
	outline: 3px solid var(--zt-accent);
	outline-offset: 2px;
}

html.lightbox-open {
	overflow: hidden;
}

@media (max-width: 700px) {
	.lightbox-close {
		top: 0.5rem;
		right: 0.5rem;
	}
}

/* §08 Features, steps ------------------------------------------------------ */

.features-shot {
	margin-bottom: 4rem;
}

/* The six features as a ruled list of two columns: icon, heading, text and link. */
.feature-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 4rem;
	border-top: 1px solid var(--zt-line-strong);
}

.feature {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-content: start;
	column-gap: 1rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--zt-line);
}

.feature-icon {
	grid-row: span 2;
	color: var(--zt-accent);
	line-height: 0;
	padding-top: 2px;
}

.feature-shot {
	grid-column: 1 / -1;
	margin: 0 0 1.25rem;
	overflow: hidden;
	border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius);
	background: var(--zt-tint);
}

.feature-shot img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: top left;
}

.feature h3 {
	margin-bottom: 0.4rem;
}

.feature p {
	color: var(--zt-muted);
	font-size: 0.98rem;
}

.feature .text-link {
	margin-top: 0.7rem;
	font-size: 0.92rem;
}

/* Implementation as a timeline: numbered blocks on a dashed axis. RZ-416: up to five steps in one row on a wide
   screen (one column per step), a vertical axis below 1100px (rule in the media query). */
.steps {
	position: relative;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 2.5rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps::before {
	content: "";
	position: absolute;
	top: 22px;
	right: 0;
	left: 0;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--zt-line-strong) 0 8px, transparent 8px 14px);
}

.steps li {
	position: relative;
	counter-increment: step;
}

.steps li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.5rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-sm);
	color: var(--zt-accent);
	font-size: 1.25rem;
	font-stretch: var(--zt-wide);
	font-weight: 750;
}

.steps h3 {
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
}

/* RZ-416: smaller description text, so five steps stay compact. */
.steps p {
	max-width: 46ch;
	color: var(--zt-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* §09 Audiences ------------------------------------------------------------ */

.audiences {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem 2rem;
}

.audience-photo {
	margin: 0 0 1.4rem;
}

.audience-photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--zt-radius-lg);
	object-fit: cover;
}

.audience h3 {
	margin-bottom: 0.6rem;
	font-size: 1.3rem;
}

.audience p {
	color: var(--zt-muted);
}

.link-list {
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
}

.link-list li + li {
	margin-top: 0.35rem;
}

.link-list a {
	color: var(--zt-accent);
	font-weight: 650;
}

/* §10 Pricing, compare ----------------------------------------------------- */

.pricing {
	background: var(--zt-tint);
}

.pricing-grid {
	display: grid;
	grid-template-areas:
		"copy panel"
		"addons panel"
		"setup panel";
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	grid-template-rows: auto auto 1fr;
	align-items: start;
	column-gap: 4.5rem;
}

.pricing-copy {
	grid-area: copy;
}

/* The price on a raised sheet. */
.price-panel {
	grid-area: panel;
	padding: 2.25rem 2.5rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-lg);
}

/* CEN-I-16: the add-on packages of one pool under the intro. */
.pricing-addons {
	grid-area: addons;
	margin-top: 2.5rem;
}

.pricing-addons h3 {
	margin: 0 0 0.6rem;
}

.pricing-addons .price-list {
	margin: 1rem 0 1rem;
}

.pricing-addons .small {
	color: var(--zt-muted);
}

.price-pools {
	margin-top: 1rem;
	color: var(--zt-ink-soft);
	font-weight: 600;
}

.price-trial {
	margin-top: 0.75rem;
	color: var(--zt-accent);
	font-weight: 650;
}

.pricing-setup {
	grid-area: setup;
	align-self: start;
	margin-top: 2.5rem;
	padding: 1.75rem;
	border: 1.5px dashed var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
}

.pricing-setup-icon {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--zt-accent);
	line-height: 0;
}

.pricing h2 {
	max-width: 15ch;
	margin-bottom: 1.5rem;
}

.pricing-copy > p,
.pricing-setup > p {
	color: var(--zt-muted);
}

.pricing h3#wdrozenie {
	margin: 0 0 0.6rem;
}

.pricing .text-link {
	margin-top: 1rem;
}

.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	color: var(--zt-ink-soft);
	font-size: 1.1rem;
	font-stretch: 100%;
	font-weight: 600;
	letter-spacing: 0;
}

.price-value {
	color: var(--zt-ink);
	font-size: clamp(3.4rem, 6.5vw, 5rem);
	font-stretch: var(--zt-wide);
	font-weight: 780;
	letter-spacing: -0.04em;
	line-height: 1;
}

.price-year {
	margin-top: 1rem;
	color: var(--zt-muted);
}

.price-list {
	margin: 1.75rem 0 2rem;
	padding: 0;
	border-top: 1px solid var(--zt-line);
	list-style: none;
}

.price-list li {
	position: relative;
	padding: 0.7rem 0 0.7rem 1.75rem;
	border-bottom: 1px solid var(--zt-line);
	font-size: 0.97rem;
}

.price-list li::before,
.check-list li::before {
	content: "";
	position: absolute;
	top: 1rem;
	left: 0;
	width: 1.05rem;
	height: 1.05rem;
	background-color: var(--zt-accent);
	-webkit-mask: var(--zt-check) center / contain no-repeat;
	mask: var(--zt-check) center / contain no-repeat;
}

.price-panel .actions .text-link {
	margin-top: 0;
}

.price-panel .small {
	max-width: 46ch;
	margin-top: 1.5rem;
	color: var(--zt-muted);
}

.pricing-snippet {
	margin-block: 2rem;
	padding: 1.75rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
}

.pricing-snippet .price-value {
	font-size: clamp(2.5rem, 5vw, 3.4rem);
}

/* Today and after the implementation (#dzis-i-po-wdrozeniu): a second sheet of the schedule. The
   matters stand in the narrow column of the hours, today in quiet text, the system as a booked
   block with a drawn check. On wide screens the labels stand once above the columns; on phones
   each value keeps its own label. */
.compare-sheet {
	overflow: hidden;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-lg);
}

.compare-sheet-head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 1rem 3rem;
	align-items: end;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--zt-line);
}

.compare-sheet-head h2 {
	max-width: 18ch;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.compare-sheet-head p {
	max-width: 44ch;
	color: var(--zt-muted);
}

.compare-head,
.compare-row {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}

.compare-head {
	border-bottom: 1px solid var(--zt-line);
	background: var(--zt-tint);
}

.compare-head > span {
	padding: 0.6rem 1.25rem;
}

.compare-head > span:first-child {
	border-right: 1px solid var(--zt-line);
}

.compare-label {
	color: var(--zt-muted);
	font-size: 0.78rem;
	font-stretch: var(--zt-narrow);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.compare-label-after {
	color: var(--zt-accent);
}

.compare-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.compare-row + .compare-row {
	border-top: 1px solid var(--zt-line);
}

/* The matter in the column of the hours: narrow, ruled off from the day. */
.compare-row h3 {
	padding: 1.1rem 1.25rem;
	border-right: 1px solid var(--zt-line);
	color: var(--zt-ink-soft);
	font-size: 0.95rem;
	font-stretch: var(--zt-narrow);
	font-weight: 680;
	letter-spacing: 0;
}

.compare-row dl {
	display: contents;
}

.compare-before {
	padding: 1.1rem 1.25rem;
	color: var(--zt-muted);
}

.compare-after {
	position: relative;
	margin: 6px;
	padding: 0.85rem 1rem 0.85rem 2.5rem;
	border-radius: 7px;
	background: var(--zt-accent-wash);
	color: var(--zt-accent-wash-text);
}

.compare-after::before {
	content: "";
	position: absolute;
	top: 1.05rem;
	left: 1rem;
	width: 1.05rem;
	height: 1.05rem;
	background-color: var(--zt-accent);
	-webkit-mask: var(--zt-check) center / contain no-repeat;
	mask: var(--zt-check) center / contain no-repeat;
}

.compare-row dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.compare-row dd {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.55;
}

/* §11 Discovery, gallery --------------------------------------------------- */

.discovery-types {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.discovery-types a {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.8rem 1.1rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	color: var(--zt-ink);
	font-weight: 650;
	text-decoration: none;
}

.discovery-types a:hover {
	border-color: var(--zt-accent);
	color: var(--zt-accent);
}

/* The cards of the plugin (zajmijto-oferty) in three columns on the home page; offers without a
   photo keep a band with the type instead of an empty picture. */
.home-offers .zto-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-offers .zto-card-media:has(.zto-card-placeholder) {
	height: 56px;
	aspect-ratio: auto;
}

.home-offers .zto-card-placeholder {
	display: none;
}

.municipality-directory {
	margin-top: 3.5rem;
}

.municipality-directory h3 {
	margin-bottom: 1.25rem;
}

.municipality-directory .zto-gminy {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.gallery {
	background: var(--zt-tint);
}

.gallery .section-heading {
	grid-template-columns: minmax(0, 1fr);
}

.gallery .section-heading h2 {
	max-width: none;
}

.gallery .section-heading > p {
	max-width: 60ch;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery-grid:not(.gallery-default) img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
}

/* RZ-417: five key features with the screens shipped with the theme - two in the first row, three in the second. */
.gallery-default {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2.5rem 2rem;
	align-items: start;
}

.gallery-default li {
	grid-column: span 2;
}

.gallery-default li:nth-child(-n + 2) {
	grid-column: span 3;
}

.gallery-default img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top left;
}

.gallery-default h3 {
	margin: 1.1rem 0 0.35rem;
	font-size: 1.15rem;
}

.gallery-default p {
	max-width: 46ch;
	color: var(--zt-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* §12 Security, figures ---------------------------------------------------- */

.security {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 4rem;
}

.security > div:first-child {
	align-self: start;
}

@media (min-width: 1101px) {
	.security > div:first-child,
	.faq-section > div:first-child,
	.signup-intro {
		position: sticky;
		top: calc(var(--zt-header) + 2rem);
	}
}

.security .lead {
	margin-top: 1.5rem;
	color: var(--zt-muted);
	font-size: 1.1rem;
}

.check-list {
	margin: 0 0 1.5rem;
	padding: 0;
	border-top: 1px solid var(--zt-line-strong);
	list-style: none;
}

.check-list li {
	position: relative;
	padding: 1rem 0 1rem 2rem;
	border-bottom: 1px solid var(--zt-line);
}

.check-list li::before {
	top: 1.3rem;
}

.security .small {
	color: var(--zt-muted);
}

.security .text-link {
	margin-top: 1.25rem;
}

/* Figures as one ruled line at the size of the text (not the big-number template); the items are
   divided by a neutral rule, the colours of the legend keep their meaning in the schedule. */
.figures {
	padding-block: 0 var(--zt-space);
}

.figure-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	padding-block: 1.1rem;
	border-top: 1px solid var(--zt-line-strong);
	border-bottom: 1px solid var(--zt-line-strong);
}

.figure-list > div {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}

.figure-list > div + div::before {
	content: "";
	order: -2;
	align-self: center;
	width: 1px;
	height: 1.1em;
	margin-right: 1.1rem;
	background: var(--zt-line-strong);
}

.figure-list dd {
	order: -1;
	color: var(--zt-ink);
	font-weight: 750;
}

.figure-list dt {
	color: var(--zt-ink-soft);
	font-weight: 500;
}

/* §13 FAQ, CTA ------------------------------------------------------------- */

.faq-section {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 4rem;
	align-items: start;
}

.faq-section h2 {
	margin-bottom: 1.5rem;
}

.faq-list {
	border-top: 1px solid var(--zt-line-strong);
}

.faq-list details {
	border-bottom: 1px solid var(--zt-line);
}

.faq-list summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.2rem 0;
	font-size: 1.04rem;
	list-style: none;
}

.faq-list summary::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a cross when the answer is open. */
.faq-list summary::after {
	content: "";
	flex-shrink: 0;
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--zt-accent);
	-webkit-mask: var(--zt-plus) center / contain no-repeat;
	mask: var(--zt-plus) center / contain no-repeat;
}

.faq-list details[open] > summary::after {
	transform: rotate(45deg);
}

.faq-list summary:hover {
	color: var(--zt-accent);
}

.faq-list .faq-answer {
	margin: 0;
	padding: 0 2.5rem 1.4rem 0;
}

summary {
	font-weight: 650;
	line-height: 1.45;
	cursor: pointer;
}

summary::marker {
	color: var(--zt-accent);
}

.faq-answer {
	margin-top: 1rem;
	color: var(--zt-ink-soft);
}

/* The closing call to action: a band of the brand gradient (as the former site and the hero of
   the app; white text 6.40:1 and more on both ends), the button in a free slot of the schedule. */
.cta-section {
	background: var(--zt-cta);
	color: var(--zt-white);
}

.cta-section .shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}

.cta-section h2 {
	max-width: 22ch;
	margin-bottom: 1rem;
	color: var(--zt-white);
}

.cta-section p {
	color: #f0f5ff;
}

.cta-slot {
	flex-shrink: 0;
	padding: 1.25rem 1.5rem 1.5rem;
	border: 1.5px dashed rgb(255 255 255 / 70%);
	border-radius: var(--zt-radius-lg);
	background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 9%) 0 8px, transparent 8px 16px);
}

.cta-section .cta-slot-label {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.8rem;
	color: var(--zt-white);
	font-size: 0.95rem;
	font-weight: 680;
}

.cta-section .cta-slot-label::before {
	content: "";
	width: 0.9em;
	height: 0.9em;
	background-color: currentcolor;
	-webkit-mask: var(--zt-plus) center / contain no-repeat;
	mask: var(--zt-plus) center / contain no-repeat;
}

.cta-section .button {
	background: var(--zt-white);
	color: #0062cc;
	box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
}

.cta-section .button:hover {
	background: #e8f2ff;
	color: #004a99;
}

/* §14 Contact, forms ------------------------------------------------------- */

/* PO 23.10.2026: the contact section of the home page is gone; the contact details
   (parts/contact-details.php) stand next to the enquiry form and in the footer. */
.signup-contact {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--zt-line);
}

.signup-contact h2 {
	margin-bottom: 0.75rem;
	font-size: clamp(1.35rem, 2vw, 1.6rem);
}

.signup-contact > p {
	max-width: 40ch;
	color: var(--zt-muted);
}

.contact-link {
	display: inline-block;
	margin-top: 1rem;
	color: var(--zt-accent);
	font-size: 1.2rem;
	font-weight: 650;
}

/* People to contact from Customize (PO 20.10.2026): one ruled row each, the name on the left and
   the phone and e-mail on the right; on narrow columns the links go under the name. */
.contact-people {
	max-width: 40ch;
	margin: 1.75rem 0 0;
	padding: 0;
	border-bottom: 1px solid var(--zt-line);
	list-style: none;
}

.contact-people li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 0.85rem;
	border-top: 1px solid var(--zt-line);
}

.contact-people .contact-person,
.contact-people .contact-person-links {
	margin: 0;
}

.contact-person {
	color: var(--zt-ink);
	font-weight: 650;
}

.contact-person span {
	margin-left: 0.4rem;
	color: var(--zt-muted);
	font-size: 0.9rem;
	font-weight: 400;
}

.contact-person-links {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
}

.contact-person-links a {
	color: var(--zt-accent);
	font-weight: 650;
	white-space: nowrap;
}

.form {
	display: grid;
	gap: 1.5rem;
}

.form fieldset {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form legend {
	margin-bottom: 1rem;
	padding: 0;
	font-size: 1.15rem;
	font-stretch: 104%;
	font-weight: 680;
}

.form fieldset + fieldset {
	padding-top: 1.5rem;
	border-top: 1px solid var(--zt-line);
}

.form-required-note,
.form-info,
.field-hint {
	margin: 0;
	color: var(--zt-muted);
	font-size: 0.9rem;
}

.form-info a {
	color: var(--zt-accent);
}

.field {
	position: relative;
	display: grid;
	gap: 0.4rem;
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.field label {
	font-size: 0.94rem;
	font-weight: 650;
}

.field-optional {
	color: var(--zt-muted);
	font-weight: 400;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--zt-field-line);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	color: var(--zt-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea {
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--zt-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zt-accent) 20%, transparent);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
	outline-offset: 1px;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--zt-muted);
	opacity: 1;
}

.field-affix {
	display: flex;
	align-items: stretch;
}

.field-affix input {
	min-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.field-suffix {
	display: flex;
	align-items: center;
	padding: 0 0.9rem;
	border: 1px solid var(--zt-field-line);
	border-left: 0;
	border-radius: 0 var(--zt-radius) var(--zt-radius) 0;
	background: var(--zt-tint);
	color: var(--zt-muted);
	white-space: nowrap;
}

.field-status {
	margin: 0;
	font-size: 0.9rem;
}

/* RZ-476: live character counter of a field with a limit (assets/js/main.js, charCounter). */
.field-counter {
	margin: 0;
	color: var(--zt-muted);
	font-size: 0.9rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.field-counter.is-at-limit {
	color: var(--zt-error);
	font-weight: 650;
}

.field-error {
	margin: 0;
	color: var(--zt-error);
	font-size: 0.9rem;
	font-weight: 650;
}

.has-error input,
.has-error select,
.has-error textarea {
	border: 2px solid var(--zt-error);
}

.choice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 0.75rem;
	align-items: start;
}

.choice input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	accent-color: var(--zt-accent);
}

.choice .field-error {
	grid-column: 2;
}

.choice a {
	color: var(--zt-accent);
}

.choices legend {
	font-size: 1rem;
}

.form[aria-busy="true"] button[type="submit"] {
	cursor: progress;
	opacity: 0.7;
}

.form-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-errors,
.form-notice {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--zt-error);
	border-radius: var(--zt-radius);
	background: var(--zt-error-wash);
}

.form-notice.is-success {
	border-color: var(--zt-success);
	background: var(--zt-success-wash);
}

.form-errors-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 650;
}

.form-errors ul {
	margin: 0;
	padding-left: 1.25rem;
}

.form-errors a {
	color: var(--zt-error);
}

.form-notice p {
	margin: 0;
}

.combobox-list {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 20;
	max-height: 18rem;
	margin: 0.25rem 0 0;
	padding: 0.25rem 0;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-lg);
}

.combobox-list [role="option"] {
	display: grid;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
}

.combobox-list [aria-selected="true"],
.combobox-list [role="option"]:hover {
	background: var(--zt-accent-wash);
}

.combobox-detail {
	color: var(--zt-muted);
	font-size: 0.85rem;
}

/* §15 Enquiry page --------------------------------------------------------- */

.signup-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 4rem;
	align-items: start;
	padding-block: 4rem var(--zt-space);
}

.signup-intro h1 {
	font-size: clamp(2.1rem, 3.2vw, 2.9rem);
}

.signup-intro .lead {
	margin-block: 1.5rem;
}

.notice {
	padding: 1rem 1.25rem;
	border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius);
	background: var(--zt-tint);
}

/* The enquiry form lies on a sheet. */
.signup-layout .form {
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-md);
}

/* §16 CTA band ------------------------------------------------------------- */

.cta-band {
	padding-block: 2.75rem;
	border-top: 1px solid var(--zt-line);
	background: var(--zt-tint);
}

.cta-band-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.cta-band-text {
	max-width: 52ch;
	font-size: 1.2rem;
	font-stretch: 104%;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.cta-band .button {
	flex-shrink: 0;
}

/* §17 Pages and posts ------------------------------------------------------ */

/* The heading of a page and its reading column stand on the left edge of the shell, the way the
   sections of the home page do. */
.page-heading {
	padding-block: 4.5rem 2.75rem;
}

.page-heading h1 {
	max-width: 22ch;
}

.page-heading .lead {
	max-width: 52ch;
	margin-top: 1.25rem;
	color: var(--zt-muted);
}

.post-meta {
	color: var(--zt-muted);
	font-size: 0.875rem;
}

.page-heading .post-meta {
	margin: 0 0 1rem;
}

.prose {
	max-width: 820px;
}

.prose > :first-child {
	margin-top: 0;
}

.prose h2 {
	margin: 2.75rem 0 1rem;
	font-size: clamp(1.55rem, 2.8vw, 2.1rem);
}

.prose h3 {
	margin: 2rem 0 0.7rem;
}

.prose p,
.prose ul,
.prose ol,
.prose figure,
.prose blockquote,
.prose details {
	margin-block: 1rem;
}

.prose li + li {
	margin-top: 0.35rem;
}

.prose a {
	color: var(--zt-accent);
}

.prose img {
	border-radius: var(--zt-radius-lg);
}

.prose blockquote {
	margin-inline: 0;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius);
	background: var(--zt-tint);
}

.prose pre {
	max-width: 100%;
	overflow: auto;
	padding: 1rem;
	border-radius: var(--zt-radius);
	background: var(--zt-tint);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose th,
.prose td {
	padding: 0.7rem 0.75rem;
	border-bottom: 1px solid var(--zt-line);
	text-align: left;
	vertical-align: top;
}

.prose th {
	border-bottom-color: var(--zt-line-strong);
	font-weight: 650;
}

.legal .prose {
	max-width: 70ch;
}

.legal > .post-meta {
	max-width: 70ch;
	margin: 0 0 1.5rem;
}

/* RZ-399: version line, announcement and archive of a document from the register (plugin zajmijto-oferty). */
.zto-document-meta {
	max-width: 70ch;
	margin: 0 0 1.5rem;
}

.zto-document-meta .post-meta a {
	margin-left: 0.5rem;
}

.zto-document-announcement {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--zt-line-strong);
	background: var(--zt-tint);
}

.zto-document-archive ul {
	margin: 0.5rem 0 0;
}

.child-pages {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 2.5rem;
	max-width: 820px;
	margin: 3rem 0 2rem;
	padding: 0;
	border-top: 1px solid var(--zt-line-strong);
	list-style: none;
}

.child-pages li {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--zt-line);
}

.child-pages a {
	color: var(--zt-accent);
	font-size: 1.1rem;
	font-weight: 650;
}

.child-pages p {
	margin-top: 0.4rem;
	color: var(--zt-muted);
}

.child-pages + p {
	max-width: 820px;
}

/* The catalogue of /funkcje/ (content of the page, groups "zt-feature-group" of starter/content.php):
   each area of the system is a row ruled like an hour of the schedule - its heading and the gain
   for the municipality on the left, the functions on the right in two columns with a check. */
.feature-catalogue .prose {
	max-width: none;
}

.feature-catalogue .prose > p:first-child {
	max-width: 62ch;
	margin-bottom: 3rem;
	color: var(--zt-ink-soft);
	font-size: 1.15rem;
}

.zt-feature-group {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	grid-template-rows: auto 1fr;
	gap: 0.75rem 4rem;
	margin: 0;
	padding-block: 2.5rem;
	border-top: 1px solid var(--zt-line-strong);
}

.prose .zt-feature-group > h2 {
	grid-column: 1;
	margin: 0;
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}

.prose .zt-feature-group > p {
	grid-column: 1;
	max-width: 34ch;
	margin: 0;
	color: var(--zt-muted);
}

.prose .zt-feature-group > ul {
	display: grid;
	grid-row: 1 / span 2;
	grid-column: 2;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prose .zt-feature-group li {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	color: var(--zt-ink-soft);
	font-size: 0.98rem;
	line-height: 1.55;
}

.zt-feature-group li::before {
	content: "";
	position: absolute;
	top: 0.2rem;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	background-color: var(--zt-accent);
	-webkit-mask: var(--zt-check) center / contain no-repeat;
	mask: var(--zt-check) center / contain no-repeat;
}

.zt-feature-group li strong {
	display: block;
	margin-bottom: 0.15rem;
	color: var(--zt-ink);
	font-weight: 680;
}

/* What is not offered and the pricing note (all features in every package) close the catalogue as two more ruled rows. */
.feature-catalogue .prose > h2 {
	margin: 0 0 0.75rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--zt-line-strong);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}

.feature-catalogue .prose > h2 + p {
	margin-bottom: 1rem;
}

.article-cover {
	width: 100%;
	max-height: 560px;
	margin-bottom: 3rem;
	border-radius: var(--zt-radius-lg);
	object-fit: cover;
}

.article-body {
	padding-bottom: 3rem;
}

/* Page for the contracting authority (/dla-zamawiajacego/): the summary as a ruled sheet and the
   documents beside it, the description below in the reading column. */
.procurement {
	padding-bottom: 1rem;
}

.procurement-notice {
	max-width: 820px;
	margin: 0 0 2rem;
}

.procurement-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 2rem;
	align-items: start;
	margin-bottom: 3.5rem;
}

/* Until a document page is published the summary stands alone in the reading width. */
.procurement-grid:not(:has(.procurement-docs)) {
	grid-template-columns: minmax(0, 820px);
}

.procurement-facts,
.procurement-docs {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-sheet);
	box-shadow: var(--zt-shadow-sm);
}

.procurement-docs {
	background: var(--zt-tint);
	box-shadow: none;
}

.procurement h2 {
	margin-bottom: 1.25rem;
	font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}

.procurement-facts dl {
	margin: 0;
	border-top: 1px solid var(--zt-line);
}

.procurement-facts dl > div {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: 0.25rem 1.25rem;
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--zt-line);
}

.procurement-facts dt {
	color: var(--zt-muted);
	font-size: 0.9rem;
	font-weight: 650;
}

.procurement-facts dd {
	margin: 0;
}

.procurement-docs > p {
	margin-bottom: 1rem;
	color: var(--zt-muted);
}

.procurement-docs ul {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.procurement-docs a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	color: var(--zt-ink);
	font-weight: 650;
	text-decoration: none;
}

.procurement-docs a:hover {
	border-color: var(--zt-accent);
	color: var(--zt-accent);
}

.procurement-docs .zt-icon {
	color: var(--zt-accent);
}

/* §18 Table of contents, author -------------------------------------------- */

.toc {
	max-width: 820px;
	margin: 0 0 2.5rem;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--zt-line);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-tint);
}

.toc-title {
	font-weight: 700;
}

.toc ol {
	margin: 0.75rem 0 0;
	padding-left: 1.5rem;
}

.toc li + li {
	margin-top: 0.4rem;
}

.toc ol.toc-numbered {
	padding-left: 0;
	list-style: none;
}

.toc a[aria-current="true"] {
	color: var(--zt-accent);
	font-weight: 650;
}

/* A post, a legal document or a page (.page-body: page.php, segment pages, pricing - PO 23.10.2026)
   on a wide screen: the text keeps its reading width on the left and the table of contents stands
   beside it, in view while reading, with the section being read marked by main.js (PO 20.10.2026).
   Narrower screens keep the table of contents above the text. */
@media (min-width: 1100px) {
	:is(.article-body, .legal, .page-body):has(> .toc) {
		display: grid;
		grid-template-columns: minmax(0, 820px) minmax(0, 17rem);
		column-gap: 4rem;
		justify-content: space-between;
	}

	:is(.article-body, .legal, .page-body):has(> .toc) > * {
		/* A grid item keeps at least the width of its widest table otherwise and runs under the contents. */
		min-width: 0;
		grid-column: 1;
	}

	:is(.article-body, .legal, .page-body) > .toc {
		position: sticky;
		top: calc(var(--zt-header) + 2rem);
		grid-row: 1 / span 4;
		grid-column: 2;
		align-self: start;
		max-height: calc(100vh - var(--zt-header) - 4rem);
		margin: 0;
		padding: 0.25rem 0 0.25rem 1.5rem;
		overflow-y: auto;
		border: 0;
		border-left: 1px solid var(--zt-line);
		border-radius: 0;
		background: none;
		font-size: 0.94rem;
		overscroll-behavior: contain;
	}

	.admin-bar :is(.article-body, .legal, .page-body) > .toc {
		top: calc(var(--zt-header) + 32px + 2rem);
	}

	:is(.article-body, .legal, .page-body) > .toc ol {
		margin-top: 0.9rem;
		padding-left: 1.25rem;
		color: var(--zt-muted);
	}

	:is(.article-body, .legal, .page-body) > .toc ol.toc-numbered {
		padding-left: 0;
	}

	:is(.article-body, .legal, .page-body) > .toc li + li {
		margin-top: 0.6rem;
	}

	:is(.article-body, .legal, .page-body) > .toc a {
		color: var(--zt-muted);
		text-decoration: none;
	}

	:is(.article-body, .legal, .page-body) > .toc a:hover {
		color: var(--zt-ink);
		text-decoration: underline;
	}

	:is(.article-body, .legal, .page-body) > .toc a[aria-current="true"] {
		color: var(--zt-accent);
	}
}

.author-box {
	max-width: 820px;
	margin: 3rem 0 0;
	padding-top: 2rem;
	border-top: 1px solid var(--zt-line);
}

.author-name {
	font-weight: 700;
}

/* §19 Lists of posts ------------------------------------------------------- */

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem 2rem;
}

.post-card {
	min-width: 0;
}

.post-card img {
	width: 100%;
	margin-bottom: 1.1rem;
	border-radius: var(--zt-radius-lg);
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.post-card-title {
	margin-block: 0.5rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

.post-card-title a {
	text-decoration: none;
}

.post-card-title a:hover {
	color: var(--zt-accent);
	text-decoration: underline;
}

.post-card p {
	color: var(--zt-muted);
	font-size: 0.97rem;
}

.related h2 {
	margin-bottom: 2rem;
}

.category-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.category-nav a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--zt-line-strong);
	border-radius: var(--zt-radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.category-nav a:hover {
	border-color: var(--zt-accent);
	color: var(--zt-accent);
}

.pagination,
.post-navigation {
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--zt-line);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.page-numbers {
	display: inline-block;
	min-width: 44px;
	padding: 0.5rem 0.9rem;
	border-radius: var(--zt-radius);
	font-weight: 650;
	text-align: center;
}

.page-numbers.current {
	background: var(--zt-cta);
	color: var(--zt-white);
}

.search-form {
	max-width: 650px;
	margin: 0 0 2rem;
}

.search-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 700;
}

.search-row {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
}

.search-row input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--zt-field-line);
	border-radius: var(--zt-radius);
	background: var(--zt-sheet);
	color: var(--zt-ink);
}

/* §20 Blocks in content ---------------------------------------------------- */

.alignwide {
	width: min(100%, var(--zt-shell));
}

.wp-block-buttons {
	margin-block: 1.5rem;
}

.zt-cta-block {
	margin-block: 3rem;
	padding: 2rem;
	border: 1.5px dashed var(--zt-accent-line);
	border-radius: var(--zt-radius-lg);
	background: var(--zt-accent-wash);
}

.zt-cta-block h2 {
	margin-top: 0;
}

.wp-block-details summary {
	padding-block: 0.75rem;
	border-top: 1px solid var(--zt-line);
}

.wp-block-table,
.table-scroll {
	overflow-x: auto;
}

/* Long identifiers (cookie names, paths) may break inside a cell, so a table of a legal document
   fits its reading column instead of scrolling for one word (23.10.2026). */
.prose td code {
	overflow-wrap: anywhere;
}

/* §21 Footer --------------------------------------------------------------- */

.site-footer {
	padding-top: 4rem;
	background: var(--zt-night);
	color: var(--zt-white);
}

.site-footer .footer-brand {
	color: var(--zt-white);
}

.footer-main {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 3.5rem;
}

.footer-about p {
	max-width: 34ch;
	margin-top: 1rem;
	color: var(--zt-night-text);
}

.footer-company {
	font-size: 0.85rem;
}

/* Seen only by administrators while the details of the supplier are empty. */
.footer-missing {
	max-width: 36ch;
	margin-top: 1rem;
	padding: 0.75rem 0.9rem;
	border: 1.5px dashed var(--zt-night-link);
	border-radius: var(--zt-radius);
	color: var(--zt-white);
	font-size: 0.85rem;
}

.footer-social {
	display: flex;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.footer-social a {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--zt-night-line);
	border-radius: var(--zt-radius);
	color: var(--zt-night-text);
}

.footer-social a:hover {
	border-color: var(--zt-night-link);
	color: var(--zt-night-link);
}

.site-footer .menu {
	flex-direction: column;
	gap: 0;
}

.site-footer .menu a {
	padding: 0.35rem 0;
	border-radius: 0;
	color: var(--zt-night-text);
	font-weight: 400;
}

.site-footer .menu a:hover,
.site-footer .menu .current-menu-item > a {
	background: none;
	color: var(--zt-night-link);
	text-decoration: underline;
}

.footer-contact a {
	color: var(--zt-night-text);
}

.footer-contact a:hover {
	color: var(--zt-night-link);
}

/* The contact details of parts/contact-details.php on the dark footer. */
.footer-contact .contact-link {
	margin-top: 0;
	font-size: inherit;
	font-weight: 400;
}

.footer-contact .contact-people,
.footer-contact .contact-people li {
	border-color: var(--zt-night-line);
}

.footer-contact .contact-people {
	margin-top: 1rem;
}

.footer-contact .contact-person {
	color: var(--zt-white);
}

.footer-contact .contact-person span {
	color: var(--zt-night-text);
}

.footer-contact .contact-person-links a {
	color: var(--zt-night-link);
}

.footer-label {
	margin-bottom: 0.5rem;
	color: var(--zt-white);
	font-size: 0.8rem;
	font-stretch: var(--zt-narrow);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--zt-night-line);
	color: var(--zt-night-text);
	font-size: 0.85rem;
}

.footer-bottom a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* §22 Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
	.header-inner {
		flex-wrap: wrap;
		gap: 0;
		padding-block: 0.9rem;
	}

	/* RZ-416: five steps do not fit in one row - vertical timeline, the number beside the text. */
	.steps {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-flow: row;
		gap: 2rem;
	}

	.steps::before {
		top: 0;
		right: auto;
		bottom: 0;
		left: 22px;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(180deg, var(--zt-line-strong) 0 8px, transparent 8px 14px);
	}

	.steps li {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}

	.steps li::before {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.steps li > * {
		grid-column: 2;
	}

	.menu-toggle:not([hidden]) {
		display: inline-flex;
	}

	/* Touch targets of the mobile menu: 44 px (WCAG 2.5.5, Apple HIG). */
	.menu-toggle,
	.primary-navigation .button-small,
	.theme-option {
		min-height: 44px;
	}

	/* Three labelled options of 44 px: they wrap instead of scrolling inside the menu. */
	.theme-switch:not([hidden]) {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.primary-navigation {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		width: 100%;
		max-height: calc(100vh - var(--zt-header) - 1rem);
		overflow-y: auto;
		padding-block: 1rem;
	}

	.theme-switch {
		align-self: flex-start;
	}

	.theme-switch .theme-option-label {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
	}

	.primary-navigation[data-zt-enhanced]:not(.is-open) {
		display: none;
	}

	.primary-navigation .menu {
		flex-direction: column;
		gap: 0;
	}

	.primary-navigation .menu a {
		padding: 0.75rem 0.85rem;
	}

	.menu-item-has-children {
		flex-wrap: wrap;
	}

	.menu-item-has-children > a {
		flex: 1;
	}

	.primary-navigation .sub-menu {
		position: static;
		display: block;
		flex-basis: 100%;
		padding: 0 0 0 1rem;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	[data-zt-enhanced] .menu-item-has-children:not(.is-open) > .sub-menu,
	[data-zt-enhanced] .menu-item-has-children:not(.is-open):hover > .sub-menu {
		display: none;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.hero h1 {
		max-width: 16ch;
	}

	.security,
	.faq-section,
	.signup-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.cta-section .shell,
	.cta-band-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-main {
		grid-template-columns: 1fr 1fr;
	}

	.procurement-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1000px) {
	.post-grid,
	.home-offers .zto-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.feature-list {
		column-gap: 2.5rem;
	}

	.audiences {
		grid-template-columns: 1fr 1fr;
	}

	.audience:first-child {
		grid-column: 1 / -1;
	}

	.audience:first-child .audience-photo img {
		aspect-ratio: 16 / 9;
	}

	.compare-head {
		display: none;
	}

	.compare-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.compare-row h3 {
		grid-column: 1 / -1;
		padding-block: 0.75rem;
		border-right: 0;
		border-bottom: 1px solid var(--zt-line);
		background: var(--zt-tint);
	}

	/* Without the column labels above, each value shows its own. */
	.compare-row dt {
		position: static;
		width: auto;
		height: auto;
		margin-bottom: 0.3rem;
		overflow: visible;
		clip: auto;
		color: var(--zt-muted);
		font-size: 0.75rem;
		font-stretch: var(--zt-narrow);
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.compare-after dt {
		color: var(--zt-accent);
	}

	.pricing-grid {
		column-gap: 2.5rem;
	}

	/* Tablet: the five features in two columns. */
	.gallery-default li,
	.gallery-default li:nth-child(-n + 2) {
		grid-column: span 3;
	}
}

@media (max-width: 860px) {
	.section-heading {
		grid-template-columns: 1fr;
		margin-bottom: 2.5rem;
	}

	.gallery-default li,
	.gallery-default li:nth-child(-n + 2) {
		grid-column: auto;
	}

	.section-heading > .text-link {
		grid-column: 1;
	}

	.feature-list {
		grid-template-columns: 1fr;
	}

	.zt-feature-group {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.prose .zt-feature-group > ul {
		grid-row: auto;
		grid-column: 1;
		grid-template-columns: 1fr;
		margin-top: 0.75rem;
	}

	.hero-facts {
		grid-template-columns: 1fr;
		margin-top: 3rem;
	}

	.hero-facts li,
	.hero-facts li + li {
		padding: 1rem 0;
		border-left: 0;
	}

	.hero-facts li + li {
		border-top: 1px solid var(--zt-line);
	}

}

@media (max-width: 760px) {
	.pricing-grid {
		grid-template-areas:
			"copy"
			"panel"
			"addons"
			"setup";
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 2rem;
	}

	.pricing h3#wdrozenie {
		margin-top: 1rem;
	}

	.planner {
		--times: 42px;
		margin-inline: calc(var(--zt-gutter) / -2);
		border-radius: 0;
		border-inline: 0;
	}

	.planner-grid {
		grid-template-columns: var(--times) repeat(3, minmax(150px, 1fr));
		min-width: calc(var(--times) + 3 * 150px);
	}

	.planner-scroll {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	}

	.planner-place {
		padding-inline: 0.45rem;
		font-size: 0.76rem;
	}

	/* On a phone the toolbar keeps the date and the switch; "Today" and the opening hours go. */
	.planner-today,
	.planner-hours {
		display: none;
	}
}

@media (max-width: 600px) {
	:root {
		--zt-gutter: 32px;
		--zt-space: 72px;
	}

	.hero {
		padding-top: 44px;
	}

	.hero .actions {
		flex-direction: column;
		align-items: stretch;
	}

	.post-grid,
	.child-pages,
	.gallery-grid,
	.home-offers .zto-grid,
	.audiences {
		grid-template-columns: 1fr;
	}

	.audience:first-child .audience-photo img {
		aspect-ratio: 4 / 3;
	}

	.feature {
		grid-template-columns: 24px minmax(0, 1fr);
	}

	.compare-row {
		grid-template-columns: 1fr;
	}

	.compare-sheet-head {
		grid-template-columns: 1fr;
	}

	.compare-sheet {
		margin-inline: calc(var(--zt-gutter) / -2);
		border-radius: 0;
		border-inline: 0;
	}

	.procurement-facts dl > div {
		grid-template-columns: 1fr;
	}

	.price-panel {
		padding: 1.75rem 1.5rem;
	}

	.discovery-types {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.discovery-types a {
		flex: 1;
		justify-content: center;
		gap: 0;
		padding: 12px 10px;
		font-size: 0.9rem;
	}

	.discovery-types svg {
		display: none;
	}

	.footer-main {
		grid-template-columns: 1fr;
	}

	.search-row {
		flex-direction: column;
	}

	.page-heading {
		padding-top: 2.5rem;
	}

	.page-heading h1,
	.prose {
		overflow-wrap: break-word;
	}

	.cta-slot {
		width: 100%;
	}

	.cta-slot .button {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.field-row {
		grid-template-columns: 1fr;
	}
}

/* §23 Motion --------------------------------------------------------------- */

/* One authored moment: the blocks of the schedule are written in, one after another, wiping down
   from their top edge like a marker on the planner. Only without prefers-reduced-motion; colour,
   border and shadow transitions stay for everyone (they carry feedback, not motion). */
@media (prefers-reduced-motion: no-preference) {
	.slot {
		animation: zt-write 0.55s cubic-bezier(0.16, 0.84, 0.3, 1) both;
		animation-delay: calc(150ms + var(--i, 0) * 40ms);
	}

	.planner-now:not([hidden])::after {
		animation: zt-now 0.6s ease-out 1.2s both;
	}

	@keyframes zt-write {
		from {
			clip-path: inset(0 0 100% 0 round 6px);
			opacity: 0.4;
		}

		to {
			clip-path: inset(0 0 0 0 round 6px);
			opacity: 1;
		}
	}

	@keyframes zt-now {
		from {
			clip-path: inset(0 100% 0 0);
		}

		to {
			clip-path: inset(0 0 0 0);
		}
	}

	.submenu-toggle svg,
	.zt-arrow,
	.faq-list summary::after {
		transition: transform 0.2s ease;
	}

	.text-link:hover .zt-arrow-right,
	.button:hover .zt-arrow-right {
		transform: translateX(3px);
	}

	.text-link:hover .zt-arrow-left {
		transform: translateX(-3px);
	}

	.button:hover .zt-arrow-down {
		transform: translateY(2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.button,
	.wp-element-button,
	.wp-block-button__link,
	.menu a,
	.slot,
	.field input,
	.field select,
	.field textarea {
		transition: none;
	}

	.button:active {
		transform: none;
	}
}

/* Touch screens (any width): 44 px targets for text links and the small links of the footer,
   without making the mouse layout looser. */
@media (pointer: coarse) {
	.text-link,
	.footer-bottom a,
	.category-nav a,
	.combobox-list [role="option"] {
		min-height: 44px;
	}

	.category-nav a {
		display: inline-flex;
		align-items: center;
	}

	.combobox-list [role="option"] {
		align-content: center;
	}

	.site-footer .menu a {
		padding-block: 0.65rem;
	}

	.brand-link,
	.footer-brand {
		min-height: 44px;
	}

	.footer-contact a,
	.planner figcaption a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.footer-social a,
	.submenu-toggle {
		width: 44px;
		height: 44px;
	}
}

/* §24 Print ---------------------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.cta-band,
	.cta-section,
	.skip-link,
	.toc,
	.theme-switch,
	.planner-now {
		display: none;
	}

	.pricing,
	.tint,
	.gallery {
		background: none;
	}

	.slot {
		animation: none;
	}

	a {
		text-decoration: underline;
	}
}