/* AI Mira для iPhone — разделы страницы /ios/features/ («Все возможности»): зрение Миры, этикетки,
   сравнение, факт ×2, «Мира на связи везде», дневник и виджеты, Apple Health, вопросы, финал.
   Общая шапка, подвал, кнопки и токены — в ios.css (подключается раньше этого файла). */

/* Вступление страницы: ссылка назад на главную, заголовок, одна строка — по центру, как заголовки разделов ниже. */
.ios-fx-intro {
  padding-block: clamp(28px, 4vw, 64px) 0;
  text-align: center;
}

.ios-fx-intro .ios-lead {
  margin-inline: auto;
}

.ios-fx-back {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 750;
}

.ios-fx-back a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ios-violet);
  text-decoration: none;
}

.ios-fx-back a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Чипы нутриентов (цвета — как у значков Б/Ж/У в приложении) ---------- */

.ios-chips {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ios-chips li {
  min-height: 34px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 750;
}

.c-kcal { background: #fff0e6; color: #a8431a; }

.c-protein { background: #e2ebf6; color: #34507a; }

.c-fat { background: #f6eed2; color: #7a5a0c; }

.c-carbs { background: #dff0e5; color: #276b43; }

.c-fiber { background: #e6f2dc; color: #3d6b22; }

.c-sugar { background: #fbe5ee; color: #9b325f; }

.c-salt { background: #ebeaf1; color: #4f4a5c; }

/* ---------- 2. Зрение Миры: фото → расчёт → дневник ----------
   Три сцены с настоящими экранами. Поверх экранов — только то, что не зависит от раскладки кадра на
   конкретном языке: вспышка, полоса сканирования по фото (верхние 26 % экрана результата одинаковы на
   всех языках), метки ингредиентов у края телефона и карточки под телефоном. */

.ios-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.ios-section-head--center .ios-lead {
  margin-inline: auto;
}

.ios-vision {
  position: relative;
  isolation: isolate;
}

.ios-vision::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 10% 0 auto;
  height: 70%;
  background:
    radial-gradient(40% 50% at 50% 40%, rgba(196, 172, 255, 0.28), transparent 70%),
    radial-gradient(30% 40% at 12% 70%, rgba(255, 176, 146, 0.16), transparent 70%);
  pointer-events: none;
}

.ios-vsteps {
  list-style: none;
  margin: clamp(36px, 5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  column-gap: clamp(18px, 2.4vw, 34px);
}

.ios-vstep {
  position: relative;
  min-width: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.ios-vstage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 14px 22px;
  border: 1px solid var(--ios-line);
  border-radius: var(--ios-r-md);
  background: linear-gradient(180deg, #ffffff 0%, var(--ios-lilac-2) 55%, var(--ios-lilac) 100%);
  box-shadow: var(--ios-e1);
  isolation: isolate;
  container-type: inline-size;
}

.ios-vstage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 380px;
  aspect-ratio: 1;
  top: 14%;
  left: 50%;
  margin-left: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.22), rgba(124, 92, 255, 0) 66%);
}

.ios-vstage--warm::before {
  background: radial-gradient(circle, rgba(255, 122, 79, 0.24), rgba(255, 122, 79, 0) 66%);
}

/* Телефон в сцене — от ширины самой сцены (container query) и от высоты окна. */

.ios-vstage .ios-phone {
  --w: clamp(164px, min(62cqi, 31svh), 236px);
}

/* Стрелка между сценами — только когда сцены стоят в ряд. */

@media (min-width: 961px) {
  .ios-vstep:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 29%;
    right: calc(clamp(18px, 2.4vw, 34px) / -2 - 17px);
    width: 34px;
    height: 34px;
    border: 1px solid var(--ios-line);
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b43e3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
    box-shadow: 0 10px 24px -12px rgba(62, 36, 128, 0.5);
  }
}

/* Шаг 1: палец на лепестке «Фото» и вспышка камеры. Координаты лепестка одинаковы на всех языках. */

.ios-vtap {
  position: absolute;
  left: 43.7%;
  top: 44.4%;
  width: 26%;
  aspect-ratio: 1;
  margin: -13% 0 0 -13%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(112, 80, 245, 0.34) 42%, rgba(112, 80, 245, 0) 70%);
  opacity: 0;
  pointer-events: none;
}

.ios-vflash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.ios-vpill {
  position: relative;
  z-index: 3;
  margin: -24px 0 0;
  padding: 7px 14px 7px 7px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  color: var(--ios-ink);
  font-size: 0.84rem;
  font-weight: 800;
  white-space: nowrap;
}

.ios-vpill-ico {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ios-coral-soft);
  color: #c2542f;
}

.ios-vpill-ico .ios-ico {
  width: 17px;
  height: 17px;
}

/* Шаг 2: сканирование фото. */

.ios-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26.1%;
  overflow: hidden;
  pointer-events: none;
}

.ios-scan-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(160, 132, 255, 0) 0%,
    rgba(160, 132, 255, 0.3) 62%,
    rgba(255, 255, 255, 0.9) 95%,
    rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: translateY(-105%);
}

.ios-scan i {
  position: absolute;
  width: 13%;
  aspect-ratio: 1;
  border: 2.5px solid rgba(255, 255, 255, 0.95);
}

.ios-scan i:nth-of-type(1) { top: 13%; left: 14%; border-right: 0; border-bottom: 0; border-top-left-radius: 7px; }

.ios-scan i:nth-of-type(2) { top: 13%; right: 14%; border-left: 0; border-bottom: 0; border-top-right-radius: 7px; }

.ios-scan i:nth-of-type(3) { bottom: 30%; left: 14%; border-right: 0; border-top: 0; border-bottom-left-radius: 7px; }

.ios-scan i:nth-of-type(4) { bottom: 30%; right: 14%; border-left: 0; border-top: 0; border-bottom-right-radius: 7px; }

/* Карточки под телефоном заходят на экран только на высоту нижней панели вкладок. */

.ios-vcard {
  position: relative;
  z-index: 3;
  width: min(270px, 100%);
  margin-top: -46px;
  padding: 13px 14px 13px;
  border-radius: 20px;
}

.ios-vcard p {
  margin: 0;
}

.ios-vnut-dish {
  color: var(--ios-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.ios-vnut-kcal {
  margin-top: 4px !important;
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--ios-ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.ios-vnut-kcal::before {
  content: "🔥";
  align-self: center;
  font-size: 1.25rem;
}

.ios-vnut-kcal b,
.ios-mcard-kcal b {
  font-size: 1.9rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ios-chips--xs {
  margin-top: 9px;
  gap: 5px;
}

.ios-chips--xs li {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.ios-vrow {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 14px 12px 11px;
}

.ios-vrow-thumb {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 13px;
  background: #e9e4f5;
}

/* Миниатюра — кадр блюда из того же экрана результата (верхние 4–18 % кадра, без подписи). */

.ios-page .ios-vrow-thumb img {
  position: absolute;
  width: 330%;
  max-width: none;
  height: auto;
  left: -132%;
  top: -29%;
}

.ios-vrow-text {
  min-width: 0;
  display: grid;
  gap: 2px;
  line-height: 1.25;
}

.ios-vrow-text b {
  color: var(--ios-ink);
  font-size: 0.88rem;
  font-weight: 800;
  overflow-wrap: break-word;
  /* только по своим дефисам: «Hähnchen-Brokkoli-» / «Pfanne», а не «Pfan-ne» */
  hyphens: manual;
}

.ios-vrow-text span {
  color: var(--ios-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.ios-vrow-ok {
  position: absolute;
  top: -13px;
  right: 12px;
  padding: 5px 10px 5px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #16774d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--ios-e1);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.ios-vrow-ok .ios-ico {
  width: 15px;
  height: 15px;
  stroke-width: 3;
}

.ios-step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ios-ink);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ios-vstep:nth-child(1) .ios-step-num {
  background: var(--ios-coral);
  color: #2b1208;
}

.ios-vstep:nth-child(2) .ios-step-num {
  background: var(--ios-violet);
}

.ios-vstep:nth-child(3) .ios-step-num {
  background: #16774d;
}

/* Три карточки под шагами. */

.ios-vfeatures {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}

/* ---------- Зрение Миры: подпись шага над карточкой ---------- */

.ios-vhead {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ios-vhead-t {
  color: var(--ios-ink);
  font-size: clamp(1.125rem, 1.05rem + 0.22vw, 1.35rem);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ios-vtext {
  max-width: 60ch;
  margin: 16px 4px 0;
  color: var(--ios-copy);
  line-height: 1.6;
}

/* Рамки распознавания на фото блюда. Координаты — в долях экрана результата (кадр блюда одинаковый
   на всех языках): курица справа, брокколи сверху, киноа слева. Слой стоит поверх экрана, но вне его
   обрезки — подписи могут чуть выходить за край экрана. */

.ios-detect {
  position: absolute;
  inset: calc(var(--w) * 0.032);
  z-index: 3;
  pointer-events: none;
}

.ios-det {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(112, 80, 245, 0.45), 0 0 14px rgba(170, 146, 255, 0.55), inset 0 0 10px rgba(170, 146, 255, 0.35);
}

.ios-det--1 { left: 71%; top: 12.9%; width: 8%; height: 2.9%; }

.ios-det--2 { left: 39.5%; top: 5.9%; width: 15.5%; height: 3.9%; }

.ios-det--3 { left: 22%; top: 11.6%; width: 9%; height: 2.7%; }

/* Подпись — сбоку от рамки, в сторону ближнего края экрана (курица и брокколи — вправо, киноа —
   влево): так подписи не заезжают ни на строку состояния, ни друг на друга, ни на название блюда
   на любом языке. За край экрана они могут выходить — слой не обрезан. */

.ios-det-chip {
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  padding: 2px 6px 2px 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  color: var(--ios-ink);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  transform: translateY(-50%);
  box-shadow: var(--ios-glass-edge), var(--ios-e1);
}

.ios-det--3 .ios-det-chip {
  left: auto;
  right: calc(100% + 4px);
}

.ios-det-chip .ios-ico {
  width: 11px;
  height: 11px;
  color: #16774d;
  stroke-width: 3.2;
}

/* ---------- Три лёгкие плитки под шагами ---------- */

.ios-vfeature {
  min-width: 0;
  padding: 20px 20px 22px;
  border: 1px solid var(--ios-line);
  border-radius: var(--ios-r-md);
  background: linear-gradient(180deg, #ffffff 0%, var(--ios-wash) 100%);
  box-shadow: var(--ios-e1);
}

.ios-vf-visual {
  min-height: 62px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 6px;
}

.ios-vf-chip {
  padding: 5px 10px 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--ios-glass-edge), var(--ios-e1);
  color: var(--ios-ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.ios-vf-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tag);
}

.ios-vf-visual--bars {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.ios-vf-bar {
  height: 12px;
  display: flex;
  gap: 3px;
}

.ios-vf-bar i {
  flex: var(--v) 1 0;
  border-radius: 999px;
}

.ios-vf-bar .b-p { background: #6f93c9; }

.ios-vf-bar .b-f { background: #e3bf4f; }

.ios-vf-bar .b-c { background: #5fb584; }

.ios-vf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ios-vf-legend span {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.ios-vf-visual--ask {
  gap: 6px 8px;
}

.ios-vf-q,
.ios-vf-a,
.ios-vf-ok {
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
}

.ios-vf-q {
  border: 1px solid #ece7f5;
  border-bottom-left-radius: 5px;
  background: #fff;
  color: var(--ios-ink);
}

.ios-vf-a {
  border-bottom-right-radius: 5px;
  background: var(--ios-brand);
  color: #fff;
}

.ios-vf-ok {
  background: #e4f5ec;
  color: #155c3d;
}

.ios-vfeature h3 {
  margin: 0;
}

.ios-vfeature p {
  margin: 6px 0 0;
  color: var(--ios-copy);
  line-height: 1.5;
}

/* ---------- Скан этикетки: три примера «фото → что поняла Мира» ---------- */

.ios-lbl-grid {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

.ios-lbl {
  min-width: 0;
  padding: 16px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
  border: 1px solid var(--ios-line);
  border-radius: var(--ios-r-md);
  background: linear-gradient(180deg, #ffffff 0%, var(--ios-lilac-2) 100%);
  box-shadow: var(--ios-e1);
}

.ios-lbl-t {
  margin: 0;
  color: var(--ios-violet);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Фото владельца (656×410, общие для всех языков): рамка — в пропорции снимка, поэтому
   этикетка видна целиком на любой ширине карточки, ничего не обрезается. */

.ios-lbl-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 656 / 410;
  border-radius: 18px;
  background: #e9e4da;
  box-shadow: inset 0 0 0 1px rgba(40, 30, 10, 0.06);
}

.ios-lbl-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Уголки видоискателя на фото: белые, с тенью по самой линии (drop-shadow), а не вокруг квадрата. */

.ios-lbl-photo .ios-scan--label i {
  border-color: #fff;
  filter: drop-shadow(0 0 2px rgba(40, 20, 90, 0.55));
}

.ios-lbl-got {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ios-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ios-lbl-got::before,
.ios-lbl-got::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--ios-line);
}

.ios-lbl-got span::after {
  content: "↓";
  margin-left: 6px;
  color: var(--ios-violet);
}

.ios-lbl .ios-mcard {
  width: auto;
  margin: 0;
  align-self: start;
  padding: 14px;
  border-radius: 20px;
}

/* ---------- «Пишет везде»: три поверхности, где Мира говорит сама ---------- */

.ios-guide-left {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  align-content: start;
  min-width: 0;
}

.ios-mirasays {
  display: grid;
  gap: 12px;
}

.ios-mirasays-h {
  margin: 0;
  color: var(--ios-ink);
  font-size: 1.05rem;
  font-weight: 850;
}

.ios-msurf {
  margin: 0;
  display: grid;
  gap: 6px;
}

.ios-msurf figcaption {
  color: var(--ios-violet);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ios-msurf-card {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #e6e0f2;
  border-radius: 18px;
  background: #f4f0ff;
  box-shadow: var(--ios-e1);
  color: var(--ios-ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.ios-msurf-card img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

.ios-msurf-card--today {
  background: linear-gradient(135deg, #efe8ff 0%, #f8f5ff 100%);
}

.ios-msurf-card--note {
  grid-template-columns: minmax(0, 1fr);
  border-color: #d9eee3;
  background: #f1faf5;
}

/* ---------- Финальная кнопка: блик, мягкое свечение, стрелка ---------- */

.ios-btn-hero {
  position: relative;
  isolation: isolate;
  min-height: 56px;
  padding: 10px 24px 10px 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 16px;
  background: linear-gradient(120deg, #5b36dc 0%, #7646e6 50%, #b83d64 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--ios-e2), 0 18px 40px -16px rgba(122, 76, 240, 0.8);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 220ms var(--ios-ease);
}

/* Мягкое свечение вокруг кнопки: отдельный слой, «дышит» прозрачностью и масштабом. */

.ios-btn-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px;
  border-radius: 24px;
  background: radial-gradient(closest-side, rgba(124, 76, 240, 0.55), rgba(124, 76, 240, 0));
  opacity: 0.45;
  pointer-events: none;
}

.ios-btn-hero-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.ios-btn-hero-shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

.ios-btn-hero-label {
  position: relative;
}

.ios-btn-hero-arrow {
  position: relative;
  width: 9px;
  height: 9px;
  border-top: 2.6px solid currentColor;
  border-right: 2.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 220ms var(--ios-ease);
}

.ios-btn-hero:hover {
  transform: translateY(-2px);
}

.ios-btn-hero:hover .ios-btn-hero-arrow {
  transform: translateX(4px) rotate(45deg);
}

.ios-btn-hero:active {
  transform: scale(0.97);
}

.ios-btn-hero:focus-visible {
  outline: 3px solid rgba(107, 67, 227, 0.5);
  outline-offset: 3px;
}

/* ---------- 3. Скан этикетки ----------
   Рамка скана поверх фото упаковки; под фото — карточка Миры, её текст переводится со страницей. */

.ios-scan--label {
  height: 100%;
}

.ios-scan--label .ios-scan-bar {
  height: 34%;
  background: linear-gradient(180deg,
    rgba(112, 80, 245, 0) 0%,
    rgba(112, 80, 245, 0.14) 70%,
    rgba(112, 80, 245, 0.5) 97%,
    rgba(112, 80, 245, 0) 100%);
}

.ios-scan--label i {
  width: 11%;
  border-color: var(--ios-brand);
}

.ios-scan--label i:nth-of-type(1),
.ios-scan--label i:nth-of-type(2) { top: 3%; }

.ios-scan--label i:nth-of-type(3),
.ios-scan--label i:nth-of-type(4) { bottom: 3%; }

.ios-scan--label i:nth-of-type(1),
.ios-scan--label i:nth-of-type(3) { left: 3%; }

.ios-scan--label i:nth-of-type(2),
.ios-scan--label i:nth-of-type(4) { right: 3%; }

.ios-mcard {
  position: relative;
  z-index: 2;
  width: min(292px, 86%);
  align-self: flex-end;
  margin-top: -64px;
  padding: 14px;
  border-radius: 22px;
  color: var(--ios-ink);
}

.ios-mcard p {
  margin: 0;
}

/* Узко — плашка порции уходит под название, а не рвёт его посреди слова. */

.ios-mcard-name {
  margin-top: 12px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
}

.ios-mcard-name b {
  flex: 1 1 8em;
  min-width: 0;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.25;
}

.ios-mcard-name span {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ios-lilac);
  color: var(--ios-violet);
  font-size: 0.76rem;
  font-weight: 800;
}

.ios-mcard-kcal {
  margin-top: 6px !important;
  font-size: 0.92rem;
  font-weight: 700;
}

.ios-mcard-btn {
  margin-top: 12px;
  min-height: 42px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #7a5af0 0%, #5a36d6 100%);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

/* ---------- 4. Не просто счётчик: сравнение и сообщения ---------- */

.ios-guide {
  background:
    radial-gradient(50% 40% at 0% 30%, rgba(239, 232, 255, 0.85), transparent 70%),
    linear-gradient(180deg, transparent, var(--ios-wash) 25%, var(--ios-wash) 75%, transparent);
}

.ios-guide-grid {
  margin-top: clamp(32px, 4.5vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
}

.ios-compare {
  container: ios-compare / inline-size;
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--ios-line);
  border-radius: var(--ios-r-md);
  background: #fff;
  box-shadow: var(--ios-e1);
}

.ios-compare-head {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ios-compare-head span:first-child {
  color: var(--ios-muted);
}

.ios-compare-head span:last-child {
  color: var(--ios-violet);
}

.ios-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.ios-compare-list li {
  padding: 16px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  border-top: 1px solid var(--ios-line);
}

.ios-compare-list li:last-child {
  padding-bottom: 4px;
}

/* Узкая карточка (планшет в портрете, три колонки) — «было» над «стало», как на телефоне:
   в две колонки по 150 px длинное слово («Фотографируешь») рвалось посередине. */

@container ios-compare (max-width: 460px) {
  .ios-compare-head {
    display: none;
  }

  .ios-compare-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .ios-compare-list li:first-child {
    border-top: 0;
    padding-top: 4px;
  }
}

.ios-was,
.ios-now {
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  line-height: 1.45;
}

.ios-was::before,
.ios-now::before {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.ios-was {
  color: var(--ios-muted);
  font-weight: 600;
}

.ios-was::before {
  content: "✕";
  background: #efedf3;
  color: #8f879c;
}

.ios-now {
  color: var(--ios-ink);
  font-weight: 800;
}

.ios-now::before {
  content: "✓";
  background: var(--ios-violet);
  color: #fff;
  font-size: 0.78rem;
}

/* Сценарии — окна чата приложения. Заголовок сценария стоит НАД окном, тёмным жирным текстом без
   подложки: по форме, цвету и весу он не похож ни на один пузырь. Внутри окна — шапка чата (аватар,
   «Мира», зелёная точка «онлайн»), лента на сиреневом фоне и строка ввода, как в приложении
   (frontend/src/routes/app/chat, lib/ui/ChatBubble: пузыри 20 px с «хвостиком» 6 px). */

.ios-chats {
  container-type: inline-size;
}

.ios-chats-flow {
  columns: 1;
  column-gap: 16px;
}

@container (min-width: 560px) {
  .ios-chats-flow { columns: 2; }
}

.ios-chat {
  min-width: 0;
  margin: 0 0 22px;
  display: grid;
  break-inside: avoid;
}

.ios-chat-eyebrow {
  margin: 0;
  color: var(--ios-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ios-page .ios-chat-title {
  margin: 2px 0 10px;
  color: var(--ios-ink);
  font-size: clamp(1.15rem, 1.08rem + 0.25vw, 1.35rem);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.ios-chatwin {
  overflow: hidden;
  border: 1px solid #e6e0f2;
  border-radius: var(--ios-r-md);
  background: #f6f4fb;
  box-shadow: var(--ios-e2);
}

.ios-chatwin-top {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #ece7f5;
  background: #fff;
}

.ios-chatwin-top img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.ios-chatwin-who {
  display: grid;
  line-height: 1.2;
}

.ios-chatwin-who b {
  color: var(--ios-ink);
  font-size: 1rem;
  font-weight: 750;
}

.ios-chatwin-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6f6a85;
  font-size: 0.75rem;
  font-weight: 600;
}

.ios-chat-body {
  padding: 14px 12px 12px;
  display: grid;
  gap: 10px;
}

.ios-msg-typing {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 11px 12px;
  display: inline-flex;
  gap: 4px;
  border: 1px solid #ece7f5;
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.ios-msg-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ios-violet);
  opacity: 0.55;
}

.ios-chatwin-composer {
  margin: 0 10px 10px;
  padding: 6px 6px 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ece7f5;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  color: #8a84a0;
}

.ios-chatwin-composer .ios-ico {
  width: 19px;
  height: 19px;
}

.ios-chatwin-ph {
  flex: 1 1 auto;
  min-width: 0;
  color: #6f6a85;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ios-chatwin-mic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efeafd;
  color: var(--ios-violet);
}

.ios-guide-fine {
  text-align: right;
}

/* ---------- 5. Почему с Мирой получается ----------
   Заголовок секции — как у всех (над карточкой). В карточке одна крупная цифра с источником —
   это не график: без осей и легенды. */

.ios-why-card {
  position: relative;
  overflow: hidden;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  border-radius: var(--ios-r-lg);
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(40% 60% at 100% 100%, rgba(255, 150, 110, 0.28), transparent 70%),
    linear-gradient(135deg, #7654ee 0%, #5a33d4 58%, #4623b8 100%);
  box-shadow: 0 40px 80px -50px rgba(74, 38, 191, 0.85);
  color: #fff;
  isolation: isolate;
}

.ios-why-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 520px;
  aspect-ratio: 1;
  left: -160px;
  bottom: -260px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.04), 0 0 0 120px rgba(255, 255, 255, 0.03);
}

.ios-why-num {
  margin: 0;
  color: #fff;
  font-size: clamp(5.5rem, 3.4rem + 8vw, 10.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ios-why-copy {
  max-width: 62ch;
}

.ios-why-stat {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ios-why-source {
  max-width: 56ch;
  margin: 16px 0 0;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
}

.ios-why-source a {
  color: #fff;
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ios-why-source a:focus-visible {
  outline-color: rgba(255, 255, 255, 0.85);
}

.ios-why-mira {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.55;
}

.ios-why-ways {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ios-why-ways li {
  padding: 7px 13px 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  font-weight: 750;
}

.ios-why-ways .ios-ico {
  width: 18px;
  height: 18px;
}

/* ---------- 6. Мира на связи везде ---------- */

.ios-speaks {
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(239, 232, 255, 0.9), transparent 70%),
    linear-gradient(180deg, transparent, var(--ios-wash) 30%, var(--ios-wash) 70%, transparent);
}

/* Стопка поверхностей: слева «Прогресс», в центре чат и карточка «Сегодня», справа пуши и виджет.
   Центральная колонка заходит на соседние. При появлении поверхности слегка повёрнуты в 3D и
   выпрямляются (transform), при «уменьшении движения» — сразу ровно. */

.ios-surfaces {
  margin-top: clamp(32px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
}

.ios-sf-col {
  min-width: 0;
  display: grid;
  gap: 26px;
  perspective: 1400px;
}

.ios-sf-col--left {
  justify-items: center;
}

.ios-sf-col--mid {
  position: relative;
  z-index: 2;
  margin-inline: -28px;
  justify-items: center;
}

.ios-sf-col--right {
  justify-items: start;
}

.ios-sf {
  width: 100%;
  max-width: 420px;
  margin: 0;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ios-sf-label {
  color: var(--ios-violet);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ios-sf--progress {
  max-width: none;
  justify-items: center;
}

.ios-sf--progress .ios-phone {
  --w: clamp(200px, min(21vw, 44svh), 270px);
}

.ios-sf--today {
  position: relative;
  z-index: 3;
  margin-top: -8px;
  max-width: 380px;
}

.ios-sf-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), var(--ios-e2);
}

/* Пуши — баннеры экрана блокировки iOS на тёмных обоях. */

.ios-push-wall,
.ios-wg-wall {
  padding: 14px;
  border-radius: var(--ios-r-md);
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(155, 132, 255, 0.55), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(255, 138, 101, 0.4), transparent 65%),
    #15122a;
  box-shadow: var(--ios-e2);
}

.ios-push-wall {
  display: grid;
  gap: 8px;
}

.ios-push {
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-radius: 18px;
  background: rgba(246, 245, 251, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--ios-glass-edge), var(--ios-e1);
  color: #16131f;
}

.ios-push--older {
  transform: scale(0.96);
  transform-origin: top center;
  background: rgba(246, 245, 251, 0.86);
}

.ios-push-icon img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 9px;
}

.ios-push-body p {
  margin: 0;
}

.ios-push-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
}

.ios-push-top b {
  font-weight: 750;
}

/* Время на стекле баннера: над тёмной стеной подложка темнеет, #5b5866 давал 4:1 — темнее до 5,4:1. */

.ios-push-top span {
  flex: 0 0 auto;
  color: #45424f;
}

.ios-push-title {
  margin-top: 2px !important;
  font-size: 0.9rem;
  font-weight: 750;
}

.ios-push-text {
  margin-top: 2px !important;
  font-size: 0.9rem;
  line-height: 1.35;
}

/* Тёмные виджеты — по SwiftUI-видам MiraWidget (SmallDayView, MediumDayView) и цветам тёмной темы
   из их Assets.xcassets: фон #141524, дорожка кольца #2B2740, «в плане» #3FBE85, акцент #9B84FF,
   плашка воды #16283A / #8FBDE0. */

.ios-wg {
  --wg-accent: #9b84ff;
  --wg-track: #2b2740;
  --wg-inner: #2a2442;
  --wg-ok: #3fbe85;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  background: rgba(20, 21, 36, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--ios-e2);
  color: #f2f0fa;
  font-variant-numeric: tabular-nums;
}

.ios-wg p {
  margin: 0;
}

.ios-wg--medium {
  width: 100%;
  max-width: 360px;
  container-type: inline-size;
}

/* Узкий средний виджет: шагомер в строке заголовка уступает место главному — остатку калорий. */

@container (max-width: 339px) {
  .ios-wg-bonus { display: none; }

  .ios-wg-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .ios-wg-left {
    overflow: visible;
  }

  .ios-wg-pill {
    margin-left: 0;
  }
}

.ios-wg--small {
  width: 158px;
  flex: 0 0 auto;
  display: grid;
  align-content: start;
  gap: 3px;
}

.ios-wg-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.76rem;
  white-space: nowrap;
}

/* Общее правило сайта `.sales-v3 p { text-wrap: pretty }` — сокращённая запись, и она возвращает
   перенос строк, отменяя white-space: nowrap. Для однострочных подписей возвращаем запрет. */

.ios-page .ios-wg-head,
.ios-page .ios-vpill,
.ios-page .ios-push-top {
  text-wrap: nowrap;
}

.ios-wg-head b {
  font-weight: 700;
  color: rgba(242, 240, 250, 0.8);
}

.ios-wg-logo img {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.ios-wg-sep {
  color: rgba(242, 240, 250, 0.5);
}

.ios-wg-left {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 800;
}

.ios-wg-bonus {
  flex: 0 0 auto;
  color: var(--wg-ok);
  font-size: 0.68rem;
  font-weight: 750;
}

.ios-wg-pill {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #16283a;
  color: #8fbde0;
  font-size: 0.68rem;
  font-weight: 750;
}

.ios-wg-line {
  margin-top: 8px !important;
  color: rgba(242, 240, 250, 0.82);
  font-size: 0.76rem;
  line-height: 1.35;
}

.ios-wg-rings {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}

.ios-wg-ring {
  width: 46px;
  aspect-ratio: 1;
  margin: 0 auto 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--wg-inner) 76%, transparent 78%),
    conic-gradient(var(--wg-ok) calc(var(--p) * 360deg), var(--wg-track) 0);
}

.ios-wg-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

.ios-wg-plus {
  color: var(--wg-accent);
  font-size: 1.35rem;
  line-height: 1;
}

/* Одна строка, как в виджете (lineLimit 1 + minimumScaleFactor 0.6): не влезает — ios.js
   уменьшает кегль до 0,6, дальше многоточие. Слово посередине не рвётся. */

.ios-wg-rings b {
  display: block;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ios-wg-num {
  display: block;
  overflow: hidden;
  color: rgba(242, 240, 250, 0.58);
  font-size: 0.64rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ios-wg-num strong {
  color: #fff;
  font-weight: 800;
}

.ios-wg-big {
  margin-top: 8px !important;
  line-height: 1.05;
}

.ios-wg-big b {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ios-wg-big span {
  color: rgba(242, 240, 250, 0.72);
  font-size: 0.7rem;
  font-weight: 650;
}

.ios-wg-eaten {
  color: rgba(242, 240, 250, 0.62);
  font-size: 0.68rem;
}

.ios-wg-bar {
  height: 6px;
  margin: 4px 0 2px;
  border-radius: 999px;
  background: var(--wg-track);
  overflow: hidden;
}

.ios-wg-bar i {
  display: block;
  width: 57%;
  height: 100%;
  border-radius: inherit;
  background: var(--wg-accent);
}

.ios-wg-macro {
  color: rgba(242, 240, 250, 0.62);
  font-size: 0.66rem;
}

.ios-wg-macro b {
  color: #fff;
}

/* ---------- 7. Всё видно ---------- */

.ios-see-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.ios-nutrients {
  margin-top: 26px;
}

.ios-nutrients-label {
  margin: 0;
  color: var(--ios-ink);
  font-weight: 800;
}

.ios-points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ios-points li {
  position: relative;
  padding-left: 30px;
  color: var(--ios-copy);
  font-weight: 650;
  line-height: 1.5;
}

.ios-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ios-violet);
  border-right-color: rgba(107, 67, 227, 0.22);
  border-bottom-color: rgba(107, 67, 227, 0.22);
}

.ios-see-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 28px);
}

.ios-see-phones .ios-phone {
  --w: min(250px, (100vw - 60px) / 2, 34svh);
}

.ios-see-phones .ios-phone:nth-child(2) {
  margin-top: 48px;
}

/* Устройства: «Домой», экран блокировки, Apple Watch, Dynamic Island. Светлая панель, тёмные
   макеты — так виджеты видны в той теме, о которой просил продакт, и не сливаются с тёмным блоком
   Apple Health ниже. */

.ios-devices {
  margin-top: clamp(48px, 7vw, 96px);
  padding: clamp(22px, 4vw, 48px);
  border: 1px solid var(--ios-line);
  border-radius: var(--ios-r-lg);
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(255, 176, 146, 0.24), transparent 70%),
    linear-gradient(135deg, #f3eeff 0%, #fbf8ff 55%, var(--ios-coral-soft) 100%);
  container-type: inline-size;
}

.ios-devices-head p {
  max-width: 44rem;
  margin: 10px 0 0;
  color: var(--ios-copy);
  line-height: 1.6;
}

.ios-devices-grid {
  margin-top: clamp(22px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@container (min-width: 760px) {
  .ios-devices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ios-dev {
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
}

.ios-dev figcaption {
  display: grid;
  gap: 4px;
  color: var(--ios-copy);
  line-height: 1.55;
}

.ios-dev figcaption b {
  color: var(--ios-ink);
  font-size: 1.06rem;
  font-weight: 800;
}

.ios-dev-stage {
  min-height: 250px;
  padding: 20px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  border-radius: var(--ios-r-md);
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(124, 92, 255, 0.55), transparent 65%),
    radial-gradient(60% 70% at 100% 100%, rgba(58, 120, 220, 0.45), transparent 70%),
    #0e0d1c;
  box-shadow: var(--ios-e1);
}

.ios-dev--home .ios-wg--medium {
  flex: 1 1 300px;
  max-width: 350px;
}

/* Экран блокировки: виджеты в «вибрантном» стиле — белые на обоях. */

.ios-lock {
  width: min(100%, 340px);
  color: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ios-lock p {
  margin: 0;
}

.ios-lock-date {
  font-size: 0.88rem;
  font-weight: 650;
  opacity: 0.92;
}

.ios-lock-inline {
  font-weight: 650;
}

.ios-lock-time {
  margin-top: 6px !important;
  font-size: clamp(3.4rem, 2.6rem + 3cqi, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ios-lock-widgets {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 58px;
  align-items: center;
  gap: 10px;
}

.ios-lock-rect {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  text-align: left;
}

.ios-lock-rect b {
  font-size: 0.82rem;
}

.ios-lock-rect small {
  font-size: 0.64rem;
  opacity: 0.86;
}

.ios-lock-bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.ios-lock-bar i {
  display: block;
  width: 57%;
  height: 100%;
  background: #fff;
}

.ios-lock-circle {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(20, 16, 40, 0.55) 80%, transparent 82%),
    conic-gradient(#fff calc(var(--p) * 360deg), rgba(255, 255, 255, 0.25) 0);
  line-height: 1.05;
}

.ios-lock-circle b {
  font-size: 0.8rem;
}

.ios-lock-circle small {
  font-size: 0.44rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

/* Apple Watch: корпус и ремешок — фото (watch-body.webp, 263×454, экран прозрачный), под ним —
   настоящий кадр циферблата. Экран в корпусе: x 11–241, y 90–364 (230×274, как 416×496 у кадра),
   скругление ≈ 56 px. Кадр заходит под рамку на 1,5 px с каждой стороны, чтобы не было щели.
   Двое часов стоят рядом при любой ширине: размер берётся от ширины сцены. */

.ios-dev--watch .ios-dev-stage {
  container-type: inline-size;
  flex-wrap: nowrap;
  gap: 18px;
}

.ios-watch {
  --ww: clamp(96px, calc((100cqi - 50px) / 2.1), 184px);
  position: relative;
  flex: none;
  width: var(--ww);
  aspect-ratio: 263 / 454;
  /* верх и низ ремешка уходят за край сцены */
  margin-block: calc(var(--ww) * -0.2);
  filter: drop-shadow(0 18px 22px rgba(8, 4, 24, 0.55));
}

.ios-watch-face,
.ios-watch::before {
  position: absolute;
  left: 3.612%;
  top: 19.493%;
  width: 88.593%;
  height: 61.013%;
  border-radius: 24.7% / 20.8%;
}

.ios-watch-face {
  display: block;
  object-fit: cover;
  background: #000;
}

/* Блик стекла — один, неподвижный, над циферблатом и под корпусом. */

.ios-watch::before {
  content: "";
  z-index: 1;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.12), transparent 36%);
  pointer-events: none;
}

.ios-watch-body {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  pointer-events: none;
}

/* Dynamic Island — по EstimateActivity.swift: «Мира считает КБЖУ · фото · почти готово», затем
   результат с кнопкой «Открыть». Смена состояния — один раз, при появлении блока. */

.ios-island-scene {
  width: min(100%, 360px);
  display: grid;
  justify-items: center;
  gap: 14px;
}

.ios-island {
  width: 100%;
  padding: 14px 14px;
  display: grid;
  border-radius: 34px;
  background: #000;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px -20px rgba(0, 0, 0, 0.9);
}

.ios-island-state {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.ios-island-state--busy {
  opacity: 0;
}

.ios-la-tile {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #2a2442;
  font-size: 1.2rem;
}

.ios-la-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.ios-la-text b {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.ios-la-text small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.74rem;
}

.ios-la-timer {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #000 72%, transparent 75%),
    conic-gradient(#9b84ff 0.7turn, rgba(255, 255, 255, 0.18) 0);
}

.ios-la-open {
  padding: 7px 12px;
  border-radius: 999px;
  background: #9b84ff;
  color: #120c26;
  font-size: 0.78rem;
  font-weight: 800;
}

.ios-island-compact {
  width: 200px;
  height: 36px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  background: #000;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ios-island-compact i {
  width: 70px;
}

/* ---------- 8. Apple Health: сцена «поток данных» ---------- */

.ios-health {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 36px;
  background:
    radial-gradient(55% 40% at 88% 4%, rgba(124, 92, 255, 0.42), transparent 70%),
    radial-gradient(45% 30% at 4% 100%, rgba(255, 122, 79, 0.2), transparent 70%),
    var(--ios-night);
  color: var(--ios-on-night);
}

.ios-page .ios-health h2,
.ios-page .ios-health h3 {
  color: #fff;
}

.ios-page .ios-health h2 em {
  color: #cdbdff;
}

.ios-health .ios-eyebrow {
  color: #cdbdff;
}

.ios-health .ios-lead {
  color: var(--ios-on-night-soft);
}

/* Плитка «Здоровья» — нейтральная: белое сердце-значок, без фирменной иконки Apple. */

.ios-hk-tile {
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: #fff;
  color: var(--ios-ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.ios-hk-tile-head {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}

.ios-hk-tile-head b {
  font-size: 0.92rem;
  line-height: 1.1;
}

.ios-hk-tile-head small {
  grid-column: 2;
  color: var(--ios-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.ios-heart {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(33, 23, 47, 0.1);
  border-radius: 8px;
  background: #fff;
}

.ios-page .ios-heart svg {
  width: 20px;
  height: 20px;
  fill: #ff3b5c;
  stroke: none;
}

.ios-hk-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Узко — число уходит на строку ниже, а подпись переносится только по словам. */

.ios-hk-metrics li {
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  border-radius: 12px;
  background: #f6f4fa;
  font-size: 0.84rem;
  font-weight: 650;
}

.ios-hk-metrics .ios-ico {
  width: 18px;
  height: 18px;
  color: #ff5a3c;
}

.ios-hk-metrics li > span {
  flex: 1 1 6em;
  min-width: min-content;
  overflow-wrap: normal;
}

.ios-hk-metrics .ios-ico {
  flex: none;
}

/* Строка «Вес»: отдельный цвет — это начало зелёного провода. */

.ios-hk-metrics .ios-hk-weight .ios-ico {
  color: #1f9d68;
}

.ios-hk-metrics b {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Стрелка потока: прорисовывается при появлении, по ней бегут данные. */

/* Воссозданная строка «Мой день сегодня» — чтобы число и полоса могли ожить. Цвета и размеры сняты
   с экрана приложения. */

.ios-daycard {
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: #fff;
  color: var(--ios-ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
}

.ios-daycard p {
  margin: 0;
}

.ios-daycard-title {
  font-size: 0.95rem;
  font-weight: 800;
}

.ios-daycard-row {
  margin-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.ios-daycard-eaten b {
  font-size: 1.9rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
}

.ios-daycard-eaten > span {
  color: var(--ios-muted);
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.ios-daycard-left {
  display: grid;
  justify-items: end;
  line-height: 1.05;
}

.ios-daycard-left span {
  color: var(--ios-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.ios-daycard-left b {
  font-size: 1.55rem;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.ios-daycard-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ios-bar-track {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: #ecebf2;
  overflow: hidden;
}

.ios-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 57%;
  border-radius: 999px;
  background: #2f9e6a;
  transform-origin: left center;
}

.ios-bar-bonus {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 13%;
  background: repeating-linear-gradient(-55deg, #f39a62 0 3px, rgba(243, 154, 98, 0.18) 3px 6px);
  transform-origin: left center;
}

.ios-bar-pct {
  color: #1d7a4d;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.ios-daycard-act {
  margin-top: 10px !important;
  color: #5b5566;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
}

.ios-daycard-act b {
  color: #4a4456;
  font-weight: 800;
}

.ios-daycard-src {
  color: var(--ios-muted);
  font-size: 0.74rem;
}

.ios-shot-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

/* Плашки по ширине слова, а не сетка в две колонки: в узкой карточке «Kohlenhydrate» больше
   не делится на три строки. */

.ios-hk-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ios-hk-rows li {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-radius: 10px;
  background: #f6f4fa;
  font-size: 0.8rem;
  font-weight: 700;
}

.ios-hk-rows li span {
  min-width: 0;
  white-space: nowrap;
}

.ios-hk-rows .ios-ico {
  width: 16px;
  height: 16px;
  color: var(--ios-mint);
  stroke-width: 2.6;
}

.ios-hk-privacy {
  margin-top: 8px;
  padding-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ios-hk-privacy .ios-ico {
  margin-top: 2px;
  color: #8ee6bd;
}

.ios-hk-privacy p {
  max-width: 60rem;
  margin: 0;
  color: var(--ios-on-night-soft);
  line-height: 1.55;
}

.ios-hk-privacy b {
  color: #fff;
}

/* Сцена «поток данных». Карточки лежат на слегка повёрнутой плоскости (perspective + rotateX/Y,
   слои на разной глубине translateZ). Провода — SVG, координаты считает ios.js по раскладке
   (offsetLeft/offsetTop внутри сцены, поэтому поворот плоскости не сбивает их). По проводу бежит
   точка: короткий штрих с круглым концом, анимируется stroke-dashoffset; «свечение» — второй,
   широкий полупрозрачный штрих, без SVG-фильтров. Цикл запускает ios.js классом .is-run. */

.ios-hk-scene {
  margin-top: clamp(28px, 4vw, 48px);
  perspective: 1800px;
  container-type: inline-size;
}

.ios-hk-stage {
  --hk-mode: wide;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.5fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(28px, 5cqi, 72px);
  transform: rotateX(5deg) rotateY(-6deg);
  transform-style: preserve-3d;
}

.ios-hk-wires {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ios-hk-src,
.ios-hk-out {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 18px;
  transform-style: preserve-3d;
}

.ios-hk-node {
  position: relative;
  min-width: 0;
  transform: translateZ(26px);
}

.ios-hk-core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #fff;
  text-align: center;
  transform: translateZ(52px);
}

.ios-hk-core img {
  position: relative;
  width: clamp(64px, 8cqi, 84px);
  height: auto;
  border-radius: 23%;
  box-shadow: 0 0 0 6px rgba(155, 132, 255, 0.18), 0 0 44px rgba(155, 132, 255, 0.55);
}

.ios-hk-core-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118px;
  height: 118px;
  margin: -84px 0 0 -59px;
  border: 2px solid rgba(205, 189, 255, 0.6);
  border-radius: 50%;
  opacity: 0;
}

.ios-hk-core b {
  font-size: 0.95rem;
}

.ios-hk-core small {
  color: var(--ios-on-night-soft);
  font-size: 0.8rem;
}

.ios-hk-line {
  fill: none;
  stroke: rgba(205, 189, 255, 0.3);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
}

.ios-hk-halo,
.ios-hk-dot {
  fill: none;
  stroke: var(--wc);
  stroke-linecap: round;
  stroke-dasharray: 0.001 200;
  opacity: 0;
}

.ios-hk-halo {
  stroke-width: 16;
  stroke-opacity: 0.26;
}

.ios-hk-dot {
  stroke-width: 6;
}

.ios-hk-wire--energy { --wc: #ffb08f; }

.ios-hk-wire--weight { --wc: #7cf0bd; }

.ios-hk-wire--food { --wc: #cdbdff; }

.ios-shot-card[data-node="weight"]::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid #7cf0bd;
  border-radius: 22px;
  opacity: 0;
  pointer-events: none;
}

/* Легенда: три факта под сценой, цвет точки = цвет провода. */

.ios-hk-legend {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
}

.ios-hk-fact h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ios-hk-fact h3::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--wc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wc) 22%, transparent);
}

.ios-hk-fact p {
  max-width: 44ch;
  margin: 8px 0 0;
  color: var(--ios-on-night-soft);
  line-height: 1.6;
}

.ios-hk-fact--energy { --wc: #ffb08f; }

.ios-hk-fact--weight { --wc: #7cf0bd; }

.ios-hk-fact--food { --wc: #cdbdff; }

/* В столбик (узкая сцена): плоскость без поворота, карточки по порядку, провода идут по краям. */

@container (max-width: 819px) {
  .ios-hk-stage {
    --hk-mode: stacked;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-inline: 26px;
    transform: none;
  }

  .ios-hk-src,
  .ios-hk-out {
    display: contents;
  }

  .ios-hk-node,
  .ios-hk-core {
    transform: none;
  }

  .ios-hk-node[data-node="health"] { order: 1; }

  .ios-hk-core { order: 3; }

  .ios-hk-node[data-node="day"] { order: 4; }

  .ios-hk-node[data-node="weight"] { order: 5; }

  .ios-hk-node[data-node="write"] { order: 6; }

  .ios-hk-node {
    width: 100%;
    max-width: 380px;
    justify-self: center;
  }
}

/* ---------- 9. Вопросы ---------- */

.ios-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 72px);
}

.ios-faq-head {
  position: sticky;
  top: 112px;
  align-self: start;
}

.ios-faq-list {
  border-top: 1px solid var(--ios-line);
}

.ios-faq-list details {
  border-bottom: 1px solid var(--ios-line);
}

.ios-faq-list summary {
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ios-ink);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  border-radius: 12px;
}

.ios-faq-list summary::-webkit-details-marker {
  display: none;
}

.ios-chev {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ios-lilac);
  color: var(--ios-violet);
  transition: transform 280ms var(--ios-spring);
}

.ios-chev .ios-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.ios-faq-list summary:hover .ios-chev {
  background: #e4d9ff;
}

.ios-faq-list details[open] .ios-chev {
  transform: rotate(180deg);
}

/* 56ch ≈ 75 знаков в строке: «ch» — ширина нуля, средняя буква уже, и 62ch давали 82–85 знаков. */

.ios-faq-body p {
  max-width: 56ch;
  margin: 0;
  padding: 0 4px 24px;
  color: var(--ios-copy);
  line-height: 1.65;
}

/* ---------- 10. Финальный призыв ---------- */

.ios-final-section {
  padding-top: 0;
}

.ios-final {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 6vw, 80px) clamp(22px, 5vw, 72px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  border: 1px solid var(--ios-line);
  border-radius: 40px;
  background: linear-gradient(135deg, #f4efff 0%, #ffffff 55%, #fff4ee 100%);
  isolation: isolate;
}

.ios-final-glow {
  position: absolute;
  z-index: -1;
  inset: -30% -10% -30% 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.28), rgba(124, 92, 255, 0) 62%);
  pointer-events: none;
}

.ios-final-icon {
  width: clamp(84px, 9vw, 124px);
  height: auto;
  border-radius: 23%;
  box-shadow: 0 26px 50px -22px rgba(80, 48, 200, 0.6);
}

.ios-final-copy .ios-lead {
  max-width: 32rem;
}

/* Зрение Миры: шаги по очереди. --seq — задержка «сюжета» внутри шага: когда шаги стоят в ряд, они
   играют друг за другом; в столбик каждый начинается, когда до него долистали. */

@media (min-width: 961px) {
  .ios-vstep:nth-child(2) { --d: 120ms; --seq: 900ms; }

  .ios-vstep:nth-child(3) { --d: 240ms; --seq: 2100ms; }
}

html.ios-motion .ios-vstage > .ios-phone {
  transition: transform 1000ms var(--ios-ease) calc(var(--d, 0ms) + 140ms);
}

html.ios-motion .ios-vstep:not(.is-in) .ios-vstage > .ios-phone {
  transform: translateY(60px);
}

html.ios-motion .ios-step-num {
  transition:
    transform 560ms var(--ios-spring) calc(var(--d, 0ms) + 380ms),
    opacity 300ms ease calc(var(--d, 0ms) + 380ms);
}

html.ios-motion .ios-vstep:not(.is-in) .ios-step-num {
  opacity: 0;
  transform: scale(0.3) rotate(-20deg);
}

/* Рамка прицела «защёлкивается» на блюде, затем появляются метки ингредиентов. */

html.ios-motion .ios-scan i {
  transition:
    opacity 400ms ease calc(var(--seq, 0ms) + 300ms),
    transform 520ms var(--ios-spring) calc(var(--seq, 0ms) + 300ms);
}

html.ios-motion .ios-vstep:not(.is-in) .ios-scan i,
html.ios-motion .ios-lbl:not(.is-in) .ios-scan i {
  opacity: 0;
  transform: scale(1.35);
}

/* Карточка нутриентов выезжает, числа «набегают», строка дневника встаёт на место. */

html.ios-motion .ios-vcard {
  transition: transform 800ms var(--ios-ease), opacity 500ms ease;
}

html.ios-motion .ios-vnut { transition-delay: calc(var(--seq, 0ms) + 1300ms); }

html.ios-motion .ios-vrow { transition-delay: calc(var(--seq, 0ms) + 700ms); }

html.ios-motion .ios-vstep:not(.is-in) .ios-vcard {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
}

html.ios-motion .ios-vnut .ios-chips li {
  transition: transform 420ms var(--ios-spring), opacity 300ms ease;
  transition-delay: calc(var(--seq, 0ms) + 1750ms + var(--ci, 0) * 70ms);
}

html.ios-motion .ios-vstep:not(.is-in) .ios-vnut .ios-chips li,
html.ios-motion .ios-nutrients:not(.is-in) .ios-chips li {
  opacity: 0;
  transform: translateY(8px) scale(0.9);
}

html.ios-motion .ios-vrow-ok {
  transition:
    transform 520ms var(--ios-spring) calc(var(--seq, 0ms) + 1300ms),
    opacity 300ms ease calc(var(--seq, 0ms) + 1300ms);
}

html.ios-motion .ios-vstep:not(.is-in) .ios-vrow-ok {
  opacity: 0;
  transform: scale(0.4);
}

html.ios-motion .ios-nutrients .ios-chips li {
  transition: transform 460ms var(--ios-spring), opacity 300ms ease;
  transition-delay: calc(200ms + var(--ci, 0) * 70ms);
}

/* Этикетка: упаковка ложится, по ней идёт скан, карточка Миры выезжает справа. */

html.ios-motion .ios-mcard {
  transition: transform 800ms var(--ios-ease) 900ms, opacity 500ms ease 900ms;
}

html.ios-motion .ios-mcard .ios-chips li {
  transition: transform 420ms var(--ios-spring), opacity 300ms ease;
  transition-delay: calc(1350ms + var(--ci, 0) * 70ms);
}

/* Сравнение: строки по одной. */

html.ios-motion .ios-compare-list li {
  transition: opacity 500ms ease, transform 600ms var(--ios-ease);
}

html.ios-motion .ios-compare-list li:nth-child(1) { transition-delay: 200ms; }

html.ios-motion .ios-compare-list li:nth-child(2) { transition-delay: 320ms; }

html.ios-motion .ios-compare-list li:nth-child(3) { transition-delay: 440ms; }

html.ios-motion .ios-compare-list li:nth-child(4) { transition-delay: 560ms; }

html.ios-motion .ios-compare:not(.is-in) .ios-compare-list li {
  opacity: 0;
  transform: translateY(12px);
}

/* Сообщения: вопрос, три точки «печатает», ответ Миры. */

html.ios-motion .ios-chat .ios-msg--me {
  transform-origin: right bottom;
  transition:
    transform 500ms var(--ios-spring) calc(var(--d, 0ms) + 250ms),
    opacity 300ms ease calc(var(--d, 0ms) + 250ms);
}

html.ios-motion .ios-chat .ios-msg--mira {
  transform-origin: left bottom;
  transition:
    transform 520ms var(--ios-spring) calc(var(--d, 0ms) + 1650ms),
    opacity 320ms ease calc(var(--d, 0ms) + 1650ms);
}

html.ios-motion .ios-chat:not(.is-in) .ios-msg--me,
html.ios-motion .ios-chat:not(.is-in) .ios-msg--mira {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
}

/* Крупная цифра «×2». */

html.ios-motion .ios-why-num {
  transition: transform 900ms var(--ios-spring) 250ms, opacity 500ms ease 250ms;
}

html.ios-motion .ios-why-card:not(.is-in) .ios-why-num {
  opacity: 0;
  transform: scale(0.55) rotate(-8deg);
}

html.ios-motion .ios-see-phones .ios-phone {
  transition: transform 1000ms var(--ios-ease);
}

html.ios-motion .ios-see-phones .ios-phone:nth-child(2) {
  transition-delay: 160ms;
}

html.ios-motion .ios-see-phones:not(.is-in) .ios-phone {
  transform: translateY(50px);
}

/* Поверхности «Мира на связи»: наклонены в 3D и выпрямляются при появлении. */

html.ios-motion .ios-sf {
  transition:
    opacity 800ms var(--ios-ease) var(--d, 0ms),
    transform 1100ms var(--ios-ease) calc(var(--d, 0ms) + 80ms);
}

html.ios-motion .ios-sf-col--left .ios-sf:not(.is-in) {
  transform: rotateY(12deg) translateX(-16px);
}

html.ios-motion .ios-sf-col--mid .ios-sf:not(.is-in) {
  transform: rotateX(10deg) translateY(24px);
}

html.ios-motion .ios-sf-col--right .ios-sf:not(.is-in) {
  transform: rotateY(-12deg) translateX(16px);
}

/* Dynamic Island: сначала «считает», через полторы секунды — результат. Один раз. */

html.ios-motion .ios-dev--live:not(.is-in) .ios-island-state--busy {
  opacity: 1;
}

html.ios-motion .ios-dev--live:not(.is-in) .ios-island-state--done {
  opacity: 0;
  transform: translateY(6px);
}

html.ios-motion .ios-dev--live .ios-island-state--busy {
  transition: opacity 400ms ease 1500ms;
}

html.ios-motion .ios-dev--live .ios-island-state--done {
  transition: opacity 420ms ease 1700ms, transform 520ms var(--ios-ease) 1700ms;
}

/* Сцена Apple Health: один цикл ~8 с. Класс .is-run ставит и снимает ios.js, пока сцена на экране. */

.ios-hk-scene.is-run [data-wire] .ios-hk-dot,
.ios-hk-scene.is-run [data-wire] .ios-hk-halo {
  animation: ios-hk-travel 1.5s linear both;
}

.ios-hk-scene.is-run [data-wire="health@hk-energy>core"] path { animation-delay: 300ms; }

.ios-hk-scene.is-run [data-wire="health@hk-weight>core"] path { animation-delay: 700ms; }

.ios-hk-scene.is-run [data-wire="core>day"] path { animation-delay: 2000ms; }

.ios-hk-scene.is-run [data-wire="core>weight"] path { animation-delay: 2400ms; }

.ios-hk-scene.is-run [data-wire="core>write"] path { animation-delay: 4200ms; }

.ios-hk-scene.is-run [data-wire] .ios-hk-line { animation: none; }

.ios-hk-scene.is-run .ios-hk-core-ring {
  animation: ios-hk-pulse 1.1s ease-out 1.8s 2 both;
}

.ios-hk-scene.is-run .ios-bar-bonus {
  animation: ios-hk-grow 900ms var(--ios-ease) 3.3s both;
}

.ios-hk-scene.is-run .ios-shot-card[data-node="weight"]::after {
  animation: ios-hk-ring 1.1s ease-out 3.8s both;
}

.ios-hk-scene.is-run [data-node="write"] .ios-hk-rows li {
  animation: ios-hk-row 500ms ease both;
  animation-delay: calc(5600ms + var(--i, 0) * 90ms);
}

.ios-hk-scene.is-run [data-node="write"] .ios-hk-rows .ios-ico {
  animation: ios-hk-check 420ms var(--ios-spring) both;
  animation-delay: calc(5700ms + var(--i, 0) * 90ms);
}

@keyframes ios-hk-travel {
  0% { stroke-dashoffset: 0; opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes ios-hk-pulse {
  0% { opacity: 0.7; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes ios-hk-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ios-hk-ring {
  0% { opacity: 0.9; transform: scale(0.98); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes ios-hk-row {
  from { opacity: 0.3; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes ios-hk-check {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* Зрение Миры: рамки по очереди — курица, брокколи, киноа; подпись «печатается», галочка ставится.
   Цикл 5,2 с, три раза, потом всё остаётся на месте. До появления блока — ничего. */

.ios-det--1 { --dd: 0ms; }

.ios-det--2 { --dd: 550ms; }

.ios-det--3 { --dd: 1100ms; }

@media (prefers-reduced-motion: no-preference) {
  .ios-vstep--scan .ios-scan-bar {
    animation-name: ios-scan-sweep2;
    animation-duration: 5.2s;
  }

  .ios-det { animation: ios-det-box 5.2s var(--ios-ease) calc(var(--seq, 0ms) + 400ms + var(--dd)) 3 both; }

  .ios-det-chip { animation: ios-det-chip 5.2s ease calc(var(--seq, 0ms) + 400ms + var(--dd)) 3 both; }

  .ios-det-chip .ios-ico { animation: ios-det-tick 5.2s var(--ios-spring) calc(var(--seq, 0ms) + 400ms + var(--dd)) 3 both; }

  html.ios-motion .ios-vstep:not(.is-in) .ios-det,
  html.ios-motion .ios-vstep:not(.is-in) .ios-det-chip,
  html.ios-motion .ios-vstep:not(.is-in) .ios-det-chip .ios-ico,
  html.ios-motion .ios-lbl:not(.is-in) .ios-scan-bar {
    animation: none;
    opacity: 0;
  }

  /* Финальная кнопка: блик проходит раз в несколько секунд, свечение дышит. */

  .ios-btn-hero-shine { animation: ios-shine 4.6s ease-in-out 1.2s infinite; }

  .ios-btn-hero::before { animation: ios-glow 4.6s ease-in-out infinite; }
}

@keyframes ios-scan-sweep2 {
  0% { opacity: 0; transform: translateY(-105%); }
  4% { opacity: 1; }
  28% { opacity: 1; transform: translateY(240%); }
  33%, 100% { opacity: 0; transform: translateY(240%); }
}

@keyframes ios-det-box {
  0%, 30% { opacity: 0; transform: scale(1.3); }
  37%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes ios-det-chip {
  0%, 36% { opacity: 0; clip-path: inset(0 100% 0 0 round 999px); }
  38% { opacity: 1; clip-path: inset(0 100% 0 0 round 999px); }
  48%, 100% { opacity: 1; clip-path: inset(0 0 0 0 round 999px); }
}

@keyframes ios-det-tick {
  0%, 46% { transform: scale(0); }
  54%, 100% { transform: scale(1); }
}

@keyframes ios-shine {
  0%, 50% { transform: translateX(-120%) skewX(-18deg); }
  80%, 100% { transform: translateX(330%) skewX(-18deg); }
}

@keyframes ios-glow {
  0%, 100% { opacity: 0.3; transform: scale(0.96); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

/* Скан этикетки: карточка «Мира поняла» проявляется после скана. */

html.ios-motion .ios-lbl .ios-mcard {
  transition: transform 700ms var(--ios-ease) calc(var(--d, 0ms) + 900ms), opacity 500ms ease calc(var(--d, 0ms) + 900ms);
}

html.ios-motion .ios-lbl:not(.is-in) .ios-mcard {
  opacity: 0;
  transform: translateY(12px);
}

html.ios-motion .ios-lbl:not(.is-in) .ios-mcard .ios-chips li {
  opacity: 0;
  transform: translateY(8px) scale(0.9);
}

/* Парящие накладки приподнимаются при появлении. */

html.ios-motion .ios-vpill {
  transition:
    transform 600ms var(--ios-spring) calc(var(--seq, 0ms) + 700ms),
    opacity 400ms ease calc(var(--seq, 0ms) + 700ms);
}

/* ---------- Постоянное фоновое движение ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Зрение Миры и этикетка: касание со вспышкой и полоса сканирования повторяются, пока блок на экране
     (до появления блока не играют вовсе). */

  /* Касание, вспышка и скан проигрываются по три раза и замирают: рядом текст, который читают. */

  .ios-vtap { animation: ios-vtap 5.2s ease-out calc(var(--seq, 0ms) + 500ms) 3; }

  .ios-vflash { animation: ios-vflash 5.2s ease-out calc(var(--seq, 0ms) + 500ms) 3; }

  .ios-scan-bar { animation: ios-scan-sweep 3.4s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--seq, 0ms) + 600ms) 3; }

  html.ios-motion .ios-chat.is-in .ios-online::after { animation: ios-online 2s ease-out calc(var(--d, 0ms) + 400ms) 3; }

  .ios-scan--label .ios-scan-bar { animation-duration: 3.8s; animation-delay: 500ms; }

  .ios-msg-typing i { animation: ios-typing-dot 0.9s ease-in-out infinite; }

  .ios-msg-typing i:nth-child(2) { animation-delay: 0.15s; }

  .ios-msg-typing i:nth-child(3) { animation-delay: 0.3s; }

  html.ios-motion .ios-chat.is-in .ios-msg-typing { animation: ios-typing-life 1.35s ease calc(var(--d, 0ms) + 350ms) both; }

  html.ios-motion .ios-vstep:not(.is-in) .ios-vtap,
html.ios-motion .ios-vstep:not(.is-in) .ios-vflash,
html.ios-motion .ios-vstep:not(.is-in) .ios-scan-bar {
    animation: none;
  }
}

/* 0–1,6 с: палец ложится на кольцо; 2–3 с: веер раскрывается; держим; 8 с: возвращаемся. */

/* Мира «печатает»: три точки, затем карточка проявляется сверху вниз, как текст. */

@keyframes ios-typing-life {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  15%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

@keyframes ios-typing-dot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* Касание лепестка «Фото»: палец ложится, прижимает, отпускает; следом — вспышка камеры. */

@keyframes ios-vtap {
  0%, 6% { opacity: 0; transform: scale(1.4); }
  14% { opacity: 1; transform: scale(1); }
  28% { opacity: 1; transform: scale(0.82); }
  36%, 100% { opacity: 0; transform: scale(0.8); }
}

@keyframes ios-vflash {
  0%, 31% { opacity: 0; }
  34% { opacity: 0.85; }
  46%, 100% { opacity: 0; }
}

/* Полоса проходит фото сверху вниз и гаснет; пауза — и снова. */

@keyframes ios-scan-sweep {
  0% { opacity: 0; transform: translateY(-105%); }
  8% { opacity: 1; }
  56% { opacity: 1; transform: translateY(240%); }
  64%, 100% { opacity: 0; transform: translateY(240%); }
}

/* ---------- Адаптив ---------- */

@media (max-width: 960px) {
  .ios-see-grid,
  .ios-faq-grid,
  .ios-guide-grid,
  .ios-why-card {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Зрение Миры: шаг — строка «сцена | текст». */

  .ios-vsteps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 28px;
  }

  .ios-vstep {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
  }

  .ios-guide-fine {
    text-align: left;
  }

  .ios-faq-head {
    position: static;
  }
}

@media (max-width: 760px) {
  .ios-vfeatures {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ios-vstep {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ios-vstage .ios-phone {
    --w: 222px;
  }

  .ios-vstage {
    padding-inline: 10px;
  }

  /* Сравнение на узком экране: «было» над «стало». */

  .ios-compare-head {
    display: none;
  }

  .ios-compare-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .ios-compare-list li:first-child {
    border-top: 0;
    padding-top: 4px;
  }

  .ios-mcard {
    margin-top: -40px;
    width: min(292px, 90%);
  }

  .ios-why-card {
    padding: 30px 20px;
    border-radius: 28px;
  }

  .ios-see-phones .ios-phone:nth-child(2) {
    margin-top: 32px;
  }

  .ios-health {
    padding: 28px 18px;
    border-radius: 28px;
  }

  .ios-hk-tile,
  .ios-daycard {
    padding-inline: 14px;
  }

  .ios-final {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 32px;
  }
}

@media (max-width: 420px) {
  .ios-faq-list summary {
    font-size: 1.02rem;
  }
}

/* Зрение Миры на планшете: подпись шага во всю ширину, под ней сцена и текст рядом. */

@media (max-width: 960px) {
  .ios-vhead {
    grid-column: 1 / -1;
    margin: 0;
  }

  .ios-vtext {
    margin: 0;
  }

  .ios-lbl-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .ios-vhead {
    margin-bottom: 14px;
  }

  .ios-vtext {
    margin-top: 16px;
  }
}

/* ---------- Новые блоки на узких экранах ---------- */

/* «Мира на связи»: в столбик по ходу дня — «Сегодня», виджет, пуш, чат, прогресс. */

@media (max-width: 900px) {
  .ios-surfaces {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .ios-sf-col {
    display: contents;
  }

  .ios-sf {
    max-width: 440px;
  }

  .ios-sf--today { order: 1; margin-top: 0; }

  .ios-sf--widget { order: 2; }

  .ios-sf--push { order: 3; }

  .ios-sf--chat { order: 4; }

  .ios-sf--progress { order: 5; }

  .ios-sf--progress .ios-phone {
    --w: clamp(200px, 58vw, 250px);
  }

  html.ios-motion .ios-sf-col--left .ios-sf:not(.is-in),
  html.ios-motion .ios-sf-col--mid .ios-sf:not(.is-in),
  html.ios-motion .ios-sf-col--right .ios-sf:not(.is-in) {
    transform: rotateX(8deg) translateY(24px);
  }
}

@media (max-width: 760px) {
  .ios-hk-legend {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .ios-dev-stage {
    padding-inline: 12px;
  }

  .ios-wg--small {
    width: 150px;
  }
}

/* ---------- Сцены «Одно фото — и всё посчитано»: накладки не прячутся под корпусом ----------
   Корпус телефона (.ios-phone::after) лежит на слое 5. Подписи распознавания, фишка шага 1 и
   карточки шагов 2–3 обязаны быть выше него, иначе рамка закрывает их край и заголовок карточки.
   На телефоне накладки не заходят на экран вовсе: сцена — столбик «телефон, под ним карточка»
   с зазором 12 px. Плашка «В дневнике» висит над правым верхним углом карточки, а текст карточки
   начинается ниже неё, поэтому название блюда она не закрывает ни на одном языке. */

.ios-detect,
.ios-vpill,
.ios-vcard {
  z-index: 6;
}

.ios-vrow {
  padding-top: 22px;
}

.ios-vrow-ok {
  top: -12px;
}

@media (max-width: 640px) {
  .ios-vstage .ios-vpill,
  .ios-vstage .ios-vcard {
    margin-top: 12px;
  }

  /* плашка выступает над карточкой на 12 px — зазор до телефона остаётся 12 px */
  .ios-vstage .ios-vrow {
    margin-top: 24px;
  }
}