/* ═══════════════════════════════════════════════════════════════════════════
   СТИЛЬ v2 — слой для всего сайта (17.10.2026; черновик 14.10 был только под «Разработку»).
   Подключается ПОСЛЕДНЕЙ строкой <head>: после styles.css и инлайн-<style> страницы
   (скрипт apply_style_v2.py). Откат — убрать одну строку со ссылкой.

   Что делает:
   1) без надписей капсом над заголовками и бейджа над H1;
   2) подписи — Inter обычным регистром, не мельче 13–14 px (моноширинный только в логотипе);
   3) шаги — обычной цифрой «1, 2, 3» вместо «01–04» моноширинным;
   4) без теней; без тонких линий — карточки и плашки отделены тоном фона;
   5) H1 крупнее, но не шире колонки ни на одном экране (320–1440).
   Жёлтый: заливка — только у кнопок и маркера в H1; плашки и теги — бледно-жёлтые.
   Логотип (IBM Plex Mono), цвета бренда, основной шрифт (Inter) не меняются.
   Правила с низкой специфичностью: тёмные варианты страниц (.hero-dark, .trust-dark, .docs-band,
   #more и т. п.) объявлены специфичнее и остаются как были. !important — только против style="".
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mono:var(--display);   /* в слое v2 «моно»-подписи набираются Inter; логотип задан отдельно */
  --shadow:none;
  --body:#4d4d4d;          /* вторичный текст темнее: 8,5:1 на белом, иерархия с чёрным сохраняется */
  --tone:#f2f1ed;          /* поверхность карточки на белом фоне вместо рамки и тени */
  --tone-2:#e9e7e1;        /* поверхность при наведении */
  --cream:#fffbea;         /* фон первого экрана вместо градиента */
}

/* ── 1. ТИПОГРАФИКА ─────────────────────────────────────────────────────── */
/* H1 крупнее, но не больше, чем позволяет самое длинное слово в колонке первого экрана
   («Автоматизируем» ≈ 8,2 em): на 1440 — 60 px при колонке 570 px. */
h1{font-size:clamp(40px,4.2vw,60px);line-height:1.06;letter-spacing:-.032em}
h2{font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:-.022em}
h3{letter-spacing:-.012em}
/* страховка: очень длинное слово переносится, а не раздвигает колонку */
h1,h2{overflow-wrap:break-word}

/* ── 2. БЕЗ НАДПИСЕЙ НАД ЗАГОЛОВКАМИ И БЕЙДЖА НАД H1 ───────────────────── */
.hero-badge,.brandline,.spread-num,
.section-head > .eyebrow,
.form-band .eyebrow,
.ai-band .eyebrow{display:none!important}   /* !important: у части надписей display задан в style="" */
/* надпись прямо перед H2 в двухколоночных блоках (.split, .security-grid, .illu-split) */
.split .eyebrow:has(+ h2),.security-grid .eyebrow:has(+ h2),.illu-split .eyebrow:has(+ h2){display:none!important}
/* нумерация без смысла порядка: ценности на главной, слагаемые «где это приносит деньги» */
.value .n,.gain-item .n{display:none}

/* ── 3. ПОДПИСИ: Inter, обычный регистр, 13–15 px ───────────────────────── */
.eyebrow,.step .n,label,.post-meta,.stamp,
.compact-list em,.q-example,.spread-photo figcaption,.hero-visual figcaption,
.nav-links .sub li.sub-head,.marquee-track span,
/* компоненты страниц */
.hand-num,.hand .tag,.svc-cols .tag,.svc-time,.day-strip,.split .tag,.demo-tag,.rep dt,
.cmp th,.cmp thead th,.use-item .role,.vs-cell .k,.tool-tag,.rb-cap,.process-aside .chip,
.kz-core .chip,.kz-ribbon .n,.kz-lanes div,.kz-stamp,
.dmap-h,.dmap-rights i,.step .res i,.brief-foot,.dash-foot,.dash-tbl th,.rp-link i,.rs-bar,.rs-win .wh,.rs-task{
  font-family:var(--display);text-transform:none;letter-spacing:0}
.cmp td[data-label]::before,a.zoom::after{font-family:var(--display);text-transform:none;letter-spacing:0}
.faq summary::after{font-family:var(--display)}

/* общая подпись-метка: полужирная, 14 px, вторичным цветом */
.eyebrow{font-size:14px;font-weight:600;color:var(--body)}
/* метка как заголовок блока */
.process-note .eyebrow,.notfor .eyebrow{display:block;font-size:17px;color:var(--ink)}
.callout .eyebrow{font-size:15px;color:var(--ink)}
.tier .eyebrow{font-size:15px;color:var(--ink)}
.footer-grid .eyebrow{font-size:14px;color:var(--ink)}
.spread-services > .eyebrow{font-size:14px}
.post-card .eyebrow{font-size:13px}
.post-card .eyebrow::first-letter{text-transform:uppercase}

/* подписи полей — только в формах: строки самопроверки (.sym), чек-листы статей и выбор модулей — тоже <label>,
   но это текст, их вид задаёт страница (раньше их пояснения .cons становились полужирными) */
form label{font-size:14px;font-weight:600;color:var(--ink)}
form label .opt{font-size:13px;font-family:var(--display)}
.step .n{font-size:14px;font-weight:600;color:var(--body);padding-top:5px}
.post-meta{font-size:14px;color:var(--body)}
.compact-list em{font-size:13px}
.q-example,.ability .q-example{font-size:14px;border:0}
.stamp{font-size:15px;font-weight:600;color:#c4161c;border-color:#c4161c}   /* красный темнее: на сером 6:1 вместо 4,4:1 */
.nav-links .sub li.sub-head{font-size:13px;font-weight:600}
.marquee-track span{font-size:15px;color:rgba(255,255,255,.82)}
a.zoom::after{font-size:13px}
.hand-num{font-size:14px;font-weight:600;color:var(--body)}
.hand .tag,.svc-cols .tag{font-size:15px;font-weight:600;color:var(--ink)}
.hand-was .tag,.svc-pain .tag{color:#c4161c}   /* 6:1 на светлом фоне; var(--red) на сером не дотягивает до 4,5 */
.demo-tag,.rep dt,.use-item .role,.vs-cell .k,.split .tag,.tool-tag{font-size:13px;font-weight:600}
.cmp th,.cmp thead th{font-size:14px;font-weight:600;color:var(--ink)}
.cmp td[data-label]::before{font-size:13px;font-weight:600}
.step .res i,.kz-ribbon .n,.rb-cap,.dmap-h,.process-aside .chip{font-size:13px;font-weight:600}
.brief-foot,.dash-foot{font-size:13px}   /* подпись «данные демонстрационные» под макетом */
/* мелкие подписи вне демо-экранов — до 13 px (внутри макетов интерфейсов размеры не трогаем, чтобы не ломать макет) */
.spread-list a .p,.case-list .num,.case-list .fact,.dash .src,.tool-tag small,.mod-list .n,.mod-list .t,.flow-col small{font-size:13px}
/* «знак + название» в блоке кредо — это логотип, набираем фирменным шрифтом */
.creed-mark span{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;font-weight:600;letter-spacing:.2em}
/* цифры в таблицах ровными столбцами */
.cmp td,.price-table td,.dash-tbl td,.dash-tbl th{font-variant-numeric:tabular-nums}

/* ── 4. ШАГИ: порядок обычной цифрой «1, 2, 3» ──────────────────────────── */
/* В разметке «01–04»: прячем текст и выводим номер счётчиком. Рельс — тоном. */
.steps{counter-reset:v2step}
.steps > .step{counter-increment:v2step}
.step .num{background:var(--ink);color:#fff;font-family:var(--display);font-size:0;letter-spacing:0}
.step .num::before{content:counter(v2step);font-size:15px;font-weight:600;line-height:1}
.step::before{background:var(--tone-2)}

/* ── 5. БЕЗ ТЕНЕЙ ───────────────────────────────────────────────────────── */
.btn,.btn-yellow{box-shadow:none}
.hero-visual img,.case-shot img{box-shadow:none}

/* ── 6. БЕЗ ТОНКИХ ЛИНИЙ: поверхности тоном ────────────────────────────── */
/* шапка: без линии; когда страница прокручена — тонкий разделитель (где браузер умеет scroll-timeline) */
/* body > nav — только шапка (как в styles.css v32): оглавления статей <nav class="…-toc"> не трогаем */
body > nav{border-bottom:0;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
@supports (animation-timeline:scroll()){
  body > nav{animation:v2-nav-sep linear both;animation-timeline:scroll(root);animation-range:0 96px}
  @keyframes v2-nav-sep{from{box-shadow:0 1px 0 rgba(28,28,28,0)}to{box-shadow:0 1px 0 rgba(28,28,28,.08)}}
}

/* первый экран: ровный кремовый фон вместо градиента (тёмные первые экраны не трогаем) */
.hero:not(.hero-dark),.page-hero:not(.hero-dark){background:var(--cream)}
.post-head{background:var(--cream);padding-bottom:40px}

/* полоса доверия: тоном, плашки белые (тёмный вариант .trust-dark остаётся своим) */
.trust-strip:not(.trust-dark){border:0;background:var(--tone)}
.trust-strip:not(.trust-dark) .trust-item{border:0;background:#fff}

/* карточки: на белом фоне — тоном, на сером и жёлтом фоне — белые; без рамки и тени */
.card,.role-block,.tier,.post-card,.day-card,.badge{border:0;box-shadow:none;background:var(--tone)}
:where(.soft,.multibase) :is(.card,.role-block,.tier,.day-card,.badge){background:#fff}
.tier.featured{border:2px solid var(--ink)}
.tier li{border-bottom:0;padding:6px 0 6px 26px}
.app-card img{border-bottom:0}

/* списки: строки разделяет воздух, а не линии */
.pain-list li,.doc-list li,.compact-list li{border:0}
.compact-list li{padding:14px 0 14px 28px}
.compact-list li::before{top:14px}
.req-list li + li{border-left:0}
@media (max-width:900px){.req-list li{border-bottom:0}}
.process-note{border:0}
.process-note .after{border-top:0;padding-top:0}
.callout{border:0}
.hand-now{border:0}
.hand + .hand{border-top:0}
.day-strip{border-top:0;padding-top:6px}
.post-cta{border-top:0;background:var(--tone);border-radius:var(--r-md);padding:28px 32px}
.legal .req{border:0;background:var(--tone)}
.spread{border-top:0}
.spread-services{border:0;background:var(--tone)}
.creed{border-bottom:0}
.creed-mark{border:0}
.creed-sign{border-top:0;padding-top:0}
.lead-ok{border:0}
.form-band form{border:0}
footer{border-top:0;background:var(--tone)}

/* ── 7. ВОПРОСЫ И ОТВЕТЫ ───────────────────────────────────────────────── */
/* плашки тоном (на сером фоне — белые), строка вопроса не ниже 56 px, ответ с отступами */
.faq details{border:0;background:var(--tone);border-radius:var(--r-md);padding:0;margin:0 0 8px}
:where(.soft,.multibase) .faq details{background:#fff}
.faq summary{min-height:56px;align-items:center;padding:14px 20px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{font-size:22px;font-weight:400;line-height:1;color:var(--ink);flex:none}
.faq details p{margin:0;padding:0 20px 18px;max-width:none;font-size:15.5px;color:var(--body)}
.faq summary:hover{color:var(--ink)}
.faq details:not([open]):hover{background:var(--tone-2)}
:where(.soft,.multibase) .faq details:not([open]):hover{background:#fbfaf7}

/* ── 8. ЖЁЛТЫЙ — ТОЛЬКО ДЕЙСТВИЕ ─────────────────────────────────────────── */
/* теги и пилюли — бледно-жёлтые с тёмным текстом, чтобы не путались с кнопками */
.svc-time{font-size:14px;font-weight:600;background:var(--yellow-soft);color:var(--ink);padding:5px 12px}
.day-strip{font-size:14px;color:var(--body)}
.day-strip b{background:var(--yellow-soft);color:var(--ink);font-weight:600}
.role-tag{background:var(--yellow-soft);color:var(--ink)}
.spread-photo figcaption,.process-aside .chip{background:#fff;color:var(--ink);font-size:13px;font-weight:600}
/* второстепенная кнопка остаётся кнопкой: белая с рамкой (не серый блок) */
.btn-outline{background:#fff;border:1px solid #c9c9c9;color:var(--ink)}
.btn-outline:hover{border-color:var(--ink);filter:none}
.hero-dark .btn-outline:hover{border-color:#fff}

/* ── 9. ПЕРВЫЙ ЭКРАН ────────────────────────────────────────────────────── */
.hero h1{margin-bottom:24px}
.hero:not(.hero-dark):not(.hero--home){padding-top:80px}
/* подпись под картинкой, а не поверх неё */
.hero-visual figcaption{position:static;background:none;color:var(--body);font-size:14px;line-height:1.45;
  padding:10px 0 0;margin:0;border-radius:0;max-width:none}
.hero-dark .hero-visual figcaption{color:#b9bcc4}
/* подписи к цифрам первого экрана — 13 px: при 14 px третья цифра уезжала на новую строку, а число переносилось */
.hero-fact .cap{font-size:13px;line-height:1.35}
@media (min-width:641px){.hero-fact .num{white-space:nowrap}}   /* на телефоне три узкие колонки — там число может переноситься */
.hero-quick .form-note,.form-note{font-size:13px}
.trust-strip:not(.trust-dark) .trust-item{font-size:15px}

/* ── 10. БЛОГ И ЮР.СТРАНИЦЫ ─────────────────────────────────────────────── */
.crumbs{font-size:14px}
.post-head .post-meta{margin-bottom:var(--sp-md)}
.requisites{font-size:13px}

/* ── 11. КОМПОНЕНТЫ «РАЗРАБОТКИ» И «УСЛУГ 1С» (журнал задач, кейсы) ─────── */
/* линий между кейсами нет — разделяет воздух; у первого и последнего кейса отступ снаружи не нужен */
.svc .hand{padding:64px 0}
.svc .hand:first-child{padding-top:0}
.svc .hand:last-child{padding-bottom:0}
@media (max-width:860px){.svc .hand{padding:40px 0}.svc .hand:first-child{padding-top:0}.svc .hand:last-child{padding-bottom:0}}
.case-facts{border:0;background:#fff}
.case-facts div + div{border-left:0;border-top:0}
.case-facts span{font-size:14px}
.case-next{border-left:0;background:#fff;border-radius:var(--r-sm);padding:12px 16px}
.svc .case-pic,.case-shot.narrow img{border:0}
/* цифры кейса в узкой колонке (≤1100 px) — строками «число — подпись»: в три колонки «Каждое утро»
   и «0 звонков» не помещались и обрезались (числа набраны с обычным пробелом, переносить их нельзя) */
@media (max-width:1100px){
  .case-facts{grid-template-columns:minmax(0,1fr)}
  .case-facts div{flex-direction:row;align-items:baseline;gap:14px;padding:12px 16px;min-width:0}
  .case-facts b{flex:none;min-width:128px;font-size:20px}
  .case-facts span{font-size:14px}
}
@media (max-width:400px){.case-facts b{min-width:104px;font-size:18px}}

/* ── 12. КОНТРАСТ (AA для текста, который раньше не дотягивал) ──────────── */
.cmp td.yes,.cmp .yes,.chan-h span.ok,.fl .lnk.ok i{color:#127a38}
.vs-cell .no{color:#c4161c}
.flow-arrow{color:#666}

/* ── 13. СТРАХОВКА ОТ ПЕРЕПОЛНЕНИЯ НА УЗКИХ ЭКРАНАХ (точечно; лучше перенести в страницу) ─ */
/* «Рабочий стол 1С»: макет экрана раздвигал колонку 1fr до 363 px на 320–360 px */
@media (max-width:900px){.rds-inside-wrap{grid-template-columns:minmax(0,1fr)}}

/* ═══ ПЛАНШЕТ И ТЕЛЕФОН ═════════════════════════════════════════════════════ */
@media (max-width:900px){
  h1{font-size:clamp(38px,5.6vw,46px)}
  .hero--home h1{font-size:clamp(38px,5.6vw,46px)}
}
@media (max-width:640px){
  /* H1: самое длинное слово (≈8,2 em) входит в колонку и на 320 px: 30,7 px × 8,2 = 252 px < 284 px */
  h1,.hero--home h1{font-size:clamp(30px,9.6vw,38px);line-height:1.08;letter-spacing:-.025em}
  h2{font-size:clamp(25px,7.6vw,29px);line-height:1.15}
  .hero:not(.hero-dark):not(.hero--home){padding-top:48px}
  .hero h1{margin-bottom:18px}
  /* картинка первого экрана на телефоне во всю ширину — подписи нужны поля */
  .container > figure.hero-visual figcaption{padding:10px 18px 0}
  .hero-fact .cap{line-height:1.3}
  .faq summary{min-height:52px;padding:13px 16px;font-size:16px}
  .faq details p{padding:0 16px 16px;font-size:15px}
  .post-cta{padding:22px 20px}
  .post-head{padding-bottom:30px}
  .crumbs{font-size:13px}
  /* юр.страницы: поля как у остального сайта, заголовок не рвёт слово «конфиденциальности» */
  .legal{padding-left:18px;padding-right:18px}
  .legal h1{font-size:clamp(24px,7.4vw,30px)}
}
/* ≤400 px: слишком длинное слово в H1 переносится внутри слова, а не вылезает (страховка для будущих страниц) */
@media (max-width:400px){
  h1{overflow-wrap:anywhere}
  /* кнопка в шапке не мельче 13 px; поля и зазоры чуть меньше, чтобы название не обрезалось многоточием */
  nav .btn{font-size:13px;padding:9px 9px}
  nav .container{gap:6px}
}

/* ═══ 14. ДОВОДКА 17.10 (итоги QA и дизайн-проверок; правила только здесь, styles.css и ui.js не меняются) ═══ */

/* 14.1 Первый экран: колонки не распирает содержимое (nowrap в крошках или в H1 выталкивал картинку за край на 320 px) */
.hero .container > *{min-width:0}
@media (max-width:900px){.hero .container{grid-template-columns:minmax(0,1fr)}}

/* 14.2 Хлебные крошки на телефоне переносятся, а не режутся многоточием (в styles.css ≤640 — nowrap + ellipsis) */
@media (max-width:640px){.crumbs{white-space:normal;overflow:visible;text-overflow:clip}}

/* 14.3 На телефоне в край экрана растягиваем только картинку первого экрана; HTML-макет (div) стоит в полях, подпись — без отступа */
@media (max-width:640px){
  .container > figure.hero-visual:not(:has(> img, > picture)){margin-left:0;margin-right:0}
  .container > figure.hero-visual:not(:has(> img, > picture)) figcaption{padding-left:0;padding-right:0}
}

/* 14.4 Полоса доверия: четыре плашки на 641–1100 px — 2 × 2, а не 3 + 1; до 400 px — один столбец (иначе текст в 5 строк) */
@media (min-width:641px) and (max-width:1100px){.trust-strip .container{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.trust-strip .container{grid-template-columns:minmax(0,1fr)}}

/* 14.5 Неразрывное слово (span.nw) внутри списков, где страница делает каждый span блоком, остаётся в строке */
:is(.compact-list,.arts,.safe,.rel,.bp-more,.tz-more) .nw{display:inline;font-size:inherit;line-height:inherit;color:inherit;margin:0}

/* 14.6 Формы: ссылки в строке ошибки — цветом ошибки (общее правило «section p a» красило их в чёрный, на тёмном фоне — невидимо);
   строка ошибки нижней формы стоит под кнопкой, кнопка при её появлении не сдвигается */
:where(.form-err){margin:0;font-size:14px;line-height:1.4;font-weight:600;color:#c4161c}   /* база для страниц без своего правила */
:where(.hero-quick) .form-err{margin-top:8px}
.form-err a:not(.btn){color:inherit;text-decoration-color:currentColor}
#leadForm .form-err{margin-top:8px}

/* 14.7 Клавиатура: элемент в фокусе (Tab / Shift+Tab) и цель якоря не прячутся под липкой шапкой. Отступ задаёт
   scroll-padding прокрутки — его учитывает и переход фокуса; прежние scroll-margin у [id] (84–100 px в styles.css
   и на страницах) обнуляем, иначе отступ якорей удвоился бы. [id][id] — чтобы перебить постраничные правила.
   Кольцо фокуса на тёмных плашках — жёлтое. */
html{scroll-padding-top:84px}
:root body [id][id]{scroll-margin-top:0}
.aside-cta a:focus-visible,.free-band a:focus-visible,.mag-dark a:focus-visible,.nds-res a:focus-visible,.cta-bar a:focus-visible,.docs-band a:focus-visible{outline-color:var(--yellow)}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100}
.skip-link:focus{left:16px;background:var(--yellow);color:var(--ink);padding:8px 14px;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.nav-links{overscroll-behavior:contain}

/* 14.8 Наведение на кнопку заметно: фон темнее вместо brightness(.96), которое почти не видно */
.btn{transition:background-color .15s,border-color .15s,filter .15s,transform .05s}
.btn-yellow:hover{background:#f0c400;filter:none}
.btn-dark:hover{background:#000;filter:none}

/* 14.9 Зелёный «готово» темнее: #1a9a4a на белом — 3,4:1, #127a38 — 5,4:1 */
.trust-item .ok,.req-list li::before,.tier li::before,.doc-list li::before,.swap .now::before,.fit-list li::before,.compact-list li::before,.case-cols .c-did li::before{color:#127a38}

/* 14.10 Заголовки не длиннее двух строк там, где это возможно (дизайн-проверка 17.10: на 1440 было 26 длинных, стало 10) */
@media (min-width:901px){
  .section-head:not(.faq-side){max-width:880px}
  .section-head:not(.faq-side) > .lead,.section-head:not(.faq-side) > p{max-width:660px}
  .hero h1{font-size:clamp(40px,3.6vw,52px)}
  .faq-side h2{font-size:clamp(28px,2.4vw,34px)}
}
@media (max-width:640px){
  h2{font-size:clamp(23px,6.6vw,26px)}
  h1,.hero--home h1{font-size:clamp(28px,8.6vw,34px)}
}
/* ключ запроса мелкой строкой над коротким заголовком: <h1><span class="h1-key">Ключ<span class="sr-only">.</span></span> Заголовок</h1> */
.hero h1 .h1-key{display:block;font-size:max(18px,.4em);line-height:1.2;letter-spacing:-.01em;margin-bottom:.4em}
/* хвост длинного H2 после двоеточия: на телефоне — второй строкой мельче (в теге текст целиком, для поиска ничего не меняется) */
@media (max-width:640px){.h2-sub{display:block;font-size:.68em;line-height:1.3;font-weight:500;letter-spacing:-.005em;margin-top:.3em;color:var(--body)}}

/* 14.11 Набор: последняя строка абзаца без одного висячего слова; длинные строки пояснений — не шире 72 знаков */
p,li{text-wrap:pretty}
.case-status,.trace-sum,.safe-proof,.process-note .after{max-width:72ch}
.ba-d{font-size:13px}

/* 14.12 Меню под бургером: заголовки групп чёрные (красный на сайте значит «было / проблема»), бургер 44 × 44 */
@media (max-width:1024px){.nav-links .sub li.sub-head{color:var(--ink)}}
@media (min-width:641px) and (max-width:1024px){.nav-links{padding-left:32px;padding-right:32px}}   /* левый край пунктов — по логотипу */
.nav-burger{width:44px;height:44px}
@media (max-width:400px){.nav-burger{width:36px}}   /* на 320–400 px ширину не трогаем: иначе обрезается название в логотипе */
@media (max-width:340px){.nav-burger{width:33px;padding:0 6px}}   /* 320 px: «АГЕНТОВ» в логотипе без многоточия */

/* 14.13 Одна ставка вместо трёх одинаковых тарифов («Настройка и доработка 1С», «Сопровождение 1С») */
.rate{background:#fff;border-radius:var(--r-md);padding:28px 32px 26px}
.rate-main{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin:0 0 20px}
.rate-num{margin:0;font-size:48px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.rate-num small{display:block;font-size:16px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--body);margin-top:8px}
.rate-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rate-rows li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,240px);gap:6px 28px;align-items:baseline;background:var(--tone);border-radius:var(--r-sm);padding:16px 20px;margin:0}
.rate-rows li > b{font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.rate-rows li > span{font-size:15px;line-height:1.5;color:var(--body)}
.rate-rows li > em{font-style:normal;font-size:14.5px;line-height:1.45;color:var(--body)}
.rate-rows li > em strong{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
@media (max-width:900px){.rate-rows li{grid-template-columns:minmax(0,1fr);gap:6px}}
@media (max-width:640px){.rate{padding:20px 18px}.rate-num{font-size:40px}.rate-main .btn{width:100%;text-align:center}.rate-rows li{padding:14px 16px}}