/* Intro [paper] — 655:19413: фон #f7f7f7, отступы 100/110, ряд 837 + 25 + 954 */
.intro {
  background: var(--paper);
  padding-block: clamp(56px, 5.2083vw, 100px);
  padding-inline: var(--gutter) 0;
  overflow: hidden;
}
.intro__row {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 1.3021vw, 25px);
  /* 655:19414 — ряд шириной 1920 внутри отступа 110: правый край фото уходит за экран на 6px */
  width: calc(100% + var(--gutter));
}
.intro__text {
  flex: 0 0 837px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 1.4583vw, 28px);
}

/* Подзаголовок-метка с точкой — встречается на всех страницах */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(12px, 0.6771vw, 13px);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 2px;
  color: var(--gold-ink);
}
.eyebrow__dot { flex: 0 0 6px; }

.intro__title {
  width: min(630px, 100%);
  font-size: clamp(30px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--ink);
}
.intro__lead {
  font-size: var(--t-body);
  line-height: 1.5;
  color: rgba(24, 29, 36, 0.68);
}

.intro__features {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  column-gap: clamp(24px, 2.6042vw, 50px);
  row-gap: clamp(20px, 1.5625vw, 30px);
  width: 100%;
}
.feature { display: flex; gap: 14px; align-items: flex-start; }
.feature__num {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.4px solid var(--gold);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  color: var(--gold-ink);
}
.feature__body { display: flex; flex-direction: column; gap: 10px; }
.feature__title {
  font-size: clamp(19px, 1.25vw, 24px);
  font-weight: 600;
  line-height: normal;
  color: var(--ink);
}
.feature__text {
  font-size: var(--t-body);
  line-height: 1.4;
  color: rgba(24, 29, 36, 0.7);
}
/* ширины текстовых узлов из макета: 250 / 340 / 250 / 339 */
.feature--w250 .feature__text { width: min(250px, 100%); }
.feature--w340 .feature__text { width: min(340px, 100%); }
.feature--w339 .feature__text { width: min(339px, 100%); }
@media (max-width: 1279px) {
  .feature--w250 .feature__text,
  .feature--w340 .feature__text,
  .feature--w339 .feature__text { width: auto; }
}

.intro__photo {
  position: relative;
  flex: 0 1 954px;
  height: 537px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
}
/* 658:19748/658:19749 — картинка 969×537 внутри рамки 954: правые 15px срезаны */
.intro__photo > img {
  width: 969px;
  height: 100%;
  max-width: none;
  object-fit: cover;   /* 658:19749 — object-cover в боксе 969×537 */
}
@media (max-width: 1279px) {
  .intro__photo > img { width: 100%; object-fit: cover; }
}

.intro__badge {
  position: absolute;
  inset-inline-end: clamp(16px, 1.7708vw, 34px);
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 21px 13px 19px;      /* 14/22/14/20 минус обводки нет — округление Figma */
  border-radius: var(--r-pill);
  background: rgba(24, 29, 36, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  color: var(--white);
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .intro { padding-inline-end: var(--gutter); }
  .intro__row { flex-direction: column; width: 100%; }
  .intro__text { flex: 0 0 auto; width: 100%; }
  .intro__photo { flex: 0 0 auto; width: 100%; height: clamp(280px, 42vw, 537px); }
  .intro__title { width: 100%; }
}
@media (max-width: 599px) {
  .intro__features { grid-template-columns: 1fr; }
  .feature__text { max-width: none; }
}

.intro__badge img { flex: 0 0 8px; width: 8px; height: 8px; }

/* Ряд шире экрана на величину поля (см. .intro__row): ниже 1920 внешний край
   фото уходит за экран, и плашка на нём срезается. Проверено замером: на 1920
   и на 1024 она видна целиком, на 1440 вылетает на 57px. Сдвигаем внутрь. */
@media (min-width: 1024px) and (max-width: 1919px) {
  .intro__badge { inset-inline-end: calc(clamp(16px, 1.7708vw, 34px) + var(--gutter)); }
}

/* Видеослой повторяет рамку кадра: у figure свой радиус, и видео его наследует */
.intro__photo { position: relative; overflow: hidden; }
.intro__photo .vbg { border-radius: inherit; }

/* На тёмных секциях метка остаётся светлым золотом: --gold-ink подобрано
   под бумажный фон и на #181d24 даёт всего 3.25:1. */
.steps:not(.steps--paper) .eyebrow,
.faq .eyebrow,
.app .eyebrow,
.pblock--ink .eyebrow,
.pblock--ink-deep .eyebrow { color: var(--gold); }