/* Poppins hostowany u nas (licencja OFL, static/fonts/poppins/OFL.txt).
   WOFF2 na pierwszym miejscu: te same piec grubosci wazy 250 KB zamiast 769 KB,
   czyli o 68% mniej do pobrania przed pierwszym renderowaniem tekstu. TTF zostaje
   jako awaryjne zrodlo — przegladarka pobiera TYLKO pierwszy obslugiwany format,
   wiec fallback nic nie kosztuje.
   Wszystkie piec grubosci jest realnie uzywanych w arkuszach, zadnej nie da sie usunac. */
@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins/Poppins-Regular.woff2") format("woff2"),
       url("/static/fonts/poppins/Poppins-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins/Poppins-Medium.woff2") format("woff2"),
       url("/static/fonts/poppins/Poppins-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins/Poppins-SemiBold.woff2") format("woff2"),
       url("/static/fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins/Poppins-Bold.woff2") format("woff2"),
       url("/static/fonts/poppins/Poppins-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/poppins/Poppins-ExtraBold.woff2") format("woff2"),
       url("/static/fonts/poppins/Poppins-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --brand-ink: #123536;
  --brand-ink-deep: #0a2829;
  --brand-muted: #5b6f6d;
  --brand-green: #2b765f;
  --brand-green-dark: #1d5947;
  /* Wypelnienie kafelka po najechaniu/kliknieciu. Ciemna zielen, a nie prawie czarne
     `--brand-ink-deep` (#0a2829), ktore czytalo sie jak czern. Odcien dobrany pod
     kontrast: zloty tekst 5,0:1, bialy 10,8:1 — oba przechodza WCAG AA. */
  --brand-green-deep: #154630;
  --brand-mint: #dceee5;
  --brand-mint-light: #f0f7f3;
  --brand-sand: #f5efe4;
  --brand-gold: #d8aa4b;
  --brand-hero: #18372d;
  --brand-hero-deep: #102a23;
  --brand-cream: #f7f0df;
  --brand-coral: #ff8a4c;
  --brand-paper: #ffffff;
  --brand-canvas: #f6f8f5;
  --brand-line: #d8e2dc;
  /* Mocniejszy obrys tam, gdzie ramka NIESIE tresc — kafelek wyboru sytuacji jest
     klikalny, wiec jego krawedz musi byc widoczna, a nie tylko domyslana. */
  --brand-line-strong: #b3c7bd;
  --brand-danger: #a13b36;
  --brand-radius-sm: 10px;
  --brand-radius: 18px;
  /* 🔴 BYL UZYWANY W CZTERECH MIEJSCACH, ALE NIGDY NIE ZDEFINIOWANY — `border-radius:
     var(--brand-radius-md)` bez wartosci jest deklaracja niepoprawna, wiec te pola
     nie mialy zaokraglen W OGOLE (kafelki pytan i ramki „Chcesz dowiedziec sie wiecej?").
     Zauwazyl to wlasciciel 07.09.2026: „pola z tekstami maja byc zaoblone jak te powyzej". */
  --brand-radius-md: 14px;
  /* Nadtytul na CIEMNYM tle. `--brand-green-dark` na ciemnej zieleni dawal 1,91:1 —
     ciemna zielen na ciemnej zieleni, przy wymaganych 4,5:1 dla tekstu tej wielkosci.
     Zmierzone w przegladarce, nie oszacowane. Ta szalwia daje 6,96:1: czytelnie,
     a nadal ciszej niz bialy naglowek obok. */
  --brand-kicker-on-dark: #8fb6a2;
  --brand-radius-lg: 28px;
  --brand-space-1: 8px;
  --brand-space-2: 16px;
  --brand-space-3: 24px;
  --brand-space-4: 36px;
  --brand-space-5: 56px;
  --brand-space-6: 84px;
  --brand-shadow: 0 20px 70px rgba(20, 54, 52, 0.10);
  --brand-font: "Poppins", "Segoe UI", Arial, sans-serif;

  /* Aliasy zachowują zgodność z istniejącymi komponentami wyceny. */
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --line: var(--brand-line);
  --paper: var(--brand-paper);
  --canvas: var(--brand-canvas);
  --green: var(--brand-green);
  --green-dark: var(--brand-green-dark);
  --green-soft: var(--brand-mint-light);
  --green-pale: var(--brand-mint-light);
  --yellow: var(--brand-gold);
  --yellow-dark: #b8872f;
  --danger: var(--brand-danger);
  --shadow: var(--brand-shadow);
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--brand-canvas);
  color: var(--brand-ink);
  font-family: var(--brand-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.brand-shell,
.shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* Marka i nawigacja */
.brand-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(216, 226, 220, 0.9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
}
.brand-header-inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.dobrane-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--brand-ink-deep);
  text-decoration: none;
}
.dobrane-logo-image { display: block; width: 146px; height: auto; }
.dobrane-logo-na-ciemnym { display: none; }
.dobrane-wordmark {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}
.dobrane-mark {
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 2px;
  background: var(--brand-gold);
  transform: rotate(-18deg);
}
.brand-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-nav a {
  padding: 10px 13px;
  border-radius: 999px;
  color: var(--brand-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.brand-nav a:hover,
.brand-nav a[aria-current="page"] {
  background: var(--brand-mint-light);
  color: var(--brand-green-dark);
}
.brand-map { position: relative; }
.brand-map summary {
  padding: 10px 30px 10px 13px;
  border-radius: 999px;
  color: var(--brand-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.brand-map summary::-webkit-details-marker { display: none; }
.brand-map summary::after {
  position: absolute;
  top: 50%;
  right: 12px;
  content: "⌄";
  font-size: 14px;
  transform: translateY(-56%);
  transition: transform 160ms ease;
}
.brand-map[open] summary,
.brand-map summary:hover { background: var(--brand-mint-light); color: var(--brand-green-dark); }
.brand-map[open] summary::after { transform: translateY(-42%) rotate(180deg); }
.brand-map-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(330px, calc(100vw - 30px));
  padding: 10px;
  border: 1px solid var(--brand-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 65px rgba(10,40,41,.18);
}
.brand-map-menu a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--brand-ink-deep) !important;
}
.brand-map-menu a:hover { background: var(--brand-mint-light) !important; }
.brand-map-menu span { color: var(--brand-green-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.brand-map-menu strong { font-size: 12px; font-weight: 700; }
.brand-nav .brand-nav-plan {
  margin-left: 6px;
  padding-inline: 17px;
  border: 1px solid var(--brand-ink);
  color: var(--brand-ink);
}
.brand-nav .brand-nav-plan:hover {
  border-color: var(--brand-green);
  background: var(--brand-green);
  color: #fff;
}
.brand-nav .brand-nav-meeting {
  border: 1px solid rgba(255, 138, 76, .52);
  background: rgba(255, 138, 76, .11);
  color: var(--brand-ink-deep);
}
.brand-nav .brand-nav-meeting:hover {
  border-color: var(--brand-coral);
  background: var(--brand-coral);
  color: var(--brand-hero-deep);
}
.brand-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--brand-line);
  border-radius: 50%;
  background: #fff;
}
.brand-menu-button > span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: var(--brand-ink);
}

.brand-kicker,
.eyebrow {
  margin: 0 0 10px;
  color: var(--brand-green-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-lead {
  margin: 22px 0 0;
  color: var(--brand-muted);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
}
.brand-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.brand-button:hover { transform: translateY(-2px); }
.brand-button-primary { background: var(--brand-green); color: #fff; }
.brand-button-primary:hover { background: var(--brand-green-dark); }
.brand-button-light { background: #fff; color: var(--brand-ink-deep); }
.brand-button-quiet { border-color: var(--brand-line); background: #fff; color: var(--brand-ink-deep); }
.brand-button-quiet:hover { border-color: rgba(43, 118, 95, .45); background: var(--brand-mint-light); }
.text-link { color: var(--brand-green-dark); font-weight: 700; text-decoration: none; }
.text-link span { display: inline-block; margin-left: 5px; transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(4px); }

/* Strona główna */
.home-page .brand-header {
  border-color: rgba(247, 240, 223, .14);
  background: var(--brand-hero-deep);
}
.home-page .brand-header .dobrane-brand,
.home-page .brand-header .brand-nav a { color: var(--brand-cream); }
.home-page .brand-header .dobrane-logo-na-jasnym { display: none; }
.home-page .brand-header .dobrane-logo-na-ciemnym { display: block; }
.home-page .brand-header .brand-map summary { color: var(--brand-cream); }
.home-page .brand-header .brand-map[open] summary,
.home-page .brand-header .brand-map summary:hover { background: rgba(247,240,223,.1); color: #fff; }
.home-page .brand-header .dobrane-mark { background: var(--brand-coral); }
.home-page .brand-header .brand-nav a:hover,
.home-page .brand-header .brand-nav a[aria-current="page"] {
  background: rgba(247, 240, 223, .1);
  color: #fff;
}
.home-page .brand-header .brand-nav .brand-nav-plan {
  border-color: rgba(247, 240, 223, .46);
  color: var(--brand-cream);
}
.home-page .brand-header .brand-nav .brand-nav-meeting {
  border-color: rgba(255, 138, 76, .72);
  background: var(--brand-coral);
  color: var(--brand-hero-deep);
}
.home-page .brand-header .brand-menu-button {
  border-color: rgba(247, 240, 223, .3);
  background: transparent;
}
.home-page .brand-header .brand-menu-button > span:not(.sr-only) { background: var(--brand-cream); }

.home-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(127, 192, 162, .2), transparent 35%),
    linear-gradient(135deg, var(--brand-hero) 0%, var(--brand-hero-deep) 100%);
  color: var(--brand-cream);
  isolation: isolate;
}
.hero-blueprint-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 240, 223, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 240, 223, .055) 1px, transparent 1px),
    linear-gradient(rgba(247, 240, 223, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 240, 223, .025) 1px, transparent 1px);
  background-position: center;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.22));
}
.home-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(108deg, rgba(255,255,255,.035) 0 23%, transparent 23% 71%, rgba(255,255,255,.025) 71%),
    radial-gradient(circle at 78% 76%, rgba(255, 138, 76, .12), transparent 21%);
  content: "";
}
.hero-wordmark {
  position: absolute;
  top: clamp(20px, 2.4vw, 38px);
  left: clamp(18px, 3.4vw, 64px);
  z-index: 2;
  color: rgba(247, 240, 223, .94);
  font-size: clamp(82px, 8.5vw, 146px);
  font-weight: 800;
  letter-spacing: -.085em;
  line-height: .8;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  user-select: none;
}
.hero-wordmark.is-changing { opacity: 0; transform: translateY(-7px); }
/* Scena hero = siatka dwukolumnowa. Wczesniej slajder i panel byly pozycjonowane
   absolutnie niezaleznie od siebie: slajder rozciagal sie na wysokosc sceny
   (`top:164px; bottom:66px` przy `min-height: max(740px, 100svh-76px)`), wiec przy
   szerokosci ~684px wychodzil kwadrat i grafika 3:2 lezala w nim z jasnymi pasami;
   panel po prawej bral wysokosc z tresci, wiec nigdy nie pasowal do slajdera.
   `align-items: stretch` sprawia, ze obie kolumny MAJA rowna wysokosc z definicji. */
.hero-stage {
  position: relative;
  display: grid;
  align-items: stretch;
  /* Hero jest szersze od reszty strony — standardowa szerokosc `brand-shell` (1180px)
     zostawiala szerokie puste marginesy po bokach, a slajder scisniety do 58% wychodzil
     kwadratowy. */
  width: min(1420px, calc(100% - 48px));
  gap: 40px;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  padding: 150px 0 84px;
}
.hero-stage-meta {
  position: absolute;
  z-index: 3;
  top: 28px;
  right: 0;
  display: flex;
  gap: 24px;
  color: rgba(247, 240, 223, .7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-stage-meta span + span::before {
  margin-right: 24px;
  color: var(--brand-coral);
  content: "•";
}
.hero-system {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(247, 240, 223, .14);
  border-radius: 2px;
  background: rgba(8, 25, 21, .5);
  box-shadow: 0 28px 70px rgba(4, 17, 14, .3);
  opacity: 1;
  transform: none;
  transform-origin: center;
}
.home-hero.is-ready .hero-system {
  animation: hero-system-reveal 1200ms cubic-bezier(.2,.75,.25,1) 120ms forwards;
}
.hero-system-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .98;
}
.hero-slide-system { background: #f5f2ec; }
.hero-slide-system .hero-system-image {
  object-fit: contain;
  object-position: center;
  opacity: 1;
}
.hero-slide-system::after { display: none; }
.hero-carousel { isolation: isolate; }
.hero-slide {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity 720ms ease, transform 1100ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 720ms;
}
.hero-slide.is-active {
  z-index: 1;
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}
.hero-slide::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,24,20,.04) 36%, rgba(8,24,20,.78) 100%);
  content: "";
  pointer-events: none;
}
.hero-slide-story {
  position: absolute;
  z-index: 2;
  right: 120px;
  bottom: 18px;
  left: 20px;
  color: var(--brand-cream);
  text-shadow: 0 2px 18px rgba(4,17,14,.5);
}
.hero-slide-story span {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-coral);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero-slide-story strong {
  display: block;
  max-width: 500px;
  font-size: clamp(17px, 1.65vw, 23px);
  line-height: 1.15;
}
.hero-slide-story small {
  display: block;
  max-width: 540px;
  margin-top: 6px;
  color: rgba(247,240,223,.78);
  font-size: 11px;
  line-height: 1.45;
}
.hero-carousel-controls {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(247,240,223,.18);
  border-radius: 999px;
  background: rgba(8,24,20,.62);
  backdrop-filter: blur(10px);
}
.hero-carousel-arrow,
.hero-carousel-dots button {
  border: 0;
  color: var(--brand-cream);
  cursor: pointer;
}
.hero-carousel-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  font: inherit;
}
.hero-carousel-arrow:hover { background: rgba(247,240,223,.12); }
.hero-carousel-dots { display: flex; align-items: center; gap: 6px; }
.hero-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  background: rgba(247,240,223,.38);
  transition: width 180ms ease, background 180ms ease;
}
.hero-carousel-dots button[aria-pressed="true"] { width: 20px; background: var(--brand-coral); }
.hero-carousel-arrow:focus-visible,
.hero-carousel-dots button:focus-visible { outline: 2px solid var(--brand-cream); outline-offset: 3px; }
.hero-system-svg { display: none; }
.hero-measures,
.hero-house-line,
.hero-house-face,
.hero-roof-plane,
.hero-panels,
.hero-home-hub,
.hero-battery,
.hero-car,
.hero-sun,
.hero-grid-node {
  fill: none;
  stroke: rgba(247, 240, 223, .8);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.hero-measures {
  stroke: rgba(247, 240, 223, .26);
  stroke-dasharray: 4 7;
  stroke-width: 1;
}
.hero-house-face,
.hero-roof-plane { stroke: rgba(247, 240, 223, .72); }
.hero-house-face-front { fill: url(#heroHouseFill); }
.hero-roof-plane-main { fill: rgba(247, 240, 223, .06); }
.hero-house-line { stroke-width: 2.4; }
.hero-house-detail { stroke: rgba(247, 240, 223, .46); stroke-width: 1.4; }
.hero-panels { fill: rgba(127, 192, 162, .16); stroke: #b5e1cd; stroke-width: 1.8; }
.hero-home-hub { fill: rgba(16, 42, 35, .9); stroke: var(--brand-coral); }
.hero-home-hub path { fill: var(--brand-coral); stroke: none; }
.hero-battery { fill: rgba(247, 240, 223, .035); stroke: rgba(247, 240, 223, .82); }
.hero-battery rect:not(:first-child),
.hero-battery circle { fill: var(--brand-coral); stroke: none; }
.hero-car { fill: rgba(247, 240, 223, .04); }
.hero-sun { stroke: var(--brand-coral); }
.hero-sun circle { fill: rgba(255, 138, 76, .12); }
.hero-grid-node { stroke: rgba(247, 240, 223, .48); }
.hero-connections {
  fill: none;
  stroke: rgba(247, 240, 223, .27);
  stroke-linecap: round;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.hero-energy-routes { fill: none; }
.hero-energy-path {
  stroke: var(--brand-coral);
  stroke-dasharray: 8 10;
  stroke-linecap: round;
  stroke-width: 2.5;
  marker-end: url(#heroArrow);
  opacity: .88;
  vector-effect: non-scaling-stroke;
}
.hero-flow-sun { --flow-delay: 0ms; --flow-duration: 1800ms; }
.hero-flow-pv-home { --flow-delay: 180ms; --flow-duration: 1700ms; }
.hero-flow-home-storage {
  --flow-delay: 360ms;
  --flow-duration: 2000ms;
  marker-start: url(#heroArrow);
}
.hero-flow-storage-car { --flow-delay: 600ms; --flow-duration: 1900ms; }
.hero-flow-surplus {
  --flow-delay: 820ms;
  --flow-duration: 2300ms;
  marker-end: url(#heroArrowSurplus);
  opacity: .5;
  stroke: var(--brand-cream);
  stroke-dasharray: 3 12;
  stroke-width: 1.8;
}
.home-hero.is-ready .hero-energy-path {
  animation: hero-route var(--flow-duration, 1900ms) linear var(--flow-delay, 0ms) infinite;
}
.hero-energy-node { fill: var(--brand-coral); filter: url(#heroGlow); }
.hero-energy-node-surplus { fill: var(--brand-cream); opacity: .62; }
.hero-device-labels {
  fill: rgba(247, 240, 223, .74);
  font-family: var(--brand-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}
.hero-device-labels .hero-surplus-label { fill: rgba(247, 240, 223, .52); font-size: 8px; }
.hero-message {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 0 0 30px;
  border-top: 1px solid rgba(247, 240, 223, .36);
}
.hero-message .brand-kicker { color: var(--brand-coral); }
.home-hero h1,
.packages-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--brand-ink-deep);
  font-size: clamp(42px, 6.2vw, 76px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.02;
}
.home-hero h1 {
  max-width: 520px;
  color: var(--brand-cream);
  font-size: clamp(36px, 3.5vw, 54px);
  font-weight: 600;
  letter-spacing: -.055em;
}
.hero-message .brand-lead {
  max-width: 560px;
  margin-top: 17px;
  color: rgba(247, 240, 223, .84);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.6;
}
.hero-support-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 138, 76, .34);
  border-radius: 12px;
  background: rgba(255, 138, 76, .08);
  color: var(--brand-cream);
  text-decoration: none;
}
.hero-support-callout > span { display: grid; gap: 3px; min-width: 0; }
.hero-support-callout small {
  color: rgba(247, 240, 223, .64);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.hero-support-callout b { color: var(--brand-cream); font-size: 12px; line-height: 1.35; }
.hero-support-callout strong { flex: 0 0 auto; color: var(--brand-coral); font-size: 11px; }
.hero-support-callout:hover { background: rgba(255, 138, 76, .14); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-message .brand-button-primary { background: var(--brand-coral); color: var(--brand-hero-deep); }
.hero-message .brand-button-primary:hover { background: #ff9f6c; }
.hero-message .brand-button-quiet {
  border-color: rgba(247, 240, 223, .38);
  background: transparent;
  color: var(--brand-cream);
}
.hero-message .brand-button-quiet:hover { background: rgba(247, 240, 223, .1); }
.hero-answer-strip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(247, 240, 223, .18);
}
.hero-answer-strip > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid rgba(255, 138, 76, .55);
  border-radius: 50%;
  color: var(--brand-coral);
  font-size: 9px;
  font-weight: 700;
}
.hero-answer-strip p { margin: 0; color: rgba(247, 240, 223, .68); font-size: 11px; line-height: 1.45; }
.hero-answer-strip strong { color: var(--brand-cream); }
.hero-result-points { margin-top: 4px !important; color: rgba(247, 240, 223, .52) !important; font-size: 9px !important; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }
.hero-result-points i { margin: 0 5px; color: var(--brand-coral); font-style: normal; }
.answer-first-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 11px 15px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--brand-green-dark);
  font-size: 13px;
  font-weight: 600;
}
.answer-first-note span { color: var(--brand-green); font-weight: 800; }
.hero-answer-card {
  position: absolute;
  z-index: 3;
  bottom: 62px;
  left: 0;
  width: 250px;
  padding: 21px;
  border: 1px solid rgba(247, 240, 223, .18);
  background: rgba(247, 240, 223, .08);
  backdrop-filter: blur(10px);
}
.hero-answer-card > span {
  display: block;
  color: var(--brand-coral);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero-answer-card strong { display: block; margin-top: 28px; font-size: 18px; line-height: 1.25; }
.hero-answer-card p { margin: 10px 0 0; color: rgba(247,240,223,.64); font-size: 11px; line-height: 1.55; }
.hero-scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: 25px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(247, 240, 223, .7);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.hero-scroll-cue span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(247, 240, 223, .32);
  border-radius: 50%;
  color: var(--brand-coral);
}

@keyframes hero-system-reveal {
  from { opacity: .34; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-route { to { stroke-dashoffset: -36; } }

.how-section,
.entry-section,
.package-list { padding: var(--brand-space-6) 0; background: #fff; }
.how-heading { grid-template-columns: minmax(0, 900px) auto; }
.how-step-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.how-step-grid li {
  min-height: 245px;
  padding: 24px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background: rgba(255,255,255,.84);
  box-shadow: 0 14px 38px rgba(20,54,52,.05);
}
/* Cztery kroki „do czego sluzy ta strona" mialy jedno biale tlo i zlewaly sie w pas.
   Wlasciciel 04.09: „punkty moga miec rozne tla naprzemiennie". Naprzemiennosc liczymy
   co DWA kafelki (2n+1 / 2n), zeby po zlamaniu siatki do dwoch kolumn szachownica
   dalej sie zgadzala — przy zwyklym `odd/even` w ukladzie 2-kolumnowym kazda kolumna
   wyszlaby jednokolorowa. Tla sa jasne (mieta i piasek), wiec tekst zostaje ten sam
   i kontrast nie spada. */
.how-step-grid li:nth-child(2n+1) { background: var(--brand-mint-light); }
.how-step-grid li:nth-child(2n)   { background: var(--brand-sand); }
.how-step-grid li > span {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-paper);
  color: var(--brand-green-dark);
  font-size: 11px;
  font-weight: 800;
  /* Numer na wlasnej, jasnej podkladce — na kolorowym kafelku miecianka na miecie
     przestawala byc widoczna jako osobny element. */
  box-shadow: 0 0 0 1px var(--brand-line);
}
.how-step-grid li:nth-child(2n) > span { color: #8a5a12; }
.how-step-grid strong { display: block; color: var(--brand-ink-deep); font-size: 18px; line-height: 1.25; }
.how-step-grid p { margin: 10px 0 0; color: var(--brand-muted); font-size: 13px; line-height: 1.6; }
.plan-explainer {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: 46px 62px;
  margin-top: 26px;
  padding: 42px;
  border-radius: var(--brand-radius-lg);
  background: var(--brand-ink-deep);
  color: var(--brand-cream);
  box-shadow: 0 25px 68px rgba(10,40,41,.16);
}
.plan-explainer-copy h2,
.plan-explainer-copy h3 { margin: 0; font-size: clamp(29px, 3.5vw, 43px); letter-spacing: -.045em; line-height: 1.08; }
.plan-explainer-copy > p:not(.brand-kicker) { margin: 17px 0 24px; color: rgba(247,240,223,.74); font-size: 15px; line-height: 1.7; }
.plan-explainer .brand-kicker { color: var(--brand-coral); }
.plan-explainer .brand-button-quiet {
  border-color: var(--brand-coral);
  background: var(--brand-coral);
  color: var(--brand-hero-deep);
}
.plan-explainer .brand-button-quiet:hover { border-color: #ff9f6c; background: #ff9f6c; color: var(--brand-hero-deep); }
.plan-benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.plan-benefit-list li { display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding: 18px; border: 1px solid rgba(247,240,223,.14); border-radius: var(--brand-radius); background: rgba(255,255,255,.045); }
.plan-benefit-list li > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(127,192,162,.16); color: #a9dfc6; font-weight: 800; }
.plan-benefit-list strong { display: block; color: var(--brand-cream); font-size: 17px; line-height: 1.3; }
.plan-benefit-list p { margin: 7px 0 0; color: rgba(247,240,223,.82); font-size: 14px; line-height: 1.55; }
.plan-contact-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 17px 20px; border-left: 3px solid var(--brand-coral); background: rgba(255,255,255,.055); }
.plan-contact-note strong { flex: 0 0 auto; color: var(--brand-coral); font-size: 13px; }
.plan-contact-note span { color: rgba(247,240,223,.78); font-size: 12px; }
/* Naglowek sekcji: tekst po LEWEJ, ikona po prawej krawedzi (wlasciciel 04.09 — jeden
   naglowek byl wysrodkowany, reszta do lewej; ujednolicone do lewej, bo tak jest
   z pozostalymi opisami). Tekst nie idzie w grid osobnymi kafelkami: wszystkie dzieci
   poza ikona siedza w kolumnie 1, wiec akapity ukladaja sie jak wczesniej, a znacznikow
   naglowkow nie trzeba bylo przebudowywac. */
.section-heading {
  display: grid;
  margin-bottom: 38px;
  align-items: center;
  gap: 0 40px;
  grid-template-columns: minmax(0, 710px) auto;
}
.section-heading > *:not(.section-heading-ikona) { grid-column: 1; }
.section-heading-ikona {
  /* 96 px gubilo sie w szerokosci sekcji (wlasciciel 04.09: „troche wieksze"). */
  width: 124px;
  height: 124px;
  grid-row: 1 / -1;
  grid-column: 2;
  justify-self: end;
  color: var(--brand-green);
  opacity: .55;
  stroke-width: 1.05;      /* im wiekszy rysunek, tym cienszej kreski potrzebuje */
}
.section-heading h2,
.answer-copy h2,
.home-cta h2,
.sets-explainer h2 {
  margin: 0;
  color: var(--brand-ink-deep);
  font-size: clamp(30px, 4.4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.section-heading > p:last-child,
.answer-copy > p,
.sets-explainer p {
  color: var(--brand-muted);
  font-size: 17px;
}
#homeHeroTitle,
#howTitle,
#entryTitle,
#answerTitle,
#supportTitle,
#knowledgeTitle,
#glossaryTitle,
#brandsTitle { scroll-margin-top: 96px; }
.entry-card-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}
.entry-card {
  position: relative;
  display: flex;
  min-height: 285px;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  /* Obrys grubszy i ciemniejszy niz domyslna `--brand-line` (wlasciciel 04.09:
     „bardziej wyrazne obrysy") — przy 1 px w kolorze linii kafelki gubily sie na papierze. */
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--brand-radius-lg);
  background: var(--brand-paper);
  color: var(--brand-ink);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.entry-card:nth-child(1),
.entry-card:nth-child(4) { grid-column: span 7; }
.entry-card:nth-child(2),
.entry-card:nth-child(3) { grid-column: span 5; }
/* Jeden zestaw regul na najechanie, klikniecie i fokus z klawiatury. Hover siedzial
   wczesniej w osobnym `@media (hover: hover)` — na urzadzeniu, ktore raportuje brak
   hovera, kafelek zmienial sie dopiero po kliknieciu. Kafelki sa linkami, ktore
   przechodza dalej, wiec "lepki" hover na dotyku nie ma tu znaczenia. */
.entry-card:hover,
.entry-card:focus-visible,
.entry-card:active {
  transform: translateY(-5px);
  border-color: var(--brand-green-deep);
  background: var(--brand-green-deep);
  color: #fff;
  box-shadow: var(--brand-shadow);
}
.entry-card:focus-visible,
.entry-card:active {
  outline: 3px solid rgba(255, 138, 76, .42);
  outline-offset: 3px;
}
.entry-number { color: currentColor; font-size: 12px; font-weight: 700; letter-spacing: .12em; opacity: .55; }
.entry-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 26px 0 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-mint-light);
  color: var(--brand-green-dark);
}
.entry-icon .brand-ikona { width: 27px; height: 27px; }
.entry-card > strong { font-size: 25px; letter-spacing: -.03em; }
.entry-card > span:not(.entry-number):not(.entry-icon) { margin-top: 10px; color: var(--brand-muted); font-size: 14px; }
.entry-card > b { margin-top: auto; padding-top: 26px; color: var(--brand-green-dark); font-size: 13px; }
.entry-card:hover .entry-icon,
.entry-card:focus-visible .entry-icon,
.entry-card:active .entry-icon { background: rgba(255,255,255,.12); color: var(--brand-gold); }
.entry-card:hover > span:not(.entry-number):not(.entry-icon),
.entry-card:focus-visible > span:not(.entry-number):not(.entry-icon),
.entry-card:active > span:not(.entry-number):not(.entry-icon) { color: rgba(255,255,255,.72); }
.entry-card:hover > b,
.entry-card:focus-visible > b,
.entry-card:active > b { color: var(--brand-gold); }

.answer-section {
  padding: 92px 0;
  border-top: 1px solid #cbdad2;
  border-bottom: 1px solid #cbdad2;
  background: linear-gradient(135deg, #edf4ef 0%, #f5f1e8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.answer-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(430px, 1.2fr); gap: 80px; align-items: center; }
.answer-copy .text-link { display: inline-block; margin-top: 20px; }
.answer-list {
  margin: 0;
  padding: 10px 28px;
  list-style: none;
  border: 1px solid rgba(18,53,54,.16);
  border-radius: var(--brand-radius-lg);
  background: rgba(255,255,255,.78);
  box-shadow: 0 18px 55px rgba(20,54,52,.07);
}
.answer-list li { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 23px 0; border-bottom: 1px solid rgba(18,53,54,.16); }
.answer-list li:last-child { border-bottom: 0; }
.answer-list li > span { color: var(--brand-green-dark); font-size: 12px; font-weight: 700; }
.answer-list strong { font-size: 19px; }
.answer-list p { margin: 5px 0 0; color: var(--brand-muted); font-size: 14px; }

/* Powtarzalny rytm strony: delikatna kratka w co drugiej sekcji głównej. */
.home-page main > section:nth-of-type(even) {
  position: relative;
  isolation: isolate;
}
.home-page main > section:nth-of-type(even)::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(18,53,54,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,53,54,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  content: "";
  pointer-events: none;
}
.home-page main > section:nth-of-type(even) > * {
  position: relative;
  z-index: 1;
}
.support-section { padding: 92px 0; background: var(--brand-sand); }
.support-heading { grid-template-columns: minmax(0, 820px) auto; }
.support-status {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: -14px 0 24px;
  padding: 14px 17px;
  border-left: 3px solid var(--brand-coral);
  background: rgba(255,255,255,.72);
}
.support-status span {
  flex: 0 0 auto;
  color: var(--brand-green-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.support-status p { margin: 0; color: var(--brand-muted); font-size: 13px; }
/* Karty PME i Ulgi maja sie czytac WIERSZAMI: siatka liczb obok siatki liczb, przycisk
   obok przycisku. Rozjezdzaly sie, bo naglowek „Przydomowe Magazyny Energii — PME 2"
   zajmuje dwa wiersze, a „Ulga termomodernizacyjna" jeden — i wszystko ponizej zsuwalo
   sie o jeden wiersz (uwaga wlasciciela 04.09).
   Ten sam mechanizm co w kartach wariantow: `subgrid`, bez dobierania wysokosci recznie.
   Siedem wierszy: naglowek sekcji, tytul, opis, liczby, warunki/wyjasnienie, przycisk,
   przypis (tylko PME — u Ulgi ten wiersz zostaje pusty). */
.support-card-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); gap: 18px; }

@supports (grid-template-rows: subgrid) {
  .support-card-grid > .support-card {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    min-height: 0;              /* wysokosc wyznaczaja teraz wiersze, nie sztywne 610 px */
  }
  /* `margin-top: auto` dosuwalo przycisk do dolu przy ukladzie flex — w siatce
     przycisk stoi we wlasnym wierszu i nie ma czego dosuwac. */
  .support-card-grid > .support-card .brand-button { margin-top: 0; align-self: start; }
}
.support-card {
  display: flex;
  min-height: 610px;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  background: #fff;
}
.support-card-pme { border-color: rgba(255, 138, 76, .42); }
.support-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.support-card-label {
  color: var(--brand-green-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.support-card-state {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--brand-mint-light);
  color: var(--brand-green-dark);
  font-size: 10px;
  font-weight: 700;
}
.support-card-pme .support-card-state { background: rgba(255, 138, 76, .12); color: #a74720; }
.support-card h3 { margin: 22px 0 9px; color: var(--brand-ink-deep); font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; line-height: 1.1; }
.support-card > p { margin: 0; color: var(--brand-muted); font-size: 14px; line-height: 1.6; }
.support-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 26px 0 22px; background: var(--brand-line); }
.support-facts div { min-height: 105px; padding: 17px; background: #fff; }
.support-facts dt { color: var(--brand-ink-deep); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.support-facts dd { margin: 5px 0 0; color: var(--brand-muted); font-size: 11px; line-height: 1.45; }
.support-conditions { margin: 0 0 24px; padding-left: 19px; color: var(--brand-muted); font-size: 12px; line-height: 1.75; }
.support-card .brand-button { align-self: flex-start; margin-top: auto; }
.support-card .support-disclaimer { margin-top: 14px; font-size: 10px; line-height: 1.5; }
.support-card .support-explanation { margin-bottom: 24px; font-size: 12px; }
.support-combine {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  margin-top: 18px;
  padding: 22px 25px;
  border-radius: var(--brand-radius-md);
  background: var(--brand-ink-deep);
  color: #fff;
}
.support-combine strong { font-size: 17px; line-height: 1.4; }
.support-combine p { margin: 0; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.6; }
.support-calculator {
  display: grid;
  grid-template-columns: minmax(230px, .62fr) minmax(0, 1.38fr);
  gap: 44px;
  margin-top: 26px;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid rgba(43, 118, 95, .2);
  border-radius: var(--brand-radius-lg);
  background: #fff;
}
/* 🔴 BEZ `sticky`. Wlasciciel zglosil 07.09.2026, ze po pokazaniu wyniku tekst wstepu
   NACHODZI podczas przewijania na tabele wyniku. W podgladzie nie odtworzylem tego
   (panel nie przewija strony, wiec `sticky` sie nie uruchamia), ale przyklejony wstep
   jest JEDYNYM elementem tej sekcji, ktory potrafi wyladowac na cudzej tresci —
   wiec znika mechanizm, a nie objaw. Zysk z przyklejenia byl zadny: naglowek jechal
   za czytelnikiem, o co nikt nie prosil. */
.support-calculator-intro { align-self: start; }
.support-calculator-intro h3,
.support-result-heading h3 {
  margin: 0;
  color: var(--brand-ink-deep);
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: -.045em;
  line-height: 1.08;
}
.support-calculator-intro > p:last-child { color: var(--brand-muted); font-size: 14px; line-height: 1.65; }
.support-calculator-form { display: grid; gap: 22px; }
.support-calculator-form fieldset { margin: 0; padding: 0; border: 0; }
.support-calculator-form legend {
  width: 100%;
  margin-bottom: 13px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-ink-deep);
  font-size: 14px;
  font-weight: 800;
}
.support-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.support-form-grid > label,
.support-bonus-select,
.support-bonus-cost {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  color: var(--brand-muted);
  font-size: 11px;
  font-weight: 700;
}
.support-form-grid input,
.support-form-grid select,
.support-bonus-select select,
.support-bonus-cost input {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 47px;
  padding: 10px 12px;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: #fff;
  color: var(--brand-ink-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}
.support-form-grid input:focus,
.support-form-grid select:focus,
.support-bonus-select select:focus,
.support-bonus-cost input:focus { outline: 3px solid rgba(43, 118, 95, .14); border-color: var(--brand-green); }
.support-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.support-check-grid label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 62px;
  padding: 12px;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  color: var(--brand-muted);
  font-size: 11px;
  line-height: 1.45;
}
.support-check-grid input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 1px; accent-color: var(--brand-green); }
.support-check-grid-single { grid-template-columns: 1fr; margin-bottom: 12px; }
.support-check-grid-single label { min-height: auto; }
.support-bonus-select,
.support-bonus-cost { margin-top: 12px; }
.support-bonus-cost[hidden] { display: none; }
.support-calculator-form > .brand-button { justify-self: start; }
.support-form-error { margin: -8px 0 0; color: #9d321f; font-size: 12px; font-weight: 700; }
.support-result {
  grid-column: 1 / -1;
  padding-top: 34px;
  border-top: 1px solid var(--brand-line);
}
.support-result[hidden] { display: none; }
.support-result-heading { margin-bottom: 20px; }
.support-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.support-result-grid > div { min-height: 155px; padding: 18px; border-radius: 12px; background: var(--brand-mint-light); }
.support-result-grid span,
.support-result-grid small { display: block; color: var(--brand-muted); font-size: 10px; line-height: 1.45; }
.support-result-grid strong { display: block; margin: 18px 0 8px; color: var(--brand-ink-deep); font-size: clamp(22px, 3vw, 30px); letter-spacing: -.035em; }
.support-result-status { margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--brand-green); background: rgba(127, 192, 162, .12); }
.support-result-status.is-warning { border-left-color: var(--brand-coral); background: rgba(255, 138, 76, .1); }
.support-result-status strong { display: block; color: var(--brand-ink-deep); font-size: 13px; }
.support-result-status ul { margin: 8px 0 0; padding-left: 18px; color: var(--brand-muted); font-size: 11px; line-height: 1.6; }
.support-result-legal { margin: 14px 0 0; color: var(--brand-muted); font-size: 10px; line-height: 1.55; }
.energy-knowledge { padding: 88px 0; background: var(--brand-mint-light); }
.knowledge-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knowledge-questions details { align-self: start; border: 1px solid rgba(43, 118, 95, .16); border-radius: var(--brand-radius-md); background: rgba(255,255,255,.78); }
.knowledge-questions summary { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; min-height: 76px; padding: 17px 19px; color: var(--brand-ink-deep); font-size: 15px; font-weight: 750; cursor: pointer; list-style: none; }
.knowledge-questions summary::-webkit-details-marker { display: none; }
.knowledge-questions summary::after { color: var(--brand-green-dark); font-size: 22px; font-weight: 400; content: "+"; }
.knowledge-questions details[open] summary::after { content: "−"; }
.knowledge-questions summary span { color: var(--brand-green-dark); font-size: 10px; letter-spacing: .08em; }
.knowledge-questions details p { margin: 0; padding: 0 19px 19px 63px; color: var(--brand-muted); font-size: 13px; line-height: 1.65; }
.knowledge-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin-top: 18px;
  padding: 24px 26px;
  border: 1px solid rgba(43, 118, 95, .18);
  border-radius: var(--brand-radius-md);
  background: #fff;
}
.knowledge-source strong { color: var(--brand-ink-deep); font-size: 17px; }
.knowledge-source p { max-width: 650px; margin: 5px 0 0; color: var(--brand-muted); font-size: 13px; }
.knowledge-source .brand-button { flex: 0 0 auto; }
.energy-glossary { padding: 88px 0; background: #fff; }
.glossary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.glossary-grid > div { min-height: 205px; padding: 24px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-md); background: var(--brand-paper); }
.glossary-grid dt { color: var(--brand-green-dark); font-size: 24px; font-weight: 850; letter-spacing: -.035em; }
.glossary-grid dd { margin: 24px 0 0; color: var(--brand-muted); font-size: 12px; line-height: 1.65; }
.glossary-grid dd strong { display: block; margin-bottom: 4px; color: var(--brand-ink-deep); font-size: 14px; }
.glossary-source { margin: 18px 0 0; color: var(--brand-muted); font-size: 11px; line-height: 1.6; }
.glossary-source a { color: var(--brand-green-dark); font-weight: 750; }
.brand-proof { padding: 80px 0; background: #fff; }
.brand-name-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--brand-line);
  list-style: none;
}
.brand-name-card {
  display: grid;
  min-height: 204px;
  padding: 30px 20px 24px;
  place-items: center;
  align-content: center;
  background: #fff;
  color: var(--brand-ink-deep);
  text-align: center;
}
/* Kafelek zbiorczy „Kolejne marki" nie ma logotypu — w slocie stoi znak plus.
   Przy 16 px gubil sie w kole 64 px i wygladal na niezaladowany obrazek. */
.brand-name-upcoming .brand-logo-slot { color: var(--brand-muted); font-size: 30px; font-weight: 300; line-height: 1; }
.brand-logo-slot {
  display: grid;
  width: min(100%, 190px);
  height: 64px;
  margin-bottom: 18px;
  place-items: center;
}
.brand-maker-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 54px;
  object-fit: contain;
}
.brand-maker-logo-solax { max-height: 64px; }
.brand-name-card strong { font-size: clamp(18px, 2.4vw, 25px); font-weight: 700; line-height: 1.1; }
.brand-status {
  margin-top: 8px;
  color: var(--brand-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand-name-upcoming { background: #f5f7f4; }
.brand-name-upcoming .brand-maker-logo { filter: saturate(.28); opacity: .74; }
.brand-name-upcoming .brand-status { color: var(--brand-green-dark); }
.home-cta { padding: 64px 0; background: var(--brand-green-dark); color: #fff; }
.home-cta h2 { max-width: 760px; color: #fff; }
.home-cta .brand-kicker { color: var(--brand-mint); }
.home-cta p:last-child { max-width: 760px; margin: 12px 0 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.6; }
.home-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.home-scale-teaser { padding: 58px 0; background: var(--brand-sand); }
.home-scale-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.home-scale-teaser h2 { max-width: 820px; margin-top: 6px; }
.home-scale-teaser p:last-child { max-width: 760px; margin: 10px 0 0; color: var(--brand-muted); }
.home-scale-teaser .brand-button { flex: 0 0 auto; }

/* Zestawy */
.packages-hero { position: relative; isolation: isolate; padding: 78px 0 58px; background: linear-gradient(145deg, #f7faf6, #eaf2ec); }
/* Kratka rozmyta jak na stronie tytulowej (wlasciciel 04.09: „wzorem strony tytulowej
   w zakladkach tez"). Ta sama para linii i ten sam raster 24 px co w rytmie strony
   glownej; `mask-image` scisza ja ku dolowi, zeby nie wchodzila pod tresc. Naglowek
   podstrony jest jasny, wiec linia jest ciemna — odwrotnie niz w hero na stronie
   tytulowej, gdzie tlo jest zielone. */
.packages-hero::before,
.quote-entry::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(18,53,54,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,53,54,.05) 1px, transparent 1px),
    linear-gradient(rgba(18,53,54,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,53,54,.028) 1px, transparent 1px);
  background-position: center;
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.1));
  content: "";
  pointer-events: none;
}
.packages-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: end; }
.packages-hero h1 { max-width: 850px; font-size: clamp(38px, 5.7vw, 66px); }
.packages-note { padding: 22px; border-left: 3px solid var(--brand-gold); background: rgba(255,255,255,.72); }
.packages-note strong, .packages-note span { display: block; }
.packages-note span { margin-top: 6px; color: var(--brand-muted); font-size: 13px; }
.package-builder { padding: 72px 0; background: var(--brand-ink-deep); color: #fff; }
.package-builder-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr); gap: 54px; align-items: start; }
.package-builder-controls h2 { max-width: 620px; margin: 8px 0 12px; color: #fff; font-size: clamp(34px, 4vw, 54px); }
.package-builder-controls > p:not(.brand-kicker) { max-width: 620px; margin: 0 0 30px; color: rgba(255,255,255,.68); }
.package-control-group { display: grid; gap: 10px; margin-top: 22px; }
.package-control-label { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.package-preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.package-preset-grid button,
.package-choice-row button {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.055);
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.package-preset-grid button:hover,
.package-choice-row button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.38); }
.package-preset-grid button[aria-pressed="true"],
.package-choice-row button[aria-pressed="true"] { border-color: var(--brand-coral); background: var(--brand-coral); color: var(--brand-hero-deep); }
.package-preset-grid strong,
.package-preset-grid span { display: block; }
.package-preset-grid strong { font-size: 17px; }
.package-preset-grid span { margin-top: 2px; font-size: 10px; opacity: .72; }
.package-control-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.package-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.package-control-row .package-control-group:last-child .package-choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.package-choice-row button { min-height: 45px; font-size: 12px; font-weight: 700; }
.construction-selector { display: grid; gap: 8px; margin-top: 24px; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.construction-selector select { width: 100%; min-height: 50px; padding: 10px 42px 10px 13px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: #20392f; color: #fff; font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; }
.construction-note { display: grid; gap: 5px; margin-top: 16px; padding: 15px 16px; border-left: 3px solid var(--brand-gold); background: rgba(255,255,255,.055); }
.construction-note strong { color: var(--brand-sand); font-size: 13px; }
.construction-note span { color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.55; }
.installation-preview { padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(9,29,24,.56); box-shadow: 0 24px 80px rgba(0,0,0,.22); }
.preview-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.preview-heading h3 { margin: 5px 0 0; color: #fff; font-size: 24px; }
.preview-status { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
/* Tlo NEUTRALNE i jednolite. Wczesniej scena udawala garaz albo elewacje (sciana
   z fuga, podloga, niebo) i miala przelacznik miejsca montazu — a o miejscu montazu
   u klienta nic nie wiemy, wybor nie zmienial zadnego wymiaru, za to aranzacja
   odciagala uwage od jedynej rzeczy, ktora ten podglad ma pokazac: PROPORCJI. */
/* Tlo jest CIEMNIEJSZE niz obudowy urzadzen — inaczej ich nie widac. Przy poprzednim
   `#eef1ee` bialy magazyn mial wobec tla kontrast 1,06, czyli zlewal sie z nim; teraz
   ma ok. 1,9, a ciemna sylwetka nadal ok. 7,5 (norma dla grafiki to 3,0). */
.scale-scene { position: relative; height: 430px; overflow: hidden; border-radius: 13px; background: #a9b9b3; isolation: isolate; }
/* Linia podlogi — jedyny element aranzacji, jaki zostaje: bez niej sylwetka i magazyn
   wisialyby w prozni i nie bylo by widac, ze stoja na tym samym poziomie. */
.scale-scene::after { position: absolute; z-index: 0; right: 0; bottom: 31px; left: 0; height: 1px; background: rgba(18,38,32,.38); content: ""; pointer-events: none; }
.reference-person { position: absolute; z-index: 3; bottom: 31px; left: 38px; width: 76px; height: 278px; color: var(--brand-ink-deep); }
.reference-person::before { position: absolute; top: 0; left: 23px; width: 32px; height: 32px; border-radius: 50%; background: currentColor; content: ""; }
.reference-person::after { position: absolute; top: 36px; left: 17px; width: 44px; height: 125px; border-radius: 24px 24px 12px 12px; background: currentColor; content: ""; }
.reference-person i::before,
.reference-person i::after { position: absolute; bottom: 22px; width: 20px; height: 124px; border-radius: 10px; background: currentColor; content: ""; }
.reference-person i::before { left: 17px; transform: rotate(4deg); }
.reference-person i::after { right: 15px; transform: rotate(-4deg); }
.reference-person b { position: absolute; right: -10px; bottom: 0; left: -10px; padding: 4px 6px; border-radius: 999px; background: rgba(255,255,255,.86); color: var(--brand-ink-deep); font-size: 10px; text-align: center; }
/* Zestaw stoi na tej samej linii podlogi co sylwetka (31 px). Grupa nie ma zadanego
   rozmiaru — rosnie z rysunkow, bo to KARTA KATALOGOWA decyduje, ile miejsca zajmuje
   magazyn, a nie ramka w CSS. */
/* Pozycje w poziomie ustawia JS: caly zestaw RAZEM Z SYLWETKA ma byc wysrodkowany
   w kadrze, a szerokosc grupy zalezy od marki i pojemnosci (dwie wieze Sofara sa
   duzo szersze niz jedna bryla Solisa). Stad `left` z JS zamiast stalego `right`. */
.preview-system { position: absolute; z-index: 2; bottom: 31px; display: flex; align-items: flex-end; gap: 26px; }
/* Falownik wisi na scianie — `margin-bottom` (wysokosc montazu) ustawia JS. */
.preview-inverter { flex: none; filter: drop-shadow(0 12px 18px rgba(23,42,36,.16)); }
.preview-battery { display: flex; flex: none; align-items: flex-end; filter: drop-shadow(0 18px 22px rgba(23,42,36,.18)); }
/* Wieza: cokol, moduly i glowica jeden na drugim, bez szczelin — kazdy piksel to
   milimetry z karty, wiec CSS nie moze dokladac odstepow ani wysokosci.
   Bryly: osobne obudowy obok siebie; odstep miedzy nimi ustawia JS w milimetrach. */
/* Zestaw zawsze uklada sie w RZAD: bryly Solisa stoja obok siebie, a wieze Sofara
   i Sigenergy — gdy zestaw sklada sie z kilku systemow — tak samo. Do 03.09 wieza byla
   jedna kolumna, wiec 30,72 kWh Sofara (dwa systemy BTS E15) nie mialo jak sie narysowac. */
.preview-battery[data-uklad="wieza"],
.preview-battery[data-uklad="bryly"] { flex-direction: row; align-items: flex-end; }
/* Pojedyncza wieza. Elementy roznej szerokosci maja stac WSPOSRODKOWANE — glowica
   SigenStora jest wezsza od modulow i wyrownana do krawedzi rozjezdzala wieze w bok. */
.preview-wieza { display: flex; flex: none; flex-direction: column; justify-content: flex-end; align-items: center; }
/* `flex: none` jest tu warunkiem POPRAWNOSCI, nie kosmetyka: bez niego flex zmniejszal
   rysunki, zeby zmiescic je w waskiej scenie, i magazyn przestawal byc w skali sylwetki
   obok — a podpis pod scena nadal twierdzil, ze jest. Lepiej, zeby zestaw wystawal poza
   kadr, niz zeby po cichu skurczyl sie o 30%. */
.preview-battery > svg,
.preview-wieza > svg,
.preview-inverter > svg { display: block; flex: none; }
.skala-wzorce { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Linijka wysokosci — te same 31 px od dolu, na ktorych stoi sylwetka i wieza. */
.scene-ruler { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.scene-ruler span { position: absolute; right: 0; left: 0; height: 0; border-top: 1px dashed rgba(18,38,32,.34); }
.scene-ruler span::after { position: absolute; right: 7px; bottom: 2px; color: rgba(15,34,28,.72); font-size: 9px; font-weight: 700; letter-spacing: .04em; content: attr(data-metr); }

.scale-readout { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 14px 0 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.14); }
.scale-readout > div { padding: 10px 11px; background: rgba(9,29,24,.92); }
.scale-readout dt { color: rgba(255,255,255,.52); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.scale-readout dd { margin: 4px 0 0; color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Marka bez potwierdzonej karty: scena zostaje (klient widzi kontekst), ale wieza i
   liczby znikaja — brak danych ma wygladac na brak danych. */
.installation-preview[data-mierzalny="nie"] .preview-system,
.installation-preview[data-mierzalny="nie"] .scene-ruler { display: none; }
.installation-preview[data-mierzalny="nie"] .scale-readout dd { color: rgba(255,255,255,.42); }
.preview-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 2px 8px; }
.preview-summary strong { color: #fff; font-size: 15px; }
.preview-summary span { color: rgba(255,255,255,.58); font-size: 12px; }
.preview-disclaimer { margin: 0 0 17px; color: rgba(255,255,255,.56); font-size: 11px; line-height: 1.55; }
.installation-preview > .brand-button { width: 100%; background: var(--brand-coral); color: var(--brand-hero-deep); }
/* Trzy karty na WSPOLNEJ siatce, zeby ich czesci trzymaly poziom (wlasciciel 07.09.2026:
   „wyrownac sekcje zestawu, rozjechaly sie").

   Wiersz 1 to wstazka nad srodkowa karta. Wiersze 2-8 to siedem czesci karty:
   zdjecie / poziom / naglowek / opis / tabelka / nota / przyciski. Kazda karta bierze
   je przez `subgrid`, wiec wysokosc kazdego wiersza jest wspolna dla calej trojki —
   cena w jednej karcie stoi dokladnie tam, gdzie w pozostalych.

   `row-gap: 0`, bo odstep miedzy wierszami siatki byl by TEZ odstepem miedzy czesciami
   wewnatrz karty. Odstepy wewnetrzne robia marginesy elementow, jak dotad. */
.package-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(7, auto);
  column-gap: 18px;
  row-gap: 0;
  align-items: stretch;
}
.package-list { scroll-margin-top: 84px; }
.package-list #packageTitle:focus { outline: 3px solid rgba(255,138,76,.42); outline-offset: 7px; }
.package-card { position: relative; overflow: hidden; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; grid-row: 2 / -1; }

/* Subgrid dopiero tam, gdzie przegladarka go zna. Bez niego karty wygladaja tak jak
   przed zmiana (flex w srodku) — czyli gorzej wyrownane, ale poprawnie. */
@supports (grid-template-rows: subgrid) {
  .package-card { display: grid; grid-template-rows: subgrid; }
  .package-card > .package-visual { grid-row: 1; }
  .package-card > .package-card-body { grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; min-height: 0; }
  /* Wiersze przypisane WPROST, a nie automatycznie. Nota „Dlaczego tyle" bywa ukryta
     (`display: none`), a element ukryty tak wypada z siatki calkowicie — automat
     wpychal wtedy przyciski w wiersz noty i w karcie bez noty stały one o jej wysokosc
     wyzej niz u sasiada. Sprawdzone: 3146 / 3146 / 3274 px. Przypisanie wierszy trzyma
     kazda czesc na swoim miejscu niezaleznie od tego, czy sasiad ja ma. */
  .package-card-body > .package-tier { grid-row: 1; }
  .package-card-body > h3 { grid-row: 2; }
  .package-card-body > p:not(.package-card-note) { grid-row: 3; }
  .package-card-body > .package-slots { grid-row: 4; align-self: start; }
  .package-card-body > .package-card-note { grid-row: 5; align-self: start; }
  .package-card-body > .package-card-actions { grid-row: 6; align-self: end; }
}
.package-card-recommended { border: 2px solid var(--brand-green); box-shadow: var(--brand-shadow); }
/* Wstazka siedzi w wierszu 1, w srodkowej kolumnie — NAD karta, nie w niej. */
.package-ribbon { grid-column: 2; grid-row: 1; margin: 0 0 10px; padding: 10px 18px; border-radius: 999px; background: var(--brand-green); color: #fff; font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.package-visual { position: relative; overflow: hidden; background: var(--brand-mint-light); }
.package-visual img { display: block; width: 100%; height: auto; aspect-ratio: 1.27; object-fit: cover; }
.package-zoom-trigger { width: 100%; min-height: 38px; padding: 9px 12px; border: 0; border-top: 1px solid var(--brand-line); border-radius: 0; background: #f2f6f2; color: var(--brand-green-dark); cursor: zoom-in; font: inherit; font-size: 10px; font-weight: 750; letter-spacing: .04em; transition: background .18s ease, color .18s ease; }
.package-zoom-trigger:hover,
.package-zoom-trigger:focus-visible { background: var(--brand-green-dark); color: #fff; }
.package-zoom-trigger:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: -4px; }
.package-image-dialog { width: min(96vw, 1480px); max-width: none; padding: 0; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 30px 110px rgba(4,22,17,.38); }
.package-image-dialog::backdrop { background: rgba(5,24,18,.76); backdrop-filter: blur(4px); }
.package-image-dialog-shell { padding: 14px; }
.package-image-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2px 2px 12px; }
.package-image-dialog-heading strong { color: var(--brand-ink-deep); font-size: 14px; }
.package-image-dialog-heading button { min-height: 34px; padding: 7px 12px; border: 1px solid var(--brand-line); border-radius: 999px; background: #fff; color: var(--brand-ink-deep); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.package-image-dialog img { display: block; width: 100%; max-height: calc(100vh - 92px); border-radius: 11px; object-fit: contain; }
.package-card-body { display: flex; flex-direction: column; padding: 25px; }
.package-tier { color: var(--brand-green-dark); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.package-card h3 { margin: 8px 0 9px; font-size: 24px; letter-spacing: -.035em; }
.package-card p { margin: 0; color: var(--brand-muted); font-size: 14px; }
.package-slots { display: grid; gap: 0; margin: 24px 0; }
.package-slots div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--brand-line); }
.package-slots dt { color: var(--brand-muted); font-size: 11px; }
.package-slots dd { margin: 0; font-size: 12px; font-weight: 700; text-align: right; }
.package-slots [data-price-slot] { color: var(--brand-green-dark); }
.package-card .brand-button { width: 100%; }
.package-card-actions { display: grid; margin-top: 18px; }
/* Nota „Dlaczego tyle" — wlasny wiersz siatki, wiec w kartach bez noty zostaje pusto,
   ale cena i przyciski we wszystkich trzech stoja rowno. To swiadomy wybor: puste
   miejsce jest mniej mylace niz cena, ktora w jednej karcie jest nizej niz w reszcie. */
.package-card-note { margin: 0 0 4px; padding: 11px 13px; border-left: 3px solid var(--brand-gold); background: var(--brand-sand); color: var(--brand-ink) !important; font-size: 12px !important; line-height: 1.5; }
.package-card-note strong { display: block; color: var(--brand-ink-deep); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.package-card-note[hidden] { display: none; }
/* Drugi przycisk na karcie: „Ten mi odpowiada — wybieram". Stoi POD przeliczeniem, bo
   przeliczenie jest dokladniejsza droga; ten jest dla kogos, komu wariant juz pasuje.
   `margin-top: 10px` zamiast `auto` — inaczej oba przyciski rozjechalyby sie na dol. */
.package-card-wybor { margin-top: 10px; }
.data-slot-notice { max-width: 720px; margin: 25px auto 0; color: var(--brand-muted); font-size: 11px; text-align: center; }
.sets-explainer { padding: 68px 0; background: var(--brand-sand); }
.sets-explainer-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(340px, 1.2fr); gap: 70px; align-items: center; }

/* Wspólny wygląd istniejącej wyceny */
.quote-page .brand-header { position: sticky; }
.quote-entry {
  position: relative;
  isolation: isolate;
  padding: 66px 0 84px;
  background:
    radial-gradient(circle at 85% 20%, rgba(220,238,229,.78), transparent 32%),
    linear-gradient(150deg, #f8faf7, #eff5f0);
}
.quote-entry .entry-grid { gap: 56px; }
.quote-entry .entry-copy { padding-top: 26px; }
.quote-entry h1,
.quote-result h1 {
  color: var(--brand-ink-deep);
  font-family: var(--brand-font);
  font-weight: 700;
  letter-spacing: -.045em;
}
.quote-form {
  border-color: rgba(43,118,95,.22);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow);
}
.journey-selector button,
.segmented button,
input,
select,
textarea { border-radius: var(--brand-radius-sm); }
.journey-selector button[aria-pressed="true"],
.segmented button[aria-pressed="true"] { border-color: var(--brand-green); background: var(--brand-mint-light); color: var(--brand-green-dark); }
.button { border-radius: 999px; font-family: var(--brand-font); }
.button-primary { background: var(--brand-green); }
.button-primary:hover { background: var(--brand-green-dark); }
.button-accent { background: var(--brand-gold); color: var(--brand-ink-deep); }
.form-flow { display: flex; flex-direction: column; }
.entry-mode-note { margin: -10px 0 24px; padding: 12px 14px; border-left: 3px solid var(--brand-gold); background: var(--brand-sand); color: var(--brand-muted); font-size: 12px; }
.quote-result { padding-top: 60px; }
.result-heading { padding-bottom: 26px; border-bottom: 1px solid var(--brand-line); }
.result-summary { margin-top: 28px; }
.summary-item,
.variant-card,
.compatibility-band,
.save-band,
.technical-review-panel { border-radius: var(--brand-radius); }
.variant-grid { gap: 18px; }
.variant-card {
  overflow: hidden;
  border-color: var(--brand-line);
  background: #fff;
}
.variant-card.recommended { border: 2px solid var(--brand-green); box-shadow: 0 18px 55px rgba(43,118,95,.13); }
.variant-media { background: var(--brand-mint-light); }
.variant-media img { width: 100%; height: 100%; object-fit: cover; }
.variant-badge { background: var(--brand-green); }
.variant-price { color: var(--brand-ink-deep); font-size: clamp(27px, 3.3vw, 36px); letter-spacing: -.035em; }
.price-legal { margin: 7px 0 0; color: var(--brand-muted); font-size: 10px; line-height: 1.45; }
.support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.support-grid .fact { padding: 10px; border-radius: 10px; background: var(--brand-mint-light); }
.scope-blocks { display: grid; gap: 14px; margin-top: 18px; }
.scope-block { padding: 15px; border: 1px solid var(--brand-line); border-radius: 14px; }
.scope-block.scope-change { border-color: #ead8b3; background: #fffaf0; }
.scope-title { margin-top: 0; }
.legal-explainer { margin: 24px 0 0; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: #fff; }
.legal-explainer summary { padding: 17px 20px; cursor: pointer; color: var(--brand-ink-deep); font-weight: 700; }
.legal-explainer-body { padding: 0 20px 18px; color: var(--brand-muted); font-size: 12px; }
.legal-explainer-body p { margin: 7px 0 0; }

/* Porównanie wyników */
.comparison-section { margin-top: 56px; }
.comparison-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.comparison-heading h2 { margin: 0; font-size: clamp(27px, 3.2vw, 38px); letter-spacing: -.035em; }
.comparison-heading p { max-width: 600px; margin: 8px 0 0; color: var(--brand-muted); }
.comparison-scroll { overflow-x: auto; padding-bottom: 7px; }
.comparison-table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); background: #fff; }
.comparison-table th,
.comparison-table td { padding: 15px 16px; border-right: 1px solid var(--brand-line); border-top: 1px solid var(--brand-line); text-align: left; vertical-align: top; }
.comparison-table th:last-child,
.comparison-table td:last-child { border-right: 0; }
.comparison-table thead th { border-top: 0; background: var(--brand-ink-deep); color: #fff; font-size: 12px; }
.comparison-table thead th:first-child { width: 27%; }
.comparison-question { font-weight: 700; }
.comparison-value strong { display: block; font-size: 17px; }
.comparison-value small { display: block; margin-top: 3px; color: var(--brand-muted); font-size: 10px; }
.comparison-explanation td { padding-top: 7px; background: var(--brand-mint-light); color: var(--brand-muted); font-size: 11px; line-height: 1.5; }
.comparison-common { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--brand-line); border-radius: 14px; background: var(--brand-mint-light); color: var(--brand-muted); font-size: 12px; }
.comparison-common strong { color: var(--brand-green-dark); }
.comparison-footnote { margin: 12px 0 0; color: var(--brand-muted); font-size: 10px; }

/* Pokój klienta */
.portal-page { background: var(--brand-canvas); font-family: var(--brand-font); }
.portal-page .topbar { min-height: 72px; height: auto; }
.portal-brand { display: inline-flex; align-items: center; color: var(--brand-ink-deep); text-decoration: none; }
.portal-brand .dobrane-logo-image { width: 146px; }
.portal-page .side-nav { background: var(--brand-ink-deep); }
.portal-page .nav-item { border-radius: 12px; }
.portal-page .nav-item:hover,
.portal-page .nav-item.active { background: rgba(255,255,255,.11); }
.portal-page .nav-item.active { box-shadow: inset 3px 0 var(--brand-gold); }
.portal-page .primary-button { border-radius: 999px; background: var(--brand-green); }
.portal-page .offer-layout,
.portal-page .access-form,
.portal-page .message-form,
.portal-page .contact-form,
.portal-page .variant-card { border-radius: var(--brand-radius); }
.portal-price-legal { margin: 8px 0 0; color: var(--brand-muted); font-size: 10px; line-height: 1.45; }
.portal-action-row { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
.secondary-button { min-height: 46px; padding: 11px 16px; border: 1px solid var(--brand-green); border-radius: 999px; background: #fff; color: var(--brand-green-dark); font-weight: 700; cursor: pointer; }
.empty-panel { padding: 28px; border: 1px dashed #b9c8c0; border-radius: var(--brand-radius); background: rgba(255,255,255,.7); color: var(--brand-muted); }
.empty-panel strong { display: block; color: var(--brand-ink-deep); font-size: 18px; }
.empty-panel p { margin: 7px 0 0; }
.appointment-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 22px; }
.appointment-slot { min-height: 82px; padding: 14px; border: 1px dashed #b9c8c0; border-radius: 14px; background: #fff; color: var(--brand-muted); text-align: left; }
.appointment-slot:disabled { cursor: not-allowed; opacity: .75; }

/* „Co sie dzieje, gdy zdecydujesz sie skorzystac" — sciezka od zgloszenia do odbioru.
   Dwie kolumny, zeby szesc krokow nie zrobilo z sekcji dlugiej rolki na monitorze;
   ponizej 860 px schodzi do jednej. */
.what-next { padding: var(--brand-space-6) 0; background: var(--brand-canvas); }
.what-next-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.what-next-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background: var(--brand-paper);
}
.what-next-list li > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-mint);
  color: var(--brand-green-dark);
  font-size: 11px;
  font-weight: 800;
}
.what-next-list strong { display: block; color: var(--brand-ink-deep); font-size: 16.5px; line-height: 1.3; }
.what-next-list p { margin: 8px 0 0; color: var(--brand-muted); font-size: 13.5px; line-height: 1.62; }

/* Stopka */
/* Asystent wisi na stale w prawym dolnym rogu, wiec przykrywal ostatni wiersz stopki —
   czyli zdanie „Sami sie nie odzywamy", ktore jest cala obietnica strony. Stopka rezerwuje
   na niego miejsce: 66px wysokosci launchera + 22px odstepu + zapas. */
.brand-footer { padding: 52px 0 calc(52px + var(--brand-asystent-zapas, 100px));
                border-top: 1px solid var(--brand-line); background: #fff; }
.brand-footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 60px; }
.brand-footer-contact { display: grid; align-content: start; gap: 7px; }
.brand-footer-contact strong { color: var(--brand-ink-deep); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.brand-footer-contact a { color: var(--brand-green-dark); font-size: 14px; font-weight: 700; text-decoration: none; }
.brand-footer-contact a:hover { text-decoration: underline; }
.brand-footer-contact span { max-width: 240px; color: var(--brand-muted); font-size: 11.5px; line-height: 1.5; }
.dobrane-brand-footer { margin-bottom: 14px; }
.dobrane-brand-footer .dobrane-logo-image { width: 160px; }
.brand-footer p { max-width: 440px; margin: 0; color: var(--brand-muted); font-size: 13px; }
.brand-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; align-content: start; }
.brand-footer nav a { color: var(--brand-muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.brand-footer nav a:hover { color: var(--brand-green-dark); }

/* Powrot na strone glowna — waski pasek pod naglowkiem, tylko na podstronach. */
.brand-powrot { border-bottom: 1px solid var(--brand-line); background: var(--brand-canvas); }
.brand-powrot a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 0; color: var(--brand-green-dark); font-size: 13px; font-weight: 700; text-decoration: none; }
.brand-powrot a:hover { text-decoration: underline; }
.brand-powrot span { font-size: 15px; }

/* ── SKROT DO DOTACJI (polecenie wlasciciela 07.09.2026) ────────────────────────
   Maly, przyklejony do prawej krawedzi, nie znika przy przewijaniu.

   🔴 NIE w samym rogu. Na telefonie w prawym gornym rogu siedzi przycisk menu —
   dwa cele dotykowe jeden na drugim to gwarantowane pomylkowe klikniecia. Skrot stoi
   ponizej naglowka, wiec nadal jest „w prawym gornym rogu" dla oka, ale nie kradnie
   dotkniec menu.

   Na szerokim ekranie pokazuje tekst po najechaniu; na waskim zostaje sama ikona,
   bo pelna etykieta zajelaby jedna trzecia szerokosci telefonu. Sens niesie
   `aria-label`, ktory jest ZAWSZE pelny — dla czytnika ekranu nic sie nie chowa. */
.dotacja-skrot {
  position: fixed;
  z-index: 45;
  top: 96px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 260px;
  height: 46px;
  padding: 0 15px 0 11px;
  border: 1px solid var(--brand-coral);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(18, 53, 54, .18);
  color: var(--brand-hero-deep);
  text-decoration: none;
  white-space: nowrap;
  transition: max-width 240ms ease, gap 240ms ease, padding 240ms ease, box-shadow 160ms ease;
}
.dotacja-skrot-ikona { position: relative; z-index: 1; width: 22px; height: 22px; flex: 0 0 auto; color: var(--brand-coral); }
/* 🔴 Przyciecie siedzi na SAMYM NAPISIE, nie na pigulce. Gdy `overflow: hidden` bylo na
   pigulce, obcinalo tez obwodke pulsu (`inset: -3px`, `scale(1.28)`) — miganie bylo
   wlaczone i animowane, a mimo to niewidoczne, bo w calosci lezalo poza kadrem. */
.dotacja-skrot-tekst {
  max-width: 200px;
  overflow: hidden;
  opacity: 1;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: max-width 240ms ease, opacity 160ms ease;
}
/* ZWIJANIE PRZY PRZEWIJANIU (polecenie wlasciciela 07.09.2026: „na komputerze ma byc
   stale rozwinieta, a zwijac sie tylko przy przewijaniu"). Klasa przychodzi z JS —
   bez skryptu skrot zostaje rozwiniety, czyli w stanie uzytecznym, a nie schowanym. */
.dotacja-skrot.is-zwiniety { max-width: 46px; gap: 0; padding: 0 11px; }
.dotacja-skrot.is-zwiniety .dotacja-skrot-tekst { max-width: 0; opacity: 0; }
.dotacja-skrot:hover { box-shadow: 0 14px 34px rgba(18, 53, 54, .24); }
/* Najechanie rozwija z powrotem — ale TYLKO tam, gdzie kursor naprawde istnieje.
   Na dotyku `:hover` zostaje przyklejony po tapnieciu i przy pierwszym dotknieciu
   przegladarki mobilne zamieniaja go na „pokaz stan hover" zamiast „kliknij". */
@media (hover: hover) {
  .dotacja-skrot.is-zwiniety:hover { max-width: 260px; gap: 9px; padding: 0 15px 0 11px; }
  .dotacja-skrot.is-zwiniety:hover .dotacja-skrot-tekst { max-width: 200px; opacity: 1; }
}
.dotacja-skrot:focus-visible { outline: 3px solid rgba(255, 138, 76, .45); outline-offset: 3px; }

/* Miganie siedzi na OSOBNEJ obwodce, nie na przycisku: pulsujacy cel dotykowy
   ucieka spod palca, a przy `prefers-reduced-motion` chcemy zgasic sam ruch,
   nie chowac skrotu. */
.dotacja-skrot-puls {
  position: absolute;
  z-index: 0;
  inset: -3px;
  border: 2px solid var(--brand-coral);
  border-radius: 999px;
  opacity: 0;
  animation: dotacja-puls 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes dotacja-puls {
  0%   { transform: scale(1);    opacity: .85; }
  70%  { transform: scale(1.06); opacity: 0; }
  100% { transform: scale(1.06); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dotacja-skrot-puls { animation: none; opacity: 0; }
}
@media (max-width: 760px) {
  .dotacja-skrot { top: 78px; right: 12px; }
}

/* Sekcja dotacji jako cel skrotu — inaczej naglowek przykryje jej tytul. */
.support-section { scroll-margin-top: 92px; }

/* „Na gore" — pokazuje sie dopiero po przewinieciu, zeby nie zaslaniac tresci na starcie.
   Stoi NAD dymkiem asystenta (ten sam rog), stad `bottom` liczony z jego wysokosci. */
.brand-do-gory {
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--brand-line); border-radius: 50%;
  background: #fff; color: var(--brand-ink-deep);
  box-shadow: 0 10px 30px rgba(18, 53, 54, .16);
  cursor: pointer; font-size: 19px; line-height: 1;
  transition: opacity 160ms ease, transform 160ms ease;
}
.brand-do-gory[hidden] { display: none; }
.brand-do-gory:hover { transform: translateY(-2px); }
.brand-do-gory:focus-visible { outline: 3px solid rgba(255, 138, 76, .45); outline-offset: 3px; }

/* Wirtualny asystent — lokalny prototyp odpowiedzi bez wysyłania danych */
.ai-guide {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  display: grid;
  justify-items: end;
  gap: 12px;
  font-family: var(--brand-font);
}
.ai-guide-launcher {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 7px 15px 7px 7px;
  border: 1px solid rgba(255, 138, 76, .62);
  border-radius: 999px;
  background: var(--brand-hero-deep);
  color: var(--brand-cream);
  box-shadow: 0 16px 46px rgba(8, 35, 30, .28);
  cursor: pointer;
}
.ai-guide-launcher img,
.ai-guide-header img {
  display: block;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  background: linear-gradient(145deg, #dcebe2, #f7f0df);
  object-fit: cover;
  object-position: center 18%;
}
.ai-guide-launcher span { display: grid; gap: 2px; text-align: left; }
.ai-guide-launcher strong { font-size: 13px; line-height: 1.2; }
.ai-guide-launcher small { color: rgba(247,240,223,.68); font-size: 10px; }
.ai-guide-launcher:hover { background: #174a3d; transform: translateY(-1px); }
.ai-guide-launcher:focus-visible,
.ai-guide-panel button:focus-visible,
.ai-guide-panel input:focus-visible { outline: 3px solid rgba(255,138,76,.55); outline-offset: 2px; }
.ai-guide-panel {
  width: min(382px, calc(100vw - 30px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: #fff;
  color: var(--brand-ink-deep);
  box-shadow: 0 28px 80px rgba(7, 31, 27, .32);
}
.ai-guide-header {
  display: grid;
  grid-template-columns: 46px 1fr 34px;
  gap: 10px;
  align-items: center;
  padding: 14px;
  background: var(--brand-hero-deep);
  color: var(--brand-cream);
}
.ai-guide-header img { width: 46px; height: 46px; }
.ai-guide-header div { display: grid; gap: 3px; }
.ai-guide-header strong { font-size: 14px; }
.ai-guide-header span { color: rgba(247,240,223,.68); font-size: 10px; }
.ai-guide-header i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #80d5a5; box-shadow: 0 0 0 3px rgba(128,213,165,.13); }
.ai-guide-header button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--brand-cream);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ai-guide-messages {
  display: grid;
  max-height: 260px;
  gap: 9px;
  overflow-y: auto;
  padding: 15px;
  background: #f5f7f4;
}
.ai-guide-message {
  max-width: 88%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20,54,52,.06);
  font-size: 12px;
  line-height: 1.5;
}
.ai-guide-message.is-user { justify-self: end; border-radius: 14px 14px 4px; background: var(--brand-green-dark); color: #fff; }
.ai-guide-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 5px; }
.ai-guide-suggestions button {
  padding: 7px 9px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-green-dark);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.ai-guide-suggestions button:hover { border-color: var(--brand-coral); background: #fff5ef; }
.ai-guide-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 9px 14px; }
.ai-guide-form input { min-width: 0; padding: 11px 12px; border: 1px solid var(--brand-line); border-radius: 12px; color: var(--brand-ink-deep); }
.ai-guide-form button { padding: 0 13px; border: 0; border-radius: 12px; background: var(--brand-coral); color: var(--brand-hero-deep); font-size: 11px; font-weight: 800; cursor: pointer; }
.ai-guide-note { margin: 0; padding: 0 14px 14px; color: var(--brand-muted); font-size: 9px; line-height: 1.45; }

/* ── Porównywarka urządzeń ────────────────────────────────────────────────────
   Tabela jest szeroka z natury (8–9 kolumn), więc przewija się we WŁASNYM kontenerze.
   Strona nigdy nie może przewijać się w poziomie — to psuje czytanie na telefonie. */
.compare-section { padding: 60px 0 90px; background: var(--brand-canvas); }
/* Trzy grupy filtrow stoja obok siebie, wiec musi byc widac, gdzie konczy sie jedna,
   a zaczyna druga — przy odstepie 22 px „Pojemnosc" i „Marki" czytaly sie jak jedna
   dluga lista przyciskow (uwaga wlasciciela, 04.09). Stad szerszy odstep w poziomie
   i kreska miedzy kolumnami. */
.compare-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 34px; margin-bottom: 30px; }
.compare-control { display: grid; align-content: start; gap: 11px; }
.compare-controls > .compare-control + .compare-control { padding-left: 26px; border-left: 1px solid var(--brand-line); }
.compare-control .package-control-label { margin-bottom: 2px; }
/* `.package-control-label` jest bialy, bo powstal pod CIEMNY panel zestawow. Porownywarka
   ma tlo jasne, wiec bez tego nadpisania etykiety grup byly praktycznie niewidoczne. */
.compare-control .package-control-label { color: var(--brand-ink-deep); }
.compare-control i { color: var(--brand-muted); font-style: normal; font-weight: 500; }
.compare-sizes,
.compare-brands { display: flex; flex-wrap: wrap; gap: 7px; }
.compare-sizes button,
.compare-brands button,
.compare-controls .package-choice-row button {
  padding: 9px 13px; border: 1.5px solid var(--brand-line); border-radius: 999px;
  background: #fff; color: var(--brand-ink); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.compare-sizes button:hover,
.compare-brands button:hover,
.compare-controls .package-choice-row button:hover { border-color: var(--brand-green); }
.compare-sizes button[aria-pressed="true"],
.compare-brands button[aria-pressed="true"],
.compare-controls .package-choice-row button[aria-pressed="true"] {
  border-color: var(--brand-green-deep); background: var(--brand-green-deep); color: #fff;
}
/* Filtr marek pokazuje ZNAK zamiast nazwy. Biala podkladka jest tu wymogiem czytelnosci,
   nie ozdoba: wcisniety przycisk ma ciemnozielone tlo, a znaki Sofara, Solisa i Deye sa
   ciemne — bez podkladki znikaja dokladnie w tym stanie, w ktorym maja byc widoczne. */
/* Ramka jest szeroka, bo znaki maja bardzo rozne proporcje: Sofar i Sigenergy to dlugie
   napisy (5:1), Deye i Solis sa niemal kwadratowe. Przy niskiej ramce te dlugie schodzily
   do 11 px wysokosci i wygladaly na wyblakle obok pozostalych. */
.compare-filtr-logo { display: block; width: 76px; height: 24px; padding: 3px 6px; border-radius: 5px; background: #fff; object-fit: contain; }
.compare-brands button.compare-filtr-marka { padding: 6px 9px; }
/* Wybor drogi po „Ten mi odpowiada": link na maila albo rozmowa z doradca. Dwie
   rownorzedne kolumny, bo zadna nie jest „ta wlasciwa" — kolejnosc nalezy do klienta. */
.wybor-modal { width: min(760px, calc(100vw - 32px)); padding: 26px 28px 28px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; color: var(--brand-ink); }
.wybor-modal::backdrop { background: rgba(10, 40, 41, .48); }
.wybor-modal h2 { margin: 0; color: var(--brand-ink-deep); font-size: 25px; letter-spacing: -.03em; }
.wybor-zamknij { display: flex; justify-content: flex-end; margin: -10px -10px 0 0; }
.wybor-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--brand-mint-light); color: var(--brand-ink); cursor: pointer; font-size: 20px; line-height: 1; }
.wybor-podsumowanie { margin: 10px 0 20px; padding: 12px 14px; border-left: 3px solid var(--brand-gold); background: var(--brand-mint-light); color: var(--brand-ink); font-size: 13px; line-height: 1.55; }
.wybor-drogi { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: stretch; }
.wybor-droga { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius); }
.wybor-droga h3 { margin: 0 0 8px; color: var(--brand-ink-deep); font-size: 17px; }
/* Opis w lewej kolumnie jest dluzszy o zdanie o zgodzie na kontakt, wiec bez rownej
   wysokosci przycisk „Popros o rozmowe" siadal wyzej niz „Wyslij mi link". */
.wybor-droga p { min-height: 5.4em; margin: 0 0 14px; color: var(--brand-muted); font-size: 13px; line-height: 1.55; }
.wybor-droga .brand-button { width: 100%; margin-top: auto; }
.wybor-pole { display: grid; gap: 6px; margin-bottom: 12px; color: var(--brand-ink-deep); font-size: 12px; font-weight: 700; }
.wybor-pole input { min-height: 46px; padding: 10px 13px; border: 1px solid var(--brand-line); border-radius: 10px; background: #fff; color: var(--brand-ink); font: inherit; font-size: 14px; font-weight: 500; }
.wybor-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wybor-status { margin: 10px 0 0; min-height: 1.2em; color: var(--brand-muted); font-size: 12.5px; line-height: 1.5; }
.wybor-status-ok { color: var(--brand-green-dark); font-weight: 600; }
.wybor-status-blad { color: var(--brand-danger); font-weight: 600; }
@media (max-width: 620px) { .wybor-drogi { grid-template-columns: 1fr; } }

/* Plakietka z zestawem przeniesionym ze strony Zestawow — klient ma widziec, ze jego
   wybor dojechal, zanim jeszcze rozwinie pole wiadomosci. */
.meeting-wybrany { margin: 0 0 4px; padding: 11px 13px; border-left: 3px solid var(--brand-gold); border-radius: 0 8px 8px 0; background: var(--brand-mint-light); color: var(--brand-ink); font-size: 13px; line-height: 1.5; }
.meeting-wybrany[hidden] { display: none; }
.compare-status { margin: 0 0 16px; color: var(--brand-muted); font-size: 14px; }
.compare-status[hidden] { display: none; }

/* Naglowki tabeli maja zostac na ekranie przy przewijaniu rozwinietej listy (uwaga
   wlasciciela 04.09: „jak otwieram pelna liste i ide w dol, to znikaja").
   Dlaczego `sticky` samo nie dzialalo: `overflow-x: auto` robi z tej ramki WLASNY
   kontener przewijania — a wtedy `position: sticky` na `thead` czepia sie tej ramki,
   nie strony. Ramka nie przewijala sie w pionie, wiec nie bylo czego przykleic.
   Dajemy jej wiec wlasna wysokosc: lista przewija sie w srodku, a naglowek zostaje.
   Przy krotkiej liscie (domyslne trzy wiersze) `max-height` nic nie zmienia. */
.compare-table-wrap { max-height: min(72vh, 760px); overflow: auto; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; }
/* Rozmiary pisma podniesione 04.09 (właściciel: „widok tabeli trochę większy, czcionka
   do poprawy, ale nie za mała"). Tabela ma się czytać z odległości laptopa, a nie z nosem
   przy ekranie — 13,5 px na parametrach było poniżej tego, co czyta się wygodnie. */
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th,
.compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--brand-line); text-align: left; vertical-align: top; white-space: nowrap; }
.compare-table thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--brand-line); background: var(--brand-mint-light); color: var(--brand-ink-deep); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: normal; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table tbody tr:hover td,
.compare-table tbody tr:hover .compare-product { background: var(--brand-mint-light); }
/* Kolumna z modelem przykleja sie do lewej — przy przewijaniu w bok klient musi
   wiedziec, czyj to wiersz. */
/* 🔴 BEZ `white-space: normal` — ta deklaracja stala tu i NIE dzialala: przegrywa
   specyficznoscia z `.compare-table th, .compare-table td { white-space: nowrap }`
   (0,2,1 kontra 0,1,0). Dlatego nazwa nigdy sie nie zawijala, a kolumna rosla do
   szerokosci najdluzszego wiersza. Na szerokim ekranie zostawiamy jak bylo; zawijanie
   wlacza dopiero blok telefonu nizej, gdzie ma dosc specyficznosci, zeby zadzialac. */
.compare-product { position: sticky; left: 0; z-index: 2; min-width: 232px; background: #fff; }
/* Naroznik: przykleja sie i do gory, i do lewej — musi byc NAD obiema krawedziami. */
.compare-table thead th.compare-product { z-index: 4; background: var(--brand-mint-light); }
.compare-product strong { display: block; color: var(--brand-ink-deep); font-size: 15.5px; }
.compare-product span { display: block; margin-top: 2px; color: var(--brand-muted); font-size: 13.5px; font-weight: 500; }
.compare-product a { display: inline-block; margin-top: 6px; color: var(--brand-green-dark); font-size: 12.5px; font-weight: 600; }
/* Marka spoza naszej oferty — pokazujemy ją do porównania, ale klient MUSI to widzieć,
   inaczej poprosi o wycenę czegoś, czego mu nie sprzedamy. */
.compare-rola { display: inline-block; margin-top: 6px; margin-right: 8px; padding: 2px 8px; border: 1px solid var(--brand-line); border-radius: 999px; background: var(--brand-sand); color: var(--brand-muted); font-size: 11.5px; font-style: normal; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.compare-brak { color: var(--brand-muted); }

/* Tabela + panel ze zdjeciem wybranego modelu. Panel ma stala szerokosc, bo zdjecia sa
   roznych proporcji i bez ramy skakalby przy kazdym wyborze. */
.compare-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
/* Panel jedzie z lista (`sticky`), a nie zostaje na gorze: przy rozwinietej tabeli klient
   klikal wiersz na dole i zdjecie pokazywalo sie poza ekranem — wygladalo, jakby przycisk
   nie dzialal (uwaga wlasciciela, 04.09). `top` omija przyklejony naglowek strony
   (min-height 76 px) z zapasem. */
.compare-podglad { position: sticky; top: 92px; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; }
.compare-podglad[hidden] { display: none; }
.compare-podglad-naglowek { display: flex; align-items: center; gap: 10px; }
.compare-podglad-naglowek strong { display: block; color: var(--brand-ink-deep); font-size: 15.5px; }
.compare-podglad .compare-podglad-naglowek span { display: block; margin-top: 2px; color: var(--brand-muted); font-size: 12.5px; line-height: 1.4; }
.compare-podglad-kadr { display: grid; overflow: hidden; height: 200px; align-items: center; justify-items: center; padding: 10px; border-radius: 12px; background: var(--brand-mint-light); }
.compare-podglad-kadr img { max-width: 100%; max-height: 180px; object-fit: contain; }
.compare-podglad-brak { margin: 0; padding: 0 6px; color: var(--brand-muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.compare-podglad-app { margin: 0; color: var(--brand-ink); font-size: 12.5px; line-height: 1.5; }
.compare-podglad-rola { margin: 0; color: var(--brand-muted); font-size: 12.5px; line-height: 1.5; }
.compare-podglad-karta { color: var(--brand-green-dark); font-size: 12.5px; font-weight: 600; }

/* Nazwa modelu jest przyciskiem (klikniecie pokazuje zdjecie obok), ale ma wygladac jak
   tresc tabeli, nie jak formularz — stad zdjety wyglad przycisku. */
.compare-pick { display: flex; width: 100%; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.compare-pick-tekst { display: block; }
.compare-product .compare-pick strong { display: block; color: var(--brand-ink-deep); font-size: 15.5px; }
.compare-product .compare-pick-tekst > span { display: block; margin-top: 2px; color: var(--brand-muted); font-size: 13.5px; font-weight: 500; }
.compare-pick:hover strong { text-decoration: underline; }
.compare-pick:focus-visible { outline: 2px solid var(--brand-green-deep); outline-offset: 3px; border-radius: 6px; }
.compare-product .compare-logo, .compare-podglad .compare-logo { flex: 0 0 auto; width: 44px; height: 26px; object-fit: contain; object-position: left center; }
/* Marka bez pliku z logotypem: nazwa zamiast znaku. Brak ma wygladac na swiadomy,
   nie na niezaladowany obrazek. */
.compare-product .compare-logo-tekst, .compare-podglad .compare-logo-tekst { display: grid; width: auto; max-width: 66px; height: auto; padding: 3px 7px; border: 1px solid var(--brand-line); border-radius: 6px; background: var(--brand-sand); color: var(--brand-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .03em; place-items: center; text-transform: uppercase; }
.compare-wiersz-wybrany td,
.compare-wiersz-wybrany .compare-product { background: var(--brand-mint-light); }
.compare-wiersz-wybrany .compare-product { box-shadow: inset 3px 0 0 var(--brand-green-deep); }
.compare-app { display: block; margin-top: 6px; color: var(--brand-muted); font-size: 12.5px; font-style: normal; line-height: 1.45; }

.compare-glosariusz { margin-top: 16px; padding: 15px 17px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; }
.compare-glosariusz[hidden] { display: none; }
.compare-glosariusz-tytul { margin: 0 0 8px; color: var(--brand-ink-deep); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.compare-glosariusz dl { display: grid; margin: 0; gap: 7px 14px; grid-template-columns: max-content minmax(0, 1fr); }
.compare-glosariusz dt { color: var(--brand-ink-deep); font-size: 12.5px; font-weight: 700; }
.compare-glosariusz dd { margin: 0; color: var(--brand-muted); font-size: 12.5px; line-height: 1.55; }

.compare-more { display: flex; justify-content: center; margin-top: 18px; }
.compare-more button[hidden] { display: none; }
.compare-note { margin: 22px auto 0; max-width: 760px; color: var(--brand-muted); font-size: 12.5px; line-height: 1.6; text-align: center; }
.compare-note b { color: var(--brand-ink); }

.compare-cta { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-top: 34px; padding: 24px 26px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; }
.compare-cta strong { color: var(--brand-ink-deep); font-size: 17px; }
.compare-cta p { margin: 5px 0 0; color: var(--brand-muted); font-size: 13.5px; }
.compare-cta-buttons { display: flex; flex: 0 0 auto; gap: 10px; }

@media (max-width: 900px) {
  .compare-controls { grid-template-columns: 1fr; gap: 20px; }
  /* Kolumny stoja teraz jedna POD druga — pionowa kreska rozdzielalaby wtedy nie te
     rzeczy co trzeba. */
  .compare-controls > .compare-control + .compare-control { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--brand-line); }
  .compare-cta { flex-direction: column; align-items: flex-start; }
  .compare-cta-buttons { width: 100%; flex-direction: column; }
  .compare-cta-buttons .brand-button { width: 100%; }
}

/* ── Prośba o rozmowę ─────────────────────────────────────────────────────────
   Świadomie NIE ma tu siatki wolnych godzin: nie trzymamy dostępności doradców,
   więc każda pokazana godzina byłaby obietnicą bez pokrycia. Klient wybiera dzień
   i porę, godzinę potwierdza doradca — i strona mówi to wprost. */
.meeting-section { padding: 70px 0 92px; background: var(--brand-canvas); }
.meeting-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 42px; align-items: start; }
.meeting-form { padding: 30px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; box-shadow: var(--brand-shadow); }
.meeting-field { margin: 0 0 26px; padding: 0; border: 0; }
.meeting-field legend { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 0; color: var(--brand-ink-deep); font-size: 17px; font-weight: 700; }
.meeting-step { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--brand-mint); color: var(--brand-green-dark); font-size: 11px; font-weight: 700; }
.meeting-hint { margin: 0 0 12px; color: var(--brand-muted); font-size: 13px; line-height: 1.5; }
.meeting-hint b { color: var(--brand-ink); }

.meeting-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.meeting-day { display: grid; padding: 10px 4px 8px; border: 1.5px solid var(--brand-line); border-radius: 12px; background: #fff; color: var(--brand-ink); cursor: pointer; text-align: center; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.meeting-day span { color: var(--brand-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.meeting-day strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.meeting-day small { color: var(--brand-muted); font-size: 10px; }
.meeting-day:hover { border-color: var(--brand-green); }
.meeting-day[aria-pressed="true"] { border-color: var(--brand-green-deep); background: var(--brand-green-deep); color: #fff; }
.meeting-day[aria-pressed="true"] span,
.meeting-day[aria-pressed="true"] small { color: rgba(255,255,255,.72); }

.meeting-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.meeting-choice button { display: grid; gap: 3px; padding: 13px 12px; border: 1.5px solid var(--brand-line); border-radius: 13px; background: #fff; color: var(--brand-ink); cursor: pointer; text-align: left; transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease; }
.meeting-choice button strong { font-size: 15px; }
.meeting-choice button span { color: var(--brand-muted); font-size: 11.5px; }
.meeting-choice button:hover { border-color: var(--brand-green); }
.meeting-choice button[aria-pressed="true"] { border-color: var(--brand-green-deep); background: var(--brand-green-deep); color: #fff; }
.meeting-choice button[aria-pressed="true"] span { color: rgba(255,255,255,.72); }

.meeting-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.meeting-inputs label { display: grid; gap: 5px; color: var(--brand-ink); font-size: 13px; font-weight: 600; }
.meeting-inputs label i { color: var(--brand-muted); font-style: normal; font-weight: 500; }
.meeting-input-wide { grid-column: 1 / -1; }
.meeting-inputs input,
.meeting-inputs textarea { width: 100%; padding: 11px 12px; border: 1.5px solid var(--brand-line); border-radius: 11px; background: #fff; color: var(--brand-ink); font: inherit; font-weight: 500; }
.meeting-inputs input:focus,
.meeting-inputs textarea:focus { border-color: var(--brand-green); outline: 2px solid rgba(43,118,95,.2); outline-offset: 1px; }
.meeting-inputs textarea { resize: vertical; }
/* Pułapka na boty — ukryta przed człowiekiem, widoczna dla automatu wypełniającego
   wszystkie pola. `display:none` bywa przez boty pomijane, stąd wyniesienie poza ekran. */
.meeting-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meeting-summary { margin: 4px 0 16px; padding: 13px 15px; border-radius: 12px; background: var(--brand-mint-light); color: var(--brand-green-dark); font-size: 14px; font-weight: 600; }
.meeting-summary:empty { display: none; }
.meeting-submit { width: 100%; }
.meeting-note { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.meeting-note:empty { display: none; }
.meeting-note[data-stan="blad"] { color: var(--brand-danger); }
.meeting-note[data-stan="sukces"] { color: var(--brand-green-dark); font-size: 15px; }
.meeting-note[data-stan="praca"] { color: var(--brand-muted); }
.meeting-legal { margin: 16px 0 0; color: var(--brand-muted); font-size: 11.5px; line-height: 1.6; }
.meeting-legal a { color: var(--brand-green-dark); }

.meeting-aside { position: sticky; top: 96px; padding: 26px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; }
.meeting-aside h2 { margin: 0 0 16px; color: var(--brand-ink-deep); font-size: 19px; }
.meeting-steps { display: grid; gap: 14px; margin: 0; padding-left: 19px; color: var(--brand-muted); font-size: 13.5px; line-height: 1.55; }
.meeting-steps strong { display: block; color: var(--brand-ink); }
.meeting-aside-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--brand-line); }
.meeting-aside-note strong { color: var(--brand-ink-deep); font-size: 14px; }
.meeting-aside-note p { margin: 6px 0 14px; color: var(--brand-muted); font-size: 13px; }
.meeting-aside-note .brand-button { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
  .home-hero.is-ready .hero-system,
  .home-hero.is-ready .hero-energy-path { animation: none !important; }
  .hero-system { opacity: 1; transform: none; }
}

/* 1121-1400px: kolumna tekstu robi sie na tyle waska, ze przyciski hero lamia sie na
   dwa wiersze (50px -> 112px wysokosci). Panel rosnie, a poniewaz obie kolumny maja
   rowna wysokosc, slajder obok znow zblizal sie do kwadratu. Zamiast zwezac slajder,
   przycinamy panel. */
@media (max-width: 1400px) {
  .hero-stage { gap: 30px; padding-top: 138px; }
  .hero-message { padding-left: 22px; }
  .hero-actions { flex-wrap: nowrap; gap: 10px; margin-top: 22px; }
  .hero-actions .brand-button {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
  .hero-support-callout { margin-top: 14px; padding: 9px 11px; }
  .hero-answer-strip { margin-top: 16px; }
}

@media (max-width: 960px) {
  .hero-wordmark { font-size: clamp(72px, 9.6vw, 108px); }
  .hero-slide-story { right: 20px; }
  .hero-slide-story small { display: none; }
  .hero-answer-card { display: none; }
  .entry-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-explainer { grid-template-columns: 1fr; gap: 30px; }
  .entry-card:nth-child(1),
  .entry-card:nth-child(2),
  .entry-card:nth-child(3),
  .entry-card:nth-child(4) { grid-column: auto; }
  /* 🔴 SAMA JEDNA KOLUMNA NIE WYSTARCZALA (zgloszenie wlasciciela 07.09.2026:
     „wyceny nie pokazuja sie, 3 jest ucieta").

     Karty maja `grid-row: 2 / -1` — wiersz podany WPROST, kolumne automatyczna.
     Siatka trzymala je wiec w jednym pasie wierszy i dokladala kolumny POZA
     szablonem: trzy karty dostawaly 2 px, 216 px i 98 px. Wyceny caly czas byly
     na stronie, tylko scisniete do slupkow.

     Dlatego razem z kolumna trzeba zdjac przypisanie wierszy i subgrid. Jedno i drugie
     ma sens WYLACZNIE wtedy, gdy karty stoja obok siebie — wyrownuja wysokosc
     odpowiadajacych sobie czesci. W jednej kolumnie nie ma czego wyrownywac,
     a karta zostawalaby z jednym wierszem na szesc czesci. */
  .package-card-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .package-card-grid > .package-card,
  .package-card-grid > .package-ribbon { grid-column: 1; grid-row: auto; }
  .package-card { grid-template-rows: none; }
  .package-card > .package-visual,
  .package-card > .package-card-body,
  .package-card-body > * { grid-row: auto; }
  .package-card > .package-card-body { display: flex; grid-template-rows: none; }
  /* Wstazka to RODZENSTWO kart, nie ich dziecko, i w kodzie stoi PRZED nimi. W jednej
     kolumnie opisywalaby wiec kafel pierwszy zamiast polecanego. `order` ustawia ja
     tuz nad ta karta, ktorej dotyczy. */
  .package-card-grid > .package-card { order: 4; }
  .package-card-grid > .package-card:first-of-type { order: 1; }
  .package-card-grid > .package-ribbon { order: 2; }
  .package-card-grid > .package-card-recommended { order: 3; }
  .package-builder-grid { grid-template-columns: 1fr; }
  .installation-preview { max-width: 680px; }
  .entry-card { min-height: 275px; }
  .package-card { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); }
  .package-card-body { min-height: 0; }
  .answer-grid { gap: 42px; }
  .support-calculator { gap: 28px; }
  .support-result-grid { grid-template-columns: 1fr 1fr; }
  .glossary-grid { grid-template-columns: 1fr 1fr; }
  .support-card { padding: 25px; }
}

/* Ponizej 1120px kolumna tekstu jest juz za waska, zeby slajder obok niej utrzymal
   ksztalt poziomy — hero uklada sie w pion, a slajder dostaje wlasna proporcje 3:2
   (tyle ma grafika systemu), zamiast rozciagac sie do wysokosci sasiada. */
@media (max-width: 1120px) {
  .hero-stage {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 128px;
  }
  .hero-system {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .hero-message { padding: 22px 0 0; }
}

@media (max-width: 900px) {
  .meeting-grid { grid-template-columns: 1fr; gap: 26px; }
  .meeting-aside { position: static; }
  .meeting-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .meeting-inputs { grid-template-columns: 1fr; }
  .meeting-form { padding: 22px; }
}

/* Karta zestawu w pionie. Powyzej stoi zdjecie obok tekstu, ale kolumna zdjecia ma
   minimum 260 px — ponizej ~600 px na tekst zostawaloby mniej niz polowa karty. */
@media (max-width: 600px) {
  .package-card { grid-template-columns: minmax(0, 1fr); }

  /* Piec kolumn zostawialo na tekst 46 px: naglowki „WYSOKOSC MAGAZYNU" i „ZAJMUJE
     PODLOGI" wychodzily poza swoja komorke, a `overflow: hidden` na tabelce je scinal
     w polowie slowa. Dwie kolumny daja ~153 px, czyli miesci sie najdluzszy z nich. */
  .scale-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Pieciu pozycji nie da sie rozlozyc po dwie bez reszty — ostatnia bierze caly wiersz,
     zeby nie zostala dziura swiecaca tlem siatki. */
  .scale-readout > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .meeting-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meeting-choice { grid-template-columns: 1fr; }
  .meeting-section { padding: 44px 0 62px; }
}

@media (max-width: 760px) {
  .brand-shell,
  .shell { width: min(100% - 30px, 1180px); }
  /* Ikona sekcji jest ozdobna (tresc niesie tekst), a na waskim ekranie zabralaby
     naglowkowi jedna trzecia szerokosci. Znika w calosci, zamiast sie kurczyc. */
  .section-heading { grid-template-columns: minmax(0, 1fr); }
  .section-heading-ikona { display: none; }
  /* Panel ze zdjeciem schodzi POD tabele. Obok niej nie ma juz na niego miejsca, a to
     tabela jest tu trescia glowna — zdjecie ma ja uzupelniac, nie sciskac. */
  .compare-layout { grid-template-columns: minmax(0, 1fr); }
  /* Panel jest juz POD tabela, wiec nie ma sie do czego przyklejac — `sticky` trzymalby
     go w polowie ekranu przy przewijaniu dalszej tresci. */
  .compare-podglad { position: static; }
  /* 🔴 KOLUMNA NAZW ZASLANIALA CALA TABELE (zgloszenie wlasciciela 07.09.2026:
     „nie widac danych przy przewijaniu, bo nazwy zaslaniaja").

     Kolumna jest przyklejona do lewej i rosla do szerokosci najdluzszej nazwy — 352 px
     przy oknie 351 px. Przy przewijaniu w bok zakrywala wiec KAZDA kolumne danych:
     tabela przewijala sie, a widac bylo caly czas to samo.

     Stala szerokosc 150 px zostawia miejsce na trzy kolumny danych obok. `white-space`
     ustawiamy tutaj, bo w regule bazowej przegrywal specyficznoscia (patrz komentarz
     przy `.compare-product`). Przypiete do `.compare-page`, bo tych samych klas uzywa
     tabela cennika na /zestawy, a tam kolumna ma inna tresc. */
  .compare-page .compare-table th,
  .compare-page .compare-table td { padding: 11px 9px; }
  .compare-page .compare-table th.compare-product {
    min-width: 150px;
    width: 150px;
    max-width: 150px;
    padding: 11px 9px;
    white-space: normal;
  }
  .compare-page .compare-table .compare-pick { flex-wrap: wrap; }
  .compare-page .compare-table .compare-app { font-size: 11.5px; line-height: 1.35; }
  .compare-page .compare-table .compare-product a { font-size: 12px; }
  .compare-podglad-kadr { height: 170px; }
  .compare-glosariusz dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .compare-glosariusz dd { margin-bottom: 8px; }
  .brand-header-inner { min-height: 66px; }
  .dobrane-wordmark { font-size: 25px; }
  .dobrane-logo-image { width: 132px; }
  .brand-menu-button { display: block; }
  .brand-nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 15px;
    left: 15px;
    display: none;
    padding: 12px;
    border: 1px solid var(--brand-line);
    border-radius: 0 0 18px 18px;
    background: #fff;
    box-shadow: var(--brand-shadow);
  }
  .brand-nav.is-open { display: grid; }
  .brand-nav a { padding: 13px 15px; border-radius: 10px; }
  .brand-map { width: 100%; }
  .brand-map summary { padding: 13px 34px 13px 15px; border-radius: 10px; color: var(--brand-muted); }
  .brand-map summary::after { right: 16px; }
  .brand-map-menu { position: static; width: 100%; margin-top: 5px; border-radius: 12px; box-shadow: none; }
  .brand-nav .brand-nav-plan { margin-left: 0; text-align: center; }
  .brand-nav .brand-nav-meeting { text-align: center; }
  .home-page .brand-header .brand-nav a { color: var(--brand-muted); }
  .home-page .brand-header .brand-map summary { color: var(--brand-muted); }
  .home-page .brand-header .brand-map[open] summary,
  .home-page .brand-header .brand-map summary:hover { background: var(--brand-mint-light); color: var(--brand-green-dark); }
  .home-page .brand-header .brand-nav a:hover,
  .home-page .brand-header .brand-nav a[aria-current="page"] { color: var(--brand-green-dark); }
  .home-page .brand-header .brand-nav .brand-nav-plan {
    border-color: var(--brand-ink);
    color: var(--brand-ink);
  }
  .home-page .brand-header .brand-nav .brand-nav-meeting {
    border-color: var(--brand-coral);
    background: var(--brand-coral);
    color: var(--brand-hero-deep);
  }
  .home-hero { min-height: auto; }
  .hero-wordmark {
    top: 24px;
    left: 12px;
    font-size: clamp(58px, 15vw, 88px);
    line-height: .78;
  }
  .hero-stage {
    display: flex;
    min-height: auto;
    flex-direction: column;
    padding-top: 112px;
    padding-bottom: 64px;
  }
  .hero-stage-meta { display: none; }
  .hero-system {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: clamp(310px, 64vw, 470px);
    margin: 0;
  }
  .hero-slide-story { right: 18px; bottom: 15px; left: 18px; }
  .hero-slide-story strong { max-width: 520px; font-size: clamp(18px, 4.2vw, 24px); }
  .hero-slide-story small { display: block; font-size: 10px; }
  .hero-carousel-controls { top: 12px; right: 12px; }
  .hero-message {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    padding: 24px 0 0;
    background: linear-gradient(90deg, rgba(16,42,35,.56), transparent);
  }
  .hero-support-callout { align-items: flex-start; flex-direction: column; gap: 4px; }
  .hero-scroll-cue { bottom: 23px; }
  .packages-hero-inner,
  .package-control-row,
  .answer-grid,
  .sets-explainer-grid { grid-template-columns: 1fr; }
  .home-hero h1,
  .packages-hero h1 { font-size: clamp(39px, 12vw, 56px); }
  .entry-section,
  .how-section,
  .package-list { padding: 62px 0; }
  .entry-card { min-height: 290px; padding: 25px; }
  .answer-section,
  .brand-proof,
  .energy-knowledge { padding: 62px 0; }
  .support-section { padding: 72px 0; }
  .support-card-grid { grid-template-columns: 1fr; }
  .support-card { min-height: 0; }
  .support-combine { grid-template-columns: 1fr; gap: 9px; }
  .support-calculator { grid-template-columns: 1fr; }
  .support-calculator-intro { position: static; }
  .support-form-grid,
  .support-check-grid,
  .knowledge-questions { grid-template-columns: 1fr; }
  .plan-benefit-list { grid-template-columns: 1fr; }
  .plan-contact-note { align-items: flex-start; flex-direction: column; gap: 5px; }
  .energy-glossary { padding: 62px 0; }
  .knowledge-source { align-items: flex-start; flex-direction: column; }
  .knowledge-source .brand-button { width: 100%; }
  .brand-name-row { grid-template-columns: 1fr; }
  .brand-name-card { min-height: 180px; }
  .home-cta-inner,
  .home-scale-teaser-inner { align-items: flex-start; flex-direction: column; }
  .home-cta .brand-button,
  .home-scale-teaser .brand-button { width: 100%; }
  .packages-hero { padding: 58px 0 46px; }
  .package-builder { padding: 54px 0; }
  .package-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scale-scene { height: 380px; }
  .reference-person { left: 20px; height: 242px; transform: scale(.88); transform-origin: bottom left; }
  /* Grupy urzadzen NIE skalujemy tutaj: jej rozmiar liczy JS z wysokosci sylwetki
     powyzej. Wczesniej CSS mial tu wlasne `scale(.88)` i `.72`, a sylwetka `.88` i `.74`
     — dwie niezalezne skale w scenie opisanej jako „w skali". Po dolozeniu rysunkow
     mnozylyby sie jeszcze przez skale z JS. */
  .preview-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
  .package-card { display: block; }
  .package-card-body { min-height: 400px; }
  .quote-entry { padding: 42px 0 62px; }
  .quote-entry .entry-copy { padding-top: 0; }
  .support-grid { grid-template-columns: 1fr; }
  .comparison-heading { display: block; }
  .comparison-section { margin-top: 42px; }
  .appointment-grid { grid-template-columns: 1fr; }
  .portal-page .side-nav { gap: 2px; }
  .portal-page .nav-item { width: 19%; min-width: 0; padding: 6px 2px; }
  .portal-page .nav-icon { font-size: 15px; }
  .brand-footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .brand-footer nav { grid-template-columns: 1fr; }
  .ai-guide { right: 12px; bottom: 12px; }
  .ai-guide-launcher { min-height: 58px; }
  /* Mniejszy launcher (58+12), wiec i zapas w stopce mniejszy — patrz .brand-footer. */
  .brand-footer { --brand-asystent-zapas: 84px; }
  .ai-guide-launcher img { width: 44px; height: 44px; flex-basis: 44px; }
}

@media (max-width: 420px) {
  .brand-shell,
  .shell { width: min(100% - 24px, 1180px); }
  .answer-first-note { align-items: flex-start; border-radius: 15px; }
  .hero-wordmark { top: 22px; left: 10px; font-size: 12.5vw; }
  .hero-stage { padding-top: 86px; padding-bottom: 30px; }
  .hero-system { width: 100%; height: 258px; margin: 0; }
  .hero-slide-story { right: 12px; bottom: 12px; left: 12px; }
  .hero-slide-story span { margin-bottom: 4px; font-size: 8px; }
  .hero-slide-story strong { font-size: 16px; }
  .hero-slide-story small { display: none; }
  .hero-carousel-controls { top: 9px; right: 9px; transform: scale(.9); transform-origin: top right; }
  /* Oba naglowki razem, jak w kazdej innej regule. `.packages-hero h1` wypadl stad
     przez przeoczenie i zostawal na 45 px: piec linii, 28% ekranu telefonu zanim
     klient zobaczy cokolwiek poza tytulem. */
  .home-hero h1,
  .packages-hero h1 { font-size: clamp(36px, 10.8vw, 48px); }
  .hero-message .brand-lead { margin-top: 13px; font-size: 13px; }
  .hero-message .hero-actions { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 18px; }
  .hero-message .hero-actions .brand-button { min-height: 46px; padding: 11px 12px; font-size: 12px; }
  .hero-answer-strip { gap: 9px; margin-top: 14px; padding-top: 12px; }
  .hero-answer-strip > span { width: 26px; height: 26px; flex-basis: 26px; }
  .hero-answer-strip p { font-size: 9px; line-height: 1.35; }
  .hero-scroll-cue { display: none; }
  .entry-card-grid { grid-template-columns: 1fr; }
  .how-step-grid { grid-template-columns: 1fr; }
  .how-step-grid li { min-height: 0; }
  .what-next-list { grid-template-columns: 1fr; }
  .plan-explainer { padding: 24px; }
  .ai-guide-panel { width: calc(100vw - 24px); }
  .ai-guide-launcher span { display: none; }
  .ai-guide-launcher { width: 58px; padding: 6px; }
  .entry-card { min-height: 275px; }
  .hero-actions { display: grid; }
  .hero-actions .brand-button { width: 100%; }
  .support-calculator { padding: 22px; }
  .support-result-grid { grid-template-columns: 1fr; }
  .glossary-grid { grid-template-columns: 1fr; }
  .glossary-grid > div { min-height: 0; }
  .knowledge-questions summary { min-height: 68px; padding: 15px; font-size: 14px; }
  .knowledge-questions details p { padding: 0 15px 17px 59px; }
  .support-status { align-items: flex-start; flex-direction: column; gap: 5px; }
  .support-card { padding: 22px; }
  .support-facts { grid-template-columns: 1fr; }
  .support-facts div { min-height: 0; }
  .quote-form { padding: 20px; border-radius: 20px; }
  .journey-selector { grid-template-columns: 1fr; }
  .package-card-body { padding: 21px; }
  .installation-preview { padding: 14px; }
  .preview-heading { flex-direction: column; }
  .scale-scene { height: 340px; }
  .reference-person { left: 12px; transform: scale(.74); }
}

/* Wiersz reprezentujący kilka identycznych pozycji katalogowych — mówimy to wprost,
   zamiast pokazywać dwa wiersze o tej samej treści albo cicho jedną chować. */
.compare-warianty { display: block; margin-top: 5px; color: var(--brand-muted); font-size: 11px; font-style: normal; }

/* Zakres zestawu i terminy — dwie informacje, o ktore klienci pytali wprost: czy w cenie
   jest falownik i kiedy to przyjedzie.
   ⚠️ Sekcja `.package-list` ma BIALE tlo — tekst musi byc ciemny. Bialy tekst z ciemnych
   paneli wyzej byl juz dzis dwa razy zrodlem niewidocznych napisow. */
.package-scope-note { margin: 12px auto 0; max-width: 720px; color: var(--brand-ink); font-size: 12.5px; line-height: 1.6; }
.package-scope-note strong { color: var(--brand-ink-deep); }
.package-terms-note { margin: 8px auto 0; max-width: 720px; color: var(--brand-muted); font-size: 12px; line-height: 1.6; }
.package-terms-note b { color: var(--brand-ink-deep); }

/* Suwak przy polu liczbowym — dokladany OBOK pola, nie zamiast niego. Na telefonie
   ustawienie rachunku kciukiem jest szybsze niz celowanie w male pole i klawiatura
   numeryczna; kto chce podac dokladna kwote, dalej wpisuje ja recznie.
   ⚠️ Formularz analizatora ma BIALE tlo — tor i uchwyt musza byc ciemniejsze od bialego.
   Pierwsza wersja miala tor `rgba(255,255,255,.22)` i byl niewidoczny. */
.pole-suwak-oprawa { margin-top: 10px; }
.pole-suwak { width: 100%; height: 26px; padding: 0; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pole-suwak::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: #7d8d88; }
.pole-suwak::-moz-range-track { height: 6px; border-radius: 999px; background: #7d8d88; }
/* Uchwyt celowo DUZY (28 px): to jest cel dotykowy, a zalecane minimum to 24 px. */
.pole-suwak::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border: 3px solid var(--brand-green-deep); border-radius: 50%; background: var(--brand-coral); box-shadow: 0 2px 6px rgba(23,42,36,.28); }
.pole-suwak::-moz-range-thumb { width: 28px; height: 28px; border: 3px solid var(--brand-green-deep); border-radius: 50%; background: var(--brand-coral); box-shadow: 0 2px 6px rgba(23,42,36,.28); }
.pole-suwak:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 4px; border-radius: 999px; }

/* Wyjasnienie pod kwota dotacji — pojawia sie tylko, gdy dotacja wynosi 0. Bez niego
   „0 zl" czyta sie jak nasze niedopatrzenie, a to jest warunek programu. */
.fact .fact-note { display: block; margin-top: 6px; color: var(--brand-muted); font-size: 11px; font-style: normal; font-weight: 500; line-height: 1.45; }

/* Oprocentowanie przy racie — warunek kredytu, nie cena, wiec musi byc widoczne razem
   z zastrzezeniem o zmiennosci. Karty zestawow maja CIEMNE tlo. */
.package-slots .rate-note { display: block; margin-top: 3px; color: rgba(255,255,255,.62); font-size: 10.5px; font-style: normal; font-weight: 500; line-height: 1.4; }

/* ── Marki jako LOGOTYPY, w jednym rzedzie (uklad z 04.09) ────────────────────────
   ⚠️ Przyciski maja CIEMNE tlo, a logotypy Sofara i Solisa sa ciemne — na goło bylyby
   niewidoczne, a Sigenergy ma w znaku biale elementy, wiec zadna jedna barwa tla nie
   obsluzy wszystkich trzech. Dlatego kazdy znak dostaje JASNA PODKLADKE: dziala tak samo
   na tle nieaktywnym i na koralowym po wybraniu. */
/* Wyzsza specyficznosc niz `.package-control-row .package-control-group:last-child
   .package-choice-row`, ktora wymusza DWIE kolumny. Ta reguła powstala, gdy obok marek
   stal wybor miejsca montazu; po jego usunieciu grupa marek jest ostatnia i lapala
   uklad dwukolumnowy — trzy marki zawijaly sie do dwoch rzedow. */
.package-control-row .package-control-group .package-choice-row.package-brand-row,
.package-brand-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package-brand-row button { display: grid; min-height: 52px; padding: 7px; place-items: center; }
.package-brand-row img {
  width: 100%;
  max-width: 104px;
  height: 30px;
  padding: 5px 10px;
  border-radius: 7px;
  background: #fff;
  object-fit: contain;
}

/* Odczyt pod scena: etykiety bywaja jedno- i dwuwierszowe („Wysokosc magazynu",
   „Zajmuje podlogi"), przez co WARTOSCI stawaly na roznej wysokosci. Kazda komorka
   jest teraz siatka: etykieta rozciaga sie u gory, liczba siada na wspolnej linii. */
.scale-readout > div { display: grid; grid-template-rows: 1fr auto; }

/* Kto prowadzi portal — pas pod stopką, na każdej podstronie. Ma być czytelny,
   ale nie konkurować z nawigacją: to informacja rejestrowa, nie treść sprzedażowa. */
/* Stopka ma BIALE tlo (.brand-footer), wiec linia i kolory ida z palety marki,
   nie z pol-przezroczystej bieli — ta bylaby na bialym niewidoczna. */
.brand-footer-wlasciciel {
  border-top: 1px solid var(--brand-line);
  margin-top: 26px;
  padding-top: 18px;
}
.brand-footer-wlasciciel p {
  margin: 0; max-width: 62ch; line-height: 1.55;
  color: var(--brand-ink); font-size: 13.5px;
}
.brand-footer-wlasciciel strong { color: var(--brand-ink-deep); font-weight: 700; }
.brand-footer-rejestr {
  margin-top: 6px !important;
  color: var(--brand-muted) !important;
  font-size: 12.5px !important;
}
.brand-footer-rejestr a { color: var(--brand-green-dark); text-decoration: none; }
.brand-footer-rejestr a:hover { text-decoration: underline; }

/* Strona prywatności. Długi tekst do czytania, więc jasne tło i wąska kolumna —
   nie ciemna zieleń i nie pełna szerokość monitora. */
.privacy-shell { max-width: 68ch; }
.privacy-shell h2 { margin: 34px 0 10px; font-size: 22px; font-weight: 600; color: var(--brand-ink-deep); }
.privacy-shell h2:first-of-type { margin-top: 0; }
.privacy-shell p { margin: 0 0 12px; color: var(--brand-ink); line-height: 1.62; }
.privacy-lista { margin: 0; display: grid; gap: 14px; }
.privacy-lista dt { font-weight: 600; color: var(--brand-ink-deep); }
.privacy-lista dd { margin: 3px 0 0; color: var(--brand-ink); line-height: 1.6; }
.privacy-nie { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.privacy-nie li { color: var(--brand-ink); line-height: 1.6; }
.privacy-wersja { margin-top: 26px !important; padding-top: 14px; border-top: 1px solid var(--brand-line);
                  color: var(--brand-muted) !important; font-size: 13.5px; }
.privacy-wersja code { font-size: 13px; background: var(--brand-mint-light); padding: 1px 6px; border-radius: 3px; }

/* ── Pierwszy ekran na telefonie ─────────────────────────────────────────────
   Przy 390 x 844 px główny przycisk zaczynał się na 862 px — czyli TUŻ pod krawędzią
   ekranu. Klient musiał przewinąć, żeby w ogóle zobaczyć, od czego zacząć, mimo że
   cała obietnica strony brzmi „dobierz i poznaj cenę”.

   Spychała go karuzela (258 px wysokości) stojąca NAD komunikatem. Na telefonie
   odwracamy kolejność: obietnica i przycisk najpierw, materiał wizualny pod nimi.
   Na komputerze scena zostaje dokładnie taka, jaka była — tam miejsca nie brakuje.

   🔴 `order` ustawiamy WSZYSTKIM trzem dzieciom. Pominięte dziecko dostaje `order: 0`
   i wskakuje na POCZĄTEK, a nie zostaje na miejscu — to nie jest oczywiste i już raz
   nas kosztowało zepsuty układ. */
@media (max-width: 760px) {
  .home-hero .brand-shell > .hero-message    { order: 1; }
  .home-hero .brand-shell > .hero-system     { order: 2; }
  .home-hero .brand-shell > .hero-scroll-cue { order: 3; }

  /* Znak słowny jest pozycjonowany absolutnie, więc nie zajmuje miejsca w układzie —
     ale przy 82 px wysokości wchodziłby wprost na nagłówek, gdy ten trafia na górę.
     Logo marki stoi w nawigacji tuż nad nim, więc informacja nie ginie. */
  .home-hero .hero-wordmark { display: none; }

  /* Blok o dotacji stał MIĘDZY zdaniem wyjaśnienia a przyciskiem, więc na telefonie
     wchodził przed główną akcję. Dotacja jest argumentem ZA, ale nie jest tym, po co
     klient tu przyszedł — najpierw ma zobaczyć, gdzie kliknąć.
     Znów: order dla WSZYSTKICH sześciorga dzieci, nie tylko przestawianego. */
  .home-hero .hero-message > .brand-kicker         { order: 1; }
  .home-hero .hero-message > h1                    { order: 2; }
  .home-hero .hero-message > .brand-lead           { order: 3; }
  .home-hero .hero-message > .hero-actions         { order: 4; }
  .home-hero .hero-message > .hero-support-callout { order: 5; }
  .home-hero .hero-message > .hero-answer-strip    { order: 6; }
}

/* ── Cennik: pelna siatka cen na stronie „Zestawy" ────────────────────────────
   Powstal na polecenie wlasciciela (07.09.2026), wzorem konkurencji pokazujacej ceny
   od razu. Rozni sie od konfiguratora wyzej tym, ze NIC sie nie klika — to tabela
   do przeczytania wzrokiem. Uzywa `.compare-table` z porownywarki, zeby dwie tabele
   na jednej witrynie nie wygladaly jak z dwoch roznych stron. */
.cennik { padding: 64px 0 8px; }
.cennik-wstep { max-width: 62ch; margin: 10px 0 0; color: var(--brand-muted); font-size: 16.5px; line-height: 1.6; }

/* Formula cenowa. Jedno zdanie, zawsze to samo, NAD tabelami — klient nie ma sie
   domyslac, czy patrzy na netto, na brutto, czy na cene po dotacji. */
.cennik-formula { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; max-width: 74ch; margin: 22px 0 0; padding: 13px 18px; border-left: 3px solid var(--brand-green); border-radius: 0 var(--brand-radius-sm) var(--brand-radius-sm) 0; background: var(--brand-mint-light); }
.cennik-formula strong { color: var(--brand-ink-deep); font-size: 15.5px; }
.cennik-formula span { color: var(--brand-muted); font-size: 14.5px; line-height: 1.5; }

.cennik-naglowek { margin: 34px 0 0; color: var(--brand-ink-deep); font-size: 19px; }
/* Ramka cennika jest WYZSZA niz w porownywarce. `.compare-table-wrap` ma
   `max-height: min(72vh, 760px)`, co przy dwudziestu wierszach dawalo okienko na ledwie
   dziewiec — cennik czyta sie caly, nie po kawalku. Zostaje przewijanie wewnetrzne
   (i przyklejony naglowek, o ktory wlasciciel prosil 04.09), ale okno jest tak duze,
   jak pozwala ekran. */
.cennik-wrap { max-height: min(84vh, 1020px); margin-top: 12px; }
.cennik-caption { padding: 14px 16px 0; color: var(--brand-muted); font-size: 13.5px; line-height: 1.5; text-align: left; caption-side: top; }
.cennik-tabela { min-width: 560px; }
.cennik-tabela th,
.cennik-tabela td { text-align: right; }
.cennik-tabela thead th { text-align: center; }
.cennik-tabela thead th:first-child { text-align: left; }
.cennik-wiersz { min-width: 148px; text-align: left; }
.cennik-wiersz strong { display: block; color: var(--brand-ink-deep); font-size: 15.5px; }

/* Logo zamiast nazwy w naglowku kolumny. Wysokosc STALA, bo pliki maja rozne proporcje
   i bez ramy naglowki mialyby rozna wysokosc. */
.cennik-logo { display: block; max-width: 104px; height: 22px; margin: 0 auto; object-fit: contain; }

/* Cyfry w kolumnie musza sie zgadzac co do slupka — stad tabularne. */
.cennik-cena { font-variant-numeric: tabular-nums; }
.cennik-cena strong { color: var(--brand-ink-deep); font-size: 16px; font-weight: 700; }
/* Kafelek mowi „15 kWh", a zestaw bywa 15,36 albo 18,08 — pokazujemy STAN FAKTYCZNY
   pod cena. Bez tego dwa pola z ta sama cena wygladalyby na blad. */
.cennik-realnie { display: block; margin-top: 2px; color: var(--brand-muted); font-size: 12.5px; font-weight: 500; }

/* Marstek — osobno, bo to inna klasa produktu (magazyn AC z wlasnym falownikiem,
   1 faza, dokladany obok istniejacego). Czwarta kolumna sugerowalaby, ze to to samo,
   tylko taniej. */
.cennik-osobno { display: grid; gap: 14px; margin-top: 28px; padding: 20px 22px; border: 1px solid var(--brand-line); border-radius: var(--brand-radius-lg); background: #fff; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.cennik-osobno-marka { display: flex; align-items: center; gap: 14px; }
.cennik-osobno-marka .cennik-logo { margin: 0; height: 26px; }
.cennik-osobno-marka strong { display: block; color: var(--brand-ink-deep); font-size: 16.5px; }
.cennik-klasa { display: block; margin-top: 2px; color: var(--brand-muted); font-size: 13px; font-weight: 600; }
.cennik-osobno-opis { max-width: 58ch; margin: 0; color: var(--brand-muted); font-size: 14.5px; line-height: 1.55; grid-column: 1; }
.cennik-osobno-cena { text-align: right; font-variant-numeric: tabular-nums; grid-column: 2; grid-row: 1 / span 2; }
.cennik-osobno-cena strong { display: block; color: var(--brand-ink-deep); font-size: 22px; font-weight: 700; }
.cennik-osobno-cena span { display: block; margin-top: 2px; color: var(--brand-muted); font-size: 13.5px; font-weight: 500; }

.cennik-stopka { max-width: 74ch; margin: 22px 0 0; color: var(--brand-muted); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 720px) {
  .cennik { padding-top: 44px; }
  .cennik-osobno { grid-template-columns: minmax(0, 1fr); }
  .cennik-osobno-cena { grid-column: 1; grid-row: auto; text-align: left; }
}
.cennik-przypis { max-width: 74ch; margin: 12px 0 0; color: var(--brand-muted); font-size: 14px; line-height: 1.6; }
.cennik-przypis strong { color: var(--brand-ink); font-weight: 600; }

/* ── Panel klienta w gornym pasku ─────────────────────────────────────────────
   Wraca do menu na polecenie wlasciciela 07.09.2026 — tym razem z IKONA, zeby
   wracajacy klient znalazl wejscie wzrokiem, a nie czytajac cala nawigacje.
   Style samego przycisku (`.brand-nav-plan`) juz byly; tu tylko ustawienie ikony
   obok podpisu. */
.brand-nav .brand-nav-plan { display: inline-flex; align-items: center; gap: 7px; }
.brand-nav .brand-nav-plan .brand-ikona { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Sekcja „Twoj zapisany plan" po przeniesieniu ─────────────────────────────
   Stala wewnatrz „Jak to dziala" i dziedziczyla tamtejsze odstepy. Jako samodzielna
   sekcja musi je miec wlasne, inaczej sklejalaby sie z sasiadami. `margin-top` na
   `.plan-explainer` byl liczony wzgledem listy krokow — tu jest juz niepotrzebny. */
.plan-section { padding: 8px 0 4px; }
.plan-section .plan-explainer { margin-top: 0; }

/* ══ Poprawki po przegladzie wlasciciela 07.09.2026 ══════════════════════════ */

/* Cennik DO LEWEJ: ceny maja stac pod logo marki, a nie odjechac na prawy skraj
   kolumny (wlasciciel: „tabele wyrownac, do lewej tak by pod logo byly ceny,
   i moce do lewej"). Cyfry zostaja tabularne, wiec kolumna nadal jest rowna. */
.cennik-tabela th,
.cennik-tabela td,
.cennik-tabela thead th { text-align: left; }
.cennik-logo { margin: 0; }

/* Marstek — mocniejsza ramka, bo to INNA KLASA produktu niz tabela nad nim.
   Bez wyroznienia czytalby sie jak kolejny wiersz cennika hybryd. */
.cennik-osobno-wyrozniony {
  border: 2px solid var(--brand-green);
  box-shadow: var(--brand-shadow);
}

/* Notka przy naglowku „Zestawy" — wieksza i wysrodkowana (uwaga wlasciciela). */
.packages-note { padding: 24px 26px; text-align: center; border-left: 0; border: 2px solid var(--brand-gold); border-radius: var(--brand-radius); }
.packages-note strong { font-size: 17px; line-height: 1.35; }
.packages-note span { margin-top: 8px; font-size: 14.5px; line-height: 1.55; }

/* Gorny pasek: kazda pozycja w ramce, panel klienta wyrozniony kolorem.
   Do 07.09 pozycje byly samym tekstem i zlewaly sie z tlem strony glownej. */
.brand-nav > a,
.brand-map > summary { border: 1px solid var(--brand-line); }
.brand-nav .brand-nav-plan {
  border: 2px solid var(--brand-green);
  background: var(--brand-mint-light);
  color: var(--brand-green-dark);
  font-weight: 700;
}
.brand-nav .brand-nav-plan:hover,
.brand-nav .brand-nav-plan[aria-current="page"] {
  border-color: var(--brand-green-dark);
  background: var(--brand-green-dark);
  color: #fff;
}
/* Na ciemnym naglowku strony glownej ramki musza byc jasne, inaczej znikaja. */
.home-page .brand-header .brand-nav > a,
.home-page .brand-header .brand-map > summary { border-color: rgba(247, 240, 223, .28); }
.home-page .brand-header .brand-nav .brand-nav-plan {
  border-color: var(--brand-mint);
  background: rgba(220, 238, 229, .16);
  color: var(--brand-cream);
}
.home-page .brand-header .brand-nav .brand-nav-plan:hover,
.home-page .brand-header .brand-nav .brand-nav-plan[aria-current="page"] {
  border-color: var(--brand-mint);
  background: var(--brand-mint);
  color: var(--brand-hero-deep);
}
/* Wskazowka „to samo miejsce co Panel klienta" — mniejsza od opisu, bo to przypis,
   a nie kolejny akapit obietnicy. */
.plan-panel-wskazowka { margin: -8px 0 24px !important; color: rgba(247,240,223,.62) !important; font-size: 13.5px !important; line-height: 1.6; }
.plan-panel-wskazowka strong { color: var(--brand-cream); font-weight: 700; }
/* Cena Marstka wieksza — to najnizszy prog wejscia w calym cenniku i ma byc widoczna
   z odleglosci (uwaga wlasciciela 07.09.2026). */
.cennik-osobno-cena strong { font-size: 30px; }

/* ── Marki jako waski pasek nad „Policz sam" ──────────────────────────────────
   Byla to duza sekcja z siedmioma kaflami, stojaca na dole strony. Wlasciciel
   przeniosl ja 07.09.2026 na gore i kazal zwezic do przewijanego paska: marki sa
   dowodem PRZED liczeniem, a nie nagroda po nim. */
.brand-pasek { padding: 26px 0 22px; border-bottom: 1px solid var(--brand-line); background: #fff; }
.brand-pasek-podpis { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin: 0 0 14px; }
.brand-pasek-podpis strong { color: var(--brand-ink-deep); font-size: 13px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.brand-pasek-podpis span { color: var(--brand-muted); font-size: 13.5px; }

/* Okno paska. Przycina i wygasza krawedzie — bo to ONO ma szerokosc ekranu.
   Tasma w srodku jest szeroka na cala swoja dlugosc i tylko sie przesuwa. */
.brand-pasek-okno {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* Sam pasek: przewijany palcem i kolkiem, a przy wlaczonej animacji jedzie sam. */
.brand-pasek .brand-name-row {
  display: flex;
  overflow-x: auto;
  gap: 0;
  margin: 0;
  padding: 0;
  grid-template-columns: none;
  list-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.brand-pasek .brand-name-row::-webkit-scrollbar { display: none; }
.brand-pasek .brand-name-card {
  display: flex;
  min-height: 0;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 8px 26px;
  border: 0;
  background: none;
  text-align: left;
}
.brand-pasek .brand-logo-slot { min-height: 0; padding: 0; }
/* 🔴 WYSOKOSC WPROST, nie `max-height`. `sigenergy.svg` nie ma wlasnych wymiarow (sam
   `viewBox`), wiec przy `height: auto` + `max-height` renderowal sie jako 0 x 0 — logo
   po prostu znikalo z paska. W duzym kaflu ratowal go slot o stalej wysokosci 64 px,
   ktorego w pasku nie ma. Sprawdzone: 0x0 przy `max-height`, 24 px przy `height`. */
.brand-pasek .brand-maker-logo,
.brand-pasek .brand-maker-logo-solax {
  width: auto;
  height: 24px;
  max-width: 124px;
  max-height: none;
  object-fit: contain;
}
.brand-pasek .brand-name-card strong { font-size: 15px; }
/* Nazwa marki juz jest w logo — w wąskim pasku powtorzenie tylko zabiera miejsce.
   Zostaje dla czytnika ekranu i dla kafelka „Kolejne marki", ktory logo nie ma. */
.brand-pasek .brand-name-card:not(.brand-name-upcoming) strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand-pasek .brand-status { font-size: 9.5px; letter-spacing: .06em; }
.brand-pasek .brand-name-upcoming .brand-logo-slot { font-size: 22px; }

/* Ruch. `--pasek-czas` ustawia JS z rzeczywistej dlugosci listy, zeby predkosc
   nie zalezala od liczby marek. Bez JS pasek po prostu stoi i da sie go przewinac. */
/* `overflow-x: visible`, bo tasma NIE jest tu okienkiem — przyciecie robi `.brand-pasek-okno`.
   Wczesniej stalo tu `hidden` i wygladalo na zabezpieczenie, ktorego w rzeczywistosci nie bylo. */
.brand-pasek .brand-name-row.is-jedzie { width: max-content; overflow-x: visible; animation: pasek-marek var(--pasek-czas, 38s) linear infinite; }
.brand-pasek .brand-name-row.is-jedzie:hover,
.brand-pasek .brand-name-row.is-jedzie:focus-within { animation-play-state: paused; }
@keyframes pasek-marek { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--pasek-dystans, 0px))); } }

@media (prefers-reduced-motion: reduce) {
  .brand-pasek .brand-name-row.is-jedzie { width: auto; overflow-x: auto; animation: none; }
}
@media (max-width: 720px) {
  .brand-pasek-okno { mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .brand-pasek-podpis span { font-size: 12.5px; }
}
/* Pasek ma byc WASKI. Kafel dziedziczyl po duzej sekcji slot na logo o stalej wysokosci
   64 px i margines 18 px pod nim — przy logo wysokim na 20 px to sama pustka.
   Docelowo: sekcja okolo 110 px zamiast 182. */
.brand-pasek .brand-logo-slot { width: auto; height: auto; margin: 0; }
.brand-pasek .brand-status { margin: 0; }
.brand-pasek .brand-name-card { padding: 6px 24px; }
.brand-pasek { padding: 18px 0 16px; }
.brand-pasek-podpis { margin-bottom: 10px; }

/* ══ Trzecia tura uwag wlasciciela 07.09.2026 ════════════════════════════════ */

/* PASEK MAREK: wieksze logotypy, maly podpis POD logiem.
   Wczesniej logo mialo 24 px i lezalo w jednej linii z podpisem — Sigenergy, ktorego
   znak jest szeroki i niski, gubil sie miedzy sasiadami. Teraz kafel jest pionowy,
   a logo ma 36 px wysokosci i wiecej miejsca w szerokosc. */
.brand-pasek .brand-name-card {
  flex-direction: column;
  gap: 7px;
  padding: 4px 30px;
  text-align: center;
}
.brand-pasek .brand-maker-logo,
.brand-pasek .brand-maker-logo-solax {
  height: 36px;
  max-width: 190px;
}
.brand-pasek .brand-status { color: var(--brand-muted); font-size: 10px; }
.brand-pasek .brand-name-upcoming .brand-logo-slot { height: 36px; display: grid; place-items: center; font-size: 26px; }
.brand-pasek .brand-name-upcoming strong { font-size: 13px; }

/* 🔴 Ten blok MUSI stac po powyzszych, nie przy pozostalych regulach telefonu.
   Reguly paska sa pisane bez media i stoja nizej w pliku, wiec nadpisywaly wczesniejszy
   `@media (max-width: 720px)` — mobilny padding kafla po prostu nie dzialal.

   Na 375 px w okienko wchodzilo poltora logo: 190 px znaku plus 60 px marginesow przy
   351 px szerokosci. Pasek miał byc dowodem „z jakich marek dobierasz", a pokazywal
   jedna marke naraz. Mniejsze logo i wezszy kafel mieszcza dwie–trzy. */
@media (max-width: 720px) {
  .brand-pasek .brand-name-card { padding: 4px 15px; }
  .brand-pasek .brand-maker-logo,
  .brand-pasek .brand-maker-logo-solax { height: 28px; max-width: 128px; }
  .brand-pasek .brand-name-upcoming .brand-logo-slot { height: 28px; font-size: 21px; }
}

/* IKONY SEKCJI na wysokosci PIERWSZEGO tekstu, a nie w pionowym srodku bloku
   (uwaga wlasciciela 07.09.2026). Byly wysrodkowane wzgledem calego naglowka, wiec
   w dluzszych sekcjach zjezdzaly nisko i ciagnely wzrok w bok od tresci. */
.section-heading { align-items: start; }
.section-heading-ikona { align-self: start; margin-top: -14px; }

/* Odstepy miedzy sekcjami mniejsze — po podniesieniu ikon naglowki maja mniej pustki
   nad soba i strona przestala wymagac tak duzych przerw miedzy blokami. */
.section-heading { margin-bottom: 30px; }
.support-section { padding: 70px 0; }
.energy-knowledge,
.energy-glossary { padding: 66px 0; }
.brand-proof-kafle { padding: 62px 0; }
.home-scale-teaser { padding: 46px 0; }
.answer-section { padding: 70px 0; }
/* Podpisy w gornym pasku lamia sie na dwie linie („Dobierz dla / domu"), a byly
   wyrownane do lewej — druga linia wygladala na uciekajaca. Srodek trzyma pigulke
   w calosci (uwaga wlasciciela 07.09.2026). */
.brand-nav > a,
.brand-map > summary { text-align: center; }
.brand-nav .brand-nav-plan { justify-content: center; }
/* Wszystkie pozycje paska tej samej wysokosci. „Zestawy" miescilo sie w jednej linii,
   wiec pigulka byla o 21 px nizsza od sasiadow (44 vs 65) — wygladala na mniejsza,
   bo BYLA mniejsza (uwaga wlasciciela 07.09.2026). */
.brand-nav > a,
.brand-map > summary {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: center;
}

/* ── Plansze produktowe w karuzeli ────────────────────────────────────────────
   🔴 `contain`, NIE `cover`. Kadry sytuacyjne to zdjecia — mozna je kadrowac dowolnie.
   Plansza produktowa to 16:9 z TRESCIA: logo i dane po lewej, urzadzenie po prawej.
   Kadr hero jest wyzszy (okolo 1,46), wiec `cover` skalowal ja do wysokosci i przycinal
   BOKI — na ekranie zostawal pusty srodek miedzy tekstem a urzadzeniem. Ostrzegal przed
   tym dokument Codexa i tak wlasnie sie stalo przy pierwszym wdrozeniu (07.09.2026). */
.hero-slide-produkt .hero-system-image {
  object-fit: contain;
  background: var(--brand-hero-deep);
}
/* Plansza NIESIE JUZ swoj opis — logo, nazwe, pojemnosc i cene. Nasz podpis powtarzalby
   to samo drugi raz, wiec zostaje TYLKO dla czytnika ekranu: obrazek jest bitmapa,
   a ktos, kto go nie widzi, musi dostac te tresc slowami. */
.hero-slide-produkt .hero-slide-story {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Gradient przyciemniajacy dol slajdu sluzy CZYTELNOSCI PODPISU na zdjeciu. Plansza
   produktowa podpisu nie pokazuje, a gradient przygaszal jej lewy dolny rog — czyli
   dokladnie miejsce, w ktorym plansza ma cene. Zdjety, razem z lekkim przygaszeniem
   obrazka (0,98), ktore przy grafice z tekstem tez nie ma po co byc. */
.hero-slide-produkt::after { display: none; }
.hero-slide-produkt .hero-system-image { opacity: 1; }

/* ── Kontrast nadtytulow w ciemnym konfiguratorze ─────────────────────────────
   Zglosil to przeglad zewnetrzny (Codex 07.09.2026): „male zielone nadtytuly sa
   wizualnie slabo czytelne. Nalezy zmienic ich kolor i zmierzyc kontrast".
   Zmierzone: `--brand-green-dark` (#1d5947) na tle #0a2829 to **1,91:1** przy normie
   4,5:1. Po zmianie: 6,96:1.

   Poprawka jest ZAWEZONA do ciemnych sekcji. Na jasnych tlach ten sam nadtytul ma
   wysoki kontrast i jest poprawny — globalna zmiana zepsulaby go wszedzie indziej. */
.package-builder .brand-kicker,
.home-cta .brand-kicker { color: var(--brand-kicker-on-dark); }

/* „Wroc na gore" stalo w tym samym `aside` co asystent i dziedziczylo po nim pozycje.
   Po wylaczeniu czatu (07.09.2026) musi stac samo — wiec dostaje wlasny, ten sam rog. */
.brand-do-gory-slot {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 22px;
  display: grid;
  justify-items: end;
}

/* ── Zgoda na pamiec przegladarki ─────────────────────────────────────────────
   Pasek na dole, nie modal zaslaniajacy strone: nie blokujemy czytania, bo NIC
   opcjonalnego i tak nie zostaje zapisane, dopoki ktos nie kliknie „Zapamietuj".
   Dwa przyciski RÓWNORZĘDNE — odmowa nie moze byc trudniejsza od zgody. */
.zgody-baner {
  position: fixed;
  z-index: 90;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: grid;
  max-width: 760px;
  gap: 14px 26px;
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius);
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 53, 54, .22);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.zgody-baner[hidden] { display: none; }
.zgody-tytul { margin: 0 0 6px; color: var(--brand-ink-deep); font-size: 15.5px; font-weight: 700; }
.zgody-opis { margin: 0 0 8px; color: var(--brand-ink); font-size: 13.5px; line-height: 1.55; }
.zgody-niezbedne { margin: 0; color: var(--brand-muted); font-size: 12.5px; line-height: 1.55; }
.zgody-niezbedne a { color: var(--brand-green-dark); }
.zgody-przyciski { display: grid; gap: 8px; }
.zgody-btn {
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
/* Ta sama waga wizualna obu decyzji: identyczna wysokosc, pismo i grubosc.
   Rozni je tylko wypelnienie, nie „wazniejszosc". */
.zgody-btn-tak { border: 2px solid var(--brand-green-dark); background: var(--brand-green-dark); color: #fff; }
.zgody-btn-nie { border: 2px solid var(--brand-green-dark); background: #fff; color: var(--brand-green-dark); }
.zgody-btn:hover { filter: brightness(1.06); }
.zgody-btn:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 3px; }

@media (max-width: 720px) {
  .zgody-baner { grid-template-columns: minmax(0, 1fr); }
  .zgody-przyciski { grid-template-columns: 1fr 1fr; }
}

/* Baner zgód v2 (21.09.2026): pamięć przeglądarki + statystyka odwiedzin. */
.zgody-opcja { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; color: var(--brand-ink); font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.zgody-opcja input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-ink-deep); }
@media (max-width: 720px) { .zgody-baner { max-height: 86vh; overflow-y: auto; } }

/* Pełna polityka prywatności na stronie (22.09.2026) — zamiast odnośnika do PDF. */
.polityka-pelna { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--brand-line, #d8e0da); }
.polityka-pelna .polityka-tytul { font-size: 24px; }
.polityka-pelna .lead { color: var(--brand-muted); }
.polityka-pelna h3 { margin: 18px 0 6px; font-size: 16.5px; font-weight: 600; color: var(--brand-ink-deep); }
.polityka-pelna ul { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 6px; color: var(--brand-ink); line-height: 1.6; }
.polityka-pelna .tabela { overflow-x: auto; margin: 8px 0 12px; }
.polityka-pelna table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.polityka-pelna th, .polityka-pelna td { border: 1px solid var(--brand-line, #d8e0da); padding: 7px 9px; text-align: left; vertical-align: top; }
.polityka-pelna th { background: rgba(0,0,0,.035); }