/* =========================================================================
   Makieta landingów — wspólny arkusz stylów
   Kierunek: komplet kopii listu CMR. Papier przebitkowy, siatka pól,
   maszynowo wypełniane wartości.
   Kolor wiodący = zieleń egzemplarza 3 (przewoźnik) — egzemplarz klienta.
   ========================================================================= */

:root {
  /* Powierzchnie — biurko i leżący na nim formularz */
  --desk:      #E6E4DC;
  --sheet:     #FFFFFF;
  --sheet-alt: #F3F2EE;

  /* Farba drukarska */
  --ink:    #17161A;
  --ink-2:  #55524B;
  --ink-3:  #8A867C;
  --rule:   #C6C2B6;
  --rule-2: #E0DDD3;

  /* Egzemplarze kompletu CMR */
  --egz3: #1B6E4A;   /* przewoźnik — zielony, kolor wiodący */
  --egz3-dark: #125236;
  --egz1: #B33A2E;   /* nadawca — czerwony, stan „do poprawy" */
  --egz2: #23508F;   /* odbiorca — niebieski, akcent drugorzędny */

  --display: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --data: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --gap: clamp(3.5rem, 7vw, 6.5rem);
  --sheet-pad: clamp(1.25rem, 4vw, 3rem);
  --shadow: 0 1px 0 var(--rule-2), 0 12px 28px -22px rgba(23, 22, 26, .5);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--egz3-dark); }

:focus-visible {
  outline: 2px solid var(--egz3);
  outline-offset: 3px;
}

/* ---------- Pasek makiety — ma być widoczny i niewygodny ---------------- */

.mockup-bar {
  background: var(--egz1);
  color: #fff;
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .04em;
  text-align: center;
  padding: .5rem 1rem;
}
.mockup-bar b { font-weight: 700; }

/* ---------- Szkielet ---------------------------------------------------- */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* Wyłącznie padding-block. Skrócone `padding` z zerem w poziomie skasowałoby
   boczny margines dziedziczony z .wrap, gdy obie klasy są na tym samym elemencie. */
.band { padding-block: var(--gap); }
.band--tight { padding-block: calc(var(--gap) * .6); }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  padding: var(--sheet-pad);
  box-shadow: var(--shadow);
}

/* ---------- Typografia -------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 4.2vw, 4.25rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.15; }

p { margin: 0 0 1rem; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.075rem, 1rem + .45vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 54ch;
}

h1 + .lede, h2 + .lede { margin-top: 1.35rem; }
.eyebrow { max-width: 42ch; }

.eyebrow {
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
}

.note {
  font-size: .9rem;
  color: var(--ink-2);
  border-left: 2px solid var(--rule);
  padding-left: 1rem;
  max-width: 58ch;
}

.tbd {
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--egz1);
  border: 1px dashed currentColor;
  padding: .15rem .45rem;
  display: inline-block;
  white-space: nowrap;
}

/* ---------- Przyciski --------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  align-items: center;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  padding: .85rem 1.6rem;
  border: 1px solid var(--egz3-dark);
  background: var(--egz3);
  color: #fff;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--egz3-dark); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--egz3-dark);
  border-color: var(--rule);
}
.btn--ghost:hover { background: var(--sheet-alt); color: var(--egz3-dark); }

/* ---------- Nagłówek serwisu -------------------------------------------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark span { color: var(--egz3); }

.masthead nav {
  font-family: var(--data);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  gap: 1.25rem;
}
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover { color: var(--egz3-dark); }
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--egz3);
}

/* ---------- Hero -------------------------------------------------------- */

.hero {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--gap);
}

/* Elementy siatki mają domyślnie min-width: auto, więc długie ciągi
   monospace rozpychają kolumnę ponad szerokość ekranu. */
.hero > *,
.card,
.calc__cell,
.lane,
.steps li > * { min-width: 0; }

.field__val,
.row__where,
.row__amt,
.calc__math { overflow-wrap: anywhere; }
@media (min-width: 62rem) {
  .hero { grid-template-columns: 1.05fr .95fr; }
}

/* ---------- Formularz CMR (sygnatura strony /przewoznik) ---------------- */

.cmr {
  background: var(--sheet);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  font-family: var(--data);
  font-size: .78rem;
  overflow: hidden;
}

.cmr__head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--ink);
  background: var(--sheet-alt);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cmr__copy { color: var(--egz3); font-weight: 700; }

.cmr__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.field {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: .5rem .7rem .6rem;
  min-height: 3.75rem;
}
.field:nth-child(2n) { border-right: 0; }
.field--wide { grid-column: 1 / -1; border-right: 0; }

.field__no {
  color: var(--ink-3);
  font-size: .68rem;
}
.field__label {
  display: block;
  font-size: .62rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
/* Wartości pól są na stronie od pierwszej klatki. Żadna treść nie zależy
   od tego, czy animacja wystartuje — jedyny animowany element to pieczęć. */
.field__val { color: var(--ink); }

/* Pole 24 — sedno produktu: podpis i pieczątka odbiorcy */
.field--verdict {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
  background: var(--sheet-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.stamp {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 2px solid var(--egz3);
  color: var(--egz3);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
  padding: .35rem .7rem;
  transform: rotate(-3deg);
}

.cmr__foot {
  border-top: 1px solid var(--ink);
  padding: .55rem .75rem;
  font-size: .7rem;
  color: var(--ink-2);
  background: var(--sheet-alt);
  max-width: none;   /* nadpisuje max-width: 62ch z reguły dla akapitów */
  margin: 0;
}
.cmr__foot b { color: var(--egz3-dark); }

/* ---------- Zestawienie paliwowe (sygnatura strony /paliwo) ------------- */

.ledger {
  background: var(--sheet);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  font-family: var(--data);
  font-size: .78rem;
  overflow: hidden;
}

.ledger__head,
.ledger__foot {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
  background: var(--sheet-alt);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ledger__head { border-bottom: 1px solid var(--ink); }
.ledger__foot { border-top: 1px solid var(--ink); text-transform: none; letter-spacing: 0; font-size: .74rem; }

.row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: .5rem;
  align-items: baseline;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--rule-2);
}

.row__src { color: var(--ink-3); font-size: .7rem; letter-spacing: .04em; }
.row__where { color: var(--ink); }
.row__amt { color: var(--ink-2); white-space: nowrap; }

.row--off { background: rgba(179, 58, 46, .05); }
.row--off .row__where { color: var(--egz1); }
.row--off .row__where::after {
  content: " · poza siecią";
  font-size: .68rem;
  letter-spacing: .04em;
}

.ledger__sum {
  color: var(--egz1);
  font-weight: 700;
}

/* ---------- Bloki bólu / korzyści --------------------------------------- */

.cards {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2.5rem;
}
@media (min-width: 48rem) {
  .cards--2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 60rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--sheet);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-2); font-size: .96rem; }

/* ---------- Kroki ------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
}

.steps li::before {
  content: counter(step);
  font-family: var(--data);
  font-size: .8rem;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
}

.steps li.is-core::before {
  color: #fff;
  background: var(--egz3);
  border-color: var(--egz3-dark);
}
.steps li.is-core h3 { color: var(--egz3-dark); }

.steps h3 { margin-bottom: .45rem; }
.steps p { color: var(--ink-2); font-size: .96rem; }

/* ---------- Rachunek ---------------------------------------------------- */

.calc {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2.5rem;
}
@media (min-width: 48rem) { .calc { grid-template-columns: 1fr 1fr; } }

.calc__cell { background: var(--sheet); padding: clamp(1.25rem, 3vw, 2rem); }

.calc__math {
  font-family: var(--data);
  font-size: .95rem;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 .9rem;
}
.calc__math b {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
  box-shadow: inset 0 -.4em 0 rgba(27, 110, 74, .16);
}

/* ---------- Pytania ----------------------------------------------------- */

.qa { margin-top: 2.5rem; border-top: 1px solid var(--rule); }

.qa details {
  border-bottom: 1px solid var(--rule);
}
.qa summary {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  padding: 1.1rem 2rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+";
  font-family: var(--data);
  color: var(--egz3);
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
}
.qa details[open] summary::after { content: "–"; }
.qa details p {
  color: var(--ink-2);
  font-size: .96rem;
  padding-bottom: 1.2rem;
}

/* ---------- Granice produktu -------------------------------------------- */

.limits {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: .65rem;
}
.limits li {
  padding-left: 1.6rem;
  position: relative;
  color: var(--ink-2);
  font-size: .96rem;
  max-width: 62ch;
}
.limits li::before {
  content: "×";
  font-family: var(--data);
  color: var(--egz1);
  position: absolute;
  left: .35rem;
  top: -.05rem;
}
.limits b { color: var(--ink); font-weight: 600; }

/* ---------- Zamknięcie -------------------------------------------------- */

.closer {
  background: var(--ink);
  color: #fff;
  padding-block: var(--gap);
}
.closer h2 { color: #fff; }
.closer p { color: #C9C6BE; }
.closer .btn { border-color: #fff; }

.form {
  display: grid;
  gap: .75rem;
  max-width: 30rem;
  margin-top: 2rem;
}
.form label {
  font-family: var(--data);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9C988F;
}
.form input {
  font: inherit;
  font-size: 1rem;
  padding: .7rem .8rem;
  border: 1px solid #45423C;
  background: #221F26;
  color: #fff;
}
.form input::file-selector-button {
  font: inherit;
  font-size: .85rem;
  background: #45423C;
  color: #fff;
  border: 0;
  padding: .35rem .7rem;
  margin-right: .7rem;
}
.form .btn { justify-self: start; margin-top: .5rem; }

/* ---------- Stopka ------------------------------------------------------ */

.sitefoot {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  font-size: .88rem;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sitefoot a { color: var(--ink-2); }

/* ---------- Rozjazd ruchu na stronie głównej ---------------------------- */

.split {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 3rem;
  box-shadow: var(--shadow);
}
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } }

.lane {
  background: var(--sheet);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: background .15s ease;
  border-top: 4px solid transparent;
}
.lane:hover { background: var(--sheet-alt); }
.lane--doc { border-top-color: var(--egz3); }
.lane--fuel { border-top-color: var(--egz2); }

.lane h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.lane p { color: var(--ink-2); font-size: .98rem; }

.lane__go {
  font-family: var(--data);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--egz3-dark);
  margin-top: auto;
}
.lane--fuel .lane__go { color: var(--egz2); }

/* ---------- Wąskie ekrany ----------------------------------------------- */

@media (max-width: 34rem) {
  .cmr__grid { grid-template-columns: 1fr; }
  .field { border-right: 0; }

  .ledger, .cmr { font-size: .72rem; }
  .row { grid-template-columns: 3.6rem 1fr; }
  .row__amt { grid-column: 2; color: var(--ink-3); }

  .ledger__foot { flex-direction: column; gap: .2rem; }
  .masthead nav { gap: .9rem; font-size: .72rem; }
}

/* ---------- Dostępność -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}

/* =========================================================================
   Zdjęcia — traktowane jak załącznik do dokumentu, nie jak tło
   ========================================================================= */

.figura {
  margin: 0;
  background: var(--sheet);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.figura img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.88) contrast(1.02);
}

/* Podpis nad zdjęciem, jak nagłówek załącznika — pod spodem chowałby się
   pod nachodzącym panelem z odczytem. */
.figura figcaption {
  order: -1;
  font-family: var(--data);
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: var(--sheet-alt);
  border-bottom: 1px solid var(--rule);
  padding: .45rem .7rem;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.figura--hero img { aspect-ratio: 4 / 3; object-fit: cover; }
.figura--stojaca img { aspect-ratio: 4 / 5; object-fit: cover; }
.figura--szeroka img { aspect-ratio: 16 / 7; object-fit: cover; }

/* Dowód: zdjęcie od kierowcy, a na nim to, co system z niego odczytał ------ */

.dowod { position: relative; }

.dowod .cmr,
.dowod .ledger {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
  margin-inline: 1rem 0;
  box-shadow: 0 1px 0 var(--rule-2), 0 22px 40px -26px rgba(23, 22, 26, .75);
}

@media (min-width: 48rem) {
  .dowod .cmr,
  .dowod .ledger {
    margin-top: -4rem;
    margin-inline: 2.5rem 0;
  }
}

/* =========================================================================
   Pasek wartości — to, po co ktoś tu przyszedł, bez przewijania
   ========================================================================= */

.wartosc {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 52rem) { .wartosc { grid-template-columns: repeat(3, 1fr); } }

.wartosc__cel {
  background: var(--sheet);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  min-width: 0;
}

.wartosc__liczba {
  font-family: var(--data);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.35rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--egz3-dark);
  margin: 0 0 .5rem;
  overflow-wrap: anywhere;
}
.wartosc__cel--strata .wartosc__liczba { color: var(--egz1); }

.wartosc__opis {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-2);
  max-width: 34ch;
}
.wartosc__opis b { color: var(--ink); font-weight: 600; }

.wartosc__zalozenie {
  font-family: var(--data);
  font-size: .66rem;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin: .7rem 0 0;
  max-width: none;
}

/* =========================================================================
   Pasmo ze zdjęciem — cezura między sekcjami, z jednym zdaniem
   ========================================================================= */

/* Zdjęcie i tekst leżą w tej samej komórce siatki, więc wysokość pasma bierze
   się z wyższego z nich — tekst nigdy nie wychodzi poza kadr. */
.pasmo {
  display: grid;
  grid-template-rows: 1fr;
  min-height: clamp(11rem, 22vw, 17rem);
  border-block: 1px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
}
.pasmo > * { grid-area: 1 / 1; }

/* Wysokość wymusza kontener, nie obrazek — inaczej zdjęcie renderuje się
   w naturalnych proporcjach i pasmo rozrasta się na pół ekranu. */
.pasmo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.05) brightness(.6);
}

.pasmo__tresc {
  position: relative;
  display: grid;
  align-content: center;
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1rem, 6vw, 4rem);
}

.pasmo__tresc p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 2.4vw, 2.5rem);
  line-height: 1.1;
  color: #fff;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}

.pasmo__tresc .pasmo__zrodlo {
  font-family: var(--data);
  font-size: .66rem;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .7);
  margin: .9rem 0 0;
  max-width: none;
}

/* =========================================================================
   Sekcja dwudzielna — zdjęcie obok treści
   ========================================================================= */

.duet {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.duet > * { min-width: 0; }
@media (min-width: 56rem) { .duet { grid-template-columns: 1fr 1fr; } }

/* Zdjęcie zawsze za tekstem w kolejności czytania: na szerokim ekranie ląduje
   po prawej, na wąskim pod nagłówkiem. Nagłówek sekcji nigdy nie chowa się
   za fotografią. */
.duet--odwrot .duet__foto { order: 2; }