/* ============================================================
   Страницы сервиса: главная, /examples, /partners, /privacy, /privacy-guests.
   Подключается ПОСЛЕ styles.css и берёт из неё всё общее: токены
   (палитра, шрифты, шкалы кеглей и отступов), шапку рубрики, кнопки,
   поля формы, чёрную панель. Здесь — только раскладка страниц сервиса.

   Правила (макет переносится в Figma):
     · только токены темы — ни одного нового цвета, шрифта или кегля;
     · раскладка на flex/grid, без абсолютного позиционирования ради эффекта;
     · текст — только в разметке, не в ::before / ::after.
   Сетка та же, что у свадьбы: 5 колонок на ≥900px, оси A / B / C.
   ============================================================ */

/* ---------- ТОКЕНЫ СТРАНИЦ СЕРВИСА ---------- */
:root {
  /* карточки и строки — тонкая линейка сверху, отступ под ней */
  --svc-rule: 1px solid var(--c-line);
  --svc-shot-w: 360px;          /* ширина скриншота демо: экран телефона */
}

/* шапка фиксирована — содержимое начинается под ней */
.svc main { padding-top: var(--topbar-h); }

.svc-bar__brand {
  font-family: var(--font-display);
  text-decoration: none;
}

.svc a:hover { color: var(--c-steel); }

/* ярлык над заголовком — роль meta */
.svc-eyebrow {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* мелкий смысловой текст — роль note */
.svc-note {
  font-size: var(--fs-note);
  color: var(--c-muted);
}

/* ряд кнопок */
.svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: var(--sp-4) 0 0;
}

/* ---------- ПЕРВЫЙ ЭКРАН ---------- */
.svc-hero { padding-block: var(--sp-6) calc(var(--section-pad) / 2); }

/* роль names: Tenor капсом, самый крупный кегль страницы */
.svc-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-names);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  text-wrap: balance;
}

.svc-hero__foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--svc-rule);
}
.svc-hero__lead { max-width: 34ch; margin: 0; }

@media (min-width: 900px) {
  .svc-hero__foot { padding-left: var(--off-b); }
}

/* ---------- КАРТОЧКИ: 1 → 2 → 3 колонки ---------- */
.svc-cards {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--gap);
}

@media (min-width: 700px) {
  .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .svc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.svc-card {
  padding-top: var(--sp-3);
  border-top: var(--svc-rule);
}

/* роль lead: Tenor */
.svc-card__title,
.svc-step__title,
.home-aside__title,
.home-demo__names {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}

.svc-card p,
.svc-step p { max-width: 46ch; color: var(--c-muted); }

/* ---------- ЧТО ПОЛУЧАЕТ ПАРТНЁР: число слева, условия на оси B ---------- */
.svc-split {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 900px) {
  .svc-split {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .svc-figure { grid-column: 1 / 3; }
  .svc-rows { grid-column: 3 / 6; }
}

.svc-figure {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
}

/* роль names: главное число страницы */
.svc-figure__num {
  font-family: var(--font-display);
  font-size: var(--t-names);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  white-space: nowrap;
}

.svc-figure__note {
  max-width: 30ch;
  font-size: var(--fs-note);
  color: var(--c-muted);
}

/* строки условий: ярлык — текст */
.svc-rows { margin: 0; }

.svc-row {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-top: var(--svc-rule);
}
.svc-row:last-child { border-bottom: var(--svc-rule); }

@media (min-width: 720px) {
  .svc-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--gap);
  }
}

.svc-row__term {
  font-size: var(--fs-meta);
  line-height: var(--lh-body);
  font-weight: var(--fw-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.svc-row__text { margin: 0; }

/* ---------- КАЛЬКУЛЯТОР ---------- */
.svc-calc {
  display: grid;
  gap: var(--sp-4) var(--gap);
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-bar);
  border: var(--svc-rule);
}

@media (min-width: 900px) {
  .svc-calc {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: var(--sp-5) var(--sp-4);
  }
  .svc-calc__input { grid-column: 1 / 3; }
  .svc-calc__result { grid-column: 3 / 6; }
  .svc-calc__caption { grid-column: 3 / 6; }
}

.svc-calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-note);
  font-weight: var(--fw-caps);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* роль accent */
.svc-calc__count {
  font-family: var(--font-display);
  font-size: var(--t-accent);
  line-height: var(--lh-accent);
  letter-spacing: 0;
  color: var(--c-steel);
  font-variant-numeric: tabular-nums;
}

.svc-calc__scale {
  display: flex;
  justify-content: space-between;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-meta);
  color: var(--c-muted);
}

.svc-calc__result {
  display: grid;
  gap: var(--sp-3) var(--gap);
}
@media (min-width: 560px) {
  .svc-calc__result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.svc-calc__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding-top: var(--sp-2);
  border-top: var(--svc-rule);
}

.svc-calc__term {
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* роль title: суммы */
.svc-calc__sum {
  font-family: var(--font-display);
  font-size: var(--t-title);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.svc-calc__caption { margin: 0; }

/* ползунок: линия 1px и круглая ручка, цвета темы */
.svc-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 32px;                 /* зона касания пальцем */
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.svc-range::-webkit-slider-runnable-track { height: 1px; background: var(--c-ink); }
.svc-range::-moz-range-track { height: 1px; background: var(--c-ink); }
.svc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-paper);
}
.svc-range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: var(--c-paper);
}
.svc-range:focus-visible { outline: 2px solid var(--c-steel); outline-offset: 3px; }

/* ---------- ШАГИ: 1 → 2 → 4 колонки ---------- */
.svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--gap);
}

@media (min-width: 700px) {
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .svc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.svc-step {
  padding-top: var(--sp-3);
  border-top: var(--svc-rule);
}

/* номер шага — как номер рубрики */
.svc-step__num {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  font-weight: var(--fw-strong);
  letter-spacing: var(--ls-num);
  color: var(--c-steel);
  font-variant-numeric: tabular-nums;
}

/* ---------- ДЕМО: скриншот телефона и текст на оси B ---------- */
.svc-demo {
  display: grid;
  gap: var(--sp-5) var(--gap);
}

.svc-demo__shot {
  display: block;
  max-width: var(--svc-shot-w);
  border: var(--svc-rule);
}

@media (min-width: 720px) {
  .svc-demo { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}
@media (min-width: 900px) {
  .svc-demo { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .svc-demo__shot { grid-column: 1 / 3; }
  .svc-demo__text { grid-column: 3 / 6; }
}

.svc-demo__text p { max-width: 62ch; }

/* ---------- ЗАЯВКА: чёрная панель, как форма ответа на свадьбе ---------- */
.svc-apply__panel {
  margin-inline: var(--gutter);
  padding-block: var(--sp-6);
  background: var(--c-ink);
  color: var(--c-paper);
}

.svc-apply .h2 { max-width: none; }

.svc-apply__intro {
  margin-bottom: var(--sp-5);
  max-width: 62ch;
  color: var(--c-paper-muted);
}

.svc-apply__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4) var(--sp-5);
  max-width: 860px;
}

@media (min-width: 720px) {
  .svc-apply__form { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .svc-apply__intro,
  .svc-apply__form,
  .svc-apply .rsvp__success { margin-left: var(--off-b); }
  .svc-apply__form { max-width: none; }
}

.svc-consent { align-items: flex-start; margin: 0; }
.svc-consent input { margin-top: 4px; }
.svc-consent a { color: inherit; }

.svc-apply__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
}
.svc-apply__actions .link-ext { margin-right: 0; }
.svc-apply a:hover { color: var(--c-paper-muted); }

/* ============================================================
   ГЛАВНАЯ (views/pages/home.njk) И ВИТРИНА ПРИМЕРОВ (examples.njk)
   ============================================================ */

/* навигация по экранам в шапке — только на широком экране:
   на узком шапке хватает названия, кнопка уходит вниз окна (.cta-bar) */
.svc-nav { display: none; gap: var(--sp-3); }
.svc-nav__link { text-decoration: none; }
@media (min-width: 900px) {
  .svc-nav { display: flex; }
}

/* первый экран — на всю высоту окна: заголовок сверху, лид и кнопки прижаты к низу;
   лид длиннее, чем у партнёров, — колонка шире */
.home-hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--topbar-h));
  padding-block: var(--sp-5);
}
.home-hero .wrap { flex: 1; display: flex; flex-direction: column; }
/* заголовок делит первый экран с телефоном — роль title, а не names (как у партнёров):
   иначе рядом с телефоном он ломается на пять строк и экран не помещается в окно */
.home-hero .svc-hero__title { margin-bottom: var(--sp-5); font-size: var(--t-title); }
.home-hero .svc-hero__foot { margin-top: auto; }
.home-hero .svc-hero__lead { max-width: 46ch; }
.home-hero__facts { margin: var(--sp-3) 0 0; }
/* на узком экране три кнопки первого экрана — во всю ширину, как на панели «Связь»:
   разной длины они стояли лесенкой */
@media (max-width: 559px) {
  .home-hero .svc-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* телефон с примером: экраны сайта сменяются раз в секунду (home.js).
   Снизу — первый кадр картинкой, поверх — два холста, которые home.js
   по очереди проявляет. Всё лежит в одной ячейке сетки.
   На узком экране — по центру под заголовком */
.home-reel {
  display: grid;
  width: clamp(140px, 40vw, 180px);
  margin: 0 auto var(--sp-5);
}
.home-reel__first,
.home-reel__layer {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}
/* список следующих кадров для home.js — не показывается никогда
   (у img в теме display: block, он перебил бы атрибут hidden) */
.home-reel__next { display: none; }
.home-reel__layer { opacity: 0; transition: opacity 0.35s ease; }
.home-reel__layer.is-current { opacity: 1; }

/* шире: текст слева, телефон — в правой колонке на всю высоту экрана;
   на ≥900 px телефон занимает пятую колонку сетки, текст — первые четыре */
@media (min-width: 720px) {
  .home-hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max(200px, calc((100% - 4 * var(--gap)) / 5));
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--gap);
  }
  .home-hero .svc-eyebrow { grid-area: 1 / 1; }
  .home-hero .svc-hero__title { grid-area: 2 / 1; }
  .home-hero .svc-hero__foot { grid-area: 4 / 1; }
  .home-reel { grid-column: 2; grid-row: 1 / 5; align-self: center; width: 100%; margin: 0; }
}
/* лид — от оси A, как заголовок: справа телефон, на оси B лид сжался бы в узкую колонку */
@media (min-width: 900px) {
  .home-hero .svc-hero__foot { padding-left: 0; }
}

/* ---------- ПРИМЕРЫ: тёмная сцена с iPad и лентой телефонов ----------
   Без JavaScript раздел просто тёмный. js/home.js делает его фон прозрачным (is-live)
   и, когда сцена занимает полэкрана, ставит body класс is-dark: страница быстро
   перекрашивается целиком. Высота с запасом — на переходы.
   Номер рубрики считает тот же счётчик, что у .section. */
.home-show {
  counter-increment: sec-num;
  display: flex;
  align-items: center;
  min-height: 140svh;
  padding-block: var(--section-pad);
  background: var(--c-ink);
  color: var(--c-paper);
}
.home-show.is-live { background: transparent; }

/* Переход цвета — быстрый и без серой середины: уходящий текст гаснет сразу,
   приходящий проявляется, когда фон уже почти сменился. Чёрный текст на сером
   промежуточном фоне так не появляется никогда */
body.svc { transition: background-color 0.45s ease; }
body.svc.is-dark { background-color: var(--c-ink); }

.home-hero .wrap,
.home-show + .section { transition: opacity 0.25s ease 0.25s; }
.is-dark .home-hero .wrap,
.is-dark .home-show + .section { opacity: 0; transition-delay: 0s; }

.home-show.is-live .home-show__inner { opacity: 0; transition: opacity 0.25s ease; }
.is-dark .home-show.is-live .home-show__inner { opacity: 1; transition-delay: 0.25s; }
.home-show__inner { width: 100%; }

.home-show__grid {
  display: grid;
  gap: var(--sp-5) var(--gap);
}
@media (min-width: 900px) {
  .home-show__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; }
  .home-device { grid-column: 1 / 4; }
  .home-show__text { grid-column: 4 / 6; }
}

.home-show__text p { color: var(--c-paper-muted); }
.home-show__text .lead { color: var(--c-paper); }
/* вторая кнопка на тёмном — контур цвета бумаги */
.home-show__btn { border-color: var(--c-paper); color: var(--c-paper); }
.home-show__btn:hover { background: var(--c-paper); color: var(--c-ink); }

/* iPad: рамка-картинка (экран в ней прозрачный) поверх сайта.
   Рамка в Figma — 1320 × 940, экран в ней — 1210 × 834 с отступом 55 / 53.
   На низком окне iPad не выше окна: ширина не больше доступной высоты × 1320 / 940. */
.home-device {
  position: relative;
  display: block;
  max-width: calc((100svh - 2 * var(--topbar-h)) * 1.404);
}
.home-device__frame {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}
/* окно экрана — на волосок шире прозрачной дыры: под скруглёнными углами рамки нет щелей */
.home-device__screen {
  position: absolute;
  left: 4.07%;
  top: 5.54%;
  width: 91.86%;
  height: 88.92%;
  overflow: hidden;
  container-type: size;
  background: var(--c-paper);
}

/* сайт в экране — обложка темы, какой её видят на iPad (1210 × 834):
   размеры из ТОКЕНОВ ТЕМЫ, переведённые в доли ширины экрана (1cqw = 12,1 px). Ничего не нажимается */
.home-site {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  color: var(--c-ink);
  pointer-events: none;
}
.home-site__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-site__bar {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.32cqw;                 /* --sp-2 */
  height: 5.29cqw;              /* --topbar-h */
  padding-inline: 4cqw;         /* --wrap-pad */
}
.home-site__item,
.home-site__btn {
  font-size: 0.99cqw;           /* --fs-meta */
  line-height: var(--lh-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.home-site__rule { flex: 1; height: 1px; background: var(--c-line-soft); }
.home-site__btn {
  margin-left: 1.32cqw;
  padding: 0.66cqw 1.98cqw;
  background: var(--c-ink);
  color: var(--c-paper);
}
.home-site__center {
  position: relative;
  grid-row: 2;
  text-align: center;
  font-family: var(--font-display);
}
.home-site__names {
  display: block;
  font-size: 6.95cqw;           /* --t-names */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
}
.home-site__amp { font-size: 0.8em; }
.home-site__date {
  display: block;
  margin-top: 2.88cqw;          /* 1.2em даты */
  font-size: 2.4cqw;            /* --t-lead */
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}
.home-site__foot {
  position: relative;
  grid-row: 3;
  align-self: end;
  margin-inline: 4cqw;
  padding-block: 1.98cqw;       /* --sp-3 */
  border-top: 1px solid var(--c-line-soft);
  font-size: 1.36cqw;           /* body 16,5 px */
}

/* лента телефонов: листается пальцем и тачпадом, по карточке прилипает к оси A;
   выходит за поля .wrap до края окна — видно, что дальше есть ещё */
.home-slider { margin-top: var(--sp-6); }
.home-slider__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.home-slider__title { margin: 0; }
.home-slider__rule { flex: 1; height: 1px; background: var(--c-paper-line); }
.home-slider__nav { display: flex; gap: var(--sp-1); margin: 0; }
.home-slider__nav[hidden] { display: none; }
.home-slider__btn {
  width: 44px;                  /* зона касания */
  height: 44px;
  border: 1px solid var(--c-paper-line);
  background: transparent;
  color: var(--c-paper);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.home-slider__btn:hover:not(:disabled) { border-color: var(--c-paper); }
.home-slider__btn:disabled { opacity: 0.35; cursor: default; }

.home-slider__track {
  list-style: none;
  display: flex;
  gap: var(--sp-3);
  margin: 0 calc(-1 * var(--wrap-pad));
  padding: 0 var(--wrap-pad) var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--wrap-pad);
  scrollbar-width: none;
}
.home-slider__track::-webkit-scrollbar { display: none; }
/* мышью ленту тянут (home.js): рука — «можно тянуть», сжатая — «тянем»;
   пока тянем и пока лента доезжает, прилипание к карточкам выключено */
.home-slider__track { cursor: grab; user-select: none; -webkit-user-select: none; }
.home-slider__track.is-dragging { cursor: grabbing; }
.home-slider__track.is-free { scroll-snap-type: none; }
.home-slide__img { -webkit-user-drag: none; }
.home-slider__track:focus-visible { outline-offset: -2px; }
.home-slide {
  flex: 0 0 clamp(210px, 62vw, 330px);
  scroll-snap-align: start;
}
.home-slide__img { width: 100%; }
.home-slide__caption {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-note);
  color: var(--c-paper-muted);
}

/* шапка и кнопка внизу окна, пока на экране тёмная сцена (класс is-dark у body ставит home.js) */
.svc-bar { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
.is-dark .svc-bar {
  background: var(--c-ink);
  border-bottom-color: var(--c-paper-line);
  color: var(--c-paper);
}
.is-dark .svc-bar .topbar__rule { background: var(--c-paper-line); }
.is-dark .svc-bar .btn--solid,
.is-dark .cta-bar .btn--solid { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-ink); }

/* две кнопки в шапке главной: между ними обычный зазор, а не двойной */
.svc-bar .btn + .btn { margin-left: 0; }
@media (max-width: 1199px) {
  .svc-bar__long { display: none; }
}

/* кнопки внизу окна на телефоне (главная): полоса — только держатель для двух кнопок,
   тень и размеры — у самих кнопок. Прячется вся полоса (is-hidden, main.js) */
@media (max-width: 719px) {
  .home-cta {
    display: flex;
    gap: var(--sp-1);
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .home-cta .btn {
    flex: 1 1 0;
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    text-align: center;
    box-shadow: 0 6px 20px rgba(19, 19, 19, 0.18);
  }
}

/* «Что входит»: подзаголовок группы на оси A, строки — с оси B */
.home-group {
  display: grid;
  gap: var(--sp-2) var(--gap);
  margin-top: var(--sp-5);
}
.home-group__title { margin: 0; }
/* название раздела — смысл, а не ярлык: кегль текста (Ф7), вес — как у вопросов FAQ */
.home-group .svc-row__term {
  font-size: inherit;
  font-weight: var(--fw-strong);
  letter-spacing: 0;
  text-transform: none;
}
@media (min-width: 900px) {
  .home-group { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-group__title { grid-column: 1 / 3; padding-top: var(--sp-3); }
  .home-group__rows { grid-column: 3 / 6; }
}

/* цена: число слева, границы услуги и кнопка — на оси B */
@media (min-width: 900px) {
  .home-price__terms { grid-column: 3 / 6; }
}
.home-price__small { margin: var(--sp-2) 0 0; }

/* «Как мы работаем»: сноска под шагами и «Успеем к вашей дате?» */
.home-how__note { margin: var(--sp-4) 0 0; max-width: 62ch; }

.home-aside {
  display: grid;
  gap: var(--sp-2) var(--gap);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: var(--svc-rule);
}
.home-aside__text { margin: 0; max-width: 62ch; }
@media (min-width: 900px) {
  .home-aside { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-aside__title { grid-column: 1 / 3; }
  .home-aside__text { grid-column: 3 / 6; }
}

/* «Два в одном»: лицо и оборот карточки рядом, доводы — с оси B */
.home-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--gap);
  margin-top: var(--sp-5);
}
.home-card__side { margin: 0; }
.home-card__side img { width: 100%; border: var(--svc-rule); }
.home-card__caption {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-caps);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-muted);
}
.home-points {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 900px) {
  .home-card { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
  .home-points { grid-column: 3 / 6; grid-row: 1; }
}
.home-point {
  padding-block: var(--sp-3);
  border-top: var(--svc-rule);
}
.home-point:last-child { border-bottom: var(--svc-rule); }
.home-point strong { font-weight: var(--fw-strong); }

/* «Кто собирает»: раскладка как у демо (.svc-demo), фото 4:5 */
.home-who__photo {
  display: block;
  width: 100%;
  max-width: var(--svc-shot-w);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (min-width: 900px) {
  .home-who__photo { grid-column: 1 / 3; }
}
/* фото ещё не прислали — пустая рамка того же размера */
.home-who__photo--empty { border: var(--svc-rule); background: var(--c-bar); }

/* связь на чёрной панели: две равные кнопки, крупнее обычных — главное действие страницы */
.home-contact__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}
.home-contact__buttons .btn { padding: var(--sp-3) var(--sp-5); }
.home-contact__hint {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-note);
  color: var(--c-paper-muted);
}
@media (max-width: 559px) {
  .home-contact__buttons .btn { flex: 1 1 100%; text-align: center; }
}
@media (min-width: 900px) {
  .home-contact { margin-left: var(--off-b); }
}

/* витрина примеров: карточки 1 → 2 → 3 колонки */
.home-demos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5) var(--gap);
}
@media (min-width: 700px) {
  .home-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .home-demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.home-demo__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  text-decoration: none;
}
.home-demo__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: var(--sp-2);
}
.home-demo__names { margin: 0; }
.home-demo__date { font-size: var(--fs-note); color: var(--c-muted); }
.home-demo__open { align-self: flex-start; margin-top: var(--sp-2); }
.home-demo__link:hover .home-demo__open { background: var(--c-ink); color: var(--c-paper); }
.home-demos__note { margin-top: var(--sp-5); }

/* ---------- ПОДВАЛ ---------- */
.svc-footer .footer__meta a { color: inherit; }

/* ---------- ТЕКСТ ПОЛИТИКИ ---------- */
.svc-doc h2 {
  margin: var(--sp-5) 0 var(--sp-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
}
.svc-doc ul { margin: 0 0 1em; padding-left: 1.2em; }
.svc-doc li { margin-bottom: var(--sp-1); }