/* SITE-COLOR. Принятые CRM-окна, значки и крупные схемы. */
/* Статическая иллюстрация карточки CRM и диалога. Только отдельный образец. */
figure.crm-chat-illustration {
  --crm-ink: var(--blanc-ink, #0A0A0A);
  --crm-muted: var(--blanc-muted, #737373);
  --crm-line: var(--case-color-line, #DDE5EF);
  --crm-blue: var(--case-color-action, #1468E8);
  --crm-lilac: var(--case-color-lilac, #F3EDFF);
  --crm-blue-soft: var(--case-color-blue-soft, #EDF5FF);
  --crm-neutral: var(--case-color-neutral, #F5F5F7);
  --crm-font: var(--blanc-font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  container-type: inline-size;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 32px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--crm-line);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--crm-ink);
  font: 400 14px/1.5 var(--crm-font);
  text-align: left;
  letter-spacing: 0;
  box-shadow: 0 12px 32px -20px rgba(72, 46, 105, 0.28);
}
.crm-chat-illustration *, .crm-chat-illustration *::before, .crm-chat-illustration *::after { box-sizing: border-box; }
.crm-chat-illustration .crm-chat__decor { pointer-events: none; user-select: none; }
.crm-chat-illustration .crm-chat__topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--crm-line);
  background: #FAFCFD;
}
.crm-chat-illustration .crm-chat__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1;
  color: #293846;
}
.crm-chat-illustration .crm-chat__brand span { color: var(--crm-blue); }
.crm-chat-illustration .crm-chat__brand-clock {
  width: 14px;
  height: 14px;
  margin-left: 3px;
  color: var(--crm-blue);
}
.crm-chat-illustration .crm-chat__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 38%;
  padding: 7px 12px;
  border: 1px solid var(--crm-line);
  border-radius: 6px;
  color: #8A97A5;
  font-size: 12px;
  background: #FFFFFF;
}
.crm-chat-illustration .crm-chat__search svg { width: 14px; height: 14px; }
.crm-chat-illustration .crm-chat__manager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  color: #536476;
}
.crm-chat-illustration .crm-chat__avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #FFFFFF;
  background: #419AB8;
  font-size: 13px;
  font-weight: 600;
}
.crm-chat-illustration .crm-chat__shell { display: grid; grid-template-columns: minmax(0, 1fr); }
.crm-chat-illustration .crm-chat__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 10px;
  border-right: 1px solid var(--crm-line);
  background: #F5F8FA;
  color: #788593;
  font-size: 11px;
}
.crm-chat-illustration .crm-chat__nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 6px;
  border-radius: 5px;
  line-height: 1.4;
}
.crm-chat-illustration .crm-chat__nav-item svg { flex: 0 0 13px; width: 13px; height: 13px; }
.crm-chat-illustration .crm-chat__nav-item--active {
  color: #27617D;
  font-weight: 600;
  background: #E3EFF5;
}
.crm-chat-illustration .crm-chat__workspace { min-width: 0; }
.crm-chat-illustration .crm-chat__deal-head { padding: 18px 20px 0; }
.crm-chat-illustration .crm-chat__breadcrumb {
  display: block;
  margin-bottom: 7px;
  color: var(--crm-muted);
  font-size: 11px;
}
.crm-chat-illustration .crm-chat__deal-title {
  display: block;
  color: #283544;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.4px;
}
.crm-chat-illustration .crm-chat__stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin-top: 16px;
  font-size: 10px;
}
.crm-chat-illustration .crm-chat__stage {
  min-width: 0;
  padding: 8px 11px;
  background: #F0F3F5;
  color: #6C7B88;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%);
}
.crm-chat-illustration .crm-chat__stage:first-child { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
.crm-chat-illustration .crm-chat__stage--active { background: #31A9CC; color: #FFFFFF; }
.crm-chat-illustration .crm-chat__tabs {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--crm-line);
  color: #7B8794;
  font-size: 11px;
}
.crm-chat-illustration .crm-chat__tabs > span { padding-bottom: 11px; }
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab--active { color: #354A5D; box-shadow: inset 0 -2px #31A9CC; }
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab-chat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 9px;
  margin-bottom: 7px;
  border: 1px solid #BDDFEC;
  border-radius: 4px;
  color: #246581;
  background: #F1FAFD;
}
.crm-chat-illustration .crm-chat__tab-chat svg { width: 13px; height: 13px; }
.crm-chat-illustration .crm-chat__card-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.crm-chat-illustration .crm-chat__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: 22px 20px;
  background: #FCFDFE;
  border-right: 1px solid var(--crm-line);
  color: #556474;
}
.crm-chat-illustration .crm-chat__section-label { font-size: 10px; color: #7B8B98; letter-spacing: 0.7px; text-transform: uppercase; }
.crm-chat-illustration .crm-chat__field { display: grid; gap: 5px; font-size: 12px; line-height: 1.4; }
.crm-chat-illustration .crm-chat__field-label { color: #8B97A3; font-size: 11px; }
.crm-chat-illustration .crm-chat__field-value { color: #354657; font-size: 13px; }
.crm-chat-illustration .crm-chat__field-person { display: flex; align-items: center; gap: 7px; color: #354657; }
.crm-chat-illustration .crm-chat__field-person .crm-chat__avatar { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
.crm-chat-illustration .crm-chat__skeleton { display: block; height: 6px; width: 75%; border-radius: 4px; background: #E8EDF1; }
.crm-chat-illustration .crm-chat__skeleton + .crm-chat__skeleton { width: 48%; margin-top: 7px; }
.crm-chat-illustration .crm-chat__chat { min-width: 0; background: #F3F7FA; }
.crm-chat-illustration .crm-chat__chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--crm-line);
  background: #FFFFFF;
}
.crm-chat-illustration .crm-chat__chat-title { display: grid; gap: 2px; }
.crm-chat-illustration .crm-chat__chat-title strong { color: #2C4255; font: 600 14px/1.4 var(--crm-font); }
.crm-chat-illustration .crm-chat__chat-title small { color: #8593A1; font: 400 10px/1.5 var(--crm-font); }
.crm-chat-illustration .crm-chat__chat-tools { display: flex; gap: 12px; margin-left: auto; color: #8C9BA8; }
.crm-chat-illustration .crm-chat__chat-tools svg { width: 15px; height: 15px; }
.crm-chat-illustration .crm-chat__thread { padding: 24px 20px 30px; }
.crm-chat-illustration .crm-chat__sender { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; color: #5D7387; font-size: 11px; }
.crm-chat-illustration .crm-chat__sender svg { width: 14px; height: 14px; color: #379ABD; }
.crm-chat-illustration .crm-chat__bubble { position: relative; padding: 19px 21px; border: 1px solid #CFE5F0; border-radius: 2px 12px 12px 12px; background: #E8F5FC; }
figure.crm-chat-illustration .crm-chat__message {
  display: block;
  max-width: none;
  padding: 0;
  margin: 0;
  border: 0;
  color: #223F53;
  background: transparent;
  font: 400 16px/1.65 var(--crm-font);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.crm-chat-illustration .crm-chat__composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--crm-line);
  background: #FFFFFF;
  color: #A2ADB7;
}
.crm-chat-illustration .crm-chat__composer > svg { width: 17px; height: 17px; flex: 0 0 17px; }
.crm-chat-illustration .crm-chat__composer-line { height: 6px; width: 38%; border-radius: 4px; background: #E8EDF1; }
.crm-chat-illustration .crm-chat__send { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 5px; color: #FFFFFF; background: #31A9CC; }
.crm-chat-illustration .crm-chat__send svg { width: 15px; height: 15px; }
/* Структура CRM сохранена; оформление согласовано со стилем цветного кейса. */
.crm-chat-illustration .crm-chat__topbar,
.crm-chat-illustration .crm-chat__fields { background: #FFFFFF; }
.crm-chat-illustration .crm-chat__nav,
.crm-chat-illustration .crm-chat__stage { background: var(--crm-neutral); }
.crm-chat-illustration .crm-chat__brand,
.crm-chat-illustration .crm-chat__manager,
.crm-chat-illustration .crm-chat__nav,
.crm-chat-illustration .crm-chat__nav-item--active,
.crm-chat-illustration .crm-chat__deal-title,
.crm-chat-illustration .crm-chat__tabs,
.crm-chat-illustration .crm-chat__fields,
.crm-chat-illustration .crm-chat__field-value,
.crm-chat-illustration .crm-chat__field-person,
.crm-chat-illustration .crm-chat__chat-title strong,
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab--active,
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab-chat { color: var(--crm-ink); }
.crm-chat-illustration .crm-chat__search,
.crm-chat-illustration .crm-chat__section-label,
.crm-chat-illustration .crm-chat__field-label,
.crm-chat-illustration .crm-chat__chat-title small,
.crm-chat-illustration .crm-chat__chat-tools,
.crm-chat-illustration .crm-chat__sender { color: var(--crm-muted); }
.crm-chat-illustration .crm-chat__search,
.crm-chat-illustration .crm-chat__nav-item,
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab-chat { border-radius: 10px; }
.crm-chat-illustration .crm-chat__nav-item--active {
  background: var(--crm-blue-soft);
  box-shadow: inset 2px 0 var(--crm-blue);
}
.crm-chat-illustration .crm-chat__avatar,
.crm-chat-illustration .crm-chat__stage--active,
.crm-chat-illustration .crm-chat__send { background: var(--crm-blue); }
.crm-chat-illustration .crm-chat__send { border-radius: 8px; }
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab--active { box-shadow: inset 0 -2px var(--crm-blue); }
.crm-chat-illustration .crm-chat__tabs .crm-chat__tab-chat {
  background: var(--crm-blue-soft);
  border-color: var(--crm-line);
}
.crm-chat-illustration .crm-chat__tab-chat svg,
.crm-chat-illustration .crm-chat__sender svg { color: var(--crm-blue); }
.crm-chat-illustration .crm-chat__chat { background: var(--crm-lilac); }
.crm-chat-illustration .crm-chat__bubble {
  border-color: #E5DCF4;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 3px 12px -7px rgba(48, 40, 64, 0.24);
}
figure.crm-chat-illustration .crm-chat__message { color: var(--crm-ink); }
@container (max-width: 650px) {
  .crm-chat-illustration .crm-chat__nav { padding-inline: 5px; font-size: 10px; }
  .crm-chat-illustration .crm-chat__nav-item { gap: 5px; padding-inline: 3px; }
  .crm-chat-illustration .crm-chat__card-grid { grid-template-columns: 142px minmax(0, 1fr); }
  .crm-chat-illustration .crm-chat__fields { padding: 18px 14px; }
  .crm-chat-illustration .crm-chat__thread { padding: 18px 14px 24px; }
  .crm-chat-illustration .crm-chat__bubble { padding: 16px; }
  .crm-chat-illustration .crm-chat__tabs { gap: 12px; padding-inline: 14px; }
  .crm-chat-illustration .crm-chat__deal-head { padding-inline: 14px; }
  .crm-chat-illustration .crm-chat__search { display: none; }
}
@container (max-width: 480px) {
  .crm-chat-illustration .crm-chat__shell { grid-template-columns: minmax(0, 1fr); }
  .crm-chat-illustration .crm-chat__nav { display: none; }
  .crm-chat-illustration .crm-chat__card-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-chat-illustration .crm-chat__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--crm-line); }
  .crm-chat-illustration .crm-chat__section-label, .crm-chat-illustration .crm-chat__field--secondary { display: none; }
  .crm-chat-illustration .crm-chat__topbar { padding: 14px 16px; }
  .crm-chat-illustration .crm-chat__tabs { gap: 14px; }
  .crm-chat-illustration .crm-chat__tabs .crm-chat__tab-optional { display: none; }
  .crm-chat-illustration .crm-chat__stage { padding: 8px; }
}

/* Отдельные согласуемые образцы. Не постоянная дизайн-система сайта. */
body[data-page="index"], body[data-page="mechanics"] {
  --art-blue: #1468E8;
  --art-lilac: #F3EDFF;
  --art-line: #DDE5EF;
}
body[data-page="index"] .home-page { --home-ink: #0A0A0A; --home-muted: #737373; --home-line: #DDE5EF; --home-soft: #F5F5F7; }
body[data-page="index"] .home-button { border-radius: 10px; background: #1468E8; border-color: #1468E8; }
body[data-page="index"] .home-button:hover { background: #1056C3; }
body[data-page="index"] .home-page .home-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body[data-page="index"] .home-page .home-route-card--illustrated {
  padding: 28px; background: #FFFFFF; border: 1px solid #DDE5EF; border-radius: 18px;
  box-shadow: 0 12px 30px -24px rgba(37, 63, 103, .26); overflow: hidden;
}
body[data-page="index"] .home-page .home-route-card--illustrated:hover { border-color: #1468E8; background: #FAFCFF; }
body[data-page="index"] .home-route-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 156px; align-items: center; gap: 12px; flex: 1; }
body[data-page="index"] .home-route-card__copy { min-width: 0; }
body[data-page="index"] .home-page .home-route-card--illustrated h3 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; }
body[data-page="index"] .home-page .home-route-card--illustrated .home-card-label { color: #737373; }
body[data-page="index"] .home-page .home-route-card--illustrated p { color: #737373; font-size: 15px; line-height: 1.6; }
body[data-page="index"] .home-route-card__art { width: 100%; height: auto; display: block; }
body[data-page="index"] .home-page .home-card-next { color: #1468E8; margin-top: 20px; }
body[data-page="index"] .home-page .home-service-card { position: relative; border-color: #DDE5EF; background: #FFFFFF; border-radius: 18px; }
body[data-page="index"] .home-service-card .home-service-mark { color: #0A0A0A; background: #F5F5F7; border-color: #DDE5EF; }
body[data-page="index"] .home-service-card__art { display: block; width: 150px; height: 135px; object-fit: contain; align-self: flex-end; margin: -52px -12px 8px 0; }
body[data-page="index"] .home-page .home-choice-card { border-style: solid; background: #F3EDFF; }
body[data-page="index"] .home-flow--illustrated { border: 0; background: transparent; padding: 0; max-width: 520px; }
body[data-page="index"] .home-flow--illustrated .home-flow__art { display: block; width: 100%; height: auto; }
body[data-page="index"] .home-flow--illustrated figcaption { text-align: left; color: #737373; margin-bottom: 12px; }
body[data-page="index"] .home-page .home-next-step { background: #F3EDFF; border-color: #E5DCF4; border-radius: 18px; }
body[data-page="case"] .case-article .crm-connection-figure { max-width: none; margin: 32px 0; padding: 0; border: 0; background: transparent; }
body[data-page="case"] .case-article .crm-connection-figure img { display: block; width: 100%; height: auto; border: 0; }
/* Переписки: важный текст остаётся HTML, интерфейс — декоративным. */
figure.crm-chat-illustration.crm-chat-illustration--drawn {
  border-color: #182235; border-radius: 18px; background: #FFFFFF;
  box-shadow: 0 6px 0 #EDF5FF; font-family: var(--blanc-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}
.crm-chat-illustration--drawn .crm-chat__topbar { border-bottom-color: #182235; padding: 18px 22px; }
.crm-chat-illustration--drawn .crm-chat__brand { font-size: 21px; font-weight: 650; letter-spacing: -.6px; color: #0A0A0A; }
.crm-chat-illustration--drawn .crm-chat__search { display: none; }
.crm-chat-illustration--drawn .crm-chat__deal-title { font-size: 22px; line-height: 1.35; }
.crm-chat-illustration--drawn .crm-chat__stages { gap: 5px; font-size: 11px; }
.crm-chat-illustration--drawn .crm-chat__tabs { font-size: 12px; }
.crm-chat-illustration--drawn .crm-chat__avatar { background: #1468E8; }
.crm-chat-illustration--drawn .crm-chat__thread { padding: 24px 20px 28px; }
.crm-chat-illustration--drawn .crm-chat__chat { background: #F3EDFF; }
.crm-chat-illustration--drawn .crm-chat__bubble { border: 1px solid #182235; border-radius: 16px 16px 5px 16px; box-shadow: 4px 5px 0 #E5DCF4; }
figure.crm-chat-illustration--drawn .crm-chat__message { color: #0A0A0A; font-size: 16px; line-height: 1.65; }
.crm-chat-illustration--drawn .crm-chat__field-value,
.crm-chat-illustration--drawn .crm-chat__field-person { color: #0A0A0A; }
.crm-chat-illustration--drawn .crm-chat__stage--active,
.crm-chat-illustration--drawn .crm-chat__send { background: #1468E8; }
.crm-chat-illustration--drawn .crm-chat__tabs .crm-chat__tab--active { box-shadow: inset 0 -2px #1468E8; }
/* Компактные иллюстрации сообщений практических приёмов. */
.mechanics-page .crm-message-drawing { margin: 20px 0 10px; overflow: hidden; border: 1px solid #182235; border-radius: 16px; box-shadow: 0 5px 0 #EDF5FF; }
.mechanics-page .crm-message-drawing__head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; background: #FFFFFF; color: #0A0A0A; border-bottom: 1px solid #182235; font-size: 14px; }
.mechanics-page .crm-message-drawing__head span { color: #737373; }
.mechanics-page .crm-message-drawing__body { padding: 20px; background: #F3EDFF; }
.mechanics-page .crm-message-drawing__bubble { margin: 0; padding: 20px; border: 1px solid #182235; border-radius: 14px 14px 4px 14px; background: #FFFFFF; box-shadow: 3px 4px 0 #E5DCF4; }
.mechanics-page .crm-message-drawing__text { margin: 0; color: #0A0A0A; font-size: 16px; line-height: 1.65; }
body[data-page="mechanics"] .mechanics-page .mechanic-card { border: 1px solid #DDE5EF; border-radius: 18px; background: #FFFFFF; }
body[data-page="mechanics"] .mechanics-page .mechanic-card__figure { background: transparent; border: 0; }
body[data-page="mechanics"] .mechanics-page .mechanic-card__figure img { border-radius: 14px; background: #FFFFFF; }
body[data-page="mechanics"] .mechanics-page .mechanic-chain { border-color: #DDE5EF; }
/* Схемы читаются как отдельные крупные примеры, не миниатюры каталога. */
body[data-page="mechanics"] .mechanics-page .mechanics-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
body[data-page="mechanics"] .mechanics-page .mechanic-card { padding: clamp(18px, 3vw, 32px); }
body[data-page="mechanics"] .mechanics-page .mechanic-card__figure { width: 100%; margin: 24px 0; }
body[data-page="mechanics"] .mechanics-page .mechanic-card__figure img { width: 100%; height: auto; max-width: none; max-height: none; aspect-ratio: auto; }
body[data-page="mechanics"] .mechanics-page .mechanic-chain { display: grid; gap: 12px; margin-top: 22px; padding: 0; font-size: 17px; line-height: 1.65; counter-reset: art-step; }
body[data-page="mechanics"] .mechanics-page .mechanic-chain li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; line-height: inherit; counter-increment: art-step; }
body[data-page="mechanics"] .mechanics-page .mechanic-chain li::before { content: counter(art-step); display: grid; place-items: center; width: 28px; height: 28px; background: #1468E8; border-radius: 50%; color: #FFFFFF; font-size: 14px; font-weight: 600; }
body[data-page="mechanics"] .mechanics-page .mechanic-chain li:not(:last-child)::after { display: none; }
body[data-page="mechanics"] .mechanics-filters button[aria-pressed="true"] { background: #1468E8; border-color: #1468E8; color: #FFFFFF; }
body[data-page="mechanics"] .mechanics-filters button { border-radius: 10px; }
body[data-page="mechanics"] .mechanic-card__category { color: #737373; }
@media (max-width: 1150px) {
  body[data-page="index"] .home-page .home-route-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="index"] .home-route-card__body { grid-template-columns: minmax(0, 1fr) 180px; }
}
@media (max-width: 560px) {
  body[data-page="index"] .home-page .home-route-card--illustrated { padding: 22px; }
  body[data-page="index"] .home-route-card__body { grid-template-columns: minmax(0, 1fr) 105px; gap: 8px; }
  body[data-page="index"] .home-page .home-route-card--illustrated h3 { font-size: 20px; }
  .mechanics-page .crm-message-drawing__head { font-size: 12px; padding: 12px; }
  .mechanics-page .crm-message-drawing__body { padding: 14px 10px; }
  .mechanics-page .crm-message-drawing__bubble { padding: 16px; }
}
@container (max-width: 480px) {
  .crm-chat-illustration--drawn .crm-chat__thread { padding: 20px 12px; }
  .crm-chat-illustration--drawn .crm-chat__deal-title { font-size: 20px; }
  .crm-chat-illustration--drawn .crm-chat__bubble { padding: 16px; }
}