/* ЛОКАЛЬНЫЙ СЛОЙ — вводная часть страницы: текст и панель фактов.

   Зачем панель. Сплошной текст держится меры в 672 px, и на широком экране
   правая половина оставалась пустой на каждой внутренней странице — страница
   читалась как незаконченная. Заполнять её украшением нельзя, поэтому справа
   встают факты этой конкретной страницы: сколько позиций в её прайсе, от какой
   суммы работа, сколько лет сервису. Числа — материал этого сайта. */
.zw-intro__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: start;
}
.zw-intro__body { max-width: var(--measure); }
.zw-intro__body p {
  margin: 0 0 var(--sp-5);
  font-size: var(--size-lead);
  line-height: var(--leading-body);
  color: var(--ink-body);
}
.zw-intro__body p:last-child { margin-bottom: 0; }

.zw-intro__facts {
  --bevel: var(--bevel-panel);
  background: var(--surface-raised);
  padding: var(--sp-6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--bevel)), calc(100% - var(--bevel)) 100%, 0 100%);
}
.zw-intro__facts-title {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.zw-intro__fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
}
.zw-intro__fact:first-of-type { border-top: 0; padding-top: 0; }
.zw-intro__fact:last-child { padding-bottom: 0; }
.zw-intro__num { font-family: var(--font-mono); font-size: var(--size-figure); line-height: 1.1; }
.zw-intro__label { font-size: var(--size-small); color: var(--ink-body); }
.zw-intro__facts a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 1000px) {
  .zw-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--sp-8); }
}