/* Вёрстка сайта Финдир.Москва. Значения цветов, шрифтов и размеров НЕ пишутся здесь —
   только через переменные из tokens.css, который собирается из brend.json.
   ⛔ Красный признак: в этом файле появился #hex или px-размер, которого нет в токенах. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cvet-fon);
  color: var(--cvet-tekst);
  font-family: var(--shrift-tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ── полоса: одна предельная ширина на все секции ───────────────────────── */
.polosa {
  max-width: var(--shirina-stranicy);
  margin: 0 auto;
  padding: calc(var(--shag) * 10) calc(var(--shag) * 6);
}

section { border-top: 1px solid var(--cvet-liniya); }

h1, h2, h3, h4 {
  font-family: var(--shrift-zagolovki);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 4.4vw, 3rem); margin: 0 0 calc(var(--shag) * 5); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 calc(var(--shag) * 6); }
h3 { font-size: 1.2rem; margin: calc(var(--shag) * 8) 0 calc(var(--shag) * 3); }
h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em;
     color: var(--cvet-tekst-vtoroy); margin: 0 0 calc(var(--shag) * 2); }

p, li { max-width: var(--shirina-teksta); }
p { margin: 0 0 calc(var(--shag) * 4); }
strong { font-weight: 600; }

a { color: var(--cvet-tekst); text-decoration-color: var(--cvet-akcent);
    text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--cvet-akcent); }

/* ── первый экран ───────────────────────────────────────────────────────── */
.ekran { background: var(--cvet-fon-karta); border-bottom: 1px solid var(--cvet-liniya); }
.ekran .polosa { padding-top: calc(var(--shag) * 12); padding-bottom: calc(var(--shag) * 12); }

.metka {
  font-family: var(--shrift-cifry);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cvet-akcent);
  margin: 0 0 calc(var(--shag) * 4);
}

.lid { font-size: 1.15rem; }
.cena-stroka { font-size: 1.08rem; }
.chestnost { color: var(--cvet-tekst-vtoroy); font-size: 0.95rem; margin-bottom: 0; }

/* ── действия: одна кнопка на экран, второй путь — тихая ссылка ─────────── */
.deystviya { display: flex; flex-wrap: wrap; align-items: center;
             gap: calc(var(--shag) * 5); margin: calc(var(--shag) * 7) 0; }

.knopka {
  display: inline-block;
  background: var(--cvet-akcent);
  color: var(--cvet-fon-temnyy);
  font-weight: 600;
  text-decoration: none;
  padding: calc(var(--shag) * 3) calc(var(--shag) * 6);
  border-radius: var(--radius);
}
.knopka:hover { color: var(--cvet-fon-temnyy); filter: brightness(1.06); }

.tihaya { font-size: 0.95rem; }

/* ── тёмный блок: ровно один на страницу по DESIGN.md, здесь их два —
      процесс и «как начать» — и это осознанный размен: они закрывают
      страницу с двух концов. Если станет шумно — тёмным остаётся «как начать». */
.temnyy { background: var(--cvet-fon-temnyy); color: var(--cvet-tekst-na-temnom); }
.temnyy h2, .temnyy h3 { color: var(--cvet-tekst-na-temnom); }
.temnyy em { color: var(--cvet-tekst-vtoroy-na-temnom); font-style: normal; }
.temnyy a { color: var(--cvet-tekst-na-temnom); }
.temnyy .chestnost { color: var(--cvet-tekst-vtoroy-na-temnom); }
.temnyy { border-top-color: var(--cvet-liniya-na-temnom); }

/* ── симптомы ───────────────────────────────────────────────────────────── */
.simptomy { list-style: none; padding: 0; margin: 0 0 calc(var(--shag) * 6); }
.simptomy li {
  background: var(--cvet-fon-karta);
  border-left: 3px solid var(--cvet-akcent);
  border-radius: var(--radius);
  padding: calc(var(--shag) * 4) calc(var(--shag) * 5);
  margin-bottom: calc(var(--shag) * 3);
}
.otsechka { color: var(--cvet-tekst-vtoroy); }

/* ── услуги: две половины одного веса ───────────────────────────────────── */
.usluga {
  background: var(--cvet-fon-karta);
  border: 1px solid var(--cvet-liniya);
  border-radius: var(--radius-karta);
  padding: calc(var(--shag) * 6);
  margin-bottom: calc(var(--shag) * 6);
}
.usluga h3 { margin-top: 0; }
.podpis-uslugi { font-family: var(--shrift-cifry); color: var(--cvet-tekst-vtoroy); }

.dve-poloviny { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--shag) * 8); }
.dve-poloviny ul { margin: 0; padding-left: calc(var(--shag) * 5); }
.dve-poloviny li { margin-bottom: calc(var(--shag) * 2); }

.vashi-dannye { border-color: var(--cvet-uspeh); background: var(--cvet-uspeh-fon); }
.pochemu { color: var(--cvet-tekst-vtoroy); margin-bottom: 0; }

/* ── этапы процесса ─────────────────────────────────────────────────────── */
.etapy { padding-left: calc(var(--shag) * 6); }
.etapy li { margin-bottom: calc(var(--shag) * 5); }
.etapy em { display: block; margin-top: calc(var(--shag) * 2); font-size: 0.95rem; }
.shagi { padding-left: calc(var(--shag) * 6); }
.shagi li { margin-bottom: calc(var(--shag) * 2); }

/* ── таблицы: линии, без чередующейся заливки ───────────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 0 0 calc(var(--shag) * 6);
        font-size: 0.98rem; }
th, td { text-align: left; vertical-align: top; padding: calc(var(--shag) * 3);
         border-bottom: 1px solid var(--cvet-liniya); }
th { font-family: var(--shrift-tekst); font-size: 0.85rem; text-transform: uppercase;
     letter-spacing: 0.06em; color: var(--cvet-tekst-vtoroy); font-weight: 600; }
.ceny-svod td:nth-child(2), .ceny-setka td { font-family: var(--shrift-cifry); }
.ceny-setka td:first-child { font-family: var(--shrift-tekst); }

/* ── FAQ и подвал ───────────────────────────────────────────────────────── */
#faq h3 { border-top: 1px solid var(--cvet-liniya); padding-top: calc(var(--shag) * 5); }
#faq h3:first-of-type { border-top: 0; }

footer { border-top: 1px solid var(--cvet-liniya); color: var(--cvet-tekst-vtoroy); }
.snoska { font-size: 0.85rem; color: var(--cvet-tekst-vtoroy); }

/* ── телефон: страницу читают с него ────────────────────────────────────── */
@media (max-width: 720px) {
  .polosa { padding: calc(var(--shag) * 8) calc(var(--shag) * 4); }
  .dve-poloviny { grid-template-columns: 1fr; gap: calc(var(--shag) * 5); }
  .deystviya { gap: calc(var(--shag) * 3); }
  .knopka { display: block; text-align: center; }
  table { font-size: 0.92rem; }
  th, td { padding: calc(var(--shag) * 2); }
}

/* Цифры в заголовках: у Georgia (запасной serif) старостильные цифры, и «45 000»
   в заголовке читается как «45 ooo». Числа отдаём моношрифту с обычными цифрами.
   Замечено глазами на живой странице 17.08.2026 — тесты этого не видят. */
.cifra { font-family: var(--shrift-cifry); font-size: 0.92em; letter-spacing: -0.01em;
         word-spacing: -0.12em; }  /* моно-пробел широк: разряды не должны разъезжаться */
h1 .cifra { font-size: 0.86em; }

/* Таблица сравнения на телефоне: три колонки превращаются в лапшу, поэтому
   на узком экране она становится карточками «параметр → две стороны».
   Замечено глазами при проверке на 375 px: строка «Сколько стоит» занимала экран целиком. */
@media (max-width: 720px) {
  .sravnenie-tabl, .sravnenie-tabl tbody, .sravnenie-tabl tr, .sravnenie-tabl td {
    display: block; width: 100%;
  }
  .sravnenie-tabl tr:first-child { display: none; }         /* шапка не нужна: подписи в ячейках */
  .sravnenie-tabl tr {
    border-bottom: 1px solid var(--cvet-liniya);
    padding: calc(var(--shag) * 3) 0;
  }
  .sravnenie-tabl td { border-bottom: 0; padding: calc(var(--shag) * 1) 0; }
  .sravnenie-tabl td:first-child {
    font-weight: 600; font-size: 1.02rem; margin-bottom: calc(var(--shag) * 1);
  }
  .sravnenie-tabl td:nth-child(2)::before,
  .sravnenie-tabl td:nth-child(3)::before {
    display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--cvet-tekst-vtoroy);
  }
  .sravnenie-tabl td:nth-child(2)::before { content: "в штате"; }
  .sravnenie-tabl td:nth-child(3)::before { content: "у меня на аутсорсе"; }
}