/* ============================================================
   LMX Performance — Product pages stylesheet v3
   Visual language = main page (styles.css) extended.
   Shared by: service-bot.html, service-web.html, service-design.html
   ============================================================ */

:root{
  --ink:        #000000;
  --heading:    #1a1a1a;
  --ink-70:     #4d4d4d;
  --ink-45:     #7a7a7a;
  --line:       #e2e2e2;
  --line-soft:  #ececec;
  --paper:      #ffffff;
  --paper-off:  #fafafa;
  --code-bg:    #f0f0f0;
  --code-dim:   #a8a8a8;
  --code-bright:#1a1a1a;
  --max:        1360px;
  --gut:        clamp(20px, 4vw, 64px);
  /* раунд 24 — цвет кнопок: на светлой теме тёмно-серый, не чёрный ◄◄◄ */
  --btn-bg:     #161616;
}
html[data-theme="dark"]{
  --ink:        #ffffff;
  --heading:    #f2f2f2;
  --ink-70:     #c7c7c7;
  --ink-45:     #8f8f8f;
  --line:       #333333;
  --line-soft:  #2a2a2a;
  --paper:      #161616;
  --paper-off:  #1e1e1e;
  --code-bg:    #222222; /* раунд 24 — дивайдер чуть светлее фона, как на светлой теме */
  --code-dim:   #6e6e6e;
  --code-bright:#e6e6e6;
  --btn-bg:     #ffffff;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scrollbar-gutter:stable; } /* без сдвига при появлении/скрытии скроллбара */
body{
  font-family:'Raleway', -apple-system, sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
  transition:background .3s ease, color .3s ease;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gut); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
@media(prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ── NAV ── identical to main ─────────────────────────────── */
.nav{ padding:22px 0; border-bottom:1px solid var(--line-soft); }
.nav .wrap{ display:flex; align-items:center; justify-content:center; gap:clamp(24px, 4vw, 56px); position:relative; }
.nav-links-left,
.nav-links-right{ display:flex; align-items:center; gap:clamp(20px, 3vw, 40px); font-size:17.5px; font-weight:500; }
.nav-links-left a,
.nav-links-right a{ display:inline-flex; align-items:center; position:relative; opacity:.82; transition:opacity .2s ease; }
.nav-links-left a:hover,
.nav-links-left a:focus-visible,
.nav-links-right a:hover,
.nav-links-right a:focus-visible{ opacity:1; }
.nav-logo{ display:flex; align-items:center; }
.nav-logo img{ height:33px; width:auto; display:block; } /* десктоп = мобайл (33px) ◄◄◄ */

.nav-toggle{ display:none; grid-column:3; justify-self:end; width:26px; height:20px; border:none; background:none; cursor:pointer; position:relative; padding:0; transition:transform .15s ease; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:0; right:0; height:1.5px; background:var(--ink); }
.nav-toggle span{ top:9px; }
.nav-toggle span::before{ top:-9px; }
.nav-toggle span::after{ top:9px; }
/* раунд 16 — крестик убран, кнопка всегда три полоски; лёгкое "нажатие" вместо анимации иконки */
.nav-toggle:active{ transform:scale(.82); }

@media(max-width:768px){
  .nav-links-left,
  .nav-links-right{ display:none; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .nav-logo img{ height:33px; } /* раунд 23 — −10% ◄◄◄ */
  /* раунд 22 — лого по центру, бургер справа (absolute, не двигает лого) ◄◄◄ */
  .nav .wrap{ justify-content:center; gap:0; }
  .nav-toggle{ position:absolute; right:var(--gut); top:50%; margin-top:-10px; }
  /* раунд 22 — выпадающее меню как на главной: левый список (Продукты,
     Кейсы) сверху, правый (Процесс, Контакты) сразу под ним. Раньше оба
     списка стояли в одной точке и правый перекрывал левый. */
  .nav.nav-open .nav-links-left,
  .nav.nav-open .nav-links-right{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; background:var(--paper); gap:16px; font-size:17.5px; font-weight:500; }
  .nav.nav-open .nav-links-left a,
  .nav.nav-open .nav-links-right a{ line-height:24px; }
  .nav.nav-open .nav-links-left{ padding:20px var(--gut) 8px; z-index:22; }
  /* 20 padding + 2 строки по 24px + 2 gap по 16px */
  .nav.nav-open .nav-links-right{ padding:calc(20px + 24px * 2 + 16px * 2) var(--gut) 28px; z-index:20; }
  /* раунд 22 — нижняя граница меню = дивайдер с бегущей строкой
     (элемент создаёт site.js, top считается там же) */
  .nav.nav-open .nav-menu-divider{ display:block; position:absolute; left:0; right:0; z-index:24; }

  .nav{ position:relative; }
  /* .wrap уже relative — бургер позиционируется от него */
}

/* ── TERMINAL DIVIDER ── identical to main ────────────────── */
.term-divider{ background:var(--code-bg); transition:background .3s ease; overflow:hidden; height:16px; } /* 16px, как в styles.css ◄◄◄; к целому пикселю подтягивает site.js (5b) */
.nav-menu-divider{ display:none; } /* дивайдер-низ мобильного меню */
.term-inner{ display:flex; align-items:center; height:100%; line-height:16px; white-space:nowrap; font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.02em; color:var(--code-dim); padding:0 var(--gut); overflow:hidden; position:relative; }
/* .term-run — текст и курсор в одной обёртке, двигаются как одно целое,
   поэтому курсор всегда упирается ровно в правый отступ (см. styles.css) */
.term-run{ display:inline-flex; align-items:center; will-change:transform; }
.term-text{ display:inline-block; white-space:nowrap; }
.term-text .hi{ color:var(--code-bright); font-weight:500; }
.term-cur{ display:inline-block; flex-shrink:0; width:8px; height:1em; background:var(--code-bright); margin-left:2px; vertical-align:middle; animation:blink 1.3s step-end infinite; }
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* ── HERO ── theme-aware, left-aligned, with product image ── */
.hero{
  background:var(--paper);
  padding:clamp(56px, 10vw, 96px) 0 clamp(48px, 8vw, 80px);
  border-bottom:1px solid var(--line-soft);
}
/* раунд 24 — контейнер для расчёта размера иконки (cqi = ширина контента без скроллбара) */
.hero .wrap{ container-type:inline-size; }
.hero-inner{
  display:grid;
  /* раунд 24 — текст занимает свою ширину, а картинка стоит по центру
     оставшегося места: отступ от текста до картинки = отступу от картинки
     до правого края контейнера ◄◄◄ */
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:0;
  /* вертикальный отступ между картинкой и текстом на мобиле — как было ◄◄◄ */
  row-gap:clamp(32px, 5vw, 72px);
}
.hero-visual{ justify-self:center; }
.hero-text{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(18px, 2.8vw, 28px); }
.hero-title{ font-size:clamp(34px, 6vw, 76px); font-weight:800; letter-spacing:-.03em; line-height:1.02; color:var(--heading); max-width:16ch; }
.hero-sub{ font-size:clamp(15px, 1.7vw, 20px); font-weight:500; color:var(--ink-70); line-height:1.65; max-width:48ch; }
/* та же визуальная логика, что у .svc-more на главной: Raleway,
   чёрная заливка ⇄ инверсия при ховере, лёгкий подъём */
.hero-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  padding:15px 28px; border:1px solid var(--btn-bg); border-radius:999px;
  font-size:16px; font-weight:600; letter-spacing:.02em; /* = .discuss-link */
  color:var(--paper); background:var(--btn-bg);
  font-family:'Raleway', -apple-system, sans-serif;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.hero-cta:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }

.hero-visual{
  /* раунд 24 — размер = иконке в «Что мы делаем?» на главной:
     ширина карточки (1/3 контейнера минус зазоры) × 64%, пропорция 4:3 ◄◄◄ */
  width:calc((100cqi - 32px) / 3 * 0.64);
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.hero-visual svg{ width:100%; height:100%; color:var(--ink-45); }
.hero-visual img{ width:100%; height:100%; object-fit:contain; }

@media(max-width:768px){
  /* раунд 23 — мобайл: картинка, заголовок и кнопка по центру;
     подзаголовок — блоком по центру страницы, но строки внутри
     выровнены по левому краю ◄◄◄ */
  .hero-inner{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-text{ align-items:center; }
  /* ширина не фиксирована: подзаголовок занимает всю доступную ширину,
     затем site.js (раздел 8) сужает блок ровно до самой длинной строки —
     блок встаёт по центру, а строки внутри идут от одного левого края */
  .hero-sub{ text-align:left; max-width:none; }
  .hero-visual{
    display:flex;
    /* раунд 24 — = главной на мобиле: 40% ширины контейнера, 4:3 ◄◄◄ */
    width:calc(100cqi * 0.4);
    aspect-ratio:4/3;
    order:-1;
    margin:0 auto;
  }
}

/* ── SECTIONS ── identical rhythm to main ─────────────────── */
.section{ padding:clamp(56px, 9vw, 104px) 0; border-bottom:1px solid var(--line-soft); }
.section:last-of-type{ border-bottom:none; }
/* раунд 23 — «Цены» и «Другие продукты»: от верхнего дивайдера до
   заголовка в 2 раза меньше (было clamp(56px, 9vw, 104px)) ◄◄◄ */
.term-divider + .section{ padding-top:clamp(28px, 4.5vw, 52px); }
.section-title{ font-size:clamp(24px, 3.2vw, 36px); font-weight:800; letter-spacing:-.02em; color:var(--heading); margin-bottom:clamp(24px, 3.6vw, 40px); }

/* ── SPECS ── «точечный лидер»: подпись слева, значение справа —
   по выбору из specs-variants.html (вариант 04). Каждая строка при
   наведении заливается ярко-белым с тёмным текстом (тот же приём, что
   у .other-card) — захардкожено, не завязано на тему.
   Раунд 8 — убрана пунктирная линия-лидер (расположение то же).
   Раунд 9 — блок больше не отдельная секция с заголовком «Характеристики»:
   стоит сразу под .pricing-grid внутри той же секции «Цены» (без
   дивайдера между ними, чтобы связь была видна), и содержимое теперь
   динамическое — меняется в зависимости от того, на какой тариф
   наведён курсор/тап (см. «7. Характеристики тарифа» в site.js).
   border-top играет роль тонкого разделителя вместо дивайдера. */
.specs-grid{ border-top:1px solid var(--line); margin-top:clamp(20px, 3vw, 32px); }
/* раунд 13 — ховер-заливка строки убрана по прямой просьбе («технологии,
   интеграции, личный кабинет — пусть будут статичного цвета, без
   подсвечивания»). Строка больше не реагирует на наведение. */
.spec-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:16px clamp(4px, 1.5vw, 12px);
  border-bottom:1px solid var(--line);
}
.spec-label{
  font-size:14px;
  font-weight:500;
  color:var(--ink-45);
  white-space:nowrap;
}
.spec-leader{
  flex:1;
}
.spec-value{
  font-family:'JetBrains Mono', monospace;
  font-size:14.5px;
  font-weight:600;
  color:var(--heading);
  white-space:nowrap;
}
@media(max-width:640px){
  .spec-item{ flex-wrap:wrap; }
  .spec-leader{ display:none; }
  .spec-label{ width:100%; }
}

/* ── PRICING ── same grid as main services section ─────────── */
.pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
/* точки-индикаторы карусели тарифов (раунд 11) — существуют в разметке
   (вставляются JS, см. site.js) на любой ширине, но видны только в
   мобильной карусельной раскладке ниже */
.plan-dots{ display:none; }
@media(max-width:768px){
  /* раунд 11 — вертикальный список карточек заменён на горизонтальный
     swipe-слайдер: раньше при вертикальной раскладке было не видно, что
     карточки вообще меняют характеристики под ценами при переключении.
     Теперь центральная (featured) карточка показана целиком, соседние
     чуть выглядывают из-за края экрана (подсказка, что можно свайпнуть),
     точки под слайдером показывают позицию — та же логика выбора тарифа
     (.plan-selected + характеристики), что и на десктопе по ховеру,
     здесь срабатывает по тому, какая карточка остановилась в центре
     после свайпа (см. site.js, раздел 7). Полноширинный (full-bleed)
     приём — тот же, что у .filters-wrap на главной. */
  .pricing-grid{
    display:flex;
    gap:14px;
    background:none;
    border:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:12vw;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:4px 12vw 20px;
  }
  .pricing-grid::-webkit-scrollbar{ display:none; }
  .plan{
    flex:0 0 76vw;
    scroll-snap-align:center;
    border:1px solid var(--line);
  }
  /* нет ховера на тач-устройствах — подъём с тенью (раунд 10) здесь не
     нужен и мог бы залипнуть визуально после тапа, поэтому отключаем */
  .plan:hover{ transform:none; box-shadow:none; }

  .plan-dots{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:-8px; margin-bottom:clamp(28px, 4vw, 40px); }
  .plan-dot{ width:7px; height:7px; border-radius:999px; background:var(--line); transition:width .25s ease, background .25s ease; cursor:pointer; }
  .plan-dot.active{ width:20px; background:var(--ink); }

  /* нет ховера на тач-экранах — кнопка "Заказать" видна сразу, в виде
     первой ступени (см. .plan-cta ниже) — вторая ступень (обводка)
     на тач-устройствах просто недостижима, и это нормально */
  /* !important — эта медиа-секция раньше по файлу, чем базовое правило
     .plan-cta{opacity:0...}, а без !important source-order отдаёт победу
     более позднему базовому правилу даже внутри подходящего вьюпорта */
  .plan-cta{ opacity:1 !important; visibility:visible !important; }
}

/* раунд 10 — заливка карточки больше не завязана на статичный .featured,
   а полностью управляется динамическим .plan-selected (наведение/тап,
   см. «7. Характеристики тарифа» в site.js): какая карточка выбрана —
   та и тёмная (var(--ink)/var(--paper) уже инвертируются по теме сами,
   поэтому логика одинакова на светлой и тёмной теме). .featured остаётся
   в разметке только как метка тарифа «по умолчанию» для JS. Ховер даёт
   тот же лёгкий подъём с тенью, что у .case-card на странице кейсов —
   отдельно от смены заливки, которая приходит вместе с .plan-selected. */
.plan{ background:var(--paper); padding:clamp(28px, 4vw, 48px) clamp(22px, 3vw, 36px); display:flex; flex-direction:column; gap:20px; transition:background .25s, transform .2s ease, box-shadow .2s ease; }
.plan:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.16); z-index:3; }
/* раунд 20 — подсветка помягчена: не чистый var(--ink),
   а насыщенный ~70% серый для светлой темы /
   полупрозрачный тёмный для тёмной — мягкий акцент,
   не "black ink" без компромиссов */
/* раунд 21 — белый 70%: на светлой теме — светло-серый фон; чёрный текст остаётся читаемым */
/* раунд 22 — один цвет на обеих темах, ровно как ховер у «Другие
   продукты» (.other-card:hover) — без полупрозрачного варианта для
   тёмной темы, который смотрелся блёкло */
.plan.plan-selected{ background:#ebebeb; }
.plan.plan-selected *{ color:#1a1a1a !important; }
/* раунд 11 — было захардкожено на белый (rgba(255,255,255,.4)), из-за
   чего буллеты пропадали именно там, где выбранная карточка сама
   становится светлой (var(--ink) равен белому в тёмной теме) — на белом
   фоне белый буллет не виден. var(--paper) следует той же инверсии, что
   и текст карточки (.plan.plan-selected *{color:var(--paper)}), поэтому
   буллет всегда того же цвета, что и текст рядом с ним. */
.plan.plan-selected .plan-feat li::before{ background:#1a1a1a; opacity:.4; }

.plan-name{ font-size:24px; /* = .svc-name / .other-name */ font-weight:800; letter-spacing:-.02em; color:var(--heading); }
.plan-price{ font-family:'JetBrains Mono', monospace; font-size:clamp(23px, 3.2vw, 34px); font-weight:700; letter-spacing:-.02em; color:var(--heading); }
.plan-price span{ font-family:'Raleway', -apple-system, sans-serif; font-size:13px; font-weight:500; opacity:.5; }
.plan-desc{ font-size:14.5px; /* = .step-desc */ color:var(--ink-45); line-height:1.65; }
/* раунд 23 — описание всегда занимает минимум 3 строки: тексты разной
   длины не сдвигают кнопки «Заказать», они у всех карточек на одной линии ◄◄◄ */
.plan-desc{ min-height:calc(1.65em * 3); }
.plan-feat{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.plan-feat li{ font-size:14px; color:var(--ink-70); line-height:1.5; padding-left:16px; position:relative; }
.plan-feat li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--ink-45); }
/* pill-кнопка — тот же единый язык, что у .hero-cta/.discuss-link:
   постоянная контрастная обводка var(--ink), по умолчанию залита
   var(--ink)/var(--paper), при ховере заливка и текст просто меняются
   местами (обводка остаётся, теперь она и создаёт контраст). margin-top:auto
   в .plan (flex-column) прижимает кнопку к низу карточки независимо от
   длины описания — grid уравнивает высоту всех карточек в ряду, так что
   кнопки у всех тарифов оказываются на одном уровне. Кнопка скрыта по
   умолчанию и появляется по наведению на карточку (как .svc-more на
   главной) — на сенсорных экранах (нет ховера) показана всегда, см.
   медиа-запрос выше. Клик открывает форму заявки с уже подставленным
   названием тарифа (data-lead-open, см. assets/js/site.js). */
.plan-cta{
  margin-top:auto;
  align-self:stretch; /* раунд 25 — снова на всю ширину карточки ◄◄◄ */
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; /* = «Подробнее» */
  border:1px solid var(--btn-bg); border-radius:999px;
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:16px; font-weight:600; letter-spacing:.02em; /* = все кнопки */
  background:var(--btn-bg); color:var(--paper);
  cursor:pointer;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.plan-cta:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
.plan:hover .plan-cta,
.plan:focus-within .plan-cta,
.plan.plan-selected .plan-cta{ opacity:1; visibility:visible; } /* раунд 25 — на выбранной карточке кнопка видна всегда */

/* выбранная (тёмная) карточка — .plan.plan-selected *{color:var(--paper)!important}
   выигрывает по важности над обычным правилом, поэтому важность нужна
   и здесь: изначально белая заливка/чёрный текст (инверсия обычной),
   при ховере — чёрная заливка/белый текст */
/* раунд 22 — выбранная карточка светлая (#ebebeb) на любой теме, поэтому
   кнопка на ней всегда чёрная с белым текстом; ховер — инверсия.
   Невыбранная карточка следует теме: на тёмной — белая кнопка, на светлой —
   чёрная (var(--ink)/var(--paper), правило .plan-cta выше). */
.plan.plan-selected .plan-cta{ border-color:#161616 !important; background:#161616 !important; color:#fff !important; }
.plan.plan-selected .plan-cta:hover{ background:transparent !important; color:#161616 !important; }
/* раунд 24 — полная инверсия на светлой теме: выбранная карточка тёмно-серая
   (цвет фона тёмной темы), текст белый, кнопка белая; ховер кнопки — обратно.
   На тёмной теме остаётся как было: светлая карточка, тёмный текст и кнопка ◄◄◄ */
html:not([data-theme="dark"]) .plan.plan-selected{ background:#161616; }
html:not([data-theme="dark"]) .plan.plan-selected *{ color:#ffffff !important; }
html:not([data-theme="dark"]) .plan.plan-selected .plan-desc{ color:rgba(255,255,255,.7) !important; }
html:not([data-theme="dark"]) .plan.plan-selected .plan-cta{ border-color:#ffffff !important; background:#ffffff !important; color:#161616 !important; }
html:not([data-theme="dark"]) .plan.plan-selected .plan-cta:hover{ background:transparent !important; color:#ffffff !important; }

/* ── DISCUSS ── exact copy from main ──────────────────────── */
.discuss{ background:var(--paper); padding:clamp(48px, 7vw, 72px) 0; }
/* раунд 9 — «Другие продукты» и «Готовы обсудить проект» поменялись
   местами (теперь «Другие продукты» идёт первым) и сближены — по
   просьбе пользователя, чтобы они читались «плюс-минус в одном месте».
   Уменьшены только отступы между этими двумя конкретными блоками,
   остальная вертикальная сетка страницы (следующая секция/подвал) не
   тронута. */
/* раунд 10 — по просьбе убран разделитель между блоками (наследовался от
   .section) и отступ между ними увеличен вдвое относительно раунда 9 */
.section-other-products{ padding-bottom:clamp(16px, 4vw, 40px); border-bottom:none; }
.discuss-close{ padding-top:clamp(16px, 4vw, 40px); }
/* раунд 23 — подложка внутри уголков = фон «Как мы работаем?» на главной */
.discuss-card{ background:#eeeeee; transition:background .3s ease; }
html[data-theme="dark"] .discuss-card{ background:#202020; }
.discuss-card{ border:none; border-radius:16px; padding:clamp(40px, 5.5vw, 64px) clamp(28px, 4vw, 56px); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px; position:relative; }
.discuss-card::before{ content:''; position:absolute; top:-3px; left:-3px; width:36px; height:36px; border-top:3px solid var(--ink); border-left:3px solid var(--ink); border-radius:16px 0 0 0; pointer-events:none; }
.discuss-card::after{ content:''; position:absolute; bottom:-3px; right:-3px; width:36px; height:36px; border-bottom:3px solid var(--ink); border-right:3px solid var(--ink); border-radius:0 0 16px 0; pointer-events:none; }
.discuss-title{ font-size:clamp(24px, 3.2vw, 36px); /* = .section-title */ font-weight:800; letter-spacing:-.02em; color:var(--heading); max-width:22ch; }
.discuss-links{ display:flex; flex-direction:column; gap:12px; }
.discuss-link{ display:inline-flex; align-items:center; justify-content:center; gap:0; padding:15px 28px; /* = «Подробнее» ◄◄◄ */ border:1px solid var(--btn-bg); border-radius:999px; font-size:16px; font-weight:600; font-family:'Raleway', -apple-system, sans-serif; background:var(--btn-bg); color:var(--paper); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; }
.discuss-link:hover{ background:var(--paper); color:var(--ink); transform:translateY(-2px); }
.discuss-link svg{ width:15px; height:15px; flex-shrink:0; }
/* Стек «Готовы обсудить проект» — центрируем контент, только когда
   заголовок и кнопки уже перестроились друг под другом (flex-wrap),
   как на главной (см. styles.css) — на страницах продуктов этой правки
   раньше не было, из-за чего блок выглядел «не отцентрованным». */
@media(max-width:682px){
  .discuss-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .discuss-title{ max-width:none; }
}

/* ── LEAD MODAL (Оставить заявку) ── exact copy from main ─── */
body.lead-modal-open{ overflow:hidden; }
.lead-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; visibility:hidden; opacity:0; transition:opacity .25s ease, visibility 0s linear .25s; }
.lead-modal.open{ visibility:visible; opacity:1; transition:opacity .25s ease, visibility 0s linear; }
.lead-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); cursor:pointer; }
.lead-modal-box{ position:relative; background:var(--paper); border-radius:20px; padding:clamp(28px, 4vw, 44px); max-width:440px; width:100%; max-height:88vh; overflow-y:auto; transform:translateY(12px) scale(.98); transition:transform .25s ease; }
.lead-modal.open .lead-modal-box{ transform:translateY(0) scale(1); }
.lead-modal-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border:none; background:none; font-size:22px; line-height:1; color:var(--ink-45); cursor:pointer; transition:color .2s ease; }
.lead-modal-close:hover{ color:var(--ink); }
.lead-modal-title{ font-size:clamp(20px, 2.6vw, 26px); font-weight:800; letter-spacing:-.02em; color:var(--heading); margin-bottom:8px; padding-right:24px; }
.lead-modal-sub{ font-size:14px; color:var(--ink-45); line-height:1.5; margin-bottom:24px; }
.lead-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:13px; font-weight:600; color:var(--ink-70); }
.lead-field input, .lead-field textarea{ font-family:'Raleway', -apple-system, sans-serif; font-size:14px; font-weight:500; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 14px; background:var(--paper); resize:vertical; transition:border-color .2s ease; }
.lead-field input:focus, .lead-field textarea:focus{ outline:none; border-color:var(--ink); }
.lead-check{ display:flex; align-items:flex-start; gap:10px; font-size:12.5px; line-height:1.5; color:var(--ink-45); margin-bottom:22px; cursor:pointer; }
.lead-check input{ margin-top:3px; flex-shrink:0; width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.lead-check a{ color:var(--ink-70); border-bottom:1px solid var(--line); }
.lead-check a:hover{ color:var(--ink); }
.lead-honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead-submit{ display:inline-flex; align-items:center; justify-content:center; width:100%; padding:14px 26px; border:1px solid var(--btn-bg); border-radius:999px; background:var(--btn-bg); color:var(--paper); font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:600; letter-spacing:.02em; cursor:pointer; transition:background .2s ease, color .2s ease, opacity .2s ease; }
.lead-submit:hover{ background:var(--paper); color:var(--ink); }
.lead-submit:disabled{ opacity:.5; cursor:default; }
.lead-status{ margin-top:14px; font-size:13px; line-height:1.5; color:var(--ink-70); min-height:1em; text-align:center; }
.lead-status.err{ color:#c0392b; }
.lead-status.ok{ color:#1a7a3e; }
@media(max-width:480px){ .lead-modal{ padding:12px; } .lead-modal-box{ border-radius:16px; padding:28px 20px; } }

/* ── OTHER PRODUCTS ─────────────────────────────────────────── */
.other-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media(max-width:540px){ .other-grid{ grid-template-columns:1fr; } }
.other-card{ position:relative; background:var(--paper); padding:clamp(28px, 4vw, 48px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; transition:background .2s ease, color .2s ease; }
/* раунд 10 — было захардкожено #fff/#111, из-за чего на светлой теме
   ховер был не виден (фон карточки и так белый). Теперь через
   var(--ink)/var(--paper) — та же логика инверсии, что у .plan, работает
   одинаково в обеих темах. */
/* раунд 21 — белый 70% вместо чёрного, в тон с выбранной карточкой тарифа */
.other-card:hover{ background:#ebebeb; }
.other-card:hover .other-name{ color:#1a1a1a; }
.other-card:hover .other-hint{ color:rgba(0,0,0,.55); }
.other-name{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--heading); transition:color .2s ease; }
.other-hint{ font-family:'JetBrains Mono', monospace; font-size:15px; font-weight:500; letter-spacing:-.01em; color:var(--ink-45); transition:color .2s ease; }

/* раунд 24 — инверсия на светлой теме: при наведении плитка тёмно-серая
   (цвет фона тёмной темы), текст и стрелка белые. На тёмной теме остаётся
   светлая плитка с тёмным текстом ◄◄◄ */
html:not([data-theme="dark"]) .other-card:hover{ background:#161616; }
html:not([data-theme="dark"]) .other-card:hover .other-name{ color:#ffffff; }
html:not([data-theme="dark"]) .other-card:hover .other-hint{ color:rgba(255,255,255,.6); }
html:not([data-theme="dark"]) .other-card:hover .case-arrow{ color:#ffffff; }


/* стрелка в правом верхнем углу — тот же приём, что у .case-card на
   странице кейсов (styles.css), продублировано здесь: страницы продуктов
   не подключают styles.css. Раунд 10 — размер увеличен в 1.5 раза
   (26px → 39px) здесь и там же, в styles.css. Раунд 11 — mix-blend-mode
   убран (см. styles.css) — здесь он и не требовался: стрелка видна только
   на ховере, когда фон карточки уже стал сплошным var(--ink), так что
   обычный белый цвет и так всегда контрастен. */
/* раунд 12 — цвет стрелки был захардкожен на белый (#fff), из-за чего на
   тёмной теме при ховере он совпадал с новым фоном карточки (там
   var(--ink) — уже белый) и становился невидимым. Стрелка появляется
   ТОЛЬКО вместе с ховером (когда фон уже var(--ink)), поэтому она должна
   быть того же цвета, что и остальной текст карточки в этот момент —
   var(--paper) (та же логика, что у .other-name/.other-hint выше). */
.case-arrow{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  width:39px;
  height:39px;
  color:var(--paper);
  opacity:0;
  transform:translate(-4px, 4px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.case-arrow svg{ width:100%; height:100%; }
.other-card:hover .case-arrow{
  color:#1a1a1a;
  opacity:0.9;
  transform:translate(0,0);
}

/* ── FOOTER SEPARATOR ─────────────────────────────────────── */
.footer-sep{ font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--line); letter-spacing:.15em; white-space:nowrap; overflow:hidden; text-overflow:clip; padding:18px 0; user-select:none; }

/* ── FOOTER ── identical to main ─────────────────────────── */
.footer{ padding:clamp(24px,4vw,36px) 0 clamp(36px,6vw,48px); }
.footer-line{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:22px; }
.footer-logo{ height:20px; width:auto; display:block; flex-shrink:0; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a{ font-size:13px; color:var(--ink-70); transition:color .2s; }
.footer-links a:hover{ color:var(--ink); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .25s ease, transform .25s ease; }
.footer-social a:hover{ border-color:var(--ink); transform:translateY(-2px); }
.footer-social svg{ width:16px; height:16px; }

@media(max-width:480px){
  /* footer-logo ×1.75 когда текст переносится в 2 строки */
  .footer-logo{ height:35px; }
  .footer-row{ flex-direction:column; align-items:flex-start; }
  /* раунд 13 — порядок 2×2 изменён по прямой просьбе: Контакты / Оферта
     сверху, Политика / Соглашение снизу (было: Политика/Контакты сверху,
     Соглашение/Оферта снизу). Визуальный порядок через order — DOM-порядок
     для табуляции не трогаем. li:nth-child — 1=Политика, 2=Соглашение,
     3=Оферта, 4=Контакты (см. разметку подвала). */
  .footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; width:100%; }
  .footer-links li:nth-child(1){ order:3; }
  .footer-links li:nth-child(2){ order:4; }
  .footer-links li:nth-child(3){ order:2; }
  .footer-links li:nth-child(4){ order:1; }
}

/* ============================== COOKIE ==============================
   Уведомление о cookie — одно на все страницы (разметку вставляет
   assets/js/site.js, раздел 9). Одинаковый блок есть в styles.css и
   product.css. Строгая карточка в цветах сайта: сверху полоска-терминал
   как у дивайдеров, ниже официальный текст и кнопка как у «Подробнее». */
.cookie{
  position:fixed;
  /* раунд 25 — по центру по горизонтали, внизу экрана ◄◄◄ */
  left:50%;
  bottom:clamp(16px, 2.5vw, 32px);
  z-index:900;                     /* ниже модалки заявки (1000) */
  width:min(500px, calc(100vw - 32px)); /* ширина карточки ◄◄◄ */
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  opacity:0;
  transform:translate(-50%, 12px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.cookie.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.cookie-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  height:24px; padding:0 16px;
  background:var(--code-bg);
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.02em;
  color:var(--code-dim); white-space:nowrap; overflow:hidden;
}
.cookie-head b{ font-weight:500; color:var(--code-bright); }
/* раунд 25 — кнопка «Принять» под текстом, по центру */
.cookie-body{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:18px 18px 20px;
}
.cookie-text{
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:13px; line-height:1.6; color:var(--ink-70);
}
.cookie-text a{ color:var(--ink); border-bottom:1px solid var(--line); transition:border-color .2s; }
.cookie-text a:hover{ border-color:var(--ink); }
.cookie-accept{
  flex-shrink:0;
  padding:12px 28px;
  border:1px solid var(--btn-bg); border-radius:999px;
  background:var(--btn-bg); color:var(--paper);
  font-family:'Raleway', -apple-system, sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.cookie-accept:hover{ background:var(--paper); color:var(--ink); }
@media(max-width:480px){
  .cookie-body{ gap:14px; }
}
@media(prefers-reduced-motion:reduce){ .cookie{ transition:none; } }

/* раунд 25 — реквизиты исполнителя в самом низу подвала (ст. 9 ЗоЗПП) ◄◄◄ */
.footer-legal{ margin-top:18px; font-size:13px; font-weight:500; line-height:1.6; color:var(--ink-45); } /* = .doc-meta на правовых страницах */
/* цифры «официального» вида: ровные (lining) и одинаковой ширины — как в шапке
   правовых страниц; у Raleway по умолчанию цифры «старого стиля», разной высоты */
.footer-legal{ font-variant-numeric:lining-nums tabular-nums; }
.footer-legal strong{ font-weight:inherit; color:inherit; }

/* раунд 26 — фон «Готовы обсудить проект?»: мелкая сетка, натянутая на
   рельеф (выпуклости и впадины) — объёмная поверхность в плоском рисунке.
   Файлы assets/backgrounds/mesh-light.svg / mesh-dark.svg (сгенерированы скриптом,
   прозрачность линий — в атрибуте stroke внутри файла) ◄◄◄ */

/* раунд 27 — навигация в шапке тем же шрифтом, что пилюли кейсов:
   Raleway 600, полный контраст (без полупрозрачности), ховер — лёгкое
   приглушение. Цвет — var(--ink) (тёмно-серый на светлой теме,
   светлый на тёмной) ◄◄◄ */
.nav-links-left a,
.nav-links-right a,
.nav-links a{ font-weight:600; opacity:1; color:var(--ink); letter-spacing:0; }
.nav-links-left a:hover,
.nav-links-right a:hover,
.nav-links a:hover,
.nav-links-left a:focus-visible,
.nav-links-right a:focus-visible,
.nav-links a:focus-visible{ opacity:.6; }

/* раунд 29 — мобильная шапка страниц услуг как в сторис: заголовок и
   подзаголовок по левому краю, под ними иконка по центру, ниже кнопка
   «Подробнее» на всю ширину. Десктоп не меняется ◄◄◄ */
@media(max-width:768px){
  .hero{ padding-top:clamp(28px, 8vw, 40px); }
  .hero-inner{ text-align:left; row-gap:0; }
  .hero-text{ display:contents; }
  .hero-title{ order:1; justify-self:start; text-align:left; }
  .hero-sub{ order:2; justify-self:start; margin-top:16px; }
  .hero-visual{ order:3; margin:clamp(28px, 9vw, 44px) auto; }
  .hero-cta{ order:4; justify-self:stretch; width:100%; }
}

/* раунд 34 — заголовок шапки страниц услуг размером с заголовки разделов
   («Цены», «Продукты»), подзаголовок — размером обычного текста ◄◄◄ */
.hero-title{ font-size:clamp(24px, 3.2vw, 36px); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.hero-sub{ font-size:16px; line-height:1.7; }
.section-title, .plan-name{ font-weight:700; }
.nav-links-left, .nav-links-right, .nav-links{ font-size:16px; }

/* ===== раунд 36 — шапка: логотип слева, навигация справа; ниже на
   10% (десктоп) и 15% (телефон), бургер справа ◄◄◄ */
.nav{ padding:18px 0; }
.nav .wrap{ justify-content:flex-start; gap:clamp(20px, 3vw, 40px); }
.nav-logo{ order:-1; margin-right:auto; }
@media(max-width:768px){
  .nav{ padding:16px 0; }
  .nav .wrap{ justify-content:flex-start; }
  .nav-logo{ justify-content:flex-start; margin-right:0; }
}

/* раунд 36 — шапка страниц услуг снова крупная (как до раунда 34) ◄◄◄ */
.hero-title{ font-size:clamp(34px, 6vw, 76px); font-weight:700; letter-spacing:-.015em; line-height:1.08; }
.hero-sub{ font-size:clamp(16px, 1.6vw, 19px); line-height:1.65; }

/* раунд 37 — «Подробнее» в шапке услуг на десктопе: по центру текстового
   блока, шириной как на телефоне ◄◄◄ */
@media(min-width:769px){ .hero-cta{ align-self:center; width:min(100%, 350px); } }

/* раунд 41 — «Подробнее» той же ширины, что кнопки «Готовы обсудить проект?» */
.hero-cta, .discuss-link{ width:224px; box-sizing:border-box; }
@media(max-width:768px){ .hero-cta{ width:224px; justify-self:center; } }

/* ===== раунд 42 — шапка услуг на десктопе: слева заголовок и текст
   (текст ровно по ширине заголовка), справа иконка высотой с них,
   под всем — кнопка по центру. Размеры иконки и ширину текста
   выставляет site.js (fitHero). Мобильная версия без изменений ◄◄◄ */
@media(min-width:769px){
  .hero-inner{
    grid-template-columns:auto 1fr;
    grid-template-areas:"title visual" "sub visual" "cta cta";
    column-gap:0; row-gap:0; align-items:start;
  }
  .hero-text{ display:contents; }
  .hero-title{ grid-area:title; }
  .hero-sub{ grid-area:sub; margin-top:clamp(18px, 2.8vw, 28px); max-width:none; }
  .hero-visual{ grid-area:visual; align-self:center; justify-self:center; aspect-ratio:4 / 3; }
  .hero-cta{ grid-area:cta; justify-self:center; align-self:auto; margin-top:clamp(32px, 4vw, 52px); }
}

/* раунд 45 — бегущие строки на дивайдерах — только оформление: их нельзя
   выделить и скопировать, скринридеры их пропускают (aria-hidden в site.js) */
.term-divider, .term-divider *{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.term-text [data-t]::before{ content:attr(data-t); }

/* раунд 46 — на телефоне кнопка «Заказать» видна только на активной
   (центральной) карточке, на боковых скрыта — как на десктопе ◄◄◄ */
@media(max-width:768px){
  .plan:not(.plan-selected) .plan-cta{ opacity:0 !important; visibility:hidden !important; }
}

/* раунд 48 — «Принять» на всю ширину баннера на телефоне ◄◄◄ */
@media(max-width:768px){ .cookie-accept{ align-self:stretch; } .cookie-text{ hyphens:none; } }

/* ===== раунд 49 — подвал. Десктоп: Контакты · Публичная оферта · Согласие ·
   Политика в одну строку. Телефон: 1-я строка — оферта слева, контакты
   справа; 2-я — согласие; 3-я — политика. Реквизиты внизу по центру
   в две строки: ИП / ОГРНИП и ИНН через пробел ◄◄◄ */
.footer-links li{ order:0 !important; }
.footer-legal{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; margin-top:28px; }
.footer-legal span{ display:block; }
@media(max-width:768px){
  .footer-links{ display:grid !important; grid-template-columns:1fr auto; gap:12px 24px; width:100%; }
  .footer-links .fl-oferta{ grid-column:1; grid-row:1; }
  .footer-links .fl-contacts{ grid-column:2; grid-row:1; justify-self:end; }
  .footer-links .fl-consent{ grid-column:1 / -1; grid-row:2; }
  .footer-links .fl-privacy{ grid-column:1 / -1; grid-row:3; }
}

/* раунд 50 — «Принять» на всю ширину и на компьютере */
.cookie-accept{ align-self:stretch; }

/* ===== раунд 52 — подвал: без реквизитов; шрифт ссылок и подписи = пункты
   навигации в шапке (16px, 600), логотип = логотип в шапке (33px).
   Телефон: «Публичная оферта» и рядом «Контакты» в первой строке ◄◄◄ */
.footer-line{ font-size:16px; font-weight:600; color:var(--ink); gap:12px; }
.footer-logo{ height:33px !important; width:auto; }
.footer-links{ font-size:16px; }
.footer-links a{ font-size:16px; font-weight:600; color:var(--ink); opacity:1; }
.footer-links a:hover{ opacity:.6; }
@media(max-width:768px){
  .footer-links{ grid-template-columns:auto auto 1fr !important; gap:14px 24px !important; }
  .footer-links .fl-oferta{ grid-column:1; grid-row:1; }
  .footer-links .fl-contacts{ grid-column:2; grid-row:1; justify-self:start; }
  .footer-links .fl-consent, .footer-links .fl-privacy{ grid-column:1 / -1; }
}

/* ===== раунд 53 — бургер-меню: пункты по центру, каждый — полоса на всю
   ширину высотой 52px с чередующейся заливкой, как строки «Как мы
   работаем?»; одинаковые отступы сверху и снизу, без лишнего воздуха
   до дивайдера ◄◄◄ */
@media(max-width:768px){
  .nav.nav-open .nav-links-left,
  .nav.nav-open .nav-links-right{
    padding:0 !important; gap:0 !important; align-items:stretch;
    left:0; right:0;
  }
  .nav.nav-open .nav-links-left{ top:100%; }
  .nav.nav-open .nav-links-right{ top:calc(100% + 104px); }
  .nav.nav-open .nav-links-left li,
  .nav.nav-open .nav-links-right li{ width:100%; }
  .nav.nav-open .nav-links-left a,
  .nav.nav-open .nav-links-right a{
    display:flex; align-items:center; justify-content:center;
    height:52px; line-height:1; width:100%;
  }
  .nav.nav-open .nav-links-left li:nth-child(1) a,
  .nav.nav-open .nav-links-right li:nth-child(1) a{ background:var(--steps-bg); }
  .nav.nav-open .nav-links-left li:nth-child(2) a,
  .nav.nav-open .nav-links-right li:nth-child(2) a{ background:var(--steps-bg-alt); }
  .nav.nav-open::after{ border-bottom:none; }
}
:root{ --steps-bg:#eeeeee; --steps-bg-alt:#e6e6e6; }
html[data-theme="dark"]{ --steps-bg:#202020; --steps-bg-alt:#1a1a1a; }
/* раунд 54 — меню выпадает строго из-под шапки (ниже её нижней границы);
   заливка: Продукты и Процесс — серая, Кейсы и Контакты — цвет фона ◄◄◄ */
@media(max-width:768px){
  .nav.nav-open .nav-links-left{ top:calc(100% + 17px); }
  .nav.nav-open .nav-links-right{ top:calc(100% + 17px + 104px); }
  .nav.nav-open .nav-links-left li:nth-child(1) a,
  .nav.nav-open .nav-links-right li:nth-child(1) a{ background:var(--steps-bg-alt); }
  .nav.nav-open .nav-links-left li:nth-child(2) a,
  .nav.nav-open .nav-links-right li:nth-child(2) a{ background:var(--paper); }
}


/* ============================== раунд 61: ФОРМА ЗАЯВКИ В СТИЛЕ КУКИ-БАННЕРА ============================== */
.lead-modal-backdrop{ background:rgba(0,0,0,.4); }
.lead-modal-box{ max-width:400px; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden auto; box-shadow:0 14px 32px rgba(0,0,0,.12); }
html[data-theme="dark"] .lead-modal-box{ border-color:rgba(255,255,255,.16); }
.lead-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; height:24px; padding:0 44px 0 16px; background:var(--code-bg); font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.02em; color:var(--code-dim); white-space:nowrap; overflow:hidden; }
.lead-head b{ font-weight:500; color:var(--code-bright); }
.lead-modal-close{ top:0; right:8px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; padding:0; color:var(--code-dim); }
.lead-modal-close svg{ width:14px; height:14px; }
.lead-modal-close:hover{ color:var(--code-bright); }
.lead-body{ padding:22px 20px 20px; }
.lead-modal-title{ font-size:24px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin:0 0 6px; padding:0; }
.lead-modal-sub{ font-size:14px; line-height:1.6; color:var(--ink-70); margin:0 0 18px; }
.lead-form{ display:flex; flex-direction:column; gap:10px; }
.lead-input{ width:100%; font-family:'Raleway', -apple-system, sans-serif; font-size:16px; font-weight:500; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:11px 14px; resize:none; transition:border-color .2s ease; }
.lead-input::placeholder{ color:var(--ink-45); }
.lead-input:focus{ outline:none; border-color:var(--ink); }
.lead-check{ margin:6px 0 6px; font-size:12.5px; line-height:1.5; color:var(--ink-45); }
.lead-submit{ font-size:16px; padding:13px 26px; }
.lead-status{ margin-top:2px; font-size:13px; }
.lead-status:empty{ display:none; }
@media(max-width:480px){ .lead-modal{ padding:16px; } .lead-modal-box{ border-radius:12px; padding:0; } .lead-body{ padding:20px 18px 18px; } }

/* ============================== раунд 61: ЕДИНАЯ ШКАЛА ШРИФТОВ (как на главной) ==============================
   заголовок секции 36/700 · название карточки 24/700 · текст 16/400 (1.6)
   моно-значения 15/500 · кнопки и ссылки 16/600 · цена тарифа одна на всех карточках */
body .plan-desc, body .work-desc{ font-size:16px; line-height:1.6; }
body .case-copy{ line-height:1.6; }
body .spec-label, body .case-fact-label{ font-size:16px; font-weight:400; }
body .spec-value, body .case-fact-value{ font-size:15px; font-weight:500; }
body .plan-name, body .work-name, body .other-name{ font-weight:700; }
body .section-title, body .discuss-title{ font-weight:700; }
body .hero-title, body .case-hero-title{ font-weight:700; }
body .plan-price, body .work-price{ font-size:clamp(23px, 3.2vw, 34px); }
@media (max-width:768px){
  body .plan-name, body .work-name, body .other-name{ font-size:20px; }
}

/* раунд 62: подзаголовок hero — смысловые строки с небольшим отступом между ними */
.hero-sub .hs{ display:block; }
.hero-sub .hs + .hs{ margin-top:.6em; }

/* раунд 67 — стрелки в «Другие продукты» по той же логике размера и места, что у карточек кейсов на главной:
   десктоп 39px, 12px от края; ≤768px — 26px, верх рисунка стрелки на 13px от верха и правого края */
body .other-card .case-arrow{ width:39px; height:39px; top:12px; right:12px; }
@media (max-width:768px){
  body .other-card .case-arrow{ width:26px; height:26px; top:calc(13px - 26px * 7 / 24); right:calc(13px - 26px * 7 / 24); }
}

/* раунд 73 — «Готовы обсудить проект?»: серая подложка без mesh; вопрос сверху,
   три кнопки под ним в ряд, всё по центру — меньше пустого места на широком экране */
body .discuss-card{ background-image:none; background-color:var(--steps-bg, #eeeeee); flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:28px; padding:clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 56px); }
html[data-theme="dark"] body .discuss-card{ background-image:none; }
body .discuss-title{ max-width:none; }
body .discuss-links{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:12px; }
@media (max-width:768px){ body .discuss-links{ flex-direction:column; align-items:center; } }
body .discuss-card{ background-color:#eeeeee; }
html[data-theme="dark"] body .discuss-card{ background-color:#202020; }

/* раунд 74 — «Готовы обсудить проект?» на телефоне: в один ряд круглая кнопка Telegram,
   «Оставить заявку» по центру и круглая кнопка почты (нажатие копирует адрес, site.js) */
.discuss-link .dl-ico{ display:none; width:22px; height:22px; }
@media (max-width:768px){
  body .discuss-links{ flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:center; gap:10px; width:100%; }
  body .discuss-link.dl-tg{ order:1; }
  body .discuss-link.dl-lead{ order:2; flex:0 1 224px; width:auto; min-width:0; }
  body .discuss-link.dl-mail{ order:3; }
  body .discuss-link.dl-tg, body .discuss-link.dl-mail{ width:52px; height:52px; padding:0; flex:0 0 52px; border-radius:50%; }
  body .discuss-link.dl-tg .dl-text, body .discuss-link.dl-mail .dl-text{ display:none; }
  body .discuss-link.dl-tg .dl-ico, body .discuss-link.dl-mail .dl-ico{ display:block; }
  body .discuss-link.dl-lead{ height:52px; padding:0 20px; white-space:nowrap; }
}
.copy-toast{ position:fixed; left:50%; bottom:24px; z-index:1100; transform:translate(-50%, 12px); opacity:0; pointer-events:none;
  padding:12px 20px; border-radius:999px; background:var(--btn-bg); color:var(--paper);
  font-family:"Raleway", -apple-system, sans-serif; font-size:14px; font-weight:600; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.18); transition:opacity .25s ease, transform .25s ease; }
.copy-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* раунд 75 — на телефоне и планшете «Подробнее» в hero во всю ширину колонки */
@media (max-width:768px){ body .hero-cta{ width:100%; justify-self:stretch; } }

/* раунд 76 — вместо всей ширины: «Подробнее» = ширине кнопки «Заказать» в карточке тарифа
   (карточка 76vw минус её боковые отступы), по центру */
@media (max-width:768px){ body .hero-cta{ width:calc(76vw - 2 * clamp(22px, 3vw, 36px) - 2px); justify-self:center; } }
@media (max-width:768px){ body .hero-cta{ height:51px; padding-top:0; padding-bottom:0; display:flex; align-items:center; justify-content:center; } }

/* раунд 78 — «Чат-боты для бизнеса» длиннее 16 знаков: заголовок hero без ограничения ширины,
   на десктопе его размер и так держит site.js (не шире 58% контейнера), на телефоне переносится сам */
body .hero-title{ max-width:none; }