/* Посадочная /documentolog/: интеграция TapHR × Documentolog.
   Визуальный язык повторяет documentolog.com — синий #2462EA, жёлтые CTA, почти прямые
   углы, белые карточки на светло-сером фоне, тонкая линейная графика. Шапка и подвал —
   общие с остальным сайтом (styles.css), здесь только перекраска под синюю палитру. */

.page--documentolog {
  --dl-blue: #2462ea;
  --dl-blue-hero: #3770ec;
  --dl-blue-dark: #1b4fc4;
  --dl-blue-soft: #edf6ff;
  --dl-blue-line: #cfe3fc;
  --dl-yellow: #fcdf46;
  --dl-yellow-hover: #f9cb14;
  --dl-ink: #191919;
  --dl-text: #333333;
  --dl-muted: #6b7280;
  --dl-bg: #fafafa;
  --dl-line: #e6e8ec;
  --dl-dark: #151515;
  --dl-radius: 4px;
  background: var(--dl-bg);
  color: var(--dl-text);
}

.page--documentolog .btn-primary {
  background-color: var(--dl-blue);
  box-shadow: none;
}
.page--documentolog .btn-primary:hover {
  background-color: var(--dl-blue-dark);
  box-shadow: none;
}

/* Шапка посадочной: только логотип, язык и кнопка. Меню-бургер и #aside не нужны,
   но #aside остаётся в разметке — на него завязан closeMenu.js. */
.page--documentolog #aside {
  display: none;
}
@media (max-width: 860px) {
  .page--documentolog #nav-demo,
  .page--documentolog .custom-select {
    display: inline-flex;
  }
}
@media (max-width: 400px) {
  .page--documentolog #nav-demo {
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ------------------------------ Кнопки ------------------------------ */
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--dl-radius);
  font: 600 15px/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.dl-btn svg {
  flex-shrink: 0;
}
.dl-btn--yellow {
  background: var(--dl-yellow);
  color: var(--dl-ink);
}
.dl-btn--yellow:hover {
  background: var(--dl-yellow-hover);
}
.dl-btn--blue {
  background: var(--dl-blue);
  color: #fff;
}
.dl-btn--blue:hover {
  background: var(--dl-blue-dark);
}
.dl-btn--soft {
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
}
.dl-btn--soft:hover {
  background: var(--dl-blue-line);
}
.dl-btn--outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: transparent;
}
.dl-btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ------------------------------ Общие блоки ------------------------------ */
.dl-section {
  padding: 96px 0;
}
.dl-section--white {
  background: #fff;
}
.dl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dl-muted);
}
.dl-title {
  margin: 0 0 16px;
  font: 600 clamp(28px, 3.4vw, 40px) / 1.18 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--dl-ink);
}
.dl-title em,
.dl-hero h1 em {
  font-style: normal;
  color: var(--dl-blue);
}
.dl-lead {
  max-width: 640px;
  margin: 0 0 48px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--dl-muted);
}

.dl-title--center,
.dl-lead--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------ Hero ------------------------------ */
.dl-hero {
  padding: calc(var(--header-h) + 56px) 0 80px;
  background: #fff;
  border-bottom: 1px solid var(--dl-line);
}
.dl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
/* Как на documentolog.com/global: «Documentolog Platform × Documentolog Business» */
.dl-cobrand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.dl-cobrand__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dl-cobrand__item img,
.dl-cobrand__item svg {
  display: block;
  flex-shrink: 0;
}
.dl-cobrand__x {
  color: #d4dded;
}
.dl-hero h1 {
  margin: 0 0 20px;
  font: 600 clamp(32px, 3.8vw, 48px) / 1.12 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--dl-ink);
}
.dl-hero__sub {
  max-width: 560px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--dl-text);
}
.dl-hero__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #d97706;
}
.dl-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 28px;
  padding: 12px 16px;
  width: fit-content;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  font-size: 13px;
  color: var(--dl-muted);
}
.dl-methods b {
  font-weight: 500;
  color: var(--dl-ink);
}

/* Макет «заявка в Documentolog → кандидаты от TapHR» */
.dl-mock {
  position: relative;
  padding: 28px;
  background: var(--dl-blue-soft);
  border-radius: 8px;
  background-image: linear-gradient(var(--dl-blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dl-blue-line) 1px, transparent 1px);
  background-size: 28px 28px;
}
.dl-mock__window {
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(36, 98, 234, 0.14);
  overflow: hidden;
}
.dl-mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--dl-line);
  font-size: 12px;
  color: var(--dl-muted);
}
.dl-mock__bar b {
  color: var(--dl-ink);
  font-weight: 600;
}
.dl-mock__dots {
  display: flex;
  gap: 5px;
  margin-right: 6px;
}
.dl-mock__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dl-line);
}
.dl-mock__body {
  padding: 18px 18px 8px;
}
.dl-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.dl-mock__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dl-muted);
}
.dl-mock__name {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: #e8f7ee;
  color: #15803d;
}
.dl-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.dl-status--blue {
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
}
.dl-status--amber {
  background: #fef6e6;
  color: #b45309;
}
.dl-mock__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.dl-mock__meta span {
  padding: 4px 9px;
  border-radius: var(--dl-radius);
  background: #f4f5f7;
  font-size: 11.5px;
  color: var(--dl-text);
}
.dl-cand {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--dl-line);
}
.dl-cand__ava {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
  font-size: 12px;
  font-weight: 700;
}
.dl-cand__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-cand__sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--dl-muted);
}
.dl-score {
  font-size: 12px;
  font-weight: 700;
  color: #15803d;
  background: #e8f7ee;
  padding: 4px 8px;
  border-radius: var(--dl-radius);
}
.dl-mock__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.1);
  font-size: 12px;
  font-weight: 500;
  color: var(--dl-ink);
}
.dl-mock__float--top {
  top: -14px;
  right: 24px;
}
.dl-mock__float--bottom {
  bottom: -16px;
  left: 18px;
}
.dl-mock__float i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--dl-radius);
  background: var(--dl-yellow);
  color: var(--dl-ink);
  font-style: normal;
}

/* ------------------------------ Цифры ------------------------------ */
.dl-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--dl-line);
  border: 1px solid var(--dl-line);
}
.dl-stat {
  padding: 28px 24px;
  background: #fff;
}
.dl-stat__num {
  font: 600 34px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--dl-blue);
}
.dl-stat__text {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dl-text);
}

/* ------------------------------ Карточки преимуществ ------------------------------ */
.dl-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dl-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dl-card {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
}
.dl-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: var(--dl-radius);
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
}
.dl-card__icon--yellow {
  background: #fef9db;
  color: #b45309;
}
.dl-card__icon--green {
  background: #f3fce9;
  color: #3f7d10;
}
.dl-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dl-muted);
}
.dl-card ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.dl-card li {
  position: relative;
  padding-left: 22px;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--dl-text);
}
.dl-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--dl-blue);
  border-bottom: 2px solid var(--dl-blue);
  transform: rotate(-45deg);
}

/* ------------------------------ Как это работает ------------------------------ */
.dl-steps {
  display: grid;
  gap: 16px;
}
.dl-step {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
  padding: 36px 40px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
}
.dl-step__num {
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--dl-muted);
}
.dl-step__side {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: var(--dl-radius);
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
  font-size: 12px;
  font-weight: 600;
}
.dl-step__side--taphr {
  background: var(--green-100);
  color: var(--green-700);
}
.dl-step h3 {
  margin: 0 0 10px;
  font: 600 22px/1.3 var(--font-display);
  color: var(--dl-ink);
}
.dl-step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--dl-muted);
}
.dl-step__visual {
  padding: 22px;
  min-height: 180px;
  border-radius: 6px;
  background: var(--dl-blue-soft);
  display: grid;
  align-content: center;
  gap: 10px;
}
.dl-field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  font-size: 13px;
  color: var(--dl-muted);
}
.dl-field b {
  color: var(--dl-ink);
  font-weight: 600;
  text-align: right;
}
.dl-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.dl-pipeline div {
  padding: 10px 8px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  text-align: center;
  font-size: 12px;
  color: var(--dl-muted);
}
.dl-pipeline b {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  color: var(--dl-ink);
}
.dl-pipeline .is-hot {
  border-color: var(--dl-blue);
}
.dl-pipeline .is-hot b {
  color: var(--dl-blue);
}
.dl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
  font-size: 13px;
  color: var(--dl-ink);
}
.dl-chip svg {
  flex-shrink: 0;
  color: var(--dl-blue);
}
.dl-chip--ok svg,
.dl-chip--wait svg {
  color: currentColor;
}
.dl-chip--ok {
  border-color: #bbe5c8;
  color: #15803d;
}
.dl-chip--wait {
  border-color: #f6d79a;
  color: #b45309;
}
.dl-actionsbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dl-actionsbar span {
  flex: 1 1 auto;
  padding: 10px;
  border-radius: var(--dl-radius);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.dl-actionsbar .go {
  background: var(--dl-blue);
  color: #fff;
}
.dl-actionsbar .no {
  background: #fff;
  border: 1px solid var(--dl-line);
  color: var(--dl-text);
}
.dl-actionsbar .docs {
  background: var(--dl-yellow);
  color: var(--dl-ink);
}

.dl-contract {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--dl-line);
  border-radius: var(--dl-radius);
}
.dl-contract__head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
}
.dl-contract__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--dl-radius);
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
}
.dl-contract__head b {
  display: block;
  font-size: 13.5px;
  color: var(--dl-ink);
}
.dl-contract__head div span {
  font-size: 12px;
  color: var(--dl-muted);
}
.dl-contract__lines {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}
.dl-contract__lines i {
  height: 6px;
  border-radius: 3px;
  background: #eef1f5;
}
.dl-contract__lines i:nth-child(2) {
  width: 86%;
}
.dl-contract__lines i:nth-child(3) {
  width: 62%;
}
.dl-contract__sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--dl-line);
  font-size: 12px;
  color: var(--dl-muted);
}

/* ------------------------------ Сравнение ------------------------------ */
.dl-compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--dl-line);
}
.dl-compare th,
.dl-compare td {
  padding: 20px 24px;
  border-bottom: 1px solid var(--dl-line);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.45;
}
.dl-compare thead th {
  font-size: 15px;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-compare tbody th {
  width: 26%;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-compare td {
  color: var(--dl-muted);
}
.dl-compare .is-us {
  background: var(--dl-blue-soft);
  color: var(--dl-ink);
}
.dl-compare thead .is-us {
  color: var(--dl-blue);
}
.dl-compare tr:last-child > * {
  border-bottom: none;
}
.dl-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------ Роли ------------------------------ */
.dl-role__who {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dl-blue);
}

/* ------------------------------ FAQ ------------------------------ */
.dl-faq {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--dl-line);
}
.dl-faq details {
  border-bottom: 1px solid var(--dl-line);
}
.dl-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--dl-ink);
}
.dl-faq summary::-webkit-details-marker {
  display: none;
}
.dl-faq summary::after {
  content: "+";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--dl-radius);
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
  font-size: 20px;
  font-weight: 400;
  transition: transform 0.2s ease;
}
.dl-faq details[open] summary::after {
  transform: rotate(45deg);
}
.dl-faq details p {
  margin: 0;
  padding: 0 52px 22px 4px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--dl-muted);
}

/* ------------------------------ Финальный CTA ------------------------------ */
.dl-final {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  background: var(--dl-blue-hero);
  color: #fff;
  text-align: center;
}
.dl-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.dl-final .container {
  position: relative;
}
.dl-final h2 {
  margin: 0 auto 16px;
  max-width: 760px;
  font: 600 clamp(28px, 3.6vw, 42px) / 1.18 var(--font-display);
  letter-spacing: -0.02em;
  color: #fff;
}
.dl-final p {
  margin: 0 auto 32px;
  max-width: 600px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.dl-final .dl-actions {
  justify-content: center;
}

/* ------------------------------ Форма заявки (как «Отдел продаж» на documentolog.com) ------------------------------ */
.dl-req {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
}
.dl-req[hidden] {
  display: none;
}
.dl-req__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
}
.dl-req__dialog {
  position: relative;
  width: min(440px, 100%);
  padding: 32px 40px 40px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.dl-req__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}
.dl-req__close:hover {
  color: var(--dl-ink);
}
.dl-req__close svg {
  width: 20px;
  height: 20px;
}
.dl-req__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 20px;
  background: var(--dl-blue-soft);
  color: var(--dl-blue);
}
.dl-req__title {
  margin: 0 0 8px;
  font: 600 22px/1.25 var(--font-display);
  color: var(--dl-ink);
}
.dl-req__sub {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--dl-text);
}
.dl-req__form {
  display: grid;
  gap: 6px;
  text-align: left;
}
.dl-req__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  color: #707070;
  transition: border-color 0.2s ease;
}
.dl-req__field:focus-within {
  border-color: var(--dl-blue);
  color: var(--dl-blue);
}
.dl-req__field svg {
  flex-shrink: 0;
}
.dl-req__field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: 400 15px var(--font-body);
  color: var(--dl-ink);
}
.dl-req__field input::placeholder {
  color: #8a8a8a;
}
.dl-req__submit {
  width: 100%;
  margin-top: 18px;
  border-radius: 0;
}
.dl-req__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}
/* ------------------------------ Видео-демо ------------------------------ */
.dl-video {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.dl-video[hidden] {
  display: none;
}
.dl-video__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.72);
}
.dl-video__dialog {
  position: relative;
  width: min(960px, 100%);
  padding: 48px 16px 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.dl-video__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--dl-muted);
  cursor: pointer;
}
.dl-video__close:hover {
  background: #f4f5f7;
  color: var(--dl-ink);
}
.dl-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.dl-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------ Адаптив ------------------------------ */
@media (max-width: 1024px) {
  .dl-hero__grid,
  .dl-step {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-hero__grid {
    gap: 48px;
  }
  .dl-cards,
  .dl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dl-cards--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-step {
    gap: 24px;
    padding: 28px;
  }
}

@media (max-width: 640px) {
  .dl-req__dialog {
    padding: 28px 20px 24px;
  }
  .page--documentolog .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .dl-section {
    padding: 64px 0;
  }
  .dl-hero {
    padding: calc(var(--header-h) + 32px) 0 56px;
  }
  .dl-hero__sub {
    font-size: 16.5px;
  }
  .dl-actions .dl-btn {
    width: 100%;
  }
  .dl-cards,
  .dl-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .dl-mock {
    padding: 18px 12px;
  }
  .dl-mock__float--top {
    right: 8px;
  }
  .dl-step {
    padding: 22px 18px;
  }
  .dl-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* таблица сравнения на телефоне — карточки: строка таблицы = карточка, колонки подписаны */
  .dl-compare,
  .dl-compare tbody,
  .dl-compare tr,
  .dl-compare th,
  .dl-compare td {
    display: block;
    width: auto;
  }
  .dl-compare {
    border: none;
    background: transparent;
  }
  .dl-compare thead {
    display: none;
  }
  .dl-compare tr {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--dl-line);
    border-radius: var(--dl-radius);
    overflow: hidden;
  }
  .dl-compare tbody th {
    width: auto;
    padding: 14px 16px 10px;
    border-bottom: none;
    font-size: 16px;
  }
  .dl-compare td {
    padding: 10px 16px 12px;
    font-size: 14.5px;
  }
  .dl-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dl-muted);
  }
  .dl-compare td.is-us::before {
    color: var(--dl-blue);
  }
  .dl-compare tr:last-child > * {
    border-bottom: 1px solid var(--dl-line);
  }
  .dl-compare tr > td:last-child {
    border-bottom: none;
  }
  .dl-faq summary {
    font-size: 16px;
  }
  .dl-faq details p {
    padding-right: 4px;
  }
}