/* ==========================================================================
   Narzedzia dla Biur - components.css
   Wymaga design-tokens.css wczytanego WCZESNIEJ. Zero JS.
   ========================================================================== */

/* ---------- 1. reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-paper); color: var(--c-ink);
  font-family: var(--font-text); font-size: var(--fs-400);
  line-height: var(--lh-body); font-weight: var(--fw-base);
  text-wrap: pretty; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--c-yellow-deep); }
:focus-visible { outline: var(--focus-w) solid var(--c-ink); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
.band a:focus-visible, .band :focus-visible { outline-color: var(--c-yellow); }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--c-yellow); color: var(--c-ink);
  padding: var(--s-3) var(--s-4); font-weight: var(--fw-bold); z-index: 50; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 2. typografia ---------- */
.h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: var(--fw-display); }
.h1 { font-size: var(--fs-800); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; }
.h2 { font-size: var(--fs-700); line-height: var(--lh-head); letter-spacing: var(--ls-head); text-wrap: balance; }
.h3 { font-size: var(--fs-600); line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.h4 { font-size: var(--fs-500); line-height: var(--lh-snug); }
.lede { font-size: var(--fs-500); line-height: 1.45; }
.small { font-size: var(--fs-200); }
.meta { font-size: var(--fs-100); color: var(--c-ink-soft); }
.eyebrow { font-size: var(--fs-100); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--c-ink-soft); }
.num { font-variant-numeric: tabular-nums; }

.mark { background: var(--c-yellow); padding: 0.02em 0.16em 0.06em; margin: 0 -0.04em;
  display: inline-block; transform: rotate(-1.4deg);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mark--flat { transform: none; }
.uline { background: linear-gradient(to top, var(--c-yellow) 0 34%, transparent 34%); padding: 0 0.05em; }
.strike { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--c-ink-soft); }

.prose { max-width: var(--w-text); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-700);
  line-height: var(--lh-head); letter-spacing: var(--ls-head); margin-top: var(--s-8); }
.prose h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-600);
  line-height: var(--lh-head); margin-top: var(--s-7); }
.prose ul, .prose ol { display: grid; gap: var(--s-3); padding-left: var(--s-5); }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: calc(-1 * var(--s-5)); top: 0.55em;
  width: 10px; height: 10px; background: var(--c-yellow); border: 1px solid var(--c-ink); }
.prose ol { list-style: decimal; }
.prose ol li::marker { font-weight: var(--fw-bold); }
.prose blockquote { border-left: var(--bw-thick) solid var(--c-yellow); padding-left: var(--s-4);
  font-size: var(--fs-500); line-height: 1.45; }

/* ---------- 3. uklad ---------- */
.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--s-4); }
.wrap--text { max-width: calc(var(--w-text) + 2 * var(--s-4)); }
.wrap--narrow { max-width: calc(var(--w-narrow) + 2 * var(--s-4)); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--s-6); } }
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: var(--sec-y-tight); }
.sec--warm { background: var(--c-paper-warm); }
.sec + .sec { border-top: 1px solid var(--c-line); }
.sec--warm + .sec, .sec + .sec--warm, .sec--flush + .sec { border-top: 0; }
.stack { display: grid; gap: var(--s-4); }
.stack--4 { gap: var(--s-4); }
.stack--5 { gap: var(--s-5); }
.stack--6 { gap: var(--s-6); }
.stack--7 { gap: var(--s-7); }
.row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.grid-2, .grid-3 { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.hr { border: 0; border-top: 1px solid var(--c-line); }
.hr--ink { border: 0; border-top: var(--bw) solid var(--c-ink); }

/* ---------- 4. naglowek strony ---------- */
.site-head { border-bottom: var(--bw) solid var(--c-ink); background: var(--c-paper); }
.site-head__in { display: flex; align-items: center; gap: var(--s-4); justify-content: space-between;
  min-height: var(--tap); padding-block: var(--s-3); flex-wrap: wrap; }
.logo { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-300);
  line-height: 1.05; letter-spacing: var(--ls-tight); text-decoration: none; text-transform: uppercase; }
.logo b { display: block; font-weight: inherit; }
.logo .mark { padding: 0 0.14em; }
.nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.nav a { font-size: var(--fs-200); font-weight: var(--fw-semi); text-decoration: none;
  min-height: var(--tap); display: inline-flex; align-items: center; }
.nav a:hover, .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--c-yellow); }

/* ---------- 5. przyciski ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-5);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-400);
  letter-spacing: -0.01em; text-decoration: none; text-align: center;
  border: var(--bw) solid var(--c-ink); border-radius: var(--r-2);
  background: var(--c-yellow); color: var(--c-ink); cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.btn:hover { background: var(--c-yellow-deep); }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--c-ink); color: var(--c-paper); }
.btn--ink:hover { background: #000; }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--c-yellow-wash); }
.btn--lg { min-height: 60px; padding: var(--s-4) var(--s-6); font-size: var(--fs-500); }
.btn--block { display: flex; width: 100%; }
.btn--shadow { box-shadow: var(--shadow-block); }
.btn--shadow:hover { box-shadow: 3px 3px 0 var(--c-ink); transform: translate(3px, 3px); }
.btn[aria-disabled="true"] { background: var(--c-line); color: var(--c-ink-soft); border-color: var(--c-line); pointer-events: none; }
.btn-note { font-size: var(--fs-100); color: var(--c-ink-soft); }

/* ---------- 6. hero ---------- */
.hero { padding-block: clamp(40px, 6vw, 88px) var(--sec-y); }
.hero__in { display: grid; gap: var(--s-6); }
.hero .h1 { max-width: 18ch; }
.hero--center { text-align: center; }
.hero--center .h1, .hero--center .lede { margin-inline: auto; }
.hero--center .lede { max-width: 56ch; }
.hero__cta { display: grid; gap: var(--s-3); justify-items: start; }
.hero--center .hero__cta { justify-items: center; }
@media (min-width: 62rem) {
  .hero--split .hero__in { grid-template-columns: 1.05fr 0.95fr; align-items: start; gap: var(--s-8); }
}

/* ---------- 7. lista checkmarkow ---------- */
.checks { display: grid; gap: var(--s-3); }
.checks > li { position: relative; padding-left: 38px; line-height: var(--lh-snug); }
.checks > li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.05em;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--c-yellow); border: var(--bw) solid var(--c-ink);
  font-family: var(--font-text); font-weight: var(--fw-bold); font-size: 15px; line-height: 1; color: var(--c-ink);
}
.checks--lg > li { padding-left: 46px; font-size: var(--fs-500); }
.checks--lg > li::before { width: 32px; height: 32px; font-size: 18px; }
.checks--x > li::before { content: "\00d7"; background: var(--c-paper); font-size: 18px; }

/* ---------- 8. czarny pas i pas CTA ---------- */
.band { background: var(--c-ink); color: var(--c-paper); padding-block: var(--s-7); }
.band .h2, .band .h3 { color: var(--c-paper); }
.band__line { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-700);
  line-height: var(--lh-head); letter-spacing: var(--ls-head); max-width: 30ch; }
.band .mark { color: var(--c-ink); }
.band--yellow { background: var(--c-yellow); color: var(--c-ink); }
.band--yellow .band__line { color: var(--c-ink); }
.cta-band__in { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 62rem) { .cta-band__in { grid-template-columns: 1fr auto; gap: var(--s-8); } }

/* ---------- 9. boxy ---------- */
.box { border: var(--bw) solid var(--c-ink); padding: var(--s-5); background: var(--c-paper); }
.box--yellow { background: var(--c-yellow-wash); }
.box--solid-yellow { background: var(--c-yellow); }
.box--ink { background: var(--c-ink); color: var(--c-paper); }
.box--ink .h3, .box--ink .box__title { color: var(--c-paper); }
.box--plain { border: 1px solid var(--c-line); }
.box__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-500);
  line-height: var(--lh-snug); letter-spacing: var(--ls-head); }
.box > * + * { margin-top: var(--s-4); }
@media (min-width: 48rem) { .box { padding: var(--s-6); } }

/* ---------- 10. dla kogo / dla kogo NIE ---------- */
.fit { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col { border: var(--bw) solid var(--c-ink); padding: var(--s-5); }
.fit__col--yes { background: var(--c-yellow-wash); }
.fit__head { display: flex; gap: var(--s-3); align-items: baseline; margin-bottom: var(--s-4); flex-wrap: wrap; }
.fit__tag { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-100);
  letter-spacing: var(--ls-caps); text-transform: uppercase; background: var(--c-ink); color: var(--c-paper);
  padding: 3px var(--s-2); }

/* ---------- 11. gwarancja / zdjecie ryzyka ---------- */
.guarantee { border: var(--bw-thick) solid var(--c-ink); padding: var(--s-5); background: var(--c-paper);
  box-shadow: var(--shadow-block); }
.guarantee > * + * { margin-top: var(--s-4); }
.guarantee__stamp { display: inline-block; background: var(--c-yellow); border: var(--bw) solid var(--c-ink);
  padding: var(--s-2) var(--s-3); font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-200); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.risk { display: grid; gap: var(--s-3); }
.risk > li { display: flex; gap: var(--s-3); align-items: flex-start; font-weight: var(--fw-semi); }
.risk > li::before { content: "\2713"; flex: 0 0 auto; width: 24px; height: 24px; display: grid;
  place-items: center; background: var(--c-ink); color: var(--c-yellow); font-size: 14px; line-height: 1; font-weight: 700; }
@media (min-width: 48rem) { .guarantee { padding: var(--s-6); } }

/* ---------- 12. licznik-konkret ---------- */
.stats { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.stat { border-top: var(--bw-thick) solid var(--c-ink); padding-top: var(--s-3); }
.stat__n { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-900);
  line-height: var(--lh-tight); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; display: block; }
.stat__n small { font-size: 0.4em; letter-spacing: -0.01em; }
.stat__cap { font-size: var(--fs-200); color: var(--c-ink-soft); max-width: 26ch; }
.stat--mark .stat__n { background: linear-gradient(to top, var(--c-yellow) 0 22%, transparent 22%); }

/* ---------- 13. cytat bolu ---------- */
.msg { border: 1px solid var(--c-line); background: var(--c-paper); padding: var(--s-4); }
.msg__head { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.msg__ava { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: repeating-linear-gradient(135deg, #e9e7df 0 4px, #f6f5f0 4px 8px); border: 1px solid var(--c-line); }
.msg__who { font-size: var(--fs-200); font-weight: var(--fw-bold); line-height: 1.2; }
.msg__when { font-size: var(--fs-100); color: var(--c-ink-soft); }
.msg__bubble { background: var(--c-paper-warm); border-radius: 4px 16px 16px 16px; padding: var(--s-4);
  font-size: var(--fs-300); line-height: 1.5; }
.msg__bubble p + p { margin-top: var(--s-3); }
.msg__src { margin-top: var(--s-2); font-size: var(--fs-100); color: var(--c-ink-soft); }
.msgs { display: grid; gap: var(--s-4); }
@media (min-width: 62rem) { .msgs--3 { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* ---------- 14. FAQ bez JS ---------- */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--c-line); }
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__q { display: flex; gap: var(--s-4); justify-content: space-between; align-items: baseline;
  min-height: var(--tap); padding-block: var(--s-4); cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-500); line-height: var(--lh-snug); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 1.5em; line-height: 1; flex: 0 0 auto; }
.faq__item[open] .faq__q::after { content: "\2013"; }
.faq__item[open] .faq__q { box-shadow: inset 0 -3px 0 var(--c-yellow); }
.faq__a { padding-bottom: var(--s-5); max-width: var(--w-text); }
.faq__a > * + * { margin-top: var(--s-3); }

/* ---------- 15. formularze ---------- */
.form { display: grid; gap: var(--s-4); max-width: 520px; }
.form--wide { max-width: none; }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--fs-200); font-weight: var(--fw-bold); }
.field__hint { font-size: var(--fs-100); color: var(--c-ink-soft); }
.input, .select, .textarea { min-height: var(--tap); width: 100%; padding: var(--s-3) var(--s-4);
  background: var(--c-paper); color: var(--c-ink); border: var(--bw) solid var(--c-ink); border-radius: var(--r-2); }
.textarea { min-height: 120px; }
.input::placeholder { color: #8b8a84; }
.input[aria-invalid="true"] { border-color: var(--c-err); background: var(--c-err-wash); }
.field__err { font-size: var(--fs-200); font-weight: var(--fw-bold); color: var(--c-err); }
.check { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start;
  font-size: var(--fs-200); line-height: 1.45; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--c-ink); }
.form__legal { font-size: var(--fs-100); color: var(--c-ink-soft); max-width: 60ch; }
fieldset { border: 1px solid var(--c-line); padding: var(--s-4); margin: 0; }
legend { font-size: var(--fs-200); font-weight: var(--fw-bold); padding-inline: var(--s-2); }
.form-card { border: var(--bw) solid var(--c-ink); padding: var(--s-5); background: var(--c-paper); }
.form-card--yellow { background: var(--c-yellow-wash); }
@media (min-width: 48rem) {
  .form-card { padding: var(--s-6); }
  .field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* ---------- 16. karta produktu ---------- */
.cards { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { border: var(--bw) solid var(--c-ink); background: var(--c-paper); display: flex; flex-direction: column; }
.card__shot { border-bottom: var(--bw) solid var(--c-ink); }
.card__body { padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; flex: 1; }
.card__tag { justify-self: start; font-size: var(--fs-100); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase; background: var(--c-yellow);
  border: 1px solid var(--c-ink); padding: 2px var(--s-2); }
.card__tag--free { background: var(--c-ink); color: var(--c-paper); }
.card__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-600);
  line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.card__title a { text-decoration: none; }
.card__title a:hover { box-shadow: inset 0 -4px 0 var(--c-yellow); }
.card__desc { font-size: var(--fs-200); color: var(--c-ink-soft); }
.card__foot { margin-top: auto; padding: var(--s-4); border-top: 1px solid var(--c-line);
  display: flex; gap: var(--s-3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.price { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-600);
  font-variant-numeric: tabular-nums; }
.price small { font-size: 0.5em; font-weight: var(--fw-semi); color: var(--c-ink-soft); }

/* ---------- 17. cennik z kotwiczeniem ---------- */
.tiers { display: grid; gap: var(--s-5); align-items: stretch; }
@media (min-width: 62rem) { .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } }
.tier { border: var(--bw) solid var(--c-ink); padding: var(--s-5); display: grid; gap: var(--s-4);
  align-content: start; background: var(--c-paper); }
.tier--pick { background: var(--c-yellow-wash); border-width: var(--bw-thick); box-shadow: var(--shadow-block); }
.tier__flag { justify-self: start; background: var(--c-ink); color: var(--c-paper); padding: 3px var(--s-2);
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-100);
  letter-spacing: var(--ls-caps); text-transform: uppercase; }
.tier__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-600);
  line-height: var(--lh-head); }
.tier__price { display: flex; gap: var(--s-3); align-items: baseline; flex-wrap: wrap; }
.tier__now { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-800);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tier__was { font-size: var(--fs-400); }
.tier__note { font-size: var(--fs-100); color: var(--c-ink-soft); }
.tier .checks > li { font-size: var(--fs-200); padding-left: 32px; }
.tier .checks > li::before { width: 22px; height: 22px; font-size: 13px; }

/* ---------- 18. placeholdery ---------- */
.shot { position: relative; display: grid; place-items: center; text-align: center;
  aspect-ratio: 16 / 10; padding: var(--s-4);
  background: repeating-linear-gradient(135deg, #eeece4 0 6px, #f8f7f2 6px 12px);
  border: 1px dashed #b9b6ab; color: #55534c;
  font-family: var(--font-mono); font-size: var(--fs-100); line-height: 1.4; }
.shot--wide { aspect-ratio: 16 / 7; }
.shot--tall { aspect-ratio: 3 / 4; }
.shot--square { aspect-ratio: 1 / 1; }
.shot--flat { aspect-ratio: auto; min-height: 120px; }
.shot--ink { border-color: var(--c-ink); }
.shot__label { display: block; max-width: 34ch; }
.shot__dim { display: block; margin-top: var(--s-1); opacity: .7; }
.errbox { font-family: var(--font-mono); font-size: var(--fs-200); line-height: 1.5;
  background: var(--c-err-wash); border: var(--bw) solid var(--c-err); color: #5c1414;
  padding: var(--s-4); overflow-x: auto; }
.codeline { font-family: var(--font-mono); font-size: var(--fs-200); background: var(--c-paper-warm);
  border: 1px solid var(--c-line); padding: 2px var(--s-2); }

/* ---------- 19. kroki, spis tresci, tabela ---------- */
.steps { display: grid; gap: var(--s-5); counter-reset: st; }
@media (min-width: 62rem) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: var(--s-2); counter-increment: st; justify-items: start; }
.step::before { content: counter(st, decimal-leading-zero);
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-600); line-height: 1;
  background: var(--c-yellow); border: var(--bw) solid var(--c-ink); width: 52px; padding: var(--s-2); text-align: center; }
.toc { border-left: var(--bw-thick) solid var(--c-yellow); padding: var(--s-2) 0 var(--s-2) var(--s-4); }
.toc ol { display: grid; gap: var(--s-2); padding-left: var(--s-5); list-style: decimal; }
.toc li { font-size: var(--fs-200); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-200); }
.tbl th, .tbl td { text-align: left; padding: var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.tbl thead th { border-bottom: var(--bw) solid var(--c-ink); font-weight: var(--fw-bold); }

/* ---------- 20. status platnosci ---------- */
.status { display: grid; gap: var(--s-5); justify-items: start; border: var(--bw-thick) solid var(--c-ink);
  padding: var(--s-5); }
.status__badge { display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-200);
  letter-spacing: var(--ls-caps); text-transform: uppercase; padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-ink); }
.status--wait .status__badge { background: var(--c-warn-wash); }
.status--ok .status__badge { background: var(--c-yellow); }
.status--err .status__badge { background: var(--c-err-wash); border-color: var(--c-err); color: #5c1414; }
.status__num { font-family: var(--font-mono); font-size: var(--fs-200); }
@media (min-width: 48rem) { .status { padding: var(--s-6); } }

/* ---------- 21. autor ---------- */
.author { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 48rem) { .author { grid-template-columns: 200px 1fr; gap: var(--s-6); } }
.author__name { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-500); }

/* ---------- 22. stopka ---------- */
.site-foot { border-top: var(--bw) solid var(--c-ink); padding-block: var(--s-7) var(--s-6); font-size: var(--fs-200); }
.site-foot__grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .site-foot__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-7); } }
.foot-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-200);
  letter-spacing: var(--ls-caps); text-transform: uppercase; margin-bottom: var(--s-3); }
.foot-list { display: grid; gap: var(--s-2); }
.foot-list.row { display: flex; flex-wrap: wrap; }
.foot-list a { text-decoration: none; }
.foot-list a:hover { box-shadow: inset 0 -2px 0 var(--c-yellow); }
.site-foot__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line);
  color: var(--c-ink-soft); font-size: var(--fs-100); display: grid; gap: var(--s-2); }

/* ---------- 23. utils ---------- */
.u-center { text-align: center; }
.u-max-40 { max-width: 40ch; }
.u-max-56 { max-width: 56ch; }
.u-max-64 { max-width: 64ch; }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spec { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #6d6b64; background: var(--c-paper-warm); border: 1px solid var(--c-line); padding: 2px 6px; display: inline-block; }

/* ---------- 24. print ---------- */
@media print { body { font-size: 11pt; } a { text-decoration: none; } }