/* Tarcza Kierowcy — strona sprzedażowa. Mobile-first, treść min. 19 px, wysoki kontrast. */
@font-face { font-family: 'SS3'; src: url('fonts/ss3-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SS3'; src: url('fonts/ss3-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'SS3'; src: url('fonts/ss3-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root { --graf: #1F2328; --czer: #C62828; --czer-ciemny: #A31F1F; --szary: #F2F2F2; --linia: #8A9097; --tlo: #FFFFFF; --cichy: #3A3F46; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--graf); font-family: 'SS3', 'Segoe UI', Arial, sans-serif;
       font-size: 20px; line-height: 1.55; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--graf); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--czer); }
:focus-visible { outline: 3px solid var(--czer); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: 32px; font-weight: 900; }
h3 { font-size: 24px; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.waski { max-width: 760px; }
section { padding: 48px 0; }
section.szare { background: var(--szary); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: #fff; padding: 8px 12px; z-index: 10; }

/* nagłówek */
.gora { border-bottom: 1px solid #D5D8DC; }
.gora .wrap { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 21px; text-decoration: none; letter-spacing: .02em; }
.logo svg { width: 30px; height: 36px; flex: none; }

/* hero */
.hero { padding: 32px 0 40px; }
.hero .etyk { display: inline-block; font-size: 19px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--czer); margin-bottom: 10px; }
.hero h1 { font-size: 46px; font-weight: 900; margin-bottom: 8px; letter-spacing: -.01em; }
.hero .obietnica { font-size: 27px; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.hero .opis { font-size: 20px; color: var(--cichy); }
.hero .mockup { margin: 8px auto 20px; max-width: 560px; }
.stan { display: inline-block; border: 2px solid var(--czer); color: var(--czer); font-weight: 700; padding: 4px 12px; font-size: 19px; margin-bottom: 16px; }

/* blok zakupu */
.kup { background: #fff; border: 2px solid var(--graf); border-radius: 10px; padding: 18px 16px; margin: 24px 0 8px; }
.zgoda { display: flex; gap: 12px; align-items: flex-start; font-size: 19px; line-height: 1.45; cursor: pointer; margin-bottom: 14px; }
.zgoda input { flex: none; width: 28px; height: 28px; margin: 2px 0 0; accent-color: var(--czer); cursor: pointer; }
.przycisk { display: block; width: 100%; min-height: 68px; padding: 14px 18px; border: 0; border-radius: 10px; background: var(--czer);
            color: #fff; font: inherit; font-size: 23px; font-weight: 900; line-height: 1.2; cursor: pointer; text-align: center; }
.przycisk:hover { background: var(--czer-ciemny); }
.przycisk[aria-disabled="true"] { background: #6B7178; }
.komunikat { min-height: 0; margin: 10px 0 0; font-weight: 700; color: var(--czer); font-size: 19px; }
.komunikat:empty { display: none; }
.metody { margin: 12px 0 2px; text-align: center; font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.pod-przyciskiem { margin: 0; text-align: center; font-size: 19px; color: var(--cichy); }

/* listy i karty */
.sytuacje { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.sytuacje li { background: #fff; border-left: 6px solid var(--czer); padding: 14px 16px; font-size: 20px; }
.sytuacje li b { display: block; font-size: 21px; }
.produkt { display: grid; gap: 18px; align-items: start; margin-bottom: 36px; }
.produkt img { width: 150px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.produkt ol { margin: 0; padding-left: 1.4em; }
.produkt ol li { margin-bottom: 4px; }
.produkt .typ { font-size: 19px; font-weight: 700; color: var(--czer); letter-spacing: .06em; text-transform: uppercase; }
.fakty { display: grid; gap: 14px; }
.fakt { border: 2px solid var(--graf); border-radius: 10px; padding: 16px; background: #fff; }
.fakt .liczba { font-size: 38px; font-weight: 900; color: var(--czer); line-height: 1.05; display: block; margin-bottom: 6px; }
.wniosek { font-size: 24px; font-weight: 900; margin-top: 24px; }
.cena { text-align: center; }
.cena .kwota { font-size: 64px; font-weight: 900; line-height: 1; margin: 8px 0; }
.cena ul { text-align: left; display: inline-block; margin: 8px 0 0; padding-left: 1.2em; }

/* FAQ */
details { border-bottom: 1px solid #C4C8CC; padding: 6px 0; }
summary { cursor: pointer; font-weight: 700; font-size: 21px; padding: 12px 0; list-style-position: outside; margin-left: 1em; }
details p { margin: 4px 0 14px 1em; }

/* stopka */
.stopka { background: var(--graf); color: #fff; padding: 36px 0 44px; font-size: 19px; }
.stopka a { color: #fff; }
.stopka nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 16px; font-size: 19px; }
.stopka p { margin: 0 0 8px; }

/* strony tekstowe */
.tekst h1 { font-size: 36px; font-weight: 900; margin-top: 8px; }
.tekst h2 { font-size: 25px; margin-top: 1.6em; }
.tekst li { margin-bottom: 6px; }
.uwaga-box { border: 2px dashed var(--graf); padding: 12px 16px; margin: 16px 0; }

/* strona podziękowania */
.pobierz { display: grid; gap: 14px; margin: 22px 0; }
.plik { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border: 2px solid var(--graf); border-radius: 10px;
        text-decoration: none; background: #fff; }
.plik:hover { border-color: var(--czer); }
.plik svg { width: 40px; height: 48px; flex: none; }
.plik b { display: block; font-size: 21px; line-height: 1.2; }
.plik span { font-size: 19px; color: var(--cichy); }
.wyslij { display: grid; gap: 12px; }
.przycisk-2 { display: flex; align-items: center; justify-content: center; min-height: 64px; border: 2px solid var(--graf); border-radius: 10px;
              font-weight: 700; font-size: 21px; text-decoration: none; background: #fff; }
.zachowaj { background: var(--szary); border-left: 6px solid var(--czer); padding: 14px 16px; margin: 24px 0; }
.tylko-tel { display: none; }
@media (pointer: coarse) { .tylko-tel { display: flex; } }

@media (min-width: 760px) {
  body { font-size: 21px; }
  .hero { padding: 48px 0 56px; }
  .hero .siatka { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; }
  .hero h1 { font-size: 64px; }
  .hero .obietnica { font-size: 32px; }
  .hero .mockup { margin: 0; }
  h2 { font-size: 40px; }
  .produkt { grid-template-columns: 170px 1fr; }
  .produkt img { width: 170px; }
  .fakty { grid-template-columns: 1fr 1fr; }
  .przycisk { width: auto; min-width: 420px; margin: 0 auto; padding: 16px 36px; }
  .kup { padding: 22px 26px; }
  .wyslij { grid-template-columns: 1fr 1fr; }
}
@media print { .kup, .gora { display: none; } }