/* ===========================================================================
   „Konto firmowe” (`/dla-firm`, makieta v82 „Dla firm - strona konta firmowego”).
   Desktop 1440 (ramki 1a–1c) i telefon 390 (2a–2c). Wartości 1:1 z makiety.
   Porównanie planów: `s-plany.css` (ta sama część co w panelu firmy).
   =========================================================================== */

/* Strona na pełną szerokość: sekcje same trzymają kontener 1240 px. */
.powloka__tresc:has(> .dlafirm) { padding: 0; }
.dlafirm { display: flex; flex-direction: column; background: var(--v-n-50); color: var(--v-primary); }

.dlafirm__h2 { margin: 0; font: 600 36px/normal var(--v-font-display); letter-spacing: -.025em; color: var(--v-primary); } /* makieta: „Jak zacząć” i „Pytania” bez interlinii */
.dlafirm__plany .dlafirm__h2 { line-height: 1.1; } /* makieta: „Plany” 1,1 */

/* ---- hero ---------------------------------------------------------------- */
.dlafirm__hero { background: var(--v-n-0); }
.dlafirm__hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 48px 80px; /* makieta */
}
.dlafirm__hero-tekst { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.dlafirm__znacznik {
  align-self: flex-start;
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--v-primary);
  color: var(--v-n-0);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
} /* makieta */
.dlafirm__h1 { margin: 0; font: 600 56px/1.05 var(--v-font-display); letter-spacing: -.035em; text-wrap: pretty; } /* makieta */
.dlafirm__lead { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--v-n-700); text-wrap: pretty; } /* makieta */
.dlafirm__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v-btn.dlafirm__cta { height: 56px; padding: 0 26px; border-radius: 12px; font-size: 16px; font-weight: 800; } /* makieta */
.dlafirm__porownaj { display: flex; align-items: center; min-height: 48px; padding: 0 6px; font-size: 15px; font-weight: 700; color: var(--v-primary); text-decoration: underline; } /* makieta */
.dlafirm__porownaj:hover { color: var(--v-secondary-text); }
.dlafirm__nota { font-size: 13.5px; line-height: 1.5; color: var(--v-n-600); text-wrap: pretty; }
/* Bez obrazka (11.10): jedna kolumna, nagłówek nie rozciąga się na całą szerokość. */
.dlafirm__hero-in--bez-obrazu { grid-template-columns: minmax(0, 1fr); }
.dlafirm__hero-in--bez-obrazu .dlafirm__hero-tekst { max-width: 760px; }

/* ---- korzyści ------------------------------------------------------------ */
.dlafirm__korzysci {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 48px; /* makieta */
}
.dlafirm__korzysc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dlafirm__ikona { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--v-secondary-soft); color: var(--v-primary); } /* makieta */
.dlafirm__korzysc-tytul { margin: 0; font: 600 21px/1.2 var(--v-font-display); letter-spacing: -.02em; } /* makieta */
.dlafirm__korzysc-opis { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--v-n-700); text-wrap: pretty; }

/* ---- plany --------------------------------------------------------------- */
.dlafirm__plany {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1088px;
  margin: 0 auto;
  padding: 8px 24px 72px; /* makieta */
  scroll-margin-top: 96px; /* kotwica „Porównaj plany” nie chowa się pod przyklejonym nagłówkiem */
}

/* ---- jak zacząć ---------------------------------------------------------- */
.dlafirm__start { background: var(--v-n-0); }
.dlafirm__start-in { display: flex; flex-direction: column; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 72px 48px; } /* makieta */
.dlafirm__kroki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dlafirm__krok { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--v-n-50); } /* makieta */
.dlafirm__krok--zrobiony { background: var(--v-success-soft); }
.dlafirm__krok-numer { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--v-primary); color: var(--v-n-0); font: 600 18px var(--v-font-display); } /* makieta */
.dlafirm__krok--zrobiony .dlafirm__krok-numer { background: var(--v-success); }
.dlafirm__krok-tytul { font: 600 20px/normal var(--v-font-display); letter-spacing: -.02em; } /* makieta */
.dlafirm__krok-opis { font-size: 14.5px; line-height: 1.55; color: var(--v-n-700); text-wrap: pretty; }

/* ---- pytania ------------------------------------------------------------- */
.dlafirm__pytania { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 868px; margin: 0 auto; padding: 72px 48px; } /* makieta */
.dlafirm__lista { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--v-n-100); border-radius: 20px; background: var(--v-n-0); } /* makieta */
.dlafirm__pytanie { border-bottom: 1px solid var(--v-n-100); }
.dlafirm__pytanie-glowa {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 24px; /* makieta */
  cursor: pointer;
  list-style: none;
}
.dlafirm__pytanie-glowa::-webkit-details-marker { display: none; }
.dlafirm__pytanie-tekst { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.4; }
/* Ikona „zwiń” to strzałka w górę — zamknięte pytanie ma ją obróconą w dół (makieta `expand_more`). */
.dlafirm__strzalka { flex-shrink: 0; transform: rotate(180deg); transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.dlafirm__pytanie[open] .dlafirm__strzalka { transform: none; }
.dlafirm__odpowiedz { max-width: 720px; margin: 0; padding: 0 24px 20px; font-size: 15px; line-height: 1.6; color: var(--v-n-700); text-wrap: pretty; } /* makieta */

/* ---- karta na końcu ------------------------------------------------------ */
.dlafirm__koniec { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 48px 72px; } /* makieta */
.dlafirm__koniec-karta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 44px; /* makieta */
  border-radius: 24px;
  background: var(--v-primary);
  color: var(--v-n-0);
}
.dlafirm__koniec-tekst { display: flex; flex-direction: column; gap: 6px; }
.dlafirm__koniec-tytul { font: 600 30px/1.15 var(--v-font-display); letter-spacing: -.025em; } /* makieta */
.dlafirm__koniec-podtytul { font-size: 15px; line-height: 1.5; color: var(--v-na-granacie-cichy); }
.dlafirm__cta--ciemne { flex-shrink: 0; }
/* Na granacie ochra jaśniejsza (token „na granacie”), a przycisk firmy biały bez obrysu (makieta). */
.dlafirm__cta--ciemne.v-btn--accent { background: var(--v-secondary-dark); }
.dlafirm__cta--ciemne.v-btn--secondary { border: none; background: var(--v-n-0); color: var(--v-primary); }
.dlafirm__cta--ciemne.v-btn--secondary:hover { background: var(--v-n-100); }

/* ---- węższy desktop ------------------------------------------------------ */
@media (max-width: 1100px) {
  .dlafirm__korzysci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlafirm__h1 { font-size: 44px; }
}

/* ---- telefon (makieta 390) ----------------------------------------------- */
@media (max-width: 759px) {
  .dlafirm__h2 { font-size: 28px; } /* makieta */
  .dlafirm__hero-in { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 16px 36px; } /* makieta */
  .dlafirm__h1 { font-size: 34px; } /* makieta */
  .dlafirm__lead { font-size: 16px; }
  .v-btn.dlafirm__cta:not(.dlafirm__cta--ciemne) { flex: 1 1 100%; }
  .dlafirm__korzysci { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 16px; } /* makieta */
  .dlafirm__plany { gap: 16px; padding: 0 16px 40px; } /* makieta */
  .dlafirm__start-in { gap: 16px; padding: 40px 16px; } /* makieta */
  .dlafirm__kroki { grid-template-columns: minmax(0, 1fr); }
  .dlafirm__pytania { gap: 16px; padding: 40px 16px; } /* makieta */
  .dlafirm__pytanie-glowa { padding: 14px 18px; } /* makieta */
  .dlafirm__odpowiedz { padding: 0 18px 20px; } /* makieta */
  .dlafirm__koniec { padding: 0 16px 40px; } /* makieta */
  .dlafirm__koniec-karta { flex-direction: column; align-items: stretch; padding: 28px 22px; } /* makieta */
  .dlafirm__koniec-tytul { font-size: 24px; } /* makieta */
}