/* ============================================================
   Вчасно.Бізнес — SUBMARKET
   Блоки сторінок ПІД-РИНКІВ (/business/<market>/<submarket>/):
   барбершоп, перукарня, манікюр… Каркас — за SEO-ТЗ під-ринку
   (хіро → пропозиція → ситуації → можливості → демо → застосунок →
   довіра → кроки → тарифи → перехід → FAQ → фінальна CTA → статті).
   Спирається на tokens.css + main.css + markets.css. Підключати
   ПІСЛЯ markets.css (і pricing.css, якщо є блок тарифів).

   КОЛЬОРИ — лише з палітри tokens.css (acid + purple + ink/сірі).
   Жодних «нішевих» кольорів і символіки під конкретний під-ринок:
   каркас має однаково підходити всім під-ринкам. Токени --sm-*
   нижче — лише аліаси палітри, щоб акцент блоків правився в одному місці.
   ============================================================ */

:root {
  --sm-accent: var(--pink);
  --sm-accent-ink: var(--pink-hover);           /* читабельний текст на світлому */
  --sm-accent-soft: var(--pink-glow-soft);      /* світла заливка */
  --sm-accent-glow: var(--pink-glow);           /* сяйво на темному */
  --sm-accent-on-dark: var(--acid);             /* іконки/деталі на темному тлі */
}

/* ============================================================
   SHARED — заголовки секцій, ритм, утиліти
   ============================================================ */
.sm-section {
  padding-block: clamp(var(--space-10), 7vw, var(--space-16));
  background: var(--white);
}
.sm-section--soft { background: var(--color-surface-2); }
.sm-section--dark {
  position: relative;
  overflow: hidden;
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
}
.sm-section--dark > .container { position: relative; z-index: 1; }

.sm-head {
  max-width: 44rem;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-10));
}
.sm-head--center {
  margin-inline: auto;
  text-align: center;
}
.sm-h2 {
  position: relative;     /* контейнер для .highlight::before */
  isolation: isolate;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}
.sm-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
  margin: 0;
}
/* Заголовок ліворуч → підпис праворуч (патерн .features__header з головної):
   2/3 — заголовок, 1/3 — підпис, підпис трохи опущений до першого рядка H2.
   Правило сторінки під-ринку: будь-який НЕцентрований заголовок секції —
   у такій розкладці. ≤900px — стек. */
.sm-head--split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: start;
  max-width: none;
}
.sm-head--split > :first-child { margin: 0; }
.sm-head--split > :last-child { margin: 0; padding-top: .3em; }
@media (max-width: 900px) {
  .sm-head--split { grid-template-columns: 1fr; }
  .sm-head--split > :last-child { padding-top: 0; }
}
.sm-section--dark .sm-h2 { color: var(--color-on-dark); }
/* фраза, що має лишатись одним рядком (на телефоні — переноситься звично) */
@media (min-width: 561px) { .sm-nowrap { white-space: nowrap; } }
.sm-section--dark .sm-sub { color: var(--color-on-dark-muted); }

/* іконка-чип у КАРТКАХ (не біля заголовків секцій) */
.sm-ico {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acid);
  color: var(--ink);
}
.sm-ico--accent { background: var(--sm-accent-soft); color: var(--sm-accent-ink); }
.sm-ico--ink { background: var(--ink); color: var(--acid); }

/* список із галочками */
.sm-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.sm-checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  line-height: 1.45;
}
.sm-checks li::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--acid);
}

/* ============================================================
   PLACEHOLDER — заглушка під графіку від дизайнера.
   Видима на сторінці навмисно: підпис = ТЗ для дизайнера
   (що на екрані, розмір, формат, alt). Після заміни на <img> —
   блок прибрати.
   ============================================================ */
.sm-ph {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ph-ratio, 16 / 10);
  margin: 0;
  border: 2px dashed var(--sm-accent);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, var(--sm-accent-soft) 0 14px, transparent 14px 28px),
    var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  overflow: hidden;
}
.sm-ph__inner {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-md);
}
.sm-ph__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sm-accent-ink);
}
.sm-ph__title {
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-snug);
  margin: 0;
}
.sm-ph__spec {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.sm-section--dark .sm-ph {
  background:
    repeating-linear-gradient(135deg, var(--on-dark-06) 0 14px, transparent 14px 28px),
    var(--ink-2b);
}

/* ============================================================
   1. HERO — темний, текст зліва, «кабінет + телефон» справа
   ============================================================ */
.sm-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 720px 520px at 0% 0%, var(--acid-glow-soft) 0%, transparent 62%),
    radial-gradient(ellipse 760px 560px at 100% 100%, rgba(131, 65, 193, .55) 0%, transparent 60%),
    var(--color-dark-bg);
  color: var(--color-on-dark);
  padding-block: clamp(var(--space-8), 6vw, var(--space-12));
}
.sm-hero__inner {
  display: grid;
  /* картинка — ширша колонка, але в межах сітки (правий край = край контейнера) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(var(--space-5), 3vw, var(--space-8));
}
.sm-hero__content { max-width: 36rem; }

/* хлібні крихти на темному */
.sm-hero .breadcrumb__list,
.sm-hero .breadcrumb a,
.sm-hero .breadcrumb__list > li:not(:last-child)::after { color: var(--color-on-dark-muted); }
.sm-hero .breadcrumb a:hover,
.sm-hero .breadcrumb [aria-current="page"] { color: var(--color-on-dark); }

.sm-hero__title {
  position: relative;
  isolation: isolate;
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);   /* трохи менше --fs-h1: «для барбершопу» має влазити в один рядок колонки */
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-dark);
  text-wrap: balance;
  margin: 0 0 clamp(var(--space-4), 2vw, var(--space-5));
}
.sm-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-on-dark-muted);
  margin: 0 0 var(--space-6);
}
.sm-hero__perks {
  list-style: none;
  margin: 0 0 clamp(var(--space-6), 3vw, var(--space-8));
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.sm-hero__perks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--fw-medium);
  color: var(--color-on-dark);
  line-height: 1.35;
}
.sm-hero__perk-ico {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--on-dark-08);
  border: 1px solid var(--on-dark-10);
  color: var(--sm-accent-on-dark);
}
.sm-hero .cta-note { color: var(--color-on-dark-muted); }

/* media: одне зведене зображення від дизайнера (телефон + кабінет + об'єкт ніші).
   Прозорий фон, тож лягає на темне хіро без підкладки. */
.sm-hero__media { position: relative; }
.sm-hero__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}
/* десктоп: картинка трохи (16–48px) заходить за правий край сітки */
@media (min-width: 961px) {
  .sm-hero__img {
    width: calc(100% + clamp(16px, 3vw, 48px));
    max-width: none;
  }
}

@media (max-width: 960px) {
  .sm-hero__inner { grid-template-columns: 1fr; }
  .sm-hero__content { max-width: 40rem; }
  .sm-hero__media { max-width: 760px; width: 100%; justify-self: center; }
}

/* ============================================================
   2. OFFER — «Безкоштовний доступ»: текст + «чек» з умовами
   ============================================================ */
.sm-offer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, var(--space-12));
  align-items: center;
  max-width: 1040px;
  margin-inline: auto;
}
.sm-offer__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink);
  font-weight: var(--fw-medium);
  text-wrap: pretty;
  margin: 0 0 var(--space-6);
}
.sm-offer__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-4);
}
/* «Що входить» — компактні чипи замість довгого списку */
.sm-offer__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sm-offer__chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px 7px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--ink);
}
.sm-offer__chips li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--acid);
}
.sm-offer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);   /* зона натиску ≥ 44px, зокрема на телефоні */
  font-weight: var(--fw-semibold);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--acid);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.sm-offer__link:hover { text-decoration-color: var(--ink); }
.sm-offer__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
}

/* «чек» — паперова стрічка з зубчастим краєм */
.sm-receipt {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-6) var(--space-8);
  font-variant-numeric: tabular-nums;
  transform: rotate(1.2deg);
}
.sm-receipt::after {           /* зубчастий нижній край */
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -12px;
  height: 12px;
  background:
    linear-gradient(-45deg, transparent 8px, var(--white) 0) 0 0 / 16px 12px repeat-x,
    linear-gradient(45deg, transparent 8px, var(--white) 0) 0 0 / 16px 12px repeat-x;
  filter: drop-shadow(0 4px 3px rgba(14, 14, 14, .06));
}
.sm-receipt__head {
  text-align: center;
  display: grid;
  gap: 2px;
  padding-bottom: var(--space-4);
  border-bottom: 1px dashed var(--on-light-10);
}
.sm-receipt__brand { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.15rem; }
.sm-receipt__meta { font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.sm-receipt__rows {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0;
  display: grid;
  gap: var(--space-3);
  border-bottom: 1px dashed var(--on-light-10);
}
.sm-receipt__rows li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.sm-receipt__rows li span:first-child { color: var(--ink); }
.sm-receipt__rows li::after { content: none; }
.sm-receipt__dots { flex: 1; border-bottom: 1px dotted var(--on-light-10); transform: translateY(-3px); min-width: 12px; }
.sm-receipt__rows li span:last-child { font-weight: var(--fw-semibold); white-space: nowrap; }
.sm-receipt__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-4);
  font-weight: var(--fw-bold);
}
.sm-receipt__mark {             /* акцент значення: acid-маркер */
  background: var(--acid);
  border-radius: 6px;
  padding: 1px 8px;
}
.sm-receipt__off {              /* знижка: фіолетова плашка */
  background: var(--pink);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 1px 10px;
}
.sm-receipt__total strong {
  position: relative;           /* контейнер для .highlight::before */
  isolation: isolate;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--fw-black);
  line-height: 1;
}
.sm-receipt__note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}
.sm-receipt__stamp {
  position: absolute;
  top: 18px;
  right: -14px;
  transform: rotate(10deg);
  background: var(--acid);
  color: var(--ink);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  box-shadow: var(--shadow-acid);
}

@media (max-width: 860px) {
  .sm-offer__inner { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 560px) {
  .sm-offer__cta { flex-direction: column; }
  .sm-offer__cta .btn { width: 100%; }
}
@media (max-width: 560px) {
  .sm-receipt { transform: none; padding: var(--space-5) var(--space-5) var(--space-6); }
  .sm-receipt__stamp { right: 8px; top: -14px; }
}

/* ============================================================
   3. PAINS — «Знайомі ситуації»: проблема → рішення
   ============================================================ */
.sm-pains__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.sm-pain {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sm-pain__top { display: flex; align-items: flex-start; gap: var(--space-4); }
.sm-pain__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
  padding-top: 10px;
}
.sm-pain__desc { margin: 0; color: var(--muted); line-height: 1.55; }
/* рішення — темна плашка-акцент унизу картки (проблема світла → рішення темне) */
.sm-pain__fix {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-dark-bg);
  color: var(--color-on-dark);
  line-height: 1.5;
}
.sm-pain__fix::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E21' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--acid);
}
.sm-pain__fix strong { font-weight: var(--fw-semibold); color: var(--acid); }
@media (max-width: 760px) {
  .sm-pains__grid { grid-template-columns: 1fr; }
  .sm-pain { padding: var(--space-5); }
  .sm-pain__fix { padding: var(--space-4); }
}

/* ============================================================
   4. FEATURES — 6 збільшених карток із міні-мокапами кабінету
   ============================================================ */
.sm-feat__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
/* Картка = 5 рядків батьківської сітки (subgrid): іконка · заголовок ·
   опис · теги · ілюстрація. Кожна частина карток одного ряду має спільну
   висоту, тож заголовки, описи, теги й мокапи стоять на одних лініях —
   без «дірок», навіть коли в сусідній картці текст на рядок довший.
   .sm-fcard__head — display: contents, щоб його діти стали рядками картки. */
.sm-fcard {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: var(--space-3);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sm-fcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sm-fcard--grey { background: var(--grey-f1); border-color: transparent; }
.sm-fcard__head { display: contents; }
.sm-fcard__title {
  font-size: clamp(1.2rem, 1.6vw, 1.375rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}
.sm-fcard__body { margin: 0; color: var(--muted); line-height: 1.55; }
.sm-fcard__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sm-fcard__tags li {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}
.sm-fcard--grey .sm-fcard__tags li { background: var(--white); }
.sm-fcard__ill {
  align-self: stretch;
  margin-top: var(--space-2);   /* разом із row-gap = відступ space-5 від тегів */
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sm-fcard--grey .sm-fcard__ill { background: var(--white); }
@media (prefers-reduced-motion: reduce) {
  .sm-fcard { transition: none; }
  .sm-fcard:hover { transform: none; }
}
@media (max-width: 860px) {
  .sm-feat__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sm-fcard { padding: var(--space-5); }
  /* на телефоні мок — без «підкладки», щоб дати йому всю ширину картки */
  .sm-fcard__ill { padding: 0; min-height: 0; background: none; }
  .sm-fcard--grey .sm-fcard__ill { background: none; }
  .sm-mock { padding: var(--space-3); box-shadow: none; border: 1px solid var(--color-border); }
}

/* ── спільне для міні-мокапів ── */
.sm-mock {
  width: 100%;
  max-width: 460px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.sm-fcard--grey .sm-mock { box-shadow: none; border: 1px solid var(--color-border); }
.sm-mock__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sm-mock__ttl { font-weight: var(--fw-bold); }
.sm-mock__muted { color: var(--muted); font-size: var(--fs-xs); }
.sm-ava {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw-bold);
  background: var(--sm-accent-soft);
  color: var(--sm-accent-ink);
}

/* ── мок: розклад барберів ── */
.sm-sched__cols {
  display: grid;
  grid-template-columns: 34px repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.sm-sched__barber {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.sm-sched__barber span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-sched__time {
  font-size: 10px;
  color: var(--muted);
  padding-top: 4px;
}
.sm-slot {
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1.25;
  min-width: 0;
  min-height: 38px;
  overflow: hidden;
}
.sm-slot b { display: block; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-slot span { color: var(--muted); white-space: nowrap; }
.sm-slot--busy { background: var(--grey-f1); box-shadow: inset 3px 0 0 var(--sm-accent); }
.sm-slot--free {
  border: 1.5px dashed var(--acid);
  background: var(--acid-glow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.sm-slot--moved { background: var(--pink-glow-soft); box-shadow: inset 3px 0 0 var(--pink); }
.sm-slot--moved span { color: var(--pink-hover); font-weight: var(--fw-semibold); }
.sm-slot--break {
  background: repeating-linear-gradient(135deg, var(--grey-ef) 0 6px, transparent 6px 12px);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── мок: картка клієнта ── */
.sm-client__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sm-client__head .sm-ava { width: 40px; height: 40px; font-size: 13px; }
.sm-client__name { font-weight: var(--fw-bold); font-size: var(--fs-body); }
.sm-client__tags { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.sm-tag {
  font-size: 10px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  background: var(--success-soft);
  color: var(--success-ink);
}
.sm-tag--accent { background: var(--sm-accent-soft); color: var(--sm-accent-ink); }
.sm-client__visits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm-client__visits li {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--color-surface-2);
}
.sm-client__visits li span:first-child { color: var(--muted); font-size: var(--fs-xs); }
.sm-client__visits li span:last-child { font-weight: var(--fw-semibold); }
.sm-client__note {
  margin-top: var(--space-3);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--warning-soft);
  color: var(--warning-ink);
  font-size: var(--fs-xs);
}
.sm-client__btn {
  margin-top: var(--space-3);
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--acid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
}

/* ── мок: виплати майстрам ── */
.sm-pay__modes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.sm-pay__mode {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  color: var(--muted);
}
.sm-pay__mode--on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sm-pay__rows { display: grid; gap: 6px; }
.sm-pay__row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-surface-2);
}
.sm-pay__who { min-width: 0; display: grid; gap: 1px; }
.sm-pay__who b { font-weight: var(--fw-semibold); }
.sm-pay__who span { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-pay__sum { font-weight: var(--fw-bold); white-space: nowrap; }
.sm-pay__sum--in { color: var(--success-ink); }
.sm-pay__total {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-weight: var(--fw-bold);
}

/* ── мок: фіскальний чек ── */
.sm-check {
  max-width: 300px;
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.sm-check__head { text-align: center; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--on-light-10); display: grid; gap: 2px; }
.sm-check__head b { font-weight: var(--fw-bold); }
.sm-check__rows { list-style: none; margin: 0; padding: var(--space-3) 0; display: grid; gap: 6px; border-bottom: 1px dashed var(--on-light-10); }
.sm-check__rows li { display: flex; justify-content: space-between; gap: var(--space-3); }
.sm-check__total { display: flex; justify-content: space-between; padding-top: var(--space-3); font-weight: var(--fw-bold); font-size: var(--fs-body); }
.sm-check__sent {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--success-ink);
  background: var(--success-soft);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
}

/* ── мок: повідомлення клієнту ── */
.sm-chat { display: grid; gap: var(--space-2); }
.sm-chat__ch { display: flex; gap: 6px; margin-bottom: var(--space-1); }
.sm-chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  border: 1px solid var(--color-border);
}
.sm-chat__chip i { width: 8px; height: 8px; border-radius: 50%; }
.sm-chat__chip--viber i { background: #7360F2; }        /* фірмовий колір Viber */
.sm-chat__chip--tg i { background: #2AABEE; }           /* фірмовий колір Telegram */
.sm-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--color-surface-2);
  line-height: 1.4;
}
.sm-bubble--out {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--acid);
}
.sm-bubble small { display: block; margin-top: 2px; font-size: 10px; color: var(--muted); }
.sm-bubble--out small { color: rgba(30, 30, 33, .6); }
.sm-bubble__actions { display: flex; gap: 6px; margin-top: 6px; }
.sm-bubble__actions span {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
}

/* ── мок: аналітика ── */
.sm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.sm-kpi { background: var(--color-surface-2); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; }
.sm-kpi span { font-size: var(--fs-xs); color: var(--muted); }
.sm-kpi b { font-family: var(--font-display); font-size: 1.15rem; font-weight: var(--fw-bold); }
.sm-kpi em { font-style: normal; font-size: 10px; font-weight: var(--fw-semibold); color: var(--success-ink); }
.sm-load { display: grid; gap: 7px; }
.sm-load__row { display: grid; grid-template-columns: 70px 1fr 34px; gap: var(--space-2); align-items: center; font-size: var(--fs-xs); }
.sm-load__bar { height: 8px; border-radius: var(--radius-pill); background: var(--grey-ef); overflow: hidden; }
.sm-load__bar i { display: block; height: 100%; border-radius: inherit; background: var(--sm-accent); }
.sm-load__row b { text-align: right; font-weight: var(--fw-semibold); }

/* ============================================================
   5. DEMO — відео-сценарій + 3 рядки «скріншот + пояснення»
   ============================================================ */
.sm-demo__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: center;
}
.sm-ph--video .sm-ph__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--acid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-shadow: var(--shadow-acid);
  margin-bottom: var(--space-2);
}

/* сценарій: 3 етапи (H3) × кроки з наскрізною нумерацією 1–6,
   з'єднані вертикальною лінією; останній крок — acid (результат) */
.sm-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
.sm-flow__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sm-accent-ink);
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}
.sm-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.sm-flow__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--space-3);
  align-items: center;
  line-height: 1.35;
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.sm-flow__steps li::before {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  background: var(--white);
  border: 1px solid var(--color-border);
  color: var(--ink);
}
.sm-flow { counter-reset: flow; }
.sm-flow__steps li { counter-increment: flow; }
.sm-flow__steps li::before { content: counter(flow); }
.sm-flow__stage:last-child .sm-flow__steps li:last-child::before { background: var(--acid); border-color: var(--acid); }

@media (max-width: 860px) {
  .sm-demo__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   6. APP — «Керуйте з телефона»: великий телефон + підписи довкола
   ============================================================ */
.sm-app {
  background:
    radial-gradient(ellipse 620px 520px at 50% 60%, var(--sm-accent-glow) 0%, transparent 62%),
    radial-gradient(ellipse 82% 74% at 0% 100%, rgba(131, 65, 193, .6) 0%, transparent 58%),
    var(--color-dark-bg);
}
.sm-app__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-10));
  align-items: center;
}
.sm-app__phone { justify-self: center; width: 100%; max-width: 340px; }
.sm-app__phone img { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
.sm-app__col { display: grid; gap: var(--space-4); }
.sm-callout {
  background: var(--on-dark-06);
  border: 1px solid var(--on-dark-10);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: start;
}
.sm-callout .sm-hero__perk-ico { width: 40px; height: 40px; grid-row: span 2; }
.sm-callout__ttl { font-weight: var(--fw-semibold); color: var(--color-on-dark); margin: 0; line-height: 1.3; }
.sm-callout__txt { font-size: var(--fs-sm); color: var(--color-on-dark-muted); margin: 0; line-height: 1.5; }
/* смуга під телефоном: заклик ліворуч, бейджі сторів праворуч */
.sm-app__stores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--on-dark-06);
  border: 1px solid var(--on-dark-10);
}
.sm-app__stores-text { min-width: 0; flex: 1 1 22rem; display: grid; gap: var(--space-1); }
.sm-app__stores-ttl {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-on-dark);
}
.sm-app__stores-sub { margin: 0; font-size: var(--fs-sm); color: var(--color-on-dark-muted); line-height: 1.5; }
.sm-app__stores-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sm-app__stores .ff-store-badge img { height: 44px; width: auto; }
@media (max-width: 960px) {
  .sm-app__stage { grid-template-columns: 1fr 1fr; }
  .sm-app__phone { grid-column: 1 / -1; order: -1; max-width: 300px; }
}
@media (max-width: 600px) {
  .sm-app__stores { padding: var(--space-5); text-align: center; justify-content: center; }
  .sm-app__stores-badges { justify-content: center; }
  .sm-app__stage { grid-template-columns: 1fr; }
  .sm-app__phone { max-width: 260px; }
}

/* ============================================================
   7. PROOF — цифри екосистеми + відгук (заглушка)
   ============================================================ */
.sm-proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.sm-testi {
  position: relative;
  background: var(--ink);
  color: var(--color-on-dark);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow: hidden;
}
.sm-testi::before {          /* велика лапка */
  content: "“";
  position: absolute;
  top: -28px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 11rem;
  line-height: 1;
  color: var(--on-dark-10);
  pointer-events: none;
}
.sm-testi > * { position: relative; z-index: 1; }   /* текст поверх декоративної лапки */
@media (max-width: 600px) {
  .sm-testi::before { font-size: 7rem; top: -18px; right: 12px; }
}
.sm-testi__quote {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--color-on-dark);
}
.sm-testi__quote em { font-style: normal; color: var(--color-on-dark-muted); }
.sm-testi__who { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); }
.sm-testi__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--on-dark-08);
  border: 1px solid var(--on-dark-10);
  color: var(--acid);
}
.sm-testi__name { display: block; font-weight: var(--fw-semibold); }
.sm-testi__role { display: block; font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
@media (max-width: 960px) {
  .sm-proof__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   8. MIGRATE — «Допоможемо перейти»: 4 картки + CTA
   ============================================================ */
.sm-move__aside {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.sm-move__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.sm-move-card {
  background: var(--grey-f1);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sm-move-card__title {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: var(--space-2) 0 0;
}
.sm-move-card__body { margin: 0; color: var(--muted); line-height: 1.55; }
.sm-move-card .sm-checks { font-size: var(--fs-sm); gap: var(--space-2); }
.sm-move-card .sm-checks li { grid-template-columns: 18px 1fr; gap: var(--space-2); }
.sm-move-card .sm-checks li::before { width: 18px; height: 18px; background-size: 11px, auto; }
@media (max-width: 1060px) {
  .sm-move__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sm-move__grid { grid-template-columns: 1fr; }
  .sm-move__aside .btn { width: 100%; }
}

/* ============================================================
   9. FINAL CTA — темна смуга з повтором пропозиції
   ============================================================ */
.sm-final {
  background:
    radial-gradient(ellipse 70% 120% at 100% 0%, rgba(131, 65, 193, .7) 0%, transparent 55%),
    radial-gradient(ellipse 60% 120% at 0% 100%, var(--acid-glow) 0%, transparent 58%),
    var(--color-dark-bg);
}
.sm-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 6vw, var(--space-12));
  align-items: center;
}
.sm-final .sm-head { margin-bottom: 0; }
.sm-final__panel {
  background: var(--on-dark-06);
  border: 1px solid var(--on-dark-10);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.sm-final__panel .sm-checks li { color: var(--color-on-dark); }
.sm-final__actions { display: grid; gap: var(--space-3); }
.sm-final__actions .btn { width: 100%; }
.btn--on-dark {
  background: transparent;
  color: var(--white);
  border-color: var(--on-dark-40);
}
.btn--on-dark:hover { border-color: var(--white); transform: translateY(-2px); }
.sm-final__terms { margin: 0; font-size: var(--fs-xs); color: var(--color-on-dark-muted); text-align: center; line-height: 1.5; }
.sm-final__terms a { color: var(--color-on-dark); text-underline-offset: 3px; }
@media (max-width: 860px) {
  .sm-final__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* кнопки — в один рядок і на 380px: менші бокові відступи панелі й кнопок */
  .sm-final__panel { padding: var(--space-5) var(--space-4); }
  .sm-final__actions .btn { padding-inline: var(--space-3); }
}

/* ============================================================
   10. ARTICLES — 3 вручну відібрані матеріали
   ============================================================ */
.sm-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.sm-article {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: var(--white);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sm-article:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sm-article:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acid-glow); }
.sm-article__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 580 / 360;
  object-fit: cover;
  background: var(--color-surface-2);
}
.sm-article__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.sm-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.sm-article__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  background: var(--sm-accent-soft);
  color: var(--sm-accent-ink);
}
.sm-article__title { font-size: var(--fs-lead); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin: 0; }
.sm-article__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.sm-article:hover .sm-article__more svg { transform: translateX(3px); }
.sm-article__more svg { transition: transform var(--dur) var(--ease-out); }
@media (max-width: 900px) {
  .sm-articles__grid { grid-template-columns: 1fr; }
  .sm-article { flex-direction: row; }
  .sm-article__img { width: 38%; flex-shrink: 0; height: auto; align-self: stretch; }
}
@media (max-width: 560px) {
  .sm-article { flex-direction: column; }
  .sm-article__img { width: 100%; align-self: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-article, .sm-article__more svg { transition: none; }
  .sm-article:hover { transform: none; }
}

/* ============================================================
   11. RELATED — внутрішні посилання на суміжні рішення (над футером)
   ============================================================ */
.sm-related {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}
.sm-related__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  flex-wrap: wrap;
}
.sm-related__ttl { font-weight: var(--fw-bold); margin: 0; }
.sm-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sm-related__list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--white);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: border-color var(--dur) var(--ease-out);
}
.sm-related__list a:hover { border-color: var(--ink); }
.sm-related__list a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acid-glow); }