/* ==========================================================================
   pages.css — компоненты внутренних страниц (ТЗ §5).
   Подключается только на внутренних страницах через {{pageCss}}.

   Весь файл — слой content (порядок слоёв объявлен в tokens.css): выше base,
   поэтому компоненты дизайн-системы можно уточнять обычными классами,
   без !important и без наращивания селекторов.

   Ни одного сырого цвета, радиуса или кегля: только var(--*) из tokens.css.

   Порядок: служебное → крошки → page-hero → каркас с оглавлением → секции →
   symptom-grid → module-list → pkg-grid → step-flow → honest-block → faq →
   case-card и фильтр → cta-band → spec-table → artifact-list → списки →
   стек → соседние карточки → блоки «О компании» → калькулятор → адаптив.
   ========================================================================== */

@layer content {

/* ==========================================================================
   0. СЛУЖЕБНОЕ
   ========================================================================== */

/* Блоки, которые без JS бессмысленны: калькулятор и фильтр кейсов.
   Класс has-js ставит pages.js первым делом. */
.calc,
.case-filter {
  display: none;
}

.has-js .calc {
  display: grid;
}

.has-js .case-filter {
  display: flex;
}

/* Секция, которая целиком не имеет смысла без скрипта: без JS не остаётся
   и заголовка (иначе на странице висел бы пустой раздел). */
.page-section--js {
  display: none;
}

.has-js .page-section--js {
  display: block;
}

/* Пока идёт анимация высоты — содержимое не должно вылезать за границы */
.is-animating .module__body,
.is-animating .faq__a {
  overflow: hidden;
}

/* ==========================================================================
   1. ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */

.breadcrumbs {
  padding-top: clamp(18px, 3vh, 30px);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: '/';
  margin-right: 8px;
  color: var(--text-dim);
}

.breadcrumbs__item a {
  color: var(--text-low);
}

.breadcrumbs__item a:hover {
  color: var(--lume);
}

.breadcrumbs__item [aria-current] {
  color: var(--text-mid);
}

/* ==========================================================================
   2. PAGE-HERO (ТЗ §5.1)
   ========================================================================== */

/* Высота по контенту: внутренняя страница не должна требовать скролла
   до первого смысла */
.page-hero {
  padding-top: clamp(26px, 4vh, 44px);
  padding-bottom: clamp(34px, 6vh, 64px);
}

.page-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap-xl);
  align-items: start;
}

.page-hero__grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.page-hero__text > * + * {
  margin-top: var(--gap-md);
}

.page-hero__text h1 {
  margin-top: 10px;
}

.page-hero__client {
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}

/* --- Карточка «что получите» -------------------------------------------- */

.page-hero__card {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.hero-card__title {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.hero-card__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: var(--gap-md);
}

.hero-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-mid);
}

.hero-card__list .ico {
  margin-top: 3px;
  color: var(--lume);
}

.hero-card__note {
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line-hair);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
}

/* ==========================================================================
   3. КАРКАС: КОЛОНКА + STICKY-ОГЛАВЛЕНИЕ (ТЗ §5.10)
   ========================================================================== */

.page-body__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: var(--gap-xl);
  align-items: start;
}

.page-body__main {
  min-width: 0;
}

.page-body__main--narrow {
  max-width: 800px;
}

.page-body__aside {
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

.toc-rail__title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-hair);
}

.toc-rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.toc-rail__link {
  display: block;
  padding: 6px 0 6px 13px;
  border-left: 1px solid var(--line-hair);
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-low);
  transition: color var(--t), border-color var(--t);
}

.toc-rail__link:hover {
  color: var(--text);
  border-color: var(--line-hover);
}

.toc-rail__link[data-active] {
  color: var(--lume);
  border-color: var(--lume);
}

/* ==========================================================================
   4. СЕКЦИЯ ВНУТРЕННЕЙ СТРАНИЦЫ
   ========================================================================== */

.page-section {
  padding-block: clamp(38px, 6vh, 68px);
  border-top: 1px solid var(--line-hair);
}

.page-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-section__title {
  font-size: var(--fs-h2);
  line-height: 1.05;
  margin-bottom: var(--gap-lg);
}

.page-section__lead {
  margin-top: calc(var(--gap-lg) * -1 + 4px);
  margin-bottom: var(--gap-lg);
}

.page-section__prose {
  max-width: 68ch;
  color: var(--text-mid);
}

.page-section__note {
  margin-top: var(--gap-lg);
  max-width: 72ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-dim);
}

.page-section__foot {
  margin-top: var(--gap-lg);
}

.prose > * + * {
  margin-top: var(--gap-md);
}

.prose p {
  max-width: 72ch;
  color: var(--text-mid);
}

/* ==========================================================================
   5. SYMPTOM-GRID (ТЗ §5.2)
   ========================================================================== */

.symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg) var(--gap-xl);
}

/* Легче карточки услуги: без фона, только тонкая акцентная линия слева */
.symptom {
  padding-left: 18px;
  border-left: 1px solid var(--line-hair);
  transition: border-color var(--t);
}

.symptom:hover {
  border-color: var(--line-hover);
}

.symptom__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.symptom__text {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-mid);
}

/* Вариант с иконкой — «типовые дашборды» */
.symptom--icon {
  padding-left: 0;
  border-left: 0;
}

.symptom--icon .ico-box {
  margin-bottom: 14px;
}

/* ==========================================================================
   6. MODULE-LIST (ТЗ §5.3)
   ========================================================================== */

.module-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.module {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t), background-color var(--t);
}

.module[open] {
  border-color: var(--line-key);
  background: var(--surface-2);
}

.module__summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--gap-md);
  padding: 16px clamp(16px, 2vw, 22px);
  cursor: pointer;
  list-style: none;
}

.module__summary::-webkit-details-marker {
  display: none;
}

.module__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  color: var(--lume);
}

.module__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.module__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  text-align: right;
}

.module__time {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

/* Без nowrap: у части модулей цена — это две вилки сразу («от 8 000 ₽
   (быстрый) / от 20 000 ₽ (углублённый)»), и на 360px такая строка
   распирала бы страницу. Неразрывны только сами суммы — их склеивает
   неразрывный пробел в content/prices.js. */
.module__price {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mint);
}

.module__chev {
  display: inline-flex;
  color: var(--text-low);
  transition: transform var(--t), color var(--t);
}

.module[open] .module__chev {
  transform: rotate(45deg);
  color: var(--lume);
}

.module__body {
  padding: 0 clamp(16px, 2vw, 22px) 20px;
}

.module__text {
  max-width: 72ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

.module__deliverables {
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line-hair);
}

.module__deliverables-title,
.pkg__includes-title,
.pkg__dod-title {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-low);
  margin-bottom: 10px;
}

/* Подсписок контуров интеграции: у каждого своя цена */
.module__sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: var(--gap-md);
}

.module__sub-item {
  padding: 14px 16px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-sm);
}

.module__sub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-sm);
}

.module__sub-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-hi);
}

.module__sub-price {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mint);
  white-space: nowrap;
}

.module__sub-text {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-mid);
}

.module__callout {
  margin-top: var(--gap-md);
  padding: 14px 16px;
  border-left: 2px solid var(--lume);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgb(var(--lume-rgb) / 0.05);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

/* ==========================================================================
   7. PKG-GRID (ТЗ §5.4)
   ========================================================================== */

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-lg);
  align-items: stretch;
}

.pkg {
  display: flex;
  flex-direction: column;
}

.pkg > * + * {
  margin-top: var(--gap-md);
}

.pkg__name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.pkg__for {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-mid);
}

.pkg__for-label {
  color: var(--text-low);
}

.pkg__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--line-hair);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  color: var(--lume);
}

.pkg__duration {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

.pkg__dod {
  font-size: var(--fs-xs);
}

.pkg__dod ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* Кнопка прижата к низу — карточки одинаковой высоты (ТЗ §5.4) */
.pkg__cta {
  margin-top: auto;
  padding-top: var(--gap-lg);
}

.pkg-note {
  margin-top: var(--gap-lg);
  max-width: 72ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-dim);
}

/* ==========================================================================
   8. STEP-FLOW (ТЗ §5.5)
   ========================================================================== */

.step-flow {
  display: flex;
  flex-direction: column;
}

.step-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--gap-lg);
  padding-bottom: var(--gap-xl);
}

.step-flow__item:last-child {
  padding-bottom: 0;
}

/* Соединительная линия слева, от номера к номеру */
.step-flow__item::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 42px;
  bottom: 8px;
  width: 1px;
  background: var(--line-hair);
}

.step-flow__item:last-child::before {
  display: none;
}

.step-flow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-key);
  background: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--lume);
}

.step-flow__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.step-flow__time {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

.step-flow__text {
  margin-top: 10px;
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

/* ==========================================================================
   9. HONEST-BLOCK (ТЗ §5.6)
   Репутационный блок: спокойная нейтральная граница, акцентный маркер «—».
   Никакого красного — это не предупреждение об ошибке.
   ========================================================================== */

.honest {
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--line-neutral);
  border-radius: var(--r-lg);
  background: rgb(var(--white-rgb) / 0.02);
}

.honest__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.honest__item {
  position: relative;
  padding-left: 26px;
  max-width: 76ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

.honest__item::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lume);
}

.honest--prose {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.honest--prose p {
  max-width: 76ch;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-mid);
}

.honest--prose p:first-child {
  font-size: var(--fs-lead);
  color: var(--text-hi);
}

/* ==========================================================================
   10. FAQ-ACCORDION (ТЗ §5.7)
   ========================================================================== */

.faq {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--line-hair);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-lg);
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: var(--text-hi);
  transition: color var(--t);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover {
  color: var(--lume);
}

/* Маркер-плюс, поворачивающийся в крестик */
.faq__marker {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  transition: transform var(--t);
}

.faq__marker::before,
.faq__marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--lume);
  transform: translate(-50%, -50%);
}

.faq__marker::before {
  width: 14px;
  height: 1.5px;
}

.faq__marker::after {
  width: 1.5px;
  height: 14px;
}

.faq__item[open] .faq__marker {
  transform: rotate(45deg);
}

.faq__a {
  padding-bottom: 20px;
}

.faq__a p {
  max-width: 76ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-mid);
}

/* ==========================================================================
   11. CASE-CARD И ФИЛЬТР (ТЗ §5.8, §9.2)
   ========================================================================== */

.case-filter {
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
}

.case-filter__btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-hair);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-mid);
  transition: color var(--t), border-color var(--t), background-color var(--t);
}

.case-filter__btn:hover {
  color: var(--text-hi);
  border-color: var(--line-hover);
}

.case-filter__btn[aria-selected='true'] {
  color: var(--on-lume);
  background: var(--lume);
  border-color: var(--lume);
}

.case-filter__empty {
  margin-bottom: var(--gap-lg);
  color: var(--text-dim);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-lg);
}

.case-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.case-card > * + * {
  margin-top: var(--gap-sm);
}

.case-card__top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-card__title {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.case-card__client {
  font-size: var(--fs-xs);
  color: var(--text-low);
}

.case-card__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

.case-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-card__metric {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mint);
}

.case-card__meta {
  width: 100%;
  margin-top: auto;
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line-hair);
  font-size: var(--fs-xs);
}

.case-card__meta-row {
  display: flex;
  gap: 10px;
  line-height: 1.5;
}

.case-card__meta-row + .case-card__meta-row {
  margin-top: 6px;
}

.case-card__meta dt {
  flex: none;
  width: 46px;
  color: var(--text-dim);
}

.case-card__meta dd {
  color: var(--text-mid);
}

.case-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--gap-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lume);
}

.case-card__more .ico {
  transition: transform var(--t);
}

.case-card:hover .case-card__more .ico {
  transform: translateX(3px);
}

/* Скрытая фильтром карточка. Без JS фильтра нет — видны все (ТЗ, критерии). */
.case-card[hidden] {
  display: none;
}

/* ==========================================================================
   12. CTA-BAND (ТЗ §5.9)
   ========================================================================== */

.cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gap-xl);
  align-items: center;
}

.cta-band__title {
  margin-top: var(--gap-sm);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
}

.cta-band__sub {
  margin-top: var(--gap-sm);
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

.cta-band__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-md);
}

.cta-band__alt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-sm);
}

.cta-band__contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-mid);
}

.cta-band__contact:hover {
  color: var(--lume);
}

/* ==========================================================================
   13. SPEC-TABLE (ТЗ §5.11)
   ========================================================================== */

.spec-table__scroll {
  overflow-x: auto;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.spec-table th,
.spec-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-hair);
  line-height: 1.55;
}

.spec-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-low);
  border-bottom-color: var(--line-key);
}

.spec-table tbody th {
  font-weight: 600;
  color: var(--text-hi);
}

.spec-table tbody td {
  color: var(--text-mid);
}

/* ==========================================================================
   14. ARTIFACT-LIST И СПИСКИ С МАРКЕРАМИ
   ========================================================================== */

.artifact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--gap-xl);
}

.artifact-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-mid);
}

.artifact-list__item .ico {
  margin-top: 3px;
  color: var(--lume);
}

/* Список с точками-маркерами — та же подача, что на главной */
.marker-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.marker-list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-mid);
}

.marker-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lume);
  box-shadow: var(--glow-line);
}

.marker-list--2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--gap-xl);
}

/* ==========================================================================
   15. СТЕК
   ========================================================================== */

.stack-group + .stack-group {
  margin-top: var(--gap-lg);
}

.stack-group__title {
  font-size: var(--fs-h4);
  margin-bottom: 12px;
}

.stack-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   16. СОСЕДНИЕ УСЛУГИ И НАПРАВЛЕНИЯ
   ========================================================================== */

.related-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.related-card > * + * {
  margin-top: var(--gap-sm);
}

.related-card__title {
  margin-top: var(--gap-md);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--text-hi);
}

.related-card__text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-mid);
}

.related-card__note {
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--text-dim);
  font-style: italic;
}

.related-card__more {
  margin-top: auto;
  padding-top: var(--gap-md);
}

/* Ссылка-стрелка «Подробнее …» — тот же компонент, что на главной */
.dir-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lume);
}

.dir-card__more .ico {
  transition: transform var(--t);
}

.card--link:hover .dir-card__more .ico {
  transform: translateX(3px);
}

/* ==========================================================================
   17. БЛОКИ «О КОМПАНИИ» И «КАК РАБОТАЕМ»
   ========================================================================== */

.why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--gap-xl);
  align-items: center;
}

.why__prose {
  max-width: 62ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-mid);
}

.why__figure {
  display: flex;
  justify-content: center;
  color: var(--lume);
}

.why__figure .gecko {
  width: 150px;
  height: auto;
  filter: var(--glow-gecko);
  animation: why-breathe 6s ease-in-out infinite;
}

@keyframes why-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why__figure .gecko {
    animation: none;
  }
}

.role-grid,
.dir-grid-inner,
.trouble-grid {
  margin-top: var(--gap-lg);
}

.role-card > * + *,
.trouble-card > * + * {
  margin-top: var(--gap-sm);
}

.role-card .ico-box {
  margin-bottom: 4px;
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-xl);
}

.fit__title {
  margin-bottom: var(--gap-md);
  font-size: var(--fs-h4);
  color: var(--text-hi);
}

.fit--no .honest__list {
  gap: 12px;
}

.contacts-block > * + * {
  margin-top: var(--gap-md);
}

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md) var(--gap-lg);
}

.contact-line {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-hi);
}

.contact-line:hover {
  color: var(--lume);
}

.contacts-block__legal {
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

/* ==========================================================================
   17b. СПОСОБЫ СВЯЗИ НА /contacts.html

   Формы на сайте нет, поэтому эти строки — единственное действие страницы.
   Отсюда и размер: это не подпись под текстом, а сама кнопка. Оформление
   повторяет .contact-row с главной (home.css), но главная свой файл стилей
   на внутренние страницы не отдаёт — дублирование здесь осознанное.
   ========================================================================== */

.contact-ways {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}

.contact-way {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color var(--t), background-color var(--t), color var(--t);
}

.contact-way:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line-hover);
}

.contact-way:hover .ico-box {
  background: rgb(var(--lume-rgb) / 0.14);
  border-color: rgb(var(--lume-rgb) / 0.4);
}

.contact-way__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact-way__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-low);
}

.contact-way__value {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-hi);
  overflow-wrap: anywhere;
}

.contact-way__arrow {
  margin-left: auto;
  color: var(--lume);
  transition: transform var(--t);
}

.contact-way:hover .contact-way__arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   18. КАЛЬКУЛЯТОР «ВМЕСТО НАЙМА» (ТЗ §11.5)
   ========================================================================== */

.calc {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--gap-lg);
  align-items: start;
}

.calc__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

.calc__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 10px;
}

.calc__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: var(--gap-md);
  align-items: center;
}

.calc__number {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-neutral);
  background: var(--ink);
  color: var(--text-hi);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: border-color var(--t);
}

.calc__number:focus {
  border-color: var(--lume);
}

.calc__range {
  width: 100%;
  height: 44px;
  accent-color: var(--lume);
  background: none;
}

.calc__hint {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.calc__result {
  margin-top: var(--gap-lg);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--line-hair);
}

.calc__total-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-low);
}

.calc__total {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-metric);
  font-weight: 800;
  line-height: 1;
  color: var(--lume);
  text-shadow: 0 0 16px rgb(var(--lume-rgb) / 0.4);
}

.calc__month {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--text-mid);
}

.calc__month b {
  color: var(--text-hi);
}

.calc__rows {
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--line-hair);
  font-size: var(--fs-sm);
}

.calc__row {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: 5px 0;
  color: var(--text-mid);
}

.calc__row dd {
  color: var(--text-hi);
  font-weight: 600;
}

.calc__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-lg);
}

.calc__aside-title {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-hi);
}

.calc__note {
  grid-column: 1 / -1;
  max-width: 76ch;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-dim);
}

.calc__note--pending {
  color: var(--text-low);
}

/* ==========================================================================
   19. ТАЧ-ЦЕЛИ (ТЗ §12.6 — не меньше 44×44)
   ========================================================================== */

@media (pointer: coarse) {
  .breadcrumbs__item a,
  .breadcrumbs__item [aria-current] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .case-filter__btn,
  .toc-rail__link,
  .contact-line,
  .contact-way,
  .cta-band__contact {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Крышка аккордеона и без того высокая, но фиксируем минимум явно */
  .module__summary,
  .faq__q {
    min-height: 44px;
  }
}

/* ==========================================================================
   20. АДАПТИВ — 1200 / 1000 / 900 / 640
   ========================================================================== */

/* Оглавление живёт только на широком экране (ТЗ §12.6) */
@media (max-width: 1199px) {
  .page-body__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-body__aside {
    display: none;
  }
}

@media (max-width: 1000px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Карточка героя уходит под текст (ТЗ §5.1) */
  .page-hero__card {
    position: static;
    max-width: 560px;
  }

  .pkg-grid,
  .symptom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta-band {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-lg);
  }

  .why {
    grid-template-columns: minmax(0, 1fr);
  }

  .why__figure {
    justify-content: flex-start;
  }

  .calc {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .module__summary {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .module__meta {
    grid-column: 2 / -1;
    justify-content: flex-start;
    text-align: left;
  }

  .module__chev {
    grid-row: 1;
    grid-column: 3;
  }
}

@media (max-width: 640px) {
  .contact-way {
    gap: 13px;
    padding: 14px 15px;
  }

  .symptom-grid,
  .pkg-grid,
  .cases-grid,
  .artifact-list,
  .marker-list--2,
  .fit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .step-flow__item {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--gap-md);
  }

  .step-flow__num {
    width: 44px;
    height: 32px;
    font-size: 14px;
  }

  .step-flow__item::before {
    left: 21px;
    top: 36px;
  }

  .calc__inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  /* spec-table превращается в стек карточек через data-label (ТЗ §5.11) */
  .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
  }

  .spec-table tr {
    margin-bottom: var(--gap-md);
    padding: 4px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
  }

  .spec-table th,
  .spec-table td {
    border-bottom: 0;
    padding: 10px 16px;
  }

  .spec-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--text-low);
  }
}

}
/* /@layer content */

/* ==========================================================================
   НЕЗАПОЛНЕННЫЕ ФАКТЫ — ВНЕ СЛОЁВ

   Правило намеренно объявлено за пределами @layer: неслоёные стили сильнее
   любого слоя, поэтому блок с незаполненным значением скрывается независимо
   от того, какой display ему назначил компонент (ТЗ §1.1). Без этого,
   например, [data-placeholder] внутри .case-card__meta-row проигрывал бы
   собственному display:flex и пустая строка «Срок» оставалась бы видимой.

   Разметка при этом остаётся в DOM — видно, куда встанет факт, когда его дадут,
   и маркер {{...}} в готовый HTML не попадает: рендер не подставляет текст.
   ========================================================================== */

[data-placeholder='true'] {
  display: none;
}