/*
 * ГЛАВНАЯ СТРАНИЦА САЙТА MomStory — оформление.
 *
 * Сайт собран из четырёх экранов знакомства варианта A (`DEC-163`), которые
 * человек видит при первом запуске приложения:
 *   CJM_EN_hygiene/01 — Block 01. Sign-in and onboarding/10_onboarding_a_science.html
 *   …/10b_onboarding_a_science_sheet.html
 *   …/11_onboarding_a_calm_and_grow.html
 *   …/12_onboarding_a_stories.html
 *   …/13_onboarding_a_sign_in.html
 * и их светлые пары в CJM_EN_hygiene_Light/.
 *
 * Все цвета ниже сняты с этих макетов буква в букву — тёмная тема с тёмных,
 * светлая со светлых. Своих цветов здесь нет: сайт обязан выглядеть так же,
 * как приложение, которое человек поставит через минуту.
 *
 * Тему выбирает система телефона или компьютера; поверх неё посетитель может
 * выбрать сам — переключатель в подвале, как ряд из трёх положений в профиле
 * приложения (`DEC-140`).
 */

/* ═══ Шрифты — лежат рядом, к Google страница не ходит ════════════════════ */

@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('fonts/Nunito_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 500; font-display: swap; src: url('fonts/Nunito_500Medium.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('fonts/Nunito_600SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('fonts/Nunito_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('fonts/Nunito_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/PlayfairDisplay_600SemiBold.ttf') format('truetype'); }
/* Акцентная строка заголовков в макетах — курсив насыщенности 400 */
@font-face { font-family: 'Playfair Display'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/PlayfairDisplay_400Regular_Italic.ttf') format('truetype'); }

/* ═══ Цвета: тёмная тема, с макетов CJM_EN_hygiene ═════════════════════════ */

:root {
  --bg: #0a0714;
  --text: #f5ecd8;
  --muted: rgba(245, 236, 216, .72);
  --hair: rgba(245, 236, 216, .09);
  --soft: rgba(245, 236, 216, .05);
  --tile: rgba(245, 236, 216, .06);
  --violet: #b49aff;          /* надстрочник */
  --violet-link: #c8b0ff;     /* ссылка «See all 6 studies» */
  --gold: #f0c060;            /* акцентная строка, подпись источника */
  --cta-a: #f0c060; --cta-b: #d4a030; --cta-text: #1a0f00;
  --cta-glow: rgba(240, 192, 96, .3);
  --amb-violet: rgba(155, 127, 245, .18);
  --amb-gold: rgba(240, 192, 96, .15);
  --own-a: #2a1e0f; --own-b: #3a2b10;
  --own-line: rgba(240, 192, 96, .22); --own-glow: rgba(240, 192, 96, .12);
  --chip: rgba(240, 192, 96, .1); --chip-line: rgba(240, 192, 96, .22);
  --wave-a: #b49aff; --wave-b: #c8b0ff; --wave-gold: #f0c060; --wave-core: #f5ecd8;
  --nav: rgba(10, 7, 20, .78);
  --step-off: rgba(245, 236, 216, .15); --step-now: #f0c060;
  --star: #f0c060;
  --quote-rule: rgba(240, 192, 96, .5);
  --ico-a: #2a1f42; --ico-b: #3a2860; --ico-stroke: #c8b0ff;
  /* разделы каталога — экран 11 */
  --c-fears: #ff8a8a;      --g-fears: rgba(255, 107, 107, .5);
  --c-emotions: #f0c060;   --g-emotions: rgba(240, 192, 96, .5);
  --c-situations: #80c8ff; --g-situations: rgba(128, 200, 255, .5);
  --c-habits: #80d860;     --g-habits: rgba(128, 216, 96, .5);
  --c-character: #b49aff;  --g-character: rgba(180, 154, 255, .5);
  --c-values: #50dbb4;     --g-values: rgba(80, 219, 180, .5);
  color-scheme: dark;
}

/* ═══ Светлая тема, с макетов CJM_EN_hygiene_Light ═════════════════════════ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #fffaf0;
    --text: #2a1f3a;
    --muted: rgba(42, 31, 58, .72);
    --hair: rgba(42, 31, 58, .09);
    --soft: rgba(42, 31, 58, .05);
    --tile: rgba(42, 31, 58, .06);
    --violet: #5932f3;
    --violet-link: #5932f3;
    --gold: #7f5412;
    --cta-a: #9c640c; --cta-b: #8a5809; --cta-text: #ffffff;
    --cta-glow: rgba(200, 133, 28, .3);
    --amb-violet: rgba(106, 72, 224, .18);
    --amb-gold: rgba(200, 133, 28, .15);
    --own-a: #efebe7; --own-b: #fce4a8;
    --own-line: rgba(200, 133, 28, .22); --own-glow: rgba(200, 133, 28, .12);
    --chip: rgba(200, 133, 28, .1); --chip-line: rgba(200, 133, 28, .22);
    --wave-a: #7a5af5; --wave-b: #a088f0; --wave-gold: #c8851c; --wave-core: #fffaf0;
    --nav: rgba(255, 250, 240, .82);
  --step-off: rgba(42, 31, 58, .15); --step-now: #c8851c;
  --star: #c8851c;
  --quote-rule: rgba(200, 133, 28, .5);
  --ico-a: #d6d2e0; --ico-b: #d5d1e0; --ico-stroke: #5932f3;
    --c-fears: #b22525;      --g-fears: rgba(214, 56, 56, .5);
    --c-emotions: #7f5412;   --g-emotions: rgba(200, 133, 28, .5);
    --c-situations: #186193; --g-situations: rgba(24, 97, 147, .5);
    --c-habits: #2f6a1c;     --g-habits: rgba(61, 138, 36, .5);
    --c-character: #5932f3;  --g-character: rgba(122, 90, 245, .5);
    --c-values: #136859;     --g-values: rgba(19, 104, 89, .5);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #fffaf0;
  --text: #2a1f3a;
  --muted: rgba(42, 31, 58, .72);
  --hair: rgba(42, 31, 58, .09);
  --soft: rgba(42, 31, 58, .05);
  --tile: rgba(42, 31, 58, .06);
  --violet: #5932f3;
  --violet-link: #5932f3;
  --gold: #7f5412;
  --cta-a: #9c640c; --cta-b: #8a5809; --cta-text: #ffffff;
  --cta-glow: rgba(200, 133, 28, .3);
  --amb-violet: rgba(106, 72, 224, .18);
  --amb-gold: rgba(200, 133, 28, .15);
  --own-a: #efebe7; --own-b: #fce4a8;
  --own-line: rgba(200, 133, 28, .22); --own-glow: rgba(200, 133, 28, .12);
  --chip: rgba(200, 133, 28, .1); --chip-line: rgba(200, 133, 28, .22);
  --wave-a: #7a5af5; --wave-b: #a088f0; --wave-gold: #c8851c; --wave-core: #fffaf0;
  --nav: rgba(255, 250, 240, .82);
  --step-off: rgba(42, 31, 58, .15); --step-now: #c8851c;
  --star: #c8851c;
  --quote-rule: rgba(200, 133, 28, .5);
  --ico-a: #d6d2e0; --ico-b: #d5d1e0; --ico-stroke: #5932f3;
  --c-fears: #b22525;      --g-fears: rgba(214, 56, 56, .5);
  --c-emotions: #7f5412;   --g-emotions: rgba(200, 133, 28, .5);
  --c-situations: #186193; --g-situations: rgba(24, 97, 147, .5);
  --c-habits: #2f6a1c;     --g-habits: rgba(61, 138, 36, .5);
  --c-character: #5932f3;  --g-character: rgba(122, 90, 245, .5);
  --c-values: #136859;     --g-values: rgba(19, 104, 89, .5);
  color-scheme: light;
}

/* ═══ Основа ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 96px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--bg); }

.wrap { width: min(100% - 48px, 1160px); margin-inline: auto; }

/* Слои свечения — те же, что `.amb` в макетах */
.amb { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
section, header, footer { position: relative; }
.layer { position: relative; z-index: 1; }

/* ═══ Типографика — пропорции экранов знакомства, увеличенные под сайт ═══ */

.eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; line-height: 1.4; color: var(--violet);
}
.h1, .h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600; color: var(--text); letter-spacing: -.01em;
}
.h1 { font-size: clamp(42px, 6.6vw, 92px); line-height: 1.06; margin-top: 14px; }
.h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.1; margin-top: 12px; }
.h1 em, .h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
.h2 em { display: block; }
.src {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; line-height: 1.4; color: var(--gold);
}
.h1 + .src, .h2 + .src { margin-top: 16px; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--muted); }
.lead b, .lead strong { color: var(--text); font-weight: 700; }

/* Полоски шагов — как в шапке экранов знакомства: текущий шаг золотой */
.steps { display: flex; gap: 6px; align-items: center; margin-bottom: 18px; }
.steps i { display: block; width: 16px; height: 4px; border-radius: 9999px; background: var(--step-off); }
.steps i.done { background: color-mix(in srgb, var(--text) 38%, transparent); }
.steps i.now { width: 28px; background: var(--step-now); }
/* Полоски по центру — финал главной. Классом, а не атрибутом style: политика
   безопасности сайта (style-src 'self') встроенные стили не применяет. */
.steps--center { justify-content: center; }

/* ═══ Шапка ════════════════════════════════════════════════════════════════ */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hair);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.mark { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 24px; letter-spacing: -.01em; min-height: 48px; display: inline-flex; align-items: center; }
.mark em { font-style: italic; font-weight: 400; color: var(--gold); }
.nav__links { display: flex; gap: 28px; }
/* Пункты не переносятся (INC-157): «Creator program» не разломится на две строки,
   если браузер нарисует шрифт шире Chrome или классическая полоса прокрутки отнимет
   15–17 точек. Худшее — ряд на окне чуть шире 1000 зайдёт на несколько точек в
   боковое поле шапки (24). */
.nav__links a { font-size: 15px; font-weight: 700; color: var(--muted); min-height: 48px; display: inline-flex; align-items: center; transition: color .2s; white-space: nowrap; }
.nav__links a:hover { color: var(--text); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 14px;
  font-size: 15px; font-weight: 800; color: var(--text);
  background: var(--tile); border: 1px solid var(--hair);
  transition: border-color .2s, transform .2s;
}
.pill:hover { border-color: var(--gold); transform: translateY(-1px); }
/* Подпись «Get the app» не переносится ни на одной ширине. На телефоне Safari рисует
   шрифт чуть шире Chrome, а запас в ряду на 352 меньше точки; на компьютере ряд из
   шести пунктов у окна чуть шире 1000 точек заполнен вплотную (INC-157). Худшее, что
   случится, — ряд выйдет на точку-другую в боковое поле шапки (24), а не в две строки. */
.nav .pill { white-space: nowrap; }
/* Кнопка-меню (INC-147): на компьютере её нет, пункты стоят в шапке. На узких
   экранах её показывает правило @media (max-width: 1000px) ниже; оно стоит
   позже в файле и той же силы, поэтому перебивает это скрытие. */
.nav__menu { display: none; }

/* Официальный значок App Store: файл Apple ставится как есть, меняется только
   высота. Белый — на тёмном фоне, чёрный — на светлом. */
.badge { display: inline-flex; align-items: center; min-height: 54px; transition: transform .2s; }
.badge:hover { transform: translateY(-2px); }
.badge img { height: 54px; width: auto; }
.badge .on-light { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .badge .on-dark { display: none; } :root:not([data-theme="dark"]) .badge .on-light { display: block; } }
:root[data-theme="light"] .badge .on-dark { display: none; }
:root[data-theme="light"] .badge .on-light { display: block; }

.free { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--muted); }
.free .star { color: var(--star); flex: none; }
.free strong { color: var(--gold); font-weight: 800; }

/* ═══ Волна голоса — движок взят из макетов без изменений ════════════════ */

.wave { position: relative; width: 100%; }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ═══ 1. Наука — экран 10 ══════════════════════════════════════════════════ */

.hero { padding: clamp(56px, 9vw, 120px) 0 0; }
.hero .amb {
  background:
    radial-gradient(90% 60% at 45% 58%, var(--amb-violet) 0%, transparent 62%),
    radial-gradient(50% 40% at 94% 58%, var(--amb-gold) 0%, transparent 60%);
}
.hero__head { max-width: 980px; }
.hero__wave { height: clamp(150px, 20vw, 280px); margin: clamp(24px, 4vw, 48px) 0; }
.hero__row {
  display: grid; gap: clamp(32px, 5vw, 80px);
  grid-template-columns: 1.1fr .9fr; align-items: start;
  padding-bottom: clamp(64px, 9vw, 120px);
}
.bridge { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.5; color: var(--text); }
.bridge em { font-style: normal; font-weight: 800; color: var(--gold); }
.hero__actions { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; align-items: flex-start; }

.ledger { border-top: 1px solid var(--hair); padding-top: 18px; }
.ledger p { font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 8px; }
.ledger p b { color: var(--text); font-weight: 700; }
.more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px;
  font-size: 16px; font-weight: 800; color: var(--violet-link);
}
.more svg { transition: transform .2s; }
.more:hover svg { transform: translateY(2px); }

/* ═══ 2. Шесть исследований — шторка 10b ═══════════════════════════════════ */

.studies { padding: clamp(72px, 10vw, 136px) 0; border-top: 1px solid var(--hair); }
.studies .amb { background: radial-gradient(60% 50% at 8% 20%, var(--amb-violet) 0%, transparent 60%); }
.studies__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.note { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.grid6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.study {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 20px;
  background: var(--soft); border: 1px solid var(--hair);
  transition: border-color .25s, transform .25s;
}
.study:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); transform: translateY(-2px); }
.study .src { font-size: 12px; }
.study h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--text); }
.study p { font-size: 16px; line-height: 1.6; color: var(--muted); flex: 1; }
.study a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: 4px 0 -12px;
  font-size: 15px; font-weight: 800; color: var(--violet-link);
}
.study a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 3. Шесть видов сказок — экран 11 ════════════════════════════════════ */

.calm { padding: clamp(72px, 10vw, 136px) 0; border-top: 1px solid var(--hair); }
.calm .amb {
  background:
    radial-gradient(60% 40% at 0% 40%, var(--amb-gold) 0%, transparent 60%),
    radial-gradient(60% 40% at 0% 78%, var(--amb-violet) 0%, transparent 62%);
}
.calm__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; margin-top: 48px; }

.cats { position: relative; padding-left: 36px; list-style: none; }
.cats::before {
  content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--wave-gold) 0%, var(--wave-b) 55%, var(--wave-a) 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--wave-a) 50%, transparent);
}
.grp {
  font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); padding: 18px 0 8px;
}
.grp:first-child { padding-top: 0; }
.grp--grow { color: var(--violet); }
.cat { position: relative; display: grid; grid-template-columns: 140px 1fr; align-items: center; min-height: 48px; }
.cat b { font-size: 19px; font-weight: 800; color: var(--c); }
.cat span { font-size: 17px; color: var(--muted); }
.dot {
  position: absolute; left: -32px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 9999px; background: var(--c);
  box-shadow: 0 0 0 4px var(--bg);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s cubic-bezier(.4, 0, .2, 1);
}
.dot.lit { transform: scale(1.4); box-shadow: 0 0 0 4px var(--bg), 0 0 16px var(--g); }
.c-fears      { --c: var(--c-fears);      --g: var(--g-fears); }
.c-emotions   { --c: var(--c-emotions);   --g: var(--g-emotions); }
.c-situations { --c: var(--c-situations); --g: var(--g-situations); }
.c-habits     { --c: var(--c-habits);     --g: var(--g-habits); }
.c-character  { --c: var(--c-character);  --g: var(--g-character); }
.c-values     { --c: var(--c-values);     --g: var(--g-values); }

.quote { border-left: 2px solid var(--quote-rule); padding: 6px 0 6px 28px; }
.quote blockquote {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1.3; color: var(--text); margin-top: 14px;
}

/* ═══ 4. Как это работает — ролик о приложении (INC-146) ═══════════════════ */

/* Перенос макета варианта 1 (docs/design_proposals/2026-10-24_site-how-it-works/
   в репозитории приложения) правило в правило. Своих цветов нет; единственный
   цвет числом — чёрный фон под видео, пока кадр не загрузился. */
.how { position: relative; padding: clamp(72px, 10vw, 136px) 0; border-top: 1px solid var(--hair); }
.how .amb {
  background:
    radial-gradient(60% 50% at 78% 70%, var(--amb-gold) 0%, transparent 62%),
    radial-gradient(60% 45% at 10% 20%, var(--amb-violet) 0%, transparent 60%);
}
.how__row { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.how__steps { list-style: none; margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.how__steps li {
  display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 20px;
  background: var(--soft); border: 1px solid var(--hair);
  font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--text);
}
.how__num {
  width: 44px; height: 44px; border-radius: 9999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: var(--gold);
  background: var(--chip); border: 1px solid var(--chip-line);
}
.film { justify-self: center; width: min(100%, 360px); }
.film__frame {
  position: relative; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden;
  background: #000; border: 1px solid var(--own-line); box-shadow: 0 8px 28px var(--own-glow);
}
.film__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__play {
  position: absolute; left: 0; right: 0; bottom: 28px; margin: 0 auto; width: 80px; height: 80px; border-radius: 9999px; border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, var(--cta-a) 0%, var(--cta-b) 100%);
  color: var(--cta-text); box-shadow: 0 6px 20px var(--cta-glow);
}
.film.on .film__play { display: none; }
.film__note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }

/* Карточка и надпись прежнего раздела «Stories» остаются: ими собраны другие
   страницы — .card.lib и .card h3 у карточек связи на странице поддержки,
   .tag у надписей над ценами на странице программы для блогеров. */
.card { border-radius: 24px; padding: 28px; }
.lib { background: var(--soft); border: 1px solid var(--hair); }
.card h3 { font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--text); }
.tag { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }

/* ═══ 5. Цены ══════════════════════════════════════════════════════════════ */

.pricing { padding: clamp(72px, 10vw, 136px) 0; border-top: 1px solid var(--hair); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.plan { border-radius: 24px; padding: 32px; background: var(--soft); border: 1px solid var(--hair); }
.plan--gold { background: linear-gradient(135deg, var(--own-a) 0%, var(--own-b) 100%); border-color: var(--own-line); box-shadow: 0 8px 28px var(--own-glow); }
.plan h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 28px; }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.price b { font-size: 44px; font-weight: 800; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.price span { font-size: 17px; color: var(--muted); }
.plan--gold .price b { color: var(--gold); }
.per-year { font-size: 16px; color: var(--muted); margin-top: 8px; }
.per-year b { color: var(--text); font-weight: 800; }
.plan ul { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--hair); padding-top: 20px; }
.plan li { display: flex; gap: 12px; font-size: 17px; line-height: 1.5; color: var(--text); }
.plan li::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: .6em; border-radius: 50%; background: var(--gold); }

/* ═══ 6. Ваш голос — экран 13 ══════════════════════════════════════════════ */

.finale { padding: 0 0 clamp(80px, 11vw, 140px); border-top: 1px solid var(--hair); text-align: center; }
.finale .amb { background: radial-gradient(70% 60% at 50% 30%, var(--amb-violet) 0%, transparent 60%), radial-gradient(40% 40% at 88% 22%, var(--amb-gold) 0%, transparent 60%); }
.finale__wave { height: clamp(120px, 16vw, 220px); }
.finale .h2 em { display: block; }
.finale .lead { max-width: 34ch; margin: 20px auto 0; }
.finale__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 36px; }
.legal { font-size: 14px; color: var(--muted); }

/* ═══ Подвал ═══════════════════════════════════════════════════════════════ */

.foot { border-top: 1px solid var(--hair); padding: 40px 0 48px; }
.foot__in { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot__links a { font-size: 15px; font-weight: 700; color: var(--muted); min-height: 48px; display: inline-flex; align-items: center; }
.foot__links a:hover { color: var(--text); }
.copy { font-size: 14px; color: var(--muted); margin-top: 6px; }

.theme { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); border: 1px solid var(--hair); }
.theme button {
  min-height: 48px; min-width: 48px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
  font: 700 14px 'Nunito', sans-serif; color: var(--muted); background: transparent;
}
.theme button[aria-pressed="true"] { background: var(--tile); color: var(--text); box-shadow: 0 0 0 1px var(--hair); }

/* ═══ Появление при прокрутке — `.rv` из макетов ══════════════════════════ */

/* Прячется только при работающем скрипте. Если home.js не отметился за 2,5 с,
   скрипт /assets/boot.js из <head> снимает класс js — и всё видно сразу. */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ═══ Узкие экраны ═════════════════════════════════════════════════════════ */

/* Меню сворачивается в кнопку раньше, чем разделы уходят в один столбец (INC-157):
   шести пунктам в ряд нужно окно от 987 точек (логотип 109, пункты с зазорами 652,
   «Get the app» 130, два зазора ряда по 24 и боковые поля 48). На окнах 961–1000
   страница идёт в две колонки, свёрнута только шапка. Это правило стоит раньше
   правила 351: иначе его зазор 8px перебил бы там 6px. */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  /* Меню на телефоне и в узком окне до 1000 точек (INC-147, INC-157): кнопка справа от «Get the app», по нажатию у шапки
     появляется класс open (home.js), и список пунктов раскрывается под шапкой
     во всю ширину. Список остаётся скрытым правилом выше, пока класса нет; у
     .nav.open .nav__links вес выше (три класса против одного), порядок не важен.
     Шапка .nav — sticky, поэтому absolute-список отсчитывается от неё. */
  .nav__in { gap: 8px; }
  .mark { margin-right: auto; }
  .nav__menu {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 48px; border-radius: 14px; cursor: pointer;
    color: var(--text); background: var(--tile); border: 1px solid var(--hair);
  }
  .nav__menu .i-close { display: none; }
  .nav.open .nav__menu .i-open { display: none; }
  .nav.open .nav__menu .i-close { display: block; }
  .nav.open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 4px 24px 12px; background: var(--bg);
    border-bottom: 1px solid var(--hair);
    /* Низкий экран (телефон на боку, крупный шрифт): список не длиннее видимой
       части страницы и прокручивается внутри себя, иначе последний пункт не достать.
       100% здесь — высота шапки (у absolute-блока проценты считаются от
       ближайшего позиционированного предка), поэтому число шапки не зашито.
       Строка с dvh — для iPhone, где 100vh выше видимой области. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto; overscroll-behavior: contain;
    /* Tab подводит пункт к краю списка вплотную, и рамка фокуса крайнего пункта
       оставалась за краем (замер на 667×320). Поле прокрутки держит пункт на 4 точки
       от края: рамка выступает на 3. */
    scroll-padding-block: 4px;
  }
  /* Перенос строки возвращён (на компьютере пункты его запрещают): пункт здесь во
     всю ширину, и при очень крупном шрифте длинная подпись уходит на вторую строку,
     а не за край экрана. */
  .nav.open .nav__links a {
    font-size: 17px; color: var(--text); min-height: 56px; white-space: normal;
    border-bottom: 1px solid var(--hair);
  }
  .nav.open .nav__links a:last-child { border-bottom: 0; }
  .nav.open .nav__links a[aria-current="page"] { color: var(--gold); }
  /* Список прокручивается (overflow-y: auto), а значит режет всё, что вылезло за его
     край, и рамку фокуса тоже. Общая рамка (:focus-visible выше: 3px, отступ 3px)
     выступает на 6 точек, а верхний отступ списка — 4: у первого пункта верх рамки
     срезался. Здесь рамка вплотную к пункту и выступает на 3 точки, они помещаются
     в любой отступ списка (наименьший — 4). Внутрь пункта рамку нельзя: у него нет
     боковых отступов, и она села бы на текст. */
  .nav.open .nav__links a:focus-visible { outline-offset: 0px; }
}
@media (max-width: 960px) {
  .hero__row, .studies__head, .calm__row, .how__row, .plans { grid-template-columns: 1fr; }
  .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Самые узкие телефоны (INC-147). Ряд «логотип — Get the app — кнопка-меню» требует
   351,2 точки: логотип 109, кнопка 48, «Get the app» 130 и два зазора по 8. Уже
   этого он не помещался бы, поэтому здесь у «Get the app» меньше боковых отступов
   и уже зазоры в ряду. Перенос подписи на другую строку запрещён и общим правилом
   выше (`.nav .pill { white-space: nowrap }` в общих правилах шапки); здесь
   оно повторено рядом с отступами, чтобы правило читалось целиком. Порог 351, а не
   350: ровно на 351 ряд ещё не помещается (замер ревью). Замер на 320: в ряду
   остаётся запас около 3 точек. */
@media (max-width: 351px) {
  .nav__in { gap: 6px; }
  .nav .pill { padding: 0 7px; white-space: nowrap; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid6 { grid-template-columns: 1fr; }
  .cat { grid-template-columns: 116px 1fr; }
  .cat b { font-size: 17px; }
  .cat span { font-size: 16px; }
  .how__steps li { font-size: 17px; padding: 16px 18px; }
  .card, .plan { padding: 22px; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .dot { transition: none; }
}