/* ══════════════════════════════════════════════════════════════════════
   СТРАНИЦА «ПЛАТЁЖНЫЕ ССЫЛКИ». Свои правила, 13 сентября 2026.
   Файл подключён ПОСЛЕ общего, общий не тронут ни одной строкой.
   Все свои классы с приставкой pl-, поэтому с чужими не пересекаются.

   Устройство страницы задано владельцем: все разделы, кроме первого
   экрана, собраны по одному образцу, взятому у раздела «Что даёт
   мультиэквайринг». Сам образец целиком живёт в общем файле (mq-ask,
   mq-ask-pane, mq-ask-art, mq-ask-card, mq-faq, mq-q) и приходит сюда
   меткой mq-long на теле страницы. Здесь его правила не переписываются
   и не копируются: добавлено только то, чего в образце нет вовсе.

   Своего у страницы три вещи:
     нижний ярус первого экрана, где рисунка нет и место его занимает
       второй абзац;
     набор абзацев внутри белой карточки, потому что в образце в ней
       лежат только раскрытия;
     поведение рисунка на узких экранах.

   Размеров заголовков здесь нет вовсе. Все три уровня приходят из
   общего файла, из раздела единой типографики в его конце. Своих
   кеглей заголовкам страница не задаёт и задавать не должна.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Первый экран. Нижний ярус под волосяной линией ───────────────────
   Перестроен 25 сентября 2026 по просьбе владельца. Было: текст в две
   колонки во всю ширину и кнопка под ними, рисунка не было вовсе, его
   место занимал второй абзац. Стало: устройство принятых страниц, то
   есть текст слева и предмет отдельной колонкой справа, прижатый к
   правому краю. Кнопка с первого экрана снята, на странице остаётся
   одна и она внизу.

   Доля колонки рисунка взята со страниц коннекторов и платёжной
   страницы без изменений. */
.pl-hero-low{margin-top:clamp(22px,3vw,40px);
  padding-top:clamp(18px,2.2vw,30px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(200px,22vw,300px);
  gap:clamp(24px,4vw,64px);align-items:center}
.pl-hero-says{min-width:0}
.pl-hero-says .mh-say{max-width:58ch}
.pl-hero-art{justify-self:end;width:100%;max-width:300px;min-width:0}
.pl-hero-art svg{width:100%;height:auto;display:block}
/* Ниже 900 точек колонки распрямляются: рисунок уходит под текст и
   прижимается влево, как на принятых страницах. */
@media(max-width:900px){
  .pl-hero-low{grid-template-columns:minmax(0,1fr);
    gap:clamp(22px,4vw,32px)}
  .pl-hero-says .mh-say{max-width:78ch}
  .pl-hero-art{justify-self:start;max-width:260px}
}

/* ── Первый раздел полотна ────────────────────────────────────────────
   Стоит сразу под хлебными крошками. Зазор держат сами крошки, поэтому
   ни верхнего поля, ни верхнего отступа разделу не нужно. */
.pl-page .pl-first{margin-top:0;padding-top:0}

/* ── Абзацы внутри белой карточки ─────────────────────────────────────
   В образце внутри карточки лежат только раскрытия. Здесь раскрытия
   стоят лишь там, где текст сам делится на названные пункты. Где текст
   идёт сплошным рассуждением, в карточке лежат абзацы, и названий им
   не придумано. Кегль и межстрочный те же, что у ответов в раскрытиях:
   семнадцать точек, полтора. Вводный абзац девятнадцать. */
.pl-page .pl-ask-p{margin:0 0 clamp(12px,1.2vw,16px);
  font-size:17px;line-height:1.5;color:#5a5e66}
.pl-page .pl-ask-p:last-child{margin-bottom:0}
.pl-page .pl-ask-p.is-lead{font-size:19px;color:#3d424b}

/* Замечание под белой карточкой. Относится ко всему разделу сразу,
   поэтому стоит под карточкой, а не внутри одного из раскрытий.
   Плашка выстроена колонкой с прижимом влево, и без своей ширины абзац
   сжался бы до ширины самой длинной строки. */
.pl-page .pl-ask-after{width:100%;
  margin:clamp(16px,1.8vw,24px) 0 0;
  font-size:17px;line-height:1.5;color:#5a5e66}

/* ── Рисунок раздела ──────────────────────────────────────────────────
   Восемь готовых рисунков, по одному на раздел, подключены картинками:
   сами файлы при этом не тронуты, каждый несёт свои цвета внутри себя.
   Все они вертикальные, два к трём.
   На широком экране подложка рисунка растянута образцом во всю высоту
   раздела и стоит сбоку. Рисунок вписывается в неё целиком: обрезать
   его нельзя, предметы на нём доходят до самого края. */
.pl-page .pl-art{overflow:hidden}
.pl-page .pl-art img{display:block;width:100%;height:100%;min-height:0;
  object-fit:contain}

/* Ниже 861 точки образец кладёт подложку полосой над плашкой и задаёт ей
   высоту от 258 до 330 точек. Для широкой фотографии это верно, а
   вертикальный рисунок два к трём в такой полосе сжимается до узкого
   столбика: на 390 точках от него остаётся 172 точки ширины.
   Поэтому здесь высоту задаёт сам рисунок, как это сделано в образце для
   настоящей фотографии. Ширина взята долей экрана и ограничена сверху,
   чтобы на планшете рисунок не разрастался во весь лист. */
@media(max-width:860px){
  .pl-page .pl-art{height:auto}
  .pl-page .pl-art img{width:clamp(240px,68vw,320px);height:auto;
    max-width:100%}
}

/* ── Белая зона становится листом, как на принятых страницах ──────────
   Было: белое полотно во всю ширину окна, чёрный фон сайта виден только
   в первом экране и в подвале. Владелец 25 сентября 2026 попросил сделать
   как у соседей: белый лист лежит на чёрном, чёрное видно по бокам и
   снизу. Мера взята со страниц коннекторов и платёжной страницы без
   изменений: скругление 34, та же тень, те же поля, на телефоне
   скругление мельче.

   Правило касается только этой страницы. Страница интернет-эквайринга
   делит с ней таблицу стилей, но у неё свой класс, и её вид не меняется. */
.pl-page .mq-white{
  width:calc(100% - 40px);
  max-width:calc(var(--wrap) - 40px);
  /* Снизу своего отступа лист не берёт: зазор до подвала уже задан
     самим подвалом и на образце равен 52 точкам. Замерено 25 сентября. */
  margin:0 auto;
  border-radius:34px;
  box-shadow:0 4px 12px rgba(31,34,41,.15);
  padding:clamp(30px,4vw,62px) 0 clamp(30px,3.6vw,52px);
}
/* Внутренняя обёртка больше не отбивает поля сама: их держит лист. */
.pl-page .mq-white>.container{
  max-width:100%;
  padding:0 clamp(20px,3.4vw,52px);
}
@media (max-width:560px){
  .pl-page .mq-white{
    width:calc(100% - 28px);
    border-radius:24px;
  }
}
