/* ============================================================
   DAPLO AI — mockup 2026-09 · nowe klocki strony głównej
   Dokłada się PO style.css i korzysta wyłącznie z jego tokenów.
   Żadnych nowych kolorów, fontów ani promieni — tylko nowe formy.
   Zawartość: pasek dowodu, ból, protokół pomiaru, tabela
   porównawcza, cennik, gwarancje, furtka, opinia na ciemnym pasie.
============================================================ */

/* ---------- oznaczenie danych do potwierdzenia (tylko mockup) ---------- */
.todo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  color: var(--warn); border-bottom: 1px dashed var(--warn);
}

/* ============================================================
   2. BÓL — monolog, nie karty i nie ikony
   Cztery zdania jedno pod drugim, ostatnie ląduje kursywą.
============================================================ */
.pain { border-top: 1px solid var(--linia); max-width: 64ch; }
.pain p {
  font-family: var(--display); font-optical-sizing: auto;
  font-weight: 400; font-size: clamp(20px, 2.35vw, 28px);
  line-height: 1.34; letter-spacing: -.012em; color: var(--tusz);
  padding: clamp(16px, 1.9vw, 24px) 0;
  border-bottom: 1px solid var(--linia);
  text-wrap: pretty;
}
.pain p:last-child { border-bottom: none; font-style: italic; font-weight: 420; }

/* ============================================================
   3. PROTOKÓŁ POMIARU — jedyne miejsce, gdzie strona jest odważna
   Arkusz pomiarowy, nie kalkulator z suwakami. Wiersze z kropkową
   linią wiodącą, wpisywalne pola jako wypełnione rubryki,
   podsumowanie nad podwójną kreską jak w protokole odbioru.
============================================================ */
.prot {
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden; max-width: 760px;
}
.prot-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 16px clamp(20px, 2.6vw, 32px);
  border-bottom: 1px solid var(--linia); background: var(--bialy-2);
}
.prot-title {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tusz);
}
.prot-meta { font-family: var(--mono); font-size: 11px; color: var(--slaby); letter-spacing: .04em; }
.prot-body { padding: clamp(14px, 2vw, 22px) clamp(20px, 2.6vw, 32px) clamp(18px, 2.2vw, 26px); }

.prot-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.prot-l { font-size: 15px; color: var(--stal); flex-shrink: 0; }
.prot-dots {
  flex: 1 1 auto; min-width: 18px; height: 1px;
  border-bottom: 1px dotted var(--linia); transform: translateY(-4px);
}
.prot-v {
  font-family: var(--mono); font-size: 15px; color: var(--tusz);
  flex-shrink: 0; white-space: nowrap;
}
.prot-v .u { color: var(--slaby); }

/* rubryka do wypełnienia — wygląda jak wpisana ręcznie w formularz */
.prot-in {
  font-family: var(--mono); font-size: 15px; color: var(--cyjan-t);
  width: 58px; text-align: right; padding: 0 2px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--cyjan-t);
  -moz-appearance: textfield; appearance: textfield;
}
.prot-in::-webkit-outer-spin-button,
.prot-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prot-in:focus { outline: none; background: rgba(14,125,133,.07); }

.prot-rule { height: 1px; background: var(--linia); margin: 12px 0; }
.prot-sum {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 12px; padding-top: 16px;
  border-top: 3px double var(--linia);
}
.prot-sum-l { font-size: 15px; color: var(--tusz); font-weight: 600; }
.prot-sum-v {
  font-family: var(--display); font-weight: 460; letter-spacing: -.02em;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1; color: var(--tusz);
  white-space: nowrap;
}
.prot-sum-v small { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--stal); letter-spacing: 0; }

.prot-foot {
  padding: 14px clamp(20px, 2.6vw, 32px);
  border-top: 1px solid var(--linia); background: var(--bialy-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.prot-foot span { font-family: var(--mono); font-size: 11.5px; color: var(--stal); letter-spacing: .03em; }
.prot-foot b { color: var(--cyjan-t); font-weight: 600; }

.prot-side { margin-top: 22px; max-width: 62ch; font-size: 15px; color: var(--stal); }
.prot-side b { color: var(--tusz); }

@media (max-width: 620px) {
  .prot-l { font-size: 14px; }
  .prot-row { flex-wrap: nowrap; }
}

/* ============================================================
   4. TABELA PORÓWNAWCZA — kolumna DAPLO jest wyróżnioną rubryką arkusza,
   a nie jedną z czterech równych. Stan niesie KSZTAŁT znacznika
   (pełne / pół / puste kółko), kolor mówi tylko, która kolumna jest nasza.
   Dzięki temu tabela zostaje czytelna dla daltonisty i w druku.
   Poniżej 900 px rozkłada się na karty — nic nie ucieka w bok.
============================================================ */
.cmp-wrap { border-top: 1px solid var(--linia); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp-col-k  { width: 20%; }
.cmp-col-us { width: 23%; }

.cmp th, .cmp td {
  text-align: left; vertical-align: top;
  padding: clamp(13px, 1.5vw, 18px) 16px;
  border-bottom: 1px solid var(--linia);
}

/* główka: nazwy dróg czytane jak podpisy kolumn arkusza, nie jak wersaliki */
.cmp thead th { padding-top: 15px; padding-bottom: 15px; font-weight: 400; border-bottom: 1px solid var(--tusz); }
.cmp-tag {
  display: inline-block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cyjan-t);
}
.cmp-name { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--tusz); }
.cmp thead th.is-us .cmp-name { font-size: 19px; }
.cmp-sub { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.35; color: var(--slaby); }

.cmp tbody th { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--tusz); }
.cmp tbody td { font-size: 14.5px; line-height: 1.45; color: var(--stal); }
.cmp td b { font-weight: 600; color: var(--tusz); }
.cmp .n { font-family: var(--mono); font-size: 12px; letter-spacing: -.01em; }
.cmp-x {
  display: block; margin-top: 5px;
  font-family: var(--body); font-size: 12px; line-height: 1.35;
  letter-spacing: 0; color: var(--slaby);
}

/* nasza kolumna — jaśniejsza rubryka wpuszczona w arkusz */
.cmp .is-us {
  background: var(--bialy-2);
  border-left: 1px solid rgba(11,108,115,.3);
  border-right: 1px solid rgba(11,108,115,.3);
}
.cmp thead th.is-us {
  background: var(--tusz); border-top: 2px solid var(--cyjan);
  border-left-color: var(--tusz); border-right-color: var(--tusz); border-bottom-color: var(--tusz);
}
.cmp thead th.is-us .cmp-tag  { color: var(--cyjan); }
.cmp thead th.is-us .cmp-name { color: var(--kosc); }
.cmp thead th.is-us .cmp-sub  { color: rgba(240,238,231,.7); }
.cmp tbody td.is-us { color: var(--tusz); --gl: var(--cyjan-t); }
.cmp tbody tr:last-child td.is-us { border-bottom-color: rgba(11,108,115,.3); }

/* czytanie w poprzek wiersza */
.cmp tbody tr:hover th, .cmp tbody tr:hover td { background: rgba(22,24,26,.03); }
.cmp tbody tr:hover td.is-us { background: var(--bialy); }

/* znaczniki stanu — kształt niesie znaczenie, tekst obok mówi to samo słowami */
.m-yes, .m-part, .m-no { position: relative; }
.cmp td.m-yes, .cmp td.m-part, .cmp td.m-no {
  padding-left: 38px;
  --gl-x: 16px; --gl-y: calc(clamp(13px, 1.5vw, 18px) + .34em);
}
.cmp td.m-num { padding-left: 38px; }
.m-yes::before, .m-part::before, .m-no::before {
  content: ""; position: absolute; box-sizing: border-box;
  left: var(--gl-x, 0); top: var(--gl-y, .34em);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gl, var(--slaby));
}
.m-part::before {
  border: 1.5px solid var(--gl, var(--slaby));
  background: linear-gradient(to right, var(--gl, var(--slaby)) 0 50%, transparent 50% 100%);
}
.m-no::before { background: none; border: 1.5px solid var(--gl, var(--slaby)); opacity: .45; }

.cmp tfoot td { border-bottom: none; padding-top: 16px; }
.cmp tfoot td.is-us { border-bottom: 1px solid rgba(11,108,115,.3); }
.cmp-cta {
  font-size: 14px; font-weight: 600; color: var(--cyjan-t);
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid rgba(11,108,115,.35);
  transition: border-color .2s var(--ease);
}
.cmp-cta:hover { border-bottom-color: var(--cyjan-t); }

.cmp-legend {
  display: flex; flex-wrap: wrap; gap: 7px 26px; margin-top: 15px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--slaby);
}
.cmp-legend span { padding-left: 17px; }

.cmp-note { margin-top: 18px; font-size: 13.5px; color: var(--slaby); max-width: 70ch; }

/* ============================================================
   5. CENNIK — trzy kolumny dzielone włosową, bez kart i cieni
   Kolejność kotwicząca: indywidualny → stała cena → abonament.
============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linia); }
.plan {
  position: relative; border-right: 1px solid var(--linia);
  padding: clamp(28px, 3vw, 38px) 30px 30px 0;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.plan + .plan { padding-left: 30px; }
.plans .plan:last-child { border-right: none; padding-right: 0; }
.plan.is-pick::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 2px; background: var(--cyjan-t);
}
.plan-for { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slaby); }
.plan-name { font-family: var(--body); font-size: 17px; font-weight: 600; color: var(--tusz); letter-spacing: -.01em; }
.plan-price {
  font-family: var(--display); font-weight: 460; letter-spacing: -.022em;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.02; color: var(--tusz);
}
.plan-price small { font-family: var(--body); font-size: 14.5px; font-weight: 500; color: var(--stal); letter-spacing: 0; }
.plan-note { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyjan-t); }
.plan-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.plan-list li { font-size: 14.5px; line-height: 1.45; color: var(--stal); padding-left: 15px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 1px; background: var(--linia); }
.plan-foot { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--slaby); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan { border-right: none; border-bottom: 1px solid var(--linia); padding: 26px 0; }
  .plan + .plan { padding-left: 0; }
  .plans .plan:last-child { border-bottom: none; }
  .plan.is-pick::before { top: -1px; }
}

/* ============================================================
   6. GWARANCJE — klauzule umowy, nie hasła. Zamiast symboli z umowy
   każda klauzula ma etykietę, która mówi, czego dotyczy.
============================================================ */
.clauses { border-top: 1px solid var(--linia); }
.clause {
  position: relative; display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px); align-items: start;
  padding: clamp(24px, 2.8vw, 36px) 0;
  border-bottom: 1px solid var(--linia);
}
.clause::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--cyjan-t); transition: width .6s var(--ease);
}
.clause:hover::before { width: 100%; }
.cl-id {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--cyjan-t); padding-top: 7px;
}
.cl-t {
  font-family: var(--display); font-weight: 420;
  font-size: clamp(19px, 2vw, 25px); line-height: 1.3;
  letter-spacing: -.012em; color: var(--tusz); max-width: 48ch;
}
.cl-c { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--stal); max-width: 68ch; }
.cl-c b { color: var(--tusz); font-weight: 600; }

@media (max-width: 620px) {
  .clause { grid-template-columns: 1fr; gap: 10px; }
  .cl-id { padding-top: 0; }
}

/* ============================================================
   7. FURTKA DLA INNYCH BRANŻ — widoczny blok, nie link w stopce
============================================================ */
.gateway {
  max-width: 800px; background: var(--bialy);
  border: 1px solid var(--linia); border-left: 2px solid var(--cyjan-t);
  border-radius: var(--r); padding: clamp(26px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.gateway h2 { font-size: clamp(24px, 2.6vw, 32px); }
.gateway p { color: var(--stal); font-size: 16px; max-width: 58ch; }

/* ============================================================
   8. OPINIA KLIENTA NA CIEMNYM PASIE (pod kartą wdrożenia)
============================================================ */
.hq {
  margin-top: clamp(32px, 3.6vw, 48px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(240, 238, 231, .12);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px); align-items: end;
}
.hq-text {
  font-family: var(--display); font-weight: 420; font-style: italic;
  font-size: clamp(19px, 2.2vw, 27px); line-height: 1.36;
  letter-spacing: -.012em; color: var(--kosc); max-width: 54ch;
}
.hq-meta { display: flex; flex-direction: column; gap: 7px; }
.hq-by { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: #A9AAA4; white-space: nowrap; }
.hq-by b { color: var(--kosc); font-weight: 500; }
.hq-src { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: #7F817C; }

@media (max-width: 860px) {
  .hq { grid-template-columns: 1fr; align-items: start; }
}

/* ============================================================
   9. DROBIAZGI
============================================================ */
/* przypis pod liczbami — skąd wzięty pomiar */
.src-note {
  margin-top: 16px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .03em; color: var(--slaby); max-width: 74ch; line-height: 1.5;
}
.sec-dark .src-note { color: #83857F; }

/* krok zerowy procesu wyróżniony jako ten, od którego się zaczyna */
.step.is-zero .step-idx { color: var(--cyjan-t); }
.sec-dark .step.is-zero .step-idx { color: #4FD0D2; }

/* dwa CTA w hero — drugie spokojniejsze, już istniejący .ghost-link */
.hero-cta { flex-wrap: wrap; }

/* ============================================================
   10. WARIANTY NA CIEMNYM PASIE I UKŁADY POCHODNE
============================================================ */
/* proces ma cztery kroki (krok zerowy: wspólny pomiar) */
.steps.is-four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .steps.is-four { grid-template-columns: repeat(2, 1fr); }
  .steps.is-four .step { border-bottom: 1px solid var(--linia); }
  .steps.is-four .step:nth-child(2n) { border-right: none; padding-right: 0; }
  .steps.is-four .step:nth-child(2n+1) { padding-left: 0; }
  .steps.is-four .step:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 620px) {
  .steps.is-four { grid-template-columns: 1fr; }
  .steps.is-four .step { border-right: none; padding-left: 0; padding-right: 0; }
  .steps.is-four .step:last-child { border-bottom: none; }
}

/* gwarancje stoją na grafitowym pasie — klauzule mają czytać się jak druk umowy */
.sec-dark .clauses { border-top-color: rgba(240, 238, 231, .12); }
.sec-dark .clause { border-bottom-color: rgba(240, 238, 231, .1); }
.sec-dark .clause::before { background: #4FD0D2; }
.sec-dark .cl-id { color: #4FD0D2; }
.sec-dark .cl-t { color: var(--kosc); }
.sec-dark .cl-c { color: #93948F; }
.sec-dark .cl-c b { color: var(--kosc); }

/* znacznik „do potwierdzenia" czytelny również na ciemnym */
.sec-dark .todo { color: #D7A44F; border-bottom-color: #D7A44F; }

/* link „zobacz całą opinię" w bloku cytatu */
/* .hq stoi poza zakresem, w ktorym zdefiniowano --gold-lt, wiec link dziedziczyl
   ciemny kolor i ginal na czarnym tle: kolor ustawiony wprost */
.hq .cs-more {
  margin-top: 4px; color: var(--kosc);
  border-color: rgba(240, 238, 231, .3);
}
.hq .cs-more:hover, .hq .cs-more:focus-visible {
  color: #4FD0D2; border-color: #4FD0D2; background: rgba(23, 171, 175, .08);
}

/* furtka na alternatywnym tle nie może zlewać się z sekcją */
.sec-alt .gateway { background: var(--bialy); }

/* ============================================================
   11. POPRAWKI PO PRZEGLĄDZIE NA 390 px
============================================================ */
/* wiersz protokołu: etykieta może się zawijać, rubryka nie ucieka poza kartę */
@media (max-width: 620px) {
  .prot-row { align-items: baseline; gap: 8px; }
  .prot-l { flex: 1 1 auto; min-width: 0; }
  .prot-dots { display: none; }
  .prot-in { width: 46px; }
  .prot-head { flex-wrap: wrap; gap: 4px 12px; }
  .prot-sum { flex-wrap: wrap; gap: 6px 14px; }
}

/* tabela porównawcza: poniżej 900 px wiersz staje się kartą — nazwa kolumny
   wędruje nad wartość, nasza rubryka zostaje wyróżniona paskiem akcentu */
@media (max-width: 900px) {
  .cmp, .cmp thead, .cmp tbody, .cmp tfoot, .cmp tr { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody tr { padding: 20px 0 16px; border-bottom: 1px solid var(--linia); }
  .cmp tbody tr:hover th, .cmp tbody tr:hover td { background: none; }
  .cmp tbody th { display: block; padding: 0 0 12px; border: none; font-size: 16px; }
  .cmp tbody td {
    display: flex; flex-direction: column;
    padding: 9px 0 9px 26px; border: none; background: none;
    --gl-x: 0; --gl-y: 1.9em;
  }
  .cmp tbody td::after {
    content: attr(data-col); order: -1; margin-bottom: 3px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--slaby);
  }
  .cmp tbody td.is-us {
    background: var(--bialy-2); border-left: 2px solid var(--cyjan-t);
    padding: 11px 14px 12px 30px; margin-bottom: 9px;
    --gl-x: 16px; --gl-y: 2.4em;
  }
  .cmp tbody td.m-num { padding-left: 26px; }
  .cmp tbody td.is-us.m-num { padding-left: 30px; }
  .cmp tbody td.is-us::after { color: var(--cyjan-t); }
  .cmp tbody tr:hover td.is-us { background: var(--bialy-2); }
  .cmp tfoot td { display: none; }
  .cmp tfoot td.is-us { display: block; margin-top: 16px; padding: 0; background: none; border: none; }
}

/* ============================================================
   12. PASEK PIGUŁEK BRANŻ — ZDJĘTY
   Hero pokazuje jeden proces (kadry). Jedyna przemiana dashboardu
   dzieje się w scenie 04 i jest opisana podpisem pod makietą.
   Miejsce po pasku zostaje puste, żeby makieta weszła wyżej.
============================================================ */

/* ============================================================
   13. HERO PODSTRONY Z FIGURĄ
   Prawa kolumna hero na /systemy-dla-firm-delegujacych.
============================================================ */
.page-hero.has-figure .page-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.page-hero.has-figure h1 { font-size: clamp(36px, 3.9vw, 56px); }
.page-hero.has-figure .fig-mark { top: 14px; }

@media (max-width: 1080px) {
  .page-hero.has-figure { min-height: 0; padding-block: clamp(56px, 8vw, 96px); }
  .page-hero.has-figure .page-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-hero.has-figure h1 { font-size: clamp(34px, 6vw, 48px); }
}

/* ============================================================
   14. PORTFOLIO — style przyszly z produkcji
   Regula .btn[aria-disabled] i komponent .demo-card siedza juz
   w style.css (commity 03b7940, c9eee09, f68d4c5), wiec tutaj nic.
============================================================ */

/* ============================================================
   15. MODEL EKRANU W HERO PODSTRONY
   Panel generowania dokumentów odrysowany w HTML zamiast zrzutu:
   ostry w każdej skali, bez nazwy spółki klienta, w typografii strony.
   To makieta produktu, więc trzyma się konwencji interfejsu (biała karta,
   szare etykiety, ciemny przycisk), a nie stylu arkusza specyfikacji.
============================================================ */
.ekran { margin: 0; }
.ekran-ramka {
  background: var(--bialy); border: 1px solid var(--linia);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-dash);
}
.ekran-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-bottom: 1px solid var(--linia); background: var(--bialy-2);
}
.ekran-chrome i { width: 7px; height: 7px; border-radius: 50%; background: var(--linia); }
.ekran-adres {
  margin-left: 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--slaby);
}

.ekran-tresc { padding: clamp(20px, 2.4vw, 28px); }
.ek-tytul {
  font-family: var(--body); font-size: 17px; font-weight: 600;
  color: var(--tusz); letter-spacing: -.01em; margin-bottom: 18px;
}
.ek-etykieta {
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--slaby);
  margin-bottom: 8px;
}
.ek-opcje { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.ek-opcja {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px;
  align-items: start; padding: 11px 13px;
  border: 1px solid var(--linia); border-radius: var(--r-sm); background: var(--bialy-2);
}
.ek-opcja.is-wybrana { border-color: var(--cyjan-t); background: rgba(14, 125, 133, .05); }
.ek-radio {
  width: 14px; height: 14px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--linia); background: #fff;
}
.ek-opcja.is-wybrana .ek-radio {
  border-color: var(--cyjan-t);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--cyjan-t);
}
.ek-opis { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ek-opis b { font-size: 13.5px; font-weight: 600; color: var(--tusz); }
.ek-opis i { font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--slaby); }

.ek-pole {
  padding: 11px 13px; margin-bottom: 18px;
  border: 1px solid var(--linia); border-radius: var(--r-sm);
  background: #fff; font-size: 13.5px; color: var(--tusz);
}
.ek-przycisk {
  padding: 13px; border-radius: var(--r-sm); background: var(--tusz);
  color: var(--kosc); text-align: center; font-size: 13.5px; font-weight: 600;
}

.ekran-podpis {
  margin-top: 14px; font-size: 13px; line-height: 1.5;
  color: var(--slaby); max-width: 46ch;
}

/* blok furtki użyty na grafitowym pasie — odesłanie do portfolio */
.sec-dark .gateway { background: transparent; border-color: rgba(240, 238, 231, .16); }
.sec-dark .gateway h2 { color: var(--kosc); }
.sec-dark .gateway h2 em { color: var(--kosc); }
.sec-dark .gateway p { color: #93948F; }