@font-face {
  font-family: "SF Pro Variable";
  src: url("fonts/SF-Pro.subset.768629d2.woff2") format("woff2");
  font-weight: 100 1000; /* Supports full weight range */
  font-stretch: 50% 200%; /* Supports stretch if it's variable */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+2000-206F, U+20AC, U+2116, U+2122, U+00A0, U+00AB-00BB;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SF-Pro-Display-Medium.subset.df05f33d.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0100-024F, U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+2000-206F, U+20AC, U+20BD, U+2116, U+2122, U+00A0, U+00AB-00BB;
}

@font-face {
  font-family: "SF Pro Compressed";
  src: url("fonts/SF-Pro-Compressed-Black.subset.500bbd13.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F, U+0400-052F, U+2DE0-2DFF, U+A640-A69F, U+2000-206F, U+20AC, U+2116, U+2122, U+00A0, U+00AB-00BB;
}

.headline {
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000; /* Max weight */
  font-stretch: 47%; /* Match second screen title */
  font-variation-settings: "wdth" 47, "wght" 1000; /* Match second screen title */
  font-style: normal;
  text-transform: uppercase;
  text-align: center;
}

.highlight {
  background: #000;
  padding: 0 0.1em;
  line-height: 1;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.headline .highlight {
  padding: 0;
  line-height: 1;
  background: linear-gradient(to bottom, transparent 15%, #000 15%, #000 85%, transparent 85%);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  /* Фикс для части мобильных браузеров: не раздувать текст в абсолютной верстке карточек */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #000;
  color: #fff;
  overflow-x: hidden;
}

/* Глобальный --scale для элементов, которые лежат вне .frame (например, .bg-image
 * вынесен в body, чтобы растягиваться на всю ширину viewport). Значение совпадает
 * с тем, что определено внутри .frame ниже. На мобайле переопределяется в media
 * query (см. блок @media max-width: 480px). */
:root {
  --scale: min(100vw / 1920px, 100vh / 1080px);
}

.frame {
  --scale: min(100vw / 1920px, 100vh / 1080px);
  --font-scale-x: 0.95;
  --font-scale-y: 1.05;
  --screen-left: calc(237px * var(--scale));
  
  /* === SPACING SYSTEM v1.0 === 
   * Base: 8px
   * Desktop sections gap: 96px
   * Mobile sections gap: 32px
   * Все отступы кратны 8px для визуальной консистентности
   */
  --spacing-unit: 8px;
  --spacing-xs: calc(var(--spacing-unit) * 1);    /* 8px */
  --spacing-sm: calc(var(--spacing-unit) * 2);    /* 16px */
  --spacing-md: calc(var(--spacing-unit) * 3);    /* 24px */
  --spacing-lg: calc(var(--spacing-unit) * 4);    /* 32px */
  --spacing-xl: calc(var(--spacing-unit) * 5);    /* 40px */
  --spacing-2xl: calc(var(--spacing-unit) * 6);   /* 48px */
  --spacing-3xl: calc(var(--spacing-unit) * 8);   /* 64px */
  --spacing-4xl: calc(var(--spacing-unit) * 10);  /* 80px */
  --spacing-5xl: calc(var(--spacing-unit) * 12);  /* 96px */
  --spacing-6xl: calc(var(--spacing-unit) * 14);  /* 112px */
  
  /* Section spacing - Desktop */
  --section-gap: calc(var(--spacing-5xl) * var(--scale));     /* 96px */
  --section-pad: calc(var(--spacing-3xl) * var(--scale));     /* 64px */
  --section-end-gap: var(--section-gap);
  
  position: relative;
  width: calc(1920px * var(--scale));
  height: calc(1080px * var(--scale));
  overflow: hidden;
  background: #000;
  margin: 0 auto;
}

/* Hero: чуть ниже по высоте, чтобы экран выглядел компактнее */
main.frame[aria-label="Hero"] {
  /* Было: 1080px. Подкрути значение, если нужно больше/меньше. */
  height: calc(1000px * var(--scale));
  /* Прозрачный фон: чёрный фон под hero обеспечивает body, а .bg-image (вынесен
   * из main в body) теперь должен быть виден сквозь hero-фрейм. Если оставить
   * background: #000 от общего .frame — он перекроет фоновую картинку. */
  background: transparent;
}

section.frame {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  padding-left: var(--screen-left);
  padding-right: var(--screen-left);
}

/* Screen-3: чуть компактнее по вертикали (верх/низ) */
section.frame.screen-3 {
  --section-pad: calc(var(--spacing-lg) * var(--scale)); /* 32px вместо 64px (desktop): сжато сильнее */
  /*
   * ВАЖНО: элементы screen-3 почти все absolute + top в пикселях.
   * Поэтому padding/margin секции визуально почти не влияет на "воздух" внутри.
   * Реальная "высота/плотность" задаётся значениями top у элементов ниже.
   *
   * KISS-компрессия: оставляем верхнюю точку (якорь) как есть,
   * а все остальные top сжимаем относительно неё коэффициентом.
   */
  --screen-3-anchor-top: 50px;
  --screen-3-k: 0.8; /* 1 = без сжатия, меньше = компактнее */
  --screen-3-content-bottom: 730px; /* нижняя "опорная" точка контента (desktop) */
  --screen-3-content-extra: 220px;  /* запас снизу под текст/дыхание */

  /* Пользовательское требование: экран по высоте не фиксированный */
  height: auto;
  padding-bottom: calc(
    (
        var(--screen-3-anchor-top) +
        ((var(--screen-3-content-bottom) - var(--screen-3-anchor-top)) * var(--screen-3-k)) +
        var(--screen-3-content-extra)
      ) * var(--scale)
  );
}

section.frame + section.frame {
  margin-top: var(--section-gap);
}

/* Screen-3: уменьшаем зазор между экранами сверху/снизу */
section.frame + section.frame.screen-3 {
  margin-top: calc(var(--section-gap) / 2);
}

section.frame.screen-3 + section.frame {
  margin-top: calc(var(--section-gap) / 2);
}

section.frame:last-of-type {
  margin-bottom: var(--section-end-gap);
}

.bg-image {
  /* Desktop: фон занимает всю ширину viewport и начинается от самого верха страницы.
   *
   * Высота вычисляется пропорционально ширине viewport по натуральному соотношению
   * сторон исходной картинки (1442 × 878). Это даёт два важных свойства:
   *   1) фон НЕ обрезается сверху/снизу из-за object-fit: cover при 100vw;
   *   2) визуально совпадает с тем, как фон скомпонован в Figma — оранжевый glow
   *      целиком виден сверху.
   *
   * max-height ограничивает рост фона на очень широких экранах, чтобы он не
   * наезжал слишком сильно на следующий экран сайта. */
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: calc(100vw * 878 / 1442);
  max-height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.bg-image img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.text-content {
  position: absolute;
  left: 50%;
  top: calc(157px * var(--scale));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Ensure it doesn't collapse horizontally */
  pointer-events: none; /* Let clicks pass through if needed, though text usually selectable */
}

.headline {
  /* Position handling moved to .text-content */
  position: relative;
  width: 100%;
  max-width: calc(1260px * var(--scale));
  margin: 0;
  top: calc(-30px * var(--scale));
  transform: none;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  pointer-events: auto;
}

.subhead {
  /* Position handling moved to .text-content */
  position: relative;
  width: calc(568px * var(--scale));
  margin: 0;
  margin-top: calc(20px * var(--scale)); /* Adjusted gap based on previous positioning */
  top: calc(-30px * var(--scale));
  
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: center;
  pointer-events: auto;
}

.hero-subtitle {
  --subtitle-top: calc(520px * var(--scale));
  --subtitle-width: calc(1280px * var(--scale));
  --subtitle-height: calc(230px * var(--scale));
  --subtitle-font-size: calc(120px * var(--scale));
  --subtitle-letter-spacing: calc(-4.2px * var(--scale));
  --subtitle-line-gap: calc(110px * var(--scale));
  --subtitle-line2-offset: calc(520px * var(--scale));
  --num-size: calc(32px * var(--scale));
  --num-letter-spacing: calc(-1.2px * var(--scale));
  --num1-left: calc(0px * var(--scale));
  --num2-left: calc(var(--subtitle-width) - (140px * var(--scale)));
  --num3-left: calc(var(--subtitle-line2-offset) - (80px * var(--scale)));
  --num1-top: calc(-22px * var(--scale));
  --num2-top: calc(-22px * var(--scale));
  --num3-top: calc(var(--subtitle-line-gap) - (42px * var(--scale)));
  position: absolute;
  left: 50%;
  top: var(--subtitle-top);
  transform: translateX(-50%);
  width: var(--subtitle-width);
  height: var(--subtitle-height);
  pointer-events: none;
}

.hero-subtitle__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.tag-number {
  position: absolute;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: left;
  transform: none;
}

.tag-text {
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 50%;
  font-variation-settings: "wdth" 50, "wght" 1000;
  font-style: normal;
  text-transform: uppercase;
  text-align: left;
  transform-origin: left top;
  position: absolute;
  font-size: calc(80.443px * var(--scale) * 0.6666667);
  letter-spacing: calc(-4.0221px * var(--scale) * 0.6666667);
}

.tag-number-1 {
  left: calc(532px * var(--scale));
  top: calc(515px * var(--scale));
}

.tag-text-1 {
  left: calc(532px * var(--scale));
  top: calc(546px * var(--scale));
  transform: scale(var(--font-scale-x), var(--font-scale-y));
  width: calc(341px * var(--scale));
}

.tag-number-2 {
  left: calc(1115px * var(--scale));
  top: calc(595px * var(--scale));
}

.tag-text-2 {
  left: calc(1115px * var(--scale));
  top: calc(625px * var(--scale));
  font-size: calc(132.187px * var(--scale) * 0.6666667);
  letter-spacing: calc(-6.6094px * var(--scale) * 0.6666667);
  transform: scale(var(--font-scale-x), var(--font-scale-y));
  width: calc(303px * var(--scale));
}

.tag-number-3 {
  left: calc(825px * var(--scale));
  top: calc(832px * var(--scale));
}

.tag-text-3 {
  left: calc(825px * var(--scale));
  top: calc(867px * var(--scale));
  transform: scale(var(--font-scale-x), var(--font-scale-y));
  width: calc(260px * var(--scale));
}

.bread {
  /* Параметры затемнения снизу (см. .bread::after).
   * --bread-fade-height   — какую часть высоты хлеба покрывает градиент сверху вниз
   *                         (70% = ~две трети картинки растворяются в чёрном).
   * --bread-fade-strength — насыщенность чёрного у нижней кромки (0..1).
   * --bread-fade-hold     — до какой высоты градиента держится ПОЛНЫЙ чёрный
   *                         перед плавным переходом к прозрачному. Чем больше,
   *                         тем сильнее визуально «придавлен» низ. */
  --bread-fade-height: 70%;
  --bread-fade-strength: 1;
  --bread-fade-hold: 35%;

  position: absolute;
  left: calc(567px * var(--scale));
  top: calc(526px * var(--scale));
  width: calc(786px * var(--scale));
  height: calc(525px * var(--scale));
  pointer-events: none;
}

.bread img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* Чёрное затемнение снизу: плавно растворяет нижнюю часть хлеба в фоне сцены.
 * Накладывается поверх <img> (через z-order у ::after), на клики не реагирует.
 * Градиент с тремя стопами: 0% — полный чёрный у самой кромки, до --bread-fade-hold
 * чёрный держится без изменений (плотная «подложка»), и только дальше уходит
 * в прозрачное к 100%. Это делает низ заметно тяжелее, чем простой линейный спад. */
.bread::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bread-fade-height);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--bread-fade-strength)) 0%,
    rgba(0, 0, 0, var(--bread-fade-strength)) var(--bread-fade-hold),
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.screen-2 {
  height: auto;
}

/* Одинаковые отступы сверху и снизу */
.screen-2__title {
  margin-top: 0;
}

.screen-2__cards {
  margin-bottom: 0;
}

.screen-2::after {
  content: "";
  position: absolute;
  top: calc(170px * var(--scale));
  right: 0;
  width: calc(602px * var(--scale));
  height: calc(522px * var(--scale));
  background: linear-gradient(-90deg, #000 39.867%, rgba(0, 0, 0, 0) 76.21%);
  pointer-events: none;
  z-index: 2;
}

.screen-2__title {
  margin: 0;
  margin-bottom: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
}

.screen-2__hint {
  margin-top: calc(var(--spacing-md) * var(--scale));
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-sm) * var(--scale));
  opacity: 0.5;
}

.screen-2__bars {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-xs) / 2 * var(--scale));
  height: calc(32px * var(--scale));
}

.screen-2__bar {
  display: block;
  height: calc(32px * var(--scale));
  background: #fff;
}

.screen-2__bar--1 {
  width: calc(3.1373px * var(--scale));
}

.screen-2__bar--2 {
  width: calc(10.0392px * var(--scale));
}

.screen-2__bar--3 {
  width: calc(17.5686px * var(--scale));
}

.screen-2__hint-text {
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

/* Стрелка вправо после текста подсказки.
 * Размер согласован с font-size .screen-2__hint-text (desktop: ~27.855px),
 * на мобайле переопределяется в media query ниже.
 * Цвет — белый, прозрачность управляется родителем .screen-2__hint (opacity: 0.5). */
.screen-2__hint-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(27.855px * var(--scale));
  height: calc(27.855px * var(--scale));
  color: #fff;
}

.screen-2__hint-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.screen-2__cards {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--spacing-4xl) * var(--scale));
  display: flex;
  gap: calc(var(--spacing-sm) * var(--scale));
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-right: calc(var(--spacing-4xl) * var(--scale));
}

.screen-2__cards::-webkit-scrollbar {
  display: none;
}

.screen-2__cards {
  scrollbar-width: none; /* Firefox */
}

.screen-2__card {
  position: relative;
  flex: 0 0 auto;
  width: calc(310px * var(--scale));
  height: calc(420px * var(--scale));
  border: calc(0.2px * var(--scale)) solid #fff;
  border-radius: calc(38px * var(--scale));
  overflow: hidden;
  scroll-snap-align: start;
}

.screen-2__card-text,
.screen-3__text,
.screen-3__num {
  position: absolute;
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  text-align: left;
}

.screen-2__card-text {
  left: calc(18px * var(--scale));
}

.screen-2__card-text--1 {
  top: calc(253.8px * var(--scale));
  width: calc(267px * var(--scale));
}

.screen-2__card-text--2 {
  top: calc(287.8px * var(--scale));
  width: calc(218px * var(--scale));
}

.screen-2__card-text--3 {
  top: calc(287.8px * var(--scale));
  width: calc(236px * var(--scale));
}

.screen-2__card-text--4 {
  top: calc(287.8px * var(--scale));
  width: calc(286px * var(--scale));
}

.screen-2__card-text--5 {
  top: calc(321.4px * var(--scale));
  width: calc(286px * var(--scale));
}

.screen-2__card-text--6 {
  top: calc(287.4px * var(--scale));
  width: calc(259px * var(--scale));
}

.screen-2__card-text--7 {
  top: calc(287.4px * var(--scale));
  width: calc(259px * var(--scale));
}

.screen-2__image {
  position: absolute;
  pointer-events: none;
}

.screen-2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-2__image--1 {
  left: calc(61.8px * var(--scale));
  top: calc(-40.2px * var(--scale));
  width: calc(330px * var(--scale));
  height: calc(330px * var(--scale));
}

.screen-2__image--2 {
  left: calc(73.8px * var(--scale));
  top: calc(-16.2px * var(--scale));
  width: calc(320px * var(--scale));
  height: calc(320px * var(--scale));
}

.screen-2__image--3 {
  left: calc(60.8px * var(--scale));
  top: calc(-32.2px * var(--scale));
  width: calc(346px * var(--scale));
  height: calc(346px * var(--scale));
}

.screen-2__image--4 {
  left: calc(22.8px * var(--scale));
  top: calc(-41.2px * var(--scale));
  width: calc(342px * var(--scale));
  height: calc(342px * var(--scale));
}

.screen-2__image--5 {
  left: calc(17.4px * var(--scale));
  top: calc(-57.6px * var(--scale));
  width: calc(386px * var(--scale));
  height: calc(386px * var(--scale));
}

.screen-2__image--6 {
  left: calc(46.4px * var(--scale));
  top: calc(-19.6px * var(--scale));
  width: calc(358px * var(--scale));
  height: calc(358px * var(--scale));
}

.screen-2__image--7 {
  left: calc(-0.6px * var(--scale));
  top: calc(-61.6px * var(--scale));
  width: calc(410px * var(--scale));
  height: calc(410px * var(--scale));
}

.screen-3__title {
  position: absolute;
  left: var(--screen-left);
  top: calc(
    (var(--screen-3-anchor-top) + ((50px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
  transform: none;
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.screen-3__title-highlight {
  padding: 0;
  line-height: 1;
  background: linear-gradient(
    to bottom,
    transparent 15%,
    #ff5900 15%,
    #ff5900 85%,
    transparent 85%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-3__title-break {
  display: none;
}

.screen-3__dots {
  position: absolute;
  left: var(--screen-left);
  top: calc(
    (var(--screen-3-anchor-top) + ((297px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
  display: flex;
  align-items: center;
}

.screen-3__dot {
  display: block;
  width: calc(26.5424px * var(--scale));
  height: calc(26.5424px * var(--scale));
}

.screen-3__dot + .screen-3__dot {
  margin-left: calc(-8.112px * var(--scale));
}

.screen-3__line {
  position: absolute;
  left: calc(-373px * var(--scale));
  width: calc(3005px * var(--scale));
  height: calc(0.5px * var(--scale));
  background: #fff;
}

.screen-3__line--1 {
  top: calc(
    (var(--screen-3-anchor-top) + ((400px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__line--2 {
  top: calc(
    (var(--screen-3-anchor-top) + ((637px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__text--1 {
  left: var(--screen-left);
  top: calc(
    (var(--screen-3-anchor-top) + ((335px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__text--2 {
  left: calc(50% - (372px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((577px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__text--3 {
  left: calc(50% + (53px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((830px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__num {
  opacity: 0.5;
}

.screen-3__num--1 {
  left: calc(50% + (646px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((335px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__num--2 {
  left: calc(50% + (643px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((577px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__num--3 {
  left: calc(50% + (646px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((830px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__icon {
  position: absolute;
  color: #ff5900;
  width: calc(28px * var(--scale));
  height: calc(28px * var(--scale));
}

.screen-3__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.screen-3__icon--eye {
  left: calc(50% - (372px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((533px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-3__icon--refresh {
  left: calc(50% + (53px * var(--scale)));
  top: calc(
    (var(--screen-3-anchor-top) + ((786px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
      var(--scale)
  );
}

.screen-4 {
  height: auto;
}

.screen-4__title,
.screen-5__title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
}

.screen-4__title {
  margin: 0;
}

.screen-4__title-mark {
  display: none;
}

.screen-4__grid {
  margin-top: calc(var(--spacing-4xl) * var(--scale));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: calc(var(--spacing-6xl) * var(--scale));
  column-gap: calc(140px * var(--scale));
  align-items: start;
}

.screen-4__item {
  position: relative;
  width: 100%;
  max-width: calc(561px * var(--scale));
}

.screen-4__num {
  display: inline-block;
  margin-bottom: calc(18px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(30.046px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.9014px * var(--scale));
  opacity: 0.5;
  color: #fff;
}

.screen-4__photo {
  width: 100%;
  height: auto;
  border: none;
  border-radius: calc(18px * var(--scale));
  background-color: #000;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  margin-bottom: calc(26px * var(--scale));
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 3 / 1;
}

.screen-4__photo--7 {
  width: 30%;
  aspect-ratio: 162 / 176;
}

/* Коллажная версия .screen-4__photo: внутри лежат несколько повёрнутых
 * картинок-полароидов вместо одного фонового изображения.
 * Применяется в пунктах 02, 04, 05, 06 — точно как в макете Figma.
 *
 * Сам блок становится прозрачным контейнером с position: relative; внутри
 * абсолютно-позиционированные <img class="screen-4__photo-piece">. Координаты
 * и поворот каждого piece заданы inline-стилями — это позволяет легко двигать
 * отдельные карточки без раздувания CSS. */
.screen-4__photo--collage {
  position: relative;
  background: transparent;
  /* Тени и слегка повёрнутые края могут чуть выходить за блок — пусть будут
   * видны, не обрезаем. */
  overflow: visible;
}

.screen-4__photo-piece {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: calc(14px * var(--scale));
  box-shadow: 0 calc(6px * var(--scale)) calc(18px * var(--scale))
    rgba(0, 0, 0, 0.45);
  pointer-events: none;
  user-select: none;
}

.screen-4__photo--4 .screen-4__photo-piece {
  object-fit: contain;
}

.screen-4__item-title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(65.059px * var(--scale));
  line-height: 1;
  letter-spacing: calc(-3.253px * var(--scale));
  text-transform: uppercase;
  color: #fff;
}

.screen-4__item-highlight {
  padding: 0;
  line-height: 1;
  background: linear-gradient(
    to bottom,
    transparent 15%,
    #ff5900 15%,
    #ff5900 85%,
    transparent 85%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-4__list {
  list-style: none;
  margin: calc(var(--spacing-md) * var(--scale)) 0 0;
  padding: 0;
  display: grid;
  gap: calc(var(--spacing-sm) * var(--scale));
}

.screen-4__list li {
  position: relative;
  padding-left: calc(26px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-4__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.45em + (2px * var(--scale)));
  width: calc(10px * var(--scale));
  height: calc(10px * var(--scale));
  border-radius: 50%;
  background: #ff5900;
}

.screen-5 {
  height: auto;
}

.screen-5__title-break {
  display: block;
}

.screen-5__note {
  margin: calc(24px * var(--scale)) 0 0;
  width: calc(769px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: left;
  white-space: nowrap;
  color: #000;
}

.screen-5__note span {
  display: inline;
  background: #ff5900;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-5__rows {
  position: relative;
  margin-top: calc(var(--spacing-3xl) * var(--scale));
  margin-left: 0;
  margin-right: 0;
  background-image: linear-gradient(-90deg, #000 39.867%, rgba(0, 0, 0, 0) 76.21%);
  background-repeat: no-repeat;
  background-size: calc(602px * var(--scale)) calc(522px * var(--scale));
  background-position: right top;
}

.screen-5__row {
  display: grid;
  /* Левая колонка — узкая (для коротких категорий типа "Бизнес", "Финансы"),
   * правая — широкая, чтобы помещался длинный текст и список персон в подкастах. */
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  align-items: center;
  column-gap: calc(var(--spacing-xl) * var(--scale));
  padding: calc(var(--spacing-lg) * var(--scale)) 0;
  border-bottom: calc(0.5px * var(--scale)) solid #fff;
}

.screen-5__row--last {
  border-bottom: none;
  align-items: start;
}

.screen-5__row--more {
  display: none;
  border-bottom: none;
  padding-top: calc(16px * var(--scale));
  padding-bottom: 0;
}

.screen-5__topic,
.screen-5__desc,
.screen-5__more {
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-5__topic {
  opacity: 0.5;
  text-align: left;
  justify-self: start;
}

.screen-5__desc {
  text-align: right;
  justify-self: end;
  /* Раньше стояло white-space: nowrap — это ломало длинные тексты Figma
   * ("Финансы", "Разборы", блок подкастов). Теперь даём контенту переноситься
   * естественно, выравнивание остаётся по правому краю. */
}

/* Блок подкастов — это "богатый" desc с несколькими строками внутри:
 * заглавная фраза + 6 рядов с именами персон. Заставляем содержимое
 * рендериться построчно (display: block у самого desc и у внутренних рядов). */
.screen-5__desc--podcasts {
  display: block;
}

.screen-5__desc-line {
  display: block;
  margin-bottom: calc(var(--spacing-sm) * var(--scale));
}

.screen-5__person-row {
  display: block;
  margin-top: calc(var(--spacing-xs) * var(--scale));
}

/* Имя персоны: рендерится inline-block, перед каждым — оранжевый круглый
 * маркер через ::before. Несколько имён в одной строке разделяются автоматическим
 * пробелом + небольшим отступом слева (margin между .screen-5__person). */
.screen-5__person {
  display: inline-block;
  white-space: nowrap;
}

.screen-5__person + .screen-5__person {
  margin-left: calc(var(--spacing-md) * var(--scale));
}

.screen-5__person::before {
  content: "";
  display: inline-block;
  width: calc(10px * var(--scale));
  height: calc(10px * var(--scale));
  margin-right: calc(8px * var(--scale));
  border-radius: 50%;
  background: #ff5900;
  /* Поднимаем оптически к центру строки текста. */
  vertical-align: middle;
  position: relative;
  top: calc(-2px * var(--scale));
}

.screen-5__more {
  opacity: 0.7;
  font-size: calc(27.031px * var(--scale));
  letter-spacing: calc(-0.8109px * var(--scale));
}

.screen-6 {
  height: auto;
  --screen-6-table-min: calc(1312px * var(--scale));
  --screen-6-col-1-fr: 0.2561fr;
  --screen-6-col-2-fr: 0.4438fr;
  --screen-6-col-3-fr: 0.3001fr;
  --screen-6-row-head: calc(82px * var(--scale));
  --screen-6-row-1: calc(146px * var(--scale));
  --screen-6-row-2: calc(155px * var(--scale));
  --screen-6-row-3: calc(137px * var(--scale));
  --screen-6-col2-pad: calc(61px * var(--scale));
  --screen-6-col3-pad: calc(41px * var(--scale));
  --screen-6-table-gap: calc(var(--spacing-4xl) * var(--scale));
}

.screen-6__title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: left;
  color: #fff;
}

.screen-6__hint {
  display: none;
}

.screen-6__scroll {
  margin-top: var(--screen-6-table-gap);
  margin-left: 0;
  margin-right: 0;
}

.screen-6__table {
  width: max(100%, var(--screen-6-table-min));
  display: grid;
  grid-auto-flow: row;
  row-gap: 0;
}

.screen-6__row {
  display: grid;
  grid-template-columns: var(--screen-6-col-1-fr) var(--screen-6-col-2-fr) var(--screen-6-col-3-fr);
  border-bottom: calc(0.5px * var(--scale)) solid #fff;
}

.screen-6__row--head {
  height: var(--screen-6-row-head);
}

.screen-6__row--1 {
  height: var(--screen-6-row-1);
}

.screen-6__row--2 {
  height: var(--screen-6-row-2);
}

.screen-6__row--3 {
  height: var(--screen-6-row-3);
  border-bottom: none;
}

.screen-6__cell {
  display: flex;
  align-items: center;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
  text-align: left;
  padding-right: calc(24px * var(--scale));
}

.screen-6__row--1 .screen-6__cell,
.screen-6__row--2 .screen-6__cell,
.screen-6__row--3 .screen-6__cell {
  font-size: calc(27.855px * var(--scale));
}

.screen-6__cell--col-1,
.screen-6__cell--col-2 {
  border-right: calc(0.5px * var(--scale)) solid #fff;
}

.screen-6__cell--col-1 {
  padding-left: 0;
}

.screen-6__cell--col-2 {
  padding-left: var(--screen-6-col2-pad);
}

.screen-6__cell--col-3 {
  padding-left: var(--screen-6-col3-pad);
  padding-right: 0;
}

.screen-6__cell--head {
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(35.655px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-1.7827px * var(--scale));
  text-transform: uppercase;
}

.screen-6__cell--accent {
  color: #ff5900;
}

/* В data-строках (1/2/3) первая колонка содержит "номер режима" сверху +
 * название режима снизу. Поэтому переключаем flex-направление в column,
 * чтобы они шли друг под другом, а не в одну строку. */
.screen-6__row--1 .screen-6__cell--col-1,
.screen-6__row--2 .screen-6__cell--col-1,
.screen-6__row--3 .screen-6__cell--col-1 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: calc(10px * var(--scale));
}

/* Номер режима (01/02/03) — приглушённая цифра над названием режима.
 * Размер и letter-spacing взяты из Figma. */
.screen-6__num {
  display: block;
  margin: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(30.046px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.9014px * var(--scale));
  color: #fff;
  opacity: 0.5;
}

.screen-6__cell-label {
  display: block;
}

.screen-6__badge {
  display: inline;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  text-align: left;
  white-space: nowrap;
  background: #ff5900;
  color: #000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-6__text-wrap {
  display: inline-block;
  white-space: normal;
}

.screen-6__text-wrap--wide {
  max-width: calc(310px * var(--scale));
}

.screen-6__text-wrap--narrow {
  max-width: calc(310px * var(--scale));
}

.screen-6__text-wrap--col3 {
  max-width: calc(440px * var(--scale));
}

/* Screen-7: уменьшаем высоту секции снизу (срезаем нижний "хвост") */
section.frame.screen-7 {
  --screen-7-height: 960px; /* было 1080px как у всех frame */
  height: calc(var(--screen-7-height) * var(--scale));
}

.screen-7__title {
  position: absolute;
  left: 50%;
  top: calc(45px * var(--scale));
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(102.146px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-5.1073px * var(--scale));
  text-transform: uppercase;
  text-align: center;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff 0%, #000 158.91%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.screen-7__glow {
  position: absolute;
  left: calc(542px * var(--scale));
  top: calc(505px * var(--scale));
  width: calc(786px * var(--scale));
  height: calc(786px * var(--scale));
  pointer-events: none;
}

.screen-7__glow img {
  width: 100%;
  height: 100%;
  display: block;
}

.screen-7__phone {
  position: absolute;
  left: calc(705.984px * var(--scale));
  top: calc(149.58px * var(--scale));
  width: calc(508.608px * var(--scale));
  height: calc((1100.304px) * var(--scale));
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 calc(36px * var(--scale)) rgba(255, 89, 0, 0.45));
}

.screen-7__phone {
  object-fit: contain;
}

.screen-7__note {
  position: absolute;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(25px * var(--scale));
  line-height: 1.4;
  letter-spacing: calc(-0.6px * var(--scale));
  color: #fff;
  white-space: pre-line;
}

.screen-7__note-text {
  display: inline;
  background: #000;
  padding: calc(2px * var(--scale)) calc(8px * var(--scale));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.screen-7__note--left-top {
  left: calc(50% - (420px * var(--scale)));
  top: calc((280px + 40px) * var(--scale));
  white-space: nowrap;
}

.screen-7__note--left-mid {
  left: calc(50% - (380px * var(--scale)));
  top: calc((500px + 40px) * var(--scale));
  white-space: nowrap;
}

.screen-7__note--right-top {
  left: calc(50% + (390px * var(--scale)));
  top: calc((380px + 40px) * var(--scale));
  transform: translateX(-100%);
  text-align: right;
  white-space: nowrap;
}

.screen-7__note--right-bottom {
  left: calc(50% + (420px * var(--scale)));
  top: calc((600px + 40px) * var(--scale));
  width: calc(300px * var(--scale));
  transform: translateX(-100%);
  text-align: right;
  white-space: normal;
}

/* ============================================================
 * SCREEN-8: «Отзывы участников ХЛБ»
 * Десктоп: 2 колонки (цена слева — карусель отзывов справа), разделены
 *          вертикальной полупрозрачной линией.
 * Мобайл:  одна колонка, цена сверху, отзывы снизу, между ними
 *          горизонтальная линия (см. media-query внизу файла).
 * ============================================================ */

.screen-8 {
  height: auto;
}

/* Главный grid-контейнер: levая узкая колонка под цену + правая
 * широкая под заголовок/отзывы. На мобайле переключается на 1 колонку. */
.screen-8__layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  column-gap: calc(80px * var(--scale));
  align-items: start;
}

/* ----- Левая колонка: цена + caption ----- */
.screen-8__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(28px * var(--scale));
  /* В дизайне Figma цена визуально центрирована по высоте видео-карусели,
   * поэтому добавляем верхний отступ. */
  padding-top: calc(180px * var(--scale));
  /* Вертикальная разделительная линия между колонками — по правому краю. */
  padding-right: calc(80px * var(--scale));
  min-height: calc(485px * var(--scale));
}

/* Оранжевая плашка-кнопка с ценой. Текст подчёркнут (как в Figma). */
.screen-8__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px * var(--scale)) calc(40px * var(--scale));
  font-family: "SF Pro Display", "Arial", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(33.155px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.9946px * var(--scale));
  color: #000;
  background: #ff5900;
  border: none;
  border-radius: calc(17.204px * var(--scale));
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(2px * var(--scale));
  cursor: pointer;
}

.screen-8__caption {
  margin: 0;
  max-width: calc(369px * var(--scale));
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

/* ----- Правая колонка: заголовок + подсказка + видео-карусель ----- */
.screen-8__reviews-col {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--scale));
  /* min-width: 0 здесь нужен, потому что reviews-col лежит в grid-cell с
   * minmax(0, 1fr): без него flex-column получил бы intrinsic min-content,
   * равный ширине карусели (5 карточек), и распирал бы grid. */
  min-width: 0;
  /* Контент карусели (5 карточек подряд) длиннее самой колонки. Без overflow
   * на самой колонке внутренний flex-row карусели распирал бы её, и появлялась
   * "лишняя" карточка-огрызок справа от последней. */
  overflow: hidden;
}

.screen-8__title {
  margin: 0;
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(67.79px * var(--scale));
  line-height: 0.829;
  letter-spacing: calc(-3.3895px * var(--scale));
  text-transform: uppercase;
  color: #fff;
}

.screen-8__title-line {
  display: inline-block;
}

/* Подложка под "участников хлб" — оранжевый фон, чёрный текст,
 * декорационные паддинги совпадают с Figma. */
.screen-8__title-line--highlight {
  background: #ff5900;
  color: #000;
  padding: 0 calc(12px * var(--scale));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Перенос на новую строку между "Отзывы" и "участников хлб". */
.screen-8__title-line + .screen-8__title-line {
  display: block;
  margin-top: calc(8px * var(--scale));
}

/* ----- Подсказка "Листай →" ----- */
.screen-8__hint {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-sm) * var(--scale));
  opacity: 0.5;
}

.screen-8__hint-bars {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-xs) / 2 * var(--scale));
  height: calc(32px * var(--scale));
}

.screen-8__hint-bar {
  display: block;
  height: calc(32px * var(--scale));
  background: #fff;
}

.screen-8__hint-bar--1 { width: calc(3.137px * var(--scale)); }
.screen-8__hint-bar--2 { width: calc(10.039px * var(--scale)); }
.screen-8__hint-bar--3 { width: calc(17.569px * var(--scale)); }

.screen-8__hint-text {
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

.screen-8__hint-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(27.855px * var(--scale));
  height: calc(27.855px * var(--scale));
  color: #fff;
}

.screen-8__hint-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- Карусель видео-отзывов: горизонтальный скролл со снаппингом ----- */
.screen-8__carousel {
  display: flex;
  gap: calc(22px * var(--scale));
  /* Явная ширина 100% от reviews-col и обнулённый min-width — чтобы flex-row
   * содержимое (5 карточек) не делало карусель шире её колонки. */
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Прячем скроллбар, как в screen-2 — пользователь свайпает мышью/тачем. */
  scrollbar-width: none;
  /* Запас снизу, чтобы скроллбар на тачпадах не подрезал карточку. */
  padding-bottom: calc(8px * var(--scale));
}

.screen-8__carousel::-webkit-scrollbar {
  display: none;
}

.screen-8__review {
  /* Десктоп: ширина карточки рассчитывается так, чтобы РОВНО 3 карточки
   * + 2 gap'а заняли всю ширину карусели — независимо от ширины окна.
   * Иначе на «дробных» пропорциях справа была бы видна лишняя полоса
   * («огрызок» начала четвёртой карточки).
   *
   *   3 × card + 2 × gap = 100%
   *   card = (100% − 2 × gap) / 3
   *
   * На мобайле этот расчёт переопределяется (см. @media): там нужно
   * показывать ~1.5 карточки в кадре, чтобы пользователь понимал, что
   * можно листать дальше. */
  flex: 0 0 calc((100% - 2 * 22px * var(--scale)) / 3);
  scroll-snap-align: start;
  position: relative;
}

.screen-8__video {
  display: block;
  width: 100%;
  height: calc(485px * var(--scale));
  border-radius: calc(23px * var(--scale));
  background: #111;
  object-fit: cover;
  /* Лёгкая тень-«подложка» под карточку — карточки в Figma слегка приподняты. */
  box-shadow: 0 calc(8px * var(--scale)) calc(24px * var(--scale))
    rgba(0, 0, 0, 0.4);
}

/* ============================================================
 * SCREEN-9: финальный CTA-блок «Начать новую жизнь»
 * Десктоп: 2 колонки (слева плашка-кнопка + текст, справа хлеб).
 * Мобайл:  1 колонка (см. media-query внизу файла).
 * ============================================================ */

.screen-9 {
  height: auto;
  position: relative;
  /* Иконка-курсор слегка выходит за правый край плашки. Чтобы она не вылезала
   * за пределы фрейма — подрезаем по горизонтали, по вертикали оставляем visible
   * (хлеб может слегка возвышаться над секцией, и градиент-фейд снизу всё закроет). */
  overflow: hidden;
}

.screen-9__layout {
  /* На десктопе используем flex, а не grid: левая колонка (плашка + текст)
   * занимает фиксированную ширину под кнопку; правая колонка с хлебом
   * растягивается, но ограничена по ширине самим хлебом (max 786 × scale,
   * как в Figma 1:177). Между ними оставляем большой просвет, чтобы курсор-
   * рука НЕ налезала на хлеб. */
  display: flex;
  align-items: center;
  gap: calc(120px * var(--scale));
  min-height: calc(525px * var(--scale));
}

/* ----- Левая колонка: кнопка + текст ----- */
.screen-9__cta-col {
  display: flex;
  flex-direction: column;
  gap: calc(28px * var(--scale));
  align-items: flex-start;
  /* Колонка не должна расти — занимает столько, сколько нужно под плашку
   * + поясняющий текст. min-width: 0 защищает от распирания grid-родителя. */
  flex: 0 0 auto;
  min-width: 0;
}

/* Wrap нужен, чтобы иконка-курсор позиционировалась абсолютно
 * относительно плашки, а не относительно колонки. */
.screen-9__cta-wrap {
  position: relative;
  display: inline-block;
  /* Запас сверху/снизу под выступающую руку-курсор и её тень. */
  margin-bottom: calc(40px * var(--scale));
}

.screen-9__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Если шрифт ещё не догружен (или fallback Arial Black шире SF Pro
   * Compressed), нужно гарантировать, что текст не вылезет за края
   * скруглённой плашки. */
  overflow: hidden;
  padding: calc(24px * var(--scale)) calc(60px * var(--scale));
  font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
  font-weight: 1000;
  font-stretch: 47%;
  font-variation-settings: "wdth" 47, "wght" 1000;
  font-size: calc(67.79px * var(--scale));
  line-height: 1;
  letter-spacing: calc(-3.3895px * var(--scale));
  text-transform: uppercase;
  color: #fff;
  background: #ff5900;
  border: none;
  border-radius: calc(17.204px * var(--scale));
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.screen-9__cta:hover {
  filter: brightness(1.05);
}

.screen-9__cta:active {
  transform: translateY(calc(2px * var(--scale)));
}

/* Иконка-курсора (рука с указательным пальцем). Размещена внутри-снизу
 * правого края плашки, чуть приподнята над её нижней кромкой. Угол поворота
 * совпадает с дизайном Figma (-30.92°). Заводим курсор НЕМНОГО внутрь
 * плашки (right > 0), чтобы он не налезал на правый блок (хлеб). */
.screen-9__cta-cursor {
  position: absolute;
  right: calc(40px * var(--scale));
  bottom: calc(-50px * var(--scale));
  width: calc(110px * var(--scale));
  height: auto;
  transform: rotate(-30.92deg);
  pointer-events: none;
  user-select: none;
  animation: screen-9-cursor-tap 0.9s ease-in-out infinite;
  transform-origin: 50% 20%;
  will-change: transform;
}

@keyframes screen-9-cursor-tap {
  0%, 100% {
    transform: rotate(-30.92deg) scale(1);
  }
  50% {
    transform: rotate(-30.92deg) scale(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-9__cta-cursor {
    animation: none;
  }
}

.screen-9__text {
  margin: 0;
  /* max-width — это «упор», но width: 100% + min-width: 0 нужны, чтобы внутри
   * flex-column колонки текст реально мог переноситься. Без min-width: 0
   * flex-item получает intrinsic min-content = max-content и текст не ломается. */
  width: 100%;
  max-width: calc(428px * var(--scale));
  min-width: 0;
  font-family: "SF Pro Display", "Arial", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: calc(27.855px * var(--scale));
  line-height: 1.22;
  letter-spacing: calc(-0.8357px * var(--scale));
  color: #fff;
}

/* ----- Правая колонка: хлеб-тост с фейдом снизу ----- */
.screen-9__bread {
  position: relative;
  /* Хлеб занимает оставшееся пространство, но не больше натурального размера
   * из Figma (786 × 525 px). Это не даёт ему «расти» вправо на широких экранах
   * и налезать на левую колонку с кнопкой. */
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: calc(786px * var(--scale));
  height: calc(525px * var(--scale));
  margin-left: auto; /* прижимаем хлеб к правому краю секции */
  /* Параметры затемнения снизу — те же, что у hero-bread, чтобы общий
   * стиль был одинаковым по всему сайту. */
  --screen-9-bread-fade-height: 70%;
  --screen-9-bread-fade-strength: 1;
  --screen-9-bread-fade-hold: 30%;
}

.screen-9__bread img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Чёрный градиент снизу хлеба: верх прозрачный, к низу плотно-чёрный.
 * Полностью совпадает по поведению с .bread::after из hero-блока. */
.screen-9__bread::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--screen-9-bread-fade-height);
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--screen-9-bread-fade-strength)) 0%,
    rgba(0, 0, 0, var(--screen-9-bread-fade-strength))
      var(--screen-9-bread-fade-hold),
    rgba(0, 0, 0, 0) 100%
  );
}

@media (max-width: 480px) {
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Глобальный --scale для .bg-image (он лежит в body, вне .frame): синхронизируем
   * с расчётом из .frame ниже, чтобы фон масштабировался так же, как hero-фрейм.
   * ВАЖНО: знаменатель должен быть `440px` (length) — не просто `440`, иначе
   * деление length / number даёт length, а не unitless, и calc(440px * --scale)
   * становится length×length = invalid → элемент схлопывается в 0. */
  :root {
    --scale: calc(
      (
          100vw - env(safe-area-inset-left, 0px) -
            env(safe-area-inset-right, 0px)
        ) / 440px
    );
  }

  .frame {
    --mobile-w: 440px;
    --mobile-h: 956px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --scale-raw: (100vw - var(--safe-left) - var(--safe-right)) / var(--mobile-w);
    --scale: var(--scale-raw);
    --tag-scale: 0.6666667;
    --screen-left: calc(27px * var(--scale));
    --screen-5-mobile-text-size: calc(19.439px * var(--scale));
    --screen-5-mobile-letter: calc(-0.5832px * var(--scale));
    
    /* Section spacing - Mobile */
    --section-gap: calc(var(--spacing-xl) * var(--scale));    /* 32px */
    --section-pad: calc(var(--spacing-md) * var(--scale));    /* 24px */
    --section-end-gap: var(--section-gap);
    
    width: calc(var(--mobile-w) * var(--scale) + var(--safe-left) + var(--safe-right));
    height: calc(var(--mobile-h) * var(--scale) + var(--safe-top) + var(--safe-bottom));
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    margin: 0;
  }

  section.frame {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
    padding-left: var(--screen-left);
    padding-right: var(--screen-left);
  }

  /* Screen-3: чуть компактнее по вертикали (верх/низ) */
  section.frame.screen-3 {
    --section-pad: calc(var(--spacing-xs) * var(--scale)); /* 8px вместо 24px (mobile): сжато сильнее */
    --screen-3-anchor-top: 49px;
    --screen-3-k: 0.8;
    --screen-3-content-bottom: 592px; /* нижняя "опорная" точка контента (mobile) */
    --screen-3-content-extra: 180px;

    height: auto;
    padding-bottom: calc(
      (
          var(--screen-3-anchor-top) +
          ((var(--screen-3-content-bottom) - var(--screen-3-anchor-top)) * var(--screen-3-k)) +
          var(--screen-3-content-extra)
        ) * var(--scale)
    );
  }

  section.frame + section.frame {
    margin-top: var(--section-gap);
  }

  /* Screen-3: уменьшаем зазор между экранами сверху/снизу */
  section.frame + section.frame.screen-3 {
    margin-top: calc(var(--section-gap) / 2);
  }

  section.frame.screen-3 + section.frame {
    margin-top: calc(var(--section-gap) / 2);
  }

  section.frame:last-of-type {
    margin-bottom: var(--section-end-gap);
  }

  .frame[aria-label="Hero"] {
    --hero-shift: calc(-60px * var(--scale));
  }

  /* Hero (mobile): обрезаем высоту сильнее */
  main.frame[aria-label="Hero"] {
    height: calc(820px * var(--scale));
  }

  .bg-image {
    left: 0;
    top: calc(-24px * var(--scale));
    width: calc(440px * var(--scale));
    height: calc(1171.9365px * var(--scale));
  }

  .bg-image img {
    left: -52.21%;
    top: -7.63%;
    width: 543.1%;
    height: 114.69%;
    max-width: none;
    transform: none;
  }

  .text-content {
    left: 50%;
    top: calc(151px * var(--scale) + var(--hero-shift, 0px));
    transform: translateX(-50%);
    width: calc(400px * var(--scale));
  }

  .headline {
    width: 100%;
    max-width: calc(400px * var(--scale));
    margin: 0;
    transform: none;
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
  }

  .headline .highlight {
    line-height: 1.2;
  }

  .subhead {
    width: calc(302px * var(--scale));
    margin-top: calc(40px * var(--scale));
    font-size: calc(20.303px * var(--scale));
    letter-spacing: calc(-0.6091px * var(--scale));
    line-height: 1.22;
  }

  .hero-subtitle {
    --subtitle-top: calc(520px * var(--scale) + var(--hero-shift, 0px));
    --subtitle-width: calc(400px * var(--scale));
    --subtitle-height: calc(160px * var(--scale));
    --subtitle-font-size: calc(56px * var(--scale));
    --subtitle-letter-spacing: calc(-2.2px * var(--scale));
    --subtitle-line-gap: calc(64px * var(--scale));
    --subtitle-line2-offset: calc(220px * var(--scale));
    --num-size: calc(18px * var(--scale));
    --num-letter-spacing: calc(-0.8px * var(--scale));
    --num1-left: calc(0px * var(--scale));
    --num2-left: calc(var(--subtitle-width) - (60px * var(--scale)));
    --num3-left: calc(var(--subtitle-line2-offset) - (40px * var(--scale)));
    --num1-top: calc(-12px * var(--scale));
    --num2-top: calc(-12px * var(--scale));
    --num3-top: calc(var(--subtitle-line-gap) - (26px * var(--scale)));
  }

  .bread {
    left: calc(-98.2474px * var(--scale));
    top: calc(621px * var(--scale) + var(--hero-shift, 0px));
    width: calc(657.2457px * var(--scale));
    height: calc(439px * var(--scale));
  }

  .bread img {
    left: -0.06%;
    top: 0;
    width: 100%;
    height: 149.71%;
    transform: none;
  }

  .tag-number {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(calc(var(--tag-scale) * 1.5));
    transform-origin: left top;
  }

  .tag-text {
    background: none;
    display: block;
    text-align: left;
    transform: scale(calc(var(--tag-scale) * 1.1));
    transform-origin: left top;
    font-family: "SF Pro Variable", "SF Pro Compressed", "Arial Black", sans-serif;
    font-weight: 1000;
    text-transform: uppercase;
  }

  .tag-text {
    font-variation-settings: "wdth" 47, "wght" 1000;
    font-stretch: 47%;
  }

  .tag-number .highlight {
    background: none;
    padding: 0;
  }

  .tag-number-1 {
    left: calc(57px * var(--scale));
    top: calc(505px * var(--scale) + var(--hero-shift, 0px));
    width: calc(21.2258px * var(--scale));
    height: calc(31.4964px * var(--scale));
    font-size: calc(19.073px * var(--scale));
    letter-spacing: calc(-0.5722px * var(--scale));
  }

  .tag-text-1 {
    left: calc(57px * var(--scale));
    top: calc(522.9643px * var(--scale) + var(--hero-shift, 0px));
    width: calc(235.5384px * var(--scale));
    height: calc(55.4611px * var(--scale));
    font-size: calc(55.08px * var(--scale));
    letter-spacing: calc(-2.754px * var(--scale));
    line-height: 0.829;
    transform: scale(var(--tag-scale));
  }

  .tag-number-2 {
    left: calc(172px * var(--scale));
    top: calc(594px * var(--scale) + var(--hero-shift, 0px));
    width: calc(25.1031px * var(--scale));
    height: calc(37.2497px * var(--scale));
    font-size: calc(22.557px * var(--scale));
    letter-spacing: calc(-0.6767px * var(--scale));
  }

  .tag-text-2 {
    left: calc(172px * var(--scale));
    top: calc(617.1526px * var(--scale) + var(--hero-shift, 0px));
    width: calc(245.3621px * var(--scale));
    height: calc(97.9829px * var(--scale));
    font-size: calc(89.202px * var(--scale));
    letter-spacing: calc(-4.4601px * var(--scale));
    line-height: 0.829;
    transform: scale(var(--tag-scale));
  }

  .tag-number-3 {
    left: calc(65px * var(--scale));
    top: calc(747.0004px * var(--scale) + var(--hero-shift, 0px));
    width: calc(25.5803px * var(--scale));
    height: calc(37.9578px * var(--scale));
    font-size: calc(22.986px * var(--scale));
    letter-spacing: calc(-0.6896px * var(--scale));
  }

  .tag-text-3 {
    left: calc(65px * var(--scale));
    top: calc(772.3579px * var(--scale) + var(--hero-shift, 0px));
    width: calc(226.9219px * var(--scale));
    height: calc(66.8388px * var(--scale));
    font-size: calc(66.379px * var(--scale));
    letter-spacing: calc(-3.319px * var(--scale));
    line-height: 0.829;
    transform: scale(var(--tag-scale));
  }

  .screen-2 {
    height: auto;
  }

  .screen-2::after {
    content: none;
  }

  /* Одинаковые отступы сверху и снизу - Mobile */
  .screen-2__title {
    margin-top: 60px;
    margin-bottom: 0;
  }

  .screen-2__cards {
    margin-bottom: 0;
  }

  .screen-2__title {
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
  }

  .screen-2__hint {
    margin-top: calc(var(--spacing-sm) * var(--scale));
    gap: calc(var(--spacing-sm) * var(--scale));
  }

  .screen-2__bars {
    gap: calc(3px * var(--scale));
    height: calc(22.9234px * var(--scale));
  }

  .screen-2__bar {
    height: calc(22.9234px * var(--scale));
  }

  .screen-2__bar--1 {
    width: calc(2.2474px * var(--scale));
  }

  .screen-2__bar--2 {
    width: calc(7.1917px * var(--scale));
  }

  .screen-2__bar--3 {
    width: calc(12.5854px * var(--scale));
  }

  .screen-2__hint-text {
    font-size: calc(19.954px * var(--scale));
    letter-spacing: calc(-0.5986px * var(--scale));
  }

  /* Mobile: стрелка пропорционально уменьшается вместе с текстом подсказки. */
  .screen-2__hint-arrow {
    width: calc(19.954px * var(--scale));
    height: calc(19.954px * var(--scale));
  }

  .screen-2__cards {
    margin-top: calc(var(--spacing-xl) * var(--scale));
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-right: calc(var(--spacing-xl) * var(--scale));
  }

  .screen-2__cards::-webkit-scrollbar {
    display: none;
  }

  .screen-2__card {
    width: calc(216.3364px * var(--scale));
    /* +14px запаса по высоте, чтобы нижние строки не обрезались на некоторых телефонах */
    height: calc(307.1009px * var(--scale));
    border: calc(0.14px * var(--scale)) solid #fff;
    border-radius: calc(26.519px * var(--scale));
    scroll-snap-align: start;
  }

  .screen-2__card-text,
  .screen-3__text {
    font-size: calc(19.439px * var(--scale));
    letter-spacing: calc(-0.5832px * var(--scale));
  }

  .screen-2__card-text {
    left: calc(12.5625px * var(--scale));
  }

  .screen-2__card-text--1 {
    top: calc(177.12px * var(--scale));
    width: calc(186.3284px * var(--scale));
  }

  .screen-2__card-text--2 {
    top: calc(200.84px * var(--scale));
    width: calc(152.1333px * var(--scale));
  }

  .screen-2__card-text--3 {
    top: calc(200.84px * var(--scale));
    width: calc(164.6948px * var(--scale));
  }

  .screen-2__card-text--4 {
    top: calc(200.84px * var(--scale));
    width: calc(199.5878px * var(--scale));
  }

  .screen-2__card-text--5 {
    top: calc(224.4px * var(--scale));
    width: calc(199.5878px * var(--scale));
  }

  .screen-2__card-text--6 {
    top: calc(200.6px * var(--scale));
    width: calc(180.8px * var(--scale));
  }

  .screen-2__card-text--7 {
    top: calc(200.6px * var(--scale));
    width: calc(180.8px * var(--scale));
  }

  .screen-2__image--1 {
    left: calc(43.13px * var(--scale));
    top: calc(-28.05px * var(--scale));
    width: calc(230.2936px * var(--scale));
    height: calc(230.2936px * var(--scale));
  }

  .screen-2__image--2 {
    left: calc(51.5px * var(--scale));
    top: calc(-11.31px * var(--scale));
    width: calc(223.315px * var(--scale));
    height: calc(223.315px * var(--scale));
  }

  .screen-2__image--3 {
    left: calc(42.43px * var(--scale));
    top: calc(-22.47px * var(--scale));
    width: calc(241.4593px * var(--scale));
    height: calc(241.4593px * var(--scale));
  }

  .screen-2__image--4 {
    left: calc(15.91px * var(--scale));
    top: calc(-28.75px * var(--scale));
    width: calc(238.6679px * var(--scale));
    height: calc(238.6679px * var(--scale));
  }

  .screen-2__image--5 {
    left: calc(12.14px * var(--scale));
    top: calc(-40.2px * var(--scale));
    width: calc(269.4px * var(--scale));
    height: calc(269.4px * var(--scale));
  }

  .screen-2__image--6 {
    left: calc(32.4px * var(--scale));
    top: calc(-13.7px * var(--scale));
    width: calc(249.9px * var(--scale));
    height: calc(249.9px * var(--scale));
  }

  .screen-2__image--7 {
    left: calc(-0.4px * var(--scale));
    top: calc(-43px * var(--scale));
    width: calc(286.2px * var(--scale));
    height: calc(286.2px * var(--scale));
  }

  .screen-3__title {
    left: var(--screen-left);
    top: calc(
      (var(--screen-3-anchor-top) + ((49px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
    white-space: normal;
  }

  .screen-3__title-highlight,
  .screen-8__title-highlight {
    padding: 0;
    line-height: 1;
  }

  .screen-3__title-break {
    display: block;
  }

  .screen-3__dots {
    left: var(--screen-left);
    top: calc(
      (var(--screen-3-anchor-top) + ((297px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__dot + .screen-3__dot {
    margin-left: calc(-9px * var(--scale));
  }

  .screen-3__line {
    left: calc(23px * var(--scale));
    width: calc(3005px * var(--scale));
  }

  .screen-3__line--1 {
    top: calc(
      (var(--screen-3-anchor-top) + ((435px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__line--2 {
    top: calc(
      (var(--screen-3-anchor-top) + ((602px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__text--1 {
    left: var(--screen-left);
    top: calc(
      (var(--screen-3-anchor-top) + ((335px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    width: calc(288px * var(--scale));
  }

  .screen-3__text--2 {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((507px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    width: calc(329px * var(--scale));
  }

  .screen-3__text--3 {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((692px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
    width: calc(329px * var(--scale));
  }

  .screen-3__num--1 {
    display: none;
  }

  .screen-3__num--2 {
    display: none;
  }

  .screen-3__num--3 {
    display: none;
  }

  .screen-3__icon--eye {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((463px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-3__icon--refresh {
    left: calc(23px * var(--scale));
    top: calc(
      (var(--screen-3-anchor-top) + ((648px - var(--screen-3-anchor-top)) * var(--screen-3-k))) *
        var(--scale)
    );
  }

  .screen-4 {
    height: auto;
  }

  .screen-4__title {
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
    white-space: normal;
  }

  .screen-5__title {
    font-size: calc(73.173px * var(--scale));
    letter-spacing: calc(-3.6586px * var(--scale));
  }

  .screen-4__title-mark {
    display: inline;
  }

  .screen-4__grid {
    margin-top: calc(var(--spacing-xl) * var(--scale));
    grid-template-columns: 1fr;
    gap: calc(var(--spacing-3xl) * var(--scale));
  }

  .screen-4__item {
    max-width: none;
  }

  .screen-4__num {
    font-size: calc(27.031px * var(--scale));
    letter-spacing: calc(-0.8109px * var(--scale));
  }

  .screen-4__photo {
    width: 100%;
    height: auto;
    border-radius: calc(16px * var(--scale));
  }

  .screen-4__photo--7 {
    width: 30%;
  }

  .screen-4__item-title {
    font-size: calc(42.0893px * var(--scale));
    letter-spacing: calc(-3.1567px * var(--scale));
  }

  .screen-4__item-highlight {
    padding: 0;
    line-height: 1;
  }

  .screen-4__list {
    margin-top: calc(var(--spacing-md) * var(--scale));
    gap: calc(var(--spacing-sm) * var(--scale));
  }

  .screen-4__list li {
    font-size: calc(19.439px * var(--scale));
    letter-spacing: calc(-0.5832px * var(--scale));
  }

  .screen-5 {
    height: auto;
  }

  .screen-5__title {
    font-size: calc(50.8146px * var(--scale));
    line-height: 0.829;
    letter-spacing: calc(-2.5407px * var(--scale));
  }

  .screen-5__note {
    margin-top: calc(var(--spacing-md) * var(--scale));
    width: calc(345px * var(--scale));
    white-space: normal;
  }

  .screen-5__note,
  .screen-5__topic,
  .screen-5__desc,
  .screen-5__more {
    font-size: var(--screen-5-mobile-text-size);
    letter-spacing: var(--screen-5-mobile-letter);
  }

  .screen-6__row--1 .screen-6__cell,
  .screen-6__row--2 .screen-6__cell,
  .screen-6__row--3 .screen-6__cell {
    font-size: var(--screen-5-mobile-text-size);
  }

  .screen-6__badge {
    font-size: var(--screen-5-mobile-text-size);
    letter-spacing: var(--screen-5-mobile-letter);
  }

  .screen-5__rows {
    margin-top: calc(var(--spacing-lg) * var(--scale));
    margin-left: 0;
    margin-right: 0;
    background: none;
  }

  .screen-5__row {
    grid-template-columns: 1fr;
    row-gap: calc(var(--spacing-sm) * var(--scale));
    padding: calc(var(--spacing-md) * var(--scale)) 0;
  }

  .screen-5__desc {
    text-align: left;
    justify-self: start;
    white-space: normal;
    /* На мобайле desc-колонка занимает всю доступную ширину контейнера.
     * Раньше стояло 315px*scale — это резало длинные имена в "Подкастах". */
    width: 100%;
    max-width: 100%;
  }

  /* Подкасты: на мобайле каждое имя становится отдельной строкой и переносится,
   * если не влезает. Так длинные имена ("Никита Вильчинский (режиссёр клипов
   * Travis Scott, INSTASAMKA)") видны целиком, а не обрезаются справа. */
  .screen-5__person {
    display: block;
    white-space: normal;
  }

  .screen-5__person + .screen-5__person {
    /* Сбрасываем десктопный горизонтальный отступ — на мобайле имена идут
     * друг под другом, отступ нужен сверху, а не слева. */
    margin-left: 0;
    margin-top: calc(var(--spacing-xs) * var(--scale));
  }

  .screen-5__person-row + .screen-5__person-row {
    margin-top: calc(var(--spacing-xs) * var(--scale));
  }

  .screen-5__row--more {
    display: none;
  }

  .screen-6 {
    /* Мобилка: делаем секцию компактнее по вертикали */
    --screen-6-table-gap: calc(var(--spacing-lg) * var(--scale));
    --screen-6-row-head: calc(68px * var(--scale));
    --screen-6-row-1: calc(120px * var(--scale));
    --screen-6-row-2: calc(124px * var(--scale));
    --screen-6-row-3: calc(112px * var(--scale));
  }

  /* Мобилка: секция "Как это работает" по высоте auto */
  section.frame.screen-6 {
    height: auto;
    --section-pad: calc(var(--spacing-sm) * var(--scale));
  }

  .screen-6__title {
    font-size: calc(56.448px * var(--scale));
    letter-spacing: calc(-2.8224px * var(--scale));
    width: calc(364px * var(--scale));
    white-space: pre-wrap;
  }

  .screen-6__hint {
    margin-top: calc(var(--spacing-sm) * var(--scale));
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-xs) * var(--scale));
    opacity: 0.5;
  }

  .screen-6__bars {
    display: flex;
    align-items: center;
    gap: calc(3px * var(--scale));
    height: calc(22.923px * var(--scale));
  }

  .screen-6__bar {
    display: block;
    height: calc(22.923px * var(--scale));
    background: #fff;
  }

  .screen-6__bar--1 {
    width: calc(2.247px * var(--scale));
  }

  .screen-6__bar--2 {
    width: calc(7.192px * var(--scale));
  }

  .screen-6__bar--3 {
    width: calc(12.585px * var(--scale));
  }

  .screen-6__hint-text {
    font-family: "SF Pro Display", "Arial", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: calc(19.954px * var(--scale));
    line-height: 1.22;
    letter-spacing: calc(-0.5986px * var(--scale));
    color: #fff;
  }

  .screen-6__scroll {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 0;
    margin-right: 0;
  }

  .screen-6__scroll::-webkit-scrollbar {
    display: none;
  }

  .screen-6__table {
    scroll-snap-align: start;
  }

  .screen-7__title {
    left: var(--screen-left);
    top: calc(48px * var(--scale));
    font-size: calc(50.8146px * var(--scale));
    letter-spacing: calc(-3.1761px * var(--scale));
    text-align: left;
    transform: none;
  }

  /* Screen-7: уменьшаем высоту секции снизу (мобилка) */
  section.frame.screen-7 {
    --screen-7-height: 760px;
    height: calc(var(--screen-7-height) * var(--scale));
  }

  .screen-7__glow {
    left: calc(20px * var(--scale));
    top: calc(450.01px * var(--scale));
    width: calc(381.062px * var(--scale));
    height: calc(381.062px * var(--scale));
  }

  .screen-7__phone {
    left: calc(63.8px * var(--scale));
    top: calc(30px * var(--scale));
    width: calc(316.36px * var(--scale));
    height: calc((902.16px + 30px) * var(--scale));
  }

  .screen-7__note {
    font-size: calc(16px * var(--scale));
    line-height: 1.4;
    letter-spacing: calc(-0.4px * var(--scale));
  }

  .screen-7__note--left-top {
    left: calc(50% - (200px * var(--scale)));
    top: calc((300px + 36px) * var(--scale));
    white-space: nowrap;
  }

  .screen-7__note--left-mid {
    left: calc(50% - (200px * var(--scale)));
    top: calc((470px + 36px) * var(--scale));
    white-space: nowrap;
  }

  .screen-7__note--right-top {
    left: calc(50% + (200px * var(--scale)));
    top: calc((360px + 36px) * var(--scale));
    white-space: nowrap;
  }

  .screen-7__note--right-bottom {
    left: calc(50% + (200px * var(--scale)));
    top: calc((530px + 36px) * var(--scale));
    width: calc(185px * var(--scale));
    font-size: calc(14px * var(--scale));
    letter-spacing: calc(-0.4px * var(--scale));
  }

  /* ============================================================
   * SCREEN-8 (мобайл): одна колонка, цена сверху, отзывы снизу.
   * Между ними — горизонтальная полупрозрачная линия (как в Figma).
   * ============================================================ */
  .screen-8__layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: calc(24px * var(--scale));
  }

  .screen-8__price-col {
    /* На мобайле убираем правую вертикальную линию и верхний padding,
     * добавляем нижний padding и горизонтальную линию-разделитель снизу. */
    border-right: none;
    border-bottom: calc(0.5px * var(--scale)) solid rgba(255, 255, 255, 0.5);
    padding-right: 0;
    padding-top: 0;
    padding-bottom: calc(24px * var(--scale));
    min-height: auto;
    align-items: flex-start;
    gap: calc(20px * var(--scale));
  }

  .screen-8__caption {
    max-width: 100%;
    font-size: calc(19.439px * var(--scale));
    letter-spacing: calc(-0.5832px * var(--scale));
  }

  .screen-8__price {
    padding: calc(16px * var(--scale)) calc(28px * var(--scale));
    font-size: calc(23.157px * var(--scale));
    border-radius: calc(12px * var(--scale));
  }

  .screen-8__title {
    /* На мобайле заголовок остаётся в две строки, но шрифт ужимается. */
    font-size: calc(50.8146px * var(--scale));
  }

  .screen-8__title-line--highlight {
    padding: 0 calc(8px * var(--scale));
  }

  .screen-8__hint-text {
    font-size: calc(19.954px * var(--scale));
    letter-spacing: calc(-0.5986px * var(--scale));
  }

  .screen-8__hint-arrow {
    width: calc(19.954px * var(--scale));
    height: calc(19.954px * var(--scale));
  }

  /* На мобайле карточки чуть уже, чтобы вторая видна примерно наполовину
   * (в макете Figma две карточки в кадре). */
  .screen-8__review {
    flex: 0 0 calc(273px * var(--scale));
  }

  /* Высоту карточки оставляем такой же, как на десктопе — 485 * scale.
   * scale на мобайле уже учитывает базовую ширину 440px. */

  /* Убираем фикс-высоту фрейма на мобиле. */
  section.frame.screen-8 {
    height: auto;
  }

  /* ============================================================
   * SCREEN-9 (мобайл): одна колонка — кнопка/текст сверху, хлеб снизу.
   * Layout переключаем на flex-direction: column. Сбрасываем боковые
   * gap и сторонние margin'ы, которые были у десктопа. */
  .screen-9__layout {
    flex-direction: column;
    align-items: stretch;
    gap: calc(28px * var(--scale));
    min-height: auto;
  }

  .screen-9__cta-col {
    width: 100%;
  }

  /* На мобайле плашка-кнопка занимает всю доступную ширину контейнера
   * screen-9 (за вычетом боковых паддингов фрейма). Это даёт максимум
   * места под текст «НАЧАТЬ НОВУЮ ЖИЗНЬ» — даже если SF Pro Variable
   * не догрузился и используется fallback (Arial Black), кнопка вместит
   * все буквы. Шрифт чуть уменьшен по той же причине. */
  .screen-9__cta-wrap {
    display: block;
    width: 100%;
    max-width: none;
    margin-bottom: calc(24px * var(--scale));
  }

  .screen-9__cta {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: calc(16px * var(--scale)) calc(18px * var(--scale));
    /* Адаптивный размер шрифта: даже если переменный SF Pro Variable
     * не догрузился и браузер падает на fallback Arial Black (он намного
     * шире SF Pro Compressed), текст «НАЧАТЬ НОВУЮ ЖИЗНЬ» гарантированно
     * вместится по ширине плашки на любом мобильном экране от 320 до 480 px.
     *
     *   нижняя граница — 22 px × scale (минимально читаемо, не разваливается)
     *   среднее значение — 7.5vw (~29 px на iPhone Pro 390, ~33 px на iPhone Pro Max 430)
     *   верхняя граница — 43.107 px × scale (как в Figma) */
    font-size: clamp(
      calc(22px * var(--scale)),
      7.5vw,
      calc(43.107px * var(--scale))
    );
    /* В em — чтобы letter-spacing адаптировался вместе со шрифтом. */
    letter-spacing: -0.05em;
    border-radius: calc(10.94px * var(--scale));
  }

  .screen-9__cta-cursor {
    width: calc(70px * var(--scale));
    right: calc(-15px * var(--scale));
    bottom: calc(-40px * var(--scale));
  }

  .screen-9__text {
    max-width: 100%;
    font-size: calc(19.954px * var(--scale));
    letter-spacing: calc(-0.5986px * var(--scale));
  }

  /* Хлеб занимает всю ширину viewport, сбрасываем десктопные ограничения. */
  .screen-9__bread {
    /* Соотношение 518:425 ≈ как в Figma (1:489). */
    height: calc(425px * var(--scale));
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .screen-9__bread img {
    object-position: center top;
  }

  section.frame.screen-9 {
    height: auto;
  }
}