/* Стили русской витрины modoos.pro, шестой круг (08.09.2026): оформление
 * переложено по образцу workspace.google.com (решения руководителя в
 * tasks/витрина-шестой-круг/README.md, замеры образца в разборе-образца.md).
 *
 * Единственный файл стилей сайта: все восемь языков и служебные страницы
 * (с 09.09.2026, когда круг переводов снял прежний styles.css).
 *
 * Три правила образца, которые дают его вид, и их здесь нельзя нарушать:
 *   1. Ни одной тени на содержимом. Рельеф даёт волосяная рамка #DADCE0.
 *      Тень на странице одна, у липкой шапки.
 *   2. Два веса шрифта: 400 текст, 500 заголовки; 700 только у H1.
 *   3. Ритм из трёх чисел: 60px между секциями, 36px под заголовком секции,
 *      80px перед тарифами и перед финалом.
 */

/* ── Шрифты: свои файлы, с Google на лету ничего не грузим ───────────── */
/* Взяты из ответа css2 открытого каталога Google Fonts (подмножества latin, latin-ext,
   cyrillic, cyrillic-ext), лицензия OFL. Файл переменный по весу, поэтому на
   весь диапазон 400-700 нужен один файл на подмножество, а не три.
   AICODE-NOTE: шрифт один на всех языках, пары «Sans + Sans Flex» не будет
   (решение руководителя 09.09.2026). У Google Sans Flex нет кириллицы, а когда
   русские слова набраны одним шрифтом, а Claude и Starter в той же строке
   другим, разница видна глазом: у Flex ось оптического размера делает мелкий
   кегль шире. К паре в круге переводов не возвращаться. */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/google-sans-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/google-sans-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/google-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/google-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ── Токены ─────────────────────────────────────────────────────────── */
:root {
  /* Палитра образца целиком (решение руководителя 08.09.2026). */
  --white: #FFFFFF;
  --ink: #202124;
  --ink-soft: #5F6368;
  --line: #DADCE0;
  --paper: #F8F9FA;       /* светлая полоса и поле под картинкой */
  --plans-wash: #F0F4FA;  /* подложка блока тарифов */
  --blue-wash: #E8F0FE;   /* светлая синяя подложка */
  --blue: #1A73E8;
  --blue-hover: #1765CC;
  --footer-bg: #FAFAFA;
  --footer-ink: #616161;
  --deep: #101A3D;        /* погасший экран телефона в сцене */
  --live: #1E9E74;        /* только состояние */
  --claude: #D97757;      /* только про Claude */

  /* Форма: одного --radius больше нет, у образца три семейства скруглений. */
  --r-pill: 100px;
  --r-card: 20px;
  --r-wrap: 36px;
  --r-art: 18px;          /* поле под картинку внутри карточки */

  --wrap: 1160px;
  --sans: "Google Sans", Inter, system-ui, Arial, sans-serif;
  --display: var(--sans);
}

/* Корейская страница целиком на системном шрифте (владелец, 09.09.2026): у Google Sans
   нет хангыля, и смешение двух шрифтов в одной строке (Claude рядом с 앱과 함께) видно
   глазом. Системный стек даёт латиницу и хангыль из одной семьи шрифтов устройства.
   Разрядка от кегля для хангыля не нужна, она обнуляется. */
html:lang(ko) {
  --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
html:lang(ko) body, html:lang(ko) h1, html:lang(ko) h2, html:lang(ko) h3 { letter-spacing: 0; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/24px var(--sans);
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* Узкая колонка служебных страниц: правовой текст и форма почты читаются строкой
   в 760px, а не во всю ширину контейнера витрины. */
.wrap-narrow { max-width: 760px; }

/* ── Шрифтовая шкала образца ────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; }
h1 { font-size: 54px; line-height: 64px; font-weight: 700; letter-spacing: -0.5px; }
h2 { font-size: 40px; line-height: 50px; letter-spacing: -0.5px; }
h3 { font-size: 24px; line-height: 32px; letter-spacing: -0.25px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* Слово с дефисом, которое нельзя рвать переносом: «ИИ-агента» в заголовке и
   в подвале иначе распадается на «ИИ-» и «агента». */
.nb { white-space: nowrap; }

/* Живая точка: только при слове состояния. */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--live); margin-right: 8px; vertical-align: 1px;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Кнопки: пилюли образца ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: var(--white);
  border: 1px solid var(--blue); border-radius: var(--r-pill);
  font: 500 14px/22px var(--display); letter-spacing: 0.2px;
  padding: 6px 16px; min-height: 36px; text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn-big { font-size: 16px; line-height: 24px; padding: 11px 24px; min-height: 48px; }
/* Второстепенная: белая, синим текстом, волосяная рамка. */
.btn-ghost { background: var(--white); color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { background: var(--blue-wash); border-color: var(--line); }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 3px;
}

/* ── Шапка: один ряд 64px, липкая, единственная тень на странице ─────── */
.site-header {
  position: sticky; top: 0; z-index: 1020; background: var(--white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
/* Знак марки набран 700: это логотип, а не текст, и правило двух весов
   страницы на него не распространяется (решение руководителя 09.09.2026). */
.brand {
  font: 700 22px/28px var(--display); letter-spacing: -0.25px; text-decoration: none;
}
.brand-dot { color: var(--blue); }
.head-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* Вход второстепенный по виду: белая пилюля с волосяной рамкой. Синий на
   странице один и принадлежит «Начать». */
.head-nav a.head-signin {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px;
  font: 500 14px/22px var(--display); letter-spacing: 0.2px; color: var(--ink);
  text-decoration: none; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: background 0.15s ease;
}
.head-nav a.head-signin:hover { background: var(--paper); }
/* На служебных страницах (приём почты, оферта, политика, 404) шапка проще: входа
   в ней нет, потому что человек попал туда с главной. Одета она так же, тем же
   рядом .head-nav, поэтому отдельных правил ей не нужно. */

.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px;
  font: 500 14px/22px var(--display); letter-spacing: 0.2px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover { background: var(--paper); }
.lang-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; min-width: 176px;
}
.lang-menu-list a {
  display: block; padding: 8px 12px; font-size: 14px; line-height: 22px;
  text-decoration: none; border-radius: 8px;
}
.lang-menu-list a:hover { background: var(--paper); }
.lang-menu-list a.active { color: var(--blue); font-weight: 500; }

/* ── Ритм страницы: 60 между секциями, 80 перед новой главой ────────── */
main > section { margin-top: 60px; }
main > section:first-child { margin-top: 0; }
main > section.plans, main > section.close { margin-top: 80px; }
main > section:last-child { margin-bottom: 80px; }

.sec-head { margin-bottom: 36px; }
.sec-head p {
  color: var(--ink-soft); font-size: 18px; line-height: 28px; margin: 16px 0 0;
}
/* Заголовок-передышка образца стоит по центру и не шире шести колонок. */
.sec-head-center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.sec-head-center p { margin-left: auto; margin-right: auto; max-width: 640px; }

/* ── Блок 1, первый экран: половина на половину ─────────────────────── */
/* Дымка образца: два огромных скруглённых пятна за краями экрана, залитых
   переходом четырёх цветов и размытых. Никакого градиента на фоне секции нет,
   поэтому шва между секциями не бывает: страница белая. */
.hero { position: relative; z-index: 0; padding: 64px 0 0; }
/* Пятна вынесены далеко за края экрана: внутрь попадает только их размытая
   кромка, поэтому середина первого экрана остаётся белой, а по углам лежит
   мягкое свечение. Пятно целиком в поле зрения превращает страницу в синюю
   заливку и забирает внимание у заголовка. */
.hero::before, .hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 46%; height: 95%; border-radius: 50%;
  filter: blur(clamp(75px, 10vw, 150px));
}
.hero::before {
  left: -46%; top: -75%; opacity: 0.30;
  background: linear-gradient(-61deg, #217BFE 0%, #078EFB 34%, #AC87EB 67%, #EE4D5D 100%);
}
.hero::after {
  right: -46%; bottom: -68%; opacity: 0.40;
  background: linear-gradient(15deg, #EE4D5D 0%, #AC87EB 33%, #078EFB 66%, #217BFE 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center;
}
/* Текст в пять колонок из двенадцати, как у образца. */
.hero-copy { grid-column: 1 / span 5; }
.hero h1 { margin-bottom: 16px; }
.hero .sub { font-size: 18px; line-height: 28px; color: var(--ink-soft); margin: 0 0 32px; }
.cta-note { display: block; margin-top: 16px; font-size: 14px; line-height: 22px; color: var(--ink-soft); }

/* Сцена: телефон впереди крупно, окно рабочего места позади. Окно уходит за
   правый край экрана, как лента карточек у образца; лишнее срезает
   overflow-x: clip у body. */
.hero-stage { grid-column: 6 / span 7; position: relative; padding: 40px 0 60px; }
/* Окно сдвинуто вправо ровно настолько, чтобы телефон закрывал только его
   левый край (список проектов), а середина с разговором осталась видна. */
/* Масштаб окна выбран по читаемости: 160% колонки дают на экране около 0,85
   от размеров рисунка, и слова в нём не мельче 11px. Правый край при этом
   уходит за экран, как лента карточек у образца. */
.ui-window { display: block; width: 160%; max-width: none; margin-left: 4%; }
.phone-demo {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 44%; max-width: 280px; display: block;
}

/* ── Демо телефона: одна большая анимация ───────────────────────────── */
/* Времена и раскладка кадров перенесены из прежних стилей без изменений. */
.mv-a { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: ease; }

#mv-idle { animation-name: mv-idlek; }
@keyframes mv-idlek { 0%, 12% { opacity: 1; } 15%, 100% { opacity: 0; } }

#mv-type { animation-name: mv-typek; }
/* Окно набора открывается на всю длину фразы. Прежние 128px были уже строки: в
   поле оставалось «Собери из выгрузки» без «отчёт», а первая буква срезалась
   левым краем окна (дефект снят снимком 09.09.2026, жил и на русской странице).
   Правый край окна (44 + 230 = 274) остаётся внутри поля ввода, которое кончается
   на 310, поэтому длинная фраза перевода упрётся в поле, а не в невидимую границу. */
@keyframes mv-typek { 0%, 8% { width: 0; } 20% { width: 230px; } 30%, 100% { width: 230px; } }

#mv-caret { animation-name: mv-caretk; animation-timing-function: step-end; }
@keyframes mv-caretk { 0%, 4% { opacity: 1; } 6% { opacity: 0; } 8% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }

#mv-card { opacity: 0; animation-name: mv-cardk; }
@keyframes mv-cardk { 0%, 26% { opacity: 0; transform: translateY(50px); } 31%, 44% { opacity: 1; transform: translateY(42px); } 47%, 100% { opacity: 0; transform: translateY(42px); } }

#mv-bar { animation-name: mv-bark; }
@keyframes mv-bark { 0%, 30% { width: 0; } 44% { width: 150px; } 100% { width: 150px; } }

#mv-s1 { animation-name: mv-s1k; animation-timing-function: step-end; }
@keyframes mv-s1k { 0%, 33% { opacity: 0; } 34%, 100% { opacity: 1; } }
#mv-s2 { animation-name: mv-s2k; animation-timing-function: step-end; }
@keyframes mv-s2k { 0%, 38% { opacity: 0; } 39%, 100% { opacity: 1; } }

#mv-lock { opacity: 0; animation-name: mv-lockk; }
@keyframes mv-lockk { 0%, 46% { opacity: 0; } 50%, 97% { opacity: 1; } 100% { opacity: 0; } }

#mv-push { opacity: 0; animation-name: mv-pushk; }
@keyframes mv-pushk { 0%, 68% { opacity: 0; transform: translateY(-10px); } 73%, 97% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }

#mv-wa { animation-name: mv-wak; animation-timing-function: step-end; }
@keyframes mv-wak { 0%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
#mv-wb { opacity: 0; animation-name: mv-wbk; animation-timing-function: step-end; }
@keyframes mv-wbk { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }

/* ── Карточка образца: 20px, волосяная рамка, ни одной тени ─────────── */
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 24px; display: flex; flex-direction: column;
}
/* Поле под картинку внутри карточки: светлая подложка со скруглением 18px. */
.card-art {
  width: 100%; height: 200px; object-fit: contain; padding: 20px; margin-bottom: 20px;
  background: var(--paper); border-radius: var(--r-art);
}

/* ── Блок 2, четыре довода ──────────────────────────────────────────── */
.anchor-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.anchor-body h3 { margin-bottom: 8px; }
.anchor-body p { margin: 0; color: var(--ink-soft); }
/* Четвёртая плитка называет платформы словами, а значки берёт из спрайта, и
   стоит в таком же светлом поле, как рисунки соседей. */
.anchor-platforms {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 20px; height: 200px;
}
.platform {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 14px; line-height: 22px; letter-spacing: 0.2px; color: var(--ink-soft);
}
.platform svg {
  width: 28px; height: 28px; box-sizing: content-box; padding: 14px;
  color: var(--blue); background: var(--white);
  border: 1px solid var(--line); border-radius: 50%;
}

/* Вводный абзац под заголовком в двухколоночных блоках. */
.lead { color: var(--ink-soft); font-size: 18px; line-height: 28px; margin: 0 0 24px; }

/* ── Блок 3, что поручить: две карточки со списком строк ────────────── */
.jobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.job-col h3 { margin-bottom: 16px; }
.job-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.job-col li { display: flex; align-items: center; gap: 12px; }
/* Значок из спрайта media/icons.svg в светлой синей плашке: сам штрих тонкий и
   без плашки терялся бы рядом со строкой. */
/* Размер задан по внешнему краю плашки: набивка внутри, потому что box-sizing
   на странице border-box и иначе значок съедается набивкой. */
.ico {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: var(--r-pill);
  background: var(--blue-wash); color: var(--blue);
}

/* ── Блок 4, вечер работы: три карточки-сцены ───────────────────────── */
.scenes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scene img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%; padding: 0;
  height: auto; margin-bottom: 20px; border-radius: var(--r-art);
}
.scene-chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 14px; line-height: 22px; letter-spacing: 0.2px; color: var(--ink-soft);
  background: var(--paper); border-radius: var(--r-pill); padding: 4px 14px; margin-bottom: 12px;
}
.scene h3 { font-size: 28px; line-height: 36px; margin-bottom: 8px; }
.scene p { margin: 0; color: var(--ink-soft); }

/* ── Блок 5, место, которое помнит: текст и рисунок ─────────────────── */
.memory-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center;
}
.memory-copy { grid-column: 1 / span 4; }
.memory-copy h2 { margin-bottom: 24px; }
.memory-art { grid-column: 6 / span 7; margin: 0; }
.memory-art img { width: 100%; }
.memory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.memory-list strong { display: block; font-weight: 500; }
.memory-list span { color: var(--ink-soft); }
.memory-note { margin: 24px 0 0; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; color: var(--ink-soft); }

/* ── Блок 6, экономика подписки: три колонки без рамок и фона ───────── */
.econ-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 82px; text-align: center;
}
.econ-list strong {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: 24px; line-height: 32px; letter-spacing: -0.25px; margin-bottom: 8px;
}
.econ-list span { color: var(--ink-soft); }

/* ── Блок 7, одна подписка: две карточки ────────────────────────────── */
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.usage-card h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.5px; margin-bottom: 8px; }
.usage-card p { margin: 0; color: var(--ink-soft); }

/* ── Блок 8, доверие: три факта и щит ───────────────────────────────── */
.safe-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center;
}
.safe-body { grid-column: 1 / span 6; min-width: 0; }
.safe-body h2 { margin-bottom: 24px; }
.safe-art { grid-column: 8 / span 5; width: 100%; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.facts strong { display: block; font-weight: 500; }
/* Слово Claude терракотовое: единственное место про Claude в тексте. */
.facts b { color: var(--claude); font-weight: inherit; }
.facts span { color: var(--ink-soft); }

/* ── Блок 9, тарифы: подложка, белое поле, три карточки ─────────────── */
.plans h2 { font-size: 44px; line-height: 54px; }
.plans-wash { background: var(--plans-wash); border-radius: var(--r-wrap); padding: 24px; }
.plans-field { background: var(--white); border-radius: 24px; padding: 8px; }
/* Переключатель валюты над карточками, справа по краю текста последней карточки.
   Одет как меню языков в шапке: пилюля 36px с волосяной рамкой, список карточкой,
   пункты той же мелкой строкой. Без скрипта меню бессмысленно (валюту меняет он),
   поэтому по умолчанию его нет вовсе, а показывает его класс js, который ставит
   сам site.js; доллары в разметке стоят и без скрипта. */
.cur-menu { display: none; position: relative; }
.js .cur-menu { display: block; width: max-content; margin: 16px 20px 0 auto; }
.cur-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px;
  font: 500 14px/22px var(--display); letter-spacing: 0.2px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.cur-menu summary::-webkit-details-marker { display: none; }
.cur-menu summary:hover { background: var(--paper); }
.cur-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 8px; min-width: 140px;
}
.cur-menu-list button {
  display: block; width: 100%; cursor: pointer; text-align: left;
  padding: 8px 12px; font: 400 14px/22px var(--sans); color: var(--ink);
  background: none; border: 0; border-radius: 8px;
}
.cur-menu-list button:hover { background: var(--paper); }
.cur-menu-list button.active { color: var(--blue); font-weight: 500; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.plan { display: flex; flex-direction: column; padding: 32px 20px; border-left: 1px solid var(--line); }
.plan:first-child { border-left: 0; }
/* Выделенная карточка: рамка-переход 2px, скругление 24px, без капсулы.
   У образца выделение без подписи, и оно читается само. Рамка нарисована двумя
   фонами (белый по краю набивки, переход по краю рамки): так не нужен ни
   лишний элемент разметки, ни тень. */
.plan-featured {
  border: 2px solid transparent; border-radius: 24px;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(90deg, #3186FF, #346BF1, #4FA0FF) border-box;
}
.plan-featured + .plan { border-left: 0; }
.plan-name { font-family: var(--display); font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -0.25px; }
.price { font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 44px; letter-spacing: -0.5px; margin-top: 8px; }
/* Сумма не переносится: в «10 000 ₽» есть пробел, и на узком месте перенос увёл бы
   знак валюты на вторую строку, а карточки ряда разъехались бы по высоте. */
.amount { white-space: nowrap; }
/* Мелкой строкой набран период, а не сумма. Правило именует его через отрицание,
   потому что сумма с приходом переключателя валюты тоже стала span внутри .price,
   и без этого она набралась бы мелким серым (оплачено 09.09.2026 при съёмке). */
.price span:not(.amount) { display: block; font: 400 14px/22px var(--sans); letter-spacing: 0.2px; color: var(--ink-soft); }
.plan-cta { width: 100%; margin: 20px 0 24px; }
.plan-for { margin: 0 0 16px; color: var(--ink); }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; }
.plan-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-soft); }
.tick { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
/* Строка под белым полем: мелкая, внутри подложки, как у образца. */
.plans-fine { margin: 16px 4px 0; font-size: 12px; line-height: 19px; letter-spacing: 0.2px; color: var(--ink-soft); }

/* ── Блок 10, сценарии: одна карточка-подсказка ─────────────────────── */
.soon-card { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.soon-badge {
  align-self: start; white-space: nowrap;
  font: 500 14px/22px var(--display); letter-spacing: 0.2px;
  color: var(--blue); background: var(--blue-wash); border-radius: var(--r-pill); padding: 4px 14px;
}
.soon-card h3 { margin-bottom: 8px; }
.soon-card p { margin: 0; color: var(--ink-soft); }

/* ── Блок 11, финал: светлая полоса внутри контейнера ───────────────── */
.close-band { background: var(--paper); padding: 80px 24px; text-align: center; }
.close h2 { font-size: 44px; line-height: 54px; margin-bottom: 16px; }
.close-lead { max-width: 46ch; margin: 0 auto 32px; font-size: 18px; line-height: 28px; color: var(--ink-soft); }
.close-state { margin: 0 0 24px; font-size: 14px; line-height: 22px; letter-spacing: 0.2px; color: var(--ink-soft); }
.close-fine { margin: 24px 0 0; font-size: 12px; line-height: 19px; letter-spacing: 0.2px; color: var(--ink-soft); }

/* ── Страница приёма почты (/start/, только в режиме «почта») ───────── */
/* Экран короткий, и подвал не должен висеть в середине пустого окна: колонка
   тянется до низа экрана с запасом на шапку и подвал. */
.start-page { padding: 80px 0 60px; text-align: center; min-height: calc(100vh - 230px); }
.start-page h1 { font-size: 44px; line-height: 54px; font-weight: 500; margin-bottom: 16px; }
.start-page .sub { color: var(--ink-soft); font-size: 18px; line-height: 28px; margin-bottom: 32px; }
.start-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.start-form input[type="email"] {
  flex: 1 1 300px; max-width: 360px; font: 400 16px/24px var(--sans); padding: 11px 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.start-back { margin-top: 32px; font-size: 14px; line-height: 22px; }
.start-back a { color: var(--ink-soft); }
.start-back a:hover { color: var(--ink); }
/* Ответ формы. Красного в палитре образца нет вовсе, поэтому отказ отличается от
   удачи не цветом, а формой: плашка с волосяной рамкой, как всё остальное на
   странице. Цвет здесь означал бы четвёртый смысл цвета сверх синего, зелёного
   и терракотового. */
.form-ok { margin: 24px 0 0; color: var(--ink); font-weight: 500; }
.form-error {
  display: inline-block; margin: 24px 0 0; padding: 8px 18px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill);
}
/* Обе строки лежат в разметке скрытыми и показываются скриптом. Правило с display
   сильнее атрибута hidden, поэтому скрытость приходится вернуть явно: без этой
   строки отказ формы виден всем и всегда. */
.form-ok[hidden], .form-error[hidden] { display: none; }

/* ── Подвал ─────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg); padding: 40px 0; color: var(--footer-ink); }
.site-footer .foot-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.site-footer p { margin: 0; font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: 0.2px; }
.site-footer .brand-word { font-weight: 700; }
.legal-links a { text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }
.site-footer .muted {
  margin-top: 24px; font-size: 12px; line-height: 19px; font-weight: 400; max-width: 88ch;
}

/* ── Правовые страницы ──────────────────────────────────────────────── */
.legal { padding: 60px 0 24px; }
.legal h1 { font-size: 44px; line-height: 54px; font-weight: 500; margin-bottom: 16px; }
.legal h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.25px; margin: 36px 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal .muted { color: var(--ink-soft); font-size: 14px; line-height: 22px; }
/* В правовом тексте выделение стоит внутри абзаца и набирается тем же вторым
   весом страницы, а не жирным начертанием браузера: весов на сайте два. */
.legal strong { font-weight: 500; }
.legal a { color: var(--blue); }
/* Таблица реквизитов: строки разделены волосяной линией, тени нет. */
.req-card {
  display: grid; gap: 1px; margin: 24px 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.req-card > div {
  background: var(--white); padding: 16px 20px;
  display: grid; grid-template-columns: 220px 1fr; gap: 16px;
}
.req-card .k { color: var(--ink-soft); font-size: 14px; line-height: 22px; letter-spacing: 0.2px; }
.req-card .v { font-size: 16px; line-height: 24px; }
.req-card a { color: var(--blue); }

/* ── Страница «такого адреса нет» ───────────────────────────────────── */
/* Запас считается вместе с зазором 80px, который секции даёт ритм страницы:
   без него подвал уезжал за нижний край экрана. */
.page-404 { padding: 80px 0 60px; text-align: center; min-height: calc(100vh - 250px); }
.page-404 h1 { font-size: 44px; line-height: 54px; font-weight: 500; margin-bottom: 16px; }
.page-404 .sub { color: var(--ink-soft); font-size: 18px; line-height: 28px; max-width: 56ch; margin: 0 auto; }
/* Код ответа стоит плашкой-пилюлей, как плашки состояния на главной. */
.status {
  display: inline-block; margin: 0 0 16px; padding: 4px 14px;
  font-size: 14px; line-height: 22px; letter-spacing: 0.2px; color: var(--ink-soft);
  background: var(--paper); border-radius: var(--r-pill);
}
.cta-row { margin-top: 32px; display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.lang-row {
  margin: 40px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px;
  font-size: 14px; line-height: 22px; letter-spacing: 0.2px;
}
.lang-row a { color: var(--ink-soft); text-decoration: none; }
.lang-row a:hover { color: var(--ink); text-decoration: underline; }

/* ── Средние экраны ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .hero-copy { grid-column: 1; }
  .hero .sub { margin-left: auto; margin-right: auto; max-width: 56ch; }
  /* Окно рабочего места мельче 980px не читается: остаётся один телефон. */
  .hero-stage { grid-column: 1; padding: 40px 0 0; }
  .ui-window { display: none; }
  .phone-demo { position: static; width: 100%; max-width: 280px; margin: 0 auto; }

  .anchor-grid, .econ-list { grid-template-columns: 1fr 1fr; }
  .econ-list { gap: 36px 48px; }
  .memory-copy, .safe-body { grid-column: 1 / span 6; }
  .memory-art, .safe-art { grid-column: 7 / span 6; }
  .plan { padding: 28px 16px; }
  .plans h2, .close h2 { font-size: 36px; line-height: 44px; }
}

/* ── Телефон ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  /* Шапка на телефоне: три пилюли в ряд помещаются впритык, и слова длиннее
     русских («Sign in», «Get started», «Anmelden») рвались на две строки, а ряд
     переставал быть рядом. Пилюли не переносятся, а место находится в зазорах и
     полях, а не за счёт того, что кнопка входа прячется: прятать её нельзя
     (решение владельца 05.09.2026). */
  .site-header .wrap, .head-nav { gap: 8px; }
  .head-nav .btn, .head-nav a.head-signin, .lang-menu summary { padding: 6px 12px; }
  .brand, .head-nav .btn, .head-nav a.head-signin, .lang-menu summary { white-space: nowrap; }
  main > section { margin-top: 60px; }
  main > section.plans, main > section.close { margin-top: 60px; }

  h1 { font-size: 36px; line-height: 44px; letter-spacing: -0.25px; }
  h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.25px; }
  .hero .sub, .lead, .sec-head p, .close-lead { font-size: 16px; line-height: 24px; }
  .plans h2, .close h2 { font-size: 30px; line-height: 38px; }
  .scene h3, .plan-name { font-size: 20px; line-height: 28px; }

  .anchor-grid, .jobs-grid, .econ-list, .usage-grid, .plans-grid { grid-template-columns: 1fr; }
  .memory-grid, .safe-grid { grid-template-columns: 1fr; gap: 32px; }
  .memory-copy, .memory-art, .safe-body, .safe-art { grid-column: 1; }
  .safe-art { max-width: 320px; margin: 0 auto; }

  /* Сцены дня едут лентой с привязкой: карточка 85% ширины, прокрутка пальцем,
     без единого скрипта. Отрицательные поля дотягивают ленту до краёв экрана. */
  .scenes-grid {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px; scrollbar-width: none;
  }
  .scenes-grid::-webkit-scrollbar { display: none; }
  .scene { flex: 0 0 85%; scroll-snap-align: start; }

  /* Тарифы в столбик: подложка скругляется мельче, разделители становятся
     горизонтальными, а выделенная карточка держит свою рамку-переход. */
  .plans-wash { border-radius: var(--r-card); padding: 16px; }
  .plans-field { padding: 4px; }
  /* Поле у́же, поля карточки мельче: переключатель встаёт по тому же краю. */
  .js .cur-menu { margin: 12px 12px 0 auto; }
  .plan { border-left: 0; border-top: 1px solid var(--line); padding: 28px 16px; }
  .plan:first-child { border-top: 0; }
  .plan-featured { border: 2px solid transparent; }
  .plan-featured + .plan { border-top: 0; }

  .close-band { padding: 60px 16px; }
  .soon-card { grid-template-columns: 1fr; gap: 16px; }
  .site-footer .foot-top { flex-direction: column; gap: 8px; }

  /* Служебные страницы: заголовок по шкале телефона, реквизиты в одну колонку. */
  .start-page h1, .legal h1, .page-404 h1 { font-size: 30px; line-height: 38px; }
  .start-page, .page-404 { padding-top: 60px; }
  .req-card > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Корейский держит слова целиком: перенос внутри слова ломает заголовок. */
html[lang="ko"] body { word-break: keep-all; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot { animation: none; }
  .phone-demo * { animation: none !important; }
  #mv-idle { opacity: 0; }
  #mv-card { opacity: 0; }
  #mv-lock { opacity: 1; }
  #mv-push { opacity: 1; transform: none; }
  #mv-wa { opacity: 0; }
  #mv-wb { opacity: 1; }
}