/* ═══════════════════════════════════════════════════════════════════════
   РАЗРАБОТЧИКАМ, ВАРИАНТ A. Правила только этой страницы.
   Все имена начинаются на dva-. Общий файл paymatic.css не тронут: шрифты
   и размеры заголовков, кнопки, шапка и подвал приходят оттуда как есть.
   Размеры заголовков здесь НЕ переопределяются намеренно. Общий файл
   задаёт три уровня с пометкой важности, и они действуют на h1, h2, h3
   этой страницы сами. Своего здесь только цвет заголовка.
   Тут задаётся раскладка страницы, цвет блоков, блоки кода и таблица.
   ═══════════════════════════════════════════════════════════════════════ */

.dva-page{
  --dva-ink:#1f2229;      /* основной набор на белом */
  --dva-mut:#5a5e66;      /* второстепенный набор на белом */
  --dva-hair:#e8e8e8;     /* единый цвет соединительных линий сайта */
  hyphens:none;
}

/* ── ЭКРАН 1. Чёрная зона во всю ширину окна ───────────────────────────
   Слева текст и две кнопки, справа кусок кода. Ряд выровнен по низу:
   низ кода совпадает с низом текстовой колонки, поэтому граница чёрного
   и белого читается одной прямой. Вылета за границу здесь нет вовсе —
   на странице кассы его держал рисунок, а кусок кода в подвешенном виде
   обрезался бы на белом и терял смысл. */
/* Текстовая колонка заметно шире колонки с кодом. Причина замерена: при
   равных колонках слово «РАЗРАБОТЧИКАМ» в заголовке не влезало в строку и
   ломалось пополам. Код в оставшейся ширине помещается целиком, самая
   длинная его строка короче колонки. */
.dva-hero{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);
  align-items:end;
  padding:clamp(22px,2.8vw,44px) 0 clamp(34px,4.4vw,72px);
}
.dva-hero-tx{min-width:0}
.dva-h1{color:#fff;margin:0}
.dva-rule{display:block;height:1px;background:rgba(255,255,255,.18);
  margin:clamp(20px,2.4vw,36px) 0 clamp(20px,2.4vw,34px)}
.dva-intro{margin:0 0 clamp(24px,2.8vw,36px);
  font-size:19px;line-height:1.55;color:var(--muted);max-width:54ch}
.dva-hero-act{display:flex;flex-wrap:wrap;gap:12px}
/* Кнопка не ездит под курсором, а заливается оранжевым сайта: так себя
   ведут кнопки на соседних внутренних страницах. */
.dva-btn.btn-white:hover{transform:none;background:var(--lime);color:var(--lime-ink)}
.dva-btn.btn-ghost:hover{transform:none}
.dva-hero-code{min-width:0}

/* ── БЛОКИ КОДА ────────────────────────────────────────────────────────
   Один вид на всю страницу: почти чёрная подложка с волосяной светлой
   рамкой. На чёрной зоне и на чёрной плите она читается как врезка, а не
   как карточка, поэтому правило «карточки только белые или чёрные» тут
   не задевается. Шрифт системный моноширинный: на Маке и на айфоне это
   SF Mono, лишней загрузки с чужого сервера страница не делает. */
.dva-code{
  background:#0c0e11;border:1px solid rgba(255,255,255,.12);
  border-radius:18px;overflow:hidden;min-width:0;
}
.dva-code-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
}
.dva-code-m{font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.12)}
.dva-code-u{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
  'Liberation Mono',monospace;font-size:12.5px;color:#8b929d;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dva-pre{
  margin:0;padding:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
  'Liberation Mono',monospace;
  font-size:13.5px;line-height:1.64;color:#8b929d;tab-size:2;
}
.dva-pre code{white-space:pre;display:block}
.dva-pre .k{color:#79c0ff}   /* имя поля */
.dva-pre .s{color:#ffab70}   /* строка */
.dva-pre .n{color:#e8c26a}   /* число */
.dva-pre .c{color:#6b7280;font-style:italic}
/* Подсветка ровно на полях маршрутизации. Больше оранжевого в коде нет:
   если подсветить всё, не будет видно ничего. */
.dva-hi{background:rgba(241,100,40,.22);border-radius:5px;padding:1px 4px;
  margin:0 -2px}

/* ── ОБЩИЙ НАБОР БЕЛОГО ПОЛОТНА ──────────────────────────────────────── */
.dva-sheet{hyphens:none}
.dva-h2{margin:0;color:var(--dva-ink)}
.dva-h2.is-light{color:#fff}
.dva-lead{margin:clamp(16px,1.8vw,24px) 0 0;font-size:19px;line-height:1.5;
  color:var(--dva-ink);max-width:76ch}
.dva-lead.is-light{color:#e7e9ed}
.dva-note{margin:clamp(18px,2vw,26px) 0 0;font-size:17px;line-height:1.5;
  color:var(--dva-mut);max-width:80ch}
.dva-note.is-light{color:#a9aeb8}
.dva-fine{margin:clamp(14px,1.6vw,20px) 0 0;font-size:15px;line-height:1.45;
  color:#7a808b}
.dva-sec{margin-top:clamp(44px,5.4vw,90px)}
.dva-sec:first-of-type{margin-top:0}
/* Ссылка синяя, подчёркивание тонкое и того же цвета. Оранжевым ссылки
   не подчёркиваются нигде на сайте. */
.dva-link{color:var(--blue);border-bottom:1px solid rgba(18,165,255,.42);
  transition:border-color .16s ease}
.dva-link:hover{border-bottom-color:var(--blue)}

/* ── БЛОК 2. ЧЕТЫРЕ КАРТОЧКИ ПО УРОВНЮ УСИЛИЙ ──────────────────────────
   Главный экран страницы. Две колонки на широком окне, одна на телефоне.
   Цвета ровно три: белый, оранжевый (один раз) и чёрный. */
.dva-cards{
  margin-top:clamp(24px,2.8vw,40px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.dva-card{
  background:#fff;border-radius:24px;
  box-shadow:0 4px 12px rgba(31,34,41,.15);
  padding:clamp(26px,2.8vw,40px) clamp(24px,2.6vw,36px) clamp(26px,2.8vw,38px);
  display:flex;flex-direction:column;
  transition:box-shadow .18s ease;
}
.dva-card:hover{box-shadow:0 8px 20px rgba(31,34,41,.20)}
.dva-ct{margin:0;color:var(--dva-ink)}
.dva-cd{margin:clamp(12px,1.4vw,18px) 0 0;font-size:17px;line-height:1.5;
  color:var(--dva-mut)}
.dva-links{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0}
.dva-links li{margin-bottom:10px}
.dva-links li:last-child{margin-bottom:0}
.dva-links a{display:inline-block;font-size:17px;font-weight:600;
  color:var(--blue);border-bottom:1px solid transparent;
  transition:border-color .16s ease}
.dva-links a:hover{border-bottom-color:var(--blue)}

/* Чёрная карточка. Тень своя, плотнее и с большим разлётом: серая под
   чёрной заливкой не читается и карточка выглядит плоской. */
.dva-card.is-dark{background:#000;box-shadow:0 10px 28px rgba(0,0,0,.34)}
.dva-card.is-dark:hover{box-shadow:0 16px 40px rgba(0,0,0,.42)}
.dva-card.is-dark .dva-ct{color:#fff}
.dva-card.is-dark .dva-cd{color:#b9bdc5}

/* Оранжевая карточка одна на всю страницу. Заливка переходом сверху вниз,
   как у всех оранжевых карточек сайта. Ссылки в ней белые, а не синие:
   синий на оранжевом не читается вовсе. */
.dva-card.is-orange{
  background:linear-gradient(180deg,#f7743a 0%,#f16428 100%);
  box-shadow:0 6px 18px rgba(178,58,16,.40);
}
.dva-card.is-orange:hover{box-shadow:0 14px 30px rgba(178,58,16,.52)}
.dva-card.is-orange .dva-ct{color:#fff}
.dva-card.is-orange .dva-cd{color:rgba(255,255,255,.92)}
.dva-card.is-orange .dva-links a{color:#fff;
  border-bottom-color:rgba(255,255,255,.45)}
.dva-card.is-orange .dva-links a:hover{border-bottom-color:#fff}

/* ── БЛОК 3. ПОРЯДОК ПОДКЛЮЧЕНИЯ ───────────────────────────────────────
   Девять шагов столбиком. Граница между работой бизнеса и работой
   разработчика показана двумя способами сразу: меткой справа и цветом
   кружка с номером. Шаги бизнеса светлые, шаги разработчика тёмные,
   последний общий и оранжевый. Никаких стрелок, только одна прямая
   соединительная черта слева. */
.dva-steps{
  position:relative;list-style:none;margin:clamp(24px,2.8vw,40px) 0 0;
  padding:0;counter-reset:dva;
}
/* Черта соединяет соседние номера и рисуется по одному куску на шаг.
   Одной сквозной чертой на весь столбик она не сделана намеренно: на
   телефоне метка «чья это работа» уходит под текст, последний шаг
   становится выше, и сквозная черта вылезала ниже девятого номера.
   Цвет общий для всех соединительных линий сайта. */
.dva-steps li:not(:last-child)::before{
  content:'';position:absolute;left:20px;top:42px;bottom:0;width:2px;
  background:var(--dva-hair);z-index:0;
}
.dva-steps li{
  position:relative;z-index:1;counter-increment:dva;
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  align-items:start;gap:clamp(14px,1.8vw,24px);
  padding:0 0 clamp(20px,2.2vw,30px);
}
.dva-steps li:last-child{padding-bottom:0}
.dva-sn{
  position:relative;z-index:1;
  display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  background:#eceef1;color:var(--dva-ink);
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:16px;
  line-height:1;
}
/* Шаги с пятого по восьмой это работа разработчика: кружок тёмный. */
.dva-steps li:nth-child(n+5) .dva-sn{background:#1f2229;color:#fff}
/* Девятый шаг общий, кружок оранжевый, как последний шаг подключения
   на других страницах сайта. */
.dva-steps li:nth-child(9) .dva-sn{
  background:linear-gradient(180deg,#f7743a 0%,#f16428 100%);color:#fff}
.dva-stx{min-width:0;font-size:17px;line-height:1.5;color:var(--dva-mut);
  padding-top:2px}
.dva-stx b{display:block;font-weight:700;font-size:18px;
  color:var(--dva-ink);margin-bottom:4px}
.dva-role{
  flex:0 0 auto;align-self:start;margin-top:10px;white-space:nowrap;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:#eceef1;color:var(--dva-mut);
}
.dva-role.is-dev{background:#1f2229;color:#fff}
.dva-role.is-both{background:linear-gradient(180deg,#f7743a 0%,#f16428 100%);
  color:#fff}

/* ── БЛОК 4. МАРШРУТИЗАЦИЯ В ЗАПРОСЕ. ЧЁРНАЯ ПЛИТА ─────────────────────
   Ядро страницы. Чёрная плита лежит прямо на белом полотне, скругление
   34 точки, как у белых полотен сайта. Код внутри плиты читается лучше
   всего, поэтому именно здесь она и стоит. */
.dva-route{
  background:#000;color:#fff;border-radius:34px;
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  padding:clamp(30px,4.2vw,64px) clamp(24px,3.6vw,56px) clamp(28px,3.6vw,54px);
}
.dva-route-grid{
  margin-top:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);align-items:start;
}
/* Разбор трёх полей. Карточек тут нет намеренно: внутри чёрной плиты
   ещё одна плитка выглядела бы вложенной коробкой. Поля разведены
   волосяными линиями. */
.dva-fields{
  margin-top:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
}
.dva-field{border-top:1px solid rgba(255,255,255,.14);
  padding-top:clamp(14px,1.6vw,20px)}
.dva-fn{display:block;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
  'Liberation Mono',monospace;
  font-size:14px;color:#ffab70}
.dva-fp{margin:10px 0 0;font-size:16px;line-height:1.5;color:#a9aeb8}

/* ── БЛОК 5. ТЕСТОВАЯ СРЕДА. ТАБЛИЦА ───────────────────────────────────
   Вертикальных линеек нет, строки разделены волосяной чертой. Номера
   набраны моноширинным, чтобы столбик стоял ровно. На узком окне таблица
   прокручивается вбок внутри своей обёртки, страница при этом не едет. */
.dva-tablewrap{margin-top:clamp(24px,2.8vw,40px);overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.dva-table{width:100%;min-width:560px;border-collapse:collapse;
  text-align:left}
.dva-table th{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:#7a808b;
  padding:0 18px 12px 0;border-bottom:2px solid var(--dva-hair);
}
.dva-table th:last-child,.dva-table td:last-child{padding-right:0}
/* Ширины столбцов заданы явно. Без них третий столбец уезжал к правому
   краю и между ним и вторым висела пустая полоса в треть таблицы. */
.dva-table th:first-child,.dva-table td:first-child{width:28%}
.dva-table th:nth-child(2),.dva-table td:nth-child(2){width:24%}
.dva-table td{
  padding:14px 18px 14px 0;border-bottom:1px solid #f1f1f1;
  font-size:16px;line-height:1.45;color:var(--dva-mut);vertical-align:top;
}
.dva-table tr:last-child td{border-bottom:0}
.dva-num{
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
  'Liberation Mono',monospace;
  font-size:15px;color:var(--dva-ink);white-space:nowrap;
}

/* ── БЛОК 6. УВЕДОМЛЕНИЯ. ТРИ БЕЛЫЕ КАРТОЧКИ ───────────────────────────
   Плюс вывод раздела отдельной строкой. Набор строки один в один с
   врезками на соседних страницах: наклонный, с оранжевой чертой слева. */
.dva-three{
  margin-top:clamp(24px,2.8vw,40px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.dva-two{
  margin-top:clamp(24px,2.8vw,40px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.dva-plate{
  background:#fff;border-radius:22px;
  box-shadow:0 4px 12px rgba(31,34,41,.15);
  padding:clamp(24px,2.6vw,34px) clamp(22px,2.4vw,32px);
  transition:box-shadow .18s ease;
}
.dva-plate:hover{box-shadow:0 8px 20px rgba(31,34,41,.20)}
/* Надпись на карточке. Это не заголовок страницы, поэтому уровнем она не
   считается и размеры общего файла её не касаются. Начертание и прописные
   взяты те же, что у заголовков, чтобы карточка читалась как часть сайта,
   а кегль мелкий, чтобы она не спорила с названиями четырёх карточек
   главного экрана. */
.dva-pn{display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  color:var(--dva-ink)}
.dva-pn.is-light{color:#fff}
.dva-pp{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--dva-mut)}
.dva-pp.is-light{color:#a9aeb8}

/* Вывод раздела. Единственное место на белом полотне, где появляется
   оранжевый. Ширина задана в долях самой буквы, чтобы на узком окне
   область сужалась вместе с набором. */
.dva-turn{
  margin:clamp(30px,3.4vw,52px) 0 0;max-width:30em;
  border-left:4px solid var(--lime);
  padding:4px 0 4px clamp(20px,2.4vw,34px);
  font-family:'Manrope',sans-serif;font-weight:400;
  font-size:clamp(20px,2.1vw,29px);line-height:1.3;letter-spacing:-.01em;
  font-style:italic;color:var(--dva-ink);
}

/* ── БЛОК 8. ДВИЖКИ МАГАЗИНОВ ──────────────────────────────────────────
   Простой ряд названий. Ни логотипов, ни картинок: чужие знаки на сайте
   компании, которая только выходит на рынок, читаются как заявка на
   партнёрство, которой пока нет. */
.dva-chips{list-style:none;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px}
.dva-chips li{
  background:#fff;border:1px solid #ededed;border-radius:999px;
  padding:11px 20px;font-size:16px;font-weight:600;color:var(--dva-ink);
}

/* ── БЛОК 9. ПОДДЕРЖКА. ЧЁРНАЯ ПЛИТА ЗАКРЫВАЕТ СТРАНИЦУ ───────────────── */
.dva-help{
  background:#000;color:#fff;border-radius:34px;
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  padding:clamp(30px,4.2vw,64px) clamp(24px,3.6vw,56px) clamp(30px,3.8vw,58px);
}
.dva-help-body{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);flex-wrap:wrap;
}
.dva-help-body>.dva-lead{flex:1 1 440px;min-width:0;max-width:62ch}
.dva-help-btn{flex:0 0 auto}
.dva-help-btn:hover{transform:none;background:var(--lime);color:var(--lime-ink)}

/* ═══ ШИРИНЫ ════════════════════════════════════════════════════════════ */

/* Окно уже 1100. Первый экран распрямляется в столбик: кусок кода рядом с
   текстом становится слишком узким и строки в нём начинают ломаться. */
@media(max-width:1100px){
  .dva-hero{grid-template-columns:minmax(0,1fr);
    gap:clamp(26px,3.4vw,38px);align-items:start}
  .dva-hero-code{max-width:620px}
  .dva-fields{grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(14px,2vw,24px)}
  .dva-three{grid-template-columns:minmax(0,1fr)}
  .dva-turn{font-size:clamp(20px,2.6vw,27px)}
}

/* Окно уже 900. Два куска кода встают друг под другом, разбор полей
   становится столбиком, карточки в один ряд. */
@media(max-width:900px){
  .dva-cards{grid-template-columns:minmax(0,1fr)}
  .dva-route-grid{grid-template-columns:minmax(0,1fr)}
  .dva-fields{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vw,20px)}
  .dva-two{grid-template-columns:minmax(0,1fr)}
}

/* Телефон. Метка «чья это работа» уходит под текст шага, иначе на узком
   экране она отжимает описание в столбик из двух слов. Скругления мельче,
   поля уже, кнопка во всю ширину. */
@media(max-width:600px){
  .dva-intro{font-size:18px}
  .dva-lead{font-size:18px}
  .dva-hero-act{gap:10px}
  .dva-hero-act .btn{flex:1 1 100%;justify-content:center;padding:14px 18px;
    font-size:12px}
  .dva-code{border-radius:14px}
  .dva-code-bar{padding:10px 14px}
  .dva-pre{padding:14px;font-size:12.5px;line-height:1.6}
  .dva-card{border-radius:18px;padding:24px 20px 26px}
  .dva-steps li{grid-template-columns:36px minmax(0,1fr);
    gap:14px;padding-bottom:22px}
  .dva-steps li:not(:last-child)::before{left:17px;top:36px}
  .dva-sn{width:36px;height:36px;font-size:15px}
  .dva-role{grid-column:2;margin-top:12px;justify-self:start}
  .dva-route{border-radius:22px;padding:26px 18px 24px}
  .dva-plate{border-radius:18px;padding:22px 20px}
  .dva-turn{margin-top:clamp(26px,6vw,38px);padding-left:18px;
    font-size:clamp(20px,5.4vw,26px)}
  /* Таблица на телефоне разбирается на строки. Боковой прокрутки здесь
     нет намеренно: самый важный столбец «что произойдёт» стоит последним,
     и при прокрутке он оказывался бы за краем экрана. Названия столбцов
     подставляются подписями из самой разметки. */
  .dva-tablewrap{overflow:visible}
  .dva-table{min-width:0;display:block}
  .dva-table thead{display:none}
  .dva-table tbody,.dva-table tr{display:block}
  .dva-table tr{padding:16px 0;border-bottom:1px solid #f1f1f1}
  .dva-table tr:last-child{border-bottom:0}
  .dva-table td{display:block;border:0;padding:0;font-size:16px}
  /* Доли столбцов сняты явно: у правила с долями вес выше, и без этой
     строки разобранная строка держала ширину в четверть экрана, а слова
     в ней ломались пополам. */
  .dva-table td:first-child,.dva-table td:nth-child(2),
  .dva-table td:last-child{width:auto}
  .dva-table td+td{margin-top:12px}
  .dva-table td[data-l]::before{
    content:attr(data-l);display:block;margin-bottom:3px;
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:11px;
    letter-spacing:.05em;text-transform:uppercase;color:#9aa0aa;
  }
  .dva-table td:last-child{color:var(--dva-ink)}
  .dva-num{font-size:16px}
  .dva-chips li{padding:10px 16px;font-size:15px}
  .dva-help{border-radius:22px;padding:26px 18px 28px}
  .dva-help-btn{width:100%;justify-content:center;padding:14px 18px;
    font-size:12px}
}