/*
  Landing page styles. Kept separate from site.css on purpose: the support and
  privacy pages are linked from App Store Connect and still use site.css, so
  nothing here can break them.
*/

/*
  Quiet Intelligence: дорогая бумага, тёмный лес, графит, состаренная латунь.

  Продукт продаёт не «эффективность за пять минут», а последовательность:
  большая цель → этапы → задачи → действие на сегодня. Значит и визуальный язык
  должен быть не возбуждающим, а спокойным и уверенным. Фиолетовый градиент
  говорит «посмотри, какой у нас ИИ», яркий зелёный — «давай продуктивнее»,
  оранжевый — «сделай прямо сейчас». Лес на бумаге говорит другое: «у тебя есть
  путь, просто продолжай его».

  Распределение зафиксировано как правило, а не как пожелание:
      нейтрали   70–80%
      forest     10–15%
      olive       5–10%
      brass        1–3%
      burgundy     <1%

  Латунь обязана оставаться редкой. Если человек начал замечать «золотой
  дизайн», золота уже слишком много.
*/

:root {
  color-scheme: light dark;

  /* Бренд */
  --forest: #24382e;          /* CTA, ссылки, активное, ключевые цифры */
  --forest-deep: #1d2a23;     /* наведение и тёмные секции */
  --forest-active: #17211b;   /* нажатие */
  --olive: #5c6857;           /* вторичный брендовый, обычный прогресс */
  --brass: #9a8052;           /* микроакцент: номера, тонкие линии, бейджи, цены */
  --brass-light: #c2a876;     /* та же латунь, но читаемая на тёмном лесу */
  --burgundy: #6a3f3b;        /* редкий эмоциональный акцент и ошибки */

  /* Поверхности */
  --bg: #f5f1e8;              /* ivory — бумага, а не кремовый фон */
  --surface: #fbf9f4;         /* карточка почти растворяется в фоне */
  --surface-2: #eae4d6;       /* bone — вторичные блоки и сцена под скриншотами */
  --surface-elevated: #ffffff; /* кнопка поверх тёмной карточки — самый верхний слой */
  --bg-band: #eae4d6;
  --bg-dark: #1d2a23;         /* тёмные секции внутри светлой темы */

  /* Текст */
  --text: #20231f;            /* графит: дорогой печатный текст, не чёрный */
  --muted: #6f736b;           /* вторичный текст обычного кегля */
  --muted-strong: #5f635c;    /* он же для мелких подписей и текста на bone */
  --text-on-dark: #f5f1e8;
  --muted-on-dark: #c8c8bc;
  --disabled: #9a9d96;

  /* Линии */
  --stroke: #d8d2c5;
  --stroke-strong: #c9c2b4;
  --divider: #e3ded3;

  /* Смысловые — из той же палитры */
  --success: #486653;
  --success-soft: #e1e9e2;
  --warning: #7f6035;
  --warning-soft: #f0e8d8;
  --error: #6a3f3b;
  --error-soft: #f0e2df;
  --info: #526a68;
  --info-soft: #e1e9e7;

  /* Прогресс: спокойный процесс, а не казино с цветными индикаторами */
  --track: #ddd8cc;

  /* Совместимость со старыми именами */
  --accent: var(--forest);
  --accent-deep: var(--forest);
  --accent-strong: var(--forest-deep);
  --accent-soft: #e5ebe4;

  --shadow: 0 20px 48px rgba(32, 35, 31, 0.08);
  --radius: 20px;
  /* Two faces on purpose. Manrope is the voice: geometric, very heavy at 800,
     with a wide Cyrillic set — it carries the headlines. Inter is the reading
     face for everything that has to be read rather than glanced at. Both are
     self-hosted: the audience sits behind blocks where a Google Fonts request
     is exactly the kind of thing that fails. */
  --font-display: 'Manrope', ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Тёмная тема — тёмная библиотека, а не игровой интерфейс. Чистый чёрный не
   используется: он выглядит как выключенный экран. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* На тёмном лес светлеет до шалфея, иначе он неразличим. Значение чуть
       выше исходного #7c9a84: на карточке тот давал 4.4, то есть текст на ней
       уже не проходил порог читаемости. */
    --forest: #84a28c;
    --forest-deep: #6f8c78;
    --forest-active: #9ab8a2;
    --olive: #8c9a86;
    --brass: #b19a6c;
    --brass-light: #c9b489;
    --burgundy: #b98782;

    --bg: #1d2420;
    --surface: #263029;
    --surface-2: #2d3830;
    --bg-band: #222b26;
    --bg-dark: #171d19;
    --surface-elevated: #2d3830;

    --text: #f5f1e8;
    --muted: #b9bbaf;
    --muted-strong: #c6c8bd;
    --text-on-dark: #f5f1e8;
    --muted-on-dark: #b9bbaf;
    --disabled: #737a70;

    --stroke: #3a443d;
    --stroke-strong: #4a564c;
    --divider: #333d36;

    --success: #84a28c;
    --success-soft: #24312a;
    --warning: #c2a06a;
    --warning-soft: #332c1e;
    --error: #b98782;
    --error-soft: #33241f;
    --info: #8aa6a4;
    --info-soft: #223030;

    --track: #333d36;
    --accent-soft: #2a362d;

    --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}

/* То же самое, когда тему выбрали кнопкой, а не системой. */
:root[data-theme="dark"] {
    /* На тёмном лес светлеет до шалфея, иначе он неразличим. Значение чуть
       выше исходного #7c9a84: на карточке тот давал 4.4, то есть текст на ней
       уже не проходил порог читаемости. */
    --forest: #84a28c;
    --forest-deep: #6f8c78;
    --forest-active: #9ab8a2;
    --olive: #8c9a86;
    --brass: #b19a6c;
    --brass-light: #c9b489;
    --burgundy: #b98782;

    --bg: #1d2420;
    --surface: #263029;
    --surface-2: #2d3830;
    --bg-band: #222b26;
    --bg-dark: #171d19;
    --surface-elevated: #2d3830;

    --text: #f5f1e8;
    --muted: #b9bbaf;
    --muted-strong: #c6c8bd;
    --text-on-dark: #f5f1e8;
    --muted-on-dark: #b9bbaf;
    --disabled: #737a70;

    --stroke: #3a443d;
    --stroke-strong: #4a564c;
    --divider: #333d36;

    --success: #84a28c;
    --success-soft: #24312a;
    --warning: #c2a06a;
    --warning-soft: #332c1e;
    --error: #b98782;
    --error-soft: #33241f;
    --info: #8aa6a4;
    --info-soft: #223030;

    --track: #333d36;
    --accent-soft: #2a362d;

    --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-text);
  background:
    radial-gradient(circle at 12% -10%, rgba(31, 74, 56, 0.10), transparent 42%),
    radial-gradient(circle at 92% 4%, rgba(138, 110, 53, 0.08), transparent 38%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent-strong); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--stroke);
}

.brand {
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--text);
  text-decoration: none;
}

/* The app icon itself, so the site and the home screen read as the same product. */
.mark {
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(27, 31, 28, 0.12);
}

/* 40px is what the bar gives away for free: the Telegram pill beside it is
   ~40px tall, so the mark grows into height the header already occupied and
   the row does not get taller. The source PNG is 128px, so there are still
   pixels to spare on a 3x screen. */
.brand .mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

/* Manrope, small and letterspaced, rather than the body face at its default
   setting: these are labels to be glanced at, not sentences to be read, and
   the caps give the bar a deliberate line without shouting. */
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  padding-block: 3px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

/* The rule grows in from the left rather than blinking on. */
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav-links a,
  .nav-links a::after { transition: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-small { padding: 8px 15px; font-size: 14px; }

/* Плоская заливка, а не градиент. Градиент на главной кнопке — язык, по
   которому опознают ИИ-стартап; здесь кнопка должна утверждать, а не светиться. */
.btn-primary {
  background: var(--accent-deep);
  color: var(--text-on-dark);
  box-shadow: 0 12px 30px rgba(27, 31, 28, 0.16);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--stroke);
  color: var(--text);
}

/* Кнопка входа в само приложение. В шапке она стоит рядом с телеграмом и не
   должна его перекрикивать — заливка тихая, вес несёт только текст. */
.btn-app {
  background: var(--accent-deep);
  color: var(--text-on-dark);
}

/* ============ ВХОДНАЯ ЗОНА ============ */
/* Полоса сразу под первым экраном: единственное место на странице, откуда
   продуктом можно воспользоваться прямо сейчас. Поэтому она тёмная — на
   светлой странице это единственное тёмное пятно, мимо него не пройти. */
.enter { padding-top: 0; }

.enter-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 22px;
  background: var(--accent-deep);
  color: var(--text-on-dark);
  text-decoration: none;
  box-shadow: 0 14px 40px rgba(27, 31, 28, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.enter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(27, 31, 28, 0.24);
}

.enter-mark {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
}
.enter-mark svg { width: 21px; height: 21px; }

.enter-text { display: grid; gap: 4px; min-width: 0; }
.enter-text b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.enter-text i {
  font-style: normal;
  font-size: 14px;
  opacity: 0.78;
  line-height: 1.45;
}

.enter-go {
  margin-left: auto;
  flex: none;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--text-on-dark);
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 15px;
}

.enter-note {
  margin: 14px 2px 0;
  font-size: 13.5px;
  color: var(--text-muted, #6b6f68);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .enter-card { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .enter-text b { font-size: 17px; }
  .enter-go { margin-left: 0; width: 100%; text-align: center; }
}

.ico {
  width: 19px;
  height: 19px;
  flex: none;
  margin-right: 9px;
  /* These glyphs are drawn on a 24px grid and used at 16-19px. Precision
     rendering keeps the curves from being snapped to the pixel grid, which is
     what made the small one look smeared. */
  shape-rendering: geometricPrecision;
}

/* Официальный бейдж Apple, а не своя чёрная плашка с яблоком.

   Раньше кнопка была нарисована нами: тёмная пилюля, яблоко и надпись «Скоро
   в App Store». Пока приложения не было, это годилось. Теперь оно есть, и
   правила Apple для ссылки на магазин однозначны: берётся их артворк, без
   перекраски, обрезки и своих рамок вокруг. Поэтому здесь только размер и
   ровная посадка в ряд с остальными кнопками. */
.btn-store {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 10px;
  line-height: 0;
}

.btn-store img {
  display: block;
  height: 50px;
  width: auto;
}

/* Чёрный бейдж на светлом фоне, белый — на тёмном: так предписывают правила
   Apple, и так он вообще читается. Оба варианта — их артворк, мы только
   выбираем нужный по теме. */
.btn-store .badge-dark { display: none; }

:root:not([data-theme="light"]) .btn-store .badge-light,
:root[data-theme="dark"] .btn-store .badge-light { display: none; }

:root[data-theme="dark"] .btn-store .badge-dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-store .badge-dark { display: block; }
}

.btn-store:hover { transform: translateY(-1px); }

/* Раньше кнопка заливалась фирменным голубым Telegram. В этой палитре он
   единственное пятно чужого бренда и рвёт всю систему, поэтому узнаваемость
   оставлена значку, а кнопка стала тихой — обведённой. */
.btn-tg {
  background: var(--surface);
  border: 1px solid var(--stroke-strong);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(27, 31, 28, 0.08);
}

.btn-small.btn-tg {
  padding: 8px 15px;
  box-shadow: none;
}

.btn-small.btn-tg .ico { width: 16px; height: 16px; margin-right: 7px; }

/* На тёмном чёрная плашка Apple сливается с фоном, поэтому светлеет до
   поверхности — и получает обводку: без неё панель на панели теряет края, а
   кнопка перестаёт выглядеть нажимаемой. */
@media (prefers-color-scheme: dark) {
}

/* То же самое, когда тему выбрали кнопкой, а не системой. */


/* The store is not open yet — the button says so and does not pretend to work. */
.btn-disabled { opacity: 0.82; cursor: default; }

/* ---------- hero ---------- */

/* Колонки в пользу макета, а не текста.

   Было 1.05 / 0.95 — то есть снимок получал меньше половины и выходил 460
   пикселей при секции высотой 720. Первый экран продаёт продукт, а продукт
   здесь — то, что на экране; заголовок в 66 пунктов и без того забирает
   внимание, а вот разглядеть в макете задачи, дни и телефон было нельзя.

   Колонка текста при этом почти не пострадала: заголовок ломается на те же
   четыре строки, плашка сверху остаётся в одну. Проверено на 1440 и 1024.
   Ниже 900 раскладка всё равно становится одноколоночной — см. блок
   responsive, он идёт позже и перебивает эти значения. */
.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px 32px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-family: var(--font-display);
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero h1 {
  font-family: var(--font-display);
  margin: 20px 0 0;
  font-size: clamp(36px, 6.2vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}

/* Each half of the slogan on its own line, so «глобально» and «локально» sit
   under one another and the contrast the sentence is built on is visible
   rather than merely stated. */
.h1-line { display: block; }

/* Лесом выделено только «локально» — и это смысл, а не украшение.
   «Мысли глобально» остаётся графитом, «действуй локально» окрашивается: мысль
   нейтральна, действие имеет цвет. Раньше подсвечивались оба слова, и
   противопоставление, на котором держится весь первый экран, пропадало. */
.hero h1 em {
  font-style: normal;
  color: var(--forest);
}

.lead {
  color: var(--muted);
  font-size: 17px;
  margin: 18px 0 0;
  max-width: 46ch;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.cta-center { justify-content: center; }

.cta-note {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* Макет выходит в правое поле страницы.

   Секция шириной 1080 стоит по центру, и справа от неё на широком экране
   остаётся полоса в полторы-две сотни пикселей. Текст её не занимает — он
   слева, — поэтому макет упирался в правый край секции и выглядел прижатым к
   тексту: 28 пикселей до абзаца и почти двести пустоты за ним. Формально
   симметрично относительно страницы, на глаз — сдвинуто влево.

   clamp считает вылет от самой полосы, а не от ширины экрана: (100vw−1128)/2
   — это и есть половина того, что осталось за секцией, с запасом в 24
   пикселя по краю. Ниже 1128 вылет ровно ноль, так что горизонтальной
   прокрутки не появляется ни на какой ширине; сверху ограничен 130, иначе на
   очень широком мониторе макет уполз бы к самому краю. */
.hero-shot {
  margin-right: calc(-1 * clamp(0px, (100vw - 1128px) / 2, 130px));
}

/* Потолок поднят выше, чем колонка бывает на деле: ширину теперь задаёт
   сетка, а это значение только страхует от разъезда на очень широких экранах.
   Ноутбук и телефон внутри считаются в долях от макета, поэтому растут вместе
   с ним и пропорции не плывут. */
.hero-shot .duo-stage {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* Внутри корпуса у картинки не должно быть своей рамки и тени — иначе экран
   обведён дважды. */
.hero-shot img {
  width: 100%;
  border: 0;
  box-shadow: none;
}

/* ---------- sections ---------- */

.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.8vw, 40px);
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin: 6px 0 30px;
  font-weight: 800;
}

/* A small label above each heading: gives the eye a rung to land on and makes
   a long page feel like chapters instead of one scroll. */
.section-eyebrow {
  font-family: var(--font-display);
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Не карточки, а колонки редакционной полосы.
   Рамка, заливка и тень вокруг каждого пункта делали из трёх мыслей три
   одинаковых коробки. Осталась одна тонкая линия сверху — как в журнале, где
   колонки разделяет линейка, а не рамка. */
.card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--stroke);
  border-radius: 0;
  padding: 22px 0 0;
  box-shadow: none;
}

/* Numbered rather than decorated. A glyph is ornament; a number tells the
   reader there are exactly three things and they are being counted through. */
.card-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  /* Латунь ровно в том объёме, ради которого она и существует: три маленькие
     цифры на всю страницу. Обводка убрана — полый контур читался как
     недорисованный, а не как деталь. */
  color: var(--brass);
  margin-bottom: 14px;
  transition: color 0.2s ease;
}

/* На наведении номер уходит в лес: страница отвечает на курсор цветом
   действия, а не подсветкой блока. */
.card:hover .card-num { color: var(--forest); }

.card h3, .feature h3 {
  font-family: var(--font-display);
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 700;
}

/* Восемь возможностей одного веса — это стена, в которой не читается ни одна.
   Две первые ведут: они про то, чем продукт отличается от списка дел, и стоят
   во всю ширину полосы. Остальные шесть — перечисление, и выглядеть должны как
   перечисление. */
.feature-lead {
  grid-column: span 2;
  border-top: 1px solid var(--stroke);
  padding-top: 18px;
}

.feature-lead h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.feature-lead p { font-size: 15.5px; }

@media (max-width: 1000px) {
  .feature-lead { grid-column: span 1; }
}

.card p, .feature p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 24px;
}

.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- screenshots ---------- */

/* Нейтральная сцена под скриншотами.
   Красить сами экраны приложения под палитру сайта нельзя — это живой продукт,
   и подгонять его под рекламный макет значит показать не то, что человек
   скачает. Вместо этого вокруг них кладётся спокойная подложка: сайт остаётся
   бумагой и лесом, а приложение — продуктом внутри него. */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: var(--surface-2);
  border-radius: 26px;
  padding: 32px 28px 28px;
}

.shots figure { margin: 0; }

/* --- Рамка телефона -----------------------------------------------------
   Собрана стилями, а не картинкой: экраны приложения будут меняться, и
   пересобирать под каждый новый скриншот PNG с корпусом — работа на каждый
   релиз. Здесь корпус остаётся, меняется только содержимое. */
.device {
  position: relative;
  padding: 9px;
  /* Радиус в пикселях, а не в процентах: процент считается по ширине и высоте
     по отдельности, и углы получаются овальными. */
  border-radius: 44px;
  background: linear-gradient(160deg, #cfcabc 0%, #efece4 22%, #c4bfb1 60%, #e8e5db 100%);
  box-shadow:
    0 26px 60px rgba(40, 36, 28, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.device-screen {
  position: relative;
  overflow: hidden;
  border-radius: 36px;
  background: #000;
  line-height: 0;
}

.device-screen img {
  width: 100%;
  display: block;
  border-radius: 36px;
}

/* The pill, not a notch: this is what the current phones look like, and a
   wrong-shaped cut-out is the first thing the eye catches as fake. */
.device-island {
  position: absolute;
  top: 2.4%;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  height: 2.6%;
  min-height: 12px;
  border-radius: 999px;
  background: #101310;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .device {
    background: linear-gradient(160deg, #3a4038 0%, #545a50 24%, #2e332c 62%, #545a50 100%);
    box-shadow:
      0 26px 60px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
}

/* То же самое, когда тему выбрали кнопкой, а не системой. */
:root[data-theme="dark"] .device {
    background: linear-gradient(160deg, #3a4038 0%, #545a50 24%, #2e332c 62%, #545a50 100%);
    box-shadow:
      0 26px 60px rgba(0, 0, 0, 0.5),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }


.shots figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- trust band ---------- */

/* Блок про данные — единственный на bone. Технологичность здесь передаётся не
   синим, а спокойствием: тёмный лес на иконках, тонкие линии, латунь по мелочи.
   Тихая технология вместо «мы серьёзная IT-компания». */
.band {
  background: var(--bg-band);
  max-width: none;
  border-block: 1px solid var(--stroke);
}

/* На bone вторичный текст теряет контраст: 3.8 против 4.5 на обычном фоне.
   Здесь он на два тона темнее — не другой цвет, а тот же, доведённый до
   читаемого. */
.band .muted,
.band p,
.band li { color: var(--muted-strong); }
.band .section-title,
.band h3,
.band b { color: var(--text); }

.band > * { max-width: 1080px; margin-inline: auto; }

.fineprint {
  margin: 26px auto 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- closing ---------- */

.closing {
  text-align: center;
  padding-block: 76px;
}

.closing h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 44px);
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.closing .lead { margin-inline: auto; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--stroke);
  padding: 28px 24px 44px;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.footer-links {
  display: flex;
  /* Восемь ссылок в одну строку не помещаются нигде уже, а без переноса они
     не сжимались, а выпихивали страницу за экран: на 420px документ был
     761px шириной и уезжал вбок целиком, вместе с шапкой и текстом. */
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-left: auto;
  font-size: 14.5px;
}

.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }

.copy {
  width: 100%;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- responsive ---------- */

/* Шапка не влезала задолго до того, как прятала ссылки.

   Ссылки убирались только на 900, а сумма её содержимого — марка, шесть
   ссылок, переключатель темы и две кнопки — перестаёт помещаться уже около
   1100. На 1024 кнопка Telegram уходила за правый край на 31 пиксель, и вся
   страница получала горизонтальную прокрутку: заголовок первого экрана
   уезжал, стоило качнуть трекпад вбок. Ширина обычная — ноутбук, айпад
   поперёк, — так что видели это многие.

   Двумя ступенями: сперва ужимаем зазоры, потом убираем ссылки. Одним
   зазором не обойтись — на 910 шесть ссылок не помещаются никак. */
@media (max-width: 1120px) {
  .nav { gap: 12px; }
  .nav-links { gap: 18px; }
}

@media (max-width: 1040px) {
  .nav-links { display: none; }
  /* The links carried margin-left:auto and held the button against the right
     edge. With them hidden the button needs to hold that edge itself. */
  .nav .btn-small { margin-left: auto; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 44px;
    gap: 34px;
  }
  .hero-shot { order: -1; }
  .hero-shot .duo-stage { max-width: 380px; }
  .cards, .grid, .grid-3, .shots { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .cards, .grid, .grid-3, .shots { grid-template-columns: 1fr; }
  .section { padding-block: 40px; }
  .cta .btn { flex: 1 1 100%; }
  .footer-links { margin-left: 0; }
  /* Шапка на телефоне.

     Раньше в неё пытались влезть логотип с названием, «Открыть Synapse»,
     «Telegram» и переключатель темы — вчетвером они не помещались и налезали
     друг на друга: кнопка Telegram доходила до самого края экрана, а
     переключатель висел поверх неё, потому что был прижат к углу окна.

     Решение — по важности. Логотип со знаком остаётся: это опора страницы.
     «Открыть Synapse» остаётся кнопкой со словами: это то, ради чего сюда
     пришли. Telegram и тема сжимаются до значков — обе понятны без подписи и
     обе не про первое действие. Переключатель встаёт в общий ряд, а не поверх
     него. */
  .nav { padding: 12px 14px; gap: 8px; flex-wrap: nowrap; }
  .brand { font-size: 17px; min-width: 0; }
  .brand .mark { width: 34px; height: 34px; border-radius: 10px; }
  /* Название прячем, знак оставляем. Обрезанное «Syn…» читается как поломка,
     пустое место рядом со знаком — как решение. Знак узнаваем сам по себе, а
     имя продукта стоит в заголовке страницы двумя экранами ниже. */
  .brand span:not(.mark) { display: none; }

  .nav .theme-toggle {
    position: static;
    margin-left: auto;
    width: 38px;
    height: 38px;
    box-shadow: none;
  }

  .nav .btn-small { padding: 10px 14px; font-size: 14px; white-space: nowrap; flex: none; }

  /* Telegram — значком: подпись рядом с иконкой съедала место, которого нет. */
  .nav .btn-tg { padding: 0; width: 38px; height: 38px; }
  .nav .btn-tg .ico { margin: 0 }
  .nav .btn-tg span, .nav .btn-tg { font-size: 0 }
  .nav .btn-tg .ico { font-size: initial }
}

/* ---------- creed ---------- */

/*
  The one screen that is not about features. It sits right after the hero
  because the promise above it — break the big thing into steps — only means
  something once you know why the product believes in effort over outcome.
*/
/* Единственное место на сайте, где фон становится тёмным лесом.
   «Результат никогда не в наших руках целиком. В наших руках — усилие» — это
   самая сильная мысль страницы, и она должна читаться как редакционная цитата
   из дорогого журнала, а не как ещё один белый блок между другими белыми. */
.creed {
  max-width: 1140px;
  margin: 40px auto 0;
  padding: 84px 24px 92px;
  text-align: center;
  background: var(--bg-dark);
  border-radius: 28px;
}

.creed-kicker {
  font-family: var(--font-display);
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}

.creed-line {
  font-family: var(--font-display);
  margin: 18px 0 0;
  font-size: clamp(52px, 12vw, 132px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  /* Был градиент по тексту. На тёмном фоне он не нужен и вреден: слово должно
     быть одного цвета и читаться целиком. */
  color: var(--text-on-dark);
}

.creed-text {
  margin: 26px auto 0;
  max-width: 56ch;
  color: var(--muted-on-dark);
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- hero shot ---------- */

.hero-shot { position: relative; }

/* Light behind the phone rather than a border around it: the screenshot is the
   product, and a halo lifts it off the page without framing it like a picture. */
.shot-glow {
  position: absolute;
  inset: 6% 10% 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 74, 56, 0.16), transparent 68%);
  filter: blur(46px);
  z-index: 0;
}

.hero-shot img { position: relative; z-index: 1; }

/* ---------- captions ---------- */

.shots figcaption b {
  font-family: var(--font-display);
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 3px;
}


/* Four shots now, so they wrap instead of forcing a fourth narrow column. */
@media (min-width: 901px) {
  .shots { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

/* Closing call to action: blockier than the pills in the hero. This is the last
   thing on the page and the only decision left, so the targets are big and
   evenly sized rather than sized by their labels. */
.closing .cta .btn {
  min-width: 236px;
  padding: 20px 32px;
  border-radius: 22px;
  font-size: 16px;
}

@media (max-width: 560px) {
  .closing .cta .btn { min-width: 0; width: 100%; }
}


/* --- Тарифы -------------------------------------------------------------
   Same idiom as the rest of the page on purpose: pixels, --radius, --shadow,
   the display face for numbers. The first attempt used its own units and its
   own band and read as a bolt-on from another site. */
/* Призыв на странице должен быть один. Две кнопки одного веса заставляют
   выбирать между ними вместо того, чтобы нажать главную; вторая стала
   ссылкой — она никуда не делась, просто перестала спорить. */
.cta-link {
  align-self: center;
  color: var(--forest);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--forest) 35%, transparent);
  padding-bottom: 2px;
}

.cta-link:hover { border-bottom-color: var(--forest); }

/* Латунный бейдж висит на 13px выше карточки и на широком экране заходил под
   верхний край полосы. Запас сверху — чтобы он оставался деталью, а не
   обрезком. */
.plans-band { padding-top: 64px; }

.plans-band .section-eyebrow,
.plans-band .section-title {
  text-align: center;
}

.plans-band .section-title {
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 20px 62px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* The paid card wears the brand colour as a full field: on a page of white
   cards the eye has to land here first and know which one is the offer. */
/* The middle plan is tinted rather than white: three white cards in a row give
   the eye nothing to hold, and this one is a paid plan too. */
/* Месячный — не герой, но и не рядовой: он на тон плотнее соседних и с более
   заметной линией. Иерархия тарифов строится ступенями фона, а не цветом. */
.plan-soft {
  background: var(--bg);
  border-color: var(--stroke-strong);
}

/* Годовой — визуальный герой, и единственный тариф с тёмной заливкой.
   Продукт продаёт долгосрочное мышление, поэтому годовой тариф и должен
   выглядеть взрослым выбором, а не «акцией». Красное «выгодно!» здесь работало
   бы против самого товара. */
.plan-hero {
  background: var(--forest);
  border-color: transparent;
  color: var(--text-on-dark);
  box-shadow: 0 26px 60px rgba(27, 31, 28, 0.20);
}

/* Латунный бейдж — то самое место, ради которого латунь и заведена: маленькая
   деталь дорогих часов, а не кнопка «купить». Он намеренно узкий и прижат к
   краю карточки: широкая золотая плашка через всю ширину превращает взрослый
   выбор в распродажу. */
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--brass);
  color: var(--bg);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(27, 31, 28, 0.18);
}



@media (max-width: 700px) {
  .plan-hero { margin-top: 22px; }
}

.plan-kicker {
  font-family: var(--font-display);
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.plan-hero .plan-kicker { color: rgba(255, 255, 255, 0.86); }

/* Цена — латунью, как бейдж. Это единственная цифра на странице, ради которой
   человек сюда пришёл, и она из того же металла, что и пометка о выгоде: цена
   и её оправдание говорят одним голосом.
   Кегль здесь крупный, поэтому 3.6 на карточке — рабочий контраст: порог для
   крупного текста ниже, и латунь не превращается в коричневый. */
.plan-price {
  font-family: var(--font-display);
  margin: 0;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brass);
}

/* На тёмной карточке та же латунь тонет — там она светлее на два тона. */
.plan-hero .plan-price { color: var(--brass-light); }

.plan-unit {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  opacity: 0.7;
}

.plan-per {
  margin: 10px 0 0;
  min-height: 40px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--muted);
}

.plan-hero .plan-per { color: rgba(255, 255, 255, 0.82); }

.plan-list {
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

.plan-hero .plan-list { color: rgba(255, 255, 255, 0.92); }

.plan-list li {
  position: relative;
  padding-left: 30px;
}

.plan-list b { color: var(--text); font-weight: 700; }
.plan-hero .plan-list b { color: var(--text-on-dark); }

/* A tick in a soft disc — the same shape language as the icon chips above,
   and far more legible at a glance than a bullet. */
.plan-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.plan-hero .plan-list li::before {
  background: rgba(255, 255, 255, 0.22);
  color: var(--text-on-dark);
}

.btn-plan {
  margin-top: auto;
  width: 100%;
  padding: 16px 24px;
  border-radius: 18px;
  font-size: 15.5px;
}

/* Кнопка на тёмной карточке — светлая, и это не украшение: она единственное
   место годового тарифа, ради которого карточка вообще существует. Ссылка на
   необъявленный токен делала её прозрачной, то есть тёмный текст оказывался на
   тёмно-зелёном фоне и главный призыв страницы просто исчезал. */
.btn-plan-primary {
  background: #ffffff;
  color: var(--forest-deep);
  box-shadow: 0 14px 32px rgba(23, 33, 27, 0.28);
}

.btn-plan-primary:hover { background: var(--bg); }

/* Out of the flow: the note lived under the button and only the yearly card had
   one, so that card's button sat a line higher than the other three. */
.plan-note {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  margin: 0;
  font-size: 12.5px;
  /* Было 78% белого — 4.3 на лесу, ниже порога для текста такого кегля. Это
     строка про отмену подписки: именно её человек ищет глазами перед тем, как
     заплатить, и именно она обязана читаться без усилия. */
  color: var(--muted-on-dark);
}

/* What a row is missing has to be visible, not absent: an empty line reads as
   an oversight, a struck-through one reads as the difference between plans. */
.plan-list li.off {
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.plan-list li.off::before {
  content: "–";
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
  text-decoration: none;
}

@media (max-width: 1000px) {
  .plans { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .plans { grid-template-columns: 1fr; }
  .plans .plan-hero { grid-column: auto; }
  .plan { padding: 24px 24px 62px; }
  /* В столбик у плашки нет края, над которым висеть, — она становится обычной
     строкой. transform снимаем обязательно: он остался от абсолютного
     положения и на статичном элементе продолжал сдвигать плашку на половину её
     ширины влево — за край карточки. */
  .plan-badge {
    position: static;
    display: inline-block;
    transform: none;
    left: auto;
    top: auto;
    margin: 0 0 14px;
    white-space: normal;
  }
}


/* --- Личный кабинет -----------------------------------------------------
   Same shell as the landing: sticky nav, one column, the page's own cards.
   It used the plain document stylesheet from the legal pages, which is right
   for a privacy policy and wrong for the screen where someone becomes a
   customer. */
.account {
  max-width: 620px;
  padding-top: 44px;
  padding-bottom: 64px;
}

.account-lead {
  margin: -18px 0 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.account-card {
  padding: 28px;
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.account-state {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* A live dot rather than a word: the state is read before anything else. */
.account-state .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(44, 99, 73, 0.18);
}

.account-status {
  margin: 0 0 20px;
  font-size: 15.5px;
  color: var(--muted);
}

.account-text {
  margin: 0 0 20px;
  font-size: 15px;
  color: var(--muted);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.account-card-error .account-state { color: var(--error); }

/* Apple's own black button, because that is what the person expects to press
   for Sign in with Apple — anything else reads as a third-party imitation. */
.btn-apple {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  gap: 9px;
  padding: 15px 26px;
  box-shadow: 0 12px 28px rgba(27, 31, 28, 0.20);
}

.btn-apple .ico { width: 19px; height: 19px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-apple { background: var(--surface); color: var(--text); }
}

/* То же самое, когда тему выбрали кнопкой, а не системой. */
:root[data-theme="dark"] .btn-apple { background: var(--surface); color: var(--text); }


@media (max-width: 560px) {
  .account-actions .btn { flex: 1 1 100%; }
}


/* --- Поля входа --------------------------------------------------------- */
.account-form {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

/* A class that sets `display` beats the browser's own rule for [hidden], so
   the code form showed up next to the phone form before anything was sent. */
[hidden] { display: none !important; }

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.field {
  width: 100%;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  outline: none;
}

.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Wide tracking on the code field: six digits are read back one by one when
   someone is checking them against an SMS. */
.field-code {
  letter-spacing: 0.34em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
}

.account-error {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--error);
}

.account-form .btn-plan { margin-top: 4px; }


.account-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 520px) {
  .account-plans { grid-template-columns: 1fr; }
}

/* ---------- переключатель темы ---------- */

/* Тема — светлая или тёмная, третьего состояния нет: «как в системе» означало
   бы кнопку, которая не отвечает на вопрос «какая сейчас тема». Систему
   спрашиваем один раз, до первого выбора. Выбор хранится в том же ключе, что и
   в веб-версии приложения, поэтому переключённое здесь остаётся переключённым
   и там. */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.theme-toggle:hover { border-color: var(--forest); }

/* В шапке лендинга кнопка встаёт в ряд с остальными, а не поверх страницы. */
@media (min-width: 861px) {
  .nav .theme-toggle { position: static; margin-left: 4px; box-shadow: none; }
}

/* ============ НОУТБУК И ТЕЛЕФОН В ПЕРВОМ ЭКРАНЕ ============ */

/* Ноутбук нарисован вёрсткой, а не вставлен снимком: снимок стареет с каждой
   правкой интерфейса, мылится на плотных экранах и весит сотни килобайт.
   Пропорции взяты у настоящего ноутбука — 16:10 по экрану, — иначе он
   выглядит растянутым телевизором. */

.duo-stage {
  position: relative;
  width: 100%;
  padding: 6px 6px 14px;
  overflow: visible;
}

.laptop { width: 100%; }

.laptop-screen {
  border-radius: 12px 12px 4px 4px;
  /* Поля одинаковые с трёх сторон, снизу шире — там у ноутбука подбородок. */
  padding: 9px 9px 16px;
  background: linear-gradient(158deg, #d7d2c4 0%, #f2efe8 26%, #cac5b7 62%, #ebe8de 100%);
  box-shadow:
    0 22px 48px rgba(40, 36, 28, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* Подставка шире корпуса и сужается книзу — так ноутбук стоит, а не висит. */
/* Подставка шире корпуса и по центру: раньше её сдвигал отрицательный
   margin-left, и ноутбук стоял криво относительно телефона. */
.laptop-base {
  height: 9px;
  width: 110%;
  /* auto-поля не центрируют то, что шире контейнера: они превращаются в ноль,
     и подставка съезжала вправо. Половина превышения — ровно −5%. */
  margin-left: -5%;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #ddd8cb 0%, #b6b1a4 100%);
  box-shadow: 0 12px 22px rgba(40, 36, 28, 0.2);
}

/* Экран держит пропорцию: содержимое внутри может быть любой длины, но
   рамка обязана оставаться ноутбучной. */
/* Высоту экрана задаёт только пропорция.

   Раньше её задавало содержимое макета: aspect-ratio отступает, когда
   потомки требуют больше места, и корпус вырастал вдвое — 547 пикселей
   вместо 275. Теперь внутренности лежат слоем поверх пустой рамки нужных
   пропорций и растянуть её не могут. */
.laptop-screen > .screen-inner {
  position: relative;
  /* Ровно пропорция снимка: при 16:10 object-fit срезал края, и левое меню
     веб-версии уходило за рамку — это и было «разъехалось внутри». */
  aspect-ratio: 1400 / 795;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg);
}

.webshot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 10px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}

.ws-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--stroke);
  flex: none;
}
.ws-top b { font-size: 12px; letter-spacing: -0.03em; }
.ws-mark { width: 14px; height: 14px; border-radius: 4px; background: var(--forest); flex: none; }
.ws-acts { margin-left: auto; display: flex; gap: 5px; }
.ws-acts i { width: 14px; height: 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--stroke); }
.ws-acts i.wide { width: 34px; }

.ws-body { display: flex; gap: 9px; padding: 9px; flex: 1; min-height: 0; }

.ws-rail {
  flex: 0 0 26%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.ws-rail span { padding: 4px 7px; border-radius: 6px; color: var(--muted); }
.ws-rail span.on { background: var(--surface-2); color: var(--text); font-weight: 600; }

.ws-main { flex: 1; min-width: 0; }

/* Заголовок дня — крупный и в верхнем регистре, как в самом сервисе. */
.ws-day {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ws-day + .ws-day, .ws-task + .ws-day { margin-top: 9px; }
.ws-day i { font-style: normal; font-size: 8.5px; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

.ws-task {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.ws-task b { flex: 1; min-width: 0; font-weight: 500; }
.ws-task i { font-style: normal; color: var(--muted); font-size: 8.5px; }
.ws-box { width: 11px; height: 11px; border-radius: 3.5px; border: 1.5px solid var(--stroke-strong); flex: none; }
.ws-box.on { background: var(--forest); border-color: var(--forest); }

/* Выполненная — приглушённая и зачёркнутая, ровно как в сервисе. */
.ws-task.done { background: var(--surface-2); border-color: transparent; }
.ws-task.done b { color: var(--muted); text-decoration: line-through; }

.ws-say {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 5px 5px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  color: var(--muted);
}
.ws-say span { flex: 1; }
.ws-say i {
  font-style: normal; font-size: 8px; font-weight: 800;
  width: 18px; height: 18px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--forest); color: #fff;
}

/* Телефон стоит на ноутбуке углом и свешивается за правый край: так видно,
   что это одно и то же, а не два продукта рядом. */

/* Корпус телефона: замкнутый кант одной толщины по всему периметру.

   Поле у .device всегда было симметричным — ровно по 7px со всех сторон, и
   снимок ложился в экран без смещения. Кант всё равно читался только справа
   и снизу, и причина не в размерах, а в цвете: корпус светло-кремовый, экран
   ноутбука под ним — тоже светло-кремовый, и снимок приложения внутри почти
   белый. Слева и сверху, там где телефон лежит на ноутбуке, светлое поле
   сливалось с тем, что под ним, — рамка обрывалась ровно на стыке двух
   устройств. Справа и снизу она сливалась уже с бумагой страницы, и глаз
   дочитывал «широкий кант» до края тени.

   Значит корпусу нужен не более широкий отступ, а собственный контур и
   собственная тональность. Графит читается на всех трёх фонах сразу: на белом
   снимке внутри, на экране ноутбука под ним и на бумаге страницы. Ноутбук
   остаётся серебряным — серебряный ноутбук и тёмный телефон это обычная пара
   на столе, а не разнобой. */
.duo-phone {
  position: absolute;
  right: -2%;
  bottom: 2%;
  width: 28%;
  /* Кант и радиусы считаем от ширины самого телефона, а не от макета: он
     рендерится то 88, то 129 пикселей, и одно фиксированное значение на одном
     конце даёт скруглённую каплю, на другом — почти прямоугольник. */
  container-type: inline-size;

  /* Телефон рисуется одним предметом, а не тремя слоями вперемешку.

     Без этой строки порядок был такой: корпус телефона, поверх него снимок
     ноутбука, поверх снимок телефона. Снимок ноутбука (.webshot-img) стоит
     relative/z-index:1, а .duo-phone не задавал слоя вовсе — и корпус уезжал
     под чужую картинку. Снимок телефона при этом тоже z-index:1, но идёт
     позже в разметке, поэтому оставался сверху. Отсюда и вид «рамка есть
     везде, кроме той стороны, где начинается экран ноутбука»: она там была,
     но под ним.

     Слой на всём телефоне разом делает его цельным: корпус и экран поднимаются
     вместе, и разбирать их по отдельности больше нечему. */
  z-index: 2;
}

/* :root в селекторе — не украшение: общие правила темы написаны как
   :root[data-theme="dark"] .device и без него перебивают корпус в первом
   экране, возвращая ему тень и фон от телефонов из блока «как это выглядит». */
:root .duo-phone .device {
  /* Толщина канта одна на все четыре стороны, и внутренний радиус считается
     из неё же: иначе при любой правке рамки углы перестают быть концентричными. */
  --rim: 5px;
  --body-radius: 19px;

  padding: var(--rim);
  border-radius: var(--body-radius);
  background: linear-gradient(150deg, #454b41 0%, #262a23 34%, #3d433a 66%, #20231f 100%);
  box-shadow:
    /* Контур по периметру — то, чего корпусу не хватало: он делает телефон
       отдельным предметом поверх ноутбука, а не вырезом в его экране. */
    0 0 0 1px rgba(20, 22, 19, 0.55),
    /* Блик металла с внутренней стороны канта. */
    inset 0 0 0 1px rgba(245, 241, 232, 0.16),
    /* Тень по размеру этого телефона. Прежняя — 0 26px 60px — досталась от
       крупных телефонов из «как это выглядит»; на корпусе шириной 128px она
       ложилась на экран ноутбука тёмным пятном размером с сам телефон. */
    0 4px 12px rgba(32, 35, 31, 0.28);
}

:root .duo-phone .device-screen,
:root .duo-phone .device-screen img {
  border-radius: calc(var(--body-radius) - var(--rim));
}

/* Доли ширины — только там, где браузер знает cqw. Через @supports, а не
   двумя объявлениями подряд: в кастомное свойство падает любой набор токенов,
   так что «--rim: 5px; --rim: 4cqw;» не откатится на пиксели, а обнулит поле
   там, где cqw не поддержан. */
@supports (padding: 1cqw) {
  :root .duo-phone .device {
    --rim: 4cqw;
    --body-radius: 16cqw;
  }
}

/* На тёмной теме страница почти того же графита, что и корпус, — внешний
   контур становится светлым, иначе телефон сливается уже с фоном. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .duo-phone .device {
    box-shadow:
      0 0 0 1px rgba(245, 241, 232, 0.24),
      inset 0 0 0 1px rgba(245, 241, 232, 0.14),
      0 4px 12px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] .duo-phone .device {
  box-shadow:
    0 0 0 1px rgba(245, 241, 232, 0.24),
    inset 0 0 0 1px rgba(245, 241, 232, 0.14),
    0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Островок нарисован в самом снимке. Свой поверх него ложился шире, ниже и
   выше настоящего, и вместо пилюли получалось смазанное чёрное пятно. */
.duo-phone .device-island { display: none; }

@media (max-width: 900px) {
  .duo-phone { right: 0; width: 27%; }
}

/* Настоящий снимок веб-версии поверх свёрстанного макета.

   Проявляется по загрузке, а не прячется по ошибке: пока файла нет или он
   не доехал, виден макет — и страница ни на секунду не показывает пустой
   прямоугольник. Кладётся в screens/web-1.png. */
.webshot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 2;
}
.webshot-img.ok { opacity: 1; }