/* «Что с сайтом?» — дизайн-система «инженерное заключение».
   Тёплая бумага, документная типографика, цвет только в маркерах.
   Родство с «Начистоту»: бумага + глубокий зелёный.
   Принципы: без баллов и спидометров, без запугивания, без градиентов;
   антиква Literata — заголовки, Golos Text — текст, IBM Plex Mono — факты. */

@import url("/static/css/fonts.css");

:root {
  --paper: #f7f3ea;        /* стол */
  --paper-2: #efeadd;      /* углубление */
  --sheet: #fffdf7;        /* лист документа */
  --ink: #26221a;
  --soft: #5c564a;
  --faint: #6e6959;        /* мелкий текст: ≥4.5:1 на бумаге (WCAG AA) */
  --ghost: #8b8474;        /* только плейсхолдеры и декор — не для текста */
  --line: #e3dccb;
  --line-2: #cfc7b2;       /* граница листа, контролы */
  --green: #1d5a42;
  --green-dark: #154331;
  --green-wash: #e9efe6;
  --imp: #a6402b;          /* терракота, не сирена */
  --warn: #8a6414;
  --sans: "Golos Text", system-ui, -apple-system, sans-serif;
  --serif: "Literata", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --rc: 6px;               /* радиус контролов; документные листы — без радиуса */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font: 16px/1.6 var(--sans); color: var(--ink); background: var(--paper);
  font-feature-settings: "tnum"; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
::selection { background: var(--green); color: var(--sheet); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
h1, h2 { text-wrap: balance; }

/* служебная метка документа */
.overline { font: 500 12px/1.4 var(--mono); text-transform: uppercase;
  letter-spacing: .14em; color: var(--faint); }
.overline b { color: var(--green); font-weight: 500; }

/* ── шапка ── */
.site-head { border-bottom: 1px solid var(--line-2); background: var(--paper); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between;
  height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: 18px; letter-spacing: -.01em; color: var(--ink); text-decoration: none;
  white-space: nowrap; flex: none; }
.brand .mark { flex: none; display: block; }
/* Слои знака: уголки рамки осмотра, трасса вопроса, узлы-чекпоинты, точка-чекбокс */
.mark .m-c { stroke: var(--green); stroke-width: 2.2;
  transition: transform .18s ease; }
.mark .m-t { stroke: var(--ink); stroke-width: 2.7; }
.mark .m-d { fill: var(--green); }
.brand:hover .m-c1 { transform: translate(1.4px, 1.4px); }
.brand:hover .m-c2 { transform: translate(-1.4px, 1.4px); }
.brand:hover .m-c3 { transform: translate(-1.4px, -1.4px); }
.brand:hover .m-c4 { transform: translate(1.4px, -1.4px); }
.ic { flex: none; vertical-align: -3px; }
.site-head nav { display: flex; gap: 22px; }
.site-head nav a { font: 500 12.5px/1 var(--mono); text-transform: uppercase;
  letter-spacing: .08em; color: var(--soft); text-decoration: none; padding: 23px 0;
  white-space: nowrap; }
.site-head nav a:hover { color: var(--green); }

/* ── герой ── */
.hero { padding: 72px 0 40px; max-width: 720px; }
.hero .overline { margin-bottom: 18px; }
h1 { font: 600 clamp(30px, 5vw, 46px)/1.12 var(--serif); letter-spacing: -.01em; }
.lede { margin-top: 16px; max-width: 620px; color: var(--soft); font-size: 17px; }
.check-form { margin-top: 28px; display: flex; gap: 10px; max-width: 640px; }
/* «Рамка осмотра» из логотипа наводится на поле адреса при фокусе */
.scope { position: relative; display: flex; flex: 1; min-width: 0; }
.scope::before, .scope::after { content: ""; position: absolute; width: 13px; height: 13px;
  border: 2px solid var(--green); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; }
.scope::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0;
  transform: translate(5px, 5px); }
.scope::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0;
  transform: translate(-5px, -5px); }
.scope:focus-within::before, .scope:focus-within::after { opacity: 1; transform: none; }
.check-form input { flex: 1; width: 100%; min-width: 0; padding: 13px 15px;
  font: 400 15px/1.4 var(--mono);
  color: var(--ink); background: var(--sheet); border: 1px solid var(--line-2);
  border-radius: var(--rc); }
::placeholder { color: var(--ghost); opacity: 1; }
.check-form input:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(29 90 66 / .14); }
.check-form button, .btn-primary { padding: 13px 26px; font: 600 15.5px/1.4 var(--sans);
  color: var(--sheet); background: var(--green); border: 0; border-radius: var(--rc);
  cursor: pointer; transition: background-color .14s ease; }
.check-form button:hover, .btn-primary:hover { background: var(--green-dark); }
a.btn-primary { display: inline-block; text-decoration: none; }
.hero-sub { margin-top: 18px; max-width: 560px; color: var(--faint); font-size: 14px;
  padding-left: 12px; border-left: 2px solid var(--line-2); }
.hero-alt { margin-top: 26px; color: var(--soft); font-size: 15px; }
.form-error { margin-top: 12px; color: var(--imp); font-weight: 500; }
.lede-left { text-align: left; }
.lede-bottom { margin: 26px 0 72px; }
.cta-btn-row { margin-top: 16px; }

/* ── «что проверяем» и «как это работает» — документные строки ── */
.how { padding: 26px 0 72px; }
.how h2, .checks h2 { font: 600 24px/1.2 var(--serif); margin-bottom: 6px; }
.checks { padding: 26px 0 10px; border-top: 1px solid var(--line-2); }
.checks-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 40px; border-top: 1px solid var(--line); }
.check-item { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 14px; align-items: flex-start; }
.check-item .ic { color: var(--green); margin-top: 3px; }
.check-item b { font-weight: 600; display: block; }
.check-item span { display: block; color: var(--soft); font-size: 14px; margin-top: 2px; }
.steps { list-style: none; counter-reset: n; margin-top: 16px; border-top: 1px solid var(--line); }
.steps li { counter-increment: n; display: flex; gap: 20px; padding: 18px 0;
  border-bottom: 1px solid var(--line); color: var(--soft); }
.steps li::before { content: "0" counter(n); font: 500 15px/1.5 var(--mono);
  color: var(--green); flex: none; width: 34px; }
.steps strong { color: var(--ink); font-weight: 600; }

/* ── ожидание: честный список работ, без процентов ── */
.waiting { padding: 72px 0 90px; max-width: 640px; }
.waiting .overline { margin-bottom: 14px; }
.waiting h1 { margin-bottom: 26px; }
.wait-bar { height: 3px; background: var(--line); overflow: hidden; position: relative; }
.wait-bar i { position: absolute; inset: 0; width: 30%; background: var(--green);
  animation: sweep 1.8s ease-in-out infinite; }
@keyframes sweep { 0% { left: -30%; } 100% { left: 100%; } }
.wait-list { list-style: none; margin-top: 22px; }
.wait-list li { padding: 9px 0 9px 26px; position: relative; color: var(--soft);
  font: 400 14.5px/1.5 var(--mono); border-bottom: 1px dotted var(--line); }
.wait-list li::before { content: ""; position: absolute; left: 2px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-2);
  animation: probe 10.5s linear infinite; }
.wait-list li:nth-child(1)::before { animation-delay: 0s; }
.wait-list li:nth-child(2)::before { animation-delay: 1.5s; }
.wait-list li:nth-child(3)::before { animation-delay: 3s; }
.wait-list li:nth-child(4)::before { animation-delay: 4.5s; }
.wait-list li:nth-child(5)::before { animation-delay: 6s; }
.wait-list li:nth-child(6)::before { animation-delay: 7.5s; }
.wait-list li:nth-child(7)::before { animation-delay: 9s; }
@keyframes probe { 0%, 12% { border-color: var(--green); background: var(--green); }
  13%, 100% { border-color: var(--line-2); background: transparent; } }
.wait-note { margin-top: 20px; color: var(--faint); font-size: 14px; }

/* ── шапка отчёта / документа ── */
.report-head { padding: 44px 0 6px; }
.crumb { margin-bottom: 26px; font-size: 14px; }
.crumb a { color: var(--faint); text-decoration: none; }
.crumb a:hover { color: var(--green); }
.report-head .overline { margin-bottom: 12px; }
h1.domain { font: 500 clamp(24px, 4vw, 34px)/1.2 var(--mono); letter-spacing: -.02em;
  word-break: break-all; }
.recent-note { margin-top: 16px; padding: 12px 16px; background: var(--paper-2);
  border-left: 2px solid var(--line-2); color: var(--soft); font-size: 14px; }
.legend { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.lg { font: 500 13.5px/1.6 var(--mono); color: var(--soft); }
.lg::before { content: ""; display: inline-block; width: 9px; height: 9px;
  margin-right: 8px; background: var(--line-2); }
.lg-imp::before { background: var(--imp); }
.lg-impr::before { background: var(--warn); }
.lg-ok::before { background: var(--green); }

/* ── листы отчёта ── */
.sev { margin-top: 28px; background: var(--sheet); border: 1px solid var(--line-2);
  border-top-width: 3px; padding: 22px 26px 14px; }
.sev-important { border-top-color: var(--imp); }
.sev-improve { border-top-color: var(--warn); }
.sev-ok { border-top-color: var(--green); }
.sev-skip { border-top-color: var(--line-2); }
.sev h2 { font: 600 14px/1.4 var(--sans); text-transform: uppercase;
  letter-spacing: .07em; margin-bottom: 8px; }
.sev-important h2 { color: var(--imp); }
.sev-improve h2 { color: var(--warn); }
.sev-ok h2 { color: var(--green); }
.sev-skip h2 { color: var(--soft); }
.grp-title { margin: 18px 0 2px; font: 500 11.5px/1.6 var(--mono);
  text-transform: uppercase; letter-spacing: .12em; color: var(--faint);
  display: flex; align-items: center; gap: 8px; }
.finding { display: flex; gap: 14px; padding: 12px 4px; cursor: pointer;
  border-bottom: 1px dotted var(--line); transition: background-color .14s ease; }
.finding:last-child { border-bottom: 0; }
.finding:hover { background: var(--paper-2); }
.finding-meta { cursor: default; }
.finding-meta:hover { background: none; }
.finding input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--green);
  flex: none; }
.f-body { display: block; min-width: 0; }
.f-title { display: block; font-weight: 600; }
.f-detail { display: block; margin-top: 3px; color: var(--soft); font-size: 14.5px; }
.f-evid { display: inline-block; margin-top: 7px; padding: 2px 8px;
  background: var(--paper-2); color: var(--soft); font: 400 12.5px/1.7 var(--mono);
  word-break: break-all; }
.ok-list, .skip-list { list-style: none; margin: 4px 0 8px; }
.ok-list li, .skip-list li { padding: 7px 0 7px 24px; position: relative;
  color: var(--soft); font-size: 15px; border-bottom: 1px dotted var(--line); }
.ok-list li:last-child, .skip-list li:last-child { border-bottom: 0; }
.ok-list li::before { content: ""; position: absolute; left: 1px; top: 11px;
  width: 14px; height: 14px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%231D5A42" stroke-width="2.25" stroke-linecap="square"><path d="M4.75 12.75l4.75 4.75L19.25 6.5"/></svg>') no-repeat center / contain; }
.skip-list li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
.skip-note { color: var(--faint); font-size: 14px; margin-bottom: 6px; }

/* мобильный скриншот в отчёте */
.sev-mobile { border-top-color: var(--line-2); }
.sev-mobile h2 { color: var(--soft); }
.mobile-shot { display: block; width: 280px; max-width: 100%; margin: 10px 0 12px;
  border: 1px solid var(--line-2); }

/* ── переход к ТЗ: продолжение отчёта, не апселл ── */
.cta { margin: 30px 0 72px; background: var(--sheet); border: 1px solid var(--line-2);
  border-top: 3px solid var(--green); padding: 28px; }
.cta h2 { font: 600 22px/1.25 var(--serif); }
.cta p { margin: 10px 0 20px; max-width: 620px; color: var(--soft); }

/* ── выбор типа проекта ── */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin: 26px 0 10px; counter-reset: t; }
.type-card { counter-increment: t; display: block; background: var(--sheet);
  border: 1px solid var(--line-2); padding: 18px 20px; font-weight: 600;
  color: var(--ink); text-decoration: none; transition: border-color .14s ease; }
.type-card::before { content: "0" counter(t); display: block; font: 500 12px/1 var(--mono);
  color: var(--green); margin-bottom: 10px; }
.type-card:hover { border-color: var(--green); }

/* ── анкета ТЗ ── */
.tz-form { margin: 10px 0 72px; }
.q { border: 1px solid var(--line-2); background: var(--sheet); padding: 18px 22px;
  margin-bottom: 14px; }
.q legend { font-weight: 600; padding: 0 6px; }
.q .opt { color: var(--faint); font-weight: 400; font-size: 13px; }
.q-hint { color: var(--faint); font-size: 14px; margin: 4px 0 8px; }
.q-opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px;
  cursor: pointer; transition: background-color .14s ease; }
.q-opt:hover { background: var(--paper-2); }
.q-opt input { margin-top: 4px; accent-color: var(--green); flex: none; }
.q textarea { width: 100%; border: 1px solid var(--line-2); padding: 10px 12px;
  font: inherit; color: var(--ink); background: var(--sheet); border-radius: var(--rc); }
.q textarea:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(29 90 66 / .14); }
.tz-form .btn-primary { width: 100%; margin-top: 6px; }

/* ── документ ТЗ ── */
.doc-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.doc-actions a { display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 17px; font: 500 13px/1.5 var(--mono);
  color: var(--green); border: 1px solid var(--line-2); border-radius: var(--rc);
  text-decoration: none; transition: border-color .14s ease; }
.doc-actions a:hover { border-color: var(--green); }
.spec-sub { display: block; margin-top: 10px; font: 400 15px/1.5 var(--mono);
  color: var(--soft); letter-spacing: 0; }
.spec { background: var(--sheet); border: 1px solid var(--line-2); padding: 8px 30px 22px;
  margin-top: 22px; }
.spec-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.spec-sec:last-child { border-bottom: 0; }
.spec-sec h2 { font: 600 17px/1.35 var(--sans); margin-bottom: 8px; }
.spec-sec h2 .sec-n { font: 500 13px/1 var(--mono); color: var(--green); margin-right: 8px; }
.spec-item { margin: 6px 0; }
.spec-works { margin: 6px 0 6px 22px; }
.spec-works li { margin: 5px 0; }
.spec-extra { margin-top: 8px; color: var(--soft); font-size: 14.5px; }
.lead-form { display: grid; gap: 10px; max-width: 460px; }
.lf-label { justify-self: start; margin-bottom: -4px; font-weight: 600; font-size: 14px; }
.lf-label .opt { color: var(--faint); font-weight: 400; font-size: 12.5px; }
.lead-form input { padding: 12px 15px; border: 1px solid var(--line-2);
  border-radius: var(--rc); font: inherit; background: var(--sheet); color: var(--ink); }
.lead-form input:focus { outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgb(29 90 66 / .14); }
.spec-delete { margin: 0 0 72px; color: var(--faint); font-size: 13.5px;
  display: flex; align-items: center; gap: 10px; }
.spec-delete button { background: none; border: 1px solid var(--line-2);
  border-radius: var(--rc); padding: 7px 12px; color: var(--soft); cursor: pointer;
  font: 500 12.5px/1.5 var(--mono); transition: border-color .14s ease, color .14s ease;
  display: inline-flex; align-items: center; gap: 7px; }
.spec-delete button:hover { color: var(--imp); border-color: var(--imp); }

/* ── подвал ── */
.site-foot { border-top: 1px solid var(--line-2); padding: 30px 0 44px; }
.foot-nav { display: flex; gap: 56px; flex-wrap: wrap; margin: 0 0 26px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line-2); }
.foot-col { display: flex; flex-direction: column; gap: 1px; min-width: 200px; }
.foot-head { margin: 0 0 4px; color: var(--faint); font: 600 11px/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase; }
.foot-col a { color: var(--soft); font-size: 13.5px; text-decoration: none;
  padding: 6px 0;
  width: fit-content; padding: 6px 0; /* область нажатия ≥32pt — по своей же проверке */ }
.foot-col a:hover { color: var(--green); text-decoration: underline; }
.foot-note { color: var(--faint); font-size: 13px; max-width: 640px; }
.foot-req { margin-top: 12px; color: var(--faint); font-size: 12.5px; max-width: 640px; }
.foot-req a { color: var(--soft); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 2px;
  color: var(--soft); font-size: 13px; line-height: 1.5; max-width: 560px; cursor: pointer; }
/* сброс: .lead-form input задаёт padding и рамку полей ввода — чекбоксу они вредят */
.consent input { margin: 2px 0 0; width: 16px; height: 16px; flex: none;
  padding: 0; border: 0; background: none; accent-color: var(--green); }
a.made-by { display: inline-flex; align-items: center; margin-top: 20px; padding: 12px 17px;
  border: 1px solid var(--line-2); border-radius: 999px; color: var(--soft);
  font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none;
  transition: border-color .15s ease, color .15s ease; }
a.made-by:hover { color: var(--green); border-color: var(--green); }

@media (max-width: 620px) {
  .hero { padding-top: 48px; }
  .check-form { flex-direction: column; }
  .checks-grid { grid-template-columns: 1fr; }
  .sev { padding: 18px 16px 10px; }
  .spec { padding: 4px 18px 16px; }
  .site-head nav { gap: 14px; }
  .site-head nav a[href="/#how"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wait-bar i, .wait-list li::before { animation: none; }
  .scope::before, .scope::after { transition: none; transform: none; }
}

/* ── печать/PDF ── */
@media print {
  .site-head, .site-foot, .cta, .spec-delete, .crumb, .doc-actions,
  .legend { display: none !important; }
  body { background: #fff; }
  .spec { border: 0; padding: 0; }
}

.waiting-fail { color: var(--imp, #a6402b); margin-top: 8px; }
.waiting-fail a { color: var(--green, #1d5a42); }