/* ============================================================
   comparison.css — секция 3 (розовая сцена, холст 843, ТЗ-09 §4 + ТЗ-10 §3).
   Геометрический блок: форма-картинка + абсолютные выноски по координатам.
   Кегли — из шкалы (ТЗ-10 §1). Зазор H2↔подзаголовок сокращён (§3.1).
   ============================================================ */

/* ТЗ-12 §3: пустота под подзаголовком убрана — всё содержимое (продукт, выноски,
   линии, сноска, блоб) поднято на --cmp-shift, на неё же уменьшена высота секции.
   Блоб двигаем через top (не через height): уменьшение height сквошит object-fit:fill
   и выноски съезжают с лавандовой формы на розовое. */
.cmp { --cmp-shift: 80px; width: 390px; height: calc(843px - var(--cmp-shift)); background: var(--c-cmp-outer); overflow: hidden; position: relative; }
.cmp > * { position: absolute; }
.cmp > picture { display: block; }

.cmp__blob { top: calc(0px - var(--cmp-shift)); left: 0; width: 390px; height: 843px; }
.cmp__blob img { width: 390px; height: 843px; object-fit: fill; }

.cmp__eyebrow {
  top: 30px; left: 0; right: 0; text-align: center;
  font-weight: 700; font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-cmp-ink);
}
.cmp__h2 {
  top: 50px; left: 8px; right: 8px; text-align: center;
  font-family: var(--ff-head); font-weight: 800;
  font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: .6px; color: var(--c-cmp-ink);
}
.cmp__subtitle {
  top: 120px; left: 0; right: 0; text-align: center;
  font-weight: 700; font-size: var(--fs-cap); line-height: 1;
  letter-spacing: .6px; text-transform: uppercase; color: var(--c-cmp-ink);
}

.cmp__product { top: calc(339.16px - var(--cmp-shift)); left: 73.61px; width: 267.01px; height: 267.01px; }
.cmp__product img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(46,31,71,.16));
}

.cmp__lines { top: calc(0px - var(--cmp-shift)); left: 0; }
.cmp__lines path { stroke: var(--c-cmp-ink); stroke-width: 1; fill: none; }
.cmp__lines circle { fill: var(--c-cmp-dot); }

.cmp__co { display: flex; flex-direction: column; }
.cmp__co--protein { top: calc(250px - var(--cmp-shift)); left: 29.72px; width: 130px; }
.cmp__co--fat     { top: calc(255px - var(--cmp-shift)); left: 262px;   width: 110px; align-items: flex-start; }
.cmp__co--fibre   { top: calc(636px - var(--cmp-shift)); left: 32.46px; width: 130px; }
.cmp__co--baked   { top: calc(665px - var(--cmp-shift)); left: 250px;   width: 132px; }

.cmp__num {
  align-self: flex-start;
  font-family: var(--ff-num); font-weight: 400; font-size: var(--fs-num-xl); line-height: .92;
  letter-spacing: -.3px; color: var(--c-cmp-num);
  background: var(--c-cmp-inner);          /* совпадает с формой-блобом (контраст-чекер) */
}
.cmp__num--baked { font-size: var(--fs-num-baked); }

.cmp__lab {
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-body); line-height: 1.1;
  letter-spacing: .6px; text-transform: uppercase; color: var(--c-cmp-ink); margin-top: 4px;
}
.cmp__val {
  font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-cap); line-height: 1.1;
  letter-spacing: .2px; color: var(--c-cmp-ink); margin-top: 8px;
}

.cmp__foot {
  top: calc(800px - var(--cmp-shift)); left: 0; right: 0; text-align: center;
  font-size: var(--fs-cap); color: var(--c-cmp-ink);
}