/* База в гос-стиле (образец gosdolg.online): синий, красный акцент, белые плашки, Manrope. */
:root {
  --c-blue: #487BF1;
  --c-blue-dark: #3A69DA;
  --c-blue-deep: #3F6FE0;
  --c-red: #EE3F58;
  --c-red-dark: #D8324B;
  --c-grey: #F3F3F3;
  --c-grey-2: #E6E6E6;
  --c-text: #1C1C1C;
  --c-muted: #979797;
  --c-white: #FFFFFF;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1180px;
  --gutter: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 16px/1.45 var(--font); color: var(--c-text); background: var(--c-white); overflow-x: clip; }
img, svg { display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
mark { background: var(--c-red); color: #fff; padding: 0 .28em; border-radius: var(--r-sm); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.panel { margin: var(--gutter); border-radius: var(--r-lg); background: var(--c-blue); color: #fff; position: relative; overflow: hidden; }
.panel::before, .panel::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.panel::before { width: 70vw; height: 70vw; right: -20vw; top: -25vw; }
.panel::after { width: 50vw; height: 50vw; left: -15vw; bottom: -30vw; }
.panel > * { position: relative; z-index: 1; }
.panel--light { background: linear-gradient(180deg, #F7F8FA 0%, #EEF1F6 100%); color: var(--c-text); }
.panel--light::before, .panel--light::after { background: rgba(255,255,255,.55); }
@media (min-width: 1240px) { .panel { margin: 14px auto; max-width: calc(var(--wrap) - 2 * var(--gutter)); } }

/* Лого */
/* Логотип не обрезается (01.10.2026). На узком экране кегль уменьшается сам: логотип шириной
   13,45 кегля должен влезть в шапку (экран минус 60 px полей), отсюда (100vw − 60px) / 13.6 —
   20 px от 332 px ширины и выше. Если всё равно не влез (крупный шрифт в системе, другой текст
   логотипа), плашка «долгов» переносится, а utils.js подбирает --logo-fit, чтобы логотип
   снова встал в одну строку. */
.logo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; text-decoration: none; font-weight: 500; font-size: calc(clamp(14px, (100vw - 60px) / 13.6, 20px) * var(--logo-fit, 1)); line-height: 1; }
.logo__pill { background: var(--c-red); color: #fff; font-weight: 700; padding: 4px 7px; border-radius: 6px; }
.logo--light { color: #fff; }
.logo--dark { color: var(--c-text); }
.page-head { padding: 18px 0; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 12px 22px; border-radius: var(--r-sm);
  border: 0; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn--red { background: var(--c-red); color: #fff; }
.btn--red:hover { background: var(--c-red-dark); }
.btn--blue { background: var(--c-blue); color: #fff; }
.btn--blue:hover { background: var(--c-blue-dark); }
.btn--ghost { background: var(--c-grey); color: var(--c-text); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn__arrow { width: 26px; height: 26px; border-radius: 50%; background-color: rgba(255,255,255,.22); flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--c-blue); text-decoration: underline; cursor: pointer; font-size: 14px; }
.link-btn[disabled] { color: var(--c-muted); text-decoration: none; cursor: default; }

/* Формы */
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 6px; }
.field input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--c-grey-2); border-radius: var(--r-sm); background: #fff; }
.field input:focus { outline: none; border-color: var(--c-blue); }
.field input[aria-invalid="true"] { border-color: var(--c-red); }
.form__error { color: var(--c-red); font-size: 14px; margin: 4px 0 10px; }
.consent { font-size: 12px; color: var(--c-muted); line-height: 1.4; margin-top: 12px; }
.consent a { color: var(--c-blue); }

/* Футер */
.footer { padding: 44px 0 28px; font-size: 13px; }
.footer__grid { display: grid; gap: 24px; }
.footer__grid p { margin-bottom: 6px; }
.footer__title { color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; margin-bottom: 12px; }
.footer a { color: var(--c-text); }
.footer__disclaimer { margin-top: 24px; color: var(--c-muted); font-size: 12px; }
.footer__link { background: none; border: 0; padding: 0; font: inherit; color: var(--c-text); text-decoration: underline; cursor: pointer; }
.modal { border: 0; border-radius: var(--r-md); padding: 0; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 16px 48px rgba(28,28,28,.18); }
.modal::backdrop { background: rgba(28,28,28,.5); }
.modal__body { padding: 28px 24px; position: relative; line-height: 1.6; }
.modal__body h3 { font-size: 20px; margin-bottom: 12px; }
.modal__body p { margin-bottom: 10px; }
.modal__close { position: absolute; right: 12px; top: 8px; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--c-muted); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } .footer { padding: 60px 0 40px; } }

/* Служебные страницы */
.page-doc main { min-height: 60vh; padding: 24px 0 56px; }
.card { background: #fff; border-radius: var(--r-md); box-shadow: 0 12px 40px rgba(28,28,28,.10); padding: 32px 24px; max-width: 560px; margin: 0 auto; }
.card h1 { font-size: 28px; margin-bottom: 10px; }
.verify__text { color: var(--c-muted); }
.code__inputs { display: flex; gap: 10px; margin: 20px 0 12px; }
.code__input { width: 56px; height: 64px; text-align: center; font-size: 28px; font-weight: 700; border: 1.5px solid var(--c-grey-2); border-radius: var(--r-sm); }
.code__input:focus { outline: none; border-color: var(--c-blue); }
.verify__actions { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.change { margin-top: 16px; display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.change label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--c-muted); flex: 1 1 220px; }
.change input { min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--c-grey-2); border-radius: var(--r-sm); }
.thanks { text-align: center; }
.thanks p { color: var(--c-muted); }
.thanks__check { display: inline-block; width: 64px; height: 64px; border-radius: 50%; background: var(--c-blue); position: relative; margin-bottom: 16px; }
.thanks__check::after { content: ""; position: absolute; left: 22px; top: 16px; width: 16px; height: 26px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.thanks__steps { counter-reset: s; text-align: left; margin: 20px auto 24px; max-width: 360px; }
.thanks__steps li { counter-increment: s; padding: 10px 0 10px 40px; position: relative; border-bottom: 1px solid var(--c-grey); }
.thanks__steps li::before { content: counter(s); position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--c-red); color: var(--c-text); display: grid; place-items: center; font-size: 13px; }
/* Политика и согласие: читаемая колонка ~760px, на телефоне — поля .wrap */
.doc { max-width: calc(760px + 2 * var(--gutter)); font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.doc__back { margin-bottom: 20px; font-size: 15px; }
.doc__back a { display: inline-block; padding: 4px 0; color: var(--c-blue); text-decoration: none; }
.doc__back a:hover { text-decoration: underline; }
.doc h1 { font-size: clamp(26px, 6vw, 36px); line-height: 1.2; margin-bottom: 8px; }
.doc h1 + p { color: var(--c-muted); font-size: 14px; margin-bottom: 24px; }
.doc h2 { font-size: clamp(19px, 4.6vw, 22px); line-height: 1.3; margin: 36px 0 12px; scroll-margin-top: 16px; }
.doc p { margin-bottom: 12px; }
.doc ul { list-style: disc; padding-left: 22px; margin: 0 0 14px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--c-muted); }
.doc a { color: var(--c-blue); }