/*! Sprawdź Dewelopera — główny arkusz sekcji (sd.css)
 * Źródło: system „Sprawdź Dewelopera” (tokens.json + components/bundle.css). Nie edytuj ręcznie — buduj skryptem.
 * Fonty: w <head> przed tym plikiem
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400&family=Ubuntu+Mono:wght@400;700&display=swap">
 * Ładuj PO starych arkuszach (bootstrap, abc.css, cp_style.css) i owiń treść: <main class="sd sd-page">.
 * Ikony: /static/img/sd-icons.svg (Lucide, ISC). */
:root, [data-theme="light"] {
  --sd-petrol-900: #0b2e42;
  --sd-petrol-700: #0f4f72;
  --sd-petrol-100: #e4eef3;
  --sd-blue-500: #1585cc;
  --sd-blue-700: #0b66a3;
  --sd-blue-800: #08507f;
  --sd-blue-100: #e5f1f9;
  --sd-magenta-600: #c51477;
  --sd-magenta-700: #9e0f5f;
  --sd-paper: #ffffff;
  --sd-paper-2: #f3f6f8;
  --sd-text: #22313b;
  --sd-text-muted: #55666f;
  --sd-line: #d8e0e6;
  --sd-line-strong: #7f909b;
  --sd-track: #dce5eb;
  --sd-ok: #1d7348;
  --sd-ok-100: #e4f3ea;
  --sd-warn: #8a5200;
  --sd-warn-100: #fcf1dd;
  --sd-danger: #b3261e;
  --sd-danger-100: #fbe8e6;
  --sd-tape: var(--sd-blue-500);
  --sd-focus: var(--sd-blue-700);
  --sd-focus-inverse: var(--sd-paper);
  --sd-shadow-1: 0 1px 2px rgba(11, 46, 66, 0.08);
  --sd-shadow-2: 0 8px 24px rgba(11, 46, 66, 0.12);
}
:root {
  --sd-space-1: 4px;
  --sd-space-2: 8px;
  --sd-space-3: 12px;
  --sd-space-4: 16px;
  --sd-space-6: 24px;
  --sd-space-8: 32px;
  --sd-space-12: 48px;
  --sd-space-16: 64px;
  --sd-radius-sm: 4px;
  --sd-radius-md: 8px;
  --sd-radius-lg: 16px;
  --sd-radius-pill: 999px;
  --sd-container: 1120px;
  --sd-measure: 680px;
  --sd-touch: 44px;
  --sd-mobile-bar: 72px;
  --font-sans: Ubuntu, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, Menlo, Consolas, monospace;
}
.sd-display { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.4px; }
.sd-h2 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; }
.sd-h3 { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; }
.sd-title { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 500; }
.sd-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.sd-prose { font-family: var(--font-sans); font-size: 17px; line-height: 28px; font-weight: 400; }
.sd-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.sd-caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.sd-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.96px; }
.sd-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
.sd-data { font-family: var(--font-sans); font-size: 44px; line-height: 44px; font-weight: 700; letter-spacing: -0.9px; }
.sd-data-sm { font-family: var(--font-sans); font-size: 22px; line-height: 24px; font-weight: 700; }

/* ==========================================================================
   Sprawdź Dewelopera — komponenty
   Wartości (kolory, typografia, odstępy, promienie, cienie) pochodzą z tokenów
   (--sd-*, --font-*, klasy .sd-display … .sd-data-sm). Tu tylko układ i stany.
   Wszystko działa w zakresie .sd — owiń treść sekcji: <main class="sd sd-page">.
   ========================================================================== */

/* 1. Baza w zakresie .sd ----------------------------------------------------
   Neutralizuje globalne reguły abc.css i Bootstrapa (p 14px/300 z letter-spacing,
   ul z paddingiem 40px, a:focus bez obrysu). Reset elementów ma specyficzność
   samego elementu (:where(.sd) :is(p)) — wygrywa ze starymi regułami „p {…}”,
   bo sd.css ładuje się PO nich, a przegrywa z każdą klasą (.sd-h2, .sd-body…). */
.sd {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--sd-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:where(.sd) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-align: inherit;
}
/* abc.css stylizuje gołe „footer” jak stopkę serwisu (niebieskie tło, min-height 330px,
   z-index 100, białe „footer p”, wersaliki „footer h4”) — elementy sekcyjne w .sd zerujemy */
:where(.sd) :is(header, footer, nav, section, article, aside, main) { background: none; color: inherit; min-height: 0; padding-top: 0; z-index: auto; }
:where(.sd) footer :is(p, span, a, h1, h2, h3, h4, h5, h6) { color: inherit; text-transform: none; }
:where(.sd) :is(ul, ol) { list-style: none; }
:where(.sd) :is(b, strong) { font-weight: 700; }
:where(.sd) :is(img, svg) { max-width: 100%; }
:where(.sd) :is(img) { height: auto; }
:where(.sd) :is(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: normal; }
.sd :where(a) {
  color: var(--sd-blue-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.sd :where(a):hover { color: var(--sd-blue-800); text-decoration-thickness: 2px; }
.sd :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sd-focus) !important;
  outline-offset: 2px;
}
.sd :where(hr) { border: 0; border-top: 1px solid var(--sd-line); margin: 0; }

/* 2. Układ -------------------------------------------------------------- */
.sd-page { background: var(--sd-paper-2); padding-bottom: var(--sd-space-16); }
.sd-container {
  width: 100%;
  max-width: var(--sd-container);
  margin-inline: auto;
  padding-inline: var(--sd-space-4);
  box-sizing: border-box;
}
.sd-section { padding-block: var(--sd-space-12); }
.sd-section + .sd-section { border-top: 1px solid var(--sd-line); }
.sd-section--paper { background: var(--sd-paper); }
.sd-section__head { display: grid; gap: var(--sd-space-2); margin-bottom: var(--sd-space-6); max-width: var(--sd-measure); }
.sd-section__eyebrow { color: var(--sd-text-muted); }
.sd-section__title { color: var(--sd-petrol-900); text-wrap: balance; }
.sd-section__lead { color: var(--sd-text-muted); }
.sd-stack { display: flex; flex-direction: column; gap: var(--sd-gap, var(--sd-space-6)); }
.sd-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sd-gap, var(--sd-space-2)); }
.sd-grid {
  display: grid;
  gap: var(--sd-gap, var(--sd-space-4));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--sd-min, 280px)), 1fr));
}
.sd-split { display: grid; gap: var(--sd-space-8); }
@media (min-width: 768px) {
  .sd-container { padding-inline: var(--sd-space-6); }
  .sd-section { padding-block: var(--sd-space-16); }
}
@media (min-width: 992px) {
  .sd-split { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}
/* Stały pasek Zadzwoń / Rezerwuj na telefonie przykrywa dół strony */
@media (max-width: 767.98px) {
  .sd-page { padding-bottom: calc(var(--sd-space-12) + var(--sd-mobile-bar)); }
}

/* 3. Typografia: uzupełnienia klas z tokenów ------------------------------- */
.sd-label { text-transform: uppercase; color: var(--sd-text-muted); }
.sd-data, .sd-data-sm, .sd-mono { font-variant-numeric: tabular-nums; }
.sd-display, .sd-h2, .sd-h3 { text-wrap: balance; }
@media (max-width: 767.98px) {
  .sd .sd-display { font-size: 30px; line-height: 34px; letter-spacing: -0.2px; }
  .sd .sd-h2 { font-size: 22px; line-height: 28px; }
  .sd .sd-data { font-size: 36px; line-height: 36px; }
}

/* 4. Ikona ----------------------------------------------------------------
   <svg class="sd-icon" aria-hidden="true"><use href="/static/img/sd-icons.svg#i-check"/></svg> */
.sd-icon {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: -0.2em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.sd-icon--sm { width: 16px; height: 16px; }
.sd-icon--lg { width: 24px; height: 24px; }

/* 5. Przycisk ------------------------------------------------------------ */
.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-2);
  min-height: var(--sd-touch);
  padding: 10px 18px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--sd-radius-md);
  background: var(--sd-blue-700);
  color: var(--sd-paper);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sd-btn:hover, .sd-btn:active { background: var(--sd-blue-800); color: var(--sd-paper); text-decoration: none; }
.sd-btn--order { background: var(--sd-magenta-600); }
.sd-btn--order:hover, .sd-btn--order:active { background: var(--sd-magenta-700); color: var(--sd-paper); }
.sd-btn--outline { background: var(--sd-paper); border-color: var(--sd-blue-700); color: var(--sd-blue-700); }
.sd-btn--outline:hover, .sd-btn--outline:active { background: var(--sd-blue-100); color: var(--sd-blue-800); border-color: var(--sd-blue-800); }
.sd-btn--quiet { background: transparent; color: var(--sd-blue-700); padding-inline: 8px; }
.sd-btn--quiet:hover, .sd-btn--quiet:active { background: var(--sd-blue-100); color: var(--sd-blue-800); }
.sd-btn--inverse { background: var(--sd-paper); color: var(--sd-petrol-900); }
.sd-btn--inverse:hover, .sd-btn--inverse:active { background: var(--sd-petrol-100); color: var(--sd-petrol-900); }
.sd-btn--sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.sd-btn--block { display: flex; width: 100%; white-space: normal; }
.sd-btn[disabled], .sd-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* Link z kierunkiem: „Zobacz wszystkie inwestycje →” */
.sd-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-1);
  color: var(--sd-blue-700);
  font-weight: 500;
  text-decoration: none;
}
.sd-link:hover { color: var(--sd-blue-800); text-decoration: underline; }

/* 6. Okruszki ------------------------------------------------------------ */
.sd-crumbs { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.sd-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.sd-crumbs li + li::before { content: "›"; margin-inline: 8px; color: var(--sd-text-muted); }
.sd-crumbs a { color: var(--sd-blue-700); text-decoration: none; }
.sd-crumbs a:hover { text-decoration: underline; }
.sd-crumbs [aria-current="page"] { color: var(--sd-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-crumbs--inverse, .sd-crumbs--inverse li + li::before { color: var(--sd-petrol-100); }
.sd-crumbs--inverse a, .sd-crumbs--inverse [aria-current="page"] { color: var(--sd-paper); }

/* 7. Nagłówek strony ----------------------------------------------------- */
.sd-masthead {
  --sd-focus: var(--sd-focus-inverse);
  background: var(--sd-petrol-700);
  color: var(--sd-paper);
}
.sd-masthead__inner { display: grid; gap: var(--sd-space-6); padding-block: var(--sd-space-6) var(--sd-space-8); }
.sd-masthead__main { display: grid; gap: var(--sd-space-4) var(--sd-space-6); align-items: center; grid-template-columns: auto minmax(0, 1fr); }
.sd-masthead__brand { height: 48px; width: auto; }
.sd-masthead__text { display: grid; gap: var(--sd-space-2); min-width: 0; }
.sd-masthead__eyebrow { color: var(--sd-petrol-100); }
.sd-masthead__title { color: var(--sd-paper); overflow-wrap: anywhere; }
.sd-masthead__lead { color: var(--sd-petrol-100); max-width: var(--sd-measure); }
.sd-masthead__sub { display: block; margin-top: var(--sd-space-2); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0; color: var(--sd-petrol-100); }
.sd-masthead__aside { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sd-space-4) var(--sd-space-8); align-items: flex-end; }
@media (max-width: 767.98px) { .sd-masthead .sd-logo--lg { --sd-logo-size: 64px; } }
@media (max-width: 575.98px) { .sd-masthead__main:has(> .sd-masthead__brand) { grid-template-columns: minmax(0, 1fr); } .sd-masthead__brand { height: 40px; } }
@media (min-width: 992px) {
  .sd-masthead__inner { padding-block: var(--sd-space-8) var(--sd-space-12); }
  .sd-masthead__main { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sd-masthead__aside { grid-column: auto; justify-content: flex-end; }
}

/* 8. Wyszukiwarka -------------------------------------------------------- */
.sd-search { position: relative; display: flex; width: 100%; min-width: 0; max-width: 760px; box-sizing: border-box; }
.sd-search__input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 12px 56px 12px 16px;
  box-sizing: border-box;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-md);
  background: var(--sd-paper);
  color: var(--sd-text);
  font-size: 16px;
}
.sd-search__input::placeholder { color: var(--sd-text-muted); opacity: 1; }
.sd-masthead .sd-search__input { border-color: var(--sd-paper); }
.sd-search__submit {
  position: absolute;
  inset: 4px 4px 4px auto;
  width: var(--sd-touch);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--sd-radius-sm);
  background: var(--sd-blue-700);
  color: var(--sd-paper);
  cursor: pointer;
}
.sd-search__submit:hover { background: var(--sd-blue-800); }
.sd .sd-search__submit:focus-visible { outline-color: var(--sd-blue-700) !important; }

/* 9. Logo dewelopera w krążku ------------------------------------------- */
.sd-logo {
  --sd-logo-size: 56px;
  display: grid;
  place-items: center;
  width: var(--sd-logo-size);
  height: var(--sd-logo-size);
  flex: none;
  box-sizing: border-box;
  padding: calc(var(--sd-logo-size) * 0.12);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper);
  overflow: hidden;
}
.sd-logo img { width: 100%; height: 100%; object-fit: contain; }
.sd-logo--sm { --sd-logo-size: 40px; }
.sd-logo--lg { --sd-logo-size: 96px; border: 0; }
.sd-logo--initials { background: var(--sd-petrol-100); color: var(--sd-petrol-900); font-weight: 700; font-size: calc(var(--sd-logo-size) * 0.36); }

/* 10. Miara: skala 0–5 jak linijka (5 odcinków) ------------------------- */
.sd-meter { display: grid; gap: 6px; min-width: 0; }
.sd-meter__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sd-space-3); }
.sd-meter__name { font-size: 15px; line-height: 20px; color: var(--sd-text); }
.sd-meter__value { font-weight: 700; color: var(--sd-petrol-900); font-variant-numeric: tabular-nums; }
.sd-meter__bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: var(--sd-radius-sm);
  background: var(--sd-track);
  overflow: hidden;
}
.sd-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v, 0) * 20%);
  background: var(--sd-blue-500);
}
.sd-meter__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right, transparent 0 calc(20% - 2px), var(--sd-paper) calc(20% - 2px) 20%);
}
.sd-meter--lg .sd-meter__bar { height: 12px; }
.sd-meter--inverse .sd-meter__bar { background: var(--sd-petrol-900); }
.sd-meter--inverse .sd-meter__fill { background: var(--sd-paper); }
.sd-meter--inverse .sd-meter__bar::after { background: repeating-linear-gradient(to right, transparent 0 calc(20% - 2px), var(--sd-petrol-700) calc(20% - 2px) 20%); }
.sd-meter--inverse .sd-meter__name, .sd-meter--inverse .sd-meter__value { color: var(--sd-paper); }

/* Zestaw parametrów: 3 oceny z odbioru + 4 elementy */
.sd-params { display: grid; gap: var(--sd-space-8); padding: var(--sd-space-6); border-radius: var(--sd-radius-lg); background: var(--sd-paper); border: 1px solid var(--sd-line); }
.sd-params__group { display: grid; gap: var(--sd-space-4); align-content: start; }
.sd-params__title { color: var(--sd-text-muted); }
.sd-params__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sd-space-3); align-items: center; }
.sd-params__item--plain { grid-template-columns: minmax(0, 1fr); }
.sd-params__icon { width: 40px; height: 40px; }
@media (min-width: 768px) { .sd-params { grid-template-columns: 1fr 1fr; gap: var(--sd-space-8) var(--sd-space-12); padding: var(--sd-space-8); } }

/* 11. Ocena ogólna ------------------------------------------------------ */
.sd-score { display: grid; gap: var(--sd-space-2); min-width: 200px; }
.sd-score__value { display: flex; align-items: baseline; gap: 2px; color: var(--sd-petrol-900); }
.sd-score__max { font-size: 18px; font-weight: 500; color: var(--sd-text-muted); }
.sd-score__basis { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-score--inverse .sd-score__value { color: var(--sd-paper); }
.sd-score--inverse .sd-score__max, .sd-score--inverse .sd-score__basis, .sd-score--inverse .sd-label { color: var(--sd-petrol-100); }

/* 12. Miejsce w rankingu ------------------------------------------------ */
.sd-rank { display: inline-grid; gap: 2px; color: var(--sd-petrol-900); }
.sd-rank__value { display: flex; align-items: baseline; gap: 2px; }
.sd-rank__of { font-size: 15px; font-weight: 500; color: var(--sd-text-muted); }
.sd-rank__basis { font-size: 13px; line-height: 18px; color: var(--sd-text-muted); }
.sd-rank--inverse, .sd-rank--inverse .sd-rank__value { color: var(--sd-paper); }
.sd-rank--inverse .sd-rank__of, .sd-rank--inverse .sd-rank__basis, .sd-rank--inverse .sd-label { color: var(--sd-petrol-100); }

/* 13. Liczby (zestawienie) --------------------------------------------- */
.sd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--sd-line); border-radius: var(--sd-radius-md); background: var(--sd-paper); overflow: hidden; }
.sd-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: var(--sd-space-4) var(--sd-space-6); box-shadow: -1px 0 0 var(--sd-line), 0 -1px 0 var(--sd-line); }
.sd-stat dt { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-stat dd { color: var(--sd-petrol-900); overflow-wrap: anywhere; }

/* 14. Karta dewelopera -------------------------------------------------- */
.sd-devcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-4);
  padding: var(--sd-space-6);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-md);
  background: var(--sd-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sd-devcard:hover { border-color: var(--sd-blue-500); box-shadow: var(--sd-shadow-2); }
.sd-devcard:focus-within { border-color: var(--sd-blue-700); }
.sd-devcard__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sd-space-4); align-items: center; }
.sd-devcard__name { color: var(--sd-petrol-900); overflow-wrap: anywhere; }
.sd .sd-devcard__link { color: inherit; text-decoration: none; }
.sd-devcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sd .sd-devcard__link:focus-visible { outline: none !important; }
.sd-devcard:has(.sd-devcard__link:focus-visible) { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
.sd-devcard__meta { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-devcard__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sd-space-4); align-items: center; }
.sd-devcard__num { color: var(--sd-petrol-900); }
.sd-devcard__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sd-space-2) var(--sd-space-3); margin-top: auto; padding-top: var(--sd-space-4); border-top: 1px solid var(--sd-line); }
.sd-devcard__sub { position: relative; z-index: 1; }

/* 15. Karta inwestycji -------------------------------------------------- */
.sd-invcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-3);
  padding: var(--sd-space-4) var(--sd-space-6);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-md);
  background: var(--sd-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sd-invcard:hover { border-color: var(--sd-blue-500); box-shadow: var(--sd-shadow-2); }
.sd-invcard__name { color: var(--sd-petrol-900); }
.sd .sd-invcard__link { color: inherit; text-decoration: none; }
.sd-invcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sd .sd-invcard__link:focus-visible { outline: none !important; }
.sd-invcard:has(.sd-invcard__link:focus-visible) { outline: 3px solid var(--sd-focus); outline-offset: 2px; }
.sd-invcard__place { display: flex; align-items: center; gap: var(--sd-space-1); font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-invcard__score { margin-top: auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sd-space-3); align-items: center; }
.sd-invcard__num { font-weight: 700; color: var(--sd-petrol-900); font-variant-numeric: tabular-nums; }
.sd-invcard__empty { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-invcard__opis { font-size: 14px; line-height: 20px; color: var(--sd-text); }

/* 16. Usterki z taśmą --------------------------------------------------- */
.sd-defects { display: grid; gap: var(--sd-space-3); counter-reset: none; }
@media (min-width: 768px) { .sd-defects { grid-template-columns: 1fr 1fr; gap: var(--sd-space-4); } }
.sd-defect {
  display: grid;
  align-content: start;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sd-space-4);
  align-items: start;
  padding: var(--sd-space-4) var(--sd-space-6) var(--sd-space-6) var(--sd-space-4);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius-md);
  background: var(--sd-paper);
}
.sd-tape {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 30px;
  padding-inline: 10px;
  box-sizing: border-box;
  background: var(--sd-tape);
  color: var(--sd-paper);
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-4deg);
  clip-path: polygon(3% 0, 97% 0, 100% 22%, 96% 42%, 100% 62%, 95% 82%, 98% 100%, 2% 100%, 0 80%, 4% 60%, 0 40%, 5% 20%);
}
.sd-defect__body { display: grid; gap: var(--sd-space-2); min-width: 0; }
.sd-defect__title { color: var(--sd-petrol-900); }
.sd-defect__count { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-defect__count b { color: var(--sd-text); font-variant-numeric: tabular-nums; }
.sd-defect__bar { display: block; height: 4px; border-radius: var(--sd-radius-sm); background: var(--sd-track); overflow: hidden; }
.sd-defect__bar::before { content: ""; display: block; height: 100%; width: calc(var(--share, 0) * 100%); background: var(--sd-blue-500); }
.sd-defect__examples { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 17. Zdjęcia usterek -------------------------------------------------- */
.sd-photos { display: grid; gap: var(--sd-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.sd-photo { display: grid; gap: 6px; }
.sd-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sd-radius-sm); background: var(--sd-track); }
.sd-photo figcaption { font-size: 13px; line-height: 18px; color: var(--sd-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-photos__more { display: grid; }
.sd .sd-photos__more > :is(a, span) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  align-self: start;
  width: 100%;
  box-sizing: border-box;
  gap: 2px;
  aspect-ratio: 4 / 3;
  padding: var(--sd-space-3);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-petrol-100);
  color: var(--sd-petrol-900);
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
}
.sd-photos__more b { font-size: 22px; line-height: 24px; font-variant-numeric: tabular-nums; }
.sd .sd-photos__more a:hover { background: var(--sd-blue-100); }
.sd-photo a { display: block; border-radius: var(--sd-radius-sm); }
/* Miniatury w karcie opinii: 4 zdjęcia + przycisk „+N” */
.sd-photos--mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 72px), 1fr)); gap: 6px; }
.sd-photos--mini .sd-photos__more { align-items: center; justify-items: center; }

/* Podgląd zdjęcia w oknie (<dialog class="sd-viewer">) */
.sd-viewer { width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--sd-radius-lg); background: var(--sd-paper); color: var(--sd-text); box-shadow: var(--sd-shadow-2); overflow: auto; }
.sd-viewer::backdrop { background: rgba(11, 46, 66, 0.72); }
.sd-viewer__inner { display: grid; }
.sd-viewer__img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: var(--sd-petrol-900); }
.sd-viewer__body { display: grid; gap: var(--sd-space-3); align-content: start; padding: var(--sd-space-6); }
.sd-viewer__caption { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-viewer__close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: var(--sd-touch); height: var(--sd-touch); border: 0; border-radius: var(--sd-radius-pill); background: var(--sd-paper); color: var(--sd-petrol-900); box-shadow: var(--sd-shadow-1); cursor: pointer; }
@media (min-width: 768px) { .sd-viewer__inner { grid-template-columns: minmax(0, 1fr) 300px; } .sd-viewer__img { height: 100%; max-height: 80vh; } }

/* Filmy */
.sd-videos { display: grid; gap: var(--sd-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.sd-video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--sd-radius-md); background: var(--sd-petrol-900); }

/* 18. Opinia ------------------------------------------------------------ */
.sd-opinion { display: flex; flex-direction: column; gap: var(--sd-space-4); padding: var(--sd-space-6); border: 1px solid var(--sd-line); border-radius: var(--sd-radius-md); background: var(--sd-paper); }
.sd-opinion__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sd-space-3); align-items: center; }
.sd-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sd-radius-pill); background: var(--sd-petrol-100); color: var(--sd-petrol-900); font-weight: 700; overflow: hidden; flex: none; }
.sd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sd-avatar--engineer { background: var(--sd-blue-100); color: var(--sd-blue-700); }
.sd-opinion__author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sd-space-2); font-weight: 700; color: var(--sd-petrol-900); }
.sd-opinion__meta { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }
.sd-opinion__text { color: var(--sd-text); }
.sd-opinion__text--clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sd-opinion__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sd-space-2) var(--sd-space-4); margin-top: auto; padding-top: var(--sd-space-4); border-top: 1px solid var(--sd-line); }

/* Znaczek (np. „Zweryfikowany odbiór”) */
.sd-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--sd-radius-pill); background: var(--sd-paper-2); color: var(--sd-text-muted); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.sd-badge--ok { background: var(--sd-ok-100); color: var(--sd-ok); }

/* 19. Przełącznik (zakładki, grupy) ----------------------------------- */
.sd-segment { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-md); background: var(--sd-paper-2); max-width: 100%; box-sizing: border-box; }
.sd-segment--fill { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; width: 100%; }
.sd-segment--4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .sd-segment--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-segment__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sd-space-2);
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--sd-radius-sm);
  background: transparent;
  color: var(--sd-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.sd-segment__item:hover { background: var(--sd-paper); color: var(--sd-petrol-900); }
.sd-segment__item[aria-selected="true"], .sd-segment__item[aria-pressed="true"], .sd-segment__item[aria-current="page"] { background: var(--sd-paper); color: var(--sd-petrol-900); font-weight: 700; box-shadow: var(--sd-shadow-1), inset 0 -2px 0 var(--sd-blue-700); }
.sd-segment__sub { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--sd-text-muted); }
.sd-count { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding-inline: 6px; box-sizing: border-box; border-radius: var(--sd-radius-pill); background: var(--sd-track); color: var(--sd-petrol-900); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 20. Chip (filtr, tag usterki) --------------------------------------- */
.sd-chips { display: flex; flex-wrap: wrap; gap: var(--sd-space-2); }
.sd-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-1);
  min-height: 36px;
  padding: 6px 14px;
  box-sizing: border-box;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-pill);
  background: var(--sd-paper);
  color: var(--sd-petrol-900);
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.sd-chip:hover { border-color: var(--sd-blue-700); color: var(--sd-blue-800); }
.sd-chip[aria-pressed="true"], .sd-chip[aria-current="page"] { background: var(--sd-blue-700); border-color: var(--sd-blue-700); color: var(--sd-paper); font-weight: 700; }
.sd-chip--tag { min-height: 0; padding: 4px 10px; border-color: transparent; border-radius: var(--sd-radius-sm); background: var(--sd-paper-2); color: var(--sd-text); font-size: 13px; line-height: 18px; cursor: default; max-width: 100%; }
.sd-chip--tag:hover { border-color: transparent; color: var(--sd-text); }
.sd-chip--more { font-weight: 700; color: var(--sd-blue-700); background: var(--sd-blue-100); }
button.sd-chip--more { border: 0; cursor: pointer; }
button.sd-chip--more:hover { color: var(--sd-blue-800); }

/* 21. Tabela ------------------------------------------------------------- */
.sd-table-wrap { overflow-x: auto; border: 1px solid var(--sd-line); border-radius: var(--sd-radius-md); background: var(--sd-paper); }
.sd-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 20px; }
.sd-table th, .sd-table td { padding: 12px 10px; border-bottom: 1px solid var(--sd-line); text-align: left; vertical-align: middle; }
.sd-table thead th { background: var(--sd-petrol-700); color: var(--sd-paper); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.96px; text-transform: uppercase; white-space: normal; }
.sd-table tbody tr:last-child > * { border-bottom: 0; }
.sd-table tbody tr:hover { background: var(--sd-paper-2); }
.sd-table .sd-table__num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; width: 84px; }
.sd-table thead .sd-table__num { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.sd-table .sd-table__pos { width: 48px; text-align: center; font-family: var(--font-mono); font-weight: 700; color: var(--sd-petrol-900); }
.sd-table .is-active { background: var(--sd-blue-100); font-weight: 700; color: var(--sd-petrol-900); }
.sd-table thead .is-active { background: var(--sd-blue-700); color: var(--sd-paper); }
.sd-table__sort { all: unset; display: block; width: 100%; min-height: 32px; cursor: pointer; text-align: inherit; }
.sd-table__sort:focus-visible { outline: 3px solid var(--sd-focus-inverse) !important; outline-offset: 2px; }
.sd-table__dev { display: flex; align-items: center; gap: var(--sd-space-3); min-width: 0; }
.sd .sd-table__dev a { color: var(--sd-petrol-900); font-weight: 700; text-decoration: none; overflow-wrap: break-word; hyphens: auto; }
.sd .sd-table__dev a:hover { text-decoration: underline; }
.sd-table__dev small { display: block; font-size: 13px; line-height: 18px; color: var(--sd-text-muted); font-weight: 400; }
/* Na telefonie: pozycja, deweloper, ocena ogólna (.sd-table__key) i aktywny parametr (.is-active) */
@media (max-width: 767.98px) {
  .sd-table--compact .sd-table__num:not(.sd-table__key):not(.is-active) { display: none; }
  .sd-table--compact th, .sd-table--compact td { padding-inline: 8px; }
  .sd-table--compact .sd-table__dev .sd-logo { display: none; }
  .sd-table--compact .sd-table__num { width: 56px; }
  .sd-table--compact .sd-table__pos { width: 32px; }
}

/* 22. Usługi -------------------------------------------------------------- */
.sd-services { display: grid; gap: var(--sd-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.sd-service { display: flex; flex-direction: column; gap: var(--sd-space-3); padding: var(--sd-space-6); border: 1px solid var(--sd-line); border-radius: var(--sd-radius-lg); background: var(--sd-paper); }
.sd-service__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--sd-radius-pill); background: var(--sd-petrol-100); color: var(--sd-petrol-700); }
.sd-service__icon .sd-icon { width: 28px; height: 28px; }
.sd-service__title { color: var(--sd-petrol-900); }
.sd-service__text { font-size: 15px; line-height: 24px; color: var(--sd-text); }
.sd-service__ask { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--sd-petrol-900); }
.sd-service__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sd-space-2) var(--sd-space-4); margin-top: auto; padding-top: var(--sd-space-2); }

/* 23. Rozmowa z prawnikiem (oddzwonienie) -------------------------------- */
.sd-callback {
  --sd-focus: var(--sd-focus-inverse);
  display: grid;
  gap: var(--sd-space-6);
  padding: var(--sd-space-8) var(--sd-space-6);
  border-radius: var(--sd-radius-lg);
  background: var(--sd-petrol-900);
  color: var(--sd-paper);
}
.sd-callback__title { color: var(--sd-paper); }
.sd-callback__list { display: grid; gap: var(--sd-space-2); }
.sd-callback__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sd-space-2); color: var(--sd-petrol-100); }
.sd-callback__list .sd-icon { color: var(--sd-paper); margin-top: 3px; }
.sd-callback__form { display: flex; flex-wrap: wrap; gap: var(--sd-space-2); }
.sd-callback__form .sd-input { flex: 1 1 220px; border-color: var(--sd-paper); }
.sd-callback__sign { display: flex; align-items: center; gap: var(--sd-space-3); font-size: 14px; line-height: 20px; color: var(--sd-petrol-100); }
.sd-callback__sign img { width: 56px; height: 56px; border-radius: var(--sd-radius-pill); object-fit: cover; }
@media (min-width: 992px) { .sd-callback { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: var(--sd-space-12); } }

/* 24. Tekst artykułu ------------------------------------------------------ */
.sd-prose { max-width: var(--sd-measure); font-size: 17px; line-height: 28px; color: var(--sd-text); }
.sd-prose > * + * { margin-top: 1em; }
.sd-prose :where(p, li) { text-align: left !important; }
.sd-prose :where(h2) { margin-top: 1.8em; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--sd-petrol-900); }
.sd-prose :where(h3, h4) { margin-top: 1.5em; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--sd-petrol-900); }
.sd-prose :where(ul, ol) { padding-left: 1.4em; }
.sd-prose :where(ul) { list-style: disc; }
.sd-prose :where(ol) { list-style: decimal; }
.sd-prose :where(li) + li { margin-top: 0.4em; }
.sd-prose :where(li)::marker { color: var(--sd-blue-500); }
.sd-prose :where(strong, b) { color: var(--sd-petrol-900); }
.sd-prose :where(blockquote) { padding: var(--sd-space-4) var(--sd-space-6); border-radius: var(--sd-radius-md); background: var(--sd-paper-2); font-style: normal; }
.sd-prose :where(blockquote) cite { display: block; margin-top: var(--sd-space-2); font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-style: normal; color: var(--sd-text-muted); }
.sd-prose :where(img) { border-radius: var(--sd-radius-md); }

/* 25. Formularz ----------------------------------------------------------- */
.sd-form { display: grid; gap: var(--sd-space-4); max-width: var(--sd-measure); }
.sd-field { display: grid; gap: 6px; }
.sd-field__label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--sd-petrol-900); }
.sd-field__hint { font-size: 13px; line-height: 18px; color: var(--sd-text-muted); }
.sd-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--sd-danger); }
.sd-input, .sd-select, .sd-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: 1px solid var(--sd-line-strong);
  border-radius: var(--sd-radius-sm);
  background: var(--sd-paper);
  color: var(--sd-text);
  font-size: 16px;
  line-height: 22px;
}
.sd-textarea { min-height: 140px; resize: vertical; }
.sd-select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--sd-petrol-900) 50%), linear-gradient(135deg, var(--sd-petrol-900) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.sd-input::placeholder, .sd-textarea::placeholder { color: var(--sd-text-muted); opacity: 1; }
.sd-input:hover, .sd-select:hover, .sd-textarea:hover { border-color: var(--sd-petrol-700); }
.sd-input[aria-invalid="true"], .sd-select[aria-invalid="true"], .sd-textarea[aria-invalid="true"] { border-color: var(--sd-danger); box-shadow: inset 0 0 0 1px var(--sd-danger); }
.sd-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Komunikat */
.sd-alert { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sd-space-3); padding: var(--sd-space-3) var(--sd-space-4); border-radius: var(--sd-radius-md); background: var(--sd-blue-100); color: var(--sd-text); font-size: 15px; line-height: 22px; }
.sd-alert .sd-icon { margin-top: 1px; color: var(--sd-blue-700); }
.sd-alert__title { font-weight: 700; color: var(--sd-petrol-900); }
.sd-alert--ok { background: var(--sd-ok-100); }
.sd-alert--ok .sd-icon, .sd-alert--ok .sd-alert__title { color: var(--sd-ok); }
.sd-alert--warn { background: var(--sd-warn-100); }
.sd-alert--warn .sd-icon, .sd-alert--warn .sd-alert__title { color: var(--sd-warn); }
.sd-alert--danger { background: var(--sd-danger-100); }
.sd-alert--danger .sd-icon, .sd-alert--danger .sd-alert__title { color: var(--sd-danger); }

/* Nota o źródle danych */
.sd-note { display: grid; gap: 4px; padding-top: var(--sd-space-3); border-top: 1px solid var(--sd-line); font-size: 13px; line-height: 18px; color: var(--sd-text-muted); max-width: var(--sd-measure); }

/* 26. Rozwijany blok ------------------------------------------------------- */
.sd-disclosure { border: 1px solid var(--sd-line); border-radius: var(--sd-radius-md); background: var(--sd-paper); }
.sd-disclosure > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sd-space-3);
  min-height: var(--sd-touch);
  padding: var(--sd-space-3) var(--sd-space-4);
  font-weight: 700;
  color: var(--sd-petrol-900);
  cursor: pointer;
  list-style: none;
}
.sd-disclosure > summary::-webkit-details-marker { display: none; }
.sd-disclosure > summary::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.sd-disclosure[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.sd-disclosure__body { padding: 0 var(--sd-space-4) var(--sd-space-4); }

/* 27. Stronicowanie i „Pokaż więcej” ------------------------------------- */
.sd-pager ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.sd .sd-pager a, .sd-pager span {
  display: grid;
  place-items: center;
  min-width: var(--sd-touch);
  height: var(--sd-touch);
  padding-inline: 8px;
  box-sizing: border-box;
  border-radius: var(--sd-radius-md);
  color: var(--sd-blue-700);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.sd .sd-pager a:hover { background: var(--sd-blue-100); }
.sd .sd-pager [aria-current="page"] { background: var(--sd-petrol-900); color: var(--sd-paper); }
.sd-pager .sd-pager__gap { color: var(--sd-text-muted); }
.sd-more { display: grid; justify-items: center; gap: var(--sd-space-2); padding-top: var(--sd-space-6); }
.sd-more__count { font-size: 14px; line-height: 20px; color: var(--sd-text-muted); }

/* 28. Narzędzia ----------------------------------------------------------- */
/* Etykieta pełna / skrócona: .sd-wide od 768 px, .sd-narrow poniżej */
.sd-narrow { display: none; }
@media (max-width: 767.98px) { .sd .sd-wide { display: none; } .sd .sd-narrow { display: inline; } }
.sd-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

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