/* exauditor — style całej strony.
   Kierunek: „Type and nothing else” (tasteskill v2, seed 487539160), paleta „Stone and blueprint”,
   krój Archivo. Każda sekcja ma własne pole koloru; linie tylko w tabelach i formularzach.
   System (tokeny, komponenty, zasady użycia) opisuje docs/design-system.md — zmiany zaczynaj od tokenów. */

/* ---------- tokeny ---------- */
:root {
  color-scheme: light dark;

  /* kolor: role, nie nazwy barw */
  --bg: #dfdedb;              /* kamień: tło strony */
  --surface: #d3d2ce;         /* kamień o stopień ciemniejszy: pole sekcji, pasy tabeli */
  --paper: #ecebe7;           /* kartka cennika i kwitu */
  --ink: #26251e;             /* tekst */
  --muted: #56544c;           /* tekst drugiego planu (min. 4,5:1 na bg, surface i paper) */
  --accent: #2456d6;          /* błękit kreślarski: przycisk, pola, druk zdjęć — ten sam w obu motywach */
  --accent-hover: #1b45b3;    /* przycisk pod kursorem */
  --accent-deep: #1d48b8;     /* tło zdjęcia leżącego na polu błękitu */
  --accent-ink: #ffffff;      /* tekst na błękicie */
  --accent-soft: #dfdedb;     /* tekst drugiego planu na błękicie */
  --accent-text: #2456d6;     /* błękit jako kolor tekstu na kartce */
  --accent-tint: #dcdcf0;     /* podświetlenie wiersza cennika */
  --inverse-bg: #26251e;      /* pole ciemne (audyty, kontakt) */
  --inverse-bg-hover: #000000;
  --inverse-raised: #34332b;  /* ramka z werdyktem na polu ciemnym */
  --inverse-ink: #dfdedb;
  --inverse-muted: #c9c8c3;
  --inverse-link: #8fb0ff;    /* adres e-mail pod kursorem */
  --hover-surface: #c9c8c3;   /* wiersz pod kursorem na polu surface */
  --disabled-bg: #c9c8c3;
  --disabled-ink: #56544c;
  --warn: #f3e7a6;            /* miejsca do uzupełnienia w dokumentach */
  --focus: #2456d6;
  --focus-on-field: #ffffff;  /* obrys fokusu na błękicie i na polu ciemnym */

  /* pismo */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --w-regular: 400;
  --w-medium: 500;
  --w-strong: 600;

  --step-small: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);   /* 14–15: podpisy, stopka */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19: tekst */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);       /* 20–26: wstęp, pytania */
  --step-statement: clamp(1.5rem, 0.9rem + 2.1vw, 2.25rem);    /* 24–36: zdania-wyznania */
  --step-head: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem);        /* 36–76: nagłówki sekcji */
  --step-poster: clamp(2.25rem, 7.4vw, 7rem);                  /* cena, adres e-mail */
  --step-display: clamp(5.25rem, 15vw, 14.375rem);             /* wielkie liczby */
  --step-name: clamp(6rem, 22vw, 20rem);                       /* nazwa w hero */

  --lh-display: 0.82;
  --lh-head: 1;
  --lh-statement: 1.12;
  --lh-lead: 1.35;
  --lh-small: 1.45;
  --lh-body: 1.5;
  --track-text: -0.01em;
  --track-head: -0.02em;
  --track-poster: -0.035em;
  --track-display: -0.045em;
  --measure: 62ch;            /* najdłuższy wiersz tekstu */

  /* odstępy: krok 4 px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-14: 3.5rem;
  --s-16: 4rem;
  --s-20: 5rem;

  /* siatka: 12 kolumn; punkty łamania 60em (tablet) i 40em (telefon) */
  --margin: clamp(1rem, 2.8vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 13vw, 13rem);
  --pad-sheet: clamp(1.25rem, 2.6vw, 2.5rem);   /* wnętrze kartki cennika i kwitu */

  /* kontrolki i ikony */
  --control: 3rem;
  --control-small: 2.75rem;
  --check: 1.75rem;
  --icon: 1rem;
  --icon-large: 1.25rem;

  /* warstwy (cieni nie używamy: plan buduje kolor pola) */
  --z-footer: 1;
  --z-main: 2;
  --z-header: 5;
  --z-skip: 10;

  /* ruch */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* wejścia i reakcje */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);    /* odsłonięcie zdjęcia */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);      /* powolny dojazd obrazu */
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-state: 280ms;     /* zmiana stanu: ptaszek, strzałka, wiersz cennika */
  --t-enter: 800ms;     /* wejście tekstu */
  --t-picture: 1200ms;  /* odsłonięcie zdjęcia, wielkie liczby */
  --stagger: 90ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a16;
    --surface: #25241e;
    --paper: #302f28;
    --ink: #e8e6e0;
    --muted: #a9a79e;
    --accent-text: #9db8ff;
    --accent-tint: #2b3760;
    --inverse-bg: #0e0e0b;
    --inverse-raised: #25241e;
    --inverse-ink: #e8e6e0;
    --inverse-muted: #b5b3ab;
    --hover-surface: #34332b;
    --disabled-bg: #34332b;
    --disabled-ink: #a9a79e;
    --warn: #5a4e12;
    --focus: #9db8ff;
  }
}

/* telefon: te same role pisma, inne wartości */
@media (max-width: 40em) {
  :root {
    --step-statement: min(6vw, 1.5rem);
    --step-poster: 8.4vw;
    --step-display: 30vw;
    --step-name: 28vw;
    --lh-display: 0.86;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: var(--lh-body); font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset, legend { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
main { position: relative; z-index: var(--z-main); background: var(--bg); }
:target { scroll-margin-top: var(--s-8); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-accent :focus-visible, .on-ink :focus-visible { outline-color: var(--focus-on-field); }
h1, h2, h3 { font-weight: var(--w-regular); text-wrap: balance; hyphens: none; }
p { max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: var(--margin); top: var(--s-3); z-index: var(--z-skip); padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--bg); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- siatka i pola ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.field-stone { background: var(--bg); color: var(--ink); }
.field-surface { background: var(--surface); color: var(--ink); }
.field-accent { background: var(--accent); color: var(--accent-ink); }
.field-ink { background: var(--inverse-bg); color: var(--inverse-ink); }

.head { font-size: var(--step-head); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.lead { font-size: var(--step-lead); line-height: var(--lh-lead); }
.small { font-size: var(--step-small); line-height: var(--lh-small); }

/* ---------- kontrolki ---------- */
/* Przycisk: główny (błękit); na polu błękitu sam przechodzi w ciemny; .button-small w nagłówku i przy filmie. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control); padding: 0 var(--s-6); background: var(--accent); color: var(--accent-ink); font-weight: var(--w-strong); text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button-small, .top .button { min-height: var(--control-small); padding-inline: var(--s-4); font-size: var(--step-small); }
.on-accent .button { background: var(--inverse-bg); color: var(--inverse-ink); }
.button:disabled, .button[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; transform: none; }

/* Link w tekście: podkreślony; w nawigacji i stopce bez podkreślenia, podkreślenie wraca pod kursorem. */
.link { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.link-block { display: inline-block; padding-block: var(--s-2); }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-hover); }
  .on-accent .button:hover { background: var(--inverse-bg-hover); }
  .button:disabled:hover, .button[aria-disabled="true"]:hover { background: var(--disabled-bg); }
  .link:hover { text-decoration-color: transparent; }
}

/* Ikony: jedna rodzina, kreska 2 na siatce 16, kolor z tekstu. */
.icon { flex: 0 0 auto; width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- zdjęcia: druk w błękicie (ciemne = błękit, jasne = biel) ---------- */
/* Gdy obraz się nie wczyta, zostaje pole błękitu z opisem (alt) białym pismem. */
.print { position: relative; background: var(--accent); color: var(--accent-ink); font-size: var(--step-small); overflow: hidden; }
.print img, .print video { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.04); mix-blend-mode: screen; }
.caption { font-size: var(--step-small); line-height: var(--lh-small); }

/* ---------- nagłówek strony ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: var(--z-header); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) var(--margin); font-size: var(--step-small); }
.mark { font-weight: var(--w-strong); font-size: var(--step-body); letter-spacing: var(--track-text); text-decoration: none; }
.mark span { color: var(--muted); }
.nav-list { display: flex; align-items: center; gap: var(--gutter); }
.top nav a:not(.button) { display: inline-flex; align-items: center; min-height: var(--control-small); text-decoration: none; text-underline-offset: 0.25em; }
.top nav a.lang { font-weight: var(--w-strong); text-decoration: underline; text-decoration-thickness: 0.08em; }
@media (hover: hover) and (pointer: fine) {
  .top nav a:not(.button):hover { text-decoration: underline; }
  .top nav a.lang:hover { text-decoration-color: transparent; }
}

/* ---------- 1. hero: nazwa w dwóch tuszach ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 14svh auto 1fr; padding-inline: var(--margin); padding-bottom: var(--s-10); overflow: hidden; }
.hero h1 { grid-row: 2; font-size: var(--step-name); line-height: var(--lh-display); letter-spacing: var(--track-display); margin-left: -0.04em; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero h1 [data-line] { display: block; }
.hero h1 .ink-light { color: var(--muted); }
.hero-foot { grid-row: 3; align-self: end; justify-self: end; width: min(100%, 31rem); text-align: right; }
.hero-foot p { font-size: var(--step-lead); line-height: var(--lh-lead); margin-left: auto; }
.hero-foot .link { display: inline-block; margin-top: var(--s-5); font-size: var(--step-body); padding-block: var(--s-2); }

/* ---------- 2. intro: schody na błękicie ---------- */
.intro { position: relative; min-height: 100svh; padding: clamp(5rem, 14svh, 9rem) 4vw clamp(3rem, 8svh, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) 30vw; grid-template-rows: 1fr auto; column-gap: 4vw; }
.stairs { grid-column: 1; align-self: center; font-size: var(--step-statement); line-height: var(--lh-statement); letter-spacing: var(--track-text); max-width: none; font-weight: var(--w-medium); }
.stairs span { display: block; }
.stairs span:nth-child(2) { padding-left: 6vw; color: var(--accent-soft); }
.stairs span:nth-child(3) { padding-left: 12vw; }
.stairs span:nth-child(4) { padding-left: 18vw; }
.intro-pics { grid-column: 2; grid-row: 1 / 3; display: grid; gap: var(--s-4); align-content: center; }
.intro-pics .print { aspect-ratio: 3 / 2; }
.intro-note { grid-column: 1; grid-row: 2; align-self: end; max-width: 34ch; font-size: var(--step-small); line-height: var(--lh-small); color: var(--accent-soft); }

/* ---------- 3. audyty: przełączniki + cennik jak menu ---------- */
.audits { padding-block: var(--section); }
.audits-copy { grid-column: 1 / 6; }
.audits-copy > p { margin-top: var(--s-8); }

/* Pole wyboru: cały wiersz jest etykietą; stany: zaznaczone, pod kursorem, fokus, wciśnięte, wyłączone. */
.check { margin-top: var(--s-12); }
.check legend { font-size: var(--step-lead); line-height: var(--lh-lead); margin-bottom: var(--s-5); }
.check label { position: relative; display: grid; grid-template-columns: var(--check) 1fr; gap: var(--s-4); align-items: start; padding: var(--s-3) 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: var(--check); height: var(--check); margin: 0; cursor: pointer; }
.check .box { width: var(--check); height: var(--check); background: var(--inverse-ink); color: var(--accent-ink); display: grid; place-items: center; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.check .box .icon { width: var(--icon-large); height: var(--icon-large); opacity: 0; transform: scale(0.6); transition: opacity var(--t-hover) ease, transform var(--t-state) var(--ease-out); }
.check input:checked + .box { background: var(--accent); }
.check input:checked + .box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .box { outline: 3px solid var(--focus-on-field); outline-offset: 3px; }
.check label:active .box { transform: scale(0.92); }
.check input:disabled, .check input:disabled ~ * { cursor: not-allowed; }
.check input:disabled + .box { background: var(--inverse-raised); }
.check input:disabled ~ .txt { color: var(--inverse-muted); }
.check .txt { line-height: 1.4; }
.check .txt small { display: block; font-size: var(--step-small); color: var(--inverse-muted); margin-top: var(--s-1); }
@media (hover: hover) and (pointer: fine) {
  .check label:hover input:not(:checked):not(:disabled) + .box { background: var(--inverse-muted); }
  .check label:hover input:checked:not(:disabled) + .box { background: var(--accent-hover); }
}
.verdict { margin-top: var(--s-8); padding: var(--s-6); background: var(--inverse-raised); }
.verdict ul { margin: var(--s-3) 0 0; padding-left: var(--s-4); }
.verdict li + li { margin-top: var(--s-2); }
.verdict .when { color: var(--inverse-muted); }

/* Kartka z ząbkowanym brzegiem (cennik: góra i dół, kwit: dół). */
.menu { grid-column: 7 / 13; align-self: start; position: sticky; top: var(--s-8); max-width: 37.5rem; justify-self: end; width: 100%; background: var(--paper); color: var(--ink); padding: var(--s-14) var(--pad-sheet);
  --z: 14px;
  clip-path: polygon(0 var(--z), 4% 0, 8% var(--z), 12% 0, 16% var(--z), 20% 0, 24% var(--z), 28% 0, 32% var(--z), 36% 0, 40% var(--z), 44% 0, 48% var(--z), 52% 0, 56% var(--z), 60% 0, 64% var(--z), 68% 0, 72% var(--z), 76% 0, 80% var(--z), 84% 0, 88% var(--z), 92% 0, 96% var(--z), 100% 0,
    100% calc(100% - var(--z)), 96% 100%, 92% calc(100% - var(--z)), 88% 100%, 84% calc(100% - var(--z)), 80% 100%, 76% calc(100% - var(--z)), 72% 100%, 68% calc(100% - var(--z)), 64% 100%, 60% calc(100% - var(--z)), 56% 100%, 52% calc(100% - var(--z)), 48% 100%, 44% calc(100% - var(--z)), 40% 100%, 36% calc(100% - var(--z)), 32% 100%, 28% calc(100% - var(--z)), 24% 100%, 20% calc(100% - var(--z)), 16% 100%, 12% calc(100% - var(--z)), 8% 100%, 4% calc(100% - var(--z)), 0 100%); }
.menu h3 { font-size: var(--step-head); line-height: var(--lh-head); letter-spacing: var(--track-head); text-align: center; margin-bottom: var(--s-10); }
.menu-group + .menu-group { margin-top: var(--s-12); }
.menu-group h4 { font-size: var(--step-lead); font-weight: var(--w-strong); margin: 0 0 var(--s-2); display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline; }
.menu-group h4 .tag { font-size: var(--step-small); color: var(--accent-text); opacity: 0; transition: opacity var(--t-hover) ease; }
.menu-group.is-on h4 .tag { opacity: 1; }
.menu-item { padding: var(--s-2); margin-inline: calc(var(--s-2) * -1); transition: background-color var(--t-state) ease; }
.menu-group.is-on .menu-item.priced { background: var(--accent-tint); }
.menu-row, .slip-row { display: flex; align-items: baseline; gap: var(--s-2); }
.menu-row .name { flex: 0 1 auto; }
.dots { flex: 1 1 var(--s-6); min-width: var(--s-6); border-bottom: 4px dotted currentColor; transform: translateY(-0.28em); opacity: 0.55; }
.menu-row .val, .slip-row .val { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item p, .menu-total p { font-size: var(--step-small); line-height: var(--lh-small); color: var(--muted); max-width: 34ch; margin-top: var(--s-1); }
.menu-total { margin-top: var(--s-12); padding: var(--s-4) var(--s-2) 0; margin-inline: calc(var(--s-2) * -1); }
.menu-total .menu-row { font-weight: var(--w-strong); font-size: var(--step-lead); }

/* ---------- 4. pomiar: dwie wielkie liczby ---------- */
.measure { padding-block: var(--section) var(--s-16); }
.measure-top { align-items: start; }
.measure-top h2 { grid-column: 1 / 6; }
.measure-top p { grid-column: 7 / 12; }
.specimens { margin-top: 12vh; }
.specimen { grid-column: span 6; }
.specimen .caption { display: block; max-width: 30ch; margin-bottom: var(--s-4); color: var(--muted); }
.specimen .figure { display: block; font-size: var(--step-display); line-height: 0.9; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: -0.05em; }

/* ---------- pas ze zdjęciem ---------- */
.band { height: clamp(22rem, 62vh, 44rem); }
.band img { object-position: 50% 42%; will-change: transform; }
.band figcaption { position: absolute; right: var(--margin); bottom: var(--s-5); max-width: 36ch; padding: var(--s-2) var(--s-3); background: var(--accent); color: var(--accent-ink); }

/* ---------- 5. metoda: kwit ---------- */
.method { padding-block: var(--section); align-items: start; }
.method-copy { grid-column: 1 / 6; }
.method-copy .head { max-width: 10ch; }
.method-copy > p { margin-top: var(--s-8); max-width: 30ch; }
.method-pic { margin-top: var(--s-12); width: min(100%, 22rem); }
.method-pic .print { aspect-ratio: 4 / 5; background: var(--accent-deep); }
.method-pic figcaption { margin-top: var(--s-3); color: var(--accent-soft); }
.method-pic .button { display: flex; width: fit-content; margin-top: var(--s-2); }
.slip { grid-column: 7 / 12; justify-self: start; width: min(100%, 30rem); background: var(--paper); color: var(--ink); padding: var(--s-8) var(--pad-sheet) var(--s-14); font-variant-numeric: tabular-nums;
  --z: 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--z)), 95% 100%, 90% calc(100% - var(--z)), 85% 100%, 80% calc(100% - var(--z)), 75% 100%, 70% calc(100% - var(--z)), 65% 100%, 60% calc(100% - var(--z)), 55% 100%, 50% calc(100% - var(--z)), 45% 100%, 40% calc(100% - var(--z)), 35% 100%, 30% calc(100% - var(--z)), 25% 100%, 20% calc(100% - var(--z)), 15% 100%, 10% calc(100% - var(--z)), 5% 100%, 0 calc(100% - var(--z))); }
.slip h3 { font-size: var(--step-body); font-weight: var(--w-strong); margin-top: var(--s-8); }
.slip h3:first-child { margin-top: 0; }
.slip-row { padding-top: var(--s-2); }
.slip-total { display: flex; justify-content: space-between; gap: var(--s-4); align-items: center; min-height: var(--control-small); margin: var(--s-8) calc(var(--pad-sheet) * -1) 0; padding: var(--s-2) var(--pad-sheet); background: var(--ink); color: var(--paper); font-weight: var(--w-strong); }

/* ---------- 6. cena jako zdanie ---------- */
.price { min-height: 80svh; padding-block: var(--section); display: flex; flex-direction: column; justify-content: center; }
.price h2 { font-size: var(--step-poster); line-height: var(--lh-head); letter-spacing: var(--track-poster); }
.price h2 .line { display: block; }
.price h2 .amount { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 0 0.15em; }
.price-foot { margin-top: var(--s-16); align-items: end; }
.price-foot p { grid-column: 1 / 7; font-size: var(--step-lead); line-height: var(--lh-lead); }
.price-foot .actions { grid-column: 9 / 13; justify-self: end; text-align: right; }
.price-foot .actions .link { display: inline-block; margin-top: var(--s-4); padding-block: var(--s-2); }

/* ---------- 7. przepisy jako tabela ---------- */
.laws { padding-block: var(--section); }
.laws-head { align-items: end; }
.laws-head h2 { grid-column: 1 / 8; font-size: var(--step-head); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.laws-head h2 .step { display: block; padding-left: calc((100% + var(--gutter)) / 7 * 2); }
.laws-head figure { grid-column: 9 / 13; }
.laws-head .print { aspect-ratio: 4 / 5; }
.laws-head figcaption { margin-top: var(--s-3); color: var(--muted); }
.law-table { width: 100%; margin-top: var(--s-16); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.law-table caption { text-align: left; }
.law-table th, .law-table td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-3); }
.law-table thead th { font-weight: var(--w-strong); padding-top: 0; }
.law-table tbody tr:nth-child(odd) td { background: var(--surface); }
.law-table .yr { width: 13%; }
.law-table .act { width: 31%; }
.law-table .who { width: 28%; }
.law-table .what { text-align: right; }
.law-table .gap td { background: transparent !important; padding: var(--s-2) 0; }
.law-table td .sub { display: block; color: var(--muted); font-size: var(--step-small); line-height: var(--lh-small); }
.laws-note { margin-top: var(--s-8); color: var(--muted); font-size: var(--step-small); line-height: var(--lh-small); max-width: 70ch; }

/* ---------- 8. pytania (rozwijane) ---------- */
.faq { padding-block: var(--section); overflow-x: clip; }
.faq h2 { font-size: var(--step-head); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.faq-list { margin-top: var(--s-20); }
.faq-list details { grid-column: 5 / 13; position: relative; }
.faq-list details + details { margin-top: var(--s-3); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-6); min-height: var(--s-14); padding: var(--s-4) var(--s-6); margin-inline: calc(var(--s-6) * -1); cursor: pointer; font-size: var(--step-lead); line-height: var(--lh-lead); transition: background-color var(--t-hover) ease; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { transition: transform var(--t-state) var(--ease-out); }
.faq-list details[open] { background: var(--bg); margin-inline: calc(var(--s-6) * -1); padding-inline: var(--s-6); }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-list .answer { padding: 0 0 var(--s-8); }
.faq-list .answer p { max-width: 48ch; }
@media (hover: hover) and (pointer: fine) {
  .faq-list details:not([open]) summary:hover { background: var(--hover-surface); }
}

/* ---------- 9. kontakt: adres jako typografia ---------- */
.contact { position: relative; z-index: var(--z-main); min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: var(--s-10) var(--margin) var(--s-8); }
.contact > p { font-size: var(--step-lead); line-height: var(--lh-lead); max-width: 26ch; }
.contact .email { grid-row: 3; align-self: end; display: block; margin-bottom: 12vh; font-size: var(--step-poster); line-height: var(--lh-head); letter-spacing: var(--track-poster); text-decoration: none; white-space: nowrap; transition: color var(--t-hover) ease; }
.contact .email .at { display: inline; }
.contact-foot { grid-row: 4; display: flex; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; font-size: var(--step-small); line-height: var(--lh-small); }
.contact-foot ul, .doc-foot ul { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.contact-foot a, .doc-foot a { display: inline-block; padding-block: var(--s-2); }
@media (hover: hover) and (pointer: fine) {
  .contact .email:hover { color: var(--inverse-link); }
}

/* ---------- 10. stopka: nazwa na całą szerokość ---------- */
.foot { position: sticky; bottom: 0; z-index: var(--z-footer); min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; padding: var(--s-10) var(--margin) var(--s-5); }
.foot-cols { row-gap: var(--s-8); font-size: var(--step-small); line-height: var(--lh-small); }
.foot-cols > div { grid-column: span 3; }
.foot-cols h2 { font-size: inherit; font-weight: var(--w-strong); margin-bottom: var(--s-2); }
.foot-cols li { color: var(--accent-soft); }
.foot-cols a { display: inline-block; padding-block: var(--s-1); text-decoration: none; text-underline-offset: 0.2em; }
.foot .credits { grid-row: 2; align-self: center; max-width: 92ch; font-size: var(--step-small); line-height: var(--lh-small); }
.foot .credits a { text-underline-offset: 0.15em; }
.wordmark { grid-row: 3; width: 100%; height: auto; margin-bottom: var(--s-5); fill: var(--accent-ink); }
.legal { grid-row: 4; font-size: var(--step-small); line-height: var(--lh-small); color: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
  .foot-cols a:hover { text-decoration: underline; }
}

/* ---------- tablet (do 60em) ---------- */
@media (max-width: 60em) {
  .audits-copy, .menu, .method-copy, .slip { grid-column: 1 / -1; }
  .menu { position: static; justify-self: stretch; max-width: none; margin-top: var(--s-14); }
  .slip { margin-top: var(--s-12); justify-self: stretch; width: 100%; }
  .measure-top h2, .measure-top p { grid-column: 1 / -1; }
  .measure-top p { margin-top: var(--s-6); }
  .laws-head h2 { grid-column: 1 / -1; }
  .laws-head figure { grid-column: 1 / 8; margin-top: var(--s-12); }
  .faq-list details { grid-column: 1 / -1; }
  .price-foot p, .price-foot .actions { grid-column: 1 / -1; }
  .price-foot .actions { justify-self: start; text-align: left; margin-top: var(--s-8); }
  .foot-cols > div { grid-column: span 6; }
  .doc-body > * { grid-column: 1 / -1; }
}

/* ---------- telefon (do 40em) ---------- */
@media (max-width: 40em) {
  .top nav li.wide { display: none; }
  .hero { grid-template-rows: 22svh auto 1fr; padding-bottom: var(--s-6); }
  .hero-foot { justify-self: start; text-align: left; }
  .hero-foot p { font-size: var(--step-body); margin-left: 0; }
  .intro { grid-template-columns: 1fr; grid-template-rows: auto; padding: var(--s-20) var(--margin) var(--s-10); min-height: 0; row-gap: var(--s-10); }
  .stairs span:nth-child(2) { padding-left: 5vw; }
  .stairs span:nth-child(3) { padding-left: 10vw; }
  .stairs span:nth-child(4) { padding-left: 15vw; }
  .intro-pics { grid-column: 1; grid-row: auto; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .intro-note { grid-row: auto; }
  .menu { margin-inline: calc(var(--s-1) * -1); }
  .measure { padding-bottom: 0; }
  .specimens { margin-top: var(--s-12); }
  .specimen { grid-column: 1 / -1; padding: var(--s-5) var(--margin) var(--s-8); margin-inline: calc(var(--margin) * -1); }
  .specimen + .specimen { background: var(--inverse-bg); color: var(--inverse-ink); }
  .specimen + .specimen .caption { color: var(--inverse-muted); }
  .laws-head h2 .step { padding-left: 8vw; }
  .laws-head figure { grid-column: 1 / -1; }
  .law-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .law-table, .law-table tbody, .law-table tr, .law-table td { display: block; width: auto; }
  .law-table tr { padding: var(--s-4) var(--s-3); }
  .law-table tbody tr:nth-child(odd) { background: var(--surface); }
  .law-table tbody tr:nth-child(odd) td { background: transparent; }
  .law-table td, .law-table td[class] { width: auto; padding: 0; text-align: left; }
  .law-table td.yr:empty { display: none; }
  .law-table td.yr { font-size: var(--step-lead); margin-bottom: var(--s-2); }
  .law-table td.who, .law-table td.what { color: var(--muted); font-size: var(--step-small); display: inline; }
  .law-table td.who::after { content: " · "; }
  .law-table .gap { display: none; }
  .faq-list { margin-top: var(--s-12); }
  .contact .email { font-size: calc(var(--step-poster) * 1.3); white-space: normal; margin-bottom: 0; align-self: center; }
  .contact .email .at { display: block; }
  .contact-foot { flex-direction: column; gap: var(--s-2); }
}

/* ---------- ruch (treść widoczna bez skryptu) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 [data-line] { transform: translateY(105%); animation: line-up var(--t-enter) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger) + 150ms); }
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-enter) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * var(--stagger) + 900ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .reveal-pic[data-reveal] { opacity: 1; transform: none; }
  .js .reveal-pic[data-reveal] .print { clip-path: inset(0 0 100% 0); transition: clip-path var(--t-picture) var(--ease-in-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
  .js .reveal-pic[data-reveal].is-in .print { clip-path: inset(0); }
  .js .reveal-pic[data-reveal] .print > * { transform: scale(1.12); transition: transform var(--t-picture) var(--ease-soft); }
  .js .reveal-pic[data-reveal].is-in .print > * { transform: none; }
  .js .specimen[data-reveal] .figure { transform: translateY(12%); transition: transform var(--t-picture) var(--ease-out); }
  .js .specimen[data-reveal].is-in .figure { transform: none; }
  .faq-list details[open] .answer { animation: answer-in var(--t-state) var(--ease-out); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .band img { transform: none !important; }
  .button:active, .check label:active .box { transform: none; }
}

/* ---------- podstrony z dokumentami (deklaracja, polityka, 404) ---------- */
.doc-top { position: static; background: var(--bg); }
.doc { padding: calc(var(--section) * 0.6) var(--margin) var(--section); }
.doc h1 { font-size: var(--step-head); line-height: var(--lh-head); letter-spacing: var(--track-head); max-width: 16ch; }
.doc .lede { margin-top: var(--s-8); font-size: var(--step-lead); line-height: var(--lh-lead); max-width: 40ch; }
.doc-body { margin-top: calc(var(--section) * 0.45); }
.doc-body > * { grid-column: 4 / 11; }
.doc-body h2 { font-size: var(--step-lead); line-height: var(--lh-lead); font-weight: var(--w-strong); margin-top: var(--s-12); }
.doc-body h2:first-child { margin-top: 0; }
.doc-body p, .doc-body ul { margin-top: var(--s-4); max-width: 66ch; }
.doc-body ul { padding-left: var(--s-5); }
.doc-body li + li { margin-top: var(--s-2); }
.todo { background: var(--warn); padding: 0 0.25em; }
.doc-foot { padding: var(--s-8) var(--margin); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); font-size: var(--step-small); line-height: var(--lh-small); }
.not-found { min-height: 100svh; display: grid; align-content: center; padding: var(--s-20) var(--margin); }
.not-found h1 { font-size: var(--step-display); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.not-found p { margin-top: var(--s-8); font-size: var(--step-lead); line-height: var(--lh-lead); max-width: 34ch; }
.not-found .button { margin-top: var(--s-8); justify-self: start; }

/* ---------- blog: lista wpisów i artykuł ---------- */
.top nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.08em; }
.post-list { margin-top: calc(var(--section) * 0.45); }
.post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-2); align-items: baseline; padding: var(--s-6) var(--s-3); margin-inline: calc(var(--s-3) * -1); text-decoration: none; transition: background-color var(--t-hover) ease; }
.post-list li:nth-child(odd) .post { background: var(--surface); }
.post-date { grid-column: 1 / 3; font-size: var(--step-small); line-height: var(--lh-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.post-title { grid-column: 3 / 8; font-size: var(--step-statement); line-height: var(--lh-statement); letter-spacing: var(--track-text); }
.post-sum { grid-column: 8 / 13; max-width: 44ch; }
@media (hover: hover) and (pointer: fine) {
  .post-list li .post:hover { background: var(--hover-surface); }
}
.article-head { padding: calc(var(--section) * 0.6) var(--margin) var(--s-16); align-items: end; row-gap: var(--s-10); }
.article-intro { grid-column: 1 / 8; }
.article-pic { grid-column: 9 / 13; }
.article-pic .print { aspect-ratio: 4 / 5; background: var(--accent-deep); }
.doc-foot p { max-width: 80ch; }
.article-head h1 { font-size: var(--step-head); line-height: var(--lh-head); letter-spacing: var(--track-head); max-width: 14ch; }
.article-head .lede { margin-top: var(--s-8); font-size: var(--step-lead); line-height: var(--lh-lead); max-width: 40ch; }
.article-meta { margin-top: var(--s-8); font-size: var(--step-small); line-height: var(--lh-small); color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.article { padding: var(--s-16) var(--margin) var(--section); }
.article .doc-body { margin-top: 0; }
.doc-body ol { margin-top: var(--s-4); max-width: 66ch; padding-left: var(--s-5); }
.doc-body .note { background: var(--surface); padding: var(--s-6); }
.article-next { padding-block: var(--section); }
.article-next .price-foot { margin-top: 0; }
@media (max-width: 60em) {
  .post-date, .post-title, .post-sum, .doc-body > *, .article-intro { grid-column: 1 / -1; }
  .article-pic { grid-column: 1 / 7; }
}