/* ===== /apie (v2) =====
   Herojus, pasas, sekcijų karkasas ir CTA — site.v6.css „Ledger page kit“.
   Čia tik tai, kas būdinga šiam puslapiui: trijų sluoksnių paketas eilutėmis
   ir naudų sąrašas dviem stulpeliais. */

/* ====== Ką gaunate: paketo sluoksniai ======
   Kiekvienas sluoksnis — eilutė: numeris su sluoksnio žyme, pavadinimas,
   aprašymas. Platformos eilutė dar turi skaičių juostą. */
.erp-ab-stack { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--erp-maastricht); }

.erp-ab-layer {
  display: grid; grid-template-columns: 88px minmax(0, 5fr) minmax(0, 7fr); gap: 20px 48px;
  align-items: start; padding: 32px 0 36px; border-bottom: 1px solid var(--erp-rule);
}

.erp-ab-layer-n {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px;
  font: 500 13px/1 var(--erp-font-mono); color: var(--erp-freedom-ink);
}

/* Trys brūkšneliai kaip paketo pjūvis: paryškintas tas sluoksnis, apie kurį eilutė. */
.erp-ab-mark { display: grid; gap: 3px; width: 28px; }
.erp-ab-mark span { height: 4px; border-radius: 1px; background: var(--erp-rule-strong); }
.erp-ab-mark span.is-on { background: var(--erp-freedom-ink); }

.erp-ab-layer h3 {
  margin: 0; font: 650 clamp(22px, 18px + 0.5vw, 26px)/1.2 var(--erp-font-display);
  letter-spacing: -0.02em; color: var(--erp-maastricht); text-wrap: balance;
}

.erp-ab-layer p { margin: 0; max-width: 56ch; font: 400 17px/1.55 var(--erp-font-body); color: var(--erp-gray-600); text-wrap: pretty; }

.erp-ab-figs {
  grid-column: 2 / -1; list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--erp-rule);
}
.erp-ab-figs li { padding: 22px 20px 0 0; }
.erp-ab-figs li + li { padding-left: 24px; border-left: 1px solid var(--erp-rule); }
.erp-ab-figs strong {
  display: block; font: 700 clamp(30px, 22px + 1.2vw, 42px)/1 var(--erp-font-display);
  letter-spacing: -0.035em; color: var(--erp-maastricht); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.erp-ab-figs span { display: block; margin-top: 10px; font: 500 12.5px/1.4 var(--erp-font-mono); color: var(--erp-gray-600); }


/* ====== Naudos: dviejų stulpelių sąrašas su varnele ====== */
.erp-ab-why {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px;
  border-top: 2px solid var(--erp-maastricht);
}
.erp-ab-why > li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 16px;
  padding: 26px 0 28px; border-bottom: 1px solid var(--erp-rule);
}
.erp-ab-why .erp-sx-check { transform: translateY(10px) rotate(-45deg); }
.erp-ab-why h3 { margin: 0 0 8px; font: 650 20px/1.3 var(--erp-font-display); letter-spacing: -0.015em; color: var(--erp-maastricht); }
.erp-ab-why p { margin: 0; max-width: 52ch; font: 400 16px/1.55 var(--erp-font-body); color: var(--erp-gray-600); text-wrap: pretty; }


/* ====== Responsive ====== */
@media (max-width: 860px) {
  .erp-ab-layer { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 20px; }
  .erp-ab-layer-n { grid-row: 1 / span 2; }
  .erp-ab-layer h3, .erp-ab-layer p { grid-column: 2; }
  .erp-ab-figs { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
  .erp-ab-figs li:nth-child(3) { padding-left: 0; border-left: 0; }
  .erp-ab-figs li:nth-child(n+3) { margin-top: 20px; border-top: 1px solid var(--erp-rule); }
}

@media (max-width: 720px) {
  .erp-ab-why { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .erp-ab-layer { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 26px 0 28px; }
  .erp-ab-layer-n { gap: 12px; padding-top: 5px; }
  .erp-ab-mark { width: 22px; }
  .erp-ab-layer p { font-size: 16px; }
  .erp-ab-figs { grid-column: 1 / -1; }
  .erp-ab-figs li { padding: 18px 12px 0 0; }
  .erp-ab-figs li + li { padding-left: 16px; }
  .erp-ab-figs li:nth-child(3) { padding-left: 0; }
  .erp-ab-why > li { padding: 22px 0 24px; gap: 14px; }
  .erp-ab-why h3 { font-size: 19px; }
}