/* ═══════════════════════════════════════════════════════════════
   /support/ — лендинг «Аутсорсинг поддержки пользователей»
   Только то, чего нет в landing.css: герой с фото «разрезом»,
   номер в pain-card, блоки v2 (обращения, как работает, специалист),
   кейс-вставка, шкала моделей, метрики.
   Все значения — токены tokens.css.
═══════════════════════════════════════════════════════════════ */

/* ── 01 Герой: «разрез» ───────────────────────────────────────
   Текст по краю контейнера, фото уходит под правый край экрана,
   скругление только со стороны текста. ≤980 — фото шапкой над текстом. */
.l-page .sp-hero {
  --sp-edge: max(var(--container-padding), calc((100vw - var(--container)) / 2 + var(--container-padding)));
  --sp-text: min(520px, 42vw);
  display: grid; grid-template-columns: calc(var(--sp-edge) + var(--sp-text)) minmax(0, 1fr);
  align-items: center; padding: 48px 0; overflow-x: clip;
}
.l-page .sp-hero__text { min-width: 0; padding-left: var(--sp-edge); display: flex; flex-direction: column; align-items: flex-start; }
/* Метка входит в H1 ради запроса «аутсорсинг техподдержки», вид прежний: метка сверху, заголовок блоком под ней */
.l-page .sp-hero__h1 { margin: 0; font: inherit; }
.l-page .sp-hero__h1 .hero__title { display: block; }
.l-page .sp-hero .sp-hero__title { font-size: var(--text-h2); margin-bottom: 36px; text-wrap: balance; }
.l-page .sp-hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.l-page .sp-hero__price-num { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700; line-height: 1; letter-spacing: -0.5px; color: var(--coral); white-space: nowrap; }
.l-page .sp-hero__price-per { font-size: var(--text-md); color: var(--on-dark-1); }
.l-page .sp-hero__sub { margin: 0 0 32px; max-width: 420px; font-size: var(--text-md); line-height: 1.5; color: var(--on-dark-1); text-wrap: pretty; }
.l-page .sp-hero__photo {
  margin: 0 0 0 64px; overflow: hidden; border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  height: clamp(360px, calc((100vw - var(--sp-edge) - var(--sp-text) - 64px) / 1.3), 560px);
}
.l-page .sp-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
@media (max-width: 980px) {
  .l-page .sp-hero { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .l-page .sp-hero__text { padding: 40px var(--container-padding) 56px; }
  .l-page .sp-hero__photo { order: -1; margin: 0; height: min(53vw, 420px); border-radius: 0; }
  .l-page .sp-hero__photo img { object-position: 50% 28%; }
}
@media (max-width: 640px) {
  .l-page .sp-hero__text { padding: 24px var(--container-padding) 40px; }
  .l-page .sp-hero .sp-hero__title { font-size: var(--text-statement); text-transform: none; letter-spacing: -0.3px; line-height: 1.15; margin-bottom: 20px; }
  .l-page .sp-hero__sub { font-size: var(--text-base); margin-bottom: 20px; }
  .l-page .sp-hero .hero__actions { align-self: stretch; }
  .l-page .sp-hero .btn-primary { width: 100%; justify-content: center; text-align: center; }
}

/* ── 03 Какие обращения ───────────────────────────────────── */
.l-page .sp-tasks__lead { max-width: 760px; text-wrap: balance; }
.l-page .sp-tasks__grid { row-gap: 48px; }
.l-page .sp-tasks__note { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.l-page .sp-tasks__note-main { margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--text-primary); text-wrap: pretty; }
.l-page .sp-tasks__note-sub { margin: 0; font-size: var(--text-base); line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
@media (max-width: 640px) { .l-page .sp-tasks__note { margin-top: 40px; } }

/* ── 04 Где поддержка съедает деньги ───────────────────────── */
.l-page .sp-pain-body { padding: 0; }
.sp-pain-num { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.sp-pain-num span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px;
  padding: 0 10px; box-sizing: border-box; border-radius: var(--radius-pill);
  background: var(--yellow); color: var(--yellow-ink); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1;
}

/* ── 05 Как работает ─────────────────────────────────────── */
.sp-shot { display: block; width: 100%; height: auto; }
.l-page .sp-how .features-alt__content p { margin-bottom: 0; }
.l-page .sp-how .sp-callout { padding: var(--gap-lg) 0 0; }
@media (max-width: 640px) { .l-page .sp-how .sp-callout { padding-top: var(--gap-sm); } }

/* ── 06 Специалист, а не скрипт ──────────────────────────── */
.l-page .sp-people { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.l-page .sp-people__photo { margin: 0; height: 600px; border-radius: var(--radius-lg); overflow: hidden; background: var(--beige); }
.l-page .sp-people__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.l-page .sp-people__head { margin-bottom: 40px; }
.l-page .sp-people__head .l-title { text-wrap: balance; }
.l-page .sp-people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
.l-page .sp-people__grid .feature-card { display: flex; flex-direction: column; gap: 12px; }
.l-page .sp-people__grid .feature-card__title, .l-page .sp-people__grid .feature-card__text { margin: 0; }
@media (max-width: 980px) {
  .l-page .sp-people { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .l-page .sp-people__photo { height: 420px; }
  .l-page .sp-people__photo img { object-position: 50% 24%; }
}
@media (max-width: 640px) {
  .l-page .sp-people__photo { height: 280px; }
  .l-page .sp-people__head { margin-bottom: 28px; }
  .l-page .sp-people__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── 07 Кейс Кантаты ───────────────────────────────────────── */
.l-page .sp-case-head { display: flex; flex-direction: row; align-items: center; gap: 40px; }
.sp-case-logo { display: block; flex: 0 0 auto; width: 150px; height: auto; }
.sp-case-divider { flex: 0 0 1px; align-self: stretch; background: var(--border-dark-strong); }
.l-page .sp-case-title { flex: 1; min-width: 0; max-width: 820px; text-wrap: balance; }
.sp-case-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.sp-case-story { display: flex; flex-direction: column; gap: 32px; }
.sp-case-text { font-size: var(--text-md); color: var(--on-dark-1); line-height: 1.65; }
.sp-case-metric { padding: 20px 0; border-bottom: 1px solid var(--border-dark-strong); }
.sp-case-metric:last-child { padding-bottom: 0; border-bottom: 0; }
.sp-case-metric__num { font-family: var(--font-display); font-size: var(--text-h2); color: var(--coral); text-transform: uppercase; line-height: 1; }
.sp-case-metric__cap { font-size: var(--text-caption); color: var(--on-dark-2); margin-top: 8px; }

.l-page .sp-case-link--narrow { display: none; }

@media (max-width: 980px) {
  .l-page .sp-case-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sp-case-divider { display: none; }
  .sp-case-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* На мобиле ссылка на кейс — после метрик, а не между рассказом и результатом */
  .l-page .sp-case-link--wide { display: none; }
  .l-page .sp-case-link--narrow { display: inline-flex; justify-self: start; }
}

/* ── 08 Модели сотрудничества ──────────────────────────────── */
.l-page .sp-model { display: flex; flex-direction: column; gap: 10px; }
.sp-scale { display: flex; gap: 4px; }
.sp-scale span { width: 28px; height: 4px; border-radius: 2px; background: var(--border); }
.sp-scale span.is-on { background: var(--navy); }
.l-page .sp-model .feature-card__title { margin: 8px 0 0; }
.sp-model__take { font-size: var(--text-sm); font-weight: 600; color: var(--coral-ink); line-height: 1.4; }

.l-page .sp-metrics { margin-top: var(--gap-md); border-top: 1px solid var(--border); }
.sp-metrics__grid {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); row-gap: 12px; column-gap: 24px;
  padding-bottom: 24px; font-size: var(--text-base); line-height: 1.5; hyphens: auto;
}
.sp-metrics__term { font-weight: 600; color: var(--navy); }
.sp-metrics__desc { color: var(--text-secondary); }
@media (max-width: 640px) { .sp-metrics__grid { grid-template-columns: 132px minmax(0, 1fr); } }

/* Подпись про смену подрядчика: линия сверху вместе с линией над метриками обрамляет раскрывающийся блок */
.l-page .sp-models-note { margin: 0; padding-top: var(--gap-md); border-top: 1px solid var(--border); font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.l-page .sp-models-note strong { font-weight: 600; color: var(--navy); }
.sp-models-cta { display: flex; justify-content: center; margin-top: var(--space-head); }

/* ── 10 Форма ──────────────────────────────────────────────── */
.l-page .sp-form-head { margin-bottom: 0; }
.l-page .sp-form-head .l-title { text-wrap: balance; }
.l-page .sp-form-trust { margin-top: 32px; }
@media (max-width: 980px) { .l-page .sp-form-trust { display: none; } }

/* Белый текст на коралловой кнопке — как на остальных лендингах (см. DS-updates) */
.l-page .sp-hero .btn-primary, .l-page .sp-models-cta .btn-primary,
.l-page .sp-hero .btn-primary:hover, .l-page .sp-models-cta .btn-primary:hover { color: #fff; }