/* =============================================================
   SERVICE PAGES
   /servisy/ and its per-service pages. Layered on direction.css
   (which already owns .dirpage, .crumbs, .dhero, .dsec, .dfaq),
   so only what is unique to paying for a service lives here.

   Prefixed with s- for the same reason the direction classes are:
   styles.css owns short names like .dir and .cur globally.
   ============================================================= */

.svendor {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}

/* =============================================================
   Герой раздела: две колонки в языке главной страницы.

   Правая колонка — слой изображения. Фотография лежит верхним слоем
   фона, под ней марка M на фирменном свечении. Пока файла нет, браузер
   отбрасывает недоступный слой и показывает подложку: страница выглядит
   законченной и до того, как картинка появится, и никакой битой
   иконки изображения не возникает. Скрипта для этого не нужно.
   ============================================================= */
.shero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,620px);
  gap: clamp(24px,3.4vw,52px); align-items: center;
  /* Экран за вычетом шапки: .dirpage уже отступает на её высоту, поэтому
     остаток — ровно видимая часть. align-content раскладывает свободное
     место поровну сверху и снизу, и блок встаёт по центру этого остатка.
     min-height, а не height: на телефоне столбец выше экрана, и жёсткая
     высота его бы обрезала. */
  min-height: calc(100dvh - var(--hdr-h));
  align-content: center;
}

.shero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px,2vw,22px); }
/* размер и трекинг ровно как у заголовка главной («обмен usdt / без сюрпризов») */
.shero__h1 {
  display: grid;
  font-size: clamp(2.6rem, 5.7vw, 5.125rem);
  font-weight: 600; letter-spacing: -.0415em; line-height: 1.04;
}
.shero__h1 .ln--accent { color: var(--accent); padding-bottom: .04em; }
.shero__lead { font-size: clamp(1rem,1.2vw,1.06rem); line-height: 1.62; color: var(--ink-2); max-width: 34em; }
/* кнопки держатся в строку: перенос делал из пары действий лесенку */
.shero__cta { display: flex; flex-wrap: nowrap; gap: 12px; }
.shero__cta .btn { white-space: nowrap; }
.shero .dtags { margin-top: 2px; }

/* Живая сцена вместо картинки: логотипы вокруг знака покачиваются и тянутся
   за курсором, поведение у каждой своё — см. servisy.js. Статичный кадр
   такого не умеет, поэтому панель стала разметкой.
   Свечение — фоном самой панели: отдельный слой вылезал за окно и давал
   горизонтальную прокрутку, а у псевдоэлемента нет своего бокса, так что
   обход элементов его не находил.                                        */
.shero__art {
  position: relative; aspect-ratio: 1 / 1;
  container-type: size;
  /* Панель прижата к правому краю колонки, поэтому сдвиг вправо уводит её
     в поле страницы. Величина взята с запасом от поля --gut, иначе сдвиг
     растянет прокручиваемую область: трансформация её тоже расширяет. */
  transform: translateX(clamp(0px, 2vw, 40px));
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      color-mix(in srgb, var(--accent) 9%, transparent) 34%,
      transparent 70%) 50% 50% / 108% 108% no-repeat;
}

/* Знак всегда поверх плиток: при уводе курсором плитка заходит на него, и
   логотип, накрывающий марку, читается ошибкой вёрстки. Порядок задан
   z-index, а не порядком в разметке — плитки идут после знака, чтобы к ним
   не приходилось возвращаться при правке сцены. */
.sglass {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 2;
  width: 52cqw; height: auto; display: block;
  filter: drop-shadow(0 0 7cqw color-mix(in srgb, var(--accent) 42%, transparent));
  pointer-events: none; user-select: none;
}

/* Подкладка нарочно почти незаметна: плитки не должны спорить с логотипами
   и со знаком. Держит форму тонкая грань, а не заливка. */
.sfloat {
  position: absolute; z-index: 1; left: var(--x); top: var(--y);
  width: 15.5cqw; height: 15.5cqw;
  margin: calc(-7.75cqw * var(--k)) 0 0 calc(-7.75cqw * var(--k));
  scale: var(--k);
  display: grid; place-items: center;
  border-radius: 3.6cqw;
  background: rgba(255,255,255,.028);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
  will-change: transform;
  pointer-events: none;
}
.sfloat .bmark { --bh: 7cqw; }

/* ---------- пара знаков в закрывающем блоке ----------
   На странице сервиса рядом с маркой Montana стоит знак самого сервиса:
   слева тот, кто платит, справа тот, кому. Кружок у обоих одинаковый и
   тёмный — логотипы сервисов нарисованы под тёмный фон, на белом листе
   половина из них просто исчезла бы. */
.close__lock { display: inline-flex; align-items: center; gap: 20px; }
.close__lock .close__mark { width: 66px; height: 66px; }
/* только марка Montana: у знака сервиса свои пропорции, и общий размер
   раздавил бы их все в один прямоугольник 34×22 */
.close__lock .close__mark:not(.close__mark--svc) svg { width: 34px; height: 22px; }
/* styles.css задаёт .close__mark svg { width:38px; height:25px } под марку
   Montana; знак сервиса это правило тоже ловило и плющило все логотипы в один
   прямоугольник. Возвращаем ему собственные пропорции и оптический размер. */
.close__mark--svc { --bh: 30px; }
.close__mark--svc svg.bmark {
  display: block;
  width: auto; height: calc(var(--bh) * var(--s, 1));
}
/* Крупный и тонкий, в цвет самих кружков (#0A0A0A из .close__mark в
   styles.css). Насыщенное начертание на белом листе спорило бы со знаками,
   а мелкий крестик терялся между ними. */
.close__x {
  font-size: 68px; line-height: 1; font-weight: 100; color: #0A0A0A;
  /* у знака свои боковые полуапроши: с ростом кегля они растут вместе с ним
     и разводят кружки сильнее, чем нужно — снимаем их отрицательным полем */
  margin-inline: -6px;
}

@media (max-width: 1120px) {
  .shero { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .shero__art { transform: none; }   /* в один столбец панель по центру */
  .shero__art { max-width: 540px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .shero__cta { width: 100%; }
  .shero__cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}

/* =============================================================
   Разделение по смыслу.

   На странице живут три разных типа содержимого: шаг процесса,
   сервис (единственное, что кликается) и текстовое преимущество.
   Раньше все три были одинаковыми тёмными прямоугольниками, и
   страница читалась как семь полос одного и того же — нельзя было
   понять ни границы категорий, ни что вообще нажимается.

   Теперь тип задаётся формой, а не украшением:
     шаг         — лента с нумерацией, поверхности нет
     сервис      — единственная карточка, с явным «оплатить →»
     преимущество— строка списка с разделителем, поверхности нет
   ============================================================= */

/* ---------- шаги: последовательность, а не четыре объекта ---------- */
.ssteps {
  --sgap: clamp(18px,2.4vw,30px);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--sgap);
  padding-top: 4px;
  overflow: hidden;          /* срезает вынос линии за последней колонкой */
}
.ssteps li { position: relative; padding-top: 26px; }
/* Общая направляющая с засечками шагов. Линия каждой колонки вынесена вправо
   на величину зазора и перекрывает его: иначе направляющая рвётся на четыре
   отрезка и перестаёт читаться одной линией. У последней колонки вынос
   уходит за край и срезается overflow выше. */
.ssteps li::before {
  content: ""; position: absolute; top: 0;
  left: 0; right: calc(-1 * var(--sgap));
  height: 1px; background: var(--line);
}
.ssteps li::after {
  content: ""; position: absolute; left: 0; top: -2px;
  width: 5px; height: 5px; border-radius: 3px; background: var(--accent);
}
.sstep__n { font-family: var(--fm); font-size: 12px; font-weight: 600; color: var(--accent); }
.ssteps h3 { margin-top: 12px; font-size: 1.08rem; font-weight: 600; letter-spacing: -.03em; }
.ssteps p { margin-top: 10px; font-size: .88rem; line-height: 1.6; color: var(--ink-3); }

/* ---------- категория: своя колонка-заголовок ----------
   Заголовок держится сбоку и липнет при прокрутке своих карточек: пока вы
   смотрите на Spotify, слева видно, что это «медиа и игры». Это и есть
   граница категории — раньше её обозначал только заголовок в пустоте.  */
.scatsec {
  display: grid; grid-template-columns: minmax(0,300px) minmax(0,1fr);
  gap: clamp(24px,4vw,56px);
  scroll-margin-top: calc(var(--hdr-h) + 20px);
}
/* черта отделяет категорию от предыдущей: воздуха одного мало, чтобы
   уверенно сказать, где кончается одна группа и начинается другая */
.scatsec + .scatsec { border-top: 1px solid var(--line); }
.scat { position: sticky; top: calc(var(--hdr-h) + 28px); align-self: start; }
.scat__ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 23px; margin-bottom: 18px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent); font-size: 20px;
}
.scat .h2 { margin-bottom: 10px; font-size: clamp(1.5rem,2.3vw,1.95rem); line-height: 1.1; }
.scat__lead { font-size: .93rem; line-height: 1.6; color: var(--ink-3); }
.scat__count {
  margin-top: 18px; display: inline-block;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--bg-2); font-family: var(--fm); font-size: 12px; color: var(--ink-3);
}

/* ---------- карточки сервисов: единственная кликабельная сущность ---------- */
/* Четыре колонки: в категории четыре сервиса, поэтому ряд заполняется
   целиком, а карточка получается вертикальной. На двух колонках она была
   вдвое шире и читалась как строка списка, а не как карточка. */
.scards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
/* Фон — $mtn-surface-2 из макета (#1C1C1E, наш --bg-2), без обводки.
   Приподнимает карточку сама заливка, поэтому грань не нужна. */
.scard {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 250px;                 /* держит вертикальную пропорцию */
  background: var(--bg-2); border-radius: 22px; padding: 22px;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.scard:hover, .scard:focus-visible {
  background: var(--bg-3); transform: translateY(-2px);
}
.scard__name { font-size: 1.05rem; font-weight: 600; letter-spacing: -.025em; }
.scard__about { font-size: .85rem; line-height: 1.55; color: var(--ink-3); }
/* признак ссылки: без него пятнадцать карточек выглядят как справка */
.scard__go {
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 500; color: var(--ink-3);
  transition: color .2s var(--ease);
}
.scard__go .i { font-size: 13px; transition: transform .2s var(--ease); }
.scard:hover .scard__go, .scard:focus-visible .scard__go { color: var(--accent); }
.scard:hover .scard__go .i { transform: translate(2px,-2px); }

/* ---------- brand marks ----------
   Базовый .bmark лежит в styles.css: марки нужны и на лендинге, а он грузит
   только его. Цвет — в самих контурах. Здесь только обвязка раздела.       */
.scard__logo { display: flex; align-items: center; min-height: 30px; margin-bottom: 2px; --bh: 25px; }

/* шапка страницы сервиса: та же марка крупнее, в одну строку с категорией */
.sbrand { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; min-height: 44px; }
.sbrand .svendor { margin-bottom: 0; }
.sbrand__logo { display: flex; align-items: center; --bh: 36px; }

/* оговорка о товарных знаках */

/* ---------- преимущества: текст, а не объекты ----------
   Карточками они спорили с карточками сервисов за одно и то же внимание,
   хотя никуда не ведут. Теперь это список с разделителями.              */
.swhys {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 clamp(28px,4vw,56px);
}
.swhy {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.swhy .i { flex: none; margin-top: 2px; font-size: 19px; color: var(--accent); }
.swhy h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.025em; }
.swhy p { margin-top: 9px; font-size: .88rem; line-height: 1.62; color: var(--ink-3); }

/* ---------- воздух между блоками раздела ----------
   Значения перекрывают общий .dsec из direction.css: там ритм рассчитан на
   страницу направления, которая короче и плотнее. Здесь блоков вдвое больше,
   и на прежнем шаге они шли сплошным потоком.                              */
/* ---------- один шаг между блоками ----------
   До этого ритм задавали три источника с разными значениями: секции раздела,
   блок вопросов со своим большим отступом и закрывающий блок вовсе без
   верхнего. Замер давал 168, 116, 170, 236 и 0 — каждая пара по-своему.
   Теперь шаг один, а чужие отступы гасятся здесь же.                      */
.dirpage {
  --step: clamp(56px, 7vw, 96px);
}
.dirpage .dsec,
.scatsec        { padding-top: var(--step); }
.dirpage .dhero { padding-bottom: 0; }        /* шаг задаёт следующий блок */
.dirpage .faq   { padding: var(--step) 0 0; } /* свой отступ .faq тут лишний */
.dirpage .close { padding: var(--step) 0 0; } /* верхнего у него не было вовсе */
/* между категориями шаг полуторный — там ещё и черта */
.scatsec + .scatsec { margin-top: calc(var(--step) * .55); }

/* Закрывающий блок живёт в styles.css (.close/.sheet) — тот же, что на главной.
   Здесь только плашка в шапке страницы сервиса: она меньше и стоит в потоке,
   поэтому своим классом, а не вариантом закрывающего блока. */
.spay {
  margin-top: 30px;
  background:
    radial-gradient(80% 130% at 50% 100%, rgba(201,166,242,.5) 0%, rgba(201,166,242,0) 100%),
    #FFFFFF;
  color: #0A0A0A; border-radius: 34px;
  padding: clamp(24px,3vw,34px);
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
}
/* трекинг слабее, чем у крупных заголовков: тут кегль небольшой, и плотная
   посадка на белом листе читается тяжелее */
.spay h2 { font-size: clamp(1.15rem,2.2vw,1.5rem); font-weight: 600; letter-spacing: -.012em; line-height: 1.1; }
.spay p { margin-top: 8px; font-size: clamp(.95rem,1.3vw,1.05rem); line-height: 1.6; color: #8E8E93; max-width: 46ch; }
.spay__btns { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1080px) {
  /* колонка-заголовок перестаёт помещаться — раскладываем в один поток,
     но линию над карточками оставляем: она и держит границу категории */
  .scatsec { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .scat { position: static; }
  .scat__count { display: inline-block; }
}
@media (max-width: 1080px) {
  .scards { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .spay { flex-direction: column; align-items: flex-start; }
  .ssteps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .swhys { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 700px) {
  .scards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  /* на телефоне две колонки сохраняют вертикальность карточки;
     одна колонка растянула бы её обратно в горизонтальную */
  .scards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .scard { min-height: 208px; padding: 16px; border-radius: 20px; }
  .scard__name { font-size: .95rem; }
  .scard__about { font-size: .8rem; }
  .ssteps { grid-template-columns: minmax(0,1fr); gap: 0; }
  .ssteps li { padding-bottom: 22px; }
}
@media (pointer: coarse) {
  .scard { min-height: 44px; }
}