/* Deskforge — слой эффектов. Подключается ПОСЛЕ site.css.
   Правило выкатки: не больше двух движущихся эффектов на экран — один фоновый
   и один под курсором. Всё движение снимается системной настройкой «уменьшить
   движение» блоком в конце файла. Разметку почти не трогаем: узлы создаёт effects.js. */

:root{ --fx-glow: 94,233,208; }   /* --accent числами, чтобы подставлять в rgba() */

/* ── Блок «Наши продукты»: один видеообзор вместо стены снимков ───────────────
   Снимков было пять, и с каждым новым продуктом стена росла бы дальше. Ролик
   идёт без звука, зациклен, с постером и кнопкой паузы; управление — не только
   для красоты: зацикленное видео без стоп-кнопки раздражает и мешает читать. */
.prodreel{position:relative;margin:34px 0 0;padding:0}
.prodreel-video{
  display:block;width:100%;height:auto;border-radius:18px;
  border:1px solid var(--line);background:#05070a;
}
.prodreel-btn{
  position:absolute;right:16px;bottom:74px;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;cursor:pointer;
  background:rgba(8,10,14,.78);border:1px solid var(--line);color:var(--text);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(6px);transition:border-color .2s ease,background .2s ease;
}
.prodreel-btn:hover{border-color:rgba(94,233,208,.5);background:rgba(8,10,14,.9)}
.prodreel-ico{width:9px;height:11px;flex:0 0 auto;position:relative}
.prodreel-ico::before,.prodreel-ico::after{
  content:"";position:absolute;top:0;width:3px;height:11px;background:var(--accent);border-radius:1px;
}
.prodreel-ico::before{left:0}
.prodreel-ico::after{right:0}
/* На паузе две полосы складываются в треугольник «играть». */
.prodreel.is-paused .prodreel-ico::before{
  left:1px;width:0;height:0;background:none;
  border-left:9px solid var(--accent);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;
}
.prodreel.is-paused .prodreel-ico::after{display:none}
.prodreel-cap{
  display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);
}
.prodreel-cap span{
  border:1px solid var(--line-soft);border-radius:100px;padding:5px 12px;background:var(--bg-soft);
}
@media(max-width:620px){
  .prodreel-btn{right:10px;bottom:auto;top:10px}
  .prodreel-cap{font-size:12px}
}

/* ── Линия прогресса по шагам ─────────────────────────────────────────────────
   Четыре шага «как доводим задачу» были голым списком без визуальной связи.
   Слева идёт линия, её участок загорается, когда шаг входит в экран. */
.fx-steps .step{position:relative;padding-left:18px}
.fx-steps .step::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;
  background:var(--line-soft);
}
.fx-steps .step::after{
  content:"";position:absolute;left:0;top:0;width:2px;height:0;border-radius:2px;
  background:var(--accent);transition:height .7s var(--ease-out-quint);
}
.fx-steps .step.fx-on::after{height:100%}

/* ── Блик по кнопке под курсором ──────────────────────────────────────────── */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease-out-quint);pointer-events:none;
}
.btn-primary:hover::after{left:120%}

/* ── Тихая точечная текстура там, где движения быть не должно ─────────────── */
#offer,#faq{background-image:radial-gradient(rgba(94,233,208,.055) 1px, transparent 1px);
  background-size:22px 22px;background-position:0 0}

@media (prefers-reduced-motion:reduce){
  .fx-steps .step::after{transition:none;height:100%}
  .btn-primary::after{display:none}
}

/* ── Второй шрифт с кириллицей ────────────────────────────────────────────────
   Bricolage и Sora, которыми набран сайт, кириллицы не содержат вовсе — весь
   русский в них уезжает в системный фолбэк, и «другим шрифтом» строку заголовка
   было физически нечем набрать. Поэтому в fonts/ положен Unbounded (SIL OFL,
   вариативный 200-900) с кириллическим и латинским наборами: он и даёт контраст
   гарнитур в первом экране. Файлы локальные, в интернет страница не ходит. */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(../fonts/unbounded-cyrillic.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-weight:200 900;font-display:swap;
  src:url(../fonts/unbounded-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Заголовок первого экрана: три строки — три подачи ────────────────────────
   Первая строка — Unbounded крупно и плотно, вторая — Manrope легче и мельче со
   сдвигом, третья — моноширинная строка-вывод со стрелкой, рифма с терминальной
   панелью справа. Мятным красится ровно одна строка. */
.hero-h1{display:flex;flex-direction:column;gap:8px;text-wrap:balance}
/* Три строки — три направления студии, у каждого свой цвет и своя подача.
   Кегли рядом друг с другом: третья строка про трейдинг раньше была мелкой
   моно-меткой и терялась, хотя направление равноправное. Стрелку убрал. */
.hero-h1 .h1-a{
  font-family:"Unbounded",var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(26px,3.4vw,46px);color:var(--text);
}
.hero-h1 .h1-b{
  font-family:var(--sans);font-weight:500;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(24px,3.05vw,41px);color:#8fb6e8;margin-left:.1em;
}
.hero-h1 em{
  font-style:normal;font-family:"Unbounded",var(--sans);font-weight:600;
  letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(22px,2.85vw,38px);color:var(--accent);margin-left:.2em;
}
@media(max-width:620px){
  .hero-h1 .h1-b,.hero-h1 em{margin-left:0}
}
/* 320-360 px: «Автоматизируем» при 28 px не влезает в строку и обрезалось
   справа на 23 px (замер 26.08.2026). Кегль первой строки опускаем под ширину. */
@media(max-width:360px){
  .hero-h1 .h1-a{font-size:24px}
  .hero-h1 .h1-b{font-size:22px}
  .hero-h1 em{font-size:20px}
}
/* ── Выноска: пояснение отделено от продающего текста ─────────────────────────
   .lead-note уже есть в site.css, но линия там 1px цветом --line-soft и без
   подложки — рядом с карточками, у которых своя рамка, она визуально теряется.
   Поднимаем до того вида, который утверждён: 2px акцентом плюс фон-бокс. */
.lead-note{
  border-left:2px solid var(--accent-deep) !important;
  background:var(--bg-soft);
  padding:13px 16px 13px 18px !important;
  border-radius:0 10px 10px 0;
  color:var(--muted) !important;
}

/* ── Логотип: световая волна по знаку + перелив по слову ──────────────────────
   В site.css перелив собран вручную классами .w1-.w7 с разным весом и цветом на
   каждую букву — это статичная имитация градиента, по две штуки на язык. Красим
   контейнер настоящим градиентом и гасим ручную раскраску букв. */
.logo svg{animation:fx-mark-glow 4.2s ease-in-out infinite}
@keyframes fx-mark-glow{
  0%,100%{filter:drop-shadow(0 0 2px rgba(var(--fx-glow),.22))}
  50%{filter:drop-shadow(0 0 12px rgba(var(--fx-glow),.55))}
}
.logo-en,.logo-ru{
  background:linear-gradient(100deg,
    #eafffb 0%, var(--accent) 26%, #ffffff 42%, var(--accent-deep) 60%, #eafffb 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:fx-sweep 6s linear infinite;
}
.logo-ru{animation-delay:.4s;opacity:.92}
.logo-en i,.logo-ru i{color:transparent !important;-webkit-text-fill-color:transparent}
@keyframes fx-sweep{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* ── Прожектор за курсором ────────────────────────────────────────────────────
   Заменяет собой дрейф орбов как ambient первого экрана: тот шёл по таймеру и
   курсора не слышал. Орбы гасим, чтобы на экране не оказалось двух фонов сразу. */
.fx-spot{
  position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .5s var(--ease-out-quint);
  background:radial-gradient(440px circle at var(--fx-x,50%) var(--fx-y,38%),
    rgba(var(--fx-glow),.15), transparent 68%);
}
.fx-spot.on{opacity:1}
.fx-has-spot .hero-orb{opacity:.25}

/* ── Фоновый холст: сеть узлов / сфера из точек ───────────────────────────── */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.9}
.dir-hero{position:relative;overflow:hidden}
.dir-hero .wrap{position:relative;z-index:1}

/* ── Живое сияние вместо плоского фона (страница контента) ───────────────── */
.fx-aurora{position:absolute;inset:-25%;pointer-events:none;z-index:-1;filter:blur(58px);opacity:.34}
.fx-aurora i{position:absolute;display:block;border-radius:50%}
.fx-aurora .b1{width:40%;height:54%;left:26%;top:6%;background:rgba(var(--fx-glow),.5);animation:fx-fl1 15s ease-in-out infinite}
.fx-aurora .b2{width:38%;height:52%;right:6%;top:16%;background:rgba(43,199,172,.4);animation:fx-fl2 19s ease-in-out infinite}
.fx-aurora .b3{width:30%;height:42%;left:36%;bottom:4%;background:rgba(120,180,255,.24);animation:fx-fl3 23s ease-in-out infinite}
@keyframes fx-fl1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(14%,9%) scale(1.16)}}
@keyframes fx-fl2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-12%,11%) scale(.93)}}
@keyframes fx-fl3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,-12%) scale(1.2)}}

/* ── Светящийся край карточки под курсором ────────────────────────────────── */
.dir-card,.card,.svc{position:relative}
.dir-card::after,.card::after,.svc::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  opacity:0;transition:opacity .28s ease;pointer-events:none;
  background:radial-gradient(200px circle at var(--fx-cx,50%) var(--fx-cy,50%),
    rgba(var(--fx-glow),.8), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.dir-card:hover::after,.card:hover::after,.svc:hover::after{opacity:1}

/* ── Магнитная кнопка ─────────────────────────────────────────────────────── */
.btn-primary{transition:transform .3s var(--ease-out-quint), box-shadow .3s ease}
.btn-primary:hover{box-shadow:0 18px 40px -24px rgba(var(--fx-glow),.45)}

/* ── Наклон снимка работ под курсором ─────────────────────────────────────── */
.shot-wrap{transition:transform .2s var(--ease-out-quint);transform-style:preserve-3d;will-change:transform}

/* ── Прайс на главной: колонки вместо ленты на три экрана ─────────────────────
   Было: слева четыре шага, справа одна лента из четырнадцати строк цены, которая
   тянулась на три экрана, пока левая колонка давно кончилась и белела пустотой.
   Три группы цен при этом шли подряд без единого заголовка — где кончается одна
   и начинается другая, читатель не понимал.
   Стало: шаги во всю ширину четвёркой, под ними три подписанные колонки цен. */
#offer .offer{grid-template-columns:1fr;gap:38px}
#offer .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
#offer .steps .step{padding:0 0 0 2px;border:0}
/* Блок цен на 320 px оказывался шире экрана на 58 px и тянул за собой весь
   контейнер (замер 26.08.2026). Прижимаем к ширине родителя. */
#offer .price{position:static;background:none;border:0;box-shadow:none;padding:0;
  width:100%;max-width:100%;box-sizing:border-box;min-width:0}

/* ── Прайс аккордеоном по направлениям ────────────────────────────────────────
   Три колонки цен всё равно читались как перегруженный экран, а цифры терялись:
   мелкий моноширинный на фоне длинных названий. Теперь каждое направление —
   раскрывающийся блок во всю ширину, первый открыт, чтобы цены не оказались
   спрятанными совсем. Внутри строки идут сеткой по две-три в ряд, цена крупная
   и мятная. Раскрытие на нативном <details>: работает без JavaScript. */
.price-acc{display:flex;flex-direction:column;gap:12px}
.pacc{
  background:var(--card);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;
  transition:border-color .25s ease;
}
.pacc[open]{border-color:rgba(94,233,208,.34)}
.pacc-sum{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:18px 20px;user-select:none;
}
.pacc-sum::-webkit-details-marker{display:none}
.pacc-cap{
  font-family:"Unbounded",var(--sans);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(17px,1.6vw,21px);color:var(--text);
}
.pacc-hint{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-left:auto;
}
.pacc-mark{
  width:22px;height:22px;flex:0 0 auto;position:relative;
  border:1px solid var(--line);border-radius:7px;transition:border-color .25s ease;
}
.pacc-mark::before,.pacc-mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transform:translate(-50%,-50%);transition:opacity .2s ease;
}
.pacc-mark::before{width:10px;height:1.5px}
.pacc-mark::after{width:1.5px;height:10px}
.pacc[open] .pacc-mark::after{opacity:0}
.pacc[open] .pacc-mark{border-color:rgba(94,233,208,.45)}
.pacc-body{padding:0 20px 20px}
.pacc-body .price-core{
  background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:10px;
}
.pacc-body .price-row{
  background:rgba(255,255,255,.035);border:1px solid var(--line-soft);border-radius:12px;
  padding:14px 16px !important;margin:0;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  transition:background .2s ease,border-color .2s ease;
}
.pacc-body .price-row:hover{background:rgba(94,233,208,.07);border-color:rgba(94,233,208,.35)}
.pacc-body .price-row .k b{font-size:15.5px}
/* Цифра — главное в строке: крупная, мятная, никогда не переносится. */
.pacc-body .price-row .v{
  font-family:"Unbounded",var(--mono);font-weight:600;font-size:clamp(17px,1.5vw,21px);
  color:var(--accent);white-space:nowrap;padding-left:0;
}
.pacc-body .price-note{grid-column:1/-1;margin:4px 0 0}
@media(max-width:620px){
  .pacc-hint{display:none}
  .pacc-body .price-row{flex-direction:column;align-items:flex-start;gap:6px}
}

@media(max-width:1080px){
  #offer .steps{grid-template-columns:repeat(2,1fr);gap:22px}
  #offer .price-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  #offer .steps{grid-template-columns:1fr;gap:18px}
}

/* ── Ритм страницы: полосы вместо сплошной простыни ───────────────────────────
   Все секции стояли на одном полотне и сливались. Соседние секции теперь
   чередуют подложку --bg / --bg-soft и разделяются волосяной линией. Цвета
   только из :root, никаких размытых пятен на каждой секции. */
main > section{position:relative}
main > #services, main > #offer, main > #picker{background:var(--bg-soft)}
main > section + section{border-top:1px solid var(--line-soft)}

/* Корень «чёрного пятна» слева: карточки направлений гасли градиентом в почти
   чёрный к низу и сливались с полотном. Фон сплошной, граница явная. */
.dir-card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.dir-card:hover{border-color:rgba(94,233,208,.5) !important}

/* ── Строки прайса разделены видимо: каждая услуга — своя плашка на тон светлее
   колонки, а не строка через волосяную линию. На скриншоте линии практически
   сливались с фоном, и услуги читались одной простынёй. */
#offer .price-grid .price-core{padding:20px}
#offer .price-grid .price-row{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  border-radius:12px;
  padding:13px 14px !important;
  margin-bottom:9px;
  transition:background .2s ease, border-color .2s ease;
}
#offer .price-grid .price-row:last-of-type{margin-bottom:0}
#offer .price-grid .price-row:hover{background:rgba(94,233,208,.07);border-color:rgba(94,233,208,.35)}
/* В колонке 300px название и цена в одной строке начинают ломаться на два слова —
   ужимаем кегль, чтобы «Один процесс под ключ» держался строкой. */
#offer .price-grid .price-row .k b{font-size:15px}
#offer .price-grid .price-row .v{font-size:13.5px;padding-left:10px}

/* ── Карточки услуг на страницах направлений ──────────────────────────────────
   Приём «значок и заголовок одной строкой» был написан только под #services на
   главной, а внутренние страницы кладут карточки в .bento без id — туда правило
   не доставало, и справа от значка оставалась пустая полоса, а заголовок падал
   под него. Повторяем ту же раскладку. */
.bento .card-core:has(> .card-ico){
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-content:start;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  padding:20px 20px 18px;
}
.bento .card-core:has(> .card-ico) > *{grid-column:1/-1}
.bento .card-core > .card-ico{
  grid-column:1;grid-row:1;width:46px;height:46px;border-radius:13px;margin:0;align-self:center;
}
.bento .card-core > .card-ico svg{width:24px;height:24px}
.bento .card-core:has(> .card-ico) > h3{grid-column:2;grid-row:1;margin:0;line-height:1.28;align-self:center}
.bento .card-core:has(> .card-ico) > p{grid-row:2;margin-top:14px}
.bento .card-core:has(> .card-ico) > .card-more{grid-row:3;justify-self:start}
.bento .card-core:has(> .card-ico) > .price-tag{grid-row:4}
.bento .card-core:has(> .card-ico) > .out{grid-row:5;margin-top:0 !important}
.bento .card:hover .card-core{border-color:rgba(94,233,208,.45)}

/* На узком экране фоновый холст уходит: сфера и сеть ложатся прямо под текст,
   а читаемость важнее фона. Прожектор на телефоне и так не срабатывает —
   он живёт от курсора. Сияние остаётся, но приглушённым. */
@media (max-width:820px){
  .fx-canvas{display:none}
  .fx-aurora{opacity:.22}
}

@media (prefers-reduced-motion:reduce){
  .logo svg,.logo-en,.logo-ru,.fx-aurora i{animation:none}
  .fx-spot,.fx-canvas,.fx-aurora{display:none}
  .fx-has-spot .hero-orb{opacity:1}
  .btn-primary,.shot-wrap{transition:none}
}

/* ── Разряды в ценах видно ────────────────────────────────────────────────
   26.08.2026. Разряды и так отбиты неразрывным пробелом, но в Manrope при
   кегле цен он занимает всего ~3,4 px: замер показал разницу «119000» → «119 000»
   в 3,39 px, и цифры читаются слитно. Заказчик работы дважды написал, что цены
   сливаются, — и был прав, хотя формально пробел стоял.
   Лечим не символом, а межсловным интервалом: он влияет только на пробелы,
   поэтому сами цифры не разъезжаются. Перенос по-прежнему невозможен —
   неразрывный пробел остаётся в разметке. */
.price-tag,
.price-row .v,
.dir-price,
.hero-meta b{word-spacing:.18em}

/* ── Карточки одного ряда — одной высоты ──────────────────────────────────
   26.08.2026, замер: в блоке разовых работ разброс высот доходил до 24 px, и
   нижние плашки стояли на разной линии. Человек читает это как небрежность,
   даже не понимая, что именно не так. Тянем карточку и её внутренний блок на
   всю высоту ячейки — тогда низ выравнивается независимо от длины текста. */
.bento>.card,
#oneoff .bento>.card{align-self:stretch;display:flex;flex-direction:column}
.bento>.card>.card-core{flex:1 1 auto}

/* ── Появление карточек: без разбега внутри ряда ──────────────────────────
   26.08.2026, аудит: во время прокрутки соседние карточки одного ряда
   разъезжались на 8–9 px и отличались по яркости — просто потому, что были в
   разных фазах анимации. Формально «так задумано», фактически человек видит
   кривой ряд. Внутри сеток появление синхронное: ряд выезжает целиком. */
.bento>.card,
.dir-grid>.dir-card,
.svc-grid>.svc{transition-delay:0s !important}

/* ── Этапы «Как работаем» одной высоты ────────────────────────────────────
   Разница между этапами доходила до 120 px, и низ блока выглядел рваным.
   Раскладываем в сетку с равными строками — тогда рамки-разделители стоят
   ровно, независимо от длины описания. */
/* Раскладка этапов задаётся правилом #offer .steps выше. */

/* ── Цели для пальца не меньше 44 px ──────────────────────────────────────
   Верхняя кнопка была 41 px, пункты меню на 320 px сжимались до 39 px.
   Это ниже общепринятого минимума: палец промахивается. */
.btn,.btn-primary,.pacc-sum,.dir-more,.prodreel-btn,.card-more,
.nav-links a,.menu a,.mobile-menu a,
.logo,.nav-cta,#termnext{min-height:44px}
.nav-links a,.menu a,.mobile-menu a,.logo,.nav-cta,#termnext,.card-more{display:inline-flex;align-items:center}

/* ── Нижняя плашка карточки прижата к низу ────────────────────────────────
   26.08.2026, замер аудита подтверждён своим: внешние границы карточек в ряду
   равны, а служебные плашки внутри стояли на разной высоте — расхождение до
   70 px в автоматизации и 234 px в трейдинге. Справа от короткой карточки
   получалась пустая дыра. Тянем содержимое, плашку прижимаем к низу — тогда
   ряд читается как ряд, а не как случайный набор. */
.bento>.card{display:flex;flex-direction:column}
.bento>.card>.card-core{flex:1 1 auto}
.bento>.card>.card-core:not(:has(> .card-ico)){display:flex;flex-direction:column}
/* Отступ сверху у плашки задан в site.css числом (14px) и перебивал прижатие —
   поэтому auto здесь с приоритетом: плашка обязана стоять внизу карточки. */
.bento>.card>.card-core>.out,
.bento>.card>.out{margin-top:auto !important}

/* ── Нижняя граница читаемости на телефоне ────────────────────────────────
   26.08.2026: аудит нашёл подписи 10,5–11,5 px, которые я объявил поднятыми, —
   моя прежняя проверка их не видела, потому что смотрела только на элементы
   без вложенных тегов. Здесь перечислены все оставшиеся классы: служебные
   плашки карточек, кикеры секций, метки терминала, подписи виджетов.
   12 px — нижняя граница, ниже которой текст на телефоне разглядывают,
   а не читают. */
@media(max-width:640px){
  .tag,.term-title,.live,.eyebrow,.ok,.out,.formula,.lbl,
  .prodreel-label,#termnext{font-size:12px !important;line-height:1.5}
  /* 08.09: аудит нашёл ещё один пропущенный слой — три буллета пользы
     в консоли первого экрана главной рендерились 10px, лейбл «ПОЛЬЗА» 9px,
     подпись и кнопки управления 9-10px. Это не декор, а текст, который
     читают. Тот же порог 12px. */
  .forge-log,.forge-console-head small,
  .forge-controls .forge-status,
  .forge-controls button{font-size:12px !important;line-height:1.5}
}

/* ── Этапы не вылезают за экран на узких телефонах ────────────────────────
   26.08.2026: на 375 px блок «Как работаем» уходил вправо на 3 px и обрезался.
   Причина обычная для сеток: элемент по умолчанию не может стать уже своего
   содержимого, и длинное слово распирает колонку. Разрешаем сжатие и перенос. */
/* Замер 26.08.2026: на 375 px сетка этапов оказывалась на 19 px шире своего
   контейнера (362 против 343) и вылезала за экран на 3 px. Ограничиваем её
   шириной родителя и разрешаем колонкам сжиматься. */
#offer .steps{width:100%;max-width:100%;box-sizing:border-box}
#offer .steps,#offer .steps .step,#offer .steps .step>*{min-width:0}
#offer .steps .step{overflow-wrap:anywhere;box-sizing:border-box;max-width:100%}

/* ── Свёрнутый вид длинных карточек на страницах направлений ──────────────
   Обрезка на четыре строки: видно, о чём карточка, а юридические оговорки и
   подробности раскрываются кнопкой. Правило зеркалит поведение главной, где
   такое сворачивание уже работало. */
#works .card.has-more .card-core p,
#oneoff .card.has-more .card-core p{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
#works .card.has-more.open .card-core p,
#oneoff .card.has-more.open .card-core p{-webkit-line-clamp:unset;overflow:visible}

/* ── Один ритм у всех прайсов на телефоне ─────────────────────────────────
   26.08.2026, аудит: «часть цен справа от названия, часть переносится вниз,
   строки собраны по разным правилам». Так и было: прайс на главной свёрстан
   как аккордеон (.pacc-body .price-row) и на узком экране уходил в колонку,
   а прайсы страниц направлений — обычные строки с переносом по месту.
   Приводим к одному: на телефоне название сверху, цена под ним, всегда. */
@media(max-width:620px){
  /* Контейнер прайса не давал строкам сжиматься: на 320 px строка получалась
     320 px при родителе 246 и вылезала за экран на 37 px (замер 26.08.2026).
     Сжатие в сетках и флексах запрещено по умолчанию — разрешаем явно. */
  .price-core,.price-grid,.pacc-body{min-width:0;max-width:100%;box-sizing:border-box}
  .price-core>*,.price-grid>*{min-width:0;max-width:100%}
  .price-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex-wrap:nowrap;
    box-sizing:border-box;max-width:100%;min-width:0;width:100%}
  .price-row .v{padding-left:0;white-space:nowrap}
  /* Название переносится по словам: на 320 px длинная строка иначе распирает
     прайс на 37 px за экран (замер 26.08.2026). Цена остаётся неразрывной. */
  .price-row .k{width:100%;min-width:0;overflow-wrap:anywhere}
  .price-row .k b,.price-row .k span{overflow-wrap:anywhere}
}

/* 320-380 px: кнопка из шапки наезжала на логотип, а бургер сжимался с 48 до
   39 px (аудит 26.08.2026). Действие живёт в мобильном меню (.mm-cta), в шапке
   остаются знак и бургер. Блок стоит в самом конце файла намеренно: выше
   `.nav-links a,...,.nav-cta{display:inline-flex}` задаёт тот же display с той же
   специфичностью, и любое правило до него проигрывает по порядку. */
@media(max-width:380px){
  .nav-cta{display:none}
  .logo{overflow:hidden}
  .logo-lock{min-width:0}
}
/* Кнопка внутри мобильного меню наследовала inline-flex от общего правила выше
   и вставала в строку рядом с последней ссылкой — на 320 и 360 px по-разному
   (аудит 26.08.2026). Своя строка во всю ширину панели. */
/* И сами пункты меню: от того же inline-flex «Как работаем» и «Вопросы»
   вставали в одну строку, а остальные шли столбиком — ритм рвался. */
.mobile-menu a{display:flex;width:100%}
.mobile-menu .mm-cta{display:flex;width:100%}