/* ════════════════════════════════════════════════════════════════════════
   midasbot — оформление.

   НАПРАВЛЕНИЕ. Мир этого продукта — один аккаунт, существующий дважды:
   дешёвым по-русски и дорогим по-английски. Поэтому цвет здесь не «фирменный»,
   а СМЫСЛОВОЙ: бумага и рубли — мир источника, чернила и доллары — мир, где
   платят больше. Граница между ними и есть продукт, её видно на первом экране
   и её можно подвинуть рукой.

   ЧЕГО ЗДЕСЬ СОЗНАТЕЛЬНО НЕТ. Почти чёрный фон с одним ярким акцентом —
   самый узнаваемый облик сгенерированного дизайна, и предыдущая версия была
   ровно им: отсюда «тускло и уныло». Теперь основной холст светлый, тёмный
   работает как второй мир, а не как настроение.

   ПРАВИЛА, КОТОРЫЕ НЕЛЬЗЯ НАРУШАТЬ.
   1. Синий — только суммы в долларах. Алый — только шов и множитель.
      Никаких акцентов на кнопках, рамках и заголовках.
   2. Заголовок не анимируется: по нему браузер меряет скорость загрузки.
   3. Содержимое видно без JS. Прячет только живой JS (класс js на html).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Шрифты. Свои, а не Google Fonts: для этой аудитории подключение к
   гуглу означает страницу без текста.

   Unbounded — крупный заголовок. Кириллица родная, в англоязычных шаблонах
   не встречается, поэтому лицо страницы нельзя спутать. Golos Text — русский
   гротеск для всего остального. Моно — только цифры. ────────────────────── */
@font-face{font-family:'Unbounded';font-style:normal;font-display:swap;font-weight:200 900;
  src:url('fonts/unbounded-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-display:swap;font-weight:200 900;
  src:url('fonts/unbounded-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'Golos';font-style:normal;font-display:swap;font-weight:400 900;
  src:url('fonts/golos-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos';font-style:normal;font-display:swap;font-weight:400 900;
  src:url('fonts/golos-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'JBMono';font-style:normal;font-display:swap;font-weight:100 800;
  src:url('fonts/mono-cyr.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JBMono';font-style:normal;font-display:swap;font-weight:100 800;
  src:url('fonts/mono-lat.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}

/* ── Токены. Шесть названных цветов, каждый что-то значит. ─────────────── */
:root{
  --paper:#ffffff;      /* холст мира-источника */
  --wash:#F2F0EB;       /* мягкая полоса на бумаге */
  --ink:#131110;        /* текст на бумаге И холст ночного мира */
  --ink-2:#5A544E;      /* второстепенный текст на бумаге */
  /* Третий тон подтянут до читаемого: им набраны не только микро-лейблы,
     но и смысловые строки — условия покупки, заметки под расчётом. */
  --ink-3:#726D66;      /* подписи на бумаге, 5.1:1 на белом */
  --hair:#E2DED7;       /* волосяная граница на бумаге */

  --on-ink:#F7F4EF;     /* текст на чернилах */
  --on-ink-2:#A9A198;   /* второстепенный на чернилах */
  --on-ink-3:#928980;   /* подписи на чернилах: 5.5:1 на основном фоне и
                           4.7:1 на подсвеченной карточке тарифа */
  --hair-ink:#2A2724;   /* граница на чернилах */

  --ru:#7C766D;         /* рубли: дешёвая сторона */
  --usd:#1B44F5;        /* доллары: то, что получаешь */
  --usd-ink:#7C96FF;    /* доллары на тёмном */
  --seam:#FF3B14;
  /* Золото продукта. Панель бота выглядит именно так, и на странице
     этим цветом помечено ТОЛЬКО то, что относится к самому боту:
     его серия в графике, флаг тарифа, рамка доказательств. Тогда
     скриншоты панели, когда они появятся, будут здесь своими. */
  --bot:#FFC247;
  --bot-soft:rgba(255,194,71,.14);       /* ТОЛЬКО шов и множитель */

  --e:cubic-bezier(.16,1,.3,1);
  --e-ui:cubic-bezier(.4,0,.2,1);

  --w:1240px;
  --pad:clamp(20px,4.4vw,52px);

  --disp:'Unbounded','Golos',system-ui,sans-serif;
  --sans:'Golos',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JBMono',ui-monospace,Menlo,monospace;
}

/* ── Сброс ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--seam);color:#fff}
:focus-visible{outline:2px solid var(--seam);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);
  color:var(--paper);padding:12px 18px}
.skip:focus{left:0}

/* ── Каркас ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:820px}

/* Шапка липкая и высотой 62px, поэтому переход по любой ссылке меню срезал
   верхушку заголовка. Отступ прокрутки — единственное честное лекарство:
   он действует и на клик, и на нажатие Enter, и на прямую ссылку с якорем. */
[id]{scroll-margin-top:78px}

.sec{padding-block:clamp(78px,9.5vw,142px)}
.sec-tight{padding-top:0}
.sec-wash{background:var(--wash)}
.sec-ink{background:var(--ink);color:var(--on-ink)}
.sec-ink .sec-sub{color:var(--on-ink-2)}

.sec-h{max-width:820px;margin-bottom:clamp(34px,4.4vw,56px)}
.sec-sub{color:var(--ink-2);font-size:1.0625rem;margin-top:16px;max-width:56ch}

.h1{
  font-family:var(--disp);
  font-size:clamp(2.05rem,4.55vw,4.2rem);
  font-weight:700;letter-spacing:-.05em;line-height:.9;
  text-transform:uppercase;
}
.h2{
  font-family:var(--disp);
  font-size:clamp(1.75rem,3.9vw,3.1rem);
  font-weight:600;letter-spacing:-.04em;line-height:1.02;
  text-transform:uppercase;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ── Кнопки. Плотные, без свечения, без акцентного цвета. ─────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding-inline:24px;border-radius:2px;
  font-family:var(--sans);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;transition:background .14s var(--e-ui),color .14s var(--e-ui),
  border-color .14s var(--e-ui),transform .1s var(--e-ui)}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#2C2724}
.btn-paper{background:var(--on-ink);color:var(--ink)}
.btn-paper:hover{background:#fff}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.sec-ink .btn-line{border-color:var(--on-ink-2);color:var(--on-ink)}
.sec-ink .btn-line:hover{background:var(--on-ink);color:var(--ink);border-color:var(--on-ink)}
.btn-sm{height:38px;padding-inline:16px;font-size:.875rem}
.btn-lg{height:56px;padding-inline:28px;font-size:1rem}

/* ── Шапка ──────────────────────────────────────────────────────────── */
/* В покое шапка полупрозрачная — так первый экран выглядит цельным. Но стоит
   начать прокрутку, как под ней проезжает текст и просвечивает сквозь стекло:
   на тёмных разделах это читается как грязь. Поэтому при прокрутке шапка
   становится плотной. */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--e),background-color .3s var(--e)}
.nav.solid{border-bottom-color:var(--hair);background:var(--paper)}
.nav-in{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--disp);
  font-weight:700;letter-spacing:-.05em;font-size:1.0625rem}
.brand img{width:22px;height:22px;filter:brightness(0)}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:.9375rem;
  font-weight:500;color:var(--ink-2)}
/* Переключатель языка. Намеренно скромный: это служебная ссылка, а не
   действие — она не должна конкурировать с кнопкой «Написать». */
.nav-lang{font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--on-ink-3);text-decoration:none;padding:6px 9px;border:1px solid var(--hair);border-radius:8px;transition:color .15s,border-color .15s}
.nav-lang:hover{color:var(--on-ink);border-color:var(--on-ink-3)}
.nav-links a{transition:color .14s var(--e-ui)}
.nav-links a:hover{color:var(--ink)}

/* ══════════════════ ГЕРОЙ ══════════════════ */
/* Верх в две колонки: заголовок слева, объяснение и кнопки справа. Одной
   колонкой блок занимал весь первый экран и выталкивал шов под сгиб — а шов
   и есть то единственное, ради чего этот экран сделан. */
.hero{padding-top:clamp(30px,5vh,64px);padding-bottom:clamp(56px,7vw,96px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(24px,4vw,64px);align-items:end}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:clamp(16px,2vw,24px)}
.eb-dot{width:7px;height:7px;border-radius:50%;background:var(--seam)}
.lede{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.5;
  max-width:44ch}
.cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.cta-note{margin-top:14px;font-size:.8125rem;color:var(--ink-3)}

/* ── ГЕРОЙ: одно слово, которое меняется на месте.
   Рутина — это не «много работы», а ОДНО И ТО ЖЕ действие, повторённое сто
   раз. Поэтому заголовок стоит неподвижно, а меняется только глагол: найти,
   перевести, оформить, оценить, выложить, снять. Высота слота фиксирована,
   иначе строка прыгает и читать невозможно. ──────────────────────────── */
.h1-static{display:block;color:var(--ink-2)}
.verb{display:block;position:relative;overflow:hidden;
  height:1.06em;color:var(--ink)}
/* Оба слова лежат в ОДНОМ слоте друг на друге. Пока они стояли в обычном
   потоке, новое слово въезжало ПОД старым, а после удаления старого прыгало
   наверх — рывок вместо переката (поймано живым замером геометрии). */
.verb-w{position:absolute;left:0;top:0;width:100%;
  will-change:transform,opacity}
html.js .verb-w.out{animation:verbOut .34s var(--e) forwards}
html.js .verb-w.in-w{animation:verbIn .42s var(--e) backwards}
@keyframes verbOut{to{transform:translateY(-70%);opacity:0}}
@keyframes verbIn{from{transform:translateY(70%);opacity:0}to{transform:none;opacity:1}}

/* Счётчик рядом: доходит до ста и обнуляется. Алый — на ПОЛОСЕ, потому что
   акцент на странице принадлежит ограничению, а не выигрышу. */
.grind{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(22px,3vw,34px)}
.grind-n{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;color:var(--seam);
  min-width:3.4ch}
.grind-track{position:relative;flex:1 1 200px;max-width:340px;height:3px;
  background:var(--hair);overflow:hidden}
.grind-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--seam)}
.grind-l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}

.hero-l{min-width:0}
.hero-foot{padding-bottom:clamp(4px,1vw,10px)}

/* ── ОДИН ЛОТ → ДВЕ ВИТРИНЫ ───────────────────────────────────────────
   Слева настоящая карточка FunPay, справа два настоящих объявления. Читается
   как превращение, а не как «до/после» из шаблона. ──────────────────── */
/* Колонки по СВОЕЙ высоте, а не растянутые под соседа: растянутая карточка
   FunPay открывала полэкрана пустоты под текстом продавца. */
.flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.05fr);
  gap:clamp(16px,2.4vw,30px);align-items:start}

.fp{background:var(--paper);border:1px solid var(--hair);
  padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:12px}
.fp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fp-tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:3px 7px}
.fp-cat{font-size:.75rem;color:var(--ink-3)}
.fp-t{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(.9375rem,1.35vw,1.0625rem);line-height:1.3;color:var(--ink)}
.fp-d{color:var(--ink-2);font-size:.875rem;line-height:1.55;flex:1}
.fp-f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--hair)}
.fp-seller{font-size:.75rem;color:var(--ink-3)}
/* Пробел разряда в моноширинном равен целому знаку: «4 900» читается как два
   числа. То же лечение, что и у итогов недели. */
.fp-price{font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:600;color:var(--ru);
  word-spacing:-.34em}
.fp-price .fp-cur{word-spacing:normal}
.fp-cur{font-size:.62em}
.fp-note{font-size:.75rem;color:var(--ink-3)}

.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:10px;
  align-self:center}
.fa-line{width:1px;height:clamp(30px,5vw,58px);background:var(--hair);flex:none}
.fa-badge{font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);background:var(--seam);padding:4px 8px;
  white-space:nowrap}

.shops{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,18px)}
.shop{background:var(--ink);color:var(--on-ink);
  padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:11px}
.shop-eld{background:#1B1815}
.shop-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shop-tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--on-ink);color:var(--ink);padding:3px 7px}
.shop-meta{font-size:.75rem;color:var(--on-ink-3)}
.shop-t{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(.9375rem,1.3vw,1.0625rem);line-height:1.3}
.shop-b{display:grid;gap:6px;font-size:.8125rem;line-height:1.4;
  color:var(--on-ink-2)}
.shop-f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:11px;border-top:1px solid var(--hair-ink);margin-top:auto}
.shop-l{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-ink-3)}
.shop-price{font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:600;
  color:var(--usd-ink)}

.flow-note{margin-top:clamp(22px,3vw,32px);color:var(--ink-2);max-width:62ch;
  font-size:.9375rem}

/* Эмодзи — картинками (Twemoji), а не системным шрифтом: браузерные рисунки
   на Windows выглядят дёшево, а на площадках стоят именно такие. */
.em{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;
  margin-right:.25em}
.shop-b .em,.shop-t .em{margin-right:.34em}

/* ── ДОКАЗАТЕЛЬСТВО ───────────────────────────────────────────────────
   Единственный блок с настоящими снимками. Пока их нет, тут стоит честная
   карточка «покажу на созвоне» — она не притворяется доказательством.
   Сетка готова заранее, чтобы вставка файлов не требовала правки стилей. */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(14px,2vw,22px)}
.pf{margin:0;border:1px solid var(--hair);background:var(--paper);
  display:flex;flex-direction:column}
.pf-wide{grid-column:1/-1}
.pf img{width:100%;height:auto;display:block;border-bottom:1px solid var(--hair)}
.pf figcaption{padding:12px 16px;font-size:.875rem;color:var(--ink-2)}

/* Пока снимков нет. Занимает всю строку: половинчатая карточка выглядела бы
   как «мы что-то не доделали», а полная — как осознанное предложение. */
.proof-soon{grid-column:1/-1;border:1px solid var(--hair);background:var(--wash);
  padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column;
  align-items:flex-start;gap:14px}
.ps-t{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.0625rem,1.6vw,1.25rem)}
.ps-d{color:var(--ink-2);max-width:58ch;font-size:.9375rem;line-height:1.55}

/* Скриншоты рабочего чата. Оговорка стоит НАД картинками, а не под ними:
   читатель всё равно спросит «это что, отзывы?» — ответить надо до того, как
   он посмотрит, иначе подпись снизу читается как оправдание. Колонки уже,
   чем у .proof: скриншот переписки — вертикальный. */
.crew{margin-top:clamp(28px,3.6vw,48px)}
/* Надпись набрана как рубрика, а не как заголовок: блок подчинён разделу
   «Доказательство» и не должен спорить с его h2. */
.crew-l{font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:10px;border-bottom:1px solid var(--hair);
  margin-bottom:clamp(16px,2vw,24px)}
.crew-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(12px,1.6vw,18px);align-items:start}

/* ── НЕДЕЛЯ ───────────────────────────────────────────────────────────
   Не «бот быстрее», а «бот выходит каждую ночь». Алым — рука, потому что
   ограничение здесь у человека. ─────────────────────────────────────── */
/* Зазор большой намеренно: подписи дней нижнего ряда и числа верхнего стоят
   снаружи столбиков и на тесном зазоре налезали друг на друга. */
.week{display:flex;flex-direction:column;gap:clamp(44px,5vw,64px)}
.week-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px);align-items:end}
.week-l{display:flex;flex-direction:column;gap:4px}
.week-who{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-3)}
/* Пробел разряда в моноширинном равен целому знаку и разрывает число на два.
   Поджимаем — «1 330» должно читаться одним числом, а не как «1» и «330». */
.week-sum{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:600;line-height:1;
  color:var(--on-ink);word-spacing:-.34em}
.bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(6px,1vw,12px);align-items:end;justify-items:center;
  height:clamp(112px,13vw,150px)}
/* Ширину ограничиваем: на всю колонку столбик читается не как график, а как
   заливка полэкрана. */
.bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  height:var(--h);min-height:3px;width:100%;max-width:clamp(34px,6.4vw,92px)}
.bar::before{content:'';flex:1;display:block}
.bar i{position:absolute;left:0;right:0;bottom:calc(100% + 6px);text-align:center;
  font-family:var(--mono);font-style:normal;font-size:.6875rem;
  color:var(--on-ink-3)}
.bar b{position:absolute;left:0;right:0;top:calc(100% + 7px);text-align:center;
  font-family:var(--mono);font-weight:400;font-size:.625rem;letter-spacing:.06em;
  color:var(--on-ink-3)}
/* Ручная серия была красной — тем же цветом, что и рекомендованный
   тариф. Человек не может выучить код, если один тон значит и
   «проигрывает», и «бери этот». Ручная — нейтральная. */
.bar-hand::before{background:var(--on-ink-3)}
/* Семь одинаковых сплошных блоков занимали самую большую площадь
   максимального контраста и кодировали ОДНО повторённое значение,
   а информативная ручная серия оставалась полосками по 2-20px.
   Бот — контур с лёгкой заливкой: «потолок, который держится
   каждый день» читается с одного взгляда и не глушит соседа. */
.bar-bot::before{background:var(--bot-soft);box-shadow:inset 0 0 0 1px var(--bot)}
.week-note{margin-top:clamp(34px,4vw,50px);color:var(--on-ink-3);font-size:.875rem;
  max-width:60ch}

/* ══════════════════ Журнал ночи ══════════════════ */
.log{border:1px solid var(--hair-ink);max-width:880px}
.log-i{display:flex;gap:clamp(14px,2.4vw,30px);align-items:baseline;
  padding:clamp(13px,1.6vw,17px) clamp(15px,2.2vw,24px);
  border-bottom:1px solid var(--hair-ink);font-size:.9375rem}
.log-i:last-child{border-bottom:0}
.log-t{font-family:var(--mono);font-size:.75rem;color:var(--on-ink-3);
  flex:0 0 auto;min-width:44px}
.log-d{color:var(--on-ink-2)}
.log-ok .log-d{color:var(--on-ink)}
/* Предупреждение в логе было тем же красным, что и «шов», и что
   рекомендованный тариф. Янтарь — свой смысл, не занятый ничем. */
.log-warn .log-t{color:#E0A93B}
.log-note{margin-top:20px;color:var(--on-ink-3);font-size:.9375rem;max-width:56ch}

/* ══════════════════ Расчёт ══════════════════ */
.calc{border:1px solid var(--hair);max-width:880px;padding:clamp(22px,3vw,36px);background:var(--paper)}
.calc-l{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
/* Высота 22px — это ЗОНА ПОПАДАНИЯ пальцем; сама линия рисуется фоном по
   центру. На высоте 3px промахнуться было легче, чем попасть. */
.calc-s{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:linear-gradient(90deg,var(--ink) 0 var(--fill,33%),var(--hair) var(--fill,33%) 100%)
    center/100% 3px no-repeat;
  cursor:pointer}
.calc-s::-moz-range-track{background:transparent;height:3px}
.calc-s::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--ink);cursor:grab}
.calc-s::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:0;cursor:grab}
.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;
  background:var(--hair);border:1px solid var(--hair)}
.calc-b{background:var(--paper);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.calc-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.calc-v{font-size:clamp(1.125rem,2vw,1.625rem);font-weight:600}
.calc-b-hi .calc-v{color:var(--usd)}
.calc-note{margin-top:16px;font-size:.8125rem;color:var(--ink-3)}
.math-after{margin-top:26px;color:var(--ink-2);max-width:56ch}

/* ══════════════════ Честно ══════════════════ */
/* 320px вместо 278: при контентной ширине 1136px это РОВНО 3 колонки,
   6 карточек ложатся 3+3 без пустых ячеек. На 278px выходило 4+2, и две
   пустые ячейки показывали фон, который ТЕМНЕЕ карточек. */
.truth{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.tc{background:var(--wash);padding:clamp(22px,2.6vw,30px)}
.tc-t{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  font-size:1.0625rem;margin-bottom:10px}
.tc p{color:var(--ink-2);font-size:.9375rem;line-height:1.55}

/* ══════════════════ Тарифы ══════════════════ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair-ink);border:1px solid var(--hair-ink)}
.plan{position:relative;display:flex;flex-direction:column;background:var(--ink);
  padding:clamp(26px,2.8vw,34px)}
/* Рекомендованный тариф был обведён красным — цветом, который двумя
   экранами выше означал проигрывающую ручную серию и предупреждение.
   На кнопке решения это читается как «осторожно», а не «бери этот».
   Помечаем золотом продукта: этим цветом на странице помечен сам бот. */
.plan-hi{background:#232019;outline:1px solid var(--bot);outline-offset:-1px}
.plan-flag{position:absolute;top:0;left:0;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;
  background:var(--bot);color:#1a1206}
.plan-n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-3);margin-top:8px}
.plan-p{font-family:var(--disp);font-weight:600;letter-spacing:-.05em;
  font-size:clamp(2.5rem,4.2vw,3.4rem);line-height:1;margin:14px 0 12px}
.plan-cur{font-size:.42em;font-weight:500;color:var(--on-ink-3);vertical-align:.5em;
  margin-right:2px}
.plan-per{font-family:var(--sans);font-size:.24em;font-weight:500;
  color:var(--on-ink-3);letter-spacing:0;margin-left:6px}
.plan-d{color:var(--on-ink-3);font-size:.875rem;margin-bottom:22px;min-height:2.8em}
.plan-f{display:flex;flex-direction:column;gap:10px;flex:1;margin-bottom:26px}
.plan-f li{position:relative;padding-left:18px;font-size:.9375rem;
  color:var(--on-ink-2);line-height:1.45}
.plan-f li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:1px;
  background:var(--on-ink-3)}
.plan-f b{color:var(--on-ink);font-weight:700}
.plan .btn{width:100%}
.plan-note{margin-top:24px;color:var(--on-ink-3);font-size:.8125rem}

/* ══════════════════ Вопросы ══════════════════ */
.qas{border-top:1px solid var(--hair)}
.qa{border-bottom:1px solid var(--hair)}
.qa-q{display:flex;align-items:center;gap:18px;width:100%;padding:22px 2px;
  text-align:left;font-family:var(--sans);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.35;
  transition:color .14s var(--e-ui)}
.qa-q:hover{color:var(--seam)}
.qa-q span:first-child{flex:1}
.qa-i{position:relative;width:13px;height:13px;flex:0 0 auto}
.qa-i::before,.qa-i::after{content:'';position:absolute;background:currentColor;
  transition:transform .3s var(--e),opacity .2s var(--e)}
.qa-i::before{top:6px;left:0;width:13px;height:1.5px}
.qa-i::after{left:6px;top:0;width:1.5px;height:13px}
.qa.open .qa-i::after{transform:scaleY(0);opacity:0}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--e);
  color:var(--ink-2);font-size:.9375rem;line-height:1.6;max-width:64ch}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-in{overflow:hidden}
.qa.open .qa-in{padding-bottom:24px}

/* ══════════════════ Финал и подвал ══════════════════ */
.end{background:var(--ink);color:var(--on-ink);text-align:center;
  padding-block:clamp(78px,9.5vw,132px)}
.end-h{margin-bottom:20px}
.end-p{color:var(--on-ink-2);max-width:50ch;margin:0 auto 32px}
.foot{border-top:1px solid var(--hair);padding-block:30px;background:var(--paper)}
.foot-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-l{display:flex;align-items:baseline;gap:12px}
.foot-b{font-family:var(--disp);font-weight:700;letter-spacing:-.05em}
.foot-c{font-size:.75rem;color:var(--ink-3)}
.foot-d{margin-left:auto;font-size:.6875rem;color:var(--ink-3);max-width:44ch;
  line-height:1.45}

/* ── Движение ─────────────────────────────────────────────────────────
   Одно движение на всю страницу: короткое, transform+opacity, без петель.
   Прячет только живой JS, и правило показа обязано побеждать правило
   скрытия по весу селектора. */
.rise{opacity:1;transform:none}
html.js .rise{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--e),transform .55s var(--e)}
html.js .rise.in,.rise.in{opacity:1;transform:none}

/* Столбики недели вырастают по одному — слева направо, как дни. */
.js .bar::before{transform:scaleY(0);transform-origin:bottom}
.js .week.go .bar::before{animation:barUp .5s var(--e) forwards;
  animation-delay:calc(var(--i) * 55ms)}
@keyframes barUp{to{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js .rise{opacity:1;transform:none}
  .js .bar::before{transform:none}
  html.js .verb-w.out,html.js .verb-w.in-w{animation:none}
}

/* ── Адаптив ────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .flow{grid-template-columns:1fr}
  .flow-arrow{flex-direction:row;padding-top:0;width:100%}
  .fa-line{width:auto;height:1px;min-height:0;flex:1}
  .plans{grid-template-columns:1fr}
  .calc-out{grid-template-columns:1fr}
}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:22px;align-items:start}
}

@media (max-width:820px){
  .nav-links{display:none}
  .nav-in{gap:14px}
  .nav-in > .btn{margin-left:auto}
  .cta{width:100%}
  .cta .btn{flex:1 1 200px}
  /* Зазор 26px: числа над столбиками живут СНАРУЖИ бокса, и на 10px
     «5 180» физически налезало на подписи «740» (перекрытие 11px). */
  .week-row{grid-template-columns:1fr;gap:26px;align-items:start}
  .bars{height:clamp(104px,26vw,140px)}
  .grind-track{max-width:none}
  .foot-in{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-d{margin-left:0;max-width:none}
  .log-i{flex-direction:column;gap:4px}
  .log-t{min-width:0}
}

@media (max-width:520px){
  .bar i{font-size:.75rem}
  .bar b{font-size:.75rem}
  .fp-price,.shop-price{font-size:1.25rem}
}

/* ── Читаемость на телефоне ───────────────────────────────────────────
   На большом экране подписи в 10-11px — это аккуратная типографика. На
   телефоне, который держат в руке на вытянутой, это уже нечитаемо, а
   именно они несут смысл: «FUNPAY», «G2G», «PRICE», «РУКАМИ», «БОТОМ».
   Ниже 12px здесь не опускаемся. */
@media (max-width:820px){
  .fp-tag,.shop-tag,.shop-l,.fp-cat,.shop-meta,
  .grind-l,.week-who,.calc-k,.plan-n,.plan-flag,
  .eyebrow,.lot-p-l,.log-t{font-size:.75rem}
  /* Название в шапке — это ещё и «наверх». По нему промахиваются:
     26px высотой мало для пальца. */
  .brand{padding-block:10px}
  /* «/мес» задан долей от цены (.24em), поэтому на телефоне вместе с ценой
     ужимается до 9.6px — а это часть условия покупки, её надо читать. */
  .plan-per{font-size:.8125rem}
  .foot-d{font-size:.75rem}
}

/* Хэндл текстом под финальной кнопкой. Все семь кнопок страницы ведут на
   одну ссылку: если она умрёт или её заблокируют, пути к продавцу не
   остаётся вовсе — а переписать адрес руками человек не может, потому что
   нигде его не видит. */
.end-h{margin-top:18px;font-size:.8125rem;color:var(--on-ink-3)}
.end-h b{font-family:var(--mono);color:var(--on-ink);font-weight:500}