/* ЖКХ понятным языком — общий стиль сайта.
   СМЕШАННЫЙ вид (решение владельца 03.10.2026): современный каркас + тетрадный лист с кляксами на полях.
   Заголовки — ЧЁТКИМ шрифтом (без прописи: она «сливается, нет чёткости»).
   Большой шрифт и высокий контраст: аудитория 45+ читает с телефона. */

/* Шрифты-образцы в этот архив не входят: заголовки набраны системным шрифтом (Segoe UI),
   а страница-образец шрифтов на хостинг не загружается. Лишние объявления убраны,
   чтобы браузер не искал несуществующие файлы. */

:root {
  --текст: #17202a;
  --тихо: #5b6b7a;
  --синяя: #1c5aa0;
  --тёмная: #0f3a63;
  --фон: #ffffff;
  --рамка: #dfe6ee;
  --подсветка: #eef4fb;
  --чернила: #12406f;
  --жёлтый: #ffc72c;
  /* Чёткие шрифты: заголовки и текст — без прописи и завитков */
  --заголовки: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --обычный: "PT Sans", "Segoe UI", system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--обычный);
  font-size: 19px;
  line-height: 1.6;
  color: var(--текст);
  /* Тетрадный лист в клетку: очень бледная сетка, чтобы текст читался легко */
  background-color: var(--фон);
  background-image:
    linear-gradient(#e8eff9 1px, transparent 1px),
    linear-gradient(90deg, #e8eff9 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-attachment: fixed;
}

/* Красное поле тетради справа: на телефоне — тонкая линия у правого края экрана */
@media (max-width: 899px) {
  body::before {
    content: "";
    position: fixed;
    right: 10px;
    left: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #eaa6a6;
    z-index: 0;
  }
}

/* Лист: полупрозрачная бумага поверх клетки */
.wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 56px;
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, .74);
}

header.site {
  border-bottom: 1px solid var(--рамка);
  padding: 14px 0;
  margin-bottom: 26px;
}
header.site a { color: var(--тихо); text-decoration: none; font-size: 17px; }
header.site b { color: var(--чернила); font-size: 25px; font-family: var(--заголовки); font-weight: 700; letter-spacing: .2px; }

h1, h2, h3 { font-family: var(--заголовки); font-weight: 700; color: var(--чернила); letter-spacing: -.2px; }

h1 { font-size: 32px; line-height: 1.18; margin: 0 0 18px; }

/* Нарядная черта под главным заголовком */
h1::after {
  content: "";
  display: block;
  width: 190px;
  height: 12px;
  margin-top: 10px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 12'><path d='M3 9 q 23 -9 46 0 t 46 0 t 46 0 t 43 0' fill='none' stroke='%231c5aa0' stroke-width='2.6' stroke-linecap='round'/><circle cx='95' cy='3' r='2.6' fill='%231c5aa0'/></svg>");
}
.шапка-цвет h1::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 12'><path d='M3 9 q 23 -9 46 0 t 46 0 t 46 0 t 43 0' fill='none' stroke='%23cfe3f7' stroke-width='2.6' stroke-linecap='round'/><circle cx='95' cy='3' r='2.6' fill='%23cfe3f7'/></svg>");
}

h2 {
  font-size: 26px;
  line-height: 1.28;
  margin: 42px 0 14px;
  padding-left: 14px;
  border-left: 5px solid var(--синяя);
  padding-bottom: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='8'><path d='M2 5 q 14 -5 28 0 t 28 0 t 28 0 t 28 0' fill='none' stroke='%23a9c6e4' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: repeat-x;
  background-position: left bottom;
}
h3 { font-size: 21px; line-height: 1.3; margin: 28px 0 10px; }
p { margin: 0 0 17px; }
ul, ol { margin: 0 0 18px; padding-left: 26px; }
li { margin-bottom: 10px; }
a { color: var(--синяя); }

/* Нумерованные шаги: кружки с цифрами — видно, что это порядок действий */
ol.шаги { counter-reset: шаг; list-style: none; padding-left: 0; }
ol.шаги > li { counter-increment: шаг; position: relative; padding-left: 46px; margin-bottom: 14px; }
ol.шаги > li::before {
  content: counter(шаг);
  position: absolute; left: 0; top: 1px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--синяя); background: var(--подсветка); color: var(--синяя);
  font-weight: 700; text-align: center; line-height: 28px; font-size: 17px;
}

/* Короткий ответ на странице */
.ответ {
  background: var(--подсветка);
  border-left: 4px solid var(--синяя);
  border-radius: 0 12px 12px 0;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: 20px;
}

/* Цифры: чуть крупнее текста, чернильным цветом — чтобы было видно */
.цифра { font-weight: 700; white-space: nowrap; font-size: 1.08em; color: var(--чернила); }

.карточки { display: grid; gap: 12px; margin: 18px 0 8px; }
.карточка {
  border: 1px solid var(--рамка);
  border-top: 4px solid var(--синяя);
  border-radius: 14px;
  padding: 16px 18px;
  background: #fff;
}
.карточки .карточка:nth-child(3n+2) { border-top-color: #1b7f3b; }
.карточки .карточка:nth-child(3n+3) { border-top-color: #c98a1b; }
.карточка a { font-size: 20px; font-weight: 700; text-decoration: none; }
.карточка p { margin: 6px 0 0; color: var(--тихо); font-size: 17px; }

.кнопка {
  display: inline-block;
  background: var(--синяя);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.кнопка:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28, 90, 160, .25); }

.кнопка-широкая {
  display: block; text-align: center; background: var(--синяя); color: #fff; text-decoration: none;
  font-weight: 700; padding: 16px 18px; border-radius: 10px; font-size: 20px; margin: 18px 0 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.кнопка-широкая:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28, 90, 160, .25); }

.источник { color: var(--тихо); font-size: 16px; }

/* Цветная полоса в шапке (оставлена для совместимости) */
.шапка-цвет {
  background: linear-gradient(135deg, #0f3a63 0%, #1c5aa0 100%);
  color: #fff;
  padding: 26px 0 22px;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}
.шапка-цвет h1 { color: #fff; margin-bottom: 10px; }
.шапка-цвет p { color: #e6f0fa; font-size: 19px; margin: 0; }

/* Схема-время: три месяца по среднему, дальше норматив с коэффициентом */
.схема { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.схема div {
  flex: 1 1 180px; border: 2px solid var(--рамка); border-radius: 10px; padding: 12px 14px;
  font-size: 17px;
}
.схема div b { display: block; font-size: 19px; margin-bottom: 4px; }
.схема .первый { border-color: #1b7f3b; }
.схема .второй { border-color: #b3261e; }

/* Таблица «начислено — должно быть — разница» */
.расчёт { width: 100%; border-collapse: collapse; font-size: 17px; margin: 14px 0; }
.расчёт th, .расчёт td { border: 1px solid var(--рамка); padding: 9px 10px; text-align: left; }
.расчёт th { background: var(--подсветка); }
.расчёт .плюс { color: #b3261e; font-weight: 700; }

/* Прокрутка широкой таблицы на телефоне: не сжимается, а едет пальцем */
.таблица-прокрутка { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.таблица-прокрутка .расчёт { min-width: 460px; }

/* Два случая: законно / незаконно */
.случая { display: grid; gap: 12px; margin: 16px 0 20px; }
.случай { border-radius: 12px; padding: 14px 16px; border: 2px solid var(--рамка); }
.случай.плохо { border-color: #b3261e; background: #fdf4f3; }
.случай.хорошо { border-color: #1b7f3b; background: #f2faf4; }
.случай b { display: block; font-size: 20px; margin-bottom: 6px; }
.случай ul { margin: 6px 0 0; padding-left: 22px; }

/* Блок сроков */
.сроки { background: var(--подсветка); border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.сроки b { font-size: 20px; }
.сроки ul { margin: 8px 0 0; padding-left: 22px; }

/* Лента времени */
.лента { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin: 18px 0 10px; }
.лента .шаг { flex: 1 1 190px; border: 2px solid var(--рамка); border-radius: 12px; padding: 14px 16px;
  position: relative; background: #fff; }
.лента .шаг b { display: block; font-size: 19px; margin-bottom: 6px; }
.лента .шаг .номер { position: absolute; top: -12px; left: 14px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--синяя); color: #fff; font-size: 15px; font-weight: 700; text-align: center; line-height: 26px; }
.лента .шаг.ок, .лента .шаг.возврат { border-color: #1b7f3b; background: #f4fbf6; }
.лента .шаг.дорого { border-color: #b3261e; background: #fdf4f3; }
@media (min-width: 900px) {
  .лента { gap: 34px; }
  .лента .шаг::after { content: "→"; position: absolute; right: -26px; top: 50%; transform: translateY(-50%);
    color: var(--тихо); font-size: 26px; }
  .лента .шаг:last-child::after { content: ""; }
}

/* Схема квитанции */
.схема-квитанции { display: block; width: 100%; max-width: 560px; height: auto; margin: 16px auto 8px; }

/* Полоски в калькуляторе */
.полоска-строка { margin: 0 0 14px; }
.полоска-строка .название { display: flex; justify-content: space-between; gap: 10px; font-size: 18px; margin-bottom: 4px; }
.полоска { height: 26px; border-radius: 6px; background: #eef2f7; overflow: hidden; }
.полоска i { display: block; height: 100%; border-radius: 6px; transition: width .35s ease; }
.полоска .начислено { background: #d9483b; }
.полоска .счётчик { background: #1b7f3b; }
.полоска .разница { background: #b3261e; }

footer {
  border-top: 1px solid var(--рамка);
  margin-top: 40px;
  padding-top: 16px;
  color: var(--тихо);
  font-size: 16px;
}

/* --- Детали первого экрана главной (синяя карточка, цифры, квитанция на полях) --- */
.герой {
  position: relative;
  background: linear-gradient(150deg, #0f3a63 0%, #1c5aa0 65%, #2a6fbd 100%);
  color: #fff;
  border-radius: 16px;
  padding: 30px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  box-shadow: 0 16px 34px rgba(15, 58, 99, .2);
  margin: 6px 0 22px;
}
.герой h1 { color: #fff; }
.герой p { font-size: 18px; color: #d7e6f7; margin: 0 0 18px; }
.герой .кнопка { background: var(--жёлтый); color: #20272e; }
.герой .кнопка.пусто { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .65); box-shadow: none; }
.кнопки { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.мелочь { font-size: 14px; color: #bcd3ea; margin: 12px 0 0; }

/* Крупные цифры внутри текста первого экрана */
.крупно { font-size: 1.3em; font-weight: 800; color: var(--жёлтый); letter-spacing: .3px; }

/* Цифры напротив текста */
.цифры-героя { display: grid; gap: 14px; max-width: 222px; }
.цифры-героя .строка { border-left: 4px solid rgba(255, 255, 255, .45); padding-left: 14px; }
.цифры-героя b { display: block; font-size: 36px; line-height: 1.05; color: #ffd75e; font-weight: 800; letter-spacing: -.5px; }
.цифры-героя span { display: block; font-size: 15px; color: #cfe2f6; margin-top: 4px; }

/* Полоса из трёх цифр */
.числа {
  background: var(--подсветка);
  border: 1px solid var(--рамка);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  text-align: center;
  margin: 0 0 30px;
}
.числа b { display: block; font-size: 30px; color: var(--чернила); line-height: 1.1; }
.числа span { font-size: 15px; color: var(--тихо); }

.сетка { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.плашка { background: var(--подсветка); border-left: 5px solid var(--синяя); border-radius: 12px; padding: 18px 20px; font-size: 17px; }
.зов {
  background: var(--тёмная); color: #fff; border-radius: 16px; padding: 26px;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; align-items: center;
}
.зов h2 { color: #fff; margin: 0 0 6px; border-left: 0; padding-left: 0; background-image: none; }
.зов p { color: #cddff2; margin: 0; }
.зов .кнопка { background: var(--жёлтый); color: #20272e; }

/* Плавное появление блоков при прокрутке */
.появится { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.появится.видно { opacity: 1; transform: none; }

/* Картинка-квитанция */
.картинка svg { width: 100%; height: auto; display: block; }

/* Места, которые владелец должен заполнить перед публикацией */
.вписать { background: #fff6cc; border-bottom: 2px dashed #d9a600; padding: 0 4px; white-space: nowrap; }

/* Штамп «Проверено» — как печать на бумаге */
.штамп {
  display: inline-block;
  border: 3px double #c8564a;
  color: #b3261e;
  background: #fdf3f2;
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--заголовки);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: .3px;
  transform: rotate(-2deg);
  margin: 16px 0 6px;
  max-width: 420px;
}

/* Заметка-стикер */
.заметка {
  background: #fff8d6;
  border: 1px solid #e9db96;
  border-radius: 4px;
  box-shadow: 2px 3px 0 rgba(20, 40, 70, .08);
  padding: 10px 14px;
  margin: 18px 0;
  font-family: var(--обычный);
  font-size: 18px;
  line-height: 1.4;
  color: #5a4a12;
  transform: rotate(-1.2deg);
  max-width: 520px;
}

/* ПК и большие экраны: лист шире, красное поле справа, кляксы на полях */
@media (min-width: 900px) {
  .wrap {
    max-width: 940px;
    padding: 0 118px 64px 112px;
    border-right: 2px solid #eaa6a6;
    background-color: rgba(255, 255, 255, .78);
  }
  h1 { font-size: 38px; margin-bottom: 20px; }
  h2 { font-size: 29px; margin-top: 40px; }
  h3 { font-size: 23px; }
  .ответ { font-size: 21px; padding: 16px 18px; }
  p { margin-bottom: 19px; }
  li { margin-bottom: 12px; }
  .карточки { grid-template-columns: 1fr 1fr; gap: 14px; }
  .случая { grid-template-columns: 1fr 1fr; gap: 16px; }
  .карточка { transition: box-shadow .18s ease, transform .18s ease; }
  .карточка:hover { box-shadow: 0 12px 26px rgba(15, 58, 99, .12); transform: translateY(-3px); }
  .кнопка-широкая { max-width: 620px; margin: 24px auto 8px; }
  .таблица-прокрутка { overflow-x: visible; }
  .таблица-прокрутка .расчёт { min-width: 0; }
  .расчёт { font-size: 18px; }
  .расчёт th, .расчёт td { padding: 11px 14px; }
  .шапка-цвет { padding: 34px 0 28px; margin-bottom: 32px; }
  .схема div { flex: 1 1 240px; padding: 14px 16px; }
  ol.шаги > li { padding-left: 52px; }
  .герой { grid-template-columns: 1fr 230px; padding: 34px 30px; gap: 26px; }
  .герой p { max-width: 34em; }
  .картинка { position: absolute; right: -157px; top: 50%; width: 244px; z-index: 6;
    transform: translateY(-50%) rotate(1.8deg); }
  .картинка svg { filter: drop-shadow(0 10px 22px rgba(15, 58, 99, .28)); }
  .заметка { font-size: 19px; }

  /* Скрепка в шапке страницы */
  header.site { position: relative; padding-right: 46px; }
  header.site::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 2px;
    width: 26px;
    height: 44px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 46'><path d='M8 12 v22 a5 5 0 0 0 10 0 V14 a3 3 0 0 0 -6 0 v19 a1 1 0 0 0 2 0 V14' fill='none' stroke='%238b9aab' stroke-width='2.2' stroke-linecap='round'/></svg>");
  }

  /* Кляксы: две справа и три слева — по всему листу, сверху пусто */
  .wrap {
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 86px 86px, 94px 94px, 74px 74px, 88px 88px, 66px 66px;
    background-position: right 14px top 22%, right 20px top 66%,
                         left 8px top 30%, left 14px top 55%, left 6px top 80%;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 8c17 0 30 9 34 25 4 15-3 30-18 37-13 6-28 4-37-5-9-9-13-25-7-38C27 15 37 8 50 8z' fill='%230f3a63' fill-opacity='0.83'/><path d='M45 24c11-3 22 2 25 13 3 11-2 22-12 27-9 4-20 2-25-6-5-9-4-20 2-27 2-3 6-6 10-7z' fill='%230b2c4d' fill-opacity='0.9'/><circle cx='84' cy='76' r='7' fill='%230f3a63' fill-opacity='0.8'/><circle cx='92' cy='58' r='4' fill='%230f3a63' fill-opacity='0.75'/><circle cx='14' cy='84' r='5' fill='%230f3a63' fill-opacity='0.7'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 7c18 0 31 10 35 26 4 16-4 31-19 38-14 6-30 4-39-6-9-10-12-27-6-40C26 13 37 7 50 7z' fill='%230b2c4d' fill-opacity='0.82'/><path d='M45 23c11-3 22 2 25 13 3 12-2 23-12 28-10 4-21 2-26-7-5-9-4-21 3-28 2-3 6-5 10-6z' fill='%230f3a63' fill-opacity='0.9'/><circle cx='86' cy='78' r='6.4' fill='%230b2c4d' fill-opacity='0.78'/><circle cx='93' cy='60' r='3.4' fill='%230f3a63' fill-opacity='0.72'/><circle cx='12' cy='88' r='4.4' fill='%230f3a63' fill-opacity='0.7'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path d='M40 5c14 0 25 8 27 21 2 13-6 24-18 28-11 3-24-1-29-11-5-10-2-24 7-31 4-4 8-6 13-6z' fill='%230f3a63' fill-opacity='0.82'/><path d='M36 19c9-2 17 2 19 11 2 8-3 16-11 18-7 2-15-1-18-8-3-7 0-16 6-19 1-1 3-1 4-2z' fill='%230b2c4d' fill-opacity='0.88'/><circle cx='66' cy='60' r='4.6' fill='%230f3a63' fill-opacity='0.72'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'><path d='M44 6c15 0 27 9 29 22 2 14-6 26-19 31-12 4-25 1-32-9-7-10-8-25-1-35C26 9 34 6 44 6z' fill='%230b2c4d' fill-opacity='0.8'/><path d='M40 20c10-2 19 3 21 12 2 10-4 19-13 21-8 2-17-2-20-10-3-8 0-17 6-21 2-1 4-2 6-2z' fill='%230f3a63' fill-opacity='0.88'/><circle cx='76' cy='68' r='6' fill='%230b2c4d' fill-opacity='0.75'/><circle cx='83' cy='52' r='3.4' fill='%230f3a63' fill-opacity='0.7'/></svg>"),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M31 4c11 0 19 6 21 16 2 11-5 20-15 22-9 2-19-2-22-11-3-9 0-19 8-24 3-2 5-3 8-3z' fill='%230f3a63' fill-opacity='0.82'/><circle cx='53' cy='48' r='4.4' fill='%230f3a63' fill-opacity='0.75'/><circle cx='59' cy='36' r='2.4' fill='%230b2c4d' fill-opacity='0.7'/></svg>");
  }

  /* На синей шапке клякс нет */
  .шапка-цвет .wrap { background-image: none; }
}

/* Очень широкий монитор: лист шире */
@media (min-width: 1250px) {
  .wrap { max-width: 1040px; }
  .карточки { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1500px) {
  .wrap { max-width: 1060px; }
}

/* Статья на ПК: текст + боковое оглавление */
.боковая { display: none; }
@media (min-width: 1100px) {
  .wrap.двухколонка {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 30px 40px;
    align-items: start;
    max-width: 1180px;
  }
  .wrap.двухколонка > header.site { grid-column: 1 / -1; }
  .wrap.двухколонка > main { grid-column: 1; min-width: 0; }
  .wrap.двухколонка > .боковая { grid-column: 2; }
  .wrap.двухколонка > footer { grid-column: 1 / -1; }
  .wrap.двухколонка .боковая { display: block; position: sticky; top: 16px; }
  .боковой-блок { border: 1px solid var(--рамка); border-top: 4px solid var(--синяя);
    border-radius: 12px; padding: 14px 16px; background: #fff; margin-bottom: 16px; }
  .боковой-блок b { display: block; font-size: 19px; margin-bottom: 8px; }
  .боковой-блок p { font-size: 17px; color: var(--тихо); }
  .оглавление { list-style: none; padding-left: 0; margin: 0; }
  .оглавление li { margin-bottom: 8px; }
  .оглавление a { text-decoration: none; font-size: 17px; }
  .оглавление a:hover { text-decoration: underline; }
  .боковой-блок.набор { border-top-color: #1b7f3b; }
}

/* Печать: памятку со страницы можно распечатать без картинок и меню, клетку не печатаем */
@media print {
  header.site, .кнопка, footer { display: none; }
  body { font-size: 13pt; background: #fff; background-image: none; }
  body::before { display: none; }
  .wrap { background-image: none; background-color: #fff; }
  a { color: #000; text-decoration: none; }
}