/* bezpiecznyregulamin.pl - strony publiczne.

   Design z 2026-09-04: system Kreatora (kreator.legalgeek.pl), akcent rozowy
   #DA4167. Tokeny kolorow, typografii, odstepow, promieni, cieni i ruchu sa
   przeniesione z tokenow Kreatora; nazwy z prefiksem --lg-* to jego wlasne
   nazwy, a --paper/--surface/--good/--good-ink zostaja przy nazwach, ktore
   niosa regule AA i pilnuje ich tests/report/test_contrast.py.

   Jedna zasada rzadzi rozem: **roz rysuje, nie pisze**. Biel na #DA4167 daje
   4,26:1, czyli mniej niz AA dla napisu 15-16 px - dlatego tekst, linki i tlo
   przycisku biora ciemniejszy #B93254 (5,76:1), a #DA4167 zostaje przy
   obrysach, paskach postepu, kropkach i obramowaniu focusa (grafika, 3:1).

   Zadnych stylow inline: CSP strony ma style-src 'self'. Zadnego CDN-u fontow
   ani skryptu - Poppins jedzie z naszego origin (Z 20.2). */

/* Poppins is served from our own origin, never from a font CDN (Z 20.2: speed
   and GDPR - a Google Fonts request would hand every visitor's IP to a third
   party before they even read the page). Files, subsets and unicode ranges as
   published by Google Fonts under the OFL; the licence sits next to them in
   static/fonts/OFL.txt. latin-ext carries the Polish diacritics. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/poppins-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/poppins-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/poppins-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/poppins-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/poppins-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/poppins-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/poppins-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/poppins-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Akcent Kreatora. --lg-accent jest grafika: obrysy, paski, kropki, focus.
     Pisze i sprzedaje --lg-accent-deep (AA na bieli i na tlach sekcji). */
  --lg-accent: #da4167;
  --lg-accent-deep: #b93254;
  --lg-accent-press: #a02a49;
  /* Jak --urgent-soft: cztery kroki jasniej niz #fbe9ee z systemu Kreatora,
     zeby zielen marki miala na tym tle 3,09:1 zamiast 2,92:1 (DES-1b). */
  --lg-accent-soft: #fff0f5;
  --lg-accent-line: #ecc0cb;
  --lg-accent-line-strong: #e6a3b4;
  --lg-accent-on-dark: #f4b1c2;

  --ink: #1f2430;
  --ink-strong: #182039;
  --ink-soft: #394255;
  --muted: #5a6272;
  --ink-on-dark: #d9dee8;

  --paper: #fff;
  --surface: #f7f8fa;
  --surface-tint: #f2f4f7;
  --line: #e4e7ec;
  --line-strong: #cfd4dd;

  /* Zielen marki rysuje grafike (3:1); napis bierze --good-ink (4,5:1, AA). */
  --good: #1e9e6a;
  --good-ink: #14754e;
  --good-soft: #e8f5ef;
  --good-line: #a8dcc4;
  --review: #b54708;
  --review-soft: #fbf3e8;
  --review-line: #ebd3b4;
  /* Ten sam hex, ktorym raport maluje pasmo "wymaga pilnej poprawy"
     (`engine/scoring.py`, DEFAULT_COLORS) - kafelek na landingu pokazuje to
     samo ryzyko co przykladowy raport w ramce obok, wiec musi je pokazac tym
     samym czerwonym. 5,44:1 na --paper i 5,12:1 na --surface, czyli AA z zapasem. */
  --urgent: #c0392b;
  /* O dwa kroki jasniejszy niz #fbedeb z systemu Kreatora: na tamtym zielen
     marki dawala 2,99:1, czyli o wlos ponizej progu 3:1 dla grafiki. Roznica
     jest niewidoczna, gwarancja - mierzalna (DES-1b). */
  --urgent-soft: #fdf1ef;
  --urgent-line: #e9c2bc;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 9999px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --shadow-sm: 0 1px 2px rgba(31, 36, 48, .06), 0 1px 3px rgba(31, 36, 48, .05);
  --shadow-md: 0 8px 24px rgba(31, 36, 48, .08);
  --shadow-lg: 0 16px 42px rgba(31, 36, 48, .11);
  --shadow-accent: 0 8px 20px rgba(218, 65, 103, .2);

  --motion-fast: 160ms;
  --motion-normal: 220ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --container: 1200px;
  --gap-section: clamp(48px, 5.6vw, 72px);
  --font: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { color: var(--ink-strong); font-weight: 700; letter-spacing: -.03em; line-height: 1.14; margin: 0; }
h1 { font-size: clamp(2.05rem, 1.25rem + 3.4vw, 3.25rem); letter-spacing: -.045em; line-height: 1.06; }
h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.25rem); letter-spacing: -.04em; }
h3 { font-size: 1.19rem; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0 0 var(--s4); max-width: 68ch; }
a { color: var(--lg-accent-deep); text-decoration: none; }
a:hover { color: var(--lg-accent-press); text-decoration: underline; }
strong, b { font-weight: 600; }
img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--s5); }
.wrap--narrow { max-width: 860px; }
.lede { font-size: clamp(1.06rem, 1rem + .4vw, 1.19rem); line-height: 1.65; color: var(--ink-soft); }
.fine { font-size: .81rem; color: var(--muted); line-height: 1.55; }
.section { padding-block: var(--gap-section); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section--tint { background: var(--surface-tint); }
.section > .wrap > h2 { margin-bottom: var(--s5); max-width: 22ch; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--ink-strong); color: var(--paper); padding: var(--s3) var(--s4);
}
.skip:focus { left: var(--s4); top: var(--s4); }

/* --- naglowek sekcji: nadtytul, tytul, zdanie ------------------------------ */
.lg-eyebrow {
  display: block; margin: 0 0 var(--s3);
  font-size: .75rem; font-weight: 700; letter-spacing: .085em;
  text-transform: uppercase; color: var(--lg-accent-deep);
}
.lg-section-heading { margin-bottom: var(--s6); max-width: 34rem; }
.lg-section-heading p { margin: var(--s4) 0 0; color: var(--ink-soft); }
.lg-section-heading--center { margin-inline: auto; text-align: center; max-width: 40rem; }

/* --- nawigacja: przelacznik jest czystym CSS-em ----------------------------
   Panel rozwija ukryty checkbox, nie skrypt: CSP strony nie dopuszcza skryptu
   inline, a nawigacja ma dzialac zanim cokolwiek sie zaladuje. Powyzej 75rem
   przelacznik znika, a panel stoi otwarty w linii. */
.wp-main-nav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); }
.wp-main-nav__container {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--s3) var(--s5);
}
.wp-main-nav__brand { display: flex; align-items: center; margin-right: auto; }
.wp-main-nav__brand img { display: block; width: 208px; height: auto; }
.wp-main-nav__switch { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wp-main-nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: .88rem; font-weight: 600; color: var(--ink-strong); cursor: pointer;
}
.wp-main-nav__toggle:hover { background: var(--surface); }
.wp-main-nav__switch:focus-visible + .wp-main-nav__toggle { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.wp-main-nav__bars { display: block; width: 18px; height: 18px; fill: currentColor; }
.wp-main-nav__panel { display: none; width: 100%; }
.wp-main-nav__switch:checked ~ .wp-main-nav__panel { display: block; padding-bottom: var(--s3); }
.wp-main-nav__menu { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-direction: column; gap: var(--s1); }
.wp-main-nav__menu a { display: block; padding: var(--s2) 0; font-size: .95rem; font-weight: 500; color: var(--ink); }
.wp-main-nav__menu a:hover { color: var(--lg-accent-deep); }
@media (min-width: 75rem) {
  .wp-main-nav__container { flex-wrap: nowrap; }
  .wp-main-nav__toggle { display: none; }
  .wp-main-nav__panel { display: flex; align-items: center; gap: var(--s4); width: auto; min-width: 0; }
  .wp-main-nav__switch:checked ~ .wp-main-nav__panel { padding-bottom: 0; }
  .wp-main-nav__menu { flex-direction: row; align-items: center; gap: clamp(12px, 1.4vw, 20px); margin: 0; }
  .wp-main-nav__menu a { font-size: .88rem; white-space: nowrap; }
}

/* Pasek nawigacji jest przyklejony, wiec kotwica postawiona na y = 0 chowa
   naglowek sekcji za nim (FIX-16: "Sprawdzam za darmo" zostawialo naglowek
   karty na y = 33 px pod paskiem wysokim na 137 px). Odstep bierze najwyzszy
   bezpieczny zapas dla rozwiniętego menu mobilnego. W widoku desktopowym panel
   ma teraz wymuszoną jedną linię. `#zglos` to karta formularza, `#wzor` - karta wzoru
   certyfikatu; reszta kotwic z nawigacji to sekcje. */
.section[id], #zglos, #wzor { scroll-margin-top: 150px; }

/* --- przyciski ------------------------------------------------------------- */
.lg-button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font: inherit; font-size: .94rem; font-weight: 700; line-height: 1.35;
  text-align: center; text-decoration: none; cursor: pointer;
}
.lg-button:hover, .btn:hover { text-decoration: none; }
.lg-button--primary, .btn--primary { color: var(--paper); background: var(--lg-accent-deep); box-shadow: var(--shadow-accent); }
.lg-button--primary:hover, .btn--primary:hover { color: var(--paper); background: var(--lg-accent-press); }
.lg-button--secondary, .btn--ghost { color: var(--ink-strong); background: var(--paper); border-color: var(--line-strong); }
.lg-button--secondary:hover, .btn--ghost:hover { color: var(--ink-strong); border-color: var(--lg-accent-line-strong); }
.lg-button--hero { min-height: 56px; padding-inline: 30px; font-size: 1rem; }
.lg-button--wide, .btn--wide { width: 100%; }
.lg-button__price { font-variant-numeric: tabular-nums; opacity: .92; }
.lg-button[aria-disabled="true"], .lg-button:disabled, .btn:disabled { opacity: .45; pointer-events: none; }

/* --- formularz ------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--lg-accent-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3vw, 32px);
}
.card h2 { font-size: 1.35rem; margin-bottom: var(--s2); }
.card > .fine { margin-bottom: var(--s5); }
.wp-form-group, .field { margin-bottom: var(--s4); }
/* Dwa pola w jednym wierszu dopiero tam, gdzie karta ma na to szerokosc; nizej
   to zwykly blok, wiec kazda grupa zostaje ze swoim marginesem (FORM-1).
   Prog to 72rem, nie 64rem: na 1024 px kolumny wychodzily po ~182 px, wiec
   etykieta "Nazwa sklepu (opcjonalnie)" sie zawijala, a placeholder e-maila
   byl ucinany. Zageszczenie nizej zostaje na 64rem - dotyczy wysokosci, nie
   szerokosci (FIX-7). */
.wp-form-row { display: grid; column-gap: var(--s4); }
@media (min-width: 72rem) { .wp-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wp-form-label, .field label {
  display: block; margin-bottom: var(--s2);
  font-size: .88rem; font-weight: 500; color: var(--ink-strong);
}
.wp-form-input,
.field input[type="url"],
.field input[type="email"],
.field input[type="text"] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper);
}
.wp-form-input:hover, .field input:hover { border-color: var(--muted); }
.wp-form-input:focus, .field input:focus {
  border-color: var(--lg-accent); outline: none;
  box-shadow: 0 0 0 3px var(--lg-accent-soft);
}
.field .hint { display: block; margin-top: var(--s2); font-size: .81rem; color: var(--muted); }
.field label .hint { display: inline; margin: 0; font-weight: 400; }
.wp-form-group--bad .wp-form-input, .field--bad input { border-color: var(--urgent); }

.consent { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--lg-accent-deep); flex: none; }
.consent span { font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }

.wp-form-error, .error { color: var(--urgent); font-size: .84rem; font-weight: 500; margin: var(--s2) 0 0; }
.error--form {
  background: var(--urgent-soft); border: 1px solid var(--urgent-line); border-radius: var(--r-sm);
  padding: var(--s3) var(--s4); margin-bottom: var(--s5); max-width: none; font-weight: 400;
}
/* Zgoda odrzucona nie jest bledem skladni, tylko brakiem decyzji - stad
   bursztyn zamiast czerwieni (ton Z 9.4). */
.error--consent { color: var(--review); }

/* --- chipy: kolor, ikona i slowo, zawsze razem ----------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill); border: 1px solid currentColor;
  padding: 3px 11px; font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
.chip--urgent { color: var(--urgent); background: var(--urgent-soft); border-color: var(--urgent-line); }
.chip--review { color: var(--review); background: var(--review-soft); border-color: var(--review-line); }
.chip--good { color: var(--good-ink); background: var(--good-soft); border-color: var(--good-line); }
.chip--gap { color: var(--muted); border-color: var(--line-strong); }

/* --- hero ------------------------------------------------------------------ */
.hero { padding-block: clamp(32px, 4vw, 56px) var(--gap-section); }
.hero__grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: start; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); } }
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5); padding: 6px 14px 6px 6px;
  border: 1px solid var(--good-line); border-radius: var(--r-pill);
  background: var(--good-soft); color: var(--good-ink);
  font-size: .8rem; font-weight: 600;
}
/* Kolko z ptaszkiem jest tlem napisu, wiec bierze ciemniejsza zielen: biel na
   --good ma 3,41:1, na --good-ink 5,70:1. */
.hero__badge b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--good-ink); color: var(--paper); font-size: .72rem;
}
.hero h1 { margin-bottom: var(--s5); max-width: 17ch; }
.hero__lede { max-width: 54ch; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.hero__meta li { display: flex; align-items: center; gap: var(--s3); font-size: .88rem; color: var(--muted); }
.hero__meta li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

.evidence {
  margin: var(--s6) 0 0; padding: var(--s5);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.evidence__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.evidence__topic { font-size: .69rem; font-weight: 700; letter-spacing: .085em; text-transform: uppercase; color: var(--muted); }
.evidence blockquote {
  margin: 0 0 var(--s4); padding-left: var(--s4);
  border-left: 3px solid var(--lg-accent);
  font-size: 1.02rem; line-height: 1.6; color: var(--ink);
}
.evidence figcaption { font-size: .84rem; color: var(--muted); line-height: 1.6; }

/* Niski ekran desktopowy (laptop 1366x768): formularz ma sie zmiescic bez
   przewijania, wiec hero i karta oddychaja mniej. Warunek `min-width: 64rem`
   trzyma to z dala od telefonow - tam pola zostaja na 48 px, bo palec nie
   zmniejsza sie razem z ekranem (FORM-1). */
@media (min-width: 64rem) and (max-height: 820px) {
  .hero { padding-block: var(--s6) var(--s7); }
  .hero h1 { margin-bottom: var(--s4); }
  .hero__badge { margin-bottom: var(--s4); }
  .card > .fine { margin-bottom: var(--s4); }
  .card .wp-form-group { margin-bottom: var(--s3); }
  .card .wp-form-input { min-height: 44px; padding-block: 9px; }
}

/* --- pasmo liczb ----------------------------------------------------------- */
.lg-proof-strip { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .lg-proof-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.lg-proof-strip strong {
  display: block; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.05; color: var(--ink-strong);
}
.lg-proof-strip span { display: block; margin-top: var(--s2); font-size: .92rem; color: var(--muted); }
.lg-proof-strip + .fine { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.lg-proof-strip + .fine + .fine { margin-top: var(--s2); padding-top: 0; border-top: 0; }

/* --- kroki ----------------------------------------------------------------- */
.steps-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 64rem) { .steps-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s8); } }
.steps-grid .lg-section-heading { margin-bottom: 0; }
.lg-process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.lg-process-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; padding-top: var(--s5); border-top: 1px solid var(--line); }
.lg-process-steps li:first-child { padding-top: 0; border-top: 0; }
.lg-process-steps span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lg-accent-soft); color: var(--lg-accent-deep);
  font-size: .88rem; font-weight: 700;
}
.lg-process-steps h3 { margin-bottom: var(--s2); }
.lg-process-steps p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* --- najczestsze bledy ------------------------------------------------------ */
.problems { display: grid; gap: var(--s4); margin-bottom: var(--s6); }
@media (min-width: 48rem) { .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .problems { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.problem-card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.problem-card--gap { border-color: var(--lg-accent-line); background: linear-gradient(150deg, var(--lg-accent-soft) 0%, #fff 55%); }
.problem-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.problem-card h3 { font-size: 1.02rem; }
.problem-card__share { font-size: 1.02rem; font-weight: 700; color: var(--lg-accent-deep); }
.problem-card blockquote {
  margin: 0; padding-left: var(--s3);
  border-left: 3px solid var(--lg-accent-line-strong);
  font-size: .92rem; line-height: 1.55; color: var(--ink);
}
.problem-card p { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--muted); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* --- przykladowy raport ----------------------------------------------------- */
.preview-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 64rem) { .preview-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s8); } }
.checklist { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); font-size: .95rem; color: var(--ink-soft); }
.checklist li::before { content: "\2713"; color: var(--good-ink); font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); }

.preview { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lg); overflow: hidden; }
.preview__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); font-size: .81rem; color: var(--muted); }
.preview__scores { display: grid; gap: var(--s4); padding: var(--s5); }
@media (min-width: 30rem) { .preview__scores { grid-template-columns: repeat(2, 1fr); } }
.preview__tile { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.preview__label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); }
.preview__value { font-size: 2rem; font-weight: 700; letter-spacing: -.05em; line-height: .95; }
.preview__verdict { display: block; margin: var(--s2) 0 var(--s1); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--ink-strong); }
.preview__verdict--urgent { color: var(--urgent); }
.preview__value--urgent { color: var(--urgent); }
.preview__value--good { color: var(--good-ink); }
.preview__band { display: block; font-size: .78rem; color: var(--muted); }
.preview__bar { display: block; height: 6px; margin-top: var(--s3); border-radius: var(--r-pill); background: var(--line); }
.preview__bar i { display: block; height: 6px; border-radius: var(--r-pill); }
/* Pasek mierzy ryzyko przykladowego raportu: 9 z 10 (data/fixtures/report/sample.json). */
.preview__bar--urgent i { width: 90%; background: var(--urgent); }
.preview__scale { display: block; margin-top: var(--s2); font-size: .72rem; color: var(--muted); }
.preview__rows { margin: 0; padding: 0 var(--s5) var(--s5); list-style: none; display: grid; gap: var(--s3); }
.preview__rows li { padding-top: var(--s3); border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.preview__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s2); font-size: .78rem; font-weight: 600; color: var(--ink-strong); }
.preview__ok { color: var(--good-ink); font-weight: 600; }

/* Okno z prawdziwym raportem (SAMPLE-1). `<dialog>` bez `[open]` jest ukryty
   przez przegladarke, wiec `display` ustawiamy dopiero na otwartym - inaczej
   okno stalo by na stronie zawsze. */
.lg-modal { width: min(96vw, 1100px); height: 90vh; max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
.lg-modal[open] { display: flex; flex-direction: column; }
.lg-modal::backdrop { background: rgba(24, 32, 57, .55); }
.lg-modal__bar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
/* Jak `.footer h2`: h2 zmniejszony do 1 rem musi oddac ujemny letter-spacing,
   inaczej spacja miedzy slowami znika razem z reszta odstepow. */
.lg-modal__title { margin: 0; font-size: 1rem; letter-spacing: 0; }
.lg-modal__close { min-height: 40px; padding-inline: 18px; font-size: .9rem; }
.lg-modal__frame { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: 0; }

/* --- certyfikat: sekcja na landingu (CERT, widok 1b) ------------------------
   Karta jest z tekstu, nie z obrazka: budzet strony glownej to 150 kB. */
.cert-band { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 64rem) { .cert-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s8); } }
.cert-band__actions { align-items: center; }
.cert-card { margin: 0 auto; max-width: 22rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-lg); overflow: hidden; }
.cert-card__head { padding: var(--s4) var(--s5); color: var(--paper); background: var(--ink-strong); }
.cert-card__brand { margin: 0; font-weight: 700; }
/* Numer nie bierze wlasnego koloru - dziedziczy biel z belki. */
.cert-card__number { margin: 0; font-size: .78rem; opacity: .85; }
.cert-card__body { padding: var(--s5); }
.cert-card__shop { margin: var(--s3) 0 var(--s1); font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink-strong); }
.cert-card__valid { margin: 0; font-size: .84rem; color: var(--muted); }
.cert-card__check { margin: var(--s3) 0 0; font-size: .84rem; color: var(--ink-soft); }

/* --- firma i ludzie --------------------------------------------------------- */
.firm-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 64rem) { .firm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); } }
.numbers { display: grid; gap: var(--s5); margin: var(--s5) 0 0; padding: 0; list-style: none; }
@media (min-width: 30rem) { .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.numbers b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink-strong); }
.numbers span { font-size: .84rem; color: var(--muted); }
.people { display: grid; gap: var(--s4); }
.people div { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.people b { display: block; font-weight: 600; color: var(--ink-strong); }
.people span { font-size: .9rem; color: var(--muted); }
.notice {
  margin-top: var(--s5); padding: var(--s3) 0 var(--s3) var(--s5);
  border-left: 3px solid var(--lg-accent);
  color: var(--muted); font-size: .88rem; max-width: 66ch;
}

/* --- FAQ (natywne details, bez skryptu) ------------------------------------- */
.wp-faq-item { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.wp-faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.wp-faq-item__question {
  display: flex; justify-content: space-between; gap: var(--s4);
  font-weight: 600; color: var(--ink-strong); cursor: pointer; list-style: none;
}
.wp-faq-item__question::-webkit-details-marker { display: none; }
.wp-faq-item__question::after { content: "+"; color: var(--lg-accent-deep); font-weight: 700; }
.wp-faq-item[open] .wp-faq-item__question::after { content: "\2013"; }
.wp-faq-item__answer { margin: var(--s3) 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 72ch; }

/* --- ciemne pasmo domykajace ------------------------------------------------ */
.lg-final-cta { background: var(--ink-strong); }
.lg-final-cta__inner { display: grid; gap: var(--s6); align-items: center; padding-block: var(--gap-section); }
@media (min-width: 64rem) { .lg-final-cta__inner { grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--s8); } }
.lg-final-cta__eyebrow { color: var(--lg-accent-on-dark); }
.lg-final-cta__title { color: var(--paper); margin-bottom: var(--s4); }
.lg-final-cta__body { color: var(--ink-on-dark); }
.lg-final-cta__note { color: var(--ink-on-dark); font-size: .84rem; margin: 0; opacity: .82; }

/* --- stopka ----------------------------------------------------------------- */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: var(--s7) var(--s6); font-size: .88rem; color: var(--muted); }
.footer__grid { display: grid; gap: var(--s6); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s7); } }
.footer__brand img { display: block; width: 232px; margin-bottom: var(--s4); }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer h2 { font-size: .88rem; font-weight: 600; letter-spacing: 0; margin-bottom: var(--s3); color: var(--ink-strong); }
.footer__bar { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: .76rem; }

/* --- ekran oczekiwania ------------------------------------------------------ */
.status {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px); max-width: 44rem; margin-bottom: var(--s5);
}
.status h2 { font-size: 1.25rem; }
.status p { margin: var(--s3) 0 0; color: var(--ink-soft); }
.status__code {
  margin: var(--s3) 0 0; padding: var(--s4); overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-strong);
  font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
}
.status__pulse {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--lg-accent); margin-right: var(--s2);
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.status__actions { margin-top: var(--s5); display: flex; gap: var(--s3); flex-wrap: wrap; }
.htmx-request .status__pulse { opacity: .4; }
.profile__group { margin: var(--s5) 0; padding: 0; border: 0; }
.profile__group legend { margin-bottom: var(--s4); font-weight: 600; color: var(--ink-strong); }
.profile__group[hidden] { display: none; }
.profile__conditional { display: grid; gap: var(--s3); margin-top: var(--s4); padding: var(--s4); background: var(--surface); border-radius: var(--r-sm); }
.profile__conditional[hidden] { display: none; }
.profile__conditional .field { margin: 0; }
.profile__progress { display: grid; gap: var(--s2); font-size: .82rem; }
.profile__rail { display: block; overflow: hidden; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.profile__rail i { display: block; width: 0; height: 100%; background: var(--lg-accent); transition: width var(--motion-fast) var(--ease); }
.profile__actions [name="akcja"] { margin-left: auto; }

/* --- publiczna historia zmian prawnych ------------------------------------ */
.legal-history__hero { background: var(--lg-accent-soft); }
.legal-history__counts { display: grid; gap: var(--s3); margin-top: var(--s6); }
.legal-history__counts span { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.legal-history__counts strong { display: block; font-size: 1.5rem; color: var(--ink-strong); }
@media (min-width: 44rem) { .legal-history__counts { grid-template-columns: repeat(3, 1fr); } }
.legal-history__scope { max-width: none; }
.legal-history { list-style: none; margin: var(--s7) 0; padding: 0; }
.legal-change { position: relative; padding: 0 0 var(--s7) var(--s7); border-left: 2px solid var(--line-strong); }
.legal-change::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 3px solid var(--muted); }
.legal-change[data-coverage="checked"]::before { border-color: var(--lg-accent); }
.legal-change:last-child { padding-bottom: 0; }
.legal-change__head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.legal-change__head time { font-size: .84rem; font-weight: 600; color: var(--muted); }
.legal-change__badge { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface); font-size: .75rem; font-weight: 600; }
.legal-change[data-coverage="checked"] .legal-change__badge { color: var(--lg-accent-deep); background: var(--lg-accent-soft); }
.legal-change h2 { margin: var(--s3) 0; font-size: 1.3rem; }
.legal-change__action { padding-left: var(--s4); border-left: 3px solid var(--line-strong); }
.legal-history__cta { margin-top: var(--s8); padding: var(--s6); border-radius: var(--r-lg); color: var(--paper); background: var(--ink-strong); }
.legal-history__cta h2,
.legal-history__cta p { color: var(--paper); background: var(--ink-strong); }

/* Postep analizy: cztery kroki pipeline'u, segment w toku wypelniony do polowy
   - bez animacji szerokosci i bez stylu inline (CSP zabrania). */
.progress { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .progress { grid-template-columns: repeat(4, 1fr); } }
.progress__rail { display: block; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.progress__label { display: block; margin-top: var(--s2); font-size: .81rem; line-height: 1.4; color: var(--muted); }
.progress__step--done .progress__rail { background: var(--lg-accent); }
.progress__step--done .progress__label::before { content: "\2713\00a0"; color: var(--lg-accent-deep); }
.progress__step--current .progress__rail { background: linear-gradient(90deg, var(--lg-accent) 55%, var(--line) 55%); }
.progress__step--current .progress__label { color: var(--ink); font-weight: 600; }

/* --- proza i dokumenty ------------------------------------------------------ */
.prose { max-width: 68ch; }
.prose h1 { margin-bottom: var(--s5); }
.prose h2 { margin: var(--s7) 0 var(--s4); }
.prose h2:first-of-type { margin-top: var(--s6); }
.prose ul { padding-left: 1.2em; color: var(--ink-soft); }
.prose li { margin-bottom: var(--s2); }
.prose .checklist { padding-left: 0; }
.draft, .callout {
  background: var(--lg-accent-soft); border-left: 3px solid var(--lg-accent);
  border-radius: var(--r); padding: var(--s4) var(--s5); margin-bottom: var(--s5); max-width: 68ch;
}
.callout h2 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* --- strona jednego komunikatu ---------------------------------------------- */
.single { max-width: 40rem; }
.single__pill {
  display: inline-block; margin-bottom: var(--s5); padding: 5px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; color: var(--muted);
}
.single h1 { margin-bottom: var(--s5); }

@media (prefers-reduced-motion: no-preference) {
  .lg-button, .btn, .wp-main-nav__menu a, .wp-form-input,
  .field input[type="url"], .field input[type="email"], .field input[type="text"] {
    transition: background-color var(--motion-fast) var(--ease),
      border-color var(--motion-fast) var(--ease),
      box-shadow var(--motion-fast) var(--ease),
      transform var(--motion-fast) var(--ease);
  }
  .lg-button:hover, .btn:hover { transform: translateY(-1px); }
}

/* --- WAIT-1: ekran oczekiwania ----------------------------------------- */
/* Widok 03: siedem etapow sprawdzenia, pasek postepu i szacowany czas. Blok
   jest samodzielny i caly prefiksowany `.wait-`, bo reszte tego arkusza
   przepisuje osobne zadanie; akcent bierze z --lg-accent, ktory jest tu
   grafika (pasek, szyny), nigdy kolorem tekstu. Szerokosci paska nie da sie
   podac stylem inline - CSP zabrania - wiec kazde 5% ma wlasna klase.
   Mobile first: etapy stoja w kolumnie, od 48rem lezy siedem szyn obok siebie. */
.wait-bar {
  margin-top: var(--s4, 16px);
  height: 8px;
  border-radius: var(--r-pill, 9999px);
  background: var(--line, #e4e7ec);
  overflow: hidden;
}
.wait-bar__fill {
  display: block; height: 100%; border-radius: inherit;
  background: var(--lg-accent, #da4167);
  transition: width .6s var(--ease, ease);
}
.wait-bar__fill--p0 { width: 0%; }
.wait-bar__fill--p5 { width: 5%; }
.wait-bar__fill--p10 { width: 10%; }
.wait-bar__fill--p15 { width: 15%; }
.wait-bar__fill--p20 { width: 20%; }
.wait-bar__fill--p25 { width: 25%; }
.wait-bar__fill--p30 { width: 30%; }
.wait-bar__fill--p35 { width: 35%; }
.wait-bar__fill--p40 { width: 40%; }
.wait-bar__fill--p45 { width: 45%; }
.wait-bar__fill--p50 { width: 50%; }
.wait-bar__fill--p55 { width: 55%; }
.wait-bar__fill--p60 { width: 60%; }
.wait-bar__fill--p65 { width: 65%; }
.wait-bar__fill--p70 { width: 70%; }
.wait-bar__fill--p75 { width: 75%; }
.wait-bar__fill--p80 { width: 80%; }
.wait-bar__fill--p85 { width: 85%; }
.wait-bar__fill--p90 { width: 90%; }
.wait-bar__fill--p95 { width: 95%; }
.wait-bar__fill--p100 { width: 100%; }

p.wait-meta {
  margin-top: var(--s3, 12px);
  font-size: .88rem; color: var(--muted, #5a6272);
  font-variant-numeric: tabular-nums;
}

.wait-stages {
  list-style: none; margin: var(--s5, 24px) 0 0; padding: 0;
  display: grid; gap: var(--s3, 12px);
}
@media (min-width: 48rem) {
  .wait-stages { grid-template-columns: repeat(7, 1fr); gap: var(--s2, 8px); }
}
.wait-stage__rail {
  display: block; height: 4px; border-radius: var(--r-pill, 9999px);
  background: var(--line, #e4e7ec);
}
.wait-stage__label {
  display: block; margin-top: var(--s2, 8px);
  font-size: .8rem; line-height: 1.35; color: var(--muted, #5a6272);
}
.wait-stage--done .wait-stage__rail { background: var(--lg-accent, #da4167); }
.wait-stage--done .wait-stage__label::before { content: "\2713\00a0"; }
.wait-stage--current .wait-stage__rail {
  background: linear-gradient(90deg, var(--lg-accent, #da4167) 55%, var(--line, #e4e7ec) 55%);
}
.wait-stage--current .wait-stage__label { color: var(--ink, #1f2430); font-weight: 600; }

p.wait-duration {
  margin-top: var(--s4, 16px);
  font-size: .88rem; color: var(--muted, #5a6272);
}
/* --- /WAIT-1 ----------------------------------------------------------- */

/* --- podstrona /certyfikaty ------------------------------------------------
   Wlasne sa cztery rzeczy: karta wzorcowa, kafle produktow, ponumerowana
   checklista i pasmo krokow. Reszta stoi na klasach landingu (.hero,
   .checklist, .callout, .wp-faq-item, .lg-final-cta). */
/* Wzor certyfikatu to ta sama .cert-card co mini-karta na landingu; podstrona
   dokłada tylko znak w belce i ciasniejsze wiersze pod nazwa sklepu. */
.cert-card--sample .cert-card__head { display: flex; align-items: center; gap: var(--s3); }
.cert-card--sample .cert-card__body p { margin-bottom: var(--s1); }
.checklist--framed { margin: var(--s4) 0; padding: var(--s4) 0; border-block: 1px solid var(--line); }

.cert-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--s4); }
.cert-tile {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s5); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
}
.cert-tile h3 { font-size: 1.06rem; }
.cert-tile p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.cert-tile__logo { display: flex; align-items: center; height: 46px; }
.cert-tile__logo svg { max-height: 30px; width: auto; }
.cert-tile__logo--mark svg { max-height: 42px; }
.cert-tile__logo b { font-size: 1.3rem; letter-spacing: -.03em; color: var(--ink-strong); }
.cert-note { padding: var(--s4) var(--s5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.cert-note p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.cert-rules { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.cert-rules li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start;
  padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r);
}
/* Numer jest porzadkowy, nie ozdobny - dlatego --muted, a nie sama linia. */
.cert-rules b { font-size: .94rem; color: var(--muted); }
.cert-rules h3 { margin-bottom: var(--s1); font-size: 1rem; }
.cert-rules p { margin: 0; font-size: .89rem; color: var(--ink-soft); }

/* Kroki biora typografie z .lg-process-steps; tu zmienia sie sam uklad. */
.cert-steps { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cert-steps li { display: block; padding-top: 0; border-top: 0; }
.cert-steps span { width: 44px; height: 44px; margin-bottom: var(--s4); border: 1px solid var(--lg-accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}