/* Лендинг Дениса Шашкина — 1:1 с макетом Frame 2.pdf (390pt мобильный макет).
   Композиции (фото, скриншоты, карточки) запечены в полосы assets/*.webp,
   рендер исходного PDF в 3x; весь текст — живой HTML поверх, координаты из PDF. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #fff; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: 'Inter', -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.viewport { display: flex; justify-content: center; }

.stage {
  position: relative;
  width: 390px;
  flex: 0 0 390px;
  transform-origin: top center;
}

.sec { position: relative; }

.strip {
  display: block;
  width: 390px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* фото-слои поверх подложки (исходники из pngs/, порядок = порядок отрисовки макета) */
.ph {
  position: absolute;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* --- текст: всё позиционируется абсолютно, координаты в px = pt макета --- */

.sec h1, .sec h2, .sec h3, .sec p, .sec .card, .sec .chip { position: absolute; }
.card h3, .card p { position: static; }

.center { left: 0; right: 0; text-align: center; }

.h16 {
  font-size: 16px; line-height: 19px; font-weight: 400;
  left: 0; right: 0;
  display: flex; justify-content: center; align-items: flex-start;
}
.h16 .arr { margin-left: 8px; margin-top: 11.5px; flex: none; }

.name { font-size: 24px; line-height: 29px; font-weight: 400;
        left: 0; right: 0; text-align: center; }

.t12  { font-size: 12px; line-height: 14.5px; font-weight: 600; }
.t10b { font-size: 10px; line-height: 12px;   font-weight: 600; }
.t10  { font-size: 10px; line-height: 12px;   font-weight: 400; }
.t8   { font-size: 8px;  line-height: 10px;   font-weight: 400; }
.lh12 { line-height: 12px; }
.lh13 { line-height: 13px; }

.card { width: 150px; }
.card h3 { margin-bottom: 3px; white-space: nowrap; }
.card p  { white-space: pre; }
p.t8, p.t10 { white-space: pre; }

/* карточки результатов: заголовок 12px → ниша 10px → описание 8px */
.card .lh12 { margin-bottom: 8px; }

/* сильные стороны и литература: зазор после заголовка чуть больше */
.s-wide .card h3 { margin-bottom: 4.5px; }

/* --- чипы («*по 120 звонков/день») --- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 17px;
  padding: 0 8px;
  background: #ececec;
  border-radius: 999px;
  font-size: 8px;
  line-height: 1;
  color: #4d4d4d;
  white-space: nowrap;
}

/* --- кнопки: пилюля запечена в полосе, сверху прозрачная ссылка --- */
.btn {
  display: block;
  border-radius: 999px;
  cursor: pointer;
}
.btn-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- футер --- */
.footer { font-size: 10px; line-height: 12px; color: #c2c2c2; }