/* ==========================================================================
   Аллертек Дерма — посадкова сторінка
   Мобільна база, десктопний макет від 900px.
   ========================================================================== */

/* ------------------------------------------------------------------ шрифти */
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/carlito-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/carlito-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/carlito-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/carlito-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ токени */
:root {
  --green-bar: #23a638;
  --green: #0a8d30;
  --green-card: #21b04a;
  --green-mid: #9fdf9e;
  --green-light: #a0df9f;
  --green-pale: #f1ffea;
  --green-glow: #bae7b9;
  --green-hairline: rgba(123, 198, 122, .3);
  --violet-from: #5a55d9;
  --violet-to: #322eac;
  --ink: #000;
  --ink-soft: #242424;
  --white: #fff;

  --font-display: 'Carlito', 'Calibri', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --page: 1280px;

  /* Плашка попередження. --warn-cap — висота ЛІТЕР (без виносних елементів «Д»)
     у відсотках висоти екрана. --warn-cap-ratio — частка, яку літери займають
     у боксі накреслення: 0.920 для мобільного (двострокового), 0.787 для
     десктопного (однострокового). Виміряно растром по самих ассетах.
     Щоб змінити вимогу — правити тільки --warn-cap. */
  --warn-cap: 17.5vh;
  --warn-cap-ratio: .920;
  --radius-card: 20px;
  --radius-promo: 14px;

  /* мобільні значення, на десктопі перевизначаються */
  --hero-title: 22px;
  --use-label: 25px;
  --benefit: 25px;
  --lead-title: 29px;
  --lead-sub: 24px;
  --feature-title: 24px;
  --badge-top: 14.59px;
  --badge-top-lh: 15.76px;
  --badge-big: 37.27px;
  --badge-big-lh: 40.25px;
  --badge-unit: 29.74px;
  --badge-kern: -4.85px;
  --gutter: 20px;
}

/* ------------------------------------------------------------------- база */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* у макетах тексти героя і ліду відрізняються між раскладками — тримаю обидва */
.only-desktop { display: none; }
@media (min-width: 900px) {
  .only-mobile { display: none; }
  .only-desktop { display: inline; }
}

:where(a, button):focus-visible {
  outline: 3px solid var(--violet-from);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- шапка */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--gutter);
  background: var(--green-bar);
}
/* Логотип у шапці є тільки в мобільному макеті. У десктопному нода Logo
   порожня (фрейм 13.85x19 без вмісту), тобто смуга лишається просто зеленою. */
.topbar__logo { width: 190px; }
.topbar__logo img { width: 100%; filter: brightness(0) invert(1); }

/* --------------------------------------------------------------- герой */
.hero {
  position: relative;
  padding-bottom: 23px;
  background: linear-gradient(180deg, var(--green-light) 0%, var(--white) 92%);
}
.hero__topper {
  display: block;
  width: 100%;
}
.hero__topper img { width: 100%; }

.hero__inner {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: 0 auto;
}
.hero__col { display: flex; flex-direction: column; align-items: center; }
.hero__pack { order: 1; width: 320px; max-width: 100%; margin-top: -45px; }
/* у макеті заливка обрізається по боксу (FILL), а не тягнеться пропорційно */
.hero__pack img { aspect-ratio: 320 / 176; object-fit: cover; }
.hero__title {
  order: 2;
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: var(--hero-title);
  font-weight: 700;
  line-height: 1.22;
  text-align: center;
  text-transform: uppercase;
}
.hero__cta { margin-top: 20px; text-align: center; }
.hero__instr {
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}
/* область натискання менша за 44px незручна для пальця — розширюю відступами,
   візуально нічого не змінюється */
.hero__instr a {
  display: inline-block;
  padding: 12px 16px;
  margin: -12px -16px;
  text-decoration: underline;
}
.hero__instr a:hover { text-decoration-thickness: 2px; }

.btn-order {
  display: block;
  width: 330px;
  max-width: 100%;
  margin: 0 auto;
  transition: transform .15s ease;
}
/* svg через <use> не має власних розмірів — браузер підставляє 300x150,
   тому пропорцію задаю явно */
.btn-order svg { width: 100%; height: auto; aspect-ratio: 422 / 48; }
.btn-order:hover { transform: translateY(-1px); }

/* ------------------------------------------------------- три показання */
.uses {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: 40px auto 0;
  padding: 20px 0;
}
.uses__list { display: flex; flex-direction: column; gap: 12px; }
.use-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border: 2px solid var(--green-hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 14.3px var(--green-mid);
}
.use-card__icon { width: 80px; }
.use-card__icon svg { width: 100%; height: auto; }
.use-card__label {
  min-height: 2.16em; /* две строки: в макете бокс подписи фиксирован */
  font-family: var(--font-display);
  font-size: var(--use-label);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  padding: 0 6px;
}

/* --------------------------------------------------- круг і чотири тези */
.benefits {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: 40px auto 0;
  padding: 0;
}
.benefits__grid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* у мобільному макеті коло йде першим, тези під ним, крапка ліворуч від тексту */
.circle { order: -1; }
.benefit--right .benefit__dot { order: -1; }

.circle {
  position: relative;
  width: 337px;
  max-width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
/* Частки кілець від контейнера. На мобільній і десктопній пропорції в макеті
   РІЗНІ (337 і 718 з різними діаметрами), тому це не одне масштабування. */
.circle {
  --ring-4: 94.2%;   /* Ellipse 17 */
  --ring-3: 83.9%;   /* Ellipse 12 */
  --ring-2: 0;       /* на мобільній третього кільця немає */
  --disc: 78.4%;     /* Ellipse 10, суцільний зелений */
  --photo: 74.3%;    /* Ellipse 11, маска фото */
}
.circle__glow,
.circle__ring,
.circle__disc,
.circle__photo {
  grid-area: 1 / 1;
  border-radius: 50%;
}
.circle__glow {
  width: 100%;
  height: 100%;
  /* градієнт у макеті розтягнутий трансформом за межі еліпса, тому видима частина
     (від краю фото до краю боксу) значно світліша за суцільний #bae7b9 */
  background: radial-gradient(circle,
    rgba(186, 231, 185, .85) 30%,
    rgba(186, 231, 185, .28) 58%,
    rgba(186, 231, 185, 0) 72%);
}
.circle__ring--4 { width: 88.3%; height: 88.3%; border: .93px solid rgba(10, 141, 48, .05); }
.circle__ring--3 { width: 74.5%; height: 74.5%; border: .93px solid rgba(10, 141, 48, .2); }
.circle__ring--2 { width: 62.8%; height: 62.8%; border: .93px solid var(--green); }
.circle__photo {
  /* у макеті маска 400 у групі 634 = 63.1%, зелене кільце Ellipse 10 = 422 = 66.6% */
  width: 55.7%;
  height: 55.7%;
  overflow: hidden;
  box-shadow: 0 0 0 11px var(--green);  /* Ellipse 10: 422 проти маски 400 */
}
.circle__photo picture { display: block; width: 100%; height: 100%; }
.circle__photo img { width: 100%; height: 100%; object-fit: cover; }

.benefits__col { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.benefit {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-display);
  font-size: var(--benefit);
  font-weight: 700;
  line-height: 1.08;
}

.benefit__dot {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
}
/* у макеті ліва колонка: текст, потім крапка (крапка ближче до кола) */

/* -------------------------------------------------------------- лід-блок */
.lead {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: 40px auto 0;
  padding: 0;
  text-align: center;
}
.lead__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--lead-title);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.lead__title b { font-weight: 700; }
.lead__sub {
  font-family: var(--font-display);
  font-size: var(--lead-sub);
  font-weight: 400;
  line-height: 1.33;
  text-transform: uppercase;
}

/* ------------------------------------------------------ контентні секції */
#f1 { margin-top: 32px; }
/* у мобільному макеті всі секції йдуть «зображення, потім текст» */
.feature--text-left .feature__media { order: -1; }
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 32px;
  background: var(--white);
}
.feature--tint { background: linear-gradient(90deg, var(--green-mid) 0%, var(--green-pale) 100%); }
.feature--tint-soft { background: linear-gradient(90deg, var(--green-mid) 0%, var(--white) 100%); }

.feature__media { position: relative; overflow: hidden; isolation: isolate; }
.feature__media img { width: 100%; aspect-ratio: 390 / 227; object-fit: cover; }

.feature__text {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: 0 auto;
}
.feature__title {
  margin: 0 0 16px;
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: var(--feature-title);
  font-weight: 700;
  line-height: 1.25;
  color: var(--green);
  text-transform: uppercase;
}
.feature__body { display: flex; align-items: center; gap: 16px; }
.feature__body--plain { display: block; }
.feature__icon { flex: 0 0 auto; width: 61px; }
.feature__icon--wide { width: 85px; }
.feature__icon svg { width: 100%; height: auto; }
.lead-line { font-weight: 700; font-size: 20px; line-height: 1.25; margin-bottom: 17px; }
.feature__body--plain .lead-line { margin-bottom: 20px; }

.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li,
.feature__body p { line-height: 22px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; }
.checklist__icon { flex: 0 0 auto; width: 22px; padding-top: 2px; }
.checklist__icon svg { width: 100%; height: auto; }

/* декоративні кола поверх фото */
/* Декоративні дуги поверх фото. У кожної секції власні координати з макета,
   у відсотках кадру — інакше не масштабуються. Значення зняті з design.json. */
.deco-circle {
  position: absolute;
  width: var(--deco-size);
  aspect-ratio: 1;
  border: 1.36px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  pointer-events: none;
}
.deco-circle--a { left: var(--deco-a-x); top: var(--deco-a-y); }
.deco-circle--b { left: var(--deco-b-x); top: var(--deco-b-y); }

/* мобільний кадр 390x227 */
#f1 .feature__media { --deco-size: 42.8%; --deco-a-x: 76.7%; --deco-a-y: 78.0%; --deco-b-x: 51.8%; --deco-b-y: 99.1%; }
#f2 .feature__media { --deco-size: 55.9%; --deco-a-x: 37.2%; --deco-a-y: -43.6%; --deco-b-x: 3.8%; --deco-b-y: -70.0%; }
#f3 .feature__media { --deco-size: 55.9%; --deco-a-x: -37.2%; --deco-a-y: -43.6%; --deco-b-x: 51.3%; --deco-b-y: 75.8%; }
#f4 .feature__media { --deco-size: 55.9%; --deco-a-x: 5.6%; --deco-a-y: -92.9%; --deco-b-x: -21.5%; --deco-b-y: -51.5%; }

/* бейджі */
.badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet-from) 0%, var(--violet-to) 100%);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}
.badge__top { font-size: var(--badge-top); line-height: var(--badge-top-lh); }
.badge__big { font-size: var(--badge-big); line-height: var(--badge-big-lh); }
.badge__unit { font-size: var(--badge-unit); }
.badge__kern { letter-spacing: var(--badge-kern); }
.badge--gel { left: 1.8%; top: 7px; }
.badge--family { left: 69%; top: 136px; }

/* ---------------------------------------------------------- фінальний блок */
.promo {
  width: min(100% - var(--gutter) * 2, var(--page));
  margin: 40px auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
/* Плеєр на місці зеленої картки. Пропорція з макета — 813x457, тобто рівно 16:9,
   тому висота не стрибає при зміні ширини. */
.promo__video {
  position: relative;
  width: 100%;
  max-width: 344px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-promo);
  overflow: hidden;
  background: #000;
}
.promo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.btn-order--wide { width: 330px; }

.promo__legal {
  width: 342px;
  max-width: 100%;
  color: var(--ink-soft);
  font-size: 9.754px;
  line-height: 11.705px;
  text-align: center;
}

/* ------------------------------------------------------------ нижня плашка */
/* Затверджене накреслення: плашка йде вектором з макета, без перемальовування
   текстом. Прибита до низу екрана, висота 15% екрана.
   svh, а не dvh: інакше смуга стрибає під час згортання адресного рядка. */
.warning {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: calc(var(--warn-cap) / var(--warn-cap-ratio));
  display: grid;
  place-items: center;
  padding: 6px 8px;
  background: var(--white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .1);
}
/* контент не має ховатися під плашкою */
body { padding-bottom: calc(var(--warn-cap) / var(--warn-cap-ratio)); }

.warning__art { width: 100%; height: 100%; }
.warning__art svg { width: 100%; height: 100%; }
.warning__art--desktop { display: none; }

/* ==========================================================================
   ДЕСКТОП
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --warn-cap-ratio: .787;
    --hero-title: 33.6px;
    --use-label: 25px;
    --benefit: 25px;
    --lead-title: 51.84px;
    --lead-sub: 32px;
    --feature-title: 26px;
    --badge-top: 20.598px;
    --badge-top-lh: 22.246px;
    --badge-big: 47.619px;
    --badge-big-lh: 51.429px;
    --badge-unit: 38px;
    --badge-kern: -6.1905px;
    --gutter: 40px;
  }

  .topbar { height: 33px; }
  .topbar__logo { display: none; }

  .hero { padding-bottom: 0; height: 513px; }
  .hero__topper { position: absolute; inset: 0 0 auto; }
  .hero__topper img { height: 341px; object-fit: cover; object-position: top center; }
  .hero__inner {
    display: flex;
    align-items: flex-end;
    gap: min(53px, 4vw);
    width: min(100% - 7.2vw, 1096px);
    height: 100%;
    padding: 0 0 25px;
  }
  .hero__col { align-items: flex-start; width: min(484px, 44%); flex: 0 0 auto; }
  .hero__title {
    order: 1;
    color: var(--white);
    /* у макеті текстовий бокс 445 всередині колонки 484, зі зсувом 19 */
    width: 445px;
    max-width: 100%;
    margin: 0 0 30px 19px;
    padding: 0;
    font-size: var(--hero-title);
    line-height: 1.22;
    text-align: center;
  }
  .hero__pack { order: 2; width: 100%; margin-top: 0; }
  .hero__pack img { aspect-ratio: 484 / 265; }
  .hero__cta { flex: 0 0 422px; margin: 0 0 42px; text-align: center; }
  .btn-order { width: min(422px, 100%); }

  .hero__instr { margin-top: 12px; line-height: 22px; }

  .uses { margin-top: 0; padding: 20px min(59px, 4.6vw); }
  .uses__list { flex-direction: row; justify-content: center; gap: min(77px, 6vw); }
  .use-card { flex: 0 1 315px; gap: 20px; padding: 20px 0; }
  .use-card__icon { width: 124px; }

  .benefits { margin-top: 0; padding: 0; height: 687px; position: relative; width: 100%; max-width: none; }
  .benefits__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0;
    height: 100%;
  }
  .circle { margin: 0; }
  .circle {
    width: min(718px, 50vw);
    --ring-4: 88.3%;   /* Ellipse 14 */
    --ring-3: 74.5%;   /* Ellipse 13 */
    --ring-2: 62.8%;   /* Ellipse 12 */
    --disc: 58.8%;     /* Ellipse 10 */
    --photo: 55.7%;    /* Ellipse 11 */
  }
  .circle__ring--4 { border-color: rgba(10, 141, 48, .05); }
  .circle__ring--3 { border-color: rgba(10, 141, 48, .2); }
  .circle__ring--2 { border-color: var(--green); }
  .benefits__col { gap: 0; justify-content: space-between; height: 420px; padding: 30px 0; min-width: 0; }

  /* від 1200 — точна сітка макета (координати з Frame 78, 1280x687) */
  @media (min-width: 1200px) {
    /* координати всередині блока — у відсотках від кадру макета 1280x687,
       тому контекст позиціонування треба обмежити цією шириною, інакше
       на широких екранах коло росте разом з екраном і провисає вниз */
    .benefits__grid { display: block; height: 100%; position: relative;
                      width: min(100%, var(--page)); margin: 0 auto; }
    .circle {
      position: absolute;
      left: 21.72%;
      top: -3.2%;
      width: 56.09%;
      margin: 0;
    }
    .benefits__col { display: contents; }
    /* тези поверх кола: у DOM вони йдуть раніше, інакше свічення їх перекриває */
    .benefit { position: absolute; width: max-content; max-width: none; padding: 0; z-index: 2; }
    .circle { z-index: 1; }
    /* ширини текстових боксів — з макета, вони задають перенос рядків */
    .benefits__col--left .benefit:first-child  { left: 11.64%; top: 22.42%; }
    .benefits__col--left .benefit:first-child .benefit__text  { width: 243px; }
    .benefits__col--left .benefit:last-child   { left:  8.05%; top: 68.41%; }
    .benefits__col--left .benefit:last-child .benefit__text   { width: 286px; }
    .benefits__col--right .benefit:first-child { left: 66.33%; top: 22.42%; }
    .benefits__col--right .benefit:first-child .benefit__text { width: 198px; }
    .benefits__col--right .benefit:last-child  { left: 66.56%; top: 68.41%; }
    .benefits__col--right .benefit:last-child .benefit__text  { width: 271px; }
  }
  /* між 900 і 1200 колонки затісні для примусових переносів з макета */
  .benefit__text { overflow-wrap: break-word; }
  @media (max-width: 1199px) { .benefit__text br { display: none; } }
  .benefits__col--left { align-items: flex-end; text-align: right; }
  /* на десктопі порядок з розмітки: ліва колонка дзеркальна — текст, потім крапка,
     і коло повертається в середню колонку гріда */
  .benefit--right .benefit__dot { order: 0; }
  .circle { order: 0; }
  .benefits__col--right { align-items: flex-start; }
  .benefit__dot { width: 19px; height: 19px; }
  @media (max-width: 1199px) {
    .benefits__col--left .benefit { max-width: 340px; padding-left: var(--gutter); }
    .benefits__col--right .benefit { max-width: 330px; padding-right: var(--gutter); }
  }

  .lead { margin-top: 0; padding: 0; }
  .lead__sub { margin-top: -4px; }

  /* контентні секції: дві колонки, фото з напівкруглим зовнішнім краєм */
  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    min-height: 350px;
  }
  /* у макеті зображення 600 при колонці 640: 600/640 = 93.75% */
  .feature__media { height: 350px; width: 93.75%; }
  .feature--text-left .feature__media { justify-self: end; }
  .feature--text-right .feature__media { justify-self: start; }
  #f1 { min-height: 392px; margin-top: 0; }
  #f1 .feature__text { align-self: start; margin-top: 100px; }
  .feature__media img { height: 350px; aspect-ratio: auto; }
  .feature--text-left .feature__media { order: 0; border-radius: 999px 0 0 999px; }
  .feature--text-right .feature__media { border-radius: 0 999px 999px 0; }

  /* відсотки рахуються від колонки гріда (половина секції = 640 у макеті):
     494/640 = 77.19%, зсув 106/640 = 16.56% ліворуч і 40/640 = 6.25% праворуч */
  .feature__text { width: 77.19%; margin: 0; padding: 0; justify-self: start; }
  .feature--text-left .feature__text { margin-left: 16.56%; }
  .feature--text-right .feature__text { margin-left: 6.25%; }
  .feature--text-left .feature__media { grid-column: 2; }
  .feature--text-left .feature__text { grid-column: 1; grid-row: 1; }

  .feature__title { margin-bottom: 24px; }
  .feature__body { gap: 28px; }
  .feature__icon { width: 61px; }
  .feature__icon--wide { width: 130px; }
  .checklist { gap: 8px; }
  .checklist li,
  .feature__body p { line-height: 24px; }
  .checklist__icon { width: 22px; }

  #f1 .feature__media { --deco-size: 43.0%; --deco-a-x: 76.7%; --deco-a-y: 78.0%; --deco-b-x: 51.7%; --deco-b-y: 98.9%; }
  #f2 .feature__media { --deco-size: 55.8%; --deco-a-x: 37.2%; --deco-a-y: -43.7%; --deco-b-x: 3.8%; --deco-b-y: -69.7%; }
  #f3 .feature__media { --deco-size: 55.8%; --deco-a-x: -37.2%; --deco-a-y: -43.7%; --deco-b-x: 51.2%; --deco-b-y: 75.4%; }
  #f4 .feature__media { --deco-size: 55.8%; --deco-a-x: 5.7%; --deco-a-y: -92.9%; --deco-b-x: -21.7%; --deco-b-y: -51.4%; }

  /* координати з макета, у відсотках ширини секції (1280) */
  .badge { width: 120px; height: 120px; }
  .badge--gel { left: 50.16%; top: 42px; }
  .badge--family { left: 37.5%; top: 230px; }

  .promo { margin-top: 0; width: 100%; max-width: none; padding: 60px 0 0; gap: 32px; }
  .promo__video { max-width: 813px; }
  .btn-order--wide { width: 422px; }
  .promo__legal { width: min(1136px, 100%); font-size: 12px; line-height: 16px; text-align: justify; }

  .warning__art--mobile { display: none; }
  .warning__art--desktop { display: block; }
}

/* ------------------------------------------------------------ дрібниці */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}