/* ======================================================================
   Арсдок — site.css
   Каркас публичного сайта: топбар, навигация, секции, процесс, CTA, подвал, хлебные крошки.
   Подключается: index.html, about.html и 6 страниц услуг
   ====================================================================== */

.topbar{ background:var(--ink); color:#cfd4e0; font-size:13px; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar-left{ display:flex; gap:24px; align-items:center; }
.topbar-left span{ color:#8f97ab; }
.topbar a:hover{ color:#fff; }
/* min-width:0 разрешает меню сжиматься, а не выдавливать соседей; overflow-x —
   страховка: если пунктов однажды станет больше, меню прокрутится, а не наедет
   на логотип. Полосу прокрутки прячем, она тут только на крайний случай. */
nav.main{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; min-width:0; overflow-x:auto; scrollbar-width:none; }
nav.main::-webkit-scrollbar{ display:none; }
nav.main a{
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  position:relative; padding: 4px 0; white-space:nowrap;
}
nav.main a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--gold); transform: scaleX(0); transition: transform .2s ease;
}
nav.main a:hover::after{ transform: scaleX(1); }
.crumbs{ padding: 20px 0 0; font-size:13px; color:var(--text-muted); }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ margin:0 8px; opacity:.5; }
section{ padding: 70px 0; border-top:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; display:block; }
h2{ font-family:'PT Serif',serif; font-size:clamp(24px,2.6vw,32px); font-weight:700; line-height:1.22; }
.section-head p{ color:var(--text-muted); font-size:15px; margin-top:12px; }
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.process-grid::before{ content:''; position:absolute; top:22px; left:5%; right:5%; height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 8px, transparent 8px 16px); }
.process-step{ padding:0 16px; position:relative; }
.process-step .n{ width:44px; height:44px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink); color:var(--ink); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; position:relative; z-index:2; margin-bottom:18px; }
.process-step:first-child .n{ background:var(--ink); color:var(--paper); }
.process-step h4{ font-family:'PT Serif',serif; font-size:15px; font-weight:700; margin-bottom:8px; }
.process-step p{ font-size:13px; color:var(--text-muted); }
.cta-band{ background:var(--ink); color:#eef0ec; text-align:center; border-top:none; }
.cta-band h2{ color:#f5f3ea; margin-bottom:14px; }
.cta-band p{ color:#aab0c0; max-width:480px; margin:0 auto 28px; }
.cta-band .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-outline-light{ border:1px solid #5b6478; color:#e7e9ee; background:transparent; }
.btn-outline-light:hover{ border-color:var(--gold-2); color:var(--gold-2); }
footer{ background:var(--paper-2); border-top:1px solid var(--line); padding:50px 0 26px; }
/* Подвал одинаков на всех публичных страницах. Раньше полная версия
   с колонками была только на главной, и со внутренних страниц ни услуги,
   ни категории просто не были видны — ни человеку, ни поисковику. */
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:46px; }
.footer-col h5{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; font-size:14px; color:var(--ink-2); margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--text-muted); flex-wrap:wrap; gap:10px; padding-top:22px; border-top:1px solid var(--line); }
@media (max-width:1060px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:680px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
/* ============================================================================
   Маршрут заказа — общая полоса этапов
   ----------------------------------------------------------------------------
   Показывается и в кабинете, и в форме заявки. Без неё заполнение заявки
   выглядит как бюрократия без причины: непонятно, что будет дальше и кто
   за что отвечает. Здесь видно и следующий шаг, и чей он.
   ============================================================================ */
.route{ display:flex; gap:0; border:1px solid var(--line); background:var(--paper-3); overflow-x:auto; scrollbar-width:none; }
.route::-webkit-scrollbar{ display:none; }
.route-step{ flex:1 0 138px; padding:14px 16px 15px; border-right:1px solid var(--line); position:relative; min-width:0; }
.route-step:last-child{ border-right:none; }
.route-step .n{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-muted); }
.route-step .l{ font-size:13px; font-weight:600; margin:5px 0 3px; line-height:1.3; }
.route-step .w{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.route-step .d{ font-size:11.5px; color:var(--text-muted); line-height:1.4; margin-top:5px; }
.route-step.done{ opacity:.55; }
.route-step.done .n::after{ content:' ✓'; color:var(--green); }
.route-step.now{ background:#fff; box-shadow:inset 0 3px 0 var(--gold); }
.route-step.now .l{ color:var(--gold-deep, var(--gold)); }
.route-step.you .w{ color:var(--gold); font-weight:600; }
.route-legend{ font-size:12.5px; color:var(--text-muted); margin-top:10px; line-height:1.5; }

/* ============================================================================
   Правовые страницы
   ============================================================================ */
.legal{ max-width:800px; }
.legal h2{ font-size:19px; margin:34px 0 10px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p{ margin-bottom:12px; font-size:14.5px; line-height:1.7; }
.legal ul, .legal ol{ margin:0 0 14px 20px; font-size:14.5px; line-height:1.7; }
.legal li{ margin-bottom:6px; }
.legal dl{ margin-bottom:14px; }
.legal dt{ font-size:12.5px; color:var(--text-muted); margin-top:10px; }
.legal dd{ font-size:14.5px; }
.legal .op{ font-weight:600; }
.legal-updated{ font-size:13px; color:var(--text-muted); border-top:1px solid var(--line);
                margin-top:34px; padding-top:16px; }
/* Плашка появляется, пока реквизиты оператора не заполнены. */
.legal-draft{ border:1px solid var(--stamp-red); background:rgba(158,42,43,.07); color:var(--text);
              padding:14px 18px; font-size:13.5px; line-height:1.55; margin-bottom:26px; }

/* Согласие в форме: галочка обязательна, по умолчанию не отмечена. */
.consent{ display:flex; gap:9px; align-items:flex-start; margin:14px 0 4px; }
.consent input[type=checkbox]{ width:15px; height:15px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); }
.consent label{ font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.consent label a{ color:var(--gold); text-decoration:underline; }

/* Шаблон заявления об отзыве — оформлен как бланк, чтобы его было видно
   как готовый к копированию текст, а не как продолжение объяснений. */
.revoke-tpl{ border:1px solid var(--line); background:var(--paper-3); padding:22px 24px; margin:14px 0 16px; }
.revoke-tpl p{ font-size:14px; margin-bottom:10px; }
.revoke-tpl p:last-child{ margin-bottom:0; margin-top:18px; }
.revoke-tpl .hint-line{ font-size:11.5px; color:var(--text-muted); }

/* Правовые ссылки стоят отдельной строкой подвала, а не среди навигационных:
   их ищут внизу страницы, и смешивать их с «О нас» и «Услуги» — значит прятать. */
.footer-legal a{ color:var(--text-muted); }
.footer-legal a:hover{ color:var(--gold); }
.tool-foot{ border-top:1px solid var(--line); margin-top:60px; padding:22px 0; }
.tool-foot .wrap{ display:flex; justify-content:space-between; align-items:center;
                  gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); }