/*
 * U24 Wzory i pisma — frontend.css (prefiks u24w-), wersja 1.0.1, 2026-11-06.
 * Źródło: Designer/ubezpieczamy24/wzory-strona/redesign/u24w.css (projekt graficzny „teczka z dokumentem”)
 * + dopiski wtyczki na końcu pliku (sekcja 15: osadzenie [u24_wzor_pobierz], jeden przycisk w skrócie aside).
 * Tokeny scopowane pod .u24w-wrap (bez :root). Fonty i resety daje motyw.
 */

/* =====================================================================
   U24 — wtyczka u24-wzory: strona wzoru + hub „Wzory i pisma”
   prefiks: u24w-   scope tokenów: .u24w-wrap (nie :root)
   Bez importu fontów (motyw ładuje Source Sans Pro + Roboto).
   Bez resetów globalnych (body/html/h1-h3). Tła sekcji i przyciski z !important
   (Astra + Elementor nadpisują). Kierunek: „teczka z dokumentem” — ta sama rodzina
   co arkusz kalkulatora (u24kp-), własny prefiks.
   Sekcje pliku:  1 tokeny · 2 baza · 3 przyciski · 4 hero + kartka pobierania ·
   5 body/grid · 6 treść (kroki, listy) · 7 FAQ · 8 źródła/disclaimer ·
   9 aside (TOC, skrót, CTA) · 10 powiązane · 11 pasek CTA · 12 hub ·
   13 responsive · 14 ruch / reduced-motion / print
   ===================================================================== */

/* ---------- 1. Tokeny ---------- */
.u24w-wrap {
  --u24w-blue: #1757B8;
  --u24w-blue-dark: #0d3880;
  --u24w-blue-hover: #1264d6;
  --u24w-blue-light: #e8f0fa;
  --u24w-blue-tint: #f0f5fc;
  --u24w-red: #BF1A2F;
  --u24w-red-hover: #a5162a;
  --u24w-green: #15803d;          /* 4.9:1 na białym */
  --u24w-green-light: #dcfce7;
  --u24w-amber: #b45309;
  --u24w-amber-light: #fff7ed;
  --u24w-ink: #0f172a;
  --u24w-ink-2: #334155;          /* treść długa: 10.4:1 */
  --u24w-ink-3: #475569;          /* 7.6:1 */
  --u24w-muted: #64748b;          /* 4.8:1 — tylko meta */
  --u24w-line: #e2e8f0;
  --u24w-line-blue: #d6e2f3;
  --u24w-gray: #f8fafc;
  --u24w-paper: #fffdf7;          /* odcień kartki dokumentu */
  --u24w-font-h: 'Source Sans Pro', 'Source Sans 3', system-ui, sans-serif;
  --u24w-font-b: 'Roboto', system-ui, sans-serif;
  --u24w-text-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
  --u24w-text-base: clamp(0.9375rem, 0.9rem + 0.19vw, 1rem);
  --u24w-text-md: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --u24w-text-lg: clamp(1.0625rem, 1rem + 0.31vw, 1.175rem);
  --u24w-text-xl: clamp(1.1875rem, 1.05rem + 0.69vw, 1.375rem);
  --u24w-text-2xl: clamp(1.375rem, 1.15rem + 1.13vw, 1.75rem);
  --u24w-text-3xl: clamp(1.625rem, 1.3rem + 1.63vw, 2.125rem);
  --u24w-text-4xl: clamp(1.875rem, 1.35rem + 2.3vw, 2.875rem);
  --u24w-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --u24w-shadow-md: 0 4px 12px rgba(15,23,42,.08);
  --u24w-shadow-lg: 0 8px 24px rgba(15,23,42,.10);
  --u24w-shadow-xl: 0 12px 40px rgba(15,23,42,.12);
  --u24w-shadow-hover: 0 16px 48px rgba(15,23,42,.14);
  --u24w-shadow-sheet: 0 30px 70px -30px rgba(13,56,128,.35), 0 4px 12px rgba(15,23,42,.08);
  --u24w-r-sm: 6px; --u24w-r-md: 10px; --u24w-r-lg: 16px; --u24w-r-xl: 20px;
  --u24w-pad-x: 24px;
  --u24w-max: 1300px;
  --u24w-aside: 320px;
  --u24w-overlap: 120px;          /* o ile kartka nachodzi z hero na treść */
  --u24w-sticky-top: 104px;       /* wysokość sticky nagłówka motywu + zapas */

  position: relative;
  font-family: var(--u24w-font-b);
  font-size: var(--u24w-text-base);
  line-height: 1.7;
  color: var(--u24w-ink);
  counter-reset: u24w-toc u24w-step;
}

/* ---------- 2. Baza ---------- */
.u24w-wrap *, .u24w-wrap *::before, .u24w-wrap *::after { box-sizing: border-box; }
.u24w-inner {
  width: 100%; max-width: var(--u24w-max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--u24w-pad-x); padding-right: var(--u24w-pad-x);
}
.u24w-wrap :is(h1,h2,h3,h4) { font-family: var(--u24w-font-h) !important; letter-spacing: 0; color: var(--u24w-ink); margin-top: 0; text-wrap: balance; }
.u24w-wrap a { color: var(--u24w-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.u24w-wrap a:hover { color: var(--u24w-blue-hover); }
.u24w-wrap :is(a,button,summary,input):focus-visible { outline: 3px solid rgba(23,87,184,.45) !important; outline-offset: 3px; border-radius: 6px; }
.u24w-wrap img { max-width: 100%; height: auto; display: block; }
.u24w-wrap svg { flex: none; }
.u24w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* eyebrow (na stronie wzoru do lewej; w hubie w .u24w-sec-head) */
.u24w-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 var(--u24w-text-sm)/1.2 var(--u24w-font-h);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--u24w-blue); background: #fff; border: 1px solid var(--u24w-line-blue);
  padding: 6px 14px; border-radius: 9999px; box-shadow: var(--u24w-shadow-sm);
  text-decoration: none;
}
.u24w-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--u24w-green); box-shadow: 0 0 0 3px var(--u24w-green-light); }
a.u24w-eyebrow:hover { border-color: var(--u24w-blue); color: var(--u24w-blue-dark); }

/* ---------- 3. Przyciski ---------- */
.u24w-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 24px !important;
  font: 600 var(--u24w-text-md)/1.2 var(--u24w-font-h) !important;
  border-radius: var(--u24w-r-md) !important; border: 1.5px solid transparent !important;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.u24w-btn svg { width: 20px; height: 20px; }
.u24w-btn small { font: 500 var(--u24w-text-sm)/1 var(--u24w-font-b); opacity: .85; margin-left: 2px; }
.u24w-btn--pdf, .u24w-btn--primary {
  background: var(--u24w-red) !important; color: #fff !important;
  box-shadow: 0 4px 14px rgba(191,26,47,.35) !important;
}
.u24w-btn--pdf:hover, .u24w-btn--primary:hover { background: var(--u24w-red-hover) !important; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(191,26,47,.35) !important; }
.u24w-btn--pdf:visited, .u24w-btn--primary:visited { color: #fff !important; }
.u24w-btn--docx, .u24w-btn--ghost {
  background: #fff !important; color: var(--u24w-blue) !important;
  border-color: var(--u24w-blue) !important; box-shadow: none !important;
}
.u24w-btn--docx:hover, .u24w-btn--ghost:hover { background: var(--u24w-blue-light) !important; color: var(--u24w-blue-dark) !important; border-color: var(--u24w-blue-dark) !important; }
.u24w-btn--docx:visited, .u24w-btn--ghost:visited { color: var(--u24w-blue) !important; }
.u24w-btn--white { background: #fff !important; color: var(--u24w-blue-dark) !important; box-shadow: 0 4px 14px rgba(0,0,0,.18) !important; }
.u24w-btn--white:hover { background: var(--u24w-blue-light) !important; color: var(--u24w-blue-dark) !important; }
.u24w-btn--white:visited { color: var(--u24w-blue-dark) !important; }
.u24w-btn--sm { min-height: 44px; padding: 10px 16px !important; font-size: var(--u24w-text-base) !important; }
.u24w-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- 4. Hero + kartka pobierania ---------- */
.u24w-hero {
  position: relative;
  background:
    radial-gradient(circle at 1px 1px, rgba(23,87,184,.10) 1px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(1100px 480px at 88% -10%, #dfeaf8 0%, rgba(223,234,248,0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--u24w-blue-tint) 100%) !important;
  padding: clamp(20px, 2.4vw, 36px) 0 0 !important;
}
.u24w-hero::after { /* dolna krawędź hero — tu „wysuwa się” kartka */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--u24w-line-blue);
}
.u24w-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.u24w-hero__copy { padding-bottom: clamp(40px, 5vw, 72px); }
.u24w-crumbs, .u24w-crumbs p, .u24w-crumbs .rank-math-breadcrumb p {
  margin: 0 0 20px !important; font: 400 var(--u24w-text-sm)/1.4 var(--u24w-font-b) !important; color: var(--u24w-muted) !important;
}
.u24w-crumbs a { color: var(--u24w-ink-3) !important; text-decoration: none !important; }
.u24w-crumbs a:hover { color: var(--u24w-blue) !important; text-decoration: underline !important; }
.u24w-crumbs .separator { margin: 0 6px; color: #94a3b8; }
.u24w-hero .u24w-eyebrow { margin-bottom: 18px; }
.u24w-title {
  font: 700 var(--u24w-text-4xl)/1.08 var(--u24w-font-h) !important;
  color: var(--u24w-ink) !important; margin: 0 0 18px !important; max-width: 18ch;
}
.u24w-lead { font: 400 var(--u24w-text-lg)/1.6 var(--u24w-font-b); color: var(--u24w-ink-3); max-width: 58ch; margin: 0 0 24px; }
.u24w-lead strong { color: var(--u24w-ink); font-weight: 600; }

/* meta-pasek: aktualizacja · stan prawny · wersja · bezpłatnie */
.u24w-meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.u24w-meta li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 9999px;
  background: #fff; border: 1px solid var(--u24w-line-blue);
  font: 500 var(--u24w-text-sm)/1.2 var(--u24w-font-b); color: var(--u24w-ink-3);
}
.u24w-meta li svg { width: 15px; height: 15px; color: var(--u24w-blue); }
.u24w-meta li b { font-weight: 600; color: var(--u24w-ink); }
.u24w-meta li.u24w-meta--free { background: var(--u24w-green-light); border-color: #bbf7d0; color: var(--u24w-green); }
.u24w-meta li.u24w-meta--free svg { color: var(--u24w-green); }

/* kartka pobierania — „wysunięta z teczki” */
.u24w-dl {
  position: relative; z-index: 3;
  margin-bottom: calc(-1 * var(--u24w-overlap));
  background: #fff; border: 1px solid var(--u24w-line-blue); border-radius: var(--u24w-r-xl);
  padding: 16px 16px 18px;
  box-shadow: var(--u24w-shadow-sheet);
  scroll-margin-top: var(--u24w-sticky-top);
}
.u24w-dl__label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font: 700 var(--u24w-text-sm)/1.2 var(--u24w-font-h); letter-spacing: .06em; text-transform: uppercase; color: var(--u24w-blue-dark);
}
.u24w-dl__label::before {
  content: ''; width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: var(--u24w-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.u24w-dl__label span { margin-left: auto; font: 500 var(--u24w-text-sm)/1 var(--u24w-font-b); letter-spacing: 0; text-transform: none; color: var(--u24w-muted); }
/* podgląd: kartka A4 z zagiętym rogiem */
.u24w-dl__sheet {
  position: relative; background: var(--u24w-paper);
  border: 1px solid var(--u24w-line); border-radius: 6px 22px 6px 6px;
  box-shadow: 0 1px 0 #fff inset, var(--u24w-shadow-md);
  overflow: hidden; height: 440px;
}
.u24w-dl__sheet::before, .u24w-dl__sheet::after { content: ''; position: absolute; top: 0; right: 0; width: 42px; height: 42px; }
.u24w-dl__sheet::before { background: linear-gradient(225deg, var(--u24w-blue-tint) 0 50%, transparent 50%); } /* tło pod rogiem */
.u24w-dl__sheet::after {  /* zagięcie */
  background: linear-gradient(225deg, transparent 0 50%, #e4ecf8 50%, #cbd9ee 100%);
  box-shadow: -2px 2px 4px rgba(15,23,42,.10); border-bottom-left-radius: 6px;
}
.u24w-dl__preview { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.u24w-dl__sheet--placeholder { display: grid; place-items: center; color: var(--u24w-muted); font: 500 var(--u24w-text-sm)/1.2 var(--u24w-font-b); }
.u24w-dl__btns { display: grid; gap: 10px; margin-top: 14px; }
.u24w-dl__btns .u24w-btn { width: 100%; }
.u24w-dl__note { margin: 12px 0 0; font: 400 var(--u24w-text-sm)/1.5 var(--u24w-font-b); color: var(--u24w-ink-3); }
.u24w-dl__trust { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; }
.u24w-dl__trust li { display: inline-flex; align-items: center; gap: 5px; font: 500 var(--u24w-text-sm)/1.2 var(--u24w-font-b); color: var(--u24w-green); }
.u24w-dl__trust svg { width: 14px; height: 14px; }

/* ---------- 5. Body / grid ---------- */
.u24w-body { background: #fff !important; padding: calc(var(--u24w-overlap) + 24px) 0 clamp(48px, 5vw, 80px) !important; }
.u24w-body > .u24w-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--u24w-aside);
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.u24w-content { min-width: 0; max-width: 760px; }
.u24w-content > section { scroll-margin-top: var(--u24w-sticky-top); padding-bottom: clamp(28px, 3vw, 40px); margin-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--u24w-line); }
.u24w-content > section:last-of-type { border-bottom: 0; }

/* ---------- 6. Treść ---------- */
.u24w-content h2 {
  font: 700 var(--u24w-text-2xl)/1.2 var(--u24w-font-h) !important; margin: 0 0 16px !important;
  display: flex; align-items: baseline; gap: 14px; counter-increment: u24w-toc;
}
.u24w-content h2::before {
  content: counter(u24w-toc, decimal-leading-zero); flex: none;
  font: 700 var(--u24w-text-sm)/1 var(--u24w-font-h); letter-spacing: .04em; color: var(--u24w-blue);
  padding: 5px 8px; border-radius: 6px; background: var(--u24w-blue-light); transform: translateY(-3px);
}
.u24w-content h2 strong { font-weight: inherit; }
.u24w-content h3 { font: 700 var(--u24w-text-lg)/1.3 var(--u24w-font-h) !important; margin: 28px 0 10px !important; }
.u24w-content p, .u24w-content li { font: 400 var(--u24w-text-md)/1.75 var(--u24w-font-b); color: var(--u24w-ink-2); }
.u24w-content p { margin: 0 0 16px; }
.u24w-content strong { color: var(--u24w-ink); font-weight: 600; }
.u24w-content ul, .u24w-content ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.u24w-content ul li { position: relative; padding-left: 28px; margin-bottom: 6px; }
.u24w-content ul li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--u24w-green-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.u24w-content ol:not(.u24w-sources__list) { counter-reset: u24w-ol; }
.u24w-content ol:not(.u24w-sources__list) li { position: relative; padding-left: 32px; margin-bottom: 6px; counter-increment: u24w-ol; }
.u24w-content ol:not(.u24w-sources__list) li::before { content: counter(u24w-ol); position: absolute; left: 0; top: .3em; width: 22px; height: 22px; border-radius: 6px; background: var(--u24w-blue-light); color: var(--u24w-blue); font: 700 12px/22px var(--u24w-font-h); text-align: center; }

/* kroki instrukcji: licznik CSS na H3 w #instrukcja (wtyczka zdejmuje prefiks „Krok n:”) */
.u24w-steps { counter-reset: u24w-step; }
.u24w-steps h3 {
  position: relative; padding-left: 56px; min-height: 40px; display: flex; align-items: center; margin: 28px 0 10px !important;
  counter-increment: u24w-step;
}
.u24w-steps h3::before {
  content: counter(u24w-step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--u24w-blue-dark), var(--u24w-blue)); color: #fff;
  font: 700 var(--u24w-text-lg)/40px var(--u24w-font-h); text-align: center; box-shadow: 0 4px 10px rgba(23,87,184,.25);
}
.u24w-steps h3 + p, .u24w-steps h3 + ul { margin-left: 56px; }
.u24w-steps h3 ~ ul, .u24w-steps h3 ~ p:not(.u24w-step-end) { margin-left: 56px; }
.u24w-steps h3 ~ ul li::before { background-color: var(--u24w-blue-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231757B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }
.u24w-steps .u24w-step-end { margin-left: 0; padding: 14px 16px; background: var(--u24w-amber-light); border: 1px solid #fed7aa; border-radius: var(--u24w-r-md); color: var(--u24w-ink-2); }
.u24w-steps .u24w-step-end::before { content: 'Wskazówka'; display: block; font: 700 var(--u24w-text-sm)/1.2 var(--u24w-font-h); letter-spacing: .04em; text-transform: uppercase; color: var(--u24w-amber); margin-bottom: 4px; }
/* akapit wstępu sekcji „Jak wypełnić” (przed pierwszym H3) */
.u24w-steps h2 + p { margin-bottom: 22px; }

/* ---------- 7. FAQ (details/summary, bez JS) ---------- */
.u24w-faq details { border: 1px solid var(--u24w-line); border-radius: var(--u24w-r-md); background: #fff; margin-bottom: 10px; box-shadow: var(--u24w-shadow-sm); }
.u24w-faq details[open] { border-color: var(--u24w-line-blue); box-shadow: var(--u24w-shadow-md); }
.u24w-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; font: 600 var(--u24w-text-md)/1.4 var(--u24w-font-h); color: var(--u24w-ink);
}
.u24w-faq summary::-webkit-details-marker { display: none; }
.u24w-faq summary::after {
  content: ''; margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--u24w-blue-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231757B8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .25s ease;
}
.u24w-faq details[open] summary::after { transform: rotate(45deg); }
.u24w-faq summary:hover { color: var(--u24w-blue); }
.u24w-faq .u24w-faq__a { padding: 0 16px 16px; }
.u24w-faq .u24w-faq__a p:last-child { margin-bottom: 0; }

/* ---------- 8. Źródła + disclaimer ---------- */
.u24w-sources__list { margin: 0; padding: 0; list-style: none; counter-reset: u24w-src; }
.u24w-sources__list li { counter-increment: u24w-src; display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--u24w-line); font-size: var(--u24w-text-base); }
.u24w-sources__list li:last-child { border-bottom: 0; }
.u24w-sources__list li::before { content: '[' counter(u24w-src) ']'; flex: none; font: 600 var(--u24w-text-sm)/1.6 var(--u24w-font-h); color: var(--u24w-muted); }
.u24w-sources__list a { font-weight: 500; }
.u24w-sources__list .u24w-sources__host { color: var(--u24w-muted); font-size: var(--u24w-text-sm); margin-left: 6px; white-space: nowrap; }
.u24w-disclaimer {
  margin: 8px 0 0 !important; padding: 14px 16px 14px 48px; position: relative;
  background: var(--u24w-gray); border: 1px solid var(--u24w-line); border-radius: var(--u24w-r-md);
  font: 400 var(--u24w-text-sm)/1.6 var(--u24w-font-b) !important; color: var(--u24w-ink-3) !important;
}
.u24w-disclaimer::before {
  content: ''; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------- 9. Aside: TOC + skrót pobierania + CTA ---------- */
.u24w-aside { position: sticky; top: var(--u24w-sticky-top); display: grid; gap: 16px; min-width: 0; }
.u24w-toc { background: #fff; border: 1px solid var(--u24w-line-blue); border-radius: var(--u24w-r-lg); box-shadow: var(--u24w-shadow-md); overflow: hidden; }
.u24w-toc details { margin: 0; }
.u24w-toc summary {
  list-style: none; cursor: default; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: var(--u24w-blue-tint); border-bottom: 1px solid var(--u24w-line-blue);
  font: 700 var(--u24w-text-sm)/1.2 var(--u24w-font-h); letter-spacing: .06em; text-transform: uppercase; color: var(--u24w-blue-dark);
}
.u24w-toc summary::-webkit-details-marker { display: none; }
.u24w-toc summary::before {
  content: ''; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3880' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h13'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.u24w-toc summary::after { content: ''; margin-left: auto; width: 16px; height: 16px; display: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3880' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s ease; }
.u24w-toc ol { list-style: none; margin: 0; padding: 8px; counter-reset: u24w-tocn; }
.u24w-toc li { counter-increment: u24w-tocn; }
.u24w-toc a {
  display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 8px;
  font: 500 var(--u24w-text-sm)/1.4 var(--u24w-font-b); color: var(--u24w-ink-2); text-decoration: none;
  border-left: 3px solid transparent; transition: background-color .15s ease, color .15s ease;
}
.u24w-toc a::before { content: counter(u24w-tocn, decimal-leading-zero); flex: none; width: 24px; font: 700 var(--u24w-text-sm)/1.4 var(--u24w-font-h); color: var(--u24w-muted); }
.u24w-toc a:hover { background: var(--u24w-blue-tint); color: var(--u24w-blue); }
.u24w-toc a[aria-current="true"] { background: var(--u24w-blue-light); color: var(--u24w-blue-dark); font-weight: 600; border-left-color: var(--u24w-blue); }
.u24w-toc a[aria-current="true"]::before { color: var(--u24w-blue); }

.u24w-aside__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; background: var(--u24w-gray); border: 1px solid var(--u24w-line); border-radius: var(--u24w-r-lg); }
.u24w-aside__dl .u24w-btn { min-height: 44px; padding: 10px 12px !important; font-size: var(--u24w-text-sm) !important; }
.u24w-aside__dl .u24w-btn svg { width: 16px; height: 16px; }
.u24w-aside__dl .u24w-btn small { display: none; }

.u24w-cta {
  position: relative; overflow: hidden; padding: 22px 20px; border-radius: var(--u24w-r-lg); color: #fff;
  background: linear-gradient(145deg, var(--u24w-blue-dark) 0%, var(--u24w-blue) 100%) !important;
  box-shadow: var(--u24w-shadow-lg);
}
.u24w-cta::before { content: ''; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; border: 28px solid rgba(255,255,255,.07); }
.u24w-cta > * { position: relative; }
.u24w-cta__kicker { margin: 0 0 6px; font: 600 var(--u24w-text-sm)/1.2 var(--u24w-font-h); letter-spacing: .06em; text-transform: uppercase; color: #bfdbfe; }
.u24w-cta h3, .u24w-cta .u24w-cta__title { margin: 0 0 8px !important; font: 700 var(--u24w-text-xl)/1.2 var(--u24w-font-h) !important; color: #fff !important; }
.u24w-cta p { margin: 0 0 16px; font: 400 var(--u24w-text-sm)/1.55 var(--u24w-font-b); color: rgba(255,255,255,.88); }
.u24w-cta .u24w-btn { width: 100%; }
.u24w-cta__phone { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font: 600 var(--u24w-text-base)/1.2 var(--u24w-font-h); color: #fff !important; text-decoration: none !important; }
.u24w-cta__phone:hover { text-decoration: underline !important; }
.u24w-cta__phone svg { width: 18px; height: 18px; }

/* ---------- 10. Powiązane wzory + Przeczytaj też ---------- */
.u24w-related { background: var(--u24w-gray) !important; padding: clamp(48px, 5vw, 80px) 0 !important; border-top: 1px solid var(--u24w-line); }
.u24w-related h2 { font: 700 var(--u24w-text-3xl)/1.15 var(--u24w-font-h) !important; margin: 0 0 8px !important; }
.u24w-related .u24w-related__lead { margin: 0 0 28px; color: var(--u24w-ink-3); font-size: var(--u24w-text-lg); }
.u24w-related h3.u24w-related__sub { font: 700 var(--u24w-text-xl)/1.2 var(--u24w-font-h) !important; margin: 40px 0 16px !important; }
.u24w-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.u24w-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--u24w-line); border-top: 3px solid var(--u24w-blue);
  border-radius: var(--u24w-r-lg); padding: 20px 20px 18px; box-shadow: var(--u24w-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.u24w-card:hover { transform: translateY(-4px); box-shadow: var(--u24w-shadow-hover); }
.u24w-card:focus-within { box-shadow: 0 0 0 3px rgba(23,87,184,.35), var(--u24w-shadow-md); }
.u24w-card__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--u24w-blue-light); color: var(--u24w-blue); display: grid; place-items: center; }
.u24w-card__icon svg { width: 20px; height: 20px; }
.u24w-card h3 { font: 700 var(--u24w-text-lg)/1.3 var(--u24w-font-h) !important; margin: 0 !important; }
.u24w-card h3 a { color: var(--u24w-ink); text-decoration: none; }
.u24w-card h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.u24w-card h3 a:hover { color: var(--u24w-blue); }
.u24w-card h3 a:focus-visible { outline: none !important; }
.u24w-card p { margin: 0; font: 400 var(--u24w-text-sm)/1.6 var(--u24w-font-b); color: var(--u24w-ink-3); flex: 1; }
.u24w-card__foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 500 var(--u24w-text-sm)/1 var(--u24w-font-b); color: var(--u24w-muted); }
.u24w-card__foot time { margin-left: auto; }
.u24w-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 11px/1 var(--u24w-font-h); letter-spacing: .06em; text-transform: uppercase; }
.u24w-badge--pdf { background: #fdecee; color: var(--u24w-red); }
.u24w-badge--docx { background: var(--u24w-blue-light); color: var(--u24w-blue); }
.u24w-card--post { border-top-color: var(--u24w-amber); }
.u24w-card--post .u24w-card__icon { background: var(--u24w-amber-light); color: var(--u24w-amber); }

/* ---------- 11. Pasek CTA ---------- */
.u24w-strip { background: linear-gradient(135deg, var(--u24w-blue-dark) 0%, var(--u24w-blue) 70%, #2563eb 100%) !important; padding: clamp(36px, 4vw, 56px) 0 !important; position: relative; overflow: hidden; }
.u24w-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0) 0 0 / 22px 22px; }
.u24w-strip > .u24w-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.u24w-strip h2, .u24w-strip .u24w-strip__title { margin: 0 0 6px !important; font: 700 var(--u24w-text-2xl)/1.2 var(--u24w-font-h) !important; color: #fff !important; }
.u24w-strip p { margin: 0; color: rgba(255,255,255,.88); font-size: var(--u24w-text-md); }
.u24w-strip__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.u24w-strip .u24w-btn--ghost { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
.u24w-strip .u24w-btn--ghost:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }

/* ---------- 12. HUB ---------- */
.u24w-hub-hero {
  position: relative; padding: clamp(28px, 3vw, 48px) 0 clamp(36px, 4vw, 56px) !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(23,87,184,.10) 1px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(1100px 480px at 88% -10%, #dfeaf8 0%, rgba(223,234,248,0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--u24w-blue-tint) 100%) !important;
  border-bottom: 1px solid var(--u24w-line-blue);
}
.u24w-hub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.u24w-hub-hero .u24w-title { max-width: none; }
.u24w-hub-hero .u24w-lead { margin-bottom: 0; }
.u24w-search { position: relative; }
.u24w-search label { display: block; margin: 0 0 8px; font: 600 var(--u24w-text-sm)/1.2 var(--u24w-font-h); letter-spacing: .06em; text-transform: uppercase; color: var(--u24w-blue-dark); }
.u24w-search__field { position: relative; }
.u24w-search input {
  width: 100%; min-height: 56px; padding: 14px 48px 14px 48px; border-radius: var(--u24w-r-md);
  border: 1.5px solid var(--u24w-line-blue); background: #fff; box-shadow: var(--u24w-shadow-md);
  font: 400 var(--u24w-text-md)/1.3 var(--u24w-font-b); color: var(--u24w-ink);
}
.u24w-search input::placeholder { color: var(--u24w-muted); }
.u24w-search input:focus { border-color: var(--u24w-blue); outline: 3px solid rgba(23,87,184,.25); outline-offset: 0; }
.u24w-search__field::before { content: ''; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231757B8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.u24w-search__count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 6px; background: var(--u24w-blue-light); color: var(--u24w-blue-dark); font: 700 12px/1 var(--u24w-font-h); }
.u24w-search__hint { margin: 8px 0 0; font: 400 var(--u24w-text-sm)/1.4 var(--u24w-font-b); color: var(--u24w-muted); }
.u24w-hub-stats { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.u24w-hub-stats li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9999px; background: #fff; border: 1px solid var(--u24w-line-blue); font: 500 var(--u24w-text-sm)/1.2 var(--u24w-font-b); color: var(--u24w-ink-3); }
.u24w-hub-stats li b { color: var(--u24w-ink); font-weight: 600; }
.u24w-hub-stats li svg { width: 15px; height: 15px; color: var(--u24w-blue); }

/* pasek kategorii (kotwice) */
.u24w-catnav { background: #fff !important; border-bottom: 1px solid var(--u24w-line); position: sticky; top: 0; z-index: 5; }
.u24w-catnav ul { list-style: none; margin: 0; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.u24w-catnav ul::-webkit-scrollbar { display: none; }
.u24w-catnav a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--u24w-line); font: 500 var(--u24w-text-sm)/1.2 var(--u24w-font-b); color: var(--u24w-ink-2); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.u24w-catnav a:hover, .u24w-catnav a[aria-current="true"] { background: var(--u24w-blue-light); color: var(--u24w-blue-dark); border-color: var(--u24w-line-blue); }
.u24w-catnav a small { padding: 2px 6px; border-radius: 6px; background: var(--u24w-gray); color: var(--u24w-muted); font: 600 11px/1 var(--u24w-font-h); }

/* sekcje kategorii = .sec-head (eyebrow + H2 + lead, wyśrodkowane, CLAUDE §6) */
.u24w-cat { padding: clamp(48px, 5vw, 80px) 0 !important; scroll-margin-top: 64px; }
.u24w-cat:nth-of-type(odd) { background: #fff !important; }
.u24w-cat:nth-of-type(even) { background: var(--u24w-gray) !important; }
.u24w-cat[hidden] { display: none !important; }
.u24w-sec-head { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.u24w-sec-head .u24w-eyebrow { background: var(--u24w-blue-light); border-color: transparent; box-shadow: none; margin-bottom: 16px; }
.u24w-sec-head .u24w-eyebrow::before { display: none; }
.u24w-sec-head h2 { font: 700 var(--u24w-text-3xl)/1.15 var(--u24w-font-h) !important; margin: 0 0 14px !important; }
.u24w-sec-head p { margin: 0; font: 400 var(--u24w-text-lg)/1.55 var(--u24w-font-b); color: var(--u24w-ink-3); }
.u24w-cat .u24w-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.u24w-card[hidden] { display: none !important; }
.u24w-hub-empty { display: none; text-align: center; padding: 40px 20px; color: var(--u24w-ink-3); font-size: var(--u24w-text-lg); }
.u24w-hub-empty[data-show="1"] { display: block; }

/* pasek zaufania huba */
.u24w-trust { background: #fff !important; border-top: 1px solid var(--u24w-line); border-bottom: 1px solid var(--u24w-line); padding: 28px 0 !important; }
.u24w-trust ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; }
.u24w-trust li { display: flex; gap: 14px; align-items: flex-start; }
.u24w-trust__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--u24w-blue-light); color: var(--u24w-blue); display: grid; place-items: center; }
.u24w-trust__icon svg { width: 22px; height: 22px; }
.u24w-trust b { display: block; font: 700 var(--u24w-text-md)/1.3 var(--u24w-font-h); color: var(--u24w-ink); margin-bottom: 2px; }
.u24w-trust span { font: 400 var(--u24w-text-sm)/1.5 var(--u24w-font-b); color: var(--u24w-ink-3); }

/* ---------- 13. Responsive ---------- */
@media (max-width: 1200px) {
  .u24w-wrap { --u24w-aside: 290px; }
}
@media (max-width: 1024px) {
  .u24w-wrap { --u24w-overlap: 0px; }
  .u24w-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .u24w-hero__copy { padding-bottom: 0; }
  .u24w-dl { margin: 8px 0 32px; max-width: 560px; }
  .u24w-dl__sheet { height: 300px; }
  .u24w-dl__preview { height: 300px; }
  .u24w-body { padding-top: 32px !important; }
  .u24w-body > .u24w-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .u24w-content { max-width: none; }
  /* aside rozpada się: TOC nad treścią (zwinięty details), skrót pobierania znika (kartka jest pod H1), CTA pod treścią */
  .u24w-aside { display: contents; }
  .u24w-toc { order: -1; }
  .u24w-toc summary { cursor: pointer; }
  .u24w-toc summary::after { display: block; }
  .u24w-toc details[open] summary::after { transform: rotate(180deg); }
  .u24w-aside__dl { display: none; }
  .u24w-cta { order: 1; }
  .u24w-hub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .u24w-catnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .u24w-trust ul { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
  .u24w-wrap { --u24w-sticky-top: 80px; }
  .u24w-content h2 { font-size: var(--u24w-text-xl) !important; }
  .u24w-strip > .u24w-inner { flex-direction: column; align-items: stretch; }
  .u24w-strip__actions { flex-direction: column; }
  .u24w-strip__actions .u24w-btn { width: 100%; }
}
@media (max-width: 640px) {
  .u24w-wrap { --u24w-pad-x: 16px; }
  .u24w-title { max-width: none; }
  .u24w-dl { max-width: none; padding: 14px 14px 16px; }
  .u24w-dl__sheet, .u24w-dl__preview { max-height: 220px; height: 220px; }
  .u24w-dl__btns .u24w-btn { width: 100%; white-space: normal; }
  .u24w-btn { white-space: normal; }
  .u24w-steps h3 + p, .u24w-steps h3 + ul, .u24w-steps h3 ~ ul, .u24w-steps h3 ~ p:not(.u24w-step-end) { margin-left: 0; }
  .u24w-steps h3 { padding-left: 50px; }
  .u24w-cards, .u24w-cat .u24w-cards { grid-template-columns: 1fr; }
  .u24w-meta li { padding: 6px 10px; }
  .u24w-related h2 { font-size: var(--u24w-text-2xl) !important; }
}
@media (max-width: 400px) {
  .u24w-wrap { font-size: 15px; }
  .u24w-title { font-size: 1.75rem !important; }
  .u24w-card { padding: 16px; }
  .u24w-meta { gap: 6px; }
}

/* ---------- 14. Ruch, reduced-motion, print ---------- */
@media (prefers-reduced-motion: no-preference) {
  .u24w-hero__copy > * { animation: u24w-rise .5s cubic-bezier(.2,.7,.2,1) both; }
  .u24w-hero__copy > :nth-child(2) { animation-delay: .04s; }
  .u24w-hero__copy > :nth-child(3) { animation-delay: .08s; }
  .u24w-hero__copy > :nth-child(4) { animation-delay: .12s; }
  .u24w-hero__copy > :nth-child(5) { animation-delay: .16s; }
  .u24w-dl { animation: u24w-slide .6s .12s cubic-bezier(.2,.7,.2,1) both; }
  .u24w-wrap { scroll-behavior: smooth; }
}
@keyframes u24w-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes u24w-slide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .u24w-wrap *, .u24w-wrap *::before, .u24w-wrap *::after { animation: none !important; transition: none !important; }
  .u24w-card:hover, .u24w-btn:hover { transform: none; }
}
@media print {
  .u24w-aside, .u24w-strip, .u24w-related, .u24w-dl__btns, .u24w-catnav { display: none !important; }
  .u24w-body > .u24w-inner { grid-template-columns: 1fr; }
  .u24w-wrap { --u24w-overlap: 0px; }
}


/* ---------- 15. Dopiski wtyczki (poza projektem) ---------- */
/* [u24_wzor_pobierz] we wpisie bloga: ta sama kartka, bez nachodzenia na treść */
.u24w-wrap--embed .u24w-dl { margin-bottom: 0; max-width: 420px; animation: none; }
.u24w-wrap--embed .u24w-dl__label a { color: inherit; text-decoration: none; }
.u24w-wrap--embed .u24w-dl__label a:hover { color: var(--u24w-blue); }
/* skrót pobierania w aside: tylko PDF (brak DOCX) → przycisk na całą szerokość */
.u24w-aside__dl .u24w-btn:only-child { grid-column: 1 / -1; }