/* Стили всего сайта. Редакторская система (см. tokens.css):
   тёплый кремовый холст, белые поверхности, ВОЛОСЯНЫЕ ГРАНИЦЫ вместо теней,
   единственный оранжевый акцент — только первичные CTA.
   Hex-значений здесь нет: только var(--...). */

/* ═══ БАЗА ══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-ui);font-weight:400;font-size:16px;
  line-height:1.5;background:var(--canvas);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--hairline-strong);transition:text-decoration-color .15s}
a:hover{text-decoration-color:var(--ink)}
::selection{background:var(--primary);color:var(--on-primary)}

/* ═══ ТИПОГРАФИКА ═══════════════════════════════════════════════════ */
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:400}
h1{font-size:clamp(36px,5.6vw,64px);line-height:1.06;letter-spacing:-.03em}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.16;letter-spacing:-.022em}
h3{font-size:clamp(19px,2vw,22px);line-height:1.3;letter-spacing:-.015em;font-weight:500}
h4{font-size:17px;line-height:1.35;font-weight:500;letter-spacing:-.01em}
/* Утилиты: вид h3/h4 без нарушения иерархии заголовков (a11y/SEO) */
.ht-3{font-size:clamp(19px,2vw,22px);line-height:1.3;letter-spacing:-.015em;font-weight:500;color:var(--ink);margin:0}
.ht-4{font-size:17px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink);margin:0}
p{margin:0}
.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--body);
  letter-spacing:-.01em}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.88px;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-md)}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.45;color:var(--muted)}
.fine{font-size:13px;line-height:1.45;color:var(--muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

/* ═══ РАСКЛАДКА ═════════════════════════════════════════════════════ */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s-xl)}
.narrow{max-width:var(--container-narrow)}
.band{padding:var(--s-4xl) 0}
.band-soft{background:var(--canvas-soft);border-block:1px solid var(--hairline-soft)}
.band-surface{background:var(--surface);border-block:1px solid var(--hairline)}
.band-tight{padding:var(--s-3xl) 0}
.stack>*+*{margin-top:var(--s-lg)}
.section-head{max-width:640px;margin-bottom:var(--s-2xl)}
.section-head p{margin-top:var(--s-md);color:var(--body);font-size:17px}

/* ═══ КНОПКИ ════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-sm);
  font-family:var(--font-ui);font-weight:500;font-size:15px;line-height:1;
  cursor:pointer;border:0;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
  height:44px;padding:0 var(--s-xl);border-radius:var(--r-md)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-active)}
.btn-secondary{background:var(--surface);color:var(--ink);
  border:1px solid var(--hairline-strong)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--canvas)}
.btn-ink:hover{background:var(--body)}
.btn-lg{height:52px;padding:0 var(--s-2xl);font-size:16px}
.btn-block{width:100%}
.btn-text{background:none;color:var(--ink);height:auto;padding:0;
  font-size:15px;font-weight:500;gap:var(--s-xs)}
.btn-text:hover{color:var(--primary)}

/* Абзац, стоящий вплотную перед кнопкой, всегда получает отступ.
   Правило структурное: закрывает и текущие места, и будущие. */
p + .btn, p + .hero-actions, .small + .btn, .fine + .btn,
p + button.btn, .lead + .btn, ul + .btn, .dl + .btn{margin-top:var(--s-lg)}
.btn + p, .btn + .small, .btn + .fine, .hero-actions + p{margin-top:var(--s-md)}

/* ═══ ИКОНКИ ════════════════════════════════════════════════════════ */
.icon{display:inline-block;vertical-align:middle;flex:none;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ═══ ПОВЕРХНОСТИ ═══════════════════════════════════════════════════ */
.card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl)}
.card-flat{background:var(--canvas-soft);border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg);padding:var(--s-xl)}
.pill{display:inline-flex;align-items:center;gap:var(--s-xs);
  font-size:13px;font-weight:500;color:var(--body);
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:5px 12px}
.pill-ink{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--success);flex:none}

/* ═══ ШАПКА ═════════════════════════════════════════════════════════ */
.topbar{border-bottom:1px solid var(--hairline);background:var(--canvas);
  position:sticky;top:0;z-index:50}
.topbar-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-lg);height:60px}
.brand{display:inline-flex;align-items:center;gap:var(--s-sm);
  font-weight:500;font-size:15px;color:var(--ink);text-decoration:none;
  letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{width:26px;height:26px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--canvas);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.topbar .btn{height:38px;padding:0 var(--s-lg);font-size:14px}

/* ═══ ГЕРОЙ ═════════════════════════════════════════════════════════ */
.hero{padding:var(--s-4xl) 0 var(--s-3xl)}
.hero-grid{display:grid;gap:var(--s-3xl);align-items:start}
.hero-copy h1{margin-bottom:var(--s-lg)}
.hero-copy .lead{margin-bottom:var(--s-xl);max-width:36em}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s-md);align-items:center}
.hero-note{margin:var(--s-lg) 0;font-size:14px;color:var(--muted);
  line-height:1.5;max-width:44em}

/* Строка доверия под CTA */
.trust-row{display:flex;flex-wrap:wrap;gap:var(--s-lg) var(--s-xl);
  margin-top:var(--s-xl);padding-top:var(--s-lg);
  border-top:1px solid var(--hairline)}
.trust-item{display:inline-flex;align-items:center;gap:var(--s-sm);
  font-size:14px;color:var(--body)}
.trust-item .icon{color:var(--muted)}

/* ═══ КАРТОЧКА «ЧЕРНОВИК ДОКУМЕНТА» — ключевой элемент героя ════════ */
.draft{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-xl);overflow:hidden;position:relative}
.draft-head{padding:var(--s-xl) var(--s-xl) var(--s-lg)}
.draft-head h3{margin-bottom:var(--s-sm);font-size:21px}
.draft-head p{font-size:14px;color:var(--muted);line-height:1.5}
.draft-top{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-md);margin-bottom:var(--s-md);flex-wrap:wrap}
.draft-top .eyebrow{margin:0}
.draft-flag{display:inline-flex;align-items:center;gap:var(--s-sm);
  background:var(--ink);color:var(--canvas);border-radius:var(--r-pill);
  padding:5px 11px;font-size:12px;font-weight:500;white-space:nowrap;flex:none}
.draft-flag .dot{background:var(--success)}

/* Таблица параметров */
.draft-rows{background:var(--canvas-soft);border-block:1px solid var(--hairline-soft);
  padding:var(--s-xs) var(--s-xl)}
.draft-row{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-lg);padding:var(--s-md) 0}
.draft-row+.draft-row{border-top:1px solid var(--hairline-soft)}
.draft-row dt{font-size:14px;color:var(--muted)}
.draft-row dd{margin:0;font-family:var(--font-mono);font-size:14px;
  font-weight:500;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.draft-row dd.accent{color:var(--primary)}

/* Расчёт срока внутри карточки */
.draft-calc{padding:var(--s-xl)}
.draft-calc label{display:block;font-size:14px;font-weight:500;
  color:var(--ink);margin-bottom:var(--s-sm)}
.draft-calc .hint{font-size:13px;color:var(--muted);margin-bottom:var(--s-md);
  line-height:1.45}
.field{width:100%;font-family:var(--font-mono);font-size:16px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  padding:11px var(--s-md);transition:border-color .15s}
.field:focus{outline:none;border-color:var(--primary)}
.field::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55}

.calc-out{margin-top:var(--s-md);border-radius:var(--r-md);
  padding:var(--s-md) var(--s-lg);border:1px solid var(--hairline);
  background:var(--canvas-soft);display:none}
.calc-out.is-shown{display:block}
.calc-out.is-urgent{border-color:var(--primary);background:var(--surface)}
.calc-out.is-late{border-color:var(--hairline-strong);background:var(--canvas-soft)}
.calc-days{font-family:var(--font-mono);font-size:26px;font-weight:500;
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  display:flex;align-items:baseline;gap:var(--s-sm)}
.calc-days .unit{font-size:15px;color:var(--muted);font-weight:400}
.calc-msg{margin-top:var(--s-xs);font-size:14px;color:var(--body);line-height:1.45}
.calc-note{margin-top:var(--s-md);padding-top:var(--s-md);
  border-top:1px solid var(--hairline-soft);
  font-size:13px;color:var(--muted);line-height:1.45}

.draft-foot{border-top:1px solid var(--hairline);padding:var(--s-lg) var(--s-xl);
  display:flex;align-items:center;gap:var(--s-sm);
  font-size:13px;color:var(--muted);background:var(--canvas-soft)}

/* ═══ СЕТКИ ═════════════════════════════════════════════════════════ */
.grid{display:grid;gap:var(--s-lg)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}

/* Образец документа: по центру, увеличение по наведению и с клавиатуры */
.preview{margin:0;background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl);display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  cursor:zoom-in;position:relative;transition:border-color .15s}
.preview:hover,.preview:focus-visible{border-color:var(--hairline-strong);outline:none}
.preview-img{width:100%;max-width:320px;border:1px solid var(--hairline);
  border-radius:var(--r-md);transition:transform .2s ease}
.preview:hover .preview-img{transform:translateY(-2px)}
.preview-cap{display:inline-flex;align-items:center;gap:var(--s-xs);
  margin-top:var(--s-md);font-size:13px;color:var(--muted)}
.preview-cap .icon{color:var(--muted-soft)}
/* Полноэкранный просмотр: только CSS, без скриптов */
.preview-zoom{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:var(--s-xl);
  background:var(--overlay);cursor:zoom-out}
.preview:hover .preview-zoom,.preview:focus-visible .preview-zoom{display:flex}
.preview-zoom img{max-width:min(760px,92vw);max-height:92vh;width:auto;
  border-radius:var(--r-md);border:1px solid var(--hairline-strong);
  background:var(--surface)}
@media (hover:none){
  /* На тач-устройствах наведения нет: показываем образец крупнее сразу */
  .preview-img{max-width:100%}
  .preview-cap,.preview-zoom{display:none}
}

/* Пакет документов */
.pack{display:grid;gap:var(--s-md)}
.pack-item{display:flex;gap:var(--s-md);align-items:flex-start;
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-lg)}
.pack-ic{width:36px;height:36px;border-radius:var(--r-md);flex:none;
  background:var(--canvas);border:1px solid var(--hairline);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.pack-item h4{margin-bottom:var(--s-xs)}
.pack-item p{font-size:14px;color:var(--muted);line-height:1.45}

/* Шаги */
.steps{display:grid;gap:var(--s-lg);counter-reset:step}
.step{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl)}
.step-n{width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--canvas);font-family:var(--font-mono);
  font-size:14px;font-weight:500;display:inline-flex;
  align-items:center;justify-content:center;margin-bottom:var(--s-md)}
.step p{font-size:15px;color:var(--body);line-height:1.55}

/* Факты «почему важно» */
.facts{display:grid;gap:var(--s-lg)}
.fact{display:flex;gap:var(--s-md);align-items:flex-start;
  padding:var(--s-lg) 0;border-top:1px solid var(--hairline)}
.fact .icon{color:var(--muted);margin-top:2px}
.fact p{font-size:15px;line-height:1.55;color:var(--body)}
.fact strong{color:var(--ink);font-weight:500}

/* Сравнение */
.compare{width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden}
.compare th,.compare td{padding:var(--s-md) var(--s-lg);text-align:left;
  font-size:14px;border-bottom:1px solid var(--hairline-soft);vertical-align:top}
.compare thead th{font-weight:500;color:var(--muted);font-size:13px;
  background:var(--canvas-soft);white-space:nowrap}
.compare tbody th{font-weight:400;color:var(--muted);width:26%}
.compare td{color:var(--body)}
.compare .col-us{background:var(--canvas-soft)}
.compare thead .col-us{color:var(--ink);font-weight:600;
  display:table-cell;background:var(--surface-strong)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare .col-us{color:var(--ink);font-weight:500}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* FAQ */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s-lg) 0;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-lg);
  font-size:16px;font-weight:500;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--muted);transition:transform .18s}
.faq details[open] summary .icon{transform:rotate(180deg)}
.faq .answer{padding:0 0 var(--s-lg);font-size:15px;line-height:1.6;
  color:var(--body);max-width:62em}

/* ═══ ФИНАЛЬНЫЙ CTA ═════════════════════════════════════════════════ */
.final{padding:var(--s-4xl) 0}
.final-card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-xl);padding:var(--s-3xl) var(--s-xl)}
.final-grid{display:grid;gap:var(--s-2xl);align-items:start}
.final-lead{margin-top:var(--s-md)}
.final-list{list-style:none;margin:var(--s-lg) 0 0;padding:0;
  display:grid;gap:var(--s-sm)}
.final-list li{display:flex;gap:var(--s-sm);align-items:flex-start;
  font-size:15px;color:var(--body);line-height:1.45}
.final-list .icon{color:var(--success);margin-top:3px;flex:none}
.final-actions{margin-top:var(--s-xl)}
.owner-line{margin-top:var(--s-lg);padding-top:var(--s-md);
  border-top:1px solid var(--hairline-soft);
  font-size:13px;color:var(--muted);line-height:1.5}
.owner-line .mono{color:var(--muted)}

/* ═══ КАТАЛОГ (главная) ═════════════════════════════════════════════ */
.catalog-grid{display:grid;gap:var(--s-lg);grid-template-columns:1fr}
.cat-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--s-xl);height:100%}
.cat-card .pack-ic{margin-bottom:var(--s-md)}
.cat-card h3{margin-bottom:var(--s-sm)}
.cat-sit{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:var(--s-lg)}
.cat-list{list-style:none;margin:0 0 var(--s-lg);padding:0;display:grid;gap:var(--s-sm)}
.cat-list li{display:flex;gap:var(--s-sm);align-items:flex-start;
  font-size:14px;color:var(--body);line-height:1.45}
.cat-list .icon{color:var(--muted-soft);margin-top:3px}
.cat-foot{margin-top:auto;padding-top:var(--s-lg);
  border-top:1px solid var(--hairline-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-md)}
.cat-price{font-family:var(--font-mono);font-size:20px;font-weight:500;
  color:var(--ink);letter-spacing:-.01em}
.cat-price .per{font-family:var(--font-ui);font-size:13px;
  color:var(--muted);font-weight:400;display:block;margin-top:2px}
.cat-soon{border-style:dashed;background:var(--canvas-soft)}
.cat-soon h3,.cat-soon .cat-sit{color:var(--muted)}

/* ═══ АНКЕТА ════════════════════════════════════════════════════════ */
.wizard{max-width:680px;margin:0 auto;padding:var(--s-3xl) 0}
/* Дорожка прогресса: JS управляет шириной #progress-bar (контракт wizard.js) */
.wz-progress{height:3px;border-radius:var(--r-pill);background:var(--hairline);
  overflow:hidden;margin-bottom:var(--s-md)}
.wz-seg{height:100%;width:25%;border-radius:var(--r-pill);
  background:var(--primary);transition:width .25s ease}
.wz-count{font-size:13px;color:var(--muted);margin-bottom:var(--s-sm);
  font-family:var(--font-mono)}
.wz-card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl)}
.wz-card h2{font-size:24px;margin-bottom:var(--s-lg);letter-spacing:-.02em}
.wz-field{margin-bottom:var(--s-xl)}
.wz-field>label,.wz-legend{display:block;font-size:15px;font-weight:500;
  color:var(--ink);margin-bottom:var(--s-sm);line-height:1.4}
.wz-help{font-size:13px;color:var(--muted);margin-bottom:var(--s-sm);line-height:1.45}
.wz-opts{display:grid;gap:var(--s-sm)}
.wz-opt{display:flex;gap:var(--s-md);align-items:flex-start;
  padding:var(--s-md) var(--s-lg);border:1px solid var(--hairline);
  border-radius:var(--r-md);cursor:pointer;background:var(--surface);
  transition:border-color .15s;font-size:15px;line-height:1.4}
.wz-opt:hover{border-color:var(--hairline-strong)}
.wz-opt input{margin:2px 0 0;accent-color:var(--primary);flex:none}
.wz-opt:has(input:checked){border-color:var(--ink)}
select.field{font-family:var(--font-ui);cursor:pointer}
.wz-err{display:none;margin-top:var(--s-sm);font-size:13px;color:var(--error);
  align-items:center;gap:var(--s-xs)}
.wz-err.is-shown{display:flex}
.wz-nav{display:flex;gap:var(--s-md);justify-content:space-between;
  margin-top:var(--s-xl);padding-top:var(--s-lg);border-top:1px solid var(--hairline)}

/* ═══ СТРАНИЦА ЗАКАЗА ═══════════════════════════════════════════════ */
.order{max-width:680px;margin:0 auto;padding:var(--s-3xl) 0}
.order-card{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl)}
.order-code{font-family:var(--font-mono);font-size:14px;color:var(--muted);
  margin-bottom:var(--s-lg)}
.state{display:flex;gap:var(--s-md);align-items:flex-start;
  padding:var(--s-lg);border-radius:var(--r-md);margin-bottom:var(--s-lg);
  background:var(--canvas-soft);border:1px solid var(--hairline)}
.state.is-ok{background:var(--success-bg);border-color:var(--success)}
.state.is-ok .icon{color:var(--success)}
.state.is-err{background:var(--error-bg);border-color:var(--error)}
.state.is-err .icon{color:var(--error)}
.state .icon{margin-top:1px;flex:none;color:var(--muted)}
.state p{font-size:14px;color:var(--body);margin-top:var(--s-xs);line-height:1.5}
.order-card .btn{margin-top:var(--s-lg)}
.order-card>p+p{margin-top:var(--s-md)}
.state strong{color:var(--ink);font-weight:500;font-size:15px}
.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.dl{display:grid;gap:var(--s-sm);margin-top:var(--s-lg)}
.dl-item{display:flex;align-items:center;gap:var(--s-md);
  padding:var(--s-md) var(--s-lg);border:1px solid var(--hairline);
  border-radius:var(--r-md);text-decoration:none;color:var(--ink);
  background:var(--surface);font-size:14px;transition:border-color .15s}
.dl-item:hover{border-color:var(--ink);text-decoration:none}
.dl-item .icon{color:var(--muted);flex:none}
.dl-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-zip{background:var(--ink);color:var(--canvas);border-color:var(--ink);font-weight:500}
.dl-zip:hover{background:var(--body);border-color:var(--body)}
.dl-zip .icon{color:var(--canvas)}

/* ═══ КОНТЕНТНЫЕ СТРАНИЦЫ ═══════════════════════════════════════════ */
.prose{max-width:var(--container-narrow);margin:0 auto;padding:var(--s-3xl) 0}
.prose h1{margin-bottom:var(--s-lg)}
.prose h2{margin:var(--s-2xl) 0 var(--s-md);font-size:clamp(22px,2.4vw,28px)}
.prose h3{margin:var(--s-xl) 0 var(--s-sm)}
.prose p,.prose li{font-size:16px;line-height:1.65;color:var(--body)}
.prose p+p{margin-top:var(--s-md)}
.prose ul,.prose ol{margin:var(--s-md) 0;padding-left:var(--s-xl)}
.prose li+li{margin-top:var(--s-sm)}
.prose strong{color:var(--ink);font-weight:500}
.prose-meta{font-size:13px;color:var(--muted);margin-bottom:var(--s-xl)}
.inset{background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-lg);padding:var(--s-xl);margin:var(--s-2xl) 0}
.inset h3{margin-bottom:var(--s-sm)}
.inset p{font-size:15px;margin-bottom:var(--s-lg)}
.doc-sample{background:var(--canvas-soft);border:1px solid var(--hairline);
  border-radius:var(--r-md);padding:var(--s-lg);font-family:var(--font-mono);
  font-size:13px;line-height:1.7;color:var(--ink);white-space:pre-wrap;
  overflow-x:auto;margin:var(--s-lg) 0}

/* ═══ ПОДВАЛ ════════════════════════════════════════════════════════ */
.footer{background:var(--ink);color:var(--canvas);padding:var(--s-3xl) 0 var(--s-xl);
  margin-top:var(--s-4xl)}
.footer a{color:var(--canvas);text-decoration-color:var(--body)}
.footer a:hover{text-decoration-color:var(--canvas)}
.footer-grid{display:grid;gap:var(--s-xl)}
.footer-brand{font-size:15px;font-weight:500;margin-bottom:var(--s-sm)}
.footer p{font-size:13px;line-height:1.6;color:var(--muted-soft)}
.footer-req{font-family:var(--font-mono);font-size:12px;color:var(--muted-soft);
  line-height:1.7}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-lg);
  font-size:13px;margin-top:var(--s-md)}
.footer-bottom{margin-top:var(--s-xl);padding-top:var(--s-lg);
  border-top:1px solid var(--body);font-size:12px;color:var(--muted-soft);
  line-height:1.6}

/* ═══ COOKIE ════════════════════════════════════════════════════════ */
.cookie{position:fixed;left:var(--s-lg);right:var(--s-lg);bottom:var(--s-lg);
  z-index:100;background:var(--ink);color:var(--canvas);
  border-radius:var(--r-lg);padding:var(--s-lg);display:flex;
  flex-wrap:wrap;align-items:center;gap:var(--s-md);
  font-size:13px;line-height:1.5;max-width:640px;margin:0 auto}
.cookie a{color:var(--canvas)}
.cookie .btn{height:36px;padding:0 var(--s-lg);font-size:13px;
  background:var(--canvas);color:var(--ink);margin-left:auto}
.cookie .btn:hover{background:var(--surface-strong)}

/* ═══ АДАПТИВ ═══════════════════════════════════════════════════════ */
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .catalog-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .pack{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr}
  .band{padding:var(--s-5xl) 0}
  .hero{padding:var(--s-5xl) 0 var(--s-4xl)}
  .final-card{padding:var(--s-4xl)}
}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s-4xl);align-items:center}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .final-grid{grid-template-columns:1fr 380px;align-items:center}
  .facts{grid-template-columns:repeat(2,1fr);gap:0 var(--s-2xl)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}