/* ==========================================================================
   Initace — components.css
   Every component class in every state, ported from design/preview.html (sheets 04–16) and
   the approved concept (git history: design/concept-a/concept-akcent.html); brand book design/ksiega-marki.html. Colour only through tokens.css variables — no hex/rgb/
   hsl/oklch literal in this file (design/build-plan.md §2.7 gate). Class names are the contract
   (design/build-plan.md §2.7): container, container--content, container--narrow, paper, band,
   sheet, section-head, kicker, mono, btn(+variants), tag(+variants), stamp, chip, chip-radio,
   field, label, input, hint, error-summary, notice(+variants), msg, card(+variants), spec,
   packages, pkg, price-big, price-sub, table--data, table--compare, table-wrap, differs, steps,
   timeline, faq, crumbs, onpage, cal, days, day, hours, hour, quick, channels, channel, person,
   photo-slot, facts, kb-list, author-box, toc, prose, view, views, frame, marks, balloon, legend,
   drawing, shot, shot-phone, hatch, cookie, p404, state classes is-active|is-current|is-open|
   is-error|is-success|is-disabled|is-loading|is-today|is-filled.
   ========================================================================== */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--color-background); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh-body);
  font-feature-settings: "kern", "liga"; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); text-wrap: balance; }
h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
h2 { font-size: var(--step-4); line-height: var(--lh-heading); }
h3 { font-size: var(--step-3); line-height: var(--lh-sub); }
h4 { font-size: var(--step-2); line-height: var(--lh-sub); }
p, ul, ol, figure { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lead { font-size: var(--step-1); color: var(--color-text-muted); max-width: var(--measure); }
.small { font-size: var(--step--1); line-height: var(--lh-small); }
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: var(--lh-label); }
.label { color: var(--color-text-label); font-weight: var(--weight-medium); }
.container { max-width: var(--w-wide); margin: 0 auto; padding-inline: var(--gutter); }
.container--content { max-width: var(--w-content); }
.container--narrow { max-width: var(--w-wide); }
.container--prose { max-width: var(--w-prose); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }

a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--dur-1) var(--ease), text-decoration-thickness var(--dur-1) var(--ease); }
a:hover, a.is-hover { color: var(--color-link-hover); text-decoration-thickness: 3px; }
a:active { color: var(--color-primary-active); }
.prose a:visited, .kb-list a:visited { color: var(--color-link-visited); }
a.plain, .nav a, .footer a, .links a, .mobile-menu a { text-decoration: none; }
a.plain:hover, .nav a:hover, .footer a:hover, .links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
a.ext::after { content: " ↗"; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible, .is-focus { outline: var(--bw-2) solid var(--color-focus-ring); outline-offset: 2px; }
.on-dark :focus-visible, .on-dark .is-focus { outline-color: var(--paper); box-shadow: 0 0 0 4px var(--ink); }

.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 48px 48px, 48px 48px;
  background-position: center top;
}
@media (max-width: 640px) { .paper { background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; } }
.band { background: var(--color-surface-2); }
.hatch { background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 7px); }

/* Scrolling to a section or question (#hash) accounts for the height of the sticky header
   and the "Na tej stronie" bar (B-09; a bug of the old site, design/audit.md §5). */
[id] { scroll-margin-top: calc(var(--h-header) + 4.5rem); }
@media (max-width: 900px) { [id] { scroll-margin-top: calc(var(--h-header-phone) + 4.5rem); } }

/* Post content is rendered `align="full"` at the template level (assembly fix, 2026-09-29) so our
   own full-bleed section blocks (contact-block, demo-cards, footer, the on-page
   bar) can reach the viewport edge; every OTHER direct child (plain headings/paragraphs/lists and
   any block placed without its own alignwide/alignfull) gets a sensible default width here
   instead, so content authors don't have to wrap every paragraph in a container block by hand. */
/* :where() keeps this default at low specificity, so the more specific rules below (wide, full,
   bands, running text, the article) can refine it without !important. */
.entry-content.is-layout-flow > :where(:not(.alignwide):not(.alignfull):not(.band):not(.paper):not(.sheet)),
.wp-block-post-content.is-layout-flow > :where(:not(.alignwide):not(.alignfull):not(.band):not(.paper):not(.sheet)) {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}
.entry-content.is-layout-flow > .alignwide,
.wp-block-post-content.is-layout-flow > .alignwide {
  max-width: var(--w-wide);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}
.entry-content.is-layout-flow > .alignfull,
.wp-block-post-content.is-layout-flow > .alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* A plain `.band`/`.paper`/`.sheet` group used at the top level of the content (without an
   explicit "align":"full" attribute, e.g. content authored as `<!-- wp:group {"className":"band"} -->`)
   is still meant to tint edge-to-edge like a proper section — so it escapes the cap above, and
   each of ITS OWN direct children gets the same "container" treatment individually instead
   (visually identical to wrapping them together in one container, without needing that extra
   markup in every content file). */
.entry-content.is-layout-flow > .band:not(.alignfull):not(.alignwide),
.entry-content.is-layout-flow > .paper:not(.alignfull):not(.alignwide),
.entry-content.is-layout-flow > .sheet:not(.alignfull):not(.alignwide),
.wp-block-post-content.is-layout-flow > .band:not(.alignfull):not(.alignwide),
.wp-block-post-content.is-layout-flow > .paper:not(.alignfull):not(.alignwide),
.wp-block-post-content.is-layout-flow > .sheet:not(.alignfull):not(.alignwide) {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-inline: 0;
}
.entry-content.is-layout-flow > .band:not(.alignfull):not(.alignwide) > *,
.entry-content.is-layout-flow > .paper:not(.alignfull):not(.alignwide) > *,
.entry-content.is-layout-flow > .sheet:not(.alignfull):not(.alignwide) > *,
.wp-block-post-content.is-layout-flow > .band:not(.alignfull):not(.alignwide) > *,
.wp-block-post-content.is-layout-flow > .paper:not(.alignfull):not(.alignwide) > *,
.wp-block-post-content.is-layout-flow > .sheet:not(.alignfull):not(.alignwide) > * {
  max-width: var(--w-content);
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--gutter);
}
/* ---------- sections ---------- */
.sheet { padding-block: var(--section-y); border-bottom: var(--bw-1) solid var(--color-border-strong); }
.sheet > .container > .section-head, .sheet > .container--content > .section-head { margin-bottom: var(--space-10); }
.kicker { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-label); font-weight: var(--weight-medium); }
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--color-mark); flex: none; }
.section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: end; }
.section-head h2 { margin-top: var(--space-3); max-width: 18em; }
.section-head .note { color: var(--color-text-muted); max-width: 44em; margin-top: var(--space-4); }
.section-head .sheet-no { color: var(--color-text-label); font-weight: var(--weight-medium); text-align: right; }
.cont { padding: var(--space-6) 0; color: var(--color-text-muted); }
.cont .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
@media (max-width: 640px) { .section-head { grid-template-columns: 1fr; } .section-head .sheet-no { display: none; } }

/* ==========================================================================
   04 · Buttons, header, menu
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--h-control); padding: 0 var(--space-6); border: var(--bw-mark) solid var(--color-primary); border-radius: var(--radius);
  font: var(--weight-semibold) var(--step-0) / 1 var(--font-sans); letter-spacing: 0.005em; color: var(--color-on-primary); background: var(--color-primary);
  cursor: pointer; text-decoration: none; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover, .btn.is-hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); box-shadow: var(--shadow-hard); text-decoration: none; }
.btn:active, .btn.is-active { background: var(--color-primary-active); border-color: var(--color-primary-active); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--brand-text); border-color: var(--brand-text); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--brand-wash); color: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: none; }
.btn--ghost:active, .btn--ghost.is-active { background: var(--brand-wash-2); }
.btn--small { min-height: var(--h-control-sm); padding: 0 var(--space-4); font-size: var(--step--1); }
.btn[disabled], .btn.is-disabled { cursor: not-allowed; box-shadow: none; border-color: transparent; background: color-mix(in oklch, var(--ink) 12%, var(--paper)); color: color-mix(in oklch, var(--ink) 45%, var(--paper)); }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: initace-spin 800ms linear infinite; }
@keyframes initace-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation: none; border-right-color: currentColor; opacity: .5; } }
.btn--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--color-link); font-weight: var(--weight-semibold); }
.btn--link::after { content: " →"; }
.btn--link:hover, .btn--link.is-hover { background: none; box-shadow: none; color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
@media (max-width: 640px) { .btn { min-height: var(--h-control-phone); padding: 0 var(--space-4); } .btn--block-phone { width: 100%; } }

/* The header block sits inside WordPress's template-part wrapper, which is exactly as tall as the
   header, so `sticky` on .site-header itself never sticks. The wrapper is what sticks. */
.wp-site-blocks > .wp-block-template-part:has(> .site-header) { position: sticky; top: 0; z-index: var(--z-header); pointer-events: none; }
/* The wrapper stays in place when the phone header slides away; only the header takes taps, so the
   empty wrapper never covers the lifted "Na tej stronie" bar. */
.wp-site-blocks > .wp-block-template-part > * { pointer-events: auto; } /* header and the phone menu overlay */
.site-header { border-bottom: var(--bw-1) solid var(--color-border-strong); background: var(--paper); position: relative; transition: transform var(--dur-3) var(--ease); }
.site-header .container { display: flex; align-items: center; gap: var(--space-7); height: var(--h-header); }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); font-weight: var(--weight-bold); font-size: 1.5rem; letter-spacing: -0.01em; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo img { width: 32px; height: 32px; }
.nav { display: flex; gap: var(--space-6); margin-left: auto; font-size: var(--step-0); font-weight: var(--weight-medium); align-items: center; }
.nav a, .nav button { color: var(--ink); background: none; border: 0; font: inherit; cursor: pointer; padding: var(--space-2) 0; position: relative; }
.nav a:hover, .nav button:hover { color: var(--brand-text); text-decoration: none; }
.nav [aria-current="page"], .nav .is-current { font-weight: var(--weight-semibold); color: var(--brand-text); box-shadow: inset 0 calc(-1 * var(--bw-2)) 0 var(--brand-text); }
.nav .has-sub::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: var(--bw-mark) solid currentColor; border-bottom: var(--bw-mark) solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-1) var(--ease); }
.nav .has-sub[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
/* Without JavaScript .dropdown has no [hidden] and is a plain list under the "Usługi" item (B-02);
   header.js adds [hidden] and toggles it together with aria-expanded (desktop navigation only —
   .nav is hidden below 900 px anyway, the phone menu has its own list in .mobile-menu). */
.dropdown { position: absolute; left: 0; top: calc(100% + var(--space-2)); min-width: 18rem; background: var(--paper); border: var(--bw-1) solid var(--line-strong); box-shadow: var(--shadow-float); padding: var(--space-2) 0; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), display var(--dur-2) allow-discrete; }
/* Closed: transparent and slightly raised; opening and closing are smooth (opacity and transform only). */
.dropdown[hidden], html.js .dropdown:not(.is-open) { display: none; opacity: 0; transform: translateY(-6px); }
@starting-style { .dropdown.is-open, .dropdown:not([hidden]) { opacity: 0; transform: translateY(-6px); } }
.dropdown a { display: block; padding: var(--space-3) var(--space-5); color: var(--ink); font-weight: var(--weight-medium); }
.dropdown a:hover { background: var(--brand-wash); color: var(--brand-text); text-decoration: none; }
.dropdown a.sub { padding-left: var(--space-10); font-weight: var(--weight-regular); }
.dropdown a.sub::before { content: "— "; color: var(--color-text-label); }
.dropdown .all { border-top: var(--bw-1) solid var(--line); margin-top: var(--space-2); padding-top: var(--space-3); }
.nav-item { position: relative; }
.menu-btn { display: none; }
.only-phone { display: none; }
@media (max-width: 900px) { .only-desktop { display: none; } .only-phone { display: inline; } }
.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--brand); color: var(--on-brand); padding: var(--space-2) var(--space-4); z-index: var(--z-toast); }
.skip:focus { top: var(--space-2); }
/* The full menu needs about 1240 px; below that (tablets) the header shows the Menu button, so the
   menu never wraps onto two lines. Phone-only behaviour (smaller header, hide on scroll) stays at 900. */
@media (max-width: 1279px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header .btn { margin-left: auto; }
  .site-header .menu-btn { margin-left: 0; } /* also a .btn: only the first button takes the free space */
}
@media (max-width: 900px) {
  .site-header .container { gap: var(--space-3); height: var(--h-header-phone); }
  .logo { font-size: 1.3125rem; } .logo img { width: 28px; height: 28px; }
  .site-header.is-hidden { transform: translateY(-100%); }
  /* The "Na tej stronie" bar stuck under the header moves up together with it (transform only),
     so no empty gap is left once the header hides. header.js sets the class is-stuck. */
  .onpage.is-stuck.is-lifted { transform: translateY(calc(-1 * var(--h-header-phone))); }
}
/* Very narrow phones (≤ 359 px, e.g. 320 px): tighten the header row so nothing overflows —
   the "Menu" button keeps its accessible name but shows only the icon visually. */
@media (max-width: 359px) {
  .site-header .container { gap: var(--space-1); padding-inline: var(--space-2); }
  .site-header .btn--small { padding: 0 var(--space-2); }
  .menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Phones up to 430 px: the booking button never wraps; tighter button padding keeps the row on one
   line next to the logo and "Menu". */
@media (max-width: 430px) {
  .site-header .btn { white-space: nowrap; }
  .site-header .btn--small { padding-inline: var(--space-3); }
}
@media (max-height: 480px), (min-resolution: 2dppx) and (max-height: 700px) { .site-header { position: static; } }

/* phone menu — full-screen dialog */
.mobile-menu-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--paper); overflow-y: auto; display: none; opacity: 0; transform: translateY(-1rem); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease), display var(--dur-3) allow-discrete; overscroll-behavior: contain; }
.mobile-menu-overlay:not([hidden]) { display: block; opacity: 1; transform: none; }
@starting-style { .mobile-menu-overlay:not([hidden]) { opacity: 0; transform: translateY(-1rem); } }
.mobile-menu-overlay .mm-head { display: flex; align-items: center; justify-content: space-between; height: var(--h-header-phone); padding-inline: var(--gutter); border-bottom: var(--bw-1) solid var(--line-strong); }
.mobile-menu-overlay .mm-head .logo { font-size: 1.3125rem; }
.mobile-menu-overlay .mm-head .logo img { width: 28px; height: 28px; }
.menu-btn .ico, .mm-close .ico { display: inline-block; }
.menu-btn .x { display: none; }
.menu-btn.is-open .ico:not(.x) { display: none; }
.menu-btn.is-open .x { display: inline-block; }
.mobile-menu ul { list-style: none; margin: 0; padding: var(--space-2) 0; }
.mobile-menu li a, .mobile-menu li button { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; padding: 0 var(--gutter); color: var(--ink); font: var(--weight-medium) var(--step-1) var(--font-sans); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.mobile-menu li a[aria-current="page"] { font-weight: var(--weight-semibold); color: var(--brand-text); box-shadow: inset var(--bw-4) 0 0 var(--brand-text); }
.mm-group-label { display: flex; align-items: center; min-height: 3rem; padding: 0 var(--gutter); color: var(--ink); font: var(--weight-semibold) var(--step-1) var(--font-sans); }
.mm-group-label[aria-current="page"] { color: var(--brand-text); box-shadow: inset var(--bw-4) 0 0 var(--brand-text); }
.mobile-menu li ul { padding: 0 0 var(--space-2); }
.mobile-menu li ul a { padding-left: var(--space-8); font-weight: var(--weight-regular); min-height: 2.75rem; }
.mobile-menu li ul a.sub { padding-left: var(--space-12); }
.mobile-menu .meta { padding: var(--gutter); border-top: var(--bw-1) solid var(--line); color: var(--color-text-muted); font-size: var(--step--1); display: grid; gap: var(--space-1); }
.menu-btn .x { display: none; } .menu-btn.is-open .ico { display: none; } .menu-btn.is-open .x { display: inline; }

/* ==========================================================================
   06 · Form
   ========================================================================== */
.form { max-width: var(--w-form); display: grid; gap: var(--space-6); }
.field { display: grid; gap: var(--space-2); }
.field label, .field legend { font-weight: var(--weight-semibold); padding: 0; }
.field .hint { font-size: var(--step--1); color: var(--color-text-muted); margin-top: calc(-1 * var(--space-1)); }
.field .opt { font-weight: var(--weight-regular); color: var(--color-text-label); }
.input, select.input, textarea.input {
  width: 100%; min-height: var(--h-control); padding: 0 var(--space-4); border: var(--bw-1) solid var(--field-border); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: var(--weight-regular) var(--step-0) / var(--lh-body) var(--font-sans);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
textarea.input { padding-block: var(--space-3); min-height: 8rem; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-10); }
.input:hover { border-color: var(--ink); }
.input:focus-visible, .input.is-focus { outline: var(--bw-2) solid var(--color-focus-ring); outline-offset: 0; border-color: var(--color-focus-ring); }
.input.is-filled { border-color: var(--ink); }
.field.is-error .input { border: var(--bw-2) solid var(--error); }
.field.is-error label { color: var(--error); }
.field.is-success .input { border-color: var(--success); }
.input[disabled], .input.is-disabled { background: var(--paper-2); border-color: var(--line); color: var(--color-text-muted); cursor: not-allowed; }
.msg { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--step--1); font-weight: var(--weight-semibold); line-height: var(--lh-small); }
.msg svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.msg--error { color: var(--error); }
.msg--success { color: var(--success); }
.check, .radio { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; font-weight: var(--weight-regular); cursor: pointer; }
.check input, .radio input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand); }
.error-summary { border: var(--bw-2) solid var(--error); border-left-width: var(--bw-4); padding: var(--space-4) var(--space-5); background: var(--error-bg); display: grid; gap: var(--space-2); }
.error-summary h3 { font-size: var(--step-2); color: var(--error); }
.error-summary a { color: var(--error); font-weight: var(--weight-semibold); }
.form .privacy { font-size: var(--step--1); color: var(--color-text-muted); }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.honeypot-field, .ir-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   07 · Call booking (classes shared with initace-booking)
   ========================================================================== */
.steps { display: grid; gap: var(--space-2); }
.steps .bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1); }
.steps .bars i { height: 4px; background: var(--line); display: block; }
.steps .bars i.done { background: var(--ink); }
.steps .bars i.now { background: var(--brand); }
.cal { display: grid; gap: var(--space-4); max-width: 34rem; }
.cal .head { display: flex; justify-content: space-between; align-items: baseline; }
.cal .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.cal .dow { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-text-label); text-align: center; padding-bottom: var(--space-1); }
.day, .hour {
  min-height: var(--touch-min); border: var(--bw-1) solid var(--line); background: var(--paper); color: var(--ink);
  font: var(--weight-medium) var(--step-0) var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; display: grid; place-items: center; gap: 0; position: relative; padding: var(--space-1);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.day:hover, .hour:hover, .day.is-hover, .hour.is-hover { background: var(--brand-wash); border-color: var(--brand-text); }
.day[aria-pressed="true"], .hour[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: var(--weight-semibold); }
.day[aria-pressed="true"]::after, .hour[aria-pressed="true"]::after { content: "✓"; font-size: var(--step--2); line-height: 1; }
.day[aria-disabled="true"], .hour[aria-disabled="true"] { cursor: not-allowed; color: var(--color-text-label); border-color: var(--line); background-color: var(--paper-2); background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 7px); }
.day[aria-disabled="true"] small, .hour[aria-disabled="true"] small { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; }
.day.is-today::before { content: ""; position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; background: var(--color-mark); }
.day.is-weekend { visibility: hidden; }
.hours { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); max-width: 22rem; }
.quick { border: var(--bw-1) solid var(--line-strong); padding: var(--space-5); display: grid; gap: var(--space-4); max-width: 28rem; background: var(--paper); }
.quick fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.quick .days { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.chip-radio span { display: grid; place-items: center; min-height: var(--touch-min); border: var(--bw-1) solid var(--line); font-size: var(--step--1); font-weight: var(--weight-medium); text-align: center; padding: var(--space-1); }
.chip-radio input:checked + span { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: var(--weight-semibold); }
.chip-radio input:focus-visible + span { outline: var(--bw-2) solid var(--color-focus-ring); outline-offset: 2px; }
.chip-radio:hover span { background: var(--brand-wash); }
.chip-radio input:checked:hover + span { background: var(--brand-hover); }

/* ==========================================================================
   08 · Price list
   ========================================================================== */
.spec { list-style: none; margin: 0; padding: 0; border-top: var(--bw-1) solid var(--line-strong); }
.spec li { display: grid; grid-template-columns: 64px 1.35fr 1.4fr 340px; gap: var(--space-7); align-items: start; padding: var(--space-7) 0; border-bottom: var(--bw-1) solid var(--line); }
.spec li:last-child { border-bottom: var(--bw-1) solid var(--line-strong); }
.spec .pos { font: var(--weight-medium) var(--step--1) / 1 var(--font-mono); color: var(--color-mark); padding-top: 9px; letter-spacing: var(--tracking-label); }
.spec .desc { color: var(--color-text-muted); padding-top: 6px; }
.spec .desc a { display: inline-block; margin-top: var(--space-2); font-weight: var(--weight-semibold); }
.spec .price { text-align: right; }
.price-big { display: block; font-size: var(--step-price); font-weight: var(--weight-semibold); letter-spacing: -0.015em; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-big + .price-big { margin-top: var(--space-2); }
.price-sub { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font: var(--weight-medium) var(--step--2) / var(--lh-label) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.plat { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); margin-right: var(--space-2); vertical-align: 2px; }
.plat--woo { background: var(--plat-woo); } .plat--ps { background: var(--plat-ps); }
@media (max-width: 1100px) { .spec li { grid-template-columns: 56px 1fr 240px; } .spec .desc { grid-column: 2; } .spec .price { grid-column: 3; grid-row: 1 / span 2; } }
@media (max-width: 640px) { .spec li { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5) 0; } .spec .desc, .spec .price { grid-column: 1; grid-row: auto; } .spec .pos { padding-top: 0; } .spec .price { text-align: left; border-top: var(--bw-1) dashed var(--line); padding-top: var(--space-3); } .price-big { white-space: normal; } }

.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); align-items: stretch; }
.pkg { border: var(--bw-1) solid var(--line); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); background: var(--paper); position: relative; }
.pkg.is-recommended { border: var(--bw-2) solid var(--brand); }
.pkg .tag { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-6); }
.tag { display: inline-block; font: var(--weight-semibold) var(--step--2) / 1 var(--font-mono); letter-spacing: var(--tracking-stamp); text-transform: uppercase; color: var(--on-brand); background: var(--brand); padding: 8px 10px; }
.tag--outline { background: var(--paper); color: var(--ink); border: var(--bw-1) solid var(--ink); }
.pkg h3 { font-size: var(--step-2); }
.pkg .price-big { font-size: var(--step-3); }
.pkg ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); color: var(--color-text-muted); }
.pkg ul li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-2); }
.pkg ul li::before { content: "✓"; color: var(--ink); font-weight: var(--weight-semibold); }
.pkg ul li.no { color: var(--color-text-label); } .pkg ul li.no::before { content: "—"; color: var(--color-text-label); }
.pkg .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 900px) { .packages { grid-template-columns: 1fr; } }

.table-wrap { overflow-x: auto; border-top: var(--bw-1) solid var(--line-strong); border-bottom: var(--bw-1) solid var(--line-strong); }
.table-wrap table, table.table--data, table.table--compare { border-collapse: collapse; width: 100%; font-size: var(--step-0); }
.table-wrap th, .table-wrap td, table.table--data th, table.table--data td, table.table--compare th, table.table--compare td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--bw-1) solid var(--line); vertical-align: top; }
.table-wrap th, table.table--data th, table.table--compare th { font: var(--weight-medium) var(--step--2) / var(--lh-label) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-label); }
.table-wrap thead th { position: sticky; top: 0; background: var(--paper); border-bottom: var(--bw-1) solid var(--line-strong); }
.table-wrap tbody th { font-family: var(--font-sans); font-size: var(--step-0); font-weight: var(--weight-medium); text-transform: none; letter-spacing: 0; color: var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap tbody tr:hover { background: var(--paper-2); }
tr.differs { background: var(--brand-wash); }
tr.differs th::after { content: "różni się"; display: block; font: var(--weight-medium) 0.6875rem / 1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-mark); }
.table--data tbody tr:nth-child(even) { background: var(--paper-2); }
.pkg-compare__chooser { display: none; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (max-width: 640px) {
  .pkg-compare__chooser { display: flex; flex-wrap: wrap; }
  .pkg-compare__chooser label { display: grid; gap: var(--space-1); flex: 1 1 10rem; }
  td.is-phone-hidden, th.is-phone-hidden { display: none; }
}
.care { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.care .pkg .prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); border-top: var(--bw-1) solid var(--line); padding-top: var(--space-3); }
.care .price-big { font-size: var(--step-2); }
@media (max-width: 900px) { .care { grid-template-columns: 1fr; } }

/* ==========================================================================
   Opening section (S-02, U-01, D-01, G-01): two columns — text / drawing.
   Class and values 1:1 from the approved concept (git history: design/concept-a/concept-akcent.html) `.hero`.
   ========================================================================== */
.hero-split { display: grid; grid-template-columns: 4fr 7fr; gap: var(--space-14); align-items: start; }
.hero-split .hero-figure { margin: 0; }
/* Vertical rhythm inside the hero text column (concept-akcent.html `.hero h1/.lead/.actions/.proof`):
   the column is a hand-written `<div>`, not a `core/group`, so it never gets WordPress's automatic
   `is-layout-flow` block gap — every step is spelled out here instead (2026-09-29 fix). */
.hero-split h1 { margin-top: 22px; }
.hero-split .lead { margin-top: 22px; }
.hero-split .hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 1100px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-10); }
  /* Stacked, the drawing of a demo site (another brand) landed right under our own call to action
     and pulled the first screen away from Initace; the demos have their own section further down. */
  .hero-split .hero-figure { display: none; }
}
.proof-line { display: flex; flex-wrap: wrap; gap: var(--space-2) 0; margin-top: 26px; padding-top: 18px; border-top: var(--bw-1) solid var(--line); color: var(--color-text-muted); }
.proof-line span { white-space: nowrap; }
.proof-line span:not(:last-child)::after { content: "·"; margin: 0 var(--space-3); color: var(--color-mark); }
@media (max-width: 640px) { .proof-line { display: block; font-size: var(--step--2); } .proof-line span { display: block; padding: 3px 0; white-space: normal; } .proof-line span::after { content: none !important; } }

/* ==========================================================================
   09 · Views and drawing
   ========================================================================== */
.views { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid-y) var(--gap-grid); }
.view { position: relative; }
.view .vlabel { display: flex; justify-content: space-between; align-items: baseline; color: var(--color-text-label); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.view .frame { position: relative; border: var(--bw-1) solid var(--line-strong); background: var(--screen); aspect-ratio: 16 / 10; overflow: hidden; }
.view .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; transition: transform var(--dur-3) var(--ease); }
.view:hover .frame img { transform: translateY(-6%); }
@media (prefers-reduced-motion: reduce) { .view:hover .frame img { transform: none; } }
.view .frame::before, .view .frame::after { content: ""; position: absolute; width: var(--corner-mark); height: var(--corner-mark); border: var(--bw-1) solid var(--color-mark); pointer-events: none; z-index: 2; }
.view .frame::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.view .frame::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.stamp { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 2; padding: 5px 8px; border: var(--bw-mark) solid var(--color-mark); background: var(--paper); color: var(--color-mark); font: var(--weight-semibold) 0.6875rem / 1 var(--font-mono); letter-spacing: var(--tracking-stamp); text-transform: uppercase; transform: rotate(-3deg); }
.stamp--static { position: static; display: inline-block; }
.view h3 { font-size: var(--step-2); margin-top: var(--space-4); }
.view:hover h3 { color: var(--brand-text); }
.view p { color: var(--color-text-muted); font-size: var(--step--1); margin-top: var(--space-2); }
/* One demo (e.g. on a service page): screenshot left, text right. */
@media (min-width: 901px) {
  .views--single { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .views--single .view { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: auto auto auto 1fr; column-gap: var(--gap-grid); align-content: start; }
  .views--single .view > * { grid-column: 2; }
  .views--single .view .frame { grid-column: 1; grid-row: 1 / -1; }
  .views--single .view .vlabel { margin-top: 0; }
  .views--single .view h3 { margin-top: var(--space-2); }
  .views--single .view p { font-size: var(--step-0); }
}
.view .links { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-weight: var(--weight-semibold); font-size: var(--step--1); position: relative; z-index: 2; }
.view .links a + a::before { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--line); margin-right: var(--space-4); vertical-align: -1px; }
.view h3 .cover { text-decoration: none; color: inherit; }
.view h3 .cover::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.view.is-text .frame { display: grid; place-items: center; color: var(--paper); background: var(--ink); font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: var(--tracking-label); }
@media (max-width: 1100px) { .views { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .views { grid-template-columns: 1fr; } }

.drawing { position: relative; width: 100%; aspect-ratio: 720 / 600; }
.drawing .shot { position: absolute; left: 5.556%; top: 9.333%; width: 83.333%; height: 62.5%; border: var(--bw-1) solid var(--line-strong); background: var(--screen); overflow: hidden; z-index: 1; }
.drawing .shot-phone { position: absolute; left: 77.778%; top: 50%; width: 16.667%; height: 43.333%; border: var(--bw-mark) solid var(--line-strong); background: var(--screen); overflow: hidden; z-index: 1; box-shadow: var(--shadow-halo); }
.drawing img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.drawing svg.marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.drawing svg .dim { stroke: var(--color-mark); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.drawing svg .leader-halo { stroke: var(--paper); stroke-width: 4; fill: none; vector-effect: non-scaling-stroke; }
.drawing svg .leader { stroke: var(--color-mark); stroke-width: 1.25; fill: none; vector-effect: non-scaling-stroke; }
.drawing svg .leader-dot { fill: var(--color-mark); stroke: var(--paper); stroke-width: 1.5; }
.drawing svg text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; fill: var(--color-mark); text-transform: uppercase; }
.drawing svg .hatch-fill { fill: url(#initace-hatch); }
.drawing svg .white { fill: var(--paper); }
.balloon { position: absolute; z-index: 3; width: var(--balloon); height: var(--balloon); margin: -15px 0 0 -15px; border-radius: var(--radius-full); border: var(--bw-mark) solid var(--color-mark); background: var(--paper); color: var(--color-mark); font: var(--weight-semibold) 13px / 27px var(--font-mono); text-align: center; cursor: default; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.balloon:hover, .balloon:focus-visible, .balloon.is-hover { background: var(--color-mark); color: var(--paper); transform: scale(1.12); }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-5); margin-top: var(--space-2); }
.legend ol { list-style: none; margin: 0; padding: 0; display: contents; }
.legend li { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--step--1); line-height: 1.35; color: var(--color-text-muted); }
.n { flex: none; font: var(--weight-semibold) 12px / 22px var(--font-mono); width: 22px; height: 22px; text-align: center; border: var(--bw-1) solid var(--color-mark); border-radius: var(--radius-full); color: var(--color-mark); display: inline-block; }
.fig { margin-top: var(--space-2); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; }
.fig b { color: var(--ink); font-weight: var(--weight-semibold); }
.title-block { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; margin-top: var(--space-3); border: var(--bw-1) solid var(--line-strong); }
.title-block div { padding: 8px 12px 9px; border-left: var(--bw-1) solid var(--line-strong); min-width: 0; }
.title-block div:first-child { border-left: 0; }
.title-block .l { display: block; font: var(--weight-medium) 0.65625rem / 1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-label); }
.title-block .v { display: block; font-size: var(--step--1); font-weight: var(--weight-semibold); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  /* drawing.js adds .is-visible when the section scrolls into view (IntersectionObserver);
     without JavaScript the rule below shows the final state at once (nothing is hidden, WCAG 2.3.3/2.2.2). */
  .drawing.is-visible svg .dim, .drawing.is-visible svg .leader { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: initace-draw var(--dur-draw) var(--ease-out) forwards; }
  .drawing.is-visible svg .leader { animation-delay: 500ms; }
  .drawing.is-visible .balloon { opacity: 0; animation: initace-pop var(--dur-3) var(--ease-out) forwards; animation-delay: 1100ms; }
  @keyframes initace-draw { to { stroke-dashoffset: 0; } }
  @keyframes initace-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
}
.no-js .drawing svg .dim, .no-js .drawing svg .leader, .no-js .balloon { opacity: 1; stroke-dashoffset: 0; }
@media (max-width: 640px) { .legend { grid-template-columns: 1fr; } .title-block { grid-template-columns: 1fr 1fr; } .title-block div:nth-child(3) { border-left: 0; } .title-block div:nth-child(n+3) { border-top: var(--bw-1) solid var(--line-strong); } .title-block div:nth-child(5) { border-left: 0; grid-column: 1 / -1; } .drawing .shot-phone, .drawing svg.marks, .drawing .balloon { display: none; } .drawing { aspect-ratio: 360/256; } .drawing .shot { left: 0; top: 12%; width: 100%; height: 88%; } }

/* ==========================================================================
   10 · Cards, person, frames, tiles
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-grid); }
.card { border: var(--bw-1) solid var(--line); padding: var(--space-6); background: var(--paper); display: grid; gap: var(--space-3); align-content: start; }
.card h3, .card h4 { font-size: var(--step-2); }
.card p { color: var(--color-text-muted); }
.card .meta { color: var(--color-text-label); }
.card--link { border-color: var(--line-strong); position: relative; transition: box-shadow var(--dur-1) var(--ease); }
.card--link:hover, .card--link.is-hover { box-shadow: var(--shadow-hard); }
.card--link:hover h3, .card--link.is-hover h3 { color: var(--brand-text); }
.card--link .cover { position: absolute; inset: 0; z-index: 1; }
.card--link h3, .card--link .links, .card--link .btn { position: relative; z-index: 2; }
.card--quiet { border-color: var(--line); background: var(--paper-2); }
.card--fact { border: var(--bw-1) solid var(--line-strong); padding-top: var(--space-8); position: relative; }
.card--fact .tag { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-6); }
.card--fact .big { font-size: var(--step-3); font-weight: var(--weight-semibold); letter-spacing: -0.012em; line-height: 1.15; }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); border: var(--bw-1) solid var(--line-strong); padding: 4px 8px; font: var(--weight-medium) var(--step--2) / 1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--paper); text-decoration: none; }
.chip:hover { background: var(--brand-wash); color: var(--brand-text); text-decoration: none; }
.chip i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); }
.person { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-8); align-items: start; }
.photo-slot { aspect-ratio: 3 / 4; border: var(--bw-1) solid var(--line-strong); background-color: var(--paper-2); background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 8px); display: grid; place-items: end start; padding: var(--space-3); }
.photo-slot span { font: var(--weight-medium) 0.6875rem / 1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-label); background: var(--paper); padding: 4px 6px; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.person .role { color: var(--color-text-label); font-weight: var(--weight-medium); }
.person p { margin-top: var(--space-3); color: var(--color-text-muted); max-width: var(--measure); }
@media (max-width: 640px) { .person { grid-template-columns: 1fr; } .photo-slot { max-width: 240px; } }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: var(--bw-1) solid var(--line-strong); border-bottom: var(--bw-1) solid var(--line-strong); }
.facts div { padding: var(--space-5) var(--space-5) var(--space-5) 0; border-left: var(--bw-1) solid var(--line); padding-left: var(--space-5); min-width: 0; }
.facts div:first-child { border-left: 0; padding-left: 0; }
.facts .v { display: block; font-size: var(--step-3); font-weight: var(--weight-semibold); letter-spacing: -0.012em; line-height: 1.15; margin-top: var(--space-1); }
.facts .src { grid-column: 1 / -1; border: 0; padding: var(--space-2) 0 0; color: var(--color-text-label); }
/* Grid items default to `min-width: auto`, so a long unbreakable value (a link, a price sentence)
   forces its track wider than the fr split and overflows the viewport — this is what caused the
   320 px horizontal scroll on feature pages via `dl.facts.if-facts` (initace-features's 5-item facts
   block, QA 2026-09-29). `min-width: 0` above lets the track shrink; wrapping below is the second
   half of the fix, since neither `<dt>`/`<dd>` nor `initace_facts()` values are guaranteed short. */
.facts dt, .facts dd, .facts .v { overflow-wrap: anywhere; }
.facts dd { margin: 0; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } .facts div:nth-child(3) { border-left: 0; padding-left: 0; } .facts div:nth-child(n+3) { border-top: var(--bw-1) solid var(--line); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } .facts div { border-left: 0; padding-left: 0; } .facts div:not(:first-child) { border-top: var(--bw-1) solid var(--line); } }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-4); padding-bottom: var(--space-8); position: relative; }
.timeline li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .n { width: 30px; height: 30px; line-height: 27px; font-size: 13px; border-width: var(--bw-mark); }
.timeline h3 { font-size: var(--step-2); }
.timeline dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; color: var(--color-text-muted); }
.timeline dt { font-weight: var(--weight-semibold); color: var(--ink); }
.timeline dd { margin: 0; }
.stages-full { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap-grid); align-items: start; }
.stages-panel { position: sticky; top: calc(var(--h-header) + var(--space-6)); display: grid; }
.stages-panel__image { grid-area: 1 / 1; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.stages-panel__image.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stages-panel__image { transition: none; } }
@media (max-width: 1023px) {
  .stages-full { grid-template-columns: 1fr; }
  .stages-panel { position: static; display: grid; gap: var(--space-6); }
  .stages-panel__image { grid-area: auto; opacity: 1; }
}
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
.bento .card:first-child { grid-column: span 2; grid-row: span 2; border-color: var(--line-strong); }
.bento .card .v { font-size: var(--step-3); font-weight: var(--weight-semibold); letter-spacing: -0.012em; line-height: 1.15; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bento .card:first-child { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 480px) { .bento { grid-template-columns: 1fr; } }
.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); max-width: var(--measure); }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--color-mark); font-weight: var(--weight-semibold); }
.check-list b { font-weight: var(--weight-semibold); }

/* ==========================================================================
   11 · Knowledge base, questions, orientation
   ========================================================================== */
/* Knowledge-base cards: a 3 / 2 / 1 grid, cards of equal height (image, date, title, description). The same pattern
   for the "Z bazy wiedzy" block (.kb-list) and the archive (.initace-kb-query, core wp:query classes). */
.kb-list, .initace-kb-query .wp-block-post-template { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid-y) var(--gap-grid); }
.initace-kb-query .wp-block-post-template { margin-top: var(--space-8); }
.kb-list > li, .initace-kb-query .wp-block-post-template > li {
  display: flex; flex-direction: column; gap: var(--space-2); position: relative; min-width: 0;
  border: var(--bw-1) solid var(--line-strong); background: var(--paper); padding: 0 0 var(--space-6); margin: 0;
  transition: box-shadow var(--dur-1) var(--ease);
}
.kb-list > li:hover, .initace-kb-query .wp-block-post-template > li:hover { box-shadow: var(--shadow-hard); }
.kb-list .thumb, .initace-kb-query .wp-block-post-featured-image {
  order: -1; aspect-ratio: 16 / 10; width: 100%; height: auto; margin: 0 0 var(--space-3); overflow: hidden;
  border: 0; border-bottom: var(--bw-1) solid var(--line-strong); background: var(--screen);
}
.kb-list .thumb img, .initace-kb-query .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.kb-list .date, .initace-kb-query .wp-block-post-date { padding-inline: var(--space-6); color: var(--color-text-label); font-weight: var(--weight-medium); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: var(--tracking-label); text-transform: uppercase; margin: 0; }
.kb-list h3, .initace-kb-query .wp-block-post-title { padding-inline: var(--space-6); font-size: var(--step-2); margin: 0; }
.kb-list p, .initace-kb-query .wp-block-post-excerpt { padding-inline: var(--space-6); color: var(--color-text-muted); margin: 0; font-size: var(--step--1); }
.initace-kb-query .wp-block-post-excerpt p { padding: 0; }
.initace-kb-query .wp-block-post-excerpt__more-link { display: none; }
.kb-list h3 a, .initace-kb-query .wp-block-post-title a { text-decoration: none; color: var(--ink); }
.kb-list h3 a::after, .initace-kb-query .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kb-list li:hover h3 a, .initace-kb-query .wp-block-post-title a:hover { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 2px; }
.initace-kb-query .wp-block-query-pagination { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-8); font-weight: var(--weight-medium); }
.initace-kb-query .wp-block-query-pagination .current { color: var(--brand-text); font-weight: var(--weight-semibold); }
@media (max-width: 1099px) { .kb-list, .initace-kb-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kb-list, .initace-kb-query .wp-block-post-template { grid-template-columns: minmax(0, 1fr); } }

.article-head { display: grid; gap: var(--space-4); max-width: var(--w-prose); }
.byline { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: center; color: var(--color-text-muted); font-size: var(--step--1); }
.byline .avatar { width: 40px; height: 40px; border: var(--bw-1) solid var(--line-strong); background-image: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 6px); }
.byline b { color: var(--ink); font-weight: var(--weight-semibold); }
.byline time { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.02em; }
.toc { border-left: var(--bw-1) solid var(--line-strong); padding-left: var(--space-5); display: grid; gap: var(--space-2); max-width: 24rem; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.toc a { text-decoration: none; color: var(--ink); }
.toc a:hover { color: var(--brand-text); text-decoration: underline; }
.toc a.is-current { color: var(--brand-text); font-weight: var(--weight-semibold); }
.author-box { border-top: var(--bw-1) solid var(--line-strong); border-bottom: var(--bw-1) solid var(--line); padding: var(--space-6) 0; display: grid; grid-template-columns: 96px 1fr; gap: var(--space-5); max-width: var(--w-prose); }
.author-box .photo-slot { aspect-ratio: 1; padding: var(--space-1); }
.author-box .photo-slot span { font-size: 0.5625rem; padding: 2px 4px; }
.author-box p { color: var(--color-text-muted); margin-top: var(--space-2); }

.faq { border-top: var(--bw-1) solid var(--line-strong); max-width: var(--w-content); }
.faq details { border-bottom: var(--bw-1) solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: var(--space-4); align-items: center; padding: var(--space-5) 0; font-size: var(--step-2); font-weight: var(--weight-semibold); line-height: var(--lh-sub); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border-right: var(--bw-mark) solid var(--ink); border-bottom: var(--bw-mark) solid var(--ink); transform: translateY(-3px) rotate(45deg); justify-self: center; transition: transform var(--dur-2) var(--ease); }
.faq details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.faq summary:hover { color: var(--brand-text); }
.faq summary:focus-visible { outline-offset: -2px; }
.faq summary { border-bottom: var(--bw-1) dashed transparent; transition: border-color var(--dur-2) var(--ease), color var(--dur-1) var(--ease); }
.faq details[open] summary { border-bottom-color: var(--line); }
/* The only permitted height transition: the answer unfolds smoothly from 0 to the content height
   (interpolate-size + ::details-content). Older browsers open without animation. */
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .body { padding: var(--space-4) 0 var(--space-6); color: var(--color-text-muted); max-width: var(--measure); }
.faq h3 { font-size: inherit; font-weight: inherit; display: contents; }
/* JavaScript off: all questions open (design/build-plan.md §3.3) */
.no-js .faq details { }
html:not(.js) .faq details > summary::after { display: none; }

.crumbs { font-size: var(--step--1); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; padding: 0; margin: 0; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-text); text-decoration: underline; }
.crumbs li { display: contents; }
.crumbs li + li::before { content: "›"; color: var(--color-text-label); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: var(--weight-medium); }
.crumbs--phone { display: none; }
.crumbs--phone a::before { content: "‹ "; }
@media (max-width: 640px) { .crumbs--desktop { display: none; } .crumbs--phone { display: flex; } }
.onpage { border-top: var(--bw-1) solid var(--line-strong); border-bottom: var(--bw-1) solid var(--line-strong); background: var(--paper); position: sticky; top: var(--h-header); z-index: var(--z-sticky); transition: transform var(--dur-3) var(--ease); }
.onpage ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); overflow-x: auto; scrollbar-width: none; }
.onpage li { flex: none; }
.onpage a { display: block; padding: var(--space-3) 0; color: var(--ink); font-weight: var(--weight-medium); text-decoration: none; border-bottom: var(--bw-2) solid transparent; font-size: var(--step--1); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.onpage a:hover { color: var(--brand-text); }
.onpage a.is-current { color: var(--brand-text); border-bottom-color: var(--brand-text); }
.onpage .container { padding-inline: var(--gutter); }
.onpage--static { position: static; }
/* Compact mode (on-this-page.js adds .is-compact when the row does not fit): one button naming the
   current section; the full list folds out under it. Without JS the row above stays scrollable. */
.onpage__toggle { display: none; }
.onpage.is-compact .onpage__toggle { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label count" "current count"; align-items: center; column-gap: var(--space-4); width: 100%; min-height: 3.5rem; padding: var(--space-2) 0; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.onpage__label { grid-area: label; font-size: var(--step--2); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.onpage__current { grid-area: current; font-weight: var(--weight-semibold); color: var(--brand-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onpage__count { grid-area: count; display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--color-text-muted); }
.onpage__count::after { content: ""; width: 8px; height: 8px; border-right: var(--bw-mark) solid var(--ink); border-bottom: var(--bw-mark) solid var(--ink); transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-1) var(--ease); }
.onpage__toggle[aria-expanded="true"] .onpage__count::after { transform: translateY(2px) rotate(-135deg); }
.onpage__toggle:focus-visible { outline: var(--bw-2) solid var(--brand-text); outline-offset: 2px; }
.onpage.is-compact ul { display: none; }
.onpage.is-compact.is-open ul { display: block; border-top: var(--bw-1) solid var(--line); padding-block: var(--space-2); max-height: calc(100dvh - var(--h-header) - 5rem); overflow-y: auto; }
.onpage.is-compact a { padding: var(--space-3) 0; border-bottom: 0; font-size: var(--step-0); min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; }
.onpage.is-compact a.is-current { color: var(--brand-text); }
.onpage.is-compact a.is-current::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-text); }
@media (prefers-reduced-motion: reduce) { .onpage__count::after { transition: none; } }
@media (max-width: 900px) { .onpage { top: var(--h-header-phone); } }
@media (max-height: 480px) { .onpage { position: static; } }

/* ==========================================================================
   13 · Notice frames, cookies
   ========================================================================== */
.notice { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: var(--bw-1) solid var(--line); border-left: var(--bw-4) solid var(--ink); background: var(--paper-2); max-width: var(--w-prose); }
.notice svg { width: 24px; height: 24px; }
.notice b { display: block; font-weight: var(--weight-semibold); }
.notice p { color: var(--color-text-muted); }
.notice--info { border-left-color: var(--info); background: var(--info-bg); border-color: var(--brand-wash-2); } .notice--info svg { color: var(--info); }
.notice--success { border-left-color: var(--success); background: var(--success-bg); } .notice--success svg, .notice--success b { color: var(--success); }
.notice--warning { border-left-color: var(--warning); background: var(--warning-bg); } .notice--warning svg, .notice--warning b { color: var(--warning); }
.notice--error { border-left-color: var(--error); background: var(--error-bg); } .notice--error svg, .notice--error b { color: var(--error); }
.note-box { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; padding: var(--space-4) var(--space-5); border: var(--bw-1) solid var(--brand-text); background: var(--paper); }
.note-box .tag { justify-self: start; }
.note-box b { font-weight: var(--weight-semibold); }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-toast); border-top: var(--bw-1) solid var(--line-strong); background: var(--paper); box-shadow: var(--shadow-float); max-height: 30vh; overflow-y: auto; }
.cookie .container { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; padding-block: var(--space-3); }
.cookie p { flex: 1 1 24rem; font-size: var(--step--1); color: var(--color-text-muted); }
.cookie .actions { display: flex; gap: var(--space-2); }
@media (max-width: 640px) { .note-box { grid-template-columns: 1fr; gap: var(--space-3); } }

/* Complianz cookie banner (build-plan.md §3.3): re-skinned as sheet-13's bottom bar with our
   tokens — never a centred overlay. The plugin already renders it bottom-anchored with no
   backdrop (class .cmplz-bottom, no .cmplz-overlay in the markup); this only restyles colour,
   type and the two equal-weight buttons. Text ("Akceptuję"/"Odmów") is Complianz's own setting,
   not theme content. */
#cmplz-cookiebanner-container { position: fixed; inset: auto 0 0 0; z-index: var(--z-toast); }
.cmplz-cookiebanner { position: static !important; max-width: none !important; width: 100% !important; margin: 0 !important; transform: none !important;
  background: var(--paper) !important; border-top: var(--bw-1) solid var(--line-strong) !important; border-radius: 0 !important; /* full-width bar */
  box-shadow: var(--shadow-float) !important; padding: var(--space-2) var(--gutter) !important; font-family: var(--font-sans) !important; color: var(--ink) !important;
  max-height: 30vh; overflow-y: auto;
  flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6);
  opacity: 1; translate: none; transition: opacity var(--dur-3) var(--ease), translate var(--dur-3) var(--ease), display var(--dur-3) allow-discrete; }
.cmplz-cookiebanner:not(.cmplz-hidden):not(.cmplz-dismissed) { display: flex !important; }
@starting-style { .cmplz-cookiebanner:not(.cmplz-hidden):not(.cmplz-dismissed) { opacity: 0; translate: 0 100%; } }
/* Keep the whole bar shorter than the shortest primary CTA can sit from the viewport bottom (QA
   2026-09-29: it covered the hero's "Umów rozmowę" button, at 1440 px as well as 375 px) — one
   truncated line for the message rather than the two- or three-line wrap the full sentence took,
   the two buttons never wrap under it. Full text stays in the DOM for assistive tech and is one
   tap away via "Polityka plików cookies" in the footer. */
@media (min-width: 641px) {
  .cmplz-cookiebanner { flex-wrap: nowrap !important; }
  .cmplz-cookiebanner .cmplz-message { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Complianz's own stylesheet sets `.cmplz-buttons .cmplz-btn{width:100%}` unconditionally (built
     for its default stacked-modal layout) — at any width that forces the two buttons onto their
     own row each, doubling the bar's height. Only the phone rule further down should make them
     full width. */
  .cmplz-cookiebanner .cmplz-buttons { flex-wrap: nowrap !important; }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { width: auto !important; flex: 0 0 auto; }
}
/* Complianz toggles these two classes to hide the banner (before JS decides to show it, and after
   Accept/Deny); a plain `display:flex !important` above would otherwise always win over the
   plugin's own non-important `.cmplz-dismissed{display:none}` rule regardless of selector
   specificity, since !important beats specificity — the banner never disappeared (QA 2026-09-29).
   A more specific selector at the same !important weight wins instead. */
.cmplz-cookiebanner.cmplz-hidden, .cmplz-cookiebanner.cmplz-dismissed { display: none; opacity: 0; translate: 0 100%; }
/* compact single bar: logo/title/close/info-links hidden (the two buttons already dismiss it),
   message and buttons share one row on desktop, stack on phone (design-system.md §6 "Pasek
   ciasteczek": stuck to the bottom, two equal-weight buttons). Complianz renders `.cmplz-body`
   and `.cmplz-buttons` as siblings, both direct children of the banner — the banner itself is
   the flex row. */
.cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-links.cmplz-information { display: none !important; }
/* the granular category list only makes sense in the full preferences view, not the compact bar. */
.cmplz-cookiebanner .cmplz-categories { display: none !important; }
.cmplz-cookiebanner .cmplz-body { flex: 1 1 24rem; min-width: 0; margin: 0; }
.cmplz-cookiebanner .cmplz-message { margin: 0; }
.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-message p { font-size: var(--step--1); color: var(--color-text-muted); margin: 0; }
.cmplz-cookiebanner .cmplz-buttons { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.cmplz-cookiebanner .cmplz-btn { font: var(--weight-semibold) var(--step--1) / 1 var(--font-sans) !important; min-height: var(--h-control-sm); padding: 0 var(--space-4) !important;
  border-radius: var(--radius) !important; cursor: pointer; white-space: nowrap; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: var(--brand) !important; border: var(--bw-mark) solid var(--brand) !important; color: var(--on-brand) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background: var(--brand-hover) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny { background: transparent !important; border: var(--bw-mark) solid var(--brand-text) !important; color: var(--brand-text) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover { background: var(--brand-wash) !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-manage-options, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { display: none !important; }
.cmplz-cookiebanner :focus-visible { outline: var(--bw-2) solid var(--color-focus-ring) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cmplz-cookiebanner { animation: none !important; transition: none !important; } }
@media (max-width: 640px) {
  .cmplz-cookiebanner .cmplz-body { display: block; }
  .cmplz-cookiebanner .cmplz-buttons { margin-top: var(--space-2); }
  .cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--space-2); }
  .cmplz-cookiebanner .cmplz-btn { width: auto; flex: 1 1 0; margin-bottom: 0; }
  /* On a phone the full message text can grow tall enough to cover a CTA sitting in the first
     viewport (QA 2026-09-29: covered the hero's "Umów rozmowę" button) — keep only the two
     buttons; the same wording is one tap away via "Polityka plików cookies" in the footer. */
  /* phone: keep the explanation (people must know what they accept), clamped to two lines */
  .cmplz-cookiebanner .cmplz-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: 0.8125rem; line-height: 1.35; }
  .cmplz-cookiebanner { padding-block: var(--space-2) !important; max-height: 45vh; }
}
/* "Manage consent" button: the plugin hides it by animating `bottom`; we move it with translate alone instead. */
#cmplz-manage-consent .cmplz-manage-consent { animation: none !important; translate: 0 0; transition: translate var(--dur-3) var(--ease); }
#cmplz-manage-consent .cmplz-manage-consent:hover, #cmplz-manage-consent .cmplz-manage-consent:focus-visible { animation: none !important; translate: 0 var(--cmplz-manage-consent-offset); }
/* the "manage consent" re-open button Complianz leaves in the DOM after a choice is made */
#cmplz-manage-consent .cmplz-btn { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: var(--z-toast); background: var(--paper) !important; border: var(--bw-1) solid var(--line-strong) !important; color: var(--ink) !important; border-radius: var(--radius) !important; padding: var(--space-2) var(--space-3) !important; font-size: var(--step--2) !important; min-height: 0; }

/* ==========================================================================
   15 · Contact block, footer, 404
   ========================================================================== */
.contact-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
.channels { display: grid; gap: var(--space-3); }
.channel { display: grid; grid-template-columns: 30px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-4) var(--space-5); border: var(--bw-1) solid var(--line-strong); text-decoration: none; color: var(--ink); min-height: 4.5rem; transition: box-shadow var(--dur-1) var(--ease); }
.channel:hover { box-shadow: var(--shadow-hard); text-decoration: none; }
.channel:hover b { color: var(--brand-text); }
.channel b { display: block; font-weight: var(--weight-semibold); font-size: var(--step-1); }
.channel span { color: var(--color-text-muted); font-size: var(--step--1); }
.channel.is-disabled { border-style: dashed; cursor: default; }
.channel .n { width: 30px; height: 30px; line-height: 27px; font-size: 13px; border-width: var(--bw-mark); }
.footer { background: var(--paper-2); border-top: var(--bw-1) solid var(--line-strong); padding-block: var(--space-12) var(--space-6); }
.footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.footer h3 { font: var(--weight-medium) var(--step--2) / var(--lh-label) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-label); margin-bottom: var(--space-3); }
.footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin: 0; }
.footer a { color: var(--ink); }
.footer address { font-style: normal; color: var(--color-text-muted); display: grid; gap: var(--space-1); }
.footer .bottom { margin-top: var(--space-10); padding-top: var(--space-4); border-top: var(--bw-1) solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); color: var(--color-text-label); }
@media (max-width: 900px) { .footer .cols { grid-template-columns: 1fr 1fr; } .contact-block { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .footer .cols { grid-template-columns: 1fr; } }
.p404 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.p404 .num { position: relative; font: var(--weight-medium) clamp(6rem, 4rem + 10vw, 12rem) / 1 var(--font-mono); color: var(--color-mark); letter-spacing: 0.04em; padding: var(--space-6) 0; }
.p404 .num::before, .p404 .num::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-mark); }
.p404 .num::before { top: 0; } .p404 .num::after { bottom: 0; }
.p404 .num small { position: absolute; left: 0; top: -1.2em; font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.p404 ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); font-weight: var(--weight-semibold); }
@media (max-width: 900px) { .p404 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Brand colour panel (admin bar, inc/color.php) — only for edit_theme_options
   ========================================================================== */
.initace-color-panel { position: fixed; right: var(--space-4); top: calc(32px + var(--space-2)); z-index: var(--z-toast); width: 20rem; max-width: calc(100vw - 2 * var(--space-4)); background: var(--paper); border: var(--bw-1) solid var(--line-strong); box-shadow: var(--shadow-float); padding: var(--space-5); font-size: var(--step--1); }
.initace-color-panel .ik-row { margin: 0 0 var(--space-3); }
.initace-color-panel label { display: grid; gap: var(--space-1); font-weight: var(--weight-medium); }
.initace-color-panel input[type=range] { width: 100%; accent-color: var(--brand); }
.initace-color-panel input[type=text] { font-family: var(--font-mono); height: var(--h-control-sm); border: var(--bw-1) solid var(--field-border); padding: 0 var(--space-3); }
.ik-readout { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-family: var(--font-mono); font-size: 0.6875rem; margin: var(--space-3) 0; }
.ik-readout .ok { color: var(--success); }
.ik-readout .bad { color: var(--error); font-weight: var(--weight-semibold); }
.ik-actions { display: flex; gap: var(--space-2); margin: 0; }

/* ==========================================================================
   14 · List patterns ("Technical drawing")
   There are no plain bullet lists on the marketing pages. Every list gets a pattern that fits its
   content; these are styles of the core List block (register_block_style in inc/blocks.php), so the ul/li markup stays.
     is-style-situations  situation cards: client quote, answer, arrow to the service (01…06 in red crayon)
     is-style-ledger      two-column ledger: rule, key → value, a hand-drawn tick
     is-style-kv          feature rows: mono label, value as text
     is-style-callouts    numbered balloons (as on the drawing), with a dashed leader line
     is-style-tiles       grid with a dimension icon and a title (2–4 columns)
     is-style-checks      tick boxes (what to prepare)
     is-style-tags        row of tags for very short items
   An unstyled list (articles, privacy policy) gets a red rule and some room.
   ========================================================================== */
.wp-block-list { padding-block: 0; padding-inline: 0; }
ul.wp-block-list:not([class*="is-style-"]) { list-style: none; display: grid; gap: var(--space-3); }
ul.wp-block-list:not([class*="is-style-"]) > li { position: relative; padding-left: var(--space-8); }
ul.wp-block-list:not([class*="is-style-"]) > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: var(--bw-2); background: var(--color-mark); }
ul.wp-block-list:not([class*="is-style-"]) ul { margin-top: var(--space-3); }
ol.wp-block-list { padding-left: var(--space-8); display: grid; gap: var(--space-3); }
ol.wp-block-list > li::marker { color: var(--color-mark); font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.wp-block-post-content > ul.wp-block-list, .entry-content > ul.wp-block-list, .prose ul.wp-block-list { margin-block: var(--space-5); }

[class*="wp-block-list"].is-style-situations, [class*="wp-block-list"].is-style-ledger, [class*="wp-block-list"].is-style-kv, [class*="wp-block-list"].is-style-callouts,
[class*="wp-block-list"].is-style-tiles, [class*="wp-block-list"].is-style-checks, [class*="wp-block-list"].is-style-tags { list-style: none; margin-block: var(--space-8) 0; padding-block: 0; padding-inline: 0; }
.is-style-situations > li, .is-style-ledger > li, .is-style-kv > li, .is-style-callouts > li, .is-style-tiles > li, .is-style-checks > li, .is-style-tags > li { margin: 0; padding-left: 0; }
.is-style-situations > li::before, .is-style-ledger > li::before, .is-style-kv > li::before, .is-style-callouts > li::before, .is-style-tiles > li::before, .is-style-checks > li::before { top: auto; }

/* a) karty sytuacji */
.is-style-situations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); counter-reset: sytuacja; }
.is-style-situations:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-style-situations > li { counter-increment: sytuacja; position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6) var(--space-6); border: var(--bw-1) solid var(--line-strong); background: var(--paper); }
.is-style-situations > li::before { content: counter(sytuacja, decimal-leading-zero); position: absolute; left: var(--space-6); top: var(--space-4); font: var(--weight-medium) var(--step--1) / 1 var(--font-mono); letter-spacing: var(--tracking-label); color: var(--color-mark); }
.is-style-situations > li::after { content: ""; position: absolute; right: -1px; top: -1px; width: var(--corner-mark); height: var(--corner-mark); border-top: var(--bw-mark) solid var(--color-mark); border-right: var(--bw-mark) solid var(--color-mark); }
.is-style-situations > li > strong { display: block; margin-top: var(--space-2); font-size: var(--step-2); font-weight: var(--weight-semibold); line-height: var(--lh-sub); letter-spacing: var(--tracking-heading); text-wrap: balance; }
.is-style-situations > li > span { color: var(--color-text-muted); }
.is-style-situations > li > a { margin-top: auto; padding-top: var(--space-2); font-weight: var(--weight-semibold); }
.is-style-situations > li > a::after { content: " →"; }
@media (max-width: 1099px) { .is-style-situations, .is-style-situations:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .is-style-situations, .is-style-situations:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* "Dla kogo nie jesteśmy" card: a labelled note, not an ordinary card */
.card--not { position: relative; margin-top: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8); border: var(--bw-1) dashed var(--color-mark); background: var(--paper-2); }
/* At the top level of the page content, paragraphs get the side gutter as padding; the card gets it as an offset, so the frame lines up with the text. */
.entry-content.is-layout-flow > .card--not, .wp-block-post-content.is-layout-flow > .card--not { box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--w-content) - 2 * var(--gutter)) !important; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8) !important; margin-inline: auto !important; }
.card--not::before { content: "×"; position: absolute; left: var(--space-3); top: var(--space-4); font: var(--weight-semibold) var(--step-2) / 1 var(--font-mono); color: var(--color-mark); }
.card--not > .mono:first-child { color: var(--color-mark); font-weight: var(--weight-semibold); }
.card--not p { color: var(--ink); }

/* b) two-column ledger */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); margin-top: var(--space-8); }
.ledger > * { min-width: 0; border-top: var(--bw-1) solid var(--line-strong); }
.ledger > * > .mono { display: block; padding: var(--space-3) 0; color: var(--color-text-label); font-weight: var(--weight-medium); border-bottom: var(--bw-1) solid var(--line-strong); }
.ledger .is-style-ledger { margin-top: 0; }
.is-style-ledger > li { display: grid; grid-template-columns: 28px minmax(9rem, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3); align-items: baseline; padding: var(--space-4) 0; border-bottom: var(--bw-1) solid var(--line); }
.is-style-ledger > li::before { content: ""; width: 9px; height: 16px; margin-left: 6px; border-right: var(--bw-mark) solid var(--color-mark); border-bottom: var(--bw-mark) solid var(--color-mark); transform: translateY(2px) rotate(40deg); }
.is-style-ledger > li > strong { font-weight: var(--weight-semibold); }
.is-style-ledger > li > span { color: var(--color-text-muted); }
@media (max-width: 900px) { .ledger { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .is-style-ledger > li { grid-template-columns: 28px minmax(0, 1fr); } .is-style-ledger > li > span { grid-column: 2; } }

/* c) feature rows: mono label, value as text */
.is-style-kv { background: linear-gradient(var(--line-strong), var(--line-strong)) top / 100% var(--bw-1) no-repeat; background-origin: content-box; background-clip: content-box; padding-top: 0; }
.is-style-kv > li { display: grid; grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: baseline; padding: var(--space-4) 0; border-bottom: var(--bw-1) solid var(--line); }
.is-style-kv > li > strong { font: var(--weight-medium) var(--step--2) / var(--lh-label) var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-label); }
.is-style-kv > li > span { color: var(--ink); }
@media (max-width: 640px) { .is-style-kv > li { grid-template-columns: minmax(0, 1fr); } }

/* d) numerowane dymki */
.is-style-callouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-grid); counter-reset: dymek; background: linear-gradient(var(--line-strong), var(--line-strong)) top / 100% var(--bw-1) no-repeat; background-origin: content-box; background-clip: content-box; padding-top: 0; }
.is-style-callouts > li { counter-increment: dymek; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--bw-1) dashed var(--line-strong); align-items: start; }
.is-style-callouts > li::before { content: counter(dymek); width: var(--balloon); height: var(--balloon); border: var(--bw-mark) solid var(--color-mark); border-radius: var(--radius-full); background: var(--paper); color: var(--color-mark); font: var(--weight-semibold) 13px / 27px var(--font-mono); text-align: center; }
.is-style-callouts > li > strong { display: block; font-weight: var(--weight-semibold); }
@media (max-width: 800px) { .is-style-callouts { grid-template-columns: minmax(0, 1fr); } }

/* e) grid with a dimension icon */
.is-style-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.is-style-tiles:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-style-tiles:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.is-style-tiles > li { display: grid; align-content: start; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--bw-1) solid var(--line-strong); }
.is-style-tiles > li::before { content: ""; height: 14px; width: 56px; margin-bottom: var(--space-2); background:
  linear-gradient(var(--color-mark), var(--color-mark)) left center / 100% var(--bw-mark) no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) left center / var(--bw-mark) 100% no-repeat,
  linear-gradient(var(--color-mark), var(--color-mark)) right center / var(--bw-mark) 100% no-repeat; }
.is-style-tiles > li > strong { font-size: var(--step-1); font-weight: var(--weight-semibold); line-height: var(--lh-sub); }
.is-style-tiles > li > span { color: var(--color-text-muted); font-size: var(--step--1); }
@media (max-width: 1099px) { .is-style-tiles, .is-style-tiles:has(> li:nth-child(3):last-child), .is-style-tiles:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .is-style-tiles, .is-style-tiles:has(> li:nth-child(3):last-child), .is-style-tiles:has(> li:nth-child(5)) { grid-template-columns: minmax(0, 1fr); } }

/* f) pola do odhaczenia */
.is-style-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--gap-grid); }
.is-style-checks > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border: var(--bw-1) solid var(--line); background: var(--paper); }
.is-style-checks > li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border: var(--bw-mark) solid var(--color-mark); background: var(--paper); }
.is-style-checks > li > strong { display: block; font-weight: var(--weight-semibold); }
@media (max-width: 1099px) { .is-style-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .is-style-checks { grid-template-columns: minmax(0, 1fr); } }

/* g) row of tags */
.is-style-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.is-style-tags > li { border: var(--bw-1) solid var(--line-strong); padding: var(--space-1) var(--space-3); background: var(--paper); font: var(--weight-medium) var(--step--1) / 1.4 var(--font-sans); }
.initace-spec-list .note-box { margin-top: var(--space-7); }
.wp-block-group.ledger > * { margin-block: 0; }
.wp-block-group.card--not > * { margin-block: 0; }
.wp-block-group.card--not > * + * { margin-top: var(--space-2); }
.card--not ul.wp-block-list:not([class*="is-style-"]) { margin-top: var(--space-3); }
.card--not ul.wp-block-list:not([class*="is-style-"]) > li::before { content: "×"; top: 0; width: auto; height: auto; background: none; font: var(--weight-semibold) var(--step-1) / 1.4 var(--font-mono); color: var(--color-mark); }
.card--not h3 { font-size: var(--step-2); }
.is-style-checks:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .is-style-checks:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
/* A content group with the class container--content has its own width; the "constrained" layout from theme.json does not narrow its children. */
.container--content.is-layout-constrained > * { max-width: none; margin-left: 0; margin-right: 0; }

/* Feature cards (plugin initace-features, includes/card.php): one card everywhere a feature is
   linked — hub, "Inne funkcje", "Funkcje użyte w tym projekcie". 3 / 2 / 1 columns, equal heights. */
.feature-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); align-items: stretch; }
.feature-card { display: grid; grid-template-rows: auto auto 1fr auto auto; align-content: start; gap: var(--space-3); padding: 0 0 var(--space-6); overflow: hidden; }
.feature-card > :not(.feature-card__image) { padding-inline: var(--space-6); margin: 0; }
.feature-card__image { display: block; border-bottom: var(--bw-1) solid var(--line-strong); }
.feature-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; }
.feature-card h3 { font-size: var(--step-2); margin-top: var(--space-2); }
.feature-card h3 a { color: var(--ink); text-decoration: none; }
.feature-card h3 a:hover { color: var(--brand-text); text-decoration: underline; }
.feature-card__sentence { color: var(--color-text-muted); }
.feature-card__industries { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.feature-card__links { align-self: end; font-size: var(--step--1); }
.feature-cards-section > h2 { margin-bottom: var(--space-8); }
@media (max-width: 1099px) { .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .feature-cards { grid-template-columns: minmax(0, 1fr); } }
/* "Zobacz też" (core columns with cards): equal height */
.wp-block-columns:has(> .wp-block-column.card--link) { align-items: stretch; }

/* ==========================================================================
   Corners (ksiega-marki.html §5) — three steps from tokens.css, gathered in one place,
   so every new element takes its radius from this list instead of its own number.
   ========================================================================== */
.tag, .tag--outline, .chip, .is-style-tags > li, .stamp, .is-style-checks > li::before,
.byline .avatar { border-radius: var(--radius-sm); }
.dropdown, .day, .hour, .chip-radio span, .initace-color-panel input[type=text] { border-radius: var(--radius); }
.quick, .pkg, .card, .kb-list > li, .initace-kb-query .wp-block-post-template > li,
.photo-slot, .notice, .note-box, .error-summary, .channel, .title-block,
.is-style-situations > li, .is-style-checks > li, .card--not,
.initace-color-panel, .view .frame, .drawing .shot { border-radius: var(--radius-lg); }
.kb-list > li, .initace-kb-query .wp-block-post-template > li { overflow: hidden; }
.drawing .shot-phone { border-radius: calc(var(--radius-lg) + 4px); }
/* the corner marks of a view frame follow the frame's arc */
.view .frame::before { border-top-left-radius: var(--radius-lg); }
.view .frame::after { border-bottom-right-radius: var(--radius-lg); }
.is-style-situations > li::after { border-top-right-radius: var(--radius-lg); }

/* Page title (templates/page.html) sits in the same 1280 px column as the page sections below it,
   not in the 720 px prose column the constrained <main> would give it. */
/* <main> already has the gutter as padding; the title's box is the page column without it. */
main > .wp-block-post-title.page-title { max-width: calc(var(--w-wide) - 2 * var(--gutter)); }

/* ==========================================================================
   Running text on the wide page (ksiega-marki.html §4, decision 2026-09-29).
   Sections are 1600 px; paragraphs and plain lists are at most --measure (about 66 characters),
   because a longer line reads worse. The text starts at the left edge of the page column.
   ========================================================================== */
.wp-block-post-content p,
.wp-block-post-content :is(ul, ol).wp-block-list:not([class*="is-style-"]) { max-width: var(--measure); }
.wp-block-post-content p.has-text-align-center { margin-inline: auto; }
/* Styled lists (is-style-*) reset their own margin and padding in later rules; as direct children
   of the content they still sit in the page column. */
.wp-block-post-content.is-layout-flow > [class*="is-style-"] {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Direct children of the content keep the page column (left edge = header's left edge) and give up
   the space to the right of the measure as padding, so the text box is exactly --measure wide. */
.wp-block-post-content.is-layout-flow > p,
.wp-block-post-content.is-layout-flow > :is(ul, ol).wp-block-list:not([class*="is-style-"]),
.wp-block-post-content.is-layout-flow > blockquote {
  max-width: var(--w-wide);
  padding-inline-end: max(var(--gutter), calc(min(100%, var(--w-wide)) - var(--measure) - var(--gutter)));
}

/* ==========================================================================
   Article (templates/single.html): full page width in three columns —
   table of contents, text of width --measure, the "Umów rozmowę" card. The title starts
   at the left edge of the page, as on the other pages.
   ========================================================================== */
.article { padding-top: var(--space-6); }
.article > * { margin-block: 0; }
.article .article-head { max-width: 60rem; margin-bottom: var(--space-12); }
.article-layout { display: grid; grid-template-columns: 15rem minmax(0, 45rem) 20rem; justify-content: space-between; column-gap: var(--space-12); row-gap: var(--space-8); align-items: start; }
.article-layout > * { margin-block: 0; min-width: 0; }
.article-toc, .article-side { position: sticky; top: calc(var(--h-header) + var(--space-6)); }
.article-toc .toc { max-width: none; }
.article-side .quick { max-width: none; }
/* inside the text column the content is plain flow: no page gutters or page-column rules */
.article .wp-block-post-content.is-layout-flow > * { max-width: none; margin-inline: 0; }
.article .wp-block-post-content.is-layout-flow > :is(p, h2, h3, h4, ul, ol, figure, blockquote, [class*="is-style-"]) { padding-inline: 0; margin-inline: 0; }
.article .wp-block-post-content.is-layout-flow > :is(p, ul, ol, blockquote) { max-width: var(--measure); }
.article .author-box { margin-top: var(--space-12); max-width: none; }
.article-related { margin-top: var(--section-y); margin-bottom: var(--section-y); display: grid; gap: var(--space-6); }
@media (max-width: 1199px) {
  .article-layout { grid-template-columns: minmax(0, 45rem) 20rem; }
  .article-toc { grid-column: 1 / -1; position: static; }
}
@media (max-width: 860px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-side { position: static; }
  .article .article-head { margin-bottom: var(--space-8); }
}

/* Two columns inside the page column (content groups "split"): service-page intro with the booking
   card beside it, Contact with channels and address beside the form. One column below 900 px. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-16); row-gap: var(--space-8); align-items: start; }
.split > *, .split-col > * { margin-block: 0; }
.split-col { display: grid; gap: var(--space-6); align-content: start; }
.split--intro > .wp-block-initace-booking-card { justify-self: end; width: 100%; max-width: 30rem; }
.split--intro > .wp-block-initace-booking-card .quick { max-width: none; }
.split--contact .form { max-width: none; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--intro > .wp-block-initace-booking-card { justify-self: start; }
}

/* Several team members in one "Kto z Tobą pracuje" block. */
.initace-person .person + .person { margin-top: var(--space-8); }

/* ==========================================================================
   Page column alignment on wide screens (> 1664 px): every template's content starts exactly under
   the logo. <main> has the gutter as padding, so groups placed directly in it are capped at the page
   column minus both gutters; narrow ("prose") groups take the same column — their running text is
   limited by --measure inside, instead of the whole block sitting in a centred 720 px strip.
   ========================================================================== */
main > :is(.container--content, .container--prose):not(.container) { max-width: calc(var(--w-wide) - 2 * var(--gutter)); }
/* Full-bleed groups of the article template: edge to edge like the header row, content centred in
   the same 1600 px column (padding instead of margins, because WordPress pins alignfull margins). */
main > .alignfull.container:is(.article, .article-related) {
  max-width: none;
  /* % is the width of <main>'s content box; the group itself is 2 gutters wider (alignfull) */
  padding-inline: max(var(--gutter), calc((100% + 2 * var(--gutter) - var(--w-wide)) / 2 + var(--gutter)));
}

/* ==========================================================================
   Schedule beside the stage list (blocks/stages, simple mode): a drawing on graph paper —
   bar = stage duration, hatching = possible slack, red dimension line = "from N weeks".
   ========================================================================== */
.stages-layout.has-schedule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--space-16); row-gap: var(--space-10); align-items: start; }
.schedule { --label-width: 11.5rem; margin: 0; padding: var(--space-6); border: var(--bw-1) solid var(--line-strong); border-radius: var(--radius-lg); background-color: var(--paper);
  background-image: linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px); background-size: 24px 24px; display: grid; gap: var(--space-5); }
.schedule__grid { position: relative; display: grid; grid-template-columns: var(--label-width) repeat(var(--weeks), minmax(0, 1fr)); row-gap: var(--space-4); align-items: center; }
/* week lines: one per column, drawn behind the bars */
.schedule__grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--label-width); right: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / var(--weeks))); border-right: var(--bw-1) solid var(--line); }
.schedule__head, .schedule__week { grid-row: 1; color: var(--color-text-label); }
.schedule__week { text-align: center; }
.schedule__stage { grid-column: 1; display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-medium); font-size: var(--step--1); line-height: 1.2; padding-right: var(--space-3); }
.schedule__stage .n { width: 20px; height: 20px; line-height: 17px; font-size: 11px; flex: none; }
.schedule__bar, .schedule__slack { position: relative; height: 18px; margin-inline: 3px; border-radius: var(--radius-sm); }
.schedule__bar { background: var(--brand); }
.schedule__slack { border: var(--bw-mark) dashed var(--brand); background: repeating-linear-gradient(45deg, var(--brand-wash-2) 0 4px, var(--paper) 4px 8px); }
.schedule__dimension { position: relative; margin-left: var(--label-width); height: 34px; }
.schedule__line { position: absolute; left: 3px; top: 8px; width: calc(var(--start) / var(--weeks) * 100% - 6px); border-top: var(--bw-mark) solid var(--color-mark); }
.schedule__line::before, .schedule__line::after { content: ""; position: absolute; top: -7px; height: 13px; border-left: var(--bw-mark) solid var(--color-mark); }
.schedule__line::before { left: 0; } .schedule__line::after { right: 0; }
.schedule__label { position: absolute; top: 14px; left: 0; width: calc(var(--start) / var(--weeks) * 100%); text-align: center; color: var(--color-mark); }
.schedule__label--slack { left: calc(var(--start) / var(--weeks) * 100%); width: calc((var(--weeks) - var(--start)) / var(--weeks) * 100%); color: var(--color-text-label); }
.schedule__dimension::after { content: ""; position: absolute; top: 8px; left: calc(var(--start) / var(--weeks) * 100%); right: 3px; border-top: var(--bw-mark) dashed var(--color-text-label); }
.schedule figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.schedule__key { display: inline-block; width: 22px; height: 10px; border-radius: 2px; }
.schedule__key--bar { background: var(--brand); }
.schedule__key--slack { border: 1px dashed var(--brand); background: repeating-linear-gradient(45deg, var(--brand-wash-2) 0 3px, var(--paper) 3px 6px); margin-left: var(--space-3); }
@media (max-width: 900px) {
  .stages-layout.has-schedule { grid-template-columns: minmax(0, 1fr); }
  .schedule { --label-width: 8.5rem; padding: var(--space-4); }
  .schedule__stage { font-size: var(--step--2); }
}
/* the drawing stays in view while the (longer) list scrolls past */
@media (min-width: 901px) { .schedule { position: sticky; top: calc(var(--h-header) + var(--space-6)); } }
.schedule__label { white-space: nowrap; }

/* ==========================================================================
   Feature steps (plugin initace-features, block feature-steps): the screenshot in a frame beside a
   numbered list in the same rhythm as the stages timeline; a side without a screenshot lays its
   steps out in two columns.
   ========================================================================== */
.feature-steps > h2 { margin-bottom: var(--space-8); }
.feature-steps__body { display: grid; gap: var(--space-10) var(--space-16); align-items: start; }
.feature-steps.has-media .feature-steps__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.feature-steps__media { margin: 0; border: var(--bw-1) solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--screen); }
.feature-steps__media img { display: block; width: 100%; height: auto; }
.feature-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.feature-steps:not(.has-media) .feature-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); }
.feature-steps__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.feature-steps__item .n { width: 30px; height: 30px; line-height: 27px; font-size: 13px; border-width: var(--bw-mark); }
.feature-steps__item h3 { font-size: var(--step-1); font-weight: var(--weight-semibold); line-height: var(--lh-sub); margin: 3px 0 var(--space-2); }
.feature-steps__item p { margin: 0; color: var(--color-text-muted); max-width: var(--measure); }
.feature-steps__phone { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; }
.feature-steps__phone img { display: block; width: 100%; height: auto; border: var(--bw-mark) solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-halo); }
.feature-steps__phone > p { max-width: var(--measure); color: var(--color-text-muted); font-size: var(--step-1); }
@media (min-width: 901px) { .feature-steps__media { position: sticky; top: calc(var(--h-header) + var(--space-6)); } }
@media (max-width: 900px) {
  .feature-steps.has-media .feature-steps__body, .feature-steps:not(.has-media) .feature-steps__list, .feature-steps__phone { grid-template-columns: minmax(0, 1fr); }
  .feature-steps__phone img { max-width: 15rem; }
}
/* full-width sections placed directly in <main> touch each other (no block-gap strip between bands) */
main > .alignfull.sheet { margin-block: 0; }

/* Cards side by side in a row: the action at the bottom of every card sits on the same line, whatever
   the amount of text above it (brand-book §5). A card whose last element is (or holds) a button becomes
   a column and pushes that element down. */
.card:has(> .btn:last-child, > :last-child .btn) { display: flex; flex-direction: column; }
.card > .btn:last-child, .card > :last-child:has(.btn) { margin-top: auto; }

/* A person's photo keeps its own proportions: 4:5 portrait, never stretched; in the small author box the
   head stays in view (square frame, top of the portrait). */
img.photo-slot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; padding: 0; }
.author-box img.photo-slot { aspect-ratio: 1; object-position: 50% 12%; }