/* Токены страницы центра миопии.
   1 единица макета = var(--myopia-unit): на .myopia, не на html,
   чтобы шапка и футер сайта сохранили свой масштаб.
   Десктоп — min(1px, (100vw - --sbw) / 1440), планшет 481–960 — 1px,
   мобайл ≤480 — (100vw - --sbw) / 390. */

.myopia {
  --myopia-unit: min(1px, calc((100vw - var(--sbw, 0px)) / 1440));
  /* Палитра — сырые значения, в вёрстке не используются напрямую */
  --palette-white: #ffffff;
  --palette-black: #000000;
  --palette-gray-100: #f4f4f4;
  --palette-gray-200: #ebebeb;
  --palette-gray-250: #e2e2e2;
  --palette-gray-300: #d9d9d9;
  --palette-gray-400: #717171;
  --palette-gray-800: #3b3b3b;
  --palette-gray-900: #252525;
  --palette-blue-50: #f3f6fc;
  --palette-blue-100: #e6effe;
  --palette-blue-200: #b8d0f9;
  --palette-blue-500: #1066f6;
  --palette-red-500: #bf7c7c;
  --palette-alpha-black-50: rgb(0 0 0 / 0.5);
  --palette-alpha-black-10: rgb(0 0 0 / 0.1);
  --palette-alpha-black-05: rgb(0 0 0 / 0.05);
  --palette-alpha-black-03: rgb(0 0 0 / 0.03);

  /* Цвета — семантика */
  --color-text-primary: var(--palette-gray-900);
  --color-text-secondary: var(--palette-gray-800);
  --color-text-muted: var(--palette-gray-400);
  --color-text-inverse: var(--palette-white);
  --color-text-accent: var(--palette-blue-500);
  --color-text-error: var(--palette-red-500);
  --color-icon-primary: var(--palette-gray-900);
  --color-icon-accent: var(--palette-blue-500);
  --color-bg-page: var(--palette-white);
  --color-bg-elevated: var(--palette-white);
  --color-bg-surface: var(--palette-blue-50);
  --color-bg-surface-neutral: var(--palette-gray-100);
  --color-bg-accent: var(--palette-blue-500);
  --color-bg-overlay: var(--palette-alpha-black-50);
  --color-border-default: var(--palette-gray-200);
  --color-border-strong: var(--palette-gray-250);
  --color-border-accent: var(--palette-blue-500);

  /* Шкалы */
  --space-4: calc(4 * var(--myopia-unit));
  --space-8: calc(8 * var(--myopia-unit));
  --space-12: calc(12 * var(--myopia-unit));
  --space-16: calc(16 * var(--myopia-unit));
  --space-20: calc(20 * var(--myopia-unit));
  --space-24: calc(24 * var(--myopia-unit));
  --space-32: calc(32 * var(--myopia-unit));
  --space-40: calc(40 * var(--myopia-unit));
  --space-48: calc(48 * var(--myopia-unit));
  --space-60: calc(60 * var(--myopia-unit));
  --space-80: calc(80 * var(--myopia-unit));
  --space-120: calc(120 * var(--myopia-unit));
  --space-140: calc(140 * var(--myopia-unit));
  --space-160: calc(160 * var(--myopia-unit));
  --radius-4: calc(4 * var(--myopia-unit));
  --radius-8: calc(8 * var(--myopia-unit));
  --radius-12: calc(12 * var(--myopia-unit));
  --radius-16: calc(16 * var(--myopia-unit));
  --radius-20: calc(20 * var(--myopia-unit));
  --radius-24: calc(24 * var(--myopia-unit));
  --radius-32: calc(32 * var(--myopia-unit));
  --radius-40: calc(40 * var(--myopia-unit));
  --radius-full: calc(9999 * var(--myopia-unit));
  --stroke-1: calc(1 * var(--myopia-unit));
  --stroke-2: calc(2 * var(--myopia-unit));
  --stroke-4: calc(4 * var(--myopia-unit));

  /* Тени (effect styles «Тень/*») */
  --shadow-soft: 0 0 calc(100 * var(--myopia-unit)) var(--palette-alpha-black-03);
  --shadow-raised: 0 calc(4 * var(--myopia-unit)) calc(20 * var(--myopia-unit)) var(--palette-alpha-black-10);
  --shadow-hover: 0 0 calc(50 * var(--myopia-unit)) var(--palette-alpha-black-10);
  --shadow-icon-on-photo: drop-shadow(0 0 calc(50 * var(--myopia-unit)) var(--palette-alpha-black-50));

  /* Раскладка — режим Desktop */
  --page-margin: var(--space-40);
  --section-rhythm: var(--space-140);
  --section-padding: var(--space-120);
  --section-heading-gap: var(--space-48);
  --radius-card: var(--radius-40);
  --radius-section: var(--radius-40);
  --card-padding: var(--space-40);
  --radius-card-media: var(--radius-24);
  --container-max: calc(1440 * var(--myopia-unit));

  /* Типографика — режим Desktop */
  --font-family: NunitoSans, Arial, sans-serif;
  --font-size-heading-xl: calc(56 * var(--myopia-unit));
  --line-height-heading-xl: calc(62 * var(--myopia-unit));
  --font-size-heading-l: calc(48 * var(--myopia-unit));
  --line-height-heading-l: calc(53 * var(--myopia-unit));
  --font-size-heading-m: calc(40 * var(--myopia-unit));
  --line-height-heading-m: calc(44 * var(--myopia-unit));
  --font-size-heading-s: calc(32 * var(--myopia-unit));
  --line-height-heading-s: calc(40 * var(--myopia-unit));
  --font-size-heading-xs: calc(24 * var(--myopia-unit));
  --line-height-heading-xs: calc(30 * var(--myopia-unit));
  --font-size-card-title: calc(28 * var(--myopia-unit));
  --line-height-card-title: calc(38 * var(--myopia-unit));
  --font-size-body-l: calc(24 * var(--myopia-unit));
  --line-height-body-l: calc(30 * var(--myopia-unit));
  --font-size-body: calc(20 * var(--myopia-unit));
  --line-height-body: calc(30 * var(--myopia-unit));
  --font-size-label-m: calc(18 * var(--myopia-unit));
  --line-height-label-m: calc(18 * var(--myopia-unit));
  --font-size-label-s: calc(16 * var(--myopia-unit));
  --line-height-label-s: calc(16 * var(--myopia-unit));
  --font-size-caption: calc(14 * var(--myopia-unit));
  --line-height-caption: calc(18 * var(--myopia-unit));
}

/* Режим Tablet: Раскладка и Типографика (481–960px, макет «Tablet 768») */
@media (min-width: 481px) and (max-width: 960px){
  .myopia {
  --myopia-unit: 1px;
    --page-margin: var(--space-32);
    --section-rhythm: var(--space-80);
    --section-padding: var(--space-80);
    --section-heading-gap: var(--space-32);
    --radius-card: var(--radius-24);
    --radius-section: var(--radius-24);
    --card-padding: var(--space-24);
    --radius-card-media: var(--radius-16);

    --font-size-heading-xl: calc(44 * var(--myopia-unit));
    --line-height-heading-xl: calc(48 * var(--myopia-unit));
    --font-size-heading-l: calc(40 * var(--myopia-unit));
    --line-height-heading-l: calc(44 * var(--myopia-unit));
    --font-size-heading-m: calc(36 * var(--myopia-unit));
    --line-height-heading-m: calc(40 * var(--myopia-unit));
    --font-size-heading-s: calc(24 * var(--myopia-unit));
    --line-height-heading-s: calc(30 * var(--myopia-unit));
    --font-size-heading-xs: calc(22 * var(--myopia-unit));
    --line-height-heading-xs: calc(28 * var(--myopia-unit));
    --font-size-card-title: calc(24 * var(--myopia-unit));
    --line-height-card-title: calc(30 * var(--myopia-unit));
    --font-size-body-l: calc(20 * var(--myopia-unit));
    --line-height-body-l: calc(26 * var(--myopia-unit));
    --font-size-body: calc(17 * var(--myopia-unit));
    --line-height-body: calc(26 * var(--myopia-unit));
    --font-size-label-m: calc(17 * var(--myopia-unit));
    --line-height-label-m: calc(17 * var(--myopia-unit));
    --font-size-label-s: calc(15 * var(--myopia-unit));
    --line-height-label-s: calc(15 * var(--myopia-unit));
    --font-size-caption: calc(13 * var(--myopia-unit));
    --line-height-caption: calc(17 * var(--myopia-unit));
  
}

}

/* Режим Mobile: Раскладка и Типографика */
@media (max-width: 480px){
  .myopia {
  --myopia-unit: calc((100vw - var(--sbw, 0px)) / 390);
    --page-margin: var(--space-20);
    --section-rhythm: var(--space-60);
    --section-padding: var(--space-60);
    --section-heading-gap: var(--space-24);
    --radius-card: var(--radius-20);
    --radius-section: var(--radius-20);
    --card-padding: var(--space-20);
    --radius-card-media: var(--radius-12);

    --font-size-heading-xl: calc(32 * var(--myopia-unit));
    --line-height-heading-xl: calc(35 * var(--myopia-unit));
    --font-size-heading-l: calc(32 * var(--myopia-unit));
    --line-height-heading-l: calc(35 * var(--myopia-unit));
    --font-size-heading-m: calc(32 * var(--myopia-unit));
    --line-height-heading-m: calc(35 * var(--myopia-unit));
    --font-size-heading-s: calc(20 * var(--myopia-unit));
    --line-height-heading-s: calc(26 * var(--myopia-unit));
    --font-size-heading-xs: calc(20 * var(--myopia-unit));
    --line-height-heading-xs: calc(26 * var(--myopia-unit));
    --font-size-card-title: calc(20 * var(--myopia-unit));
    --line-height-card-title: calc(26 * var(--myopia-unit));
    --font-size-body-l: calc(18 * var(--myopia-unit));
    --line-height-body-l: calc(24 * var(--myopia-unit));
    --font-size-body: calc(16 * var(--myopia-unit));
    --line-height-body: calc(24 * var(--myopia-unit));
    --font-size-label-m: calc(16 * var(--myopia-unit));
    --line-height-label-m: calc(16 * var(--myopia-unit));
    --font-size-label-s: calc(14 * var(--myopia-unit));
    --line-height-label-s: calc(14 * var(--myopia-unit));
    --font-size-caption: calc(12 * var(--myopia-unit));
    --line-height-caption: calc(16 * var(--myopia-unit));
  
}

}

/* Брейкпоинты: ≤960 — общее для планшета и мобайла, 481–960 — только планшет, ≤480 — только мобайл. */

/* Сбросы, которых нет в styles.css сайта или которые там другие */
.myopia {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.myopia li,
.myopia li:not(:last-child) { margin: 0; }
.myopia ul { list-style: none; }
.myopia img,
.myopia video { display: block; max-width: 100%; }
.myopia button:not(.btn) { font: inherit; color: inherit; background: none; padding: 0; }
.myopia :focus-visible { outline: calc(2 * var(--myopia-unit)) solid var(--color-border-accent); outline-offset: calc(2 * var(--myopia-unit)); }

.myopia .container { max-width: var(--container-max); padding-inline: var(--page-margin); }

.myopia .compact-only { display: none !important; }
@media (max-width: 960px){
  .myopia .compact-only { display: revert !important; }
  .myopia .desktop-only { display: none !important; }

}

/* ---------- Типографика ---------- */
.myopia .t-heading-xl { font-size: var(--font-size-heading-xl); line-height: var(--line-height-heading-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); }
.myopia .t-heading-l { font-size: var(--font-size-heading-l); line-height: var(--line-height-heading-l); font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-primary); }
.myopia .t-heading-m { font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); font-weight: 600; color: var(--color-text-primary); }
.myopia .t-heading-s { font-size: var(--font-size-heading-s); line-height: var(--line-height-heading-s); font-weight: 600; color: var(--color-text-primary); }
.myopia .t-heading-xs { font-size: var(--font-size-heading-xs); line-height: var(--line-height-heading-xs); font-weight: 600; color: var(--color-text-primary); }
.myopia .t-card-title { font-size: var(--font-size-card-title); line-height: var(--line-height-card-title); font-weight: 600; color: var(--color-text-primary); }
.myopia .t-body { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 400; color: var(--color-text-secondary); }

/* ---------- Кнопки ---------- */
/* Цвета, ховер и модификатор .white — из .btn сайта, здесь только размеры макета */
.myopia section:not(.section-banner) .btn {
  display: inline-flex; gap: var(--space-8);
  padding: var(--space-20) var(--space-32);
  border-radius: var(--radius-full);
  font-size: var(--font-size-label-m); line-height: var(--line-height-label-m);
  text-align: start; white-space: nowrap;
  transition: opacity 200ms linear;
}
@media (min-width: 961px) {
  .myopia section:not(.section-banner) .btn.white { padding: var(--space-20) var(--space-40); }
}
@media (max-width: 960px){
  .myopia section:not(.section-banner) .btn { padding: var(--space-16) var(--space-32); }

}
@media (max-width: 480px){
  .myopia .btn--wide-mobile { width: 100%; }

}

/* ---------- Ритм страницы ---------- */
/* Шапка сайта fixed. На остальных страницах её перекрывает .header + .section { margin-top: 90rem }. */
.header + .myopia { margin-top: 90rem; }
.myopia { display: flex; flex-direction: column; gap: var(--section-rhythm); padding-top: var(--space-24); }
@media (min-width: 481px) and (max-width: 960px){ .myopia { padding-top: var(--space-16); }

}
@media (max-width: 480px){
  .header + .myopia { margin-top: 58rem; }
  .myopia { padding-top: var(--space-8); }

}
.myopia .section-head { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-12); margin-bottom: var(--section-heading-gap); }
.myopia .section-head > h2 { flex: 1; }
.myopia .section-head--bottom { align-items: flex-end; gap: var(--space-16); }
.myopia .section-head__text { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); }
.myopia .controls { display: flex; gap: var(--space-8); flex: none; }
.myopia .controls--pill { background: var(--color-bg-surface-neutral); padding: var(--space-8); border-radius: var(--radius-full); }
.myopia .controls button img { width: calc(56 * var(--myopia-unit)); height: calc(56 * var(--myopia-unit)); }
.myopia .controls button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 960px){
  .myopia .section-head__text { gap: var(--space-12); }

}
@media (max-width: 960px){
  .myopia .controls { display: none; }

}

/* Горизонтальная лента. На десктопе — врачи и методы со стрелками. На планшете и мобайле все ленты одного вида:
   карточки 300, лента до края экрана, следующая карточка выглядывает — стрелки и точки не нужны. */
.myopia .carousel {
  display: flex; gap: var(--space-32); align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--page-margin)); padding-inline: var(--page-margin);
  scroll-padding-inline: var(--page-margin);
}
.myopia .carousel::-webkit-scrollbar,
.myopia .m-carousel::-webkit-scrollbar,
.myopia .m-carousel-sm::-webkit-scrollbar { display: none; }
.myopia .carousel > * { flex: none; scroll-snap-align: start; }
/* Врачи на десктопе: ровно две карточки на 1360. Запас 60 сверху и снизу и 20 по бокам — под тень,
   в боковом запасе тень гаснет маской, а не обрывается; соседние карточки туда не заходят. */
@media (min-width: 961px){
  .myopia .doctors .carousel {
    gap: var(--space-40); margin: calc(-60 * var(--myopia-unit)) calc(-20 * var(--myopia-unit)); padding: calc(60 * var(--myopia-unit)) calc(20 * var(--myopia-unit)); scroll-padding-inline: calc(20 * var(--myopia-unit));
    mask-image: linear-gradient(to right, transparent, #000 calc(20 * var(--myopia-unit)), #000 calc(100% - calc(20 * var(--myopia-unit))), transparent);
  }

}
@media (max-width: 960px){
  .myopia .carousel,
.myopia .m-carousel {
    display: flex !important; flex-direction: row !important; gap: var(--carousel-gap) !important; align-items: stretch !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-margin)); padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin);
  }
  .myopia .carousel > *,
.myopia .m-carousel > *,
.myopia .m-carousel > .signs__col > *,
.myopia .m-carousel > .reviews__col > * { flex: 0 0 calc(300 * var(--myopia-unit)); width: calc(300 * var(--myopia-unit)); scroll-snap-align: start; }
  .myopia .m-carousel > .signs__col,
.myopia .m-carousel > .reviews__col { display: contents; }

}
@media (min-width: 481px) and (max-width: 960px){ .myopia { --carousel-gap: var(--space-24); }

}
@media (max-width: 480px){
  .myopia { --carousel-gap: var(--space-12); }
  .myopia .m-carousel-sm {
    display: flex !important; flex-direction: row !important; gap: var(--carousel-gap) !important; align-items: stretch !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-margin)); padding-inline: var(--page-margin); scroll-padding-inline: var(--page-margin);
  }
  .myopia .m-carousel-sm > * { flex: 0 0 calc(300 * var(--myopia-unit)); width: calc(300 * var(--myopia-unit)); scroll-snap-align: start; }

}

/* ---------- Первый экран ---------- */
.myopia .hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
.myopia .hero__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-48);
  padding: var(--space-60); border-radius: var(--radius-card);
}
.myopia .hero__card-bg { position: absolute; inset: 0; opacity: 0.15; z-index: -1; }
.myopia .hero__card-bg img { width: 100%; height: 100%; object-fit: cover; }
.myopia .hero__text { display: flex; flex-direction: column; gap: var(--space-32); }
.myopia .hero__list { display: flex; flex-direction: column; gap: var(--space-16); }
.myopia .hero__list li { display: flex; align-items: center; gap: var(--space-16); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.myopia .hero__list img { width: calc(32 * var(--myopia-unit)); height: calc(32 * var(--myopia-unit)); flex: none; }
/* Фото холла обрезано своей подложкой, девочка — нет: на десктопе она выходит за правый край на 45px, как в Figma */
.myopia .hero { overflow-x: clip; }
.myopia .hero__media { position: relative; aspect-ratio: 1; border-radius: var(--radius-card); }
.myopia .hero__room-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.myopia .hero__room { position: absolute; max-width: none; width: 168.26%; height: 129.65%; left: -61.51%; top: -29.69%; object-fit: cover; }
.myopia .hero__girl { position: absolute; bottom: 0; left: 62.5%; width: 88.47%; height: auto; transform: translateX(-50%); }
@media (max-width: 960px){
  .myopia .hero__grid { grid-template-columns: 1fr; }
  .myopia .hero__text { gap: var(--space-24); }
  .myopia .hero__list { gap: var(--space-12); }
  .myopia .hero__list li { gap: var(--space-12); }
  .myopia .hero__list img { width: calc(28 * var(--myopia-unit)); height: calc(28 * var(--myopia-unit)); }

}
@media (min-width: 481px) and (max-width: 960px){
  .myopia .hero__card { padding: var(--space-48) var(--space-40); gap: var(--space-40); }
  /* Кадр 704×440: холл заполняет кадр, девочка — 88,6% высоты, как на мобильном квадрате */
  .myopia .hero__media { aspect-ratio: 704 / 440; }
  .myopia .hero__room { inset: 0; width: 100%; height: 100%; }
  .myopia .hero__girl { width: auto; height: 88.6%; }

}
@media (max-width: 480px){
  .myopia .hero__grid { gap: var(--space-16); }
  .myopia .hero__card { padding: var(--space-32) var(--space-20); gap: var(--space-32); }

}

/* ---------- Региональный центр ---------- */
.myopia .region .container { display: flex; flex-direction: column; gap: var(--space-80); }
.myopia .region__text { display: flex; gap: var(--space-80); width: calc(1240 * var(--myopia-unit)); max-width: 100%; margin-inline: auto; }
.myopia .region__col { flex: 1; display: flex; flex-direction: column; gap: var(--space-24); }
.myopia .region__col--about { gap: var(--space-16); }
.myopia .region__title { max-width: calc(573 * var(--myopia-unit)); }
.myopia .region__contacts { display: flex; flex-direction: column; gap: var(--space-16); }
.myopia .region__contacts li { display: flex; align-items: flex-start; gap: var(--space-12); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.myopia .region__contacts img { width: calc(24 * var(--myopia-unit)); height: calc(24 * var(--myopia-unit)); flex: none; margin-block: calc((var(--line-height-body) - calc(24 * var(--myopia-unit))) / 2); }

.myopia .slider { position: relative; height: calc(660 * var(--myopia-unit)); border-radius: var(--radius-card); overflow: hidden; }
.myopia .slider__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.myopia .slider__track::-webkit-scrollbar { display: none; }
.myopia .slider__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.myopia .slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); filter: drop-shadow(0 calc(4 * var(--myopia-unit)) calc(20 * var(--myopia-unit)) var(--palette-alpha-black-10)); }
.myopia .slider__arrow img { width: calc(56 * var(--myopia-unit)); height: calc(56 * var(--myopia-unit)); }
.myopia .slider__arrow--prev { left: var(--space-32); }
.myopia .slider__arrow--next { right: var(--space-32); }
.myopia .slider__dots { position: absolute; left: 50%; bottom: var(--space-32); transform: translateX(-50%); display: flex; gap: var(--space-8); }
.myopia .slider__dots button { width: calc(12 * var(--myopia-unit)); height: calc(12 * var(--myopia-unit)); border-radius: var(--radius-full); background: var(--color-bg-elevated); }
.myopia .slider__dots button[aria-current="true"] { background: var(--color-bg-accent); }
@media (max-width: 960px){
  .myopia .region__text { flex-direction: column; gap: var(--space-24); }
  .myopia .region__col { gap: var(--space-20); }

}
@media (min-width: 481px) and (max-width: 960px){
  .myopia .region .container { gap: var(--space-40); }
  .myopia .region__col--about { max-width: calc(640 * var(--myopia-unit)); gap: var(--space-16); }
  .myopia .slider { height: auto; aspect-ratio: 704 / 400; }
  .myopia .slider__arrow--prev { left: var(--space-24); }
  .myopia .slider__arrow--next { right: var(--space-24); }
  .myopia .slider__dots { bottom: var(--space-24); }

}
@media (max-width: 480px){
  .myopia .region .container { gap: var(--space-32); }
  .myopia .region__col--about { gap: var(--space-12); }
  .myopia .slider { height: calc(240 * var(--myopia-unit)); }
  .myopia .slider__arrow { display: none; }
  .myopia .slider__dots { bottom: var(--space-16); gap: var(--space-4); }
  .myopia .slider__dots button { width: calc(8 * var(--myopia-unit)); height: calc(8 * var(--myopia-unit)); }

}

/* ---------- Врачи ---------- */
/* Каркас, обрезка фото и ховер — из .doctor-element. Здесь ширина ленты и масштаб макета:
   размеры сайта в rem на планшете иначе, чем --myopia-unit. */
.myopia .doctor-element { width: calc(660 * var(--myopia-unit)); gap: var(--space-40); padding: var(--card-padding); background: var(--color-bg-surface-neutral); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.myopia .doctor-element-img { width: calc(270 * var(--myopia-unit)); height: calc(405 * var(--myopia-unit)); margin: 0; border-radius: var(--radius-card-media); flex: none; }
.myopia .doctor-element-info { display: flex; flex-direction: column; gap: var(--space-12); max-width: none; min-width: 0; }
.myopia .doctor-element-name { margin: 0; font-size: var(--font-size-card-title); line-height: var(--line-height-card-title); }
.myopia .doctor-element-text { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
@media (hover: hover) and (min-width: 961px){
  .myopia a.doctor-element:hover { background: var(--color-bg-surface); box-shadow: var(--shadow-hover); }

}
@media (max-width: 960px){
  .myopia .doctor-element { width: calc(300 * var(--myopia-unit)); flex-direction: column; gap: var(--space-20); box-shadow: none; }
  .myopia a.doctor-element:hover { background: var(--color-bg-surface-neutral); box-shadow: none; }
  .myopia .doctor-element-img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .myopia .doctor-element-info { gap: var(--space-8); }

}

/* ---------- Две колонки: заголовок слева, список справа ---------- */
.myopia .split { display: flex; gap: var(--space-80); align-items: flex-start; }
.myopia .split__aside { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--section-heading-gap); position: sticky; top: calc(106 * var(--myopia-unit)); }
.myopia .split__aside h2 { max-width: calc(521 * var(--myopia-unit)); }
.myopia .split__aside--tight { gap: var(--space-16); }
.myopia .split__aside--tight h2 { max-width: none; }
.myopia .contra__lead { max-width: calc(415 * var(--myopia-unit)); }
.myopia .split__list { flex: 1; display: flex; flex-direction: column; gap: var(--space-48); }
.myopia .row-card { display: flex; gap: var(--space-32); align-items: flex-start; }
/* Плашка иконки — как фрейм icon в компоненте row: surface на десктопе, белая на карточке */
.myopia .row-card > img { width: calc(32 * var(--myopia-unit)); height: calc(32 * var(--myopia-unit)); flex: none; background: var(--color-bg-surface); border-radius: var(--radius-12); }
.myopia .row-card__text { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
@media (max-width: 960px){
  .myopia .split { flex-direction: column; align-items: stretch; gap: var(--section-heading-gap); }
  .myopia .split__aside { position: static; gap: var(--space-12); }
  .myopia .split__aside h2 { max-width: none; }
  .myopia .row-card { flex-direction: column; gap: var(--space-16); padding: var(--card-padding); background: var(--color-bg-surface-neutral); border-radius: var(--radius-card); }
  .myopia .row-card > img { background: var(--color-bg-elevated); }
  .myopia .row-card__text { gap: var(--space-8); }

}

/* ---------- Как проходит прием ---------- */
/* Точки, линия, шеврон и раскрытие — из .list / .accordion-title (scripts.js).
   Линия под открытым шагом серая: синие только отрезки между синими точками. */
.myopia .stages h2 { margin-bottom: var(--section-heading-gap); }
.myopia .stages .list-wrapper { align-items: flex-start; justify-content: flex-start; gap: var(--space-120); margin-top: 0; }
.myopia .stages .list,
.myopia .stages .list-video-wrapper { flex: 1 1 0; width: auto; max-width: none; }
.myopia .stages .list-item { padding-left: calc(60 * var(--myopia-unit)); padding-bottom: var(--space-40); }
.myopia .stages .list-item::before { top: calc(16 * var(--myopia-unit)); left: 0; width: calc(16 * var(--myopia-unit)); height: calc(16 * var(--myopia-unit)); border-width: var(--stroke-4); }
.myopia .stages .list-item:not(:last-child)::after { top: calc(32 * var(--myopia-unit)); bottom: calc(-16 * var(--myopia-unit)); left: calc(6 * var(--myopia-unit)); width: var(--stroke-4); height: auto; background: var(--color-border-default); }
.myopia .stages .list-item.active:has(~ .list-item .accordion-title.active)::after { background: var(--color-border-accent); }
.myopia .stages .list-title { width: fit-content; min-height: calc(48 * var(--myopia-unit)); padding-right: 0; font-size: var(--font-size-heading-s); line-height: var(--line-height-heading-s); }
.myopia .stages .list-title::after { top: 0; bottom: 0; margin-block: auto; right: calc(-34 * var(--myopia-unit)); width: calc(20 * var(--myopia-unit)); height: calc(12.5 * var(--myopia-unit)); background: url(/img/myopia/chevron-down.svg) center / contain no-repeat; }
.myopia .stages .list-title:hover { color: var(--color-text-accent); }
.myopia .stages .list-content { padding-top: var(--space-12); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.myopia .stages .list-content > * + * { margin-top: var(--space-12); }
.myopia .stages .list-content ul { list-style: disc; padding-left: calc(27 * var(--myopia-unit)); }
.myopia .stages .list-content li + li { margin-top: calc(6 * var(--myopia-unit)); }
.myopia .stages .list-content a { color: var(--color-text-accent); }
.myopia .stages .list-video-wrapper { aspect-ratio: 1; border-radius: var(--radius-card); overflow: hidden; }
.myopia .stages .list-video-wrapper video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px){
  .myopia .stages .list-wrapper { flex-direction: column; }
  .myopia .stages .list,
  .myopia .stages .list-video-wrapper { width: 100%; flex: none; }
  .myopia .stages .list-video-wrapper { order: -1; margin: 0; }
  .myopia .stages .list-item { padding-left: calc(32 * var(--myopia-unit)); padding-bottom: var(--space-4); }
  .myopia .stages .list-item::before { top: calc(12 * var(--myopia-unit)); left: calc(-4 * var(--myopia-unit)); width: calc(20 * var(--myopia-unit)); height: calc(20 * var(--myopia-unit)); }
  .myopia .stages .list-item:not(:last-child)::after { top: calc(32 * var(--myopia-unit)); bottom: calc(-12 * var(--myopia-unit)); left: calc(4 * var(--myopia-unit)); }
  .myopia .stages .list-title { width: 100%; min-height: calc(44 * var(--myopia-unit)); padding-right: calc(28 * var(--myopia-unit)); }
  .myopia .stages .list-title::after { right: 0; width: calc(16 * var(--myopia-unit)); height: calc(10 * var(--myopia-unit)); }

}
@media (min-width: 481px) and (max-width: 960px){
  .myopia .stages .list-wrapper { gap: var(--space-32); }
  .myopia .stages .list-video-wrapper { aspect-ratio: 704 / 400; }

}
@media (max-width: 480px){
  .myopia .stages .list-wrapper { gap: var(--space-24); }
  .myopia .stages .list-title::after { width: calc(14 * var(--myopia-unit)); height: calc(8.75 * var(--myopia-unit)); }
  .myopia .stages .list-video-wrapper { aspect-ratio: 350 / 220; }

}

/* ---------- Секции с тонированным фоном ---------- */
.myopia .tinted { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: var(--container-max); margin-inline: auto; border-radius: var(--radius-section); padding-block: var(--section-padding); }
.myopia .tinted__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15; z-index: -1; }
.myopia .reviews.tinted { background: var(--color-bg-surface); }

/* ---------- Методы диагностики ---------- */
.myopia .methods__lead { max-width: calc(543 * var(--myopia-unit)); }
.myopia .methods .carousel { gap: var(--space-24); }
.myopia .method-card { width: calc(437 * var(--myopia-unit)); display: flex; flex-direction: column; gap: var(--space-12); padding: var(--card-padding); background: var(--color-bg-elevated); border-radius: var(--radius-card); }
@media (max-width: 960px){
  .myopia .method-card { width: calc(300 * var(--myopia-unit)); gap: var(--space-8); }

}

/* ---------- Признаки нарушения ---------- */
.myopia .signs .container { display: flex; flex-direction: column; gap: var(--section-heading-gap); }
.myopia .signs__title { max-width: calc(605 * var(--myopia-unit)); }
.myopia .signs__body { display: flex; gap: var(--space-32); align-items: flex-start; }
.myopia .signs__col { flex: 1; display: flex; flex-direction: column; gap: var(--space-32); }
.myopia .signs__boy { width: calc(360 * var(--myopia-unit)); height: calc(692 * var(--myopia-unit)); flex: none; display: flex; align-items: center; justify-content: center; }
.myopia .signs__boy img { width: calc(744 * var(--myopia-unit)); height: calc(744 * var(--myopia-unit)); max-width: none; object-fit: contain; }
.myopia .symptom-card { display: flex; flex-direction: column; gap: var(--space-32); padding: var(--card-padding); background: var(--color-bg-surface-neutral); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.myopia .symptom-card > img { width: calc(40 * var(--myopia-unit)); height: calc(40 * var(--myopia-unit)); }
.myopia .symptom-card__text { display: flex; flex-direction: column; gap: var(--space-12); }
@media (max-width: 960px){
  .myopia .symptom-card { gap: var(--space-16); box-shadow: none; }
  .myopia .symptom-card > img { width: calc(32 * var(--myopia-unit)); height: calc(32 * var(--myopia-unit)); }
  .myopia .symptom-card__text { gap: var(--space-8); }

}

/* ---------- Стоимость ---------- */
.myopia .price .container { display: flex; flex-direction: column; align-items: center; gap: var(--section-heading-gap); }
.myopia .price h2 { text-align: center; }
/* На планшете и мобайле заголовок и кнопка по левому краю */
@media (max-width: 960px){ .myopia .price .container { align-items: flex-start; } .myopia .price h2 { align-self: stretch; text-align: left; }

}
/* На десктопе таблица уже контейнера: на 1360 строки слишком размашисты */
.myopia .price__table { width: 100%; max-width: calc(1200 * var(--myopia-unit)); display: flex; flex-direction: column; }
.myopia .price-row { display: grid; grid-template-columns: calc(340 * var(--myopia-unit)) 1fr calc(180 * var(--myopia-unit)); gap: var(--space-60); align-items: start; }
.myopia .price-row + .price-row { margin-top: var(--space-32); padding-top: var(--space-32); border-top: var(--stroke-1) solid var(--color-border-strong); }
.myopia .price-row__price { font-size: var(--font-size-heading-xs); line-height: var(--line-height-heading-xs); font-weight: 600; text-align: right; color: var(--color-text-primary); }
/* Планшет: название и цена в строку, описание под ними */
@media (min-width: 481px) and (max-width: 960px){
  .myopia .price-row { grid-template-columns: 1fr auto; gap: var(--space-12) var(--space-24); }
  .myopia .price-row + .price-row { margin-top: var(--space-24); padding-top: var(--space-24); }
  .myopia .price-row__desc { grid-column: 1 / -1; grid-row: 2; max-width: calc(640 * var(--myopia-unit)); }

}
@media (max-width: 480px){
  .myopia .price-row { grid-template-columns: 1fr; gap: var(--space-8); }
  .myopia .price-row + .price-row { margin-top: var(--space-20); padding-top: var(--space-20); }
  .myopia .price-row__name { order: 1; } .myopia .price-row__price { order: 2; text-align: left; font-size: var(--font-size-label-m); line-height: var(--line-height-label-m); } .myopia .price-row__desc { order: 3; }

}

/* ---------- Отзывы ---------- */
.myopia .reviews .container { display: flex; flex-direction: column; gap: var(--section-heading-gap); }
.myopia .reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); align-items: start; }
.myopia .reviews__col { display: flex; flex-direction: column; gap: var(--space-32); }
.myopia .review-card { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--card-padding); background: var(--color-bg-elevated); border-radius: var(--radius-card); }
.myopia .review-card--video { gap: var(--space-24); }
.myopia .review-card__head { display: flex; flex-direction: column; gap: var(--space-12); }
.myopia .review-card__date { font-size: var(--font-size-label-m); line-height: var(--line-height-label-m); font-weight: 600; color: var(--color-text-muted); }
.myopia .review-card__video { position: relative; aspect-ratio: 1; width: 100%; border-radius: var(--radius-20); overflow: hidden; background: var(--palette-gray-300); }
.myopia .review-card__video > img:first-child,
.myopia .review-card__video > video { width: 100%; height: 100%; object-fit: cover; }
/* SVG из Figma уже содержит тень «Иконка на фото»: файл 120×120 вокруг слота 20×20 с отступом 20 от угла */
.myopia .review-card__play { position: absolute; top: calc(var(--space-20) - calc(50 * var(--myopia-unit))); right: calc(var(--space-20) - calc(50 * var(--myopia-unit))); width: calc(120 * var(--myopia-unit)); height: calc(120 * var(--myopia-unit)); max-width: none; pointer-events: none; }
@media (max-width: 960px){
  .myopia .review-card { gap: var(--space-12); }
  .myopia .review-card--video { gap: var(--space-24); }
  .myopia .review-card__head { gap: var(--space-8); }
  .myopia .review-card__date { font-size: var(--font-size-label-s); line-height: var(--line-height-label-s); }
  .myopia .review-card__video { border-radius: var(--radius-8); }

}
@media (max-width: 480px){
  .myopia .review-card__video { aspect-ratio: auto; height: calc(260 * var(--myopia-unit)); }

}

/* Виджет обратного звонка остаётся на стилях сайта: контейнер и отступы .section не берём из макета. */
.myopia .section-banner { padding-top: 0; padding-bottom: 0; }
.myopia .section-banner .container { max-width: 1440rem; padding: 0 40rem; }
@media (max-width: 480px){
  .myopia .section-banner .container { padding: 0 20rem; }

}

/* ---------- Прием детей ---------- */
.myopia .services .container { display: flex; flex-direction: column; gap: var(--section-heading-gap); }
.myopia .services__title { color: var(--color-text-secondary); }
.myopia .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); }
.myopia .service-card { aspect-ratio: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: var(--card-padding); background: var(--color-bg-surface-neutral); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); transition: background-color 300ms ease, box-shadow 300ms ease; }
@media (hover: hover) and (min-width: 961px){
  .myopia .service-card:hover { background: var(--color-bg-surface); box-shadow: var(--shadow-hover); }

}
.myopia .service-card__text { width: 100%; display: flex; flex-direction: column; gap: var(--space-12); }
.myopia .service-card__price { font-size: var(--font-size-label-m); line-height: var(--line-height-label-m); font-weight: 600; color: var(--color-text-muted); }
.myopia .service-card__btn { width: calc(65 * var(--myopia-unit)); height: calc(65 * var(--myopia-unit)); }
@media (max-width: 960px){
  .myopia .service-card { height: calc(300 * var(--myopia-unit)); aspect-ratio: auto; box-shadow: none; }
  .myopia .service-card__text { gap: var(--space-8); }
  .myopia .service-card__btn { width: calc(54 * var(--myopia-unit)); height: calc(54 * var(--myopia-unit)); }

}
@media (min-width: 481px) and (max-width: 960px){
  .myopia .services__grid { grid-template-columns: repeat(auto-fill, minmax(calc(300 * var(--myopia-unit)), 1fr)); gap: var(--space-24); }

}

@media (prefers-reduced-motion: reduce){
  .myopia, .myopia *,
.myopia::before, .myopia *::before,
.myopia::after, .myopia *::after { transition-duration: 0.01ms !important; }

}