/* ============================================================
   23AG — страницы услуг.

   Базовая типографика, сетка блоков (.block), список ссылок (.svc)
   и карточки работ берутся из css/style.css — того же файла, что
   набирает главную. Здесь только то, чего на главной нет.
   ============================================================ */

/* ── путь наверх ── */
.bs-back {
  display: inline-block;
  font-size: 1.05rem;
  color: inherit;
  opacity: 0.55;
  margin-bottom: 1.6rem;
  text-underline-offset: 4px;
}
.bs-back:hover { opacity: 1; }

/* ── шапка страницы: слева название и подводка, справа схема ──
   Схема стоит там, где она нужнее всего — рядом с первым абзацем,
   а не отдельным разделом ниже. */
.bs-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.6rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-bottom: 2.4rem;
}
.bs-head__l { min-width: 0; }
.bs-head__r {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.6rem;
}

/* Рисунок раздела — тот же, что на карточке услуги, но крупный:
   справа от заголовка пустое место, он его и занимает.
   Кегль выставляет js/ascii-fit.js по фактической ширине колонки. */
.bs-mark {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1.4;
  white-space: pre;
  margin: 0;
  opacity: 0.45;
}

@media (max-width: 900px) {
  .bs-head { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .bs-head__r { justify-content: flex-start; padding-top: 0; }
  .bs-mark { font-size: 0.9rem; }
}

.bs-kicker {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.45;
  margin: 0 0 1rem;
}

.bs-h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.bs-lede {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  margin: 1.2rem 0 0;
  max-width: 46ch;
  opacity: 0.7;
}

/* ── реплика и схема: слева/справа ──
   Реплика утверждает, схема показывает. Пропорция 1 : 1.3 — текст
   получает нормальную меру (около 26 знаков в строке), а схема
   остаётся крупной, но не разъезжается на всю страницу. */
.bs-claim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2.2rem clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: 3rem 0 3.4rem;
  border-top: 2px solid black;
}

.bs-statement {
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  font-weight: bold;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 26ch;
}

.bs-claim__fig { min-width: 0; }

/* Кегль схемы выставляет js/ascii-fit.js по фактической ширине места. */
.bs-claim .bs-ascii { padding-top: 0; }
.bs-claim .bs-caption { margin-top: 1.2rem; }

/* Ниже 1200px правая колонка становится уже 550px, и горизонтальная
   схема упирается в минимальный кегль — там переходим в стопку,
   чтобы схема получила всю ширину. */
@media (max-width: 1200px) {
  .bs-claim {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    padding: 2.4rem 0 2.6rem;
  }
  .bs-statement { max-width: 30ch; }
}

/* ── ASCII-схема: объясняет устройство, а не украшает ── */
.bs-ascii {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.62rem, 1.15vw, 0.85rem);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  padding: 1.6rem 0 0.4rem;
  tab-size: 4;
}
.bs-ascii b { font-weight: bold; }
.bs-ascii i { font-style: normal; opacity: 0.45; }

/* Широкая схема не влезает в телефон и уезжала бы вбок — на узких
   экранах показывается вертикальная версия той же схемы. */
.bs-ascii--narrow { display: none; }
/* Вертикальная версия — только на телефоне: там горизонтальная схема
   ужалась бы до нечитаемого даже с подгонкой кегля. */
@media (max-width: 640px) {
  .bs-ascii--wide { display: none; }
  .bs-ascii--narrow { display: block; }
}

.bs-caption {
  font-size: 0.98rem;
  line-height: 1.5;
  opacity: 0.45;
  margin: 1.1rem 0 0;
  max-width: 62ch;
}

/* ── карточка услуги на хабе ──
   Центр страницы: у каждой услуги свой ASCII-знак, чтобы четыре
   пункта различались взглядом, а не только текстом. */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}

.svc-card {
  display: block;
  padding: 1.6rem 0 1.8rem;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  color: inherit;
  text-decoration: none;
}

/* Все знаки ровно по пять строк, поэтому фиксированная высота держит
   названия карточек на одной линии во всех четырёх ячейках. */
.svc-card__mark {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.4;
  height: calc(5 * 1.4em);
  white-space: pre;
  margin: 0 0 1.2rem;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.svc-card:hover .svc-card__mark { opacity: 1; }

.svc-card__n {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-underline-offset: 5px;
  margin-bottom: 0.5rem;
}
.svc-card:hover .svc-card__n { text-decoration-thickness: 2px; }

.svc-card__d {
  display: block;
  font-size: 1.08rem;
  line-height: 1.5;
  opacity: 0.62;
  margin-bottom: 0.9rem;
  max-width: 40ch;
}

.svc-card__buy {
  display: block;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  opacity: 0.4;
}

@media (max-width: 700px) {
  .svc-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ── перечень: то же, что .svc, но не ссылка ── */
.bs-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.bs-item {
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}
.bs-item__k {
  display: block;
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.bs-item__v {
  display: block;
  font-size: 1.02rem;
  line-height: 1.45;
  opacity: 0.6;
}

/* ── порядок работы ── */
.bs-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.bs-step {
  padding: 1.1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
}
.bs-step__t {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.bs-step__t::before {
  counter-increment: step;
  content: counter(step) ".  ";
  font-weight: normal;
  opacity: 0.35;
  font-size: 0.85em;
}
.bs-step__d {
  font-size: 1.02rem;
  line-height: 1.5;
  opacity: 0.6;
  margin: 0;
}

/* ── спецификация: работы, у которых нет публичной поверхности ──
   Показывать нечего, поэтому показывается устройство: что делает,
   на чём работает, живо ли ещё. */
.form-spec { border-top: 1px solid rgba(0, 0, 0, 0.22); }

.spec-head,
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 12rem) 7rem;
  gap: 0.4rem clamp(1.2rem, 3vw, 2.5rem);
  align-items: baseline;
}

.spec-head {
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}
.spec-head span {
  font-size: 0.9rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.4;
}

.spec-row {
  padding: 1.3rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}
.spec-row:last-child { border-bottom: none; }

.spec-row__name {
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.spec-row__what {
  font-size: 1.02rem;
  line-height: 1.5;
  opacity: 0.62;
  margin: 0;
}
.spec-row__stack,
.spec-row__state {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.45;
}
.spec-row__state--live { opacity: 1; color: #2c8c3e; }

@media (max-width: 1000px) {
  .spec-head { display: none; }
  .spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
}

/* ── условия ── */
.bs-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.2rem, 3vw, 2.5rem);
}
.bs-term { padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.22); }
.bs-term__k {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.45;
  margin: 0 0 0.5rem;
}
.bs-term__v {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0;
}

/* ── что остаётся у клиента ── */
.bs-gets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bs-get {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  font-size: 1.12rem;
  line-height: 1.45;
}
.bs-get::before {
  content: "\2713";
  margin-right: 0.6rem;
  opacity: 0.4;
}

/* ── кому не подходит: честный дисквалификатор ── */
.bs-nofit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bs-nofit li {
  padding: 0.85rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  font-size: 1.08rem;
  line-height: 1.45;
  opacity: 0.62;
}
.bs-nofit li::before {
  content: "\2014";
  margin-right: 0.6rem;
  opacity: 0.6;
}

/* ── вопросы ── */
.bs-qa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.bs-q { padding: 1.1rem 0; border-top: 1px solid rgba(0, 0, 0, 0.22); }
.bs-q__q {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
}
.bs-q__a {
  font-size: 1.02rem;
  line-height: 1.55;
  opacity: 0.65;
  margin: 0;
}

/* ── призыв ── */
.bs-cta {
  padding: 2.6rem 0 2.4rem;
  border-top: 2px solid black;
}
.bs-cta__h {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: bold;
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
}
.bs-cta__p {
  font-size: 1.1rem;
  line-height: 1.55;
  max-width: 54ch;
  margin: 0 0 1.5rem;
  opacity: 0.68;
}
.bs-cta__row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.8rem; align-items: baseline; }
.bs-cta__btn {
  display: inline-block;
  padding: 0.95rem 1.6rem;
  background: black;
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold;
  transition: opacity 0.14s;
}
.bs-cta__btn:hover { opacity: 0.8; }
.bs-cta__alt { font-size: 1.05rem; opacity: 0.6; }
.bs-cta__alt a { color: inherit; }

/* ── подвал ── */
.bs-foot {
  margin-top: 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.98rem;
  opacity: 0.45;
}
.bs-foot a { color: inherit; }

/* ── узкие экраны ── */
@media (max-width: 900px) {
  .bs-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .bs-items,
  .bs-steps,
  .bs-gets,
  .bs-nofit,
  .bs-qa,
  .bs-terms { grid-template-columns: minmax(0, 1fr); }
  .bs-statement { padding: 2rem 0 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-cta__btn { transition: none; }
}